/* Goldmark Partners: black, white and one gold.
   Inter Tight for headlines and big numbers, Geist for everything else. Thin 1px lines, pill buttons, soft layered shading for depth (see Depth at the end).
   Light by default; dark follows the visitor's system setting. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-tight-latin.woff2") format("woff2"); }

:root {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --ink: #0A0A0A;
  --ink-2: #171717;
  --muted: #666666;
  --line: #EAEAEA;
  --line-2: #D4D4D4;
  --gold: #E0A82E;          /* fills: shapes, the logo, small marks */
  --gold-ink: #8A6208;      /* gold as text on light backgrounds */
  --gold-text: var(--gold-ink);
  --gold-wash: rgba(224, 168, 46, .08);
  --ok: var(--gold-ink);
  --ok-wash: var(--gold-wash);
  --red: var(--ink);       /* errors: ink text, gold underline, no red */
  --red-wash: var(--line);
  --halo-o: .55;
  --art-ink: #0A0A0A;
  --art-ink2: #1C1C1C;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Tight", var(--sans);   /* headlines and big numbers */
  --radius: 0;      /* boxes are square; only buttons are round */
  --radius-sm: 0;
  --sp-section: clamp(4.5rem, 10vw, 8rem);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0A0A;
    --surface: #111111;
    --ink: #EDEDED;
    --ink-2: #D4D4D4;
    --muted: #A1A1A1;
    --line: #262626;
    --line-2: #3A3A3A;
    --gold-text: var(--gold);
    --gold-wash: rgba(224, 168, 46, .1);
    --ok: var(--gold);
    --ok-wash: var(--gold-wash);
    --halo-o: .85;
    --art-ink2: #202020;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 17px/1.6 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; line-height: 1.05; letter-spacing: -.04em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { letter-spacing: -.025em; }
p { margin: 0 0 1em; }
/* Headline face: Inter Tight */
h1, h2, h3, .subhead, .hero-points b, .stat b, .fact b, .study-num span, .sname, .cs-stats dd, .sn-ring b, .sn-label, .proof-quote blockquote, .cs-quote blockquote, .ticker-track { font-family: var(--display); }
/* The second half of a headline is quieter; .gold marks the one gold word. */
.it { font-style: normal; color: var(--muted); }
.grad { color: inherit; }
.gold { font-style: normal; color: var(--gold-text); }
.fine { font-size: .9rem; color: var(--muted); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 780px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--ink); color: var(--bg); padding: 8px 14px; z-index: 100; }
/* Focus: an ink ring with a gold halo, visible on any background */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--gold); }
abbr { text-decoration: none; }

/* Small labels: eyebrows, kinds, tags */
.pill, .eyebrow-sm, .mega-label, .mega-tag, .card-kind, .fact .label, .sec-label, .footer-col h2, .vs-table thead th, .step-top {
  font-family: var(--sans); font-weight: 500; font-size: .86rem; letter-spacing: -.005em; color: var(--muted);
}
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.pill::before, .eyebrow-sm::before { content: ""; width: 8px; height: 8px; background: var(--gold); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
.eyebrow-sm { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sec-label { display: block; margin: 0 0 14px; }
.sub-label { margin: 64px 0 20px; }

/* ---------- Buttons: pills, 40px tall. Primary is black, secondary is white with a line. ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: var(--bg); text-decoration: none; white-space: nowrap;
  font: 500 .95rem/1 var(--sans); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--ink-2); }
.btn:focus-visible { border-radius: 999px; }
.btn-gold { background: var(--ink); color: var(--bg); }
.btn-ghost, .btn-ghost-light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover, .btn-ghost-light:hover { background: var(--surface); border-color: var(--muted); }
.btn-small { min-height: 34px; padding: 0 14px; font-size: .88rem; }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.more { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.more:hover { border-color: var(--ink); }
.more .arr { display: inline-block; transition: transform .2s; color: var(--gold-text); }
.more:hover .arr { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .site-header { background: var(--bg); } }
/* Scroll progress: a thin gold line along the top of the header */
.site-header::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: calc(var(--progress, 0) * 100%); background: var(--gold); z-index: 2; pointer-events: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; max-width: none; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em; color: var(--ink); }
.brand svg { width: 26px; height: 26px; flex: none; }
.logo-a { fill: var(--gold); }
.logo-b { fill: var(--gold-ink); }
.nav { display: flex; align-items: center; gap: 18px; font-size: .92rem; }
.nav a:not(.btn) { text-decoration: none; white-space: nowrap; color: var(--muted); }
.nav a:not(.btn):hover, .nav .nav-group.current > .nav-link, .nav a[aria-current="page"] { color: var(--ink); }
.nav-btns { display: flex; gap: 8px; margin-left: 4px; white-space: nowrap; }
/* Mega menus: a light panel under the header */
.nav-group { position: static; display: inline-flex; align-items: center; gap: 2px; }
.nav-toggle { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; display: inline-grid; place-items: center; width: 18px; height: 30px; border-radius: 6px; }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--ink); }
.nav-toggle::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-menu { position: absolute; left: 0; right: 0; top: 100%; display: none; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .06); padding: 28px 0 32px; white-space: normal; }
.nav-menu.open { display: block; }
.mega-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); gap: 40px; }
.mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mega-label { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.nav a.mega-item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; margin: 0 -10px 2px; color: var(--ink); white-space: normal; }
.nav a.mega-item:hover, .nav a.mega-item[aria-current="page"] { background: var(--bg); color: var(--ink); }
.mega-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .15s, color .15s; }
.mega-ico svg { width: 17px; height: 17px; }
.nav a.mega-item:hover .mega-ico, .nav a.mega-item[aria-current="page"] .mega-ico { border-color: var(--gold); color: var(--gold-text); }
.mega-item b { display: block; font-weight: 500; font-size: .95rem; line-height: 1.3; }
.mega-item small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.35; margin-top: 2px; }
.mega-side { border-left: 1px solid var(--line); padding-left: 28px; display: grid; gap: 16px; align-content: start; }
.mega-promo { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--bg); }
.mega-tag { display: block; }
.mega-promo b { display: block; color: var(--ink); font-weight: 500; font-size: 1.08rem; letter-spacing: -.02em; margin: 10px 0 6px; line-height: 1.25; }
.mega-promo p { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
.nav .mega-all { color: var(--ink); font-weight: 500; }
.nav .mega-all::after { content: " →"; color: var(--gold-text); }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 11px; }
.menu-btn span { display: block; height: 1.5px; background: var(--ink); margin: 6px 0; transition: transform .2s; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- Home hero: copy left, the gold seal centred, the three stages right ---------- */
.hero { position: relative; padding: 0 0 clamp(40px, 6vw, 80px); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px) minmax(0, 1fr); align-items: center; gap: 24px; min-height: min(76vh, 700px); max-width: none; }
.hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.9rem); max-width: 10em; }
.subhead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); max-width: 26em; margin: 18px 0 0; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 32em; margin-top: 18px; }
.hero .lede { font-size: 1rem; }
.hero-points { list-style: none; margin: 0; padding: 0; display: grid; justify-self: end; width: min(100%, 340px); border-bottom: 1px solid var(--line-2); }
.hero-points li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.hero-points li::before { content: ""; width: 11px; height: 11px; margin-top: 9px; background: var(--gold); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
.hero-points b { display: block; font-weight: 500; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); }
.hero-points span { display: block; color: var(--muted); font-size: 1rem; line-height: 1.45; margin-top: 4px; }
.hero-art { position: relative; width: 100%; }
.hero-proof { margin: 18px 0 0; }

/* Polygon art (inline SVG): black faces in both themes, lit from behind in gold */
.art { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.art .shape { transform-box: fill-box; transform-origin: 50% 100%; will-change: transform; }
.art .f-ink { fill: var(--art-ink); }
.art .f-ink2 { fill: var(--art-ink2); }
.art .f-accent { fill: var(--gold); }
.art .f-accent2 { fill: var(--gold-ink); }
.art .f-ring { fill: none; stroke: var(--gold); stroke-width: 3; }
.art .halo { fill: var(--gold); opacity: var(--halo-o); }
.art .glow-in { opacity: .9; }
@media (prefers-color-scheme: dark) { .art .f-ink, .art .f-ink2 { stroke: rgba(255, 255, 255, .1); stroke-width: 1; } }

/* ---------- Trades strip ---------- */
.ticker { background: var(--surface); border-block: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 18px 0; }
.ticker-track { display: inline-block; animation: ticker 50s linear infinite; font-weight: 500; font-size: 1.15rem; letter-spacing: -.02em; }
.ticker-track span { margin: 0 20px; }
.ticker-track em { font-style: normal; color: var(--gold); font-size: .7em; vertical-align: .15em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.sec { padding: var(--sp-section) 0; position: relative; }
.sec + .sec, .sec + .faq, .faq + .sec, .study + .sec, .sec + .contact, .faq + .contact, .services + .sec, .sec + .services { border-top: 1px solid var(--line); }
.sec-paper, .band-black, .band-green { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px 64px; align-items: end; margin-bottom: 44px; }
.sec-head h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 3rem); }
.sec-head .intro { color: var(--muted); font-size: 1.05rem; margin: 0; }
.sec-head .intro + .more { display: inline-block; margin-top: 14px; }
.stage-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }

/* Cards and grids */
.card, .prob, .fact, .ccard, .snap, .mock-ai, .proof-quote, .loop li, .ww > div, .sn-card, .cs-review, .cs-shots, .study-inner, .compare, .form, .incl, .vs-wrap, .post-cta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: border-color .15s; }
a.card:hover { border-color: var(--line-2); }
.card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); }
.card img.wide { aspect-ratio: 16 / 9; }
.card img.cover { object-position: left center; }
.card .card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card .card-kind { margin: 0 0 8px; }
.card h3 { font-size: 1.3rem; line-height: 1.15; margin: 0 0 8px; }
.card p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
.card .go { margin-top: auto; font-weight: 500; }
.card .go::after { content: " →"; color: var(--gold-text); }
.cards + .fine { margin-top: 24px; }

.incl { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.incl > div { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.incl > div:nth-child(3n) { border-right: 0; }
.incl > div:nth-last-child(-n+3) { border-bottom: 0; }
.incl svg { width: 22px; height: 22px; color: var(--gold-text); margin-bottom: 12px; }
.incl h3 { font-size: 1.08rem; margin: 0 0 6px; line-height: 1.25; letter-spacing: -.02em; }
.incl p { margin: 0; color: var(--muted); font-size: .94rem; }
.incl .more { display: inline-block; margin-top: 12px; font-size: .92rem; }
.incl.two { grid-template-columns: repeat(2, 1fr); }
.incl.two > div:nth-child(3n) { border-right: 1px solid var(--line); }
.incl.two > div:nth-child(2n) { border-right: 0; }
.incl.two > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
.incl.two > div:nth-last-child(-n+2):nth-child(odd), .incl.two > div:last-child { border-bottom: 0; }

.probs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prob { padding: 24px; }
.prob .ico { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold-text); margin-bottom: 16px; }
.prob .ico svg { width: 17px; height: 17px; }
.prob h3 { font-size: 1.12rem; line-height: 1.2; margin: 0 0 8px; }
.prob p { color: var(--muted); font-size: .94rem; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.stat { border-top: 1px solid var(--line-2); padding-top: 18px; }
.stat b { display: block; font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.stat b small { font-size: .4em; letter-spacing: -.01em; margin-left: 4px; color: var(--muted); }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.stats + .fine { margin-top: 28px; }

.tick-line { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; font-size: .9rem; color: var(--muted); }
.tick-line li { display: inline-flex; align-items: center; gap: 8px; }
.tick-line li::before { content: ""; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(0 56%, 15% 41%, 36% 62%, 84% 0, 100% 17%, 36% 100%); flex: none; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--muted); }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 10px; background: var(--gold); clip-path: polygon(0 56%, 15% 41%, 36% 62%, 84% 0, 100% 17%, 36% 100%); }
.ticks strong { color: var(--ink); font-weight: 500; }

.pills-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pills-row a, .pills-row span { border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 36px; display: inline-flex; align-items: center; font-weight: 500; font-size: .9rem; text-decoration: none; background: var(--surface); color: var(--ink); }
.pills-row a:hover { border-color: var(--muted); }

.details-prose { max-width: 740px; }
.details-prose h3 { font-size: 1.35rem; margin: 1.6em 0 .45em; }
.details-prose p, .details-prose li { color: var(--muted); }
.details-prose .mock-ai { margin: 28px 0; }

/* How the stages connect */
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.loop li { position: relative; padding: 22px; }
.loop li::after { content: "→"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); color: var(--gold-text); }
.loop li:last-child::after { content: none; }
.loop h3 { font-size: 1.1rem; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.02em; }
.loop p { margin: 0; color: var(--muted); font-size: .94rem; }
.loop-back { margin: 18px 0 0; font-weight: 500; }
.loop-back::before { content: "↺ "; color: var(--gold-text); }

.ww { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ww > div { padding: 26px; }
.ww h3 { font-size: 1.25rem; margin: 0 0 12px; }
.ww ul { margin: 0; padding-left: 1.2em; }
.ww li { margin: 6px 0; color: var(--muted); }
.ww .wont { background: var(--bg); }

/* Example cards: a missed call, an AI answer. Always labelled as examples. */
.snap, .mock-ai { margin: 0; padding: 22px; color: var(--ink); }
.snap-head, .mock-ai .mock-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); }
.snap-head span:first-child, .mock-ai .mock-top b { color: var(--ink); font-weight: 500; }
.snap-q, .mock-ai .mock-q { font-weight: 500; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1.25; margin: 14px 0 6px; color: var(--ink); }
.snap-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.snap-row b { display: block; font-weight: 500; }
.snap-row div span { font-size: .72rem; color: var(--muted); }
.snap blockquote { margin: 0; font-size: .93rem; color: var(--muted); }
.snap mark, .mock-ai mark { background: none; color: var(--ink); font-weight: 500; }
.snap figcaption { font-size: .84rem; color: var(--muted); margin-top: 10px; }
.mock-ai blockquote { margin: 0; border-left: 2px solid var(--gold); padding-left: 14px; color: var(--muted); font-size: .96rem; }
.mock-ai .mock-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tag { font-size: .72rem; font-weight: 500; padding: 4px 9px; white-space: nowrap; }
.tag.no { background: var(--line); color: var(--ink); }
.tag.yes { background: var(--gold); color: #0A0A0A; }
.rec-example { max-width: 620px; margin: 0 0 32px; }

/* Proof */
.proof { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.proof-quote { padding: 32px; position: relative; margin: 0; }
.proof-quote::before { content: "\201C"; position: absolute; right: 24px; top: 2px; font-size: 6rem; line-height: 1; color: var(--gold); opacity: .5; }
.proof-quote blockquote { margin: 0 0 24px; padding-right: 32px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.35; letter-spacing: -.025em; }
.proof-quote figcaption { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: .93rem; }
.proof-quote figcaption b { display: block; color: var(--ink); font-weight: 500; }
.proof + .fine { margin-top: 16px; }
.avatar { width: 44px; height: 44px; background: var(--art-ink); color: var(--gold); display: grid; place-items: center; font-weight: 500; font-size: .9rem; flex: none; }
.proof-facts { display: grid; gap: 16px; }
.fact { padding: 24px; }
.fact .label { margin: 0 0 8px; }
.fact b { display: block; font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.fact p { margin: 10px 0 0; color: var(--muted); font-size: .93rem; }
/* The one inverted card: black with gold, in both themes */
.fact.dark { background: var(--art-ink); border-color: var(--art-ink); color: #EDEDED; }
.fact.dark b { color: var(--gold); }
.fact.dark p, .fact.dark .label { color: #A1A1A1; }
.fact.dark a { color: #EDEDED; }

.study { padding: var(--sp-section) 0 0; }
.study-inner { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; padding: 32px 36px; }
.study-num { margin: 0; font-weight: 500; font-size: 1.2rem; letter-spacing: -.02em; color: var(--muted); white-space: nowrap; }
.study-num span { display: block; font-size: clamp(3.6rem, 8vw, 5.6rem); line-height: .9; color: var(--gold-text); letter-spacing: -.06em; }
.study h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; }
.study p { color: var(--muted); }
.study.study-client { padding: 0 0 var(--sp-section); }

/* Comparison table */
.vs-wrap { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.vs-table th, .vs-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vs-table thead th { background: var(--bg); }
.vs-table thead th.us { color: var(--gold-text); }
.vs-table thead th.us small { display: block; font-size: .62rem; }
.vs-table tbody th { font-weight: 500; }
.vs-table td.us { background: var(--gold-wash); font-weight: 500; color: var(--ink); }
.vs-table td:not(.us) { color: var(--muted); }
.vs-table tr:last-child th, .vs-table tr:last-child td { border-bottom: 0; }
.yes-ico { display: inline-block; width: 10px; height: 10px; background: var(--gold); margin-right: 10px; vertical-align: .06em; flex: none; }

/* Services accordion */
.services { padding: var(--sp-section) 0; }
.svc-list { margin-top: 40px; border-top: 1px solid var(--line-2); }
.srow { border-bottom: 1px solid var(--line-2); }
.srow h3 { margin: 0; font-size: inherit; letter-spacing: normal; }
.srow button { width: 100%; display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 24px; background: none; border: 0; padding: 26px 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.srow button:hover .sname { color: var(--gold-text); }
.sname { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; transition: color .15s; }
.price { font-size: .95rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.plus { width: 22px; height: 22px; position: relative; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1.5px; background: var(--ink); transition: transform .3s; }
.plus::after { transform: rotate(90deg); }
.srow.open .plus::after { transform: rotate(0); }
.sbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.srow.open .sbody { grid-template-rows: 1fr; }
.sbody > div { overflow: hidden; }
.sin { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding: 0 4px 28px; color: var(--muted); }
.svc-note { margin-top: 22px; }

/* Before / after slider */
.ba { padding: var(--sp-section) 0; }
.ba-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.ba p { color: var(--muted); font-size: 1.05rem; max-width: 28em; margin-top: 18px; }
.compare { position: relative; overflow: hidden; user-select: none; aspect-ratio: 5 / 4; --x: 50%; }
.side { position: absolute; inset: 0; padding: 24px; background: var(--surface); }
.side.after { clip-path: inset(0 0 0 var(--x)); background: var(--bg); }
.side .ph { height: 34%; margin-bottom: 16px; }
.side.before .ph { background: var(--line); display: grid; place-items: center; color: var(--muted); font-size: .88rem; }
.side.after .ph { background: linear-gradient(135deg, #1C1C1C 0 50%, #3A3A3A 50% 100%); position: relative; }
.side.after .ph span { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .72rem; padding: 3px 8px; }
.side h3 { font-size: 1.45rem; margin: 0; }
.side .stars { font-size: .93rem; color: var(--muted); margin: 2px 0 12px; }
.side .stars b { color: var(--gold-text); }
.side .r { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.miss { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--line-2); }
.ok { color: var(--gold-text); font-weight: 500; }
.compare-tag { position: absolute; top: 14px; z-index: 2; font-size: .72rem; padding: 4px 10px; }
.compare-tag.left { left: 14px; background: var(--ink); color: var(--bg); }
.compare-tag.right { right: 14px; background: var(--gold); color: #0A0A0A; }
.handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--ink); pointer-events: none; z-index: 3; }
.handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 1rem; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; }
.compare:has(input:focus-visible) { outline: 2px solid var(--ink); box-shadow: 0 0 0 5px var(--gold); }

/* FAQ */
.faq { padding: var(--sp-section) 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; padding: 20px 40px 20px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transition: transform .25s; }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0); }
details p { color: var(--muted); max-width: 38em; padding-bottom: 6px; }

/* Inner page heroes */
.ihero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.ihero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.ihero h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.ihero .lede { margin-top: 8px; }
.ihero .cta-row { margin-top: 26px; }
.ihero-img img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.page-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.page-hero .lede { margin-top: 16px; }
.page-hero + section { padding-top: 56px; }

/* Closing block: one booking button, then the free check form */
.contact { padding: var(--sp-section) 0; border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.contact h3 { font-size: 1.2rem; margin: 0 0 8px; }
.contact p { color: var(--muted); font-size: 1rem; }
.contact p strong { color: var(--ink); font-weight: 500; }
.contact .fine a { color: var(--ink); }
.contact .cta-row { margin: 22px 0 30px; }
.closing-art { width: clamp(130px, 18vw, 190px); margin: 0 0 24px -6px; }

/* Forms */
.form { padding: 28px; display: grid; gap: 16px; position: relative; color: var(--ink); }
.form label { display: block; font-weight: 500; font-size: .92rem; }
.form label > input { display: block; margin-top: 6px; }
.form .opt { font-weight: 400; color: var(--muted); }
.form input, .form textarea { font: inherit; font-size: 1rem; width: 100%; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); }
.form input { height: 44px; }
.form textarea { display: block; margin-top: 6px; padding: 10px 12px; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--muted); }
.form input:focus-visible, .form textarea:focus-visible { border-radius: var(--radius-sm); }
.form input[aria-invalid="true"] { border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .86rem; color: var(--muted); }
.form .consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ink); padding: 0; }
.form .consent[aria-invalid="true"] span { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.form .consent a { color: var(--ink); }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 4px; justify-self: start; }
.form .btn[disabled] { opacity: .6; cursor: wait; }
.form .either { font-size: .85rem; color: var(--muted); margin: -4px 0 2px; }
.ts-box:empty { display: none; }
.form-note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.form-note.error { color: var(--ink); font-weight: 500; border-left: 2px solid var(--gold); padding-left: 10px; }
.form-note.ok { color: var(--gold-text); font-weight: 500; }

/* Book a call */
.book { padding: 24px 0 var(--sp-section); }
.book h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.book .ticks { margin-bottom: 24px; }
.pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.pick legend { font-weight: 500; font-size: .92rem; padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-weight: 500; font-size: .9rem; line-height: 1.2; cursor: pointer; transition: border-color .15s, background .15s; }
.chip span small { font-weight: 400; font-size: .74rem; color: var(--muted); }
.chip span:hover { border-color: var(--muted); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip input:checked + span small { color: var(--line-2); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--gold); }
.pick[aria-invalid="true"] legend { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

/* Contact page */
.contact-page { padding: 24px 0 var(--sp-section); }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ccard { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.ccard h2 { font-size: 1.7rem; }
.ccard p { color: var(--muted); }
.ccard .btn { margin-top: auto; }
.ccard a:not(.btn) { overflow-wrap: anywhere; }

/* CTA band (case study, blog index) */
.cta-band { padding: 64px 0; border-top: 1px solid var(--line); background: var(--surface); }
.cta-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.cta-band .cta-row { margin: 0; }

/* Inner page building blocks */
.detail { padding: 24px 0 90px; }
.stage { padding: 28px 0; border-top: 1px solid var(--line); }
.stage h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.stage p { color: var(--muted); }
.detail code { font-size: .92em; font-weight: 500; background: var(--surface); border: 1px solid var(--line); padding: 1px 5px; }

/* Blog */
.post { padding: 56px 0 96px; }
.post h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08; }
.post h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 1.6em; }
.post h3 { margin-top: 1.4em; }
.post p, .post li, .post dd { color: var(--ink-2); }
.post-back { font-size: .9rem; margin-bottom: 18px; }
.post-back a { color: var(--muted); text-decoration: none; }
.post-back a:hover { color: var(--ink); }
.post-meta { font-size: .8rem; color: var(--muted); margin: 0 0 24px; }
.post-lede { font-size: 1.18rem; }
.post-cover { margin: 0 0 36px; }
.post-cover img { border-radius: var(--radius); border: 1px solid var(--line); }
.table-wrap { overflow-x: auto; margin: 6px 0 22px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--surface); border: 1px solid var(--line); }
.data-table th { text-align: left; font-weight: 500; background: var(--bg); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.data-table td:last-child, .data-table th:last-child { white-space: nowrap; }
.data-table.wrap-last td:last-child, .data-table.wrap-last th:last-child { white-space: normal; }
.post-steps { padding-left: 1.4em; display: grid; gap: 12px; margin: 0 0 1em; }
.post-steps li::marker { font-weight: 600; color: var(--gold-text); }
.post-qa dt { font-weight: 500; margin-top: 18px; }
.post-qa dd { margin: 6px 0 0; color: var(--muted); }
.post-cta { margin-top: 56px; padding: 32px; }
.post-cta h2 { margin-top: 0; }
.post-cta p { color: var(--muted); }
.post-cta .btn { margin: 6px 8px 18px 0; }
.post-sign { font-size: .88rem; margin: 0; }

/* Case study */
.cs-meta { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin: 40px 0 0; border-top: 1px solid var(--line-2); }
.cs-stats div { padding-top: 22px; }
.cs-stats dt { font-weight: 500; font-size: .93rem; color: var(--muted); }
.cs-stats dd { margin: 4px 0 0; font-weight: 500; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.06em; color: var(--ink); }
.cs-stats dd span { display: block; margin-top: 8px; font-size: 1rem; letter-spacing: -.01em; line-height: 1.35; color: var(--muted); }
.cs-next { margin: 28px 0 0; color: var(--muted); }
.cs-next strong { color: var(--ink); font-weight: 500; }
.detail .stage .ticks { margin-bottom: 1em; }
.cs-ba-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; margin-top: 36px; }
.cs-ba-even { grid-template-columns: 1fr 1fr; }
.cs-ba-note { margin-top: 20px; }
.cs-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.cs-row .tag { white-space: normal; text-align: right; }
.cs-shots { margin: 0; padding: 22px; }
.stage .cs-shots { margin-top: 22px; }
.cs-frames { position: relative; margin: 16px 0 0; padding-bottom: 56px; }
.cs-desktop { width: 100%; height: auto; border: 1px solid var(--line); }
.cs-phone { position: absolute; right: 14px; bottom: 0; width: 26%; max-width: 160px; height: auto; border: 1px solid var(--line-2); }
.cs-shots figcaption { font-size: .84rem; color: var(--muted); margin-top: 14px; }
.cs-shots figcaption a { color: var(--ink); }
.cs-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.cs-review { margin: 0; padding: 22px; display: grid; gap: 10px; align-content: start; }
.cs-review .cs-stars { margin: 0; color: var(--gold); letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.cs-review blockquote { margin: 0; font-weight: 500; font-size: 1.02rem; line-height: 1.4; letter-spacing: -.015em; color: var(--ink); }
.cs-review figcaption { font-size: .84rem; color: var(--muted); }
.cs-quote { margin: 40px 0 16px; padding: 28px 0 0; border-top: 1px solid var(--line); }
.cs-quote blockquote { margin: 0 0 14px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.cs-quote figcaption { color: var(--muted); font-size: .93rem; }

/* Privacy, terms and 404 */
.page { padding: 80px 0 110px; }
.page h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.prose p, .prose li { color: var(--muted); }
.prose h2 { font-size: 1.45rem; letter-spacing: -.03em; margin-top: 1.6em; }
.prose a, .prose .link-btn { color: var(--ink); }
.prose .link-btn { font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.prose .unsub-done { background: var(--gold-wash); color: var(--ink); border-left: 2px solid var(--gold); padding: 14px 16px; }
.prose .unsub-done strong { color: var(--ink); }
.not-found { min-height: 55vh; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 0 0 28px; }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-block: 56px 44px; }
.footer-blurb p { font-size: .93rem; max-width: 22em; margin: 14px 0 0; }
.footer-col h2 { margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .brand { color: var(--ink); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; border-top: 1px solid var(--line); padding-top: 22px; font-size: .76rem; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-links a, .cookie-settings { text-decoration: underline; text-underline-offset: 3px; }
.cookie-settings { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }

/* Cookie notice */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .08); font-size: .92rem; }
.consent-bar p { margin: 0; flex: 1 1 320px; }
.consent-bar a { color: var(--ink); }
.consent-actions { display: flex; gap: 8px; }

/* Mobile call-to-action bar */
.cta-bar { display: none; }
@media (max-width: 760px) {
  .cta-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--line); transition: transform .25s var(--ease); }
  .cta-bar .btn { flex: 1; }
  .cta-bar.hide { transform: translateY(110%); }
  body.has-cta-bar { padding-bottom: 64px; }
}

/* Scroll reveal (only when JS is running) */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* Results page (/snapshot) */
#sn-box { display: grid; gap: 20px; }
.sn-card { padding: 26px 28px; }
.sn-card > :last-child { margin-bottom: 0; }
.sn-h { font-size: 1.35rem; line-height: 1.2; margin: 0 0 14px; }
.sn-cta { margin: 18px 0 0; }
.sn-score { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.sn-label { font-weight: 500; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 8px; }
.sn-ring { --p: 0; --c: var(--gold); position: relative; width: 140px; height: 140px; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.sn-ring::before { content: ""; position: absolute; inset: 10px; background: var(--surface); }
.sn-ring b, .sn-ring small { position: relative; }
.sn-ring b { font-size: 2.9rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.sn-ring small { color: var(--muted); font-size: .72rem; }
.sn-engs { list-style: none; margin: 0 0 18px; padding: 0; }
.sn-engs li { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.sn-engs li:last-child { border-bottom: 1px solid var(--line); }
.sn-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sn-es { font-weight: 500; font-size: 1.2rem; min-width: 2.2em; text-align: right; }
.sn-qs { margin: 0 0 6px; padding-left: 20px; color: var(--muted); }
.sn-qs li { margin: 4px 0; }
.sn-teaser { background: var(--art-ink); border-color: var(--art-ink); color: #EDEDED; }
.sn-teaser p, .sn-teaser .sn-h { color: #EDEDED; }
.sn-teaser p { color: #A1A1A1; }
.sn-locked { margin: 0 0 18px; padding-left: 24px; }
.sn-locked li { padding: 6px 0; color: #A1A1A1; }
.sn-blur { filter: blur(7px); user-select: none; font-weight: 500; color: #EDEDED; }
.sn-wait .sn-eng-wait { list-style: none; margin: 16px 0; padding: 0; }
.sn-eng-wait li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sn-eng-wait li b { min-width: 90px; font-weight: 500; }
.sn-spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--gold); animation: sn-spin .9s linear infinite; flex: none; }
@keyframes sn-spin { to { transform: rotate(360deg); } }
.sn-clock { font-variant-numeric: tabular-nums; }
.sn-note { margin: 0; }

[id] { scroll-margin-top: 84px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .menu-btn { display: block; }
  .nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px max(24px, env(safe-area-inset-right, 0px)) 20px max(24px, env(safe-area-inset-left, 0px)); display: none; max-height: calc(100vh - 64px); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav-group { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
  .nav .nav-link { flex: 1; padding: 14px 0; color: var(--ink); font-size: 1rem; }
  .nav-toggle { width: 44px; height: 48px; }
  .nav-menu { flex-basis: 100%; position: static; box-shadow: none; background: none; border: 0; padding: 4px 0 10px; }
  .mega-inner, .mega-cols { grid-template-columns: 1fr; gap: 6px; }
  .mega-label { margin: 10px 0 4px; padding-bottom: 6px; }
  .nav a.mega-item { padding: 8px 10px; margin: 0 -10px; }
  .mega-item small { display: none; }
  .mega-side { border: 0; padding: 0; }
  .mega-promo { display: none; }
  .nav .mega-all { padding: 8px 0; }
  .nav-btns { flex-direction: column; margin: 16px 0 0; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; gap: 28px; text-align: center; }
  .hero-art { order: -1; width: min(420px, 100%); margin: 0 auto; }
  .hero h1, .hero .subhead, .hero .lede { margin-left: auto; margin-right: auto; }
  .hero .cta-row, .hero .tick-line { justify-content: center; }
  .hero-points { justify-self: center; text-align: left; }
  .probs, .cards, .cards-4 { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-blurb { grid-column: 1 / -1; }
  .loop { grid-template-columns: 1fr 1fr; }
  .loop li:nth-child(2)::after { content: none; }
}
@media (max-width: 900px) {
  .sec-head, .ihero-grid, .proof, .contact-grid, .faq-grid, .ba-grid, .study-inner, .contact-cards, .cs-stats, .cs-ba-grid, .cs-reviews, .sin { grid-template-columns: 1fr; }
  .sec-head { gap: 16px; margin-bottom: 32px; }
  .ihero-grid, .contact-grid, .faq-grid, .ba-grid { gap: 36px; }
  .study-inner { gap: 12px; padding: 24px 22px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .incl, .incl.two { grid-template-columns: 1fr; }
  .incl > div, .incl.two > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .incl > div:nth-last-child(-n+3), .incl.two > div:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .incl > div:last-child, .incl.two > div:last-child { border-bottom: 0; }
  .ihero { padding: 40px 0; }
  .page-hero { padding-top: 44px; }
  .snap-row { grid-template-columns: 1fr auto; }
  .snap blockquote { grid-column: 1 / -1; grid-row: 2; }
  .srow button { grid-template-columns: 1fr 24px; gap: 6px 16px; }
  .srow .price { grid-column: 1; grid-row: 2; }
  .srow .plus { grid-column: 2; grid-row: 1; }
  .compare { aspect-ratio: 4 / 5; }
  .cs-stats div { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .cs-reviews { gap: 12px; }
  .cs-shots { padding: 18px; }
  .post-cta { padding: 24px 20px; }
}
@media (max-width: 640px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .nav { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .probs, .cards, .cards-2, .cards-4, .loop, .ww { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 44px 28px; }
  .proof-quote { padding: 24px 20px; }
  .proof-quote::before { font-size: 4.5rem; right: 12px; }
  .loop { gap: 30px; }
  .loop li::after, .loop li:nth-child(2)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -26px; transform: none; }
  .loop li:last-child::after { content: none; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero .cta-row { display: grid; justify-content: stretch; }
  .sn-card { padding: 22px 18px; }
  .sn-score { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .sn-engs li { grid-template-columns: 1fr auto; }
  .sn-tags { grid-column: 1 / -1; grid-row: 2; }
  /* Comparison table becomes one card per row */
  .vs-wrap { border: 0; background: none; overflow: visible; }
  .vs-table { min-width: 0; }
  .vs-table thead { display: none; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: 100%; }
  .vs-table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
  .vs-table tbody th { padding: 14px 16px 6px; border: 0; }
  .vs-table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); font-size: .9rem; }
  .vs-table td::before { content: attr(data-label); font-weight: 500; color: var(--muted); margin-right: auto; white-space: nowrap; text-align: left; }
  .vs-table td.us { align-items: center; text-align: right; }
  .vs-table td.us .yes-ico { margin-right: -2px; }
  .vs-table td.us::before { color: var(--gold-text); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}
@media (forced-colors: active) { .logo-a, .logo-b { fill: CanvasText; } }

/* ---------- Depth: soft layered shading, black and gold only ----------
   Boxes sit slightly above the page, lift on hover, bands are lit from the top,
   and key spots get a faint gold glow. Remove this block to go back to flat. */
:root {
  --sh-1: 0 1px 1px rgba(10, 10, 10, .03), 0 2px 4px rgba(10, 10, 10, .04), 0 8px 24px -8px rgba(10, 10, 10, .08);
  --sh-2: 0 1px 2px rgba(10, 10, 10, .04), 0 6px 12px -2px rgba(10, 10, 10, .06), 0 24px 48px -12px rgba(10, 10, 10, .16);
  --sh-gold: 0 18px 50px -18px rgba(224, 168, 46, .45);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --band-top: #FFFFFF;
  --band-bot: #F3F3F3;
  --glow: rgba(224, 168, 46, .10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sh-1: 0 1px 1px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .35), 0 10px 28px -8px rgba(0, 0, 0, .6);
    --sh-2: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 20px -4px rgba(0, 0, 0, .5), 0 30px 60px -12px rgba(0, 0, 0, .75);
    --sh-gold: 0 18px 60px -16px rgba(224, 168, 46, .35);
    --hi: inset 0 1px 0 rgba(255, 255, 255, .06);
    --band-top: #141414;
    --band-bot: #0C0C0C;
    --glow: rgba(224, 168, 46, .08);
  }
}

/* Boxes: raised off the page, with a lit top edge */
.card, .prob, .fact, .ccard, .snap, .mock-ai, .proof-quote, .loop li, .ww > div, .sn-card, .cs-review, .cs-shots, .study-inner, .compare, .form, .incl, .vs-wrap, .post-cta, .mega-promo {
  box-shadow: var(--hi), var(--sh-1);
  background-image: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 96%, var(--ink)));
}
.ww .wont { background-image: none; }
a.card, .prob, .loop li { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .15s; }
a.card:hover, .prob:hover { transform: translateY(-3px); box-shadow: var(--hi), var(--sh-2); border-color: var(--line-2); }
a.card img { transition: transform .5s var(--ease); }
a.card:hover img { transform: scale(1.02); }

/* Example cards and the comparison table sit highest, with gold light under them */
.snap, .mock-ai, .vs-wrap, .proof-quote, .form { box-shadow: var(--hi), var(--sh-2), var(--sh-gold); }
.vs-table td.us { background: linear-gradient(180deg, rgba(224, 168, 46, .12), rgba(224, 168, 46, .05)); box-shadow: inset 1px 0 0 rgba(224, 168, 46, .25), inset -1px 0 0 rgba(224, 168, 46, .25); }
.vs-table thead th { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 94%, var(--ink))); }

/* The black card: lit from the top corner in gold */
.fact.dark { background: radial-gradient(120% 90% at 100% 0, rgba(224, 168, 46, .22), transparent 55%), linear-gradient(160deg, #1E1E1E, #0A0A0A 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--sh-2); }
.avatar { background: linear-gradient(160deg, #262626, #0A0A0A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 10px rgba(0, 0, 0, .2); }

/* Bands: lit from the top, with a soft shadow where they meet the page */
.sec-paper, .band-black, .band-green, .cta-band, .ticker {
  background: linear-gradient(180deg, var(--band-top), var(--band-bot));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 12px 24px -20px rgba(10, 10, 10, .25), inset 0 -12px 24px -20px rgba(10, 10, 10, .2);
}
@media (prefers-color-scheme: dark) {
  .sec-paper, .band-black, .band-green, .cta-band, .ticker { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 14px 28px -20px rgba(0, 0, 0, .9), inset 0 -14px 28px -20px rgba(0, 0, 0, .9); }
}
/* A faint gold glow behind each band's heading */
.band-black::before, .sec-paper::before, .contact::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 12% 0, var(--glow), transparent 70%); }
.band-black > *, .sec-paper > *, .contact > * { position: relative; }
.contact { position: relative; background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 95%, var(--ink))); }
.ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Page tops: a soft gold light from above, fading into the page */
.hero, .ihero, .page-hero { background: radial-gradient(70% 60% at 50% 0, var(--glow), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, var(--ink)), var(--bg) 40%); }
.ihero, .page-hero { box-shadow: inset 0 -16px 24px -24px rgba(10, 10, 10, .3); }

/* Header: a soft shadow over the page */
.site-header { box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -18px rgba(10, 10, 10, .18); }
.nav-menu { box-shadow: var(--sh-2); }
.consent-bar { box-shadow: var(--hi), var(--sh-2); }

/* Buttons: a lit top edge and a soft drop */
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(10, 10, 10, .12), 0 4px 12px -4px rgba(10, 10, 10, .25); background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent); transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .2s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(10, 10, 10, .12), 0 10px 24px -8px rgba(224, 168, 46, .55); }
.btn:active { transform: translateY(0); }
.btn-ghost, .btn-ghost-light { box-shadow: var(--hi), 0 1px 2px rgba(10, 10, 10, .06); background-image: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 95%, var(--ink))); }
.btn:focus-visible { box-shadow: 0 0 0 5px var(--gold); }

/* Small gold marks get a little bevel */
.yes-ico, .tag.yes { background: linear-gradient(160deg, #F0C25A, var(--gold) 55%, #B9871F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(138, 98, 8, .35); }
.prob .ico, .mega-ico { background: linear-gradient(180deg, var(--surface), var(--bg)); box-shadow: var(--hi), 0 2px 6px -2px rgba(10, 10, 10, .15); }

@media (prefers-reduced-motion: reduce) {
  a.card:hover, .prob:hover, .btn:hover, a.card:hover img { transform: none; }
}

/* Inter Tight is already narrow: give it a little more room than Geist had */
h1, h2, .sname, .stat b, .fact b, .study-num span, .cs-stats dd, .sn-ring b { letter-spacing: -.018em; }
h3, .hero-points b, .sn-label, .proof-quote blockquote, .cs-quote blockquote { letter-spacing: -.008em; }
.subhead, .ticker-track { letter-spacing: 0; }