/* ============================================================
   LIGHTHOUSE LANDING — ETHEREAL_GLASS over a Living Canvas
   Brand: #0F0F12 base · Trail Mint #5DCAA5 · Amber #E0A458
   Type: Syne (headlines) · Clash Display (compact UI/phone mockups) · Space Grotesk (body/utility)
   Scroll/motion engine: Lenis + GSAP/ScrollTrigger
   ============================================================ */

:root {
  --bg: #0F0F12;
  --surface: #1A1A1F;
  --hairline: rgba(255, 255, 255, 0.05);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --text: #FFFFFF;
  --text-2: #D1D5DB;
  --text-3: #9CA3AF;
  --mint: #5DCAA5;
  --mint-dim: rgba(93, 202, 165, 0.14);
  --amber: #E0A458;

  /* Syne runs wide enough that it overflows the small, tightly-boxed labels
     inside phone mockups (place names, stat cards, etc.) — so it's scoped
     to --font-accent for real headlines only. --font-display stays Clash,
     which every compact UI string was already sized to fit. */
  --font-display: 'Clash Display', 'Space Grotesk', sans-serif;
  --font-accent: 'Syne', 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;

  --transition-fluid: cubic-bezier(0.76, 0, 0.24, 1);
  --transition-elastic: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-sonar: cubic-bezier(0.1, 0.7, 0.3, 1);

  --pad: clamp(20px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); }
body {
  font-family: var(--font-body);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { position: relative; z-index: 1; }
::selection { background: var(--mint); color: var(--bg); }
img, canvas, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--mint); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.utility {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* full-page mouse-reactive particle field, behind everything */
#bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.glass {
  background: rgba(26, 26, 31, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
}

/* ============ NAV — hides on scroll down, returns on scroll up ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  background: rgba(15, 15, 18, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
  transition: padding 0.5s var(--transition-fluid), transform 0.4s var(--transition-fluid);
}
.nav--shrunk { padding-top: 10px; padding-bottom: 10px; }
.nav__brand {
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px; letter-spacing: 0.18em; color: var(--text);
}
.nav__dot { color: var(--mint); }
.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__label { display: none; }
@media (min-width: 640px) { .nav__label { display: inline; } }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 12px 26px;
  transition: transform 0.6s var(--transition-elastic),
              background 0.35s var(--transition-fluid),
              box-shadow 0.35s var(--transition-fluid);
  will-change: transform;
}
.btn--ghost {
  color: var(--text);
  border-color: var(--hairline-strong);
  background: rgba(255, 255, 255, 0.03);
}
.btn--ghost:hover { background: var(--mint-dim); border-color: var(--mint); color: var(--mint); }
.btn--solid {
  background: var(--mint); color: #08110D;
  box-shadow:
    0 0 0 1px rgba(93, 202, 165, 0.25),
    0 8px 24px -8px rgba(93, 202, 165, 0.45),
    0 24px 80px -24px rgba(93, 202, 165, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.5);
}
.btn--solid:hover {
  box-shadow:
    0 0 0 1px rgba(93, 202, 165, 0.45),
    0 12px 32px -8px rgba(93, 202, 165, 0.6),
    0 32px 96px -24px rgba(93, 202, 165, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 94svh;
  display: flex; flex-direction: column; align-items: stretch;
  overflow: hidden;
}
@media (min-width: 980px) {
  /* desktop: .hero__visual goes position:absolute (out of flow), so .hero__inner
     becomes the only real flex participant again — center it vertically */
  .hero { flex-direction: row; align-items: center; }
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 96px var(--pad) 56px;
  max-width: 1200px; margin: 0 auto;
}
.hero__copy { width: 100%; max-width: 720px; }
@media (min-width: 980px) {
  /* the hand/phone mockup is hidden at this breakpoint, so the copy column
     can claim more of the row — needed headroom for Syne's wider glyphs */
  .hero__copy { max-width: 1000px; }
}

/* the human touch — a real hand, a real screen. Breaks out of .hero__inner's
   centered column deliberately, so it can anchor to the actual viewport edge
   instead of floating inside the same 1200px text column. Mobile: full-width,
   stacked below the form. Desktop: pinned to the true right edge, vertically
   centered on the section. */
.hero__visual {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  margin-top: 8px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
.hero__visual-img {
  width: min(440px, 90vw); height: auto; display: block;
  /* the source photo crops the sleeves in a hard rectangular line — fade the
     lower third to transparent so it dissolves into the dark background
     instead of showing a visible cut */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.85) 58%, rgba(0, 0, 0, 0.4) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.85) 58%, rgba(0, 0, 0, 0.4) 78%, transparent 100%);
}
/* desktop: the hand/phone mockup is a tab + mobile moment only — on desktop
   the hero is just the headline and the waitlist form, full width */
@media (min-width: 980px) {
  .hero__visual { display: none; }
}
/* screen rect measured directly from the source image's pixels (800x658 native) */
.hero__screen {
  position: absolute;
  left: 42.1%; top: 13.1%; width: 18.5%; height: 42.9%;
  border-radius: 6% / 4%;
  background:
    linear-gradient(rgba(45, 55, 72, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 55, 72, 0.35) 1px, transparent 1px),
    linear-gradient(160deg, #17171c, #0d0d10);
  background-size: 22% 14%, 22% 14%, cover;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* the real thumb overlaps the bottom of the phone screen in the source
     photo — fade our composited screen out near the bottom so the thumb
     shows through instead of getting flatly covered by our overlay */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 92%);
}
.hero__screen-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__screen-origin {
  position: absolute; left: 14%; top: 86%; transform: translate(-50%, -50%);
}
.hero__screen-origin i {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-2); box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4);
}
.hero__screen-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  opacity: 1;
  transition: left 1.1s var(--transition-fluid), top 1.1s var(--transition-fluid),
              opacity 0.5s var(--transition-fluid);
}
.hero__screen-pin.is-hidden { opacity: 0; }
.hero__screen-pin i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 10px 3px rgba(93, 202, 165, 0.6);
}
.hero__screen-ring {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--mint);
  transform: translate(-50%, -50%);
  animation: sonar 3.2s var(--ease-sonar) infinite;
}
.hero__screen-label {
  /* sits above the map/route/pin drawing area (which occupies roughly
     y:30%-86%) so status text never overlaps the animation, and stays
     clear of the phone screen's own bottom mask-fade too */
  position: absolute; left: 8%; right: 8%; top: 9%;
  font-family: var(--font-body); font-weight: 600; font-size: 6.5px; letter-spacing: 0.02em;
  color: var(--text); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 1; transition: opacity 0.4s var(--transition-fluid);
}
.hero__screen-label.is-fading { opacity: 0; }
.hero__screen-bar {
  position: absolute; left: 20%; right: 20%; bottom: 25%;
  height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0; transition: opacity 0.3s var(--transition-fluid);
}
.hero__screen-bar.is-visible { opacity: 1; }
.hero__screen-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--mint); box-shadow: 0 0 6px 1px rgba(93, 202, 165, 0.6);
  transition: width 1.4s linear;
}
.hero__eyebrow { color: var(--amber); margin-bottom: 18px; }
.hero__title {
  font-family: var(--font-accent);
  font-weight: 700;
  /* Syne runs noticeably wider than Clash Display did at the same size —
     sized down from the old clamp(40px, min(9vw,9.5vh), 108px) so "to
     weekend. Let's go." still lands on one line instead of wrapping */
  font-size: clamp(34px, min(7.4vw, 7.6vh), 86px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 22px;
}
.split-line { display: block; overflow: hidden; color: rgba(255, 255, 255, 0.92); }
.split-line__inner { display: block; will-change: transform; }
.hero__sub {
  max-width: 560px;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text-2);
  margin-bottom: 24px;
}

/* USP row — the proof strip between the hook and the ask */
.hero__usps {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 620px;
  margin-bottom: 30px;
}
.usp {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-strong);
  transition: border-color 0.35s var(--transition-fluid), background 0.35s var(--transition-fluid);
}
.usp:hover { border-color: var(--mint); background: var(--mint-dim); }
.usp--lead { border-color: rgba(93, 202, 165, 0.35); background: var(--mint-dim); }
.usp__stat {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; color: var(--text); letter-spacing: -0.01em; white-space: nowrap;
}
.usp__label { color: var(--text-3); }

/* GSAP-driven reveal — base state is invisible until the tween runs */
.reveal-up, .vicinity-reveal, .closing-reveal, .fleet-reveal { opacity: 0; }

/* waitlist form */
.waitlist { max-width: 520px; }
.waitlist__field { position: relative; }
.waitlist__input {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; color: var(--text);
  background: rgba(26, 26, 31, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 18px 180px 18px 24px;
  outline: none;
  transition: border-color 0.35s var(--transition-fluid), box-shadow 0.35s var(--transition-fluid);
}
.waitlist__input::placeholder { color: var(--text-3); }
.waitlist__input:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 4px var(--mint-dim), 0 24px 80px -32px rgba(93, 202, 165, 0.4);
}
.waitlist__btn {
  position: absolute; top: 5px; right: 5px;
  height: calc(100% - 10px);
  padding: 0 22px;
}
.waitlist__note { margin-top: 14px; padding-left: 24px; }
.waitlist__note--ok { color: var(--mint); }
.waitlist__note--err { color: var(--amber); }
@media (max-width: 560px) {
  .waitlist__input { padding-right: 24px; }
  .waitlist__btn { position: static; width: 100%; margin-top: 10px; padding: 15px 22px; height: auto; }
}

.hero__explore {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.7; cursor: pointer;
  animation: bouncecue 2s infinite;
  transition: opacity 0.3s var(--transition-fluid);
}
.hero__explore:hover, .hero__explore:focus-visible { opacity: 1; }
.hero__explore-arrow {
  color: var(--text); font-size: 16px; line-height: 1;
  transition: color 0.3s var(--transition-fluid), transform 0.3s var(--transition-fluid);
}
.hero__explore:hover .hero__explore-arrow, .hero__explore:focus-visible .hero__explore-arrow {
  color: var(--mint); transform: translateY(3px);
}
@keyframes bouncecue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* ============ MARQUEE ============ */
.marquee {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding: 18px 0;
  background: rgba(26, 26, 31, 0.35);
}
.marquee__track {
  display: flex; white-space: nowrap; width: max-content;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; letter-spacing: 0.28em; color: var(--text-3);
}
@keyframes marquee { to { transform: translateX(-25%); } }

/* ============================================================
   THE DIVE — scroll-jacked walkthrough.
   Native position:sticky (Lenis preserves real scroll, unlike a
   transform-virtualized scroller) + GSAP ScrollTrigger stepping
   through discrete scenes, each a whole "screen" of the app.
   ============================================================ */
.dive { position: relative; z-index: 1; }
.dive__runway { height: 600vh; position: relative; }
.dive__stage {
  height: 100svh; position: sticky; top: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; width: 100%;
}
.dive__scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 12vh 6vw 0; width: 100%;
  opacity: 0; pointer-events: none; gap: 1rem;
}
@media (min-width: 768px) {
  .dive__scene { flex-direction: row; justify-content: space-between; align-items: center; padding: 10vh 10vw; gap: 0; }
}
.dive__scene.is-active { pointer-events: auto; z-index: 10; }

.scene__copy { width: 100%; text-align: center; z-index: 20; }
@media (min-width: 768px) { .scene__copy { max-width: 42%; text-align: left; } }
.scene__label { color: var(--mint); display: block; margin-bottom: 10px; }
.scene__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 6vw, 54px); line-height: 1.06;
  letter-spacing: -0.01em; color: var(--text);
  margin: 4px 0 14px;
}
.scene__text { font-size: 14.5px; opacity: 0.75; line-height: 1.55; max-width: 420px; margin: 0 auto; }
@media (min-width: 768px) { .scene__text { font-size: 16px; margin: 0; max-width: none; } }

/* progress rail — right edge, three ticks, one travelling dot */
.dive__rail {
  position: absolute; right: clamp(14px, 3vw, 34px); top: 30%; bottom: 30%;
  width: 1px; background: var(--hairline-strong); z-index: 25;
}
.dive__rail i { position: absolute; left: -4px; width: 9px; height: 1px; background: var(--hairline-strong); }
.dive__rail i:nth-child(1) { top: 16%; }
.dive__rail i:nth-child(2) { top: 50%; }
.dive__rail i:nth-child(3) { top: 84%; }
.dive__dot {
  position: absolute; left: -3.5px; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 12px 2px rgba(93, 202, 165, 0.6);
}

/* mockup scale wrapper — shrinks on short/mobile viewports, full size on desktop */
.mockup-container {
  perspective: 1000px; transform-style: preserve-3d;
  transform: scale(0.75); transform-origin: top center;
  margin-top: 10px;
}
@media (max-height: 700px) and (max-width: 767px) { .mockup-container { transform: scale(0.62); } }
@media (min-width: 768px) { .mockup-container { transform: scale(1); transform-origin: center; margin-top: auto; margin-bottom: auto; } }

/* ============ PHONE CASE — breathing neon border, shared chrome ============ */
.phone {
  position: relative;
  padding: 2px;
  border-radius: 40px;
  background: #000;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  transform-style: preserve-3d;
  will-change: transform;
}
.phone::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 60%, var(--mint) 85%, transparent 100%);
  animation: spin-glow 4s linear infinite;
  z-index: 0; pointer-events: none;
}
@keyframes spin-glow {
  0% { transform: rotate(0deg); opacity: 0.3; }
  50% { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.3; }
}
.phone__body {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 9 / 18.5;
  background: linear-gradient(160deg, #17171C, #101014);
  border-radius: 38px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 20px rgba(255, 255, 255, 0.02);
}
@media (min-width: 768px) { .phone__body { border-radius: 46px; } }

.dive .phone { width: 300px; height: 600px; border-radius: 40px; }
@media (min-width: 768px) { .dive .phone { width: 320px; height: 650px; border-radius: 48px; } }
.dive .phone__body { height: 100%; }

.phone__screen {
  position: relative; width: 100%; height: 100%;
  background:
    linear-gradient(rgba(45, 55, 72, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 55, 72, 0.22) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 0%, #15151A 0%, #0F0F12 70%);
  background-size: 44px 44px, 44px 44px, cover;
  display: flex; flex-direction: column;
  padding: 14px;
}

/* items that GSAP stagger-reveals when a dive scene activates */
.m-anim-elem { opacity: 0; will-change: transform, opacity; }

/* ============================================================
   SCENE 1's inner walkthrough — Instagram reel → share → result.
   Three absolutely-stacked steps, cross-fading, autoplayed while
   the dive camera is in front of this scene.
   ============================================================ */
.revstack { position: relative; flex: 1; margin: 8px -14px -14px; overflow: hidden; }
.revstep {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.5s var(--transition-fluid), transform 0.6s var(--transition-fluid);
  pointer-events: none;
}
.revstep.is-active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 2; }

/* step A — the reel */
.revstep--reel { overflow: hidden; }
.reel__bg {
  position: absolute; inset: -6%;
  background:
    radial-gradient(120% 100% at 30% 15%, #1c332c, #0a1210 62%),
    radial-gradient(100% 80% at 82% 92%, #223a30, transparent 60%);
  animation: reelpan 12s ease-in-out infinite alternate;
}
@keyframes reelpan { from { transform: scale(1.05) translateY(0); } to { transform: scale(1.16) translateY(-2%); } }
.reel__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.68)); }
.reel__rail {
  position: absolute; right: 10px; bottom: 66px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.reel__icon {
  color: #fff; font-size: 16px; line-height: 1;
  background: none; border: none; padding: 0; cursor: default;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.reel__icon--share { position: relative; transition: transform 0.25s var(--ease-sonar); }
.reel__icon--share.is-tapped { transform: scale(0.72); }
.reel__ripple {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid var(--mint); opacity: 0; transform: scale(0.6);
}
.reel__icon--share.is-tapped .reel__ripple { animation: reelripple 0.6s var(--ease-sonar) forwards; }
@keyframes reelripple { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
.reel__caption {
  position: absolute; left: 14px; right: 58px; bottom: 18px; z-index: 3;
  color: #fff; font-size: 11px; line-height: 1.45;
}
.reel__user { display: block; font-weight: 700; margin-bottom: 3px; }

/* step B — share/import */
.revstep--share { display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.shareimport { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.shareimport__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.shareimport__spark { color: var(--mint); font-size: 18px; flex: none; text-shadow: 0 0 10px rgba(93, 202, 165, 0.8); }
.shareimport__row strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 12.5px; margin-bottom: 3px; }
.shareimport__bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.shareimport__bar i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), rgba(93, 202, 165, 0.5)); transition: width 0.5s var(--transition-fluid); }

/* step C — the result (dock/pills/map/card reuse the shared classes) */
.revstep--result { display: flex; flex-direction: column; padding: 0 14px 14px; }

/* ============================================================
   SCENE 2's inner walkthrough — shortlist → name group →
   send invite → live poll. Vote-scene steps all share normal
   padding (unlike scene 1's full-bleed reel step).
   ============================================================ */
.phone__screen--vote .revstep { padding: 0 14px 14px; display: flex; flex-direction: column; }
.revstep__label { color: var(--mint); margin-bottom: 10px; }

/* step A — shortlist grid */
.shortgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shortcard {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.4s var(--transition-fluid);
}
.shortcard.is-picked { border-color: var(--mint); }
.shortcard__swatch { display: block; width: 100%; height: 42px; border-radius: 8px; }
.shortcard__swatch--1 { background: linear-gradient(135deg, #1c332c, #2c4a3d); }
.shortcard__swatch--2 { background: linear-gradient(135deg, #26323f, #3a5068); }
.shortcard__swatch--3 { background: linear-gradient(135deg, #332a1c, #4a3b2c); }
.shortcard__swatch--4 { background: linear-gradient(135deg, #2c1c33, #4a2c4a); }
.shortcard strong { font-size: 9.5px; color: var(--text-2); font-weight: 600; }
.shortcard__check {
  position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mint); color: #08110D; font-style: normal; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0); opacity: 0;
  transition: transform 0.4s var(--transition-elastic), opacity 0.3s;
}
.shortcard.is-picked .shortcard__check { transform: scale(1); opacity: 1; }

/* step B — create group */
.creategroup__title {
  padding: 12px 14px; font-family: var(--font-display); font-weight: 600;
  color: var(--text); font-size: 14px;
}
.creategroup__avatars { display: flex; gap: 8px; }
.creategroup__avatars b {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--text-3);
  background: var(--surface); border: 1.5px solid var(--hairline-strong);
  transform: scale(0.6); opacity: 0;
  transition: transform 0.4s var(--transition-elastic), opacity 0.3s, border-color 0.3s, color 0.3s;
}
.creategroup__avatars b.is-added { transform: scale(1); opacity: 1; border-color: var(--mint); color: var(--text); }

/* step C — invite send */
.inviteshare { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.inviteshare__icon { font-size: 20px; flex: none; }
.inviteshare strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 13px; margin-bottom: 3px; }
.inviteshare__status { margin-top: 16px; text-align: center; }
.inviteshare__avatars { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.inviteshare__avatars b {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--hairline-strong);
}
.inviteshare__avatars b.is-sent::after {
  content: '✓'; position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(93, 202, 165, 0.92); color: #08110D; font-size: 10px; font-weight: 700;
  animation: sentpop 0.3s var(--transition-elastic);
}
@keyframes sentpop { from { transform: scale(0); } to { transform: scale(1); } }

/* status bar */
.pstat { display: flex; justify-content: space-between; align-items: center; color: var(--text-3); font-size: 9px; padding: 2px 8px 8px; z-index: 5; }
.pstat__icons { display: inline-flex; gap: 3px; }
.pstat__icons i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.pstat__icons i:last-child { background: var(--mint); }

/* search dock + AI spark */
.pdock { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-2); }
.pdock__ai { color: var(--mint); text-shadow: 0 0 10px rgba(93, 202, 165, 0.8); }

/* filter pills */
.ppills { display: flex; gap: 6px; margin-bottom: 6px; }
.ppill { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline-strong); color: var(--text-3); }
.ppill--on { color: #08110D; background: var(--mint); border-color: var(--mint); font-weight: 600; }

/* map area */
.pmap { position: relative; flex: 1; margin: 2px 0 8px; }
.pmap__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmap__tag { position: absolute; left: var(--x); top: var(--y); font-size: 7.5px; color: var(--text-3); opacity: 0.75; }
.pin { position: absolute; left: var(--x, 52%); top: var(--y, 34%); }
.pin i {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 18px 4px rgba(93, 202, 165, 0.55);
}
.pin--amber i { width: 9px; height: 9px; background: var(--amber); box-shadow: 0 0 12px 3px rgba(224, 164, 88, 0.45); }
.pin--origin i { width: 7px; height: 7px; background: var(--text-2); box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.35); }
.pin__ring {
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--mint);
  transform: translate(-50%, -50%);
  animation: sonar 3.2s var(--ease-sonar) infinite;
  pointer-events: none;
}
@keyframes sonar {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

/* place card + actions */
.phone__card { padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; }
.phone__card strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 15.5px; }
.phone__via { color: var(--mint); }
.pactions { display: flex; gap: 14px; margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--hairline); color: var(--mint); font-size: 8.5px; }

/* vote screen */
.phone__screen--vote { justify-content: flex-start; gap: 9px; padding-top: 26px; }
.phone__votehead { display: flex; flex-direction: column; gap: 6px; }
.phone__votetitle { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); }
.phone__voterow-top { display: flex; align-items: center; justify-content: space-between; }
.phone__votesub { font-size: 8.5px; }
.pavatars { display: flex; }
.pavatars b {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--mint);
  margin-left: -6px;
}
.pavatars b:first-child { margin-left: 0; }
.pavatars b:nth-child(2) { border-color: var(--amber); }
.pavatars b:nth-child(4) { border-color: var(--amber); }
.pavatars__more { border-color: var(--hairline-strong) !important; color: var(--text-3) !important; }
.voterow {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  align-items: center; font-size: 12.5px; color: var(--text-2);
  padding: 8px 10px; border-radius: 14px;
  border: 1px solid var(--hairline);
}
.voterow__star { color: var(--amber); font-style: normal; font-size: 10px; }
.tally { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.tally i {
  display: block; height: 100%; width: var(--w, 40%); border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), rgba(93, 202, 165, 0.5));
  transform: scaleX(0); transform-origin: left center;
}
.votepill {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-style: normal;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline-strong);
}
.votepill--yes { color: var(--mint); border-color: rgba(93, 202, 165, 0.5); background: var(--mint-dim); }
.votepill--maybe { color: var(--amber); }
.votepill--no { color: var(--text-3); }
.pbtn {
  margin-top: 4px; text-align: center;
  background: var(--mint); color: #08110D;
  font-weight: 600; font-size: 13px;
  padding: 11px; border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(93, 202, 165, 0.5);
}
.phone__votefoot { text-align: center; font-size: 8px; margin-top: 2px; }

/* radar screen — oversized circle bleeding off both edges */
.phone__screen--radar { justify-content: flex-start; overflow: hidden; }
.radar {
  position: absolute; top: 6%; left: -50%;
  width: 200%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(93, 202, 165, 0.14);
  background: radial-gradient(circle, transparent 30%, rgba(93, 202, 165, 0.03) 70%);
  overflow: hidden;
}
.radar__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(93, 202, 165, 0.32) 100%);
  animation: sweep 4s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.radar__blip {
  position: absolute; left: var(--x); top: var(--y);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 12px 3px rgba(93, 202, 165, 0.6);
  transform: translate(-50%, -50%);
}
.radar__blip--amber { background: var(--amber); box-shadow: 0 0 12px 3px rgba(224, 164, 88, 0.6); }
.pnotif {
  margin-top: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  border-left: 2px solid var(--mint); position: relative; z-index: 5;
}
.pnotif strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 13.5px; }

/* ============================================================
   HOW TO REACH — train, bus, car, bike. A real, already-shipped
   core feature (Phase 2) that deserves its own spotlight.
   ============================================================ */
.reach { position: relative; z-index: 1; padding: clamp(90px, 12vw, 170px) var(--pad); border-top: 1px solid var(--hairline); max-width: 1200px; margin: 0 auto; }
.reachdemo { display: flex; justify-content: center; }
.phone__screen--reach { display: flex; flex-direction: column; gap: 9px; }
.reachhead { display: flex; flex-direction: column; gap: 3px; margin-bottom: 3px; }
.reachhead strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 16px; }
.routecard { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 16px; padding: 12px 14px; }
.routecard--featured { border-color: rgba(93, 202, 165, 0.5); background: linear-gradient(160deg, rgba(93, 202, 165, 0.1), var(--surface)); }
.routecard__top { display: flex; align-items: center; gap: 12px; }
.routecard__icon { font-size: 19px; flex: none; }
.routecard__body { display: flex; flex-direction: column; gap: 2px; }
.routecard__body strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 14px; }
.routecard__badge {
  display: inline-block; margin-top: 9px; padding: 4px 10px; border-radius: 999px;
  background: rgba(224, 164, 88, 0.14); color: var(--amber);
  font-size: 7.5px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;
}

/* ============================================================
   PLAYGROUND — the scout, watching itself work.
   Fully autoplaying, looping, no input ever hooked to anything —
   a typed-out query, a camera zoom to the matching pin, a card.
   ============================================================ */
.playground {
  position: relative; z-index: 1;
  padding: clamp(90px, 12vw, 170px) var(--pad);
  border-top: 1px solid var(--hairline);
  max-width: 1200px; margin: 0 auto;
}
.playground__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.playground__eyebrow { color: var(--mint); margin-bottom: 16px; }
.playground__title {
  font-family: var(--font-accent); font-weight: 600;
  font-size: clamp(32px, 5.6vw, 58px); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--text);
  margin-bottom: 18px;
}
.playground__sub { opacity: 0.8; }
.playground__foot { margin-top: 24px; opacity: 0.7; text-align: center; }

.scoutdemo { display: flex; justify-content: center; }

/* ============================================================
   EXPLORE — the marquee's category words, made concrete: tap a
   chip, the map fills with just that category's pins. Colors
   mirror the real app's per-category accents (not the single
   brand mint) since this phone screen is a portrait of the app.
   ============================================================ */
.explore {
  position: relative; z-index: 1;
  padding: clamp(90px, 12vw, 170px) var(--pad);
  border-top: 1px solid var(--hairline);
  max-width: 1200px; margin: 0 auto;
}
.exploredemo { display: flex; justify-content: center; }
.explore__count { color: var(--mint); margin-bottom: 8px; }
.xpills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.xpill {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.06); color: var(--text-3);
  transition: background 0.3s var(--transition-fluid), border-color 0.3s var(--transition-fluid),
              box-shadow 0.3s var(--transition-fluid), color 0.3s var(--transition-fluid);
}
.xpill.is-active {
  background: var(--accent); border-color: var(--accent); color: #06231B; font-weight: 600;
  box-shadow: 0 0 20px var(--accent-glow);
}
.explore__map { position: relative; flex: 1; margin-top: 4px; }
.xpin {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  transform: translate(-50%, -50%);
  width: 14px; height: 14px; opacity: 0;
}
.xpin__glow {
  position: absolute; inset: -8px; border-radius: 50%;
  background: var(--accent); opacity: 0.28; filter: blur(4px);
}
.xpin__core {
  position: absolute; inset: 0; border-radius: 50%;
  background: #1A1A1F; border: 2px solid var(--accent);
}
.phone--big { width: min(300px, 80vw); }
.phone--big .phone__body { width: 100%; }

.pdock__ai { color: var(--mint); margin-right: 8px; flex: none; text-shadow: 0 0 10px rgba(93, 202, 165, 0.8); animation: sparkle 2.6s var(--ease-sonar) infinite; }
@keyframes sparkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.pdock__typed { font-size: 12.5px; color: var(--text-2); }
.pdock__caret { color: var(--mint); font-weight: 600; animation: caretblink 1s step-end infinite; }
@keyframes caretblink { 50% { opacity: 0; } }

.pmap--big { flex: 1; margin: 4px 0 8px; overflow: hidden; border-radius: 18px; }
.pmap__zoom {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.9s var(--transition-fluid);
  transform: scale(1);
}
.pmap__zoom.is-zoomed { transform: scale(2.5); }

.spin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); transition: opacity 0.5s var(--transition-fluid); }
.spin i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3); opacity: 0.55;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.12);
  transition: background 0.4s var(--transition-fluid), width 0.4s var(--transition-fluid), height 0.4s var(--transition-fluid);
}
.spin--dim { opacity: 0.25; }
.spin--on i { width: 13px; height: 13px; background: var(--mint); opacity: 1; box-shadow: 0 0 18px 4px rgba(93, 202, 165, 0.55); }
.spin__ping {
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--mint);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.spin--on .spin__ping { animation: sonar 1.6s var(--ease-sonar) infinite; }

#scoutCard {
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--transition-fluid), transform 0.6s var(--transition-fluid);
  pointer-events: none;
}
#scoutCard.is-show { opacity: 1; transform: translateY(0); }
#scoutCardName { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 16px; }
.pbtn--auto {
  margin-top: 6px; text-align: center; background: var(--mint); color: #08110D;
  font-weight: 600; font-size: 12.5px; padding: 10px; border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(93, 202, 165, 0.5);
  transition: transform 0.2s var(--ease-sonar);
}
.pbtn--auto.is-pressed { transform: scale(0.94); }

/* ============================================================
   WEATHER PREP — know before you go.
   Autoplaying loop through 3 saved places, each with its own sky.
   ============================================================ */
.weather { position: relative; z-index: 1; padding: clamp(90px, 12vw, 170px) var(--pad); border-top: 1px solid var(--hairline); max-width: 1200px; margin: 0 auto; }
.weatherdemo { display: flex; justify-content: center; }
.phone__screen--weather { position: relative; align-items: center; overflow: hidden; }

.wfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wfx__cloud {
  position: absolute; top: 8%; left: -10%;
  width: 70%; height: 22%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); filter: blur(16px);
  opacity: 0; transition: opacity 0.6s var(--transition-fluid);
  animation: clouddrift 16s ease-in-out infinite;
}
.wfx__cloud--2 { top: 18%; left: 20%; width: 55%; animation-delay: -7s; }
.is-rain .wfx__cloud, .is-mist .wfx__cloud { opacity: 1; }
@keyframes clouddrift { 0%, 100% { transform: translateX(-4%); } 50% { transform: translateX(6%); } }

.wfx__sun { position: absolute; top: 10%; left: 50%; width: 90%; aspect-ratio: 1; transform: translateX(-50%); opacity: 0; transition: opacity 0.6s var(--transition-fluid); }
.is-sun .wfx__sun { opacity: 1; }
.wfx__sun i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 85%, rgba(224, 164, 88, 0.3) 92%, transparent 100%);
  animation: spin-glow 9s linear infinite;
}

.wfx__rain {
  position: absolute; top: -12%; width: 2px; height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(93, 202, 165, 0.55), transparent);
  opacity: 0; transition: opacity 0.5s var(--transition-fluid);
  animation: raindrop 1s linear infinite;
}
.is-rain .wfx__rain { opacity: 0.85; }
@keyframes raindrop { 0% { transform: translateY(-10%); } 100% { transform: translateY(650%); } }

.wfx__mist {
  position: absolute; left: -20%; width: 140%; height: 20%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  filter: blur(7px);
  opacity: 0; transition: opacity 0.6s var(--transition-fluid);
  animation: mistdrift 10s ease-in-out infinite;
}
.wfx__mist--2 { top: 34%; animation-delay: -5s; }
.wfx__mist:first-of-type { top: 16%; }
.is-mist .wfx__mist { opacity: 1; }
@keyframes mistdrift { 0%, 100% { transform: translateX(-6%); } 50% { transform: translateX(6%); } }

.wloc { position: relative; z-index: 2; text-align: center; color: var(--text-3); margin-top: 4px; }
.whero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 8px; text-align: center; }
.whero__icon {
  font-size: 52px; line-height: 1;
  filter: drop-shadow(0 0 18px rgba(93, 202, 165, 0.45));
  animation: iconbob 4s ease-in-out infinite;
}
.is-sun .whero__icon { filter: drop-shadow(0 0 20px rgba(224, 164, 88, 0.55)); }
@keyframes iconbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.whero__temp { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--text); line-height: 1; }
.whero__temp sup { font-size: 18px; font-weight: 600; color: var(--text-3); }
.whero__cond { color: var(--mint); margin-top: 2px; }
.is-rain .whero__cond, .is-mist .whero__cond { color: var(--text-2); }

.whourly { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 5px; padding: 8px 2px; margin-top: auto; }
.whr { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.whr i {
  display: block; width: 100%; max-width: 14px; height: 34px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); position: relative; overflow: hidden;
}
.whr i::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--h, 30%); border-radius: 6px;
  background: linear-gradient(180deg, var(--mint), rgba(93, 202, 165, 0.4));
  transition: height 0.8s var(--transition-fluid);
}
.whr span { font-size: 7px; }

.wbest { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-top: 8px; }
.wbest__icon { font-size: 18px; flex: none; }
.wbest__body strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 12.5px; margin-bottom: 3px; }

/* ============================================================
   COLLECTIONS — gets smarter with time (Pro).
   Three steps: your saved places → the taste it learned →
   tap for a randomized, personalized suggestion.
   ============================================================ */
.collection { position: relative; z-index: 1; padding: clamp(90px, 12vw, 170px) var(--pad); border-top: 1px solid var(--hairline); max-width: 1200px; margin: 0 auto; }
.collectiondemo { display: flex; justify-content: center; }
/* wraps the phone so the badge can float outside its overflow:hidden case */
.procard { position: relative; display: inline-block; }

.probadge {
  position: absolute; top: -16px; left: 50%; z-index: 6;
  transform: translateX(-50%) rotate(-4deg);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, var(--amber), #f0c185);
  color: #241505; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.08em;
  box-shadow: 0 8px 20px -6px rgba(224, 164, 88, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15);
  animation: probob 3s ease-in-out infinite;
}
.probadge__icon { font-size: 11px; }
@keyframes probob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(2deg); }
}

.phone__screen--collection .revstep { padding: 0 14px 14px; display: flex; flex-direction: column; }

/* step A — your collection */
.revstep--colbuild { justify-content: space-between; }
.colhead { display: flex; align-items: baseline; justify-content: space-between; }
.colhead strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 15px; }
.colgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.colswatch {
  position: relative; display: block; aspect-ratio: 1; border-radius: 9px; overflow: hidden;
}
.colswatch::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.6));
}
.colswatch--1 { background: linear-gradient(135deg, #1c332c, #2c4a3d); }
.colswatch--2 { background: linear-gradient(135deg, #26323f, #3a5068); }
.colswatch--3 { background: linear-gradient(135deg, #332a1c, #4a3b2c); }
.colswatch--4 { background: linear-gradient(135deg, #2c1c33, #4a2c4a); }
.colswatch--5 { background: linear-gradient(135deg, #1c2c33, #2c4048); }
.colswatch--6 { background: linear-gradient(135deg, #332c1c, #4a4228); }
.colswatch__label {
  position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 1;
  font-style: normal; font-weight: 600; font-size: 8.5px; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.colstat { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.colstat__icon { color: var(--mint); font-size: 14px; flex: none; text-shadow: 0 0 10px rgba(93, 202, 165, 0.7); }

/* step B — taste profile */
.revstep--coltaste { justify-content: space-between; }
.tastetop { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 9px 14px; }
.tastetop__icon { font-size: 13px; }
.tastetop strong { color: var(--mint); font-weight: 700; }
.tastebar { display: flex; align-items: center; gap: 10px; }
.tastebar__label { width: 76px; flex: none; display: flex; align-items: center; gap: 6px; }
.tastebar__icon { flex: none; width: 14px; text-align: center; font-style: normal; font-size: 11px; line-height: 1; }
.tastebar__track { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tastebar__track i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), rgba(93, 202, 165, 0.4)); transition: width 1s var(--transition-fluid); }
.tastebar__pct { width: 30px; flex: none; text-align: right; color: var(--mint); }
.tasteinsight { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.tasteinsight__icon { color: var(--mint); font-size: 15px; flex: none; text-shadow: 0 0 10px rgba(93, 202, 165, 0.7); }

/* step C — result card (top) → flowing line (fills the gap) → shuffle button (bottom) */
.revstep--colsuggest { justify-content: flex-start; }
.colsuggest { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.colsuggest__match { color: var(--mint); }
.colsuggest strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 16px; transition: opacity 0.15s; }
.colsuggest.is-shuffling strong { opacity: 0.5; }

/* the flow connector — a pulse travels from the button (source) up to
   the result card (target) every time "Surprise me" is tapped */
.colflow { position: relative; flex: 1; min-height: 70px; }
.colflow__line {
  position: absolute; top: 2%; bottom: 2%; left: 50%; width: 1px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--hairline-strong) 0 4px, transparent 4px 9px);
}
.colflow__pulse {
  position: absolute; left: 50%; bottom: 2%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 14px 4px rgba(93, 202, 165, 0.7);
  transform: translateX(-50%); opacity: 0;
  transition: bottom 0.85s var(--transition-fluid), opacity 0.3s var(--transition-fluid);
}
.colflow__pulse.is-flowing { opacity: 1; bottom: 96%; }

/* button — press scale + its own neon loading sweep, end to end and back */
.colshuffle {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; margin-top: auto;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text);
  transition: transform 0.2s var(--ease-sonar), border-color 0.3s var(--transition-fluid);
}
.colshuffle.is-pressed { transform: scale(0.95); border-color: var(--mint); }
.colshuffle__fill {
  position: absolute; inset: 0; z-index: 0; width: 0%;
  background: linear-gradient(90deg, rgba(93, 202, 165, 0.5), var(--mint));
  box-shadow: 0 0 16px 2px rgba(93, 202, 165, 0.5) inset;
  transition: width 0.55s var(--transition-fluid);
}
.colshuffle__fill.is-loading { width: 100%; }
.colshuffle__icon, .colshuffle > span:not(.colshuffle__fill) { position: relative; z-index: 1; }
.colshuffle__icon { font-size: 16px; display: inline-block; }
.colshuffle__icon.is-spinning { animation: diespin 0.5s linear; }
@keyframes diespin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   VICINITY MODE — coming soon
   ============================================================ */
.vicinity { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid var(--hairline); padding: clamp(90px, 14vw, 200px) var(--pad); }
.vicinity__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(50px, 8vw, 64px); align-items: center;
}
@media (min-width: 880px) { .vicinity__inner { grid-template-columns: 1.1fr 0.9fr; } }
.vicinity__eyebrow { color: var(--amber); margin-bottom: 16px; }
.vicinity__title {
  font-family: var(--font-accent); font-weight: 700;
  font-size: clamp(44px, 8vw, 88px); line-height: 0.98;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 22px;
}
.vicinity__text { max-width: 460px; margin-bottom: 26px; }
.vicinity__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; }
.vicinity__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px 3px rgba(93, 202, 165, 0.5); animation: sparkle 2s ease-in-out infinite; }

.vicinity__visual { position: relative; display: flex; justify-content: center; }
.vmockup { width: min(320px, 82vw); transform-style: preserve-3d; }
/* .procard is display:inline-block so it shrink-wraps around .phone--big in
   the flex demo sections (Scout/Collection) — but here it wraps a plain
   .phone with no explicit width, which depends on filling its parent's
   width. Inline-block's shrink-to-fit collapsed it instead, crushing the
   whole mockup down to near-nothing. Scoped to .vmockup only so the
   flex-based sections above are untouched. */
.vmockup .procard { display: block; width: 100%; }
.phone__screen--vicinity { align-items: center; justify-content: center; position: relative; }
.pchip {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  padding: 6px 14px;
}
.v-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.6; z-index: 1;
}
.vradar {
  position: relative; z-index: 2;
  width: 78%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.vradar__ring { position: absolute; inset: 0; border: 1px solid rgba(93, 202, 165, 0.10); border-radius: 50%; }
.vradar__ring:nth-child(2) { inset: 20%; border-color: rgba(93, 202, 165, 0.16); }
.vradar__ring:nth-child(3) { inset: 40%; border-color: rgba(93, 202, 165, 0.22); }
.vradar__you { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 20px 4px rgba(93, 202, 165, 0.6); z-index: 5; }
.vradar__pulse {
  position: absolute; inset: -20px; border: 1px solid var(--mint); border-radius: 50%;
  animation: pulse-ring 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes pulse-ring { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }

.vnotif {
  position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 8;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;
}
.vnotif__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vnotif strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 14.5px; display: block; margin-bottom: 3px; }
.vnotif__sub { color: var(--mint); }
.vnotif__arrow {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint); color: #08110D;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.vnotif__bar { width: 100%; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vnotif__bar i { display: block; width: 34%; height: 100%; background: var(--mint); }

/* ============================================================
   LIGHTHOUSE FLEET — for tour operators & event organizers.
   On the roadmap: reuses the Vicinity two-column layout, its own
   scoped reveal classes so the two sections' GSAP timelines never
   cross-talk. Three steps: overview → flow analysis → live route.
   ============================================================ */
.fleet { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid var(--hairline); padding: clamp(90px, 14vw, 200px) var(--pad); }
.phone__screen--fleet .revstep { padding: 0 14px 14px; display: flex; flex-direction: column; }

/* step A — overview */
.revstep--fleetoverview { justify-content: space-between; }
.fleethead { display: flex; flex-direction: column; gap: 2px; }
.fleethead strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 15px; }
.fleetscore { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fleetscore__num { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--mint); line-height: 1; }
.fleetstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fleetstat { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; }
.fleetstat strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 15px; }

/* step B — flow analysis: line chart, bar chart, radial gauge */
.revstep--fleetanalytics { justify-content: space-between; }
.fleetchart { height: 56px; }
.fleetchart svg { width: 100%; height: 100%; }
#fleetLine { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s var(--transition-fluid); }
.fleetbars { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.fleetbars i {
  flex: 1; display: block; height: var(--h); border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(93, 202, 165, 0.5), var(--mint));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.9s var(--transition-fluid);
}
.fleetring { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.fleetring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fleetring__bg, .fleetring__fg { fill: none; stroke-width: 3; }
.fleetring__bg { stroke: rgba(255, 255, 255, 0.08); }
.fleetring__fg { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s var(--transition-fluid); }
.fleetring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; font-size: 8px; }

/* step C — live route */
.revstep--fleetmap { justify-content: flex-start; gap: 10px; }
.fleetbus {
  position: absolute; width: 14px; height: 14px;
  transition: left 1.8s linear, top 1.8s linear;
}
.fleetbus i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px 4px rgba(224, 164, 88, 0.6); }

/* ============ CLOSING MANIFESTO ============ */
.closing-section { position: relative; z-index: 1; min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(80px, 12vw, 160px) var(--pad); }
.closing-inner { max-width: 900px; }
.closing__title {
  font-family: var(--font-accent); font-weight: 700;
  font-size: clamp(44px, 10vw, 108px); line-height: 0.98;
  letter-spacing: -0.02em; color: var(--text);
}
.closing__title span { display: block; }
.closing__accent { color: var(--mint); }
.closing__sub { margin-top: 22px; font-size: clamp(15px, 2vw, 19px); opacity: 0.7; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ============================================================
   PRICING — Explorer (free) vs. Lighthouse Pro.
   Numbers sourced from LIGHTHOUSE_PRICING_ECONOMICS.md — do not
   change without re-checking margin there.
   ============================================================ */
.pricing { position: relative; z-index: 1; padding: clamp(90px, 12vw, 170px) var(--pad); border-top: 1px solid var(--hairline); max-width: 1080px; margin: 0 auto; }

.pricetoggle {
  position: relative;
  display: flex; justify-content: center; gap: 4px;
  max-width: 300px; margin: 0 auto 44px;
  padding: 4px; border-radius: 999px;
  background: rgba(26, 26, 31, 0.6); border: 1px solid var(--hairline-strong);
}
.pricetoggle__thumb {
  position: absolute; top: 4px; left: 0; bottom: 4px; width: 0;
  border-radius: 999px; background: var(--mint);
  box-shadow: 0 8px 20px -8px rgba(93, 202, 165, 0.55);
  transition: transform 0.45s var(--transition-elastic), width 0.45s var(--transition-elastic);
  will-change: transform;
}
.pricetoggle__btn {
  position: relative; z-index: 1;
  flex: 1; padding: 10px 16px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-3);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: color 0.35s var(--transition-fluid);
}
.pricetoggle__btn.is-active { color: #08110D; }
.pricetoggle__save {
  font-size: 8.5px; letter-spacing: 0.04em; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(224, 164, 88, 0.18); color: var(--amber);
}
.pricetoggle__btn.is-active .pricetoggle__save { background: rgba(8, 17, 13, 0.25); color: #08110D; }

.pricegrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 780px) { .pricegrid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.pricecard {
  position: relative;
  background: rgba(26, 26, 31, 0.55);
  border: 1px solid var(--hairline-strong);
  border-radius: 28px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
}
.pricecard--pro {
  border-color: rgba(93, 202, 165, 0.45);
  background: linear-gradient(160deg, rgba(93, 202, 165, 0.08), rgba(26, 26, 31, 0.65));
  box-shadow: 0 30px 90px -40px rgba(93, 202, 165, 0.35);
}
.pricecard__ribbon {
  position: absolute; top: -13px; left: 28px;
  background: var(--mint); color: #08110D;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px -4px rgba(93, 202, 165, 0.5);
}
.pricecard__tier { color: var(--mint); letter-spacing: 0.2em; }
.pricecard__price { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pricecard__strike {
  position: relative; color: var(--text-3); font-size: 19px; font-weight: 600;
  opacity: 0; transition: opacity 0.35s var(--transition-fluid);
}
.pricecard__strike.is-in { opacity: 1; }
.pricecard__strike::after {
  content: ''; position: absolute; left: -3%; top: 52%; width: 0%; height: 2px;
  background: var(--amber); transform: translateY(-50%);
  transition: width 0.5s var(--transition-fluid);
}
.pricecard__strike.is-struck::after { width: 106%; }
.pricecard__amount {
  position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 44px; color: var(--text); line-height: 1;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.4s var(--transition-fluid), transform 0.5s var(--transition-elastic);
}
.pricecard__amount.is-shown { opacity: 1; transform: scale(1); }
/* a quick mint flash behind the digits the instant the new price lands —
   the "level up" flourish tying the reveal to the brand's sonar/spark motif */
.pricecard__amount.is-shown::after {
  content: '';
  position: absolute; inset: -14px -18px; z-index: -1;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(93, 202, 165, 0.4), transparent 72%);
  opacity: 0;
  animation: priceflash 0.7s var(--ease-sonar);
}
@keyframes priceflash {
  0% { opacity: 0.9; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.5); }
}
.pricecard__period { align-self: flex-end; padding-bottom: 6px; }
.pricecard__discount {
  display: inline-flex; align-self: flex-start; margin-top: 12px;
  padding: 6px 14px; color: var(--amber); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  opacity: 0; transform: translateY(6px) scale(0.85);
  transition: opacity 0.4s var(--transition-fluid), transform 0.5s var(--transition-elastic);
}
.pricecard__discount.is-shown { opacity: 1; transform: translateY(0) scale(1); }
.pricecard__sub { margin-top: 18px; font-size: 14px; opacity: 0.75; }
.pricecard__features { list-style: none; margin: 24px 0 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pricecard__features li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-2); }
/* keyword chips inline in headlines — the single word (or short phrase)
   that IS the point gets pulled out as a pill instead of just color-washed
   like every other section's <em>. Reused across the pricing headline
   (Free/Pro — echoes the ghost vs. solid CTA contrast the two cards use
   below), the Explore headline ("live filter"), and the Scout headline
   ("vibe" / "place"). */
.hlkw {
  display: inline-block;
  padding: 0 0.26em;
  border-radius: 0.8em;
  font-weight: 700;
  line-height: 1.15;
  vertical-align: -0.06em;
  cursor: default;
  will-change: transform;
  transition: transform 0.6s var(--transition-elastic),
              box-shadow 0.35s var(--transition-fluid),
              background 0.35s var(--transition-fluid),
              border-color 0.35s var(--transition-fluid);
}
.hlkw--outline {
  color: var(--mint);
  background: var(--mint-dim);
  border: 1px solid rgba(93, 202, 165, 0.4);
}
.hlkw--outline:hover {
  background: rgba(93, 202, 165, 0.28);
  border-color: var(--mint);
}
.hlkw--solid {
  color: #08110D;
  background: var(--mint);
  box-shadow: 0 0.16em 0.4em -0.14em rgba(93, 202, 165, 0.6);
}
.hlkw--solid:hover {
  box-shadow: 0 0.22em 0.55em -0.14em rgba(93, 202, 165, 0.85);
}

.pf { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; }
.pf--yes { background: var(--mint-dim); color: var(--mint); }
.pf--no { background: rgba(255, 255, 255, 0.05); color: var(--text-3); }
.pricecard__cta { text-align: center; justify-content: center; width: 100%; }

/* ============================================================
   AVAILABLE ON — platform availability, the last content section
   ============================================================ */
.platforms { position: relative; z-index: 1; padding: clamp(70px, 10vw, 130px) var(--pad); border-top: 1px solid var(--hairline); max-width: 1200px; margin: 0 auto; text-align: center; }
.platformrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 12px; }
.platformcard {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px; min-width: 220px; text-align: left;
  transition: transform 0.5s var(--transition-elastic), border-color 0.3s var(--transition-fluid);
}
.platformcard:hover { transform: translateY(-3px); border-color: var(--mint); }
.platformcard__icon { font-size: 26px; flex: none; filter: drop-shadow(0 0 10px rgba(93, 202, 165, 0.4)); }
.platformcard__body { display: flex; flex-direction: column; gap: 3px; }
.platformcard__body strong { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 16px; }

/* ============ FOOTER ============ */
.footer {
  position: relative; z-index: 1;
  padding: clamp(90px, 14vw, 200px) var(--pad) 48px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 1200px; margin: 0 auto;
}
.footer__big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(64px, 16vw, 200px); line-height: 0.95;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 40px;
}
.footer__dot { color: var(--mint); }
.footer__cta { margin-bottom: 80px; padding: 16px 36px; font-size: 15px; }
.footer__nav { width: 100%; display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 20px; }
.footer__meta { width: 100%; display: flex; flex-wrap: wrap; gap: 20px 36px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.footer__link { color: var(--mint); }

/* ============================================================
   CONTENT PAGES — About, Contact, Support, Terms.
   Lighter-weight cousins of the main page: same nav/footer/brand
   chrome and particle background, but static (no Lenis/GSAP) —
   legal and support content should scan fast, not perform.
   ============================================================ */
.docpage__hero { position: relative; z-index: 1; padding: 140px var(--pad) 60px; max-width: 900px; margin: 0 auto; }
.docpage__eyebrow { color: var(--amber); margin-bottom: 20px; }
.docpage__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 7vw, 76px); line-height: 1.02;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 20px;
}
.docpage__sub { font-size: clamp(15px, 2vw, 18px); color: var(--text-2); max-width: 640px; }
.docpage__body { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 var(--pad) 100px; }
.docpage__body p { margin-bottom: 18px; font-size: 15.5px; line-height: 1.75; color: var(--text-2); }
.docpage__body p:last-child { margin-bottom: 0; }
.docpage__body em { font-weight: 600; }
.docpage__updated { margin-bottom: 32px; display: inline-block; }

/* About — story + principle cards */
.story__lede {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4;
  color: var(--text); max-width: 720px;
  margin: 0 auto 40px; padding: 0 var(--pad);
}
.principles { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 960px; margin: 56px auto 0; padding: 0 var(--pad); }
@media (min-width: 780px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle {
  background: rgba(26, 26, 31, 0.55); border: 1px solid var(--hairline-strong); border-radius: 22px;
  padding: 28px 24px;
}
.principle__icon { font-size: 22px; margin-bottom: 14px; display: block; filter: drop-shadow(0 0 10px rgba(93, 202, 165, 0.4)); }
.principle__title { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 18px; margin-bottom: 10px; }
.principle__text { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }

/* Contact — form + direct channels */
.contactgrid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 900px; margin: 0 auto; padding: 0 var(--pad) 120px; position: relative; z-index: 1; }
@media (min-width: 780px) { .contactgrid { grid-template-columns: 1fr 1fr; } }
.contactform { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: rgba(26, 26, 31, 0.6); border: 1px solid var(--hairline-strong); border-radius: 14px;
  padding: 13px 16px; outline: none; resize: vertical;
  transition: border-color 0.3s var(--transition-fluid), box-shadow 0.3s var(--transition-fluid);
}
.field input:focus, .field textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 4px var(--mint-dim); }
.field textarea { min-height: 130px; }
.contactform__note { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.contactform__note--ok { color: var(--mint); }
.contactform__note--err { color: var(--amber); }
.contactchannels { display: flex; flex-direction: column; gap: 20px; }
.channelcard { background: rgba(26, 26, 31, 0.5); border: 1px solid var(--hairline-strong); border-radius: 20px; padding: 22px 24px; }
.channelcard__icon { font-size: 20px; margin-bottom: 10px; display: block; }
.channelcard strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.channelcard a { color: var(--mint); font-size: 14px; }
.channelcard p { font-size: 13px; color: var(--text-3); margin-top: 4px; }

/* Support — FAQ accordion */
.faqlist { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin: 0 auto; padding: 0 var(--pad) 120px; position: relative; z-index: 1; }
.faqitem { background: rgba(26, 26, 31, 0.5); border: 1px solid var(--hairline-strong); border-radius: 18px; overflow: hidden; }
.faqitem__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text);
}
.faqitem__chevron { flex: none; color: var(--mint); font-size: 16px; transition: transform 0.35s var(--transition-fluid); }
.faqitem.is-open .faqitem__chevron { transform: rotate(45deg); }
.faqitem__a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--transition-fluid), padding 0.4s var(--transition-fluid);
  padding: 0 22px;
}
.faqitem.is-open .faqitem__a { max-height: 300px; padding: 0 22px 20px; }
.faqitem__a p { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.faqcat { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); margin: 36px 0 12px; }
.faqcat:first-child { margin-top: 0; }

/* Terms — legal-draft notice + section list */
.legalnotice {
  max-width: 780px; margin: 0 auto 40px; padding: 16px 20px;
  background: rgba(224, 164, 88, 0.08); border: 1px solid rgba(224, 164, 88, 0.3); border-radius: 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.legalnotice__icon { flex: none; font-size: 16px; }
.legalnotice p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0; }
.docpage__body h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  font-size: 20px; margin: 40px 0 14px;
}
.docpage__body h2:first-child { margin-top: 0; }
.docpage__body ul { margin: 0 0 18px; padding-left: 20px; }
.docpage__body ul li { font-size: 15px; line-height: 1.7; color: var(--text-2); margin-bottom: 8px; }

/* click sonar rings (global, from pointer position) */
.sonar-ring {
  position: fixed; z-index: 95;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--mint);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: sonar-click 0.7s var(--ease-sonar) forwards;
}
@keyframes sonar-click {
  0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(22); }
}

/* ============ REDUCED MOTION — calm, never dead ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-up, .vicinity-reveal, .closing-reveal, .m-anim-elem { opacity: 1 !important; transform: none !important; }
  .tally i { transform: scaleX(1) !important; }
  .marquee__track, .radar__sweep, .pin__ring, .spin__ping, .hero__explore,
  .vicinity__dot, .vradar__pulse, .phone::before, .pdock__ai,
  .wfx__cloud, .wfx__sun i, .wfx__rain, .wfx__mist, .whero__icon, .reel__bg, .probadge { animation: none !important; }
  .sonar-ring { display: none; }
  #bg-canvas { display: none; }

  /* the dive flattens into a calm stacked list */
  .dive__runway { height: auto; }
  .dive__stage { position: static; height: auto; overflow: visible; padding: 60px 0; }
  .dive__rail { display: none; }
  .dive__scene {
    position: static; opacity: 1 !important; pointer-events: auto !important;
    margin: 0 auto 90px; padding: 0 var(--pad);
  }
}