/* ══════════════════════════════════════════════════════════════
   HEXAD.GAMIFIED.UK — Centralised Design System
   Playfair Display · Source Sans 3 · Source Code Pro
   ══════════════════════════════════════════════════════════════ */

/* ── Reset + variables ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #FFFFFF;
  --surface:      #F5F5F5;
  --rule:         #E2E2E2;
  --text:         #1A1A18;
  --muted:        #555555;
  --faint:        #888888;
  --accent:       #3AAFA9;
  --accent-light: #E0F5F3;
  --Ph:#73B17D; --Ph-bg:#EDF6EF;
  --S: #4F8BD8; --S-bg: #EAF0FB;
  --FS:#9A79D4; --FS-bg:#F2EEF9;
  --A: #F7BD00; --A-bg: #FEF9E0;
  --P: #F97A45; --P-bg: #FEF1EB;
  --D: #D84E4E; --D-bg: #FAEDED;
  --r4:4px; --r8:8px; --r12:12px;
  /* legacy aliases */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
}

html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Source Sans 3',sans-serif;
  background:#fff; color:var(--text);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; min-height:100vh;
}
a { color:var(--text); }
p { margin-bottom:1rem; }
p:last-child { margin-bottom:0; }

/* ── Type scale ─────────────────────────────────────────────── */
h1,h2,h3 { font-family:'Source Sans 3',sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
h1 { font-size:clamp(32px,5vw,56px); }
h2 { font-size:clamp(22px,3vw,32px); font-weight:600; }
h3 { font-size:20px; }
h4 { font-family:'Source Sans 3',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.font-display { font-family:'Source Sans 3',sans-serif; }
.font-mono    { font-family:'Source Code Pro',monospace; }

.eyebrow {
  display:block; font-family:'Source Code Pro',monospace;
  font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width:1100px; margin:0 auto; padding:0 40px; }
.section   { padding:72px 0; border-top:1px solid var(--rule); }
.section:first-of-type { border-top:none; }

/* ── Framework nav (wide) ───────────────────────────────────── */
.site-nav {
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--rule);
}
.nav-inner {
  max-width:1100px; margin:0 auto; padding:0 40px;
  height:56px; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { font-family:'Source Code Pro',monospace; font-size:13px; font-weight:500; color:var(--text); text-decoration:none; margin-right:auto; }
.nav-logo span { color:var(--accent); }
.nav-brand { font-family:'Source Code Pro',monospace; font-size:13px; font-weight:500; color:var(--text); text-decoration:none; margin-right:auto; letter-spacing:.04em; }
.nav-brand span { color:var(--accent); }
.nav-links { display:flex; gap:4px; list-style:none; }
.nav-links a {
  font-size:13px; color:var(--muted); text-decoration:none; font-weight:400;
  padding:6px 12px; border-radius:var(--r4);
  transition:color .12s, background .12s;
}
.nav-links a:hover { color:var(--text); background:var(--surface); }
.nav-links a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; color:var(--text); background:var(--surface); }
.nav-links a.active { color:var(--accent); font-weight:600; }
.nav-cta {
  background:var(--accent)!important; color:#fff!important;
  padding:7px 16px!important; border-radius:var(--r4)!important;
  font-size:12px!important; font-weight:600!important;
  margin-left:8px; transition:background .12s!important;
}
.nav-cta:hover { background:#2a8f8a!important; }
.nav-cta:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Narrow nav (test / results) ───────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--rule);
  height:52px; display:flex; align-items:center;
}
.nav-slim {
  max-width:1040px; margin:0 auto; padding:0 24px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-slim-logo { font-family:'Source Code Pro',monospace; font-size:12px; font-weight:500; color:var(--text); text-decoration:none; opacity:.7; }
.nav-slim-links { display:flex; gap:20px; list-style:none; }
.nav-slim-links a { font-size:13px; color:var(--muted); text-decoration:none; transition:color .12s; }
.nav-slim-links a:hover { color:var(--text); }
.nav-slim-links a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; color:var(--text); }
.nav-back { font-size:13px; color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:6px; transition:color .12s; }
.nav-back:hover { color:var(--text); }
.nav-back:focus-visible { outline:2px solid var(--accent); outline-offset:2px; color:var(--text); }

/* ── Shared buttons ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:var(--r8);
  font-size:13px; font-weight:600; text-decoration:none;
  cursor:pointer; border:none; transition:all .12s;
  font-family:'Source Sans 3',sans-serif;
}
.btn-primary { background:var(--text); color:var(--bg); }
.btn-primary:hover { background:#333; }
.btn-primary:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
.btn-accent  { background:var(--accent); color:#fff; }
.btn-accent:hover { background:#2a8f8a; }
.btn-accent:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-outline { background:transparent; color:var(--muted); border:1.5px solid var(--rule); }
.btn-outline:hover { border-color:var(--text); color:var(--text); }
.btn-outline:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-lg { padding:14px 32px; font-size:16px; }

/* ── Shared components ──────────────────────────────────────── */
.card { background:#fff; border:1px solid var(--rule); border-radius:var(--r8); }
.callout { background:var(--accent-light); border-left:3px solid var(--accent); padding:16px 20px; border-radius:0 var(--r4) var(--r4) 0; font-size:14px; line-height:1.6; color:var(--text); }
.type-pip { width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0; }
.tp-Ph{background:var(--Ph);} .tp-S{background:var(--S);}
.tp-FS{background:var(--FS);} .tp-A{background:var(--A);}
.tp-P{background:var(--P);} .tp-D{background:var(--D);}
.cell-grid { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r8); overflow:hidden; }
.cell { background:#fff; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .5s ease,transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }
.error-box { background:var(--D-bg); border:1px solid var(--D); border-radius:var(--r8); padding:12px 16px; font-size:14px; color:var(--D); margin-bottom:20px; }

/* ── Framework footer ───────────────────────────────────────── */
.site-footer {
  background:#111; color:rgba(255,255,255,.4);
  font-size:12px; padding:24px 40px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.site-footer a { color:rgba(255,255,255,.55); text-decoration:none; }
.site-footer a:hover { color:rgba(255,255,255,.85); }
.site-footer a:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

/* ── Minimal footer ─────────────────────────────────────────── */
.foot {
  border-top:1px solid var(--rule); padding:20px 24px;
  max-width:1040px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--faint);
}
.foot a { color:var(--faint); text-decoration:none; }
.foot a:hover { color:var(--text); }

/* ════════════════════════════════════════
   TEST PAGE  /test/
   ════════════════════════════════════════ */

.prog-wrap { position:sticky; top:52px; z-index:90; background:#fff; border-bottom:1px solid var(--rule); }
.prog-bar  { height:3px; background:var(--rule); overflow:hidden; }
.prog-fill { height:100%; background:var(--accent); width:0; transition:width .5s cubic-bezier(.16,1,.3,1); }
.prog-meta { max-width:740px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; }
.prog-label { font-family:'Source Code Pro',monospace; font-size:11px; color:var(--faint); }
.prog-pct   { font-family:'Source Code Pro',monospace; font-size:11px; color:var(--accent); font-weight:500; }

.hero { max-width:740px; margin:0 auto; padding:48px 24px 36px; }
.hero h1 { font-family:'Source Sans 3',sans-serif; font-weight: 700; font-size:clamp(28px,5vw,42px); line-height:1.15; letter-spacing:-.02em; margin-bottom:12px; }
.hero-sub { font-size:16px; color:var(--muted); font-weight:300; line-height:1.65; max-width:520px; margin-bottom:20px; }
.pills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.pill { font-size:11px; padding:4px 11px; border-radius:20px; background:var(--surface); border:1px solid var(--rule); color:var(--muted); font-family:'Source Code Pro',monospace; }
.lang-row   { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lang-lbl   { font-size:10px; color:var(--faint); font-family:'Source Code Pro',monospace; text-transform:uppercase; letter-spacing:.07em; }
.lang-btn   { font-size:12px; padding:4px 12px; border-radius:20px; border:1px solid var(--rule); background:transparent; color:var(--muted); text-decoration:none; transition:all .12s; font-family:'Source Sans 3',sans-serif; }
.lang-btn:hover { border-color:var(--accent); color:var(--text); }
.lang-btn.on    { background:var(--text); color:var(--bg); border-color:var(--text); }
.license-tag    { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); background:var(--accent-light); border:1px solid var(--accent); padding:6px 12px; border-radius:var(--r4); margin-bottom:14px; }

.error-wrap { max-width:740px; margin:0 auto; padding:0 24px; }

.questions       { max-width:740px; margin:0 auto; padding:0 24px 48px; }
.q-wrap          { padding:32px 0; border-bottom:1px solid var(--rule); }
.q-wrap:last-of-type { border-bottom:none; }
.q-meta          { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.q-num           { font-family:'Source Code Pro',monospace; font-size:10px; font-weight:500; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; background:var(--accent-light); padding:3px 8px; border-radius:20px; }
.q-answered-mark { width:18px; height:18px; border-radius:50%; background:var(--surface); border:1.5px solid var(--rule); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.q-answered-mark.done { background:var(--S); border-color:var(--S); }
.q-answered-mark.done::after { content:''; display:block; width:5px; height:8px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg) translate(-1px,-1px); }
.q-text          { font-family:'Source Sans 3',sans-serif; font-size:clamp(17px,2.5vw,21px); line-height:1.45; color:var(--text); margin-bottom:20px; }

.likert-scale  { display:flex; flex-direction:column; gap:8px; }
.likert-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--faint); font-family:'Source Code Pro',monospace; padding:0 2px; margin-bottom:4px; }
.likert-btns   { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.l-opt { position:relative; }
.l-opt input { position:absolute; opacity:0; width:0; height:0; }
.l-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:14px 4px 10px; min-height:72px;
  border:1.5px solid var(--rule); border-radius:var(--r8);
  background:#fff; cursor:pointer;
  transition:border-color .12s,background .12s,transform .08s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.l-btn:active { transform:scale(.96); }
.l-btn:hover  { border-color:#ccc; background:var(--surface); }
.l-opt input:focus-visible + .l-btn { outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.l-dot { width:20px; height:20px; border-radius:50%; border:2px solid var(--rule); background:#fff; transition:all .15s; flex-shrink:0; }
.l-num { font-family:'Source Code Pro',monospace; font-size:10px; color:var(--faint); }
.l-opt:nth-child(1) .l-dot { border-color:#D84E4E; }
.l-opt:nth-child(2) .l-dot { border-color:#D84E4Ecc; }
.l-opt:nth-child(3) .l-dot { border-color:#D84E4E88; }
.l-opt:nth-child(5) .l-dot { border-color:#4F8BD888; }
.l-opt:nth-child(6) .l-dot { border-color:#4F8BD8cc; }
.l-opt:nth-child(7) .l-dot { border-color:#4F8BD8; }
.l-opt input:checked + .l-btn { border-color:var(--accent); background:var(--accent-light); transform:translateY(-2px); }
.l-opt input:checked + .l-btn .l-dot { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.l-opt input:checked + .l-btn .l-num { color:var(--accent); font-weight:600; }

.demo-box  { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r12); padding:28px; margin-top:8px; }
.demo-hed  { font-size:17px; font-weight:600; margin-bottom:4px; }
.demo-sub  { font-size:14px; color:var(--muted); margin-bottom:22px; line-height:1.5; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.demo-full { grid-column:1/-1; }
.field-lbl { display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:7px; }
.req { color:var(--D); }
.opt { font-weight:400; text-transform:none; letter-spacing:0; color:var(--faint); }
.field-in,.field-sel { width:100%; padding:12px 14px; border:1.5px solid var(--rule); border-radius:var(--r8); background:#fff; color:var(--text); font-family:'Source Sans 3',sans-serif; font-size:15px; transition:border-color .12s; appearance:none; -webkit-appearance:none; }
.field-in:focus,.field-sel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.sel-wrap { position:relative; }
.sel-wrap::after { content:'↓'; position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:12px; color:var(--faint); }
.follow-lbl { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:#fff; border:1.5px solid var(--rule); border-radius:var(--r8); margin-top:14px; cursor:pointer; transition:border-color .12s; }
.follow-lbl:hover { border-color:var(--accent); }
.follow-lbl input { margin-top:3px; accent-color:var(--accent); flex-shrink:0; width:16px; height:16px; }
.follow-text { font-size:14px; color:var(--muted); line-height:1.5; }
.follow-text strong { color:var(--text); font-weight:600; display:block; margin-bottom:2px; }

.submit-area  { padding:32px 0 56px; }
.submit-err   { display:none; font-size:14px; color:var(--D); padding:12px 16px; background:var(--D-bg); border:1px solid var(--D); border-radius:var(--r8); margin-bottom:16px; }
.submit-err.show { display:block; }
.submit-row   { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.submit-legal { font-size:12px; color:var(--faint); line-height:1.6; max-width:380px; }
.submit-btn {
  background:var(--accent); color:#fff; border:none; border-radius:var(--r8);
  padding:16px 40px; font-size:16px; font-weight:600;
  font-family:'Source Sans 3',sans-serif; cursor:pointer;
  transition:background .12s,transform .08s;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
}
.submit-btn:hover { background:#2a8f8a; }
.submit-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.submit-btn:active { transform:scale(.97); }
.submit-btn:disabled { background:var(--faint); cursor:not-allowed; transform:none; }
.btn-arrow { transition:transform .15s; }
.submit-btn:not(:disabled):hover .btn-arrow { transform:translateX(3px); }
.hp { position:absolute; left:-9999px; height:0; overflow:hidden; }

/* ════════════════════════════════════════
   RESULTS PAGE  /results/
   ════════════════════════════════════════ */

.main-wrap { max-width:1040px; margin:0 auto; padding:0 24px; }
.results-hero { padding:52px 0 44px; border-bottom:1px solid var(--rule); max-width:640px; }
.hero-eyebrow    { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hero-badge      { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.hero-h1 { font-family:'Source Sans 3',sans-serif; font-weight: 700; font-size:clamp(32px,6vw,54px); line-height:1.1; letter-spacing:-.025em; margin-bottom:14px; }

.hero-badges     { display:flex; gap:8px; flex-wrap:wrap; }
.type-badge      { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:20px; font-size:13px; font-weight:600; }

.profile-sect    { display:grid; grid-template-columns:340px 1fr; gap:52px; align-items:start; padding:52px 0; border-bottom:1px solid var(--rule); }
.chart-col       { display:flex; flex-direction:column; align-items:center; }
.chart-frame     { width:100%; background:#fff; border:1px solid var(--rule); border-radius:var(--r12); overflow:hidden; }
.chart-placeholder { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:'Source Code Pro',monospace; font-size:12px; color:var(--faint); }
.chart-img       { width:100%; height:auto; display:block; }
.chart-dl        { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; color:var(--muted); text-decoration:none; transition:color .12s; }
.chart-dl:hover  { color:var(--text); }

.bars-hed  { font-size:18px; font-weight:600; margin-bottom:22px; }
.bar-list  { display:flex; flex-direction:column; gap:9px; }
.bar-row   { display:grid; grid-template-columns:130px 1fr 48px; align-items:center; gap:12px; }
.bar-name  { font-size:13px; font-weight:500; text-align:right; display:flex; align-items:center; gap:7px; justify-content:flex-end; }
.bar-name.dom { font-weight:700; }
.b-dot     { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.bar-track { height:26px; background:var(--rule); border-radius:3px; overflow:hidden; }
.bar-fill  { height:100%; border-radius:3px; width:0; transition:width 1s cubic-bezier(.16,1,.3,1); }
.bar-pct   { font-family:'Source Code Pro',monospace; font-size:12px; color:var(--muted); text-align:right; }
.bar-row.dom .bar-pct { font-weight:700; color:var(--text); }
.bar-note  { font-size:11px; color:var(--faint); font-family:'Source Code Pro',monospace; margin-top:14px; line-height:1.5; }

.cards-sect  { padding:52px 0; border-bottom:1px solid var(--rule); }
.cards-intro { font-size:16px; color:var(--muted); font-weight:300; line-height:1.65; max-width:540px; margin-top:8px; margin-bottom:32px; }
.cards-list  { display:flex; flex-direction:column; gap:10px; }
.t-card      { border:1.5px solid var(--rule); border-radius:var(--r12); overflow:hidden; transition:box-shadow .15s; }
.t-card.dom  { border-width:2px; }
.t-card.open { box-shadow:0 4px 24px rgba(0,0,0,.07); }
.card-head   { padding:18px 22px; display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.card-icon   { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.card-info   { flex:1; min-width:0; }
.card-name   { font-size:17px; font-weight:600; line-height:1.2; }
.card-tag    { font-size:12px; color:var(--muted); margin-top:2px; }
.card-right  { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.dom-chip    { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:3px 8px; border-radius:3px; }
.score-chip  { font-family:'Source Code Pro',monospace; font-size:12px; padding:4px 10px; border-radius:20px; background:var(--surface); color:var(--muted); }
.chevron     { font-size:13px; color:var(--muted); transition:transform .2s; margin-left:4px; }
.t-card.open .chevron { transform:rotate(180deg); }
.card-body   { display:none; padding:0 22px 22px; border-top:1px solid var(--rule); }
.t-card.open .card-body { display:block; }
.card-body-p { font-size:15px; line-height:1.7; padding:18px 0 16px; }
.card-2col   { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card-blk    { padding:14px; border-radius:var(--r8); background:var(--surface); }
.card-blk h4 { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600; margin-bottom:6px; }
.card-blk p  { font-size:13px; color:var(--muted); line-height:1.55; margin:0; }

.bottom-sect { display:grid; grid-template-columns:1fr 1fr; gap:52px; padding:52px 0; border-bottom:1px solid var(--rule); }
.sect-hed    { font-family:'Source Sans 3',sans-serif; font-weight:400; font-size:22px; margin:6px 0 12px; }
.sect-body   { font-size:15px; color:var(--muted); line-height:1.7; }
.share-url   { font-family:'Source Code Pro',monospace; font-size:12px; background:var(--surface); border:1.5px solid var(--rule); padding:12px 14px; border-radius:var(--r8); word-break:break-all; color:var(--muted); cursor:pointer; margin-top:12px; transition:border-color .12s; display:block; }
.share-url:hover { border-color:var(--accent); }
.share-note  { font-size:11px; color:var(--faint); margin-top:6px; }
.btn-row     { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }

.next-sect   { padding:52px 0; }
.next-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r12); overflow:hidden; margin-top:24px; }
.next-card   { background:#fff; padding:24px 20px; text-decoration:none; color:var(--text); transition:background .12s; display:block; }
.next-card:hover   { background:var(--surface); }
.next-card-ico     { font-size:22px; margin-bottom:10px; display:block; }
.next-card h4      { font-size:14px; font-weight:600; color:var(--text); text-transform:none; letter-spacing:0; margin-bottom:5px; }
.next-card p       { font-size:13px; color:var(--muted); margin:0; line-height:1.5; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */


/* narrow nav (test/results) overrides framework nav-inner */
.nav .nav-inner { max-width:1040px; padding:0 24px; height:52px; gap:16px; }

@media (max-width:768px) {
  .container  { padding:0 20px; }
  .nav-inner  { padding:0 20px; }
  .section    { padding:48px 0; }
  .site-footer { padding:20px; }
  .nav-links .hide-mobile { display:none; }
  .nav-slim-links { display:none; }
  /* results */
  .results-hero  { padding:36px 0 28px; }
  .profile-sect  { grid-template-columns:1fr; gap:32px; padding:36px 0; }
  .chart-col     { max-width:300px; margin:0 auto; width:100%; }
  .bar-row       { grid-template-columns:90px 1fr 40px; gap:8px; }
  .bar-name      { font-size:12px; }
  .cards-sect,.next-sect { padding:36px 0; }
  .bottom-sect   { grid-template-columns:1fr; gap:32px; padding:36px 0; }
  .next-grid     { grid-template-columns:1fr; }
  .card-2col     { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .test-hero     { padding:32px 20px 28px; }
  .questions     { padding:0 20px 40px; }
  .error-wrap    { padding:0 20px; }
  .likert-btns   { gap:4px; }
  .l-btn         { padding:12px 2px 8px; min-height:60px; }
  .l-num         { display:none; }
  .demo-grid     { grid-template-columns:1fr; }
  .submit-row    { flex-direction:column; align-items:stretch; }
  .submit-btn    { justify-content:center; width:100%; padding:18px; }
  .submit-legal  { max-width:100%; }
}

@media (max-width:480px) {
  .results-h1  { font-size:clamp(28px,8vw,40px); }
  .bar-row     { grid-template-columns:80px 1fr 36px; }
}


/* ════════════════════════════════════════
   FRAMEWORK PAGE
   ════════════════════════════════════════ */

/* ── NAV element selector — for pages without .site-nav class ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  padding: 0 40px;
}

/* ── LAYOUT ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.section { padding: 80px 0; border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: none; }

/* ── TYPE SCALE ── */
.eyebrow {
  font-family: 'Source Code Pro', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
  display: block;
}
h1 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1; font-weight: 700;
  letter-spacing: -0.01em;
}
h1 em { font-style: normal; font-weight: 700; color: var(--accent); }
h2 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600; line-height: 1.25;
  letter-spacing: 0;
}
h3 {
  font-size: 18px; font-weight: 600;
  line-height: 1.3; letter-spacing: 0;
}
h4 {
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── HERO ── */
.hero {
  padding: 100px 0 80px;
  position: relative;
}

.hero-content { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-top: 40px; }
.hero-lead { font-size: 20px; color: var(--muted); line-height: 1.6; font-weight: 300; max-width: 480px; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.stat-cell { background: #fff; padding: 20px 22px; }
.stat-num { font-family: 'Source Sans 3', sans-serif; font-size: 32px; line-height: 1; color: var(--text); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn-primary {
  background: #3AAFA9; color: #fff;
  padding: 12px 28px; border-radius: 4px;
  font-size: 14px; font-weight: 500;
  text-decoration: none; display: inline-block;
  transition: background 0.15s;
}
.btn-primary:hover { background: #2a8f8a; }
.btn-secondary {
  background: transparent; color: var(--text);
  padding: 11px 28px; border-radius: 4px;
  font-size: 14px; font-weight: 500;
  text-decoration: none; display: inline-block;
  border: 1px solid var(--rule);
  transition: border-color 0.15s, background 0.15s;
}
.btn-secondary:hover { border-color: var(--text); background: var(--surface); }

/* ── PROBLEM GRID (why hexad helps) ── */
.problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-top: 48px; }
.problem-card { background: #fff; padding: 28px 24px; }
.problem-card:hover { background: var(--surface); }
.problem-icon { font-size: 24px; margin-bottom: 12px; display: block; }
.problem-card h3 { font-size: 15px; margin-bottom: 8px; font-weight: 600; }
.problem-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── USES SECTION ── */
.uses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.use-item { padding-left: 24px; border-left: 2px solid var(--rule); }
.use-item.featured { border-left-color: var(--accent); }
.use-item h3 { font-size: 16px; margin-bottom: 8px; }
.use-item p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ── ORIENTATIONS ── */
.orient-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 48px; background: var(--rule); border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); }
.orient-card {
  background: #fff; padding: 28px 24px 24px;
  cursor: pointer; transition: background 0.12s;
  position: relative;
}
.orient-card:hover { background: var(--surface); }
.orient-card.active { background: var(--surface); }
.orient-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.orient-label {
  font-family: 'Source Code Pro', monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 8px;
  border-radius: 3px; display: inline-block;
}
.orient-score {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 22px; color: var(--faint);
}
.orient-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.orient-motivation { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.orient-body { font-size: 14px; color: var(--muted); line-height: 1.6; }
.orient-detail {
  display: none; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.orient-card.active .orient-detail { display: block; }
.orient-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.detail-block h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; margin-bottom: 5px; }
.detail-block p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Orientation colour themes */
.orient-Ph .orient-label { background: var(--Ph-bg); color: var(--Ph); }
.orient-Ph .orient-score { color: var(--Ph); opacity: 0.3; }
.orient-Ph h3 { color: var(--Ph); }
.orient-Ph .orient-motivation { color: var(--Ph); }

.orient-S .orient-label  { background: var(--S-bg); color: var(--S); }
.orient-S h3  { color: var(--S); }
.orient-S .orient-motivation { color: var(--S); }

.orient-FS .orient-label { background: var(--FS-bg); color: var(--FS); }
.orient-FS h3 { color: var(--FS); }
.orient-FS .orient-motivation { color: var(--FS); }

.orient-A .orient-label  { background: var(--A-bg); color: var(--A); }
.orient-A h3  { color: var(--A); }
.orient-A .orient-motivation { color: var(--A); }

.orient-P .orient-label  { background: var(--P-bg); color: var(--P); }
.orient-P h3  { color: var(--P); }
.orient-P .orient-motivation { color: var(--P); }

.orient-D .orient-label  { background: var(--D-bg); color: var(--D); }
.orient-D h3  { color: var(--D); }
.orient-D .orient-motivation { color: var(--D); }

/* ── STRUCTURE SECTION ── */
.structure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 48px; }
.structure-diagram { position: relative; }
.structure-points { display: flex; flex-direction: column; gap: 20px; }
.struct-point { display: flex; gap: 16px; align-items: flex-start; }
.struct-num {
  font-family: 'Source Code Pro', monospace;
  font-size: 11px; font-weight: 500; color: var(--accent);
  min-width: 28px; padding-top: 2px;
}
.struct-text h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); text-transform: none; letter-spacing: 0; }
.struct-text p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── DATA SECTION ── */
.data-intro { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.data-callouts { display: flex; flex-direction: column; gap: 16px; }
.data-callout { padding: 18px 20px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
.dc-num { font-family: 'Source Sans 3', sans-serif; font-size: 34px; line-height: 1; color: var(--text); }
.dc-label { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.dc-accent .dc-num { color: var(--accent); }

.chart-block { margin-top: 48px; }
.chart-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.chart-sub { font-size: 14px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }
.chart-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bar-chart { margin-top: 20px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-label { font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.bar-track { height: 28px; background: var(--surface); border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
.bar-fill { height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.bar-pct { font-family: 'Source Code Pro', monospace; font-size: 12px; color: var(--muted); }
.bar-pct { font-family: 'Source Code Pro', monospace; font-size: 12px; color: var(--muted); }

.data-note { font-size: 12px; color: var(--faint); font-family: 'Source Code Pro', monospace; margin-top: 16px; }

.chart-canvas-wrap { position: relative; width: 100%; height: 300px; margin-top: 20px; }

.corr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.corr-card { padding: 20px; border: 1px solid var(--rule); border-radius: 6px; }
.corr-pair { font-family: 'Source Code Pro', monospace; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.corr-val { font-family: 'Source Sans 3', sans-serif; font-size: 36px; line-height: 1; }
.corr-val.neg { color: var(--D); }
.corr-val.pos { color: var(--Ph); }
.corr-note { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* ── HOW TO USE ── */
.use-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-top: 48px; }
.mode-card { background: #fff; padding: 32px 26px; }
.mode-num {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 48px; line-height: 1; color: var(--surface);
  margin-bottom: 16px;
}
.mode-card h3 { font-size: 17px; margin-bottom: 10px; }
.mode-body { font-size: 14px; color: var(--muted); line-height: 1.65; }
.mode-body strong { color: var(--text); font-weight: 600; }
.mode-tag { display: inline-block; margin-top: 16px; font-size: 11px; padding: 4px 10px; border-radius: 3px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.mode-tag.no-survey { background: var(--S-bg); color: var(--S); }
.mode-tag.profiling { background: var(--A-bg); color: var(--A); }
.mode-tag.mechanics { background: var(--P-bg); color: var(--P); }

/* ── MECHANICS GRID ── */
.mech-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; margin-bottom: 24px; align-items: center; }
.mf-btn {
  font-size: 12px; padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--rule); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.12s;
  font-family: 'Source Sans 3', sans-serif;
}
.mf-btn:hover { border-color: var(--text); color: var(--text); }
.mf-btn.on { background: #3AAFA9; color: #fff; border-color: var(--text); }
.mf-count { font-size: 12px; color: var(--faint); font-family: 'Source Code Pro', monospace; margin-left: auto; }

.mech-sections { display: flex; flex-direction: column; gap: 32px; }
.mech-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mech-section-dot { width: 8px; height: 8px; border-radius: 50%; }
.mech-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.mech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.mech-tile {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 14px 14px 12px; cursor: pointer;
  background: #fff; transition: border-color 0.12s, background 0.12s;
}
.mech-tile:hover { border-color: #ccc; background: var(--surface); }
.mech-tile.active { border-color: var(--text); }
.mech-tile-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.mech-types { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 8px; }
.type-pip { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.type-pip.dim { opacity: 0.3; }
.conf-tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600; display: inline-block; }
.ct-high { background: #EAF0FB; color: #4F8BD8; }
.ct-mod  { background: #FEF1EB; color: #F97A45; }
.ct-low  { background: var(--surface); color: var(--faint); }

.mech-drawer {
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); padding: 20px 22px;
  margin-top: 2px; grid-column: 1 / -1;
}
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; }
.drawer-title { font-size: 16px; font-weight: 600; }
.drawer-close { font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.drawer-close:hover { color: var(--text); }
.drawer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dc-sec-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; margin-bottom: 4px; }
.dc-sec-body { font-size: 13px; color: var(--text); line-height: 1.55; }
.dc-sec-body.muted { color: var(--muted); }

/* ── RESEARCH SECTION ── */
.research-timeline { margin-top: 40px; position: relative; padding-left: 28px; }
.research-timeline::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--rule);
}
.rt-item { position: relative; margin-bottom: 28px; }
.rt-item::before {
  content: ''; position: absolute; left: -32px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.rt-year { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--accent); font-weight: 500; margin-bottom: 2px; }
.rt-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.rt-body { font-size: 13px; color: var(--muted); line-height: 1.5; }
.rt-doi { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--faint); }

.domains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 40px; background: var(--rule); border-radius: 8px; border: 1px solid var(--rule); overflow: hidden; }
.domain-card { background: #fff; padding: 22px 20px; }
.domain-icon { font-size: 18px; margin-bottom: 8px; }
.domain-card h4 { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: 6px; }
.domain-card p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

/* ── TYPE LEGEND ── */
.type-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0 0; }
.tl-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tl-pair { display: flex; align-items: center; gap: 5px; }

/* ── CALLOUT BOX ── */
.callout {
  background: var(--accent-light); border-left: 3px solid var(--accent);
  padding: 16px 20px; border-radius: 0 6px 6px 0;
  margin: 24px 0; font-size: 14px; line-height: 1.6; color: var(--text);
}
.callout strong { color: var(--accent); }

/* ── FOOTER CTA ── */
.footer-cta {
  background: #3AAFA9; color: #fff;
  padding: 60px 0; text-align: center;
}
.footer-cta h2 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 32px; font-weight: 600; color: var(--bg);
  margin-bottom: 12px;
}
.footer-cta p { font-size: 16px; color: rgba(255,255,255,0.6); margin-bottom: 28px; }
.footer-cta .btn-primary { background: #fff; color: var(--accent); }
.footer-cta .btn-primary:hover { background: var(--accent-light); }
.footer-cta .btn-primary:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.footer-cta .btn-secondary { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }
.footer-cta .btn-secondary:hover { border-color: var(--bg); color: var(--bg); background: transparent; }

.page-footer { background: #111; color: rgba(255,255,255,0.4); font-size: 12px; padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.page-footer a { color: rgba(255,255,255,0.5); text-decoration: none; }
.page-footer a:hover { color: rgba(255,255,255,0.8); }

/* ── PROSE COLUMNS ── */
.prose-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.prose-body { font-size: 16px; color: var(--text); line-height: 1.7; }
.prose-body p { margin-bottom: 1rem; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .container { padding: 0 20px; }
  .hero { padding: 60px 0 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .problems-grid { grid-template-columns: 1fr 1fr; }
  .uses-grid { grid-template-columns: 1fr; }
  .orient-grid { grid-template-columns: 1fr 1fr; }
  .structure-grid { grid-template-columns: 1fr; }
  .prose-cols { grid-template-columns: 1fr; }
  .use-modes { grid-template-columns: 1fr; }
  .mech-grid { grid-template-columns: repeat(2, 1fr); }
  .corr-row { grid-template-columns: 1fr; }
  .domains-grid { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 44px; gap: 8px; }
  .chart-scroll-wrap { margin: 0 -20px; padding: 0 20px; }
  .data-intro { grid-template-columns: 1fr; gap: 32px; }
  .bar-label { font-size: 12px; }
  .nav-links { display: none; }
  .section { padding: 50px 0; }

  /* Data section mobile */
  .data-intro { grid-template-columns: 1fr; gap: 28px; }
  .chart-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
  .bar-row { grid-template-columns: 90px 1fr 40px; gap: 8px; }
  .bar-label { font-size: 11px; max-width: 90px; }
  .bar-pct { font-size: 11px; }

}


/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════
   MECHANICS PAGE
   ════════════════════════════════════════ */
/* ── Mechanics page specific ── */
.mech-hero {
  padding: 72px 0 56px;
  position: relative;
}
.mech-hero::before {
  content: '◎';
  position: absolute; right: 20px; top: -20px;
  font-size: 320px; color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  line-height: 1; pointer-events: none; user-select: none;
}

/* ── Entry modes ── */
.entry-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  overflow: hidden; margin-top: 40px; max-width: 700px;
}
.entry-tab {
  background: #fff; padding: 22px 24px;
  cursor: pointer; transition: background 0.12s;
  border: none; text-align: left; font-family: 'Source Sans 3', sans-serif;
}
.entry-tab:hover { background: var(--surface); }
.entry-tab.active { background: var(--text); }
.entry-tab.active .et-title  { color: var(--bg); }
.entry-tab.active .et-desc   { color: rgba(255,255,255,0.6); }
.entry-tab.active .et-num    { color: var(--accent); }
.et-num   { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--accent); font-weight: 500; margin-bottom: 6px; display: block; letter-spacing: 0.08em; text-transform: uppercase; }
.et-title { font-size: 16px; font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }
.et-desc  { font-size: 13px; color: var(--muted); display: block; line-height: 1.5; }

/* ── Mode panels ── */
.mode-panel { display: none; padding-top: 40px; }
.mode-panel.active { display: block; }

/* ── Outcome selector (mode A) ── */
.outcome-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 32px;
}
.outcome-btn {
  padding: 14px 12px; border: 1px solid var(--rule);
  border-radius: var(--radius-sm); background: #fff;
  cursor: pointer; text-align: left;
  font-family: 'Source Sans 3', sans-serif;
  transition: all 0.12s;
}
.outcome-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.outcome-btn.active { border-color: var(--accent); background: var(--accent-light); }
.outcome-btn .ob-icon { font-size: 18px; display: block; margin-bottom: 6px; }
.outcome-btn .ob-label { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.outcome-btn .ob-hint  { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.4; }

.outcome-result {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-md); padding: 28px; margin-bottom: 32px;
  display: none;
}
.outcome-result.show { display: block; }
.or-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.or-types { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.or-type-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.or-body { font-size: 14px; color: var(--muted); line-height: 1.65; }
.or-mechanics-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); font-weight: 600; margin: 16px 0 10px; }

/* ── Type selector (mode B) ── */
.type-selector {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-bottom: 32px;
}
.type-sel-btn {
  padding: 14px 8px; border: 1px solid var(--rule);
  border-radius: var(--radius-sm); background: #fff;
  cursor: pointer; text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  transition: all 0.12s;
}
.type-sel-btn:hover { transform: translateY(-2px); }
.type-sel-btn.active { border-width: 2px; }
.tsb-dot { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 8px; }
.tsb-name { font-size: 11px; font-weight: 600; color: var(--muted); }
.type-sel-btn.active .tsb-name { font-weight: 700; }

/* ── Shared mechanics grid ── */
.mech-section { margin-bottom: 36px; }
.mech-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.msd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.msd-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.msd-count { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--faint); margin-left: auto; }

.mech-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.mech-tile {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 14px 14px 12px; cursor: pointer; background: #fff;
  transition: border-color 0.12s, background 0.12s;
}
.mech-tile:hover { border-color: #ccc; background: var(--surface); }
.mech-tile.active { border-color: var(--text); border-width: 2px; }
.mech-tile.faded { opacity: 0.35; }
.mth-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.mth-types { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 8px; }
.conf-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  font-weight: 600; display: inline-block; letter-spacing: 0.02em;
}
.ct-high { background: var(--S-bg); color: var(--S); }
.ct-mod  { background: var(--P-bg); color: var(--P); }
.ct-low  { background: var(--surface); color: var(--faint); }

/* ── Drawer ── */
.mech-drawer {
  grid-column: 1 / -1;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); padding: 22px 24px; margin-top: 2px;
}
.drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.drawer-title { font-size: 16px; font-weight: 600; }
.drawer-close { font-size: 18px; color: var(--muted); cursor: pointer; padding: 0 4px; }
.drawer-close:hover { color: var(--text); }
.drawer-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.db-block h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; margin-bottom: 5px; }
.db-block p  { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55; }
.db-block p strong { color: var(--text); }

/* ── Filter bar ── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.fb-btn {
  font-size: 12px; padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--rule); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.12s;
  font-family: 'Source Sans 3', sans-serif;
}
.fb-btn:hover { border-color: var(--text); color: var(--text); }
.fb-btn.on { background: #3AAFA9; color: #fff; border-color: var(--text); }
.fb-count { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--faint); margin-left: auto; }

/* Legend */
.type-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.tl-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tl-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Evidence note */
.evidence-note {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  padding: 16px 20px; background: var(--surface);
  border-radius: var(--radius-sm); border: 1px solid var(--rule);
  margin-top: 32px;
}

@media (max-width: 768px) {
  .entry-toggle { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .type-selector { grid-template-columns: repeat(3, 1fr); }
  .mech-grid { grid-template-columns: repeat(2, 1fr); }
  .drawer-body { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   RESEARCH PAGE
   ════════════════════════════════════════ */
.research-hero { padding: 72px 0 56px; }

/* Filter tabs */
.domain-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 32px 0 0; }
.dt-btn {
  font-size: 12px; padding: 6px 16px; border-radius: 20px;
  border: 1px solid var(--rule); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.12s;
  font-family: 'Source Sans 3', sans-serif;
}
.dt-btn:hover { border-color: var(--text); color: var(--text); }
.dt-btn.on { background: #3AAFA9; color: #fff; border-color: var(--text); }

/* Study cards */
.studies-grid { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.study-item {
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  display: none;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.study-item.show { display: grid; grid-template-columns: 140px 1fr; gap: 24px; }
.study-year {
  font-family: 'Source Code Pro', monospace;
  font-size: 12px; color: var(--accent); font-weight: 500;
  padding-top: 3px; line-height: 1.4;
}
.study-venue {
  font-family: 'Source Code Pro', monospace;
  font-size: 11px; color: var(--faint); margin-top: 4px;
}
.study-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.4; }
.study-authors { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.study-finding {
  font-size: 14px; color: var(--text); line-height: 1.6;
  padding: 12px 14px; background: var(--surface);
  border-radius: var(--radius-sm); border-left: 3px solid var(--accent);
  margin: 10px 0;
}
.study-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.study-tag {
  font-size: 11px; padding: 3px 9px; border-radius: 10px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--rule);
  font-weight: 500;
}
.study-meta { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.study-doi {
  font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--faint);
  text-decoration: none;
}
.study-doi:hover { color: var(--text); }
.study-n { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--faint); }
.study-flag {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  font-weight: 600; letter-spacing: 0.03em;
}
.flag-large { background: var(--S-bg); color: var(--S); }
.flag-longit { background: var(--Ph-bg); color: var(--Ph); }
.flag-null   { background: var(--D-bg); color: var(--D); }
.flag-meta   { background: var(--P-bg); color: var(--P); }

/* Summary stats */
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; margin: 40px 0; }
.sum-cell { background: #fff; padding: 20px 22px; }
.sum-num { font-family: 'Source Sans 3', sans-serif; font-size: 32px; line-height: 1; }
.sum-lbl { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.4; }

/* Key findings callout boxes */
.findings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.finding-card { padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #fff; }
.finding-card h4 { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: 8px; }
.finding-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.finding-card.important { border-color: var(--accent); }

@media (max-width: 768px) {
  .study-item.show { grid-template-columns: 1fr; gap: 8px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .findings-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   DATA PAGE
   ════════════════════════════════════════ */
.data-hero { padding: 64px 0 48px; }

/* Stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; margin-top:36px; }
.stat-cell { background:#fff; padding:20px 24px; }
.stat-num  { font-family:'Source Sans 3',sans-serif; font-size:36px; line-height:1; color:var(--text); }
.stat-lbl  { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.4; }

/* Chart sections */
.chart-section { margin-top:56px; }
.chart-label   { font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--faint); font-weight:600; margin-bottom:6px; font-family:'Source Code Pro',monospace; }
.chart-title   { font-size:20px; font-weight:600; margin-bottom:6px; }
.chart-sub     { font-size:15px; color:var(--muted); margin-bottom:24px; line-height:1.6; }

/* Bar chart */
.bar-list { display:flex; flex-direction:column; gap:10px; }
.bar-row  { display:grid; grid-template-columns:150px 1fr 60px; align-items:center; gap:14px; }
.bar-name { font-size:14px; font-weight:500; text-align:right; }
.bar-track{ height:28px; background:var(--surface); border-radius:3px; overflow:hidden; border:1px solid var(--rule); position:relative; }
.bar-fill { height:100%; border-radius:3px; display:flex; align-items:center; padding-left:8px; font-size:11px; font-weight:600; color:rgba(255,255,255,0.85); white-space:nowrap; transition:width 1s cubic-bezier(.16,1,.3,1); }
.bar-pct  { font-family:'Source Code Pro',monospace; font-size:12px; color:var(--muted); }

/* Age/gender table */
.data-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:16px; }
.data-table th { font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:var(--faint); font-weight:600; padding:8px 12px; text-align:right; border-bottom:1px solid var(--rule); background:var(--surface); }
.data-table th:first-child { text-align:left; }
.data-table td { padding:10px 12px; border-bottom:1px solid var(--rule); text-align:right; font-family:'Source Code Pro',monospace; font-size:12px; }
.data-table td:first-child { text-align:left; font-family:'Source Sans 3',sans-serif; font-size:13px; font-weight:500; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surface); }
.heat-cell { border-radius:3px; padding:4px 8px; display:inline-block; }

/* Crossing-lines chart */
.trend-wrap { position:relative; width:100%; overflow:hidden; }

/* Top types table */
.types-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.type-count-card { padding:16px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:#fff; }
.tc-name  { font-size:13px; font-weight:600; margin-bottom:4px; }
.tc-count { font-family:'Source Sans 3',sans-serif; font-size:28px; line-height:1; }
.tc-pct   { font-size:12px; color:var(--muted); margin-top:2px; }

/* Data note */
.data-note { font-size:12px; color:var(--faint); font-family:'Source Code Pro',monospace; margin-top:12px; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:0; }

@media(max-width:768px){
  .stat-grid  { grid-template-columns:1fr 1fr; }
  .bar-row    { grid-template-columns:90px 1fr 44px; gap:8px; }
  .two-col    { grid-template-columns:1fr; }
  .types-grid { grid-template-columns:1fr 1fr; }
  .data-table { display:block; overflow-x:auto; }
}

/* ── Additional classes matching actual HTML ── */
.hero-top { max-width:640px; }
.bars-col {}
.nav-slim { max-width:1040px; margin:0 auto; padding:0 24px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }