/* ═══════════════════════════════════════════════════════════
   CLAVIX — shared stylesheet for generated + content pages
   (per-ticker /stocks/*, /about, /methodology, /compare/*).
   Same cream-on-void instrument theme as the homepage, factored
   out so the ~600 generated pages stay small and cache one file.
   ═══════════════════════════════════════════════════════════ */

:root {
  --void:#0B0A09; --surface-1:#131110; --surface-2:#1B1917; --surface-3:#232019;
  --border:#2A2622; --border-soft:#211E1B; --border-lit:#3A342D;
  --text-1:#EDEAD9; --text-2:#B4AE9E; --text-3:#7C766A;
  --accent:#E85D2A; --accent-strong:#C2410C; --accent-dim:#7A3517; --accent-glow:rgba(232,93,42,0.10);
  --pos:#4FB477; --neg:#D9544D;

  --g-ap-fg:#3FC79A; --g-ap-bg:#0C2C25;
  --g-a-fg:#4FC78F;  --g-a-bg:#0D2C22;
  --g-am-fg:#63C884; --g-am-bg:#103020;
  --g-bp-fg:#85C877; --g-bp-bg:#152E1A;
  --g-b-fg:#A9C76A;  --g-b-bg:#1E2E14;
  --g-bm-fg:#C4C15E; --g-bm-bg:#262A12;
  --g-cp-fg:#D6BE55; --g-cp-bg:#2A2410;
  --g-c-fg:#DFA84C;  --g-c-bg:#2C2310;
  --g-cm-fg:#E58B44; --g-cm-bg:#2E1E12;
  --g-dp-fg:#E5713F; --g-dp-bg:#2E1913;
  --g-d-fg:#E15C48;  --g-d-bg:#2E1614;
  --g-dm-fg:#DD554C; --g-dm-bg:#2E1413;
  --g-f-fg:#D9544D;  --g-f-bg:#2E1313;

  --r-chip:4px; --r-card:10px;
  --font-ui:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --maxw:900px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-ui); background:var(--void); color:var(--text-1);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; -webkit-tap-highlight-color:transparent;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums lining-nums; }

/* ── Nav ── */
.nav-outer { position:sticky; top:0; z-index:100; background:rgba(11,10,9,0.82);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border-soft); }
nav { max-width:1120px; margin:0 auto; height:60px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:11px; }
.nav-logo img { width:27px; height:27px; }
.nav-wordmark { font-family:var(--font-mono); font-size:15px; font-weight:500; letter-spacing:.22em; color:var(--text-1); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-link { font-size:14px; color:var(--text-2); transition:color .18s ease; }
.nav-link:hover { color:var(--text-1); }

/* ── Layout ── */
.wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(32px,5vw,56px) 24px; }
.breadcrumb { font-family:var(--font-mono); font-size:12px; color:var(--text-3); letter-spacing:.04em; margin-bottom:24px; }
.breadcrumb a { color:var(--text-2); }
.breadcrumb a:hover { color:var(--accent); }
.eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:14px; }

/* ── Stock page hero ── */
.stock-hero { display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
  padding-bottom:28px; border-bottom:1px solid var(--border-soft); }
.stock-grade-badge { flex:none; width:104px; height:104px; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.stock-grade-badge .g { font-family:var(--font-mono); font-weight:700; font-size:44px; line-height:1; letter-spacing:.01em; }
.stock-grade-badge .s { font-family:var(--font-mono); font-size:12px; opacity:.85; }
.stock-hero-copy { flex:1; min-width:260px; }
.stock-hero-copy h1 { font-size:clamp(1.8rem,4vw,2.5rem); font-weight:600; letter-spacing:-.02em; line-height:1.08; }
.stock-hero-copy h1 .tkr { color:var(--accent); }
.stock-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:13.5px; color:var(--text-3); font-family:var(--font-mono); }
.stock-meta span b { color:var(--text-2); font-weight:500; }
.answer { font-size:1.12rem; color:var(--text-1); line-height:1.6; margin:26px 0 8px; max-width:42rem; }
.answer b { color:var(--text-1); font-weight:600; }
.updated { font-family:var(--font-mono); font-size:12px; color:var(--text-3); }

/* ── Dimension bars ── */
.dims { margin:36px 0; display:flex; flex-direction:column; gap:1px;
  background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--r-card); overflow:hidden; }
.dim { background:var(--surface-1); padding:16px 20px; display:grid;
  grid-template-columns:150px 1fr 44px; align-items:center; gap:16px; }
.dim-name { font-size:14px; color:var(--text-1); }
.dim-name small { display:block; color:var(--text-3); font-size:11.5px; font-family:var(--font-mono); margin-top:2px; }
.dim-track { height:8px; border-radius:6px; background:var(--surface-3); overflow:hidden; }
.dim-fill { height:100%; border-radius:6px; }
.dim-val { font-family:var(--font-mono); font-size:15px; color:var(--text-1); text-align:right; }

/* ── Risk drivers (plain-English "why this grade") ── */
.drivers { margin:30px 0; display:flex; flex-direction:column; gap:10px; }
.driver { background:var(--surface-1); border:1px solid var(--border); border-left:3px solid var(--text-3);
  border-radius:var(--r-card); padding:15px 18px; }
.driver-neg { border-left-color:var(--neg); }
.driver-pos { border-left-color:var(--pos); }
.driver-neu { border-left-color:#DFA84C; }
.driver-head { font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:7px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.driver-tag { color:var(--text-2); font-weight:500; }
.driver-neg .driver-tag { color:var(--neg); }
.driver-pos .driver-tag { color:var(--pos); }
.driver-neu .driver-tag { color:#DFA84C; }
.driver p { margin:0; color:var(--text-1); font-size:14.5px; line-height:1.55; }

/* ── Grade chips / scale ── */
.grade-badge, .gc-chip { font-family:var(--font-mono); font-weight:700; border-radius:var(--r-chip); line-height:1; }
.grade-badge { font-size:13px; padding:5px 9px; }
.scale-row { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.gc-chip { font-size:11px; padding:4px 7px; }

.g-ap{color:var(--g-ap-fg);background:var(--g-ap-bg);} .g-a{color:var(--g-a-fg);background:var(--g-a-bg);}
.g-am{color:var(--g-am-fg);background:var(--g-am-bg);} .g-bp{color:var(--g-bp-fg);background:var(--g-bp-bg);}
.g-b{color:var(--g-b-fg);background:var(--g-b-bg);} .g-bm{color:var(--g-bm-fg);background:var(--g-bm-bg);}
.g-cp{color:var(--g-cp-fg);background:var(--g-cp-bg);} .g-c{color:var(--g-c-fg);background:var(--g-c-bg);}
.g-cm{color:var(--g-cm-fg);background:var(--g-cm-bg);} .g-dp{color:var(--g-dp-fg);background:var(--g-dp-bg);}
.g-d{color:var(--g-d-fg);background:var(--g-d-bg);} .g-dm{color:var(--g-dm-fg);background:var(--g-dm-bg);}
.g-f{color:var(--g-f-fg);background:var(--g-f-bg);}

/* ── Cards / callouts ── */
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-card); padding:24px 22px; margin:22px 0; }
.card h2, .card h3 { letter-spacing:-.01em; }

/* ── Prose (about / methodology) ── */
.prose h1 { font-size:clamp(2rem,4.5vw,2.9rem); font-weight:600; letter-spacing:-.025em; line-height:1.06; margin-bottom:18px; text-wrap:balance; }
.prose h2 { font-size:clamp(1.4rem,3vw,1.85rem); font-weight:600; letter-spacing:-.02em; margin:40px 0 14px; text-wrap:balance; }
.prose h3 { font-size:1.15rem; font-weight:600; margin:26px 0 10px; }
.prose p { font-size:1.05rem; color:var(--text-2); line-height:1.7; margin:0 0 16px; max-width:44rem; }
.prose ul { margin:0 0 16px 0; padding-left:0; list-style:none; max-width:44rem; }
.prose ul li { position:relative; padding-left:22px; color:var(--text-2); font-size:1.02rem; line-height:1.6; margin-bottom:10px; }
.prose ul li::before { content:""; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose strong { color:var(--text-1); font-weight:600; }
.lead { font-size:1.2rem !important; color:var(--text-1) !important; line-height:1.6 !important; }

/* ── CTA row ── */
.cta-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:30px 0 8px; }
.btn-appstore { display:inline-block; line-height:0; transition:transform .18s ease, filter .18s ease; }
.btn-appstore:hover { transform:translateY(-1px); filter:brightness(1.12); }
.btn-appstore .asb { display:block; height:48px; width:auto; }
.cta-note { font-size:13.5px; color:var(--text-3); }
.link-accent { color:var(--accent); font-weight:600; }
.link-accent:hover { text-decoration:underline; }

/* ── Related / internal links ── */
.related { margin:36px 0; }
.related h2 { font-size:1.15rem; margin-bottom:14px; }
.related-grid { display:flex; flex-wrap:wrap; gap:8px; }
.related-grid a { font-family:var(--font-mono); font-size:13px; color:var(--text-2);
  border:1px solid var(--border); background:var(--surface-1); padding:7px 12px; border-radius:var(--r-chip);
  display:inline-flex; align-items:center; gap:8px; transition:border-color .18s ease, color .18s ease; }
.related-grid a:hover { border-color:var(--accent-dim); color:var(--text-1); }
.related-grid a .rg { font-weight:700; }

/* ── Footer ── */
footer { border-top:1px solid var(--border-soft); margin-top:20px; }
.footer-inner { max-width:1120px; margin:0 auto; padding:40px 24px 52px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-logo { display:flex; align-items:center; gap:10px; }
.footer-logo img { width:25px; height:25px; }
.footer-logo span { font-family:var(--font-mono); font-size:14px; letter-spacing:.2em; color:var(--text-2); }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a { font-size:14px; color:var(--text-2); transition:color .18s ease; }
.footer-links a:hover { color:var(--text-1); }
.footer-disclaimer { margin-top:28px; padding-top:22px; border-top:1px solid var(--border-soft);
  font-size:12.5px; color:var(--text-3); line-height:1.6; max-width:52rem; }
.footer-copy { display:block; margin-top:16px; font-size:12.5px; color:var(--text-3); }

@media (max-width:600px) {
  .dim { grid-template-columns:120px 1fr 40px; gap:12px; padding:14px 16px; }
  .dim-name { font-size:13px; }
  .stock-grade-badge { width:88px; height:88px; }
  .stock-grade-badge .g { font-size:36px; }
}