/* 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. */
: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:'IBM Plex 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(--fire);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}
}