@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700&display=swap');

/* ============================================================
   8BitTrading Academy — MATRIX DESIGN SYSTEM reskin (one-off)
   Cyber-slick order-book / exchange terminal language:
   Space Mono, single blue-black surface #0A0D14, cards lift
   onto it via #11141D, ONE brand-green accent #26A17B, universal
   2px corners, hairline solid borders + subtle dark shadows.
   Flat by intent — no scanlines, no grain, no glows on surfaces.
   "Dimmed levels" (carried from the Mono branch): the 7 REAL
   gexpro level hues are kept but desaturated so the brand green
   stays the loudest interactive color. Originals in comments.
   ============================================================ */

:root {
  /* ── surfaces (single dark surface + one card elevation) ── */
  --bg:  #0a0d14;   /* neutral-primary-soft — the ONLY page surface */
  --bg2: #0a0d14;   /* never alternate — same as bg */
  --bg3: #11141d;   /* neutral-primary-medium — THE card surface (lifts off page) */
  --bg4: #181c28;   /* neutral-tertiary — chips / nodes / inset slots */
  --code-bg: #070a11; /* dark-strong-ish terminal block */

  /* ── brand green (single accent — drives interaction) ── */
  --brand:        #26a17b;
  --brand-strong: #2dc093;   /* fg-brand-strong — text / links / hover */
  --brand-soft:   #143f30;
  --brand-softer: #0e2a20;
  --brand-dim:  rgba(38,161,123,0.12);
  --brand-mid:  rgba(38,161,123,0.24);

  /* ── borders (hairline solid tokens) ── */
  --border:   #1f2433;   /* border-default */
  --border2:  #2a2f3d;   /* border-default-medium */
  --border3:  #383d4d;   /* border-default-strong */
  --divider:  #181c28;   /* border-default-subtle — section dividers */

  /* ── text ── */
  --text:  #e6e9ef;   /* heading */
  --text2: #a0a8b5;   /* body */
  --text3: #6e7786;   /* body-subtle / meta */

  /* ── greek family accents → ALL collapse to brand green
        (single-accent discipline; page identity comes from the
        dimmed level hues in content, not the chrome) ── */
  --gamma: var(--brand);  --gamma-dim: var(--brand-dim);  --gamma-mid: var(--brand-mid);
  --vanna: var(--brand);  --vanna-dim: var(--brand-dim);  --vanna-mid: var(--brand-mid);
  --charm: var(--brand);  --charm-dim: var(--brand-dim);  --charm-mid: var(--brand-mid);

  /* ── REAL gexpro level colors, DIMMED (originals in comments) ── */
  --lvl-ceiling:  #3e8d7d;   /* was #017d67  (muted, grayed off the vivid brand green) */
  --lvl-floor:    #c0913f;   /* was #df8f00 */
  --lvl-magnet:   #41957f;   /* was #028f76 */
  --lvl-trapdoor: #c8554c;   /* was #e73528 */
  --lvl-volzone:  #cc8742;   /* was #ff8100 */
  --lvl-charm:    #9a6aa8;   /* was #ab47bc */
  --lvl-flip:     #cc5350;   /* was #f23645 */

  /* ── status (Matrix sanctioned status tokens) ── */
  --danger: #e03050;  --danger-strong: #ff5070;  --danger-soft: #2a0814;
  --success: #2dc093;
  --warn: #d4a024;    --warn-strong: #ffc04f;    --warn-soft: #2a1f0a;
  --info: #92afd7;    /* sparing metadata accent only */

  /* ── elevation (subtle dark-on-dark) ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), inset 0 1px 0 var(--divider);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.5),  inset 0 1px 0 var(--divider);

  /* fonts — Space Mono, terminal output */
  --font-display: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;

  --maxw: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ── NAV ────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,13,20,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex; align-items: center; gap: 0;
  height: 52px;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); margin-right: auto;
  text-decoration: none;
}
.nav-brand .accent { color: var(--brand); }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-links a {
  color: var(--text3); text-decoration: none;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 2px; transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--bg3); }
.nav-links a.active { color: var(--brand-strong); background: var(--brand-softer); }
.nav-links a.gamma,
.nav-links a.vanna,
.nav-links a.charm { color: var(--brand); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  padding: 80px 40px 56px;
  border-bottom: 1px solid var(--divider);
  position: relative; overflow: hidden;
}
.hero::before { content: none; }
/* faint order-book gridline overlay (the only sanctioned decoration) */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--divider) 1px, transparent 1px),
    linear-gradient(90deg, var(--divider) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 80%);
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
.hero-label {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 18px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.hero-label::before { content: ''; width: 18px; height: 1px; background: var(--brand); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hero h1 .g,
.hero h1 .v,
.hero h1 .c { color: var(--brand-strong); }
.hero-sub {
  font-size: 15px; color: var(--text2); max-width: 580px; line-height: 1.65;
}

/* level-color hero accents (dimmed hues) */
.hero h1 .ceiling  { color: var(--lvl-ceiling); }
.hero h1 .floor    { color: var(--lvl-floor); }
.hero h1 .trapdoor { color: var(--lvl-trapdoor); }

/* ── SECTIONS ───────────────────────────────────────────── */
.section { padding: 64px 40px; border-bottom: 1px solid var(--divider); }
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.section-header {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 34px;
}
.section-num {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand);
}
.section-title {
  font-family: var(--font-display); font-size: 24px;
  font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.section-title.gamma,
.section-title.vanna,
.section-title.charm { color: var(--text); }

h3.block {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  margin-bottom: 18px; color: var(--text);
}
h4.eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  margin-bottom: 14px; color: var(--text3);
  letter-spacing: 0.04em; text-transform: uppercase;
}
p.lede { color: var(--text2); margin-bottom: 18px; font-size: 15px; }
p.lede strong { color: var(--text); font-weight: 700; }
.muted { color: var(--text3); }

/* ── CARDS ──────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.intro-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; padding: 22px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.intro-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand);
}
.intro-card.gamma::before,
.intro-card.vanna::before,
.intro-card.charm::before { background: var(--brand); }
.intro-card .card-label {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 10px; font-weight: 700;
}
.intro-card .card-value {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text); line-height: 1.5;
}
.intro-card .card-value.gamma,
.intro-card .card-value.vanna,
.intro-card .card-value.charm { color: var(--text); }
.intro-card .card-note { font-size: 13px; color: var(--text2); margin-top: 8px; line-height: 1.55; }

/* ── MECHANIC / FLOW BOX ────────────────────────────────── */
.mechanic-box {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; padding: 24px 28px; margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.mechanic-label {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px;
  color: var(--text3); font-weight: 700;
}
.mechanic-box.gamma .mechanic-label,
.mechanic-box.vanna .mechanic-label,
.mechanic-box.charm .mechanic-label { color: var(--text3); }
.flow-chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.flow-node {
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: 2px; padding: 8px 14px; color: var(--text); white-space: nowrap;
}
.flow-arrow { color: var(--brand); font-size: 14px; }
.flow-node.highlight.gamma,
.flow-node.highlight.vanna,
.flow-node.highlight.charm {
  background: var(--brand-softer); border-color: var(--brand-soft); color: var(--brand-strong);
}

/* ── CALLOUTS ───────────────────────────────────────────── */
.callout {
  border-radius: 2px; padding: 16px 20px; display: flex; gap: 12px;
  align-items: flex-start; margin: 22px 0; font-size: 13px; line-height: 1.6;
  background: var(--bg3); border: 1px solid var(--border);
}
.callout .ic { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.callout .body { color: var(--text2); }
.callout .body strong { color: var(--text); font-weight: 700; }
.callout.warn { background: var(--danger-soft); border-color: #4a0e20; }
.callout.warn .ic, .callout.warn .body strong { color: var(--danger-strong); }
.callout.key { background: var(--brand-softer); border-color: var(--brand-soft); }
.callout.key .ic, .callout.key .body strong { color: var(--brand-strong); }
.callout.tip { background: var(--bg4); border-color: var(--border2); }
.callout.tip .ic, .callout.tip .body strong { color: var(--text); }

/* ── TAGS ───────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 700; margin-right: 4px; margin-bottom: 4px;
}
.tag.long  { background: #08251c; color: var(--success); border: 1px solid var(--brand-soft); }
.tag.short { background: var(--danger-soft); color: var(--danger-strong); border: 1px solid #4a0e20; }
.tag.neutral { background: var(--bg4); color: var(--text2); border: 1px solid var(--border2); }
.tag.warn  { background: var(--warn-soft); color: var(--warn-strong); border: 1px solid #4a380f; }

/* ── TABLES ─────────────────────────────────────────────── */
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 28px; }
table.tbl th {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3);
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 700;
  background: var(--bg3);
}
table.tbl td {
  padding: 12px 14px; border-bottom: 1px solid var(--divider);
  font-size: 13.5px; color: var(--text2); vertical-align: top;
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td:first-child { color: var(--text); font-weight: 700; }
.bull { color: var(--success); } .bear { color: var(--danger-strong); } .neu { color: var(--text2); }

/* ── LEVEL SWATCH + LEGEND ──────────────────────────────── */
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.legend-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.swatch { width: 13px; height: 13px; border-radius: 2px; flex-shrink: 0; margin-top: 3px; }
.swatch.line { height: 0; border-top: 2px dashed var(--lvl-flip); border-radius: 0; margin-top: 9px; }
.swatch.ceiling  { background: var(--lvl-ceiling); }
.swatch.floor    { background: var(--lvl-floor); }
.swatch.magnet   { background: var(--lvl-magnet); }
.swatch.trapdoor { background: var(--lvl-trapdoor); }
.swatch.volzone  { background: var(--lvl-volzone); }
.swatch.charm    { background: var(--lvl-charm); }
.legend-item .lg-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); }
.legend-item .lg-name.ceiling  { color: var(--lvl-ceiling); }
.legend-item .lg-name.floor    { color: var(--lvl-floor); }
.legend-item .lg-name.magnet   { color: var(--lvl-magnet); }
.legend-item .lg-name.trapdoor { color: var(--lvl-trapdoor); }
.legend-item .lg-name.volzone  { color: var(--lvl-volzone); }
.legend-item .lg-name.charm    { color: var(--lvl-charm); }
.legend-item .lg-desc { font-size: 12px; color: var(--text2); line-height: 1.45; margin-top: 2px; }

/* ── LEVEL DEEP-DIVE CARD (the centerpiece) ─────────────── */
.level-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; padding: 0; margin-bottom: 28px; overflow: hidden;
  scroll-margin-top: 64px; box-shadow: var(--shadow-xs);
}
.level-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  position: relative; background: var(--bg4);
}
.level-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.level-card.ceiling  .level-head::before { background: var(--lvl-ceiling); }
.level-card.floor    .level-head::before { background: var(--lvl-floor); }
.level-card.magnet   .level-head::before { background: var(--lvl-magnet); }
.level-card.trapdoor .level-head::before { background: var(--lvl-trapdoor); }
.level-card.volzone  .level-head::before { background: var(--lvl-volzone); }
.level-card.charm    .level-head::before { background: var(--lvl-charm); }
.level-card.flip     .level-head::before { background: var(--lvl-flip); }
.level-card.conf     .level-head::before { background: linear-gradient(var(--lvl-magnet), var(--lvl-charm)); }
.level-icon {
  width: 32px; height: 32px; border-radius: 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--bg3); border: 1px solid var(--border2);
}
.level-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.1; }
.level-card.ceiling  .level-name { color: var(--lvl-ceiling); }
.level-card.floor    .level-name { color: var(--lvl-floor); }
.level-card.magnet   .level-name { color: var(--lvl-magnet); }
.level-card.trapdoor .level-name { color: var(--lvl-trapdoor); }
.level-card.volzone  .level-name { color: var(--lvl-volzone); }
.level-card.charm    .level-name { color: var(--lvl-charm); }
.level-card.flip     .level-name { color: var(--lvl-flip); }
.level-card.conf     .level-name { color: var(--lvl-charm); }
.level-meta { margin-left: auto; text-align: right; font-size: 10px; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.6; }
.level-meta .greek-src { color: var(--brand); }
.level-body { padding: 22px 24px; }
.level-row { margin-bottom: 22px; }
.level-row:last-child { margin-bottom: 0; }
.level-row .rk {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
  color: var(--text3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.level-row .rk::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
.level-row .rv { font-size: 13.5px; color: var(--text2); line-height: 1.65; }
.level-row .rv strong { color: var(--text); font-weight: 700; }
.bullets { list-style: none; }
.bullets li { position: relative; padding-left: 18px; margin-bottom: 7px; font-size: 13.5px; color: var(--text2); line-height: 1.6; }
.bullets li::before { content: '>'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.bullets li strong { color: var(--text); font-weight: 700; }

/* ── SCENARIO / PROBABILITY TREE ────────────────────────── */
.scenario-tree { display: flex; flex-direction: column; gap: 8px; }
.scn {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 2px; padding: 12px 14px; align-items: start;
}
.scn-prob {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 0; text-align: center; border-radius: 2px;
}
.scn-prob.high { background: #08251c; color: var(--success); border: 1px solid var(--brand-soft); }
.scn-prob.med  { background: var(--warn-soft); color: var(--warn-strong); border: 1px solid #4a380f; }
.scn-prob.low  { background: var(--bg3); color: var(--text3); border: 1px solid var(--border2); }
.scn-body .scn-name { font-size: 12.5px; color: var(--text); font-weight: 700; margin-bottom: 3px; }
.scn-body .scn-tell { font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.scn-body .scn-tell .lbl { color: var(--text3); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; font-weight: 700; }

/* ── CHART-STRING SNIPPET ───────────────────────────────── */
.code {
  background: var(--code-bg); border: 1px solid var(--border2); border-radius: 2px;
  padding: 14px 16px; font-size: 11.5px; color: var(--text2); line-height: 1.7;
  overflow-x: auto; white-space: pre; margin: 14px 0;
}
.code .c-ceiling  { color: var(--lvl-ceiling); }
.code .c-floor    { color: var(--lvl-floor); }
.code .c-magnet   { color: var(--lvl-magnet); }
.code .c-trapdoor { color: var(--lvl-trapdoor); }
.code .c-volzone  { color: var(--lvl-volzone); }
.code .c-charm    { color: var(--lvl-charm); }
.code .c-flip     { color: var(--lvl-flip); }
.code .c-dim      { color: var(--text3); }

/* ── PAGE CARDS (index hub) ─────────────────────────────── */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.hub-card {
  display: block; text-decoration: none;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; padding: 22px; transition: border-color 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden; box-shadow: var(--shadow-xs);
}
.hub-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand); }
.hub-card.gamma::before,
.hub-card.vanna::before,
.hub-card.charm::before,
.hub-card.plays::before { background: var(--brand); }
/* the levels card bar previews the dimmed level palette (informative) */
.hub-card.levels::before { background: linear-gradient(90deg, var(--lvl-ceiling), var(--lvl-floor), var(--lvl-trapdoor)); }
.hub-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }
.hub-step { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; font-weight: 700; }
.hub-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.hub-desc { font-size: 13px; color: var(--text2); line-height: 1.55; }

/* ── STEP / PATH ────────────────────────────────────────── */
.path { display: flex; flex-direction: column; gap: 2px; }
.path-step {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--divider);
}
.path-step:last-child { border-bottom: none; }
.path-num {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--brand); line-height: 1.3;
}
.path-step.gamma .path-num,
.path-step.vanna .path-num,
.path-step.charm .path-num { color: var(--brand); }
.path-step.levels .path-num { color: var(--lvl-trapdoor); }
.path-h { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.path-d { font-size: 12px; color: var(--text2); line-height: 1.55; }
.path-d a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.path-d a:hover { text-decoration: none; }

/* ── PREV / NEXT ────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; }
.pager a {
  flex: 1; text-decoration: none; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; padding: 16px 20px; transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.pager a:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }
.pager .pg-dir { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; font-weight: 700; }
.pager .pg-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); }
.pager a.next { text-align: right; }

/* ── ASK-YOUR-TEACHER REMINDER ──────────────────────────── */
.teacher {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--brand-softer); border: 1px solid var(--brand-soft);
  border-radius: 2px; padding: 16px 20px; margin: 28px 0; font-size: 12px; line-height: 1.6;
}
.teacher .ic { color: var(--brand-strong); font-size: 15px; }
.teacher .body { color: var(--text2); }
.teacher .body strong { color: var(--brand-strong); }

/* ── SOURCE / CITATION ──────────────────────────────────── */
.source-note {
  font-size: 11px; color: var(--text3); margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--divider);
}
.source-note strong { color: var(--text2); }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); padding: 30px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-brand {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3);
}
.footer-note { font-size: 11px; color: var(--text3); }
.footer-note a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.footer-note a:hover { text-decoration: none; }

/* ── GLOSSARY ───────────────────────────────────────────── */
.gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.gloss dt { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); margin-top: 16px; }
.gloss dd { font-size: 12px; color: var(--text2); line-height: 1.55; }

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* responsive */
@media (max-width: 720px) {
  .card-grid, .card-grid.three, .gloss { grid-template-columns: 1fr; }
  .hero, .section, nav, footer { padding-left: 22px; padding-right: 22px; }
  .scn { grid-template-columns: 56px 1fr; }

  /* nav: 6 links no longer fit one row — stack brand, let the menu
     scroll horizontally on one tidy line instead of clipping/wrapping */
  nav {
    height: auto; min-height: 52px;
    flex-direction: column; align-items: stretch;
    gap: 8px; padding-top: 9px; padding-bottom: 9px;
  }
  .nav-brand { margin-right: 0; }
  .nav-links {
    width: 100%;
    flex-wrap: nowrap; overflow-x: auto;
    gap: 2px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox: hide the bar */
  }
  .nav-links::-webkit-scrollbar { display: none; }   /* WebKit: hide the bar */
  .nav-links a { white-space: nowrap; flex: 0 0 auto; padding: 6px 12px; }

  /* wide data tables (up to 5 cols) become a horizontal-scroll container
     on phones — catches any genuine overflow without forcing text cells
     wide; per the design system's table spec */
  table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}