/* Word Safari marketing landing — brand tokens mirror the real app's own
   (src/styles/brand.ts, src/styles/theme.css, src/screens/Landing.css):
   sunrise amber #E8971E / #C5801A, warm cream #FFFDF8, Quicksand for
   display type, system stack for body copy (never Comic Sans). Self-hosted
   Quicksand Variable (fonts/, latin subset) since this directory is copied
   byte-for-byte by scripts/build.mjs, not run through a bundler that could
   resolve an `@fontsource` package import. */

@font-face {
  font-family: 'Quicksand Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('fonts/quicksand-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --bg: #fffdf8;
  --bg-soft: #fff3dc;
  --ink: #2b2622;
  --ink-soft: #736b62;
  --line: #f0e2c8;
  --card: #ffffff;
  --accent: #e8971e;
  --accent-deep: #c5801a;
  --accent-wash: #fff0d9;
  --green-text: #147a57;
  --shadow: 0 14px 40px rgba(120, 78, 20, 0.1);
  --maxw: 1080px;
  --font-display: 'Quicksand Variable', 'Quicksand', ui-rounded, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---------------------------------------------------- design contract
     DESIGN-POLISH pass (2026-07-24). Three small scales, used EVERYWHERE on
     this surface (index.html/privacy.html/terms.html) instead of one-off
     px/rem values, so the marketing site reads as one consistent system.
     The app's own src/styles/theme.css defines the matching contract for
     the game's own screens; the pixel values below are shared with it on
     purpose (same --radius-sm/--radius/--radius-lg numbers) so the two
     surfaces feel like the same product, not two different ones stitched
     together. */

  /* Spacing — 8px-based (8/16/24/32/48/64). Used for section padding, card
     padding, and grid/flex gaps. Typographic micro-spacing that should
     scale WITH a heading's own font-size (e.g. a heading's own margin-
     bottom) intentionally stays in `em`, not this scale. */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* Radius — one scale, four tiers, no one-offs. Every rounded corner on
     this surface (buttons, cards, device-mockup chrome, tiles) maps to one
     of these; nothing hardcodes its own px radius. */
  --radius-sm: 14px; /* small tiles, thumbnail imagery, the inner face of a nested device frame */
  --radius: 20px; /* cards */
  --radius-lg: 24px; /* the big "try it" device's outer bezel, hero-scale panels */
  --radius-pill: 999px; /* buttons, nav links, step badges — fully round */

  /* Type — 5 sizes, used everywhere on this surface. Headings (h1/h2 tier)
     stay fluid (clamp) since they span a phone-to-desktop hero; body copy
     is fixed, since a marketing page's paragraph text doesn't need to
     scale with viewport the way a headline does. */
  --fs-sm: 0.875rem; /* 14px — fine print, captions, meta text */
  --fs-base: 1rem; /* 16px — body copy, stat descriptions */
  --fs-md: 1.125rem; /* 18px — ledes, nav/brand/button labels, small headings */
  --fs-lg: clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem); /* 22–30px — h2 tier, the big stat number */
  --fs-xl: clamp(1.75rem, 1.1rem + 3vw, 2.5rem); /* 28–40px — h1 tier */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent-deep);
}

h1,
h2,
h3,
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus states: a visible amber ring on every interactive element, not just
   the browser default (which some UA stylesheets suppress on buttons). */
a:focus-visible,
button:focus-visible,
.play-btn:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------- scene stack
   PARALLAX INTEGRATION (2026-07-24): assets/parallax/scene.css draws the
   living savanna as .scene (position: fixed, z-index 0) plus a .scrim
   veil (position: fixed, z-index 1) directly under <body>. Every real
   content landmark needs an explicit stacking position ABOVE both so the
   page's own text and controls always paint on top of the backdrop,
   exactly the way scene.css's own header documents it — without this,
   the fixed backdrop (being a positioned element) would paint OVER this
   normal-flow content instead of behind it. */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------- header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}

/* A glyph (the parrot emoji), not body text — sized on its own, outside the
   --fs-* type scale, the same way an icon's pixel size isn't a "font size"
   even though it happens to be markup as one. */
.brand-glyph {
  font-size: 1.6rem;
  line-height: 1;
}

.brand-name {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--accent-deep);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  text-decoration: none;
  color: var(--accent-deep);
  padding: 0.6em 0.9em;
  border-radius: var(--radius-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-nav a:hover {
  background: var(--accent-wash);
}

/* ------------------------------------------------------------- buttons */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  /* >=18.66px bold clears WCAG's "large text" bar, which is what lets the
     amber-family fill below reach AA (3:1) rather than the ~2.4:1 white-on
     -light-amber would measure at body-text size. See .btn-primary below. */
  font-size: var(--fs-md);
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.8em 1.6em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

/* --accent-deep (#C5801A), not the lighter --accent (#E8971E): white text on
   the lighter tone only measures ~2.4:1, failing contrast even at large
   text size. accent-deep gets white text to ~3.2:1, which clears AA-LARGE
   (3:1) at this button's >=18.66px bold size — the same "reserve the light
   amber for large decorative type, never as a text background" rule the
   real app's own theme.css documents for this locked color pair. */
.btn-primary {
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 10px 26px rgba(197, 128, 26, 0.4);
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-deep);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- hero
   PARALLAX INTEGRATION (2026-07-24): the hero used to carry its own static
   savanna-1920/2752.webp background. That flat image is retired in favor
   of the living, animated .scene sitting behind the whole page (see the
   "scene stack" rule above and assets/parallax/scene.css) — the hero's
   own background is now transparent on purpose, letting that scene show
   through. min-height gives the hero enough room to actually show off the
   scene and its parallax before the visitor scrolls into the "try it"
   band below (matches the judged prototype's own hero proportions).

   justify-content: flex-start, not center: the scene's ground-level
   detail (the watering hole + turtle, the zebra family) is positioned in
   the LOWER portion of the fixed .scene, sized as a fraction of the full
   viewport. Centering this hero's text block vertically pushed its own
   lower lines (the "Already playing? Sign in" link, the hero-note caption)
   down into that same zone on short/wide viewports, directly overlapping
   the zebra family and pond — a real legibility bug caught in the final
   screenshot pass, not present in the prototype (whose own mock content
   had no hero-note-equivalent extra line). Anchoring the text near the
   TOP of the hero instead leaves the lower portion consistently clear for
   the ground-level scene, regardless of viewport size. */
.hero {
  position: relative;
  min-height: 88vh;
  min-height: 88dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(2rem, 9vh, 5rem) var(--space-md) var(--space-xl);
}

.hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.hero-glyph {
  font-size: clamp(3.2rem, 12vw, 4.4rem);
  line-height: 1;
  margin-bottom: 0.2em;
}

.hero h1 {
  font-size: var(--fs-xl);
  color: var(--ink);
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-lede {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 1.8em;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.hero-note {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  max-width: 42ch;
  margin: 1.6em auto 0;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ band */
.band {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

/* Translucent, not the old solid --bg-soft: the scene now sits behind the
   ENTIRE page (not just the hero), so every section stays mostly see-
   through and lets it read the whole way down. This wash still gives
   "see-it"/"how-it-works" a touch of visual separation from the plain
   .band sections; every piece of TEXT in here still sits on a fully solid
   .device/.strip-item card, never directly on this translucent tint. */
.band-soft {
  background: rgba(255, 243, 220, 0.55);
  max-width: none;
  padding-left: max(var(--space-md), calc((100% - var(--maxw)) / 2 + var(--space-md)));
  padding-right: max(var(--space-md), calc((100% - var(--maxw)) / 2 + var(--space-md)));
}

.band-soft > * {
  max-width: var(--maxw);
}

.band-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-lg);
}

.band-head h2 {
  font-size: var(--fs-lg);
  color: var(--ink);
}

.band-lede {
  color: var(--ink-soft);
  font-size: var(--fs-md);
  margin: 0;
}

/* --------------------------------------------------------------- try-it */
.try-frame-wrap {
  display: flex;
  justify-content: center;
}

/* Device-mockup chrome: a nested pair of radii, not two arbitrary numbers —
   the outer bezel is --radius-lg (24px) and, with this 12px padding, the
   inner screen sits at --radius-sm (14px) so the two edges read as
   concentric rather than mismatched. Same pairing used everywhere a phone
   frame appears on this page (the small strip thumbnails below reuse the
   next tier down: --radius / --radius-sm). */
.device {
  width: min(300px, 78vw);
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow);
}

.device-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 844;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}

.device-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.try-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.try-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.try-poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(232, 151, 30, 0.45);
}

.try-poster-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.try-caption {
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  max-width: 46ch;
  margin: 1.4rem auto 0;
}

.try-caption a {
  font-weight: 700;
  text-decoration: none;
}

.try-caption a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------- see-it */
.reel-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 2.2rem;
}

.reel-device {
  width: min(280px, 70vw);
}

.reel-device video {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  background: #000;
}

.strip {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: 0.4rem var(--space-md) var(--space-sm);
  margin: 0 calc(-1 * var(--space-md));
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.strip::-webkit-scrollbar {
  height: 8px;
}

.strip::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--radius-pill);
}

.strip-item {
  flex: 0 0 auto;
  width: clamp(150px, 40vw, 190px);
  scroll-snap-align: center;
  text-align: center;
}

/* The small strip thumbnail is the same nested-radius idea as the big
   .device above, one tier down: --radius (20px) outer / --radius-sm (14px)
   inner, with this 6px padding. */
.strip-item .device {
  padding: 6px;
  border-radius: var(--radius);
}

.strip-item img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
}

.strip-item figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
}

.strip-item figcaption small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-top: 0.15rem;
}

/* ------------------------------------------------------------ receipts
   Five stat cards. A plain `auto-fit` grid strands the 5th card ("More
   languages") alone in its own row at several viewport widths — 2 columns
   on a phone, 4 on a tablet — leaving a big empty gap beside it (found
   during the design-polish pass's screenshot review). Fixed breakpoints
   instead, chosen so 5 never lands awkwardly: 1 column (stacked, so a lone
   5th card is simply the last row, nothing beside it to look empty), then
   2 columns with the last card spanning both once there's room for a grid
   at all, then a single tidy row of 5 once the viewport is wide enough to
   hold all five without cramming. */
.inside-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

@media (min-width: 640px) {
  .inside-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .inside-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .inside-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .inside-card:last-child {
    grid-column: auto;
  }
}

.inside-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow);
}

.inside-count {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--accent-deep);
}

.inside-card b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  margin: 0.1rem 0 0.35rem;
}

.inside-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-base);
  line-height: 1.45;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

/* The emoji icon, not body text — same exception as .brand-glyph above. */
.trust-item span {
  font-size: 1.2rem;
  line-height: 1.3;
}

.trust-item b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
}

.trust-item small {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

/* ------------------------------------------------------------- how-steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  counter-reset: step;
  margin-top: var(--space-xs);
}

.step {
  text-align: center;
}

.step-num {
  width: 42px;
  height: 42px;
  margin: 0 auto var(--space-xs);
  border-radius: var(--radius-pill);
  /* accent-deep, not accent: see .btn-primary's comment, same white-on
     -light-amber contrast reasoning. */
  background: var(--accent-deep);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
}

.step h3 {
  font-size: var(--fs-md);
  margin-bottom: 0.35em;
}

.step p {
  color: var(--ink-soft);
  font-size: var(--fs-base);
  margin: 0;
}

/* ----------------------------------------------------------- final cta */
.final-cta {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--maxw);
  margin: 0 auto;
}

.final-cta h2 {
  font-size: var(--fs-lg);
}

.final-cta .hero-cta {
  margin-top: var(--space-md);
}

/* ----------------------------------------------------------------footer
   Solid, not translucent like the bands above it: the footer is the one
   full-width section that should read as "the floor of the page", never
   showing the scene through it (matches the judged prototype's own
   near-solid footer treatment). */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.site-footer p {
  max-width: 60ch;
  margin: 0 auto 0.6em;
}

.site-footer a {
  font-weight: 700;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.foot-fine {
  font-size: var(--fs-sm);
  opacity: 0.85;
}

/* Links inside the muted fine-print lines (Cambridge disclaimer, the
   Merrowby umbrella line) stay quiet: no bold accent-deep treatment like
   the primary footer nav row above, just an underline on the same muted
   ink-soft color so the line still reads as one calm sentence. */
.foot-fine a {
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
}

.foot-fine a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------- footer-guides
   Compact "Guides" link row on the homepage footer only: 6-8 of the
   strongest SEO pages, wrapped and centered like the primary footer nav
   row above (same bold accent-deep .site-footer a treatment), just
   smaller and denser since there are more of them. */
.footer-guides {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em 1.1em;
  max-width: 62ch;
  margin: 0 auto 0.6em;
}

/* ----------------------------------------------------------------- legal */
/* Shared by privacy.html and terms.html: a single reading column reusing
   the same brand tokens (accent-deep links, Quicksand display headings) as
   the rest of the landing, without any of the marketing hero/band
   apparatus those two pages don't need. */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md) var(--space-2xl);
}

.legal h1 {
  font-size: var(--fs-xl);
}

.legal .updated {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-top: -0.4em;
}

.legal h2 {
  margin-top: 2em;
  font-size: var(--fs-lg);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: var(--fs-base);
}

.legal th,
.legal td {
  text-align: left;
  padding: 0.5em 0.6em;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal th {
  color: var(--ink-soft);
  font-weight: 600;
}

.legal hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4rem 0 1.4rem;
}

.legal .contact {
  color: var(--ink-soft);
}