/* ============================================================
   LeadsFlow — marketing palette
   Colour carries product meaning:
     signal (amber) = clean leads, delivery, primary action
     bot    (cold grey-teal) = filtered traffic, drained of colour
   ============================================================ */
:root{
  color-scheme: only light;
  --ink:#08201F;
  --ink-2:#0C2C2A;
  --ink-3:#113936;
  --paper:#F7F4EF;
  --paper-2:#EFEAE2;
  --signal:#E9A23B;
  --signal-hi:#F5B85C;
  --signal-deep:#B9761B;
  --bot:#6E8080;
  --on-ink:#EAF2F0;
  --on-ink-mute:#9DB3B0;
  --text:#14201F;
  --text-mute:#556663;
  --hair-ink:rgba(234,242,240,.14);
  --hair-paper:rgba(20,32,31,.13);
  --font-display:"Archivo","Instrument Sans",ui-sans-serif,sans-serif;
  --font-body:"Instrument Sans",ui-sans-serif,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0}
p{margin:0}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--font-mono);font-weight:500;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- CTA ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-weight:600;font-size:1.02rem;
  padding:1.05em 1.9em;min-height:56px;
  background:var(--signal);color:#221503;
  border:0;border-radius:4px;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(90,54,0,.28);
  transition:background .16s ease,transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .16s ease;
}
.cta:hover{background:var(--signal-hi);box-shadow:inset 0 -2px 0 rgba(90,54,0,.34)}
.cta:active{transform:translateY(2px);box-shadow:inset 0 0 0 rgba(90,54,0,0)}
.cta:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.cta .arw{transition:transform .16s cubic-bezier(.2,.8,.3,1)}
.cta:hover .arw{transform:translateX(3px)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid var(--hair-ink);
}
.nav-in{display:flex;align-items:center;gap:16px;height:76px}
.nav-logo{height:26px;width:auto;display:block}
.nav-sp{flex:1}
.nav .cta{padding:.72em 1.25em;min-height:44px;font-size:.94rem;white-space:nowrap}
/* On the landing page the nav CTA duplicates the hero's primary CTA, so it is
   hidden until the hero CTA scrolls up behind the nav (toggled by JS). Its slot
   is reserved (visibility, not display) so revealing it never shifts the layout.
   Without JS the class is never toggled and the fallback below keeps it visible. */
.nav .nav-cta{opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease}
.nav .nav-cta.is-shown{opacity:1;visibility:visible;transform:none}
@media(max-width:620px){
  .nav-in{height:64px}
  .nav-logo{height:21px}
  .nav .cta{padding:.66em 1em;font-size:.88rem}
}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--on-ink);
  overflow:hidden;isolation:isolate;
}
.hero::before{ /* atmosphere, not a flat fill */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 34%,rgba(233,162,59,.16),transparent 58%),
    radial-gradient(90% 80% at 8% 96%,rgba(17,57,54,.9),transparent 60%),
    linear-gradient(168deg,#0A2523 0%,#08201F 52%,#071C1B 100%);
}
.hero::after{ /* faint schematic grid */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--hair-ink) 1px,transparent 1px),linear-gradient(90deg,var(--hair-ink) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000 20%,transparent 78%);
}
.hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(24px,3vw,44px);
  padding-block:clamp(36px,4.5vw,64px);
  /* hero and claims are sized as a pair so both clear the fold on every desktop
     height. Capped in px as well as vh, otherwise a tall monitor stretches the
     hero into empty space. */
  min-height:min(64vh,560px);
}
/* wide enough that "You already paid." holds one line at the hero size */
.hero-copy{max-width:min(100%,34rem)}
/* the schematic runs off the right edge of the viewport — full bleed, no inset card */
.hero-viz{margin-right:calc(-1 * ((100vw - min(100vw, var(--maxw)))/2 + var(--pad)))}
.hero-mark{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,30px)}
.hero-mark img{height:clamp(30px,3.4vw,40px);width:auto}
.hero-mark span{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-mute);padding-left:14px;border-left:1px solid var(--hair-ink);
  white-space:nowrap;
}
/* On phones the sticky nav logo sits right above the hero, so the hero-mark logo
   reads as a duplicate. Drop it and keep just the category eyebrow. */
@media(max-width:620px){
  .hero-mark img{display:none}
  .hero-mark span{padding-left:0;border-left:0}
  /* The sticky nav already carries "Book a demo", so the hero's secondary CTA is
     redundant on a phone — leave just the primary audit button. */
  .hero-ctas .cta-quiet{display:none}
}
/* trimmed so the copy column can give width back to the diagram without the
   headline dropping to three lines */
h1{font-size:clamp(2.1rem,4.2vw,3.25rem);font-weight:800}
h1 em{font-style:normal;color:var(--signal)}
.hero-sub{
  margin-top:clamp(18px,2.4vw,26px);font-size:clamp(1.03rem,1.35vw,1.19rem);
  line-height:1.55;color:var(--on-ink-mute);max-width:46ch;
}
.hero-ctas{display:flex;align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(28px,3.4vw,40px);flex-wrap:wrap}

/* ---------- hero schematic ---------- */
/* Orientation follows the hero layout: landscape diagram while the hero is two
   columns, portrait funnel once it stacks. A portrait shape can only fill about
   half a landscape column, which is why there are two. */
.schematic{width:100%;height:auto;display:block;overflow:visible}
/* the landscape version only earns its place once the column is wide enough for its
   labels to stay readable, so it is opt-in above 1100px rather than the default */
.sch-h{display:none}
/* 18u is the ceiling: at 19u the drain labels collide with their own nodes */
.sch-h .sch-label{font-size:18px}
/* portrait, so capped by height — otherwise it sets the hero's height and pushes
   the CTA off the first screen */
.sch-v{display:block;max-height:min(62vh,600px)}
/* both base rules must sit above this swap: same specificity, so source order decides */
@media(min-width:1100px){
  .sch-h{display:block}
  .sch-v{display:none}
  /* Contained, not bled: the diagram fills its column and its right edge aligns
     with the page container (and the claims strip below it), instead of running
     off to the edge of the screen. Width-driven; max-height only guards the fold
     on unusually short viewports. */
  .hero-in{grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr)}
  .hero-viz{display:flex;justify-content:flex-end;margin-right:0}
  .sch-h{width:100%;height:auto;max-height:clamp(340px,46vh,500px)}
}
.sch-edge{fill:none;stroke:var(--hair-ink);stroke-width:1.5}
.sch-edge.dash{stroke-dasharray:7 7;stroke:rgba(110,128,128,.42)}
.sch-pulse{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:5 95;}
.sch-pulse.clean{stroke:var(--signal)}
.sch-pulse.bot{stroke:var(--bot);stroke-width:2}
.sch-node{fill:var(--ink-2);stroke:var(--hair-ink);stroke-width:1.5}
.sch-node.core{fill:var(--ink-3);stroke:rgba(233,162,59,.55);stroke-width:2}
.sch-node.sink{fill:#0A2422;stroke:rgba(110,128,128,.5)}
.sch-dot{fill:var(--signal)}
.sch-dot.mute{fill:var(--bot)}
.sch-label{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;fill:var(--on-ink-mute)}
.sch-label.dim{fill:rgba(110,128,128,.85)}
.sch-glyph{fill:none;stroke:var(--signal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sch-ring{fill:none;stroke:var(--signal);stroke-width:1.5;opacity:0}

@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ring{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.sch-pulse{animation:flow 3.2s linear infinite}
.sch-pulse.p2{animation-delay:-1.1s}
.sch-pulse.p3{animation-delay:-2.2s}
.sch-pulse.p4{animation-duration:2.6s;animation-delay:-.6s}
.sch-pulse.p5{animation-duration:2.6s;animation-delay:-1.9s}
.sch-pulse.bot{animation-duration:5.4s;animation-delay:-2.4s}
.sch-pulse.bot.b2{animation-duration:6.8s;animation-delay:-5.1s}
.sch-pulse.bot.b3{animation-duration:5.9s;animation-delay:-1.7s}
/* round robin sends each lead down ONE branch — these alternate, half a cycle apart */
.sch-pulse.rrA{animation-duration:3.2s;animation-delay:0s}
.sch-pulse.rrB{animation-duration:3.2s;animation-delay:-1.6s}
/* a cap passes to EVERY child — these travel together, in lockstep */
.sch-pulse.capSync{animation-duration:3.2s;animation-delay:-.8s}
/* transform-box:fill-box means the origin is relative to this circle's own box,
   so it must be `center` — viewBox coordinates here would scale about a point
   outside the shape and fling the ring across the diagram. */
.sch-ring{animation:ring 3.2s ease-out infinite;transform-origin:center;transform-box:fill-box}

@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;min-height:0;padding-block:clamp(40px,8vw,64px);gap:36px}
  .hero-copy{max-width:none}
  .hero-sub{max-width:52ch}
  .hero-viz{margin-right:0}
  .sch-v{max-width:560px;margin-inline:auto}
}
/* On a phone the schematic runs edge to edge so the nodes stay legible,
   and its labels scale up to survive being drawn at half size. */
@media(max-width:620px){
  .hero-viz{margin-inline:calc(var(--pad) * -1)}
  .sch-v{max-width:none}
  .sch-label{font-size:18px}
}

/* ---------- claims strip ---------- */
.claims{background:var(--paper);border-bottom:1px solid var(--hair-paper)}
.claims-in{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding-block:clamp(28px,3.2vw,42px);gap:0;
}
/* centred inside equal columns so the three read as evenly spread; left-aligning
   them left a large gap trailing the shortest number */
.claim{padding-inline:clamp(12px,2vw,28px);border-right:1px solid var(--hair-paper);text-align:center}
.claim:last-child{border-right:0}
.claim-n{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.7rem,6vw,4.2rem);color:var(--ink);
  font-variant-numeric:tabular-nums;display:block;
}
.claim-l{margin-top:.5em;font-size:clamp(.98rem,1.2vw,1.08rem);font-weight:600;color:var(--text)}
.claim-f{margin-top:.35em;font-size:.82rem;color:var(--text-mute);line-height:1.4}
/* On a phone the number sits beside its label instead of above it. Stacked, three
   stats ate 57% of the screen and left the right half empty. The number column is a
   fixed width so all three labels start on the same line. */
@media(max-width:760px){
  .claims-in{grid-template-columns:1fr;gap:0}
  .claim{
    border-right:0;border-bottom:1px solid var(--hair-paper);padding:20px 0;
    display:grid;grid-template-columns:9rem minmax(0,1fr);
    column-gap:clamp(14px,4vw,22px);align-items:center;text-align:left;
  }
  .claim:last-child{border-bottom:0}
  .claim-n{font-size:2.75rem;grid-row:1/3}
  .claim-l{margin-top:0}
  .claim-f{margin-top:.2em}
}

/* ---------- generic sections ---------- */
section{padding-block:clamp(64px,8.5vw,124px)}
/* two paper sections in a row have no colour change to carry the gap, so the
   second one pulls up — it also reads as a continuation of the steps above it */
section.tight-top{padding-top:clamp(24px,3vw,44px)}
.eyebrow{color:var(--signal-deep);margin-bottom:1.4em;display:block}
h2{font-size:clamp(1.95rem,4.2vw,3.1rem);max-width:19ch}
.lede{margin-top:1.1em;font-size:clamp(1.02rem,1.3vw,1.16rem);color:var(--text-mute);max-width:56ch;line-height:1.6}

/* problem — hairline list, no cards */
/* three across so the whole problem is one glance, not a column of prose.
   Cold grey ticks here; the solution section uses signal amber. */
.rows{
  margin-top:clamp(38px,5vw,60px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
}
.row{padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--hair-paper);position:relative}
.row::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--bot)}
.row h3{font-size:clamp(1.08rem,1.5vw,1.28rem);font-weight:700;letter-spacing:-.015em}
.row p{margin-top:.55em;color:var(--text-mute)}
@media(max-width:820px){
  .rows{grid-template-columns:1fr;gap:0}
  .row{margin-top:26px}
  .row:first-child{margin-top:0}
}

/* solution — ink band */
.band{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 88% 8%,rgba(233,162,59,.13),transparent 62%);
}
.band .wrap{position:relative;z-index:1}
.band h2{color:var(--on-ink)}
.band .lede{color:var(--on-ink-mute)}
.band .eyebrow{color:var(--signal)}
.stage{
  margin-top:clamp(40px,5vw,64px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair-ink);
}
.stage-item{padding:clamp(22px,2.6vw,32px) clamp(14px,2vw,26px) 0 0;position:relative}
.stage-item::before{
  content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--signal);
}
.stage-item:last-child::before{background:var(--bot)}
.stage-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--signal);text-transform:uppercase}
.stage-item:last-child .stage-k{color:var(--bot)}
.stage-t{margin-top:.8em;font-family:var(--font-display);font-weight:700;font-size:clamp(1.08rem,1.5vw,1.28rem);letter-spacing:-.015em}
.stage-d{margin-top:.5em;font-size:.95rem;color:var(--on-ink-mute);line-height:1.55}
@media(max-width:860px){.stage{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stage{grid-template-columns:1fr}.stage-item{padding-right:0}}

/* how it works — numbered, no cards */
.steps{margin-top:clamp(40px,5vw,64px);counter-reset:s}
.step{
  display:grid;grid-template-columns:auto minmax(0,26ch) minmax(0,1fr);
  gap:clamp(14px,3vw,40px);align-items:start;
  padding-block:clamp(24px,3vw,34px);border-top:1px solid var(--hair-paper);
}
.step:last-child{border-bottom:1px solid var(--hair-paper)}
.step-n{
  counter-increment:s;font-family:var(--font-mono);font-size:.8rem;color:var(--signal-deep);
  padding-top:.35em;min-width:3ch;
}
.step-n::before{content:"0" counter(s)}
.step h3{font-size:clamp(1.12rem,1.6vw,1.35rem)}
.step p{color:var(--text-mute);max-width:60ch}
.step code{
  font-family:var(--font-mono);font-size:.86em;background:var(--paper-2);
  padding:.14em .42em;border-radius:3px;color:var(--ink);white-space:nowrap;
}
@media(max-width:720px){
  .step{grid-template-columns:auto minmax(0,1fr);gap:6px 16px}
  .step p{grid-column:2}
}

/* USPs — two-up, hairline rule + signal tick, no cards */
.usps{
  margin-top:clamp(38px,5vw,60px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);
}
.usp{padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--hair-paper);position:relative}
.usp::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--signal)}
.usp-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-deep)}
.usp h3{margin-top:.85em;font-size:clamp(1.18rem,1.7vw,1.45rem)}
.usp p{margin-top:.7em;color:var(--text-mute);max-width:46ch}
/* three columns need real width; below this the bodies get too narrow to scan */
@media(max-width:900px){.usps{grid-template-columns:1fr;gap:0}.usp{margin-top:26px}.usp:first-child{margin-top:0}}

/* proof — one product composition */
.proof{background:var(--paper-2)}
.panel{
  margin-top:clamp(36px,4.5vw,56px);background:var(--paper);
  border:1px solid var(--hair-paper);border-radius:6px;overflow:hidden;
}
.panel-top{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);
  border-bottom:1px solid var(--hair-paper);
}
.panel-top .mono{color:var(--text-mute)}
.panel-title{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.015em}
/* Source grades. Amber for grades that are earning, cold grey for one that is
   slipping, matching the colour logic the rest of the page already uses. */
.grades{width:100%;border-collapse:collapse}
.grades th,.grades td{
  padding:clamp(11px,1.5vw,15px) clamp(10px,1.6vw,20px);
  border-bottom:1px solid var(--hair-paper);text-align:left;
}
.grades th{
  font-family:var(--font-mono);font-weight:500;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
}
.grades .num{text-align:right;font-variant-numeric:tabular-nums}
.grades td.num{color:var(--text-mute);font-size:.92rem}
.grades .gcol{text-align:center;width:1%;white-space:nowrap}
/* the source column soaks up the spare width so every other column hugs its
   content and the grade lands beside its delta instead of across the panel */
.grades .src{font-family:var(--font-mono);font-size:.8rem;color:var(--text);white-space:nowrap;width:100%}
.grade{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:5px;font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  letter-spacing:-.02em;
}
.grade.a{background:rgba(233,162,59,.22);color:var(--signal-deep)}
.grade.b{background:rgba(233,162,59,.13);color:var(--signal-deep)}
.grade.d{background:rgba(110,128,128,.22);color:#4F625F}
/* scoped to .grades so it outranks `.grades td{text-align:left}` */
.grades .delta{font-family:var(--font-mono);font-size:.78rem;text-align:right;font-variant-numeric:tabular-nums}
.grades .delta.up{color:var(--signal-deep)}
.grades .delta.down{color:var(--bot)}
.bands{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  padding:12px clamp(14px,2.2vw,20px);font-size:.68rem;color:var(--text-mute);
  border-bottom:1px solid var(--hair-paper);
}
.bands-note{margin-left:auto;color:var(--text-mute);opacity:.75}
@media(max-width:620px){
  .grades .vol{display:none}
  .grades .src{font-size:.72rem;white-space:normal}
  .grades td.num{font-size:.84rem}
  .grades th,.grades td{padding:10px 8px}
  .grade{width:28px;height:28px;font-size:1rem}
  .bands{font-size:.62rem;gap:5px 12px}
  .bands-note{margin-left:0;flex-basis:100%}
}
.ratio{padding:clamp(18px,2.4vw,28px) clamp(18px,2.6vw,30px);border-top:1px solid var(--hair-paper)}
.ratio-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.ratio-h .mono{color:var(--text-mute)}
.ratio-v{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
/* Bar segments carry their true width in the markup and grow via scaleX, so the
   resting state is always the correct one — a stalled or skipped animation can
   never leave the ratio reading low. */
.bar{height:10px;border-radius:2px;background:var(--paper-2);display:flex;overflow:hidden}
.bar i{display:block;height:100%;transform-origin:left center}
.bar .b-ok{background:var(--signal)}
.bar .b-bot{background:var(--bot)}
.bar .b-rej{background:rgba(85,102,99,.35)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar.run i{animation:grow .9s cubic-bezier(.22,.75,.3,1) both}
.bar.run .b-bot{animation-delay:.1s}
.bar.run .b-rej{animation-delay:.18s}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-mute)}
.legend i{width:9px;height:9px;border-radius:2px;display:block}

/* who it's for */
.icp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.icp-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair-paper)}
.icp-list li{padding-block:18px;border-bottom:1px solid var(--hair-paper);color:var(--text-mute)}
.icp-list b{color:var(--text);font-weight:600;display:block;font-family:var(--font-display);font-size:1.08rem;letter-spacing:-.01em;margin-bottom:.25em}
@media(max-width:820px){.icp{grid-template-columns:1fr}}

/* final CTA */
.final{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;text-align:center}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 50% 108%,rgba(233,162,59,.2),transparent 62%);
}
.final .wrap{position:relative;z-index:1}
.final h2{color:var(--on-ink);margin-inline:auto;max-width:16ch}
.final .lede{margin-inline:auto;color:var(--on-ink-mute)}
.final-ctas{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(28px,3.4vw,40px);flex-wrap:wrap}

/* footer */
.foot{background:var(--ink);border-top:1px solid var(--hair-ink);padding-block:34px}
.foot-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot img{height:20px;width:auto;opacity:.75}
.foot p{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--on-ink-mute)}
@media(max-width:520px){.foot p{margin-left:0}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* frozen pulses would sit on the wires as stray dashes — drop them and let
     the schematic read as clean edges instead */
  .sch-pulse{display:none}
}

/* ============================================================
   Contact page
   ============================================================ */

/* a short ink band rather than the full hero: no diagram, no fold budget */
.page-hero{padding-block:clamp(44px,6vw,78px)}
/* lift the content above .hero's z-index:0 gradient and grid pseudo-elements,
   the same job .hero-in does on the home page */
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:14ch}
.page-hero .hero-sub{max-width:48ch}

.form-wrap{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}

.field{margin-bottom:clamp(18px,2.2vw,24px)}
.field label{
  display:block;margin-bottom:8px;font-weight:600;font-size:.95rem;color:var(--text);
}
.field .opt{font-weight:400;color:var(--text-mute);font-size:.85em}
.field input,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--text);
  background:var(--paper);border:1px solid var(--hair-paper);border-radius:4px;
  padding:.78em .9em;transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{resize:vertical;min-height:9em;line-height:1.55}
.field input:hover,.field textarea:hover{border-color:rgba(20,32,31,.28)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--signal-deep);
  box-shadow:0 0 0 3px rgba(233,162,59,.22);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-mute);opacity:.7}

/* off-screen rather than display:none — some bots skip hidden inputs but fill
   positioned ones, which is exactly the signal we want */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

#contact-form .cta{margin-top:4px}
#contact-form .cta:disabled{opacity:.55;cursor:not-allowed;transform:none}

.form-note{margin-top:14px;font-size:.92rem;color:var(--text-mute);min-height:1.4em}
.form-note.is-ok{color:var(--signal-deep);font-weight:600}
.form-note.is-err{color:#9A3F2B}

.form-aside{
  padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--hair-paper);position:relative;
}
.form-aside::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--signal)}
.form-aside h3{margin-top:.85em;font-size:clamp(1.15rem,1.6vw,1.35rem)}
.form-aside p{margin-top:.7em;color:var(--text-mute)}
.cta-quiet-dark{
  display:inline-flex;align-items:center;min-height:44px;margin-top:1.1em;
  font-weight:600;color:var(--signal-deep);text-decoration:none;
  border-bottom:1px solid rgba(185,118,27,.35);transition:border-color .16s ease;
}
.cta-quiet-dark:hover{border-bottom-color:var(--signal-deep)}

@media(max-width:820px){
  .form-wrap{grid-template-columns:1fr;gap:40px}
}

/* field error highlight, set by the contact form's per-field 422 handling */
.field.has-err input,.field.has-err textarea{
  border-color:#9A3F2B;box-shadow:0 0 0 3px rgba(154,63,43,.15);
}
#turnstile-slot:not(:empty){margin-bottom:clamp(18px,2.2vw,24px)}

/* ============================================================
   Campaign additions
   ============================================================ */

/* Secondary CTA on dark surfaces (hero + final CTA). Quiet next to the amber
   primary; visible keyboard focus. */
/* Secondary CTA on dark surfaces: a ghost/outline button so it reads as an
   action next to the filled primary, on desktop and when it stacks on mobile. */
.cta-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:56px;padding:1.05em 1.7em;
  font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--on-ink);
  text-decoration:none;background:transparent;
  border:1px solid rgba(234,242,240,.38);border-radius:4px;
  transition:border-color .16s ease,background-color .16s ease;
}
.cta-quiet:hover{border-color:var(--on-ink);background-color:rgba(234,242,240,.07)}
.cta-quiet:focus-visible{outline:2px solid var(--on-ink);outline-offset:3px}
/* On narrow screens the two hero CTAs stack full-width so both read as buttons. */
@media(max-width:520px){
  .hero-ctas{flex-direction:column;align-items:stretch;gap:12px}
  .hero-ctas .cta,.hero-ctas .cta-quiet{width:100%}
  .final-ctas{flex-direction:column;align-items:stretch}
  .final-ctas .cta,.final-ctas .cta-quiet{width:100%}
}

/* Claims strip caption — labels the whole strip as aggregate platform activity */
.claims-note{
  margin:10px auto 0;text-align:center;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-mute);opacity:.8;
}

/* "Proof, not promises." offer block */
.proof-offer .lede{max-width:56ch}
.proof-offer-cta{margin-top:clamp(24px,3vw,34px)}

/* ============================================================
   "Proof, not promises." — copy + illustrative test-lead receipt
   Two columns echoing the hero (copy left, product artifact right);
   stacks to one column under 760px. The card is the scorecard shell
   (.panel / .panel-top) and reuses the sample-data disclaimers, so it
   matches that aesthetic and reads unambiguously as an illustrative
   mockup — never a customer result. The section becomes a subtle
   --paper-2 band (the same device the .proof scorecard section uses)
   so the tonal change carries the transition to the next paper section
   and closes the vertical gap without touching the shared section padding.
   ============================================================ */
section.proof-band{background:var(--paper-2)}

/* two columns, echoing the hero's copy-left / visual-right rhythm */
.proof-offer{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,68px);
  align-items:center;
}

/* the receipt IS a .panel (same element carries both classes, so it inherits
   the scorecard border/radius/overflow and its --paper background — which now
   pops against the --paper-2 band). Just drop the panel's default top margin so
   it sits flush in its grid cell. --logx keeps the log padding, the node column
   and the spine on one shared x-origin. */
.receipt{margin:0;--logx:clamp(18px,2.6vw,26px)}
.receipt .panel-title{font-size:1.06rem}

.receipt-log{
  list-style:none;margin:0;position:relative;
  padding:clamp(10px,1.6vw,16px) var(--logx);
}
/* the spine threading the decisions, echoing the hero schematic's edges;
   opaque nodes sit on top of it like beads on a wire */
.receipt-log::before{
  content:"";position:absolute;
  top:clamp(10px,1.6vw,16px);bottom:clamp(10px,1.6vw,16px);
  left:calc(var(--logx) + 7px);width:1.5px;background:var(--hair-paper);
}
.rcpt{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px;
  padding:.6em 0 .6em 26px;
  font-family:var(--font-mono);font-size:.82rem;line-height:1.4;
}
/* the pipeline node — a bead on the spine */
.rcpt::before{
  content:"";position:absolute;left:2px;top:.8em;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--bot);
}
.rcpt.received::before{border-color:var(--text-mute)}
.rcpt.ok::before{border-color:var(--signal);background:var(--signal)}
.rcpt.drain::before{border-color:var(--bot);background:var(--bot)}
.rcpt.deliver::before{box-shadow:0 0 0 4px rgba(233,162,59,.18)}

.rcpt-gate{color:var(--text);min-width:0}
.rcpt-src,.rcpt-out{white-space:nowrap;text-align:right}
.rcpt-src{color:var(--text-mute)}
.rcpt-out{color:var(--signal-deep);font-size:.78rem;letter-spacing:.02em}
.rcpt.drain .rcpt-out{color:var(--bot)}
.rcpt.deliver .rcpt-gate{font-weight:600}
/* delivered = the same amber-fill / dark-ink pairing the .cta already uses */
.rcpt.deliver .rcpt-out{
  color:#221503;background:var(--signal);font-weight:500;
  padding:.14em .5em;border-radius:3px;
}

.receipt-foot{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 16px;flex-wrap:wrap;
  padding:clamp(12px,1.7vw,16px) var(--logx);
  border-top:1px solid var(--hair-paper);
}
.receipt-foot .mono{color:var(--text-mute);font-size:.66rem}
.receipt-foot .sample-note{margin-top:0}

/* stack: copy first, then the receipt; no horizontal overflow */
@media(max-width:760px){
  .proof-offer{grid-template-columns:1fr;gap:clamp(30px,7vw,44px)}
}

/* Footer navigation */
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-nav a{
  font-family:var(--font-mono);font-size:.72rem;color:var(--on-ink-mute);
  text-decoration:none;transition:color .16s ease;
}
.foot-nav a:hover{color:var(--on-ink)}
.foot-nav a:focus-visible{outline:2px solid var(--on-ink-mute);outline-offset:3px;border-radius:2px}

/* Selects share the text-input treatment, with a caret and room for it */
.field select{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--text);
  background:var(--paper);border:1px solid var(--hair-paper);border-radius:4px;
  padding:.78em 2.2em .78em .9em;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23556663' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field select:hover{border-color:rgba(20,32,31,.28)}
.field select:focus{outline:none;border-color:var(--signal-deep);box-shadow:0 0 0 3px rgba(233,162,59,.22)}
.field.has-err select{border-color:#9A3F2B;box-shadow:0 0 0 3px rgba(154,63,43,.15)}

/* Fields shown only for the lead-audit campaign are revealed by JS (removes
   the [hidden] attribute). */

/* Success panel offering the calendar as an optional next step */
.form-success{
  margin-top:16px;padding:clamp(16px,2.2vw,22px);border:1px solid var(--hair-paper);
  border-radius:6px;background:var(--paper);
}
.form-success[hidden]{display:none}
.form-success p{color:var(--text-mute);margin:0 0 12px}
.form-success .cta{min-height:48px}

/* "What you'll get" expectation note, shown above submit in the audit variant */
.form-expect{
  margin:4px 0 16px;padding:12px 14px;border:1px solid var(--hair-paper);
  border-left:3px solid var(--signal);border-radius:5px;background:var(--paper);
  font-size:.86rem;line-height:1.55;color:var(--text-mute);
}
.form-expect[hidden]{display:none}
.form-expect strong{color:var(--text)}

/* ============================================================
   Legal pages (privacy, terms) + TCPA consent
   ============================================================ */
.legal{max-width:74ch}
.legal .updated{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--text-mute);
  margin-bottom:clamp(28px,4vw,44px);
}
.legal h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);margin-top:clamp(32px,4vw,48px);
}
.legal h3{font-size:1.05rem;font-weight:700;margin-top:1.6em}
.legal p,.legal li{color:var(--text-mute);line-height:1.65;margin-top:.9em}
.legal ul{margin:.4em 0 0;padding-left:1.2em}
.legal li{margin-top:.5em}
.legal a{color:var(--signal-deep);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}
.legal a:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px;border-radius:2px}
.legal strong{color:var(--text)}
.legal .contact-block{
  margin-top:clamp(28px,4vw,40px);padding:clamp(16px,2.2vw,22px);
  border:1px solid var(--hair-paper);border-radius:6px;background:var(--paper);
}
.legal .contact-block p{margin-top:.3em}

/* Consent block on the contact form */
.consent{
  margin:clamp(4px,1vw,10px) 0 clamp(18px,2.2vw,24px);
  display:flex;gap:12px;align-items:flex-start;
}
.consent input[type="checkbox"]{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;cursor:pointer;
  accent-color:var(--signal-deep);
}
.consent label{font-size:.86rem;line-height:1.55;color:var(--text-mute)}
.consent a{color:var(--signal-deep);text-decoration:underline;text-underline-offset:2px}
.consent.has-err label{color:#9A3F2B}
.consent.has-err input[type="checkbox"]{outline:2px solid #9A3F2B;outline-offset:2px;border-radius:3px}
.field-note{margin-top:6px;font-size:.8rem;color:var(--text-mute);line-height:1.5}

/* ============================================================
   Cookie consent bar (injected by campaign.js when no choice stored)
   ============================================================ */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--ink);color:var(--on-ink);border-top:1px solid var(--hair-ink);
  display:flex;align-items:center;gap:clamp(14px,3vw,32px);flex-wrap:wrap;
  padding:clamp(14px,2vw,18px) var(--pad);
  box-shadow:0 -8px 24px rgba(0,0,0,.28);
}
.cookie-text{flex:1 1 320px;font-size:.9rem;line-height:1.5;color:var(--on-ink-mute);margin:0}
.cookie-text a{color:var(--on-ink);text-decoration:underline;text-underline-offset:2px}
/* Shorter copy is swapped in on mobile (see the max-width:560px block). */
.cookie-text-sm{display:none}
.cookie-btns{display:flex;gap:12px;flex:0 0 auto}
/* Accept and Reject at equal size/prominence so the choice is genuinely free. */
.cookie-btn{min-height:44px;padding:.7em 1.5em;font-size:.95rem;cursor:pointer}
button.cookie-btn{font-family:var(--font-body);font-weight:600}
button.cta-quiet.cookie-btn{color:var(--on-ink)}

/* Footer "Cookie preferences" reopener (a button styled as a footer link) */
.foot-nav .cookie-prefs{
  font-family:var(--font-mono);font-size:.72rem;color:var(--on-ink-mute);
  background:none;border:0;padding:0;cursor:pointer;transition:color .16s ease;
}
.foot-nav .cookie-prefs:hover{color:var(--on-ink)}
.foot-nav .cookie-prefs:focus-visible{outline:2px solid var(--on-ink-mute);outline-offset:3px;border-radius:2px}

@media(max-width:560px){
  /* Trim the mobile footprint: tighter padding, smaller copy, buttons on their
     own full-width row split evenly. 44px min-height is kept for tap targets. */
  .cookie-bar{padding-top:12px;padding-bottom:12px;gap:10px;box-shadow:0 -6px 18px rgba(0,0,0,.26)}
  .cookie-text{flex-basis:100%;font-size:.72rem;line-height:1.4}
  .cookie-text-lg{display:none}
  .cookie-text-sm{display:inline}
  .cookie-btns{flex:1 1 100%;gap:10px}
  .cookie-btn{flex:1;padding:.6em 1em;font-size:.9rem}
}

/* "Illustrative — sample data" disclaimers on the scorecard panel */
.sample-tag{
  margin-left:auto;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-mute);background:var(--paper-2);
  border:1px solid var(--hair-paper);border-radius:3px;padding:.35em .6em;
}
.sample-note{
  margin-top:14px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.03em;
  color:var(--text-mute);opacity:.9;
}
@media(max-width:560px){ .sample-tag{margin-left:0} }