/* ───────────────────────────── tokens ───────────────────────────── */
:root {
  /* ── Lounge dark palette (matches the luxury redesign) ── */
  --bg: #06101d;           /* deep navy page bg */
  --bg-soft: #091526;      /* card surface */
  --bg-tint: rgba(255, 255, 255, 0.04);   /* glass overlay */
  --bg-glass-2: rgba(255, 255, 255, 0.06);

  --ink: #ffffff;
  --ink-mid: #cbd5e1;      /* slate-300 */
  --ink-dim: #94a3b8;      /* slate-400 */
  --ink-mute: #475569;     /* slate-600 */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* ── Accent (cyan) — replaces the old blue palette ── */
  --accent-50:  rgba(103, 232, 249, 0.05);
  --accent-100: rgba(103, 232, 249, 0.12);
  --accent-200: #a5f3fc;   /* cyan-200, hover/light state */
  --accent-300: #67e8f9;   /* cyan-300, primary accent */
  --accent-400: #22d3ee;   /* cyan-400, deeper accent */
  --accent-500: #06b6d4;   /* cyan-500, deepest */

  /* Legacy --blue-* aliases so every existing rule picks up the new cyan
     automatically without needing to rename usages. */
  --blue-50:  var(--accent-50);
  --blue-100: var(--accent-100);
  --blue-200: rgba(103, 232, 249, 0.25);
  --blue-300: var(--accent-200);
  --blue-500: var(--accent-300);
  --blue-600: var(--accent-300);
  --blue-700: var(--accent-400);
  --blue-900: var(--bg);

  --cyan-400: var(--accent-400);
  --indigo-500: #818cf8;

  /* ── Departure-board palette (signature) ── */
  --paper: #f6efe3;            /* warm bone, flap card face */
  --paper-dim: #d8cdb6;        /* dimmed flap face */
  --paper-deep: #b2a78d;       /* deeply dimmed (status off) */
  --amber: #f5b942;            /* boarding/timing indicator */
  --amber-glow: rgba(245, 185, 66, 0.35);
  --flap-bg: #0a0d12;           /* flap tile body (slightly darker than --bg) */
  --flap-seam: rgba(0, 0, 0, 0.55);
  --flap-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                 0 -1px 0 rgba(0, 0, 0, 0.55) inset,
                 0 1px 1px rgba(0, 0, 0, 0.4);

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 1320px;
  --pad-x: 32px;

  --t-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-flap: 260ms cubic-bezier(0.55, 0.05, 0.3, 1);
}

/* @font-face {
  font-family: "MyItalicFont";
  src: url("fonts/Kugile_Demo.woff2") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
} */


* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Hide native cursor in favour of custom one (desktop only) */
@media (hover: hover) and (pointer: fine) {
  html, body, a, button, .hoverable { cursor: none; }
}

/* The italic mid-word letter detail used throughout the design.
   Always applied to an actual letter inside an existing word —
   never as a fake standalone letter. */
.i-italic {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--blue-600);
}

/* ───────────────────────────── custom cursor ───────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue-600);
  transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  /* Promote to its own GPU layer so the per-frame transform is a cheap
     composite, not a repaint. Note: transform is NOT transitioned — it's
     driven imperatively by rAF; transitioning it would double-smooth and lag. */
  will-change: transform;
  transition:
    opacity 180ms ease,
    width var(--t-fast),
    height var(--t-fast),
    background var(--t-fast);
  box-shadow: 0 4px 14px rgba(31, 92, 255, 0.4);
}

.cursor.is-active {
  opacity: 1;
}
.cursor.is-hover {
  width: 64px;
  height: 64px;
  background: var(--blue-600);
}
.cursor-arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #06101d;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.cursor-arrow svg { width: 22px; height: 22px; }
.cursor.is-hover .cursor-arrow { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ───────────────────────────── boot screen ───────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9000;
  display: grid;
  place-items: center;
  transition: opacity 700ms ease;
}
.boot.is-out { opacity: 0; pointer-events: none; }
.boot-glow {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(103, 232, 249, 0.25),
    rgba(34, 211, 238, 0.10) 45%,
    transparent 75%
  );
  filter: blur(20px);
}
.boot-text {
  position: relative;
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.boot-caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  background: var(--accent-300);
  vertical-align: -0.08em;
  animation: caret-blink 0.95s steps(1) infinite;
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.6);
}
.boot-caret.is-done { opacity: 0; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ───────────────────────────── nav ───────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px var(--pad-x);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: linear-gradient(to bottom, rgba(6, 16, 29, 0.85), rgba(6, 16, 29, 0));
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(9, 21, 38, 0.55);
  white-space: nowrap;
}
.nav-status .led { width: 6px; height: 6px; }
.nav-status .live-clock { color: var(--amber); }
@media (max-width: 760px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-status { display: none; }
}
.nav.is-shown { opacity: 1; transform: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand-logo {
  display: inline-block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-text { font-family: "Inter Tight", sans-serif; }
.brand-sub { color: var(--ink-dim); margin-left: 4px; font-weight: 400; }

/* ── Auth-aware Account (injected by nav-auth.js when logged in) ──────────────
   Vanilla mirror of the React <NavAccount> in redesign-chrome.tsx. */
.rd-acct { position: relative; display: inline-flex; align-items: center; }
.rd-acct-avatar {
  width: 30px; height: 30px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--accent-300), var(--accent-400));
  color: var(--bg);
  font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.25);
}
.rd-acct-avatar:hover { transform: scale(1.05); box-shadow: 0 0 14px rgba(103, 232, 249, 0.45); }
/* Identity chip: initial mark + username + caret — reads as "your account". */
.rd-acct-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 11px 0 4px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(103, 232, 249, 0.06);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
  font-family: "Inter Tight", sans-serif;
}
.rd-acct-chip:hover { background: rgba(103, 232, 249, 0.12); border-color: rgba(103, 232, 249, 0.35); }
.rd-acct-mark {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-300), var(--accent-400));
  color: var(--bg); font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rd-acct-name {
  font-size: 12.5px; font-weight: 500; color: var(--ink-mid);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.rd-acct-chip::after {
  content: ""; width: 0; height: 0; margin-right: 1px; flex-shrink: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-dim);
  transition: transform var(--t-fast);
}
.rd-acct-chip[aria-expanded="true"]::after { transform: rotate(180deg); }
.rd-acct-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 200;
  min-width: 232px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.7), 0 0 40px rgba(103, 232, 249, 0.06);
}
.rd-acct-menu[hidden] { display: none; }
.rd-acct-head { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.rd-acct-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px;
}
.rd-acct-email { font-size: 12px; color: var(--ink); font-weight: 500; word-break: break-all; }
.rd-acct-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 11px 15px; font-family: "Inter Tight", sans-serif; font-size: 13.5px;
  color: var(--ink-mid); text-decoration: none; background: transparent; border: 0;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.rd-acct-item:hover { background: rgba(103, 232, 249, 0.08); color: var(--ink); }
.rd-acct-signout { color: var(--ink-dim); }
.rd-acct-signout:hover { background: rgba(248, 113, 113, 0.08); color: #f87171; }
.lang {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.lang-active { color: var(--ink); }
.lang-sep { color: var(--ink-mute); }
.nav-links {
  display: none;
  margin-left: auto;          /* push links to the right regardless of siblings */
  align-items: center;
  gap: 28px;
  color: var(--ink-dim);
}
@media (min-width: 900px) {
  .nav-links { display: inline-flex; }
}
.nav-links a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  transition: color var(--t-fast);
}
.nav-links a:hover { color: var(--blue-600); }

/* ── Mobile nav (hamburger) — Step 7 / Known issue #6 ──────────────────────────
   Injected by nav-auth.js on every iframe page. Hidden ≥900px (links show
   inline); below 900px the burger appears and toggles a slide-down panel. */
.nav-burger { display: none; }
.nav-burger > span {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .2s ease;
}
.nav-burger > span + span { margin-top: 5px; }
.nav-burger.is-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open > span:nth-child(2) { opacity: 0; }
.nav-burger.is-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0; margin: -8px -8px -8px auto;  /* margin-left:auto → right */
    background: transparent; border: 0; cursor: pointer; color: var(--ink);
  }
  /* The links become a full-width slide-down panel under the bar. */
  .nav-links {
    display: flex; flex-direction: column; align-items: stretch; justify-self: stretch;
    position: fixed; top: 0; left: 0; right: 0; gap: 2px;
    padding: 84px clamp(20px, 6vw, 32px) 26px;
    background: linear-gradient(180deg, rgba(6, 16, 29, 0.98), rgba(6, 16, 29, 0.95));
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: transform .34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .26s ease;
    z-index: 90;
  }
  .nav.nav-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a {
    font-size: 16px; letter-spacing: 0.06em; padding: 15px 2px; color: var(--ink-mid);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links a:hover { color: var(--accent-300); }
  /* Account control sits at the bottom of the open menu. */
  /* Account chip + dropdown inside the stacked mobile menu: render the menu
     inline (not absolutely-positioned) so it doesn't float over / clip the
     page behind the menu. */
  .nav-links .rd-acct { margin-top: 14px; flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-links .rd-acct-chip { align-self: flex-start; }
  .nav-links .rd-acct-menu {
    position: static; margin-top: 10px; width: 100%; min-width: 0; box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
  }
}

/* ───────────────────────────── hero ───────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 var(--pad-x);
  /* Full-bleed so the cyan hero glow doesn't end at the section's
     max-width and create visible vertical seams on wide viewports. */
  max-width: none;
  width: 100%;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36vh;
  background: linear-gradient(
    to bottom,
    rgba(6, 16, 29, 0) 0%,
    rgba(6, 16, 29, 0.7) 50%,
    var(--bg) 100%
  );
  pointer-events: none;
  z-index: 2;
}
/* Animated WebGL mesh-gradient — sits behind everything in the hero */
.hero-shader {
  position: absolute;
  inset: 0 0 -12vh 0;
  width: 100%;
  height: calc(100% + 12vh);
  display: block;
  z-index: 0;
  /* Soften the shader's edges so it fades into the body bg seamlessly */
  mask-image: radial-gradient(ellipse 85% 90% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 50%, #000 60%, transparent 100%);
}

.hero-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      ellipse 50% 50% at 25% 35%,
      rgba(103, 232, 249, 0.10),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 55% at 80% 75%,
      rgba(34, 211, 238, 0.08),
      transparent 70%
    );
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1100px;
}
/* Hero entrance animation */
.hero-eyebrow,
.hero-sub,
.hero-pitch,
.hero-ctas,
.scroll-cue {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-600);
  font-weight: 500;
  margin-bottom: 28px;
}
.hero-title {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(56px, 8.2vw, 138px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.hero-title .i-italic {
  color: var(--blue-600);
  letter-spacing: -0.04em;
}
.hero-sub {
  margin: 36px auto 14px;
  max-width: 640px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.hero-sub em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--blue-600);
}
.hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Rotating scroll cue bottom-left */
.scroll-cue {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  z-index: 3;
  color: var(--ink);
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-cue.is-hidden {
  opacity: 0 !important;
  transform: translateY(12px);
  pointer-events: none;
}
.scroll-cue-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 18s linear infinite;
}
.scroll-cue-text {
  fill: var(--ink);
  font-family: "Inter Tight", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.scroll-cue-arrow {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
  animation: bob 2.2s ease-in-out infinite;
  color: var(--ink);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}

/* ───────────────────────────── section primitives ───────────────────────────── */
section, footer {
  position: relative;
  padding: 140px var(--pad-x);
  max-width: var(--measure);
  margin: 0 auto;
}
@media (min-width: 1100px) {
  section, footer { padding: 180px var(--pad-x); }
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 64px;
}
.section-head.sub { margin: 56px 0 28px; }
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue-600);
  font-weight: 600;
}
.head-link {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--ink-mute);
  padding-bottom: 4px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.head-link:hover { color: var(--blue-600); border-color: var(--blue-600); }

/* ───────────────────────────── DEPARTURE BOARD ─────────────────────────────
   The signature element. A live luxury-airport split-flap board. Each row in
   .flap-board is an <a> that calls openModal(idx) — preserves the modal contract.
   Numeric cells render as <span class="flap"> tiles that flip on scroll-in,
   on row-hover, and on a slow auto-shuffle. */

.board-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mid);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(9, 21, 38, 0.6);
  backdrop-filter: blur(8px);
}
.led {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow), 0 0 14px var(--amber-glow);
  animation: ledBlink 2.4s ease-in-out infinite;
}
.led--cyan {
  background: var(--accent-300);
  box-shadow: 0 0 8px rgba(103, 232, 249, 0.55), 0 0 14px rgba(103, 232, 249, 0.35);
}
@keyframes ledBlink {
  0%, 60%, 100% { opacity: 1; }
  70%, 90%      { opacity: 0.45; }
}

.board-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 104px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 8px 0 36px;
  color: var(--ink);
}
.board-title .i-italic {
  font-size: 1.05em;
  letter-spacing: -0.02em;
}

/* The board itself */
.flap-board {
  position: relative;
  background: linear-gradient(180deg, #050a13 0%, #07101c 100%);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 18px 22px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.flap-board::before {
  /* faint scanline texture, evokes board */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  opacity: 0.6;
}

.flap-board-headers,
.flap-row {
  display: grid;
  grid-template-columns:
    minmax(90px, 0.7fr)     /* flight number (was gate, widened for "AA 2617") */
    minmax(110px, 0.85fr)   /* cabin name   (was flt, widened for "BUSINESS"/"ECONOMY") */
    minmax(220px, 1.5fr)    /* route */
    minmax(110px, 0.9fr)    /* cash */
    minmax(140px, 1fr)      /* points */
    minmax(110px, 0.9fr)    /* save */
    minmax(130px, 0.85fr);  /* departs (was status, widened for "IN 22 DAYS") */
  align-items: center;
  gap: 16px;
  padding: 0 4px;
}

.flap-board-headers {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.flap-board-headers > div {
  padding: 4px 0;
}
.flap-board-headers .col-cash,
.flap-board-headers .col-points,
.flap-board-headers .col-save { text-align: right; }

.flap-row {
  position: relative;
  padding: 16px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  color: var(--ink);
  transition: background-color var(--t-fast);
}
.flap-row:last-child { border-bottom: 0; }

.flap-row::after {
  /* amber accent stripe on the left, lights up on hover */
  content: "";
  position: absolute;
  left: -22px;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: var(--amber);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.flap-row:hover::after,
.flap-row:focus-visible::after { opacity: 1; }
.flap-row:hover { background: rgba(245, 185, 66, 0.025); }

.flap-row .col-gate {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.04em;
}
.flap-row .col-flt {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
}
.flap-row .col-route {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.flap-row .col-route .iata {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.flap-row .col-route .arrow {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--accent-300);
  transform: translateY(2px);
}
.flap-row .col-route .cities {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 2px;
}

.flap-row .col-cash,
.flap-row .col-points,
.flap-row .col-save {
  text-align: right;
}

.flap-row .col-save {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--mono);
}
/* Hero swap 2026-06-02 (per owner): dollar savings is the loudest number
   ("Save $706" reads bigger and more aspirational than "−82%"). The % becomes
   the small secondary signal, dim + uppercase, matching the Solari aesthetic. */
.flap-row .col-save .amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-300);
  letter-spacing: 0.02em;
  text-transform: none;
}
.flap-row .col-save .pct {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flap-row .col-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
}
.flap-row[data-status="on-time"]  .led { background: var(--accent-300); box-shadow: 0 0 8px rgba(103,232,249,0.5); }   /* >30d out: plenty of time (cyan) */
.flap-row[data-status="fresh"]    .led { background: #34d399;          box-shadow: 0 0 8px rgba(52,211,153,0.5); }   /* 20-30d: sweet spot (green) */
.flap-row[data-status="boarding"] .led { background: var(--amber);     box-shadow: 0 0 8px var(--amber-glow); }       /* 10-20d: getting close (amber) */
.flap-row[data-status="final"]    .led { background: #ef4444;          box-shadow: 0 0 8px rgba(239,68,68,0.5); }    /* <10d: book now (red) */

.flap-row.is-revealed .col-route .iata,
.flap-row.is-revealed .col-route .arrow {
  animation: flapInRow 360ms cubic-bezier(0.25, 0.8, 0.3, 1) both;
}
@keyframes flapInRow {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── The flap tile itself ── */
.flap-group {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
  font-family: var(--mono);
}
.flap {
  position: relative;
  display: inline-block;
  width: 0.78em;
  height: 1.32em;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--paper);
  background: var(--flap-bg);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: -0.22em;
  box-shadow: var(--flap-shadow);
  text-align: center;
}
.flap.is-narrow { width: 0.42em; }
.flap.is-wide   { width: 0.95em; }
.flap.is-space  { background: transparent; box-shadow: none; width: 0.32em; }

/* The seam line across the middle */
.flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--flap-seam);
  z-index: 4;
  pointer-events: none;
}

.flap-current,
.flap-next {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: inherit;
  color: inherit;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.flap-next {
  transform: translateY(-100%);
  opacity: 0;
}
.flap.is-flipping .flap-current {
  animation: flapOut var(--t-flap) cubic-bezier(0.55, 0.05, 0.3, 1) both;
}
.flap.is-flipping .flap-next {
  animation: flapIn  var(--t-flap) cubic-bezier(0.55, 0.05, 0.3, 1) both;
}
@keyframes flapOut {
  0%   { transform: translateY(0);   opacity: 1; }
  40%  { transform: translateY(46%); opacity: 0.55; }
  60%  { transform: translateY(54%); opacity: 0; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes flapIn {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { transform: translateY(-54%);  opacity: 0; }
  60%  { transform: translateY(-46%);  opacity: 0.55; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* Cash + points cell styling */
.flap-row .col-cash .flap { font-size: 20px; color: var(--paper); }
.flap-row .col-points .flap { font-size: 20px; color: var(--accent-200); }

/* "Chromeless" flap variant — used for fields where the ORIGINAL design had
   specific typography we want to preserve (gate amber-mono, flt muted-mono,
   IATA bold-Inter-Tight-white). The flap-flip animation still fires on every
   character so rotation feels like a Solari board re-flipping its schedule,
   but the tile background / shadow / seam line are stripped so each character
   inherits its parent's font, color, and letter-spacing exactly.

   IMPORTANT: do NOT override width/height/overflow here. The base .flap rule
   sets width:0.78em + height:1.32em + overflow:hidden — those sizes are
   relative to the font-size of the parent (so gate at 14px → 11px tile,
   IATA at 30px → 23px tile), wide enough for sans-serif uppercase glyphs
   and digits, and overflow:hidden correctly clips the .flap-next while it
   sits at translateY(-100%) opacity:0. Overriding to a narrower width
   caused the IATA glyphs to clip horizontally in the previous attempt. */
.flap-row .col-gate .flap,
.flap-row .col-flt .flap,
.flap-row .iata-wrap .flap {
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.flap-row .col-gate .flap::after,
.flap-row .col-flt .flap::after,
.flap-row .iata-wrap .flap::after {
  display: none;
}
.flap-row .col-gate .flap-group,
.flap-row .col-flt .flap-group,
.flap-row .iata-wrap .flap-group {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  gap: 0;
}

/* IATA glyph-fit fix (2026-06-02, revised).
   Two failure modes in the chromeless .iata-wrap variant of .flap:
     (a) the default 0.78em tile is NARROWER than wide letters (W/M ~1em
         natural), so their right edges clip under overflow:hidden;
     (b) narrow letters (I/J ~0.25em natural) are centered in an oversized
         tile — looks fine as long as ALL tiles are uniform width, but
         visually weird if tile widths vary per-glyph (the first attempt
         used width:auto + min-width, which broke optical spacing).
   Fix: keep a UNIFORM tile width across the row, but widen it enough that
   W/M fit, and drop overflow:hidden as a safety. Each letter still centers
   inside its own equal-width box, so the visual rhythm stays Solari-clean.
   Scoped strictly to .iata-wrap .flap; gate/flt/cash/points are untouched. */
.flap-row .iata-wrap .flap {
  width: 0.95em;       /* wider than 0.78em — fits W/M without clipping */
  overflow: visible;   /* defense in depth in case a glyph still exceeds 0.95em */
}

/* Save Trip CTA — disabled state until the transfer-path selection flow ships.
   Clicking does nothing (button has no handler); tooltip + opacity + cursor
   signal it isn't active yet. Will be re-enabled after a user picks a transfer
   path from the modal expansion (future session). */
#modalSaveTripBtn[data-cp-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(103, 232, 249, 0.18);
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile — collapse the board into a stacked layout */
@media (max-width: 880px) {
  .flap-board { padding: 14px 14px 18px; }
  .flap-board-headers { display: none; }
  .flap-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "gate     status"
      "route    route"
      "cash     points"
      "save     save";
    gap: 6px 12px;
    padding: 18px 4px 22px;
  }
  .flap-row .col-gate    { grid-area: gate; }
  .flap-row .col-flt     { display: none; }
  .flap-row .col-route   { grid-area: route; }
  .flap-row .col-cash    { grid-area: cash; text-align: left; }
  .flap-row .col-points  { grid-area: points; text-align: right; }
  .flap-row .col-save    { grid-area: save; align-items: flex-start; flex-direction: row; gap: 10px; }
  .flap-row .col-status  { grid-area: status; justify-self: end; }
  .flap-row .col-cash::before,
  .flap-row .col-points::before {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    margin-bottom: 6px;
  }
  .flap-row .col-cash::before   { content: "CASH"; }
  .flap-row .col-points::before { content: "POINTS"; text-align: right; }
  .flap-row .col-points::before { text-align: right; }
  .flap-row .col-route .iata { font-size: 26px; }
}

.routes-cta {
  margin-top: 96px;
  display: grid;
  place-items: center;
}

/* ───────────────────────────── pill buttons ───────────────────────────── */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.pill-btn:hover { border-color: var(--accent-300); background: var(--accent-100); }
.pill-btn.primary {
  background: var(--accent-300);
  color: #06101d;
  border-color: var(--accent-300);
}
.pill-btn.primary:hover { background: var(--accent-200); border-color: var(--accent-200); transform: translateY(-1px); }
.pill-btn.ghost { background: transparent; }
.pill-btn.ghost:hover { background: var(--accent-100); }
.pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-300);
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.55);
}
.pill-btn.primary .pill-dot { background: #06101d; box-shadow: 0 0 12px rgba(6, 16, 29, 0.6); }

/* Trim vertical breathing room between Routes → How → Programs so the page
   doesn't feel padded out. */
.routes        { padding-top: 20px; padding-bottom: 40px; }
.how-it-works  { padding-top: 40px; padding-bottom: 80px; }
.how-it-works .section-head { margin-bottom: 40px; }
.how-title     { margin-bottom: 60px; }
.programs      { padding-top: 100px; padding-bottom: 20px;}
.programs-list {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 1100px;
}
.programs-list .dim { color: var(--ink-mute); }

/* ───────────────────────────── manifesto ───────────────────────────── */
.manifesto-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1000px) {
  .manifesto-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.manifesto-title {
  margin: 0;
  text-align: left;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(58px, 9vw, 156px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

/* ── Globe (cobe) ── */
.globe-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  justify-self: center;
}
@media (min-width: 1000px) {
  .globe-wrap { justify-self: end; }
}
.globe-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  touch-action: none;
  cursor: grab;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.globe-canvas.is-ready { opacity: 1; }

/* WebGL-unavailable fallback (VM with no GPU / browser blocklists WebGL):
   script.js adds .globe--fallback to .globe-wrap and draws the arcs + city
   labels once at the default orientation. This static sphere sits behind them
   so the section still reads as a globe instead of going blank. */
.globe-wrap.globe--fallback::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(103, 232, 249, 0.16), transparent 58%),
    radial-gradient(circle at 50% 52%, #0b1d33 0%, #06101d 72%);
  box-shadow:
    inset 0 0 70px rgba(31, 92, 255, 0.16),
    0 0 60px -8px rgba(31, 92, 255, 0.28);
  z-index: 0;
}

/* ── On-globe floating labels ── */
.globe-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.globe-label {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 200ms ease;
  z-index: 2;
}
.globe-label .lbl-text {
  display: block;
  background: rgba(9, 21, 38, 0.92);
  color: #ffffff;
  padding: 3px 8px;
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid rgba(103, 232, 249, 0.18);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
}
.globe-label .lbl-line {
  display: block;
  width: 1px;
  height: 10px;
  background: var(--blue-600);
  opacity: 0.8;
}
.globe-label .lbl-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue-600);
  box-shadow: 0 0 10px rgba(31, 92, 255, 0.6);
}

/* SVG arc overlay between canvas and labels */
.globe-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.globe-arcs path {
  fill: none;
  stroke: var(--blue-600);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(31, 92, 255, 0.35));
}
.globe-label--arc .lbl-text {
  background: var(--accent-300);
  color: #06101d;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  border: none;
  box-shadow: 0 6px 18px -4px rgba(103, 232, 249, 0.55);
}
.globe-label--arc .lbl-line,
.globe-label--arc .lbl-dot { display: none; }
.manifesto-lead {
  margin: 80px 0 0 auto;
  max-width: 720px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.manifesto-lead .dim { color: var(--ink-dim); }

.principle { margin-top: 96px; border-top: 1px solid var(--line); }
.principle .section-head.sub {
  border-bottom: none;
  margin-top: 48px;
  margin-bottom: 40px;
}
.principle-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 800px) {
  .principle-row {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 80px;
    align-items: center;
  }
}
.principle-mark {
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(60% 60% at 35% 40%, rgba(103, 232, 249, 0.7), transparent 70%),
    radial-gradient(60% 60% at 70% 70%, rgba(34, 211, 238, 0.55), transparent 70%),
    radial-gradient(60% 60% at 20% 80%, rgba(129, 140, 248, 0.4), transparent 70%),
    var(--bg-soft);
  box-shadow:
    inset 0 0 60px rgba(255, 255, 255, 0.18),
    0 30px 80px -20px rgba(103, 232, 249, 0.3);
}
.mark-letter {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 84px;
  color: #06101d;
  letter-spacing: -0.04em;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
}
.principle-body {
  position: relative;
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 560px;
}
.principle-body em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--blue-600);
  font-weight: 400;
}
.principle-body .quote {
  position: absolute;
  left: -28px;
  top: -22px;
  font-family: "Instrument Serif", serif;
  font-size: 64px;
  color: var(--blue-200);
  line-height: 1;
  pointer-events: none;
}

/* ───────────────────────────── browser feature ───────────────────────────── */
.browser { padding-top: 0; }
.browser-hero {
  position: relative;
  margin: 0 calc(var(--pad-x) * -1) 0;
  padding: 96px var(--pad-x);
  min-height: 50vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(103, 232, 249, 0.18), transparent 65%),
    radial-gradient(70% 80% at 75% 70%, rgba(34, 211, 238, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.browser-overtitle {
  position: relative;
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(54px, 9vw, 150px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--ink);
  text-align: center;
}
/* reactive link: inherits the heading entirely — no underline/border/colour shift.
   The only affordance is the custom dot→arrow cursor (see bindHoverable). */
.browser-overtitle-link {
  color: inherit;
  text-decoration: none;
}
.browser-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
  padding-top: 80px;
}
@media (min-width: 900px) {
  .browser-body { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
}
.browser-lead {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 720px;
}
@media (min-width: 900px) {
  .browser-lead { grid-column: 2 / 3; }
}
.browser-body .pill-btn { justify-self: end; }
@media (max-width: 899px) { .browser-body .pill-btn { justify-self: start; } }

/* ───────────────────────────── contact ───────────────────────────── */
.contact {
  border-top: none;
  margin-top: 10px;
  padding-top: 10px;
}
.contact-title {
  margin: 0 0 32px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(54px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.contact-infinity {
  font-family: "Instrument Serif", serif;
  color: var(--blue-600);
  margin-left: 0.06em;
}
.contact-prompt {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}
.contact-email {
  display: inline-block;
  margin: 0 0 80px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 56px);
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--ink-mute);
  padding-bottom: 6px;
  transition: border-color var(--t-fast);
  color: var(--ink);
}
.contact-email:hover { border-color: var(--blue-600); }
.gradient-text {
  background: linear-gradient(
    100deg,
    var(--blue-700) 0%,
    var(--blue-600) 30%,
    var(--blue-500) 60%,
    var(--cyan-400) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Slim contact — single centered support-email affordance. Used on the home
   page after the heavy "Keep in touch" header + socials were removed
   (2026-05-30). The standardized .page-footer renders directly beneath it. */
.contact--slim {
  text-align: center;
  margin-top: 40px;
  padding-top: 0;
}
.contact--slim .contact-prompt { margin-bottom: 14px; }
.contact--slim .contact-email { margin-bottom: 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: 1.1fr 1.1fr 0.8fr; gap: 48px; }
}
.col-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-bottom: 32px;
}
.office { margin-bottom: 40px; }
.office h3 {
  margin: 0 0 8px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.office-arrow {
  font-family: "Instrument Serif", serif;
  color: var(--ink-dim);
  font-size: 14px;
}
.office p {
  margin: 0 0 16px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}
.office-link {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-mute);
  padding-bottom: 3px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.office-link:hover { border-color: var(--blue-600); color: var(--blue-600); }

.contact-col.follow { display: flex; flex-direction: column; gap: 12px; }
.contact-col.follow a {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 400;
  transition: color var(--t-fast);
}
.contact-col.follow a:hover { color: var(--blue-600); }

.contact-meta {
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}

/* ───────────────────────────── modal ───────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 16, 0.75);
  backdrop-filter: blur(12px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
  width: min(560px, 100%);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 40px 100px -24px rgba(0, 0, 0, 0.65);
  transform: translateY(12px) scale(0.985);
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
  position: relative;
  /* sticky-modal (#6): header + footer stay PINNED; only .modal-scroll scrolls.
     Live data with many transfer-path rungs can grow the card past the viewport,
     so we cap height and lay it out as a flex column — the route/eyebrow (header)
     and the savings + Save Trip CTA (footer) stay reachable while the path ladder
     scrolls in the middle. Supersedes the old whole-card overflow-y:auto, which
     let the header/footer scroll out of view (2026-06-02 owner feedback). */
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
}
.modal-header {
  flex: 0 0 auto;
  padding: 28px 28px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-scroll {
  flex: 1 1 auto;
  min-height: 0;                 /* lets the flex child shrink below content so it scrolls */
  overflow-y: auto;
  /* Stop wheel/touch scroll inside the list from bubbling into the page at the
     top/bottom of its range (belt; the Lenis stop() + data-lenis-prevent on
     .modal-scroll/#modalCard is the suspenders). */
  overscroll-behavior: contain;
  padding: 18px 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 232, 249, 0.35) transparent;
}
.modal-scroll .ext-chrome { margin-top: 0; }   /* spacing now comes from .modal-scroll padding */
.modal-footer {
  flex: 0 0 auto;
  padding: 16px 28px 28px;
  border-top: 1px solid var(--line);
}
.modal-footer .savings-row { margin-top: 0; }  /* spacing now comes from .modal-footer padding */
/* Lock the body when the modal is open so the page can't scroll behind it.
   :has() is supported in all modern evergreens (Safari 15.4+, Chrome 105+,
   Firefox 121+). overscroll-behavior above is the belt; this is the suspenders. */
body:has(.modal-backdrop.show) {
  overflow: hidden;
}
.modal-scroll::-webkit-scrollbar           { width: 6px; }
.modal-scroll::-webkit-scrollbar-thumb     { background: rgba(103, 232, 249, 0.35); border-radius: 999px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(103, 232, 249, 0.55); }

/* Affordance — clickable program rungs get a chevron + lighter hover so the
   user discovers they can tap. data-cp-program is set only on live-mode rows
   (cash + cash-equivalent rows are intentionally NOT clickable). */
.ext-row[data-cp-program] {
  position: relative;
  transition: background-color .14s ease;
}
.ext-row[data-cp-program]:hover {
  background: rgba(103, 232, 249, 0.04);
}
.ext-row[data-cp-program]::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 22px;
  line-height: 1;
  color: rgba(103, 232, 249, 0.45);
  pointer-events: none;
  transition: transform .18s ease, color .14s ease;
}
.ext-row[data-cp-program]:hover::after {
  color: rgba(103, 232, 249, 0.85);
  transform: translateY(-52%) translateX(2px);
}
/* The .value span overlaps with the chevron — nudge it left so the digits
   don't sit under the arrow. */
.ext-row[data-cp-program] .value {
  margin-right: 18px;
}
.modal-backdrop.show .modal { transform: none; }
.modal .close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--bg-tint);
  border: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background var(--t-fast);
}
.modal .close:hover { background: var(--accent-100); }
.modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-600);
  font-weight: 600;
}
.modal-eyebrow .sep { color: var(--ink-mute); }
.modal-eyebrow .muted { color: var(--ink-dim); }
.modal-route {
  margin: 14px 0 4px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.modal-meta { margin: 0; color: var(--ink-dim); font-size: 13px; }

.ext-chrome {
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.ext-head {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.ext-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-mute); }
.ext-dot.r { background: #ff7a85; }
.ext-dot.y { background: #ffce4d; }
.ext-dot.g { background: #0bcfa0; }
.ext-url { margin-left: 8px; font-size: 11px; color: var(--ink-dim); }

.ext-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.ext-row:last-child { border-bottom: none; }
.ext-row .label {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ext-row .sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.ext-row .value {
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ext-row.best {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.12), rgba(34, 211, 238, 0.06));
  position: relative;
}
.ext-row.best::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan-400), var(--blue-600));
  border-radius: 0 4px 4px 0;
}
.badge-best {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: rgba(31, 92, 255, 0.12);
  padding: 4px 8px;
  border-radius: 999px;
}

.savings-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.savings-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-700);
  font-weight: 600;
}
.savings-value {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0;
  color: var(--ink);
  margin-top: 4px;
  min-height: 38px;
}
.flap-group--lg .flap {
  font-size: 28px;
  width: 0.78em;
  height: 1.32em;
  vertical-align: -0.24em;
}
.flap-group--lg .flap { color: var(--accent-200); }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--accent-300);
  color: #06101d;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover { background: var(--accent-200); transform: translateY(-1px); }

/* ───────────────────────────── how-it-works (step track) ───────────────────────────── */
.how-title {
  margin: 0 0 80px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 900px;
}
.step-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}
.step-cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  min-width: 0;
}
.step-bridge {
  flex: 0.6 1 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(103, 232, 249, 0.55),
    rgba(103, 232, 249, 0.18)
  );
  margin-top: 36px;
  align-self: flex-start;
  list-style: none;
  position: relative;
}
.step-bridge::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(103, 232, 249, 0.4);
}
.step-num {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.35);
  background:
    radial-gradient(60% 60% at 40% 35%, rgba(103, 232, 249, 0.18), transparent 70%),
    rgba(103, 232, 249, 0.05);
  display: grid;
  place-items: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-200);
  margin-bottom: 26px;
  box-shadow:
    inset 0 0 24px rgba(103, 232, 249, 0.12),
    0 0 30px -8px rgba(103, 232, 249, 0.5);
  position: relative;
  z-index: 2;
}
.step-num::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.15);
}
.step-body h3 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.step-body p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .step-track {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .step-bridge {
    width: 1px;
    height: 40px;
    background: linear-gradient(
      to bottom,
      rgba(103, 232, 249, 0.55),
      rgba(103, 232, 249, 0.18)
    );
    margin: 0;
    flex: 0 0 auto;
  }
  .step-bridge::after {
    right: -3px;
    top: auto;
    bottom: -3px;
  }
}

/* ───────────────────────────── reveal-on-scroll ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ───────────────────────────── static standalone pages ───────────────────────────── */
.static-page {
  min-height: 100vh;
  padding-top: 30px;
}

.static-page .nav {
  opacity: 1;
  transform: none;
}

.page-shell {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 160px var(--pad-x) 120px;
  text-align: center;          /* center the About/FAQ header (kicker + title + lead) */
}

.page-shell::before {
  content: "";
  position: absolute;
  top: -15%;
  left: 50%;
  width: 72vw;
  height: 72vw;
  max-width: 900px;
  max-height: 900px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 40% 35%, rgba(103, 232, 249, 0.18), transparent 42%),
    radial-gradient(circle at 70% 70%, rgba(34, 211, 238, 0.10), transparent 48%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.page-shell > * {
  position: relative;
  z-index: 1;
}

.page-kicker {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue-600);
  font-weight: 600;
}

.page-title {
  margin: 0 auto;
  max-width: 1000px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(56px, 8vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.page-lead {
  margin: 48px auto 0;
  max-width: 720px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--ink-mid);
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 80px;
}

@media (min-width: 850px) {
  .page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  min-height: 260px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)),
    rgba(9, 21, 38, 0.82);
  box-shadow: 0 28px 80px -50px rgba(103, 232, 249, 0.35);
}

.page-card::after {
  content: "";
  position: absolute;
  inset: auto -25% -35% -25%;
  height: 55%;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.12), transparent 65%);
  pointer-events: none;
}

.page-card-num,
.page-card-kicker {
  display: block;
  margin-bottom: 44px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-600);
  font-weight: 600;
}

.page-card h2,
.page-card h3 {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.page-card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}

.page-card ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.page-card li {
  padding: 12px 0;
  color: var(--ink-mid);
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.price {
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.page-card.featured {
  border-color: rgba(103, 232, 249, 0.35);
  background:
    radial-gradient(circle at 35% 0%, rgba(103, 232, 249, 0.18), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(9, 21, 38, 0.92);
}

.faq-stack {
  margin-top: 80px;
  max-width: 900px;
}

.faq-stack details {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}

.faq-stack details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-stack summary {
  cursor: pointer;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.faq-stack p {
  max-width: 720px;
  margin: 20px 0 0;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.65;
}

.feedback-form {
  display: grid;
  gap: 18px;
  margin-top: 70px;
  max-width: 760px;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(9, 21, 38, 0.78);
}

.feedback-form label {
  display: grid;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

.feedback-form input,
.feedback-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  color: var(--ink);
  font: inherit;
  padding: 15px 16px;
  outline: none;
}

.feedback-form input:focus,
.feedback-form textarea:focus {
  border-color: rgba(103, 232, 249, 0.5);
}

.feedback-form textarea {
  resize: vertical;
  min-height: 150px;
}

.page-footer-link {
  display: inline-flex;
  margin-top: 72px;
}

/* ═══════════════════════════════════════════════════════════════════════
   V2 — Modern animation layer
   ─────────────────────────────────────────────────────────────────────── */

/* ─── Lenis smooth scroll baseline ─── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ─── Scroll progress bar (top of viewport) ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--accent-400) 0%,
    var(--accent-300) 50%,
    var(--accent-200) 100%
  );
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.55);
  transform-origin: left;
  transition: width 60ms linear;
}

/* ─── Split-text reveal (per-character on scroll) ─── */
.split-line {
  display: block;
  overflow: hidden;
  /* Descenders (y, g, p, italic r/b) extend below the line-box at tight
     line-heights (~0.94). Pad each line down to make room, then pull the
     next line back up so visual line-spacing is unchanged. */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.split-word {
  display: inline-block;
  white-space: nowrap;        /* keep chars in a word together — no mid-word breaks */
}
.split-char {
  display: inline-block;
  transform: translateY(110%) rotate(8deg);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.split-ready .split-char { transform: translateY(0) rotate(0); opacity: 1; }
.split-char.space { width: 0.32em; }

/* ─── Route card 3D tilt + cursor spotlight ─── */
.route-card {
  /* Vars driven by JS — JS updates --rx, --ry, --spot-x, --spot-y on pointermove */
  --rx: 0deg;
  --ry: 0deg;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-alpha: 0;
  transform-style: preserve-3d;
  transition:
    transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color var(--t-fast),
    box-shadow 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.route-card.tilt-on {
  transform: perspective(900px)
             rotateX(var(--rx))
             rotateY(var(--ry))
             translateY(-6px);
}
.route-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(
    260px circle at var(--spot-x) var(--spot-y),
    rgba(103, 232, 249, calc(var(--spot-alpha) * 0.18)),
    transparent 70%
  );
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}
.route-card .route-iata-main,
.route-card .route-iata-side,
.route-card .route-tag {
  transform: translateZ(20px);   /* lift labels off the card on tilt */
}

/* ─── Programs marquee ─── */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* Edge fades as overlay gradients (not mask-image): mask-image + a CSS
   animation on the child causes the masked content to flicker / disappear on
   iOS Safari ("shows for a sec then goes away"). Overlays are bug-free and
   look identical — they fade the row edges into the page background. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
  /* Promote to its own GPU layer so the marquee paints reliably on iOS.
     (No base `transform` here — the animation owns transform.) */
  will-change: transform;
  backface-visibility: hidden;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 14px 18px;            /* vertical breathing room for descenders */
  list-style: none;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.25;             /* was 1 — clipped y/g/p descenders */
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--ink);
}
.marquee-row li {
  display: flex;                 /* centers the bullet on the line, not the baseline */
  align-items: center;
  line-height: 1.25;
}
.marquee-row li:nth-child(4n+3) { color: var(--ink-dim); }
.marquee-row li:nth-child(4n+1) { color: var(--accent-200); }
.marquee-row .bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-300);
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.55);
  flex: none;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly one duplicate-track width */
}
.programs .section-head { margin-bottom: 40px; }
.programs { padding-bottom: 60px; }

/* ─── Magnetic CTAs ─── */
.pill-btn.primary,
.btn-primary {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background var(--t-fast),
              border-color var(--t-fast),
              color var(--t-fast);
}
.pill-btn.primary.is-magnetic,
.btn-primary.is-magnetic {
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background var(--t-fast);
}

/* ─── Counter (savings value) — no special style, JS just rewrites text */
.counter[data-counter] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .split-char { transform: none; opacity: 1; transition: none; }
  .scroll-progress span { transition: none; }
}

/* ───────────────────────────── WAITLIST ─────────────────────────────
   Early-access form between manifesto and "Live in browser" sections.
   Posts to /api/join-waitlist (Supabase) — see script.js initWaitlist() */
.waitlist {
  position: relative;
  padding: 120px var(--pad-x);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(103, 232, 249, 0.025));
}

.waitlist-hero {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.waitlist-title {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 24px 0 16px;
}

.waitlist-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 auto 40px;
  max-width: 480px;
}

.waitlist-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.waitlist-input {
  flex: 1;
  min-width: 220px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.waitlist-input:focus {
  border-color: var(--accent-300);
  background: var(--bg-glass-2);
}

.waitlist-input::placeholder {
  color: var(--ink-mute);
}

/* "How'd you hear about us?" dropdown — styled to match the email pill. */
.waitlist-select {
  flex: 0 1 auto;
  min-width: 200px;
  padding: 14px 44px 14px 22px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background-color: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237d8ca3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.waitlist-select:focus { border-color: var(--accent-300); }
/* Muted text while the placeholder option is the active choice. */
.waitlist-select:has(option[value=""]:checked) { color: var(--ink-mute); }

.waitlist-submit {
  white-space: nowrap;
}

.waitlist-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist-feedback {
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
  min-height: 1.4em;
  transition: color var(--t-fast);
  max-width: 480px;
}

.waitlist-feedback[data-state="loading"] { color: var(--ink-mid); }
.waitlist-feedback[data-state="success"] { color: var(--accent-300); }
.waitlist-feedback[data-state="duplicate"] { color: var(--accent-200); }
.waitlist-feedback[data-state="error"]    { color: #f87171; }

@media (max-width: 640px) {
  .waitlist { padding: 80px var(--pad-x); }
  .waitlist-form { flex-direction: column; gap: 10px; }
  .waitlist-input { width: 100%; }
  .waitlist-submit { width: 100%; justify-content: center; }
}

/* ───────────────────────────── PAGE FOOTER ─────────────────────────────
   Small legal-links footer at the bottom of subpages (about / faq / feedback
   / pricing). The homepage doesn't include this — its Contact section
   already serves as the global footer. */
.page-footer {
  margin-top: 120px;
  padding: 40px var(--pad-x) 60px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.page-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-wrap: wrap;
  justify-content: center;
}
.page-footer-links a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color var(--t-fast);
}
.page-footer-links a:hover { color: var(--accent-300); }
.page-footer-links a.is-active { color: var(--accent-300); }
.page-footer-sep { color: var(--ink-mute); }
.page-footer-meta {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ───────────────────────────── CONTACT FOLLOW ─────────────────────────────
   Replaces the 3-col contact-grid (offices + socials). Single centered row
   of Instagram / TikTok / LinkedIn — matches the original site's footer
   socials. Offices removed per user feedback 2026-05-29. */
.contact-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.contact-follow .col-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.contact-follow-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.contact-follow-links a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-mid);
  padding: 6px 4px;
  transition: color var(--t-fast), transform var(--t-fast);
}

.contact-follow-links a:hover {
  color: var(--accent-300);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .contact-follow-links { gap: 20px; }
}

/* ===================== Social proof (real r/awardtravel threads) =====================
   Ported from the friend's design + translated to OUR token scheme
   (--accent-300 / --ink* / --mono / --t-slow). Layout: left detail panel +
   right numbered list that auto-rotates and links to the real thread. */
.sp-head { text-align: left; max-width: 820px; margin: 0 0 clamp(40px, 5vw, 64px); }
.sp-head .eyebrow { display: inline-block; margin-bottom: 20px; }
.sp-title { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); margin: 0; }
.sp-title .i-italic { font-size: 1.04em; }
.sp-sub { margin-top: 18px; color: var(--ink-dim); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 640px; line-height: 1.6; }

.social-stage { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: 360px; }
@media (max-width: 820px) { .social-stage { grid-template-columns: 1fr; gap: 36px; min-height: 0; } }

/* Detail panel */
.sp-panel { position: relative; }
.sp-panel__quote { font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-mid); max-width: 460px; margin: 0; }
.sp-panel__meta { margin-top: 28px; display: flex; flex-direction: column; gap: 5px; }
.sp-panel__name { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.sp-panel__role { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-300); }
.sp-panel__sub { font-size: .95rem; color: var(--ink-dim); }
.sp-panel__link { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-300); text-decoration: none; border-bottom: 1px solid rgba(103, 232, 249, 0.3); padding-bottom: 3px; transition: border-color var(--t-fast), gap var(--t-fast); }
.sp-panel__link:hover { border-color: var(--accent-300); gap: 12px; }
/* swap animation when the active item changes */
.sp-panel.is-swapping .sp-panel__quote,
.sp-panel.is-swapping .sp-panel__meta,
.sp-panel.is-swapping .sp-panel__link { opacity: 0; transform: translateY(12px); }
.sp-panel__quote, .sp-panel__meta, .sp-panel__link { transition: opacity .5s var(--t-slow), transform .5s var(--t-slow); }
.sp-panel__meta { transition-delay: .04s; }
.sp-panel__link { transition-delay: .08s; }

/* Right-hand list */
.sp-list { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.sp-list li { margin: 0; }
.sp-item { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; text-decoration: none;
  width: 100%; background: none; border: 0; font: inherit; text-align: left;
  color: rgba(255, 255, 255, .13); transition: color .4s var(--t-slow), transform .4s var(--t-slow); will-change: transform; }
@media (hover: hover) and (pointer: fine) { .sp-item, .sp-item * { cursor: none; } }
.sp-item__idx { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: inherit; opacity: .6; transform: translateY(-0.35em); }
.sp-item__label { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; text-transform: uppercase; }
.sp-item.is-active { color: var(--ink); transform: translateX(10px); }
.sp-item.is-active .sp-item__idx { color: var(--accent-300); opacity: 1; }
@media (max-width: 820px) {
  .sp-item__label { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .sp-item { color: rgba(255, 255, 255, .34); }
}

/* ───────────────────────────── HERO PITCH LINE ───────────────────────────── */
.hero-pitch {
  margin: 0 auto 40px;
  max-width: 600px;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-mid);
  font-weight: 400;
}

/* ──────────────────────────── ORBITAL FEATURES ────────────────────────────── */
/* Interactive feature constellation: glowing ChainPoints core, 6 feature nodes
   that auto-rotate on a ring (JS rAF), a decorative ring spin + core pulse for
   depth. Click a node → it tweens to the front-bottom anchor, rotation pauses,
   related nodes pulse, and a detail card expands beneath it. prefers-reduced-
   motion → static ring + .orbital-detail panel (no rotation/card). */
.orbital {
  position: relative;
  /* MUST match the other sections' horizontal box so the eyebrow/title left edge
     lines up with #how / #routes: same max-width (--measure) + side pad (--pad-x).
     Extra bottom padding reserves the open-card's landing zone. */
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(140px, 18vh, 180px) var(--pad-x) clamp(150px, 16vw, 200px);
}
/* header + title left-aligned via the shared .how-title — same family as #how / #routes */
.orbital .how-title { margin: 0 0 clamp(24px, 4vw, 40px); }
.orbital-stage {
  position: relative;
  isolation: isolate;            /* own stacking context → node z-index stays local */
  width: min(560px, 86vw);
  aspect-ratio: 1 / 1;
  margin: clamp(40px, 6vw, 64px) auto clamp(30px, 4vw, 46px);
  --radius: min(208px, 33vw);
}
/* decorative slow-spinning ring (does NOT carry the clickable nodes) */
.orbital-spin {
  position: absolute; inset: 9%;
  border-radius: 50%;
  border: 1px solid var(--line);
  animation: orbital-spin 64s linear infinite;
}
.orbital-spin::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px dashed rgba(103, 232, 249, 0.20);
}
.orbital-ring-static {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--radius) * 2); height: calc(var(--radius) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, 0.13);
}
@keyframes orbital-spin { to { transform: rotate(360deg); } }

.orbital-core {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: clamp(98px, 17vw, 134px); height: clamp(98px, 17vw, 134px);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 34%, rgba(103, 232, 249, 0.16), var(--bg-soft) 72%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 6px rgba(103, 232, 249, 0.04), 0 0 48px rgba(103, 232, 249, 0.20), inset 0 0 26px rgba(103, 232, 249, 0.08);
  animation: orbital-pulse 4.6s ease-in-out infinite;
}
.orbital-core-logo { width: 30px; height: 30px; object-fit: contain; }
.orbital-core-name { font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
@keyframes orbital-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(103,232,249,0.04), 0 0 40px rgba(103,232,249,0.17), inset 0 0 26px rgba(103,232,249,0.07); }
  50%      { box-shadow: 0 0 0 11px rgba(103,232,249,0.06), 0 0 66px rgba(103,232,249,0.30), inset 0 0 30px rgba(103,232,249,0.12); }
}

.orbital-nodes { position: absolute; inset: 0; z-index: 3; }
.orbital-node {
  position: absolute; top: 50%; left: 50%;
  /* CSS --i placement is the no-JS / reduced-motion fallback ring position;
     in live mode script.js overrides transform/opacity per frame. */
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(calc(-1 * var(--radius))) rotate(calc(var(--i) * -60deg));
  width: clamp(74px, 13vw, 96px);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-dim);
  transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* live mode: rAF drives transform/opacity, so don't CSS-transition them (would double-smooth) */
.orbital--live .orbital-node { will-change: transform, opacity; }
.orbital-node-icon {
  width: clamp(50px, 8.5vw, 62px); height: clamp(50px, 8.5vw, 62px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--line); color: inherit;
  transition: border-color .25s ease, box-shadow .35s ease, background .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), color .25s ease;
}
.orbital-node-icon svg { width: 46%; height: 46%; }
.orbital-node-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; transition: color .25s ease;
}
@media (hover: hover) { .orbital-node:hover { color: var(--accent-200); } }
.orbital-node:hover .orbital-node-icon { border-color: rgba(103,232,249,0.5); box-shadow: 0 0 22px rgba(103,232,249,0.26); }
.orbital-node:focus-visible { outline: none; }
.orbital-node:focus-visible .orbital-node-icon { outline: 2px solid var(--accent-300); outline-offset: 3px; }
.orbital-node[aria-selected="true"] { color: var(--accent-200); }
.orbital-node[aria-selected="true"] .orbital-node-icon {
  border-color: var(--accent-300); background: rgba(103,232,249,0.10); color: var(--accent-200);
  box-shadow: 0 0 32px rgba(103,232,249,0.40); transform: scale(1.09);
}
.orbital-node[aria-selected="true"] .orbital-node-label { color: var(--accent-200); }

/* related-node pulse while a card is open (legacy relatedIds behaviour) */
.orbital-node.is-related .orbital-node-icon {
  border-color: rgba(103, 232, 249, 0.45);
  animation: orbital-related 1.9s ease-in-out infinite;
}
.orbital-node.is-related .orbital-node-label { color: var(--accent-200); }
@keyframes orbital-related {
  0%, 100% { box-shadow: 0 0 13px rgba(103, 232, 249, 0.18); }
  50%      { box-shadow: 0 0 26px rgba(103, 232, 249, 0.42); }
}

/* ── expanded detail card (spawns from the active node) ── */
.orbital-card {
  position: absolute; left: 50%; z-index: 12;
  width: min(322px, 80%);
  padding: 15px 18px 17px; text-align: left;
  background: linear-gradient(180deg, var(--bg-soft), #07111f);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent-300);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.05),
    0 26px 64px -30px rgba(0, 0, 0, 0.85),
    0 0 46px rgba(103, 232, 249, 0.10);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 8px) scale(0.97);
  transform-origin: 50% 0;
  transition: opacity .22s ease-out, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
}
.orbital-card.is-open {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity .26s ease-out, transform .34s cubic-bezier(.2,.8,.2,1);
}
.orbital-card[hidden] { display: none; }
.orbital-card-line {
  position: absolute; left: 50%; top: 0; width: 1px; height: 16px;
  transform: translate(-50%, -100%);
  background: linear-gradient(var(--accent-300), transparent);
}
.orbital-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.orbital-card-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .14em;
  color: var(--accent-300); padding: 2px 7px; border-radius: 4px; line-height: 1.4;
  background: rgba(103, 232, 249, 0.10); border: 1px solid rgba(103, 232, 249, 0.30);
}
.orbital-card-brand {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.orbital-card-title {
  margin: 0 0 6px; font-family: "Inter Tight", sans-serif; font-weight: 600;
  font-size: 1.04rem; letter-spacing: -0.01em; color: var(--ink);
}
.orbital-card-body { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-mid); }

/* static fallback panel — visible only when JS hasn't taken over (no .orbital--live) */
.orbital-detail { max-width: 520px; margin: 0 auto; min-height: 78px; }
.orbital--live .orbital-detail { display: none; }
.orbital-detail-eyebrow {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-300); margin-bottom: 9px;
  transition: opacity .2s ease;
}
.orbital-detail-body { font-size: clamp(0.95rem, 1.5vw, 1.08rem); line-height: 1.62; color: var(--ink-mid); margin: 0; transition: opacity .2s ease; }

@media (max-width: 560px) {
  .orbital-stage { --radius: 33vw; }
  .orbital-node-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbital-spin, .orbital-core { animation: none; }
  .orbital-node.is-related .orbital-node-icon { animation: none; }
  .orbital-card, .orbital-card.is-open { transition: opacity .14s ease, visibility 0s; }
}