/* Vantage public site, on top of vantage.css (the shared tokens and components). */
body.site { background: var(--cream); }
.st-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
main { max-width: none; padding: 0; }
/* Anchor jumps land below the sticky header. */
.site [id] { scroll-margin-top: 88px; }

/* The header's Log in link sits beside the buttons on wide screens and in the phone menu below that. */
.st-head-login { margin-right: 2px; }
/* ---------- Header: forest bar and the Audits mega menu, after Superside ---------- */
.st-head { position: sticky; top: 0; z-index: 30; background: var(--forest); color: var(--cream); }
.st-head .brand { color: var(--cream); }
.st-head-row { display: flex; align-items: center; gap: 14px; min-height: 72px; }
.st-by { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--on-dark-muted); padding-left: 14px; border-left: 1px solid var(--on-dark-line); white-space: nowrap; }
/* Everything in the bar sits on its centre line. */
.st-head-row > * { align-self: center; }
.st-by { line-height: 1; }
/* One baseline for the whole bar: the wordmark and "by Mario Malik" are nudged onto the menu text's
   baseline (in em, so it holds at every size). Without this the 30px wordmark sits 5px low. */
.st-head .brand span { position: relative; top: -0.165em; }
.st-by { position: relative; top: 0.1em; }
.st-menu { margin-left: 20px; }
.st-menu ul { display: flex; gap: 2px; }
.st-menu-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--cream); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.st-menu-link:hover { background: var(--forest-2); }
.st-menu-link:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.st-menu-link svg { width: 12px; height: 12px; transition: transform 0.15s; }
.st-menu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
/* A small dot marks the open menu and the current page, as on Superside. */
.st-menu-link.is-current::before, .st-menu-trigger[aria-expanded="true"]::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
.st-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.st-burger { display: none; }
.st-head .btn-primary:focus-visible, .st-head .st-btn-ghost:focus-visible, .st-burger:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.st-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); color: var(--forest); box-shadow: 0 24px 48px rgba(var(--forest-rgb), 0.18); padding: 32px 0 40px; }
.st-mega-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; align-items: start; }
/* Column labels: serif italic pills. */
.st-mega-label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 8px; margin-bottom: 12px; border-radius: 8px; background: var(--forest); color: var(--cream); font: italic 400 19px/1.1 var(--serif); text-decoration: none; }
.st-mega-label svg { width: 12px; height: 12px; }
/* A column without a label still lines its first link up with the labelled column beside it. */
.st-mega-col-plain { padding-top: 48px; }
.st-mega-label:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-mega-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--forest); text-decoration: none; }
.st-mega-list li:last-child a { border-bottom: 0; }
.st-mega-list b { display: block; font: 600 15px/1.3 var(--sans); }
.st-mega-list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.st-mega-list svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.st-mega-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.st-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--lime); color: var(--forest); font: 600 11px/1 var(--sans); font-style: normal; vertical-align: 2px; margin-left: 4px; }
.st-mega-feature { display: flex; flex-direction: column; gap: 4px; color: var(--forest); text-decoration: none; }
.st-mega-art { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; aspect-ratio: 16 / 10; max-width: 100%; margin-bottom: 10px; padding: 18px 20px; border-radius: var(--r-md); background: var(--forest); color: var(--cream); }
.st-mega-art .label { color: var(--on-dark-muted); }
.st-mega-score { font: 400 64px/0.9 var(--serif); letter-spacing: -0.02em; }
.st-mega-score small { font-size: 24px; color: var(--on-dark-muted); }
.st-mega-meter { display: grid; grid-template-columns: 30fr 20fr 20fr 31fr; gap: 4px; }
.st-mega-meter i { height: 6px; border-radius: 99px; background: rgba(var(--cream-rgb), 0.2); }
.st-mega-meter i.on { background: var(--cream); }
.st-mega-meter i.on:nth-child(1) { background: var(--red-fill); }
.st-mega-meter i.on:nth-child(2) { background: var(--orange-fill); }
.st-mega-meter i.on:nth-child(3) { background: var(--amber-fill); }
.st-mega-meter i.on:nth-child(4) { background: var(--green-fill); }
.st-mega-feature b { font: 600 15px/1.3 var(--sans); }
.st-mega-feature small { font-size: 13px; color: var(--muted); }
.st-mega-feature:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* The page behind an open menu blurs and dims, as on Superside. */
.st-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(var(--forest-rgb), 0.35); backdrop-filter: blur(6px); }
html.st-locked { overflow: hidden; }
.st-mobile { display: none; }

/* ---------- Section furniture ---------- */
/* Numbered section labels with a short rule, after Echelon One; Superside's eyebrow style per DESIGN.md. */
/* Section label: an outlined pill (a rule before it read as an em dash). */
.st-num { display: inline-flex; align-items: center; padding: 6px 12px 5px; border: 1px solid var(--line-strong); border-radius: 999px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.st-section { padding: 96px 0; }
.st-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 40px; }
.st-section-head h2.section { margin: 0; max-width: 20ch; }
.st-intro { max-width: 46ch; color: var(--ink-2); font-size: 16px; }
.st-intro .link { font-weight: 600; white-space: nowrap; }
.st-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.st-split h2.section { margin: 0; }

/* Forest bands */
.st-band { background: var(--forest); color: var(--cream); padding: 96px 0; }
.st-band .st-num { color: var(--on-dark-muted); border-color: rgba(var(--cream-rgb), 0.28); }
.st-band h2.section em { color: var(--mint); }
.st-prose p { font-size: 17px; line-height: 1.65; color: var(--on-dark-text); max-width: 60ch; }
.st-prose p + p { margin-top: 18px; }
.st-pull { font: italic 400 30px/1.25 var(--serif) !important; color: var(--cream) !important; padding-top: 10px; }

/* ---------- Hero ---------- */
.st-hero { background: var(--forest); color: var(--cream); padding: 88px 0 96px; }
.st-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 56px; align-items: center; }
.st-hero .st-num { color: var(--on-dark-muted); border-color: rgba(var(--cream-rgb), 0.28); }
.st-hero h1 { font: 400 68px/1.04 var(--sans); letter-spacing: -0.02em; max-width: 13ch; }
/* A headline whose line breaks are set in the markup, so the 13ch cap does not re-wrap it. */
.st-hero h1.st-h1-wide { max-width: none; }
.st-hero h1 em { font-family: var(--serif); font-style: italic; font-size: 1.1em; line-height: 1; color: var(--mint); }
.st-lead { font-size: 19px; line-height: 1.55; color: var(--on-dark-text); max-width: 52ch; margin: 24px 0 28px; }
/* Audit pages: Superside's service hero. A wide two-line headline, one action, then a row of
   cards along the foot of the band for what the audit looks at, running off the edge on small screens. */
.st-hero-service { padding-bottom: 40px; }
/* A photo behind the hero at full colour, as on Superside: a black fade up from the foot of the band,
   and a softer one behind the text on the left that clears towards the right. No green tint. */
/* The photo is set inline on the section (style="background-image: url(...)"), so its path resolves against the page. */
.st-hero.has-photo { position: relative; isolation: isolate; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
/* --shade sets how dark the fade behind the text is; brighter photos set a higher value on the section. */
.st-hero.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%),
  linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 50%),
  linear-gradient(90deg, rgba(0, 0, 0, calc(var(--shade, 0.6) + 0.1)) 0%, rgba(0, 0, 0, var(--shade, 0.6)) 30%, rgba(0, 0, 0, calc(var(--shade, 0.6) * 0.55)) 55%, rgba(0, 0, 0, 0) 85%); }
/* Pages with a photo hero: the header sits over the photo, transparent until the page scrolls or a menu opens. */
.has-photo-hero .st-head { background: transparent; transition: background 0.2s; }
.has-photo-hero .st-head.is-scrolled, .has-photo-hero .st-head.is-open { background: var(--forest); }
.has-photo-hero .st-hero.has-photo { margin-top: -72px; padding-top: 160px; }
/* The account login: a photo behind centred text, so an even shade instead of the left-hand fade. */
.ld.has-photo { position: relative; isolation: isolate; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
.ld.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.75) 100%); }
.has-photo-hero .ld.has-photo { margin-top: -72px; padding-top: 136px; }
/* The audit's name above the headline, plain like Superside's (not a pill). */
.st-eyebrow { margin: 0 0 18px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--on-dark-muted); }
.st-hero-service h1 { font-size: 64px; line-height: 1.12; max-width: 24ch; }
.st-hero-service .st-lead { max-width: 58ch; font-size: 18px; }
.st-hero-cards { margin-top: 64px; }
.st-marquee { overflow: hidden; }
.st-marquee-track { display: flex; width: max-content; animation: st-marquee var(--marquee-time, 40s) linear infinite; }
/* Margins, not gap, so the track is exactly two equal halves and the loop has no jump. */
.st-marquee-track li { flex: none; margin-right: 12px; }
@keyframes st-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .st-marquee { overflow-x: auto; padding: 0 32px 6px; scrollbar-width: thin; }
  .st-marquee-track { animation: none; }
  .st-marquee-track .is-copy { display: none; }
}
.st-hero-cards a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 20px 10px 10px; border-radius: var(--r-md); background: var(--cream); color: var(--forest); font: 500 15px/1.25 var(--sans); text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.st-hero-cards a:hover { background: var(--surface); }
.st-hero-cards a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
/* A small framed screen: Vimeo's product detail, in Vantage colours. */
.st-hero-thumb { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 9px; border-radius: 8px; background: var(--forest); }
.st-hero-thumb i { display: block; height: 3px; border-radius: 2px; background: var(--cream); opacity: 0.85; }
.st-hero-thumb i:nth-child(2) { width: 70%; background: var(--cream); opacity: 0.5; }
.st-hero-thumb i:nth-child(3) { width: 45%; background: var(--cream); opacity: 0.35; }

.st-form { display: flex; flex-direction: column; gap: 16px; padding: 32px; color: var(--forest); box-shadow: var(--lift); border: 0; }
.st-form h2 { font: 400 32px/1.1 var(--sans); letter-spacing: -0.01em; margin-top: -6px; }
.st-form h2 em { font-family: var(--serif); font-style: italic; font-size: 1.1em; line-height: 1; }
.st-form .form-error { margin: 0; }
.st-submit { min-height: 52px; font-size: 16px; }
.st-submit[disabled] { opacity: 0.7; cursor: progress; }
.st-fine { font-size: 13px; color: var(--muted); }
.st-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 02 The record ---------- */
.st-record { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.st-record > div { padding: 28px 24px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.st-record > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.st-fig { font: 400 64px/1 var(--serif); letter-spacing: -0.02em; }
.st-fig small { font-size: 26px; color: var(--muted); margin-left: 2px; }
.st-record p { font-size: 14px; color: var(--ink-2); }
.st-record-foot { margin-top: 24px; font-size: 13px; color: var(--muted); }
/* Small data drawings above each figure: decorative, the figure carries the meaning. */
.st-viz { height: 28px; display: flex; align-items: flex-end; gap: 3px; flex-wrap: wrap; align-content: flex-end; }
.st-viz i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--line-strong); }
.st-viz i.on { background: var(--forest); }
.st-viz .meter-mini { display: grid; grid-template-columns: 30fr 20fr 20fr 31fr; gap: 3px; width: 100%; }
.st-viz .meter-mini span { height: 8px; border-radius: 99px; background: var(--line-strong); }
.st-viz .meter-mini span.on { background: var(--forest); }
.st-viz .meter-mini span.on:nth-child(1) { background: var(--red-fill); }
.st-viz .meter-mini span.on:nth-child(2) { background: var(--orange-fill); }
.st-viz .meter-mini span.on:nth-child(3) { background: var(--amber-fill); }
.st-viz .meter-mini span.on:nth-child(4) { background: var(--green-fill); }
.st-viz .fill { width: 100%; height: 8px; border-radius: 99px; background: var(--line-strong); overflow: hidden; }
.st-viz .fill b { display: block; height: 100%; background: var(--forest); }

/* ---------- 04 Categories ---------- */
.st-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.st-cats li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.st-cat-pts { font: 400 40px/1 var(--serif); grid-row: span 2; }
.st-cats b { font: 600 17px/1.3 var(--sans); }
.st-cats p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.st-cat-bar { grid-column: 2; height: 4px; border-radius: 99px; background: var(--sunken); position: relative; }
.st-cat-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: var(--forest); }

/* ---------- 05 Journey ---------- */
.st-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.st-journey li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); }
.st-journey li b { font: 600 17px/1.3 var(--sans); }
.st-journey li p { font-size: 14px; color: var(--ink-2); }
.st-journey li.is-now { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.st-journey li.is-now .label { color: var(--on-dark-muted); }
.st-journey li.is-now p { color: var(--on-dark-text); }
.st-chip { margin-top: auto; align-self: flex-start; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(var(--cream-rgb), 0.5); font: 600 12px/1.3 var(--sans); }
/* The arrow between stages */
.st-journey li + li::before { content: ""; position: absolute; left: -10px; top: 34px; width: 8px; height: 8px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: rotate(45deg); }

/* ---------- 06 Steps ---------- */
/* How it works: four small square cards in a row, the step number on top and the text at the foot. */
.st-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-steps li { display: flex; flex-direction: column; gap: 16px; aspect-ratio: 1; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.st-alt .st-steps li { background: var(--cream); }
.st-step-n { font: 400 40px/1 var(--serif); color: var(--line-strong); }
.st-steps li > div { margin-top: auto; }
.st-steps b { display: block; font: 500 19px/1.25 var(--sans); letter-spacing: -0.01em; }
.st-steps .label { display: block; margin: 6px 0 8px; }
.st-steps p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.st-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: 40px; padding: 26px 30px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--forest); border-radius: var(--r-md); }
.st-callout p { font: 500 19px/1.4 var(--sans); max-width: 52ch; }

/* ---------- 07 Pricing ---------- */
.st-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-price { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--cream); }
/* On the pricing page the audit cards sit on cream, so they are white. */
.st-prices .st-price { background: var(--surface); }
.st-price h3 { font: 500 22px/1.2 var(--sans); letter-spacing: -0.01em; }
.st-amount { font: 400 44px/1 var(--serif); margin: 4px 0 6px; }
.st-amount small { font: 500 14px/1 var(--sans); color: var(--muted); margin-right: 4px; vertical-align: middle; }
.st-price.is-free .st-amount small { color: var(--on-dark-muted); }
.st-price ul { display: grid; gap: 8px; margin-bottom: 8px; }
.st-price li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2); }
.st-price li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px; border-left: 1.6px solid var(--forest); border-bottom: 1.6px solid var(--forest); transform: rotate(-45deg); }
.st-price .btn { margin-top: auto; align-self: flex-start; }
.st-price.is-free { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.st-price.is-free .label { color: var(--on-dark-muted); }
.st-price.is-free li { color: var(--on-dark-text); }
.st-price.is-free li::before { border-color: var(--mint); }
/* Placeholder until Mario confirms the figure: visibly unfinished so it can't ship by accident. */
.st-tbc { display: inline-block; font: 600 14px/1 var(--sans); padding: 10px 14px; border: 1.5px dashed var(--ink-2); border-radius: 999px; color: var(--ink-2); vertical-align: middle; }

/* ---------- 08 Why ---------- */
.st-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--on-dark-line); }
.st-why > div { padding: 28px 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.st-why > div + div { padding-left: 28px; border-left: 1px solid var(--on-dark-line); }
.st-why .label { color: var(--mint); }
.st-why p { color: var(--on-dark-text); font-size: 16px; line-height: 1.6; }
/* Six principles on the Why Vantage page: two rows of three. */
.st-why > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.st-why > div:nth-child(n+4) { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--on-dark-line); }
.st-more { margin-top: 32px; }
.link-light { color: var(--cream); text-decoration-color: rgba(var(--cream-rgb), 0.5); }
/* Who it's for, and who it isn't. */
.st-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-fit .card { display: flex; flex-direction: column; gap: 16px; }
.st-notfit { display: grid; gap: 10px; }
.st-notfit li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.st-notfit li::before { content: "\00D7"; position: absolute; left: 3px; top: -1px; color: var(--muted); font-size: 17px; }

/* ---------- 09 FAQ ---------- */
.st-faq details { border-top: 1px solid var(--line); }
.st-faq details:last-child { border-bottom: 1px solid var(--line); }
.st-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font: 500 18px/1.35 var(--sans); padding: 14px 0; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--muted); }
.st-faq details[open] summary::after { content: "\2212"; }
.st-faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; font-size: 16px; }

/* ---------- 10 Close and footer ---------- */
.st-close { background: var(--forest); color: var(--cream); padding: 104px 0; text-align: center; }
.st-close h2 { font: 400 56px/1.08 var(--sans); letter-spacing: -0.015em; max-width: 18ch; margin: 0 auto; }
.st-close h2 em { font-family: var(--serif); font-style: italic; font-size: 1.1em; line-height: 1; color: var(--mint); }
.st-close-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.st-btn-ghost { background: transparent; color: var(--cream); border-color: rgba(var(--cream-rgb), 0.6); }
.st-btn-ghost:hover { background: var(--forest-2); }
.st-btn-ghost-dark { background: transparent; color: var(--forest); border-color: var(--forest); }
.st-foot { padding-block: 40px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.st-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.st-foot-row p { color: var(--ink-2); font-size: 14px; }

/* ---------- Home and audit pages (built from src/site/) ---------- */
.st-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.st-hero .st-lead { margin-bottom: 24px; }
.st-hero .st-lead + .st-lead { margin-top: -8px; }
.st-hero-price { margin-top: 18px; font-size: 14px; color: var(--on-dark-muted); }

/* Hero illustration: one customer's visit, read as returns. Labelled an illustration, never a finding. */
.st-visit { margin: 0; background: var(--forest-2); border: 1px solid var(--on-dark-line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.st-visit figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.st-visit figcaption .label { color: var(--on-dark-muted); }
.st-visit .marker.est { border-color: rgba(var(--cream-rgb), 0.5); color: var(--on-dark-text); }
.st-visit ol { display: grid; gap: 0; }
.st-visit li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--on-dark-line); font-size: 15px; color: var(--cream); }
.st-visit li:first-child { border-top: 0; }
.st-visit li .status { flex: none; }
.st-visit > p { font-size: 14px; color: var(--on-dark-muted); }

.st-prose-light p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }
.st-prose-light p + p { margin-top: 16px; }
.st-quote { margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--forest); }
.st-quote p { font: italic 400 30px/1.25 var(--serif) !important; color: var(--forest) !important; }
.st-quote cite { display: block; margin-top: 8px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); font-style: normal; }
.st-intro-dark { color: var(--on-dark-text); }

/* Where revenue is lost: the five stages across the band */
.st-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--on-dark-line); }
.st-stages li { padding: 24px 20px 4px 0; display: flex; flex-direction: column; gap: 10px; }
.st-stages li + li { padding-left: 20px; border-left: 1px solid var(--on-dark-line); }
.st-stages .label { color: var(--mint); }
.st-stages p { color: var(--on-dark-text); font-size: 15px; line-height: 1.55; }
.st-stages .link { color: var(--cream); font-size: 14px; font-weight: 600; margin-top: auto; }
.st-grow { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--on-dark-line); }
.st-grow h3 { font: 500 24px/1.2 var(--sans); margin-bottom: 20px; }
.st-grow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.st-grow-grid b { display: block; font: 600 17px/1.3 var(--sans); margin-bottom: 8px; }
.st-grow-grid p { color: var(--on-dark-text); font-size: 15px; }

/* The loop: Touchpoint, Load, Return, Commitment */
.st-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-loop li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.st-loop li + li::before { content: ""; position: absolute; left: -10px; top: 32px; width: 8px; height: 8px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: rotate(45deg); }
.st-loop b { font: 600 17px/1.3 var(--sans); }
.st-loop p { font-size: 14px; color: var(--ink-2); }
.st-returns { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.st-note { margin-top: 24px; max-width: 70ch; color: var(--ink-2); font-size: 15px; }

/* The five audits as linked cards */
.st-amount small { font: 500 13px/1 var(--sans); color: var(--muted); margin-right: 4px; vertical-align: middle; }
.st-start { align-items: start; }

/* Pricing on the home page: the free score and the audits */
.st-pricing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.st-price-links { display: grid; gap: 0; }
.st-price-links li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 10px 0 !important; border-top: 1px solid var(--line); }
.st-price-links li::before { display: none; }
.st-price-links li:first-child { border-top: 0; }
.st-price-links span { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.st-close-lead { margin: 16px auto 0; color: var(--on-dark-text); font-size: 18px; max-width: 48ch; }

/* Audit pages */
.st-question { font: 400 40px/1.15 var(--serif); font-style: italic; letter-spacing: -0.01em; max-width: 22ch; }
.st-drops { display: grid; gap: 0; margin-top: 12px; }
.st-drops li { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.st-drops li:first-child { border-top: 0; }
.st-drops li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 10px; height: 1.5px; background: var(--forest); }
.st-look { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.st-look li { padding: 20px 0; border-top: 1px solid var(--line); }
.st-look b { font: 600 17px/1.3 var(--sans); }
.st-look p { font-size: 15px; color: var(--ink-2); margin-top: 4px; max-width: 56ch; }
.st-table-wrap { overflow-x: auto; margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.st-six { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-six th, .st-six td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.st-six thead th { white-space: normal; min-width: 104px; }
.st-six tbody th { font: 500 13px/1.4 var(--mono); text-transform: none; letter-spacing: 0; color: var(--forest); background: var(--surface); white-space: nowrap; }
.st-get { display: flex; flex-direction: column; gap: 24px; }
.st-get .sc-list li { font-size: 16px; }
.st-get-price { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.st-compare-wrap { min-width: 0; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.st-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-compare th, .st-compare td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.st-compare thead th, .st-compare thead td { border-top: 0; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); padding-block: 16px 12px; }
.st-compare thead th:last-child { color: var(--forest); }
.st-compare tbody th { font: 500 14px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--forest); width: 40%; }
.st-compare-more { margin-top: 20px; }
.st-compare td { color: var(--ink-2); }
.st-compare th { background: transparent; }
.st-compare td:last-child, .st-compare thead th:last-child { background: var(--cream); color: var(--forest); }
.st-compare td svg { width: 16px; height: 16px; color: var(--forest); vertical-align: -3px; }
.st-compare td.is-no { color: var(--muted); }
.st-adjacent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-adjacent a { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); text-decoration: none; color: var(--forest); }
.st-adjacent a:hover { border-color: var(--forest); }
.st-adjacent b { font: 600 17px/1.3 var(--sans); }
.st-adjacent-all { text-align: center; }
.st-journey-nav { padding: 40px 0; }

/* Footer */
.st-foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; }
.st-foot-brand { display: flex; flex-direction: column; gap: 12px; }
.st-foot-grid p { color: var(--ink-2); font-size: 14px; }
.st-foot-grid ul { display: grid; gap: 8px; margin-top: 10px; font-size: 14px; }
.st-hero-short { padding: 72px 0 80px; }
.st-hero-short h1 { max-width: 18ch; }
.st-price-name { color: inherit; text-decoration: none; }
.st-price-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-price-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.st-price-actions .btn { margin-top: 0; }
.st-price-actions .link { font-size: 14px; font-weight: 600; }
.st-every li { font-size: 16px; }

/* ---------- Free score: the loading page, the completion bar and accounts ---------- */
.sc-loading { padding-block: 64px; }
.ld { background: var(--forest); color: var(--cream); padding: 64px 0 88px; }
.ld-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(320px, 5fr); gap: 48px; align-items: start; }
.ld .st-num { color: var(--on-dark-muted); border-color: rgba(var(--cream-rgb), 0.28); }
.ld h1 { font: 400 56px/1.06 var(--sans); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ld h1 em { font-family: var(--serif); font-style: italic; font-size: 1.1em; line-height: 1; color: var(--mint); }
.ld-lead { color: var(--on-dark-text); font-size: 17px; margin-top: 18px; max-width: 52ch; }
.ld-details { max-width: 520px; margin-top: 28px; border-top: 1px solid var(--on-dark-line); }
.ld-details div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--on-dark-line); }
.ld-details dt { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--on-dark-muted); padding-top: 3px; }
.ld-details dd { color: var(--cream); font-size: 16px; overflow-wrap: anywhere; }
.ld-details dd.mono { font-size: 14px; }
.ld-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 0; color: var(--forest); box-shadow: var(--lift); }
.ld-pct { font: 400 120px/0.85 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ld-pct small { font-size: 44px; color: var(--muted); margin-left: 4px; }
.ld-bar { height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.ld-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--forest); }
.ld-queue { font-size: 14px; color: var(--ink-2); }
.ld-tasks li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ld-dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; border: 1.5px solid var(--line-strong); transition: background 0.3s, border-color 0.3s; }
.ld-dot svg { width: 13px; height: 13px; }
/* Ticks are green at Mario's request: a step the engine has genuinely finished. */
.ld-tasks li.is-done .ld-dot { background: var(--green-fill); border-color: var(--green-fill); color: #fff; }
.ld-tasks li.is-done .ld-dot svg { animation: ld-pop 0.35s ease-out; }
.ld-tasks li.is-now { font-weight: 600; }
.ld-tasks li.is-now .ld-dot { border-color: var(--forest); border-top-color: transparent; animation: sc-spin 0.9s linear infinite; }
.ld-tasks li.is-todo { color: var(--muted); }
.ld-task small { margin-left: 6px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes ld-pop { from { transform: scale(0.4); opacity: 0; } }
.ld-done { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; padding: 32px; border: 0; color: var(--forest); box-shadow: var(--lift); }
.ld-done.is-entering { animation: ld-rise 0.5s ease-out; }
@keyframes ld-rise { from { opacity: 0; transform: translateY(16px); } }
.ld-done-head { display: flex; align-items: flex-start; gap: 16px; }
.ld-done-tick { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: var(--green-fill); color: #fff; }
.ld-done-tick svg { width: 20px; height: 20px; }
.ld-done h2 { font: 400 32px/1.1 var(--sans); letter-spacing: -0.01em; }
.ld-done-head p { margin-top: 6px; color: var(--ink-2); }
.ld-auth { display: flex; flex-direction: column; gap: 18px; }
.ld-auth .form-error { margin: 0; }
.ld-auth-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.ld-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ld-switch { padding: 0; border: 0; background: none; cursor: pointer; font: 600 14px/1.3 var(--sans); color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.sc-result { padding-block: 28px 96px; }
.sc-signed { margin-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.ac-form { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 0; color: var(--forest); box-shadow: var(--lift); }
.ac-form .btn { align-self: flex-start; }
.ac-form .form-error { margin: 0; }
.ac-login-stack { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ac-login-stack > * { width: 100%; max-width: 520px; }
.ac-login-stack .ld-copy { text-align: center; }
.ac-login-stack .ld-lead { margin-inline: auto; }
.ac-new { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--on-dark-text); }
.ac-new p { margin: 0; max-width: 34ch; }
.ac-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; padding-top: 24px; }
.ac-head h1 { font: 400 48px/1.06 var(--sans); letter-spacing: -0.015em; }
.ac-head h1 em { font-family: var(--serif); font-style: italic; font-size: 1.1em; line-height: 1; }
.ac-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-scores { display: grid; gap: 10px; }
.ac-scores li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ac-scores small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ac-reading { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ac-reading b { font: 400 26px/1 var(--serif); color: var(--forest); }
.ac-next { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.ac-next p { max-width: 70ch; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .ld-tasks li.is-done .ld-dot svg, .ld-done.is-entering { animation: none; }
  .ld-tasks li.is-now .ld-dot { animation: none; border-top-color: var(--forest); }
}

/* ---------- Free score page ---------- */
.sc-main { padding: 48px 0 96px; }
.sc-status { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.sc-status h1 { font: 400 48px/1.08 var(--sans); letter-spacing: -0.015em; }
.sc-status h1 em { font-family: var(--serif); font-style: italic; font-size: 1.1em; line-height: 1; }
.sc-steps { display: grid; gap: 10px; margin-top: 8px; }
.sc-steps li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-weight: 500; }
.sc-steps .dot { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.sc-steps .dot svg { width: 13px; height: 13px; }
.sc-steps li.done .dot { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.sc-steps li.now { border-color: var(--forest); }
.sc-steps li.now .dot { border-color: var(--forest); border-top-color: transparent; animation: sc-spin 0.9s linear infinite; }
.sc-steps li.todo { color: var(--muted); }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-steps li.now .dot { animation: none; border-top-color: var(--forest); } }
.sc-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: 32px; align-items: stretch; }
.sc-hero h1 { font: 400 44px/1.1 var(--sans); letter-spacing: -0.015em; }
.sc-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.sc-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sc-list, .st-price ul { display: grid; gap: 8px; }
.sc-list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2); }
.sc-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px; border-left: 1.6px solid var(--forest); border-bottom: 1.6px solid var(--forest); transform: rotate(-45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .st-by { display: none; }
  .st-mega-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .st-mega-feature { display: none; }
}
/* Phones and small tablets: the menu folds into a labelled Menu button with the same links. */
@media (max-width: 1000px) {
  .st-head-row { min-height: 64px; gap: 10px; }
  .has-photo-hero .st-hero.has-photo { margin-top: -64px; padding-top: 112px; }
  .has-photo-hero .ld.has-photo { margin-top: -64px; padding-top: 96px; }
  .st-menu, .st-head-start, .st-head-login, .st-mega { display: none !important; }
  .st-burger { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(var(--cream-rgb), 0.6); border-radius: 999px; background: none; color: var(--cream); font: 600 14px/1 var(--sans); cursor: pointer; }
  .st-burger svg { width: 18px; height: 18px; }
  .st-mobile:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 64px); overflow-y: auto; padding: 8px 0 28px; background: var(--cream); color: var(--forest); box-shadow: 0 24px 48px rgba(var(--forest-rgb), 0.18); }
  .st-mobile .label { display: block; margin: 18px 0 2px; }
  .st-mobile-links a { display: block; padding: 14px 0; border-top: 1px solid var(--line); color: var(--forest); font: 600 16px/1.3 var(--sans); text-decoration: none; }
  .st-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .st-mobile-actions .btn { width: 100%; }
}
@media (max-width: 1100px) {
  .st-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-stages li, .st-stages li + li { padding: 20px 16px 8px 0; border-left: 0; border-top: 1px solid var(--on-dark-line); }
  .st-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-loop li + li::before { display: none; }

  .st-record { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-record > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .st-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-journey li + li::before { display: none; }
  .st-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .st-wrap { padding: 0 16px; }
  .st-hero { padding: 48px 0 56px; }
  .st-hero-grid, .st-split, .sc-hero, .ld-grid { grid-template-columns: 1fr; gap: 32px; }
  .ld { padding: 40px 0 56px; }
  .ld h1 { font-size: 40px; }
  .ld-pct { font-size: 88px; }
  .ld-card, .ld-done, .ac-form { padding: 24px 20px; }
  .ac-scores li { grid-template-columns: minmax(0, 1fr) auto; }
  .ac-scores li .btn { grid-column: 1 / -1; justify-self: start; }
  .ac-head h1 { font-size: 38px; }
  .st-hero h1 { font-size: 46px; }
  .st-hero-service h1 { font-size: 46px; }
  .st-hero-cards { margin-top: 40px; }
  .st-lead { font-size: 17px; }
  .st-form { padding: 24px 20px; }
  .st-section, .st-band { padding: 64px 0; }
  .st-cats, .sc-cats, .sc-next, .st-look, .st-grow-grid, .st-pricing, .st-adjacent, .st-foot-grid { grid-template-columns: 1fr; }
  .st-compare th, .st-compare td { padding: 12px; }
  .st-question { font-size: 30px; }
  .st-why { grid-template-columns: 1fr; }
  .st-fit { grid-template-columns: 1fr; }
  .st-why > div:nth-child(n+4) { margin-top: 24px; padding-top: 28px; }
  .st-why > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--on-dark-line); margin-top: 24px; }
  .st-close { padding: 72px 0; }
  .st-close h2 { font-size: 38px; }
}
@media (max-width: 600px) {
  .st-hero h1 { font-size: 38px; }
  .st-hero-service h1 { font-size: 38px; }
  .st-record { grid-template-columns: 1fr 1fr; }
  .st-record > div, .st-record > div + div { padding: 22px 12px 8px 0; border-left: 0; }
  .st-record > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .st-fig { font-size: 48px; }
  .st-journey, .st-prices, .st-stages, .st-loop { grid-template-columns: 1fr; }
  .st-visit li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .st-steps li { aspect-ratio: auto; min-height: 220px; padding: 20px; }
  .st-step-n { font-size: 32px; }
  .sc-status h1 { font-size: 36px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: each row's label on its own line, the free and full answers side by side under it, so neither column hides off-screen. */
@media (max-width: 640px) {
  .st-compare, .st-compare thead, .st-compare tbody { display: block; }
  .st-compare tr { display: grid; grid-template-columns: 1fr 1fr; }
  .st-compare thead td { display: none; }
  .st-compare tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 4px; }
  .st-compare tbody td { border-top: 0; padding-top: 6px; }
}

/* The example report in a pop-up over the page, the page behind it blurred. */
.st-report { position: fixed; inset: 0; margin: auto; width: min(1240px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--cream); color: var(--forest); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35); overflow: hidden; }
.st-report[open] { display: flex; flex-direction: column; }
.st-report::backdrop { background: rgba(var(--forest-rgb), 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.st-report-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.st-report-actions { display: flex; align-items: center; gap: 14px; }
.st-report-cta { min-height: 40px; padding: 0 18px; font-size: 14px; }
.st-report-actions .link { font-size: 14px; font-weight: 600; }
.st-report-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--forest); cursor: pointer; }
.st-report-close svg { width: 16px; height: 16px; }
.st-report-close:hover { border-color: var(--forest); }
.st-report-close:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.st-report-frame { flex: 1; width: 100%; border: 0; background: var(--cream); }
html.st-report-open { overflow: hidden; }
@media (max-width: 600px) {
  .st-report { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* ==========================================================================
   Public site palette: mariomalik.com's colours (mariomalik-website/src/styles/tokens.css),
   adopted 2026-10-25. Only colours change: fonts, sizes, spacing and shapes stay Vantage's.
   The tokens are redefined on body.site, so client workspaces, onboarding and review keep the
   forest palette from vantage.css. The previous green site is kept in design/green-site-2026-10-25/.
   ========================================================================== */

body.site {
  --forest: #000000; --forest-2: #1a1a1a; --cream: #f0f0f0; --surface: #ffffff;
  --lime: #0063e1; --mint: #8a8a8a; --muted: #6b6b6b; --ink-2: #666666;
  --line: #0000001a; --line-strong: #00000033; --on-dark-muted: #a3a3a3; --on-dark-line: #ffffff26;
  --sunken: #e6e6e6; --cream-rgb: 255, 255, 255; --forest-rgb: 0, 0, 0; --on-dark-text: #d4d4d4;
  --lift: 0 12px 32px rgba(0, 0, 0, 0.10);
}
body, body.site { background: #f0f0f0; color: #000; }
.st-lead, .st-intro, .st-prose-light p { color: #666; }
.st-hero .st-lead, .st-band p, .st-close .st-close-lead { color: #d4d4d4; }
/* The serif-italic phrase keeps its type, in the primary blue (Mario, 2026-10-25). */
h1 em, h2 em, h3 em, .st-question em { color: var(--lime) !important; }
/* The one accent: blue CTAs with white labels. */
.btn-primary { background: #0063e1 !important; color: #fff !important; border-color: #0063e1 !important; }
.btn-primary:hover { background: #0056c4 !important; }
.btn-dark { background: #000; color: #fff; }
.st-steps li { background: #fff; }
.st-alt { background: #fff; }
.st-alt .st-steps li { background: #f0f0f0; }
.st-num { border-color: #00000033; color: #6b6b6b; }
.st-hero .st-num, .st-band .st-num { border-color: #ffffff40; color: #a3a3a3; }
.st-hero-cards a { background: #fff; color: #000; }
.st-hero-thumb { background: #000; }
.st-compare td:last-child, .st-compare thead th:last-child { background: #f0f0f0; }
.st-foot { background: #000; color: #fff; border-top: 0; }
.st-foot .brand, .st-foot .link, .st-foot p { color: #fff; }
.st-foot .label { color: #a3a3a3; }
/* Header as on mariomalik.com (Header.module.css): a black-to-clear gradient at the top of the page,
   running 56px past the bar, that crossfades to dark frosted glass with a hairline once the page scrolls. */
.st-head, .has-photo-hero .st-head, .has-photo-hero .st-head.is-scrolled { background: transparent !important; isolation: isolate; }
.st-head::before, .st-head::after { content: ""; position: absolute; z-index: -1; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.st-head::before { inset: 0 0 -56px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 78%, transparent 100%); }
.st-head::after { inset: 0; opacity: 0; border-bottom: 1px solid #ffffff1a; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.st-head.is-scrolled::before, .st-head.is-open::before { opacity: 0; }
.st-head.is-scrolled::after { opacity: 1; }
.st-head.is-open { background: #000 !important; }

/* Badges and other small lime fills become the blue accent, so their text turns white. */
.st-badge { background: #0063e1; color: #fff; }

/* Privacy policy and other legal pages: one readable column. */
.st-legal { max-width: 760px; display: flex; flex-direction: column; gap: 36px; }
.st-legal h2 { font: 500 24px/1.25 var(--sans); letter-spacing: -0.01em; margin-bottom: 12px; }
.st-legal p, .st-legal li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.st-legal p + p, .st-legal ul + p, .st-legal p + ul { margin-top: 12px; }
.st-legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.st-legal b { color: var(--forest); font-weight: 600; }
.st-legal-date { font-size: 14px !important; color: var(--muted) !important; }

/* The note shown by coming-soon.js on the static launch. */
.st-soon-toast { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0 auto; max-width: 560px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--forest); color: var(--cream); font: 500 15px/1.4 var(--sans); border-radius: 12px 12px 0 0; box-shadow: var(--lift); }
.st-soon-toast[hidden] { display: none; }