/* =========================================================
   Valuaire — Dark Luxury landing page
   Tokens in OKLCH. One typeface (Inter Tight) with weight contrast.
   ========================================================= */

:root {
  /* Surfaces — near-black, faintly cool */
  --bg: oklch(0.14 0.006 264);
  --bg-2: oklch(0.17 0.007 264);
  --surface: oklch(0.20 0.008 264);
  --surface-2: oklch(0.25 0.009 264);

  /* Ink */
  --ink: oklch(0.97 0.004 90);
  --ink-dim: oklch(0.84 0.006 264);
  --muted: oklch(0.68 0.012 264);

  /* Lines & accents */
  --line: oklch(1 0 0 / 0.10);
  --line-strong: oklch(1 0 0 / 0.18);
  --accent: oklch(1 0 0); /* white — gold accents removed */
  --accent-dim: oklch(1 0 0 / 0.16);
  --positive: oklch(0.78 0.15 152);

  /* Type */
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 11vw, 9rem);
  --radius: 18px;
  --radius-lg: 26px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index scale (semantic) */
  --z-media: 0;
  --z-content: 10;
  --z-header: 100;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
::selection {
  background: var(--accent);
  color: #15120a;
}

/* ---------- Primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.btn {
  --pad-y: 0.85rem;
  --pad-x: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.18s var(--ease-out), background-color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
  will-change: transform;
}
.btn--solid {
  background: var(--ink);
  color: #0c0c0e;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.4) inset;
}
.btn--solid:hover {
  background: #fff;
  box-shadow: 0 8px 30px oklch(1 0 0 / 0.14);
}
.btn--solid:active {
  transform: scale(0.97);
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 18ch;
}
/* accent word — same type as its heading, champagne colour only (script font removed) */
.scr {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--accent);
}
.section__lead {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-dim);
  max-width: 62ch;
  text-wrap: pretty;
}
.section__note {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================== HEADER ===================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  transition: background-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out), padding 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: oklch(0.14 0.006 264 / 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-block: 0.7rem;
}
.header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}
.header__mark {
  display: inline-flex;
  width: 24px;
  color: var(--ink);
}
.header__mark svg {
  width: 100%;
}
.header__word {
  font-size: 1.02rem;
  letter-spacing: 0.28em;
  font-weight: 500;
  padding-left: 0.1em;
}
.header__nav {
  display: flex;
  gap: 1.9rem;
  font-size: 0.95rem;
  color: var(--ink-dim);
}
.header__nav a {
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.2s var(--ease-out);
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 0.28s var(--ease-out);
}
.header__nav a:hover {
  color: var(--ink);
}
.header__nav a:hover::after {
  width: 100%;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
.langswitch button {
  letter-spacing: 0.05em;
  transition: color 0.2s var(--ease-out);
  padding: 0.15rem;
}
.langswitch button:hover {
  color: var(--ink-dim);
}
.langswitch button.is-active {
  color: var(--ink);
}
.header__cta {
  --pad-y: 0.6rem;
  --pad-x: 1.15rem;
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .header__nav {
    display: none;
  }
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  /* Poster = the film's first frame, so when the canvas fades in there's no
     swap to a different image on load (mobile portrait set by default). */
  background-image: url("../assets/sequence-mobile/frame_0001.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 761px) {
  .hero__media { background-image: url("../assets/sequence/frame_0001.jpg"); }
}
.hero__canvas,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__canvas {
  opacity: 0; /* revealed by JS once the first frame is decoded; poster bg shows meanwhile */
  transition: opacity 0.6s var(--ease-out);
}
.hero__canvas.is-ready {
  opacity: 1;
}
.hero__sky {
  transition: opacity 0.8s var(--ease-out);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: oklch(0.09 0.006 264);
  opacity: 0;
  pointer-events: none;
}
/* Warm cinematic grade laid over the hero still/video (subtle, image shows through) */
.hero__sky {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(120% 80% at 70% 18%, oklch(0.72 0.13 62 / 0.65), transparent 60%),
    linear-gradient(180deg, oklch(0.5 0.08 48 / 0.4) 0%, transparent 45%, oklch(0.12 0.01 270 / 0.6) 100%);
}
.hero__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      oklch(0.1 0.01 270 / 0.35) 0%,
      transparent 28%,
      transparent 45%,
      oklch(0.09 0.008 270 / 0.85) 100%
    ),
    radial-gradient(100% 60% at 50% 100%, oklch(0.09 0.008 270 / 0.7), transparent 70%);
}
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 7rem);
}
.hero__headlines {
  position: relative;
  min-height: clamp(3rem, 16vw, 7rem);
  margin-bottom: 2rem;
}
.hero__line {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  font-size: clamp(2.4rem, 7.5vw, 5.4rem); /* ceiling under 6rem */
  line-height: 1.0;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 18ch;
  /* tight halo hugging the letters — legible over the sunset, no visible dark patch */
  text-shadow: 0 0 2px oklch(0.06 0.01 270 / 0.55), 0 2px 8px oklch(0.05 0.01 270 / 0.7);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
}
.hero__line.is-active {
  opacity: 1;
  transform: none;
}
/* two-line headline — both lines now in the same Inter Tight type */
.hero__line .hl { display: block; line-height: 0.92; }
.hero__line .hl--script {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  line-height: 0.92;
}
.hero__cta-block {
  max-width: 480px;
}
.hero__proof {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.2rem 0 1.5rem;
  color: var(--ink-dim);
  font-size: 0.98rem;
}
.hero__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.3rem;
}
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-dim);
  margin-bottom: 1.4rem;
  text-wrap: pretty;
}
/* feature bullets in the top hero header */
.hero__points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.02rem;
  color: var(--ink);
  text-shadow: 0 1px 6px oklch(0.05 0.01 270 / 0.6);
}
.hero__tick {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #0d0d0f;
  font-size: 0.72rem;
  font-weight: 700;
}
.hero__scrollhint {
  position: absolute;
  z-index: var(--z-content);
  right: var(--gutter);
  bottom: clamp(2rem, 6vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
}
.hero__scrollhint-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollpulse 2.2s var(--ease-out) infinite;
}
@keyframes scrollpulse {
  0% { transform: scaleY(0.2); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0.3; }
}
@media (max-width: 600px) {
  .hero__scrollhint {
    display: none;
  }
}

/* ===================== WAITLIST FORM ===================== */
.waitlist {
  width: 100%;
}
.waitlist__row {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--line);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.waitlist__row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.waitlist__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  padding: 0.55rem 0.9rem;
  letter-spacing: -0.01em;
}
.waitlist__input::placeholder {
  color: var(--muted);
}
.waitlist__input:focus {
  outline: none;
}
.waitlist__btn {
  flex-shrink: 0;
}
.waitlist__msg {
  min-height: 1.3em;
  margin-top: 0.7rem;
  padding-left: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.2s var(--ease-out);
}
.waitlist__msg.is-error {
  color: oklch(0.75 0.16 25);
}
.waitlist__msg.is-success {
  color: var(--positive);
}
.waitlist.is-done .waitlist__row {
  opacity: 0.55;
  pointer-events: none;
}
.waitlist--lg {
  max-width: 520px;
  margin-inline: auto;
}
.waitlist--lg .waitlist__row {
  background: oklch(1 0 0 / 0.05);
}
@media (max-width: 480px) {
  .waitlist__row {
    flex-direction: column;
    border-radius: 22px;
  }
  .waitlist__btn {
    width: 100%;
  }
}

/* ===================== INTRO / STATS ===================== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.stat__value {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat__label {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 620px) {
  .stats {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .stat {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .stat__label {
    margin-top: 0;
  }
}

/* ===================== CATEGORIES ===================== */
.categories {
  background: var(--bg-2);
}
.cat-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cat {
  background: var(--bg-2);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: background-color 0.3s var(--ease-out);
}
.cat:hover {
  background: var(--surface);
}
.cat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 1.3rem;
}
.cat__title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.cat__text {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ===================== APP SHOWCASE ===================== */
.app__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.app__features {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}
.app__features li {
  display: flex;
  gap: 0.8rem;
  color: var(--ink-dim);
  font-size: 1.02rem;
}
.tick {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}
/* coming-soon store badges + launch CTA */
.app__launch { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }
.app__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.storebadge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: oklch(1 0 0 / 0.04);
  color: var(--ink);
}
.storebadge svg { width: 22px; height: 22px; flex-shrink: 0; }
.storebadge__txt { display: flex; flex-direction: column; line-height: 1.08; }
.storebadge__txt small {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.storebadge__txt strong { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; }

.app__phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}
/* showcase app screen sits crisp inside the static phone */
.phone .appscr { z-index: 1; }
.phone--front { width: 256px; }
/* trim two minor rows so the deal card + price clear the tab bar */
.appscr--showcase .appscr__profrow,
.appscr--showcase .appscr__progress { display: none; }
.appscr--showcase .appscr__eyebrow { margin-top: 14px; }
.appscr--showcase .appscr__card { margin-top: 10px; }
.phone {
  position: relative;
  width: 248px;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
  border: 1px solid var(--line-strong);
  padding: 9px;
  box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.8), 0 0 0 1px oklch(0 0 0 / 0.4);
}
.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: #0a0a0b;
  position: relative;
}
.phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* On-brand dark splash shown behind the screenshot (and alone if none supplied) */
.phone__splash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% 12%, oklch(0.42 0.08 62 / 0.6), transparent 60%),
    linear-gradient(180deg, oklch(0.2 0.03 60), oklch(0.1 0.01 270));
}
.phone__splash svg {
  width: 34%;
}
.phone__screen img.is-missing {
  display: none;
}
.phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  border-radius: 100px;
  background: #000;
  z-index: 2;
}
.phone--front {
  z-index: 2;
  transform: translateX(28px) rotate(3deg);
}
.phone--back {
  position: absolute;
  z-index: 1;
  transform: translateX(-58px) translateY(20px) rotate(-6deg) scale(0.92);
  opacity: 0.85;
  filter: saturate(0.9) brightness(0.9);
}
@media (max-width: 880px) {
  .app__grid {
    grid-template-columns: 1fr;
  }
  .app__phones {
    min-height: 460px;
    margin-top: 1rem;
  }
}

/* ===================== EMPTY LEGS ===================== */
.legs-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}
.leg {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.leg:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.7);
}
.leg__img {
  position: relative;
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center;
}
.leg__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, oklch(0.12 0.01 264 / 0.55));
}
.leg__badges {
  position: absolute;
  inset: 0.9rem 0.9rem auto 0.9rem;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
.leg__save {
  background: oklch(0.12 0.01 264 / 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
}
.leg__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: oklch(0.12 0.01 264 / 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 100px;
}
.leg__verified::before {
  content: "✓";
  color: var(--positive);
  font-weight: 700;
}
.leg__body {
  padding: 1.2rem 1.3rem 1.4rem;
}
.leg__route {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.leg__meta {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.leg__price-row {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.leg__price {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.leg__was {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.95rem;
}
.leg__off {
  margin-left: auto;
  color: var(--positive);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ===================== EVENTS — cinematic horizontal gallery ===================== */
.events { overflow: hidden; }
.events__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.events__viewport {
  /* Mobile default: native horizontal swipe with snap. JS upgrades desktop. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--gutter);
}
.events__viewport::-webkit-scrollbar { display: none; }

.events__track {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  width: max-content;
  will-change: transform;
}

.evcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 440px);
  height: clamp(420px, 62vh, 620px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  scroll-snap-align: center;
}
.evcard__img {
  position: absolute;
  inset: -2% -9%; /* over-sized so parallax translateX never reveals an edge */
  z-index: -1;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  will-change: transform;
}
.evcard__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, oklch(0.08 0.01 264 / 0.15) 0%, transparent 30%, transparent 48%, oklch(0.07 0.01 264 / 0.85) 100%);
}
.evcard__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.3rem, 2vw, 1.9rem);
}
.evcard__index {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: oklch(1 0 0 / 0.55);
}
.evcard__meta { display: flex; flex-direction: column; }
.evcard__when {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.evcard__meta h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.evcard__place {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin-top: 0.45rem;
}
.evcard__place::before { content: "↗"; color: var(--accent); }

/* event backdrops — photo on top, gradient stays as fallback if it fails to load */
.evcard[data-event="1"] .evcard__img { background-image: url("../assets/events/event-1.jpg"), linear-gradient(160deg, oklch(0.45 0.09 150), oklch(0.16 0.04 160)); }
.evcard[data-event="2"] .evcard__img { background-image: url("../assets/events/event-2.jpg"), linear-gradient(160deg, oklch(0.5 0.11 25), oklch(0.16 0.04 20)); }
.evcard[data-event="3"] .evcard__img { background-image: url("../assets/events/event-3.jpg"), linear-gradient(160deg, oklch(0.5 0.1 250), oklch(0.16 0.04 260)); }
.evcard[data-event="4"] .evcard__img { background-image: url("../assets/events/event-4.jpg"), linear-gradient(160deg, oklch(0.55 0.1 60), oklch(0.17 0.04 40)); }
.evcard[data-event="5"] .evcard__img { background-image: url("../assets/events/event-5.jpg"), linear-gradient(160deg, oklch(0.62 0.05 230), oklch(0.2 0.03 250)); }
.evcard[data-event="6"] .evcard__img { background-image: url("../assets/events/event-6.jpg"), linear-gradient(160deg, oklch(0.5 0.09 200), oklch(0.16 0.04 220)); }

/* progress rail under the gallery */
.events__progress {
  margin: clamp(1.6rem, 3vw, 2.4rem) var(--gutter) 0;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.events__progress i {
  display: block;
  height: 100%;
  width: 18%;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left;
}

/* Desktop pinned mode: JS takes over horizontal motion, native scroll off.
   The whole act is centred in one viewport so nothing is clipped while pinned. */
.events.is-pinned {
  height: 100svh;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.events.is-pinned .events__head { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.events.is-pinned .events__viewport {
  overflow: visible;
  scroll-snap-type: none;
}
.events.is-pinned .evcard {
  scroll-snap-align: none;
  height: clamp(360px, 56vh, 560px);
}

/* Mobile pagination dots — hidden on desktop (which has the progress rail) */
.events__dots { display: none; }
.events__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: width 0.3s var(--ease-out), background 0.3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.events__dot.is-active {
  width: 22px;
  background: var(--accent);
}

@media (max-width: 760px) {
  .evcard { width: 78vw; height: 64vh; }
  .events__progress { display: none; }
  .events__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.4rem var(--gutter) 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evcard { transition: none; }
  .evcard__img { transition: none; }
}

/* ===================== LOCATIONS / DESTINATIONS ===================== */
.loc-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: clamp(0.7rem, 1.2vw, 1.1rem);
}
.loc {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}
.loc__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease-out);
}
.loc:hover .loc__img { transform: scale(1.06); }
.loc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, oklch(0.07 0.01 264 / 0.85));
}
.loc__name {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ===================== TRUST ===================== */
.trust {
  background: var(--bg-2);
}
.trust-list {
  list-style: none;
  padding: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 2.5rem;
  max-width: 880px;
}
.trust-list li {
  display: flex;
  gap: 0.9rem;
  font-size: 1.05rem;
  color: var(--ink-dim);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .trust-list {
    grid-template-columns: 1fr;
  }
}

/* ===================== FINAL CTA ===================== */
.final {
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, oklch(0.3 0.06 62 / 0.45), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--line);
}
.final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final__word {
  display: inline-block;
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  padding-left: 0.15em;
  margin-bottom: 1.6rem;
}
.final__title {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
  line-height: 1.04;
}
.final__title .final__script {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  line-height: 1.04;
  margin-top: 0.05em;
}
.final__text {
  margin-top: 1.1rem;
  margin-bottom: 2rem;
  color: var(--ink-dim);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 48ch;
  text-wrap: pretty;
}
.final__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 2rem;
}
.final__features li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-dim);
  font-size: 1.02rem;
}
.final__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.7rem;
}

/* ===================== FOOTER ===================== */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.footer__brand .header__mark {
  width: 22px;
  color: var(--ink);
}
.footer__tagline {
  color: var(--muted);
  font-size: 0.95rem;
}
.footer__links {
  display: flex;
  gap: 1.6rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.footer__links a {
  transition: color 0.2s var(--ease-out);
}
.footer__links a:hover {
  color: var(--ink);
}
.footer__rights {
  color: var(--muted);
  font-size: 0.85rem;
  width: 100%;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

/* =========================================================
   CINEMATIC HERO ACT 2 — 3D phone stage + waitlist modal
   ========================================================= */

/* Button variants */
.btn--lg { --pad-y: 1.05rem; --pad-x: 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* The pinned hero now runs a longer film; keep layers stacked. */
.hero__inner { transition: opacity 0.4s var(--ease-out); will-change: opacity; }
.hero__cta-block { transition: opacity 0.4s var(--ease-out); }

/* ---------- Phone stage ---------- */
.phonestage {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.phonestage.is-active {
  visibility: visible;
  pointer-events: auto;
}
.phonestage__text {
  position: absolute;
  left: clamp(1.5rem, 7vw, 7rem);
  top: 50%;
  transform: translateY(-50%);
  max-width: 480px;
  opacity: 0;
  will-change: opacity, transform;
}
.phonestage__title {
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0.4rem 0 1.1rem;
  text-wrap: balance;
}
.phonestage__lead {
  color: var(--ink-dim);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
/* Feature bullets beside the phone (desktop only) */
.phonestage__points {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.phonestage__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.phonestage__dot {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ink) 16%, transparent);
}
.phonestage__points strong {
  display: block;
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.phonestage__points em {
  display: block;
  font-style: normal;
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.35;
}
/* social proof under the CTA */
.phonestage__proof {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  color: var(--ink-dim);
  font-size: 1.02rem;
}
.phonestage__proof strong { color: var(--ink); }
.avatars { display: inline-flex; }
.avatars i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -10px;
  background-size: cover;
}
.avatars i:first-child { margin-left: 0; }
.avatars i:nth-child(1) { background-image: url("../assets/avatars/persona-1.jpg"), linear-gradient(135deg, oklch(0.7 0.09 60), oklch(0.4 0.06 40)); }
.avatars i:nth-child(2) { background-image: url("../assets/avatars/persona-2.jpg"), linear-gradient(135deg, oklch(0.65 0.08 250), oklch(0.35 0.05 270)); }
.avatars i:nth-child(3) { background-image: url("../assets/avatars/persona-3.jpg"), linear-gradient(135deg, oklch(0.7 0.1 150), oklch(0.38 0.06 160)); }
.avatars i:nth-child(4) { background-image: url("../assets/avatars/persona-4.jpg"), linear-gradient(135deg, oklch(0.72 0.1 25), oklch(0.4 0.06 20)); }

/* ---------- 3D phone ---------- */
.phone3d {
  position: relative;
  width: clamp(230px, 21vw, 290px);
  aspect-ratio: 9 / 19.3;
  transform-style: preserve-3d;
  will-change: transform;
  transform: scale(0.12);
}
.phone3d__body {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(150deg, #2a2a2e, #0e0e10 60%);
  padding: 8px;
  transform-style: preserve-3d;
  box-shadow:
    0 2px 2px rgba(255, 255, 255, 0.18) inset,
    -40px 60px 120px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* fake side thickness for the 3D edge */
.phone3d__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(90deg, transparent 92%, rgba(0, 0, 0, 0.55));
  transform: translateZ(-14px) scale(0.99);
}
.phone3d__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: #f3f3f1;
}
/* Real app media inside the hero phone: a canvas scrubs the recording's frame
   sequence; the screenshot sits behind as poster / reduced-motion fallback. */
.appmedia { position: absolute; inset: 0; background: #f6f6f4; }
.appmedia__img,
.appmedia__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* canvas honours this via its own cover-draw math */
}
.appmedia__img { z-index: 1; }
.appmedia__canvas { z-index: 2; opacity: 0; transition: opacity 0.4s ease; }
.appmedia__canvas.is-ready { opacity: 1; }
/* Reduced motion: never run the scrub — show the still screenshot only. */
@media (prefers-reduced-motion: reduce) {
  .appmedia__canvas { display: none; }
}

.phone3d__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  border-radius: 100px;
  background: #000;
  z-index: 5;
}
.phone3d__glare {
  position: absolute;
  inset: 8px;
  border-radius: 33px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.08) 100%);
}

/* ---------- App screen recreation (crisp at any scale) ---------- */
.appscr {
  position: absolute;
  inset: 0;
  color: #0d0d0f;
  font-size: 13px;
  line-height: 1.35;
  padding: 40px 16px 10px;
  background: #f6f6f4;
  overflow: hidden;
  text-align: left;
}
.appscr__scroll { will-change: transform; }
.appscr__cardimg--2 { background-image: linear-gradient(160deg, oklch(0.5 0.09 250), oklch(0.2 0.04 270)); }
.appscr__status { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.appscr__sig { letter-spacing: -1px; }
.appscr__greet { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.appscr__subtle { color: #8a8a88; }
.appscr__search { margin-top: 12px; background: #ececea; border-radius: 12px; padding: 11px 12px; color: #7a7a78; font-size: 12px; }
.appscr__search strong { color: #0d0d0f; }
.appscr__mag { margin-right: 4px; }
.appscr__profrow { display: flex; justify-content: space-between; margin-top: 16px; font-weight: 600; font-size: 12px; }
.appscr__progress { height: 4px; border-radius: 4px; background: #e2e2e0; margin-top: 8px; overflow: hidden; }
.appscr__progress i { display: block; width: 78%; height: 100%; background: #0d0d0f; border-radius: 4px; }
.appscr__eyebrow { color: #8a8a88; font-size: 12px; margin-top: 16px; }
.appscr__cats { display: flex; gap: 10px; margin-top: 8px; }
.appscr__cat { flex: 1; font-size: 9.5px; font-weight: 600; text-align: center; color: #2a2a2a; }
.appscr__ic { display: flex; align-items: center; justify-content: center; height: 46px; background: #ececea; border-radius: 14px; font-size: 20px; margin-bottom: 5px; }
.appscr__h { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; }
.appscr__tabs { display: flex; gap: 10px; margin-top: 10px; font-size: 12px; color: #9a9a98; align-items: center; }
.appscr__tabs strong { color: #fff; background: #0d0d0f; padding: 5px 12px; border-radius: 100px; font-weight: 600; }
.appscr__card { margin-top: 12px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.appscr__cardimg { position: relative; aspect-ratio: 16/11; background-image: url("../assets/deal.jpg"), linear-gradient(155deg, oklch(0.62 0.1 66), oklch(0.28 0.05 255)); background-size: cover; background-position: center; }
.appscr__off { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.62); color: #fff; font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 100px; }
.appscr__verified { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.92); color: #0d0d0f; font-weight: 600; font-size: 10px; padding: 3px 8px; border-radius: 100px; }
.appscr__verified::before { content: "🛡 "; }
.appscr__cardftr { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 12px; font-weight: 600; }
.appscr__cardftr s { color: #b0b0ae; font-weight: 400; }
.appscr__v { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; background: #0d0d0f; color: #fff; border-radius: 50%; font-size: 9px; }
.appscr__tabbar { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; background: rgba(252,252,251,0.97); border-radius: 100px; padding: 9px 16px; font-size: 14px; color: #9a9a98; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.appscr__tab.is-on { color: #0d0d0f; font-size: 11px; font-weight: 600; }

/* ---------- Waitlist modal ---------- */
.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
  overflow: hidden;
}
.modal::backdrop {
  background: oklch(0.08 0.006 264 / 0.6);
  backdrop-filter: blur(8px);
}
.modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__card {
  position: relative;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: #1e1e20;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
  animation: modalin 0.45s var(--ease-out);
}
/* light type on the dark #1e1e20 modal card */
.modal__title { color: #e8e8e5; }
.modal__text { color: #9a9a94; }
.modal__close { color: #8a8a82; }
.modal__close:hover { color: #ffffff; }
/* embedded LeadConnector form */
.modal__embed {
  margin-top: 1.2rem;
  border-radius: 10px;
  overflow: hidden;
  background: transparent; /* the GHL form is dark-themed; transparent blends it into the card (no white strip) */
}
.modal__embed iframe { display: block; width: 100%; background: transparent; }
@keyframes modalin {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .modal__card { animation: none; } }
.modal__close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s var(--ease-out);
}
.modal__close:hover { color: var(--ink); }
.modal__word {
  display: inline-block;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  padding-left: 0.15em;
  margin-bottom: 1.1rem;
}
.modal__title { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; }
.modal__text { color: var(--ink-dim); margin-top: 0.6rem; margin-bottom: 1.6rem; font-size: 1rem; }
.modal__form { display: grid; gap: 0.7rem; text-align: left; }
.field {
  width: 100%;
  background: oklch(1 0 0 / 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.modal__form .btn { margin-top: 0.4rem; }

/* =========================================================
   PHONE NOTES — leader-line callouts on the hero phone (ACT 2)
   They live inside the transformed phone, so the connector strokes
   stay pinned to its features while it scales, slides and tilts.
   Positioned to the right of the device; text reveals on scroll.
   ========================================================= */
.phonenotes {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0; /* JS fades the whole set in/out with the phone act */
}
.phonenote {
  position: absolute;
  top: 0; /* exact Y set by JS to track the live app element */
  left: 100%; /* dot sits on the phone's right edge */
  display: flex;
  align-items: center;
  gap: 9px;
  width: clamp(150px, 15vw, 210px);
  transform: translateY(-50%);
}
.phonenote__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
  transform: scale(0);
  transition: transform 0.4s var(--ease-out) 0.1s;
}
.phonenote__line {
  flex-shrink: 0;
  width: clamp(20px, 2.4vw, 40px);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), oklch(1 0 0 / 0.12));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.phonenote__body {
  flex: 1;
  min-width: 0;
  transform: translateX(-8px);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.phonenote__body strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.phonenote__body em {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--ink-dim);
}
.phonenote.is-shown .phonenote__dot { transform: scale(1); }
.phonenote.is-shown .phonenote__line { transform: scaleX(1); }
.phonenote.is-shown .phonenote__body { opacity: 1; transform: none; }

/* Narrow desktop / landscape tablet: trim callouts so they clear the edge. */
@media (max-width: 980px) {
  .phonenote { width: clamp(108px, 13vw, 150px); gap: 6px; }
  .phonenote__line { width: clamp(14px, 1.8vw, 24px); }
  .phonenote__body strong { font-size: 0.82rem; }
  .phonenote__body em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phonenote__dot,
  .phonenote__line,
  .phonenote__body { transition: none; }
}

/* ===================== MOBILE PHONE ACT (ACT 4) ===================== */
/* On phones the 3D-phone act has no leader-line callouts; the device rises
   from the open jet door (driven in JS) and the CTA sits centred beneath it. */
@media (max-width: 760px) {
  .phonenotes { display: none; }
  .hero__points { display: none; } /* keep the dense mobile header clean */

  .phonestage__text {
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(2.2rem, 8vh, 4.5rem);
    transform: translateX(-50%);
    width: min(92vw, 460px);
    max-width: none;
    text-align: center;
  }
  /* Mobile shows only the button (+ social proof) under the phone. */
  .phonestage__text .eyebrow,
  .phonestage__title,
  .phonestage__lead,
  .phonestage__points { display: none; }
  .phonestage__text .btn { width: 100%; }
  .phonestage__proof { justify-content: center; margin-top: 1.1rem; }
}

/* ===================== LIGHT SECTIONS (white bg, black text) ===================== */
/* Opt-in per section. Re-maps the dark-theme tokens to a light palette so most
   components flip automatically; a few hard-coded darks are overridden below.
   --bg / --surface-2 are deliberately NOT remapped so the dark phone device and
   the photo badges keep their look. */
.section--light {
  background: #ffffff;
  --ink: oklch(0.17 0.01 264);
  --ink-dim: oklch(0.40 0.008 264);
  --muted: oklch(0.54 0.008 264);
  --line: oklch(0 0 0 / 0.12);
  --line-strong: oklch(0 0 0 / 0.20);
  --surface: oklch(0.97 0.002 264);
  --accent: oklch(0.17 0.01 264);
  --accent-dim: oklch(0 0 0 / 0.07);
  color: var(--ink);
}
/* Solid CTA: black pill, white label (the token swap would make it dark-on-dark). */
.section--light .btn--solid { background: #0d0d0f; color: #fff; box-shadow: none; }
.section--light .btn--solid:hover { background: #000; box-shadow: 0 8px 30px oklch(0 0 0 / 0.18); }
/* Check bullets: black disc, white tick. */
.section--light .tick { background: #0d0d0f; color: #fff; }
/* Store badges: light chip on white. */
.section--light .storebadge { background: oklch(0 0 0 / 0.04); border-color: oklch(0 0 0 / 0.18); }
/* Empty-legs badges sit on the photo, so keep them dark with light text. */
.section--light .leg__save { color: #fff; }
.section--light .leg__verified { color: oklch(1 0 0 / 0.85); }
/* Final section: black VALUAIRE wordmark + black top-edge gradient over white. */
.final.section--light {
  background: radial-gradient(85% 60% at 50% 0%, oklch(0 0 0 / 0.55), transparent 70%), #ffffff;
  border-top-color: oklch(0 0 0 / 0.12);
}
.final.section--light .final__word { color: #0d0d0f; }

/* ===================== HERO ARRIVAL CTA (desktop ACT 4) ===================== */
/* During the arrival act we reveal the hero CTA block but show only the
   "Jetzt Waitlist beitreten" button beneath the "Willkommen an Bord." headline. */
.hero.is-arrival .hero__sub,
.hero.is-arrival .hero__proof,
.hero.is-arrival .hero__stores { display: none; }
.hero.is-arrival .hero__cta-block { margin-top: 0.4rem; }

/* ===================== STANDALONE FILM SECTIONS (take-off, arrival) ===================== */
/* A tall section with a sticky 100svh stage. The clip scrubs from the section's
   own scroll progress (NO GSAP pin) — so there's exactly one section, the still
   holds until the stage fills the screen, then it scrubs, then it releases. */
.film {
  position: relative;
  height: 300svh; /* scroll length for the scrub (200svh of travel) */
  background: var(--bg);
}
.film__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.film__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  background-size: cover;
  background-position: center;
}
.film__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.film__canvas.is-ready { opacity: 1; }
.film__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0.1 0.01 270 / 0.35) 0%,
    transparent 26%,
    transparent 48%,
    oklch(0.08 0.008 270 / 0.85) 100%
  );
}
.film__inner {
  position: relative;
  z-index: var(--z-content);
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 7rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.film__headlines {
  position: relative;
  min-height: clamp(3rem, 13vw, 6.5rem);
}
.film__line {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 18ch;
  text-shadow: 0 0 2px oklch(0.06 0.01 270 / 0.55), 0 2px 8px oklch(0.05 0.01 270 / 0.7);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
}
.film__line.is-active { opacity: 1; transform: none; }
.film__line .hl { display: block; line-height: 0.95; }
.film__cta {
  margin-top: 1.6rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
@media (max-width: 760px) {
  .film { height: 260svh; }
}
@media (prefers-reduced-motion: reduce) {
  .film__line { opacity: 1; transform: none; }
  .film__cta { opacity: 1; }
}