/* ============================ TOKENS ============================ */
[data-mode="dark"]{
  --bg:#0A0B0D; --surface:#15161A; --surface-2:#1C1E22; --surface-3:#24262B;
  --border:rgba(255,255,255,.09); --text:#ECEDEF; --muted:rgba(236,237,239,.55); --dim:rgba(236,237,239,.40);
  --page-glow:radial-gradient(1200px 760px at 78% 92%, rgba(255,255,255,.055), transparent 60%),
              radial-gradient(960px 640px at 22% -6%, rgba(255,255,255,.04), transparent 55%);
  --h1-grad:linear-gradient(100deg,#9aa0a8 0%,#e9ecef 13%,#ffffff 25%,#c0c4cb 39%,#f3f5f7 51%,#ffffff 63%,#c7cbd2 77%,#aab0b8 90%,#eceef1 100%); --h1-shadow:0 4px 26px rgba(0,0,0,.55);
}
[data-mode="light"]{
  --bg:#FAFAF9; --surface:#FFFFFF; --surface-2:#F4F4F3; --surface-3:#ECECEA;
  --border:rgba(0,0,0,.09); --text:#0A0A0B; --muted:rgba(10,10,11,.55); --dim:rgba(10,10,11,.40);
  --page-glow:radial-gradient(1100px 700px at 80% 92%, rgba(0,0,0,.02), transparent 60%);
  --h1-grad:linear-gradient(100deg,#2a2a31 0%,#5a5a64 14%,#1b1b21 27%,#46464f 41%,#75757f 53%,#26262d 66%,#54545e 80%,#1e1e24 93%,#3a3a42 100%); --h1-shadow:0 1px 2px rgba(0,0,0,.14);
}
[data-mode="dark"][data-theme="mono"]  { --accent:#FAFAFA; --accent-2:#B7B8BD; --glow:rgba(255,255,255,.16); --ink-on-accent:#0A0A0B; }
[data-mode="dark"][data-theme="green"] { --accent:#C6FF3F; --accent-2:#7FE000; --glow:rgba(198,255,63,.22); --ink-on-accent:#0A0D05; }
[data-mode="dark"][data-theme="blue"]  { --accent:#4FC3FF; --accent-2:#1E9BE0; --glow:rgba(79,195,255,.20); --ink-on-accent:#04121C; }
[data-mode="dark"][data-theme="yellow"]{ --accent:#C9A227; --accent-2:#E8BF4A; --glow:rgba(201,162,39,.20); --ink-on-accent:#0B0B0B; }
[data-mode="light"][data-theme="mono"]  { --accent:#0A0A0B; --accent-2:#3A3A3E; --glow:rgba(0,0,0,.07); --ink-on-accent:#FFFFFF; }
[data-mode="light"][data-theme="green"] { --accent:#4FB400; --accent-2:#3B8C00; --glow:rgba(79,180,0,.18); --ink-on-accent:#FFFFFF; }
[data-mode="light"][data-theme="blue"]  { --accent:#0E83C9; --accent-2:#0A6AA3; --glow:rgba(14,131,201,.16); --ink-on-accent:#FFFFFF; }
[data-mode="light"][data-theme="yellow"]{ --accent:#9A7A12; --accent-2:#7D6310; --glow:rgba(154,122,18,.16); --ink-on-accent:#FFFFFF; }

:root{ --max:1040px; --nav-h:64px; --radius:14px; --radius-lg:22px;
  --frame-w:min(1496px, calc(100vw - clamp(36px,10vw,136px)));
  --frame-inset:calc((100vw - var(--frame-w)) / 2);
  --sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:Georgia, 'Times New Roman', Times, serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', monospace; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-padding-top:170px; background:var(--bg); -webkit-text-size-adjust:100%; overflow-x:clip; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{ background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip; font-size:15px; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--page-glow); background-attachment:fixed; }
::selection{ background:var(--accent); color:var(--ink-on-accent); }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(22px,6vw,40px); }

.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:9px; }
.kicker::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--glow); }

/* clean sans headings, two-tone */
h1,h2,h3{ font-family:var(--sans); }
.dim{ color:var(--muted); -webkit-text-fill-color:var(--muted); }
.grad{ background:var(--h1-grad); background-size:100% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent; filter:drop-shadow(var(--h1-shadow)); }
/* hero headline: slow liquid-platinum sheen glide (luxury, restrained) */
.hero h1.grad{ background-size:220% 100%; animation:sheen 12s ease-in-out infinite; }
@keyframes sheen{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* ============================ NAV ============================ */
.nav{ position:fixed; top:18px; left:0; right:0; z-index:60;
  display:flex; justify-content:center; padding-inline:clamp(10px,2vw,18px); }
.nav-inner{ width:min(1480px, 100%); height:60px; padding:0 16px 0 26px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 75%, transparent),
    color-mix(in srgb, var(--bg) 75%, transparent));
  backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 14px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .3s, box-shadow .3s, background .25s, backdrop-filter .25s; }
.nav-inner::before,.nav-inner::after{ display:none; }
.nav.scrolled .nav-inner{ border-color:color-mix(in srgb,var(--text) 16%,transparent); }
.nav-inner .brand{ justify-self:start; }
.nav-inner .nav-center{ justify-self:center; }
.nav-inner .nav-right{ justify-self:end; }
[data-mode="light"] .nav-inner{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 75%, transparent), color-mix(in srgb, var(--bg) 75%, transparent));
  box-shadow:0 14px 44px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.brand{ font-family:var(--mono); font-weight:500; font-size:16px; letter-spacing:-.01em; color:var(--text);
  display:inline-flex; align-items:center; gap:8px; }
.brand .slash{ color:var(--accent); text-shadow:0 0 14px var(--glow); }
.nav-center{ display:flex; gap:30px; }
.nav-center a{ font-size:13.5px; color:var(--muted); transition:color .2s; }
.nav-center a:hover{ color:var(--text); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-right .login{ font-size:13.5px; color:var(--muted); transition:color .2s; }
.nav-right .login:hover{ color:var(--text); }
/* small, subtle // hamburger (mobile only; revealed in the max-width:860 block) */
.nav-burger{ display:none; align-items:center; justify-content:center; width:33px; height:29px;
  border:1px solid var(--border); border-radius:9px; background:transparent;
  color:var(--text); font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:-.03em;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .2s, background .25s; }
.nav-burger .slash{ color:var(--accent); display:inline-block; }
.nav-burger:hover{ border-color:color-mix(in srgb,var(--text) 20%,transparent); }
.nav.menu-open .nav-burger{ background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:color-mix(in srgb,var(--accent) 36%,transparent); }
.pill{ font-family:var(--sans); font-weight:500; font-size:13.5px; cursor:pointer; border:0;
  padding:9px 18px; border-radius:999px; background:var(--accent); color:var(--ink-on-accent);
  transition:transform .2s, box-shadow .2s; white-space:nowrap; }
.pill:hover{ transform:translateY(-2px); box-shadow:0 10px 30px var(--glow); }

#mythox-mode, #mythox-theme{ position:fixed; top:auto; bottom:18px; z-index:90; width:34px; height:34px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--border) 70%, rgba(255,255,255,.18)); background:color-mix(in srgb, var(--surface) 54%, transparent);
  backdrop-filter:blur(18px) saturate(1.24); -webkit-backdrop-filter:blur(18px) saturate(1.24);
  cursor:pointer; display:grid; place-items:center; line-height:1;
  font-family:var(--mono); transition:transform .2s, box-shadow .2s, border-color .3s, color .2s; }
#mythox-theme{ right:18px; color:var(--accent); font-size:13px; letter-spacing:-1px; text-shadow:0 0 12px var(--glow); }
#mythox-mode { right:58px; color:var(--text); }
#mythox-mode svg{ width:15px; height:15px; display:block; stroke-width:1.55; }
#mythox-theme:hover, #mythox-mode:hover{ transform:translateY(-2px); box-shadow:0 10px 26px var(--glow); border-color:var(--accent); }
#mythox-mode:hover{ color:var(--accent); }
#mythox-theme:active, #mythox-mode:active{ transform:scale(.92); box-shadow:none; }

/* soft progressive blur under the nav (Sollo) — stacked masked backdrop-filter bands */
.top-fade{ position:fixed; inset:0 0 auto 0; height:140px; z-index:55; pointer-events:none; overflow:hidden;
  transform:translateZ(0); will-change:transform; }
.top-fade .bf{ position:absolute; inset:0; transform:translateZ(0); }
.top-fade .b1{ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  -webkit-mask:linear-gradient(#000 0 18%, transparent 46%); mask:linear-gradient(#000 0 18%, transparent 46%); }
.top-fade .b2{ backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  -webkit-mask:linear-gradient(transparent 22%,#000 44% 62%, transparent 84%); mask:linear-gradient(transparent 22%,#000 44% 62%, transparent 84%); }
.top-fade .b3{ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  -webkit-mask:linear-gradient(transparent 56%,#000 82%, transparent 100%); mask:linear-gradient(transparent 56%,#000 82%, transparent 100%); }
.top-fade .b4,.top-fade .b5{ display:none; }
.top-fade .wash{ position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg) 4%, color-mix(in srgb,var(--bg) 50%,transparent) 44%, transparent 86%); }

/* ============================ HERO (object on top, text under) ============================ */
.hero{ position:relative; min-height:94dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; text-align:center; padding:clamp(88px,9.8vh,96px) 0 0; }
.hero-stage{ position:relative; width:min(672px,86vw); height:min(550px,82vw);
  animation:fadeIn 1.3s ease-out .15s both; }
#hero-canvas{ width:100%; height:100%; display:none; }
.hero-photo-trident{ position:absolute; top:12px; left:0; width:100%; height:100%; pointer-events:none;
  background:url("assets/trident-chrome-dark.png") center top / contain no-repeat;
  animation:none; }
[data-mode="light"] .hero-photo-trident{ background-image:url("assets/trident-light-reference.png"); }
.hero-trident{ display:none; position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 34px 48px rgba(0,0,0,.62)) drop-shadow(0 0 30px color-mix(in srgb,var(--glow) 42%, transparent));
  animation:tridentFloat 9s ease-in-out infinite; }
.hero-trident .soft-glow{ opacity:.36; filter:blur(14px); }
.hero-trident .edge{ opacity:.92; }
.hero-trident .cut{ opacity:.78; }
.hero-trident .jewel{ filter:drop-shadow(0 0 12px rgba(255,255,255,.36)); }
@keyframes tridentFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.hero-stage .floor{ display:none; position:absolute; left:50%; bottom:3%; transform:translateX(-50%);
  width:min(520px,78%); height:112px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 54% 42% at 50% 52%, color-mix(in srgb,var(--glow) 72%, rgba(255,255,255,.10)), transparent 72%); opacity:.72; }
.hero .kicker{ display:none; }
.hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:-.055em; line-height:1.08;
  font-size:clamp(33px,3.08vw,51px); margin:-2px 0 0; padding:0 0 .16em; max-width:920px; white-space:nowrap;
  animation:fadeUp 1s ease-out .32s both; }
.hero .sub{ margin:16px auto 0; max-width:650px; color:color-mix(in srgb,var(--text) 62%, transparent); font-size:clamp(14.5px,1.38vw,17.25px);
  line-height:1.48; animation:fadeUp 1s ease-out .4s both; font-family:var(--sans); font-weight:400; letter-spacing:-.012em; }
.hero-cta{ margin-top:26px; display:flex; align-items:center; gap:28px; justify-content:center; flex-wrap:wrap;
  animation:fadeUp 1s ease-out .48s both; }
.btn-light{ font-family:var(--sans); font-weight:500; font-size:14.25px; cursor:pointer; border:0;
  padding:13px 26px; border-radius:999px; background:var(--accent); color:var(--ink-on-accent);
  transition:transform .2s, box-shadow .2s; }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 12px 34px var(--glow); }
.btn-quiet{ font-size:14.25px; color:var(--muted); display:inline-flex; align-items:center; gap:7px; transition:color .2s; }
.btn-quiet:hover{ color:var(--text); }
.btn-quiet .arr{ transition:transform .2s; }
.btn-quiet:hover .arr{ transform:translateX(4px); }

@keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* ============================ TRUSTED PARTNERS (drag marquee) ============================ */
.partners{ padding:96px 0 10px; margin-top:0; }
.partners .kicker{ display:flex; justify-content:center; margin-bottom:24px; font-size:10px; font-weight:300; letter-spacing:.075em; }
.pmarq{ overflow:hidden; border-block:1px solid var(--border); padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ptrack{ display:flex; width:max-content; will-change:transform; }
.chip{ display:flex; align-items:center; gap:11px; padding:8px 30px; white-space:nowrap; color:var(--text); opacity:.74; }
.chip .ico{ width:23px; height:23px; flex:0 0 auto; object-fit:contain; display:block; }
[data-mode="light"] .chip .ico{ filter:invert(1); }
.chip .nm{ font-family:var(--partner-font, var(--sans)); font-size:14px; font-weight:500; letter-spacing:-.01em; color:currentColor; }
.chip.word .nm{ font-weight:600; }
.chip[data-brand="notion"]{ --partner-font:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.chip[data-brand="canva"]{ --partner-font:"Canva Sans", "Open Sans", Arial, sans-serif; }
.chip[data-brand="shopify"]{ --partner-font:"ShopifySans", "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="webull"]{ --partner-font:Inter, "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="surfshark"]{ --partner-font:"TT Norms Pro", Inter, Arial, sans-serif; }
.chip[data-brand="vidiq"]{ --partner-font:Inter, Roboto, Arial, sans-serif; }
.chip[data-brand="perplexity"]{ --partner-font:"ABC Diatype", Inter, Arial, sans-serif; }
.chip[data-brand="tubebuddy"]{ --partner-font:Roboto, Arial, sans-serif; }
.chip[data-brand="elevenlabs"]{ --partner-font:Inter, "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="invideo"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="hostinger"]{ --partner-font:"DM Sans", Inter, Arial, sans-serif; }
.chip[data-brand="autods"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="n8n"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="epidemicsound"]{ --partner-font:Inter, "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="printify"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="lovable"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="emergent"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="higgsfield"]{ --partner-font:Inter, Arial, sans-serif; }
.chip[data-brand="amazon"]{ --partner-font:"Amazon Ember", Inter, Arial, sans-serif; }
.chip[data-brand="spacex"]{ --partner-font:"Eurostile", "Saira Condensed", "Arial Narrow", Arial, sans-serif; letter-spacing:.04em; }
.chip[data-brand="tesla"]{ --partner-font:"Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif; letter-spacing:.22em; }
.chip[data-brand="toyota"]{ --partner-font:"Toyota Type", "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="ford"]{ --partner-font:"Ford Antenna", Verdana, "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="intel"]{ --partner-font:"IntelOne Display", "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="google"]{ --partner-font:"Product Sans", "Google Sans", Poppins, Arial, sans-serif; }
.chip[data-brand="nasa"]{ --partner-font:"Nasalization", "Helvetica Neue", Arial, sans-serif; letter-spacing:.04em; }
.chip[data-brand="usarmy"]{ --partner-font:"Roboto Slab", Georgia, "Times New Roman", serif; letter-spacing:.06em; }
.chip[data-brand="atlassian"]{ --partner-font:"Charlie Display", Inter, Arial, sans-serif; }
.chip[data-brand="microsoft"]{ --partner-font:"Segoe UI", "Open Sans", Arial, sans-serif; }
.chip[data-brand="sri"]{ --partner-font:Georgia, "Times New Roman", serif; }
.chip[data-brand="siemens"]{ --partner-font:"Siemens Sans", "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="ibm"]{ --partner-font:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
.chip[data-brand="pixar"]{ --partner-font:"Gill Sans", Futura, "Century Gothic", sans-serif; }
.chip[data-brand="bridgewater"]{ --partner-font:Georgia, "Times New Roman", serif; }
.chip[data-brand="stanford"]{ --partner-font:"Source Serif Pro", Georgia, "Times New Roman", serif; }
.chip[data-brand="ycombinator"]{ --partner-font:"Helvetica Neue", Arial, sans-serif; }

/* ============================ SECTIONS ============================ */
section.block{ padding:clamp(80px,12vh,140px) 0; }
.sec-head{ max-width:32ch; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-weight:600; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(22px,2.72vw,31px); margin-top:16px; }
.sec-head p{ color:var(--muted); margin-top:16px; font-size:14px; line-height:1.6; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.reveal.in{ opacity:1; transform:none; }

/* interactive panel */
.panel-wrap{ margin-top:46px; }
.tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.tab{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--muted);
  transition:color .2s, border-color .3s, background .2s; }
.tab:hover{ color:var(--text); }
.tab.on{ color:var(--ink-on-accent); background:var(--accent); border-color:var(--accent); }
.panel{ position:relative; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 70%, var(--bg)));
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; min-height:340px; }
.panel::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 50%, transparent); }
.pane{ display:none; padding:clamp(26px,4vw,46px); }
.pane.on{ display:block; animation:fadeUp .5s ease-out both; }
.pane h3{ font-weight:600; font-size:23px; letter-spacing:-.02em; }
.pane p.lede{ color:var(--muted); margin-top:8px; max-width:54ch; }
.rows{ margin-top:28px; display:grid; gap:10px; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
.row .l{ display:flex; align-items:center; gap:13px; }
.row .ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color:var(--accent);
  font-family:var(--mono); font-size:13.25px; border:1px solid var(--border); }
.row .name{ font-size:13.75px; font-weight:500; }
.row .desc{ font-size:12px; color:var(--dim); margin-top:2px; }
.row .val{ font-family:var(--mono); font-size:13.25px; color:var(--text); }
.row .val.up{ color:var(--accent); }

/* feature row */
.feat-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 26px 30px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 70%,transparent), transparent);
  transition:transform .25s, border-color .3s, box-shadow .25s; }
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); box-shadow:0 18px 50px rgba(0,0,0,.3); }
.card .cnum{ font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.16em; }
.card h3{ font-weight:600; font-size:20px; letter-spacing:-.02em; margin-top:16px; }
.card p{ color:var(--muted); font-size:13.75px; margin-top:10px; line-height:1.6; }

/* midas guide split */
.guide{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center; }
.guide-art{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); background:radial-gradient(120% 120% at 30% 20%, var(--surface-2), var(--bg) 75%); }
.guide-art .ring{ position:absolute; inset:0; }
.guide-art .ring i{ position:absolute; left:50%; top:50%; border:1px solid var(--border); border-radius:50%;
  transform:translate(-50%,-50%); }
.guide-art .core{ position:absolute; left:50%; top:50%; width:38%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 38% 32%, #fff, #cfd2d6 45%, transparent 72%);
  box-shadow:0 0 80px var(--glow); opacity:.92; }
.guide-art .spin{ position:absolute; inset:0; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* manifesto */
.manifesto{ text-align:center; }
.manifesto .lines{ font-weight:600; letter-spacing:-.03em; font-size:clamp(22px,3.56vw,40px); line-height:1.12; }
.manifesto .lines span{ display:block; color:var(--muted); transition:color .5s; }
.manifesto .lines span.on{ color:var(--text); }

/* CTA */
.cta{ text-align:center; }
.cta h2{ font-weight:600; letter-spacing:-.03em; font-size:clamp(20px,2.2vw,29px); margin-top:16px; }
/* Reis 2026-07-28: closing CTA headline read too big, and the two buttons sat glued
   together because this block was never a flex row, so its gap did nothing. */
.cta .copy-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.lead-form{ display:flex; gap:10px; padding:7px; max-width:480px; margin:30px auto 0;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  box-shadow:0 20px 50px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04); }
.lead-form input{ flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-family:var(--sans); font-size:14.25px; padding:12px 20px; }
.lead-form input::placeholder{ color:var(--dim); }
.lead-form button{ font-family:var(--sans); font-weight:500; cursor:pointer; border:0; font-size:13.25px;
  padding:12px 24px; border-radius:999px; background:var(--accent); color:var(--ink-on-accent);
  transition:transform .2s, box-shadow .2s; white-space:nowrap; }
.lead-form button:hover{ transform:translateY(-2px); box-shadow:0 10px 30px var(--glow); }
.cta .fine{ margin-top:14px; font-size:12.5px; color:var(--dim); }

/* footer */
footer{ border-top:1px solid var(--border); padding:56px 0 46px; }
.foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot .brand{ font-size:18px; }
.foot .tag{ color:var(--muted); font-size:13px; margin-top:12px; max-width:34ch; line-height:1.6; }
.foot .tag.brand-statement{ max-width:50ch; font-size:13.5px; line-height:1.62; }
.foot-follow{ margin-top:24px; }
.foot-follow-label{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.foot-social{ display:flex; gap:18px; margin-top:14px; }
.foot-social a{ display:inline-flex; color:var(--text); transition:color .2s, transform .2s; }
.foot-social a:hover{ color:var(--accent); transform:translateY(-1px); }
.foot-social svg{ width:22px; height:22px; fill:currentColor; display:block; }
.foot-cols{ display:flex; gap:clamp(30px,6vw,80px); flex-wrap:wrap; }
.foot-col h4{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.foot-col a{ display:block; color:var(--muted); font-size:13.25px; margin-top:11px; transition:color .2s; }
.foot-col a:hover{ color:var(--text); }
.foot-base{ margin-top:44px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim);
  font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; }

/* ============================ V1 COPY / V2 BODY SYSTEM ============================ */
.section-slab{ padding:clamp(94px,13vh,150px) 0; position:relative; scroll-margin-top:118px; }
.section-slab.compact{ padding-block:clamp(76px,10vh,120px); }
.section-slab .wrap{ max-width:1420px; }
.showcase-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); gap:clamp(42px,7vw,98px); align-items:center; }
.showcase-grid.reverse{ grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr); }
.showcase-grid.reverse .visual-frame{ order:2; }
.showcase-grid.reverse .section-copy{ order:1; }
.section-copy{ max-width:610px; }
.section-copy.center{ margin-inline:auto; text-align:center; }
.section-copy h2,.section-copy h1,.serif-title{ font-family:var(--sans); font-weight:400; letter-spacing:-.058em; line-height:.94;
  font-size:clamp(26px,3.2vw,50px); color:var(--text); text-wrap:balance; }
.section-copy p{ color:var(--muted); margin-top:22px; font-size:clamp(13px,1vw,15px); line-height:1.66; max-width:62ch; }
.section-copy .copy-actions{ margin-top:30px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.copy-list{ margin-top:34px; display:grid; gap:0; border-top:1px solid var(--border); max-width:520px; }
.copy-list button,.copy-list span{ appearance:none; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--muted); text-align:left;
  padding:15px 0; font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; }
.copy-list button{ cursor:pointer; }
.copy-list span{ cursor:default; }
.copy-list button[aria-pressed="true"],.copy-list button:hover{ color:var(--text); }
.visual-frame{ position:relative; min-height:470px; overflow:hidden; border:1px solid var(--border); border-radius:8px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 68%, transparent), color-mix(in srgb,var(--bg) 88%, transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.025), 0 34px 110px rgba(0,0,0,.28); }
.visual-frame::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 280px at 48% 0%, color-mix(in srgb,var(--accent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 18%, transparent 74%, rgba(0,0,0,.18)); }
.visual-frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 5%, transparent); }
.frame-bar{ position:relative; z-index:2; height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.frame-dots{ display:flex; gap:8px; }
.frame-dots i{ width:6px; height:6px; border-radius:50%; background:var(--dim); display:block; opacity:.6; }
.frame-body{ position:relative; z-index:1; padding:26px; min-height:416px; }
.frame-icon{ width:52px; height:52px; border:1px solid var(--border); border-radius:14px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--surface-2) 62%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); font-family:var(--mono); color:var(--text); }
.mock-action,.state-tab{ appearance:none; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb,var(--surface-2) 48%, transparent);
  color:var(--text); padding:10px 14px; font:500 12.5px var(--sans); cursor:pointer; transition:transform .22s, border-color .22s, background .22s, color .22s; }
.mock-action.primary{ background:var(--accent); color:var(--ink-on-accent); border-color:transparent; }
.mock-action:hover,.state-tab:hover,.mock-action:focus-visible,.state-tab:focus-visible{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 30%, var(--border)); outline:none; }
.mock-action:active,.state-tab:active{ transform:scale(.98); }
.state-tabs{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.state-tab{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--muted); }
.state-tab[aria-pressed="true"]{ color:var(--ink-on-accent); background:var(--accent); border-color:transparent; }
.ui-label,.price-kicker{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.trident-mark{ width:52px; height:52px; display:block; background:url("trident-mark-dark.png") center / contain no-repeat;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--glow) 80%, transparent)); }
[data-mode="light"] .trident-mark{ background-image:url("trident-mark-light.png"); }

.builder-command{ display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center; padding:18px; border:1px solid var(--border); border-radius:10px;
  background:color-mix(in srgb,var(--surface-2) 58%, transparent); }
.builder-command strong{ display:block; color:var(--text); font-size:19px; letter-spacing:-.025em; }
.builder-command span{ display:block; color:var(--muted); margin-top:4px; font-size:12.5px; }
.builder-product-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.builder-product-tab{ appearance:none; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb,var(--surface) 40%, transparent);
  color:var(--muted); padding:8px 11px; font-family:var(--mono); font-size:9px; font-weight:300; letter-spacing:.075em; text-transform:uppercase;
  cursor:pointer; transition:transform .22s, border-color .22s, background .22s, color .22s; }
.builder-product-tab:hover,.builder-product-tab:focus-visible{ color:var(--text); border-color:color-mix(in srgb,var(--accent) 30%, var(--border)); outline:none; }
.builder-product-tab[aria-pressed="true"]{ color:var(--ink-on-accent); background:var(--accent); border-color:transparent; }
.build-lanes{ margin-top:22px; display:grid; gap:12px; }
.build-lane{ display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:14px; border:1px solid var(--border); border-radius:10px;
  background:color-mix(in srgb,var(--surface) 44%, transparent); color:var(--muted); cursor:pointer; transition:background .24s, border-color .24s, transform .24s; }
.build-lane:focus-visible{ outline:1px solid color-mix(in srgb,var(--accent) 60%, transparent); outline-offset:2px; }
.build-lane.active{ color:var(--text); border-color:color-mix(in srgb,var(--accent) 38%, var(--border)); background:color-mix(in srgb,var(--surface-2) 72%, transparent); transform:translateX(3px); }
.build-lane b{ font-size:13.25px; font-weight:500; }
.build-lane span:first-child,.build-lane em{ font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.build-card{ margin-top:24px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; padding:22px; border:1px solid color-mix(in srgb,var(--accent) 28%, var(--border)); border-radius:10px;
  background:radial-gradient(520px 200px at 12% 0%, var(--glow), transparent 70%), color-mix(in srgb,var(--surface-2) 42%, transparent); }
.build-card h3{ font-size:18px; letter-spacing:-.04em; }
.build-card p{ margin-top:7px; color:var(--muted); font-size:13.25px; }
.metric-strip{ margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); }
.metric-strip div{ padding:16px 8px 0; border-right:1px solid var(--border); }
.metric-strip div:last-child{ border-right:0; }
.metric-strip span{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.metric-strip b{ display:block; margin-top:7px; font-size:20px; letter-spacing:-.03em; color:var(--text); }

.tool-collapse{ min-height:100%; display:grid; grid-template-columns:1fr 86px 1fr; gap:16px; align-items:center; }
.tool-list{ display:grid; gap:10px; }
.tool-item{ padding:14px 16px; border:1px solid var(--border); border-radius:9px; color:var(--muted); background:color-mix(in srgb,var(--surface) 48%, transparent); font-size:17px; }
.collapse-spine{ display:grid; place-items:center; min-height:380px; position:relative; }
.collapse-spine::before{ content:""; position:absolute; top:8%; bottom:8%; width:1px; background:linear-gradient(transparent,var(--border),transparent); }
.collapse-spine .trident-mark{ width:64px; height:64px; padding:14px; border:1px solid var(--border); border-radius:50%; background-color:color-mix(in srgb,var(--surface-2) 60%, transparent); z-index:1; }
.core-output{ min-height:380px; border:1px solid color-mix(in srgb,var(--accent) 24%, var(--border)); border-radius:10px; padding:28px; display:flex; flex-direction:column; justify-content:space-between;
  background:radial-gradient(420px 220px at 50% 0%, var(--glow), transparent 70%), color-mix(in srgb,var(--surface-2) 40%, transparent); }
.core-output h3{ font-size:clamp(19px,1.85vw,26px); letter-spacing:-.055em; line-height:1.02; }
.core-output small{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.075em; color:var(--dim); }

.type-preview{ display:grid; grid-template-columns:190px 1fr; min-height:416px; }
.type-nav{ padding:22px; border-right:1px solid var(--border); display:grid; gap:10px; align-content:start; }
.type-tab{ appearance:none; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--muted); text-align:left; padding:14px 0;
  font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; cursor:pointer; }
.type-tab[aria-pressed="true"],.type-tab:hover{ color:var(--text); }
.type-screen{ padding:26px; display:flex; flex-direction:column; justify-content:space-between; }
.type-screen h3{ font-size:21px; letter-spacing:-.045em; }
.type-screen p{ margin-top:10px; color:var(--muted); max-width:34ch; }
.app-bars{ display:grid; gap:12px; margin-top:24px; }
.app-bars span{ height:50px; border:1px solid var(--border); border-radius:9px; background:linear-gradient(90deg, color-mix(in srgb,var(--surface-2) 70%, transparent), transparent); }
.device-row{ display:flex; gap:12px; align-items:end; }
.device-row i{ display:block; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,var(--surface-2),transparent); }
.device-row i:nth-child(1){ width:64px; height:112px; }
.device-row i:nth-child(2){ width:160px; height:92px; }
.device-row i:nth-child(3){ width:88px; height:132px; }

.midas-panel{ min-height:470px; }
.midas-chat{ display:grid; gap:14px; }
.bubble{ border:1px solid var(--border); border-radius:10px; padding:17px; background:color-mix(in srgb,var(--surface-2) 54%, transparent); }
.bubble.user{ margin-left:14%; }
.bubble.midas{ margin-right:10%; border-color:color-mix(in srgb,var(--accent) 28%, var(--border)); }
.bubble .label{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.bubble p{ color:var(--text); font-size:14.25px; line-height:1.55; }
.action-ticket{ margin-top:18px; border:1px solid color-mix(in srgb,var(--accent) 26%, var(--border)); border-radius:10px; padding:18px;
  background:radial-gradient(340px 160px at 10% 0%, var(--glow), transparent 72%); }
.action-ticket h3{ font-size:18px; letter-spacing:-.045em; }
.action-ticket p{ margin-top:6px; color:var(--muted); font-size:13.25px; }

.system-map{ min-height:472px; display:grid; place-items:center; padding:26px; }
.system-field{ width:100%; min-height:380px; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:center; }
.system-field::before{ content:""; position:absolute; left:8%; right:8%; top:50%; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); }
.system-node{ position:relative; min-height:126px; border:1px solid var(--border); border-radius:10px; padding:17px; background:color-mix(in srgb,var(--surface-2) 48%, transparent);
  color:inherit; font:inherit; text-align:left; cursor:pointer; transition:transform .22s, border-color .22s, background .22s; }
.system-node:focus-visible{ outline:1px solid color-mix(in srgb,var(--accent) 60%, transparent); outline-offset:2px; }
.system-node:hover,.system-node[aria-pressed="true"]{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 34%, var(--border)); background:color-mix(in srgb,var(--surface-2) 68%, transparent); }
.system-node span{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.system-node strong{ display:block; margin-top:13px; color:var(--text); font-size:17px; letter-spacing:-.02em; }
.system-core{ grid-column:1 / -1; justify-self:center; width:100px; height:100px; border:1px solid color-mix(in srgb,var(--accent) 28%, var(--border)); border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 36%, color-mix(in srgb,var(--accent) 14%, var(--surface)), color-mix(in srgb,var(--bg) 88%, transparent)); box-shadow:0 0 46px var(--glow); }
.system-insight{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:13.25px; min-height:42px; }

.feature-os-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:start; min-height:0; }
.feature-groups{ display:grid; grid-template-columns:1fr; gap:10px; align-content:start; }
.feature-group{ border-bottom:1px solid var(--border); padding-bottom:10px; }
.feature-group-toggle{ appearance:none; width:100%; border:0; background:transparent; color:var(--dim); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 0; font-family:var(--mono); font-size:9px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; text-align:left; }
.feature-group-toggle:hover,.feature-group-toggle:focus-visible{ color:var(--text); outline:none; }
.feature-group-toggle .feature-count{ display:inline-flex; align-items:center; gap:9px; }
.feature-group-toggle .feature-count::after{ content:"+"; width:18px; height:18px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; font-size:11px; color:var(--dim); }
.feature-group[data-open="true"] .feature-group-toggle .feature-count::after{ content:"-"; color:var(--text); border-color:color-mix(in srgb,var(--accent) 28%, var(--border)); }
.feature-buttons{ display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
.feature-group[data-open="true"] .feature-buttons{ display:grid; }
.feature-button{ appearance:none; border:1px solid var(--border); border-radius:9px; background:color-mix(in srgb,var(--surface) 42%, transparent);
  color:var(--muted); text-align:left; padding:9px 10px; cursor:pointer; transition:transform .22s, border-color .22s, background .22s, color .22s; }
.feature-button strong{ display:block; color:var(--text); font-size:12.5px; font-weight:500; letter-spacing:-.015em; }
.feature-button small{ display:block; margin-top:2px; color:var(--dim); font-size:10px; line-height:1.3; }
.feature-button:hover,.feature-button:focus-visible,.feature-button[aria-pressed="true"]{ color:var(--text); transform:translateX(2px);
  border-color:color-mix(in srgb,var(--accent) 32%, var(--border)); background:color-mix(in srgb,var(--surface-2) 64%, transparent); outline:none; }
.feature-live{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.feature-core-card{ display:grid; grid-template-columns:66px 1fr; gap:14px; align-items:center; border:1px solid color-mix(in srgb,var(--accent) 24%, var(--border));
  border-radius:10px; padding:16px; background:radial-gradient(430px 160px at 12% 0%, var(--glow), transparent 72%), color-mix(in srgb,var(--surface-2) 42%, transparent); }
.feature-core-mark{ width:62px; height:62px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--surface) 54%, transparent); box-shadow:0 0 36px var(--glow); }
.feature-core-mark .trident-mark{ width:40px; height:40px; }
.feature-detail .ui-label{ display:block; margin-bottom:6px; }
.feature-detail h3{ font-size:19px; line-height:1.04; letter-spacing:-.04em; }
.feature-detail p{ margin-top:7px; color:var(--muted); font-size:12.75px; line-height:1.5; }
.feature-process{ display:grid; gap:9px; }
.feature-step{ display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; min-height:46px; padding:10px 12px;
  border:1px solid var(--border); border-radius:9px; color:var(--muted); background:color-mix(in srgb,var(--surface) 42%, transparent);
  transition:border-color .22s, background .22s, transform .22s, color .22s; }
.feature-step span,.feature-step em{ font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.feature-step b{ font-size:12.25px; font-weight:500; }
.feature-step.active{ color:var(--text); transform:translateX(2px); border-color:color-mix(in srgb,var(--accent) 36%, var(--border));
  background:color-mix(in srgb,var(--surface-2) 64%, transparent); }
.feature-step.done em{ color:var(--text); }
.feature-output{ border:1px solid var(--border); border-radius:10px; padding:16px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface-2) 52%, transparent), color-mix(in srgb,var(--bg) 82%, transparent)); }
.feature-output h3{ font-size:17px; letter-spacing:-.035em; }
.feature-output p{ margin-top:7px; color:var(--muted); font-size:12.75px; line-height:1.5; }
.feature-output .ui-label{ display:block; margin-top:12px; color:var(--accent); }
.feature-output-actions{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.feature-output-actions .mock-action{ padding:9px 13px; font-size:12px; }

.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fit-panel{ min-height:320px; border:1px solid var(--border); border-radius:10px; padding:26px; background:color-mix(in srgb,var(--surface-2) 40%, transparent); }
.fit-panel h3{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--accent); }
.fit-panel.no h3{ color:var(--dim); }
.fit-panel ul{ list-style:none; margin-top:24px; display:grid; gap:16px; }
.fit-panel li{ color:var(--muted); line-height:1.5; display:flex; gap:12px; }
.fit-panel li::before{ content:"//"; color:var(--accent); font-family:var(--mono); }
.fit-panel.no li::before{ content:"x"; color:var(--dim); }

.pricing-showcase{ padding:20px; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pricing-card{ min-height:360px; border:1px solid var(--border); border-radius:10px; padding:24px; background:color-mix(in srgb,var(--surface-2) 40%, transparent); display:flex; flex-direction:column; cursor:pointer; transition:transform .22s, border-color .22s, background .22s; }
.pricing-card:hover,.pricing-card.featured{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 36%, var(--border)); background:color-mix(in srgb,var(--surface-2) 66%, transparent); }
.pricing-card h3{ margin-top:16px; font-size:17px; letter-spacing:-.035em; }
.price{ margin-top:8px; font-size:37.5px; letter-spacing:-.055em; color:var(--text); }
.pricing-card p{ margin-top:12px; color:var(--muted); font-size:13.25px; line-height:1.55; }
.pricing-card ul{ list-style:none; display:grid; gap:9px; margin:22px 0 26px; color:var(--muted); font-size:13px; }
.pricing-card li::before{ content:"+"; color:var(--accent); font-family:var(--mono); margin-right:9px; }
.pricing-card .btn-light{ margin-top:auto; text-align:center; padding-block:11px; }

.leaderboard-panel{ padding:20px; }
.board-tabs{ display:flex; gap:9px; padding:0 0 14px; border-bottom:1px solid var(--border); margin-bottom:12px; flex-wrap:wrap; }
.board-tabs button{ appearance:none; border:1px solid transparent; border-radius:999px; background:transparent; padding:8px 12px;
  font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
.board-tabs button[aria-pressed="true"],.board-tabs button:hover{ color:var(--text); border-color:var(--border); background:color-mix(in srgb,var(--surface-2) 48%, transparent); }
.leader-row{ display:grid; grid-template-columns:44px 1fr 92px 92px; gap:12px; align-items:center; padding:15px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface-2) 45%, transparent); margin-top:10px; }
.leader-row strong{ font-size:15.25px; }
.leader-stat{ text-align:center; font-family:var(--mono); color:var(--text); }
.leader-stat span{ display:block; margin-top:3px; color:var(--dim); font-size:9px; letter-spacing:.075em; text-transform:uppercase; }
.leader-meta{ color:var(--muted); font-size:11.5px; line-height:1.4; margin-top:3px; }
.pillar-meter{ grid-column:1 / -1; height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--surface) 60%, transparent); border:1px solid var(--border); }
.pillar-meter span{ display:block; height:100%; width:var(--fill,50%); border-radius:inherit; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 38%, transparent)); box-shadow:0 0 18px var(--glow); transition:width .35s ease; }
.leader-ribbon{ margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--border); }
.leader-ribbon div{ padding:16px 10px 0; border-right:1px solid var(--border); }
.leader-ribbon div:last-child{ border-right:0; }
.leader-ribbon span{ font-family:var(--mono); font-size:9px; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); }
.leader-ribbon b{ display:block; margin-top:6px; font-size:15.5px; letter-spacing:-.035em; }


@media (max-width:860px){
  .nav-inner{ display:flex; align-items:center; gap:10px; position:relative; }
  .nav-burger{ display:inline-flex; order:0; }
  .nav-inner .brand{ order:1; justify-self:auto; }
  .nav-inner .brand .slash{ display:none; }
  .nav-inner .nav-right{ order:2; justify-self:auto; margin-left:auto; }
  .nav-center{ order:3; position:absolute; top:calc(100% + 11px); left:0; right:auto; width:min(232px,68vw); margin:0;
    display:flex; flex-direction:column; gap:3px; padding:9px;
    border:1px solid var(--border); border-radius:18px;
    background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 94%,transparent), color-mix(in srgb,var(--bg) 96%,transparent));
    backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:0 26px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
    opacity:0; transform:translateY(-10px) scale(.985); transform-origin:top center; pointer-events:none;
    transition:opacity .26s ease, transform .34s cubic-bezier(.2,.75,.2,1); z-index:70; }
  .nav-center a{ font-size:15px; color:var(--text); padding:13px 15px; border-radius:12px;
    display:flex; align-items:center; justify-content:space-between; gap:10px; transition:background .18s; }
  .nav-center a::after{ content:"\2192"; color:var(--muted); opacity:.45; font-size:15px; font-family:var(--mono); }
  .nav-center a:hover,.nav-center a:active{ background:color-mix(in srgb,var(--text) 8%,transparent); }
  .nav.menu-open .nav-center{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .showcase-grid,.showcase-grid.reverse{ grid-template-columns:1fr; gap:30px; }
  .showcase-grid.reverse .visual-frame,.showcase-grid.reverse .section-copy{ order:initial; }
  .section-slab{ padding:clamp(74px,10vh,104px) 0; }
  .visual-frame{ min-height:auto; }
  .frame-body{ min-height:auto; padding:20px; }
  .builder-command{ grid-template-columns:44px 1fr; }
  .builder-command .mock-action{ grid-column:1 / -1; justify-self:start; }
  .metric-strip,.pricing-grid,.fit-grid,.leader-ribbon{ grid-template-columns:1fr 1fr; }
  .tool-collapse,.type-preview{ grid-template-columns:1fr; }
  .collapse-spine{ min-height:120px; }
  .collapse-spine::before{ top:50%; bottom:auto; left:8%; right:8%; width:auto; height:1px; }
  .core-output{ min-height:280px; }
  .type-nav{ border-right:0; border-bottom:1px solid var(--border); grid-template-columns:repeat(2,1fr); }
  .system-field{ grid-template-columns:1fr; min-height:0; }
  .system-field::before{ display:none; }
  .system-core{ grid-column:auto; order:-1; }
  .feature-os-layout{ grid-template-columns:1fr; min-height:0; }
  .feature-buttons{ grid-template-columns:1fr 1fr; }
  .leader-row{ grid-template-columns:46px 1fr; }
  .leader-stat{ text-align:left; }
}
@media (max-width:700px){
  :root{ --frame-w:calc(100vw - 32px); --frame-inset:16px; }
  .nav-inner{ padding:0 16px; }
  .brand{ font-size:15px; gap:7px; }
  .nav-right{ gap:12px; }
  .pill{ padding:10px 14px; font-size:13px; }
  #mythox-mode, #mythox-theme{ bottom:16px; width:34px; height:34px; }
  #mythox-mode{ right:58px; }
  #mythox-theme{ right:18px; }
  .hero{ min-height:92dvh; padding-top:86px; }
  .hero-stage{ width:100vw; height:min(350px,86vw); }
  .hero-photo-trident{ width:100%; background-image:url("assets/trident-clean-mobile.png"); background-size:auto 100%; background-position:center top; }
  [data-mode="light"] .hero-photo-trident{ background-image:url("assets/trident-light-reference-mobile.png"); }
  .hero h1{ max-width:calc(100vw - 32px); white-space:normal; font-size:clamp(31px,8.1vw,39px); letter-spacing:-.048em; line-height:1.04; margin-top:0; padding-bottom:.18em; }
  .hero .sub{ max-width:calc(100vw - 44px); font-size:16px; line-height:1.5; }
  .hero .sub br{ display:none; }
  .hero-cta{ gap:18px; margin-top:24px; }
  .btn-light{ padding:12px 22px; font-size:14px; }
  .btn-quiet{ font-size:14px; }
  .pmarq{ width:var(--frame-w); }
  .section-copy h2,.section-copy h1{ font-size:clamp(23px,6.75vw,36px); line-height:.98; letter-spacing:-.048em; }
  .visual-frame{ border-radius:8px; }
  .frame-bar{ height:48px; padding:0 14px; }
  .build-card,.builder-command{ grid-template-columns:1fr; }
  .builder-product-tabs{ gap:5px; flex-wrap:nowrap; }
  .builder-product-tab{ font-size:7.5px; padding:7px 4px; flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; letter-spacing:-.02em; }
  .pricing-grid,.fit-grid,.leader-ribbon{ grid-template-columns:1fr; }
  .metric-strip{ grid-template-columns:1fr 1fr; }
  .metric-strip div:nth-child(2){ border-right:0; }
  .metric-strip div:nth-child(1),.metric-strip div:nth-child(2){ border-bottom:1px solid var(--border); padding-bottom:14px; }
  .type-nav{ grid-template-columns:1fr; }
  .feature-groups{ grid-template-columns:1fr; }
  .feature-buttons,.feature-groups > div:last-child .feature-buttons{ grid-template-columns:1fr 1fr; }
  .feature-core-card{ grid-template-columns:52px 1fr; padding:14px; }
  .feature-core-mark{ width:50px; height:50px; }
  .feature-core-mark .trident-mark{ width:34px; height:34px; }
  .feature-step{ grid-template-columns:30px 1fr; }
  .feature-step em{ grid-column:2; }
  .leader-row{ grid-template-columns:36px 1fr; }
  .state-tabs{ gap:8px; }
  .copy-list button,.copy-list span{ font-size:9px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================ INNER-PAGE ADDITIONS (token-based, matches homepage) ============================ */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:var(--ink-on-accent);
  padding:10px 16px; border-radius:0 0 10px 0; font-family:var(--sans); font-size:13px; }
.skip-link:focus{ left:0; }

/* first slab on an inner page must clear the fixed nav */
main > .section-slab:first-of-type{ padding-top:clamp(138px,17vh,188px); }

/* page intro lockup (reuses .section-copy type scale) */
.page-intro h1{ font-family:var(--sans); font-weight:400; letter-spacing:-.058em; line-height:.96;
  font-size:clamp(30px,4vw,56px); color:var(--text); text-wrap:balance; }
.page-intro p.lede{ color:var(--muted); margin-top:22px; font-size:clamp(14px,1.1vw,16.5px); line-height:1.62; max-width:60ch; }
.page-intro.center{ margin-inline:auto; text-align:center; }
.page-intro.center p.lede{ margin-inline:auto; }
.page-intro .copy-actions{ margin-top:30px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.page-intro.center .copy-actions{ justify-content:center; }

/* simple reusable card grid (reuses .card visual language) */
.tile-grid{ margin-top:clamp(34px,5vw,52px); display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tile-grid.two{ grid-template-columns:repeat(2,1fr); }
.tile{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 24px 28px;
  background:color-mix(in srgb,var(--surface) 38%, transparent); }
.tile .ui-label{ display:block; margin-bottom:12px; }
.tile h3{ font-weight:600; font-size:18px; letter-spacing:-.02em; }
.tile p{ color:var(--muted); font-size:13.5px; margin-top:9px; line-height:1.6; }
.tile ul{ list-style:none; margin-top:16px; display:grid; gap:9px; color:var(--muted); font-size:13.25px; }
.tile li::before{ content:"//"; color:var(--accent); font-family:var(--mono); margin-right:9px; }

/* info-rows: homepage-style connected rows inside one framed panel (no floating cards) */
.info-rows{ display:flex; flex-direction:column; }
.info-row{ display:block; padding:17px 2px; border-top:1px solid var(--border); }
.info-row:first-child{ border-top:0; padding-top:4px; }
.info-row .row-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.info-row h3{ font-weight:600; font-size:16px; letter-spacing:-.015em; color:var(--text); }
.info-row p{ margin-top:7px; font-size:13.75px; line-height:1.58; color:var(--muted); }
.info-row p a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.info-row .arr{ color:var(--accent); }
a.info-row{ border-radius:10px; padding-inline:12px; margin-inline:-12px; transition:background .18s; }
a.info-row:hover{ background:color-mix(in srgb,var(--text) 6%,transparent); }
a.info-row:hover h3{ color:var(--accent); }

/* long-form prose (legal + manifesto) */
.prose{ max-width:760px; }
.prose .ui-label{ display:block; margin-bottom:14px; }
.prose h2{ font-weight:600; font-size:clamp(19px,2.1vw,24px); letter-spacing:-.025em; margin-top:40px; }
.prose h2:first-of-type{ margin-top:0; }
.prose h3{ font-weight:600; font-size:16px; letter-spacing:-.015em; margin-top:26px; }
.prose p{ color:var(--muted); margin-top:14px; font-size:14.5px; line-height:1.72; }
.prose ul,.prose ol{ margin:14px 0 0 2px; padding-left:0; list-style:none; display:grid; gap:11px; }
.prose li{ color:var(--muted); font-size:14.25px; line-height:1.62; display:flex; gap:12px; }
.prose li::before{ content:"//"; color:var(--accent); font-family:var(--mono); flex:0 0 auto; }
.prose a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border); }
.prose a:hover{ text-decoration-color:var(--accent); }
/* A button inside prose keeps its button ink; the generic prose link color was painting
   "Start for free" white-on-white on proven-systems (found live 2026-07-28). */
.prose a.btn-light{ color:var(--ink-on-accent); text-decoration:none; }
.doc-meta{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); margin-top:18px; }

/* FAQ accordion */
.faq{ max-width:780px; margin-top:clamp(34px,5vw,52px); display:grid; gap:0; border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{ cursor:pointer; list-style:none; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:15.5px; font-weight:500; color:var(--text); letter-spacing:-.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--dim); width:20px; height:20px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; font-size:12px; transition:transform .2s, color .2s, border-color .2s; }
.faq details[open] summary::after{ content:"-"; color:var(--text); border-color:color-mix(in srgb,var(--accent) 28%, var(--border)); }
.faq details p{ color:var(--muted); font-size:14px; line-height:1.66; padding:0 0 22px; max-width:64ch; }

/* multi-field form (contact / report) */
.form-stack{ max-width:540px; margin-top:clamp(30px,4vw,44px); display:grid; gap:14px; }
.form-stack label{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:8px; }
.form-stack input,.form-stack textarea,.form-stack select{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  color:var(--text); font-family:var(--sans); font-size:14.25px; padding:13px 16px; outline:0; transition:border-color .2s; }
.form-stack input:focus,.form-stack textarea:focus,.form-stack select:focus{ border-color:color-mix(in srgb,var(--accent) 42%, var(--border)); }
.form-stack textarea{ min-height:130px; resize:vertical; line-height:1.55; }
.form-stack input::placeholder,.form-stack textarea::placeholder{ color:var(--dim); }
.form-stack .btn-light{ justify-self:start; margin-top:4px; }
.form-note{ margin-top:14px; font-size:12.5px; color:var(--dim); }

/* status board */
.status-board{ max-width:780px; margin-top:clamp(30px,4vw,44px); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 68%, transparent), color-mix(in srgb,var(--bg) 88%, transparent)); }
.status-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid var(--border); }
.status-row:last-child{ border-bottom:0; }
.status-row .name{ font-size:14px; font-weight:500; }
.status-row .pill-state{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--muted); }
.status-row .pill-state::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--glow); }

/* changelog */
.timeline{ max-width:780px; margin-top:clamp(30px,4vw,44px); display:grid; gap:0; }
.timeline-entry{ padding:24px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:140px 1fr; gap:24px; }
.timeline-entry:last-child{ border-bottom:0; }
.timeline-entry .when{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); padding-top:4px; }
.timeline-entry h3{ font-weight:600; font-size:16.5px; letter-spacing:-.015em; }
.timeline-entry p{ color:var(--muted); font-size:13.75px; margin-top:8px; line-height:1.62; }
.timeline-entry .tag-chip{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:9px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 28%, var(--border)); border-radius:999px; padding:4px 10px; }

@media (max-width:860px){
  .tile-grid,.tile-grid.two{ grid-template-columns:1fr; }
  .timeline-entry{ grid-template-columns:1fr; gap:8px; }
}

/* ===== Light mode: flat, minimal cards and frames (no 3D float, no hover color shifts) ===== */
[data-mode="light"] .visual-frame{ box-shadow:none; background:var(--surface); }
[data-mode="light"] .visual-frame::before,
[data-mode="light"] .visual-frame::after{ display:none; }
[data-mode="light"] .card,
[data-mode="light"] .tile,
[data-mode="light"] .pricing-card{ box-shadow:none; background:transparent; }
[data-mode="light"] .pricing-card.featured{ background:transparent; border-color:var(--accent); }
[data-mode="light"] .card:hover,
[data-mode="light"] .tile:hover,
[data-mode="light"] .pricing-card:hover{ transform:none; box-shadow:none; border-color:var(--border); }
[data-mode="light"] .btn-light:hover,
[data-mode="light"] .pill:hover,
[data-mode="light"] .lead-form button:hover{ box-shadow:none; }
/* base flex so CTA action buttons never overlap (rule previously only scoped to section-copy/page-intro) */
.copy-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
/* kill leftover glows/3D that read badly, especially in light mode */
[data-mode="light"] .feature-core-mark,
[data-mode="light"] .feature-core-card,
[data-mode="light"] .system-core{ box-shadow:none; background:color-mix(in srgb,var(--surface) 50%, transparent); }
[data-mode="light"] .nav-inner{ box-shadow:0 1px 0 var(--border); }
[data-mode="light"] #mythox-theme:hover,
[data-mode="light"] #mythox-mode:hover{ box-shadow:none; }
[data-mode="light"] .brand .slash,
[data-mode="light"] #mythox-theme{ text-shadow:none; }
/* mobile: signup form wraps so the button never overflows the viewport */
@media (max-width:480px){ .lead-form{ flex-wrap:wrap; } .lead-form button{ flex:1 1 100%; } }

/* ===== Inner pages: copy + cards side-by-side, like the homepage (no stacked walls of cards) ===== */
@media (min-width:861px){
  .section-slab .wrap:has(> .section-copy + .tile-grid){
    display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(40px,6vw,84px); align-items:center;
  }
  .section-slab .wrap:has(> .section-copy + .tile-grid) > .section-copy{ max-width:none !important; }
  .section-slab .wrap:has(> .section-copy + .tile-grid) > .tile-grid,
  .section-slab .wrap:has(> .section-copy + .tile-grid) > .tile-grid.two{
    grid-template-columns:1fr; gap:12px; margin-top:0;
  }
  /* alternate the side each section for rhythm */
  .section-slab:nth-of-type(even) .wrap:has(> .section-copy + .tile-grid) > .section-copy{ order:2; }
}

/* ============================ CONSOLIDATED LEGAL HUB ============================ */
.legal-wrap{ max-width:820px; margin-inline:auto; }
.legal-toc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(26px,4vw,38px); }
.legal-toc a{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:8px 13px;
  transition:color .2s, border-color .2s, background .2s; }
.legal-toc a:hover{ color:var(--text); border-color:color-mix(in srgb,var(--accent) 30%, var(--border));
  background:color-mix(in srgb,var(--surface-2) 50%, transparent); }
.legal-section{ scroll-margin-top:140px; padding-top:clamp(44px,6vw,64px); margin-top:clamp(44px,6vw,64px); border-top:1px solid var(--border); }
.legal-section:first-of-type{ border-top:0; margin-top:clamp(28px,4vw,40px); padding-top:0; }
.legal-section > .ui-label{ display:block; margin-bottom:10px; }
.legal-doc-title{ font-weight:400; letter-spacing:-.04em; line-height:1; font-size:clamp(24px,3vw,38px); margin:6px 0 4px; }

/* ported live legal content, re-skinned in V4 */
.legal-section .eyebrow{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.legal-section .lead{ color:var(--muted); margin-top:14px; font-size:15px; line-height:1.62; max-width:64ch; }
.legal-meta{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:18px; font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.legal-meta b{ color:var(--muted); font-weight:500; margin-right:7px; }
.legal-prose{ margin-top:28px; }
.legal-prose > section{ scroll-margin-top:140px; }
.legal-prose h2{ font-weight:600; font-size:clamp(17px,1.9vw,21px); letter-spacing:-.02em; margin-top:36px; }
.legal-prose > section:first-child h2{ margin-top:0; }
.legal-prose h3{ font-weight:600; font-size:15.5px; letter-spacing:-.01em; margin-top:24px; }
.legal-prose .s-num{ font-family:var(--mono); font-size:11px; font-weight:300; color:var(--accent); letter-spacing:.06em; margin-right:9px; }
.legal-prose p{ color:var(--muted); margin-top:13px; font-size:14.25px; line-height:1.72; }
.legal-prose ul,.legal-prose ol{ margin-top:13px; display:grid; gap:10px; list-style:none; padding-left:0; }
.legal-prose li{ color:var(--muted); font-size:14px; line-height:1.62; display:flex; gap:11px; }
.legal-prose li::before{ content:"//"; color:var(--accent); font-family:var(--mono); flex:0 0 auto; }
.legal-prose a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border); }
.legal-prose a:hover{ text-decoration-color:var(--accent); }
.legal-prose strong{ color:var(--text); font-weight:600; }
.legal-table{ width:100%; border-collapse:collapse; margin-top:16px; font-size:13px; }
.legal-table th,.legal-table td{ text-align:left; padding:12px 14px; border:1px solid var(--border); vertical-align:top; color:var(--muted); line-height:1.5; }
.legal-table th{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); background:color-mix(in srgb,var(--surface-2) 40%, transparent); }
.legal-note{ margin-top:16px; border:1px solid color-mix(in srgb,var(--accent) 24%, var(--border)); border-radius:10px; padding:15px 17px;
  background:radial-gradient(360px 140px at 8% 0%, var(--glow), transparent 70%); color:var(--muted); font-size:13.5px; line-height:1.62; }
.legal-note b{ color:var(--text); }
@media (max-width:680px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td, .legal-table th{ display:block; width:auto; }
  .legal-table thead{ display:none; }
  .legal-table tr{ margin-bottom:12px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .legal-table td{ border:0; border-bottom:1px solid var(--border); }
  .legal-table td:last-child{ border-bottom:0; }
}

/* vars the ported leaderboard.css relies on (map onto V4 tokens) */
:root{ --ease:cubic-bezier(.23,1,.32,1); --font-display:var(--sans); --lb-silver:#c7ccd2; --lb-bronze:#c08457; }
.lb-mount{ min-height:120px; }

/* changelog grouped entries (date + status tag) */
.cl-list{ max-width:760px; display:grid; gap:0; }
.cl-entry{ padding:26px 0; border-top:1px solid var(--border); }
.cl-entry:first-child{ border-top:0; padding-top:0; }
.cl-meta{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cl-date{ font-family:var(--mono); font-size:11px; letter-spacing:.075em; text-transform:uppercase; color:var(--muted); }
.cl-tag{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:999px; padding:3px 10px; }
.cl-entry ul{ margin:0; padding-left:0; list-style:none; display:grid; gap:11px; }
.cl-entry li{ color:var(--muted); font-size:14.25px; line-height:1.62; display:flex; gap:12px; }
.cl-entry li::before{ content:"//"; color:var(--accent); font-family:var(--mono); flex:0 0 auto; }
.cl-entry li strong{ color:var(--text); font-weight:600; }

/* status row descriptions (restored from live) */
.status-row .st-text{ display:flex; flex-direction:column; gap:3px; }
.status-row .st-sub{ font-size:12px; color:var(--muted); line-height:1.4; }

/* legal: sticky left sidebar navigation */
.legal-hero{ max-width:none; }
.legal-hero .lede{ max-width:64ch; }
.legal-layout{ display:grid; grid-template-columns:222px minmax(0,1fr); gap:clamp(34px,5vw,72px); align-items:start; }
.legal-body{ min-width:0; max-width:820px; }
.legal-side{ position:sticky; top:calc(var(--nav-h) + 44px); align-self:start; z-index:56; }
.legal-side nav{ display:flex; flex-direction:column; gap:1px; border-left:1px solid var(--border); }
.legal-side .side-label{ font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.075em; text-transform:uppercase; color:var(--dim); padding:0 0 12px 17px; }
.legal-side a{ font-size:13px; line-height:1.45; color:var(--muted); padding:8px 0 8px 17px; border-left:2px solid transparent; margin-left:-1px; transition:color .2s, border-color .2s; }
.legal-side a:hover{ color:var(--text); }
.legal-side a.active{ color:var(--text); border-left-color:var(--accent); }
@media (max-width:920px){
  .legal-layout{ grid-template-columns:1fr; gap:26px; }
  .legal-side{ position:static; }
  .legal-side nav{ flex-direction:row; flex-wrap:wrap; gap:8px; border-left:0; }
  .legal-side .side-label{ display:none; }
  .legal-side a{ border-left:0; border:1px solid var(--border); border-radius:999px; padding:7px 13px; margin-left:0; font-family:var(--mono); font-size:10px; font-weight:300; letter-spacing:.06em; text-transform:uppercase; }
  .legal-side a:hover{ border-color:color-mix(in srgb,var(--accent) 30%, var(--border)); }
  .legal-side a.active{ border-left:0; border-color:color-mix(in srgb,var(--accent) 45%, var(--border)); color:var(--text); }
}