/* ============================================================================
   PawCheck — marketing site design system
   Palette derived from the app icon: magnifier blue, treat orange, paw green
   on a cool light background. Rounded heavy type, soft cards, emoji tiles.
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  /* ⚠️ THESE ARE THE APP'S EXACT HEXES, from PawScan/Theme/Theme.swift. They had
     drifted a shade or two apart — close enough to look intentional side by side and
     wrong enough that the site never quite felt like the product. Keep them in sync:
     if Theme.swift changes, change these, not the other way round. */
  --bg: #F1F7FD;
  --card: #FFFFFF;
  --card-sunken: #E7F1FA;
  --line: #D9E6F2;
  --ink: #15324B;
  --ink-soft: #59707F;
  --ink-faint: #5E7385;
  --blue: #2C7BC4;
  --blue-deep: #1C5892;
  --blue-tint: #DBEAF8;
  --green: #4FA83A;
  --green-deep: #3D8C2C;
  --green-tint: #E3F3EA;
  --coral: #ED9436;
  --coral-tint: #FCEBD5;
  --sunshine: #F6B942;
  --sunshine-tint: #FCF1D8;
  --score-green: #4FA83A;
  --score-amber: #EBA23A;
  --score-red: #E0574A;
  /* Soft boutique pastels — the app's Home tiles (Theme.mint/lilac/blush/roseTint).
     Used FLAT, as the app uses them, not washed through the tile gradient. */
  --mint-tint: #E2F3E6;
  --lilac-tint: #EFE6FA;
  --blush-tint: #FDE7F0;
  --rose-tint: #FCE9E4;
  --shadow: 0 10px 30px rgba(20, 40, 66, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 40, 66, 0.14);
  --header-bg: rgba(240, 246, 252, 0.82);
  --radius: 24px;
  --radius-sm: 16px;
  /* Canonical brand gradient — fixed across themes: magnifier blue -> paw green */
  --brand-gradient: linear-gradient(135deg, #2C7BC4, #1C5892);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0E1822;
  --card: #17242F;
  --card-sunken: #1F2E3B;
  --line: #2B3C4A;
  --ink: #EAF2F9;
  --ink-soft: #9DB1C0;
  --ink-faint: #8296A5;
  --blue: #4C9EE2;
  --blue-deep: #3B84C6;
  --blue-tint: #15293A;
  --green: #5FC05A;
  --green-deep: #4CA347;
  --green-tint: #1E332A;
  --coral: #F5A65A;
  --coral-tint: #332619;
  --sunshine: #F6C766;
  --sunshine-tint: #322B18;
  --score-green: #5FC05A;
  --score-amber: #F0B45C;
  --score-red: #EE6E5E;
  /* The app's pastels are dark-mode adaptive — these are its dark values, not
     darkened light ones. A pastel that only exists in light mode reads as a bug. */
  --mint-tint: #1B2E22;
  --lilac-tint: #272033;
  --blush-tint: #322028;
  --rose-tint: #33221F;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --header-bg: rgba(14, 22, 32, 0.82);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--blue); color: #fff; }

/* ---- Keyboard focus (WCAG 2.4.7). No border-radius on the universal rule —
   browsers round the outline to each element's own radius; a fixed radius
   would deform round controls like the theme toggle. ------------------------ */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* .faq-q lives inside .faq-item{overflow:hidden}, which clips an outward ring —
   draw it INSIDE the button box so it stays visible. */
.faq-q:focus-visible { outline-offset: -3px; }
/* Green-on-green is low contrast: white ring on green surfaces. */
.scan-btn:focus-visible,
.band :focus-visible,
.cta-band .store-badge:focus-visible { outline-color: #fff; }

/* ---- Skip link -------------------------------------------------------------- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  padding: 10px 16px; border-radius: 12px;
  background: var(--blue); color: #fff; font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* ---- Screen-reader-only ----------------------------------------------------- */
.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;
}

/* ---- Typography ------------------------------------------------------------ */
h1, h2, h3, h4 { font-weight: 900; line-height: 1.12; letter-spacing: -0.015em; }

.display {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
}
.display .accent { color: var(--score-green); }
.display .accent-coral { color: var(--coral); }

.section-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 12px; }
.section-sub { color: var(--ink-soft); font-size: 1.12rem; max-width: 560px; }
.center { text-align: center; }
.center .section-sub { margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue);
  background: var(--green-tint);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
/* Lift eyebrow text contrast on the dark green tint (AA for small bold text). */
[data-theme="dark"] .eyebrow { color: #6DC98A; }

/* ---- Header ----------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.35s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex; align-items: center; gap: 20px;
  height: 68px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.22rem; }
/* Gradient wordmark to echo the app's brandGradient. The <img> is a replaced
   child and renders normally; only the text glyphs pick up the gradient. */
.brand { background: linear-gradient(135deg, var(--blue), var(--green)); -webkit-background-clip: text; background-clip: text; }
.brand { color: transparent; }
.brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); background: #fff; }
.site-footer .brand img { width: 30px; height: 30px; }

.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.main-nav a {
  padding: 8px 14px; border-radius: 12px;
  font-weight: 700; font-size: 0.95rem; color: var(--ink-soft);
  transition: color 0.2s, background 0.2s;
}
.main-nav a:hover { color: var(--ink); background: var(--card-sunken); }
.main-nav a.active { color: var(--blue); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card-sunken);
  font-size: 1rem;
  transition: transform 0.25s ease;
}
.theme-toggle:hover { transform: rotate(18deg) scale(1.06); }

.nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: 50%;
  place-items: center; background: var(--card-sunken);
  border: 1px solid var(--line); color: var(--ink);
  font-size: 1.1rem;
}

/* ---- Store badges ------------------------------------------------------------ */
.store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--bg);
  padding: 9px 16px 9px 13px; border-radius: 13px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.store-badge:active { transform: translateY(0) scale(0.97); }
.store-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.store-badge .lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .small { font-size: 0.6rem; font-weight: 600; opacity: 0.75; }
.store-badge .big { font-size: 0.92rem; font-weight: 800; }

.store-badge.compact { padding: 8px 12px; border-radius: 11px; }
.store-badge.compact .lines { display: none; }

.badge-row { display: flex; gap: 12px; flex-wrap: wrap; }
.badge-note { font-size: 0.82rem; color: var(--ink-faint); font-weight: 600; margin-top: 10px; }

/* ---- Hero --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 150px 0 90px;
  overflow: hidden;
}

.hero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
  opacity: 0.55; will-change: transform;
}
/*  ⚠️ THE HERO WASH IS SWITCHED OFF — OWNER'S CALL, 2026-09-11.
    Three blurred blooms (mint top-right, blush bottom-left, lilac mid-left) used to sit
    behind the fold to set the page's temperature. Read as "an odd pink haze bottom left
    and an odd green haze top right" against the blue ground, so the elements were removed
    from every page's markup. The rules below are KEPT but now match nothing.
    ⚠️ THAT IS DELIBERATE, NOT LEFTOVER. Restoring the effect is one line of HTML per page
    (`<div class="hero-glow glow-green"></div>`) rather than reconstructing the geometry,
    the blur radius and the three tint choices from scratch. If you are sure the wash is
    never coming back, delete this block and the four rules under it together — but do not
    delete the rules and leave the markup, which renders three unstyled squares. */
.glow-green { width: 560px; height: 560px; background: var(--mint-tint); top: -160px; right: -120px; }
.glow-sun { width: 460px; height: 460px; background: var(--blush-tint); bottom: -140px; left: -120px; }
.glow-lilac { width: 380px; height: 380px; background: var(--lilac-tint); top: 40px; left: 18%; opacity: 0.42; }
[data-theme="dark"] .hero-glow { opacity: 0.4; }

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

.hero-copy p.lede { color: var(--ink-soft); font-size: 1.22rem; margin: 20px 0 28px; max-width: 480px; }

.trust-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.86rem; font-weight: 700; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 999px;
}

/* ---- Phone mockup --------------------------------------------------------------- */
.phone-stage { position: relative; display: flex; justify-content: center; width: min(320px, 78vw); margin: 0 auto; }

.phone {
  width: min(320px, 78vw);
  border-radius: 48px;
  padding: 11px;
  background: linear-gradient(160deg, #1B2838, #0E1620);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,0.06);
  position: relative;
}
.phone::after {
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 999px; background: #080d14;
}
.phone .screen {
  border-radius: 38px; overflow: hidden; position: relative; aspect-ratio: 1206/2622;
  background: #0b1119;
}
.phone .screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s ease;
}
.phone .screen img.active { opacity: 1; }

.float-card {
  position: absolute;
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  animation: floaty 5.5s ease-in-out infinite;
  border: 1px solid var(--line);
}
.float-card .emoji-tile { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
.float-card b { font-size: 0.9rem; display: block; }
.float-card span { font-size: 0.76rem; color: var(--ink-soft); font-weight: 600; }
.fc-1 { top: 12%; left: -8%; animation-delay: 0s; }
.fc-2 { bottom: 16%; right: -10%; animation-delay: 1.6s; }
.fc-3 { bottom: -4%; left: 2%; animation-delay: 3s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---- Emoji tiles (match the app's EmojiTile) --------------------------------------- */
/* Matches the app's EmojiTile: saturated brand color washed at low opacity
   (tint@22% -> tint@8% gradient, 16% border), so tiles glow in both themes. */
.emoji-tile {
  display: grid; place-items: center;
  width: 52px; height: 52px; font-size: 25px;
  border-radius: 17px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tile-border, var(--green)) 22%, transparent),
    color-mix(in srgb, var(--tile-border, var(--green)) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--tile-border, var(--green)) 16%, transparent);
  flex-shrink: 0;
}
.tile-green { --tile-border: var(--green); }

/* Flat pastel tiles. The app paints these as a solid tint behind the emoji
   (`.background(Theme.mintTint)`) rather than washing a saturated hue, so these
   override the gradient instead of feeding it — matching the product, not
   approximating it. */
.tile-mint, .tile-lilac, .tile-blush, .tile-rose {
  background: var(--pastel);
  border-color: color-mix(in srgb, var(--ink) 7%, transparent);
}
.tile-mint  { --pastel: var(--mint-tint); }
.tile-lilac { --pastel: var(--lilac-tint); }
.tile-blush { --pastel: var(--blush-tint); }
.tile-rose  { --pastel: var(--rose-tint); }
.tile-coral { --tile-border: var(--coral); }
.tile-sun { --tile-border: var(--sunshine); }

/* ---- Sections & cards ----------------------------------------------------------------- */
.section { padding: 88px 0; position: relative; }
.section.tight { padding: 60px 0; }
.section-head { margin-bottom: 44px; }

/* Borderless like the app's pawCard (shadow-only); a border only in dark mode
   where the near-black shadow gives too little separation. */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[data-theme="dark"] .card { border: 1px solid var(--line); }
.card.hoverable:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

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

.card h3, .card h2 { font-size: 1.22rem; margin: 16px 0 8px; font-weight: 900; line-height: 1.2; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }

.step-num {
  font-size: 0.78rem; font-weight: 900; color: var(--green);
  letter-spacing: 0.08em;
}

/* ---- Split feature rows ---------------------------------------------------------------- */
.feature-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 44px 0;
}
.feature-split.flip .feature-media { order: 2; }
.feature-media { display: flex; justify-content: center; }
.feature-media .phone { width: min(280px, 70vw); }

.check-list { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-weight: 600; }
.check-list li::before {
  content: "✓"; display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--green-tint); color: var(--green);
  font-size: 0.75rem; font-weight: 900;
}

/* ---- Dark band (recall section) ---------------------------------------------------------- */
.band {
  background: var(--brand-gradient);
  color: #fff; border-radius: 32px;
  padding: 60px 48px;
  position: relative; overflow: hidden;
}
.band .section-sub { color: rgba(255,255,255,0.75); }
.band::before {
  content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,0.07); filter: blur(60px); top: -140px; right: -80px;
}

.recall-card {
  background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 20px; padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 430px;
}
.recall-dot {
  width: 42px; height: 42px; border-radius: 50%; background: var(--score-red);
  display: grid; place-items: center; font-size: 19px; flex-shrink: 0;
  animation: pulse-red 2.4s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(222, 83, 64, 0.5); }
  55% { box-shadow: 0 0 0 14px rgba(222, 83, 64, 0); }
}

/* ---- Interactive scan demo ------------------------------------------------------------------ */
.demo-shell {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 32px; box-shadow: var(--shadow-lg);
  padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}

.demo-products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.demo-product {
  border: 1.5px solid var(--line); border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  text-align: left;
}
.demo-product:hover { transform: translateY(-2px); }
.demo-product.selected { border-color: var(--green); background: var(--green-tint); }
.demo-product .emoji-tile { width: 42px; height: 42px; font-size: 21px; border-radius: 13px; }
.demo-product b { font-size: 0.92rem; line-height: 1.25; }
.demo-product span { font-size: 0.74rem; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.demo-dog { margin-top: 22px; }
.demo-dog-label { font-size: 0.85rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 10px; }
.allergy-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.allergy-chip {
  padding: 8px 14px; border-radius: 14px; font-weight: 700; font-size: 0.88rem;
  border: 1.5px solid var(--line); color: var(--ink-soft);
  transition: all 0.2s;
}
.allergy-chip.selected { border-color: var(--score-amber); background: var(--sunshine-tint); color: var(--ink); }

.scan-btn {
  margin-top: 24px; width: 100%;
  background: var(--green);
  color: #fff; font-weight: 900; font-size: 1.05rem;
  padding: 16px; border-radius: 18px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--green) 40%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.scan-btn:hover { transform: translateY(-2px); }
.scan-btn:active { transform: scale(0.98); box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 34%, transparent); }
.scan-btn[disabled] { opacity: 0.6; cursor: wait; }

/* Demo result panel */
.demo-result { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; }

.score-ring { position: relative; width: 190px; height: 190px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .track { stroke: var(--card-sunken); }
.score-ring .fill { stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s; }
.score-num {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.score-num b { font-size: 3.4rem; font-weight: 900; line-height: 1; }
.score-num span { font-size: 0.86rem; color: var(--ink-faint); font-weight: 700; }

.score-verdict {
  margin-top: 14px; font-weight: 900; font-size: 1.06rem;
  padding: 7px 18px; border-radius: 999px;
}

.factor-list { width: 100%; margin-top: 22px; display: grid; gap: 8px; }
.factor {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--card-sunken); border-radius: 13px; padding: 10px 14px;
  font-size: 0.9rem; font-weight: 700;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.factor.shown { opacity: 1; transform: none; }
.factor .delta { font-weight: 900; flex-shrink: 0; }
.delta.plus { color: var(--score-green); }
.delta.minus { color: var(--score-red); }
.delta.zero { color: var(--ink-faint); }

.demo-scanning { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--ink-soft); font-weight: 700; }
.scan-frame {
  width: 120px; height: 120px; position: relative;
  border-radius: 26px; background: var(--card-sunken);
  display: grid; place-items: center; font-size: 46px; overflow: hidden;
}
.scan-frame::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sunshine), transparent);
  animation: scanline 1.1s ease-in-out infinite alternate;
}
@keyframes scanline { from { top: 14px; } to { top: 103px; } }

.demo-placeholder { color: var(--ink-faint); font-weight: 700; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.demo-placeholder .emoji-tile { width: 72px; height: 72px; font-size: 34px; border-radius: 22px; }

.demo-note { font-size: 0.78rem; color: var(--ink-faint); margin-top: 18px; text-align: center; }

/* ---- Principle cards (accuracy contract) ------------------------------------------------------- */
.principle { border-top: 4px solid var(--green); }
.principle.coral { border-top-color: var(--coral); }
.principle.sun { border-top-color: var(--sunshine); }

/* ---- FAQ ------------------------------------------------------------------------------------------ */
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  margin-bottom: 12px; overflow: hidden;
}
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 19px 22px; font-weight: 800; font-size: 1.02rem; text-align: left;
}
.faq-q .chev { transition: transform 0.3s ease; color: var(--green); flex-shrink: 0; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
  color: var(--ink-soft);
}
.faq-a > div { padding: 0 22px 20px; }

/* ---- CTA band ---------------------------------------------------------------------------------------- */
.cta-band {
  text-align: center;
  background: var(--brand-gradient);
  border-radius: 32px; color: #fff;
  padding: 70px 30px; position: relative; overflow: hidden;
}
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.78); margin-bottom: 28px; font-size: 1.1rem; }
.cta-band .badge-row { justify-content: center; }
.cta-band .store-badge { background: #fff; color: var(--blue-deep); }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px);
  background: rgba(255,255,255,0.1);
}
.cta-band::before { width: 340px; height: 340px; top: -120px; left: -80px; }
.cta-band::after { width: 300px; height: 300px; bottom: -120px; right: -60px; }
.cta-paws { position: absolute; font-size: 1.4rem; opacity: 0.18; pointer-events: none; }

/* ---- Footer --------------------------------------------------------------------------------------------- */
.site-footer { padding: 60px 0 40px; border-top: 1px solid var(--line); margin-top: 40px; }
.footer-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }
.footer-nav a:hover { color: var(--ink); }
.disclaimer {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 0.82rem; max-width: 720px;
}
.copyright { color: var(--ink-faint); font-size: 0.82rem; margin-top: 10px; }

/* ---- Prose pages (privacy/terms) --------------------------------------------------------------------------- */
.prose { max-width: 760px; margin: 0 auto; padding-top: 140px; }
.prose h1 { font-size: 2.4rem; margin-bottom: 8px; }
.prose .updated { color: var(--ink-faint); font-weight: 700; font-size: 0.9rem; margin-bottom: 36px; }
.prose h2 { font-size: 1.35rem; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--ink-soft); margin-bottom: 12px; }
.prose ul { padding-left: 22px; }
.prose h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.prose a { color: var(--green); font-weight: 800; }
.prose a:hover { text-decoration: underline; }

/* ---- Reveal on scroll ------------------------------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

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

/* ---- Responsive ---------------------------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .hero-copy p.lede { margin-inline: auto; }
  .badge-row { justify-content: center; }
  .trust-chips { justify-content: center; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .demo-shell { grid-template-columns: 1fr; padding: 26px; }
  .feature-split { grid-template-columns: 1fr; gap: 36px; }
  .feature-split.flip .feature-media { order: 0; }
  .fc-1 { left: 0; }
  .fc-2 { right: 0; }
  .band { padding: 44px 26px; }

  /* Mobile nav: hamburger reveals a slide-down panel */
  .nav-toggle { display: grid; }
  .main-nav {
    display: flex; position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 8px 24px 16px;
    transform: translateY(-120%); transition: transform 0.3s ease;
  }
  .header-inner.nav-open .main-nav { transform: translateY(0); }
  .main-nav a { padding: 12px 8px; border-radius: 10px; font-size: 1.05rem; }
}

@media (max-width: 560px) {
  .header-actions .store-badge .lines { display: none; }
  .header-actions .store-badge { padding: 8px 12px; border-radius: 11px; }
  .hero { padding-top: 120px; }
}


/* ---- Support ------------------------------------------------------------------ */
/*  Apple requires a reachable support URL, and a mailto buried in the footer is not
    one. This is that page section: an address people can see without hunting, the
    business identity behind it, and the two self-serve routes that answer most mail
    before it is sent. */
.support-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.support-grid .card p { color: var(--ink-soft); margin: 0 0 6px; }
.support-link {
  color: var(--blue); font-weight: 800; text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
}
.support-link:hover { border-bottom-color: var(--blue); }
.support-note { font-size: 0.92rem; color: var(--ink-faint) !important; }
.support-address {
  margin-top: 28px; text-align: center;
  font-size: 0.92rem; color: var(--ink-faint);
}