/* ============================================================
   BARLO DIGITAL — home.css · the flight over the file (redesign round, 2026-10-03)
   The homepage only. The waterworks film is fixed behind the whole document
   (css/world.css, js/flight.js). This file composes the document over it:

     hero        the head of the canal: headline, the field you pour into, the asks
     trust       where the canal opens: the four figures, the standards, the marquees
     the leaks   a ledger, three rows, priced live in the visitor's dollars (home.js)
     router      an index of situations, one row each
     the audit   the head holds while the six deliverables pass it (sticky split)
     process     four steps along one lit channel
     receipts    an evidence wall: one month large, three beside it, every shot opens
     speed       a dial that fills as you scroll through it (home.js)
     systems     an index that holds, seven panels that pass it, each with its own
                 hologram (js/holo.js)
     proof       plain type in the dark tunnel
     peak        the reservoir lights, the figure whole (a clear window)
     pricing     three audits; founder, the path after, the FAQ, the control room

   Hard edges, hairlines, tabular figures, one accent. No coloured side borders.
   ============================================================ */

body.home{background:var(--ink)}
body.home .wf-scrim{--scrim:.5}

/* ---------- every section ground gives way to the world ---------- */
body.home #hero,body.home section,body.home .sec-glow,body.home .marquee-block,body.home .trust-band{background:transparent!important}
body.home .sec-glow::before,body.home #results::before,body.home #audit::before,body.home #testimonials::before,
body.home #stay::before,body.home #process::before,body.home #services::before{display:none}
body.home section{scroll-margin-top:96px;padding:clamp(72px,10vw,132px) 0}
body.home .sec-head h2,body.home .sec-head .lead,body.home #book h2,body.home #book .lead,
body.home .speed-copy h2,body.home .founder-body h2{text-shadow:0 1px 22px rgba(7,9,15,.85),0 0 2px rgba(7,9,15,.6)}
body.home .h-sec{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.035em}
body.home .sec-head .lead{color:#C9CFDA;max-width:62ch}

/* plates: dark glass with an edge of light, used only where the copy is dense */
body.home .plate,body.home .deliv,body.home .case,body.home .step,body.home .story,body.home .wedge,
body.home .faq,body.home .disclose,body.home .offer-copy,body.home .stay-body,body.home .pricing-note,
body.home .founder-body,body.home .speed-copy,body.home .router-list{
  background-color:rgba(8,11,18,.9);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9)}

/* contrast over film (tools/contrast.mjs, brightest 5% of what sits behind each line):
   small lines get a ground of their own, heads get a dark pool */
body.home .badge,body.home .credit,body.home .wedge .credit,body.home .step-day{background:rgba(7,9,15,.9)}
body.home .click-trigger{display:table;background:rgba(7,9,15,.82);padding:6px 12px;border-radius:var(--rad-sm);color:#C3CAD6}
body.home .click-trigger.center{margin-left:auto;margin-right:auto}
body.home .rail li{background:rgba(7,9,15,.8);padding:5px 10px;border-radius:var(--rad-sm);color:#C3CAD6}
body.home .sec-head{position:relative}
/* the pool stays inside the wrap's 24px gutter: anything wider widened the phone layout */
body.home .sec-head::before{content:"";position:absolute;inset:-36px -24px -30px -24px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 40% 50%,rgba(7,9,15,.78) 0%,rgba(7,9,15,.5) 55%,rgba(7,9,15,0) 100%)}
body.home .sec-head.center::before{background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(7,9,15,.78) 0%,rgba(7,9,15,.5) 55%,rgba(7,9,15,0) 100%)}
body.home .stat-card,body.home .wedge{transform:none}
body.home .wedge:hover{transform:none}

/* ---------- the hero: the head of the canal ---------- */
#hero{min-height:100svh;padding:132px 0 40px;overflow:visible}
/* #hero is a column flexbox, and auto side margins switch off stretch: without an
   explicit width the wrap shrink-wraps to the lead's longest line and runs off a phone */
#hero > .wrap{width:100%}
#hero::before{display:none}
#hero .hero-copy{max-width:700px;position:relative}
#hero .hero-copy::before{content:"";position:absolute;inset:-40px -60px -30px -48px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 68% at 34% 50%,rgba(7,9,15,.82) 0%,rgba(7,9,15,.55) 52%,rgba(7,9,15,0) 100%)}
#hero .h-hero{text-shadow:0 2px 34px rgba(7,9,15,.7);letter-spacing:-.04em}
#hero .lead{color:#C3CAD6;margin:22px 0 26px}

/* the field you pour into */
.pour{margin:0 0 26px;max-width:520px}
.pour label{display:block;font-family:var(--font-d);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--volt);margin-bottom:10px}
.pour-field{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--rad-sm);background:rgba(7,9,15,.72);
  transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.pour-field::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--volt);transform-origin:0 50%;
  transform:scaleX(var(--pour,0));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pour-field:focus-within{border-color:var(--volt);box-shadow:0 0 0 3px rgba(198,241,53,.18)}
.pour-field span{display:grid;place-items:center;padding:0 4px 0 18px;font-family:var(--font-d);font-size:1.5rem;font-weight:700;color:var(--volt)}
.pour-field input{flex:1;min-width:0;min-height:58px;border:0;background:none;color:var(--text);font-family:var(--font-d);font-size:1.5rem;font-weight:700;
  letter-spacing:-.01em;padding:10px 12px;font-variant-numeric:tabular-nums;outline:none}
.pour-field input::placeholder{color:rgba(244,242,236,.38);font-weight:500;font-size:1.05rem;letter-spacing:.01em}
.pour-field em{display:grid;place-items:center;padding:0 18px;font-style:normal;color:var(--mut);font-size:.9rem}
.pour-note{font-size:.8rem;color:var(--mut);margin-top:9px}
.pour-echo{font-family:var(--font-d);font-size:.92rem;color:var(--text);margin-top:6px;min-height:1.4em;font-variant-numeric:tabular-nums}
.pour-echo:empty{display:none}

/* ---------- the flow: the incision, carried along the nav ---------- */
/* once a figure is poured in, the mark it runs from is lit */
.has-fig body.home nav .logo .mark{box-shadow:0 0 0 1px rgba(198,241,53,.6),0 0 22px rgba(198,241,53,.5)}
/* the channel runs along the nav's bottom edge from the mark and covers nothing; the
   figure itself is read out inside the document (.pour-read) */
#flow{pointer-events:none}
#flow .flow-line{position:fixed;z-index:999;opacity:0;transition:opacity .35s ease;top:75px;left:0;right:0;max-width:var(--wrap);margin:0 auto;padding:0 24px;height:3px}
#flow.on .flow-line{opacity:1}
#flow .flow-ch{position:absolute;left:24px;right:24px;top:0;height:3px;background:rgba(244,242,236,.12);
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
#flow .flow-fill{position:absolute;inset:0;background:var(--volt);transform-origin:0 50%;transform:scaleX(var(--flow,0));
  box-shadow:0 0 12px rgba(198,241,53,.6)}
/* at the cracks the 20–40% band shows: 60–80% hatched (may be leaking), 80–100% drained */
#flow .flow-band{position:absolute;top:0;bottom:0;left:60%;width:40%;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,transparent 0 50%,rgba(7,9,15,.92) 50% 100%),
             repeating-linear-gradient(-68deg,rgba(7,9,15,.9) 0 3px,transparent 3px 6px)}
#flow.is-leak .flow-band{opacity:1}
#flow .flow-tick{position:absolute;top:-4px;width:1px;height:11px;background:var(--text);opacity:0;transition:opacity .4s}
#flow.is-ticks .flow-tick{opacity:.85}
@media(max-width:720px){#flow .flow-line{padding:0 12px}#flow .flow-ch{left:12px;right:12px}}

/* ---------- the readouts: the poured figure, priced where the page talks about it ---------- */
.pour-read{position:relative;max-width:760px;margin:34px 0 8px;padding:22px 26px 22px;
  background:rgba(7,9,15,.92);border:1px solid var(--line-strong);border-radius:var(--rad);
  box-shadow:inset 0 2px 0 var(--volt),0 26px 60px -32px rgba(0,0,0,.9)}
.pour-read.center{margin-left:auto;margin-right:auto;text-align:center}
.pour-read[hidden]{display:none}
.pr-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pour-read.center .pr-head{justify-content:center}
.pr-k{font-family:var(--font-d);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--volt)}
.pr-at{font-size:.76rem;color:var(--mut);letter-spacing:.02em}
.pr-fig{display:block;font-family:var(--font-d);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.pr-fig small{font-size:.4em;font-weight:500;color:var(--mut);margin-left:6px;letter-spacing:0}
.pr-bar{position:relative;height:10px;margin:16px 0 14px;background:var(--volt);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.pr-bar i{position:absolute;top:0;bottom:0}
.pr-bar .pr-keep{left:0;width:60%}
.pr-bar .pr-maybe{left:60%;width:20%;background:repeating-linear-gradient(-68deg,#0B0F17 0 3px,rgba(198,241,53,.55) 3px 6px)}
.pr-bar .pr-gone{left:80%;width:20%;background:#1A2230}
@media(prefers-reduced-motion:no-preference){.pr-bar{animation:prgrow .9s cubic-bezier(.23,1,.32,1) both;transform-origin:0 50%}}
@keyframes prgrow{from{transform:scaleX(.08)}}
.pr-line{font-size:.97rem;color:#C9CFDA;max-width:62ch}
.pour-read.center .pr-line{margin:0 auto}
.pr-line b{color:var(--text)}
.pr-note{font-size:.78rem;color:var(--mut);margin-top:6px}
.pour-read.is-empty{background:rgba(7,9,15,.8);box-shadow:inset 0 1px 0 rgba(198,241,53,.45)}
.pr-go{margin-top:14px}

/* ---------- windows: three stretches of clear film ----------
   Margins, never markup. js/flight.js lifts the scrim across each one (the root lists
   them) and publishes --window-<id>.
     after the hero   the canal, before the first word of the document
     before #pricing  out of the sluice: the reservoir lights up (the peak)
     before #book     through the window into the control room */
body.home main{margin-top:55vh}
body.home #pricing{margin-top:115vh}
body.home #book{margin-top:70vh}

/* ---------- trust: where the canal opens ---------- */
body.home .trust-band{padding:34px 0 10px;background:linear-gradient(180deg,rgba(7,9,15,0) 0%,rgba(7,9,15,.82) 18%,rgba(7,9,15,.86) 100%)!important}
body.home .trust-band .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 28px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
body.home .trust-band .metric{background:rgba(8,11,18,.9);padding:22px 22px 20px;position:relative}
body.home .trust-band .metric::before{content:"";position:absolute;left:22px;top:0;width:22px;height:2px;background:var(--volt);transform:rotate(var(--cut));transform-origin:0 0;border-radius:0}
body.home .trust-band .metric b{display:block;font-family:var(--font-d);font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.04em;line-height:1;color:var(--text)}
body.home .trust-band .metric > span{display:block;margin-top:8px;font-size:.84rem;color:var(--mut)}
body.home .trust-band .marquee-label,body.home .marquee-block .marquee-label{display:table;margin-left:auto;margin-right:auto;background:rgba(7,9,15,.86);padding:6px 12px;border-radius:var(--rad-sm)}
body.home .marquee{background:rgba(8,11,18,.82)}
body.home .marquee-block{padding-bottom:10px}

/* ---------- the leaks: a ledger ---------- */
body.home .ledger{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line-strong)}
body.home .ledger-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,4vw,64px);align-items:baseline;
  padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,30px);border-bottom:1px solid var(--line-strong);background:rgba(7,9,15,.78)}
body.home .ledger-row b{font-family:var(--font-d);font-size:clamp(2.8rem,7vw,5.6rem);line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
body.home .ledger-row b .unit{font-size:.36em;letter-spacing:0;margin-left:4px;color:var(--mut)}
body.home .ledger-row p{color:#C9CFDA;font-size:1.02rem;max-width:56ch}
body.home #problem .hero-ctas{margin-top:34px}
body.home #problem .click-trigger{margin-top:14px}

/* ---------- router: an index of situations ---------- */
body.home #router{padding-top:24px}
body.home .router-head{max-width:640px;margin-bottom:22px;position:relative}
body.home .router-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.03em;margin:4px 0 8px}
body.home .router-head p:last-child{color:#C9CFDA}
body.home .router-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:6px 24px}
body.home .route{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:12px 2px;
  border-bottom:1px solid var(--line);color:var(--text);font-family:var(--font-d);font-weight:600;font-size:1.02rem;letter-spacing:-.005em;text-decoration:none;
  transition:color .15s ease,padding .2s cubic-bezier(.23,1,.32,1)}
body.home .route::after{content:"\2192";flex:none;color:var(--mut);transition:transform .2s cubic-bezier(.23,1,.32,1),color .15s}
body.home .route.hot{color:var(--volt)}
body.home .route.hot::after{color:var(--volt)}
@media(hover:hover) and (pointer:fine){body.home .route:hover{color:var(--volt)}body.home .route:hover::after{color:var(--volt);transform:translateX(4px)}}
body.home .route:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
/* 2026-10-04: the router became the services index, every service by group, the same
   names and groups as the header's Services panel (tools/services_menu.py) */
body.home .router-head{max-width:720px}
body.home .router-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;align-items:start;padding:10px 24px 6px;
  background:rgba(8,11,18,.9);border:1px solid var(--line);border-radius:var(--rad)}
body.home .router-group{display:grid;align-content:start;padding:8px 0 10px;break-inside:avoid}
body.home .rg-h{margin:10px 0 2px;font:600 .68rem/1.2 var(--font-d);letter-spacing:.18em;text-transform:uppercase;color:var(--volt)}
body.home .router-groups .route{min-height:60px;padding:10px 2px;font-size:.98rem}
body.home .route > span{display:grid;gap:2px}
body.home .route small{font:500 .8rem/1.35 var(--font-b);color:var(--mut);letter-spacing:0;text-wrap:pretty}
@media(hover:hover) and (pointer:fine){body.home .route:hover small{color:#C3CAD6}}
body.home #router > .wrap > .route.hot{margin-top:12px;border-bottom:0;padding-left:24px;padding-right:24px}
body.home .router-col{display:grid;align-content:start}
@media(max-width:1100px){body.home .router-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body.home .router-groups{grid-template-columns:minmax(0,1fr);padding:4px 16px}
  body.home #router > .wrap > .route.hot{padding-left:16px;padding-right:16px}}

/* ---------- the audit: the head holds while the deliverables pass ---------- */
body.home .audit-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start}
body.home .audit-hold{position:sticky;top:110px;padding:30px 30px 32px;background:rgba(8,11,18,.9);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9)}
/* the held column carries its own ground: the lit columns of the gauge pass behind it */
body.home .audit-hold .sec-head::before{display:none}
body.home .audit-hold .rail{margin:18px 0 0;justify-content:flex-start}
body.home .audit-hold .hero-ctas{margin-top:22px}
body.home .deliv-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
body.home .deliv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;padding:24px 26px}
body.home .deliv .ix{grid-row:span 2;font-family:var(--font-d);font-size:2.4rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--volt);font-variant-numeric:tabular-nums}
body.home .deliv h3{font-size:1.18rem;margin:2px 0 2px}
body.home .deliv p{color:#C3CAD6;font-size:.95rem}

/* ---------- process: four steps along one lit channel ---------- */
body.home #process{padding-top:40px}
body.home .process{position:relative;list-style:none;margin:40px 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body.home .process::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;
  background:linear-gradient(90deg,rgba(198,241,53,0),rgba(198,241,53,.7) 6%,rgba(198,241,53,.7) 94%,rgba(198,241,53,0));
  box-shadow:0 0 14px rgba(198,241,53,.45)}
body.home .step{position:relative;padding:58px 22px 24px}
body.home .step-day{position:absolute;top:2px;left:20px;color:var(--volt);border:1px solid rgba(198,241,53,.55);
  font-family:var(--font-d);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
body.home .step h3{font-size:1.1rem;margin-bottom:8px}
body.home .step p{color:#C3CAD6;font-size:.93rem}

/* ---------- receipts: an evidence wall ---------- */
body.home .disclose{max-width:780px;padding:16px 20px;color:#C3CAD6;font-size:.92rem;margin:20px 0 30px}
body.home .case-grid.evidence{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-auto-flow:dense;gap:18px;align-items:start}
body.home .evidence .lead-case{grid-row:span 3}
body.home .evidence .case{overflow:hidden}
body.home .evidence .lead-case .case-shot img{height:340px}
/* the month's revenue gets a row of its own; spend and ROAS sit under it */
body.home .evidence .lead-case .case-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 34px}
body.home .evidence .lead-case .case-nums div:first-child{flex-basis:100%}
body.home .evidence .lead-case .case-nums b{font-size:clamp(1.6rem,2.4vw,2.1rem)}
body.home .evidence .lead-case .case-nums div:first-child b{font-size:clamp(2.8rem,5.4vw,4.6rem);letter-spacing:-.05em;line-height:1}
body.home .evidence .lead-case h3{font-size:1.35rem}
body.home .evidence .case:not(.lead-case) .case-shot img{height:120px}
body.home .evidence .case:not(.lead-case) .case-shot img.h-int{height:auto}
body.home .evidence .case:not(.lead-case) .case-body{padding:18px 20px 20px}
body.home .evidence .case:not(.lead-case) .case-nums{gap:10px;margin-bottom:10px}
body.home .evidence .case:not(.lead-case) .case-nums b{font-size:1.35rem}
body.home .evidence .case:not(.lead-case) .case-nums div:first-child b{font-size:1.9rem;letter-spacing:-.04em}
body.home .evidence .case:not(.lead-case) h3{font-size:1.02rem}
body.home .evidence .case:not(.lead-case) p{font-size:.88rem}
body.home #results .hero-ctas{margin-top:30px}

/* ---------- speed: the dial fills as you scroll (home.js drives the ring) ---------- */
body.home .speed-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
body.home .stopwatch{position:sticky;top:120px}
body.home .speed-copy{padding:32px 34px 30px}
body.home .speed-copy .lead{color:#C9CFDA}

/* ---------- the seven systems: the index holds, the panels pass ---------- */
body.home #services{padding-bottom:40px}
body.home .systems{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:12px}
body.home .sys-index{position:sticky;top:108px;display:grid;gap:2px;padding:10px;background:rgba(7,9,15,.88);border:1px solid var(--line);border-radius:var(--rad)}
body.home .sys-link{display:grid;gap:2px;padding:12px 14px;border-radius:var(--rad-sm);text-decoration:none;color:var(--mut);position:relative;
  transition:background .2s ease,color .2s ease}
body.home .sys-link .sys-name{margin:0;font-family:var(--font-d);font-weight:600;font-size:1rem;line-height:1.25;color:var(--text);letter-spacing:-.01em}
body.home .sys-link .num{font-family:var(--font-d);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
body.home .sys-link .from{font-size:.76rem;line-height:1.35;color:var(--mut);display:none}
body.home .sys-link.on{background:rgba(198,241,53,.08)}
body.home .sys-link.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--volt);box-shadow:0 0 10px rgba(198,241,53,.8)}
body.home .sys-link.on .sys-name{color:var(--volt)}
body.home .sys-link.on .from{display:block}
body.home .sys-link.hot .num{color:var(--volt)}
@media(hover:hover) and (pointer:fine){body.home .sys-link:hover .sys-name{color:var(--volt)}}
body.home .sys-link:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
body.home .sys-panels{display:grid;gap:clamp(40px,7vw,96px)}
body.home .offer-sec{display:block;padding:0;border-top:0;scroll-margin-top:96px}
body.home .offer-art{position:relative;margin:0 0 -40px;border:0;border-radius:0;background:none;overflow:visible;box-shadow:none;aspect-ratio:auto;z-index:0;pointer-events:none}
body.home .offer-art img{display:block;width:100%;height:auto;max-height:none;margin:0;object-fit:contain;transform:none;transition:opacity .7s cubic-bezier(.23,1,.32,1);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%)}
body.home .offer-sec:hover .offer-art img{transform:none}
/* on a wide screen each hologram takes two thirds of its panel, alternating sides, so the
   seven read as a zigzag of light down the channel instead of seven full-width banners */
@media(min-width:1001px){
  body.home .sys-panels .offer-art{width:64%;margin:0 0 -64px auto}
  body.home .sys-panels .offer-sec:nth-child(even) .offer-art{margin:0 auto -64px 0}
}
body.home .offer-copy{position:relative;z-index:1;padding:30px 32px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 34px}
body.home .offer-copy > *{grid-column:1/-1}
body.home .offer-copy > ul,body.home .offer-copy > .price-line,body.home .offer-copy > .offer-ctas,body.home .offer-copy > .click-trigger{grid-column:2}
body.home .offer-copy > .mut{grid-column:1;grid-row:span 4;align-self:start;color:#C3CAD6}
body.home .offer-copy .kicker{margin:0 0 10px}
body.home .offer-copy .sys-sum{font-size:.95rem;color:var(--mut);margin-bottom:14px;max-width:70ch}
body.home .offer-copy h2{font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance}
body.home .offer-copy ul{margin:0 0 6px}
body.home .offer-copy .price-line{margin:10px 0 14px}
body.home .offer-copy .price-line a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
body.home .offer-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
body.home .offer-copy .click-trigger{margin-top:0}

/* ---------- proof policy: plain type in the dark tunnel ---------- */
body.home .stories{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-auto-flow:dense;gap:18px;margin-top:40px}
body.home .story.lead-story{grid-row:span 2}
body.home .story{padding:26px 28px}
body.home .story h3{font-size:1.2rem;margin-bottom:14px}
body.home .story dt{color:var(--volt)}

/* ---------- the peak: out of the sluice, over the reservoir ---------- */
/* the figure arrives only once the window owns the screen, so it never sits over copy */
#peak{position:fixed;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;text-align:center;padding:0 24px;
  opacity:clamp(0,calc((var(--window-pricing,0) - .55) * 2.4),1)}
#peak .peak-in{transform:translateY(calc((1 - var(--window-pricing,0)) * 30px))}
#peak b{display:block;font-family:var(--font-d);font-weight:700;font-size:clamp(3.6rem,13vw,10.5rem);letter-spacing:-.045em;line-height:.9;
  color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 6px 60px rgba(7,9,15,.55)}
#peak b:empty{display:none}
#peak span{display:block;margin-top:18px;font-family:var(--font-d);font-size:clamp(1rem,2.2vw,1.4rem);font-weight:500;letter-spacing:.01em;color:var(--text);
  text-shadow:0 2px 24px rgba(7,9,15,.9)}
#peak:not(.has-fig) span{font-size:clamp(1.6rem,4.4vw,3.2rem);font-weight:700;letter-spacing:-.025em;max-width:16ch;margin-inline:auto;line-height:1.05}
@media(prefers-reduced-motion:reduce){#peak .peak-in{transform:none}}

/* ---------- pricing ---------- */
body.home .wedges{align-items:stretch}
body.home .wedge.hot{border-color:rgba(198,241,53,.45);box-shadow:inset 0 2px 0 var(--volt),0 40px 90px -40px rgba(198,241,53,.25),0 30px 60px -40px rgba(0,0,0,.9)}
body.home .pricing-note{padding:18px 22px}

/* ---------- founder ---------- */
body.home .founder-img img{filter:saturate(.92) contrast(1.04)}
body.home .founder-body{padding:34px 34px 30px}
body.home .founder-body h2{font-size:clamp(1.8rem,3vw,2.6rem)}
body.home .founder-lockup{height:56px;width:auto;margin:26px 0 10px;opacity:.92}
body.home .founder-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
body.home .founder-ctas .click-trigger{margin:0}

/* ---------- after the audit: the path, drawn as a channel ---------- */
body.home .path{list-style:none;margin:30px 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
body.home .path::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;
  background:linear-gradient(90deg,var(--volt),rgba(198,241,53,.45));box-shadow:0 0 12px rgba(198,241,53,.45)}
body.home .path li{position:relative;padding:34px 14px 0 0}
body.home .path li::before{content:"";position:absolute;left:2px;top:3px;width:14px;height:14px;background:var(--ink);border:2px solid var(--volt);transform:rotate(45deg)}
body.home .path b{display:block;font-family:var(--font-d);font-size:1.02rem;line-height:1.25;color:var(--text);background:rgba(7,9,15,.82);padding:4px 8px;margin-left:-8px;border-radius:var(--rad-sm);width:fit-content}
body.home .stay-body{padding:30px 32px}
body.home .stay-body p{color:#C9CFDA}

/* ---------- FAQ ---------- */
body.home .faq{padding:6px 26px 10px;max-width:860px;margin-left:auto;margin-right:auto}

/* ---------- the close: the control room ---------- */
body.home #book{padding-top:160px}
body.home #book::before{background:radial-gradient(ellipse 72% 80% at 50% 46%,rgba(7,9,15,.82) 0%,rgba(7,9,15,.5) 60%,rgba(7,9,15,0) 100%)}
body.home .cal-embed.on{background:rgba(8,11,18,.9);border-color:var(--line-strong)}

/* ---------- tablets and phones ---------- */
@media(max-width:1000px){
  #hero{padding-top:118px}
  #hero .hero-copy::before{inset:-30px -24px -20px -24px}
  body.home .audit-split,body.home .speed-wrap,body.home .systems{grid-template-columns:minmax(0,1fr)}
  body.home .audit-hold,body.home .stopwatch,body.home .sys-index{position:static}
  body.home .stopwatch{max-width:300px;margin:0 auto}
  body.home .sys-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home .sys-link.on::before{display:none}
  body.home .sys-link .from{display:block}
  body.home .process{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  body.home .process::before{display:none}
  body.home .step{padding-top:52px}
  body.home .case-grid.evidence{grid-template-columns:minmax(0,1fr)}
  body.home .evidence .lead-case{grid-row:auto}
  body.home .stories{grid-template-columns:minmax(0,1fr)}
  body.home .story.lead-story{grid-row:auto}
  body.home .offer-copy{grid-template-columns:minmax(0,1fr)}
  body.home .offer-copy > *,body.home .offer-copy > ul,body.home .offer-copy > .price-line,body.home .offer-copy > .offer-ctas,
  body.home .offer-copy > .click-trigger,body.home .offer-copy > .mut{grid-column:1;grid-row:auto}
  body.home .offer-copy > .mut{margin-bottom:12px}
}
@media(max-width:720px){
  body.home .wf-scrim{--scrim:.58}
  .pour-field input{font-size:1.3rem;min-height:54px}
  .pour-field span{font-size:1.3rem}
  body.home main{margin-top:42vh}
  body.home #pricing{margin-top:100vh}
  body.home #book{margin-top:60vh}
  body.home .trust-band .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home .trust-band .metric{padding:18px 16px 16px}
  body.home .ledger-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 18px}
  body.home .router-list{grid-template-columns:minmax(0,1fr);padding:4px 16px}
  body.home .deliv{padding:20px 18px;gap:4px 14px}
  body.home .audit-hold{padding:24px 20px}
  body.home .deliv .ix{font-size:1.9rem}
  body.home .process{grid-template-columns:minmax(0,1fr)}
  body.home .sys-index{grid-template-columns:minmax(0,1fr);padding:6px}
  body.home .sys-link{padding:10px 12px}
  /* a contents list on a phone: each panel below carries its own price */
  body.home .sys-link .from{display:none}
  body.home .offer-copy,body.home .stay-body,body.home .speed-copy,body.home .founder-body{padding:24px 20px}
  body.home .offer-art{margin:0 -24px -28px}
  body.home .evidence .lead-case .case-shot img{height:220px}
  body.home .path{grid-template-columns:minmax(0,1fr);gap:16px}
  body.home .path::before{left:9px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,var(--volt),rgba(198,241,53,.45))}
  body.home .path li{padding:0 0 0 34px}
  body.home .path li::before{top:4px}
  body.home .path b{margin-left:0}
  body.home .faq{padding:4px 16px 8px}
  body.home .story{padding:22px 20px}
}

/* ---------- in-copy links (audit round, 2026-10-04): each leak names its fix, the pricing note
   names each service's own price page. Links inherit color sitewide, so these mark themselves. */
body.home .ledger-row p a,body.home .pricing-note a,body.home .offer-copy p.mut a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(198,241,53,.65);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s ease}
body.home .ledger-row p a:hover,body.home .pricing-note a:hover,body.home .offer-copy p.mut a:hover{color:var(--volt)}
body.home .ledger-row p a:focus-visible,body.home .pricing-note a:focus-visible,body.home .offer-copy p.mut a:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
body.home .pricing-links{margin-top:14px}
/* the dial's caption sits on the film with no plate: at its brightest frame the muted tone measured
   4.06:1 (audit round, 2026-10-04); the ledger's lighter grey clears AA there */
body.home .stopwatch .sw-num span{color:#C9CFDA}
/* Phones (2026-10-05, the SEO session's ad-readiness check): the first button sat at 829px on a
   390x844 phone and below the screen on 375x667, under the intro and the spend field. There the
   buttons come before the field, the shortest screens drop the sentence that points down to it,
   and the nav keeps the audit button beside the menu, so one tap is always in reach. */
.nav-cta-m{display:none}
/* the founder section's in-copy link to /about (2026-10-05: /about had no contextual inbound link) */
body.home .founder-body p a{color:var(--volt);text-decoration:underline;text-underline-offset:3px}
body.home .founder-body p a:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
@media(max-width:1000px){
  body.home .nav-cta-m{display:inline-flex;align-items:center;margin-left:auto;white-space:nowrap}
}
@media(max-width:420px){
  body.home .nav-inner .logo em{display:none}
}
@media(max-width:720px){
  body.home #hero .hero-copy{display:flex;flex-direction:column}
  body.home #hero .hero-ctas{order:1}
  body.home #hero .click-trigger{order:2;align-self:flex-start}
  body.home #hero .pour{order:3;margin-top:30px}
}
@media(max-width:720px) and (max-height:760px),(max-width:400px){
  body.home #hero .lead-more{display:none}
}