/* ============================================================
   CAKE — SOFT-STRUCTURED SPATIAL UI
   Dark-locked. Editorial. Card-based. Ambient depth.
   Tokens mirror the app system.
   ============================================================ */

:root {
  /* Surface */
  --bg: #0a0a0c;
  --bg-raised: #111114;
  --bg-sunken: #070709;
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-3: rgba(255, 255, 255, 0.085);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Ink — values tuned for WCAG AA contrast against --bg.
     ink-1/2/3 are all usable for text; ink-4 is decorative only. */
  --ink-1: #f6f6f8;                    /* ~19:1 */
  --ink-2: rgba(246, 246, 248, 0.78);  /* ~11.5:1 — body copy */
  --ink-3: rgba(246, 246, 248, 0.62);  /* ~7:1 — secondary labels */
  --ink-4: rgba(246, 246, 248, 0.42);  /* decorative chrome only, never body text */

  /* Accent (Cake red) */
  --accent: #fc3d4f;
  --accent-soft: #ff6b7d;
  --accent-glow: rgba(252, 61, 79, 0.28);
  --accent-wash: rgba(252, 61, 79, 0.08);

  /* Semantic */
  --ok: #5bd67a;
  --warn: #ffb347;

  /* Radii (mirrors app) */
  --r-8: 10px;
  --r-12: 14px;
  --r-16: 18px;
  --r-20: 22px;
  --r-24: 26px;
  --r-28: 30px;
  --r-32: 36px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-56: 56px;
  --s-80: 80px;
  --s-120: 120px;

  /* Type scale — fluid with clamp(min, preferred, max) */
  --t-display: clamp(2.625rem, 1.2rem + 7vw, 6.4rem);
  --t-xl:      clamp(1.75rem, 1.05rem + 3.4vw, 3.2rem);
  --t-lg:      clamp(1.1875rem, 1rem + 0.95vw, 1.65rem);
  --t-md:      clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-sm:      clamp(0.9rem, 0.88rem + 0.1vw, 0.9375rem);
  --t-xs:      0.8125rem;
  --t-label:   0.72rem;

  /* Line heights */
  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-normal: 1.55;
  --lh-relaxed: 1.68;

  /* Max line length (readability) */
  --measure: 68ch;

  /* Focus ring */
  --focus-ring: 0 0 0 2px rgba(10, 10, 12, 1), 0 0 0 4px var(--accent-soft);

  /* Edge-to-edge safe areas — notch, status bar, home indicator, landscape
     ears. These are the single source of truth for every gutter on the
     page. `env()` returns 0 on browsers without notches, so these values
     are safe to use unconditionally. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* Horizontal page gutter = safe-area + fluid inset. All page-level
     containers reference this so edge alignment is identical everywhere. */
  --gutter-x: calc(env(safe-area-inset-left, 0px) + clamp(20px, 4vw, 40px));
  --gutter-y: clamp(60px, 9vw, 120px);

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 220ms;
  --dur-2: 420ms;
  --dur-3: 780ms;

  /* Fonts */
  --f-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(96px + var(--safe-top));
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  /* Paint the root dark too so the iOS safe-area and the overscroll
     rubber-band zones don't flash the default white through the
     notch or the home-indicator strip. */
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100dvh;
  text-size-adjust: 100%;
  /* Reserve space for the fixed nav so the page doesn't slide under it
     on load. --nav-h is maintained by main.js; the fallback covers the
     common portrait case for first paint. */
  padding-top: var(--nav-h, calc(var(--safe-top) + 72px));
  /* Edge-to-edge: the body fills the entire viewport, including the
     area behind the status bar and home indicator on iOS. Per-component
     padding uses `env(safe-area-inset-*)` so content never hides behind
     the notch, the home bar, or the landscape "ears". */
}
body::before,
body::after {
  content: "";
  position: fixed;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 90;
  transform: translate3d(-50%, -18px, 0) scaleX(0.82);
  transition:
    opacity var(--dur-2) var(--ease-soft),
    transform var(--dur-2) var(--ease-soft);
}
body::before {
  top: calc(var(--safe-top) + 20px);
  width: min(190px, calc(100vw - 56px));
  height: 8px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)),
    linear-gradient(90deg, rgba(252, 61, 79, 0.22), rgba(252, 61, 79, 0.62), rgba(252, 61, 79, 0.22));
  background-size: 220% 100%, 100% 100%;
  border: 1px solid rgba(252, 61, 79, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body::after {
  top: calc(var(--safe-top) + 18px);
  width: min(240px, calc(100vw - 24px));
  height: 22px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(252, 61, 79, 0.24) 0%, rgba(252, 61, 79, 0) 72%);
  filter: blur(14px);
}
html[data-navigating] body::before,
html[data-navigating] body::after {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scaleX(1);
}
html[data-navigating] body::before {
  animation: route-loader-sheen 1.4s var(--ease-soft) infinite alternate;
}
html[data-navigating] main { pointer-events: none; }
img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}
img { font-style: italic; } /* surfaces broken-image text nicely */
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
h1, h2, h3, h4, h5, h6 { hyphens: manual; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--accent-glow); color: var(--ink-1); }

/* Focus rings — consistent, accessible, only on keyboard nav */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 8px;
  transition: outline-offset 120ms var(--ease-soft);
}
.btn:focus-visible,
.nav-cta:focus-visible,
.claim-btn:focus-visible,
.redeem-btn:focus-visible,
.store-link:focus-visible,
.retry-btn:focus-visible,
.privacy-link:focus-visible,
.pill:focus-visible,
.nav-links a:focus-visible { outline-offset: 4px; }

/* Skip-navigation link (appears on keyboard focus) */
.skip-nav {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-sm);
  transform: translateY(-200%);
  transition: transform 240ms var(--ease-soft);
}
.skip-nav:focus { transform: translateY(0); }

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

/* Custom scrollbar (desktop only — subtle) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.16); background-clip: padding-box; }
}

/* ---------- Ambient depth (no hard shadows) ---------- */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}
.ambient-warm, .ambient-cool {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.55;
}
.ambient-warm {
  top: -20vmax;
  left: -10vmax;
  background: radial-gradient(circle, rgba(252, 61, 79, 0.22) 0%, rgba(252, 61, 79, 0) 60%);
}
.ambient-cool {
  bottom: -25vmax;
  right: -15vmax;
  background: radial-gradient(circle, rgba(96, 64, 190, 0.18) 0%, rgba(96, 64, 190, 0) 60%);
}
.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@keyframes route-loader-sheen {
  from { background-position: 0% 50%, 50% 50%; }
  to { background-position: 100% 50%, 50% 50%; }
}

/* ---------- Layout shell ----------
   The content column is centered with a fluid max-width. Horizontal
   padding uses the safe-area gutter so it clears landscape notches
   automatically. */
.site {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

/* ---------- Nav (edge-to-edge bar, constrained inner) ----------
   The nav is a true edge-to-edge fixed bar. Its background and
   hairline span the full viewport; `.nav-inner` holds the content
   at the same 1240px constraint as the rest of the site. Padding
   adds `env(safe-area-inset-top)` so it clears the iPhone status
   bar and notch in Safari and standalone/fullscreen mode.
   Fixed (not sticky) because iOS Safari clips backdrop-filter at
   the safe-area boundary on sticky elements, which left a visible
   seam through the status bar. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  padding-top: calc(14px + var(--safe-top));
  padding-right: var(--gutter-x);
  padding-bottom: 14px;
  padding-left: var(--gutter-x);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  /* The gradient is transparent through the safe-area band so only the
     ::before paints there (0.78). Below the band the gradient picks up
     at the same 0.78 and fades to 0.5. Matching opacities across the
     boundary keeps the status-bar zone reading as part of the header,
     not a darker gap above it. */
  background: linear-gradient(180deg,
    transparent 0,
    transparent var(--safe-top),
    rgba(10, 10, 12, 0.78) var(--safe-top),
    rgba(10, 10, 12, 0.5) 100%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-soft), padding var(--dur-1) var(--ease-soft);
  view-transition-name: nav;
}
/* Dedicated safe-area glass strip. iOS Safari sometimes fails to paint
   the nav's own backdrop-filter through the status bar / notch, leaving
   a visible gap. This fixed pseudo-element carries its own blur and the
   same 0.78 tint the nav resumes at y=var(--safe-top), so the boundary
   is seamless. translateZ(0) forces a GPU layer for reliable compositing. */
.nav::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  pointer-events: none;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: rgba(10, 10, 12, 0.78);
  transform: translateZ(0);
}
.nav.scrolled {
  border-bottom-color: var(--hairline);
  padding-top: calc(10px + var(--safe-top));
  padding-bottom: 10px;
}
.nav-inner {
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: center;
  gap: var(--s-24);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.nav-brand img {
  border-radius: 8px;
  width: 30px;
  height: 30px;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding: 4px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-links a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
  position: relative;
  font-weight: 500;
  scroll-snap-align: start;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink-1); background: var(--surface-2); }
.nav-links a.active {
  color: var(--ink-1);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.6vw, 8px);
  padding: clamp(9px, 1vw, 10px) clamp(14px, 1.8vw, 18px);
  border-radius: var(--r-pill);
  background: var(--ink-1);
  color: #0a0a0c;
  font-weight: 600;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.9375rem);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1);
}
.nav-cta svg {
  width: clamp(12px, 1vw, 14px);
  height: clamp(12px, 1vw, 14px);
  flex-shrink: 0;
}
.nav-cta:hover { transform: translateY(-1px); background: #fff; }

/* Nav responsive — keep the pill, shrink gracefully */
@media (max-width: 860px) {
  .nav-inner { gap: var(--s-12); }
  .nav-links { gap: 2px; padding: 3px; }
  .nav-links a { padding: 7px 12px; font-size: 0.85rem; }
}
@media (max-width: 680px) {
  .nav {
    padding-top: calc(12px + var(--safe-top));
    padding-bottom: 12px;
  }
  .nav-brand span { display: none; }
  .nav-links {
    order: 3;
    margin: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding: 0 8px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex-shrink: 0; }
  .nav-inner { flex-wrap: wrap; row-gap: 10px; }
  .nav-cta { margin-left: auto; padding: 8px 14px; }
  .nav-cta span { display: none; }
  .nav-cta svg { width: 16px; height: 16px; }
}

/* ---------- Typography primitives ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0 0 var(--s-24);
  color: var(--ink-1);
  text-wrap: balance;
}
.h1-brand {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: var(--s-16);
  line-height: 1.3;
}
.display em {
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #ff8a97 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h-xl {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-20);
  color: var(--ink-1);
}
.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 0 var(--s-32);
  font-weight: 400;
}
.body {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 var(--s-24);
}
.body.max-560 { max-width: 560px; }
.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 var(--s-20);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: 0.02em;
  margin: 0 0 var(--s-32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(252, 61, 79, 0.16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ---------- Buttons (capsule, fill-weighted) ----------
   Rules:
   1. Content-sized by default (no flex-shrink inside flex parents).
   2. Padding + font-size scale fluidly with viewport — smaller on phones,
      full size on desktop — so the button shrinks proportionally.
   3. Icon children (svg/img) never wrap — `flex-shrink: 0` and inherited
      `white-space: nowrap` keep icon+text on one line inside the pill.
   4. `max-width: 100%` means a button can never exceed its container.
   5. Groups of buttons wrap or stack, they never squeeze content.        */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(12px, 1.5vw, 16px) clamp(18px, 2.4vw, 26px);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(0.88rem, 0.82rem + 0.32vw, 1.0625rem);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 100%;
  flex-shrink: 0;
  transition:
    transform var(--dur-1) var(--ease-spring),
    background-color var(--dur-1) var(--ease-soft),
    color var(--dur-1) var(--ease-soft);
}
.btn > svg,
.btn > img,
.nav-cta > svg,
.claim-btn > svg,
.redeem-btn > svg,
.store-link > svg,
.privacy-link > svg {
  flex-shrink: 0;
  width: clamp(14px, 1.4vw, 18px);
  height: clamp(14px, 1.4vw, 18px);
}
.btn > span,
.nav-cta > span,
.claim-btn > span,
.redeem-btn > span,
.store-link > span,
.privacy-link > span { min-width: 0; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, #ff5566 0%, var(--accent) 100%);
  color: #fff;
  position: relative;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost {
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--surface-3); border-color: var(--hairline-strong); }
.btn-lg {
  padding: clamp(16px, 1.8vw, 20px) clamp(22px, 3vw, 32px);
  font-size: clamp(0.96rem, 0.88rem + 0.4vw, 1.1rem);
}
.apple-glyph {
  width: clamp(15px, 1.3vw, 18px);
  height: clamp(15px, 1.3vw, 18px);
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  min-height: min(860px, 88vh);
  padding: clamp(60px, 9vw, 120px) 0 var(--s-120);
}
.hero-copy { position: relative; z-index: 2; }
.hero-actions {
  display: flex;
  gap: var(--s-12);
  margin-bottom: var(--s-40);
  flex-wrap: wrap;
  align-items: stretch;
}
.hero-actions .btn { min-height: 48px; }
.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--s-20);
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: var(--t-sm);
}
.meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-k { color: var(--ink-1); font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.005em; }
.meta-v { color: var(--ink-3); font-size: var(--t-xs); }
.meta-sep { width: 1px; height: 24px; background: var(--hairline); }

/* Hero stage — phones with spatial overlap + floating chips.
   Stage height is tall enough to fully contain both phones at their
   capped widths so nothing bleeds into the next section. */
.hero-stage {
  position: relative;
  min-height: clamp(520px, 64vw, 720px);
}
.stage-glow {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 61, 79, 0.32) 0%, rgba(252, 61, 79, 0) 60%);
  filter: blur(80px);
  z-index: 0;
  contain: strict;
}
.phone {
  position: absolute;
  border-radius: clamp(32px, 4.2vw, 44px);
  overflow: hidden;
  background: #0a0a0c;
  aspect-ratio: 9 / 19.5;
  transition: transform var(--dur-3) var(--ease-soft);
  contain: paint;
}
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.media-shell {
  isolation: isolate;
}
.media-shell::after,
.media-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition:
    opacity var(--dur-3) var(--ease-soft),
    transform var(--dur-3) var(--ease-spring);
}
.media-shell::before {
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0.16) 38%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 44%, rgba(255, 255, 255, 0.04) 100%);
  background-size: 220% 100%, 100% 100%;
  animation: shimmer 1.8s var(--ease-soft) infinite;
  opacity: 0.95;
}
.media-shell::after {
  z-index: 1;
  background:
    radial-gradient(circle at 18% 18%, rgba(252, 61, 79, 0.24) 0%, rgba(252, 61, 79, 0) 42%),
    radial-gradient(circle at 78% 86%, rgba(96, 64, 190, 0.18) 0%, rgba(96, 64, 190, 0) 40%),
    linear-gradient(180deg, rgba(18, 18, 22, 0.96) 0%, rgba(10, 10, 12, 0.94) 100%);
  transform-origin: bottom center;
}
.media-shell picture {
  width: 100%;
  height: 100%;
}
.media-shell .media-image {
  opacity: 0;
  transform: scale(1.035) translate3d(0, 12px, 0);
  filter: blur(18px) saturate(1.08);
  transition:
    opacity var(--dur-3) var(--ease-soft),
    transform var(--dur-3) var(--ease-spring),
    filter var(--dur-3) var(--ease-soft);
}
.media-shell[data-media-state="ready"]::before {
  opacity: 0;
  transform: translate3d(0, -8%, 0) scale(1.03);
}
.media-shell[data-media-state="ready"]::after {
  opacity: 0;
  transform: translate3d(0, 104%, 0) scaleY(0.9);
}
.media-shell[data-media-state="ready"] .media-image,
.media-shell[data-media-state="error"] .media-image {
  opacity: 1;
  transform: none;
  filter: none;
}
.media-shell[data-media-state="error"]::before,
.media-shell[data-media-state="error"]::after {
  opacity: 0.2;
  animation: none;
}
html:not(.js) .media-shell::before,
html:not(.js) .media-shell::after {
  content: none;
}
html:not(.js) .media-shell .media-image {
  opacity: 1;
  transform: none;
  filter: none;
}
.phone-back {
  width: clamp(180px, 28vw, 270px);
  top: 2%;
  left: 6%;
  transform: rotate(-5deg);
  opacity: 0.88;
  z-index: 1;
}
.phone-front {
  width: clamp(200px, 32vw, 310px);
  top: 14%;
  right: 2%;
  transform: rotate(3deg);
  z-index: 2;
}

/* Floating chips (progressive disclosure cues) */
.stage-chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--r-20);
  background: rgba(18, 18, 22, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hairline);
  z-index: 3;
  transition: transform var(--dur-2) var(--ease-spring);
}
.chip-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.chip-value {
  font-family: var(--f-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.chip-top { top: 6%; right: -4%; }
.chip-bottom { bottom: 10%; left: -4%; }

@media (hover: hover) and (pointer: fine) {
  .hero-stage:hover .phone-back  { transform: rotate(-7deg) translateY(-6px); }
  .hero-stage:hover .phone-front { transform: rotate(4deg) translateY(-10px); }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s-56);
    min-height: 0;
    padding: var(--s-56) 0 var(--s-80);
  }
  .hero-stage { min-height: 460px; margin: 0; }
  .stage-chip { padding: 10px 14px; }
  .chip-top    { right: 0; }
  .chip-bottom { left: 0; }
}
@media (max-width: 560px) {
  .hero { padding: var(--s-32) 0 var(--s-56); gap: var(--s-40); }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-actions .btn { width: 100%; }
  .hero-stage { min-height: 420px; }
  .hero-meta { gap: var(--s-16); }
  .meta-sep { display: none; }
  .eyebrow { font-size: 0.72rem; padding: 7px 12px 7px 10px; }
  .phone-back  { width: 58%; }
  .phone-front { width: 66%; }
  .stage-chip { padding: 9px 13px; border-radius: 18px; }
  .chip-label { font-size: 0.62rem; }
  .chip-value { font-size: 0.86rem; }
}

/* ---------- Feature sections (card-based spatial) ---------- */
.feature {
  padding: var(--s-80) 0;
  position: relative;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
@media (max-width: 720px) {
  .feature { padding: var(--s-56) 0; }
}
.feature.alt { contain: layout style; }
.feature.alt::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  background: radial-gradient(ellipse at center, rgba(252, 61, 79, 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.feature-context {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: var(--gutter-x);
}
.feature-context::before {
  inset: -10% 0 -12%;
  background:
    radial-gradient(ellipse at 54% 50%, rgba(252, 61, 79, 0.18) 0%, rgba(252, 61, 79, 0.04) 34%, transparent 72%),
    radial-gradient(ellipse at 78% 56%, rgba(91, 57, 214, 0.12) 0%, rgba(91, 57, 214, 0.02) 34%, transparent 72%),
    linear-gradient(180deg, rgba(18, 11, 16, 0.14) 0%, rgba(10, 10, 12, 0) 100%);
  filter: blur(84px);
  opacity: 0.86;
}
.feature-context .feature-frame {
  max-width: 1240px;
  margin: 0 auto;
  isolation: isolate;
}
.feature-context .feature-phone::before {
  inset: 2% -8%;
  background: radial-gradient(circle at 50% 38%, rgba(252, 61, 79, 0.2) 0%, rgba(252, 61, 79, 0.06) 42%, transparent 74%);
  filter: blur(104px);
  opacity: 0.9;
  contain: none;
}
.feature-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  position: relative;
}
.feature-frame.reverse > .feature-copy { order: 2; }
.feature-frame.reverse > .feature-phone { order: 1; }
@media (max-width: 900px) {
  .feature-frame { grid-template-columns: 1fr; gap: var(--s-40); }
  .feature-frame.reverse > .feature-copy { order: 1; }
  .feature-frame.reverse > .feature-phone { order: 2; }
}
@media (max-width: 720px) {
  .feature-context::before { inset: -4% 0 -6%; }
}

.feature-copy { max-width: 540px; }
.bullet-list {
  list-style: none;
  padding: 0;
  margin: var(--s-24) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.bullet-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-2);
  font-size: var(--t-md);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(252, 61, 79, 0.12);
}
.bullet-list li span {
  color: var(--ink-1);
  font-weight: 600;
}

/* Phone shell (reusable container for a single screenshot) */
.feature-phone {
  display: flex;
  justify-content: center;
  position: relative;
}
.feature-phone::before {
  content: "";
  position: absolute;
  inset: 10% 10%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  filter: blur(90px);
  z-index: 0;
  contain: strict;
}
.phone-shell {
  position: relative;
  width: min(360px, 78%);
  aspect-ratio: 9 / 19.5;
  border-radius: clamp(36px, 4.8vw, 48px);
  overflow: hidden;
  background: #0a0a0c;
  z-index: 1;
  transition: transform var(--dur-3) var(--ease-soft);
  contain: paint;
}
.phone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.phone-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
@media (hover: hover) and (pointer: fine) {
  .feature-phone:hover .phone-shell { transform: translateY(-6px); }
}

/* ---------- Pills (context chips) ---------- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-24);
}
.pill {
  padding: clamp(8px, 1.2vw, 10px) clamp(13px, 2vw, 16px);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-size: clamp(0.82rem, 1.1vw, 0.94rem);
  color: var(--ink-1);
  font-weight: 500;
  letter-spacing: -0.005em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1);
}
.pill:hover { background: var(--surface-3); transform: translateY(-2px); }

/* ---------- Stats ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-16);
  margin-top: var(--s-24);
  padding: var(--s-24);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-num {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  line-height: 1;
}
.stat-num.ok { color: var(--ok); }
.stat-num.warn { color: var(--warn); }
.stat-label {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .stat-row { padding: var(--s-20) var(--s-16); gap: var(--s-12); }
  .stat-num { font-size: 1.5rem; }
  .pill { padding: 9px 14px; font-size: 0.86rem; }
}

/* ---------- Customize (dual phone stage) ---------- */
.feature-customize {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: var(--gutter-x);
  padding-bottom: var(--s-120);
}
.customize-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s-56);
}
.customize-head .label { text-align: center; }
.customize-head .body { margin-inline: auto; }
.customize-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-20);
  max-width: 920px;
  margin: 0 auto;
  padding: var(--s-56) 0;
  isolation: isolate;
}
.customize-bg {
  position: absolute;
  top: -8%;
  right: calc(50% - 50vw);
  bottom: -10%;
  left: calc(50% - 50vw);
  background:
    radial-gradient(ellipse at 28% 42%, rgba(252, 61, 79, 0.22) 0%, rgba(252, 61, 79, 0.04) 36%, transparent 68%),
    radial-gradient(ellipse at 72% 58%, rgba(91, 57, 214, 0.18) 0%, rgba(91, 57, 214, 0.04) 34%, transparent 70%),
    linear-gradient(180deg, rgba(18, 11, 16, 0.18) 0%, rgba(10, 10, 12, 0) 100%);
  filter: blur(84px);
  opacity: 0.88;
  z-index: 0;
}
.customize-phone { position: relative; z-index: 1; display: flex; justify-content: center; }
.customize-phone.left  .phone-shell { transform: rotate(-3deg) translateY(14px); }
.customize-phone.right .phone-shell { transform: rotate(3deg); }
.customize-phone.left:hover  .phone-shell { transform: rotate(-4deg) translateY(6px); }
.customize-phone.right:hover .phone-shell { transform: rotate(4deg) translateY(-8px); }
@media (max-width: 720px) {
  .customize-stage { grid-template-columns: 1fr; gap: var(--s-40); }
  .customize-bg {
    top: -4%;
    bottom: -6%;
  }
  .customize-phone.left .phone-shell,
  .customize-phone.right .phone-shell { transform: none; }
}

/* ---------- Positioning (competitive comparison) ---------- */
.positioning {
  padding: var(--s-56) 0;
  position: relative;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
.positioning-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s-40);
}
.positioning-head .body { margin-inline: auto; }
.positioning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-20);
  max-width: 760px;
  margin: 0 auto;
}
.positioning-col {
  padding: var(--s-32);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.positioning-title {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--s-20);
  color: var(--ink-4);
}
.positioning-title.accent { color: var(--accent-soft); }
.positioning-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.positioning-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.positioning-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(252, 61, 79, 0.1);
}
.positioning-list.dim li { color: var(--ink-3); }
.positioning-list.dim li::before { background: var(--ink-4); box-shadow: none; }
@media (max-width: 600px) {
  .positioning-grid { grid-template-columns: 1fr; }
  .positioning-col { padding: var(--s-24); }
}

/* ---------- Steps (how it works) ---------- */
.steps {
  padding: var(--s-56) 0;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.steps-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s-40);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-20);
  max-width: 840px;
  margin: 0 auto;
}
.step {
  padding: var(--s-32);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1px solid rgba(252, 61, 79, 0.18);
  color: var(--accent-soft);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: var(--s-16);
}
.step-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  color: var(--ink-1);
  margin: 0 0 var(--s-8);
  letter-spacing: -0.02em;
}
.step-body {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 600px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ---------- Maker note (within privacy card) ---------- */
.maker-note {
  position: relative;
  margin-top: var(--s-24);
  padding-top: var(--s-24);
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 620px;
}

/* ---------- Privacy ---------- */
.privacy {
  padding: var(--s-80) 0;
  display: flex;
  justify-content: center;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.privacy-card {
  position: relative;
  max-width: 860px;
  padding: clamp(40px, 5vw, 64px);
  border-radius: var(--r-32);
  background:
    linear-gradient(180deg, rgba(20, 20, 24, 0.72) 0%, rgba(12, 12, 14, 0.6) 100%);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  overflow: hidden;
}
.privacy-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(252, 61, 79, 0.12) 0%, transparent 40%);
  pointer-events: none;
}
.privacy-top {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin-bottom: var(--s-24);
  position: relative;
}
.privacy-top .label { margin: 0; }
.privacy-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--r-12);
  background: var(--accent-wash);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(252, 61, 79, 0.22);
}
.privacy-mark svg { width: 22px; height: 22px; }
.privacy-card .h-xl { position: relative; }
.privacy-card .body { position: relative; max-width: 620px; }

.privacy-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s-32) 0;
  background: var(--hairline);
  border-radius: var(--r-20);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
@media (max-width: 900px) {
  .privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.priv-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.priv-k {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.priv-v {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}
@media (max-width: 720px) {
  .privacy-grid { grid-template-columns: repeat(2, 1fr); }
}

.privacy-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 10px);
  min-height: 44px;
  padding: clamp(12px, 1.4vw, 14px) clamp(18px, 2.2vw, 22px);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-weight: 600;
  font-size: clamp(0.86rem, 0.82rem + 0.22vw, 0.9375rem);
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-spring);
}
.privacy-link svg {
  width: clamp(13px, 1vw, 14px);
  height: clamp(13px, 1vw, 14px);
  flex-shrink: 0;
}
.privacy-link:hover { background: var(--surface-3); transform: translateY(-2px); }

/* ---------- FAQ (progressive disclosure, native details) ---------- */
.faq {
  padding: var(--s-80) 0 var(--s-40);
  max-width: 820px;
  margin: 0 auto;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
.faq-head { margin-bottom: var(--s-40); }
.faq-head .h-xl { margin: 0; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.faq-item {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}
.faq-item[open] {
  background: var(--surface-2);
  border-color: var(--hairline-strong);
}
.faq-item:hover { border-color: var(--hairline-strong); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem);
  letter-spacing: -0.015em;
  color: var(--ink-1);
  line-height: 1.3;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ""; }
.faq-item summary > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: balance;
}
.faq-chev {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1), color var(--dur-1);
}
.faq-chev svg { width: 14px; height: 14px; }
.faq-item[open] .faq-chev {
  transform: rotate(180deg);
  background: var(--accent-wash);
  border-color: rgba(252, 61, 79, 0.32);
  color: var(--accent-soft);
}
.faq-item summary:hover .faq-chev { background: var(--surface-3); color: var(--ink-1); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: -2px;
  border-radius: var(--r-20);
}
.faq-body {
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
  color: var(--ink-2);
}
.faq-body p {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.62;
  max-width: 62ch;
}
/* Smooth disclosure where supported */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-2) var(--ease-soft), content-visibility var(--dur-2) allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (max-width: 560px) {
  .faq { padding: var(--s-56) 0 var(--s-24); }
  .faq-head { margin-bottom: var(--s-32); }
  .faq-item summary { padding: 16px 18px; gap: var(--s-12); }
  .faq-chev { width: 28px; height: 28px; }
  .faq-body { padding: 0 18px 18px; }
}

/* ---------- Download CTA ---------- */
.download {
  padding: var(--s-56) 0 var(--s-120);
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
.download-card {
  position: relative;
  padding: clamp(40px, 5vw, 72px);
  border-radius: var(--r-32);
  background:
    linear-gradient(180deg, rgba(28, 14, 18, 0.8) 0%, rgba(14, 10, 12, 0.7) 100%);
  border: 1px solid rgba(252, 61, 79, 0.16);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}
.download-glow {
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(252, 61, 79, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(91, 57, 214, 0.22) 0%, transparent 40%);
  filter: blur(60px);
  contain: strict;
}
.download-body {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.download-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.download-text .label { margin-bottom: var(--s-12); color: var(--accent-soft); }
.download-text .h-xl { margin: 0; }

/* QR code — desktop only */
.download-qr {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  padding-top: var(--s-32);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: var(--s-32);
}
.download-qr-code {
  position: relative;
  width: 180px;
  height: 180px;
}
.download-qr-code img:first-child {
  width: 100%;
  height: 100%;
}
.download-qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.download-qr-hint {
  font: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0;
}
.download-qr-enlarge {
  font: var(--t-label);
  letter-spacing: 0.02em;
  color: var(--ink-4);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-soft);
}
.download-qr-trigger {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.download-qr-trigger:hover .download-qr-enlarge,
.download-qr-trigger:focus-visible .download-qr-enlarge { opacity: 1; }
.download-qr-trigger:hover .download-qr-code,
.download-qr-trigger:focus-visible .download-qr-code {
  transform: scale(1.04);
}
.download-qr-code {
  transition: transform var(--dur-2) var(--ease-soft);
}
.download-qr-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: var(--r-16);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .download-qr { display: flex; }
}

/* ---------- QR Lightbox ---------- */
.qr-lightbox {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
}
.qr-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.qr-lightbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-20);
  padding: var(--s-40);
  background:
    linear-gradient(180deg, rgba(28, 14, 18, 0.92) 0%, rgba(14, 10, 12, 0.88) 100%);
  border: 1px solid rgba(252, 61, 79, 0.14);
  border-radius: var(--r-28);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.qr-lightbox-qr {
  position: relative;
  width: 320px;
  height: 320px;
}
.qr-lightbox-qr img:first-child { width: 100%; height: 100%; }
.qr-lightbox-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.qr-lightbox-hint {
  font: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.qr-lightbox-close {
  position: absolute;
  top: var(--s-16);
  right: var(--s-16);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft);
}
.qr-lightbox-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink-1); }
.qr-lightbox-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .download-body { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--s-24); }
  .download-text .body, .download-text .h-xl { text-align: center; }
  .download-card { padding: var(--s-32); }
  .download-body .btn { width: 100%; }
}
@media (max-width: 560px) {
  .download { padding: var(--s-40) 0 var(--s-56); }
  .download-card { border-radius: var(--r-28); padding: var(--s-24) var(--s-20); }
  .download-icon { width: 72px; height: 72px; border-radius: 18px; }
}

/* ---------- Footer ----------
   Edge-to-edge: the hairline border and background span the full
   viewport width. `.footer-inner` constrains the content column to
   the same 1240px as the rest of the site. Bottom padding includes
   the iPhone home-indicator safe area. */
.footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: var(--s-56);
  padding-top: var(--s-56);
  padding-right: var(--gutter-x);
  padding-bottom: calc(var(--s-40) + var(--safe-bottom));
  padding-left: var(--gutter-x);
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, transparent 0%, rgba(6, 6, 8, 0.6) 100%);
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: var(--s-24) var(--s-32);
  flex-wrap: wrap;
  margin-bottom: var(--s-40);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.footer-brand img { border-radius: 7px; }
.footer-links {
  display: flex;
  gap: var(--s-20) var(--s-24);
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--ink-2);
  flex-wrap: wrap;
}
.footer-links a { transition: color var(--dur-1); font-weight: 500; }
.footer-links a:hover { color: var(--ink-1); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-12) var(--s-20);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
  letter-spacing: 0.02em;
  padding-top: var(--s-32);
  border-top: 1px solid var(--hairline);
}
.footer-bottom p { margin: 0; }
#app-version {
  min-inline-size: 7ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .footer {
    padding-top: var(--s-40);
    padding-bottom: calc(var(--s-32) + var(--safe-bottom));
    margin-top: var(--s-40);
  }
  .footer-top { margin-bottom: var(--s-32); }
  .footer-links { margin-left: 0; width: 100%; gap: var(--s-16) var(--s-20); }
  .footer-bottom { padding-top: var(--s-24); }
}

/* ---------- Reveal animations ---------- */
.reveal,
.reveal-stage {
  opacity: 0;
  transition:
    opacity var(--dur-3) var(--ease-soft),
    transform var(--dur-3) var(--ease-soft);
}
.reveal {
  transform: translate3d(0, 18px, 0);
}
.reveal-stage {
  transform: translate3d(0, 22px, 0) scale(0.992);
}
.reveal.in,
.reveal-stage.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger */
.reveal:nth-of-type(1) { transition-delay: 0ms; }
.reveal:nth-of-type(2) { transition-delay: 60ms; }
.reveal:nth-of-type(3) { transition-delay: 120ms; }
.reveal:nth-of-type(4) { transition-delay: 180ms; }
.reveal:nth-of-type(5) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-stage { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   CROSS-DOCUMENT VIEW TRANSITIONS — morph between pages
   Works with a regular <a href>; no SPA framework.
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* Shared elements morph rather than crossfade */
.ambient { view-transition-name: ambient; }
.footer  { view-transition-name: footer; }

/* The old page slides up slightly while fading, new page slides in */
::view-transition-old(root) {
  animation: vt-out 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vt-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.995); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(10px) scale(1.005); }
}
/* Persistent elements — smoother, tighter morph */
::view-transition-old(nav),
::view-transition-new(nav),
::view-transition-old(footer),
::view-transition-new(footer),
::view-transition-old(ambient),
::view-transition-new(ambient) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ============================================================
   LEGAL PAGE (privacy, terms)
   ============================================================ */
.legal {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding-top: clamp(48px, 7vw, 100px);
  padding-right: var(--gutter-x);
  padding-bottom: var(--s-80);
  padding-left: var(--gutter-x);
}
@media (max-width: 720px) {
  .legal { padding-top: var(--s-40); padding-bottom: var(--s-56); }
  .legal-hero { margin-bottom: var(--s-40); }
  .legal-article h2 { scroll-margin-top: 140px; }
}
.legal-hero {
  max-width: 820px;
  margin-bottom: var(--s-56);
}
.legal-hero .eyebrow { margin-bottom: var(--s-24); }
.legal-hero h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-20);
}
.legal-hero .legal-meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 96px;
  padding: var(--s-20);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (max-width: 960px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--s-32); }
  .legal-toc  { position: static; }
}
.legal-toc h2 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 var(--s-16);
  padding: 0 12px;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.legal-toc a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-12);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.35;
  transition: background var(--dur-1) var(--ease-soft), color var(--dur-1);
  position: relative;
}
.legal-toc a:hover { color: var(--ink-1); background: var(--surface-2); }
.legal-toc a.active {
  color: var(--ink-1);
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.legal-toc a:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: var(--r-12);
}

.legal-article {
  max-width: min(100%, 68ch);
}
.legal-article section {
  padding-top: var(--s-40);
  padding-bottom: var(--s-40);
  border-bottom: 1px solid var(--hairline);
}
.legal-article section:first-child { padding-top: 0; }
.legal-article section:last-child  { border-bottom: 0; }

.legal-article h2 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink-1);
  margin: 0 0 var(--s-16);
  scroll-margin-top: 100px;
}
.legal-article h3 {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: var(--s-24) 0 var(--s-12);
}
.legal-article p {
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.68;
  margin: 0 0 var(--s-16);
}
.legal-article p strong { color: var(--ink-1); font-weight: 600; }
.legal-article a {
  color: var(--accent-soft);
  border-bottom: 1px solid rgba(255, 107, 125, 0.72);
  text-underline-offset: 2px;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.legal-article a:hover {
  color: #fff;
  border-bottom-color: var(--accent);
  background: rgba(252, 61, 79, 0.08);
}
.legal-article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-20);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-article li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.6;
}
.legal-article li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(252, 61, 79, 0.14);
}
.legal-article code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  padding: 2px 7px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}

.summary-box {
  padding: var(--s-24);
  margin: var(--s-24) 0;
  background: linear-gradient(180deg, rgba(252, 61, 79, 0.08) 0%, rgba(252, 61, 79, 0.02) 100%);
  border: 1px solid rgba(252, 61, 79, 0.2);
  border-radius: var(--r-20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.summary-box h3 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
  margin: 0 0 var(--s-12);
}
.summary-box ul { margin: 0; }

.permissions-table-wrap {
  margin: var(--s-20) 0;
  padding: 2px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-20);
  overflow-x: auto;
}
.permissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 480px;
}
@media (max-width: 540px) {
  .permissions-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .permissions-table { min-width: 440px; font-size: 0.86rem; }
  .permissions-table thead th,
  .permissions-table td { padding: 12px 14px; }
}
.permissions-table thead th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
}
.permissions-table td {
  padding: 16px 18px;
  color: var(--ink-2);
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.permissions-table tr:last-child td { border-bottom: 0; }
.permissions-table td strong { color: var(--ink-1); }
.permissions-table td:last-child {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-footnote {
  margin-top: var(--s-40);
  padding: var(--s-24);
  border-radius: var(--r-20);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.legal-footnote p {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0;
}
.legal-footnote strong { color: var(--ink-1); }

/* ============================================================
   GIVEAWAY PAGE
   ============================================================ */
.giveaway {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto;
  padding-top: clamp(40px, 6vw, 72px);
  padding-right: max(var(--gutter-x), 16px);
  padding-bottom: var(--s-56);
  padding-left: max(var(--gutter-x), 16px);
}
.promo-card {
  position: relative;
  min-height: clamp(520px, 70vh, 680px);
  padding: clamp(28px, 5vw, 44px);
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.82) 0%, rgba(14, 14, 16, 0.7) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-32);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  overflow: hidden;
  text-align: center;
}
@media (max-width: 480px) {
  .promo-card { border-radius: var(--r-28); padding: var(--s-24) var(--s-20); }
  .promo-logo { width: 72px; height: 72px; border-radius: 18px; margin-bottom: var(--s-20); }
  .bundle-card { padding: var(--s-20); }
  .promo-subtitle { margin-bottom: var(--s-24); }
  .promo-badge { font-size: 0.68rem; padding: 7px 13px 7px 12px; }
}
@media (max-width: 380px) {
  .promo-card { border-radius: var(--r-24); padding: var(--s-20) var(--s-16); }
  .promo-title { font-size: clamp(1.6rem, 8vw, 2rem); }
  .bundle-card { padding: var(--s-16); }
  .bundle-header { flex-wrap: wrap; gap: 4px; }
}
.promo-card::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 10%, rgba(252, 61, 79, 0.22) 0%, transparent 45%);
  pointer-events: none;
}
.promo-logo {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  margin: 0 auto var(--s-24);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.promo-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  margin: 0 auto var(--s-20);
  border-radius: var(--r-pill);
  background: rgba(252, 61, 79, 0.12);
  border: 1px solid rgba(252, 61, 79, 0.28);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.promo-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(252, 61, 79, 0.16);
  animation: pulse 2.4s ease-in-out infinite;
}
.promo-title {
  position: relative;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-16);
}
.promo-subtitle {
  position: relative;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.55;
  margin: 0 0 var(--s-32);
}

.bundle-card {
  position: relative;
  padding: var(--s-24);
  margin-bottom: var(--s-24);
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bundle-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-16);
}
.bundle-name {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0;
}
.bundle-price {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-3);
  text-decoration: line-through;
}
.bundle-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bundle-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.feature-check {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(91, 214, 122, 0.14);
  border: 1px solid rgba(91, 214, 122, 0.3);
  flex-shrink: 0;
}
.feature-check svg { width: 12px; height: 12px; }
.bundle-note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: var(--s-12);
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.codes-remaining {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 auto var(--s-16);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  width: fit-content;
}
.remaining-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(91, 214, 122, 0.2);
}
.codes-remaining.low .remaining-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.22); }
.codes-remaining.critical .remaining-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(252, 61, 79, 0.22); }

/* Primary claim + redeem — full-width, red gradient */
.claim-btn,
.redeem-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 10px);
  width: 100%;
  min-height: 48px;
  padding: clamp(13px, 1.6vw, 16px) clamp(18px, 2.4vw, 24px);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(0.92rem, 0.86rem + 0.32vw, 1.0625rem);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff5566 0%, var(--accent) 100%);
  color: #fff;
  transition: transform var(--dur-1) var(--ease-spring);
  cursor: pointer;
  text-decoration: none;
}
.claim-btn::after,
.redeem-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.claim-btn:hover:not(:disabled),
.redeem-btn:hover { transform: translateY(-2px); }
.claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secondary — smaller ghost capsule for "View on App Store" + "Try again" */
.store-link,
.retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 8px);
  min-height: 44px;
  padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2vw, 22px);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(0.86rem, 0.82rem + 0.22vw, 0.9375rem);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink-1);
  max-width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-spring), border-color var(--dur-1);
  cursor: pointer;
  text-decoration: none;
  width: auto;
}
.store-link svg,
.retry-btn svg {
  width: clamp(13px, 1vw, 14px);
  height: clamp(13px, 1vw, 14px);
  flex-shrink: 0;
  opacity: 0.7;
}
.store-link:hover,
.retry-btn:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
  transform: translateY(-1px);
}
.turnstile-wrap { display: flex; justify-content: center; margin-bottom: var(--s-16); }
.turnstile-wrap:empty { display: none; }

.state-panel { display: none; position: relative; }
.state-panel.active { display: block; animation: state-fade 520ms var(--ease-soft); }
html:not(.js) #state-loading { display: none; }
html:not(.js) #state-claim { display: block; }
@keyframes state-fade {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); filter: blur(12px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
}
.spinner {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: var(--s-24) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 50% 52%, rgba(252, 61, 79, 0.24) 0%, rgba(252, 61, 79, 0.08) 58%, rgba(252, 61, 79, 0) 72%);
  border: 1px solid rgba(252, 61, 79, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.spinner::before {
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
  animation: spinner-breathe 1.7s var(--ease-spring) infinite alternate;
}
.spinner::after {
  inset: 14px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 40%), rgba(252, 61, 79, 0.32);
  filter: blur(0.4px);
  animation: spinner-drift 1.45s var(--ease-soft) infinite alternate;
}
@keyframes spinner-breathe {
  from { transform: scale(0.9); opacity: 0.55; }
  to { transform: scale(1.08); opacity: 1; }
}
@keyframes spinner-drift {
  from { transform: translate3d(-4px, -5px, 0) scale(0.94); opacity: 0.76; }
  to { transform: translate3d(6px, 6px, 0) scale(1.08); opacity: 1; }
}
.loading-panel {
  display: grid;
  justify-items: center;
  gap: var(--s-20);
}
.loading-kicker {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.loading-shell {
  width: 100%;
  display: grid;
  gap: var(--s-16);
  margin-top: var(--s-8);
  padding: var(--s-24);
  border-radius: var(--r-24);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.loading-shell-row,
.loading-shell-pill {
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0.04) 100%);
  background-size: 220% 100%;
  animation: shimmer 1.7s var(--ease-soft) infinite;
}
.loading-shell-pill {
  width: 140px;
  height: 32px;
}
.loading-shell-row { height: 13px; }
.loading-shell-row.long { width: 100%; }
.loading-shell-row.mid { width: 74%; }
.loading-shell-row.short { width: 46%; }
.loading-shell-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@keyframes shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(91, 214, 122, 0.25), rgba(91, 214, 122, 0.08));
  border: 1px solid rgba(91, 214, 122, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-24);
  color: var(--ok);
}
.success-icon svg { width: 32px; height: 32px; }
.success-title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0 0 var(--s-16);
}
.success-body, .state-body {
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.55;
  margin: 0 0 var(--s-24);
}
.device-note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s-16);
}
.state-icon {
  font-size: 48px;
  margin-bottom: var(--s-20);
}
.state-title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0 0 var(--s-16);
}
.noscript-msg {
  max-width: 520px;
  margin: var(--s-40) auto;
  padding: var(--s-24);
  background: rgba(252, 61, 79, 0.12);
  border: 1px solid rgba(252, 61, 79, 0.28);
  border-radius: var(--r-20);
  text-align: center;
  color: var(--accent-soft);
}

/* Confetti */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: 50%;
  opacity: 0.9;
  animation: confetti-fly 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* ============================================================
   SUPPORT PAGE — privacy-first report form
   ============================================================ */
.support {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: clamp(48px, 7vw, 96px);
  padding-right: var(--gutter-x);
  padding-bottom: var(--s-80);
  padding-left: var(--gutter-x);
}
.support-hero {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.support-hero .eyebrow { margin-bottom: var(--s-24); }
.support-hero h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-20);
  color: var(--ink-1);
  text-wrap: balance;
}
.support-hero .lede { margin: 0; max-width: 56ch; }

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 340px);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) {
  .support-grid { grid-template-columns: 1fr; gap: var(--s-40); }
}

/* Form shell */
.support-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(20, 20, 24, 0.7) 0%, rgba(12, 12, 14, 0.55) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-28);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.support-form .field { display: flex; flex-direction: column; gap: 8px; }
.support-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
}
@media (max-width: 540px) {
  .support-form .field-row { grid-template-columns: 1fr; }
}
.support-form .field-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.support-form .field-legend {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin: 0 0 var(--s-12);
  padding: 0;
}
.support-form label {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-1);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.support-form label .optional {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.support-form .hint {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.45;
}

/* Inputs + textareas */
.support-form input[type="text"],
.support-form input[type="email"],
.support-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--t-md);
  color: var(--ink-1);
  background: var(--bg-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-12);
  padding: 12px 14px;
  line-height: 1.5;
  transition: border-color var(--dur-1) var(--ease-soft), background var(--dur-1), box-shadow var(--dur-1);
  appearance: none;
  -webkit-appearance: none;
}
.support-form textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--f-body);
}
.support-form input::placeholder,
.support-form textarea::placeholder { color: var(--ink-4); }
.support-form input:hover,
.support-form textarea:hover {
  border-color: var(--hairline-strong);
}
.support-form input:focus-visible,
.support-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(252, 61, 79, 0.22);
  background: var(--bg-raised);
}
.support-form input:disabled,
.support-form textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* Radio chips — accessible, touch-friendly */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.radio-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.radio-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--dur-1) var(--ease-soft), border-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-spring);
}
.radio-chip:hover span { background: var(--surface-2); color: var(--ink-1); }
.radio-chip input:checked + span {
  background: var(--accent-wash);
  border-color: rgba(252, 61, 79, 0.42);
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px rgba(252, 61, 79, 0.28);
}
.radio-chip input:focus-visible + span {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

/* Checkbox (reply opt-in) */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-16);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.5;
  transition: background var(--dur-1), border-color var(--dur-1);
}
.checkbox-row:hover { background: var(--surface-2); border-color: var(--hairline-strong); }
.checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border-radius: 5px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--bg-sunken);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-1), border-color var(--dur-1);
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.checkbox-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}
.checkbox-row .muted {
  color: var(--ink-3);
  font-weight: 400;
}
.reply-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.reply-email-field { margin-top: var(--s-8); }

/* Collapsible field wrapper — animated show/hide on type switch */
.field-collapsible {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--dur-2) var(--ease-soft),
    opacity           var(--dur-2) var(--ease-soft),
    margin-bottom     var(--dur-2) var(--ease-soft);
  will-change: grid-template-rows, opacity;
}
.field-collapsible[data-collapsed] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  margin-bottom: calc(var(--s-24) * -1);
}
.field-collapsible-inner {
  overflow: hidden;
}

/* Disclaimer */
.support-disclaimer {
  padding: var(--s-20);
  border-radius: var(--r-16);
  background: rgba(252, 61, 79, 0.05);
  border: 1px solid rgba(252, 61, 79, 0.18);
}
.support-disclaimer p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.support-disclaimer strong { color: var(--ink-1); }
.support-disclaimer a {
  color: var(--accent-soft);
  border-bottom: 1px solid rgba(255, 107, 125, 0.6);
  text-underline-offset: 2px;
}
.support-disclaimer a:hover { color: #fff; border-bottom-color: var(--accent); }

/* Actions */
.form-actions {
  display: flex;
  gap: var(--s-12);
  flex-wrap: wrap;
  align-items: center;
}
.form-actions .btn { flex: 0 0 auto; }
@media (max-width: 540px) {
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}

/* State panels */
.support-state {
  padding: var(--s-32);
  border-radius: var(--r-24);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  text-align: center;
}
.support-state h2 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0 0 var(--s-12);
}
.support-state p {
  color: var(--ink-2);
  margin: 0 0 var(--s-20);
  line-height: 1.55;
}
.support-state .form-actions { justify-content: center; }
.support-state .spinner { margin: 0 auto var(--s-16); }
.support-state.success {
  background: linear-gradient(180deg, rgba(91, 214, 122, 0.08) 0%, rgba(91, 214, 122, 0.02) 100%);
  border-color: rgba(91, 214, 122, 0.28);
}
.support-state.error {
  background: linear-gradient(180deg, rgba(252, 61, 79, 0.08) 0%, rgba(252, 61, 79, 0.02) 100%);
  border-color: rgba(252, 61, 79, 0.28);
}

/* Sidebar — privacy explainers */
.support-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  position: sticky;
  top: 96px;
}
@media (max-width: 960px) {
  .support-side { position: static; }
}
.priv-box {
  padding: var(--s-20);
  border-radius: var(--r-20);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.priv-box .label { margin: 0 0 var(--s-12); }
.priv-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.priv-box li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.priv-box li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(252, 61, 79, 0.14);
}
.priv-box strong { color: var(--ink-1); font-weight: 600; }
.priv-box code {
  font-family: var(--f-mono);
  font-size: 0.82em;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  color: var(--ink-1);
}
.priv-box a {
  color: var(--accent-soft);
  border-bottom: 1px solid rgba(255, 107, 125, 0.6);
}
.priv-box a:hover { color: #fff; border-bottom-color: var(--accent); }
.priv-box-foot { margin: var(--s-12) 0 0; }
.priv-box.muted-box p {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0;
}
.priv-box.muted-box p + p { margin-top: 8px; }

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent-soft);
  font: inherit;
  font-weight: 600;
  font-size: var(--t-sm);
  border-bottom: 1px solid rgba(255, 107, 125, 0.5);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.inline-link:hover { color: #fff; border-bottom-color: var(--accent); }

/* Preview dialog (payload inspector) */
.preview-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-20);
}
.preview-dialog[hidden] { display: none; }
.preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.preview-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: var(--s-32);
  background: var(--bg-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}
.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-16);
}
.preview-head h2 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.2;
}
.preview-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink-1);
  cursor: pointer;
  transition: background var(--dur-1);
}
.preview-close:hover { background: var(--surface-3); }
.preview-close svg { width: 14px; height: 14px; }
.preview-note {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.55;
}
.preview-body {
  margin: 0;
  padding: var(--s-16);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-1);
  background: var(--bg-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-12);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40vh;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.notfound {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100dvh - 180px);
  padding: var(--s-56) var(--gutter-x);
  max-width: 640px;
  margin: 0 auto;
}
.notfound-code {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #ffffff 0%, #ff8a97 45%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 var(--s-16);
}
.notfound h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  margin: 0 0 var(--s-16);
}
.notfound p {
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.62;
  max-width: 48ch;
  margin: 0 auto var(--s-32);
}
.notfound-actions {
  display: flex;
  gap: var(--s-12);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE FINE-TUNING — catches every edge case
   ============================================================ */

/* Very small phones (iPhone SE 1st gen, 320px) */
@media (max-width: 360px) {
  :root {
    --s-80: 56px;
    --s-120: 80px;
  }
  .hero { padding-top: var(--s-24); padding-bottom: var(--s-40); }
  .hero-stage { min-height: 360px; }
  .feature-copy, .legal-article { font-size: 0.98rem; }
  .bullet-list li { font-size: 0.95rem; }
  .priv-v { font-size: 1rem; }
  .legal-toc { padding: var(--s-16); }
  .phone-back  { width: 58%; }
  .phone-front { width: 66%; }
}

/* Medium phones (default mobile) */
@media (max-width: 520px) {
  .nav-brand img { width: 28px; height: 28px; }
  .display { letter-spacing: -0.035em; line-height: 0.98; }
  .phone-shell { width: min(280px, 82%); border-radius: 38px; }
  .feature-phone::before { inset: 15% 15%; }
  .hero-stage { aspect-ratio: 0.82 / 1; }
  .hero-meta { font-size: 0.8rem; }
  .hero-meta .meta-k { font-size: 0.85rem; }
  .hero-meta .meta-v { font-size: 0.72rem; }
}

/* Tablet portrait (iPad) */
@media (min-width: 720px) and (max-width: 1024px) {
  .feature-frame { gap: var(--s-32); }
  .phone-shell { width: min(320px, 76%); }
  .legal-toc { padding: var(--s-16); }
  .legal-toc h2 { font-size: 0.68rem; }
  .legal-toc a { font-size: 0.86rem; padding: 8px 10px; }
}

/* Ultra-wide desktop (1600+) */
@media (min-width: 1600px) {
  :root { --s-120: 140px; }
  .hero { min-height: min(940px, 86vh); }
}

/* Landscape phone (height-constrained) */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: var(--s-40); padding-bottom: var(--s-40); }
  .nav { padding-top: 8px; padding-bottom: 8px; }
}

/* Pointer-coarse (touch) — bigger hit targets */
@media (pointer: coarse) {
  .nav-links a { min-height: 40px; display: inline-flex; align-items: center; }
  .btn, .claim-btn, .redeem-btn, .store-link, .retry-btn, .privacy-link, .nav-cta {
    min-height: 44px;
  }
  .legal-toc a { min-height: 40px; display: flex; align-items: center; }
  .footer-links a { padding: 6px 0; display: inline-block; }
}

/* Hover-capable devices only — don't waste hover transforms on touch */
@media (hover: none) {
  .btn:hover, .claim-btn:hover, .redeem-btn:hover, .store-link:hover,
  .retry-btn:hover, .privacy-link:hover, .pill:hover,
  .feature-phone:hover .phone-shell,
  .customize-phone.left:hover .phone-shell,
  .customize-phone.right:hover .phone-shell,
  .hero-stage:hover .phone-back, .hero-stage:hover .phone-front {
    transform: none;
  }
}

/* ---------- Reviews page ---------- */
.reviews-page {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: clamp(48px, 7vw, 96px);
  padding-right: var(--gutter-x);
  padding-bottom: var(--s-80);
  padding-left: var(--gutter-x);
}
.reviews-hero {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.reviews-hero .eyebrow { margin-bottom: var(--s-24); }
.reviews-hero h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-20);
  color: var(--ink-1);
  text-wrap: balance;
}
.reviews-hero .lede { margin: 0; max-width: 56ch; }
.reviews-rating-card {
  display: grid;
  align-items: center;
  text-align: center;
  min-height: 318px;
  padding: clamp(32px, 5vw, 56px);
  background:
    linear-gradient(180deg, rgba(20, 20, 24, 0.72) 0%, rgba(12, 12, 14, 0.6) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-32);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  max-width: 480px;
  margin: 0 auto var(--s-80);
  position: relative;
  overflow: hidden;
}
.reviews-rating-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 30%, rgba(252, 61, 79, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.reviews-rating-live {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  transition:
    opacity var(--dur-2) var(--ease-soft),
    transform var(--dur-2) var(--ease-soft),
    filter var(--dur-2) var(--ease-soft);
}
.reviews-rating-shell {
  grid-area: 1 / 1;
  display: none;
  position: relative;
  width: 100%;
  justify-items: center;
  gap: var(--s-16);
}
.reviews-rating-shell .loading-shell {
  margin-top: 0;
  max-width: 260px;
  justify-items: center;
}
.reviews-rating-shell .spinner {
  margin-top: 0;
  margin-bottom: 0;
}
html.js .reviews-rating-card[data-async-state="loading"] .reviews-rating-shell {
  display: grid;
}
html.js .reviews-rating-card[data-async-state="loading"] .reviews-rating-live {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0) scale(0.985);
  filter: blur(10px);
}
.reviews-score-number {
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 8vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-1);
  position: relative;
}
.reviews-score-label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-top: var(--s-8);
  position: relative;
}
.reviews-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: var(--s-20) 0;
  position: relative;
}
.reviews-star {
  width: 22px;
  height: 22px;
  fill: var(--surface-3);
  transition: fill var(--dur-1) var(--ease-soft);
}
.reviews-star.filled { fill: var(--accent); }
.reviews-count {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0 0 var(--s-24);
  position: relative;
}
.reviews-rating-card[data-async-state="ready"] .reviews-rating-live {
  opacity: 1;
  visibility: visible;
}
.reviews-section-head {
  margin-bottom: var(--s-32);
}
.reviews-section-head .label { margin-bottom: var(--s-12); }
.reviews-section-head .h-xl { margin: 0; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-20);
  margin-bottom: var(--s-80);
}
.review-card {
  padding: var(--s-24);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.review-card-stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s-12);
}
.review-card-stars svg {
  width: 14px;
  height: 14px;
  fill: var(--accent);
}
.review-card-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink-1);
  margin: 0 0 var(--s-8);
  letter-spacing: -0.02em;
}
.review-card-body {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 var(--s-12);
}
.review-card-author {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.reviews-empty {
  text-align: center;
  padding: var(--s-56) var(--s-24);
  color: var(--ink-3);
  font-size: var(--t-md);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto var(--s-80);
}
.reviews-empty p { margin: 0 0 var(--s-24); }
.reviews-cta {
  text-align: center;
  padding: var(--s-56) var(--s-24);
  max-width: 560px;
  margin: 0 auto;
}
.reviews-cta .h-xl { margin-bottom: var(--s-12); }
.reviews-cta .body {
  margin: 0 auto var(--s-24);
  text-align: center;
}
@media (max-width: 720px) {
  .reviews-hero h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* Forced-colors mode (Windows high contrast) */
@media (forced-colors: active) {
  .btn, .nav-cta, .claim-btn, .redeem-btn {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  .ambient, .ambient-warm, .ambient-cool, .ambient-grain,
  .stage-glow, .download-glow, .customize-bg { display: none; }
  .phone, .phone-shell, .promo-card, .privacy-card, .download-card, .legal-toc,
  .reviews-rating-card, .review-card {
    border: 1px solid CanvasText;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  :root { --bg: #fff; --ink-1: #111; --ink-2: #333; --ink-3: #555; }
  body { background: #fff; color: #111; }
  .ambient, .nav, .footer, .skip-nav, .hero-stage, .feature-phone,
  .customize-stage, .download, .promo-card, .giveaway, .stage-glow,
  .download-glow, .customize-bg { display: none !important; }
  .site, .legal { max-width: 100%; padding: 0; }
  .display, .h-xl, .legal-article h2, .legal-article h3 { color: #111; }
  .body, .legal-article p, .legal-article li { color: #333; }
  .summary-box { border: 1px solid #999; background: #fafafa; color: #111; }
  .legal-article a { color: #0366d6; text-decoration: underline; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
  .legal-article section { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}