/* StepFive website — HTML5 / CSS3, tokens from the StepFive design system.
   Layout: 1200px column, 12-col grid, sections separated by hairline rules and colour bands
   (paper → ledger band → paper). Brass appears once per section. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --ledger-900:#0F2E25; --ledger-700:#1E5240; --ledger-500:#2F7A5E; --ledger-300:#7FC4A4; --ledger-100:#DCEBE3;
  --brass-500:#C98A1E; --brass-700:#8A5A0B; --brass-100:#F4E6C8;
  --paper-50:#F7F4EC; --paper-200:#EFEADD; --paper-300:#D6CFBD;
  --ink-900:#14201B; --ink-600:#55615B; --night-900:#0E1714;
  --vermillion-600:#A8321C; --harbor-600:#2B5785;
  /* semantic (Paper theme) */
  --surface:var(--paper-50); --surface-raised:#FFFFFF; --surface-sunken:var(--paper-200);
  --ink:var(--ink-900); --ink-muted:var(--ink-600);
  --brand:var(--ledger-700); --brand-hover:var(--ledger-900); --on-brand:var(--paper-50);
  --accent:var(--brass-500); --on-accent:var(--ink-900); --accent-ink:var(--brass-700);
  --positive:#2A6E54; --positive-soft:var(--ledger-100);
  --rule:var(--paper-300); --border-control:#7A847E; --focus-ring:var(--brass-700);
  /* the ledger band stays dark in both themes */
  --band:var(--ledger-900); --band-ink:var(--paper-50); --band-muted:#B9C7BF; --band-rule:#2A4A3E; --band-kicker:var(--ledger-300);
  --shadow-raised:0 1px 2px rgba(20,32,27,.06),0 0 0 1px rgba(20,32,27,.08);
  --shadow-overlay:0 8px 24px rgba(20,32,27,.14);
  /* type */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Schibsted Grotesk","Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  /* space, radius */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-20:80px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:12px;
  /* motion */
  --ease-ledger:cubic-bezier(.2,.7,.2,1); --dur-fast:160ms; --dur-base:320ms; --dur-slow:640ms;
  --max:1200px; --gutter:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:var(--night-900); --surface-raised:#16221D; --surface-sunken:#0A110F;
  --ink:#EDE8DC; --ink-muted:#A9B3AC; --brand:var(--ledger-300); --brand-hover:#9AD3B8; --on-brand:var(--night-900);
  --accent:#D9A03A; --accent-ink:#E3B062; --positive:var(--ledger-300); --positive-soft:#16352A;
  --rule:#2B3A33; --border-control:#6B7771; --focus-ring:#E3B062; --band:#0B231C; --band-rule:#22413A;
  --shadow-raised:0 0 0 1px rgba(237,232,220,.08); color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:var(--night-900); --surface-raised:#16221D; --surface-sunken:#0A110F;
  --ink:#EDE8DC; --ink-muted:#A9B3AC; --brand:var(--ledger-300); --brand-hover:#9AD3B8; --on-brand:var(--night-900);
  --accent:#D9A03A; --accent-ink:#E3B062; --positive:var(--ledger-300); --positive-soft:#16352A;
  --rule:#2B3A33; --border-control:#6B7771; --focus-ring:#E3B062; --band:#0B231C; --band-rule:#22413A;
  --shadow-raised:0 0 0 1px rgba(237,232,220,.08); color-scheme:dark}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface-raised);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--ink-muted);max-width:62ch}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font:500 15px/20px var(--font-sans);padding:12px 20px;border-radius:var(--radius-md);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-ledger),transform var(--dur-fast) var(--ease-ledger)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:var(--on-brand)}
.btn--primary:hover{background:var(--brand-hover);color:var(--on-brand)}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--border-control)}
.btn--secondary:hover{background:var(--surface-sunken);color:var(--ink)}
.btn--accent{background:var(--brass-500);color:var(--ink-900)}
.btn--accent:hover{background:#B67C18;color:var(--ink-900)}
.btn--on-band{background:transparent;color:var(--band-ink);border-color:rgba(247,244,236,.45)}
.btn--on-band:hover{background:rgba(247,244,236,.08);color:var(--band-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.textlink{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;gap:var(--space-6);height:64px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:30px;width:auto}
.brand .logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}
.nav{display:flex;gap:var(--space-6);margin-left:var(--space-6)}
.nav a{font:500 14px/20px var(--font-sans);color:var(--ink-muted);text-decoration:none;padding-block:22px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.header-cta{margin-left:auto;display:flex;gap:var(--space-3)}
.header-cta .btn{padding:8px 14px;font-size:14px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--border-control);border-radius:var(--radius-md);color:var(--ink);padding:8px 12px;font:500 14px var(--font-sans)}
@media (max-width:900px){
  .js .nav,.js .header-cta{display:none}
  .js .menu-btn{display:inline-flex}
  :root:not(.js) .site-header .wrap{height:auto;flex-wrap:wrap;padding-block:12px}
  :root:not(.js) .nav{width:100%;margin:0;flex-wrap:wrap;gap:var(--space-4)}
  :root:not(.js) .nav a{padding-block:8px}
  :root:not(.js) .header-cta{width:100%;margin:0;flex-wrap:wrap}
  .site-header.open .wrap{flex-wrap:wrap;height:auto;padding-block:12px}
  .site-header.open .nav{display:flex;flex-direction:column;gap:0;width:100%;margin:0;order:3}
  .site-header.open .nav a{padding-block:12px;border-bottom:1px solid var(--rule)}
  .site-header.open .header-cta{display:flex;width:100%;order:4;margin:12px 0 0}
}
[hidden]{display:none!important}

/* ---------- Sections ---------- */
.section{padding-block:clamp(56px,8vw,var(--space-20))}
.section + .section{border-top:1px solid var(--rule)}
.section--sunken{background:var(--surface-sunken)}
.section--band{background:var(--band);color:var(--band-ink);border-top:none!important}
.section--band + .section{border-top:none}
.section--band .eyebrow{color:var(--band-kicker)}
.section--band .lead{color:var(--band-muted)}
.section-head{display:grid;gap:var(--space-4);max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.section-head h2{font-size:clamp(32px,4.2vw,48px);line-height:1.08}
.proof{font:500 15px/1.5 var(--font-sans);color:var(--ink);margin-top:var(--space-6);max-width:70ch}
.proof .num{font-size:.95em}

/* ---------- Hero ---------- */
.hero{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center;padding-block:clamp(56px,9vw,104px)}
.hero h1{font-size:clamp(56px,8vw,104px);line-height:.92;letter-spacing:-.025em}
.hero .tagline{font:500 clamp(26px,3vw,36px)/1.15 var(--font-display);color:var(--band-ink);margin-top:var(--space-4)}
.hero .tagline em{font-style:normal;color:var(--brass-500)}
.hero .descriptor{font:600 13px/18px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--band-kicker);margin-top:var(--space-6)}
.hero .lead{color:var(--band-muted);margin-top:var(--space-3)}
.hero .btn-row{margin-top:var(--space-8)}
.hero-art{position:relative;aspect-ratio:5/4;max-width:560px;justify-self:end;width:100%}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-art{justify-self:start;max-width:420px}}

/* Hero art: the five-step mark building itself, over ledger rules */
.steps-art{width:100%;height:100%}
.steps-art .rule{stroke:var(--band-rule);stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:0;animation:draw 1.2s var(--ease-ledger) both}
.steps-art .rule:nth-of-type(2){animation-delay:.1s}.steps-art .rule:nth-of-type(3){animation-delay:.2s}.steps-art .rule:nth-of-type(4){animation-delay:.3s}
.steps-art .step{fill:#1E5240;transform-box:fill-box;transform-origin:50% 100%;animation:rise var(--dur-slow) var(--ease-ledger) both}
.steps-art .step:nth-of-type(1){fill:#2A6E54;animation-delay:.35s}
.steps-art .step:nth-of-type(2){fill:#2F7A5E;animation-delay:.5s}
.steps-art .step:nth-of-type(3){fill:#4E9A7A;animation-delay:.65s}
.steps-art .step:nth-of-type(4){fill:#7FC4A4;animation-delay:.8s}
.steps-art .five{fill:var(--brass-500);transform-box:fill-box;transform-origin:50% 100%;animation:rise .8s var(--ease-ledger) 1.05s both}
.steps-art .label{font:500 15px var(--font-mono);fill:var(--band-muted)}
.steps-art .label-five{font:500 15px var(--font-mono);fill:var(--brass-500)}
.steps-art .total{font:500 30px var(--font-mono);fill:var(--band-ink);animation:fade .5s var(--ease-ledger) 1.6s both}
.steps-art .total-label{font:600 12px var(--font-sans);letter-spacing:.08em;fill:var(--band-kicker);animation:fade .5s var(--ease-ledger) 1.5s both}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Month end (type only, on band) ---------- */
.chores{display:grid;gap:var(--space-2);margin-top:var(--space-6)}
.chores li{list-style:none;font:400 clamp(24px,3vw,34px)/1.25 var(--font-display);color:var(--band-muted)}
.chores li s{text-decoration-color:var(--brass-500);text-decoration-thickness:2px}
.chores{padding:0;margin-bottom:0}
.turn{font:500 clamp(20px,2.2vw,24px)/1.4 var(--font-display);color:var(--brass-500);margin-top:var(--space-8);max-width:40ch}

/* ---------- Record strip & figures ---------- */
.records{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);font:500 13px/18px var(--font-mono);color:var(--ink-muted);margin-top:var(--space-2)}
.records span+span::before{content:"·";margin-right:var(--space-3);color:var(--rule)}
.shot{margin:0;display:grid;gap:var(--space-3)}
.shot .frame{background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);padding:clamp(8px,1.5vw,16px);overflow-x:auto}
.shot .frame img{width:100%;min-width:640px;border-radius:var(--radius-sm)}
.shot .frame--narrow{max-width:640px}
.shot .frame--narrow img{min-width:0}
figcaption{font:400 13px/1.5 var(--font-sans);color:var(--ink-muted);max-width:70ch}
.illustrative{font:500 11px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- Film (the brand animation slot) ---------- */
.film{margin:0;display:grid;gap:var(--space-3)}
.film .screen{position:relative;background:var(--paper-50);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised)}
.film video,.film img{width:100%;height:auto}
.film--wide .screen{aspect-ratio:16/9}
.film--tall{display:none}
.film--tall .screen{aspect-ratio:4/5;max-width:560px}
.film .still{display:none}
.film-toggle{position:absolute;right:12px;bottom:12px;background:rgba(20,32,27,.78);color:var(--paper-50);border:0;border-radius:var(--radius-sm);font:500 12px/16px var(--font-sans);padding:6px 10px;cursor:pointer}
@media (max-width:700px){.film--wide{display:none}.film--tall{display:grid}}
@media (prefers-reduced-motion:reduce){.film video{display:none}.film .still{display:block}.film-toggle{display:none}}

/* ---------- Allocation (S3 worked example) ---------- */
.alloc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.alloc .cell{background:var(--surface-raised);box-shadow:var(--shadow-raised);border-radius:var(--radius-md);padding:var(--space-4) var(--space-6)}
.alloc .k{font:600 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.alloc .v{font:500 clamp(20px,2.4vw,26px)/1.3 var(--font-mono);margin-top:var(--space-1)}
.alloc .bar{height:6px;background:var(--surface-sunken);border-radius:3px;margin-top:var(--space-3);overflow:hidden}
.alloc .bar i{display:block;height:100%;background:var(--ledger-500)}
.alloc-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;border-top:2px solid var(--accent);margin-top:var(--space-4);padding-top:var(--space-3);font:500 14px var(--font-sans)}
.alloc-total .num{font-size:20px}
@media (max-width:700px){.alloc{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden}
.cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--surface-raised);padding:var(--space-6);display:grid;align-content:start;gap:var(--space-2);min-width:0}
.card h3{font:600 17px/1.35 var(--font-sans);letter-spacing:0}
.card p{color:var(--ink-muted);font-size:15px}
.card .idx{font:500 13px var(--font-mono);color:var(--accent-ink)}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards--two{grid-template-columns:1fr}}

/* ---------- Five steps strip ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.steps li{padding:var(--space-4) var(--space-4) var(--space-4) 0;border-top:4px solid transparent;margin-top:-1px;color:var(--ink-muted);min-width:0}
.steps li+li{padding-left:var(--space-4);border-left:1px solid var(--rule)}
.steps .n{display:block;font:500 14px var(--font-mono);margin-bottom:var(--space-2)}
.steps .t{display:block;font:500 21px/1.25 var(--font-display);color:inherit}
.steps .d{display:block;font-size:14px;line-height:1.5;margin-top:var(--space-2)}
.steps li.five{border-top-color:var(--accent);color:var(--ink)}
.steps li.five .n{color:var(--accent-ink)}
.steps.is-live li{transition:color var(--dur-base) var(--ease-ledger),border-color var(--dur-base) var(--ease-ledger)}
.steps.is-live li.lit{color:var(--ink);border-top-color:var(--ledger-500)}
.steps.is-live li.five.lit{border-top-color:var(--accent)}
@media (max-width:760px){.steps{grid-template-columns:1fr}.steps li+li{border-left:none;padding-left:0;border-top:1px solid var(--rule)}.steps li.five{border-top:4px solid var(--accent)}}

/* ---------- Contract page panel (S7) ---------- */
.cpanel{background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);overflow:hidden}
.cpanel-head{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--rule)}
.cpanel-head .t{font:600 16px/1.3 var(--font-sans)}
.cpanel-head .s{font-size:13px;color:var(--ink-muted)}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chip{font:500 12px/16px var(--font-sans);padding:3px 8px;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink-muted)}
.chip--ok{background:var(--positive-soft);color:var(--positive)}
.chip--ok::before{content:"✓ ";font-family:var(--font-mono)}
.chip--wait{background:var(--brass-100);color:var(--brass-700)}
.chip--wait::before{content:"◷ ";font-family:var(--font-mono)}
:root[data-theme="dark"] .chip--wait{background:#3A2C12;color:#E3B062}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip--wait{background:#3A2C12;color:#E3B062}}
.tabs{display:flex;gap:var(--space-6);padding:0 var(--space-6);border-bottom:1px solid var(--rule);overflow-x:auto;font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
.tabs span{padding-block:var(--space-3);white-space:nowrap;border-bottom:2px solid transparent}
.tabs span.on{color:var(--ink);border-bottom-color:var(--brand)}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule)}
.tile{background:var(--surface-raised);padding:var(--space-4) var(--space-6);min-width:0}
.tile .k{font:600 11px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.tile .v{font:500 18px/1.4 var(--font-mono);margin-top:2px;white-space:nowrap}
.tile .v small{font-size:11px;color:var(--ink-muted);margin-right:3px}
.tile .n{font-size:12px;color:var(--ink-muted)}
.tile--key .v{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
.progress{display:flex;height:6px;background:var(--surface-sunken)}
.progress i{display:block;height:100%}
.p-rec{background:var(--ledger-500)}.p-wait{background:var(--brass-500)}.p-plan{background:var(--paper-300)}
.cpanel-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1px;background:var(--rule)}
.cpanel-body > div{background:var(--surface-raised);padding:var(--space-6);min-width:0}
.cpanel h4{font:600 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--space-3)}
.ob{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-4);padding-block:var(--space-3);border-bottom:1px solid var(--rule);font-size:14px}
.ob:last-child{border-bottom:0}
.ob .amt{font-family:var(--font-mono);font-size:13px;color:var(--ink-muted);text-align:right}
.ob .bar{grid-column:1/-1;height:5px;background:var(--surface-sunken);border-radius:3px;overflow:hidden}
.ob .bar i{display:block;height:100%;background:var(--ledger-500)}
.tbl-wrap{overflow-x:auto}
.ledger{width:100%;border-collapse:collapse;font-size:13px}
.ledger th{font:600 11px/16px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:var(--space-2);border-bottom:1px solid var(--rule);background:var(--surface-sunken)}
.ledger td{padding:var(--space-2);border-bottom:1px solid var(--rule);vertical-align:top}
.ledger .num{text-align:right;white-space:nowrap}
.ledger th.num{font-family:var(--font-sans)}
.ledger tr.total td{border-top:2px solid var(--accent);border-bottom:0;font-weight:600}
.kv{display:grid;gap:var(--space-2);font-size:14px}
.kv div{display:flex;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--rule);padding-bottom:var(--space-2)}
.kv div:last-child{border-bottom:0}
.kv .num{font-size:13px;white-space:nowrap}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile:first-child{grid-column:1/-1}.cpanel-body{grid-template-columns:1fr}}

/* ---------- AI flow (on band) ---------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-4)}
.flow .node{border-radius:var(--radius-md);padding:var(--space-6);display:grid;gap:var(--space-2);align-content:start;min-width:0}
.flow .tag{font:600 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.flow h3{font:500 24px/1.2 var(--font-display)}
.flow p{font-size:15px;color:var(--band-muted)}
.node--ai{border:1px dashed rgba(247,244,236,.4)}
.node--ai .tag{color:var(--band-muted)}
.node--sf{background:var(--ledger-700);box-shadow:inset 0 3px 0 var(--brass-500)}
.node--sf .tag{color:var(--brass-500)}
.node--sf p{color:#D8E4DD}
.node--team{border:1px solid var(--band-rule)}
.node--team .tag{color:var(--band-kicker)}
@media (max-width:900px){.flow{grid-template-columns:1fr}}

/* ---------- Stats (on band) ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--band-rule)}
.stat{padding:var(--space-8) var(--space-6) var(--space-8) 0;border-bottom:1px solid var(--band-rule);min-width:0}
.stat:nth-child(even){padding-left:var(--space-6);border-left:1px solid var(--band-rule)}
.stat .big{font:500 clamp(40px,6vw,72px)/1 var(--font-mono);letter-spacing:-.03em;color:var(--band-ink)}
.stat:first-child .big{text-decoration:underline;text-decoration-color:var(--brass-500);text-decoration-thickness:5px;text-underline-offset:12px}
.stat p{color:var(--band-muted);margin-top:var(--space-4);max-width:36ch}
@media (max-width:700px){.stats{grid-template-columns:1fr}.stat:nth-child(even){padding-left:0;border-left:0}}

/* ---------- Generic two-column ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- Page header (inner pages) ---------- */
.page-head{background:var(--band);color:var(--band-ink)}
.page-head .wrap{padding-block:clamp(48px,7vw,88px);display:grid;gap:var(--space-4)}
.page-head .eyebrow{color:var(--band-kicker)}
.page-head h1{font-size:clamp(40px,5.5vw,64px);line-height:1.02;max-width:20ch}
.page-head .lead{color:var(--band-muted)}

/* ---------- Placeholder (content still to come) ---------- */
.todo{border:1px dashed var(--border-control);border-radius:var(--radius-md);padding:var(--space-6);color:var(--ink-muted);font-size:14px;background:repeating-linear-gradient(-45deg,transparent 0 10px,color-mix(in srgb,var(--surface-sunken) 60%,transparent) 10px 20px)}
.todo strong{color:var(--ink);font-weight:600}

/* ---------- Forms ---------- */
.form{display:grid;gap:var(--space-4);max-width:560px}
.field{display:grid;gap:var(--space-1)}
.field label{font:500 13px/18px var(--font-sans)}
.field input,.field select,.field textarea{font:400 15px/1.4 var(--font-sans);color:var(--ink);background:var(--surface-raised);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:10px 12px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--ink-muted)}
.form-status{font:500 14px var(--font-sans);color:var(--positive)}

/* ---------- Closing CTA + footer ---------- */
.closing{background:var(--band);color:var(--band-ink)}
.closing .wrap{padding-block:clamp(56px,8vw,96px);display:grid;gap:var(--space-4)}
.closing .eyebrow{color:var(--band-kicker)}
.closing h2{font-size:clamp(34px,4.5vw,54px)}
.closing p{color:var(--band-muted);max-width:56ch}
.closing .btn-row{margin-top:var(--space-4)}
.fineprint{background:var(--surface-sunken);border-top:1px solid var(--rule)}
.fineprint .wrap{padding-block:var(--space-6);display:grid;gap:var(--space-1);font-size:12px;line-height:1.6;color:var(--ink-muted)}
.site-footer{background:var(--ledger-900);color:var(--band-muted)}
.site-footer .wrap{padding-block:var(--space-12);display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--space-8)}
.site-footer img{height:52px;width:auto}
.site-footer h2{font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ledger-300);margin-bottom:var(--space-3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:14px}
.site-footer a{color:var(--paper-50);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .legal{grid-column:1/-1;border-top:1px solid #2A4A3E;padding-top:var(--space-4);font-size:12px}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:1fr 1fr}.site-footer .brandcol{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.section--band + .closing{border-top:1px solid var(--band-rule)}
.chip{white-space:nowrap}
@media (max-width:600px){.ob{grid-template-columns:1fr}.ob .amt{text-align:left}}