/* Kepler Lines | mission control meets Swiss modernism */
:root {
  --f-disp: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gut: 16px;
  --max: 1320px;
  --head: 64px;
  --r: 3px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #04070d;
  --bg-2: #0a1019;
  --bg-3: #101826;
  --ink: #e7eef5;
  --ink-2: #9aabbd;
  --ink-3: #6f8296;
  --line: rgba(231, 238, 245, .13);
  --line-2: rgba(231, 238, 245, .3);
  --accent: #ff6b1f;
  --accent-ink: #ff7d36;
  --on-accent: #070a10;
  --focus: #ffb27f;
  --err: #ff8f7a;
  --flap-bg: #1c2840;
  --flap-edge: #000;
  --flap-ink: #f1f5f9;
  --board-bg: #070b12;
  --grid: rgba(231, 238, 245, .035);
  --pass-bg: #e9eff4;
  --pass-ink: #1c2026;
  --pass-muted: #555c66;
  --pass-line: rgba(28, 32, 38, .2);
  --pass-accent: #c2410c;
  --hatch: rgba(231, 238, 245, .16);
  --pl-ocean: #143457;
  --pl-deep: #06142a;
  --pl-land: #47554a;
  --pl-high: #8f8775;
  --pl-cloud: #e7eef5;
  --pl-rim: #6fa8ff;
  --pl-night: #010309;
  --pl-line: #cfdbe7;
  --pl-star: #dce6f1;
  --pl-panel: #7d93ab;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3efe6;
  --bg-2: #fbf9f4;
  --bg-3: #ebe6da;
  --ink: #22252a;
  --ink-2: #565a61;
  --ink-3: #63666b;
  --line: rgba(34, 37, 42, .16);
  --line-2: rgba(34, 37, 42, .38);
  --accent: #c2410c;
  --accent-ink: #b03a09;
  --on-accent: #ffffff;
  --focus: #b03a09;
  --err: #a32a12;
  --flap-bg: #26292e;
  --flap-edge: #0d0f12;
  --flap-ink: #f6f3ec;
  --board-bg: #e8e3d7;
  --grid: rgba(34, 37, 42, .055);
  --pass-bg: #ffffff;
  --pass-ink: #22252a;
  --pass-muted: #565a61;
  --pass-line: rgba(34, 37, 42, .2);
  --pass-accent: #c2410c;
  --hatch: rgba(34, 37, 42, .2);
  --pl-ocean: #6d8ea8;
  --pl-deep: #4f7090;
  --pl-land: #cbbb95;
  --pl-high: #a48f6c;
  --pl-cloud: #ffffff;
  --pl-rim: #a9cbea;
  --pl-night: #5b7895;
  --pl-line: #22252a;
  --pl-star: #3a3e45;
  --pl-panel: #22252a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 720px) { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 56px; } }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 12px 16px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; height: var(--head); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand-mark { width: 30px; height: 30px; }
.bm-planet { fill: var(--ink); }
.bm-orbit { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.bm-craft { fill: var(--accent); }
.brand-word { font: 800 26px/1 var(--f-disp); letter-spacing: .01em; }
.nav { margin-left: auto; display: none; gap: 4px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--ink-2); padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--ink); }
.theme-btn { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); background: transparent; border-radius: 50%; cursor: pointer; }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.theme-btn .ico-moon { display: none; }
:root[data-theme="light"] .theme-btn .ico-sun { display: none; }
:root[data-theme="light"] .theme-btn .ico-moon { display: block; }
.theme-btn:hover { border-color: var(--ink); }
@media (min-width: 820px) { .nav { display: flex; } .theme-btn { margin-left: 8px; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: 600 16px/1.1 var(--f-sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-quiet:hover { border-color: var(--ink); }
.btn:disabled { cursor: progress; opacity: .7; }
.btn.is-wait { background: transparent; color: var(--ink); border-color: var(--accent); }
.btn.is-busy::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(min(100svh, 940px) - var(--head)); display: flex; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
:root[data-theme="dark"] .hero::before { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 60%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 30% 60%, #000 20%, transparent 80%); }
.hero-stage { position: absolute; inset: 0; z-index: -1; }
#scene { width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity .8s; }
.is-ready #scene { opacity: 1; }
#scene.is-over { cursor: grab; }
#scene.is-grab { cursor: grabbing; }
/* still picture of the globe: shown while the maps load and when WebGL is not available */
.hero-stage .still { position: absolute; width: 276px; height: 276px; left: calc(50% - 120px); top: 58px; transition: opacity .8s; pointer-events: none; }
.hero:has(.no-webgl) .globe-ui { display: none; }
@media (min-width: 760px) { .hero-stage .still { width: min(46vw, 600px); height: auto; aspect-ratio: 1; left: auto; right: 4%; transform: translateY(-50%); top: 50%; } }
.is-ready .still { opacity: 0; }
.no-webgl #scene, .no-webgl .marks, .no-webgl .mk-card { display: none; }
.no-webgl .still { opacity: 1; }

/* markers over the globe (pointer and touch enhancement; the board is the accessible control) */
.marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mk { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: auto; cursor: pointer; transition: opacity .25s; will-change: transform; }
.mk-dot { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.mk-dot::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 4px var(--ink); }
.mk-pad .mk-dot::before, .mk.is-on .mk-dot::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 4px var(--accent); }
.mk-label { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); font: 500 12.5px/1 var(--f-mono); color: var(--ink); background: color-mix(in srgb, var(--bg) 78%, transparent); padding: 5px 7px; border-radius: 3px; white-space: nowrap; }
.mk.is-left .mk-label { left: auto; right: 34px; }
.mk.is-quiet .mk-label { opacity: 0; }
.mk.is-dim { opacity: .5; }
.mk.is-dim:hover { opacity: 1; }
.mk.is-quiet:hover .mk-label { opacity: 1; z-index: 2; }
.mk-lun .mk-dot::before { width: 10px; height: 10px; background: transparent; box-shadow: 0 0 0 2px var(--ink); }
.mk.is-hidden, .mk.is-hidden.is-dim { opacity: 0; pointer-events: none; }
.mk:hover .mk-label { background: var(--ink); color: var(--bg); }
.mk-card { position: absolute; z-index: 3; width: 248px; padding: 0 0 14px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); overflow: hidden; pointer-events: auto; }
.mk-card[hidden] { display: none; }
.mkc-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 10px; }
.mkc-title { padding: 14px 14px 0; font: 700 24px/1 var(--f-disp); }
.mkc-img + .mkc-title { padding-top: 0; }
.mkc-line { padding: 6px 14px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.mkc-go { margin: 12px 14px 0; width: calc(100% - 28px); min-height: 44px; }

/* globe caption, zoom buttons and the honest credit */
.globe-ui { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -6px; }
.globe-cap { font: 400 13px/1.4 var(--f-mono); color: var(--ink-2); max-width: 36ch; }
.globe-ctl { display: flex; gap: 6px; flex: none; }
.g-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); cursor: pointer; }
.g-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.g-btn:hover { border-color: var(--ink); }
.hero-credit { font: 400 12.5px/1.4 var(--f-mono); color: var(--ink-2); margin-top: -18px; }
.hero-in { pointer-events: none; }
.hero-copy, .readout, .globe-ui, .hero-credit { pointer-events: auto; }
@media (min-width: 760px) {
  .globe-ui { position: absolute; right: var(--gut); top: 28px; margin: 0; flex-direction: row-reverse; align-items: center; text-align: right; gap: 18px; }
  .globe-cap { max-width: 34ch; }
  .hero-credit { text-align: right; margin-top: -20px; }
}
.hero-in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 340px; padding-bottom: 24px; gap: 32px; }
.hero-in::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 330px; z-index: -1; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 78%, transparent) 28%, var(--bg) 70%); pointer-events: none; }
.hero-copy { max-width: 640px; }
.hero-title { font: 800 clamp(64px, 17vw, 176px)/.84 var(--f-disp); letter-spacing: -.012em; text-transform: none; max-width: 8.4ch; text-wrap: balance; }
.hero-lede { margin-top: 26px; max-width: 46ch; font-size: 17px; color: var(--ink-2); }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.readout { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.ro-cell { padding: 14px 14px 4px 0; }
.ro-cell + .ro-cell { padding-left: 14px; border-left: 1px solid var(--line); }
.ro-next { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.ro-next + .ro-cell { border-left: 0; padding-left: 0; }
.readout dt { font: 400 13px/1.3 var(--f-mono); color: var(--ink-2); }
.readout dd { margin: 4px 0 0; font: 400 14px/1.2 var(--f-mono); color: var(--ink-2); }
.ro-big { font: 700 34px/1 var(--f-disp); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ro-code { font: 500 14px/1 var(--f-mono); color: var(--accent-ink); margin-right: 6px; }
.ro-next .ro-big { white-space: nowrap; }
@media (min-width: 760px) {
  .hero-in { padding-top: 120px; justify-content: center; padding-bottom: 64px; }
  .hero-in::before { display: none; }
  .hero-copy { margin-top: auto; }
  .hero-title { font-size: clamp(88px, 9.6vw, 148px); }
  .hero-lede { font-size: 18px; }
  .readout { grid-template-columns: 1.6fr 1fr 1fr; margin-top: auto; }
  .ro-next { grid-column: auto; border-bottom: 0; padding-bottom: 4px; }
  .ro-next + .ro-cell { border-left: 1px solid var(--line); padding-left: 14px; }
  .ro-big { font-size: 40px; }
}

/* ---------- sections ---------- */
.sec-head { display: grid; gap: 10px; margin-bottom: 28px; }
.sec-title { font: 800 clamp(52px, 12vw, 104px)/.88 var(--f-disp); letter-spacing: -.005em; }
.sec-note { color: var(--ink-2); max-width: 52ch; }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; margin-bottom: 36px; }
  .sec-note { justify-self: end; text-align: left; }
}
.board-sec, .book-sec, .shows-sec { padding: 72px 0; }
@media (min-width: 900px) { .board-sec, .book-sec, .shows-sec { padding: 112px 0; } }

/* ---------- launch board ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); background: transparent; border-radius: 22px; font-size: 15px; cursor: pointer; color: var(--ink-2); }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.board { background: var(--board-bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.board-head { display: none; }
.board-rows { list-style: none; margin: 0; padding: 0; }
.board-rows li + li { border-top: 1px solid var(--line); }
.row { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; text-align: left; padding: 14px 36px 14px 12px; background: transparent; border: 0; cursor: pointer; position: relative; }
.row::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform .2s; }
.row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.row.is-chosen::before { transform: scaleY(1); }
.c-date { flex-basis: 100%; }
.c-left { display: flex; align-items: center; gap: 6px; } .c-fare { margin-left: auto; }
.c-go { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.c-left::after { content: 'left' / ''; font: 400 12px/1 var(--f-mono); color: var(--ink-2); }
.flap { display: inline-block; }
.tiles { display: inline-flex; gap: 2px; }
.t { position: relative; display: inline-grid; place-items: center; width: 1.08em; height: 1.66em; font: 500 11.5px/1 var(--f-mono); color: var(--flap-ink); background: linear-gradient(var(--flap-bg) 0 49%, color-mix(in srgb, var(--flap-bg) 80%, #fff 6%) 51% 100%); border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); }
.t::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--flap-edge); opacity: .45; }
.t-sp { background: transparent; box-shadow: none; width: .55em; }
.t-sp::after { display: none; }
.t.spin { color: color-mix(in srgb, var(--flap-ink) 70%, transparent); }
.c-left.is-low .t { color: var(--accent); }
:root[data-theme="light"] .c-left.is-low .t { color: #ff9a5c; }
.c-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 10px; font: 500 14px/1 var(--f-sans); color: var(--ink-2); }
.c-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.c-go .go-txt { display: none; }
.row:hover .c-go, .row.is-chosen .c-go { color: var(--accent-ink); }
.board-foot { padding: 14px 12px; border-top: 1px solid var(--line); font: 400 13px/1.4 var(--f-mono); color: var(--ink-2); }
@media (min-width: 980px) {
  .board { padding: 0; }
  .board-head, .row { grid-template-columns: 84px 236px 254px 136px 84px 120px 1fr; grid-template-areas: none; gap: 24px; padding: 0 22px; }
  .board-head span { white-space: nowrap; }
  .board-head { display: grid; padding-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font: 400 13px/1.2 var(--f-mono); color: var(--ink-2); }
  .row { display: grid; min-height: 64px; }
  .c-date { flex-basis: auto; }
  .c-fare { margin-left: 0; }
  .c-go { position: static; transform: none; }
  .c-left::after { content: none; }
  .t { font-size: 13px; width: 1.14em; height: 1.7em; }
  .c-go { justify-self: end; }
  .c-go .go-txt { display: inline; }
  .board-foot { padding: 14px 22px; }
}

/* ---------- booking ---------- */
.stepper { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 6px; border-top: 1px solid var(--line-2); }
.stepper li { position: relative; padding-top: 12px; display: flex; flex-direction: column; gap: 2px; color: var(--ink-3); }
.stepper li::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; }
.stepper li.is-done::before { background: var(--ink); }
.stepper li[aria-current="step"]::before { background: var(--accent); }
.st-n { font: 700 26px/1 var(--f-disp); }
.st-l { font: 400 10.5px/1.2 var(--f-mono); overflow: hidden; text-overflow: ellipsis; }
.stepper li.is-done, .stepper li[aria-current="step"] { color: var(--ink); }
.stepper li[aria-current="step"] .st-n { color: var(--accent-ink); }
.stepper.is-complete li::before { background: var(--accent); }
@media (min-width: 720px) { .st-n { font-size: 32px; } .st-l { font-size: 14px; } }

.book-grid { display: grid; gap: 28px; }
@media (min-width: 1040px) { .book-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; } }
.book-main:focus { outline: none; }
.step { display: block; }
.step[hidden] { display: none; }
.step-title { font: 700 clamp(32px, 6vw, 44px)/1 var(--f-disp); letter-spacing: .005em; }
.step-title:focus { outline: none; }
.step-title:focus-visible { outline: 2px solid var(--focus); }
.step-sub { margin-top: 10px; color: var(--ink-2); max-width: 62ch; }
.step-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.step-actions .btn-primary { margin-left: auto; }
@media (max-width: 520px) { .step-actions { flex-direction: column-reverse; } .step-actions .btn { width: 100%; margin-left: 0; } }

.step-empty { padding: 40px 24px; border: 1px dashed var(--line-2); border-radius: 6px; display: grid; gap: 14px; justify-items: start; }
.step-empty p { color: var(--ink-2); max-width: 52ch; }
.empty-art { width: 160px; height: 80px; margin-bottom: 4px; }
.ea-ground { stroke: var(--ink-2); stroke-width: 1.2; }
.ea-path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ea-dot { fill: var(--accent); }
.ea-pad { fill: none; stroke: var(--ink); stroke-width: 1.4; }

/* fares */
.fares { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
/* destination photo (fare step) */
.dest { margin: 22px 0 0; display: grid; gap: 14px; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--bg-2); }
.dest-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #05070c; }
.dest-cap { display: grid; gap: 6px; align-content: center; padding: 0 18px 18px; }
.dest-kicker { font: 400 13px/1.2 var(--f-mono); color: var(--ink-2); }
.dest-name { font: 700 34px/1 var(--f-disp); }
.dest-line { color: var(--ink); max-width: 46ch; }
.dest-credit { font: 400 12.5px/1.4 var(--f-mono); color: var(--ink-2); }
@media (min-width: 640px) {
  .dest { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; }
  .dest-cap { padding: 20px 24px; }
}
.fare-list { display: grid; gap: 12px; }
@media (min-width: 760px) { .fare-list { grid-template-columns: repeat(3, 1fr); } }
.fare { position: relative; display: block; cursor: pointer; }
.fare input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fare-in { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "top zone" "per zone" "blurb blurb" "open open"; gap: 4px 12px; height: 100%; padding: 18px 18px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-2); transition: border-color .15s, box-shadow .15s; }
.fare-top { grid-area: top; display: flex; flex-direction: column; gap: 2px; }
.fare-name { font: 700 30px/1 var(--f-disp); }
.fare-price { font: 500 20px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; margin-top: 8px; }
.fare-per { grid-area: per; font: 400 13px/1.2 var(--f-mono); color: var(--ink-2); }
.fare-zone { grid-area: zone; width: 64px; height: 64px; align-self: start; }
.zg-hull { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.zg-core { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.zg-on { fill: var(--accent); }
.zg-off { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.fare-blurb { grid-area: blurb; margin-top: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.fare-open { grid-area: open; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font: 400 13px/1.2 var(--f-mono); color: var(--ink-2); }
.fare:hover input:not(:checked):not(:disabled) + .fare-in { border-color: var(--ink); }
.fare input:checked + .fare-in { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fare input:checked + .fare-in .fare-name { color: var(--accent-ink); }
.fare input:focus-visible + .fare-in { outline: 2px solid var(--focus); outline-offset: 3px; }
.fare input:disabled + .fare-in { opacity: .5; }

/* seats */
.pax-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0 8px; }
.pc-label { font-weight: 600; }
.pc-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 24px; }
.pc-btn { width: 46px; height: 46px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.pc-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.pc-btn:disabled { cursor: not-allowed; opacity: .35; }
#pc-val { min-width: 30px; text-align: center; font: 700 26px/1 var(--f-disp); }
.pc-note { font: 400 13px/1.3 var(--f-mono); color: var(--ink-2); }
.seatmap-wrap { display: grid; gap: 22px; margin-top: 12px; }
@media (min-width: 760px) { .seatmap-wrap { grid-template-columns: minmax(0, 520px) 1fr; align-items: center; gap: 14px 36px; } }
.fwd { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 13px/1 var(--f-mono); color: var(--ink-2); }
.fwd svg { width: 12px; height: 8px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
@media (min-width: 760px) { .fwd { grid-column: 1; grid-row: 1; max-width: 520px; } .seatmap { grid-column: 1; grid-row: 2; } }
.seatmap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; }
.cabin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cb-hull-out { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.cb-hull { fill: var(--bg-2); stroke: var(--ink-2); stroke-width: .8; }
.cb-tick { stroke: var(--ink-2); stroke-width: .8; }
.cb-cupola { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.cb-port { fill: color-mix(in srgb, var(--pl-rim) 35%, var(--bg-2)); stroke: var(--ink-2); stroke-width: 1; }
.cb-aisle { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
.cb-core { fill: var(--bg-3); stroke: var(--ink-2); stroke-width: 1; }
.cb-core-in { fill: none; stroke: var(--line-2); stroke-width: 1; }
.cb-hatch { fill: var(--ink-2); }
.cb-label { font: 500 11px var(--f-mono); fill: var(--ink-2); }
.cb-small { font-size: 9px; }
.seat { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.seat-shape { position: absolute; inset: 5px; border-radius: 10px 10px 14px 14px; border: 1.5px solid var(--ink); background: var(--bg); transition: background-color .12s, transform .12s; }
.seat-id { position: relative; font: 500 11px/1 var(--f-mono); color: var(--ink); }
.seat:hover:not(:disabled) .seat-shape { transform: scale(1.08); border-color: var(--accent); }
.seat.is-sel .seat-shape { background: var(--accent); border-color: var(--accent); }
.seat.is-sel .seat-id { color: var(--on-accent); font-weight: 600; }
.seat.is-taken { cursor: not-allowed; }
.seat.is-taken .seat-shape { border-color: var(--line-2); background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 6px), var(--bg-2); }
.seat.is-taken .seat-id { color: var(--ink-3); text-decoration: line-through; }
.seat.is-other { cursor: not-allowed; }
.seat.is-other .seat-shape { border: 1px dashed var(--line-2); background: transparent; }
.seat.is-other .seat-id { color: var(--ink-3); }
.seat:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 14px; color: var(--ink-2); }
.seat-side { display: grid; gap: 22px; align-content: center; min-width: 0; }
@media (min-width: 760px) { .seat-side { grid-column: 2; grid-row: 2; } .legend { flex-direction: column; } }
/* view from your seat: a real photo through a porthole */
.seatview { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.porthole { position: relative; width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #05070c;
  box-shadow: 0 0 0 6px var(--bg-3), 0 0 0 7px var(--line-2), inset 0 0 18px rgba(0,0,0,.7); }
.porthole::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.18), transparent 34%), radial-gradient(circle, transparent 58%, rgba(0,0,0,.45) 100%); pointer-events: none; }
.sv-img { width: 100%; height: 100%; object-fit: cover; transition: opacity .14s, transform 1.2s; }
.sv-img.is-swap { opacity: 0; }
.seatview[data-zone="C"] .sv-img { object-position: 50% 70%; }
.seatview[data-zone="S"] .porthole { width: 112px; margin: 10px; }
.sv-cap { display: grid; gap: 4px; min-width: 0; }
.sv-head { font: 700 22px/1.05 var(--f-disp); }
.sv-line { font-size: 15px; line-height: 1.45; color: var(--ink); }
.sv-credit { font: 400 12px/1.4 var(--f-mono); color: var(--ink-2); }
@media (min-width: 760px) { .seatview { grid-template-columns: 1fr; justify-items: start; } .porthole { width: 188px; } .seatview[data-zone="S"] .porthole { width: 160px; margin: 14px; } }
.legend li { display: flex; align-items: center; gap: 10px; }
.lg { flex: none; width: 22px; height: 22px; border-radius: 6px 6px 8px 8px; border: 1.5px solid var(--ink); background: var(--bg); }
.lg-sel { background: var(--accent); border-color: var(--accent); }
.lg-taken { border-color: var(--line-2); background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 6px), var(--bg-2); }
.lg-other { border: 1px dashed var(--line-2); background: transparent; }
.lg-window { border-radius: 50%; width: 14px; height: 14px; margin: 0 4px; border: 1px solid var(--ink-2); background: color-mix(in srgb, var(--pl-rim) 35%, var(--bg-2)); }
.seat-status { min-height: 1.5em; margin-top: 14px; font: 400 14px/1.4 var(--f-mono); color: var(--ink-2); }
.seat-status.is-err { color: var(--err); }

/* forms */
.fields { display: grid; gap: 18px 20px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field label { font-size: 15px; font-weight: 500; }
.field input:not([type="checkbox"]), .field select { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--bg-2); color: var(--ink); }
.field input::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--err) !important; }
.field input[id*="num"], .field input[id*="exp"], .field input[id*="cvc"], .field input[id*="dob"] { font-family: var(--f-mono); letter-spacing: .02em; }
.hint { font-size: 14px; color: var(--ink-2); }
.err { font-size: 14px; color: var(--err); min-height: 0; }
.err:empty { display: none; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 400 !important; }
.check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; left: 0; top: 10px; cursor: pointer; }
.check-box { flex: none; width: 26px; height: 26px; border: 1.5px solid var(--line-2); border-radius: 4px; background: var(--bg-2); display: grid; place-items: center; }
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box::after { content: ''; width: 12px; height: 7px; border-left: 2.5px solid var(--on-accent); border-bottom: 2.5px solid var(--on-accent); transform: translateY(-2px) rotate(-45deg); }
.check input:focus-visible + .check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.check input[aria-invalid="true"] + .check-box { border-color: var(--err); }
.muted { color: var(--ink-2); }
.pax { border: 0; border-top: 1px solid var(--line-2); margin: 24px 0 0; padding: 18px 0 0; min-width: 0; }
.pax legend { display: flex; gap: 14px; align-items: baseline; padding: 0 12px 0 0; }
.pax-n { font: 700 24px/1 var(--f-disp); }
.pax-seat { font: 500 14px/1 var(--f-mono); color: var(--accent-ink); }
.pax .fields { margin-top: 12px; }

/* extras */
.extras { display: grid; gap: 12px; margin-top: 22px; }
.extra { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 18px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-2); cursor: pointer; }
.extra input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ex-box { width: 26px; height: 26px; border: 1.5px solid var(--line-2); border-radius: 4px; display: grid; place-items: center; grid-row: span 2; }
.extra input:checked ~ .ex-box { background: var(--accent); border-color: var(--accent); }
.extra input:checked ~ .ex-box::after { content: ''; width: 12px; height: 7px; border-left: 2.5px solid var(--on-accent); border-bottom: 2.5px solid var(--on-accent); transform: translateY(-2px) rotate(-45deg); }
.extra:has(input:checked) { border-color: var(--accent); }
.extra:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.ex-body { display: grid; gap: 4px; }
.ex-name { font-weight: 600; font-size: 17px; }
.ex-desc { font-size: 15px; color: var(--ink-2); max-width: 58ch; }
.ex-price { grid-column: 2; font: 500 15px/1.3 var(--f-mono); }
@media (min-width: 720px) { .extra { grid-template-columns: auto 1fr auto; } .ex-box { grid-row: auto; } .ex-price { grid-column: auto; text-align: right; } }

/* payment */
.demo-note { margin: 16px 0 22px; padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); font-size: 16px; }
.demo-note strong { font-weight: 600; }

/* summary */
.summary { border: 1px solid var(--line-2); border-radius: 6px; padding: 22px; background: var(--bg-2); position: relative; }
.summary::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--accent); border-radius: 6px 6px 0 0; }
@media (min-width: 1040px) { .summary { position: sticky; top: calc(var(--head) + 24px); } }
.sum-title { font: 700 28px/1 var(--f-disp); }
/* route view: a second, smaller globe showing the chosen launch */
.route { margin: 16px -22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #04070d; }
.route[hidden] { display: none; }
.route-stage { position: relative; height: 230px; overflow: hidden; }
#route-scene { width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity .6s; }
.route-stage.is-ready #route-scene { opacity: 1; }
.route-stage .still { position: absolute; height: 86%; width: auto; aspect-ratio: 1; left: 50%; top: 7%; transform: translateX(-50%); transition: opacity .6s; }
.route-stage.is-ready .still { opacity: 0; }
.route-stage.no-webgl #route-scene { display: none; }
.route-stage.no-webgl .still { opacity: 1; }
.route-cap { padding: 10px 22px 12px; font: 400 13px/1.4 var(--f-mono); color: #c3cfdb; background: #04070d; }
@media (min-width: 1040px) { .route-stage { height: 250px; } }
.sum-flight { margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.sum-empty { color: var(--ink-2); font-size: 15px; }
.sum-code { font: 500 14px/1.2 var(--f-mono); color: var(--accent-ink); }
.sum-dest { font: 700 26px/1.05 var(--f-disp); }
.sum-when, .sum-seats { font: 400 14px/1.4 var(--f-mono); color: var(--ink-2); }
.sum-lines { margin: 14px 0 0; display: grid; gap: 10px; }
.sum-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.sum-lines dt { color: var(--ink-2); }
.sum-lines dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.sum-total span:first-child { font-weight: 600; }
#sum-total { font: 800 40px/1 var(--f-disp); font-variant-numeric: tabular-nums; }
.sum-fine { margin-top: 12px; font-size: 13px; color: var(--ink-2); }

/* done + passes */
.done-head { display: grid; gap: 6px; }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.passes { display: grid; gap: 22px; margin-top: 28px; }
.pass { --notch: 13px; position: relative; display: grid; color: var(--pass-ink); background: var(--pass-bg); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); }
:root[data-theme="light"] .pass { box-shadow: 0 0 0 1px var(--pass-line), 0 20px 40px -28px rgba(34,37,42,.45); }
.pass::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 6px; background: var(--pass-accent); }
.pass-main { padding: 26px 20px 20px; display: grid; gap: 18px; background-image: linear-gradient(var(--pass-line) 1px, transparent 1px), linear-gradient(90deg, var(--pass-line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; background-color: var(--pass-bg); }
.pass-main { background-image: linear-gradient(color-mix(in srgb, var(--pass-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pass-ink) 5%, transparent) 1px, transparent 1px); }
/* destination photo behind the brand and the route; a dark scrim keeps the text readable */
.pass-head { position: relative; isolation: isolate; display: grid; gap: 18px; margin: -26px -20px 0; padding: 30px 20px 20px; color: #fff; background: #05080e; overflow: hidden; }
.pass-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.pass-head::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,8,14,.62), rgba(5,8,14,.5) 45%, rgba(5,8,14,.82)); }
.pass-head .pass-kind, .pass-head .pr-sub { color: #e3e9f0; }
.pass .pass-head .bm-planet { fill: #fff; }
.pass .pass-head .bm-orbit { stroke: #fff; }
.pass .pass-head .pr-arc path { stroke: #fff; }
.pass-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pass-brand { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 var(--f-disp); }
.pass-brand svg { width: 24px; height: 24px; }
.pass .bm-planet { fill: var(--pass-ink); }
.pass .bm-orbit { stroke: var(--pass-ink); }
.pass .bm-craft { fill: var(--pass-accent); }
.pass-kind { font: 400 12px/1.2 var(--f-mono); color: var(--pass-muted); text-align: right; }
.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; }
.pr-end { display: grid; gap: 4px; }
.pr-to { text-align: right; }
.pr-code { font: 800 clamp(44px, 12vw, 72px)/.86 var(--f-disp); letter-spacing: -.005em; }
.pr-sub { font: 400 12px/1.2 var(--f-mono); color: var(--pass-muted); }
.pr-mid { position: relative; align-self: center; height: 40px; }
.pr-arc { width: 100%; height: 40px; overflow: visible; }
.pr-dot { position: absolute; left: 50%; top: 26%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--pass-accent); }
.pr-arc path { fill: none; stroke: var(--pass-ink); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pass-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-top: 16px; border-top: 1px solid var(--pass-line); }
.pass-grid dt { font: 400 12px/1.2 var(--f-mono); color: var(--pass-muted); }
.pass-grid dd { margin: 4px 0 0; font: 600 16px/1.25 var(--f-mono); }
.pg-wide { grid-column: 1 / -1; }
.pg-name { font: 600 22px/1.2 var(--f-sans) !important; overflow-wrap: anywhere; }
.pass-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 1px solid var(--pass-line); font: 400 13px/1.2 var(--f-mono); color: var(--pass-muted); }
.pc-time { font: 700 30px/1 var(--f-disp); color: var(--pass-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pass-stub { position: relative; padding: 24px 20px 22px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "seat qr" "ref qr" "dl dl"; gap: 10px 16px; align-items: start; border-top: 2px dashed var(--pass-line); }
.pass-stub::before, .pass-stub::after { content: ''; position: absolute; top: calc(var(--notch) * -1 - 1px); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--bg); }
.pass-stub::before { left: calc(var(--notch) * -1); }
.pass-stub::after { right: calc(var(--notch) * -1); }
.ps-seat { grid-area: seat; display: grid; gap: 2px; }
.ps-l { font: 400 12px/1.2 var(--f-mono); color: var(--pass-muted); display: block; }
.ps-v { font: 800 84px/.85 var(--f-disp); color: var(--pass-accent); }
.qr { grid-area: qr; width: 132px; height: 132px; padding: 0; background: #fff; border-radius: 4px; }
.qr svg { width: 100%; height: 100%; }
.qr-bg { fill: #fff; }
.qr-fg { fill: #15181c; }
.ps-ref { grid-area: ref; margin: 0; }
.ps-refv { font: 700 30px/1 var(--f-disp); letter-spacing: .03em; }
.pass-dl { grid-area: dl; justify-self: stretch; color: var(--pass-ink); border-color: var(--pass-line); margin-top: 6px; }
.pass-dl:hover { border-color: var(--pass-ink); }
@media (min-width: 760px) {
  .pass { grid-template-columns: 1fr 300px; }
  .pass-main { padding: 30px 30px 24px; }
  .pass-head { margin: -30px -30px 0; padding: 36px 30px 26px; }
  .pass-grid { grid-template-columns: repeat(3, 1fr); }
  .pass-stub { border-top: 0; border-left: 2px dashed var(--pass-line); grid-template-columns: 1fr; grid-template-areas: "seat" "qr" "ref" "dl"; padding: 30px 26px 24px; gap: 16px; }
  .pass-stub::before, .pass-stub::after { left: calc(var(--notch) * -1 - 1px); right: auto; }
  .pass-stub::before { top: calc(var(--notch) * -1); }
  .pass-stub::after { top: auto; bottom: calc(var(--notch) * -1); }
  .qr { width: 148px; height: 148px; }
}

/* ---------- shows ---------- */
.shows-sec { border-top: 1px solid var(--line); }
.shows-in { display: grid; gap: 28px; }
@media (min-width: 900px) { .shows-in { grid-template-columns: 5fr 7fr; gap: 56px; } }
.shows-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.shows-list li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 66ch; }
.shows-list li:last-child { border-bottom: 1px solid var(--line); }
.shows-list strong { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
.foot { padding: 32px 0 88px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.foot-in { display: grid; gap: 8px; }
.foot-mono { font-family: var(--f-mono); font-size: 13px; }
@media (min-width: 720px) { .foot-in { grid-template-columns: 1fr auto; } .foot { padding-bottom: 40px; } }

/* toast: bottom right, clear of the demo chip */
.toast { position: fixed; right: 12px; bottom: 60px; z-index: 60; max-width: min(340px, calc(100vw - 24px)); padding: 12px 16px; background: var(--ink); color: var(--bg); border-radius: 4px; font-size: 15px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: none; }
@media (min-width: 720px) { .toast { bottom: 12px; } }

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

/* ---------- print: only the boarding passes ---------- */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #fff; --pass-bg: #fff; --pass-ink: #000; --pass-muted: #333; --pass-line: #999; --pass-accent: #c2410c; }
  body { background: #fff; color: #000; }
  .top, .hero, .board-sec, .shows-sec, .foot, .stepper, .summary, .book-sec .sec-head, .done-head, .toast, .pass-dl, .skip { display: none !important; }
  .book-sec { padding: 0; }
  .book-grid { display: block; }
  .passes { margin: 0; gap: 12mm; }
  .pass { grid-template-columns: 1fr 70mm; box-shadow: none; border: 1px solid #000; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pass-stub { border-top: 0; border-left: 2px dashed #999; grid-template-columns: 1fr; grid-template-areas: "seat" "qr" "ref"; }
  .pass-stub::before, .pass-stub::after { display: none; }
  .pass-grid { grid-template-columns: repeat(3, 1fr); }
}