@import url("./tokens.css");

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-12);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.7;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

::selection {
  background: var(--accent);
  color: var(--fg-on-accent);
}

::-webkit-scrollbar { width: var(--space-2); }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: var(--stroke-hairline) solid var(--bg-page);
  border-radius: var(--radius-pill);
}

:focus-visible {
  outline: var(--stroke-focus) solid var(--state-focus-ring);
  outline-offset: var(--space-1);
}

a { color: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-tight);
  background: var(--accent);
  color: var(--fg-on-accent);
  font-weight: 700;
  transform: translateY(calc((100% + var(--space-5)) * -1));
  transition: transform var(--dur-instant) var(--ease-out-quad);
}

.skip-link:focus { transform: translateY(0); }

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: var(--size-progress-track);
  background: var(--border);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.site-header,
.site-footer,
.section,
.hero,
.compliance,
.final-cta {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max-width));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--space-10);
  border-bottom: var(--stroke-hairline) solid var(--border);
  background: var(--bg-page);
}

.brand {
  display: inline-flex;
  width: min(18vw, 197px);
  min-width: 134px;
}

.site-header nav,
.site-footer nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header nav { justify-content: center; }

.site-header nav a,
.site-footer nav a,
.footer-cta {
  color: var(--fg-secondary);
  font-size: var(--text-body-sm);
  text-decoration: none;
  transition: color var(--dur-instant) var(--ease-out-quad);
}

.site-header nav a:hover,
.site-footer nav a:hover,
.footer-cta:hover { color: var(--accent-ink); }

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: var(--transition-interactive);
}

.header-cta {
  min-height: var(--btn-height-sm);
  border: var(--stroke-hairline) solid var(--border-accent);
  color: var(--accent-ink);
  font-size: var(--text-body-sm);
}

.header-cta:hover,
.button-secondary:hover {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  transform: translateY(var(--motion-lift-sm));
}

.button-primary {
  border: var(--stroke-hairline) solid var(--accent);
  background: var(--accent);
  color: var(--fg-on-accent);
}

.button-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  transform: translateY(var(--motion-lift-sm));
}

.button-primary:active,
.button-secondary:active {
  transform: translateY(0);
}

.button-primary:active {
  border-color: var(--accent-pressed);
  background: var(--accent-pressed);
}

.button-secondary {
  border: var(--stroke-hairline) solid var(--border-strong);
  background: transparent;
  color: var(--fg-secondary);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: var(--space-10);
  min-height: calc(100svh - var(--space-10));
  padding-block: var(--space-10);
}

.hero-copy { position: relative; z-index: 2; }

.hero-title {
  max-width: 15ch;
  margin-top: var(--space-4);
  font-size: var(--text-display-xl);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.hero-title em {
  display: block;
  color: var(--accent-ink);
  font-style: italic;
}

.hero-title .word {
  display: inline-block;
  will-change: transform, opacity;
}

.js .hero-title .word {
  opacity: 0;
  transform: translateY(var(--motion-reveal-distance));
  animation: word-in var(--dur-reveal) var(--ease-cinema) forwards;
}

.js .hero-title .word-1 { animation-delay: calc(var(--dur-stagger-step) * 1); }
.js .hero-title .word-2 { animation-delay: calc(var(--dur-stagger-step) * 2); }
.js .hero-title .word-3 { animation-delay: calc(var(--dur-stagger-step) * 3); }
.js .hero-title .word-4 { animation-delay: calc(var(--dur-stagger-step) * 4); }
.js .hero-title .word-5 { animation-delay: calc(var(--dur-stagger-step) * 5); }
.js .hero-title .word-6 { animation-delay: calc(var(--dur-stagger-step) * 6); }
.js .hero-title .word-7 { animation-delay: calc(var(--dur-stagger-step) * 7); }
.js .hero-title .word-8 { animation-delay: calc(var(--dur-stagger-step) * 8); }
.js .hero-title .word-9 { animation-delay: calc(var(--dur-stagger-step) * 9); }
.js .hero-title .word-10 { animation-delay: calc(var(--dur-stagger-step) * 10); }
.js .hero-title .word-11 { animation-delay: calc(var(--dur-stagger-step) * 11); }

.hero-sub {
  max-width: 58ch;
  margin-top: var(--space-5);
  color: var(--fg-secondary);
  font-size: var(--text-body-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.social-proof {
  width: fit-content;
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border-left: var(--stroke-focus) solid var(--accent);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

.hero-stage {
  position: relative;
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: var(--space-7) calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-7);
  border: var(--stroke-hairline) solid var(--border-accent);
  border-radius: var(--frame-radius);
}

.media-slot {
  position: relative;
  overflow: hidden;
  border: var(--stroke-hairline) solid var(--border-strong);
  background: var(--bg-raised);
}

.media-slot-hero {
  aspect-ratio: 16 / 10;
  border-radius: var(--frame-radius);
  box-shadow: var(--shadow-raised);
}

.media-slot-hero::before,
.media-slot-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 3;
  height: var(--space-5);
  background: var(--bg-page);
}

.media-slot-hero::before { top: 0; }
.media-slot-hero::after { bottom: 0; }

.projector-line {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--size-progress-track);
  background: var(--accent);
  opacity: 0.7;
  animation: projector-scan var(--dur-marquee) var(--ease-linear) infinite;
}

.stage-status {
  position: absolute;
  top: var(--space-8);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.live-dot {
  width: var(--size-dot-md);
  height: var(--size-dot-md);
  border-radius: var(--radius-pill);
  background: var(--live);
  animation: live-pulse var(--dur-reveal) var(--ease-cinema) infinite;
}

.schedule {
  position: absolute;
  inset: var(--space-16) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.schedule > span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: var(--stroke-hairline) solid var(--border);
  font-family: var(--font-mono);
}

.schedule > span:last-child { border-bottom: var(--stroke-hairline) solid var(--border); }
.schedule b { font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; }
.schedule i { height: var(--stroke-hairline); background: var(--border); }
.schedule small { color: var(--fg-tertiary); }

.schedule .is-selected {
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-color: var(--border-accent);
  background: var(--state-selected);
  color: var(--accent-ink);
}

.stage-time {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-6);
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-display-md);
  font-variant-numeric: tabular-nums;
}

.trust-ticker {
  overflow: hidden;
  border-block: var(--stroke-hairline) solid var(--border);
  background: var(--bg-sunken);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee var(--dur-marquee) var(--ease-linear) infinite;
}

.ticker-track span {
  position: relative;
  padding: var(--space-3) var(--space-8);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  white-space: nowrap;
}

.ticker-track span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--size-dot-sm);
  height: var(--size-dot-sm);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: translateY(-50%);
}

.compliance {
  position: relative;
  padding-block: var(--space-10);
  overflow: hidden;
}

.compliance p {
  max-width: 34ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.section {
  padding-block: var(--space-16);
  border-top: var(--stroke-hairline) solid var(--border);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  align-items: start;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.section-header h2 {
  font-size: var(--text-display-lg);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}

.steps-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(200px, 0.55fr) minmax(280px, 1fr);
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-8);
  border-top: var(--stroke-hairline) solid var(--border);
}

.step:last-child { border-bottom: var(--stroke-hairline) solid var(--border); }

.step-number {
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-display-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out-quad);
}

.step h3 {
  font-size: var(--text-display-md);
  line-height: 1.1;
}

.step p { color: var(--fg-secondary); }
.step:hover .step-number { color: var(--accent-ink); }

.benefits,
.faq { padding-block: var(--space-12); }

.compact-section-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--stroke-hairline) solid var(--border-strong);
}

.compact-section-header h2 {
  font-size: var(--text-display-lg);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}

.benefits-grid {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-16) + var(--space-8)), 0.58fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.benefit {
  position: relative;
  padding: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border-strong);
  background: var(--bg-raised);
  transition: border-color var(--dur-instant) var(--ease-out-quad), background var(--dur-instant) var(--ease-out-quad);
}

.benefit:hover {
  border-color: var(--border-accent);
  background: var(--state-hover);
}

.benefit-index {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
}

.benefit h3 {
  font-size: var(--text-display-md);
  line-height: 1.1;
}

.benefit p {
  margin-top: var(--space-3);
  color: var(--fg-secondary);
  font-size: var(--text-body-sm);
}

.benefits-visual {
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: calc(var(--space-16) * 2);
  transform: translateY(var(--parallax-soft-y, 0));
  will-change: transform;
}

.media-slot-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-panel);
}

.media-slot-portrait::before {
  content: "";
  position: absolute;
  inset: var(--space-5);
  border: var(--stroke-hairline) solid var(--border-accent);
  border-radius: var(--radius-tight);
}

.media-slot-label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: calc(100% - (var(--space-8) * 2));
  padding: var(--space-3);
  border: var(--stroke-hairline) solid var(--border-accent);
  border-radius: var(--radius-sharp);
  background: var(--bg-overlay);
  color: var(--fg-primary);
  text-align: center;
  transform: translate(-50%, -50%);
}

.media-slot-label b {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: 0.08em;
}

.media-slot-label span {
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.frame-corner {
  position: absolute;
  width: var(--space-8);
  height: var(--space-8);
  border-color: var(--accent-ink);
  opacity: 0.7;
}

.frame-corner-a {
  top: var(--space-3);
  left: var(--space-3);
  border-top: var(--stroke-focus) solid;
  border-left: var(--stroke-focus) solid;
}

.frame-corner-b {
  right: var(--space-3);
  bottom: var(--space-3);
  border-right: var(--stroke-focus) solid;
  border-bottom: var(--stroke-focus) solid;
}

.signal-bars {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  display: flex;
  align-items: end;
  gap: var(--space-2);
  height: var(--space-10);
}

.signal-bars i {
  flex: 1;
  background: var(--border-strong);
  transform-origin: bottom;
  animation: signal var(--dur-reveal) var(--ease-out-back) infinite alternate;
}

.signal-bars i:nth-child(1) { height: 24%; }
.signal-bars i:nth-child(2) { height: 48%; animation-delay: calc(var(--dur-stagger-step) * 1); }
.signal-bars i:nth-child(3) { height: 82%; animation-delay: calc(var(--dur-stagger-step) * 2); }
.signal-bars i:nth-child(4) { height: 60%; animation-delay: calc(var(--dur-stagger-step) * 3); }
.signal-bars i:nth-child(5) { height: 100%; animation-delay: calc(var(--dur-stagger-step) * 4); }

.section-transition {
  position: relative;
  overflow: hidden;
}

.section-transition::before,
.section-transition::after,
.reveal-target.letterbox::before,
.reveal-target.letterbox::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 8;
  height: 51%;
  background: var(--bg-page);
  transition: transform var(--dur-panel) var(--ease-cinema);
  pointer-events: none;
}

.section-transition::before,
.reveal-target.letterbox::before { top: 0; transform-origin: top; }
.section-transition::after,
.reveal-target.letterbox::after { bottom: 0; transform-origin: bottom; }
.section-transition.is-in::before,
.section-transition.is-in::after,
.reveal-target.letterbox.is-in::before,
.reveal-target.letterbox.is-in::after { transform: scaleY(0); }

.anti-bot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--space-10);
  width: 100%;
  max-width: none;
  padding: var(--space-16) max(var(--gutter), calc((100vw - var(--max-width)) / 2));
  border-top-color: var(--border-accent);
  background: var(--bg-raised);
}

.anti-copy h2 {
  max-width: 17ch;
  margin-top: var(--space-4);
  font-size: var(--text-display-lg);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.anti-intro {
  max-width: 64ch;
  margin-top: var(--space-5);
  color: var(--fg-secondary);
  font-size: var(--text-body-lg);
}

.anti-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.anti-list li {
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-top: var(--stroke-hairline) solid var(--border);
  color: var(--fg-secondary);
}

.anti-list li::before {
  content: "";
  position: absolute;
  width: var(--size-dot-sm);
  height: var(--size-dot-sm);
  margin-top: var(--space-2);
  margin-left: calc(var(--space-6) * -1);
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.anti-list strong { color: var(--fg-primary); }
.anti-visual { align-self: center; }

.media-slot-wide {
  aspect-ratio: 16 / 9;
  border-radius: var(--frame-radius);
}

.human-signal {
  position: absolute;
  top: 50%;
  width: 18%;
  aspect-ratio: 1;
  border: var(--stroke-hairline) solid var(--border-accent);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  transform: translateY(-50%);
}

.human-signal::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation: live-pulse var(--dur-reveal) var(--ease-cinema) infinite;
}

.human-signal-a { left: 16%; }
.human-signal-b { right: 16%; }
.human-signal-b::before { animation-delay: calc(var(--dur-reveal) / 2); }

.connection {
  position: absolute;
  top: 50%;
  right: 34%;
  left: 34%;
  height: var(--stroke-hairline);
  background: var(--border-accent);
}

.connection::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--size-dot-sm);
  height: var(--size-dot-sm);
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
  animation: connection-travel var(--dur-reveal) var(--ease-cinema) infinite alternate;
}

.time-comparison {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-8);
  align-items: end;
  padding-block: var(--space-8);
  border-block: var(--stroke-hairline) solid var(--border-strong);
}

.time-comparison p {
  max-width: 36ch;
  font-size: var(--text-body-lg);
}

.time-comparison strong { color: var(--accent-ink); }

.timecode {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: var(--text-display-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.timecode i { height: var(--stroke-hairline); background: var(--border-accent); }

.plans {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--stroke-hairline) solid var(--border);
  background: var(--bg-raised);
}

.plan-free { border-radius: var(--radius-tight); }

.plan-pro {
  border-color: var(--border-accent);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-glow-accent);
}

.plan-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--stroke-hairline) solid var(--border);
}

.plan-heading h3 { font-size: var(--text-display-md); }
.plan-heading p { color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; }

.plan ul {
  flex: 1;
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.plan li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-bottom: var(--stroke-hairline) solid var(--border);
  color: var(--fg-secondary);
}

.plan li::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + var(--space-2));
  left: 0;
  width: var(--size-dot-sm);
  height: var(--size-dot-sm);
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
}

.plan .button { align-self: flex-start; }

.raffle-note {
  max-width: 66ch;
  margin: var(--space-8) auto 0;
  padding: var(--space-5);
  border-left: var(--stroke-focus) solid var(--accent);
  color: var(--fg-secondary);
}

.raffle-note strong { color: var(--fg-primary); }

.store {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-10) var(--space-8);
}

.store-heading { position: sticky; top: var(--space-16); align-self: start; }
.store-heading .eyebrow { margin-bottom: var(--space-4); }

.store-heading h2 {
  font-size: var(--text-display-md);
  line-height: 1.1;
}

.store-heading > p:last-child {
  margin-top: var(--space-5);
  color: var(--fg-secondary);
}

.store-ledger,
.vip-ledger { grid-column: 2; }

.store-ledger h3,
.vip-ledger h3 {
  margin-bottom: var(--space-4);
  font-size: var(--text-display-md);
}

.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border);
}

.ledger-row > span { font-weight: 700; }
.ledger-row strong { color: var(--accent-ink); font-family: var(--font-mono); }
.ledger-row small { grid-column: 1 / -1; color: var(--fg-secondary); font-size: var(--text-body-sm); }

.vip-ledger > p {
  max-width: 64ch;
  margin-bottom: var(--space-5);
  color: var(--fg-secondary);
}

.vip-grid { border-top: var(--stroke-hairline) solid var(--border); }

.vip-grid span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-bottom: var(--stroke-hairline) solid var(--border);
}

.vip-grid b { font-weight: 500; }
.vip-grid strong { color: var(--fg-secondary); font-family: var(--font-mono); }
.vip-grid span:hover strong { color: var(--accent-ink); }

.faq-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-16) * 4)), 1fr));
  gap: var(--space-5);
  align-items: start;
}

.faq-column {
  min-width: 0;
  border-top: var(--stroke-hairline) solid var(--border);
}

.faq details {
  border-bottom: var(--stroke-hairline) solid var(--border);
  transition: background var(--dur-instant) var(--ease-out-quad);
}

.faq details:hover { background: var(--state-hover); }

.faq summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--btn-height);
  padding: var(--space-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  font-weight: 700;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  border: var(--stroke-hairline) solid var(--border-accent);
  border-radius: var(--radius-sharp);
  background: var(--state-selected);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-display-md);
  font-weight: 500;
  line-height: 1;
  transition: var(--transition-interactive);
}

.faq summary:hover::after,
.faq summary:focus-visible::after {
  border-color: var(--accent-ink);
  background: var(--accent);
  color: var(--fg-on-accent);
}

.faq details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.faq-number {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-variant-numeric: tabular-nums;
}

.faq details p {
  margin: 0 var(--space-2) var(--space-4) calc(var(--space-2) + var(--space-6));
  padding: var(--space-4) var(--space-5);
  border-left: var(--stroke-focus) solid var(--border-accent);
  background: var(--bg-raised);
  color: var(--fg-secondary);
  font-size: var(--text-body-sm);
}

.faq details[open] p {
  animation: faq-answer-in var(--dur-fast) var(--ease-cinema);
}

@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.final-cta {
  padding-block: var(--space-16);
  text-align: center;
}

.final-cta h2 {
  max-width: 16ch;
  margin: var(--space-4) auto 0;
  font-size: var(--text-display-xl);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.stagger-title span {
  display: inline-block;
  transition: opacity var(--dur-reveal) var(--ease-out-back), transform var(--dur-reveal) var(--ease-out-back);
}

.js .stagger-title:not(.is-in) span {
  opacity: 0;
  transform: translateY(var(--motion-reveal-distance));
}

.stagger-title span:nth-child(1) { transition-delay: calc(var(--dur-stagger-step) * 1); }
.stagger-title span:nth-child(2) { transition-delay: calc(var(--dur-stagger-step) * 2); }
.stagger-title span:nth-child(3) { transition-delay: calc(var(--dur-stagger-step) * 3); }
.stagger-title span:nth-child(4) { transition-delay: calc(var(--dur-stagger-step) * 4); }
.stagger-title span:nth-child(5) { transition-delay: calc(var(--dur-stagger-step) * 5); }
.stagger-title span:nth-child(6) { transition-delay: calc(var(--dur-stagger-step) * 6); }
.stagger-title span:nth-child(7) { transition-delay: calc(var(--dur-stagger-step) * 7); }
.stagger-title span:nth-child(8) { transition-delay: calc(var(--dur-stagger-step) * 8); }

.final-cta > p:not(.eyebrow) {
  max-width: 58ch;
  margin: var(--space-5) auto 0;
  color: var(--fg-secondary);
  font-size: var(--text-body-lg);
}

.final-cta .button { margin-top: var(--space-6); }

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-top: var(--stroke-hairline) solid var(--border);
}

.site-footer nav { justify-content: center; }
.footer-cta { text-decoration: underline; text-underline-offset: var(--space-1); }

.footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.js .reveal-target:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--motion-reveal-distance));
}

.reveal-target {
  transition: opacity var(--dur-reveal) var(--ease-cinema), transform var(--dur-reveal) var(--ease-cinema);
}

.reveal-target.is-in {
  opacity: 1;
  transform: translateY(0);
}

@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), 0.55); }
  50% { box-shadow: 0 0 0 var(--space-2) rgba(var(--live-rgb), 0); }
}

@keyframes projector-scan {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 0.7; }
  36% { opacity: 0; }
  100% { transform: translateX(45vw); opacity: 0; }
}

@keyframes signal {
  to { transform: scaleY(0.45); opacity: 0.5; }
}

@keyframes connection-travel {
  from { left: 0; }
  to { left: 100%; }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr; }
  .site-header nav { display: none; }
  .header-cta { justify-self: end; }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--space-12);
  }

  .hero-title { max-width: 17ch; }
  .hero-stage { width: min(100%, 680px); margin-left: auto; }

  .step { grid-template-columns: 0.28fr 0.72fr; }
  .step p { grid-column: 2; }

  .anti-bot { grid-template-columns: 1fr; }
  .anti-visual { max-width: 680px; }

  .store { grid-template-columns: 1fr; }
  .store-heading { position: static; }
  .store-ledger, .vip-ledger { grid-column: 1; }

  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer nav { display: none; }
}

@media (max-width: 700px) {
  .brand { min-width: 124px; }
  .site-header { min-height: var(--space-8); gap: var(--space-3); }
  .header-cta { min-height: var(--btn-height-sm); padding-inline: var(--space-3); }

  .hero { gap: var(--space-8); padding-block: var(--space-10); }
  .hero-title { font-size: clamp(2.65rem, 13vw, 4.3rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-stage::before { inset: var(--space-5) calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-5); }
  .schedule { inset: var(--space-10) var(--space-4) var(--space-6); }
  .schedule > span { padding-block: var(--space-2); }
  .stage-status { top: var(--space-6); left: var(--space-4); }
  .stage-time { right: var(--space-4); bottom: var(--space-5); }

  .section { padding-block: var(--space-12); }
  .section-header { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-8); }

  .step { grid-template-columns: 1fr; gap: var(--space-3); }
  .step p { grid-column: 1; }

  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-visual {
    grid-row: auto;
    max-width: calc(var(--space-16) * 2);
    margin-inline: auto;
  }

  .anti-bot { padding-block: var(--space-12); gap: var(--space-8); }
  .anti-list li { padding-left: var(--space-5); }
  .anti-list li::before { margin-left: calc(var(--space-5) * -1); }

  .time-comparison { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: var(--space-5); }

  .faq-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .faq-column + .faq-column {
    border-top: 0;
  }

  .final-cta { padding-block: var(--space-12); }
  .site-footer { padding-block: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-title .word,
  .js .reveal-target:not(.is-in),
  .js .stagger-title:not(.is-in) span {
    opacity: 1;
    transform: none;
  }

  .section-transition::before,
  .section-transition::after,
  .reveal-target.letterbox::before,
  .reveal-target.letterbox::after { display: none; }

  .faq details,
  .faq summary::after {
    transition: none;
  }

  .faq details[open] p {
    animation: none;
  }
}