:root {
  --slate: #30343d;
  --teal: #06bfc7;
  --coral: #ea6854;
  --amber: #f6b04a;
  --gold: #fcb52f;
  --magenta: #b8338f;
  --wood: #d9b27a;
  --ink: #f4f5f7;
  --muted: #9aa1ad;
  --strip: #22262d;
  --card: #272b33;
  --board: #15181c;
  --display: "Manrope", system-ui, sans-serif;
  --body: "Mulish", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  --strip-h: clamp(200px, 20vh, 280px);
  --flight-tab-h: 42px;
  --progress-ahead: #4d5561;
  --progress-now: #fcb52f;
  --progress-done: #9a6f22;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--slate);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.overlay-scroll-lock {
  overflow: hidden;
  height: 100%;
  scrollbar-gutter: stable;
}

html.overlay-scroll-lock--fixed body {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

html.overlay-scroll-lock--pin body {
  overflow: hidden;
}

.progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: 28px;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

body[data-frame="hero"] .progress,
body[data-frame="mission"] .progress {
  display: none;
}

.progress__section {
  display: none;
  flex: 1 1 100%;
  height: 28px;
  align-items: flex-end;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  pointer-events: auto;
}

.progress__section.is-active {
  display: flex;
}

.progress__hit {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  appearance: none;
  -webkit-appearance: none;
}

.progress__hit:disabled {
  cursor: default;
}

.progress__block {
  display: block;
  width: 100%;
  height: 5px;
  margin-bottom: 1px;
  border-radius: 0;
  background: var(--progress-ahead);
  transition: background-color 240ms ease;
}

.progress__hit.is-now .progress__block {
  background: var(--progress-now);
}

.progress__hit.is-done .progress__block {
  background: var(--progress-done);
}

.progress__hit:focus {
  outline: none;
}

.progress__hit:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.jump-veil {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--slate);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.jump-veil.is-on {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .jump-veil {
    transition: none;
  }
}

.hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font: 700 12px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.4s;
}

.hint span {
  display: inline-block;
  animation: nudge 1.6s ease-in-out infinite;
}

.cypher {
  position: fixed;
  top: 24px;
  left: 80px;
  z-index: 70;
  display: flex;
  height: 44px;
  width: auto;
  visibility: hidden;
  pointer-events: none;
  opacity: 1;
  transition: none;
}

.cypher img {
  display: block;
  height: 44px;
  width: auto;
}

body[data-frame]:not([data-frame="hero"]):not([data-frame="cta"]) .cypher {
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage.in-space) .cypher,
body[data-frame^="orbit-"] .cypher {
  opacity: 0.7;
}

.burger {
  position: fixed;
  top: 24px;
  right: 80px;
  z-index: 90;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
}

.burger__bars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 44px;
  margin: 0 0 0 auto;
}

.burger__bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 0;
}

.burger__bar--1 {
  width: 22px;
}

.burger__bar--2 {
  width: 16px;
}

.burger__bar--3 {
  width: 10px;
  background: var(--gold);
}

.burger,
.cypher,
.flight-log__close,
.flight-log__item,
.flight-log__cta {
  -webkit-tap-highlight-color: transparent;
}

.burger:focus,
.cypher:focus,
.flight-log__item:focus,
.flight-log__cta:focus {
  outline: none;
}

.burger:focus-visible,
.cypher:focus-visible,
.flight-log__close:focus-visible,
.flight-log__item:focus-visible,
.flight-log__cta:focus-visible,
.mission-row:focus-visible,
.hero-cue:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.flight-log {
  position: fixed;
  inset: 0;
  z-index: 80;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #15181c;
  color: var(--ink);
  overscroll-behavior: contain;
  --flight-log-pad-x: 56px;
  --flight-log-pad-y: 56px;
}

.flight-log[hidden] {
  display: none;
}

body.log-open .burger,
body.log-open .cypher {
  visibility: hidden;
}

.flight-log__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  background: #15181c;
  padding: var(--flight-log-pad-y) var(--flight-log-pad-x);
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  --flight-log-section-gap: 40px;
  --flight-log-tick: 27px;
  --flight-log-tick-gap: 3px;
  --flight-log-journey-ticks-width: calc(5 * var(--flight-log-tick) + 4 * var(--flight-log-tick-gap));
}

.flight-log__close {
  position: fixed;
  top: 44px;
  right: var(--flight-log-pad-x);
  z-index: 91;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b929e;
  font: 400 32px/1 var(--mono);
  cursor: pointer;
}

.flight-log__close:hover {
  color: var(--ink);
}

.flight-log__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 0 0 var(--flight-log-section-gap);
}

.flight-log__title {
  margin: 0;
  flex: 0 0 auto;
  font: 400 13px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fcb52f;
}

.flight-log__rule {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: rgba(244, 245, 247, 0.12);
}

.flight-log__head-end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  min-width: var(--flight-log-journey-ticks-width);
  max-width: 100%;
  justify-content: flex-end;
}

.flight-log__at {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9aa1ad;
  white-space: nowrap;
}

.flight-log__head-end-rule {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background: rgba(244, 245, 247, 0.12);
}

.flight-log__home {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
  white-space: nowrap;
}

.flight-log__home:hover {
  color: #f4f5f7;
}

a.flight-log__home {
  text-decoration: none;
}

a.flight-log__home:hover {
  text-decoration: none;
}

.flight-log__home:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.flight-log__head .flight-log__ticks {
  display: none;
}

.flight-log__body {
  display: flex;
  align-items: stretch;
  gap: 56px;
  flex: 1 1 auto;
  min-height: 0;
}

.flight-log__col--left,
.flight-log__col--journey {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.flight-log__col--right,
.flight-log__col--routes {
  flex: 0 0 600px;
  width: 600px;
  max-width: 42%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.flight-log__divider {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: rgba(244, 245, 247, 0.1);
}

.flight-log__group--journey > .flight-log__heading {
  padding: 0 0 10px;
}

.flight-log__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  margin: 0;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.flight-log__heading > span {
  grid-column: 1;
  min-width: 0;
}

.flight-log__heading > .flight-log__ticks {
  grid-column: 2;
  justify-self: end;
}

.flight-log__group--journey {
  margin-top: 0;
}

.flight-log__heading--journey {
  color: var(--teal);
}

.flight-log__heading-short {
  display: none;
}

.flight-log__label-short {
  display: none;
}

.flight-log__desc-short {
  display: none;
}

.flight-log__heading--amber {
  color: #f6b04a;
}

.flight-log__heading--coral {
  color: var(--coral);
}

.flight-log__heading--gold {
  color: var(--gold);
}

.flight-log__ticks {
  display: flex;
  gap: var(--flight-log-tick-gap);
  flex: 0 0 auto;
  width: auto;
  height: 5px;
}

.flight-log__tick {
  flex: 0 0 var(--flight-log-tick);
  width: var(--flight-log-tick);
  min-width: var(--flight-log-tick);
  height: 5px;
  border-radius: 0;
  background: var(--progress-ahead);
  transition: background-color 240ms ease;
}

.flight-log__tick.is-now {
  background: var(--progress-now);
}

.flight-log__tick.is-done {
  background: var(--progress-done);
}

.flight-log__journey,
.flight-log__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flight-log__item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid rgba(244, 245, 247, 0.08);
  border-radius: 0;
  background: transparent;
  color: #c3c9d3;
  font: 700 21px/1.15 var(--display);
  text-align: left;
  cursor: pointer;
}

.flight-log__journey li:last-child .flight-log__item,
.flight-log__group ul li:last-child .flight-log__item {
  border-bottom: 1px solid rgba(244, 245, 247, 0.08);
}

.flight-log__grow {
  flex: 1;
}

.flight-log__label {
  min-width: 0;
}

.flight-log__desc {
  font: 400 15px/1.3 var(--body);
  color: #6f7885;
  font-weight: 400;
  text-align: right;
}

.flight-log__num {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0;
  color: #6f7885;
  width: 26px;
  flex: 0 0 26px;
}

.flight-log__item.is-done .flight-log__num {
  color: #fcb52f;
  opacity: 0.55;
}

.flight-log__here {
  display: none;
  flex: 0 0 auto;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.flight-log__here-short {
  display: none;
}

.flight-log__item.is-current,
.flight-log__item.is-now {
  min-height: 56px;
  padding: 0 20px 0 17px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  border-top-color: rgba(252, 181, 47, 0.3);
  border-left: 3px solid #fcb52f;
  background: rgba(252, 181, 47, 0.09);
  color: #f4f5f7;
  font-weight: 800;
}

.flight-log__item.is-current .flight-log__num,
.flight-log__item.is-now .flight-log__num {
  color: #fcb52f;
  opacity: 1;
}

.flight-log__item.is-current .flight-log__desc,
.flight-log__item.is-now .flight-log__desc {
  display: none;
}

.flight-log__item.is-current .flight-log__here,
.flight-log__item.is-now .flight-log__here {
  display: inline;
}

.flight-log__item:hover:not(:disabled):not(.is-current):not(.is-now) .flight-log__label {
  color: #f4f5f7;
}

.flight-log__item:disabled {
  opacity: 0.45;
  cursor: default;
}

.flight-log__item--row {
  font-size: 21px;
  gap: 16px;
}

.flight-log__item--journey {
  gap: 20px;
}

.flight-log__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
  background: #f6b04a;
}

.flight-log__item--coral .flight-log__dot {
  background: var(--coral);
}

.flight-log__item--gold .flight-log__dot {
  background: var(--gold);
}

.flight-log__item--feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-top: 13px;
  padding-bottom: 13px;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.05;
  color: #f4f5f7;
}

.flight-log__item--feature.is-current,
.flight-log__item--feature.is-now {
  padding: 13px 0 13px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 7px;
}

.flight-log__item--feature.is-current .flight-log__label,
.flight-log__item--feature.is-now .flight-log__label {
  grid-column: 1;
  grid-row: 1;
}

.flight-log__item--feature.is-current .flight-log__here,
.flight-log__item--feature.is-now .flight-log__here {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}

.flight-log__item--feature.is-current .flight-log__sub,
.flight-log__item--feature.is-now .flight-log__sub {
  grid-column: 1 / -1;
  grid-row: 2;
}

.flight-log__group .flight-log__item--row {
  color: #f4f5f7;
}

.flight-log__sub {
  font: 400 15px/1.4 var(--body);
  color: #9aa1ad;
  font-weight: 400;
}

.flight-log__group {
  margin: 0;
}

.flight-log__col .flight-log__group + .flight-log__group {
  margin-top: var(--flight-log-section-gap);
}

.flight-log__ops-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  margin: 0;
  padding: 11px 20px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(6, 191, 199, 0.09);
}

.flight-log__ops-band-label {
  grid-column: 1;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5fd4d9;
}

.flight-log__ops-band-sub {
  grid-column: 2;
  margin: 0;
  font: 400 15px/1.35 var(--body);
  color: #9aa1ad;
  text-align: right;
}

.flight-log__ops-band-sub--full {
  display: none;
}

.flight-log__ops-band-sub--short {
  display: none;
}

.flight-log__ops-band .flight-log__ticks {
  grid-column: 3;
  justify-self: end;
}

.flight-log__item--edge-teal {
  padding-left: 17px;
  border-left: 3px solid #06bfc7;
}

.flight-log__item--edge-coral {
  padding-left: 17px;
  border-left: 3px solid #ea6854;
}

.flight-log__item--edge-teal.is-current,
.flight-log__item--edge-teal.is-now,
.flight-log__item--edge-coral.is-current,
.flight-log__item--edge-coral.is-now {
  border-left-color: #fcb52f;
}

.flight-log__loop {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  font: 400 13px/1 var(--mono);
  color: #06bfc7;
  text-decoration: none;
  border-radius: 2px;
}

.flight-log__loop:hover,
.flight-log__loop:focus-visible {
  color: #f4f5f7;
  background: rgba(6, 191, 199, 0.14);
  outline: none;
}

.flight-log__loop-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #30343d;
  border: 1px solid rgba(6, 191, 199, 0.35);
  color: #f4f5f7;
  font: 400 11px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 2;
}

.flight-log__loop:hover .flight-log__loop-tip,
.flight-log__loop:focus-visible .flight-log__loop-tip {
  opacity: 1;
}

.flight-log__item--has-loop {
  gap: 10px;
}

.flight-log__item-hit {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: inherit;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.flight-log__item-hit:disabled {
  opacity: 1;
  cursor: default;
}

.flight-log__item--has-loop:hover:not(:has(.flight-log__item-hit:disabled)):not(.is-current):not(.is-now) .flight-log__label,
.flight-log__item-hit:hover:not(:disabled) .flight-log__label {
  color: #f4f5f7;
}

@media (max-width: 1350px) {
  .flight-log__desc-plan {
    display: none;
  }
}

.flight-log__item--panel {
  align-items: flex-start;
  gap: 16px;
  min-height: auto;
  padding: 14px 20px 16px;
  font-weight: 800;
  color: #f4f5f7;
}

.flight-log__item--panel .flight-log__dot {
  margin-top: 9px;
}

.flight-log__item--panel .flight-log__label {
  font-size: 26px;
  line-height: 1.05;
}

.flight-log__item--panel .flight-log__panel-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.flight-log__item--panel.is-current,
.flight-log__item--panel.is-now {
  align-items: flex-start;
  min-height: auto;
  padding: 14px 20px 16px 17px;
}

.flight-log__item--panel.is-current .flight-log__here,
.flight-log__item--panel.is-now .flight-log__here {
  align-self: center;
  margin-left: auto;
}

.flight-log__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.flight-log__item--chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 0;
  border-radius: 3px;
  background: #272b33;
  font: 700 15px/1.25 var(--display);
  color: #c3c9d3;
}

.flight-log__item--chip.is-current,
.flight-log__item--chip.is-now {
  margin: 0;
  width: 100%;
  padding: 10px 15px 10px 12px;
  border-left: 3px solid #fcb52f;
  border-top: 0;
  background: rgba(252, 181, 47, 0.12);
  min-height: 44px;
}

.flight-log__item--chip .flight-log__here {
  display: none;
}

.flight-log__col--right .flight-log__foot--desktop,
.flight-log__col--routes .flight-log__foot--desktop {
  margin-top: auto;
}

.flight-log__group .flight-log__heading {
  padding: 0 0 10px;
}

.flight-log__group:first-child .flight-log__heading {
  padding-top: 0;
}

.flight-log__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flight-log__item--card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 15px;
  min-height: 52px;
  border: 0;
  background: #272b33;
  font: 700 15px/1.25 var(--display);
  color: #c3c9d3;
}

.flight-log__item--card.is-current,
.flight-log__item--card.is-now {
  margin: 0;
  width: 100%;
  padding: 14px 15px;
  border-left: 3px solid #fcb52f;
  background: rgba(252, 181, 47, 0.12);
}

.flight-log__item--card .flight-log__here {
  display: none;
}

.flight-log__foot--desktop {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
}

.flight-log__foot--desktop .flight-log__note {
  flex: 1 1 auto;
  min-width: 0;
}

.flight-log__cta-slot {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.flight-log__cta-here {
  display: none;
}

.flight-log__cta-slot:has(.flight-log__cta.is-current) .flight-log__cta-here,
.flight-log__cta-slot:has(.flight-log__cta.is-now) .flight-log__cta-here {
  display: block;
}

.flight-log__cta-here .flight-log__here {
  display: inline;
}

.flight-log__foot--mobile {
  display: none;
}

.flight-log__scroll {
  display: none;
}

.flight-log__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 15px 26px;
  min-height: 52px;
  border: 0;
  border-radius: 3px;
  background: var(--gold);
  color: #1c1f25;
  font: 800 17px/1 var(--display);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
}

.flight-log__cta-label {
  white-space: nowrap;
}

.flight-log__cta:hover {
  color: #0d1014;
}

.flight-log__cta.is-current,
.flight-log__cta.is-now {
  background: rgba(252, 181, 47, 0.09);
  border: 1px solid #fcb52f;
  box-shadow: none;
  color: #fcb52f;
}

.flight-log__cta.is-current .flight-log__cta-label,
.flight-log__cta.is-now .flight-log__cta-label {
  color: #fcb52f;
}

.flight-log__cta.is-current:hover,
.flight-log__cta.is-now:hover {
  color: #fcb52f;
  background: rgba(252, 181, 47, 0.09);
}

.flight-log__note {
  margin: 0;
  font: 400 11px/1.7 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b929e;
  max-width: 28em;
}

@media (min-width: 861px) and (min-height: 900px) {
  .flight-log__group .flight-log__heading {
    padding: 0 0 12px;
  }

  .flight-log__foot--desktop {
    padding-top: 40px;
  }
}

@media (min-width: 1280px) {
  .flight-log {
    --flight-log-pad-x: 80px;
  }
}

/* Flight ops band sub-line: desktop two-column only (stacked layout has its own rules) */
@media (min-width: 1300px) and (min-height: 950px) and (max-width: 1919px) {
  .flight-log__ops-band-sub--short {
    display: block;
  }
}

@media (min-width: 1920px) {
  .flight-log {
    --flight-log-pad-x: 100px;
  }
}

@media (min-width: 1920px) and (min-height: 950px) {
  .flight-log__ops-band-sub--full {
    display: block;
  }

  .flight-log__ops-band-sub--short {
    display: none;
  }
}

/* Flight log stacked scroll: body.flight-log-stack from storyboard.js (narrow or short height; Firefox skips short-height stack on desktop). */
body.flight-log-stack .flight-log {
    padding: 0;
    align-items: stretch;
    background: #15181c;
  }

body.flight-log-stack .flight-log__panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: #15181c;
    --flight-log-tick: 8px;
    --flight-log-tick-gap: 2px;
    --flight-log-section-gap: 30px;
  }

body.flight-log-stack .flight-log__close {
    top: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    font-size: 28px;
    justify-content: center;
    color: #c3c9d3;
  }

  /* Flatten columns — stack order: journey → orbit → fleet → flight ops → know */
body.flight-log-stack .flight-log__col--left,
body.flight-log-stack .flight-log__col--right {
    display: contents;
  }

body.flight-log-stack .flight-log__head {
    order: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "meta";
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 68px 14px 20px;
    border-bottom: 1px solid rgba(244, 245, 247, 0.1);
    background: #15181c;
  }

body.flight-log-stack .flight-log__group--journey {
    order: 1;
  }

body.flight-log-stack .flight-log__group--orbit {
    order: 2;
  }

body.flight-log-stack .flight-log__group--fleet {
    order: 3;
  }

body.flight-log-stack .flight-log__group--flight-ops {
    order: 4;
  }

body.flight-log-stack .flight-log__group--know {
    order: 5;
  }

body.flight-log-stack .flight-log__head-end {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

body.flight-log-stack .flight-log__head-end-rule {
    flex: 1 1 auto;
    min-width: 12px;
    height: 1px;
    background: rgba(244, 245, 247, 0.12);
  }

body.flight-log-stack .flight-log__head > .flight-log__at {
    grid-area: meta;
  }

body.flight-log-stack .flight-log__title {
    grid-area: title;
    flex: none;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-right: 0;
    font-size: 11px;
  }

body.flight-log-stack .flight-log__rule {
    display: none;
  }

body.flight-log-stack .flight-log__at {
    order: unset;
    font-size: 10px;
    letter-spacing: 0.14em;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

body.flight-log-stack .flight-log__home {
    flex: 0 0 auto;
  }

body.flight-log-stack .flight-log__head .flight-log__ticks {
    display: none !important;
  }

body.flight-log-stack .flight-log__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    padding: 0 0 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

body.flight-log-stack .flight-log__body::before,
body.flight-log-stack .flight-log__body::after {
    display: none;
  }

body.flight-log-stack .flight-log__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }

body.flight-log-stack .flight-log__divider,
body.flight-log-stack .flight-log__foot--desktop {
    display: none;
  }

body.flight-log-stack .flight-log__group {
    flex: none;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* DOM column sibling margins fight visual order — zero them; use padding-top per section instead */
body.flight-log-stack .flight-log__col .flight-log__group + .flight-log__group {
    margin-top: 0 !important;
  }

body.flight-log-stack .flight-log__group--journey {
    padding-top: 16px;
  }

body.flight-log-stack .flight-log__group--orbit,
body.flight-log-stack .flight-log__group--fleet,
body.flight-log-stack .flight-log__group--flight-ops,
body.flight-log-stack .flight-log__group--know {
    padding-top: var(--flight-log-section-gap);
  }

body.flight-log-stack .flight-log__group--journey > .flight-log__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    padding: 0 0 10px;
  }

body.flight-log-stack .flight-log__group--journey > .flight-log__heading .flight-log__ticks {
    grid-column: 2;
    justify-self: end;
  }

body.flight-log-stack .flight-log__heading-full {
    display: none;
  }

body.flight-log-stack .flight-log__heading-short {
    display: inline;
  }

body.flight-log-stack .flight-log__here-full {
    display: none;
  }

body.flight-log-stack .flight-log__item.is-current .flight-log__here-short,
body.flight-log-stack .flight-log__item.is-now .flight-log__here-short,
body.flight-log-stack .flight-log__cta-slot:has(.flight-log__cta.is-current) .flight-log__cta-here .flight-log__here-short,
body.flight-log-stack .flight-log__cta-slot:has(.flight-log__cta.is-now) .flight-log__cta-here .flight-log__here-short {
    display: inline;
  }

body.flight-log-stack .flight-log__heading {
    font-size: 12px;
  }

body.flight-log-stack .flight-log__group .flight-log__heading {
    padding: 0 0 8px;
  }

body.flight-log-stack .flight-log__group--flight-ops .flight-log__ops-band {
    margin-top: 0;
  }

body.flight-log-stack .flight-log__heading .flight-log__ticks,
body.flight-log-stack .flight-log__group .flight-log__ticks {
    width: auto;
    flex: 0 0 auto;
    gap: var(--flight-log-tick-gap);
  }

body.flight-log-stack .flight-log__item {
    flex: none;
    min-height: 0;
    padding: 0 16px;
  }

body.flight-log-stack .flight-log__item--journey,
body.flight-log-stack .flight-log__item--row,
body.flight-log-stack .flight-log__item--ops {
    height: 48px;
    min-height: 48px;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }

body.flight-log-stack .flight-log__item--journey {
    gap: 14px;
    font-size: 19px;
  }

body.flight-log-stack .flight-log__desc {
    flex: 0 1 auto;
    order: unset;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    line-height: 1.3;
    color: #6f7885;
  }

body.flight-log-stack .flight-log__item.is-current .flight-log__desc,
body.flight-log-stack .flight-log__item.is-now .flight-log__desc {
    display: block;
  }

body.flight-log-stack .flight-log__num {
    font-size: 11px;
    width: 20px;
    flex-basis: 20px;
  }

body.flight-log-stack .flight-log__item--journey.is-current,
body.flight-log-stack .flight-log__item--journey.is-now {
    height: 54px;
    min-height: 54px;
    padding: 0 16px 0 13px;
    margin-left: 0;
    width: 100%;
  }

body.flight-log-stack .flight-log__here {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding-right: 0;
  }

body.flight-log-stack .flight-log__item--journey.is-current .flight-log__here,
body.flight-log-stack .flight-log__item--journey.is-now .flight-log__here {
    font-size: 10px;
  }

body.flight-log-stack .flight-log__item--row {
    gap: 12px;
    font-size: 18px;
  }

body.flight-log-stack .flight-log__item--row.is-current,
body.flight-log-stack .flight-log__item--row.is-now {
    height: 54px;
    min-height: 54px;
    padding: 0 16px 0 13px;
  }

body.flight-log-stack .flight-log__item--ops {
    gap: 12px;
    font-size: 18px;
  }

body.flight-log-stack .flight-log__item--ops.is-current,
body.flight-log-stack .flight-log__item--ops.is-now {
    height: 54px;
    min-height: 54px;
    padding: 0 16px 0 13px;
  }

body.flight-log-stack .flight-log__item--edge-teal,
body.flight-log-stack .flight-log__item--edge-coral {
    padding-left: 13px;
  }

body.flight-log-stack .flight-log__item--edge-teal.is-current,
body.flight-log-stack .flight-log__item--edge-teal.is-now,
body.flight-log-stack .flight-log__item--edge-coral.is-current,
body.flight-log-stack .flight-log__item--edge-coral.is-now {
    padding-left: 13px;
  }

body.flight-log-stack .flight-log__dot {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }

body.flight-log-stack .flight-log__item--panel {
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    font-size: 18px;
  }

body.flight-log-stack .flight-log__item--panel .flight-log__label {
    font-size: 21px;
    line-height: 1.1;
  }

body.flight-log-stack .flight-log__item--panel .flight-log__dot {
    margin-top: 7px;
  }

body.flight-log-stack .flight-log__item--panel.is-current,
body.flight-log-stack .flight-log__item--panel.is-now {
    padding: 12px 16px 12px 13px;
  }

body.flight-log-stack .flight-log__item--feature {
    gap: 5px;
    padding: 12px 16px;
    font-size: 21px;
    line-height: 1.1;
  }

body.flight-log-stack .flight-log__sub {
    font-size: 14px;
    line-height: 1.45;
  }

body.flight-log-stack .flight-log__ops-band {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    margin: 0;
    padding: 11px 16px;
    width: 100%;
    box-sizing: border-box;
  }

body.flight-log-stack .flight-log__ops-band-sub--short {
    display: block;
    grid-column: 2;
    text-align: right;
    font-size: 14px;
    line-height: 1.35;
  }

body.flight-log-stack .flight-log__ops-band-sub--full {
    display: none;
  }

@media (max-width: 500px) {
  body.flight-log-stack .flight-log__ops-band-sub--short {
    display: none;
  }
}

@media (max-width: 464px) {
  body.flight-log-stack .flight-log__label-full {
    display: none;
  }

  body.flight-log-stack .flight-log__label-short {
    display: inline;
  }
}

@media (max-width: 414px) {
  body.flight-log-stack .flight-log__desc-full {
    display: none;
  }

  body.flight-log-stack .flight-log__desc-short {
    display: inline;
  }
}

body.flight-log-stack .flight-log__ops-band-label {
    grid-column: 1;
    font-size: 12px;
    letter-spacing: 0.16em;
  }

body.flight-log-stack .flight-log__ops-band .flight-log__ticks {
    grid-column: 3;
    justify-self: end;
  }

body.flight-log-stack .flight-log__cards {
    gap: 8px;
  }

body.flight-log-stack .flight-log__chips {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

body.flight-log-stack .flight-log__item--chip {
    flex: none;
    min-height: 44px;
    height: auto;
    padding: 10px 12px;
    font-size: 14px;
  }

body.flight-log-stack .flight-log__item--chip.is-current,
body.flight-log-stack .flight-log__item--chip.is-now {
    padding: 10px 12px 10px 9px;
    min-height: 44px;
  }

body.flight-log-stack .flight-log__item--card {
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
    font-size: 14px;
  }

body.flight-log-stack .flight-log__foot--mobile {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 14px;
    height: 74px;
    padding: 0 20px;
    padding-right: calc(20px + var(--flight-log-scroll-gutter, 0px));
    border-top: 1px solid rgba(244, 245, 247, 0.1);
    background: #15181c;
  }

body.flight-log-stack .flight-log__foot--mobile .flight-log__cta-slot {
    flex: 1;
    min-width: 0;
    gap: 12px;
  }

body.flight-log-stack .flight-log__foot--mobile .flight-log__cta {
    flex: 1 1 auto;
    width: auto;
    height: 50px;
    min-height: 50px;
    padding: 0 16px;
    font-size: 15px;
  }

body.flight-log-stack .flight-log__foot--mobile .flight-log__cta.is-current,
body.flight-log-stack .flight-log__foot--mobile .flight-log__cta.is-now {
    flex: 0 1 auto;
  }

body.flight-log-stack .flight-log__scroll {
    display: block;
    position: relative;
    width: 3px;
    height: 52px;
    flex: 0 0 3px;
    background: #2f353d;
  }

body.flight-log-stack .flight-log__scroll-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 42%;
    background: #fcb52f;
  }

@media (min-height: 740px) {
  body.flight-log-stack .flight-log__group--journey > .flight-log__heading {
    padding-bottom: 14px;
  }

  body.flight-log-stack .flight-log__item--journey {
    height: 52px;
    min-height: 52px;
  }

  body.flight-log-stack .flight-log__item--journey.is-current,
  body.flight-log-stack .flight-log__item--journey.is-now {
    height: 56px;
    min-height: 56px;
  }

  body.flight-log-stack .flight-log__item--row,
  body.flight-log-stack .flight-log__item--ops {
    height: 50px;
    min-height: 50px;
  }

  body.flight-log-stack .flight-log__item--row.is-current,
  body.flight-log-stack .flight-log__item--row.is-now,
  body.flight-log-stack .flight-log__item--ops.is-current,
  body.flight-log-stack .flight-log__item--ops.is-now {
    height: 54px;
    min-height: 54px;
  }
}


body.log-open .cog-rig__gear,
body.privacy-open .cog-rig__gear,
body.know-open .cog-rig__gear,
body.book-open .cog-rig__gear {
  animation-play-state: paused;
}

.privacy,
.know {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 48px 80px;
}

.privacy[hidden],
.know[hidden] {
  display: none !important;
}

.privacy__scrim,
.know__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--board) 72%, transparent);
}

.privacy__panel,
.know__panel {
  position: relative;
  z-index: 1;
  width: min(48rem, 100%);
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 36px 40px 8px;
  background: var(--board);
  color: var(--ink);
  overflow: hidden;
}

body.know-open.log-open .flight-log {
  filter: brightness(1.14) saturate(0.94) blur(6px);
}

body.know-open.log-open .know__scrim {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

body.know-open.log-open .know__panel {
  background: color-mix(in srgb, #000 16%, var(--board));
}

.privacy__close,
.know__close {
  align-self: end;
  margin: 0 -8px 8px 0;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 700 13px/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.privacy__close:focus,
.know__close:focus {
  outline: none;
}

.privacy__close:focus-visible,
.know__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.privacy__title,
.know__title {
  margin: 0 0 18px;
  font: 800 clamp(28px, 3.4vw, 42px) / 1.05 var(--display);
  letter-spacing: -0.02em;
  flex: none;
  transition: opacity 200ms ease;
}

.know__title.is-leaving {
  opacity: 0;
}

.privacy__body,
.know__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 36px 0;
  transition: opacity 200ms ease;
}

@supports not selector(::-webkit-scrollbar) {
  .privacy__body,
  .know__body {
    scrollbar-width: thin;
    scrollbar-color: #4d5561 #0d0f12;
  }
}

.know__body.is-leaving {
  opacity: 0;
}

.know__body.is-entering {
  opacity: 0;
}

.privacy__body::-webkit-scrollbar,
.know__body::-webkit-scrollbar {
  width: 8px;
}

.privacy__body::-webkit-scrollbar-track,
.know__body::-webkit-scrollbar-track {
  background: #0d0f12;
}

.privacy__body::-webkit-scrollbar-thumb,
.know__body::-webkit-scrollbar-thumb {
  background-color: #4d5561;
  border-radius: 4px;
}

.privacy__body::-webkit-scrollbar-thumb:hover,
.know__body::-webkit-scrollbar-thumb:hover {
  background-color: #6b7380;
}

.privacy__body::-webkit-scrollbar-corner,
.know__body::-webkit-scrollbar-corner {
  background: #0d0f12;
}

.privacy__body::-webkit-scrollbar-button,
.know__body::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.privacy__body p,
.privacy__body .copy__list,
.know__body p,
.know__body .copy__list {
  flex: none;
  margin: 0 0 1em;
  font: 400 16px/1.55 var(--body);
  color: var(--muted);
}

.privacy__body h3,
.know__body h3 {
  flex: none;
  margin: 1.35em 0 0.4em;
  font: 700 15px/1.25 var(--display);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.privacy__body h3:first-child,
.know__body h3:first-child {
  margin-top: 0;
}

.privacy__body a,
.know__body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy__body a:focus,
.know__body a:focus {
  outline: none;
}

.privacy__body a:focus-visible,
.know__body a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.know__topic-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.know__topic-link:focus {
  outline: none;
}

.know__topic-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.know__rail-wrap {
  position: relative;
  flex: none;
  min-width: 0;
  margin: 0 0 16px;
  overflow: hidden;
}

.know__rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 2px 4px 6px 0;
  scroll-padding-inline-end: 4px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.know__rail::-webkit-scrollbar {
  display: none;
}

.know__rail-edge {
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 40px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.know__rail-wrap.is-scrollable:not(.is-at-start) .know__rail-edge--left,
.know__rail-wrap.is-scrollable:not(.is-at-end) .know__rail-edge--right {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .know__rail-wrap.is-scrollable:not(.is-at-start) .know__rail-edge--left,
  .know__rail-wrap.is-scrollable:not(.is-at-end) .know__rail-edge--right {
    pointer-events: auto;
    cursor: w-resize;
  }

  .know__rail-wrap.is-scrollable:not(.is-at-end) .know__rail-edge--right {
    cursor: e-resize;
  }
}

.know__rail-edge--left {
  left: 0;
  background: linear-gradient(90deg, var(--board) 35%, transparent 100%);
}

.know__rail-edge--right {
  right: 0;
  background: linear-gradient(270deg, var(--board) 35%, transparent 100%);
}

.know__rail-edge.is-scrolling.know__rail-edge--left {
  background: linear-gradient(90deg, var(--board) 55%, transparent 100%);
}

.know__rail-edge.is-scrolling.know__rail-edge--right {
  background: linear-gradient(270deg, var(--board) 55%, transparent 100%);
}

.know__chip {
  flex: none;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: 600 13px/1.2 var(--display);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: pan-x;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.know__chip.is-active {
  border-color: var(--teal);
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

.know__chip:focus {
  outline: none;
}

.know__chip:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.know__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 20px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.know__nav {
  flex: 1 1 0;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: 600 13px/1.2 var(--display);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

.know__nav--next {
  text-align: right;
}

.know__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.know__nav:focus {
  outline: none;
}

.know__nav:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.know__count {
  flex: none;
  font: 400 13px/1 var(--mono);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.know__cta-wrap {
  margin-top: 1.5em;
}

.know__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: var(--gold);
  color: #1c1f25;
  font: 800 15px/1 var(--display);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.know__cta:focus {
  outline: none;
}

.know__cta:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.know__quiet {
  margin-top: 1.5em;
  font: 400 15px/1.55 var(--body);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

@media (max-height: 849px), (max-width: 767px) {
  .know__foot {
    display: none;
  }
}

@media (min-height: 850px) and (min-width: 768px) {
  .know__foot {
    display: flex;
  }
}

body.privacy-open .burger,
body.know-open .burger,
body.privacy-open .cypher,
body.know-open .cypher,
body.book-open .burger,
body.book-open .cypher {
  visibility: hidden;
}

.book {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 48px 80px;
}

.book[hidden] {
  display: none !important;
}

.book__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--board) 72%, transparent);
}

.book__panel {
  position: relative;
  z-index: 1;
  width: min(52rem, 100%);
  height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--board);
  color: var(--ink);
  overflow: hidden;
}

.book__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 12px;
  flex-shrink: 0;
}

.book__title {
  margin: 0;
  flex: 1 1 auto;
  font: 800 clamp(22px, 2.4vw, 32px) / 1.1 var(--display);
  letter-spacing: -0.02em;
}

.book__fallback {
  flex: 0 0 auto;
  color: var(--teal);
  font: 400 14px/1.3 var(--body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.book__fallback:focus {
  outline: none;
}

.book__fallback:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.book__close {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 700 13px/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.book__close:focus {
  outline: none;
}

.book__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.book__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

.frame--mission {
  background: var(--board);
  align-items: center;
  justify-content: center;
  padding: 80px;
}

.mission-board {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}

.mission-board__title {
  font: 800 clamp(32px, 4vw, 46px) / 1.1 var(--display);
  margin: 0 0 28px;
  letter-spacing: -0.02em;
}

.mission-board__rows {
  display: flex;
  flex-direction: column;
}

.mission-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  width: 100%;
  min-height: 100px;
  margin: 0;
  padding: 16px 18px 16px 40px;
  border: 0;
  border-top: 1px solid rgba(244, 245, 247, 0.1);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms;
  -webkit-tap-highlight-color: transparent;
}

a.mission-row {
  text-decoration: none;
  color: inherit;
}

a.mission-row:hover {
  background: color-mix(in srgb, var(--row, var(--teal)) 6%, transparent);
}

.mission-row:last-of-type {
  border-bottom: 1px solid rgba(244, 245, 247, 0.1);
}

.mission-row:hover:not(:disabled) {
  background: color-mix(in srgb, var(--row, var(--teal)) 6%, transparent);
}

.mission-row:focus {
  outline: none;
}

.mission-row--teal {
  --row: var(--teal);
}

.mission-row--amber {
  --row: var(--amber);
}

.mission-row--coral {
  --row: var(--coral);
}

.mission-row__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
}

.mission-row__img {
  display: block;
  width: 100%;
  max-width: 165px;
  height: auto;
  max-height: 120px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

.mission-row__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mission-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mission-row__lamp {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--row, var(--teal));
  flex: 0 0 16px;
}

.mission-row__status {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--row, var(--teal));
}

.mission-row__headline {
  font: 800 23px/1.15 var(--display);
}

.mission-row__sub {
  font: 400 16px/1.45 var(--body);
  color: #c3c9d3;
}

.mission-row__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--row, var(--teal));
  white-space: nowrap;
  justify-self: end;
}

.mission-row__action-meta {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--muted);
}

.mission-row--note {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  min-height: 0;
  padding: 18px 22px 18px 40px;
  border-top: 0;
  border-left: 1px solid var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  border-radius: 0 8px 8px 0;
}

.mission-row--note:last-of-type {
  border-bottom: 0;
}

.mission-row:not(.mission-row--note):has(+ .mission-row--note) {
  border-bottom: 1px solid rgba(244, 245, 247, 0.1);
}

.mission-row__art--note {
  width: 100%;
  height: 120px;
  align-self: center;
  justify-content: center;
}

.mission-row__note {
  margin: 0;
  font: 400 15px/1.55 var(--body);
  color: var(--muted);
  max-width: none;
}

.mission-row__note-cta {
  display: inline;
}

.mission-row__note-link {
  font: 700 15px/1.35 var(--display);
  letter-spacing: -0.01em;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.mission-row__note-arrow {
  margin: 0 0.4em 0 0.15em;
  font: 400 15px/1 var(--body);
  color: var(--teal);
}

.mission-row__note-meta {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.mission-board__foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: flex-end;
  gap: 22px;
}

.mission-idle {
  flex: 0 0 auto;
}

.mission-idle__img {
  display: block;
  height: 72px;
  width: auto;
}

.mission-board__note {
  margin: 0;
  font: 400 15px/1.5 var(--body);
  color: var(--muted);
  max-width: 48ch;
}

/* iPad Pro 12.9 and other ≥1024 portrait (e.g. 1024×1366). Landscape
   desktop is unchanged. */
@media (min-width: 1024px) and (orientation: portrait) and (min-height: 900px) {
  .frame--mission {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 96px 64px 48px;
  }

  .frame--mission .mission-board {
    flex: 1 1 auto;
    min-height: 0;
    width: min(1120px, 100%);
  }

  .frame--mission .mission-board__title {
    margin-bottom: 12px;
  }

  .frame--mission .mission-board__rows {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .frame--mission .mission-row {
    min-height: 112px;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .frame--mission .mission-row--note {
    margin-top: 0;
  }
}

.frame--log {
  background: #2b2f37;
}

.frame--log-fleet {
  background: var(--slate);
}

.frame--log .log-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.frame--log .log-sky .stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.frame--log .log-art {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.frame--log-orbit .log-art {
  right: 7vw;
  bottom: 30vh;
  width: min(44vw, 560px);
  height: auto;
}

.frame--log-orbit .log-art__img {
  display: block;
  width: 100%;
  height: auto;
  animation: log-float 5s ease-in-out infinite;
}

/* X-28 signed off 2026-09-02. Shared height; width follows --orbit-ar (may spill).
   ≤384 165px | 385–767 220px (500 named) | 768–810 250px | ≥811 285px
   Spec: _md/ORBIT_ANIM.md Height ladder. site.json animMaxH 300 is fallback only. */
.frame--orbit-anim {
  --rescue-x: 0px;
  --orbit-y: 0px;
  --anim-max-h: var(--anim-max-h-base, 300px);
}

.frame--rescue {
  --rescue-x-at-1024: 72px;
}

@media (min-width: 768px) and (max-width: 810px) {
  .frame--orbit-anim {
    --anim-max-h: 250px;
  }
}

@media (min-width: 811px) {
  .frame--orbit-anim {
    --anim-max-h: 285px;
  }
}

@media (max-width: 767px) {
  .frame--orbit-anim {
    --anim-max-h: 220px;
  }
}

@media (min-width: 500px) and (max-width: 767px) {
  .frame--orbit-anim {
    --anim-max-h: 220px;
  }
}

@media (max-width: 384px) {
  .frame--orbit-anim {
    --anim-max-h: 165px;
  }
}

.orbit-stage,
.rescue-stage {
  position: relative;
  width: auto;
  height: var(--anim-max-h, 300px);
  aspect-ratio: var(--orbit-ar, var(--rescue-ar, 1.7904));
  overflow: visible;
}

.orbit-bob,
.rescue-bob {
  position: absolute;
  inset: 0;
  overflow: visible;
  animation: log-float 5s ease-in-out infinite;
}

.rescue-rocket,
.rescue-scan,
.fix-rocket,
.fix-spark,
.add-rocket,
.add-grabber,
.bring-rocket,
.bring-lights {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rescue-scan {
  transform-box: view-box;
  transform-origin: 92.2% 50%;
  clip-path: inset(0 0 0 100%);
  animation: rescue-scan 13.5s linear infinite;
}

/* 1.5s hold, 0.65s swipe on, 3 × 1.8s sweeps, 0.25s hold, 0.65s swipe off, 5s rest. */
@keyframes rescue-scan {
  0%,
  11.11% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 100%);
    animation-timing-function: ease-out;
  }
  15.93% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
    animation-timing-function: ease-in-out;
  }
  19.26% {
    transform: rotate(calc(var(--rescue-scan-deg, 16deg) * -1));
    clip-path: inset(0 0 0 0);
  }
  22.59% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
  }
  25.93% {
    transform: rotate(var(--rescue-scan-deg, 16deg));
    clip-path: inset(0 0 0 0);
  }
  29.26% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
  }
  32.59% {
    transform: rotate(calc(var(--rescue-scan-deg, 16deg) * -1));
    clip-path: inset(0 0 0 0);
  }
  35.93% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
  }
  39.26% {
    transform: rotate(var(--rescue-scan-deg, 16deg));
    clip-path: inset(0 0 0 0);
  }
  42.59% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
  }
  45.93% {
    transform: rotate(calc(var(--rescue-scan-deg, 16deg) * -1));
    clip-path: inset(0 0 0 0);
  }
  49.26% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
  }
  52.59% {
    transform: rotate(var(--rescue-scan-deg, 16deg));
    clip-path: inset(0 0 0 0);
  }
  55.93%,
  57.78% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 0);
    animation-timing-function: ease-in;
  }
  62.59%,
  100% {
    transform: rotate(0deg);
    clip-path: inset(0 0 0 100%);
    animation-timing-function: linear;
  }
}

.fix-spark {
  opacity: 0;
}

/* Brief on, longer off. Coprime-ish durations so the pair rarely syncs. */
.fix-spark--top {
  animation: fix-spark-a 1.9s steps(1, end) infinite;
}

.fix-spark--end {
  animation: fix-spark-b 2.65s steps(1, end) infinite;
}

@keyframes fix-spark-a {
  0%,
  7% {
    opacity: 1;
  }
  7.01%,
  40% {
    opacity: 0;
  }
  40%,
  45% {
    opacity: 1;
  }
  45.01%,
  100% {
    opacity: 0;
  }
}

@keyframes fix-spark-b {
  0%,
  28% {
    opacity: 0;
  }
  28%,
  34% {
    opacity: 1;
  }
  34.01%,
  72% {
    opacity: 0;
  }
  72%,
  77% {
    opacity: 1;
  }
  77.01%,
  100% {
    opacity: 0;
  }
}

/* Pivot from the mount (left / non-claw end). Hidden tucks the claw into
   the rocket; 0deg is the complete SVG. 1.5s hold, 0.75s in, 3s shown,
   0.75s out, 3s hold. */
.frame--add,
.frame--bring {
  --orbit-star-tile: 860px;
}


.frame--add {
  --add-grab-hide: -78deg;
}

.add-grabber {
  transform: rotate(var(--add-grab-hide, -78deg));
  transform-box: view-box;
  transform-origin: 61.8% 74.3%;
}

body[data-frame="orbit-add"] .add-grabber {
  animation: add-grabber 9s infinite both;
}

@keyframes add-grabber {
  0%,
  16.667% {
    transform: rotate(var(--add-grab-hide, -78deg));
    animation-timing-function: ease-in-out;
  }
  25%,
  58.333% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  66.667%,
  100% {
    transform: rotate(var(--add-grab-hide, -78deg));
  }
}

/* Colour the four visible hole pairs in place. Palette walks up two
   rows and back (the three hidden source rows feed the bottom pair). */
.bring-cell {
  animation: bring-cell 2s steps(1, end) infinite;
}

.bring-cell--1a { --c0: #ea6854; --c1: #f6b04a; --c2: #e5e5e5; }
.bring-cell--1b { --c0: #e5e5e5; --c1: #ea6854; --c2: #f6b04a; }
.bring-cell--2a { --c0: #f6b04a; --c1: #e5e5e5; --c2: #ea6854; }
.bring-cell--2b { --c0: #ea6854; --c1: #f6b04a; --c2: #ea6854; }
.bring-cell--3a { --c0: #e5e5e5; --c1: #ea6854; --c2: #ea6854; }
.bring-cell--3b { --c0: #f6b04a; --c1: #ea6854; --c2: #e5e5e5; }
.bring-cell--4a { --c0: #ea6854; --c1: #ea6854; --c2: #f6b04a; }
.bring-cell--4b { --c0: #ea6854; --c1: #e5e5e5; --c2: #f6b04a; }

@keyframes bring-cell {
  0%,
  24.999% {
    fill: var(--c0);
  }
  25%,
  49.999% {
    fill: var(--c1);
  }
  50%,
  74.999% {
    fill: var(--c2);
  }
  75%,
  99.999% {
    fill: var(--c1);
  }
  100% {
    fill: var(--c0);
  }
}

/* Just off left (6vw pad for exhaust / tow), fly through, hold 1.5s off right.
   Travel 20s - 30% of the previous on-screen speed. X uses `translate` so the
   inner bob can keep its own Y motion. */
.frame--bring {
  overflow: hidden;
  --bring-park: calc(-50vw - 50% - 6vw);
  --bring-exit: calc(50vw + 50% + 6vw);
}

.bring-fly {
  position: absolute;
  inset: 0;
  overflow: visible;
  translate: var(--bring-park) 0;
}

body[data-frame="orbit-bring"] .bring-fly {
  animation: bring-fly 21.5s linear infinite;
}

@keyframes bring-fly {
  0% {
    translate: var(--bring-park) 0;
  }
  93.02%,
  100% {
    translate: var(--bring-exit) 0;
  }
}

.frame--bring .orbit-bob {
  animation: bring-bob 2.5s ease-in-out infinite;
}

@keyframes bring-bob {
  0%,
  100% {
    transform: translateY(14px);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Stars + planet drift left so the centred rocket reads as travelling. */
.frame--add .log-sky .stars,
.frame--bring .log-sky .stars {
  right: auto;
  width: calc(100% + var(--orbit-star-tile, 860px));
  animation: add-stars-travel 32s linear infinite;
}

@keyframes add-stars-travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--orbit-star-tile, 860px) * -1));
  }
}

.frame--add .log-sky .log-prop,
.frame--bring .log-sky .log-prop {
  animation: add-planet-travel 96s linear infinite;
}

@keyframes add-planet-travel {
  from {
    transform: translateX(85vw);
  }
  to {
    transform: translateX(-40vw);
  }
}

.frame--log-fleet .log-art {
  right: 6vw;
  bottom: 14vh;
  height: 38vh;
  width: auto;
}

.frame--log-fleet .log-art__img {
  display: block;
  height: 100%;
  width: auto;
}

/* Hosting for your portfolio: complete viewBox centred in the art area.
   Station sits slightly left in that box (runway for the later dock).
   Hub origin is the station centre so rotation can share this register. */
.frame--fleet-hosting {
  overflow: hidden;
  background: #2b2f37;
  --hosting-hub-ox: 49.413%;
  --hosting-hub-oy: 46.018%;
  --hosting-y: 0px;
  --hosting-in: 8s;
  --hosting-spin: 40s;
}

.frame--fleet-hosting .log-art {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, calc(-50% + var(--hosting-y, 0px))) scale(min(1, calc(100vw / (calc(54vh - 40px) * var(--hosting-ar, 1.0924)))));
  transform-origin: 50% 50%;
  height: calc(54vh - 40px);
  width: auto;
}

.hosting-stage {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: var(--hosting-ar, 1.0924);
  overflow: visible;
}

.hosting-hub,
.hosting-dock-spin {
  position: absolute;
  inset: 0;
  transform-origin: var(--hosting-hub-ox) var(--hosting-hub-oy);
}

/* Path-01 pose until the panel is current. +64deg CW from rest. */
.hosting-hub {
  transform: rotate(64deg);
}

.hosting-station,
.hosting-ship,
.hosting-docking {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* docking-2 is drawn nose-up, parked mid-approach. Origin is that
   rocket centre. Inbound heading is −73deg (nose follows the path);
   last stretch eases to 0deg (top) for the slide onto slot 90. */
.hosting-docking {
  transform-origin: 126.63% 78.56%;
  transform: translate(45.84%, 6.97%) rotate(-73deg);
}

.hosting-docking #hostingrocketdocking2-Flame {
  opacity: 1;
}

.hosting-stage,
.frame--fleet-hosting .log-art {
  overflow: visible;
}

/* Times from path PNGs at constant intercept (hub angle 64 → 0). */
body[data-frame="fleet-portfolio"] .hosting-hub {
  animation:
    hosting-hub-in var(--hosting-in) linear forwards,
    hosting-hub-spin var(--hosting-spin) linear var(--hosting-in) infinite;
}

body[data-frame="fleet-portfolio"] .hosting-dock-spin {
  animation:
    hosting-dock-hold var(--hosting-in) linear forwards,
    hosting-hub-spin var(--hosting-spin) linear var(--hosting-in) infinite;
}

body[data-frame="fleet-portfolio"] .hosting-docking {
  animation: hosting-dock-in var(--hosting-in) linear forwards;
}

body[data-frame="fleet-portfolio"] .hosting-docking #hostingrocketdocking2-Flame {
  animation: hosting-flame-out var(--hosting-in) linear forwards;
}

@keyframes hosting-hub-in {
  0% {
    transform: rotate(64deg);
  }
  34.6% {
    transform: rotate(42deg);
  }
  58.5% {
    transform: rotate(26deg);
  }
  76.6% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes hosting-dock-hold {
  to {
    transform: none;
  }
}

@keyframes hosting-hub-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes hosting-dock-in {
  0% {
    transform: translate(45.84%, 6.97%) rotate(-73deg);
  }
  34.6% {
    transform: translate(19.45%, -1.76%) rotate(-73deg);
  }
  58.5% {
    transform: translate(-0.63%, -8.72%) rotate(-72deg);
  }
  76.6% {
    transform: translate(-14.61%, -18.56%) rotate(-28deg);
  }
  100% {
    transform: translate(-34.12%, -33.8%) rotate(0deg);
  }
}

@keyframes hosting-flame-out {
  0%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Sites you didn't build: centred authoring stage (2.55:1). Height from the fleet
   ladder; width follows AR and may spill - panel crops the sides like build.
   Loop duration scales with stage width (see storyboard.js). */
.frame--fleet-inherited {
  overflow-x: hidden;
  overflow-y: visible;
  --inherited-loop: 18s;
  --inherited-slat-ar: 23.643;
  --inherited-track-h: 8px;
  --inherited-track-lift: 10px;
  --inherited-conveyor-top: calc(var(--inherited-track-lift) + var(--inherited-track-h));
  --inherited-slat-speed: 1s;
  --fleet-stage-h: min(calc(54vh - 40px), calc((100vh - var(--strip-h)) * 0.52));
  --inherited-stage-h: var(--fleet-stage-h);
  --inherited-hold: 9.9s;
  --inherited-pause: 0s;
  --inherited-ufo-h: 62%;
  --inherited-scan-gap: 70px;
  --inherited-scan-scale: 0.9;
  --inherited-beam-scale: 1.5;
  --inherited-spray-ar: 0.15296;
  --inherited-spray-hole-x: 52.92%;
  --inherited-spray-hole-size: 19.5%;
  --inherited-spray-hole-nudge-x: -1.5px;
  --inherited-spray-hole-nudge-y: 0%;
  --inherited-gantry-h: 88%;
  --inherited-scan-off-y: calc(-100% - 240px);
}

.frame--fleet-inherited .log-art {
  left: 50%;
  right: auto;
  bottom: var(--strip-h);
  width: auto;
  height: var(--inherited-stage-h);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  overflow: visible;
}

.inherited-stage {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: var(--inherited-ar, 2.55);
  overflow: visible;
  container-type: inline-size;
  --inherited-tile: calc(var(--inherited-track-h) * var(--inherited-slat-ar));
  --inherited-enter-cqi: 66;
  --inherited-exit-cqi: 93;
  --inherited-hold: 11s;
  --inherited-pause: 1s;
  --inherited-kf-enter: 26%;
  --inherited-kf-hold: 68%;
  --inherited-kf-exit: 96%;
}

.inherited-track {
  position: absolute;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  bottom: var(--inherited-track-lift);
  height: var(--inherited-track-h);
  overflow: hidden;
  z-index: 1;
}

.inherited-slats {
  display: flex;
  height: 100%;
  width: max-content;
}

.inherited-slat {
  display: block;
  height: 100%;
  width: calc(var(--inherited-track-h) * var(--inherited-slat-ar));
  flex: none;
}

@keyframes inherited-slats {
  to {
    transform: translateX(calc(var(--inherited-track-h) * var(--inherited-slat-ar) * -1));
  }
}

/* Belt pauses when the UFO holds; synced loop injected in storyboard.js. */
@keyframes inherited-slats-sync {
  0% {
    transform: translateX(0);
  }
  26% {
    transform: translateX(calc(var(--inherited-enter-cqi) * -1cqi));
  }
  68% {
    transform: translateX(calc(var(--inherited-enter-cqi) * -1cqi));
  }
  96% {
    transform: translateX(calc((var(--inherited-enter-cqi) + var(--inherited-exit-cqi)) * -1cqi));
  }
  100% {
    transform: translateX(calc((var(--inherited-enter-cqi) + var(--inherited-exit-cqi)) * -1cqi));
  }
}

.inherited-car-rig {
  position: absolute;
  left: 50%;
  bottom: var(--inherited-conveyor-top);
  width: 32%;
  height: var(--inherited-ufo-h, 62%);
  z-index: 2;
  transform: translateX(calc(-50% + var(--inherited-enter-cqi) * 1cqi));
}

.inherited-car {
  position: relative;
  width: 100%;
  height: 100%;
}

.inherited-ufo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.inherited-ufo--schematic {
  clip-path: inset(0 0 100% 0);
}

.inherited-ufo--coral {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}

.inherited-scan-rig {
  position: absolute;
  left: 50%;
  bottom: calc(
    var(--inherited-conveyor-top) + var(--inherited-ufo-h, 62%) + var(--inherited-scan-gap, 70px)
  );
  width: 38%;
  height: auto;
  transform: translate(-50%, var(--inherited-scan-off-y, calc(-100% - 120px)));
  z-index: 4;
  pointer-events: none;
}

.inherited-beam,
.inherited-scanner {
  position: relative;
  left: auto;
  display: block;
  overflow: visible;
}

.inherited-scanner {
  bottom: auto;
  left: 50%;
  width: 16%;
  height: auto;
  z-index: 2;
  transform: translateX(-50%) scale(var(--inherited-scan-scale, 0.9));
  transform-origin: 50% 100%;
}

.inherited-beam {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100%;
  height: var(--inherited-beam-h, 280px);
  z-index: 1;
  transform: translateX(-50%) scale(var(--inherited-beam-scale, 1.5));
  transform-origin: 50% 0;
  clip-path: inset(0 0 100% 0);
}

.inherited-gantry {
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--inherited-gantry-h, 88%);
  width: auto;
  aspect-ratio: var(--inherited-spray-ar, 0.15296);
  transform: translateX(var(--inherited-gantry-hide-x, -180%));
  opacity: 0;
  z-index: 6;
}

.inherited-gantry-art {
  position: relative;
  width: 100%;
  height: 100%;
}

.inherited-spray {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.inherited-spray-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.inherited-spray-cell {
  position: absolute;
  left: calc(var(--hole-x, var(--inherited-spray-hole-x, 52.92%)) + var(--inherited-spray-hole-nudge-x, 0%));
  top: calc(var(--hole-y, 50%) + var(--inherited-spray-hole-nudge-y, 0%));
  width: var(--inherited-spray-hole-size, 19.5%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--c0, #f4f5f7);
  animation: inherited-spray-cell 1.6s steps(1, end) infinite;
  animation-delay: calc(var(--d, 0s) * -1);
}

@keyframes inherited-spray-cell {
  0%,
  24.999% {
    background: var(--c0);
  }
  25%,
  49.999% {
    background: var(--c1);
  }
  50%,
  74.999% {
    background: var(--c2);
  }
  75%,
  100% {
    background: var(--c1);
  }
}

body[data-frame="fleet-inherited"] .inherited-slats {
  animation: inherited-slats-sync var(--inherited-loop) linear infinite;
}

body[data-frame="fleet-inherited"] .inherited-car-rig {
  animation: inherited-car-rig-sync var(--inherited-loop) linear infinite;
}

body[data-frame="fleet-inherited"] .inherited-scan-rig {
  animation: inherited-scan-rig-sync var(--inherited-loop) linear infinite;
}

body[data-frame="fleet-inherited"] .inherited-beam {
  animation: inherited-beam-sync var(--inherited-loop) linear infinite;
}

body[data-frame="fleet-inherited"] .inherited-ufo--schematic {
  animation: inherited-schematic-sync var(--inherited-loop) linear infinite;
}

body[data-frame="fleet-inherited"] .inherited-gantry {
  animation: inherited-gantry var(--inherited-loop) linear infinite;
}

body[data-frame="fleet-inherited"] .inherited-ufo--coral {
  animation: inherited-coral var(--inherited-loop) linear infinite;
}

/* Rig motion is belt-speed (see inherited-car-rig-sync in storyboard.js). */
@keyframes inherited-car-rig-sync {
  0% {
    transform: translateX(calc(-50% + var(--inherited-enter-cqi) * 1cqi));
  }
  26% {
    transform: translateX(-50%);
  }
  68% {
    transform: translateX(-50%);
  }
  96% {
    transform: translateX(calc(-50% - var(--inherited-exit-cqi) * 1cqi));
  }
  100% {
    transform: translateX(calc(-50% - var(--inherited-exit-cqi) * 1cqi));
  }
}

/* Scanner rig motion synced in storyboard.js (inherited-scan-rig-sync). */

/* Beam + schematic wipes synced in storyboard.js (inherited-beam-sync, inherited-schematic-sync). */

/* Gantry + coral synced in storyboard.js (exit distance from stage width). */

/* Complex functionality: complete composition on the floor, centred.
   Journey is 54vh; name sits 40px shorter. Complex is 50px shorter again. */
.frame--fleet-complex .log-art {
  left: 50%;
  right: auto;
  bottom: 14vh;
  transform: translateX(-50%) scale(min(1, calc(100vw / (calc(54vh - 90px) * var(--complex-ar, 1.5303)))));
  transform-origin: 50% 100%;
  height: calc(54vh - 90px);
  width: auto;
}

.complex-stage {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: var(--complex-ar, 1.5303);
  overflow: visible;
}

.complex-line,
.complex-circle,
.complex-ship,
.complex-computer,
.complex-lights {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.complex-circle-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.complex-computer-slot {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 29.35%;
}

.complex-ship-bob {
  position: absolute;
  inset: 0;
  overflow: visible;
  animation: complex-ship-bob 2.5s ease-in-out infinite;
}

.complex-ship--teal {
  pointer-events: none;
}

.complex-cell {
  animation: bring-cell 2s steps(1, end) infinite;
  animation-delay: calc(var(--d, 0s) * -1);
}

@keyframes complex-ship-bob {
  0%,
  100% {
    transform: translateY(12px);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Built under your name: group centred on the floor; extras overflow.
   --name-rest is the complete SVG pose (banner between rocket and
   the front workman). Isolated label/jetpack files are the high pose (0,0).
   Enter is off the art box, top and right of middle. */
.frame--fleet-name {
  overflow: hidden;
  --name-rest-x: -51.39%;
  --name-rest-y: 95.42%;
  --name-rest: translate(var(--name-rest-x), var(--name-rest-y));
  --name-enter: translate(38%, -210%);
  --name-man-scale: 0.8;
  --name-x: -50px;
  /* Welder feet in the shared group viewBox. Scale from here so he stays on the gantry. */
  --name-welder-ox: 22.6%;
  --name-welder-oy: 45.6%;
  --name-welder-nudge-x: 11px;
  --name-welder-nudge-y: 3px;
}

.frame--fleet-name .log-art {
  left: 50%;
  right: auto;
  bottom: 14vh;
  transform: translateX(calc(-50% + var(--name-x, 0px))) scale(min(1, calc(100vw / (calc(54vh - 40px) * var(--name-ar, 1.0438)))));
  transform-origin: 50% 100%;
  height: calc(54vh - 40px);
  width: auto;
}

.name-stage {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: var(--name-ar, 1.0438);
  overflow: visible;
}

.name-driller,
.name-group,
.name-welder,
.name-spark,
.name-banner,
.name-fore,
.name-jetpack {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.name-driller {
  z-index: 1;
}

.name-group {
  z-index: 2;
}

/* Spark, welder, and front workman are also in the group export. */
.name-group #yournamegroup-Group,
.name-group #yournamegroup-Group_5,
.name-group #yournamegroup-Group_3 {
  display: none;
}

/* Welder-only layer: same file, only the gantry man. Scale the SVG
   in CSS box space from his feet - not an inner flipped <g>. */
.name-welder #yournamegroup-MouseOff > :not(#yournamegroup-Group) {
  display: none;
}

.name-welder,
.name-spark {
  transform-origin: var(--name-welder-ox) var(--name-welder-oy);
  transform: translate(var(--name-welder-nudge-x, 0px), var(--name-welder-nudge-y, 0px))
    scale(var(--name-man-scale, 0.8));
}

.name-welder {
  z-index: 3;
}

.name-spark {
  z-index: 4;
  opacity: 0;
  animation: fix-spark-a 1.9s steps(1, end) infinite;
}

/* Fore layer is the same group file: only the front workman. */
.name-fore #yournamegroup-MouseOff > :not(#yournamegroup-Group_3) {
  display: none;
}

.name-banner {
  z-index: 5;
  opacity: 1;
  transform: var(--name-enter);
}

.name-fore {
  z-index: 6;
}

.name-jetpack {
  z-index: 7;
  opacity: 1;
  transform: var(--name-enter);
}

/* Scale toward the top of each figure so the feet stay on the
   platform / floor. 100% sank them through the baseline. */
.name-fore #yournamegroup-Group_3,
.name-driller #yournamedriller-Group,
.name-jetpack--left #yournamejetpackleft-Group,
.name-jetpack--right #yournamejetpackright-Group {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scale(var(--name-man-scale, 0.8));
}

.name-jetpack--left {
  transform-origin: 84.06% -30.05%;
}

.name-jetpack--right {
  transform-origin: 136.05% -30.83%;
}

body[data-frame="fleet-name"] .name-driller {
  animation: name-driller-nudge 6.4s ease-in-out infinite;
}

/* Same inbound on banner + both men so they hold the sign the whole way.
   Exit is a second animation (forwards only) so it does not fight the inbound. */
body[data-frame="fleet-name"] .name-banner {
  animation: name-carry-in 4s cubic-bezier(0.37, 0, 0.2, 1) 1.5s both;
}

body[data-frame="fleet-name"] .name-jetpack--left {
  animation:
    name-carry-in 4s cubic-bezier(0.37, 0, 0.2, 1) 1.5s both,
    name-jetpack-left-exit 3.7s cubic-bezier(0.4, 0, 1, 1) 6s forwards;
}

body[data-frame="fleet-name"] .name-jetpack--right {
  animation:
    name-carry-in 4s cubic-bezier(0.37, 0, 0.2, 1) 1.5s both,
    name-jetpack-right-exit 4.15s cubic-bezier(0.4, 0, 1, 1) 6.25s forwards;
}

/* In toward the rocket, pause, back out, pause. */
@keyframes name-driller-nudge {
  0%,
  16% {
    transform: translateX(0);
  }
  40%,
  58% {
    transform: translateX(-7px);
  }
  82%,
  100% {
    transform: translateX(0);
  }
}

/* One path: enter → rest. No mid stops. Banner and both men share this. */
@keyframes name-carry-in {
  0% {
    transform: var(--name-enter);
  }
  100% {
    transform: var(--name-rest);
  }
}

/* Flip, then one ease-in out of the frame. No mid waypoint. */
@keyframes name-jetpack-left-exit {
  0% {
    transform: var(--name-rest) scaleX(1);
    animation-timing-function: linear;
  }
  6% {
    transform: var(--name-rest) scaleX(-1);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  100% {
    transform: translate(
        calc(var(--name-rest-x) - 120vw),
        calc(var(--name-rest-y) - 16%)
      )
      scaleX(-1);
  }
}

@keyframes name-jetpack-right-exit {
  0% {
    transform: var(--name-rest) scaleX(1);
    animation-timing-function: linear;
  }
  6% {
    transform: var(--name-rest) scaleX(-1);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  100% {
    transform: translate(
        calc(var(--name-rest-x) + 120vw),
        calc(var(--name-rest-y) - 28%)
      )
      scaleX(-1);
  }
}

.frame--log-orbit .copy__title-row,
.frame--log-fleet .copy__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.frame--log-orbit .copy__title-row .eyebrow,
.frame--log-fleet .copy__title-row .eyebrow {
  grid-column: 1;
  grid-row: 1;
  order: unset;
}

.frame--log-orbit .copy__title-row h2,
.frame--log-fleet .copy__title-row h2 {
  grid-column: 1;
  grid-row: 2;
  order: unset;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 0 14px;
  line-height: 0.95;
  text-wrap: balance;
}

.frame--log-orbit .copy__rule,
.frame--log-fleet .copy__rule {
  display: none;
}

@media (min-width: 861px) {
  /* Absolute .copy with width:auto shrinks to content — pin left+right instead. */
  .frame--log-orbit .copy,
  .frame--log-fleet .copy {
    left: 80px;
    right: 36vw;
    width: auto;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .copy h2,
  .copy__title-row h2 {
    font-size: var(--copy-title-size);
  }

  /* Nudge right of centre from 1024 → 0 at 1200. Slope is 72px / 176px. */
  .has-facts.frame--rescue {
    --rescue-x: clamp(
      0px,
      calc((1200px - 100vw) / 176 * 72),
      var(--rescue-x-at-1024)
    );
  }

  .has-facts.frame--fix,
  .has-facts.frame--add,
  .has-facts.frame--bring {
    --orbit-y: 40px;
  }

  .has-facts.frame--fleet-hosting {
    --hosting-y: 140px;
  }

  /* Art panel is the area above the single-row facts strip. Centre in
     that box (not 100vh + strip offset - art-box top is not 0). */
  .has-facts.frame--orbit-anim .art-box {
    top: 0;
    bottom: var(--strip-h);
    height: auto;
    left: 0;
    width: 100%;
  }

  .has-facts.frame--orbit-anim .art-box,
  .has-facts.frame--orbit-anim .log-art {
    overflow: visible;
  }

  .has-facts.frame--orbit-anim .log-art {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: auto;
    height: min(var(--anim-max-h, 300px), calc((100vh - var(--strip-h)) * 0.86));
    max-width: 50vw;
    aspect-ratio: var(--orbit-ar, var(--rescue-ar, 1.7904));
    transform: translate(calc(-50% + var(--rescue-x, 0px)), calc(-50% + var(--orbit-y, 0px)));
  }

  /* Hosting: same art-panel box as orbit so the station is centred in the
     artwork area, not in a 100vh box that sits over the strip. */
  .has-facts.frame--fleet-hosting .art-box {
    top: 0;
    bottom: var(--strip-h);
    height: auto;
    left: 0;
    width: 100%;
  }

  .has-facts.frame--fleet-hosting .log-art {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: auto;
    height: calc(54vh - 40px);
    max-width: 50vw;
    aspect-ratio: var(--hosting-ar, 1.0924);
    transform: translate(-50%, calc(-50% + var(--hosting-y, 0px))) scale(min(1, calc(100vw / (calc(54vh - 40px) * var(--hosting-ar, 1.0924)))));
    transform-origin: 50% 50%;
    overflow: visible;
  }

  /* Inherited: centred floor stage in the art panel above the strip. Width may spill. */
  .has-facts.frame--fleet-inherited .art-box {
    top: 0;
    bottom: var(--strip-h);
    height: auto;
    left: 0;
    width: 100%;
    overflow: visible;
  }

  .has-facts.frame--fleet-inherited .log-art {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    width: auto;
    height: var(--inherited-stage-h);
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    padding: 0;
    overflow: visible;
  }

  .has-facts.frame--fleet-inherited .art-band {
    overflow: visible;
  }

  .has-facts.frame--fleet-inherited .inherited-stage {
    height: 100%;
    width: auto;
    aspect-ratio: var(--inherited-ar, 2.55);
    flex: none;
  }
}

.frame--log-know {
  background: var(--slate);
  align-items: flex-start;
}

.frame--log-know .copy {
  top: max(8%, 104px);
  left: 80px;
  max-width: 54ch;
  z-index: 15;
}

.frame--log-know .copy--scroll {
  max-height: calc(100vh - max(8%, 104px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 12px;
  padding-bottom: 40px;
}

.frame--log-know .copy p:not(.eyebrow) {
  max-width: none;
}

.frame--log-know .copy p:not(.eyebrow) + p,
.frame--log-know .copy__list {
  margin-top: 1em;
}

.frame--log-know .copy h3 + p,
.frame--log-know .copy h3 + .copy__list {
  margin-top: 0.35em;
}

.copy__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.copy__list li {
  font: 400 clamp(15px, 1.2vw, 18px) / 1.55 var(--body);
  color: var(--muted);
  padding: 0.35em 0 0.35em 1.1em;
  position: relative;
}

.copy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.copy__action {
  margin-top: 1.2em;
}

.copy__action a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}

.copy__action a:hover {
  text-decoration: underline;
}

.copy__action a:focus {
  outline: none;
}

.copy__action a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@keyframes log-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

.track {
  position: relative;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.strip {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.frame {
  position: relative;
  height: 100vh;
  flex: 0 0 100vw;
  width: 100vw;
  display: flex;
  align-items: center;
}

/* Main-journey copies of orbit/fleet/know - not in the scroll stack */
.is-log-only {
  display: none !important;
}

.frame--flight {
  flex-basis: 380vw;
  width: 380vw;
  --flight-beat-out: 0.32s;
  --flight-beat-in: 0.55s;
  --flight-beat-in-delay: 0.14s;
  --flight-beat-rise: 14px;
  --flight-beat-exit-rise: -10px;
  --flight-beat-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.flight-strip__panel,
.m-flight-beat-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, var(--flight-beat-rise, 14px), 0);
}

.flight-strip__panel.is-leaving,
.m-flight-beat-panel.is-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  z-index: 1;
  transform: translate3d(0, var(--flight-beat-exit-rise, -10px), 0);
  transition:
    opacity var(--flight-beat-out, 0.32s) ease,
    transform var(--flight-beat-out, 0.32s) ease,
    visibility 0s linear var(--flight-beat-out, 0.32s);
}

.flight-strip__panel.is-active,
.m-flight-beat-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--flight-beat-in, 0.55s) var(--flight-beat-ease, cubic-bezier(0.22, 1, 0.36, 1))
      var(--flight-beat-in-delay, 0.14s),
    transform var(--flight-beat-in, 0.55s) var(--flight-beat-ease, cubic-bezier(0.22, 1, 0.36, 1))
      var(--flight-beat-in-delay, 0.14s),
    visibility 0s linear var(--flight-beat-in-delay, 0.14s);
}

.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14vh;
  height: 3px;
  background: var(--ink);
  opacity: 0.85;
  border-radius: 2px;
  z-index: 1;
  transition: opacity 0.4s;
}

.m-flight-theatre {
  display: none;
}

.stage.in-space .floor {
  opacity: 0;
}

.copy {
  /* Shared panel title. Smaller than the old journey 84px / orbit 72px cap. */
  --copy-title-size: clamp(32px, 3.4vw, 54px);
  position: absolute;
  left: 7vw;
  top: 15vh;
  width: 28ch;
  max-width: 28ch;
  box-sizing: border-box;
  z-index: 8;
}

.eyebrow {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  margin: 0 0 14px;
}

.eyebrow::before {
  display: none;
}

.copy h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--copy-title-size);
  line-height: 0.95;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.copy__title-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.copy__title-row h2 {
  order: 2;
  width: 100%;
  max-width: 100%;
  text-wrap: balance;
}

.copy__title-row .eyebrow {
  order: 1;
}

.copy__rule {
  display: none;
}

.copy h3 {
  margin: 1.35em 0 0.4em;
  font: 700 18px/1.25 var(--display);
  letter-spacing: -0.01em;
}

.copy a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.copy a:focus {
  outline: none;
}

.copy a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.copy p:not(.eyebrow) {
  font: 400 clamp(15px, 1.2vw, 18px) / 1.55 var(--body);
  color: var(--muted);
  margin: 0;
  max-width: 32ch;
}

.composite {
  position: absolute;
  bottom: 14vh;
  right: 8vw;
  height: 54vh;
  z-index: 5;
}

.cen {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.composite svg.solo {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ===== Plan frame ======================================================== */
/* Stage uses plan-complete aspect ratio; layers positioned as % of stage box. */
.frame--plan {
  --plan-stage-bottom: 14vh;
  --plan-stage-h: 54vh;
  --plan-stage-x: 0vw;
  --plan-base-x: 35.05%;
  --plan-base-y: 0%;
  --plan-base-w: 45.95%;
  --plan-base-h: 87.6%;
  --plan-clip-x: 84.9%;
  --plan-clip-y: 22.5%;
  --plan-clip-w: 15.1%;
  --plan-clip-h: 29.5%;
  --plan-lines-x: 66.4%;
  --plan-lines-y: 34.6%;
  --plan-lines-w: 17.8%;
  --plan-lines-h: 39.6%;
  --plan-lines-t0: 0.5;
  --plan-lines-t1: 0.82;
}

.plan-stage {
  position: absolute;
  left: calc(50% + var(--plan-stage-x, 0vw));
  bottom: var(--plan-stage-bottom, 14vh);
  transform: translateX(-50%);
  height: var(--plan-stage-h, 54vh);
  width: calc(var(--plan-stage-h, 54vh) * var(--plan-stage-ar, 1.46));
  z-index: 5;
  pointer-events: none;
}

.plan-base {
  position: absolute;
  left: var(--plan-base-x, 35.05%);
  bottom: var(--plan-base-y, 0%);
  width: var(--plan-base-w, 45.95%);
  height: var(--plan-base-h, 87.6%);
  z-index: 1;
}

.plan-base svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plan-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.plan-piece svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plan-clipboard-group {
  position: absolute;
  left: var(--plan-clip-x, 84.9%);
  bottom: var(--plan-clip-y, 22.5%);
  width: var(--plan-clip-w, 15.1%);
  height: var(--plan-clip-h, 29.5%);
  z-index: 3;
}

.plan-clipboard {
  position: absolute;
  inset: 0;
}

.plan-clipboard svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plan-lines-mount {
  position: absolute;
  left: var(--plan-lines-x, 66.4%);
  top: var(--plan-lines-y, 34.6%);
  width: var(--plan-lines-w, 17.8%);
  height: var(--plan-lines-h, 39.6%);
  overflow: hidden;
  z-index: 1;
  --lines-a: clamp(
    0,
    calc((var(--fa, 0) - var(--plan-lines-t0, 0.5)) / (var(--plan-lines-t1, 0.82) - var(--plan-lines-t0, 0.5))),
    1
  );
  clip-path: inset(0 0 calc((1 - var(--lines-a)) * 100%) 0);
}

.plan-lines,
.plan-lines svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ===== Design frame ====================================================== */
.frame--design {
  --design-stage-bottom: 14vh;
  --design-stage-h: 54vh;
  --design-stage-x: 0vw;
  --design-p-scale: 1.27;
  --design-p: clamp(0, calc(var(--fa, 0) * var(--design-p-scale, 1.27)), 1);
}

.design-stage {
  position: absolute;
  left: calc(50% + var(--design-stage-x, 0vw));
  bottom: var(--design-stage-bottom, 14vh);
  transform: translateX(-50%);
  height: var(--design-stage-h, 54vh);
  width: calc(var(--design-stage-h, 54vh) * var(--design-stage-ar, 0.98));
  z-index: 5;
  pointer-events: none;
}

.design-layer {
  position: absolute;
  overflow: visible;
}

.design-layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.design-layer--lg {
  left: var(--des-lg-x, 0%);
  top: var(--des-lg-y, 2%);
  width: var(--des-lg-w, 100%);
  height: var(--des-lg-h, 98.4%);
  z-index: 1;
  --des-t0: var(--des-lg-t0, 0.54);
  --des-t1: var(--des-lg-t1, 0.85);
  --des-ox: var(--des-lg-ox, 50%);
  --des-oy: var(--des-lg-oy, 48%);
  --des-spin: var(--des-lg-spin, 140deg);
}

.design-layer--md {
  left: var(--des-md-x, 2.8%);
  top: var(--des-md-y, 0%);
  width: var(--des-md-w, 36.3%);
  height: var(--des-md-h, 35.7%);
  z-index: 2;
  --des-t0: var(--des-md-t0, 0.68);
  --des-t1: var(--des-md-t1, 1);
  --des-ox: var(--des-md-ox, 50%);
  --des-oy: var(--des-md-oy, 50%);
  --des-spin: var(--des-md-spin, 140deg);
}

.design-layer--sm {
  left: var(--des-sm-x, 68.5%);
  top: var(--des-sm-y, 63.8%);
  width: var(--des-sm-w, 29%);
  height: var(--des-sm-h, 28.5%);
  z-index: 3;
  --des-t0: var(--des-sm-t0, 0.63);
  --des-t1: var(--des-sm-t1, 0.95);
  --des-ox: var(--des-sm-ox, 50%);
  --des-oy: var(--des-sm-oy, 50%);
  --des-spin: var(--des-sm-spin, 140deg);
}

.design-layer--lg,
.design-layer--md,
.design-layer--sm {
  --circle-a: clamp(
    0,
    calc((var(--design-p, 0) - var(--des-t0, 0)) / (var(--des-t1, 1) - var(--des-t0, 0))),
    1
  );
  opacity: var(--circle-a);
  transform: rotate(calc((1 - var(--circle-a)) * var(--des-spin, 140deg)))
    scale(calc(0.2 + 0.8 * var(--circle-a)));
  transform-origin: var(--des-ox, 50%) var(--des-oy, 50%);
}

.design-layer--outline {
  left: var(--des-outline-x, 16%);
  top: var(--des-outline-y, 0%);
  width: var(--des-outline-w, 68%);
  height: var(--des-outline-h, 102%);
  z-index: 4;
}

.design-layer--outline svg {
  --outline-a: clamp(
    0,
    calc((var(--design-p, 0) - var(--des-outline-t0, 0)) / (var(--des-outline-t1, 0.44) - var(--des-outline-t0, 0))),
    1
  );
  -webkit-mask: conic-gradient(
    from 180deg at var(--des-wipe-x, 50%) var(--des-wipe-y, 92%),
    #000 0deg,
    #000 calc(var(--outline-a) * 360deg),
    transparent calc(var(--outline-a) * 360deg)
  );
  mask: conic-gradient(
    from 180deg at var(--des-wipe-x, 50%) var(--des-wipe-y, 92%),
    #000 0deg,
    #000 calc(var(--outline-a) * 360deg),
    transparent calc(var(--outline-a) * 360deg)
  );
}

/* ===== Test frame ======================================================== */
.frame--test {
  --test-stage-bottom: 14vh;
  --test-stage-h: 54vh;
  --test-stage-x: 0vw;
  --test-rocket-h: 54vh;
  --test-rocket-x: 0px;
  --test-rocket-y: 0px;
  --test-cog-x: 50%;
  --test-cog-y: 24vh;
  --test-cog-size: 7.4vh;
  --test-door-t0: 0.2;
  --test-door-t1: 0.42;
  --test-smoke-x: 50%;
  --test-smoke-y: 0%;
  --test-smoke-w: 72vh;
  --test-smoke-h: 32vh;
  --test-smoke-t0: 0.38;
  --test-smoke-t1: 0.58;
  --test-shake-t0: 0.52;
  --test-shake-t1: 1;
  --test-shake-amp: 5px;
  --test-shake-freq: 48;
}

.test-stage {
  position: absolute;
  left: calc(50% + var(--test-stage-x, 0vw));
  bottom: var(--test-stage-bottom, 14vh);
  transform: translateX(-50%);
  height: var(--test-stage-h, 54vh);
  width: calc(var(--test-stage-h, 54vh) * var(--test-rocket-ar, 0.651));
  z-index: 6;
  pointer-events: none;
}

.test-rig {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 72%;
  --shake-a: clamp(
    0,
    calc((var(--fa, 0) - var(--test-shake-t0, 0.52)) / (var(--test-shake-t1, 1) - var(--test-shake-t0, 0.52))),
    1
  );
  transform: translate(
      calc(sin(var(--shake-a) * var(--test-shake-freq, 48) * 1turn) * var(--test-shake-amp, 5px)),
      calc(cos(var(--shake-a) * var(--test-shake-freq, 48) * 0.85turn) * var(--test-shake-amp, 5px) * 0.35)
    );
}

.test-rocket {
  position: absolute;
  left: calc(50% + var(--test-rocket-x, 0px));
  bottom: var(--test-rocket-y, 0);
  transform: translateX(-50%);
  height: var(--test-rocket-h, 54vh);
  width: calc(var(--test-rocket-h, 54vh) * var(--test-rocket-ar, 0.651));
  z-index: 1;
}

.test-rocket svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.frame--test .cog-rig {
  --cx: var(--test-cog-x, 50%);
  --cy: var(--test-cog-y, 24vh);
  --csize: var(--test-cog-size, 7.4vh);
  z-index: 2;
}

.frame--test .test-cog-door-mount {
  position: absolute;
  left: var(--test-cog-x, 50%);
  bottom: var(--test-cog-y, 24vh);
  width: calc(var(--test-cog-size, 7.4vh) * 1.14);
  height: calc(var(--test-cog-size, 7.4vh) * 1.14);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.frame--test .test-cog-door {
  width: 100%;
  height: 100%;
  background: var(--teal);
  --fx: 0px;
  --tx: -115%;
  --fy: 0px;
  --ty: 0px;
  --t0: var(--test-door-t0, 0.2);
  --t1: var(--test-door-t1, 0.42);
}

.test-smoke {
  position: absolute;
  left: calc(var(--test-smoke-x, 50%) - var(--test-smoke-w, 72vh) / 2);
  bottom: var(--test-smoke-y, 0%);
  width: var(--test-smoke-w, 72vh);
  height: var(--test-smoke-h, 32vh);
  max-width: none;
  max-height: none;
  transform-origin: 50% 100%;
  z-index: 0;
}

.test-smoke svg,
.test-smoke__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.test-smoke__img {
  object-fit: fill;
  object-position: center bottom;
}

/* ===== Launch frame ====================================================== */
.frame--launch {
  --launch-stage-bottom: 14vh;
  --launch-stage-h: 54vh;
  --launch-stage-x: 0vw;
  --launch-rocket-h: 54vh;
  --launch-rocket-x: 0px;
  --launch-rocket-y: 0px;
  --launch-flame-x: 0px;
  --launch-flame-y: 0px;
  --launch-flame-w: 11vh;
  --launch-flame-h: 14vh;
  --launch-flame-t0: 0.385;
  --launch-flame-t1: 0.492;
  --launch-countdown-start: 3;
  --launch-countdown-delay: 1000;
  --launch-countdown-delay-fa: 0.192;
  --launch-countdown-x: 50%;
  --launch-countdown-y: 62%;
  --launch-countdown-size: 14vh;
  --launch-countdown-hide: 0.769;
  --launch-plume-x: 50%;
  --launch-plume-y: 0%;
  --launch-plume-w: 80vh;
  --launch-plume-h: 36vh;
  --launch-plume1-t0: 0.577;
  --launch-plume1-t1: 0.631;
  --launch-plume1-out0: 0.658;
  --launch-plume1-out1: 0.712;
  --launch-plume1-scale: 1;
  --launch-plume2-t0: 0.631;
  --launch-plume2-t1: 0.685;
  --launch-plume2-out0: 0.712;
  --launch-plume2-out1: 0.765;
  --launch-plume2-scale: 1.05;
  --launch-plume3-t0: 0.685;
  --launch-plume3-t1: 0.738;
  --launch-plume3-out0: 0.765;
  --launch-plume3-out1: 0.806;
  --launch-plume3-scale: 1.1;
  --launch-plume4-t0: 0.738;
  --launch-plume4-t1: 0.792;
  --launch-plume4-out0: 0.792;
  --launch-plume4-out1: 0.833;
  --launch-plume4-scale: 1.15;
  --launch-plume5-t0: 0.792;
  --launch-plume5-t1: 0.846;
  --launch-plume5-out0: 0.92;
  --launch-plume5-out1: 1;
  --launch-plume5-scale: 1.2;
  --launch-lift-t0: 0.769;
  --launch-lift-t1: 0.99;
  --launch-lift-distance: 120vh;
}

.launch-stage {
  position: absolute;
  left: calc(50% + var(--launch-stage-x, 0vw));
  bottom: var(--launch-stage-bottom, 14vh);
  transform: translateX(-50%);
  height: var(--launch-stage-h, 54vh);
  width: calc(var(--launch-stage-h, 54vh) * var(--launch-rocket-ar, 0.651));
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.launch-rig {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 100%;
  --lift-a: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-lift-t0, 0.769)) / (var(--launch-lift-t1, 0.99) - var(--launch-lift-t0, 0.769))),
    1
  );
  transform: translateY(calc(var(--launch-lift-distance, 120vh) * var(--lift-a) * -1));
}

.launch-rocket {
  position: absolute;
  left: calc(50% + var(--launch-rocket-x, 0px));
  bottom: var(--launch-rocket-y, 0px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  height: var(--launch-rocket-h, 54vh);
  width: calc(var(--launch-rocket-h, 54vh) * var(--launch-rocket-ar, 0.651));
  z-index: 1;
}

.launch-rocket svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.launch-flame {
  position: absolute;
  left: calc(50% + var(--launch-flame-x, 0px));
  bottom: calc(var(--launch-rocket-y, 0px) + var(--launch-flame-y, 0px));
  width: var(--launch-flame-w, 11vh);
  height: var(--launch-flame-h, 14vh);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  z-index: 0;
  --flame-a: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-flame-t0, 0.385)) / (var(--launch-flame-t1, 0.492) - var(--launch-flame-t0, 0.385))),
    1
  );
  opacity: var(--flame-a);
}

.launch-flame svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.launch-plume {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.launch-plume__layer {
  position: absolute;
  max-width: none;
  max-height: none;
  transform-origin: 50% 100%;
  opacity: 0;
}

.launch-plume__layer--1 {
  left: calc(var(--launch-plume1-x, 50%) - var(--launch-plume1-w, 80vh) / 2);
  bottom: var(--launch-plume1-y, 0%);
  width: var(--launch-plume1-w, 80vh);
  height: var(--launch-plume1-h, 36vh);
  --layer-in: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume1-t0, 0.577)) / (var(--launch-plume1-t1, 0.631) - var(--launch-plume1-t0, 0.577))),
    1
  );
  --layer-out: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume1-out0, 0.658)) / (var(--launch-plume1-out1, 0.712) - var(--launch-plume1-out0, 0.658))),
    1
  );
  opacity: calc(var(--layer-in) * (1 - var(--layer-out)));
  transform: scale(var(--launch-plume1-scale, 1));
}

.launch-plume__layer--2 {
  left: calc(var(--launch-plume2-x, 50%) - var(--launch-plume2-w, 80vh) / 2);
  bottom: var(--launch-plume2-y, 0%);
  width: var(--launch-plume2-w, 80vh);
  height: var(--launch-plume2-h, 36vh);
  --layer-in: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume2-t0, 0.631)) / (var(--launch-plume2-t1, 0.685) - var(--launch-plume2-t0, 0.631))),
    1
  );
  --layer-out: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume2-out0, 0.712)) / (var(--launch-plume2-out1, 0.765) - var(--launch-plume2-out0, 0.712))),
    1
  );
  opacity: calc(var(--layer-in) * (1 - var(--layer-out)));
  transform: scale(var(--launch-plume2-scale, 1.05));
}

.launch-plume__layer--3 {
  left: calc(var(--launch-plume3-x, 50%) - var(--launch-plume3-w, 80vh) / 2);
  bottom: var(--launch-plume3-y, 0%);
  width: var(--launch-plume3-w, 80vh);
  height: var(--launch-plume3-h, 36vh);
  --layer-in: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume3-t0, 0.685)) / (var(--launch-plume3-t1, 0.738) - var(--launch-plume3-t0, 0.685))),
    1
  );
  --layer-out: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume3-out0, 0.765)) / (var(--launch-plume3-out1, 0.806) - var(--launch-plume3-out0, 0.765))),
    1
  );
  opacity: calc(var(--layer-in) * (1 - var(--layer-out)));
  transform: scale(var(--launch-plume3-scale, 1.1));
}

.launch-plume__layer--4 {
  left: calc(var(--launch-plume4-x, 50%) - var(--launch-plume4-w, 80vh) / 2);
  bottom: var(--launch-plume4-y, 0%);
  width: var(--launch-plume4-w, 80vh);
  height: var(--launch-plume4-h, 36vh);
  --layer-in: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume4-t0, 0.738)) / (var(--launch-plume4-t1, 0.792) - var(--launch-plume4-t0, 0.738))),
    1
  );
  --layer-out: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume4-out0, 0.792)) / (var(--launch-plume4-out1, 0.833) - var(--launch-plume4-out0, 0.792))),
    1
  );
  opacity: calc(var(--layer-in) * (1 - var(--layer-out)));
  transform: scale(var(--launch-plume4-scale, 1.15));
}

.launch-plume__layer--5 {
  left: calc(var(--launch-plume5-x, 50%) - var(--launch-plume5-w, 80vh) / 2);
  bottom: var(--launch-plume5-y, 0%);
  width: var(--launch-plume5-w, 80vh);
  height: var(--launch-plume5-h, 36vh);
  --layer-in: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume5-t0, 0.792)) / (var(--launch-plume5-t1, 0.846) - var(--launch-plume5-t0, 0.792))),
    1
  );
  --layer-out: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-plume5-out0, 0.92)) / (var(--launch-plume5-out1, 1) - var(--launch-plume5-out0, 0.92))),
    1
  );
  opacity: calc(var(--layer-in) * (1 - var(--layer-out)));
  transform: scale(var(--launch-plume5-scale, 1.2));
}

.launch-plume__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: center bottom;
}

.launch-countdown {
  position: absolute;
  left: var(--launch-countdown-x, 50%);
  top: var(--launch-countdown-y, 62%);
  transform: translate(-50%, -50%);
  z-index: 8;
  pointer-events: none;
  --countdown-show-a: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-countdown-delay-fa, 0.192)) / 0.001),
    1
  );
  --countdown-hide-a: clamp(
    0,
    calc((var(--fa, 0) - var(--launch-countdown-hide, 0.769)) / 0.08),
    1
  );
  opacity: calc(var(--countdown-show-a) * (1 - var(--countdown-hide-a)));
}

.launch-countdown__face {
  width: var(--launch-countdown-size, 14vh);
  height: var(--launch-countdown-size, 14vh);
  border-radius: 50%;
  border: 3px solid var(--teal);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent);
}

.launch-countdown__num {
  font: 800 clamp(28px, calc(var(--launch-countdown-size, 14vh) * 0.55), 72px) / 1 var(--display);
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ===== Support frame ===================================================== */
.frame--support {
  --support-stage-bottom: 14vh;
  --support-stage-h: 54vh;
  --support-stage-x: 0vw;
  --support-rocket-h: 54vh;
  --support-rocket-x: 0px;
  --support-rocket-y: 0px;
  --support-cog-x: 50%;
  --support-cog-y: 13vh;
  --support-cog-size: 8.25vh;
  --support-cog-spin: 0.62;
  --support-flame-x: 58%;
  --support-flame-y: 16vh;
  --support-flame-h: 13vh;
  --support-flame-shake-t0: 0.3;
  --support-flame-shake-t1: 0.55;
  --support-flame-shake-amp: 4px;
  --support-flame-shake-freq: 56;
  --support-ext-x: 66%;
  --support-ext-y: 10vh;
  --support-ext-h: 22vh;
  --support-foam-x: 72%;
  --support-foam-y: 14vh;
  --support-foam-w: 14vh;
  --support-foam-h: 10vh;
  --support-foam-t0: 0.12;
  --support-foam-t1: 0.58;
  --support-spanner-x: 54%;
  --support-spanner-y: 12vh;
  --support-spanner-h: 9vh;
}

.support-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--support-stage-bottom, 14vh);
  height: var(--support-stage-h, 54vh);
  z-index: 6;
  pointer-events: none;
}

.support-rocket {
  position: absolute;
  left: calc(50% + var(--support-stage-x, 0vw) + var(--support-rocket-x, 0px));
  bottom: var(--support-rocket-y, 0);
  transform: translateX(-50%);
  height: var(--support-rocket-h, 54vh);
  width: calc(var(--support-rocket-h, 54vh) * var(--support-rocket-ar, 0.651));
  z-index: 1;
  overflow: visible;
}

.support-rocket svg {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.frame--support .cog-rig {
  --cx: var(--support-cog-x, 50%);
  --cy: var(--support-cog-y, 13vh);
  --csize: var(--support-cog-size, 8.25vh);
  left: var(--support-cog-x, 50%);
  z-index: 2;
}

.support-flame {
  position: absolute;
  left: calc(var(--support-flame-x, 58%) - var(--support-flame-w, calc(var(--support-flame-h, 13vh) * var(--support-flame-ar, 0.79))) / 2);
  bottom: var(--support-flame-y, 16vh);
  width: calc(var(--support-flame-h, 13vh) * var(--support-flame-ar, 0.79));
  height: var(--support-flame-h, 13vh);
  z-index: 6;
}

.support-flame__shake {
  width: 100%;
  height: 100%;
  --shake-a: clamp(
    0,
    calc((var(--fa, 0) - var(--support-flame-shake-t0, 0.3)) / (var(--support-flame-shake-t1, 0.55) - var(--support-flame-shake-t0, 0.3))),
    1
  );
  transform: translate(
      calc(sin(var(--shake-a) * var(--support-flame-shake-freq, 56) * 1turn) * var(--support-flame-shake-amp, 4px)),
      calc(cos(var(--shake-a) * var(--support-flame-shake-freq, 56) * 0.85turn) * var(--support-flame-shake-amp, 4px) * 0.35)
    );
}

.support-flame__anim {
  width: 100%;
  height: 100%;
  --t0: var(--support-flame-t0, 0.3);
  --t1: var(--support-flame-t1, 0.55);
  --fo: var(--support-flame-fo, 1);
  --to: var(--support-flame-to, 0);
  --fr: var(--support-flame-fr, 0deg);
  --tr: var(--support-flame-tr, 0deg);
  transform-origin: var(--support-flame-origin-x, 50%) var(--support-flame-origin-y, 100%);
}

.support-flame__anim svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.support-ext {
  position: absolute;
  left: calc(var(--support-ext-x, 66%) - var(--support-ext-w, calc(var(--support-ext-h, 22vh) * var(--support-ext-ar, 1.62))) / 2);
  bottom: var(--support-ext-y, 10vh);
  width: calc(var(--support-ext-h, 22vh) * var(--support-ext-ar, 1.62));
  height: var(--support-ext-h, 22vh);
  z-index: 7;
  --t0: var(--support-ext-t0, 0);
  --t1: var(--support-ext-t1, 0.28);
  --fr: var(--support-ext-fr, 20deg);
  --tr: var(--support-ext-tr, -8deg);
  --origin: var(--support-ext-origin-x, 30%) var(--support-ext-origin-y, 82%);
  transform-origin: var(--origin);
}

.support-ext svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.support-foam {
  position: absolute;
  left: calc(var(--support-foam-x, 72%) - var(--support-foam-w, 14vh) / 2);
  bottom: var(--support-foam-y, 14vh);
  width: var(--support-foam-w, 14vh);
  height: var(--support-foam-h, 10vh);
  max-width: none;
  max-height: none;
  z-index: 8;
  overflow: hidden;
  --t0: var(--support-foam-t0, 0.12);
  --t1: var(--support-foam-t1, 0.58);
  --in: var(--support-foam-in, 0.3);
  --out: var(--support-foam-out, 0.4);
  --a: clamp(
    0,
    calc((var(--fa, 0) - var(--t0, 0.12)) / (var(--t1, 0.58) - var(--t0, 0.12))),
    1
  );
  clip-path: inset(0 0 0 calc((1 - var(--a)) * 100%));
}

.support-foam__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: center center;
  transform-origin: var(--support-foam-origin-x, 0%) var(--support-foam-origin-y, 50%);
  transform: rotate(
    calc(
      var(--support-foam-fr, 0deg) +
        (var(--support-foam-tr, 0deg) - var(--support-foam-fr, 0deg)) * var(--a, 0)
    )
  );
}

.support-spanner {
  position: absolute;
  left: calc(var(--support-spanner-x, 54%) - var(--support-spanner-w, calc(var(--support-spanner-h, 9vh) * var(--support-spanner-ar, 1.5))) / 2);
  bottom: var(--support-spanner-y, 12vh);
  width: calc(var(--support-spanner-h, 9vh) * var(--support-spanner-ar, 1.5));
  height: var(--support-spanner-h, 9vh);
  z-index: 9;
  --t0: var(--support-spanner-t0, 0.5);
  --t1: var(--support-spanner-t1, 0.95);
  --rotate-t1: var(--support-spanner-rotate-t1, 0.7);
  --in: var(--support-spanner-in, 0.25);
  --out0: var(--support-spanner-out0, 0.82);
  --out1: var(--support-spanner-out1, 0.95);
  --a: clamp(
    0,
    calc((var(--fa, 0) - var(--t0, 0.5)) / (var(--t1, 0.95) - var(--t0, 0.5))),
    1
  );
  --rotate-a: clamp(
    0,
    calc((var(--fa, 0) - var(--t0, 0.5)) / (var(--rotate-t1, 0.7) - var(--t0, 0.5))),
    1
  );
  --fade-in: min(calc(var(--a) / var(--in, 0.25)), 1);
  --fade-out: clamp(
    0,
    calc((var(--fa, 0) - var(--out0, 0.82)) / (var(--out1, 0.95) - var(--out0, 0.82))),
    1
  );
  --origin: var(--support-spanner-origin-x, 100%) var(--support-spanner-origin-y, 50%);
  transform-origin: var(--origin);
  transform: rotate(
    calc(
      var(--support-spanner-fr, -26deg) +
        (var(--support-spanner-tr, 30deg) - var(--support-spanner-fr, -26deg)) * var(--rotate-a)
    )
  );
  opacity: calc(var(--fade-in) * (1 - var(--fade-out)));
}

.support-spanner svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ===== Re-design frame =================================================== */
.frame--redesign .copy h2,
.frame--redesign .copy__title-row .eyebrow {
  white-space: nowrap;
}

.frame--redesign {
  --redesign-stage-bottom: 14vh;
  --redesign-stage-h: 54vh;
  --redesign-stage-x: 0vw;
  --redesign-purple-x: 50%;
  --redesign-purple-y: 0vh;
  --redesign-purple-h: 54vh;
  --redesign-teal-x: 50%;
  --redesign-teal-y: 0vh;
  --redesign-teal-h: 54vh;
  --redesign-teal-t0: 0.702;
  --redesign-teal-t1: 0.926;
  --redesign-roller-x: 48%;
  --redesign-roller-h: 14vh;
  --redesign-roller-start: 44vh;
  --redesign-roller-end: 24vh;
  --redesign-roller-t0: 0.693;
  --redesign-roller-t1: 0.916;
  --redesign-roller-in0: 0.683;
  --redesign-roller-in1: 0.73;
  --redesign-roller-out0: 0.944;
  --redesign-roller-out1: 0.991;
  --redesign-cover-t0: 0.069;
  --redesign-cover-t1: 0.326;
  --redesign-uncover-t0: 0.395;
  --redesign-uncover-t1: 0.608;
}

.redesign-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--redesign-stage-bottom, 14vh);
  height: var(--redesign-stage-h, 54vh);
  z-index: 6;
  pointer-events: none;
}

.redesign-purple,
.redesign-teal {
  position: absolute;
  transform: translateX(-50%);
}

.redesign-purple {
  left: calc(var(--redesign-purple-x, 50%) + var(--redesign-stage-x, 0vw));
  bottom: var(--redesign-purple-y, 0);
  height: var(--redesign-purple-h, 54vh);
  width: calc(var(--redesign-purple-h, 54vh) * var(--redesign-purple-ar, 0.651));
  z-index: 1;
  overflow: visible;
}

.redesign-rusty,
.redesign-new,
.redesign-blocks {
  position: absolute;
  inset: 0;
}

.redesign-rusty,
.redesign-new {
  --swap: var(--redesign-cover-t1, 0.326);
  --swapped: clamp(
    0,
    calc((var(--fa, 0) - var(--swap)) / 0.001),
    1
  );
}

.redesign-rusty {
  z-index: 1;
  opacity: calc(1 - var(--swapped));
}

.redesign-new {
  z-index: 2;
  opacity: var(--swapped);
}

.redesign-blocks {
  z-index: 5;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  overflow: visible;
}

.redesign-blocks__row {
  flex: 1 1 0;
  display: flex;
  min-height: 0;
  overflow: visible;
  position: relative;
}

.redesign-block {
  flex: 1 1 0;
  min-width: 0;
  background: var(--slate, #30343d);
  /* Overlap neighbours so sub-pixel flex gaps do not read as keylines. */
  transform: scale(1.22);
  transform-origin: center;
  box-shadow: 0 0 0 3px var(--slate, #30343d);
  --rows: 7;
  --cols: 5;
  --cover-t0: var(--redesign-cover-t0, 0.069);
  --cover-t1: var(--redesign-cover-t1, 0.326);
  --uncover-t0: var(--redesign-uncover-t0, 0.395);
  --uncover-t1: var(--redesign-uncover-t1, 0.608);
  --row-span: calc((var(--cover-t1) - var(--cover-t0)) / var(--rows));
  --col-span: calc(var(--row-span) * 0.28);
  --cover-at: calc(
    var(--cover-t0) + var(--row) * var(--row-span) + var(--col) * var(--col-span)
  );
  --uncover-at: calc(
    var(--uncover-t0) + (var(--rows) - 1 - var(--row)) * var(--row-span) +
      (var(--cols) - 1 - var(--col)) * var(--col-span)
  );
  --covered: clamp(0, calc((var(--fa, 0) - var(--cover-at)) / 0.001), 1);
  --uncovered: clamp(0, calc((var(--fa, 0) - var(--uncover-at)) / 0.001), 1);
  opacity: calc(var(--covered) * (1 - var(--uncovered)));
}

.redesign-teal {
  left: calc(var(--redesign-teal-x, 50%) + var(--redesign-stage-x, 0vw));
  bottom: var(--redesign-teal-y, 0);
  height: var(--redesign-teal-h, 54vh);
  width: calc(var(--redesign-teal-h, 54vh) * var(--redesign-teal-ar, 0.651));
  z-index: 2;
  overflow: hidden;
}

.redesign-teal__swipe {
  width: 100%;
  height: 100%;
  --t0: var(--redesign-teal-t0, 0.702);
  --t1: var(--redesign-teal-t1, 0.926);
  --a: clamp(
    0,
    calc((var(--fa, 0) - var(--t0, 0.702)) / (var(--t1, 0.926) - var(--t0, 0.702))),
    1
  );
  clip-path: inset(0 0 calc((1 - var(--a)) * 100%) 0);
}

.redesign-purple svg,
.redesign-rusty svg,
.redesign-new svg,
.redesign-teal__swipe svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.redesign-roller {
  position: absolute;
  left: calc(
    var(--redesign-roller-x, 48%) -
      calc(var(--redesign-roller-h, 14vh) * var(--redesign-roller-ar, 0.85)) / 2
  );
  height: var(--redesign-roller-h, 14vh);
  width: calc(var(--redesign-roller-h, 14vh) * var(--redesign-roller-ar, 0.85));
  z-index: 7;
  --t0: var(--redesign-roller-t0, 0.693);
  --t1: var(--redesign-roller-t1, 0.916);
  --roller-a: clamp(
    0,
    calc((var(--fa, 0) - var(--t0, 0.693)) / (var(--t1, 0.916) - var(--t0, 0.693))),
    1
  );
  bottom: calc(
    var(--redesign-roller-end, 24vh) +
      (var(--redesign-roller-start, 44vh) - var(--redesign-roller-end, 24vh)) * (1 - var(--roller-a))
  );
  --out0: var(--redesign-roller-out0, 0.944);
  --out1: var(--redesign-roller-out1, 0.991);
  --in0: var(--redesign-roller-in0, 0.683);
  --in1: var(--redesign-roller-in1, 0.73);
  --roller-in: clamp(
    0,
    calc((var(--fa, 0) - var(--in0)) / (var(--in1) - var(--in0))),
    1
  );
  --roller-fade: clamp(
    0,
    calc((var(--fa, 0) - var(--out0)) / (var(--out1) - var(--out0))),
    1
  );
  opacity: calc(var(--roller-in) * (1 - var(--roller-fade)));
}

.redesign-roller svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ===== Build frame tuning ================================================
   Inspector: select  section.frame.frame--build
   Rocket, cogs, crane and wire share .build-stage. Desktop stays at 65.5vh
   like Plan/Test stay at 54vh. Crane is pinned from the rocket centre by a
   vh offset (30% of the 16:9 authoring width), so it does not slide as the
   panel gets thinner.
   Layout numbers live in config/build-layout.json (injected on .frame--build). */
.frame--build {
  --build-body-h: 42vh;
  --build-floor-lift: 0.1vh;
  --build-stage-extra: 0.42;
  --build-stage-x: 0vw;
  --build-rocket-x: 18px;
  --build-rocket-y: 0px;
  --build-nose-start: calc(var(--build-body-h) * -0.15);
  --build-nose-overlap: 0.05vh;
  --build-nose-t0: 0;
  --build-nose-t1: 0.86;
  --build-cog-x: 52%;
  --build-cog-y: 13.05vh;
  --build-cog-size: 6.6vh;
  --build-crane-right: 30%;
  --build-crane-ratio: 0.3;
  --build-crane-bottom: 0%;
  --build-crane-h: 100%;
  --build-wire-width: 10px;
  --build-wire-left: 50%;
  --build-wire-top: 9.2%;
  --build-wire-height: 16.8%;
  --build-door-t0: 0.78;
  --build-door-t1: 1;
  --build-wire-t0: 0.89;
  --build-wire-t1: 1;
}

/* Shared stage — rocket body, nose, cogs (wire is a sibling layer beneath the stage) */
.build-stage {
  position: absolute;
  left: calc(50% + var(--build-stage-x, 0vw));
  bottom: calc(14vh + var(--build-floor-lift, 0));
  transform: translateX(-50%);
  width: calc(var(--build-body-h) * var(--build-body-ar, 0.78) * 2.4);
  height: calc(var(--build-body-h) * (1 + var(--build-stage-extra, 0.42)));
  z-index: 6;
  pointer-events: none;
}

.build-rocket {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(calc(-50% + var(--build-rocket-x, 0px)), var(--build-rocket-y, 0px));
  z-index: 1;
}

.build-rocket__stack {
  position: relative;
}

.build-rocket__body {
  height: var(--build-body-h, 42vh);
  width: calc(var(--build-body-h, 42vh) * var(--build-body-ar, 0.78));
}

.build-rocket__body svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.build-rocket__nose-mount {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--build-nose-overlap, 0.05vh));
  transform: translateX(-50%);
  width: calc(var(--build-body-h, 42vh) * var(--build-nose-ratio, 0.195) * var(--build-nose-ar, 1.64));
  height: calc(var(--build-body-h, 42vh) * var(--build-nose-ratio, 0.195));
  z-index: 4;
}

.build-rocket__nose {
  width: 100%;
  height: 100%;
  --fx: 0px;
  --tx: 0px;
  --fy: var(--build-nose-start);
  --ty: 0px;
  --t0: var(--build-nose-t0, 0);
  --t1: var(--build-nose-t1, 0.86);
}

.build-rocket__nose svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.frame--build .cog-rig {
  --cx: var(--build-cog-x, 54%);
  --cy: var(--build-cog-y, 62%);
  --csize: var(--build-cog-size, 17%);
  z-index: 3;
}

/* Teal hatch door — slides over cog opening after nose drop completes */
.frame--build .build-cog-door-mount {
  position: absolute;
  left: var(--build-cog-x, 52%);
  bottom: var(--build-cog-y, 13.05vh);
  width: calc(var(--build-cog-size, 6.6vh) * 1.14);
  height: calc(var(--build-cog-size, 6.6vh) * 1.14);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.frame--build .build-cog-door {
  width: 100%;
  height: 100%;
  background: var(--teal);
  --fx: -115%;
  --tx: 0px;
  --fy: 0px;
  --ty: 0px;
  --t0: var(--build-door-t0);
  --t1: var(--build-door-t1);
}

.frame--build .build-wire {
  position: absolute;
  left: var(--build-wire-left, 50%);
  top: var(--build-wire-top, 9.2%);
  width: var(--build-wire-width, 10px);
  height: var(--build-wire-height, 16.8%);
  background: #fff;
  border-radius: 3px;
  --wire-t0: var(--build-wire-t0);
  --wire-t1: var(--build-wire-t1);
  --wire-a: clamp(
    0,
    calc((var(--fa, 0) - var(--wire-t0)) / (var(--wire-t1) - var(--wire-t0))),
    1
  );
  transform: translateX(-50%) scaleY(calc(1 - var(--wire-a)));
  transform-origin: top center;
  z-index: 0;
  pointer-events: none;
}

.frame--build .cranerig {
  right: var(--build-crane-right, 30%);
  bottom: var(--build-crane-bottom, 0%);
  height: var(--build-crane-h, 100%);
  width: auto;
  left: auto;
  z-index: 7;
}

.art-band,
.art-box {
  display: contents;
}

.facts-strip {
  display: none;
}

.facts-strip__count,
.facts-strip__track {
  display: none;
}

.facts-slot {
  background: var(--card);
  padding: 12px 14px 14px;
  min-width: 0;
}

.facts-slot--teal {
  border-top: 3px solid var(--teal);
}

.facts-slot--amber {
  border-top: 3px solid var(--amber);
}

.facts-slot--coral {
  border-top: 3px solid var(--coral);
  background: var(--card);
  background-image: linear-gradient(rgba(234, 104, 84, 0.14), rgba(234, 104, 84, 0.14));
}

.facts-slot--gold {
  border-top: 3px solid var(--gold);
  background: var(--card);
  background-image: linear-gradient(rgba(252, 181, 47, 0.1), rgba(252, 181, 47, 0.1));
}

.facts-slot__label {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

.facts-slot__num {
  color: var(--muted);
  margin-right: 0.4em;
}

.facts-slot__body {
  font: 400 16px/1.45 var(--body);
  color: #c3c9d3;
  margin: 0;
}

@media (min-width: 861px) {
  .has-facts {
    /* 16:9 authoring width as vh (100vw at 16:9). Stages scale down when the window is thinner. */
    --d-src-w: calc(100vh * 16 / 9);
    --d-fit: min(1, calc(100vw / var(--d-src-w)));
  }

  .has-facts .art-band {
    display: block;
    position: absolute;
    inset: 0;
    overflow: visible;
    z-index: 5;
    pointer-events: none;
  }

  .has-facts .art-box {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    bottom: calc(var(--strip-h) - 14vh);
  }


  .has-facts .floor {
    bottom: var(--strip-h);
    height: 5px;
    background: var(--ink);
    opacity: 1;
    border-radius: 0;
    z-index: 20;
  }

  .has-facts .copy {
    top: max(8%, 104px);
    left: 80px;
    z-index: 15;
  }

  .has-facts .facts-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--strip-h);
    box-sizing: border-box;
    padding: 14px 80px 32px;
    background: var(--strip);
    z-index: 12;
  }

  .facts-strip__slots {
    display: contents;
  }

  body:has(.has-facts) .hint,
  body:has(.stage.in-space) .hint {
    bottom: calc(var(--strip-h) + 16px);
  }

  /* Full-bleed scenes lock to the 16:9 box and scale as one piece. */
  .has-facts .support-stage,
  .has-facts .redesign-stage {
    left: 50%;
    right: auto;
    width: var(--d-src-w);
    height: var(--support-stage-h, 54vh);
    transform: translateX(-50%) scale(var(--d-fit, 1));
    transform-origin: 50% 100%;
  }

  .has-facts .redesign-stage {
    height: var(--redesign-stage-h, 54vh);
  }

  /* Fixed 16:9-of-height box, centred. No --d-fit and no min(100%) - those
     change the stage width and slide % positions (crane.right). The panel
     just crops the sides as it gets thinner. */
  .has-facts .build-stage {
    left: 50%;
    right: auto;
    width: var(--d-src-w);
    height: 65.5vh;
    bottom: calc(14vh + var(--build-floor-lift, 0));
    transform: translateX(-50%);
    transform-origin: 50% 100%;
  }

  /* Pin from the rocket (stage centre). Selector is .has-facts.frame--build
     (same element) - a descendant .has-facts .frame--build never matched. */
  .has-facts.frame--build .cranerig {
    left: 50%;
    right: auto;
    transform: translateX(
      calc(var(--d-src-w) * (0.5 - var(--build-crane-ratio, 0.3)) - 100%)
    );
  }

  .has-facts .plan-stage,
  .has-facts .design-stage,
  .has-facts .test-stage,
  .has-facts .launch-stage {
    transform: translateX(-50%) scale(min(1, calc(100vw / (var(--d-src-h, 54vh) * var(--d-stage-ar, 1)))))
      !important;
    transform-origin: 50% 100%;
  }

  .has-facts .plan-stage {
    --d-stage-ar: var(--plan-stage-ar, 1.46);
    --d-src-h: var(--plan-stage-h, 54vh);
  }

  .has-facts .design-stage {
    --d-stage-ar: var(--design-stage-ar, 0.98);
    --d-src-h: var(--design-stage-h, 54vh);
  }

  .has-facts .test-stage {
    --d-stage-ar: var(--test-rocket-ar, 0.651);
    --d-src-h: var(--test-stage-h, 54vh);
  }

  .has-facts .launch-stage {
    --d-stage-ar: var(--launch-rocket-ar, 0.651);
    --d-src-h: var(--launch-stage-h, 54vh);
  }
}

.lyr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.el {
  position: absolute;
}

.el svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.anim {
  --a: clamp(
    0,
    calc((var(--fa, 1) - var(--t0, 0)) / (var(--t1, 1) - var(--t0, 0))),
    1
  );
  transform: translate(
      calc(var(--fx, 0px) + (var(--tx, 0px) - var(--fx, 0px)) * var(--a)),
      calc(var(--fy, 0px) + (var(--ty, 0px) - var(--fy, 0px)) * var(--a))
    )
    rotate(calc(var(--fr, 0deg) + (var(--tr, 0deg) - var(--fr, 0deg)) * var(--a)))
    scale(calc(var(--fs, 1) + (var(--ts, 1) - var(--fs, 1)) * var(--a)));
  opacity: calc(var(--fo, 1) + (var(--to, 1) - var(--fo, 1)) * var(--a));
  transform-origin: var(--origin, center);
}

.pulse {
  opacity: clamp(
    0,
    min(calc(var(--a) / var(--in, 0.25)), calc((1 - var(--a)) / var(--out, 0.25))),
    1
  );
}

.fbeats {
  position: absolute;
  left: 50%;
  top: 15vh;
  transform: translateX(-50%);
  width: min(46ch, 82vw);
  text-align: center;
  z-index: 8;
  pointer-events: none;
}

.flight-copy {
  position: absolute;
  left: 7vw;
  top: 15vh;
  width: 28ch;
  max-width: 28ch;
  box-sizing: border-box;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stage.in-space .flight-copy {
  opacity: 1;
}

@media (min-width: 861px) {
  .flight-copy {
    top: max(8%, 104px);
    left: 80px;
  }
}

.fbeat {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.fbeat .eyebrow {
  justify-content: center;
  color: var(--amber);
}

.fbeat h3 {
  font: 800 clamp(26px, 3.6vw, 48px) / 1 var(--display);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.fbeat p {
  font: 400 clamp(15px, 1.4vw, 19px) / 1.55 var(--body);
  color: var(--muted);
  margin: 0 auto;
  max-width: 34ch;
}

.flight-strip {
  display: none;
}

@media (min-width: 861px) {
  .stage.in-space .flight-strip {
    display: grid;
    grid-template-rows: var(--flight-tab-h) minmax(0, 1fr);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--strip-h);
    box-sizing: border-box;
    padding: 0 48px 32px;
    background: var(--strip);
    z-index: 12;
    pointer-events: auto;
  }

  .stage.in-space .flight-strip::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 5px;
    background: var(--ink);
  }

  .flight-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    height: var(--flight-tab-h);
  }

  .flight-tabs__track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    pointer-events: none;
  }

  .flight-tabs__progress {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
  }

  .flight-tab {
    appearance: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0 8px 10px 0;
    text-align: left;
    cursor: pointer;
    font: 700 13px/1.2 var(--display);
    color: #8b929e;
    min-width: 0;
  }

  .flight-tab.is-active {
    font-weight: 800;
    color: var(--ink);
  }

  .flight-tab:focus {
    outline: none;
  }

  .flight-tab:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
  }

  .flight-tab__short {
    display: none;
  }

  .flight-tab__num {
    font: 700 11px/1 var(--display);
    letter-spacing: 0.12em;
    margin-right: 0.35em;
  }

  .flight-strip__panels {
    display: grid;
    min-height: 0;
  }

  .flight-strip__panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    height: 100%;
    padding-top: 12px;
    align-items: stretch;
  }

  .flight-strip .facts-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 861px) and (max-width: 1299px) {
  .flight-tab__num,
  .flight-tab__full {
    display: none;
  }

  .flight-tab__short {
    display: inline;
  }
}

.fbeat {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.fbeat .eyebrow {
  justify-content: center;
  color: var(--amber);
}

.fbeat h3 {
  font: 800 clamp(26px, 3.6vw, 48px) / 1 var(--display);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.fbeat p {
  font: 400 clamp(15px, 1.4vw, 19px) / 1.55 var(--body);
  color: var(--muted);
  margin: 0 auto;
  max-width: 34ch;
}

/* ===== COG RIG (real artwork) ============================================
   Clipped rounded square; large cog CW, two small cogs CCW.
   Optional .gated + data-spin-at pauses until frame progress (Support). */
.cog-rig {
  position: absolute;
  z-index: 6;
  left: var(--cx, 50%);
  bottom: var(--cy, 30vh);
  width: var(--csize, 5vh);
  height: var(--csize, 5vh);
  transform: translateX(-50%);
}

.cog-rig__clip {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14%;
  background: #191919;
}

.cog-rig__gear {
  position: absolute;
  display: block;
  transform-origin: center center;
  pointer-events: none;
}

.cog-rig__gear--lg {
  width: 94.4%;
  left: -26.2%;
  top: 16.8%;
  animation: cog-cw var(--cog-dur-lg, 12s) linear infinite;
}

.cog-rig__gear--sm {
  width: 61%;
}

.cog-rig__gear--sm1 {
  right: -16%;
  top: -20%;
  animation: cog-ccw var(--cog-dur-sm, 7s) linear infinite;
}

.cog-rig__gear--sm2 {
  right: -23%;
  bottom: -16%;
  animation: cog-ccw var(--cog-dur-sm, 7s) linear infinite;
}

@keyframes cog-cw {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cog-ccw {
  to {
    transform: rotate(-360deg);
  }
}

.cog-rig.gated .cog-rig__gear {
  animation-play-state: paused;
}

.cog-rig.gated.go .cog-rig__gear {
  animation-play-state: running;
}

/* Legacy placeholder cogs — removed; kept empty to avoid stale refs */
.cogbox {
  display: none;
}

.cranerig {
  position: absolute;
  bottom: 14vh;
  right: 4vw;
  height: 72vh;
  z-index: 6;
}

.cranerig .crane-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.guideline {
  position: absolute;
  left: var(--linex, 21%);
  top: var(--linetop, 6%);
  height: calc(var(--linebot, 55%) - var(--linetop, 6%));
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 1;
}

.cone {
  position: absolute;
  left: var(--linex, 21%);
  top: var(--conetop, 7%);
  height: var(--coneh, 13%);
  z-index: 2;
}

.cone svg {
  height: 100%;
  width: auto;
  display: block;
  overflow: visible;
}

.slot {
  position: absolute;
  left: var(--flight-slot-x, 50%);
  top: var(--flight-slot-y, 46%);
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

@media (min-width: 861px) {
  .stage.in-space .slot {
    left: 62%;
    /* Slot origin is the rocket's top-left; lift by half the rocket height
       so the body sits in the middle of the band above the strip. */
    top: calc(
      (100% - var(--strip-h)) / 2 -
        (var(--flight-rocket-w, 54vh) / (2 * var(--flight-horiz-ar, 1.67)))
    );
  }
}

.flight-rig {
  position: relative;
  width: 0;
  height: 0;
}

.slot.r-flight .flight-rig {
  animation: flight-bob var(--flight-bob-dur, 3.2s) ease-in-out infinite;
}

@keyframes flight-bob {
  0%,
  100% {
    transform: translateY(calc(var(--flight-bob-amp, 12px) * -1));
  }

  50% {
    transform: translateY(var(--flight-bob-amp, 12px));
  }
}

.flight-rocket-wrap {
  position: absolute;
  left: var(--flight-rocket-x, 0px);
  top: var(--flight-rocket-y, 0px);
  transform: translate(-50%, -50%);
  width: var(--flight-rocket-w, 54vh);
}

.rk-flight {
  position: relative;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s;
}

.rk-flight svg {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  overflow: visible;
}

.stick {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--flight-stick-overlap, 18px));
  transform: translateX(-50%);
  display: block;
  width: var(--flight-stick-w, 11px);
  height: var(--flight-stick-h, 36vh);
  background: var(--wood);
  border-radius: 6px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

body.flight-tuning .stage {
  overflow: visible;
}

.slot.r-flight .rk-flight {
  opacity: 1;
}

.slot.r-flight .stick {
  opacity: 1;
}

.slot.r-flight-reverse .flight-rocket-wrap {
  transform: translate(-50%, -50%) scaleX(-1);
}

.stars {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.planet,
.flight-prop {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.flight-prop {
  height: var(--fh, 20vh);
  width: calc(var(--fh, 20vh) * var(--far, 1));
}

.flight-prop--blue {
  --far: var(--flight-blue-ar, 0.87);
}

.flight-prop--moon {
  --far: var(--flight-moon-ar, 1);
}

.flight-prop--red {
  --far: var(--flight-red-ar, 1.08);
}

.flight-prop--rings {
  --far: var(--flight-rings-ar, 0.96);
}

.flight-prop--alien {
  --far: var(--flight-alien-ar, 1.56);
  animation: flight-alien-drift 9s ease-in-out infinite;
}

.flight-prop svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes flight-alien-drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }

  25% {
    transform: translate(2.5vw, -2.5vh) rotate(3deg);
  }

  50% {
    transform: translate(-1.5vw, -4vh) rotate(-2deg);
  }

  75% {
    transform: translate(3vw, -1.5vh) rotate(5deg);
  }
}

.hero {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: 0;
}

.cta {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.hero .logo {
  position: absolute;
  top: 36px;
  left: 80px;
  width: 200px;
  min-width: 140px;
  height: auto;
  aspect-ratio: 476 / 150;
  overflow: visible;
  z-index: 16;
}

.hero-copy {
  position: absolute;
  left: 80px;
  top: 238px;
  transform: none;
  max-width: min(560px, 52vw);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(56vw, 800px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  line-height: 0;
}

.hero-art__img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-cue {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 0;
  height: 56px;
  padding: 0 26px;
  border: 1px solid #fcb52f;
  border-radius: 3px;
  background: rgba(252, 181, 47, 0.09);
  color: #fcb52f;
  font: 700 17px/1 var(--display);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.hero-cue:focus {
  outline: none;
}

.hero-cue__mark {
  width: 17px;
  height: 12px;
  flex: 0 0 auto;
  background: #fcb52f;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: hero-cue-nudge 2.2s ease-in-out infinite;
}

@keyframes hero-cue-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue__mark {
    animation: none;
  }
}

body.cue-spent .hero-cue {
  display: none;
}

.hint {
  display: none !important;
}

.hero-strapline {
  margin: 0;
  font: 400 clamp(11px, 1.2vw, 13px) / 1.15 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-strapline, #fcb52f);
  white-space: nowrap;
}

.cta-head__home {
  position: absolute;
  top: 36px;
  left: 80px;
  display: block;
  text-decoration: none;
  z-index: 16;
}

.cta-head__home:focus {
  outline: none;
}

.cta-head__home:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.cta .logo {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  width: 200px;
  min-width: 140px;
  height: auto;
  aspect-ratio: 476 / 150;
  margin: 0;
  overflow: visible;
  flex: 0 0 auto;
}

.cta h2 {
  grid-area: title;
  font: 800 clamp(40px, 4.5vw, 64px) / 0.96 var(--display);
  margin: 0;
  letter-spacing: -0.02em;
}

.cta .sub {
  margin: 0 0 22px;
  max-width: 520px;
}

.cta-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 48px minmax(0, 1fr);
  grid-template-areas:
    "title . ."
    "form or talk";
  column-gap: 28px;
  row-gap: 10px;
  align-content: center;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  padding: 120px 80px 110px;
  position: relative;
  z-index: 8;
}

.cta-col--form {
  grid-area: form;
  min-width: 0;
}

.cta-col--talk {
  grid-area: talk;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.cta-col--talk h3 {
  font: 800 32px / 1.1 var(--display);
  margin: 0 0 10px;
}

.cta-talk__sub {
  margin: 0 0 28px;
  max-width: 32ch;
  color: var(--muted);
  font: 400 17px / 1.55 var(--body);
}

.cta-phone-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  width: 100%;
}

.cta-phone__label,
.cta-book__label {
  margin: 0;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f7885;
}

.cta-phone__hours {
  margin: 4px 0 0;
  font: 400 15px/1.4 var(--body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.cta-phone {
  display: block;
  margin: 8px 0 28px;
  font: 800 40px/1 var(--display);
  letter-spacing: -0.01em;
  color: var(--teal);
  text-decoration: none;
}

.cta-phone:hover {
  color: #3ad4db;
}

.cta-phone:focus {
  outline: none;
}

.cta-phone:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.cta-book__label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 0 14px;
}

.cta-book__label::before,
.cta-book__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.cta-col--talk .cta-slot {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  border-color: rgba(6, 191, 199, 0.45);
  color: #5fd4d9;
}

.cta-col--talk .cta-slot:hover {
  color: var(--teal);
  border-color: var(--teal);
}

.cta-or {
  grid-area: or;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  height: 400px;
  color: var(--muted);
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cta-or::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(244, 245, 247, 0.14);
}

.cta-or span {
  position: relative;
  z-index: 1;
  background: var(--slate);
  padding: 8px 0;
}

.cta-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 56px;
  width: min(100%, 280px);
  padding: 0 22px;
  border: 1px solid var(--teal);
  border-radius: 3px;
  background: transparent;
  color: var(--teal);
  font: 800 14px/1 var(--display);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.cta-slot:hover {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

.cta-slot:focus {
  outline: none;
}

.cta-slot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cta-summary {
  margin: 0 0 16px;
  font: 400 15px/1.45 var(--body);
  color: var(--coral);
}

.cta-form {
  display: grid;
  gap: 22px;
  max-width: none;
}

.cta-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cta-form__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}

.cta-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cta-field label,
.cta-seg legend {
  display: block;
  margin: 0 0 4px;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9aa1ad;
}

.cta-seg {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 420px;
}

.cta-seg__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cta-seg__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid rgba(244, 245, 247, 0.14);
  border-radius: 3px;
  background: #272b33;
  color: #e0e4ea;
  font: 400 16px/1.2 var(--body);
  cursor: pointer;
  text-align: center;
}

.cta-seg__opt:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cta-seg__opt:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal);
  color: #1c1f25;
  font-weight: 700;
}

.cta-seg__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cta-field input,
.cta-field textarea {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(244, 245, 247, 0.14);
  border-radius: 3px;
  background: #272b33;
  color: #e0e4ea;
  font: 400 17px/1.4 var(--body);
}

.cta-field textarea {
  height: auto;
  min-height: 118px;
  padding: 14px 16px;
  resize: vertical;
}

.cta-field input::placeholder,
.cta-field textarea::placeholder {
  color: #6f7885;
}

.cta-field input:focus,
.cta-field textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}

.cta-field input:-webkit-autofill,
.cta-field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #272b33 inset;
  -webkit-text-fill-color: #e0e4ea;
  caret-color: #e0e4ea;
}

.cta-field.is-invalid input,
.cta-field.is-invalid textarea,
.cta-seg.is-invalid .cta-seg__opt {
  border-color: var(--coral);
}

.cta-field__error {
  min-height: 0;
  margin: 0;
  font: 400 14px/1.4 var(--body);
  color: var(--coral);
}

.cta-field__error:not(:empty) {
  margin-top: 4px;
}

.cta-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 56px;
  width: 220px;
  min-width: 220px;
  padding: 0 22px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: var(--gold);
  color: #1c1f25;
  font: 800 15px/1 var(--display);
  cursor: pointer;
}

.cta-submit:disabled,
.cta-submit.is-sending {
  opacity: 0.55;
  cursor: wait;
}

.cta-submit.is-sending .cta-submit__dots::after {
  content: " ...";
}

.cta-note,
.cta-privacy {
  margin: 0;
  font: 400 14px/1.45 var(--body);
  color: var(--muted);
}

.cta-privacy a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-privacy a:focus {
  outline: none;
}

.cta-privacy a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cta-form[hidden],
.cta-sent[hidden],
.cta-summary[hidden] {
  display: none;
}

.cta.is-sent .sub,
.cta.is-sent .cta-summary {
  display: none;
}

.cta-sent h3 {
  font: 800 clamp(32px, 4vw, 48px) / 0.95 var(--display);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.cta-sent p {
  margin: 0 0 18px;
  font: 400 17px/1.5 var(--body);
  color: var(--muted);
}

.cta-sent__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.cta-slot--sent {
  width: auto;
  min-height: 52px;
  border-color: rgba(6, 191, 199, 0.45);
  color: #5fd4d9;
}

.cta-sent__ring {
  font: 400 16px/1.4 var(--body);
  color: var(--teal);
  text-decoration: none;
}

.cta-sent__ring:hover {
  color: #3ad4db;
}

.cta-sent__ring:focus {
  outline: none;
}

.cta-sent__ring:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.cta-art {
  position: absolute;
  right: 80px;
  bottom: 94px;
  height: min(36vh, 300px);
  width: calc(min(36vh, 300px) * 0.72);
  z-index: 6;
  pointer-events: none;
}

.cta-rocket,
.cta-flame {
  position: absolute;
  left: 0;
  width: 100%;
}

.cta-rocket {
  bottom: 8%;
  height: 82%;
  z-index: 1;
}

.cta-flame {
  bottom: 0;
  height: 28%;
  z-index: 0;
  left: 28%;
  width: 44%;
}

.cta-rocket svg,
.cta-flame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cta.is-sent .cta-flame {
  filter: sepia(0.7) saturate(3) hue-rotate(6deg);
}

.cta-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 94px;
  height: 5px;
  background: var(--ink);
  z-index: 20;
}

.cta-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 94px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 80px;
  background: var(--strip);
  z-index: 12;
}

.cta-foot__home {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
}

.cta-foot__home:focus {
  outline: none;
}

.cta-foot__home:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.cta-foot__home:hover .cta-foot__cypher {
  opacity: 1;
}

.cta-foot__cypher {
  display: block;
  height: 30px;
  width: auto;
  opacity: 0.7;
}

.cta-foot p {
  margin: 0;
  font: 400 14px/1.4 var(--body);
  color: var(--muted);
}

/* Desktop: footer in flow so Send it over can scroll clear of it.
   Rocket shrinks into the slot-to-footer gap when taller than 16:9;
   hidden when the frame is shorter / wider than 16:9. */
@media (min-width: 1024px) {
  .frame.cta {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .frame.cta.is-sent {
    overflow-y: hidden;
  }

  .cta-layout {
    flex: 1 0 auto;
    padding-bottom: 24px;
  }

  .cta-floor {
    position: relative;
    bottom: auto;
    margin-top: auto;
    flex: 0 0 5px;
  }

  .cta-foot {
    position: relative;
    bottom: auto;
    flex: 0 0 94px;
  }

  /* Wider / shorter than 16:9: hide. At exactly 16:9 the shrink rule wins (it follows). */
  @media (min-aspect-ratio: 16 / 9) {
    .cta-art {
      display: none;
    }
  }

  /* Taller / thinner than 16:9: rocket must fit between Pick a slot and the footer.
     display:block undoes the hide rule when both queries match at exactly 16:9. */
  @media (max-aspect-ratio: 16 / 9) {
    .cta-art {
      display: block;
      --cta-rocket-h: min(28vh, 240px, var(--cta-rocket-max, calc(100vh - 94px - 58vh)));
      height: var(--cta-rocket-h);
      width: calc(var(--cta-rocket-h) * 0.72);
    }
  }
}

.logo {
  overflow: visible;
}

.hero h1 {
  font: 800 clamp(48px, 6.6vw, 96px) / 0.96 var(--display);
  margin: 0;
  letter-spacing: -0.03em;
}

.hero .sub {
  margin: 0;
  max-width: 38ch;
}

.sub {
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 20px);
  max-width: 46ch;
  margin: 0 auto;
}

.btn {
  display: inline-block;
  margin-top: 6px;
  padding: 14px 28px;
  border-radius: 8px;
  background: var(--coral);
  color: #fff;
  font: 800 13px/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 0 #c44e3c;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #c44e3c;
}

.m-rk,
.m-beats,
.m-progress,
.m-flight-rig,
.m-turn {
  display: none;
}

/* ===== Mobile ===== */
@media (max-width: 1023px) {
  html.cta-form-focus {
    scroll-snap-type: none;
  }

  html {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
  }

  html.allow-ptr {
    overscroll-behavior-y: auto;
  }

  body {
    overscroll-behavior-y: none;
  }

  html.allow-ptr body {
    overscroll-behavior-y: auto;
  }

  .m-turn {
    display: none !important;
  }

  .cypher {
    top: 22px;
    left: 22px;
    height: 30px;
  }

  .cypher img {
    height: 30px;
  }

  .burger {
    top: 22px;
    right: 22px;
  }


  .privacy,
  .know,
  .book {
    padding: 16px;
    align-items: stretch;
  }

  .privacy__panel,
  .know__panel {
    max-height: none;
    height: 100%;
    padding: 22px 22px 8px;
  }

  .book__panel {
    height: 100%;
  }

  @media (max-width: 500px) {
    .privacy,
    .know,
    .book {
      padding: 0;
    }

    .privacy__panel,
    .know__panel,
    .book__panel {
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      border-radius: 0;
    }

    .privacy__panel,
    .know__panel {
      padding: calc(22px + env(safe-area-inset-top, 0px))
        calc(22px + env(safe-area-inset-right, 0px))
        calc(8px + env(safe-area-inset-bottom, 0px))
        calc(22px + env(safe-area-inset-left, 0px));
    }
  }

  body.m-hide-progress .m-progress {
    display: none !important;
  }

  /* Beat inline tuner layout vars on stacked panels (inline style on .frame wins otherwise).
     All art+strip panels share --m-art-h from panel height × art %. */
  .has-facts.frame--plan,
  .has-facts.frame--design,
  .has-facts.frame--build,
  .has-facts.frame--test,
  .has-facts.frame--launch,
  .has-facts.frame--support,
  .has-facts.frame--redesign,
  .has-facts.frame--log-orbit,
  .has-facts.frame--log-fleet {
    --m-anim-h: var(--m-art-h) !important;
  }

  .frame--plan,
  .frame--design,
  .frame--build,
  .frame--test,
  .frame--launch {
    --m-anim-h: var(--m-art-h) !important;
  }

  .frame--plan {
    --plan-stage-h: var(--m-anim-h) !important;
    --plan-stage-bottom: 0 !important;
    --plan-stage-x: 0 !important;
  }

  .frame--design {
    --design-stage-h: var(--m-anim-h) !important;
    --design-stage-bottom: 0 !important;
    --design-stage-x: 0 !important;
  }

  .frame--build {
    --build-body-h: calc(var(--m-anim-h) / 1.42) !important;
    --build-stage-x: 0 !important;
    --build-cog-x: 50% !important;
    --build-cog-y: calc(var(--build-body-h) * 13.4 / 42) !important;
    --build-cog-size: calc(var(--build-body-h) * 6.6 / 42) !important;
  }

  /* Desktop JSON is vh in a 54 box. Remap those vh lengths to the mobile stage. */
  .frame--test {
    --test-stage-bottom: 0 !important;
    --test-stage-x: 0 !important;
    --test-stage-h: var(--m-anim-h) !important;
    --test-rocket-h: calc(var(--m-anim-h) * 50.5 / 54) !important;
    --test-smoke-h: calc(var(--m-anim-h) * 32 / 54) !important;
    --test-smoke-w: calc(var(--m-anim-h) * 72 / 54) !important;
    --test-cog-y: calc(var(--m-anim-h) * 13.5 / 54) !important;
    --test-cog-size: calc(var(--m-anim-h) * 7.4 / 54) !important;
  }

  .frame--launch {
    --launch-stage-bottom: 0 !important;
    --launch-stage-x: 0 !important;
    --launch-stage-h: var(--m-anim-h) !important;
    --launch-rocket-h: calc(var(--m-anim-h) * 50.5 / 54) !important;
    --launch-lift-distance: calc(var(--m-art-h) * 109 / 54) !important;
    --launch-countdown-size: calc(var(--m-anim-h) * 13.5 / 54) !important;
    --launch-flame-w: calc(var(--m-anim-h) * 9.5 / 54) !important;
    --launch-flame-h: calc(var(--m-anim-h) * 13 / 54) !important;
    --launch-plume1-h: calc(var(--m-anim-h) * 36 / 54) !important;
    --launch-plume2-h: calc(var(--m-anim-h) * 36 / 54) !important;
    --launch-plume3-h: calc(var(--m-anim-h) * 36 / 54) !important;
    --launch-plume4-h: calc(var(--m-anim-h) * 36 / 54) !important;
    --launch-plume5-h: calc(var(--m-anim-h) * 36 / 54) !important;
    --launch-plume1-w: calc(var(--m-anim-h) * 80 / 54) !important;
    --launch-plume2-w: calc(var(--m-anim-h) * 80 / 54) !important;
    --launch-plume3-w: calc(var(--m-anim-h) * 80 / 54) !important;
    --launch-plume4-w: calc(var(--m-anim-h) * 80 / 54) !important;
    --launch-plume5-w: calc(var(--m-anim-h) * 80 / 54) !important;
  }

  .frame--support {
    --m-anim-h: var(--m-art-h) !important;
    --support-stage-bottom: 0 !important;
    --support-stage-x: 0 !important;
    --support-stage-h: var(--m-anim-h) !important;
    --support-rocket-h: calc(var(--m-anim-h) * 50 / 54) !important;
    --support-rocket-x: 0px !important;
    --support-rocket-y: 0px !important;
    --support-cog-y: calc(var(--m-anim-h) * 13 / 54) !important;
    --support-cog-size: calc(var(--m-anim-h) * 7 / 54) !important;
    --support-cog-x: 50% !important;
    --support-flame-h: calc(var(--m-anim-h) * 11.5 / 54) !important;
    --support-flame-y: calc(var(--m-anim-h) * 17.5 / 54) !important;
    --support-ext-h: calc(var(--m-anim-h) * 19 / 54) !important;
    --support-ext-y: calc(var(--m-anim-h) * 13 / 54) !important;
    --support-foam-w: calc(var(--m-anim-h) * 14 / 54) !important;
    --support-foam-h: calc(var(--m-anim-h) * 10 / 54) !important;
    --support-foam-y: calc(var(--m-anim-h) * 17 / 54) !important;
    --support-spanner-h: calc(var(--m-anim-h) * 5.5 / 54) !important;
    --support-spanner-y: calc(var(--m-anim-h) * 12 / 54) !important;
  }

  .frame--redesign {
    --m-anim-h: var(--m-art-h) !important;
    --redesign-stage-bottom: 0 !important;
    --redesign-stage-x: 0 !important;
    --redesign-stage-h: var(--m-anim-h) !important;
    --redesign-purple-h: calc(var(--m-anim-h) * 50 / 54) !important;
    --redesign-teal-h: calc(var(--m-anim-h) * 50 / 54) !important;
    --redesign-purple-x: 50% !important;
    --redesign-teal-x: 50% !important;
    --redesign-purple-y: 0px !important;
    --redesign-teal-y: 0px !important;
    --redesign-roller-x: 50% !important;
    --redesign-roller-h: calc(var(--m-anim-h) * 14 / 54) !important;
    --redesign-roller-start: calc(var(--m-anim-h) * 40.5 / 54) !important;
    --redesign-roller-end: 0px !important;
  }

  .track {
    height: auto !important;
  }

  .stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .strip {
    flex-direction: column;
    width: 100%;
    transform: none !important;
  }

  .frame,
  .frame--flight {
    width: 100%;
    flex: none;
    flex-basis: auto;
    align-items: flex-start;
    border-left: 4px solid var(--accent, var(--teal));
  }

  /* One viewport per snap panel (exact px from JS --m-panel-h when available) */
  .frame:not(.frame--flight):not(.hero):not(.cta):not(.frame--mission) {
    box-sizing: border-box;
    height: var(--m-panel-h, 100dvh);
    min-height: var(--m-panel-h, 100dvh);
    max-height: var(--m-panel-h, 100dvh);
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 1;
    transform: none;
  }

  .frame--flight {
    flex-basis: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    height: var(--m-panel-h, 100dvh);
    min-height: var(--m-panel-h, 100dvh);
    max-height: var(--m-panel-h, 100dvh);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    opacity: 1;
    transform: none;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    --m-art-h: calc(var(--m-panel-h, 100dvh) * var(--m-art-pct-tablet) / 100);
    --m-strip-h: 160px;
    --m-copy-h: calc(10.25rem + 10px + env(safe-area-inset-top, 0px));
    --m-flight-track-vw: 570;
    --m-progress-bar-h: 28px;
    --m-beat-progress-gap: 12px;
    --m-flight-foot-reserve: calc(
      env(safe-area-inset-bottom, 0px) + var(--m-progress-bar-h) + 12px
    );
  }

  /* Lock page snap only after the theatre is running. Always-on
     touch-action:none blocked the snap-in, so the timer never armed. */
  .frame--flight.is-flight-held,
  .frame--flight.is-flight-held .m-flight-theatre,
  .frame--flight.is-flight-held .m-flight-strip,
  .frame--flight.is-flight-held .m-flight-strip .facts-strip__slots {
    touch-action: none;
  }

  .frame--flight .m-flight-strip .facts-strip__slots {
    overflow: hidden;
  }

  .frame--flight > .stars,
  .frame--flight > .flight-prop,
  .frame--flight > .m-rk,
  .m-flight-hold {
    display: none !important;
  }

  .m-flight-theatre {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .frame.in {
    opacity: 1;
  }

  .frame:not(.frame--flight):not(.hero):not(.cta):not(.frame--mission) .copy {
    flex: 0 0 auto;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(var(--m-copy-pad, 16px) + 10px + env(safe-area-inset-top, 0px)) 4.5vw 10px;
    z-index: 2;
  }

  .frame.has-facts .copy p:not(.eyebrow) {
    max-width: none;
  }

  .frame--log-orbit.has-facts .copy,
  .frame--log-fleet.has-facts .copy {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .eyebrow {
    font-size: 10px;
  }

  .frame--log-know .copy {
    left: auto;
    top: auto;
    max-width: none;
  }

  .frame--log-know:has(.copy--scroll) {
    overflow-y: auto;
  }

  .frame--log-know .copy--scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 28px;
  }

  .frame--log .log-art,
  .frame--log-orbit .log-art,
  .frame--log-fleet .log-art {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 8vw 6vh;
  }

  .frame--log .log-art__img,
  .frame--log-orbit .log-art__img,
  .frame--log-fleet .log-art__img {
    width: auto;
    height: min(36vh, 100%);
    max-width: 86vw;
    object-fit: contain;
    animation: none;
  }

  .frame--fleet-complex .log-art,
  .frame--fleet-name .log-art,
  .frame--fleet-hosting .log-art,
  .frame--fleet-inherited .log-art {
    left: auto;
    top: auto;
    transform: none;
  }

  .frame--fleet-inherited .log-art {
    padding: 0;
  }

  .frame--fleet-name,
  .frame--fleet-hosting,
  .frame--fleet-inherited {
    --fleet-stage-h: 380px;
  }

  /* Complex is 50px shorter than name on desktop; same ratio here (330/380). */
  .frame--fleet-complex {
    --fleet-stage-h: 330px;
  }

  .frame--fleet-complex .complex-stage,
  .frame--fleet-name .name-stage,
  .frame--fleet-hosting .hosting-stage {
    flex: none;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-height: 100%;
  }

  .frame--fleet-complex .complex-stage {
    height: min(var(--fleet-stage-h), calc(100vw / var(--complex-ar, 1.5303)));
  }

  .frame--fleet-name .name-stage {
    height: min(var(--fleet-stage-h), calc(100vw / var(--name-ar, 1.0438)));
  }

  .frame--fleet-hosting .hosting-stage {
    height: min(var(--fleet-stage-h), calc(100vw / var(--hosting-ar, 1.0924)));
  }

  .frame--fleet-inherited .inherited-stage {
    flex: none;
    height: min(var(--fleet-stage-h), 100%);
    max-height: 100%;
    width: auto;
    aspect-ratio: var(--inherited-ar, 2.55);
  }

  .frame.in .copy {
    animation: m-copy-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }

  @keyframes m-copy-in {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes m-rk-in {
    from {
      opacity: 0;
      transform: translateY(24px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Desktop-only horizontal chrome — keep hidden on mobile */
  .stage > .slot,
  .stage > .fbeats,
  .stage > .flight-copy,
  .stage > .flight-strip,
  .floor,
  .flight-strip,
  .cranerig,
  .build-wire,
  .hint,
  .composite,
  .el,
  .m-rk {
    display: none !important;
  }

  html {
    --m-art-pct-phone: 45;
    --m-art-pct-tablet: 40;
  }

  .has-facts {
    --m-stage-max-h: var(--m-art-h);
    --m-src-h: 54vh;
    --m-strip-h: 160px;
    --m-art-h: calc(var(--m-panel-h, 100dvh) * var(--m-art-pct-tablet) / 100);
    --m-copy-h: calc(10.25rem + 10px + env(safe-area-inset-top, 0px));
  }

  .has-facts .floor {
    display: block !important;
    position: static;
    flex: 0 0 5px;
    width: 100%;
    height: 5px;
    margin: 0;
    background: var(--ink);
    opacity: 1;
    border-radius: 0;
    z-index: 20;
  }

  .has-facts .art-band {
    flex: 0 0 var(--m-art-h);
    height: var(--m-art-h);
    max-height: var(--m-art-h);
    min-height: var(--m-art-h);
    position: relative;
    display: block;
    overflow: visible;
  }

  .has-facts .art-box {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }

  /* Fixed copy slot so 1-line vs 2-line ledes cannot move the floor line. */
  .frame.has-facts:not(.frame--flight):not(.hero):not(.cta):not(.frame--mission) .copy {
    flex: 0 0 var(--m-copy-h);
    height: var(--m-copy-h);
    min-height: var(--m-copy-h);
    max-height: var(--m-copy-h);
    overflow: hidden;
    padding-bottom: 8px;
  }

  .has-facts .facts-strip {
    display: flex !important;
    flex-direction: column;
    position: relative;
    flex: 1 1 0;
    height: auto;
    min-height: var(--m-strip-h, 160px);
    max-height: none;
    box-sizing: border-box;
    padding: 12px 28px calc(10px + env(safe-area-inset-bottom, 0px)) 22px;
    background: var(--strip);
    z-index: 12;
    overflow: hidden;
  }

  .facts-strip__count {
    display: block;
    flex: 0 0 auto;
    margin: 0 0 10px;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .facts-strip__slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  .facts-strip__slots::-webkit-scrollbar {
    display: none;
  }

  .facts-strip__track {
    display: block;
    position: absolute;
    top: 36px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: 3px;
    background: #2f353d;
  }

  .facts-strip__thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 42%;
    background: var(--teal);
    will-change: transform;
    transition: opacity 0.2s ease;
  }

  .facts-strip.is-scroll-hint .facts-strip__thumb {
    animation: facts-strip-thumb-hint 1.55s ease-in-out;
  }

  @keyframes facts-strip-thumb-hint {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.45;
    }
  }

  .has-facts .art-band,
  .has-facts .floor {
    transition: filter 0.45s ease, opacity 0.45s ease;
  }

  .has-facts.is-scroll-hint .art-band {
    filter: brightness(0.38);
  }

  .has-facts.is-scroll-hint .floor {
    opacity: 0.32;
  }

  .has-facts .plan-stage,
  .has-facts .design-stage,
  .has-facts .test-stage,
  .has-facts .launch-stage,
  .has-facts .support-stage,
  .has-facts .redesign-stage,
  .has-facts .build-stage {
    min-height: 0;
    margin: 0;
  }

  .has-facts .log-art__img,
  .has-facts.frame--log-orbit .log-art__img,
  .has-facts.frame--log-fleet .log-art__img {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 86vw;
    object-fit: contain;
    object-position: bottom center;
  }

  .has-facts.frame--fleet-complex .log-art,
  .has-facts.frame--fleet-name .log-art,
  .has-facts.frame--fleet-inherited .log-art {
    left: 0;
    right: 0;
    transform: none;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
  }

  .has-facts.frame--fleet-inherited .art-band {
    overflow: visible;
  }

  .has-facts.frame--fleet-inherited .inherited-stage {
    height: min(var(--fleet-stage-h), 100%);
    max-height: 100%;
    width: auto;
    aspect-ratio: var(--inherited-ar, 2.55);
    flex: none;
  }

  .has-facts.frame--fleet-hosting .log-art {
    left: 0;
    top: auto;
    transform: none;
    align-items: center;
    justify-content: center;
  }

  /* Definite height from the art band (same as journey --m-anim-h).
     height:auto collapsed because the SVG layers are position:absolute. */
  .has-facts.frame--fleet-complex .complex-stage {
    height: min(var(--fleet-stage-h), calc(94vw / var(--complex-ar, 1.5303)));
    max-height: 100%;
    width: auto;
    max-width: 94vw;
    flex: none;
  }

  .has-facts.frame--fleet-name .name-stage {
    height: min(var(--fleet-stage-h), calc(94vw / var(--name-ar, 1.0438)));
    max-height: 100%;
    width: auto;
    max-width: 94vw;
    flex: none;
    margin-left: var(--name-x, 0px);
  }

  .has-facts.frame--fleet-hosting .hosting-stage {
    height: min(var(--fleet-stage-h), calc(94vw / var(--hosting-ar, 1.0924)));
    max-height: 100%;
    width: auto;
    max-width: 94vw;
    flex: none;
  }

  /* Fleet baseline ladder. Name stays; complex is 330/380 of name
     (desktop −50px, same ratio down the steps).
     Steps sit inside the art band at the sign-off widths
     (45% of 800/832 phone, 40% of 1080 tablet). */
  @media (max-width: 767px) {
    .frame--fleet-name,
    .frame--fleet-hosting,
    .frame--fleet-inherited {
      --fleet-stage-h: 360px;
    }

    .frame--fleet-complex {
      --fleet-stage-h: 313px;
    }
  }

  @media (max-width: 499px) {
    .frame--fleet-name,
    .frame--fleet-hosting,
    .frame--fleet-inherited {
      --fleet-stage-h: 320px;
    }

    .frame--fleet-complex {
      --fleet-stage-h: 278px;
    }
  }

  @media (max-width: 384px) {
    .frame--fleet-name,
    .frame--fleet-hosting,
    .frame--fleet-inherited {
      --fleet-stage-h: 280px;
    }

    .frame--fleet-hosting {
      --hosting-y: -25px;
    }

    .has-facts.frame--fleet-hosting .hosting-stage {
      transform: translateY(var(--hosting-y, 0px));
    }

    .frame--fleet-complex {
      --fleet-stage-h: 243px;
    }
  }

  .has-facts.frame--log-orbit .log-art__img {
    object-position: center;
    max-height: 72%;
  }

  /* Size from the art-band px token so width/height/aspect-ratio cannot
     collapse to 0 (flex + % maxes on an auto box). */
  .has-facts.frame--orbit-anim .log-art,
  .has-facts.frame--orbit-anim .art-box,
  .has-facts.frame--orbit-anim .art-band {
    overflow: visible;
  }

  /* Height is the rocket-normalised size. Width follows AR. Motion layers
     may paint outside this box (overflow visible). */
  .has-facts.frame--orbit-anim .orbit-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    flex: none;
    width: auto;
    height: min(var(--anim-max-h, 300px), calc(var(--m-art-h) * 0.86));
    max-width: 92%;
    aspect-ratio: var(--orbit-ar, var(--rescue-ar, 1.7904));
    overflow: visible;
    transform: translate(calc(-50% + var(--rescue-x, 0px)), calc(-50% + var(--orbit-y, 0px)));
  }

  /* X-28: stacked heights are fixed px (do not let art-band min() shrink them). */
  @media (min-width: 385px) and (max-width: 767px) {
    .has-facts.frame--orbit-anim {
      --anim-max-h: 220px;
    }

    .has-facts.frame--orbit-anim .orbit-stage {
      height: 220px;
      max-width: none;
    }
  }

  @media (min-width: 500px) and (max-width: 767px) {
    .has-facts.frame--orbit-anim {
      --anim-max-h: 220px;
    }
  }

  @media (max-width: 384px) {
    .has-facts.frame--orbit-anim {
      --anim-max-h: 165px;
    }

    .has-facts.frame--orbit-anim .orbit-stage {
      height: 165px;
      max-width: none;
    }
  }

  @media (min-width: 768px) and (max-width: 810px) {
    .has-facts.frame--orbit-anim {
      --anim-max-h: 250px;
    }

    .has-facts.frame--orbit-anim .orbit-stage {
      height: 250px;
      max-width: none;
    }
  }

  @media (min-width: 811px) {
    .has-facts.frame--orbit-anim {
      --anim-max-h: 285px;
    }

    .has-facts.frame--orbit-anim .orbit-stage {
      height: 285px;
      max-width: none;
    }
  }

  .planet,
  .flight-prop,
  .stars {
    display: none;
  }

  .frame--log-orbit .stars,
  .frame--log-orbit .flight-prop.log-prop,
  .frame--fleet-hosting .stars {
    display: block;
  }

  /* Bottom art band — flex child; reset desktop absolute stage positioning */
  .plan-stage,
  .design-stage,
  .test-stage,
  .launch-stage,
  .support-stage,
  .redesign-stage,
  .build-stage {
    flex: 1 1 auto;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    justify-self: center;
    align-self: end;
    transform: none !important;
    margin: 0 auto max(10px, env(safe-area-inset-bottom, 0px));
    max-width: 94vw;
    min-height: min(var(--m-stage-max-h, 58dvh), 42vw);
    max-height: var(--m-stage-max-h, 58dvh);
    overflow: visible;
    z-index: 1;
  }

  .frame--plan {
    --plan-stage-h: var(--m-anim-h);
  }

  .plan-stage {
    width: 94vw;
    height: min(var(--plan-stage-h), calc(94vw / var(--plan-stage-ar, 1.46)));
    max-height: var(--m-anim-h, var(--m-art-h));
  }

  .frame--design {
    --design-stage-h: var(--m-anim-h);
  }

  .design-stage {
    width: min(94vw, calc(var(--design-stage-h) * var(--design-stage-ar, 0.98)));
    height: var(--design-stage-h);
  }

  .frame--build {
    --build-body-h: calc(var(--m-anim-h) / 1.42);
    --build-stage-extra: 0.42;
  }

  .build-stage {
    width: min(94vw, calc(var(--build-body-h) * var(--build-body-ar, 0.78) * 2.4));
    height: min(
      calc(var(--build-body-h) * (1 + var(--build-stage-extra, 0.42))),
      var(--m-anim-h, var(--m-art-h))
    );
  }

  .frame--test {
    --test-stage-h: var(--m-anim-h);
  }

  .test-stage {
    width: min(94vw, calc(var(--test-stage-h) * var(--test-rocket-ar, 0.651)));
    height: var(--test-stage-h);
  }

  .frame--launch {
    --launch-stage-h: var(--m-anim-h);
  }

  .launch-stage {
    width: min(94vw, calc(var(--launch-stage-h) * var(--launch-rocket-ar, 0.651)));
    height: var(--launch-stage-h);
  }

  .frame--launch .launch-countdown {
    position: absolute;
    left: 50%;
    top: 62%;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 8;
    pointer-events: none;
  }

  .frame--support {
    --support-stage-h: var(--m-anim-h);
  }

  .support-stage {
    width: calc(var(--support-stage-h) * 800 / 243);
    height: var(--support-stage-h);
  }

  .frame--redesign {
    --redesign-stage-h: var(--m-anim-h);
  }

  .redesign-stage {
    width: min(94vw, calc(var(--redesign-stage-h) * var(--redesign-purple-ar, 0.651)));
    height: var(--redesign-stage-h);
  }

  /* Sit the animation on the ground line; Plan→Launch height = --m-art-h baseline. */
  .has-facts .plan-stage,
  .has-facts .design-stage,
  .has-facts .test-stage,
  .has-facts .launch-stage,
  .has-facts .build-stage {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 100%;
    margin: 0 !important;
    flex: none;
    min-height: 0;
    height: var(--m-art-h) !important;
    max-height: var(--m-art-h) !important;
    max-width: none;
    overflow: visible;
  }

  .has-facts .support-stage,
  .has-facts .redesign-stage {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 100%;
    margin: 0 !important;
    flex: none;
    min-height: 0;
    height: var(--m-anim-h, 100%) !important;
    max-height: none;
    max-width: none;
  }

  .has-facts .plan-stage {
    width: calc(var(--m-art-h) * var(--plan-stage-ar, 1.46));
    /* Puzzle mass sits low in the stage box - lift slightly off the floor line. */
    bottom: calc(var(--m-art-h) * var(--m-plan-lift-pct, 5) / 100) !important;
  }

  .has-facts .design-stage {
    width: calc(var(--m-art-h) * var(--design-stage-ar, 0.98));
  }

  .has-facts .test-stage {
    width: calc(var(--m-art-h) * var(--test-rocket-ar, 0.651));
  }

  .has-facts .launch-stage {
    width: calc(var(--m-art-h) * var(--launch-rocket-ar, 0.651));
  }

  .has-facts .support-stage {
    /* Desktop authoring box is --d-src-w (100vh × 16/9) by 54vh. Keep that
       AR so ext / cogs / spanner % X match across the stacked breakpoint. */
    width: calc(var(--m-anim-h) * 800 / 243);
  }

  .has-facts .redesign-stage {
    width: calc(var(--m-anim-h) * var(--redesign-purple-ar, 0.651));
  }

  .frame--support .support-rocket {
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
    overflow: visible;
  }

  .frame--support .support-rocket svg {
    position: relative;
    z-index: 0;
  }

  .frame--support .cog-rig {
    left: 50% !important;
    z-index: 2 !important;
    transform: translateX(-50%);
  }

  .frame--redesign .redesign-purple,
  .frame--redesign .redesign-teal {
    left: 50% !important;
    transform: translateX(-50%);
  }

  .has-facts .build-stage {
    width: calc(var(--m-art-h) * var(--build-body-ar, 0.78) * 1.7);
  }

  .has-facts .launch-plume__layer {
    transform-origin: 50% 100%;
  }

  .has-facts .log-art,
  .has-facts.frame--log-orbit .log-art,
  .has-facts.frame--log-fleet .log-art {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    flex: none;
    padding: 0 8vw 0;
    align-items: flex-end;
    justify-content: center;
  }

  .has-facts.frame--log-orbit .log-art {
    align-items: center;
    padding-bottom: 12%;
  }

  .has-facts.frame--orbit-anim .log-art {
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  /* Inherited wins over the shared fleet log-art padding / width:auto block above. */
  .has-facts.frame--fleet-inherited .log-art {
    width: 100%;
    max-width: none;
    padding: 0;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
  }

  .frame.hero {
    box-sizing: border-box;
    height: var(--m-panel-h, 100dvh);
    min-height: var(--m-panel-h, 100dvh);
    max-height: var(--m-panel-h, 100dvh);
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--m-copy-pad, 16px) + env(safe-area-inset-top, 0px)) 7vw
      calc(var(--m-copy-pad, 16px) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-left: none;
    opacity: 0;
    transform: none;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .frame.cta {
    box-sizing: border-box;
    height: var(--m-panel-h, 100dvh);
    min-height: var(--m-panel-h, 100dvh);
    max-height: var(--m-panel-h, 100dvh);
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--m-copy-pad, 16px) + env(safe-area-inset-top, 0px)) 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-left: none;
    opacity: 0;
    transform: none;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .frame.hero.in,
  .frame.cta.in,
  .frame--mission.in {
    opacity: 1;
  }

  .frame--mission {
    box-sizing: border-box;
    height: var(--m-panel-h, 100dvh);
    min-height: var(--m-panel-h, 100dvh);
    max-height: var(--m-panel-h, 100dvh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 72px 22px 24px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-left: none;
    opacity: 0;
    transform: none;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .frame--mission .mission-board {
    flex: 0 1 auto;
    min-height: 0;
  }

  .mission-board__title {
    font-size: 27px;
    margin-bottom: 22px;
  }

  .mission-row {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px 22px;
    min-height: 0;
    padding: 16px 0 16px 28px;
  }

  .mission-row__art {
    width: 100%;
    height: 72px;
    justify-content: center;
  }

  .mission-row__img {
    width: 100%;
    max-width: 88px;
    max-height: 72px;
  }

  .mission-row__headline {
    font-size: 17px;
  }

  .mission-row__sub {
    font-size: 15px;
  }

  .mission-row__action {
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    gap: 6px;
    white-space: nowrap;
  }

  .mission-row__action-meta,
  .mission-row__note-meta {
    display: block;
  }

  .mission-row--note {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px 22px;
    align-items: center;
    padding: 18px 18px 18px 28px;
    margin-top: 8px;
  }

  .mission-row--note .mission-row__art {
    height: 72px;
    grid-row: auto;
    align-self: center;
    justify-content: center;
  }

  .mission-row__note {
    font-size: 14px;
    line-height: 1.5;
  }

  .mission-idle {
    display: none;
  }

  .mission-board__foot {
    padding-top: 18px;
  }

  .frame.hero .logo {
    position: relative;
    top: auto;
    left: auto;
    width: 140px;
    min-width: 140px;
    height: auto;
    flex-shrink: 0;
    margin: 0 0 28px;
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: none;
    gap: 16px;
    padding-bottom: min(32vh, 220px);
  }

  .hero-art {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(88vw, 360px);
    height: auto;
    margin: 0;
  }

  .frame.hero h1 {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 0.96;
    margin: 0;
  }

  .frame.cta .cta-head__home {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 7vw 28px;
  }

  .frame.cta .logo {
    position: relative;
    top: auto;
    left: auto;
    width: 140px;
    min-width: 140px;
    flex-shrink: 0;
    margin: 0;
  }

  .frame.cta h2 {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 0.95;
    margin: 0 0 8px;
  }

  .frame.hero .sub {
    font-size: clamp(15px, 4vw, 18px);
    max-width: 34ch;
    margin: 0;
  }

  .frame.cta .sub {
    font-size: 16px;
    max-width: none;
    margin: 0 0 18px;
  }

  .cta-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-content: stretch;
    padding: 0 7vw 18px;
    gap: 8px;
  }

  .cta h2,
  .cta-col--form,
  .cta-or,
  .cta-col--talk {
    grid-area: auto;
  }

  .cta-col--talk {
    justify-self: stretch;
    max-width: none;
    padding: 0;
  }

  .cta-phone-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
  }

  .cta-phone__hours {
    margin: 4px 0 0;
    text-align: center;
    width: 100%;
    font: 400 15px/1.4 var(--body);
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
  }

  .cta-phone {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 8px 0 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: 800 clamp(28px, 8vw, 40px) / 1 var(--display);
    letter-spacing: -0.01em;
    text-align: center;
  }

  .cta-book__label {
    display: flex;
    max-width: none;
  }

  .cta-col--talk .cta-slot {
    width: 100%;
    max-width: none;
    min-height: 52px;
    height: auto;
    padding: 0 22px;
    border: 1px solid rgba(6, 191, 199, 0.45);
    border-radius: 3px;
    background: transparent;
    font: 800 14px/1 var(--display);
    letter-spacing: 0.02em;
    text-transform: none;
    color: #5fd4d9;
  }

  .cta-col--talk .cta-slot:hover {
    color: var(--teal);
    border-color: var(--teal);
  }

  .cta-field input,
  .cta-field textarea {
    font-size: 16px;
    height: 48px;
  }

  .cta-field textarea {
    height: auto;
    min-height: 88px;
  }

  .cta-or {
    height: auto;
    max-height: none;
    align-self: stretch;
  }

  .cta-seg {
    max-width: none;
  }

  .cta-form__row,
  .cta-form__actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .cta-submit {
    width: 100%;
  }

  .cta-or {
    min-height: 0;
    margin: 8px 0;
  }

  .cta-or::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    transform: none;
  }

  .cta-or span {
    padding: 0 10px;
  }

  .cta-field input,
  .cta-field textarea,
  .cta-seg__opt {
    font-size: 16px;
    min-height: 48px;
    height: 48px;
  }

  .cta-field textarea {
    height: auto;
    min-height: 88px;
  }

  .cta-art {
    position: relative;
    right: auto;
    bottom: auto;
    height: 100px;
    width: 64px;
    margin: auto auto 0;
    flex-shrink: 0;
    align-self: center;
  }

  .cta-floor {
    position: relative;
    bottom: auto;
    flex-shrink: 0;
    width: 100%;
    align-self: stretch;
  }

  .cta-foot {
    position: relative;
    padding: 0 22px;
    height: 72px;
    flex-shrink: 0;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
  }

  .frame.hero .hero-strapline {
    font-size: clamp(10px, 2.8vw, 13px);
    white-space: normal;
    letter-spacing: 0.16em;
  }

  .frame.hero.in .logo,
  .frame.cta.in .logo {
    animation: m-rk-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* In-flight mobile hold — interim beat cards until theatre is signed off */
  .m-flight-hold {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 4vh;
  }

  .frame--flight .m-beats {
    display: flex !important;
    flex-direction: column;
    gap: 4vh;
    width: 100%;
    margin: 0;
  }

  .frame--flight .m-flight-rig {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 4vh auto 0;
    padding: calc(var(--flight-bob-amp, 12px) + 4px) 0;
    overflow: visible;
    flex-shrink: 0;
    --flight-rocket-w: min(34vw, 132px);
  }

  .frame--flight .m-flight-rig .flight-rig {
    position: relative;
    width: auto;
    height: auto;
    animation: flight-bob var(--flight-bob-dur, 3.2s) ease-in-out infinite;
  }

  .frame--flight .m-flight-rig .flight-rocket-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .frame--flight .m-flight-rig .rk-flight {
    opacity: 1;
  }

  .frame--flight .m-flight-rig .stick {
    display: none !important;
  }

  .m-beats {
    display: flex;
    flex-direction: column;
    gap: 4vh;
    width: 100%;
  }

  .m-beat {
    padding: 3vh 4vw;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .frame.in .m-beat {
    opacity: 1;
    transform: none;
  }

  .frame.in .m-beat:nth-child(1) {
    transition-delay: 0.1s;
  }
  .frame.in .m-beat:nth-child(2) {
    transition-delay: 0.2s;
  }
  .frame.in .m-beat:nth-child(3) {
    transition-delay: 0.3s;
  }
  .frame.in .m-beat:nth-child(4) {
    transition-delay: 0.4s;
  }

  .m-beat .eyebrow {
    color: var(--amber);
  }

  .m-beat .eyebrow::before {
    display: none;
  }

  .m-beat h3 {
    font: 800 clamp(22px, 5vw, 32px) / 1 var(--display);
    margin: 0 0 10px;
    text-transform: uppercase;
  }

  .m-beat p {
    font: 400 16px/1.55 var(--body);
    color: var(--muted);
    margin: 0;
  }

  /* In-flight mobile theatre */
  .m-flight-copy {
    flex: 0 0 var(--m-copy-h);
    height: var(--m-copy-h);
    min-height: var(--m-copy-h);
    max-height: var(--m-copy-h);
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(var(--m-copy-pad, 16px) + 10px + env(safe-area-inset-top, 0px)) 4.5vw 10px;
    overflow: hidden;
    z-index: 2;
  }

  .m-flight-copy .copy__title-row h2 {
    max-width: 100%;
  }

  .m-flight-art-band {
    flex: 0 0 var(--m-art-h);
    height: var(--m-art-h);
    max-height: var(--m-art-h);
    min-height: var(--m-art-h);
    position: relative;
    display: block;
    overflow: hidden;
  }

  .m-flight-art-band:focus {
    outline: none;
  }

  .m-flight-art-band:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
  }

  .m-flight-theatre > .floor {
    display: block !important;
    position: static;
    flex: 0 0 5px;
    width: 100%;
    height: 5px;
    margin: 0;
    background: var(--ink);
    opacity: 1;
    border-radius: 0;
    z-index: 20;
  }

  .m-flight-strip {
    display: flex !important;
    flex-direction: column;
    position: relative;
    flex: 1 1 0;
    height: auto;
    min-height: var(--m-strip-h, 160px);
    max-height: none;
    box-sizing: border-box;
    padding: 12px 28px var(--m-flight-foot-reserve) 22px;
    background: var(--strip);
    z-index: 12;
    overflow: hidden;
  }

  .m-flight-strip .facts-strip__count {
    display: none;
  }

  .m-flight-art {
    position: relative;
    overflow: hidden;
    background: var(--slate);
  }

  .m-flight-sky-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--slate);
  }

  .m-flight-sky-track {
    display: flex;
    height: 100%;
    will-change: transform;
  }

  .m-flight-sky-segment {
    position: relative;
    flex: 0 0 calc(var(--m-flight-track-vw, 570) * 1vw);
    width: calc(var(--m-flight-track-vw, 570) * 1vw);
    height: 100%;
    overflow: hidden;
  }

  .m-flight-sky-stage {
    position: absolute;
    left: 0;
    top: calc(50% - 50vh);
    width: calc(var(--m-flight-track-vw, 570) * 1vw);
    height: 100vh;
    background: var(--slate);
  }

  .m-flight-sky-stage .stars,
  .m-flight-sky-stage .flight-prop {
    display: block !important;
    overflow: hidden;
  }

  .m-flight-sky-stage .flight-prop svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .m-flight-sky-stage .stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .m-flight-theatre .m-flight-rig {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    --flight-rocket-w: min(69vw, 258px) !important;
    --flight-rocket-x: 0px !important;
    --flight-rocket-y: 0px !important;
  }

  .m-flight-theatre .m-flight-rig .flight-rig {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    animation: none;
  }

  .m-flight-theatre .m-flight-rig .flight-rocket-wrap {
    position: absolute;
    left: 50%;
    top: 22%;
    width: var(--flight-rocket-w, 172px);
    transform: translate(-50%, -62%);
    animation: m-flight-rocket-bob var(--flight-bob-dur, 3.2s) ease-in-out infinite;
  }

  @keyframes m-flight-rocket-bob {
    0%,
    100% {
      transform: translate(-50%, calc(-62% - var(--flight-bob-amp, 12px)));
    }

    50% {
      transform: translate(-50%, calc(-62% + var(--flight-bob-amp, 12px)));
    }
  }

  @keyframes m-flight-rocket-bob-reverse {
    0%,
    100% {
      transform: translate(-50%, calc(-62% - var(--flight-bob-amp, 12px))) scaleX(-1);
    }

    50% {
      transform: translate(-50%, calc(-62% + var(--flight-bob-amp, 12px))) scaleX(-1);
    }
  }

  .frame--flight.is-flight-reverse .m-flight-theatre .m-flight-rig .flight-rocket-wrap {
    animation: m-flight-rocket-bob-reverse var(--flight-bob-dur, 3.2s) ease-in-out infinite;
  }

  .m-flight-rig .flight-rig {
    position: relative;
    width: auto;
    height: auto;
    animation: flight-bob var(--flight-bob-dur, 3.2s) ease-in-out infinite;
  }

  .m-flight-rig .flight-rocket-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: var(--flight-rocket-w, 132px);
  }

  .m-flight-rig .rk-flight {
    opacity: 1;
  }

  .m-flight-rig .stick {
    display: none !important;
  }

  .m-flight-beat-ticks {
    display: flex;
    gap: 6px;
    margin: 0 0 10px;
    flex: 0 0 auto;
    pointer-events: none;
  }

  .m-flight-beat-tick {
    position: relative;
    flex: 1 1 0;
    height: 3px;
    background: #2f353d;
    border-radius: 2px;
    overflow: hidden;
  }

  .m-flight-beat-tick__fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--gold);
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
  }

  .m-flight-beat-tick.is-done .m-flight-beat-tick__fill {
    background: var(--teal);
    transform: scaleX(1);
  }

  .m-flight-beat-tick.is-on .m-flight-beat-tick__fill {
    background: var(--gold);
  }

  .frame--flight.is-flight-exit-hint .m-flight-beat-tick.is-on .m-flight-beat-tick__fill {
    background: var(--teal);
    animation: m-flight-exit-pulse 2s ease-in-out infinite;
  }

  .frame--flight.is-flight-exit-hint .m-flight-beat-tick.is-on {
    background: rgba(6, 191, 199, 0.25);
  }

  .m-flight-strip .facts-strip__track {
    display: none !important;
  }

  .m-flight-beat-panels {
    display: grid;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .m-flight-beat-panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .m-flight-beat-panel .facts-slot {
    flex-shrink: 0;
  }

  .m-flight-exit {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }

  .m-flight-exit[hidden] {
    display: none !important;
  }

  .m-flight-exit__hint {
    margin: 0;
    font: 700 clamp(18px, 4.5vw, 24px) / 1.2 var(--display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--teal);
    animation: m-flight-exit-pulse 2s ease-in-out infinite;
  }

  .frame--flight:has(.m-flight-art-band.is-timer-paused).is-flight-exit-hint .m-flight-beat-tick.is-on .m-flight-beat-tick__fill,
  .frame--flight:has(.m-flight-art-band.is-timer-paused) .m-flight-exit__hint {
    animation: none;
  }

  @keyframes m-flight-exit-pulse {
    0%,
    100% {
      opacity: 0.72;
    }

    50% {
      opacity: 1;
    }
  }

  .frame--flight.is-flight-exit-hint .facts-strip__count {
    display: block;
    color: var(--teal);
  }

  /* Side dots retired - the foot stage-blocks are the progress UI. */
  .m-progress {
    display: none !important;
  }

  .progress {
    bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Tablet portrait (768-1023) — lede visible, 2×2 facts grid (CD 810×1080). */
  @media (min-width: 768px) and (max-width: 1023px) {
    .has-facts .facts-strip {
      gap: 14px;
      padding: 20px 40px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .facts-strip__count {
      margin: 0;
      font-size: 12px;
      letter-spacing: 0.2em;
    }

    .facts-strip__slots {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 14px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: visible;
      overscroll-behavior: contain;
      touch-action: auto;
    }

    .facts-strip__track {
      display: none !important;
    }

    .facts-slot {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px 18px;
      min-height: 0;
    }

    .facts-slot__label {
      margin: 0;
      font-size: 11px;
      letter-spacing: 0.14em;
    }

    .facts-slot--teal .facts-slot__label {
      color: var(--teal);
    }

    .facts-slot--amber .facts-slot__label {
      color: var(--amber);
    }

    .facts-slot--coral .facts-slot__label {
      color: var(--coral);
    }

    .facts-slot--gold .facts-slot__label {
      color: var(--gold);
    }

    .facts-slot__body {
      font-size: 17px;
      line-height: 1.4;
    }

    .frame.has-facts .copy__title-row {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .frame.has-facts .copy__title-row .eyebrow {
      order: 1;
    }

    .copy {
      --copy-title-size: clamp(30px, 4.8vw, 40px);
    }

    .frame.has-facts .copy__title-row h2 {
      order: 2;
      font-size: var(--copy-title-size);
      line-height: 0.95;
    }

    .frame--log-orbit.has-facts .copy__title-row,
    .frame--log-fleet.has-facts .copy__title-row {
      display: grid !important;
      position: static;
      width: 100%;
      left: auto;
      right: auto;
    }

    .frame--log-orbit.has-facts .copy__title-row h2,
    .frame--log-fleet.has-facts .copy__title-row h2 {
      font-size: var(--copy-title-size);
      grid-row: 2;
      order: unset;
    }

    .frame.has-facts .copy__rule {
      display: none;
    }

    .m-flight-copy .copy__title-row h2 {
      font-size: var(--copy-title-size);
      line-height: 0.95;
      letter-spacing: -0.01em;
    }
  }

  /* ===== Phone panels (<768) — compact header, no lede, artPctPhone ===== */
  @media (max-width: 767px) {
    .has-facts.frame--orbit-anim {
      --anim-max-h: 220px;
    }

    @media (min-width: 500px) and (max-width: 767px) {
      .has-facts.frame--orbit-anim {
        --anim-max-h: 220px;
      }
    }

    @media (max-width: 384px) {
      .has-facts.frame--orbit-anim {
        --anim-max-h: 165px;
      }
    }

    .has-facts,
    .frame--flight {
      --m-art-h: calc(var(--m-panel-h, 100dvh) * var(--m-art-pct-phone) / 100);
      /* CD 360×800: title row y 66, header ends y 118 (art band starts). */
      --m-phone-title-y: calc(var(--m-panel-h, 100dvh) * 66 / 800);
      --m-phone-header-h: calc(var(--m-panel-h, 100dvh) * 118 / 800);
    }

    .cypher {
      top: calc(22px + env(safe-area-inset-top, 0px));
      left: 20px;
      height: 30px;
    }

    .cypher img {
      height: 30px;
    }

    .burger {
      top: calc(22px + env(safe-area-inset-top, 0px));
      right: 16px;
    }

    .frame.has-facts:not(.frame--flight):not(.hero):not(.cta):not(.frame--mission) .copy {
      position: relative;
      top: 0;
      left: auto;
      right: auto;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
      flex: 0 0 calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      height: calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      min-height: calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      max-height: calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      padding: 0;
      overflow: visible;
      z-index: 3;
    }

    .m-flight-copy {
      flex: 0 0 calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      height: calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      min-height: calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      max-height: calc(var(--m-phone-header-h) + env(safe-area-inset-top, 0px));
      padding: 0;
      overflow: visible;
    }

    /* Title full width, eyebrow underneath. Same slot (y 66-118) so the
       art band does not move. Orbit / fleet / in-flight share this stack. */
    .frame.has-facts .copy__title-row,
    .m-flight-copy .copy__title-row,
    .frame--log-orbit.has-facts .copy__title-row,
    .frame--log-fleet.has-facts .copy__title-row {
      display: flex !important;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      gap: 5px;
      position: absolute;
      left: 20px;
      right: 20px;
      top: calc(var(--m-phone-title-y) + env(safe-area-inset-top, 0px));
      width: auto;
      max-width: none;
    }

    .copy {
      --copy-title-size: clamp(26px, 7.2vw, 32px);
    }

    .frame.has-facts .copy__title-row h2,
    .m-flight-copy .copy__title-row h2,
    .frame--log-orbit.has-facts .copy__title-row h2,
    .frame--log-fleet.has-facts .copy__title-row h2 {
      order: 1;
      margin: 0;
      font-size: var(--copy-title-size);
      line-height: 0.95;
      letter-spacing: -0.01em;
      flex: none;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      text-wrap: wrap;
      grid-row: unset;
      grid-column: unset;
    }

    .frame--log-orbit.has-facts .copy__title-row h2,
    .frame--log-fleet.has-facts .copy__title-row h2,
    .m-flight-copy .copy__title-row h2 {
      text-wrap: nowrap;
    }

    .frame.has-facts .copy__rule,
    .m-flight-copy .copy__rule {
      display: none;
    }

    .frame.has-facts .copy__title-row .eyebrow,
    .m-flight-copy .copy__title-row .eyebrow,
    .frame--log-orbit.has-facts .copy__title-row .eyebrow,
    .frame--log-fleet.has-facts .copy__title-row .eyebrow {
      order: 2;
      margin: 0;
      padding: 0;
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--teal);
      grid-row: unset;
      grid-column: unset;
    }

    .frame.has-facts .copy > p:not(.eyebrow),
    .frame.has-facts .copy > ul,
    .frame.has-facts .copy > .copy__action,
    .frame.has-facts .copy > h3 {
      display: none;
    }

    .frame:not(.hero):not(.cta):not(.frame--mission):not(.frame--flight)
      .copy
      .copy__title-row
      .eyebrow {
      margin-left: 0;
    }

    /* Mission Control: keep the stacked two-column row until the 500px
       phone mark. Status-above-icon lives in the 500px block below. */
    .frame--mission {
      padding: 56px 20px 20px;
      justify-content: center;
    }

    .mission-board__title {
      font-size: 26px;
      margin-bottom: 18px;
    }

    .mission-row:not(.mission-row--note) {
      grid-template-columns: 88px minmax(0, 1fr);
      padding: 14px 0;
    }

    .mission-row:not(.mission-row--note) .mission-row__art {
      grid-row: span 2;
    }

    .mission-row:not(.mission-row--note) .mission-row__action {
      grid-column: 2;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      justify-self: start;
      gap: 6px 12px;
    }

    .mission-row__action-meta,
    .mission-row__note-meta {
      display: inline;
    }

    .mission-row--note {
      padding: 16px 14px;
      margin-top: 10px;
    }

    .mission-row__note {
      font-size: 13px;
      line-height: 1.45;
    }

    .mission-board__foot {
      padding-top: 12px;
    }

    /* Phone mark: status above the icon. Stage-count hints drop here. */
    @media (max-width: 500px) {
      .mission-row:not(.mission-row--note) {
        display: grid;
        grid-template-columns: 4.6rem minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: start;
        gap: 8px 14px;
        padding: 12px 0;
      }

      .mission-row:not(.mission-row--note) .mission-row__copy {
        display: contents;
      }

      .mission-row:not(.mission-row--note) .mission-row__meta {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-start;
        gap: 0;
      }

      .mission-row:not(.mission-row--note) .mission-row__lamp {
        display: none;
      }

      .mission-row:not(.mission-row--note) .mission-row__status {
        font-size: 10px;
        letter-spacing: 0.1em;
        line-height: 1.2;
        white-space: normal;
      }

      .mission-row:not(.mission-row--note) .mission-row__art {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 52px;
        align-self: start;
        justify-content: center;
      }

      .mission-row:not(.mission-row--note) .mission-row__img {
        max-width: 72px;
        max-height: 52px;
      }

      .mission-row:not(.mission-row--note) .mission-row__headline {
        grid-column: 2;
        grid-row: 1;
        font-size: 16px;
        align-self: start;
      }

      .mission-row:not(.mission-row--note) .mission-row__sub {
        grid-column: 2;
        grid-row: 2;
        font-size: 14px;
        line-height: 1.4;
      }

      .mission-row:not(.mission-row--note) .mission-row__action {
        grid-column: 2;
        grid-row: 3;
        align-items: flex-start;
        justify-self: start;
        white-space: normal;
      }

      .mission-row__action-meta,
      .mission-row__note-meta {
        display: none;
      }

      .mission-row--note {
        grid-template-columns: 4.6rem minmax(0, 1fr);
        gap: 10px 14px;
        padding: 14px 12px;
        margin-top: 8px;
      }

      .mission-row--note .mission-row__art {
        height: 52px;
      }

      .mission-row--note .mission-row__img {
        max-width: 72px;
        max-height: 52px;
      }
    }

    .has-facts .plan-stage {
      transform: translateX(-50%) scale(var(--m-glyph-scale-plan, 1)) !important;
    }

    .has-facts .design-stage,
    .has-facts .test-stage,
    .has-facts .launch-stage,
    .has-facts .support-stage,
    .has-facts .redesign-stage {
      transform: translateX(-50%) scale(var(--m-glyph-scale-rocket, 1)) !important;
    }
  }

  /* Tall stacked portrait: iPad 768×1024 / 810×1080 / 834×1194, and
     phones 900px+ tall. Short phones (384×832) stay compact so four rows fit. */
  @media (min-height: 900px) {
    .frame--mission {
      justify-content: flex-start;
      padding-top: 80px;
      padding-bottom: 40px;
    }

    .frame--mission .mission-board {
      flex: 1 1 auto;
      min-height: 0;
    }

    .mission-board__title {
      margin-bottom: 8px;
    }

    .mission-board__rows {
      flex: 1 1 auto;
      justify-content: space-between;
    }

    .mission-row:not(.mission-row--note) {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .mission-row--note {
      margin-top: 0;
    }
  }

  /* Squat phone landscape only — not tablets (768px+ wide or 481px+ tall). */
  @media (max-width: 767px) and (max-height: 480px) and (orientation: landscape) {
    .m-turn {
      display: flex !important;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: fixed;
      inset: 0;
      z-index: 400;
      margin: 0;
      padding: 28px 32px;
      background: var(--bg, #30343d);
      color: var(--ink, #f4f5f7);
    }

    .m-turn__kicker {
      margin: 0 0 12px;
      font: 400 11px/1 var(--mono);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--teal);
    }

    .m-turn h2 {
      margin: 0 0 10px;
      font: 800 32px/1 var(--display);
      letter-spacing: -0.03em;
    }

    .m-turn p:last-child {
      margin: 0;
      max-width: 36ch;
      font: 400 16px/1.45 var(--body);
      color: #c3c9d3;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
  }

  .rk-flight,
  .slot.r-flight .flight-rig,
  .frame--flight .m-flight-rig .flight-rig,
  .m-flight-theatre .m-flight-rig .flight-rocket-wrap,
  .m-flight-rig .flight-rig,
  .frame--flight.is-flight-exit-hint .m-flight-beat-tick.is-on .m-flight-beat-tick__fill,
  .m-flight-exit__hint,
  .flight-prop--alien,
  .cog-rig__gear,
  .m-rk svg,
  .hint span,
  .frame--log-orbit .log-art__img,
  .orbit-bob,
  .rescue-bob {
    animation: none !important;
  }

  .rescue-scan {
    animation: none !important;
    transform: none !important;
    clip-path: none;
  }

  .fix-spark {
    animation: none !important;
    opacity: 1;
  }

  .add-grabber {
    animation: none !important;
    transform: none !important;
  }

  .frame--add .log-sky .stars,
  .frame--add .log-sky .log-prop,
  .frame--bring .log-sky .stars,
  .frame--bring .log-sky .log-prop {
    animation: none !important;
    transform: none !important;
  }

  .hosting-hub,
  .hosting-dock-spin {
    animation: none !important;
    transform: none !important;
  }

  .hosting-docking {
    animation: none !important;
    transform: translate(-34.12%, -33.8%) rotate(0deg) !important;
  }

  .hosting-docking #hostingrocketdocking2-Flame {
    opacity: 0 !important;
    animation: none !important;
  }

  .inherited-slats,
  .inherited-car-rig,
  .inherited-scan-rig,
  .inherited-beam,
  .inherited-ufo--schematic,
  .inherited-gantry {
    animation: none !important;
  }

  .inherited-car-rig {
    transform: translateX(-50%) !important;
  }

  .inherited-scan-rig,
  .inherited-gantry {
    display: none !important;
  }

  .inherited-ufo--schematic {
    clip-path: inset(0 0 100% 0) !important;
  }

  .inherited-ufo--coral {
    animation: none !important;
    clip-path: none !important;
  }

  .inherited-spray-cell {
    animation: none !important;
  }

  .bring-cell,
  .complex-cell {
    animation: none !important;
  }

  .complex-ship-bob {
    animation: none !important;
    transform: translateY(12px);
  }

  .name-spark,
  .name-driller,
  .name-banner,
  .name-jetpack {
    animation: none !important;
  }

  .name-spark,
  .name-jetpack {
    opacity: 0 !important;
  }

  .name-banner {
    opacity: 1 !important;
    transform: var(--name-rest) !important;
  }

  .name-driller {
    transform: none !important;
  }

  .complex-ship--teal,
  .complex-ship-flash {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .complex-pulse {
    opacity: 0 !important;
  }

  .bring-fly {
    animation: none !important;
    transform: none !important;
    translate: none;
  }

  .redesign-block {
    opacity: 0 !important;
  }

  .redesign-rusty {
    opacity: 0 !important;
  }

  .redesign-new {
    opacity: 1 !important;
  }

  .redesign-teal__swipe {
    clip-path: none !important;
  }

  .redesign-roller {
    opacity: 0 !important;
  }

  .frame {
    opacity: 1;
    transform: none;
  }

  .m-beat {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .flight-strip__panel.is-leaving,
  .m-flight-beat-panel.is-leaving,
  .flight-strip__panel.is-active,
  .m-flight-beat-panel.is-active {
    transition: none;
    transform: none;
  }

  .facts-strip.is-scroll-hint .facts-strip__thumb {
    animation: none;
  }

  .has-facts.is-scroll-hint .art-band,
  .has-facts.is-scroll-hint .floor {
    filter: none;
    opacity: 1;
  }
}

/* ===== Firefox-only layout fixes (html.is-gecko from storyboard.js) =========
   Gecko 100vh != visible viewport; --gecko-vh is innerHeight.
   Gecko 100vw includes the scrollbar; --gecko-vw is clientWidth.
   Chrome and Edge never get .is-gecko. */
@media (min-width: 1024px) {
  html.is-gecko {
    --strip-h: clamp(200px, calc(var(--gecko-vh, 1svh) * 20), 280px);
    --gecko-wide: calc(var(--gecko-vw, 1vw) * 100);
  }

  html.is-gecko .stage {
    height: calc(var(--gecko-vh, 1svh) * 100);
  }

  html.is-gecko .frame {
    height: calc(var(--gecko-vh, 1svh) * 100);
    max-height: calc(var(--gecko-vh, 1svh) * 100);
    overflow: hidden;
  }

  html.is-gecko .frame.cta {
    overflow-x: hidden;
    overflow-y: auto;
  }

  html.is-gecko .frame.cta.is-sent {
    overflow-y: hidden;
  }

  /* Inherited crops sides only - scanner may paint above the art band. */
  html.is-gecko .has-facts.frame--fleet-inherited {
    overflow-x: hidden;
    overflow-y: visible;
  }

  html.is-gecko .has-facts {
    --d-src-w: calc(var(--gecko-vh, 1svh) * 100 * 16 / 9);
    --d-fit: min(1, calc(var(--gecko-wide) / var(--d-src-w)));
  }

  html.is-gecko .has-facts .art-band,
  html.is-gecko .has-facts .art-box {
    display: block !important;
  }

  html.is-gecko .has-facts .art-band {
    overflow: hidden;
  }

  html.is-gecko .has-facts .art-box {
    height: calc(var(--gecko-vh, 1svh) * 100);
    bottom: calc(var(--strip-h) - calc(var(--gecko-vh, 1svh) * 14));
    overflow: hidden;
  }

  /* Inherited (and orbit / hosting): box above the strip.
     height:auto + bottom:strip is the version that seated Inherited. */
  html.is-gecko .has-facts.frame--orbit-anim .art-box,
  html.is-gecko .has-facts.frame--fleet-hosting .art-box,
  html.is-gecko .has-facts.frame--fleet-inherited .art-box {
    top: 0;
    bottom: var(--strip-h);
    height: auto;
    overflow: visible;
  }

  html.is-gecko .has-facts.frame--orbit-anim .art-band,
  html.is-gecko .has-facts.frame--fleet-hosting .art-band,
  html.is-gecko .has-facts.frame--fleet-inherited .art-band {
    overflow: visible;
  }

  html.is-gecko .has-facts .facts-strip {
    z-index: 25;
    isolation: isolate;
  }

  html.is-gecko .has-facts .facts-strip__slots {
    display: flex;
    grid-column: 1 / -1;
    gap: 20px;
  }

  html.is-gecko .has-facts .facts-strip__slots .facts-slot {
    flex: 1 1 0;
    min-width: 0;
  }

  html.is-gecko .has-facts .floor {
    z-index: 24;
  }

  html.is-gecko .frame--plan {
    --plan-stage-bottom: calc(var(--gecko-vh, 1svh) * 14);
    --plan-stage-h: calc(var(--gecko-vh, 1svh) * 54);
  }

  html.is-gecko .frame--design {
    --design-stage-bottom: calc(var(--gecko-vh, 1svh) * 14);
    --design-stage-h: calc(var(--gecko-vh, 1svh) * 54);
  }

  html.is-gecko .frame--test {
    --test-stage-bottom: calc(var(--gecko-vh, 1svh) * 14);
    --test-stage-h: calc(var(--gecko-vh, 1svh) * 54);
    --test-rocket-h: calc(var(--gecko-vh, 1svh) * 54);
    --test-cog-y: calc(var(--gecko-vh, 1svh) * 24);
    --test-cog-size: calc(var(--gecko-vh, 1svh) * 7.4);
    --test-smoke-w: calc(var(--gecko-vh, 1svh) * 72);
    --test-smoke-h: calc(var(--gecko-vh, 1svh) * 32);
  }

  html.is-gecko .frame--launch {
    --launch-stage-bottom: calc(var(--gecko-vh, 1svh) * 14);
    --launch-stage-h: calc(var(--gecko-vh, 1svh) * 54);
    --launch-rocket-h: calc(var(--gecko-vh, 1svh) * 54);
    --launch-flame-w: calc(var(--gecko-vh, 1svh) * 11);
    --launch-flame-h: calc(var(--gecko-vh, 1svh) * 14);
    --launch-countdown-size: calc(var(--gecko-vh, 1svh) * 14);
    --launch-plume-w: calc(var(--gecko-vh, 1svh) * 80);
    --launch-plume-h: calc(var(--gecko-vh, 1svh) * 36);
    --launch-lift-distance: calc(var(--gecko-vh, 1svh) * 120);
  }

  html.is-gecko .frame--support {
    --support-stage-bottom: calc(var(--gecko-vh, 1svh) * 14);
    --support-stage-h: calc(var(--gecko-vh, 1svh) * 54);
    --support-rocket-h: calc(var(--gecko-vh, 1svh) * 54);
    --support-cog-y: calc(var(--gecko-vh, 1svh) * 13);
    --support-cog-size: calc(var(--gecko-vh, 1svh) * 8.25);
    --support-flame-y: calc(var(--gecko-vh, 1svh) * 16);
    --support-flame-h: calc(var(--gecko-vh, 1svh) * 13);
    --support-ext-y: calc(var(--gecko-vh, 1svh) * 10);
    --support-ext-h: calc(var(--gecko-vh, 1svh) * 22);
    --support-foam-y: calc(var(--gecko-vh, 1svh) * 14);
    --support-foam-w: calc(var(--gecko-vh, 1svh) * 14);
    --support-foam-h: calc(var(--gecko-vh, 1svh) * 10);
    --support-spanner-y: calc(var(--gecko-vh, 1svh) * 12);
    --support-spanner-h: calc(var(--gecko-vh, 1svh) * 9);
  }

  html.is-gecko .frame--redesign {
    --redesign-stage-bottom: calc(var(--gecko-vh, 1svh) * 14);
    --redesign-stage-h: calc(var(--gecko-vh, 1svh) * 54);
    --redesign-purple-h: calc(var(--gecko-vh, 1svh) * 54);
    --redesign-teal-h: calc(var(--gecko-vh, 1svh) * 54);
    --redesign-roller-h: calc(var(--gecko-vh, 1svh) * 14);
    --redesign-roller-start: calc(var(--gecko-vh, 1svh) * 44);
    --redesign-roller-end: calc(var(--gecko-vh, 1svh) * 24);
  }

  html.is-gecko .frame--build {
    --build-body-h: calc(var(--gecko-vh, 1svh) * 42);
    --build-floor-lift: calc(var(--gecko-vh, 1svh) * 0.1);
    --build-nose-overlap: calc(var(--gecko-vh, 1svh) * 0.05);
    --build-cog-y: calc(var(--gecko-vh, 1svh) * 13.05);
    --build-cog-size: calc(var(--gecko-vh, 1svh) * 6.6);
  }

  html.is-gecko .has-facts .build-stage {
    height: calc(var(--gecko-vh, 1svh) * 65.5);
    bottom: calc(calc(var(--gecko-vh, 1svh) * 14) + var(--build-floor-lift, 0));
  }

  html.is-gecko .frame--fleet-inherited {
    --fleet-stage-h: min(
      calc(calc(var(--gecko-vh, 1svh) * 54) - 40px),
      calc((calc(var(--gecko-vh, 1svh) * 100) - var(--strip-h)) * 0.52)
    );
  }

  html.is-gecko .has-facts.frame--orbit-anim .log-art {
    height: min(
      var(--anim-max-h, 300px),
      calc((calc(var(--gecko-vh, 1svh) * 100) - var(--strip-h)) * 0.86)
    );
    max-width: calc(var(--gecko-vw, 1vw) * 50);
  }

  /* Hosting: signed-off station seat (not the 16:9 scale bug). */
  html.is-gecko .has-facts.frame--fleet-hosting .log-art {
    top: calc(50% - 130px);
    translate: -260px 0;
  }

  /* Same bug as Support: Firefox drops translateX(-50%) when it shares
     `transform` with scale(). `translate` longhand adds the missing
     centre. Do not replace `transform` (Hosting: those overrides were
     a no-op). Do not add this to Build / orbit / Inherited - those
     transforms have no scale(), so Firefox already centres them.
     Spec: _md/FIREFOX.md */
  html.is-gecko .has-facts .support-stage,
  html.is-gecko .has-facts .redesign-stage,
  html.is-gecko .has-facts .plan-stage,
  html.is-gecko .has-facts .design-stage,
  html.is-gecko .has-facts .test-stage,
  html.is-gecko .has-facts .launch-stage,
  html.is-gecko .has-facts.frame--fleet-complex .log-art {
    translate: -50% 0;
  }

  html.is-gecko .has-facts.frame--fleet-name {
    --gecko-name-x: 40px;
  }

  html.is-gecko .has-facts.frame--fleet-name .log-art {
    bottom: calc(var(--gecko-vh, 1svh) * 14);
    height: calc(calc(var(--gecko-vh, 1svh) * 54) - 40px);
    translate: calc(-50% + var(--gecko-name-x, 40px)) 0;
  }

  html.is-gecko .frame--fleet-complex .log-art {
    bottom: calc(var(--gecko-vh, 1svh) * 14);
    height: calc(calc(var(--gecko-vh, 1svh) * 54) - 90px);
  }
}

@media (max-width: 1023px) {
  html.is-gecko .frame.has-facts,
  html.is-gecko .frame.cta {
    overflow: hidden;
  }

  html.is-gecko .has-facts .art-band {
    overflow: hidden;
  }

  html.is-gecko .has-facts.frame--fleet-inherited .art-band {
    overflow-x: visible;
    overflow-y: hidden;
  }
}

/* Alternate route pages — hide main-journey-only chrome (not flight ops slot/strip).
   .m-turn stays: squat-phone landscape uses the same overlay as the main journey. */
.route-page .m-progress {
  display: none !important;
}

a.flight-log__item,
a.flight-log__item-hit,
a.progress__hit {
  text-decoration: none;
}

a.flight-log__item--journey {
  color: #c3c9d3;
}

a.flight-log__item--journey.is-current,
a.flight-log__item--journey.is-now {
  color: #f4f5f7;
}

a.flight-log__item--row,
a.flight-log__item--feature {
  color: #f4f5f7;
}

a.flight-log__cta {
  color: #1c1f25;
  text-decoration: none;
}

a.flight-log__cta:hover {
  color: #0d1014;
  text-decoration: none;
}

a.flight-log__cta.is-current,
a.flight-log__cta.is-now {
  color: #fcb52f;
}

a.flight-log__cta.is-current:hover,
a.flight-log__cta.is-now:hover {
  color: #fcb52f;
  text-decoration: none;
}