/* ============================================================
   style-home-figma.css
   Home page — scroll-driven phased hero animation
   Figma: RenLxKgFdYncI1ta6oJaZC  (initial 4142:3429 → end 4144:3663)

   Phases (driven by --p, 0..1):
     Phase 1  0.00 → 0.22   Title scrolls UP from center to header
     Phase 2  0.20 → 0.50   Phone card slides UP from below
     Phase 3  0.50 → 0.80   Typewriter text reveals (left + right)
     Phase 4  0.75 → 1.00   Arrows draw toward phone regions + stats bar rises

   --q1..--q4 are phase-local progress (0..1) derived from --p.
   Background grid moves only a hair — all motion is in the foreground.
   ============================================================ */

html, body {
  margin: 0; padding: 0;
  background: #060606;
  color: var(--color-neutral-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: 1.25;
  /* clip (not hidden) prevents horizontal overflow WITHOUT creating a scroll
     container — `hidden` here silently breaks `position: sticky` descendants
     (e.g. the Features radio-dial tuner). */
  overflow-x: clip;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Scroll stage ---------- */
.hero-stage-wrap {
  position: relative;
  z-index: 1;             /* above the fixed background grid (z-index 0) */
  height: 200vh;          /* scroll range for full 4-phase animation — tightened
                             from 320vh so the phone + copy reach frame sooner */
}
.hero-stage {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  min-height: 720px;
  z-index: 1;
  /* Pinned to viewport so phone + content never scroll off.
     JS adds .hero-stage--done to hide it once the wrap exits viewport. */

  --p: 0;                                       /* set by home-animation.js */
  /* 6-step click-driven animation */
  --q1:  max(0, min(1, calc(var(--p) / 0.15)));                  /* 0.00–0.15  title          */
  --q2:  max(0, min(1, calc((var(--p) - 0.10) / 0.20)));         /* 0.10–0.30  phone          */
  --q3a: max(0, min(1, calc((var(--p) - 0.30) / 0.15)));         /* 0.30–0.45  left text      */
  --q3b: max(0, min(1, calc((var(--p) - 0.45) / 0.10)));         /* 0.45–0.55  right eyebrow  */
  --q3c: max(0, min(1, calc((var(--p) - 0.55) / 0.10)));         /* 0.55–0.65  right caption  */
  --q4:  max(0, min(1, calc((var(--p) - 0.65) / 0.35)));         /* 0.65–1.00  arrows+stats   */
  /* legacy q3 kept for any code that still references it */
  --q3:  max(0, min(1, calc((var(--p) - 0.30) / 0.35)));
}
.hero-stage--done { display: none; }

/* ============================================================
   Click-to-advance "Next ↓" control — fixed at bottom of viewport
   while the hero stage is active. Auto-hides at the final phase.
   ============================================================ */
.hero-next-btn {
  position: fixed;
  bottom: 80px;                                 /* clear of the fixed site-footer */
  left: 50%;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(10, 14, 20, 0.7);
  border: 1px solid var(--color-primary-cyan500);
  color: var(--color-primary-cyan500);
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.25s ease, background 0.18s ease;
  text-shadow: 0 0 8px rgba(165, 227, 232, 0.4);
  box-shadow: 0 0 20px rgba(165, 227, 232, 0.15);
}
.hero-next-btn:hover {
  background: rgba(165, 227, 232, 0.15);
  transform: translateX(-50%) translateY(-2px);
}

.hero-next-btn[hidden] {
  display: inline-flex;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}
.hero-next-btn__arrow {
  display: inline-block;
  animation: hero-next-pulse 1.6s ease-in-out infinite;
}
@keyframes hero-next-pulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(3px); opacity: 0.55; }
}
@media (max-width: 768px) { .hero-next-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-next-btn__arrow { animation: none; } }

/* ---------- Background — fixed to viewport, never moves ---------- */
.hero-bg {
  position: fixed; inset: 0; z-index: 0;
  background: #060606;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg__image {
  position: absolute; inset: 0;
  width: 106.67%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero-bg__overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.55;
}
.hero-bg__floor {
  position: absolute;
  left: 50%; bottom: -160px;
  transform: translateX(-50%);
  width: 6333px; height: 1270px;
  max-width: none;
  opacity: 0.9;
  transform-origin: center bottom;
}
.hero-bg__glow {
  position: absolute;
  width: 90px; height: 3px;
  pointer-events: none;
  opacity: 0.9;
}
.hero-bg__glow--a { top: 62%; left: 20%; }
.hero-bg__glow--b { top: 63%; left: 44%; transform: rotate(180deg); }
.hero-bg__glow--c { top: 70%; left: 7%; transform: rotate(112deg); }

/* ---------- Top Nav — fixed; semi-transparent so title shows through ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;                                /* 3-col grid → links truly centred */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-sm) var(--spacing-3xl);
  border-bottom: 1px solid #383c43;
  background: rgba(10, 10, 10, 0.55);           /* ≈45% transparent */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 5px 12px 0 rgba(165, 227, 232, 0.05);
}
.nav__desktop      { grid-column: 2; justify-self: center; }
.nav__desktop-cta  { grid-column: 3; justify-self: end; }
.nav__links {
  display: flex; align-items: center; gap: var(--spacing-xs);
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
}
.nav__link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 4px; height: 34px; padding: 8px 18px;
  font-family: var(--font-family-primary);
  font-weight: 500; font-size: 14px; line-height: 18px;
  text-transform: uppercase;
  color: var(--color-neutral-gray);
  transition: color 0.15s ease;
}
.nav__link:hover { color: var(--color-primary-cyan500); }
.nav__link--active { color: var(--color-primary-red); }
.nav__link--active .nav__corners { position: absolute; inset: 0; pointer-events: none; }
.nav__link--active .nav__corners img { width: 100%; height: 100%; }

/* Logo as the active "Home" slot in nav__links — replaces the text Home button */
.nav__link--logo {
  padding: 0 18px;
}
.nav__link-logo-img {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(165, 227, 232, 0.35));
}
.btn-download {
  display: inline-flex;
  align-items: center; justify-content: center;
  height: 40px; padding: 8px 12px;
  font-family: var(--font-family-primary);
  font-size: 14px; line-height: 18px;
  letter-spacing: 1px;
  color: var(--color-neutral-white);
  background: var(--color-primary-red);
  border: 1px solid #851c15;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-download:hover { background: var(--color-primary-red-hover); }

/* ---------- Stage inner ---------- */
.hero-stage__inner {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-stage__inner > * { pointer-events: auto; }

/* ============================================================
   Phase 1 — Hero Title scroll UP (--q1)
   Initial: centered vertically, 1.4× scale
   End:     100px from top, 1× scale (tight to phone)
   ============================================================ */
.hero-title {
  position: absolute;
  left: 50%;
  /* Anchor at 140px (not 100px) so the scaled-down title at q1=1 clears
     the fixed nav (~65px tall) with breathing room. */
  top: calc(50vh - (50vh - 140px) * var(--q1));
  transform:
    translate(-50%, -50%)
    scale(calc(1.4 - 0.4 * var(--q1)));
  transform-origin: center center;
  margin: 0;
  font-family: var(--font-family-hero);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  text-align: center;
  width: min(92vw, 1280px);
  text-shadow:
    0 0 calc(12px + 14px * (1 - var(--q1))) rgba(165, 227, 232, calc(0.35 + 0.2 * (1 - var(--q1)))),
    0 0 2px rgba(165, 227, 232, 0.4);
  white-space: nowrap;
  will-change: transform, top;
}

/* ============================================================
   Phase 2 — Phone card slides UP from below (--q2)

   Sizing model — EVERYTHING IS PERCENTAGES so the phone scales
   gracefully at any viewport size:

     phone-card        : aspect-ratio 469/480 of card itself
     phone-card__inner : 67.16% × 91.04% of card  (315/469 × 437/480)
     phone-card__frame : fills inner via preserveAspectRatio="none"
     phone-card__screen: positioned to match the frame SVG's
                         inner-stroke rect (the rounded screen-hole):
                           viewBox 0 0 319.049 629.505
                           inner-stroke x=11.458 y=6.747 w=296.135 h=616.011
                         → 3.59% / 1.07% / 92.82% / 97.86% of frame
   ============================================================ */
.phone-card {
  position: absolute;
  /* Title anchors at 140px; clamp(40px,5.2vw,64px) font × 1.05 line-height ×
     2 lines puts title bottom around 220px (range ~205–275 across viewports).
     Push the phone anchor 10vh below that so it sits clearly under the
     title at any viewport size. */
  top: calc(220px + 10vh);
  left: 50%;
  transform:
    translateX(-50%)
    translateY(calc((75vh) * (1 - var(--q2)))); /* shorter travel */
  width: min(469px, 90vw);
  aspect-ratio: 469 / 480;                       /* derives height; never deforms */
  height: auto;
  /* No frosted glass behind the phone — the iPhone bezel and screen carry
     the visual weight on their own. The glass effect now lives on the
     adjacent .left-content / .right-content text panels. */
  background: transparent;
  border: 0;
  will-change: transform;
}
.phone-card__corner {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
  opacity: var(--q2);
}
.phone-card__corner--tl { top: -10px; left: -10px; }
.phone-card__corner--tr { top: -10px; right: -10px; transform: scaleX(-1); }
.phone-card__corner--br { bottom: -10px; right: -10px; transform: scale(-1, -1); }
.phone-card__corner--bl { bottom: -10px; left: -10px; transform: scaleY(-1); }
/* CSS-built iPhone bezel — strict aspect-ratio so it ALWAYS looks like a real
   iPhone regardless of card or viewport size. */
.phone-card__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 96%;                                  /* nearly full card height */
  aspect-ratio: 9 / 19.5;                       /* real iPhone 15 portrait */
  width: auto;
  background: linear-gradient(180deg, #1c1f24 0%, #0f1216 100%);
  border-radius: 13% / 6%;                       /* iPhone-style rounded corners */
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.07),
    inset 0 0 0 2px #2a2d33,
    0 14px 36px rgba(0, 0, 0, 0.6);
  overflow: visible;                             /* let side buttons stick out */
}
/* Side buttons — silent switch + volume on left, power on right */
.phone-frame__btn {
  position: absolute;
  background: #15181c;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.6);
  border-radius: 1.5px;
  z-index: 4;
  pointer-events: none;
}
.phone-frame__btn--silent  { left: -1.4%;  top: 10.5%; width: 1.4%; height: 3.4%; }
.phone-frame__btn--volup   { left: -1.4%;  top: 16.5%; width: 1.4%; height: 6.5%; }
.phone-frame__btn--voldown { left: -1.4%;  top: 24.5%; width: 1.4%; height: 6.5%; }
.phone-frame__btn--power   { right: -1.4%; top: 18.0%; width: 1.4%; height: 8.5%; }
.phone-card__screen {
  position: absolute;
  /* Inset from the iPhone bezel — small uniform margin all sides */
  top: 1.5%;
  left: 3.5%;
  width: 93%;
  height: 97%;
  border-radius: 11.5% / 5%;                    /* matches bezel curve, slightly smaller */
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(165, 227, 232, 0.10), transparent 60%),
    linear-gradient(180deg, #05080c 0%, #0a0f17 50%, #060a10 100%);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-primary);
  color: var(--color-neutral-white);
}

/* ============================================================
   iPhone Dynamic Island — pill at top center
   ============================================================ */
.ios-island {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 4.2%;
  min-height: 14px;
  background: #000;
  border-radius: 999px;
  z-index: 6;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

/* ============================================================
   iOS Status Bar — time + signal/wifi/battery (split around island)
   ============================================================ */
.ios-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5% 7% 1%;
  flex-shrink: 0;
  z-index: 4;
  font-weight: 600;
  font-size: clamp(7px, 1.75cqw, 11px);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.2px;
}
.ios-status__time { font-variant-numeric: tabular-nums; }
.ios-status__icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Signal: 4 ascending bars drawn as a CSS gradient strip */
.ios-status__signal {
  display: inline-block;
  width: 16px; height: 8px;
  background:
    linear-gradient(to top, currentColor 30%, transparent 30%) 0 0 / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 50%, transparent 50%) 4px 0 / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 75%, transparent 75%) 8px 0 / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 100%, transparent 100%) 12px 0 / 3px 100% no-repeat;
}
/* WiFi: 3 nested arcs via inline SVG */
.ios-status__wifi {
  display: inline-block;
  width: 13px; height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path d='M8 11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-5.5a4 4 0 0 1 3 1.4l-1.4 1.4A2 2 0 0 0 8 7.5a2 2 0 0 0-1.6.8L5 6.9a4 4 0 0 1 3-1.4ZM8 1a8 8 0 0 1 6 2.7L12.6 5.1A6 6 0 0 0 8 3a6 6 0 0 0-4.6 2.1L2 3.7A8 8 0 0 1 8 1Z' fill='black'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path d='M8 11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-5.5a4 4 0 0 1 3 1.4l-1.4 1.4A2 2 0 0 0 8 7.5a2 2 0 0 0-1.6.8L5 6.9a4 4 0 0 1 3-1.4ZM8 1a8 8 0 0 1 6 2.7L12.6 5.1A6 6 0 0 0 8 3a6 6 0 0 0-4.6 2.1L2 3.7A8 8 0 0 1 8 1Z' fill='black'/></svg>") no-repeat center / contain;
}
/* Battery: outline + fill + cap */
.ios-status__battery {
  position: relative;
  display: inline-block;
  width: 22px; height: 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  margin-left: 2px;
}
.ios-status__battery::before {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: calc(82% - 2px); height: calc(100% - 2px);
  background: currentColor;
  border-radius: 1px;
}
.ios-status__battery::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 4px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}

/* ============================================================
   App Header — title + LIVE pill
   ============================================================ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4% 6% 3%;
  flex-shrink: 0;
}
.app-header__title {
  font-family: var(--font-family-hero);
  font-weight: 700;
  font-size: clamp(13px, 4.2cqw, 22px);
  letter-spacing: 1.5px;
  color: var(--color-primary-cyan500);
  text-shadow: 0 0 8px rgba(165, 227, 232, 0.5);
}
.app-header__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: clamp(7px, 1.9cqw, 10px);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-primary-red);
  background: rgba(195, 39, 28, 0.15);
  border: 0.5px solid var(--color-primary-red);
  border-radius: 999px;
}
.app-header__live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary-red);
  box-shadow: 0 0 6px rgba(195, 39, 28, 0.9);
  animation: phenom-pulse 1.4s ease-in-out infinite;
}
@keyframes phenom-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ============================================================
   Endless-scroll Feed
   The track holds two copies of the event list and translates
   from 0 to -50% to loop seamlessly.
   ============================================================ */
.app-feed {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.app-feed__track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6% 0;
  animation: feed-scroll 28s linear infinite;
  will-change: transform;
}
@keyframes feed-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.ev {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(21, 25, 32, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 6px;
  flex-shrink: 0;
  backdrop-filter: blur(2px);
}
.ev__thumb {
  width: 14%;
  aspect-ratio: 1 / 1;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: clamp(11px, 3.5cqw, 16px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px currentColor;
  flex-shrink: 0;
}
.ev__thumb--c1 { background: linear-gradient(135deg, #1d3a5f 0%, #2d5a8f 100%); color: #6cb8ff; }
.ev__thumb--c2 { background: linear-gradient(135deg, #4a1d3f 0%, #7a2d6a 100%); color: #ff8ad4; }
.ev__thumb--c3 { background: linear-gradient(135deg, #5f3a1d 0%, #8f6a2d 100%); color: #ffce6c; }
.ev__thumb--c4 { background: linear-gradient(135deg, #1d5f3a 0%, #2d8f5a 100%); color: #6cffa8; }
.ev__thumb--c5 { background: linear-gradient(135deg, #3a1d5f 0%, #5a2d8f 100%); color: #b08aff; }
.ev__thumb--c6 { background: linear-gradient(135deg, #5f1d1d 0%, #8f2d2d 100%); color: #ff8a8a; }
.ev__thumb--c7 { background: linear-gradient(135deg, #1d5f5f 0%, #2d8f8f 100%); color: #6cffff; }
.ev__thumb--c8 { background: linear-gradient(135deg, #3a3a1d 0%, #5a5a2d 100%); color: #ffff8a; }
.ev__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.ev__title {
  font-size: clamp(8px, 2.4cqw, 12px);
  font-weight: 600;
  color: #e3e5ea;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev__sub {
  font-size: clamp(6px, 1.9cqw, 10px);
  color: #9aa1ad;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev__tag {
  font-size: clamp(6px, 1.7cqw, 9px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev__tag--ok      { color: var(--color-primary-cyan500); }
.ev__tag--pending { color: #d4a843; }

/* ============================================================
   Bottom Tab Bar
   ============================================================ */
.app-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4% 4% 5%;
  border-top: 0.5px solid rgba(56, 62, 70, 0.6);
  background: rgba(10, 14, 20, 0.8);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.app-tab {
  font-size: clamp(6px, 1.9cqw, 10px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
}
.app-tab--active { color: var(--color-primary-cyan500); }

/* Container queries on the screen — sized icons/text scale with screen */
.phone-card__screen { container-type: inline-size; }

/* Looping screen-recording video that lives inside the iPhone screen.
   3% wider than iPhone aspect (620:1280 vs 9:19.5) — `object-fit: cover`
   crops the sides invisibly. Browser handles the loop natively. */
.phone-scene-video,
.features-scene__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  border-radius: inherit;
  display: block;
  z-index: 1;
  transition: opacity 0.45s ease;
}
.phone-card__screen.is-recording .phone-scene-video { opacity: 0; }

/* ============================================================
   REPORT scene — Figma "Reports" dashboard (node 4312:89992).
   Fades in over the live-feed scene when .is-recording is added.
   ============================================================ */
.phone-scene--report {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: #060606;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
  transform: scale(0.96);
  z-index: 5;
  overflow: hidden;
}
.phone-scene__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.phone-card__screen > :not(.phone-scene--report) {
  transition: opacity 0.45s ease;
}
.phone-card__screen.is-recording .phone-scene--report {
  opacity: 1;
  transform: scale(1);
}
.phone-card__screen.is-recording > :not(.phone-scene--report) {
  opacity: 0;
}

/* Pause auto-scroll when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-feed__track,
  .app-header__live-dot { animation: none; }
}

/* ============================================================
   Phase 3 — Typewriter text reveal (--q3)
   clip-path sweep from left; a blinking cyan caret sits on
   the reveal edge and fades at completion.
   ============================================================ */
/* Text content anchored to PHONE center (always at viewport 50%).
   240px = phone half-width (~234) + small gap.
   Each snippet is hidden until JS adds `.is-armed`; the typewriter
   then runs the full text on its own clock (not scroll-scrubbed). */
.left-content,
.left-content__report,
.right-content__eyebrow,
.right-content__caption {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.left-content.is-armed,
.left-content__report.is-armed,
.right-content__eyebrow.is-armed,
.right-content__caption.is-armed { opacity: 1; }
.left-content__report {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary-red);
  text-shadow: 0 0 8px rgba(195, 39, 28, 0.4);
  max-width: 356px;
  margin: 8px 0 0;
  text-align: right;
}
.left-content__report .typewriter__cursor {
  color: var(--color-primary-red);
  text-shadow: 0 0 6px rgba(195, 39, 28, 0.8);
}
.left-content,
.right-content {
  position: absolute;
  /* Layout shape (padding + border-radius) is unconditional so the panel
     reserves its space without the visual chrome leaking before the phone
     scrolls into view. The glass effect itself is gated on .is-armed
     (added by JS only after the phone-scroll phase completes — see
     home-animation.js TRIGGERS at threshold 0.30). */
  border-radius: 16px;
  padding: 18px 22px;
}
/* Frosted glass behind the typewriter text — only after the panel is
   armed (i.e. AFTER the phone has scrolled into position). Without this
   gate the rounded glass shape was visible from page load, before the
   title scroll completed. */
.left-content.is-armed,
.right-content.is-armed {
  background: rgba(15, 18, 22, 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 0.5px solid rgba(56, 62, 70, 0.7);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.left-content  {
  top: 295px;
  right: calc(50% + 240px);
  width: min(340px, calc(50vw - 260px));
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
}
.right-content {
  top: 575px;
  left: calc(50% + 240px);
  width: min(340px, calc(50vw - 260px));
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Real char-by-char typewriter — JS slices full text against scroll progress.
   The .typewriter element holds: a Text node (live emitted chars) + a cursor span. */
.typewriter {
  display: inline;
  white-space: pre-wrap;
}
.typewriter__cursor {
  display: inline-block;
  width: 0.55em;
  margin-left: 1px;
  color: var(--color-primary-cyan500);
  text-shadow: 0 0 6px rgba(165, 227, 232, 0.75);
  animation: typewriter-blink 0.6s steps(2, start) infinite;
  vertical-align: baseline;
  pointer-events: none;
}
.typewriter__cursor[data-done="true"] { animation: none; opacity: 0; }
@keyframes typewriter-blink {
  to { visibility: hidden; }
}
.left-content__text {
  font-family: var(--font-family-primary);
  font-weight: 400; font-size: 16px; line-height: 20px;
  letter-spacing: -1px;
  color: #c5cad2;
  max-width: 356px;
  margin: 0 0 var(--spacing-md);
}
.right-content__eyebrow {
  font-family: var(--font-family-primary);
  font-weight: 700; font-size: 18px; line-height: 26px;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  margin: 0 0 8px;
}
.right-content__caption {
  font-family: var(--font-family-primary);
  font-weight: 400; font-size: 16px; line-height: 20px;
  letter-spacing: -1px;
  color: #c5cad2;
  margin: 0 0 var(--spacing-md);
}

.qr-code {
  position: relative;
  width: 90px; height: 90px;
  margin-top: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  opacity: var(--q3c);                                        /* appears with the caption snippet */
  transform: scale(calc(0.85 + 0.15 * var(--q3c)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.qr-code::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px dashed var(--color-primary-cyan500);
  opacity: 0.9;
}
.qr-code img {
  width: 64px; height: 64px; opacity: 0.9;
}

/* Stats */
.stats {
  position: absolute;
  left: 50%;
  /* Phone-card anchor moved to calc(220px + 10vh); phone height is ~480px,
     so phone bottom is ~calc(700px + 10vh). Push stats below that with
     20px breathing room so the bar doesn't overlap the iPhone at any
     viewport height. */
  top: calc(720px + 10vh);
  transform:
    translateX(-50%)
    translateY(calc(50px * (1 - var(--q4))));
  width: 469px; height: 116px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) 26px;
  background: rgba(21, 21, 21, calc(0.8 * var(--q4)));
  border: 0.5px solid rgba(36, 40, 46, var(--q4));
  opacity: var(--q4);
  will-change: transform, opacity;
}
.stats__corner {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
}
.stats__corner--bl { bottom: -10px; left: -10px; }
.stats__corner--br { bottom: -10px; right: -10px; transform: scaleX(-1); }
.stats__item {
  flex: 1 0 0; min-width: 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}
.stats__label {
  font-family: var(--font-family-primary);
  font-weight: 400; font-size: 12px; line-height: 16px;
  text-transform: uppercase; color: #aab1be; margin: 0;
}
.stats__value {
  font-family: var(--font-family-hero);
  font-weight: 700; font-size: 16px; line-height: 28px;
  letter-spacing: 0.32px;
  color: #e3e5ea; margin: 0;
  white-space: nowrap;
}

/* ---------- After-hero content ---------- */
.post-hero {
  position: relative; z-index: 3;
  padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-xl);
  max-width: 960px; margin: 0 auto;
  text-align: center;
  color: #aab1be;
  font-size: 14px; line-height: 22px;
}
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;                                  /* above hero stage, below nav (100) */
  text-align: center;
  padding: 10px var(--spacing-md);
  font-size: 12px; color: #aab1be;
  border-top: 1px solid #24282e;
  background: rgba(6, 6, 6, 0.78);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 -5px 12px 0 rgba(0, 0, 0, 0.35);
}
.site-footer p { margin: 2px 0; line-height: 1.4; }
.site-footer__hint { color: #c5cad2; font-size: 13px; }
.site-footer__legal { font-size: 11px; }
.site-footer a { color: var(--color-primary-cyan500); }
.site-footer a:hover { text-decoration: underline; }
/* Add bottom padding so page content isn't hidden behind the fixed footer */
body { padding-bottom: 64px; }
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body         { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   PAGE CONTENT — shared layout for non-home pages.
   All non-home pages use <main class="page"> with the same
   nav + .hero-bg fixed background + .site-footer chrome.
   ============================================================ */
.page {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px var(--spacing-3xl) 80px;        /* nav clearance + breathing room */
  font-family: var(--font-family-primary);
}

.page__hero {
  text-align: center;
  margin: 0 0 var(--spacing-3xl);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
}

.page__title {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-hero);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  text-shadow: 0 0 14px rgba(165, 227, 232, 0.4), 0 0 2px rgba(165, 227, 232, 0.55);
}

.page__lede {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: #c5cad2;
}
.page__lede-fineprint a {
  color: var(--color-primary-cyan500, #a5e3e8);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page__lede-fineprint a:hover { color: #fff; }

.page__h2 {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-hero);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
}

/* Card — the workhorse content container used on every page */
.card {
  position: relative;
  margin: 0 0 var(--spacing-lg);
  padding: var(--spacing-xl);
  background: rgba(15, 18, 22, 0.7);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
}
.card h2 {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-hero);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
}
.card h3 {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #e3e5ea;
}
.card p,
.card li {
  font-size: 15px;
  line-height: 1.65;
  color: #c5cad2;
  margin: 0 0 var(--spacing-sm);
}
.card ul, .card ol { padding-left: 24px; margin: 0 0 var(--spacing-md); }
.card a { color: var(--color-primary-cyan500); text-decoration: underline; }
.card a:hover { color: #fff; }
.card em      { color: #aab1be; font-style: italic; }
.card strong  { color: #e3e5ea; }

.card blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 2px solid var(--color-primary-cyan500);
  color: #aab1be;
  font-style: italic;
}

/* Pillar / feature card grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
  margin: 0 0 var(--spacing-xl);
}
.feature-card {
  padding: var(--spacing-lg);
  background: rgba(21, 25, 32, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 4px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover { transform: translateY(-2px); border-color: var(--color-primary-cyan500); }
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--spacing-md);
  border-radius: 4px;
  font-size: 22px;
  font-weight: 700;
}
.feature-card__icon--blue   { background: linear-gradient(135deg, #1d3a5f 0%, #2d5a8f 100%); color: #6cb8ff; }
.feature-card__icon--green  { background: linear-gradient(135deg, #1d5f3a 0%, #2d8f5a 100%); color: #6cffa8; }
.feature-card__icon--pink   { background: linear-gradient(135deg, #5f1d3a 0%, #8f2d5a 100%); color: #ff8ad4; }
.feature-card__icon--red    { background: linear-gradient(135deg, #5f1d1d 0%, #8f2d2d 100%); color: #ff8a8a; }
.feature-card__icon--purple { background: linear-gradient(135deg, #3a1d5f 0%, #5a2d8f 100%); color: #b08aff; }
.feature-card__icon--amber  { background: linear-gradient(135deg, #5f3a1d 0%, #8f6a2d 100%); color: #ffce6c; }
.feature-card h3 {
  margin: 0 0 var(--spacing-sm);
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #e3e5ea;
}
.feature-card p {
  font-size: 13px;
  line-height: 1.55;
  color: #aab1be;
  margin: 0;
}

/* Team grid (About) — 5 columns */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-xl);
}
.team-card {
  padding: var(--spacing-lg);
  background: rgba(21, 25, 32, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 4px;
}
.team-card--partner { background: rgba(13, 26, 20, 0.7); border-color: rgba(29, 95, 58, 0.6); }
.team-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  margin-bottom: var(--spacing-md);
  border-radius: 50%;
  font-family: var(--font-family-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}
.team-card--partner .team-card__avatar { border-radius: 6px; border: 0.5px solid var(--color-primary-cyan500); font-size: 14px; background: linear-gradient(135deg, #1c1f24 0%, #0f1216 100%); color: var(--color-primary-cyan500); }
.team-card__avatar--photo {
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--color-primary-cyan500);
  overflow: hidden;
  box-shadow: 0 0 12px rgba(165, 227, 232, 0.18);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  position: relative;
  z-index: 1;
}
.team-card__avatar--photo:hover { border-color: #fff; }
.team-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favour the upper portion so portrait headshots (Lenval, Irena) keep the
     full head in frame instead of centre-cropping it off the top. */
  object-position: center 20%;
  display: block;
}

/* Click-to-zoom: stays enlarged until clicked again. */
.team-card__avatar--photo.is-zoomed {
  transform: scale(1.6);
  z-index: 5;
  border-color: var(--color-primary-cyan500);
}

/* Throb pulse — fires on every click (zoom in OR zoom out). */
.team-card__avatar--photo.is-throbbing {
  animation: avatar-throb 0.65s ease-out;
}
@keyframes avatar-throb {
  0%   { box-shadow: 0 0 0 0 rgba(165, 227, 232, 0.85), 0 0 12px rgba(165, 227, 232, 0.18); }
  60%  { box-shadow: 0 0 0 18px rgba(165, 227, 232, 0),    0 0 22px rgba(165, 227, 232, 0.55); }
  100% { box-shadow: 0 0 0 0  rgba(165, 227, 232, 0),    0 0 12px rgba(165, 227, 232, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .team-card__avatar--photo,
  .team-card__avatar--photo.is-zoomed { transition: none; }
  .team-card__avatar--photo.is-throbbing { animation: none; }
}
.team-card--partner .team-card__avatar--photo { border-radius: 50%; }
/* Partner LOGO avatar (SanMarcSoft): a contained logo, not a cropped circular
   photo. Padding keeps the transparent-background mark clear of the border. */
.team-card__avatar--logo {
  padding: 12px;
  background: transparent;
  border: 1.5px solid var(--color-primary-cyan500);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(165, 227, 232, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__avatar--logo img { width: 100%; height: 100%; object-fit: contain; }
.team-card__name a { color: var(--color-primary-cyan500); text-decoration: none; }
.team-card__name a:hover { text-decoration: underline; }
.team-card__role a {
  color: var(--color-primary-cyan500);
  text-decoration: none;
  border-bottom: 1px dotted rgba(165, 227, 232, 0.5);
  transition: border-color 0.18s ease;
}
.team-card__role a:hover { border-bottom-color: var(--color-primary-cyan500); }
.team-card__name { margin: 0 0 4px; font-family: var(--font-family-primary); font-weight: 700; font-size: 14px; letter-spacing: 0.6px; color: #e3e5ea; text-transform: uppercase; }
.team-card__role { margin: 0 0 var(--spacing-sm); font-family: var(--font-family-primary); font-weight: 700; font-size: 10px; letter-spacing: 1.2px; color: var(--color-primary-cyan500); text-transform: uppercase; }
.team-card__bio  { margin: 0; font-size: 12px; line-height: 1.5; color: #aab1be; }

/* Media list (Media page) */
.media-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin: 0 0 var(--spacing-xl); }
.media-item {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: rgba(21, 25, 32, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 4px;
  align-items: stretch;
}
.media-item__embed {
  position: relative;
  flex: 0 0 280px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.media-item__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.media-item__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.media-item__title { margin: 0; font-family: var(--font-family-primary); font-weight: 700; font-size: 15px; line-height: 1.35; color: #e3e5ea; }
.media-item__desc  { margin: 0; font-size: 13px; line-height: 1.5; color: #aab1be; }
.media-item__meta  { margin: auto 0 0; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--color-primary-cyan500); text-transform: uppercase; }
.media-item__meta a { color: inherit; text-decoration: none; }
.media-item__meta a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Reports page (live globe). Mapbox GL JS rendered into
   #reports-globe; same hex aggregation as the mobile app.
   Anime.js drives filter pill + cell-click animations.
   ------------------------------------------------------------ */
.page--reports {
  max-width: 1400px;
  position: relative;
  /* Tighten vertical rhythm — the globe is the page; the chrome around it
     just labels and funnels. Override the default .page top padding so
     the reports-stage anchors right under the navbar. */
  padding-top: 16px !important;
}
.page--reports .page__hero {
  position: relative;
  margin-bottom: 0;
}
/* Stacking: headline sits IN FRONT of the globe (always readable); the
   lede/download message sits BEHIND it as a backdrop. */
.page--reports .page__title { position: relative; z-index: 6; }
.page--reports .page__lede  { position: relative; z-index: 6; }
.page--reports .page__hero .page__title,
.page--reports .page__hero .page__lede {
  /* Drop the bottom-spacing so the globe can come up close. */
  margin-bottom: 8px;
}
.page--reports .reports-cta-row { margin: 4px 0 0; }
/* Reports stage: a FULL-VIEWPORT canvas (100vw x 100vh). The sphere is
   seated at the top of this canvas at rest (via reports-globe.js setPadding),
   so the bottom-text funnel shows through the transparent lower canvas. A
   zoom-in grows the disc downward over the funnel and outward to fill the
   whole viewable region, with no canvas edge to clip it short. Hero title +
   lede stack ON TOP (z-index 6); the funnel sits BEHIND (z-index 2).
   Width breaks out of the .page max-width container via negative margins. */
.reports-stage {
  position: relative;
  z-index: 3;                                     /* globe floats OVER the funnel backdrop */
  /* Full-viewport backdrop. width:100vw + the margin-left trick break out of
     the page's max-width container so the globe spans edge-to-edge. */
  width: 100vw;
  height: 100vh;                                  /* span the entire viewable region */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -118px;                             /* globe top tucks under the headline a touch */
  margin-bottom: 0;
  aspect-ratio: auto;                             /* drop earlier square constraint */
}
/* Pull the funnel up so it sits flush against the bottom of the visible
   globe — compensates for the stage's negative margin-top, prevents
   dead space from the stage's full-height in-flow contribution. */
.page--reports .reports-funnel { margin-top: -210px; }
.reports-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  border-radius: 0;
  z-index: 1;
  /* NB: do not force touch-action here; cooperativeGestures (reports-globe.js)
     needs the browser's one-finger scroll to pass through, and maplibre sets
     the correct touch-action on the canvas itself for two-finger capture. */
}
.reports-globe canvas { background: transparent !important; }
.reports-globe .mapboxgl-canvas-container,
.reports-globe .maplibregl-canvas-container { background: transparent !important; }
.reports-globe .mapboxgl-ctrl-attrib { display: none; }
/* Map credit pinned to the very bottom edge of the viewport (below page copy). */
.reports-globe .maplibregl-ctrl-bottom-right { position: fixed !important; bottom: 0; right: 6px; z-index: 60; }
.reports-globe .maplibregl-ctrl-attrib { background: rgba(0,0,0,0.55); font-size: 10px; }

/* Filter pills stacked vertically directly under the Reorient button —
   absolute, top-right of the globe stage. Reorient sits at top:14px
   (~36px tall), so filters start ~58px from the top with a small gap. */
.reports-filters {
  position: absolute;
  top: 58px; right: 14px;
  z-index: 12;
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 0;
}
.reports-filters .reports-filter {
  text-align: center;
  min-width: 110px;
}

/* Connector SVG — line drawn from the clicked hex's projected pixel to
   the active media popup. pointer-events: none so it never intercepts
   the map or popup. overflow: visible so the path's drop-shadow filter
   can extend past the SVG bounds. z-index sits above the globe canvas
   but below the popup (which Mapbox renders at z-index ~3 on its own
   container) — actually we use 11 so it stays beneath the popup, the
   filter pills at 12, and the Reorient/Focus buttons at 12. */
.reports-connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;
  overflow: visible;
}
/* Per SVG spec, child <path>/<circle> default to pointer-events: visiblePainted
   and do NOT inherit pointer-events:none from the parent <svg>. Force it here
   so the connector overlay never intercepts clicks meant for the hex layer. */
.reports-connector * { pointer-events: none !important; }
.reports-connector__path {
  fill: none;
  stroke: var(--color-primary-cyan500, #a5e3e8);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 6px rgba(165, 227, 232, 0.65));
  opacity: 0.9;
  animation: reports-connector-march 1.6s linear infinite;
}
.reports-connector__dot {
  fill: var(--color-primary-cyan500, #a5e3e8);
  filter: drop-shadow(0 0 8px rgba(165, 227, 232, 0.8));
  opacity: 0.95;
}
@keyframes reports-connector-march {
  to { stroke-dashoffset: -20; }
}

/* Reorient + Focus buttons — same visual language. Reorient is top-right
   (with the filter pills cluster); Focus is top-left so it doesn't crowd
   the right-side controls and is easy to thumb-tap on mobile. */
.reports-reorient,
.reports-focus {
  position: absolute;
  top: 14px;
  z-index: 12;
  padding: 8px 14px;
  font-family: var(--font-family-primary, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500, #a5e3e8);
  background: rgba(15, 18, 22, 0.85);
  border: 0.5px solid rgba(56, 62, 70, 0.9);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.reports-reorient { right: 14px; }
.reports-focus    { left: 14px;  }
.reports-reorient:hover,
.reports-focus:hover,
.reports-focus[aria-pressed="true"] {
  color: #fff;
  border-color: var(--color-primary-cyan500, #a5e3e8);
}

/* Focus mode — distraction-free globe. Hides the navbar, hero text, CTA
   row, filter pills, funnel section, footer, and the Phenom Sound widget
   so the globe + Reorient + Focus(Exit) buttons are the only UI on screen.
   Stage stretches to the full viewport once the navbar is gone. */
body.is-focus-mode .nav,
body.is-focus-mode .mobile-menu,
body.is-focus-mode .page--reports .page__hero,
body.is-focus-mode .page--reports .reports-cta-row,
body.is-focus-mode .page--reports .reports-funnel,
body.is-focus-mode .site-footer {
  display: none !important;
}
body.is-focus-mode .page--reports {
  padding-top: 0 !important;
}
body.is-focus-mode .reports-stage {
  height: 100vh;
  margin-top: 0;
}

/* Pull the funnel up so it overlaps the bottom edge of the globe area —
   makes the globe feel like a backdrop the UI sits over. */
.page--reports .reports-funnel {
  position: relative;
  z-index: 2;                                     /* BEHIND the globe so a zoom occludes it */
  /* Pull the funnel up behind the transparent lower canvas. The 100vh terms
     cancel against the stage's 100vh height, so the funnel heading lands a
     fixed offset (sphere diameter + small gap) below the stage top regardless
     of viewport height. Tune the px constant to the measured disc diameter. */
  margin-top: calc(582px - 100vh);
}
.reports-meta {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; gap: 8px; flex-wrap: wrap;
  z-index: 10;
}
.reports-meta__pill {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  font-family: var(--font-family-primary, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500, #a5e3e8);
  background: rgba(15, 18, 22, 0.85);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.reports-meta__pill--state { color: #aab1be; }
.reports-meta__pill > span { color: #fff; margin-right: 4px; font-weight: 700; }

.reports-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--spacing-md);
}
.reports-filter {
  padding: 7px 16px;
  font-family: var(--font-family-primary, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #aab1be;
  background: rgba(15, 18, 22, 0.6);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.reports-filter:hover { color: #fff; }
.reports-filter.is-active {
  color: var(--color-primary-cyan500, #a5e3e8);
  border-color: rgba(165, 227, 232, 0.55);
}

.reports-explainer { margin: var(--spacing-2xl) 0 var(--spacing-xl); }
.reports-explainer__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--spacing-md);
}
.reports-explainer__list li {
  padding: 16px 20px;
  background: rgba(15, 18, 22, 0.55);
  border: 0.5px solid rgba(56, 62, 70, 0.7);
  border-radius: 4px;
  font-size: 13px; line-height: 1.55; color: #c5cad2;
}
.reports-explainer__list li strong {
  color: var(--color-primary-cyan500, #a5e3e8);
  font-weight: 700;
}
.reports-explainer__list li code {
  font-family: var(--font-family-primary, monospace);
  font-size: 12px; color: #ffd2cc;
  padding: 1px 5px;
  background: rgba(195, 39, 28, 0.12);
  border-radius: 3px;
}

@media (max-width: 768px) {
  /* Mobile uses the same full-viewport globe model; only the headline
     overlap differs (the mobile h1 wraps taller). The funnel pull formula
     is viewport-height-independent, so it is shared with desktop. */
  .reports-stage { height: 100vh; margin-top: -132px; }
  .page--reports .reports-funnel { margin-top: calc(582px - 100vh); }
  .reports-filters { top: 8px; }
  .reports-filter { padding: 6px 12px; font-size: 10px; }
  .reports-reorient { top: 8px; right: 8px; padding: 6px 10px; font-size: 10px; }
  .reports-focus    { top: 8px; left: 8px;  padding: 6px 10px; font-size: 10px; }
  /* On mobile, focus mode lets the stage truly own the viewport. */
  body.is-focus-mode .reports-stage { height: 100vh; min-height: 100vh; }
}

/* Reports CTA row above the globe */
.reports-cta-row {
  display: flex; gap: var(--spacing-md); flex-wrap: wrap;
  justify-content: center;
  margin: var(--spacing-md) 0 var(--spacing-lg);
}
.cta-button--ghost {
  background: transparent;
  color: var(--color-primary-cyan500, #a5e3e8);
  border: 1px solid var(--color-primary-cyan500, #a5e3e8);
}

/* Reports popups (Mapbox Popup overrides) */
.maplibregl-popup.reports-popup .maplibregl-popup-content {
  background: rgba(15, 18, 22, 0.92);
  border: 0.5px solid rgba(56, 62, 70, 0.9);
  border-radius: 4px;
  color: #e3e5ea;
  font-family: var(--font-family-primary, monospace);
  padding: 0;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.maplibregl-popup.reports-popup .maplibregl-popup-tip { display: none; }
.maplibregl-popup.reports-popup .maplibregl-popup-close-button {
  color: #aab1be; font-size: 18px; padding: 4px 8px; right: 6px; top: 4px;
}

/* The hover popup must NEVER intercept pointer events — on iOS Safari,
   tap-throughs were going to the popup instead of the underlying hex,
   making clicks not register. Click popups (the media player) keep
   normal pointer-events because they need their own interaction. */
.maplibregl-popup.reports-popup--hover { pointer-events: none; }
.maplibregl-popup.reports-popup--hover .maplibregl-popup-content { pointer-events: none; }

.rp-hover { padding: 12px 14px; min-width: 220px; max-width: 320px; }
.rp-hover__head {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-primary-cyan500, #a5e3e8);
  font-weight: 700; margin-bottom: 8px;
}
.rp-hover__list { list-style: none; margin: 0; padding: 0; }
.rp-hover__list li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-top: 0.5px solid rgba(56, 62, 70, 0.4);
}
.rp-hover__list li:first-child { border-top: 0; }
.rp-hover__list .rp-status {
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700;
  padding: 2px 5px; border-radius: 2px;
  background: rgba(165, 227, 232, 0.15);
  color: var(--color-primary-cyan500, #a5e3e8);
}
.rp-hover__list .rp-status--trusted { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.rp-hover__list .rp-status--verified { background: rgba(165, 227, 232, 0.18); color: #a5e3e8; }
.rp-hover__list .rp-status--unsigned { background: rgba(170, 177, 190, 0.15); color: #aab1be; }
.rp-hover__list .rp-label { color: #e3e5ea; }
.rp-hover__list .rp-date { color: #aab1be; font-family: 'Courier New', monospace; font-size: 10px; }
.rp-hover__list .rp-media { color: var(--color-primary-red, #c3271c); font-size: 11px; }
.rp-hover__list .rp-more { color: #aab1be; font-style: italic; font-size: 11px; padding-top: 6px; }
.rp-hover__hint {
  margin-top: 10px; padding-top: 8px;
  border-top: 0.5px solid rgba(56, 62, 70, 0.4);
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--color-primary-red, #c3271c); font-weight: 700;
}

/* Media popup — large enough for an embedded video, framed like a card */
.maplibregl-popup.reports-popup--media .maplibregl-popup-content { padding: 0; }
.rp-media-card {
  width: 380px; max-width: 90vw;
  background: #0a0e14;
}
.rp-media-card__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.rp-media-card__player iframe,
.rp-media-card__player img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}
/* Marker live but the curated clip is still mirroring to the public bucket. */
.rp-media-card__player--pending {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-media-card__player--pending span {
  font-family: var(--font-family-base);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(165, 227, 232, 0.7);
  animation: rp-pending-pulse 1.6s ease-in-out infinite;
}
@keyframes rp-pending-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
.rp-media-card__title {
  padding: 12px 14px 4px;
  font-family: var(--font-family-hero, 'Oswald', sans-serif);
  font-size: 18px; font-weight: 700; color: #fff;
  letter-spacing: -0.3px;
}
.rp-media-card__date {
  padding: 0 14px 8px;
  font-family: 'Courier New', monospace; font-size: 11px; color: #aab1be;
  letter-spacing: 1px;
}
.rp-media-card__cta {
  display: block;
  margin: 4px 14px 14px;
  padding: 10px 12px;
  text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff;
  background: var(--color-primary-red, #c3271c);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.rp-media-card__cta:hover { background: var(--color-primary-red-hover, #851c15); }

/* Reports funnel block — install CTA after the globe */
.reports-funnel {
  margin: var(--spacing-2xl) 0 var(--spacing-2xl);
  padding: var(--spacing-xl) var(--spacing-lg);
  background: rgba(15, 18, 22, 0.55);
  border: 0.5px solid rgba(56, 62, 70, 0.7);
  border-radius: 4px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.reports-funnel__lede {
  font-size: 15px; line-height: 1.6; color: #c5cad2;
  margin: 0 0 var(--spacing-lg);
}
.reports-funnel__steps {
  list-style: none; padding: 0; margin: 0 0 var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-md);
}
.reports-funnel__steps li {
  position: relative;
  padding: 16px 18px 16px 56px;
  background: rgba(10, 14, 20, 0.55);
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 4px;
  font-size: 13px; line-height: 1.5; color: #c5cad2;
}
.reports-funnel__steps li strong {
  display: block;
  color: var(--color-primary-cyan500, #a5e3e8);
  font-size: 14px;
  margin-bottom: 4px;
}
.reports-funnel__num {
  position: absolute; left: 16px; top: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--color-primary-red, #c3271c);
  border-radius: 50%;
  font-family: var(--font-family-hero, 'Oswald', sans-serif);
  font-weight: 700; color: var(--color-primary-red, #c3271c);
  font-size: 16px;
}
.reports-funnel__cta {
  text-align: center;
}
.reports-funnel__note {
  margin: 12px 0 0;
  font-size: 12px; color: #aab1be;
}
.reports-funnel__note strong {
  color: var(--color-primary-cyan500, #a5e3e8);
  font-weight: 700;
}

/* ------------------------------------------------------------
   Features-page RADIO DIAL selector — one harmonious slider.
   A single panel containing:
     .radio-dial__scale   — horizontal track with tick marks
     .radio-dial__ticks   — repeating-gradient minor + major ticks
     .radio-dial__needle  — glowing cyan vertical needle that slides
     .radio-dial__station — clickable station buttons (4 tabs)
   Driven by features-animation.js + Anime.js v4 Scroll Observer.
   ------------------------------------------------------------ */
.radio-dial {
  /* Floats as a fixed tuner above the feature showcase: sticky pins it just
     below the fixed site nav while the stage scrolls past beneath it. */
  position: sticky;
  top: 64px;
  z-index: 90;
  display: block;
  width: max-content;
  max-width: 96vw;
  margin: 0 auto var(--spacing-xl);
}
@media (max-width: 768px) {
  .radio-dial { top: 56px; }
}
.radio-dial__panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border: 0.5px solid rgba(56, 62, 70, 0.9);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(15, 18, 22, 0.92) 0%, rgba(8, 10, 14, 0.92) 100%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(165, 227, 232, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 8px 22px -10px rgba(0, 0, 0, 0.6);
}
/* The horizontal "tuner" scale — needle + ticks live here, stations are
   absolutely positioned at fixed percentages. */
.radio-dial__scale {
  position: relative;
  flex: 1 1 auto;
  height: 60px;
  min-width: 520px;
  padding: 0 14px;
}
/* Major ticks at quarter intervals (between/around stations) plus minor
   ticks at finer subdivisions for that real-radio look. */
.radio-dial__ticks {
  position: absolute;
  left: 14px; right: 14px; top: 18px;
  height: 16px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(165, 227, 232, 0.45) 0 1px,
      transparent 1px 25%
    );
}
.radio-dial__ticks::before {
  content: '';
  position: absolute;
  inset: 60% 0 0 0;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(165, 227, 232, 0.18) 0 1px,
      transparent 1px 5%
    );
}
/* The needle — glowing cyan bar with a small bulb at the top. */
.radio-dial__needle {
  position: absolute;
  top: 4px;
  left: 0;
  width: 2px;
  height: 40px;
  background: var(--color-primary-cyan500, #a5e3e8);
  box-shadow:
    0 0 10px rgba(165, 227, 232, 0.85),
    0 0 22px rgba(165, 227, 232, 0.55);
  border-radius: 1px;
  pointer-events: none;
  will-change: transform;
  transform: translateX(0);
}
.radio-dial__needle::before {
  content: '';
  position: absolute;
  left: -3px; top: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary-cyan500, #a5e3e8);
  box-shadow: 0 0 12px rgba(165, 227, 232, 0.95);
}
/* Stations — absolute, evenly spaced (12.5 / 37.5 / 62.5 / 87.5 %).
   Each carries its own little tick (::before) above the label so the
   tick visually anchors the station to the scale. */
.radio-dial__station {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  padding: 4px 8px 2px;
  font-family: var(--font-family-primary, 'Roboto Mono', monospace);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(170, 177, 190, 0.75);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.radio-dial__station[data-index="0"] { left: 12.5%; }
.radio-dial__station[data-index="1"] { left: 37.5%; }
.radio-dial__station[data-index="2"] { left: 62.5%; }
.radio-dial__station[data-index="3"] { left: 87.5%; }
.radio-dial__station::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 14px;
  background: rgba(165, 227, 232, 0.55);
}
.radio-dial__station:hover {
  color: #fff;
}
.radio-dial__station:hover::before {
  background: var(--color-primary-cyan500, #a5e3e8);
}
.radio-dial__station.is-active {
  color: var(--color-primary-cyan500, #a5e3e8);
  text-shadow: 0 0 8px rgba(165, 227, 232, 0.6);
}
.radio-dial__station.is-active::before {
  background: var(--color-primary-cyan500, #a5e3e8);
  box-shadow: 0 0 6px rgba(165, 227, 232, 0.8);
}
@media (max-width: 768px) {
  .radio-dial__panel { padding: 12px 12px; }
  .radio-dial__scale { min-width: 320px; height: 54px; padding: 0 8px; }
  .radio-dial__station { font-size: 9px; padding: 3px 5px 2px; letter-spacing: 1.2px; }
}
@media (max-width: 480px) {
  .radio-dial__scale { min-width: 260px; }
  .radio-dial__station { font-size: 8px; }
}

/* Media page 2-column layout: media list + Logan's blog sidebar */
.media-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--spacing-xl);
  align-items: start;
  margin: 0 0 var(--spacing-xl);
}
.media-layout > .media-list { margin: 0; }

.blog-sidebar {
  position: sticky;
  top: calc(var(--spacing-xl) + 60px); /* clear the fixed nav */
  display: flex; flex-direction: column;
  gap: var(--spacing-md);
  padding: 22px 22px;
  background: rgba(15, 18, 22, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.blog-sidebar__title {
  margin: 0;
  font-family: var(--font-family-hero);
  font-weight: 700; font-size: 18px; line-height: 1.2;
  color: #e3e5ea;
  letter-spacing: -0.3px;
}
.blog-sidebar__lede {
  margin: 0 0 4px;
  font-size: 12px; line-height: 1.4;
  color: #aab1be;
}
.blog-sidebar__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  background: rgba(10, 14, 20, 0.55);
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-sidebar__card:hover {
  border-color: var(--color-primary-cyan500, #a5e3e8);
  transform: translateY(-1px);
}
.blog-sidebar__meta {
  margin: 0;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--color-primary-cyan500, #a5e3e8);
  font-weight: 700;
}
.blog-sidebar__cardtitle {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700; font-size: 14px; line-height: 1.3;
  color: #e3e5ea;
}
.blog-sidebar__excerpt {
  margin: 0;
  font-size: 12px; line-height: 1.5;
  color: #aab1be;
}
.blog-sidebar__more {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500, #a5e3e8);
}
.blog-sidebar__all {
  align-self: flex-end;
  margin-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-red, #c3271c);
  text-decoration: none;
}
.blog-sidebar__all:hover { text-decoration: underline; }

/* Stack on tablet/mobile — sidebar moves below the media list. */
@media (max-width: 900px) {
  .media-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-sidebar {
    position: static;
    top: auto;
  }
}

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--spacing-xl); }
.faq-item {
  background: rgba(15, 18, 22, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 14px;
  color: #e3e5ea;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "⌄"; color: var(--color-primary-cyan500); transition: transform 0.2s; flex-shrink: 0; }
.faq-item[open] summary::before { transform: rotate(180deg); }
.faq-item__num { color: var(--color-primary-cyan500); margin-right: 4px; font-variant-numeric: tabular-nums; }
.faq-item__body { padding: 0 20px 18px 36px; }
.faq-item__body p, .faq-item__body li { font-size: 13px; line-height: 1.6; color: #aab1be; margin: 0 0 8px; }
.faq-item__body ul { padding-left: 18px; }

/* Blog post cards */
.blog-list { display: flex; flex-direction: column; gap: var(--spacing-lg); margin: 0 0 var(--spacing-xl); }
.blog-card {
  display: block;
  padding: var(--spacing-xl);
  background: rgba(15, 18, 22, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.blog-card:hover { border-color: var(--color-primary-cyan500); transform: translateY(-2px); }
.blog-card__meta { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--color-primary-cyan500); text-transform: uppercase; margin-bottom: 10px; }
.blog-card__title { margin: 0 0 10px; font-family: var(--font-family-primary); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.3px; line-height: 1.25; color: #e3e5ea; }
.blog-card__excerpt { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #aab1be; }
.blog-card__more { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--color-primary-cyan500); }

/* ---- Individual blog post (article reading layout, redesign shell) ---- */
.post { max-width: 760px; margin: 0 auto; }
.post__panel {
  position: relative;
  padding: var(--spacing-2xl);
  background: rgba(15, 18, 22, 0.7);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
}
.post__header { margin: 0 0 var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 0.5px solid rgba(56, 62, 70, 0.8); }
.post__title {
  margin: 0 0 12px;
  font-family: var(--font-family-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--color-primary-cyan500);
  text-shadow: 0 0 14px rgba(165, 227, 232, 0.35);
}
.post__meta { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #aab1be; text-transform: uppercase; display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.post__body { font-size: 16px; line-height: 1.7; color: #c5cad2; }
.post__body p { margin: 0 0 1.25em; }
.post__body h2 { font-family: var(--font-family-hero); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.3px; color: var(--color-primary-cyan500); margin: 1.6em 0 0.5em; }
.post__body h3 { font-family: var(--font-family-primary); font-weight: 600; font-size: 17px; letter-spacing: 0.3px; color: #e3e5ea; margin: 1.4em 0 0.4em; }
.post__body a { color: var(--color-primary-cyan500); border-bottom: 1px dotted rgba(165, 227, 232, 0.5); transition: color 0.18s ease, border-color 0.18s ease; }
.post__body a:hover { color: #fff; border-color: #fff; }
.post__body img { width: 100%; height: auto; border-radius: 4px; border: 0.5px solid rgba(56, 62, 70, 0.8); margin: 1.5em 0; }
.post__body figure { margin: 1.5em 0; }
.post__body figcaption { font-size: 12px; color: #aab1be; text-align: center; margin-top: 8px; }
.post__body ul, .post__body ol { padding-left: 1.4em; margin: 0 0 1.25em; }
.post__body li { margin-bottom: 0.4em; }
.post__body blockquote { margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--color-primary-cyan500); color: #aab1be; font-style: italic; }
.post__footer { margin-top: var(--spacing-2xl); padding-top: var(--spacing-lg); border-top: 0.5px solid rgba(56, 62, 70, 0.8); }
.post__back { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary-cyan500); }
.post__back:hover { color: #fff; }
@media (max-width: 768px) { .post__panel { padding: 24px 20px; } }

/* Shop product grid */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-lg); margin: 0 0 var(--spacing-xl); }
.shop-item {
  padding: var(--spacing-lg);
  background: rgba(15, 18, 22, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
  text-align: center;
}
.shop-item__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, #1d3a5f 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-cyan500);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 12px;
}
.shop-item__image--alt { background: linear-gradient(135deg, #5f1d3a 0%, #0a0a0a 100%); color: #ff8ad4; }
.shop-item__title { margin: 0 0 6px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #e3e5ea; font-size: 14px; }
.shop-item__desc  { margin: 0; font-size: 12px; color: #aab1be; line-height: 1.5; }

/* ============================================================
   Features page — auto-cycling iPhone tour
   ============================================================ */
.features-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
  margin: var(--spacing-xl) 0;
  padding: 0;
  /* Pin the tour (phone + description) just below the sticky radio dial so it
     stops scrolling up with a clear gap instead of sliding under the dial.
     top = fixed nav (64px) + dial (~90px) + a small gap. The phone is also
     capped to the viewport height (the min-width:901px rule below) so the
     pinned tour always fits; otherwise the tall phone outgrows the viewport,
     the stage unpins, and it slides under the dial at the bottom of the page.
     The dial sits at z-index 90, so it stays above this if they ever meet. */
  position: sticky;
  top: 168px;
}
@media (max-width: 900px) {
  .features-stage {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    /* Single-column stack is taller than the viewport; pinning would trap the
       lower content, so let it scroll normally on narrow screens. */
    position: static;
  }
}
/* Desktop: cap the phone to the space below the pinned dial so the sticky tour
   never outgrows the viewport (full 280px on tall viewports, shrinks a little
   on short ones). Without this the tall phone unpins and slides under the dial. */
@media (min-width: 901px) {
  .features-phone { width: clamp(200px, calc((100vh - 360px) * 9 / 19.5), 280px); }
}

.features-phone {
  position: relative;
  justify-self: center;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(180deg, #1c1f24 0%, #0f1216 100%);
  border-radius: 13% / 6%;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.07),
    inset 0 0 0 2px #2a2d33,
    0 18px 44px rgba(0, 0, 0, 0.65);
  overflow: visible;
}
.features-phone__screen {
  position: absolute;
  top: 1.5%;
  left: 3.5%;
  width: 93%;
  height: 97%;
  border-radius: 11.5% / 5%;
  overflow: hidden;
  background: linear-gradient(180deg, #05080c 0%, #0a0f17 100%);
  container-type: inline-size;
}

/* Each scene fills the screen; only the .is-active one is visible. */
.features-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.features-scene.is-active {
  opacity: 1;
  transform: scale(1);
}
.features-scene__img { width: 100%; height: 100%; object-fit: cover; }

/* Map mock (placeholder visual) */
.map-mock {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at center, rgba(165,227,232,0.10) 0%, rgba(0,0,0,0.6) 75%),
    linear-gradient(180deg, #060a10 0%, #0a0f17 100%);
  overflow: hidden;
}
.map-mock__grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,  transparent 0 14px, rgba(165,227,232,0.06) 14px 15px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(165,227,232,0.06) 14px 15px);
  mix-blend-mode: screen;
}
.map-mock__pin {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--color-primary-cyan500);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(165,227,232,0.85);
  animation: map-pin-pulse 2s ease-in-out infinite;
}
.map-mock__pin--1 { top: 28%; left: 22%; animation-delay: 0s; }
.map-mock__pin--2 { top: 35%; left: 65%; animation-delay: 0.4s; }
.map-mock__pin--3 { top: 50%; left: 38%; animation-delay: 0.8s; background: var(--color-primary-red); box-shadow: 0 0 12px rgba(195,39,28,0.85); }
.map-mock__pin--4 { top: 60%; left: 70%; animation-delay: 1.2s; }
.map-mock__pin--5 { top: 70%; left: 28%; animation-delay: 1.6s; }
.map-mock__pin--6 { top: 45%; left: 80%; animation-delay: 0.2s; background: var(--color-primary-red); box-shadow: 0 0 12px rgba(195,39,28,0.85); }
@keyframes map-pin-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}
.map-mock__label {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: clamp(8px, 2.4cqw, 11px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-primary-cyan500);
  text-shadow: 0 0 6px rgba(165,227,232,0.5);
}

/* Chat mock */
.chat-mock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10% 6% 6%;
  height: 100%;
  font-family: var(--font-family-primary);
  font-size: clamp(8px, 2.4cqw, 11px);
}
.chat-mock__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(13, 26, 20, 0.7);
  border: 0.5px solid rgba(29, 95, 58, 0.6);
  border-radius: 4px;
  font-size: clamp(7px, 2cqw, 9px);
  font-weight: 700;
  letter-spacing: 1px;
  color: #6cffa8;
  text-transform: uppercase;
}
.chat-mock__msg {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 6px 8px;
  background: rgba(21, 25, 32, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 4px;
  max-width: 85%;
}
.chat-mock__msg strong {
  font-size: clamp(7px, 2cqw, 9px);
  font-weight: 700;
  color: var(--color-primary-cyan500);
  letter-spacing: 0.6px;
  flex-shrink: 0;
}
.chat-mock__msg p {
  margin: 0;
  font-size: clamp(8px, 2.3cqw, 10px);
  color: #c5cad2;
  line-height: 1.4;
}
.chat-mock__msg--in  { align-self: flex-start; }
.chat-mock__msg--out { align-self: flex-end; background: rgba(165, 227, 232, 0.08); border-color: rgba(165, 227, 232, 0.3); }
.chat-mock__compose {
  margin-top: auto;
  padding: 8px 10px;
  background: rgba(10, 14, 20, 0.7);
  border: 0.5px solid rgba(56, 62, 70, 0.5);
  border-radius: 4px;
}
.chat-mock__placeholder {
  font-size: clamp(7px, 2cqw, 9px);
  color: #6b7280;
  letter-spacing: 0.4px;
}

/* Description column */
.features-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
}
.features-desc__eyebrow {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-primary-red);
  margin: 0;
  text-transform: uppercase;
}
.features-desc__title {
  font-family: var(--font-family-hero);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  text-shadow: 0 0 12px rgba(165, 227, 232, 0.4);
  margin: 0 0 8px;
  min-height: 1.1em;
}
.features-desc__body {
  font-family: var(--font-family-primary);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: #c5cad2;
  margin: 0;
  min-height: 4.8em;
}
.features-desc__progress {
  display: flex;
  gap: 8px;
  margin-top: var(--spacing-md);
}
.features-desc__dot {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: rgba(165, 227, 232, 0.18);
  transition: background 0.4s ease;
}
.features-desc__dot.is-active {
  background: var(--color-primary-cyan500);
  box-shadow: 0 0 6px rgba(165, 227, 232, 0.6);
}

/* ============================================================
   Contact page — two big options + FAQ link + progressive signup
   ============================================================ */
.feature-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  .feature-grid--two { grid-template-columns: 1fr; }
}
.feature-card--prominent {
  padding: var(--spacing-xl);
  text-align: left;
}
.feature-card--prominent .feature-card__icon {
  width: 56px; height: 56px;
  font-size: 26px;
}
.feature-card--prominent h3 {
  font-size: 18px;
  margin-bottom: var(--spacing-sm);
}
.feature-card--prominent p {
  font-size: 14px;
  line-height: 1.6;
}

.contact-faq-link {
  text-align: center;
  margin: var(--spacing-3xl) 0 var(--spacing-md);
  font-size: 13px;
  color: #aab1be;
}
.contact-faq-link a {
  color: var(--color-primary-cyan500);
  font-weight: 700;
  letter-spacing: 0.6px;
}

/* Quick signup */
.qs {
  max-width: 560px;
  margin: var(--spacing-3xl) auto 0;
  padding: var(--spacing-xl);
  background: rgba(15, 18, 22, 0.7);
  backdrop-filter: blur(8px) saturate(120%);
  border: 0.5px solid rgba(56, 62, 70, 0.8);
  border-radius: 4px;
  text-align: center;
}
.qs__question {
  font-family: var(--font-family-hero);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  margin: 0 0 var(--spacing-md);
}
.qs__choice {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.qs__pill {
  padding: 12px 22px;
  background: rgba(10, 14, 20, 0.6);
  border: 1px solid rgba(56, 62, 70, 0.9);
  color: #c5cad2;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.qs__pill:hover {
  border-color: var(--color-primary-cyan500);
  color: var(--color-primary-cyan500);
  transform: translateY(-1px);
}
.qs__pill.is-active {
  background: var(--color-primary-cyan500);
  border-color: var(--color-primary-cyan500);
  color: #060606;
  box-shadow: 0 0 12px rgba(165, 227, 232, 0.5);
}

/* Honor the [hidden] attribute over the flex display rules below.
   Without this, .qs__form[hidden] / .qs__row[hidden] / .qs__action-row[hidden]
   still take layout space (display:flex wins specificity-tie over [hidden]). */
.qs__form[hidden],
.qs__row[hidden],
.qs__action-row[hidden] { display: none !important; }

.qs__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.qs__form.qs__form--shown {
  opacity: 1;
  transform: translateY(0);
}
.qs__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.qs__row[data-step="email"] { opacity: 1; transform: translateY(0); }
.qs__row.qs__row--shown { opacity: 1; transform: translateY(0); }
.qs__label {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
}
.qs__input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(10, 14, 20, 0.65);
  border: 1px solid rgba(56, 62, 70, 0.8);
  border-radius: 3px;
  color: #e3e5ea;
  font-family: var(--font-family-primary);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}
.qs__input:focus {
  outline: none;
  border-color: var(--color-primary-cyan500);
  box-shadow: 0 0 0 2px rgba(165, 227, 232, 0.18);
}
.qs__submit {
  align-self: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.qs__submit.qs__submit--shown {
  opacity: 1;
  transform: translateY(0);
}

/* Action choice — appears after lastname is filled */
.qs__action-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.qs__action-row.qs__row--shown {
  opacity: 1;
  transform: translateY(0);
}
.qs__sub-question {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  margin: 0 0 12px;
}
.qs__action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .qs__action-grid { grid-template-columns: 1fr; }
}
.qs__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px;
  background: rgba(15, 18, 22, 0.7);
  border: 1px solid rgba(56, 62, 70, 0.9);
  border-radius: 4px;
  color: #c5cad2;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-family-primary);
}
.qs__action:hover {
  border-color: var(--color-primary-cyan500);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.qs__action.is-active {
  border-color: var(--color-primary-cyan500);
  background: rgba(165, 227, 232, 0.10);
  box-shadow: 0 0 0 1px var(--color-primary-cyan500), 0 0 16px rgba(165, 227, 232, 0.25);
}
.qs__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #1d3a5f 0%, #2d5a8f 100%);
  border-radius: 4px;
  color: var(--color-primary-cyan500);
  font-size: 22px;
  font-weight: 700;
}
.qs__action[data-action="drop"] .qs__action-icon {
  background: linear-gradient(135deg, #5f1d3a 0%, #8f2d5a 100%);
  color: #ff8ad4;
}
.qs__action.is-active .qs__action-icon {
  box-shadow: 0 0 12px rgba(165, 227, 232, 0.4);
}
.qs__action-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #e3e5ea;
}
.qs__action.is-active .qs__action-title { color: var(--color-primary-cyan500); }
.qs__action-desc {
  font-size: 12px;
  color: #aab1be;
  line-height: 1.4;
}

/* Message textarea — revealed after Drop a message is chosen */
.qs__textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-family-primary);
}

/* Native handoff card revealed when Drop a media file is chosen.
   (The full inline upload UI is being built; for now this is a clean
   in-page primer that explains what happens next, then the submit
   handler navigates the user into Phenom Drop.) */
.qs__drop-card {
  padding: 20px 22px;
  background: rgba(10, 14, 20, 0.7);
  border: 1px solid rgba(56, 62, 70, 0.85);
  border-left: 3px solid var(--color-primary-cyan500);
  border-radius: 4px;
}
.qs__drop-card__lead {
  margin: 0 0 12px;
  font-family: var(--font-family-primary);
  font-size: 14px;
  line-height: 1.55;
  color: #e3e5ea;
}
.qs__drop-card__lead strong { color: var(--color-primary-cyan500); }
.qs__drop-card__steps {
  margin: 0 0 12px;
  padding-left: 22px;
  font-family: var(--font-family-primary);
  font-size: 13px;
  line-height: 1.6;
  color: #c5cad2;
}
.qs__drop-card__steps li { margin-bottom: 4px; }
.qs__drop-card__note {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 12px;
  font-style: italic;
  color: #aab1be;
}
.qs__status {
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 1em;
}
.qs__status--success { color: #6cffa8; }
.qs__status--error   { color: #ff8a8a; }

/* ============================================================
   Support contact form — Brevo-bound, GDPR consent gated
   ============================================================ */
.support-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.support-form__row { display: flex; flex-direction: column; gap: 6px; }
.support-form__label {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
}
.support-form__req { color: var(--color-primary-red); margin-left: 2px; }
.support-form__input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(10, 14, 20, 0.65);
  border: 1px solid rgba(56, 62, 70, 0.8);
  border-radius: 3px;
  color: #e3e5ea;
  font-family: var(--font-family-primary);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}
.support-form__input::placeholder { color: #6b7280; }
.support-form__input:focus {
  outline: none;
  border-color: var(--color-primary-cyan500);
  box-shadow: 0 0 0 2px rgba(165, 227, 232, 0.18);
}
.support-form__textarea { resize: vertical; min-height: 120px; font-family: var(--font-family-primary); }
.support-form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.support-form__consent {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.support-form__legend {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-cyan500);
  margin-bottom: 4px;
  padding: 0;
}
.support-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #c5cad2;
  cursor: pointer;
}
.support-form__check input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-cyan500);
  flex-shrink: 0;
}
.support-form__check em { color: #9aa1ad; font-size: 12px; }
.support-form__submit {
  align-self: flex-start;
  margin-top: 6px;
}
.support-form__status {
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 1em;
}
.support-form__status--success { color: #6cffa8; }
.support-form__status--error   { color: #ff8a8a; }

.cta-row { display: flex; justify-content: center; margin: var(--spacing-xl) 0; }
.cta-button {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 32px;
  background: var(--color-primary-red);
  border: 1px solid #851c15;
  color: #fff;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.cta-button:hover { background: var(--color-primary-red-hover); }

/* Mobile */
@media (max-width: 768px) {
  .page { padding: 88px 20px 40px; }
  .page__hero { padding: 12px 0; margin-bottom: 24px; }
  .card { padding: 20px; }
  .feature-card { padding: 18px; }
  .team-card { padding: 18px; }
  .media-item { flex-direction: column; gap: 12px; padding: 14px; }
  .media-item__embed { flex: 0 0 auto; width: 100%; }
}

/* ---------- Responsive ---------- */
/* ============================================================
   Responsive — mid-width (desktop-ish, down to 1100px)
   Text + arrows stay anchored to phone via calc(50% ± 240px).
   ============================================================ */
@media (max-width: 1100px) {
  .hero-title { font-size: clamp(38px, 5vw, 56px); line-height: 1.05; }
}

/* ============================================================
   Mobile (portrait phones) — Figma 4168:2993 at 375px.
   Completely replaces the sticky-scroll animation with a normal
   vertically-scrolling stacked layout.
   Triggers at 768px so tablets in portrait also get the clean layout.
   ============================================================ */
.nav__hamburger { display: none; }      /* desktop: no hamburger */
.store-buttons  { display: none; }       /* desktop: QR only */
.title-break    { display: inline; }     /* always 2-line break for the hero title */

@media (max-width: 768px) {
  /* -- Reset scroll-animation -- */
  .hero-stage-wrap { height: auto; z-index: auto; }
  .hero-stage {
    position: relative;
    top: auto; left: auto; right: auto;
    height: auto;
    min-height: 0;
    --p: 1;                              /* force end-state for any calc() */
    --q1: 1; --q2: 1; --q3: 1; --q4: 1;
  }
  .hero-stage--done { display: block !important; }

  /* -- Background: keep fixed grid but shrink the floor for mobile -- */
  .hero-bg__floor {
    width: 300vw;                        /* narrower on small screens */
    height: auto;
    bottom: -40vw;
  }

  /* -- Nav: logo + hamburger only -- */
  .nav {
    display: flex;                             /* override desktop grid */
    grid-template-columns: none;
    padding: 12px 20px;
    gap: 12px;
    justify-content: space-between;
  }
  .nav__desktop,
  .nav__desktop-cta { display: none; }
  .nav__hamburger {
    display: inline-flex;
    position: fixed;
    top: 12px;
    right: max(16px, env(safe-area-inset-right, 16px));
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: rgba(21, 21, 21, 0.7);
    border: 1.5px solid var(--color-primary-cyan500);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(165, 227, 232, 0.2);
    color: var(--color-primary-cyan500);
    -webkit-tap-highlight-color: rgba(165, 227, 232, 0.3);
    z-index: 200;          /* above nav (100) and all stage content */
  }
  .nav__hamburger img {
    width: 22px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 0 2px rgba(165, 227, 232, 0.5));
  }

  /* -- Mobile menu drawer (hidden until toggled) -- */
  .mobile-menu {
    position: fixed;
    top: 64px; left: 0; right: 0;
    z-index: 99;
    background: rgba(6, 6, 6, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #383c43;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__link {
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 22px;
    color: var(--color-neutral-white);
    text-transform: uppercase;
    padding: 14px 0;
    border-bottom: 1px solid #1f2328;
    min-height: 44px;                    /* iOS touch target */
    display: flex; align-items: center;
  }
  .mobile-menu__link:last-of-type { border-bottom: none; }
  .mobile-menu__cta {
    margin-top: 16px;
    text-align: center;
    justify-content: center;
    height: 48px;
  }

  /* -- Hero stage __inner: vertical flex column, natural flow -- */
  .hero-stage__inner {
    position: relative; inset: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 88px 20px 40px;             /* 64 nav + 24 top gap */
    pointer-events: auto;
  }

  /* -- Title (forced 2-line break on phones via <br class="title-break">) -- */
  .hero-title {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 0 12px rgba(165, 227, 232, 0.45);
  }
  .title-break { display: inline; }

  /* -- left-content / right-content: merged into a stacked column -- */
  .left-content,
  .right-content {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 100%; max-width: 340px;
    text-align: center;
    align-items: center;
    opacity: 1;
    order: 2;                            /* after title by default */
  }
  .left-content  { order: 2; }           /* description right after title */
  .right-content { order: 4; }           /* CTA block after phone */
  .typewriter {
    -webkit-mask-image: none;
            mask-image: none;            /* no scanline reveal on mobile */
  }
  .typewriter::after { display: none; }
  .left-content__text { max-width: 340px; text-align: center; }
  .right-content__eyebrow { font-size: 16px; line-height: 20px; text-align: center; }
  .right-content__caption { font-size: 14px; line-height: 18px; text-align: center; }

  /* -- QR code: hide on mobile (store buttons do the job) -- */
  .qr-code { display: none; }

  /* -- Store buttons -- */
  .store-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 340px;
  }
  .store-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    min-height: 44px;
    background: #000;
    border: 1px solid rgba(166, 166, 166, 0.4);
    color: var(--color-neutral-white);
    padding: 8px;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(165, 227, 232, 0.2);
  }
  .store-btn:active { transform: scale(0.98); }
  .store-btn__icon { width: 20px; height: 24px; flex-shrink: 0; }
  .store-btn--google .store-btn__icon { width: 21px; }
  .store-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    width: 82px;
  }
  .store-btn__eyebrow {
    font-size: 8px;
    font-family: var(--font-family-primary);
    color: var(--color-neutral-white);
    margin-bottom: 3px;
  }
  .store-btn__name {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-family-primary);
  }
  .store-btn__name-img { height: 15px; width: auto; display: block; }

  /* -- Phone card: scales to viewport; inner/frame/screen percentages cascade -- */
  .phone-card {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%; max-width: 320px;
    aspect-ratio: 469 / 480;                   /* same shape as desktop, just smaller */
    height: auto;
    order: 3;
  }
  .phone-card__corner { opacity: 1; }
  /* No inner/frame/screen overrides needed —
     the desktop percentage layout works at any card size. */


  /* -- Stats: full-width bar below phone -- */
  .stats {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%; max-width: 340px;
    height: auto;
    padding: 16px 12px;
    gap: 8px;
    background: rgba(21, 21, 21, 0.8);
    border: 1px solid #24282e;
    order: 5;
  }
  .stats__corner { opacity: 1; }
  .stats__item { gap: 8px; }

  /* -- Footer breathing room -- */
  .site-footer { padding: 24px 20px; font-size: 11px; }
  .post-hero { padding: 24px 20px; font-size: 13px; }
}

/* ---------- Extra-small (very narrow Androids, < 360px) ---------- */
@media (max-width: 360px) {
  .hero-stage__inner { padding: 80px 16px 32px; gap: 20px; }
  .hero-title { font-size: 26px; line-height: 30px; }
  .phone-card { max-width: 280px; }            /* aspect-ratio handles height */
}

/* ---------- iOS notch / safe-area support ---------- */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .nav {
      padding-top: calc(12px + env(safe-area-inset-top));
      padding-left:  max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
    .mobile-menu {
      top: calc(64px + env(safe-area-inset-top));
      padding-left:  max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
    .hero-stage__inner,
    .site-footer,
    .post-hero {
      padding-left:  max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
    .site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  }
}

/* ---------- Reduced motion: skip to end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-stage {
    --p: 1 !important;
    --q1: 1 !important; --q2: 1 !important;
    --q3: 1 !important; --q4: 1 !important;
  }
  .hero-stage-wrap { height: 100vh; }
  .typewriter::after { display: none; }
}

/* ============================================================
   L4 POLISH — reveal-on-scroll, color threading, hover CTAs.
   Additive and scoped to content pages (main.page) so the home
   hero-stage scroll animation is untouched. The [data-reveal]
   initial-hidden state is applied by JS only (progressive
   enhancement: no-JS users always see content).
   ============================================================ */

/* --- Reveal-on-scroll: blocks rise + sharpen as they enter view --- */
.page [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.page [data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .page [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* --- Color threading: cyan→red accent bar under section headings --- */
.page__h2, .card h2 { position: relative; }
.page__h2::after, .card h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--color-primary-cyan500) 0%, var(--color-primary-red) 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(165, 227, 232, 0.35);
}

/* --- Hover lift + cyan glow on the workhorse content blocks --- */
.card, .media-item, .team-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover, .media-item:hover, .team-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary-cyan500);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.75), 0 0 0 0.5px rgba(165, 227, 232, 0.25);
}

/* --- Hover-revealed CTA cue: link underline sweeps in, arrow brightens --- */
.media-item__meta a { position: relative; }
.media-item__meta a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--color-primary-cyan500);
  transition: width 0.25s ease;
}
.media-item:hover .media-item__meta a { color: #fff; }
.media-item:hover .media-item__meta a::after { width: 100%; }

/* --- Section flow divider: cyan→red gradient rule that pulls the eye down --- */
.section-divider {
  height: 1px;
  margin: var(--spacing-3xl) auto;
  max-width: 720px;
  background: linear-gradient(90deg, transparent, var(--color-primary-cyan500) 38%, var(--color-primary-red) 64%, transparent);
  opacity: 0.5;
  border: 0;
}

/* ============================================================
   L4: Desktop MEGA MENU — hover-revealed panel under "Features".
   Adds section depth + a hover-revealed CTA (an explicit L3→L4
   signal). Injected by JS on every page; desktop-only (the
   hamburger drawer owns mobile nav).
   ============================================================ */
.mega {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 95;
  width: min(760px, 94vw);
  padding: 18px;
  border: 0.5px solid rgba(56, 62, 70, 0.95);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 16, 20, 0.96) 0%, rgba(8, 10, 14, 0.96) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(165, 227, 232, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mega__item {
  display: block;
  padding: 12px 12px 14px;
  border: 0.5px solid rgba(56, 62, 70, 0.6);
  border-radius: 6px;
  background: rgba(21, 25, 32, 0.5);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.mega__item:hover { transform: translateY(-2px); border-color: var(--color-primary-cyan500); background: rgba(21, 25, 32, 0.9); }
.mega__item-k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 9px;
  border-radius: 5px; font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, #14202c 0%, #1d3346 100%);
  color: var(--color-primary-cyan500);
  border: 0.5px solid rgba(165, 227, 232, 0.25);
}
.mega__item-t {
  margin: 0 0 4px; font-family: var(--font-family-primary);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: #e3e5ea;
}
.mega__item-d { margin: 0; font-size: 11.5px; line-height: 1.4; color: #aab1be; }
.mega__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(56, 62, 70, 0.7);
}
.mega__foot-note { margin: 0; font-size: 12px; color: #c5cad2; }
.mega__cta {
  font-family: var(--font-family-primary); font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 9px 16px; border-radius: 4px;
  background: var(--color-primary-red); color: #fff;
  transition: filter 0.16s ease, transform 0.16s ease;
}
.mega__cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
@media (max-width: 900px) { .mega { display: none !important; } }

/* --- Platform-aware store links: iOS shows the App Store button only,
   Android shows the Google Play button only. The is-ios / is-android class
   is set on <html> by home-animation.js. Desktop is unaffected (the whole
   .store-buttons block is hidden there; QR is shown instead). --- */
html.is-ios     .store-btn--google { display: none !important; }
html.is-android .store-btn--apple  { display: none !important; }