/* OwedAir. Near-black and off-white panels, the painting's sunset coral as the one accent. System fonts only, nothing loaded from outside.
   Order of this file: tokens, base, top bar, type, buttons, sections, forms, sub pages, footer, then ONE motion block.
   Everything that moves lives in that block (prefers-reduced-motion: no-preference) and only under .live, which app.js adds.
   Without JavaScript, or with reduced motion, every section is plain content in normal flow. */

/* ---- Tokens: .light is the off-white panel, .dark the near-black one. In a dark colour scheme the light panels turn warm charcoal. ---- */
:root { color-scheme: light dark; --sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif; --coral: #ff7f5c; --bar: 60px; --gut: clamp(16px, 4.5vw, 64px); }
.light { --bg: #f7f7ee; --fg: #0d0c0b; --muted: #4f4c44; --line: #cfcbb8; --card: #ffffff; --field: #6f6a5c; --accent: #a8381a; --btn: #0d0c0b; --on-btn: #f7f7ee; --focus: #0d0c0b; --ok: #2c6a47; --warn: #7a5611; --no: #8c2b27; }
.dark { --bg: #0b0a09; --fg: #f6f4ea; --muted: #c3bfb0; --line: #3b372e; --card: #15130f; --field: #8f8a79; --accent: #ff7f5c; --btn: #ff7f5c; --on-btn: #0d0c0b; --focus: #ffffff; --ok: #86c79f; --warn: #d6b068; --no: #e6a095; }
@media (prefers-color-scheme: dark) {
  .light { --bg: #181610; --fg: #f2f0e4; --muted: #b8b4a4; --line: #3a362c; --card: #211e17; --field: #8f8a79; --accent: #ff8f6e; --btn: #f2f0e4; --on-btn: #0d0c0b; --focus: #f2f0e4; --ok: #86c79f; --warn: #d6b068; --no: #e6a095; }
  .dark { --bg: #050504; }
}
.light, .dark { background: var(--bg); color: var(--fg); }

/* ---- Base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #050504; scroll-padding-top: calc(var(--bar) + 16px); } /* anchors and focus land below the fixed bar */
body { margin: 0; background: #0b0a09; color: #f6f4ea; font: 16px/1.55 var(--sans); font-variant-numeric: lining-nums tabular-nums; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus, #ffffff); outline-offset: 3px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 12px 18px; background: #fff; color: #000; border-radius: 999px; font-weight: 700; outline: 3px solid var(--coral); }
.col { max-width: 760px; margin: 0 auto; padding: 0 var(--gut); }
.col.wide { max-width: 1320px; }
.nw { white-space: nowrap; }
.hint { color: var(--muted); font-size: .92rem; }

/* ---- Top bar: slim, black, logo left, white button right ---- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--bar); background: #000000; color: #ffffff; --focus: #ffffff; }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; padding: 0 var(--gut); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; font: 800 1.5rem/1 var(--sans); letter-spacing: -.05em; }
.logo .mark { width: 30px; height: 30px; color: #ffffff; flex: none; }
.btn-w { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #ffffff; color: #000000; font: 700 .95rem/1 var(--sans); text-decoration: none; white-space: nowrap; }
.btn-w:hover { background: var(--coral); }
@media (max-width: 380px) { .logo { font-size: 1.25rem; gap: 8px; } .logo .mark { width: 26px; height: 26px; } .btn-w { padding: 0 14px; font-size: .88rem; } .bar-in { gap: 8px; } }

/* ---- Type: tight bold sans for headlines, editorial serif for the quiet lines ---- */
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.mega { font-size: clamp(2.6rem, 8vw, 7rem); }
.huge { font-size: clamp(6rem, min(34vw, 40vh), 30rem); font-size: clamp(6rem, min(34vw, 40svh), 30rem); line-height: .8; letter-spacing: -.065em; }
.eyebrow { margin: 0 0 14px; font: 700 .78rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eyebrow .rn { margin-right: 10px; font: italic 400 1.15rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
.serif-lead { margin: 22px 0 0; max-width: 34em; font: 400 clamp(1.25rem, 2.3vw, 1.9rem)/1.32 var(--serif); letter-spacing: -.005em; color: var(--fg); }
.lead { margin: 18px 0 0; max-width: 32em; font: 400 clamp(1.1rem, 2.1vw, 1.55rem)/1.32 var(--serif); }

/* ---- Buttons ---- */
.btn, button, a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--btn); color: var(--on-btn); font: 700 1rem/1.1 var(--sans); letter-spacing: -.005em; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover, button:hover, a.button:hover { background: var(--accent); color: var(--on-btn); }
.light .btn:hover, .light button:hover, .light a.button:hover { background: var(--accent); color: #ffffff; }
button.link { min-height: 44px; padding: 0 6px; background: none; color: var(--fg); text-decoration: underline; font-weight: 500; }
button.link:hover { background: none; color: var(--accent); }

/* ---- Scenes: a pin (one screen) inside a scene. Static by default; the motion block makes the pin sticky. ---- */
.scene { position: relative; scroll-margin-top: calc(-1 * (var(--bar) + 16px)); } /* a scene anchor lands at the very top: its pinned screen starts there */
#stage { --len: 1.9; } #owed { --len: 2.5; } #much { --len: 2.8; } #how { --len: 2.3; } #private { --len: 2.2; } /* here, not in style="": the security policy allows no inline styles */
.pin { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.stack { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: calc(var(--bar) + clamp(24px, 6vh, 64px)) var(--gut) clamp(32px, 6vh, 64px); padding: calc(var(--bar) + clamp(24px, 6svh, 64px)) var(--gut) clamp(32px, 6svh, 64px); }

/* The background: near black, a soft cool light low on the screen. The 3D sky in jet.js draws over this on the first scenes; the same light is the fallback. */
.home { background: #07080b; }
.hero.dark, .owed.dark, .much.dark { background: transparent; }
.private.dark, html:not(.gl) .hero.dark, html:not(.gl) .owed.dark, html:not(.gl) .much.dark { background: radial-gradient(120% 70% at 62% 118%, #1a2536 0%, #0c1018 42%, #07080b 72%); }
.subhero { background: radial-gradient(90% 100% at 78% -10%, #1a2536 0%, #0c1018 45%, #07080b 78%); } /* the light comes from above, so the header runs into the page with no seam */
.inner .body.dark { background: #07080b; }
.home main { position: relative; z-index: 1; }
#jet3d { position: fixed; inset: 0; z-index: 0; display: none; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.gl #jet3d { display: block; }
.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; opacity: .55; }
.gl .still { display: none; }

/* Hero */
.hero .pin { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: calc(var(--bar) + 20px) var(--gut) 28px; }
.frame { position: relative; z-index: 2; width: min(100%, 1180px); margin: 0 auto; padding: clamp(20px, 3.2vw, 44px); border: 1px solid #ffffff; color: #ffffff; display: grid; gap: 22px 56px; }
@media (min-width: 900px) { .frame { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; } }
.hero .eyebrow { color: #ffffff; }
.hero h1 { font-size: clamp(2rem, min(8.6vw, 8.4vh), 5.4rem); font-size: clamp(2rem, min(8.6vw, 8.4svh), 5.4rem); }
.hero .lead { color: #ffffff; }
.hero .go { margin: 24px 0 0; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.toc li:first-child { border-top: 1px solid rgba(255, 255, 255, .4); }
.toc a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 46px; padding: 11px 0; color: #ffffff; text-decoration: none; font: 800 clamp(1.15rem, 2.2vw, 1.6rem)/1.1 var(--sans); letter-spacing: -.035em; }
.toc a:hover span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.toc .rn { font: italic 400 1.05rem/1 var(--serif); letter-spacing: 0; color: #ffffff; }

/* I. Late. */
.owed .stack { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; }
.owed .huge { margin: 0 0 clamp(8px, 2vh, 24px); margin: 0 0 clamp(8px, 2svh, 24px); overflow-wrap: normal; }
.word { display: inline-block; }
.states { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 40rem; }
.states h3 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--accent); margin-bottom: 8px; }
.states p { margin: 0; font: 400 clamp(1.15rem, 2.1vw, 1.55rem)/1.32 var(--serif); }
.aside { margin: 28px 0 0; max-width: 34rem; color: var(--muted); font-size: 1rem; }

/* II. How much */
.much .stack { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; gap: 0; }
.much h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem); max-width: 22em; }
.route { display: none; position: relative; height: 178px; margin: clamp(10px, 3vh, 36px) 0 0; margin: clamp(10px, 3svh, 36px) 0 0; }
.line { position: absolute; left: 0; right: 0; top: 74px; height: 4px; background: rgba(255, 255, 255, .3); }
.fill { position: absolute; inset: 0; background: var(--coral); }
.tick { position: absolute; top: -9px; width: 3px; height: 22px; background: #ffffff; }
.t1 { left: 33.333%; } .t2 { left: 66.667%; }
.tick u { position: absolute; top: 30px; left: -3em; width: 6em; text-align: center; text-decoration: none; font: 700 .85rem/1 var(--sans); letter-spacing: .04em; color: var(--muted); }
.mover { position: absolute; left: 0; right: 0; top: 4px; display: flex; justify-content: flex-end; }
.much { --jw: clamp(170px, 22vw, 300px); }
.jet { display: block; width: var(--jw); height: 64px; }
.km { position: absolute; left: 0; top: 124px; margin: 0; font: 800 clamp(1.8rem, 4.4vw, 3rem)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bands { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.range { margin: 0 0 4px; font: 700 .85rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fig { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 clamp(12px, 2vw, 28px); font-family: var(--sans); font-weight: 800; letter-spacing: -.06em; }
.eur { font-size: clamp(4.5rem, min(22vw, 30vh), 15rem); font-size: clamp(4.5rem, min(22vw, 30svh), 15rem); line-height: .9; color: #ffffff; }
.gbp { font-size: clamp(1.8rem, min(7vw, 10vh), 5rem); font-size: clamp(1.8rem, min(7vw, 10svh), 5rem); line-height: 1; color: var(--coral); }
.legend { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font: 700 clamp(.85rem, 1.3vw, 1.1rem)/1.3 var(--sans); letter-spacing: .04em; color: var(--muted); }
.lg-e { color: #ffffff; } .lg-p { color: var(--coral); }
.note-band { padding: 0 0 clamp(40px, 8vw, 96px); }
.note { margin: 0; padding-top: 28px; max-width: 52rem; border-top: 1px solid var(--line); font: 400 clamp(1.15rem, 2.2vw, 1.6rem)/1.35 var(--serif); }

/* III. How it works (off-white) */
.how .stack { padding-bottom: 24px; }
.how h2 { max-width: 12em; font-size: clamp(2.4rem, 8vw, 7rem); }
.deck { list-style: none; margin: 0 auto; padding: 8px var(--gut) clamp(40px, 6vw, 80px); max-width: 1320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card .no, .deck .no { display: block; font: 800 clamp(3.4rem, 8vw, 6.4rem)/.9 var(--sans); letter-spacing: -.06em; }
.deck .card { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: 22px; min-height: 340px; border: 0; margin: 0; }
.deck h3 { margin: 18px 0 8px; font-size: clamp(2rem, 3.4vw, 2.8rem); }
.deck p { margin: 0; font: 400 clamp(1.1rem, 1.7vw, 1.35rem)/1.3 var(--serif); }
.deck .c1 { background: #0d0c0b; color: #f6f4ea; }
.deck .c1 .no { color: var(--coral); }
.deck .c2 { background: #fffdf4; color: #0d0c0b; border: 1px solid #cfcbb8; }
.deck .c2 .no { color: #a8381a; }
.deck .c3 { background: var(--coral); color: #0d0c0b; }
.mini { margin-top: 18px; font: 400 .9rem/1.35 var(--serif); }
.mini p { margin: 0; font: inherit; }
.mini.form { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 6px; font-size: .8rem; }
.mini.form span { min-width: 0; padding: 6px; border: 1px solid #5a5548; border-radius: 8px; color: #c3bfb0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mini.form small { display: block; margin-bottom: 2px; font: 700 .62rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.mini.slip { padding: 12px 14px; border-radius: 6px; background: #0d0c0b; color: #f6f4ea; }
.mini.slip .to { margin-bottom: 4px; font-weight: 700; }
.paper { margin-top: 18px; padding: 16px 18px; background: #ffffff; border: 1px solid #d8d4c2; border-radius: 4px; font: 400 .82rem/1.45 var(--serif); color: #2a2823; }
.paper p { margin: 0 0 7px; font: inherit; }
.paper .to { font-weight: 700; }
.paper .sig { margin: 10px 0 0; }
.claimline { padding: clamp(56px, 10vw, 140px) 0; }
.claimline .mega { font-size: clamp(2.8rem, 9.4vw, 9rem); max-width: 12em; }

/* IV. The check (no scroll animation in here) */
.check { padding: clamp(56px, 9vw, 130px) 0; }
.check-head { max-width: 40rem; }
.check .mega { font-size: clamp(2.4rem, 5.4vw, 5rem); }
@media (min-width: 1000px) { .check .col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; } }
.check-body { min-width: 0; margin-top: 40px; }
@media (min-width: 1000px) { .check-body { margin-top: 0; } }
.check .card, .inner .card { overflow-wrap: break-word; }
.check .card { margin: 0 0 20px; padding: clamp(20px, 3vw, 36px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.check h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.check h4 { font-size: 1.4rem; margin-bottom: 6px; }
label { display: block; margin: 18px 0 4px; font-weight: 600; }
input, select, textarea { scroll-margin-top: 48px; width: 100%; font: inherit; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--bg); color: var(--fg); margin-top: 4px; }
textarea { line-height: 1.45; }
input[type=radio], input[type=checkbox] { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--btn); }
input[aria-invalid=true] { border-color: var(--no); border-width: 3px; }
.hm { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hm input { width: 5.5em; margin-top: 0; }
#lateLabel { display: block; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
label.opt { font-weight: 400; display: flex; gap: 12px; align-items: center; min-height: 48px; margin: 2px 0; }
.opts { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 8px; }
.two { --cols: 2; }
@media (max-width: 560px) { .opts { grid-template-columns: 1fr; } .two { --cols: 2; } }
.opts .opt { position: relative; display: block; min-height: 0; margin: 0; }
.opts .opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opts .opt span { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 60px; padding: 8px 10px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--bg); font-size: .95rem; line-height: 1.25; }
.opts .opt input:checked + span { background: var(--btn); color: var(--on-btn); border-color: var(--btn); font-weight: 700; }
.opts .opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.picked { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 2px 8px 2px 16px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--bg); }
.known .opts { display: none; }
form > button[type=submit] { width: 100%; margin-top: 28px; }
button { margin-top: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 0 10px; }
.actions button { margin-top: 10px; }
summary { cursor: pointer; font-weight: 600; padding: 12px 0; min-height: 48px; }
::placeholder { color: var(--muted); opacity: 1; }
details { margin-top: 12px; }
#result:focus { outline: none; }
#result { border-top: 6px solid var(--line); }
#result.eligible { border-top-color: var(--ok); } #result.possible { border-top-color: var(--warn); }
#result.not_eligible, #result.not_covered, #result.error { border-top-color: var(--no); }
.eligible h2 { color: var(--ok); } .possible h2 { color: var(--warn); }
.not_eligible h2, .not_covered h2, .error h2 { color: var(--no); }
#result h2 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
.big { display: block; margin: 6px 0 2px; font: 800 clamp(3.4rem, 14vw, 6rem)/.95 var(--sans); letter-spacing: -.06em; }
#result ul { border-top: 1px solid var(--line); padding: 14px 0 0 1.2em; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.choice > div { border-top: 1px solid var(--line); padding-top: 16px; }
.choice > .pri { border-top: 4px solid var(--fg); }
.choice p { margin: 4px 0 8px; }
.choice a { display: inline-block; padding: 12px 4px; font-weight: 700; }
@media (max-width: 560px) { .choice { grid-template-columns: 1fr; gap: 24px; } }

/* Free. Private. */
.private .stack { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.private .huge { margin-bottom: clamp(14px, 3vh, 36px); margin-bottom: clamp(14px, 3svh, 36px); font-size: clamp(3.4rem, min(15vw, 21vh), 12rem); font-size: clamp(3.4rem, min(15vw, 21svh), 12rem); }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.4vh, 16px); gap: clamp(6px, 1.4svh, 16px); }
.lines li { font: 800 clamp(1.7rem, min(5.4vw, 6.4vh), 4.4rem)/1.04 var(--sans); font: 800 clamp(1.7rem, min(5.4vw, 6.4svh), 4.4rem)/1.04 var(--sans); letter-spacing: -.05em; }
.lines .honest { max-width: 40rem; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); font: 400 clamp(1.1rem, 1.9vw, 1.4rem)/1.4 var(--serif); letter-spacing: 0; color: var(--fg); }

/* Airlines and rules */
.airlines { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 7vw, 90px); overflow: hidden; }
.marquee { margin: clamp(24px, 4vw, 56px) 0 0; padding: 0 var(--gut); overflow: hidden; }
.marquee .track { display: flex; flex-wrap: wrap; gap: 0 .5em; list-style: none; margin: 0; padding: 0; font: 800 clamp(2.8rem, 9vw, 8rem)/1.05 var(--sans); letter-spacing: -.055em; }
.marquee li { padding-right: .1em; }
.marquee a { color: var(--fg); text-decoration: none; }
.marquee a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: .06em; }
.more { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-weight: 700; }
.more button { margin: 0; min-height: 48px; background: transparent; color: var(--fg); border: 1.5px solid var(--field); }
.more button:hover { background: var(--fg); color: var(--bg); }
.more a { padding: 12px 0; }
.faq { padding: clamp(40px, 7vw, 100px) 0 clamp(64px, 10vw, 140px); border-top: 1px solid var(--line); }
.faq .mega { font-size: clamp(2.2rem, 6vw, 5rem); }
.qa { display: grid; gap: 28px 48px; margin: 36px 0 28px; }
@media (min-width: 900px) { .qa { grid-template-columns: repeat(3, 1fr); } }
.qa h3 { font-size: 1.5rem; margin-bottom: 10px; }
.qa p { margin: 0; font: 400 1.1rem/1.45 var(--serif); }

/* Inner pages: airlines, about, 404 */
.subhero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(340px, 52vh, 560px); min-height: clamp(340px, 52svh, 560px); padding: calc(var(--bar) + 48px) var(--gut) clamp(32px, 5vw, 64px); }
.subhero .in { position: relative; z-index: 2; width: min(100%, 1180px); margin: 0 auto; }
.subhero .eyebrow { color: var(--coral); }
.subhero h1 { font-size: clamp(2.3rem, 7.4vw, 6rem); max-width: 14em; }
.subhero .lead { color: #ffffff; max-width: 36em; }
.body { padding: clamp(24px, 5vw, 64px) 0 clamp(64px, 9vw, 120px); }
.body .col { max-width: 1180px; }
.inner .card { margin: 0; padding: 36px 0 12px; border-top: 1px solid var(--line); max-width: 46rem; }
.inner .card.wide { max-width: none; }
.inner .card h2 { margin-bottom: 14px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.inner .card p, .inner .card li { font-size: 1.12rem; line-height: 1.5; }
.inner .card ul { padding-left: 1.2em; }
.inner .card a:not(.button) { font-weight: 600; }
.inner .card a[rel~=sponsored] { display: inline-block; padding: 8px 4px; }
.cols { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 28px; }
.inner .card ul.cols { padding: 0; }
.cols a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font: 800 1.5rem/1.1 var(--sans); letter-spacing: -.04em; text-decoration: none; }
.cols a:hover { color: var(--accent); }

/* About: numbered rows, the heading on the left and the text on the right */
.inner .card.row { max-width: none; display: grid; gap: 14px 40px; padding: clamp(32px, 5vw, 64px) 0; }
.row .rn { font: italic 400 1.15rem/1.4 var(--serif); color: var(--accent); }
.inner .card.row h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.inner .card.row .say p { margin: 0 0 14px; max-width: 36em; font: 400 clamp(1.15rem, 1.8vw, 1.45rem)/1.42 var(--serif); }
.inner .card.row .say p.mail { margin-bottom: 12px; font: 800 clamp(1.45rem, 3.1vw, 2.7rem)/1.08 var(--sans); letter-spacing: -.04em; overflow-wrap: anywhere; }
.mail a { text-decoration: none; color: var(--accent); }
.mail a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.row.end { align-items: center; }
.inner .card.row .last { margin: 0; font: 800 clamp(1.8rem, 4vw, 3.4rem)/1.04 var(--sans); letter-spacing: -.045em; }
.row.end p:last-child { margin: 0; }
@media (min-width: 900px) { .inner .card.row { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.5fr); } .inner .card.row.end { grid-template-columns: minmax(0, 1fr) auto; } }

/* Footer */
.foot-wrap { padding: clamp(56px, 9vw, 130px) var(--gut) 36px; overflow: hidden; }
.foot-in { max-width: 1320px; margin: 0 auto; }
.wm { margin: 0 0 clamp(28px, 5vw, 64px); font: 800 min(22vw, 20rem)/.82 var(--sans); letter-spacing: -.065em; color: var(--coral); user-select: none; white-space: nowrap; }
.foot { display: flex; flex-wrap: wrap; gap: 4px 36px; }
.foot a { display: inline-block; padding: 10px 0; font: 800 clamp(1.4rem, 3vw, 2.2rem)/1.1 var(--sans); letter-spacing: -.04em; text-decoration: none; }
.foot a:hover { color: var(--coral); }
.credit { margin: 28px 0 0; max-width: 56rem; color: var(--muted); font-size: .92rem; }
.credit a { padding: 4px 0; }

/* ---- Motion: the only place anything moves. Scroll position (--p, 0 to 1 per scene, set by app.js) drives transforms and opacity; nothing else. ---- */
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) {
  .scene.live { --p: 0; height: calc(var(--len, 3) * var(--k, 1) * 100vh); height: calc(var(--len, 3) * var(--k, 1) * 100lvh); }
  .scene.live > .pin { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 0; }
  /* Layers are held only while a scene is on screen (.on, set by app.js); text that scales is never promoted, so it stays sharp. */
  .hero.live.on .frame, .owed.live.on .states li, .much.live.on .fill, .much.live.on .mover, .much.live.on .band,
  .how.live.on .deck .card, .private.live.on .lines li { will-change: transform, opacity; }
  .scene.live .stack { position: absolute; inset: 0; padding-bottom: calc(100vh - 100vh); padding-bottom: calc(100lvh - 100svh); min-height: 0; }

  /* Hero: the frame climbs away; the 3D plane behind it is drawn by jet.js */
  .hero.live .pin { padding-bottom: calc(28px + 100vh - 100vh); padding-bottom: calc(28px + 100lvh - 100svh); }
  .hero.live .frame { transform: translate3d(0, calc(var(--p) * -130vh), 0); opacity: calc(1.15 - var(--p) * 1.5); }

  /* I. Late.: the word slides and grows; three states cross-fade in turn (--s0, --s1, --s2 from app.js) */
  .owed.live { --s0: 1; --s1: 0; --s2: 0; }
  .owed.live .stack { display: grid; align-content: center; }
  .owed.live .word { transform-origin: 0 50%; transform: translate3d(calc(3vw - var(--p) * 6vw), 0, 0) scale(calc(.86 + var(--p) * .16)); }
  .owed.live .states { position: relative; display: block; min-height: 9.5em; }
  .owed.live .states li { position: absolute; inset: 0 0 auto 0; }
  .owed.live .states li:nth-child(1) { opacity: var(--s0); transform: translate3d(0, calc((1 - var(--s0)) * 28px), 0); }
  .owed.live .states li:nth-child(2) { opacity: var(--s1); transform: translate3d(0, calc((1 - var(--s1)) * 28px), 0); }
  .owed.live .states li:nth-child(3) { opacity: var(--s2); transform: translate3d(0, calc((1 - var(--s2)) * 28px), 0); }
  .owed.live .aside { margin-top: 12px; opacity: calc(1 - var(--s2)); } /* said of delays and cancellations only: gone while Bumped is on */

  /* II. How much: a plane crosses the line, the figures switch at 1,500 km and 3,500 km */
  .much.live { --s0: 1; --s1: 0; --s2: 0; }
  .much.live .route { display: block; }
  .much.live .fill { transform: scaleX(var(--p)); transform-origin: 0 50%; }
  .much.live .mover { justify-content: flex-start; transform: translate3d(calc(var(--p) * (100% - var(--jw))), 0, 0); }
  .much.live .bands { position: relative; display: block; height: clamp(5rem, min(22vw, 30vh), 15rem); height: clamp(5rem, min(22vw, 30svh), 15rem); margin-top: 6px; }
  .much.live .band { position: absolute; inset: 0; }
  .much.live .range { margin-bottom: 0; }
  .much.live .eur { position: relative; }
  .much.live .band:nth-child(1) { opacity: var(--s0); }
  .much.live .band:nth-child(2) { opacity: var(--s1); }
  .much.live .band:nth-child(3) { opacity: var(--s2); }
  .much.live .band .fig { transform: translate3d(0, calc((1 - var(--s0)) * 24px), 0); }
  .much.live .band:nth-child(2) .fig { transform: translate3d(0, calc((1 - var(--s1)) * 24px), 0); }
  .much.live .band:nth-child(3) .fig { transform: translate3d(0, calc((1 - var(--s2)) * 24px), 0); }

  /* III. How it works: three cards fan up from below */
  .how.live .stack { inset: 0 0 auto 0; padding-bottom: 0; }
  .how.live .deck { position: absolute; left: 0; right: 0; bottom: calc(3vh + 100vh - 100vh); bottom: calc(3svh + 100lvh - 100svh); display: block; height: min(54vh, 540px); height: min(54svh, 540px); padding: 0 var(--gut); }
  .how.live .deck .card { position: absolute; bottom: 0; left: 50%; width: min(30vw, 470px); height: min(52vh, 500px); height: min(52svh, 500px); min-height: 0; margin-left: calc(min(30vw, 470px) / -2); transform-origin: 50% 112%; overflow: hidden; }
  .how.live .c1 { --r: -8deg; --x: -30vw; --c: clamp(0, calc((var(--p) - .12) * 3.4), 1); }
  .how.live .c2 { --r: 1.5deg; --x: 0vw; --c: clamp(0, calc((var(--p) - .34) * 3.4), 1); height: min(62vh, 580px); height: min(62svh, 580px); }
  .how.live .c3 { --r: 8deg; --x: 30vw; --c: clamp(0, calc((var(--p) - .56) * 3.4), 1); }
  .how.live .deck .card { transform: translate3d(calc(var(--x) * .9), calc((1 - var(--c)) * 115vh), 0) rotate(calc(var(--r) + (1 - var(--c)) * -9deg)); }
  .how.live h2 { font-size: clamp(2.4rem, 8vw, 7rem); font-size: clamp(2.4rem, min(8vw, 9vh), 7rem); font-size: clamp(2.4rem, min(8vw, 9svh), 7rem); }
  .how.live .deck .card { padding: clamp(16px, 2.4vw, 32px); }
  .how.live .paper { margin-top: 10px; padding: 10px 14px; font-size: .78rem; font-size: clamp(.62rem, 1.5vh, .8rem); font-size: clamp(.62rem, 1.5svh, .8rem); }
  .how.live .no { font-size: clamp(2.6rem, 5vw, 4.4rem); font-size: clamp(2rem, 6vh, 4.4rem); font-size: clamp(2rem, 6svh, 4.4rem); }
  .how.live .deck h3 { margin-top: 10px; font-size: clamp(1.6rem, 4.2vh, 2.8rem); font-size: clamp(1.6rem, 4.2svh, 2.8rem); }

  /* Free. Private.: the statements appear one after another */
  .private.live .huge { transform: translate3d(0, calc(var(--p) * -3vh), 0); transform: translate3d(0, calc(var(--p) * -3svh), 0); }
  .private.live .lines li { opacity: var(--r); transform: translate3d(0, calc((1 - var(--r)) * 36px), 0); }
  .private.live .lines li:nth-child(1) { --r: clamp(0, calc((var(--p) - .08) * 7), 1); }
  .private.live .lines li:nth-child(2) { --r: clamp(0, calc((var(--p) - .26) * 7), 1); }
  .private.live .lines li:nth-child(3) { --r: clamp(0, calc((var(--p) - .44) * 7), 1); }
  .private.live .lines li:nth-child(4) { --r: clamp(0, calc((var(--p) - .62) * 7), 1); }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) and (min-width: 900px) {
  /* Wide screens: the scenes run a little longer than on a phone, same proportions */
  .scene.live { --k: 1.25; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) and (max-width: 899px) {
  /* Phones: the cards stack like a deck; each new card covers the last, whose strip (number, title and one line) stays visible */
  .how.live { --step: 96px; --ch: min(37vh, 300px); --ch: min(37svh, 300px); }
  .how.live h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .how.live .deck { height: calc(var(--step) * 2 + var(--ch)); }
  .how.live .deck .card { left: 0; width: auto; right: 0; margin-left: 0; height: var(--ch); bottom: auto; top: calc(var(--i) * var(--step)); transform-origin: 50% 100%; display: block; padding-top: 14px; }
  .how.live .c1 { --i: 0; --r: -2deg; --c: clamp(0, calc((var(--p) - .1) * 4), 1); }
  .how.live .c2 { --i: 1; --r: 1.5deg; --c: clamp(0, calc((var(--p) - .4) * 4), 1); height: var(--ch); }
  .how.live .c3 { --i: 2; --r: -1deg; --c: clamp(0, calc((var(--p) - .7) * 4), 1); }
  .how.live .deck .card { transform: translate3d(0, calc((1 - var(--c)) * 105vh), 0) rotate(calc(var(--r) * var(--c))); }
  .how.live .deck .no, .how.live .deck h3 { display: inline-block; margin: 0 12px 4px 0; vertical-align: baseline; }
  .how.live .deck .no { font-size: 2.2rem; }
  .how.live .deck h3 { font-size: 2rem; }
  .how.live .deck .card > p { margin-top: 0; font-size: 1rem; line-height: 1.25; }
  .how.live .mini, .how.live .paper { margin-top: 30px; } /* below the strip, so a covered card shows no sliver of its body */
  .how.live .mini.slip { padding: 16px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) and (max-height: 700px) and (max-width: 899px) {
  /* Short phones (about 640 to 700 px high): a tighter deck, so it never runs into the heading */
  .how.live { --step: 84px; --ch: 33vh; --ch: 33svh; }
  .how.live h2 { font-size: 1.8rem; }
  .how.live .mini, .how.live .paper { margin-top: 20px; }
}
/* The moving line of airlines: slow, and it stops on hover, on keyboard focus, on the Pause button, and always under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* The padding sits on .marquee and the spacing on each item, so half the track is exactly one period and the loop never snaps. */
  .marquee.live .track { flex-wrap: nowrap; gap: 0; width: max-content; animation: slide 80s linear infinite; }
  .marquee.live li { flex: none; margin-right: .5em; }
  .marquee.live:hover .track, .marquee.live:focus-within .track, .marquee.live.paused .track { animation-play-state: paused; }
  .marquee.live:not(.on) .track { animation-play-state: paused; }
  @keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}

/* Refusal pages */
.verdict { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 700; }
.verdict.strong { color: #7fd8a4; }
.verdict.mixed { color: #ffb35c; }
.verdict.weak { color: #ff8f85; }
.inner .card ul.rulings, .inner .card ul.excuses { list-style: none; padding: 0; }
.inner .card ul.rulings li, .inner .card ul.excuses li { padding: 12px 0; border-top: 1px solid var(--line); }
.excuses .hint { display: block; }
#hits { margin-top: 18px; }