/* ================================================================
   easeamazon — css/site.css  (design system v3 · "Lead Time")
   Extracted from the winning homepage candidate. One file, custom
   properties, no build step. Every page loads this.

   §01–§07 and §10 are the winner's rules verbatim — values are
   untouched; only the file organization is new. §09b EXTENDS the
   system for sibling pages in the winner's exact idiom.

   Scoping rules (hard):
   · §07 day-rail and §10 hero/horizon/sheet are HOMEPAGE-ONLY.
     Sibling pages use §08 .page-head (the quiet "rail echo").
   · Amber is risk/caveat only. Cyan is the single action color.
     No new colors anywhere — tokens only.

   Map: 01 tokens · 02 base · 03 type voices · 04 buttons · 05 nav ·
   06 footer · 07 day-rail · 08 section primitives · 09 components ·
   09b extensions · 10 page blocks (homepage) · 11 utilities ·
   12 motion
   ================================================================ */

/* ============ §01 tokens ============ */
:root{
  --bg:#0a0a0a;
  --s1:#101316;
  --s2:#14181c;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.17);
  /* pure white for text on dark (founder call, 2026-08-04): #f2efe8 text on
     #0a0a0a read faintly dingy because it was literally the bone SURFACE color
     doing double duty as ink. Text and surface tokens now differ: --paper is
     text-on-dark and is white; --bone stays #f2efe8 for surfaces. .bone
     re-points --paper to ink inside its own scope, so light sections are
     unaffected. The map builder canvas and PNG export keep the bone surface. */
  --paper:#fff;
  --muted:#b0bbc4;
  --dim:#8f99a3;
  --cyan:#00a8ff;
  --cyan-b:#54c4ff;
  --cyan-dim:rgba(0,168,255,.38);
  --cyan-faint:rgba(0,168,255,.14);
  --cyan-tint:rgba(0,168,255,.06);
  --amber:#ffb020;
  --amber-dim:rgba(255,176,32,.45);
  --green:#35c88a;
  --green-dim:rgba(53,200,138,.45);
  --red:#ff5f4a;
  --red-dim:rgba(255,95,74,.45);
  /* bone: the warm paper surface. Ink is the instrument, bone is the
     paperwork. See §09c. Warm on purpose — a cool white reads as "light
     mode", warm reads as a document you would print. */
  --bone:#f2efe8;
  /* cards sit ABOVE the section on a light surface (paper on a desk), the
     inverse of the dark theme where --s1 sits above --bg. Getting this
     backwards drains contrast from every word inside a card. */
  --bone2:#faf8f4;
  --bone3:#efece4;
  --bone-ink:#0d1418;
  --bone-muted:#3d4852;
  /* the bone ladder had collapsed: dim (#414c56) sat 4 points from muted
     (#3d4852), so paper sections spoke in two voices while dark sections
     speak in three. #57626c puts tertiary at 5.4:1, the same proportional
     step below muted (8.1:1) that the dark theme's dim takes below its
     muted. AA for text needs 4.5, so the whisper still passes with margin. */
  --bone-dim:#57626c;
  --bone-line:rgba(10,14,18,.16);
  --bone-line2:rgba(10,14,18,.28);
  --cyan-ink:#00568d;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* the rail crosses both surfaces, so its line cannot be white-alpha */
  --rail-ink:#6e757b;
  --rail-ink2:rgba(120,128,136,.30);
  --rail-w:76px;
  --rail-x:34px;
  --ml:clamp(56px,12.5vw,196px);
  --mr:clamp(18px,4.5vw,64px);
}
@media (max-width:720px){
  /* the 56px left gutter exists to clear the day-rail, which is HOMEPAGE ONLY.
     Applying it everywhere pushed every inner page off-centre. Symmetric by
     default; only rail-bearing sections reclaim the gutter. */
  :root{--rail-w:44px;--rail-x:16px;--ml:20px;--mr:20px}
  .page .container{margin-left:56px;margin-right:16px}
}

/* ============ §02 base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:90px}
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--paper);
  font:400 1.02rem/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--cyan);color:#04141f}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--cyan);color:#04141f;padding:10px 16px;font:600 .85rem var(--sans)}
.skip:focus{left:12px;top:12px}

.container{max-width:1160px;margin-left:var(--ml);margin-right:var(--mr)}

/* ============ §03 type voices ============ */
/* mono utility voice */
.k{font-family:var(--mono);font-weight:500;letter-spacing:.10em;text-transform:uppercase}
.eyebrow{display:block;font:500 .8rem/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}

h1,h2{font-weight:800;letter-spacing:-.034em;text-wrap:balance}
h3{font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.8rem,3.6vw,2.75rem);line-height:1.06;letter-spacing:-.032em}
h3{font-size:1.24rem;font-weight:600;letter-spacing:-.015em}
.sub{color:var(--muted);max-width:60ch;margin-top:18px;font-size:1.04rem}

/* ============ §04 buttons ============ */
.btn{display:inline-block;font:600 .92rem var(--sans);letter-spacing:-.005em;border-radius:4px;padding:.78em 1.4em;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn--primary{background:var(--cyan);color:#04141f}
.btn--primary:hover{background:var(--cyan-b)}
.btn--ghost{border-color:var(--line2);color:var(--paper)}
.btn--ghost:hover{border-color:var(--cyan-dim);color:var(--cyan-b)}
.btn--cyan{border-color:var(--cyan-dim);color:var(--cyan-b)}
.btn--cyan:hover{border-color:var(--cyan);background:var(--cyan-tint)}
.btn--full{display:block;text-align:center}
.btn--lg{font-size:1rem;padding:.95em 1.7em}
/* success flash (contact-form JS contract; success is never green) */
.btn.is-sent{background:var(--paper);color:#04141f;border-color:transparent}

/* ============ §05 nav ============ */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){.nav{background:rgba(10,10,10,.86);backdrop-filter:saturate(140%) blur(14px)}}
.nav__inner{display:flex;align-items:center;gap:26px;padding:0 var(--mr) 0 var(--ml);height:64px}
.nav__logo{display:inline-flex;align-items:center;padding:8px 0}
.nav__logo img{height:24px;width:auto}
.nav__links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav__links a{font:500 .88rem var(--sans);color:var(--muted);padding:6px 2px;transition:color .2s}
.nav__links a:hover{color:var(--paper)}
/* ---------- nav dropdowns (Free tools, Compare) -----------------------------
   CSS-only: hover opens, :focus-within opens for keyboard, and the top-level
   item is a real link to its hub page, which lists everything the panel lists.
   That last part is the touch story: no hover on a touchpad-less screen means
   a tap simply navigates to the hub, and nothing is unreachable. Desktop-only
   by construction, since .nav__links is display:none under 1161px. */
.nav__drop{position:relative;display:flex;align-items:center}
.nav__drop>a{display:inline-flex;align-items:center;gap:7px}
.nav__drop>a::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.5;transition:transform .18s ease}
.nav__drop:hover>a::after,.nav__drop:focus-within>a::after{transform:rotate(180deg)}
.nav__panel{position:absolute;top:100%;left:-14px;z-index:70;min-width:238px;
  background:var(--s1);border:1px solid var(--line2);border-radius:8px;padding:8px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav__panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel{opacity:1;visibility:visible;transform:none;margin-top:12px}
.nav__panel a{display:block;padding:9px 12px;border-radius:5px;font:500 .86rem var(--sans);color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.nav__panel a:hover{background:var(--s2);color:var(--paper)}
.nav__panel a.nav__panelall{margin-top:4px;border-top:1px solid var(--line);border-radius:0;color:var(--cyan)}
@media (prefers-reduced-motion:reduce){.nav__panel,.nav__drop>a::after{transition:none}}
/* seven pages gave no indication of where you were standing */
.nav__links a[aria-current=page]{color:var(--paper);position:relative}
.nav__links a[aria-current=page]::after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:2px;background:var(--cyan);border-radius:2px}
.mmenu a[aria-current=page]{color:var(--cyan-b)}
.nav__book{margin-left:6px;padding:.6em 1.1em;font-size:.86rem}
.nav__toggle{min-height:44px;display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:4px;width:44px;height:40px;cursor:pointer;position:relative}
.nav__toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--paper);transition:transform .25s,opacity .2s}
.nav__toggle span:nth-child(1){top:13px}
.nav__toggle span:nth-child(2){top:19px}
.nav__toggle span:nth-child(3){top:25px}
html.menu-open .nav__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
html.menu-open .nav__toggle span:nth-child(2){opacity:0}
html.menu-open .nav__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mmenu{position:fixed;inset:64px 0 0 0;z-index:55;background:var(--bg);padding:34px var(--mr) 40px var(--ml);visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;overflow-y:auto}
html.menu-open .mmenu{visibility:visible;opacity:1}
html.menu-open body{overflow:hidden}
.mmenu a{display:block;font:600 1.4rem/1 var(--sans);letter-spacing:-.02em;padding:15px 0;border-bottom:1px solid var(--line)}
.mmenu a:hover{color:var(--cyan-b)}
.mmenu .btn{margin-top:26px;border:none;text-align:center;font-size:1.05rem;width:100%}
.mmenu__tag{margin-top:28px;font:500 .66rem var(--mono);letter-spacing:.11em;color:var(--dim);text-transform:uppercase}
/* winner used 1080px with 6 links; Partners (7th link) needs the room —
   collapse point raised so desktop links never wrap. Sole layout change. */
@media (max-width:1160px){
  .nav__links{display:none}
  .nav__book{display:none}
  .nav__toggle{min-height:44px;display:block}
}

/* ============ §06 footer ============ */
.footer{border-top:1px solid var(--line);margin-top:0;padding:64px 0 40px}
.footer__grid{display:grid;grid-template-columns:minmax(220px,1.3fr) 1fr 1fr;gap:44px}
.footer__brand>a:not(.btn){display:inline-flex;align-items:center;padding:9px 0}
.footer__brand img{height:22px;width:auto}
.footer__brand p{color:var(--muted);font-size:.9rem;margin-top:16px;max-width:34ch}
.footer h3{font:500 .64rem/1 var(--mono);letter-spacing:.11em;color:var(--dim);text-transform:uppercase;margin-bottom:16px}
.footer li{margin-bottom:0}
.footer li a{display:inline-block;padding:7px 0;color:var(--muted);font-size:.92rem;transition:color .2s}
.footer li a:hover{color:var(--paper)}
.footer__cta{margin-top:22px}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.footer__bottom p{color:var(--dim);font-size:.84rem}
.footer__bottom .k{font-size:.62rem;color:var(--dim)}
@media (max-width:880px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}

/* ============ §07 the time rail — HOMEPAGE ONLY ============ */
/* The rail, its docks, and the live DAY cursor are the homepage's
   signature. Never put this markup on a sibling page — siblings use
   §08 .page-head. site.js only engages the mechanics when
   #page/#rail/#railCursor/#dayNum all exist. */
.page{position:relative}
.rail{position:absolute;left:0;top:0;width:var(--rail-w);opacity:0;transition:opacity .5s;pointer-events:none;z-index:5}
.rail.ready{opacity:1}
html:not(.js) .rail,html:not(.js) .rail__cursor{display:none}
.rail__line{position:absolute;left:var(--rail-x);top:0;bottom:0;width:1px;background:
  repeating-linear-gradient(to bottom,var(--rail-ink) 0,var(--rail-ink) 1px,transparent 1px,transparent 34px),
  linear-gradient(var(--rail-ink2),var(--rail-ink2))}
.rail__dock{position:absolute;left:0;width:calc(var(--ml) - 10px);padding-left:calc(var(--rail-x) + 12px);transition:color .4s}
.rail__dock::before{content:"";position:absolute;left:calc(var(--rail-x) - 5px);top:5px;width:11px;height:1px;background:var(--rail-ink);transition:background .4s}
.rail__dock b{display:block;font:600 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--muted);transition:color .4s}
.rail__dock span{display:block;margin-top:7px;font:500 .65rem/1.55 var(--mono);letter-spacing:.11em;color:var(--muted);text-transform:uppercase;max-width:min(132px,calc(var(--ml) - 58px))}
.rail__dock.past b{color:var(--cyan)}
.rail__dock.past::before{background:var(--cyan-dim)}
.rail__dock--felt.past b{color:var(--amber)}
.rail__dock--felt.past::before{background:var(--amber-dim)}
.rail__dock--end.past b{color:var(--red)}
.rail__dock--end.past::before{background:var(--red-dim)}
.rail__cursor{position:absolute;left:var(--rail-x);top:0;z-index:40;opacity:0;transition:opacity .35s;pointer-events:none;will-change:transform}
.rail__cursor.on{opacity:1}
.rail__cursor b{position:absolute;left:0;top:0;transform:translate(10px,-50%);display:block;font:600 .68rem/1 var(--mono);letter-spacing:.12em;color:var(--cyan);background:var(--bg);border:1px solid var(--cyan-dim);border-radius:3px;padding:5px 7px;white-space:nowrap}
@media (max-width:720px){
  .rail__dock span{display:none}
  .rail__dock b{font-size:.62rem}
  .rail__cursor b{transform:translate(8px,-50%);font-size:.6rem;padding:4px 5px;letter-spacing:.1em}
}

/* ============ §08 section primitives ============ */
section{padding-top:clamp(80px,11vh,124px)}

/* -- sibling page-header (the quiet "rail echo") ------------------- */
/* Interior pages open with .page-head instead of the homepage hero.
   .page-head__tick quotes the rail-dock idiom — 11px tick, mono day
   marker, uppercase label — as a STATIC accent. No line, no docks,
   no live counter. It takes the eyebrow slot (same cyan budget);
   pick a fixed day marker per page (D0 default). */
.page-head{padding:clamp(44px,6vh,72px) 0 0}
.page-head__tick{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.page-head__tick::before{content:"";width:11px;height:1px;background:var(--cyan-dim)}
.page-head__tick b{font:600 .8rem/1 var(--mono);letter-spacing:.1em;color:var(--cyan)}
.page-head__tick span{font:500 .74rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-head h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.03;letter-spacing:-.042em;max-width:16ch}
.page-head .sub{max-width:58ch}
.page-head__actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* -- breadcrumbs / back-link --------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:26px;font:500 .66rem/1.6 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--paper)}
.crumbs .sep{color:var(--dim)}
.crumbs .here{color:var(--paper)}
.backlink{display:inline-block;font:500 .7rem/1.6 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.backlink:hover{color:var(--cyan-b)}

/* ============ §09 components ============ */

/* -- chips (shared: sheet rows, blog tags, stack ownership) -------- */
a.chip{transition:border-color .15s,color .15s}
a.chip:hover{border-color:var(--cyan);color:var(--cyan-b)}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 .64rem var(--mono);letter-spacing:.09em;padding:4px 8px;border-radius:3px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.chip--cyan{color:var(--cyan-b);border-color:var(--cyan-dim);background:var(--cyan-tint)}
.chip--amber{color:var(--amber);border-color:var(--amber-dim);background:rgba(255,176,32,.09)}
.chip--green{color:var(--green);border-color:var(--green-dim);background:rgba(53,200,138,.09)}
.chip--red{color:var(--red);border-color:var(--red-dim);background:rgba(255,95,74,.09)}

/* -- failure ledger (red = when it hurts, cyan = when decided) ----- */
.frow{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:16px 48px;padding:28px 0;border-top:1px solid var(--line);align-items:center}
.frow:last-of-type{border-bottom:1px solid var(--line)}
.frow h3{margin-bottom:8px}
.frow p{color:var(--muted);max-width:54ch;font-size:.98rem}
.fmeta{display:flex;flex-direction:column;gap:12px;text-align:right}
.fmeta div{font:500 .66rem/1.55 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fmeta b{display:block;font:600 .92rem/1.4 var(--sans);letter-spacing:0;text-transform:none}
.fmeta .felt b{color:var(--red)}
.fmeta .dec b{color:var(--cyan)}
.fnote{margin-top:26px;font:400 .82rem/1.7 var(--mono);letter-spacing:.01em;color:var(--muted);max-width:70ch}
.fnote em{color:var(--red);font-style:normal}
@media (max-width:880px){
  .frow{grid-template-columns:1fr;gap:14px;align-items:start}
  .fmeta{flex-direction:row;flex-wrap:wrap;gap:8px 28px;text-align:left}
}

/* -- steps (dashed timeline) --------------------------------------- */
.steps{margin-top:46px;position:relative;max-width:760px}
.step{position:relative;padding:0 0 46px 42px;border-left:1px dashed var(--line2);margin-left:4px}
.step:last-of-type{padding-bottom:8px}
.step::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px var(--bg)}
.step__chip{display:inline-block;font:600 .64rem/1 var(--mono);letter-spacing:.10em;color:var(--cyan);border:1px solid var(--cyan-dim);border-radius:3px;padding:6px 9px;margin-bottom:14px}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);max-width:54ch;font-size:.98rem}
.steps__loop{position:relative;margin-left:4px;padding:18px 0 0 42px;font:400 .88rem/1.7 var(--mono);letter-spacing:.01em;color:var(--muted)}
/* the loop carries a real chip + heading + copy like a .step does. Without
   these resets its own mono-caps font cascades into them and the closing
   beat of every timeline renders as a wall of grey uppercase. */
.steps__loop h3{margin:2px 0 8px;font:600 1.24rem/1.3 var(--sans);letter-spacing:-.015em;text-transform:none;color:var(--paper)}
.steps__loop p{font:400 .98rem/1.68 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);max-width:54ch}
.steps__loop::before{content:"";position:absolute;left:-4px;top:24px;width:7px;height:7px;border-radius:50%;border:1px solid var(--cyan-dim);background:var(--bg)}
.linkline{display:inline-block;margin-top:34px;margin-bottom:8px;font:600 .95rem var(--sans);color:var(--cyan-b);border:1px solid var(--cyan-dim);border-radius:4px;padding:11px 18px;transition:background .2s,border-color .2s}
.linkline:hover{background:var(--cyan-tint);border-color:var(--cyan)}

/* -- pricing: build band + two plans ------------------------------- */
.build{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 56px;border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:8px;background:var(--s1);padding:28px 30px;margin-top:44px;align-items:center}
.build__label{font:500 .66rem/1.7 var(--mono);letter-spacing:.10em;color:var(--dim);text-transform:uppercase}
.build__price{font:600 1.9rem/1.15 var(--mono);letter-spacing:-.02em;margin-top:6px;text-align:right}
.build__price small{font-size:.55em;color:var(--muted);letter-spacing:0}
.build p{color:var(--muted);font-size:.98rem;max-width:56ch}
.build p b{color:var(--paper);font-weight:600}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;max-width:980px}
.plan{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:30px 30px 26px;display:flex;flex-direction:column;align-items:stretch}
.plan--partner{border-color:var(--cyan-dim);background:var(--cyan-tint);position:relative}
.bone .plan--partner{
  background:var(--bg);border-color:var(--bg);color:#fff;
  --paper:#fff;--muted:#b0bbc4;--dim:#8f99a3;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);
  --s1:#101316;--s2:#14181c;
  --cyan:#00a8ff;--cyan-b:#54c4ff;--cyan-dim:rgba(0,168,255,.38);
  --cyan-faint:rgba(0,168,255,.14);--cyan-tint:rgba(0,168,255,.06);
  --green:#35c88a;--amber:#ffb020;--red:#ff5f4a}
.bone .plan--partner .btn--primary{background:var(--cyan);color:#04141f}
.bone .plan--partner .btn--primary:hover{background:var(--cyan-b)}
.bone .plan--partner .btn--ghost{border-color:rgba(255,255,255,.17);color:#fff}
.bone .plan--partner .btn--ghost:hover{border-color:var(--cyan);color:var(--cyan-b)}
.plan--partner::before{content:"Most brands start here";position:absolute;top:-11px;left:24px;font:600 .64rem/1 var(--mono);letter-spacing:.08em;color:var(--bg);background:var(--cyan);border-radius:3px;padding:5px 9px}
.bone .plan--partner::before{color:var(--bone);background:var(--cyan-ink)}
.plan__name{font:500 .68rem/1 var(--mono);letter-spacing:.11em;color:var(--cyan);text-transform:uppercase}
.plan__price{font:600 2.5rem/1.05 var(--mono);letter-spacing:-.03em;margin-top:14px}
.plan__price small{font-size:.38em;color:var(--muted);letter-spacing:.02em;font-weight:500}
.plan__tag{font-weight:600;letter-spacing:-.01em;margin-top:8px}
.checks{margin-top:18px;margin-bottom:24px;border-top:1px solid var(--line2)}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--muted);line-height:1.55}
.checks li svg{flex:none;margin-top:5px;color:var(--cyan)}
.checks li.you{color:var(--muted)}
.checks li.you svg{color:var(--dim)}
.plan .btn{margin-top:auto}
@media (max-width:880px){
  .build{grid-template-columns:1fr;gap:14px;padding:26px 24px}
  .plans{grid-template-columns:1fr}
  .plan{padding:26px 24px 24px}
}

/* -- pod fact + comparison table ----------------------------------- */
.podfact{display:block;margin-top:30px;font:400 .88rem/1.7 var(--mono);letter-spacing:.01em;color:var(--muted);border:1px solid var(--line2);border-left:2px solid var(--cyan-dim);border-radius:4px;padding:16px 20px;max-width:74ch}
.podfact b{color:var(--paper);font-weight:600}
.tablewrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line2);border-radius:8px}
.ctable{width:100%;min-width:640px;border-collapse:collapse;background:var(--s1)}
.ctable th{font:500 .64rem var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--dim);text-align:left;padding:16px 20px;border-bottom:1px solid var(--line2)}
.ctable th:last-child{color:var(--cyan)}
.ctable td{padding:15px 20px;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--muted);vertical-align:top}
.ctable tr:last-child td{border-bottom:none}
.ctable td:first-child{color:var(--paper);font-weight:500;min-width:210px}
.ctable td.y{color:var(--cyan);font-family:var(--mono);font-weight:600}
.ctable td.n{color:var(--dim);font-family:var(--mono)}
.ctable td.m{color:var(--muted);font-style:italic}
.ctable td.mono{font-family:var(--mono);font-size:.88rem}
/* fit/no-fit cells: a state, not a feature tick (see status palette, §01) */
.ctable td.g{color:var(--green);font-family:var(--mono);font-weight:600}
.ctable td.r{color:var(--red);font-family:var(--mono)}
.tablehint{display:none;margin-top:10px;font:500 .66rem var(--mono);letter-spacing:.10em;color:var(--dim);text-transform:uppercase}
@media (max-width:720px){
  /* clipping a value mid-word and hiding the Partner column entirely is worse
     than no table. Stack it: each row becomes a labelled pair of cells. */
  .tablehint{display:none}
  .tablewrap{overflow-x:visible;border:0;border-radius:0}
  .ctable{min-width:0;background:none}
  .ctable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ctable tr{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:14px 16px;margin-bottom:10px}
  .ctable td{border:0;padding:5px 0}
  .ctable td:first-child{grid-column:1/-1;font-weight:600;color:var(--paper);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:4px}
  .ctable td:not(:first-child)::before{content:attr(data-col);display:block;font:500 .64rem var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
}

/* -- proof: creed, triad, working record, upwork band -------------- */
.creed{margin-top:42px;max-width:820px;border-left:3px solid var(--cyan);padding:8px 0 8px 28px}
.creed p{font-size:clamp(1.28rem,2.4vw,1.7rem);line-height:1.36;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
.creed p b{color:var(--cyan-b);font-weight:600}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 36px;margin-top:34px;max-width:1020px}
.triad h3,.triad h4{font:600 .68rem/1 var(--mono);letter-spacing:.12em;color:var(--cyan);text-transform:uppercase;margin-bottom:10px}
.triad p{color:var(--muted);font-size:.92rem;line-height:1.62}
.rec{margin-top:60px}
.rec__head{display:grid;grid-template-columns:196px minmax(0,1fr);gap:8px 44px;align-items:baseline;padding-bottom:16px}
/* the header mirrors .rrow's grid so each label sits over the column it names.
   space-between used to fling the second label to the container edge, where it
   labelled nothing (founder catch, 2026-08-04). Hidden on mobile with the rest
   of the header when rows stack. */
.rec__head .k{font-size:.68rem;color:var(--dim)}
.rec__head p{font:500 .68rem/1.7 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.rec__head p b{color:var(--paper);font-weight:600}
.rrow{display:grid;grid-template-columns:196px minmax(0,1fr);gap:12px 44px;padding:26px 0;border-top:1px solid var(--line)}
.rrow:last-of-type{border-bottom:1px solid var(--line)}
.rkey b{display:block;font:600 1.6rem/1.12 var(--mono);letter-spacing:-.015em;color:var(--cyan);text-transform:uppercase}
.rkey span{display:block;margin-top:7px;font:500 .68rem/1.5 var(--mono);letter-spacing:.09em;color:var(--dim);text-transform:uppercase}
.rrow h3{font-size:1.05rem;margin:3px 0 7px}
.rtag{display:inline-block;margin-left:12px;vertical-align:2px;font:600 .56rem/1 var(--mono);letter-spacing:.10em;color:var(--cyan);border:1px solid var(--cyan-dim);border-radius:3px;padding:4px 6px;text-transform:uppercase;white-space:nowrap}
.rrow p{color:var(--muted);font-size:.94rem;max-width:74ch}
.rrow p b{color:var(--paper);font-weight:600}
.rec__note{margin-top:26px;font-size:.98rem;color:var(--muted)}
.rec__note b{color:var(--paper);font-weight:600}
.rec__note a{color:var(--cyan-b);font-weight:500}
.rec__note a:hover{text-decoration:underline;text-underline-offset:4px}
.uw{display:grid;grid-template-columns:264px minmax(0,1fr);gap:20px 56px;margin-top:44px;border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:28px 30px;align-items:start}
.uw h3{margin-bottom:8px}
.uw p{color:var(--muted);font-size:.95rem;max-width:56ch}
.uw .ph{display:inline-block;margin-top:16px;font:500 .7rem/1.5 var(--mono);letter-spacing:.04em;color:var(--dim);border:1px dashed var(--line2);border-radius:4px;padding:8px 12px}
.facts{width:100%}
.facts div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-top:1px solid var(--line);font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.facts div:first-child{border-top:none;padding-top:0}
.facts span{color:var(--dim)}
.facts b{color:var(--paper);font:600 .95rem/1.45 var(--sans);letter-spacing:0;text-transform:none;text-align:right}
/* .n marks a numeral inside a value: the only thing that stays mono */
.facts b .n,.fmeta b .n{font-family:var(--mono);letter-spacing:.01em;font-size:.96em}
@media (max-width:880px){
  .triad{grid-template-columns:1fr;gap:22px}
  .rrow{grid-template-columns:1fr;gap:10px}
  .rtag{display:block;margin:12px 0 0;width:fit-content;vertical-align:baseline;white-space:normal}
  .rec__head{display:none}
  .rkey{display:flex;align-items:baseline;gap:14px}
  .rkey b{font-size:1.2rem}
  .rkey span{margin-top:0}
  .uw{grid-template-columns:1fr;padding:26px 24px}
  .facts{max-width:none}
  .facts div{flex-direction:column;align-items:flex-start;gap:5px}
  .facts b{text-align:left}
}

/* -- lead-time pipeline (proportional stage blocks) ----------------- */
.pipe{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:28px 30px}
.pipe__head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 .66rem var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--dim);margin-bottom:26px}
.pipe__head b{color:var(--paper);font-weight:600}
.pipe__track{position:relative;display:flex;gap:2px;height:46px}
.pipe__seg{position:relative;background:var(--s2);border-top:2px solid var(--line2);border-radius:0 0 3px 3px;display:flex;align-items:center;justify-content:center;min-width:0}
.pipe__seg i{font-style:normal;font:500 .64rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}
.pipe__seg--sea{border-top-color:var(--cyan);background:var(--cyan-tint)}
.pipe__seg--sea i{color:var(--cyan-b)}
.pipe__seg--end{border-top-color:var(--green);background:rgba(53,200,138,.08)}
.pipe__seg--end i{color:var(--green)}
.pipe__mark{position:absolute;top:-12px;bottom:-30px;width:0;border-left:1px dashed var(--red);pointer-events:none}
.pipe__mark b{position:absolute;bottom:-2px;left:8px;font:600 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.pipe__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;font:500 .64rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pipe__foot b{color:var(--paper);font-weight:600}
@media (max-width:720px){
  .pipe{padding:22px 18px}
  .pipe__seg i{display:none}
  .pipe__track{height:34px}
}

/* -- coverage bars (days of cover, coloured by state) --------------- */
.cov{display:grid;gap:13px}
.covrow{display:grid;grid-template-columns:118px minmax(0,1fr) 104px;gap:18px;align-items:center}
.covrow__sku{font:500 .66rem var(--mono);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.covrow__bar{position:relative;height:24px;background:var(--s2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.covrow__fill{position:absolute;top:0;bottom:0;left:0;background:var(--cyan-faint);border-right:2px solid var(--cyan)}
.covrow__floor{position:absolute;top:-5px;bottom:-5px;width:0;border-left:1px dashed var(--dim)}
.covrow__val{font:600 .68rem var(--mono);letter-spacing:.1em;text-align:right;white-space:nowrap}
.covrow--green .covrow__fill{background:rgba(53,200,138,.16);border-right-color:var(--green)}
.covrow--green .covrow__val{color:var(--green)}
.covrow--amber .covrow__fill{background:rgba(255,176,32,.14);border-right-color:var(--amber)}
.covrow--amber .covrow__val{color:var(--amber)}
.covrow--red .covrow__fill{background:rgba(255,95,74,.16);border-right-color:var(--red)}
.covrow--red .covrow__val{color:var(--red)}
.cov__key{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:680px){
  .covrow{grid-template-columns:minmax(0,1fr) 84px;gap:8px 12px}
  .covrow__sku{grid-column:1/-1}
}

/* -- third-party proof: strip, stat tiles, verbatim reviews --------- */
.pstrip{margin-top:28px;border:1px solid var(--line2);border-radius:8px;background:var(--s1);display:flex;flex-wrap:wrap;overflow:hidden}
.pstrip>span{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:-1px 0 0 -1px}
.pstrip__tag{font:500 .68rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.pstrip__item{font-size:.87rem;color:var(--muted);white-space:nowrap}
.pstrip__item b{font:600 1.08rem var(--mono);color:var(--cyan);letter-spacing:.02em}
.pstrip__item .stars{color:var(--cyan);font-size:.68rem;letter-spacing:.12em}
.pstrip__trp{font:600 .68rem var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--green)}
.pstrip__trp::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);margin-right:9px;vertical-align:1px}
@media (max-width:720px){.pstrip>span{padding:11px 13px}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.stat{background:var(--s1);padding:24px 20px}
.stat{border-top:2px solid var(--cyan-dim)}
.stat b{display:block;font:600 clamp(2.1rem,3vw,2.6rem)/1 var(--mono);color:var(--cyan);letter-spacing:-.02em}
.stat span{display:block;margin-top:13px;font-weight:600;font-size:.92rem;color:var(--paper)}
.stat small{display:block;margin-top:6px;font:500 .68rem/1.65 var(--mono);letter-spacing:.04em;color:var(--dim)}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.stats--3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stats,.stats--3{grid-template-columns:1fr}}

.vquote{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:26px 28px;display:flex;flex-direction:column}
.vquote p{font-size:1.02rem;line-height:1.62;color:var(--paper)}
.vquote footer{margin-top:auto;padding-top:18px;font:500 .64rem/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.vquote footer .stars{color:var(--cyan);letter-spacing:.1em;font-size:.72rem}
.vquote--lead{border-left:3px solid var(--cyan-dim);padding:30px 34px}
.vquote--lead p{font-size:1.12rem;max-width:72ch}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:880px){.vgrid,.vgrid--2{grid-template-columns:1fr}}

/* ============ §09c the bone surface ============ */
/* One rule: ink is the instrument, bone is the paperwork. A section gets
   .bone only if it reads as a document you would print or a worksheet you
   would fill in — the cost calculator, pricing, the guarantee. Narrative and
   diagnostic sections stay ink. Budget: roughly a third of a page, sprinkled,
   never contiguous. Flip everything and the effect dies; it becomes a light
   theme with extra steps.

   Mechanism: .bone re-points the palette custom properties inside its own
   scope, so every existing component inverts with no per-component work.
   Only the handful of rules that hard-code a value need an override below. */
.bone{
  background:var(--bone);
  color:var(--bone-ink);
  --paper:var(--bone-ink);
  --muted:var(--bone-muted);
  --dim:var(--bone-dim);
  --line:var(--bone-line);
  --line2:var(--bone-line2);
  --s1:var(--bone2);
  --s2:var(--bone3);
  /* cyan on bone is 2.27:1 — fine for fills and rules, fails AA as text.
     --cyan becomes the ink-safe cyan; --cyan-b keeps the bright one. */
  --cyan:var(--cyan-ink);
  --cyan-b:var(--cyan-ink);
  --cyan-dim:rgba(0,86,141,.42);
  --cyan-faint:rgba(0,86,141,.16);
  --cyan-tint:rgba(0,86,141,.07);
  --amber:#6b4600;
  --amber-dim:rgba(107,70,0,.45);
  --green:#0a5c3a;
  --green-dim:rgba(10,92,58,.45);
  --red:#9c2716;
  --red-dim:rgba(156,39,22,.45);
}
/* a bone section owns its full-bleed band, not just the container */
.bone{padding-bottom:clamp(80px,11vh,124px)}
/* a section that ENDS just before a bone band needs breathing room, or the
   last line reads as though it belongs to the new surface */
section:has(+ .bone){padding-bottom:clamp(56px,7vh,86px)}
.bone + .bone{margin-top:0}

/* rules that hard-code a colour and so cannot invert on their own */
.bone .btn--primary{background:var(--cyan-ink);color:var(--bone)}
.bone .btn--primary:hover{background:#00527f}
.bone .btn--ghost{border-color:var(--bone-line2);color:var(--bone-ink)}
.bone .btn--ghost:hover{border-color:var(--cyan-ink);color:var(--cyan-ink)}
.bone .btn.is-sent{background:var(--bone-ink);color:var(--bone)}
.bone ::selection{background:var(--cyan-ink);color:var(--bone)}
.bone :focus-visible{outline-color:var(--cyan-ink)}
.bone .stat{border-top-color:var(--cyan-dim)}
.bone .pstrip__trp{color:var(--green)}
.bone .pstrip__trp::before{background:var(--green)}

/* -- the cost worksheet (sliders; the visitor does their own arithmetic) --- */
.calc{margin-top:44px;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px 48px;align-items:start}
.calc__inputs{display:grid;gap:26px}
.calc__field label{display:block;font:500 .66rem var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.calc__val{display:block;font:600 1.5rem/1 var(--mono);letter-spacing:-.02em;color:var(--cyan);margin-bottom:14px}
.calc__field input[type=range]{width:100%;height:34px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.calc__field input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line2)}
.calc__field input[type=range]::-moz-range-track{height:3px;background:var(--line2)}
.calc__field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cyan);margin-top:-10px}
.calc__field input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--cyan)}
.calc__ends{display:flex;justify-content:space-between;margin-top:8px;font:500 .68rem var(--mono);letter-spacing:.1em;color:var(--dim)}
.calc__note{font-size:.9rem;color:var(--muted);max-width:44ch}
.calc__out{display:grid;gap:14px}
.calcrow{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:24px 26px}
.calcrow__lab{font:500 .64rem var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--dim)}
.calcrow__fig{margin-top:14px;font:600 clamp(1.7rem,3.4vw,2.3rem)/1 var(--mono);letter-spacing:-.025em;color:var(--cyan);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.calcrow__fig small{font-size:.9rem;font-weight:500;color:var(--dim);letter-spacing:.1em}
.calcrow p{margin-top:14px;font-size:.93rem;color:var(--muted);max-width:56ch}
@media (max-width:880px){.calc{grid-template-columns:1fr;gap:32px}.calc__note{max-width:none}}

/* -- the workbook: a real-looking planning file, rendered not screenshotted --
   These are RECONSTRUCTIONS of the deliverable's shape, always badged as
   illustrative. Never present one as a capture of a client's real file: the
   fact gate forbids it and the last site died of exactly that. Built in DOM
   rather than as images so it stays sharp, themeable, and readable to a screen
   reader. */
.wb{border:1px solid var(--line2);border-radius:8px;background:var(--s1);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.wb__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--s2);border-bottom:1px solid var(--line2)}
.wb__dots{display:flex;gap:6px;flex:none}
.wb__dots i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.wb__name{font:500 .72rem var(--mono);letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb__badge{margin-left:auto;flex:none;font:600 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-dim);border-radius:3px;padding:4px 7px}
.wb__formula{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.wb__fx{font:600 .64rem var(--mono);color:var(--dim);border-right:1px solid var(--line2);padding-right:10px;flex:none}
.wb__formula code{font:400 .72rem var(--mono);color:var(--cyan-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--s1)}
.wb__grid{width:100%;border-collapse:collapse;font:400 .74rem var(--mono);white-space:nowrap;min-width:660px;background:var(--s1)}
.wb__grid th,.wb__grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 10px;text-align:right}
.wb__grid th:first-child,.wb__grid td:first-child{text-align:center;color:var(--dim);background:var(--s2);position:sticky;left:0;z-index:2;width:34px;font-size:.68rem}
.wb__grid td:nth-child(2){text-align:left;color:var(--paper);position:sticky;left:34px;z-index:2;background:var(--s1)}
.wb__cols th{background:var(--s2);color:var(--dim);font:500 .64rem var(--mono);letter-spacing:.06em;padding:5px 10px;text-align:center}
.wb__head th{background:var(--s2);color:var(--muted);font:600 .66rem var(--mono);letter-spacing:.05em;text-transform:uppercase;text-align:right}
.wb__head th:nth-child(2){text-align:left}
.wb__grid tbody tr:hover td{background:#151a1e}
.wb__grid td{color:var(--muted)}
.wb__grid .v{color:var(--paper)}
.wb__grid .g{color:var(--green)}
.wb__grid .a{color:var(--amber)}
.wb__grid .r{color:var(--red);font-weight:600}
.wb__grid .c{color:var(--cyan-b)}
.wb__grid .rd{display:inline-block;vertical-align:-1px;width:74px;height:9px;border-radius:1px;background:repeating-linear-gradient(90deg,var(--line2) 0 7px,transparent 7px 11px)}
.wb__grid tr.hl td{background:#1b1413}
.wb__grid tr.ok td{background:#111815}
.wb__tabs{display:flex;gap:2px;padding:8px 10px;background:var(--s2);border-top:1px solid var(--line2);overflow-x:auto}
.wb__tab{flex:none;font:500 .66rem var(--mono);letter-spacing:.04em;color:var(--dim);background:var(--s2);padding:6px 12px;border-radius:4px;white-space:nowrap}
.wb__tab.is-on{background:var(--s1);color:var(--cyan-b);border:1px solid var(--cyan-dim)}
.wb__foot{padding:11px 14px;border-top:1px solid var(--line);font:400 .76rem/1.6 var(--mono);letter-spacing:.01em;color:var(--dim);background:var(--bg)}
@media (max-width:720px){
  .wb__grid{font-size:.7rem}
  .wb__grid th,.wb__grid td{padding:6px 8px}
  .wb__name{font-size:.66rem}
  .wb__formula{display:none}
}

/* a caption that sits under an artifact and says what you are looking at */
.artcap{margin-top:16px;font:400 .84rem/1.65 var(--mono);letter-spacing:.01em;color:var(--dim);max-width:70ch}

/* -- node map: where the units actually sit ------------------------- */
.nmap{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:0;overflow:hidden}
/* the SVG paints its own bone, so on a bone band the card must be that same
   bone or the drawing reads as a pasted-in rectangle */
.bone .nmap{background:var(--bone);border-color:var(--bone-line)}
.bone .nmap__key{background:var(--bone3);border-top-color:var(--bone-line)}
.nmap img{width:100%;height:auto;display:block}
.nmap svg{width:100%;height:auto;display:block;overflow:visible}
.nmap__key{display:flex;flex-wrap:wrap;gap:9px;padding:16px 18px;border-top:1px solid var(--line2);background:var(--s2)}
@media (max-width:720px){.nmap__key{padding:13px 14px}}

/* -- horizontal bar chart: cash parked, by SKU ---------------------- */
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:112px minmax(0,1fr) 88px 156px;gap:8px 16px;align-items:center}
.bar__sku{font:500 .7rem var(--mono);letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.bar__track{position:relative;height:26px;background:var(--s2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bar__fill{position:absolute;top:0;bottom:0;left:0;border-right:2px solid var(--amber);background:rgba(255,176,32,.16)}
.bar--red .bar__fill{border-right-color:var(--red);background:rgba(255,95,74,.16)}
.bar--green .bar__fill{border-right-color:var(--green);background:rgba(53,200,138,.16)}
.bar__val{font:600 .74rem var(--mono);text-align:right;color:var(--amber);white-space:nowrap}
/* cyan, because the recommended move is an action and cyan is the action
   colour. Overstock is never only watched: it carries the move that clears it. */
.bar__act{min-width:0;font:500 .7rem var(--mono);letter-spacing:.03em;color:var(--cyan-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__act--none{color:var(--dim)}
.bar--red .bar__val{color:var(--red)}
.bar--green .bar__val{color:var(--green)}
.bar__cap{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:500 .64rem var(--mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
@media (max-width:680px){
  .bar{grid-template-columns:minmax(0,1fr) 84px;gap:6px 12px}
  .bar__sku,.bar__act{grid-column:1/-1}
  .bar__act{white-space:normal}
}

/* -- the tally: the build's contents against its price, drawn to the published figures --
   Segment heights are `style="flex:<dollars>"`, so the picture cannot drift
   away from the arithmetic printed beside it. NAMED .tally, not .stack:
   .stack was already taken by the offer-LP feature list (SP section 8) and the
   collision silently forced tool.html and lp/engine.html into a 2-column grid. The left column sums to the
   $21,450 already stated in copy; the right column's dashed spacer holds the
   difference so $1,500 renders at its true share of the same height. The gap
   is labelled honestly inside the graphic, because a 14x gap drawn without a
   reason reads as a discount, and it is not one. */
.tally{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.tally__col{display:flex;flex-direction:column;min-width:0}
.tally__cap{font:500 .64rem/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:13px}
.tally__body{display:grid;height:clamp(300px,36vw,420px);gap:3px}
.tally__seg{display:flex;align-items:baseline;align-content:center;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;min-height:0;overflow:hidden;background:var(--s1);border:1px solid var(--line2);border-left:2px solid var(--line2);border-radius:4px;padding:5px 14px}
.tally__seg b{font:600 1rem var(--mono);letter-spacing:-.01em;color:var(--paper);white-space:nowrap}
.tally__seg em{font-style:normal;flex:1 0 100%;font:400 .78rem/1.55 var(--sans);color:var(--muted);margin-top:2px}
.tally__seg span{min-width:0;font:500 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tally__seg--ours{background:var(--cyan-tint);border-color:var(--cyan-dim);border-left-color:var(--cyan)}
.tally__seg--ours b{color:var(--cyan-b)}
.tally__gap{display:flex;align-items:center;justify-content:center;text-align:center;min-height:0;overflow:hidden;border:1px dashed var(--line2);border-radius:4px;padding:6px 12px}
.tally__gap span{font:500 .62rem/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.tally__foot{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.tally__foot b{display:block;font:600 clamp(1.18rem,2.5vw,1.5rem)/1 var(--mono);letter-spacing:-.02em;color:var(--paper)}
.tally__foot i{font-style:normal;display:block;margin-top:8px;font:400 .8rem/1.6 var(--sans);color:var(--dim)}
.tally__col--ours .tally__foot b{color:var(--cyan-b)}
@media (max-width:680px){
  /* The drawn-to-scale version needs height to stay legible: at phone width the
     $1,800 band is 21px and clips its own label. Degrade to a plain list of the
     same figures rather than ship a picture nobody can read. !important is
     needed only to defeat the inline grid-template-rows that carries the scale
     on wider screens. */
  .tally{grid-template-columns:1fr;gap:24px}
  .tally__body{height:auto;grid-template-rows:none!important;gap:5px}
  .tally__seg{padding:12px 14px}
  .tally__gap{display:none}
}

/* -- the price ladder: every rung plotted on one axis ---------------- */
.ladder{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:26px 28px 20px}
.rung{display:grid;grid-template-columns:minmax(0,206px) minmax(0,1fr) 118px;gap:6px 18px;align-items:center;padding:8px 0}
.rung__what{min-width:0}
.rung__what b{display:block;font-size:.93rem;font-weight:600;color:var(--paper)}
.rung__what span{display:block;margin-top:2px;font:500 .62rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rung__track{position:relative;height:22px;background:var(--s2);border:1px solid var(--line);border-radius:3px}
.rung__fill{position:absolute;top:-1px;bottom:-1px;background:rgba(255,255,255,.055);border:1px solid var(--line2);border-radius:3px}
.rung__val{font:600 .78rem var(--mono);text-align:right;color:var(--muted);white-space:nowrap}
.rung--ours .rung__fill{background:var(--cyan-faint);border-color:var(--cyan)}
.rung--ours .rung__what b,.rung--ours .rung__val{color:var(--cyan-b)}
.rung--axis{padding-top:2px}
.rung__ticks{position:relative;height:19px;border-top:1px solid var(--line2)}
.rung__ticks i{position:absolute;top:6px;transform:translateX(-50%);font:500 .6rem var(--mono);letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.rung__ticks i:first-child{transform:none}
.rung__ticks i:last-child{transform:translateX(-100%)}
@media (max-width:680px){
  .ladder{padding:22px 16px 16px}
  .rung{grid-template-columns:minmax(0,1fr) 106px;gap:5px 12px}
  .rung__what{grid-column:1/-1}
  .rung--axis>span:first-child{display:none}
}

/* -- the fit call, drawn to scale ----------------------------------- */
/* The bar is the shape of the thirty minutes; the columns beneath carry the
   copy and share its fractions, so on a wide screen they line up and on a
   narrow one the bar keeps the proportion while the copy stacks. */
.tline{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:26px 28px 22px}
.tline__head{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:30px}
.tline__head b{color:var(--paper);font-weight:600}
.tline__bar{position:relative;display:flex;gap:3px;height:12px}
.tline__bar i{position:relative;background:var(--s2);border-top:2px solid var(--line2);border-radius:0 0 3px 3px}
.tline__bar i::before{content:attr(data-at);position:absolute;bottom:calc(100% + 9px);left:-1px;padding-left:7px;border-left:1px solid var(--line2);font:600 .62rem var(--mono);letter-spacing:.08em;color:var(--dim)}
.tline__bar i:nth-child(2){border-top-color:var(--cyan);background:var(--cyan-tint)}
.tline__bar u{position:absolute;right:0;bottom:calc(100% + 9px);text-decoration:none;padding-right:7px;border-right:1px solid var(--line2);font:600 .62rem var(--mono);letter-spacing:.08em;color:var(--dim)}
.tline__cols{display:grid;grid-template-columns:10fr 15fr 5fr;gap:22px;margin-top:22px}
@media (max-width:560px){.tline__bar i:nth-child(3)::before{display:none}}
.tline__cols>div{min-width:0}
.tline__cols em{font-style:normal;display:block;font:600 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.tline__cols h3{font-size:.98rem;margin-bottom:7px}
.tline__cols p{font-size:.86rem;line-height:1.6;color:var(--muted);max-width:74ch}
.tline__cols>div:nth-child(2) em,.tline__cols>div:nth-child(2) h3{color:var(--cyan-b)}
.tline__foot{margin-top:24px;padding-top:15px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.65;color:var(--muted);max-width:74ch}
.tline__foot b{color:var(--paper);font-weight:600}
@media (max-width:1080px){
  .tline__cols{grid-template-columns:1fr;gap:20px}
}
@media (max-width:820px){
  .tline{padding:22px 18px 18px}
}

/* -- access, drawn as containment ------------------------------------ */
.scope{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:16px}
.scope__cap{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;font:500 .64rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);padding:4px 6px 15px}
.scope__cap b{color:var(--paper);font-weight:600}
.scope__box{border:1px solid var(--line2);border-radius:6px;background:var(--s2);padding:18px 20px}
.scope__box+.scope__box{margin-top:12px}
.scope__box h3{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;font:600 .66rem var(--mono);letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px}
.scope__box ul{display:flex;flex-wrap:wrap;gap:8px}
.scope__box>p{margin-top:13px;font-size:.86rem;line-height:1.6;color:var(--dim)}
.scope__box li{font:500 .72rem var(--mono);letter-spacing:.03em;padding:6px 11px;border-radius:3px}
.scope__box--no{border-color:var(--red-dim)}
.scope__box--no h3{color:var(--red)}
.scope__box--no li{color:var(--muted);border:1px solid var(--red-dim);background:rgba(255,95,74,.07);text-decoration:line-through;text-decoration-color:var(--red-dim)}
.scope__box--yes{border-color:var(--green-dim)}
.scope__box--yes h3{color:var(--green)}
.scope__box--yes li{color:var(--paper);border:1px solid var(--green-dim);background:rgba(53,200,138,.08)}
.scope__foot{margin-top:15px;padding:14px 6px 4px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.65;color:var(--muted);max-width:74ch}
.scope__foot b{color:var(--paper);font-weight:600}
@media (max-width:680px){.scope{padding:12px}.scope__box{padding:16px 15px}}

/* -- who works the account: one lead, the disciplines behind --------- */
.crew{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:28px 26px 24px}
.crew__founders{max-width:400px;margin:0 auto;border:1px solid var(--line2);border-radius:6px;background:var(--s2);padding:14px 20px;text-align:center}
.crew__founders b{display:block;font:600 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crew__founders span{display:block;margin-top:6px;font-size:.82rem;line-height:1.55;color:var(--dim)}
.crew__lead{max-width:400px;margin:0 auto;border:1px solid var(--cyan-dim);background:var(--cyan-tint);border-radius:6px;padding:15px 20px;text-align:center}
.crew__lead b{display:block;font:600 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-b)}
.crew__lead span{display:block;margin-top:7px;font-size:.85rem;line-height:1.55;color:var(--muted)}
.crew__join{width:1px;height:24px;margin:0 auto;background:var(--line2)}
.crew__rail{height:1px;margin:0 12.5%;background:var(--line2)}
.crew__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.crew__cell{position:relative;padding-top:22px;text-align:center}
.crew__cell::before{content:"";position:absolute;top:0;left:50%;width:1px;height:22px;background:var(--line2)}
.crew__cell b{display:block;font:600 .63rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.crew__cell span{display:block;margin-top:6px;font-size:.78rem;line-height:1.55;color:var(--dim)}
.crew__foot{margin-top:24px;padding-top:15px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.65;color:var(--muted);max-width:74ch}
.crew__foot b{color:var(--paper);font-weight:600}
@media (max-width:680px){
  .crew{padding:22px 16px 18px}
  .crew__rail,.crew__cell::before,.crew__join{display:none}
  .crew__row{grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:6px}
  .crew__cell{padding-top:0}
}

/* -- the edges: what we own every week, and what stays yours --------- */
.walls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.wall{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:20px 22px}
.wall h4{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font:600 .64rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);padding-bottom:14px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.wall ul{display:grid;gap:9px}
.wall li{display:flex;align-items:baseline;gap:11px;font-size:.89rem;color:var(--muted)}
.wall li::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;border:1px solid var(--line2)}
.wall--in{border-color:var(--cyan-dim)}
.wall--in h4{color:var(--cyan-b)}
.wall--in li{color:var(--paper)}
.wall--in li::before{background:var(--cyan);border-color:var(--cyan)}
@media (max-width:760px){.walls{grid-template-columns:1fr}}

/* -- objections as an index, not a wall ----------------------------- */
/* Native <details>: no JS, keyboard and screen-reader support for free, and
   the answers stay in the DOM so they are still indexed and still land in the
   .md twins. A reader with one specific worry finds it in a glance instead of
   reading four they do not have. First one open, so the pattern is obvious. */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i>summary{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;align-items:baseline;padding:20px 2px;cursor:pointer;list-style:none}
.faq__i>summary::-webkit-details-marker{display:none}
.faq__i>summary::marker{content:""}
.faq__i>summary i{font-style:normal;font:500 1.15rem/1 var(--mono);color:var(--cyan)}
.faq__i>summary i::before{content:"+"}
.faq__i[open]>summary i::before{content:"\00d7"}
.faq__i>summary h3{font-size:1.04rem;font-weight:600;letter-spacing:-.015em}
.faq__i>summary:hover h3{color:var(--cyan-b)}
.faq__a{padding:0 2px 26px 40px}
.faq__a p{color:var(--muted);font-size:.95rem;max-width:68ch}
.faq__a p+p{margin-top:12px}
.faq__a b{color:var(--paper);font-weight:600}
@media (max-width:680px){
  .faq__i>summary{grid-template-columns:20px minmax(0,1fr);gap:12px;padding:17px 2px}
  .faq__a{padding-left:32px}
}

/* -- the week, and which column of it is yours ---------------------- */
/* "Thirty minutes on Tuesday" is a sentence you skim past. One of seven
   columns lit, and six that are not, is the same claim you cannot skim. */
.week{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:26px 28px 22px}
.week__head{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.week__head b{color:var(--paper);font-weight:600}
.week__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.week__day{min-width:0;background:var(--s2);border-top:2px solid var(--line2);border-radius:0 0 4px 4px;padding:12px 9px 14px;text-align:center}
.week__day b{display:block;font:600 .62rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.week__day span{display:block;margin-top:9px;font-size:.78rem;line-height:1.45;color:var(--muted)}
.week__day--you{border-top-color:var(--cyan);background:var(--cyan-tint)}
.week__day--you b,.week__day--you span{color:var(--cyan-b)}
.week__foot{padding:9px 9px 0;text-align:center;font:500 .6rem/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.week__foot em{display:none;font-style:normal}
.week__foot--you{color:var(--cyan-b)}
.week__foot--span{grid-column:3/-1;text-transform:none;letter-spacing:0;font:400 .84rem/1.6 var(--sans);color:var(--muted);padding-top:12px}
.week__note{margin-top:22px;padding-top:15px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.65;color:var(--muted);max-width:74ch}
.week__note b{color:var(--paper);font-weight:600}
@media (max-width:680px){
  .week{padding:22px 16px 18px}
  .week__grid{gap:2px}
  .week__day{padding:10px 3px 12px}
  .week__day span{display:none}
  /* the day strip drops its detail at this width, so the three footers stop
     being column captions and become the legend that names the days. Sentence
     case, because a sentence in mono caps is unreadable (type rule, SP §1). */
  .week__foot{grid-column:1/-1;text-align:left;padding:11px 0 0;text-transform:none;letter-spacing:0;font:400 .86rem/1.6 var(--sans);color:var(--muted)}
  .week__foot em{display:inline;color:var(--paper);font-weight:600}
  .week__foot--you{color:var(--muted)}
  .week__foot--you em{color:var(--cyan-b)}
  .week__foot--span{grid-column:1/-1;padding-top:11px}
}

/* -- the channel mix: many inputs, one planning number --------------- */
/* Segments are a single-hue ramp, not four hues: the four status colours mean
   stock states and cannot be spent on categories. Mixed INTO the surface
   rather than laid over it with alpha, so every layer stays opaque. */
.mix{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:26px 28px 22px}
.mix__head{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.mix__head b{color:var(--paper);font-weight:600}
.mix__bar{display:flex;gap:2px;height:38px}
.mix__bar i{min-width:0;background:var(--s2);border-top:2px solid var(--cyan-dim);border-radius:0 0 3px 3px}
.mix__bar i:nth-child(1){background:color-mix(in srgb,var(--cyan) 70%,var(--s2));border-top-color:var(--cyan)}
.mix__bar i:nth-child(2){background:color-mix(in srgb,var(--cyan) 50%,var(--s2))}
.mix__bar i:nth-child(3){background:color-mix(in srgb,var(--cyan) 33%,var(--s2))}
.mix__bar i:nth-child(4){background:color-mix(in srgb,var(--cyan) 20%,var(--s2))}
.mix__key{display:grid;gap:1px;margin-top:18px;background:var(--line)}
.mixrow{display:grid;grid-template-columns:14px minmax(0,1fr) 96px 66px;gap:14px;align-items:center;background:var(--s1);padding:9px 2px}
.mixrow u{width:12px;height:12px;border-radius:2px;text-decoration:none;background:var(--s2)}
.mixrow:nth-child(1) u{background:color-mix(in srgb,var(--cyan) 70%,var(--s2))}
.mixrow:nth-child(2) u{background:color-mix(in srgb,var(--cyan) 50%,var(--s2))}
.mixrow:nth-child(3) u{background:color-mix(in srgb,var(--cyan) 33%,var(--s2))}
.mixrow:nth-child(4) u{background:color-mix(in srgb,var(--cyan) 20%,var(--s2))}
.mixrow span{min-width:0;font-size:.9rem;color:var(--paper)}
.mixrow b{font:600 .76rem var(--mono);text-align:right;color:var(--muted)}
.mixrow i{font-style:normal;font:500 .72rem var(--mono);text-align:right;color:var(--dim)}
.mix__out{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line2);font:500 .72rem var(--mono);letter-spacing:.04em;color:var(--dim)}
.mix__out b{font-size:.94rem;color:var(--cyan-b);font-weight:600}
.mix__out em{font-style:normal;color:var(--dim)}
.mix__note{margin-top:16px;font-size:.9rem;line-height:1.65;color:var(--muted);max-width:74ch}
.mix__note b{color:var(--paper);font-weight:600}
@media (max-width:680px){
  .mix{padding:22px 16px 18px}
  .mixrow{grid-template-columns:12px minmax(0,1fr) 78px;gap:10px}
  .mixrow i{grid-column:2/-1;text-align:left}
}

/* -- the referral, and where the relationship stays ------------------ */
/* A partner's real question is not how the work runs, it is whether their
   client comes back to them afterwards. The return band is the answer, so it
   gets equal weight to the forward row rather than a footnote. */
.flow{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:30px 26px 24px}
.flow__row{display:grid;grid-template-columns:minmax(0,1fr) 122px minmax(0,1fr) 122px minmax(0,1fr);align-items:stretch}
.flow__node{min-width:0;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line2);border-radius:6px;background:var(--s2);padding:16px 18px;text-align:center}
.flow__node b{display:block;font:600 .66rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.flow__node span{display:block;margin-top:7px;font-size:.83rem;line-height:1.55;color:var(--dim)}
.flow__node--us{border-color:var(--cyan-dim);background:var(--cyan-tint)}
.flow__node--us b{color:var(--cyan-b)}
.flow__arrow{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.flow__arrow::before{content:"";position:absolute;top:50%;left:6px;right:6px;border-top:1px solid var(--line2)}
.flow__arrow::after{content:"";position:absolute;top:50%;right:6px;transform:translateY(-50%);border-left:6px solid var(--line2);border-top:4px solid transparent;border-bottom:4px solid transparent}
.flow__arrow i{position:relative;font-style:normal;font:500 .58rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);text-align:center;background:var(--s1);padding:0 6px;transform:translateY(-15px)}
.flow__back{margin-top:20px;border:1px dashed var(--line2);border-radius:6px;padding:15px 18px;display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.flow__back b{flex:none;font:600 .62rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--paper)}
.flow__back b::before{content:"";display:inline-block;vertical-align:2px;margin-right:9px;border-right:6px solid var(--cyan);border-top:4px solid transparent;border-bottom:4px solid transparent}
.flow__back span{min-width:0;font-size:.88rem;line-height:1.6;color:var(--muted);max-width:74ch}
@media (max-width:860px){
  .flow{padding:24px 16px 18px}
  .flow__row{grid-template-columns:1fr}
  .flow__arrow{height:46px}
  .flow__arrow::before{top:4px;bottom:4px;left:50%;right:auto;border-top:0;border-left:1px solid var(--line2)}
  .flow__arrow::after{top:auto;bottom:4px;left:50%;right:auto;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--line2);border-bottom:0}
  .flow__arrow i{transform:none}
}

/* -- the one photograph on the site --------------------------------- */
/* "Run by operators, not a sales team" is a cheap sentence and an expensive
   face. Monochrome so it lands inside the palette instead of beside it, and
   unposed on purpose: a stock boardroom shot would undo the sentence. */
.photo{border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--s1)}
.photo img{width:100%;height:auto}
.photo figcaption{padding:15px 18px;border-top:1px solid var(--line)}
.photo figcaption b{display:block;font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500}
.photo figcaption span{display:block;margin-top:8px;font-size:.87rem;line-height:1.6;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:30px 46px;align-items:start}
.pgrid h3{font:600 .68rem/1 var(--mono);letter-spacing:.12em;color:var(--cyan);text-transform:uppercase;margin-bottom:10px}
.pgrid p{color:var(--muted);font-size:.94rem;line-height:1.65}
.pgrid__bio+.pgrid__bio{margin-top:26px}
@media (max-width:820px){.pgrid{grid-template-columns:1fr;gap:26px}}

/* -- the supply-chain map builder (map.html) ------------------------- */
/* The canvas itself is SVG drawn by js/map.js with presentation attributes,
   not classes, because the PNG export serialises it away from this file. What
   lives here is only the shell around it. */
.smap{border:1px solid var(--line2);border-radius:8px;background:var(--s1);overflow:hidden}
.smap__bar{display:flex;align-items:flex-start;gap:14px 22px;flex-wrap:wrap;padding:13px 14px;background:var(--s2);border-bottom:1px solid var(--line2)}
.smap__grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.smap__grp b{width:100%;font:500 .58rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}

.smap__add{font:500 .72rem var(--mono);letter-spacing:.02em;color:var(--muted);background:var(--s1);border:1px solid var(--line2);border-radius:4px;padding:7px 10px;cursor:pointer;transition:border-color .15s,color .15s}
.smap__add:hover{border-color:var(--cyan);color:var(--cyan-b)}
.smap__act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-self:flex-end}
.smap__btn{font:600 .72rem var(--mono);letter-spacing:.03em;color:var(--cyan-b);background:none;border:1px solid var(--cyan-dim);border-radius:4px;padding:7px 12px;cursor:pointer;transition:background .15s}
.smap__btn:hover{background:var(--cyan-tint)}
.smap__btn[aria-pressed=true]{background:var(--cyan);color:#04141f;border-color:var(--cyan)}
.smap__btn--quiet{color:var(--muted);border-color:var(--line2)}
.smap__btn--quiet:hover{background:var(--s2)}
.smap__stage{position:relative;background:#f2efe8;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.smap__stage svg{display:block;width:100%;height:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.smap__key{display:flex;align-items:center;gap:7px 18px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line);font:500 .68rem var(--mono);letter-spacing:.03em;color:var(--muted)}
.smap__sw{width:13px;height:13px;border-radius:3px;flex:none;margin-right:-3px}
.smap__sw--up{border:1.5px dashed #7c8894}
.smap__sw--hold{background:#12564a}
.smap__sw--plat{background:#173f6b}
.smap__sw--chan{background:#a1522c}
.smap__sw--crit{background:#8f2d5c}
.smap__foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 26px;align-items:baseline;padding:14px;border-top:1px solid var(--line2);background:var(--s2)}
.smap__lt{font:500 .64rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.smap__lt b{display:block;margin-top:5px;font-size:1.7rem;letter-spacing:-.02em;text-transform:none;color:#8f2d5c}
.smap__path{min-width:0;font:400 .8rem/1.6 var(--mono);color:var(--muted);word-break:break-word}
.smap__hint{grid-column:1/-1;margin-top:4px;font-size:.84rem;color:var(--dim)}
.smap__edit{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:10px;align-items:end;padding:14px;border-top:1px solid var(--line);background:var(--s1)}
.smap__edit label{display:block;font:500 .62rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.smap__edit input{width:100%;background:var(--s2);border:1px solid var(--line2);border-radius:4px;color:var(--paper);font:400 .9rem var(--sans);padding:9px 11px}
.smap__edit input:focus{border-color:var(--cyan-dim);outline:none}
@media (max-width:760px){
  .smap__act{margin-left:0;width:100%}
  .smap__foot{grid-template-columns:1fr}
  .smap__edit{grid-template-columns:1fr}
}

/* -- tool band ------------------------------------------------------ */
.tool{border:1px solid var(--cyan-dim);background:var(--cyan-tint);border-radius:8px;padding:clamp(28px,4vw,46px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 56px;align-items:center}
.tool h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.tool p{color:var(--muted);max-width:52ch;margin-top:12px;font-size:.98rem}
.tool__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.tool__note{font:500 .68rem/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);max-width:240px}
@media (max-width:880px){.tool{grid-template-columns:1fr}}

/* -- final CTA (one per page, before the footer) -------------------- */
.cta{padding-bottom:clamp(110px,15vh,180px)}
.mini{position:relative;height:2px;background:var(--line2);margin-bottom:56px}
.mini::after{content:"";position:absolute;right:-1px;top:50%;transform:translate(0,-50%);width:13px;height:13px;border-radius:50%;border:2px solid var(--red);background:var(--bg)}
.mini b{position:absolute;right:0;bottom:14px;font:600 .66rem var(--mono);letter-spacing:.11em;color:var(--red);text-transform:uppercase}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.042em;max-width:16ch}
.cta .sub{max-width:58ch}
.cta__actions{display:flex;align-items:center;gap:14px;margin-top:38px;flex-wrap:wrap}
.cta__meta{margin-top:20px;font:400 .84rem/1.7 var(--mono);letter-spacing:.01em;color:var(--muted)}

/* ================================================================
   §09b EXTENSIONS — sibling-page components, winner idiom only.
   No new colors; amber only where something is a risk/error state.
   ================================================================ */

/* -- forms (contact, health-score) ---------------------------------
   JS contract: #contactForm, .form-msg (+.is-on/--ok/--err),
   .btn.is-sent. Amber here = error states only. */
.form{display:grid;gap:20px;margin-top:44px;max-width:640px}
.form--card{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:30px;max-width:680px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px}
.field__label{font:500 .66rem/1.4 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.field__label .req{color:var(--cyan)}
.field__label .opt{color:var(--dim);letter-spacing:.1em}
.input{width:100%;background:var(--s2);border:1px solid var(--line2);border-radius:4px;color:var(--paper);font:400 .97rem/1.5 var(--sans);padding:12px 14px;transition:border-color .2s}
.input::placeholder{color:var(--dim)}
.input:focus{border-color:var(--cyan-dim)}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa7b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
textarea.input{min-height:130px;resize:vertical}
.field__help{font:400 .8rem/1.5 var(--sans);color:var(--dim)}
.field__error{display:none;font:500 .68rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.field.is-error .input{border-color:var(--amber-dim)}
.field.is-error .field__error{display:block}
.choices{display:flex;flex-wrap:wrap;gap:10px 22px}
.choice{display:inline-flex;gap:9px;align-items:center;font-size:.93rem;color:var(--muted);cursor:pointer}
.choice input{width:15px;height:15px;accent-color:var(--cyan)}
.form-msg{display:none;font:500 .8rem/1.6 var(--sans);border:1px solid var(--line2);border-radius:4px;padding:12px 16px}
.form-msg.is-on{display:block}
.form-msg--ok{color:var(--paper);border-color:var(--cyan-dim);background:var(--cyan-tint)}
.form-msg--err{color:var(--amber);border-color:var(--amber-dim);background:rgba(255,176,32,.05)}
.turnstile-slot{min-height:65px;display:flex;align-items:center}
.form .btn{justify-self:start}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}

/* -- prose (blog articles, privacy policy) -------------------------- */
.prose{max-width:68ch;color:var(--muted)}
.prose>*+*{margin-top:20px}
.prose h2{font-size:1.5rem;line-height:1.2;letter-spacing:-.025em;color:var(--paper);margin-top:52px}
.prose h3{font-size:1.14rem;color:var(--paper);margin-top:40px}
.prose strong,.prose b{color:var(--paper);font-weight:600}
.prose a{color:var(--cyan-b);font-weight:500}
.prose a:hover{text-decoration:underline;text-underline-offset:4px}
.prose ul,.prose ol{padding-left:1.25em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{padding-left:.35em;margin-top:10px}
.prose li::marker{color:var(--dim)}
.prose blockquote{border-left:3px solid var(--cyan);padding:6px 0 6px 26px}
.prose blockquote p{font-size:1.12rem;line-height:1.5;font-weight:600;letter-spacing:-.018em;color:var(--paper);text-wrap:balance}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--s1);border:1px solid var(--line);border-radius:3px;padding:2px 6px}
.prose pre{background:var(--s1);border:1px solid var(--line2);border-radius:8px;padding:18px 20px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;font-size:.85rem;line-height:1.6}
.prose hr{border:0;height:1px;background:var(--line);margin:44px 0}
.prose img{border:1px solid var(--line2);border-radius:8px}
.prose figcaption{margin-top:10px;font:500 .66rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.prose-meta{margin-top:16px;font:500 .68rem/1.8 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.prose-meta b{color:var(--paper);font-weight:600}

/* -- blog index: tag pills + imageless ledger post rows ------------- */
.tagbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.tag-pill{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line2);border-radius:3px;padding:8px 12px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.tag-pill:hover{color:var(--paper);border-color:var(--cyan-dim)}
.tag-pill.is-active{color:var(--cyan-b);border-color:var(--cyan-dim);background:var(--cyan-tint)}
.postlist{margin-top:44px}
.post-card{display:grid;grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"date title tags" "date body tags";gap:6px 44px;padding:24px 0;border-top:1px solid var(--line);align-items:baseline}
.post-card:last-of-type{border-bottom:1px solid var(--line)}
.post-card__date{grid-area:date;font:500 .68rem/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}
.post-card h2{grid-area:title;font-size:1.08rem;transition:color .2s}
.post-card p{grid-area:body;color:var(--muted);font-size:.94rem;max-width:64ch}
.post-card__tags{grid-area:tags;display:flex;gap:8px;justify-self:end}
.post-card:hover h2{color:var(--cyan-b)}
@media (max-width:680px){
  .post-card{grid-template-columns:1fr;grid-template-areas:"date" "title" "body" "tags";gap:7px}
  .post-card__tags{justify-self:start;margin-top:4px}
}

/* -- partner-type cards (partners.html) ----------------------------- */
.ptypes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;max-width:980px}
.ptype{border:1px solid var(--line2);border-radius:8px;background:var(--s1);padding:28px 28px 26px}
.ptype--lead{border-color:var(--cyan-dim)}
.ptype__tag{display:block;font:500 .66rem/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.ptype--lead .ptype__tag{color:var(--cyan)}
.ptype h3{margin-bottom:8px}
.ptype p{color:var(--muted);font-size:.94rem}
.ptype ul{margin-top:14px;border-top:1px solid var(--line)}
.ptype li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--muted)}
@media (max-width:880px){.ptypes{grid-template-columns:1fr}}

/* -- value stack (offer LPs; "You own this" chips) ------------------ */
.stack{margin-top:44px;max-width:900px}
.stack__row{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:12px 40px;padding:24px 0;border-top:1px solid var(--line);align-items:start}
.stack__row:last-of-type{border-bottom:1px solid var(--line)}
.stack__tag{font:600 .64rem/1.6 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.stack__row--add .stack__tag{color:var(--dim)}
.stack__row h3{font-size:1.08rem;margin-bottom:6px}
.stack__row p{color:var(--muted);font-size:.94rem;max-width:56ch}
.stack__own{justify-self:end;padding-top:2px}
.stack__foot{display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;margin-top:14px;font:500 .66rem var(--mono);letter-spacing:.08em;color:var(--muted)}
@media (max-width:680px){
  .stack__row{grid-template-columns:1fr;gap:8px}
  .stack__own{justify-self:start;padding-top:0}
}

/* -- LP shell (lp/ pages: one goal, no full nav) -------------------- */
.lp-topbar{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.95);border-bottom:1px solid var(--line)}
.lp-topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 var(--mr) 0 var(--ml)}
.lp-topbar__logo img{height:22px;width:auto}
.lp-topbar .btn{padding:.6em 1.1em;font-size:.86rem}
.lp-hero{padding:clamp(48px,7vh,84px) 0 0}
.lp-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.042em;max-width:17ch}
.lp-foot{border-top:1px solid var(--line);margin-top:clamp(80px,11vh,124px);padding:34px 0 40px}
.lp-foot__in{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap}
.lp-foot img{height:18px;width:auto}
.lp-foot p,.lp-foot a{color:var(--dim);font-size:.84rem}
.lp-foot a:hover{color:var(--paper)}
.lp-ctabar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:10px var(--mr) calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.96);border-top:1px solid var(--line2)}
.lp-ctabar .btn{display:block;text-align:center}
@media (max-width:720px){
  .lp-ctabar{display:block}
  body.has-ctabar{padding-bottom:84px}
}

/* -- OG stage (1200×630 social images; motion force-off) ------------ */
/* Fixed px only — rendered headless at exactly 1200×630. */
.og-stage{position:relative;width:1200px;height:630px;background:var(--bg);color:var(--paper);overflow:hidden;padding:64px 72px 56px;display:flex;flex-direction:column;justify-content:space-between}
.og-stage *,.og-stage *::before,.og-stage *::after{animation:none!important;transition:none!important}
.og-stage__grid{position:absolute;inset:0;pointer-events:none}
.og-stage__grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.og-stage__eyebrow{display:flex;align-items:center;gap:16px;font:500 20px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.og-stage__eyebrow::before{content:"";width:30px;height:2px;background:var(--cyan)}
.og-stage__title{font:700 76px/1.04 var(--sans);letter-spacing:-.035em;color:var(--paper);max-width:1020px;text-wrap:balance}
.og-stage__title--long{font-size:60px;letter-spacing:-.03em}
.og-stage__title--xlong{font-size:46px;letter-spacing:-.02em}
.og-stage__rule{position:absolute;left:72px;right:72px;bottom:172px;height:2px;background:var(--line2)}
.og-stage__rule i{position:absolute;left:0;top:0;width:286px;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(0,168,255,.55))}
.og-stage__bottom{display:flex;justify-content:space-between;align-items:flex-end}
.og-stage__wordmark img{height:34px;width:auto}
.og-stage__meta{font:500 18px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* ============ §10 page blocks — HOMEPAGE ONLY ============ */

/* -- hero ----------------------------------------------------------- */
.hero{padding:clamp(48px,6.5vh,78px) 0 72px}
.hero h1{font-size:clamp(2.55rem,6.4vw,5rem);line-height:1.01;letter-spacing:-.045em;max-width:15ch}
.hero__lead{color:var(--muted);max-width:56ch;margin-top:24px;font-size:clamp(1rem,1.4vw,1.13rem)}
.hero__actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* -- the horizon device --------------------------------------------- */
.hz{position:relative;height:128px;margin-top:clamp(44px,5.5vh,64px)}
.hz__line{position:absolute;left:0;right:0;top:64px;height:2px;background:var(--line2);transform-origin:left}
.hz__seg{position:absolute;left:0;width:27%;top:64px;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(0,168,255,.55));transform-origin:left}
.hz__tick{position:absolute;top:56px;width:1px;height:9px;background:rgba(255,255,255,.34)}
.hz__tick span{position:absolute;top:16px;left:50%;transform:translateX(-50%);font:500 .64rem var(--mono);letter-spacing:.10em;color:#8b98a3;white-space:nowrap;text-transform:uppercase}
.hz__win{position:absolute;left:13%;width:14%;top:57px;height:16px;border-left:1px solid var(--cyan);border-right:1px solid var(--cyan)}
.hz__win i{position:absolute;inset:3px 0;background:var(--cyan-faint)}
.hz__win span{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font:500 .68rem var(--mono);letter-spacing:.10em;color:var(--cyan);white-space:nowrap;text-transform:uppercase}
.hz__node{position:absolute;top:0;height:100%}
.hz__node i{position:absolute;top:64px;transform:translate(-50%,-50%);border-radius:50%}
.hz__node--t{left:0}
.hz__node--t i{left:1px;width:9px;height:9px;background:var(--cyan)}
.hz__node--e{right:0}
.hz__node--e i{right:-4px;width:13px;height:13px;border:2px solid var(--red);background:var(--bg)}
.hz__lab{position:absolute;top:80px;font:600 .68rem var(--mono);letter-spacing:.11em;white-space:nowrap;text-transform:uppercase}
.hz__date{position:absolute;top:99px;font:500 .66rem var(--mono);letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.hz__node--t .hz__lab{left:0;color:var(--paper)}
.hz__node--t .hz__date{left:0}
.hz__node--e .hz__lab{right:0;color:var(--red);text-align:right}
.hz__node--e .hz__date{right:0;text-align:right}
/* resting transform for the right-anchored end node — must stay AFTER
   the .hz__node i rule above (same specificity; the load animation
   ends on this same value) */
.hz__node--e i{transform:translate(50%,-50%)}
.hz__cap{margin-top:22px;max-width:52ch;color:var(--muted);font-size:.95rem}
.hz__cap b{color:var(--paper);font-weight:600;font-family:var(--mono);letter-spacing:.02em;font-size:.9em}
@media (max-width:720px){
  .hz__tick span{display:none}
  .hz__win{left:16%;width:20%}
  .hz__win span{font-size:.56rem}
  .hz__lab{font-size:.62rem}
  .hz__date{font-size:.6rem}
}

/* -- the weekly sheet — the deliverable, under the window ----------- */
.sheet{margin-top:clamp(26px,3.5vh,38px)}
.sheet__cap{display:flex;align-items:baseline;gap:10px 20px;flex-wrap:wrap;padding-bottom:12px;font:500 .66rem var(--mono);letter-spacing:.10em;text-transform:uppercase}
.sheet__cap .c1{color:var(--cyan)}
.sheet__cap .c2{color:var(--muted)}
.sheet__badge{margin-left:auto;color:var(--amber);border:1px solid var(--amber-dim);border-radius:3px;padding:5px 9px;letter-spacing:.12em;white-space:nowrap}
.sheet__body{background:var(--s1);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.srow{position:relative;display:grid;grid-template-columns:1.06fr .56fr .52fr 1.92fr 1.22fr;grid-template-areas:"sku cover lead act when";align-items:center;border-top:1px solid var(--line)}
.srow--head{border-top:0;background:var(--s2)}
.srow>*,.srow .s-meta>*{padding:14px 18px;min-width:0}
.srow--head>*{padding-block:10px;font:500 .68rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.s-sku{grid-area:sku;font:500 .86rem var(--mono);color:var(--paper);letter-spacing:.02em}
.s-cover{grid-area:cover}
.s-lead{grid-area:lead}
.s-cover,.s-lead{font:400 .86rem var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.s-act{grid-area:act;font-size:.97rem;font-weight:500;color:var(--paper);line-height:1.45}
.s-act small{display:block;font:400 .7rem var(--mono);letter-spacing:.04em;color:var(--muted);margin-top:5px}
.s-act .warn{color:var(--amber)}
.s-when{grid-area:when;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 .86rem var(--mono);color:var(--paper)}
.s-meta{display:contents}
.sl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.srow:not(.srow--head)>:not(:first-child),
.srow:not(.srow--head) .s-meta>:not(:first-child),
.srow--head>:not(:first-child){border-left:1px solid var(--line)}
.srow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.srow--cyan::before{background:var(--cyan)}
.srow--amber::before{background:var(--amber)}
.srow--amber{background:rgba(255,176,32,.05)}
.srow--green::before{background:var(--green)}
.srow--red::before{background:var(--red)}
.srow--red{background:rgba(255,95,74,.05)}
.srow--red .warn{color:var(--red)}
.srow--hold .s-sku,.srow--hold .s-act{color:var(--muted)}
.srow--hold .s-act{font-weight:400}
.sheet__foot{display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;margin-top:12px;font:500 .66rem var(--mono);letter-spacing:.08em;color:var(--muted)}
@media (max-width:960px){
  .srow{grid-template-columns:1.05fr .6fr 1.9fr 1.22fr;grid-template-areas:"sku cover act when"}
  .s-lead,.srow--head .h-lead{display:none}
}
@media (max-width:680px){
  /* the sheet is the hero artifact; on a phone it has to read as four
     decision cards, not a squeezed table. SKU + order-by on one line, the
     action beneath it, cover/lead as a quiet footer. */
  .srow--head{display:none}
  .sheet__body{display:grid;gap:10px;padding:10px}
  .srow{display:grid!important;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline;border:1px solid var(--line);border-radius:8px;padding:14px 15px 12px}
  .srow::before{border-radius:8px 0 0 8px}
  .s-sku{font-size:.82rem;letter-spacing:.06em}
  .s-when{grid-column:2;justify-self:end;text-align:right;font-size:.8rem}
  .s-when .sl{display:none}
  .s-act{grid-column:1/-1;font-size:1rem;line-height:1.4;padding-top:2px}
  .s-act small{display:block;margin-top:5px;font-size:.82rem;letter-spacing:.01em;line-height:1.5}
  .s-meta{grid-column:1/-1;display:flex;gap:16px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line)}
  .s-meta .sl{display:inline}
  .srow{grid-template-columns:1fr auto;grid-template-areas:"sku when" "act act" "meta meta";padding:13px 16px 14px;row-gap:2px}
  .srow>*,.srow .s-meta>*{padding:4px 0}
  .srow:not(.srow--head)>:not(:first-child),
  .srow:not(.srow--head) .s-meta>:not(:first-child){border-left:0}
  .s-when{justify-content:flex-end}
  .s-meta{display:flex;gap:18px;grid-area:meta}
  .s-lead{display:block}
  .s-cover,.s-lead{font-size:.72rem}
  /* .sl is visually-hidden on desktop and becomes REAL VISIBLE TEXT here, at
     9.6px over the tinted srow backgrounds. --dim lands at 4.46:1 on the amber
     row, just under AA; --muted clears it on every row variant. */
  .sl{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:.6rem;letter-spacing:.12em;color:var(--muted);margin-right:6px;text-transform:uppercase}
  .sheet__badge{margin-left:0}
}

/* ============ §11 utilities ============ */
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tc{text-align:center}
.mt-0{margin-top:0}
.mt-12{margin-top:12px}
.mt-20{margin-top:20px}
.mt-28{margin-top:28px}
.mt-40{margin-top:40px}
.mt-56{margin-top:56px}

/* ============ §12 motion ============ */
/* hero load sequence (homepage; winner verbatim) */
@media (prefers-reduced-motion:no-preference){
  .hz__line{animation:hzdraw 1s cubic-bezier(.6,0,.2,1) .15s both}
  .hz__seg{animation:hzdraw .7s cubic-bezier(.6,0,.2,1) .95s both}
  .hz__tick,.hz__tick span{animation:hzfade .5s ease both}
  .hz__tick--1{animation-delay:.75s}
  .hz__tick--2{animation-delay:.9s}
  .hz__node--t i,.hz__node--t .hz__lab,.hz__node--t .hz__date{animation:hzfade .5s ease .3s both}
  .hz__win{animation:hzfade .6s ease 1.5s both}
  .hz__node--e i{animation:hzstamp .55s cubic-bezier(.3,1.4,.5,1) 1.25s both}
  .hz__node--e .hz__lab,.hz__node--e .hz__date{animation:hzfade .5s ease 1.45s both}
  .hz__cap{animation:hzfade .7s ease 1.7s both}
  .hz__win i{animation:hzpulse 3.4s ease-in-out 2.4s infinite}
  .sheet__cap{animation:hzfade .5s ease 1.75s both}
  .sheet__body .srow:not(.srow--head){animation:hzrise .5s ease both}
  .sheet__body .srow:nth-child(2){animation-delay:1.8s}
  .sheet__body .srow:nth-child(3){animation-delay:1.88s}
  .sheet__body .srow:nth-child(4){animation-delay:1.96s}
  .sheet__body .srow:nth-child(5){animation-delay:2.04s}
  .sheet__foot{animation:hzfade .5s ease 2.2s both}
  .hero h1,.hero .eyebrow,.hero__lead,.hero__actions{animation:hzrise .6s ease both}
  .hero .eyebrow{animation-delay:.05s}
  .hero h1{animation-delay:.12s}
  .hero__lead{animation-delay:.22s}
  .hero__actions{animation-delay:.32s}
}
/* sibling page-head load-in (same curve + delays as the hero) */
@media (prefers-reduced-motion:no-preference){
  .page-head .crumbs,.page-head__tick,.page-head h1,.page-head .sub,.page-head__actions{animation:hzrise .6s ease both}
  .page-head__tick{animation-delay:.05s}
  .page-head h1{animation-delay:.12s}
  .page-head .sub{animation-delay:.22s}
  .page-head__actions{animation-delay:.32s}
}
@keyframes hzdraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hzfade{from{opacity:0}to{opacity:1}}
@keyframes hzrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hzstamp{0%{opacity:0;transform:translate(50%,-50%) scale(2.1)}60%{opacity:1;transform:translate(50%,-50%) scale(.9)}100%{opacity:1;transform:translate(50%,-50%) scale(1)}}
@keyframes hzpulse{0%,100%{opacity:.45}50%{opacity:1}}
/* reduced motion: collapse everything (quality floor) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- consent bar ---------------------------------------------------
   Deliberately small. A corner card on desktop, roughly a third of the width
   of the bar most sites use, anchored bottom-left so it never sits over the
   CTA on the right of a hero. Slim strip on mobile where a card would eat the
   viewport. Both buttons are the same size: a decline styled as a whisper is
   a dark pattern, and the whole point of this is that the choice is real. */
.cbar{position:fixed;left:20px;bottom:20px;z-index:80;max-width:340px;
  display:flex;flex-direction:column;gap:11px;padding:15px 17px;
  background:var(--s1);border:1px solid var(--line2);border-radius:8px;
  box-shadow:0 10px 34px rgba(0,0,0,.42);
  opacity:0;transform:translateY(10px);transition:opacity .24s ease,transform .24s ease}
.cbar.is-on{opacity:1;transform:none}
.cbar p{margin:0;font:400 .79rem/1.55 var(--sans);color:var(--dim)}
.cbar a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.cbar__act{display:flex;gap:8px}
.cbar__act .btn{flex:1;text-align:center;padding:.55em .9em;font-size:.82rem}
@media (max-width:640px){
  .cbar{left:12px;right:12px;bottom:12px;max-width:none;
    padding:13px 15px calc(13px + env(safe-area-inset-bottom))}
  .cbar p{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){.cbar{transition:none}}