/* The Content Engine: ONE brand layer for every page. Source of truth for tokens, shared header, focus, buttons.
   Linked LAST in <head> of every built page by build-header.mjs (cache-busted), so it wins the cascade.
   Tokens come from the v2 landing page (lime signal on near-black, Big Shoulders / Instrument Sans / Instrument Serif / JetBrains Mono).
   Sections: 1 tokens, 2 base, 3 shared header, 4 shared components, 5 legacy re-skin (body.ce-legacy: /faceless /fitness /smm /legal/*). */

/* 1. tokens */
:root{
  --ce-ink:#0a0a0b; --ce-ink-2:#111113; --ce-card:#161618; --ce-line:#2a2a2e;
  --ce-paper:#f2ede4; --ce-mute:#9a968d; --ce-sig:#d7ff3a; --ce-hot:#ff4d2e; --ce-ok:#4cd964;
  --ce-disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --ce-serif:"Instrument Serif",Georgia,serif;
  --ce-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ce-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ce-radius:18px; --ce-pill:999px; --ce-ease:cubic-bezier(.2,.8,.2,1);
  --ce-hdr-h:64px; --ce-wrap:1180px;
  --ce-fs-body:17px; --ce-fs-lede:clamp(18px,2vw,22px);
  --ce-fs-h1:clamp(46px,8vw,104px); --ce-fs-h2:clamp(34px,5vw,60px); --ce-fs-h3:clamp(22px,2.4vw,28px);
  color-scheme:dark;
}

/* 2. base: one focus style, scroll offset for the sticky header */
html{scroll-padding-top:84px}
:focus-visible{outline:3px solid var(--ce-sig);outline-offset:3px;border-radius:3px}
.ce-hdr :focus-visible{border-radius:999px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* 3. shared header (markup injected by build-header.mjs; every selector is ce- prefixed or scoped under .ce-hdr) */
.ce-hdr{position:sticky;top:0;left:auto;right:auto;z-index:60;display:block;background:rgba(10,10,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ce-line);font:400 15px/1.4 var(--ce-body);text-align:left;color:var(--ce-paper)}
.ce-hdr *{box-sizing:border-box}
.ce-hdr-in{width:min(var(--ce-wrap),100% - 32px);margin-inline:auto;display:flex;align-items:center;gap:8px;height:var(--ce-hdr-h)}
.ce-logo{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--ce-paper);font:900 22px/1 var(--ce-disp);letter-spacing:.04em;text-transform:uppercase;min-height:44px}
.ce-logo i{width:26px;height:26px;background:var(--ce-sig);display:block;clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
/* reset anything a page stylesheet says about bare nav / details / summary / .wrap inside the header */
.ce-hdr nav{position:static;inset:auto;display:flex;align-items:center;gap:2px;margin:0 0 0 auto;padding:0;height:auto;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
.ce-hdr nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;text-decoration:none;font:500 15px/1 var(--ce-body);color:var(--ce-mute);white-space:nowrap;transition:color .2s}
.ce-hdr nav a:hover,.ce-hdr nav a[aria-current=page]{color:var(--ce-paper)}
.ce-hdr nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--ce-sig);border-radius:0}
.ce-hdr .ce-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 20px;margin-left:8px;border-radius:999px;background:var(--ce-sig);color:#0a0a0b;font:600 15px/1 var(--ce-body);text-decoration:none;white-space:nowrap;border:0;transition:transform .25s var(--ce-ease),box-shadow .25s var(--ce-ease)}
.ce-hdr .ce-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(215,255,58,.55);color:#0a0a0b}
.ce-hdr details.ce-mm{display:none;position:relative;border:0;padding:0;margin:0;flex:none}
.ce-hdr .ce-mm summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--ce-line);border-radius:999px;font:600 13px/1 var(--ce-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ce-paper);gap:0;justify-content:flex-start}
.ce-hdr .ce-mm summary::-webkit-details-marker{display:none}
.ce-hdr .ce-mm summary::after{content:none}
.ce-hdr .ce-mm[open] summary{border-color:var(--ce-sig)}
.ce-hdr .ce-mm nav.ce-panel{position:absolute;right:0;top:54px;width:min(300px,calc(100vw - 32px));margin:0;display:grid;gap:0;background:var(--ce-card);border:1px solid var(--ce-line);border-radius:16px;padding:8px}
.ce-hdr .ce-mm nav.ce-panel a{min-height:46px;padding:0 14px;border-radius:10px;color:var(--ce-paper);box-shadow:none}
.ce-hdr .ce-mm nav.ce-panel a:hover,.ce-hdr .ce-mm nav.ce-panel a[aria-current=page]{background:var(--ce-ink-2);color:var(--ce-sig)}
@media (max-width:900px){
  .ce-hdr nav.ce-nav{display:none}
  .ce-hdr .ce-btn{margin-left:auto}
  .ce-hdr details.ce-mm{display:block}
}
@media (max-width:380px){.ce-logo{font-size:19px}.ce-hdr .ce-btn{padding:0 14px}}
body:has(.ce-hdr) .skip{z-index:200}

/* 4. shared components (available to any page; legacy pages get them via section 5) */
.ce-btn-primary{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--ce-sig);color:#0a0a0b;font:600 16px/1.1 var(--ce-body);text-decoration:none}

/* 5. legacy re-skin: /faceless /fitness /smm /legal/*  (their own CSS reads --bg --card --line --text --muted --accent --hot --ok;
   we remap those variables to the brand tokens, then fix the hard-coded purple/yellow/brown and the Archivo/Inter type) */
body.ce-legacy{
  --bg:var(--ce-ink); --bg-2:var(--ce-ink-2); --card:var(--ce-card); --line:var(--ce-line);
  --text:var(--ce-paper); --muted:var(--ce-mute); --accent:var(--ce-sig); --hot:var(--ce-hot); --ok:var(--ce-ok);
  --radius:var(--ce-radius);
  background:var(--ce-ink); color:var(--ce-paper); font-family:var(--ce-body); font-size:var(--ce-fs-body);
}
body.ce-legacy h1,body.ce-legacy h2,body.ce-legacy h3{font-family:var(--ce-disp);font-weight:900;text-transform:uppercase;letter-spacing:-.005em;line-height:.92}
body.ce-legacy h1{font-size:var(--ce-fs-h1)}
body.ce-legacy h2{font-size:var(--ce-fs-h2)}
body.ce-legacy h3{font-size:var(--ce-fs-h3);line-height:1}
body.ce-legacy main h1{margin-bottom:14px}
body.ce-legacy .two-tone em{font-family:var(--ce-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ce-sig)}
body.ce-legacy .mono,body.ce-legacy .tab,body.ce-legacy .wall-cap span{font-family:var(--ce-mono)}
body.ce-legacy .tab{font:600 13px/1 var(--ce-mono);letter-spacing:.06em;text-transform:uppercase}
body.ce-legacy .wall-cap span{font:500 14px/1.4 var(--ce-body)}
body.ce-legacy .num,body.ce-legacy .price-big,body.ce-legacy .research-note .big,body.ce-legacy .wall-cap div{font-family:var(--ce-disp);font-weight:900;text-transform:uppercase}
body.ce-legacy .price-big{font-size:clamp(84px,13vw,160px)}
body.ce-legacy .num{font-size:30px}
body.ce-legacy .research-note .big,body.ce-legacy .wall-cap div{font-size:46px}
body.ce-legacy .hand{font-family:var(--ce-serif);font-style:italic;font-weight:400;font-size:28px;color:var(--ce-sig)}
body.ce-legacy .kicker,body.ce-legacy .eyebrow{font-family:var(--ce-mono);font-weight:600;letter-spacing:.14em}
body.ce-legacy .kicker{color:var(--ce-sig)}
body.ce-legacy .topbar{background:var(--ce-sig);color:#0a0a0b;font-weight:600}
/* buttons: same pill + lime as the landing page */
body.ce-legacy .btn{font-family:var(--ce-body);font-weight:600;border-radius:999px}
body.ce-legacy .btn-primary{background:var(--ce-sig);color:#0a0a0b;box-shadow:none}
body.ce-legacy .btn-primary:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 18px 40px -12px rgba(215,255,58,.55)}
body.ce-legacy .btn-ghost{border-color:var(--ce-line);color:var(--ce-paper)}
body.ce-legacy .btn-ghost:hover{border-color:var(--ce-paper)}
/* cards, panels and highlights: warm brown / purple tints become neutral ink + lime hairlines */
body.ce-legacy .node.out,body.ce-legacy .vs-col.us{background:linear-gradient(180deg,#171a0c,var(--ce-ink-2));border-color:rgba(215,255,58,.45)}
body.ce-legacy tr.us td{background:rgba(215,255,58,.06)}
body.ce-legacy .console{background:var(--ce-ink-2)}
body.ce-legacy .console-bar{background:var(--ce-card)}
body.ce-legacy .grid12 .i{background:#3a3a40}
body.ce-legacy .console-bar i{background:#3a3a40}
body.ce-legacy .card .ico{font-family:var(--ce-mono);font-size:13px;font-weight:600;color:#0a0a0b;background:var(--ce-sig);border-radius:12px;box-shadow:none}
body.ce-legacy .phone{box-shadow:0 0 0 2px var(--ce-line),0 40px 90px -30px rgba(215,255,58,.28)}
body.ce-legacy .hero::before{background:radial-gradient(circle,rgba(255,77,46,.16),transparent 62%)}
body.ce-legacy .sticky{background:rgba(22,22,24,.92)}
body.ce-legacy .node:not(:last-child)::after{border-top-color:var(--ce-hot)}
body.ce-legacy .tab[aria-selected="true"]{background:var(--ce-sig);color:#0a0a0b;border-color:var(--ce-sig)}
body.ce-legacy .draft{border-color:var(--ce-hot);background:rgba(255,77,46,.08)}
body.ce-legacy a{text-underline-offset:3px}
/* legal pages (narrow reading column) */
body.ce-legacy main h1{font-size:clamp(46px,7vw,84px)}
body.ce-legacy main h2{font-size:clamp(28px,3.4vw,38px);margin:40px 0 10px}
body.ce-legacy .wrap main,body.ce-legacy main .wrap{width:min(760px,100% - 32px)}
@media (max-width:900px){body.ce-legacy h1{font-size:clamp(46px,13vw,72px)}body.ce-legacy h2{font-size:clamp(34px,10vw,52px)}}
body.ce-legacy .hero h1{font-size:clamp(46px,6.4vw,92px)}
body.ce-legacy .two-tone em{font-size:.9em;line-height:1}
body.ce-legacy section h2{font-size:clamp(38px,5.2vw,72px)}