/* ═══════════════════════════════════════════════════════════════════
   Kalshi Perpetuals — Learn
   Editorial. Quiet. No decorative widgets. Visuals only where they
   teach (one video, comparison tables).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kalshi Sans ── */
@font-face { font-family:'Kalshi Sans'; font-weight:300; font-display:swap; src:url('fonts/KalshiSans-Light-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:400; font-display:swap; src:url('fonts/KalshiSans-Regular-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:500; font-display:swap; src:url('fonts/KalshiSans-Medium-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:600; font-display:swap; src:url('fonts/KalshiSans-Semibold-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:700; font-display:swap; src:url('fonts/KalshiSans-Bold-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans Condensed'; font-weight:500; font-display:swap; src:url('fonts/KalshiSansCondensed-Medium-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans Condensed'; font-weight:600; font-display:swap; src:url('fonts/KalshiSansCondensed-Semibold-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans Condensed'; font-weight:700; font-display:swap; src:url('fonts/KalshiSansCondensed-Bold-Web.woff2') format('woff2'); }

:root{
  --brand-green:#00DD94;
  --green-deep:#01201A;

  --bg-app:#000000;
  --bg-1:#0A0D0C;

  --fg-1:rgba(255,255,255,0.94);
  --fg-2:rgba(255,255,255,0.66);
  --fg-3:rgba(255,255,255,0.42);
  --fg-4:rgba(255,255,255,0.20);

  --line-1:rgba(255,255,255,0.07);
  --line-2:rgba(255,255,255,0.13);
  --line-3:rgba(255,255,255,0.20);

  --font-body:'Kalshi Sans',system-ui,-apple-system,sans-serif;
  --font-cond:'Kalshi Sans Condensed','Kalshi Sans',system-ui,sans-serif;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --maxw:1100px;
  --read:680px;     /* readable column width — based on KPOW-style editorial */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0; background:var(--bg-app); color:var(--fg-1);
  font-family:var(--font-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
}
::selection{ background:rgba(0,221,148,0.22); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.material-symbols-outlined{ font-family:'Material Symbols Outlined'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle; user-select:none; line-height:1; }
.tnum, .num{ font-variant-numeric:tabular-nums; }
.green{ color:var(--brand-green); }
.red{ color:#FF4D6A; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

h1,h2,h3,h4{ margin:0; }

/* ═══════ TOPBAR (unchanged) ═══════ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50; height:64px;
  display:flex; align-items:center; gap:18px; padding:0 28px;
  background:rgba(10,12,15,0.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-1);
  transition:background .3s ease;
}
/* Scroll fade — once the user scrolls and the coil art slides under
   the bar, the bar's background fades to near-solid dark so the nav
   text never clashes with the bright arcs beneath it. Class toggled
   by the scroll handler at the end of index.html; at the top of the
   page the lighter glass treatment above applies. */
.topbar.is-scrolled{
  background:rgba(8,10,12,0.97);
}
.topbar .brand{ display:flex; align-items:center; gap:11px; }
.topbar .brand svg{ height:17px; width:auto; color:var(--brand-green); }
/* Perpetuals cap-height matches the Kalshi mark height. The mark is
   17px tall; for the capital P to reach the same height, font-size
   must be ~17 / 0.72 ≈ 23px (Kalshi Sans cap-height ratio). The
   divider tracks the mark height too. */
.topbar .brand .perp{ font-weight:300; font-size:23px; line-height:1; color:var(--fg-1); letter-spacing:.01em; }
.topbar .brand .div{ width:1px; height:17px; background:var(--line-2); }
.topbar .brand .academy{ font-weight:500; font-size:13px; letter-spacing:.02em; color:var(--fg-2); }
.topbar .spacer{ flex:1; }
.topbar .tnav{ display:flex; gap:4px; }
.topbar .tnav a{
  font-size:13.5px; font-weight:500; color:var(--fg-2); padding:7px 12px; border-radius:8px;
  transition:color .15s, background .15s;
}
.topbar .tnav a:hover{ color:var(--fg-1); background:rgba(255,255,255,0.05); }
/* ─── CTA pill — minimal, confident, no shadow tricks ───────────────
   Flat brand-green fill, dark text. Hover darkens to a slightly
   deeper green (no glow, no lift, no inset gloss). Arrow slides 3px
   right. Press dips one shade further. That's the whole interaction.
   Removed layered shadows / lift / inset highlights in this revision
   — they added noise instead of polish. ───────────────────────── */
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  height:38px; padding:0 18px;
  border-radius:var(--r-pill);
  background:var(--brand-green); color:#04261C;
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  letter-spacing:-.005em; text-decoration:none;
  white-space:nowrap; flex-shrink:0;
  cursor:pointer; border:0;
  transition:background 180ms ease;
}
.btn-cta:hover{ background:#0AC285; }
.btn-cta:active{ background:#019571; }
.btn-cta:focus-visible{
  outline:2px solid var(--brand-green); outline-offset:3px;
}
.btn-cta-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; flex-shrink:0;
  transition:transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-cta-arrow svg{ width:14px; height:14px; display:block; }
.btn-cta:hover .btn-cta-arrow{ transform:translateX(3px); }

/* Large variant for the bottom CTA — same construction, larger size. */
.btn-cta--lg{ height:48px; padding:0 24px; font-size:15px; gap:12px; }
.btn-cta--lg .btn-cta-arrow,
.btn-cta--lg .btn-cta-arrow svg{ width:16px; height:16px; }

/* ─── Ghost button — quiet secondary action ────────────────────── */
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 18px;
  border-radius:var(--r-pill);
  background:transparent; color:var(--fg-1);
  border:1px solid var(--line-2);
  font-weight:500; font-size:13.5px; letter-spacing:-.005em;
  cursor:pointer; text-decoration:none;
  transition:border-color .15s, color .15s;
}
.btn-ghost:hover{ border-color:var(--line-3); color:var(--brand-green); }
.cta-band .btn-ghost{ height:48px; padding:0 24px; font-size:15px; }

/* ═══════ HERO (unchanged) ═══════ */
.hero-section{ position:relative; z-index:1; padding:16px 0 64px; text-align:center; overflow:hidden; }
/* Scroll scrim — dark layer sandwiched between the coil art and the
   hero text. The coil parallaxes at 0.45× scroll speed, so the lockup
   (1×) climbs into the bright arcs as the user scrolls; this scrim
   fades in with scroll (JS writes --hero-scrim in the parallax IIFE)
   to keep the text legible against them. z-index 2 sits above the
   transformed .hero-art stacking context but below .hero-center (z3).
   Inert at rest (opacity 0) and for prefers-reduced-motion users —
   without parallax the text never overlaps the arcs. */
.hero-section::before{
  content:''; position:absolute; left:0; right:0; top:0; height:80%;
  z-index:2; pointer-events:none;
  background:radial-gradient(58% 60% at 50% 45%,
    rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 78%);
  opacity:var(--hero-scrim, 0);
}
/* Second stage — a uniform black layer that keeps deepening as the
   user scrolls past the radial scrim's cap, so the whole coil
   progressively recedes the further down the page they go.
   (--hero-scrim2 ramps later and longer than --hero-scrim.) */
.hero-section::after{
  content:''; position:absolute; inset:0;
  z-index:2; pointer-events:none;
  background:#000;
  opacity:var(--hero-scrim2, 0);
}
.hero-art{
  position:relative; left:50%;
  /* JS writes --parallax-y on scroll (see hero coil parallax IIFE).
     Composing it here means the existing translateX(-50%) centering
     stays intact and JS only owns the vertical drift. */
  transform:translateX(-50%) translate3d(0, var(--parallax-y, 0px), 0);
  will-change:transform;
  width:min(1480px, 120vw); margin:0;
}
.hero-art::before{
  content:''; position:absolute; left:50%; top:6%; transform:translateX(-50%);
  width:70%; height:80%; z-index:0; pointer-events:none;
  background:radial-gradient(50% 55% at 50% 40%, rgba(0,221,148,0.22) 0%, rgba(0,221,148,0.05) 40%, rgba(0,221,148,0) 70%);
  filter:blur(8px);
}
.hero-art img.coil{ position:relative; z-index:1; width:100%; height:auto; display:block; }
.hero-art::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 96%);
}
.hero-center{ position:relative; z-index:3; max-width:860px; margin:-32px auto 0; padding:0 24px; }
.lockup{ display:inline-flex; align-items:center; gap:9px; font-size:clamp(20px,2.6vw,28px); margin-bottom:22px; }
.lockup .k{ color:var(--brand-green); }
.lockup .k svg{ height:1em; width:auto; display:block; }
/* "Perpetuals" cap-height matches the Kalshi mark (1em tall). Bumping
   .p font-size to 1.39em (≈ 1em / 0.72 cap-height ratio) so the
   capital P reaches the same visual height as the mark. line-height:1
   keeps the box height tight so center-alignment in the flex parent
   stays clean. */
.lockup .p{ color:var(--fg-1); font-weight:300; letter-spacing:.01em; font-size:1.39em; line-height:1; }
.lockup .tag{
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 11px; margin-left:4px;
}
.hero-sub{ font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:var(--fg-2); max-width:560px; margin:22px auto 0; }
.hero-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:28px 0 0; color:var(--fg-2); font-size:14px; font-weight:500; line-height:1.5; justify-content:center; }
/* Inline layout for the badge — icon sits as a regular inline glyph
   next to the text with a small negative vertical-align that drops
   its visual center onto the first-line text center. Works on a
   single line OR when the label wraps (icon stays attached to the
   first line's center via inline flow). */
.hero-meta span{ display:inline-block; }
.hero-meta span .material-symbols-outlined{
  display:inline-block;
  color:var(--brand-green);
  font-size:16px !important;
  vertical-align:-3px;
  margin-right:5px;
}

/* ═══════ LAYOUT — rail + readable column ═══════ */
.layout{
  display:grid; grid-template-columns:220px minmax(0, var(--read));
  gap:88px; max-width:var(--maxw); margin:0 auto; padding:0 28px;
  position:relative; z-index:1; justify-content:center;
}

/* Rail — flat, no track line, no bullets, no fake numbers */
.rail{ position:sticky; top:96px; align-self:start; height:max-content; padding-bottom:40px; }
.rail .rail-label{
  font-family:var(--font-cond); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 14px;
}
.rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.rail .rl{
  display:flex; align-items:baseline; gap:12px;
  padding:8px 0; color:var(--fg-3); font-size:14.5px; font-weight:500; line-height:1.4;
  transition:color .15s;
}
.rail .rl .n{
  font-size:11.5px; color:var(--fg-4); font-weight:500; min-width:18px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.rail .rl:hover{ color:var(--fg-1); }
.rail .rl:hover .n{ color:var(--fg-2); }
.rail .rl.active{ color:var(--brand-green); }
.rail .rl.active .n{ color:var(--brand-green); }
.rail-divider{
  height:1px; background:var(--line-1); margin:10px 0 6px;
}
.rail .rl-ref{ font-size:13.5px; }

/* ═══════ READING COLUMN ═══════ */
.main{ min-width:0; padding-top:24px; }

.section{
  padding:80px 0;
  border-top:1px solid var(--line-1);
  scroll-margin-top:88px;
}
.section:first-of-type{ border-top:0; padding-top:24px; }
.section-head{ margin-bottom:36px; }
.eyebrow{
  margin:0 0 14px;
  font-family:var(--font-cond); font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}
.eyebrow .n{ color:var(--brand-green); margin-right:14px; font-variant-numeric:tabular-nums; letter-spacing:.10em; }
.section-head h2{
  font-weight:600; font-size:clamp(28px, 3.4vw, 40px);
  line-height:1.12; letter-spacing:-0.02em; color:var(--fg-1); text-wrap:balance;
}
.section-head .lede{
  font-size:18px; line-height:1.62; color:var(--fg-2);
  margin:20px 0 0; max-width:var(--read); text-wrap:pretty;
}

/* Body prose */
.prose{ max-width:var(--read); }
.prose p{
  margin:0 0 18px; color:var(--fg-2); font-size:16.5px; line-height:1.74;
}
.prose p strong{ color:var(--fg-1); font-weight:600; }
.prose h3{
  font-weight:600; font-size:19px; line-height:1.3;
  margin:36px 0 14px; color:var(--fg-1); letter-spacing:-.01em;
}
.prose p:last-child{ margin-bottom:0; }

/* Reference sections — slightly less editorial weight on the eyebrow */
.section--ref .eyebrow{ color:var(--brand-green); }

/* ═══════ THE ONE VIDEO — native controls, no overlay chrome ═══════ */
.hero-video{ margin:8px 0 36px; }
.kvideo{
  display:block; width:100%; aspect-ratio:16/9;
  background:#0A0D0C; border:1px solid var(--line-2); border-radius:var(--r-lg);
  outline:none;
}
.kvideo:hover{ border-color:var(--line-3); }

/* ═══════ TABLES — editorial, restrained ═══════ */
.ktbl{
  margin:14px 0 0; max-width:var(--read);
  border:1px solid var(--line-1); border-radius:var(--r-md); overflow:hidden;
}
/* Fixed table layout so the comparison tables match visually even
   when one has shorter cell content (Yes/No) and the other has
   longer phrases. 28/36/36 column split keeps the first (label)
   column tighter and the two comparison columns symmetric. */
.ktbl table{ width:100%; border-collapse:collapse; font-size:15px; table-layout:fixed; }
.ktbl th:first-child, .ktbl td:first-child{ width:28%; }
.ktbl th:nth-child(2), .ktbl td:nth-child(2){ width:36%; }
.ktbl th:nth-child(3), .ktbl td:nth-child(3){ width:36%; }
.ktbl th, .ktbl td{
  padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-1);
  vertical-align:top;
}
.ktbl thead th{
  font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); background:rgba(255,255,255,0.018); white-space:nowrap;
}
.ktbl tbody tr:last-child td{ border-bottom:0; }
.ktbl tbody td{ color:var(--fg-2); }
.ktbl tbody td:first-child{ color:var(--fg-1); font-weight:500; }
.ktbl td.num{ font-variant-numeric:tabular-nums; color:var(--fg-1); font-weight:500; }
.ktbl td.ralign, .ktbl th.ralign{ text-align:right; }
.ktbl--narrow{ max-width:520px; }

/* ═══════ ASSET GRID — "What you can trade" ═══════ */
.asset-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 36px;
  max-width:var(--read);
  border-top:1px solid var(--line-1);
  margin-top:8px;
}
.asset-row{
  display:grid;
  grid-template-columns:32px 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:12px 2px;
  border-bottom:1px solid var(--line-1);
  transition:background .15s, padding .15s;
}
.asset-row:hover{ background:rgba(255,255,255,0.015); }
.asset-icon{
  width:32px; height:32px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.asset-icon img{
  width:100%; height:100%; object-fit:contain;
  display:block;
}
.asset-name{
  color:var(--fg-1); font-weight:500; font-size:15px; letter-spacing:-.005em;
}
.asset-tkr{
  color:var(--fg-3); font-size:12px; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.asset-lev{
  color:var(--brand-green); font-weight:500; font-size:15px;
  font-variant-numeric:tabular-nums;
  min-width:48px; text-align:right;
}
@media (max-width:720px){
  .asset-grid{ grid-template-columns:1fr; gap:0; }
}

/* ═══════ FAQ ═══════ */
.faq{
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line-1);
  max-width:var(--read);
}
.faq details{ border-bottom:1px solid var(--line-1); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:20px 4px;
  display:flex; align-items:center; gap:16px;
  font-weight:500; font-size:17px; letter-spacing:-.005em; color:var(--fg-1);
  transition:color .15s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .material-symbols-outlined{ margin-left:auto; color:var(--fg-3); transition:transform .2s, color .15s; font-size:22px; }
.faq details[open] summary .material-symbols-outlined{ transform:rotate(180deg); color:var(--brand-green); }
.faq summary:hover{ color:var(--brand-green); }
.faq .faq-body{
  padding:0 4px 22px; color:var(--fg-2); font-size:16px; line-height:1.7;
}

/* Small "more questions" link at the bottom of the FAQ. Subtle by
   default (no chrome), brand-green text on hover with the arrow
   sliding 3px right — mirrors the .btn-cta motion language. */
.faq-help-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px;
  padding:8px 0;
  font-size:13.5px; font-weight:500; color:var(--fg-2);
  letter-spacing:-.005em;
  text-decoration:none;
  transition:color .15s;
}
.faq-help-link:hover{ color:var(--brand-green); }
.faq-help-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px;
  transition:transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-help-arrow svg{ width:14px; height:14px; display:block; }
.faq-help-link:hover .faq-help-arrow{ transform:translateX(3px); }

/* ═══════ MICRO TEXT ═══════ */
.micro{
  color:var(--fg-3); font-size:13px; line-height:1.6; margin:14px 0 32px; max-width:var(--read);
}

/* ═══════ CTA BAND — quiet ═══════ */
.cta-band{
  margin:80px 0 0; padding:48px 44px;
  border-radius:var(--r-xl); position:relative;
  background:rgba(0,221,148,0.04);
  border:1px solid rgba(0,221,148,0.16);
  max-width:var(--read);
}
.cta-band h2{
  font-weight:600; font-size:clamp(24px,3vw,32px);
  line-height:1.15; letter-spacing:-.02em; color:var(--fg-1);
}
.cta-band p{
  color:var(--fg-2); font-size:16px; max-width:480px;
  margin:12px 0 24px; line-height:1.6;
}
.cta-band .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ═══════ FOOTER ═══════ */
.site-foot{
  border-top:1px solid var(--line-1); margin-top:80px; padding:48px 0 64px;
  max-width:var(--read);
}
.disclaimer{ color:var(--fg-3); font-size:12px; line-height:1.65; margin:0; }
.foot-row{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.foot-row .div{ width:1px; height:16px; background:var(--line-2); }
.foot-row span{ font-family:var(--font-cond); font-size:13px; color:var(--fg-2); letter-spacing:.04em; }

/* ═══════════════════════════════════════════════════════════════════
   VISUAL COMPONENTS — diagrams + animations
   Each component is designed to teach the section's concept and stay
   quiet otherwise. Animations fire once when the element scrolls
   into view (via the JS reveal observer that adds .is-revealed).
   ═══════════════════════════════════════════════════════════════════ */

/* Default reveal state — fade up subtly. Diagram components opt in
   to additional staged animations (path draw, bar fill) via their
   own .is-revealed selectors. */
[data-reveal]{
  opacity:0; transform:translateY(8px);
  transition:opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width:var(--read);
  margin:28px 0;
}
[data-reveal].is-revealed{ opacity:1; transform:translateY(0); }

/* ── L03 — Leverage slider ─────────────────────────────────────── */
.lev-slider{
  padding:24px 26px;
  background:rgba(255,255,255,0.018); border:1px solid var(--line-1); border-radius:var(--r-lg);
}
.lev-slider-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; gap:12px; }
.lev-slider-label{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.lev-slider-value{ font-size:32px; font-weight:600; color:var(--fg-1); letter-spacing:-.02em; }
.lev-slider-value #lev-x{ color:var(--brand-green); }
.lev-input{
  -webkit-appearance:none; appearance:none; width:100%; background:transparent; margin:6px 0 4px;
  height:24px; cursor:pointer;
}
.lev-input::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand-green) 0%, var(--brand-green) var(--lev-pct,44%), rgba(255,255,255,0.10) var(--lev-pct,44%));
}
.lev-input::-moz-range-track{ height:4px; border-radius:2px; background:rgba(255,255,255,0.10); }
.lev-input::-moz-range-progress{ height:4px; border-radius:2px; background:var(--brand-green); }
/* Slider thumb — small solid brand-green dot, editorial restraint.
   No border, no dark halo — pro-terminal sliders are typically
   small and quiet. Soft drop shadow grounds it on the track. Hover
   and active states expand a faint green ring for tactile feedback
   without changing the dot's visible size. */
.lev-input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--brand-green); border:0;
  margin-top:-5px; cursor:grab;
  /* Always-on soft brand-green outer glow + small dark drop shadow
     for tactile grounding on the track. */
  box-shadow:
    0 0 12px rgba(0,221,148,0.45),
    0 1px 4px rgba(0,0,0,0.35);
  transition:box-shadow .14s ease;
}
.lev-input::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--brand-green); border:0;
  cursor:grab;
  box-shadow:
    0 0 12px rgba(0,221,148,0.45),
    0 1px 4px rgba(0,0,0,0.35);
}
.lev-input:hover::-webkit-slider-thumb{
  box-shadow:
    0 0 16px rgba(0,221,148,0.60),
    0 0 0 6px rgba(0,221,148,0.10),
    0 1px 4px rgba(0,0,0,0.35);
}
.lev-input:active::-webkit-slider-thumb{
  cursor:grabbing;
  box-shadow:
    0 0 20px rgba(0,221,148,0.70),
    0 0 0 8px rgba(0,221,148,0.16),
    0 1px 4px rgba(0,0,0,0.35);
}
.lev-input:focus{ outline:none; }
.lev-slider-ticks{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:11px; color:var(--fg-4); font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
/* Stacked bar diagram showing what leverage actually does: your margin
   stays constant; the position size you control grows as a multiple of
   it. Reads at a glance — the bottom (position) bar visibly stretches
   as the slider moves up. */
.lev-viz{
  display:flex; flex-direction:column; gap:10px;
  margin-top:22px; padding-top:22px;
  border-top:1px solid var(--line-1);
}
.lev-bar{
  display:grid; grid-template-columns:120px 1fr 96px;
  align-items:center; gap:14px;
}
.lev-bar-label{
  font-size:11.5px; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:var(--fg-3);
}
.lev-bar-track{
  position:relative;
  height:14px;
  background:rgba(255,255,255,0.05);
  border-radius:7px;
  overflow:hidden;
}
.lev-bar-fill{
  height:100%; width:var(--fill, 10%);
  background:var(--brand-green);
  border-radius:7px;
  transition:width .18s ease-out;
}
.lev-bar--margin .lev-bar-fill{
  background:rgba(255,255,255,0.28);
}
.lev-bar-val{
  font-size:15px; font-weight:600; color:var(--fg-1);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.lev-bar--position .lev-bar-val{ color:var(--brand-green); }
.lev-stat{
  margin:14px 0 0;
  font-size:14px; line-height:1.7; color:var(--fg-2);
}
.lev-stat strong{ color:var(--fg-1); font-weight:600; }
.lev-stat strong.green{ color:var(--brand-green); }
.lev-stat-sub{ color:var(--fg-3); }

/* Hero treatment for the equity-change callout — the dollar value
   reads as the focal point of the sentence (larger, brand-green,
   gentle green glow), with the % parenthetical sitting muted next
   to it. The number itself counter-tweens between values via JS
   on slider change — no CSS pulse, just smooth digit animation. */
.lev-stat-pop{
  display:inline-flex; align-items:baseline; gap:8px;
  vertical-align:baseline;
}
.lev-stat-pop-val{
  font-size:22px; font-weight:700;
  color:var(--brand-green);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(0, 221, 148, 0.28);
}
.lev-stat-pop-sub{
  color:var(--fg-3);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

/* ── L04 — TP / SL trigger diagrams ────────────────────────────────
   Two charts, one per concept. Pre-trigger price line is grey; once
   it hits the TP (or SL) level, the dot pops and the post-trigger
   line continues in brand color. Designed to read like the screenshots
   provided: clean, axis-y on left, dashed horizontal levels, no
   distracting fill. ─────────────────────────────────────────────── */
.trig-chart{
  padding:22px 24px 18px;
  background:rgba(255,255,255,0.018); border:1px solid var(--line-1); border-radius:var(--r-lg);
}
.trig-chart svg{ display:block; width:100%; height:auto; aspect-ratio:31 / 14; overflow:visible; }
.trig-price{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.005em;
}
.trig-level{
  font-family:var(--font-body); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.trig-badge-text{
  font-family:var(--font-body); font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.005em;
}
.trig-badge{
  opacity:0;
  transition:opacity 360ms ease 1500ms;
}
[data-reveal].is-revealed .trig-badge{ opacity:1; }

/* Single colored path per chart. Uses pathLength="100" in the SVG so
   we can animate dashoffset 100 -> 0 regardless of the path's actual
   geometric length. Dot pops once the line completes its draw. */
.trig-path{
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1100ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
}
[data-reveal].is-revealed .trig-path{ stroke-dashoffset:0; }

.trig-dot{
  opacity:0; transform:scale(0.4); transform-origin:center;
  transform-box:fill-box;
  transition:opacity 260ms ease 1300ms, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 1300ms;
}
[data-reveal].is-revealed .trig-dot{ opacity:1; transform:scale(1); }

.trig-caption{
  margin:14px 0 0; font-size:13.5px; color:var(--fg-2); line-height:1.55;
}

/* ── L05 — Funding rate scenarios ──────────────────────────────── */
.fund-scenarios{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.fund-card{
  padding:18px 18px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,0.018); border:1px solid var(--line-1);
  display:flex; flex-direction:column; gap:14px;
}
.fund-card-head{ display:flex; align-items:center; justify-content:space-between; }
.fund-card-tag{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
}
.fund-card-tag--premium{ background:rgba(0,221,148,0.10); color:var(--brand-green); border:1px solid rgba(0,221,148,0.30); }
.fund-card-tag--discount{ background:rgba(255,77,106,0.10); color:#FF4D6A; border:1px solid rgba(255,77,106,0.30); }
.fund-card-tag--flat{ background:rgba(255,255,255,0.05); color:var(--fg-2); border:1px solid var(--line-2); }
.fund-card-prices{ display:flex; flex-direction:column; gap:6px; }
.fund-price{ display:flex; justify-content:space-between; align-items:baseline; }
.fund-price-label{ font-size:12px; color:var(--fg-3); font-weight:500; letter-spacing:.02em; }
.fund-price-val{ font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--fg-1); }
.fund-flow{
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-top:1px solid var(--line-1); border-bottom:1px solid var(--line-1);
}
.fund-flow--flat{ justify-content:center; }
.fund-side{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.fund-side--long{ color:var(--brand-green); }
.fund-side--short{ color:#FF4D6A; }
.fund-side--flat{ color:var(--fg-3); }
.fund-arrow{
  flex:1; color:var(--fg-3); display:flex; align-items:center; justify-content:center;
}
.fund-arrow svg{ width:100%; max-width:80px; height:14px; }
[data-reveal].fund-scenarios .fund-arrow svg path{
  stroke-dasharray:80; stroke-dashoffset:80;
  transition:stroke-dashoffset 800ms ease 400ms;
}
[data-reveal].is-revealed.fund-scenarios .fund-arrow svg path{ stroke-dashoffset:0; }
.fund-explain{ margin:0; font-size:13.5px; line-height:1.55; color:var(--fg-2); }

/* ── L06 — Liquidation cushion-drain visual ─────────────────────────
   Three rows showing the same $1,000 deposit cushion at three
   Bitcoin price levels. As the price falls (left column), the
   cushion bar drains (middle), and the remaining dollar amount
   shrinks (right). When the cushion hits $0, the position is
   liquidated. Single concept, single direction, easy to scan
   top-to-bottom. ──────────────────────────────────────────────── */
.liq-drain{
  padding:24px 26px 22px;
  background:rgba(255,255,255,0.012);
  border:1px solid var(--line-1);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:14px;
}
.liq-drain-title{
  margin:0 0 4px;
  font-size:14px; line-height:1.55;
  color:var(--fg-2);
}
.liq-drain-title strong{ color:#fff; font-weight:600; }
.liq-drain-title strong.green{ color:var(--brand-green); }

.liq-drain-row{
  display:grid;
  grid-template-columns:110px 1fr 110px;
  gap:18px;
  align-items:center;
}
.liq-drain-price{
  display:flex; flex-direction:column; gap:2px;
}
.liq-drain-tag{
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3);
}
.liq-drain-row--mid .liq-drain-tag{ color:#FF770F; }
.liq-drain-row--final .liq-drain-tag{ color:#FF4D6A; }
.liq-drain-px{
  font-size:15.5px; font-weight:600; color:var(--fg-1);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}

.liq-drain-bar{
  display:flex;
  height:20px;
  background:rgba(255,255,255,0.04);
  border-radius:4px;
  overflow:hidden;
}
/* Fill segments default to width:0; their final widths are driven by
   per-row @keyframes below with animation-fill-mode:both — so the
   keyframe's 0% state is what's painted during the animation delay,
   and the 100% state holds after it completes. */
.liq-drain-fill{
  height:100%;
  width:0;
}
.liq-drain-fill--cushion{
  background:var(--brand-green);
}
/* Orange "loss-so-far" and red "liquidated" use muted solids
   rather than full saturation — alpha tone drops the visual
   weight at 50/100% fills while keeping color identity. */
.liq-drain-fill--loss{
  background:rgba(255, 119, 15, 0.72);
}
.liq-drain-fill--liq{
  background:rgba(255, 77, 106, 0.72);
}

/* ─── Multi-phase sequenced animation ────────────────────────────
   Three steps tell a temporal story when the reader scrolls in:
     1) Entry row — green grows 0% → 100% (cushion fills up)
     2) -10%  row — appears fully green (matching row 1's end state),
                    then green shrinks 100% → 50% while orange grows
                    0% → 50% from the right (half the cushion drains)
     3) -20%  row — appears at row 2's end state (50% green +
                    50% orange), then orange transitions to red AND
                    expands leftward 50% → 100% as green shrinks
                    50% → 0% (liquidation completes)
   Each segment uses animation-fill-mode:both so the 0% keyframe
   state is applied during the delay (visible once the row fades
   in) and the 100% state holds after the animation finishes. */
@keyframes liq-row1-cushion {
  0%   { width: 0%; }
  100% { width: 100%; }
}
@keyframes liq-row2-cushion {
  0%   { width: 100%; }
  100% { width: 50%; }
}
@keyframes liq-row2-loss {
  0%   { width: 0%; }
  100% { width: 50%; }
}
@keyframes liq-row3-cushion {
  0%   { width: 50%; }
  40%  { width: 50%; }    /* hold while red color shift happens */
  100% { width: 0%; }
}
@keyframes liq-row3-liq {
  0%   { width: 50%; background: rgba(255, 119, 15, 0.72); }   /* orange */
  40%  { width: 50%; background: rgba(255, 77, 106, 0.72); }   /* shifted to red */
  100% { width: 100%; background: rgba(255, 77, 106, 0.72); }  /* red expanded */
}

/* Row 1 — Entry. Bar grows in over 600ms, starting just after the
   row's own fade-up so the value appears with empty bar first. */
[data-reveal].is-revealed.liq-drain .liq-drain-row:nth-child(2) .liq-drain-fill--cushion {
  animation: liq-row1-cushion 600ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both;
}
/* Row 2 — Half-drained. Bar appears full green (matching row 1's
   end state via the 0% keyframe), then reshapes to 50/50. */
[data-reveal].is-revealed.liq-drain .liq-drain-row:nth-child(3) .liq-drain-fill--cushion {
  animation: liq-row2-cushion 650ms cubic-bezier(0.65, 0, 0.35, 1) 1100ms both;
}
[data-reveal].is-revealed.liq-drain .liq-drain-row:nth-child(3) .liq-drain-fill--loss {
  animation: liq-row2-loss 650ms cubic-bezier(0.65, 0, 0.35, 1) 1100ms both;
}
/* Row 3 — Liquidated. Bar appears at row 2's end state (50 green +
   50 orange), color shifts to red, then red expands left as green
   shrinks to 0%. */
[data-reveal].is-revealed.liq-drain .liq-drain-row:nth-child(4) .liq-drain-fill--cushion {
  animation: liq-row3-cushion 900ms cubic-bezier(0.65, 0, 0.35, 1) 2000ms both;
}
[data-reveal].is-revealed.liq-drain .liq-drain-row:nth-child(4) .liq-drain-fill--liq {
  animation: liq-row3-liq 900ms cubic-bezier(0.65, 0, 0.35, 1) 2000ms both;
}

/* prefers-reduced-motion: skip the choreography, jump straight to
   the final 100% red liquidated state per row. */
@media (prefers-reduced-motion: reduce) {
  .liq-drain-fill { animation: none !important; }
  .liq-drain-row:nth-child(2) .liq-drain-fill--cushion { width: 100%; }
  .liq-drain-row:nth-child(3) .liq-drain-fill--cushion { width: 50%; }
  .liq-drain-row:nth-child(3) .liq-drain-fill--loss { width: 50%; }
  .liq-drain-row:nth-child(4) .liq-drain-fill--cushion { width: 0%; }
  .liq-drain-row:nth-child(4) .liq-drain-fill--liq { width: 100%; background: rgba(255, 77, 106, 0.72); }
}

.liq-drain-buffer{
  display:flex; flex-direction:column; gap:2px;
  text-align:right;
}
.liq-drain-amt{
  font-size:15.5px; font-weight:600; color:var(--fg-1);
  font-variant-numeric:tabular-nums;
}
.liq-drain-row--mid .liq-drain-amt{ color:#FF770F; }
.liq-drain-row--mid .liq-drain-state{ color:#FF770F; }
.liq-drain-row--final .liq-drain-amt{ color:#FF4D6A; }
.liq-drain-state{
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3);
}
.liq-drain-state--liq{ color:#FF4D6A; }

.liq-drain-foot{
  margin:10px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line-1);
  font-size:13.5px; line-height:1.55; color:var(--fg-2);
}
.liq-drain-foot strong{ color:var(--fg-1); font-weight:600; }

/* Staggered reveal — title first, then each row top-to-bottom,
   then the footer. Builds the "drain" narrative beat-by-beat. */
.liq-drain > *{
  opacity:0;
  transform:translateY(6px);
  transition:opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
             transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-revealed.liq-drain > *{
  opacity:1; transform:translateY(0);
}
/* Row fade-up delays aligned with the bar-animation sequence: each
   row fades in JUST BEFORE its bar animation starts, so the row's
   initial bar state is visible during the fade-up. */
.liq-drain > *:nth-child(1){ transition-delay:0ms;    }  /* title             */
.liq-drain > *:nth-child(2){ transition-delay:100ms;  }  /* row 1 (entry)     */
.liq-drain > *:nth-child(3){ transition-delay:950ms;  }  /* row 2 (-10%)      */
.liq-drain > *:nth-child(4){ transition-delay:1850ms; }  /* row 3 (-20%)      */
.liq-drain > *:nth-child(5){ transition-delay:3000ms; }  /* footer            */

/* ── Example callout — visually flags the assumed scenario ─────────
   Subtle green left border + slightly lifted background. The numbers
   inside are already bolded via <strong>. Eyebrow "EXAMPLE SCENARIO"
   sets the context. ──────────────────────────────────────────────── */
.kex{
  margin:24px 0;
  padding:16px 20px 18px;
  background:rgba(0, 221, 148, 0.035);
  border-left:2px solid var(--brand-green);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.kex-tag{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-green);
  margin-bottom:8px;
}
.kex p{
  margin:0; color:var(--fg-2); font-size:15.5px; line-height:1.68;
}
.kex p strong{ color:var(--fg-1); font-weight:600; }

/* ── Disclaimer link ─────────────────────────────────────────────── */
.disclaimer + .disclaimer{ margin-top:14px; }
.disclaimer-link{
  color:var(--fg-2); text-decoration:underline;
  text-decoration-color:var(--line-3); text-underline-offset:2px;
  transition:color .15s, text-decoration-color .15s;
}
.disclaimer-link:hover{
  color:var(--brand-green); text-decoration-color:var(--brand-green);
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1080px){
  .layout{ grid-template-columns:1fr; gap:0; }
  .rail{ display:none; }
  .hero-section{ padding:104px 0 48px; }
  .cta-band, .site-foot, .ktbl, .faq, .prose, .section-head .lede, [data-reveal]{ max-width:100%; }
}
@media (max-width: 780px){
  body{ font-size:16px; }
  /* Drop the entire topbar on mobile — the hero lockup carries the
     brand identifier and there's no nav to display (tnav + CTA are
     already hidden, leaving just the Kalshi mark, which the hero
     duplicates). Killing the topbar removes the 104px black space
     it reserved above the coil. */
  .topbar{ display:none; }
  /* Hero padding override — the previous 1080px rule reserved 104px
     of top space to clear the fixed topbar. With the topbar gone on
     mobile, drop top padding to 0 so the coil sits flush at the page
     top with no residual black space. */
  .hero-section{ padding:0 0 48px; }
  /* Desktop pulls the lockup -32px up into the coil; on mobile the coil
     is proportionally larger (120vw) so that overlap reads as cramped.
     Positive margin gives the lockup clear air below the art. */
  .hero-center{ margin-top:16px; }
  /* Liquidation drain visual on mobile — desktop's 110px side columns
     + 18px gap left ~30px for the bar on a 375px viewport. Shrink
     container padding, side columns, and gap so the bar gets real
     estate (~130px on iPhone widths). State labels also shrink to
     keep "LIQUIDATED" on a single line in the narrower buffer col. */
  .liq-drain{ padding:18px 16px; }
  .liq-drain-row{ grid-template-columns:70px 1fr 82px; gap:12px; }
  .liq-drain-tag, .liq-drain-state{ font-size:9.5px; letter-spacing:.08em; }
  .liq-drain-px, .liq-drain-amt{ font-size:14px; }
  .layout{ padding:0 18px; }
  .section{ padding:56px 0; }
  .cta-band{ padding:36px 24px; }
  .dir-diagram{ grid-template-columns:1fr; }
  .fund-scenarios{ grid-template-columns:1fr; }
  .lev-bar{ grid-template-columns:100px 1fr 80px; gap:10px; }
  .lev-bar-label{ font-size:10.5px; }
  .liq-axis-row{ grid-template-columns:1fr; gap:4px; }
  .liq-legend{ grid-template-columns:1fr; gap:10px; }
}
@media (max-width: 480px){
  .ktbl th, .ktbl td{ padding:11px 12px; font-size:13.5px; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}