/* ==========================================================================
   Explore the Word — website
   --------------------------------------------------------------------------
   The palette and type below are taken from the app's own design system
   (explore_the_word/lib/core/design/tokens.dart and typography.dart), not
   invented for the web. The site previously ran on purple/pink gradients that
   appear nowhere in the product — Phase 0 of the design work removed purple
   from the app entirely, so the marketing site was advertising a colour
   scheme that no longer existed.

   Ink is the primary ramp, brass the accent, paper the surface.
   ========================================================================== */

:root {
  /* Ink — primary ramp */
  --ink-950: #0f1216;
  --ink-900: #16213a;
  --ink-800: #1e2c4a;
  --ink-700: #2a3d63;
  --ink-600: #3a5180;
  --ink-500: #4e68a0;
  --ink-400: #7189bc;
  --ink-300: #9eafd3;
  --ink-200: #c9d4e7;
  --ink-100: #e6ebf4;
  --ink-50:  #f3f6fb;

  /* Brass — accent */
  --brass-800: #6b5218;
  --brass-700: #8a6a1f;
  --brass-600: #a8811f;
  --brass-500: #c79a2e;
  --brass-400: #d9b25a;
  --brass-300: #e8cc8e;
  --brass-100: #f7edd5;

  /* Paper — warm surfaces */
  --paper-0:   #ffffff;
  --paper-50:  #faf7f2;
  --paper-100: #f4f0e8;
  --paper-150: #efe9de;
  --paper-200: #e9e3d8;
  --paper-300: #d6cec0;

  /* Text */
  --text-primary:   #151a22;
  --text-secondary: #4a5260;
  --text-tertiary:  #656d7a;
  --text-on-dark:   #edeff2;
  --text-on-dark-2: #a8b0bc;

  /* Semantic */
  --success: #2f7a4f;
  --warning: #9c5511;
  --error:   #a33a32;

  /* Type — the app ships Literata (serif) and Inter (sans) */
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing — 4pt base, mirroring AppSpace */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.25rem;  --s6: 1.5rem;   --s8: 2rem;     --s12: 3rem;
  --s16: 4rem;    --s20: 5rem;    --s24: 6rem;

  /* Radius — mirroring AppRadius */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* Elevation — restrained; the app uses borders, not shadows */
  --shadow-sm: 0 1px 2px rgba(21, 26, 34, 0.06);
  --shadow-md: 0 4px 16px rgba(21, 26, 34, 0.08);
  --shadow-lg: 0 12px 40px rgba(21, 26, 34, 0.12);
  --shadow-phone: 0 24px 70px rgba(15, 18, 22, 0.28);

  --maxw: 1160px;
  --measure: 68ch;
  --nav-h: 72px;
}

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ink-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink-700); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 var(--s4);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Capped at 3.4rem, not 4rem. At 4rem the hero headline ran to four lines on a
   1440px desktop and pushed the facts row below the fold — the strongest
   at-a-glance value on the page was the one thing nobody saw. */
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 var(--s4); }

:focus-visible {
  outline: 3px solid var(--brass-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-800); color: var(--paper-0);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--paper-0); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s6); }
.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;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 52px;                 /* matches the app's button height */
  padding: 0 var(--s6);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font: 600 1rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--ink-800); color: var(--paper-0); }
.btn-primary:hover { background: var(--ink-700); color: var(--paper-0); }

.btn-brass { background: var(--brass-500); color: var(--ink-950); }
.btn-brass:hover { background: var(--brass-400); color: var(--ink-950); }

.btn-outline { background: transparent; color: var(--ink-700); border-color: var(--ink-200); }
.btn-outline:hover { background: var(--ink-50); color: var(--ink-800); border-color: var(--ink-300); }

.btn-on-dark { background: var(--paper-0); color: var(--ink-900); }
.btn-on-dark:hover { background: var(--paper-100); color: var(--ink-900); }

.btn-ghost-light {
  background: rgba(255,255,255,.08); color: var(--paper-0);
  border-color: rgba(255,255,255,.28);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: var(--paper-0); }

.btn-sm { min-height: 42px; padding: 0 var(--s4); font-size: .9375rem; }
.btn .icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Store badges ----------
   The hero used to offer App Store (white), Google Play (brass) and a ghost
   "Watch it work" at near-equal weight, which made brass the visual primary
   for no reason other than that it was the brightest. Two matched black
   badges read as one decision — "get the app", pick your platform — and the
   demo drops to a text link, which is what a secondary action should look
   like.

   NOTE: this reproduces the official badge layout. For strict trademark
   compliance, swap the artwork for Apple's and Google's own downloads:
   https://developer.apple.com/app-store/marketing/guidelines/
   https://play.google.com/intl/en_us/badges/                                */

.store-badges { display: flex; flex-wrap: wrap; gap: var(--s3); }

.store-badge {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: 0 var(--s5) 0 var(--s4);
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.store-badge:hover {
  background: #16181c; color: #fff;
  border-color: rgba(255,255,255,.5); transform: translateY(-1px);
}
.store-badge:active { transform: translateY(0); }
.store-badge svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.store-badge .badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge .badge-small {
  font-size: .6875rem; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; opacity: .82;
}
.store-badge .badge-large {
  font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600;
  letter-spacing: -.01em;
}

/* On light backgrounds the black badge needs no border to hold its edge. */
.section-white .store-badge, .section-paper .store-badge { border-color: transparent; }

/* Secondary action: a link, not a button. */
.link-action {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  color: var(--brass-300); font-weight: 600; font-size: .9375rem;
  text-decoration: none;
}
.link-action:hover { color: var(--brass-400); text-decoration: underline; }
.link-action svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Platform ordering. main.js stamps data-platform on <html>; until it does,
   both badges show in document order, so this is purely additive. */
html[data-platform="android"] .store-badges { flex-direction: row-reverse; justify-content: flex-end; }
@media (max-width: 560px) {
  html[data-platform="android"] .store-badges { flex-direction: column-reverse; }
  .store-badges { flex-direction: column; align-items: stretch; }
  .store-badge { justify-content: center; }
}

/* ---------- Navigation ---------- */

.navbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--paper-200);
}
.nav-container {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--s6);
  display: flex; align-items: center; gap: var(--s6);
}
.nav-logo {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-serif); font-weight: 600; font-size: 1.125rem;
  color: var(--text-primary); text-decoration: none; margin-right: auto;
}
.nav-logo:hover { color: var(--text-primary); }
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--ink-800); color: var(--brass-400);
  display: grid; place-items: center; flex: none;
}
.logo-mark svg { width: 20px; height: 20px; fill: currentColor; }

.nav-menu { display: flex; align-items: center; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: inline-block; padding: var(--s2) var(--s3);
  color: var(--text-secondary); text-decoration: none;
  font-size: .9375rem; font-weight: 500; border-radius: var(--r-sm);
}
.nav-link:hover { color: var(--text-primary); background: var(--paper-100); }
.nav-actions { display: flex; align-items: center; gap: var(--s3); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; border-radius: var(--r-sm); padding: 10px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--text-primary); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span + span { margin-top: 5px; }
.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: 900px) {
  .nav-toggle { display: block; }
  .nav-actions { display: none; }
  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-50); border-bottom: 1px solid var(--paper-200);
    padding: var(--s3) var(--s6) var(--s6);
    transform: translateY(-120%); transition: transform .25s ease;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-link { padding: var(--s4) var(--s2); font-size: 1.05rem; border-bottom: 1px solid var(--paper-200); border-radius: 0; }
  .nav-menu .btn { margin-top: var(--s4); width: 100%; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(217,178,90,.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--ink-900) 0%, var(--ink-800) 55%, var(--ink-950) 100%);
  color: var(--text-on-dark);
  padding: var(--s16) 0 var(--s20);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s16); align-items: center;
}
.hero h1 { color: var(--paper-0); margin-bottom: var(--s4); }
.hero h1 .accent { color: var(--brass-400); display: block; }
.hero-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.1875rem);
  color: var(--text-on-dark-2); max-width: 46ch; margin-bottom: var(--s6);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); margin-bottom: var(--s5);
  border-radius: var(--r-pill);
  background: rgba(217,178,90,.14); border: 1px solid rgba(217,178,90,.35);
  color: var(--brass-300); font-size: .8125rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }

/* Reassurance line directly under the CTAs. Removes the two silent objections
   ("is it on my phone?", "will it ask me to sign up?") at the moment of the
   click, which is the only moment they matter. */
.hero-reassure {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin: 0 0 var(--s6); font-size: .875rem; color: var(--text-on-dark-2);
}
.hero-reassure span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero-reassure svg { width: 15px; height: 15px; fill: var(--brass-400); flex: none; }

/* Styling for the App Store rating, which is commented out in index.html
   until there are enough real reviews to quote. See the note there. */
.hero-rating {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s6); font-size: .9375rem; color: var(--text-on-dark-2);
}
.hero-rating .stars { display: inline-flex; gap: 2px; }
.hero-rating .stars svg { width: 16px; height: 16px; fill: var(--brass-400); }
.hero-rating strong { color: var(--paper-0); font-weight: 600; }
.hero-rating a { color: var(--text-on-dark-2); }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8);
  padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.14);
}
.fact strong {
  display: block; font-family: var(--font-serif); font-size: 1.6rem;
  color: var(--brass-300); font-weight: 600; line-height: 1.1;
}
.fact span { font-size: .875rem; color: var(--text-on-dark-2); }

/* Phone frame */
.phone {
  position: relative; width: min(330px, 82vw); margin-inline: auto;
  border-radius: 46px; padding: 10px;
  background: linear-gradient(160deg, #2b3446, #11151c);
  box-shadow: var(--shadow-phone);
}
.phone::after {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: var(--r-pill); background: #0b0e13;
}
.phone img, .phone video {
  width: 100%; border-radius: 38px; display: block; background: var(--paper-50);
}
.phone-tilt { transform: perspective(1400px) rotateY(-9deg) rotateX(2deg); }

@media (max-width: 900px) {
  .hero { padding: var(--s16) 0 var(--s20); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s12); }
  .hero-lede { max-width: none; }
  .phone-tilt { transform: none; }
}

/* ---------- Sections ---------- */

.section { padding: var(--s24) 0; }
.section-tight { padding: var(--s16) 0; }
.section-paper { background: var(--paper-50); }
.section-white { background: var(--paper-0); }
.section-ink { background: var(--ink-900); color: var(--text-on-dark); }
.section-ink h2, .section-ink h3 { color: var(--paper-0); }

.section-head { max-width: var(--measure); margin: 0 auto var(--s12); text-align: center; }
.section-head .kicker {
  display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brass-700); margin-bottom: var(--s3);
  /* brass-700, not brass-600: at 13px bold this is small text and needs
     4.5:1. brass-600 on paper-50 measures 3.37; brass-700 measures 4.72. */
}
.section-ink .kicker { color: var(--brass-400); }
.section-head p { font-size: 1.0625rem; color: var(--text-secondary); margin: 0; }
.section-ink .section-head p { color: var(--text-on-dark-2); }

/* ---------- Value strip ---------- */

.value-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
  padding: var(--s8) 0;
}
.value {
  text-align: center; padding: var(--s5) var(--s4);
  background: var(--paper-0); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg);
}
.value .icon { width: 26px; height: 26px; fill: var(--brass-700); margin: 0 auto var(--s3); }
.value strong { display: block; color: var(--text-primary); font-size: .9875rem; margin-bottom: var(--s1); }
.value span { font-size: .875rem; color: var(--text-tertiary); }
@media (max-width: 780px) { .value-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Feature rows ---------- */

.feature-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s16); align-items: center;
  padding: var(--s12) 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--paper-200); }
.feature-row.reverse .feature-media { order: -1; }
.feature-copy h3 { margin-bottom: var(--s3); }
.feature-copy > p { max-width: 46ch; }

.feature-list { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.feature-list li {
  position: relative; padding-left: var(--s6); margin-bottom: var(--s3);
  color: var(--text-secondary);
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brass-500);
}
.feature-media { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--s8); padding: var(--s8) 0; }
  .feature-row.reverse .feature-media { order: 0; }
  .feature-copy > p { max-width: none; }
}

/* ---------- Smaller features ----------
   Six full-width alternating rows was two too many: by the fourth the reader
   is pattern-matching rather than reading. The remaining features keep their
   place on the page but stop asking for a full screen each. */

.mini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6);
  margin-top: var(--s12); padding-top: var(--s12);
  border-top: 1px solid var(--paper-200);
}
.mini {
  background: var(--paper-50); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg); padding: var(--s6);
}
.mini .icon { width: 24px; height: 24px; fill: var(--brass-700); margin-bottom: var(--s4); }
.mini h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.mini p { margin: 0; font-size: .9375rem; }
@media (max-width: 860px) { .mini-grid { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- Mid-page CTA band ----------
   Between the hero and the footer there were roughly 5,000px with no way to
   convert except the small button in the nav. */

.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s6); margin-top: var(--s16);
  padding: var(--s8);
  background: var(--ink-900); border-radius: var(--r-xl);
  color: var(--text-on-dark);
}
.cta-band h2 {
  color: var(--paper-0); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0 0 var(--s2);
}
.cta-band p { margin: 0; color: var(--text-on-dark-2); font-size: .9375rem; max-width: 46ch; }
.cta-band .store-badges { flex: none; }
@media (max-width: 860px) { .cta-band { flex-direction: column; align-items: flex-start; padding: var(--s6); } }

/* ---------- Screenshot gallery ---------- */

.gallery {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(260px, 68vw);
  gap: var(--s6); overflow-x: auto;
  padding: var(--s4) var(--s6) var(--s8);
  margin-inline: calc(var(--s6) * -1);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: var(--r-pill); }
.shot { scroll-snap-align: center; text-align: center; margin: 0; }
.shot img {
  width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--paper-200); box-shadow: var(--shadow-md);
  background: var(--paper-0);
}
.shot figcaption {
  margin-top: var(--s3); font-size: .875rem; font-weight: 500;
  color: var(--text-tertiary);
}
/* The gallery scrolls sideways, which is not obvious when the last thumbnail
   happens to end near the container edge. */
.scroll-hint {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  margin: calc(var(--s4) * -1) 0 0;
  font-size: .8125rem; color: var(--text-tertiary);
}
.scroll-hint svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Video ---------- */

.video-wrap { max-width: 340px; margin-inline: auto; }
.video-wrap video { border-radius: 38px; }

/* The feature clips used to render as bare rounded rectangles at full column
   width (~500px) while every still sat in a 330px phone bezel — two design
   languages side by side, and the clips read as unfinished placeholder. They
   now go inside .phone like everything else, so this class only exists as the
   hook main.js uses to pause them offscreen. */
.clip { width: 100%; }

/* ---------- Translations ---------- */

.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.lang-card {
  background: var(--paper-0); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg); padding: var(--s6);
}
.lang-card h3 { font-size: 1.15rem; margin-bottom: var(--s3); }
.lang-card ul { list-style: none; margin: 0; padding: 0; }
.lang-card li {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--paper-100);
  font-size: .9375rem;
}
.lang-card li:last-child { border-bottom: 0; }
.tag {
  flex: none; min-width: 68px;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  /* brass-800 on brass-100 is 6.34:1; brass-700 was 4.33 and just missed. */
  color: var(--brass-800); background: var(--brass-100);
  border-radius: var(--r-xs); padding: 2px 6px; text-align: center;
}
@media (max-width: 860px) { .lang-grid { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s4);
  border-radius: 50%; background: var(--ink-800); color: var(--brass-300);
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600;
}
.step h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.step p { margin: 0; font-size: .9875rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- Trust cards ---------- */

.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.trust {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: var(--s6);
}
.trust .icon { width: 26px; height: 26px; fill: var(--brass-400); margin-bottom: var(--s4); }
.trust h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.trust p { margin: 0; font-size: .9375rem; color: var(--text-on-dark-2); }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */

.cta {
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(217,178,90,.16) 0%, transparent 60%),
    var(--ink-900);
  color: var(--text-on-dark);
  padding: var(--s24) 0;
}
.cta h2 { color: var(--paper-0); }
.cta p { color: var(--text-on-dark-2); max-width: 52ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s8); }
.cta-note { margin-top: var(--s6); font-size: .875rem; color: var(--text-on-dark-2); }
.cta-note + .cta-note { margin-top: var(--s2); }

/* ---------- Footer ---------- */

.footer { background: var(--ink-950); color: var(--text-on-dark-2); padding: var(--s16) 0 var(--s8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s8); }
.footer h3 { color: var(--paper-0); font-family: var(--font-sans); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s2); }
.footer a { color: var(--text-on-dark-2); text-decoration: none; font-size: .9375rem; }
.footer a:hover { color: var(--brass-300); text-decoration: underline; }
.footer-brand p { font-size: .9375rem; max-width: 34ch; }
.footer-bottom {
  margin-top: var(--s12); padding-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-size: .875rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Social row */
.social-links { display: flex; gap: var(--s3); margin-top: var(--s5); }
.social-links a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: var(--text-on-dark-2);
}
.social-links a:hover { background: rgba(255,255,255,.14); color: var(--brass-300); }
.social-links svg { width: 19px; height: 19px; fill: currentColor; }

/* Email capture. Translation licensing genuinely takes months, so "tell me
   when a new one lands" is a real thing to subscribe to rather than a
   newsletter nobody asked for. */
.footer-signup {
  margin-top: var(--s12); padding-top: var(--s8);
  border-top: 1px solid rgba(255,255,255,.1);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s12);
  align-items: center;
}
.footer-signup h3 { margin-bottom: var(--s2); }
.footer-signup > div > p { margin: 0; font-size: .9375rem; max-width: 46ch; }
.footer-signup form { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 860px) { .footer-signup { grid-template-columns: 1fr; } }
.footer-signup input[type="email"] {
  flex: 1 1 12rem; min-width: 0; min-height: 44px;
  padding: 0 var(--s3);
  font: 400 .9375rem/1 var(--font-sans); color: var(--paper-0);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm);
}
.footer-signup input[type="email"]::placeholder { color: var(--text-on-dark-2); }
.footer-signup input[type="email"]:focus {
  outline: none; border-color: var(--brass-400);
  background: rgba(255,255,255,.11);
}
.footer-signup input[type="email"]:focus-visible { outline: 3px solid var(--brass-500); outline-offset: 2px; }
.footer-signup button {
  min-height: 44px; padding: 0 var(--s4); flex: none;
  font: 600 .9375rem/1 var(--font-sans);
  color: var(--ink-950); background: var(--brass-400);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.footer-signup button:hover { background: var(--brass-300); }
.footer-signup .hint { margin: var(--s2) 0 0; font-size: .8125rem; color: var(--text-on-dark-2); }

/* ---------- Sticky mobile CTA ----------
   Appears once the hero's own buttons have scrolled away, so there is never a
   point on a phone where getting the app takes more than one tap. Hidden on
   desktop, where the nav button stays visible the whole way down. */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 18, 22, .95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: translateY(110%); transition: transform .28s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sticky-copy { flex: 1; min-width: 0; }
.sticky-cta strong {
  display: block; color: var(--paper-0);
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.25;
}
.sticky-cta span { font-size: .8125rem; color: var(--text-on-dark-2); }
.sticky-cta .btn { flex: none; }

@media (max-width: 900px) {
  .sticky-cta { display: flex; }
  /* Room for the bar so it never covers the last line of the footer. */
  .footer { padding-bottom: calc(var(--s16) + env(safe-area-inset-bottom, 0px)); }
}
/* Without JS the bar never unhides, so it never sits there permanently. */
.sticky-cta[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- Content pages (faq / support / contact / privacy) ---------- */

.page-header {
  background: linear-gradient(160deg, var(--ink-900), var(--ink-800));
  color: var(--text-on-dark); padding: var(--s16) 0 var(--s12); text-align: center;
}
.page-header h1 { color: var(--paper-0); margin-bottom: var(--s3); }
.page-header p { color: var(--text-on-dark-2); max-width: 56ch; margin-inline: auto; }

.prose { max-width: var(--measure); margin-inline: auto; }
.prose h2 { margin-top: var(--s12); }
.prose h3 { margin-top: var(--s8); }
.prose ul, .prose ol { padding-left: var(--s6); }
.prose li { margin-bottom: var(--s2); }

.card {
  background: var(--paper-0); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg); padding: var(--s6);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s6); }

/* Accordion */
.faq-item {
  background: var(--paper-0); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg); margin-bottom: var(--s3); overflow: hidden;
}
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s5) var(--s6);
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 1.0625rem/1.4 var(--font-sans); color: var(--text-primary);
}
.faq-q:hover { background: var(--paper-50); }
.faq-q .chev { flex: none; width: 20px; height: 20px; fill: var(--text-tertiary); transition: transform .2s ease; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { padding: 0 var(--s6) var(--s5); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a[hidden] { display: none; }

/* Reveal-on-scroll — progressive enhancement, visible without JS */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Contact page ---------- */

.contact-layout {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s12);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: var(--s8); } }

.contact-form { max-width: 42rem; }
.field { margin-bottom: var(--s5); }
.field label {
  display: block; margin-bottom: var(--s2);
  font-weight: 600; font-size: .9375rem; color: var(--text-primary);
}
.field input, .field select, .field textarea {
  width: 100%; padding: var(--s3) var(--s4);
  font: 400 1rem/1.5 var(--font-sans); color: var(--text-primary);
  background: var(--paper-0);
  border: 1.5px solid var(--paper-300); border-radius: var(--r-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink-600);
  box-shadow: 0 0 0 3px rgba(58, 81, 128, .15);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--brass-500); outline-offset: 2px;
}

/* ---------- Support page ---------- */

.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s6); }
.support-card { background: var(--paper-0); border: 1px solid var(--paper-200); border-radius: var(--r-lg); padding: var(--s6); }
.support-card h3 { margin-top: 0; font-size: 1.1rem; }
.support-card ol, .support-card ul { padding-left: var(--s5); margin-bottom: 0; }
.support-card li { margin-bottom: var(--s2); font-size: .9375rem; }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.tier {
  text-align: center; padding: var(--s6) var(--s4);
  background: var(--paper-0); border: 1px solid var(--paper-200); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: var(--s3);
}
.tier .amount {
  font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600;
  color: var(--brass-700); line-height: 1;
}
.tier p { font-size: .9375rem; margin: 0; flex: 1; }

/* The nav carries the CTA twice: once inside .nav-menu for the mobile drawer,
   once in .nav-actions for the desktop bar. Each layout shows exactly one. */
@media (min-width: 901px) {
  .nav-menu .btn { display: none; }
}