/* ==========================================================================
   Systamic — site v3.1 (Oct 2026)
   Light page, dark hero band. Archivo for headlines, Source Sans 3 for body.
   Blue = Systamic and every primary button. Green = checks and money only.
   Red = the leak only. Nothing else gets color.
   ========================================================================== */

:root{
  --paper:#F7F6F2; --paper-2:#EFEDE7; --card:#FFFFFF;
  --hero:#0E1420; --hero-2:#141C2C; --hero-3:#1A2436;
  --ink:#15161A; --ink-2:#2B2E36; --muted:#5F6470;
  --on-dark:#F5F5F7; --on-dark-muted:#A9B0BD;
  --line:rgba(21,22,26,.10); --line-strong:rgba(21,22,26,.18); --line-dark:rgba(255,255,255,.12);
  --blue:#1F6BFF; --blue-hover:#1559DB; --blue-text:#174FBF; --blue-soft:rgba(31,107,255,.10); --blue-2:#5B9CFF;
  --money:#15803D; --money-bright:#22C55E; --money-soft:rgba(21,128,61,.10);
  --flare:#DC2626; --flare-soft:rgba(220,38,38,.10);
  --font-display:'Archivo',system-ui,sans-serif; --font-body:'Source Sans 3',system-ui,sans-serif;
  --r-sm:0.625rem; --r-md:1.125rem; --r-lg:1.625rem;
  /* Scale: one container for everything, 92vw wide until it caps at 1680px. The gutter is whatever is left either side,
     so bleeds (negative margins) and fixed bars line up with the content column. Hero media may run to 2560px. */
  --max:1680px; --wrap:min(92vw,var(--max)); --gutter:calc((100vw - var(--wrap)) / 2); --media-max:2560px;
  --pad:clamp(4rem,9vw,7rem); --nav-h:4.125rem;
  /* Measure: body copy and FAQ answers never pass 65ch, headlines never pass 20ch. */
  --measure:65ch; --measure-h:20ch;
  /* Card grids: as many 20rem columns as fit, never more than four. */
  --grid-min:20rem; --grid-gap:clamp(1rem,1.5vw,1.5rem);
  --shadow-sm:0 1px 2px rgba(21,22,26,.05),0 4px 14px rgba(21,22,26,.05);
  --shadow-md:0 2px 4px rgba(21,22,26,.06),0 14px 40px rgba(21,22,26,.09);
  --shadow-dark:0 20px 60px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Fluid root: 16px on phones, 21px on a 34 inch ultrawide. Every rem in this file rides on it. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:clamp(16px,0.45vw + 12px,21px)}
[id]{scroll-margin-top:calc(var(--nav-h) + .5rem)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
p{margin:0 0 1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
.skip{position:absolute;left:-62.4375rem;top:0;background:var(--blue);color:#fff;padding:0.625rem 0.875rem;border-radius:0 0 var(--r-sm) 0;z-index:100}
.skip:focus{left:0}
.i{width:1.375rem;height:1.375rem;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-sm{width:1.125rem;height:1.125rem}
.i-xs{width:0.875rem;height:0.875rem}
.i-lg{width:1.875rem;height:1.875rem}
.wrap{width:var(--wrap);max-width:100%;margin-inline:auto;padding:0;container:wrap / inline-size}
/* Sections are full bleed; their content column is the wrap. They are also query containers for the grids inside them. */
.section,.proof,.final,.sub-hero,.footer{container-type:inline-size}

/* ---------- Type ---------- */
.h1,.h2,.h3{font-family:var(--font-display);margin:0;letter-spacing:-.02em;text-wrap:balance;max-width:var(--measure-h)}
.h1{font-size:clamp(2.5rem,5.8vw,4.5rem);line-height:1;font-weight:800;letter-spacing:-.035em}
.h2{font-size:clamp(1.85rem,3.6vw,2.75rem);line-height:1.08;font-weight:700}
.h3{font-size:1.3rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin:0 0 0.875rem}
.eyebrow-light{color:#8FB5FF}
.section-sub{color:var(--muted);font-size:1.125rem;max-width:56ch;margin-top:0.875rem}
.money{color:var(--money)}
.money-tag{display:inline-block;padding:0.25rem 0.625rem;border-radius:62.4375rem;background:var(--money-soft);color:var(--money);font-weight:600;font-size:.8125rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;font-weight:600;font-size:1rem;line-height:1;padding:0.875rem 1.375rem;border-radius:62.4375rem;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(31,107,255,.28)}
.btn-primary:hover{background:var(--blue-hover);transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,107,255,.34)}
.btn-primary .i{transition:transform .2s var(--ease)}
.btn-primary:hover .i{transform:translateX(3px)}
.btn-ghost-light{background:transparent;color:var(--on-dark);border-color:var(--line-dark)}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.btn-sm{padding:0.6875rem 1rem;font-size:.9375rem}
.btn-lg{padding:1.0625rem 1.625rem;font-size:1.0625rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.875rem}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,20,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);transition:background .3s,border-color .3s}
.nav.is-light{background:rgba(247,246,242,.88);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--nav-h)}
.lockup{display:inline-flex;align-items:center;gap:0.5625rem;color:var(--on-dark)}
.lockup img{display:block;height:1.0625rem;width:auto;flex:none}
.nav.is-light .lockup{color:var(--ink)}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.04em;line-height:1}
.nav-links{display:none;gap:1.75rem;font-weight:500;font-size:.9375rem;color:var(--on-dark-muted)}
.nav-links a:hover{color:var(--on-dark)}
.nav.is-light .nav-links{color:var(--muted)}
.nav.is-light .nav-links a:hover{color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}}
@media(max-width:420px){.nav .btn-sm{padding:0.625rem 0.8125rem;font-size:.875rem}.nav .btn-sm .i{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--hero);color:var(--on-dark);padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(4.5rem,9vw,7.5rem);overflow:hidden;isolation:isolate;min-height:min(100svh,1100px);display:flex;align-items:center}
.hero-glow{position:absolute;inset:-20% -10%;z-index:-2;background:
  radial-gradient(800px 520px at 15% 10%,rgba(31,107,255,.26),transparent 60%),
  radial-gradient(700px 520px at 95% 90%,rgba(31,107,255,.12),transparent 60%);will-change:transform}
/* Hero media: fills the band up to 2560px wide, then stays centered instead of scaling the drawing up. */
.hero-net{position:absolute;inset:0 auto 0 50%;width:min(100%,var(--media-max));margin-left:max(-50%,calc(var(--media-max) / -2));height:100%;aspect-ratio:16/10;z-index:-1;opacity:.9;
  mask-image:radial-gradient(ellipse 60% 70% at 72% 50%,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 50%,#000 20%,transparent 80%)}
@media(max-width:959px){.hero-net{mask-image:linear-gradient(180deg,transparent 0,#000 55%,#000 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 55%,#000 100%);opacity:.7}}
.net-lines path{stroke:rgba(255,255,255,.07);stroke-width:1}
.net-nodes circle{fill:rgba(91,156,255,.35)}
.net-pulse path{stroke:url(#pulseGrad);stroke:rgba(91,156,255,.9);stroke-width:1.5;stroke-dasharray:90 var(--len);stroke-dashoffset:calc(90 + var(--len));animation:pulse var(--dur) linear infinite;animation-delay:var(--delay);filter:drop-shadow(0 0 6px rgba(31,107,255,.8))}
@keyframes pulse{to{stroke-dashoffset:-90}}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:2.5rem}}
.hero-sub{font-size:1.1875rem;line-height:1.55;color:var(--on-dark-muted);max-width:52ch;margin-top:1.375rem}
.hero-micro{color:var(--on-dark-muted);font-size:.9375rem;margin-top:0.875rem}
.trust{display:flex;flex-wrap:wrap;gap:0.625rem 1.375rem;margin-top:1.625rem;font-size:.9375rem;color:var(--on-dark-muted);padding-top:1.375rem;border-top:1px solid var(--line-dark)}
.trust li{display:inline-flex;align-items:center;gap:0.4375rem}
.trust .i{color:var(--money-bright)}

/* Split headline: words rise in one by one */
.h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.h1 .w>span{display:inline-block;transform:translateY(110%);opacity:0;animation:rise .9s var(--ease-out) forwards;animation-delay:calc(var(--i) * 60ms + 80ms)}
@keyframes rise{to{transform:none;opacity:1}}

/* Hero visual */
.hero-visual{position:relative;height:clamp(27.5rem,52vw,37.5rem);display:grid;place-items:center;perspective:75rem}
@media(min-width:960px){.hero-visual{height:37.5rem}}
.phone{position:relative;width:min(20rem,80vw);background:var(--hero-3);border:1px solid rgba(255,255,255,.1);border-radius:2.25rem;padding:1.125rem 0.875rem 1.25rem;box-shadow:var(--shadow-dark),inset 0 0 0 1px rgba(255,255,255,.04);will-change:transform;transform-style:preserve-3d}
.phone-notch{width:5.625rem;height:1.375rem;border-radius:0.75rem;background:#0A0F18;margin:0 auto 0.625rem}
.phone-top{display:flex;align-items:center;gap:0.625rem;padding:0 0.25rem 0.75rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:0.75rem}
.phone-top b,.float b,.gbp-chip b{display:block;font-family:var(--font-display);font-weight:700;font-size:.9375rem;letter-spacing:-.01em}
.phone-top small,.float small,.gbp-chip small{display:block;color:var(--on-dark-muted);font-size:.75rem}
.avatar{width:2.125rem;height:2.125rem;border-radius:50%;background:var(--blue-soft);color:var(--blue-2);display:grid;place-items:center;font-weight:700;font-size:.8rem;border:1px solid rgba(91,156,255,.3)}
.thread{display:flex;flex-direction:column;gap:0.5rem;height:19.375rem;overflow:hidden;transition:opacity .4s var(--ease)}
.thread.is-reset{opacity:0}
.sys{align-self:center;display:inline-flex;align-items:center;gap:0.375rem;font-size:.75rem;color:#FCA5A5;background:var(--flare-soft);padding:0.3125rem 0.625rem;border-radius:62.4375rem}
.ts{align-self:center;font-size:.7rem;color:var(--on-dark-muted)}
.bubble{max-width:84%;padding:0.5625rem 0.75rem;border-radius:1rem;font-size:.875rem;line-height:1.4}
.bubble.out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:0.3125rem}
.bubble.in{align-self:flex-start;background:rgba(255,255,255,.09);color:var(--on-dark);border-bottom-left-radius:0.3125rem}
.bubble.booked{align-self:center;display:inline-flex;align-items:center;gap:0.5rem;background:var(--money-soft);color:var(--money-bright);font-weight:600;border-radius:62.4375rem;padding:0.5rem 0.875rem;font-size:.8125rem;border:1px solid rgba(34,197,94,.3)}
[data-thread] [data-msg]{opacity:0;transform:translateY(8px) scale(.98);transition:opacity .35s var(--ease),transform .35s var(--ease)}
[data-thread] [data-msg].is-in{opacity:1;transform:none}
.typing{align-self:flex-start;display:none;gap:0.25rem;padding:0.625rem 0.75rem;background:rgba(255,255,255,.09);border-radius:1rem;border-bottom-left-radius:0.3125rem}
.typing.is-on{display:inline-flex}
.typing i{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--on-dark-muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

.float{position:absolute;z-index:2;display:flex;align-items:center;gap:0.625rem;background:rgba(20,28,44,.94);border:1px solid rgba(255,255,255,.12);border-radius:0.875rem;padding:0.625rem 0.875rem 0.625rem 0.625rem;box-shadow:var(--shadow-dark);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);will-change:transform,opacity;animation:bob 6s ease-in-out infinite;opacity:0;scale:.94;transition:opacity .45s var(--ease),scale .45s var(--ease-out)}
.float.is-in{opacity:1;scale:1}
.float-ic{width:2rem;height:2rem;border-radius:0.5625rem;display:grid;place-items:center;flex:none}
.float-ic.is-flare{background:var(--flare-soft);color:#FCA5A5}
.float-ic.is-money{background:var(--money-soft);color:var(--money-bright)}
.float-missed{animation-delay:-1s}
.float-booked{animation-delay:-4s}
.float-booked b{color:var(--money-bright)}
@media(max-width:959px){
  .hero-visual{height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.625rem;perspective:none}
  .phone{order:0;flex:0 0 100%;max-width:min(18.75rem,78vw);margin:0 auto 0.5rem}
  .thread{height:auto;min-height:18.75rem}
  .float{position:static;order:1;animation:none;padding:0.5rem 0.75rem 0.5rem 0.5rem;transform:none!important;opacity:1;scale:1}
  .float b{font-size:.875rem}.float small{font-size:.7rem}
}
@media(min-width:960px){
  .hero-visual{justify-items:center}
  .phone{margin:0}
  /* the cards hang off the phone's corners: top left on the notch row, bottom right under the last message */
  /* The cards hang off the phone but never leave their column by more than half a rem, so narrow desktops don't clip them. */
  .float-missed{top:calc(50% - 15.875rem);left:max(calc(50% - 18.75rem),-.5rem)}
  .float-booked{bottom:calc(50% - 15.875rem);right:max(calc(50% - 18.75rem),-.5rem)}
}
.stars{color:#FBBF24;letter-spacing:.05em;font-size:.9rem;flex:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -0.5rem}}

.scroll-cue{position:absolute;left:50%;bottom:1.125rem;transform:translateX(-50%);color:var(--on-dark-muted);opacity:.7;animation:cue 2s ease-in-out infinite;display:none}
@media(min-width:960px){.scroll-cue{display:block}}
@keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- Sections ---------- */
.section{padding:var(--pad) 0}
.section-tight{padding-top:clamp(3rem,6vw,4.5rem)}
.section-alt{background:var(--paper-2)}
.section-head{margin-bottom:clamp(2rem,5vw,3.25rem)}

/* ---------- Cards ---------- */
/* Card grids: auto fit, 20rem floor (320px at the 16px base), capped at four columns from 2200px up. */
.grid-3,.leaks,.steps,.three,.trade-grid,.check-grid,.quotes,.plan-terms{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-min)),1fr))}
@media(min-width:2200px){.grid-3,.leaks,.steps,.three,.trade-grid,.check-grid,.quotes,.plan-terms{--grid-min:max(20rem,calc(25% - var(--grid-gap)))}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.375rem,3vw,1.875rem);transition:transform .25s var(--ease),box-shadow .25s;container-type:inline-size}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.card .h3{margin:1.125rem 0 0.625rem}
.card p{color:var(--ink-2);font-size:1rem}
.chip{width:2.75rem;height:2.75rem;border-radius:0.75rem;background:var(--blue-soft);color:var(--blue-text);display:grid;place-items:center}
.chip.is-flare{background:var(--flare-soft);color:var(--flare)}

/* ---------- Calculator ---------- */
.calc{margin-top:clamp(1.75rem,4vw,2.75rem);display:grid;gap:0;background:var(--hero);color:var(--on-dark);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
@container wrap (min-width:900px){.calc{grid-template-columns:1.1fr .9fr}}
.calc-in{padding:clamp(1.5rem,3.5vw,2.5rem)}
.calc-title{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;margin:0 0 1.375rem}
.range-field{margin-bottom:1.375rem}
.range-row{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;margin-bottom:0.625rem;font-size:.9375rem;color:var(--on-dark-muted)}
.range-row output{font-family:var(--font-display);font-weight:700;color:var(--on-dark);font-size:1.05rem;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:0.375rem;border-radius:62.4375rem;background:linear-gradient(90deg,var(--blue) var(--p,0%),rgba(255,255,255,.14) var(--p,0%));outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 10px rgba(0,0,0,.4);cursor:pointer}
.range::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:pointer}
.calc-out{padding:clamp(1.5rem,3.5vw,2.5rem);background:var(--hero-2);display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line-dark)}
@container wrap (min-width:900px){.calc-out{border-top:0;border-left:1px solid var(--line-dark)}}
.calc-lead{color:var(--on-dark-muted);margin:0 0 0.25rem;font-size:.9375rem}
.calc-big{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,6vw,4rem);letter-spacing:-.04em;line-height:1;color:var(--flare);margin:0 0 0.875rem;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:0.625rem;flex-wrap:wrap}
.calc-big.is-low{color:var(--on-dark-muted)}
.calc-big .calc-per{font-family:var(--font-body);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--on-dark-muted)}
.calc-tail{color:var(--on-dark-muted);font-size:1rem;margin:0 0 1.375rem;max-width:36ch}
.calc-out .btn{align-self:flex-start}

/* ---------- Proof: five numbers as tabs, one stage below. Plays once on entry, then the visitor drives. ---------- */
.proof{padding:var(--pad) 0}
.story-head{max-width:47.5rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.proof-cue{color:var(--blue-text);font-weight:600}
.proof-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0.75rem;margin:0 0 clamp(1.5rem,3.5vw,2.5rem)}
.proof-tab{position:relative;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.25rem 1.125rem 1rem;display:flex;flex-direction:column;gap:2px;cursor:pointer;font:inherit;color:inherit;min-height:10.5rem;box-shadow:none;transition:transform .6s var(--ease-out),opacity .5s linear,border-color .25s,box-shadow .25s,background .25s;opacity:0;transform:translateY(26px) scale(.96)}
.proof-tabs.is-in .proof-tab{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 90ms),calc(var(--k,0) * 90ms),0s,0s,0s}
.proof-tab:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.proof-tab:focus-visible{outline:3px solid rgba(31,107,255,.35);outline-offset:2px}
.proof-tab[aria-selected="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,107,255,.12),var(--shadow-sm);transform:none}
.proof-tab[aria-selected="true"] .deck-stat{color:var(--blue)}
.proof-bar{position:absolute;left:1rem;right:1rem;top:-1px;height:3px;border-radius:0 0 3px 3px;background:transparent;overflow:hidden;opacity:0;transition:opacity .25s}
.proof-tab[aria-selected="true"] .proof-bar{opacity:1;background:var(--line)}
.proof-bar b{display:block;height:100%;width:0;background:var(--blue);transition:none}
.proof-tabs.is-auto .proof-tab[aria-selected="true"] .proof-bar b{width:100%;transition:width var(--auto,7s) linear}
.deck-num{font-family:var(--font-display);font-weight:800;font-size:.8125rem;color:var(--blue-text);letter-spacing:.06em}
.deck-stat{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.2vw,2.8rem);letter-spacing:-.04em;line-height:1;margin-top:0.625rem;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .25s}
.deck-stat small{font-size:.5em;font-weight:700;letter-spacing:-.02em;color:var(--muted)}
.deck-title{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-top:0.5rem;color:var(--ink)}
.deck-hint{margin-top:auto;padding-top:1rem;font-size:.8125rem;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:0.375rem}
.deck-hint .hint-on{display:none;color:var(--blue-text)}
.deck-hint .hint-off::after{content:"";width:0.4375rem;height:0.4375rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);display:inline-block;margin-left:0.375rem}
.proof-tab[aria-selected="true"] .hint-off{display:none}
.proof-tab[aria-selected="true"] .hint-on{display:inline}

.proof-stage{display:grid;position:relative;overflow:hidden;transition:height .45s var(--ease)}
.proof-stage .slide{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s;pointer-events:none}
.proof-stage .slide.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .55s var(--ease) .1s,transform .55s var(--ease) .1s,visibility 0s}
.proof-stage .slide[hidden]{display:grid}
.slide-text{max-width:35rem}
.slide-kicker{font-weight:600;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin:0 0 1.125rem}
.stat{margin:0 0 0.625rem;display:flex;align-items:baseline;gap:0.625rem;line-height:1}
.stat-num{font-family:var(--font-display);font-weight:800;font-size:clamp(3.5rem,8vw,6.5rem);letter-spacing:-.05em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-unit{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.02em;color:var(--muted)}
.slide-h{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance}
.slide-p{color:var(--ink-2);font-size:1.0625rem;max-width:50ch;margin:0 0 0.875rem}
.slide-p b{color:var(--ink);font-weight:600}
.slide-src{color:var(--muted);font-size:.8125rem;margin:0}
.slide-src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.slide-src a:hover{color:var(--blue-text)}
.slide-visual{position:relative;min-height:23.75rem;display:grid;place-items:center;padding:1.75rem 0}
/* the visual settles in a beat after the text */
.proof-stage .slide .slide-visual{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.proof-stage .slide.is-on .slide-visual{opacity:1;transform:none;transition-delay:.22s}
.proof-stage .slide .stat{transform-origin:left bottom}

@container wrap (min-width:960px){
  .slide-visual{min-height:30rem}
}

/* Narrow columns: tabs become a swipe strip, the stage stacks visual first */
@container wrap (max-width:959px){
  .proof-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0.625rem;margin:0 calc(-1 * var(--gutter)) 1.375rem;padding:2px var(--gutter) 0.5rem;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .proof-tabs::-webkit-scrollbar{display:none}
  .proof-tab{flex:0 0 9.75rem;scroll-snap-align:start;min-height:0;padding:1rem 0.875rem 0.875rem}
  .deck-stat{font-size:1.9rem}
  .deck-hint{padding-top:0.875rem}
  .proof-stage .slide{grid-template-columns:1fr;gap:1.375rem}
  .slide-visual{order:-1;min-height:0;padding:0 0 0.5rem}
  .slide-visual .stage-chip,.slide-visual .gbp-chip,.slide-visual .rv-count{position:static;animation:none;justify-self:center;margin-top:0.875rem;inset:auto}
  .slide-visual .gbp-chip{order:-1;margin:0 0 0.875rem}
}

/* Stage pieces — light, so they sit on paper with no container */
.stage-chip,.gbp-chip{position:absolute;display:inline-flex;align-items:center;gap:0.5rem;padding:0.5625rem 0.875rem;border-radius:62.4375rem;font-weight:600;font-size:.875rem;border:1px solid transparent;animation:bob 6s ease-in-out infinite;box-shadow:var(--shadow-sm)}
.stage-chip{right:4%;bottom:12%}
.stage-chip.is-blue{background:#fff;color:var(--blue-text);border-color:rgba(31,107,255,.25)}
.stage-chip.is-money{background:#fff;color:var(--money);border-color:rgba(21,128,61,.25)}
.mini-site{width:100%;max-width:23.75rem;background:#fff;color:var(--ink);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.mini-bar{height:1.75rem;background:var(--paper-2);display:flex;align-items:center;gap:0.3125rem;padding:0 0.75rem;border-bottom:1px solid var(--line);font-size:.7rem;color:var(--muted)}
.mini-bar i{width:0.4375rem;height:0.4375rem;border-radius:50%;background:rgba(21,22,26,.15)}
.mini-bar span{margin-left:0.5rem}
.mini-hero{padding:1.625rem 1.25rem 1.25rem;background:var(--hero);color:var(--on-dark);display:flex;flex-direction:column;gap:0.625rem}
.mini-tag{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8FB5FF}
.mini-h{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1.1}
.mini-btn{display:inline-flex;align-items:center;gap:0.375rem;align-self:flex-start;background:var(--blue);color:#fff;font-weight:600;font-size:.8125rem;padding:0.5625rem 0.875rem;border-radius:62.4375rem;margin-top:0.375rem}
.mini-row{display:flex;gap:0.5rem;padding:1rem 1.25rem 1.25rem}
.mini-card{flex:1;height:3rem;border-radius:0.5rem;background:var(--paper);border:1px solid var(--line)}
.mini-thread{width:100%;max-width:22.5rem;display:flex;flex-direction:column;gap:0.5rem}
.mini-thread .sys{color:var(--flare);background:var(--flare-soft)}
.mini-thread .ts{color:var(--muted)}
.mini-thread .bubble.in{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.mini-thread .bubble.out{box-shadow:0 6px 18px rgba(31,107,255,.22)}
.timeline{display:grid;width:100%;max-width:22.5rem;position:relative}
.timeline::before{content:"";position:absolute;left:0.5625rem;top:0.75rem;bottom:0.75rem;width:2px;background:var(--line-strong)}
.timeline li{display:flex;align-items:flex-start;gap:1rem;padding:0.75rem 0;position:relative}
.tl-dot{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid var(--line-strong);background:var(--paper-2);flex:none;position:relative;z-index:1;margin-top:2px}
.timeline .is-done .tl-dot{border-color:var(--blue);background:var(--blue)}
.timeline .is-booked .tl-dot{border-color:var(--money);background:var(--money);box-shadow:0 0 0 6px var(--money-soft)}
.timeline b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.timeline small{color:var(--muted);font-size:.8125rem}
.timeline .is-booked b{color:var(--money)}
.review-stack{display:grid;gap:0.625rem;width:100%;max-width:22.5rem}
.rv{background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:0.875rem 1rem;display:grid;gap:0.25rem;box-shadow:var(--shadow-sm)}
.rv b{font-weight:600;font-size:.9375rem;color:var(--ink)}
.rv small{color:var(--muted);font-size:.8125rem}
.rv-count{position:absolute;left:4%;bottom:10%;display:flex;align-items:center;gap:0.625rem;background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:0.625rem 1rem;font-size:.8125rem;line-height:1.2;color:var(--muted);box-shadow:var(--shadow-md)}
.rv-big{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--money);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.report{width:100%;max-width:22.5rem;background:#fff;color:var(--ink);border-radius:1rem;padding:1.25rem 1.375rem;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:0.75rem;border-bottom:1px solid var(--line);margin-bottom:0.375rem}
.rp-head b{font-family:var(--font-display);font-weight:700}
.rp-head span{color:var(--muted);font-size:.8125rem}
.rp-row{display:flex;justify-content:space-between;align-items:center;padding:0.625rem 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.rp-row b{font-family:var(--font-display);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.rp-total{border-bottom:0;padding-top:0.75rem}
.rp-total span{font-weight:600;color:var(--ink)}
.rp-total b{font-size:1.6rem}
.gbp-chip{left:4%;top:10%;background:#fff;border-color:var(--line);color:var(--ink);padding:0.625rem 0.875rem;border-radius:0.875rem;align-items:center}
.gbp-chip b{display:block;font-family:var(--font-display);font-weight:700;font-size:.9375rem}
.gbp-chip small{display:block;color:var(--muted);font-size:.75rem}
.gbp-chip .i{color:var(--blue-text)}

/* ---------- Work ---------- */
.work-row{display:grid;gap:1.125rem;grid-auto-flow:column;grid-auto-columns:min(82vw,20.625rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:0.25rem 0.25rem 1rem;margin:0 -0.25rem;scrollbar-width:thin}
@container wrap (min-width:1100px){.work-row{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;overflow:visible;padding:0;margin:0;gap:var(--grid-gap)}.work-card{padding:0.625rem 0.625rem 0.875rem}.work-meta b{font-size:.9375rem}.work-meta span{font-size:.8125rem}}
.work-card{scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:0.75rem 0.75rem 1rem;display:flex;flex-direction:column;gap:0.75rem;transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.work-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.browser{border-radius:0.625rem;overflow:hidden;border:1px solid var(--line);background:#fff}
.browser-bar{height:1.125rem;background:var(--paper-2);display:flex;align-items:center;gap:0.25rem;padding:0 0.5rem;border-bottom:1px solid var(--line)}
.browser-bar i{width:0.375rem;height:0.375rem;border-radius:50%;background:rgba(21,22,26,.15)}
.browser img{aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.work-card:hover .browser img{transform:scale(1.03)}
.work-meta{display:flex;flex-direction:column;gap:2px;padding:0 0.25rem}
.work-meta b{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.work-meta span{color:var(--muted);font-size:.875rem}
.work-go{display:inline-flex;align-items:center;gap:0.375rem;color:var(--blue-text);font-weight:600;font-size:.875rem;padding:0 0.25rem}

/* ---------- Pricing ---------- */
/* ---------- Pricing: one plan, the money on the left, the list on the right ---------- */
.plan{display:grid;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.plan-money,.plan-list{padding:clamp(1.625rem,4vw,2.75rem)}
.plan-list{background:var(--paper);border-top:1px solid var(--line)}
@container wrap (min-width:900px){.plan{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.plan-list{border-top:0;border-left:1px solid var(--line)}}
.plan-list{container-type:inline-size}
.plan-label{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.plan-price{display:flex;align-items:flex-start;gap:0.25rem;margin:0 0 1.125rem;line-height:1;font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-cur{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:.35em;font-weight:700;letter-spacing:-.02em;color:var(--ink-2)}
.plan-big{font-size:clamp(4.5rem,9vw,6.5rem)}
.plan-per{align-self:flex-end;margin:0 0 .55em 0.625rem;font-family:var(--font-body);font-weight:500;font-size:1.0625rem;letter-spacing:0;color:var(--muted)}
.plan-build{margin:0 0 1.625rem;color:var(--ink-2);font-size:1.0625rem;max-width:38ch}
.plan-build b{color:var(--ink);font-weight:700}
.plan-build s{text-decoration-color:var(--flare);text-decoration-thickness:1.5px;color:var(--muted)}
.plan-micro{margin:0.75rem 0 0;color:var(--muted);font-size:.9375rem}
.includes{display:grid;gap:0.75rem;margin:0}
@container (min-width:520px){.includes{grid-template-columns:1fr 1fr;gap:0.75rem 1.125rem}}
.includes li{display:flex;align-items:flex-start;gap:0.625rem;font-size:1rem;color:var(--ink)}
.includes .i{color:var(--money);margin-top:3px;flex:none}
.plan-terms{margin:1.125rem 0 0}
.plan-terms li{padding:1.25rem 1.375rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.plan-terms b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;margin-bottom:0.375rem}
.plan-terms span{color:var(--ink-2);font-size:.9375rem}
.plan-compare{margin-top:1.125rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:0 1.375rem}
.plan-compare summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:1.125rem 0;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.plan-compare summary::-webkit-details-marker{display:none}
.plan-compare summary .i{color:var(--muted);transition:transform .25s var(--ease)}
.plan-compare[open] summary .i{transform:rotate(180deg)}
.plan-compare dl{margin:0;display:grid;padding-bottom:0.375rem}
.plan-compare dl>div{display:flex;justify-content:space-between;gap:0.875rem;padding:0.75rem 0;border-top:1px solid var(--line);font-size:.9375rem}
.plan-compare dt{color:var(--ink-2)}
.plan-compare dd{margin:0;color:var(--muted);text-align:right;white-space:nowrap}
.plan-compare .is-us{border-top:1px solid var(--line-strong)}
.plan-compare .is-us dt,.plan-compare .is-us dd{font-weight:700;color:var(--ink)}
.plan-compare .is-us dd{color:var(--money)}
.compare-note{margin:0;padding:0.375rem 0 1.125rem;color:var(--muted);font-size:.8125rem}

/* ---------- Steps ---------- */
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.375rem,3vw,1.875rem);container-type:inline-size}
.step-num{display:inline-grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.step-when{display:block;margin-top:1rem;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text)}
.step .h3{margin:0.5rem 0 0.625rem}
.step p{color:var(--ink-2);font-size:1rem;margin:0 0 0.875rem}
.about-band{margin-top:1.75rem;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:1.0625rem}
.about-band b{color:var(--ink);font-family:var(--font-display);font-weight:700}

/* ---------- Form ---------- */
.form-grid{display:grid;gap:2rem}
@container (min-width:960px){.form-grid{grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:start}.form-intro{position:sticky;top:calc(var(--nav-h) + 1.5rem)}}
.promise{display:grid;gap:0.75rem;margin-top:1.625rem}
.promise li{display:flex;align-items:center;gap:0.625rem;color:var(--ink-2)}
.promise .i{color:var(--money)}
.talk-first{margin-top:1.375rem;color:var(--muted)}
.talk-first a{color:var(--blue-text);font-weight:600}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2.125rem);box-shadow:var(--shadow-sm);container-type:inline-size}
.fields{display:grid;gap:1.125rem}
/* Two columns once the card itself is wide enough, whatever the viewport is doing (unfolded foldables, side by side layouts). */
@container (min-width:560px){.fields{grid-template-columns:1fr 1fr;gap:1.125rem 1rem}.field.full{grid-column:1/-1}}
.field label,.field legend{display:block;font-weight:600;font-size:.9375rem;margin-bottom:0.4375rem;color:var(--ink)}
.req{color:var(--flare)}
.opt{color:var(--muted);font-weight:400;font-size:.8125rem;margin-left:0.25rem}
.hint{display:block;color:var(--muted);font-weight:400;font-size:.875rem;margin-top:2px}
.hint-under{color:var(--muted);font-size:.875rem;margin:0.5rem 0 0}
.input{width:100%;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0.8125rem 0.875rem;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.input::placeholder{color:#9A9FA9}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);background:#fff}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.875rem center;padding-right:2.5rem}
textarea.input{resize:vertical;min-height:5.5rem}
.field.is-bad .input{border-color:var(--flare)}
.err{color:var(--flare);font-size:.875rem;margin:0.375rem 0 0}
.err:empty{display:none}
.checkline{display:flex!important;align-items:center;gap:0.5rem;font-weight:400!important;font-size:.875rem!important;color:var(--muted)!important;margin:0.5rem 0 0!important}
.checkline input{width:1rem;height:1rem;accent-color:var(--blue)}
.pills{display:flex;flex-wrap:wrap;gap:0.5rem}
.pills label{position:relative}
.pills input{position:absolute;opacity:0;inset:0;pointer-events:none}
.pills span{display:inline-block;padding:0.5625rem 0.875rem;border-radius:62.4375rem;border:1px solid var(--line-strong);background:var(--paper);font-size:.9375rem;font-weight:500;transition:border-color .15s,background .15s,color .15s;cursor:pointer}
.pills input:checked+span{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-text)}
.pills input:focus-visible+span{box-shadow:0 0 0 4px var(--blue-soft)}
.consent{display:flex!important;gap:0.625rem;align-items:flex-start;font-weight:400!important;font-size:.8125rem!important;color:var(--muted)!important;line-height:1.5;margin:0!important}
.consent input{width:1.125rem;height:1.125rem;flex:none;margin-top:2px;accent-color:var(--blue)}
.consent a{color:var(--blue-text);text-decoration:underline}
.hp{position:absolute;left:-624.9375rem;opacity:0;height:0;width:0}
.form-foot{margin-top:1.375rem}
.status{display:flex;gap:0.875rem;align-items:flex-start;margin-top:1.125rem;padding:1rem 1.125rem;border-radius:var(--r-sm)}
.status b{display:block;font-family:var(--font-display);font-weight:700;margin-bottom:0.25rem}
.status p{margin:0;font-size:.9375rem}
.status-bad{background:var(--flare-soft);border:1px solid rgba(220,38,38,.25);color:var(--ink)}
.status-bad .i{color:var(--flare)}
.status-bad a{color:var(--blue-text);font-weight:600}
.status-ok{margin:0;padding:0.5rem 0.25rem;background:transparent}
.ok-check{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--money-soft);color:var(--money);display:grid;place-items:center;flex:none}
.status-ok b{font-size:1.25rem}
.status-ok p{color:var(--ink-2);font-size:1.0625rem}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:51.25rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--muted);transition:transform .25s var(--ease)}
.faq details[open] summary .i{transform:rotate(45deg);color:var(--blue-text)}
.faq details p{padding:0 0 1.375rem;color:var(--ink-2);max-width:var(--measure)}

/* ---------- Final CTA ---------- */
.final{background:var(--hero);color:var(--on-dark);padding:var(--pad) 0;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.final-glow{position:absolute;inset:-30% -10%;z-index:-1;background:radial-gradient(800px 460px at 50% 110%,rgba(31,107,255,.3),transparent 65%);will-change:transform}
.final .wrap{max-width:47.5rem}
.final .h2,.final p{margin-inline:auto}
.final p{color:var(--on-dark-muted);font-size:1.125rem;margin:1rem 0 1.75rem}

/* ---------- Footer ---------- */
.footer{padding:3rem 0 1.75rem;border-top:1px solid var(--line);background:var(--paper)}
.footer-grid{display:grid;gap:1.75rem}
@container wrap (min-width:480px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@container wrap (min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}.footer-brand{grid-column:auto}}
.footer .lockup{color:var(--ink)}
.footer-brand p{color:var(--muted);font-size:.9375rem;max-width:40ch;margin-top:0.875rem}
.footer-brand a:hover{color:var(--ink)}
.footer-links{display:flex;flex-direction:column;gap:0.625rem;font-size:.9375rem;color:var(--muted)}
.footer-links a:hover{color:var(--ink)}
.footer-base{display:flex;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;margin-top:2.25rem;padding-top:1.125rem;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));background:rgba(247,246,242,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.mobile-cta.is-on{transform:none}
@media(min-width:900px){.mobile-cta{display:none}}
body.has-mobile-cta .footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(2){transition-delay:.08s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.24s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.32s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  [data-reveal],[data-stagger]>*,[data-thread] [data-msg]{opacity:1;transform:none}
  .h1 .w>span{transform:none;opacity:1}
}
.no-js [data-reveal],.no-js [data-stagger]>*,.no-js [data-thread] [data-msg]{opacity:1;transform:none}

/* ---------- v3.5: quotes, sample link ---------- */
.quotes{margin-top:1.75rem}
.quote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,1.75rem);display:flex;flex-direction:column;gap:1rem}
.quote p{margin:0;font-size:1.0625rem;color:var(--ink-2);line-height:1.55}
.quote footer{display:flex;align-items:center;gap:0.75rem}
.quote .avatar{width:2.375rem;height:2.375rem;border-radius:50%;background:var(--blue-soft);color:var(--blue-text);display:grid;place-items:center;font-weight:700;border:0}
.quote b{display:block;font-family:var(--font-display);font-weight:700;font-size:.9375rem}
.quote small{color:var(--muted);font-size:.8125rem}
.sample-link{margin-top:1.5rem;padding:0.875rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);display:grid;gap:0.25rem}
.sample-link a{display:inline-flex;align-items:center;gap:0.375rem;color:var(--blue-text);font-weight:600}
.sample-link span{color:var(--muted);font-size:.9375rem}

/* ---------- Subpages (trade, explainer, compare, audit, blog) ---------- */
.sub-hero{background:var(--hero);color:var(--on-dark);padding:clamp(3.5rem,8vw,6rem) 0;position:relative;overflow:hidden;isolation:isolate}
.sub-hero .hero-glow{inset:-30% -10%}
.sub-hero .h1{font-size:clamp(2.2rem,5vw,3.9rem)}
.sub-hero .sub{color:var(--on-dark-muted);font-size:1.125rem;max-width:56ch;margin-top:1.125rem}
.sub-hero .hero-glow{inset:-30% auto -30% 50%;width:min(120%,var(--media-max));margin-left:max(-60%,calc(var(--media-max) / -2))}
.crumbs{font-size:.875rem;color:var(--on-dark-muted);margin:0 0 1.125rem}
.crumbs a:hover{color:var(--on-dark)}
.prose{max-width:var(--measure)}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin:2.5rem 0 0.75rem}
.prose p,.prose li{font-size:1.0625rem;color:var(--ink-2)}
.prose ul{padding-left:1.25rem;list-style:disc;display:grid;gap:0.375rem}
.prose a{color:var(--blue-text);text-decoration:underline;text-underline-offset:2px}
.cost{width:100%;border-collapse:collapse;margin:1rem 0;background:#fff;border:1px solid var(--line);border-radius:0.875rem;overflow:hidden}
.cost th,.cost td{text-align:left;padding:0.75rem 1rem;border-bottom:1px solid var(--line);font-size:.9375rem}
.cost th{background:var(--paper-2);font-weight:600}
.cost tr:last-child td{border-bottom:0}
.cost td.n{font-family:var(--font-display);font-weight:700;text-align:right;white-space:nowrap}

.post-head{max-width:45rem;padding-top:clamp(2.5rem,6vw,4.5rem)}
.post-head .h1{font-size:clamp(2rem,4.5vw,3.4rem)}
.post-meta{color:var(--muted);font-size:.9375rem;margin-top:0.875rem}
.callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0.75rem;padding:1.125rem 1.25rem;margin:1.5rem 0}
.cta-inline{background:var(--hero);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.5rem);margin:2.5rem 0;display:flex;flex-wrap:wrap;gap:1.125rem;align-items:center;justify-content:space-between}
.cta-inline b{font-family:var(--font-display);font-size:1.3rem;letter-spacing:-.01em;display:block}
.cta-inline span{color:var(--on-dark-muted)}
.cmp-wrap{overflow-x:auto;margin:1.75rem -0.25rem 0;padding:0 0.25rem}
.cmp{width:100%;min-width:47.5rem;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:0.875rem;overflow:hidden;font-size:.9375rem}
.cmp th,.cmp td{padding:0.75rem 0.875rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp th{background:var(--paper-2);font-weight:600}
.cmp tr.us{background:var(--blue-soft)}
.cmp tr.us td{font-weight:600}
.qs{display:grid;gap:0.75rem;padding:0;list-style:none}
.qs li{background:#fff;border:1px solid var(--line);border-radius:0.75rem;padding:0.875rem 1rem;display:flex;gap:0.75rem}
.qs li b{font-family:var(--font-display);color:var(--blue-text);flex:none}

.first{display:inline-flex;align-items:center;gap:0.5rem;background:var(--money-soft);color:var(--money);border-radius:62.4375rem;padding:0.375rem 0.75rem;font-weight:600;font-size:.875rem}
.honest{margin-top:1.125rem;padding:0.875rem 1rem;border:1px dashed var(--line-strong);border-radius:0.75rem;color:var(--ink-2);font-size:.9375rem}

.trade-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.375rem 1.5rem;transition:transform .2s var(--ease),box-shadow .2s}
.trade-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.trade-card b{font-family:var(--font-display);font-size:1.15rem;letter-spacing:-.01em;display:block;margin-bottom:0.375rem}
.trade-card p{color:var(--ink-2);font-size:.9375rem;margin:0 0 0.625rem}
.trade-card span{color:var(--blue-text);font-weight:600;font-size:.9375rem}
.post-list{display:grid;gap:1rem;max-width:47.5rem}
.post-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.375rem 1.5rem}
.post-card b{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.01em;display:block;margin-bottom:0.375rem}
.post-card p{color:var(--ink-2);margin:0 0 0.375rem}
.post-card small{color:var(--muted)}

/* Quotes: stars */
.quote .stars{color:#F59E0B;font-size:1rem;letter-spacing:.1em;line-height:1}

/* ---------- v4.1: the leak, our work, how it works, the form ---------- */
/* The leak: three scenes, each closed by what the plan does about it */

.leak{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.375rem,3vw,1.75rem);display:flex;flex-direction:column;gap:0.625rem;transition:transform .25s var(--ease),box-shadow .25s;container-type:inline-size}
.leak:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.leak-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.375rem}
.leak-n{font-family:var(--font-display);font-weight:800;font-size:.8125rem;letter-spacing:.06em;color:var(--muted)}
.leak .h3{margin:0}
.leak p{margin:0;color:var(--ink-2)}
.leak-fix{margin-top:auto!important;padding-top:0.875rem;border-top:1px solid var(--line);display:flex;gap:0.5625rem;align-items:flex-start;font-size:.9375rem;color:var(--ink-2)!important;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.leak-fix .i{color:var(--money);flex:none;margin-top:2px}
.leak-fix b{color:var(--ink)}
[data-stagger].is-in .leak-fix{opacity:1;transform:none;transition-delay:calc(.6s + var(--k,0) * .14s)}
.calc-bars{display:grid;gap:0.625rem;margin:0 0 1.375rem;max-width:26.25rem}
.bar{display:grid;grid-template-columns:4rem 1fr auto;align-items:center;gap:0.625rem;font-size:.8125rem;color:var(--on-dark-muted)}
.bar i{display:block;height:0.625rem;border-radius:62.4375rem;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;width:var(--w,100%);border-radius:62.4375rem;background:var(--flare);transition:width .5s var(--ease-out)}
.bar-plan i::after{background:var(--blue)}
.bar b{font-family:var(--font-display);font-weight:700;color:var(--on-dark);font-variant-numeric:tabular-nums;min-width:3.25rem;text-align:right}
.calc-micro{margin:0.625rem 0 0;color:var(--on-dark-muted);font-size:.875rem}

/* Our work: a next slot, and quotes that point back at the site */
.section-head-row{display:grid;gap:0.75rem;align-items:end}
@container wrap (min-width:960px){.section-head-row{grid-template-columns:1fr auto;max-width:none}.section-head-row .section-sub{max-width:34ch;margin:0 0 0.375rem;text-align:right}}
.browser-bar span{margin-left:0.375rem;font-size:.6875rem;color:var(--muted);letter-spacing:0}
.work-next .browser{background:var(--paper)}
.browser-next{border-style:dashed;border-color:var(--line-strong)}
.next-body{aspect-ratio:16/10;display:grid;place-content:center;text-align:center;gap:0.25rem;padding:1rem}
.next-plus{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin:0 auto 0.375rem;transition:transform .3s var(--ease-out)}
.work-next:hover .next-plus{transform:scale(1.1) rotate(90deg)}
.next-body b{font-family:var(--font-display);font-weight:700;font-size:1rem}
.next-body small{color:var(--muted);font-size:.8125rem}
.work-next{border-color:rgba(31,107,255,.3)}
.work-next:hover{border-color:var(--blue)}
.quote footer{flex-wrap:wrap}
.quote-site{margin-left:auto;display:inline-flex;align-items:center;gap:0.3125rem;color:var(--blue-text);font-weight:600;font-size:.875rem}
@media(min-width:960px){.quote-lead{grid-column:span 1}}

/* How it works: the steps light up one at a time, and the line between them draws */
.steps{position:relative;counter-reset:none}
.step{position:relative;display:flex;flex-direction:column;opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .25s;transition-delay:calc(var(--k,0) * .22s)}
.steps.is-in .step{opacity:1;transform:none}
.step-head{display:flex;align-items:center;gap:0.75rem}
.step-when{margin:0}
.step-num{transform:scale(.7);opacity:.4;transition:transform .5s var(--ease-out),opacity .4s;transition-delay:calc(var(--k,0) * .22s + .25s)}
.steps.is-in .step-num{transform:none;opacity:1}
.step .h3{margin:1rem 0 0.625rem}
.step-tag{display:inline-block;align-self:flex-start;margin-top:auto;padding:0.3125rem 0.625rem;border-radius:62.4375rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--paper-2);color:var(--muted)}
.step-tag.step-you{background:var(--blue-soft);color:var(--blue-text)}
@container wrap (min-width:1000px){
  .steps::before{content:"";position:absolute;left:calc(16.66% + 1.25rem);right:calc(16.66% + 1.25rem);top:calc(clamp(1.375rem,3vw,1.875rem) + 1.1875rem);height:2px;background:var(--line);z-index:0}
  .steps::after{content:"";position:absolute;left:calc(16.66% + 1.25rem);top:calc(clamp(1.375rem,3vw,1.875rem) + 1.1875rem);height:2px;width:0;background:var(--blue);z-index:0;transition:width 1.1s var(--ease-out) .3s}
  .steps.is-in::after{width:calc(66.68% - 2.5rem)}
  .step{z-index:1}
}
.about-band{display:flex;gap:1rem;align-items:flex-start}
@container wrap (max-width:480px){.about-band{flex-direction:column}}
.about-band p{margin:0}
.about-mark{flex:none;width:2.5rem;height:2.5rem;border-radius:0.75rem;background:var(--blue-soft);color:var(--blue-text);display:grid;place-items:center}

/* The form: what happens next, a short quote, fewer visible fields */
.next-steps{display:grid;gap:0.75rem;margin:1.625rem 0 0;padding:0;list-style:none}
.next-steps li{display:flex;gap:0.75rem;align-items:flex-start;color:var(--ink-2);font-size:.9375rem}
.next-steps b{color:var(--ink)}
.ns-n{flex:none;width:1.625rem;height:1.625rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.8125rem}
.form-quote{margin:1.5rem 0 0;padding:1.125rem 1.25rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);display:grid;gap:0.625rem}
.form-quote p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.5}
.form-quote footer{display:flex;align-items:center;gap:0.625rem}
.form-quote .avatar{width:1.875rem;height:1.875rem;font-size:.75rem}
.form-quote b{display:block;font-family:var(--font-display);font-weight:700;font-size:.875rem}
.form-quote small{color:var(--muted);font-size:.8125rem}
.form-quote .stars{color:#F59E0B;font-size:.9rem;letter-spacing:.1em;line-height:1}
.form-head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.form-head b{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.form-time{display:inline-flex;align-items:center;gap:0.375rem;font-size:.8125rem;font-weight:600;color:var(--muted);padding:0.375rem 0.625rem;border-radius:62.4375rem;background:var(--paper-2)}
.more{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:0 1rem}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:0.5rem;padding:0.875rem 0;font-weight:600;font-size:.9375rem}
.more summary::-webkit-details-marker{display:none}
.more summary .opt{font-weight:400;color:var(--muted);font-size:.875rem}
.more summary .i{margin-left:auto;color:var(--muted);transition:transform .25s var(--ease)}
.more[open] summary .i{transform:rotate(180deg)}
.more-body{display:grid;gap:1.125rem;padding:0.25rem 0 1.125rem}
.form-micro{display:flex;align-items:center;justify-content:center;gap:0.375rem;margin:0.75rem 0 0;color:var(--muted);font-size:.875rem}
.form-micro .i{color:var(--money)}

/* ---------- Legal pages (privacy, terms, sms terms) ---------- */
.legal{width:min(var(--wrap),var(--measure));margin-inline:auto;padding:clamp(3rem,8vw,6rem) 0}
.legal h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 .5rem;max-width:var(--measure-h)}
.legal .upd{color:var(--muted);font-size:.9375rem;margin:0 0 2.25rem}
.legal h2{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;margin:2rem 0 .625rem;max-width:var(--measure-h)}
.legal p,.legal li{color:var(--ink-2)}
.legal ul{padding-left:1.25rem;list-style:disc;display:grid;gap:.375rem}
.legal a{color:var(--blue-text);text-decoration:underline}
.legal-nav{display:flex;gap:1.125rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem}