/* Veyoli landing page — styles.
   Direction: "Cool Mist / Apple-calm". Core palette mirrors the shipped iOS app
   (Cool Mist · Teal); a vibrancy ladder of saturated cool tones is used ONLY in
   glows, gradients, and screens. Type is the SF system with Apple's tracking
   inversion (negative on big headlines, positive on eyebrows). Zero webfonts,
   no frameworks, no build step. Dark mode follows prefers-color-scheme. */

:root {
  --bg: #F3F5F8;
  --surface: #FBFCFD;
  --elev: #FFFFFF;
  --line: #DCE2EA;
  --text: #0F1820;
  --text-soft: #4C5966;
  --text-faint: #667079;
  --tint: #E2EAF5;
  --accent: #2C9C8F;        /* brand teal (fixed across appearances) */
  --accent2: #86D4C9;       /* accent companion (fixed) */
  --on-accent: #FFFFFF;
  --accent-text: #1B7E70;   /* AA-safe text/link accent (ADR 0068) */

  /* vibrancy ladder — saturated cool tones, glows/gradients/screens ONLY */
  --teal-vivid: #00C9B8;
  --cyan: #00BFFF;
  --mint: #4FFFEB;
  --teal-deep: #1A7A70;
  --navy: #0A1A2E;

  /* teal-tinted shadow so depth feels part of the palette, not pasted on */
  --shadow: 0 1px 2px rgba(26, 122, 112, 0.16), 0 8px 24px rgba(10, 26, 46, 0.10), 0 30px 70px -30px rgba(10, 26, 46, 0.30);

  /* vivid cool "video still" meshes — bright, varied, no warm tones */
  --mesh-a: radial-gradient(120% 95% at 26% 22%, rgba(0, 201, 184, 0.85), transparent 58%), radial-gradient(110% 90% at 82% 78%, rgba(0, 191, 255, 0.55), transparent 60%), linear-gradient(160deg, #10324a, #0a1626);
  --mesh-b: radial-gradient(120% 95% at 74% 20%, rgba(44, 156, 143, 0.9), transparent 56%), radial-gradient(110% 90% at 26% 84%, rgba(79, 255, 235, 0.45), transparent 58%), linear-gradient(160deg, #0f2e34, #0a1622);
  --mesh-c: radial-gradient(120% 95% at 30% 30%, rgba(0, 191, 255, 0.8), transparent 56%), radial-gradient(110% 90% at 80% 76%, rgba(26, 122, 112, 0.85), transparent 58%), linear-gradient(160deg, #122a4a, #0a1322);
  --mesh-d: radial-gradient(120% 95% at 66% 24%, rgba(79, 255, 235, 0.6), transparent 54%), radial-gradient(110% 90% at 34% 82%, rgba(0, 201, 184, 0.85), transparent 58%), linear-gradient(160deg, #0e303a, #0a1a24);

  --sans: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --maxw: 1280px;

  /* Apple "snap" easing — fast out, slow in */
  --snap: cubic-bezier(0.8, 0, 0.2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F13;
    --surface: #121922;
    --elev: #18212B;
    --line: #222E39;
    --text: #EEF3F6;
    --text-soft: #9DB0BC;
    --text-faint: #7A8A97;
    --tint: #16222C;
    --accent-text: #6FE0D2;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45), 0 30px 80px -30px rgba(0, 201, 184, 0.18);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  /* Apple body: 17px, slightly negative tracking */
  font-size: 17px;
  letter-spacing: -0.022em;
  line-height: 1.47;
}
h1, h2, h3 { font-weight: 600; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-text); }
img, svg { display: block; }

.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* anchored sections clear the floating nav */
section[id], span[id] { scroll-margin-top: 96px; }

/* ── accessibility helpers ───────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 9999px; z-index: 100;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }
:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ── scroll reveal (Layer 1: opacity + rise, Apple snap, staggered in JS) ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--snap), transform 0.5s var(--snap);
}
.reveal.in { opacity: 1; transform: none; }

/* ── eyebrows — Apple-style: large, semibold, sentence case, POSITIVE tracking ── */
.kicker, .eyebrow {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.009em;
  line-height: 1.17;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(44, 156, 143, 0.16);
}

/* ── pill button ─────────────────────────────────────────────────── */
.cta-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px; border-radius: 9999px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: -0.006em;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
  box-shadow: 0 1px 2px rgba(26, 122, 112, 0.20), 0 8px 22px rgba(0, 201, 184, 0.28);
}
.cta-pill:hover { background: #27897e; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(26, 122, 112, 0.22), 0 12px 30px rgba(0, 201, 184, 0.36); }
.cta-pill:active { transform: translateY(0) scale(0.98); }
.cta-pill.lg { height: 50px; padding: 0 28px; font-size: 16px; }
.cta-pill[disabled] { opacity: 0.55; cursor: default; }

/* ── nav — floating glass pill (the ONE glass element) ───────────── */
.nav-shell {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 28px;
  max-width: 100%;
  height: 54px; padding: 0 8px 0 20px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 1px 2px rgba(10, 26, 46, 0.06), 0 10px 30px -12px rgba(10, 26, 46, 0.18);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand .wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { font-size: 14.5px; color: var(--text-soft); text-decoration: none; letter-spacing: -0.006em; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text); }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { padding: clamp(120px, 16vw, 168px) 0 clamp(48px, 7vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero-grid > * { min-width: 0; }
.copy { position: relative; z-index: 2; max-width: 560px; }
/* headline-standalone: 96px cap, tracking inversion at its most negative */
.hero h1 {
  font-size: clamp(52px, 8.5vw, 96px);
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin-bottom: 26px;
}
/* Apple "intro": 21px, positive tracking */
.hero .lede {
  font-size: 21px;
  letter-spacing: 0.011em;
  line-height: 1.38;
  color: var(--text-soft);
  max-width: 42ch;
  margin-bottom: 38px;
}
.actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ghost {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 16px; color: var(--text); text-decoration: none; letter-spacing: -0.012em;
  transition: color 0.2s ease;
}
.ghost svg { transition: transform 0.2s ease; }
.ghost:hover { color: var(--accent); }
.ghost:hover svg { transform: translateX(3px); }
.reassure {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 48px;
  font-size: 13px; letter-spacing: 0.006em; color: var(--text-faint);
}
.reassure span { display: inline-flex; align-items: center; gap: 7px; }
.reassure .tick { color: var(--accent); }
.reassure .sep { width: 1px; height: 13px; background: var(--line); }

/* subtle page-load rise for the hero (calm, once) */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .copy { animation: hero-in 0.7s var(--snap) both; }
.hero .stage { animation: hero-in 0.7s var(--snap) 0.12s both; }

/* ── device — re-lit, glowing (pure CSS/SVG) ─────────────────────── */
.stage { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; }
.device-wrap { position: relative; animation: float 10s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* implied light source: barely-perceptible teal bloom behind the device */
.device-wrap::before {
  content: ""; position: absolute; inset: -60px -30px -10px; z-index: -2;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(0, 201, 184, 0.26), rgba(0, 191, 255, 0.10) 45%, transparent 72%);
  filter: blur(48px);
}
/* contact shadow */
.device-wrap::after {
  content: ""; position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
  width: 70%; height: 52px;
  background: radial-gradient(ellipse at center, rgba(10, 26, 46, 0.28), transparent 70%);
  filter: blur(12px); z-index: -1;
}
.device {
  width: 330px; max-width: 82vw; height: 680px; border-radius: 54px;
  background: #0A0E12; padding: 11px; position: relative;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(26, 122, 112, 0.20), 0 30px 70px -26px rgba(10, 26, 46, 0.5), 0 14px 34px -18px rgba(0, 201, 184, 0.22);
}
/* the screen is pinned to light values in both page themes: it reads as a lit
   display, and avoids dark-on-dark inside the mock */
.screen {
  width: 100%; height: 100%; border-radius: 44px;
  background: #FBFCFD; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 106px; height: 29px; border-radius: 9999px; background: #0A0E12; z-index: 10; }
.app-head { padding: 52px 22px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E7ECF1; }
.app-title { display: flex; flex-direction: column; gap: 3px; }
.app-title .k { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #9AA7B2; }
.app-title .n { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: #0F1820; }
/* featured video — vivid, emitting light */
.feature {
  margin: 15px 15px 6px; border-radius: 24px; aspect-ratio: 3 / 4;
  position: relative; overflow: hidden; background: var(--mesh-a);
  box-shadow: 0 0 0 1px rgba(0, 201, 184, 0.25), 0 14px 36px -14px rgba(0, 191, 255, 0.5), 0 0 46px rgba(0, 201, 184, 0.22);
}
.feature::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 30%, rgba(255, 255, 255, 0.22), transparent 60%); pointer-events: none; }
.feature .av { position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 9999px; background: linear-gradient(150deg, #eafffb, #86D4C9); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.feature .who { position: absolute; top: 21px; left: 56px; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.feature .unread { position: absolute; top: 18px; right: 16px; width: 9px; height: 9px; border-radius: 9999px; background: var(--mint); box-shadow: 0 0 0 4px rgba(79, 255, 235, 0.25), 0 0 10px rgba(79, 255, 235, 0.7); }
.feature .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.feature .play svg { margin-left: 3px; }
.feature .bar { position: absolute; left: 14px; right: 14px; bottom: 46px; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.feature .bar i { display: block; height: 100%; width: 62%; border-radius: 9999px; background: linear-gradient(90deg, var(--mint), #fff); box-shadow: 0 0 8px rgba(79, 255, 235, 0.8); }
.feature .dur { position: absolute; bottom: 14px; left: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: #fff; background: rgba(10, 13, 18, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 9999px; }
.feature .speed { position: absolute; bottom: 14px; right: 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: #0F1820; background: rgba(255, 255, 255, 0.94); padding: 4px 9px; border-radius: 9999px; }
.tray-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #9AA7B2; padding: 13px 22px 8px; }
.tray { display: flex; gap: 11px; padding: 0 15px 20px; overflow: hidden; }
.tile { flex: 0 0 90px; height: 120px; border-radius: 16px; position: relative; overflow: hidden; background: var(--mesh-b); box-shadow: 0 8px 20px -10px rgba(0, 191, 255, 0.4); }
.tile.alt { background: var(--mesh-c); }
.tile.alt2 { background: var(--mesh-d); }
.tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 20%, rgba(255, 255, 255, 0.18), transparent 60%); }
.tile .av { position: absolute; top: 9px; left: 9px; width: 22px; height: 22px; border-radius: 9999px; background: linear-gradient(150deg, #eafffb, #86D4C9); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); z-index: 1; }
.tile.alt .av { background: linear-gradient(150deg, #e7f0ff, #9fb6e0); }
.tile .d { position: absolute; bottom: 8px; left: 8px; font-family: var(--mono); font-size: 9px; color: #fff; background: rgba(10, 13, 18, 0.4); padding: 2px 6px; border-radius: 9999px; z-index: 1; }
.tile .ud { position: absolute; top: 11px; right: 11px; width: 6px; height: 6px; border-radius: 9999px; background: var(--mint); box-shadow: 0 0 8px rgba(79, 255, 235, 0.8); z-index: 1; }

/* ── sections — rhythm from background flips, not margins ────────── */
.section { padding: clamp(88px, 11vw, 140px) 0; }
.sec-head { max-width: 760px; margin: 0 auto 68px; text-align: center; }
/* headline-elevated: 48-64px, -0.009em */
.sec-head h2 {
  font-size: clamp(40px, 5.2vw, 64px);
  letter-spacing: -0.009em;
  line-height: 1.07;
}
.sec-head .intro {
  margin-top: 20px;
  font-size: 21px; letter-spacing: 0.011em; line-height: 1.38;
  color: var(--text-soft);
}

/* ── manifesto — full-bleed dark beat, one line, no UI ───────────── */
.manifesto {
  position: relative; overflow: hidden; text-align: center;
  background: #0A0E12;
  background-image: radial-gradient(58% 80% at 50% 4%, rgba(0, 201, 184, 0.14), transparent 60%), radial-gradient(50% 60% at 50% 100%, rgba(0, 191, 255, 0.09), transparent 60%);
  padding: clamp(110px, 15vw, 180px) 0;
}
.manifesto .shell { max-width: 1040px; }
/* headline-super territory: up to 80px, most-negative tracking */
.manifesto-line {
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #F4FAFC;
}
.manifesto-line .soft { color: #5E7A86; }

/* ── stats — oversized callouts as punctuation ───────────────────── */
.stats { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: clamp(52px, 6vw, 76px) 0; text-align: center; }
.stat .v {
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1;
  background: linear-gradient(125deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat .l { margin-top: 14px; font-size: 15.5px; letter-spacing: -0.012em; color: var(--text-soft); }

/* ── how it works — editorial; gradient numerals carry the sequence ── */
.how { background: var(--surface); border-bottom: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 5vw, 72px); }
.step .num {
  display: block;
  font-size: clamp(46px, 4.6vw, 62px);
  font-weight: 300; letter-spacing: -0.015em; line-height: 1;
  margin-bottom: 20px;
  background: linear-gradient(125deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step h3 { font-size: 24px; letter-spacing: -0.009em; margin-bottom: 10px; }
.step p { color: var(--text-soft); max-width: 32ch; }

/* ── features — borderless, glow-led, airy ───────────────────────── */
.features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 48px; }
.feat .gi {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: var(--accent);
  margin-bottom: 20px;
  background: linear-gradient(160deg, rgba(0, 201, 184, 0.16), rgba(0, 191, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px -8px rgba(0, 201, 184, 0.45);
}
.feat .gi svg { width: 24px; height: 24px; }
.feat h3 { font-size: 20px; letter-spacing: -0.009em; }
.feat p { margin-top: 9px; color: var(--text-soft); }

/* ── moment — dark color beat (luminance event) ──────────────────── */
.moment {
  position: relative; overflow: hidden;
  background: var(--navy);
  background-image: radial-gradient(at 18% 38%, rgba(0, 201, 184, 0.28), transparent 55%), radial-gradient(at 78% 22%, rgba(0, 191, 255, 0.20), transparent 52%), radial-gradient(at 60% 88%, rgba(26, 122, 112, 0.26), transparent 55%);
}
.moment-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(40px, 6vw, 80px); }
.moment .kicker { color: #7FF0E2; }
.moment h2 { font-size: clamp(38px, 4.8vw, 58px); letter-spacing: -0.009em; color: #F4FAFC; }
.moment .mo-lede { margin-top: 20px; font-size: 21px; letter-spacing: 0.011em; line-height: 1.38; color: #AFC4CE; max-width: 42ch; }
.m-trust { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; letter-spacing: 0.006em; color: #7E96A2; }
.m-trust span { display: inline-flex; align-items: center; gap: 7px; }
.m-trust .tick { color: var(--mint); }
.m-trust .sep { width: 1px; height: 13px; background: rgba(255, 255, 255, 0.16); }
.moment-art { display: flex; justify-content: center; }
.m-tile {
  position: relative; width: 320px; max-width: 84vw; aspect-ratio: 3 / 4.1;
  border-radius: 28px; overflow: hidden; background: var(--mesh-a);
  box-shadow: 0 0 0 1px rgba(0, 201, 184, 0.3), 0 30px 80px -24px rgba(0, 191, 255, 0.45), 0 0 90px rgba(0, 201, 184, 0.28);
}
.m-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 55% at 50% 28%, rgba(255, 255, 255, 0.22), transparent 60%); }
.m-tile .m-av { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 9999px; background: linear-gradient(150deg, #eafffb, #86D4C9); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.95); }
.m-tile .m-who { position: absolute; top: 27px; left: 68px; color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.m-tile .m-who span { display: block; font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.01em; }
.m-tile .m-play {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.m-tile .m-play svg { margin-left: 4px; }
.m-tile .m-meta { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.m-tile .m-meta .d { font-family: var(--mono); font-size: 12px; color: #fff; background: rgba(10, 13, 18, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 9999px; }
.m-tile .m-meta .s { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #0F1820; background: rgba(255, 255, 255, 0.94); padding: 5px 11px; border-radius: 9999px; }

/* ── positioning band ────────────────────────────────────────────── */
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.band-copy h2 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.009em; }
.band-copy .mo-lede { margin-top: 20px; font-size: 21px; letter-spacing: 0.011em; line-height: 1.38; color: var(--text-soft); max-width: 40ch; }
.compare { display: flex; flex-direction: column; gap: 12px; }
.compare-row {
  display: flex; align-items: baseline; gap: 18px;
  padding: 20px 22px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
}
.compare-row b { font-size: 15px; min-width: 9ch; letter-spacing: -0.012em; color: var(--text); }
.compare-row .meta { font-size: 15px; letter-spacing: -0.012em; color: var(--text-faint); }
.compare-row.is-veyoli {
  border-color: transparent;
  background: linear-gradient(120deg, rgba(0, 201, 184, 0.14), rgba(0, 191, 255, 0.10));
  box-shadow: inset 0 0 0 1px rgba(0, 201, 184, 0.4);
}
.compare-row.is-veyoli b { color: var(--accent-text); }
.compare-row.is-veyoli .meta { color: var(--text-soft); }

/* ── privacy ─────────────────────────────────────────────────────── */
.privacy-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 88px); }
.privacy-head h2 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.009em; }
.privacy-head .mo-lede { margin-top: 18px; font-size: 21px; letter-spacing: 0.011em; line-height: 1.38; color: var(--text-soft); max-width: 34ch; }
.privacy-list { list-style: none; display: grid; gap: 0; }
.privacy-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  color: var(--text-soft); line-height: 1.5;
}
.privacy-list li:first-child { border-top: 1px solid var(--line); }
.privacy-list li b { color: var(--text); font-weight: 600; }
.privacy-list li svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq .sec-head { margin-bottom: 48px; }
.faq-list { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0;
  font-size: 19px; font-weight: 600; letter-spacing: -0.009em; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px; font-weight: 400; color: var(--text-faint);
  transition: transform 0.25s var(--snap);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 22px; color: var(--text-soft); max-width: 60ch; }

/* ── CTA / waitlist ──────────────────────────────────────────────── */
.cta { background: var(--surface); border-top: 1px solid var(--line); }
.cta-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.cta h2 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.009em; }
.cta-lede { margin-top: 18px; font-size: 21px; letter-spacing: 0.011em; line-height: 1.38; color: var(--text-soft); }
.waitlist-form { display: flex; gap: 12px; margin: 36px auto 0; max-width: 480px; }
.waitlist-form input[type="email"] {
  flex: 1; font-family: var(--sans); font-size: 16px; letter-spacing: -0.006em;
  height: 50px; padding: 0 20px;
  border-radius: 9999px; border: 1px solid var(--line);
  background: var(--elev); color: var(--text);
}
.waitlist-form input::placeholder { color: var(--text-faint); }
.form-note { margin-top: 16px; font-size: 13.5px; letter-spacing: -0.006em; color: var(--text-faint); }
.form-status { margin-top: 16px; font-size: 15px; min-height: 1.2em; letter-spacing: -0.006em; }
.form-status[data-state="ok"] { color: var(--accent-text); font-weight: 500; }
.form-status[data-state="err"] { color: #C9583B; }
.preorder-cta { display: none; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
.preorder-cta .release { color: var(--text-faint); font-size: 15px; }

/* ── values line ─────────────────────────────────────────────────── */
.values { padding: clamp(48px, 6vw, 72px) 0; text-align: center; border-top: 1px solid var(--line); }
.values p { font-size: 21px; font-weight: 600; letter-spacing: -0.009em; color: var(--text-soft); }

/* ── footer ──────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--bg); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.footer-brand .tagline { font-size: 14.5px; letter-spacing: -0.012em; color: var(--text-soft); }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 14px; color: var(--text-soft); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.foot-fine { margin-top: 22px; color: var(--text-faint); font-size: 13px; }

/* ── dark-mode fine tuning ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .device {
    box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07),
      0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 80px -24px rgba(0, 0, 0, 0.7), 0 14px 40px -16px rgba(0, 201, 184, 0.3);
  }
  .compare-row.is-veyoli { background: linear-gradient(120deg, rgba(0, 201, 184, 0.18), rgba(0, 191, 255, 0.12)); }
  .feat .gi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px -8px rgba(0, 201, 184, 0.35); }
  .nav-pill { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
}

/* ── responsive ──────────────────────────────────────────────────── */

/* Feature mosaic thins to 2-up before anything else stacks; cards have no
   copy/media order to worry about, so this can happen early. */
@media (max-width: 1000px) {
  .features .grid { grid-template-columns: 1fr 1fr; gap: 44px 40px; }
}

/* The stack point. The 2-col hero (and moment/band/privacy) holds down to
   here so the value prop stays beside the device on normal laptop windows.
   Below it everything goes single-column, COPY FIRST: the argument leads and
   the device follows, size-capped so it never fills the viewport. */
@media (max-width: 880px) {
  .hero { padding-top: clamp(96px, 15vw, 132px); }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .hero h1 { font-size: clamp(46px, 12vw, 76px); }
  .copy { order: 1; }
  .stage { order: 2; }
  .device { width: 264px; height: 544px; }

  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step p { max-width: 52ch; }

  /* Source order in these is already copy-then-media, so dropping the old
     media-first override is all it takes to make text lead when stacked. */
  .band-inner, .privacy-inner, .moment-inner { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .shell { padding: 0 22px; }
  .hero { padding-top: 100px; }
  .hero h1 { font-size: clamp(42px, 13vw, 58px); }
  .nav-links { display: none; }
  .nav-pill { gap: 14px; }
  .features .grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr; gap: 40px; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form input[type="email"] { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ── reduced motion: reveal instantly, no transforms, no ambient motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .copy, .hero .stage, .device-wrap { animation: none; }
  * { transition: none !important; animation: none !important; }
}