/* ================================================================
   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);
  --paper:#f2f5f7;
  --muted:#9aa7b2;
  --dim:#78838d;
  --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);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rail-w:76px;
  --rail-x:34px;
  --ml:clamp(56px,12.5vw,196px);
  --mr:clamp(18px,4.5vw,64px);
}
@media (max-width:720px){
  :root{--rail-w:44px;--rail-x:16px;--ml:56px;--mr:18px}
}

/* ============ §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:.14em;text-transform:uppercase}
.eyebrow{display:block;font:500 .7rem/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}

h1,h2,h3{font-weight:700;letter-spacing:-.03em;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:rgba(10,10,10,.95);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:26px;padding:0 var(--mr) 0 var(--ml);height:64px}
.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__book{margin-left:6px;padding:.6em 1.1em;font-size:.86rem}
.nav__toggle{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:.16em;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{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 img{height:22px;width:auto}
.footer__brand p{color:var(--muted);font-size:.9rem;margin-top:16px;max-width:34ch}
.footer h4{font:500 .64rem/1 var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:16px}
.footer li{margin-bottom:10px}
.footer li a{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(--line2) 0,var(--line2) 1px,transparent 1px,transparent 34px),
  linear-gradient(var(--line),var(--line))}
.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(--dim);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,.rail__dock--end.past b{color:var(--amber)}
.rail__dock--felt.past::before,.rail__dock--end.past::before{background:var(--amber-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 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--cyan)}
.page-head__tick span{font:500 .65rem/1.4 var(--mono);letter-spacing:.13em;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:.13em;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:.13em;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) -------- */
.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)}

/* -- failure ledger (amber = 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-weight:600}
.fmeta .felt b{color:var(--amber)}
.fmeta .dec b{color:var(--cyan)}
.fnote{margin-top:24px;font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fnote em{color:var(--amber);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:.15em;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:500 .66rem var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.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;font:500 .95rem var(--sans);color:var(--cyan-b)}
.linkline:hover{text-decoration:underline;text-underline-offset:4px}

/* -- pricing: build band + two plans ------------------------------- */
.build{display:grid;grid-template-columns:250px 1fr;gap:12px 56px;border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:6px;background:var(--s1);padding:28px 30px;margin-top:44px;align-items:center}
.build__label{font:500 .66rem/1.7 var(--mono);letter-spacing:.15em;color:var(--dim);text-transform:uppercase}
.build__price{font:600 1.9rem/1.15 var(--mono);letter-spacing:-.02em;margin-top:6px}
.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)}
.plan__name{font:500 .68rem/1 var(--mono);letter-spacing:.17em;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:inline-block;margin-top:30px;font:500 .68rem/1.8 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:4px;padding:10px 16px}
.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:.14em;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}
.tablehint{display:none;margin-top:10px;font:500 .6rem var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
@media (max-width:720px){.tablehint{display:block}}

/* -- 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{font:600 .68rem/1 var(--mono);letter-spacing:.18em;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:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap;padding-bottom:16px}
.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 .62rem/1.5 var(--mono);letter-spacing:.13em;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:.14em;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:center}
.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-weight:600;text-align:right}
@media (max-width:880px){
  .triad{grid-template-columns:1fr;gap:22px}
  .rrow{grid-template-columns:1fr;gap:10px}
  .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:340px}
}

/* -- tool band ------------------------------------------------------ */
.tool{border:1px solid var(--cyan-dim);background:var(--cyan-tint);border-radius:10px;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 .62rem/1.7 var(--mono);letter-spacing:.13em;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(--amber);background:var(--bg)}
.mini b{position:absolute;right:0;bottom:14px;font:600 .66rem var(--mono);letter-spacing:.16em;color:var(--amber);text-transform:uppercase}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.04em;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:18px;font:500 .68rem/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;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:.15em;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 .62rem/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:.14em;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 h3{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 h3{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:.16em;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:.15em;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:.18em;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:.16em;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:.14em;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 .62rem var(--mono);letter-spacing:.15em;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(--amber);background:var(--bg)}
.hz__lab{position:absolute;top:80px;font:600 .68rem var(--mono);letter-spacing:.16em;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(--amber);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:.15em;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 .62rem var(--mono);letter-spacing:.16em;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--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){
  .srow--head{display:none}
  .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{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:.6rem;letter-spacing:.12em;color:var(--dim);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}
}