/* ================================================================
   Ante — anteapp.me
   Shared stylesheet: landing page + legal pages.
   Brand tokens mirror the iOS app (dark starfield, blue glass,
   gold reserved for Pro surfaces).
   ================================================================ */

/* ---- Font: Safari/iOS get SF Pro Rounded via ui-rounded (the
   app's real typeface); everyone else gets self-hosted Nunito. ---- */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  /* app palette */
  --space: #0a0926;        /* background */
  --space-deep: #06051a;   /* bezels, wells */
  --felt: #4368e4;         /* primary blue */
  --glow: #89abff;         /* light blue accent */
  --gold: #e9b44c;         /* Pro only */
  --gold-deep: #c8902e;
  --bronze: #cd8b5e;
  --silver: #c7cfdf;
  --diamond: #b3d9ff;
  /* text */
  --ink: #ffffff;
  --body: #c5cded;
  --dim: #8d9bce;
  /* shape */
  --r-card: 16px;
  --font: ui-rounded, "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset-ish ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-padding-top: 84px; /* sticky nav clearance for anchor jumps */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--space);
  color: var(--body);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { color: var(--ink); line-height: 1.12; margin: 0; }

a { color: var(--glow); }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--felt); color: #fff; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--felt);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 12px; }

.wrap {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* ================================================================
   Starfield + glow
   ================================================================ */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: -560px 0 0 0;
  background-repeat: repeat;
}
.stars::before {
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 190px 220px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 340px 110px, rgba(137, 171, 255, 0.7), transparent),
    radial-gradient(1px 1px at 460px 340px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 110px 420px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 280px 500px, rgba(137, 171, 255, 0.55), transparent);
  background-size: 560px 560px;
  animation: drift 180s linear infinite;
}
.stars::after {
  background-image:
    radial-gradient(1px 1px at 80px 130px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 250px 30px, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 360px 260px, rgba(137, 171, 255, 0.3), transparent),
    radial-gradient(1px 1px at 140px 330px, rgba(255, 255, 255, 0.25), transparent);
  background-size: 420px 420px;
  animation: drift 320s linear infinite;
}
@keyframes drift {
  to { transform: translate3d(0, 560px, 0); }
}

/* ================================================================
   Nav
   ================================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 9, 38, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.nav-links {
  display: flex;
  gap: 24px;
  margin-inline: auto;
}
.nav-links a {
  color: var(--dim);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: color 0.15s ease-out;
}
.nav-links a:hover { color: var(--ink); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(137, 171, 255, 0.35);
  border-radius: 999px;
  color: var(--glow);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
}

/* ================================================================
   Shared section bits
   ================================================================ */
.section { padding-block: clamp(72px, 10vw, 124px); }

.eyebrow {
  display: block;
  color: var(--glow);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.section-intro { max-width: 620px; }
.center { text-align: center; }
.center .section-intro { margin-inline: auto; }

/* Glass card */
.card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(67, 104, 228, 0.18), rgba(67, 104, 228, 0.07));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 40px rgba(4, 4, 20, 0.45);
}
.card--gold {
  border-color: rgba(233, 180, 76, 0.4);
  background: linear-gradient(180deg, rgba(233, 180, 76, 0.11), rgba(67, 104, 228, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(243, 205, 125, 0.3),
    0 16px 40px rgba(4, 4, 20, 0.45);
}

/* Scroll reveal (JS adds .js to <html>; no-JS users see everything) */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ================================================================
   Hero
   ================================================================ */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 110px) clamp(72px, 9vw, 120px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -180px 0 auto 0;
  height: 720px;
  background: radial-gradient(ellipse 75% 60% at 50% 18%, rgba(67, 104, 228, 0.32), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  margin: 18px 0;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--glow); }
.hero .sub {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  max-width: 30em;
  margin: 0 0 32px;
}
.hero .sub strong { color: var(--ink); }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
  color: var(--dim);
  font-size: 0.875rem;
  font-weight: 700;
}
.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-row svg { color: var(--glow); }

/* App Store badge — pre-launch (dimmed, non-interactive) */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  text-align: left;
  opacity: 0.6;
  filter: saturate(0.85);
}
.store-badge .apple { width: 28px; height: 34px; flex: none; }
.store-badge .small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.store-badge .big {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
/* iPhone frame */
.device {
  position: relative;
  aspect-ratio: 1179 / 2556;
  border-radius: clamp(38px, 13.5%, 54px);
  padding: 10px;
  background: var(--space-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 40px 90px rgba(4, 4, 20, 0.65),
    0 0 80px rgba(67, 104, 228, 0.28);
}
.device picture { display: contents; }
.device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(30px, 11%, 45px);
}
.device::after {
  /* dynamic island */
  content: "";
  position: absolute;
  top: 3.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 29%;
  height: 3.3%;
  border-radius: 999px;
  background: #000;
}
.hero-device {
  width: min(330px, 78vw);
  margin-inline: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-device {
    animation: float 7s ease-in-out infinite alternate;
  }
}
@keyframes float {
  from { transform: translateY(-6px); }
  to { transform: translateY(8px); }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-device { width: min(280px, 72vw); }
}

/* ================================================================
   Hook + coin-flip demo
   ================================================================ */
.hook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.hook-copy p { margin: 0 0 18px; }
.hook-copy .kicker {
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 700;
}
@media (max-width: 880px) {
  .hook-grid { grid-template-columns: 1fr; }
}

.table-demo {
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
}
.table-demo .demo-label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 18px;
}
.demo-status {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 26px;
}
.stat-box {
  flex: 1;
  max-width: 180px;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(6, 5, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-box .num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-box .lbl {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.stat-box .num .locked-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.0625rem;
  color: var(--glow);
}
.coin-stage {
  perspective: 700px;
  width: 132px;
  height: 132px;
  margin: 0 auto 26px;
}
.coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.25, 0.7, 0.25, 1);
}
.coin .face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 3rem;
  font-weight: 900;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(160deg, #5d7df0, #2c4ab8);
  border: 4px solid var(--glow);
  box-shadow:
    inset 0 0 0 6px rgba(10, 9, 38, 0.35),
    0 14px 36px rgba(67, 104, 228, 0.45);
}
.coin .face svg { width: 44px; height: 44px; }
.coin .face-t { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .coin { transition: none; }
}
.demo-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 12px 26px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #5577ee, #3a5cd6);
  box-shadow: 0 8px 24px rgba(67, 104, 228, 0.4);
  transition: transform 0.15s ease-out;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(67, 104, 228, 0.55);
}
.btn:active { transform: translateY(0); }
.btn:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}
.btn--ghost {
  background: transparent;
  box-shadow: none;
  border-color: rgba(137, 171, 255, 0.4);
  color: var(--glow);
}
.btn--ghost:hover { box-shadow: none; background: rgba(137, 171, 255, 0.08); }
.demo-result {
  min-height: 3.2em;
  margin: 18px auto 0;
  max-width: 34em;
  font-weight: 700;
  color: var(--ink);
}
.demo-result .good { color: var(--glow); }
.demo-fineprint {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--dim);
}

/* ================================================================
   Features grid
   ================================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.feature {
  padding: 26px 24px;
}
.feature h3 {
  font-size: 1.125rem;
  font-weight: 800;
  margin: 16px 0 8px;
}
.feature p { margin: 0; font-size: 0.9688rem; }
.feature .icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(137, 171, 255, 0.12);
  border: 1px solid rgba(137, 171, 255, 0.25);
  color: var(--glow);
}
.feature--wide { grid-column: span 2; }
.feature--full { grid-column: 1 / -1; }
/* ---- Rank card: a vertical "climb" ladder ----
   Copy sits top-right, the tier ladder is the left spine, and the
   player-card screenshot hangs off the bottom-right, bleeding off
   the card edge. One glowing spine threads eight nodes that grow
   and brighten from Bronze (grounded) up to a haloed Legend. */
.feature--rank {
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "ladder copy"
    "ladder phone";
  column-gap: 30px;
  row-gap: 14px;
  align-items: stretch;
  overflow: hidden;
  padding-bottom: 0;
}
.rank-copy { grid-area: copy; }
.rank-copy p { max-width: 48ch; }

/* Divisions explainer — replaces the buried "(III → II → I)" prose */
.rank-divisions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.rank-divisions-hexes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.div-hex {
  width: 24px;
  height: 27px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(137, 171, 255, 0.34);
  display: grid;
  place-items: center;
}
.div-hex span {
  width: 19px;
  height: 22px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #0d0c2b;
  display: grid;
  place-items: center;
  color: var(--glow);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.div-arrow { color: var(--dim); font-weight: 800; font-size: 0.8125rem; }
.div-caption { font-size: 0.8125rem; color: var(--dim); }

/* The ladder */
.rank-ladder {
  grid-area: ladder;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 6px 0 24px;
  min-height: 470px;
  display: flex;
  flex-direction: column-reverse; /* Bronze grounded at the bottom */
  justify-content: space-between;
  gap: 4px;
}
/* The spine — brightens as it climbs (not clipped, so box-shadow glows) */
.rank-ladder::before {
  content: "";
  position: absolute;
  left: 28px; /* center of the 56px node slot */
  top: 32px;
  bottom: 42px;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(to top,
    rgba(141, 155, 206, 0.30) 0%,
    rgba(67, 104, 228, 0.70) 55%,
    #89abff 74%,
    #cfe0ff 100%);
  box-shadow: 0 0 14px rgba(67, 104, 228, 0.45);
  z-index: 0;
}
.rung {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.node {
  flex: 0 0 56px;
  display: grid;
  place-items: center;
}

/* Hex nodes — size crescendo is a non-color hierarchy cue */
.hex {
  --gloss: radial-gradient(at 30% 24%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 46%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid;
  place-items: center;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.hex > span {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, #0e0d30, #06051a);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 800;
}
.rung--metal .hex { width: 38px; height: 44px; }
.rung--metal .hex > span { width: 32px; height: 38px; font-size: 0.75rem; }
.rung--exotic .hex { width: 46px; height: 52px; }
.rung--exotic .hex > span { width: 38px; height: 44px; }
.rung--legend .hex { width: 54px; height: 62px; }
.rung--legend .hex > span { width: 44px; height: 52px; }

/* Per-tier material: 3-stop gradient (specular / body / shadow) + gloss.
   --glow-c drives the hover/idle drop-shadow so one rule fits all. */
.hex--bronze { background: var(--gloss), linear-gradient(155deg, #f2c49a 0%, #c98850 45%, #8a5228 100%); --glow-c: rgba(201, 136, 80, 0.5); }
.hex--silver { background: var(--gloss), linear-gradient(155deg, #ffffff 0%, #becbe2 45%, #8593b3 100%); --glow-c: rgba(174, 189, 217, 0.5); }
.hex--gold { background: var(--gloss), linear-gradient(155deg, #ffe1a0 0%, #e0ac54 45%, #a06f1e 100%); --glow-c: rgba(217, 166, 72, 0.5); }
.hex--platinum { background: var(--gloss), linear-gradient(155deg, #eafffa 0%, #a9d8cc 45%, #6f9e94 100%); --glow-c: rgba(159, 208, 195, 0.5); }
.hex--diamond { background: var(--gloss), linear-gradient(155deg, #eaf6ff 0%, #9cc8f2 45%, #5f93d4 100%); --glow-c: rgba(143, 192, 239, 0.5); }
.hex--master { background: var(--gloss), linear-gradient(155deg, #e8ccff 0%, #a76bf0 45%, #6425c0 100%); --glow-c: rgba(167, 107, 240, 0.55); }
.hex--grandmaster { background: var(--gloss), linear-gradient(155deg, #ffc3b8 0%, #f0566b 40%, #a80f38 100%); --glow-c: rgba(240, 86, 107, 0.55); }
.hex--legend {
  background: var(--gloss), conic-gradient(from 210deg, #ffd9f2, #a8dbff, #b6ffdd, #ffedbf, #ffd9f2);
  --glow-c: rgba(184, 225, 255, 0.5);
}

/* Glow: drop-shadow traces the clipped hex silhouette (box-shadow would
   get clipped away — the old exotic box-shadow rendered nothing). */
.rung--metal .hex { filter: drop-shadow(0 2px 6px rgba(4, 4, 20, 0.45)); }
.rung--exotic .hex { filter: drop-shadow(0 0 10px var(--glow-c)) drop-shadow(0 4px 14px rgba(4, 4, 20, 0.5)); }

/* Exotic crowns keep their per-tier tint */
.hex--master > span { color: #d9b8ff; }
.hex--grandmaster > span { color: #ff9d92; }
.hex--legend > span { color: #cfe8ff; }
.hex--legend > span svg { filter: drop-shadow(0 0 4px rgba(184, 225, 255, 0.6)); }

/* Labels */
.rung-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
.rung-name {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--body);
  transition: color 0.18s ease-out;
}
.rung--exotic .rung-name { color: var(--ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rung--legend .rung-name {
    background: linear-gradient(90deg, #cfe0ff, #d9b8ff 55%, #ffd9f2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.rung-min {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* "ELITE" break — where the metals give way to the exotic tiers */
.rung-divider {
  position: relative;
  z-index: 1;
  height: 20px;
  margin: 2px 0;
}
.rung-divider span {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(137, 171, 255, 0.4);
  background: rgba(10, 9, 38, 0.92);
  color: var(--glow);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Legend summit — soft halo + a few earned stars */
.rung--legend::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(184, 225, 255, 0.16), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.rung--legend::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    -34px -20px 0 0 rgba(255, 255, 255, 0.9),
    28px -26px 0 -0.5px rgba(184, 225, 255, 0.9),
    40px 12px 0 -0.5px rgba(255, 255, 255, 0.8),
    -30px 24px 0 0 rgba(216, 236, 255, 0.8),
    16px 30px 0 -0.5px rgba(255, 255, 255, 0.7);
  z-index: -1;
  pointer-events: none;
}

/* Hover — rungs are ambient, not interactive (no cursor/tabindex) */
@media (hover: hover) and (pointer: fine) {
  .rung:hover .hex {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 14px var(--glow-c));
  }
  .rung:hover .rung-name { color: var(--ink); }
}

/* The player card — grounded at the card's bottom edge, bleeding off it */
.rank-device {
  grid-area: phone;
  width: min(232px, 60vw);
  margin: 0 auto;
  align-self: end;
  justify-self: center;
  border-radius: clamp(30px, 13.5%, 40px) clamp(30px, 13.5%, 40px) 0 0;
  border-bottom: none;
  aspect-ratio: 1179 / 1720; /* cropped peek: shows the whole player card */
}
.rank-device img { object-position: top; border-radius: clamp(24px, 11%, 34px) clamp(24px, 11%, 34px) 0 0; }
/* Pill bridging the ladder to the screenshot */
.rank-device-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(137, 171, 255, 0.4);
  background: rgba(10, 9, 38, 0.9);
  color: var(--glow);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(4, 4, 20, 0.5);
}

/* ---- Private card: copy on top, a screenshot bleeding off the bottom,
   filling the height the tall rank card lends this grid row ---- */
.feature--private {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.private-device {
  width: min(212px, 72%);
  margin-top: auto; /* push to the bottom, bleeding off the card edge */
  align-self: center;
  border-radius: clamp(28px, 13%, 38px) clamp(28px, 13%, 38px) 0 0;
  border-bottom: none;
  aspect-ratio: 1179 / 1500; /* tall cropped peek */
}
.private-device img { object-position: top; border-radius: clamp(22px, 10.5%, 32px) clamp(22px, 10.5%, 32px) 0 0; }

/* Scroll-in choreography: spine draws upward, rungs pop bottom-to-top,
   the summit lights up last. Guarded by .js; killed for reduced motion. */
.js .feature--rank .rank-ladder::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  transition: transform 0.8s ease-out 0.25s;
}
.js .feature--rank.in .rank-ladder::before { transform: translateX(-50%) scaleY(1); }
.js .feature--rank .rung,
.js .feature--rank .rung-divider {
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  transition-delay: calc(300ms + var(--i, 5) * 80ms);
}
.js .feature--rank.in .rung,
.js .feature--rank.in .rung-divider {
  opacity: 1;
  transform: none;
}
.js .feature--rank .rung--legend::before,
.js .feature--rank .rung--legend::after {
  opacity: 0;
  transition: opacity 0.6s ease-out 1s;
}
.js .feature--rank.in .rung--legend::before,
.js .feature--rank.in .rung--legend::after { opacity: 1; }
.feature--pro { padding: 28px 26px; }
.feature--pro .pro-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.feature--pro h3 { margin-top: 0; }
.feature--pro h3,
.pro-word { color: var(--gold); }
.btn--gold {
  background: linear-gradient(180deg, #f0c468, var(--gold-deep));
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(233, 180, 76, 0.35);
  color: #211303;
  text-decoration: none;
  display: inline-block;
}
.btn--gold:hover { box-shadow: 0 10px 28px rgba(233, 180, 76, 0.5); }
@media (max-width: 880px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  /* Copy moves full-width on top; ladder + phone rise side by side below */
  .feature--rank {
    grid-template-columns: minmax(180px, 240px) 1fr;
    grid-template-areas:
      "copy   copy"
      "ladder phone";
    padding-bottom: 0;
  }
  .feature--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature--wide { grid-column: auto; }
  /* Single column: copy, then the ladder, then the player card */
  .feature--rank {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "ladder"
      "phone";
  }
  .rank-ladder {
    min-height: 0;
    justify-content: flex-start;
    gap: clamp(8px, 2.4vw, 14px);
  }
  .rank-device { width: min(200px, 62vw); justify-self: center; margin: 0 auto; }
}

/* ================================================================
   How it works
   ================================================================ */
.how-grid {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 74px;
  border-radius: var(--r-card);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(67, 104, 228, 0.25);
  border: 1px solid rgba(137, 171, 255, 0.4);
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 2px;
}
.steps p { margin: 0; font-size: 0.9375rem; }
.how-device { width: min(260px, 70vw); margin-inline: auto; }
@media (max-width: 880px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Games
   ================================================================ */
.games-grid {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.game-cards { display: grid; gap: 14px; }
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.game-group-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glow);
}
.game-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(137, 171, 255, 0.4), transparent);
}
.game-group-label--gold { color: var(--gold); }
.game-group-label--gold::after { background: linear-gradient(90deg, rgba(233, 180, 76, 0.45), transparent); }
.game-grid + .game-group-label { margin-top: 14px; }
.game-card {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.game-card .icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(137, 171, 255, 0.12);
  border: 1px solid rgba(137, 171, 255, 0.25);
  color: var(--glow);
}
.game-card--gold .icon {
  background: rgba(233, 180, 76, 0.12);
  border-color: rgba(233, 180, 76, 0.35);
  color: var(--gold);
}
.game-card h3 {
  font-size: 1.0625rem;
  font-weight: 800;
}
.game-card p { margin: 4px 0 0; font-size: 0.875rem; }
.games-more {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--dim);
  font-weight: 700;
}
.games-device { width: min(260px, 70vw); margin-inline: auto; }
@media (max-width: 880px) {
  .games-grid { grid-template-columns: 1fr; }
  .games-device { order: 2; }
}
@media (max-width: 560px) {
  .game-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Privacy
   ================================================================ */
.privacy { position: relative; }
.privacy::before {
  content: "";
  position: absolute;
  inset: 10% 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(67, 104, 228, 0.18), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.privacy .shield {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(137, 171, 255, 0.12);
  border: 1px solid rgba(137, 171, 255, 0.3);
  color: var(--glow);
}
.privacy-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 36px 0 28px;
  padding: 0;
  list-style: none;
}
.privacy-points li {
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--ink);
}
.privacy-note {
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.9375rem;
  color: var(--dim);
}
.privacy-note a { font-weight: 700; }

/* ================================================================
   Pricing
   ================================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 44px auto 0;
  align-items: stretch;
}
.plan {
  padding: 30px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.plan h3 {
  font-size: 1.375rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan .plan-sub { margin: 6px 0 20px; font-size: 0.9375rem; color: var(--dim); }
.plan ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 0.9688rem;
}
.plan li {
  display: flex;
  gap: 11px;
  align-items: baseline;
}
.plan li svg { flex: none; translate: 0 2px; color: var(--glow); }
.plan--pro li svg { color: var(--gold); }
.plan .plan-cta { margin-top: auto; }
.trial-pill {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(233, 180, 76, 0.14);
  border: 1px solid rgba(233, 180, 76, 0.5);
  color: var(--gold);
  white-space: nowrap;
}
.price-line {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.price-line .muted { color: var(--dim); font-weight: 600; }
.pricing-foot {
  text-align: center;
  margin: 26px auto 0;
  font-size: 0.875rem;
  color: var(--dim);
  max-width: 46em;
}
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   FAQ
   ================================================================ */
.faq-list {
  max-width: 720px;
  margin: 40px auto 0;
  display: grid;
  gap: 12px;
}
.faq-list details {
  border-radius: var(--r-card);
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  font-weight: 800;
  color: var(--ink);
  font-size: 1.0313rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(137, 171, 255, 0.4);
  color: var(--glow);
  font-weight: 700;
  transition: transform 0.2s ease-out;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-list summary::after { transition: none; }
}
.faq-list .answer { padding: 0 22px 20px; }
.faq-list .answer p { margin: 0; font-size: 0.9688rem; }

/* ================================================================
   Footer
   ================================================================ */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 48px 0 56px;
  margin-top: 40px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.footer .brand { font-size: 1.125rem; }
.footer .tagline {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--dim);
}
.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--body);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-meta {
  margin-top: 34px;
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--dim);
}
.footer-meta span { white-space: nowrap; }

/* ================================================================
   Legal pages (privacy / terms) — chrome only; copy untouched
   ================================================================ */
.page-legal main {
  max-width: 760px;
  margin-inline: auto;
  padding: 48px clamp(20px, 5vw, 40px) 80px;
}
.page-legal h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.page-legal h2 {
  font-size: 1.3125rem;
  font-weight: 800;
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.page-legal h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 24px 0 8px;
}
.page-legal p,
.page-legal li { color: var(--body); }
.page-legal ul { padding-left: 22px; }
.page-legal li { margin: 5px 0; }
.page-legal .meta {
  color: var(--dim);
  font-size: 0.875rem;
  margin: 0 0 26px;
}
.page-legal .lead { font-size: 1.0938rem; }
.page-legal .callout {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(67, 104, 228, 0.18), rgba(67, 104, 228, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  padding: 16px 20px;
  margin: 20px 0;
}
.page-legal code {
  background: rgba(137, 171, 255, 0.12);
  border: 1px solid rgba(137, 171, 255, 0.2);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.875rem;
}
.page-legal main footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--dim);
  font-size: 0.8125rem;
}
.page-legal strong { color: var(--ink); }

/* ================================================================
   Reduced motion — kill all non-essential movement
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .stars::before,
  .stars::after { animation: none; }
  .hero-device { animation: none; }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Rank ladder: show the finished state, no draw/pop/sheen.
     Legend halo/stars keep their centering transform — only opacity resets. */
  .js .feature--rank .rank-ladder::before { transform: translateX(-50%) scaleY(1); transition: none; }
  .js .feature--rank .rung,
  .js .feature--rank .rung-divider {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .feature--rank .rung--legend::before,
  .js .feature--rank .rung--legend::after {
    opacity: 1;
    transition: none;
  }
  .hex { transition: none; }
  .rung:hover .hex { transform: none; }
  .btn,
  .skip-link,
  .nav-links a { transition: none; }
}

[hidden] {
  display: none !important;
}