:root{
    --ink:#0f1319;
    --ink-2:#3f4754;
    --ink-3:#69717f;
    --paper:#fbfcfe;
    --card:#ffffff;
    --tint:#eef1f6;
    --tint-2:#e4e9f1;
    --hair:#e2e6ed;
    --line:#d2d8e2;
    --accent:#2c53d8;
    --accent-ink:#1e3db0;
    --up:#0e8a4f;
    --down:#d13b3b;
    /* soft panels — the youthful ecommerce palette */
    --lav:#e3e8fd;
    --lav-2:#eef1fe;
    --sky:#e6f0fc;
    --blush:#fbe8ef;
    --peach:#fdeee4;
    --dark:#0d1330;
    --dark-2:#161d3d;
    --dark-hair:#2b3358;
    --max:1200px;
    --r:20px;
  }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
    background:var(--paper);color:var(--ink);
    font-family:'TikTok Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
/* kill orphan words — no single word alone on a line */
h1,h2,h3,h4,h5,.plan-name,.cat-label,.route b,.sit b,.quote{text-wrap:balance}
p,.lede,.plan-who,.cell p,.feat p,.route p,.sit p{text-wrap:pretty}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:#fff}

/* ---------- eyebrow labels (replaces the 01/02 numbers) ---------- */
.eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
    color:var(--accent);margin-bottom:16px;
  }
.spread .eyebrow{color:var(--accent-ink)}
.num{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.num span{display:block;margin-top:2px}
.col{max-width:64ch}
.row{display:block}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--hair);padding:18px 0;background:var(--card);position:sticky;top:0;z-index:50}
.masthead .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.wordmark{font-size:18px;font-weight:800;letter-spacing:-.02em}
.masthead nav{font-size:14px;font-weight:600;color:var(--ink-3)}
.masthead nav a{color:var(--ink-2);text-decoration:none;margin-left:26px}
.masthead nav a:hover{color:var(--accent)}
.masthead nav a.here{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:3px}
.masthead nav a.nav-cta{
    background:var(--ink);color:#fff;border-radius:999px;padding:9px 18px;
  }
.masthead nav a.nav-cta:hover{background:var(--accent);color:#fff}
.masthead nav a.here.nav-cta{border-bottom:none;color:#fff}
@media(max-width:760px){
    .masthead{padding:12px 0}
    .masthead .wrap{gap:10px;padding:0 20px}
    .masthead nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;width:100%}
    /* Nav links were 22px tall — small for a thumb, and this is the most-tapped
       thing on the site. Padding takes them to ~34px without moving anything. */
    .masthead nav a{margin-left:0;font-size:13.5px;padding:6px 0;display:inline-block}
    .masthead nav a.nav-cta{margin-left:auto;padding:8px 16px}
  }
a.wordmark{text-decoration:none;color:inherit}

/* ---------- hero ---------- */
header{padding:68px 0 0;background:linear-gradient(170deg,#e2e8fd 0%,#eef1fe 38%,#f7f4fb 68%,var(--paper) 100%)}
/* Two-part headline: statement, then the turn. The second clause is a real
   subordinate line — own row, regular weight against the bold above it —
   rather than the same bold text tinted grey. The old #8b93b5 sat at
   2.95:1, under the 3:1 floor for large text; --ink-3 is 4.79:1. */
h1 .mute{
    display:block;color:var(--ink-3);font-weight:400;
    letter-spacing:-.022em;margin-top:.06em;
  }
/* Two-part headlines need more room than one-part ones: now that the second
   clause is its own line, the 16/17ch cap would break it mid-phrase.
   Browsers without :has() fall back to the tighter cap — wraps more, still
   renders correctly. */
h1:has(.mute){max-width:20ch}
header.subpage h1:has(.mute){max-width:24ch}

/* ---------- sub-page header: compact, left, straight to the point ---------- */
header.subpage{
    background:none;padding:30px 0 0;
    border-bottom:1px solid var(--hair);margin-bottom:0;
  }
/* Single column by decision — the subtitle used to sit in a second column
   beside the h1 and read as a patch stuck next to a headline. The titles
   carry the page on their own; the content below does the explaining. */
header.subpage .wrap{display:block;padding-bottom:30px}
header.subpage h1{
    font-size:clamp(30px,3.6vw,44px);line-height:1.06;max-width:16ch;margin-bottom:0;text-align:left;
  }
header.subpage .eyebrow{margin-bottom:10px}
/* Buttons in a page header are secondary to the title — smaller than the
   full-size ones used inside sections and in the closing band. */
header.subpage .cta-row{margin-top:24px}
header.subpage .cta-row .btn,header.subpage .cta-row .btn-quiet{
    padding:10px 19px;font-size:13.5px;
  }
@media(max-width:900px){header.subpage h1{max-width:none}}
.hero-center{text-align:center}
.hero-center h1,.hero-center .lede{margin-left:auto;margin-right:auto}
.hero-center .cta-row{justify-content:center}
h1{
    font-weight:700;
    font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-.032em;
    max-width:17ch;margin-bottom:26px;
  }
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.cta-row{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
    display:inline-block;background:var(--ink);color:#fff;
    padding:13px 24px;text-decoration:none;font-size:14.5px;font-weight:700;
    border:1px solid var(--ink);border-radius:8px;
    transition:background .16s,border-color .16s,transform .16s;
  }
.btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.btn-quiet{
    display:inline-block;background:var(--card);color:var(--ink);
    padding:12px 22px;border:1px solid var(--line);border-radius:8px;text-decoration:none;
    font-size:14.5px;font-weight:700;transition:border-color .16s,color .16s;
  }
.btn-quiet:hover{border-color:var(--accent);color:var(--accent)}
.go{display:inline-block;margin-top:20px;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none}
.go::after{content:" \2192";color:var(--accent)}
.go:hover{color:var(--accent)}
.spread .go{color:var(--ink)}
.btn-note{font-size:14px;color:var(--ink-3);width:100%;margin-top:2px}
.hero-center .btn-note{text-align:center}

/* ---------- hero glimpse — overlaps the gradient edge, SaaS-style ---------- */
.glimpse{margin:48px auto -120px;max-width:940px;position:relative;z-index:3}
.glimpse .report{box-shadow:0 34px 80px -34px rgba(15,19,25,.34),0 4px 14px rgba(15,19,25,.05)}
/* only the data area is vignetted — the header bar and captions stay crisp */
.glimpse .fade{
    -webkit-mask-image:
      linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.06) 95%,transparent 100%),
      linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.06) 95%,transparent 100%),
      linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
    mask-composite:intersect;
  }
.glimpse .report-bar{position:relative;z-index:4}
.glimpse .report-bar .cnt{color:var(--accent);font-weight:600}
/* caption sits OUTSIDE the mask so it stays fully legible */
.glimpse-note{
    text-align:center;font-size:13.5px;color:var(--ink-2);margin-top:12px;position:relative;z-index:4;
  }
header{padding-bottom:0}
.after-hero{padding-top:170px}
@media(max-width:760px){.glimpse{margin-bottom:-70px}.after-hero{padding-top:110px}}

/* decorative dot grid, like the reference heroes */
.dots{position:absolute;width:150px;height:96px;opacity:.5;pointer-events:none;
  background-image:radial-gradient(var(--accent) 1.6px,transparent 1.6px);background-size:17px 17px}
/* Were at -8px, which pushed past the viewport and gave the homepage a
   horizontal scrollbar. Flush to the edge instead — same look, no overflow. */
.dots.l{left:0;top:34%}
.dots.r{right:0;top:20%}
@media(max-width:1080px){.dots{display:none}}

/* ---------- icon circle on cards ---------- */
.ic{
    width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#e3e8fd,#eef1fe);margin-bottom:16px;
  }
.ic svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic.blush{background:linear-gradient(135deg,#fbe8ef,#fdf3f6)}
.ic.blush svg{stroke:#d8467e}
.ic.sky{background:linear-gradient(135deg,#e6f0fc,#f2f8fd)}
.ic.sky svg{stroke:#1e7fd0}

/* ---------- connected step flow (3 icons joined by a line) ---------- */
.flow{display:grid;grid-template-columns:1fr;gap:34px;margin-top:48px;position:relative}
@media(min-width:860px){
    .flow{grid-template-columns:repeat(3,1fr);gap:0 30px}
    .flow::before{
      content:"";position:absolute;top:38px;left:16%;right:16%;height:2px;
      background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 15px);
    }
  }
.step-i{text-align:center;position:relative}
.step-i .ring{
    width:78px;height:78px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:2px solid var(--lav);box-shadow:0 10px 26px -14px rgba(44,83,216,.4);position:relative;z-index:2;
  }
.step-i .ring svg{width:31px;height:31px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step-i .n{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px}
.step-i h4{font-size:19px;font-weight:700;letter-spacing:-.016em;margin-bottom:8px}
.step-i p{font-size:15.5px;color:var(--ink-2);line-height:1.62;margin:0 auto;max-width:32ch}

/* ---------- anchor row under hero (plain text, like the reference) ---------- */
.anchor-pills{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin:36px auto 0;padding:16px 0;border-top:1px solid var(--hair)}
.anchor-pills a{
    text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:600;
    transition:color .16s;
  }
.anchor-pills a:hover{color:var(--accent)}

/* ---------- category row: thin label left, wide content right ----------
   The reader always knows which bucket they're in. Turns a long article
   into labelled sections enterable at any point. */
.cat{display:grid;grid-template-columns:1fr;gap:22px;padding:48px 0;border-top:1px solid var(--hair)}
.cat:first-of-type{border-top:1px solid var(--line)}
@media(min-width:900px){.cat{grid-template-columns:250px 1fr;gap:0 64px}}
.cat-label{font-size:clamp(21px,2.3vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:11ch}
.cat-body{display:grid;grid-template-columns:1fr;gap:32px 40px}
@media(min-width:620px){.cat-body{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cat-body{grid-template-columns:repeat(3,1fr)}}
.cell h4{font-size:16px;font-weight:700;letter-spacing:-.008em;margin-bottom:6px}
.cell p{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 10px}
.cell .go{margin-top:0;font-size:13.5px}
.cat-intro{max-width:44ch;font-size:15px;color:var(--ink-3)}

/* ---------- side-by-side: headline left, stacked content right ----------
   Used for FAQ and any list that needs a standing title beside it. */
.sideby{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.sideby{grid-template-columns:1fr 1.35fr;gap:0 72px;align-items:start}}
.sideby h2{margin-bottom:12px}
.sideby .side-note{font-size:15px;color:var(--ink-3);max-width:34ch;margin:0}

/* ---------- section opener: thin headline left, blurb right ---------- */
.opener{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:44px}
/* Was 1fr 1fr with a 64px gap — but neither column filled its half (short
   headline, 44ch paragraph), so the band read as text, gap, gap, text.
   Narrower headline column and a tighter gap closes the hole. */
@media(min-width:900px){.opener{grid-template-columns:0.85fr 1fr;gap:0 48px;align-items:end}}
.opener h2{margin-bottom:0;max-width:18ch}
.opener p{margin:0;color:var(--ink-2);font-size:17.5px;line-height:1.6;max-width:52ch}

/* ---------- centred section header ---------- */
.center-head{text-align:center;margin-bottom:44px}
/* 20ch stacked short headings into three narrow lines. 26ch keeps every
   single-sentence heading on one or two wide lines instead. */
.center-head h2{max-width:26ch;margin-left:auto;margin-right:auto;margin-bottom:16px}
/* Centred subtitles run WIDE — long lines, few of them. A narrow measure
   stacks them into a skinny middle column, which is the look we're avoiding.
   66ch is ~72-75 characters of prose, which lands most of these in two lines.
   Line breaks fall after each sentence via .s, not wherever the measure runs
   out, so the rag is authored rather than accidental. */
.center-head p{
    max-width:66ch;margin:0 auto;color:var(--ink-2);font-size:18.5px;line-height:1.6;
  }
/* The sentence-block rule applies to every centred context, not just
   .center-head — the homepage hero lede is the biggest instance of it. */
.center-head p .s,.closing p .s,.hero-center .lede .s{display:block;text-wrap:balance}
.hero-center .lede:has(.s){max-width:64ch}
/* Headings break at the period too. Once each sentence is its own line the
   20ch cap is doing nothing but squeezing them, so widen it. */
.center-head h2 .s{display:block}
.center-head h2:has(.s){max-width:28ch}
.center-head .eyebrow{margin-bottom:14px}
.center-cta{display:flex;justify-content:center;margin-top:34px}
.center-head.tight{margin-bottom:30px}

/* ---------- TEMPLATE A/C — sub-features with a vertical rule ---------- */
.feat{margin-top:22px;padding-left:22px;border-left:2px solid rgba(44,83,216,.22)}
.feat h4{font-size:16px;font-weight:700;letter-spacing:-.008em;margin:20px 0 4px;color:var(--ink)}
.feat h4:first-child{margin-top:0}
.feat p{font-size:15.5px;color:var(--ink-2);margin:0;max-width:48ch;line-height:1.62}
.spread .feat{border-left-color:rgba(44,83,216,.3)}

/* ---------- TEMPLATE B — thick rule divider inside a column ---------- */
.rule-thick{border:0;border-top:3px solid var(--ink);margin:26px 0 22px;max-width:none}
.sub-head{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.022em;margin-bottom:12px}
.ticks{list-style:none;margin:14px 0 18px}
.ticks li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--ink-2);font-size:15.5px}
.ticks li::before{
    content:"";position:absolute;left:0;top:8px;width:0;height:0;border-radius:0;background:none;
    border-left:7px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent;
  }

/* ---------- TEMPLATE D — centred intro, wide media, three columns ---------- */
.showcase{padding:68px 0}
.showcase .center-head{margin-bottom:34px}
.media{
    border-radius:var(--r);overflow:hidden;background:var(--tint);
    box-shadow:0 26px 60px -34px rgba(15,19,25,.28);
  }
.media img,.media svg{display:block;width:100%;height:auto}
.media-wide{margin:0 auto;max-width:100%}
.tri{display:grid;grid-template-columns:1fr;gap:30px 44px;margin-top:44px}
@media(min-width:820px){.tri{grid-template-columns:repeat(3,1fr)}}
.tri h4{font-size:20px;font-weight:700;letter-spacing:-.018em;margin-bottom:8px}
.tri p{font-size:15px;color:var(--ink-3);line-height:1.6;margin:0}
.spread .feat h4{color:var(--ink)}
.spread .feat p{color:var(--ink-2)}
.feat .hi{color:var(--accent);font-weight:700}

/* ---------- thin dark band ---------- */
.band{padding:20px 0}
.band-in{
    background:linear-gradient(120deg,#2c53d8 0%,#4a6ae4 55%,#7d6be8 100%);
    border-radius:18px;padding:38px 44px;color:#fff;
    display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;
  }
.band-in h3{color:#fff;font-size:23px;letter-spacing:-.015em;margin-bottom:5px}
.band-in p{color:rgba(255,255,255,.82);font-size:14px;margin:0;max-width:54ch;line-height:1.5}
.band-in .btn{background:#fff;color:var(--accent-ink);border-color:#fff;white-space:nowrap}
.band-in .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:640px){.band-in{padding:30px 26px}}

/* ---------- sections ---------- */
section{padding:68px 0}
h2{
    font-weight:700;
    font-size:clamp(28px,3.6vw,43px);line-height:1.1;letter-spacing:-.026em;
    max-width:22ch;margin-bottom:22px;
  }
h3{font-size:20px;font-weight:700;letter-spacing:-.012em;margin-bottom:8px}
p{margin-bottom:19px;color:var(--ink-2)}
strong{color:var(--ink);font-weight:700}
.lead-para{
    font-size:clamp(20px,2.3vw,25px);
    font-weight:600;line-height:1.4;color:var(--ink);letter-spacing:-.014em;margin-bottom:24px;
  }
.cap{font-size:13.5px;color:var(--ink-3);margin-top:12px}
.page-lede{max-width:60ch;font-size:19px;color:var(--ink-2);margin-top:16px;line-height:1.6}
.backlink{display:inline-block;margin-top:8px;font-size:13px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);text-decoration:none;font-weight:700}
.backlink:hover{color:var(--accent)}

/* ---------- two-column alternating (words left, visual right — then flipped) ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:920px){
    .duo{grid-template-columns:1fr 1fr;gap:56px}
    .duo.flip>*:first-child{order:2}
    .duo.flip>*:last-child{order:1}
  }

/* ---------- tinted band (soft, not grey) ---------- */
.tint{background:linear-gradient(180deg,#f2f5fe 0%,#eef2fe 100%)}
.tint.blush{background:linear-gradient(180deg,#fdf4f7 0%,#fdeef3 100%)}
.tint .report,.tint .board,.tint .plan{background:var(--card)}

/* ---------- soft panels: inset, rounded, pastel ---------- */
.spread{background:none;padding:24px 0}
.spread>.wrap{
    background:linear-gradient(140deg,var(--lav) 0%,var(--lav-2) 55%,var(--sky) 100%);
    border-radius:28px;padding:64px 56px;color:var(--ink);
  }
.spread.blush>.wrap{background:linear-gradient(140deg,var(--blush) 0%,#fdf3f6 55%,var(--peach) 100%)}
.spread.sky>.wrap{background:linear-gradient(140deg,var(--sky) 0%,#f0f6fd 55%,var(--lav-2) 100%)}
@media(max-width:760px){.spread>.wrap{padding:44px 24px;border-radius:20px}}
.spread .eyebrow{color:var(--accent-ink)}
.spread h2,.spread .lead-para,.spread strong,.spread h3,.spread h4{color:var(--ink)}
.spread p{color:var(--ink-2)}
.spread a{color:var(--accent-ink)}
.spread .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.spread .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.spread .btn-quiet{background:rgba(255,255,255,.7);border-color:rgba(15,19,25,.14);color:var(--ink)}
.spread .btn-quiet:hover{border-color:var(--accent);color:var(--accent)}
.spread .go{color:var(--ink)}
.spread .readout{border-top-color:rgba(15,19,25,.16)}
.spread .readout-row{border-bottom-color:rgba(15,19,25,.09)}
.spread .readout .state{color:var(--ink-3)}
.spread .readout .action{color:var(--ink)}
.spread .readout .action::before{color:var(--accent)}
.spread .notthis{border-top-color:rgba(15,19,25,.12)}
.spread .notthis p{color:var(--ink-3)}
.spread .split-col h3{color:var(--accent-ink)}
.spread .split-col{border-color:rgba(15,19,25,.12)}
.spread .pillar{border-top-color:rgba(15,19,25,.1)}
.spread ul li::before{background:var(--accent)}
.spread .lede,.spread .cap,.spread .tier-note,.spread .cmp-note,.spread .btn-note{color:var(--ink-3)}
.spread .report,.spread .board{background:#fff;border-color:rgba(15,19,25,.08)}

/* ---------- lists ---------- */
ul{list-style:none;margin-bottom:20px}
ul li{position:relative;padding-left:20px;margin-bottom:11px;color:var(--ink-2)}
ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;border-radius:2px;background:var(--accent)}

/* ---------- the readout ---------- */
.readout{margin-top:30px;border-top:1px solid var(--line);max-width:none}
.readout-row{
    display:grid;grid-template-columns:minmax(0,1fr) 1.15fr;align-items:baseline;
    gap:20px;padding:16px 0;border-bottom:1px solid var(--hair);
  }
.duo .readout-row{grid-template-columns:1fr;gap:2px;padding:14px 0}
.readout .state{color:var(--ink-3);font-size:16px}
.readout .action{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.008em}
.readout .action::before{content:"→ ";color:var(--accent);font-weight:400}
@media(max-width:600px){.readout-row{grid-template-columns:1fr;gap:3px;padding:13px 0}}

/* ---------- quote: one clean pull, two thin lines above ---------- */
.pull,.quote{
    margin:52px 0;padding:0;background:none;max-width:30ch;
    font-weight:700;font-style:normal;
    font-size:clamp(23px,2.8vw,32px);line-height:1.28;letter-spacing:-.018em;color:var(--ink);
  }
.pull::before,.quote::before{
    content:"";display:block;width:56px;height:9px;margin-bottom:26px;
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  }
.pull cite,.quote cite{display:block;font-style:normal;font-size:12px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}
.spread .pull,.spread .quote{color:var(--ink)}
.spread .pull::before,.spread .quote::before{border-color:var(--accent)}
.spread .pull cite,.spread .quote cite{color:var(--ink-3)}
.quote-band{padding:0;background:none}
.quote-band .quote-in{
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    padding:22px 0;display:grid;grid-template-columns:1fr;gap:10px;align-items:baseline;
  }
/* Was 1fr auto — the quote is capped at 40ch but its column ran the full
   width, which threw the byline to the far right with ~700px of nothing
   between a quote and its own attribution. auto/auto hugs both to content
   so the byline reads as belonging to the quote. */
@media(min-width:820px){
    .quote-band .quote-in{grid-template-columns:auto auto;justify-content:start;gap:0 22px}
  }
/* Deliberately quiet. This is the author quoting herself, so it should read
   as a margin note, not a monument — small, two lines, one plain byline. */
.quote-band .quote{
    max-width:66ch;margin:0;font-weight:500;
    font-size:clamp(16px,1.5vw,18.5px);line-height:1.5;letter-spacing:-.006em;
    color:var(--ink-2);
  }
.quote-band .quote::before{display:none}
.quote-band .quote cite{display:none}
.quote-band .quote-who{
    font-size:13.5px;color:var(--ink-3);line-height:1.4;white-space:nowrap;
  }
.quote-band .quote-who b{color:var(--ink-2);font-weight:700}

/* ---------- pillars ---------- */
.pillar{padding:26px 0 6px;max-width:64ch;border-top:1px solid var(--hair)}
.pillar:first-of-type{border-top:none;padding-top:0}
.pillar p{margin-bottom:0}
.notthis{margin-top:34px;padding-top:20px;border-top:1px solid var(--hair);max-width:64ch}
.notthis p{margin-bottom:0;font-size:16px;color:var(--ink-3)}
.dropcap{}

/* ---------- feature cards (BigCommerce-style titled sections) ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:56px}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
    background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
    padding:30px 28px 26px;text-decoration:none;color:inherit;display:block;
    transition:border-color .16s,transform .16s,box-shadow .16s;
  }
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(44,83,216,.35)}
.card:hover .card-go{color:var(--accent)}
.card-n{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700}
.card h3{font-size:23px;font-weight:700;margin:10px 0 8px;letter-spacing:-.018em}
.card p{font-size:14.5px;color:var(--ink-3);line-height:1.55;margin:0}
.card-go{margin-top:18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}

/* ---------- routes: the navigator cards ---------- */
.routes{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
@media(min-width:700px){.routes{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.routes{grid-template-columns:repeat(4,1fr)}}
.route{
    display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);
    border-radius:var(--r);padding:26px 24px 22px;text-decoration:none;color:inherit;
    transition:border-color .16s,transform .16s,box-shadow .16s;
  }
.route:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(44,83,216,.4)}
.route .rn{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.route b{display:block;font-size:20px;font-weight:700;letter-spacing:-.018em;margin:10px 0 8px}
.route p{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 18px;flex:1}
.route .rgo{font-size:14px;font-weight:700;color:var(--ink)}
.route .rgo::after{content:" \2192";color:var(--accent)}
.route:hover .rgo{color:var(--accent)}

/* ---------- "is this you" situations ---------- */
.sits{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px}
@media(min-width:820px){.sits{grid-template-columns:repeat(3,1fr);gap:24px}}
.sit{padding:24px 26px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r)}
.sit b{display:block;font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.012em}
.sit p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.62}

/* ---------- trio: three square offer cards ---------- */
.trio{display:grid;grid-template-columns:1fr;gap:16px;margin-top:48px}
@media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio a{
    display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/.92;
    background:var(--tint);border:1px solid var(--hair);border-radius:var(--r);
    padding:28px;text-decoration:none;color:inherit;position:relative;overflow:hidden;
    transition:border-color .16s,transform .16s;
  }
.trio a:hover{border-color:var(--accent);transform:translateY(-3px)}
.trio .glyph{position:absolute;top:24px;left:24px;right:24px}
.trio b{font-size:22px;font-weight:700;letter-spacing:-.018em;display:block}
.trio .price{color:var(--accent);font-weight:700;font-size:15px;margin-top:4px;display:block}
.trio p{font-size:14.5px;color:var(--ink-3);margin:8px 0 0;line-height:1.5}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:1fr;gap:30px;margin-top:44px}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr);gap:0}}
.stat{padding:0 34px}
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0}
@media(min-width:760px){.stat+.stat{border-left:1px solid var(--line)}}
.stat .n{
    font-size:clamp(30px,3.1vw,40px);font-weight:700;letter-spacing:-.028em;line-height:1.06;
    display:block;margin-bottom:12px;
  }
.stat .n em{font-style:normal;color:var(--accent)}
.stat .l{font-size:16px;color:var(--ink-2);line-height:1.62;display:block;max-width:32ch}
@media(max-width:760px){.stat{padding:0;border-left:0}}

/* ---------- report card: kalodata-style charts ---------- */
.report{
    background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
    overflow:hidden;
  }
.report-bar{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:14px 22px;border-bottom:1px solid var(--hair);
    font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2);
  }
.report-bar .cnt{color:var(--ink-3);letter-spacing:.02em;text-transform:none;font-weight:500;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair)}
.kpi{padding:18px 22px;border-right:1px solid var(--hair)}
.kpi:last-child{border-right:none}
.kpi-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.kpi-n{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi-d{font-size:12.5px;font-weight:700;margin-top:3px}
.kpi-d.up{color:var(--up)}
.kpi-d.down{color:var(--down)}
.kpi-d span{color:var(--ink-3);font-weight:500}
.chart-block{padding:20px 22px 16px}
.chart-block .kpi-l{margin-bottom:10px}
.chart-block svg{width:100%;height:auto;display:block}
.chart-note{font-size:12.5px;color:var(--ink-3);padding:0 22px 18px}
.report-split{display:grid;grid-template-columns:1fr}
@media(min-width:680px){.report-split{grid-template-columns:1.5fr 1fr}.report-split>div:first-child{border-right:1px solid var(--hair)}}
@media(max-width:640px){.kpis{grid-template-columns:1fr}.kpi{border-right:none;border-bottom:1px solid var(--hair)}.kpi:last-child{border-bottom:none}}

/* ---------- the board (kept for how-it-works) ---------- */
.board{margin-top:34px;border:1px solid var(--hair);background:var(--card);border-radius:var(--r);overflow:hidden}
.board-bar{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:14px 22px;background:var(--dark);color:#fff;
    font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  }
.board-bar .cnt{color:#9aa1ad;letter-spacing:.02em;text-transform:none;font-weight:500;font-size:13px}
.board-sub{padding:12px 22px;border-bottom:1px solid var(--hair);font-size:11.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.sig{display:grid;grid-template-columns:1fr;gap:5px;padding:17px 22px;border-bottom:1px solid var(--hair)}
.sig:last-child{border-bottom:none}
.sig:hover{background:var(--paper)}
.sig-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sig-who{font-size:16.5px;font-weight:700}
.sig-tag{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
    padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-3)}
.sig-tag.hot{border-color:var(--accent);color:var(--accent);background:rgba(44,83,216,.06)}
.sig-why{font-size:14.5px;color:var(--ink-3)}
.sig-do{font-size:15px;color:var(--ink)}
.sig-do b{font-weight:700}
.sig-do::before{content:"→ ";color:var(--accent)}
.vitals{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair)}
.vital{padding:18px 22px;border-right:1px solid var(--hair)}
.vital:last-child{border-right:none}
.vital-l{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vital-n{font-size:29px;line-height:1.1;margin-top:7px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}
.vital-s{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.vital svg{width:100%;height:auto;display:block;margin-top:10px}
.track{height:6px;background:var(--tint-2);margin-top:11px;border-radius:99px;overflow:hidden}
.fill{height:100%;background:var(--ink);border-radius:99px}
.fill.acc{background:var(--accent)}
.delta{font-size:12px;font-weight:700;margin-left:7px}
.delta.up{color:var(--up)}
.delta.down{color:var(--down)}
.funnel{padding:18px 22px;border-bottom:1px solid var(--hair)}
.fun-bar{display:flex;height:28px;margin-top:11px;border-radius:8px;overflow:hidden}
.fun-seg{display:flex;align-items:center;justify-content:center;font-size:11px;
    font-weight:700;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.fun-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:11px;font-size:12.5px;color:var(--ink-3)}
.fun-legend i{display:inline-block;width:9px;height:9px;margin-right:7px;font-style:normal;
    border-radius:3px;vertical-align:baseline}
.board-div{padding:11px 22px;background:var(--tint);border-bottom:1px solid var(--hair);
    font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.board-foot{padding:14px 22px;background:var(--tint);font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--hair)}
@media(max-width:640px){
    .vitals{grid-template-columns:1fr}
    .vital{border-right:none;border-bottom:1px solid var(--hair)}
    .vital:last-child{border-bottom:none}
  }

/* ---------- pricing cards ---------- */
.plans{display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px;align-items:start}
@media(min-width:760px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.plans{grid-template-columns:repeat(3,1fr);gap:24px}}
.plan{
    background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
    padding:32px 28px 28px;display:flex;flex-direction:column;height:100%;
    transition:border-color .16s,box-shadow .16s;
  }
.plan:hover{border-color:var(--line);box-shadow:0 18px 44px -30px rgba(15,19,25,.22)}
.plan.rec{border:2px solid var(--accent);box-shadow:0 20px 50px -30px rgba(44,83,216,.45)}
.plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.plan-name{font-size:22px;font-weight:700;letter-spacing:-.02em}
.plan-badge{
    font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--accent);
    padding:5px 11px;border-radius:999px;white-space:nowrap;
  }
.plan-who{font-size:14.5px;color:var(--ink-3);line-height:1.5;min-height:66px;margin-bottom:22px}
.plan-price{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1}
.plan-price .cur{font-size:.62em;font-weight:700;vertical-align:top;margin-right:1px}
.plan-price .per{font-size:.4em;font-weight:600;color:var(--ink-3);letter-spacing:0}
.plan-terms{font-size:13.5px;color:var(--ink-3);font-style:italic;margin-top:7px;min-height:20px}
.plan hr{border:0;border-top:1px solid var(--hair);margin:22px 0}
.plan ul{margin:0 0 24px;flex:1}
.plan ul li{padding-left:26px;margin-bottom:12px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.plan ul li::before{
    content:"✓";position:absolute;left:0;top:0;width:auto;height:auto;background:none;
    color:var(--accent);font-weight:700;font-size:14px;
  }
.plan .btn,.plan .btn-quiet{width:100%;text-align:center;padding:14px 18px}
.plan.rec .btn{background:var(--accent);border-color:var(--accent)}
.plan.rec .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.plan-more{margin-top:18px;border-top:1px solid var(--hair);padding-top:0}
.plan-more summary{
    list-style:none;cursor:pointer;padding:16px 0 0;font-size:14.5px;font-weight:700;
    color:var(--ink);position:relative;
  }
.plan-more summary::-webkit-details-marker{display:none}
.plan-more summary::after{content:"+";position:absolute;right:0;top:14px;font-size:20px;color:var(--accent);font-weight:400}
.plan-more[open] summary::after{content:"–"}
.plan-more summary:hover{color:var(--accent)}
.plan-more .inner{padding:14px 0 4px}
.plan-more h5{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:14px 0 8px}
.plan-more h5:first-child{margin-top:0}
.plan-more p{font-size:14px;color:var(--ink-3);margin:0 0 10px;line-height:1.55}
.plan-more ul{margin-bottom:0}
.plan-more ul li{font-size:14px;margin-bottom:8px}
/* Footnotes under a full-width block: centred and boxed by a hairline, so
   they read as a closing note rather than a paragraph stranded on the left
   with empty space beside it. */
/* Runs the full width from the left edge, so it fills two lines instead of
   sitting in a narrow column with dead space beside it. */
.plans-note{
    font-size:14px;color:var(--ink-3);margin:34px 0 0;max-width:none;
    text-align:left;padding-top:22px;border-top:1px solid var(--hair);
    /* Must be `wrap` — the plain default. Both `balance` and `pretty` shorten
       lines to tidy the rag, which pulls text away from the right edge.
       Note `normal` is NOT a valid text-wrap value; it is ignored, and the
       global `p{text-wrap:pretty}` rule wins instead. */
    text-wrap:wrap;
  }

/* free-call strip under the plans */
.freecall{
    margin-top:24px;border:1px dashed var(--line);border-radius:var(--r);background:var(--tint);
    padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;
  }
.freecall h3{margin-bottom:4px;font-size:20px}
.freecall p{margin:0;font-size:14.5px;color:var(--ink-3);max-width:60ch}

/* ---------- tiers ---------- */
.tier{padding:40px 0;border-top:1px solid var(--hair)}
.tier:first-of-type{border-top:1px solid var(--line)}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.tier-name{font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.02em}
.tier-price{font-size:clamp(19px,2.2vw,24px);font-weight:800;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.tier-who{font-size:15px;color:var(--ink-3);margin-bottom:20px}
.tier ul{margin-bottom:0;max-width:60ch}
.tier ul li{font-size:16px}
.tier-note{font-size:14.5px;color:var(--ink-3);margin-top:18px;margin-bottom:0;max-width:58ch}
.tier .cta-row{margin-top:24px}
.tier.feature .tier-name::after{
    content:"Most brands start here";display:inline-block;vertical-align:middle;
    margin-left:14px;font-size:10.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:#fff;
    background:var(--accent);padding:5px 12px;border-radius:999px;
  }
.free-call{padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--hair)}
.free-call p{max-width:58ch}

/* ---------- anchors ---------- */
.anchor{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
    padding:18px 0;border-bottom:1px solid var(--hair)}
.anchor:first-of-type{border-top:1px solid var(--line)}
.anchor-what{font-size:17px;color:var(--ink)}
.anchor-cost{font-size:16px;font-weight:600;color:var(--ink-3);text-align:right}

/* ---------- scope split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:34px;margin-bottom:30px}
/* A .split nested inside a .sideby only gets ~28% per column, which is too
   narrow for its longest item — items wrapped, the two lists stopped lining
   up, and "re-engagement" broke across lines at its own hyphen. Give the
   right side more room. The hyphen breaks are fixed in the markup with
   non-breaking hyphens (‑) — CSS can't stop a break at a real hyphen. */
@media(min-width:920px){
    .duo:has(.split),.sideby:has(.split){grid-template-columns:1fr 1.55fr;gap:0 48px}
  }
.split-col li{overflow-wrap:normal;hyphens:none}
/* "I own" / "You keep" are the point of the block — they were set as small
   uppercase labels and read as captions. Now they carry weight. */
.split-col h3{font-size:19px;text-transform:none;letter-spacing:-.015em;font-weight:700;
    color:var(--ink);margin-bottom:16px;padding-bottom:11px;border-bottom:2px solid var(--line)}
.spread .split-col h3{color:var(--ink);border-bottom-color:rgba(15,19,25,.18)}
.split-col ul li{font-size:16px}

/* ---------- comparison table: airy, thin lines ---------- */
.cmp-wrap{margin-top:44px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--hair);border-radius:var(--r);background:var(--card)}
.cmp{width:100%;min-width:660px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--hair);vertical-align:top}
.cmp thead th{border-bottom:1px solid var(--line);font-size:17px;font-weight:800;white-space:nowrap;background:var(--tint)}
.cmp thead th span{display:block;font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.cmp thead th:first-child{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.cmp tbody th{font-weight:500;color:var(--ink-2);width:32%}
.cmp td{color:var(--ink-3);width:22.6%}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:var(--paper)}
.cmp .tick{color:var(--accent);font-weight:700;font-size:18px;line-height:1.2}
/* These were #c6ccd6 (1.57:1) and #9aa1ad (2.53:1) — both far below AA, and
   .no is not decoration: it carries "You do it", "On your own, ~15 min",
   "You". A buyer comparing tiers has to read it. --ink-3 is 4.79:1 and still
   reads quieter than the bold .yes cells, which is the whole point. */
.cmp .dash{color:var(--ink-3);font-size:18px;line-height:1.2}
.cmp .yes{color:var(--ink);font-weight:600}
.cmp .no{color:var(--ink-3)}
.cmp tr.grp th{padding-top:26px;font-size:11px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line)}
.cmp tr.grp td{padding-top:26px;border-bottom:1px solid var(--line)}
.cmp tr.grp:hover th,.cmp tr.grp:hover td{background:transparent}
.cmp-note{font-size:13.5px;color:var(--ink-3);margin-top:16px;text-align:center}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.headshot{width:100%;max-width:260px;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;border-radius:var(--r)}
/* Bio block: the words lead, the portrait is a supporting detail near the
   foot of the page rather than the first thing on it. */
.duo.bio{align-items:center}
@media(min-width:920px){.duo.bio{grid-template-columns:1.6fr 0.7fr;gap:52px}}
.duo.bio .headshot{max-width:200px;margin-left:auto}
@media(max-width:919px){.duo.bio .headshot{margin:0}}

/* A section-level CTA that sits under both columns, so a lone text link
   never dangles at the end of one of them. */
.section-cta{
    display:flex;gap:14px;flex-wrap:wrap;align-items:center;
    margin-top:40px;padding-top:30px;border-top:1px solid var(--hair);
  }
.abt-stats{margin-top:46px;border-top:1px solid var(--line)}
.abt-stat{display:grid;grid-template-columns:220px 1fr;gap:0 40px;padding:20px 0;border-bottom:1px solid var(--hair)}
.abt-stat b{font-size:17px;font-weight:700}
.abt-stat span{font-size:15px;color:var(--ink-3);line-height:1.55}
@media(max-width:640px){.abt-stat{grid-template-columns:1fr;gap:4px}}

/* ---------- steps ---------- */
.steps{margin-top:26px;counter-reset:stp}
.step{position:relative;padding:0 0 26px 46px;border-left:1px solid var(--hair);margin-left:11px}
.step:last-child{border-left-color:transparent;padding-bottom:0}
.step::before{
    counter-increment:stp;content:counter(stp,decimal-leading-zero);
    position:absolute;left:-12px;top:0;width:24px;height:24px;border-radius:50%;
    background:var(--card);border:1px solid var(--line);color:var(--ink-2);
    font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
.step.key::before{background:var(--accent);border-color:var(--accent);color:#fff}
.step h4{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;margin-top:-2px}
.step p{font-size:15px;margin-bottom:0;color:var(--ink-3)}
.step .when{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--accent);margin-bottom:5px}

/* ---------- faq ---------- */
.faq-item{padding:24px 0;border-bottom:1px solid var(--hair);max-width:64ch}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-item h3{font-size:18px;margin-bottom:9px}
.faq-item p{margin-bottom:0;font-size:16px}
details.faq-item{padding:0;border-bottom:1px solid var(--hair)}
details.faq-item summary{
    list-style:none;cursor:pointer;padding:22px 34px 22px 0;position:relative;
    font-size:17.5px;font-weight:700;letter-spacing:-.008em;color:var(--ink);
  }
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{
    content:"+";position:absolute;right:2px;top:20px;font-size:22px;
    color:var(--accent);font-weight:400;line-height:1;transition:transform .18s;
  }
details.faq-item[open] summary::after{content:"–"}
details.faq-item summary:hover{color:var(--accent)}
details.faq-item p{padding:0 0 24px;margin:0;font-size:16px;max-width:60ch}
details.faq-item p:has(+ .faq-note){padding-bottom:10px}
details.faq-item p.faq-note{font-size:14px;color:var(--ink-2);opacity:.78;font-style:italic}

/* ---------- closing: the one full-bleed dark block ---------- */
/* Flat, no gradient — decision 7 Aug. Was a 3-layer gradient (white glow,
   pink glow, blue→purple fade), then briefly flat indigo #5450de.
   Now --dark: same hue as --accent (3° apart) but 39 points darker, so it
   matches the blue and contrasts against it instead of competing. */
/* Slimmed by decision — it was a tall block for what is one line and two
   buttons. Less height, smaller heading, tighter gaps. */
.closing{
    color:#fff;padding:38px 0 40px;position:relative;overflow:hidden;
    background:var(--dark);
  }
.closing h2{font-size:clamp(23px,2.6vw,30px)}
.closing p{font-size:15.5px}
@media(max-width:760px){.closing{padding:32px 0 34px}}
.closing .eyebrow{color:rgba(255,255,255,.86)}
.closing h2{color:#fff;max-width:32ch}
.closing p{color:rgba(255,255,255,.9);max-width:64ch}
/* centred closing must actually centre — not centre-aligned text in a left column */
.closing .hero-center h2,.closing .hero-center p{margin-left:auto;margin-right:auto}
.closing .hero-center h2{margin-bottom:12px}
.closing .hero-center .cta-row{justify-content:center;margin-top:22px}
.closing .btn{background:#fff;color:var(--accent-ink);border-color:#fff}
.closing .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.closing .btn-quiet{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);color:#fff}
.closing .btn-quiet:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff}

/* ---------- legal pages: terms / refunds / privacy ---------- */
.legal{max-width:68ch;padding-top:8px}
.legal .updated{
    font-size:13px;color:var(--ink-3);padding:10px 0 26px;
    border-bottom:1px solid var(--hair);margin-bottom:34px;
  }
.legal h2{
    font-size:21px;letter-spacing:-.018em;margin:38px 0 12px;
    padding-top:26px;border-top:1px solid var(--hair);
  }
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:16px;font-weight:700;margin:22px 0 7px;color:var(--ink)}
.legal p{font-size:16px;color:var(--ink-2);margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{font-size:16px;color:var(--ink-2);margin-bottom:8px;line-height:1.55}
.legal strong{color:var(--ink);font-weight:700}
.legal a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--hair)}
.legal a:hover{border-color:var(--accent)}
.legal .callout{
    background:var(--lav-2);border:1px solid var(--hair);border-radius:12px;
    padding:20px 22px;margin:22px 0;
  }
.legal .callout p{margin-bottom:0;color:var(--ink-2)}
.legal .callout p + p{margin-top:10px}
.legal-nav{
    display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;
  }
.legal-nav a{
    font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-2);
    border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  }
.legal-nav a:hover{border-color:var(--accent);color:var(--accent)}
.legal-nav a.here{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- footer ---------- */
footer{padding:44px 0 64px;font-size:14px;color:var(--ink-3);border-top:1px solid var(--hair)}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--hair)}
footer a:hover{color:var(--accent);border-color:var(--accent)}
.footer-links{margin-bottom:16px;display:flex;gap:22px;flex-wrap:wrap}

/* ---------- call page ---------- */
.cal-wrap{margin-top:44px;border:1px solid var(--hair);border-radius:var(--r);background:var(--card);min-height:620px;overflow:hidden}
.cal-fallback{padding:34px 24px;text-align:center;font-size:15px;color:var(--ink-3)}
.checklist{margin-top:34px;border-top:1px solid var(--line)}
.checklist div{display:grid;grid-template-columns:180px 1fr;gap:0 36px;padding:18px 0;border-bottom:1px solid var(--hair)}
.checklist b{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700;padding-top:4px}
.checklist span{font-size:16px;color:var(--ink-2);line-height:1.55}
@media(max-width:640px){.checklist div{grid-template-columns:1fr;gap:5px}}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(min-width:760px){
    .split{grid-template-columns:1fr 1fr;gap:52px}
    .about-grid{grid-template-columns:260px 1fr;gap:52px}
  }

/* ---------- mobile refinements ---------- */
@media(max-width:760px){
    .wrap{padding:0 20px}
    header{padding:44px 0 0}
    section{padding:48px 0}
    .closing{padding:60px 0}
    h1{font-size:clamp(34px,9vw,44px);margin-bottom:20px}
    h2{font-size:clamp(26px,7vw,34px)}
    .lede{font-size:17px}
    .glimpse{margin-top:32px}
    .anchor-pills{gap:10px 20px;margin-top:28px}
    .anchor-pills a{font-size:13px}
    .cta-row{gap:10px}
    .btn,.btn-quiet{padding:12px 20px;font-size:14px}
    .trio a{aspect-ratio:auto;min-height:210px}
    .trio .glyph{position:static;margin-bottom:18px;max-width:150px}
    .cmp-wrap{border-radius:14px}
    .cmp-wrap::after{content:"";display:block}
    .report-bar,.board-bar{flex-wrap:wrap;gap:4px 14px}
    .kpi-n{font-size:24px}
    .quote-band .quote-who{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
    .stat .n{padding-bottom:16px}
    .step{padding-left:38px}
  }

/* ---------- mobile type minimums ----------
   Must live at the END of the file. Media queries add no specificity, so an
   override placed above .kpi-l / .plan-badge loses to them on source order. */
@media(max-width:760px){
    .kpi-l,.plan-badge{font-size:12px}
  }