/* ---------- Local fonts ---------- */
@font-face {
  font-family: 'ABC Diatype Mono';
  src: url('/font/ABC%20Diatype%20Mono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens (from Figma variables) ---------- */
:root {
  --green-100: #16ffb6;
  --green-12: rgba(22, 255, 182, 0.12);
  --green-8: rgba(22, 255, 182, 0.08);
  --green-5: rgba(22, 255, 182, 0.05);
  --green-0: rgba(22, 255, 182, 0);

  --red-400: #ff4888;
  --red-12: rgba(255, 72, 136, 0.12);
  --red-8: rgba(255, 72, 136, 0.08);
  --red-5: rgba(255, 72, 136, 0.05);

  --primary-500: #332ecb;
  --primary-600: #2d24ba;

  --neutral-50: #f1f1f5;
  --neutral-200: #b3b6c9;
  --neutral-300: #979aac;
  --neutral-600: #4a4c5c;
  --neutral-700: #333544;
  --neutral-750: #282b38;
  --neutral-800: #212331;
  --neutral-850: #1a1c25;
  --neutral-875: #15161e;
  --neutral-5: rgba(255, 255, 255, 0.05);

  --bg: #000103;
  --bg-elev-1: #0f1019;
  --bg-elev-2: #15161e;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);

  --space-200: 8px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Navbar block: 20px pad + 44px pill + 20px pad. The hero pulls itself up by
     this amount so it can span the full viewport with the navbar inside it. */
  --header-h: 84px;
  /* Announcement strip above the navbar: 12px pad + 30px button + 12px pad. */
  --banner-h: 54px;

  /* Single gap between sections. Applied as top padding only, so the space
     between any two is exactly this value rather than the sum of a pair. */
  --section-gap: 220px;
  /* Gap between a section's heading block and the content below it. */
  --head-gap: 60px;

  --content-w: 1200px;
  --page-w: 1440px;
  --side-pad: 120px;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'ABC Diatype Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Guard against sideways overflow from the wide stage artwork. `clip` rather
     than `hidden` on purpose: `hidden` makes this a scroll container, which
     breaks position: sticky for the banner and navbar. */
  overflow-x: clip;
}

html, body, #root {
  margin: 0;
  padding: 0;
  /* Same guard as on <html>: clip, not hidden, so sticky keeps working. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--neutral-50);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Offset anchor scrolling so target sections land below the sticky navbar. */
section[id] {
  scroll-margin-top: calc(var(--banner-h) + var(--header-h));
}

body {
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

img, svg { display: block; max-width: 100%; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

@media (max-width: 1200px) {
  :root { --side-pad: 48px; }
}
@media (max-width: 720px) {
  /* Section titles carry an explicit <br> tuned for desktop measure. At phone
     widths the first line wraps again and the break lands mid-phrase, so drop
     it and let the text find its own. .mi-title and .hiw-title are exceptions —
     since the mobile step down to 32px their first lines fit, so they keep the
     authored break. */
  .nat-title br,
  .fcta-title br {
    display: none;
  }

  :root {
    --side-pad: 16px;
    --section-gap: 72px;
    --head-gap: 32px;
    /* .site-header drops to 12px padding here */
    --header-h: 68px;
  }
}

/* ---------- Typography ---------- */
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 16px;
  /* Transparent border reserves the ring; ::after paints it. */
  border: 1.5px solid transparent;
  border-radius: 100px;
  /* Fill clipped to the padding box so the ring area stays clear for ::after. */
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(10, 10, 10, 0.15) 100%
    ) padding-box;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
}

/* Gradient stroke — white at 0% / 50% / 0% opacity, masked to the ring only
   (a border-box background layer would tint the whole pill). Tiled as two
   periods so the resting frame matches Figma and the sweep loops seamlessly. */
.eyebrow::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 25%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: eyebrow-flow 5s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes eyebrow-flow {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* Live dot — 90% white fill, 1px white stroke, breathing white bloom. Three
   stacked shadows at widening radii approximate real falloff; one shadow (or a
   spread-only ring) renders a hard edge instead. */
.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #fff;
  animation: eyebrow-dot-glow-white 2.8s ease-in-out infinite;
}

@keyframes eyebrow-dot-glow-white {
  0%, 100% {
    box-shadow:
      0 0 3px rgba(255, 255, 255, 0.5),
      0 0 8px rgba(255, 255, 255, 0.18),
      0 0 14px rgba(255, 255, 255, 0.07);
  }
  50% {
    box-shadow:
      0 0 4px rgba(255, 255, 255, 0.7),
      0 0 11px rgba(255, 255, 255, 0.34),
      0 0 20px rgba(255, 255, 255, 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::after,
  .eyebrow::before { animation: none; }
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.025em; }

.h-display {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.h-section {
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.h-card {
  font-size: 16px;
  font-weight: 500;
  color: var(--neutral-50);
}

.muted { color: var(--neutral-300); }

.mono { font-family: var(--font-mono); letter-spacing: -0.2px; text-transform: uppercase; font-size: 11px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  letter-spacing: -0.2px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary-500);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-600); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--neutral-50);
  border-color: var(--border-strong);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.btn-small { height: 36px; padding: 0 16px; font-size: 13px;
 letter-spacing: -0.2px; }

/* ---------- Page sections ---------- */
.section-pad { padding: 96px 0; }
.section-pad-lg { padding: 120px 0; }

/* ----------------------------------------------------------------
   Scroll-reveal animations (subtle, dependency-free)
   - Initial hidden state is gated behind `.reveal-ready` on <html>,
     which is only added before paint when motion is allowed (see
     main.tsx). Without JS or with reduced motion, content stays visible.
   - useScrollReveal() sets `data-revealed` as elements enter the viewport
     (an attribute, not a class, so React re-renders can't wipe it).
   - Direction variants: default = up, plus -left / -right / -fade / -scale.
   - Per-element stagger via the `--reveal-delay` custom property.
---------------------------------------------------------------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal='fade'] { transform: none; }
.reveal-ready [data-reveal='left'] { transform: translateX(-16px); }
.reveal-ready [data-reveal='right'] { transform: translateX(16px); }
.reveal-ready [data-reveal='scale'] { transform: scale(0.97); }

.reveal-ready [data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.banner {
  position: sticky;
  top: 0;
  /* Above .site-header-stack (50) so the navbar pins beneath it. */
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  overflow: hidden;
  /* The ramp is mirrored across a 200%-wide image, so the visible window shows
     exactly the #000103 -> #212121 ramp while a full-period shift returns an
     identical frame — flows right-to-left with no seam. */
  background-image: linear-gradient(90deg, #000103 0%, #212121 50%, #000103 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: banner-flow 12s linear infinite;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes banner-flow {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

.banner-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
}

.banner-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 0 var(--side-pad);
}

/* Dot + copy travel together at 6px; the 16px row gap applies only before
   the button (438:9319). */
.banner-lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* White dot, matching the hero pill: 90% white fill, 1px white stroke, white
   bloom (keyframes live with .eyebrow in index.css). */
.banner-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #fff;
  animation: eyebrow-dot-glow-white 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .banner-dot { animation: none; }
}

.banner-text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: #fff;
  text-align: center;
}

.banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 6px 16px;
  border-radius: 36px;
  background: var(--primary-500);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.1227px;
  color: #fff;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.banner-cta:hover { filter: brightness(1.12); }
.banner-cta img { flex: 0 0 auto; width: 14px; height: 14px; }

@media (max-width: 720px) {
  .banner-row { gap: 10px; }
  .banner-text { font-size: 12px; line-height: 18px; text-align: left; }
}
/* ---------- Sticky navbar wrapper ---------- */
.site-header-stack {
  position: sticky;
  /* Pins below the announcement strip, which stays fixed above it. */
  top: var(--banner-h);
  z-index: 50;
}

/* Reveal the whole header from the top on load (smooth, once).
   Uses fill-mode `backwards` (not `both`): the transform is NOT retained
   after the animation ends, so it doesn't create a lingering compositing
   group that would break the nav pills' backdrop-filter. */
@media (prefers-reduced-motion: no-preference) {
  .site-header-stack {
    animation: header-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}
@keyframes header-drop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Main navbar ---------- */
/* Container is transparent; only the individual pills carry the
   glass/blur per Figma 3296:76676. */
.site-header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

/* Reusable pill — translucent glass block, 44h, fully rounded (438:9247) */
.nav-pill {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  background: var(--neutral-5);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.2px;
  border: 0;
  cursor: pointer;
}
.nav-pill a { color: #fff; }

/* Logo pill */
.nav-pill-logo {
  width: auto;
  padding: 0 20px;
}
.brand-img {
  /* 18 -> 22px tall, width scaled to hold the 63:18 aspect */
  width: 77px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Nav + socials pills (437:7352) — 4px apart, pushed to the right so they sit
   beside the language picker rather than centred in the bar. */
.nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-pill-links {
  display: flex;
  gap: 40px;
}
.nav-pill-links a {
  text-decoration: none;
  white-space: nowrap;
}
.nav-pill-links a:hover { opacity: 0.85; }

.nav-pill-social {
  display: flex;
  gap: 40px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.social-icon-x { width: 16px; height: 16px; }
.social-icon-x svg { width: 16px; height: 16px; }
.social-icon-discord { width: 18px; height: 18px; }
.social-icon-discord svg { width: 18px; height: 18px; }
.social-icon:hover { opacity: 0.85; }

/* Right actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 40px from the nav/socials pair to the language picker (437:7385) */
  margin-left: 40px;
}

.nav-pill-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Language dropdown ---------- */
.lang-picker {
  position: relative;
}
.nav-pill-lang svg {
  transition: transform 0.15s ease;
}
.nav-pill-lang.is-open svg {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(20, 20, 24, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 60;
}
.lang-menu li { margin: 0; }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.2px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lang-option:hover { background: rgba(255, 255, 255, 0.1); }
.lang-option.is-active { background: rgba(51, 46, 203, 0.4); }
.lang-option-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.2px;
  opacity: 0.6;
}

/* ---------- Mobile language switcher (inside the mobile menu) ---------- */
.mobile-lang {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.mobile-lang-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.6);
}
.mobile-lang-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mobile-lang-option {
  height: 36px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.2px;
  cursor: pointer;
}
.mobile-lang-option.is-active {
  background: rgba(51, 46, 203, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
}


/* ---------- Mobile hamburger / close toggle (hidden on desktop) ---------- */
.menu-toggle {
  display: none;
  /* Matches .nav-pill so the row lines up. */
  height: 44px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 0;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
}

/* ---------- Mobile-menu backdrop (Figma 3490:28377):
   #000000 at 8% fill + 24px backdrop-blur. ---------- */
/* Invisible: it only exists to catch taps outside the menu. */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}

/* ---------- Mobile menu panel ---------- */
.mobile-menu-wrap {
  display: none;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 50px;
  padding: 20px 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  border-radius: 8px;
  overflow: hidden;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.mobile-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: #fff;
  text-decoration: none;
  border: 0;
  transition: opacity 0.15s ease;
}
.mobile-menu-links a:hover { opacity: 0.8; }
.mobile-menu-links a svg { width: 18px; height: 18px; color: #fff; }

.mobile-menu-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.mobile-menu-socials {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  height: 40px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
}
.mobile-menu-socials .social-icon {
  width: 20px;
  height: 20px;
}
.mobile-menu-socials .social-icon svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  /* Nav islands collapse into the mobile menu; the language picker takes over
     the right edge. */
  .nav-group { display: none; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 720px) {
  .site-header { padding: 12px 0; position: relative; }
  /* Mobile nav (Figma 3635:20195): logo pill on the left; EN pill +
     hamburger pill grouped on the right. The CTA is hidden. */
  .header-row { gap: 8px; }
  .nav-pill-logo { margin-right: auto; }
  .header-actions { display: flex; }
  .menu-toggle { display: inline-flex; }
  /* Menu panel overlays as absolute so it doesn't grow the sticky header and
     push page content down. It stays mounted and fades, so it can animate out
     as well as in — conditional rendering can only animate the entrance. */
  .mobile-menu-wrap {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    pointer-events: none;
  }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    visibility: hidden;
    transition:
      opacity 0.26s ease,
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.34s;
  }
  .site-header.menu-open .mobile-menu-wrap { pointer-events: auto; }
  .site-header.menu-open .mobile-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity 0.26s ease,
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu { transition: opacity 0.15s ease; transform: none; }
  }
}
/* ----------------------------------------------------------------
   Waitlist popup — matches Figma 4449:4200
   Full-screen blurred overlay + centered #15161e card. The site header
   navbar sits above the overlay (higher z-index) so it
   stays sharp and on top, per the design.
---------------------------------------------------------------- */

/* Backdrop (4449:4143) — gradient + 15px blur over the page content.
   z-index sits BELOW the sticky header (z 50) so the nav stays on top. */
.wl-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  /* `margin: auto` on the modal (below) centers it AND lets it scroll without
     clipping the top when it's taller than the viewport (the classic flexbox
     centered-modal cut-off fix). */
  overflow-y: auto;
  padding: 24px;
  background: linear-gradient(
    to bottom,
    rgba(17, 18, 22, 0.8),
    rgba(20, 20, 26, 0.8)
  );
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  animation: wl-fade 0.2s ease-out; /* quick fade-in when the popup mounts */
}

/* Card (4449:4144) — #15161e, 400 wide, 20 padding, 12 radius, 20px blur */
.wl-modal {
  position: relative;
  z-index: 48;
  margin: auto;
  width: 400px;
  max-width: 100%;
  min-height: 438px;
  padding: 20px;
  border-radius: 12px;
  background: var(--neutral-875);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: wl-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Decorative ellipse glow (3296:76657) — 554px, centered, clipped by the card */
.wl-glow {
  position: absolute;
  left: 50%;
  top: calc(50% - 89px);
  width: 554px;
  height: 554px;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* Close button (4449:4147) — #212331 pill, mono uppercase */
.wl-close {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--neutral-800);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  transition: background 0.15s ease;
}
.wl-close:hover { background: #2a2d3e; }

/* Content group (4449:4151) — centered, 313 wide, 36px gap */
.wl-content {
  position: relative;
  z-index: 1;
  flex: 1;
  align-self: center;
  width: 313px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
}

/* Heading group (4449:4152) — gap 12, centered */
.wl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
  color: #fff;
}
.wl-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -1.6px;
}
.wl-sub {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
}

/* Form group (4449:4155) — gap 12, full width */
.wl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Email input (4449:4156) — #1a1c25, px-12 py-8, rounded-8 */
.wl-input {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  outline: 0;
  border-radius: 8px;
  background: var(--neutral-850);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
}
.wl-input::placeholder { color: var(--neutral-300); }
.wl-input:disabled { opacity: 0.7; }

/* Submit (4449:4158) — #332ecb, px-20 py-12, rounded-8, mono uppercase */
.wl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #332ecb;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wl-submit:hover { background: #2d24ba; }
.wl-submit:disabled { background: rgba(51, 46, 203, 0.6); cursor: not-allowed; }

.wl-error {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--red-400);
  text-align: center;
}

@keyframes wl-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wl-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-overlay, .wl-modal { animation: none; }
}

@media (max-width: 440px) {
  .wl-modal { min-height: 0; padding: 16px; }
  .wl-content { padding: 24px 0; }
}
/* ----------------------------------------------------------------
   Hero — matches Figma 2994:23965 (1440 × 900 frame)
   - Background fills the frame
   - Main content (eyebrow + title + subtitle + CTAs) is centered
     vertically in the top portion
   - Universities footer is anchored at y=736 inside the 900px frame
     (so its bottom sits at y=826, ~74px above the hero bottom edge)
---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Full viewport tall, with the navbar sitting inside that band: pull up by
     the navbar's height, then pad it back so content clears it. dvh (not vh)
     because mobile reports vh against the expanded viewport and would overflow
     by the height of the retracting URL bar. */
  margin-top: calc(-1 * var(--header-h));
  height: calc(100dvh - var(--banner-h) + 30px);
  padding-top: var(--header-h);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Background — Figma 600:8272: a single image at 60% opacity. No blur pass and
   no veil over it; the artwork already fades to black at its own edges. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.6;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 20px;
  /* 52 = the trusted block's 20px offset lifted 12px, then 20px more; +20 to
     match the breathing room added at the top. */
  padding-bottom: 72px;
}

/* ----------------------------------------------------------------
   Main body — Figma 415:33086
   Vertical stack: beta pill / copy (title + sub) / CTA, gap 30px.
---------------------------------------------------------------- */
.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 30px;
  /* Nudged off the optical centre; a margin here would be halved by the
     centring, so shift the painted position directly. */
  transform: translateY(-12px);
}

/* --- Copy block (415:33091) --- */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 82px;
  line-height: 93px;
  letter-spacing: -3.7479px;
  color: #fff;
  white-space: nowrap;
}

.hero-sub {
  width: 272px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: #cfcfcf;
}
/* The explicit break is for the phone measure only; desktop wraps inside its
   own 272px. Hidden rather than removed, and the space after <br> in the JSX
   is what keeps the two halves separated when it collapses. */
.hero-sub br { display: none; }

/* --- CTA (415:33097) --- */
.hero-cta {
  display: flex;
  align-items: flex-start;
  /* Trims .hero-main's 30px stack gap down to 26px below the subline,
     without touching the pill -> heading gap that same value controls. */
  margin-top: -4px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 3px 3px 3px 32px;
  border: 0;
  border-radius: 34px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #000;
  cursor: pointer;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

.hero-btn-primary {
  background-image: linear-gradient(90deg, #fff 0%, #d3d2ff 100%);
}
/* brightness() lifts a dark fill but clips a near-white one, so hover dims. */
.hero-btn-primary:hover { filter: brightness(0.94); }

/* Solid-white disc holding the arrow (604:9557). 40px square inside the
   button's 3px inset is what makes the button 46px tall — no height is set on
   .hero-btn itself, so the two can't drift apart. */
.hero-btn-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 100px;
  background: #fff;
  /* Clips the arrow as it leaves and re-enters on hover. */
  overflow: hidden;
}

/* On hover the arrow flies off the right edge and the next one arrives from
   the left, so the mark reads as moving forward rather than nudging. 30px
   clears the 40px disc, so the turnaround happens out of sight.

   Each half carries its own easing rather than one curve spanning both: the
   arrow accelerates as it leaves and decelerates as it lands. A single ease
   over the whole thing straddles the jump at the midpoint, which is what makes
   the exit and the entry read at mismatched speeds. */
@keyframes hero-btn-arrow {
  0% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  49.99% { transform: translateX(30px); }
  50% {
    transform: translateX(-30px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  100% { transform: translateX(0); }
}

.hero-btn:hover .hero-btn-icon {
  animation: hero-btn-arrow 0.35s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn:hover .hero-btn-icon { animation: none; }
}

.hero-btn-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Universities footer — Figma 415:33662 */
.hero-trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 400px;
}

.hero-trusted-label {
  /* Scaled with the type (145 x 13/12) so it still breaks after "And". */
  width: 157px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: -0.2px;
  color: #fff;
  text-transform: capitalize;
  text-align: center;
}

.hero-trusted-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  height: 26px;
}

.hero-trusted-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* The 72px title is set nowrap per Figma; step it down before it can collide
   with the page gutters on narrower viewports. */
@media (max-width: 900px) {
  .hero-title { font-size: 56px; line-height: 64px; letter-spacing: -0.045em; }
}

@media (max-width: 780px) {
  .hero-title { font-size: 44px; line-height: 52px; letter-spacing: -0.042em; }
}

@media (max-width: 720px) {
  /* Sized to its content, not the viewport: the copy needs ~340px, so a
     full-height hero just leaves 300px of dead space wherever the alignment
     puts it. */
  .hero { height: auto; min-height: 0; padding: var(--header-h) 0 30px; }
  .hero-inner {
    /* Clears the header before the eyebrow starts. */
    padding-top: 100px;
    padding-bottom: 40px;
    justify-content: flex-start;
    /* Separates the copy block from the universities row. */
    gap: 100px;
  }
  .hero-main { flex: 0 0 auto; gap: 24px; transform: none; }
  .hero-title {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    white-space: normal;
  }
  .eyebrow { font-size: 14px;
 letter-spacing: -0.2px; }
  .hero-sub { width: auto; max-width: 320px; font-size: 14px;
 letter-spacing: -0.2px; }
  .hero-sub br { display: inline; }
  .hero-trusted { width: 100%; gap: 20px; }
  .hero-trusted-logos { width: 100%; max-width: 320px; }
  .hero-trusted-logo { height: 22px; }
}

/* ---------------------------------------------------------------
   Video card — Figma 443:10201. Anchored bottom-right of the hero and
   slid in/out with the hero's own visibility (see Hero.tsx).
--------------------------------------------------------------- */
.hero-video {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  width: 340px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-5);
  border-radius: 16px;
  background: #141518;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  overflow: hidden;
  /* Parked off the right edge; .hero clips it so nothing spills. */
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  /* Long expo-out ease: most of the travel happens early, then it settles
     slowly, which reads far smoother than a shorter curve. */
  transition:
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s ease;
  will-change: transform;
}
.hero-video.is-in {
  transform: translateX(0);
  opacity: 1;
}

.hero-video-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}
.hero-video-title {
  color: var(--neutral-50);
  letter-spacing: -0.3px;
}
.hero-video-cta {
  color: #7c7c7c;
  letter-spacing: -0.2px;
  transition: color 0.15s ease;
}
.hero-video-head:hover .hero-video-cta { color: var(--neutral-50); }

.hero-video-frame {
  position: relative;
  /* Match the video's own ratio instead of a fixed height, so the player
     fills the box exactly rather than letterboxing inside it. */
  aspect-ratio: 16 / 9;
  /* 0 12px 12px inside the card; the header carries its own 12px. */
  margin: 0 12px 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.hero-video-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.24));
  cursor: pointer;
}

.hero-video-preview > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(51, 46, 203, 0.92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.hero-video-preview > span::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

.hero-video-preview:hover > span { transform: scale(1.08); background: #4f49ec; }
.hero-video-head:focus-visible,
.hero-video-preview:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Full-page player, matching the interaction used by the main if.market app. */
.hero-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}

.hero-video-modal {
  width: min(860px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--neutral-5);
  border-radius: 12px;
  background: #141518;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.hero-video-modal-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--neutral-5);
}

.hero-video-modal-head h2 {
  margin: 0;
  color: var(--neutral-50);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.2px;
}

.hero-video-modal-head button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a7a8ad;
  font: 400 20px/1 var(--font-sans);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.hero-video-modal-head button:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.hero-video-modal-head button:focus-visible { outline: 1px solid var(--primary-500); }

.hero-video-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.hero-video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: opacity 0.2s ease; transform: none; }
  .hero-video.is-in { transform: none; }
}

/* No room for it alongside the hero copy on small screens. */
@media (max-width: 1100px) {
  .hero-video { display: none; }
}
.hiw { padding: var(--section-gap) 0 0; }

.hiw-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
  margin: 0 0 var(--head-gap);
}
/* Figma 2994:23981 — 36px / line-height 42px / letter-spacing -1.6px */
.hiw-title {
  font-weight: 350;
  margin-top: 18px;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.0388em;
}

.hiw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.universe-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-wrap {
  position: relative;
  background: #0e0e0e;
  border-radius: var(--radius-md);
  aspect-ratio: 546 / 313;
  overflow: hidden;
}

.chart-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.universe-card:hover .chart-img { transform: scale(1.04); }

.universe-text { display: flex; flex-direction: column; gap: 6px; }
/* Figma 2994:24003 — card heading: Inter 400 / 18px / lh 24px / -0.6px / white */
.universe-text .h-card {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.6px;
  color: #fff;
}
/* Figma 2994:24004 — card body: Inter 400 / 14px / lh 20px / -0.4px / #5f5f5f */
.universe-text .muted {
  margin: 0;
  max-width: 480px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #7c7c7c;
}

/* Badges overlayed on the right of the resolved chart */
.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.badge-green { background: var(--green-12); color: var(--green-100); }
.badge-red { background: var(--red-12); color: var(--red-400); }
.badge-tr { top: 60px; right: 16px; }
.badge-br { bottom: 64px; right: 16px; }

.badge-asset {
  background: var(--neutral-850);
  border: 1px solid var(--border);
  color: var(--neutral-50);
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: none;
  letter-spacing: -0.2px;
  padding: 4px 10px 4px 6px;
}
.badge-asset-tr { top: 88px; right: 16px; }
.brent-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6b78ff 0%, #3d3acb 100%);
  display: inline-block;
}
.badge-asset-price { color: var(--neutral-200); margin-left: 4px; }

@media (max-width: 900px) {
  .hiw-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* No mobile step-down existed here, so this was still rendering at the 38px
     desktop size while every sibling header dropped. Matched to them. */
  .hiw-title { font-size: 32px; line-height: 38px; }
  .hiw-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto var(--head-gap);
    max-width: none;
  }
  .chart-wrap { aspect-ratio: 380 / 220; }
  .universe-text .muted { font-size: 13px;
 letter-spacing: -0.2px; }
}
.mi {
  padding: var(--section-gap) 0 0;
  text-align: center;
}

.mi-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.mi-title {
  font-weight: 350;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.0388em;
}

/* ---------- Stage (Figma 438:8763, 1708x667) ----------
   The graphic is authored 1708px wide and is CLIPPED to the content column,
   not scaled into it — that's what keeps the 440px card at its true size while
   the chips spread out past both edges. Everything inside uses literal Figma
   coordinates. */
.mi-stage {
  position: relative;
  margin: var(--head-gap) auto 0;
  width: 100%;
  max-width: var(--content-w);
  height: 667px;
  overflow: hidden;
}

/* Widen the visible window where there's room, so less of the arc is cut. */
@media (min-width: 1201px) {
  .mi-stage {
    max-width: none;
    width: calc(100% + 2 * var(--side-pad));
    margin-left: calc(-1 * var(--side-pad));
    margin-right: calc(-1 * var(--side-pad));
  }
}

.mi-stage-inner {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1708px;
  height: 667px;
}

/* Clip box at Figma's offset; the square arc overflows it by design. */
.mi-arc-clip {
  position: absolute;
  left: 311px;
  top: 49px;
  width: 1086px;
  height: 618px;
  overflow: hidden;
  pointer-events: none;
}

/* Drawn as a mask rather than an <img> so a gradient can travel through the
   dashes: each lines-N.svg is stroke-only on transparency, so its alpha is
   exactly the dashes and the SVG's own fade is preserved. Two mirrored periods
   across a 200%-wide image, so shifting one period loops with no seam. One
   file per ring, because a single mask can only fade as one piece. */
.mi-arc {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.6) 25%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.6) 75%,
    rgba(255, 255, 255, 0.16) 100%
  );
  background-size: 200% 100%;
  /* Two cycles: the gradient travels through the dashes at one rate while the
     ring breathes out and back at another. Each ring sets its own mask and its
     own breathe timing below. */
  animation:
    mi-arc-sweep 22s linear infinite,
    mi-arc-breathe var(--breathe) ease-in-out var(--breathe-delay) infinite;
}

/* Periods are mutually indivisible and the delays are negative, so the three
   start mid-cycle already out of phase — no synchronised pulse on load, and
   the set never returns to the same combined frame. */
.mi-arc--1 {
  -webkit-mask: url('/market/impact/lines-1.svg') center / contain no-repeat;
  mask: url('/market/impact/lines-1.svg') center / contain no-repeat;
  --breathe: 4s;
  --breathe-delay: -0.35s;
}
.mi-arc--2 {
  -webkit-mask: url('/market/impact/lines-2.svg') center / contain no-repeat;
  mask: url('/market/impact/lines-2.svg') center / contain no-repeat;
  --breathe: 5.5s;
  --breathe-delay: -2.5s;
}
.mi-arc--3 {
  -webkit-mask: url('/market/impact/lines-3.svg') center / contain no-repeat;
  mask: url('/market/impact/lines-3.svg') center / contain no-repeat;
  --breathe: 6.5s;
  --breathe-delay: -4.5s;
}

@keyframes mi-arc-sweep {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

@keyframes mi-arc-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-arc { animation: none; }
}

/* Without mask support this would paint as a plain gradient block. */
@supports not ((-webkit-mask-image: url('#x')) or (mask-image: url('#x'))) {
  .mi-arc { display: none; }
}

/* ---------- Asset chips (293:26769 / 26793 / 26821 / 26865 / 26878 / 26900)
   One component family: 12px/18px label, 4px 8px 4px 4px, fully rounded. Only
   the tint and the mark's geometry differ per asset. */
.mi-chip {
  position: absolute;
  transform: translate3d(var(--chip-dx, 0px), var(--chip-dy, 0px), 0);
  will-change: transform;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px 4px 4px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  background: #262626;
  color: #b4b4b4;
}
/* Stroke in the chip's own text colour, pulsing in and out on a loop.
   currentColor picks up each chip's tint with no per-asset rule, and a
   pseudo-element ring rather than a border keeps it out of the box model —
   the chips sit at exact Figma stage coordinates, so 1px of added width would
   shift them. .mi-chip has no border of its own, so inset:0 is already the
   border box. */
.mi-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: mi-chip-ring 6s ease-in-out var(--ring-delay, 0s) infinite;
}

/* Lit for the first half of the cycle, dark for the second, so each chip
   pulses and rests instead of throbbing continuously. */
@keyframes mi-chip-ring {
  0%, 50%, 100% { opacity: 0; }
  25% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-chip::after { animation: none; }
}

.mi-chip-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
  max-width: none;
}
.mi-chip-icon--round { width: 18px; height: 18px; border-radius: 50%; }

.mi-chip--btc { background: #362818; color: #f7931a; }
.mi-chip--gold { background: #35290d; color: #f6d13a; gap: 4px; }
.mi-chip--sol { background: #121f40; color: #5a87ff; }
.mi-chip--msft { background: #0c273c; color: #7dc5ff; }

/* Narrower marks are centred in their designed slot via symmetric margins:
   ETH 8.607 in an 18px slot, MSFT 11 in a 20px slot. */
.mi-chip--eth .mi-chip-icon { width: 8.607px; height: 14px; margin: 0 4.697px; }
.mi-chip--msft .mi-chip-icon { width: 11px; height: 11px; margin: 0 4.5px; }

/* ---------- Trade box (438:7537) ---------- */
/* The three steps of the trade widget share one slot in the stage, so swapping
   between them doesn't move anything else. */
.mi-slot {
  position: absolute;
  left: 50%;
  /* The step header + toggle stack above the card, so the slot starts high and
     the card still lands level with the chip columns either side of it. */
  top: 8px;
  transform: translateX(-50%);
  width: 460px;
}

.mi-flow {
  display: grid;
  align-items: start;
}

/* Stacked in one grid cell; only the active step is visible and clickable. */
.mi-step {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  opacity: 0;
  transform: translateX(48px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.55s;
}
/* Toggle + card sit tighter together than they do under the step header. */
.mi-step-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mi-step.is-past { transform: translateX(-48px); }
.mi-step.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s ease 0.12s,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .mi-step, .mi-step.is-active { transition: opacity 0.2s ease; transform: none; }
}

.mi-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: 16px;
  /* Flat fill, gradient STROKE (#21242d -> #101114 at zero alpha). The opaque
     padding-box layer sits over the border-box one, so the gradient shows only
     in the 1px ring. */
  background:
    linear-gradient(#141518, #141518) padding-box,
    linear-gradient(180deg, #21242d 0%, rgba(16, 17, 20, 0) 100%) border-box;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 400;
}

.mi-card-head {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
}
.mi-card-logo {
  flex: 0 0 60px;
  width: 60px;
  align-self: stretch;
  border-radius: 8px;
  object-fit: cover;
}
.mi-card-headmain {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mi-card-title {
  margin: 0;
  max-width: 100%;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--neutral-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Asset selector pill-group */
.mi-assets {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 4px;
  border: 1.4px solid #21242d;
  border-radius: 100px;
}
.mi-asset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
  white-space: nowrap;
  cursor: pointer;
  /* Transition covers the selected state toggling on click; there is
     deliberately no :hover state on these pills. */
  transition: background 0.18s ease, color 0.18s ease;
}
/* Clicking a pill shouldn't leave the UA focus ring sitting on the card, but
   keyboard users still need one — so only the mouse case is suppressed. */
.mi-asset:focus:not(:focus-visible) { outline: none; }
.mi-asset.is-active {
  background: var(--asset-tint, #362818);
  color: var(--asset-fg, #f7931a);
}

/* Marks are different shapes, so each gets its own box inside the 16px slot. */
.mi-asset-mark { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; }
/* Unselected marks drop their brand colour and read in the label's grey.
   grayscale (rather than masking to currentColor) keeps each glyph's internal
   detail — BTC's badge would otherwise flatten into a solid disc. */
.mi-asset:not(.is-active) .mi-asset-mark {
  filter: grayscale(1) brightness(0.92);
  opacity: 0.8;
  transition: filter 0.18s ease, opacity 0.18s ease;
}
.mi-asset-mark--eth { width: 8.607px; height: 14px; margin: 0 4.697px; }
.mi-asset-mark--sol { width: 18px; height: 18px; border-radius: 50%; }

/* ---------- Inner panel ---------- */
.mi-card-body { padding: 0 12px 12px; }
.mi-panel {
  border-radius: 8px;
  background: #181a1f;
  overflow: hidden;
}

.mi-cand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #21242d;
}
.mi-cand-photo {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.mi-cand-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  flex: 1;
  min-width: 0;
}
.mi-cand-name {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--neutral-50);
}
.mi-cand-pct {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
}

/* ---------- Outcome rows ---------- */
.mi-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 12px;
}
.mi-out-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
  white-space: nowrap;
}
.mi-out-icon { display: inline-flex; flex: 0 0 auto; }
/* The "no" row's mark sits in a filled 24px puck (438:7613). */
.mi-out-icon--boxed {
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 120px;
  background: var(--asset-tint, #362818);
}
.mi-out-icon img { object-fit: contain; }

.mi-out-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mi-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mi-meter-pct {
  font-size: 10px;
  line-height: 16px;
  letter-spacing: -0.2px;
}
.mi-meter-track {
  position: relative;
  display: block;
  width: 60px;
  height: 2px;
  border-radius: 100px;
  background: #21242d;
}
.mi-meter-fill {
  position: absolute;
  top: 0;
  width: 13px; /* overridden inline — the bar scales with the move */
  height: 2px;
}
/* Centre gauge mark — the reference point the fill reads against. */
.mi-meter-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 16px;
  border-radius: 1px;
  background: var(--neutral-50);
}

.mi-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  height: 30px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.mi-out--yes .mi-quote { color: var(--green-100); }
.mi-out--yes .mi-meter-fill { background: var(--green-100); }
.mi-out--yes .mi-quote { background: var(--green-12); }

.mi-out--no .mi-quote { color: var(--red-400); }

/* Direction of the move, independent of the outcome it belongs to. */
.mi-meter-pct--up { color: var(--green-100); }
.mi-meter-pct--down { color: var(--red-400); }
.mi-out--no .mi-meter-fill { background: var(--red-400); }
.mi-out--no .mi-quote { background: var(--red-12); }

/* ---------- Footer meta ---------- */
.mi-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 12px;
}
.mi-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
  white-space: nowrap;
}
.mi-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- Caption ---------- */
.mi-caption {
  margin: 40px auto 0;
  width: 610px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.6px;
  text-align: center;
}
.mi-caption-muted { color: #7c7c7c; }
.mi-caption-strong { color: #fff; }

/* The chips flank the card, so they need room beside a 460px card. Once the
   stage window is narrower than the pair of columns they'd only show clipped
   halves — drop them and let the card stand alone, as on mobile. */
@media (max-width: 1080px) {
  .mi-chip { display: none; }
}

@media (max-width: 720px) {
  .mi-title { font-size: 32px; line-height: 38px; letter-spacing: -1.4px; }
  /* The stage is far too wide to read on a phone; drop the scattered chips
     and let the card stand on its own. */
  .mi-stage {
    height: auto;
    overflow: visible;
  }
  .mi-stage-inner {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }
  .mi-arc-clip, .mi-chip { display: none; }
  .mi-slot {
    position: static;
    transform: none;
    width: 100%;
  }
  .mi-caption {
    margin-top: 24px;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.2px;
  }
}
/* =================================================================
   Shared trade flow — the market card (impact + prediction), the
   trade builder and the settled panel, rendered by MarketImpact.
   Class prefixes are historical: tb- = builder, ts- = settled,
   htt- = the pieces that started life in the How-to-trade section
   before it was folded in.
   ================================================================= */

/* ---- Step header pill: "01  Pick your asset" (6128:4406) ---- */
.htt-shead {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 12px;
  width: 260px;
  padding: 12px;
  background: #0e0e0e;
  border-radius: 56px;
}
.htt-snum {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: #171717;
  border-radius: 100px;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.3px;
  color: #fff;
}
/* Linear gradient stroke — same as the .eyebrow pill (dark edges, translucent
   gray highlight in the middle). */
.htt-snum::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 10, 1) 0%,
    rgba(136, 136, 136, 0.25) 42%,
    rgba(10, 10, 10, 1) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.htt-sname {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.6px;
  color: #fff;
  white-space: nowrap;
}

/* =================================================================
   Step 02 — Trade builder (Figma 444:13709)
   ================================================================= */
.tb-popup {
  width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #141518;
  border-radius: 8px;
  overflow: hidden;
  /* The .mi section centres its text; the popup reads as a panel, so its copy
     stays left-aligned like the rest of the trade cards. */
  text-align: left;
}

/* ---- Head: Long/Short over the selected market ---- */
.tb-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #21242d;
}

.tb-ls {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px;
  background: #141518;
  border: 1px solid #21242d;
  border-radius: 88px;
}
.tb-ls-btn {
  flex: 1 0 0;
  min-width: 0;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tb-ls-btn.is-active { background: var(--primary-500); color: #fff; }
.tb-ls-btn:disabled { cursor: not-allowed; }

.tb-market {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tb-market-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--neutral-850);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tb-market-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tb-market-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}
.tb-market-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-market-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.2px;
}
.tb-market-ticker { color: #f7931a; }
/* Prediction markets name an outcome here, not an asset, so the slot takes the
   Yes/No pair used across the cards rather than the BTC tint. */
.tb-market-ticker--yes { color: var(--green-100); }
.tb-market-ticker--no { color: var(--red-400); }
.tb-market-side { color: #fff; }
.tb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #767a8b;
}

.tb-body { display: flex; flex-direction: column; }

/* ---- Qty + slider ---- */
.tb-order-group {
  margin: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.tb-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #181a1f;
}
.tb-qty-input {
  min-width: 0;
  flex: 1;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
}
.tb-qty-input:disabled { cursor: not-allowed; }
.tb-qty-label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
}

.tb-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #181a1f;
  border-top: 1px solid #21242d;
}

/* Range input styled to the Figma track (6px) + round thumb (16px). */
.tb-slider {
  flex: 1;
  min-width: 0;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tb-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    var(--neutral-600) 0 var(--tb-fill, 0%),
    #21242d var(--tb-fill, 0%) 100%
  );
}
.tb-slider::-moz-range-track { height: 6px; border-radius: 10px; background: #21242d; }
.tb-slider::-moz-range-progress { height: 6px; border-radius: 10px; background: var(--neutral-600); }
.tb-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--neutral-50);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.tb-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--neutral-50);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.tb-slider:disabled { cursor: not-allowed; }

.tb-pct {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #21242d;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
}

/* ---- Trade analysis ---- */
.tb-analysis {
  margin: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 2px solid rgba(20, 21, 24, 0);
  border-radius: 6px;
  background: linear-gradient(180deg, #181a1f 0%, #17191d 100%);
}
.tb-analysis-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #fff;
}
.tb-analysis-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1.4px dashed rgba(118, 122, 139, 0.3);
}
.tb-arow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
}
.tb-arow-k { color: #767a8b; text-decoration: underline; }
.tb-arow-v { color: #fff; }
.tb-arow-green { color: var(--green-100); }

.tb-payout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tb-payout-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
}
.tb-payout-label { color: #fff; text-transform: capitalize; }
.tb-payout-date { color: #767a8b; }
.tb-payout-value {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: var(--green-100);
  white-space: nowrap;
}

/* ---- Footer ---- */
.tb-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #141518;
  border-top: 1px solid #21242d;
}
.tb-place {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary-500);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.tb-place:hover:not(:disabled) { filter: brightness(1.12); }
.tb-place:disabled { opacity: 0.55; cursor: not-allowed; }

/* =================================================================
   Step 03 — Settlement (Figma 445:14141)
   ================================================================= */
.ts-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}

.ts-shell {
  width: 100%;
  padding: 12px;
  background: #141518;
  border-radius: 8px 8px 0 0;
}

/* Tinted by outcome: green when Yes settles, red when No. */
.ts-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #21242d;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(22, 255, 182, 0.075) 0%, rgba(22, 255, 182, 0.005) 100%),
    #17191d;
}
.ts-popup.is-no .ts-card {
  background:
    linear-gradient(180deg, rgba(255, 72, 136, 0.075) 0%, rgba(255, 72, 136, 0.005) 100%),
    #17191d;
}

/* ---- Resolved banner ---- */
.ts-resolved {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid #21242d;
}

/* Notches straddle the seam between the two halves. */
.ts-resolved::before,
.ts-resolved::after {
  content: '';
  position: absolute;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #141518;
  pointer-events: none;
}
.ts-resolved::before { left: -10px; }
.ts-resolved::after { right: -10px; }

.ts-resolved-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
}
.ts-resolved-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid rgba(22, 255, 182, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(22, 255, 182, 0.1) 0%, rgba(22, 255, 182, 0.45) 100%);
  overflow: hidden;
}
.ts-popup.is-no .ts-resolved-badge {
  border-color: rgba(255, 72, 136, 0.2);
  background: linear-gradient(180deg, rgba(255, 72, 136, 0.1) 0%, rgba(255, 72, 136, 0.45) 100%);
}
.ts-resolved-badge img { width: 42px; height: 42px; object-fit: contain; display: block; }

.ts-resolved-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  gap: 4px;
}
.ts-resolved-title {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
}
.ts-resolved-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 100px;
  background: var(--green-12);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: var(--green-100);
}
.ts-popup.is-no .ts-resolved-pill { background: var(--red-12); color: var(--red-400); }

.ts-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 12px 12px;
}
.ts-headline-label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
}
.ts-headline-value {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.3px;
  color: #fff;
}

/* ---- Breakdown ---- */
.ts-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 2px solid rgba(20, 21, 24, 0);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #181a1f 0%, #17191d 100%);
}
.ts-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ts-breakdown-title {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #fff;
}

.ts-analysis-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1.4px dashed rgba(118, 122, 139, 0.3);
}
.ts-arow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
}
.ts-arow-k { color: #767a8b; }
.ts-arow-v { color: #fff; }

.ts-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
}
.ts-note-row { display: flex; align-items: center; gap: 12px; }
.ts-note-k { color: #fff; }
.ts-note-v { color: var(--green-100); }
.ts-popup.is-loss .ts-note-v { color: var(--red-400); }
.ts-note-copy { margin: 0; color: #767a8b; }

/* ---- Footer ---- */
.ts-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: #141518;
  border-top: 1px solid #21242d;
}
.ts-another {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary-500);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.ts-another:hover { filter: brightness(1.12); }

/* .mi-out is a div in MarketImpact; here each row is clickable. */
.htt-out {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.htt-out .mi-out-label,
.htt-out .mi-out-right { pointer-events: none; }

/* The quote pill is the thing the eye reads as the button, so it alone takes
   the hover, and only as a stroke — the fill stays put. The border is always
   there at zero alpha so the pill can't change size. */
.htt-out .mi-quote {
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.htt-out.mi-out--yes:hover .mi-quote,
.htt-out.mi-out--yes:focus-visible .mi-quote {
  border-color: var(--green-100);
}
.htt-out.mi-out--no:hover .mi-quote,
.htt-out.mi-out--no:focus-visible .mi-quote {
  border-color: var(--red-400);
}
.htt-out:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .htt-out, .htt-out .mi-quote { transition: none; }
}

/* Secondary action in each panel footer (445:14125). */
.tb-back,
.ts-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 6px 16px;
  border: 1px solid #21242d;
  border-radius: 8px;
  background: #181a1f;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tb-back:hover,
.ts-back:hover { background: #21242d; border-color: #2c3040; }

/* ---- Market type toggle (447:14894) ---- */
.htt-mtype {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  /* Sums with the step panel's 12px gap for 40px down to the card. */
  margin-bottom: 28px;
}
.htt-mtype-label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: var(--neutral-50);
}
.htt-mtype-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #141518;
  border: 1px solid #21242d;
  border-radius: 88px;
}
.htt-mtype-btn {
  width: 78px;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.htt-mtype-btn.is-active { background: var(--primary-500); color: #fff; }

/* ---- Prediction card (447:15012) ---- */
.htt-pred-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  border: 1px solid #21242d;
  border-radius: 16px;
  background: #141518;
  overflow: hidden;
  text-align: left;
}

.htt-pred-head {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
}
.htt-pred-logo {
  flex: 0 0 48px;
  width: 48px;
  align-self: stretch;
  border-radius: 8px;
  object-fit: cover;
}
.htt-pred-headmain {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.htt-pred-title {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--neutral-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Meta sits in the head on this variant, not in a footer. */
.htt-pred-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
}

.htt-pred-body { padding: 0 12px 12px; }
.htt-pred-scroll {
  height: 180px;
  padding: 12px;
  border-radius: 8px;
  background: #181a1f;
  overflow-y: auto;
  overflow-x: hidden;
}
.htt-pred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #21242d;
}
.htt-pred-row + .htt-pred-row { padding-top: 12px; }

.htt-pred-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.htt-pred-photo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}
.htt-pred-text { display: flex; flex-direction: column; min-width: 0; }
.htt-pred-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--neutral-50);
}
.htt-pred-chance {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  color: #767a8b;
}

.htt-pred-quotes { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.htt-pred-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 72px;
  height: 30px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.htt-pred-quote.is-yes { background: var(--green-12); color: var(--green-100); }
.htt-pred-quote.is-no { background: var(--red-12); color: var(--red-400); }
.htt-pred-quote.is-yes:hover,
.htt-pred-quote.is-yes:focus-visible { border-color: var(--green-100); }
.htt-pred-quote.is-no:hover,
.htt-pred-quote.is-no:focus-visible { border-color: var(--red-400); }
.htt-pred-quote:focus-visible { outline: none; }
/* ----------------------------------------------------------------
   Who it's for — matches Figma 2994:24219
   1112×588 board: header (1112×136) + carousel (1112×412) at gap 40
---------------------------------------------------------------- */
/* No section gap on top: the sticky viewport below is a full 100vh that centers
   its content, so it already opens with more air than the standard gap — adding
   one on top of that leaves a dead band under the previous section. */
.nat { padding: 0; }

/* Tall outer track — its height (set in JS = 100vh + horizontal overflow)
   provides the vertical scroll distance that drives the horizontal travel. */
.nat-track-outer {
  position: relative;
}

/* Pinned viewport: sticks for the duration of the track and centers the
   header + cards while the row slides horizontally. */
.nat-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--head-gap);
  padding: 80px 0;
  overflow: hidden;
}

/* ---------- Header (1112×136) ---------- */
.nat-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.nat-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 560px;
}

/* Sits opposite the heading, aligned to its last line. */
.nat-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--primary-500);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.nat-cta:hover { filter: brightness(1.12); }
.nat-cta img { flex: 0 0 auto; width: 20px; height: 20px; }

.nat-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.0388em;
  color: #fff;
  text-align: left;
}

/* ---------- Carousel ---------- */
.nat-carousel {
  display: flex;
  flex-direction: column;
  /* Cards -> scroll track. */
  gap: 20px;
}

/* Clips the horizontally-translating row to the container width. */
.nat-viewport {
  width: 100%;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nat-viewport::-webkit-scrollbar { display: none; }

.nat-row {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

/* Card (372×304 media) */
.role-card {
  flex: 0 0 372px;
  width: 372px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.role-media {
  width: 372px;
  height: 304px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--neutral-875);
}

.role-gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.role-card:hover .role-gif { transform: scale(1.05); }

.role-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Figma 2994:24237 — card title: Inter 400 / 18px / lh 24px / -0.4px / white */
.role-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #fff;
}

/* Figma 2994:24238 — card body: Inter 400 / 14px / lh 20px / -0.4px / #656565 */
.role-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #7c7c7c;
  max-width: 300px;
}

/* ---------- Scroll indicator (1112×4) ---------- */
.nat-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
.nat-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 100px;
  will-change: transform, width;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .role-card { flex-basis: 280px; width: 280px; }
  .role-media { width: 280px; height: 226px; }
}

@media (max-width: 720px) {
  .nat-sticky { padding: 56px 0; gap: 32px; }
  .nat-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.044em;
    /* The authored break is suppressed here, so the measure decides the wrap:
       narrow enough to set the sentence in three lines rather than two long
       ones. Both authored halves are the same length, so a <br> can only give
       two lines or four — three has to come from the measure. */
    max-width: 260px;
  }
}

@media (max-width: 720px) {
  /* No room side by side; stack and centre as before. */
  .nat-top { flex-direction: column; align-items: center; gap: 20px; }
  .nat-head { align-items: center; text-align: center; }
  .nat-title { text-align: center; }
}
/* ----------------------------------------------------------------
   Resources / Go Deeper — matches Figma 2994:24265
   1112-wide section. Header (gap 16) then a 2-col grid (gap 16).
---------------------------------------------------------------- */
.gd { padding: var(--section-gap) 0 0; }

.gd-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}

.gd-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.0388em;
  color: #fff;
}

/* ---------- Grid ---------- */
.gd-grid {
  margin-top: var(--head-gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gd-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* card1 is an <a> to the X post — keep it visually identical to the article */
  color: inherit;
  text-decoration: none;
}

/* ---------- Media (292h, rounded 12, image fills) ---------- */
.gd-media {
  position: relative;
  width: 100%;
  height: 292px;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0e0e;
}
.gd-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gd-card:hover .gd-media-img { transform: scale(1.04); }
.gd-media-blog .gd-media-img {
  object-fit: contain;
}

/* Bottom-left tag pill */
.gd-pill {
  position: absolute;
  left: 12px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
.gd-pill-dark { background: rgba(0, 0, 0, 0.5); }
.gd-pill-light { background: rgba(255, 255, 255, 0.1); }

.gd-pill-dot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  flex: 0 0 auto;
}

/* ---------- Body ---------- */
.gd-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gd-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gd-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #fff;
}

.gd-card-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #7c7c7c;
  max-width: 400px;
  /* single-line truncate, matching Figma */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .gd-grid { grid-template-columns: 1fr; }
  .gd-card-desc { max-width: 100%; }
}

@media (max-width: 720px) {
  .gd-head { align-items: center; text-align: center; }
  .gd-title { font-size: 32px; line-height: 38px; letter-spacing: -0.044em; }
  .gd-grid { margin-top: 32px; gap: 24px; }
  .gd-media { height: 220px; }
  .gd-card-desc { white-space: normal; }
}
/* ----------------------------------------------------------------
   FAQ — matches Figma 3296:76368
   1112-wide section. Centered header, 80px gap, then 4 rows with
   #202020 bottom borders and 32px between rows.
---------------------------------------------------------------- */
.faq { padding: var(--section-gap) 0 0; }

.faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.faq-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.0388em;
  color: #fff;
}

.faq-list {
  margin: var(--head-gap) auto 0;
  width: 100%;
  max-width: var(--content-w);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Each row: question button on top, optional answer below, 16px
   padding-bottom + 1px #202020 divider underneath. */
.faq-item {
  border-bottom: 1px solid #202020;
  padding-bottom: 16px;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #fff;
}

.faq-q-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: #fff;
}

.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.faq-item.is-open .faq-icon { transform: rotate(180deg); }

/* Collapsible answer — animate via max-height + opacity */
.faq-a-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
}
.faq-item.is-open .faq-a-wrap {
  max-height: 320px;
  opacity: 1;
  margin-top: 12px;
}

.faq-a {
  margin: 0;
  max-width: 800px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: #7c7c7c;
}

@media (max-width: 720px) {
  .faq-title { font-size: 32px; line-height: 38px; letter-spacing: -0.044em; }
  .faq-list { margin-top: 48px; gap: 24px; }
  .faq-q-text { font-size: 16px; line-height: 22px; }
}
/* ----------------------------------------------------------------
   Footer CTA — matches Figma 2994:24349
   1440×600 frame with a centered glowing spotlight background
---------------------------------------------------------------- */
.fcta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* A floor rather than a fixed height, so a longer translation grows the band
     instead of overflowing it (the Figma frame is 600; this runs 100 taller to
     give the glow more room under the content). The padding is the minimum
     breathing room in that case; align-items centres the content the rest of
     the time. It stays padding, not margin, because the veil is
     opaque black at the top edge — a margin there reads as more of the same
     band and leaves the content sitting low in it. */
  min-height: 700px;
  padding: 80px 0;
  display: flex;
  align-items: center;
}

.fcta-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(15px);
  opacity: 0.6;
  overflow: hidden;
}

/* Veil runs dark at the top and clears toward the bottom (438:9049). */
.fcta-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000103 0%, rgba(0, 1, 3, 0) 100%);
}
.fcta-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  display: block;
}

.fcta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.fcta-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: -0.0388em;
  color: #fff;
  /* Scaled with the type so the line-length budget is unchanged — the explicit
     <br /> sets the break in English, this only catches longer locales. */
  max-width: 790px;
}

/* Bottom-page beta CTA. */
.fcta-button {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  background: var(--primary-500);
  border: 0;
  border-radius: 34px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.fcta-button:hover { filter: brightness(1.12); }

/* ----- Mobile (Figma 3490:28302 — 380×561) ----- */
@media (max-width: 720px) {
  .fcta {
    min-height: 561px;
    padding: 100px 0;
  }

  /* Mobile background (Figma 3490:25860): blurred glow image at 60%
     opacity over the dark base. Scaled up so the 25px blur doesn't reveal
     transparent edges. */
  .fcta-bg { background: #04040a; }
  .fcta-bg-img {
    opacity: 0.6;
    filter: blur(25px);
    transform: scale(1.2);
    object-position: center bottom;
  }

  .fcta-inner { gap: 30px; }

  /* Same step-down as .nat-title, so the two section titles stay one size. */
  .fcta-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.044em;
    max-width: 320px;
  }

}

/* Same mark and size as the hero button's arrow. */
.fcta-button-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
/* ----------------------------------------------------------------
   Footer — matches Figma 2994:24365 (296h dark slab w/ 1112-wide grid)
---------------------------------------------------------------- */
.footer {
  background: var(--bg);
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 62px;
}

/* ---------- Top row (brand block + 3 link columns) — Figma 2994:24368
   270px brand block + 644px columns block, space-between within 1112. ---------- */
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-start;
}

.footer-brand {
  flex: 0 0 270px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Horizontal white wordmark (same asset as the header). align-self keeps the
   image from stretching to the column's cross-axis width. */
.footer-logo {
  height: 20px;
  width: 70px;
  object-fit: contain;
  align-self: flex-start;
  display: block;
}

.footer-tagline {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: #7c7c7c;
}

.footer-cols {
  flex: 0 1 644px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Column labels are sans + capitalize now, not mono uppercase (438:9073). */
.footer-col-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.2px;
  text-transform: capitalize;
  color: #fff;
}

.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: #7c7c7c;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: #fff; }

/* ---------- Bottom row (copyright + legal) — Figma 2994:24392
   Order: © 2026 | Privacy Policy | Terms of use. Mono / uppercase / #ebebeb. ---------- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-legal {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  text-transform: capitalize;
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-legal:hover { color: #fff; }

.footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-brand { flex: none; width: 100%; max-width: 320px; }
  .footer-cols {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px 80px;
  }
}
@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ----------------------------------------------------------------
   Freestyle — playable "tap trading" demo. Matches Figma 3943:9590
   (and the 9992 / 10389 / 10811 / 9148 states it flows through).
   Full-screen game: grid board + live ETH chart + tap-to-place boxes
   + 30s round + Demo Complete modal. Sizes scale off --cell (set in
   JS from the board width) so the 120px Figma grid stays proportional.
---------------------------------------------------------------- */
.fs-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #171925;
  color: #fff;
  font-family: var(--font-sans);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  --cell: 120px;
  --playhead: 25%;
  --accent: #3c3dbd;
}

/* ---------- Grid board ---------- */
.fs-grid {
  position: absolute;
  inset: 0;
  background-color: #14141f;
  background-image:
    linear-gradient(to right, rgba(40, 40, 56, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40, 40, 56, 0.45) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}
/* Dots on the grid intersections, brighter toward the centre. */
.fs-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.4px, transparent 1.6px);
  background-size: var(--cell) var(--cell);
  background-position: -0.7px -0.7px;
}
/* Vignette so edges fall off into #171925. */
.fs-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(23, 25, 37, 0.85) 100%);
}

.fs-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The "now" line where the chart meets the play area. */
.fs-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--playhead);
  width: 2px;
  transform: translateX(-1px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(120, 130, 255, 0) 0%,
    rgba(165, 175, 255, 0.85) 45%,
    rgba(165, 175, 255, 0.85) 55%,
    rgba(120, 130, 255, 0) 100%
  );
  box-shadow: 0 0 18px 2px rgba(120, 130, 255, 0.45);
}

/* ---------- Boxes ---------- */
.fs-box {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--box-size, 108px);
  height: var(--box-size, 108px);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  will-change: transform;
  background: linear-gradient(180deg, #6a78ff 0%, #3b3bbe 100%);
  border: 1.5px solid rgba(150, 158, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 22px rgba(60, 61, 189, 0.32);
  transition:
    opacity 0.45s ease,
    filter 0.45s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.fs-box .fs-box-amt {
  font-size: calc(var(--box-size, 108px) * 0.13);
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1;
}
.fs-box .fs-box-mult {
  font-size: calc(var(--box-size, 108px) * 0.105);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.2px;
  line-height: 1;
}
/* Drop-in pop when placed. */
.fs-box.fs-pop {
  animation: fs-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fs-pop {
  from { transform: var(--pos) scale(0.4); opacity: 0; }
  to { transform: var(--pos) scale(1); opacity: 1; }
}
/* Outcome states. */
.fs-box.fs-win {
  background: linear-gradient(180deg, #1fe0a0 0%, #0e9b6e 100%);
  border-color: #16ffb6;
  box-shadow: 0 0 28px rgba(22, 255, 182, 0.5);
}
.fs-box.fs-win .fs-box-mult { color: rgba(255, 255, 255, 0.9); }
.fs-box.fs-miss {
  opacity: 0.22;
  filter: grayscale(1);
  box-shadow: none;
}
/* Ghost placement hints (Place-Boxes tutorial). */
.fs-box.fs-ghost {
  background: linear-gradient(180deg, rgba(50, 50, 165, 0.14) 0%, rgba(98, 113, 255, 0.14) 100%);
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

/* ---------- Top navbar ---------- */
.fs-bar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
}
.fs-navbar { top: 0; height: 100px; }
.fs-navbar::before,
.fs-bottombar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 31, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask: linear-gradient(to bottom, #000 40%, transparent);
  mask: linear-gradient(to bottom, #000 40%, transparent);
  pointer-events: none;
}
.fs-bottombar::before {
  -webkit-mask: linear-gradient(to top, #000 40%, transparent);
  mask: linear-gradient(to top, #000 40%, transparent);
}

.fs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}
.fs-logo {
  padding: 10px 26px;
  height: 44px;
}
.fs-logo img { height: 24px; width: auto; }

.fs-accent-pill {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--accent);
  color: #fff;
}
.fs-login { padding: 10px 40px; }

/* Gameplay nav (Wallet / Menu / Logout) */
.fs-nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.fs-nav-btn {
  padding: 10px 20px;
  cursor: pointer;
}
.fs-nav-ico { width: 20px; height: 20px; }
.fs-help .fs-nav-ico { width: 24px; height: 24px; }
.fs-logout {
  padding: 10px 20px;
  background: #39232b;
  border: 1px solid rgba(255, 72, 136, 0.15);
  color: #ff4888;
}
.fs-logout .fs-nav-ico { width: 22px; height: 22px; }

/* Center Freestyle / DEMO badge */
.fs-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 166px;
  background: linear-gradient(180deg, #454ac8 0%, #222462 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.fs-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 36px;
  border-radius: 166px;
  background: linear-gradient(90deg, #1c1c57 0%, #3c3dbd 100%);
}
.fs-brand-title { font-size: 24px; letter-spacing: -1px; line-height: 1; }
.fs-brand-sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Balance (top-left, below navbar) ---------- */
.fs-balance {
  position: absolute;
  left: 30px;
  top: 120px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.fs-balance-label { font-size: 16px; letter-spacing: -0.5px; }
.fs-balance-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fs-balance-amt {
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.5px;
}
.fs-balance-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
  background: #1e342c;
  border: 1px solid #0d996d;
  color: #16ffb6;
  font-size: 18px;
  letter-spacing: -0.6px;
  white-space: nowrap;
}

/* ---------- Bottom bar ---------- */
.fs-bottombar { bottom: 0; height: 120px; }
.fs-eth {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.fs-eth img { width: 40px; height: 40px; }
.fs-eth-label { font-size: 18px; letter-spacing: -0.5px; }
.fs-eth-price {
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
/* Centered group: Follow Graph + (gameplay) stake selector. */
.fs-bottom-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fs-follow {
  padding: 12px 20px;
  cursor: pointer;
}
.fs-follow img { width: 22px; height: 22px; }
.fs-follow.fs-off { opacity: 0.55; }
.fs-skip {
  padding: 10px 20px;
  cursor: pointer;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.fs-skip .fs-arrow { width: 22px; height: 22px; }
.fs-help {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* ---------- Stake selector (gameplay) ---------- */
.fs-coin { width: 22px; height: 22px; }
.fs-stake-lead {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 55px;
  padding: 12px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.5px;
  cursor: pointer;
}
.fs-stake-open {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
.fs-stake-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  height: 55px;
  padding: 14px 16px;
  border: none;
  background: transparent;
  border-radius: 100px;
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.5px;
  cursor: pointer;
  font-family: inherit;
}
.fs-stake-chip.fs-stake-sel {
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.fs-stake-custom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  margin: 0 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.5px;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- Round pill + timer (top-center, below navbar) ---------- */
.fs-round {
  position: absolute;
  left: 50%;
  top: 116px;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 22px 6px 6px;
  border-radius: 100px;
  background: rgba(12, 12, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fs-timer {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background:
    radial-gradient(circle at center, #2a0d12 60%, transparent 61%),
    conic-gradient(#ff4262 var(--p, 100%), rgba(255, 66, 98, 0.18) 0);
}
.fs-round-label { font-size: 18px; letter-spacing: -0.4px; }

/* ---------- Tutorial: "Finish the tutorial first" toast ---------- */
.fs-warn {
  position: absolute;
  left: 50%;
  top: 74px;
  transform: translateX(-50%);
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 32px 6px 6px;
  border-radius: 100px;
  background: rgba(255, 215, 72, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffbd00;
  font-size: 22px;
  letter-spacing: -0.9px;
  white-space: nowrap;
  animation: fs-fade 0.2s ease;
}
.fs-warn-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffbd00 0%, #5c4400 100%);
  border: 2px solid #5c4400;
  color: #1a1300;
  font-weight: 700;
  font-size: 24px;
}

/* ---------- Tutorial: step badge + card placement ---------- */
.fs-step-badge {
  position: absolute;
  top: 16px;
  left: 20px;
  padding: 4px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 16px;
  letter-spacing: -0.5px;
  color: #fff;
}
.fs-card-low { top: 62%; }
.fs-card-center .fs-card-body { text-align: center; }

/* ---------- Tutorial card ---------- */
.fs-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: 391px;
  max-width: calc(100vw - 40px);
  padding: 60px 20px 20px;
  border-radius: 20px;
  background: #21213e;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fs-avatar {
  position: absolute;
  left: 50%;
  top: -47px;
  transform: translateX(-50%);
  width: 78px;
  height: 80px;
  border-radius: 100px;
  object-fit: cover;
  background: #21213e;
}
.fs-card-title {
  font-size: 26px;
  letter-spacing: -1px;
  line-height: 1.1;
}
.fs-card-desc {
  font-size: 18px;
  letter-spacing: -0.6px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.fs-card-body { display: flex; flex-direction: column; gap: 16px; }
.fs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.5px;
  font-family: inherit;
}
.fs-btn .fs-arrow { width: 22px; height: 22px; }
.fs-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
.fs-btn-icon { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; }

/* ---------- Demo Complete modal ---------- */
.fs-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(8, 8, 14, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  animation: fs-fade 0.3s ease;
}
@keyframes fs-fade { from { opacity: 0; } to { opacity: 1; } }
.fs-modal {
  position: relative;
  width: 400px;
  max-width: calc(100vw - 40px);
  padding: 60px 20px 20px;
  border-radius: 20px;
  background: #21213e;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: fs-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fs-rise {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.fs-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.fs-modal-head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.fs-modal-title { font-size: 26px; letter-spacing: -1px; }
.fs-modal-win {
  font-family: var(--font-mono);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: #16ffb6;
}
.fs-modal-sub {
  font-size: 16px;
  letter-spacing: -0.6px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  max-width: 240px;
  line-height: 1.4;
}
.fs-claim {
  width: 100%;
  background: #1a1a39;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fs-claim-label { font-size: 18px; letter-spacing: -0.6px; }
.fs-claim-track {
  width: 100%;
  height: 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.fs-claim-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #23246c 0%, #3c3dbd 100%);
  transform-origin: left center;
  animation: fs-claim 30s linear forwards;
}
@keyframes fs-claim { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fs-modal-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* ---------- Brand switch toggle (gameplay: Freestyle ↔ Parlay) ---------- */
.fs-brand-switch { gap: 6px; }
.fs-brand-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 22px;
  border-radius: 166px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.fs-brand-switch .fs-brand-half:first-child {
  background: linear-gradient(90deg, #1c1c57 0%, #3c3dbd 100%);
}
.fs-brand-switchbtn { background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.fs-brand-switchbtn .fs-brand-sub { color: rgba(255, 255, 255, 0.85); }

/* ================= PARLAY (pink theme) ================= */
.fs-parlay { background: #260e18; --accent: #cb2d61; }
.fs-parlay .fs-grid {
  background-color: #1c0c13;
  background-image:
    linear-gradient(to right, rgba(75, 32, 54, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(75, 32, 54, 0.5) 1px, transparent 1px);
}
.fs-parlay .fs-grid::before {
  background-image: radial-gradient(rgba(255, 120, 160, 0.07) 1.4px, transparent 1.6px);
}
.fs-parlay .fs-grid::after {
  background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(38, 14, 24, 0.88) 100%);
}
.fs-parlay .fs-playhead {
  background: linear-gradient(
    to bottom,
    rgba(255, 90, 140, 0) 0%,
    rgba(255, 110, 160, 0.9) 45%,
    rgba(255, 110, 160, 0.9) 55%,
    rgba(255, 90, 140, 0) 100%
  );
  box-shadow: 0 0 18px 2px rgba(243, 45, 111, 0.5);
}

/* Parlay brand pills */
.fs-parlay .fs-brand { background: linear-gradient(180deg, #be124b 0%, #1f040d 100%); }
.fs-parlay .fs-brand-inner { background: linear-gradient(90deg, #f32d6f 0%, #be124b 100%); }
.fs-parlay .fs-brand-switch .fs-brand-half:first-child {
  background: linear-gradient(90deg, #f32d6f 0%, #be124b 100%);
}

/* Flame boxes */
.fs-flame {
  width: 46%;
  height: 46%;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 6px rgba(255, 120, 160, 0.7));
}
.fs-parlay .fs-box {
  background: linear-gradient(180deg, #f32d6f 0%, #67001c 100%);
  border: 2px solid #c01951;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 22px rgba(192, 25, 81, 0.4);
}
.fs-parlay .fs-box.fs-win {
  background: linear-gradient(180deg, #ff4d8d 0%, #b00040 100%);
  border-color: #ff6fa3;
  box-shadow: 0 0 28px rgba(255, 80, 140, 0.6);
}
.fs-parlay .fs-box.fs-ghost {
  background: rgba(64, 27, 40, 0.47);
  border: 2px solid #4a2036;
}

/* Payout banner */
.fs-parlay-banner {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.fs-parlay-mult {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 10px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff0055 0%, #d8205d 100%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 30px;
  box-shadow: 0 0 40px rgba(203, 45, 97, 0.55);
}
.fs-parlay-payout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff0055 0%, #d8205d 100%);
  box-shadow: 0 0 50px rgba(203, 45, 97, 0.5);
}
.fs-parlay-payout .fs-flame {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px;
  box-sizing: border-box;
}
.fs-parlay-payout-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.92);
}
.fs-parlay-payout-amt {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1.1;
  color: #fff;
}

/* Parlay buttons / accents */
.fs-btn-parlay { background: #cb2d61; }
.fs-modal-win-pink { color: #ff5a8c; }

/* Parlay config modal */
.fs-modal-config {
  width: 420px;
  align-items: stretch;
  gap: 16px;
  text-align: left;
}
.fs-config-title { font-size: 26px; letter-spacing: -1px; color: #fff; }
.fs-config-section { display: flex; flex-direction: column; gap: 12px; }
.fs-config-label { font-size: 18px; letter-spacing: -0.6px; color: #fff; }
.fs-config-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
}
.fs-config-max {
  background: #cb2d61;
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
.fs-config-bets { display: flex; gap: 12px; }
.fs-config-bet {
  flex: 1;
  padding: 12px 8px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.5px;
  cursor: pointer;
  font-family: inherit;
}
.fs-config-bet.fs-sel { background: #cb2d61; }
.fs-config-boxrow { display: flex; justify-content: space-between; align-items: center; }
.fs-config-boxnum { display: flex; align-items: baseline; gap: 6px; color: #fff; font-size: 18px; }
.fs-config-bignum { font-family: var(--font-mono); font-size: 44px; line-height: 1; }
.fs-config-badges { display: flex; gap: 8px; }
.fs-config-mult {
  background: #cb2d61;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.fs-config-time {
  background: rgba(38, 14, 24, 0.5);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 16px;
  color: #fff;
}
.fs-config-slider {
  width: 100%;
  accent-color: #f32d6f;
  cursor: pointer;
}
.fs-config-ticks {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.fs-config-payout {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 44px rgba(203, 45, 97, 0.45);
}
.fs-config-payout-label { font-size: 18px; letter-spacing: -0.6px; color: #fff; }
.fs-config-payout-amt {
  font-family: var(--font-mono);
  font-size: 34px;
  color: #fff;
  margin-top: 4px;
}

/* ---------- Gameplay Menu popup ---------- */
.fs-menu-backdrop { z-index: 45; }
.fs-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 1000px;
  max-width: calc(100vw - 40px);
  animation: fs-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-menu-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fs-menu-logo { height: 56px; width: auto; }
.fs-menu-title { font-size: 30px; letter-spacing: -0.5px; color: #fff; }
.fs-menu-panel {
  position: relative;
  width: 100%;
  padding: 72px 20px 20px;
  border-radius: 20px;
  background: #2c2c46;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.fs-parlay .fs-menu-panel { background: #462c36; }
.fs-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.6px;
  font-family: inherit;
  cursor: pointer;
}
.fs-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.fs-menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.fs-menu-card:hover { background: rgba(255, 255, 255, 0.16); }
.fs-menu-card:active { transform: scale(0.99); }
.fs-menu-card-active {
  background: linear-gradient(90deg, #3c3dbd 0%, #1c1c57 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
.fs-menu-card-active:hover { background: linear-gradient(90deg, #4647d4 0%, #232268 100%); }
.fs-parlay .fs-menu-card-active {
  background: linear-gradient(90deg, #cb2d61 0%, #63132d 100%);
}
.fs-parlay .fs-menu-card-active:hover { background: linear-gradient(90deg, #e0376f 0%, #76183a 100%); }
.fs-menu-card-danger {
  background: rgba(255, 72, 136, 0.08);
  border-color: rgba(255, 72, 136, 0.18);
}
.fs-menu-card-danger:hover { background: rgba(255, 72, 136, 0.14); }
.fs-menu-card-danger .fs-menu-card-title,
.fs-menu-card-danger .fs-menu-card-sub { color: #ff4888; }
.fs-menu-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fs-menu-card-title { font-size: 26px; letter-spacing: -0.5px; line-height: 1.15; }
.fs-menu-card-sub {
  font-size: 15px;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-menu-card-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.15);
}
.fs-menu-card-ico img { width: 32px; height: 32px; }

@media (max-width: 720px) {
  .fs-menu-grid { grid-template-columns: 1fr; }
  .fs-menu-card-title { font-size: 22px; }
}

/* ---------- Menu sub-modals (Settings / Feedback / Leaderboard / Wallet) ---------- */
.fs-sub-modal {
  width: 420px;
  max-width: calc(100vw - 40px);
  align-items: stretch;
  gap: 20px;
  padding: 24px 20px 20px;
  text-align: left;
}
.fs-sub-modal.fs-modal-center { align-items: center; text-align: center; }
.fs-modal-scroll { max-height: 88vh; overflow-y: auto; }
.fs-parlay .fs-sub-modal,
.fs-parlay .fs-menu-panel { background: #2a1822; }
.fs-sub-title { font-size: 26px; letter-spacing: -0.8px; color: #fff; text-align: center; }
.fs-sub-sub {
  font-size: 14px;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: -12px;
}
.fs-sub-section { display: flex; flex-direction: column; gap: 12px; }
.fs-sub-label { font-size: 15px; letter-spacing: -0.4px; color: rgba(255, 255, 255, 0.92); }
.fs-muted { color: rgba(255, 255, 255, 0.5); }

/* Settings: audio toggle cards */
.fs-audio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fs-audio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.fs-audio-ico { width: 34px; height: 34px; color: rgba(255, 255, 255, 0.85); }
.fs-audio-name { font-size: 14px; letter-spacing: -0.3px; }
.fs-toggle {
  width: 40px;
  height: 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  transition: background 0.2s ease;
}
.fs-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.fs-toggle-on { background: var(--accent); }
.fs-toggle-on .fs-toggle-knob { transform: translateX(18px); }

/* Settings: help block */
.fs-help-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.fs-help-call-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.fs-help-phone { font-size: 20px; letter-spacing: -0.4px; color: #fff; }
.fs-mini-ico { width: 16px; height: 16px; }
.fs-btn .fs-mini-ico { width: 18px; height: 18px; }

/* Feedback */
.fs-feel-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.fs-feel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 13px;
  letter-spacing: -0.3px;
  cursor: pointer;
  font-family: inherit;
}
.fs-feel-emoji { font-size: 22px; line-height: 1; }
.fs-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chip {
  padding: 8px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.3px;
  cursor: pointer;
  font-family: inherit;
}
.fs-feel.fs-sel,
.fs-chip.fs-sel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.fs-textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -0.3px;
}
.fs-textarea::placeholder { color: rgba(255, 255, 255, 0.4); }

/* Leaderboard */
.fs-lb-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  align-self: center;
}
.fs-lb-tab {
  padding: 8px 26px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.fs-lb-tab.fs-sel { background: rgba(255, 255, 255, 0.14); color: #fff; }
.fs-lb-list { display: flex; flex-direction: column; gap: 8px; }
.fs-lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.fs-lb-rank { font-size: 15px; color: rgba(255, 255, 255, 0.7); text-align: center; }
.fs-lb-name { font-size: 15px; letter-spacing: -0.3px; }
.fs-lb-amt { font-size: 15px; color: #16ffb6; }
.fs-lb-medal-1 { background: rgba(255, 196, 0, 0.14); }
.fs-lb-medal-1 .fs-lb-rank { color: #ffc400; }
.fs-lb-medal-2 { background: rgba(200, 200, 220, 0.12); }
.fs-lb-medal-2 .fs-lb-rank { color: #d2d6e6; }
.fs-lb-medal-3 { background: rgba(205, 127, 50, 0.14); }
.fs-lb-medal-3 .fs-lb-rank { color: #cd7f32; }
.fs-lb-you { background: var(--accent); }
.fs-lb-you .fs-lb-rank,
.fs-lb-you .fs-lb-amt { color: #fff; }

/* Wallet */
.fs-wallet-amt {
  font-family: var(--font-mono);
  font-size: 48px;
  letter-spacing: 0.5px;
  color: var(--accent);
  line-height: 1.1;
}
.fs-parlay .fs-wallet-amt { color: #ff5a8c; }
.fs-wallet-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 15px;
  color: #fff;
}

/* ---------- Deposit flow ---------- */
.fs-deposit-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -0.3px;
  text-align: left;
  -moz-appearance: textfield;
}
.fs-deposit-input::-webkit-outer-spin-button,
.fs-deposit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-deposit-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.fs-deposit-chips { justify-content: center; }

/* Cash App header + badge */
.fs-cashapp-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fs-cashapp-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #00d54b;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
}
.fs-cashapp-sm { width: 22px; height: 22px; border-radius: 6px; font-size: 14px; display: inline-grid; }

/* QR */
.fs-qr {
  width: 220px;
  height: 220px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  align-self: center;
}
.fs-qr svg { width: 100%; height: 100%; display: block; }
.fs-qr-note-label { font-size: 14px; color: rgba(255, 255, 255, 0.7); text-align: center; }
.fs-required { color: #ff4888; }
.fs-qr-code {
  width: 100%;
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.fs-qr-timer {
  width: 100%;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.fs-qr-timer-label {
  display: block;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 0 6px;
}
.fs-qr-timer-bar {
  height: 6px;
  border-radius: 100px;
  background: var(--accent);
  transform-origin: left center;
  animation: fs-qr-countdown 120s linear forwards;
}
@keyframes fs-qr-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Success */
.fs-deposit-win {
  font-family: var(--font-mono);
  font-size: 44px;
  letter-spacing: 0.5px;
  color: #16ffb6;
  line-height: 1.1;
}
.fs-deposit-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.fs-deposit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fs-deposit-row:last-child { border-bottom: none; }
.fs-deposit-paid { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Withdrawal flow ---------- */
.fs-balance-chip {
  align-self: center;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.3px;
}
.fs-withdraw-input-row { display: flex; gap: 10px; width: 100%; }
.fs-withdraw-input-row .fs-deposit-input { flex: 1; }
.fs-max-btn {
  flex: 0 0 auto;
  padding: 0 20px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.fs-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Big Cash App logo */
.fs-cashapp-logo {
  width: 130px;
  height: 130px;
  border-radius: 28px;
  background: #00d54b;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 80px;
  font-weight: 700;
  align-self: center;
  box-shadow: 0 12px 36px rgba(0, 213, 75, 0.3);
}

/* Email-receipts checkbox row */
.fs-receipts {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.fs-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
}
.fs-check-on { background: var(--accent); border-color: var(--accent); }
.fs-receipts-text { display: flex; flex-direction: column; gap: 2px; }
.fs-receipts-title { font-size: 15px; letter-spacing: -0.3px; }
.fs-receipts-text .fs-muted { font-size: 13px; }

/* Confirm + submitted amounts */
.fs-confirm-amt {
  font-family: var(--font-mono);
  font-size: 44px;
  letter-spacing: 0.5px;
  color: var(--accent);
  line-height: 1.1;
}
.fs-parlay .fs-confirm-amt { color: #ff5a8c; }
.fs-submit-amt {
  font-family: var(--font-mono);
  font-size: 44px;
  letter-spacing: 0.5px;
  color: #ffbd00;
  line-height: 1.1;
}
.fs-approve-pill {
  width: 100%;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 189, 0, 0.1);
  border: 1px solid rgba(255, 189, 0, 0.25);
  color: #ffbd00;
  font-size: 14px;
  letter-spacing: -0.3px;
}

/* ---------- Signup flow (after demo) ---------- */
.fs-phone-row { display: flex; gap: 10px; width: 100%; }
.fs-phone-cc {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.fs-phone-row .fs-deposit-input { flex: 1; }
.fs-consent { align-items: flex-start; }
.fs-consent .fs-check { margin-top: 1px; }
.fs-consent-text { font-size: 12px; line-height: 1.45; }
.fs-otp { display: flex; gap: 12px; justify-content: center; width: 100%; }
.fs-otp-box {
  width: 60px;
  height: 64px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 26px;
  text-align: center;
  font-family: var(--font-mono);
}
.fs-otp-box:focus { outline: none; border-color: var(--accent); }
.fs-btn-link {
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  letter-spacing: -0.3px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px;
}
.fs-btn-link:hover { color: #fff; }

/* ---------- Parlay Win / Lost popup ---------- */
.fs-wl-modal { gap: 16px; padding-top: 20px; }
.fs-wl-hero {
  position: relative;
  width: 100%;
  border-radius: 16px;
  padding: 40px 20px 36px;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, #ff2d6f 0%, #c4185a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(203, 45, 97, 0.4);
}
.fs-wl-hero .fs-flame {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
.fs-wl-label {
  font-size: 16px;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.92);
}
.fs-wl-amount {
  font-family: var(--font-mono);
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: #fff;
}
.fs-wl-amount-unit { font-family: var(--font-sans); font-size: 20px; color: rgba(255, 255, 255, 0.85); }
.fs-wl-sub { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin-top: 4px; }

/* ---------- Parlay "Finish your parlay first" guard popup ---------- */
.fs-guard {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 360px;
  max-width: calc(100vw - 40px);
  padding-top: 56px;
  animation: fs-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-guard-icon {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f32d6f 0%, #67001c 100%);
  border: 2px solid #c01951;
  box-shadow: 0 10px 28px rgba(192, 25, 81, 0.5);
}
.fs-guard-icon .fs-flame { width: 34px; height: 34px; color: rgba(255, 255, 255, 0.95); }

/* ---------- Parlay "Time's Up" safe banner ---------- */
.fs-safe-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(22, 255, 182, 0.08);
  border: 1px solid rgba(22, 255, 182, 0.25);
  color: #16ffb6;
  font-size: 14px;
  letter-spacing: -0.3px;
  text-align: left;
  line-height: 1.4;
}
.fs-safe-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(22, 255, 182, 0.18);
  color: #16ffb6;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Idle-logout warning ---------- */
.fs-idle { width: 360px; gap: 18px; }
.fs-idle-timer {
  font-family: var(--font-mono);
  font-size: 44px;
  letter-spacing: 1px;
  color: #ffbd00;
  line-height: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .fs-bar { padding: 14px 16px; }
  .fs-navbar { height: 80px; }
  .fs-pill, .fs-eth-label, .fs-balance-label { font-size: 15px; }
  .fs-brand-inner { padding: 8px 24px; }
  .fs-brand-title { font-size: 20px; }
  .fs-login { padding: 8px 22px; }
  .fs-balance { top: 92px; left: 16px; }
  .fs-bottombar { height: 96px; }
  .fs-follow span { display: none; }
  .fs-round { top: 92px; }
}