/* Perfect Pause Challenge landing page.
 *
 * theme.css is linked ahead of this file in the page head rather than imported
 * here, so the palette and the type land with the first paint.
 *
 * The palette and the type come from theme.css, which is the game's own
 * (ColorToken.swift, Lilita One + Fredoka). This file only says how those
 * tokens are used on a page. The gameplay box keeps the authoring preview's
 * feedback tones (pause-game-generator components/GameplayPreview.tsx), since
 * that box is the thing people are being shown and it already reads well.
 */

:root {
  --page: var(--navy-deepest);
  --line: rgba(244, 232, 160, 0.14);
  --line-strong: rgba(244, 232, 160, 0.3);
  --text: var(--cream);
  --text-2: rgba(251, 250, 219, 0.72);
  --text-3: rgba(244, 232, 160, 0.55);

  /* Generator preview tokens, for the verdict strip only. */
  --done: #2f6b45;
  --done-bg: #edf3ee;
  --risk: #a83a2c;
  --risk-bg: #faedea;

  /* The frame grows with the window so content never runs into the edge; the
     column itself stops at --max and stays centred. */
  --gutter: clamp(22px, 6vw, 72px);
  --max: 1120px;

  /* One spacing scale for the whole page. Every gap between blocks is a step on
     it, so a section, a card and a button row are spaced by the same logic
     rather than by whatever number looked right at the time. */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 26px;
  --space-5: 38px;
  --space-6: 56px;
  --space-7: clamp(64px, 9vw, 104px);

  font-family: var(--font-body);
}

* { box-sizing: border-box; }



body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.004em;
}
p { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Light behind everything: static blobs, so nothing animates for battery. */
.aurora {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 18% 16%, rgba(45, 106, 153, 0.75), transparent 70%),
    radial-gradient(42% 52% at 80% 8%, rgba(250, 184, 31, 0.3), transparent 70%),
    radial-gradient(38% 42% at 58% 62%, rgba(25, 197, 232, 0.22), transparent 70%);
  filter: blur(46px);
  opacity: 0.7;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* Said for search engines and screen readers, not shown: the visible headline
   is about the move, not about the platform. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- atoms ---------- */

/* The game's own button, ported from PopupCardButton.swift: a rounded plate
   with a body gradient, a lit band across the upper third, a dark outline, and
   a hard edge under it that the press sinks the button into. */
.button {
  --plate-top: var(--gold-light);
  --plate-bottom: var(--gold);
  --plate-edge: var(--gold-deep);
  --plate-ink: var(--ink-on-gold);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 2px solid var(--plate-edge);
  border-radius: 15px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-decoration: none;
  color: var(--plate-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--plate-top), var(--plate-bottom));
  box-shadow:
    0 5px 0 var(--plate-edge),
    0 12px 22px rgba(2, 16, 43, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.button:hover { filter: brightness(1.05); }
.button:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--plate-edge),
    0 4px 10px rgba(2, 16, 43, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.button--ghost {
  --plate-top: #16386e;
  --plate-bottom: #0a2350;
  --plate-edge: #02102b;
  --plate-ink: var(--cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--plate-top), var(--plate-bottom));
  box-shadow:
    0 5px 0 var(--plate-edge),
    0 12px 22px rgba(2, 16, 43, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.button--small { padding: 9px 16px; font-size: 0.88rem; border-radius: 12px; }
.button--large { padding: 16px 28px; font-size: 1.12rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
}
.pill--quiet { color: var(--text-3); }
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(163, 230, 53, 0); }
}

.grad {
  background: linear-gradient(100deg, var(--gold-light), var(--star) 45%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* Sections arrive as they come into view. They start visible and are only
   hidden once the observer in demo.js has claimed them, so a browser that never
   runs it shows the page rather than a blank column. */
.reveal { transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-armed { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  backdrop-filter: blur(14px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  text-decoration: none;
}
.brand img { border-radius: 9px; }
.topbar__nav { display: flex; gap: 22px; font-size: 0.9rem; color: var(--text-2); }
.topbar__nav a { text-decoration: none; }
.topbar__nav a:hover { color: var(--text); }

/* ---------- hero ---------- */

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { scroll-margin-top: 84px; }

.hero {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-6) 0 var(--space-7);
}

h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); margin: var(--space-4) 0 0; }
.lede { margin-top: var(--space-4); max-width: 34rem; font-size: 1.06rem; color: var(--text-2); }

.hero__stats {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats dt {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gold-light);
}
.hero__stats dd { margin: 0; font-size: 0.82rem; color: var(--text-3); }

/* ---------- the phone ---------- */

.hero__demo { display: flex; justify-content: center; }
.phone { position: relative; width: 100%; max-width: 282px; margin: 0 auto; }
.phone__glow {
  position: absolute;
  inset: 6% -18% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(45, 106, 153, 0.75), transparent 70%);
  filter: blur(50px);
}
.phone__frame {
  padding: 9px;
  border-radius: 48px;
  background: linear-gradient(150deg, #123059, #02102b 55%, #0d2952);
  box-shadow:
    0 40px 90px rgba(2, 16, 43, 0.75),
    inset 0 0 0 1px rgba(255, 214, 109, 0.35);
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  aspect-ratio: 9 / 19.5;
  background: #000;
}
.phone__island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 21px;
  border-radius: 999px;
  background: #000;
  z-index: 6;
}

.phone__tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.chipbutton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 2px solid #02102b;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #16386e, #0a2350);
  box-shadow: 0 4px 0 #02102b, 0 8px 16px rgba(2, 16, 43, 0.4);
  color: var(--cream);
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.84rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.chipbutton:hover { filter: brightness(1.12); }
.chipbutton:active { transform: translateY(3px); box-shadow: 0 1px 0 #02102b, 0 3px 8px rgba(2, 16, 43, 0.4); }
.chipbutton--go {
  color: var(--ink-on-gold);
  border-color: var(--gold-deep);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 4px 0 var(--gold-deep), 0 8px 16px rgba(2, 16, 43, 0.45);
}
.chipbutton--go:active { box-shadow: 0 1px 0 var(--gold-deep), 0 3px 8px rgba(2, 16, 43, 0.45); }
.chipbutton[hidden] { display: none; }

.phone__caption {
  margin-top: 10px;
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* ---------- the gameplay box (generator preview, one to one) ---------- */

/* The picture fills the screen: the box keeps the clip's own aspect and is
   sized by height, so the screen's slightly taller shape crops a sliver off the
   sides instead of leaving black bars. The outline lives inside the same box,
   which is why it stays glued to the subject through the crop. The HUD sits
   outside the box, or it would be cropped with it. */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass {
  position: relative;
  height: 100%;
  width: auto;
  min-width: 100%;
  flex: none;
  background: #000;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* The press is the gesture, so the browser must not steal it for a scroll. */
  touch-action: none;
  /* Replaced by the clip's own aspect once its metadata lands (demo.js). */
  aspect-ratio: 9 / 16;
  transition: opacity 0.2s ease;
}
.glass::after {
  /* The press target covers the whole screen, including the cropped sides. */
  content: "";
  position: absolute;
  inset: 0;
}
.glass:active { opacity: 0.92; }
.glass video { display: block; width: 100%; height: 100%; object-fit: fill; }

.glass__outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.glass__outline polygon {
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(163, 230, 53, 0.8));
}

.glass__top {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 44px 12px 30px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent);
  color: #fff;
  pointer-events: none;
}
.glass__ident { min-width: 0; }
.glass__kicker {
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.glass__title {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dots { display: flex; gap: 4px; }
.dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: #fff;
  transition: background 0.2s ease;
}
.dots span.spent { background: transparent; }
.glass__cue {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  font-size: 0.67rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.glass__cue.is-hidden { opacity: 0; }

.verdict {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 13px;
  background: var(--done-bg);
  color: var(--done);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* `display: flex` above outranks the `hidden` attribute, so the strip has to
   be told to disappear explicitly or it sits on the picture forever. */
.verdict[hidden] { display: none; }
.verdict--miss { background: var(--risk-bg); color: var(--risk); }
.verdict__text { display: flex; flex-direction: column; min-width: 0; }
.verdict__title { font-size: 0.7rem; font-weight: 700; }
.verdict__detail { font-size: 0.62rem; opacity: 0.8; }
.verdict__stars { margin-left: auto; font-size: 0.75rem; letter-spacing: 1px; color: #d9a400; }
.verdict__stars .dim { opacity: 0.25; }
.verdict__stars[hidden] { display: none; }

.glass__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  z-index: 7;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  background: #000;
}
.glass__loading[hidden] { display: none; }

/* The end card, after all three levels are cleared. */
.finish {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 26px 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(3, 26, 64, 0.94), rgba(2, 16, 43, 0.985));
  backdrop-filter: blur(3px);
  animation: finish-in 0.25s ease-out;
}
.finish[hidden] { display: none; }
@keyframes finish-in { from { opacity: 0; } to { opacity: 1; } }
.finish__mascot {
  width: 46%;
  height: auto;
  margin-bottom: 4px;
  filter: drop-shadow(0 12px 26px rgba(25, 197, 232, 0.35));
  animation: finish-bob 2.6s ease-in-out infinite;
}
@keyframes finish-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.finish__kicker {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--star);
}
.finish__title {
  font-size: 1.7rem;
  color: var(--cream);
}
.finish__line {
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(251, 250, 219, 0.75);
}
.finish__cta {
  margin-top: var(--space-3);
  padding: 12px 24px;
  border: 2px solid var(--gold-deep);
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink-on-gold);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 5px 0 var(--gold-deep), 0 12px 22px rgba(2, 16, 43, 0.5);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.finish__cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-deep), 0 4px 10px rgba(2, 16, 43, 0.5); }
.finish__again {
  margin-top: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.74rem;
  color: rgba(244, 232, 160, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- how it scores ---------- */

.how { padding: var(--space-7) 0; border-top: 1px solid var(--line); }

.section-head { max-width: 46rem; }
.section-head h2 { margin-top: var(--space-3); font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
/* The mascot sits beside the heading and never pushes it around: it is the
   first thing to go when the column gets narrow. */
.section-head--withmascot {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.section-head--withmascot > div { max-width: 46rem; }
.section-mascot {
  width: clamp(88px, 11vw, 132px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 14px 30px rgba(25, 197, 232, 0.28));
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.bento__cell {
  padding: var(--space-4);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bento__cell:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.bento__cell h3 { font-size: 1.12rem; margin-bottom: var(--space-1); }
.bento__cell p { font-size: 0.93rem; color: var(--text-2); }
.bento__cell--wide { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
/* The leaderboard card. The names are invented and the card says so: a made up
   board that pretends to be live data is a lie a landing page does not need. */
.bento__cell--tall { grid-row: span 2; display: flex; flex-direction: column; }

/* The podium: three places, the winner raised. Pure decoration, so it is
   hidden from the accessibility tree and the names below carry the meaning. */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  margin-top: var(--space-4);
}
.podium__place { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.podium__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--text-2);
}
.podium__crown { font-size: 0.8rem; color: var(--star); line-height: 1; }
.podium__block {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: 6px;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: var(--ink-on-gold);
}
.podium__place--1 .podium__block {
  height: 62px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: inset 0 -3px 0 var(--gold-deep);
}
.podium__place--2 .podium__block {
  height: 44px;
  background: linear-gradient(180deg, #e8edf6, #b9c3d4);
  box-shadow: inset 0 -3px 0 #7c8798;
}
.podium__place--3 .podium__block {
  height: 32px;
  background: linear-gradient(180deg, #d89a55, #b87308);
  box-shadow: inset 0 -3px 0 #7d4d05;
  color: #2a1a00;
}

.board {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 8px 0 var(--space-1);
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.board__row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.84rem;
}
.board__rank { font-family: var(--font-display); color: var(--text-3); text-align: center; }
.board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__score { font-weight: 600; color: var(--star); }
.board__row--gold {
  border-color: rgba(250, 184, 31, 0.5);
  background: linear-gradient(100deg, rgba(250, 184, 31, 0.22), rgba(250, 184, 31, 0.04));
}
.board__row--gold .board__rank { color: var(--gold-light); }
.board__row--silver { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.07); }
.board__row--bronze { border-color: rgba(184, 115, 8, 0.45); background: rgba(184, 115, 8, 0.14); }
.board__row--you {
  border-style: dashed;
  border-color: rgba(163, 230, 53, 0.55);
  background: rgba(163, 230, 53, 0.08);
}
.board__row--you .board__name { color: var(--lime); font-weight: 600; }
.board__row--you .board__score { color: var(--text-3); }
.board__note { margin-top: auto; font-size: 0.72rem; color: var(--text-3); }

.bento__cell--accent {
  border-color: rgba(250, 184, 31, 0.4);
  background: linear-gradient(180deg, rgba(250, 184, 31, 0.16), rgba(250, 184, 31, 0.03));
}
.bento__cell--accent h3 { font-size: 1.9rem; }

.frames { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-top: auto; padding-top: 26px; }
.frames__tick {
  flex: 1;
  height: 26%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}
.frames__tick.is-one { height: 42%; background: rgba(255, 197, 47, 0.28); }
.frames__tick.is-two { height: 60%; background: rgba(255, 197, 47, 0.5); }
.frames__tick.is-three { height: 78%; background: rgba(255, 197, 47, 0.75); }
.frames__tick.is-apex {
  height: 100%;
  background: var(--star);
  box-shadow: 0 0 22px rgba(255, 197, 47, 0.6);
}
.frames__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 2px;
  font-size: 0.66rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.frames__legend .is-apex-label { color: var(--star); font-weight: 700; }

/* ---------- faq ---------- */

.faq { padding: var(--space-7) 0; border-top: 1px solid var(--line); }

.faq__list { margin-top: var(--space-5); display: grid; gap: var(--space-1); }
.faq__item {
  padding: var(--space-3) var(--space-4);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  float: right;
  color: var(--text-3);
  font-weight: 500;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin-top: 10px; font-size: 0.93rem; color: var(--text-2); }

/* ---------- closing ---------- */

.closing {
  margin: 0 0 var(--space-7);
  padding: var(--space-7) var(--space-4);
  border-radius: 30px;
  text-align: center;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(45, 106, 153, 0.5), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.closing h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.closing p { margin: var(--space-2) 0 var(--space-4); color: var(--text-2); }
.closing__mascot {
  display: block;
  width: clamp(104px, 13vw, 150px);
  height: auto;
  margin: 0 auto var(--space-3);
  filter: drop-shadow(0 16px 34px rgba(250, 184, 31, 0.28));
}

/* ---------- footer ---------- */

footer {
  padding: var(--space-5) var(--gutter) var(--space-6);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-3);
  border-top: 1px solid var(--line);
}
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; }
footer nav a { color: var(--text-2); }
.footer__note { margin-bottom: 8px; font-size: 0.8rem; }

/* A thumb-reachable CTA on phones only; the desktop page already has two. */
.stickycta {
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  border: 2px solid var(--gold-deep);
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 50;
  display: none;
  padding: 15px;
  border-radius: 16px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 5px 0 var(--gold-deep), 0 14px 30px rgba(2, 16, 43, 0.6);
}

/* Short windows get a little less air. */
@media (max-height: 760px) {
  .hero__stats { margin-top: 22px; padding-top: 18px; }
  .lede { margin-top: 14px; }
  .cta-row { margin-top: 20px; }
  .bento { gap: 12px; margin-top: 24px; }
  .bento__cell { padding: 18px; }
  .frames { height: 70px; padding-top: 16px; }
  .faq__list { margin-top: 20px; gap: 8px; }
  .faq__item { padding: 13px 18px; }
  .closing { padding: 44px 24px; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 960px) {
  .section-head--withmascot { gap: var(--space-4); }
  .section-mascot { width: 88px; }
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .section-head h2 { font-size: clamp(1.5rem, 4.4vw, 2rem); }
  .bento { gap: 10px; margin-top: 20px; }
  .bento__cell { padding: 16px; border-radius: 16px; }
  .bento__cell h3 { font-size: 1rem; margin-bottom: 6px; }
  .bento__cell p { font-size: 0.85rem; }
  .bento__cell--accent h3 { font-size: 1.5rem; }
  .frames { height: 62px; padding-top: 14px; }
  .hero__copy { padding-top: 0; }
  /* Stacked, the phone and the copy share one screen. */
  .phone { max-width: 260px; }
  .phone__tools { margin-top: 12px; }
  .cta-row { margin-top: 20px; }
  .lede { margin-top: 14px; }
  h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .lede { font-size: 0.98rem; }
  .hero__demo { order: -1; }
  /* Fewer, smaller shapes on a narrow screen: they are background, not content. */
  .drift__shape { opacity: 0.28; }
  .drift__shape--a { width: 78px; height: 78px; }
  .drift__shape--c { width: 62px; height: 62px; }
  .drift__shape--b, .drift__shape--d { display: none; }
  .topbar__nav { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--wide { grid-column: span 2; grid-row: auto; }
  .bento__cell--tall { grid-row: auto; }
}

@media (max-width: 620px) {
  .section-mascot { display: none; }
  .hero { gap: 16px; }
  h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .lede { font-size: 0.92rem; margin-top: 12px; }
  .cta-row { margin-top: 16px; gap: 10px; }
  .button--large { padding: 13px 20px; font-size: 0.92rem; }
  .faq__item { padding: 12px 16px; }
  .faq__item summary { font-size: 0.95rem; }
  .faq__item p { font-size: 0.85rem; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--wide { grid-column: span 1; }
  .hero__stats { gap: 22px; }
  .topbar .button--small { display: none; }
  .stickycta {
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  border: 2px solid var(--gold-deep); display: block; }
  footer { padding-bottom: 92px; }
  .closing { padding: 52px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-armed { opacity: 1; transform: none; transition: none; }
  .finish__mascot { animation: none; }
  .pill__dot { animation: none; }
  .button, .chipbutton, .bento__cell { transition: none; }
}