/* ============================================================
   room.css · ExecutionPartner.AI
   The flow system (design 2026-09-08): void ground, paper reading
   sections, amber for action and money, teal for live and data,
   Archivo for display and body, JetBrains Mono for labels and data.
   Order: tokens + system → components carried from the AI-OS preview
   → compat layer for the older pages → reduced motion + responsive.
   ============================================================ */
/* ============================================================
   EXECUTION PARTNER · executionpartner.ai
   "Stepping into the system" — the flow refactor.
   ------------------------------------------------------------
   Tokens carried verbatim from the AI-OS system. What changed is
   how the page moves: one entrance (boot), one page-change device
   (the route wipe), one scroll device (the index rail + reveals +
   counts), one pinned stage (What runs). Everything else is still.
   Colour discipline is unchanged: amber = action + money, teal =
   live + data, nothing else gets either.
   ============================================================ */
:root{
  --void:#030B18;--void-2:#020814;--navy:#0B1F3A;--navy-2:#0E2647;--navy-3:#123057;
  --line:rgba(143,163,191,.16);--line-strong:rgba(143,163,191,.3);
  --ink-on-dark:#EAF0F8;--body-on-dark:#B9C7DC;--muted:#8FA3BF;--faint:#54688A;
  --amber:#F59E0B;--amber-hot:#FFB627;--amber-soft:rgba(245,158,11,.14);
  --teal:#14B8A6;--teal-deep:#0D9488;--teal-soft:rgba(20,184,166,.12);
  --paper:#F6F8FB;--paper-2:#EDF1F7;--ink:#0B1F3A;--ink-body:#33455F;--ink-muted:#4B5D77;
  --display:"Archivo","Arial Black",Arial,sans-serif;
  --body:"Archivo",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --max:1240px;--radius:12px;--radius-lg:18px;--bar:60px;
  --ease:cubic-bezier(.2,.7,.25,1);
}
html{color-scheme:dark;background:var(--void);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink-on-dark);font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.locked{overflow:hidden}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;top:-100px;left:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:120;font-family:var(--mono);font-size:.8rem}
.skip-link:focus{top:0}
::selection{background:var(--amber);color:#1a1206}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:900;font-stretch:125%;line-height:.98;letter-spacing:-.015em;margin:0 0 1.2rem;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:1.3rem;line-height:1.15}
h4{font-family:var(--body);font-weight:700;margin:0 0 .8rem}
p{margin:0 0 1.2rem}
.stop{color:var(--amber)}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;font-weight:600}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none;transform-origin:left;transition:transform .8s var(--ease) .15s}
html.js .rv:not(.in) .eyebrow::before,html.js [data-reveal]:not(.in) .eyebrow::before{transform:scaleX(0)}
.light .eyebrow{color:var(--teal-deep)}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:58ch;margin:0 0 2rem;line-height:1.65}
.light .lede{color:var(--ink-muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--mono);font-size:.84rem;letter-spacing:.03em;font-weight:600;padding:.95rem 1.5rem;border-radius:10px;border:1px solid transparent;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s,background .18s,border-color .18s,color .18s}
.btn-amber{background:var(--amber);color:#1a1206;box-shadow:0 8px 28px rgba(245,158,11,.22)}
.btn-amber:hover{background:var(--amber-hot);transform:translateY(-2px);box-shadow:0 14px 36px rgba(245,158,11,.34)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink-on-dark)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.light .btn-ghost{color:var(--ink);border-color:rgba(11,31,58,.28)}
.light .btn-ghost:hover{border-color:var(--teal-deep);color:var(--teal-deep)}
.btn-sm{padding:.58rem 1rem;font-size:.74rem;border-radius:8px}
.arr{display:inline-block;transition:transform .18s var(--ease)}
.btn:hover .arr,a:hover>.arr{transform:translateX(3px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}

/* ============================================================
   THE COMMAND BAR — a slim instrument strip, not a header
   ============================================================ */
.bar{position:fixed;inset:0 0 auto;z-index:70;height:var(--bar);background:rgba(3,11,24,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.bar.scrolled,.bar.menu-open{background:rgba(3,11,24,.9);border-bottom-color:var(--line)}
.bar-in{height:100%;display:flex;align-items:center;gap:1.6rem}
.logo{flex:none;line-height:0}
.logo img{height:16px;width:auto}
.links{margin:0 auto}
.nav-links{display:flex;gap:clamp(1rem,1.6vw,1.7rem);margin:0;padding:0;list-style:none}
.nav-links>li{position:relative}
.nav-links a{display:block;font-size:.9rem;color:var(--muted);padding:.3rem 0;position:relative;white-space:nowrap;transition:color .15s}
.nav-links>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--amber);transition:right .22s var(--ease)}
.nav-links>li>a:hover,.nav-links>li>a.active{color:#fff}
.nav-links>li>a:hover::after,.nav-links>li>a.active::after{right:0}
.has-sub>a{padding-right:15px}
.has-sub>a::before{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-72%) rotate(45deg);opacity:.65}
.nav-sub{position:absolute;left:50%;top:100%;z-index:60;min-width:236px;margin:0;padding:.5rem;list-style:none;background:linear-gradient(180deg,var(--navy) 0%,#071527 100%);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 22px 55px -22px rgba(0,0,0,.9);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-links li.has-sub:hover .nav-sub,.nav-links li.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-sub a{display:block;padding:.55rem .7rem;border-radius:7px;font-size:.88rem;color:var(--body-on-dark)}
.nav-sub a:hover{background:rgba(20,184,166,.1);color:#fff}
.nav-sub a .d{display:block;margin-top:.15rem;font-family:var(--mono);font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.bar-right{display:flex;align-items:center;gap:.9rem;flex:none}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:9px;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .2s}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink-on-dark);transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.bar-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent;pointer-events:none}
.bar-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 10px rgba(245,158,11,.45)}
@media(max-width:960px){
  .links{display:none}
  .burger{display:flex}
  .bar-in{gap:1rem}
}
@media(max-width:480px){.bar-right .btn{display:none}}

/* ---------- the menu (phones + tablets) ---------- */
.menu{position:fixed;inset:0;z-index:60;background:rgba(3,11,24,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:calc(var(--bar) + 1.6rem) 28px 2.2rem;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;overflow:auto}
.menu.open{visibility:visible;opacity:1}
.menu-big{display:grid;gap:.15rem}
.menu-big a{display:flex;align-items:baseline;gap:1rem;padding:.55rem 0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(1.8rem,7vw,2.8rem);line-height:1.05;color:var(--ink-on-dark);border-bottom:1px solid var(--line);transform:translateY(22px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.menu-big a .n{font-family:var(--mono);font-weight:400;font-stretch:100%;font-size:.6rem;letter-spacing:.2em;color:var(--teal);min-width:5ch}
.menu.open .menu-big a{transform:none;opacity:1}
.menu.open .menu-big a:nth-child(2){transition-delay:.05s}
.menu.open .menu-big a:nth-child(3){transition-delay:.1s}
.menu.open .menu-big a:nth-child(4){transition-delay:.15s}
.menu.open .menu-big a:nth-child(5){transition-delay:.2s}
.menu-sub{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin:1.4rem 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted)}
.menu-sub a:hover{color:var(--teal)}
.menu-foot{margin-top:auto;padding-top:2rem;display:grid;gap:1rem}
.menu-foot .btn{justify-self:start}
@media(min-width:961px){.menu{display:none}}

/* ============================================================
   BOOT — the entrance. A curtain over a fully rendered page.
   Runs once per session, lifts in 700ms, any key or click skips it.
   ============================================================ */
.boot{position:fixed;inset:0;z-index:100;background:var(--void);display:flex;align-items:center;justify-content:center;transition:transform .7s var(--ease)}
.boot::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(20,184,166,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(700px 500px at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(700px 500px at 50% 50%,#000 20%,transparent 75%)}
.boot.out{transform:translateY(-100%);pointer-events:none}
.boot.gone,html:not(.js) .boot{display:none}
.boot-in{position:relative;width:min(440px,86vw);font-family:var(--mono)}
.boot-logo{height:18px;width:auto;margin-bottom:2.2rem}
.boot-log{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.72rem;letter-spacing:.06em;color:var(--muted);min-height:6.6em}
.boot-log li{display:flex;gap:.9rem;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.boot-log li::before{content:"·";color:var(--faint);width:1ch;flex:none}
.boot-log li.ok{opacity:1;transform:none}
.boot-log li.ok::before{content:"✓";color:var(--teal)}
.boot-log li.ok b{color:var(--ink-on-dark);font-weight:600}
.boot-bar{display:block;height:1px;background:var(--line);margin-top:1.7rem;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--amber));transition:width .95s linear}
.boot.run .boot-bar i{width:100%}
.boot-skip{margin-top:1.3rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.boot-skip:hover{color:var(--ink-on-dark)}

/* ============================================================
   INDEX RAIL — the page's sections, as an instrument on the edge
   ============================================================ */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:none;flex-direction:column;align-items:flex-end;gap:.7rem;font-family:var(--mono)}
@media(min-width:1320px){html.js .rail{display:flex}}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;justify-items:end}
.rail button{display:flex;align-items:center;gap:.75rem;padding:.32rem 0;color:var(--faint);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;transition:color .25s}
.rail button i{width:14px;height:1px;background:currentColor;flex:none;transition:width .25s var(--ease)}
.rail button .rl{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;white-space:nowrap}
.rail button:hover .rl,.rail button.on .rl{opacity:1;transform:none}
.rail button:hover{color:var(--muted)}
.rail button.on{color:var(--teal)}
.rail button.on i{width:26px}
.rail .pct{font-size:.56rem;letter-spacing:.18em;color:var(--faint);font-variant-numeric:tabular-nums}
.rail.on-light button:not(.on){color:rgba(11,31,58,.38)}
.rail.on-light button:hover{color:var(--ink-muted)}
.rail.on-light button.on{color:var(--teal-deep)}
.rail.on-light .pct{color:rgba(11,31,58,.45)}

/* ============================================================
   REVEALS — JS-gated; the resting state is fully visible
   ============================================================ */
html.js .rv,html.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .rv.in,html.js [data-reveal].in{opacity:1;transform:none}
html.js .sec-head.rv{filter:blur(6px);transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease)}
html.js .sec-head.rv.in{filter:blur(0)}
[data-count]{font-variant-numeric:tabular-nums}

/* ============================================================
   HERO — the OS window is the thesis. Content-sized, not viewport-sized.
   ============================================================ */
.hero{position:relative;padding:calc(var(--bar) + 5.5rem) 0 5rem;overflow:hidden;background:radial-gradient(1100px 640px at 78% 30%,rgba(13,148,136,.12),transparent 60%),radial-gradient(800px 560px at 12% 90%,rgba(245,158,11,.07),transparent 55%),var(--void)}
#circuit{position:absolute;inset:0;width:100%;height:100%;opacity:.75;pointer-events:none;z-index:0}
.spot{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(560px 560px at var(--mx,70%) var(--my,40%),rgba(20,184,166,.11),transparent 62%);opacity:0;transition:opacity .6s}
.hero:hover .spot{opacity:1}
@media(hover:none){.spot{display:none}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.03;margin-bottom:1.4rem}
.hero h1 .l2{display:block}
@supports(-webkit-text-stroke:1px #fff){
  .hero h1 .l2{color:transparent;-webkit-text-stroke:1.5px rgba(234,240,248,.55)}
  .hero h1 .l2 .stop{color:var(--amber);-webkit-text-stroke:0}
}
.hero .lede{max-width:54ch}
.hero-note{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.06em;margin:0}
.hero-note b{color:var(--teal)}
.hero .eyebrow{margin-bottom:1.4rem}
/* headline rotator: every phrase stays in flow, so the tallest sizes the block */
.rot{display:grid}
.rot>span{grid-area:1/1;visibility:hidden}
.rot>span.on{visibility:visible}
html.js .rot>span.on{animation:rot-in .45s var(--ease) both}
@keyframes rot-in{from{opacity:0;filter:blur(4px);transform:translateY(4px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
/* entrance: the boot lifts and the copy settles into place, staggered */
@keyframes settle{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes feed-in{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
html.js.booted .hero-copy>*{animation:settle .7s var(--ease) both}
html.js.booted .hero-copy>*:nth-child(2){animation-delay:.07s}
html.js.booted .hero-copy>*:nth-child(3){animation-delay:.14s}
html.js.booted .hero-copy>*:nth-child(4){animation-delay:.21s}
html.js.booted .hero-copy>*:nth-child(5){animation-delay:.28s}
html.js.booted .hero .os{animation:feed-in .9s var(--ease) .25s both}
@keyframes pulse{50%{opacity:.4}}

/* ---------- ambient: blueprint grid + aurora on the void bands ---------- */
.hero::before,.page-hero::before,.final::before,.post-header::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(20,184,166,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.032) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(1100px 700px at 62% 38%,#000 25%,transparent 78%);mask-image:radial-gradient(1100px 700px at 62% 38%,#000 25%,transparent 78%);animation:grid-pan 70s linear infinite}
@keyframes grid-pan{to{background-position:0 -560px,-560px 0}}
.hero::after,.final::after{content:"";position:absolute;width:75vw;height:75vw;max-width:950px;max-height:950px;left:48%;top:-22%;pointer-events:none;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(13,148,136,.18),transparent 66%),radial-gradient(closest-side at 28% 72%,rgba(245,158,11,.12),transparent 62%);filter:blur(46px);animation:aurora 16s ease-in-out infinite alternate}
.final::after{left:10%;top:auto;bottom:-40%}
@keyframes aurora{from{transform:translate3d(-7%,-4%,0) scale(1) rotate(0deg)}to{transform:translate3d(6%,9%,0) scale(1.18) rotate(28deg)}}

/* ---------- inner page hero: same ground, one scan line on entry ---------- */
.page-hero{position:relative;padding:calc(var(--bar) + 5.5rem) 0 4.5rem;overflow:hidden;background:radial-gradient(900px 500px at 80% 20%,rgba(13,148,136,.12),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(245,158,11,.06),transparent 55%),var(--void);border-bottom:1px solid var(--line)}
.page-hero .container,.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.3rem,5vw,4rem);max-width:20ch}
.page-hero .lede{margin-bottom:2rem}
.page-hero .hero-ctas{margin-bottom:0}
.page-hero::after,.post-header::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(20,184,166,.9),transparent);opacity:0;pointer-events:none;z-index:0}
html.js .page-hero::after,html.js .post-header::after{animation:scan 1.5s var(--ease) .1s 1}
@keyframes scan{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}100%{opacity:0;transform:translateY(420px)}}
html.js .page-hero .container>*,html.js .page-hero .wrap>*{animation:settle .6s var(--ease) both}
html.js .page-hero .container>*,html.js .page-hero .wrap>*:nth-child(2){animation-delay:.06s}
html.js .page-hero .container>*,html.js .page-hero .wrap>*:nth-child(3){animation-delay:.12s}
html.js .page-hero .container>*,html.js .page-hero .wrap>*:nth-child(4){animation-delay:.18s}
html.js .page-hero .container>*,html.js .page-hero .wrap>*:nth-child(5){animation-delay:.24s}

/* ============================================================
   SECTIONS — one rhythm for every page
   ============================================================ */
section.sec{position:relative;padding:6.5rem 0}
section.sec.tight{padding:4.5rem 0}
section.sec.light{background:var(--paper);color:var(--ink-body)}
section.sec.light h1,section.sec.light h2,section.sec.light h3{color:var(--ink)}
section.sec.light+section.sec.light{border-top:1px solid var(--paper-2)}
.sec-head{max-width:760px;margin-bottom:3.2rem}
.sec-head h2{margin-bottom:1rem}
.sec-head .lede{margin-bottom:0}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lede{margin-inline:auto}

/* the execution signal between a hero and its body */
.post-signal{background:var(--void);line-height:0;border-bottom:1px solid rgba(11,31,58,.08)}
.post-signal svg{width:100%;height:56px;display:block}
.post-signal .base{stroke:rgba(20,184,166,.22);stroke-width:1.5;fill:none}
.post-signal .pulse{stroke:var(--amber);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
html.js .post-signal .pulse{stroke-dasharray:90 1600;stroke-dashoffset:0;animation:signal-run 5.5s linear infinite}
@keyframes signal-run{from{stroke-dashoffset:1690}to{stroke-dashoffset:0}}

/* ---------- three steps (home) : one hairline plane ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.step{background:#fff;padding:2.1rem 1.9rem 2.2rem}
.step .wk{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--teal-deep);text-transform:uppercase;margin-bottom:.95rem}
.step.paid .wk{color:var(--amber)}
.step h3{font-size:1.18rem;margin-bottom:.55rem}
.step p{font-size:.9rem;color:var(--ink-muted);margin:0;line-height:1.6}
.steps-foot{margin-top:2rem}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

/* ---------- home proof strip: one figure size, one description size ---------- */
.tally.four>div{padding:2rem 1.8rem 2.1rem}
.tally.four b{font-size:clamp(2.8rem,4.6vw,4rem);letter-spacing:-.03em;display:flex;align-items:baseline;gap:.45rem}
.tally.four b .u{font-style:normal;font-family:var(--body);font-stretch:100%;font-weight:700;font-size:1rem;letter-spacing:0;color:var(--amber)}
.tally.four>div>span:not(.fig-l){font-size:.9rem;line-height:1.55;color:var(--ink-muted);margin-top:.9rem}
.tally.four b span{font-size:inherit}
.tally .fig-l{margin-top:0}
.tally.four{grid-template-columns:repeat(4,1fr)}
.tally .fig-l{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:.9rem}
@media(max-width:960px){.tally.four{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tally.four{grid-template-columns:1fr}}
.proof-foot{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:baseline;justify-content:space-between;margin-top:2rem}
.proof-foot p{margin:0;font-size:.95rem;color:var(--ink-body);max-width:66ch}
.proof-foot a,.q4-foot a,.go-link{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-deep);white-space:nowrap}

/* ============================================================
   WHAT RUNS — six cells on one hairline plane, no motion beyond the reveal
   ============================================================ */
.work-sec{background:var(--void)}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.work-cell{display:flex;flex-direction:column;background:var(--void);padding:2.1rem 1.9rem 2.2rem}
.work-cell .wf-n{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--teal);margin-bottom:.9rem}
.work-cell h3{font-size:1.3rem;margin-bottom:.6rem}
.work-cell>p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 1.3rem;max-width:40ch}
.work-cell .track{margin-top:auto}
.track{display:grid;margin:0;padding:0;list-style:none}
.track li{position:relative;padding:.45rem 0 .45rem 1.5rem;margin-left:.4rem;border-left:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--body-on-dark)}
.track li::before{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--void);border:1.5px solid var(--teal);transform:translateY(-50%)}
.track li:last-child{color:var(--ink-on-dark);font-weight:600}
.track li:last-child::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.16)}
.rule{margin:1.3rem 0 0;padding-left:.95rem;border-left:2px solid var(--amber);font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;line-height:1.6;color:var(--body-on-dark)}
.rule b{display:block;color:var(--amber);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.58rem;margin-bottom:.2rem}
.work-foot{margin-top:2.2rem}
@media(max-width:1100px){.work{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.work{grid-template-columns:1fr}}

/* ---------- About: the three, as three columns on one plane ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.member{display:flex;flex-direction:column;background:#fff;padding:2.2rem 2rem 2.3rem}
.member-por{width:88px;height:88px;border-radius:14px;object-fit:cover;margin-bottom:1.4rem}
.member h3{font-size:1.45rem;margin-bottom:.45rem}
.member-role{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);font-weight:700;margin:0 0 .3rem}
.member-loc{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 1.2rem}
.member-bio{font-size:.95rem;line-height:1.6;color:var(--ink-body);margin:0 0 1.8rem;max-width:40ch}
.member-rec{margin:auto 0 0;padding:0;border-top:1px solid var(--paper-2)}
.member-rec>div{padding-top:1.1rem}
.member-rec>div+div{margin-top:1.1rem;border-top:1px solid var(--paper-2)}
.member-rec dt{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:1.7rem;line-height:1;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;gap:.4rem}
.member-rec dt .u{font-family:var(--body);font-stretch:100%;font-weight:700;font-size:.78rem;letter-spacing:0;color:var(--amber)}
.member-rec dd{margin:.5rem 0 0;font-size:.86rem;line-height:1.55;color:var(--ink-muted)}
/* every row shares one track across the three columns, so the figures line up */
@supports(grid-template-rows:subgrid){
  .team{grid-template-rows:auto auto auto auto auto auto auto;row-gap:0}
  .member{display:grid;grid-template-rows:subgrid;grid-row:span 7;align-content:start}
  .member-bio{margin-bottom:0}
  .member-rec{display:contents}
  .member-rec>div{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--paper-2)}
  .member-rec>div:first-child{margin-top:1.8rem}
}
@media(max-width:960px){
  .team{grid-template-columns:1fr}
  .member{padding:1.9rem 1.6rem 2rem}
  @supports(grid-template-rows:subgrid){.member{display:flex;flex-direction:column}.member-rec{display:block}.member-bio{margin-bottom:1.8rem}.member-rec>div:first-child{margin-top:0;border-top:0}}
}

/* ---------- Our Process: the six pieces, with the trade that starts on each ---------- */
.pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.piece{display:flex;flex-direction:column;background:#fff;padding:2rem 1.8rem 2.1rem}
.piece-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.piece-top svg{width:26px;height:26px;display:block;flex:none}
.piece-top .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;font-weight:700;color:var(--ink-muted)}
.piece h3{font-size:1.22rem;margin-bottom:.55rem}
.piece .pain{font-size:.9rem;line-height:1.55;color:var(--ink-muted);margin:0 0 .75rem}
.piece .runs{font-size:.9rem;line-height:1.55;color:var(--ink-body);margin:0 0 1.5rem}
.piece dl{margin:auto 0 0;padding-top:1.05rem;border-top:1px solid var(--paper-2);display:grid;gap:.6rem}
.piece dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.8rem;align-items:baseline}
.piece dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-muted)}
.piece dd{margin:0;font-size:.84rem;line-height:1.6;color:var(--ink-body)}
.piece dd .num{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal-deep);background:var(--teal-soft);border-radius:5px;padding:.24rem .55rem;white-space:nowrap}
.piece dd a{color:var(--teal-deep);border-bottom:1px solid rgba(13,148,136,.4)}
.piece dd a:hover{color:var(--ink);border-bottom-color:var(--amber)}
/* every row of cells shares its tracks, so Moves and Goes first sit on one line across the row */
@supports(grid-template-rows:subgrid){
  .pieces{row-gap:0}
  .piece{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start;box-shadow:0 -1px 0 var(--paper-2)}
  .piece .runs{margin-bottom:1.4rem}
  .piece dl{margin-top:0;align-self:start}
}
@media(max-width:1000px){.pieces{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pieces{grid-template-columns:1fr}.piece{padding:1.7rem 1.4rem 1.8rem}}

/* ---------- Partners: two roles on one comparison plane ---------- */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.role{display:flex;flex-direction:column;background:#fff;padding:2.3rem 2.2rem 2.2rem}
.role-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.role-top svg{width:26px;height:26px;display:block;flex:none}
.role-top .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal-deep)}
.role h3{font-size:clamp(1.4rem,2.1vw,1.75rem);margin-bottom:.8rem}
.role>p{font-size:.95rem;line-height:1.62;color:var(--ink-body);margin:0 0 1.6rem;max-width:50ch}
.role dl{margin:0 0 1.8rem;border-top:1px solid var(--paper-2)}
.role dl div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--paper-2)}
.role dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-deep);padding-top:.2rem}
.role dd{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-body)}
.role .go{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal-deep)}
.role .go:hover{color:var(--ink)}
@supports(grid-template-rows:subgrid){
  .roles{row-gap:0}
  .role{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start}
  .role .go{margin-top:0;align-self:end}
}
@media(max-width:860px){.roles{grid-template-columns:1fr}.role{padding:2rem 1.6rem}@supports(grid-template-rows:subgrid){.role{display:flex;flex-direction:column}.role .go{margin-top:auto}}}
.creds-band .sec-head{margin-bottom:3rem}
.creds-band .sec-head .lede{color:var(--muted)}
/* four conversations, numbered because they happen in this order */
.convo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.convo>div{background:#fff;padding:1.9rem 1.7rem 2rem}
.convo .n{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;font-weight:700;color:var(--teal-deep);margin-bottom:.9rem}
.convo h3{font-size:1.12rem;margin-bottom:.5rem}
.convo p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-muted)}
.convo-note{margin:1.6rem 0 0;font-size:.92rem;color:var(--ink-muted);max-width:62ch}
@media(max-width:960px){.convo{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.convo{grid-template-columns:1fr}}

/* ---------- Blog: post cards with cover art ---------- */
.ind-grid.posts{grid-template-columns:repeat(2,1fr);gap:1.6rem}
.ind-grid.posts .kick{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-deep);margin-bottom:.75rem}
.ind-grid.posts h3{font-size:1.25rem;line-height:1.25;margin-bottom:.6rem}
.ind-grid.posts .b{padding:1.6rem 1.7rem 1.7rem}
@media(max-width:760px){.ind-grid.posts{grid-template-columns:1fr}}

/* ============================================================
   FAQ — typographic rows, not cards
   ============================================================ */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid rgba(11,31,58,.14)}
.faq details{border-bottom:1px solid rgba(11,31,58,.14);padding:1.15rem 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--teal-deep);font-size:1.2rem;transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:1rem 0 0;color:var(--ink-muted);font-size:.95rem;max-width:65ch}

/* ============================================================
   FINAL — the prompt. Every page ends at the same terminal.
   ============================================================ */
.final{position:relative;padding:8rem 0;overflow:hidden;background:radial-gradient(1000px 500px at 50% 120%,rgba(245,158,11,.09),transparent 60%),var(--void)}
.final-in{position:relative;z-index:1;text-align:center;max-width:820px}
.final h2{font-size:clamp(2.2rem,5.4vw,4.2rem)}
.final .lede{margin-inline:auto;margin-bottom:2.4rem}
.final .hero-ctas{justify-content:center;margin-bottom:0}
/* ============================================================
   FOOTER — quiet, with the system's status line
   ============================================================ */
footer{position:relative;border-top:1px solid var(--line);padding:4rem 0 2.2rem;background:var(--void-2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.foot-grid h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-grid a{font-size:.88rem;color:var(--body-on-dark)}
.foot-grid a:hover{color:#fff}
.foot-brand img{height:16px;width:auto;margin-bottom:1rem}
.foot-brand p{color:var(--muted);font-size:.86rem;max-width:30ch;margin:0}
.foot-legal{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.64rem;color:var(--faint);flex-wrap:wrap;gap:1rem;letter-spacing:.06em}
.foot-status{display:flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.14em}
.foot-status i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.foot-status b{color:var(--teal);font-weight:600}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}}

/* ============================================================
   SHARED PIECES the inner pages use
   ============================================================ */
.crumb{font-family:var(--mono)}
.flow{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.flow-copy h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.6rem 0 .9rem}
.flow-visual{display:flex;align-items:center;justify-content:center}
@media(max-width:960px){.flow{grid-template-columns:1fr;gap:2.4rem}}
.day{position:relative;max-width:760px;padding-left:2.2rem}
.day::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:1.5px;background:linear-gradient(180deg,var(--teal-deep),rgba(13,148,136,.08))}
.day-item{position:relative;padding:0 0 2rem}
.day-item:last-child{padding-bottom:0}
.day-item::before{content:"";position:absolute;left:-2.2rem;top:.35rem;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--teal-deep);margin-left:.06rem}
.day-item.money::before{border-color:var(--amber);box-shadow:0 0 10px rgba(245,158,11,.5)}
.day-item .tm{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
.day-item.money .tm{color:var(--amber)}
.day-item h3{font-size:1.05rem;font-family:var(--body);font-weight:700;font-stretch:100%;margin:.25rem 0 .3rem;line-height:1.35;color:var(--ink);letter-spacing:0}
.day-item p{font-size:.9rem;color:var(--ink-muted);margin:0;max-width:56ch}
.post-header{padding:calc(var(--bar) + 5.5rem) 0 3.5rem}
.post-header .container{position:relative;z-index:1}

/* ---------- pieces the site needs that the preview did not ---------- */
.ticks{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.8rem;max-width:60ch}
.ticks li{position:relative;padding-left:2rem;font-size:.94rem;color:var(--ink-body)}
.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(11,31,58,.18)}
.ticks li::after{content:"";position:absolute;left:.42rem;top:.42rem;width:5px;height:9px;border:solid var(--teal-deep);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.sec:not(.light) .ticks li{color:var(--body-on-dark)}
.sec:not(.light) .ticks li::before{border-color:var(--line-strong)}
.sec:not(.light) .ticks li::after{border-color:var(--teal)}
.post-header h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch}
.post-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0 0 1rem;font-weight:600}
.post-dek{color:var(--muted);font-size:1.05rem;max-width:60ch;margin:0;line-height:1.6}
.post-header .crumb{margin-bottom:1.2rem}
/* the older pages mark their primary button with a bare .btn inside .ctas */
.ctas .btn:not(.btn-secondary):not(.btn-ghost),.form .btn:not(.btn-secondary):not(.btn-ghost){background:var(--amber);color:#1a1206;box-shadow:0 8px 28px rgba(245,158,11,.22)}
.ctas .btn:not(.btn-secondary):not(.btn-ghost):hover,.form .btn:not(.btn-secondary):not(.btn-ghost):hover{background:var(--amber-hot);transform:translateY(-2px)}
.post-header .crumb a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(20,184,166,.45)}
.post-by{margin-top:1.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;margin-bottom:1rem}
.rel-head .rel-d{display:inline;margin:0}
.rel-group+.rel-group{margin-top:3rem}
.sec.light .flow{border-top:0;padding:0}

/* ============================================================
   CARRIED VERBATIM from the AI-OS system (component styling)
   ============================================================ */

/* -- post-signal (overridden below, kept for the keyframe) -- */
/* the execution-signal divider bridging hero \2192  body */
.post-signal{background:var(--void);line-height:0;border-bottom:1px solid rgba(11,31,58,.08)}

.post-signal .base{stroke:rgba(20,184,166,.25);stroke-width:1.5;fill:none}
.post-signal .pulse{stroke:var(--amber);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
html.js .post-signal .pulse{stroke-dasharray:90 1600;stroke-dashoffset:0;animation:signal-run 5.5s linear infinite}
@keyframes signal-run{from{stroke-dashoffset:1690}to{stroke-dashoffset:0}}

/* -- editorial post pages -- */
/* white reading surface */
.post-light{background:#fff;color:var(--ink-body)}
.post-layout{display:grid;grid-template-columns:minmax(0,720px) 200px;gap:5rem;justify-content:center;padding-top:4.5rem;padding-bottom:6rem}
.post-light .post-body{max-width:none;padding:0;color:var(--ink-body);font-size:1.06rem;line-height:1.75}
.post-light .post-body p{margin:0 0 1.5rem}
.post-light .post-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:3.2rem 0 1.1rem;color:var(--ink);position:relative}
.post-light .post-body h2::before{content:"";display:block;width:34px;height:3px;background:var(--amber);margin-bottom:.9rem;border-radius:2px}
.post-light .post-body h3{color:var(--ink);margin:2.2rem 0 .8rem}
.post-light .post-body strong{color:var(--ink)}
.post-light .post-body a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.post-light .post-body a:hover{color:var(--ink)}
.post-light .post-body ul,.post-light .post-body ol{padding-left:1.4rem;margin:0 0 1.6rem;display:grid;gap:.55rem}
.post-light .post-body ul li::marker{color:var(--amber)}
.post-light .post-body ol li::marker{color:var(--teal-deep);font-family:var(--mono);font-size:.85em}
.post-light .post-body blockquote{
  margin:2.6rem 0;padding:1.6rem 2rem;position:relative;
  background:var(--paper);border-left:3px solid var(--amber);border-radius:0 14px 14px 0;
}
.post-light .post-body blockquote p{
  margin:0;font-family:var(--display);font-weight:700;font-stretch:110%;
  font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.35;color:var(--ink);
}
.post-light .post-body blockquote::before{
  content:"\201C";position:absolute;top:-1.4rem;left:1.2rem;font-family:var(--display);
  font-size:4.5rem;font-weight:900;color:var(--amber);opacity:.9;line-height:1;
}
.post-light .post-body hr{border:0;margin:3rem 0;text-align:center}
.post-light .post-body hr::after{content:"\25A0";color:var(--amber);font-size:.7rem;letter-spacing:1.2rem;padding-left:1.2rem}
/* drop cap on the opening paragraph */
.post-light .post-body > p:first-of-type::first-letter{
  font-family:var(--display);font-weight:900;font-stretch:125%;
  font-size:4.1em;line-height:.78;color:var(--ink);
  float:left;padding:.08em .12em 0 0;
}
/* em footer note */
.post-light .post-body em{color:var(--ink-muted)}

/* sticky TOC rail */
.post-toc{position:sticky;top:110px;align-self:start;font-family:var(--mono)}
.post-toc .toc-head{font-size:.62rem;letter-spacing:.22em;color:var(--ink-muted);text-transform:uppercase;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.post-toc .toc-head::before{content:"";width:16px;height:1px;background:var(--teal-deep)}
.post-toc a{display:block;font-size:.72rem;line-height:1.4;color:var(--ink-muted);padding:.35rem 0 .35rem .85rem;border-left:2px solid rgba(11,31,58,.12);transition:color .15s,border-color .15s}
.post-toc a:hover{color:var(--ink)}
.post-toc a.active{color:var(--teal-deep);border-left-color:var(--amber)}

/* staggered content reveal (JS adds .rv to children) */
html.js .post-light .post-body > .rv{transition-duration:.55s}

@media (max-width:1080px){
  .post-layout{grid-template-columns:minmax(0,720px);gap:0}
  .post-toc{display:none}
}

/* -- os shell chrome -- */
.os{
  width:100%;max-width:470px;margin-left:auto;
  background:rgba(6,17,35,.72);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.os-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.os-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none}
.os-bar .dot.live{background:var(--teal);box-shadow:0 0 10px var(--teal)}
html.js .os-bar .dot.live{animation:pulse 2s infinite}
.os-bar .title{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--muted);margin-left:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-bar .clock{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--faint);margin-left:auto;white-space:nowrap;flex:none;padding-left:.6rem}
.os-h{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.6rem;
}
.os-h b{color:var(--teal);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.os-h b .dot.live{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}

/* -- tally -- */
.tally{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.tally div{background:#fff;padding:1.5rem 1.4rem}
.tally b{display:block;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:2.2rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.tally span{display:block;margin-top:.6rem;font-size:.8rem;color:var(--ink-muted)}

/* -- the Monday page -- */
/* ---------- the Monday page ---------- */
.mp-sec{padding:0 0 6rem;background:var(--void)}
.mp{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--navy);overflow:hidden;
  font-variant-numeric:tabular-nums;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.mp .lbl{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mp-head{display:grid;gap:1.2rem;padding:1.8rem;border-bottom:1px solid var(--line);background:var(--navy-2)}
@media(min-width:820px){.mp-head{grid-template-columns:1fr auto;align-items:start}}
.mp-head .eye{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.mp-head h3{margin:.7rem 0 0;font-family:var(--display);font-weight:900;font-stretch:112%;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink-on-dark)}
.mp-who{display:flex;align-items:center;gap:.8rem;margin:.7rem 0 0;font-size:.88rem;color:var(--body-on-dark);flex-wrap:wrap}
.mp-redact{display:inline-block;width:150px;height:11px;border-radius:3px;background:var(--navy-3);flex:none}
.mp-built{font-size:.88rem;color:var(--ink-on-dark);margin:0}
.mp-built span{display:block;color:var(--faint);font-size:.76rem;margin-top:.3rem}
@media(min-width:820px){.mp-built{text-align:right}}
.mp-four{display:grid;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
@media(min-width:640px){.mp-four{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.mp-four{grid-template-columns:repeat(4,1fr)}}
.mp-n{background:var(--void);padding:1.8rem 1.5rem}
.mp-n .lbl i{font-style:normal;color:var(--amber);margin-right:.6rem}
.mp-n .fig{display:block;margin-top:.7rem;font-family:var(--display);font-weight:900;font-stretch:125%;
  font-size:clamp(2rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--ink-on-dark)}
.mp-n .fig em{font-style:normal;font-family:var(--body);font-stretch:100%;font-size:1rem;font-weight:600;color:var(--body-on-dark);margin-left:.5rem;letter-spacing:0}
.mp-n .fig.words{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.15}
.mp-n .vs{display:block;margin-top:.8rem;font-size:.88rem;color:var(--body-on-dark)}
.mp-n .vs b{color:var(--teal);font-weight:700}
.mp-n .note{display:block;margin-top:.8rem;font-size:.88rem;color:var(--body-on-dark)}
.mp-n .note b{color:var(--amber);font-weight:700}
.mp-body{display:grid}
@media(min-width:1000px){.mp-body{grid-template-columns:7fr 5fr}}
.mp-col{padding:1.8rem;border-top:1px solid var(--line);align-content:start}
@media(min-width:1000px){.mp-col{border-top:0}.mp-col + .mp-col{border-left:1px solid var(--line)}}
.mp-col > .lbl{display:block;margin-bottom:1.4rem}
.mp-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.mp-tbl th{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:right;padding:0 0 .7rem;white-space:nowrap}
.mp-tbl th:first-child{text-align:left}
.mp-tbl td{padding:.7rem 0;border-top:1px solid var(--line);text-align:right;color:var(--ink-on-dark);white-space:nowrap}
.mp-tbl td:first-child{text-align:left;color:var(--body-on-dark);white-space:normal}
.mp-tbl .up{color:var(--teal);font-weight:700}
.mp-tbl .na{color:var(--faint)}
.mp-key{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.8rem 0 1rem;font-size:.76rem;color:var(--body-on-dark)}
.mp-key span{display:flex;align-items:center;gap:.5rem}
.mp-key i{width:10px;height:10px;border-radius:2px;flex:none}
.mp-chart{display:flex;gap:.4rem;align-items:flex-end;height:190px}
.mp-chart .wk{flex:1;display:flex;gap:2px;align-items:flex-end;height:100%}
.mp-chart .wk b{flex:1;border-radius:2px 2px 0 0;display:block}
.mp-chart .wk .a{background:var(--amber)}
.mp-chart .wk .p{background:var(--navy-3)}
html.js .mp-sec.in .mp-chart .wk b{animation:mp-rise .9s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes mp-rise{from{height:0 !important}}
.mp-x{display:flex;gap:.4rem;margin-top:.6rem}
.mp-x span{flex:1;text-align:center;font-family:var(--mono);font-size:.56rem;color:var(--faint)}
.mp-ran{list-style:none;padding:0;margin:0;display:grid;gap:1.2rem}
.mp-ran li{display:grid;grid-template-columns:18px 1fr;gap:.8rem;font-size:.88rem;line-height:1.5;color:var(--body-on-dark)}
.mp-ran li + li{border-top:1px solid var(--line);padding-top:1.2rem}
.mp-ran b{color:var(--ink-on-dark)}
.mp-tick{width:16px;height:16px;border-radius:4px;background:var(--teal);position:relative;margin-top:.2rem}
.mp-tick::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mp-tick.open{background:transparent;border:1.5px solid var(--amber)}
.mp-tick.open::after{display:none}
.mp-ran .sub{display:block;margin-top:.4rem;font-size:.78rem;color:var(--faint)}
.mp-wrong{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.mp-wrong > .lbl{display:block;margin-bottom:1.2rem}
.mp-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1.1rem 1.8rem;border-top:1px solid var(--line);background:var(--navy-2);font-size:.78rem;color:var(--faint)}
.mp-foot p{margin:0;max-width:80ch}
.mp-stamp{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:5px;padding:.45rem .8rem;flex:none}
.mp-cap{margin:1.2rem 0 0;font-size:.88rem;color:var(--muted)}

/* -- the Monday page, hero size -- */
/* ---------- the Monday page, hero size ----------
   The full-width version lives on How it works. This is the same page
   compressed to the hero column: the four numbers 2x2, thirteen weeks of
   revenue against last year, and the stamp. It rides the system's .os chrome. */
.os-monday{max-width:520px}
.os-monday .mc-client{display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.os-monday .mc-redact{width:78px;height:9px;border-radius:2px;background:var(--navy-3);flex:none}

.mc-four{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.mc-n{background:rgba(3,11,24,.72);padding:.95rem 1rem 1.05rem}
.mc-n .k{display:block;font-family:var(--mono);font-size:.56rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mc-n .k i{font-style:normal;color:var(--amber);margin-right:.45rem}
.mc-n .v{display:block;margin-top:.45rem;font-family:var(--display);font-weight:900;
  font-stretch:125%;font-size:1.85rem;line-height:1;letter-spacing:-.03em;color:var(--ink-on-dark)}
.mc-n .v.words{font-size:.95rem;font-stretch:112%;line-height:1.2;letter-spacing:-.01em;color:var(--body-on-dark)}
.mc-n .s{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.04em;color:var(--muted)}
.mc-n .s b{color:var(--teal);font-weight:700}
.mc-n .s b.warn{color:var(--amber)}

.mc-chart{padding:1rem 1rem .9rem;border-top:1px solid var(--line)}
.mc-h{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mc-h b{color:var(--amber);font-weight:600;letter-spacing:.12em}
.mc-bars{display:flex;gap:4px;align-items:flex-end;height:64px;margin-top:.7rem}
.mc-bars .wk{flex:1;display:flex;gap:1.5px;align-items:flex-end;height:100%}
.mc-bars .wk b{flex:1;border-radius:1.5px 1.5px 0 0;display:block}
.mc-bars .wk .a{background:var(--amber)}
.mc-bars .wk .p{background:var(--navy-3)}
.mc-bars .wk:last-child .a{box-shadow:0 0 10px rgba(245,158,11,.55)}
html.js .in .mc-bars .wk b{animation:mc-rise .85s cubic-bezier(.2,.7,.3,1) backwards}
.mc-bars .wk:nth-child(2) b{animation-delay:.04s}
.mc-bars .wk:nth-child(3) b{animation-delay:.08s}
.mc-bars .wk:nth-child(4) b{animation-delay:.12s}
.mc-bars .wk:nth-child(5) b{animation-delay:.16s}
.mc-bars .wk:nth-child(6) b{animation-delay:.2s}
.mc-bars .wk:nth-child(7) b{animation-delay:.24s}
.mc-bars .wk:nth-child(8) b{animation-delay:.28s}
.mc-bars .wk:nth-child(9) b{animation-delay:.32s}
.mc-bars .wk:nth-child(10) b{animation-delay:.36s}
.mc-bars .wk:nth-child(11) b{animation-delay:.4s}
.mc-bars .wk:nth-child(12) b{animation-delay:.44s}
.mc-bars .wk:nth-child(13) b{animation-delay:.48s}
@keyframes mc-rise{from{height:0 !important}}
.mc-key{display:flex;flex-wrap:wrap;gap:.35rem .95rem;margin-top:.6rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;color:var(--faint)}
.mc-key span{display:flex;align-items:center;gap:.35rem}
.mc-key i{width:7px;height:7px;border-radius:1.5px;flex:none}

.mc-ran{border-top:1px solid var(--line);padding:.75rem 1rem;display:grid;gap:.45rem}
.mc-ran div{display:flex;align-items:flex-start;gap:.6rem;font-size:.78rem;line-height:1.4;color:var(--body-on-dark)}
.mc-ran b{color:var(--ink-on-dark);font-weight:600}
.mc-tick{width:13px;height:13px;border-radius:3.5px;background:var(--teal);position:relative;flex:none;margin-top:.15rem}
.mc-tick::after{content:"";position:absolute;left:4px;top:1.5px;width:3.5px;height:6.5px;
  border:solid var(--void);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.mc-tick.open{background:transparent;border:1.4px solid var(--amber)}
.mc-tick.open::after{display:none}

.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem 1rem;border-top:1px solid var(--line);background:rgba(11,31,58,.4)}
.mc-foot span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.mc-stamp{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);
  border-radius:4px;padding:.35rem .6rem;flex:none;white-space:nowrap}

@media(max-width:1100px){.os-monday{max-width:none;margin-inline:0}}
@media(max-width:460px){
  .mc-four{grid-template-columns:1fr}
  .mc-n .v{font-size:1.6rem}
  .mc-foot{flex-direction:column;align-items:flex-start}
}

/* -- credentials band -- */
/* ---------- credentials band (replaces the standalone statement) ----------
   The statement stays as the setup line; the four figures are the payoff and
   carry the band. Same void ground, grid and aurora as the other dark bands. */
.creds-band{position:relative;padding:5.5rem 0 6rem;overflow:hidden;background:var(--void)}
.creds-band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(20,184,166,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,166,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(900px 560px at 30% 40%,#000 20%,transparent 76%);
  mask-image:radial-gradient(900px 560px at 30% 40%,#000 20%,transparent 76%);
  animation:grid-pan 70s linear infinite}
.creds-band::after{content:"";position:absolute;width:60vw;height:60vw;max-width:760px;max-height:760px;
  right:-8%;bottom:-38%;pointer-events:none;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(13,148,136,.15),transparent 66%),
    radial-gradient(closest-side at 32% 68%,rgba(245,158,11,.1),transparent 62%);
  filter:blur(46px);animation:aurora 16s ease-in-out infinite alternate}
.creds-band .container{position:relative;z-index:1}

.creds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem}
.creds-cell{padding-left:1.6rem;border-left:1px solid var(--line)}
.creds-cell:first-child{padding-left:0;border-left:0}
.creds-cell .n{font-family:var(--display);font-weight:900;font-stretch:125%;
  font-size:clamp(2.3rem,4vw,3.4rem);line-height:1;letter-spacing:-.03em;
  color:var(--ink-on-dark);margin:0}
.creds-cell .n .u{font-family:var(--body);font-stretch:100%;font-weight:700;
  font-size:.9rem;letter-spacing:.01em;color:var(--amber);margin-left:.4rem;vertical-align:baseline}
.creds-cell .l{margin:1rem 0 0;font-size:.88rem;line-height:1.55;color:var(--body-on-dark);max-width:30ch}
@media(max-width:1000px){
  .creds-grid{grid-template-columns:1fr 1fr;gap:2rem 1.6rem}
  .creds-cell:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:620px){
  .creds-grid{grid-template-columns:1fr}
  .creds-cell{padding-left:0;border-left:0;padding-top:1.6rem;border-top:1px solid var(--line)}
  .creds-cell:first-child{padding-top:0;border-top:0}
}

/* -- our process: the spine -- */
/* ================================================================
   OUR PROCESS -- the spine
   Extends .day / .day-item (the existing timeline rail, including
   its .money amber-node modifier) into a three-column step row.
   No new tokens.
   ================================================================ */

/* hero rail: previews the four steps and draws the money line */
.spine-strip{max-width:880px;margin-top:2.2rem}
.ss-row{display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.ss-step{padding:.9rem 1rem;background:rgba(11,31,58,.45);min-width:0}
.ss-step + .ss-step{border-left:1px solid var(--line)}
.ss-step.cut{border-left:2px solid var(--amber)}
.ss-step .w{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal)}
.ss-step.paid .w{color:var(--amber)}
.ss-step .n{display:block;margin-top:.42rem;font-size:.84rem;font-weight:600;
  color:var(--ink-on-dark);line-height:1.3}
.ss-bar{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.ss-bar span{padding:.52rem 1rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase}
.ss-bar .free{color:var(--teal);background:var(--teal-soft)}
.ss-bar .paid{color:var(--amber);background:var(--amber-soft);border-left:2px solid var(--amber)}
@media(max-width:760px){
  .ss-row{grid-template-columns:1fr}
  .ss-step + .ss-step{border-left:0;border-top:1px solid var(--line)}
  .ss-step.cut{border-left:0;border-top:2px solid var(--amber)}
  .ss-bar{grid-template-columns:1fr}
  .ss-bar .paid{border-left:0;border-top:2px solid var(--amber)}
}

/* the spine */
.spine{display:grid}
.spine-step{display:grid;grid-template-columns:136px minmax(0,1fr);
  gap:2.4rem;padding:0 0 3.6rem}
.spine-step:last-child{padding-bottom:0}

.spine-when{position:relative;text-align:right;padding-right:1.9rem;padding-top:.05rem}
.spine-when .tm{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal-deep);line-height:1.5}
.spine-when::after{content:"";position:absolute;right:-7px;top:.2rem;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:2px solid var(--teal-deep)}
.spine-when::before{content:"";position:absolute;right:-1px;top:1.35rem;bottom:-3.6rem;width:1.5px;
  background:linear-gradient(180deg,var(--teal-deep),rgba(13,148,136,.16))}
.spine-step:last-child .spine-when::before{display:none}
.spine-step.cut-below .spine-when::before{display:none}
.spine-step.money .spine-when .tm{color:var(--amber)}
.spine-step.money .spine-when::after{border-color:var(--amber);box-shadow:0 0 10px rgba(245,158,11,.5)}
.spine-step.money .spine-when::before{background:linear-gradient(180deg,var(--amber),rgba(245,158,11,.16))}

.spine-body{max-width:840px}
.spine-body h3{font-size:1.42rem;margin:0 0 .75rem}
.spine-body > p{margin:0;font-size:.95rem;line-height:1.65;color:var(--ink-body);max-width:52ch}
.spine-meta{margin:1.5rem 0 0;border-top:1px solid var(--paper-2)}
.spine-meta div{display:grid;grid-template-columns:154px minmax(0,1fr);gap:1.1rem;
  padding:.8rem 0;border-bottom:1px solid var(--paper-2)}
.spine-meta .k{font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);padding-top:.18rem}
.spine-step.money .spine-meta .k{color:var(--amber)}
.spine-meta .v{font-size:.9rem;line-height:1.55;color:var(--ink-body)}
.spine-exit{margin:1.25rem 0 0;padding-left:1.05rem;border-left:2px solid var(--paper-2);
  font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--ink-muted)}
.spine-exit a{color:var(--teal-deep);text-decoration:none;border-bottom:1px solid currentColor}

/* the money line */
.paywall{position:relative;text-align:center;margin:0 0 3.6rem}
.paywall::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;
  background:var(--amber);opacity:.45}
.paywall .chip{position:relative;display:inline-block;background:var(--paper);
  padding:.48rem 1.1rem;border:1px solid var(--amber);border-radius:999px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber)}
.paywall .sub{margin:.9rem 0 0;font-size:.86rem;color:var(--ink-muted)}


/* -- spine responsive -- */
@media(max-width:1080px){
  .spine-step{grid-template-columns:120px minmax(0,1fr);gap:1.8rem}
}
@media(max-width:720px){
  .spine-step{grid-template-columns:1fr;gap:0;padding-left:1.9rem;padding-bottom:2.9rem}
  .spine-when{text-align:left;padding-right:0;padding-bottom:.55rem}
  .spine-when::after{right:auto;left:-1.9rem;top:.15rem}
  /* at one column the rail must span the whole step, not the short marker box */
  .spine-when::before{display:none}
  .spine-step{position:relative}
  .spine-step::before{content:"";position:absolute;left:6.7px;top:1.5rem;bottom:.3rem;width:1.5px;
    background:linear-gradient(180deg,var(--teal-deep),rgba(13,148,136,.16))}
  .spine-step.money::before{background:linear-gradient(180deg,var(--amber),rgba(245,158,11,.16))}
  .spine-step:last-child::before{display:none}
  .spine-meta div{grid-template-columns:1fr;gap:.32rem}
  .hand{grid-template-columns:1fr;gap:.3rem}
}

/* -- cv rows -- */
.cv{margin:1.15rem 0 0;border-top:1px solid var(--paper-2)}
.cv div{display:grid;grid-template-columns:154px minmax(0,1fr);gap:1.1rem;padding:.72rem 0;
  border-bottom:1px solid var(--paper-2)}
.cv .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-deep);padding-top:.2rem}
.cv .v{font-size:.88rem;line-height:1.55;color:var(--ink-body)}
.cv .v b{color:var(--ink)}
@media(max-width:720px){.cv div{grid-template-columns:1fr;gap:.3rem}}

/* -- lede links -- */
.lede a{color:var(--teal-deep);text-decoration:none;border-bottom:1px solid currentColor}

/* -- six + tr -- */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-2);
  border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.six div{display:flex;gap:.85rem;align-items:baseline;background:#fff;padding:1.15rem 1.3rem}
.six i{flex:none;font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--teal-deep)}
.six span{font-size:.92rem;font-weight:600;line-height:1.35;color:var(--ink)}
@media(max-width:860px){.six{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.six{grid-template-columns:1fr}}

.tr{background:#fff;border:1px solid var(--paper-2);border-radius:var(--radius-lg);
  overflow:hidden;transition:border-color .25s}
.tr + .tr{margin-top:.9rem}
.tr:hover{border-color:rgba(20,184,166,.5)}
.tr > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:center;
  padding:1.35rem 1.6rem;cursor:pointer;list-style:none}
.tr > summary::-webkit-details-marker{display:none}
.tr summary h3{margin:0;font-size:1.12rem}
.tr summary .p{margin:.4rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-muted)}
.tr summary .x{white-space:nowrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--teal-deep)}
.tr summary .x::after{content:"What we run  +"}
.tr[open] summary .x{color:var(--ink-muted)}
.tr[open] summary .x::after{content:"Close  \2212"}
/* the card is full width; the prose inside it must not be */
.tr-body{padding:0 1.6rem 1.6rem;max-width:880px}
.tr summary .p{max-width:70ch}
.tr-body .cv{margin-top:0}
.tr-proof{margin:1.1rem 0 0;padding:.15rem 0 .15rem 1rem;border-left:2px solid var(--amber);
  font-size:.89rem;line-height:1.55;color:var(--ink-body)}
.tr-proof b{color:var(--ink)}
.tr-proof a{color:var(--teal-deep);text-decoration:none;border-bottom:1px solid currentColor}
@media(max-width:620px){
  .tr > summary{grid-template-columns:1fr;gap:.9rem}
  .tr summary .x{justify-self:start}
}

/* -- industry cards, figure, crumb, six order -- */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1.4rem}
/* a grid holding one card should not stretch it across the container */
.ind-grid.single{grid-template-columns:minmax(0,430px)}
.ind-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--paper-2);
  border-radius:var(--radius-lg);overflow:hidden;transition:border-color .25s,transform .2s,box-shadow .25s}
.ind-card:hover{border-color:rgba(20,184,166,.5);transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(11,31,58,.1)}
/* direct child only: the cover art. A logo inside .b must not inherit 16:9 cover. */
.ind-card > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--navy)}
.ind-card .b{padding:1.4rem 1.5rem 1.5rem}
.ind-card h3{margin:0 0 .45rem;font-size:1.1rem}
.ind-card p{margin:0;font-size:.89rem;line-height:1.55;color:var(--ink-muted)}
.ind-card .more{display:block;margin-top:1.15rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-deep)}
.ind-card .more .arr{display:inline-block;transition:transform .18s}
.ind-card:hover .more .arr{transform:translateX(3px)}

.ind-figure{max-width:720px;margin:0 auto;padding:10px;background:#fff;
  border:1px solid var(--paper-2);border-radius:var(--radius-lg)}
.ind-figure img{display:block;width:100%;height:auto;border-radius:10px}
.ind-cv{max-width:880px}

.crumb{font-family:var(--mono)}
.crumb a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(20,184,166,.45)}
.crumb a:hover{color:var(--amber);border-bottom-color:rgba(245,158,11,.5)}

/* the shared six band, marked up for one trade's order */
.six div.first{background:var(--amber-soft)}
.six div.first i{color:var(--amber)}
.six div.first span{color:var(--ink)}
.six .ord{margin-left:auto;padding-left:.7rem;font-family:var(--mono);font-size:.54rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--amber);white-space:nowrap}
.six div.next .ord{color:var(--teal-deep)}
.six div.next{background:var(--teal-soft)}

/* -- case study + release notes -- */
/* a card whose cover is a client mark: no panel colour, so the card's own white
   shows through and the transparent PNG sits straight on it. Uses the light
   variant, because the stock lockup sets "of Richmond" in white. */
.ind-card .cover-logo{display:grid;place-items:center;aspect-ratio:16/9;
  background:transparent;padding:1.4rem}
.ind-card .cover-logo img{width:auto;height:100%;max-height:150px;max-width:84%;
  object-fit:contain}

.case-shot{margin:0;padding:10px;background:#fff;border:1px solid var(--paper-2);
  border-radius:var(--radius-lg);box-shadow:0 14px 44px rgba(11,31,58,.1)}
.case-shot img{display:block;width:100%;height:auto;border-radius:10px}
.case-shot figcaption{padding:1rem .4rem .2rem;font-size:.86rem;line-height:1.55;
  color:var(--ink-muted)}
.case-shot.narrow{max-width:390px}
.case-perm{margin:.9rem 0 0;padding:.15rem 0 .15rem .95rem;border-left:2px solid var(--amber);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:1.7;
  color:var(--ink-muted)}
.case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;background:var(--paper-2);border:1px solid var(--paper-2);
  border-radius:var(--radius-lg);overflow:hidden;margin-top:2.4rem}
.case-meta div{background:#fff;padding:1.2rem 1.3rem}
.case-meta .k{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:.4rem}
.case-meta .v{font-size:.9rem;line-height:1.45;color:var(--ink)}

/* release notes */
.rel{border:1px solid var(--paper-2);border-radius:var(--radius-lg);background:#fff;
  overflow:hidden}
.rel-item{display:grid;grid-template-columns:168px minmax(0,1fr);gap:1.6rem;padding:1.5rem 1.6rem}
.rel-item + .rel-item{border-top:1px solid var(--paper-2)}
.rel-v{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ink)}
.rel-d{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--ink-muted);font-weight:400}
.rel-item h3{margin:0 0 .5rem;font-size:1.05rem}
.rel-item p{margin:0;font-size:.89rem;line-height:1.6;color:var(--ink-body)}
.rel-tag{display:inline-block;margin-bottom:.7rem;padding:.2rem .55rem;border-radius:5px;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--teal-deep);background:var(--teal-soft)}
@media(max-width:720px){.rel-item{grid-template-columns:1fr;gap:.7rem}}

/* -- the four numbers, defined -- */
.numdef{border-top:1px solid var(--line)}
.nd{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,340px);gap:2.2rem;
  align-items:start;padding:2rem 0;border-bottom:1px solid var(--line);position:relative}
.nd-n{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:2.5rem;
  line-height:.9;letter-spacing:-.03em;color:var(--teal);opacity:.9}
.nd h3{font-size:1.24rem;margin:0 0 .55rem;color:var(--ink-on-dark)}
.nd p{margin:0;font-size:.93rem;line-height:1.6;color:var(--body-on-dark);max-width:52ch}
.nd-w{padding-left:1.1rem;border-left:1px solid var(--line)}
.nd-w .k{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.4rem}
.nd-w .v{font-size:.86rem;line-height:1.55;color:var(--muted)}
.nd:hover .nd-n{color:var(--amber)}

/* how the four combine -- the relationship, as arithmetic instead of a paragraph */
.nd-calc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:2.6rem}
.nd-calc > div{background:var(--void);padding:1.5rem 1.6rem}
.nd-calc .e{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  color:var(--teal)}
.nd-calc .r{display:block;margin-top:.5rem;font-size:.95rem;font-weight:700;
  color:var(--ink-on-dark)}
.nd-foot{margin:1.6rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--faint)}
@media(max-width:900px){
  .nd{grid-template-columns:56px minmax(0,1fr);gap:1.2rem 1.4rem}
  .nd-n{font-size:1.9rem}
  .nd-w{grid-column:2;padding-left:0;border-left:0;border-top:1px solid var(--line);
    padding-top:.9rem;margin-top:.2rem}
  .nd-calc{grid-template-columns:1fr}
}

/* -- six pieces of work (tracks) -- */
.wf{border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--paper-2);display:grid;gap:1px}
.wf-row{background:#fff;padding:2rem 2.1rem 2.2rem;position:relative}
.wf-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:1.4rem;align-items:baseline}
.wf-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;font-weight:700;
  color:var(--teal-deep);padding-top:.35rem}
.wf-row h3{margin:0 0 .35rem;font-size:1.14rem}
.wf-pain{margin:0;font-size:.89rem;line-height:1.55;color:var(--ink-muted);max-width:70ch}

/* the track */
.wf-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin:1.7rem 0 0 calc(44px + 1.4rem);padding-top:.2rem}
.wf-step{position:relative;padding:1.45rem .9rem 0 0}
.wf-step::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;
  border-radius:50%;background:#fff;border:2px solid var(--teal-deep);z-index:1}
.wf-step::after{content:"";position:absolute;left:13px;right:0;top:6.5px;height:1.5px;
  background:linear-gradient(90deg,var(--paper-2),var(--paper-2))}
.wf-step:last-child{padding-right:0}
.wf-step:last-child::after{display:none}
.wf-step:last-child::before{border-color:var(--amber);background:var(--amber);
  box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.wf-step .l{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.45;color:var(--ink-body)}
.wf-step:last-child .l{color:var(--ink);font-weight:700}

@media(max-width:900px){
  .wf-row{padding:1.7rem 1.4rem 1.9rem}
  .wf-track{grid-auto-flow:row;grid-auto-columns:auto;gap:0;margin-left:0;padding-left:1.6rem;
    position:relative}
  .wf-step{padding:0 0 1.05rem 0}
  .wf-step:last-child{padding-bottom:0}
  .wf-step::before{left:-1.6rem;top:2px}
  .wf-step::after{left:calc(-1.6rem + 5px);right:auto;top:13px;bottom:-2px;width:1.5px;height:auto}
  .wf-step:last-child::after{display:none}
  .wf-head{grid-template-columns:32px minmax(0,1fr);gap:.9rem}
}

/* -- partners: fork, four conversations, nots -- */
.forkband{position:relative;background:var(--void);padding:0 0 7rem;overflow:hidden}
/* the hero's blueprint grid stopped dead at the section edge; carry it through
   and let it run out, so the seam becomes intentional */
.forkband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(20,184,166,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,166,.032) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 46%);
  mask-image:linear-gradient(180deg,#000,transparent 46%)}
.forkband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 0%,rgba(20,184,166,.1),transparent 72%)}
.forkband .container{position:relative;z-index:1}

.fork-head{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.fork-node{width:13px;height:13px;border-radius:50%;background:var(--void);
  border:2px solid var(--teal);box-shadow:0 0 0 6px rgba(20,184,166,.1)}
.fork-cap{font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--teal)}

.fork-branch{display:block;width:100%;height:140px;margin-top:1.2rem}
.fork-branch path{fill:none;stroke:var(--line-strong);stroke-width:1.5;
  vector-effect:non-scaling-stroke}
.fork-branch .lit{stroke:var(--teal);stroke-opacity:.55;stroke-dasharray:80 1000;
  animation:fork-run 5.5s linear infinite}
@keyframes fork-run{from{stroke-dashoffset:1080}to{stroke-dashoffset:0}}

.fork{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:-1px}
.fork > article{display:flex;flex-direction:column;padding:2.9rem 2.5rem 2.6rem;
  background:linear-gradient(180deg,var(--navy) 0%,#071527 100%);
  border-top:1.5px solid rgba(20,184,166,.45)}
.fork > article:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  border-left:1px solid var(--line)}
.fork > article:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  border-right:1px solid var(--line)}
.fork-k{display:block;margin-bottom:1.5rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--teal)}
section.sec .fork h3,section.sec.light .fork h3,.forkband .fork h3{
  margin:0 0 .9rem;font-size:clamp(1.4rem,2.1vw,1.75rem);color:#fff;line-height:1.05}
.fork > article > p{margin:0 0 2rem;min-height:6.4em;font-size:.94rem;line-height:1.6;
  color:var(--body-on-dark);max-width:44ch}
.fork dl{margin:0;border-top:1px solid var(--line)}
/* teal, matching every other label/value pair on the site (.cv .k, .spine-meta .k).
   --faint was both the outlier and ~3.3:1 on this panel, under AA at this size.
   Kept a step below .fork-k in size and weight so the role label still leads. */
.fork dt{padding-top:1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal)}
.fork dd{margin:.35rem 0 0;padding-bottom:1rem;border-bottom:1px solid var(--line);
  font-size:.9rem;line-height:1.55;color:var(--ink-on-dark)}
.fork .go{margin-top:auto;padding-top:2rem;font-family:var(--mono);font-size:.73rem;
  letter-spacing:.1em;font-weight:600;color:var(--amber);text-decoration:none}
.fork .go .arr{display:inline-block;transition:transform .18s}
.fork .go:hover .arr{transform:translateX(4px)}
.fork .go:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

@media(max-width:860px){
  .fork-branch{display:none}
  .fork{grid-template-columns:1fr;gap:1.4rem;margin-top:2.2rem}
  .fork > article{border-radius:var(--radius-lg);border:1px solid var(--line);
    border-top:1.5px solid rgba(20,184,166,.45);padding:2.2rem 1.7rem 2rem}
  .fork > article > p{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .fork-branch .lit{animation:none;stroke-dasharray:none}
  html.js .q4.in .mk{animation:none}
}

/* four conversations: one rail, because the process does not fork */
.how4 .wf-track{margin-left:0;margin-top:0}
.how4 .wf-step{padding-right:1.4rem}
.how4 .wf-step .l{font-size:.6rem;color:var(--ink)}
.how4 .wf-step p{margin:.55rem 0 0;font-size:.86rem;line-height:1.55;color:var(--ink-muted)}
.how4-note{margin:2.4rem 0 0;padding-left:1.05rem;border-left:2px solid var(--paper-2);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;line-height:1.7;
  color:var(--ink-muted)}
@media(max-width:900px){.how4 .wf-step{padding-right:0}}

/* what this is not */
.nots{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-2);
  border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.nots > div{background:#fff;padding:1.9rem 1.6rem}
.nots .n{display:block;margin-bottom:.75rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.nots p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-muted)}
@media(max-width:940px){.nots{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.nots{grid-template-columns:1fr}}

/* -- about: the negations -- */
/* the negations: typographic rows, not cards -- Partners already uses cells */
.nope{border-top:1px solid var(--paper-2)}
.nope > div{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.6rem;
  padding:1.5rem 0;border-bottom:1px solid var(--paper-2);align-items:baseline}
.nope h3{margin:0;font-size:1.22rem;color:var(--ink)}
.nope p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-muted)}
@media(max-width:760px){.nope > div{grid-template-columns:1fr;gap:.5rem}}

/* -- home: the four numbers as questions -- */
.q4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-2);
  border:1px solid var(--paper-2);border-radius:var(--radius-lg);overflow:hidden}
.q4 > div{display:flex;flex-direction:column;background:#fff;padding:2.5rem 2.3rem 2.6rem}
/* the unfilled answer slot: a form blank, not an ornament. It squares off the
   ragged bottom of each cell and states the premise -- you cannot fill these in. */
.q4 .slot{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:2.1rem}
.q4 .slot i{flex:none;width:2px;height:15px;background:var(--teal);opacity:.85}
.q4 .slot .line{flex:1;height:0;border-bottom:1px dashed rgba(11,31,58,.26)}
.q4 .slot .u{flex:none;font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted)}
.q4 .n{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
.q4 .n-t{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;font-weight:700;
  color:var(--ink-muted)}
/* Each mark says what its number is, and the set is paired: 01 and 03 share a
   tray with the arrow reversed (enquiries arriving vs money leaving), 02 and 04
   share a circle (closed, and what is left of it). Two-tone in the house style;
   01/02 are counts so the accent is teal, 03/04 are money so it is amber. */
.q4 .mk{display:block;flex:none;overflow:visible}
/* Resting state is the FULL bar and the rise is a keyframe played on reveal.
   A transition whose resting state is scaleY(0) hides the mark outright if it
   never runs -- the same class of failure the html.js reveal gate exists to
   avoid. Same pattern as the Monday page's mp-rise. */
html.js .q4.in .mk{animation:q4-pop .5s cubic-bezier(.2,.7,.3,1) backwards}
html.js .q4.in > div:nth-child(2) .mk{animation-delay:.06s}
html.js .q4.in > div:nth-child(3) .mk{animation-delay:.12s}
html.js .q4.in > div:nth-child(4) .mk{animation-delay:.18s}
@keyframes q4-pop{from{opacity:0;transform:translateY(5px)}}
.q4 h3{margin:0 0 .85rem;font-size:clamp(1.24rem,1.9vw,1.5rem);line-height:1.12;
  max-width:22ch}
.q4 p{margin:0;font-size:.91rem;line-height:1.6;color:var(--ink-muted);max-width:44ch}
.q4-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2.4rem;
  align-items:end;margin:2.4rem 0 0}
.q4-foot p{margin:0;font-size:1rem;line-height:1.65;color:var(--ink-body);max-width:66ch}
.q4-foot b{color:var(--ink);font-weight:700}
.q4-foot a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--teal-deep);text-decoration:none;white-space:nowrap}
.q4-foot a .arr{display:inline-block;transition:transform .18s}
.q4-foot a:hover .arr{transform:translateX(3px)}
@media(max-width:820px){
  .q4-foot{grid-template-columns:1fr;align-items:start;gap:1.2rem}
  .q4{grid-template-columns:1fr}
  .q4 > div{padding:2rem 1.6rem 2.1rem}
}

/* -- blog: the pair -- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.pair-half{display:flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;color:inherit;
  padding:2.6rem 2.8rem 2.8rem;transition:background .2s}
.pair-half + .pair-half{border-left:1px solid var(--line-strong)}
.pair-half:hover,.pair-half:focus-visible{background:#fff}
.pair-half:focus-visible{outline:2px solid var(--teal-deep);outline-offset:-2px}
.pr-fig{display:block;margin-bottom:1.6rem}
.pr-claim{margin:0 0 1.9rem;font-family:var(--display);font-weight:700;
  font-size:clamp(1.34rem,2.1vw,1.72rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--ink);max-width:20ch}
.pr-claim b{font-weight:700}
.pr-claim .d{color:var(--teal-deep)}
.pr-claim .j{color:var(--ink)}
.pr-when{display:block;align-self:stretch;padding-top:1.5rem;border-top:1px solid var(--paper-2);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-deep)}
.pair-half h3{margin:.75rem 0 .7rem;font-size:1.02rem;line-height:1.35;
  color:var(--ink);max-width:34ch}
.pair-half:hover h3,.pair-half:focus-visible h3{color:var(--teal-deep)}
.pr-by{display:block;font-size:.86rem;color:var(--ink-muted)}
.pr-go{display:block;margin-top:auto;padding-top:1.3rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-deep)}
.pr-go .arr{display:inline-block;transition:transform .18s}
.pair-half:hover .pr-go .arr,.pair-half:focus-visible .pr-go .arr{transform:translateX(3px)}
@media(max-width:820px){
  .pair{grid-template-columns:1fr}
  .pair-half{padding:2.2rem 0 2.4rem}
  .pair-half + .pair-half{border-left:0;border-top:1px solid var(--line-strong)}
}

/* -- about: the roster -- */
.ros-top{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:3.2rem;
  align-items:end;margin-bottom:3.4rem}
.ros-head .eyebrow{margin-bottom:1rem}
.ros-head h2{margin:0 0 1.1rem}
.ros-head .lede{margin:0;max-width:54ch}
.ros-shot{margin:0}
.ros-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--paper-2)}
.ros-shot figcaption{margin-top:.8rem;font-size:.82rem;line-height:1.55;color:var(--ink-muted)}

/* Two cells per row, not five. The left cell is the whole person -- portrait,
   name, where, and why you would call him; the right cell is what he has done.
   Two ideas per row instead of four, which is what the earlier three-track
   version got wrong: it aligned beautifully and read as a wall of small text. */
.ros{border-top:0}
.ros-hd,.ros > article{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:3.4rem}
.ros-hd{padding:0 0 .9rem;border-bottom:1px solid var(--line-strong)}
.ros-hd span{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted)}
.ros > article{padding:2.2rem 0 2.4rem;border-bottom:1px solid var(--paper-2)}
.ros > article:last-child{border-bottom:1px solid var(--line-strong)}
.ros-who{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1.35rem;align-items:start}
.ros-por{width:64px;height:64px;border-radius:10px;object-fit:cover;
  filter:grayscale(1);transition:filter .3s}
.ros > article:hover .ros-por,.ros > article:focus-within .ros-por{filter:grayscale(0)}
.ros h3{margin:0 0 .35rem;font-size:1.16rem;line-height:1.2}
.ros .loc{margin:0 0 1rem;font-family:var(--mono);font-size:.57rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);line-height:1.6}
.ros .say{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink);max-width:50ch}
.ros-rec > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.3rem;
  align-items:baseline}
.ros-rec > div + div{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--paper-2)}
.ros-rec .fig{display:block;font-family:var(--display);font-weight:900;font-stretch:125%;
  font-size:1.38rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ros-rec .fig .u{display:block;margin:.2rem 0 0;font-family:var(--body);font-stretch:100%;font-weight:700;
  font-size:.75rem;letter-spacing:.01em;color:var(--ink-muted)}
.ros-rec .fig.words{font-size:1.02rem;line-height:1.3;letter-spacing:0}
.ros-rec p{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-muted)}

@media(max-width:1080px){
  .ros-hd,.ros > article{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:2.4rem}
  .ros-rec > div{grid-template-columns:128px minmax(0,1fr);gap:1.1rem}
}
@media(max-width:900px){
  .ros-top{grid-template-columns:1fr;gap:2rem;align-items:start}
  .ros-shot{max-width:420px}
  .ros-hd{display:none}
  .ros > article{grid-template-columns:1fr;gap:1.5rem}
  .ros-rec{padding-top:1.4rem;border-top:1px solid var(--paper-2)}
}
@media(max-width:560px){
  .ros-rec > div{grid-template-columns:1fr;gap:.45rem}
  .ros-who{grid-template-columns:52px minmax(0,1fr);gap:1rem}
  .ros-por{width:52px;height:52px}
}

/* -- about: where we stand -- */
.stand{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)}
.stand > div{padding:2.3rem 2.4rem 0}
.stand > div:first-child{padding-left:0}
.stand > div:last-child{padding-right:0}
.stand > div + div{border-left:1px solid var(--line)}
.stand .k{display:block;margin-bottom:1rem;font-family:var(--mono);font-size:.59rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
/* two-line min so all three bodies start on the same baseline */
.stand h3{margin:0 0 .8rem;font-size:1.2rem;line-height:1.25;min-height:2.5em;color:var(--ink-on-dark)}
.stand p{margin:0;font-size:.9rem;line-height:1.65;color:var(--body-on-dark)}
.stand p + p{margin-top:.85rem}
.stand a{color:var(--teal);text-decoration:none;border-bottom:1px solid currentColor}
@media(max-width:900px){
  .stand{grid-template-columns:1fr}
  .stand h3{min-height:0}
  .stand > div{padding:1.9rem 0 0}
  .stand > div + div{border-left:0;border-top:1px solid var(--line);padding-top:1.9rem}
}

/* ============================================================
   COMPAT — the vocabulary the older pages still use (Atlas HQ, the
   app one-pagers, the four numbers, what we promise, legal, the
   thank-you pages, 404). The same rules those pages were written
   against, on the new tokens. Those pages stay dark end to end.
   ============================================================ */
:root{
  --bg:var(--void);--surface:var(--navy);--surface-2:var(--navy-2);
  --heading:var(--ink-on-dark);--text:var(--body-on-dark);--muted-25:rgba(255,255,255,.3);
  --accent:var(--amber);--accent-hover:var(--amber-hot);--accent-ring:rgba(245,158,11,.24);
  --font:var(--body);
  --text-xs:12px;--lh-xs:16px;--text-sm:14px;--lh-sm:20px;--text-base:16px;--lh-base:24px;
  --text-lg:18px;--lh-lg:28px;--text-xl:20px;--lh-xl:28px;--text-3xl:30px;--lh-3xl:36px;
  --text-4xl:36px;--lh-4xl:40px;--text-5xl:48px;--text-6xl:60px;
  --space-50:4px;--space-75:8px;--space-100:12px;--space-200:16px;--space-300:24px;--space-400:32px;
  --space-500:40px;--space-600:48px;--space-700:64px;--space-800:80px;--space-900:96px;
  --radius-2xl:16px;--radius-full:9999px;
  --measure-hero:680px;--measure-prose:820px;--measure-page:1200px;
  --dur-press:240ms;--dur-pop:200ms;--dur-ui:700ms;--dur-reveal:800ms;--tap:44px;
  --card:var(--surface);--border:var(--line);--amber-ink:var(--amber);--bg-alt:var(--surface);--redact:#33445E;
}
.wrap{max-width:var(--measure-page);margin:0 auto}
.section{position:relative;padding:var(--space-900) var(--space-400);background:var(--void)}
.section.alt,.section.dark{background:var(--navy);border-top:1px solid var(--line)}
.section.tight{padding:var(--space-600) var(--space-400)}
.section-title{max-width:var(--measure-hero);margin:0 0 var(--space-600)}
.section-title p{margin:var(--space-200) 0 0;font-size:var(--text-lg);line-height:var(--lh-lg);color:var(--text)}
.section-title .eyebrow{margin:0 0 var(--space-100)}
.section-title h2{margin-bottom:0}
.section-title.left{margin-left:0}
.muted{color:var(--text)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-200);margin-top:var(--space-400)}
.ctas .risk{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--muted);margin:0}
.btn-secondary{background:transparent;color:var(--ink-on-dark);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.btn-primary{background:var(--amber);color:#1a1206}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .ctas{margin-top:var(--space-400)}
.page-hero .risk{margin:0}

/* cards + grids */
.grid{display:grid;gap:var(--space-300)}
.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--navy);padding:var(--space-300)}
.alt .card,.dark .card{background:var(--navy-2)}
.card h3{margin-top:0;margin-bottom:.5rem}
.card .icon{display:block;width:24px;height:24px;color:var(--amber);margin-bottom:var(--space-200)}
.card .icon svg{width:24px;height:24px;display:block}
.card p{color:var(--text);margin:0}
.card p+p{margin-top:.8em}
.card .read{margin-top:8px}
.card .num{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:var(--text-3xl);line-height:var(--lh-3xl);color:var(--heading)}
a.card{text-decoration:none;display:block;transition:border-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease)}
a.card:hover{border-color:var(--teal);transform:translateY(-2px)}
a.card .more{display:block;margin-top:var(--space-200);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.idx,.kicker{display:block;font-family:var(--mono);font-size:.62rem;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--space-200)}
.kicker{color:var(--muted)}
.crumb{display:block;font-family:var(--mono);font-size:.62rem;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-200)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--heading)}

/* numbered steps */
.process{list-style:none;margin:var(--space-600) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-300)}
.process li{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--navy-2);padding:var(--space-300)}
.section:not(.alt) .process li{background:var(--navy)}
.process li::before{content:"Step " attr(data-n);display:block;font-family:var(--mono);font-size:.62rem;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--space-200)}
.process li[data-when]::before{content:"Step " attr(data-n) ", " attr(data-when)}
.process h3{margin:0}
.process p{margin:8px 0 0;color:var(--text)}
.process p+p{margin-top:.7em}
.process .when{display:none}
.process.one{grid-template-columns:1fr;max-width:var(--measure-prose)}

/* checklist + two columns */
.check{list-style:none;padding:0;margin:var(--space-200) 0 0;display:grid;gap:var(--space-100)}
.check li{position:relative;padding-left:28px;color:var(--text)}
.check li::before{content:"✓";position:absolute;left:0;top:2px;width:18px;height:18px;border:1px solid var(--line-strong);border-radius:4px;font-size:12px;font-weight:700;color:var(--teal);display:grid;place-items:center;line-height:1}
.two{display:grid;gap:var(--space-600)}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
.two h2{margin-bottom:var(--space-200)}
.two .span{grid-column:1/-1}

/* the promises list */
.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-200)}
.steps-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;color:var(--heading)}
.steps-list .tick{width:24px;height:24px;border-radius:var(--radius-full);background:var(--amber);color:#1a1206;display:grid;place-items:center;font-family:var(--mono);font-size:.7rem;font-weight:700}
.steps-list small{display:block;color:var(--text);font-size:var(--text-sm);line-height:var(--lh-sm)}
.steps-list.promises{max-width:var(--measure-prose);gap:var(--space-300)}
.steps-list.promises li{font-size:var(--text-lg);line-height:var(--lh-lg);font-weight:600}
.steps-list.promises small{margin-top:4px;font-weight:400}

/* product screens */
.phone{width:min(300px,100%);margin:0 auto;border:1px solid var(--line);border-radius:36px;background:var(--navy);padding:10px}
.phone img{border-radius:28px;width:100%}
.shot{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--navy);padding:8px}
.shot img{border-radius:10px;width:100%}
.shot figcaption,.phone figcaption{color:var(--text);font-size:var(--text-sm);line-height:var(--lh-sm);padding:12px 8px 4px}
.mlist-shot img{border-radius:var(--radius-lg);border:1px solid var(--line)}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-200);margin-top:var(--space-300)}
.stores a{display:inline-block;line-height:0;border-radius:8px}
.stores img{height:50px;width:auto}

/* prose (legal) */
.prose{max-width:var(--measure-prose)}
.prose>*:first-child{margin-top:0}
.prose h2{margin-top:1.6em;font-size:clamp(1.5rem,2.6vw,1.9rem)}
.prose h3{margin-top:1.2em}
.prose p,.prose li{margin-top:.8em;color:var(--text)}
.prose ul,.prose ol{padding-left:1.3em}
.prose a{color:var(--heading);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:1.2em 0;padding-left:var(--space-200);border-left:2px solid var(--amber);color:var(--heading)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--navy);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--heading)}
.prose img{border-radius:var(--radius);border:1px solid var(--line)}
.prose .btn{margin-top:var(--space-300)}

/* bands */
.band{text-align:center}
.band .wrap{max-width:var(--measure-hero)}
.band .lede{margin-left:auto;margin-right:auto;margin-top:var(--space-200)}
.band .ctas{justify-content:center}
.close{display:grid;gap:var(--space-400)}
.close-head{max-width:var(--measure-hero)}
.close .ctas{margin-top:var(--space-300)}

/* forms (Netlify) */
.form{display:grid;gap:var(--space-200);max-width:var(--measure-hero)}
.form.wide{max-width:none;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--navy);padding:var(--space-300)}
.alt .form.wide{background:var(--navy-2)}
.form .row{display:grid;gap:var(--space-200);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(min-width:900px){.form.wide .row{grid-template-columns:repeat(4,1fr)}.form.wide .row.last>.field:last-child{grid-column:2/-1}}
.form.wide .field{grid-template-rows:1fr auto}
.form.wide .field .lab{align-self:start}
.form.wide .field textarea{min-height:var(--tap);height:50px;resize:vertical}
.form .h h3{margin:0}
.form .formnote{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text);max-width:78ch;margin:0}
.form .hide{display:none}
.field{display:grid;gap:8px;align-content:start}
.field label{display:block;font-size:var(--text-sm);line-height:var(--lh-sm);font-weight:600;color:var(--heading)}
.field .lab small{display:block;font-weight:400;color:var(--text);font-size:var(--text-xs);line-height:var(--lh-xs);margin-top:2px}
.field input,.field select,.field textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--void);color:var(--heading);font:inherit;font-size:var(--text-base);line-height:var(--lh-base);min-height:var(--tap);transition:border-color var(--dur-press) var(--ease),box-shadow var(--dur-press) var(--ease)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238FA3BF'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--accent-ring)}
.field [aria-invalid="true"]{border-color:var(--amber);box-shadow:0 0 0 3px var(--accent-ring)}
.field .err{font-size:var(--text-sm);line-height:var(--lh-sm);font-weight:600;color:var(--amber);margin:0}
.dk{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text)}
.dk input{width:16px;height:16px;margin-top:2px;accent-color:var(--amber)}
.form .send{justify-self:start}
.join{display:flex;flex-wrap:wrap;gap:var(--space-200);align-items:end;max-width:var(--measure-hero)}
.join .field{flex:1 1 260px}
/* the book form on the home terminal sits centred, on the void */
.final .form{margin:0 auto 2rem;text-align:left}
.final .form .send{justify-self:center}
.final .formnote{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--muted);margin:1.2rem 0 0}
.final .formnote a{color:var(--ink-on-dark);text-decoration:underline;text-underline-offset:3px}

/* flow rows: copy beside a figure, sides swap on .swap (how it works, the case study) */
.flow{display:grid;gap:var(--space-400);align-items:center;padding:var(--space-600) 0;border-top:1px solid var(--line)}
.flow:first-of-type{border-top:0;padding-top:0}
.flow:last-of-type{padding-bottom:0}
.flow h3{font-size:clamp(22px,3vw,var(--text-3xl));line-height:1.15;font-weight:700}
.flow-copy p{margin-top:var(--space-200)}
.flow ul{list-style:none;padding:0;margin:var(--space-300) 0 0;display:grid;gap:8px}
.flow li{position:relative;padding-left:20px;color:var(--text)}
.flow li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;background:var(--amber);border-radius:2px}
.flow-visual{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--navy);padding:var(--space-300);display:flex;align-items:center;justify-content:center;min-height:300px}
@media(min-width:900px){.flow{grid-template-columns:1fr 1fr;gap:var(--space-700)}.flow.swap .flow-copy{order:2}}
.section.light .flow{border-top-color:var(--paper-2)}

/* stamps + 404 */
.stamp{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);padding:3px 8px;border-radius:4px;font-weight:700}
.stamp.improved{color:var(--heading);border-color:var(--text)}
.stamp.fixed,.stamp.soon{color:var(--text);border-color:var(--line-strong)}
.notfound{min-height:70svh;display:flex;align-items:center}
.notfound .wrap{width:100%}

/* ============================================================
   LAST — reduced motion + responsive. Nothing whose visibility
   depends on an animation end-state may stay hidden here.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;filter:none}
  html.js .hero-copy>*,html.js .hero .os,html.js .page-hero .container>*{opacity:1;transform:none}
  html.js .stage-step:not(.on){opacity:1}
  .boot{display:none}
  .wipe{display:none}
  .prompt .caret{opacity:1}
}
@media(max-width:1100px){.hero h1{font-size:clamp(2rem,5.6vw,3rem)}}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .hero .os{margin-inline:auto;max-width:520px}
  .final{padding:6rem 0}
}
@media(max-width:640px){
  .container{padding:0 20px}
  .hero{padding-bottom:3rem}
  .page-hero{padding-bottom:3.2rem}
  .post-header{padding-bottom:2.6rem}
  .os-monday{max-width:none}
}

/* Our Process: the row labels and the timeline stamps were too thin to read at .61rem */
.spine-meta .k,.nd-w .k,.spine-when .tm,.ss-step .w{font-weight:700;font-size:.68rem;letter-spacing:.12em}

/* Our Process: the six rows are title + pain only now, so the row can sit tighter */
.wf-row{padding:1.6rem 2.1rem 1.7rem}
@media(max-width:900px){.wf-row{padding:1.4rem 1.4rem 1.5rem}}