/* ========================
   RESET & BASE
======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #111111;
  --bg-card:     #1a1a1a;
  --bg-raised:   #222222;
  --gold:        #F5A623;
  --gold-light:  #FFD280;
  --gold-dim:    rgba(245, 166, 35, 0.15);
  --cream:       #F5F0E8;
  --white:       #FFFFFF;
  --muted:       rgba(245, 240, 232, 0.55);
  --border:      rgba(245, 240, 232, 0.1);
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 8px 40px rgba(0,0,0,0.5);
  --ease-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ========================
   SCREENS
======================== */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100svh;
  animation: fadeIn 0.4s var(--ease-quart);
}
.screen.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================
   LANDING PAGE
======================== */
#screen-landing {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#screen-landing::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.landing-grid {
  max-width: 860px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.landing-badge {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid rgba(245,166,35,0.3);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.landing-headline {
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 22px;
}

/* The setup line is said quietly so the second line can land. */
.headline-lead {
  display: block;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--cream);
  margin-bottom: 10px;
  text-wrap: balance;
}

.headline-punch {
  display: block;
  font-size: clamp(31px, 6vw, 58px);
  font-weight: 800;
  line-height: 1.22;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.17em;
  text-wrap: balance;
}

.landing-sub {
  font-size: clamp(16px, 2.5vw, 18px);
  color: var(--muted);
  margin-bottom: 32px;
  font-weight: 400;
}

/* One sentence per row, so a sentence never breaks in the middle of a row
   on a wide screen. */
.sub-row {
  display: block;
  text-wrap: balance;
}

.landing-sub strong {
  color: var(--cream);
  font-weight: 600;
}

.landing-promise {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 36px;
  letter-spacing: 0.5px;
}

.landing-promise li { white-space: nowrap; }

.landing-social-proof {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}

/* Video slot. quiz.js fills it: the video when the file exists, a plain card until then. */
.vsl-slot {
  width: 100%;
  margin-bottom: 28px;
}

.vsl-slot[hidden] { display: none; }

.vsl-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  font: inherit;
  color: inherit;
}

button.vsl-frame { cursor: pointer; }

/* No video file yet: the frame says so in plain text. */
.vsl-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(245,166,35,0.10) 0%, transparent 60%),
    var(--bg-card);
}

.vsl-pending-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

.vsl-pending-note {
  font-size: 15px;
  text-wrap: balance;
  color: var(--muted);
}

.vsl-poster,
.vsl-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vsl-video { background: #000000; }

.vsl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(48px, 12%, 84px);
  aspect-ratio: 1;
  fill: var(--gold);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65));
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease-quart);
  pointer-events: none;
}

button.vsl-frame:hover .vsl-play {
  transform: translate(-50%, -50%) scale(1.1);
}

/* With a video: video on the left, everything else on the right, the pair
   centered on the screen. Below 900px the block stacks in reading order
   (headline, video, button) so the button stays on the first screen. */
@media (min-width: 900px) {
  #screen-landing.has-vsl { text-align: left; }

  .has-vsl .landing-grid {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "video head"
      "video action";
    column-gap: 56px;
    align-items: start;
  }

  .has-vsl .landing-head   { grid-area: head; align-self: end; }
  .has-vsl .landing-action { grid-area: action; align-self: start; }
  .has-vsl .vsl-slot       { grid-area: video; align-self: center; margin-bottom: 0; }

  .has-vsl .headline-punch { font-size: clamp(34px, 3.5vw, 46px); }
  .has-vsl .landing-promise { justify-content: flex-start; gap: 8px 20px; }
}

/* One blurred card per model, built from MODELS in quiz.js. */
.landing-cards-preview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 860px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

.preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.3px;
  text-align: center;
}

.card-blur {
  filter: blur(5px);
  user-select: none;
  opacity: 0.6;
}

/* ========================
   BUTTONS
======================== */
.btn-primary {
  display: inline-block;
  background: var(--gold);
  color: #111111;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease-quart),
    box-shadow 0.15s var(--ease-quart),
    background-color 0.15s var(--ease-quart);
  text-decoration: none;
  letter-spacing: 0.2px;
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245,166,35,0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px 8px 0;
  transition: color 0.2s var(--ease-quart);
}

.btn-back:hover { color: var(--cream); }

.btn-retake {
  min-height: 44px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 100px;
  transition: color 0.2s var(--ease-quart), border-color 0.2s var(--ease-quart);
}

.btn-retake:hover {
  color: var(--cream);
  border-color: rgba(245,240,232,0.3);
}

/* ========================
   QUIZ
======================== */
#screen-quiz {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px 80px;
}

.quiz-container {
  max-width: 640px;
  width: 100%;
  position: relative;
}

.quiz-header {
  margin-bottom: 40px;
}

.progress-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-bar-track {
  background: var(--bg-raised);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
}

/* Full width, slid left out of the track. quiz.js moves it with a transform
   so the bar never forces a layout pass. */
.progress-bar-fill {
  background: var(--gold);
  width: 100%;
  height: 100%;
  border-radius: 100px;
  transform: translateX(-90%);
  transition: transform 0.4s var(--ease-quart);
}

.progress-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.question-wrap {
  animation: slideIn 0.35s var(--ease-quart);
}

/* Off-screen copy quiz.js uses for a moment to measure the tallest question.
   Removed before the browser paints. */
.question-probe {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.question-affirmation {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  min-height: 18px;
}

.question-text {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 32px;
  line-height: 1.3;
}

/* Focus is moved here by script so the next question is announced. It is a
   heading, not a control, so it takes no ring. */
.question-text:focus,
.question-text:focus-visible,
.results-identity:focus,
.results-identity:focus-visible { outline: none; }

.answers-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--cream);
  line-height: 1.5;
  transition:
    border-color 0.2s var(--ease-quart),
    background-color 0.2s var(--ease-quart),
    color 0.2s var(--ease-quart),
    transform 0.2s var(--ease-quart);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.answer-btn:hover {
  border-color: rgba(245,166,35,0.5);
  background: var(--bg-raised);
  transform: translateX(4px);
}

.answer-btn.selected {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--white);
}

.answer-letter {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  transition:
    background-color 0.2s var(--ease-quart),
    border-color 0.2s var(--ease-quart),
    color 0.2s var(--ease-quart);
  margin-top: 1px;
}

.answer-btn:hover .answer-letter,
.answer-btn.selected .answer-letter {
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
}

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.quiz-reassurance {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  text-align: right;
}

/* ========================
   EMAIL GATE
======================== */
#screen-email {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.email-gate-container {
  max-width: 940px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.gate-badge {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid rgba(245,166,35,0.3);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.gate-headline {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 14px;
}

.gate-sub {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.65;
}

.gate-proof {
  font-size: 14px;
  color: var(--cream);
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--bg-raised);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

#email-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* Bot trap. Not shown, not announced, not reachable by Tab. */
.field-trap { display: none; }

#email-form input {
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--cream);
  transition: border-color 0.2s var(--ease-quart);
}

#email-form input:focus {
  border-color: rgba(245,166,35,0.5);
}

#email-form .btn-primary {
  align-self: flex-start;
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

#email-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.gate-error {
  font-size: 14px;
  color: var(--cream);
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(200,60,40,0.12);
  border-left: 3px solid #c83c28;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.6;
}

#gate-skip {
  margin-top: 10px;
}

.gate-disclaimer {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* Result tease card: a tall card that shows the shape of the report. */
.gate-right {
  display: flex;
  justify-content: center;
}

.result-tease {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 38px 30px 28px;
  text-align: center;
  width: 100%;
  max-width: 350px;
  min-height: 468px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.result-tease::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.tease-label {
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.tease-model {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 8px;
}

.tease-type {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 24px;
}

.tease-rows {
  display: grid;
  gap: 14px;
  padding-top: 22px;
  margin-bottom: 26px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.tease-row dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.4;
  margin-bottom: 3px;
}

.tease-row dd {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.blurred {
  filter: blur(7px);
  user-select: none;
}

.tease-row .blurred { filter: blur(5px); }

.tease-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
  color: var(--muted);
}

.tease-lock-icon {
  flex-shrink: 0;
  color: var(--gold);
}

/* ========================
   RESULTS PAGE
======================== */
#screen-results {
  flex-direction: column;
  align-items: center;
  padding: 0 24px 80px;
}

.results-container {
  max-width: 700px;
  width: 100%;
}

.results-hero {
  text-align: center;
  padding: 70px 0 50px;
  position: relative;
}

.results-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: var(--border);
}

.results-badge {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid rgba(245,166,35,0.3);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.results-identity {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 8px;
}

.results-model {
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 20px;
}

.results-echo {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* Sections */
.results-section {
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
}

.section-body {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
}

.truth-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px;
  margin: 44px 0;
  border-bottom: 1px solid var(--border);
}

.truth-section .section-title {
  color: var(--gold);
}

.learn-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.learn-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}

.learn-list li::before {
  content: '→';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* First dollar: a rough range, then what the first payment looks like. */
.timeline-section {
  text-align: center;
}

.timeline-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 36px;
}

.timeline-stat {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--muted);
}

.timeline-stat-gold {
  color: var(--gold);
}

.timeline-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-first {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  text-wrap: pretty;
}

.timeline-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.age-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* Story */
.story-section {
  border-bottom: none;
  padding-bottom: 0;
}

.story-text {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 20px;
}

/* CTA block */
.results-cta-block {
  text-align: center;
  padding: 60px 0 0;
}

.cta-headline {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
}

.cta-sub {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.btn-cta {
  font-size: 17px;
  padding: 18px 48px;
}

.results-social-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* FAQ */
.faq-section {
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
}

.faq-item {
  margin-bottom: 20px;
}

.faq-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.faq-a {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

/* Secondary CTA */
.results-cta-secondary {
  padding: 60px 0 40px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

.retake-wrap {
  text-align: center;
  padding: 20px 0 40px;
}

/* ========================
   RESPONSIVE
======================== */
/* Sentences a person reads are 16px on a phone or a tablet. Labels stay small. */
@media (max-width: 900px) {
  .landing-social-proof,
  .quiz-reassurance,
  .gate-sub,
  .gate-proof,
  .gate-error,
  .gate-disclaimer,
  .section-body,
  .learn-list li,
  .faq-q,
  .faq-a,
  .btn-back,
  .btn-retake { font-size: 16px; }
}

@media (max-width: 700px) {
  /* Start at the top on a phone, so the button sits as high as it can. */
  #screen-landing {
    justify-content: flex-start;
    padding: 28px 24px 56px;
  }
  .landing-badge { margin-bottom: 18px; }
  .landing-headline { margin-bottom: 16px; }
  .headline-lead { margin-bottom: 8px; }
  .landing-sub { margin-bottom: 20px; }
  .vsl-slot { margin-bottom: 20px; }
  .landing-promise { margin-bottom: 20px; }
  .landing-cards-preview { margin-top: 36px; }

  /* Gate: the match card goes first and gets shorter, so the form is close. */
  #screen-email {
    justify-content: flex-start;
    padding: 28px 24px 48px;
  }
  .email-gate-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .gate-right { order: -1; }
  .result-tease {
    max-width: none;
    min-height: 0;
    padding: 26px 20px 20px;
  }
  .tease-label { margin-bottom: 10px; }
  .tease-model { font-size: 22px; margin-bottom: 4px; }
  .tease-type { font-size: 14px; margin-bottom: 16px; }
  .tease-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding-top: 16px;
    margin-bottom: 16px;
  }
  .gate-badge { margin-bottom: 14px; }
  .gate-sub { margin-bottom: 16px; }
  .gate-proof { margin-bottom: 20px; }
}

@media (max-width: 900px) {
  .landing-cards-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .landing-cards-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .preview-card { padding: 12px 6px; font-size: 12px; }
}

@media (max-width: 480px) {
  .landing-promise { gap: 6px 14px; font-size: 12px; }
  .answer-btn { padding: 14px 16px; }
  .timeline-inner { padding: 22px 20px; }
  .timeline-stat { font-size: 24px; }
  .results-cta-block { padding: 40px 0 0; }
  .results-social-links .btn-cta { width: 100%; text-align: center; }
  .truth-section { padding: 20px; }

  /* Phone gate: the card keeps the blurred match and the lock, and drops its
     four rows, so the first field is on the first screen. */
  #screen-email { padding-top: 20px; }
  .email-gate-container { gap: 20px; }
  .result-tease { padding: 20px 20px 16px; }
  .tease-rows { display: none; }
  .tease-type { margin-bottom: 12px; }
  .gate-headline { margin-bottom: 10px; }
  .gate-sub { margin-bottom: 14px; }
  .gate-proof { margin-bottom: 16px; padding: 12px 16px; }
}

/* Every animation and transition has an off switch. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .btn-primary:hover,
  .answer-btn:hover { transform: none; }

  button.vsl-frame:hover .vsl-play { transform: translate(-50%, -50%); }
}

/* Set here rather than as a style attribute in the markup, so the page's
   Content-Security-Policy can refuse inline styles. JS overrides it once the
   first question renders. */
#btn-back { visibility: hidden; }