/* /web: the website service for advisory and wealth firms. Same house style as the firm's pages (DESIGN.md); its own audience,
   so it keeps its own nav and booking link, and the firm's AI work appears only in the lede and the footer. */

.page-head .lede { text-wrap: pretty; }
.web-band { padding: var(--band) 0 0; }
.web-band h2 { margin-bottom: var(--gap-block); }
.web-band:has(+ .closing) { padding-bottom: var(--band); }

/* who it's for: one column per trade, the name in the heading face (as the home page's specialisms) */
.web-cols { list-style: none; margin: 0; padding: var(--gap-rule) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-list) var(--split-gap); }
.web-cols h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3-row); line-height: 1.2; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.web-cols p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* what you get: three short groups, the group name in the heading face */
.web-get { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-list) var(--split-gap); padding-top: var(--gap-rule); border-top: 1px solid var(--line); }
.web-get h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3-row); line-height: 1.2; color: var(--text); }
.web-get ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.web-get li { font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* the price: heading left, price right */
.web-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--split-gap); align-items: start; }
.web-split h2 { margin-bottom: 0; }

/* examples: three concept screenshots */
.web-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--split-gap); }
.web-shots figure { margin: 0; }
.web-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.web-shots figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* price */
.web-price { padding-top: var(--gap-rule); border-top: 1px solid var(--line); }
.web-price p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.web-price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.web-amount { font-family: var(--mono); font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.web-price-note { font-size: 16px; color: var(--text-2); }
.web-small { font-size: 14px !important; color: var(--text-3) !important; }

/* how it works: four numbered steps */
.web-steps { list-style: none; margin: 0; padding: var(--gap-rule) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-list) var(--split-gap); counter-reset: step; }
.web-steps li { counter-increment: step; }
.web-steps li::before { content: counter(step); display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.web-steps h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3-row); line-height: 1.2; color: var(--text); }
.web-steps p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }


@media (max-width: 960px) {
  .web-cols, .web-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-get { grid-template-columns: minmax(0, 1fr); }
  .web-shots { grid-template-columns: minmax(0, 1fr); }
  .web-split { grid-template-columns: minmax(0, 1fr); gap: var(--gap-block); }
}
@media (max-width: 560px) {
  .web-cols, .web-steps { grid-template-columns: minmax(0, 1fr); }
  .web-amount { font-size: 34px; }
}

/* 2026-10-02: the page is written for boutique advisory and wealth firms */
.web-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px var(--split-gap); align-items: center; }
.web-map { margin: 0; justify-self: end; width: 100%; max-width: 360px; }
.web-map-pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: pg; }
.web-map-pages li { counter-increment: pg; position: relative; padding: 14px 14px 14px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 1.3; color: var(--text); }
.web-map-pages li::before { content: counter(pg); position: absolute; left: 14px; top: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }
.web-map figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.web-strip { margin: 0; padding-top: var(--gap-rule); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.web-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.web-note { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.web-tiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-list) var(--split-gap); padding-top: var(--gap-rule); border-top: 1px solid var(--line); }
.web-tier h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3-row); line-height: 1.2; color: var(--text); }
.web-tier .web-price-line { margin: 8px 0 12px; }
.web-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.web-tier li { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.web-tier--main { padding-top: 12px; border-top: 2px solid var(--text); }
.web-tier:not(.web-tier--main) { padding-top: 12px; border-top: 1px solid var(--line); }
.web-tiers .web-small { grid-column: 1 / -1; margin: 8px 0 0; }
.web-why p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.web-why { padding-top: var(--gap-rule); border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .web-hero { grid-template-columns: minmax(0, 1fr); }
  .web-map { justify-self: start; }
  .web-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-tiers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .web-cols--3, .web-steps--5, .web-map-pages { grid-template-columns: minmax(0, 1fr); } }
.web-steps p { text-wrap: balance; }