/* ============================================================
   COMMONBENCH — engine chrome (shared)
   Tokens, reset, atmosphere, type primitives, preloader, cursor, rail.
   Linked from every Engine-of-Authority marketing page. Do not copy
   these rules back into public/*.html. Eyebrow tracking (.k / .navsec)
   lives here — do not bump letter-spacing toward ~.26em.
   ============================================================ */

/* ============================================================
   COMMONBENCH — THE ENGINE OF AUTHORITY
   obsidian · engraved gold · one vermillion instrument light
   ============================================================ */
:root{
  --bg:#0A0E14; --bg2:#0D1219; --panel:#101722; --panel2:#141C29;
  --line:rgba(232,228,217,.09); --line2:rgba(232,228,217,.17);
  --ivory:#EDE8DC; --txt:#A7ADB9; --mute:#6A7280;
  --gold:#C5A157; --goldB:#E3C385; --goldD:rgba(197,161,87,.34); --goldF:rgba(197,161,87,.1);
  --verm:#C2543F;
  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'Spline Sans Mono','SF Mono',Menlo,monospace;
  --max:1440px; --gut:clamp(24px,5vw,84px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:auto;scrollbar-color:#C5A157 #0A0E14;scroll-padding-top:78px;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-y:scroll}
html::-webkit-scrollbar{width:12px}
html::-webkit-scrollbar-track{background:#0A0E14}
html::-webkit-scrollbar-thumb{background:#C5A157;border:2px solid #0A0E14;border-radius:8px}
html::-webkit-scrollbar-thumb:hover{background:#E3C385}
html.rm{scroll-behavior:auto}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--body); font-size:16px; line-height:1.66; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
  caret-color:var(--goldB);
}
body.nav-open{overflow:hidden}
@media(max-width:900px){html{scroll-padding-top:68px}}
::selection{background:rgba(197,161,87,.28);color:var(--ivory)}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
img,canvas,svg{display:block;max-width:100%}

/* smooth-scroll chassis: body holds height, #world is transformed */
body.js-smooth{position:relative}
#world{will-change:transform}
body.js-smooth #world{position:fixed;inset:0 0 auto 0;width:100%}

/* film grain + vignette atmosphere */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:4000}
.atmo::before{content:"";position:absolute;inset:-60%;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.atmo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 8%,transparent 70%,rgba(4,6,10,.32) 100%)}
@media (hover:none), (pointer:coarse){.atmo::before{display:none}}
@media (prefers-reduced-motion:reduce){.atmo::before{display:none}}

/* typographic primitives */
.k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;word-spacing:-.06em;text-transform:uppercase;color:var(--mute)}
.k b{color:var(--gold);font-weight:600}
.h-d{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;line-height:.96;color:var(--ivory)}
.h-d em,.gild{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--goldB);letter-spacing:-.01em;line-height:.9}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sub{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.72;max-width:54ch;color:var(--txt)}

/* word-mask reveal (JS splits [data-words]) */
.wline{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.wline>span{display:inline-block;transform:translateY(118%) rotate(.6deg);transition:transform 1.05s var(--ease)}
.on .wline>span,.in .wline>span{transform:none}
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:9000;background:var(--bg);display:grid;place-items:center;transition:clip-path .9s var(--ease)}
#pre.bye{clip-path:inset(0 0 100% 0)}
#pre .box{text-align:center}
#pre .n{font-family:var(--disp);font-weight:500;font-size:clamp(54px,8vw,96px);color:var(--ivory);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
#pre .n i{font-family:var(--serif);font-style:italic;color:var(--goldB);font-size:.55em;vertical-align:.22em;margin-left:.06em}
#pre .k{margin-top:18px;display:block}
#pre .bar{width:200px;height:1px;background:var(--line);margin:26px auto 0;position:relative;overflow:hidden}
#pre .bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ---------- custom cursor ---------- */
#cur,#curR{position:fixed;top:0;left:0;pointer-events:none;z-index:9500;mix-blend-mode:normal}
#cur{width:6px;height:6px;border-radius:50%;background:var(--goldB);transform:translate(-50%,-50%)}
#curR{width:34px;height:34px;border-radius:50%;border:1px solid rgba(227,195,133,.5);transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),border-color .35s,background .35s}
#curR.big{width:62px;height:62px;border-color:rgba(227,195,133,.9);background:rgba(197,161,87,.08)}
#cur,#curR{display:none!important}
@media (hover:none){#cur,#curR{display:none}}

/* ---------- page progress + rail ---------- */
#pgbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:8000;background:rgba(197,161,87,.22)}
#pgbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--goldB));transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(227,195,133,.55)}
#rail{position:fixed;left:calc(var(--gut)*.42);top:0;bottom:0;width:1px;background:var(--line);z-index:300}
#rail .node{position:absolute;left:-3px;top:20%;width:7px;height:7px;border-radius:50%;background:var(--goldB);box-shadow:0 0 14px rgba(227,195,133,.8)}
#rail .lbl{position:absolute;left:-5px;bottom:34px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap;background:var(--bg);padding:14px 0}
#rail .lbl b{color:var(--gold);font-weight:500}
@media(max-width:1100px){#rail{display:none}}

/* Pin-track budget. Page-local copies used to set #hero 172vh / #method 260vh /
   #coda 150vh — extra viewport-heights of empty sticky scroll after the
   content was already on screen. Heights live here; do not re-declare them
   in public/*.html (same-specificity page CSS wins the cascade). */
#hero{height:100vh}
#method{height:160vh}
#coda{height:auto}
#coda .pin{position:relative;height:auto;overflow:visible;padding:clamp(56px,8vh,96px) 0}
#coda h2{line-height:1.12}

/* ---------- shared nav primitives (this sheet owns the header row) ---------- */
/* display + height MUST live here. A later page-local `.nav{display:flex}` or
   `.top .wrap{height:78px}` / `.top .wrap{display:flex}` has the same specificity
   and wins the cascade, so the ≤900px hide/68px rules never apply — desktop
   links cram the phone header (PR #660 leftover). Do not re-declare
   display/height/justify in public/*.html. */
.top{position:fixed;top:0;left:0;right:0;z-index:7000;transition:background .5s,border-color .5s,backdrop-filter .5s;background:rgba(10,14,20,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(197,161,87,.28)}
.top.scr{background:rgba(10,14,20,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(197,161,87,.4)}
.top .wrap{display:flex;align-items:center;justify-content:flex-start;gap:36px;max-width:none;height:78px}
@media(max-width:1280px){.top .wrap{gap:20px}}
.nav{display:flex;gap:38px}
/* Sign in sits in the header now — close the 38px gutters before the pack wraps. */
@media(max-width:1280px){.nav{gap:20px}}
@media(max-width:1100px){.nav{gap:14px}}
.wordmark{font-family:'Spectral',Georgia,serif;font-weight:500;font-size:25px;letter-spacing:0;color:var(--ivory);display:flex;align-items:baseline}
.wordmark .bench-gold{color:var(--goldB)}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--goldB);transition:width .45s var(--ease)}
.nav a:hover{color:var(--ivory)}.nav a:hover::after{width:100%}
.nav a[aria-current]{color:var(--ivory)}
.nav a[aria-current]::after{width:100%}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--disp);font-weight:500;font-size:14.5px;letter-spacing:.01em;color:var(--bg);background:var(--goldB);border:1px solid var(--goldB);border-radius:999px;padding:13px 26px;min-height:44px;overflow:hidden;isolation:isolate;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 28px -12px rgba(197,161,87,.5);transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:var(--ivory);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 16px 36px -12px rgba(197,161,87,.58)}
.btn:hover::after{transform:none}
.btn:active{transform:none}
.btn .ar{transition:transform .4s var(--ease)}.btn:hover .ar{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:rgba(232,228,217,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn.ghost::after{background:var(--goldB)}
.btn.ghost:hover{color:var(--bg);border-color:var(--goldB);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 36px -12px rgba(197,161,87,.4)}
.btn:disabled,.btn[aria-busy="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn:disabled::after,.btn[aria-busy="true"]::after{transform:translateY(101%)}
.top .btn{padding:11px 22px;font-size:13.5px}
.navsec{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;min-width:0;text-align:right;white-space:nowrap;transition:opacity .18s var(--ease)}
@media (prefers-reduced-motion:reduce){.navsec{transition:none}}
.navsec b{color:var(--gold);font-weight:500}
@media(max-width:1180px){.navsec{display:none}}
@media(max-width:900px){.nav{display:none}.top .wrap{height:68px}}
.burger{display:none;width:44px;height:44px;flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;margin-left:8px;z-index:10060;-webkit-tap-highlight-color:transparent}
/* space-between used to park the burger on the right gutter. This sheet now
   owns flex-start, so the last visible header control must take leftover.
   When Sound/Prologue are present they already have margin-left:auto — keep
   the burger 8px after that pack so leftover does not split again. */
.top .wrap > .burger{margin-left:auto}
.top .wrap > .nav-aux ~ .burger{margin-left:8px}
.burger span{display:block;width:21px;height:1.5px;background:var(--ivory);transition:transform .45s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
/* Above #cookieBanner (z-index:9999). At 7050 the banner ate Sign in taps. */
.mmenu{position:fixed;inset:0;z-index:10050;background:rgba(10,14,20,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s;box-shadow:inset 0 3px 0 var(--gold)}
.mmenu.open{opacity:1;visibility:visible}
.mmnav{display:flex;flex-direction:column;gap:4px;text-align:center;padding:0 var(--gut)}
.mmnav a{font-family:var(--disp);font-weight:500;font-size:clamp(34px,8.5vw,54px);letter-spacing:-.03em;color:var(--ivory);padding:9px 0;opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s}
.mmenu.open .mmnav a{opacity:1;transform:none}
.mmnav a:nth-child(1){transition-delay:.10s}.mmnav a:nth-child(2){transition-delay:.16s}.mmnav a:nth-child(3){transition-delay:.22s}.mmnav a:nth-child(4){transition-delay:.28s}.mmnav a:nth-child(5){transition-delay:.34s}
.mmnav a:hover{color:var(--goldB)}
.mmnav a[aria-current]{color:var(--goldB)}
.mmnav .mmcta{font-family:var(--serif);font-style:italic;color:var(--goldB);margin-top:18px;font-size:clamp(28px,6.5vw,42px)}
.mmeta{margin-top:40px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:var(--mute);text-transform:uppercase;opacity:0;transition:opacity .6s .42s}
.mmenu.open .mmeta{opacity:1}
@media(max-width:900px){.burger{display:flex}}
@media(max-width:560px){.top .btn{display:none}}
@media(min-width:901px){.mmenu{display:none!important}.burger{display:none!important}}

/* ---------- shared footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;overflow:clip}
.f-main{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:clamp(22px,3vw,42px);padding:clamp(52px,6vw,80px) 0 clamp(40px,5vw,60px);position:relative;z-index:2}
.f-brand .wordmark{font-size:27px}
.f-brand p{margin-top:15px;font-size:14px;color:var(--mute);max-width:30ch;line-height:1.7}
.f-col .k{display:block;margin-bottom:16px;color:var(--gold)}
.f-col a{display:block;font-size:14px;color:var(--txt);padding:5px 0;transition:color .3s,transform .3s var(--ease)}
.f-col a:hover{color:var(--ivory);transform:translateX(4px)}
.f-legal{border-top:1px solid var(--line);padding:24px 0 30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;position:relative;z-index:2}
.f-legal .k{font-size:9.5px;letter-spacing:.12em;word-spacing:-.06em}
.f-legal .k i{font-style:normal;color:rgba(227,195,133,.7)}
.f-ghost{position:relative;height:clamp(90px,12vw,180px);overflow:clip}
.f-ghost span{position:absolute;left:50%;bottom:-0.28em;transform:translateX(-50%);font-family:var(--disp);font-weight:700;font-size:clamp(130px,17.5vw,260px);letter-spacing:-.05em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(232,228,217,.1);user-select:none;pointer-events:none}
.f-ghost span em{font-weight:700;color:var(--goldB);-webkit-text-stroke:0}
@media(max-width:960px){.f-main{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.f-main{grid-template-columns:1fr 1fr}}
@media(pointer:coarse){
  .f-col a{padding:10px 0;min-height:44px;display:flex;align-items:center}
  .qa summary{min-height:44px}
}

/* Skip link — first focusable control on Engine-of-Authority pages. */
.skip-link{
  position:absolute;left:var(--gut);top:8px;z-index:9100;
  transform:translateY(-180%);
  background:var(--goldB);color:var(--bg);
  padding:10px 16px;border-radius:0 0 8px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:2px solid var(--gold);outline-offset:4px}

/* Compact header Sign in — desktop only; the burger menu already carries Sign in. */
.top-login{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--goldB);padding:8px 0;margin-left:auto;flex-shrink:0;white-space:nowrap;
  border-bottom:1px solid transparent;min-height:44px;display:inline-flex;align-items:center;
}
.top-login:hover{color:var(--ivory);border-bottom-color:var(--goldB)}
.nav-aux{display:flex;align-items:center;gap:20px;margin-left:auto;flex-shrink:0}
.top .wrap > .navsec{margin-left:auto}
.top .wrap > .navsec + .top-login{margin-left:12px}
.top .wrap > .nav-aux + .top-login { margin-left: 20px }
@media(max-width:900px){.top-login{display:none}}
/* Cookie banner is a body sibling (not inside #world), so inert on #world
   cannot hide it. Park it while the overlay owns the viewport. */
body.nav-open #cookieBanner{visibility:hidden;pointer-events:none}

/* Cookie bar is position:fixed. A 100vh hero + ticker would sit under it.
   The consent script publishes --cb-banner-h while the bar is up. */
html.has-cookie-banner #hero,
html.has-cookie-banner #hero .pin{
  height:calc(100vh - var(--cb-banner-h, 0px));
}
@media (prefers-reduced-motion:reduce){
  .scrollcue .ln i{animation:none}
  .ticker .lane{animation:none}
  .btn:hover,.btn.ghost:hover{transform:none}
}

/* Legal TOC: shared current-mark + thumb targets. Page-local copies
   keep the accordion chrome; this sheet wins the active/hit-area contract. */
.legal-toc{scrollbar-width:thin;scrollbar-color:rgba(197,161,87,.45) transparent}
aside.legal-toc a.active{
  color:var(--ivory);
  border-left-color:var(--goldB);
  background:rgba(197,161,87,.12);
}
@media(pointer:coarse){
  aside.legal-toc a{min-height:44px;align-items:center}
}

/* Forms: 16px prevents iOS zoom; focus ring survives page-local outline:none. */
input.fin,select.fin,textarea.fin{
  font-size:16px;min-height:44px;caret-color:var(--goldB);
  background:rgba(10,14,20,.62);color:var(--ivory);
  border:1px solid rgba(197,161,87,.28);border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
input.fin:focus-visible,select.fin:focus-visible,textarea.fin:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-color:var(--goldB);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 3px rgba(197,161,87,.2);
}
input.fin[aria-invalid="true"],select.fin[aria-invalid="true"]{border-color:var(--verm)}

/* Pricing / homepage tier plates — engraved metal, not flat cards. */
.tier{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 70px -40px rgba(0,0,0,.85);
}
.tier.feat,.tier.featured{
  box-shadow:inset 0 1px 0 rgba(227,195,133,.16),0 0 0 1px rgba(197,161,87,.2),0 32px 80px -36px rgba(197,161,87,.25);
}

/* FAQ answers were padded 50–56px — on a 320px phone that left ~190px of measure. */
@media(max-width:960px){
  .qa details .ans{padding:0 4px 24px 36px}
  .qa summary{gap:12px}
}

/* Wide comparison tables: keep a visible scroll gutter, don't clip silently. */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-color:rgba(197,161,87,.45) transparent}

/* Secondary text CTAs inherit the same thumb target as .btn on phones. */
@media(pointer:coarse){
  .tlink{min-height:44px;display:inline-flex;align-items:center}
}

/* Mobile menu rows must be thumb-sized even when the display type is large. */
.mmnav a{min-height:44px;display:flex;align-items:center;justify-content:center}

/* Cohort capture — compact email + jurisdiction, above the footer.
   Public offer while access is not open. Engine metal only. */
.cohort{border-top:1px solid var(--line);padding:52px 0 8px}
.cohort-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:28px 48px;align-items:end}
.cohort-copy h2{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:400;letter-spacing:-.02em;margin:10px 0;color:var(--ivory)}
.cohort-copy p{color:var(--txt);font-size:14.5px;line-height:1.55;max-width:46ch}
.cohort-copy a{color:var(--gold)}
.cohort-form{display:grid;grid-template-columns:1fr 168px auto;gap:10px;align-items:start}
.cohort-form input[type="email"],.cohort-form select{
  background:rgba(10,14,20,.62);border:1px solid rgba(197,161,87,.28);color:var(--ivory);
  font:inherit;font-size:16px;padding:11px 12px;border-radius:3px;width:100%;min-height:44px;
}
.cohort-form button{
  background:var(--gold);color:var(--bg);border:0;font:600 12px/1 var(--body);
  letter-spacing:.04em;text-transform:uppercase;padding:12px 16px;cursor:pointer;
  white-space:nowrap;min-height:44px;
}
.cohort-status{grid-column:1/-1;font-size:13px;color:var(--txt);min-height:1.2em;margin:0}
.cohort-status[data-state="ok"]{color:var(--goldB)}
.cohort-status[data-state="err"]{color:var(--verm)}
.coda-cohort{margin-top:18px;font-size:13.5px;color:var(--txt)}
.coda-cohort a{color:var(--gold)}
@media(max-width:820px){
  .cohort-inner{grid-template-columns:1fr}
  .cohort-form{grid-template-columns:1fr}
}