/* ──────────────────────────────────────────────────────────────────────── */
/* Guess The Plate — marketing site
/* Brand palette extracted from the iOS app:
/*   brand yellow  : #FAD126 (text), #FFC700 (button), #FFE600 (bright)
/*   sticker blue  : #1A4DCC
/*   logo navy     : #112233
/*   bg            : pure black #000
/*   surface       : #111111 / #1a1a1a
/* Typography: Teko for display + Inter for body. Both Google Fonts.
/* ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette pulled from the game itself — logo navy backdrop + cyan/orange
     wordmark + the bright sunny brandYellow we use for HUD text + the
     license-plate plate-yellow + the sticker-blue royal blue. */
  --bg: #050a16;                    /* near-black with a navy tint */
  --surface: #0a1326;               /* the deep logo-navy panel */
  --surface-elev: #122042;          /* one step lighter than surface */
  --brand-yellow: #fad126;          /* HUD text yellow */
  --brand-yellow-bright: #ffe600;   /* trophy / highlight */
  --brand-cyan: #4ecdff;            /* the "GUESS" letter cyan from logo */
  --brand-orange: #ff7a1a;          /* the "THE PLATE" letter orange from logo */
  --brand-blue: #1a4dcc;            /* sticker blue */
  --brand-blue-deep: #0a1f4d;       /* deepest blue from logo backdrop */
  --logo-navy: #112233;
  --text: #ffffff;
  --text-dim: #c1ccdb;
  --text-mute: #7a8699;
  --border: rgba(255, 255, 255, 0.08);
  --border-warm: rgba(250, 209, 38, 0.22);
  --plate-bg: #fbe65a;
  --plate-text: #112233;
  --max-w: 1200px;
  --pad-x: clamp(20px, 5vw, 48px);
  --section-pad-y: clamp(72px, 10vw, 140px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--brand-yellow); text-decoration: none; transition: opacity .15s; }
a:hover { opacity: 0.85; }

img, svg { display: block; max-width: 100%; }

/* ── Display type ─────────────────────────────────────────────────────── */
.display, h1, h2, h3 {
  font-family: 'Teko', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--text);
}

h1 { font-size: clamp(56px, 11vw, 144px); letter-spacing: -0.01em; }
h2 { font-size: clamp(40px, 6vw, 84px); }
h3 { font-size: clamp(28px, 3vw, 40px); }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-yellow);
  margin-bottom: 16px;
}

p { color: var(--text-dim); }
p.lede { font-size: clamp(18px, 2vw, 22px); color: var(--text); max-width: 60ch; }

/* ── Layout primitives ────────────────────────────────────────────────── */
.container {
  width: min(100%, var(--max-w));
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

section { padding-block: var(--section-pad-y); position: relative; }

.section-head { margin-bottom: clamp(40px, 6vw, 72px); text-align: center; }
.section-head p.lede { margin: 16px auto 0; }

/* ── Top navigation ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width: min(100%, var(--max-w));
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Teko', sans-serif;
  font-size: 28px; font-weight: 700;
  color: var(--text); letter-spacing: 0.02em;
}
.nav-brand-mark {
  width: 30px; height: 22px;
  background: var(--plate-bg);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Teko', sans-serif; font-size: 16px;
  color: var(--plate-text); font-weight: 700;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
}
.nav-links a:hover { color: var(--text); opacity: 1; }
.nav-cta {
  padding: 10px 18px;
  background: var(--brand-yellow);
  color: var(--logo-navy) !important;
  font-weight: 700;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.nav-cta:hover { opacity: 1; background: var(--brand-yellow-bright); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font: 700 13px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.lang-toggle:hover { color: var(--text); border-color: rgba(78, 205, 255, 0.5); }
/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .25s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8, 12, 22, 0.98);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 6px var(--pad-x) 14px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 2px; font-size: 16px; border-bottom: 1px solid var(--border); }
  .nav-cta { display: inline-flex; }
}

/* ── EN / ES language switch ──────────────────────────────────────────── */
/* display:contents so a wrapper can hold block OR inline content. */
.lx-en { display: contents; }
.lx-es { display: none; }
html[lang="es"] .lx-en { display: none; }
html[lang="es"] .lx-es { display: contents; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  min-height: 92vh;
  display: grid; place-items: center;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: var(--section-pad-y);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: -20% -10% auto;
  height: 60vh;
  background: radial-gradient(ellipse at center, rgba(250, 209, 38, 0.18), transparent 60%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero h1 {
  background: linear-gradient(180deg, #fff 0%, #b3b3b3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 30px rgba(250, 209, 38, 0.12));
}
.hero h1 .accent {
  background: linear-gradient(180deg, var(--brand-yellow-bright) 0%, var(--brand-yellow) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(250, 209, 38, 0.3));
}
.hero p.lede { margin: 28px auto 40px; text-align: center; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-cta .cta-form { width: 100%; max-width: 440px; }
.hero-cta-note { color: var(--text-mute); font-size: 13px; margin: 0; }
.coming-chip {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; margin-top: 4px;
}
.coming-chip .apple { width: 15px; height: 15px; }
.hero-seehow { color: var(--text-dim); font-size: 14px; font-weight: 600; margin-top: 2px; }
.hero-seehow:hover { color: var(--text); }
/* Honeypot — visually hidden, off-screen, not announced. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.signup-done { color: var(--brand-yellow-bright); font-weight: 700; font-size: 17px; margin: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  border: none; cursor: pointer;
  transition: transform .15s, opacity .15s, background .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--brand-yellow);
  color: var(--logo-navy);
}
.btn-primary:hover { background: var(--brand-yellow-bright); opacity: 1; }
.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); opacity: 1; }

/* ── App Store badge (Coming Soon) ────────────────────────────────────── */
.app-badge {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: #000;
  border: 1.5px solid #fff;
  border-radius: 14px;
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
}
.app-badge:hover { opacity: 1; background: #1a1a1a; }
.app-badge .apple {
  width: 28px; height: 32px; flex-shrink: 0;
}
.app-badge-label { display: flex; flex-direction: column; line-height: 1.1; }
.app-badge-label .top { font-size: 11px; opacity: 0.8; font-weight: 400; }
.app-badge-label .bot { font-size: 17px; font-weight: 600; font-family: 'Teko', sans-serif; letter-spacing: 0.02em; }

/* ── License plate visual ─────────────────────────────────────────────── */
/* The real in-game Hawaii plate, with the consonants in the game's plate font
   (Teko-Light), in white. */
.plate {
  position: relative;
  width: min(86vw, 460px);
  aspect-ratio: 1110 / 555;   /* true 2:1 USA plate */
  background: url(/usa_bg.png) center / contain no-repeat;
  border-radius: 12px;
  overflow: hidden;
}
/* The real US license-plate font, bundled in the app. */
@font-face {
  font-family: 'PlateUSA';
  src: url('/license-plate-usa.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
.plate-text {
  position: absolute;
  left: 2%; right: 2%;
  top: 58%;                  /* nudged down to sit clear of "USA" */
  transform: translateY(-50%);
  text-align: center;
  white-space: nowrap;
  font-family: 'PlateUSA', 'Teko', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 13vw, 90px);   /* fallback; JS fitPlate() scales to fit */
  letter-spacing: 0.01em;
  line-height: 1;
  color: #16161d;            /* black, like "made in usa" */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.plate-small { font-size: 28px; padding: 8px 14px; border-width: 2px; }

/* ── How to play ──────────────────────────────────────────────────────── */
.how {
  background: linear-gradient(180deg, transparent 0%, var(--surface) 100%);
}
.how-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}
.how-card {
  background: var(--surface-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  transition: transform .3s, border-color .3s;
  flex: 1 1 300px;
  max-width: 360px;
}
.how-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 209, 38, 0.3);
}
.how-card .step {
  display: inline-block;
  font-family: 'Teko', sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: var(--brand-yellow);
  line-height: 1;
  margin-bottom: 16px;
}
.how-card h3 { margin-bottom: 12px; }
.how-card p { font-size: 16px; }
.how-card-demo {
  margin-top: 24px;
  padding: 18px;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 110px;
}
.demo-word {
  font-family: 'Teko', sans-serif;
  font-size: 36px;
  letter-spacing: 0.08em;
  color: var(--brand-yellow-bright);
}
.demo-word .filled { color: var(--brand-yellow-bright); }
.demo-word .missing { color: rgba(255,255,255,0.3); }
.demo-meta { color: var(--text-mute); font-size: 13px; text-align: center; margin-top: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Tutorial-mirrored "how to play" demos */
.demo-clue {
  color: var(--brand-yellow-bright);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  font-style: italic;
  text-align: center;
  margin: 0;
}
.demo-timer {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(closest-side, #000 76%, transparent 77% 100%),
    conic-gradient(#ff7a1a 0 290deg, rgba(255, 255, 255, 0.12) 290deg 360deg);
}
.demo-timer .t-num { grid-area: 1 / 1; font-family: 'Teko', sans-serif; font-size: 40px; font-weight: 700; color: #fff; line-height: 0.8; transform: translateY(-6px); }
.demo-timer .t-lbl { grid-area: 1 / 1; align-self: end; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); transform: translateY(-14px); }
.demo-powerups { gap: 12px; flex-wrap: wrap; }
.pup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.pup .coin { color: var(--brand-yellow-bright); }
.pup-reveal { background: linear-gradient(180deg, #ff9a3c, #f97316); }
.pup-skip { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.demo-mic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #19cc4d, #0a8a32);
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.demo-mic .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* In-app tutorial screenshots — framed + save-deterred */
.shot {
  position: relative;
  margin: 22px auto 0;
  max-width: 230px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  background: #000;
  line-height: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* Transparent layer over the image to swallow long-press / right-click. */
.shot-guard {
  position: absolute;
  inset: 0;
  display: block;
  background: transparent;
}

/* ── Features grid ────────────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }
/* 13 features → in the 2-col (tablet) range the last card would orphan; span it. */
@media (min-width: 561px) and (max-width: 900px) {
  .features-grid > .feature:last-child { grid-column: 1 / -1; }
}
.feature {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: border-color .3s, background .3s;
}
.feature:hover { border-color: rgba(250, 209, 38, 0.35); background: var(--surface-elev); }
.feature-icon {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  background: rgba(250, 209, 38, 0.12);
  color: var(--brand-yellow);
  margin-bottom: 18px;
  font-size: 22px;
}
.feature h3 {
  font-size: 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.feature p { font-size: 15px; line-height: 1.55; }

/* ── Modes section ────────────────────────────────────────────────────── */
.modes { background: var(--surface); }
.modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 800px) { .modes-grid { grid-template-columns: 1fr; } }
.mode {
  position: relative;
  border-radius: 24px;
  padding: clamp(32px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-elev);
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mode-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  margin-bottom: 16px;
  align-self: flex-start;
}
.mode h3 { margin-bottom: 10px; font-size: 32px; }
.mode p { font-size: 16px; max-width: 36ch; }
.mode-solo { background: linear-gradient(135deg, #1a4dcc 0%, #0a1f4d 100%); }
.mode-solo .mode-tag { background: rgba(255,255,255,0.18); }
.mode-quest { background: linear-gradient(135deg, #2d1a4d 0%, #150726 100%); }
.mode-plate { background: linear-gradient(135deg, #4d3a00 0%, #1a1300 100%); }
.mode-voice { background: linear-gradient(135deg, #0d3d2a 0%, #061a14 100%); }

/* ── Stats strip ──────────────────────────────────────────────────────── */
.stats {
  background: var(--brand-yellow);
  color: var(--logo-navy);
  padding-block: clamp(40px, 5vw, 60px);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-num {
  font-family: 'Teko', sans-serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--logo-navy);
}
.stat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--logo-navy);
  opacity: 0.7;
  margin-top: 6px;
}

/* ── Screenshot phones (CSS-only iPhone frames) ──────────────────────── */
.shots {
  text-align: center;
}
.shots-track {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.phone {
  width: 220px;
  height: 460px;
  border-radius: 38px;
  background: #000;
  border: 4px solid #2a2a2a;
  position: relative;
  padding: 8px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.phone::before {
  content: '';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 22px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 30px;
  background: linear-gradient(180deg, #000 0%, #1a1a1a 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 48px 16px 24px;
  color: var(--brand-yellow-bright);
  font-family: 'Teko', sans-serif;
  text-align: center;
  overflow: hidden;
}
.phone-screen .label { font-size: 13px; color: var(--text-mute); letter-spacing: 0.12em; text-transform: uppercase; font-family: 'Inter', sans-serif; }

/* ── CTA section ──────────────────────────────────────────────────────── */
.cta {
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
  text-align: center;
}
.cta-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px);
  background: linear-gradient(135deg, rgba(250, 209, 38, 0.12) 0%, rgba(26, 77, 204, 0.12) 100%);
  border: 1px solid rgba(250, 209, 38, 0.25);
  border-radius: 28px;
}
.cta-card h2 { margin-bottom: 18px; }
.cta-card p { margin-bottom: 32px; font-size: 18px; color: var(--text-dim); }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer {
  background: #000;
  border-top: 1px solid var(--border);
  padding-block: 60px 32px;
  margin-top: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
/* Footer column titles are <h3> (correct heading order: h1 → h2 → h3); these
   rules fully restyle them so they render identically to the old <h4> — incl.
   line-height, which would otherwise inherit the global h3 value. */
.footer-col h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text); margin-bottom: 16px;
  font-family: 'Inter', sans-serif; line-height: 1.55;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-dim); font-size: 14px; }
.footer-col a:hover { color: var(--text); opacity: 1; }
.footer-brand { color: var(--text-dim); font-size: 14px; line-height: 1.6; max-width: 28ch; }
.footer-brand .nav-brand { margin-bottom: 14px; }
.footer-base {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  color: var(--text-mute); font-size: 13px;
}
.footer-safety {
  margin-top: 14px;
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ── Legal page styling ───────────────────────────────────────────────── */
.legal-page {
  padding-block: clamp(60px, 8vw, 100px);
}
.legal-page article {
  max-width: 760px;
  margin: 0 auto;
}
.legal-page h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.legal-page .updated {
  color: var(--text-mute);
  font-size: 14px;
  margin-bottom: 40px;
}
.legal-page h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 2.5vw, 28px);
  margin-top: 48px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.legal-page h3 {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal-page p, .legal-page li {
  color: var(--text-dim);
  font-size: 16px;
  margin-bottom: 14px;
  line-height: 1.65;
}
.legal-page ul, .legal-page ol {
  margin-bottom: 14px;
  padding-left: 24px;
}
.legal-page li { margin-bottom: 8px; }
.legal-page strong { color: var(--text); font-weight: 600; }
.legal-page a { color: var(--brand-yellow); }
.legal-page hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.legal-page .callout {
  padding: 20px 24px;
  background: rgba(250, 209, 38, 0.08);
  border-left: 3px solid var(--brand-yellow);
  border-radius: 8px;
  margin: 24px 0;
}
.legal-page .callout p { color: var(--text); margin: 0; font-size: 15px; }

/* ── Reveal-on-scroll ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Background-music toggle ───────────────────────────────────────────── */
.sound-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 18, 34, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #e8eef7;
  font: 600 13px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.sound-toggle:hover { transform: translateY(-2px); border-color: rgba(78, 205, 255, 0.5); }
.sound-toggle:focus-visible { outline: 2px solid var(--brand-yellow-bright, #ffd24a); outline-offset: 2px; }
.sound-toggle .ico { width: 20px; height: 20px; display: block; flex: none; }
.sound-toggle .ico-on { display: none; }
.sound-toggle.playing { border-color: rgba(78, 205, 255, 0.45); }
.sound-toggle.playing .ico-on { display: block; }
.sound-toggle.playing .ico-off { display: none; }
.sound-label { white-space: nowrap; }
/* Autoplay blocked → pulse the toggle to invite a one-tap start. */
.sound-toggle.needs-tap {
  animation: sound-pulse 1.8s ease-in-out infinite;
  border-color: rgba(78, 205, 255, 0.55);
}
@keyframes sound-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(78, 205, 255, 0.45); }
  50%      { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(78, 205, 255, 0); }
}
@media (max-width: 560px) {
  .sound-label { display: none; }
  .sound-toggle { padding: 11px; gap: 0; }
  /* But do show the "Tap for sound" nudge on mobile when blocked. */
  .sound-toggle.needs-tap { padding: 11px 15px; gap: 8px; }
  .sound-toggle.needs-tap .sound-label { display: inline; }
}

/* ── 404 page ─────────────────────────────────────────────────────────── */
.error-page {
  min-height: 80vh;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--pad-x);
}
.error-page h1 { font-size: clamp(120px, 20vw, 240px); }
.error-page p { margin-bottom: 32px; }

/* ──────────────────────────────────────────────────────────────────────── */
/*  Section styles for the expanded landing page
/* ──────────────────────────────────────────────────────────────────────── */

/* Nav: real logo image */
.nav-logo {
  height: 40px;
  width: auto;
  display: block;
}
.footer-logo {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: 14px;
}
.footer-tag { color: var(--text-dim); font-size: 14px; line-height: 1.6; max-width: 28ch; margin-top: 8px; }

/* Hero top row: logo on one side, "Coming Soon" on the opposite side. */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 64px);
  margin-bottom: 28px;
}
.hero-coming {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.coming-big {
  font-family: 'Teko', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, var(--brand-yellow-bright) 0%, var(--brand-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.coming-sub {
  color: var(--text-mute);
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Hero flip showcase ───────────────────────────────────────────────── */
/* ONE card that keeps flipping forever: the GTP LOGO (front) spins over to the
   COMING SOON plate (back), which spins over to each demo plate in turn, then
   spins back to the LOGO. The two faces swap their content while hidden, so the
   swap is never seen and nothing reads mirrored. Driven by script.js. */
.hero-flip-stage {
  width: min(86vw, 460px);
  height: clamp(250px, 60vw, 300px);   /* tall enough for plate + a 2-line caption */
  margin: 0 auto;
  perspective: 1400px;
}
/* A SINGLE card (no second/back face). JS flips it to its edge, swaps the
   content while edge-on, then flips it back — content is ALWAYS front-facing,
   so it can never read mirrored. This sidesteps the iOS-Safari
   backface-visibility / preserve-3d bug that mirrored the old two-face card. */
.hero-flip-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  will-change: transform;
}
/* Logo / Coming-Soon artwork fills the card; the demo plate + meta is centered. */
.hero-flip-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Fixed, viewport-based width so EVERY plate is the same size regardless of how
   long its caption is (otherwise a short caption shrinks the whole block). */
.hero-flip-card .hero-demo { margin: 0; gap: 10px; width: min(80vw, 400px); }
.hero-flip-card .plate { width: 100%; }

@media (max-width: 760px) {
  /* Tighten the tall mobile hero: no forced 92vh, smaller stage, less gap. */
  .hero { min-height: auto; padding-top: 20px; padding-bottom: clamp(48px, 12vw, 72px); }
  .hero-top { flex-direction: column; gap: 16px; margin-bottom: 14px; }
  .hero-flip-stage { width: min(88vw, 360px); height: clamp(230px, 72vw, 285px); }
  .hero p.lede { margin: 16px auto 22px; }
}
@media (max-width: 560px) {
  /* Stack the two hero CTAs full-width and matched. */
  .hero-cta { flex-direction: column; width: 100%; max-width: 360px; margin-inline: auto; }
  .hero-cta .app-badge,
  .hero-cta .btn-ghost { width: 100%; justify-content: center; }
  .app-badge { border-radius: 999px; }
}
/* Soft glow lives on a non-3D wrapper so it doesn't flatten the spin. */
.hero-logo-glow {
  filter: drop-shadow(0 12px 40px rgba(78, 205, 255, 0.25))
          drop-shadow(0 0 60px rgba(255, 122, 26, 0.15));
}
.hero-tagline {
  font-size: clamp(40px, 7vw, 92px);
  font-family: 'Teko', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.hero-tagline {
  background: linear-gradient(180deg, #fff 0%, #c1ccdb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-tagline .accent {
  background: linear-gradient(180deg, var(--brand-yellow-bright) 0%, var(--brand-yellow) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.lede { margin: 28px auto 40px; text-align: center; }
.hero-demo {
  margin-top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  perspective: 1200px;   /* depth for the per-plate flip */
}
.plate { will-change: transform; }
.hero-demo-meta {
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: min(440px, 90vw);
  margin-inline: auto;
}
/* Keep hero prose within the viewport (prevents mobile horizontal overflow). */
.hero p.lede { max-width: min(620px, 90vw); margin-inline: auto; }
.hero-demo-meta strong { color: var(--brand-yellow); }
/* Genius mode flips the label from "Consonants:" to "Vowels:". */
.dl-vow { display: none; }
.hero-demo.is-genius .dl-cons { display: none; }
.hero-demo.is-genius .dl-vow { display: inline; }
.how-card-demo-stack { flex-direction: column; gap: 8px; }
.reward-num {
  font-family: 'Teko', sans-serif;
  font-size: 48px;
  color: var(--brand-yellow-bright);
  font-weight: 700;
  line-height: 1;
}

/* ── Streak ladder ────────────────────────────────────────────────────── */
#streaks { background: linear-gradient(180deg, var(--surface) 0%, transparent 100%); }
.streak-ladder {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 900px) { .streak-ladder { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 500px) { .streak-ladder { grid-template-columns: repeat(2, 1fr); } }
.streak-day {
  background: var(--surface-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 14px;
  text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: transform .3s, border-color .3s;
}
.streak-day:hover { transform: translateY(-3px); border-color: var(--border-warm); }
.streak-day .d {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.streak-day .c {
  font-family: 'Teko', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--brand-yellow-bright);
  line-height: 1;
}
.streak-day .c .sub {
  display: block; font-size: 12px; color: var(--text-mute);
  font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.06em;
  margin-top: 4px;
}
.streak-day-peak {
  background: linear-gradient(180deg, rgba(250, 209, 38, 0.16) 0%, rgba(250, 209, 38, 0.05) 100%);
  border-color: rgba(250, 209, 38, 0.4);
}
.streak-day-loyal {
  background: linear-gradient(180deg, rgba(26, 77, 204, 0.22) 0%, rgba(26, 77, 204, 0.06) 100%);
  border-color: rgba(78, 205, 255, 0.4);
}
.streak-day-loyal .c { color: var(--brand-cyan); }
.streak-note {
  margin-top: 28px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
}

/* ── Languages ─────────────────────────────────────────────────────────── */
.languages { background: var(--surface); }
.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 800px) { .lang-grid { grid-template-columns: 1fr; } }
.lang-card {
  padding: 36px;
  border-radius: 22px;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  position: relative;
}
.lang-now {
  background: linear-gradient(135deg, rgba(78, 205, 255, 0.12) 0%, rgba(26, 77, 204, 0.08) 100%);
  border-color: rgba(78, 205, 255, 0.3);
}
.lang-soon {
  background: linear-gradient(135deg, rgba(255, 122, 26, 0.10) 0%, rgba(250, 209, 38, 0.06) 100%);
  border-color: rgba(255, 122, 26, 0.3);
}
.lang-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  margin-bottom: 18px;
}
.lang-now .lang-status { background: rgba(78, 205, 255, 0.22); color: var(--brand-cyan); }
.lang-soon .lang-status { background: rgba(255, 122, 26, 0.2); color: var(--brand-orange); }
.lang-flag { font-size: 32px; margin-bottom: 14px; line-height: 1; letter-spacing: 4px; }
.lang-card h3 { font-size: 28px; margin-bottom: 10px; font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.lang-card p { font-size: 16px; }

/* ── Native pills ─────────────────────────────────────────────────────── */
.native-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.native-pill {
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  transition: border-color .3s, color .3s, background .3s;
}
.native-pill:hover {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
  background: var(--surface-elev);
}

/* ── Privacy grid ─────────────────────────────────────────────────────── */
#privacy { background: linear-gradient(180deg, transparent 0%, var(--surface) 100%); }
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
@media (max-width: 800px) { .privacy-grid { grid-template-columns: 1fr; } }
.privacy-cta { text-align: center; }

/* ── FAQ details ──────────────────────────────────────────────────────── */
.faq-section { background: var(--surface); }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-list details {
  padding: 24px 28px;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color .3s, background .3s;
}
.faq-list details[open] {
  border-color: rgba(250, 209, 38, 0.3);
  background: rgba(18, 32, 66, 0.6);
}
.faq-list summary {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  color: var(--brand-yellow);
  font-weight: 700;
  transition: transform .3s;
  line-height: 1;
}
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p {
  margin-top: 14px;
  color: var(--text-dim);
}

/* ── CTA form ─────────────────────────────────────────────────────────── */
.cta-form {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  max-width: 480px; margin: 0 auto;
}
.cta-input {
  flex: 1; min-width: 240px;
  padding: 16px 22px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
  border-radius: 999px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.cta-input:focus { border-color: var(--brand-yellow); }
.cta-note {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 18px;
}