/* Landing page (/). Requires tokens.css and components.css. */

body.landing { background: transparent; overflow-x: clip; }

/* ---------- Sky ---------- */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70rem 44rem at 85% -8%, rgba(46, 56, 150, 0.55) 0%, transparent 62%),
    radial-gradient(56rem 38rem at -5% 92%, rgba(70, 44, 140, 0.4) 0%, transparent 60%),
    var(--night);
}
.sky::before, .sky::after { content: ""; position: absolute; inset: 0; }
.sky::before { background: url("../assets/stars-a.svg"); opacity: 0.9; }
.sky::after { background: url("../assets/stars-b.svg"); animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }

.wide { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-5); }
.nav .btn { min-height: 2.5rem; padding: var(--s-2) var(--s-4); font-size: var(--step--1); }

/* ---------- Hero ---------- */
.hero {
  display: grid; gap: var(--s-7); align-items: center;
  padding-block: var(--s-6) var(--s-8);
}
.eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.hero h1 { font-size: var(--step-4); line-height: 1; margin-top: var(--s-3); }
.hero h1 em { font-style: italic; color: var(--gold); }
.lede { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--starlight); margin-top: var(--s-5); max-width: 32rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); }

/* Hero video: the explainer replaces the old card deal. A soft violet halo sits behind the frame. */
.hero__video { position: relative; margin-inline: auto; isolation: isolate; }
.hero__video::before {
  content: ""; position: absolute; inset: -6% 0; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 104, 255, 0.26) 0%, rgba(120, 104, 255, 0.08) 55%, transparent 100%);
}
.hero__video .explainer__cap { text-align: center; font-size: var(--step--1); }

@media (min-width: 52rem) {
  .hero { grid-template-columns: 1.05fr 0.95fr; padding-block: var(--s-7) var(--s-9); }
  .hero__video::before { inset: -10% -16%; } /* halo spreads where there is room */
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s-8); }
.section__head { max-width: 40rem; display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.section__head h2 { font-size: var(--step-3); line-height: 1.05; }
@media (min-width: 40rem) { .section__head h2 { font-size: var(--step-4); } }
.section__head p { color: var(--mist); font-size: var(--step-0); max-width: 34rem; }

.steps { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-5);
  background: rgba(20, 26, 56, 0.78);
  border: 1px solid var(--line-quiet);
  border-radius: var(--r-panel);
}
.step__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 20px; }
.step__icon { width: 3rem; height: 3rem; }
.step h3 { font-size: var(--step-2); }
.step p { color: var(--mist); }
.step__n { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.features { display: grid; gap: var(--s-6) var(--s-7); }
.feature { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.feature h3 { font-size: var(--step-2); }
.feature p { color: var(--mist); max-width: 28rem; }
@media (min-width: 40rem) { .features { grid-template-columns: 1fr 1fr; } }

/* ---------- Suits band ---------- */
.suits {
  border-block: 1px solid var(--line-quiet);
  padding-block: var(--s-5);
  background: rgba(11, 16, 36, 0.6);
}
.suits ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4);
  font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--mist);
}
.suits li { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--tap); }
.suits img { width: 2.25rem; height: 2.25rem; flex: none; }
@media (min-width: 40rem) { .suits ul { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; max-width: 44rem; }
.faq details { border-top: 1px solid var(--line-quiet); padding-block: var(--s-4); }
.faq details:last-child { border-bottom: 1px solid var(--line-quiet); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-ui); font-size: 1.25rem; color: var(--gold); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--mist); margin-top: var(--s-3); max-width: 38rem; }

/* ---------- Closing call ---------- */
.closing { text-align: center; display: grid; justify-items: center; gap: var(--s-5); padding-block: var(--s-9); }
.closing h2 { font-size: var(--step-4); line-height: 1; max-width: 18ch; }
.closing svg { width: 1.97rem; height: 3.5rem; }

.landing .site-footer { padding-block: var(--s-6) var(--s-7); border-top: 1px solid var(--line-quiet); }
.landing .site-footer .wide { display: grid; gap: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .sky::after { animation: none; opacity: 0.8; }
}

/* ---------- Explainer video (DESIGN.md section 16) ---------- */
.explainer { margin: 0; width: 100%; max-width: 26rem; display: grid; gap: var(--s-3); }
.explainer__frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-panel); border: 1px solid var(--nebula); background: var(--night);
  box-shadow: 0 1rem 2.5rem rgba(11, 16, 36, 0.6);
}
.explainer__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--night); }
.explainer__video:focus-visible { outline-offset: -3px; }
/* The whole poster is the tap target; the round button sits below the poster's wordmark. */
.explainer__play {
  position: absolute; inset: 0; display: grid; place-items: end center;
  border: 0; padding: 0 0 13%; background: rgba(11, 16, 36, 0.18); cursor: pointer;
  border-radius: var(--r-panel); color: var(--gold);
}
.explainer__play:focus-visible { outline-offset: -3px; }
.explainer__icon {
  display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%;
  background: rgba(11, 16, 36, 0.86); border: 2px solid var(--gold);
  box-shadow: 0 0.5rem 1.5rem rgba(11, 16, 36, 0.6);
  transition: background var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.explainer__icon svg { width: 1.75rem; height: 1.75rem; margin-left: 0.25rem; }
.explainer__play:hover .explainer__icon { background: var(--dusk); }
.explainer__play:active .explainer__icon { transform: scale(0.96); }
.explainer__cap { color: var(--mist); font-size: var(--step-0); max-width: 26rem; }
@media (prefers-reduced-motion: reduce) {
  .explainer__icon { transition: none; }
}

/* ---------- Social proof strip (DESIGN.md section 17) ---------- */
/* Hidden until js/stats.js has totals. Three across on every width; numbers lead, labels below. */
.stats {
  border-block: 1px solid var(--line-quiet);
  padding-block: var(--s-5);
  background: rgba(11, 16, 36, 0.6);
}
.stats[hidden] { display: none; }
.stats__list {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3);
  text-align: center;
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1); min-width: 0; }
.stat dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: var(--lh-tight);
  font-variant-numeric: lining-nums tabular-nums; color: var(--gold);
  overflow-wrap: anywhere;
}
.stat dt { font-size: var(--step--1); line-height: 1.3; color: var(--mist); }
.stats__note { margin-top: var(--s-4); text-align: center; font-size: var(--step--1); color: var(--mist); }
/* Load-in (js/stats.js adds .is-in when the band is on screen): each stat rises in, staggered,
   while its number counts up. Without .is-in the stats wait unseen; reduced motion skips it. */
.stats:not(.is-in) .stat { opacity: 0; transform: translateY(0.75rem); }
.stats.is-in .stat {
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.stats.is-in .stat:nth-child(2) { transition-delay: 150ms; }
.stats.is-in .stat:nth-child(3) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .stats:not(.is-in) .stat, .stats.is-in .stat { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 40rem) {
  .stats__list { gap: var(--s-5); }
  .stat dd { font-size: var(--step-3); }
  .stat dt { font-size: var(--step-0); }
}