/* ==========================================================================
   Gridiron Action — marketing site
   Design language: the app's "Sunday Arcade" tokens, verbatim.
     surface        #F1F4F9   raised #F8FAFD   elevated #FFFFFF
     primary (gold) #E8A81C   accent (blue) #2E6FE0   success #1E8E52
     text           #15202E / #52627C          divider  #D9E0EB
   Hero/footer use the brand navy (derived from textPrimary) so the gold
   wordmark pops the way it does on the app's sign-in screen.
   ========================================================================== */

:root {
  --surface: #F1F4F9;
  --raised: #F8FAFD;
  --elevated: #FFFFFF;
  --gold: #E8A81C;
  --gold-deep: #C98F0E;
  --blue: #2E6FE0;
  --navy: #15202E;
  --navy-deep: #0D1520;
  --text: #15202E;
  --muted: #52627C;
  --divider: #D9E0EB;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(21, 32, 46, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--surface);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; }
h3 { font-size: 1.18rem; font-weight: 800; }
.gold { color: var(--gold); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(180deg, #F4BA35, var(--gold));
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(232, 168, 28, .38);
}
.btn-gold:hover { box-shadow: 0 10px 24px rgba(232, 168, 28, .5); }
.btn-big { padding: 1.05rem 2.1rem; font-size: 1.08rem; }
.btn-outline-light {
  border: 2px solid rgba(255, 255, 255, .45);
  color: #fff;
}
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-disabled {
  background: var(--divider);
  color: var(--muted);
  cursor: default;
}
.btn-disabled:hover { transform: none; }
.btn-static { cursor: default; }
.btn-static:hover { transform: none; }
.store-badge img { height: 64px; width: auto; }
.store-badge:hover img { filter: brightness(1.08); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 253, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 66px;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 1.06rem; color: var(--navy);
  letter-spacing: .02em;
}
.nav-brand img { border-radius: 9px; }
.nav-brand em { font-style: normal; color: var(--blue); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--muted); font-weight: 600; }
.nav-links a:hover { color: var(--navy); }
.nav-cta { padding: .55rem 1.2rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 75% -10%, rgba(46, 111, 224, .35), transparent 60%),
    radial-gradient(900px 460px at 12% 108%, rgba(232, 168, 28, .18), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  overflow: hidden;
}
/* faint yard lines, pure CSS — the app icon's play-diagram texture */
.hero-field {
  position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 140px),
    repeating-linear-gradient(0deg, transparent 0 46px, #fff 46px 47px, transparent 47px 140px);
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 44px; align-items: center;
  padding-top: 64px; padding-bottom: 72px;
}
.hero-wordmark { width: min(430px, 88%); margin-bottom: 26px; }
.hero-sub {
  color: #C7D2E4; font-size: 1.13rem; max-width: 34rem; margin: 0 0 1.7rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 1.4rem; }
.hero-points {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 0; margin: 0; list-style: none;
  color: #9FB0C9; font-weight: 600; font-size: .95rem;
}
.hero-points li::before { content: '✦ '; color: var(--gold); }

/* ---------- phone frames ---------- */
.phone {
  width: min(320px, 78vw);
  margin: 0 auto;
  padding: 14px;
  border-radius: 40px;
  background: linear-gradient(180deg, #22314a, #101a29);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .07);
}
.phone img { border-radius: 28px; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; background: #0d1420; }
.phone-sm { width: 240px; padding: 10px; border-radius: 32px; }
.phone-sm img { border-radius: 24px; }

/* ---------- stat strip ---------- */
.statstrip { background: var(--gold); }
.statstrip-inner {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; padding-top: 22px; padding-bottom: 22px;
}
.stat { text-align: center; color: var(--navy); }
.stat strong { display: block; font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; }
.stat span { font-weight: 600; font-size: .92rem; opacity: .85; }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section-sub { color: var(--muted); font-size: 1.08rem; max-width: 42rem; margin: 0 0 2.6rem; }
.section-navy { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); color: #fff; }
.section-navy .section-sub { color: #9FB0C9; }

/* ---------- feature cards ---------- */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.card {
  background: var(--elevated);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(21, 32, 46, .14); }
.card p { color: var(--muted); margin: 0; font-size: .97rem; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(46, 111, 224, .14), rgba(232, 168, 28, .18));
}
.card-icon svg { width: 24px; height: 24px; fill: var(--blue); }

/* ---------- screenshot carousel ----------
   Founder 2026-08-23, replacing the 51-thumb grid. The look is lightGallery's
   inline carousel — centred stage, neighbours peeking, filmstrip underneath —
   rebuilt natively because lightGallery needs a paid licence for a commercial
   site, and because this site deliberately ships zero JS dependencies.

   Geometry is driven off ONE variable. --car-h sets the stage height and every
   slide derives its width from the 9/19.5 phone aspect, so the whole thing
   rescales from one number and the JS never has to guess a size. */
.carousel {
  --car-h: clamp(320px, 56vh, 560px);
  --car-gap: 18px;
  position: relative;
}

.car-stage {
  position: relative;
  height: var(--car-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Fades the peeked neighbours toward the edges instead of slicing them off
     mid-pixel. The arrows live OUTSIDE this element precisely so the mask
     cannot dim them. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.car-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

.car-track {
  display: flex;
  /* Sole flex item of .car-stage, so without this it shrinks to the stage
     width and the track box stops describing its own contents. */
  flex: 0 0 auto;
  gap: var(--car-gap);
  align-items: center;
  height: 100%;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  /* pan-y keeps vertical page scrolling working on touch while this owns the
     horizontal axis — without it a downward swipe on the carousel traps the
     page. */
  touch-action: pan-y;
  cursor: grab;
}
.car-track.is-dragging { transition: none; cursor: grabbing; }

.car-slide {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 9 / 19.5;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0d1420;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  opacity: .34;
  transform: scale(.86);
  transition: opacity .42s ease, transform .42s ease;
  cursor: pointer;
}
.car-slide.is-active { opacity: 1; transform: scale(1); cursor: zoom-in; }
.car-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* the button owns the pointer, not the image — otherwise a drag that starts
     on the image fires the browser's native image-drag ghost */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.car-arrow {
  position: absolute;
  top: calc(var(--car-h) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: 1.15rem; font-weight: 900; line-height: 1;
  color: var(--navy);
  background: linear-gradient(180deg, #F4BA35, var(--gold));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .12s ease;
}
.car-arrow:hover { transform: translateY(-50%) scale(1.1); }
.car-prev { left: 0; }
.car-next { right: 0; }

.car-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 2px 10px;
  min-height: 1.6em;
}
.car-caption { margin: 0; color: #C7D2E4; font-weight: 600; }
.car-caption:empty { display: none; }
.car-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.car-count {
  color: #9FB0C9; font-weight: 700; font-size: .92rem;
  letter-spacing: .06em; white-space: nowrap;
}
.car-max {
  border: 1.5px solid rgba(232, 168, 28, .5);
  background: transparent;
  color: var(--gold);
  font: inherit; font-weight: 700; font-size: .9rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.car-max:hover { background: rgba(232, 168, 28, .14); border-color: var(--gold); }

.car-strip {
  /* Makes the strip the offsetParent of its thumbs, so thumb.offsetLeft is a
     position within the SCROLLABLE content — which is what centreThumb's
     scrollLeft maths needs. Against .carousel it would drift by the current
     scroll offset. */
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 168, 28, .5) transparent;
}
.car-strip::-webkit-scrollbar { height: 6px; }
.car-strip::-webkit-scrollbar-thumb {
  background: rgba(232, 168, 28, .5); border-radius: 999px;
}
.car-thumb {
  flex: 0 0 auto;
  width: 54px;
  padding: 0; border: 0;
  border-radius: 8px; overflow: hidden;
  background: #0d1420; cursor: pointer;
  opacity: .48;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: opacity .15s ease, outline-color .15s ease, transform .15s ease;
}
.car-thumb img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; display: block; }
.car-thumb:hover { opacity: .9; transform: translateY(-2px); }
.car-thumb.is-active { opacity: 1; outline-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .car-track, .car-slide { transition: none; }
  .car-strip { scroll-behavior: auto; }
}

/* ---------- hero carousel arrows ---------- */
.hero-phone-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hero-arrow {
  width: 46px; height: 46px; flex: 0 0 auto;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: 1.15rem; font-weight: 900; line-height: 1;
  color: var(--navy);
  background: linear-gradient(180deg, #F4BA35, var(--gold));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  transition: transform .12s ease;
}
.hero-arrow:hover { transform: scale(1.1); }
#hero-shot { cursor: zoom-in; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 12, 19, .92);
  backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-height: 88vh; max-width: min(92vw, 460px);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lb-btn {
  position: fixed; z-index: 101;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: 1.2rem; font-weight: 900; color: var(--navy);
  background: linear-gradient(180deg, #F4BA35, var(--gold));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.lb-btn:hover { transform: scale(1.08); }
.lb-prev { left: max(14px, calc(50vw - 320px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(14px, calc(50vw - 320px)); top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
.lb-close { top: 18px; right: 18px; }
.lb-count {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #C7D2E4; font-weight: 700; letter-spacing: .06em;
}

/* ---------- games ---------- */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.game {
  background: var(--elevated);
  border: 1px solid var(--divider);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.game-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy); }
.game-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.game-body p { color: var(--muted); margin: 0 0 8px; }
.game-soon { filter: saturate(.92); }
.tag {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px;
}
.tag-live { background: rgba(30, 142, 82, .14); color: #1E8E52; }
.tag-soon { background: rgba(46, 111, 224, .12); color: var(--blue); }

/* ---------- web tools band ---------- */
.section-band {
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(232, 168, 28, .16), transparent 55%),
    linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #fff;
}
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.band-sub { margin-bottom: 0; color: #9FB0C9; }


/* ---------- beta signup ----------
   Navy band, same family as .section-band, but with the gold wash pulled to
   the form side so the eye lands on the input and not the copy. This is the
   only section on the page with something to actually DO, so it is allowed
   to be the loudest thing below the hero. */
/* The section-specific beta rules (.section-beta / .beta-inner / .beta-copy /
   .tag-beta / .beta-points) were removed 2026-08-31 with the beta signup.
   The FORM primitives below (.beta-form, .beta-label, .beta-input, ...) are
   deliberately KEPT: report-bug.html reuses them wholesale. */

/* ---------- download / store badges ----------
   Replaces the beta signup as the page's conversion point. The Apple badge
   ships dimmed (.badge-soon) until the App Store listing exists. Google's
   generic web badge carries large built-in padding, so it gets a taller
   height to render the same visual size as Apple's SVG. */
.section-download {
  background:
    radial-gradient(760px 460px at 50% 10%, rgba(232, 168, 28, .18), transparent 58%),
    linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: #fff;
  text-align: center;
}
.download-sub { color: #9FB0C9; max-width: 560px; margin: 0 auto 1.8rem; }
.store-badges {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.store-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.badge-apple img { height: 58px; width: auto; display: block; }
.badge-google img { height: 86px; width: auto; display: block; margin: -14px; }
.badge-soon { opacity: .5; pointer-events: none; }
.badge-soon-note {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.download-fine { margin-top: 1.6rem; color: #9FB0C9; font-size: .92rem; }
.download-fine a { color: var(--gold); }

.beta-form {
  background: var(--elevated);
  color: var(--text);
  border-radius: var(--radius);
  padding: 28px 26px 24px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
  display: grid;
  gap: 6px;
}
.beta-form-title { margin: 0 0 10px; font-size: 1.28rem; }
.beta-label {
  display: block;
  font-weight: 700;
  font-size: .93rem;
  margin-top: 12px;
}
.beta-label .req { color: #C0392B; }
.beta-label em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: .84rem;
  color: var(--muted);
  margin-top: 2px;
}
.beta-input {
  width: 100%;
  margin-top: 6px;
  padding: .72rem .85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--raised);
  border: 1.5px solid var(--divider);
  border-radius: 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.beta-input::placeholder { color: #93A2B8; }
.beta-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 111, 224, .16);
}
.beta-input.invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .13);
}
.beta-textarea { resize: vertical; min-height: 84px; }

/* Honeypot: off-screen, not display:none — some bots skip hidden inputs but
   happily fill anything merely positioned away. Also kept out of the tab
   order and hidden from assistive tech (aria-hidden on the wrapper). */
.beta-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.beta-submit {
  margin-top: 18px;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.beta-submit[disabled] { opacity: .6; cursor: default; transform: none; }
.beta-submit[disabled]:hover { transform: none; }

.beta-status {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: .95rem;
  min-height: 1.2em;
}
.beta-status.ok { color: #1E8E52; }
.beta-status.err { color: #C0392B; }

.beta-fine {
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Hero + game-card supporting notes, now that the "coming soon" text is no
   longer carried by a dead button. */
.hero-note { margin: -.6rem 0 1.2rem; font-size: .9rem; color: #9FB0C9; }
.game-note { font-size: .85rem; color: var(--muted); }

/* ---------- bug report form ----------
   Reuses the .beta-form card wholesale; these are only the additions the
   longer form needs. Kept minimal on purpose — a second near-identical
   form stylesheet is how two forms slowly stop looking like each other. */
.bug-form { margin-top: 8px; }
.bug-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
/* select needs the height and font pinned to match .beta-input, which
   browsers style very differently by default. */
select.beta-input {
  appearance: none;
  -webkit-appearance: none;
  height: calc(1.5rem + 1.44rem);
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2352627C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
}
/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: #9FB0C9; padding: 54px 0 40px; }
.footer-inner { display: grid; gap: 26px; }
.footer-brand { display: flex; gap: 14px; align-items: center; }
.footer-brand img { border-radius: 10px; }
.footer-brand strong { display: block; color: #fff; letter-spacing: .03em; }
.footer-brand span { font-size: .92rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-links a { color: #C7D2E4; font-weight: 600; }
.footer-links a:hover { color: var(--gold); }
.footer-legal { font-size: .84rem; margin: 0; opacity: .75; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 46px; }
  .hero-wordmark { margin-inline: auto; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-points { justify-content: center; }
  .games { grid-template-columns: 1fr; }
  .band-inner { flex-direction: column; text-align: center; }
  .store-badges { gap: 12px; }
  .nav-links { display: none; }
}
@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .statstrip-inner { grid-template-columns: 1fr 1fr; gap: 18px 8px; }
  .store-badge img { height: 56px; }
  /* phone-tuned layout (not tablets) */
  .section { padding: 56px 0; }
  .hero-inner { padding-top: 34px; padding-bottom: 44px; gap: 28px; }
  .hero-wordmark { width: 94%; }
  .hero-sub { font-size: 1.02rem; }
  .btn-big { padding: .9rem 1.5rem; font-size: 1rem; }
  .phone { width: min(250px, 66vw); padding: 10px; border-radius: 32px; }
  .phone img { border-radius: 24px; }
  .hero-arrow { width: 40px; height: 40px; }
  .carousel { --car-h: clamp(300px, 52vh, 430px); --car-gap: 12px; }
  .car-arrow { width: 40px; height: 40px; }
  .car-slide { border-radius: 16px; }
  .car-thumb { width: 42px; }
  .car-bar { flex-wrap: wrap; gap: 6px 12px; }
  .lb-btn { width: 44px; height: 44px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .game-body { padding: 20px 18px 24px; }
  .badge-apple img { height: 48px; }
  .badge-google img { height: 72px; margin: -12px; }
  .beta-form { padding: 22px 18px 20px; }
  /* 16px minimum — anything smaller makes iOS Safari zoom on focus. */
  .beta-input { font-size: 16px; }
  .bug-row { grid-template-columns: 1fr; }
  .footer-links { gap: 10px 18px; }
}