/* Relaxed Flyer — the logo's blues, white, and one warm sun.
   The landing view is three things: the title, the orb, the search bar. Anything
   that is not one of those stays hidden until there is a result to attach it to. */

:root {
  /* Sampled from the RelaxedFlyer mark, not guessed at. The wordmark navy came
     back #082858, the wave and "Flyer" blue #48A8E8, the sun #F8E0B8.

     The button blue is NOT the logo's blue, and that is deliberate. #48A8E8
     measures 2.6:1 against white — white text on it is unreadable and it fails
     WCAG AA by a wide margin. Every candidate was measured; #0E6DB8 is the
     first one down the scale that clears 4.5:1 (it lands at 5.4) while still
     reading as the same blue. The logo's brighter blue is kept as --brand-bright
     for gradients and accents, where nothing has to be read on top of it. */
  --brand:      #0E6DB8;   /* actions, links — 5.4:1 on white */
  --brand-dk:   #0A5296;   /* hover */
  --brand-bright:#3AA6E8;  /* the logo's own sky blue — decoration only */
  --brand-lt:   #EAF4FD;   /* pale ground, from the cloud */
  --brand-line: #C3E0F7;   /* borders on that ground */
  --navy:       #0B2E5C;   /* the wordmark navy */

  /* The sun, kept. An all-blue site for people who are frightened would be
     clinically cold, and the logo itself refuses to be — there is a warm sun
     behind those clouds for a reason. It carries the price chip and the
     intro-rate note, which are the two places warmth actually helps. */
  --sun:        #FBEBCD;
  --sun-line:   #F2D49A;
  --sun-dk:     #9A6A16;   /* text on --sun, 5.1:1 */

  --ink:        #18202B;
  --ink-2:      #566275;
  --ink-3:      #86909F;
  --line:       #E6EAF0;
  --line-2:     #F2F5F9;
  --white:      #ffffff;

  /* The ride bands stay green-to-red. They mean "calm" through "rough" and are
     read as a traffic light; recolouring them to match a brand would be putting
     decoration ahead of the one thing this site exists to tell people. */
  --calm:       #1f9d6b;
  --smooth:     #4aa98a;
  --light:      #c08a1e;
  --moderate:   #cc7a2e;
  --rough:      #b5646f;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(11,46,92,.05), 0 12px 32px -14px rgba(11,46,92,.20);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  min-height: 100dvh;
}

.stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.15rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Before a search the three elements sit centred in the viewport. After one,
     the results push them up naturally and this stops applying. */
  min-height: 100dvh;
  justify-content: flex-start;
}
body.blank .stage { justify-content: center; padding-bottom: 12vh; }

/* ── title ──────────────────────────────────────────────────────────────── */
.hero { text-align: center; margin: 0 0 1.6rem; }
body.blank .hero { margin-top: 0; }
.hero h1 {
  margin: 0;
  font: 750 clamp(2rem, 6.2vw, 2.9rem)/1.1 var(--sans);
  letter-spacing: -.028em;
  color: var(--ink);
}
.hero h1::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  margin: .7rem auto 0;
  border-radius: 2px;
  background: var(--brand);
}
.hero p {
  margin: .85rem 0 0;
  color: var(--ink-2);
  font-size: clamp(.96rem, 2.4vw, 1.06rem);
}

/* ── the orb ────────────────────────────────────────────────────────────── */
.orb {
  border: 0; background: none; padding: 0; cursor: pointer;
  display: block; margin: -.6rem 0 1.2rem; position: relative;
  border-radius: 50%;
  transition: transform .18s ease;
}
.orb-art {
  display: block;
  width: clamp(200px, 46vw, 276px);
  height: auto;
  overflow: visible;
}
/* Nothing spins. A rotating ring is restless, and restless is the wrong feeling
   on a page read by people who are frightened of flying. Two things move: the
   microphone button breathes, slowly, the way a person at rest does; and one
   aircraft flies a sixteen-second lap, which reads like a clock hand rather
   than a loading spinner. The dial itself is dead still. */
.orb-btn { transform-origin: 200px 200px; animation: breathe 5.4s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* Listening: the same breath, quicker. */
.orb.live .orb-btn { animation-duration: 1.7s; }

/* The hint is a pill rather than a line of grey text, because it is the one
   instruction on the page that has to survive being glanced at. White on white
   needs the shadow to exist at all — the border is there for anyone whose
   browser or OS has dropped the shadow. */
.orb-hint {
  display: inline-block; margin-top: .1rem;
  padding: .42rem 1.05rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11,46,92,.05), 0 6px 18px -8px rgba(11,46,92,.28);
  font-size: .84rem; color: var(--ink-2); letter-spacing: .01em;
}
.orb-hint::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: 50%;
  background: #F2670C; margin: -1px .5rem 0 0;
}
.orb.live .orb-hint { color: var(--brand); font-weight: 600; }
.orb[hidden] { display: none; }

/* ── what you get, on the card ──────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0; }
.tag {
  display: inline-block; border-radius: 999px; padding: .2rem .55rem;
  font: 600 .72rem/1.35 var(--sans); letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
/* Nonstop is the reassuring one, so it gets the calm green the good ride
   scores use rather than the brand blue, which is reserved for actions. */
.tag-stop  { background: #eaf7f1; border-color: #c6e8d8; color: #14795180; color: #147951; }
.tag-first { background: #f3f0ff; border-color: #ddd6fb; color: #5b46b8; }
.tag-one   { background: var(--line-2); border-color: var(--line); color: var(--ink-2); }
.tag-room  { background: #fff6e8; border-color: #ffe0b8; color: #96590a; }
.tag-maybe { background: #fff; border-color: var(--line); color: var(--ink-3); font-weight: 500; cursor: help; }

.row .who small .rf { color: #5b46b8; font-weight: 700; }
.row .who small .ro { color: var(--ink-3); font-weight: 600; }

/* ── cabin panel ────────────────────────────────────────────────────────── */
.cfacts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 .9rem; }
.cfact {
  border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; background: #fff;
}
.cfact span { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cfact b { display: block; font-size: 1.02rem; margin: .12rem 0 .1rem; }
.cfact small { display: block; color: var(--ink-3); font-size: .76rem; line-height: 1.35; }
.cfeel { margin: 0 0 1rem; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }

.clist { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; margin: 0 0 1rem; }
.clist-lbl { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.clist ul { list-style: none; margin: .4rem 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.clist li { border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem; font-size: .8rem; color: var(--ink-2); }
.clist li.isfirst { background: #f3f0ff; border-color: #ddd6fb; color: #5b46b8; font-weight: 600; }
.clist small { display: block; color: var(--ink-3); font-size: .76rem; line-height: 1.45; }
.cnone { font-size: .84rem; color: var(--ink-3); margin: 0 0 .6rem; }
.cnote { font-size: .76rem; color: var(--ink-3); margin: .1rem 0 .5rem; line-height: 1.4; }
.seatgrid figcaption b { font-weight: 600; color: var(--ink-2); }
.seatgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 .4rem; }
/* One photo in a two-column grid leaves a hole beside it. */
.seatgrid.one { grid-template-columns: 1fr; }
.seatgrid.one img { height: 210px; }
.seatgrid figure { margin: 0; }
.seatgrid img { width: 100%; height: 132px; object-fit: cover; border-radius: 10px; display: block; background: var(--brand-lt); }
.seatgrid figcaption { font-size: .7rem; color: var(--ink-3); margin-top: .22rem; line-height: 1.3; }
@media (max-width: 480px) { .cfacts { grid-template-columns: 1fr; } }

/* ── what to say, and how to say it ─────────────────────────────────────── */
.asklead {
  margin: .9rem 0 .55rem; text-align: center;
  font-size: .92rem; color: var(--ink-2);
}

/* Examples as buttons, not italics in a caption. Tapping one runs it, so the
   first search costs nothing and the shape of a good question is learned by
   watching it work. */
.egs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem; margin: 0 0 .8rem;
}
/* Full width so the chips wrap as a clean block underneath it, rather than the
   label sitting in the first row and orphaning whichever chip wraps. */
.egs-lbl {
  flex-basis: 100%; text-align: center; margin-bottom: .05rem;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.eg {
  border: 1px solid var(--brand-line); background: var(--brand-lt); color: var(--brand-dk);
  border-radius: 999px; padding: .38rem .8rem; cursor: pointer;
  font: 500 .84rem var(--sans); line-height: 1.2;
  transition: background .14s, color .14s, border-color .14s;
}
.eg::before { content: '\201C'; }
.eg::after  { content: '\201D'; }
.eg:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.eg:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .asklead { font-size: .86rem; margin: .8rem .4rem .5rem; }
  .eg { font-size: .78rem; padding: .34rem .7rem; }
}

/* ── the search bar ─────────────────────────────────────────────────────── */
.ask { width: 100%; }
.field {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .4rem .4rem .4rem 1.5rem;
  box-shadow: var(--shadow);
  transition: border-color .16s, box-shadow .16s;
}
.field:focus-within {
  border-color: var(--brand);
  box-shadow: var(--shadow), 0 0 0 4px rgba(14,109,184,.12);
}
#q {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--ink); font: 400 clamp(1rem, 2.6vw, 1.12rem)/1.4 var(--sans);
  padding: .95rem 0;
}
#q::placeholder { color: var(--ink-3); }

.go {
  flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, transform .1s;
}
.go svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.go:hover { background: var(--brand-dk); }
.go:active { transform: scale(.95); }
.go[disabled] { opacity: .45; cursor: default; }

/* ── chips (hidden until there is something to filter) ──────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; align-items: center; justify-content: center; width: 100%; }
.chips[hidden] { display: none; }
.chip {
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  border-radius: 999px; padding: .38rem .82rem; font: 500 .85rem/1.35 var(--sans);
  cursor: pointer; transition: background .13s, color .13s, border-color .13s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.chip:hover { border-color: var(--brand-line); color: var(--ink); }
.chip.on { background: var(--brand-lt); border-color: var(--brand-line); color: var(--brand-dk); }
.chip.on::before { content: "✓"; font-size: .82em; }
.chip-sep { width: 1px; height: 17px; background: var(--line); margin: 0 .2rem; }

/* ── output ─────────────────────────────────────────────────────────────── */
.out { width: 100%; margin: 1.6rem 0 0; }
.out:empty { margin: 0; }

.thinking { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--ink-2); font-size: .94rem; padding: 1.4rem 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: blink 1s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay: .16s; } .dot:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 0%,100% { opacity: .22; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

.heard { margin: 0 0 1rem; color: var(--ink-2); font-size: .9rem; text-align: center; }
.heard b { color: var(--ink); font-weight: 600; }
.heard .fix { background: none; border: 0; color: var(--brand-dk); cursor: pointer; font: inherit; padding: 0 0 0 .4rem; text-decoration: underline; text-underline-offset: 2px; }

.verdict {
  font-size: 1.06rem; line-height: 1.62; margin: 0 0 1.3rem;
  padding: 1rem 1.15rem;
  background: var(--brand-lt);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  color: var(--ink);
}
.verdict .who { display: block; margin-top: .5rem; color: #a4763f; font-size: .77rem; }

.notice {
  background: var(--line-2); border: 1px solid var(--line);
  border-radius: 12px; padding: .75rem .95rem; margin: 0 0 1.1rem;
  color: var(--ink-2); font-size: .88rem;
}

/* day strip */
.daywrap { margin: 0 0 1.3rem; }
.dayhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.dayhead-t { font-size: .82rem; font-weight: 600; color: var(--ink-2); }

/* The key that makes the numbers mean something. Both ends named, the gradient
   running through the same four band colours the scores use. */
.scale { display: inline-flex; align-items: center; gap: .4rem; }
.scale i { font-style: normal; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.scalebar {
  display: block; width: 96px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--moderate) 0%, var(--light) 34%, var(--smooth) 68%, var(--calm) 100%);
}

.days { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; }
.day {
  flex: 0 0 auto; min-width: 86px; text-align: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--white); border-radius: 12px;
  padding: .55rem .5rem; color: var(--ink-2); transition: border-color .14s, background .14s;
}
.day:hover { border-color: var(--brand-line); }
.day.pick { background: var(--brand-lt); border-color: var(--brand-line); color: var(--ink); }
.day .d { display: block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.day .n { display: block; font: 700 1.1rem/1.3 var(--sans); margin-top: .1rem; color: var(--ink); }
/* The word under the number is what stops you having to scroll to a flight
   card to learn what 98 was measuring. */
.day .w { display: block; font-size: .66rem; line-height: 1.25; color: var(--ink-3); margin-top: .05rem; }
.day .b { display: block; height: 3px; border-radius: 2px; margin-top: .4rem; background: var(--line); }

/* Same palette as the flight scores, so the strip and the cards read as one
   scale rather than two unrelated sets of numbers. */
.day.b-calm     .n { color: var(--calm); }     .day.b-calm     .b { background: var(--calm); }
.day.b-smooth   .n { color: var(--smooth); }   .day.b-smooth   .b { background: var(--smooth); }
.day.b-light    .n { color: var(--light); }    .day.b-light    .b { background: var(--light); }
.day.b-moderate .n { color: var(--moderate); } .day.b-moderate .b { background: var(--moderate); }
.day.b-rough    .n { color: var(--moderate); } .day.b-rough    .b { background: var(--moderate); }

.dayfoot { margin: .5rem 0 0; font-size: .76rem; color: var(--ink-3); }

@media (max-width: 560px) {
  .dayhead { gap: .35rem; }
  .scalebar { width: 70px; }
}

/* cards */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 1rem 1.1rem; margin: 0 0 .75rem; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 60px 1fr; gap: 0 1rem; align-items: start;
}
.card.first { border-color: var(--brand-line); box-shadow: var(--shadow), 0 0 0 3px rgba(14,109,184,.07); }

.score { text-align: center; }
.score .n { display: block; font: 750 1.55rem/1.1 var(--sans); letter-spacing: -.025em; }
.score .l { display: block; font-size: .67rem; line-height: 1.25; margin-top: .22rem; color: var(--ink-3); }
.score .ring { display: block; height: 3px; border-radius: 2px; margin-top: .5rem; }
.b-calm .n { color: var(--calm); } .b-calm .ring { background: var(--calm); }
.b-smooth .n { color: var(--smooth); } .b-smooth .ring { background: var(--smooth); }
.b-light .n { color: var(--light); } .b-light .ring { background: var(--light); }
.b-moderate .n { color: var(--moderate); } .b-moderate .ring { background: var(--moderate); }
.b-rough .n { color: var(--rough); } .b-rough .ring { background: var(--rough); }
.b-none .n { color: var(--ink-3); font-size: 1.1rem; } .b-none .ring { background: var(--line); }

.body h3 { margin: 0; font: 650 1.02rem/1.35 var(--sans); letter-spacing: -.012em; }
.body h3 span { color: var(--ink-3); font-weight: 400; }
.route { margin: .3rem 0 0; color: var(--ink-2); font-size: .93rem; }
.route .t { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.route .arrow { color: var(--ink-3); padding: 0 .28rem; }
.meta { margin: .38rem 0 0; color: var(--ink-3); font-size: .85rem; }
.meta .frame { color: var(--ink-2); }
.why { margin: .58rem 0 0; color: var(--ink); font-size: .93rem; line-height: 1.5; }
.acts { display: flex; gap: .45rem; margin: .78rem 0 0; flex-wrap: wrap; }
.acts button {
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  border-radius: 9px; padding: .4rem .78rem; font: 500 .845rem var(--sans);
  cursor: pointer; transition: color .13s, border-color .13s, background .13s;
}
.acts button:hover { color: var(--brand-dk); border-color: var(--brand-line); background: var(--brand-lt); }

.more {
  width: 100%; margin: .4rem 0 0; padding: .82rem; cursor: pointer;
  background: var(--white); border: 1px dashed var(--line); border-radius: 12px;
  color: var(--ink-2); font: 500 .9rem var(--sans); transition: color .14s, border-color .14s;
}
.more:hover { color: var(--brand-dk); border-color: var(--brand-line); }

.rows { margin: .85rem 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center;
  padding: .62rem .85rem; border-top: 1px solid var(--line); font-size: .9rem;
}
.row:first-child { border-top: 0; }
.row .s { font: 700 1rem/1 var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.row .who { color: var(--ink); }
.row .who small { color: var(--ink-3); display: block; font-size: .78rem; margin-top: .1rem; }
.row .when { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.empty { border: 1px solid var(--line); background: var(--line-2); border-radius: 16px; padding: 1.4rem 1.25rem; }
.empty h3 { margin: 0 0 .5rem; font: 650 1.05rem var(--sans); }
.empty p { margin: 0; color: var(--ink-2); font-size: .93rem; }

/* ── panel ──────────────────────────────────────────────────────────────── */
.panel {
  width: min(540px, calc(100vw - 2rem)); border: 1px solid var(--line);
  background: var(--white); color: var(--ink); border-radius: 18px;
  padding: 1.35rem 1.4rem; box-shadow: 0 30px 70px -25px rgba(20,22,26,.35);
}
.panel::backdrop { background: rgba(27,29,33,.42); backdrop-filter: blur(2px); }
.panel h3 { margin: 0 0 .2rem; font-size: 1.06rem; }
.panel .sub { margin: 0 0 1rem; color: var(--ink-3); font-size: .87rem; }
.panel-x { position: absolute; top: .55rem; right: .8rem; background: none; border: 0; color: var(--ink-3); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.panel-x:hover { color: var(--ink); }
/* The flight you picked, kept on screen while you choose a link — because
   every link lands on a list and you need to know which line is yours.
   Deliberately quiet: it is a label, not the button. The button below it is
   the loud thing, and two loud blue blocks in a row would flatten both. */
.ticket { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; padding: .7rem .9rem; margin: 0 0 1.1rem; background: #fff; }
.ticket-lbl { display: block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-dk); font-weight: 700; }
.ticket b { display: block; font-size: 1.12rem; margin: .12rem 0 .1rem; }
.ticket-sub { display: block; color: var(--ink-2); font-size: .84rem; }

.blink { display: block; border: 1px solid var(--line); border-radius: 12px; padding: .78rem .9rem; margin: 0 0 .55rem; text-decoration: none; color: var(--ink); }
.blink:hover { border-color: var(--brand-line); background: var(--brand-lt); }
.blink b { display: block; font-size: .95rem; }
.blink small { display: block; color: var(--ink-3); margin-top: .18rem; font-size: .82rem; }
/* `.primary` is also the pill-button class, and it is declared further down the
   file with `color:#fff; border:0; border-radius:999px`. On a link that is a
   card rather than a pill, those three win on source order and produce white
   text on a pale background — the most important control on the panel, and it
   read as disabled. Every hijacked property is restated here. */
.blink.primary {
  background: var(--brand); border: 1px solid var(--brand-dk); border-radius: 12px;
  color: #fff; padding: .78rem .9rem; font: inherit;
}
.blink.primary b { font-weight: 700; }
.blink.primary small { color: rgba(255,255,255,.9); }
.blink.primary:hover { background: var(--brand-dk); }
.panel .rule { margin: 1rem 0 0; color: var(--ink-2); font-size: .84rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.panel .rule a { color: var(--brand-dk); }
.seatgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.seatgrid figure { margin: 0; }
.seatgrid img { width: 100%; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.seatgrid figcaption { color: var(--ink-3); font-size: .74rem; margin-top: .25rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { width: 100%; margin: 3rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); }
.foot[hidden] { display: none; }
.foot p { color: var(--ink-3); font-size: .84rem; line-height: 1.6; margin: 0 0 .8rem; }
.foot b { color: var(--ink-2); font-weight: 600; }
.tiny { font-size: .76rem !important; }

@media (max-width: 560px) {
  .stage { padding-bottom: 3rem; }
  .field { padding-left: 1.15rem; }
  .go { width: 44px; height: 44px; }
  .card { grid-template-columns: 50px 1fr; gap: 0 .8rem; padding: .9rem; }
  .row { grid-template-columns: 38px 1fr; }
  .row .when { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ═══ FEARLESS FLYER TOOLS ═══════════════════════════════════════════════
   Same blue-and-white system as the search page, laid out for reading
   rather than for one answer. */

/* The bar across the top of every page that is not the search app: the
   wordmark on the left going home, one way back on the right. It used to be
   called .topbar, which collided with the search page's own .topbar further
   down this file — the later rule won, and the tools page's bar was silently
   thrown into the top-right corner on top of its own heading. Its own name
   now, so the two cannot fight again. */
.pagebar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 900px; margin: 0 auto; padding: 1.05rem 1.15rem .2rem;
}
.pagebar .brand { display: flex; align-items: center; text-decoration: none; }
.pagebar .brand img { display: block; height: 34px; width: auto; }
.back { color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 500; }
.back:hover { color: var(--brand-dk); }
@media (max-width: 560px) {
  .pagebar { padding: .85rem .95rem .1rem; }
  .pagebar .brand img { height: 26px; }
  .back { font-size: .85rem; }
}

body.tools .stage { min-height: 0; justify-content: flex-start; }
.stage-wide { max-width: 900px; }
.hero-tools { margin: 1.6rem 0 2.6rem; }
.hero-tools p { max-width: 34rem; margin-left: auto; margin-right: auto; }

.tool { width: 100%; margin: 0 0 3.4rem; }
.tool h2 {
  font: 700 clamp(1.3rem, 3.6vw, 1.65rem)/1.25 var(--sans);
  letter-spacing: -.02em; margin: 0 0 .7rem;
  display: flex; align-items: baseline; gap: .7rem;
}
.tool h2 .num {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--brand); background: var(--brand-lt);
  border: 1px solid var(--brand-line); border-radius: 999px;
  padding: .18rem .5rem; flex: 0 0 auto;
}
.lede { color: var(--ink-2); font-size: 1rem; line-height: 1.65; margin: 0 0 1.2rem; max-width: 46rem; }
.fineprint { color: var(--ink-3); font-size: .84rem; line-height: 1.6; margin: 1rem 0 0; max-width: 46rem; }
.fineprint em { color: var(--ink-2); font-style: normal; font-weight: 600; }

.primary {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand); color: #fff;
  font: 600 .95rem var(--sans); padding: .72rem 1.4rem;
  transition: background .15s, transform .1s;
}
.primary:hover { background: var(--brand-dk); }
.primary:active { transform: translateY(1px); }
.primary.active { background: var(--ink); }
.primary:disabled { opacity: .45; cursor: default; }
a.as-link { display: inline-block; text-decoration: none; }

/* breathing */
.breath-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: center; }
.breath-outer {
  width: 240px; height: 240px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-lt); border: 1px solid var(--brand-line);
}
.breath-ball {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #ffd2ab 60%, var(--brand));
  display: grid; place-items: center;
  color: #7a3c07; font: 700 .74rem/1 var(--sans); letter-spacing: .1em;
  box-shadow: 0 6px 20px -8px rgba(14,109,184,.6);
  transition: transform .3s ease;
}
/* One 16-second cycle: grow 4, hold 4, shrink 4, hold 4 — the same shape the
   caption and the step list are following, so all three agree. */
.breath-ball.running { animation: box 16s ease-in-out infinite; }
@keyframes box {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.95); }
  50%  { transform: scale(1.95); }
  75%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.bsteps { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.bstep {
  padding: .5rem .8rem; border-left: 2px solid var(--line);
  color: var(--ink-3); transition: border-color .2s, color .2s, background .2s;
}
.bstep b { display: block; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.bstep span { font-size: .84rem; }
.bstep.on { border-left-color: var(--brand); background: var(--brand-lt); color: var(--ink-2); }
.bstep.on b { color: var(--brand-dk); }
.rounds { color: var(--ink-3); font-size: .86rem; margin: .7rem 0 0; }

/* player */
.player { border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem; background: var(--white); box-shadow: var(--shadow); }
.player[hidden] { display: none; }
.player-main { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.player-read { flex: 1; min-width: 200px; }
.player-read b { display: block; font-size: .98rem; }
.player-read span { color: var(--ink-3); font-size: .86rem; }
.player-time { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.player-track { position: relative; height: 8px; border-radius: 4px; background: var(--line-2); margin: 1rem 0 .8rem; overflow: hidden; }
.player-fill { height: 100%; width: 0; background: var(--brand); border-radius: 4px; transition: width .2s linear; }
.player-ticks { position: absolute; inset: 0; }
.player-ticks i { position: absolute; top: 0; width: 1px; height: 100%; background: rgba(27,29,33,.16); }
.vol { display: flex; align-items: center; gap: .6rem; color: var(--ink-3); font-size: .84rem; }
.vol input { flex: 1; max-width: 200px; accent-color: var(--brand); }

.sounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin: 1.2rem 0 0; }
.sound {
  text-align: left; cursor: pointer; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
  transition: border-color .14s, background .14s;
}
.sound:hover { border-color: var(--brand-line); background: var(--brand-lt); }
.sound b { display: block; font: 600 .95rem var(--sans); margin-bottom: .25rem; }
.sound b::before { content: "▶"; color: var(--brand); font-size: .7em; margin-right: .45rem; }
.sound span { color: var(--ink-2); font-size: .86rem; line-height: 1.5; }
.sound.playing { background: var(--brand-lt); border-color: var(--brand); }
.sound.playing b::before { content: "■"; }
.sound:disabled { opacity: .5; cursor: default; }

/* timeline */
.tline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--brand-line); }
.tline li { position: relative; padding: 0 0 1.4rem 1.3rem; }
.tline li::before {
  content: ""; position: absolute; left: -7px; top: .45rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--brand);
}
.tline .t { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dk); font-weight: 700; }
.tline b { display: block; font-size: 1rem; margin: .12rem 0 .25rem; }
.tline p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }

/* card grids */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; }
.cards article { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.05rem; background: var(--white); }
.cards b { display: block; font: 600 .97rem var(--sans); margin-bottom: .35rem; }
.cards p { margin: 0; color: var(--ink-2); font-size: .89rem; line-height: 1.6; }

.tool.cta { border-top: 1px solid var(--line); padding-top: 2.2rem; }

/* ── the tools button, on the search page ────────────────────────────────
   The first version was a pale outlined pill and it disappeared into the page —
   which is a waste, because the tools are the part somebody frightened of flying
   can use tonight, without booking anything. So: solid blue, white type, and a
   badge. The sheen crosses once every eight seconds rather than looping busily;
   this audience does not need anything on the page fidgeting at them. */
.toolscta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .85rem;
  width: 100%; max-width: 520px;
  margin: 1.5rem auto 0; padding: .85rem 1.1rem;
  border-radius: 16px; text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ff8c2f 0%, var(--brand) 45%, #e8620a 100%);
  box-shadow: 0 2px 6px -1px rgba(14,109,184,.35), 0 14px 30px -12px rgba(14,109,184,.55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.toolscta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px -1px rgba(14,109,184,.4), 0 20px 38px -12px rgba(14,109,184,.62);
}
.toolscta:active { transform: translateY(0); }

.toolscta .badge {
  flex: 0 0 auto;
  background: #fff; color: #0A5296;
  font: 800 .66rem/1 var(--sans); letter-spacing: .1em;
  padding: .34rem .5rem; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(120,50,0,.25);
}
.toolscta-txt { flex: 1; min-width: 0; }
.toolscta-txt b { display: block; font: 700 1rem/1.3 var(--sans); letter-spacing: -.01em; }
.toolscta-txt small { display: block; font-size: .82rem; line-height: 1.4; color: rgba(255,255,255,.9); margin-top: .1rem; }
.toolscta-go { flex: 0 0 auto; font-size: 1.15rem; opacity: .9; transition: transform .16s ease; }
.toolscta:hover .toolscta-go { transform: translateX(3px); }

.toolscta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-160%);
  animation: sheen 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 82%  { transform: translateX(-160%); }
  92%, 100% { transform: translateX(320%); }
}

@media (max-width: 640px) {
  .breath-wrap { grid-template-columns: 1fr; justify-items: center; text-align: left; gap: 1.3rem; }
  .breath-outer { width: 200px; height: 200px; }
  .tool h2 { gap: .5rem; }
}

/* ── accounts: sign-in, callback, account, welcome ───────────────────────
   These pages are read by people who are already anxious and are now being
   asked to hand over money. Wide margins, one thing per screen, and no dense
   blocks of text. Nothing here blinks, slides or demands attention. */

.auth-stage { max-width: 480px; }
.auth-stage .hero { margin-bottom: 1.4rem; }

.auth-card {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow);
}
.auth-card h2 { margin: 0 0 .7rem; font: 650 1.1rem var(--sans); }
.auth-card p  { margin: 0 0 .9rem; color: var(--ink-2); font-size: .94rem; line-height: 1.65; }
.auth-card p:last-child { margin-bottom: 0; }

.auth-label {
  display: block; margin: 0 0 .45rem;
  font: 600 .88rem var(--sans); color: var(--ink);
}
.auth-field { padding-left: 1.15rem; margin-bottom: .9rem; }
.auth-field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: var(--ink); font: 400 1rem/1.4 var(--sans); padding: .85rem 0;
}
.auth-field input::placeholder { color: var(--ink-3); }

.auth-go { width: 100%; padding: .85rem 1.4rem; font-size: 1rem; }

.auth-note { font-size: .85rem !important; color: var(--ink-3) !important; line-height: 1.6 !important; }
.auth-note a { color: var(--ink-2); }

.auth-err {
  margin: .9rem 0 0 !important;
  color: #a3323f !important;
  background: #fdf2f3;
  border: 1px solid #f6dcdf;
  border-radius: 10px;
  padding: .7rem .85rem;
  font-size: .89rem !important;
}

.auth-sent h2 { color: var(--ink); }
.auth-foot {
  margin: 1.4rem 0 0; text-align: center;
  color: var(--ink-3); font-size: .87rem; line-height: 1.7;
}
.auth-foot a { color: var(--ink-2); }

/* the plainer of the two buttons — used for "pay yearly" and "send another",
   where the choice is real and neither option should shout down the other */
.ghost {
  border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--ink);
  font: 600 .95rem var(--sans); padding: .72rem 1.4rem;
  transition: border-color .15s, background .15s;
}
.ghost:hover { border-color: var(--ink-3); background: var(--line-2); }
.ghost:disabled { opacity: .45; cursor: default; }

/* ── the account page ─────────────────────────────────────────────────── */

.acct-wrap { width: 100%; display: grid; gap: 1rem; }
.acct-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.5rem 1.4rem; box-shadow: var(--shadow);
}
.acct-card h2 { margin: 0 0 .8rem; font: 650 1.1rem var(--sans); }
.acct-card p  { margin: 0 0 .8rem; color: var(--ink-2); font-size: .94rem; line-height: 1.65; }

.acct-state { font-size: .95rem !important; }
.acct-state strong {
  display: inline-block; border-radius: 999px;
  padding: .28rem .8rem; font: 600 .85rem var(--sans);
}
.acct-state.ok   strong { background: #e8f6f0; color: #17734f; }
.acct-state.warn strong { background: var(--brand-lt); color: var(--brand-dk); }
.acct-state.bad  strong { background: #fdf2f3; color: #a3323f; }

.acct-price { color: var(--ink) !important; font-weight: 600; }
.acct-intro {
  background: var(--brand-lt); border: 1px solid var(--brand-line);
  border-radius: 12px; padding: .8rem .9rem;
  color: var(--ink-2) !important; font-size: .89rem !important;
}
.acct-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .8rem; }

.acct-saved { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.acct-saved li {
  border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
}
.acct-saved b { font: 600 .95rem var(--sans); }
.acct-saved span { color: var(--ink-2); font-size: .88rem; }
.acct-saved em { margin-left: auto; font-style: normal; font-size: .82rem; color: var(--calm); font-weight: 600; }

/* ── the bar across the top of the search page ────────────────────────── */

.topbar {
  position: absolute; top: 0; right: 0; left: 0;
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  padding: .8rem 1.15rem; font-size: .87rem;
}
.topbar a, .topbar button {
  color: var(--ink-2); text-decoration: none; background: none; border: 0;
  font: 500 .87rem var(--sans); cursor: pointer; padding: .35rem .2rem;
}
.topbar a:hover, .topbar button:hover { color: var(--ink); }
.topbar .sep { color: var(--line); }
.topbar .primary { color: #fff; padding: .5rem 1rem; }
.topbar .primary:hover { color: #fff; }

/* the wall a signed-out visitor meets where the results would be */
.gate { text-align: center; }
.gate .acct-buttons { justify-content: center; }

/* ── terms, privacy, refunds ─────────────────────────────────────────────
   Long text nobody wants to read, set so it can actually be read: measured
   line length, real spacing between sections, headings that are findable when
   somebody is scanning for the one paragraph they care about. */
.legal { align-items: flex-start; }
.legal h2 {
  margin: 2.1rem 0 .6rem; font: 650 1.08rem var(--sans); color: var(--ink);
  padding-top: 1.4rem; border-top: 1px solid var(--line-2);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p { margin: 0 0 .85rem; color: var(--ink-2); font-size: .96rem; line-height: 1.72; max-width: 42rem; }
.legal p strong { color: var(--ink); font-weight: 600; }
.legal p em { color: var(--ink); font-style: italic; }
.legal a { color: var(--brand-dk); }
.legal .lede { color: var(--ink); font-size: 1.02rem; }
.legal .hero-tools p { color: var(--ink-3); font-size: .87rem; }
/* The legal pages left-align their body, so the heading block has to left-align
   too — otherwise the rule under the title and the "last updated" line sit
   centred over a shrink-wrapped box and read as a mistake. */
.legal .hero-tools { align-self: stretch; text-align: left; }
.legal .hero-tools h1::after { margin-left: 0; }
.legal .hero-tools p { margin-left: 0; }

/* ── the mark ────────────────────────────────────────────────────────────
   Sits above the wordmark on the pages that have no navigation bar — sign-in,
   the callback, welcome, and the search hero. On a sign-in page especially it
   is not decoration: somebody who arrived from a link in their inbox needs to
   recognise, in the first half second, that they are where they meant to be. */
.mark {
  display: block;
  width: 64px; height: 64px;
  margin: 0 auto .9rem;
}
.mark-sm { width: 44px; height: 44px; margin-bottom: .7rem; }

/* the wordmark on pages with no navigation bar */
.mark-lockup{display:block; width:auto; height:56px; margin:0 auto 1rem}
.mark-lockup-sm{height:44px; margin-bottom:.7rem}
@media(max-width:560px){.mark-lockup{height:44px} .mark-lockup-sm{height:36px}}

/* ═══ SEATS AND SUN ══════════════════════════════════════════════════════════
   The panel that answers "which side, and which seats". The sun half leads with
   a picture because left-versus-right is a spatial fact and a sentence makes
   people re-read it; the seat half is a list because it is a checklist. */

.sunwrap {
  display: flex; align-items: flex-start; gap: 1rem;
  border: 1px solid var(--brand-line); background: var(--brand-lt);
  border-radius: 14px; padding: .9rem 1rem; margin: 0 0 1.1rem;
}
.sunplan { flex: 0 0 168px; width: 168px; height: auto; }
.sunplan-lbl { font: 700 11px var(--sans); fill: var(--sun-dk); letter-spacing: .08em; text-transform: uppercase; }
.sunplan-lbl.sh { fill: var(--ink-3); }
.suntext { min-width: 0; }
.suntext h4 { margin: 0 0 .35rem; font: 700 1.06rem/1.25 var(--sans); color: var(--navy); }
.suntext h4 em { font-style: normal; color: var(--sun-dk); }
.suntext p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.suntext p:last-child { margin-bottom: 0; }
.sunglare { color: var(--sun-dk) !important; font-weight: 500; }
.sunhdg { font-size: .8rem !important; color: var(--ink-3) !important; }
.sunev { list-style: none; margin: .1rem 0 .55rem; padding: 0; }
.sunev li {
  font-size: .85rem; line-height: 1.5; color: var(--ink-2);
  padding: .3rem 0 .3rem .85rem; border-left: 2px solid var(--sun-line);
}
.sunev b { color: var(--ink); }

.seatfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 .8rem; }
.pitchnote, .famnote, .letters {
  margin: 0 0 1rem; font-size: .88rem; line-height: 1.55; color: var(--ink-2);
}
.letters {
  border-left: 3px solid var(--brand-bright); padding: .1rem 0 .1rem .8rem;
}
.letters b { color: var(--ink); }

.seath {
  margin: 1.3rem 0 .5rem; font: 700 .72rem var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.seatlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.seatlist li {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px;
  padding: .6rem .8rem; background: #fff;
}
.seatlist.good li { border-left-color: var(--calm, #16a34a); }
.seatlist.bad li.sev-avoid { border-left-color: #d14343; }
.seatlist.bad li.sev-caution { border-left-color: #d99a2b; }
.seatlist.bad li.sev-mixed { border-left-color: var(--brand-bright); }
.seatlist b { display: block; font: 650 .96rem var(--sans); color: var(--ink); }
.seatlist p { margin: .3rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.stwhat { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .12rem; }
.ftag {
  display: inline-block; margin-left: .45rem; vertical-align: 1px;
  background: var(--sun); color: var(--sun-dk); border: 1px solid var(--sun-line);
  border-radius: 999px; padding: .1rem .5rem; font: 700 .66rem var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
}

@media (max-width: 620px) {
  .sunwrap { flex-direction: column; align-items: center; gap: .6rem; }
  .sunplan { flex: none; width: 140px; }
  .suntext { text-align: left; }
  .seatfacts { grid-template-columns: 1fr 1fr; }
}

/* ═══ BOARDING TABLE ═════════════════════════════════════════════════════════
   A genuine comparison of measured numbers, so it gets a real table rather than
   a list pretending to be one. It scrolls inside its own box on a phone — the
   page itself must never scroll sideways. */

.subh {
  margin: 2rem 0 .6rem; font: 700 1.02rem var(--sans); color: var(--navy);
}
.tblwrap { overflow-x: auto; margin: 0 0 1rem; -webkit-overflow-scrolling: touch; }
.btable {
  border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: .87rem; background: #fff;
}
.btable caption {
  caption-side: bottom; text-align: left; padding: .55rem .2rem 0;
  font-size: .78rem; color: var(--ink-3); line-height: 1.5;
}
.btable th, .btable td {
  border: 1px solid var(--line); padding: .55rem .65rem; vertical-align: top;
  text-align: left; line-height: 1.45;
}
.btable thead th {
  background: var(--brand-lt); color: var(--navy); font-weight: 700;
  font-size: .8rem; border-color: var(--brand-line); white-space: nowrap;
}
.btable thead th small { display: block; font-weight: 500; color: var(--ink-3); font-size: .72rem; }
.btable tbody td:first-child { white-space: nowrap; }
.btable tbody td:first-child small { display: block; font-weight: 400; color: var(--ink-3); font-size: .74rem; white-space: normal; }
.btable td.fast { color: #15803d; font-weight: 700; }
.btable td.slow { color: #b91c1c; font-weight: 700; }
.btable td.good { color: #15803d; font-weight: 700; }
.btable td.bad  { color: #b91c1c; font-weight: 700; }
.btable tbody tr:nth-child(even) td { background: var(--line-2); }

/* ═══ CHANGELOG ══════════════════════════════════════════════════════════════
   Version, title and date on one line, then what changed. Reads as a record
   rather than as release notes, because the audience is a customer deciding
   whether this site is looked after, not a developer reading a diff. */

.rel { margin: 0 0 2.2rem; }
.rel-h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
  margin-bottom: .8rem;
}
.rel-v {
  flex: 0 0 auto; background: var(--brand-lt); border: 1px solid var(--brand-line);
  color: var(--brand-dk); border-radius: 999px; padding: .16rem .6rem;
  font: 700 .78rem var(--sans); letter-spacing: .02em;
}
.rel-h h2 {
  margin: 0; padding: 0; border: 0; flex: 1 1 auto;
  font: 700 1.08rem var(--sans); color: var(--ink);
}
.rel-d { flex: 0 0 auto; font-size: .8rem; color: var(--ink-3); }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rel-list li {
  position: relative; padding-left: 1.1rem;
  font-size: .93rem; line-height: 1.6; color: var(--ink-2); max-width: 44rem;
}
.rel-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-bright);
}
.rel-list strong { color: var(--ink); font-weight: 650; }

@media (max-width: 560px) {
  .rel-h { gap: .4rem; }
  .rel-h h2 { flex-basis: 100%; order: 3; }
  .rel-d { order: 2; }
}

/* The version, small, in the footer. It links to what changed — a bare number
   is a fact nobody can use. */
.vstamp {
  display: inline-block; margin-left: .6rem; vertical-align: 2px;
  font: 600 .74rem var(--sans); color: var(--ink-3);
  text-decoration: none; border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .5rem;
}
.vstamp:hover { color: var(--brand-dk); border-color: var(--brand-line); background: var(--brand-lt); }

/* ═══ VERSION BAR ════════════════════════════════════════════════════════════
   A thin strip at the very top of every page saying which version is running
   and when it last changed.

   WHY IT IS HERE AND NOT TUCKED IN A FOOTER. The question "did my change
   actually go out?" was previously answered by scrolling to the bottom of one
   particular page, or by fetching an endpoint. On every page, at the top, it is
   answered by looking. It doubles as the thing a customer sees when they wonder
   whether anyone still maintains this — an unmaintained site never dares.

   The text is written by scripts/release.js, not by hand, so it cannot drift
   from the version the API reports. */
.vbar {
  display: block; width: 100%;
  background: var(--line-2); border-bottom: 1px solid var(--line);
  color: var(--ink-3); text-decoration: none;
  font: 500 .72rem/1 var(--sans); letter-spacing: .02em;
  padding: .42rem 1.15rem; text-align: right;
}
.vbar:hover { color: var(--brand-dk); background: var(--brand-lt); border-bottom-color: var(--brand-line); }

/* The search page pins its account bar to the top of the page, so it has to
   start below this one rather than on top of it. */
.vbar ~ .topbar { top: 26px; }
/* Pages that centre their content in the viewport were sized against the full
   height; take the strip back off so they do not gain a 26px scrollbar. */
.vbar ~ .stage { min-height: calc(100dvh - 26px); }

/* The account bar is painted over the page rather than laid out in it, so the
   first thing in the stage has to leave room for it. On a wide screen the links
   sit out to the right of the mark and nothing touches; at phone widths there is
   no such room, and without this "Sign in" prints straight through the middle of
   the logo. Measured at 390px, which is where it was found. */
@media (max-width: 640px) {
  .topbar ~ .stage { padding-top: 2.6rem; }
}

@media (max-width: 560px) {
  .vbar { font-size: .68rem; padding: .38rem .95rem; text-align: center; }
}

/* ═══ CABIN PLAN ═════════════════════════════════════════════════════════════
   The schematic in the seats panel. Deliberately flat and diagrammatic — it is
   a plan, and anything glossier would read as a promise about specific rows
   that this drawing is careful not to make. */

.cabinfig { margin: 0 0 1.2rem; text-align: center; }
.cabinplan { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }

.cabinplan .cp-win { fill: #cfe6fa; stroke: #8fc4ea; stroke-width: .8; }
.cabinplan .cp-mid { fill: #fbe3e3; stroke: #e9b3b3; stroke-width: .8; }
.cabinplan .cp-ais { fill: #e9edf3; stroke: #cbd3de; stroke-width: .8; }
.cabinplan .cp-dim { opacity: .45; }

.cabinplan .cp-let      { font: 700 11px var(--sans); fill: var(--ink-3); text-anchor: middle; }
.cabinplan .cp-let-win  { fill: var(--brand-dk); }
.cabinplan .cp-zone     { font: 600 9px var(--sans); fill: var(--ink-2); }
.cabinplan .cp-good     { fill: #147951; }
.cabinplan .cp-warn     { fill: #a45c5c; }
.cabinplan .cp-br-good  { stroke: #147951; }
.cabinplan .cp-br-warn  { stroke: #d3b1b1; }
.cabinplan .cp-side     { font: 700 9px var(--sans); fill: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.cabinplan .cp-sunlbl   { fill: var(--sun-dk); }

.cplegend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .2rem .9rem; margin-top: .5rem;
  font-size: .78rem; color: var(--ink-2);
}
.cplegend span { display: inline-flex; align-items: center; gap: .3rem; }
.cp-k { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid; }
.cplegend .cp-win { background: #cfe6fa; border-color: #8fc4ea; }
.cplegend .cp-mid { background: #fbe3e3; border-color: #e9b3b3; }
.cplegend .cp-ais { background: #e9edf3; border-color: #cbd3de; }
.cpnote {
  flex-basis: 100%; justify-content: center; text-align: center;
  margin-top: .35rem; font-size: .74rem; color: var(--ink-3); line-height: 1.45;
}

/* The cabin list is a set of buttons, not a label — tapping one shows that
   cabin's photographs. It looked exactly like this before and did nothing,
   which is worse than not offering it. */
.clist-pick { gap: .35rem; }
.cpick {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .28rem .7rem; font: 500 .8rem var(--sans); color: var(--ink-2);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.cpick:hover { border-color: var(--brand-line); background: var(--brand-lt); color: var(--brand-dk); }
.cpick.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 650; }
.cpick.isfirst:not(.on) { background: #f3f0ff; border-color: #ddd6fb; color: #5b46b8; }
.seatgrid figcaption a { color: var(--ink-3); }
.seatgrid figcaption a:hover { color: var(--brand-dk); }

/* Member photo upload, in the cabin panel. */
.addphoto { border: 1px dashed var(--brand-line); border-radius: 12px; padding: .8rem .9rem; margin: 1rem 0 0; background: var(--brand-lt); }
.addphoto-btn { display: block; cursor: pointer; }
.addphoto-btn span {
  display: block; text-align: center; background: #fff; border: 1px solid var(--brand-line);
  border-radius: 999px; padding: .55rem 1rem; font: 650 .9rem var(--sans); color: var(--brand-dk);
}
.addphoto-btn:hover span { background: var(--brand); border-color: var(--brand); color: #fff; }
.addphoto-seat, .addphoto-note {
  width: 100%; margin-top: .45rem; border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .6rem; font: 400 .86rem var(--sans); background: #fff; color: var(--ink);
}
.addphoto-help { margin: .5rem 0 0; font-size: .76rem; color: var(--ink-3); line-height: 1.45; }
.addphoto-msg { margin: .5rem 0 0; font-size: .84rem; color: #147951; font-weight: 500; }
.addphoto-msg.bad { color: #b5646f; }
.addphoto-out { margin: 1rem 0 0; font-size: .84rem; color: var(--ink-3); }
.memtag {
  display: inline-block; background: var(--sun); border: 1px solid var(--sun-line); color: var(--sun-dk);
  border-radius: 999px; padding: .05rem .45rem; font: 700 .66rem var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
}

/* ═══ THE MEMBER FEED ════════════════════════════════════════════════════════ */
.feedbar { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; }
.fchip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .35rem .85rem; font: 500 .85rem var(--sans); color: var(--ink-2); cursor: pointer;
}
.fchip:hover { border-color: var(--brand-line); background: var(--brand-lt); color: var(--brand-dk); }
.fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 650; }

.fpost {
  border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
  margin: 0 0 .8rem; background: #fff; max-width: 46rem;
}
.fhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.fkind {
  background: var(--brand-lt); border: 1px solid var(--brand-line); color: var(--brand-dk);
  border-radius: 999px; padding: .1rem .5rem; font: 700 .68rem var(--sans);
  letter-spacing: .05em; text-transform: uppercase;
}
.fhead b { font: 650 .98rem var(--sans); color: var(--ink); }
.fstars { color: #d99a2b; letter-spacing: .06em; font-size: .9rem; }
.fwhen { margin-left: auto; font-size: .78rem; color: var(--ink-3); }
.ffelt { margin: .5rem 0 0; font-size: .88rem; color: var(--ink-2); }
.ffelt b { color: var(--brand-dk); font-size: 1.05rem; }
.fpost h3 { margin: .5rem 0 .2rem; font: 700 1rem var(--sans); }
.fbody { margin: .4rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; }
.fphoto { display: block; width: 100%; max-width: 34rem; border-radius: 10px; margin: .6rem 0 0; }
.fmeta { margin: .45rem 0 0; font-size: .8rem; color: var(--ink-3); }
.ffoot {
  display: flex; align-items: center; gap: .8rem; margin-top: .7rem;
  padding-top: .55rem; border-top: 1px solid var(--line-2); font-size: .8rem; color: var(--ink-3);
}
.fflag { margin-left: auto; background: none; border: 0; color: var(--ink-3); font: 500 .8rem var(--sans); cursor: pointer; text-decoration: underline; }
.fflag:hover { color: #b5646f; }
.fflag:disabled { text-decoration: none; cursor: default; }

.fcomp { border: 1px solid var(--brand-line); border-radius: 14px; background: var(--brand-lt); margin: 0 0 1.4rem; max-width: 46rem; }
.fcomp summary { padding: .8rem 1rem; cursor: pointer; font: 650 .95rem var(--sans); color: var(--brand-dk); }
.fcomp-in { padding: 0 1rem 1rem; }
.flab { display: block; margin: 0 0 .6rem; font: 600 .78rem var(--sans); color: var(--ink-2); }
.flab select, .flab input, .flab textarea {
  display: block; width: 100%; margin-top: .25rem;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem;
  font: 400 .9rem var(--sans); background: #fff; color: var(--ink);
}
.flab textarea { resize: vertical; }
.qrow { border-left: 3px solid var(--sun-line); }
.qbtn { padding: .4rem .9rem; font-size: .85rem; }


/* Reduced motion parks the aircraft rather than flying it. animateMotion is
   SMIL, not CSS, so animation:none cannot reach it — the element is frozen by
   pausing the document's animations from script instead (see search.html), and
   this hides the duplicate copy so only one aircraft is left sitting on the
   path. */
@media (prefers-reduced-motion: reduce) {
  .orb-btn { animation: none; }
  .orb-plane-back { display: none; }
  .orb-plane { opacity: 1 !important; }
}

/* ── the airport panel ──────────────────────────────────────────────────────
   The point of this panel is one sentence at the top — where to go — and then
   a set of distances. Everything is sorted nearest first, so the eye can stop
   at the first line of each block and be done. */
.apwhere {
  background: var(--brand-lt); border: 1px solid var(--brand-line);
  border-radius: 14px; padding: .9rem 1rem; margin: 0 0 1.1rem;
}
.apbig { margin: 0; font-size: clamp(1.15rem, 4vw, 1.45rem); font-weight: 650; color: var(--navy); letter-spacing: -.01em; }
.apbig b { font-weight: 800; }
.apwhy { margin: .45rem 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.apsec { margin: 0 0 1.15rem; }
.apsec h4 {
  margin: 0 0 .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.plist { list-style: none; margin: 0; padding: 0; }
.plist li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .1rem .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line-2);
}
.plist li:last-child { border-bottom: 0; }
.plist b { grid-column: 1; font-weight: 600; color: var(--ink); }
.pmeta { grid-column: 1; font-size: .8rem; color: var(--ink-3); }
/* The walk sits in its own column and spans both rows, so a two-line name does
   not push the number out of line with the ones above it. */
.pwalk { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.pwalk em { font-style: normal; font-size: .84rem; font-weight: 600; color: var(--ink-2); min-width: 3.6em; text-align: right; }
.wbar { display: block; width: 58px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wbar i { display: block; height: 100%; border-radius: 999px; background: var(--brand-bright); }
@media (max-width: 420px) {
  .wbar { width: 40px; }
  .pwalk em { min-width: 3.2em; font-size: .8rem; }
}
/* The clock block. Times are the point, so they lead each row and the
   explanation sits under them rather than beside. */
.aptime .tlist li { grid-template-columns: 1fr; }
.aptime .tlist b { font-size: 1.15rem; font-weight: 750; color: var(--navy); letter-spacing: -.01em; }
.aptime .tlist .pmeta { font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
/* The destination list carries a description under each name, so the rows are
   taller and the right-hand figure is a distance rather than a walk. */
.slist li { padding: .65rem 0; }
.slist .pmeta { line-height: 1.45; padding-right: .5rem; }
.slist .pwalk em { min-width: 4.2em; color: var(--ink-2); }
.slist b a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brand-line); }
.slist b a:hover { color: var(--brand); border-bottom-color: var(--brand); }
/* Fares under the cabin buttons. Same visual family as the cabin list it sits
   beneath: a small caps label, then rows. The number is the only bold thing. */
.fares { margin: -.35rem 0 1.15rem; }
.farelist { list-style: none; margin: .35rem 0 .7rem; padding: 0; }
.farelist li {
  display: grid; grid-template-columns: 6.2em 1fr; gap: .6rem; align-items: baseline;
  padding: .42rem 0; border-bottom: 1px solid var(--line-2); font-size: .92rem;
}
.farelist li:last-child { border-bottom: 0; }
.farelist b { font-weight: 600; color: var(--ink); }
.farelist span { color: var(--ink-2); }
.farelist strong { font-weight: 750; color: var(--navy); }
.fares .blink { margin-top: .2rem; }
.fares .sub { margin-top: .6rem; font-size: .8rem; }
/* Star class on a hotel row. Small, warm, and never mistaken for a rating —
   it is the hotel's own class, and the caption says so. */
.stars { color: var(--sun-dk); letter-spacing: .06em; font-size: .78rem; }