/* =====================================================================
   ONYX QUANT — terminal-amber stylesheet (080)
   Design language: Bloomberg terminal · true-black ground (#070707) ·
   single disciplined amber/gold accent (#E0A52B) · heavy JetBrains Mono
   numbers · box-drawing / grid framing · live "signal_desk" panels.
   Honesty unchanged: no return figures on the shop surface (process
   numbers only), single consolidated "not investment advice" shield.
   Build-step free — pure CSS custom properties. Class names are kept
   identical to the previous theme so the HTML + onyx.js keep working.
   ===================================================================== */

:root {
  /* --- Ground & panels (true-black terminal) --- */
  --bg:            #070707;   /* true black ground */
  --bg2:           #0D0D0C;   /* panel */
  --bg3:           #121210;   /* raised panel */
  --canvas:        #070707;   /* alias kept for legacy class refs */
  --surface-soft:  #0D0D0C;
  --surface-strong:#15140F;
  --surface-dark:  #070707;
  --surface-dark-elev: #0D0D0C;

  /* --- Ink (warm off-white on black) --- */
  --ink:        #F2EAD8;      /* warm off-white text / headings */
  --ink2:       #C7BCA4;      /* secondary */
  --body:       #C7BCA4;
  --muted:      #857C6A;      /* dim labels */
  --muted-soft: #6A6354;

  /* --- Hairlines (warm grid) --- */
  --line:       #221F18;
  --line2:      #332E22;
  --hairline:      #332E22;
  --hairline-soft: #221F18;

  /* --- THE accent: a single disciplined amber/gold --- */
  --amber:      #E0A52B;
  --amberhi:    #FFD173;
  --primary:           #E0A52B;
  --primary-active:    #FFD173;
  --primary-soft:      #FFD173;
  --primary-disabled:  #6a5a2c;
  --primary-subdued:   rgba(224,165,43,0.10);

  /* --- On-color text --- */
  --on-primary:  #1A1306;     /* dark ink on amber button */
  --on-dark:     #F2EAD8;
  --on-dark-soft:#C7BCA4;

  /* --- Honest-status semantics --- */
  --green:             #3FB984;   /* ✅ proven */
  --status-proven:     #3FB984;
  --status-proven-bg:  rgba(63,185,132,0.10);
  --status-valid:      #E0A52B;   /* 🟡 validating = amber */
  --status-valid-bg:   rgba(224,165,43,0.10);
  --status-soon:       #857C6A;
  --status-soon-bg:    rgba(133,124,106,0.12);
  --kill:              #D24B3E;   /* graveyard / killed */
  --status-down:       #D24B3E;

  /* --- Two membership arms (kept, tuned for dark) --- */
  --arm-crypto:  #7EA2FF;   /* 🔵 Crypto */
  --arm-metal:   #E0A52B;   /* 🟡 Precious-metal (gold) */

  /* --- Radius (terminal = tighter corners) --- */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-pill: 4px;
  --r-full: 9999px;

  /* --- Spacing --- */
  --s-xs: 8px;
  --s-sm: 12px;
  --s-base: 16px;
  --s-md: 20px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 88px;

  --maxw: 1180px;
  --shadow-soft: 0 6px 22px -12px rgba(0,0,0,0.8);
  --shadow-card: 0 24px 50px -28px rgba(224,165,43,0.18), 0 0 0 1px rgba(224,165,43,0.05);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Mobile safety: never let a stray wide element create a horizontal scrollbar. */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--ink2);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* faint amber grid, like a terminal */
  background-image:
    linear-gradient(rgba(224,165,43,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,165,43,.018) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: center top;
}
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amberhi); text-decoration: none; }
img { max-width: 100%; display: block; }

/* Numbers always mono + tabular (JetBrains Mono) */
.num, .mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- Typographic tiers (Fraunces display, thin) ----------
   Sizes are fluid via clamp() so hero/section headings stay readable and
   never overflow on 360–414px phones, while keeping the desktop maxima. */
.display-mega { font-family: 'Fraunces', Georgia, serif; font-size: clamp(36px, 8vw, 64px); font-weight: 300; line-height: 1.05; letter-spacing: -0.6px; color: var(--ink); }
.display-xl   { font-family: 'Fraunces', Georgia, serif; font-size: clamp(31px, 6.5vw, 50px); font-weight: 300; line-height: 1.07; letter-spacing: -0.6px; color: var(--ink); }
.display-lg   { font-family: 'Fraunces', Georgia, serif; font-size: clamp(27px, 5vw, 38px); font-weight: 400; line-height: 1.1;  letter-spacing: -0.4px; color: var(--ink); }
.display-md   { font-family: 'Fraunces', Georgia, serif; font-size: clamp(23px, 4vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: -0.3px; color: var(--ink); }
.title-lg     { font-size: 22px; font-weight: 600; line-height: 1.2;  letter-spacing: -0.2px; color: var(--ink); }
.title-md     { font-size: 17px; font-weight: 600; line-height: 1.3;  color: var(--ink); }
.lead         { font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--ink2); }
.eyebrow      { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--amber); }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-lg); }
.section   { padding: var(--s-section) 0; }
.section--tight { padding: 56px 0; }
.center    { text-align: center; }
.stack > * + * { margin-top: var(--s-base); }
.grid { display: grid; gap: var(--s-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,7,7,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line2);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav__brand { display: flex; align-items: center; gap: 11px; font-family: 'Fraunces', serif; font-weight: 500; color: var(--ink); font-size: 19px; letter-spacing: 1.2px; text-transform: uppercase; }
.nav__brand:hover { color: var(--ink); }
/* facet-ring mark, drawn in CSS-mask-free pure SVG via the .nav__logo element */
.nav__logo {
  width: 28px; height: 28px; display: inline-block; flex-shrink: 0;
  background-image: url("../img/onyx-mark.svg");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.nav__links { display: flex; align-items: center; gap: var(--s-lg); font-family: 'JetBrains Mono', monospace; }
.nav__links a { color: var(--ink2); font-size: 12.5px; font-weight: 400; letter-spacing: 0.4px; text-transform: uppercase; position: relative; padding: 4px 0; }
.nav__links a:hover { color: var(--amber); }
.nav__links a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--amber); }
.nav__cta { display: flex; align-items: center; gap: 12px; }

/* language toggle (EN <-> TR) */
.lang-toggle {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.6px;
  color: var(--amber); background: rgba(224,165,43,0.06);
  border: 1px solid var(--line2); border-radius: var(--r-sm);
  padding: 7px 12px; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-toggle:hover { background: rgba(224,165,43,0.14); color: var(--amberhi); border-color: var(--amber); }

/* ---------- Mobile nav: hamburger + left-slide drawer ----------
   Desktop: hamburger is hidden, the .nav__links bar is the menu (unchanged).
   ≤820px: .nav__links hides (existing rule) and the hamburger appears; tapping
   it opens a left-sliding drawer with a backdrop. JS handles open/close/ESC/
   link-close + body scroll-lock. Drawer + backdrop only render on small screens
   (display:none ≥821px) so desktop layout is never touched. */
.nav__menu-btn {
  display: none; /* shown only ≤820px (see responsive block) */
  position: relative; /* anchor the ☰ glyph fallback */
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; flex-shrink: 0;
  background: var(--surface-soft); border: 1px solid var(--line2);
  border-radius: var(--r-md); cursor: pointer;
  color: var(--ink); /* drives both the bars (currentColor) + glyph fallback */
}
/* Resilient ☰ glyph painted UNDER the CSS bars. If the bar-span rule fails to
   load (e.g. a stale/partial stylesheet), this guarantees a visible hamburger
   instead of a blank box. The spans sit on top and hide it when CSS is fresh. */
.nav__menu-btn::before {
  content: "\2630"; /* ☰ TRIGRAM FOR HEAVEN */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: #F2EAD8; pointer-events: none;
}
.nav__menu-btn span {
  display: block; position: relative; z-index: 1;
  height: 2.5px; width: 100%;
  background: #F2EAD8; background: var(--ink, #F2EAD8); /* literal fallback if --ink missing */
  border-radius: 2px; transition: background .15s ease;
}
.nav__menu-btn:hover { border-color: var(--amber); }
.nav__menu-btn:hover span { background: var(--amber); }
.nav__menu-btn:hover::before { color: var(--amber); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  width: min(82vw, 320px);
  background: linear-gradient(180deg, #0C0C0A, #080807);
  border-right: 1px solid var(--line2);
  box-shadow: 0 0 60px -10px rgba(0,0,0,0.9);
  transform: translateX(-104%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  /* short / landscape phones: let the panel scroll so the foot stays reachable */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* iOS Safari: keep the foot clear of the home-indicator / bottom toolbar */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 16px; border-bottom: 1px solid var(--line2);
}
.nav-drawer__brand { display: flex; align-items: center; gap: 11px; font-family: 'Fraunces', serif; font-weight: 500; color: var(--ink); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; }
.nav-drawer__close {
  width: 44px; height: 44px; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line2); border-radius: var(--r-md);
  color: var(--ink2); font-size: 18px; line-height: 1;
}
.nav-drawer__close:hover { border-color: var(--amber); color: var(--amber); }
.nav-drawer__links { list-style: none; margin: 0; padding: 8px 0; flex: 1; }
.nav-drawer__links li { border-bottom: 1px solid var(--line); }
.nav-drawer__links a {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; min-height: 44px; box-sizing: border-box;
  color: var(--ink); font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase;
}
.nav-drawer__links a:hover { background: rgba(224,165,43,0.06); color: var(--amber); }
.nav-drawer__links .ic { color: var(--amber); font-size: 13px; width: 16px; text-align: center; }
.nav-drawer__foot { padding: 16px 20px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 12px; }
/* foot action row: primary CTA stretches, the lang toggle sits beside it at equal height */
.nav-drawer__actions { display: flex; align-items: stretch; gap: 10px; }
.nav-drawer__actions .btn { flex: 1; }
.nav-drawer__actions .lang-toggle { flex-shrink: 0; padding-left: 16px; padding-right: 16px; }
.nav-drawer__note { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); letter-spacing: 0.3px; margin: 0; line-height: 1.5; }
/* keep drawer chrome off the desktop entirely */
@media (min-width: 821px) { .nav-drawer, .nav-backdrop { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 13px 20px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap; letter-spacing: 0.3px;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--amber); color: var(--on-primary); border-color: var(--amber); }
.btn--primary:hover { background: var(--amberhi); color: var(--on-primary); border-color: var(--amberhi); }
.btn--secondary { background: transparent; color: var(--ink2); border-color: var(--line2); }
.btn--secondary:hover { background: rgba(224,165,43,0.06); color: var(--amber); border-color: var(--amber); }
.btn--outline-dark { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn--outline-dark:hover { border-color: var(--amber); color: var(--amber); }
.btn--ghost { background: transparent; color: var(--amber); border-color: var(--line2); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amberhi); }
.btn--lg { padding: 16px 28px; font-size: 14px; }
.btn--block { width: 100%; }

/* GATE: disabled payment buttons (Lemon Squeezy review pending) */
.btn--gated {
  background: var(--bg3); color: var(--muted);
  border: 1px dashed var(--line2); cursor: not-allowed; letter-spacing: 0.3px;
}
.btn--gated:hover { background: var(--bg3); color: var(--muted); border-color: var(--line2); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.92; }

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.3px;
  padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid transparent;
}
.badge--proven { background: var(--status-proven-bg); color: var(--status-proven); border-color: rgba(63,185,132,0.4); }
.badge--valid  { background: var(--status-valid-bg);  color: var(--status-valid);  border-color: rgba(224,165,43,0.4); }
.badge--soon   { background: var(--status-soon-bg);   color: var(--status-soon);   border-color: var(--line2); }
.badge--gate   { background: rgba(224,165,43,0.06); color: var(--amber); border: 1px solid var(--line2); }
.badge--ai     { background: rgba(224,165,43,0.06); color: var(--ink2); border-color: var(--line2); }
.badge--crypto { background: rgba(126,162,255,0.10); color: var(--arm-crypto); border-color: rgba(126,162,255,0.32); }
.badge--metal  { background: rgba(224,165,43,0.10); color: var(--arm-metal); border-color: rgba(224,165,43,0.32); }
.badge--soft   { background: rgba(224,165,43,0.06); color: var(--ink2); border-color: var(--line2); }

/* ---------- Hero (terminal ground + faint amber wash) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--bg); color: var(--ink);
  border-bottom: 1px solid var(--line2);
}
.hero__mesh {
  position: absolute; inset: -20% -10% auto -10%; height: 80%;
  background:
    radial-gradient(45% 60% at 18% 18%, rgba(224,165,43,0.10), transparent 70%),
    radial-gradient(50% 70% at 80% 8%, rgba(224,165,43,0.06), transparent 70%),
    radial-gradient(40% 60% at 60% 60%, rgba(63,185,132,0.05), transparent 70%);
  filter: blur(34px); pointer-events: none; opacity: 0.9;
}
.hero__inner { position: relative; padding: 92px 0 78px; }
.hero h1 { color: var(--ink); max-width: 16ch; margin: 0 0 var(--s-lg); }
.hero h1 b, .hero h1 strong { color: var(--amber); font-weight: 500; }
.hero .lead { color: var(--ink2); max-width: 54ch; }
.hero .lead strong { color: var(--ink); }
.hero__cta { display: flex; gap: var(--s-sm); flex-wrap: wrap; margin-top: var(--s-xl); }
.hero__note { margin-top: var(--s-md); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); letter-spacing: 0.3px; }

/* ---------- Hero live signal_desk panel (home) ---------- */
.signal-desk {
  background: linear-gradient(180deg, #0C0C0A, #080807);
  border: 1px solid var(--line2); border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(224,165,43,0.04);
  font-family: 'JetBrains Mono', monospace;
}
.signal-desk__top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line2); background: #0A0A09; }
.signal-desk__tl { display: flex; gap: 6px; }
.signal-desk__tl i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #3a352a; }
.signal-desk__tl i:nth-child(3) { background: var(--amber); box-shadow: 0 0 7px rgba(224,165,43,0.6); }
.signal-desk__tt { font-size: 11.5px; color: var(--muted); letter-spacing: 0.5px; }
.signal-desk__tt b { color: var(--ink2); font-weight: 500; }
.signal-desk__live { margin-left: auto; font-size: 10.5px; color: var(--amber); letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.signal-desk__live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: onyxBlink 1.6s steps(1) infinite; }
@keyframes onyxBlink { 50% { opacity: 0.25; } }
.signal-desk__body { font-size: 12.5px; padding: 6px 0 8px; }
.sd-row { display: grid; grid-template-columns: 1.5fr 1.1fr auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.sd-row:last-child { border-bottom: none; }
.sd-row .sym { color: var(--ink); letter-spacing: 0.2px; }
.sd-row .sym small { display: block; color: var(--muted); font-size: 10.5px; letter-spacing: 0.2px; margin-top: 1px; }
.sd-row .met { color: var(--ink2); font-size: 11.5px; }
.sd-row .met b { color: var(--amber); font-weight: 500; }
.sd-badge { justify-self: end; font-size: 10.5px; letter-spacing: 0.3px; padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid; white-space: nowrap; }
.sd-badge.ok { color: var(--green); border-color: rgba(63,185,132,0.4); background: rgba(63,185,132,0.08); }
.sd-badge.val { color: var(--amber); border-color: rgba(224,165,43,0.4); background: rgba(224,165,43,0.08); }
.signal-desk__foot { font-size: 10.5px; color: var(--muted); padding: 10px 16px; border-top: 1px solid var(--line2); background: #0A0A09; letter-spacing: 0.3px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.signal-desk__foot .blink { color: var(--amber); }
.sd-cursor { display: inline-block; width: 7px; height: 13px; background: var(--amber); vertical-align: -2px; margin-left: 3px; animation: onyxBlink 1s steps(1) infinite; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.05fr; gap: 44px; align-items: center; }

/* ---------- Arm selector ---------- */
.arms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); margin-top: var(--s-xxl); }
.arm-card {
  background: var(--bg2); border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: var(--s-xl); color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.arm-card:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.arm-card__tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.4px; }
.arm-card h3 { color: var(--ink); margin: 10px 0 6px; font-size: 21px; font-weight: 500; letter-spacing: -0.2px; }
.arm-card p { color: var(--ink2); font-size: 14px; margin: 0; }
.arm-card__core { margin-top: var(--s-base); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); letter-spacing: 0.2px; }
.arm-card__core strong { color: var(--amber); font-weight: 500; }

/* ---------- Generic cards ---------- */
.card {
  background: var(--bg2); border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: var(--s-xl);
}
.card--soft { background: var(--bg2); border-color: var(--line2); }
.card--hover { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.card--hover:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: var(--amber); }

/* ---------- Signal / catalog card ----------
   Layout fix (080): cards keep equal height (grid stretch) but the inner
   content is TOP-ALIGNED (justify-content: flex-start, the column default).
   Earlier the description used flex:1 and the footer used margin-top:auto,
   which pushed the button to the very bottom and left an ugly empty gap in
   the MIDDLE of short cards. Now content flows from the top and any spare
   space falls at the BOTTOM of the card instead. FZ-LONG (already full) is
   unaffected; short cards (BTC Vol Alert, Edge Decay, Macro-Vol, …) close up. */
.signal-card { display: flex; flex-direction: column; height: 100%; }
.signal-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.signal-card h3 { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0.2px; }
.signal-card__sub { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.signal-card__desc { font-size: 14px; color: var(--ink2); margin: 16px 0; }
.metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.metric {
  background: var(--bg3); border: 1px solid var(--line2);
  border-radius: var(--r-md); padding: 8px 12px; min-width: 0;
}
.metric__k { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); display: block; letter-spacing: 0.3px; text-transform: uppercase; }
.metric__v { font-size: 15px; color: var(--ink); font-weight: 500; }
.signal-card__foot { margin-top: 4px; }
.disclaimer-mini { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.method-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.checkout-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; max-width: 60ch;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.checkout-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--amber); }

/* ---------- Educational scenario block (080: What it says / How to read / Risk) ---------- */
.edu {
  border: 1px solid var(--line2); border-left: 2px solid var(--amber);
  border-radius: var(--r-md); background: rgba(224,165,43,0.035);
  padding: 12px 14px; margin: 4px 0 16px;
}
.edu__title {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--amber); margin: 0 0 8px;
}
.edu dl { margin: 0; display: grid; gap: 7px; }
.edu dt {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink);
  letter-spacing: 0.2px; margin-bottom: 1px;
}
.edu dd { margin: 0 0 4px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.edu dd:last-child { margin-bottom: 0; }
.edu .edu__risk { color: var(--muted); }

/* standalone graveyard waitlist form */
.waitlist-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.waitlist-input {
  min-width: 260px; padding: 12px 16px;
  border: 1px solid var(--line2); border-radius: var(--r-md);
  background: var(--bg3); color: var(--ink);
  font-size: 15px; font-family: 'JetBrains Mono', monospace;
}
.waitlist-input::placeholder { color: var(--muted); }

/* validating banner inside card */
.validating-banner {
  background: var(--status-valid-bg); color: var(--status-valid);
  border: 1px solid rgba(224,165,43,0.3);
  border-radius: var(--r-md); padding: 10px 12px; font-size: 12.5px;
  margin-bottom: 14px; line-height: 1.45;
}
.validating-banner strong { color: var(--amberhi); }

/* K2 reframe: crowding-safe delayed-signal note (FZ-LONG core) */
.delayed-note {
  background: rgba(224,165,43,0.06); color: var(--ink2);
  border: 1px solid var(--line2); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  margin: 0 0 14px;
}
.delayed-note strong { color: var(--amber); }

/* ---------- Section heads ---------- */
.section-head { max-width: 60ch; margin-bottom: var(--s-xxl); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { margin: 12px 0 14px; }
.section-head p { font-size: 16.5px; color: var(--ink2); margin: 0; }

/* ---------- Value props ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.value-item { border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--bg2); padding: var(--s-lg); transition: border-color .15s ease; }
.value-item:hover { border-color: var(--line2); }
.value-item__icon { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(224,165,43,0.08); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.value-item h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.value-item p { font-size: 14px; color: var(--ink2); margin: 0; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-base); align-items: stretch; }
.tier { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--s-xl); }
.tier--featured { background: var(--bg3); border-color: var(--amber); box-shadow: 0 0 0 1px rgba(224,165,43,0.2); }
.tier__name { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink); }
.tier__price { font-family: 'JetBrains Mono', monospace; font-size: 40px; font-weight: 700; letter-spacing: -1px; color: var(--ink); margin: 12px 0 2px; }
.tier--featured .tier__price { color: var(--amber); }
.tier__period { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
.tier__desc { font-size: 13px; color: var(--ink2); margin: 10px 0 18px; min-height: 36px; }
.tier__features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.tier__features li { font-size: 13.5px; color: var(--ink2); padding: 7px 0 7px 24px; position: relative; line-height: 1.45; border-bottom: 1px solid var(--line); }
.tier__features li:last-child { border-bottom: none; }
.tier__features li::before { content: "+"; position: absolute; left: 0; color: var(--amber); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.tier__flag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }

/* spoke card (Silver Insider) */
.spoke {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-lg); align-items: center;
  background: linear-gradient(180deg, #0C0C0A, #080807); color: var(--ink);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: var(--s-xl);
}
.spoke h3 { color: var(--ink); margin: 0 0 6px; font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 600; letter-spacing: 0.2px; }
.spoke p { color: var(--ink2); margin: 0; font-size: 14px; max-width: 60ch; }
.spoke__price { text-align: right; }
.spoke__price .num { font-size: 32px; font-weight: 700; color: var(--amber); }

/* ---------- Terminal demo panel (onyx_ui_blueprint style) ---------- */
.terminal {
  background: linear-gradient(180deg, #0C0C0A, #080807); border: 1px solid var(--line2); border-radius: var(--r-lg);
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--ink2);
  font-size: 12.5px; line-height: 1.55; overflow: hidden;
}
.terminal__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0A0A09; border-bottom: 1px solid var(--line2); }
.terminal__dot { width: 9px; height: 9px; border-radius: 50%; background: #3a352a; }
.terminal__dot:nth-child(3) { background: var(--amber); box-shadow: 0 0 7px rgba(224,165,43,0.5); }
.terminal__title { margin-left: 8px; font-size: 11px; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; }
.terminal__body { padding: 16px 18px; white-space: pre; overflow-x: auto; }
.t-up { color: var(--green); }
.t-down { color: var(--kill); }
.t-warn { color: var(--amber); }
.t-dim { color: var(--muted); }
.t-key { color: var(--amberhi); }

/* ---------- Graveyard table ---------- */
.grave-table { width: 100%; border-collapse: collapse; }
/* Mobile: let the 3-column table scroll horizontally inside its card
   instead of stretching the whole page wider than the viewport. */
.grave-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grave-table th, .grave-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.grave-table th { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); font-weight: 500; border-bottom-color: var(--line2); }
.grave-table td.name { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink); white-space: nowrap; }
.grave-table .reason { color: var(--ink2); }
.grave-table .verdict { white-space: nowrap; }
.kill-pill { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.4px; padding: 3px 9px; border-radius: var(--r-sm); background: rgba(210,75,62,0.08); color: var(--kill); border: 1px solid rgba(210,75,62,0.4); }

/* ---------- Stat band (process numbers, NOT returns) ---------- */
.statband { background: var(--bg2); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.statband .grid-4 { gap: 1px; background: var(--line2); }
.stat { text-align: left; background: var(--bg2); padding: 28px 24px; position: relative; }
.stat__v { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.stat__l { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--muted); margin-top: 7px; letter-spacing: 0.2px; }

/* ---------- Disclaimer band ---------- */
.disclaimer {
  background: #0A0A09; border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: 18px 22px;
  font-size: 13px; color: var(--ink2); line-height: 1.75;
}
.disclaimer strong { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--bg2); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); text-align: center; }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink2); max-width: 52ch; margin: 14px auto 0; }

/* ---------- Footer ---------- */
.footer { background: var(--bg2); border-top: 1px solid var(--line2); padding: 56px 0 36px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-xl); }
.footer h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a, .footer li { font-size: 14px; color: var(--ink2); }
.footer a:hover { color: var(--amber); }
.footer__brand { display: flex; align-items: center; gap: 11px; font-family: 'Fraunces', serif; font-weight: 500; color: var(--ink); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.footer__legal { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { background: var(--bg2); border-bottom: 1px solid var(--line2); padding: 68px 0 52px; }
.page-hero h1 { margin: 12px 0 14px; }
.page-hero p { font-size: 17px; color: var(--ink2); max-width: 64ch; margin: 0; }

/* ---------- Arm filter tabs ---------- */
.tabs { display: inline-flex; gap: 4px; background: var(--bg3); padding: 4px; border: 1px solid var(--line2); border-radius: var(--r-md); margin-bottom: var(--s-xl); }
.tab { border: none; background: transparent; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; color: var(--ink2); padding: 8px 16px; border-radius: var(--r-sm); cursor: pointer; }
.tab[aria-selected="true"] { background: rgba(224,165,43,0.12); color: var(--amber); }

.arm-section-title { display: flex; align-items: center; gap: 10px; margin: 8px 0 20px; }
.arm-section-title h2 { margin: 0; }
.shelf-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin: 40px 0 16px; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.hr { height: 1px; background: var(--line2); border: 0; margin: var(--s-xxl) 0; }
.text-muted { color: var(--muted); }
.accent { color: var(--amber); }
.hide { display: none !important; }

/* ---------- Responsive ----------
   Grid ladder per spec:
     ≤960px  → card grids drop to 2 columns
     ≤640px  → everything is a single column (phones)
   plus tablet/phone hardening for the hero, nav, terminal, table and forms.
   No horizontal overflow at 360 / 390 / 414px. */

/* ----- ≤1024px: large tablets / small laptops ----- */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- ≤960px: two-column card grids ----- */
@media (max-width: 960px) {
  .grid-3, .value-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- ≤920px: hero stacks ----- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ----- ≤820px: nav links collapse → hamburger drawer, two-arm + footer reflow ----- */
@media (max-width: 820px) {
  .nav__links { display: none; }
  /* the desktop link bar is replaced by the hamburger + left-slide drawer */
  .nav__menu-btn { display: inline-flex; }
  /* CTA cluster (lang + buttons) now lives INSIDE the drawer on mobile, so the
     top bar stays ONE clean row: ☰ + brand only (resolves the split two-row look). */
  .nav__cta { display: none; }
  .arms { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .spoke { grid-template-columns: 1fr; }
  .spoke__price { text-align: left; }
  .statband .grid-4 { grid-template-columns: repeat(2,1fr); }
  .sd-row { grid-template-columns: 1fr auto; }
  .sd-row .met { display: none; }
  .hero__inner { padding: 64px 0 52px; }
  .section { padding: 60px 0; }
}

/* ----- ≤640px: single column everywhere (phones) ----- */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4,
  .value-grid, .arms, .pricing-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .statband .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* ---- Mobile compaction (matches the approved mockup's tighter feel) ----
     The home flow was "too long to scroll" on a phone. We shrink the heavy
     desktop vertical rhythm WITHOUT removing any content (the Graveyard trust
     hook stays). Desktop (≥641px) is untouched. */
  .section { padding: 38px 0; }
  .section--tight { padding: 30px 0; }
  .hero__inner { padding: 36px 0 32px; }
  .hero__cta { margin-top: 22px; gap: 10px; }
  .hero__note { margin-top: 14px; }
  .arms { margin-top: 28px; gap: 12px; }
  .section-head { margin-bottom: 26px; }
  .stat { padding: 20px 18px; }
  .footer { padding: 36px 0 28px; }
  .page-hero { padding: 40px 0 32px; }
  /* the dark Graveyard-teaser / "why" cards already shrink to 22px below */

  /* roomier tap targets on touch screens (≈44px min height) */
  .tab { padding: 11px 16px; }
  .lang-toggle { padding: 11px 14px; }
  .nav__cta .btn { padding: 11px 16px; }

  /* nav can wrap its CTA cluster instead of forcing the bar wider than the screen */
  .nav__inner { height: auto; min-height: 62px; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .nav__cta { gap: 8px; flex-wrap: wrap; }

  /* terminal / signal_desk: keep mono lines inside the viewport (scroll, don't bleed) */
  .terminal__body { font-size: 11.5px; padding: 14px; }
  .signal-desk__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* waitlist form: input + button stack and fit a 320px screen */
  .waitlist-form { flex-direction: column; align-items: stretch; }
  .waitlist-input { min-width: 0; width: 100%; }
  .waitlist-form .btn { width: 100%; }

  /* tighten generous desktop padding so content isn't cramped by big gutters */
  .arm-card, .tier { padding: var(--s-lg); }
  .container { padding: 0 18px; }

  /* Override only the heavy inline paddings (32 / 44 / 48px) on the dark
     teaser + "why" cards so they fit a 360px screen. Attribute-substring
     selectors are specific to those cards and leave the tight table card
     (padding:8px 8px 0) and normal .card untouched. */
  .card[style*="padding:32px"],
  .card[style*="padding:44px"],
  .card[style*="padding:48px"] { padding: 22px !important; }
}

/* ----- ≤400px: very small phones, footer to one column ----- */
@media (max-width: 400px) {
  .footer__grid, .statband .grid-4 { grid-template-columns: 1fr; }
}