/* Hezel — Dark cinematic landing page */

:root {
  --bg: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #121212;
  --surface: #161616;
  --surface-2: #1e1e1e;
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --text-dim: rgba(245, 245, 247, 0.64);
  --text-mute: rgba(245, 245, 247, 0.42);
  --accent-h: 348;
  --accent: oklch(0.68 0.22 var(--accent-h));
  --accent-bright: oklch(0.74 0.25 var(--accent-h));
  --accent-deep: oklch(0.54 0.22 var(--accent-h));
  --accent-glow: oklch(0.68 0.22 var(--accent-h) / 0.5);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 140px 0;
  position: relative;
}

@media (max-width: 720px) {
  .section { padding: 96px 0; }
}

/* ===== Type ===== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.display {
  font-size: clamp(56px, 10vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 700;
}

h2.section-title {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 18ch;
}

.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--text-dim);
  max-width: 56ch;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.pink { color: var(--accent); }
.dim { color: var(--text-dim); }

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: auto;
  max-width: calc(100% - 32px);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 22px;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  background: rgba(20, 20, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 40px -10px rgba(0, 0, 0, 0.6);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  padding-right: 14px;
}
.nav-brand img { width: 25px; height: 25px; border-radius: 6px; }
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin-right: 8px;
}
.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--text);
  color: #000;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { padding: 6px 6px 6px 14px; height: 52px; gap: 6px; }
  .nav-brand { padding-right: 8px; font-size: 14px; gap: 8px; }
  .nav-brand img { width: 22px; height: 22px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 420px) {
  .nav-brand { font-size: 13px; }
  .nav-cta { padding: 7px 12px; font-size: 12px; }
}

/* ===== Hero ===== */
.hero {
  padding: 180px 0 120px;
  text-align: center;
  position: relative;
  /* no overflow clip — let the glow bleed into the page */
}

.hero-glow {
  position: absolute;
  top: -300px;
  left: 50%;
  width: 1400px;
  height: 1000px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Aurora blobs */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--aurora-blur, 80px));
  opacity: var(--aurora-opacity, 1);
  mix-blend-mode: screen;
  pointer-events: none;
}
.aurora-1 {
  width: 520px; height: 400px;
  background: oklch(0.68 0.18 356 / 0.24);
  top: 40%; left: 15%;
  animation: au-float-1 9s ease-in-out infinite;
}
.aurora-2 {
  width: 400px; height: 520px;
  background: oklch(0.72 0.2 330 / 0.24);
  top: 30%; left: 45%;
  animation: au-float-2 13s ease-in-out infinite;
}
.aurora-3 {
  width: 460px; height: 360px;
  background: oklch(0.78 0.16 20 / 0.24);
  top: 58%; left: 30%;
  animation: au-float-3 11s ease-in-out infinite;
}
.aurora-4 {
  width: 300px; height: 300px;
  background: oklch(0.65 0.22 0 / 0.24);
  top: 28%; left: 32%;
  animation: au-float-4 8s ease-in-out infinite;
}
@keyframes au-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(60px, -70px) scale(1.08); }
  66%       { transform: translate(-40px, 40px) scale(0.94); }
}
@keyframes au-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-80px, 60px) scale(1.12); }
  70%       { transform: translate(40px, -40px) scale(0.88); }
}
@keyframes au-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%       { transform: translate(40px, 80px) scale(0.92); }
  60%       { transform: translate(-60px, -60px) scale(1.1); }
}
@keyframes au-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(80px, 40px) scale(1.25); }
}

.hero-inner { position: relative; z-index: 1; }

.hero-icon-wrap {
  display: inline-block;
  padding: 60px;
  margin-top: -60px;
  margin-left: -60px;
  margin-right: -60px;
  margin-bottom: -20px;
  filter: drop-shadow(0 var(--icon-shadow-radius, 20px) calc(var(--icon-shadow-radius, 20px) * 2) rgba(0,0,0,var(--icon-shadow-opacity, 0.4)));
}

.hero-icon {
  width: 168px;
  height: 168px;
  display: block;
  border-radius: 42px;
  position: relative;
}

.hero h1 {
  margin: 0 auto 28px;
  max-width: 14ch;
}

.hero .lede {
  margin: 0 auto 44px;
  font-size: clamp(18px, 1.8vw, 24px);
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  min-height: 50px;
  box-sizing: border-box;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.btn-primary {
  background: var(--text);
  color: #000;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.3); }
.btn-accent {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-accent:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.18); }

.hero-meta {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
.hero-meta span + span { margin-left: 20px; }

/* Floating phone preview below hero */
.hero-phone-row {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  gap: 40px;
  perspective: 1600px;
}

/* ==================================================================
   Device frame — two modes, same API
   ==================================================================
   `.device` is a fixed-aspect container. Default "flat" mode draws a
   CSS bezel (legacy). `.device.device-real` overlays a PNG bezel image
   whose transparent padding forces us to inset the screen by precise %:
     Image:         1350 x 2760  (transparent padding included)
     Screen inset:  5.3333% L/R, 3.2971% T/B
     Screen aspect: 0.4678 (inner display)
   The device container aspect MUST match the image aspect
   (1350/2760 = 0.48913) so the screen inset lands on real pixels.
================================================================== */
.device {
  position: relative;
  width: 280px;
  aspect-ratio: 1350 / 2760;
  flex-shrink: 0;
  border-radius: 52px;
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a);
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.device::before { display: none; }
.device > img:not(.device-frame-img) {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 49px;
  display: block;
  object-fit: cover;
  z-index: 0;
}

/* Real iPhone 17 bezel mode — toggled by body.frames-real */
body:not(.frames-real) .device > .device-frame-img { display: none; }

body.frames-real .device {
  background: transparent;
  /* Rect box-shadow would print around the transparent bezel padding — use
     a drop-shadow filter on the frame img instead so the shadow traces the
     actual phone silhouette */
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
body.frames-real .device-frame-img {
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, 0.55));
}
body.frames-real .device > img:not(.device-frame-img) {
  /* Screen content inset inside the bezel — override the flat-mode inset:3px
     Empirical ratios (hand-verified):
       Bezel 508x1040, screenshot 454x988
       → horizontal inset 5.315%, vertical inset 2.500%
       → screen 89.370% x 95.000% */
  position: absolute;
  inset: auto;
  left: 5.315%;
  top: 2.500%;
  width: 89.370%;
  height: 95.000%;
  border-radius: 11.5% / 5.4%;
  object-fit: cover;
  z-index: 0;
}

/* Specific override: the right-tilted phone in Go Ultra has a visible
   seam between bezel edge and screenshot. Over-cover slightly. */
body.frames-real .ultra-art .device:nth-child(2) > img:not(.device-frame-img) {
  left: 4.9%;
  top: 2.1%;
  width: 90.2%;
  height: 95.8%;
}
.device-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* ===== How it works — horizontal pinned storytelling ===== */
.how {
  background: var(--bg);
  position: relative;
}

.how-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 980px) { .how-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .how-steps { grid-template-columns: 1fr; } }

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.step h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.step p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}
.step-line {
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: rgba(245, 245, 247, 0.18);
  margin: 4px 0 12px;
}

/* ===== Feature grid — bento ===== */
.features {
  background: var(--bg);
}

.feature-head {
  max-width: 1200px;
  margin: 0 auto 72px;
  padding: 0 24px;
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.bento > .tile {
  background: rgba(120, 120, 128, 0.16);
  border: none;
  border-radius: 28px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  transition: background .25s ease;
}
.bento > .tile:hover { background: rgba(120, 120, 128, 0.22); }

.tile h3 {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 14ch;
  margin-bottom: 12px;
}
.tile p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
  max-width: 34ch;
  position: relative;
  z-index: 1;
}

/* Tiles with overlapping device mini need text padding on the right.
   Flat mode: percentage is fine (the cropped-rect corner element is small).
   Real mode: reserve a fixed pixel column so the text never gets crammed. */
.bento > .tile:has(.tile-device-mini) h3,
.bento > .tile:has(.tile-device-mini) p {
  max-width: 60%;
}

.tile-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Bento layouts — default (layout A) */
.bento.layout-a > .tile:nth-child(1) { grid-column: span 4; grid-row: span 2; min-height: 520px; }
.bento.layout-a > .tile:nth-child(2) { grid-column: span 2; }
.bento.layout-a > .tile:nth-child(3) { grid-column: span 2; }
.bento.layout-a > .tile:nth-child(4) { grid-column: span 3; }
.bento.layout-a > .tile:nth-child(5) { grid-column: span 3; }
.bento.layout-a > .tile:nth-child(6) { grid-column: span 6; min-height: 420px; }

/* Alt layout B */
.bento.layout-b > .tile:nth-child(1) { grid-column: span 3; min-height: 420px; }
.bento.layout-b > .tile:nth-child(2) { grid-column: span 3; min-height: 420px; }
.bento.layout-b > .tile:nth-child(3) { grid-column: span 2; }
.bento.layout-b > .tile:nth-child(4) { grid-column: span 2; }
.bento.layout-b > .tile:nth-child(5) { grid-column: span 2; }
.bento.layout-b > .tile:nth-child(6) { grid-column: span 6; min-height: 420px; }

@media (max-width: 900px) {
  .bento.layout-a > .tile, .bento.layout-b > .tile {
    grid-column: span 6 !important;
    grid-row: auto !important;
    min-height: 340px !important;
  }
}

/* Hero tile (big one) — full-bleed phone */
.tile.tile-hero {
  padding: 40px 40px 0 40px;
  background:
    radial-gradient(
      ellipse at 70% 40%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 60%
    ),
    rgba(120, 120, 128, 0.16);
}
.tile-hero .tile-body {
  max-width: 48%;
  padding-bottom: 32px;
}
.tile-hero .tile-art {
  position: absolute;
  /* Optically centered between the text's right edge (48%) and the card's
     right edge (100%), biased slightly left. */
  left: 72.5%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
}
.tile-hero .tile-art .device { width: 260px; }

@media (max-width: 900px) {
  .tile-hero .tile-body { max-width: 100%; }
  .tile-hero .tile-art {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin: 24px auto 0;
  }
}

/* Tile with device mini — show top portion of phone in the corner.
   Now contains a real .device with bezel (flat or real). The mini is
   purely a positioned + rotated + clipping window. */
.tile-device-mini {
  position: absolute;
  right: -24px;
  bottom: -40px;
  width: 200px;
  height: 260px;
  overflow: hidden;
  transform: rotate(4deg);
  transform-origin: bottom right;
  /* Drop the legacy faux-bezel styling — the nested .device provides it */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.tile-device-mini img {
  width: 100%;
  display: block;
}
/* Keep the nested .device anchored to the top so the cropping shows the
   top of the phone (notch / content) rather than the middle */
.tile-device-mini .device {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* CSV mock tile */
.csv-mock {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 28px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 85%, transparent 100%);
}
.csv-mock .row { display: flex; gap: 14px; }
.csv-mock .cell { flex-shrink: 0; }
.csv-mock .header { color: var(--accent); }

/* Airdrop art */
.airdrop-art {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.9;
}
.airdrop-art .ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0.4;
}

/* Stats tile */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: auto;
  padding-top: 24px;
}
.stat-val {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ===== Ultra ===== */
.ultra {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    var(--bg);
  position: relative;
  overflow: hidden;
}
.ultra-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .ultra-inner { grid-template-columns: 1fr; } }

.ultra-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f5d90a;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #000;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ultra h2 {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 28px;
}
.ultra h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #ffffff, rgba(245, 245, 247, 0.45));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ultra p.lede { margin-bottom: 36px; }

.ultra-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ultra-perks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--text);
  line-height: 1.4;
}
.ultra-perks .check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.32);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.ultra-perks .check svg { width: 12px; height: 12px; }
.ultra-perks .check svg path { stroke: var(--text); }
.ultra-perks .sub { display: block; color: var(--text-dim); font-size: 14px; margin-top: 3px; }

.ultra-art {
  position: relative;
  height: 560px;
}
.ultra-art .device {
  position: absolute;
  width: 300px;
}
.ultra-art .device-1 { left: 10%; top: 20px; transform: rotate(-6deg); z-index: 1; }
.ultra-art .device-2 { right: 5%; top: 80px; transform: rotate(5deg); z-index: 2; }

/* Mobile: stack phones vertically, no absolute positioning, smaller widths */
@media (max-width: 720px) {
  .ultra { padding-bottom: 24px; }
  .ultra-art {
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 0 0;
  }
  .ultra-art .device,
  .ultra-art .ua-phone-1,
  .ultra-art .ua-phone-2 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 220px !important;
  }
  .ultra-art .ua-phone-1 { transform: rotate(-3deg) !important; align-self: flex-start; margin-left: 6%; }
  .ultra-art .ua-phone-2 { transform: rotate(3deg) !important; align-self: flex-end; margin-right: 6%; margin-top: -160px; }
}
@media (max-width: 480px) {
  .ultra-art .device,
  .ultra-art .ua-phone-1,
  .ultra-art .ua-phone-2 {
    width: 180px !important;
  }
  .ultra-art .ua-phone-2 { margin-top: -130px; }
}

/* ===== Testimonials ===== */
.testimonials {
  background: var(--bg);
}
.testimonial-head {
  max-width: 1200px;
  margin: 0 auto 64px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
@media (max-width: 720px) { .testimonial-head { flex-direction: column; align-items: flex-start; } }

.review-strip {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  align-items: center;
  /* Always rendered in the DOM so its appearance/disappearance can
     animate. Visibility tracks `source === 'appstore' && !isSwitching`,
     synced with the marquee track's cross-fade — see .quote-track above. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-in-out;
}
.review-strip.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--text-dim);
}

/* Auto-scrolling marquee */
.quote-marquee {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.quote-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  /* Cross-fade transition for source switching (App Store ↔ Reddit).
     The track's transform is updated every frame by JS (auto-scroll), so
     we only animate opacity here — they don't conflict. */
  transition: opacity 0.22s ease-in-out;
}
.quote-track.is-switching {
  opacity: 0;
}
.quote-track .quote {
  flex: 0 0 380px;
  width: 380px;
}
@keyframes quote-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}
@media (prefers-reduced-motion: reduce) {
  .quote-track { animation: none; }
}

.quote {
  background: rgba(120, 120, 128, 0.16);
  border: none;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Fixed height so the marquee container stays exactly the same
     dimensions regardless of source (App Store vs Reddit). The iTunes
     RSS filter below caps quote length so App Store cards fit; Reddit
     cards have slack space, which we absorb by vertically centering
     the quote (.quote-reddit blockquote rule below). */
  height: 380px;
  overflow: hidden;
}
.quote .stars { margin-bottom: -8px; }
.quote .quote-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 4px 0 -4px;
  line-height: 1.3;
}
.quote blockquote {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text-dim);
  flex: 1;
  margin: 0;
}
.quote .author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: transparent;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.author-meta { font-size: 14px; }
.author-name { font-weight: 600; }
.author-handle { color: var(--text-mute); font-family: var(--font-mono); font-size: 12px; }

/* ===== Reddit testimonial cards ===== */
/* Same outer shell as .quote, but:
   - bigger blockquote (this is the focal point — no title or stars)
   - whole card is a clickable <a> that opens the comment in a new tab
   - subtle lift on hover so the affordance reads */
.quote-reddit {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  /* Click-vs-drag is handled in JS; cards still get a soft hover lift. */
}
.quote-reddit:hover {
  background: rgba(120, 120, 128, 0.22);
  transform: translateY(-2px);
}
.quote-reddit blockquote {
  /* "Big block quote" — Reddit testimonials lean on the quote alone for
     impact, no surrounding stars/title to compete with. Vertically
     centered inside its flex slot since Reddit cards have less content
     than App Store cards and would otherwise look top-heavy. */
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--text);
  font-weight: 500;
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
}
.quote-reddit .author-name { font-family: var(--font-mono); font-weight: 500; }
body.labels-sans .quote-reddit .author-name { font-family: var(--font-sans); font-weight: 600; }

/* ===== Source picker (App Store / Reddit) ===== */
/* iOS Camera-lens-picker shape: pill container, single active pill that
   slides between the two source options. */
.source-picker-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.source-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(120, 120, 128, 0.22);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.source-pick {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease;
  white-space: nowrap;
}
.source-pick:hover { color: var(--text); }
.source-pick.is-active {
  background: rgba(245, 245, 247, 0.95);
  color: #0a0a0a;
  font-weight: 600;
  cursor: default;
}
.source-pick.is-active:hover { color: #0a0a0a; }

/* ===== FAQ ===== */
.faq {
  background: var(--bg);
}
.faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.faq-head {
  text-align: center;
  margin-bottom: 56px;
}
.faq-head h2 { margin: 0 auto; }

details.faq-item {
  border-top: 1px solid var(--border);
  padding: 24px 8px;
  cursor: pointer;
}
details.faq-item:last-of-type { border-bottom: 1px solid var(--border); }
details.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-image:
    linear-gradient(var(--text-dim), var(--text-dim)),
    linear-gradient(var(--text-dim), var(--text-dim));
  background-size: 14px 1.5px, 1.5px 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .25s ease;
}
details.faq-item[open] summary::after {
  transform: rotate(45deg);
}
details.faq-item .answer {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 16px;
  max-width: 68ch;
}

/* ===== CTA band ===== */
.cta-band {
  padding: 160px 0;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    var(--bg);
}
.cta-band h2 {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  max-width: 14ch;
  margin: 0 auto 32px;
}
.cta-band p { margin: 0 auto 40px; text-align: center; }

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 48px;
  background: var(--bg);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-brand img { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 16px; }
.footer-brand p { color: var(--text-mute); font-size: 13px; line-height: 1.5; max-width: 28ch; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 24px 24px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
}

body.labels-sans .eyebrow,
body.labels-sans .tile-tag,
body.labels-sans .step-num,
body.labels-sans .ultra-badge,
body.labels-sans .footer-col h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ===== Background variations ===== */
body.bg-pure { --bg: #000; --bg-1: #0a0a0a; --bg-2: #131313; }
body.bg-soft { --bg: #0a0a0a; --bg-1: #131313; --bg-2: #1b1b1b; }
body.bg-warm { --bg: #0a0806; --bg-1: #14100d; --bg-2: #1d1814; }

/* ===== Font variations ===== */
body.font-apple { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.font-geist { --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
body.font-inter { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
body.font-editorial { --font-sans: "Fraunces", "Times New Roman", Georgia, serif; letter-spacing: -0.02em; }

/* ===== Accent mode: grey (disables pink everywhere) ===== */
body.accent-grey {
  --accent: rgba(245, 245, 247, 0.88);
  --accent-bright: rgba(255, 255, 255, 0.95);
  --accent-deep: rgba(245, 245, 247, 0.5);
  --accent-glow: rgba(255, 255, 255, 0.08);
}
/* Eyebrows/tile-tags/step-nums read better as dim white in grey mode */
body.accent-grey .eyebrow,
body.accent-grey .tile-tag,
body.accent-grey .step-num,
body.accent-grey .csv-mock .header {
  color: var(--text-dim);
}
/* Tone down the icon's drop-shadow so it's just a soft halo, not a colored glow */
body.accent-grey .hero-icon {
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  filter: drop-shadow(0 20px 60px rgba(255, 255, 255, 0.08));
}
/* Replay nostalgia cards: flatten colorful gradients to greyscale */
body.accent-grey .replay-stack .replay-card {
  background: rgba(120, 120, 128, 0.28) !important;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Testimonial avatars */
body.accent-grey .avatar {
  background: transparent;
}