/* site/whitepaper.css — Forge Model Series technical white paper page.
 * Built on the shared brand foundation (brand.css + styles.css). Dark ink-navy field,
 * violet neon edges, Montserrat display type — the same language as the landing page.
 * This page is intentionally self-contained: it only adds page-scoped styles on top of
 * the shared tokens, so a palette change stays a single edit in brand.css. */

.wp { max-width: 1080px; margin: 0 auto; padding: 0 24px 90px; }

/* --- Hero ---------------------------------------------------------------- */
.wp-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 120px 24px 72px;
  background:
    radial-gradient(1000px 620px at 80% 0%, rgba(98,44,238,.28), transparent 60%),
    radial-gradient(760px 520px at 8% 100%, rgba(79,30,225,.18), transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.wp-kicker {
  margin: 0 0 20px; font: 600 12.5px/1 var(--font-display);
  letter-spacing: .26em; text-transform: uppercase; color: var(--brand-violet-300);
}
.wp-hero h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.04em;
  font-weight: 800; margin: 0 auto 22px; max-width: 20ch; text-wrap: balance;
}
.wp-hero h1 .grad {
  background: linear-gradient(90deg, #9c6efe 0%, #c14bff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(156,110,254,.35));
}
.wp-hero .wp-sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--muted); max-width: 60ch; margin: 0 auto 34px; }
.wp-meta { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: var(--faint); font-size: 13.5px; }
.wp-meta span { display: inline-flex; align-items: center; gap: 7px; }
.wp-meta b { color: var(--text-2, var(--muted)); font-weight: 600; }

/* --- Section scaffolding -------------------------------------------------- */
.wp-section { padding: 64px 0 8px; }
.wp-section > h2 {
  font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 14px;
}
.wp-section > h2 .wp-num {
  font: 700 15px/1 var(--font-mono); color: var(--brand-violet-400);
  letter-spacing: .08em;
}
.wp-lede { color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 72ch; margin: 0 0 30px; }
.wp-section p { color: var(--text-2, var(--muted)); line-height: 1.75; }
.wp-section p strong { color: var(--text); }

/* --- Spec table ----------------------------------------------------------- */
.wp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
.wp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.wp-table th, .wp-table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.wp-table thead th { font: 600 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); background: var(--bg-2); }
.wp-table tbody tr:last-child td { border-bottom: 0; }
.wp-table td:first-child { color: var(--faint); font-size: 14px; white-space: nowrap; }
.wp-table td b { color: var(--text); }
.wp-table .wp-flag { color: var(--brand-violet-300); font-weight: 600; }

/* --- Stat cards ----------------------------------------------------------- */
.wp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 34px 0; }
.wp-stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.wp-stat .wp-stat-num { font: 800 clamp(26px, 3vw, 34px)/1 var(--font-display); letter-spacing: -.03em; margin-bottom: 8px; }
.wp-stat .wp-stat-num .grad { background: linear-gradient(90deg, #9c6efe 0%, #c14bff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wp-stat .wp-stat-label { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* --- Callouts ------------------------------------------------------------- */
.wp-callout {
  border: 1px solid var(--border); border-left: 3px solid var(--brand-violet-400);
  background: var(--bg-2); border-radius: var(--radius-md); padding: 20px 22px; margin: 26px 0;
}
.wp-callout h4 { margin: 0 0 8px; font-size: 15px; }
.wp-callout p { margin: 0; font-size: 14.5px; color: var(--muted); }
.wp-callout--warn { border-left-color: var(--brand-warn); }
.wp-callout--ok { border-left-color: var(--brand-ok); }

/* --- Data list ------------------------------------------------------------ */
.wp-list { margin: 0 0 26px; padding: 0; list-style: none; }
.wp-list li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--border); }
.wp-list li:last-child { border-bottom: 0; }
.wp-list li::before {
  content: ''; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--brand-grad);
}
.wp-list .wp-li-title { font-weight: 600; color: var(--text); }
.wp-list .wp-li-sub { color: var(--muted); font-size: 14.5px; margin-top: 3px; line-height: 1.6; }

/* --- Two-column ----------------------------------------------------------- */
.wp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0; }
.wp-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.wp-col h4 { margin: 0 0 12px; font-size: 16px; }
.wp-col ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.wp-col li { margin-bottom: 8px; }

/* --- Investor band -------------------------------------------------------- */
.wp-investor {
  margin-top: 40px; border: 1px solid var(--line-strong, var(--border-strong));
  border-radius: var(--radius-xl); padding: 40px; text-align: center;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(98,44,238,.22), transparent 65%),
    var(--bg-2);
}
.wp-investor h3 { font-size: 26px; margin: 0 0 12px; letter-spacing: -.02em; }
.wp-investor p { color: var(--muted); max-width: 56ch; margin: 0 auto 26px; }
.wp-investor .btn { padding: 15px 30px; font-size: 15.5px; border-radius: 14px; }
.wp-investor .btn-primary { box-shadow: 0 0 0 1px rgba(156,110,254,.55), 0 10px 40px rgba(98,44,238,.55), inset 0 1px 0 rgba(255,255,255,.22); }

/* --- Footer note ---------------------------------------------------------- */
.wp-footnote { color: var(--faint); font-size: 12.5px; line-height: 1.7; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }

@media (max-width: 720px) {
  .wp-cols { grid-template-columns: 1fr; }
  .wp-hero { padding: 104px 20px 56px; }
  .wp-section { padding-top: 48px; }
}