/* ============================================================
   SHARPER — styles.css  (Addendum 3 redesign)
   Single-screen state machine: dare → test → verdict → pitch.
   Mobile-first. No framework. Calm canvas, loud reward moments.
============================================================ */

/* ---------- Numerals: every digit in a straight, Arial-like face ----------
   These faces re-declare the page's two families (Fraunces + Inter) but ONLY
   for the digit range 0–9, pointing them at a local grotesque (Arial). Because
   this file loads after the Google Fonts <link>, the browser prefers these
   faces for digits everywhere — so all numbers render in the straighter font
   with no markup changes, while letters keep their original typeface.
   Split into two weight bands so bold numbers (e.g. prices) get real Arial Bold. */
@font-face {
  font-family: "Fraunces";
  font-weight: 100 600;
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  unicode-range: U+0024, U+0030-0039;
}
@font-face {
  font-family: "Fraunces";
  font-weight: 601 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Arial");
  unicode-range: U+0024, U+0030-0039;
}
@font-face {
  font-family: "Inter";
  font-weight: 100 600;
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  unicode-range: U+0024, U+0030-0039;
}
@font-face {
  font-family: "Inter";
  font-weight: 601 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Arial");
  unicode-range: U+0024, U+0030-0039;
}

/* ---------- Tokens ---------- */
:root {
  --bg:           #FAF8F4;
  --text:         #1A1A1A;
  --muted:        #555555;
  --accent:       #2D4A3E;
  --accent-2:     #3E6B57;
  --accent-3:     #1F3429;
  --gray-brain:   #9A9A9A;
  --gray-brain-2: #B8A8A8;
  --pink-brain:   #F2A6B3;
  --pink-bright:  #FFB6C1;
  --error-red:    #E04F4F;

  /* The one bright reward green. Used EXCLUSIVELY for success payoff. */
  --reward:       #083C1E;
  --reward-soft:  rgba(8,60,30,0.18);
  --reward-glow:  rgba(8,60,30,0.40);

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 48px;
  --s5: 80px;
  --s6: 120px;

  --container: 1100px;
  --measure:   640px;

  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-io:      ease-in-out;

  --radius-card:  20px;
  --radius-phone: 12px;
  --radius-input: 12px;

  --state-transition: 360ms var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Stop iOS Safari from auto-inflating text inside the phone mockups —
     desktop renders fine, then real iPhones blow the card layout apart. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
input { font-family: inherit; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }

/* Visually hidden */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s3);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(36px, 7vw, 56px); line-height: 1.05; font-weight: 700; }
h2 { font-size: clamp(28px, 4.5vw, 36px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.3; margin: 0 0 var(--s1); }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 var(--s2);
}
.body {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  max-width: var(--measure);
  margin: 0 auto;
}
@media (min-width: 768px) {
  body { font-size: 17px; }
}


/* ============================================================
   THE STAGE — single-screen state machine
============================================================ */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s3);
  position: relative;
  text-align: center;
}

.state {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--state-transition),
    transform var(--state-transition);
  will-change: opacity, transform;
}
.state[hidden] { display: none !important; }
.state.is-active { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .state { transition: none; transform: none; }
}


/* ============================================================
   BRAIN — gradual tier system. Body carries .brain-tier-N
   (0..4). All cloned brain instances respond uniformly.
============================================================ */
.brain-slot {
  width: 100%;
  height: 100%;
  display: block;
}
.brain-slot .brain-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 600ms var(--ease);
}

/* Base brain markup styling (shared) */
.brain-shape {
  fill: var(--pink-brain);
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill 600ms var(--ease), stroke 600ms var(--ease);
}
.brain-divide,
.brain-fold {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.65;
  transition: opacity 500ms var(--ease);
}
.brain-eye {
  fill: var(--text);
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
  transform-origin: center;
  transform-box: fill-box;
}
.brain-lid {
  fill: var(--pink-brain);
  stroke: var(--text);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 500ms var(--ease), fill 600ms var(--ease);
}
.brain-mouth path {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.brain-streams path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.brain-streams--red path  { stroke: var(--error-red); }
.brain-streams--green path { stroke: var(--accent); stroke-width: 3.5; }
.brain-dumbbell {
  opacity: 0;
  transition: opacity 500ms var(--ease) 100ms;
}
.brain-dumbbell rect { fill: var(--text); }
.brain-sparkle {
  opacity: 0;
  transform-origin: 160px 38px;
  transition: opacity 400ms var(--ease) 200ms;
}
.brain-sparkle path { fill: var(--accent); }

/* ---- TIER 0 (very fried) ---- */
.brain-tier-0 .brain-svg     { filter: saturate(0.3) brightness(0.94); }
.brain-tier-0 .brain-shape   { fill: var(--gray-brain); }
.brain-tier-0 .brain-lid     { opacity: 1; fill: var(--gray-brain); transform: translateY(2px); }
.brain-tier-0 .brain-eye     { transform: scaleY(0.5); opacity: 0.65; }
.brain-tier-0 .brain-mouth-frown { opacity: 1; }
.brain-tier-0 .brain-streams--red path { opacity: 1; animation: streamFlow 1.6s linear infinite; }
.brain-tier-0 .brain-divide,
.brain-tier-0 .brain-fold    { opacity: 0.4; }

/* ---- TIER 1 (fried) ---- */
.brain-tier-1 .brain-svg     { filter: saturate(0.55) brightness(0.98); }
.brain-tier-1 .brain-shape   { fill: var(--gray-brain-2); }
.brain-tier-1 .brain-lid     { opacity: 0.55; fill: var(--gray-brain-2); }
.brain-tier-1 .brain-eye     { transform: scaleY(0.75); opacity: 0.85; }
.brain-tier-1 .brain-mouth-frown { opacity: 0.7; }
.brain-tier-1 .brain-streams--red path { opacity: 0.7; animation: streamFlow 1.8s linear infinite; }

/* ---- TIER 2 (neutral / baseline) ---- */
.brain-tier-2 .brain-svg     { filter: none; }
.brain-tier-2 .brain-shape   { fill: var(--pink-brain); }
.brain-tier-2 .brain-mouth-flat { opacity: 1; }
.brain-tier-2 .brain-streams--red path { opacity: 0.18; }

/* ---- TIER 3 (sharp) ---- */
.brain-tier-3 .brain-svg     { filter: saturate(1.15) brightness(1.04); }
.brain-tier-3 .brain-shape   { fill: var(--pink-bright); }
.brain-tier-3 .brain-eye     { transform: scaleY(1); opacity: 1; }
.brain-tier-3 .brain-mouth-smile { opacity: 0.85; }
.brain-tier-3 .brain-streams--green path { opacity: 0.85; stroke: var(--accent); }

/* ---- TIER 4 (very sharp / certified) ---- */
.brain-tier-4 .brain-svg {
  filter:
    saturate(1.3)
    brightness(1.08)
    drop-shadow(0 0 14px var(--reward-glow));
}
.brain-tier-4 .brain-shape   { fill: var(--pink-bright); }
.brain-tier-4 .brain-eye     { transform: scaleY(1); opacity: 1; }
.brain-tier-4 .brain-mouth-smile { opacity: 1; }
.brain-tier-4 .brain-streams--green path { opacity: 1; stroke: var(--reward); }
.brain-tier-4 .brain-dumbbell { opacity: 1; }
.brain-tier-4 .brain-sparkle  { opacity: 1; }
.brain-tier-4 .brain-sparkle path { fill: var(--reward); }

/* Reduced-motion: snap, don't morph */
@media (prefers-reduced-motion: reduce) {
  .brain-svg,
  .brain-shape,
  .brain-eye,
  .brain-lid,
  .brain-mouth path,
  .brain-streams path,
  .brain-dumbbell,
  .brain-sparkle {
    transition: none !important;
  }
  .brain-tier-0 .brain-streams--red path,
  .brain-tier-1 .brain-streams--red path {
    animation: none !important;
  }
}

/* Idle blink (only in calm / non-fried tiers) */
@media (prefers-reduced-motion: no-preference) {
  .brain-tier-2 .brain-eye,
  .brain-tier-3 .brain-eye,
  .brain-tier-4 .brain-eye {
    animation: brainBlink 5.2s steps(1, end) infinite;
  }
  .brain-tier-4 .brain-sparkle {
    animation: sparkle 2.4s var(--ease) infinite;
  }
  .brain-tier-2 .brain-body,
  .brain-tier-3 .brain-body,
  .brain-tier-4 .brain-body {
    animation: brainBob 3.6s var(--ease) infinite;
  }
}

/* Wilt / pop one-shots applied by JS on answer */
.brain-slot.is-wilt .brain-body  { animation: brainWilt 400ms var(--ease); }
.brain-slot.is-pop  .brain-body  { animation: brainPop 480ms var(--ease-out-back); }

@keyframes brainBlink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(0.1); }
}
@keyframes brainBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes streamFlow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -20; }
}
@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1)   rotate(0deg); }
  50%      { opacity: 0.4; transform: scale(0.7) rotate(20deg); }
}
@keyframes brainWilt {
  0%   { transform: translateY(0)   scale(1); }
  50%  { transform: translateY(4px) scale(0.97); }
  100% { transform: translateY(0)   scale(1); }
}
@keyframes brainPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}


/* ============================================================
   STATE 0 — DARE
============================================================ */
.dare-brain {
  position: relative;
  width: 220px;
  height: 240px;
  margin: 0 auto var(--s3);
}
.dare-brain .brain-slot {
  width: 180px;
  height: 180px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .dare-brain { width: 260px; height: 280px; }
  .dare-brain .brain-slot { width: 220px; height: 220px; }
}

/* Doom-scroll phone tucked under the brain's lower edge */
.doom-phone {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 58px;
  height: 96px;
  background: var(--text);
  border-radius: var(--radius-phone);
  padding: 4px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.4);
}
.doom-phone-screen {
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  border-radius: 7px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.doom-phone-line {
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #444 0%, #2c2c2c 100%);
  border-radius: 2px;
  opacity: 0.7;
}
.doom-phone-line:nth-child(2) { width: 80%; opacity: 0.5; }
.doom-phone-line:nth-child(3) { width: 65%; opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .doom-phone-line { animation: doomFeed 3.2s linear infinite; }
  .doom-phone-line:nth-child(2) { animation-delay: 0.6s; }
  .doom-phone-line:nth-child(3) { animation-delay: 1.2s; }
}
@keyframes doomFeed {
  0%   { transform: translateY(0);    opacity: 0.7; }
  100% { transform: translateY(60px); opacity: 0; }
}
.doom-thumb {
  position: absolute;
  right: -10px;
  bottom: 18px;
  width: 22px;
  height: 22px;
  background: #E2C7B5;
  border: 1.5px solid var(--text);
  border-radius: 60% 60% 30% 30% / 80% 80% 20% 20%;
  transform-origin: bottom right;
}
@media (prefers-reduced-motion: no-preference) {
  .doom-thumb { animation: doomFlick 2.6s ease-in-out infinite; }
}
@keyframes doomFlick {
  0%, 100% { transform: translateY(-8px) rotate(8deg); }
  45%      { transform: translateY(14px) rotate(-4deg); }
  55%      { transform: translateY(14px) rotate(-4deg); }
}

.dare-lead {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 var(--s2);
  text-transform: uppercase;
  font-weight: 600;
}
.dare-lead strong { color: var(--text); font-weight: 700; }

.dare-headline {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 8.5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0 0 var(--s4);
}

.dare-micro {
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--muted);
}
.dare-skip {
  margin: var(--s3) 0 0;
  font-size: 13px;
}
.dare-skip a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dare-skip a:hover { color: var(--accent); }


/* ============================================================
   STATE 1 — TEST
============================================================ */
.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 420px;
  margin: 0 auto var(--s3);
  width: 100%;
}

.test-progress {
  display: flex;
  gap: 8px;
}
.test-progress .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #DCD7CC;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.test-progress .dot.is-active {
  background: var(--accent);
  transform: scale(1.2);
}
.test-progress .dot.is-correct { background: var(--reward); }
.test-progress .dot.is-wrong   { background: var(--error-red); opacity: 0.6; }

/* Timer ring */
.timer-ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.timer-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.timer-track {
  fill: none;
  stroke: #ECE7DC;
  stroke-width: 3;
}
.timer-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 113.1;        /* 2 * PI * 18 ≈ 113.1 */
  stroke-dashoffset: 0;
  transition: stroke 200ms var(--ease);
}
.timer-ring.is-running .timer-progress {
  animation: timerCount linear forwards;
  animation-duration: var(--timer-duration, 7s);
}
.timer-ring.is-warning .timer-progress { stroke: var(--error-red); }
.timer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.02em;
}
@keyframes timerCount {
  to { stroke-dashoffset: 113.1; }
}
@media (prefers-reduced-motion: reduce) {
  .timer-ring.is-running .timer-progress { animation: none; }
}

.test-brain {
  width: 130px;
  height: 130px;
  margin: 0 auto var(--s1);
}

.brain-says {
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-style: italic;
  color: var(--muted);
  margin: var(--s1) 0 var(--s2);
  min-height: 1.6em;
  letter-spacing: -0.01em;
}
.brain-says.is-correct { color: var(--reward); font-style: normal; font-weight: 600; }
.brain-says.is-wrong   { color: var(--text);   font-style: normal; }
.brain-says.is-timeout { color: var(--muted);  font-style: normal; }

.puzzle-stage {
  position: relative;
  background: #fff;
  border: 1px solid #ECE7DC;
  border-radius: var(--radius-card);
  padding: var(--s3);
  max-width: 420px;
  margin: var(--s2) auto 0;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.10);
}
.puzzle-q {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 var(--s2);
  font-weight: 700;
}
.puzzle-seq {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s3);
  line-height: 1.1;
}
.puzzle-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.puzzle-chip {
  height: 56px;
  border: 1.5px solid #DCD7CC;
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    transform 120ms var(--ease),
    box-shadow 200ms var(--ease);
}
.puzzle-chip:hover { border-color: var(--accent); }
.puzzle-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,74,62,0.18);
}
.puzzle-chip:active { transform: scale(0.96); }
.puzzle-chip[disabled] { cursor: default; }
.puzzle-chip.is-reward {
  background: var(--reward);
  border-color: var(--reward);
  color: #fff;
  box-shadow: 0 0 0 6px var(--reward-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .puzzle-chip.is-reward { animation: chipRewardPop 520ms var(--ease-out-back); }
}
.puzzle-chip.is-wrong {
  border-color: var(--error-red);
  color: var(--error-red);
  background: rgba(224,79,79,0.06);
}
.puzzle-chip.is-timeout-correct {
  background: rgba(8,60,30,0.12);
  border-color: var(--reward);
  color: var(--reward);
}
@keyframes chipRewardPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.plus-one {
  position: absolute;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  font-family: "Fraunces", serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--reward);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .plus-one.is-showing { animation: plusOneFloat 900ms var(--ease) forwards; }
}
@keyframes plusOneFloat {
  0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.9); }
  20%  { opacity: 1; transform: translate(-50%, -8px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}


/* ============================================================
   STATE 2 — VERDICT (the shareable artifact)
============================================================ */
.score-card {
  background: #fff;
  border: 1px solid #ECE7DC;
  border-radius: 24px;
  padding: var(--s3) var(--s3) var(--s2);
  max-width: 360px;
  margin: 0 auto var(--s3);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.20);
  text-align: center;
}
.score-brand {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 var(--s1);
}
.score-brain {
  width: 130px;
  height: 130px;
  margin: var(--s1) auto var(--s2);
}
.score-result {
  font-family: "Fraunces", serif;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s1);
  color: var(--text);
  line-height: 1;
}
.score-result .score-total {
  color: var(--muted);
  font-weight: 600;
  font-size: 28px;
}
.score-label {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.score-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 var(--s3);
  line-height: 1.4;
}
.score-footer {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0;
  padding-top: var(--s2);
  border-top: 1px solid #ECE7DC;
}
.score-footer strong { color: var(--text); font-weight: 700; }

.verdict-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  max-width: 420px;
  margin: 0 auto;
}

.convert-panel {
  margin: var(--s3) auto 0;
  max-width: 420px;
  text-align: left;
  animation: fadeUp 360ms var(--ease);
}
.convert-panel[hidden] { display: none; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.convert-headline {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
  letter-spacing: -0.01em;
}
.convert-sub {
  margin: 0 0 var(--s2);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.toast {
  margin: var(--s2) 0 0;
  padding: 10px 16px;
  display: inline-block;
  background: var(--text);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  min-height: 0;
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.verdict-restart {
  margin: var(--s3) 0 0;
  font-size: 13px;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: inherit;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent); }


/* ============================================================
   FORM (shared by convert-panel + pitch CTA)
============================================================ */
.signup-form { margin: 0; }
.signup-row {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
@media (min-width: 560px) {
  .signup-row { flex-direction: row; }
}

.signup-input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 var(--s3);
  border: 1px solid #E2DCD0;
  border-radius: var(--radius-input);
  background: #FFFFFF;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.signup-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,74,62,0.12);
}
.signup-input::placeholder { color: #B0ADA4; font-weight: 400; }

.form-micro {
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.form-error {
  margin: var(--s1) 0 0;
  color: var(--error-red);
  font-size: 13px;
  min-height: 18px;
  text-align: center;
}
.form-success {
  margin: var(--s2) 0 0;
  color: var(--reward);
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
  text-align: center;
}


/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s3);
  height: 52px;
  border-radius: var(--radius-input);
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 150ms var(--ease),
    box-shadow 200ms var(--ease),
    background 200ms var(--ease),
    color 200ms var(--ease);
  text-decoration: none;
}
.btn--primary {
  background: var(--accent-3);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(31,52,41,0.45);
}
.btn--primary:hover {
  transform: translateY(-1px);
  background: var(--accent);
  box-shadow: 0 10px 22px -10px rgba(31,52,41,0.55);
}
.btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
}
.btn--primary:active { transform: scale(0.97); }
.btn--primary[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn--ghost:hover { background: rgba(45,74,62,0.06); }
.btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45,74,62,0.18);
}

.btn--xl {
  height: 60px;
  padding: 0 var(--s4);
  font-size: 17px;
}
.btn--lg {
  height: 56px;
  padding: 0 var(--s3);
}


/* ============================================================
   STATE 3 — PITCH (scrollable, condensed)
============================================================ */
.pitch {
  background: var(--bg);
  padding: var(--s6) 0 var(--s5);
  border-top: 1px solid #ECE7DC;
}
.pitch-block {
  max-width: 640px;
  margin: 0 auto var(--s5);
  padding: 0 var(--s3);
  text-align: center;
}
.pitch-block .body { margin-top: var(--s2); }
/* Small scarcity/launch reminder under the "WHAT IT IS" paragraph. */
.pitch-micro {
  margin: var(--s3) 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

/* Arc — fried -> sharp side-by-side */
.arc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  align-items: center;
  margin: var(--s3) 0 0;
}
@media (min-width: 560px) {
  .arc { grid-template-columns: 1fr auto 1fr; }
}
.arc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.arc-step p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  max-width: 220px;
  line-height: 1.5;
}
.arc-brain {
  width: 120px;
  height: 120px;
}
/* The arc brains are forced into specific tiers visually, independent
   of body tier — use scoped class to override. */
.arc-brain--fried .brain-svg     { filter: saturate(0.3) brightness(0.94); }
.arc-brain--fried .brain-shape   { fill: var(--gray-brain); }
.arc-brain--fried .brain-lid     { opacity: 1; fill: var(--gray-brain); }
.arc-brain--fried .brain-eye     { transform: scaleY(0.5); opacity: 0.65; }
.arc-brain--fried .brain-mouth-frown { opacity: 1; }
.arc-brain--fried .brain-streams--red path { opacity: 1; }

.arc-brain--sharp .brain-svg     { filter: saturate(1.3) brightness(1.08) drop-shadow(0 0 12px var(--reward-glow)); }
.arc-brain--sharp .brain-shape   { fill: var(--pink-bright); }
.arc-brain--sharp .brain-mouth-smile { opacity: 1; }
.arc-brain--sharp .brain-streams--green path { opacity: 1; stroke: var(--reward); }
.arc-brain--sharp .brain-sparkle { opacity: 1; }
.arc-brain--sharp .brain-sparkle path { fill: var(--reward); }
.arc-brain--sharp .brain-dumbbell { opacity: 1; }

.arc-arrow {
  font-family: "Fraunces", serif;
  font-size: 32px;
  color: var(--muted);
  text-align: center;
}

/* Founder identity */
.founder-identity {
  margin: 0 0 var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.founder-identity-line {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.founder-confirm-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--error-red);
  background: rgba(224,79,79,0.08);
  border: 1px solid rgba(224,79,79,0.25);
  border-radius: 999px;
}

/* FAQ */
.faq-list {
  list-style: none;
  padding: 0;
  margin: var(--s3) 0 0;
  border-top: 1px solid #E6E2D8;
  text-align: left;
}
.faq-item { border-bottom: 1px solid #E6E2D8; }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s3) 0;
  text-align: left;
  font-family: "Fraunces", serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: -0.01em;
  transition: color 200ms var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 250ms var(--ease-io);
  line-height: 1;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms var(--ease-io);
}
.faq-a-inner { padding: 0 0 var(--s3); }
.faq-a p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* CTA + counter */
/* ============================================================
   THE DIFFERENCE — Social media vs Moozgy comparison section
   Desktop (>=768): 2-column grid with shared headers.
   Mobile (<768):   5 self-contained paired cards (top/bottom).
============================================================ */
.pitch-block--diff {
  /* Wider than the standard pitch-block measure so the grid breathes. */
  max-width: 820px;
}
.pitch-block--diff .eyebrow {
  text-align: center;
}
.diff-lead {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto var(--s4);
  letter-spacing: -0.005em;
}

.diff {
  /* Container for the headers + 5 rows */
}

/* ---- DESKTOP: aligned two-column grid ---- */
@media (min-width: 768px) {
  .diff-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin-bottom: var(--s3);
    align-items: end;
  }
  .diff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    padding: var(--s2) 0;
    border-top: 1px solid var(--line);
    position: relative;
    align-items: center;
  }
  .diff-row:last-child { border-bottom: 1px solid var(--line); }
  .diff-vs        { display: none; }
  .diff-card-side { display: none; }
  /* Subtle vertical divider between columns (desktop) */
  .diff-row::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--line);
  }
}

/* ---- Column headers (desktop) ---- */
.diff-col-head {
  text-align: center;
}
.diff-head-brain {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s1);
}
.diff-col-title {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.diff-col-head--bad  .diff-col-title { color: var(--muted); }
.diff-col-head--good .diff-col-title { color: var(--accent); }

/* Static brain poses for the column headers — independent of the
   body's tier cascade. Override via scoped class on the slot host. */
.diff-head-brain--fried .brain-svg     { filter: saturate(0.25) brightness(0.95); }
.diff-head-brain--fried .brain-shape   { fill: var(--gray-brain); }
.diff-head-brain--fried .brain-lid     { opacity: 1; fill: var(--gray-brain); }
.diff-head-brain--fried .brain-eye     { transform: scaleY(0.5); opacity: 0.6; }
.diff-head-brain--fried .brain-mouth-frown { opacity: 1; }
.diff-head-brain--fried .brain-mouth-flat,
.diff-head-brain--fried .brain-mouth-smile { opacity: 0; }
.diff-head-brain--fried .brain-streams--red path { opacity: 1; animation: streamFlow 1.8s linear infinite; }

.diff-head-brain--sharp .brain-svg {
  filter: saturate(1.25) brightness(1.06) drop-shadow(0 0 10px var(--reward-glow));
}
.diff-head-brain--sharp .brain-shape       { fill: var(--pink-bright); }
.diff-head-brain--sharp .brain-mouth-smile { opacity: 1; }
.diff-head-brain--sharp .brain-mouth-frown,
.diff-head-brain--sharp .brain-mouth-flat  { opacity: 0; }
.diff-head-brain--sharp .brain-streams--green path { opacity: 1; stroke: var(--reward); }
.diff-head-brain--sharp .brain-sparkle     { opacity: 1; }
.diff-head-brain--sharp .brain-sparkle path { fill: var(--reward); }

/* ============================================================
   THE DIFFERENCE — column-header phones
   Left: a dark "no information feed" phone.
   Right: a bright Moozgy phone mid-solve with streak.
============================================================ */
.diff-phone {
  width: 130px;
  margin: var(--s2) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
}
.diff-phone-screen {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 22px;
  padding: 14px 10px;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.30);
  border: 4px solid var(--text);
  overflow: hidden;
}
.diff-phone-tag {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.diff-phone-tag--bad  { color: var(--gray-brain); }
.diff-phone-tag--good { color: var(--accent); }

/* LEFT — dark feed lines (no information). */
.diff-phone-screen--dead {
  background: linear-gradient(180deg, #1c1c1c, #0e0e0e);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 18px;
}
.diff-phone-line {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, #3a3a3a, #1c1c1c);
  border-radius: 4px;
  opacity: 0.75;
}
.diff-phone-line:nth-child(2) { width: 80%; opacity: 0.6; }
.diff-phone-line:nth-child(3) { width: 65%; opacity: 0.5; }
.diff-phone-line:nth-child(4) { width: 90%; opacity: 0.7; }
.diff-phone-line:nth-child(5) { width: 55%; opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  .diff-phone-line              { animation: diffFeedFlow 5s linear infinite; }
  .diff-phone-line:nth-child(2) { animation-delay: 0.6s; }
  .diff-phone-line:nth-child(3) { animation-delay: 1.2s; }
  .diff-phone-line:nth-child(4) { animation-delay: 1.8s; }
  .diff-phone-line:nth-child(5) { animation-delay: 2.4s; }
}
@keyframes diffFeedFlow {
  0%   { transform: translateY(0);    opacity: 0.7; }
  100% { transform: translateY(180px); opacity: 0;   }
}

/* RIGHT — bright Moozgy card mid-solve. */
.diff-phone-screen--alive {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diff-phone-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
}
.diff-phone-brand {
  font-family: "Fraunces", serif;
  letter-spacing: -0.005em;
  color: var(--text);
}
.diff-phone-streak strong { color: var(--text); }

.diff-phone-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  box-shadow: 0 4px 12px -8px rgba(0,0,0,0.10);
}
.diff-phone-q {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.diff-phone-seq {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.diff-phone-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: auto;
}
.diff-phone-chip {
  padding: 4px 2px;
  border: 1.2px solid var(--line);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  background: #fff;
}
.diff-phone-chip--correct {
  background: var(--reward);
  border-color: var(--reward);
  color: #fff;
  box-shadow: 0 0 0 3px var(--reward-soft);
}
.diff-phone-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--reward);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Cells (text + color contrast does the persuasion) ---- */
.diff-cell {
  padding: 4px 0;
}
.diff-cell p {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.diff-cell--bad p {
  color: var(--gray-brain);          /* desaturated, dead feel */
  filter: saturate(0);               /* belt-and-suspenders */
}
.diff-cell--good p {
  color: var(--text);                /* alive, full contrast */
  font-weight: 600;
}
/* Strongest row — row 1 right side gets a subtle --reward touch */
.diff-cell--lead p {
  color: var(--reward);
  font-weight: 700;
}

/* ---- MOBILE: keep the column-header phones side-by-side at the top,
       then render 5 self-contained paired cards below them. ---- */
@media (max-width: 767.98px) {
  .diff-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    margin-bottom: var(--s4);
  }
  .diff-headers .diff-head-brain { width: 48px; height: 48px; }
  .diff-headers .diff-col-title  { font-size: 16px; }
  .diff-headers .diff-phone      { width: 110px; }
  .diff-headers .diff-phone-screen { height: 170px; padding: 12px 8px; border-radius: 18px; }
  .diff-headers .diff-phone-seq  { font-size: 12px; }
  .diff-headers .diff-phone-chip { font-size: 9px; padding: 3px 1px; }
  .diff-headers .diff-phone-tag  { font-size: 9px; letter-spacing: 0.12em; }

  .diff-row {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--s3);
    margin-bottom: var(--s2);
    position: relative;
  }
  .diff-cell {
    width: 100%;
    padding: 0;
  }
  .diff-card-side {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .diff-cell--bad  .diff-card-side { color: var(--error-red); opacity: 0.75; }
  .diff-cell--good .diff-card-side { color: var(--accent); }
  .diff-cell--bad  { margin-bottom: var(--s2); }
  .diff-cell--good { margin-top: var(--s2); }
  .diff-vs {
    display: block;
    text-align: center;
    margin: var(--s1) 0;
    font-family: "Fraunces", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
  }
  .diff-vs::before,
  .diff-vs::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: var(--line);
  }
  .diff-vs::before { left: 0; }
  .diff-vs::after  { right: 0; }
  .diff-cell p { font-size: 16px; }
}

/* ---- Reveal: each row fades up; right side lags ~60ms after left ---- */
@media (prefers-reduced-motion: no-preference) {
  .diff-row.reveal .diff-cell--good {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity   var(--state-transition) 60ms,
      transform var(--state-transition) 60ms;
  }
  .diff-row.reveal.visible .diff-cell--good {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   THE SHOWDOWN — two-phone replacement for WHAT IT IS / ARC / DIFF.
   Big phones, Moozgy mid-solve (left) vs social-media feed (right).
   The contrast is the argument.
============================================================ */
.pitch-block--showdown {
  max-width: 880px;
  text-align: center;
}
.pitch-block--showdown h2 {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.showdown-lead {
  /* Match the site's standard lead-paragraph treatment (.body): Inter sans,
     muted — headings are the serif, supporting copy is not. */
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto var(--s4);
}

.showdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  justify-content: center;
  justify-items: center;
  gap: clamp(12px, 4vw, var(--s4));
  margin-bottom: var(--s4);
}
.showdown-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 280px;
}
.showdown-vs {
  align-self: center;
  font-family: "Fraunces", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.showdown-label {
  margin: var(--s2) 0 var(--s1);
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.showdown-side--bad  .showdown-label { color: var(--muted); }
.showdown-side--good .showdown-label { color: var(--accent); }
.showdown-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 220px;
}
.showdown-side--good .showdown-caption { color: var(--text); }

.showdown-brain-effect {
  width: 100%;
  min-height: 116px;
  margin: 0 0 var(--s2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.showdown-brain-effect::after {
  content: "";
  width: 2px;
  height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  opacity: 0.8;
}
.showdown-brain-effect--thriving::after {
  background: linear-gradient(180deg, var(--reward), transparent);
  box-shadow: 0 0 12px var(--reward-glow);
}
.showdown-brain-effect--drained::after {
  background: linear-gradient(180deg, var(--error-red), transparent);
  box-shadow: 0 0 12px rgba(224,79,79,0.28);
}
.showdown-effect-brain {
  width: 94px;
  height: 94px;
  position: relative;
  z-index: 1;
}
.showdown-effect-brain--thriving .brain-svg {
  filter: saturate(1.3) brightness(1.08) drop-shadow(0 0 14px var(--reward-glow));
}
.showdown-effect-brain--thriving .brain-shape { fill: var(--pink-bright); }
.showdown-effect-brain--thriving .brain-eye {
  opacity: 1;
  transform: scaleY(1);
}
.showdown-effect-brain--thriving .brain-mouth-smile { opacity: 1; }
.showdown-effect-brain--thriving .brain-mouth-flat,
.showdown-effect-brain--thriving .brain-mouth-frown { opacity: 0; }
.showdown-effect-brain--thriving .brain-streams--green path {
  opacity: 1;
  stroke: var(--reward);
}
.showdown-effect-brain--thriving .brain-streams--red path { opacity: 0; }
.showdown-effect-brain--thriving .brain-sparkle,
.showdown-effect-brain--thriving .brain-dumbbell { opacity: 1; }
.showdown-effect-brain--thriving .brain-sparkle path { fill: var(--reward); }

.showdown-effect-brain--drained .brain-svg {
  filter: saturate(0.2) brightness(0.9) drop-shadow(0 8px 10px rgba(0,0,0,0.12));
}
.showdown-effect-brain--drained .brain-shape { fill: var(--gray-brain); }
.showdown-effect-brain--drained .brain-lid {
  opacity: 1;
  fill: var(--gray-brain);
  transform: translateY(2px);
}
.showdown-effect-brain--drained .brain-eye {
  opacity: 0.55;
  transform: scaleY(0.45);
}
.showdown-effect-brain--drained .brain-mouth-frown { opacity: 1; }
.showdown-effect-brain--drained .brain-mouth-flat,
.showdown-effect-brain--drained .brain-mouth-smile { opacity: 0; }
.showdown-effect-brain--drained .brain-streams--red path {
  opacity: 1;
  stroke: var(--error-red);
}
.showdown-effect-brain--drained .brain-streams--green path,
.showdown-effect-brain--drained .brain-sparkle,
.showdown-effect-brain--drained .brain-dumbbell { opacity: 0; }
.brain-effect-status {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.showdown-brain-effect--thriving .brain-effect-status { color: var(--reward); }
.showdown-brain-effect--drained .brain-effect-status { color: var(--error-red); }

@media (prefers-reduced-motion: no-preference) {
  .showdown-effect-brain--thriving .brain-body {
    animation: brainThrive 2.4s var(--ease-io) infinite;
  }
  .showdown-effect-brain--thriving .brain-streams--green path {
    animation: streamFlow 1.8s linear infinite;
  }
  .showdown-effect-brain--drained .brain-body {
    animation: brainDrain 2.8s var(--ease-io) infinite;
  }
  .showdown-effect-brain--drained .brain-streams--red path {
    animation: streamFlow 1.2s linear infinite;
  }
}
@keyframes brainThrive {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}
@keyframes brainDrain {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(5px) rotate(-1.5deg); }
}


/* ---- Phone shell (reuses the gradient/notch/shadow from .phone) ---- */
.phone--showdown {
  width: 240px;
  height: 480px;
}
@media (min-width: 1024px) {
  .phone--showdown { width: 260px; height: 520px; }
}


/* ============================================================
   Showdown — Moozgy phone now mirrors the v2 hero phone exactly
   (same .demo-card--1..6 markup → same global cycle CSS auto-loops
   them in perfect sync with the hero). The social phone uses its
   own showdownCycle on a matching 30s timeline (4 reels × 7.5s each)
   so both phones complete a full cycle together.
============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* 6 brainrot reels × 5s each = 30s cycle, in perfect lockstep with
     the moozgy/hero phone (which has 6 cards × 5s on the same cycle).
     Reuses demoCardCycle so reel N on the social side swaps to reel N+1
     at the exact same moment moozgy card N swaps to card N+1. */
  .social-card--showdown-1 { animation: demoCardCycle 30s infinite; animation-delay: 0s;  }
  .social-card--showdown-2 { animation: demoCardCycle 30s infinite; animation-delay: 5s;  }
  .social-card--showdown-3 { animation: demoCardCycle 30s infinite; animation-delay: 10s; }
  .social-card--showdown-4 { animation: demoCardCycle 30s infinite; animation-delay: 15s; }
  .social-card--showdown-5 { animation: demoCardCycle 30s infinite; animation-delay: 20s; }
  .social-card--showdown-6 { animation: demoCardCycle 30s infinite; animation-delay: 25s; }
}
@media (prefers-reduced-motion: reduce) {
  .social-card--showdown-1 { opacity: 1; transform: translateY(0); }
}

/* ---- Social side (reel mode — kill the continuous scroll, position
       each reel absolutely so only one is visible at a time). ---- */
/* ===== Realistic Reels feed (showdown) ===== */

/* Top "Following / For You" tabs above the reels */
.social-toptabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 4px 0 8px;
  background: #000;
  flex-shrink: 0;
  border-bottom: 0;
}
.social-toptab {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
  position: relative;
  padding: 4px 0;
}
.social-toptab--active {
  color: #fff;
  font-weight: 800;
}
.social-toptab--active::after {
  content: "";
  position: absolute;
  left: 25%; right: 25%;
  bottom: 0;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

/* Feed wrapper — kill the old continuous scroll, make it a reel stage. */
.social-feed--reel {
  position: relative;
  flex: 1;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #000;
  animation: none !important;
}

/* Each reel = a full-screen layer that cycles in via animation. */
.social-card--showdown {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: #000;
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: block;
}
.social-card--showdown .social-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(1.1);
}

/* ============================================================
   Melting brain reel content. Replaces the previous split-screen
   brainrot visuals — every reel now shows the same dripping, drooping
   brain, with only subtle color shifts and a different caption per
   slot. The point: all the content is the same kind of brain-melt.
============================================================ */
.social-brainrot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sickly gradient base — pink/purple feverish vibe */
  background: radial-gradient(circle at 50% 35%, #ff8eb3 0%, #c5436b 45%, #4a1a2a 100%);
}

/* The brain melt stage. */
.brain-melt {
  position: relative;
  width: 130px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
}

/* Brain body — pink wrinkled blob with droopy bottom. */
.brain-melt-body {
  position: relative;
  width: 120px;
  height: 100px;
  background: linear-gradient(180deg, #ffb6c1 0%, #f08fa0 60%, #d96a85 100%);
  /* Asymmetric border-radius makes it look like an organic blob with a droopy bottom */
  border-radius: 50% 50% 36% 40% / 60% 65% 25% 20%;
  box-shadow:
    inset 0 -8px 16px rgba(120, 30, 50, 0.45),
    inset 4px 6px 12px rgba(255, 220, 225, 0.5),
    0 8px 24px rgba(0,0,0,0.35);
  filter: contrast(1.05);
}
@media (prefers-reduced-motion: no-preference) {
  .brain-melt-body { animation: brainMeltDroop 4s ease-in-out infinite; }
}
@keyframes brainMeltDroop {
  0%, 100% {
    transform: scaleY(1) translateY(0);
    border-radius: 50% 50% 36% 40% / 60% 65% 25% 20%;
  }
  50% {
    transform: scaleY(0.88) translateY(8px);
    border-radius: 55% 55% 20% 22% / 70% 70% 18% 14%;
  }
}

/* Folds — subtle wrinkle lines so it reads as a brain, not a blob. */
.brain-melt-fold {
  position: absolute;
  width: 60%;
  height: 2px;
  background: rgba(120, 30, 50, 0.4);
  border-radius: 2px;
  left: 20%;
}
.brain-melt-fold:nth-of-type(1) { top: 28%; transform: rotate(-8deg); }
.brain-melt-fold:nth-of-type(2) { top: 56%; transform: rotate(6deg);  width: 50%; left: 25%; }

/* Eyes — two small black ovals, half-lidded. */
.brain-melt-eye {
  position: absolute;
  width: 9px;
  height: 6px;
  background: #1a1a1a;
  border-radius: 50%;
  top: 38%;
  box-shadow: 0 1px 0 #fff inset;
}
.brain-melt-eye:nth-of-type(1) { left: 28%;  transform: rotate(-4deg); }
.brain-melt-eye:nth-of-type(2) { right: 28%; transform: rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .brain-melt-eye { animation: brainMeltBlink 5.5s steps(1, end) infinite; }
}
@keyframes brainMeltBlink {
  0%, 88%, 100% { transform: scaleY(0.6) rotate(0deg); }
  92%, 96%      { transform: scaleY(0.05) rotate(0deg); }
}

/* Mouth — drooping line that opens slightly. */
.brain-melt-mouth {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
}

/* Drips — vertical pink streaks hanging from the brain. */
.brain-melt-drip {
  position: absolute;
  background: linear-gradient(180deg, #f08fa0 0%, #d96a85 100%);
  border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
  box-shadow: inset 0 -2px 4px rgba(120, 30, 50, 0.5);
  z-index: 0;
}
.brain-melt-drip:nth-of-type(1) {
  top: 80px; left: 30%;
  width: 8px; height: 28px;
  border-radius: 40% 40% 50% 50% / 10% 10% 80% 80%;
}
.brain-melt-drip:nth-of-type(2) {
  top: 80px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 56px;
  border-radius: 40% 40% 50% 50% / 6% 6% 90% 90%;
}
.brain-melt-drip:nth-of-type(3) {
  top: 78px; right: 28%;
  width: 7px; height: 22px;
  border-radius: 40% 40% 50% 50% / 12% 12% 78% 78%;
}
@media (prefers-reduced-motion: no-preference) {
  .brain-melt-drip:nth-of-type(1) { animation: brainDripStretch 2.6s ease-in-out infinite; }
  .brain-melt-drip:nth-of-type(2) { animation: brainDripStretch 3.2s ease-in-out infinite 0.4s; }
  .brain-melt-drip:nth-of-type(3) { animation: brainDripStretch 2.2s ease-in-out infinite 0.8s; }
}
@keyframes brainDripStretch {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.4); }
}
/* Drip 2 also needs to keep its horizontal centering */
@keyframes brainDripStretchCenter {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50%      { transform: translateX(-50%) scaleY(1.4); }
}
@media (prefers-reduced-motion: no-preference) {
  .brain-melt-drip:nth-of-type(2) { animation-name: brainDripStretchCenter; }
}

/* Puddle — the gooey pool collecting under the melting brain. */
.brain-melt-puddle {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 14px;
  background: radial-gradient(ellipse at center, #d96a85 0%, #b04a64 60%, transparent 100%);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .brain-melt-puddle { animation: brainPuddleWobble 3s ease-in-out infinite; }
}
@keyframes brainPuddleWobble {
  0%, 100% { transform: translateX(-50%) scaleX(1)   scaleY(1); }
  50%      { transform: translateX(-50%) scaleX(1.1) scaleY(0.85); }
}

/* The caption text overlay (Impact/serif, big stroke, brainrot-edit style). */
.brainrot-text {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 3;
  font-family: "Impact", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000,
    -2px  2px 0 #000, 2px  2px 0 #000,
    0 4px 14px rgba(0,0,0,0.7);
  text-align: center;
  line-height: 1;
  padding: 0 12px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .brainrot-text { animation: brainrotTextPulse 1.6s ease-in-out infinite; }
}
@keyframes brainrotTextPulse {
  0%, 100% { transform: translateX(-50%) scale(1)    rotate(-2deg); }
  50%      { transform: translateX(-50%) scale(1.06) rotate(2deg); }
}

/* Per-reel background color shifts — slight variety so each reel "feels" different
   even though they're all showing the same melting brain. */
.social-brainrot--1 { background: radial-gradient(circle at 50% 35%, #ff8eb3 0%, #c5436b 45%, #4a1a2a 100%); }
.social-brainrot--2 { background: radial-gradient(circle at 50% 35%, #a5d68f 0%, #5d9a4a 45%, #1f3a16 100%); }
.social-brainrot--3 { background: radial-gradient(circle at 50% 35%, #ffc97a 0%, #d97d44 45%, #4a2a16 100%); }
.social-brainrot--4 { background: radial-gradient(circle at 50% 35%, #88c5ff 0%, #4a82c5 45%, #18334a 100%); }
.social-brainrot--5 { background: radial-gradient(circle at 50% 35%, #b9a5ff 0%, #6e54b0 45%, #221647 100%); }
.social-brainrot--6 { background: radial-gradient(circle at 50% 35%, #ff8a8a 0%, #b03e3e 45%, #421616 100%); }

/* Vertical action bar on the right side of each reel. */
.social-actions {
  position: absolute;
  right: 6px;
  bottom: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  z-index: 3;
  color: #fff;
}
.social-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--avatar-bg, #888);
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  text-shadow: none;
}
.social-avatar-letter {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-family: -apple-system, system-ui, sans-serif;
  letter-spacing: 0;
}
.social-avatar-follow {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #FF2C55;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  border: 1.5px solid #000;
}
.social-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #fff;
}
.social-action-icon {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
/* Override the share-icon path (path expected stroke not fill) */
.social-action svg path[d^="M22 3"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-action-count {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  letter-spacing: 0.01em;
}

/* Spinning music disc at the bottom of the action bar. */
.social-music-disc {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: 6px;
  background:
    radial-gradient(circle at center, #1a1a1a 35%, transparent 36%),
    conic-gradient(from 0deg, #5a3a8a, #c4548d, #ff7a5a, #ffd56b, #ff7a5a, #c4548d, #5a3a8a);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .social-music-disc { animation: musicDiscSpin 5s linear infinite; }
}
@keyframes musicDiscSpin { to { transform: rotate(360deg); } }

/* Bottom-left info: handle, caption, music. */
.social-info {
  position: absolute;
  left: 10px;
  right: 60px;
  bottom: 12px;
  z-index: 3;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  pointer-events: none;
}
.social-handle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.social-handle-dot { opacity: 0.7; margin: 0 2px; font-weight: 600; }
.social-handle-follow {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  opacity: 0.95;
}
.social-caption {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 5px;
  max-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-music {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.95;
  display: flex;
  align-items: center;
  gap: 4px;
}
.social-music-note {
  font-size: 11px;
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .social-music-note { animation: musicNoteBob 1.6s ease-in-out infinite; }
}
@keyframes musicNoteBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Bottom nav bar (Home / Discover / + / Inbox / Me) */
.social-bottomnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  padding: 6px 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.social-navitem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: rgba(255,255,255,0.55);
  font-size: 8px;
  font-weight: 600;
}
.social-navitem--active { color: #fff; }
.social-navitem svg {
  width: 18px;
  height: 18px;
  display: block;
}
.social-navitem--add { flex: 1.1; }
.social-navadd {
  width: 36px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(90deg, #25F4EE 0%, #fff 50%, #FE2C55 100%);
  color: #000;
  font-size: 18px;
  font-weight: 900;
  line-height: 19px;
  text-align: center;
  position: relative;
}

/* Daily-progress variant of the canonical tabbar.
   Replaces the bespoke .moozgy-bottom strip with a row that
   matches phone-tabbar typography exactly. */
.phone-tabbar--daily {
  justify-content: space-between;
  padding: 12px 14px 16px;
  gap: 4px;
  align-items: center;
}
.phone-tab--label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.phone-tab--label strong {
  color: var(--reward);
  font-weight: 800;
}
.phone-tab--dot {
  font-size: 9px;
  color: #E2DCD0;
}
.phone-tab--dot.phone-tab--active { color: var(--reward); font-size: 11px; }
.phone-tab--dot.phone-tab--now {
  color: var(--reward);
  font-size: 12px;
  text-shadow: 0 0 0 var(--reward), 0 0 8px var(--reward-soft);
}


/* ============================================================
   Legacy .moozgy-* phone classes (still referenced in case of
   rollback) — left in for safety; the showdown no longer uses them.
============================================================ */
.phone-screen--moozgy {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.moozgy-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 16px 12px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.moozgy-brand {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.moozgy-streak {
  font-weight: 700;
  color: var(--text);
}
.moozgy-streak strong { color: var(--text); }

.moozgy-problem-feed {
  flex: 1;
  min-height: 0;
  margin: 6px 0 0;
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.moozgy-problem-feed::-webkit-scrollbar { display: none; }

.moozgy-card {
  position: relative;
  flex: 0 0 auto;
  min-height: 248px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.12);
  scroll-snap-align: start;
}
.moozgy-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(45,74,62,0.08);
  border-radius: 999px;
  margin-bottom: var(--s1);
}
.moozgy-q {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.moozgy-seq {
  margin: 0 0 var(--s2);
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.moozgy-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.moozgy-chip {
  padding: 10px 6px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  background: #fff;
}
.moozgy-chip--correct {
  background: var(--reward);
  border-color: var(--reward);
  color: #fff;
  box-shadow: 0 0 0 4px var(--reward-soft);
}
/* Chip stays still now that the left phone has a full problem feed. */

.moozgy-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--reward);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Daily progress strip at the bottom of the moozgy screen.
   Provides the concrete "3 problems today" anchor that pairs with
   the "1h 47m today" wasted-time readout on the social phone. */
.moozgy-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.moozgy-today-count {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 12px;
}
.moozgy-today-count strong { color: var(--reward); }
.moozgy-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.moozgy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2DCD0;
}
.moozgy-dot.is-done { background: var(--reward); }
.moozgy-dot.is-now  { background: var(--reward); box-shadow: 0 0 0 3px var(--reward-soft); }


/* ============================================================
   Social media phone
============================================================ */
.phone-screen--social {
  background: linear-gradient(180deg, #1c1c1c, #0a0a0a);
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.social-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 18px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.social-sigs { letter-spacing: 1px; }
/* The brutal time-wasted readout in the status bar. */
.social-wasted {
  color: #FF4757;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 10px;
}
.social-wasted strong {
  color: #FF6B7A;
  font-size: 11px;
  font-weight: 800;
}
/* Real red heart on the cards — picks up the "time wasted" color
   thread so the eye reads waste consistently down the feed. */
.social-heart { color: #FF4757; }
.social-feed {
  flex: 1;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  position: relative;
}
.social-card {
  flex-shrink: 0;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.04);
}
.social-card-body {
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 55%, #111 100%);
  position: relative;
  overflow: hidden;
}
.social-card-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, rgba(255,71,87,0.18), transparent 42%, rgba(255,255,255,0.12));
  pointer-events: none;
}
.social-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transform: scale(1.18);
}
.social-card--clip-1 .social-video { filter: saturate(0.8) contrast(1.15) brightness(0.72); }
.social-card--clip-2 .social-video { filter: hue-rotate(72deg) saturate(1.5) contrast(1.2) brightness(0.7); }
.social-card--clip-3 .social-video { filter: hue-rotate(205deg) saturate(1.8) contrast(1.25) brightness(0.68); }
.social-card--clip-4 .social-video { filter: grayscale(0.25) sepia(0.25) saturate(1.6) contrast(1.18) brightness(0.7); }
.social-card--clip-5 .social-video { filter: hue-rotate(128deg) saturate(1.4) contrast(1.2) brightness(0.72); }
.social-video-label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  z-index: 3;
  color: rgba(255,255,255,0.88);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.65);
}
.social-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.social-card-meta span { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .social-feed { animation: socialFeedScroll 14s linear infinite; }
}
@keyframes socialFeedScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-260px); }
}


/* ============================================================
   MOBILE: keep the two phones side by side, Moozgy left.
============================================================ */
@media (max-width: 767.98px) {
  /* The two phones are full-size copies of the hero phone (260px each), so
     side-by-side they can't fit a phone screen. Stack the comparison:
     Moozgy phone → VS → social phone, everything centered. */
  .showdown {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: center;
    gap: var(--s2);
    margin-left: 0;
    margin-right: 0;
  }
  .showdown-side {
    width: 100%;
    max-width: none;
  }
  .showdown-vs {
    align-self: center;
    justify-self: center;
    font-size: 16px;
    margin: 0;
  }
  .showdown-label {
    font-size: 18px;
    margin: 12px 0 4px;
  }
  .showdown-caption {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.45;
  }
  .showdown-brain-effect {
    min-height: 70px;
    margin-bottom: 10px;
  }
  .showdown-brain-effect::after {
    height: 13px;
  }
  .showdown-effect-brain {
    width: 56px;
    height: 56px;
  }
  .brain-effect-status {
    margin-top: 2px;
    font-size: 7px;
    letter-spacing: 0.08em;
  }
  .phone--showdown {
    width: clamp(120px, 36vw, 220px);
    height: clamp(252px, 74vw, 440px);
    padding: 6px;
    border-radius: 28px;
    box-shadow: 0 18px 44px -24px rgba(0,0,0,0.35);
  }
  .phone--showdown .phone-notch {
    top: 10px;
    width: 46px;
    height: 13px;
    border-radius: 999px;
  }
  .phone--showdown .phone-screen { border-radius: 23px; }

  .moozgy-bar {
    padding: 20px 8px 7px;
    font-size: 8px;
  }
  .moozgy-brand { font-size: 10px; }
  .moozgy-problem-feed {
    margin-top: 3px;
    padding: 0 7px 9px;
    gap: 7px;
  }
  .moozgy-card {
    min-height: 141px;
    border-radius: 10px;
    padding: 9px 7px 8px;
    gap: 5px;
  }
  .moozgy-tag {
    padding: 2px 5px;
    font-size: 7px;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }
  .moozgy-q { font-size: 9px; }
  .moozgy-seq {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .moozgy-chips { gap: 5px; }
  .moozgy-chip {
    padding: 6px 2px;
    border-radius: 7px;
    font-size: 9px;
  }
  .moozgy-check {
    top: 9px;
    right: 9px;
    width: 14px;
    height: 14px;
  }
  /* Daily-progress strip scales down on mobile too. */
  .moozgy-bottom {
    padding: 6px 9px 12px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
  .moozgy-today-count { font-size: 9px; }
  .moozgy-dot { width: 6px; height: 6px; }

  .social-statusbar {
    padding: 20px 9px 4px;
    font-size: 8px;
  }
  .social-feed {
    padding: 0 7px 8px;
    gap: 7px;
  }
  .social-card {
    border-radius: 9px;
    padding: 7px;
    gap: 5px;
  }
  .social-card-body {
    height: 48px;
    border-radius: 7px;
  }
  .social-video-label {
    left: 5px;
    right: 5px;
    bottom: 4px;
    font-size: 6px;
    letter-spacing: 0.05em;
  }
  .social-card-meta { font-size: 7px; }
}


/* ============================================================
   FEATURES — 6 cards in a responsive grid showing what's inside
   Moozgy. Sits between the showdown and the FAQ.
============================================================ */
.pitch-block--features {
  max-width: 960px;
  text-align: center;
}
.pitch-block--features h2 {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.pitch-block--features .body {
  max-width: 540px;
  margin: var(--s2) auto var(--s5);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  text-align: left;
}
@media (min-width: 560px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature {
  padding: var(--s4) var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.feature:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.15);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(45, 74, 62, 0.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-icon svg { width: 22px; height: 22px; display: block; }

.feature-title {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.feature-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* The "Let Moozgy pick" card gets a subtle reward-green treatment —
   it's the marquee adaptive feature, deserves a touch more visual lift. */
.feature--star .feature-icon {
  background: var(--reward-soft);
  color: var(--reward);
}


.pitch-block--cta {
  background: #fff;
  border: 1px solid #ECE7DC;
  border-radius: var(--radius-card);
  padding: var(--s4) var(--s3);
  margin-top: var(--s5);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.08);
}
.pitch-block--cta h2 { margin-bottom: var(--s1); }
.pitch-block--cta .body { margin-bottom: var(--s3); }
.pitch-block--cta .signup-form { max-width: 420px; margin: 0 auto; }

.counter-line {
  margin: var(--s3) 0 0;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.counter-line #count { font-weight: 700; color: var(--accent); }


/* ============================================================
   FOOTER
============================================================ */
.footer {
  text-align: center;
  padding: var(--s4) var(--s3) 0;
  max-width: 640px;
  margin: 0 auto;
}
.footer-mark {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 var(--s2);
  letter-spacing: -0.01em;
}
.footer-line {
  margin: 0 0 var(--s1);
  font-size: 14px;
  color: var(--muted);
}
.footer-line a {
  color: var(--muted);
  text-decoration: none;
}
.footer-line a:hover { color: var(--accent); text-decoration: underline; }
.footer-dot { margin: 0 var(--s1); color: #C8C4B8; }


/* ============================================================
   ============================================================
   v5 — v2 HERO insert (ported from v2-conversion-improvements).
   These styles support the hero section sitting between the
   brain test and the v3 condensed pitch. Includes phone mockup,
   demo-card auto-loop, signup-btn, scarcity bar, commitment
   puzzle, and referral block. Scoped where needed to avoid
   colliding with v3's existing classes.
   ============================================================
============================================================ */

/* ---- Container + section + utility primitives (v2 needed these) ---- */
.section { padding: var(--s5) 0; }
@media (min-width: 768px) { .section { padding: var(--s6) 0; } }
.container { width: 100%; max-width: var(--container, 1100px); margin: 0 auto; padding: 0 var(--s3); }
.container--measure { max-width: var(--measure, 640px); }
.center { text-align: center; }
.subhead {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 var(--s4);
  max-width: 540px;
}
.center .subhead { margin-left: auto; margin-right: auto; }

/* Eyebrow dot (v2 hero variant) */
.eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
}

/* ============================================================
   S1 HERO — tighter, more product-forward
============================================================ */
.section--hero {
  padding-top: var(--s4);
  padding-bottom: var(--s5);
}
@media (min-width: 768px) {
  .section--hero {
    padding-top: var(--s5);
    padding-bottom: var(--s6);
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}
.hero-copy { min-width: 0; }
@media (min-width: 768px) {
  .hero-grid {
    /* Wider left so the signup cards can stretch horizontally; narrower right
       so the phone sits further right. */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.78fr);
    gap: var(--s4);
  }
}

/* Copy column can be wide (for the horizontal cards), but keep the reading
   text itself to a comfortable measure. */
.hero-copy { max-width: 720px; }
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .subhead { max-width: 560px; }
.hero-copy h1 { margin-bottom: var(--s2); }
.hero-copy .subhead { margin-bottom: var(--s3); }

.hero-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;   /* push the phone toward the right edge */
  gap: var(--s2);
}
@media (max-width: 767px) {
  .hero-phone { align-items: center; }
}

.phone-caption {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Phone mockup — bigger, more App Store-quality */
.phone {
  width: 260px;
  height: 540px;
  background: linear-gradient(180deg, #161616, var(--text));
  /* iPhone-style rounded corners (the global --radius-phone is 12px,
     kept small for the tiny doom-phone illustration; this big hero
     phone needs a proper bezel radius). */
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.35);
  position: relative;
}
@media (min-width: 768px) {
  .phone {
    width: 300px;
    height: 620px;
  }
}
@media (min-width: 1280px) {
  .phone {
    width: 320px;
    height: 660px;
  }
}

.phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: var(--text);
  border-radius: 14px;
  z-index: 3;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 4px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.phone-sigs { display: flex; align-items: center; gap: 4px; }
.phone-sig {
  width: 18px;
  height: 10px;
  background:
    radial-gradient(circle at 2px 8px, var(--text) 0 1.5px, transparent 2px),
    radial-gradient(circle at 7px 8px, var(--text) 0 1.5px, transparent 2px),
    radial-gradient(circle at 12px 8px, var(--text) 0 1.5px, transparent 2px),
    radial-gradient(circle at 17px 8px, var(--text) 0 1.5px, transparent 2px);
  background-repeat: no-repeat;
}
.phone-batt {
  width: 22px; height: 10px;
  border: 1.5px solid var(--text);
  border-radius: 3px;
  position: relative;
}
.phone-batt::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--text);
  width: 70%;
  border-radius: 1px;
}

.phone-appbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 14px;
  border-bottom: 1px solid #F0EDE5;
}
.phone-brand {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.phone-streak {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transform-origin: right center;
  transition: color 200ms var(--ease);
}
/* Live session streak: green pop on correct tap; red dip on wrong. */
@media (prefers-reduced-motion: no-preference) {
  .phone-streak.is-bumped { animation: streakBump   380ms var(--ease-out-back); }
  .phone-streak.is-broken { animation: streakBroken 320ms var(--ease); }
}
@keyframes streakBump {
  0%   { transform: scale(1);    color: var(--text); }
  45%  { transform: scale(1.22); color: var(--reward); }
  100% { transform: scale(1);    color: var(--text); }
}
@keyframes streakBroken {
  0%   { transform: scale(0.92); color: var(--error-red); }
  100% { transform: scale(1);    color: var(--text); }
}

.phone-feed {
  position: relative;
  flex: 1;
  width: 100%;
  background: var(--bg);
  overflow: hidden;
}

.phone-tabbar {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  padding: 14px 0 18px;
  border-top: 1px solid #F0EDE5;
  font-size: 10px;
  color: var(--muted);
}
.phone-tab--active { color: var(--accent); font-size: 12px; }

/* swipe hint floating arrow */
.phone-swipe-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 4;
  opacity: 0.7;
}
.swipe-arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .swipe-arrow { animation: swipeArrow 2.2s var(--ease) infinite; }
}
@keyframes swipeArrow {
  0%, 100% { transform: translateY(4px); opacity: 0.3; }
  50%      { transform: translateY(-2px); opacity: 1; }
}

/* Demo cards */
.demo-card {
  position: absolute;
  inset: 0;
  margin: 14px;
  padding: 18px 16px 16px;
  background: #ffffff;
  border-radius: var(--radius-card);
  border: 1px solid #ECE8DE;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(100%);
}
.demo-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(45, 74, 62, 0.08);
  border-radius: 999px;
  margin-bottom: var(--s2);
}
.demo-q {
  /* Bumped from 12px → 17px so the question prompt actually reads. */
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 var(--s2);
  font-weight: 600;
}
.demo-seq {
  font-family: "Fraunces", serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 var(--s3);
  color: var(--text);
  letter-spacing: -0.01em;
}
.demo-seq .blank {
  display: inline-block;
  padding: 0 6px;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  min-width: 24px;
}

.demo-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}
.demo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed box: every chip is the same size on every card. Long labels don't
     grow the box — JS scales the label font down to fit instead. */
  height: 48px;
  padding: 0 8px;
  border: 1.5px solid #DDD7C9;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition:
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    color 200ms var(--ease),
    transform 180ms var(--ease-pop);
}
.demo-chip:hover { border-color: var(--accent); }
.demo-chip:active { transform: scale(0.96); }
.demo-chip.is-correct {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: chipBounce 380ms var(--ease-pop);
}
.demo-chip.is-wrong {
  border-color: var(--error-red);
  color: var(--error-red);
  animation: chipShake 360ms var(--ease);
}
@keyframes chipBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes chipShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.demo-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-card);
}
.demo-check {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.demo-streak-pop {
  margin-top: var(--s2);
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
}

/* Auto-loop animation — 30s cycle, 6 cards × 5s each.
   Each card gets 5 seconds in front of the visitor. Keyframe
   percentages are proportional to the cycle and stay unchanged. */
@media (prefers-reduced-motion: no-preference) {
  .demo-card.is-paused,
  .demo-card.is-paused * { animation-play-state: paused !important; }

  .demo-card--1 { animation: demoCardCycle 30s infinite; animation-delay: 0s; }
  .demo-card--2 { animation: demoCardCycle 30s infinite; animation-delay: 5s; }
  .demo-card--3 { animation: demoCardCycle 30s infinite; animation-delay: 10s; }
  .demo-card--4 { animation: demoCardCycle 30s infinite; animation-delay: 15s; }
  .demo-card--5 { animation: demoCardCycle 30s infinite; animation-delay: 20s; }
  .demo-card--6 { animation: demoCardCycle 30s infinite; animation-delay: 25s; }

  .demo-card--1 .demo-chip--correct { animation: chipCorrect 30s infinite; animation-delay: 2s; }
  .demo-card--2 .demo-chip--correct { animation: chipCorrect 30s infinite; animation-delay: 7s; }
  .demo-card--3 .demo-chip--correct { animation: chipCorrect 30s infinite; animation-delay: 12s; }
  .demo-card--4 .demo-chip--correct { animation: chipCorrect 30s infinite; animation-delay: 17s; }
  .demo-card--5 .demo-chip--correct { animation: chipCorrect 30s infinite; animation-delay: 22s; }
  .demo-card--6 .demo-chip--correct { animation: chipCorrect 30s infinite; animation-delay: 27s; }

  .demo-card--1 .demo-feedback { animation: feedbackShow 30s infinite; animation-delay: 2.25s; }
  .demo-card--2 .demo-feedback { animation: feedbackShow 30s infinite; animation-delay: 7.25s; }
  .demo-card--3 .demo-feedback { animation: feedbackShow 30s infinite; animation-delay: 12.25s; }
  .demo-card--4 .demo-feedback { animation: feedbackShow 30s infinite; animation-delay: 17.25s; }
  .demo-card--5 .demo-feedback { animation: feedbackShow 30s infinite; animation-delay: 22.25s; }
  .demo-card--6 .demo-feedback { animation: feedbackShow 30s infinite; animation-delay: 27.25s; }

  .demo-card--1 .demo-check { animation: checkDraw 30s infinite; animation-delay: 2.45s; }
  .demo-card--2 .demo-check { animation: checkDraw 30s infinite; animation-delay: 7.45s; }
  .demo-card--3 .demo-check { animation: checkDraw 30s infinite; animation-delay: 12.45s; }
  .demo-card--4 .demo-check { animation: checkDraw 30s infinite; animation-delay: 17.45s; }
  .demo-card--5 .demo-check { animation: checkDraw 30s infinite; animation-delay: 22.45s; }
  .demo-card--6 .demo-check { animation: checkDraw 30s infinite; animation-delay: 27.45s; }

  .demo-card--1 .demo-streak-pop { animation: streakPop 30s infinite; animation-delay: 2.6s; }
  .demo-card--2 .demo-streak-pop { animation: streakPop 30s infinite; animation-delay: 7.6s; }
  .demo-card--3 .demo-streak-pop { animation: streakPop 30s infinite; animation-delay: 12.6s; }
  .demo-card--4 .demo-streak-pop { animation: streakPop 30s infinite; animation-delay: 17.6s; }
  .demo-card--5 .demo-streak-pop { animation: streakPop 30s infinite; animation-delay: 22.6s; }
  .demo-card--6 .demo-streak-pop { animation: streakPop 30s infinite; animation-delay: 27.6s; }
}

/* Keyframes rescaled to 24s (was 16s). All times are now multiples of
   2/3 of the v2 originals. Each card visible 0–4s of its own cycle
   (0% to 16.67% of the 24s window). */
@keyframes demoCardCycle {
  0%                    { opacity: 0; transform: translateY(100%); pointer-events: none; }
  2%, 14.67%            { opacity: 1; transform: translateY(0);    pointer-events: auto; }
  16.67%                { opacity: 1; transform: translateY(-100%); pointer-events: none; }
  16.68%, 100%          { opacity: 0; transform: translateY(100%); pointer-events: none; }
}
@keyframes chipCorrect {
  0%, 0.8%   { background: #fff; border-color: #DDD7C9; color: var(--text); transform: scale(1); }
  1.2%       { transform: scale(1.12); }
  2%, 14%    { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1); }
  14.67%, 100% { background: #fff; border-color: #DDD7C9; color: var(--text); transform: scale(1); }
}
@keyframes feedbackShow {
  0%, 0.8%     { opacity: 0; }
  1.33%, 14%   { opacity: 1; }
  14.67%, 100% { opacity: 0; }
}
@keyframes checkDraw {
  0%, 0.8%     { stroke-dashoffset: 30; }
  2.67%, 14%   { stroke-dashoffset: 0; }
  14.67%, 100% { stroke-dashoffset: 30; }
}
@keyframes streakPop {
  0%, 0.8%     { opacity: 0; transform: translateY(6px); }
  2%, 2.67%    { opacity: 1; transform: translateY(0); }
  4%, 10.67%   { opacity: 1; transform: translateY(-22px); }
  12.67%, 14%  { opacity: 0; transform: translateY(-30px); }
  14.67%, 100% { opacity: 0; transform: translateY(6px); }
}

/* Explanation overlay — full-card overlay that appears when the visitor
   taps the "explain" button. Shows the answer + 1-line reasoning. */
.demo-explain {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: var(--radius-card);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  text-align: center;
  transition: opacity 240ms var(--ease);
}
.demo-card.is-explaining .demo-explain {
  opacity: 1;
  pointer-events: auto;
}
.demo-explain-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s1);
}
.demo-explain-answer {
  font-family: "Fraunces", serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 var(--s2);
  line-height: 1;
  letter-spacing: -0.02em;
}
.demo-explain-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
  max-width: 240px;
  letter-spacing: -0.005em;
}
/* "back to problem" inside the explanation overlay — accent pill button.
   It inherits pointer-events from the overlay: none while the overlay is
   hidden (so the invisible button never blocks the answer chips), and auto
   only when .is-explaining is active. */
.demo-back-btn {
  margin-top: var(--s3);
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 150ms var(--ease);
}
.demo-back-btn:hover  { background: var(--accent-2); transform: translateY(-1px); }
.demo-back-btn:active { transform: scale(0.97); }
.demo-back-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
}

/* "explain" link — small affordance that sits in-flow directly above
   the 4 answer chips. Right-aligned in the card column. Injected by
   JS into every demo-card just before .demo-chips. */
.demo-solution-btn {
  /* margin-top: auto pushes the button + chips group to the bottom of
     the card; we override the chips' own margin-top to 0 below. */
  margin: auto 0 var(--s1);
  align-self: flex-end;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
  z-index: 4;
}
.demo-solution-btn::before {
  content: "?";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  vertical-align: -1px;
}
.demo-solution-btn:hover {
  color: var(--accent);
  background: rgba(45, 74, 62, 0.06);
}

/* The button carries the auto margin that pushes the chips down, so reset the
   chips' own margin-top ONLY when the button is actually present (it's JS-
   injected on interactive phones only). On auto-play phones (the showdown
   Moozgy phone) there is no button — without this guard the chips lost their
   own auto margin and floated at whatever height the question text ended,
   drifting further down on cards with longer answers. With it, the chip grid
   is always pinned to the bottom of the card, same spot on every card. */
.demo-card .demo-solution-btn + .demo-chips { margin-top: 0; }

/* Manual click overrides the loop temporarily */
.demo-card.is-active-correct .demo-chip--correct {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  animation: chipBounce 380ms var(--ease-pop) !important;
}
.demo-card.is-active-correct .demo-feedback {
  opacity: 1 !important;
  animation: none !important;
}
.demo-card.is-active-correct .demo-check {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.demo-card.is-active-correct .demo-streak-pop {
  opacity: 1 !important;
  transform: translateY(-22px) !important;
  animation: none !important;
}


/* ============================================================
   FORM — dominant CTA, quieter input
============================================================ */
.signup-form {
  margin-top: var(--s3);
  max-width: 500px;
}
.center .signup-form { margin-left: auto; margin-right: auto; }

.signup-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 600px) {
  .signup-row {
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
  }
}

.signup-input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 var(--s3);
  border: 1.5px solid #E0DBCF;
  border-radius: var(--radius-input);
  background: #FFFFFF;
  color: var(--text);
  font-size: 16px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.signup-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 74, 62, 0.12);
}
.signup-input::placeholder { color: #B0ACA2; }

.signup-btn {
  position: relative;
  min-height: 56px;
  padding: 0 var(--s4);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-input);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.005em;
  overflow: hidden;
  transition: transform 150ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--accent-3);
}
.signup-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-2);
  transform: translateX(-101%);
  transition: transform 250ms var(--ease);
  z-index: 0;
}
.signup-btn:hover::before { transform: translateX(0); }
.signup-btn:focus-visible { outline: 3px solid rgba(45, 74, 62, 0.35); outline-offset: 2px; }
.signup-btn:active { transform: scale(0.97); box-shadow: 0 1px 0 var(--accent-3); }
.btn-label { position: relative; z-index: 1; }

.btn-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.btn-spinner::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.signup-btn.is-loading .btn-label { opacity: 0; }
.signup-btn.is-loading .btn-spinner { display: flex; }
.signup-btn:disabled { opacity: 0.85; cursor: not-allowed; }

/* Locked button — shown after a duplicate signup so the green button can't be
   clicked again. Clearly dimmed and inert (no hover sweep). */
.signup-btn.is-locked,
.btn--primary.is-locked,
.tier-btn.is-locked { opacity: 0.5; cursor: not-allowed; transform: none; }
.signup-btn.is-locked:hover::before { transform: translateX(-100%); }
.btn--primary.is-locked:hover { background: var(--accent); }

.form-micro {
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.form-error {
  margin: var(--s1) 0 0;
  color: var(--error-red);
  font-size: 13px;
  min-height: 18px;
}

/* Scarcity bar */
.scarcity {
  margin-top: var(--s3);
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.scarcity-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: 8px;
}
.scarcity-text {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.scarcity-text strong {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}
.scarcity-pct {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.scarcity-bar {
  width: 100%;
  height: 7px;
  background: #E0DBCF;
  border-radius: 999px;
  overflow: hidden;
}
.scarcity-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 900ms var(--ease) 200ms;
}

/* Form success state */
.signup-form.is-success .signup-row,
.signup-form.is-success .form-micro,
.signup-form.is-success .form-error,
.signup-form.is-success .scarcity {
  display: none;
}
.signup-form.is-success .puzzle-card { display: block; }

/* ---------- Puzzle card (commitment mechanic) ---------- */
.puzzle-card {
  display: none;
  margin-top: var(--s2);
  padding: var(--s4);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  animation: puzzleAppear 500ms var(--ease);
}
@keyframes puzzleAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.puzzle-prompt {
  margin: 0 0 var(--s3);
  font-family: "Fraunces", serif;
  font-size: 22px;
  color: var(--text);
  text-align: center;
}
.puzzle-chips {
  display: grid;
  /* Fit as many chips per row as the card width allows, wrapping when narrow
     (the CTA free card is a half-width column). A fixed 4-col grid couldn't
     shrink, so it forced the card wider than its column and slid under the
     neighbouring Founder card. */
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 10px;
}
.chip {
  height: 52px;
  border: 1.5px solid #DCD7CC;
  border-radius: 12px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition:
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    color 200ms var(--ease),
    transform 180ms var(--ease-pop);
}
.chip:hover { border-color: var(--accent); }
.chip:active { transform: scale(0.97); }
.chip.is-correct {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: chipBounce 420ms var(--ease-pop);
}
.chip.is-wrong {
  border-color: var(--error-red);
  color: var(--error-red);
  animation: chipShake 360ms var(--ease);
}
.chip[disabled] { cursor: not-allowed; }

.puzzle-result {
  margin: var(--s3) 0 0;
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  min-height: 22px;
  text-align: center;
}

.referral-block {
  display: none;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.referral-block.is-visible {
  display: block;
  animation: puzzleAppear 400ms var(--ease);
}
.referral-line {
  margin: 0 0 var(--s2);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.referral-line .user-spot { font-weight: 700; color: var(--text); }
.referral-row {
  display: flex;
  gap: var(--s1);
}
.referral-link {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 var(--s2);
  border: 1.5px solid #DCD7CC;
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  color: var(--muted);
}
.referral-copy {
  height: 46px;
  padding: 0 var(--s3);
  background: var(--text);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.referral-copy:hover { background: var(--accent); }
.referral-copy.is-copied { background: var(--accent); }

/* ============================================================
   Two-tier signup (Free email vs Founder $19.99)
   Pricing-card pattern: header (tag · price) → headline → perks → form → micro.
   Used in the hero and the bottom CTA.
============================================================ */
.tier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin: var(--s3) 0 0;
  max-width: 760px;
}
.center .tier-grid { margin-left: auto; margin-right: auto; }
.tier-grid--cta { margin-left: auto; margin-right: auto; }
@media (min-width: 760px) {
  .tier-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s2);
    align-items: start;
  }
}

.tier-card {
  position: relative;
  margin: 0;
  min-width: 0;
  max-width: none;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1.5px solid #E5E0D3;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.tier-card:hover {
  border-color: rgba(45, 74, 62, 0.35);
  box-shadow: 0 8px 24px rgba(45, 74, 62, 0.08);
}
.tier-card--founder {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(8,60,30,0.10) 0%, transparent 70%),
    #fff;
  border-color: var(--reward);
  box-shadow: 0 6px 20px rgba(8, 60, 30, 0.10);
}
.tier-card--founder:hover {
  border-color: var(--reward);
  box-shadow: 0 12px 28px rgba(8, 60, 30, 0.18);
}

/* Header row: tag on the left, price on the right */
.tier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ECE7DA;
}
.tier-card--founder .tier-head { border-bottom-color: rgba(8, 60, 30, 0.2); }

.tier-tag {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 6px 10px;
  background: rgba(45, 74, 62, 0.08);
  border-radius: 999px;
  align-self: center;
}
.tier-card--founder .tier-tag {
  color: var(--reward);
  background: rgba(8, 60, 30, 0.12);
}

.tier-price {
  margin: 0;
  text-align: right;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.tier-amount {
  /* Prices in a clean, neutral grotesque — the high-trust, high-legibility choice
     for pricing. Tabular + lining figures keep the digits uniform-width and
     baseline-aligned, so the price reads as precise and intentional. */
  font-family: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier-period {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Headline: the gift (2 months / 6 months free) */
.tier-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 16px;
}
.tier-headline-sub {
  font-family: inherit;
  color: var(--muted);
  font-weight: 400;
}

/* Tier scope line: Free is capped at 500, Founder is unlimited/always open.
   Kept short + single-line so both cards stay the same height and the email
   rows + buttons remain aligned across columns. */
.tier-limit {
  margin: -6px 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.tier-limit strong { font-weight: 800; }
.tier-limit-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.tier-limit--free { color: var(--accent); }
.tier-limit--free .tier-limit-dot { background: var(--accent); }
.tier-limit--founder { color: var(--reward); }
.tier-limit--founder .tier-limit-dot { background: var(--reward); }

/* Founder upsell nudge — revealed by JS only once the 500 free spots are gone */
.founder-nudge {
  margin: 0 0 16px;
  padding: 9px 12px;
  background: rgba(8, 60, 30, 0.08);
  border: 1px solid rgba(8, 60, 30, 0.18);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--reward);
}
.founder-nudge[hidden] { display: none; }

/* Free card flipped to waitlist mode (after 500 claimed): mute the scope line */
.tier-card--free.is-waitlist .tier-limit--free { color: var(--muted); }
.tier-card--free.is-waitlist .tier-limit--free .tier-limit-dot { background: var(--muted); }

/* Perks list with green checks.
   flex-grow:1 makes the shorter (Free) list absorb extra vertical space so the
   email input + button line up across both cards at the same Y. */
.tier-perks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 0 auto;
}
.tier-perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.tier-perks li strong {
  color: var(--reward);
  font-weight: 700;
}
.tier-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(45, 74, 62, 0.10);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
.tier-card--founder .tier-check {
  background: rgba(8, 60, 30, 0.16);
  color: var(--reward);
}

/* Pinned form: pushes to the bottom so cards align across columns */
.tier-form {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tier-card .signup-row {
  position: relative;
  display: block;
  flex-direction: column;
  gap: 0;
}
.signup-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9B968A;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tier-card .signup-input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 40px;
  font-size: 15px;
  border-radius: 10px;
  background: #FCFAF5;
}
.tier-card .signup-input:focus { background: #fff; }
.tier-card--founder .signup-input:focus {
  border-color: var(--reward);
  box-shadow: 0 0 0 3px rgba(8, 60, 30, 0.14);
}
.tier-btn {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s2);
  font-size: 15px;
  border-radius: 10px;
}
.tier-btn--founder {
  background: var(--reward);
  box-shadow: 0 2px 0 #021E0C;
}
.tier-btn--founder::before {
  background: #021E0C;
}
.tier-btn--founder:focus-visible {
  outline: 3px solid rgba(8, 60, 30, 0.4);
}

/* Subtle inline link in micro-copy (e.g. "refund terms" under the pay button) */
.form-micro .micro-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.form-micro .micro-link:hover { color: var(--accent); }

.tier-card .form-micro {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  /* Reserve two lines so the Founder caption (which wraps) and the Free caption
     (one line) occupy equal height — keeps the email rows + green buttons aligned
     across both cards. */
  min-height: calc(2 * 1.4em);
}
.pay-icons {
  display: inline-flex;
  align-items: center;
  color: var(--reward);
}

/* Badge floats above the founder card */
.tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--reward);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(8, 60, 30, 0.30);
  white-space: nowrap;
}

/* Bottom CTA inherits the same card; counter line sits below */
.pitch-block--cta .tier-grid { max-width: 760px; }
.pitch-block--cta .signup-form { max-width: none; }

/* Convert (post-test) upsell line for founder tier */
.convert-upsell {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px dashed var(--line, #E0DBCF);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.convert-upsell strong { color: var(--text); font-weight: 700; }
.convert-upsell-link {
  color: var(--reward);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(8, 60, 30, 0.4);
  transition: border-color 150ms var(--ease);
}
.convert-upsell-link:hover {
  color: #021E0C;
  border-bottom-color: var(--reward);
}

@media (prefers-reduced-motion: reduce) {
  .tier-card,
  .tier-card:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   Cookie consent banner
   Fixed bottom bar, calm to match the canvas. Functional cookies
   only fire after Accept (see script.js).
============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  margin: 0 auto;
  max-width: 680px;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 14px 18px;
  background: #fff;
  border: 1.5px solid #E5E0D3;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.12);
  animation: cookie-rise 320ms var(--ease) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-text {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.cookie-privacy {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 74, 62, 0.35);
  white-space: nowrap;
}
.cookie-privacy:hover { color: var(--accent-3); }
.cookie-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cookie-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.cookie-btn--ghost {
  background: transparent;
  border-color: #E0DBCF;
  color: var(--muted);
}
.cookie-btn--ghost:hover { border-color: #C9C3B4; color: var(--text); }
.cookie-btn--accept {
  background: var(--accent);
  color: #fff;
}
.cookie-btn--accept:hover { background: var(--accent-3); }

@media (max-width: 560px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: left;
  }
  .cookie-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

/* ============================================================
   Tier cards — ChatGPT-style vertical pricing cards
   Side-by-side cards: plan name + big price at the top, the CTA button
   right under it, then the feature checklist below a divider.
============================================================ */
@media (min-width: 760px) {
  .tier-grid {
    /* minmax(0,1fr) caps each card at its half-share. Plain 1fr has a
       min-content floor, so the free card's puzzle/share content would blow the
       column wider than half and overlap the Founder card. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s2);
    /* Top-align so each card sizes to its own content. Otherwise the free card
       growing on signup (puzzle + share block) stretches the Founder card to
       match, ballooning it with empty space. */
    align-items: start;
  }
}

/* Header: plan name on its own line, big price below it (left-aligned) */
.tier-card .tier-head {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 18px;
}
.tier-card .tier-tag {
  display: inline-block;
  margin: 0 0 14px;
}
.tier-card .tier-price {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  text-align: left;
  gap: 7px;
}
.tier-card .tier-amount { font-size: 38px; }
.tier-card .tier-period {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

/* The signup block (email + button) sits under the price/description and
   ABOVE the feature list — the ChatGPT ordering. */
.tier-card .tier-cta-side { order: 4; }
.tier-card .tier-form     { margin-top: 0; }

/* Keep the empty validation lines from reserving a big gap before features */
.tier-card .form-error,
.tier-card .form-success { min-height: 0; }
.tier-card .tier-cta-side .form-error:empty,
.tier-card .tier-cta-side .form-success:empty { margin: 0; }

/* Feature checklist below the button, separated by a divider */
.tier-card .tier-perks {
  order: 5;
  flex: 0 0 auto;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid #ECE7DA;
}
.tier-card--founder .tier-perks { border-top-color: rgba(8, 60, 30, 0.15); }

/* Keep the post-signup puzzle + share block inside the narrow card column.
   Without min-width:0 these flex children refuse to shrink below their content
   width, pushing the card past its grid track and under the Founder card. */
.tier-card .tier-cta-side,
.tier-card .puzzle-card { min-width: 0; }
.tier-card .puzzle-card { padding: 18px 16px; }

/* Cap each card at its grid column. For a grid item, % max-width resolves
   against the grid area (the track width), so this clamps the card to its half
   and forces the puzzle/share content to wrap inside instead of pushing the
   card over the Founder card. */
.tier-grid .tier-card { max-width: 100%; }

/* Trust strip under the payment cards — reassurance at the decision point */
.cta-trust {
  list-style: none;
  margin: var(--s2) auto 0;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}
.cta-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.cta-trust svg {
  color: var(--reward);
  flex: 0 0 auto;
}

/* ============================================================
   Gamified Moozgy phone (showdown "good" side)
   Streak / XP / gems, a daily-goal bar, a level-progress reward,
   and an icon bottom nav — so it reads as rewarding next to the
   flashy social feed. Scoped so the hero phone stays minimal.
============================================================ */
.showdown-side--good .phone-appbar,
.hero-phone .phone-appbar { padding: 10px 14px; }

.mz-stats { display: flex; align-items: center; gap: 5px; }
.mz-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--text);
  background: #F4F1E9;
}
.mz-stat--xp     { background: rgba(45, 74, 62, 0.10);  color: var(--accent); }
.mz-stat--gem    { background: rgba(31, 111, 139, 0.12); color: #1f6f8b; }
.mz-stat--streak { background: rgba(201, 112, 26, 0.14); color: #c9701a; }
.mz-stat .streak-count { font-weight: 800; }

.mz-goal {
  padding: 8px 16px 10px;
  border-bottom: 1px solid #F0EDE5;
  background: #fff;
}
.mz-goal-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 5px;
}
.mz-goal-num { color: var(--accent); }
.mz-goal-track { height: 7px; background: #ECE8DE; border-radius: 999px; overflow: hidden; }
.mz-goal-fill { display: block; height: 100%; width: 60%; background: var(--accent); border-radius: 999px; }

.mz-reward {
  padding: 10px 16px 8px;
  border-top: 1px solid #F0EDE5;
  background: #fff;
}
.mz-reward-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mz-reward-badge { font-size: 15px; line-height: 1; }
.mz-reward-title { flex: 1; font-size: 12px; font-weight: 800; color: var(--text); }
.mz-reward-xp { font-size: 11px; font-weight: 800; color: var(--accent); }
.mz-level { height: 6px; background: #ECE8DE; border-radius: 999px; overflow: hidden; }
.mz-level-fill {
  display: block; height: 100%; width: 72%;
  background: linear-gradient(90deg, var(--accent), var(--reward));
  border-radius: 999px;
}

.mz-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 9px 0 13px;
  border-top: 1px solid #F0EDE5;
  background: #fff;
  gap: 0;
}
.mz-nav-item {
  position: relative;
  font-size: 16px;
  line-height: 1;
  opacity: 0.4;
}
.mz-nav-item--active { opacity: 1; }
.mz-nav-item--active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   Demo + showdown phones — JS-driven card cycling (runDemoPhone). The old
   CSS auto-cycle is disabled here; visibility is controlled by .is-shown /
   .is-leaving so any number of problems works. Only the on-screen card is
   tappable, so a hidden card never steals a tap.
============================================================ */
.demo-card,
.demo-card .demo-chip--correct,
.demo-card .demo-feedback,
.demo-card .demo-check,
.demo-card .demo-streak-pop {
  animation: none !important;            /* disable the legacy keyframe cycle */
}
.demo-card {
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  pointer-events: none;
}
.demo-card.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;                  /* the on-screen card is the tappable one */
}
.demo-card.is-leaving {
  opacity: 0;
  transform: translateY(-100%);          /* scrolls up and out */
}
@media (prefers-reduced-motion: reduce) {
  .demo-card { transition: none; }
  .demo-card.is-shown,
  .demo-card.is-leaving { transform: none; }
}

/* ============================================================
   Showdown Moozgy phone — gamified lesson-path home screen
   (a path of lesson nodes + unit banner + brain mascot, in Moozgy's
   own green/brain branding). Decorative; showdown side only.
============================================================ */
.mz-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
}
.mz-unit-label { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.mz-unit-title { margin: 2px 0 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.mz-unit-badge { font-size: 20px; line-height: 1; }

.mz-path-feed { background: var(--bg); }
.mz-path {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
}
.mz-node {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  border: none;
  transform: translateX(calc(var(--x, 0) * 44px));
}
.mz-node--done    { background: var(--reward);  box-shadow: 0 5px 0 #021E0C; }
.mz-node--current { background: var(--accent);  box-shadow: 0 6px 0 var(--accent-3); }
.mz-node--locked  { background: #DCD7C9; box-shadow: 0 5px 0 #C4BEAD; font-size: 16px; }

.mz-node-start {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 5px 11px;
  border-radius: 9px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.14);
  white-space: nowrap;
}
.mz-node-start::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: #fff;
}
.mz-mascot {
  position: absolute;
  top: 104px;
  right: 18px;
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,0.16));
}
@media (prefers-reduced-motion: no-preference) {
  .mz-node--current { animation: mzNodePulse 1.7s var(--ease) infinite; }
}
@keyframes mzNodePulse {
  0%, 100% { transform: translateX(calc(var(--x,0) * 44px)) translateY(0); }
  50%      { transform: translateX(calc(var(--x,0) * 44px)) translateY(-4px); }
}

/* Lesson node being auto-"solved" — a quick tap, overriding the current-node
   pulse while the demo completes it. */
.mz-node.is-solving { animation: mzNodeTap 460ms var(--ease-out-back); }
@keyframes mzNodeTap {
  0%   { transform: translateX(calc(var(--x, 0) * 44px)) scale(1); }
  35%  { transform: translateX(calc(var(--x, 0) * 44px)) scale(0.85); }
  100% { transform: translateX(calc(var(--x, 0) * 44px)) scale(1); }
}

/* ============================================================
   Showdown Moozgy phone — scrolling feed of problems that get
   auto-solved (the productive mirror of the social reels feed).
   JS sizes each problem to the feed height and scrolls between them.
============================================================ */
.mz-feed { position: relative; overflow: hidden; background: var(--bg); }
.mz-feed-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 600ms var(--ease);
}
.mz-prob {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
}
.mz-prob-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(45, 74, 62, 0.08);
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.mz-prob-q {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.mz-prob-seq {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--text);
}
.mz-prob-seq .mz-blank {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 0 6px;
}
.mz-prob-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mz-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 8px;
  border: 1.5px solid #DDD7C9;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  transition: background 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease);
}
/* When the problem is solved, its correct option flashes green with a pop. */
.mz-prob.is-solved .mz-opt--correct {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .mz-prob.is-solved .mz-opt--correct { animation: mzOptPop 420ms var(--ease-out-back); }
}
@keyframes mzOptPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* Reward indicators animate as the showdown demo solves each problem. */
.mz-goal-fill, .mz-level-fill { transition: width 480ms var(--ease); }
.mz-pop { animation: mzPop 360ms var(--ease-out-back); }
@keyframes mzPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}


/* ============================================================
   Signup/payment pop-in toast — floats over the page, pops in with a bounce,
   holds ~5s, then fades. It never touches the form, so the boxes stay as-is.
============================================================ */
.mz-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 300;
  max-width: min(90vw, 460px);
  padding: 14px 24px;
  background: var(--reward);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-align: center;
  box-shadow: 0 14px 34px rgba(8, 60, 30, 0.32);
  opacity: 0;
  transform: translateX(-50%) translateY(18px) scale(0.92);
  transition: opacity 320ms var(--ease-out-back), transform 320ms var(--ease-out-back);
  pointer-events: none;
}
.mz-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .mz-toast { transition: opacity 200ms linear; transform: translateX(-50%); }
  .mz-toast.is-visible { transform: translateX(-50%); }
}


/* ============================================================
   MOBILE POLISH — phone-only refinements (≤767.98px).
   The desktop layout is untouched; everything here re-tunes the
   squeezed-desktop bits for a true phone reading rhythm.
============================================================ */
@media (max-width: 767.98px) {

  /* Feature cards: desktop gives them tall, airy padding for a 3-col grid.
     Stacked on a phone that reads as six near-empty boxes. Compact them:
     icon sits beside the title, description tucks under, half the height. */
  .feature {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    padding: 18px 16px;
  }
  .feature-icon { grid-row: 1; }
  .feature-title { grid-row: 1; font-size: 18px; }
  .feature-desc { grid-column: 2; }

  /* Founder perk note "(3× longer)": the flex row turns it into a cramped
     side column on narrow cards. Merge it back into the sentence flow
     (display:contents drops its flex box; color/weight still inherit). */
  .tier-perks li strong { display: contents; }

  /* Keep the dare screen's "Skip the test" link clear of the fixed cookie
     banner on phone-height viewports. */
  .stage { padding-bottom: 104px; }

  /* Tighter vertical rhythm between pitch sections. */
  .pitch-block { margin-bottom: var(--s4); }
}

/* Very narrow phones: the share CTA label runs edge-to-edge. */
@media (max-width: 420px) {
  #share-btn .btn-label { font-size: 15px; }
  .btn--lg { padding: 0 18px; }
}

/* Demo + showdown phones on mobile: shrinking only the phone BOX while the
   text inside stayed desktop-sized squeezed the inner card — the question/
   answer wrapped taller and pushed the bottom answer chips out of view, and
   the appbar stat pills collided. Instead, keep the phone at its desktop
   dimensions (where the layout is known-good) and scale the WHOLE mockup as
   one unit with `zoom`, so every internal element keeps its exact desktop
   proportions and position. Taps still land correctly on scaled elements.
   (Both the demo phone and the showdown Moozgy phone share these classes.) */
@media (max-width: 767.98px) {
  .phone {
    width: 320px;
    height: 660px;
    /* Scale the whole mockup with transform, NOT zoom: iOS Safari mis-lays
       absolutely-positioned children (the explanation overlay, feedback ✓)
       under zoom, dropping them into the flow so they shoved the answer
       chips below the screen. transform:scale never affects inner layout —
       the phone lays out at full desktop size, then is painted smaller.
       The negative bottom margin returns the visual excess (660px × 0.18)
       so captions below don't float far away. */
    transform: scale(0.82);
    transform-origin: top center;
    margin-bottom: -119px;
  }
}

/* ============================================================
   Demo-card auto-fit. The card has a fixed height inside the phone, but
   question/answer length and the device's real font metrics vary — on some
   phones a long question or wide chip labels (which wrap to two lines) push
   the bottom chip row past the card edge. JS measures every card on the
   actual device and applies these steps only to cards that overflow.
============================================================ */
.demo-chip { min-width: 0; line-height: 1.15; }

.demo-card--compact .demo-q    { font-size: 14px; margin-bottom: 8px; }
.demo-card--compact .demo-seq  { font-size: 19px; margin-bottom: 12px; }

.demo-card--tiny .demo-tag  { font-size: 9px; }
.demo-card--tiny .demo-q    { font-size: 12.5px; margin-bottom: 6px; }
.demo-card--tiny .demo-seq  { font-size: 16px; margin-bottom: 8px; }

/* If an explanation ever outgrows the card (huge device fonts), it scrolls
   inside the overlay instead of spilling past the phone screen. */
.demo-explain { overflow-y: auto; }

/* ============================================================
   MOBILE HERO REORDER. On desktop the demo phone sits BESIDE the plans, so
   visitors see the product and the offer together. Stacked in DOM order on
   a phone, the pricing cards landed right after the brain test — selling
   before showing. Dissolve .hero-copy (display:contents) so every hero
   piece is a sibling, then order the story: headline → what it is (demo
   phone) → the offer (plans) → urgency (scarcity). Desktop is untouched.
============================================================ */
@media (max-width: 767.98px) {
  .hero-grid { display: flex; flex-direction: column; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow   { order: 1; }
  .hero-copy h1         { order: 2; }
  .hero-copy .subhead   { order: 3; margin-bottom: 0; }
  .hero-phone           { order: 4; align-items: center; }
  .hero-copy .tier-grid { order: 5; }
  .hero-copy .scarcity  { order: 6; }
}

/* Desktop: the hero column right-aligns its children, which left the
   "Tap the correct answer" caption hanging off the phone's right corner.
   Give the caption the phone's own width so it centers under the device.
   (Mobile centers the whole column already.) */
@media (min-width: 768px) {
  .hero-phone .phone-caption {
    width: 300px;
    text-align: center;
  }
}
@media (min-width: 1280px) {
  .hero-phone .phone-caption { width: 320px; }
}