/* Full Scale — site styles v2 (scroll-story edition) */
/* Sora, self-hosted: only the weights the rest of this file actually uses (400/500/600/700). */
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/sora-400.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/sora-500.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/sora-600.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/sora-700.woff2") format("woff2")}

:root{
  --navy:#0B1626;
  --navy-2:#101E32;
  --navy-3:#1A2B44;
  --line-navy:#23354F;
  --bone:#F3F1EA;
  --bone-2:#E9E5DA;
  --line-bone:#D6D0C1;
  --gold:#CFAE6B;
  --gold-2:#E2C88F;
  --gold-ink:#7A5E2C;
  --on-navy:#F3F1EA;
  --on-navy-2:#A9B3C4;
  --on-bone:#0B1626;
  --on-bone-2:#4A5366;
  --wrap:1280px;
  --gutter:clamp(16px,4vw,48px);
  --radius:4px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
main{overflow-x:clip}
body{margin:0;background:var(--navy);color:var(--on-navy);font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (min-width:900px){body{font-size:18px}}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.035em;line-height:1.02;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--navy);padding:10px 14px;z-index:200}
.skip:focus{left:8px}
.line-mask{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}

/* Film grain, static and cheap */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:56px;padding:0 26px;border-radius:var(--radius);font:600 16px/1 "Sora",sans-serif;white-space:nowrap;text-decoration:none;border:0;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);will-change:transform}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{background:transparent;color:inherit;padding:0 4px;min-height:44px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.btn--ghost:hover{text-decoration-color:var(--gold)}
.btn--navy{background:var(--navy);color:var(--bone)}
.btn--navy:hover{background:var(--navy-3)}
.steps-icon{display:flex;align-items:flex-end;gap:2px;height:14px}
.steps-icon i{display:block;width:3px;background:currentColor;transition:height .3s var(--ease)}
.steps-icon i:nth-child(1){height:5px}.steps-icon i:nth-child(2){height:9px}.steps-icon i:nth-child(3){height:14px}
.btn:hover .steps-icon i:nth-child(1){height:9px}.btn:hover .steps-icon i:nth-child(2){height:13px}
.micro{font-size:14px;color:var(--on-navy-2);margin:16px 0 0}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .45s var(--ease),background .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(11,22,38,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line-navy)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.logo{display:inline-flex;align-items:flex-end;gap:10px;text-decoration:none;color:inherit}
.logo svg{width:26px;height:26px}
.logo span{font-weight:700;font-size:25px;letter-spacing:-0.045em;line-height:.8}
.nav__links{display:none;gap:32px;font-size:15px}
.nav__links a{position:relative;text-decoration:none;color:var(--on-navy-2);padding:6px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__links a:hover{color:var(--on-navy)}
.nav .btn{min-height:44px;font-size:15px;padding:0 18px}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav.is-mnav-open{z-index:71}
@media (min-width:900px){.nav__links{display:flex}}
@media (max-width:599px){.nav__actions .btn{padding:0 14px;font-size:14px}}
@media (max-width:899px){.book-nav .nav__in{justify-content:space-between}}

/* Mobile nav: logo-bars button + right-side panel (MOBILE-NAV-SPEC.md, 5 Oct
   2026), shared by every header via mnav_button_html()/mnav_panel_html()
   in build.py. Hidden outright at >=900px: the laptop header is untouched. */
.mnav-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;flex:none}
.mnav-bars{display:flex;align-items:flex-end;gap:3px;width:18px;height:18px;position:relative}
.mnav-bar{display:block;width:4px;height:11px;border-radius:1px;background:var(--bone);transform-origin:50% 50%;transition:height .18s var(--ease),transform .22s var(--ease),opacity .22s var(--ease)}
.mnav-bar:nth-child(3){background:var(--gold)}
.mnav-bars.is-rise .mnav-bar:nth-child(1){height:7px;transition-delay:0ms}
.mnav-bars.is-rise .mnav-bar:nth-child(2){height:12px;transition-delay:40ms}
.mnav-bars.is-rise .mnav-bar:nth-child(3){height:18px;transition-delay:80ms}
.mnav-bars.is-x .mnav-bar{transition-duration:.22s;transition-delay:0ms}
.mnav-bars.is-x .mnav-bar:nth-child(1){height:16px;transform:translateX(7px) rotate(45deg)}
.mnav-bars.is-x .mnav-bar:nth-child(2){opacity:0}
.mnav-bars.is-x .mnav-bar:nth-child(3){height:16px;transform:translateX(-7px) rotate(-45deg);background:var(--bone)}
.mnav{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end;visibility:hidden;pointer-events:none}
.mnav.is-open{visibility:visible;pointer-events:auto}
.mnav__backdrop{position:absolute;inset:0;background:rgba(11,22,38,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .32s var(--ease)}
.mnav.is-open .mnav__backdrop{opacity:1}
.mnav__panel{position:relative;width:min(88vw,400px);height:100%;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--navy-2);border-left:1px solid rgba(207,174,107,.4);box-shadow:-30px 0 60px -20px rgba(11,22,38,.6);transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:calc(80px + env(safe-area-inset-top,0px) + 16px) 24px calc(32px + env(safe-area-inset-bottom,0px))}
.mnav.is-open .mnav__panel{transform:translateX(0)}
.mnav__links{display:flex;flex-direction:column;gap:2px}
.mnav__links a{font:600 24px "Sora",sans-serif;color:var(--on-navy);text-decoration:none;padding:10px 0;opacity:0;transform:translateY(14px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.mnav.is-open .mnav__links a{opacity:1;transform:none}
.mnav__links a:nth-child(1){transition-delay:0ms}
.mnav__links a:nth-child(2){transition-delay:50ms}
.mnav__links a:nth-child(3){transition-delay:100ms}
.mnav__links a:nth-child(4){transition-delay:150ms}
.mnav__links a:nth-child(5){transition-delay:200ms}
.mnav__divider{height:1px;background:var(--line-navy);margin:28px 0 20px;flex:none}
.mnav__caption{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-2);margin:0 0 12px}
.mnav__industries{display:grid;grid-template-columns:1fr;gap:2px 16px}
@media (min-width:380px){.mnav__industries{grid-template-columns:repeat(2,1fr)}}
.mnav__ind{display:flex;align-items:center;gap:8px;padding:7px 0;color:var(--on-navy);text-decoration:none;font-size:14px}
.mnav__ind-icon{width:20px;height:20px;flex:none;color:var(--gold)}
.mnav__book{width:100%;justify-content:center;margin-top:28px;flex:none}
.mnav__call{display:block;margin-top:14px;text-align:center;font-size:15px;color:var(--on-navy);text-decoration:underline;text-underline-offset:4px;flex:none}
.mnav__foot{margin:16px 0 0;font-size:13px;color:var(--on-navy-2);text-align:center;flex:none}
@media (min-width:900px){.mnav-btn,.mnav{display:none}}
@media (prefers-reduced-motion:reduce){
  .mnav,.mnav__backdrop,.mnav__panel,.mnav-bar,.mnav__links a{transition:none!important}
}

/* HERO */
.hero{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:var(--navy)}
@media (min-width:900px){.hero{max-height:none}}
.hero__glow{position:absolute;inset:auto -20% -40% 30%;height:90%;background:radial-gradient(closest-side,rgba(207,174,107,.16),rgba(207,174,107,0));pointer-events:none}
.hero__blocks{position:absolute;z-index:1;right:var(--gutter);bottom:0;display:flex;align-items:flex-end;gap:clamp(8px,1.2vw,18px);height:clamp(240px,46svh,600px);opacity:.12}
.hero__blocks i{display:block;width:clamp(46px,7.6vw,132px);background:var(--bone);transform-origin:50% 100%}
.hero__blocks i:nth-child(1){height:33.3%}
.hero__blocks i:nth-child(2){height:66.6%}
.hero__blocks i:nth-child(3){height:100%;background:var(--gold)}
@media (min-width:900px){.hero__blocks{opacity:1;height:clamp(300px,62svh,680px)}.hero__blocks i:nth-child(1),.hero__blocks i:nth-child(2){background:var(--navy-3)}}
.hero__content{position:absolute;z-index:3;left:0;right:0;bottom:clamp(40px,8svh,96px)}
.hero__grid{display:grid;gap:28px}
@media (max-width:899px){.hero{height:auto;min-height:100svh;display:flex;align-items:flex-end;padding:112px 0 44px}.hero__content{position:relative;bottom:auto}}
.hero__tag{display:flex;align-items:center;gap:12px;margin:0;font-size:15px;font-weight:600;color:var(--gold)}
.hero__tag::before{content:"";width:28px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(46px,min(9vw,14.5svh),138px);letter-spacing:-0.055em;line-height:.9;max-width:11.5ch;font-weight:700}
.hero__sub{font-size:clamp(17px,1.6vw,21px);color:var(--on-navy-2);max-width:48ch;margin:0}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hero__cue{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(40px,8svh,96px);display:none;align-items:center;gap:12px;font-size:13px;color:var(--on-navy-2);writing-mode:vertical-rl}
.hero__cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--on-navy-2),transparent)}


/* Area check (niche pages) */
.check{display:grid;gap:12px;background:rgba(16,30,50,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-navy);border-radius:6px;padding:18px;max-width:660px}
.check__row{display:grid;gap:10px}
@media (min-width:640px){.check__row{grid-template-columns:1fr 1.2fr auto}}
.field{display:grid;gap:6px;font-size:14px;color:var(--on-navy-2)}
.field[hidden]{display:none}
.field input,.field select{appearance:none;width:100%;min-height:56px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--line-navy);background:var(--navy);color:var(--on-navy);font:500 16px "Sora",sans-serif}
.field input[aria-invalid="true"]{border-color:#B3261E}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--on-navy-2) 50%),linear-gradient(135deg,var(--on-navy-2) 50%,transparent 50%);background-position:calc(100% - 20px) 25px,calc(100% - 15px) 25px;background-size:5px 5px;background-repeat:no-repeat}
.check .btn{align-self:end}
.check__result{font-size:15px;margin:0}
.check__result b{color:var(--gold)}
.check .micro{margin:0}

/* Generic bands */
.band{position:relative;padding:clamp(64px,8vw,112px) 0}
.band--bone{background:var(--bone);color:var(--on-bone)}
.band--bone-2{background:var(--bone-2);color:var(--on-bone)}
.band--tight{padding:clamp(56px,7vw,88px) 0}
.band--tight .head{margin-bottom:clamp(28px,4vw,44px)}
.band--navy-2{background:var(--navy-2)}
.h2{font-size:clamp(36px,5.4vw,76px);letter-spacing:-0.045em;line-height:.98;max-width:15ch}
.lede{font-size:clamp(17px,1.6vw,21px);color:var(--on-navy-2);max-width:52ch;margin:0}
.band--bone .lede,.band--bone-2 .lede{color:var(--on-bone-2)}
.head{display:grid;gap:22px;margin-bottom:clamp(44px,6vw,80px)}
.kicker{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--gold-ink);margin:0}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.band:not(.band--bone):not(.band--bone-2) .kicker{color:var(--gold)}

/* LEDGER */
.ledger{border-top:1px solid var(--line-bone)}
.ledger__head,.ledger__row{display:grid;grid-template-columns:1fr;gap:8px 48px;padding:26px 0;border-bottom:1px solid var(--line-bone);align-items:baseline}
.ledger__head{font-size:14px;color:var(--on-bone-2);padding:16px 0;display:none}
@media (min-width:760px){.ledger__head{display:grid}.ledger__head,.ledger__row{grid-template-columns:1fr 1.1fr}}
.ledger__was{position:relative;justify-self:start;color:var(--on-bone-2);font-size:clamp(16px,1.4vw,19px)}
.ledger__was .strike{position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--gold-ink);transform-origin:0 50%}
.ledger__now{font-weight:600;font-size:clamp(20px,2.2vw,30px);letter-spacing:-0.025em;line-height:1.25}
@media (max-width:759px){.ledger__now{font-size:21px}}
/* Three-way ledger (homepage): label | lead sites | most agencies | Full Scale */
.ledger--cols-4 .ledger__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-bone-2)}
.ledger--cols-4 .ledger__mid{color:var(--on-bone-2);font-size:clamp(15px,1.3vw,18px)}
.ledger--cols-4 .ledger__was{font-size:clamp(15px,1.3vw,18px)}
@media (min-width:760px){
  .ledger--cols-4 .ledger__head,.ledger--cols-4 .ledger__row{grid-template-columns:1fr 1fr 1fr 1.4fr;gap:8px 32px}
  .ledger--cols-4 .ledger__head span:last-child{color:var(--gold-ink);font-weight:600}
  .ledger--cols-4 .ledger__label{font-size:15px;letter-spacing:0;text-transform:none;color:var(--on-bone);font-weight:600}
  .ledger--cols-4 .ledger__now{font-size:clamp(18px,1.7vw,24px)}
}
@media (max-width:759px){
  .ledger--cols-4 .ledger__row{grid-template-columns:1fr 1fr;gap:10px 16px}
  .ledger--cols-4 .ledger__label,.ledger--cols-4 .ledger__now{grid-column:1/-1}
  .ledger--cols-4 .ledger__was .strike{display:none}
  .ledger--cols-4 .ledger__was{text-decoration:line-through;text-decoration-color:var(--gold-ink);text-decoration-thickness:2px}
  .ledger--cols-4 .ledger__was::before,.ledger--cols-4 .ledger__mid::before{display:inline-block;width:100%;font-size:12px;color:var(--on-bone-2);margin-bottom:2px}
  .ledger--cols-4 .ledger__was::before{content:"Lead sites"}
  .ledger--cols-4 .ledger__mid::before{content:"Most agencies"}
}

/* CALCULATOR (construction) */
.calc{display:grid;gap:32px;background:var(--bone);border-radius:8px;padding:clamp(20px,3.5vw,44px);border:1px solid var(--line-bone)}
@media (min-width:900px){.calc{grid-template-columns:1fr 1fr;gap:64px}}
.calc .field{color:var(--on-bone-2)}
.calc .field input{background:#fff;border-color:var(--line-bone);color:var(--on-bone)}
.calc__inputs{display:grid;gap:18px}
.calc__out{display:grid;gap:4px;align-content:start}
.calc__big{font-size:clamp(56px,8vw,112px);font-weight:700;letter-spacing:-0.055em;line-height:1}
.calc__label{color:var(--on-bone-2);font-size:15px}
.calc__rows{margin-top:24px;border-top:1px solid var(--line-bone)}
.calc__rows div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-bone);font-size:16px}
.calc__rows b{font-weight:600}
.calc__src{font-size:13px;color:var(--on-bone-2);margin:18px 0 0}

/* THE FULL SCALE METHOD: six steps */
.pos{background:var(--navy);position:relative}
.pos__intro{padding:clamp(64px,8vw,112px) 0 clamp(32px,4vw,56px)}
.pos__grid{padding-bottom:clamp(88px,12vw,140px)}
.steps{display:grid;gap:0}
.step{padding:28px 0;border-top:1px solid var(--line-navy)}
.step__n{display:block;font:600 15px "Sora",sans-serif;color:var(--gold);letter-spacing:.02em}
.step h3{font-size:32px;letter-spacing:-0.04em;margin:10px 0 12px}
.step p{color:var(--on-navy-2);margin:0}
.pos__close{font:600 clamp(22px,2.6vw,34px)/1.3 "Sora",sans-serif;color:var(--on-navy);margin:clamp(40px,5vw,64px) 0 0;max-width:34ch}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);gap:0 40px}
}

/* DASHBOARD */
.dash-wrap{display:grid;gap:48px}
@media (min-width:1000px){.dash-wrap{grid-template-columns:4fr 7fr;align-items:center;gap:72px}}
.dash-wrap .h2{margin-bottom:22px}
.dash-points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.dash-points li{padding-left:24px;position:relative}
.dash-points li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--gold-ink)}
.dash-stage{perspective:1400px}
.dash{background:var(--navy);color:var(--on-navy);border-radius:10px;padding:clamp(18px,3vw,30px);display:grid;gap:20px;box-shadow:0 50px 90px -40px rgba(11,22,38,.7),0 0 0 1px rgba(11,22,38,.06);transform-origin:50% 100%}
.dash__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px;color:var(--on-navy-2)}
.dash__top strong{color:var(--on-navy);font-weight:600}
.sample{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--bone);color:var(--on-bone-2);font-size:12px;font-weight:600;letter-spacing:.01em}
.dash__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-navy);border:1px solid var(--line-navy)}
.dash__kpis.is-three .kpi:nth-child(3){grid-column:1/-1}
@media (min-width:760px){.dash__kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.dash__kpis.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}.dash__kpis.is-three .kpi:nth-child(3){grid-column:auto}}
.kpi{background:var(--navy);padding:16px}
.kpi__label{font-size:13px;color:var(--on-navy-2);line-height:1.3;min-height:2.6em}
.kpi__value{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.kpi--gold{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.kpi--gold .kpi__label{min-height:0}
.kpi--gold .kpi__value{color:var(--gold);font-size:clamp(34px,4.2vw,54px)}
.dash__lower{display:grid;gap:18px}
@media (min-width:760px){.dash__lower{grid-template-columns:1.1fr 1fr}}
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;border-bottom:1px solid var(--line-navy)}
.bars i{flex:1;background:var(--navy-3);transform-origin:50% 100%}
.bars i.is-gold{background:var(--gold)}
.dash__legend{display:flex;justify-content:space-between;font-size:12px;color:var(--on-navy-2);margin-top:8px}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start;min-height:150px}
.feed li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--navy-2);border:1px solid var(--line-navy);border-radius:6px;font-size:13px;line-height:1.35}
.feed li .dot{width:7px;height:7px;border-radius:50%;background:var(--on-navy-2)}
.feed li.booked .dot{background:var(--gold)}
.feed li b{font-weight:600}
.feed li span.t{color:var(--on-navy-2);font-size:12px}
.feed__label{font-size:12px;color:var(--on-navy-2);margin:0 0 8px}
.dash__note{font-size:14px;color:var(--on-bone-2);margin:18px 0 0}

/* TERMS: static 2x2 grid, always visible, no stacking */
.terms{display:grid;gap:12px}
@media (min-width:760px){.terms{grid-template-columns:1fr 1fr;gap:24px}}
.term{padding:clamp(24px,3vw,40px);background:var(--navy-2);border:1px solid var(--line-navy);border-radius:8px;display:grid;gap:12px;align-content:start}
.term h3{font-size:clamp(23px,2.3vw,30px);letter-spacing:-0.03em}
.term p{color:var(--on-navy-2);margin:0;max-width:44ch}
.term--lead{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.term--lead p{color:#3A3220}
.term__n{display:flex;align-items:flex-end;gap:3px;height:20px}
.term__n i{width:6px;background:var(--line-navy)}
.term__n i:nth-child(1){height:7px}.term__n i:nth-child(2){height:14px}.term__n i:nth-child(3){height:20px}
.term--lead .term__n i{background:var(--navy)}

/* INDUSTRIES */
.inds{border-top:1px solid var(--line-bone)}
.ind{display:grid;gap:8px 40px;padding:30px 0;border-bottom:1px solid var(--line-bone);align-items:baseline}
@media (min-width:860px){.ind{grid-template-columns:5fr 6fr 2fr}}
.ind h3{font-size:clamp(26px,2.8vw,38px);letter-spacing:-0.035em}
.ind p{margin:0;color:var(--on-bone-2)}
.ind a,.ind span.soon{font-size:15px;font-weight:600;justify-self:start}
.ind a{color:var(--on-bone);text-underline-offset:5px}
.ind span.soon{color:var(--on-bone-2);font-weight:500}

/* FOUNDERS */
.founders{display:grid;gap:48px}
@media (min-width:960px){.founders{grid-template-columns:6fr 5fr;gap:80px;align-items:start}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.person{display:grid;gap:12px}
.photo{aspect-ratio:4/5;max-width:100%;background:linear-gradient(160deg,var(--navy-3),var(--navy-2));border-radius:4px;display:grid;place-items:center;color:var(--on-navy-2);font-size:14px;text-align:center;padding:16px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.person b{display:block;font-size:20px;letter-spacing:-0.02em}
.person span{font-size:15px;color:var(--on-navy-2)}
.founders__copy .h2{margin-bottom:24px}
.founders__copy p{color:var(--on-navy-2);max-width:48ch}
.founders__copy p.big{color:var(--on-navy);font-size:clamp(22px,2.3vw,30px);letter-spacing:-0.025em;line-height:1.3;font-weight:600}
.founding{margin-top:32px;padding:24px;border:1px solid var(--gold);border-radius:6px}
.founding h3{font-size:22px;color:var(--gold);margin-bottom:8px;letter-spacing:-0.02em}
.founding p{margin:0;color:var(--on-navy)}
.duo--about{grid-template-columns:1fr;gap:40px}
@media (min-width:760px){.duo--about{grid-template-columns:1fr 1fr}}
.duo--about .person{gap:14px}
.duo--about .av--lg{width:72px;height:72px;font-size:24px}
.duo--about .person h3{font-size:20px;letter-spacing:-0.02em;margin:0 0 2px}
.duo--about .person p{margin:10px 0 0;color:var(--on-navy-2);max-width:40ch}

/* ABOUT / PRIVACY content pages */
.about-cta{display:grid;gap:18px;justify-items:start}
.legal{max-width:760px}
.legal__body{display:grid;gap:44px}
.legal__body h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-0.03em;margin-bottom:10px}
.legal__body p{margin:0;color:var(--on-bone-2);max-width:68ch}

/* FAQ */
.faq{border-top:1px solid var(--line-bone);max-width:900px}
.faq details{border-bottom:1px solid var(--line-bone)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-weight:600;font-size:clamp(18px,1.8vw,22px);letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--on-bone-2);max-width:64ch;padding-bottom:26px;margin:0}

/* FINAL */
.final{position:relative;overflow:hidden;background:var(--navy);padding:clamp(72px,9vw,128px) 0 clamp(64px,8vw,104px)}
.final__blocks{position:absolute;left:var(--gutter);bottom:0;display:flex;align-items:flex-end;gap:clamp(8px,1vw,14px);height:clamp(160px,30vw,380px);opacity:.08;pointer-events:none}
.final__blocks i{width:clamp(36px,5vw,90px);background:var(--bone);transform-origin:50% 100%}
.final__blocks i:nth-child(1){height:33.3%}.final__blocks i:nth-child(2){height:66.6%}.final__blocks i:nth-child(3){height:100%;background:var(--gold);opacity:1}
.book{position:relative;display:grid;gap:44px}
@media (min-width:1000px){.book{grid-template-columns:5fr 6fr;gap:80px;align-items:start}}
.book h2{font-size:clamp(46px,7vw,112px);letter-spacing:-0.055em;line-height:.92;max-width:9ch}
.book__list{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px;color:var(--on-navy-2)}
.book__list li{display:flex;gap:12px}
.book__list li::before{content:"";flex:none;margin-top:.62em;width:12px;height:2px;background:var(--gold)}
.book__alt{margin:20px 0 0;color:var(--on-navy-2);font-size:15px}
.book__alt + .book__alt{margin-top:4px}
.book__alt [data-phone]{color:var(--on-navy);font-weight:600}
.cal{background:var(--bone);color:var(--on-bone);border-radius:10px;min-height:560px;display:grid;overflow:hidden}
.book__panel{display:grid;align-content:center;padding:clamp(28px,4vw,44px);gap:20px}
.book__form{display:grid;gap:16px}
.book__form[hidden],.book__step2[hidden]{display:none}
.cal .field{color:var(--on-bone-2)}
.cal .field input{background:#fff;border-color:var(--line-bone);color:var(--on-bone)}
.book__step2 h3{margin:0 0 16px;font:600 clamp(20px,2.2vw,26px) "Sora",sans-serif;color:var(--on-bone)}
.book__cal-placeholder{color:var(--on-bone-2);font-size:15px;line-height:1.6;margin:0}
.book__cal-placeholder strong{display:block;color:var(--on-bone);font-size:17px;margin-bottom:8px}
.book__cal-placeholder a{color:var(--on-bone);text-underline-offset:4px}
.booking-widget{display:block;width:100%;min-width:300px;min-height:700px;border:0;overflow:hidden}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book__error{color:#B3261E;font-size:14px;margin:4px 0 0}
.book__error[hidden]{display:none}

/* Disclosure small print below the form card (BOOK-PAGE-SPEC.md Part 2B,
   5 Oct 2026) + the consent tick-box above the submit button (Part 2C). */
.book__disclosure{margin:14px 0 0;font-size:13px;color:var(--on-bone-2)}
.book__disclosure a{color:var(--on-bone);text-decoration:underline;text-underline-offset:3px}
.book__consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--on-bone-2);cursor:pointer}
.book__consent input{flex:none;margin-top:3px;width:16px;height:16px;accent-color:var(--gold)}

/* Booking v2 (BOOKING-V2-SPEC.md, 5 Oct 2026): three-step form inside .cal
   (bone background, dark text) — see .cal rule above. */
.book__progress{margin:0;font:600 13px/1 "Sora",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--on-bone-2)}
.book__progress[hidden]{display:none}
.book__bar{height:4px;border-radius:999px;background:var(--line-bone);overflow:hidden}
.book__bar[hidden]{display:none}
.book__bar i{display:block;height:100%;width:33.33%;background:var(--gold);border-radius:999px;transition:width .3s var(--ease)}
.book__step{border:0;margin:0;padding:0;display:grid;gap:16px}
.book__step[hidden]{display:none}
.book__steplegend{padding:0;margin:0 0 4px;font:700 clamp(18px,2vw,22px) "Sora",sans-serif;color:var(--on-bone)}
.book__opt{font-weight:400;color:var(--on-bone-2)}
.book__fielderr{color:#B3261E;font-size:13px}
.book__fielderr[hidden]{display:none}
.book__chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line-bone);border-radius:999px;background:#fff;color:var(--on-bone-2);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chip input{position:absolute;left:-9999px;width:1px;height:1px}
.chip:has(input:checked){border-color:var(--gold);background:rgba(207,174,107,.22);color:var(--on-bone)}
.chip:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.book__stepnav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.book__stepnav[hidden],.book__stepnav [hidden]{display:none}
.book__needs{margin:0;font-size:14px;color:var(--on-bone-2)}
.book__needs a{color:var(--on-bone);text-decoration:underline;text-underline-offset:3px}

.book__stepsub{margin:-8px 0 0;font-size:14px;color:var(--on-bone-2)}
/* Step 3 ("A few quick taps"): one .book__familyblock for the chosen industry
   (JS hides the others), then the start/spend questions. Hidden = [hidden]. */
.book__familyblock{display:grid;gap:16px}
.book__familyblock[hidden],.book__needq[hidden],.chip[hidden],.field[hidden]{display:none}
.book__needq{display:grid;gap:8px;font-size:14px;color:var(--on-bone-2)}
.book__skip{justify-self:start;background:none;border:0;padding:0;font:600 14px "Sora",sans-serif;color:var(--on-bone-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Shared booking form, phones (BOOK-PAGE-SPEC.md Part 1.3, 5 Oct 2026):
   shorter inputs, tighter gaps, and the Continue/submit button goes full
   width with Back becoming a small text link above it. Applies everywhere
   .book__panel appears (home, /book, every niche page). */
@media (max-width:599px){
  .book__panel .field{gap:10px}
  .book__panel .field input,.book__panel .field select{min-height:48px}
  .book__panel .chip{min-height:44px;padding:6px 12px;font-size:13.5px}
  .book__panel .book__chips{gap:6px}
  .book__panel .book__needq{gap:6px}
  .book__familyblock{gap:12px}
  .book__panel{padding:22px 14px}
  .book__panel .book__skip{min-height:44px;display:inline-flex;align-items:center}
  .book__form{gap:14px}
  .book__step{gap:14px}
  .book__stepnav{flex-direction:column;align-items:stretch;gap:10px}
  .book__stepnav .btn--gold{width:100%;justify-content:center}
  .book__stepnav .btn--ghost{align-self:center;min-height:auto;padding:4px 0;font-size:14px}
  .book__step button[type=submit]{width:100%;justify-content:center}
}
.book__skip:hover{color:var(--on-bone)}

/* FOOTER */
.foot{background:var(--navy);border-top:1px solid var(--line-navy);padding:64px 0 120px;font-size:15px;color:var(--on-navy-2)}
@media (min-width:900px){.foot{padding-bottom:64px}}
.foot__grid{display:grid;gap:28px}
@media (min-width:760px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}
@media (min-width:760px){.foot__grid--two{grid-template-columns:2fr 1fr}}
.foot a{color:var(--on-navy);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__tag{color:var(--on-navy);font-weight:600;margin-top:16px}
.foot__legal{margin-top:44px;font-size:13px}

/* Sticky mobile CTA */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(11,22,38,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line-navy);transform:translateY(110%);transition:transform .4s var(--ease)}
.stick.is-on{transform:none}
.stick .btn{width:100%;justify-content:center}
@media (min-width:900px){.stick{display:none}}

/* Desktop floating "Book a call" pill: same show/hide logic as .stick (site.js),
   also hidden while the footer is in view */
.stick-pill{display:none}
@media (min-width:900px){
  .stick-pill{display:inline-flex;position:fixed;right:24px;bottom:24px;z-index:60;min-height:48px;padding:0 22px;font-size:15px;box-shadow:0 8px 24px rgba(11,22,38,.28);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s,background .25s var(--ease)}
  .stick-pill.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s,background .25s var(--ease)}
}
@media (prefers-reduced-motion:reduce){.stick-pill,.stick-pill.is-on{transition:none!important;transform:none}}

/* Cookie choice banner (assets/js/consent.js). Phones: full width inside the gutter, lifted above the sticky "Book a call" bar while that is showing. */
.fs-consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:65;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--navy-2);color:var(--on-navy);border:1px solid var(--line-navy);border-radius:var(--radius);box-shadow:0 8px 24px rgba(11,22,38,.4);font-size:15px;line-height:1.5}
.stick.is-on ~ .fs-consent{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.fs-consent__text{margin:0}
.fs-consent__text a{color:var(--gold-2);text-underline-offset:4px;display:inline-block;padding:10px 0;min-height:44px}
.fs-consent__btns{display:flex;gap:12px}
.fs-consent__btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--gold);background:transparent;color:var(--on-navy);font:600 16px/1 "Sora",sans-serif;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.fs-consent__btn:hover{background:var(--gold);color:var(--navy)}
@media (min-width:900px){
  .fs-consent{left:24px;right:auto;bottom:24px;width:min(560px,calc(100vw - 48px));flex-direction:row;align-items:center;gap:20px}
  .stick.is-on ~ .fs-consent{bottom:24px}
  .fs-consent__btns{flex:0 0 auto}
  .fs-consent__btn{flex:0 0 auto;min-width:112px}
}
@media (prefers-reduced-motion:reduce){.fs-consent__btn{transition:none!important}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== v3 additions ===== */

/* Blueprint hero art */
.hero__art{position:absolute;z-index:1;right:var(--gutter);top:96px;width:min(86vw,520px);opacity:.16;pointer-events:none}
@media (min-width:900px){.hero__art{opacity:1;top:auto;bottom:clamp(40px,8svh,96px);width:min(44vw,640px)}}
@media (min-width:900px) and (max-height:820px){.hero__art{width:min(34vw,460px)}}
.bp{width:100%;height:auto;overflow:visible}
.bp-l{fill:none;stroke:rgba(243,241,234,.55);stroke-width:1.5;vector-effect:non-scaling-stroke}
.bp-l.dash{stroke:rgba(243,241,234,.8);stroke-dasharray:none}
.bp-fill{fill:var(--navy-3)}
.bp-gold{fill:var(--gold)}
.bp-doors path{fill:none;stroke:rgba(11,22,38,.45);stroke-width:1.5}
.bp-text text{fill:var(--on-navy-2);font:500 13px "Sora",sans-serif;letter-spacing:.02em}
.bp-cta{fill:var(--bone);font:700 44px "Sora",sans-serif;letter-spacing:-0.02em}
.bp-text text.sm{font-size:11px;opacity:.8}
@media (min-width:900px){.hero h1{max-width:9.5ch}}
@media (min-width:1300px){.hero h1{max-width:11ch}}

/* Trust row with faces */
.trust{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px;color:var(--on-navy-2);line-height:1.45}
.trust b{font-weight:500;color:var(--on-navy)}
.avs{display:flex;flex:none}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--navy-3);color:var(--on-navy);font-weight:600;font-size:15px;border:2px solid var(--navy);overflow:hidden}
.av + .av{margin-left:-12px;background:#22385A}
.av img{width:100%;height:100%;object-fit:cover}

/* Pain chain */
.chain{position:relative;display:grid;gap:clamp(36px,6vw,72px);padding:12px 0 0 34px;max-width:1100px}
.chain__line{position:absolute;left:8px;top:0;width:2px;height:100%}
.chain__line line{stroke:var(--line-bone);stroke-width:2;vector-effect:non-scaling-stroke}
.chain__line .fill{stroke:var(--gold-ink)}
.thought{position:relative;margin:0;max-width:30ch}
.thought p{margin:0;font-size:clamp(24px,3.2vw,44px);font-weight:600;letter-spacing:-0.035em;line-height:1.12}
.thought:not(.thought--end) p::before{content:"\201C"}
.thought:not(.thought--end) p::after{content:"\201D"}
.thought .node{position:absolute;left:-33px;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--bone);border:2px solid var(--gold-ink)}
.thought--end p{display:inline-block;background:var(--navy);color:var(--gold);padding:.3em .55em;border-radius:6px}
.thought--end .node{background:var(--gold-ink)}
@media (min-width:900px){
  .chain{padding-left:0;max-width:none}
  .chain__line{left:50%;margin-left:-1px}
  .thought{width:calc(50% - 56px);max-width:none}
  .thought:nth-of-type(odd){justify-self:start;text-align:right}
  .thought:nth-of-type(even){justify-self:end}
  .thought:nth-of-type(odd) .node{left:auto;right:-63px}
  .thought:nth-of-type(even) .node{left:-63px}
  .thought--end{justify-self:center;text-align:center;width:auto;padding-top:20px}
  .thought--end .node{left:50%;margin-left:-7px;top:-14px}
}

/* Hero sizes to its content so long niche headlines never clip */
.hero{height:auto;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 clamp(40px,7svh,88px)}
.hero__content{position:relative;bottom:auto;width:100%}
.hero--niche h1{font-size:clamp(42px,min(7.2vw,11svh),108px)}
@media (min-width:900px){.hero--niche .hero__art{top:clamp(110px,18svh,190px);bottom:auto}}

/* Centred hero (MAIN): grows with its content, never clipped */
.hero--centred{height:auto;min-height:0;max-height:none;align-items:center;padding:104px 0 40px}
.hero--centred .hero__glow{inset:auto 10% 0 10%;height:70%}
.hero--centred .hero__grid{justify-items:center;text-align:center;gap:18px}
.hero--centred .hero__cta{justify-content:center}
.hero--centred .hero__cta-wrap{margin-top:6px}
/* TEMPLATE-PASS-SPEC Part 5: enough room below the fixed nav on every
   niche hero (construction + the 13 industry pages) so the icon never
   sits under it. */
@media (min-width:900px){.hero--centred{min-height:100svh;padding:clamp(120px,15vh,168px) 0 32px}}
@media (max-width:899px){.hero--centred{align-items:flex-start;padding:104px 0 40px}}

/* Industry pages + the /industries hub: a centred hero with no check form
   and no proof demo, so it needs its own h1->sub->CTA rhythm restored
   (.hero--proof normally supplies this via .hero__copy's grid gap). */
.hero--plain .hero__cta-wrap{margin-top:28px}
/* /industries hub only: don't force full-height, like the homepage hero, and
   use its own (smaller, even-at-every-width) top/bottom padding so phones
   don't get a big empty gap above the h1. */
.hero--hub{min-height:0;padding:clamp(88px,11vh,136px) 0 clamp(56px,7vh,88px)}
.hero--hub .hero__sub{margin-top:24px}

.pill{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 16px;border:1px solid var(--line-navy);border-radius:999px;font-size:13px;font-weight:600;color:var(--bone);max-width:92vw}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.indicon--pill{display:block;width:44px;height:44px;color:var(--gold);margin:0 auto 24px}
/* Part 5: the niche hero's pill label stays one line on desktop, where
   there's room; on a phone it can still wrap rather than get clipped. */
@media (min-width:640px){.hero--centred .pill{white-space:nowrap}}

/* /industries hub hero: a row of 13 industry icon tiles under the sub,
   each a link straight to that industry's page. */
.indhero__icons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:760px;margin:48px auto 0}
.indtile{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--line-navy);border-radius:4px;color:var(--gold);transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.indtile:hover,.indtile:focus-visible{border-color:var(--gold);background:var(--navy-3)}
.indicon--tile{width:30px;height:30px;transition:transform .2s var(--ease)}
.indtile:hover .indicon--tile,.indtile:focus-visible .indicon--tile{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .indtile{transition:none}
  .indicon--tile{transition:none}
  .indtile:hover .indicon--tile,.indtile:focus-visible .indicon--tile{transform:none}
}

.hero--centred h1{font-size:clamp(36px,4.7vw,66px);letter-spacing:-0.045em;line-height:1.04;max-width:16ch;margin:20px 0 0;text-wrap:balance}
/* Part 5: the longer industry headlines need a wider box than construction's
   short one to stay a couple of balanced lines rather than five narrow
   ones, which was pushing the button below the first screen on desktop. */
@media (min-width:900px){.hero--centred h1{max-width:23ch}}
.hero--centred h1 .line-mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero--centred h1 .line{display:inline-block}
.hero--centred h1 .line--gold{color:var(--gold)}
.hero--centred .hero__sub{text-align:center;max-width:56ch;margin:20px 0 0;font-size:17px}
.hero--centred .check{margin-top:28px}

/* Sum row (5 Oct, agentryx.io direction): 5 icon tiles + "=" + a result
   tile. Phone: a vertical list of pills joined by a gold line on the left
   (.sum__tile::before dots). Laptop: 5 columns + a curve row underneath
   with a node under each tile (.sum__curverow, built by sum_curve_html()). */
.sum{position:relative;display:grid;grid-template-columns:1fr;gap:14px;width:100%;margin-top:16px;padding-left:26px;text-align:left}
.hero--centred .check{text-align:left}
.sum__mobileline{position:absolute;left:9px;top:34px;bottom:34px;width:2px;background:var(--gold);opacity:.4}
.sum__tile{position:relative;z-index:1;display:grid;grid-template-columns:44px 1fr;align-items:center;column-gap:14px;padding:12px 16px;background:var(--navy-2);border:1px solid var(--line-navy);border-radius:999px}
.sum__tile::before{content:"";position:absolute;left:-20px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--gold);opacity:.85;z-index:1}
.sum__icon,.sum__tile .sum__blocks{grid-row:1/3}
.sum__icon{width:44px;height:44px;display:grid;place-items:center;background:var(--navy-3);border:1px solid var(--line-navy);border-radius:10px;color:var(--bone)}
.sum__icon svg{width:24px;height:24px}
.sum__label{display:block;grid-column:2;font:600 15px "Sora",sans-serif;color:var(--bone)}
.sum__sub{display:block;grid-column:2;font-size:13px;color:var(--on-navy-2)}
.sum__plus,.sum__eq{display:none;color:var(--on-navy-2);width:16px;height:16px}
.sum__tile--result{border-color:var(--gold);background:linear-gradient(rgba(207,174,107,.07),rgba(207,174,107,.07)),var(--navy)}
.sum__tile--result::before{background:var(--gold);opacity:1}
.sum__tile--result .sum__label{color:var(--gold)}
.sum__blocks{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:44px;height:28px;margin:0 auto}
.sum__blocks i{display:block;width:8px;background:rgba(244,239,230,.35)}
.sum__blocks i:nth-child(1){height:10px}
.sum__blocks i:nth-child(2){height:19px}
.sum__blocks i:nth-child(3){height:28px;background:var(--gold)}
.sum__track{display:none}
.sum__curverow,.sum__curvetail{display:none}
@media (min-width:900px){
  .sum{grid-template-columns:repeat(5,1fr) auto 1.3fr;align-items:start;gap:28px 6px;padding-left:0;text-align:center;margin-top:clamp(28px,3.5vw,40px)}
  .sum__mobileline{display:none}
  .sum__tile{display:grid;grid-template-columns:none;justify-items:center;gap:8px;padding:0 16px;background:none;border:0;border-radius:0;min-height:142px}
  .sum__tile::before{display:none}
  .sum__icon,.sum__tile .sum__blocks{grid-row:auto}
  .sum__icon{width:64px;height:64px;background:var(--navy-2);transition:transform .3s cubic-bezier(.23,1,.32,1),border-color .3s,color .3s,box-shadow .3s}
  .sum__icon svg{width:28px;height:28px}
  .sum__label,.sum__sub{grid-column:auto}
  .sum__sub{max-width:18ch;min-height:42px}
  .sum__plus{display:flex;position:absolute;top:32px;right:-15px;transform:translateY(-50%)}
  .sum__eq{display:flex;justify-self:center;align-self:start;margin-top:24px}
  .sum__tile--result{align-self:start;min-height:0;grid-column:auto;margin-top:-14px;padding:20px 20px 18px;gap:10px;border:1px solid var(--gold);border-radius:10px}
  .sum__blocks{width:auto;margin:0 0 2px}
  .sum__track{display:block;position:absolute;left:0;right:0;top:32px;height:1px;background:var(--line-navy);z-index:0;pointer-events:none}
  /* Curve row: its own grid row spanning exactly the 5 tile columns, so
     10/30/50/70/90% lines up with each tile's centre with no JS measuring.
     The tail sits beside it in the next cell (the "=" + result columns),
     same grid row, continuing the curve up to an arrowhead by the result
     tile. */
  .sum__curverow{display:block;position:relative;grid-column:1/6;grid-row:2;height:64px}
  .sum__curvetail{display:block;position:relative;grid-column:6/8;grid-row:2;height:64px;overflow:visible;margin-left:calc(-1 * var(--sum-gap, 8px) - 2px)}
  .sum__curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .sum__curvepath{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
  .sum__curvepath--glow{stroke-width:4;opacity:.3;filter:blur(4px)}
  .sum__curvearrow{fill:var(--gold)}
  .sum__nodewrap{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);z-index:1}
  .sum__dash{display:block;width:1px;flex:0 0 auto;background-image:repeating-linear-gradient(to bottom,var(--line-navy) 0 4px,transparent 4px 8px);transition:opacity .3s,background-image .3s}
  .sum__node{display:block;width:9px;height:9px;margin-top:-1px;border-radius:50%;background:var(--navy);border:1.5px solid var(--line-navy);transition:background-color .3s,border-color .3s,box-shadow .3s}
  .sum__nodewrap.is-lit .sum__dash{background-image:repeating-linear-gradient(to bottom,var(--gold) 0 4px,transparent 4px 8px);opacity:.75}
  .sum__nodewrap.is-lit .sum__node{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px rgba(207,174,107,.22)}
}
.sum__pulse{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(207,174,107,.18),0 0 18px 4px rgba(207,174,107,.55);opacity:0;will-change:transform}

.sum__tile.is-lit .sum__icon{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px rgba(207,174,107,.35),0 10px 30px -10px rgba(207,174,107,.6);transform:translateY(-2px)}
.sum__tile--result{transition:transform .3s cubic-bezier(.23,1,.32,1),border-color .3s,color .3s,box-shadow .3s}
.sum__tile--result.is-lit{box-shadow:0 0 0 1px var(--gold),0 20px 50px -20px rgba(207,174,107,.7);background:linear-gradient(rgba(207,174,107,.14),rgba(207,174,107,.14)),var(--navy)}

/* "What we build": four compact columns on laptop, short rows on phone */
.jobs{display:grid;gap:0;border-top:1px solid var(--line-bone)}
.job{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--line-bone)}
.job__head{display:flex;align-items:center;gap:12px}
.job__icon{display:inline-flex;flex:none;width:24px;height:24px;color:var(--gold-ink)}
.job__icon svg{width:24px;height:24px}
.job h3{font-size:clamp(20px,2vw,24px);letter-spacing:-0.03em;margin:0}
.job p{margin:0;color:var(--on-bone-2);font-size:16px;line-height:1.5}
@media (min-width:900px){
  .jobs{grid-template-columns:repeat(4,1fr);gap:0 32px;border-top:0}
  .job{align-content:start;padding:20px 0 0;border-bottom:0;border-top:1px solid var(--line-bone)}
  .job__head{flex-direction:column;align-items:flex-start;gap:14px}
}
.build__close{font:600 clamp(17px,1.5vw,20px)/1.4 "Sora",sans-serif;color:var(--on-bone);margin:clamp(24px,3vw,36px) 0 0;max-width:60ch}

/* ===== Article page (lead-sites comparison) ===== */
.byline{margin-top:18px;font-size:15px;color:var(--on-navy-2)}
.byline a{text-decoration:underline;text-underline-offset:4px}

/* Comparison table: a real <table> that becomes stacked cards on phones */
.cmp-table-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;border-top:1px solid var(--line-bone)}
.cmp-table caption{text-align:left;font-size:14px;color:var(--on-bone-2);padding:0 0 18px}
.cmp-table th{text-align:left;font-size:13px;color:var(--on-bone-2);font-weight:600;padding:14px 16px;border-bottom:1px solid var(--line-bone);white-space:nowrap}
.cmp-table td{padding:16px;border-bottom:1px solid var(--line-bone);vertical-align:top;font-size:15px;line-height:1.5}
.cmp-table td:first-child{font-weight:600}
@media (max-width:719px){
  .cmp-table thead{display:none}
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td{display:block;width:100%}
  .cmp-table{border-top:0}
  .cmp-table tr{margin-bottom:16px;border:1px solid var(--line-bone);border-radius:8px;padding:4px 16px;background:var(--bone)}
  .cmp-table td{border-bottom:0;padding:10px 0}
  .cmp-table td + td{border-top:1px solid var(--line-bone)}
  .cmp-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--gold-ink);margin-bottom:4px}
  .cmp-table td:first-child{font-size:18px}
  .cmp-table td:first-child::before{display:none}
}

/* "What that means for you": three short blocks */
.trio{display:grid;gap:28px}
@media (min-width:760px){.trio{grid-template-columns:repeat(3,1fr);gap:40px}}
.trio__item h3{font-size:clamp(20px,2vw,24px);letter-spacing:-0.03em;margin:0 0 10px}
.trio__item p{margin:0;color:var(--on-navy-2);max-width:40ch}

/* Numbered list: "Ask these before you pay anyone" */
.num-list{list-style:none;counter-reset:ask;padding:0;margin:0;display:grid;gap:16px;max-width:64ch}
.num-list li{counter-increment:ask;display:flex;gap:16px;align-items:baseline}
.num-list li::before{content:counter(ask);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy-2);color:var(--gold);font-size:14px;font-weight:600}

/* CTA under "Our answers" */
.lead-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(32px,4vw,48px)}

/* Sources list */
.src-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;font-size:14px;max-width:70ch}
.src-list li{padding-left:18px;position:relative;color:var(--on-bone-2)}
.src-list li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--gold-ink)}
.src-list a{color:var(--on-bone);text-decoration:underline;text-underline-offset:3px}
.changelog{font-size:13px;color:var(--on-bone-2);margin:24px 0 0}
.hero__sub--about{max-width:34ch}
.legal__body p+p{margin-top:14px}

/* /book page — Sam's cold-call link. Minimal header, no nav links, no
   sticky bar, one job: book the call. Compact + mobile-first (BOOK-PAGE-SPEC.md
   Part 1, 5 Oct 2026): the first input must be visible without scrolling on
   a 390x844 phone. */
.book-nav{position:absolute}  /* scrolls away, so the logo never floats over the calendar */
.book-nav .nav__in{justify-content:center}
.book-page{padding-top:clamp(96px,14vw,140px)}
.book-page__in{max-width:760px;margin-inline:auto;text-align:center}
.book-page__in .book-page__cal,.book-page__in .book-page__fallback{text-align:left}
.book-page__title{margin-bottom:12px}
.book-page__sub{margin:0}
.book-page__line{margin:16px 0 0;font-size:15px;font-weight:600;color:var(--on-navy-2)}
.book-page__cal{margin-top:clamp(24px,3vw,40px);border:1px solid var(--line-navy);border-radius:var(--radius);overflow:hidden}
.book-page__cal .booking-widget{min-height:700px}
@media (min-width:900px){.book-page__cal{max-width:560px;margin-inline:auto}}
.book-page__fallback{color:var(--on-bone-2);font-size:15px;margin:0}
.book-page__fallback[hidden]{display:none}
.book-page__fallback .btn{margin-top:12px}
.book-page__email{margin:16px 0 0;color:var(--on-navy-2);font-size:14px}
.book-page__email a{color:var(--on-navy);text-decoration:underline;text-underline-offset:4px}
.book-page__foot{padding:40px 0;text-align:center}
.book-page__foot a{color:var(--on-navy);text-decoration:underline;text-underline-offset:3px}
@media (max-width:599px){
  .book-page{padding-top:clamp(84px,20vw,100px)}
  .book-nav .nav__in{height:64px}
  .book-page__title{font-size:clamp(28px,8vw,32px);line-height:1.1;margin-bottom:10px}
  .book-page__sub{font-size:16px}
  .book-page__line{margin-top:12px;font-size:14px}
  .book-page__cal{margin-top:16px}
  .book-page__cal .book__panel{padding:20px 18px;gap:14px}
}
@media (max-width:719px){.cmp-table caption{display:block;width:auto}}

/* ---------------------------------------------------------------
   Niche pages: voice · buyers · fears · journey
   (template sections; copy lives in build.py NICHES)
---------------------------------------------------------------- */
/* Voice: their customers' own words, set like pull quotes */
.voice__quotes{list-style:none;padding:0;margin:0;display:grid;gap:clamp(36px,4vw,56px) clamp(32px,6vw,96px)}
.voice__text{margin:0;font:600 clamp(22px,2.4vw,34px)/1.2 "Sora",sans-serif;letter-spacing:-0.025em;color:var(--on-bone);text-wrap:balance;text-indent:-.45em}
.voice__who{margin:16px 0 0;font-size:14px;color:var(--on-bone-2);display:flex;align-items:center;gap:12px}
.voice__who::before{content:"";width:24px;height:1px;flex:none;background:var(--gold-ink)}
@media (min-width:900px){
  .voice__quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voice__quote:nth-child(even){transform:translateY(clamp(40px,5vw,88px))}
}
.voice__stats{display:grid;gap:28px 64px;margin-top:clamp(72px,10vw,152px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line-bone)}
@media (min-width:900px){.voice__stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.voice__stat{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline}
.voice__num{font:700 clamp(44px,5vw,72px)/1 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--gold-ink);white-space:nowrap}
.voice__desc{font-size:17px;line-height:1.5;color:var(--on-bone);max-width:34ch}
.voice__src{display:block;margin-top:4px;font-size:13px;color:var(--on-bone-2);text-underline-offset:3px}
.voice__close{margin:clamp(48px,6vw,88px) 0 0;font:600 clamp(22px,2.4vw,32px)/1.25 "Sora",sans-serif;letter-spacing:-0.025em;max-width:32ch;text-wrap:balance}

/* Buyers: four homeowners as ruled rows, not cards */
.buyers{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-navy)}
.buyer{display:grid;gap:14px;padding:clamp(28px,3.5vw,48px) 0;border-bottom:1px solid var(--line-navy)}
.buyer__job{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.buyer__title{margin:0;font:600 clamp(22px,2.3vw,32px)/1.15 "Sora",sans-serif;letter-spacing:-0.025em;text-wrap:balance}
.buyer__rows{margin:8px 0 0;display:grid;gap:4px}
.buyer__rows dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-2);margin-top:12px}
.buyer__rows dd{margin:0;font-size:16px;line-height:1.5;color:var(--on-navy)}
.buyer__rows dd::first-letter{text-transform:uppercase}
.buyer__value{margin:8px 0 0;font-size:13px;color:var(--on-navy-2)}
.buyer__value strong{display:block;font:600 22px/1.2 "Sora",sans-serif;letter-spacing:-0.02em;color:var(--gold)}
@media (min-width:1000px){
  .buyer{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) 150px;grid-template-rows:auto 1fr;gap:10px 56px}
  .buyer__job{grid-column:1;grid-row:1}
  .buyer__title{grid-column:1;grid-row:2;align-self:start}
  .buyer__rows{grid-column:2;grid-row:1/3;margin:0;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px 32px;align-content:start}
  .buyer__rows dt{margin:0}
  .buyer__value{grid-column:3;grid-row:1/3;margin:0;text-align:right}
}

/* Fears: worry → what they see from you */
.fears{border-top:1px solid var(--line-bone)}
.fears__head,.fears__row{display:grid;gap:8px 56px;padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line-bone);align-items:baseline}
.fears__head{display:none;padding:14px 0;font-size:13px;color:var(--on-bone-2)}
.fears__worry{font:600 clamp(20px,2.1vw,28px)/1.2 "Sora",sans-serif;letter-spacing:-0.025em}
.fears__answer{font-size:17px;line-height:1.55;color:var(--on-bone-2);max-width:54ch}
.fears__note{margin:24px 0 0;font-size:14px;color:var(--on-bone-2)}
@media (min-width:860px){.fears__head{display:grid}.fears__head,.fears__row{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}

/* Journey: three phone screens, stepping down the page */
.journey{list-style:none;padding:0;margin:0;display:grid;gap:56px;justify-items:center}
.journey__step{display:grid;gap:18px;justify-items:center;width:100%}
.journey__time{margin:0;text-align:center;font-size:14px;color:var(--on-navy-2)}
.journey__time strong{display:block;margin-bottom:4px;font:600 18px/1.2 "Sora",sans-serif;color:var(--gold)}
.phone{position:relative;width:min(100%,300px);min-height:430px;padding:46px 18px 24px;border:1px solid var(--line-navy);border-radius:38px;background:var(--navy-2);color:var(--on-navy);box-shadow:0 40px 70px -40px rgba(0,0,0,.75),inset 0 0 0 6px var(--navy)}
.phone::before{content:"";position:absolute;top:16px;left:50%;width:70px;height:6px;border-radius:6px;background:var(--navy-3);transform:translateX(-50%)}
.phone__badge{position:absolute;top:-12px;right:22px;padding:6px 10px;border-radius:999px;background:var(--gold);color:var(--navy);font:700 11px/1 "Sora",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ad__head{display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center}
.ad__avatar{grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--gold)}
.ad__name{font-size:14px;font-weight:600;line-height:1.2}
.ad__sponsored{font-size:12px;color:var(--on-navy-2)}
.ad__text{margin:14px 0;font-size:14px;line-height:1.45}
.ad__media{display:grid;place-items:center;aspect-ratio:4/3;padding:12px;border-radius:12px;background:var(--navy);border:1px solid var(--line-navy);overflow:hidden}
.ad__media svg{width:100%;height:auto}
.ad__cta{display:block;margin-top:12px;padding:11px;border-radius:10px;background:var(--navy-3);text-align:center;font-size:14px;font-weight:600}
.sms__from{margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line-navy);text-align:center;font-size:14px;font-weight:600}
.sms__bubble{margin:0;max-width:92%;padding:12px 14px;border-radius:18px 18px 18px 4px;background:var(--navy-3);font-size:14px;line-height:1.45}
.sms__meta{margin:6px 0 0 4px;font-size:11px;color:var(--on-navy-2)}
.diary__title{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.diary__slot{margin:6px 0 18px;font:600 28px/1.1 "Sora",sans-serif;letter-spacing:-0.025em}
.diary__rows{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;padding:16px;border-radius:14px;background:var(--navy);border:1px solid var(--line-navy)}
.diary__rows dt{font-size:13px;color:var(--on-navy-2)}
.diary__rows dd{margin:0;font-size:14px;font-weight:600}
.diary__note{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:12px;color:var(--on-navy-2)}
.diary__note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.journey__caption{margin:clamp(36px,4vw,56px) auto 0;max-width:60ch;text-align:center;font-size:13px;color:var(--on-navy-2)}
@media (min-width:980px){
  .journey{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:32px}
  .journey__step:nth-child(2){margin-top:56px}
  .journey__step:nth-child(3){margin-top:112px}
}

/* TEMPLATE-PASS-SPEC Part 2 (+ 5 Oct review fix): "The system we'd build for
   you" — 7 items in a grid. A small gold dot sits above each item's icon
   and lights up in order as the section scrolls into view; a hairline gold
   rule marks the top of each row on desktop (vertical, left of the list, on
   a phone). Nothing overlaps the icon/name/benefit text itself. */
.systems-sec .lede{max-width:56ch}
.systems{position:relative;margin-top:clamp(32px,4vw,48px)}
.systems__grid{position:relative;list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:28px;grid-template-columns:1fr}
.systems__grid::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(207,174,107,.25)}
.system{position:relative;display:grid;justify-items:start;gap:10px;align-content:start}
.system__node{display:block;width:8px;height:8px;margin:0 0 2px;border-radius:50%;background:var(--navy-3);box-shadow:0 0 0 4px var(--navy-2);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.system.is-lit .system__node{background:var(--gold);box-shadow:0 0 0 4px var(--navy-2),0 0 10px 1px rgba(207,174,107,.55)}
.system__icon{display:block;width:30px;height:30px;color:var(--gold)}
.system__name{margin:0;font:600 19px/1.3 "Sora",sans-serif;letter-spacing:-0.01em;color:var(--on-navy)}
.system__benefit{margin:0;font-size:15px;line-height:1.5;color:var(--on-navy-2)}
.systems__close{margin:clamp(28px,3.5vw,40px) 0 0;font-size:15px;color:var(--on-navy-2)}
@media (min-width:640px){
  .systems__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;padding-left:0}
  .systems__grid::before{display:none}
  .system{border-top:1px solid rgba(207,174,107,.25);padding-top:20px}
}
@media (min-width:860px){
  .systems__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .system__node{background:var(--gold);box-shadow:0 0 0 4px var(--navy-2)}
}

/* Homepage industries: the buyer rows, on a light band */
.buyers--industries{border-top-color:var(--line-bone);margin-top:clamp(40px,5vw,64px)}
.buyers--industries .buyer{border-bottom-color:var(--line-bone)}
.buyers--industries .buyer__job{color:var(--gold-ink)}
.buyers--industries .buyer__title{color:var(--on-bone)}
.buyers--industries .buyer__rows dt{color:var(--on-bone-2)}
.buyers--industries .buyer__rows dd{color:var(--on-bone)}
.buyers--industries .buyer__value{color:var(--on-bone-2)}
.buyers--industries .buyer__value strong{font-size:17px;color:var(--on-bone)}
.buyers--industries .buyer:first-child .buyer__value strong{color:var(--gold-ink)}
.buyer__link{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
.buyers--industries .buyer__link{color:var(--on-bone)}
.buyer__link:hover{text-decoration-color:var(--gold)}
@media (min-width:1000px){.buyers--industries .buyer{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) 190px}}

/* Construction hero: one hard fact under the price */
.hero__proof{max-width:46ch;margin:22px auto 0;font-size:16px;line-height:1.55;color:var(--on-navy-2);text-wrap:balance}
.hero__proof-num{font:700 22px "Sora",sans-serif;color:var(--gold);margin-right:4px}
.hero__proof a{color:var(--on-navy-2);text-underline-offset:3px;white-space:nowrap}
.buyers--industries .buyer__title{font-size:clamp(20px,1.9vw,26px)}

/* ---------------------------------------------------------------
   Homepage hero (4 Oct): plain copy + one phone playing the story.
   CSS-only loop (runs on iPhone). 10s cycle: ad, tap, reply, booked.
---------------------------------------------------------------- */
.hero__price-line{margin-top:14px}
.demo{display:grid;place-items:center;width:100%;text-align:left}
.demo__phone{width:min(84vw,310px);min-height:0;display:grid;gap:12px;align-content:start;padding:40px 16px 18px}
.demo__beat{border-radius:16px;opacity:0;transform:translateY(14px);animation:demoBeat 10s cubic-bezier(.2,.7,.1,1) infinite}
.demo__ad{padding:12px;background:var(--navy);border:1px solid var(--line-navy);animation-delay:0s}
.demo__ad-text{margin:10px 0;font-size:13px;line-height:1.4;text-align:left}
.demo__art{display:block;width:100%;height:auto;color:var(--on-navy-2);border-radius:10px;background:var(--navy-2);padding:8px 10px}
.demo__cta{position:relative;display:block;margin-top:10px;padding:9px;border-radius:9px;background:var(--navy-3);font-size:13px;font-weight:600;text-align:center;overflow:hidden}
.demo__tap{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(207,174,107,.55);opacity:0;animation:demoTap 10s ease-out infinite}
.demo__reply{animation-delay:0s;animation-name:demoBeat2}
.demo__reply .sms__bubble{font-size:13px;text-align:left}
.demo__meta{display:flex;align-items:center;gap:6px;margin:6px 0 0 4px;font-size:12px;font-weight:600;color:var(--gold)}
.demo__meta svg{width:14px;height:14px}
.demo__booked{padding:14px 16px;text-align:left;background:linear-gradient(rgba(207,174,107,.12),rgba(207,174,107,.12)),var(--navy);border:1px solid rgba(207,174,107,.6);animation-name:demoBeat3}
.demo__slot{margin:4px 0 2px;font:600 24px/1.1 "Sora",sans-serif;letter-spacing:-0.02em}
.demo__job{margin:0;font-size:12px;color:var(--on-navy-2)}
/* beat 1 in at 0s · tap 2.2s · beat 2 in at 3s · beat 3 in at 5.6s · all out at 9.2s */
@keyframes demoBeat{0%{opacity:0;transform:translateY(14px)}5%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes demoBeat2{0%,30%{opacity:0;transform:translateY(14px)}36%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes demoBeat3{0%,56%{opacity:0;transform:translateY(14px) scale(.98)}62%{opacity:1;transform:none;box-shadow:0 0 0 6px rgba(207,174,107,.25)}70%,90%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(207,174,107,0)}96%,100%{opacity:0}}
@keyframes demoTap{0%,21%{opacity:0;transform:scale(.4)}23%{opacity:1}28%{opacity:0;transform:scale(9)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.demo__beat{animation:none;opacity:1;transform:none}.demo__tap{display:none}}
/* ===================================================================== */
/* Homepage v4: "Pick what you need" (Ben approved layout, 4 Oct 2026)  */
/* ===================================================================== */

/* Less dead air between the shorter hero and the picker */
#services{padding-top:clamp(48px,6vw,88px)}

/* Proof strip (5 Oct): a slim band under the hero, ARCHIVE's real Shopify
   total, count-up, a small sparkline and the link to the original
   screenshot dialog (see .proofdialog, further down). */
.proofstrip{padding:clamp(28px,4vw,40px) 0}
.proofstrip__in{display:grid;gap:22px;justify-items:center;text-align:center}
.proofstrip__src{margin:0;font-weight:600;color:var(--bone)}
.proofstrip__facts{margin:6px 0 0;font-size:13px;color:var(--on-navy-2)}
.proofstrip__facts strong{color:var(--on-navy);font-weight:600}
.proofstrip__amount{margin:0;font:700 clamp(28px,3.4vw,40px)/1 "Sora",sans-serif;letter-spacing:-0.025em;color:var(--gold);font-variant-numeric:tabular-nums}
.proofstrip__label{margin:6px 0 0;font-size:13px;color:var(--on-navy-2)}
.proofstrip__spark{display:grid;gap:8px;justify-items:center;width:100%}
.proofstrip__sparkchart{width:min(280px,100%);height:48px}
.proofstrip__sparkchart .chart{width:100%;height:100%;display:block}
.proofstrip__link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--on-navy-2);text-decoration:underline;text-underline-offset:3px}
.proofstrip__link:hover{color:var(--gold)}
.proofstrip__linkicon{width:12px;height:12px;flex:none}
@media (min-width:900px){
  .proofstrip__in{grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;text-align:left}
  .proofstrip__who{justify-self:start}
  .proofstrip__num{text-align:center}
  .proofstrip__spark{justify-self:end;justify-items:end;text-align:right;width:auto}
  .proofstrip__sparkchart{width:150px;height:auto}
  .proofstrip__sparkchart .chart{height:auto}
}

/* Fact grid: number on top, label underneath, no rules to wrap badly */
.factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.factgrid__item{display:grid;gap:4px}
.factgrid__item strong{font:700 clamp(17px,1.6vw,20px)/1.15 "Sora",sans-serif;color:var(--on-navy);letter-spacing:-0.02em}
.factgrid__item span{font-size:13px;color:var(--on-navy-2)}

/* ARCHIVE growth chart (Built-by-us panel only): visible by default without
   JS; home.js arms it with .chart--armed and draws it on when it scrolls
   into view, so the "one authored moment" only plays once, on arrival. */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart__line{stroke:var(--gold);stroke-width:2;fill:none}
.chart__area{opacity:1}
.chart--armed .chart__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.chart--armed .chart__area{opacity:0;transition:opacity 1.2s ease-out .2s}
.chart--armed.is-in .chart__line{stroke-dashoffset:0}
.chart--armed.is-in .chart__area{opacity:1}
@media (prefers-reduced-motion:reduce){.chart__line{stroke-dashoffset:0!important}.chart__area{opacity:1!important}}
/* The chart lives inside the same frame component as the Collectly shot,
   at the same aspect ratio, so the two Built-by-us panels' media align. */
.browserframe__chart{position:relative;aspect-ratio:1440/900;display:flex;align-items:center;justify-content:center;padding:28px 26px;background:var(--navy-2)}
.browserframe__chart .chart{width:100%;height:auto}

/* ARCHIVE story chart (Built-by-us panel): headline + live readout above
   the chart, £20k/£40k/£60k/£80k gridlines and three real milestones on
   it, a caption underneath. Gridlines are drawn in the SVG (straight
   lines don't distort under preserveAspectRatio="none"); their text
   labels and every milestone/guide/tooltip are plain HTML, positioned by
   percentage over .archivechart__wrap, so they never stretch (Ben, 5 Oct
   2026). home.js drives the hover/touch/keyboard readout; without it the
   chart still shows fully drawn with its three milestone labels and the
   default readout text. */
.archivechart{display:grid;gap:10px}
.archivechart:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.archivechart__headline{margin:0;font:600 clamp(16px,1.9vw,19px)/1.35 "Sora",sans-serif;color:var(--on-navy)}
.archivechart__readout{margin:0;font-size:13px;color:var(--on-navy-2);min-height:1.4em}
.archivechart__cap{margin:0;font-size:13px;color:var(--on-navy-2)}
.browserframe__chart .archivechart__wrap{width:100%}
.archivechart__wrap{position:relative;touch-action:pan-y}
.archivechart__wrap .chart{width:100%;height:auto;display:block}
.chart__grid{stroke:var(--line-navy);stroke-width:1;opacity:.6}
.archivechart__gridlabels,.archivechart__milestones{position:absolute;inset:0;pointer-events:none}
.archivechart__gridlabel{position:absolute;left:0;transform:translateY(-50%);font-size:11px;color:var(--on-navy-2);white-space:nowrap}
.archivechart__milestone{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap}
.archivechart__milestone--first{transform:translate(0,-50%)}
.archivechart__milestone--best{transform:translate(-100%,-50%);flex-direction:row-reverse}
.archivechart__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 3px rgba(207,174,107,.2)}
.archivechart__milestone em{font:600 11px/1.2 "Sora",sans-serif;font-style:normal;color:var(--on-navy-2);background:var(--navy-2);padding:1px 6px;border-radius:3px}
@media (max-width:599px){.archivechart__milestone--mid{display:none}}
.archivechart__guideline{position:absolute;top:0;bottom:0;width:1px;background:rgba(207,174,107,.5);display:none;pointer-events:none}
.archivechart__guidedot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);display:none;pointer-events:none;box-shadow:0 0 0 4px rgba(207,174,107,.25)}
.archivechart__tooltip{position:absolute;transform:translate(-50%,-140%);font:600 12px/1.3 "Sora",sans-serif;color:var(--navy);background:var(--gold);padding:3px 8px;border-radius:4px;display:none;pointer-events:none;white-space:nowrap;z-index:1}

/* Proof dialog: the original Shopify screenshot, opened from .proof__caplink */
.proofdialog{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh}
.proofdialog::backdrop{background:rgba(5,10,18,.78)}
.proofdialog__inner{position:relative;background:var(--navy-2);border:1px solid var(--line-navy);border-radius:8px;padding:20px;max-width:92vw;max-height:80vh;display:grid;gap:12px;overflow:auto}
.proofdialog__inner img{max-width:92vw;max-height:70vh;width:auto;height:auto;border-radius:4px;display:block;margin:0 auto}
.proofdialog__cap{margin:0;font-size:13px;color:var(--on-navy-2);text-align:center}
.proofdialog__close{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;background:var(--navy-3);border:1px solid var(--line-navy);border-radius:50%;color:var(--on-navy);cursor:pointer;padding:0}
.proofdialog__close svg{width:14px;height:14px}
.proofdialog__close:hover{border-color:var(--gold);color:var(--gold)}

/* "What do you need?" picker: 2 columns phone + tablet, 3 columns desktop */
.needgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
@media (min-width:900px){.needgrid{grid-template-columns:repeat(3,1fr)}}
.needbtn{position:relative;display:flex;align-items:flex-start;gap:14px;min-height:64px;width:100%;text-align:left;padding:18px 20px;border:1px solid var(--line-navy);border-radius:6px;background:var(--navy-2);color:var(--on-navy);cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s}
.needbtn:hover{border-color:var(--gold)}
.needbtn__check{flex:none;width:20px;height:20px;margin-top:2px;border:1.5px solid var(--line-navy);border-radius:4px;display:grid;place-items:center;color:transparent;transition:border-color .2s,background .2s,color .2s}
.needbtn__check svg{width:13px;height:13px}
.needbtn__body{display:grid;gap:4px}
.needbtn__title{font-weight:700;font-size:16px;letter-spacing:-0.01em}
.needbtn__sub{font-size:14px;color:var(--on-navy-2)}
/* Phones: drop the one-line description visually; it stays in the
   button's accessible description via aria-describedby, so everything
   fits in about one screen without losing it for screen readers. */
@media (max-width:599px){.needbtn__sub{display:none}}
.needbtn[aria-pressed="true"]{border-color:var(--gold);background:var(--navy-3)}
.needbtn[aria-pressed="true"] .needbtn__check{border-color:var(--gold);background:var(--gold);color:var(--navy)}

/* Need panels: all six render for Google; JS hides the unpicked ones */
.needpanels{display:grid;gap:clamp(28px,4vw,40px);margin-top:clamp(36px,5vw,56px)}
.needpanel{padding-top:28px;border-top:1px solid var(--line-navy)}
.needpanel h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-0.03em;margin:0 0 16px}
.needpanel__services{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px;color:var(--on-navy-2)}
.needpanel__services li{padding-left:20px;position:relative}
.needpanel__services li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--gold)}
@media (min-width:700px){.needpanel__services{grid-template-columns:1fr 1fr;column-gap:28px}}
.needpanel__price,.needpanel__proof{margin:0 0 6px;color:var(--on-navy-2);font-size:15px}
.needpanel__price strong,.needpanel__proof strong{color:var(--on-navy);font-weight:600}
.needpanel__proof a{color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.needpanel[hidden]{display:none}

/* Summary bar at the end of the panels */
.needbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(32px,4vw,48px);padding:22px 26px;border:1px solid var(--line-navy);border-radius:8px;background:var(--navy-2)}
.needbar__text{margin:0;color:var(--on-navy);font-size:16px}

/* Built by us: two composed panels, not equal icon cards */
.built__grid{display:grid;gap:44px;margin-top:8px}
@media (min-width:900px){.built__grid{grid-template-columns:1fr 1fr;gap:56px}}
.built__panel{display:grid;gap:24px;align-content:start}
.built__media{margin:0}
.built__text h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-0.03em;margin:0 0 12px}
.built__text p{color:var(--on-navy-2);margin:0 0 14px;max-width:48ch}
.built__cap{font-size:13px;color:var(--on-navy-2);margin:12px 0 0}
.built__link{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.browserframe{border-radius:4px;overflow:hidden;border:1px solid var(--line-navy)}
.browserframe__bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--navy-3)}
.browserframe__dot{width:7px;height:7px;border-radius:50%;background:var(--line-navy);display:block}
.browserframe img{width:100%;height:auto;display:block}

/* Founders (homepage): a square initial panel, no placeholder text */
.photo--initial{aspect-ratio:1/1;background:var(--navy-3);color:var(--gold);font:700 clamp(48px,6vw,88px) "Sora",sans-serif}

/* Method section (homepage): same .wrap gutter as every other section.
   .pos__intro/.pos__grid's 3-value padding shorthand zeroes the inline
   padding, which .wrap's padding-inline can't win on source order alone. */
.pos--v4 .pos__intro,.pos--v4 .pos__grid{padding-left:var(--gutter);padding-right:var(--gutter)}

/* Book heading (homepage): shorter, so "20-minute" doesn't break mid-word */
.book .book__h2--v4{font-size:clamp(40px,5vw,76px)}

/* Price and terms: two plain-text columns above the existing terms visual */
.pricecols{display:grid;gap:28px;margin:8px 0 clamp(32px,4vw,48px)}
@media (min-width:700px){.pricecols{grid-template-columns:1fr 1fr;gap:48px}}
.pricecol h3{font-size:clamp(20px,2vw,24px);letter-spacing:-0.02em;margin:0 0 10px;color:var(--on-navy)}
.pricecol p{color:var(--on-navy-2);margin:0;max-width:42ch}

/* Industries: a simple list/row, no cards */
.industrylist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-bone)}
.industrylist li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 20px;padding:20px 0;border-bottom:1px solid var(--line-bone)}
.industrylist li span{display:inline-flex;align-items:center;gap:14px;font-size:clamp(18px,1.8vw,22px);font-weight:700;letter-spacing:-0.01em}
.industrylist li a{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--on-bone)}
.indicon--list{width:22px;height:22px;flex:none;color:var(--gold)}

/* /industries hub: a grid of ruled, whole-item links (agentryx.io style),
   never icon cards. One rule per item, a gold arrow that nudges right. */
.indgrid{display:grid;gap:0 40px}
@media (min-width:620px){.indgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.indgrid{grid-template-columns:repeat(3,1fr)}}
.indcard{display:flex;flex-direction:column;gap:14px;padding:clamp(28px,3vw,36px) 2px clamp(32px,3.5vw,40px);border-top:1px solid var(--line-navy);text-decoration:none;color:inherit;border-radius:2px}
.indcard:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.indicon--card{width:36px;height:36px;color:var(--gold);margin-bottom:4px}
.indcard__name{font-size:clamp(20px,2vw,24px);letter-spacing:-0.02em;margin:0;color:var(--on-navy)}
.indcard__line{color:var(--on-navy-2);margin:0;font-size:15px;max-width:38ch}
.indcard__cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--gold)}
.indcard__cta svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.indcard:hover .indcard__cta svg,.indcard:focus-visible .indcard__cta svg{transform:translateX(5px)}
.indhub__cta{display:grid;gap:18px;justify-items:start;margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line-navy)}

/* "How it adds up" strip (homepage, between hero and the picker): four
   steps joined by drawn arrows, no icons, no numbers, no card boxes. */
.addsup__row{display:flex;flex-direction:column;gap:28px;margin-top:4px}
.addsup__step{padding-top:20px;border-top:1px solid var(--line-navy)}
.addsup__step h3{font:700 18px/1.3 "Sora",sans-serif;color:var(--on-navy);letter-spacing:-0.01em;margin:0 0 8px}
.addsup__step p{color:var(--on-navy-2);margin:0}
.addsup__step--gold h3{color:var(--gold)}
.addsup__arrow{display:flex;align-items:center;justify-content:center;color:var(--gold);width:22px;height:22px;transform:rotate(90deg)}
.addsup__arrow svg{width:100%;height:100%;display:block}
.addsup__note{margin:clamp(24px,3vw,32px) 0 0;color:var(--on-navy-2);font-size:15px;max-width:52ch}
@media (min-width:900px){
  .addsup__row{flex-direction:row;align-items:flex-start;gap:20px}
  .addsup__step{flex:1;min-width:0}
  .addsup__arrow{transform:none;flex:none;margin-top:20px}
}
.industrylist__note{margin-top:22px}

/* Hub + industry hero spacing fixes (4 Oct). Part 5 (5 Oct) moved the
   industry pages' own H1->sub gap to the shared 20px rhythm above; the hub
   keeps its own slightly taller gap, scoped to .hero--hub so it doesn't
   also pull the 13 industry pages back off the shared rhythm. */
.hero--centred.hero--hub .hero__sub{margin-top:24px}
.indhero__icons{max-width:520px}
.band--hub{padding-top:clamp(16px,3vw,40px)}
@media (max-width:620px){
  .indhero__icons{max-width:300px;gap:10px;margin-top:36px}
  .indtile{width:52px;height:52px}
  .hero--hub{padding-bottom:40px}
}

/* ===== Motion A (4 Oct): the growth line, adds-up scroll line, count-ups,
   icon draw + hover (see MOTION-SPEC.md Part A). Static/at-rest by default so
   every piece of this still renders with no JS; site.js/home.js only move
   things from there. ===== */

/* A.1 Hero growth line: behind the hero content, one gold curve ending in
   the brand's three ascending bars. Two separate <svg>s (see
   HERO_GROWTHLINE_SVG in build.py for why): the line stretches full width,
   the bars keep their own shape in a small box bottom-right. .hero--growthline
   reserves a bottom strip via padding so this band can never sit under the
   proof card or any other hero content, on any hero height. */
.hero--growthline{padding-bottom:clamp(170px,20vh,210px)}
.hero__growthline{position:absolute;z-index:1;left:0;right:0;bottom:0;width:100%;height:140px;opacity:.55;pointer-events:none;overflow:visible}
.hero__growthline-path{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hero__growthline-path--glow{stroke-width:3;opacity:.3;filter:blur(5px)}
.hero__growthbars{position:absolute;z-index:1;right:var(--gutter);bottom:0;width:70px;height:96px;pointer-events:none;opacity:.55;overflow:visible}
.hero__growthbar{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 100%}
.hero__growthbar--fill{fill:var(--gold);opacity:.9;stroke:none}
@media (max-width:899px){
  .hero--growthline{padding-bottom:clamp(130px,17vh,160px)}
  .hero__growthline{height:90px}
  .hero__growthbars{width:64px;height:88px}
}

/* TEMPLATE-PASS-SPEC Part 4 (+ 5 Oct review fix): 5 rotating hero background
   animations on industry-page heroes only (never the homepage, which keeps
   its own sum-row/curve signature). The whole layer sits at a single low
   opacity and is masked transparent through the centre ~60% of its width,
   where the headline/sub/buttons live, so fx never visually crosses text
   even though individual shapes can still occupy that space underneath. */
.hero__fx{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:.22;
  mask-image:linear-gradient(90deg,#000 0%,#000 10%,transparent 20%,transparent 80%,#000 90%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 10%,transparent 20%,transparent 80%,#000 90%,#000 100%);
}
.hero__fx svg{position:absolute;inset:0;width:100%;height:100%}

.fx-grow path{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.fx-grow.is-static path{stroke-dashoffset:0}

.fx-network circle{fill:var(--gold)}
.fx-network line{stroke:var(--gold-ink);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.fx-network .fx-pulse{fill:var(--gold-2)}
.fx-network.is-static circle{opacity:1}
.fx-network.is-static line{stroke-dashoffset:0}
.fx-network.is-static .fx-pulse{opacity:0}

.fx-flow .fx-flowpath{fill:none;stroke:var(--gold-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.fx-flow .fx-diary{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fx-flow .fx-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:0}
.fx-flow .fx-diaryflash{position:absolute;border-radius:6px;background:rgba(207,174,107,0)}

.fx-bars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:0 3%}
.fx-bars i{display:block;flex:1;min-width:3px;max-width:11px;background:var(--gold);border-radius:2px 2px 0 0;transform-origin:50% 100%;transform:scaleY(.12);animation:fxBarRise 3.4s ease-in-out infinite}
.fx-bars.is-static i{animation:none;transform:scaleY(var(--h,.5))}
@keyframes fxBarRise{0%,100%{transform:scaleY(.12)}50%{transform:scaleY(var(--h,.7))}}

.fx-radar{position:absolute;inset:0}
.fx-radar__ring{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border-radius:50%;border:1px solid var(--gold);transform:scale(0);opacity:0;animation:fxRadarPulse 3.8s ease-out infinite}
.fx-radar.is-static .fx-radar__ring{animation:none;transform:scale(2.6);opacity:.08}
.fx-radar__dot{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--gold);opacity:0;animation:fxRadarCatch 3.8s ease-out infinite}
.fx-radar.is-static .fx-radar__dot{animation:none;opacity:.65}
@keyframes fxRadarPulse{0%{transform:scale(0);opacity:.6}100%{transform:scale(9);opacity:0}}
@keyframes fxRadarCatch{0%,46%{opacity:0}50%{opacity:.9}58%,100%{opacity:0}}

/* Phones: fainter still, and only behind the top icon/pill area, never
   near the H1/sub where there's no horizontal room to mask around. */
@media (max-width:639px){
  .hero__fx{
    opacity:.15;
    mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 42%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 42%,transparent 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .fx-bars i,.fx-radar__ring,.fx-radar__dot{animation:none}
}

/* A.1b "Ads are the easy part" (home_page() only, id="different"): two
   cards, not a dense table. The muted "typical agency" card is a navy-2
   panel sitting on the darker navy band; the "Full Scale" card is the same
   shape with a gold border and soft glow. Both cards list the same 6 rows
   in the same order, so they read as aligned on every width; the small
   label above each value is what ties a typical-card row to its
   Full-Scale-card row, on a phone as much as on a laptop. */
.different__cards{display:grid;gap:16px;margin-top:clamp(28px,4vw,40px)}
.different__card{border-radius:var(--radius);padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,32px) clamp(24px,3vw,32px)}
.different__card--typical{background:var(--navy-2);color:var(--on-navy-2)}
.different__card--fs{background:linear-gradient(rgba(207,174,107,.08),rgba(207,174,107,.08)),var(--navy-2);border:1px solid var(--gold);box-shadow:0 30px 70px -30px rgba(207,174,107,.35)}
.different__cardtitle{margin:0 0 4px;font:600 15px/1.3 "Sora",sans-serif;letter-spacing:.02em;color:var(--on-navy-2)}
.different__card--fs .different__cardtitle{color:var(--gold-2)}
.different__row{padding:14px 0;border-top:1px solid var(--line-navy)}
.different__card--typical .different__row{border-top-color:rgba(255,255,255,.08)}
.different__card--fs .different__row{border-top-color:rgba(207,174,107,.22)}
.different__row:first-of-type{border-top:0;padding-top:10px}
.different__rowlabel{margin:0 0 6px;font-size:13px;color:var(--on-navy-2)}
.different__rowval{margin:0;display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.4;color:var(--on-navy)}
.different__card--typical .different__rowval{color:var(--on-navy-2)}
.different__icon{flex:none;width:16px;height:16px;margin-top:3px}
.different__icon--x{color:var(--on-navy-2);opacity:.6}
.different__icon--tick{color:var(--gold)}
.different__icon svg{width:100%;height:100%}
.different__icon--tick svg path{stroke-dasharray:1;stroke-dashoffset:0}
.different__card--typical{opacity:.6}
.different__close{margin:clamp(28px,4vw,40px) 0 0;font:600 clamp(20px,2.4vw,30px)/1.35 "Sora",sans-serif;color:var(--on-navy);max-width:34ch}
.different__close-gold{color:var(--gold-2)}
.different__selective{margin:10px 0 0;font-size:15px;color:var(--on-navy-2)}
@media (min-width:900px){
  .different__cards{grid-template-columns:1fr 1fr;align-items:start}
}
/* Motion: left card fades in to 60% opacity, then the right card slides up
   and its ticks draw in one by one (80ms stagger set inline per tick by
   build.py as --tick-delay). Resting state (above) is fully visible, so
   the section is complete with no JS; home.js only adds data-different-armed
   when it's safe to animate, then adds is-in once scrolled into view. */
.different[data-different-armed] .different__card--typical{opacity:0;transition:opacity .9s var(--ease)}
.different[data-different-armed].is-in .different__card--typical{opacity:.6}
.different[data-different-armed] .different__card--fs{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s}
.different[data-different-armed].is-in .different__card--fs{opacity:1;transform:translateY(0)}
.different[data-different-armed] .different__icon--tick svg path{stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease);transition-delay:calc(.35s + var(--tick-delay,0ms))}
.different[data-different-armed].is-in .different__icon--tick svg path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .different[data-different-armed] .different__card--typical{opacity:.6;transition:none}
  .different[data-different-armed] .different__card--fs{opacity:1;transform:none;transition:none}
  .different[data-different-armed] .different__icon--tick svg path{stroke-dashoffset:0;transition:none}
}

/* A.2 "How it adds up": a thin line through the four steps, drawn with
   scroll; each step it reaches turns gold and its arrow nudges on. */
.addsup__row{position:relative}
.addsup__line{position:absolute;pointer-events:none;z-index:0;display:none}
.addsup__line path{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.45;vector-effect:non-scaling-stroke}
.addsup__line--v{top:0;bottom:0;left:0;width:3px;display:block}
@media (min-width:900px){
  .addsup__line--h{top:0;left:0;right:0;height:3px;display:block}
  .addsup__line--v{display:none}
}
.addsup__step{transition:border-top-color .3s var(--ease)}
.addsup__step h3{transition:color .3s var(--ease)}
.addsup__step.is-active{border-top-color:var(--gold)}
.addsup__step.is-active h3{color:var(--gold-2)}
.addsup__arrow svg{transition:transform .3s var(--ease)}
.addsup__step.is-active + .addsup__arrow svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .addsup__line{display:none!important}
  .addsup__step{border-top-color:var(--gold)}
  .addsup__step h3{color:var(--gold-2)}
}

/* A.3 Count-ups: tabular figures already come from body{font-variant-numeric}
   above. site.js wraps only the digits in a .countnum span and reserves ITS
   width (never the whole heading's), so no card or hero can be pushed wider. */
.countnum{display:inline-block;text-align:right}
.factgrid__item,.hero__copy,.proof{min-width:0}

/* A.4 Industry icons draw in (hub cards, homepage #who list, industry hero
   icon): every drawable shape already carries pathLength="1" (load_icon()),
   so at rest they are plain, fully drawn icons — site.js is what resets them
   to "undrawn" right before animating them on. No CSS needed at rest. */

/* A.5 Icon hover moments: one feature per icon, wrapped in <g class="ic-...">
   by load_icon(). Desktop hover + keyboard focus on the card/row, never a
   touch-only effect. */
.ic-ext,.ic-sparkle,.ic-bag,.ic-cap,.ic-sun,.ic-stack,.ic-heart,.ic-key,.ic-wrench,.ic-ticket,.ic-front{transform-box:fill-box;transform-origin:50% 50%}
@keyframes icSlide2{0%{transform:translateX(0)}100%{transform:translateX(2px)}}
@keyframes icWrenchTurn{0%{transform:rotate(0)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
@keyframes icSunSpin{0%{transform:rotate(0)}100%{transform:rotate(45deg)}}
@keyframes icKeyTurn{0%{transform:rotate(0)}100%{transform:rotate(20deg)}}
@keyframes icSparkleTwinkle{0%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.35) rotate(25deg);opacity:.6}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes icHeartBeat{0%{transform:scale(1)}30%{transform:scale(1.16)}60%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes icBagLift{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
@keyframes icStackBump{0%{transform:translateY(0)}40%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes icTickRedraw{0%{stroke-dashoffset:0}45%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes icCandleUp{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes icCandleDown{0%{transform:translateY(0)}50%{transform:translateY(3px)}100%{transform:translateY(0)}}
@keyframes icCapTilt{0%{transform:rotate(0)}100%{transform:rotate(-10deg)}}
@keyframes icTicketWiggle{0%{transform:rotate(0)}25%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.indcard:hover .ic-ext,.indcard:focus-visible .ic-ext,.industrylist li:hover .ic-ext,.industrylist li:focus-within .ic-ext{animation:icSlide2 .35s cubic-bezier(.16,1,.3,1) forwards}
.indcard:hover .ic-wrench,.indcard:focus-visible .ic-wrench,.industrylist li:hover .ic-wrench,.industrylist li:focus-within .ic-wrench{animation:icWrenchTurn .45s cubic-bezier(.16,1,.3,1)}
.indcard:hover .ic-sun,.indcard:focus-visible .ic-sun,.industrylist li:hover .ic-sun,.industrylist li:focus-within .ic-sun{animation:icSunSpin .4s cubic-bezier(.16,1,.3,1) forwards}
.indcard:hover .ic-key,.indcard:focus-visible .ic-key,.industrylist li:hover .ic-key,.industrylist li:focus-within .ic-key{animation:icKeyTurn .4s cubic-bezier(.16,1,.3,1) forwards}
.indcard:hover .ic-sparkle,.indcard:focus-visible .ic-sparkle,.industrylist li:hover .ic-sparkle,.industrylist li:focus-within .ic-sparkle{animation:icSparkleTwinkle .5s cubic-bezier(.16,1,.3,1)}
.indcard:hover .ic-heart,.indcard:focus-visible .ic-heart,.industrylist li:hover .ic-heart,.industrylist li:focus-within .ic-heart{animation:icHeartBeat .45s cubic-bezier(.16,1,.3,1)}
.indcard:hover .ic-bag,.indcard:focus-visible .ic-bag,.industrylist li:hover .ic-bag,.industrylist li:focus-within .ic-bag{animation:icBagLift .3s cubic-bezier(.16,1,.3,1) forwards}
.indcard:hover .ic-stack,.indcard:focus-visible .ic-stack,.industrylist li:hover .ic-stack,.industrylist li:focus-within .ic-stack{animation:icStackBump .4s cubic-bezier(.16,1,.3,1)}
.indcard:hover .ic-tick path,.indcard:focus-visible .ic-tick path,.industrylist li:hover .ic-tick path,.industrylist li:focus-within .ic-tick path{animation:icTickRedraw .45s cubic-bezier(.16,1,.3,1)}
.indcard:hover .ic-cap,.indcard:focus-visible .ic-cap,.industrylist li:hover .ic-cap,.industrylist li:focus-within .ic-cap{animation:icCapTilt .4s cubic-bezier(.16,1,.3,1) forwards}
.indcard:hover .ic-ticket,.indcard:focus-visible .ic-ticket,.industrylist li:hover .ic-ticket,.industrylist li:focus-within .ic-ticket{animation:icTicketWiggle .5s cubic-bezier(.16,1,.3,1)}
.indcard:hover .ic-front,.indcard:focus-visible .ic-front,.industrylist li:hover .ic-front,.industrylist li:focus-within .ic-front{animation:icSlide2 .35s cubic-bezier(.16,1,.3,1) forwards}
.indcard:hover .ic-candle,.indcard:focus-visible .ic-candle,.industrylist li:hover .ic-candle,.industrylist li:focus-within .ic-candle{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-delay:calc(var(--i,0) * 70ms)}
.indcard:hover .ic-candle:nth-of-type(odd),.indcard:focus-visible .ic-candle:nth-of-type(odd),.industrylist li:hover .ic-candle:nth-of-type(odd),.industrylist li:focus-within .ic-candle:nth-of-type(odd){animation-name:icCandleUp}
.indcard:hover .ic-candle:nth-of-type(even),.indcard:focus-visible .ic-candle:nth-of-type(even),.industrylist li:hover .ic-candle:nth-of-type(even),.industrylist li:focus-within .ic-candle:nth-of-type(even){animation-name:icCandleDown}

/* A.6 Picker: the tick draws in with the existing aria-pressed toggle (no
   extra JS needed), the panel opens with a smooth height + fade, and the
   "You picked" line crossfades. */
.needbtn__check svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s cubic-bezier(.16,1,.3,1)}
.needbtn[aria-pressed="true"] .needbtn__check svg path{stroke-dashoffset:0}
.needpanel{display:grid;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows .25s cubic-bezier(.16,1,.3,1)}
.needpanel__inner{overflow:hidden;opacity:1;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
.needpanel.is-closed{grid-template-rows:0fr}
.needpanel.is-closed .needpanel__inner{opacity:0}
.needbar__text [data-picked-text]{transition:opacity .15s ease}
.needbar__text [data-picked-text].is-fading{opacity:0}

/* Homepage #who industry spotlight (Ben approved, 5 Oct 2026): a left tab
   list (right panel on desktop, becoming a horizontally scrollable chip row
   above the panel under 1000px). Prefixed indspot- so it never collides
   with the unrelated cursor-glow ".spotlight" element above (C.2). home.js
   drives the ARIA-tabs behaviour and the auto-cycle progress fill. */
.indspot{display:grid;gap:20px;margin-top:clamp(28px,4vw,40px);min-width:0}
@media (min-width:1000px){.indspot{grid-template-columns:300px 1fr;gap:32px;align-items:start}}
.indspot__tabswrap{position:relative;min-width:0}
.indspot__panels{min-width:0}
.indspot__tabsscroll{overflow-x:auto;scrollbar-width:none}
.indspot__tabsscroll::-webkit-scrollbar{display:none}
.indspot__tablist{display:flex;flex-direction:column;gap:2px}
.indspot__tab{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 14px;border-radius:var(--radius);text-decoration:none;color:var(--on-bone);font-size:15px;font-weight:600;transition:background-color .2s var(--ease)}
.indspot__tab:hover{background:var(--bone)}
.indspot__tab[aria-selected="true"]{background:var(--bone);color:var(--on-bone)}
.indspot__tab[aria-selected="true"] .indspot__tabname{color:var(--on-bone)}
.indspot__tabicon{width:22px;height:22px;flex:none;color:var(--gold)}
.indspot__tabname{white-space:nowrap}
.indspot__tabfill{position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:999px){
  .indspot__tablist{flex-direction:row;gap:8px;padding:2px 24px}
  .indspot__tab{flex:0 0 auto;scroll-snap-align:start}
  .indspot__tabsscroll{scroll-snap-type:x proximity}
  .indspot__tabswrap::before,.indspot__tabswrap::after{content:"";position:absolute;top:0;bottom:0;width:24px;z-index:1;pointer-events:none}
  .indspot__tabswrap::before{left:0;background:linear-gradient(to right,var(--bone-2),transparent)}
  .indspot__tabswrap::after{right:0;background:linear-gradient(to left,var(--bone-2),transparent)}
}
.indspot__panels{position:relative}
.indspot__panelcard{background:var(--navy-2);border-radius:var(--radius);padding:clamp(28px,4vw,48px);min-height:380px;display:flex;flex-direction:column;justify-content:center;gap:20px}
@media (min-width:1000px){.indspot__panelcard{min-height:440px}}
.indspot__panelicon{width:56px;height:56px;color:var(--gold)}
.indspot__headline{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-0.02em}
.indspot__headline-white{color:var(--on-navy)}
.indspot__headline-gold{color:var(--gold)}
.indspot__quote{margin:0;padding-left:18px;border-left:2px solid var(--gold)}
.indspot__quote p{margin:0 0 8px;color:var(--on-navy);font-size:17px;font-style:italic;max-width:48ch}
.indspot__quote cite{display:block;font-style:normal;font-size:14px;color:var(--on-navy-2)}
.indspot__cta{align-self:flex-start;margin-top:4px}
.indspot__viewall{margin:16px 2px 0;font-size:14px}
.indspot__viewall a{color:var(--on-bone-2);text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.indspot__tabfill{display:none}}

/* ===== Motion C (4 Oct): cinematic layer — page morph, cursor spotlight,
   headline reveals (already covered by A's ".band .h2" split, see site.js),
   magnetic CTAs (reuses the existing [data-magnetic] handler) and card tilt.
   See MOTION-SPEC.md Part C. ===== */

/* C.1 Page morph: cross-document View Transitions. Unsupported browsers
   just navigate normally (this at-rule is simply ignored by them). Named
   shared elements (ind-<slug>/indname-<slug>) are set inline per icon/label
   by build.py so an /industries card morphs into that industry's hero. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtRootOut 180ms cubic-bezier(.16,1,.3,1) both}
::view-transition-new(root){animation:vtRootIn 320ms cubic-bezier(.16,1,.3,1) both}
@keyframes vtRootOut{to{opacity:0}}
@keyframes vtRootIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:vtRootFadeRM 150ms linear both!important}
  @keyframes vtRootFadeRM{from{opacity:0}to{opacity:1}}
}

/* C.2 Cursor spotlight: one fixed, blurred gold circle per page, moved by
   site.js (quickTo) and toggled on only while the pointer is over a dark
   navy section. pointer-events:none throughout, so it never blocks a click. */
.spotlight{position:fixed;left:0;top:0;width:840px;height:840px;margin:-420px 0 0 -420px;border-radius:50%;z-index:45;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .3s ease;background:radial-gradient(closest-side,rgba(207,174,107,.08),rgba(207,174,107,0) 70%)}
.spotlight.is-on{opacity:1}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.spotlight{display:none}}

/* C.4 Magnetic CTAs: every .btn--gold now carries data-magnetic (build.py);
   the handler itself already exists (site.js, A-era). No new CSS needed. */

/* C.5 Section depth: a subtle cursor tilt on the built-by-us frames and the
   hero proof card, set by site.js (quickTo rotateX/rotateY, desktop only).
   will-change avoids a blurry mid-tilt repaint; GSAP clears the transform
   back to flat on mouseleave. */
.built__media{will-change:transform}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.built__media{transform:none!important}}

/* 5 Oct: spotlight CTA row + tighter section rhythm */
.indspot__ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:4px}
.indspot__ctarow .indspot__cta{margin-top:0}
.indspot__all{color:var(--on-navy);font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.indspot__all:hover{text-decoration-color:var(--gold)}

/* About v2 (ABOUT-SPEC.md, 5 Oct 2026; review-fix pass 5 Oct 2026): the
   story, as nine chapters. */
.about-hero__gold{color:var(--gold)}

/* Hero art: a large, quiet version of the real ARCHIVE growth line (same
   data/path as the chapter-four chart, archive_chart_svg(armed=False)),
   sitting behind/right of the headline. Drawn on load with a plain CSS
   animation (works with no JS at all); hidden on phones. */
.hero__archiveline{display:none}
/* Phones: the same line as a full-width band in the empty space above the
   headline (the hero text sits at the bottom of the screen on phones), so it
   never runs through the words. */
@media (max-width:899px){
  .hero__archiveline{display:block;position:absolute;z-index:1;left:0;right:0;top:22%;width:100%;height:auto;pointer-events:none;overflow:hidden}
  .hero__archiveline .chart{width:100%;height:auto;display:block}
  .hero__archiveline .chart__line{stroke:var(--gold);stroke-width:2;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1;animation:archiveline-draw 1.8s cubic-bezier(.16,1,.3,1) .5s forwards}
  .hero__archiveline .chart__area{opacity:0;animation:archiveline-fade-m 1.4s ease-out 1.2s forwards}
}
@media (min-width:900px){
  .hero__archiveline{display:block;position:absolute;z-index:1;right:calc(var(--gutter) * -1);top:50%;transform:translateY(-50%);width:min(60vw,860px);pointer-events:none}
  .hero__archiveline .chart__line{stroke:var(--gold);stroke-width:2;opacity:.35;stroke-dasharray:1;stroke-dashoffset:1;animation:archiveline-draw 1.8s cubic-bezier(.16,1,.3,1) .5s forwards}
  .hero__archiveline .chart__area{opacity:0;animation:archiveline-fade 1.4s ease-out 1.2s forwards}
}
@keyframes archiveline-draw{to{stroke-dashoffset:0}}
@keyframes archiveline-fade{to{opacity:.6}}
@keyframes archiveline-fade-m{to{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .hero__archiveline .chart__line{animation:none;stroke-dashoffset:0}
  .hero__archiveline .chart__area{animation:none;opacity:.6}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .hero__archiveline .chart__area{opacity:.35}
}

/* Each chapter breathes, but consistently — not a forced full screen. */
.band--chapter{padding:clamp(72px,8vw,120px) 0}

/* A small gold number beside each of the five numbered chapter headings,
   desktop only, aligned with the progress rail's dots; phones get no
   number (the rail itself is also desktop-only, see below). */
.chapterhead{display:flex;align-items:baseline;gap:0}
.chapterhead__num{display:none}
@media (min-width:1000px){
  .chapterhead{gap:20px}
  .chapterhead__num{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;margin-top:.1em;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font:600 15px "Sora",sans-serif}
}

/* Left-edge progress rail (desktop only): a thin gold line tracking scroll
   through the chapters, with a dot per chapter that lights as you pass it.
   Decorative (aria-hidden) and inert with no JS/reduced motion — it simply
   never fills, which reads as a quiet unlit guide rather than a broken one. */
.storyrail{display:none}
@media (min-width:1000px){
  .storyrail{display:block;position:fixed;left:18px;top:0;bottom:0;width:2px;z-index:40;pointer-events:none;background:var(--on-navy-2);opacity:.15}
  .storyrail__fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);opacity:.4;transform:scaleY(0);transform-origin:50% 0%}
  .storyrail__dot{position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--navy-3);border:2px solid var(--on-navy-2);opacity:.5;transform:translateY(-50%);transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
  .storyrail__dot.is-on{background:var(--gold);border-color:var(--gold);opacity:1;box-shadow:0 0 0 5px rgba(207,174,107,.2)}
}
@media (prefers-reduced-motion:reduce){.storyrail{display:none}}

/* Chapter one's big counter */
.storystat{margin:0;font:700 clamp(64px,11vw,168px)/1 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--gold);font-variant-numeric:tabular-nums}

/* Chapter two / "how we work": icon + line rows, reusing the tick/x icon
   classes built for the homepage's "ads are the easy part" cards
   (.different__icon, --tick, --x), which already render fully drawn with
   no JS. */
.storyrows{margin-top:clamp(28px,4vw,44px);max-width:52ch}
.storyrow{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line-navy)}
.band--bone .storyrow,.band--bone-2 .storyrow{border-top-color:var(--line-bone)}
.storyrow:first-child{border-top:0;padding-top:0}
.storyrow p{margin:0;font-size:17px;color:var(--on-navy)}
.band--bone .storyrow p,.band--bone-2 .storyrow p{color:var(--on-bone)}
.storyrow--muted p{color:var(--on-navy-2)}
.band--bone .storyrow--muted p,.band--bone-2 .storyrow--muted p{color:var(--on-bone-2)}
.band--bone .storyrow .different__icon--x,.band--bone-2 .storyrow .different__icon--x{color:var(--on-bone-2)}

/* Chapter four: the growth chart shown large (full .wrap width, not split
   into a two-column grid like the homepage's Built-by-us panel), capped so
   it never leaves a huge empty frame, plus a big stat row underneath. */
.built__media--large{margin:0 0 clamp(32px,4vw,48px)}
.built__media--large .browserframe__chart{aspect-ratio:auto;height:clamp(260px,32vw,380px);padding:22px 24px}
.built__media--large .archivechart__wrap{height:100%}
.built__media--large .archivechart__wrap .chart{height:100%}
.factgrid--story{grid-template-columns:repeat(3,1fr);max-width:640px}

/* Chapter five's pull-quote */
.pullquote{margin:clamp(24px,3vw,36px) 0 0;font:600 clamp(22px,2.6vw,32px)/1.35 "Sora",sans-serif;color:var(--gold-2);max-width:34ch}

/* "The two of us": a compact tile (gold initial now, a real photo later via
   SETTINGS["FOUNDER_PHOTOS"], empty today) beside each founder's name and
   role, instead of a tall near-empty panel. */
.founderpanels{display:grid;gap:28px;margin-top:8px}
@media (min-width:700px){.founderpanels{grid-template-columns:1fr 1fr}}
.founderpanel{display:flex;gap:16px;align-items:center}
.founderpanel__tile{flex:none;width:120px;height:120px;border-radius:6px;background:var(--navy-2);display:grid;place-items:center;overflow:hidden}
.founderpanel__tile img{width:100%;height:100%;object-fit:cover;display:block}
.founderpanel__tile .photo__initial{font-size:40px}
.photo__initial{font:700 56px "Sora",sans-serif;color:var(--gold)}
.founderpanel__info{display:grid;gap:6px}
.founderpanel__info p{margin:0;max-width:34ch;color:var(--on-bone-2)}
.founderpanel strong{display:block;font-size:19px;letter-spacing:-0.02em}
.founderpanel__info .book__alt{margin:4px 0 0}

/* Industry hero: centre the intro under the centred headline (5 Oct) */
.hero--plain .hero__copy > .hero__sub{margin-left:auto;margin-right:auto}
.hero--centred .hero__sub,.hero--centred form.check{margin-left:auto;margin-right:auto}
.hero--centred .trust{justify-content:center}

/* "Live proof" pop-up (site.js, docs/PROOF-FEED.md): a small light card for a
   real event. The .proof wrapper is an empty, invisible live region until a
   card is added, so with no events nothing is on screen. Desktop bottom-left;
   phones: full width, lifted above the sticky bar (site.js sets bottom). */
.proof{position:fixed;left:24px;bottom:24px;z-index:59;width:min(400px,calc(100vw - 2*var(--gutter)));pointer-events:none}
.proof__card{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:8px 2px 8px 14px;background:var(--bone);color:var(--navy);border:1px solid var(--line-bone);border-radius:8px;box-shadow:0 8px 24px rgba(11,22,38,.28);opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.proof__card.is-in{opacity:1;transform:none}
.proof__icon{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--gold)}
.proof__text{flex:1;min-width:0}
.proof__title,.proof__meta{margin:0;overflow:hidden;text-overflow:ellipsis}
.proof__title,.proof__meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.proof__title{font-size:14px;line-height:1.3;font-weight:600;letter-spacing:-0.01em}
.proof__meta{margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--on-bone-2)}
.proof__close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--on-bone-2);cursor:pointer;font:inherit}
.proof__close:hover{color:var(--navy)}
.proof__close:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-4px}
@media (max-width:899px){
  .proof{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-height:72px}
  .proof__card{max-height:72px;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.proof__card{transform:none;transition:opacity .2s linear}}
@media print{.proof{display:none}}


/* ==========================================================================
   Short industry pages (6 Oct 2026) — SHORT-INDUSTRY-SPEC.md + V2 + V3
   The 13 /industries/<slug> pages and /construction. v3: one idea per
   screen, bigger type, fewer words. Hero (video, shimmer headline, quote
   ticker), problem (one giant stat + one worry at a time + chip marquee),
   story (one big phone, animated calendar, gold connecting line), how
   (three stages + sample dashboard), deal, book + FAQ. Homepage/about/etc.
   use none of these classes.
   Start-hidden animation states only exist under .is-armed / .story--live /
   .worry--live / .hero--arm, classes that site.js adds (never with reduced
   motion), so with no JS the page is fully readable. Motion is transform +
   opacity only.
   ========================================================================== */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.problem,.story,.how,.deal{padding:clamp(40px,6.8svh,80px) 0}
.problem .h2,.story .h2,.how .h2,.deal .h2,.final--short .book h2{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-0.045em;max-width:none}
/* the two sections whose focal point is something else keep a smaller supporting heading */
.problem .h2{font-size:clamp(30px,3.3vw,48px);line-height:1.06;max-width:22ch}
.story .h2{font-size:clamp(30px,2.9vw,42px);line-height:1.05;max-width:18ch}
.how .h2{font-size:clamp(38px,4.3vw,60px)}
.how{padding:clamp(36px,5.8svh,68px) 0}
.deal .h2{font-size:clamp(40px,4.6vw,66px)}
.deal .h2{max-width:20ch}
.how .acc{color:var(--gold-ink)}

/* ---- Hero: full screen, cinematic ---- */
.hero--centred.hero--short{min-height:min(100svh,960px);max-height:none;align-items:center;justify-content:center;padding:clamp(88px,11.8svh,120px) 0 clamp(92px,12svh,112px);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy) url("/assets/video/hero-poster.webp") center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.hero__video.is-ready{opacity:1}
/* Never show the browser's own play button (iPhone shows one when Low Power Mode blocks autoplay) */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
.hero__scrim{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 46%,rgba(11,22,38,.5),rgba(11,22,38,0) 75%),linear-gradient(180deg,rgba(11,22,38,.74) 0%,rgba(11,22,38,.62) 45%,rgba(11,22,38,.92) 100%)}
.hero--short .hero__glow{z-index:1;opacity:.6}
.hero--short .hero__content{z-index:3}
.hero--short .hero__grid{gap:0}
.hero__id{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.hero--short .indicon--pill{width:30px;height:30px;margin:0}
.hero--short h1{font-size:clamp(34px,10.4vw,44px);line-height:1.02;letter-spacing:-0.045em;max-width:none;margin:clamp(16px,3svh,28px) 0 0;text-wrap:balance}
@media (min-width:600px){.hero--short h1{font-size:clamp(40px,min(6.2vw,calc((min(100vw,1280px) - 2 * var(--gutter)) / (var(--hc,30) * .56))),92px)}.hero--check h1{font-size:clamp(40px,min(4.5vw,calc((min(100vw,1280px) - 2 * var(--gutter)) / (var(--hc,30) * .56))),60px)}
.hero--centred.hero--short.hero--check{padding-top:clamp(84px,10.6svh,110px);padding-bottom:clamp(88px,11svh,104px)}}
/* the gold line: one shimmer sweep, once (background-clip text, gold -> gold-2 -> gold) */
.hero--short .line--gold{color:var(--gold);background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 42%,var(--gold-2) 50%,var(--gold) 58%,var(--gold) 100%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldshimmer 1.2s cubic-bezier(.4,0,.2,1) 1.1s 1 both}
@keyframes goldshimmer{from{background-position:100% 0}to{background-position:0% 0}}
/* hold the headline hidden until site.js starts the mask reveal (class only added with motion allowed; a timer lets go regardless) */
.hero--short.hero--arm .line{visibility:hidden}
.hero--short .hero__sub{font-size:clamp(17px,1.4vw,19px);line-height:1.55;max-width:56ch;margin:clamp(16px,2.8svh,26px) auto 0}
.hero--short .hero__cta-wrap,.hero--plain.hero--short .hero__cta-wrap{margin-top:clamp(20px,3.4svh,32px)}
.hero--short .hero__price{margin:14px 0 0;font-size:15px;color:var(--on-navy-2)}
.hero--check .hero__price{margin-top:10px}
.hero--short .check{margin-top:clamp(16px,2.6svh,24px);padding:14px 18px;gap:8px}
.hero--short .check .field input,.hero--short .check .field select{min-height:48px}
.hero--short .check .btn{min-height:48px}
.hero--short .check .field{gap:4px}
.hero--short .trust{margin-top:12px}
.hero--short .trust .av{width:34px;height:34px}
.hero--short .hero__proof{max-width:none;margin-top:10px;font-size:15px}
.hero--short .hero__proof-num{font-size:18px}
.qticker{position:absolute;z-index:4;left:0;right:0;bottom:0;overflow:hidden;padding:19px 0;border-top:1px solid rgba(243,241,234,.12);background:linear-gradient(0deg,rgba(11,22,38,.92),rgba(11,22,38,.55));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.qticker:focus-visible{outline-offset:-3px}
.qticker__track{display:flex;width:max-content;animation:qmarq 130s linear infinite;will-change:transform}
.qticker__list{display:flex;flex:none;gap:64px;list-style:none;margin:0;padding:0 64px 0 0}
.qticker__list li{white-space:nowrap;font-size:17px;line-height:1.4;color:var(--on-navy)}
.qm{margin-right:3px;font-size:1.35em;line-height:0;font-weight:700;color:var(--gold)}
.qs{margin-left:12px;font-size:14px;color:var(--on-navy-2)}
.qs::before{content:"· "}
@keyframes qmarq{to{transform:translateX(-50%)}}
.qticker:hover .qticker__track,.qticker:focus .qticker__track,.qticker:focus-within .qticker__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero--short .line--gold{animation:none}
  .hero--centred.hero--short{flex-direction:column;justify-content:center;padding-bottom:0}
  .qticker{position:relative;margin-top:28px;-webkit-mask-image:none;mask-image:none}
  .qticker__track{width:auto;animation:none;display:block}
  .qticker__list{flex-wrap:wrap;gap:8px 40px;padding:0 var(--gutter)}
  .qticker__list li{white-space:normal}
  .qticker__list[aria-hidden="true"]{display:none}
}

/* ---- Problem: one giant number, one worry at a time (bone band) ---- */
.problem__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5svh,44px)}
@media (min-width:960px){.problem__cols{grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:clamp(40px,5.5vw,96px);align-items:center}}
.problem__stats{container-type:inline-size;display:grid;gap:clamp(12px,2svh,18px);align-content:center}
.problem__num{display:block;white-space:nowrap;font:700 clamp(88px,22vw,150px)/.92 "Sora",sans-serif;letter-spacing:-0.055em;color:var(--gold-ink)}
@supports (width:1cqw){.problem__num{font-size:min(200px,max(72px,calc(100cqw / (var(--len,5) * .66))))}}
.problem__desc{margin:0;max-width:40ch;font-size:clamp(18px,1.5vw,20px);line-height:1.45;color:var(--on-bone)}
.problem__src{display:inline;margin-left:2px;font-size:14px;color:var(--on-bone-2);text-underline-offset:3px;white-space:nowrap}
.problem__also{margin:clamp(2px,1svh,10px) 0 0;padding-top:clamp(12px,2svh,18px);border-top:1px solid var(--line-bone);max-width:46ch;font-size:16px;line-height:1.5;color:var(--on-bone-2)}
.problem__also-k{font-weight:600;color:var(--on-bone)}
.problem__also b{font-weight:700;color:var(--gold-ink)}
.problem__fears{display:grid;align-content:center;gap:clamp(8px,1.4svh,14px)}
.problem__fears .kicker{margin:0}
.worry{margin-top:clamp(14px,3svh,28px)}
.worry__stack{display:grid}
.worry__item{padding:16px 0;border-top:1px solid var(--line-bone)}
.worry__q{margin:0 0 12px;font:600 clamp(24px,2.7vw,36px)/1.2 "Sora",sans-serif;letter-spacing:-0.03em;color:var(--on-bone);text-wrap:pretty}
.worry__a{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--on-bone-2)}
.flip__tick{flex:none;width:22px;height:22px;margin-top:3px;fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flip__tick path{stroke-dasharray:1;stroke-dashoffset:0}
.worry__dots{display:none}
/* live (JS on, motion allowed): all three worries stack in one cell, one visible at a time */
.worry--live .worry__item{grid-area:1/1;padding:0;border-top:0;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.worry--live .worry__item.is-active{opacity:1;transform:none;pointer-events:auto}
.worry--live .worry__a{opacity:0;transform:translateY(18px);transition:opacity .2s linear,transform .2s linear}
.worry--live .worry__item.is-active .worry__a{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1) 1.2s,transform .6s cubic-bezier(.2,.8,.2,1) 1.2s}
.worry--live .flip__tick path{stroke-dashoffset:1}
.worry--live .worry__item.is-active .flip__tick path{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out 1.55s}
.worry--live .worry__dots{display:flex;gap:6px;margin-top:clamp(16px,3svh,26px)}
.worry__dot{position:relative;width:44px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.worry__dot i{position:absolute;left:0;right:6px;top:12px;height:4px;border-radius:2px;background:var(--line-bone);overflow:hidden}
.worry__dot i::after{content:"";position:absolute;inset:0;background:var(--gold-ink);transform:scaleX(0);transform-origin:left}
.worry__dot.is-active i::after{transform:scaleX(1)}
.worry__dot.is-run i::after{animation:worryfill var(--wdur,4500ms) linear forwards}
.worry.is-paused .worry__dot i::after{animation-play-state:paused}
@keyframes worryfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* buyer chips: a slow marquee (first list readable, three aria-hidden copies for the seamless loop) */
.lookers{margin-top:clamp(24px,4.2svh,44px)}
.lookers__label{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.lookers__track{display:flex;width:max-content;animation:lookmarq 70s linear infinite;will-change:transform}
.lookers{overflow:hidden;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.lookers__list{display:flex;flex:none;gap:14px;list-style:none;margin:0;padding:0 14px 0 0}
.looker{display:inline-flex;align-items:baseline;gap:4px 12px;white-space:nowrap;padding:12px 20px;border:1px solid var(--line-bone);border-radius:14px;font-size:16px;line-height:1.3;background:rgba(255,255,255,.4)}
.looker__job{font-weight:600;color:var(--on-bone)}
.looker__val{font-weight:600;color:var(--gold-ink)}
.lookers:hover .lookers__track{animation-play-state:paused}
@keyframes lookmarq{to{transform:translateX(-50%)}}
.problem__note{margin:clamp(12px,2svh,20px) 0 0;max-width:none;font-size:14px;line-height:1.5;color:var(--on-bone-2)}
@media (prefers-reduced-motion:reduce){
  .lookers{-webkit-mask-image:none;mask-image:none}
  .lookers__track{width:auto;animation:none;display:block}
  .lookers__list{flex-wrap:wrap;padding:0}
  .lookers__list[aria-hidden="true"]{display:none}
}
/* entry: the big number fades in when it can't be counted */
.problem__num--fade{transition:opacity .6s cubic-bezier(.2,.8,.2,1)}
.problem.is-armed .problem__num--fade{opacity:0}
.problem.is-armed.is-in .problem__num--fade{opacity:1}

/* ---- Story: one big phone, three states, beats left, systems right (navy band) ---- */
.story__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4.4svh,40px);justify-items:center}
.story__left{display:contents}
.story__head{order:0;justify-self:start;width:100%;display:grid;gap:12px}
.story__head .kicker{margin:0}
.story__stage{order:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:36px 24px}
.story__rail{order:2}
.story__sys{order:3;width:100%}
.journey__caption{order:4;margin:0;max-width:60ch;text-align:center;font-size:14px;line-height:1.5;color:var(--on-navy-2)}
.story__line{display:none}
.story__stage .phone{width:min(100%,290px)}
.story__rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%}
.beat{position:relative;display:block;width:100%;text-align:left;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.beat__t{display:block;font:600 clamp(18px,2.4vw,26px)/1.15 "Sora",sans-serif;letter-spacing:-0.03em;color:var(--bone)}
.beat__c{display:block;margin-top:4px;font-size:16px;line-height:1.4;color:var(--on-navy-2)}
.beat__bar{display:none}
.story__systitle{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-2)}
.story__systems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (min-width:760px){.story__systems{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sys{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line-navy)}
.sys__icon{display:block;width:24px;height:24px;margin-top:1px;color:var(--gold);transition:color .4s var(--ease)}
.sys__name{margin:0;font:600 17px/1.3 "Sora",sans-serif;letter-spacing:-0.01em;color:var(--gold);transition:color .4s var(--ease)}
.sys__benefit{margin:3px 0 0;font-size:15px;line-height:1.45;color:var(--on-navy-2)}
.sms__typing{display:none}
.diary__title{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.phone--diary .toast{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--bone);color:var(--navy)}
.toast b{display:block;font-size:15px;line-height:1.3;letter-spacing:-0.01em}
.toast span:not(.toast__tick){display:block;margin-top:2px;font-size:13px;color:var(--on-bone-2)}
.toast__tick{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold)}
.toast__tick svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wk{display:grid;gap:6px;margin-top:14px}
.wk__row{display:grid;grid-template-columns:34px repeat(var(--cols,5),minmax(0,1fr));gap:6px;align-items:center}
.wk__row--head span{font-size:12px;font-weight:600;text-align:center;color:var(--on-navy-2)}
.wk__t{font-size:11px;color:var(--on-navy-2)}
.wk__c{position:relative;display:block;height:clamp(32px,5.2svh,44px);border-radius:8px;background:var(--navy);border:1px solid var(--line-navy);overflow:hidden}
.wk__c.is-busy{background:var(--navy-3);border-color:transparent}
.wk__c.is-book::after{content:"";position:absolute;inset:0;background:var(--gold)}
.wk__c.is-book{border-color:var(--gold)}
.diary__rows{margin-top:16px;gap:6px 14px;padding:12px 14px}
.diary__note{margin-top:12px}

/* live (JS on, motion allowed) */
.story--live .story__stage{display:grid;justify-items:center;align-items:start;gap:0}
.story--live .story__stage .phone{grid-area:1/1;width:min(100%,340px);height:clamp(520px,70svh,600px);min-height:0;padding:54px 22px 26px;border-radius:44px;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
.story--live .story__stage .phone.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
.story--live .phone::before{top:18px;width:84px;height:7px}
.story--live .phone__badge{top:-13px;right:26px;padding:7px 12px;font-size:12px}
.story--live .ad__head{grid-template-columns:42px 1fr;column-gap:12px}
.story--live .ad__avatar{width:42px;height:42px}
.story--live .ad__name{font-size:16px}
.story--live .ad__sponsored{font-size:13px}
.story--live .ad__text{margin:14px 0;font-size:15.5px;line-height:1.45}
.story--live .phone--ad{display:flex;flex-direction:column}
.story--live .ad__media{flex:1 1 auto;min-height:0;aspect-ratio:auto;padding:10px}
.story--live .ad__media svg{width:auto;max-width:100%;height:100%}
.story--live .ad__cta{margin-top:14px;padding:14px;font-size:16px}
.story--live .sms__from{font-size:16px;margin-bottom:22px}
.story--live .sms__bubble{font-size:16px;line-height:1.5;padding:14px 16px}
.story--live .sms__meta{font-size:12px}
.story--live .diary__title{font-size:13px}
.story--live .wk{margin-top:18px;gap:8px}
.story--live .wk__row{gap:8px}
.story--live .wk__c{height:clamp(40px,6.4svh,54px)}
.story--live .wk__c.is-book::after{transform:scale(0)}
.story--live .phone--diary.is-active .wk__c.is-book::after{animation:slotfill .5s cubic-bezier(.2,.8,.2,1) .7s both}
.story--live .phone--diary .diary__rows,.story--live .phone--diary .diary__note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.story--live .phone--diary .toast{position:absolute;left:16px;right:16px;bottom:26px;margin:0;padding:16px 18px;box-shadow:0 18px 40px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(34px)}
.story--live .phone--diary.is-active .toast{animation:toastin .55s cubic-bezier(.2,.8,.2,1) 1.5s both}
.story--live .phone--diary.is-active{animation:buzz .3s linear 1.7s 1}
.story--live .toast b{font-size:16px}
@keyframes slotfill{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes toastin{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes buzz{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.story--live .sys:not(.is-lit) .sys__icon{color:var(--navy-3)}
.story--live .sys:not(.is-lit) .sys__name{color:var(--on-navy-2);opacity:.6}
.story--live .sys{transition:opacity .4s var(--ease)}
.story--live .sys__benefit{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.story--live .beat{opacity:.5;transition:opacity .3s var(--ease)}
.story--live .beat.is-active,.story--live .beat:hover,.story--live .beat:focus-visible{opacity:1}
.story--live .beat__bar{display:block;position:absolute;background:var(--gold);transform:scaleX(0);transform-origin:left;pointer-events:none}
.story--live .beat.is-run .beat__bar{animation:beatfillx var(--dur,3500ms) linear forwards}
.story--live .beat.is-full .beat__bar{transform:scaleX(1)}
.story--live.is-paused .beat__bar,.story--live.is-paused .sms__typing i,.story--live.is-paused .sms__bubble{animation-play-state:paused}
@keyframes beatfillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes beatfilly{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* reply state: typing dots, then the message */
.story--live .sms__typing{position:absolute;left:22px;top:122px;display:inline-flex;gap:5px;padding:14px 16px;border-radius:18px 18px 18px 4px;background:var(--navy-3);opacity:0}
.story--live .sms__typing i{width:8px;height:8px;border-radius:50%;background:var(--on-navy-2)}
.story--live .sms__bubble{opacity:0}
.story--live .phone--sms.is-active .sms__typing{animation:typing 1.1s ease-out forwards}
.story--live .phone--sms.is-active .sms__typing i{animation:dotbounce .5s ease-in-out 2}
.story--live .phone--sms.is-active .sms__bubble{animation:bubblein .45s cubic-bezier(.2,.8,.2,1) 1.15s both}
.story--live .phone--sms:not(.is-active) .sms__bubble{opacity:1}
.story--live .sms__meta{opacity:1}
@keyframes typing{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes dotbounce{50%{transform:translateY(-4px)}}
@keyframes bubblein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:960px){
  .story--live .story__grid{grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:center;justify-items:stretch}
  .story--live .story__left{display:flex;flex-direction:column;gap:clamp(16px,2.8svh,28px);order:0}
  .story--live .story__stage{order:1;justify-self:center;position:relative;z-index:1}
  .story--live .story__sys{order:2;position:relative;z-index:1}
  .story--live .story__rail{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
  .story--live .story__head{justify-self:stretch}
  .story--live .beat{padding:11px 0 11px 22px;border-left:2px solid var(--line-navy)}
  .story--live .beat__t{font-size:clamp(28px,2.5vw,34px)}
  .story--live .beat__bar{left:-2px;top:0;bottom:0;width:2px;transform:scaleY(0);transform-origin:top}
  .story--live .beat.is-run .beat__bar{animation-name:beatfilly}
  .story--live .beat.is-full .beat__bar{transform:scaleY(1)}
  .story--live .journey__caption{text-align:left;font-size:14px}
  .story--live .story__systems{grid-template-columns:minmax(0,1fr)}
  .story--live .sys{align-items:center}
  .story--live .story__line{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
  .story__line path{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;opacity:.85}
  .story__line circle{fill:var(--gold);opacity:0}
  .story--live .story__sys .ctarow{margin-top:20px}
}
@media (max-width:959px){
  .story--live .story__grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .story--live .story__stage .phone{height:480px}
  .story--live .story__rail{width:100%;max-width:520px}
  .story--live .beat{padding-top:14px}
  .story--live .beat__t{font-size:15px}
  .story--live .beat__c{font-size:13px}
  .story--live .beat__bar{left:0;right:0;top:0;height:3px;border-radius:3px}
  .story--live .beat::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--line-navy)}
  .story--live .beat__bar{z-index:1}
  .story--live .story__systems{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story--live .sys{padding:8px 0}
  .story--live .sys__name{font-size:15px}
  .story--live .journey__caption{text-align:center}
}

/* The booking button */
.ctarow{display:flex;flex-direction:column;align-items:flex-start}
.ctarow .micro{margin:10px 0 0}
.band--bone .ctarow .micro{color:var(--on-bone-2)}
.story__sys .ctarow{margin-top:20px}

/* ---- How: three stages joined by a gold line, then the sample dashboard (bone band) ---- */
.how__head{display:grid;gap:12px;margin-bottom:clamp(20px,3.4svh,32px)}
.how__head .kicker{margin:0}
.stages{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4svh,32px)}
@media (min-width:900px){.stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}}
.stage{position:relative;display:grid;gap:3px;align-content:start}
.stage__n{position:relative;z-index:1;display:inline-block;justify-self:start;margin-bottom:6px;padding-right:18px;background:var(--bone);font:700 56px/1 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--gold-ink)}
.stage__label{margin:0;font:600 13px/1.3 "Sora",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.stage__t{margin:0;font:700 clamp(22px,2vw,26px)/1.2 "Sora",sans-serif;letter-spacing:-0.03em}
.stage__d{margin:2px 0 0;max-width:38ch;font-size:16px;line-height:1.5;color:var(--on-bone-2)}
@media (min-width:900px){
  .stages::before{content:"";position:absolute;left:0;right:0;top:28px;height:2px;background:var(--gold-ink);transform-origin:0 50%;opacity:.6}
}
.how__dash{max-width:860px;margin:clamp(20px,3.4svh,30px) auto 0}
.how__dash .dash{padding:clamp(12px,1.4vw,16px);gap:10px}
.how__dash .dash__top{font-size:14px}
.how__dash .kpi{padding:10px 14px}
.how__dash .kpi__label{min-height:0;font-size:14px}
.how__dash .kpi__value{font-size:clamp(24px,2.4vw,32px)}
.how__dash .kpi--gold{display:block}
.how__dash .kpi--gold .kpi__value{font-size:clamp(24px,2.6vw,34px)}
@media (min-width:760px){.how__dash .dash__kpis,.how__dash .dash__kpis.is-three{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.how__dash .dash__kpis.is-three .kpi:nth-child(3){grid-column:auto}.how__dash .kpi--gold{grid-column:auto}}
.how__dash .dash__lower{gap:18px}
/* the live-activity feed is left out of the compact dashboard (it stays in the page source) so the section fits one screen */
.how__dash .dash__lower>div:nth-child(2){display:none}
.how__dash .dash__lower{grid-template-columns:minmax(0,1fr)}
.how__dash .bars{height:76px}
.how__dash .dash__legend span:first-child{max-width:70%}
.how__dash .feed{min-height:0;gap:6px}
.how__dash .feed li{padding:8px 12px;font-size:14px}
.how__dash .feed li br{display:none}
.how__dash .feed li b{margin-right:8px}
.how__dash .feed li:nth-child(n+4){display:none}
.how__dash .feed__label{margin-bottom:6px;font-size:13px}
.how__dash .dash__note{margin-top:10px;font-size:14px}
.how__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;margin-top:clamp(12px,2.2svh,20px)}
.how__foot .ctarow{flex:0 0 auto}
.how__close{flex:1 1 340px;margin:0;font:600 clamp(18px,1.6vw,21px)/1.3 "Sora",sans-serif;letter-spacing:-0.02em}
.how__foot .ctarow{flex-direction:row;align-items:center;gap:18px}
.how__foot .ctarow .micro{margin:0}
.how.is-armed .stages::before{transform:scaleX(0)}
.how.is-armed.is-in .stages::before{transform:scaleX(1);transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .2s}
.how.is-armed .stage{opacity:0;transform:translateY(18px)}
.how.is-armed.is-in .stage{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .22s),transform .6s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .22s)}
.how.is-armed .bars i{transform:scaleY(0)}
.how.is-armed.is-in .bars i{transform:none;transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--bi,0) * 60ms)}
.how.is-armed .feed li{opacity:0;transform:translateX(26px)}
.how.is-armed.is-in .feed li{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.8,.2,1) calc(.9s + var(--fi,0) * 130ms),transform .5s cubic-bezier(.2,.8,.2,1) calc(.9s + var(--fi,0) * 130ms)}

/* ---- Deal: the four terms big, founders on one slim row, compare tucked away (navy band) ---- */
.deal__head{display:grid;gap:12px;margin-bottom:clamp(20px,3.4svh,32px)}
.deal__head .kicker{margin:0}
.deal .lede{font-size:clamp(17px,1.5vw,20px)}
.dealterms{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,40px)}
@media (min-width:600px){.dealterms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.dealterms{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.dealterm{padding:16px 0 16px;border-top:1px solid var(--line-navy)}
.dealterm__mark{display:flex;align-items:flex-end;gap:4px;height:28px;margin-bottom:14px}
.dealterm__mark i{display:block;width:9px;background:rgba(243,241,234,.3);transform-origin:50% 100%}
.dealterm__mark i:nth-child(1){height:9px}.dealterm__mark i:nth-child(2){height:18px}.dealterm__mark i:nth-child(3){height:28px;background:var(--gold)}
.dealterm h3{margin:0 0 8px;font:600 clamp(21px,1.8vw,24px)/1.25 "Sora",sans-serif;letter-spacing:-0.025em;color:var(--on-navy)}
.dealterm p{margin:0;font-size:16px;line-height:1.5;color:var(--on-navy-2)}
.deal.is-armed .dealterm__mark i{transform:scaleY(0)}
.deal.is-armed.is-in .dealterm__mark i{transform:none;transition:transform .45s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .14s)}
.deal.is-armed.is-in .dealterm__mark i:nth-child(2){transition-delay:calc(.33s + var(--i) * .14s)}
.deal.is-armed.is-in .dealterm__mark i:nth-child(3){transition-delay:calc(.41s + var(--i) * .14s)}
.foundstrip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;margin-top:4px;padding-top:20px;border-top:1px solid var(--line-navy)}
.foundstrip__people{display:flex;flex-wrap:wrap;gap:12px 32px}
.foundstrip .person{display:flex;align-items:center;gap:14px}
.foundstrip .photo,.foundstrip .photo--initial{width:52px;height:52px;flex:none;aspect-ratio:1/1;padding:0;font-size:22px}
.foundstrip .person b{font-size:18px}
.foundstrip .person span{font-size:15px}
.foundstrip__line{margin:0;flex:1 1 280px;max-width:48ch;font-size:17px;line-height:1.45;color:var(--on-navy)}
.compare-toggle{margin-top:20px;border-top:1px solid var(--line-navy)}
.compare-toggle summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;font:600 17px/1.3 "Sora",sans-serif;letter-spacing:-0.01em;color:var(--on-navy)}
.compare-toggle summary::-webkit-details-marker{display:none}
.compare-toggle summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .3s var(--ease);color:var(--gold)}
.compare-toggle[open] summary::after{transform:rotate(45deg)}
.compare{padding:4px 0 6px}
.compare__title{margin:0 0 8px;max-width:none;font:600 clamp(17px,1.5vw,20px)/1.3 "Sora",sans-serif;letter-spacing:-0.015em;color:var(--on-navy)}
.deal .ledger{border-top:1px solid var(--line-navy)}
.deal .ledger__head,.deal .ledger__row{padding:9px 0;border-bottom-color:var(--line-navy)}
.deal .ledger__head{font-size:13px;color:var(--on-navy-2)}
.deal .ledger--cols-4 .ledger__head span:last-child{color:var(--gold)}
.deal .ledger--cols-4 .ledger__label{font-size:15px;color:var(--on-navy)}
.deal .ledger--cols-4 .ledger__was,.deal .ledger--cols-4 .ledger__mid{font-size:15px;color:var(--on-navy-2)}
.deal .ledger--cols-4 .ledger__now{font-size:16px;font-weight:600;letter-spacing:0;color:var(--on-navy)}
.deal .ledger__was .strike{background:var(--gold)}
@media (min-width:760px){.deal .ledger--cols-4 .ledger__head,.deal .ledger--cols-4 .ledger__row{grid-template-columns:1.05fr 1fr 1fr 1.5fr;gap:4px 24px}}
@media (max-width:759px){.deal .ledger--cols-4 .ledger__was::before,.deal .ledger--cols-4 .ledger__mid::before{color:var(--on-navy-2)}.deal .ledger--cols-4 .ledger__was{text-decoration-color:var(--gold)}}

/* ---- Book + FAQ: big heading and the form, every question full width in two columns ---- */
.final--short{padding:clamp(40px,6.6svh,72px) 0 clamp(36px,5.8svh,56px)}
.final--short .final__blocks{display:none}
.final--short .book{gap:clamp(24px,4vw,64px)}
@media (min-width:1000px){.final--short .book{grid-template-columns:5fr 6fr;align-items:center}}
.final--short .book h2{font-size:clamp(38px,4.4vw,64px);max-width:none}
.final--short .book__list{margin:clamp(16px,3svh,28px) 0 0;gap:10px;font-size:17px}
.final--short .book__alt{margin:18px 0 0;font-size:16px}
.final--short .cal{min-height:0}
.final--short .book__panel{padding:clamp(20px,2.2vw,26px) clamp(22px,3vw,32px);gap:12px}
.final--short .book__form{gap:12px}
@media (min-width:1000px){.final--short [data-book-step="1"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.final--short [data-book-step="1"] .book__steplegend{grid-column:1/-1}}
.final--short .field input,.final--short .field select{min-height:46px}
.final--short .book__disclosure{margin:0;padding:0 clamp(22px,3vw,32px) 18px}
.faqwrap{margin-top:clamp(22px,3.8svh,38px)}
.faqwrap .kicker{color:var(--gold);margin:0 0 12px}
.final--short .faq{max-width:none;border-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,5vw,72px)}
@media (min-width:900px){.final--short .faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq__col{border-top:1px solid var(--line-navy)}
@media (max-width:899px){.faq__col + .faq__col{border-top:0}}
.final--short .faq details{border-bottom-color:var(--line-navy)}
.final--short .faq summary{padding:12px 0;font-size:17px;font-weight:600;letter-spacing:-0.01em}
.final--short .faq details p{padding-bottom:14px;font-size:16px;color:var(--on-navy-2)}
.final--short .faq details p a{color:var(--on-navy)}

/* phones */
@media (max-width:599px){
  .looker{padding:10px 16px;font-size:15px}
  .how__dash .dash__lower>div:nth-child(2){display:none}
  .stage__n{font-size:40px;margin-bottom:2px}
  .stages{gap:20px}
  .dealterm{padding:12px 0}
  .dealterm__mark{height:22px;margin-bottom:8px}
  .hero--centred.hero--short{padding-bottom:84px}
  .story--live .story__stage .phone{height:460px}
}
@media (min-width:1100px){.dealterms[style*="--n:5"] .dealterm h3{font-size:20px}}

/* the short pages' footer links flow in two columns so the whole page stays within its screen budget */
@media (min-width:760px){.foot--short .foot__grid>div:last-child{columns:2;column-gap:28px}.foot--short .foot__grid>div:last-child p{break-inside:avoid;margin-top:0}}

/* ==========================================================================
   FLOATING NAV (desktop >=900px) + HOMEPAGE v5 (6 Oct 2026)
   HOMEPAGE-V5-SPEC.md + the system addendum. Spacing scale used throughout:
   8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Phones keep the burger nav.
   ========================================================================== */

/* ---- Part A: three floating parts (logo, pill of links, gold button) ---- */
@media (min-width:900px){
  .nav:not(.book-nav),.nav:not(.book-nav).is-solid{top:16px;padding-top:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;pointer-events:none}
  .nav:not(.book-nav).is-hidden{transform:none}
  .nav:not(.book-nav) .nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:auto}
  .nav:not(.book-nav) .nav__in>*{pointer-events:auto}
  .nav:not(.book-nav) .logo{grid-column:1;justify-self:start;padding:12px 20px 12px 16px;border:1px solid transparent;border-radius:999px;transition:background-color .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s var(--ease)}
  .nav:not(.book-nav).is-shrunk .logo{background:rgba(16,30,50,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line-navy);padding:8px 16px 8px 14px}
  .nav:not(.book-nav) .nav__links{grid-column:2;display:flex;align-items:center;gap:32px;padding:16px 32px;border:1px solid var(--line-navy);border-radius:999px;background:rgba(16,30,50,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:padding .25s var(--ease),gap .25s var(--ease)}
  .nav:not(.book-nav) .nav__links:empty{display:none}
  .nav:not(.book-nav).is-shrunk .nav__links{padding:10px 28px;gap:28px}
  .nav:not(.book-nav) .nav__links a{color:var(--bone);padding:4px 0;white-space:nowrap}
  .nav:not(.book-nav) .nav__links a:hover,.nav:not(.book-nav) .nav__links a:focus-visible{color:var(--gold)}
  .nav:not(.book-nav) .nav__actions{grid-column:3;justify-self:end}
  .nav:not(.book-nav) .nav__actions .btn{min-height:48px;padding:0 24px;box-shadow:0 8px 24px -8px rgba(11,22,38,.55);transition:min-height .25s var(--ease),padding .25s var(--ease),background .25s var(--ease)}
  .nav:not(.book-nav).is-shrunk .nav__actions .btn{min-height:44px;padding:0 20px}
  .stick-pill,.stick-pill.is-on{display:none}
}
@media (min-width:900px) and (max-width:1099px){
  .nav:not(.book-nav) .nav__links{gap:20px;padding:14px 24px}
  .nav:not(.book-nav).is-shrunk .nav__links{gap:20px;padding:10px 20px}
  .nav:not(.book-nav) .nav__links a{font-size:14px}
  .nav:not(.book-nav) .logo span{font-size:22px}
}
/* phone bar: out of the way while someone types */
.stick.is-kb{transform:translateY(110%)!important}

/* ---- Hero (home): the v3 video hero, left-aligned, proof cards beside it ---- */
.hero--centred.hero--short.hero--home{min-height:min(100svh,960px);padding:clamp(96px,13svh,128px) 0 clamp(48px,8svh,96px)}
.hero--home .hero__grid{display:grid;gap:32px;justify-items:stretch;text-align:left;align-items:center}
.hero--home .hero__copy{text-align:left;min-width:0}
.hero--centred.hero--home h1{text-align:left;max-width:none;margin:0;font-size:clamp(40px,min(5.1vw,9.4svh),78px);line-height:1.04}
.hero--centred.hero--home .hero__sub{text-align:left;margin:24px 0 0;max-width:52ch;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--on-navy)}
.hero--centred.hero--home .hero__cta{justify-content:flex-start;gap:16px 32px}
.hero--home .hero__cta-wrap{margin-top:32px}
.hero--home .hero__price{margin:24px 0 0;font-size:15px;line-height:1.6}
.hero__proofs{list-style:none;margin:0;padding:0;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);padding-bottom:8px}
.hero__proofs::-webkit-scrollbar{display:none}
.pcard{flex:0 0 min(78%,280px);scroll-snap-align:start}
.pcard__in{padding:20px 24px;border:1px solid rgba(243,241,234,.16);border-radius:16px;background:rgba(16,30,50,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 48px -24px rgba(0,0,0,.6);animation:pcardbob 7s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -2.3s)}
.pcard__n{margin:0;font:700 clamp(32px,3vw,44px)/1.1 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--gold)}
.pcard__t{margin:8px 0 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--bone)}
.pcard__s{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--on-navy-2)}
@keyframes pcardbob{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.hero--home.hero--arm .pcard{opacity:0}
/* Hero dossier (Ben approved 6 Oct 2026, reworked after owner feedback): the
   playbook page on the right with the three proof cards fanned down its left
   edge, each clipped on. Phones and tablets get their own version in the block above. */
.dos{display:none}
.hero__stage{min-width:0}
.hero__price--m{display:none}
/* the dossier's lines: shared by desktop and phones (each bar is one or two lines of blacked-out text) */
.dos__rows{display:grid;gap:12px;margin-top:22px;position:relative}
.dos__row{position:relative;height:32px}
.dos__bar{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.4,0,.2,1)}
.dos__bar b{display:block;height:11px;border-radius:2px;background:var(--ink,rgba(11,22,38,.86))}
.dos__txt{display:block;width:100%;font:500 12px/1.32 "Sora",sans-serif;color:var(--navy);opacity:0;filter:blur(6px);transition:opacity .7s ease,filter .7s ease}
.dos__row.is-open .dos__bar{clip-path:inset(0 0 0 102%)}
.dos__row.is-open .dos__txt{opacity:1;filter:none}
/* Phones and tablets: a short playbook page (header, four lines, stamp) with the proof
   cards fanned tightly down its left edge, overlapping the lower lines. The first screen
   shows the headline, sub, CTAs and the top of the page peeking in. */
@media (max-width:999px){
  .hero--centred.hero--home h1{font-size:clamp(34px,10vw,40px)}
  .hero--short.hero--home,.hero--centred.hero--short.hero--home{padding-top:80px;padding-bottom:18px}
  .hero--centred.hero--home .hero__sub{margin-top:16px;font-size:16px;line-height:1.5}
  .hero--home .hero__cta-wrap{margin-top:14px}
  .hero--centred.hero--home .hero__cta{gap:0 24px}
  .hero--home .hero__cta .btn--ghost{min-height:36px}
  .hero--home .hero__price:not(.hero__price--m){display:none}
  .hero--home .hero__grid{gap:16px}
  .hero__stage{position:relative;width:100%;max-width:430px;margin-inline:auto}
  .dos{display:block;position:relative;width:calc(100% - 12px);margin:0 0 0 auto}
  .dos__page{--ink:rgba(11,22,38,.86);position:relative;height:414px;padding:16px 20px 0;transform:rotate(-2deg);background:linear-gradient(180deg,#EEEAE0,var(--bone-2));border:1px solid var(--line-bone);border-radius:6px;box-shadow:0 30px 54px -26px rgba(0,0,0,.65),0 2px 0 rgba(11,22,38,.05);overflow:hidden}
  .dos__top{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;padding-bottom:10px;border-bottom:1px solid var(--line-bone)}
  .dos__title{margin:0;font:700 11.5px/1.3 "Sora",sans-serif;letter-spacing:.12em;color:var(--navy);white-space:nowrap}
  .dos__meta{margin:0;font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;color:var(--on-bone-2);white-space:nowrap}
  .dos__rows{gap:12px;margin-top:14px}
  .dos__row:nth-child(n+5){display:none}
  .dos__row:nth-child(n+3) .dos__txt{display:none}
  .dos__stamp{position:absolute;right:12px;top:140px;margin:0;width:116px;transform:rotate(-12deg);pointer-events:none}
  .dos__stamp span{display:block;padding:5px 6px;border:2px solid var(--gold-ink);border-radius:4px;font:700 10px/1.3 "Sora",sans-serif;letter-spacing:.12em;text-align:center;text-transform:uppercase;color:var(--gold-ink);background:rgba(233,229,218,.92)}
  .hero__proofs{position:absolute;left:0;right:0;top:0;height:414px;display:block;overflow:visible;margin:0;padding:0;pointer-events:none}
  .pcard{position:absolute;flex:none;width:max(222px,66%)}
  .pcard:nth-child(1){left:0;top:138px;width:188px;rotate:-2deg;--clip:28px}
  .pcard:nth-child(2){left:36px;top:224px;rotate:1.5deg;--clip:54px}
  .pcard:nth-child(3){left:4px;top:310px;rotate:-1.5deg;--clip:34px}
  .pcard__in{position:relative;padding:13px 16px 12px;border-radius:14px;background:rgba(14,26,44,.95);border-color:rgba(243,241,234,.2);box-shadow:0 20px 36px -18px rgba(0,0,0,.75)}
  .pcard__in::before{content:"";position:absolute;z-index:2;top:-10px;right:var(--clip,30px);width:13px;height:30px;transform:rotate(6deg);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 34' fill='none' stroke='%23CFAE6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11.5 10v16a4.5 4.5 0 0 1-8 0V6.5a3.2 3.2 0 0 1 6.4 0V25a1.7 1.7 0 0 1-3.4 0V11'/></svg>") no-repeat center/contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
  .pcard__n{font-size:26px;line-height:1.05}
  .pcard__t{margin-top:3px;font-size:14px;line-height:1.3}
  .pcard__s{margin-top:2px;font-size:13px;line-height:1.35;white-space:nowrap}
  .hero__price--m{display:block;margin:8px 0 0;font-size:14px;line-height:1.45}
  .hero--home{overflow:clip}
}
@media (max-width:389px){
  .hero--centred.hero--home .hero__sub{font-size:15px;line-height:1.45}
  .hero__price--m{font-size:13px}
  .dos__page{padding-inline:18px}
  .dos__title{font-size:10px;letter-spacing:.08em}
  .dos__meta{font-size:9.5px;letter-spacing:.02em}
}
@media (max-width:999px) and (prefers-reduced-motion:no-preference){
  .dos__page{animation:dosin .6s cubic-bezier(.2,.8,.2,1) .4s both}
  .dos__stamp{animation:dosstamp .3s cubic-bezier(.2,.9,.25,1.2) .1s both}
  .pcard__in{animation:pcardland .45s cubic-bezier(.2,.8,.2,1) calc(.4s + var(--k) * .08s) both,pcardbob2 7s ease-in-out calc(.95s + var(--k) * .08s) infinite alternate}
  /* the stamp and cards wait until they scroll into view (home.js adds .is-land) */
  .hero__stage.is-armed:not(.is-land) .dos__stamp,.hero__stage.is-armed:not(.is-land) .pcard__in{animation-play-state:paused}
}
@media (min-width:1000px){
  .hero--home .hero__grid{grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);gap:32px}
  .hero--centred.hero--home h1{font-size:clamp(40px,min(calc((min(100vw,1280px) - 2 * var(--gutter) - 32px) * .47 / 8.8),9.4svh),68px)}
  .hero--centred.hero--home .hero__sub{max-width:none}
  .hero__stage{position:relative;width:100%;height:462px}
  .dos{display:block;position:absolute;top:0;right:0;width:430px;margin:0}
  .dos__page{--ink:rgba(11,22,38,.86);position:relative;height:384px;padding:26px 24px 0 118px;transform:rotate(-2deg);background:linear-gradient(180deg,#EEEAE0,var(--bone-2));border:1px solid var(--line-bone);border-radius:6px;box-shadow:0 38px 70px -28px rgba(0,0,0,.65),0 2px 0 rgba(11,22,38,.05)}
  .dos__top{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 0 -94px;padding-bottom:12px;border-bottom:1px solid var(--line-bone)}
  .dos__title{margin:0;font:700 12px/1.3 "Sora",sans-serif;letter-spacing:.14em;color:var(--navy);white-space:nowrap}
  .dos__meta{margin:0;font:500 11.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;color:var(--on-bone-2);white-space:nowrap}
  .dos__stamp{position:absolute;right:22px;bottom:20px;margin:0;width:156px;transform:rotate(-12deg);pointer-events:none}
  .dos__stamp span{display:block;padding:8px 10px;border:2px solid var(--gold-ink);border-radius:4px;font:700 12px/1.3 "Sora",sans-serif;letter-spacing:.14em;text-align:center;text-transform:uppercase;color:var(--gold-ink);background:rgba(233,229,218,.85)}
  .hero__proofs{position:absolute;inset:0;display:block;overflow:visible;margin:0;padding:0;pointer-events:none;scroll-snap-type:none}
  .pcard{position:absolute;flex:none;width:258px;opacity:1!important;transform:none!important}
  .pcard:nth-child(1){left:0;top:64px;rotate:-2.5deg;--clip:34px}
  .pcard:nth-child(2){left:16px;top:198px;rotate:1.5deg;--clip:60px}
  .pcard:nth-child(3){left:2px;top:332px;rotate:-1.5deg;--clip:40px}
  .pcard__in{position:relative;padding:15px 20px 16px;border-radius:14px;background:rgba(14,26,44,.94);border-color:rgba(243,241,234,.2);box-shadow:0 26px 44px -18px rgba(0,0,0,.75)}
  .pcard__in::before{content:"";position:absolute;z-index:2;top:-14px;right:var(--clip,30px);width:16px;height:36px;transform:rotate(6deg);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 34' fill='none' stroke='%23CFAE6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11.5 10v16a4.5 4.5 0 0 1-8 0V6.5a3.2 3.2 0 0 1 6.4 0V25a1.7 1.7 0 0 1-3.4 0V11'/></svg>") no-repeat center/contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
  .pcard__n{font-size:38px}
  .pcard__t{margin-top:6px;font-size:15px;line-height:1.3}
  .pcard__s{margin-top:3px;font-size:14px;line-height:1.35;white-space:nowrap}
}
/* the entrance: headline first, then the dossier settles, the stamp thunks in, the
   proof cards land one by one and bob gently. Every start state is its own
   animation fill, so with no JS (or reduced motion) the composition just sits there. */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .dos__page{animation:dosin .7s cubic-bezier(.2,.8,.2,1) .9s both}
  .dos__stamp{animation:dosstamp .35s cubic-bezier(.2,.9,.25,1.2) 1.8s both}
  .pcard__in{animation:pcardland .55s cubic-bezier(.2,.8,.2,1) calc(2.3s + var(--k) * .12s) both,pcardbob2 7s ease-in-out calc(2.95s + var(--k) * .12s) infinite alternate}
}
@keyframes dosin{from{opacity:0;transform:translateY(24px) rotate(-4deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes dosstamp{from{opacity:0;transform:rotate(-12deg) scale(1.15)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes pcardland{from{opacity:0;transform:translateY(-22px) scale(1.04)}to{opacity:1;transform:none}}
@keyframes pcardbob2{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media (max-width:999px){.hero--centred.hero--short.hero--home{align-items:flex-start;padding-top:104px;padding-bottom:32px}}
@media (prefers-reduced-motion:reduce){.pcard__in{animation:none}}

/* ---- Services marquee ---- */
.svcmarq{background:var(--navy-2);border-block:1px solid var(--line-navy);overflow:hidden;padding:24px 0}
.svcmarq__track{display:flex;width:max-content;animation:svcmarq 110s linear infinite;will-change:transform}
.svcmarq__list{display:flex;flex:none;list-style:none;margin:0;padding:0}
.svcmarq__list li{white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--bone)}
.svcmarq__list li::after{content:"◆";content:"◆" / "";margin:0 32px;color:var(--gold);font-size:.8em}
.svcmarq:hover .svcmarq__track{animation-play-state:paused}
@keyframes svcmarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .svcmarq__track{width:auto;animation:none;display:block;padding-inline:var(--gutter)}
  .svcmarq__list{flex-wrap:wrap;justify-content:center;gap:8px 0}
  .svcmarq__list[aria-hidden="true"]{display:none}
}

/* ---- #why: not a normal agency (bone) ---- */
.why{padding:clamp(56px,4.8vw,72px) 0}
.why__top{display:grid;gap:32px}
@media (min-width:960px){.why__copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
.why__head{display:grid;gap:24px}
.why__head .kicker{margin:0}
.why .h2{font-size:clamp(36px,4.6vw,68px);line-height:1.06;max-width:none}
.why__a{display:block}
.why__b{display:block;margin-top:.12em;color:var(--gold-ink)}
.why__copy p{margin:0;max-width:60ch;font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--on-bone-2)}
.why__copy p:last-child{color:var(--on-bone)}
.whyrows{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;gap:32px 48px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.whyrows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.whyrows{grid-template-columns:repeat(3,minmax(0,1fr))}}
.whyrow{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;padding-bottom:24px}
.whyrow__n{grid-row:span 2;font:700 36px/1.15 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--gold-ink)}
.whyrow h3{margin:0 0 8px;font:700 clamp(20px,1.7vw,24px)/1.25 "Sora",sans-serif;letter-spacing:-0.02em}
.whyrow p{margin:0;max-width:40ch;font-size:16px;line-height:1.6;color:var(--on-bone-2)}
.whyrow__line{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-ink);opacity:.7;transform-origin:0 50%}
.why.is-armed .whyrow{opacity:0;transform:translateY(20px)}
.why.is-armed .whyrow__line{transform:scaleX(0)}
.why.is-armed.is-in .whyrow{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .1s),transform .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .1s)}
.why.is-armed.is-in .whyrow__line{transform:scaleX(1);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i) * .1s)}

/* ---- #system: the showpiece (navy) ---- */
.system{padding:clamp(56px,4.8vw,72px) 0;overflow:hidden}
.syshead{display:grid;gap:24px;margin-bottom:clamp(32px,4vw,48px)}
.syshook{margin:0 0 24px;text-align:center;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--gold)}
.syshead .kicker{margin:0}
.system .h2{font-size:clamp(38px,4.8vw,70px);line-height:1.06;max-width:none}
.syshead__a,.syshead__b{display:block}
.syshead__b{color:var(--gold);margin-top:.12em}
.system .lede{max-width:62ch;line-height:1.65}
.sysclose{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:clamp(48px,6vw,64px);padding-top:32px;border-top:1px solid var(--line-navy)}
.sysclose__line{margin:0;flex:1 1 360px;max-width:32ch;font:700 clamp(24px,2.6vw,36px)/1.2 "Sora",sans-serif;letter-spacing:-0.03em}

/* the vertical flow: phones, tablets, and the static list for reduced motion */
.mach{display:none}
.sysflow__list{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:24px}
.sysstage,.sysextra{position:relative;padding:24px;border:1px solid var(--line-navy);border-radius:12px;background:var(--navy-2)}
.sysstage__head{display:flex;align-items:center;gap:12px}
.sysstage__n{font:700 14px/1 "Sora",sans-serif;letter-spacing:.08em;color:var(--gold)}
.sysstage__icon{width:28px;height:28px;flex:none;color:var(--gold)}
.sysstage__head h3{margin:0;font:700 clamp(19px,2vw,22px)/1.25 "Sora",sans-serif;letter-spacing:-0.02em}
.sysstage__count{margin-left:auto;flex:none;min-width:32px;height:32px;padding:0 8px;display:grid;place-items:center;border-radius:999px;background:var(--gold);color:var(--navy);font:700 14px/1 "Sora",sans-serif}
.sysstage__line{margin:12px 0 16px;max-width:52ch;font-size:16px;line-height:1.6;color:var(--on-navy-2)}
.sysstage__pop{display:none;margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--gold)}
.sysstage__pop span{margin-right:8px;padding:2px 8px;border-radius:999px;background:var(--bone);color:var(--on-bone-2);font-size:12px;font-weight:700}
.svcs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 16px}
.svc{padding:8px 16px;border:1px solid var(--line-navy);border-radius:999px;font-size:15px;line-height:1.4;color:var(--on-navy)}
.svc__l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.svcmore{margin-top:16px}
.svcmore>summary,.pricemore>summary,.faqmore>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px;font:600 16px/1.4 "Sora",sans-serif;color:var(--gold)}
.svcmore>summary::-webkit-details-marker,.pricemore>summary::-webkit-details-marker,.faqmore>summary::-webkit-details-marker{display:none}
.svcmore>summary::before,.pricemore>summary::before,.faqmore>summary::before{content:"+";font-size:20px;line-height:1}
.svcmore[open]>summary::before,.pricemore[open]>summary::before,.faqmore[open]>summary::before{content:"\2212"}
.svcmore .svcs{margin-top:12px}
.sysflow__again{display:flex;align-items:center;gap:16px;margin:24px 0;font:600 18px/1.4 "Sora",sans-serif;color:var(--gold)}
.sysflow__againart{width:56px;flex:none}
.sysflow__againart svg{width:100%;height:auto;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sysflow__extras{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.sysextra{border-color:rgba(207,174,107,.45)}
@media (max-width:1023px){
  .sysflow__list{padding-left:40px}
  .sysflow__list::before{content:"";position:absolute;left:11px;top:16px;bottom:16px;width:2px;background:var(--gold);opacity:.7;transform-origin:50% 0}
  .sysstage__dot{position:absolute;left:-40px;top:28px;width:24px;height:24px;border-radius:50%;background:var(--navy);border:2px solid var(--gold)}
  .sysstage__dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--gold)}
  .sysflow__again{padding-left:0}
  .system.is-flowing .sysflow__list::after{content:"";position:absolute;left:5px;top:0;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px 4px rgba(207,174,107,.7);animation:flowdown 6s cubic-bezier(.4,0,.6,1) infinite}
  .system.is-flowing .sysstage__pop{display:block}
  .system.is-armed:not(.is-in) .sysflow__list::before{transform:scaleY(0)}
  .system.is-armed.is-in .sysflow__list::before{transform:scaleY(1);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
  .system.is-armed .sysstage{opacity:0;transform:translateY(20px)}
  .system.is-armed.is-in .sysstage{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .12s),transform .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .12s)}
  .system.is-paused .sysflow__list::after{animation-play-state:paused}
}
@keyframes flowdown{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 14px);opacity:0}}
@media (min-width:1024px){
  .sysflow__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .sysflow__again{justify-content:center}
  .sysflow__extras{grid-template-columns:minmax(0,1fr)}
}
/* the calm machine: desktop (site/home.js runs it; the panels are in the HTML) */
@media (min-width:1024px){
  .js .mach{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);column-gap:clamp(64px,6vw,96px);align-items:center}
  .js .sysflow{display:none}
}
.mach__col{container-type:inline-size;min-width:0;display:grid;justify-items:center;gap:28px}
.mach__stage{--padt:82px;--padb:64px;--lw:132px;--rw:calc((50cqw - 54px - var(--lw)) / .866);--rh:calc((100vh - 580px) / 2);--r:clamp(88px,min(var(--rw),var(--rh)),188px);position:relative;width:100%;height:calc(2 * var(--r) + var(--padt) + var(--padb))}
.mach__glow{position:absolute;left:50%;top:calc(var(--padt) + var(--r));width:calc(var(--r) * 1.5);height:calc(var(--r) * 1.5);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(207,174,107,.16),rgba(207,174,107,.05) 60%,rgba(207,174,107,0));pointer-events:none}
.mring{position:absolute;left:50%;top:calc(var(--padt) + var(--r));width:calc(2 * var(--r));height:calc(2 * var(--r));transform:translate(-50%,-50%);overflow:visible}
.mring{--k:.667}
.mring circle{fill:none}
.mring__track{stroke:var(--line-navy);stroke-width:calc(1.5px * var(--k));stroke-dasharray:1;stroke-dashoffset:0}
.mring__arc{stroke:var(--gold);stroke-width:calc(2.5px * var(--k));stroke-linecap:butt;opacity:.75}
.mring__arc--soft{stroke-width:calc(9px * var(--k));opacity:.14}
.mlight{position:absolute;left:50%;top:calc(var(--padt) + var(--r));width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 24px 6px rgba(226,200,143,.5);opacity:0;transition:opacity .8s ease;pointer-events:none;will-change:transform}
.mlight.is-on{opacity:1}
.mcore{position:absolute;left:50%;top:calc(var(--padt) + var(--r));width:calc(var(--r) * 1.05);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;text-align:center;pointer-events:none}
.mcore__you{font:700 40px/1 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--on-navy)}
.mcore__doing{font-size:16px;line-height:1.4;text-wrap:balance;color:var(--on-navy-2)}
.mnodes{list-style:none;margin:0;padding:0}
.mnode{position:absolute;left:calc(50% + var(--r) * var(--sx));top:calc(var(--padt) + var(--r) + var(--r) * var(--sy));width:58px;height:58px;transform:translate(-50%,-50%)}
.mnode__btn{position:relative;display:block;width:58px;height:58px;padding:0;border:1px solid var(--line-navy);border-radius:50%;background:var(--navy-2);color:var(--gold);cursor:pointer;font:inherit;transition:border-color .4s ease,box-shadow .4s ease,color .4s ease}
.mnode.is-on .mnode__btn{border-color:var(--gold);box-shadow:0 0 22px rgba(207,174,107,.3)}
.mnode__btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
.mnode__icon{position:absolute;inset:0;display:grid;place-items:center}
.mnode__icon svg{width:26px;height:26px;transition:filter .4s ease}
.mnode.is-on .mnode__icon svg{filter:drop-shadow(0 0 6px rgba(226,200,143,.6))}
.mnode__lab{position:absolute;display:block;width:max-content;max-width:var(--lw);text-align:left}
.mnode__lab i{display:block;font:700 13px/1.2 "Sora",sans-serif;font-style:normal;letter-spacing:.12em;color:var(--gold)}
.mnode__lab b{display:block;margin-top:2px;font:600 17px/1.3 "Sora",sans-serif;letter-spacing:-0.01em;color:var(--on-navy)}
.mnode--top .mnode__lab{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);text-align:center;max-width:none}
.mnode--bottom .mnode__lab{left:50%;top:calc(100% + 10px);transform:translateX(-50%);text-align:center;max-width:none}
.mnode--bottom .mnode__lab i{display:none}
.mnode--bottom .mnode__lab b{margin-top:0}
.mnode--right .mnode__lab{left:calc(100% + 16px);top:50%;transform:translateY(-50%)}
.mnode--left .mnode__lab{right:calc(100% + 16px);top:50%;transform:translateY(-50%);text-align:right}
.mach__engine{margin:0;width:100%;max-width:none;white-space:normal;text-align:center;font-size:15px;line-height:1.5;color:var(--on-navy-2)}
.mach__enginebtn{display:inline;margin-left:8px;padding:8px 0;border:0;background:none;color:var(--gold);font:600 15px/1.4 "Sora",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(207,174,107,.45)}
.mach__enginebtn:hover,.mach__enginebtn[aria-pressed="true"]{text-decoration-color:var(--gold)}
.mach__enginebtn:focus-visible,.mpanel__resume:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.mpanel{position:relative;min-width:0;padding:28px 34px;border:1px solid var(--line-navy);border-radius:16px;background:var(--navy-2)}
.mpanel__stack{display:grid}
.mp{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.mp.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .08s,transform .4s ease .08s,visibility 0s}
.mp__count{margin:0;font:700 14px/1 "Sora",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-2)}
.mp__count span{color:var(--gold)}
.mp__name{margin:10px 0 8px;font:700 clamp(26px,2.4vw,32px)/1.15 "Sora",sans-serif;letter-spacing:-0.02em}
.mp__line{margin:0 0 20px;max-width:44ch;font-size:16px;line-height:1.5;color:var(--on-navy-2)}
.mp__list{list-style:none;margin:0;padding:0;display:grid;row-gap:12px;font-size:16px;line-height:1.35}
.mp__list--2{display:block;column-count:2;column-gap:28px}
.mp__list li{position:relative;padding-left:20px;color:var(--on-navy)}
.mp__list--2 li{break-inside:avoid;margin-bottom:12px}
.mp__list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mp__sample{margin:16px 0 0;font-size:15px;font-style:italic;line-height:1.4;color:var(--gold)}
.mpanel__resume{position:absolute;right:28px;top:26px;z-index:2;min-height:44px;padding:0 8px;border:0;background:none;color:var(--gold);font:600 15px "Sora",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.mach.is-armed:not(.is-live) .mring__track{stroke-dashoffset:1}
.mach.is-live .mring__track{transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.mach.is-armed:not(.is-live) .mnode,.mach.is-armed:not(.is-live) .mcore,.mach.is-armed:not(.is-live) .mach__glow{opacity:0}
.mach.is-armed:not(.is-live) .mnode{transform:translate(-50%,calc(-50% + 10px))}
.mach.is-live .mnode{transition:opacity .6s ease calc(.6s + var(--i) * 80ms),transform .6s ease calc(.6s + var(--i) * 80ms)}
.mach.is-live .mcore,.mach.is-live .mach__glow{transition:opacity .9s ease .4s}
@media (max-width:1199px){.mach__stage{--lw:104px}.mnode__lab b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.mp,.mp.is-on{transition:none}.mlight{display:none}.mnode__btn,.mnode__icon svg{transition:none}}

/* ---- #built: our own proof (navy-2) ---- */
.built5{padding:clamp(56px,4.8vw,72px) 0 clamp(64px,6vw,96px)}
.built5 .head{margin-bottom:clamp(32px,4vw,48px);gap:24px}
.built5 .h2{max-width:none}
/* moment 1: ARCHIVE, full width */
.built5__archive{display:grid;gap:clamp(32px,3.4vw,48px)}
.built5__label{margin:0;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--gold)}
.built5__nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.bignum{display:grid;gap:8px;align-content:start;min-width:0}
.bignum strong{display:block;font:700 clamp(32px,8.4vw,56px)/1.05 "Sora",sans-serif;letter-spacing:-0.045em;color:var(--gold);white-space:nowrap}
.bignum>span{display:block;font-size:16px;line-height:1.5;color:var(--on-navy-2)}
@media (min-width:700px){.bignum strong{font-size:56px}}
@media (min-width:1024px){.built5__nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px}.bignum strong{font-size:clamp(40px,4.2vw,64px)}}
.built5__chart{min-width:0}
.built5 .browserframe__chart{aspect-ratio:auto;height:clamp(240px,62vw,300px);padding:22px 24px 22px 44px}
@media (min-width:1024px){.built5 .browserframe__chart{height:clamp(280px,24vw,340px);padding:24px 32px 24px 56px}}
.built5 .archivechart__wrap,.built5 .archivechart__wrap .chart{height:100%}
.built5 .archivechart__readout{min-height:1.5em;font-size:15px}
.built5__cap{max-width:72ch;margin:0;font-size:16px;line-height:1.65;color:var(--on-navy-2)}
/* moment 2: Collectly */
.built5__app{display:grid;gap:40px;margin-top:clamp(48px,5vw,72px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--line-navy);align-items:center}
.built5__phone{order:-1;display:flex;justify-content:center}
.built5__apptext{display:grid;gap:20px;justify-items:start;min-width:0}
.built5__apptext .kicker{margin:0}
.built5__h3{margin:0;font:700 clamp(28px,3vw,40px)/1.15 "Sora",sans-serif;letter-spacing:-0.03em;max-width:18ch}
.built5__body{margin:0;max-width:46ch;font-size:18px;line-height:1.6;color:var(--on-navy-2)}
.built5__apptext .built__link{font-size:17px;font-weight:600}
@media (min-width:900px){.built5__app{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(64px,8vw,128px)}.built5__phone{order:0}}
.pframe{width:clamp(190px,56vw,220px);aspect-ratio:600/1298;border:6px solid var(--navy-3);border-radius:32px;overflow:hidden;background:var(--navy);box-shadow:0 32px 64px -24px rgba(0,0,0,.7)}
@media (min-width:900px){.pframe{width:clamp(190px,16vw,220px)}}
.pframe__video{display:block;width:100%;height:100%;object-fit:cover}
/* close */
.built5__end{display:grid;justify-items:center;gap:28px;margin-top:clamp(48px,5vw,72px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--line-navy);text-align:center}
.built5__close{margin:0;max-width:20ch;font:700 clamp(36px,4.5vw,64px)/1.1 "Sora",sans-serif;letter-spacing:-0.04em}
.built5__close span{color:var(--gold)}
.built5__end .ctarow{align-items:center}

/* ---- #how (home): the three stages, plus the close ---- */
.how--home{padding:clamp(44px,3.6vw,52px) 0 clamp(44px,3.6vw,52px)}
.howpb{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "steps"}
.howpb .how__head{grid-area:head;margin:0;gap:16px}
.howpb__visual{grid-area:visual;min-width:0;display:flex;justify-content:center}
.howpb__steps{grid-area:steps;min-width:0}
@media (min-width:1000px){
  .howpb{grid-template-columns:minmax(0,64fr) minmax(0,36fr);grid-template-areas:"head visual" "steps visual";column-gap:clamp(48px,5vw,72px);row-gap:20px;align-items:start}
  .howpb__visual{justify-content:flex-end;align-self:center}
}
.how--home .h2{max-width:none;font-size:clamp(30px,3vw,42px);line-height:1.1}
.how--home .how__lede{margin:0;max-width:56ch;font-size:17px;line-height:1.6;color:var(--on-bone-2)}
.how__join{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.how--home .stage__d{line-height:1.55;font-size:16px}
.how--home .stage__t{margin-top:2px}
.how--home .stages{gap:28px}
@media (min-width:900px){.how--home .stages{gap:clamp(24px,2.4vw,36px)}}
.how--home .how__close{margin:clamp(20px,2vw,28px) 0 0;font:600 clamp(18px,1.6vw,21px)/1.3 "Sora",sans-serif;letter-spacing:-0.02em}
/* "classified" playbook page */
.pb{margin:0;width:100%;max-width:420px}
.pb__page{position:relative;transform:rotate(-1.5deg);padding:24px 26px 80px;background:var(--bone-2);border:1px solid var(--line-bone);border-radius:6px;box-shadow:0 28px 48px -24px rgba(11,22,38,.35),0 2px 0 rgba(11,22,38,.04)}
.pb__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line-bone)}
.pb__title{margin:0;font:700 13px/1.3 "Sora",sans-serif;letter-spacing:.16em;color:var(--navy)}
.pb__meta{margin:0;font:500 12px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;color:var(--on-bone-2)}
.pb__rows{display:grid;gap:12px}
.pb__row{position:relative;height:32px}
.pb__row--p{height:11px}
.pb__bar{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.4,0,.2,1)}
.pb__bar b{display:block;height:11px;border-radius:2px;background:rgba(11,22,38,.88)}
.pb__txt{position:relative;display:block;width:100%;font:500 13px/1.25 "Sora",sans-serif;color:var(--navy);opacity:0;filter:blur(6px);transition:opacity .5s ease,filter .5s ease}
.pb__row.is-open .pb__bar{clip-path:inset(0 0 0 102%)}
.pb__row.is-open .pb__txt{opacity:1;filter:none}
.pb__stamp{position:absolute;right:18px;bottom:16px;margin:0;width:150px;transform:rotate(-12deg);pointer-events:none}
.pb__stamp span{display:block;padding:7px 10px;border:2px solid var(--gold-ink);border-radius:4px;font:700 12px/1.3 "Sora",sans-serif;letter-spacing:.14em;text-align:center;text-transform:uppercase;color:var(--gold-ink);background:rgba(233,229,218,.85)}
/* phones: four bars only, so the card stays short */
@media (max-width:899px){.pb__row:nth-child(n+5){display:none}.pb__page{padding:20px 20px 62px}.pb__title{font-size:11.5px;letter-spacing:.1em;white-space:nowrap}.pb__meta{font-size:11px;white-space:nowrap}.pb__top{margin-bottom:14px;padding-bottom:10px}.pb__stamp{width:130px;right:14px}.pb__stamp span{font-size:10.5px;padding:5px 6px}}
.how.is-armed:not(.is-in) .pb__stamp{opacity:0;transform:rotate(-12deg) scale(1.15)}
.how.is-armed.is-in .pb__stamp{opacity:1;transform:rotate(-12deg);transition:opacity .35s ease .9s,transform .35s cubic-bezier(.2,.8,.2,1) .9s}
@media (prefers-reduced-motion:reduce){.pb__bar,.pb__txt{transition:none}}
/* tried an agency / DIY */
.tried{margin-top:clamp(28px,3vw,40px);padding:clamp(20px,2.2vw,28px) clamp(24px,3.4vw,44px);border:1px solid var(--line-bone);border-radius:6px;background:var(--bone-2);display:grid;gap:20px;align-items:center}
.tried__h{margin:0;font:700 clamp(22px,2.1vw,28px)/1.2 "Sora",sans-serif;letter-spacing:-0.03em;max-width:26ch}
.tried__b{display:grid;gap:14px;justify-items:start}
.tried__b p{margin:0;max-width:60ch;font-size:16px;line-height:1.6;color:var(--on-bone-2)}
.tried__a{display:inline-block;padding:10px 0;font-weight:700;color:var(--gold-ink);text-decoration:underline;text-underline-offset:4px}
@media (min-width:1000px){.tried{grid-template-columns:minmax(0,38fr) minmax(0,62fr);column-gap:clamp(40px,5vw,72px)}}

/* ---- #who: one compact row of industry names ---- */
.who5{padding:clamp(48px,6vw,64px) 0}
.who5__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-bottom:32px}
.who5 .h2{font-size:clamp(30px,3.4vw,48px);max-width:none}
.who5__all{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--on-bone);text-underline-offset:5px}
.indrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.indrow__track{display:flex;width:max-content;animation:indmarq 100s linear infinite;will-change:transform}
.indrow__list{display:flex;flex:none;gap:16px;padding-right:16px}
.indrow__a{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid var(--line-bone);border-radius:999px;background:rgba(255,255,255,.5);color:var(--on-bone);font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;text-decoration:none;transition:border-color .2s,background .2s}
.indrow__a:hover,.indrow__a:focus-visible{border-color:var(--gold-ink);background:#fff}
.indrow:hover .indrow__track{animation-play-state:paused}
@keyframes indmarq{to{transform:translateX(-50%)}}
@media (max-width:899px),(prefers-reduced-motion:reduce){
  .indrow{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .indrow::-webkit-scrollbar{display:none}
  .indrow__track{width:max-content;animation:none}
  .indrow__list[aria-hidden="true"]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .indrow{overflow:visible}
  .indrow__track{width:auto}
  .indrow__list{flex-wrap:wrap;padding:0}
}

/* ---- #pricing: three plans across ---- */
.pricing5{padding:clamp(56px,4.8vw,72px) 0}
.pricing5__head{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,48px)}
.pricing5 .h2{max-width:none;font-size:clamp(36px,4.4vw,60px)}
.pricing5 .lede{max-width:60ch;line-height:1.65}
.plans{display:grid;gap:24px}
@media (min-width:760px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{padding:24px 32px;border:1px solid var(--line-navy);border-radius:12px;background:var(--navy)}
.plan--mid{border-color:var(--gold)}
.plan h3{margin:0;font:700 24px/1.25 "Sora",sans-serif;letter-spacing:-0.02em}
.plan__price{margin:12px 0 0;font-size:16px;line-height:1.4;color:var(--on-navy-2)}
.plan__price strong{display:block;font:700 clamp(36px,3.4vw,48px)/1.1 "Sora",sans-serif;letter-spacing:-0.04em;color:var(--gold)}
.pricemore{margin-top:24px}
.pricemore p{margin:8px 0 0;max-width:64ch;font-size:16px;line-height:1.65;color:var(--on-navy-2)}
.termsmini{display:grid;gap:24px;margin-top:32px;padding-top:32px;border-top:1px solid var(--line-navy)}
@media (min-width:700px){.termsmini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.termsmini{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.termmini .term__n{display:none}
.termmini h3{margin:0 0 8px;font:600 18px/1.35 "Sora",sans-serif;letter-spacing:-0.015em}
.termmini p{margin:0;font-size:16px;line-height:1.6;color:var(--on-navy-2)}

/* ---- founders: one slim strip ---- */
.founders5{padding:clamp(48px,5vw,64px) 0}
.founders5__in{display:grid;gap:24px;align-items:center}
@media (min-width:1000px){.founders5__in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}}
.founders5__body{display:grid;gap:24px}
.founders5__h{margin:0;font:700 clamp(26px,2.6vw,36px)/1.15 "Sora",sans-serif;letter-spacing:-0.03em;text-wrap:balance}
.founders5 .foundstrip__people{display:flex;flex-wrap:wrap;gap:16px 32px}
.founders5 .person{display:flex;align-items:center;gap:16px}
.founders5 .photo,.founders5 .photo--initial{width:56px;height:56px;flex:none;aspect-ratio:1/1;padding:0;font-size:24px;border-radius:4px}
.founders5 .person b{font-size:18px}
.founders5 .person span{display:block;font-size:15px;line-height:1.5}
.founders5__p{margin:0;max-width:64ch;font-size:16px;line-height:1.65;color:var(--on-navy-2)}

/* ---- FAQ: five up front, two columns, the rest behind "More questions" ---- */
.faq5{padding:clamp(56px,4.8vw,72px) 0}
.faq5 .head{margin-bottom:clamp(32px,4vw,48px)}
.faq5 .h2{max-width:none}
.faq--home{max-width:none;border-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 64px}
@media (min-width:900px){.faq--home{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq--home .faq__col{border-top:1px solid var(--line-bone)}
@media (max-width:899px){.faq--home .faq__col+.faq__col{border-top:0}}
.faq--home summary{min-height:56px;padding:16px 0;font-size:clamp(17px,1.4vw,19px);line-height:1.4}
.faq--home details p{padding:0 0 24px;font-size:16px;line-height:1.65;max-width:60ch}
.faqmore{margin-top:32px}
.faqmore>summary{color:var(--gold-ink)}
.faqmore .faq{margin-top:16px}

/* ---- book (home) ---- */
.final--home{padding:clamp(56px,4.8vw,72px) 0}
.final--home .book__list{gap:12px;line-height:1.6}

/* ---- hero video: data saver ---- */
@media (prefers-reduced-data:reduce){.hero__video,.pframe__video{display:none}}

@media (min-width:900px){.foot{padding:48px 0}}

.termstrip{list-style:none;margin:32px 0 0;padding:32px 0 0;border-top:1px solid var(--line-navy);display:flex;flex-wrap:wrap;gap:12px 32px}
.termstrip li{position:relative;padding-left:20px;font:600 17px/1.4 "Sora",sans-serif;letter-spacing:-0.01em}
.termstrip li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--gold)}
.pricing5 .termsmini{margin-top:16px;padding-top:24px}

/* tap targets, text sizes, footer (mobile pass + height budget) */
@media (min-width:900px){
  .nav:not(.book-nav) .nav__links{padding:6px 32px}
  .nav:not(.book-nav).is-shrunk .nav__links{padding:4px 28px}
  .nav:not(.book-nav) .nav__links a{padding:10px 0}
  .foot{padding:40px 0 32px}
  .foot__legal{margin-top:24px}
}
@media (max-width:899px){.logo{padding:9px 0}}
.built__link{display:inline-block;padding:12px 0}
.worry__dot{height:44px}.worry__dot i{top:20px}
.syshook,.micro,.archivechart__readout,.archivechart__cap,.stage__label,.book__progress{font-size:15px}
@media (max-width:599px){
  .pill,.lookers__label,.qs,.problem__note,.beat__c,.hero--short .hero__price{font-size:15px}
  .micro{font-size:15px}
}

.why__copy{display:grid;gap:16px}
@media (min-width:960px){.why__copy{gap:48px}}
.bignum strong .countnum{display:inline;font:inherit;letter-spacing:inherit;color:inherit}

/* #why: six beats as 3x2 (desktop), 2x3 (tablet), 1 column (phone) */
.whyrows{gap:40px 48px}
.whyrow h3{font-size:clamp(20px,1.6vw,22px)}
.whyrow p{font-size:16px;line-height:1.6}

/* #system on desktop: compact header so the whole section sits near one screen */
@media (min-width:1024px){
  .system{padding:36px 0 36px}
  .system .wrap{position:relative}
  .syshead{gap:10px;margin-bottom:20px}
  .system .h2{font-size:clamp(32px,3.1vw,44px);line-height:1.1}
  .system .lede{max-width:none;font-size:17px;line-height:1.5}
  .sysclose .ctarow{flex:none}
  .syshook{position:absolute;right:var(--gutter);top:0;margin:0;text-align:right}
  .sysclose{margin-top:20px;padding-top:20px;flex-wrap:nowrap}
  .sysclose__line{flex:1 1 auto;max-width:none;font-size:clamp(20px,1.9vw,28px)}
}

/* #why rotating word (Ben, 6 Oct 2026): "grows your business / sales / bookings…" */
.why__c{display:block;color:var(--gold-ink)}
.rotw{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.08em;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.rotw__w{grid-area:1/1;white-space:nowrap;transform:translateY(105%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.rotw__w.is-on{transform:none;opacity:1}
.rotw__w.is-out{transform:translateY(-105%);opacity:0}
@media (prefers-reduced-motion:reduce){.rotw__w{transition:none}}

/* ARCHIVE chart: lift the "first £25k month" label above the line (Ben, 6 Oct 2026).
   The dot stays on the line; the label sits up and to the left (over the flat early
   months), joined by a short gold leader, so it never crosses the line. */
.archivechart__milestone--mid{flex-direction:column-reverse;align-items:flex-end;gap:0;transform:translate(calc(-100% + 3px),calc(-100% + 3px))}
.archivechart__milestone--mid em{position:relative;margin-bottom:34px;margin-right:-3px}
.archivechart__milestone--mid em::after{content:"";position:absolute;right:3px;top:100%;width:1px;height:34px;background:linear-gradient(var(--gold),rgba(207,174,107,.15))}

/* Hero rotating word (Ben, 6 Oct 2026): same slide as #why. No width is ever
   set here, so the box stays as wide as the widest word and the headline never
   re-wraps. The full stop travels inside each word. */
.rotw--hero{transition:none;padding-bottom:.12em;margin-bottom:-.12em}
.rotw--hero .rotw__w{color:inherit}

/* #pricing: what is in each plan (Ben approved 6 Oct 2026) */
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column;padding:28px 28px 28px}
.plan--mid{background:linear-gradient(180deg,rgba(207,174,107,.08),rgba(207,174,107,0) 38%),var(--navy)}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.plan__tag{flex:none;padding:7px 12px;border:1px solid var(--line-navy);border-radius:999px;font:600 14px/1 "Sora",sans-serif;letter-spacing:.02em;white-space:nowrap;color:var(--gold-2)}
.plan__tag--pop{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.plan__for{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--on-navy)}
.plan__lead{margin:20px 0 0;font:600 15px/1.4 "Sora",sans-serif;color:var(--gold)}
.plan__list{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px;align-content:start;flex:1 1 auto}
.plan__list li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:var(--on-navy)}
.plan__list li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CFAE6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3.2L13 4.8'/></svg>") no-repeat center/16px 16px}
.plan__cta{width:100%;white-space:normal;padding:0 18px;line-height:1.25}
.btn--ghost-box{border:1px solid rgba(243,241,234,.28);text-decoration:none;color:var(--bone);padding:0 18px;min-height:56px}
.btn--ghost-box:hover{border-color:var(--gold);color:var(--gold-2)}
.plans__note{margin:28px 0 0;max-width:78ch;font-size:16px;line-height:1.65;color:var(--on-navy-2)}
@media (min-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1000px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}.plan{padding:32px 30px 30px}}
.termsband{padding:28px 0}
.termsband .termstrip{margin:0;padding:0;border-top:0}

/* #book on the homepage (Ben, 6 Oct 2026): "Let's talk about your growth." */
.book__h2--home{margin:0;line-height:1.04;letter-spacing:-0.035em}
.book__h2--home .book__a,.book__h2--home .book__b{display:block}
.book__h2--home .book__b{color:var(--gold)}
.book__body{margin:clamp(18px,2.4svh,26px) 0 0;max-width:52ch;font-size:18px;line-height:1.6;color:var(--on-navy)}
.final--home .book__list{margin-top:clamp(20px,3svh,28px);gap:14px;font-size:17px;line-height:1.5;color:var(--on-navy)}
.final--home .book__list li{gap:14px}
.final--home .book__list li::before{width:16px;height:16px;margin-top:.3em;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CFAE6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3.2L13 4.8'/></svg>") no-repeat center/16px 16px}

/* #how, shorter (Ben, 6 Oct 2026): a smaller playbook card, tighter steps. Desktop fits one screen. */
.how--home{padding:clamp(36px,3vw,44px) 0}
@media (min-width:900px){
  .howpb{row-gap:14px}
  .how--home .stage__t{font-size:22px}
  .how--home .stage__d{font-size:15.5px;line-height:1.5}
  .how--home .how__close{margin-top:16px}
  .how--home .tried{margin-top:28px;padding-block:18px}
}
@media (max-width:899px){
  .how--home{padding:32px 0}
  .howpb{gap:20px}
  .howpb .how__head{gap:10px}
  .how--home .how__lede{font-size:16px;line-height:1.55}
  .how__join{margin-bottom:10px}
  .how--home .stages{gap:16px}
  .how--home .stage{grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;gap:4px 12px}
  .how--home .stage__n{font-size:30px;margin:0;padding-right:0}
  .how--home .stage__t{font-size:21px;margin:0}
  .how--home .stage__d{grid-column:1/-1;margin:0;max-width:none;font-size:15px;line-height:1.5}
  .how--home .how__close{margin-top:14px;font-size:18px}
  .how--home .tried{margin-top:22px;padding:18px 20px;gap:12px}
  .how--home .tried__b{gap:8px}
  .how--home .tried__b p{font-size:15px;line-height:1.55}
  .how--home .tried__a{padding:4px 0}
}
@media (max-width:389px){.pb__title{font-size:10px;letter-spacing:.06em}.pb__meta{font-size:10px}.pb__page{padding-inline:18px}}

/* ===== Industry pages match the homepage (INDUSTRY-MATCH-HOME-SPEC.md, 6 Oct 2026) =====
   #how on the industry pages is the homepage playbook section (same classes: how how--home);
   the sample dashboard sits under it and the in-page button is centred. */
.how--ind .how__foot{justify-content:center;margin-top:clamp(18px,2.6svh,26px)}
.how--ind .how__dash{margin-top:clamp(22px,3svh,32px)}
@media (max-width:759px){
  .how--ind .how__dash .dash__kpis.is-three .kpi:nth-child(3){grid-column:auto}
  .how--ind .how__dash .dash__kpis.is-three .kpi--gold{grid-column:auto}
  .how--ind .how__dash .dash__kpis:not(.is-three) .kpi--gold{grid-column:1/-1}
  .how--ind .how__dash .bars{height:60px}
}
.deal__head{margin-bottom:clamp(20px,3.4svh,32px)}

/* ===== Industry pages, round 2 (INDUSTRY-ROUND2-SPEC.md, 6 Oct 2026) ===== */
/* 1. Hero: the free missed-enquiries check panel (glass, reuses .check) */
.fcheck{max-width:700px;margin-inline:auto;padding:16px 20px;gap:6px;text-align:left}
.fcheck__t{margin:0;font:700 clamp(19px,1.7vw,22px)/1.25 "Sora",sans-serif;letter-spacing:-0.02em;color:var(--on-navy)}
.fcheck__s{margin:0 0 6px;font-size:15px;line-height:1.4;color:var(--on-navy-2)}
.fcheck .check__row{align-items:end}
@media (min-width:640px){.fcheck .check__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}
.fcheck .micro{margin:2px 0 0;font-size:13.5px;line-height:1.45}
.fcheck__err{color:var(--on-navy)}
.fcheck__after{margin:12px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;font-size:15px;line-height:1.4;color:var(--on-navy)}
.fcheck__scarce{font-weight:600}
.fcheck__alt{color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.hero--short .fcheck{margin-top:clamp(14px,2.4svh,22px)}
.book__nearly{margin:0 0 12px;padding:10px 14px;border:1px solid var(--gold);border-radius:6px;font-size:15px;line-height:1.45;color:var(--gold)}
/* 2. Problem: more air between the giant stat and the worry */
@media (min-width:960px){
  .problem__cols{grid-template-columns:minmax(0,480px) minmax(0,540px);justify-content:space-between;column-gap:clamp(64px,8vw,140px)}
  .problem__fears .worry{max-width:520px}
}
/* 3. Story: faster autoplay (ad 2.2s, reply 2.2s with typing dots about 0.8s, booked 2.8s) */
.story--live .phone--sms.is-active .sms__typing{animation:typing .8s ease-out forwards}
.story--live .phone--sms.is-active .sms__typing i{animation:dotbounce .4s ease-in-out 2}
.story--live .phone--sms.is-active .sms__bubble{animation:bubblein .4s cubic-bezier(.2,.8,.2,1) .8s both}
.story--live .phone--diary.is-active .wk__c.is-book::after{animation:slotfill .4s cubic-bezier(.2,.8,.2,1) .35s both}
.story--live .phone--diary.is-active .toast{animation:toastin .45s cubic-bezier(.2,.8,.2,1) .9s both}
.story--live .phone--diary.is-active{animation:buzz .3s linear 1.05s 1}
/* 4. The deal as promise rows (About-style): rule draws, blocks rise, statement rises out of a mask */
.deal--rows .deal__head{margin-bottom:clamp(6px,1.6svh,16px)}
.dealrow{position:relative;display:grid;gap:12px 48px;align-items:center;padding:clamp(22px,3.4svh,32px) 0}
.dealrow__rule{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(207,174,107,.35));opacity:.75;transform-origin:0 50%}
.dealrow__lead{display:grid;gap:14px;justify-items:start;min-width:0}
.dealrow__mark{display:flex;align-items:flex-end;gap:5px;height:36px}
.dealrow__mark i{display:block;width:9px;background:#3A4E6C;transform-origin:50% 100%}
.dealrow__mark i:nth-child(1){height:13px}.dealrow__mark i:nth-child(2){height:24px}.dealrow__mark i:nth-child(3){height:36px;background:var(--gold)}
.dealrow__t{margin:0;font:700 clamp(30px,3.8vw,56px)/1.06 "Sora",sans-serif;letter-spacing:-0.045em;color:var(--on-navy);text-wrap:balance}
.dealrow__mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.dealrow__line{display:block}
.dealrow__d{margin:0;max-width:42ch;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--on-navy-2)}
@media (min-width:900px){
  .dealrow{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .dealrow__lead{display:flex;align-items:center;gap:clamp(18px,2vw,28px)}
  .dealrow__mark{flex:none}
}
.dealrow.is-armed .dealrow__rule{transform:scaleX(0)}
.dealrow.is-armed .dealrow__mark i{transform:scaleY(0)}
.dealrow.is-armed .dealrow__line{transform:translateY(110%)}
.dealrow.is-armed .dealrow__d{opacity:0;transform:translateY(18px)}
.dealrow.is-armed.is-in .dealrow__rule{transform:none;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.dealrow.is-armed.is-in .dealrow__mark i{transform:none;transition:transform .6s cubic-bezier(.2,.8,.2,1) .1s}
.dealrow.is-armed.is-in .dealrow__mark i:nth-child(2){transition-delay:.22s}
.dealrow.is-armed.is-in .dealrow__mark i:nth-child(3){transition-delay:.34s}
.dealrow.is-armed.is-in .dealrow__line{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) .2s}
.dealrow.is-armed.is-in .dealrow__d{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1) .35s,transform .8s cubic-bezier(.2,.8,.2,1) .35s}

/* ===== Round 2 finish (6 Oct 2026): tighter deal rows so the short pages stay within ~6.5 screens ===== */
.deal--rows{padding-block:clamp(40px,5svh,56px)}
.deal--rows .deal__head{margin-bottom:0}
.dealrow{padding:clamp(18px,2.6svh,26px) 0;gap:10px 48px}
.dealrow__t{font-size:clamp(28px,3.3vw,48px);line-height:1.08}
@media (min-width:900px){.dealrow{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
@media (max-width:899px){.dealrow{padding:22px 0}.dealrow__lead{gap:12px}}

/* ===== Industry pages, round 3 (INDUSTRY-ROUND3-SPEC.md, 6 Oct 2026) ===== */
/* Booking note above step 1 (hidden once the form moves on to step 2 or 3) */
.book__time{margin:0;font-size:15px;line-height:1.45;color:var(--on-navy-2)}
.book__form:has(.book__step[data-book-step="1"][hidden]) .book__time{display:none}

/* 2. Pain -> fix: the pain line gets a gold strike drawn through it, then the fix rises in under it */
.painfix{display:grid;justify-items:center;gap:clamp(8px,1.4svh,14px);margin:0 auto clamp(26px,4.4svh,44px);text-align:center}
.painfix__pain{margin:0;font:700 clamp(28px,3.4vw,48px)/1.12 "Sora",sans-serif;letter-spacing:-0.035em;color:var(--on-bone);text-wrap:balance}
.painfix__txt{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 56%/100% max(3px,.09em);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.painfix__fix{margin:0;font:600 clamp(22px,2.4vw,34px)/1.2 "Sora",sans-serif;letter-spacing:-0.025em;color:var(--gold-ink);text-wrap:balance;max-width:30ch}
.painfix.is-armed .painfix__txt{background-size:0% max(3px,.09em)}
.painfix.is-armed .painfix__fix{opacity:0;transform:translateY(14px)}
.painfix.is-armed.is-in .painfix__txt{background-size:100% max(3px,.09em);transition:background-size .7s cubic-bezier(.65,0,.35,1)}
.painfix.is-armed.is-in .painfix__fix{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1) .8s,transform .6s cubic-bezier(.2,.8,.2,1) .8s}

/* 1. Calculator: "What are missed enquiries costing you?" */
.cost{padding:clamp(36px,5.4svh,52px) 0}
.cost__grid{display:grid;gap:28px}
@media (min-width:900px){.cost__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(64px,7vw,120px);align-items:center}}
.cost__head{display:grid;gap:10px;margin-bottom:clamp(12px,2.2svh,20px)}
.cost .h2{font-size:clamp(28px,3.2vw,44px);line-height:1.08;max-width:none}
.cost__sliders{display:grid;gap:4px}
.slr__row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.slr__l{font-size:16px;font-weight:600;line-height:1.35;color:var(--on-navy)}
.slr__n{display:inline-flex;align-items:center;gap:3px;flex:none;font:600 16px "Sora",sans-serif;color:var(--gold)}
.slr__num{width:5ch;min-height:36px;padding:0 8px;border:1px solid var(--line-navy);border-radius:6px;background:var(--navy);color:var(--on-navy);font:600 16px "Sora",sans-serif;text-align:right;-moz-appearance:textfield;appearance:textfield}
[data-slr="val"] .slr__num{width:8ch}
.slr__num::-webkit-inner-spin-button,.slr__num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.slr__num:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.slr__track{position:relative;padding-top:24px}
.slr__bub{position:absolute;top:0;left:clamp(28px,calc(12px + var(--f,0) * (100% - 24px)),calc(100% - 28px));transform:translateX(-50%);padding:1px 9px;border-radius:999px;background:var(--gold);color:var(--navy);font:700 15px/1.5 "Sora",sans-serif;white-space:nowrap;pointer-events:none}
.slr__rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:0;padding:0;background:transparent;cursor:pointer}
.slr__rng::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--gold) calc(12px + var(--f,0) * (100% - 24px)),#1E3050 0)}
.slr__rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;border:3px solid var(--navy);background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.slr__rng::-moz-range-track{height:8px;border-radius:999px;background:#1E3050}
.slr__rng::-moz-range-progress{height:8px;border-radius:999px;background:var(--gold)}
.slr__rng::-moz-range-thumb{box-sizing:border-box;width:24px;height:24px;border-radius:50%;border:3px solid var(--navy);background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.slr__rng:focus{outline:none}
.slr__rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--navy-2),0 0 0 5px var(--gold-2)}
.slr__rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--navy-2),0 0 0 5px var(--gold-2)}
.cost__out{display:grid;gap:14px;justify-items:center;text-align:center}
.cost__card{width:100%;padding:clamp(22px,2.6vw,32px) clamp(18px,2vw,28px);border:1px solid var(--line-navy);border-radius:8px;background:linear-gradient(180deg,rgba(207,174,107,.09),rgba(207,174,107,0) 55%),var(--navy)}
.cost__big{margin:0;font:700 clamp(54px,6.6vw,96px)/1 "Sora",sans-serif;letter-spacing:-0.05em;color:var(--gold);min-height:1em}
.cost__unit{margin:8px 0 0;font:600 clamp(19px,1.7vw,24px)/1.3 "Sora",sans-serif;letter-spacing:-0.02em;color:var(--on-navy)}
.cost__jobs{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--on-navy-2)}
.cost__jobs b{color:var(--on-navy)}
.cost__fine{margin:0;font-size:15px;line-height:1.45;color:var(--on-navy-2)}
.cost__static{margin:0;max-width:60ch;font-size:16px;line-height:1.6;color:var(--on-navy-2)}
.js .cost__static,.js .cost__plain{display:none}
.no-js .cost__sliders,.no-js .codo{display:none}
/* the odometer (same idea as the About page, own classes) */
.codo{display:inline-flex;align-items:flex-start;height:1em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:top}
.codo__s{display:block;height:1em;line-height:1}
.codo__d{display:block;position:relative;height:1em;overflow:hidden;padding:0 .02em;margin:0 -.02em}
.codo__strip{display:flex;flex-direction:column;will-change:transform}
.codo__strip i{display:block;height:1em;line-height:1;font-style:normal}
@media (max-width:899px){
  .cost__head{justify-items:center;text-align:center}
  .cost__head .kicker{justify-content:center}
  .cost__out{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.painfix__txt,.painfix__fix{transition:none}}
/* long totals shrink to fit the card instead of overflowing */
.cost__card{container-type:inline-size}
@supports (width:1cqw){.cost__big{font-size:min(clamp(54px,6.6vw,96px),calc(100cqw / (var(--len,7) * .64)))}}
.deal--rows .deal__head{margin-bottom:clamp(14px,2.2svh,22px)}
/* phones: the stat column must not grow past the screen (the long description line was being cut off at the right edge) */
.problem__stats{grid-template-columns:minmax(0,1fr)}
@media (max-width:899px){.story .ctarow{justify-content:center}}