/* ============================================================================
   Zipkee marketing site — plain static CSS. No framework, no JS-driven layout.
   Palette + type mirror the brand (customer app logo: copper "Z" on charcoal).
   All animation is CSS (GPU transforms) so mobile Safari never JS-hydrates to
   paint — this is the fix for the RN-web load-time regression.
   ============================================================================ */

:root {
  --copper: #b8764a;
  --copper-glow: #c98a5e;
  --copper-tint: rgba(184, 118, 74, 0.08);
  --copper-border: rgba(184, 118, 74, 0.22);

  --charcoal: #1c1917;
  --charcoal-soft: #2a2622;

  --ivory: #faf9f6;
  --cream: #f5f3ee;
  --whisper: #eeede8;
  --white: #ffffff;

  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #a8a29e;

  --border: rgba(28, 25, 23, 0.08);
  --border-light: rgba(28, 25, 23, 0.05);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1200px;
}

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

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

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--copper); color: var(--ivory); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}

/* Entrance animation — pure CSS, runs on load, no JS gate. Content is in the
   HTML and visible even if this never runs. reduced-motion opts out. */
@keyframes zk-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-reveal] { animation: zk-fade-up 0.7s var(--ease) both; }
[data-reveal="1"] { animation-delay: 0.08s; }
[data-reveal="2"] { animation-delay: 0.16s; }
[data-reveal="3"] { animation-delay: 0.24s; }
[data-reveal="4"] { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- Nav ----- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  transition: background 0.3s, box-shadow 0.3s;
}
/* Near-opaque background instead of backdrop-filter blur — a blurred fixed nav
   re-samples the page behind it every scroll frame and is a major iOS jank source. */
.nav.scrolled {
  background: rgba(250, 249, 246, 0.96);
  box-shadow: 0 1px 0 var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--charcoal);
}
.brand img { width: 28px; height: 28px; }
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  background: var(--charcoal);
  color: var(--ivory);
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.btn:hover { background: var(--copper); transform: translateY(-1px); }
.btn-lg { padding: 15px 30px; font-size: 15px; }
/* Ghost variant — secondary nav CTA (riders/restaurants) beside the filled one. */
.btn-ghost { background: transparent; color: var(--charcoal); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* --------------------------------------------------------------- Hero ----- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 168px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
}
/* Soft glow via radial-gradient — NOT `filter: blur()`. A large-radius blur on
   a 600px element is GPU-brutal on iOS Safari (and paints above the fold). A
   radial-gradient with a transparent falloff looks the same and paints cheap. */
.hero-orb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hero-orb.a { width: 760px; height: 760px; top: -280px; right: -220px; background: radial-gradient(circle, rgba(184, 118, 74, 0.14), transparent 68%); }
.hero-orb.b { width: 600px; height: 600px; bottom: -240px; left: -200px; background: radial-gradient(circle, rgba(28, 25, 23, 0.05), transparent 68%); }
.hero-content { position: relative; z-index: 2; max-width: 560px; }

/* Copper "pill" badge — shared by the hero badge and the showcase status. */
.badge, .showcase .status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--copper-tint);
  color: var(--copper);
  border: 1px solid var(--copper-border);
  padding: 8px 15px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.badge { letter-spacing: 1.5px; margin-bottom: 26px; }
.badge .dot, .showcase .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); animation: zk-blink 2s ease-in-out infinite; }
@keyframes zk-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -2px;
  color: var(--charcoal);
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--copper); white-space: nowrap; }
.hero p.sub {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 34px;
}
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-note { font-size: 13px; color: var(--text-muted); margin-top: 16px; }

/* Phone mockup ------------------------------------------------------------- */
.hero-visual { position: relative; z-index: 2; display: flex; justify-content: center; }
.phone {
  width: 286px;
  background: var(--charcoal);
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 40px 90px rgba(28, 25, 23, 0.20), 0 12px 30px rgba(28, 25, 23, 0.12);
}
.phone-screen { background: var(--ivory); border-radius: 33px; overflow: hidden; display: flex; flex-direction: column; min-height: 600px; }
.pscreen-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 18px 16px; }
.pscreen-head .greet { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.pscreen-head .greet strong { display: block; font-size: 13px; color: var(--charcoal); font-weight: 700; margin-top: 3px; }
.pscreen-head .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--copper-tint); display: grid; place-items: center; color: var(--copper); font-weight: 700; font-size: 13px; }
.pscreen-search { margin: 0 14px 18px; background: var(--cream); border-radius: 10px; padding: 13px 14px; font-size: 10.5px; color: var(--text-muted); }
.pscreen-cats { display: flex; gap: 12px; padding: 0 14px 18px; }
.pcat { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.pcat .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.pcat span { font-size: 8.5px; font-weight: 600; color: var(--text-secondary); }
.pscreen-banner { margin: 0 14px 18px; border-radius: 12px; padding: 18px; background: linear-gradient(135deg, var(--copper), var(--copper-glow)); color: #fff; }
.pscreen-banner h4 { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.pscreen-banner p { font-size: 9px; opacity: 0.9; }
.pscreen-list { padding: 0 14px 22px; flex: 1; }
.pscreen-list h5 { font-size: 10px; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; }
.prow { display: flex; gap: 11px; align-items: center; background: var(--white); border: 1px solid var(--border-light); border-radius: 11px; padding: 10px; margin-bottom: 10px; }
.prow img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; flex: none; }
.prow .meta h6 { font-size: 11px; font-weight: 700; color: var(--charcoal); }
.prow .meta p { font-size: 8.5px; color: var(--text-muted); margin-top: 3px; }
.prow .meta .r { font-size: 8.5px; font-weight: 700; color: var(--copper); margin-top: 4px; }

/* Floating cards around the phone */
.float {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 14px 34px rgba(28, 25, 23, 0.10);
  animation: zk-float 3.4s ease-in-out infinite;
}
.float .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 7px; font-size: 15px; }
.float .t { font-size: 11px; font-weight: 700; color: var(--charcoal); }
.float .s { font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }
.float.f1 { top: 48px; left: -28px; }
.float.f2 { top: 150px; right: -36px; animation-delay: 2.2s; }
.float.f3 { bottom: 74px; right: -30px; animation-delay: 1.1s; }
@keyframes zk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* -------------------------------------------------------- Launch band ----- */
.liveband { background: var(--cream); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 64px 0; text-align: center; }
.liveband .label { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.live-zone { font-family: var(--serif); font-size: clamp(2.8rem, 7vw, 4.6rem); font-weight: 900; color: var(--charcoal); line-height: 1; letter-spacing: -2px; }
.live-zone .accent { color: var(--copper); }
/* Deliberately quieter than the hero badge: the zone name is what the band is
   for, and a second copper pill directly under it competes with the accent in
   the name itself. Outline on white reads as a qualifier, which is what it is. */
.live-tag { display: inline-flex; align-items: center; margin-top: 18px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }
.live-sub { font-size: 15.5px; font-weight: 300; line-height: 1.6; color: var(--text-secondary); max-width: 460px; margin: 18px auto 0; }

/* ------------------------------------------------------ Section basics ---- */
section { position: relative; }
.section-pad { padding: 96px 0; }
.section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 900; letter-spacing: -1px; color: var(--charcoal); margin: 14px 0 14px; }
.section-head p { font-size: 16.5px; font-weight: 300; line-height: 1.65; color: var(--text-secondary); }

/* --------------------------------------------------- Restaurant marquee --- */
/* NOTE: do not add `content-visibility: auto` here — it freezes the marquee
   animation on iOS Safari once the section scrolls off-screen and back. */
.showcase { padding: 84px 0 92px; background: var(--ivory); overflow: hidden; }
/* .status pill styles are shared with .badge above. */
.showcase-head { text-align: center; margin-bottom: 44px; }
.showcase-head h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 900; letter-spacing: -1px; color: var(--charcoal); margin-top: 18px; }
.showcase-head p { font-size: 15.5px; font-weight: 300; color: var(--text-secondary); margin-top: 10px; }
.showcase-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; margin-top: 30px; }
.showcase-stats .stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.showcase-stats .num { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 900; letter-spacing: -1px; color: var(--copper); line-height: 1; }
.showcase-stats .stat-loc .num { font-size: clamp(1.1rem, 3vw, 1.4rem); letter-spacing: -0.4px; white-space: nowrap; }
.showcase-stats .lbl { font-size: 12.5px; font-weight: 500; letter-spacing: .2px; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 520px) { .showcase-stats { gap: 28px; } }

/* CSS-only infinite marquee. Two identical tracks side by side translate -50%. */
.marquee { position: relative; display: flex; flex-direction: column; gap: 18px; }
/* Edge fade via static overlay gradients instead of mask-image over the moving
   track — a mask forces an extra compositing layer + repaints on iOS Safari. */
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ivory), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ivory), transparent); }
.mrow { display: flex; width: max-content; gap: 18px; }
.mrow.r1 { animation: zk-scroll 46s linear infinite; }
.mrow.r2 { animation: zk-scroll-rev 52s linear infinite; }
/* Pause-on-hover only where there's a real pointer. On touch there is no true
   hover, so a tap would trigger a sticky :hover that freezes the marquee (iOS)
   — touching the carousel must do nothing. */
@media (hover: hover) { .marquee:hover .mrow { animation-play-state: paused; } }
@keyframes zk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zk-scroll-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.rcard { width: 260px; flex: none; background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(28, 25, 23, 0.04); }
.rcard img { width: 100%; height: 148px; object-fit: cover; background: var(--whisper); }
.rcard .body { padding: 14px 16px 16px; }
.rcard .body h6 { font-size: 14.5px; font-weight: 700; color: var(--charcoal); letter-spacing: -0.2px; }
.rcard .body .tag { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--copper); }

/* ----------------------------------------------------- Positive-sum ------- */
.possum { background: var(--charcoal); color: var(--ivory); }
.possum .section-head h2 { color: var(--ivory); }
.possum .section-head p { color: rgba(250, 249, 246, 0.7); }
.possum .eyebrow { color: var(--copper-glow); }
.pill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pill { background: var(--charcoal-soft); border: 1px solid rgba(250, 249, 246, 0.08); border-radius: 18px; padding: 28px 24px; }
.pill .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; background: rgba(184, 118, 74, 0.16); }
.pill h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.pill p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: rgba(250, 249, 246, 0.66); }

/* --------------------------------------------------------- Why / features - */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
.feature { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 34px 30px; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 25, 23, 0.06); }
.feature .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; }
.feature .ic svg { width: 26px; height: 26px; }
.feature h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 10px; color: var(--charcoal); }
.feature p { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--text-secondary); }
.tint-copper { background: var(--copper-tint); color: var(--copper); }
.tint-green { background: rgba(74, 145, 96, 0.10); color: #3f7a52; }
.tint-blue { background: rgba(74, 110, 145, 0.10); color: #3f6688; }
.tint-plum { background: rgba(128, 74, 145, 0.10); color: #6f4d82; }
.tint-amber { background: rgba(184, 140, 74, 0.12); color: #97701f; }
.tint-rose { background: rgba(160, 74, 90, 0.10); color: #8a4a5a; }

/* -------------------------------------------------------- How it works ---- */
.how { background: var(--cream); }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1000px; margin: 0 auto; }
.step { text-align: center; }
.step .n { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; font-family: var(--serif); font-weight: 900; font-size: 18px; color: var(--copper); background: var(--white); border: 1px solid var(--copper-border); }
.step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--charcoal); }
.step p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--text-secondary); }

/* -------------------------------------------------------------- Join ------ */
.join { padding: 96px 0; }
.app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
/* Cards are relative so the pending note can be taken out of flow — see below. */
.app-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px 52px; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.app-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 25, 23, 0.06); }
.app-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; }
.app-for { font-family: var(--mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.app-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 8px 0 10px; color: var(--charcoal); }
.app-card p { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--text-secondary); }
/* Badges sit on the card's floor so all three rows share one line however long
   each blurb runs. The pending note is absolutely placed into the reserved
   bottom padding rather than flowing after them — in flow it lifts the one
   card that has a note, and the badge rows stop lining up. */
.app-card .store-badges { margin-top: auto; padding-top: 24px; }
.app-card .store-pending { position: absolute; left: 28px; right: 28px; bottom: 20px; margin-top: 0; font-size: 12px; }
/* Scaled down to fit three rows across, keeping Apple and Google optically
   equal by the same ratio as the full-size pair: 35 for Apple, 35 / 0.672 = 52
   for Google. */
.app-card .store-badge { height: 52px; }
.app-card .badge-apple { height: 35px; }
.app-card .badge-play { height: 52px; }
/* Card-specific breakpoints, not the house ones: a card is only useful while
   its two badges still sit on one row, and that is what sets the width. Drop a
   column as soon as they would wrap rather than at a round viewport number. */
@media (max-width: 1085px) {
  .app-cards { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 760px) {
  .app-cards { grid-template-columns: 1fr; max-width: 400px; }
}
/* ------------------------------------------------------------- Footer ----- */
.footer { border-top: 1px solid var(--border-light); background: var(--ivory); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 40px 48px; max-width: var(--maxw); margin: 0 auto; }
.footer .fl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.footer .flogo { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 16px; font-weight: 900; color: var(--charcoal); }
.footer .flogo img { width: 20px; height: 20px; }
.footer .fdiv { width: 1px; height: 16px; background: var(--border); }
.footer .fcopy { font-size: 12.5px; color: var(--text-muted); min-width: 0; }
.footer .fright { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer .fsocial { display: flex; gap: 14px; }
.footer .fsocial a { color: var(--text-muted); transition: color 0.2s; }
.footer .fsocial a:hover { color: var(--copper); }
.footer .fsocial svg { width: 19px; height: 19px; display: block; }
.footer .flinks { display: flex; gap: 22px; }
.footer .flinks a { font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: color 0.2s; }
.footer .flinks a:hover { color: var(--copper); }

/* ------------------------------------------------------- Legal pages ------ */
.legal { padding: 150px 0 96px; }
.legal .lead { max-width: 760px; margin: 0 auto; }
.legal h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -1.5px; color: var(--charcoal); }
.legal h1 .accent { color: var(--copper); }
.legal .updated { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); margin-top: 12px; }
.legal .intro { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--text-secondary); margin: 34px 0 8px; }
.legal .sec { padding: 30px 0; border-top: 1px solid var(--border-light); }
.legal .sec .num { font-family: var(--mono); font-size: 12px; color: var(--copper); letter-spacing: 1px; }
.legal .sec h2 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--charcoal); margin: 8px 0 14px; }
.legal .sec p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--text-secondary); white-space: pre-line; }

/* ------------------------------------------------------- Responsive ------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 44px; }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero p.sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .float { display: none; }
  .pill-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  .nav { padding: 14px 20px; }
  /* Two pill CTAs + brand get tight on phones — shrink both to fit one row. */
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 9px 15px; font-size: 13px; }
  .hero { padding: 128px 0 72px; }
  .section-pad { padding: 68px 0; }
  .pill-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; gap: 30px; }
  .footer-inner { flex-direction: column; text-align: center; padding: 34px 22px; }
  .footer .fl { justify-content: center; }
}

/* ---------------------------------------------------- downloads page ---- */
/* Where a Freedom Card scan lands when no store applies. */
.downloads .intro { max-width: 34rem; }

/* Every badge sits in a box of the same height and is centred in it, so the
   two buttons share one centre line. Google's asset bakes in roughly a tenth
   of its height as clear space while Apple's is cropped tight, so the images
   are deliberately different heights to end up optically equal. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 2rem;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  height: 66px;
  border-radius: 10px;
  transition: transform 0.15s ease;
}
.store-badge img { display: block; width: auto; }
/* Sized so the two buttons READ the same height, which the raw image heights
   do not give you. Apple's SVG is cropped to its artwork; Google's PNG spends
   32.8% of its canvas on clear space (measured: 168 of 250px is button). Both
   buttons come out at 44px: 44 for Apple, 44 / 0.672 = 65 for Google. */
.badge-apple { height: 44px; }
.badge-play { height: 65px; }

a.store-badge:hover { transform: translateY(-2px); }
a.store-badge:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

/* Pending, not broken: the badge stays legible and the note below says why. */
.store-badge.is-pending img { opacity: 0.45; filter: grayscale(1); }
.store-pending {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}