/* BHASM — the system. One file: tokens + components; every component carries
   its phone rule in the same block. Pages use classes and write no styles.
   Palette: charcoal ground · fire for action · gold for value. Nothing else. */
/* THE PUBLIC MONO — Commit Mono, self-hosted (founder 2026-09-13; SIL OFL, licence
   beside the file). It replaces the Google-hosted IBM Plex Mono on every public page:
   one variable file, one request, no third-party font host on the critical path.
   ⚠ The weight range is MEASURED from the file's own fvar axis (wght 200-700), not
   guessed — the stylesheet uses 500 and 600 and both sit inside it, so no weight is
   synthesised. A range that did not cover them would faux-bold every label. */
@font-face{font-family:'Commit Mono';src:url('/fonts/CommitMono-VF.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
:root{
  --ground:#0F1114; --ground-2:#141719; --surface:#191D21; --raised:#20252A;
  --rule:#2A3036; --rule-2:#343B42;
  --text:#F3F5F7; --text-2:#C3CAD1; --muted:#8E98A3; --label:#8E98A3;
  --fire:#FF4D3D; --fire-2:#FF6E60; --fire-deep:#B8281C; --fire-glow:rgba(255,77,61,.30);
  --gold:#E2BB4F; --gold-2:#F0D07A; --gold-mute:#9A7F35; --gold-glow:rgba(226,187,79,.24);
  --green:#3ECF8E;
  --sans:'Satoshi',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Commit Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1280px; --gut:clamp(20px,4vw,48px); --sec:clamp(72px,9vw,128px);
  --r:12px; --r-sm:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font:400 17px/1.6 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0}
.sec--tight{padding:calc(var(--sec)*.6) 0}
.sec--alt{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* type */
.eyebrow{font:600 11.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.hero-copy .eyebrow{white-space:nowrap;letter-spacing:.12em;font-size:11px}
@media (max-width:900px){.hero-copy .eyebrow{white-space:normal;line-height:1.7}}
.eyebrow--fire{color:var(--fire)}
.h1{font-weight:600;font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:-.028em}
.h1{white-space:nowrap}
@media (max-width:900px){.h1{white-space:normal}}
/* ONE DISPLAY FACE, HEADLINE AND SECTION HEAD (founder 2026-08-27).
   Gambetta (Fontshare) at 300 - an old-style display serif, calligraphic
   stress, sharp entry strokes. Holds at 32px where Boska went fragile. */
.h2{font-weight:600;font-size:clamp(26px,2.9vw,38px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
/* ⛔ SCOPED TO THE PAGES THAT LOAD THE FACE. The first draft put Boska on a
   bare .h2 - one rule, fifteen pages, and not every page carries the
   Fontshare stylesheet. site_type_families went red on all fifteen (a fourth
   family named but unrenderable) and mobile_structure went red on five
   (h2 grew 38px->42px, so every document got taller). The body class is the
   binding: a page opts in by loading the font AND wearing the class. */
.site--serif .h1{font-family:'Gambetta',Georgia,serif;font-weight:300;font-size:clamp(32px,4.4vw,58px);line-height:1.06;letter-spacing:-.012em;white-space:normal}
.site--serif .h2{font-family:'Gambetta',Georgia,serif;font-weight:300;font-size:clamp(28px,3.1vw,40px);line-height:1.1;letter-spacing:-.012em}
.h3{font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.015em}
.lede{font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--text-2);max-width:62ch;text-wrap:pretty}
.lede--c{margin:20px auto 0;text-align:center}
.body{color:var(--muted);font-size:16px;line-height:1.65;text-wrap:pretty}
.mono{font-family:var(--mono)}
.fig{font:500 clamp(40px,4.6vw,64px)/1 var(--sans);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.fig--gold{color:var(--gold)}
.lbl{font:500 11.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:var(--r-sm);font:600 15px/1 var(--sans);letter-spacing:-.01em;border:1px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--fire{background:var(--fire);color:#14100F;box-shadow:0 0 0 0 var(--fire-glow)}
.btn--fire:hover{background:var(--fire-2);box-shadow:0 8px 30px var(--fire-glow)}
.btn--ghost{background:rgba(255,255,255,.03);border-color:var(--rule-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--muted);background:rgba(255,255,255,.06)}
.btn--sm{height:38px;padding:0 14px;font-size:14px}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:64px;background:rgba(15,17,20,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--rule)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand-logo{font-size:20px;--bhasm-ground:var(--ground);flex:none}
.nav .brand-logo{--bhasm-ground:#0F1114}
.foot .brand-logo{--bhasm-ground:var(--ground-2)}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{font-size:14.5px;color:var(--text-2);transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-cta .signin{font-size:14.5px;color:var(--text-2);padding:0 8px}
.burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--rule-2);border-radius:var(--r-sm);background:transparent;color:var(--text);font-size:18px;font-family:inherit}
.nav-panel{display:none}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav.open .nav-panel{display:flex;flex-direction:column;gap:4px;position:absolute;left:0;right:0;top:64px;background:var(--ground);border-bottom:1px solid var(--rule);padding:12px var(--gut) 20px}
  .nav-panel a{padding:12px 4px;border-bottom:1px solid var(--rule);font-size:16px;color:var(--text-2)}
  .nav-panel .btn{margin-top:12px;justify-content:center}
}

/* hero — one punchline, one line under it, the field behind */
.hero{position:relative;overflow:hidden;padding:clamp(72px,9vw,132px) 0 clamp(56px,7vw,104px);text-align:center}
.hero-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 480px at 50% 35%,var(--gold-glow),transparent 70%),radial-gradient(700px 400px at 50% 100%,var(--fire-glow),transparent 70%)}
.hero-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.hero .h1{font-size:clamp(28px,3.4vw,50px);white-space:nowrap;line-height:1.12}
.hero .lede{margin:22px auto 0;max-width:60ch;text-align:center}
.hero .row{margin-top:30px}
.hero-note{margin-top:24px;display:flex;gap:18px;flex-wrap:wrap}
.hero-note span{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label);display:flex;align-items:center;gap:8px}
.hero-note span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (max-width:900px){.hero{padding:56px 0 40px}.hero .h1{white-space:normal}.hero .h1 br{display:none}}

/* the ray — rows of decisions (drawn in the page; sample data) */
.rayp{background:rgba(25,29,33,.72);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;font-family:var(--mono)}
.rayp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.rayp-head b{color:var(--text);font-weight:600}
.rayp-head .live{display:flex;align-items:center;gap:8px;color:var(--green)}
.rayp-head .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s infinite}
.rayp-rows{display:grid}
.rr{display:grid;grid-template-columns:96px 1fr 132px 92px;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--text-2);transition:background .3s}
.rr:last-child{border-bottom:0}
.rr .id{color:var(--label)}
.rr .bar{position:relative;height:6px;border-radius:3px;background:var(--rule)}
.rr .bar i{position:absolute;left:var(--lo);width:var(--w);top:0;bottom:0;border-radius:3px;background:var(--gold-mute)}
.rr .bar b{position:absolute;left:var(--day);top:-4px;width:2px;height:14px;background:var(--text);border-radius:1px}
.rr .st{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.rr .st.open{color:var(--fire)}
.rr .st.held{color:var(--gold)}
.rr .st.sent{color:var(--green)}
.rr .st.quiet{color:var(--label)}
.rr .day{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.rr.fire{background:linear-gradient(90deg,var(--fire-glow),transparent 60%)}
.rr.fire .bar i{background:var(--fire-deep)}
.rr.fire .bar b{background:var(--fire);box-shadow:0 0 12px var(--fire)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:900px){.rr{grid-template-columns:70px 1fr 88px 64px;font-size:11.5px;padding:10px 12px}.rr .id{display:none}.rr{grid-template-columns:1fr 92px 64px}}

/* proof strip */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ground-2)}
.strip .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.strip .cell:first-child{border-left:1px solid var(--rule)}
.strip .cell:last-child{border-right:1px solid var(--rule)}
.strip .cell{background:var(--ground-2);padding:26px 22px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--rule)}
.strip .cell b{font:500 26px/1 var(--sans);letter-spacing:-.03em;color:var(--text)}
.strip .cell b.gold{color:var(--gold)}
.strip .cell span{font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
@media (max-width:900px){.strip .wrap{grid-template-columns:1fr 1fr}.strip .cell{padding:20px 16px;border-bottom:1px solid var(--rule)}.strip .cell:nth-child(even){border-right:0}.strip .cell b{font-size:22px}}
@media (max-width:480px){.strip .wrap{grid-template-columns:1fr 1fr}}

/* split: UI object + copy */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}
.split .copy .lede{margin-top:18px}
.split .copy .body{margin-top:14px}
.split .copy .row{margin-top:26px}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:28px}.split.rev .copy{order:-1}}

/* product panel (any UI object) */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule)}
.panel-body{padding:20px}
.panel .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.panel .v{font:500 15px/1.4 var(--sans);color:var(--text)}

/* which-day instrument */
.inst{display:grid;grid-template-columns:1fr;gap:18px}
.inst-chart{position:relative;height:190px}
.inst-chart svg{width:100%;height:100%}
.inst-read{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.inst-read div{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.inst-read .fig{font-size:30px}
.inst-ctl{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--rule-2);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;transition:all .15s}
.chip:hover{color:var(--text);border-color:var(--muted)}
.chip.on{color:#14100F;background:var(--gold);border-color:var(--gold)}
input[type=range].slider{width:100%;accent-color:var(--fire);margin:6px 0 0}
@media (max-width:900px){.inst-read{grid-template-columns:1fr 1fr 1fr}.inst-read .fig{font-size:24px}.inst-chart{height:150px}}

/* cards */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--rule-2);transform:translateY(-2px)}
.card .lbl{margin-bottom:2px}
.card .fig{margin:4px 0 2px}
.card .h3{margin-top:2px}
.card .body{font-size:15px}
.card--fire{border-color:rgba(255,77,61,.35);background:linear-gradient(180deg,rgba(255,77,61,.07),var(--surface) 60%)}
.card--gold{border-color:rgba(226,187,79,.35);background:linear-gradient(180deg,rgba(226,187,79,.06),var(--surface) 60%)}
.card .ico{width:36px;height:36px;border-radius:9px;background:var(--raised);border:1px solid var(--rule-2);display:grid;place-items:center;color:var(--gold);font:600 13px var(--mono)}
.card--fire .ico{color:var(--fire)}

@media (max-width:900px){.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}.card{padding:22px 20px}}
@media (min-width:600px) and (max-width:900px){.grid-4,.grid-5{grid-template-columns:1fr 1fr}}

/* steps strip */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.step{background:var(--surface);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.step .n{font:500 12px var(--mono);color:var(--fire);letter-spacing:.14em}
.step .h3{font-size:17px}
.step .body{font-size:14.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* full-width band with a UI object */
.band{position:relative;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ground-2)}
.band .wrap{display:grid;grid-template-columns:1fr;gap:34px}
.band .rayp{margin-top:8px}

/* pricing objects */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.tier{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.tier.on{border-color:rgba(226,187,79,.5);box-shadow:0 0 0 1px rgba(226,187,79,.25),0 30px 70px rgba(0,0,0,.35)}
.tier .name{display:flex;align-items:center;gap:10px;font:600 20px/1 var(--sans);letter-spacing:-.02em}
.tier .badge{font:600 10.5px/1 var(--mono);letter-spacing:.12em;padding:6px 8px;border-radius:999px;border:1px solid var(--rule-2);color:var(--muted)}
.tier .badge.gold{color:var(--gold);border-color:rgba(226,187,79,.5)}
.tier .price{font:500 clamp(40px,3.6vw,52px)/1 var(--sans);letter-spacing:-.04em;margin-top:6px}
.tier .per{font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.tier ul{list-style:none;margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;color:var(--text-2);font-size:15px}
.tier li{display:flex;gap:10px}
.tier li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px}
.tier .btn{margin-top:auto;justify-content:center}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}

/* final band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ground),#17110F);border-top:1px solid var(--rule)}
.cta-band::before{content:'';position:absolute;left:50%;top:-40%;width:900px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--fire-glow),transparent);pointer-events:none}
.cta-band .wrap{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}

/* footer */
.foot{border-top:1px solid var(--rule);background:var(--ground-2);padding:64px 0 36px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.foot .lbl{margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot li a{font-size:14.5px;color:var(--text-2)}
.foot li a:hover{color:var(--text)}
.foot .tag{color:var(--muted);font-size:14.5px;max-width:34ch;margin-top:12px;line-height:1.55}
.foot .base{margin-top:48px;padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--label)}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}}

/* motion: sections rise in once */
.rise{transition:opacity .6s ease,transform .6s ease}
/* fail open: content is hidden ONLY once a reveal script has claimed the page
   by setting `rvl` on <html>. A page with no script shows everything. */
html.rvl .rise{opacity:0;transform:translateY(14px)}
/* THE REVEAL MUST BE SCOPED THE SAME WAY THE HIDE IS.
   `.rise.in` is (0,2,0); `html.rvl .rise` above is (0,2,1) - so an unscoped
   reveal LOSES to its own hide rule and the section stays at opacity 0 no
   matter how many mechanisms add `.in`. Measured 2026-08-27 on production:
   index.html carried `.in` on 9 of 9 blocks at BOTH 380 and 1280 while every
   one computed opacity:0, leaving only the hero and the footer painted.
   The failure is invisible to a source grep - `.in` WAS applied and the
   observer AND its setTimeout fallback both ran correctly. A hide and a
   reveal must carry the same scope or the pair is not a pair. */
html.rvl .rise.in,.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.rayp-head .live::before{animation:none}}
.mt{margin-top:44px}
.jc{justify-content:center}

/* the book — one bar per state */
.book .panel-body{display:flex;flex-direction:column;gap:14px;padding:22px 20px}
.bk{display:grid;grid-template-columns:200px 1fr 92px;gap:14px;align-items:center;font-size:13px}
.bk-l{color:var(--text-2);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.bk-bar{height:10px;background:var(--raised);border-radius:5px;overflow:hidden;position:relative}
.bk-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:5px;background:var(--label);transition:width .6s ease}
.bk-bar i.fire{background:var(--fire);box-shadow:0 0 14px var(--fire-glow)}
.bk-bar i.gold{background:var(--gold)}
.bk-bar i.green{background:var(--green)}
.bk-n{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.bk-foot{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label);padding-top:6px;border-top:1px solid var(--rule)}
@media (max-width:900px){.bk{grid-template-columns:1fr 72px}.bk-l{grid-column:1/-1}}
.foot .tag-1{color:var(--text);font-weight:500}
.foot .tag-2{color:var(--gold)}
.foot .tag-3{color:var(--gold)}
.foot .base-r{text-align:right}

/* auth — sign in / start free */
.auth{position:fixed;inset:0;z-index:80;background:rgba(10,12,14,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:48px 16px}
.auth[hidden]{display:none}
body.auth-open{overflow:hidden}
.auth-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);box-shadow:0 40px 100px rgba(0,0,0,.6)}
.auth-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 16px;border-bottom:1px solid var(--rule)}
.auth-tabs{display:flex;gap:4px}
.auth-tab{background:transparent;border:1px solid transparent;border-radius:var(--r-sm);color:var(--muted);font:600 14px var(--sans);padding:8px 12px;cursor:pointer}
.auth-tab.on{color:var(--text);background:var(--raised);border-color:var(--rule-2)}
.auth-x{background:transparent;border:0;color:var(--muted);font-size:24px;line-height:1;width:36px;height:36px;border-radius:var(--r-sm);cursor:pointer}
.auth-x:hover{color:var(--text);background:var(--raised)}
.auth-form{padding:22px 24px 20px;display:flex;flex-direction:column;gap:14px}
.auth-sub{font-size:14.5px}
.auth-oauth{display:flex;flex-direction:column;gap:8px}
.auth-oauth:empty{display:none}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f[hidden]{display:none}
.f input,.f select{height:44px;padding:0 12px;background:var(--ground);border:1px solid var(--rule-2);border-radius:var(--r-sm);color:var(--text);font:400 15px var(--sans);outline:none;width:100%}
.f input:focus,.f select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.auth-err{font-size:14px;color:var(--fire-2);background:var(--fire-glow);border:1px solid rgba(255,77,61,.35);border-radius:var(--r-sm);padding:10px 12px}
.auth-go{justify-content:center;height:48px}
.auth-go:disabled{opacity:.6;transform:none}
.auth-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)}
.auth-foot a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.auth{padding:0;align-items:stretch}.auth-card{max-width:none;border-radius:0;border:0;min-height:100%}.auth-grid{grid-template-columns:1fr}}

/* alignment across a row: every card shares the row's tracks (subgrid), so label, title and body line up with the neighbours */
.grid{grid-template-rows:auto auto 1fr}
.grid>.card{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:10px;align-content:start}
.grid>.card .body{align-self:start}
.steps{grid-template-rows:auto auto 1fr}
.steps>.step{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:10px}
.strip .cell{justify-content:flex-start}
.strip .cell b{white-space:nowrap;font-size:clamp(18px,1.7vw,26px)}
.strip .cell span{min-height:2.9em}
@media (max-width:900px){.grid,.steps{grid-template-rows:none}.grid>.card,.steps>.step{grid-template-rows:none;grid-row:auto}}

/* the band — a moving line of statements; pauses on hover; still under reduced motion */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ground-2);padding:32px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-item{display:flex;align-items:baseline;gap:10px;padding:12px 18px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);white-space:nowrap}
.mq-item b{font:600 15px/1 var(--sans);letter-spacing:-.01em;color:var(--gold)}
.mq-item span{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:auto}}

/* motion — sections rise with a stagger; the hero object floats */
.rise .card,.rise .step{transition:opacity .6s ease,transform .6s ease,border-color .2s}
html.rvl .rise:not(.in) .card,html.rvl .rise:not(.in) .step{opacity:0;transform:translateY(18px)}
.rise.in .card:nth-child(2),.rise.in .step:nth-child(2){transition-delay:.08s}
.rise.in .card:nth-child(3),.rise.in .step:nth-child(3){transition-delay:.16s}
.rise.in .card:nth-child(4),.rise.in .step:nth-child(4){transition-delay:.24s}
.rise.in .step:nth-child(5){transition-delay:.32s}
.hero-ray .rayp{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:perspective(1400px) rotateY(-4deg) translateY(0)}50%{transform:perspective(1400px) rotateY(-4deg) translateY(-8px)}}
@media (max-width:900px){.hero-ray .rayp{animation:none}}
@media (prefers-reduced-motion:reduce){.hero-ray .rayp{animation:none}.rise:not(.in) .card,.rise:not(.in) .step{opacity:1;transform:none}}

.hero-ind{margin-top:18px;font:500 10.5px/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
@media (max-width:600px){.hero-ind{white-space:normal}}
.sec--gold{position:relative;overflow:hidden}
.sec--gold::before{content:'';position:absolute;left:50%;top:-30%;width:1100px;height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--gold-glow),transparent);pointer-events:none}
.sec--gold .wrap{position:relative}
@media (max-width:600px){.mq-item{padding:10px 14px;gap:8px}.mq-item b{font-size:14px}.mq-item span{font-size:11px}}
/* founders club — the two lists under the call */
.fc{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:880px;margin-top:36px;text-align:left}
.fc-col{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px}
.fc-col--gold{border-color:rgba(226,187,79,.45)}
.fc-col .lbl{margin-bottom:12px}
.fc-col--gold .lbl{color:var(--gold)}
.fc-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--text-2);font-size:15px}
.fc-col li{display:flex;gap:10px}
.fc-col li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--label);margin-top:9px}
.fc-col--gold li::before{background:var(--gold)}
@media (max-width:700px){.fc{grid-template-columns:1fr}}

/* sign-in as a page, not an overlay */
.auth--page{position:static;min-height:calc(100vh - 64px);background:var(--ground);backdrop-filter:none;-webkit-backdrop-filter:none;padding:56px 16px;align-items:flex-start}
.auth--page .auth-card{margin-top:24px}
.auth--page .auth-x{text-decoration:none;display:grid;place-items:center}
.signin-body{background:radial-gradient(900px 480px at 50% 0%,var(--gold-glow),transparent 70%),var(--ground)}
@media (max-width:600px){.auth--page{padding:0}.auth--page .auth-card{margin-top:0}}
/* the BHASM Score band */
.scoreband{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:start;padding:36px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.scoreband .h2{font-size:clamp(24px,2.4vw,32px)}
.scoreband-ip{margin-top:14px;font-size:13px;color:var(--label)}
@media (max-width:900px){.scoreband{grid-template-columns:1fr;gap:16px}}
/* the phone: same content, a different layout. Card rows become a swipe row (snap-scrolled), not a stack. */
@media (max-width:600px){
  .grid,.steps{display:flex;grid-template-rows:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:2px 2px 14px;margin:32px calc(-1 * var(--gut)) 0;padding-left:var(--gut);padding-right:var(--gut);scrollbar-width:none;background:transparent;border:0;border-radius:0}
  .grid::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .grid>.card,.steps>.step{flex:0 0 82%;scroll-snap-align:start;grid-template-rows:none;grid-row:auto;border-radius:var(--r);border:1px solid var(--rule)}
  .fc{grid-template-columns:1fr}
  .body{font-size:15px}
  .lede{font-size:16px}
}
/* the loop under the headline */
.hero-loop{margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.hero-loop i{font-style:normal;color:var(--gold)}
.hero-loop .more{color:var(--label)}
.hero-loop span:nth-child(7){color:var(--gold)}
.hero-loop span:nth-child(9){color:var(--fire)}
@media (max-width:600px){.hero-loop{font-size:11.5px;gap:6px 8px}}
/* what the score is made of */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip-s{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:9px 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface)}
.chip-s:first-child,.chip-s:nth-child(3){color:var(--gold);border-color:rgba(226,187,79,.45)}
:root{--sec:clamp(56px,7vw,96px)}
/* phone shapes: tiles for the six signals, a numbered spine for the five walls */
@media (max-width:600px){
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;margin:28px 0 0;padding:0;scroll-snap-type:none}
  .tiles>.card{flex:none;padding:16px 14px;gap:8px}
  .tiles .ico{width:30px;height:30px;font-size:12px}
  .tiles .h3{font-size:16px}
  .tiles .body{font-size:13px;line-height:1.5}
  .steps{display:grid;grid-template-columns:1fr;gap:0;overflow:visible;margin:28px 0 0;padding:0;border:0;background:transparent}
  .steps>.step{flex:none;border:0;border-left:2px solid var(--fire);border-radius:0;background:transparent;padding:12px 16px 16px;position:relative}
  .steps>.step .n{color:var(--fire)}
  .steps>.step .body{font-size:14px}
}
.score-sub{margin-top:12px;font:500 15px/1.5 var(--sans);color:var(--gold)}
/* the shades: fire under the hero and on the close, gold on value */
.hero-glow{background:radial-gradient(1000px 520px at 50% 30%,var(--gold-glow),transparent 68%),radial-gradient(900px 480px at 50% 105%,var(--fire-glow),transparent 66%)}
.sec--gold::before{width:1300px;height:720px;top:-25%}
.cta-band::before{width:1100px;height:720px}
#score .grid{position:relative}
#score{position:relative;overflow:hidden}
#score::before{content:'';position:absolute;left:-10%;bottom:-40%;width:700px;height:520px;background:radial-gradient(closest-side,var(--fire-glow),transparent);pointer-events:none}
/* phone hero: the loop and the industries run as single lines, not wrapped blocks */
@media (max-width:600px){
  .hero-loop{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;white-space:nowrap;max-width:100%;padding:0 4px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .hero-loop::-webkit-scrollbar{display:none}
  .hero-ind{white-space:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .hero-ind::-webkit-scrollbar{display:none}
  .hero .h1{font-size:30px}
}
/* hero spacing once the eyebrow, note and industries line are gone */
.hero{padding:clamp(88px,11vw,160px) 0 clamp(72px,9vw,128px)}
.hero-loop{margin-top:30px}
.hero .row{margin-top:40px}
/* the three parts of the hero copy are read in order, so each gets its own
   step of air: headline -> beats -> action. (founder 2026-08-27) */
@media (max-width:900px){.hero{padding:72px 0 56px}.hero-loop{margin-top:24px}.hero .row{margin-top:32px}}
/* PHONE NORMALISATION for pages migrated onto the system (body.sys): the pages compute their own
   paddings and sizes inline per page; below 600px one rhythm, one gutter, one scale wins. */
@media (max-width:600px){
  body.sys section>div[style*="padding"]{padding:44px var(--gut)!important}
  body.sys h1{font-size:30px!important;line-height:1.12!important;letter-spacing:-.02em!important}
  body.sys h2{font-size:24px!important;line-height:1.15!important;letter-spacing:-.015em!important;margin-top:16px!important}
  body.sys h3{font-size:17px!important;line-height:1.3!important}
  body.sys p{font-size:15px!important;line-height:1.55!important}
  body.sys [style*="font-size:5"],body.sys [style*="font-size:4"],body.sys [style*="font-size:3"]{font-size:32px!important;line-height:1.1!important}
  body.sys [style*="font-size:2"]{font-size:20px!important;line-height:1.3!important}
  body.sys [style*="font-size:1"]{line-height:1.5!important}
  body.sys .hgrid>*{padding:18px 16px!important}
}
/* the shades on migrated pages (body.sys): gold and fire under the first section, fire on the last, as on index */
body.sys section:first-of-type{position:relative;overflow:hidden}
body.sys section:first-of-type::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 480px at 50% 0%,var(--gold-glow),transparent 68%),radial-gradient(800px 420px at 20% 110%,var(--fire-glow),transparent 66%)}
body.sys section:first-of-type>*{position:relative}
body.sys section:last-of-type{position:relative;overflow:hidden}
body.sys section:last-of-type::before{content:'';position:absolute;left:50%;top:-30%;width:1000px;height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--fire-glow),transparent);pointer-events:none}
body.sys section:last-of-type>*{position:relative}

/* the word that moves: white → gold → fire → white (index hero only) */
.w-cycle{animation:wcycle 7s ease-in-out infinite}
@keyframes wcycle{0%,38%{color:var(--text)}50%{color:var(--gold)}62%{color:var(--text)}74%{color:var(--fire)}86%,100%{color:var(--text)}}
@media (prefers-reduced-motion:reduce){.w-cycle{animation:none}}
/* room between sections on the system pages */
:root{--sec:clamp(84px,10vw,144px)}
/* the Score, under its six inputs */
.score-foot{margin-top:28px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.score-foot .chips{justify-content:center;margin-bottom:8px}
.score-foot .scoreband-ip{max-width:70ch}
.center .score-sub{text-align:center}
/* footer base line: one line, right-aligned, on every width */
.foot .base{justify-content:flex-end}
.foot .base-r{white-space:nowrap}
@media (max-width:600px){.foot .base{font-size:9.5px;letter-spacing:0}.foot .base>span:first-child{display:none}}
/* the loop: Score gold, Communicate fire, Attribute green; the hero word cycles the same way */
.hero-loop span:nth-child(11){color:var(--green)}
@keyframes wcycle{0%,30%{color:var(--text)}40%{color:var(--gold)}50%{color:var(--text)}60%{color:var(--fire)}70%{color:var(--text)}80%{color:var(--green)}90%,100%{color:var(--text)}}

/* comparison grid (pricing) */
.hero--page{padding:clamp(56px,6vw,84px) 0 clamp(48px,6vw,80px)}
.mt-s{margin-top:22px;text-align:center}
.cmp{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.cmp-h,.cmp-r{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:0}
.cmp--wide .cmp-h,.cmp--wide .cmp-r{grid-template-columns:1fr 1.3fr 1fr 1fr}
.cmp-h{background:var(--raised);font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmp-h>div{padding:12px 16px}
.cmp-r{border-top:1px solid var(--rule);font-size:14.5px;line-height:1.5;color:var(--text-2)}
.cmp-r>div{padding:14px 16px}
.cmp-k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp-us{color:var(--text);background:rgba(226,187,79,.05)}
@media (max-width:760px){
  .cmp{border:0;background:transparent;overflow:visible}
  .cmp-h{display:none}
  .cmp-r{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px}
  .cmp-r>div{padding:8px 16px}
  .cmp-r>.cmp-k{color:var(--text);font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;padding:14px 16px 8px;border-bottom:1px solid var(--rule)}
  .cmp-r>div[data-col]::before{content:attr(data-col);display:block;font:600 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:3px}
  .cmp-r>div:last-child{padding-bottom:14px}
}
@media (max-width:760px){
  .cmp:not(.cmp--wide) .cmp-r{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .cmp:not(.cmp--wide) .cmp-r>.cmp-k{grid-column:1/-1}
  .cmp:not(.cmp--wide) .cmp-r>div[data-col]{padding:8px 12px 12px;font-size:13.5px}
  .cmp:not(.cmp--wide) .cmp-r>div:last-child{padding-bottom:12px}
}

/* stats row (how-it-works) */
.grid-2{grid-template-columns:1fr 1fr}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:22px 22px;display:flex;flex-direction:column;gap:8px}
.stat .fig{font-size:clamp(34px,3.6vw,52px)}
.fig--fire{color:var(--fire)}
.stat .body{font-size:14px}
.mono-h{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}.stats,.stats--4{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:16px 14px}}
@media (max-width:600px){.grid-2{display:grid;grid-template-columns:1fr;overflow:visible;margin:28px 0 0;padding:0}.grid-2>.card{flex:none}}
b,strong{font-weight:600}

/* RULED ROWS — the legacy pages are lists separated by hairlines, not boxes.
   `.rlist` is a flush list (rule between items, no side padding); `.rrow` is a
   key/value row inside a bordered block. One padding value each, phone-aware.
   A page that spells its own row padding is the defect these two exist to end. */
.rlist{display:flex;flex-direction:column;min-width:0}
.rlist>*{padding:14px 0;border-top:1px solid var(--rule-2);min-width:0}
.rlist>*:first-child{border-top:0;padding-top:0}
.rrow{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:13px 24px;border-top:1px solid var(--rule-2);min-width:0}
.rrow:first-child{border-top:0}
.rrow .k{color:var(--text-2);min-width:0}
.rrow .v{font-family:var(--mono);font-size:13px;color:var(--text);white-space:nowrap}
@media (max-width:600px){.rrow{padding:12px 16px;grid-template-columns:1fr;gap:4px}.rrow .v{white-space:normal}.rlist>*{padding:12px 0}}
/* photographs — people under the charcoal, never the subject of the section.
   One treatment: cover, desaturated, opacity capped, ground gradient on top so text stays AA. */
.hero-photos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-photos picture,.hero-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photos picture{opacity:0;animation:heroFade 32s linear infinite;animation-delay:-2s}
.hero-photos picture:first-child{opacity:.62}
.hero-photos picture:nth-child(2){animation-delay:6s}
.hero-photos picture:nth-child(3){animation-delay:14s}
.hero-photos picture:nth-child(4){animation-delay:22s}
.hero-photos img{filter:saturate(.75) contrast(1.05)}
.hero-photos::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,20,.66) 0%,rgba(15,17,20,.62) 55%,var(--ground) 100%)}
@keyframes heroFade{0%{opacity:0}6%{opacity:.62}22%{opacity:.62}28%{opacity:0}100%{opacity:0}}
.sec--photo{position:relative;overflow:hidden}
.sec--photo .sec-photo{position:absolute;inset:0;pointer-events:none}
.sec--photo .sec-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;filter:saturate(.72)}
.sec--photo .sec-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--ground-2) 0%,rgba(20,23,25,.6) 40%,rgba(20,23,25,.6) 60%,var(--ground-2) 100%)}
.sec--photo .wrap{position:relative}
.sec--photo .step{background:rgba(15,17,20,.55);backdrop-filter:blur(2px)}
@media (prefers-reduced-motion:reduce){.hero-photos picture{animation:none}}
/* signal cards: the photograph shows the signal as the machine reads it; the copy stays on charcoal */
.card--photo{position:relative;overflow:hidden;min-height:250px;align-content:end;justify-items:start;text-align:left}
.grid>.card--photo{grid-template-rows:none;grid-row:auto;align-content:end;min-height:250px}
.card--photo .card-photo{position:absolute;inset:0;pointer-events:none}
.card--photo .card-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62;filter:saturate(.8) contrast(1.04)}
.card--photo .card-photo+.card-photo{opacity:0;animation:cardFade 21s ease-in-out infinite}
.card--photo .card-photo+.card-photo+.card-photo{animation-delay:7s}
@keyframes cardFade{0%,28%{opacity:0}36%,58%{opacity:1}66%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.card--photo .card-photo+.card-photo{animation:none}}
.card--photo .card-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,20,.12) 0%,rgba(15,17,20,.44) 46%,rgba(15,17,20,.93) 100%)}
.card--photo>*:not(.card-photo){position:relative}
.card--photo .ico{align-self:flex-start;background:rgba(15,17,20,.7);padding:4px 8px}
@media (max-width:900px){.card--photo{min-height:210px}}

/* ── SIGNAL CARDS FLIP TO THEIR EXPLANATION ──────────────────────────────
   The photo carries the feeling; the sentence carries the meaning. The card
   shows one at a time so the grid stays scannable - NAME + NUMBER on the
   face, the explanation one tap away, nothing competing.
   No front wrapper: every direct child except the back face is a front face,
   so the photo layers keep their absolute positioning untouched. */
/* ── SIGNAL CARDS: A REAL 3D FLIP ────────────────────────────────────────
   The first attempt rotated .card--photo itself and rendered the front face
   MIRRORED, because .card--photo carries overflow:hidden to clip the photo
   and an overflow other than visible FLATTENS the 3D context - the browser
   collapses preserve-3d to flat, so backface-visibility has no back to hide.
   The fix is structural, not a retreat to a cross-fade: the CLIPPING MOVES
   ONTO THE FACES. The card becomes a bare 3D stage (no border, no padding,
   no overflow) and each face is a full-bleed absolute panel that owns the
   border, the padding and the clip. Both faces then rotate with the stage
   and each hides its own back. */
.card--flip{position:relative;overflow:visible;padding:0;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.7,.2,1)}
.card--flip:hover{transform:none}
.card--flip.is-flipped{transform:rotateY(180deg)}
.card--flip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* (0,4,0) so it outranks .card--photo>*:not(.card-photo){position:relative} (0,3,0).
   Unscoped, the faces fell back into flow and each card carried its height twice. */
.card--flip.card--photo>.cf-face{position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--surface);border:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;
  padding:26px 24px;text-align:left}
.card--flip.card--photo>.cf-back{transform:rotateY(180deg)}
/* the face is now the stacking parent: .card--photo>*:not(.card-photo)
   no longer reaches the number, the name or the cue, so they painted UNDER
   the photo gradient. Measured: the name went grey-on-grey on 5 of 6 cards. */
.cf-face>*:not(.card-photo){position:relative;z-index:1}
/* THE FACE OWNS CROSS-AXIS ALIGNMENT, AND NOTHING INSIDE IT OVERRIDES.
   .card--photo .ico{align-self:flex-start} was written when the CARD was the
   flex container; it still reaches across the face boundary as a descendant
   selector, so the number pinned left while the name centred - measured at
   390: ico x=34, card centre x=105. align-self:auto hands the decision back
   to the face, which is the only element that knows the layout it is in.
   Scoped (0,3,0) so it beats the descendant rule outright, not by order. */
.card--photo>.cf-face>.ico{align-self:auto}
.card--flip.card--gold>.cf-face{border-color:rgba(226,187,79,.35)}
.cf-back .body{font-size:15px;color:var(--text-body)}
@media (max-width:600px){.cf-back>.ico{display:none}}
/* the cue is the card's affordance, not a caption */
.cf-cue{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.9;white-space:nowrap}
.cf-front>.cf-cue{position:absolute;right:14px;bottom:14px}
@media (max-width:900px){.card--flip.card--photo>.cf-face{padding:22px 20px}}
@media (max-width:600px){
  /* the NAME centres; the sentence stays left-ragged. A centred paragraph is
     harder to read at 13px, and the name is the card's identity, not prose. */
  .card--flip.card--photo>.cf-face{padding:14px 12px;gap:6px}
  .card--flip.card--photo>.cf-front{align-items:center;text-align:center}
  .card--flip.card--photo>.cf-back{align-items:stretch;justify-content:center;text-align:left}
  .card--flip.card--photo>.cf-back>.h3{text-align:center}
  .cf-back .body{font-size:13px;line-height:1.45}
  .cf-back .h3{font-size:15px}
  .tiles>.card--photo{justify-items:center;text-align:center}
  /* the cue sits ABOVE the number on the phone - at 158px the bottom edge
     already carries the name and the two collided. */
  .cf-front>.cf-cue{right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:10px}
}
@media (prefers-reduced-motion:reduce){.card--flip{transition:none}}

@media (max-width:600px){.tiles>.card--photo{min-height:158px}}
/* phone: air between sections — a section boundary must read as a boundary at 380 */
@media (max-width:600px){.sec{padding:88px 0}.marquee{padding:26px 0}.cta-band.sec{padding:88px 0 72px}}


/* ═══ INDEX HERO — ONE DECISION (2026-09-06). Copy + one decision card that cycles
   through six customers. Replaces the six-lane band (.jny), which did not survive
   a phone. Phone: copy → card → CTAs, all inside the first screen. Desktop: copy
   left, card right. The card is a bordered OBJECT (mobile_structure counts it),
   inset by the gutter, never a full-bleed stripe. */
.hero--one{padding-top:clamp(40px,5vw,88px);padding-bottom:clamp(20px,2.4vw,36px);text-align:left}
/* the section after the hero: half its top padding — the hero already paid the air */
.hero--one + script + .sec,.hero--one + .sec{padding-top:calc(var(--sec)*.5)}
.hero--one .hero-glow{background:radial-gradient(700px 420px at 78% 50%,var(--fire-glow),transparent 68%)}
.hero-one{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,480px);grid-template-areas:"copy card" "copy beats";column-gap:clamp(32px,5vw,80px);row-gap:14px;align-items:center}
.hero-copy{grid-area:copy;display:flex;flex-direction:column;align-items:flex-start}
.hero--one .h1{color:var(--text);font-family:'Gambetta',Georgia,serif;font-weight:300;text-transform:none;font-size:clamp(34px,4.6vw,60px);letter-spacing:-.012em;line-height:1.04;white-space:normal;text-wrap:balance}
.hero--one .lede{margin:22px 0 0;max-width:46ch;text-align:left}
.hero-cta{margin-top:32px}
.hero-beats{grid-area:beats;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero-beats i{font-style:normal;color:var(--fire)}
/* the card: one verdict, five signals, three walls. Levels are QUALITATIVE
   (weak / moderate / primary) — never a weight, never a number. */
.dec{grid-area:card;--c:var(--gold);position:relative;border:1px solid var(--rule);background:var(--ground-2);padding:18px 22px 18px;box-shadow:0 30px 80px -40px var(--fire-glow)}
.dec .k{font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dec .k b{font-weight:600;color:var(--text)}
.dec-hd{display:flex;justify-content:space-between;align-items:center}
.dec-v{position:relative;height:1.1em;margin:20px 0 18px;font-family:'Gambetta',Georgia,serif;font-weight:300;font-size:clamp(34px,3vw,44px);line-height:1;letter-spacing:-.01em;color:var(--c)}
.dec-v span{position:absolute;left:0;top:0;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;white-space:nowrap}
.dec[data-i="0"] .dec-v span:nth-child(1),.dec[data-i="1"] .dec-v span:nth-child(2),.dec[data-i="2"] .dec-v span:nth-child(3),.dec[data-i="3"] .dec-v span:nth-child(4),.dec[data-i="4"] .dec-v span:nth-child(5),.dec[data-i="5"] .dec-v span:nth-child(6){opacity:1;transform:none}
.dec[data-i="0"],.dec[data-i="1"],.dec[data-i="5"]{--c:var(--text-2)}
.dec[data-i="3"]{--c:var(--fire)}
.dec[data-i="4"]{--c:var(--green)}
.dec-sig{border-top:1px solid var(--rule-2)}
.sg{display:grid;grid-template-columns:118px minmax(0,1fr) 68px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule-2)}
.sg .k{color:var(--text-2);letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg i{position:relative;display:block;height:3px;background:var(--rule-2)}
.sg i b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);opacity:.85;transition:width .6s ease,background .45s ease}
.sg[data-lv="1"] i b{width:22%}.sg[data-lv="2"] i b{width:52%}.sg[data-lv="3"] i b{width:100%}
.sg em{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--muted);text-align:right}
.sg[data-lv="3"] em{color:var(--c)}
.dec-wall{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.dec-wall .k{display:flex;align-items:center;gap:7px;letter-spacing:.1em;font-size:9.5px}
.dec-wall .k::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.dec-wall .k[data-ok="0"]::before{background:var(--fire)}
.dec-dots{display:flex;gap:6px;margin-top:16px}
.dec-dots b{width:14px;height:2px;background:var(--rule-2);transition:background .3s}
.dec[data-i="0"] .dec-dots b:nth-child(1),.dec[data-i="1"] .dec-dots b:nth-child(2),.dec[data-i="2"] .dec-dots b:nth-child(3),.dec[data-i="3"] .dec-dots b:nth-child(4),.dec[data-i="4"] .dec-dots b:nth-child(5),.dec[data-i="5"] .dec-dots b:nth-child(6){background:var(--c)}
@media (max-width:900px){
  .hero--one{padding-top:24px;padding-bottom:20px}
  .hero--one .hero-glow{background:radial-gradient(560px 360px at 50% 60%,var(--fire-glow),transparent 70%)}
  .hero-one{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  .hero--one .h1{font-size:clamp(30px,8.6vw,42px);order:1}
  .hero--one .lede{order:2;margin-top:14px;font-size:15.5px}
  .dec{order:3;margin-top:22px;padding:14px 16px 14px}
  .dec-v{margin:16px 0 14px;font-size:32px}
  .sg{grid-template-columns:104px minmax(0,1fr) 60px;gap:10px;padding:7px 0}
  .sg .k{font-size:9.5px}
  .dec-wall{gap:8px 12px}
  .hero-cta{order:4;margin-top:20px;flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-beats{order:5;margin-top:18px;justify-content:center;font-size:10.5px;letter-spacing:.1em;gap:6px 8px}
}

/* THE SIX SIGNALS — six lines feeding one ember (founder 2026-09-10).
   The markup is drawn once by /js/bhasm-signals.js; a page carries only an
   empty mount. Ash lines, one fire ember, nothing else coloured. The wide and
   phone geometries are two designs, not one collapsed — the script picks by
   measurement, this block only sizes and colours what it draws. */
.sixsig{margin:44px 0 0}
.sixsig-svg{width:100%;height:auto;overflow:visible}
.sixsig-line{fill:none;stroke:var(--rule-2);stroke-width:1}
.sixsig-spark{fill:var(--fire)}
.sixsig-halo{fill:url(#sixsigHalo)}
.sixsig-halo-in{stop-color:var(--fire);stop-opacity:.30}
.sixsig-halo-out{stop-color:var(--fire);stop-opacity:0}
.sixsig-ember{fill:var(--fire)}
.sixsig-name{font:500 16px/1 var(--sans);letter-spacing:-.012em;fill:var(--text)}
.sixsig-sub{font:400 11.5px/1 var(--mono);letter-spacing:.05em;fill:var(--muted)}
.sixsig-cap{font:500 11.5px/1 var(--mono);letter-spacing:.18em;fill:var(--label)}
@media (max-width:900px){
  .sixsig{margin-top:30px}
  .sixsig-name{font-size:15px}
  .sixsig-sub{font-size:10.5px;letter-spacing:.03em}
}

/* ═══ PAGE SHAPES (2026-09-13, founder: one chrome, one grammar, one shape per page type). Append one scoped block per page below; never above. ═══ */
/* ── industries.html — THE DIRECTORY (body.page-directory) ───────────────
   One chrome, one grammar, a different SHAPE. industries.html is a reference
   surface: 80 rows a reader scans, filters and leaves. So the list starts
   inside the first screen and every narrative section sits UNDER it. No hero
   prose, no eyebrow above a headline, no tinted object — the rules are the
   list, and the only colour left is the dot that encodes sensitivity.
   ⚠ 390 is designed here FIRST and 1000+ widens it; the phone layout is not
   this grid collapsed. At 390 the toolbar stacks (label, full-width field,
   chips) because a field sharing a 358px row with four chips leaves ~120px to
   type into; at 1000+ the same three parts sit on ONE row opposite the list
   heading, where a directory's controls belong. */
.page-directory .dir{padding-top:18px;padding-bottom:26px}
.page-directory .dir .h1{font-size:21px;line-height:1.3;margin:0 0 14px}
.page-directory .dir-bar{border-top:1px solid var(--rule);padding-top:14px}
.page-directory .dir-h2{font-size:15px;line-height:1.35;margin:0}
.page-directory .dir-note{font-size:14px;line-height:1.5;margin:4px 0 0;max-width:46ch}
.page-directory .dir-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.page-directory .dir-lbl{flex:1 1 100%;margin:0}
.page-directory .dir-srch{flex:1 1 100%;min-width:0;background:transparent;border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:10px 12px;outline:none;border-radius:0;-webkit-appearance:none}
.page-directory .dir-srch:focus{border-color:var(--ink-muted-2)}
.page-directory .dir-chips{display:flex;flex-wrap:wrap;gap:8px}
.page-directory .dir-count{margin:12px 0 0}
.page-directory .dir-empty{margin:16px 0 0}
@media (min-width:1000px){
  .page-directory .dir{padding-top:26px}
  .page-directory .dir .h1{font-size:30px;margin-bottom:18px}
  .page-directory .dir-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;column-gap:32px}
  .page-directory .dir-h2{grid-area:1/1}
  .page-directory .dir-note{grid-area:2/1}
  .page-directory .dir-tools{grid-area:1/2;margin-top:0;flex-wrap:nowrap;justify-content:flex-end}
  .page-directory .dir-lbl{flex:none;order:-1}
  .page-directory .dir-srch{flex:0 0 200px}
  .page-directory .dir-count{grid-area:2/2;justify-self:end;margin-top:8px}
}
/* ── SHAPE · THE WALK (how-it-works.html) ─────────────────────────────────
   One column, read top to bottom. A left rail carries the marker, the station
   carries the words; the worked decision is the spine and everything after it
   is the same walk continued. No cards, no centred stack.
   ≤900 is a SEPARATE design, not a collapse: the rail drops under the heading
   and every station takes a ground, because a phone reader needs objects where
   a desktop reader follows a rule. Chrome, faces, colours and buttons unchanged. */
.page-walk .wrap{max-width:1180px}
.page-walk .hero{text-align:left;padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,52px)}
.page-walk .hero-wrap{align-items:flex-start}
.page-walk .hero .h1{white-space:normal;text-align:left}
.page-walk .hero .lede{margin:20px 0 0;text-align:left;max-width:60ch}
.page-walk .sec{padding:clamp(56px,6vw,84px) 0}
.walk-k{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-top:20px}
.walk-head{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:36px;align-items:start}
.walk-head .h2{grid-column:2;grid-row:1;text-align:left}
.walk-head .walk-k{grid-column:1;grid-row:1;margin-top:7px}
.walk-lede{margin:20px 0 0 236px;max-width:62ch}
.walk{list-style:none;margin:30px 0 0;padding:0}
.walk-st{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:36px;align-items:start;padding:26px 0;border-top:1px solid var(--rule)}
.walk-st:last-child{border-bottom:1px solid var(--rule)}
.walk-st .n{font:500 12px/1.6 var(--mono);letter-spacing:.09em;text-transform:none;color:var(--muted)}
.walk-b{display:flex;flex-direction:column;gap:10px;min-width:0}
.walk-b .body{font-size:15px;max-width:64ch}
.walk-b .fig{font-size:clamp(34px,3.2vw,44px);line-height:1}
.walk-row{margin:26px 0 0 236px}
@media (max-width:900px){
  .page-walk .sec{padding:44px 0}
  .page-walk .cta-band.sec{padding:60px 0 52px}
  .page-walk .hero{padding:40px 0 28px}
  .walk-head{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .walk-head .h2{grid-column:1;grid-row:1}
  .walk-head .walk-k{grid-column:1;grid-row:2;margin-top:0}
  .walk-lede{margin:16px 0 0}
  .walk{margin-top:18px;display:flex;flex-direction:column;gap:8px}
  .walk-st{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:14px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
  .walk-st:last-child{border-bottom:1px solid var(--rule)}
  .walk-b .body{font-size:15px}
  .walk-row{margin:20px 0 0}
  .walk-row .btn{width:100%;justify-content:center}
}
/* ── SHAPE · THE TABLE (pricing.html) ─────────────────────────────────────
   One table: three plan columns, the caps, and the buy button inside the
   column it buys. Rows align across columns with subgrid, so the price, the
   caps and the button sit on one line each.
   ≤900 is a SEPARATE design, not a collapse: the key column is dropped and
   each plan becomes one block carrying its own rows, key beside value —
   a phone reads one plan at a time, never four columns. */
.page-table .wrap{max-width:1180px}
.page-table .hero{text-align:left;padding:clamp(52px,6.5vw,88px) 0 clamp(24px,3vw,36px)}
.page-table .hero-wrap{align-items:flex-start}
.page-table .hero .h1{white-space:normal;text-align:left}
.page-table .sec{padding:clamp(52px,6vw,80px) 0}
.tbl-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:baseline}
.tbl-head .h2{text-align:left}
.tbl-k{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.ptab{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;grid-template-rows:repeat(15,auto);margin-top:28px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.ptab-keys,.ptab-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid}
.ptab-col--on{background:var(--raised)}
.ptab-cell{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:12px 18px;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.5;color:var(--text-2)}
.ptab-keys>.ptab-cell:nth-child(-n+6),.ptab-col>.ptab-cell:nth-child(-n+6){border-top:0}
.ptab-kc{font:500 12px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ptab-name{flex-direction:row;align-items:center;gap:10px;font:600 20px/1.2 var(--sans);letter-spacing:-.02em;color:var(--text);padding-top:22px}
.ptab-role{font:500 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.ptab-price{font:500 clamp(32px,2.8vw,44px)/1 var(--sans);letter-spacing:-.04em;color:var(--text);padding-top:6px;padding-bottom:2px}
.ptab-per{font:500 11.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.ptab-cta{padding-top:14px;padding-bottom:14px}
.ptab-cta .btn{width:100%;justify-content:center}
.ptab-prose{color:var(--muted);font-size:15px;line-height:1.6;justify-content:flex-start;padding-bottom:20px}
.ptab-rk{display:none}
.tbl-notes{margin-top:26px;display:flex;flex-direction:column;gap:12px;max-width:74ch}
.tbl-notes .body{font-size:15px}
.tbl-ev{margin-top:26px;border-top:1px solid var(--rule)}
.ev-r{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:36px;align-items:start;padding:22px 0;border-bottom:1px solid var(--rule)}
.ev-k{font:500 12px/1.6 var(--mono);letter-spacing:.09em;color:var(--gold)}
.ev-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.ev-b .body{font-size:15px;max-width:64ch}
@media (max-width:900px){
  .page-table .sec{padding:48px 0}
  .page-table .cta-band.sec{padding:60px 0 52px}
  .page-table .hero{padding:38px 0 22px}
  .tbl-head{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .ptab{display:flex;flex-direction:column;gap:12px;margin-top:22px;border:0;border-radius:0;overflow:visible;background:transparent}
  .ptab-keys{display:none}
  .ptab-col{display:flex;flex-direction:column;grid-row:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px 16px}
  .ptab-col--on{background:var(--surface);border-color:var(--rule-2)}
  .ptab-cell{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--rule-2);text-align:right}
  .ptab-col>.ptab-cell:nth-child(-n+6){border-top:0}
  .ptab-rk{display:block;flex:1 1 auto;text-align:left;font:500 12px/1.45 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
  .ptab-name,.ptab-role,.ptab-price,.ptab-per,.ptab-prose{text-align:left;justify-content:flex-start}
  .ptab-name{padding-top:0}
  .ptab-role,.ptab-per,.ptab-prose{flex-direction:column;align-items:flex-start}
  .ptab-cta{margin-top:12px;padding:14px;background:var(--raised);border-radius:var(--r-sm)}
  .ptab-prose{padding-bottom:12px}
  .tbl-ev{border-top:0;display:flex;flex-direction:column;gap:10px}
  .ev-r{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:16px 16px;background:var(--surface);border:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:var(--r)}
}
/* ── enterprise.html — THE DOSSIER (body.page-dossier) ───────────────────
   One chrome, one grammar, its own SHAPE. enterprise.html is the document a
   procurement reader works through and quotes back, so it is built as one:
   a contents list with anchors, numbered sections, and a claim per numbered
   entry. No hero prose beyond the title line, no cards, no glows, and no
   uppercase eyebrow above a headline — the section number is the marker.

   ⚠ THE LIGHT GROUND IS THE DENSITY RULE, NOT A SECOND THEME. Continuous
   prose a reader must work through goes on the light set; the nav and the
   footer keep the dark chrome and sit OUTSIDE .paper, which is why the light
   ground is painted on .paper and never on body.

   ★ MEASURED BEFORE ANY COLOUR WAS CHOSEN — every ink below clears WCAG AA
   on #DCDFE2, and the numbers are why these tokens and no others:
     --ground  #0F1114 14.13:1   --surface #191D21 12.67:1
     --rule    #2A3036  9.97:1   --fire-deep #B8281C 4.67:1 (links)
   ⛔ GOLD CANNOT BE AN INK ON THIS GROUND. --gold #E2BB4F measures 1.37:1 and
   --gold-mute 2.29:1 — both fail AA at every size, so neither a heading nor a
   label can wear it here. The gold ROLE therefore inverts to ink inside
   .paper and nowhere else on the site. That is a collision between two
   founder rulings (h2 gold sitewide · this page on the light ground) and it
   is REPORTED, not silently settled: the alternative needs a dark-gold token,
   which is a ratification, not a fix.
   ⚠ #DCDFE2 is the canon light ground and is the ONE literal in this block.

   THE MECHANISM IS A TOKEN INVERSION, NOT A RESTYLE. .paper re-points the
   ground and ink tokens for everything inside it, so .lbl, .body and .lede
   keep their one definition and simply resolve differently. Two exceptions
   are pinned by hand because they resolve at :root in the token sheet and a
   scoped override cannot reach them: the sitewide gold h2, and the link
   colour, which .btn--fire would otherwise win. */
.page-dossier{--paper:#DCDFE2;--paper-ink:var(--ground);--paper-ink-2:var(--surface);--paper-muted:var(--rule);--paper-link:var(--fire-deep)}
.page-dossier .paper{background:var(--paper);color:var(--paper-ink);
  --ground:var(--paper);--ground-2:var(--paper);--surface:var(--paper);--raised:var(--paper);
  --text:var(--paper-ink);--text-2:var(--paper-ink-2);--muted:var(--paper-muted);--label:var(--paper-muted);
  --gold:var(--paper-ink);--gold-2:var(--paper-ink);--gold-mute:var(--paper-muted)}
.page-dossier .paper h1,.page-dossier .paper h2,.page-dossier .paper h3{color:var(--paper-ink)}
.page-dossier .paper a:not(.btn){color:var(--paper-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* 390 IS THE FIRST DESIGN, NOT A COLLAPSE. On a phone a dossier is a title,
   a contents list, then one bordered entry per clause — an OBJECT a thumb
   can land on, which is also what the structure gate counts at 380. At 760
   the same entries become ruled rows with the number in the gutter; that is
   a second design, and the two are written separately below. */
.page-dossier .paper .dtitle{padding:38px 0 24px;border-bottom:1px solid var(--rule)}
.page-dossier .paper .dtitle .h1{margin:0;text-align:left;white-space:normal}
.page-dossier .paper .dmeta{margin:14px 0 0;font:500 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)}
.page-dossier .paper .dacts{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;max-width:none}
.page-dossier .paper .dtoc{margin:26px 0 0;padding:20px 18px;border:1px solid var(--rule)}
.page-dossier .paper .dtoc-h{margin:0 0 13px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-muted)}
.page-dossier .paper .dtoc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.page-dossier .paper .dtoc a{display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.35;text-decoration:none;color:var(--paper-ink)}
.page-dossier .paper .dtoc a:hover span{text-decoration:underline}
.page-dossier .paper .dtoc a b{flex:none;min-width:16px;font:500 12px/1.5 var(--mono);color:var(--paper-muted)}
.page-dossier .paper .dsec{padding:36px 0 0}
.page-dossier .paper .dsec>.h2{display:flex;gap:13px;align-items:baseline;margin:0;font-size:clamp(26px,6.4vw,34px);line-height:1.14}
.page-dossier .paper .dsec>.h2 .dn{flex:none;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--paper-muted)}
.page-dossier .paper .dsec>.lede,.page-dossier .paper .dsec>.body{margin-top:14px;max-width:72ch;text-align:left}
.page-dossier .paper .dnote{margin:16px 0 0;font:500 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted)}
.page-dossier .paper .drows{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.page-dossier .paper .drow{border:1px solid var(--rule);padding:16px;min-width:0}
.page-dossier .paper .dno{margin:0 0 10px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--paper-muted)}
.page-dossier .paper .drow .lbl{display:block;margin-bottom:8px}
.page-dossier .paper .drow .h3{font-size:17px;margin-bottom:8px}
.page-dossier .paper .drow .body{font-size:15px}
.page-dossier .paper .drow .body+.body,.page-dossier .paper .dsec>.body+.body{margin-top:9px}
.page-dossier .paper .drow .row{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.page-dossier .paper .dclose{padding-bottom:52px}
.page-dossier .paper .dclose .row{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.page-dossier .paper .mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.01em}
@media (min-width:760px){
  .page-dossier .paper .dgrid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
  .page-dossier .paper .dtitle{padding:56px 0 30px}
  .page-dossier .paper .dtoc{position:sticky;top:96px;margin:52px 0 0;padding:0 0 0 18px;border:0;border-left:1px solid var(--rule)}
  .page-dossier .paper .dsec{padding:52px 0 0}
  .page-dossier .paper .drows{margin-top:26px;gap:0;border-top:1px solid var(--rule)}
  .page-dossier .paper .drow{display:grid;grid-template-columns:76px minmax(0,1fr);gap:26px;border:0;border-bottom:1px solid var(--rule);padding:22px 0}
  .page-dossier .paper .dno{margin:0;padding-top:4px}
  .page-dossier .paper .dclose{padding-bottom:76px}
}

/* ── security.html — THE DOSSIER, SECOND READER (body.page-dossier) ──────
   security.html takes the same shape as enterprise.html above and adds
   nothing to the grammar; only the two things this page's own content needs
   are written here, so the shape stays ONE definition and not two.
   ⚠ This page carries its own <style> block from an earlier pass, and two of
   its rules reach into the dossier: `p{max-width:72ch}` (harmless — the
   reading measure is the same value the dossier wants) and an `a` colour in a
   light-on-dark ink, which the .paper link rule above outranks. Neither is
   edited here: they are correct outside .paper, where the nav and footer are.
   1 · the source field list in 1.1–1.6 is scanned, not read, so it keeps the
       mono measure and may not be broken mid-token by the prose ceiling;
   2 · a section that ends on an action link (3 · How the engine decides)
       needs the note and the link separated, or they read as one line. */
.page-dossier .paper .drow .body.mono{max-width:none;word-break:normal;overflow-wrap:anywhere}
.page-dossier .paper .dnote+.dacts{margin-top:12px}

/* ── THE BOOK CLOCK · index §5 (id="cohort", panel id="book") ──────────────
   The panel is a clock, not a chart: six lifecycle columns, a day counter, a
   canvas field of ticks, and a three-row ledger at the right edge. The panel
   chrome (border, header row, the two .k labels) is the shared .panel above —
   nothing here touches it. The field is a <canvas>, so the only DOM text is
   the six column labels, the three ledger words and "Day N".
   ⚠ The column labels are DOM, not canvas text, on purpose: canvas text paints
   in a fallback face until the webfont resolves, and the label row is the one
   place the site mono has to be the site mono.
   ⚠ Phone (≤700px) compresses rather than scrolls: the six bands keep their
   order and get uneven widths so the two widest words (drifting, dorm·lost)
   fit at 11.5px without a horizontal scroller. The weights are written by the
   script into grid-template-columns and the canvas maps x with the same
   array — ONE table, two consumers, or the labels lie about the field. */
.book .panel-head{gap:12px}.book .panel-head .k{white-space:nowrap}
.book .panel-body{display:block;padding:18px 20px 20px}
.clk-day{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);font-variant-numeric:tabular-nums;margin:0 0 12px}
.clk{display:grid;grid-template-columns:1fr 108px;gap:20px;align-items:stretch}
.clk-field{min-width:0}
.clk-cols{display:grid;margin-bottom:7px}
.clk-cols span{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:clip}
.clk-cv{display:block;width:100%;height:216px}
.clk-led{display:grid;align-content:start;gap:14px;border-left:1px solid var(--rule);padding-left:16px}
.clk-led b{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.clk-led i{display:block;margin-top:5px;font:500 18px/1 var(--mono);font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .book .panel-body{padding:16px 16px 18px}
  .clk{grid-template-columns:1fr;gap:14px}
  .clk-cv{height:150px}
  .clk-led{display:flex;justify-content:space-between;gap:10px;border-left:0;padding-left:0}
  .clk-led i{font-size:15px;margin-top:4px}
}

/* END PAGE SHAPES */