/* ============================================================
   SCARAB — scarab.city stylesheet v2
   Tokens are the frozen app-chrome set (oasis primary, parch light).
   Type: Marcellus wordmark · Space Grotesk display + numerals ·
   Hanken Grotesk body · IBM Plex Mono micro. Fraunces retired.
   Severity bands are theme invariant except the low band.
   ============================================================ */

/* ---------- the stones (logo, never themed) ---------- */
:root{
  --faience:#56A79C; --lapis:#2E4A8D; --carnelian:#B9473C;
  --leaf:#CFA64B; --wordmark-gold:#D5B264; --head-gold:#DFB95F;
  --night-a:#0C1020; --night-b:#04050B; --night-c:#000000;
  /* severity bands */
  --b-set:#7AAE83; --b-watch:#E0B15E; --b-tense:#E07A4F; --b-sev:#DD4B44;
}

/* ---------- dark · primary stage ---------- */
:root,[data-theme="dark"]{
  --stage:#000000; --bg:#000000; --surface:#0C0D10; --surface-2:#1A1C22;
  --card:#15161C; --card-bd:#30333D; --line:#212329; --line-2:#3C3F48;
  --text:#F3F5F9; --muted:#B3B9C5; --dim:#828A98; --faint:#4A4E58;
  --accent:#E3C375; --accent-tint:rgba(227,195,117,.10);
  --warm:#CBA98A; --warm-bg:#1C1710; --warm-bd:#46372A;
  --gold:#E3C375; --b-low:#F2F4F8;
  --shadow:rgba(0,0,0,.9);
  --grid-ink:rgba(227,195,117,.05);
  --mark-water:#5B9BD9; --mark-ember:#E0854A; --mark-ice:#74C7D8; --mark-sky:#9B8CE8;
  --mark-earth:#C7A055; --mark-life:#7CBE84; --mark-war:#DC5F54; --mark-crime:#63B0A0;
  --mark-blind:#7F8592;
  color-scheme:dark;
}

/* ---------- oasis · warm stage ---------- */
[data-theme="oasis"]{
  --stage:#070202; --bg:#0A0303; --surface:#160606; --surface-2:#241010;
  --card:#1C0808; --card-bd:#5A1C1C; --line:#3A1010; --line-2:#6B2020;
  --text:#FBE9E6; --muted:#DDB0A6; --dim:#B27D72; --faint:#7A443C;
  --accent:#F57A64; --accent-tint:rgba(245,122,100,.12);
  --warm:#D6A98A; --warm-bg:#1E0C06; --warm-bd:#5A3320;
  --gold:#E3C375; --b-low:#F2F4F8;
  --shadow:rgba(0,0,0,.82);
  --grid-ink:rgba(245,122,100,.055);
  --mark-water:#5B9BD9; --mark-ember:#E0854A; --mark-ice:#74C7D8; --mark-sky:#9B8CE8;
  --mark-earth:#C7A055; --mark-life:#7CBE84; --mark-war:#DC5F54; --mark-crime:#63B0A0;
  --mark-blind:#7F8592;
  color-scheme:dark;
}

/* ---------- parch · light stage ---------- */
[data-theme="parch"]{
  --stage:#E9EAEE; --bg:#F4F4F6; --surface:#FFFFFF; --surface-2:#E4E6EC;
  --card:#FFFFFF; --card-bd:#D7DEEA; --line:rgba(20,22,28,.10); --line-2:rgba(20,22,28,.26);
  --text:#17191E; --muted:#4E5670; --dim:#737D95; --faint:#A2AABC;
  --accent:#12808F; --accent-tint:rgba(18,128,143,.10);
  --warm:#9A6B3C; --warm-bg:#FBF3E8; --warm-bd:#E6D3BC;
  --gold:#B8801C; --b-low:#2F6BA8;
  --shadow:rgba(40,52,84,.16);
  --grid-ink:rgba(20,22,28,.05);
  --mark-water:#2F6BA8; --mark-ember:#B85E28; --mark-ice:#2C8298; --mark-sky:#5C49B8;
  --mark-earth:#8A6A26; --mark-life:#357F4C; --mark-war:#B33C34; --mark-crime:#2A7568;
  --mark-blind:#737D95;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:15.5px; line-height:1.66;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main{display:block}
a{color:var(--accent); text-decoration:none; transition:color .16s ease}
a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
::selection{background:var(--accent-tint)}
img,svg{display:block; max-width:100%}
hr{border:0; border-top:1px solid var(--line); margin:0}

.wrap{max-width:1120px; margin:0 auto; padding:0 26px}
.prose{max-width:66ch}
.wrap.prose{max-width:1120px}
.wrap.prose > *{max-width:74ch}
.prose p{margin:0 0 1.1em; color:var(--muted)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text); font-weight:600}

/* ---------- type roles ---------- */
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif; font-weight:400; line-height:1.08; margin:0; letter-spacing:-.018em}
h1{font-size:clamp(38px,5.6vw,66px)}
h2{font-size:clamp(26px,3.3vw,40px)}
h3{font-size:19px; font-weight:500; letter-spacing:-.01em}
.lede{font-size:17.5px; line-height:1.62; color:var(--muted); max-width:58ch}
.stamp,.eyebrow,.f-col h4{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
.footer{--dim:#9AA2B0}
[data-theme="oasis"] .footer{--dim:#C79A8E}
[data-theme="parch"] .footer{--dim:#5C6478}
.stamp{color:var(--dim)}
.eyebrow{color:var(--accent); display:inline-block}
.num{font-family:"Space Grotesk",sans-serif; font-variant-numeric:tabular-nums lining-nums}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px}
.brand{display:flex; align-items:center; gap:12px}
.brand:hover{text-decoration:none}
.brand-mark{width:30px; height:30px; flex:none}
.mk-l{display:none}
[data-theme="parch"] .mk-d{display:none}
[data-theme="parch"] .mk-l{display:block}
.wordmark{
  font-family:"Marcellus",serif; font-size:16px; letter-spacing:.4em;
  color:var(--wordmark-gold); text-transform:uppercase; padding-left:.4em; line-height:1;
}
.cursive{
  font-family:"Pinyon Script","Marcellus",cursive; text-transform:none; letter-spacing:0;
  font-size:23px; line-height:1; color:var(--faience); margin-left:-.15em;
  position:relative; top:2px;
}
[data-theme="parch"] .cursive{color:var(--accent)}
.brand:hover .cursive{color:var(--gold)}
.brand:hover .wordmark{color:var(--gold)}
.nav-links{display:flex; align-items:center; gap:8px}
.nav-links a{
  color:var(--muted); font-size:13.5px; font-weight:500; padding:8px 13px; border-radius:999px;
  border:1px solid transparent; transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.nav-links a:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent); text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--text); background:var(--surface-2)}
.theme-btn{
  appearance:none; background:none; border:1px solid var(--line-2); color:var(--dim);
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:8px 13px; border-radius:999px; cursor:pointer; margin-left:8px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.theme-btn:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent)}
.theme-btn:active{opacity:.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#000000; font-family:"Space Grotesk",sans-serif;
  font-weight:500; font-size:14.5px; padding:13px 24px; border-radius:999px;
  border:1px solid var(--accent); transition:filter .16s ease,transform .16s ease;
}
[data-theme="oasis"] .btn{color:#0A0303}
[data-theme="parch"] .btn{color:#FFFFFF}
.btn:hover{text-decoration:none; filter:brightness(1.08); transform:translateY(-1px)}
.btn:active{transform:translateY(0); opacity:.85}
.btn-ghost{
  background:transparent; color:var(--text); border:1px solid var(--line-2);
}
.btn-ghost:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent); filter:none}
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--warm); background:var(--warm-bg);
  border:1px solid var(--warm-bd); padding:9px 14px; border-radius:999px;
}

/* ============================================================
   HERO — the night field
   ============================================================ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(130% 110% at 30% 12%, var(--night-a) 0%, var(--night-b) 48%, var(--night-c) 100%);
}
[data-theme="parch"] .hero{
  background:radial-gradient(130% 110% at 30% 12%, #FFFFFF 0%, #F1EFEA 45%, #E4E1DA 100%);
}
.hero::before{ /* the survey grid */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background:
    repeating-linear-gradient(to right, rgba(214,201,168,.045) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(214,201,168,.045) 0 1px, transparent 1px 88px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 26%, transparent 74%);
  mask-image:radial-gradient(120% 90% at 50% 30%, #000 26%, transparent 74%);
}
[data-theme="parch"] .hero::before{
  background:
    repeating-linear-gradient(to right, rgba(20,22,28,.06) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(20,22,28,.06) 0 1px, transparent 1px 88px);
}
.hero::after{ /* faience glow at the horizon */
  content:""; position:absolute; left:50%; bottom:-16%; transform:translateX(-50%);
  width:min(1100px,125%); height:54%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(86,167,156,.17), transparent 70%);
}
[data-theme="parch"] .hero::after{background:radial-gradient(closest-side, rgba(18,128,143,.14), transparent 72%)}
.hero-in{position:relative; z-index:2; padding-block:92px 104px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0}
.hero h1{color:#F7F3EC; max-width:24ch; margin:0 auto; font-weight:300; font-size:clamp(32px,4.4vw,52px)}
[data-theme="parch"] .hero h1{color:#17191E}
.hero .lede{margin:26px auto 0; color:rgba(238,232,221,.78); max-width:64ch}
[data-theme="parch"] .hero .lede{color:#4E5670}
.mast{width:min(560px,80vw); height:auto; margin:0 auto 26px; opacity:.97}
.hero-word{
  font-family:"Marcellus",serif; font-size:clamp(30px,4.6vw,54px); letter-spacing:.42em;
  text-transform:uppercase; color:var(--wordmark-gold); line-height:1;
  margin:0 0 22px; padding-left:.42em;
}
[data-theme="parch"] .hero-word{color:#9A7A2E}
.hero .eyebrow{color:var(--faience); margin-bottom:26px; letter-spacing:.26em}
[data-theme="parch"] .hero .eyebrow{color:var(--accent)}
.tagline{
  font-family:"Marcellus",serif; font-size:clamp(20px,2.3vw,27px); letter-spacing:.03em;
  color:#EFE3C9; margin:0 0 30px; line-height:1.3; font-weight:400;
}
[data-theme="parch"] .tagline{color:var(--accent)}
.tagline .cursive{font-size:1.55em; margin:0 0 0 .04em; top:5px; color:inherit}
.index-mark{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px;
}
.index-mark span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(236,228,214,.55)}
[data-theme="parch"] .index-mark span{color:var(--dim)}
.index-mark i{display:block; width:46px; height:1px; background:rgba(214,201,168,.28)}
[data-theme="parch"] .index-mark i{background:rgba(20,22,28,.18)}
.cta-row{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:36px}
.hero-rule{position:relative; z-index:2; display:flex; justify-content:center; gap:0; margin-top:64px}
.scan{ /* one slow instrument sweep */
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.scan i{
  position:absolute; top:0; bottom:0; width:220px; display:block;
  background:linear-gradient(90deg, transparent, rgba(86,167,156,.09), transparent);
  animation:sweep 11s linear infinite;
}
@keyframes sweep{ from{transform:translateX(-260px)} to{transform:translateX(calc(100vw + 260px))} }
@media (prefers-reduced-motion:reduce){ .scan{display:none} }
[data-theme="parch"] .scan{display:none}

/* the hero telemetry strip */
.telemetry{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center;
  gap:0; margin-top:70px; border-top:1px solid rgba(214,201,168,.14);
  border-bottom:1px solid rgba(214,201,168,.14);
}
[data-theme="parch"] .telemetry{border-color:rgba(20,22,28,.10)}
.telemetry div{
  flex:1 1 200px; padding:20px 22px; text-align:left;
  border-left:1px solid rgba(214,201,168,.14);
}
[data-theme="parch"] .telemetry div{border-left-color:rgba(20,22,28,.10)}
.telemetry div:first-child{border-left:0; padding-left:0}
.telemetry div:last-child{padding-right:0}
.telemetry b{
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:27px;
  font-variant-numeric:tabular-nums; color:#F0E9DC; letter-spacing:-.01em; line-height:1.2;
}
[data-theme="parch"] .telemetry b{color:#17191E}
.telemetry span{display:block; margin-top:5px; font-family:"IBM Plex Mono",monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(236,228,214,.5)}
[data-theme="parch"] .telemetry span{color:var(--dim)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:96px 0; border-bottom:1px solid var(--line); position:relative}
.section:last-of-type{border-bottom:0}
.section-head{margin-bottom:46px; max-width:70ch}
.section-head .eyebrow{display:block; margin-bottom:16px}
.section-head p{margin:18px 0 0; color:var(--muted); font-size:16.5px; max-width:62ch}
.idx{color:var(--faint); margin-right:.9em}

/* two-column: card + ruler */
.read{display:grid; grid-template-columns:402px 1fr; gap:72px; align-items:start}

/* the ruler */
.ruler{margin:8px 0 0}
.ruler-bar{display:flex; height:10px; border-radius:999px; overflow:hidden}
.ruler-bar span{display:block; height:100%}
.r-low{flex:2; background:var(--b-low)}
.r-mod{flex:2; background:var(--b-set)}
.r-high{flex:2; background:var(--b-watch)}
.r-vhigh{flex:2; background:var(--b-tense)}
.r-crit{flex:2; background:var(--b-sev)}
.ruler-ticks{display:flex; justify-content:space-between; margin-top:10px}
.ruler-ticks .stamp{letter-spacing:.06em; font-size:11px}
.ruler-words{display:flex; margin-top:16px; gap:0}
.ruler-words span{
  flex:1; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); padding-right:8px;
}
.ruler-words span:last-child{text-align:right; padding-right:0}
.rw-low,.rw-mod,.rw-high,.rw-vhigh,.rw-crit{flex:1}
.note{font-size:13.5px; color:var(--dim); max-width:62ch; margin:22px 0 0}

/* band legend rows */
.bands{list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column}
.bands li{display:flex; align-items:baseline; gap:16px; padding:13px 0; border-top:1px solid var(--line)}
.bands li:last-child{border-bottom:1px solid var(--line)}
.bands .dot{width:9px; height:9px; border-radius:50%; flex:none; transform:translateY(-1px)}
.bands .rng{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--dim); min-width:56px}
.bands .wd{font-family:"Space Grotesk",sans-serif; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; min-width:104px}
.bands .ds{font-size:14px; color:var(--muted)}

/* ============================================================
   THE CARD — the frozen reading, shown at true size
   ============================================================ */
.card{
  width:100%; max-width:402px; background:#06080D; border-radius:26px;
  padding:30px 34px 26px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.045);
  color:#F2F4F8; font-family:"Hanken Grotesk",sans-serif; position:relative; overflow:hidden;
}
.card-city{font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:28px; letter-spacing:-.01em; line-height:1.1}
.card-dates{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em;
  color:#A6AEBC; margin-top:9px}
.score-wrap{position:relative; margin:26px 0 0; display:flex; align-items:flex-end; gap:13px}
.score-pool{
  position:absolute; left:-12px; bottom:-6px; width:250px; height:40px; pointer-events:none;
  background:radial-gradient(50% 70% at 50% 50%, var(--sc) 0%, transparent 70%);
  opacity:.351;
}
.score{
  position:relative; font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(112px,30vw,140px); line-height:.82; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums lining-nums; color:var(--sc);
}
.trend{position:relative; display:flex; align-items:center; gap:7px; padding-bottom:2px}
.trend svg{display:block}
.trend span{font-family:"Space Grotesk",sans-serif; font-size:10.5px; letter-spacing:.22em; color:#A6AEBC}
.weather{display:flex; align-items:center; gap:11px; margin-top:24px}
.weather .temp{font-family:"Space Grotesk",sans-serif; font-size:19px; color:#F2F4F8; font-variant-numeric:tabular-nums}
.weather .wd{font-family:"Space Grotesk",sans-serif; font-size:11px; letter-spacing:.2em; color:#A6AEBC}
.hz{display:flex; gap:12px; margin-top:22px; align-items:flex-start}
.hz svg{flex:none; margin-top:1px}
.hz .hz-t{font-family:"Space Grotesk",sans-serif; font-size:11.5px; letter-spacing:.2em; color:#C6CCD6; display:block; margin-bottom:5px}
.hz p{margin:0; font-size:14.5px; line-height:22px; color:#C9CFD9}
.card-prose{margin:22px 0 0; font-size:15px; line-height:24px; color:#D5DAE3}
.card-foot{display:flex; align-items:center; gap:10px; margin-top:28px}
.card-foot span{font-size:13px; color:#B6BDC9}
.card-cap{margin:18px 0 0; font-size:12px; color:var(--dim); font-family:"IBM Plex Mono",monospace;
  letter-spacing:.1em; text-transform:uppercase; text-align:center; max-width:402px}

/* ============================================================
   HAZARD FAMILIES
   ============================================================ */
.families{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.fam{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px 20px; display:flex; flex-direction:column; gap:14px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.fam:hover{background:var(--accent-tint); border-color:var(--accent); transform:translateY(-2px)}
.fam svg{width:26px; height:26px}
.fam b{font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text)}
.fam small{display:block; margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--muted);
  font-weight:400; letter-spacing:0; text-transform:none}

/* ============================================================
   THE ENGINE
   ============================================================ */
.engine{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
.step{padding:30px 26px 32px; border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.step:first-child{border-left:0}
.step .stamp{color:var(--accent)}
.step h3{font-size:17.5px}
.step p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.engine-eq{
  margin:38px 0 0; padding:26px 28px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
}
.engine-eq em{font-style:normal; font-family:"Space Grotesk",sans-serif; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text)}
.engine-eq i{font-style:normal; color:var(--faint); font-family:"IBM Plex Mono",monospace; font-size:15px}
.engine-eq .out{color:var(--accent)}

/* stance rows */
.stance{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.stance li{display:grid; grid-template-columns:190px 1fr; gap:26px; padding:22px 0;
  border-bottom:1px solid var(--line)}
.stance .stamp{color:var(--accent); padding-top:3px}
.stance p{margin:0; color:var(--muted)}
.stance strong{color:var(--text); font-weight:600}

/* closing */
.close-band{text-align:center; padding-block:104px}
.close-band h2{max-width:20ch; margin:0 auto}
.close-band p{margin:20px auto 0; color:var(--muted); max-width:52ch; font-size:16.5px}
.close-band .cta-row{margin-top:34px}
.close-mark{width:52px; margin:0 auto 30px; opacity:.9}

/* ---------- inner page heads ---------- */
.page-head{padding:84px 0 56px; border-bottom:1px solid var(--line); position:relative;
  background:linear-gradient(180deg, var(--surface), transparent)}
.page-head .eyebrow{display:block; margin-bottom:16px}
.page-head .lede{margin-top:20px}

/* ---------- lists / faq / legal ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:44px}
.beat h3{margin-bottom:10px}
.beat h3 .g{color:var(--accent)}
.beat p{color:var(--muted); margin:0}
.trust{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
.pipeline{display:flex; flex-direction:column; margin-top:6px}
.pipe-step{display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line)}
.pipe-step:last-child{border-bottom:1px solid var(--line)}
.pipe-step .stamp{padding-top:3px; min-width:112px; color:var(--accent)}
.pipe-step p{margin:0; color:var(--muted); font-size:14.5px}
.pipe-step strong{color:var(--text); font-weight:600}

.dont{list-style:none; margin:0; padding:0}
.dont li{padding:18px 0 18px 34px; border-top:1px solid var(--line); position:relative; color:var(--muted)}
.dont li:last-child{border-bottom:1px solid var(--line)}
.dont li::before{content:"·"; position:absolute; left:6px; top:16px; color:var(--accent); font-size:22px; line-height:1}
.dont li strong{color:var(--text); font-weight:600}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:22px;
  padding:22px 4px; font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:18.5px;
  letter-spacing:-.01em; border-radius:10px; transition:background .16s ease,color .16s ease;
}
.faq summary:hover{background:var(--accent-tint); color:var(--accent); padding-left:14px; padding-right:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-family:"Hanken Grotesk",sans-serif; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .prose{padding:0 4px 24px; color:var(--muted)}

.legal h2{font-size:22px; margin:48px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal .prose p,.legal li{color:var(--muted)}
.legal ul{padding-left:20px; margin:0 0 1.1em}
.pending{
  border:1px dashed var(--warm-bd); background:var(--warm-bg); color:var(--warm);
  border-radius:14px; padding:18px 20px; font-size:13.5px; margin:16px 0;
}
.updated{margin-top:60px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); background:var(--stage)}
.footer-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; padding-block:62px 32px}
.footer .brand{margin-bottom:16px}
.f-tag{margin:0; color:var(--muted); font-size:14px; max-width:32ch}
.f-col h4{color:var(--dim); margin:0 0 14px; font-weight:500; font-size:11px}
.f-col a{display:block; color:var(--text); font-size:14.5px; padding:6px 10px; margin-left:-10px;
  border-radius:8px; transition:background .16s ease,color .16s ease}
.f-col a:hover{color:var(--accent); background:var(--accent-tint); text-decoration:none}
.footer-base{border-top:1px solid var(--line); padding-block:22px 30px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-base .stamp{font-size:10.5px; color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .read{grid-template-columns:1fr; gap:52px; justify-items:start}
  .families{grid-template-columns:repeat(3,1fr)}
  .engine{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:0}
  .grid-3{grid-template-columns:1fr; gap:34px}
  .trust{grid-template-columns:1fr; gap:38px}
  .footer-in{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:660px){
  .nav-links a{padding:8px 10px; font-size:13px}
  .hero-in{padding-block:64px 76px}
  .section{padding:68px 0}
  .families{grid-template-columns:repeat(2,1fr)}
  .engine{grid-template-columns:1fr}
  .step{border-left:0}
  .stance li{grid-template-columns:1fr; gap:8px}
  .telemetry div{flex:1 1 50%; border-left:0}
  .footer-in{grid-template-columns:1fr}
  .close-band{padding-block:76px}
}

/* the reading settles: trend and glow arrive with the number, not before */
.card.is-reading .score-pool,
.card.is-reading .trend{opacity:0; transition:opacity .7s ease}
.card.is-reading.is-settled .score-pool{opacity:.351}
.card.is-reading.is-settled .trend{opacity:1}
@media (prefers-reduced-motion:reduce){
  .card.is-reading .score-pool{opacity:.351}
  .card.is-reading .trend{opacity:1}
}

/* ============================================================
   v4 additions (High Prince, 13 Sep 2026): the card in the ruled
   order, plain fact rows, the money block, verbatim legal pages.
   Everything above is v3's, untouched.
   ============================================================ */
.weather .wwords{font-family:"Hanken Grotesk",sans-serif; font-style:italic; font-size:14.5px; color:#C9CFD9; letter-spacing:0}
.card-prose + .card-prose{margin-top:14px}
.card-line{margin:20px 0 0; font-size:14.5px; line-height:22px; color:#C9CFD9}
.card-line b{display:block; font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#C6CCD6; margin-bottom:5px}
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{display:grid; grid-template-columns:210px 1fr; gap:26px; padding:20px 0; border-bottom:1px solid var(--line)}
.facts li b{font-family:"Space Grotesk",sans-serif; font-weight:500; color:var(--text); font-size:15.5px}
.facts li p{margin:0; color:var(--muted)}
.money{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.money div{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 22px}
.money b{display:block; font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:24px; color:var(--text); letter-spacing:-.01em}
.money span{display:block; margin-top:8px; color:var(--muted); font-size:14.5px; line-height:1.55}
.legal p.lead-p{color:var(--muted)}
.legal p.lead-p b{color:var(--text); font-weight:600}
.legal p.emph{color:var(--text); font-weight:500; font-size:16.5px}
.legal h2.n{font-size:17px; margin:34px 0 10px; font-weight:500}
.credits{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.credits li{padding:16px 0; border-bottom:1px solid var(--line)}
.credits li b{display:block; color:var(--text); font-weight:600; font-size:15px; margin-bottom:4px}
.credits li span{color:var(--muted); font-size:14px; line-height:1.6}
.stamp-line{margin-top:6px; font-size:12.5px; color:var(--dim)}
@media (max-width:660px){.facts li{grid-template-columns:1fr; gap:8px} .money{grid-template-columns:1fr}}