/* Callie's Mahjong — shared styles */

:root {
  --navy-900: #101820;
  --navy-800: #181f2e;
  --navy-700: #202838;
  --navy-600: #283048;
  --felt-500: #27362b;
  --gold-300: #f8dd93;
  --gold-400: #f3c65a;
  --gold-500: #ecb236;
  --pink-400: #f083b8;
  --pink-500: #ec5aa0;
  --pink-600: #cf4188;
  --blue-500: #4a63c9;
  --cream-100: #faf6ea;
  --cream-200: #ece4d0;
  --text-muted: #b6bccb;
  --text-faint: #8b93a6;
  --border-soft: rgba(250, 246, 234, 0.1);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-w: 1160px;
}

* {
  box-sizing: border-box;
}

/* The app's wordmark face, so the site header and the app's title plaque are the same object.

   Allura, replacing Playlist Script (Phil, 2026-08-06). ⚠️ The swap matters here more than in the
   app: Playlist is licensed for PERSONAL use, and a webfont on a public site is distribution in
   its own right. Allura is SIL OFL, which permits exactly this.

   Served as TTF rather than WOFF2 — there is no woff2 tooling on this machine, and every browser
   the site supports reads `format("truetype")`. 88 KB, cached immutably via _headers.

   `font-display: swap` on purpose: the wordmark is text, not an image, so it must be readable
   during the download rather than invisible. It renders in the system face for one paint. */
@font-face {
  font-family: "Allura";
  src: url("../fonts/Allura.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Optima Modoki — the app's display face, used on its button labels and menu headings.
   The app bundles the rgABO cut (3315 glyphs, the fuller of the two files the download ships);
   this is the same file, so the site and the app draw identical letterforms.
   ONE WEIGHT ONLY. Do not ask for 700/800 — the browser answers with synthetic emboldening,
   which smears the face rather than thickening it. Same rule as Allura above. */
@font-face {
  font-family: "OptimaModoki";
  src: url("../fonts/Optimamodoki-rgABO.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  background: var(--navy-900);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--navy-900);
  background-image: radial-gradient(120% 90% at 50% -10%, #202838 0%, var(--navy-900) 55%, #101820 100%);
  color: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Background texture: soft tile-glow blobs */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 85% 8%, rgba(236, 90, 160, 0.16), transparent 70%),
    radial-gradient(35% 28% at 8% 18%, rgba(243, 198, 90, 0.12), transparent 70%),
    radial-gradient(45% 35% at 50% 100%, rgba(40, 48, 72, 0.45), transparent 70%);
}

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  /* ⚠️ WAS rgba(8, 31, 23, 0.72) — the old --forest-900 written as rgba, so the hex sweep and the
     relay's token table both missed it and the nav stayed green over a navy page. Found by reading the
     computed style off the rendered header, not the file. */
  background: rgba(16, 24, 32, 0.72);
  border-bottom: 1px solid var(--border-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ◻️ A floor on the space between brand, links and the button. `space-between` alone lets them run
     right up against each other once the row is tight — at 960 the brand was touching "Features". */
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  /* ⚠️ The wordmark must not break. Adding a gap to .nav gave the row 24px of breathing space and
     immediately pushed "Callie's Mahjong" onto two lines at 960 — one wrap traded for another. */
  white-space: nowrap;
  flex: 0 0 auto;
  gap: 10px;
  /* Allura, matching the app's plaque. The `<img>` beside it is sized in px and is
     unaffected by any of this, so the icon does not move.

     Three of these four values change BECAUSE the face changed, not as taste:
       - 29px, not 17px — Allura's x-height is only 0.275 em against ~0.47 for the system face, so at
         an equal size it reads not far off half as big. 17 x 1.71 is the same optical multiplier the
         app applies to the plaque, measured off the font's own OS/2 table. ⚠️ This was 23px for
         Playlist Script and had to be recomputed: Allura has a markedly smaller x-height.
       - weight 400, not 700 — Allura ships one weight; asking for 700 gets synthetic emboldening,
         which smears a script face rather than thickening it.
       - letter-spacing 0, not -0.01em — negative tracking closes the gaps a joined script needs and
         makes the letterforms collide. */
  font-family: "Allura", -apple-system, BlinkMacSystemFont, "SF Pro Text", Georgia, serif;
  font-weight: 400;
  font-size: 29px;
  letter-spacing: 0;
  line-height: 1.1;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  /* ⚠️ THE LINKS ARE WHAT GIVES WAY, not the call to action. `min-width: 0` lets this row shrink
     below its content width so the button keeps its size in the tight band above the breakpoint. */
  min-width: 0;
  flex: 0 1 auto;
}

.nav-links a:hover {
  color: var(--cream-100);
}

/* The header's primary action.
   🔴 IT USED TO WRAP INTO A THREE LINE BLOB, and only in a band nobody tests: at 1280 it measured
   111x34 and at 600 it measured 111x34, but at 820 it was 89x50 — two lines — because the desktop
   nav links are still shown until 760 and the row simply ran out of room. Measured, not guessed.
   ⭐ THREE THINGS KEEP IT ON ONE LINE, and each does a different job:
     · white-space: nowrap  — the text can never break, whatever the width;
     · flex: 0 0 auto       — the button is never the thing that gets squeezed;
     · the nav links shrink instead (see .nav-links), because something has to give. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--cream-100);
  color: #101820;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  /* min-height 40 so it is a comfortable tap target beside the 22px hamburger. */
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 100px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.nav-cta:hover {
  background: var(--gold-300);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.26);
}

.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* ◻️ A visible keyboard focus ring. The page claims full accessibility and this control had none —
   :focus-visible keeps it off mouse clicks, so nothing changes for a pointer user. */
.nav-cta:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream-100);
  font-size: 22px;
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px 24px 18px;
  border-top: 1px solid var(--border-soft);
}

.mobile-menu a {
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}

.mobile-menu.open {
  display: flex;
}

/* ⭐ 1000, NOT 760 — and 900 was still too low, which took a measurement to see.
   Laid out without wrapping, this row needs: wordmark ~150 + links ~600 + button 123, plus two 24px
   gaps and 48px of padding, so about 970. At 760 the button folded into three lines; at 900 the
   button was fine and the WORDMARK folded instead. Below 1000 the hamburger is simply the right
   answer, and every width above it has room to spare. */
@media (max-width: 1000px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

/* ---------- Buttons / badges ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  padding: 10px 18px 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.appstore-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.appstore-badge svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.appstore-badge .lines {
  line-height: 1.05;
}

.appstore-badge .lines small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}

.appstore-badge .lines strong {
  display: block;
  font-size: 19px;
  font-weight: 600;
  font-family: -apple-system, "SF Pro Display", sans-serif;
}

.btn-ghost {
  font-family: "OptimaModoki", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid var(--border-soft);
  color: var(--cream-100);
  font-weight: 600;
  font-size: 14.5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-ghost:hover {
  border-color: rgba(250, 246, 234, 0.3);
  background: rgba(250, 246, 234, 0.06);
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: linear-gradient(120deg, var(--gold-300), var(--gold-500));
  padding: 6px 13px;
  border-radius: 100px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero-icon {
  width: 136px;
  height: 136px;
  border-radius: 32px;
  box-shadow: 0 20px 48px rgba(236, 90, 160, 0.35), 0 6px 14px rgba(0,0,0,0.35);
  margin-bottom: 32px;
}

.hero h1 {
  font-family: "OptimaModoki", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 400;
  background: linear-gradient(120deg, var(--cream-100) 40%, var(--gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .accent {
  background: linear-gradient(120deg, var(--gold-300), var(--pink-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 0 32px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
  font-size: 13.5px;
  color: var(--text-faint);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gold-400);
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 54px;
}

.hero-visual .glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 198, 90, 0.22), transparent 70%);
  filter: blur(10px);
  z-index: 0;
}

.phone-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 272px;
  background: linear-gradient(160deg, #1a1a1a, #050505);
  border-radius: 46px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.phone-frame.zoomable {
  cursor: zoom-in;
}

.phone-frame.zoomable:hover,
.phone-frame.zoomable:focus-visible {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}

.phone-frame.zoomable:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 4px;
}

.phone-frame .notch {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 20px;
  background: #050505;
  border-radius: 12px;
  z-index: 2;
}

.phone-frame img {
  width: 100%;
  display: block;
  border-radius: 34px;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: rgba(4, 15, 10, 0.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: min(420px, 90vw);
  max-height: 88vh;
  width: auto;
  border-radius: 34px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  transform: scale(0.82);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.lightbox.open img {
  transform: scale(1);
  opacity: 1;
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 246, 234, 0.1);
  border: 1px solid var(--border-soft);
  color: var(--cream-100);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(250, 246, 234, 0.2);
  transform: scale(1.06);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-icon {
    margin-left: auto;
    margin-right: auto;
  }
  .btn-row {
    justify-content: center;
  }
  .hero-meta {
    justify-content: center;
  }
  .hero-visual {
    margin-top: 20px;
  }
}

/* ---------- Sections ---------- */
section {
  padding: 88px 0;
  position: relative;
}

.section-head {
  max-width: 620px;
  margin: 0 0 52px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head .eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 12px;
  display: block;
}

.section-head h2 {
  font-family: "OptimaModoki", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  font-weight: 400;
  color: var(--cream-100);
}

.section-head p {
  font-size: 16.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: linear-gradient(160deg, rgba(250, 246, 234, 0.06), rgba(250, 246, 234, 0.02));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 198, 90, 0.35);
  background: linear-gradient(160deg, rgba(250, 246, 234, 0.09), rgba(250, 246, 234, 0.03));
}

.feature-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--felt-500), var(--navy-600));
  border: 1px solid var(--border-soft);
  color: var(--gold-300);
}

.feature-card .icon svg {
  width: 23px;
  height: 23px;
}

.feature-card h3 {
  font-size: 17px;
  margin: 0 0 9px;
  font-weight: 700;
  color: var(--cream-100);
}

.feature-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Neither grid fits its columns here. Reuses this file's OWN breakpoint rather than a new one:
     a second, conflicting rule for the same grid would be worse than the bug. */
  .pricing-grid,
  .pricing-grid.three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Screenshot showcase ---------- */
.shot-scroll {
  display: flex;
  /* Landscape frames are far shorter than the portraits; centring stops them sitting on the
     baseline with a gap above. */
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  padding: 10px 4px 26px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.shot-scroll::-webkit-scrollbar {
  height: 8px;
}

.shot-scroll::-webkit-scrollbar-thumb {
  background: var(--border-soft);
  border-radius: 10px;
}

/* 🔴 EVERY TILE THE SAME BOX (Phil: "All of the strip images should be the same size").
   This SUPERSEDES the earlier `.wide` rule, which gave landscape frames 520px and produced a row of
   two different sizes. Identical tiles and true-aspect landscape content cannot both be had; uniform
   tiles is the instruction, so landscape frames are letterboxed inside the same box.
   ◻️ `aspect-ratio`, not a hard height: 660x1434 at 240 wide is 521.45, so a hard `height: 521px`
   would shave half a pixel off every portrait. Deriving it keeps the portraits pixel-exact and the
   landscape frames centred by `object-fit: contain`. */
.shot-scroll img {
  scroll-snap-align: start;
  width: 240px;
  aspect-ratio: 660 / 1434;
  object-fit: contain;
  background: var(--navy-800);
  flex: 0 0 auto;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}


/* ---------- Trial / pricing ---------- */
.pricing-grid {
  display: grid;
  /* ⚠️ THIS CLASS IS USED TWICE and the two grids hold different numbers of cards: "Play with friends
     and family" has TWO, the pricing section has THREE. The default stays two-up for the first; the
     three-card grid opts in with `.three` below.
     ◻️ A blanket `repeat(3, 1fr)` fixed pricing and left the two-card grid with an empty third column —
     caught by measuring both, not just the one being fixed. An `auto-fit` version would also work, but
     an explicit modifier is legible and cannot surprise a third grid added later. */
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.price-card {
  /* A column with the CTA pushed to the bottom, so the three buttons land on one line however many
     bullets each card carries. That shared baseline is what the eye reads as "aligned". */
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, rgba(250, 246, 234, 0.06), rgba(250, 246, 234, 0.015));
}

/* The pricing section: three cards across, so none is stranded alone on a second row. */
.pricing-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.price-card .btn-ghost {
  margin-top: auto;
  align-self: flex-start;
}

/* ⭐ THE PLAQUE GREEN, AND IT ANSWERS PART 3b's OPEN QUESTION.
   In the app, green appears on exactly two things: the menu plaque and the highlighted Resume Game
   button. Its one job is "this is the important one". Once all three pricing CTAs became the same
   ghost button, the subscription card had nothing left marking it out; --felt-500 does that job here
   for the same reason it does in the app. Gold border kept so it still reads as the accented card. */
.price-card.highlight {
  background: linear-gradient(160deg, var(--felt-500), rgba(39, 54, 43, 0.55));
  border-color: rgba(243, 198, 90, 0.4);
  position: relative;
}

.price-card h3 {
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 800;
}

.price-card .price {
  font-size: 15px;
  color: var(--gold-300);
  font-weight: 700;
  margin-bottom: 18px;
}

.price-card ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.price-card li {
  font-size: 14.5px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  line-height: 1.5;
}

.price-card li .check {
  color: var(--gold-400);
  flex-shrink: 0;
}

.price-card li .check svg {
  width: 16px;
  height: 16px;
  display: block;
  margin-top: 3px;
}

@media (max-width: 760px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--border-soft);
  padding: 22px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--cream-100);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--gold-400);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  background: radial-gradient(120% 160% at 50% 0%, rgba(243, 198, 90, 0.18), transparent 60%), linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border: 1px solid var(--border-soft);
}

.cta-banner h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 0 0 14px;
  font-weight: 800;
}

.cta-banner p {
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: 15.5px;
}

.cta-banner .btn-row {
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 48px 0 32px;
  margin-top: 40px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.footer-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--cream-100);
}

.footer-bottom {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------- Simple/legal pages ---------- */
.legal-page {
  padding: 60px 0 100px;
}

.legal-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.legal-page .back-link:hover {
  color: var(--cream-100);
}

.legal-page h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  margin: 0 0 10px;
}

.legal-page .eff-date {
  color: var(--text-faint);
  font-size: 13.5px;
  margin-bottom: 40px;
}

.legal-page .lede {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.legal-card {
  background: rgba(250, 246, 234, 0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 34px 36px;
}

.legal-card h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 30px 0 12px;
  color: var(--gold-300);
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card p, .legal-card li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}

.legal-card ul {
  padding-left: 20px;
}

.legal-card a {
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 44px;
}

.contact-card {
  background: rgba(250, 246, 234, 0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 26px;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.contact-card:hover {
  background: rgba(250, 246, 234, 0.08);
  border-color: var(--gold-300);
}

.contact-card .icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--felt-500), var(--navy-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--gold-300);
}

.contact-card .icon svg {
  width: 19px;
  height: 19px;
}

.contact-card h3 {
  font-size: 15.5px;
  margin: 0 0 6px;
}

.contact-card a.contact-value {
  color: var(--gold-300);
  font-weight: 600;
  font-size: 15px;
}

@media (max-width: 620px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .legal-card {
    padding: 26px 22px;
  }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Android cross-link in the main nav — added 2026-08-26 with android.html.
   Sits inside .nav-links and inherits its colour and hover; the icon is the only
   addition, so the link still reads as one of the nav items rather than a second CTA. */
.nav-links a.nav-android {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-links a.nav-android svg {
  width: 17px;
  height: 17px;
  flex: none;
}