/* ==========================================================================
   Rovin — Design System
   ========================================================================== */

:root {
  /* Core palette */
  --navy-950: #0a0d18;
  --navy-900: #10142a;
  --navy-800: #1a2138;
  --navy-700: #262f4d;
  --navy-600: #384368;

  --cream-50: #fbf8f3;
  --cream-100: #f5efe2;
  --cream-200: #ede3cf;

  --ink-900: #12141c;
  --ink-700: #2c2f3a;
  --muted-500: #6b7280;
  --muted-400: #8b93a1;
  --line-200: #e7e0d2;
  --line-700: #313a5c;

  --gold-500: #f0b429;
  --gold-400: #ffce54;
  --gold-300: #ffe5a0;
  --silver-400: #c3cad6;
  --silver-500: #9aa4b5;
  --bronze-500: #c97c3d;
  --bronze-400: #e0a066;
  --coral-500: #ff6b4a;
  --coral-600: #ec5330;

  --success-500: #2fae66;

  /* Gradients */
  --gradient-dawn: linear-gradient(135deg, #0a0d18 0%, #201a3a 32%, #5c2e3e 62%, #b5622f 82%, #f0b429 100%);
  --gradient-gold: linear-gradient(135deg, #ffce54 0%, #f0b429 100%);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);

  /* Type */
  --font-head: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Elevation — layered (ambient + direct) shadows read as softer and more
     "physical" than a single flat shadow, the same trick Apple/Stripe-style
     UIs use. Kept as additive tokens alongside the originals below (not
     replacing --shadow-sm/md/lg, which stay as-is so nothing that already
     references them changes shape) — new premium-feel work should prefer
     --elevate-1/2/3/4. */
  --shadow-sm: 0 2px 8px rgba(18, 20, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 20, 28, 0.08);
  --shadow-lg: 0 20px 48px rgba(18, 20, 28, 0.14);
  --shadow-gold: 0 12px 32px rgba(240, 180, 41, 0.28);

  --elevate-1: 0 1px 2px rgba(18,20,28,0.04), 0 1px 1px rgba(18,20,28,0.03);
  --elevate-2: 0 1px 2px rgba(18,20,28,0.04), 0 6px 16px -4px rgba(18,20,28,0.10);
  --elevate-3: 0 2px 4px rgba(18,20,28,0.05), 0 16px 32px -8px rgba(18,20,28,0.14);
  --elevate-4: 0 4px 8px rgba(18,20,28,0.06), 0 28px 56px -12px rgba(18,20,28,0.22);
  --elevate-gold: 0 1px 2px rgba(154,107,12,0.16), 0 14px 32px -6px rgba(240,180,41,0.38);
  --ring-gold: 0 0 0 4px rgba(240, 180, 41, 0.16);
  --ring-focus: 0 0 0 3px rgba(18,20,28,0.5), 0 0 0 5px rgba(240,180,41,0.7);

  --container: 1180px;

  /* Motion system — one durable curve wasn't giving enough range: entrances
     (things appearing) read best with a slight overshoot/settle, exits/quick
     taps read best with a sharp, fast curve, and large layout shifts want a
     plain, symmetric ease. --ease is kept (many rules below still use it) so
     nothing regresses; new work uses the more specific tokens. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

  --dur-instant: 0.12s;
  --dur-fast: 0.2s;
  --dur-base: 0.32s;
  --dur-slow: 0.5s;
  --dur-slower: 0.8s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
p { margin: 0; line-height: 1.65; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

section { position: relative; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 1000;
  background: var(--ink-900); color: var(--cream-50); padding: 12px 18px;
  border-radius: 10px; font-weight: 700; font-size: 0.9rem; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: 4px;
  transition: outline-offset 0.15s var(--ease-snappy);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Reveal-on-scroll — refined with a touch of scale so elements feel like
   they're settling into place rather than just sliding/fading, plus a
   built-in stagger for anything marked .reveal inside the same parent (no
   JS change needed — wireReveal() in marketing.js already adds .is-visible
   per-element via IntersectionObserver; this just makes each one's own
   transition-delay increase slightly by DOM position). */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal:nth-child(6) { transition-delay: 0.3s; }

/* Shared keyframes, reused by several components below */
@keyframes eb-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(47,174,102,0.35); }
  100% { box-shadow: 0 0 0 8px rgba(47,174,102,0); }
}
@keyframes eb-shimmer {
  0% { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
@keyframes eb-fade-up {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Slim route-transition progress bar. Lives as a static element outside
   #app-root in index.html, so the chrome-rebuilding render() functions in
   main.js never touch or destroy it — pulseRouteProgress() in main.js
   just toggles classes on it at the start of every render(). Purely
   decorative motion feedback (there's no real network latency to report
   on this app), same idea as the loading flash on GitHub/Linear/YouTube. */
.route-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: width 0.32s var(--ease-out), opacity 0.15s var(--ease);
}
.route-progress.active { opacity: 1; width: 78%; }
.route-progress.done { opacity: 0; width: 100%; transition: width 0.2s var(--ease-out), opacity 0.25s var(--ease) 0.1s; }
@keyframes eb-spin { to { transform: rotate(360deg); } }

/* Opt-in loading skeleton — not wired into any render path yet, available
   for future async-loading states without touching data logic today. */
.skeleton {
  position: relative; overflow: hidden; color: transparent !important; pointer-events: none;
  background: var(--cream-200);
  background-image: linear-gradient(90deg, var(--cream-200) 0px, rgba(255,255,255,0.75) 40px, var(--cream-200) 80px);
  background-size: 480px 100%;
  animation: eb-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ---------- Type scale ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.3);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}
.eyebrow.on-dark { color: var(--gold-400); }
.eyebrow { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }

/* Base tag sizes stay conservative on purpose — these apply everywhere,
   including app-context titles that were never designed to flex (login
   card headings, drop-detail dish names, checkout/wallet/account page
   titles, onboarding steps). Those all rely on this baseline and have no
   per-page font-size override, so a dramatic bump here would blow them
   out. The genuinely dramatic, "immediately feel premium" scale below is
   instead scoped to the specific marketing containers (.hero, .page-hero,
   .section-head, .cta-band) that actually want an editorial-scale
   headline — see further down. */
h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.008em; }
/* Marketing-only dramatic headline scale. Scoped to the containers that
   only ever appear on marketing pages, so app/dashboard/login/detail
   titles (which share the bare h1/h2 tags above) are unaffected. */
.hero h1, .page-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; }
.section-head h2, .cta-band h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
/* The narrow 420px login/check-email card also happens to use
   .section-head for its heading — carve it back out to a size that fits
   a compact card instead of the editorial marketing scale above. */
.form-card .section-head h2 { font-size: clamp(1.5rem, 4vw, 1.8rem); letter-spacing: -0.015em; line-height: 1.15; }
/* Accent-text utility for highlighting a phrase inside a headline — the
   kind of one-word/one-line color or gradient treatment used across
   Linear/Stripe-style hero copy. Purely additive: only applied where a
   template explicitly wraps text in this class. */
.text-gold { color: var(--gold-400); }
.text-gradient-gold {
  /* Solid fallback color first — if a browser doesn't support
     background-clip:text at all, `color: transparent` below would make
     this text silently disappear instead of just looking less fancy. The
     @supports block only applies the transparent-clip trick on browsers
     that can actually render it. */
  color: var(--gold-400);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient-gold {
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
/* Tabular numerals for anything money/countdown-shaped, so digits don't
   jiggle sideways as they change every second — a small detail real
   premium fintech-adjacent UIs (Stripe, Revolut) get right and generic
   ones usually miss. */
.price-now, .price-was, .plan-price, .metric-value, .countdown-unit b, .tier-pct, .stats-band b, .hero-stat b {
  font-variant-numeric: tabular-nums;
}
.section-lead {
  max-width: 640px;
  color: var(--muted-500);
  font-size: 1.15rem;
  line-height: 1.7;
  margin-top: var(--space-4);
}
.section-head { max-width: 720px; margin: 0 auto var(--space-8); text-align: center; }
.section-head.align-left { margin-left: 0; text-align: left; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
/* Press feedback: a slight scale-down reads more like a physical button
   than the old translateY(1px) alone — kept translateY too so the motion
   still has direction, not just size. */
.btn:active { transform: translateY(1px) scale(0.97); transition-duration: var(--dur-instant); }
.btn-primary {
  background: var(--gradient-gold);
  color: var(--ink-900);
  box-shadow: var(--elevate-gold);
  overflow: hidden;
}
/* Subtle diagonal gloss sweep on hover — a small, tasteful nod to the
   "premium metal/glass" treatment used across gold-tier UI elsewhere in
   this file (tier cards, brand mark). Pure decoration, ::before only. */
.btn-primary::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -6px rgba(240,180,41,0.42), 0 2px 4px rgba(154,107,12,0.2); }
.btn-primary:focus-visible { box-shadow: var(--ring-focus), var(--elevate-gold); }
.btn-dark {
  background: var(--navy-900);
  color: var(--cream-50);
}
.btn-dark:hover { transform: translateY(-2px); background: var(--ink-900); box-shadow: var(--elevate-3); }
.btn-outline {
  background: transparent;
  border-color: rgba(18,20,28,0.16);
  color: var(--ink-900);
}
.btn-outline:hover { border-color: var(--ink-900); transform: translateY(-2px); background: rgba(18,20,28,0.03); }
.btn-outline.on-dark { border-color: rgba(255,255,255,0.28); color: var(--cream-50); }
.btn-outline.on-dark:hover { border-color: var(--cream-50); background: rgba(255,255,255,0.06); }
.btn-ghost { background: transparent; color: var(--ink-900); padding: 10px 4px; }
.btn-ghost:hover { color: var(--gold-500); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.85rem; }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn:disabled::before { display: none; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(18,20,28,0.06);
  transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header.scrolled { box-shadow: var(--elevate-2); background: rgba(251, 248, 243, 0.86); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--gradient-gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elevate-gold);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
a:hover > .brand-mark, .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-700);
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gradient-gold);
  transition: right var(--dur-base) var(--ease-out);
  border-radius: 2px;
}
.nav-links a:hover { color: var(--ink-900); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--ink-900); }
.nav-cta { display: flex; align-items: center; gap: var(--space-4); }
/* BUG FIX: .mobile-cta (the Log In/Dashboard/Open App button duplicated
   inside .nav-links specifically for the mobile dropdown menu — see
   js/main.js's renderMarketingChrome) had no default display rule at all.
   Since .nav-links is a flex container, an <li> with no display override
   renders as a normal visible flex item — meaning this second copy of the
   button showed up at EVERY viewport width, not just mobile, sitting right
   after the "About" link in the desktop nav in addition to the real one in
   .nav-cta. The @media (max-width: 860px) block below already correctly
   flips it to display:block for the mobile dropdown — this default rule is
   what's supposed to hide it everywhere else. */
.nav-links .mobile-cta { display: none; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(18,20,28,0.12);
  background: transparent;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: rgba(18,20,28,0.04); }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: all var(--dur-base) var(--ease-spring); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  background: var(--gradient-dawn);
  color: var(--cream-50);
  padding: var(--space-9) 0 var(--space-9);
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(240,180,41,0.35), transparent 55%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero h1 { margin-top: var(--space-5); }
.hero-sub { margin-top: var(--space-5); font-size: 1.25rem; line-height: 1.6; color: rgba(251,248,243,0.82); max-width: 540px; }
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--space-7); margin-top: var(--space-8); flex-wrap: wrap; }
.hero-stat { transition: transform var(--dur-base) var(--ease-out); }
.hero-stat:hover { transform: translateY(-2px); }
.hero-stat b { display: block; font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-400); }
.hero-stat span { font-size: 0.85rem; color: rgba(251,248,243,0.66); }

.page-hero {
  background: var(--gradient-dawn);
  color: var(--cream-50);
  padding: var(--space-9) 0 var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(240,180,41,0.3), transparent 60%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin-top: var(--space-5); }
.page-hero p { margin: var(--space-5) auto 0; max-width: 620px; color: rgba(251,248,243,0.82); font-size: 1.1rem; }

/* ---------- Drop card (phone mock + demo cards) ---------- */
.phone-mock {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: blur(6px);
  box-shadow: var(--elevate-4);
  transition: transform var(--dur-slow) var(--ease-out);
}
.drop-card {
  background: var(--cream-50);
  color: var(--ink-900);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--elevate-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.drop-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 12px; border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.tier-badge.gold { background: rgba(240,180,41,0.16); color: #9a6b0c; }
.tier-badge.silver { background: rgba(154,164,181,0.2); color: #4d5a6d; }
.tier-badge.bronze { background: rgba(201,124,61,0.18); color: #8a4f22; }
.drop-card h4 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 2px; }
.drop-card .dish { color: var(--muted-500); font-size: 0.9rem; }
.drop-countdown {
  display: flex; gap: 10px; margin: var(--space-4) 0;
}
.countdown-unit {
  flex: 1; text-align: center;
  background: var(--cream-100);
  border-radius: 10px; padding: 8px 4px;
  transition: background var(--dur-fast) var(--ease);
}
.countdown-unit b { display: block; font-family: var(--font-head); font-size: 1.15rem; }
.countdown-unit span { font-size: 0.65rem; color: var(--muted-500); text-transform: uppercase; letter-spacing: 0.04em; }
/* Radial countdown ring — a richer alternative presentation of the exact
   same .countdown-unit chip. The <b data-countdown-to> node inside is
   untouched by this (same element, same attribute, same JS-driven
   textContent), so startCountdowns()'s base behavior can't regress; this
   only adds a decorative/informative ring around it. */
.countdown-unit.ring { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 12px 6px 6px; }
.ring-svg { width: 44px; height: 44px; flex-shrink: 0; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: var(--cream-200); stroke-width: 3.5; }
.ring-fill {
  /* Solid color rather than an SVG <linearGradient> on purpose — each ring
     is its own inline <svg> and a page can render many of them at once (a
     whole /drops feed of cards), so a shared gradient id would collide
     across instances the same way duplicate tier-icon gradient ids would
     have earlier in this redesign. */
  fill: none; stroke: var(--gold-400); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 113.1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s var(--ease-out), stroke 0.3s var(--ease);
}
.ring-fill.is-low { stroke: #c0392b; animation: eb-ring-pulse 1.1s var(--ease-out) infinite; }
/* box-shadow-based eb-pulse-ring doesn't reliably apply to SVG shape
   elements across browsers, so the low-time urgency cue uses a plain
   opacity pulse on the ring stroke instead. */
@keyframes eb-ring-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.countdown-unit.ring b { font-size: 1.05rem; }
.countdown-unit.ring span { display: block; }
/* Bug fix: every .countdown-unit.ring in this app is always nested inside
   a light card (.drop-card / .pass-card are both solid white/cream, even
   the one on the dark hero phone-mock demo), so a dark-context background
   override here never actually applied to a genuinely dark surface — on
   the homepage hero it just gave the chip a barely-visible near-white-on-
   white background instead of the intended cream chip. Removed rather
   than fixed forward, since there's no real case that needs it. */
.spots-bar { height: 9px; border-radius: var(--radius-full); background: var(--cream-200); overflow: hidden; margin-top: var(--space-2); position: relative; box-shadow: inset 0 1px 2px rgba(18,20,28,0.08); }
.spots-bar-fill {
  height: 100%; border-radius: var(--radius-full); background: var(--gradient-gold);
  transition: width var(--dur-slower) var(--ease-out); position: relative; overflow: hidden;
}
.spots-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  background-size: 200% 100%; animation: eb-shimmer 2.6s linear infinite;
}
.spots-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted-500); margin-top: 6px; }
.drop-card .price-row { display: flex; align-items: baseline; gap: 8px; margin: var(--space-4) 0 var(--space-3); }
.price-now { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; }
.price-was { color: var(--muted-400); text-decoration: line-through; font-size: 0.95rem; }

/* ---------- Section utility bands ---------- */
.band { padding: var(--space-9) 0; }
.band-tight { padding: var(--space-8) 0; }
.band-dark { background: var(--navy-900); color: var(--cream-50); }
.band-cream { background: var(--cream-100); }

/* ---------- Grids & cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

.card {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--elevate-3); border-color: rgba(18,20,28,0.08); }
/* Breaks the flat equal-thirds sameness of a 3-card feature grid by
   giving the first card more width and a subtly tinted "lead" treatment,
   rather than three visually identical boxes that only differ by copy. */
.feature-grid-asym { grid-template-columns: 1.4fr 1fr 1fr; }
.feature-grid-asym .card.featured {
  background: linear-gradient(165deg, rgba(240,180,41,0.08), #fff 60%);
  border-color: rgba(240,180,41,0.35);
}
.feature-grid-asym .card.featured .card-icon { width: 60px; height: 60px; }
@media (max-width: 860px) { .feature-grid-asym { grid-template-columns: 1fr; } }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,180,41,0.14); color: var(--gold-500);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease);
}
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); background: rgba(240,180,41,0.22); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--muted-500); }

.problem-card {
  background: var(--navy-900);
  color: var(--cream-50);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--elevate-3); }
.problem-card h3 { color: var(--gold-400); margin-bottom: var(--space-4); }
.problem-card p { color: rgba(251,248,243,0.78); }

/* ---------- Tier explainer cards ---------- */
.tier-card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--cream-50);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tier-card:hover { transform: translateY(-6px); box-shadow: var(--elevate-4); }
/* Breaks the "three identical boxes" sameness of the tier grid by giving
   the Gold card a genuine visual lead — raised, slightly larger, with its
   own shadow — rather than three cards that only differ by color. Applied
   via a wrapper modifier class so the .tier-card rules above (used
   elsewhere, e.g. the tier-breakdown page) are untouched. */
.tier-grid { align-items: end; }
.tier-grid .tier-card.gold { transform: translateY(-18px) scale(1.03); box-shadow: var(--elevate-gold); z-index: 1; }
.tier-grid .tier-card.gold:hover { transform: translateY(-24px) scale(1.03); }
/* Slow diagonal shine sweep on hover — same gloss idea as .btn-primary,
   scaled up for a bigger surface. Respects prefers-reduced-motion globally. */
.tier-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.14) 50%, transparent 65%);
  transform: translateX(-140%);
  transition: transform var(--dur-slower) var(--ease-out);
  pointer-events: none;
}
.tier-card:hover::after { transform: translateX(140%); }
.tier-card.gold { background: linear-gradient(160deg, #4a3a10, #12141c 70%); border: 1px solid rgba(240,180,41,0.4); }
.tier-card.silver { background: linear-gradient(160deg, #3a4152, #12141c 70%); border: 1px solid rgba(195,202,214,0.3); }
.tier-card.bronze { background: linear-gradient(160deg, #4a3220, #12141c 70%); border: 1px solid rgba(201,124,61,0.35); }
.tier-card .tier-pct { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; margin: var(--space-3) 0; }
.tier-card.gold .tier-pct { color: var(--gold-400); }
.tier-card.silver .tier-pct { color: var(--silver-400); }
.tier-card.bronze .tier-pct { color: var(--bronze-400); }
.tier-card ul { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 10px; }
.tier-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: rgba(251,248,243,0.85); }
.tier-card li svg { flex-shrink: 0; margin-top: 3px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); counter-reset: step; }
.step { position: relative; padding-top: var(--space-6); }
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-gold); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  margin-bottom: var(--space-4);
  box-shadow: var(--elevate-gold);
  transition: transform var(--dur-base) var(--ease-spring);
}
.step:hover .step-num, .flow-step:hover .step-num { transform: scale(1.08); }
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--muted-500); }

.flow-steps { display: flex; flex-direction: column; gap: 0; }
.flow-step { display: flex; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--line-200); }
.flow-step:last-child { border-bottom: none; }
.flow-step .step-num { flex-shrink: 0; }
.flow-step h3 { margin-bottom: 6px; }
.flow-step p { color: var(--muted-500); }

/* ---------- Tabs ---------- */
.tabs-switch {
  display: inline-flex;
  background: var(--cream-200);
  border-radius: var(--radius-full);
  padding: 5px;
  margin: 0 auto var(--space-8);
}
.tabs-switch button {
  border: none; background: transparent;
  padding: 12px 28px; border-radius: var(--radius-full);
  font-weight: 700; font-size: 0.95rem; color: var(--muted-500);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.tabs-switch button:hover:not(.active) { color: var(--ink-900); }
.tabs-switch button.active { background: var(--ink-900); color: var(--cream-50); box-shadow: var(--elevate-2); transform: scale(1.02); }
.tab-panel { display: none; animation: eb-fade-up var(--dur-slow) var(--ease-out); }
.tab-panel.active { display: block; }
.tabs-center { display: flex; justify-content: center; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.plan-card {
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: var(--space-7); display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--elevate-3); }
.plan-card.featured {
  background: var(--navy-900); color: var(--cream-50); border-color: transparent;
  box-shadow: var(--elevate-4); transform: scale(1.04);
}
.plan-card.featured:hover { transform: scale(1.04) translateY(-6px); box-shadow: var(--elevate-4), var(--elevate-gold); }
.plan-badge {
  align-self: flex-start; background: var(--gradient-gold); color: var(--ink-900);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-4);
  box-shadow: var(--elevate-gold);
}
.plan-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; }
.plan-price { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; margin: var(--space-3) 0; }
.plan-price span { font-size: 1rem; font-weight: 500; color: var(--muted-500); }
.plan-card.featured .plan-price span { color: rgba(251,248,243,0.6); }
.plan-desc { color: var(--muted-500); margin-bottom: var(--space-5); font-size: 0.92rem; }
.plan-card.featured .plan-desc { color: rgba(251,248,243,0.7); }
.plan-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-6); flex: 1; }
.plan-features li { display: flex; gap: 10px; font-size: 0.92rem; align-items: flex-start; }
.plan-features li svg { flex-shrink: 0; margin-top: 2px; color: var(--gold-500); }

/* ---------- Accordion (FAQ) ---------- */
.accordion { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.accordion-item { border: 1px solid var(--line-200); border-radius: var(--radius-md); background: #fff; overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.accordion-item.open { border-color: rgba(240,180,41,0.4); box-shadow: var(--elevate-2); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5); background: none; border: none; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-900);
  transition: background var(--dur-fast) var(--ease);
}
.accordion-trigger:hover { background: var(--cream-100); }
.accordion-trigger .plus { transition: transform var(--dur-base) var(--ease-spring); flex-shrink: 0; margin-left: var(--space-4); }
.accordion-item.open .accordion-trigger .plus { transform: rotate(45deg); color: var(--gold-500); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-in-out); }
.accordion-panel-inner { padding: 0 var(--space-5) var(--space-5); color: var(--muted-500); animation: eb-fade-up var(--dur-slow) var(--ease-out); }

/* ---------- Timeline (roadmap) ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0 auto; }
.timeline-item { display: grid; grid-template-columns: 120px 40px 1fr; gap: var(--space-5); }
.timeline-item .tl-phase { font-family: var(--font-head); font-weight: 800; color: var(--gold-500); font-size: 0.85rem; text-transform: uppercase; padding-top: 4px; }
.timeline-rail { display: flex; flex-direction: column; align-items: center; }
.timeline-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--gradient-gold); box-shadow: var(--shadow-gold); flex-shrink: 0; }
.timeline-line { width: 2px; flex: 1; background: var(--line-200); margin-top: 6px; }
.timeline-item:last-child .timeline-line { display: none; }
.timeline-content { padding-bottom: var(--space-7); }
.timeline-content h3 { margin-bottom: 8px; }
.timeline-content p { color: var(--muted-500); }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border-radius: var(--radius-lg); padding: var(--space-7);
  box-shadow: var(--shadow-lg); max-width: 560px; margin: 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink-700); }
.field input, .field select {
  padding: 13px 16px; border-radius: 10px; border: 1px solid var(--line-200);
  font-family: inherit; font-size: 0.95rem; background: var(--cream-50);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input:hover, .field select:hover { border-color: rgba(18,20,28,0.24); }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--ring-gold); background: #fff; }
.role-toggle { display: flex; gap: 10px; margin-bottom: var(--space-5); }
.role-toggle button {
  flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--line-200);
  background: var(--cream-50); font-weight: 700; font-size: 0.9rem; color: var(--muted-500);
  transition: all var(--dur-base) var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.role-toggle button:hover:not(.active) { border-color: rgba(18,20,28,0.24); color: var(--ink-700); }
.role-toggle button.active { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); }
.form-success { display: none; text-align: center; padding: var(--space-6) 0; }
.form-success.show { display: block; animation: eb-fade-up var(--dur-slow) var(--ease-out); }
.form-success .check {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(47,174,102,0.14); color: var(--success-500);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4);
  animation: eb-pulse-ring 1.4s var(--ease-out) 1;
}
.form-note { font-size: 0.78rem; color: var(--muted-400); margin-top: var(--space-3); text-align: center; }

/* ---------- Quote / pitch block ---------- */
.pitch-block {
  background: var(--cream-100); border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-7);
  font-size: 1rem; color: var(--ink-700); line-height: 1.8;
}
.pitch-block p + p { margin-top: var(--space-3); }
.pitch-block .sign { margin-top: var(--space-4); font-weight: 700; color: var(--ink-900); }

.quote-hero { text-align: center; max-width: 780px; margin: 0 auto; }
.quote-hero blockquote { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.4; }

/* ---------- Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
.stats-band b { display: block; font-family: var(--font-head); font-size: 2.2rem; color: var(--gold-400); }
.stats-band span { font-size: 0.85rem; color: rgba(251,248,243,0.66); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--gradient-dawn); color: var(--cream-50);
  border-radius: var(--radius-lg); padding: var(--space-8);
  text-align: center; position: relative; overflow: hidden;
}
.cta-band::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 100%, rgba(240,180,41,0.3), transparent 60%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band p { color: rgba(251,248,243,0.8); margin: var(--space-4) auto var(--space-6); max-width: 520px; }
.cta-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%) scale(0.94);
  background: var(--ink-900); color: var(--cream-50); padding: 14px 22px; border-radius: var(--radius-full);
  font-size: 0.9rem; font-weight: 600; box-shadow: var(--elevate-4); z-index: 300;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
  opacity: 0;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); animation: eb-pulse-ring 1.8s var(--ease-out) infinite; }

/* ---------- Modal (reusable confirm/prompt dialog) ---------- */
.eb-modal-overlay {
  position: fixed; inset: 0; background: rgba(10,13,24,0.55); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
  backdrop-filter: blur(0px);
}
.eb-modal-overlay.show { opacity: 1; pointer-events: auto; backdrop-filter: blur(3px); }
.eb-modal-box {
  background: #fff; border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 440px;
  box-shadow: var(--elevate-4); transform: translateY(16px) scale(0.97); transition: transform var(--dur-base) var(--ease-spring);
}
.eb-modal-overlay.show .eb-modal-box { transform: translateY(0) scale(1); }
.eb-modal-box h3 { font-family: var(--font-head); margin-bottom: 10px; }
.eb-modal-box p.eb-modal-message { color: var(--muted-500); font-size: 0.92rem; margin-bottom: 16px; }
.eb-modal-box textarea, .eb-modal-box input[type="text"] {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-200);
  font-family: inherit; font-size: 0.92rem; margin-bottom: 16px; resize: vertical;
}
.eb-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgba(251,248,243,0.7); padding: var(--space-8) 0 var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); padding-bottom: var(--space-7); border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand .brand { color: var(--cream-50); margin-bottom: var(--space-3); }
.footer-brand p { max-width: 280px; font-size: 0.92rem; }
.footer-col h4 { color: var(--cream-50); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.92rem; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--gold-400); }
.footer-newsletter input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: var(--cream-50); margin-bottom: 10px; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.footer-newsletter input:focus { outline: none; border-color: var(--gold-500); background: rgba(255,255,255,0.08); }
.footer-newsletter input::placeholder { color: rgba(251,248,243,0.4); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-5); font-size: 0.82rem; flex-wrap: wrap; gap: 12px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring); }
.footer-socials a:hover { background: rgba(240,180,41,0.2); transform: translateY(-2px); }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line-200); border: none; margin: var(--space-8) 0; }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.check-list svg { color: var(--gold-500); flex-shrink: 0; margin-top: 2px; }
/* Deliberately unequal columns — every .two-col usage pairs a short
   heading/text block against a denser content block (a pitch, a data
   card, a gradient visual), so a flat 1fr/1fr split under-serves the
   denser side. Breaks the "everything is a perfectly even grid" sameness
   without touching the markup at any of its three call sites. */
.two-col { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: center; }
.risk-table { width: 100%; border-collapse: collapse; }
.risk-table th, .risk-table td { text-align: left; padding: 16px; border-bottom: 1px solid var(--line-200); font-size: 0.92rem; }
.risk-table th { font-family: var(--font-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-500); }
.risk-table td:first-child { font-weight: 700; }
.risk-table td:last-child { color: var(--muted-500); }
.risk-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.risk-table tbody tr:hover { background: var(--cream-100); }

.timeline-dot { transition: transform var(--dur-base) var(--ease-spring); }
.timeline-item:hover .timeline-dot { transform: scale(1.25); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
}

@media (max-width: 860px) {
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--cream-50);
    flex-direction: column; align-items: stretch; padding: var(--space-6); gap: var(--space-2);
    transform: translateX(100%); transition: transform 0.3s var(--ease); overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 14px 6px; border-bottom: 1px solid var(--line-200); font-size: 1.05rem; }
  .nav-cta .btn-primary { display: none; }
  .nav-links .mobile-cta { display: block; margin-top: var(--space-4); }
  .nav-toggle { display: flex; }
  .grid-2, .grid-3, .pricing-grid, .steps { grid-template-columns: 1fr; }
  .tier-grid .tier-card.gold, .tier-grid .tier-card.gold:hover { transform: none; }
  .two-col { grid-template-columns: 1fr; }
  .plan-card.featured { transform: none; }
  .plan-card.featured:hover { transform: translateY(-4px); }
  .timeline-item { grid-template-columns: 90px 32px 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-5); }
  .grid-4 { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-stats { gap: var(--space-5); }
  .drop-countdown { gap: 6px; }
  .band { padding: var(--space-8) 0; }
  .cta-band { padding: var(--space-7) var(--space-5); }
}