/* ==========================================================================
   EarnGold landing page
   Desktop reference: Figma frame "EarnGold - Desktop" at 1440 wide.
   Below 1440 sizes scale fluidly down to 390. Each section ends with its
   tablet / phone rules; phones (< 700px) are the primary target.
   Order: tokens, base, shared components, sections top to bottom, gates, motion.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink: #141414;
  --ink-card: #1a1a1a;
  --ink-result: #191919;
  --pearl: #f5f3ec;
  --panel: #faf9f5;
  --hairline: #e3ded2;
  --gold: #c4a161;
  --gold-light: #e5d0a3;
  --gold-pale: #f1e2bd;
  --teal: #379586;
  --teal-deep: #0b2423;
  --teal-end: #003d3c;
  --loss: #740a2b;

  --font-display: "arpona", Georgia, serif;
  --font-label: "commuters-sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Afacad Flux", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type: value at 390 -> value at 1440 */
  --fs-h1: clamp(40px, 23.66px + 4.19vw, 84px);
  --fs-h2: clamp(34px, 22.86px + 2.857vw, 64px);
  --fs-quote: clamp(30px, 20.34px + 2.476vw, 56px);
  --fs-big: clamp(56px, 41.14px + 3.81vw, 96px);
  --fs-tally: clamp(56px, 47.09px + 2.286vw, 80px);
  --fs-equals: clamp(44px, 36.57px + 1.905vw, 64px);
  --fs-year: clamp(36px, 31.54px + 1.143vw, 48px);
  --fs-unit: clamp(34px, 28.8px + 1.333vw, 48px);
  --fs-result: clamp(30px, 23.31px + 1.714vw, 48px);
  --fs-label: clamp(26px, 22.29px + 0.952vw, 36px);
  --fs-question: clamp(22px, 18.29px + 0.952vw, 32px);
  --fs-body: clamp(17px, 15.89px + 0.286vw, 20px);

  /* Fluid spacing */
  --space-150: clamp(72px, 43.03px + 7.43vw, 150px);
  --space-120: clamp(72px, 54.17px + 4.571vw, 120px);
  --space-96: clamp(56px, 41.14px + 3.81vw, 96px);
  --space-64: clamp(40px, 31.09px + 2.286vw, 64px);
  --space-48: clamp(32px, 26.06px + 1.524vw, 48px);

  /* Side padding: 64 desktop, 40 tablet, 20 phone */
  --gutter: 64px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; }
}

@media (max-width: 699px) {
  :root {
    --gutter: 20px;
    --fs-h1: clamp(34px, 6.6px + 8.57vw, 40px); /* 34 at 320, 40 at 390 */
  }
}

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

html {
  background: var(--ink);
  color: var(--pearl);
  color-scheme: dark; /* dark native scrollbar and form defaults */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-width: 320px;
  font: 400 var(--fs-body)/1.2 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
b, strong { font-weight: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
img {
  -webkit-user-drag: none;
  user-select: none; /* a touch on the coin or the hand never starts a drag or a selection */
}
picture { display: block; }
picture img { width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
a, button, input { touch-action: manipulation; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--gold-light); color: var(--ink); }

/* Focus ring (keyboard only): gold-light on dark surfaces, ink on the cream ones */
:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.why-gold :focus-visible,
.quiz :focus-visible { outline-color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: min(1090px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.container--wide { width: min(1312px, 100% - 2 * var(--gutter)); }

.text-gold { color: var(--gold); }
.text-gold-light { color: var(--gold-light); }
.text-teal { color: var(--teal); }

/* ---------- Shared: headings ---------- */
.section-title {
  font: 300 var(--fs-h2)/1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.section-lead {
  margin-top: 8px; /* 24 from the title */
  line-height: 1.2;
  opacity: .6;
}

/* Tracked label between two gold diamonds */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 16px/20px var(--font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--gold-light);
  rotate: 45deg;
}

/* Chamfered label ("1 OZ. OF GOLD") */
.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 25px; /* 17 point + 8 */
  background: var(--pearl);
  color: var(--ink);
  font: 400 13px/16.2px var(--font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 17px 100%, 0 50%);
}

@media (max-width: 699px) {
  .section-lead { text-wrap: balance; }
}

/* ---------- Shared: YES / NO answers ---------- */
.answers {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* Colours come from variables so the dark and the cream version share every rule.
   States: default, hover, pressed, focus, selected, selected + hover, and the
   not-selected sibling (45 %, back to full on hover / focus: "you can still change this"). */
.answer {
  --line: rgb(245 243 236 / .3);
  --line-strong: var(--gold-light);
  --label: var(--panel);
  --tint: rgb(245 243 236 / .06);
  --tint-pressed: rgb(245 243 236 / .12);
  --selected: var(--gold-light);
  --selected-hover: var(--gold-pale);
  --selected-label: var(--ink);
  flex: 0 1 180px;
  min-width: 132px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--label);
  font-size: 24px;
  line-height: 32px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, scale 120ms ease;
}

.answers--quiz .answer {
  --line: rgb(20 20 20 / .3);
  --line-strong: var(--ink);
  --label: var(--ink);
  --tint: rgb(20 20 20 / .05);
  --tint-pressed: rgb(20 20 20 / .1);
  --selected: var(--ink);
  --selected-hover: #2a2a2a;
  --selected-label: var(--pearl);
  flex-basis: 120px;
  min-width: 0;
  height: 64px;
}

@media (hover: hover) and (pointer: fine) {
  .answer:hover {
    border-color: var(--line-strong);
    background-color: var(--tint);
  }
}
.answer:active { scale: .98; }
.answer:not([aria-pressed="true"]):active { background-color: var(--tint-pressed); }

.answer[aria-pressed="true"] {
  border-color: var(--selected);
  background-color: var(--selected);
  color: var(--selected-label);
}
@media (hover: hover) and (pointer: fine) {
  .answer[aria-pressed="true"]:hover {
    border-color: var(--selected-hover);
    background-color: var(--selected-hover);
  }
}

.answers:has([aria-pressed="true"]) .answer[aria-pressed="false"] { opacity: .45; }
.answers:has([aria-pressed="true"]) .answer[aria-pressed="false"]:active { opacity: 1; }
.answers:has([aria-pressed="true"]) .answer[aria-pressed="false"]:focus-visible {
  opacity: 1;
  border-color: var(--line-strong);
  background-color: var(--tint);
}
@media (hover: hover) and (pointer: fine) {
  .answers:has([aria-pressed="true"]) .answer[aria-pressed="false"]:hover { opacity: 1; }
}

/* Phones: always two equal halves of the container */
@media (max-width: 699px) {
  .answers .answer {
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
  }
}

/* ---------- Shared: primary button ---------- */
.button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  width: 300px;
  height: 80px;
  padding: 0 24px;
  border: 0;
  border-radius: 1px;
  background: var(--gold-light);
  color: var(--ink);
  font-size: 20px;
  line-height: 20.4px;
  letter-spacing: .17px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, scale 120ms ease;
}

.button__arrow {
  font-size: 17px;
  transition: translate 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background-color: var(--gold-pale); }
  .button:hover .button__arrow { translate: 4px 0; }
}
.button:active {
  scale: .98;
  background-color: #dcc594;
}

/* Sending: label stays, the arrow becomes three pulsing dots, no hover, not clickable */
.button__dots { display: none; gap: 4px; }
.button__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 900ms ease-in-out infinite;
}
.button__dots span:nth-child(2) { animation-delay: 150ms; }
.button__dots span:nth-child(3) { animation-delay: 300ms; }
@keyframes dot-pulse { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

.button[aria-busy="true"] {
  background-color: var(--gold-light);
  scale: 1;
  cursor: default;
}
.button[aria-busy="true"] .button__arrow { display: none; }
.button[aria-busy="true"] .button__dots { display: inline-flex; }

/* ---------- Header (over the hero) ---------- */
.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px; /* 48px tap area, same layout */
  padding: 4px;
  transition: opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :root:not(.is-locked) .header__logo:hover { opacity: .8; }
}
.is-locked .header__logo { cursor: default; }

@media (max-width: 699px) {
  .header { height: 72px; }
  .header__logo { gap: 9px; margin: -9px; padding: 9px; }
  .header__mark { width: 29px; }
  .header__wordmark { width: 69px; }
}

/* ---------- Hero ----------
   The coin's visual centre sits on the bottom edge of the first screen.
   The min-height puts the coin there; the content above takes half of any
   spare height, so the layout is the same locked and unlocked (no jump). */
.hero {
  --coin-w: min(615px, 78vw);
  --coin-h: calc(var(--coin-w) * 645 / 615);
  --pad-top: clamp(112px, 17.8svh, 160px);
  --pad-bottom: 120px;
  --gap: 40px; /* minimum space between buttons and coin */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  min-height: calc(100svh + var(--coin-h) * .504 + var(--pad-bottom));
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 50%, var(--teal-deep) 82%, var(--teal-end) 100%);
  text-align: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  width: 100%;
  margin-top: auto;
}

.hero__title {
  max-width: 15.1em; /* 1268 at 84px */
  font: 300 var(--fs-h1)/1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__line { display: block; }

@media (max-width: 1023px) {
  .hero__title,
  .section-title { text-wrap: balance; }
}
.hero__line--gold { color: var(--gold-light); }

.hero__answers { width: 100%; }

.hero__coin {
  width: var(--coin-w);
  margin-top: auto;
}

@media (max-width: 699px) {
  .hero {
    --coin-w: min(340px, 78vw);
    --pad-top: 96px;
    --pad-bottom: calc(72px + env(safe-area-inset-bottom));
    --gap: 32px;
  }
  .hero__content { gap: 32px; }
  .hero__title { line-height: 1.05; }
}

/* ---------- Why gold ---------- */
.why-gold {
  padding-block: var(--space-150);
  background: var(--pearl);
  color: var(--ink);
}

.why-gold__title { max-width: 15.03em; } /* 962 at 64px */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: var(--space-64);
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: var(--space-48) clamp(20px, 2vw + 12px, 48px) 56px;
  border: 1px solid var(--hairline);
  background: var(--panel);
  text-align: center;
}

.panel__year {
  font: 300 var(--fs-year)/1.5 var(--font-display);
  letter-spacing: -0.01em;
}

.panel__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.panel__coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 191px;
}
.panel__coin .chip {
  position: relative;
  margin-top: -26px; /* overlaps the coin as in Figma */
}

.panel__equals {
  font: 300 var(--fs-equals)/1 var(--font-display);
  letter-spacing: -0.01em;
}

.panel__bills { width: 137px; }

.tally {
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: 80px;
  color: rgb(20 20 20 / .7);
  font: 300 var(--fs-unit)/80px var(--font-display);
  letter-spacing: -0.01em;
  white-space: pre;
}
.tally__count {
  color: var(--gold);
  font-size: var(--fs-tally);
}
.tally [data-count] { text-align: right; }

.panel__price {
  color: rgb(20 20 20 / .6);
  font: 400 14px/17.5px var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Stepper under the phone carousel: 1980 —— TODAY */
.stepper { display: none; }

.stepper__step {
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 13px/16px var(--font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .45;
  cursor: pointer;
  transition: opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .stepper__step:hover { opacity: .8; }
}
.stepper__step[aria-current="true"] { opacity: 1; }
.stepper__step:active { opacity: .7; }
.stepper__step:focus-visible {
  opacity: 1;
  outline-offset: -2px;
}

/* Hairline that fills gold-light as the carousel moves (--progress 0..1, set by main.js) */
.stepper__track {
  position: relative;
  width: 72px;
  height: 1px;
  background: rgb(20 20 20 / .15);
}
.stepper__track::after {
  content: "";
  position: absolute;
  inset: -0.5px 0;
  background: var(--gold-light);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* Phones: native swipe carousel. Cards are 84 % of the scroller, so a slice
   of the other card always shows at the screen edge. */
@media (max-width: 699px) {
  .compare {
    display: flex;
    gap: 12px;
    margin-right: calc(-1 * var(--gutter)); /* bleed to the right edge, keep the left gutter */
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .compare::-webkit-scrollbar { display: none; }

  .panel {
    flex: 0 0 calc((100% + var(--gutter)) * .84);
    gap: 24px;
    padding: 32px 20px 36px;
    scroll-snap-align: center;
    --fs-year: 36px;
    --fs-equals: 44px;
    --fs-tally: min(64px, 21.2vw - 14.4px); /* 64 at 390, shrinks so "44 X $100" fits at 320 */
    --fs-unit: calc(var(--fs-tally) * .625);
  }
  .panel__body { gap: 12px; }
  .panel__coin { width: 150px; }
  .panel__coin .chip { margin-top: -20px; }
  .panel__bills { width: 120px; }
  .tally { height: 64px; line-height: 64px; }
  .panel__price { font-size: 12px; line-height: 15px; }

  .js .stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
  }
}

/* ---------- Quote ---------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-96);
  padding-block: var(--space-120);
}

.quote__title {
  max-width: 14.45em; /* 809 at 56px */
  margin-inline: auto;
  font-size: var(--fs-quote);
  text-align: center;
  text-wrap: balance;
}

.quote__row {
  display: flex;
  gap: 16px;
}

.quote__photo {
  flex: none;
  width: calc((100% - 16px) * 632 / 1296); /* 632 of the 1312 row */
  aspect-ratio: 632 / 750;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink-card);
}
.quote__photo img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.quote__card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-64);
  padding: 0 clamp(24px, 3vw, 56px);
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink-card);
  text-align: center;
}

.quote__text,
.quote__source { position: relative; }

.quote__text {
  max-width: 9.86em; /* 552 at 56px */
  font: 300 var(--fs-quote)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.quote__source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.quote__name {
  color: #f7f2e9;
  font: 300 28px/25.2px var(--font-display);
  letter-spacing: -0.01em;
}

/* Faint gold pattern behind the quote (Figma node 1805:5896), not on small screens */
@media (min-width: 900px) {
  .quote__card::before {
    content: "";
    position: absolute;
    top: calc(50% - 164px);
    left: calc(50% - 525px);
    width: 1132px;
    height: 601px;
    background: url("assets/svg/deco-quote-pattern.svg") no-repeat 0 0 / 100% 100%;
    pointer-events: none;
  }
}

@media (max-width: 899px) {
  .quote__row { flex-direction: column; }
  .quote__photo {
    width: 100%;
    max-height: 70svh;
    aspect-ratio: 4 / 5;
  }
  .quote__card { flex: none; padding-block: 56px; }
}

@media (max-width: 699px) {
  .quote__text { line-height: 1.133; } /* 30 / 34 */
  .quote__card { gap: 32px; padding-inline: 20px; }
}

@media (max-width: 359px) {
  .quote__card .chip { padding-inline: 21px; letter-spacing: .06em; }
}

/* ---------- Why now ---------- */
.why-now { padding: var(--space-150) 0 var(--space-120); }

.why-now__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-96);
}

/* Chart. Figma plot: 1090 x 540, lines area y 24..484 ($40k..$0). */
.chart {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
}

.chart__key {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(245 243 236 / .8);
  font: 400 16px/20px var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chart__key::before {
  content: "";
  flex: none;
  width: 40px;
  height: 5px;
  background: var(--gold-light);
}
.chart__key--usd::before { background: var(--teal); }

.chart__plot {
  position: relative;
  height: clamp(300px, 46vw, 540px);
}

.chart__area {
  position: absolute;
  inset: 24px 0 56px;
}

.chart__grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(245 243 236 / .1);
}
.chart__grid:nth-child(1) { top: 0; }
.chart__grid:nth-child(2) { top: 25%; }
.chart__grid:nth-child(3) { top: 50%; }
.chart__grid:nth-child(4) { top: 75%; }
.chart__grid:nth-child(5) { top: 100%; }
.chart__grid--base { background: rgb(245 243 236 / .3); }
.chart__grid span {
  position: absolute;
  left: 0;
  bottom: 7px;
  color: rgb(245 243 236 / .5);
  font: 400 15px/18.8px var(--font-label);
  letter-spacing: .04em;
}

.chart__marks,
.chart__svg,
.chart__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.chart__svg { overflow: visible; }

.chart__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.chart__line--gold { stroke: url(#chart-gold-stroke); stroke-width: 6px; }
.chart__line--usd { stroke: var(--teal); stroke-width: 4px; }

/* Dots and labels sit at --x / --y percent of the lines area */
.chart__dot,
.chart__value,
.chart__end,
.chart__start {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
}

.chart__dot {
  width: 14px;
  height: 14px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--gold-light);
  translate: -50% -50%;
}
.chart__dot--end {
  width: 20px;
  height: 20px;
  border-width: 4px;
}
.chart__dot--usd { background: var(--teal); }

.chart__value {
  translate: -50% calc(-100% - 19px);
  color: rgb(229 208 163 / .85);
  font: 400 15px/18.8px var(--font-label);
  letter-spacing: .04em;
  white-space: nowrap;
}
.chart__value--left { translate: calc(-100% - 19px) -50%; }

/* End labels: right-aligned 12px left of the line end, 24px above it */
.chart__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  translate: calc(-100% - 12px) calc(-100% - 24px);
  white-space: nowrap;
}
.chart__end-value {
  color: var(--pearl);
  font: 300 56px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.chart__end--gold .chart__end-value { color: var(--gold-light); }
.chart__end-label,
.chart__start {
  color: rgb(245 243 236 / .7);
  font: 400 14px/17.5px var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chart__start {
  left: 16px;
  margin-top: 14px;
  color: rgb(245 243 236 / .65);
  white-space: nowrap;
}

.chart__years {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 20px;
}
.chart__year {
  position: absolute;
  left: calc(var(--x) * 1%);
  translate: -12px 0;
  color: rgb(245 243 236 / .55);
  font: 400 16px/20px var(--font-label);
  letter-spacing: .04em;
}
.chart__year:first-child { translate: 0 0; }
.chart__year:last-child { translate: -100% 0; }

@media (max-width: 1023px) {
  .chart__end-value { font-size: clamp(32px, 4.5vw, 56px); }
}

/* Narrower plots: intermediate value labels would collide; the dots stay */
@media (max-width: 899px) {
  .chart__value { display: none; }
}

/* Phones: condensed chart. The USD end label sits under its line here,
   because above it the steep 2025-26 gold segment would cross it. */
@media (max-width: 699px) {
  .chart { gap: 24px; }
  .chart__legend { flex-direction: column; gap: 8px; }
  .chart__key { gap: 10px; font-size: 12px; line-height: 15px; }
  .chart__key::before { width: 32px; height: 4px; }

  .chart__plot { height: 316px; }
  .chart__area { bottom: 44px; }
  .chart__grid span { bottom: 5px; font-size: 12px; line-height: 15px; }
  .chart__line--gold { stroke-width: 4px; }
  .chart__line--usd { stroke-width: 3px; }
  .chart__dot { width: 10px; height: 10px; border-width: 2px; }
  .chart__dot--end { width: 14px; height: 14px; border-width: 3px; }

  .chart__end {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    translate: calc(-100% - 6px) calc(-100% - 12px);
  }
  .chart__end--usd { translate: calc(-100% - 6px) 16px; }
  .chart__end-value { font-size: 28px; }
  .chart__end-label,
  .chart__start { font-size: 11px; line-height: 14px; }
  .chart__start { left: 10px; margin-top: 12px; }

  .chart__years { bottom: 6px; }
  .chart__year { translate: -50% 0; font-size: 13px; line-height: 16px; }
  .chart__year:nth-child(even) { display: none; } /* keep 2020, 2022, 2024, 2026 */
}

/* Result cards under the chart */
.outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.outcome {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.outcome__label {
  color: #fff;
  font: 300 var(--fs-label)/1.5 var(--font-display);
}

.outcome__card {
  border: 1px solid rgb(245 243 236 / .08);
  background: var(--ink-result);
}
.outcome--gold .outcome__card { border-color: var(--gold-light); }

.outcome__banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(24px, 3.33vw, 48px);
  background: var(--loss);
  color: rgb(255 255 255 / .85);
  font: 400 14px/17.5px var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.outcome--gold .outcome__banner {
  background: var(--gold-light);
  color: rgb(20 20 20 / .75);
}

.outcome__change {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04em;
}
.outcome--gold .outcome__change { color: var(--ink); }

.outcome__value {
  padding: 36px clamp(24px, 3.33vw, 48px) 40px;
  color: var(--pearl);
  font: 300 var(--fs-big)/1 var(--font-display);
  letter-spacing: -0.01em;
}
.outcome--gold .outcome__value { color: var(--gold-light); }

/* Counters keep their final width while counting (set by main.js) */
[data-count] {
  display: inline-block;
  min-width: var(--count-width, 0);
}

@media (max-width: 699px) {
  .outcomes { grid-template-columns: 1fr; gap: 40px; }
  .outcome { gap: 12px; }
  .outcome__value { padding-block: 28px 32px; }
}

/* ---------- Statement (gate 2) ---------- */
.statement {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-120);
}

/* Faint WQ pattern (Figma node 1835:7347) */
.statement::before {
  content: "";
  position: absolute;
  top: 45px;
  left: calc(50% - 655px);
  width: 1300px;
  height: 692px;
  background: url("assets/svg/deco-statement-pattern.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

.statement__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.statement__hand { width: min(800px, 100%); }

.statement__title {
  max-width: 11.69em; /* 748 at 64px */
  margin-top: 14px;
}

.statement__answers {
  width: 100%;
  margin-top: 32px;
}

@media (max-width: 699px) {
  .statement::before { top: 0; }
  .statement__answers { margin-top: 28px; }
}

/* ---------- Step 2: earn container + quiz ---------- */
.earn {
  --box-margin: 64px;
  --box-pad: 40px 40px 80px 56px;
  padding: var(--space-120) 0 var(--space-150);
  background: linear-gradient(180deg, var(--ink) 0%, var(--teal-deep) 70%, var(--teal-end) 100%);
}

.earn__box {
  position: relative;
  width: min(1312px, 100% - 2 * var(--box-margin));
  margin-inline: auto;
  padding: var(--box-pad);
  overflow: hidden;
  background: var(--pearl);
  color: var(--ink);
}

.earn__head {
  display: flex;
  align-items: center;
  min-height: 206px;
}

/* Hand + card: top right, cut by the container's right edge */
.earn__visual {
  position: absolute;
  top: 30px;
  right: -4.04%;
  width: 41.6%;
}

.earn__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 55%;
}

.earn__title {
  font: 300 var(--fs-h2)/1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.earn__lead {
  color: rgb(20 20 20 / .7);
  line-height: 1.335;
}

.quiz { margin-top: 81px; } /* Figma: head to first question with all four shown */

.question {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
}
.quiz__item + .quiz__item .question { border-top: 1px solid rgb(20 20 20 / .12); }

/* Diamond marker with the question number */
.question__marker {
  position: relative;
  z-index: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 68px;
  height: 72px;
  color: var(--gold-light);
  font: 300 20px/24px var(--font-display);
}
.question__marker::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(245 243 236 / .25);
  background: var(--ink);
  rotate: 45deg;
}

.question__text {
  flex: 1;
  font: 300 var(--fs-question)/1.5 var(--font-display);
  letter-spacing: -0.01em;
  transition: opacity 160ms ease;
}

/* Answered rows step back so the eye goes to the newest row or the result */
.quiz__item.is-answered .question__text { opacity: .6; }
.quiz__item.is-answered:focus-within .question__text { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .quiz__item.is-answered:hover .question__text { opacity: 1; }
}

.question .answers { flex: none; width: 248px; }

/* Result cards */
.result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  margin-top: 16px;
  padding: 40px;
  border: 2px solid var(--gold);
  background: linear-gradient(0deg, rgb(229 208 163 / .1), rgb(229 208 163 / 0)), var(--ink);
  color: #fff;
}
.result--listed { gap: 16px; }

.result__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result__title {
  font: 300 var(--fs-result)/1.5 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.result__title--pearl { color: var(--pearl); }
.result__title--gold {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gold-light);
}
.result__title--gold img { flex: none; width: 48px; }

.result__body {
  color: rgb(255 255 255 / .8);
  line-height: 1.335;
  overflow-wrap: anywhere;
}
.result__strong { color: #fff; }

/* Waitlist form */
.waitlist {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.waitlist__field {
  flex: 1;
  min-width: 0;
}

.waitlist__input {
  display: block;
  width: 100%;
  height: 80px;
  padding: 0 20px;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 0;
  background: transparent;
  color: #fff;
  caret-color: var(--gold-light);
  font-size: 24px;
  line-height: 32px;
  transition: border-color 160ms ease, opacity 160ms ease;
}
.waitlist__input::placeholder { color: rgb(255 255 255 / .5); }
@media (hover: hover) and (pointer: fine) {
  .waitlist__input:hover { border-color: rgb(255 255 255 / .55); }
}
.waitlist__input:focus,
.waitlist__input:focus-visible {
  outline: none;
  border-color: var(--gold-light);
}
.waitlist__input:read-only { opacity: .6; } /* while sending */

/* Browser autofill paints its own background: cover it with the card colour */
.waitlist__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #24221f inset;
  box-shadow: 0 0 0 100px #24221f inset;
  -webkit-text-fill-color: #fff;
}

/* Error / failure message, in the loss-banner style of the Why now cards */
.waitlist__error {
  margin-top: 8px;
  padding: 9px 16px;
  background: var(--loss);
  color: #fff;
  font: 400 13px/16px var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .earn { --box-margin: 40px; }
}

/* Under 900: the visual becomes a block above the title, still touching the right edge */
@media (max-width: 899px) {
  .earn__head {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    min-height: 0;
  }
  .earn__visual {
    position: static;
    align-self: flex-end;
    width: min(546px, 72%);
    margin: -16px -40px 0 0;
  }
  .earn__intro { max-width: none; }
  .quiz { margin-top: 32px; }
}

@media (max-width: 759px) {
  .question {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: 20px 16px;
    padding: 24px 0;
  }
  .question__marker {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .question__marker::before { width: 28px; height: 28px; } /* 40px across */
  .question__text { padding-top: 5px; }
  .question .answers { grid-column: 1 / -1; width: auto; }
  .answers--quiz .answer { flex: 1 1 0; height: 56px; }
}

@media (max-width: 699px) {
  .earn { --box-margin: 12px; --box-pad: 24px 20px 32px; }
  .earn__visual {
    width: calc((100% + 40px) * .72); /* 72 % of the container */
    margin: -8px calc(-20px - 4%) 0 0;
  }
  .earn__title { font-size: 36px; }
  .question__text { line-height: 30px; text-wrap: pretty; }
  .result__title { text-wrap: balance; }
  .result__body,
  .earn__lead { text-wrap: pretty; }
  .result { gap: 28px; padding: 24px 20px; }
  .result--listed { gap: 12px; }
  .result__title { line-height: 1.2; }
  .result__title--gold img { width: 36px; }
  .waitlist { flex-direction: column; align-items: stretch; }
  .waitlist__field { flex: none; }
  .waitlist__error {
    padding-inline: 12px;
    font-size: 12px;
    letter-spacing: .05em;
    text-wrap: balance;
  }
  .waitlist__input { height: 60px; padding: 0 16px; font-size: 20px; }
  .result .button { width: 100%; height: 60px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); }

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding-block: 64px;
}

.footer__copy,
.footer__legal a {
  color: rgb(245 243 236 / .5);
  font-size: 20px;
  line-height: 24px;
}
.footer__copy { color: rgb(255 255 255 / .5); }

.footer__emblem { width: 68px; }

.footer__nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__social,
.footer__legal {
  display: flex;
  align-items: center;
}
.footer__social { gap: 16px; }
.footer__legal { gap: 10px; }
.footer__legal li {
  padding-left: 10px;
  border-left: 1px solid rgb(245 243 236 / .5);
}

/* Links: 48px tap area from padding (negative margin keeps the layout) */
.footer__nav a {
  position: relative;
  display: block;
  margin: -12px;
  padding: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, scale 120ms ease;
}
.footer__nav a:focus-visible { outline-offset: -8px; }

.footer__social a { color: #fff; }
.footer__social a:active { scale: .94; }

/* Text links: 50 % -> 100 % with a hairline sliding in from the left */
.footer__legal a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}
.footer__legal a:focus-visible { color: var(--pearl); }
.footer__legal a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .footer__social a:hover { color: var(--gold-light); }
  .footer__legal a:hover { color: var(--pearl); }
  .footer__legal a:hover::after { transform: scaleX(1); }
}
.footer__legal a:active { color: rgb(245 243 236 / .7); }

/* Stacked and centred as soon as the three columns no longer fit on one line */
@media (max-width: 959px) {
  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 32px;
    padding-block: 56px calc(48px + env(safe-area-inset-bottom));
    text-align: center;
  }
  .footer__copy { order: 1; } /* emblem, links, then © */
  .footer__nav {
    justify-self: center;
    flex-direction: column;
    gap: 24px;
  }
  .footer__social { gap: 24px; }
  .footer__legal { gap: 14px; }
  .footer__legal li { padding-left: 14px; }
  .footer__legal li:first-child { padding-left: 0; border-left: 0; }
  .footer__copy,
  .footer__legal a { font-size: 17px; line-height: 24px; }
}

/* ---------- Gates ----------
   .is-locked (set before first paint, removed by main.js on the first answer):
   nothing to scroll, nothing after the hero. */
.is-locked,
.is-locked body {
  height: 100%;
  overflow: hidden;
}
/* Desktop with classic scrollbars: keep the (inactive) scrollbar while locked,
   so nothing shifts sideways when the page unlocks. */
@media (hover: hover) and (pointer: fine) {
  .is-locked { overflow-y: scroll; }
}
.is-locked [data-gate] { display: none; }

/* ---------- Motion ---------- */

/* Quiz rows and result cards expand from 0 height and fade in */
.reveal {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 420ms var(--ease-out), opacity 420ms var(--ease-out);
}
.reveal__inner {
  min-height: 0;
  overflow: hidden;
  margin-inline: -8px; /* room for focus rings */
  padding-inline: 8px;
}
@starting-style {
  .has-motion .reveal { grid-template-rows: 0fr; opacity: 0; }
  .has-motion .reveal--fade { grid-template-rows: 1fr; }
}

/* Hero entrance on load. main.js adds .is-ready once the fonts are in (max 1.2 s);
   until then the animated parts stay hidden so they never show in a fallback font. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.is-ready, .is-instant) :is(.hero__line, .hero__answers, .hero__coin) { visibility: hidden; }
  .is-ready .hero__line,
  .is-ready .hero__answers { animation: rise 700ms var(--ease-out) both; }
  .is-ready .hero__line--gold { animation-delay: 90ms; }
  .is-ready .hero__answers { animation-delay: 180ms; }
  .is-ready .hero__coin { animation: rise-coin 900ms var(--ease-out) 120ms both; }
}

/* Lazy images fade in when they arrive (main.js marks the ones still loading) */
img[loading="lazy"].is-loading { opacity: 0; }
:where(img[loading="lazy"]) { transition: opacity 250ms ease; }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes rise-coin { from { opacity: 0; translate: 0 40px; } }

/* Why gold: bills settle in when their card comes into view */
.panel__bills { transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); }
.has-motion .panel:not(.is-visible) .panel__bills { opacity: 0; translate: 0 12px; }

/* Phone carousel: one-time nudge so people see it moves sideways */
.compare.is-hinting .panel { animation: nudge 600ms var(--ease-in-out); }
@keyframes nudge { 50% { translate: -28px 0; } }

/* Chart: main.js reveals the lines; dots and labels pop in as the line passes */
.chart__fill { transition: opacity 1.6s var(--ease-in-out); }
.chart__dot,
.chart__value,
.chart__end,
.chart__start { transition: opacity 400ms var(--ease-out), scale 400ms var(--ease-out); }
.chart.is-pending .chart__fill:not(.is-shown),
.chart.is-pending .chart__start:not(.is-shown),
.chart.is-pending .chart__end,
.chart.is-pending .chart__dot--end { opacity: 0; }
.chart.is-pending [data-at]:not(.is-shown) { opacity: 0; scale: .4; }

/* ?state= screenshots and reduced motion: everything in its final state */
.is-instant *,
.is-instant *::before,
.is-instant *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}