/* ==========================================================================
   HangTing — Dusk design system
   Dusk palette (violet -> magenta -> ember), Fraunces display + Inter body
   ========================================================================== */

:root{
  /* Dusk, 2026-09-14. Mirrors src/theme.ts in the app — see the note at the
     top of that file for why the old coral brand had to go (it sat 27 RGB
     units from Tinder's #FF7854). spark = dating mode, volt = hangout mode
     AND the brand hue itself. */
  --spark-500:#F04E37; --spark-400:#FF7A5B; --spark-100:#FFE9E2;
  --volt-500:#6A35F0; --volt-400:#8A5FFF; --volt-100:#EDE6FF;
  --gold:#F5B841;

  --ink-950:#131118; --ink-900:#1C1923; --ink-700:#3A3444;
  --ink-500:#6E6678; --ink-300:#B9B2C2; --ink-100:#EAE6EF; --ink-50:#FAF7F2;

  --success:#0E9E78; --warning:#F5B841; --danger:#E5484D; --info:#3E7BFA;

  --surface:#FFFFFF; --surface-alt:#F5F0E8; --bg:#FAF7F2;

  --overlay-10:rgba(19,17,24,.10);
  --overlay-30:rgba(19,17,24,.30);
  --overlay-60:rgba(19,17,24,.60);

  --grad-spark: linear-gradient(135deg, #F04E37, #FF8A5B);
  --grad-volt: linear-gradient(135deg, #5A28E0, #8A5FFF);
  --grad-spark-soft: linear-gradient(135deg, rgba(240,78,55,.16), rgba(255,138,91,.10));
  --grad-volt-soft: linear-gradient(135deg, rgba(106,53,240,.16), rgba(138,95,255,.10));
  /* The signature. Violet through magenta into ember — the sky at the hour
     people decide to go out. Decorative only: it never carries a label. */
  --grad-dusk: linear-gradient(135deg, #6A35F0, #C13AA8 55%, #F04E37);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-full:999px;

  --shadow-sm: 0 1px 4px rgba(19,17,24,.07);
  --shadow-md: 0 3px 10px rgba(19,17,24,.10);
  --shadow-lg: 0 6px 18px rgba(19,17,24,.13);
  --shadow-glow-spark: 0 8px 30px rgba(255,77,109,.28);
  --shadow-glow-volt: 0 8px 30px rgba(108,77,246,.28);

  --text: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --bg-page: var(--ink-50);
  --bg-surface: var(--surface);
  --border-color: var(--ink-100);

  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --text: var(--ink-50);
    --text-secondary: #D8D3E0;
    --text-muted: var(--ink-300);
    --bg-page: var(--ink-950);
    --bg-surface: var(--ink-900);
    --border-color: var(--ink-700);
    --surface-alt:#241F2C;
    color-scheme: dark;
  }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
p{ margin: 0 0 1em; color: var(--text-secondary); }
ul{ margin:0; padding:0; }
button{ font-family: inherit; }

.container{ width:100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.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;
}

/* Visible focus states everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2.5px solid var(--volt-500); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Grain overlay (subtle, decorative, GPU-cheap) ---------- */
.grain{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-header{ position: sticky; top:0; z-index: 100; }
main, .site-footer{ position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: var(--radius-full);
  font-weight:600; font-size:15px; border:2px solid transparent; cursor:pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap; position: relative;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{ background: var(--grad-spark); color:#fff; box-shadow: var(--shadow-md); }
.btn-primary:hover{ box-shadow: var(--shadow-glow-spark); transform: translateY(-2px); }
.btn-secondary{ background: transparent; border-color: var(--ink-300); color: var(--text); }
.btn-secondary:hover{ border-color: var(--volt-500); color: var(--volt-500); transform: translateY(-2px); }
.btn-ghost{ background: var(--ink-100); color: var(--text); }
.btn-ghost:hover{ background: var(--ink-300); }
.btn-sm{ padding: 10px 18px; font-size: 14px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.65; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  display:none; animation: spin .7s linear infinite;
}
.btn.is-loading .btn-spinner{ display:inline-block; }
.btn.is-loading .btn-label{ opacity:.85; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Header ---------- */
.site-header{
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  background: color-mix(in srgb, var(--bg-page) 72%, transparent);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow .25s ease, background .25s ease;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; gap: 16px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:600; font-size:20px; flex-shrink:0; }
.brand svg{ flex-shrink:0; }
.nav-links{ display:none; gap: 24px; align-items:center; list-style:none; }
.nav-links a{ font-size:14.5px; font-weight:600; color: var(--text-secondary); transition: color .15s ease; white-space:nowrap; }
.nav-links a:hover{ color: var(--spark-500); }
.nav-cta{ display:none; align-items:center; gap:12px; flex-shrink:0; }
.nav-toggle{ display:flex; background:none; border:none; padding:8px; cursor:pointer; color:var(--text); }
.mobile-menu{
  display:none; flex-direction:column; gap:2px; padding: 8px 24px 20px; border-top:1px solid var(--border-color);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding: 12px 4px; font-weight:600; color:var(--text-secondary); border-bottom:1px solid var(--border-color); }
.mobile-menu .btn{ margin-top:12px; }

/* Desktop nav turns on at 1200px, not 1000px (fixed 2026-09-18).
   MEASURED BUG: the horizontal nav needs 1271px for its ten links plus the
   CTA, but it switched on at 1000px. Between those two numbers the nav
   overflowed its container and pushed the WHOLE PAGE into horizontal scroll —
   247px of sideways scroll at 1024px wide, with "Get early access", the
   primary conversion CTA, clipped off the right edge. That band covers
   standard 1280x800 laptops and landscape tablets, and horizontal scroll is
   also a page-experience negative in Search Console.
   Below 1200px the hamburger takes over, which already worked. */
@media (min-width: 1200px){
  .nav-links{ display:flex; }
  .nav-cta{ display:flex; }
  .nav-toggle{ display:none; }
}

/* The nav is widest right at its own breakpoint, so tighten spacing through
   the band where it only just fits. Full spacing returns above 1400px. */
@media (min-width: 1200px) and (max-width: 1399.98px){
  .nav{ padding-left: 16px; padding-right: 16px; gap: 12px; }
  .nav-links{ gap: 16px; }
  .nav-links a{ font-size: 13.5px; }
  .nav-cta{ gap: 8px; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative; overflow: clip;
  padding: 60px 0 60px;
}
.hero-parallax{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-parallax .blob{
  position:absolute; border-radius:50%; filter: blur(50px); opacity:.55;
  will-change: transform;
}
.blob-spark{ width:46vw; height:46vw; max-width:560px; max-height:560px; top:-14%; left:-10%; background: radial-gradient(circle, var(--spark-100), transparent 70%); }
.blob-volt{ width:40vw; height:40vw; max-width:480px; max-height:480px; top:-6%; right:-12%; background: radial-gradient(circle, var(--volt-100), transparent 70%); }
.blob-gold{ width:34vw; height:34vw; max-width:420px; max-height:420px; bottom:-16%; left:32%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 55%, transparent), transparent 70%); }

.hero-grid{ display:grid; gap: 48px; align-items:center; }
@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1fr 1fr; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--bg-surface); border:1px solid var(--border-color);
  padding: 6px 14px; border-radius: var(--radius-full); font-size:13px; font-weight:700;
  letter-spacing:.02em; color: var(--text-secondary); box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background: var(--grad-spark); animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.3);} }
.hero h1{ font-size: clamp(2.4rem, 5.5vw, 3.7rem); letter-spacing:-.02em; margin-bottom:.3em; }
.hero h1 .accent{ background: var(--grad-spark); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede{ font-size: 18px; max-width: 46ch; margin-bottom: 28px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 28px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color: var(--text-muted); font-weight:600; }
.hero-meta span{ display:inline-flex; align-items:center; gap:6px; }

/* ---------- Phone mockup (shared: hero + scrollytelling) ---------- */
.hero-visual{ position:relative; display:flex; justify-content:center; min-height: 480px; }
.phone{
  width: 280px; height: 572px; border-radius: 42px; background: var(--ink-950);
  padding: 14px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.2);
  position: relative; z-index: 2;
  animation: floatY 6s ease-in-out infinite;
}
/* The hero phone floats; the "How it works" story phone must not — floatY's
   transform fights position:sticky and makes the screen hard to read while
   scrolling. Scoped to #phone-story only, hero keeps the float. */
#phone-story{ animation: none; }
@keyframes floatY{ 0%,100%{ transform: translateY(0px) rotate(-2deg); } 50%{ transform: translateY(-14px) rotate(0deg); } }
.phone-screen{
  width:100%; height:100%; background: var(--ink-50); border-radius: 30px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
.phone-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:var(--ink-950); border-radius:0 0 14px 14px; z-index:5; }
.phone-topbar{ padding: 30px 16px 8px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.phone-topbar strong{ font-family:var(--font-display); font-size:16px; }
.phone-topbar .ph-status{ font-size:10.5px; font-weight:700; color: var(--volt-500); background: var(--volt-100); padding:3px 9px; border-radius:999px; }

.phone-stage{ position:relative; flex:1; overflow:hidden; }
.scene{
  position:absolute; inset:0; padding: 6px 12px 12px; display:flex; flex-direction:column;
  opacity:0; transform: translateY(14px) scale(.98); pointer-events:none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.scene.is-active{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.mode-pills{ display:flex; gap:6px; padding: 0 0 10px; flex-shrink:0; }
.mode-pill{
  font-size:11px; font-weight:700; padding:6px 12px; border-radius: var(--radius-full);
  border:1px solid var(--border-color); color: var(--text-muted); background: var(--bg-surface);
}
.mode-pill.active-spark{ background: var(--grad-spark); color:#fff; border-color:transparent; }
.mode-pill.active-volt{ background: var(--grad-volt); color:#fff; border-color:transparent; }
.phone-feed{ display:flex; flex-direction:column; gap:10px; overflow:hidden; flex:1; }
.plan-card{
  background: var(--surface); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-sm);
  position:relative; border-left: 4px solid var(--spark-500);
}
.plan-card.volt{ border-left-color: var(--volt-500); }
.plan-card .pc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap: 8px;}
.plan-card .pc-title{ font-weight:700; font-size:13px; color: var(--ink-900); }
.plan-card .pc-tag{ font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:999px; background: var(--spark-100); color: var(--spark-500); flex-shrink:0; }
.plan-card.volt .pc-tag{ background: var(--volt-100); color: var(--volt-500); }
.plan-card .pc-meta{ font-size:10.5px; color: var(--ink-500); display:flex; gap:8px; }
.phone-tabbar{ height:50px; border-top:1px solid var(--ink-100); display:flex; align-items:center; justify-content:space-around; background:var(--surface); flex-shrink:0; }
.phone-tabbar .tab-dot{ width:20px; height:20px; border-radius:6px; background: var(--ink-100); }
.phone-tabbar .tab-dot.active{ background: var(--grad-spark); }

/* Scene 2 — application arrives */
.scene-apply{ justify-content:center; gap:14px; }
.apply-card{
  background: var(--surface); border-radius:18px; padding:16px; box-shadow: var(--shadow-md);
  display:flex; align-items:center; gap:12px;
}
.apply-avatar{ width:42px; height:42px; border-radius:50%; background: var(--grad-volt); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; }
.apply-body{ flex:1; min-width:0; }
.apply-body strong{ display:block; font-size:13px; }
.apply-body span{ font-size:11.5px; color: var(--ink-500); }
.apply-stake{ font-family:var(--font-display); font-weight:700; font-size:15px; color: var(--danger); flex-shrink:0; }
.apply-hint{ text-align:center; font-size:11.5px; color: var(--ink-500); font-weight:600; }

/* Scene 3 — accepted */
.scene-accept{ justify-content:center; align-items:center; gap:16px; text-align:center; }
.accept-check{
  width:64px; height:64px; border-radius:50%; background: var(--grad-volt);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: var(--shadow-glow-volt);
}
.scene-accept h4{ font-size:15px; margin:0; }
.scene-accept p{ font-size:12px; margin:0; color: var(--ink-500); }

/* Scene 4 — QR verify */
.scene-qr{ justify-content:center; align-items:center; gap:14px; text-align:center; }
.qr-frame{
  width:120px; height:120px; border-radius:18px; background:#fff; box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.qr-frame svg{ width:92px; height:92px; }
.qr-scanline{
  position:absolute; left:6%; width:88%; height:3px; border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--spark-500), transparent);
  top:8%; animation: qrScan 1.8s ease-in-out infinite;
}
.scene-qr.is-active .qr-scanline{ animation-play-state: running; }
@keyframes qrScan{ 0%,100%{ top:8%; opacity:.3;} 50%{ top:86%; opacity:1;} }
.qr-verified-badge{
  display:inline-flex; align-items:center; gap:6px; background: var(--success); color:#fff;
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:999px;
}
.qr-credit{ font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--success); }

/* ---------- Story phone: real-screen recreations (6 scenes) ----------
   Each scene below is a simplified but faithful recreation of a real screen
   from design/sparq-all-screens.html, not a generic mockup: 1 Explore feed,
   2 create-flow "Step 1 of 5", 3 "Applicants (5)", 4 chat thread, 5 the dark
   "Verify meetup" QR handshake, 6 profile/badge. Because each scene now
   recreates a distinct real screen's own chrome (its own top bar or tab
   bar), the story phone's outer chrome is per-scene, not a persistent shell. */
#phone-story > .phone-screen > .phone-topbar,
#phone-story > .phone-screen > .phone-tabbar{ display:none; }
#phone-story .scene{ padding:0; }
.scene-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 6px; flex-shrink:0; gap:8px; }
.scene-head .sh-icon{ width:26px; height:26px; border-radius:50%; background:var(--bg-surface); box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; color:var(--ink-700); flex-shrink:0; }
.scene-head .sh-icon svg{ width:14px; height:14px; }
.scene-head .sh-title{ font-size:12.5px; font-weight:700; color:var(--ink-700); }
.scene-head .sh-greet{ font-size:9px; color:var(--text-muted); margin:0 0 1px; }
.scene-head .sh-spacer{ width:26px; flex-shrink:0; }
.scene-body{ flex:1; overflow:hidden; padding:0 14px 10px; display:flex; flex-direction:column; }
.scene-tabbar{ height:44px; border-top:1px solid var(--ink-100); display:flex; align-items:center; justify-content:space-around; background:var(--surface); flex-shrink:0; }
.scene-tabbar .st-tab{ display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink-300); }
.scene-tabbar .st-tab svg{ width:15px; height:15px; }
.scene-tabbar .st-tab span{ font-size:7px; font-weight:700; letter-spacing:.02em; }
.scene-tabbar .st-tab.active{ color: var(--spark-500); }

/* Scene 1 — Explore feed (mode pills already shared with hero via .mode-pills/.plan-card) */
.scene-explore .phone-feed{ margin-top:2px; }

/* Scene 2 — Post a plan / create flow, "Step 1 of 5" */
.create-progress{ display:flex; gap:4px; margin: 2px 0 12px; flex-shrink:0; }
.create-progress span{ height:3px; flex:1; background:var(--ink-100); border-radius:2px; }
.create-progress span.on{ background: var(--spark-500); }
.create-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; flex-shrink:0; }
.create-cat{ text-align:center; padding:9px 2px; border-radius:10px; border:1.5px solid var(--border-color); font-size:9.5px; font-weight:600; color:var(--text-muted); }
.create-cat.on{ border-color: var(--spark-500); background: var(--spark-100); color: var(--spark-500); }
.create-title-field{ background:var(--bg-surface); border:1.5px solid var(--border-color); border-radius:10px; padding:10px 11px; font-size:11px; color:var(--ink-900); margin-bottom:auto; flex-shrink:0; }
.create-next{ background:var(--grad-spark); color:#fff; border-radius:999px; text-align:center; font-size:11.5px; font-weight:700; padding:10px 0; flex-shrink:0; }

/* Scene 3 — Applicants (host review, 3-credit stake) */
.applicant-sub{ font-size:9.5px; color:var(--text-muted); padding:0 0 8px; flex-shrink:0; }
.applicant-list{ display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.applicant-row{ background:var(--surface); border-radius:12px; padding:9px; box-shadow:var(--shadow-sm); display:flex; gap:8px; }
.applicant-avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:var(--grad-volt); }
.applicant-body{ flex:1; min-width:0; }
.applicant-body strong{ display:block; font-size:11px; }
.applicant-body p{ font-size:9.5px; color:var(--ink-500); margin:2px 0 6px; }
.applicant-actions{ display:flex; align-items:center; gap:6px; }
.applicant-stake{ font-size:9px; font-weight:700; color:var(--danger); background:var(--ink-100); border-radius:999px; padding:2px 7px; white-space:nowrap; }
.applicant-btn{ font-size:9.5px; font-weight:700; border-radius:999px; padding:4px 10px; }
.applicant-btn.accept{ background:var(--ink-900); color:#fff; }
.applicant-btn.decline{ background:none; border:1px solid var(--border-color); color:var(--ink-500); }

/* Scene 4 — Chat thread (unlocks on acceptance, closes 7 days after the date) */
.chat-safety-note{ font-size:9px; text-align:center; background:var(--spark-100); color:var(--spark-500); border-radius:8px; padding:5px 8px; margin-bottom:8px; flex-shrink:0; }
.chat-bubbles{ flex:1; overflow:hidden; display:flex; flex-direction:column; gap:6px; }
.chat-bubble{ align-self:flex-start; background:var(--surface); border-radius:12px 12px 12px 3px; padding:7px 10px; max-width:78%; font-size:10.5px; box-shadow:var(--shadow-sm); }
.chat-bubble.me{ align-self:flex-end; background:var(--grad-spark); color:#fff; border-radius:12px 12px 3px 12px; }
.chat-expiry{ text-align:center; font-size:8.5px; color:var(--ink-500); font-weight:600; margin-top:8px; flex-shrink:0; }

/* Scene 5 — Verify meetup (dark QR handshake) */
.scene-verify{ background: var(--ink-950); }
.scene-verify .scene-head .sh-icon{ background:rgba(255,255,255,.12); color:#fff; }
.scene-verify .scene-head .sh-title{ color:#fff; }
.scene-verify .scene-body{ align-items:center; justify-content:center; text-align:center; }
.verify-copy{ font-size:10.5px; color:rgba(255,255,255,.65); margin-bottom:14px; }
.verify-frame{ width:118px; height:118px; border-radius:16px; background:#fff; box-shadow:var(--shadow-md); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.verify-frame svg{ width:90px; height:90px; }
.verify-foot{ font-size:9px; color:rgba(255,255,255,.4); margin-top:14px; }

/* Scene 6 — Your badge (profile: verified meetups + credits) */
.badge-avatar{ width:52px; height:52px; border-radius:50%; margin:4px auto 8px; background:var(--grad-spark); flex-shrink:0; }
.badge-name{ text-align:center; font-family:var(--font-display); font-size:13.5px; margin:0 0 6px; flex-shrink:0; }
.badge-pill-row{ display:flex; justify-content:center; gap:5px; margin-bottom:10px; flex-shrink:0; }
.badge-pill{ font-size:8px; font-weight:700; background:#E7F6EF; color:var(--success); border-radius:999px; padding:3px 7px; display:inline-flex; align-items:center; gap:3px; }
.credits-card{ background:linear-gradient(135deg,var(--ink-700),var(--ink-950)); border-radius:12px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-shrink:0; }
.credits-card .cc-label{ font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.6); margin:0 0 2px; }
.credits-card .cc-num{ font-family:var(--font-display); font-size:19px; color:var(--gold); margin:0; }
.badge-stats{ display:flex; background:var(--surface); border-radius:12px; box-shadow:var(--shadow-sm); flex-shrink:0; }
.badge-stats .bs-cell{ flex:1; text-align:center; padding:8px 0; }
.badge-stats .bs-cell + .bs-cell{ border-left:1px solid var(--ink-100); }
.badge-stats .bs-num{ font-family:var(--font-display); font-weight:700; font-size:14px; }
.badge-stats .bs-lbl{ font-size:7px; color:var(--ink-500); text-transform:uppercase; }

/* Mobile: scale the whole sticky phone down a touch so a pinned phone under
   the header doesn't dominate a small viewport. */
@media (max-width: 959.98px){
  .scrolly-visual #phone-story{ width:220px; height:450px; padding:11px; border-radius:34px; }
  .scrolly-visual #phone-story .phone-notch{ width:96px; height:18px; }
  .scrolly-visual #phone-story .phone-screen{ border-radius:24px; }
}

/* Floating proof chips around the hero phone */
.float-card{
  position:absolute; z-index:3; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 12px 16px; display:flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:700; color: var(--ink-900);
  animation: floatY2 7s ease-in-out infinite;
}
@keyframes floatY2{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-10px); } }
.float-card.card-a{ top: 4%; left: -8%; animation-delay: .5s; }
.float-card.card-b{ bottom: 8%; right: -10%; animation-delay: 1.4s; }
.float-card .fc-icon{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.float-card.card-a .fc-icon{ background: var(--grad-spark); }
.float-card.card-b .fc-icon{ background: var(--gold); }

/* ---------- Sections ---------- */
section{ padding: 90px 0; position:relative; }
.section-head{ max-width: 640px; margin: 0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.section-tag{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--spark-500); margin-bottom: 14px;
}

.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }
.reveal-stagger.visible > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* Modern scroll-driven progressive enhancement (with the JS/IO fallback above still active) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation: revealIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes revealIn{ from{ opacity:0; transform: translateY(28px);} to{ opacity:1; transform:none; } }

/* Diagonal section dividers, used on alt-background bands */
.section-wave{ position:relative; }
.section-wave::before, .section-wave::after{
  content:""; position:absolute; left:0; width:100%; height:64px; background: var(--bg-page);
  pointer-events:none; z-index:1;
}
.section-wave::before{ top:-1px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.section-wave::after{ bottom:-1px; clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* ---------- How it works — scrollytelling ---------- */
/* Root-cause fix (2026-07-26, Jun's report): the sticky phone had almost no
   travel range. Two compounding bugs:
   1. Desktop: `align-items:start` on the grid collapsed the visual column's
      height down to the phone's own ~572px, so position:sticky (which can
      only travel within its containing block) had nowhere to go before
      scrolling away. Fixed by letting the column stretch (align-items:stretch,
      the grid default) to the full height of the copy column.
   2. Mobile: there was no sticky phone at all — `.scrolly-visual` was
      display:none below 960px and a separate static `.scrolly-visual-mobile`
      phone (a second, drifted-out-of-sync copy of the markup) just scrolled
      away with the page. Removed that duplicate; the ONE phone (#phone-story)
      now sticks to the TOP of the viewport (under the sticky header) on
      mobile too, with the step copy scrolling underneath it — the standard
      "pinned phone" scrollytelling pattern. This relies on `.scrolly-grid`
      being plain block flow (not grid/flex) below 960px, so the sticky
      element's containing block is genuinely taller than the phone: the
      block simply stacks visual-then-copy, so the parent's height is
      phone-height + all six steps' height, giving the sticky phone the
      whole section to travel through before it unsticks.
   Verified: no ancestor of .scrolly-sticky (.scrollytell, .container,
   .section-wave, body) sets overflow to anything other than visible/clip on
   the vertical axis, so sticky is never silently killed by a scroll trap. */
.scrolly-grid{ display:block; gap: 40px; }
@media (min-width: 960px){
  .scrolly-grid{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; }
}
.scrolly-copy{ display:flex; flex-direction:column; }
@media (min-width: 960px){ .scrolly-copy{ order:1; } }
.scrolly-step{
  min-height: 46vh; display:flex; flex-direction:column; justify-content:center;
  padding: 20px 0; opacity:.35; transition: opacity .4s ease;
  border-left: 3px solid var(--border-color); padding-left: 22px; margin-bottom: 6px;
}
.scrolly-step.is-current{ opacity:1; border-left-color: var(--spark-500); }
/* Colour cycle keyed off data-scene (not nth-child — a stray sibling, like
   the old mobile phone duplicate, silently threw nth-child counting off).
   6 steps, 3 accent colours, repeating every 3rd step. */
.scrolly-step[data-scene="2"].is-current, .scrolly-step[data-scene="5"].is-current{ border-left-color: var(--volt-500); }
.scrolly-step[data-scene="3"].is-current, .scrolly-step[data-scene="6"].is-current{ border-left-color: var(--gold); }
.scrolly-step .step-num{
  width:38px; height:38px; border-radius:50%; background: var(--grad-spark); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom: 16px; font-family: var(--font-display); font-size:15px;
}
.scrolly-step[data-scene="2"] .step-num, .scrolly-step[data-scene="5"] .step-num{ background: var(--grad-volt); }
.scrolly-step[data-scene="3"] .step-num, .scrolly-step[data-scene="6"] .step-num{ background: linear-gradient(135deg, var(--gold), #ffd27a); color: var(--ink-950); }
.scrolly-step h3{ font-size: 21px; margin-bottom:8px; }
.scrolly-step p{ font-size:15px; max-width:40ch; margin:0; }

/* The ONE phone, responsive: sticky-to-top on mobile, sticky-in-column on desktop. */
.scrolly-visual{
  display:flex; justify-content:center; align-items:flex-start;
  position: sticky; top: 64px; z-index: 5;
  background: var(--bg-page); padding: 14px 0 22px;
}
.scrolly-sticky{ position:static; }
@media (min-width: 960px){
  .scrolly-visual{
    position: static; background:none; padding:0; z-index:auto; order:2; align-self:stretch;
  }
  .scrolly-sticky{ position:sticky; top: 110px; }
}

/* ---------- Legacy step grid (Features section reuses this) ---------- */
.steps{ display:grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); counter-reset: step; }
.step-card{
  background: var(--bg-surface); border:1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 28px 24px; position:relative; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.step-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step-num{
  width:38px; height:38px; border-radius:50%; background: var(--grad-spark); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px; font-family: var(--font-display);
}
.step-card:nth-child(2) .step-num{ background: var(--grad-volt); }
.step-card:nth-child(4) .step-num{ background: linear-gradient(135deg, var(--gold), #ffd27a); }
.step-card h3{ font-size: 18px; margin-bottom: 8px; }
.step-card p{ font-size: 14.5px; margin:0; }

/* ---------- Trust economy ---------- */
.trust-wrap{ display:grid; gap: 48px; align-items:center; }
@media (min-width: 960px){ .trust-wrap{ grid-template-columns: 1fr 1fr; } }
.credit-board{
  background: var(--bg-surface); border:1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: 28px; box-shadow: var(--shadow-md);
}
.credit-row{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 16px 4px; border-bottom: 1px solid var(--border-color);
}
.credit-row:last-child{ border-bottom:none; }
.credit-row .cr-label{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:14.5px; }
.credit-row .cr-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cr-icon.stake{ background: var(--ink-100); color: var(--ink-700); }
.cr-icon.earn{ background: var(--success); color:#fff; }
.cr-icon.bail{ background: var(--danger); color:#fff; }
.cr-icon.noshow{ background: var(--ink-950); color:#fff; }
.cr-value{ font-family: var(--font-display); font-weight:700; font-size: 18px; white-space:nowrap; font-variant-numeric: tabular-nums; }
.cr-value.pos{ color: var(--success); }
.cr-value.neg{ color: var(--danger); }
.trust-copy ul{ list-style:none; margin: 24px 0; display:flex; flex-direction:column; gap:14px; }
.trust-copy li{ display:flex; gap:12px; font-size:15px; color: var(--text-secondary); align-items:flex-start; }
.trust-copy li svg{ flex-shrink:0; margin-top:2px; color: var(--volt-500); }

/* ---------- Events ---------- */
.events-grid{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.event-card{
  border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-color);
  background: var(--bg-surface); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.event-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.event-banner{ height: 120px; position:relative; }
.event-banner.spark{ background: var(--grad-spark); }
.event-banner.volt{ background: var(--grad-volt); }
.event-banner.gold{ background: linear-gradient(135deg, var(--gold), #ffd27a); }
.event-banner svg{ position:absolute; opacity:.35; right:16px; bottom:-10px; width:90px; height:90px; }
.event-body{ padding: 20px; }
.event-body .ev-city{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-muted); margin-bottom:6px; }
.event-body h3{ font-size:17px; margin-bottom:6px; }
.event-body p{ font-size: 13.5px; margin-bottom: 0; }

/* ---------- Safety ---------- */
.safety-grid{ display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.safety-card{
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out);
}
.safety-card:hover{ transform: translateY(-4px); }
.safety-icon{ width:48px; height:48px; border-radius: 14px; background: var(--volt-100); color: var(--volt-500); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.safety-card h3{ font-size:17px; }
.safety-card p{ font-size:14.5px; margin:0; }

/* ---------- CTA / Waitlist band ---------- */
.cta-band{
  background: var(--grad-spark); border-radius: var(--radius-xl); padding: 56px 40px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
/* Dark scrim: white text directly on the coral gradient only measures ~3.2:1
   contrast (fails WCAG AA for body text at 4.5:1). This overlay darkens the
   effective background to ~5.7:1 without changing the visible gradient much. */
.cta-band::before{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.28); z-index:0;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,.94); max-width:50ch; margin: 0 auto 28px; }
.cta-band .btn-secondary{ border-color: rgba(255,255,255,.6); color:#fff; }
.cta-band .btn-secondary:hover{ background: rgba(255,255,255,.15); border-color:#fff; color:#fff; }

.waitlist-form{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:480px; margin: 0 auto 6px;
}
.waitlist-form .wl-input-wrap{ flex:1 1 240px; }
.waitlist-form input[type="email"]{
  width:100%; padding:14px 18px; border-radius: var(--radius-full); border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12); color:#fff; font-size:15px; font-family:inherit;
}
.waitlist-form input[type="email"]::placeholder{ color: rgba(255,255,255,.7); }
.waitlist-form input[type="email"]:focus-visible{ outline: 2.5px solid #fff; outline-offset:2px; }
.waitlist-form .btn-primary{ background:#fff; color: var(--spark-500); box-shadow:none; flex-shrink:0; }
.waitlist-form .btn-primary:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.wl-status{ min-height: 24px; font-size:13.5px; font-weight:600; margin-top:6px; }
.wl-status.is-error{ color:#fff; background: rgba(0,0,0,.22); display:inline-block; padding:8px 16px; border-radius:10px; }
.wl-status.is-success{ color:#fff; background: rgba(0,0,0,.22); display:inline-block; padding:8px 16px; border-radius:10px; }
.wl-status:empty{ display:none; }

/* ---------- Badges ---------- */
.store-badges{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top: 18px; }
.store-badge{
  display:flex; align-items:center; gap:10px; background: rgba(0,0,0,.25); color:#fff;
  padding: 10px 18px; border-radius: 12px; font-size:13px; font-weight:600; border:1px solid rgba(255,255,255,.25);
}
.store-badge small{ display:block; font-size:10px; color: rgba(255,255,255,.75); font-weight:500; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--border-color); padding: 56px 0 28px; margin-top: 40px; }
.footer-grid{ display:grid; gap: 36px; grid-template-columns: 1.4fr repeat(3, 1fr); margin-bottom: 40px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand p{ font-size: 13.5px; max-width: 32ch; }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-muted); margin-bottom: 16px; font-family: var(--font-body); font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; list-style:none; }
.footer-col a{ font-size:14px; color: var(--text-secondary); transition: color .15s ease; }
.footer-col a:hover{ color: var(--spark-500); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background: var(--bg-surface); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; transition: background .15s ease, transform .15s ease; }
.footer-social a:hover{ background: var(--spark-100); color: var(--spark-500); transform: translateY(-3px); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border-color); font-size:13px; color: var(--text-muted); }
.footer-bottom ul{ display:flex; gap:18px; flex-wrap:wrap; list-style:none; }
.footer-bottom a:hover{ color: var(--spark-500); }

/* ---------- Inner pages (faq, contact, legal) ---------- */
.page-hero{ padding: 64px 0 40px; text-align:center; }
.page-hero h1{ font-size: clamp(2rem, 4.5vw, 2.8rem); }
.page-hero p{ max-width: 56ch; margin: 0 auto; font-size:16px; }

.faq-list{ max-width: 800px; margin: 0 auto; display:flex; flex-direction:column; gap: 14px; }
.faq-item{ border:1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); overflow:hidden; }
.faq-q{
  width:100%; text-align:left; padding: 18px 22px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:15.5px; color: var(--text);
}
.faq-q svg{ flex-shrink:0; transition: transform .25s ease; color: var(--spark-500); }
.faq-item.open .faq-q svg{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 22px; }
.faq-item.open .faq-a{ max-height: 400px; padding: 0 22px 20px; }
.faq-a p{ font-size:14.5px; margin:0; }

.contact-grid{ display:grid; gap: 40px; }
@media (min-width: 900px){ .contact-grid{ grid-template-columns: 1fr 1fr; } }
.contact-card{ background: var(--bg-surface); border:1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.contact-card h3{ font-size:16px; display:flex; align-items:center; gap:10px; }
.contact-card p{ font-size:14px; }
.form-field{ margin-bottom: 18px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:13px; font-weight:700; color: var(--text-secondary); }
.form-field input, .form-field select, .form-field textarea{
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ink-300); background: var(--bg-surface); color: var(--text);
  font-family: inherit; font-size: 14.5px;
}
.form-field textarea{ min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:2px solid var(--volt-400); outline-offset:1px; }
.form-note{ font-size:12.5px; color: var(--text-muted); margin-top: 10px; }
.form-success{ display:none; background: var(--volt-100); color: var(--volt-500); padding: 14px 18px; border-radius: 12px; font-weight:600; font-size:14px; margin-bottom:18px; }
.form-success.show{ display:block; }

.legal-body{ max-width: 760px; margin: 0 auto; }
.legal-body h2{ font-size:20px; margin-top: 40px; }
.legal-body p, .legal-body li{ font-size:15px; color: var(--text-secondary); }

/* ---------- Pricing (Plus + Boost) ---------- */
.pricing-grid{ display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); max-width: 900px; margin: 0 auto; }
.pricing-card{
  background: var(--bg-surface); border:1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s ease; position:relative;
}
.pricing-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pricing-card.featured{ border-color: var(--volt-500); box-shadow: var(--shadow-md); }
.pricing-badge{
  position:absolute; top:-12px; right:24px; background: var(--grad-volt); color:#fff; font-size:11.5px; font-weight:700;
  padding:5px 12px; border-radius: 999px; letter-spacing:.02em;
}
.pricing-card h3{ font-size:18px; margin-bottom:4px; }
.pricing-card .price{ font-family: var(--font-display); font-weight:700; font-size:34px; margin: 10px 0 4px; }
.pricing-card .price small{ font-size:14px; font-weight:500; color: var(--text-muted); }
.pricing-card .price-sub{ font-size:13px; color: var(--text-muted); margin-bottom:18px; }
.pricing-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin: 0 0 22px; }
.pricing-card li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color: var(--text-secondary); }
.pricing-card li svg{ flex-shrink:0; margin-top:2px; color: var(--success); }
.legal-comment-note{ background: var(--ink-100); border-left:4px solid var(--danger); padding:14px 18px; border-radius:8px; font-size:13.5px; margin-bottom:24px; }
.legal-body ul{ padding-left: 22px; margin-bottom: 1em; list-style: disc; }
.legal-updated{ font-size:13px; color: var(--text-muted); text-align:center; margin-bottom: 40px; }

/* ---------- misc ---------- */
.divider-fade{ height:1px; background: linear-gradient(90deg, transparent, var(--border-color), transparent); border:none; margin: 0; }
.badge-soon{ display:inline-flex; align-items:center; gap:6px; background: var(--ink-100); color: var(--text-muted); font-size:11px; font-weight:700; padding: 4px 10px; border-radius: 999px; }
.text-center{ text-align:center; }
.mt-32{ margin-top:32px; }
.skip-link{ position:absolute; left:-999px; top:0; background: var(--spark-500); color:#fff; padding:10px 16px; border-radius:8px; z-index:200; }
.skip-link:focus{ left: 12px; top: 12px; }

/* ---------- Reduced-motion overrides for JS-driven effects ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-parallax .blob{ transform:none !important; }
  .qr-scanline{ display:none; }
  .eyebrow .dot{ animation:none; }
}


/* ---------- Screens showcase (real app screenshots, 2026-09-22) ----------
   Built on the existing .phone + .reveal vocabulary rather than a new one, so
   it inherits the site's radius, shadow and motion language for free.

   The images are REAL captures of the running app (sparq-website/screenshots/),
   not mockups — which is the whole point of the section: the product exists.
   Regenerate them with the screenshot pass documented in
   infra/WAITLIST-AND-MAIL.md. */
.screens{ padding: var(--space-section) 0; overflow: hidden; }
.screens-head{ text-align:center; max-width: 640px; margin: 0 auto var(--space-xl); }

.screens-rail{
  display:flex; gap: clamp(18px, 4vw, 44px); justify-content:center;
  align-items:flex-end; flex-wrap:nowrap;
  /* Lets the outer phones bleed off a narrow screen instead of squashing the
     row — the middle one stays whole, which is the one that matters. */
  padding-inline: 24px;
}

/* A phone that holds a screenshot. Same frame as .phone, minus the float —
   three floating phones out of sync reads as a glitch, not as life. */
.screen-phone{
  width: clamp(190px, 25vw, 258px);
  aspect-ratio: 390 / 844;
  border-radius: clamp(28px, 4vw, 40px);
  background: var(--ink-950);
  padding: clamp(6px, 1vw, 10px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.2);
  position: relative; flex: 0 0 auto;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.screen-phone img{
  width:100%; height:100%; object-fit: cover; object-position: top center;
  border-radius: clamp(22px, 3.2vw, 32px); display:block;
}
/* The outer two sit back and slightly lower, so the eye lands on the middle
   one first. Pure CSS depth — no parallax library, nothing to load. */
.screen-phone.is-side{ transform: translateY(18px) scale(.93); opacity:.88; }
.screen-phone.is-side:first-child{ transform: translateY(18px) scale(.93) rotate(-3deg); }
.screen-phone.is-side:last-child{  transform: translateY(18px) scale(.93) rotate(3deg); }
.screen-phone.is-hero{ z-index:2; box-shadow: var(--shadow-lg), var(--shadow-glow-volt), 0 0 0 1px rgba(0,0,0,.2); }

/* Hover lifts whichever phone you point at, on devices that can point. */
@media (hover:hover) and (pointer:fine){
  .screen-phone:hover{ transform: translateY(-10px) scale(1.02) rotate(0deg); }
  .screen-phone.is-side:hover{ opacity:1; }
}

.screen-caption{
  margin-top: 14px; text-align:center;
  font-size: 13px; font-weight:600; color: var(--text-muted);
}

/* Scroll-driven entrance: each phone rises and settles as the section
   arrives. Uses the same .reveal contract the rest of the page uses, so the
   IntersectionObserver in main.js already drives it with no new JS. */
.screens-rail .screen-phone{ opacity:0; transform: translateY(40px) scale(.9); }
.screens-rail.visible .screen-phone{ opacity:1; }
.screens-rail.visible .screen-phone:nth-child(1){ transform: translateY(18px) scale(.93) rotate(-3deg); transition-delay: 0ms; }
.screens-rail.visible .screen-phone:nth-child(2){ transform: translateY(0) scale(1);                 transition-delay: 110ms; }
.screens-rail.visible .screen-phone:nth-child(3){ transform: translateY(18px) scale(.93) rotate(3deg); transition-delay: 220ms; }
.screens-rail .screen-phone{ transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* MOTION IS OPTIONAL. Everything above is decoration on top of a layout that
   is already correct, so switching it all off leaves the section intact and
   fully readable — which is the test a reduced-motion rule has to pass. */
@media (prefers-reduced-motion: reduce){
  .screen-phone,
  .screens-rail .screen-phone,
  .screens-rail.visible .screen-phone:nth-child(1),
  .screens-rail.visible .screen-phone:nth-child(2),
  .screens-rail.visible .screen-phone:nth-child(3){
    transition: none; opacity:1; transform:none;
  }
  .screen-phone.is-side{ opacity:1; }
}

/* Phones scroll sideways rather than shrink into uselessness. */
@media (max-width: 720px){
  .screens-rail{
    justify-content:flex-start; overflow-x:auto; scroll-snap-type: x mandatory;
    padding-bottom: 12px; -webkit-overflow-scrolling: touch;
  }
  .screens-rail > *{ scroll-snap-align:center; }
  .screen-phone{ width: 220px; }
  .screen-phone.is-side, .screens-rail.visible .screen-phone:nth-child(n){
    transform:none; opacity:1;
  }
}