/* ============================================================
   AngrySheep.ai — landing page
   Single self-contained file. Drop on Hostinger as index.html.
   Form is front-end only (see #wire-up comment near the script).
   ============================================================ */
:root{
  --bg:        oklch(0.165 0.012 55);   /* near-black warm charcoal (the canvas IS the brand) */
  --bg-2:      oklch(0.205 0.014 55);   /* raised surface */
  --bg-3:      oklch(0.255 0.016 58);   /* hairline-lifted surface */
  --ink:       oklch(0.945 0.018 90);   /* bone / wool — body */
  --ink-dim:   oklch(0.795 0.020 88);   /* muted bone (>=4.5:1 on --bg) */
  --ink-faint: oklch(0.62 0.018 86);    /* large/labels only */
  --accent:    oklch(0.685 0.205 38);   /* molten signal orange-red */
  --accent-hi: oklch(0.78 0.17 58);     /* hover / highlight */
  --line:      oklch(0.34 0.02 60);     /* borders */
  --line-soft: oklch(0.27 0.015 58);

  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 3rem);
  --r: 4px;                 /* tight, industrial radii */
  --ease: cubic-bezier(.16,1,.3,1);   /* ease-out-expo-ish */

  --z-nav: 100; --z-toast: 400;

  --font-display:"Anton", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,0.96rem + 0.25vw,1.12rem);
  line-height:1.6; font-weight:400; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* grain overlay — cheap, fixed, very subtle */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
::selection{background:var(--accent); color:oklch(0.16 0.01 55)}
:focus-visible{outline:2.5px dashed var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.eyebrow{font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}

h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:.92; letter-spacing:-0.02em; text-wrap:balance; text-transform:uppercase; margin:0}
h2{font-size:clamp(2.4rem,1.6rem + 4vw,5rem)}
h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); line-height:1}
p{text-wrap:pretty}
.lead{font-size:clamp(1.12rem,1.02rem + 0.6vw,1.4rem); color:var(--ink-dim); max-width:62ch; line-height:1.5}

/* ---------- buttons ---------- */
.btn{
  --by:.92rem; --bx:1.5rem;
  display:inline-flex; align-items:center; gap:.6rem; padding:var(--by) var(--bx);
  font-family:var(--font-body); font-weight:800; font-size:1rem; letter-spacing:-0.01em;
  border-radius:var(--r); border:2px solid transparent; line-height:1;
  transition:transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
  will-change:transform;
}
.btn-primary{background:var(--accent); color:oklch(0.16 0.012 55); box-shadow:0 0 0 0 var(--accent)}
.btn-primary:hover{background:var(--accent-hi); transform:translateY(-2px); box-shadow:0 12px 30px -10px var(--accent)}
.btn:disabled,.btn:disabled:hover{opacity:.72; cursor:progress; transform:none; box-shadow:0 0 0 0 var(--accent)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-lg{--by:1.15rem; --bx:2rem; font-size:1.1rem}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:var(--z-nav);
  backdrop-filter:saturate(1.2) blur(10px); background:color-mix(in oklch, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.45rem; letter-spacing:-0.01em; text-transform:uppercase}
.brand .dot{color:var(--accent)}
.brand svg{width:34px; height:34px}
.nav-links{display:flex; align-items:center; gap:1.8rem; font-weight:600; font-size:.96rem; color:var(--ink-dim)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{--by:.62rem; --bx:1.1rem; font-size:.92rem}
@media(max-width:760px){ .nav-links{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; z-index:2; padding:clamp(3rem,6vw,6rem) 0 clamp(3.5rem,7vw,7rem); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.22fr .82fr; gap:clamp(1.5rem,4vw,4rem); align-items:center}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:2.5rem} }
.hero h1{font-size:clamp(2.5rem,1.1rem + 6vw,4.8rem); margin:.4rem 0 0; letter-spacing:-0.035em}
.hero h1 .hit{color:var(--accent); display:inline-block}
.hero .lead{margin:1.6rem 0 2rem; font-size:clamp(1rem,.92rem + .4vw,1.18rem)}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.hero .micro{margin-top:1.3rem; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink-faint); display:flex; gap:1.3rem; flex-wrap:wrap}
.hero .micro b{color:var(--ink-dim); font-weight:700}

/* sheep stage */
.stage{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.stage .halo{position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, color-mix(in oklch,var(--accent) 40%,transparent), transparent 62%);
  filter:blur(18px); opacity:.55}
.stage .ring{position:absolute; inset:0; border:1px solid var(--line); border-radius:50%}
.stage .ring.r2{inset:9%; border-style:dashed; border-color:var(--line)}
.stage svg.sheep{width:74%; height:auto; position:relative; filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.spin{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* floating output chips around the sheep */
.chip-cloud{display:contents}
.chip{position:absolute; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.01em;
  background:color-mix(in oklch,var(--bg-2) 80%,transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid var(--line); color:var(--ink); padding:.32rem .52rem; border-radius:var(--r);
  display:flex; align-items:center; gap:.36rem; box-shadow:0 10px 24px -12px rgba(0,0,0,.7); white-space:nowrap}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block; flex:none; animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in oklch,var(--accent) 70%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
/* completed-result chips read as "locked in" */
.chip.done{border-color:color-mix(in oklch,var(--accent) 50%,var(--line)); background:color-mix(in oklch,var(--accent) 12%,var(--bg-2))}
.chip.done i{animation:none; box-shadow:none}
.chip .ok{color:var(--accent); font-weight:800; font-size:.95em; line-height:1; flex:none}
/* hazard stripe — industrial caution energy as a section divider */
.hazard{height:12px; background:repeating-linear-gradient(-45deg, var(--accent) 0 13px, oklch(0.16 0.012 55) 13px 26px); opacity:.92}
.chip.c1{top:2%;    left:-4%}
.chip.c2{top:-4%;   left:38%}
.chip.c3{top:2%;    right:-3%}
.chip.c4{top:26%;   right:-12%}
.chip.c5{top:62%;   right:-10%}
.chip.c6{bottom:2%; right:-2%}
.chip.c7{bottom:-4%; left:38%}
.chip.c8{bottom:2%; left:-3%}
.chip.c9{top:62%;   left:-10%}
.chip.c10{top:26%;  left:-12%}
.float{animation:float 6s var(--ease) infinite}
.float.d2{animation-delay:-.8s} .float.d3{animation-delay:-1.6s} .float.d4{animation-delay:-2.4s}
.float.d5{animation-delay:-3.2s} .float.d6{animation-delay:-4s} .float.d7{animation-delay:-4.8s} .float.d8{animation-delay:-5.4s}
.float.d9{animation-delay:-2.1s} .float.d10{animation-delay:-3.7s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- marquee ---------- */
.marquee{position:relative; z-index:2; border-block:1px solid var(--line-soft); background:var(--bg-2);
  overflow:hidden; padding:.9rem 0}
.marquee-track{display:flex; gap:3rem; width:max-content; animation:scroll 32s linear infinite; will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--font-display); font-size:1.1rem; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:3rem}
.marquee span::after{content:"●"; color:var(--accent); font-size:.6rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative; z-index:2}
.band{padding:clamp(4rem,8vw,7.5rem) 0}
.sec-head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head .eyebrow{display:block; margin-bottom:1rem}
.sec-head p{margin:1.2rem 0 0; color:var(--ink-dim); font-size:1.1rem}

/* problem */
.prob-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
.prob{background:var(--bg); padding:clamp(1.5rem,3vw,2.2rem); transition:background .25s var(--ease)}
.prob:hover{background:var(--bg-2)}
.prob .n{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:.8rem; letter-spacing:.1em}
.prob h3{margin:.8rem 0 .5rem; font-size:1.35rem}
.prob p{color:var(--ink-dim); font-size:1rem; margin:0}

/* how it works — a real ordered sequence, so numbers carry meaning */
.steps{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
.step{background:var(--bg); padding:clamp(1.6rem,3.5vw,2.6rem); display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.4rem); align-items:start}
.step .num{font-family:var(--font-display); font-size:clamp(2.6rem,2rem + 3vw,4.2rem); line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--line); position:relative; top:-.1em}
.step:hover .num{-webkit-text-stroke-color:var(--accent); transition:all .3s var(--ease)}
.step h3{font-size:clamp(1.5rem,1.2rem+1vw,2rem); margin-bottom:.6rem}
.step p{color:var(--ink-dim); max-width:60ch; margin:0}
.step .tag{display:inline-block; margin-top:.9rem; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); border:1px solid var(--line); padding:.3rem .6rem; border-radius:99px}

/* what you get — sample creative tiles (product output, not blank blocks) */
.outputs{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.1rem}
.tile{background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:transform .3s var(--ease), border-color .3s var(--ease)}
.tile:hover{transform:translateY(-5px); border-color:var(--line)}
.tile .pane{aspect-ratio:4/5; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem; overflow:hidden}
.tile .pane.a{background:linear-gradient(155deg, oklch(0.5 0.16 38), oklch(0.28 0.08 30))}
.tile .pane.b{background:linear-gradient(155deg, oklch(0.42 0.10 250), oklch(0.22 0.05 250))}
.tile .pane.c{background:linear-gradient(155deg, oklch(0.46 0.12 150), oklch(0.2 0.05 150))}
.tile .kicker{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:oklch(0.97 0.02 90); opacity:.8}
.tile .adhead{font-family:var(--font-display); font-size:clamp(1.4rem,1.1rem+1.2vw,1.9rem); line-height:.95; text-transform:uppercase; color:oklch(0.98 0.015 95)}
.tile .fakecta{align-self:flex-start; font-weight:800; font-size:.8rem; background:oklch(0.98 0.01 95); color:oklch(0.2 0.02 40); padding:.45rem .8rem; border-radius:99px}
.tile .badge{position:absolute; top:.8rem; right:.8rem; font-family:var(--font-mono); font-weight:700; font-size:.64rem; letter-spacing:.05em; background:rgba(0,0,0,.45); color:#fff; padding:.3rem .55rem; border-radius:99px; backdrop-filter:blur(4px)}
.tile .meta{padding:.9rem 1.1rem; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-dim)}
.tile .meta b{color:var(--ink); font-weight:700}
.play{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:grid;place-items:center;align-self:center;margin:auto;border:1.5px solid rgba(255,255,255,.6)}
.play::before{content:"";border-left:13px solid #fff;border-block:8px solid transparent;margin-left:3px}

/* differentiator — split */
.diff{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.5rem)}
@media(max-width:820px){ .diff{grid-template-columns:1fr} }
.diff .col{border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.4rem); background:var(--bg)}
.diff .col.them h3{color:var(--ink-dim)}
.diff .col h3{font-size:1.4rem; margin-bottom:1.2rem}
.diff ul{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.diff li{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-dim); font-size:1rem}
.diff li .mk{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:900; margin-top:.15rem}
.diff .them .mk{background:var(--bg-3); color:var(--ink-faint)}
.diff .us .mk{background:var(--accent); color:oklch(0.18 0.01 50)}
.diff .us li{color:var(--ink)}

/* manifesto band */
.manifesto{background:var(--bg-2); text-align:center; position:relative; overflow:hidden}
.manifesto::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 120%, color-mix(in oklch,var(--accent) 22%,transparent), transparent 60%); pointer-events:none}
.manifesto .wrap{position:relative}
.manifesto .eyebrow{display:inline-block; margin-bottom:1.3rem}
.manifesto h2{max-width:17ch; margin-inline:auto; line-height:.96}
.manifesto h2 .hit{color:var(--accent)}
.manifesto p{max-width:58ch; margin:1.7rem auto 0; color:var(--ink-dim); font-size:clamp(1.05rem,1rem + .4vw,1.25rem)}

/* pricing teaser */
.price-free{border:1px solid var(--accent); border-radius:var(--r); padding:clamp(1.6rem,4vw,2.6rem); background:linear-gradient(180deg,color-mix(in oklch,var(--accent) 10%,var(--bg)),var(--bg)); margin-bottom:1.5rem; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between}
.price-free h3{font-size:clamp(1.6rem,1.2rem+1.6vw,2.4rem)}
.price-free p{margin:.6rem 0 0; color:var(--ink-dim); max-width:46ch}
.assets{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem}
.asset{border:1px solid var(--line-soft); border-radius:var(--r); padding:1.5rem; background:var(--bg-2); transition:transform .2s var(--ease), border-color .2s var(--ease)}
.asset:hover{transform:translateY(-3px); border-color:var(--ink-faint)}
.asset .t{font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; line-height:1}
.asset .d{color:var(--ink-dim); font-size:.95rem; margin:.5rem 0 1.1rem; min-height:2.6em}
.asset .pr{font-family:var(--font-mono); font-weight:700; font-size:1.6rem; color:var(--accent)}
.asset .pr small{font-size:.8rem; color:var(--ink-faint); font-weight:500}
.price-note{margin-top:1.4rem; font-family:var(--font-mono); font-size:.82rem; color:var(--ink-faint)}

/* faq */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft); padding:1.3rem 0}
.faq summary{display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:44px; cursor:pointer; list-style:none; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.1rem,1rem+.6vw,1.45rem); letter-spacing:-0.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; font-family:var(--font-body); font-weight:400; font-size:1.6rem; color:var(--accent); transition:transform .25s var(--ease)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq p{color:var(--ink-dim); margin:.9rem 0 0; max-width:70ch}

/* final CTA */
.final{text-align:center; padding:clamp(4rem,9vw,8rem) 0; position:relative; z-index:2}
.final h2{margin-bottom:1.2rem}
.final h2 .hit{color:var(--accent)}
.final .lead{margin:0 auto 2.2rem}
.signup{max-width:520px; margin-inline:auto}
.field{display:flex; gap:.6rem; flex-wrap:wrap}
.field input{flex:1 1 240px; background:var(--bg-2); border:2px solid var(--line); color:var(--ink); border-radius:var(--r); padding:1.05rem 1.1rem; font:inherit; font-size:1rem}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus{border-color:var(--accent); outline:none}
.signup .opt{margin-top:.6rem}
.signup .opt input{width:100%; background:var(--bg-2); border:2px solid var(--line); color:var(--ink); border-radius:var(--r); padding:1.05rem 1.1rem; font:inherit; font-size:1rem}
.signup .opt input::placeholder{color:var(--ink-faint)}
.signup .opt input:focus{border-color:var(--accent); outline:none}
.form-note{margin-top:.9rem; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint)}
.form-note.is-error{color:var(--accent-hi)}
.success{display:none; border:1px solid var(--accent); border-radius:var(--r); padding:1.6rem; background:color-mix(in oklch,var(--accent) 8%,var(--bg))}
.success.show{display:block; animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.success h3{font-size:1.6rem; color:var(--accent)}
.success p{color:var(--ink-dim); margin:.6rem 0 0}

/* footer */
footer{border-top:1px solid var(--line-soft); padding:2.5rem 0; position:relative; z-index:2}
footer .wrap{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; color:var(--ink-faint); font-size:.88rem}
footer .brand{font-size:1.2rem}

/* reveal: visible by default; only hidden when JS is on (no blank ship) */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none}
.js .hero [data-reveal]{transition-delay:calc(var(--i,0)*70ms)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1; transform:none}
  .marquee-track,.spin,.float{animation:none}
}

/* what we won't do — honest-by-contrast */
.wont{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
.wont li{background:var(--bg); padding:clamp(1.3rem,2.6vw,1.9rem); display:flex; gap:1rem; align-items:flex-start}
.wont .mk{flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent); color:oklch(0.18 0.01 50); display:grid; place-items:center; font-weight:900; font-size:.8rem; margin-top:.1rem}
.wont b{display:block; font-size:clamp(1.05rem,1rem + .4vw,1.2rem); margin-bottom:.3rem; color:var(--ink)}
.wont .t{color:var(--ink-dim); font-size:1rem}

/* ===== two-tone section headlines (match the hero contrast) ===== */
.sec-head h2 .hit{color:var(--accent)}
/* keep "ad-volume problem." on one line (was wrapping at the 5rem cap) */
/* every section headline uses the SAME global h2 size; these heads just get more
   room so their long lines fit on one line at that size (no per-section shrinking) */
#problem .sec-head, #cadence .sec-head, #trust .sec-head{max-width:none}
#problem .sec-head p, #cadence .sec-head p, #trust .sec-head p{max-width:62ch}
#cadence .sec-head{text-align:center; margin-inline:auto}
#cadence .sec-head p{margin-inline:auto}

/* ===== market-reality viz panel ===== */
.viz-panel{display:grid; grid-template-columns:.85fr 1.25fr; gap:clamp(1.4rem,4vw,3rem); align-items:center; margin-top:clamp(2rem,4vw,3rem); border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); padding:clamp(1.4rem,3.5vw,2.6rem)}
@media(max-width:720px){ .viz-panel{grid-template-columns:1fr; gap:1.8rem} }
.viz-stats{display:grid; gap:1.25rem}
.vstat b{display:block; font-family:var(--font-display); font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem); color:var(--accent); line-height:.85; letter-spacing:-0.02em}
.vstat span{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-dim); letter-spacing:.01em}
.viz-chart svg{width:100%; height:auto; display:block}
.viz-cap{display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); letter-spacing:.04em}
.fc-area{fill:#FE5E26; opacity:.16}
.fc-line{fill:none; stroke:#FE5E26; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.fc-axis{stroke:#40362E; stroke-width:1}
.fc-dash{stroke:#8B867A; stroke-width:1; stroke-dasharray:3 3}
.fc-dot{fill:#FE5E26}
.fc-lbl{fill:#8B867A; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em}
.fc-lbl-hi{fill:#C1BCAE; font-family:var(--font-mono); font-size:10px}

/* ===== distinctness bar comparison ===== */
.distinct{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,3vw,1.8rem); margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
@media(max-width:560px){ .distinct{grid-template-columns:1fr} }
.dcol{border:1px solid var(--line-soft); border-radius:var(--r); padding:1.1rem 1.2rem; background:var(--bg-2)}
.dcol .dlabel{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.9rem; display:flex; justify-content:space-between; gap:.5rem}
.dbars{display:flex; align-items:flex-end; gap:5px; height:84px}
.dbars i{flex:1; border-radius:2px 2px 0 0; min-height:4px}
.dcol.them .dlabel{color:var(--ink-faint)}
.dcol.them .dbars i{background:oklch(0.56 0.014 60)}
.dcol.us .dlabel{color:var(--accent)}
.dcol.us .dbars i{background:var(--accent)}

/* ===== per-step mini viz ===== */
.steps .step{grid-template-columns:auto 1fr}
.step-viz{align-self:center; padding-left:1rem}
.step-viz svg{width:92px; height:64px; display:block}
.sv-bar{fill:#FE5E26}
.sv-bar-dim{fill:#29211B}
.sv-dot{fill:#29211B}
.sv-dot-hi{fill:#FE5E26}
@media(max-width:780px){ .steps .step{grid-template-columns:auto 1fr} .step-viz{display:none} }

/* ===== scroll-in viz animation (gated behind .js; reset under reduced-motion) ===== */
/* fatigue curve draws itself, then fill + markers fade in */
.js .viz-chart .fc-line{stroke-dasharray:1; stroke-dashoffset:1}
.js .viz-panel.in .fc-line{stroke-dashoffset:0; transition:stroke-dashoffset 1.7s var(--ease) .15s}
.js .viz-chart .fc-area,.js .viz-chart .fc-dot,.js .viz-chart .fc-dash,.js .viz-chart .fc-lbl,.js .viz-chart .fc-lbl-hi{opacity:0}
.js .viz-panel.in .fc-area{opacity:1; transition:opacity .7s ease 1s}
.js .viz-panel.in .fc-dot,.js .viz-panel.in .fc-dash,.js .viz-panel.in .fc-lbl,.js .viz-panel.in .fc-lbl-hi{opacity:1; transition:opacity .6s ease 1.35s}
/* stat numbers populate in sequence */
.js .viz-panel .vstat{opacity:0; transform:translateY(12px)}
.js .viz-panel.in .vstat{opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease)}
.js .viz-panel.in .vstat:nth-child(1){transition-delay:.1s}
.js .viz-panel.in .vstat:nth-child(2){transition-delay:.25s}
.js .viz-panel.in .vstat:nth-child(3){transition-delay:.4s}
/* distinctness bars grow from the baseline, staggered */
.js .distinct .dbars i{transform:scaleY(.04); transform-origin:bottom}
.js .distinct.in .dbars i{transform:scaleY(1); transition:transform .6s var(--ease)}
.js .distinct.in .dbars i:nth-child(2){transition-delay:.06s}
.js .distinct.in .dbars i:nth-child(3){transition-delay:.12s}
.js .distinct.in .dbars i:nth-child(4){transition-delay:.18s}
.js .distinct.in .dbars i:nth-child(5){transition-delay:.24s}
.js .distinct.in .dbars i:nth-child(6){transition-delay:.3s}
.js .distinct.in .dbars i:nth-child(7){transition-delay:.36s}
/* magnetic CTA needs its own transition for the spring-back */
.js .btn.magnetic{transition:transform .25s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .js .viz-chart .fc-line{stroke-dasharray:none; stroke-dashoffset:0}
  .js .viz-chart .fc-area,.js .viz-chart .fc-dot,.js .viz-chart .fc-dash,.js .viz-chart .fc-lbl,.js .viz-chart .fc-lbl-hi,.js .viz-panel .vstat{opacity:1; transform:none}
  .js .distinct .dbars i{transform:none}
}

/* ===== distinctness caption (explains what the bars mean) ===== */
.distinct-cap{grid-column:1/-1; margin:.4rem auto 0; max-width:62ch; text-align:center;
  font-family:var(--font-mono); font-size:.76rem; line-height:1.6; letter-spacing:.01em; color:var(--ink-faint)}
.distinct-cap em{font-style:normal; color:var(--ink-dim)}

/* ===== built-by: three roles merge into one system ===== */
.merge{display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1rem,3vw,2.2rem); margin-top:clamp(2rem,4vw,3rem)}
.merge-roles{display:flex; flex-direction:column; gap:.6rem}
.merge .role{display:flex; flex-direction:column; gap:.16rem; border:1px solid var(--line-soft);
  border-radius:var(--r); padding:.6rem 1rem; background:var(--bg-2)}
.merge .role b{font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dim); white-space:nowrap}
.merge .role i{font-style:normal; font-family:var(--font-body); font-size:.82rem; letter-spacing:0; color:var(--ink-faint)}
.merge-arrow{font-family:var(--font-display); color:var(--accent); font-size:2.2rem; line-height:1; flex:none}
.merge-one{display:flex; align-items:center; gap:.85rem; border:1px solid var(--accent); border-radius:var(--r);
  padding:1rem 1.5rem; background:color-mix(in oklch,var(--accent) 12%,var(--bg-2))}
.merge-one .sheep{width:54px; height:54px; flex:none}
.merge-one span{font-family:var(--font-body); font-size:1.05rem; line-height:1.25; color:var(--ink-dim)}
.merge-one b{color:var(--ink); font-weight:800}
@media(max-width:600px){
  .merge{flex-direction:column; align-items:stretch}
  .merge-roles{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .merge-arrow{transform:rotate(90deg); align-self:center}
  .merge-one{justify-content:center}
}
/* built-by section: text left, visual right */
.built-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.built-grid .sec-head{margin-bottom:0; max-width:none}
.built-grid .merge{flex-direction:column; align-items:stretch; margin-top:0; gap:1rem}
.built-grid .merge-roles{flex-direction:column}
.built-grid .merge-arrow{transform:rotate(90deg); align-self:center}
.built-grid .merge-one{justify-content:flex-start}
@media(max-width:900px){ .built-grid{grid-template-columns:1fr; gap:2.4rem} }

/* ===== funnel coverage scorecard ===== */
.funnel{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(2rem,4vw,3rem)}
.fstage{border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); padding:clamp(1.1rem,2.4vw,1.6rem); display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden}
.fstage .fkick{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--ink-faint)}
.fstage h3{margin:0; font-size:1.3rem; line-height:1}
.fstage .frole{color:var(--ink-faint); font-size:.86rem; margin:0; min-height:2.6em}
.fscore{display:flex; align-items:baseline; gap:.35rem; margin-top:.1rem}
.fscore b{font-family:var(--font-display); font-size:2.6rem; line-height:.85}
.fscore span{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint)}
.fgauge{height:8px; border-radius:99px; background:color-mix(in oklch,var(--ink) 12%,transparent); overflow:hidden}
.fgauge i{display:block; height:100%; border-radius:99px}
.fstatus{font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.08em; align-self:flex-start; padding:.22rem .55rem; border-radius:99px}
.fdiag{color:var(--ink-dim); font-size:.9rem; margin:.1rem 0 0; line-height:1.45}
.fstage.gap{border-color:color-mix(in oklch,var(--accent) 45%,var(--line-soft))}
.fstage.gap::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.fstage.gap .fscore b{color:var(--accent)}
.fstage.gap .fgauge i{background:var(--accent)}
.fstage.gap .fstatus{color:var(--accent); background:color-mix(in oklch,var(--accent) 14%,transparent)}
.fstage.healthy .fscore b{color:var(--ink)}
.fstage.healthy .fgauge i{background:var(--ink-dim)}
.fstage.healthy .fstatus{color:var(--ink-dim); background:color-mix(in oklch,var(--ink) 10%,transparent)}
.funnel-note{font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); letter-spacing:.02em; margin:1rem 0 0; text-align:center}
.funnel-note em{font-style:normal; color:var(--accent)}
.funnel-foot{margin-top:clamp(1.4rem,3vw,2rem); display:grid; gap:.85rem}
.funnel-foot .takeaway{border-left:3px solid var(--accent); background:var(--bg-2); padding:1rem 1.2rem; border-radius:0 var(--r) var(--r) 0; color:var(--ink-dim); margin:0; font-size:1rem; line-height:1.55}
.funnel-foot .takeaway b{color:var(--ink)}
.funnel-foot .whatwedo{margin:0; font-size:1.05rem; color:var(--ink); max-width:70ch}
.funnel-foot .whatwedo b{color:var(--accent)}
.js .funnel .fgauge i{transform:scaleX(.03); transform-origin:left}
.js .funnel.in .fgauge i{transform:scaleX(1); transition:transform .8s var(--ease)}
@media(max-width:760px){ .funnel{grid-template-columns:1fr} .fstage .frole{min-height:0} }

/* ===== quality guarantee / risk reversal ===== */
.guarantee-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.2rem); margin-top:clamp(1.6rem,3vw,2.4rem)}
.gstep{border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); padding:clamp(1.1rem,2.4vw,1.6rem); display:flex; flex-direction:column; gap:.5rem}
.gstep .gnum{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:.8rem; letter-spacing:.1em}
.gstep h3{margin:0; font-size:1.15rem}
.gstep p{margin:0; color:var(--ink-dim); font-size:.95rem; line-height:1.5}
.guarantee-seal{margin-top:clamp(1.4rem,3vw,2rem); border:1px solid color-mix(in oklch,var(--accent) 45%,var(--line)); background:color-mix(in oklch,var(--accent) 10%,var(--bg-2)); border-radius:var(--r); padding:clamp(1.3rem,3vw,1.9rem); display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem}
.guarantee-seal .gstamp{font-family:var(--font-mono); font-weight:700; font-size:.72rem; letter-spacing:.1em; color:var(--accent); border:1px dashed color-mix(in oklch,var(--accent) 55%,var(--line)); border-radius:99px; padding:.5rem .85rem; flex:none}
.guarantee-seal .gtext{flex:1; min-width:260px}
.guarantee-seal .gtext .gbig{display:block; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.2rem,1rem + 1vw,1.7rem); line-height:1.06; letter-spacing:-0.01em; color:var(--ink)}
.guarantee-seal .gtext .gsub{display:block; margin-top:.6rem; color:var(--ink-dim); font-size:.95rem; line-height:1.5}
@media(max-width:760px){ .guarantee-grid{grid-template-columns:1fr} }

/* ===== weekly cadence loop (agile, re-tuned every week) ===== */
.cadence{display:flex; align-items:stretch; gap:clamp(.6rem,1.6vw,1.4rem); margin-top:clamp(2rem,4vw,3rem)}
.cnode{flex:1; display:flex; flex-direction:column; gap:.45rem}
.cnode .ck{font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.cnode b{font-size:1.15rem; line-height:1.18; color:var(--ink); letter-spacing:-0.01em}
.cnode p{margin:0; color:var(--ink-dim); font-size:.92rem; line-height:1.45}
.carr{font-family:var(--font-display); color:var(--accent); font-size:1.7rem; line-height:1; flex:none; align-self:center; opacity:.85}
.cadence-loop{position:relative; height:clamp(34px,5vw,46px); margin-top:clamp(1.4rem,3vw,2.1rem)}
.cadence-loop::before{content:""; position:absolute; inset:0 10px; border:1px dashed var(--line); border-top:0; border-radius:0 0 16px 16px}
.cadence-loop::after{content:""; position:absolute; left:5px; top:-4px; width:0; height:0; border:5px solid transparent; border-bottom-color:var(--accent)}
.cl-badge{position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  white-space:nowrap; border:1px solid color-mix(in oklch,var(--accent) 45%,var(--line)); border-radius:99px;
  padding:.42rem .85rem; background:var(--bg)}
.cl-spin{display:inline-block; font-size:1.1em; line-height:1; animation:spin 9s linear infinite}
.cadence-foot{margin-top:clamp(1.6rem,3vw,2.2rem); font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:-0.01em; font-size:clamp(1.15rem,.95rem + 1vw,1.6rem); line-height:1.05; color:var(--ink-dim); margin-bottom:0}
.cadence-foot b{color:var(--accent); font-weight:400}
@media (prefers-reduced-motion:reduce){ .cl-spin{animation:none} }
@media(max-width:760px){
  .cadence{flex-direction:column; align-items:stretch; gap:0}
  .carr{transform:rotate(90deg); align-self:flex-start; margin:.7rem 0 .7rem .4rem}
  .cadence-loop{height:auto; text-align:center; margin-top:1.4rem}
  .cadence-loop::before,.cadence-loop::after{display:none}
  .cl-badge{position:static; transform:none}
}

/* ===== mobile UX pass (phones) ===== */
@media(max-width:640px){
  /* center the hero + put the sheep between the headline and the sub-headline */
  .hero-grid{display:flex; flex-direction:column; gap:0}
  .hero-copy{display:contents; text-align:center}
  .hero .stage{order:1; margin:1.3rem 0 .2rem}
  .hero .lead{order:2}
  .hero .cta-row{flex-direction:column; align-items:stretch; order:3}
  .hero .cta-row .btn{width:100%; justify-content:center}
  .hero .micro{justify-content:center; order:4}
  .sec-head{text-align:center}
  /* free-batch CTA block: stack + full-width button */
  .price-free{flex-direction:column; text-align:center}
  .price-free .btn{width:100%; justify-content:center}
  /* signup form: stack, full-width, centered */
  .field{flex-direction:column}
  .field input{width:100%; flex:none}
  .signup button{width:100%; justify-content:center}
  /* larger touch targets */
  .nav .btn-primary{min-height:44px}
  /* footer: centered with roomier tap areas */
  footer .wrap{justify-content:center; text-align:center}
  footer .wrap a{padding-block:.25rem}
  footer .disclaimer{text-align:center}
  /* sheep stage: keep the desktop orbital look (rings + scattered tiles + float), scaled for phones */
  .stage svg.sheep{width:46%}
  .chip-cloud{display:contents}
  .chip{font-size:.42rem; padding:.24rem .4rem; gap:.26rem; top:auto; right:auto; bottom:auto; left:auto}
  .chip i{width:4px; height:4px}
  .chip.c1{top:1%;   left:-1%; right:auto}
  .chip.c2{top:11%;  right:-1%; left:auto}
  .chip.c3{top:21%;  left:-1%; right:auto}
  .chip.c4{top:31%;  right:-1%; left:auto}
  .chip.c5{top:41%;  left:-1%; right:auto}
  .chip.c6{top:51%;  right:-1%; left:auto; bottom:auto}
  .chip.c7{top:61%;  left:-1%; right:auto; bottom:auto}
  .chip.c8{top:71%;  right:-1%; left:auto; bottom:auto}
  .chip.c9{top:81%;  left:-1%; right:auto}
  .chip.c10{top:91%; right:-1%; left:auto}
  /* center card / stat / node / list content on mobile */
  .prob, .vstat, .asset, .price-note, .viz-cap, .cadence-foot, .funnel-foot .whatwedo{text-align:center}
  .fstage, .cnode, .gstep{text-align:center; align-items:center}
  .carr{align-self:center; margin:.7rem 0}
  .fstage .fgauge{width:100%; align-self:stretch}
  .fstage .fstatus{align-self:center}
  .guarantee-seal{justify-content:center; text-align:center}
  .merge .role{text-align:center; align-items:center}
  .merge-one{justify-content:center; text-align:center}
  /* checkmark / comparison lists stay left-aligned (icon beside text) */
  .funnel-foot .takeaway{text-align:center; border-left:0; border-radius:var(--r)}
}

/* hero audience selector (links between use-case pages) */
.audience-row{display:flex; flex-wrap:wrap; gap:.5rem .55rem; align-items:center; margin-top:1.5rem; font-family:var(--font-mono); font-size:.8rem}
.audience-row .ar-label{color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; margin-right:.2rem}
.audience-row a{border:1px solid var(--line); border-radius:99px; padding:.45rem .85rem; color:var(--ink-dim); white-space:nowrap; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease)}
.audience-row a:hover{border-color:var(--accent); color:var(--ink); background:color-mix(in oklch,var(--accent) 10%,transparent)}
.audience-row a[aria-current="page"]{border-color:var(--accent); color:var(--ink); background:color-mix(in oklch,var(--accent) 14%,transparent)}
@media(max-width:640px){ .audience-row{justify-content:center} }

/* anchor jumps land below the sticky nav */
section[id]{scroll-margin-top:84px}

/* long-form narrative prose (empathy section) */
.prose{max-width:66ch; margin-top:clamp(1.6rem,3vw,2.4rem)}
.prose p{color:var(--ink-dim); font-size:clamp(1.05rem,1rem + .35vw,1.28rem); line-height:1.6; margin:0 0 1.15rem}
.prose p:first-child{color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink)}

/* ============================================================
   REDESIGN v2: varied section layouts + CSS/SVG visualizations
   (kills the repeated text-card grids on the use-case pages)
   ============================================================ */
/* two-column: visualization + a short points list, alternating */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; margin-top:clamp(2rem,4vw,3.2rem)}
.split.rev .viz-card{order:2}
.split .pts{display:grid; gap:clamp(1.1rem,2.5vw,1.6rem)}
.split .pt{display:grid; gap:.3rem; padding-left:1rem; border-left:2px solid var(--line-soft)}
.split .pt.hot{border-left-color:var(--accent)}
.split .pt h3{font-size:clamp(1.1rem,1rem + .4vw,1.3rem); margin:0; line-height:1.15}
.split .pt p{margin:0; color:var(--ink-dim); font-size:1rem; line-height:1.5}
@media(max-width:820px){ .split{grid-template-columns:1fr; gap:1.8rem} .split.rev .viz-card{order:0} }
@media(max-width:640px){ .split .pt{text-align:left} }

/* visualization shell */
.viz-card{border:1px solid var(--line-soft); border-radius:var(--r); background:linear-gradient(180deg,var(--bg-2),color-mix(in oklch,var(--bg-2) 60%,var(--bg))); padding:clamp(1.3rem,3vw,2rem); position:relative; overflow:hidden}
.viz-card svg{width:100%; max-width:440px; height:auto; display:block; margin-inline:auto}
.viz-tag{position:absolute; top:.9rem; right:1rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase}
.viz-cap{display:block; margin-top:.9rem; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); letter-spacing:.01em; text-align:center}
/* shared svg primitives */
.v-axis{stroke:#40362E; stroke-width:1}
.v-grid{stroke:#2A241E; stroke-width:1; stroke-dasharray:2 4}
.v-lbl{font-family:var(--font-mono); font-size:10px; fill:#C1BCAE; letter-spacing:.02em}
.v-lbl-hi{font-family:var(--font-mono); font-size:10px; fill:#FE5E26; font-weight:700}
.v-bar{fill:#FE5E26}
.v-bar-dim{fill:#6C6158}
.v-line{fill:none; stroke:#FE5E26; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.v-line-dim{fill:none; stroke:#6C6158; stroke-width:2; stroke-dasharray:4 4; stroke-linecap:round}
.v-area{fill:#FE5E26; opacity:.14}
.v-dot{fill:#FE5E26}
.v-node{fill:#130D09; stroke:#40362E; stroke-width:1.5}
.v-node-hot{fill:#402214; stroke:#FE5E26; stroke-width:1.5}
.v-link{stroke:#40362E; stroke-width:1.5; fill:none}
.v-link-hot{stroke:#FE5E26; stroke-width:1.5; fill:none}
.v-ring{fill:none; stroke:#40362E; stroke-width:1.5}
.v-miss{fill:#6C6158}
.v-empty{fill:none; stroke:#FE5E26; stroke-width:1.5; stroke-dasharray:4 4}
/* reveal: draw lines + grow bars when the viz scrolls in */
.js .viz-card .v-grow{transform:scaleY(.02); transform-origin:bottom; transform-box:fill-box}
.js .viz-card.in .v-grow{transform:scaleY(1); transition:transform .7s var(--ease)}

/* cost statement band (no cards) */
.statband{margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.sb-grid{display:grid; grid-template-columns:repeat(3,1fr)}
.sb{padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.1rem,2.5vw,1.8rem); border-left:1px solid var(--line-soft)}
.sb:first-child{border-left:0}
.sb .sb-n{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:.78rem; letter-spacing:.06em}
.sb h3{margin:.7rem 0 .4rem; font-size:1.15rem; line-height:1.1}
.sb p{margin:0; color:var(--ink-dim); font-size:.95rem; line-height:1.5}
@media(max-width:760px){ .sb-grid{grid-template-columns:1fr} .sb{border-left:0; border-top:1px solid var(--line-soft)} .sb:first-child{border-top:0} }

/* horizontal timeline / flow (walkthrough) */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,2.2vw,1.6rem); margin-top:clamp(2rem,4vw,3rem); position:relative}
.flow .fl{position:relative; padding-top:2.4rem}
.flow .fl::before{content:""; position:absolute; top:11px; left:0; right:0; height:2px; background:var(--line-soft)}
.flow .fl:last-child::before{right:50%}
.flow .fl:first-child::before{left:50%}
.flow .fl .dot{position:absolute; top:4px; left:0; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); z-index:1}
.flow .fl .fn{font-family:var(--font-mono); font-size:.7rem; color:var(--accent); font-weight:700; letter-spacing:.06em}
.flow .fl h3{margin:.3rem 0 .35rem; font-size:1.08rem; line-height:1.12}
.flow .fl p{margin:0; color:var(--ink-dim); font-size:.92rem; line-height:1.45}
@media(max-width:820px){ .flow{grid-template-columns:1fr 1fr} .flow .fl::before,.flow .fl:first-child::before,.flow .fl:last-child::before{display:none} }
@media(max-width:520px){ .flow{grid-template-columns:1fr} }

/* compact proof row (distinct from the card grids) */
.proof-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(1.1rem,2.5vw,2rem); margin-top:clamp(2rem,4vw,3rem)}
.proof-row .pr{display:grid; gap:.5rem; padding-top:1rem; border-top:2px solid var(--accent)}
.proof-row .pr h3{margin:0; font-size:1.12rem; line-height:1.15}
.proof-row .pr p{margin:0; color:var(--ink-dim); font-size:.95rem; line-height:1.5}
@media(max-width:760px){ .proof-row{grid-template-columns:1fr} }

/* big stat comparison (startups cost) */
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2.2rem); align-items:center; margin-top:clamp(2rem,4vw,3rem)}
.vs .vcol{border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); padding:clamp(1.4rem,3vw,2.2rem); text-align:center}
.vs .vcol.win{border-color:color-mix(in oklch,var(--accent) 50%,var(--line)); background:color-mix(in oklch,var(--accent) 10%,var(--bg-2))}
.vs .vcol .vk{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase}
.vs .vcol .vbig{display:block; font-family:var(--font-display); font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); line-height:.9; margin:.5rem 0 .3rem; color:var(--ink)}
.vs .vcol.win .vbig{color:var(--accent)}
.vs .vcol .vsub{color:var(--ink-dim); font-size:.92rem}
.vs .vmid{font-family:var(--font-display); color:var(--ink-faint); font-size:1.4rem}
@media(max-width:640px){ .vs{grid-template-columns:1fr} .vs .vmid{transform:rotate(90deg)} }