/* StockJet: styles.

   Premium travel with the crypto underneath kept out of sight. The ground is
   near-black; type is warm white. Three faces: the StockJet name in Arial,
   titles in a rounded bold headline face, and all body and interface
   text in a rounded book face at 400/500. Colour comes from
   the flight itself and means one thing each: atmosphere blue is "live",
   sunrise gold is "act now" (boarding, the departures board). The ticket is
   the only paper-white object, because it is the thing you are buying. */

:root {
  --bg: #03050a;
  --bg-2: #080b12;
  --bg-3: #0d1119;
  --line: rgba(236, 240, 248, 0.09);
  --line-2: rgba(236, 240, 248, 0.18);
  --text: #f3f1ec;
  --text-2: rgba(243, 241, 236, 0.68);
  --text-3: rgba(243, 241, 236, 0.44);
  --sky: #6fb4ff;
  --sun: #ffc56e;
  --paper: #f4f1ea;
  --paper-2: #e9e4d8;
  --ink: #0c1018;
  --ink-2: #4b5261;
  --ink-3: #8b909b;
  --board: #0a0b0e;
  --flap-ink: #f3eddd;
  /* The specified title and body stacks. VAG Rounded, Arial Rounded and the
     easyJet faces are not web fonts we can serve, so each stack ends in a free
     web font loaded from Google (Nunito, Ubuntu) before the generic family,
     which keeps the look for visitors who have none of them. */
  --logo: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --title: "easyJet Next Generation Headline", "VAG Rounded", "Arial Rounded MT Bold", "Nunito", sans-serif;
  --sans: "easyJet Rounded Book", "Ubuntu", "Inter", sans-serif;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg, canvas, video { display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(111, 180, 255, 0.35); }

/* Scrollbars: thin and quiet everywhere, never the browser default. */
* { scrollbar-width: thin; scrollbar-color: rgba(243, 241, 236, 0.22) transparent; }
html { scrollbar-color: rgba(243, 241, 236, 0.22) var(--bg); }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(243, 241, 236, 0.22); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(243, 241, 236, 0.4); }
  ::-webkit-scrollbar-corner { background: transparent; }
}

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
/* Titles / headlines. */
.display { font-family: var(--title); font-weight: 700; letter-spacing: -0.02em; }
b, strong { font-weight: 500; }
.muted { color: var(--text-3); }
.kicker { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--text-3); }

/* ── Controls ─────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 500 15px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.pill:hover { box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.35); }
.pill:disabled { background: rgba(243, 241, 236, 0.14); color: var(--text-3); cursor: not-allowed; scale: 1; box-shadow: none; }
.pill--sm { height: 36px; padding: 0 16px; font-size: 13.5px; }
.pill--big { height: 56px; font-size: 16px; }
.pill--block { width: 100%; }
.pill--ghost { background: transparent; color: var(--text); border-color: rgba(243, 241, 236, 0.32); }
.pill--ghost:hover { background: rgba(243, 241, 236, 0.08); box-shadow: none; }
.pill--ink { background: var(--ink); color: var(--paper); }
.pill--ink:hover { box-shadow: 0 14px 34px -14px rgba(12, 16, 24, 0.55); }

.seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(243, 241, 236, 0.06); border: 1px solid var(--line); }
.seg button {
  min-height: 32px; padding: 0 13px; border-radius: 999px;
  font: 500 12px var(--sans); color: var(--text-2);
  transition: background 0.2s, color 0.2s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.select { position: relative; display: inline-flex; }
.select select {
  appearance: none; -webkit-appearance: none; width: 100%;
  background: transparent; border: 0; border-radius: 0;
  padding: 4px 26px 4px 0; font-weight: 500; font-size: 16px; color: var(--text); cursor: pointer;
}
.select select option { background: var(--bg-2); color: var(--text); }
.select::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: 0.7;
}
.picker { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.picker .select select { border-bottom: 1px solid var(--line-2); }

.demo-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  border: 1px dashed rgba(243, 241, 236, 0.32); color: var(--text-2);
  font: 500 10px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 13.5px; color: var(--text-3); }
.fine { margin: 14px 0 0; font-size: 13px; color: var(--text-3); }
.link-btn { font-size: 13.5px; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.link-btn:hover { color: var(--text-2); }
.empty { color: var(--text-2); }

/* Status chips: calm, act now, live, done. */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 27px; padding: 0 12px; border-radius: 999px;
  font: 500 12.5px/1 var(--sans); white-space: nowrap; border: 1px solid var(--line-2);
  background: rgba(243, 241, 236, 0.07); color: var(--text);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.chip--alert { color: var(--sun); background: rgba(255, 197, 110, 0.12); border-color: rgba(255, 197, 110, 0.35); }
.chip--live { color: #9fcdff; background: rgba(111, 180, 255, 0.13); border-color: rgba(111, 180, 255, 0.38); }
.chip--done { color: var(--text-2); background: transparent; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .chip i { animation: none; } }

/* ── Header ───────────────────────────────────────────────────────────── */

.nav {
  position: fixed; z-index: 50; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 18px var(--gutter);
  transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(3, 5, 10, 0.72); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; justify-self: start; }
.wordmark__mark { width: 34px; height: auto; }
/* In the footer the wordmark is set in the quiet text colour, so the mark
   steps back with it. */
.foot .wordmark__mark { opacity: 0.6; }
/* Logo / wordmark. */
.wordmark span { font: 700 21px/1 var(--logo); letter-spacing: -0.01em; }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 34px); font-size: 14.5px; font-weight: 500; }
.nav__links a { text-decoration: none; color: var(--text-2); transition: color 0.2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }
.nav__end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* Connect Wallet explains itself here while Privy is not configured. */
.toast {
  position: fixed; z-index: 60; top: 74px; right: var(--gutter); max-width: 22rem; margin: 0;
  padding: 12px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2);
  font-size: 14px; color: var(--text-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity 0.25s, translate 0.25s var(--ease);
}
.toast.is-on { opacity: 1; translate: 0 0; }
/* The X account: the same quiet round control as the menu button, so the
   navbar keeps one shape for everything that is not a link or the wallet. */
.nav__x {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--text-2);
  text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.nav__x:hover { color: var(--text); border-color: var(--text-3); }
.nav__x svg { width: 13.5px; height: 13.5px; }
/* Its counterpart inside the menu, which only a narrow screen opens. */
.nav__x-row { display: none; }
.nav__menu { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); place-items: center; color: var(--text-2); }
.nav__menu:hover { color: var(--text); border-color: var(--text-3); }
.nav__menu svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__menu { display: grid; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    display: none; flex-direction: column; gap: 0;
    padding: 4px var(--gutter) 14px;
    background: rgba(3, 5, 10, 0.985); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-menu-open .nav__links { display: flex; }
  .nav.is-menu-open { background: rgba(3, 5, 10, 0.94); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line); }
  .nav__links a { padding: 13px 0; font-size: 16px; border-top: 1px solid var(--line); }
  /* The top bar is full at this width, so the account moves into the menu. */
  .nav__x { display: none; }
  .nav__x-row { display: flex; align-items: center; gap: 11px; }
  .nav__x-row svg { width: 15px; height: 15px; }
}

/* ── The film ─────────────────────────────────────────────────────────── */

.film { position: relative; height: 900vh; }
.film__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; --focus: 50%; --scrim: 0.3; }
.film__still, .film__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus) 50%;
}
.film__still--last { opacity: 0; }
.film__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.55) 0%, rgba(3, 5, 10, 0) 24%),
    linear-gradient(90deg, rgb(3 5 10 / calc(var(--scrim) * 1.15)) 0%, rgb(3 5 10 / calc(var(--scrim) * 0.7)) 34%, rgb(3 5 10 / 0) 60%),
    linear-gradient(0deg, rgba(3, 5, 10, 0.5) 0%, rgba(3, 5, 10, 0) 18%);
}

.beat { position: absolute; z-index: 2; transform: translateY(var(--rise, 0)); will-change: opacity, transform; }
/* The opening sits left, in the haze, so the aircraft on the right stays clear. */
.beat--open { top: 50%; left: var(--gutter); width: min(46rem, calc(100% - 2 * var(--gutter))); transform: translateY(calc(-46% + var(--rise, 0))); }
.beat__title { margin: 0 auto; max-width: 14ch; font-size: clamp(40px, 5vw, 80px); line-height: 1.02; text-wrap: balance; text-shadow: 0 2px 40px rgba(3, 5, 10, 0.5); }
.beat--open .beat__title { margin: 0; max-width: 9.2em; font-size: clamp(44px, 5.6vw, 92px); }
.beat__lede { margin: clamp(16px, 2.4vh, 24px) auto 0; max-width: 34em; font-size: clamp(16px, 1.3vw, 19px); color: var(--text-2); }
.beat--open .beat__lede { margin-left: 0; color: rgba(243, 241, 236, 0.84); }
.beat__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(22px, 3.4vh, 34px); }
.beat--open .beat__actions { justify-content: flex-start; }

.beat--side { top: 50%; left: var(--gutter); width: min(30rem, calc(100% - 2 * var(--gutter))); transform: translateY(calc(-50% + var(--rise, 0))); }
.beat--wide { width: min(40rem, calc(100% - 2 * var(--gutter))); }
.beat__kicker { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.beat__h { margin: 0; font-size: clamp(36px, 4.2vw, 66px); line-height: 1.02; text-wrap: balance; }
.beat__p { margin: 18px 0 0; font-size: clamp(16px, 1.25vw, 18.5px); color: var(--text-2); text-wrap: pretty; }
.beat__p b { color: var(--text); font-weight: 500; font-size: 0.92em; }

/* Landing: the sky is bright, so the last beat is set in ink. */
.beat--land { top: 50%; left: var(--gutter); right: var(--gutter); transform: translateY(calc(-50% + var(--rise, 0))); text-align: center; color: var(--ink); }
.beat--land .beat__kicker { color: rgba(12, 16, 24, 0.6); }
.beat--land .beat__title { text-shadow: none; max-width: 20ch; }
/* The aeroplane in the middle of the line. It is the logo, masked so it takes
   the colour of the type around it and stays one piece of writing rather than
   a pasted-on image. */
.beat__mark {
  display: inline-block; width: 0.86em; height: 0.51em; margin: 0 0.1em; vertical-align: -0.02em;
  background: currentColor;
  -webkit-mask: url(../assets/logo.png) center / contain no-repeat;
  mask: url(../assets/logo.png) center / contain no-repeat;
}
.beat--land .beat__lede { color: rgba(12, 16, 24, 0.72); }
.beat--land .pill--big { padding: 0 34px; }

/* Where you are in How it works: four stops on a line that ends at the last
   stop and fills up to the current one. --step (0–3) is set per beat. */
.beat__steps { position: relative; display: inline-flex; align-items: center; gap: 30px; margin: 0 0 22px; padding: 0; list-style: none; }
.beat__steps::before, .beat__steps::after { content: ""; position: absolute; left: 5px; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; }
.beat__steps::before { right: 5px; background: rgba(243, 241, 236, 0.3); }
.beat__steps::after { width: calc((100% - 10px) * var(--step, 0) / 3); background: var(--text); }
.beat__steps li { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: rgba(243, 241, 236, 0.4); }
.beat__steps li.is-done, .beat__steps li.is-on { background: var(--text); }
.beat__steps li.is-on { box-shadow: 0 0 0 5px rgba(243, 241, 236, 0.22); }
.beat__note { margin: 16px 0 0; font-size: 13.5px; color: rgba(12, 16, 24, 0.66); }
.beat__note a { color: var(--ink); }
.store {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 18px; border-radius: 14px;
  background: var(--ink); color: var(--paper); text-align: left;
}
.store svg { width: 22px; height: 22px; }
.store span { display: grid; font-weight: 500; font-size: 17px; line-height: 1.1; }
.store small { font-weight: 500; font-size: 11px; opacity: 0.72; }

.film__cue {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(22px, 4vh, 40px); transform: translateX(-50%); margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.film__cue span { width: 1px; height: 34px; background: linear-gradient(transparent, var(--text)); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) {
  .film { height: 820vh; }
  .beat--side, .beat--open { top: auto; bottom: 64px; transform: translateY(var(--rise, 0)); }
  .beat--open .beat__title { font-size: clamp(36px, 10.5vw, 46px); }
  .beat__h { font-size: clamp(32px, 9vw, 40px); }
  .film__shade {
    background:
      linear-gradient(180deg, rgba(3, 5, 10, 0.6) 0%, rgba(3, 5, 10, 0) 26%),
      linear-gradient(0deg, rgb(3 5 10 / calc(var(--scrim) * 1.6 + 0.2)) 0%, rgb(3 5 10 / calc(var(--scrim) * 0.9)) 38%, rgb(3 5 10 / 0) 62%);
  }
  .film__cue { display: none; }
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.section { padding: clamp(96px, 14vh, 170px) var(--gutter); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.h2 { margin: 0; font-size: clamp(34px, 4vw, 64px); line-height: 1.04; text-wrap: balance; }
.lede { margin: 0; max-width: 34em; font-size: clamp(16.5px, 1.25vw, 19px); color: var(--text-2); text-wrap: pretty; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* How it works: an itinerary, not a feature grid. */
.itinerary { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.itinerary::before { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; border-top: 1px dashed var(--line-2); }
.itinerary li { position: relative; }
.stop { position: relative; display: block; width: 21px; height: 21px; margin-bottom: 26px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--text); }
.is-dest .stop { background: var(--text); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6.5px var(--text); }
.step { display: block; margin-bottom: 8px; font-size: 12px; color: var(--text-3); }
.itinerary h3 { margin: 0 0 10px; font: 700 clamp(21px, 1.8vw, 26px)/1.15 var(--title); letter-spacing: -0.02em; }
.itinerary p { margin: 0; max-width: 22em; font-size: 16px; color: var(--text-2); }
@media (max-width: 860px) {
  .itinerary { grid-template-columns: 1fr; gap: 36px; padding-left: 44px; }
  .itinerary::before { top: 10px; bottom: 10px; left: 10px; right: auto; border-top: 0; border-left: 1px dashed var(--line-2); }
  .stop { position: absolute; left: -44px; top: 0; margin: 0; }
}

/* ── Departures board ─────────────────────────────────────────────────── */

.fares__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 18px; }
.board {
  --cell: clamp(12.5px, 1.3vw, 21px);
  --grid: auto auto 1fr auto auto auto;
  background: var(--board); color: var(--flap-ink); border-radius: 14px;
  padding: clamp(14px, 1.8vw, 26px) clamp(14px, 2vw, 30px) clamp(10px, 1.4vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}
.board__top { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: 500 13px var(--sans); }
.board__title { display: inline-flex; align-items: center; gap: 10px; color: var(--sun); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.board__title svg { width: 20px; height: 20px; }
.board__station { color: rgba(243, 237, 221, 0.62); text-transform: uppercase; letter-spacing: 0.06em; }
.board__clock { margin-left: auto; font-weight: 500; font-size: 15px; letter-spacing: 0.04em; }
.board__cols, .board__row { display: grid; grid-template-columns: var(--grid); column-gap: calc(var(--cell) * 1.1); align-items: center; }
.board__cols { padding: 0 8px 8px; font: 500 10.5px var(--sans); color: rgba(243, 237, 221, 0.42); text-transform: uppercase; letter-spacing: 0.08em; }
.bc { width: calc(var(--n) * (var(--cell) * 1.12 + 2px) - 2px); }
.bc.is-right { text-align: right; }
.board__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.board__row { width: 100%; padding: 5px 8px; border-radius: 7px; text-align: left; transition: background 0.2s; }
.board__row:hover { background: rgba(255, 255, 255, 0.05); }
.board__row:focus-visible { outline: 2px solid var(--sun); outline-offset: 0; }
.flaps { display: inline-flex; gap: 2px; }
.flap {
  position: relative; display: block; overflow: hidden;
  width: calc(var(--cell) * 1.12); height: calc(var(--cell) * 1.62);
  font: 500 var(--cell) / calc(var(--cell) * 1.62) var(--sans); font-style: normal;
  text-align: center; color: var(--flap-ink);
  background: linear-gradient(to bottom, #222328 0%, #1c1d21 49.5%, #141518 50.5%, #18191c 100%);
  border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(0, 0, 0, 0.7); }
.flap.is-turning::before {
  content: ""; position: absolute; inset: 0 0 50% 0; transform-origin: 50% 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.3));
  animation: flip-top 0.092s steps(2) infinite;
}
@keyframes flip-top { from { transform: scaleY(1); } to { transform: scaleY(0.1); } }
.flaps--shares .flap { color: #fff; }
li[data-remark="boarding"] .flaps--remark .flap, li[data-remark="final"] .flaps--remark .flap { color: var(--sun); }
li[data-remark="final"] .flaps--remark { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { li[data-remark="final"] .flaps--remark { animation: none; } }
@media (max-width: 1040px) { .board { --grid: auto auto 1fr auto auto; } .flaps--usd, .bc--usd { display: none; } }
@media (max-width: 880px) { .board { --grid: auto auto 1fr auto; } .flaps--remark, .bc--remark { display: none; } }
@media (max-width: 640px) {
  .board { --cell: 14px; --grid: auto auto 1fr; }
  .flaps--dest, .bc--dest, .board__station { display: none; }
  .flaps--shares, .bc--shares { justify-self: end; }
}

/* ── Companion preview ────────────────────────────────────────────────── */

.companion { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.companion__copy .h2 { margin-bottom: 22px; }
.companion__copy .lede { margin-bottom: 30px; }
.companion__card {
  display: block; text-decoration: none; padding: clamp(20px, 2.4vw, 32px); border-radius: 22px;
  background: linear-gradient(180deg, rgba(111, 180, 255, 0.07), rgba(111, 180, 255, 0.01) 60%), var(--bg-2);
  border: 1px solid var(--line-2);
  min-height: 280px;
}
.companion__card:hover { border-color: rgba(111, 180, 255, 0.45); }
.companion__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.companion__no { margin: 0; font-size: 12px; color: var(--text-3); }
.companion__route { margin: 6px 0 0; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; }
.companion__now { margin: 6px 0 16px; font: 500 clamp(20px, 1.6vw, 24px)/1.2 var(--sans); letter-spacing: -0.01em; }
.companion__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.companion__foot b { color: var(--text); }
@media (max-width: 960px) { .companion { grid-template-columns: 1fr; } }

/* ── Map, stats, progress (shared by the companion and the trip page) ─── */

.map { width: 100%; height: auto; margin: 10px 0 4px; overflow: visible; }
.map__route { fill: none; stroke: rgba(243, 241, 236, 0.28); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.map__flown { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; }
.map__port { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.map__port.is-reached { fill: var(--text); }
.map__code { fill: var(--text-2); font: 500 12px var(--sans); text-anchor: middle; }
.map__plane path { fill: #fff; transform: scale(1.5); }
.map__halo { fill: rgba(111, 180, 255, 0.16); stroke: rgba(111, 180, 255, 0.4); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin: 0; }
.stat dt { font-size: 12px; color: var(--text-3); }
.stat dd { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; font-size: clamp(18px, 1.6vw, 24px); }
.stat dd small { font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.progress { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; font-size: 12px; color: var(--text-2); }
.progress__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(243, 241, 236, 0.14); overflow: hidden; }
.progress__bar i { position: absolute; inset: 0; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p)); }

/* ── A year in shares ─────────────────────────────────────────────────── */

.year { display: grid; gap: 48px; }
.year__title { margin: 0; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.08; max-width: 20ch; text-wrap: balance; }
.year__now { color: var(--sky); }
.year__body { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.year__wrap { overflow-x: auto; }
.year__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.year__table caption { caption-side: bottom; text-align: left; padding-top: 14px; font-size: 13px; color: var(--text-3); }
.year__table tr { border-top: 1px solid var(--line); }
.year__table tr:last-child { border-bottom: 1px solid var(--line); }
.year__table th, .year__table td { padding: 16px 0; text-align: left; font-weight: 400; vertical-align: middle; }
.year__table .tk { display: block; font: 500 14px var(--sans); letter-spacing: 0.04em; }
.year__table .nm { display: block; font-size: 13px; color: var(--text-3); }
.year__table .sp { width: 136px; padding-inline: 12px; }
.spark { width: 120px; height: 30px; overflow: visible; }
.spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--text); }
.year__table .num { font: 500 15px var(--sans); text-align: right; }
.year__table .num .lbl { display: block; font: 400 11.5px var(--sans); color: var(--text-3); }
.year__table .chg { text-align: right; font-size: 14px; padding-left: 16px; }
.chg.is-fewer { color: var(--sky); }
.chg.is-more { color: var(--text-2); }
@media (max-width: 960px) { .year__body { grid-template-columns: 1fr; } }

/* ── Questions ────────────────────────────────────────────────────────── */

.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 6vw, 100px); align-items: start; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-weight: 500; font-size: clamp(17px, 1.3vw, 19px); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--text-3); transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; max-width: 42em; color: var(--text-2); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ── Footer ───────────────────────────────────────────────────────────── */

.foot { position: relative; padding: clamp(80px, 12vh, 140px) var(--gutter) 36px; border-top: 1px solid var(--line); background: radial-gradient(120% 80% at 50% 0%, rgba(111, 180, 255, 0.06), transparent 60%), #020308; }
.foot__cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: clamp(60px, 10vh, 110px); }
.foot__line { margin: 0; font-size: clamp(52px, 7vw, 116px); line-height: 0.98; }
.foot__base { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 48px; align-items: start; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.foot__fine, .foot__copy { margin: 0; }
.foot__fine { max-width: 68em; }
@media (max-width: 760px) { .foot__base { grid-template-columns: 1fr; } }

/* ── App pages ────────────────────────────────────────────────────────── */

.app { max-width: 1240px; margin: 0 auto; padding: clamp(112px, 16vh, 150px) var(--gutter) clamp(80px, 12vh, 140px); }
.app-head { margin-bottom: clamp(28px, 4vw, 44px); }
.app-title { margin: 0 0 clamp(22px, 3vw, 34px); font-size: clamp(38px, 4.6vw, 72px); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.back { display: inline-block; margin-bottom: 28px; font-size: 14px; color: var(--text-2); text-decoration: none; }
.back:hover { color: var(--text); }

.field { display: grid; gap: 6px; min-width: 0; }
.field > span:first-child { font-size: 12px; color: var(--text-3); }
.field input, .field .select select {
  width: 100%; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  padding: 6px 0 8px; font-size: 16.5px; font-weight: 500; color: var(--text);
}
.field .select { display: block; }
.field input:focus, .field select:focus { outline: none; border-color: var(--sky); }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; }
.field--wide { margin: 22px 0; }

.search {
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 22px; align-items: end;
  padding: 20px 22px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line-2);
}
/* Two rows: From ⇄ To and the dates, then passengers under From, cabin
   under To, and the button under the dates. */
.search .field:nth-of-type(5) { grid-column: 1; }
.search .field:nth-of-type(6) { grid-column: 3; }
.search__go { grid-column: 4 / -1; }
.field small { font-size: 11px; color: var(--text-3); }
.swap { width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-2); }
.swap:hover { color: var(--text); border-color: var(--text-3); }
.swap svg { width: 18px; height: 18px; }
/* Below this the search folds to From ⇄ To on top, then the dates, then
   passengers and cabin, two to a row. Labels 3 and 5 sit under From, 4 and
   6 under To. */
@media (max-width: 1180px) {
  .search { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .search .field:nth-of-type(2n + 3) { grid-column: 1; }
  .search .field:nth-of-type(2n + 4) { grid-column: 3; }
  .search__go { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .search { grid-template-columns: 1fr; }
  .search .field:nth-of-type(n) { grid-column: auto; }
  .swap { justify-self: end; margin: -8px 0; transform: rotate(90deg); }
}

.results { margin-top: 36px; }
.results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.results__count { margin: 0; color: var(--text-2); }
.results__count b { color: var(--text); font-weight: 500; }
.results .notice { margin-bottom: 18px; }
/* Results that no longer match the form above them: still readable, but
   plainly not the answer to what is on screen now. */
.results__stale { background: rgba(243, 241, 236, 0.05); border-color: var(--line-2); color: var(--text-2); }
#results.is-stale .offers { opacity: 0.4; }
#results.is-stale .offer { pointer-events: none; }

/* Why there are no flights: loud enough to be read as the answer. */
.results__stop {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 197, 110, 0.1); border: 1px solid rgba(255, 197, 110, 0.3);
  color: var(--sun); font-size: 14.5px;
}
.results__stop small { display: block; margin-top: 6px; color: var(--text-2); font-size: 13px; }

.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offer {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto; align-items: center; gap: 20px 32px;
  padding: 20px 24px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line);
  transition: border-color 0.2s, background 0.2s;
}
.offer:hover { border-color: var(--line-2); background: var(--bg-3); }
.offer--ghost { height: 92px; animation: ghost 1.2s ease-in-out infinite alternate; }
@keyframes ghost { to { opacity: 0.45; } }
.offer__legs { display: grid; gap: 16px; min-width: 0; }
.offer__when { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 16px; row-gap: 4px; }
.offer__dir { grid-column: 1 / -1; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.offer__t { font-size: 21px; font-weight: 500; }
.offer__t sup { font-size: 11px; color: var(--sun); margin-left: 2px; }
.offer__line { position: relative; height: 1px; background: var(--line-2); }
.offer__line i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); transform: translate(-50%, -50%); }
.offer__codes { font-size: 11.5px; color: var(--text-3); }
.offer__dur { font-size: 12.5px; color: var(--text-3); text-align: center; }
.offer__carrier { margin: 0; font-weight: 500; }
.offer__meta { margin: 2px 0 0; font-size: 13px; color: var(--text-3); }
.offer__price { text-align: right; }
.offer__usd { margin: 0; font-size: 20px; font-weight: 500; }
.offer__fx { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.offer__shares { margin: 2px 0 0; font-size: 12.5px; color: var(--sky); }
@media (max-width: 860px) {
  .offer { grid-template-columns: 1fr auto; }
  .offer__legs { grid-column: 1 / -1; }
}

/* Checkout: the ticket is paper; the payment panel is the night. */
.checkout { margin-top: 40px; scroll-margin-top: 100px; }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 1000px) { .checkout__grid { grid-template-columns: 1fr; } }

.ticket { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 0.44fr); background: var(--paper); color: var(--ink); border-radius: 20px; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9); }
.ticket__main { padding: clamp(22px, 2.6vw, 34px); min-width: 0; }
.ticket__top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-2); }
.ticket__brand { font: 700 17px/1 var(--logo); color: var(--ink); }
.ticket__route { display: grid; grid-template-columns: auto minmax(50px, 1fr) auto; align-items: end; gap: 16px; margin: 26px 0 22px; }
.ticket__code { margin: 0; font: 700 clamp(44px, 4.8vw, 72px)/0.9 var(--title); letter-spacing: -0.02em; }
.ticket__city { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.ticket__to { text-align: right; }
.ticket__path { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 34px; font: 500 11.5px var(--sans); color: var(--ink-3); }
.ticket__path svg { width: 100%; height: 38px; overflow: visible; margin-bottom: 6px; }
.ticket__path path { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.ticket__slices { display: grid; gap: 16px; margin: 0 0 20px; }
.ticket__slice-h { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }
.ticket__legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticket__legs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; font-size: 14.5px; font-weight: 500; }
.ticket__legs sup { font-size: 10px; color: var(--ink-3); margin-left: 1px; }
.ticket__leg-meta { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ticket__legs .ticket__change { display: block; margin-left: 4px; padding: 2px 0 2px 12px; border-left: 1.5px dashed rgba(12, 16, 24, 0.22); font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.ticket__fx { margin: 0; font-size: 13px; color: var(--ink-2); }
.ticket__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(12, 16, 24, 0.12); }
.ticket__grid dt { font-size: 11.5px; color: var(--ink-3); }
.ticket__grid dd { margin: 3px 0 0; font-weight: 500; font-size: 14.5px; }
.ticket__stub { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: clamp(22px, 2.6vw, 34px); border-left: 2px dashed rgba(12, 16, 24, 0.16); }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.ticket__stub::before { top: -12px; }
.ticket__stub::after { bottom: -12px; }
.ticket__label { margin: 0; font-size: 12px; color: var(--ink-3); }
.ticket__fare { margin: 0; font: 500 clamp(22px, 1.9vw, 28px)/1 var(--sans); letter-spacing: -0.02em; white-space: nowrap; }
.ticket__note { margin: 6px 0 10px; font-size: 13px; color: var(--ink-2); }
.ticket .demo-tag { color: var(--ink-2); border-color: rgba(12, 16, 24, 0.3); align-self: flex-start; }
@media (max-width: 1000px) { .ticket { position: static; } }
@media (max-width: 640px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket__stub { border-left: 0; border-top: 2px dashed rgba(12, 16, 24, 0.16); }
  .ticket__stub::before { top: -13px; left: -12px; }
  .ticket__stub::after { top: -13px; bottom: auto; left: auto; right: -12px; }
  .ticket__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.payment { padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line-2); }
.payment__title { margin: 0 0 18px; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; }
.holdings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.holding {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "sym cost" "name name" "have have";
  gap: 2px 10px; padding: 12px 14px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line); background: rgba(243, 241, 236, 0.02); transition: border-color 0.2s, background 0.2s;
}
.holding:hover:not(:disabled) { border-color: var(--line-2); }
.holding[aria-checked="true"] { border-color: var(--text); background: rgba(243, 241, 236, 0.07); }
.holding:disabled { opacity: 0.42; cursor: not-allowed; }
.holding__sym { grid-area: sym; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; }
.holding__cost { grid-area: cost; justify-self: end; font-size: 12px; color: var(--sky); }
.holding__name { grid-area: name; font-size: 13px; color: var(--text-2); }
.holding__have { grid-area: have; font-size: 12px; color: var(--text-3); }
.holding:disabled .holding__cost { color: var(--text-3); }

/* Who is travelling: exactly what the airline needs to issue a ticket, and
   nothing more. One card per seat on the booking. */
.pax { display: grid; gap: 12px; margin: 20px 0; }
.pax__card { margin: 0; padding: 14px 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(243, 241, 236, 0.02); }
.pax__card legend { padding: 0 6px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.pax__card legend small { font-weight: 400; color: var(--text-3); }
.pax__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.pax__grid .field--w2 { grid-column: span 2; }
.pax__grid .field--w3 { grid-column: span 3; }
.pax__grid .field--w6 { grid-column: 1 / -1; }
.pax__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--text-3); }
.pax .field input:invalid:not(:placeholder-shown) { border-color: var(--sun); }
@media (max-width: 700px) {
  .pax__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pax__grid .field--w2, .pax__grid .field--w3 { grid-column: span 1; }
  .pax__grid .field--w6 { grid-column: 1 / -1; }
}

.quote { padding: 18px 0; border-block: 1px solid var(--line); }
.quote__label { margin: 0; font-size: 13px; color: var(--text-3); }
.quote__big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; font-size: clamp(38px, 3.6vw, 54px); line-height: 1; }
.quote__big .mono { font-weight: 500; letter-spacing: -0.03em; }
.quote__tk { font: 500 16px var(--sans); letter-spacing: 0.04em; color: var(--text-2); }
.quote__lines { display: grid; gap: 8px; margin: 0; font-size: 14px; }
.quote__lines div { display: flex; justify-content: space-between; gap: 12px; }
.quote__lines dt { color: var(--text-2); }
.quote__lines dd { margin: 0; font-size: 13px; white-space: nowrap; }
.quote__foot { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); }
.quote__lock { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--text-2); }
.quote__lock svg { width: 15px; height: 15px; }
.how-pay { margin: 16px 0 20px; font-size: 14px; color: var(--text-2); }
.how-pay summary { cursor: pointer; color: var(--text); }
.how-pay ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.payment__error { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 197, 110, 0.1); color: var(--sun); font-size: 14px; }
.payment .notice { margin-top: 14px; }

.paying { max-width: 640px; margin: 40px auto 0; scroll-margin-top: 100px; }
.paying__title { margin: 0 0 26px; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text-3); transition: color 0.3s; }
.steps li i { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.steps li.is-active { color: var(--text); }
.steps li.is-active i { border-color: rgba(243, 241, 236, 0.2); border-top-color: var(--text); animation: spin 0.8s linear infinite; }
.steps li.is-done { color: var(--text-2); }
.steps li.is-done i { background: var(--text); border-color: var(--text); }
/* A stage can say a little more about itself: what a wallet is being asked to
   approve, or which chain a payment is being proved on. */
.steps li { flex-wrap: wrap; }
.steps li small { flex: 1 0 100%; margin-left: 34px; font-size: 12.5px; color: var(--text-3); }
.steps li small:empty { display: none; }
.steps li.is-done i::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.done { margin-top: 20px; scroll-margin-top: 100px; }
.done__card { max-width: 760px; padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line-2); }
.done__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin: 0 0 18px; }
.done__grid dt { font-size: 12px; color: var(--text-3); }
.done__grid dd { margin: 4px 0 0; font-weight: 500; }
.done__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 640px) { .done__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Trips ────────────────────────────────────────────────────────────── */

.app-head .notice { margin-top: -6px; }
.trips__h { margin: 36px 0 14px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.trips__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.trip-card { display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.25s; }
.trip-card:hover { border-color: var(--line-2); }
.trip-card[data-phase="airborne"] { border-color: rgba(111, 180, 255, 0.3); background: linear-gradient(180deg, rgba(111, 180, 255, 0.07), transparent 70%), var(--bg-2); }
.trip-card[data-phase="boarding"], .trip-card[data-phase="departing"] { border-color: rgba(255, 197, 110, 0.3); background: linear-gradient(180deg, rgba(255, 197, 110, 0.06), transparent 70%), var(--bg-2); }
.trip-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.trip-card__route { margin: 0; font-size: 26px; line-height: 1.08; }
.trip-card__flight { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }
.trip-card__when { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }
.trip-card__now { margin: 16px 0 0; font-weight: 500; }
.trip-card__bar { position: relative; height: 3px; margin-top: 10px; border-radius: 3px; background: rgba(243, 241, 236, 0.14); overflow: hidden; }
.trip-card__bar i { position: absolute; inset: 0; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.trip-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; }
.trip-card__paid { margin: 0; font-size: 13.5px; color: var(--text-2); }
.trip-card__paid b { color: var(--text); font-weight: 500; }
.trips__reset { margin-top: 40px; }

/* ── One trip ─────────────────────────────────────────────────────────── */

.trip-head { margin-bottom: clamp(26px, 3.4vw, 40px); }
.trip-head__no { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--text-2); }
.trip-head__route { margin: 12px 0 10px; font-size: clamp(40px, 5.2vw, 84px); line-height: 1; }
.trip-head__line { margin: 0; font-size: 13px; color: var(--text-3); }
.trip-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 16px; }
@media (max-width: 960px) { .trip-body { grid-template-columns: minmax(0, 1fr); } }

.live { height: 100%; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line-2); }
.live--alert { border-color: rgba(255, 197, 110, 0.45); background: radial-gradient(120% 90% at 0% 0%, rgba(255, 197, 110, 0.13), transparent 60%), var(--bg-2); }
.live--live { border-color: rgba(111, 180, 255, 0.4); background: radial-gradient(120% 90% at 0% 0%, rgba(111, 180, 255, 0.12), transparent 60%), var(--bg-2); }
.live__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 22px; }
.live__label { margin: 0 0 6px; font-size: 13px; color: var(--text-3); }
.live__big { margin: 0; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; }
.live--alert .live__big { color: var(--sun); }
.live__sub { margin: 10px 0 22px; color: var(--text-2); }
.live__sub b { color: var(--text); font-weight: 500; }
.live__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.live__facts dt { font-size: 12px; color: var(--text-3); }
.live__facts dd { margin: 4px 0 0; font-weight: 500; }
.countdown { display: flex; gap: clamp(14px, 2vw, 26px); }
.countdown span { display: grid; }
.countdown b { font-size: clamp(40px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.countdown small { margin-top: 6px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }

.trip-map { padding: clamp(18px, 2.2vw, 28px); border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.trip-map__note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }

/* Every flight on the booking, with the one being followed picked out. */
.trip-legs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.trip-legs li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: var(--text-2); }
.trip-legs li.is-tracked { background: rgba(243, 241, 236, 0.05); color: var(--text); }
.trip-legs__when { font-size: 12.5px; color: var(--text-3); }
.trip-legs__no { font-size: 13px; color: var(--text-3); }
@media (max-width: 640px) { .trip-legs li { grid-template-columns: 1fr auto; } .trip-legs__when { grid-column: 1 / -1; } }

.trip-facts, .trip-sources { margin-top: 16px; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; border: 1px solid var(--line); }
.trip-sources { background: transparent; border-style: dashed; }
.trip-facts__h { margin: 0 0 18px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; margin: 0; }
.facts dt { font-size: 12px; color: var(--text-3); }
.facts dd { margin: 4px 0 0; font-weight: 500; }
.facts--quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--quiet dd { font-weight: 500; font-size: 14.5px; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts--quiet { grid-template-columns: 1fr; } .live__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── How it works page ───────────────────────────────────────────────── */

.how-page .itinerary { margin-top: clamp(40px, 6vw, 72px); }

/* ── Docs ─────────────────────────────────────────────────────────────── */

.docs__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 12px; }
.docs__nav { position: sticky; top: 100px; display: grid; gap: 2px; font-size: 14.5px; }
.docs__nav a { padding: 7px 12px; border-left: 1px solid var(--line); color: var(--text-2); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.docs__nav a:hover { color: var(--text); border-color: var(--text-2); }
.docs__body { max-width: 46rem; }
.docs__body section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.docs__body section:last-child { border-bottom: 0; }
.docs__body h2 { margin: 0 0 16px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; }
.docs__body p { margin: 0 0 14px; color: var(--text-2); }
.docs__body b { color: var(--text); }
.docs__flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; padding: 0; list-style: none; counter-reset: flow; }
.docs__flow li { counter-increment: flow; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; }
.docs__flow li::before { content: counter(flow); font-size: 12px; color: var(--text-3); }
.docs__table table { width: 100%; max-width: 420px; margin: 6px 0 22px; border-collapse: collapse; font-size: 15px; }
.docs__table caption { caption-side: top; padding-bottom: 8px; text-align: left; font-size: 13px; color: var(--text-3); }
.docs__table th, .docs__table td { padding: 10px 0; border-top: 1px solid var(--line); }
.docs__table th { text-align: left; font-weight: 400; color: var(--text-2); }
.docs__table td { text-align: right; }
.docs__table .is-total th, .docs__table .is-total td { color: var(--text); font-weight: 500; }
.docs__list { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 20px; color: var(--text-2); }
.docs__states { margin: 18px 0 10px; }
.docs__states div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.docs__states dt { font-weight: 500; }
.docs__states dd { margin: 0; color: var(--text-2); }
@media (max-width: 860px) {
  .docs__layout { grid-template-columns: 1fr; }
  .docs__nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs__states div { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Support ──────────────────────────────────────────────────────────── */

.support__form, .support__sent { max-width: 640px; padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line-2); }
.support__form { display: grid; gap: 22px; }
.support__form .pill { justify-self: start; }
.field textarea {
  width: 100%; min-height: 150px; resize: vertical; padding: 12px 14px; border-radius: 12px;
  background: transparent; border: 1px solid var(--line-2); font: 400 16px/1.5 var(--sans); color: var(--text);
}
.field textarea:focus { outline: none; border-color: var(--sky); }
.support__error { margin: -8px 0 0; font-size: 14px; color: var(--sun); }
.support__sent h2 { margin: 0 0 10px; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; }
.support__sent .lede { margin-bottom: 24px; }

/* ── Navbar contract address ─────────────────────────────────────────── */

.ca {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
button.ca:hover { color: var(--text); border-color: var(--text-3); }
button.ca.is-copied { color: var(--sky); border-color: rgba(111, 180, 255, 0.5); }
.ca .mono { color: var(--text); }
@media (max-width: 420px) {
  .ca { display: none; }
  .nav { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .nav__end { gap: 8px; }
  .nav__wallet { display: none; }
}

/* ── Destination globe (Book) ─────────────────────────────────────────── */

.globe {
  position: relative; height: clamp(380px, 58vh, 640px); margin: 0 0 20px; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line-2);
  background: radial-gradient(55% 60% at 50% 50%, #0b1a33 0%, #03050a 70%);
}
/* MapLibre’s stylesheet loads after this one and sets .maplibregl-map to
   position: relative, so this needs the extra specificity to keep the map
   filling the frame. */
.globe .globe__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(3, 5, 10, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); font-size: 13.5px; color: var(--text-2); white-space: nowrap; pointer-events: none;
  transition: opacity 0.5s;
}
.globe__hint.is-done { opacity: 0; }
.globe.is-off { height: auto; }
.globe.is-off .globe__map { display: none; }
.globe.is-off .globe__hint { position: static; translate: none; display: inline-block; margin: 16px; white-space: normal; }
/* Map credits (required by OpenFreeMap / OpenStreetMap), kept small and dark.
   MapLibre’s own CSS is more specific, hence the doubled classes. */
.globe .maplibregl-ctrl.maplibregl-ctrl-attrib { background-color: rgba(3, 5, 10, 0.72); color: var(--text-3); font-size: 11px; border-radius: 10px; }
.globe .maplibregl-ctrl.maplibregl-ctrl-attrib a { color: var(--text-2); }
.globe .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; }
.globe .maplibregl-ctrl-attrib-button { filter: invert(1); background-color: transparent; }
.globe-pop .maplibregl-popup-content {
  padding: 14px 16px; border-radius: 14px; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9); font-family: var(--sans);
}
.globe-pop .maplibregl-popup-tip { display: none; }
.globe-pop__city { margin: 0; font: 700 19px/1.15 var(--title); letter-spacing: -0.02em; }
.globe-pop__meta { margin: 3px 0 12px; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 640px) { .globe { height: 56vh; } .globe__hint { white-space: normal; width: max-content; max-width: 86%; text-align: center; } }

/* ── Motion ───────────────────────────────────────────────────────────── */

/* Scroll reveal (src/ui/motion.js): rise and fade in once, staggered by
   sibling order. Uses the individual `translate` and `scale` properties so
   the entrance and the hover never fight over `transform`. */
[data-reveal] { opacity: 0; translate: 0 28px; }
[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* One transition list for everything that reveals or scales, so neither
   rule overrides the other's timing. */
[data-reveal], .pill, .store, .seg button, .swap, .holding, .offer, .trip-card, .companion__card, .board__row, .itinerary li {
  transition:
    opacity 0.9s var(--ease) calc(var(--i, 0) * 80ms),
    translate 0.9s var(--ease) calc(var(--i, 0) * 80ms),
    scale 0.35s var(--ease),
    background-color 0.2s, border-color 0.25s, color 0.2s, box-shadow 0.3s;
}

/* Hover: interactive things scale up a touch. */
@media (hover: hover) {
  .pill:hover, .store:hover { scale: 1.045; }
  .seg button:hover { scale: 1.06; }
  .swap:hover { scale: 1.08; }
  .holding:not(:disabled):hover, .offer:hover, .trip-card:hover, .companion__card:hover { scale: 1.02; }
  .itinerary li:hover { scale: 1.03; }
  .board__row:hover { scale: 1.012; }
  .pill:disabled:hover { scale: 1; }
}
.pill:active, .store:active, .seg button:active { scale: 0.97; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; translate: none; }
  .pill, .store, .seg button, .swap, .holding, .offer, .trip-card, .companion__card, .board__row, .itinerary li { scale: none !important; }
}