:root {
  --color-bg: #000;
  --color-text: #f0f4ff;
  --color-accent: #8FC9BE;

  --text-hero: clamp(2rem, 8vw, 7rem);

  --duration-slow: 1.1s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Option wheel */
  --ow-text-color: rgba(240, 244, 255, 0.45);
  --ow-active-color: #fff;
  --ow-font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  --ow-inset: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  /* Sideways overflow is always a bug here; vertical is up to the page. Single
     -screen pages (the stubs, /ai) still don't scroll — their content fits. */
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Saira', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

canvas { display: block; }

/* ===== Full-height sections ===== */
.hero,
.worlds {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

/* Section-owned canvases scroll with their section; #saturn-bg stays fixed. */
.hero #splash-canvas,
.worlds #worlds-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Hero copy sits directly under the name rather than at the foot of the
   screen. Offset = the title's own top inset + its line box (line-height
   0.86 of --text-hero), so the two stay locked together as the type scales. */
.hero .splash__content {
  position: absolute;
  inset: calc(clamp(1.75rem, 6vh, 4rem) + var(--text-hero) * 0.86) 0 auto 0;
  padding-bottom: 0;
}

/* ===== Divisions track =====
   A native horizontal scroller: wheel, drag, touch and keyboard all come free,
   and scroll-snap decides where a slide settles. The script only reads the
   scroll position — it never drives it — so nothing fights the browser. */
.worlds__track {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

/* Section not fully in view: no touch drag or native scroll on the track. */
.worlds__track.is-parked {
  overflow-x: hidden;
  touch-action: pan-y;
}

.worlds__track::-webkit-scrollbar { display: none; }
.worlds__track:focus-visible { outline: 1px solid var(--color-accent); outline-offset: -4px; }

.worlds__panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 clamp(1.5rem, 6vw, 6rem);
}

.worlds__lead {
  flex: 0 0 auto;
  max-width: 17rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 244, 255, 0.14);
  border-radius: 0.75rem;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 600ms var(--ease-out-expo) 100ms, transform 600ms var(--ease-out-expo) 100ms;
}

.worlds__panel.is-active .worlds__lead { opacity: 1; transform: none; }

.worlds__lead-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.worlds__lead-role {
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.worlds__lead-bio {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(240, 244, 255, 0.65);
}

.worlds__lead--tbd .worlds__lead-role { color: rgba(240, 244, 255, 0.45); }

/* Copy clears whichever edge the world occupies on that slide. */
.worlds__copy {
  max-width: 46rem;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}

.worlds__panel.is-active .worlds__copy { opacity: 1; transform: none; }

.worlds__panel { padding-left: clamp(28%, 30%, 34%); }              /* Moon, left  */
.worlds__panel--centre { padding-left: clamp(1.5rem, 6vw, 6rem); }  /* Earth, mid  */
.worlds__panel--right {                                             /* Mars, right */
  padding-left: clamp(1.5rem, 6vw, 6rem);
  padding-right: clamp(28%, 30%, 34%);
}

.worlds__panel--centre {
  flex-direction: column;
  justify-content: center;
}

/* The ring Earth orbits — drawn in the same fractional coordinate space
   worlds.js uses for the pivot's position, so the two line up. Its fractions
   are of the whole slide (matching the canvas, which covers the full
   .worlds section unpadded), so the panel's own horizontal padding has to be
   cancelled back out or the ring would be narrower/shifted vs the 3D orbit. */
.worlds__orbit {
  position: absolute;
  display: block;
  top: 0;
  left: calc(-1 * clamp(1.5rem, 6vw, 6rem));
  width: calc(100% + 2 * clamp(1.5rem, 6vw, 6rem));
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.worlds__orbit ellipse {
  fill: none;
  stroke: rgba(240, 244, 255, 0.16);
  stroke-width: 0.25;
}

.worlds__panel--centre .worlds__copy {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  padding: clamp(1.5rem, 3vh, 2.25rem) clamp(1.75rem, 4vw, 3rem);
  background: radial-gradient(ellipse at center, rgba(2, 4, 6, 0.68) 0%, rgba(2, 4, 6, 0.4) 55%, transparent 85%);
}

.worlds__panel--centre .worlds__lead { position: relative; z-index: 1; margin: 0 auto; text-align: center; }

.worlds__panel--centre .worlds__title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.worlds__panel--centre .worlds__body {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* Mirror of the Moon slide: the copy+lead pair hugs the world's inner edge.
   The auto margin goes on the first flex child (lead) so the whole pair
   moves as a group — putting it on copy instead would push just the copy
   away, stretching the gap to the lead card sitting before it. */
.worlds__panel--right .worlds__lead { margin-left: auto; }
.worlds__panel--right .worlds__copy { text-align: right; }
.worlds__panel--right .worlds__body { margin-left: auto; }

.worlds__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.worlds__body {
  margin: clamp(0.9rem, 2vh, 1.5rem) 0 0;
  max-width: 52ch;
  font-size: clamp(0.85rem, 1.15vw, 1.05rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(240, 244, 255, 0.68);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.85);
}

.worlds__panel--centre .worlds__body { margin-left: auto; margin-right: auto; }

.worlds__link {
  display: inline-block;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  padding: 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 244, 255, 0.22);
  transition: color 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo);
}

.worlds__link:hover,
.worlds__link:focus-visible { color: #fff; border-bottom-color: #fff; }

.worlds__heading {
  position: absolute;
  top: clamp(1.5rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.85);
}

.worlds__dots-wrap {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.worlds__dots-hint {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.45);
}

.worlds__dots {
  display: flex;
  gap: 0.9rem;
}

.worlds__dot {
  width: 3.5rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.worlds__dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(240, 244, 255, 0.35);
  transition: background 260ms var(--ease-out-expo), transform 260ms var(--ease-out-expo);
}

.worlds__dot:hover::after { background: rgba(240, 244, 255, 0.6); transform: scaleY(1.3); }
.worlds__dot.is-active::after { background: var(--color-accent); transform: scaleY(1.3); }
.worlds__dot:focus-visible::after { outline: 1px solid var(--color-accent); outline-offset: 4px; }

@media (max-width: 780px) {
  .worlds__heading { top: clamp(1rem, 4vh, 2rem); }
}

/* Below the wheel/menu breakpoint the worlds have no room to share a row, so
   the copy drops clear of them instead of being squeezed against an edge. */
@media (max-width: 780px) {
  .worlds__panel,
  .worlds__panel--centre,
  .worlds__panel--right {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    padding: 0 clamp(1.5rem, 6vw, 3rem) clamp(5rem, 16vh, 9rem);
    overflow-y: auto;
  }

  .worlds__panel--centre .worlds__lead,
  .worlds__panel--right .worlds__lead { margin-left: auto; }

  .worlds__lead { max-width: 100%; }
}

/* ===== Latest launch highlight — full-bleed photo, stars fade into it ===== */
.launch {
  position: relative;
  z-index: 2;
}

.launch__hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 9vh, 6rem);
  overflow: hidden;
}

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

.launch__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fade the starfield into the photo at the top, and darken toward the
   bottom so the overlaid copy stays readable over any image. */
.launch__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--color-bg) 0%, rgba(6, 8, 12, 0) 32%, rgba(6, 8, 12, 0) 50%, var(--color-bg) 100%);
}

.launch__copy {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

.launch__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.launch__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.launch__meta {
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight: 300;
  color: rgba(240, 244, 255, 0.78);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.launch__link {
  display: inline-block;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  padding: 0.65rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  text-decoration: none;
  border-radius: 999px;
  transition: transform 200ms var(--ease-out-expo), opacity 200ms var(--ease-out-expo);
}

.launch__link:hover,
.launch__link:focus-visible { transform: translateY(-2px); opacity: 0.9; }

/* ===== Saturn AI teaser — coming soon, chat box lands here later ===== */
.ai-teaser {
  position: relative;
  z-index: 2;
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 10vh, 6rem) clamp(1.5rem, 6vw, 6rem);
}

/* Section-scoped dither: overrides the fixed full-page #dither-bg rule and
   fades at the edges so the wave blends into the starfield above and below. */
#dither-bg.ai-teaser__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.ai-teaser > :not(.ai-teaser__bg) { position: relative; z-index: 1; }

.ai-teaser__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ai-teaser__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ai-teaser__meta {
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  max-width: 40rem;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.68);
}

.ai-teaser__link {
  display: inline-block;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  padding: 0.65rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  text-decoration: none;
  border-radius: 999px;
  transition: transform 200ms var(--ease-out-expo), opacity 200ms var(--ease-out-expo);
}

.ai-teaser__link:hover,
.ai-teaser__link:focus-visible { transform: translateY(-2px); opacity: 0.9; }

/* ===== Milestone stats — overlaid top-right on the launch photo ===== */
.launch__stats {
  position: absolute;
  top: clamp(1.5rem, 5vh, 3rem);
  right: clamp(1.5rem, 6vw, 4rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vh, 1.5rem);
  text-align: right;
  max-width: 20rem;
}

.stat {
  padding-bottom: clamp(1rem, 2.5vh, 1.5rem);
  border-bottom: 1px solid rgba(240, 244, 255, 0.18);
}

.stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stat__value,
.stat__suffix {
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.75);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Below the hero image instead of overlaid on it, laid out as a row. */
@media (max-width: 780px) {
  .launch__stats {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid rgba(240, 244, 255, 0.12);
  }

  .stat {
    flex: 1 1 40%;
    border-bottom: none;
    padding-bottom: 0;
  }

  .stat__value,
  .stat__suffix { text-shadow: none; }
  .stat__label { text-shadow: none; }
}

/* The name, held at the top of the first screen. */
.hero__title {
  position: absolute;
  top: clamp(1.75rem, 6vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
}

body.is-loaded .hero__title { opacity: 1; }

/* ===== Depth text (vanilla port of React Bits' DepthText) ===== */
.depth-text {
  display: inline-block;
  perspective: 900px;
  perspective-origin: 50% 48%;
  isolation: isolate;
}

/* Before the script runs, the element is still plain text — keep it sized like
   the finished thing so nothing jumps when the layers are built. */
.depth-text,
.hero__title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
}

.depth-text__stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-2.4deg) rotateY(3.15deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.depth-text__layer,
.depth-text__face {
  grid-area: 1 / 1;
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  user-select: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

.depth-text__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: saturate(0.95) brightness(0.92);
  pointer-events: none;
}

.depth-text__face {
  position: relative;
  z-index: 1;
  color: var(--depth-text-face-color, #f8fafc);
  text-shadow: var(--depth-text-shadow, none);
  transform: translateZ(0.6px);
}

/* The visible stack is aria-hidden; this carries the accessible name. */
.depth-text__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .depth-text { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  .depth-text__stage { will-change: auto; }
}

#saturn-bg,
#dither-bg,
#shooting-stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
}

#saturn-bg { z-index: 0; }
/* Above the starfield, below Saturn and all copy. */
#shooting-stars { z-index: 1; }
#splash-canvas { z-index: 1; }
#dither-bg { z-index: 0; }

/* ===== Splash copy ===== */
.splash__content {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 1.5rem clamp(1.75rem, 6vh, 4rem);
  text-align: center;
  pointer-events: none;
}

.splash__title {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.splash__tagline {
  margin: 1rem auto 0;
  max-width: 46ch;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(240, 244, 255, 0.62);
  opacity: 0;
  transition: opacity var(--duration-slow) 0.15s var(--ease-out-expo);
}

/* Pages with no 3D subject to sit under — the copy takes the middle instead. */
.splash__content--center {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.splash__tagline--status {
  margin-top: 0.9rem;
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.72);
}

.splash__apply {
  margin: 1.5rem 0 0;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.9);
  opacity: 0;
  transition: opacity var(--duration-slow) 0.25s var(--ease-out-expo);
}

.splash__apply-link {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 244, 255, 0.35);
  transition: color 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo);
}

.splash__apply-link:hover,
.splash__apply-link:focus-visible { color: #fff; border-bottom-color: #fff; }

/* Small print — the AI-limitations notice the launch plan requires on the
   public page, not buried in a separate document. */
.splash__disclaimer {
  margin: 1.6rem auto 0;
  max-width: 62ch;
  font-size: clamp(0.62rem, 0.85vw, 0.72rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(240, 244, 255, 0.5);
  opacity: 0;
  transition: opacity var(--duration-slow) 0.35s var(--ease-out-expo);
}

.splash__link {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.5rem 0;
  pointer-events: auto;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 244, 255, 0.22);
  opacity: 0;
  transition: opacity var(--duration-slow) 0.3s var(--ease-out-expo),
              color 200ms var(--ease-out-expo),
              border-color 200ms var(--ease-out-expo);
}

.splash__link:hover,
.splash__link:focus-visible { color: #fff; border-bottom-color: #fff; }

body.is-loaded .splash__title,
body.is-loaded .splash__tagline,
body.is-loaded .splash__apply,
body.is-loaded .splash__disclaimer,
body.is-loaded .splash__link { opacity: 1; transform: none; }

/* ===== Option wheel nav (corner) ===== */
.nav-corner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  pointer-events: none;
}

/* Account — kept apart from the division nav, top right. */
.account-corner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.account-corner__link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.85);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(6, 8, 12, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 244, 255, 0.12);
  transition: color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.account-corner__link:hover,
.account-corner__link:focus-visible {
  color: #fff;
  background: rgba(6, 8, 12, 0.7);
  border-color: rgba(240, 244, 255, 0.3);
}

/* ===== Upcoming launches (sits left of Account) ===== */
.upcoming {
  position: relative;
}

.upcoming__toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.85);
  cursor: pointer;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(6, 8, 12, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 244, 255, 0.12);
  transition: color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo),
              border-color 200ms var(--ease-out-expo);
}

.upcoming__toggle:hover,
.upcoming__toggle:focus-visible,
.upcoming.is-open .upcoming__toggle {
  color: #fff;
  background: rgba(6, 8, 12, 0.7);
  border-color: rgba(240, 244, 255, 0.3);
}

/* Countdown reads as the live element in the pill, so a launch inside 24h is
   legible without opening the panel. */
.upcoming__countdown {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.upcoming.is-imminent .upcoming__toggle {
  border-color: rgba(143, 201, 190, 0.45);
}

.upcoming__chevron {
  width: 0.6rem;
  flex: none;
  transition: transform 240ms var(--ease-out-expo);
}

.upcoming.is-open .upcoming__chevron { transform: rotate(180deg); }

.upcoming__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(20rem, calc(100vw - 2.5rem));
  padding: 0.4rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 244, 255, 0.12);
  text-align: left;
  transform-origin: top right;
  /* Closed state — invisible and out of the tab order without display:none,
     which would kill the transition. The visibility flip is delayed on close
     so the fade-out gets to finish before the panel leaves the a11y tree. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.4rem) scaleY(0.94);
  transition: opacity 200ms var(--ease-out-expo), transform 220ms var(--ease-out-expo),
              visibility 0s linear 220ms;
}

.upcoming.is-open .upcoming__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out-expo), transform 220ms var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
  .upcoming__panel { transition-duration: 1ms; transform: none; }
}

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

.upcoming__item {
  padding: 1.1rem 0;
}

.upcoming__item + .upcoming__item {
  border-top: 1px solid rgba(240, 244, 255, 0.12);
}

.upcoming__name {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
}

.upcoming__when {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-accent);
}

.upcoming__tz,
.upcoming__vehicle {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: rgba(240, 244, 255, 0.55);
}

.upcoming__vehicle {
  margin-top: 0.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.upcoming__item-countdown {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #fff;
}

/* Watch button — only rendered when the ops schedule has a webcast link. */
.upcoming__watch {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #04120f;
  background: var(--color-accent);
  transition: filter 200ms var(--ease-out-expo);
}

.legal-page .upcoming__watch { color: #04120f; }

.upcoming__watch:hover,
.upcoming__watch:focus-visible { filter: brightness(1.15); }

.upcoming__empty {
  margin: 0;
  padding: 1.1rem 0;
  font-size: 0.8rem;
  color: rgba(240, 244, 255, 0.55);
}

.upcoming__all {
  display: block;
  padding: 0.9rem 0 1rem;
  border-top: 1px solid rgba(240, 244, 255, 0.12);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: rgba(240, 244, 255, 0.7);
  transition: color 200ms var(--ease-out-expo);
}

.upcoming__all:hover,
.upcoming__all:focus-visible { color: #fff; }

/* ===== /launches.php schedule listing ===== */
.schedule {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.schedule__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(240, 244, 255, 0.12);
}

.schedule__main { flex: 1 1 14rem; }
.schedule__when { flex: 0 1 14rem; }

.schedule .upcoming__name { font-size: 1.15rem; }

/* Narrow screens can't fit label and clock side by side. Inside 24h the clock
   is the part worth the width, so the label steps aside for it. */
@media (max-width: 560px) {
  .upcoming.is-imminent .upcoming__label { display: none; }

  /* The pill is narrower than the panel here, so hanging the panel off the
     pill's right edge pushes it off the left of the screen. Anchor it to the
     viewport instead — the corner is fixed already, so nothing shifts. */
  .upcoming__panel {
    position: fixed;
    top: 3.5rem;
    right: 1.1rem;
    left: 1.1rem;
    width: auto;
  }
}

/* Finite stack, flowing straight down from the corner mark. */
.option-wheel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  /* Indented past the bracket's vertical rule so the list reads as sitting
     inside the corner mark rather than hanging off it. */
  margin: 0.7rem 0 0 1.4rem;
  user-select: none;
  outline: none;
  pointer-events: auto;
}

.option-wheel__item {
  display: inline-block;
  margin: 0;
  padding: 0.12em 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--ow-font-size);
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  transform-origin: left center;
  cursor: pointer;
  /* --ow-p: 1 on the active row, 0 on the rest */
  color: color-mix(in srgb, var(--ow-active-color) calc(var(--ow-p, 0) * 100%), var(--ow-text-color));
  transition: color 220ms var(--ease-out-expo), opacity 220ms var(--ease-out-expo);
}

.option-wheel__item:hover,
.option-wheel__item:focus-visible { color: var(--ow-active-color); }
.option-wheel__item--selected {
  font-weight: 500;
  border-bottom: 1px solid currentColor;
}
.option-wheel__item:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 6px; }

/* Team's submenu: unrolls underneath its parent, spread out sideways.
   The 0fr/1fr grid row is what lets the height animate; the rest of the
   list slides down rather than the submenu overlapping it. */
.option-wheel__row { display: flex; flex-direction: column; align-items: flex-start; }

.option-wheel__sub {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  /* Closing is the slower half: leaving a menu shouldn't feel like it was
     yanked away, and the short delay forgives a pointer clipping the gap. */
  transition: grid-template-rows 420ms var(--ease-out-expo) 120ms,
              opacity 300ms var(--ease-out-expo) 120ms;
}

.option-wheel__sub .option-wheel__item {
  transform: translateX(-0.5rem);
  transition: color 220ms var(--ease-out-expo),
              transform 420ms var(--ease-out-expo) 120ms;
}

.option-wheel__sub-inner {
  display: flex;
  gap: 2.4em;
  overflow: hidden;
  padding-left: 1.1em;
}

.option-wheel__row:hover .option-wheel__sub,
.option-wheel__row:focus-within .option-wheel__sub,
.option-wheel__row--open .option-wheel__sub {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  /* Opening is quicker and immediate — no delay on the way in. */
  transition: grid-template-rows 320ms var(--ease-out-expo),
              opacity 240ms var(--ease-out-expo);
}

.option-wheel__row:hover .option-wheel__sub .option-wheel__item,
.option-wheel__row:focus-within .option-wheel__sub .option-wheel__item,
.option-wheel__row--open .option-wheel__sub .option-wheel__item {
  transform: none;
  transition: color 220ms var(--ease-out-expo),
              transform 340ms var(--ease-out-expo);
}

/* Team itself goes nowhere — it only opens the row beneath it. */
.option-wheel__item--parent { cursor: default; }
.sm-panel__item--parent { cursor: default; opacity: 0.7; }
.sm-panel__item--selected { border-bottom: 1px solid currentColor; }

.option-wheel__sub .option-wheel__item {
  font-size: 0.78em;
  padding-top: 0.4em;
  letter-spacing: 0.06em;
}

/* ===== Animated underlines =====
   A background gradient rather than a pseudo-element, so it works on inline
   elements and animates width without touching layout. */
.option-wheel__item:not(.option-wheel__item--parent),
.sm-panel__item:not(.sm-panel__item--parent),
.splash__link,
.splash__apply-link,
.sm-socials__link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 340ms var(--ease-out-expo),
              color 220ms var(--ease-out-expo),
              border-color 220ms var(--ease-out-expo);
}

.option-wheel__item:not(.option-wheel__item--parent):hover,
.option-wheel__item:not(.option-wheel__item--parent):focus-visible,
.sm-panel__item:not(.sm-panel__item--parent):hover,
.sm-panel__item:not(.sm-panel__item--parent):focus-visible,
.splash__link:hover,
.splash__link:focus-visible,
.splash__apply-link:hover,
.splash__apply-link:focus-visible,
.sm-socials__link:hover,
.sm-socials__link:focus-visible {
  background-size: 100% 1px;
}

/* The current page keeps a static rule, so the sweep reads as hover only.
   Matches the :not() specificity of the sweep rules above, or it never wins. */
.option-wheel__item--selected:not(.option-wheel__item--parent),
.sm-panel__item--selected:not(.sm-panel__item--parent) { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .option-wheel__item,
  .sm-panel__item,
  .splash__link,
  .splash__apply-link,
  .sm-socials__link { transition-duration: 1ms; }
}

/* Corner mark the list hangs from. */
.nav-corner::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(240, 244, 255, 0.4);
  border-left: 1px solid rgba(240, 244, 255, 0.4);
}

/* ===== Staggered menu (mobile) ===== */
.sm { display: none; }

.sm-toggle {
  position: fixed;
  top: clamp(0.9rem, 3vw, 1.4rem);
  left: clamp(0.9rem, 3vw, 1.4rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: auto;
}

.sm-toggle-textWrap {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
}

.sm-toggle-textInner {
  display: flex;
  flex-direction: column;
  line-height: 1;
  transition: transform 0.5s var(--ease-out-expo);
}

.sm-toggle-line { display: block; height: 1em; line-height: 1; }

body.sm-open .sm-toggle-textInner { transform: translateY(-1em); }

.sm-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: transform 0.6s var(--ease-out-expo);
}

body.sm-open .sm-icon { transform: rotate(225deg); }

.sm-icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.sm-icon-line--v { transform: translate(-50%, -50%) rotate(90deg); }

/* Panels slide in from the right; the prelayers trail the main panel to give
   the staggered colour-sweep the original gets from GSAP. */
.sm-prelayer,
.sm-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(84vw, 420px);
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-out-expo);
}

.sm-prelayer { z-index: 45; }
.sm-prelayer--1 { background: var(--color-accent); }
.sm-prelayer--2 { background: #24564c; }

.sm-panel {
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 5.5rem 1.75rem 2rem;
  background: #06090f;
  border-left: 1px solid rgba(240, 244, 255, 0.1);
  overflow-y: auto;
}

body.sm-open .sm-prelayer,
body.sm-open .sm-panel { transform: translateX(0); }

body.sm-open .sm-prelayer--1 { transition-delay: 0.06s; }
body.sm-open .sm-prelayer--2 { transition-delay: 0.12s; }
body.sm-open .sm-panel       { transition-delay: 0.18s; }

/* Closing runs in reverse: panel first, prelayers behind it. */
.sm-prelayer--1 { transition-delay: 0.12s; }
.sm-prelayer--2 { transition-delay: 0.06s; }
.sm-panel       { transition-delay: 0s; }

.sm-panel__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.sm-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sm-panel__itemWrap { overflow: hidden; line-height: 1; }

.sm-panel__item {
  position: relative;
  display: inline-block;
  padding: 0.15em 1.4em 0.15em 0;
  color: var(--color-text);
  font-size: clamp(2.2rem, 11vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.6s var(--ease-out-expo),
              opacity 0.6s var(--ease-out-expo),
              color 0.25s;
}

.sm-panel__item:hover,
.sm-panel__item:focus-visible { color: var(--color-accent); }

.sm-panel__item--sub { margin-left: 1.2em; font-size: 0.7em; opacity: 0.85; }

body.sm-open .sm-panel__item { transform: translateY(0); opacity: 1; }

.sm-panel__item::after {
  content: attr(data-index);
  position: absolute;
  top: 0.35em;
  right: 0;
  font-size: 0.28em;
  font-weight: 400;
  color: var(--color-accent);
}

.sm-socials { margin-top: auto; padding-top: 2rem; }

.sm-socials__title {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* The links are appended by script with no whitespace between them, so the
   gap has to come from layout rather than from text nodes. */
.sm-socials__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.sm-socials__link {
  color: var(--color-text);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 244, 255, 0.2);
  transition: color 0.25s, border-color 0.25s;
}

.sm-socials__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ===== Breakpoint: wheel on desktop, staggered menu on small screens ===== */
@media (max-width: 780px) {
  .nav-corner { display: none; }
  .sm { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .splash__title,
  .splash__tagline,
  .splash__link { transition: none; opacity: 1; transform: none; }

  .sm-prelayer,
  .sm-panel,
  .sm-panel__item,
  .sm-icon,
  .sm-toggle-textInner { transition-duration: 1ms; transition-delay: 0s; }
}

/* ===== /ai — scoped look, everything else on this page stays default ===== */
/* .splash__content--center is position:fixed/inset:0 for full-bleed hero
   overlays — fine for a page with nothing after it, but it takes main out
   of flow entirely, so the footer right after it renders at the very top
   of the document instead of below the content. */
.page-ai main.splash__content {
  position: relative;
  inset: auto;
  min-height: 100dvh;
  pointer-events: auto;
}

.page-ai .splash__title {
  font-family: 'Saira', system-ui, sans-serif;
  background: linear-gradient(100deg, #fff 10%, var(--color-accent) 55%, #fff 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(143, 201, 190, 0.45);
  animation: page-ai-sheen 7s linear infinite;
}

.page-ai .splash__tagline--status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.4em;
  color: var(--color-accent);
}

.page-ai .splash__tagline--status::before {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 2px rgba(143, 201, 190, 0.9);
  animation: page-ai-pulse 1.8s ease-in-out infinite;
}

.page-ai .splash__apply-link {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.6rem 1.5rem;
  border: 1px solid rgba(143, 201, 190, 0.45);
  border-radius: 999px;
  background: rgba(143, 201, 190, 0.08);
  color: var(--color-text);
  box-shadow: 0 0 0 rgba(143, 201, 190, 0.5);
  transition: box-shadow 260ms var(--ease-out-expo),
              border-color 260ms var(--ease-out-expo),
              background 260ms var(--ease-out-expo);
}

.page-ai .splash__apply-link:hover,
.page-ai .splash__apply-link:focus-visible {
  color: #fff;
  border-color: var(--color-accent);
  background: rgba(143, 201, 190, 0.16);
  box-shadow: 0 0 24px 2px rgba(143, 201, 190, 0.35);
}

.page-ai .splash__disclaimer {
  position: relative;
  margin-top: clamp(2rem, 5vh, 3.25rem);
  padding: 1.1rem 1.4rem;
  max-width: 58ch;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(0.6rem, 0.8vw, 0.68rem);
  letter-spacing: 0.01em;
  color: rgba(240, 244, 255, 0.55);
  background: rgba(6, 14, 12, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(143, 201, 190, 0.18);
  border-radius: 0.5rem;
}

.page-ai .splash__disclaimer::before {
  content: '// system notice';
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(143, 201, 190, 0.75);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes page-ai-sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: -220% 50%; }
}

@keyframes page-ai-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .page-ai .splash__title { animation: none; }
  .page-ai .splash__tagline--status::before { animation: none; }
}

/* ===== Site footer — real footer, every page ===== */
.site-footer {
  position: relative;
  z-index: 5;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(240, 244, 255, 0.1);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 7vh, 4.5rem) clamp(1.5rem, 5vw, 5rem) clamp(2rem, 5vh, 3rem);
}

.site-footer__logo {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.site-footer__tagline {
  margin: 0.75rem 0 0;
  max-width: 26rem;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.55);
}

.site-footer__socials {
  display: flex;
  gap: 1.1rem;
  margin-top: 1.25rem;
}

.site-footer__socials a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.5);
  text-decoration: none;
  transition: color 200ms var(--ease-out-expo);
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible { color: var(--color-accent); }

.site-footer__heading {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.4);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__col a,
.site-footer__cookie-settings {
  font: inherit;
  font-family: 'Saira', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(240, 244, 255, 0.6);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: color 200ms var(--ease-out-expo);
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible,
.site-footer__cookie-settings:hover,
.site-footer__cookie-settings:focus-visible { color: #fff; }

.site-footer__bottom {
  border-top: 1px solid rgba(240, 244, 255, 0.08);
  padding: 1.25rem clamp(1.5rem, 5vw, 5rem);
}

.site-footer__bottom p {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(240, 244, 255, 0.35);
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ===== Cookie consent banner ===== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(6, 10, 14, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(240, 244, 255, 0.12);
  transform: translateY(100%);
  transition: transform 400ms var(--ease-out-expo);
}

.cookie-banner.is-visible { transform: none; }

.cookie-banner__text {
  margin: 0;
  max-width: 62ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(240, 244, 255, 0.75);
}

.cookie-banner__text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Both buttons share one class — same size, same weight, same border. Neither
   choice is styled to look like the "right" one. */
.cookie-banner__btn {
  font: inherit;
  font-family: 'Saira', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 244, 255, 0.35);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.cookie-banner__btn:hover,
.cookie-banner__btn:focus-visible {
  border-color: var(--color-accent);
  background: rgba(143, 201, 190, 0.12);
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__actions { justify-content: center; }
}

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

/* ===== Auth pages — signup / login / account ===== */
.auth-main {
  position: relative;
  inset: auto;
  min-height: 100dvh;
  padding: clamp(1.5rem, 6vw, 4rem);
}

.auth-form {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
  pointer-events: auto;
}

.auth-form__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-form__intro {
  margin: 0 0 1.75rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.6);
}

.auth-field { margin-bottom: 1.1rem; }

.auth-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.55);
}

.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"],
.auth-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 0.5rem;
  transition: border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.auth-field input:focus-visible,
.auth-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.06);
}

/* Required consent — plain, sits with the rest of the form. */
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.4rem 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(240, 244, 255, 0.75);
}

.auth-consent input { margin-top: 0.2rem; flex-shrink: 0; }
.auth-consent a { color: var(--color-accent); }

/* Optional marketing opt-in — visually boxed off so it reads as its own,
   separate decision from the required Terms/Privacy checkbox above. Starts
   unticked; nothing pre-checks it. */
.auth-consent--optional {
  padding: 0.85rem 0.95rem;
  background: rgba(143, 201, 190, 0.05);
  border: 1px dashed rgba(143, 201, 190, 0.25);
  border-radius: 0.5rem;
}

.auth-submit {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #06110f;
  background: var(--color-accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 200ms var(--ease-out-expo);
}

.auth-submit:hover,
.auth-submit:focus-visible { filter: brightness(1.1); }

.auth-form__foot {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: rgba(240, 244, 255, 0.55);
}

.auth-form__foot a { color: var(--color-accent); text-decoration: none; }
.auth-form__foot a:hover { text-decoration: underline; }

.auth-form--wide { max-width: 48rem; }
.auth-form--admin { max-width: 96rem; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}

.admin-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(240, 244, 255, 0.1);
}

.admin-table__actions { display: flex; gap: 0.5rem; }
.admin-table__actions form { display: inline; }
.admin-table__actions button {
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.admin-table__actions button:hover { filter: brightness(1.15); }
.admin-table__you { color: rgba(240, 244, 255, 0.45); }
.admin-table__actions a { color: var(--color-accent); text-decoration: none; }
.admin-table__actions a:hover { text-decoration: underline; }

.admin-filter {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 0.5rem;
}

.account-section select,
.account-section textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 0.5rem;
  color-scheme: dark;
}

.cms-block-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(240, 244, 255, 0.1);
}

.cms-block-row__summary { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.cms-block-row__summary span { color: rgba(240, 244, 255, 0.55); }

.cms-block-row__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cms-block-row__actions a,
.cms-block-row__actions button {
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
}
.cms-block-row__actions a:hover,
.cms-block-row__actions button:hover { filter: brightness(1.15); }

.cms-page { pointer-events: auto; width: 100%; max-width: 48rem; margin: 0 auto; text-align: left; }
.cms-heading { margin: 0 0 0.75rem; }
/* Placeholder pages are a single heading ("Coming Soon"): centre the line
   instead of hanging it off the left edge of the 48rem measure. */
.cms-page:has(> .cms-heading:only-child) { text-align: center; }
.cms-paragraph { margin: 0 0 1rem; line-height: 1.6; color: rgba(240, 244, 255, 0.75); }
.cms-image { margin: 0 0 1.5rem; }
.cms-image img { max-width: 100%; border-radius: 0.5rem; }
.cms-image figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: rgba(240, 244, 255, 0.55); }
.cms-button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  color: #06110f;
  background: var(--color-accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
}
.cms-button:hover { filter: brightness(1.1); }

.auth-error {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  color: #ffb4b4;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.25);
  border-radius: 0.5rem;
}

.auth-notice {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  color: var(--color-accent);
  background: rgba(143, 201, 190, 0.08);
  border: 1px solid rgba(143, 201, 190, 0.25);
  border-radius: 0.5rem;
}

/* Account settings */
.account-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(240, 244, 255, 0.12);
}

.account-section__title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
}

.account-section__hint {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  color: rgba(240, 244, 255, 0.55);
}

.account-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.account-actions button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 244, 255, 0.3);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.account-actions button:hover,
.account-actions button:focus-visible { border-color: var(--color-accent); background: rgba(143, 201, 190, 0.1); }

.account-actions button.is-danger {
  border-color: rgba(255, 90, 90, 0.4);
  color: #ffb4b4;
}

.account-actions button.is-danger:hover,
.account-actions button.is-danger:focus-visible {
  border-color: #ff6b6b;
  background: rgba(255, 90, 90, 0.1);
}

.account-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(240, 244, 255, 0.75);
}

.account-field input { margin-top: 0.2rem; flex-shrink: 0; }

/* ===== Legal pages — Privacy / Terms / Cookies, real body copy ===== */
.legal-page {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(6.5rem, 14vh, 9.5rem) clamp(1.5rem, 6vw, 2.5rem) clamp(6rem, 10vh, 8rem);
}

.legal-page__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.legal-page__updated {
  margin: 0 0 2.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.45);
}

.legal-page h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal-page p,
.legal-page li {
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(240, 244, 255, 0.75);
}

.legal-page p { margin: 0 0 1rem; }

.legal-page ul,
.legal-page ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.legal-page li { margin-bottom: 0.4rem; }

.legal-page a { color: var(--color-accent); }

.legal-page strong { color: var(--color-text); font-weight: 600; }

.legal-page table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.legal-page th,
.legal-page td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(240, 244, 255, 0.12);
  color: rgba(240, 244, 255, 0.75);
}

.legal-page th {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.5);
}

/* ===== SaturnAI chat (/ai) =====
   The splash version of this page is a fixed, centred, non-scrolling hero.
   Chat needs the opposite: a normal document that scrolls, with the log doing
   its own scrolling inside a capped column so the composer never moves. */
/* The dither wave competes with body text at full strength. Chat is a reading
   surface, so it drops back to atmosphere — tune the one number to taste. */
.page-ai--chat #dither-bg { opacity: 0.28; }

.page-ai--chat main.chat {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 52rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vh, 7rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vh, 3rem);
  pointer-events: auto;
}

.chat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.chat__title {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.06em;
}

.chat__status {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.5);
}

.chat__badge {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgba(143, 201, 190, 0.35);
  border-radius: 999px;
}

.chat__log {
  flex: 1 1 auto;
  min-height: 18rem;
  max-height: 58dvh;
  overflow-y: auto;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(240, 244, 255, 0.1);
  border-radius: 0.75rem;
  scrollbar-width: thin;
}

.chat-msg { margin-bottom: 1.35rem; }
.chat-msg:last-child { margin-bottom: 0; }

.chat-msg__who {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.4);
}

.chat-msg__body {
  font-size: 0.92rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  color: rgba(240, 244, 255, 0.9);
}

/* Markdown rendered from model output. Only the elements the renderer can
   actually produce are styled; nothing else ever reaches the page. */
.chat-msg__body > :first-child { margin-top: 0; }
.chat-msg__body > :last-child { margin-bottom: 0; }
.chat-msg__body p { margin: 0 0 0.85rem; }

.chat-msg__body h3,
.chat-msg__body h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.chat-msg__body h4 { font-size: 0.88rem; color: rgba(240, 244, 255, 0.8); }

.chat-msg__body ul,
.chat-msg__body ol { margin: 0 0 0.85rem; padding-left: 1.35rem; }
.chat-msg__body li > ul,
.chat-msg__body li > ol { margin: 0.35rem 0 0; }
.chat-msg__body li { margin-bottom: 0.35rem; }
.chat-msg__body li::marker { color: var(--color-accent); }

.chat-msg__body strong { font-weight: 600; color: var(--color-text); }
.chat-msg__body em { font-style: italic; }

.chat-msg__body code {
  padding: 0.1rem 0.32rem;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--color-accent);
  background: rgba(143, 201, 190, 0.09);
  border-radius: 0.25rem;
}

.chat-msg__body pre {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  /* Code is the one place a horizontal scrollbar beats wrapping: a broken line
     in a script is worse than a scroll. */
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(240, 244, 255, 0.12);
  border-radius: 0.5rem;
}

.chat-msg__body pre code {
  display: block;
  padding: 0;
  white-space: pre;
  color: rgba(240, 244, 255, 0.92);
  background: none;
  border-radius: 0;
}

/* The opening line, refusals and errors are plain strings, not markdown, so
   they keep their own line breaks instead of being wrapped in paragraphs. */
.chat-msg--user .chat-msg__body,
.chat-msg--error .chat-msg__body,
.chat-msg--ai.is-plain .chat-msg__body { white-space: pre-wrap; }

.chat-msg--user .chat-msg__who { color: var(--color-accent); }
.chat-msg--user .chat-msg__body {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(143, 201, 190, 0.35);
}

.chat-msg--ai.is-pending .chat-msg__body {
  color: rgba(240, 244, 255, 0.45);
  animation: chat-pulse 1.4s ease-in-out infinite;
}

.chat-msg--error .chat-msg__body {
  padding: 0.65rem 0.85rem;
  color: #ffb4b4;
  background: rgba(255, 90, 90, 0.07);
  border: 1px solid rgba(255, 90, 90, 0.22);
  border-radius: 0.5rem;
}

@keyframes chat-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

.chat-msg__feedback {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.chat-msg__fb {
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  color: rgba(240, 244, 255, 0.55);
  background: transparent;
  border: 1px solid rgba(240, 244, 255, 0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo);
}

.chat-msg__fb:hover,
.chat-msg__fb:focus-visible { color: var(--color-text); border-color: var(--color-accent); }
.chat-msg__fb.is-report:hover,
.chat-msg__fb.is-report:focus-visible { color: #ffb4b4; border-color: rgba(255, 90, 90, 0.45); }
.chat-msg__fb-done { font-size: 0.68rem; color: var(--color-accent); }

.chat__composer { margin-top: 1.25rem; }

.chat__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

/* Visually hidden, not removed: the radio keeps its place in the tab order and
   the accessibility tree, and the chip beside it is what gets painted. */
.chat__mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.chat__mode span {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.55);
  border: 1px solid rgba(240, 244, 255, 0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.chat__mode input:checked + span {
  color: #06110f;
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.chat__mode input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.chat__input-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.4);
}

.chat__input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 0.5rem;
  transition: border-color 200ms var(--ease-out-expo);
}

.chat__input:focus-visible { outline: none; border-color: var(--color-accent); }
.chat__input:disabled { opacity: 0.5; }

.chat__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.7rem;
}

.chat__count { font-size: 0.7rem; color: rgba(240, 244, 255, 0.4); }

.chat__send {
  padding: 0.6rem 1.6rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06110f;
  background: var(--color-accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 200ms var(--ease-out-expo);
}

.chat__send:hover:not(:disabled) { filter: brightness(1.1); }
.chat__send:disabled { opacity: 0.5; cursor: default; }

.chat__notice {
  margin: 1.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.45);
}

.chat__notice--quiet { margin-top: 0.6rem; }
.chat__notice a { color: var(--color-accent); }

@media (max-width: 600px) {
  .chat__log { max-height: 50dvh; }
}

/* ===== Age gate (/ai, first visit) ===== */
.age-gate {
  width: 100%;
  max-width: 24rem;
  margin: 1.5rem auto 0;
  text-align: left;
  pointer-events: auto;
}

.age-gate__intro {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.6);
}

.age-gate__options { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }

.age-gate__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  border: 1px solid rgba(240, 244, 255, 0.15);
  border-radius: 0.5rem;
  cursor: pointer;
}

.age-gate__option:hover { border-color: rgba(143, 201, 190, 0.4); }
.age-gate__option:has(input:checked) { border-color: var(--color-accent); background: rgba(143, 201, 190, 0.07); }

/* ===== AI control panel (/admin-ai.php) ===== */
.ai-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 1.5rem 0;
  background: rgba(240, 244, 255, 0.1);
  border: 1px solid rgba(240, 244, 255, 0.1);
  border-radius: 0.6rem;
  overflow: hidden;
}

.ai-status__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: #000;
}

.ai-status__label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.4);
}

.ai-status__value { font-size: 0.95rem; font-weight: 500; }
.ai-status__value.is-on { color: var(--color-accent); }
.ai-status__value.is-off { color: #ffb4b4; }

.ai-kill {
  width: 100%;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffb4b4;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.4);
  border-radius: 999px;
  cursor: pointer;
}

.ai-kill:hover { background: rgba(255, 90, 90, 0.18); }

.ai-test-out {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(240, 244, 255, 0.85);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(240, 244, 255, 0.12);
  border-radius: 0.5rem;
}

.ai-inline-form { display: inline; }
.ai-inline-form select { width: auto; padding: 0.3rem 0.5rem; font-size: 0.78rem; }
.admin-table tr.is-handled { opacity: 0.45; }


/* ===== Error pages — /error.php ===== */
/* Copy on the left, Earth turning on the right. The canvas is squared off by
   aspect-ratio so the globe never stretches when the column narrows. */
.errorp {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  text-align: left;
}

.errorp__code {
  margin: 0;
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(240, 244, 255, 0.14);
}

.errorp__title {
  margin: 0.4rem 0 0;
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}

.errorp__blurb {
  margin: 0.9rem 0 0;
  max-width: 30rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.6);
}

.errorp__link {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  color: #06110f;
  background: var(--color-accent);
  border-radius: 999px;
  text-decoration: none;
  transition: filter 200ms var(--ease-out-expo);
}

.errorp__link:hover,
.errorp__link:focus-visible { filter: brightness(1.12); }

.errorp__globe { position: relative; }

.errorp__globe canvas {
  width: 100%;
  aspect-ratio: 1;
  max-height: 70vh;
}

@media (max-width: 760px) {
  .errorp { grid-template-columns: 1fr; text-align: center; }
  .errorp__blurb { margin-inline: auto; }
  .errorp__globe { order: -1; }
  .errorp__globe canvas { max-width: 16rem; margin: 0 auto; }
}

/* ===== Vehicle pages (rhea.php) ===================================== */
/* Full-bleed media sections stacked with one live 3D bay between them.
   Each media section owns its own background image, so the fixed starfield
   used on the homepage isn't needed here — the viewer draws its own. */

.vhero,
.vstory {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
}

.vhero__media,
.vstory__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Scrim: dark at the copy's corner, clear over the subject. Two stops rather
   than a flat overlay so the sky in the plate keeps its colour. */
.vhero::after,
.vstory::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 32%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
}

.vstory--right::after {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 32%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
}

.vhero__copy,
.vstory__copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(5rem, 12vh, 9rem);
}

/* The hero line is set to breathe: let it use the width it has rather than
   wrapping into a stack while half the plate sits empty. The body copy keeps
   its own measure below. */
.vhero__copy { max-width: min(92rem, 78vw); }

.vstory--right {
  justify-content: flex-end;
  text-align: right;
}

.vhero__eyebrow,
.vstory__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.vhero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.vstory__title {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.vhero__body,
.vstory__body {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.78);
}

.vstory--right .vhero__body,
.vstory--right .vstory__body { margin-left: auto; }

.vstory__link {
  display: inline-block;
  margin-top: 1.6rem;
  padding-bottom: 0.2rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 244, 255, 0.35);
  transition: color 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo);
}

.vstory__link:hover,
.vstory__link:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Spec figures under a story block. Reuses .stat from the homepage milestones,
   laid out as a row and dropped a size — these sit under body copy, not over a
   full-bleed plate, so they shouldn't out-shout the section title. */
.vstory__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin: 2.25rem 0 0;
}

.vstory--right .vstory__stats { justify-content: flex-end; }

.vstory__stats .stat { padding-bottom: 0; border-bottom: none; }

.vstory__stats .stat__value {
  display: block;
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

.vstory__stats .stat__label { font-size: 0.72rem; }

.vhero__scroll {
  position: absolute;
  z-index: 2;
  inset: auto clamp(1.5rem, 6vw, 6rem) 1.5rem auto;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.4);
}

/* ===== 3D bay ======================================================= */

.viewer {
  position: relative;
  height: 100svh;
  background: #000;
  border-block: 1px solid rgba(240, 244, 255, 0.08);
}

#vehicle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* Vertical drags stay with the browser, so a phone can always scroll past
     the bay; horizontal drags still reach the pointer handlers and rotate. */
  touch-action: pan-y;
}

#vehicle-canvas.is-dragging { cursor: grabbing; }

.viewer__head {
  position: absolute;
  z-index: 2;
  inset: clamp(4.5rem, 10vh, 7rem) auto auto clamp(1.5rem, 6vw, 6rem);
  pointer-events: none;
}

.viewer__eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.viewer__title {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.viewer__controls {
  position: absolute;
  z-index: 2;
  inset: auto clamp(1.5rem, 6vw, 6rem) clamp(3.4rem, 8vh, 5rem) auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.viewer__btn {
  min-width: 2.4rem;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(240, 244, 255, 0.82);
  background: rgba(240, 244, 255, 0.06);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 180ms, color 180ms, border-color 180ms;
}

.viewer__btn:hover,
.viewer__btn:focus-visible { background: rgba(240, 244, 255, 0.14); color: #fff; border-color: rgba(240, 244, 255, 0.4); }
.viewer__btn[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #04211c; }

.viewer__status {
  position: absolute;
  z-index: 2;
  inset: auto auto clamp(1.4rem, 4vh, 2rem) clamp(1.5rem, 6vw, 6rem);
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(240, 244, 255, 0.35);
  pointer-events: none;
}

/* Sits over the canvas until the visitor opts in. Until then the wheel is
   left untouched and the page scrolls straight past the bay. */
.viewer__hint {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(240, 244, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms var(--ease-out-expo);
  pointer-events: none;
}

.viewer.is-ready .viewer__hint { opacity: 1; pointer-events: auto; }
.viewer.is-engaged .viewer__hint { opacity: 0; pointer-events: none; }

@media (max-width: 780px) {
  .vstory--right { text-align: left; justify-content: flex-start; }
  .vstory--right::after {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 34%, rgba(0, 0, 0, 0) 64%),
      linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
  }
  .vstory--right .vstory__body { margin-left: 0; }
  .viewer__head { inset: clamp(4.5rem, 10vh, 7rem) auto auto clamp(1.5rem, 6vw, 6rem); }
  .viewer__controls { justify-content: flex-start; inset: auto auto clamp(3.4rem, 8vh, 5rem) clamp(1.5rem, 6vw, 6rem); }
}

/* ===== Careers — board, role page, applications ===== */
/* .splash__content--center centres its child vertically and takes the element
   out of flow; the board runs long and has a footer under it, so these pages
   opt back into normal document flow. */
.page-careers main.splash__content {
  position: relative;
  inset: auto;
  min-height: 100dvh;
  justify-content: flex-start;
  pointer-events: auto;
  text-align: left;
}

.careers {
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
}

.careers__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.careers__title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.careers__intro {
  margin: 0;
  max-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(240, 244, 255, 0.65);
}

.careers__count {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.careers__board {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 860px) {
  .careers__board { grid-template-columns: 1fr; }
}

/* Filter rail */
.careers-filters {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

@media (max-width: 860px) {
  .careers-filters { position: static; }
}

.careers-filters__group {
  margin: 0;
  padding: 0;
  border: none;
}

.careers-filters__legend {
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.45);
}

.careers-filters__search {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 244, 255, 0.18);
  border-radius: 0.5rem;
}

.careers-filters__search:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.careers-filters__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0;
  font-size: 0.82rem;
  color: rgba(240, 244, 255, 0.75);
  cursor: pointer;
}

.careers-filters__option:hover { color: var(--color-text); }
.careers-filters__option input { accent-color: var(--color-accent); cursor: pointer; }
.careers-filters__option input:disabled { cursor: default; }
.careers-filters__option input:disabled + span { color: rgba(240, 244, 255, 0.45); }

/* Keep native dropdowns legible across browsers and operating-system themes. */
select {
  background-color: #000 !important;
  color: #fff !important;
  color-scheme: dark;
}

select option,
select optgroup {
  background-color: #000;
  color: #fff;
}

.careers-filters__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(240, 244, 255, 0.12);
}

.careers-filters__apply {
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  background: transparent;
  border: 1px solid rgba(240, 244, 255, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.careers-filters__apply:hover,
.careers-filters__apply:focus-visible {
  border-color: var(--color-accent);
  background: rgba(143, 201, 190, 0.1);
}

.careers-filters__clear {
  font-size: 0.78rem;
  color: rgba(240, 244, 255, 0.55);
  text-decoration: none;
}

.careers-filters__clear:hover { color: var(--color-accent); }

/* Results */
.careers-results__empty {
  margin: 0;
  padding: 2.5rem 0;
  font-size: 0.9rem;
  color: rgba(240, 244, 255, 0.55);
}

.careers-group { margin-bottom: 2.5rem; }

.careers-group__title {
  margin: 0 0 0.25rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.4rem;
}

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

.careers-row {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(240, 244, 255, 0.08);
}

.careers-row__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0.9rem 0.2rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 0.4rem;
  transition: background 200ms var(--ease-out-expo), padding-left 200ms var(--ease-out-expo);
}

.careers-row__link:hover,
.careers-row__link:focus-visible {
  background: rgba(143, 201, 190, 0.07);
  padding-left: 1.25rem;
  outline: none;
}

.careers-row__title { font-size: 0.95rem; font-weight: 500; }

.careers-row__meta {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-shrink: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(240, 244, 255, 0.5);
}

.careers-row__division { color: var(--color-accent); }
.careers-row__arrow { color: rgba(240, 244, 255, 0.35); }
.careers-row__link:hover .careers-row__arrow { color: var(--color-accent); }

.careers-row__summary {
  margin: 0 0 0.5rem;
  padding: 0 0.9rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(240, 244, 255, 0.5);
}

@media (max-width: 620px) {
  .careers-row__link { flex-direction: column; gap: 0.35rem; }
  .careers-row__meta { gap: 0.6rem; }
}

/* One role */
.job {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

.job__back { margin: 0 0 1.5rem; font-size: 0.8rem; }
.job__back a { color: var(--color-accent); text-decoration: none; }
.job__back a:hover { text-decoration: underline; }

.job__title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.job__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.job__badges li {
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 244, 255, 0.12);
  border-radius: 999px;
}

.job__summary {
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.8);
}

.job__body p {
  margin: 0 0 1rem;
  line-height: 1.7;
  color: rgba(240, 244, 255, 0.75);
}

.job__section {
  margin: 2rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.job-list {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  line-height: 1.7;
  color: rgba(240, 244, 255, 0.75);
}

.job-list li { margin-bottom: 0.35rem; }

.job__apply {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(240, 244, 255, 0.12);
}

.job__apply-note {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  color: rgba(240, 244, 255, 0.6);
}

/* Applications */
.app-status {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
}

.app-status--rejected,
.app-status--withdrawn { color: rgba(240, 244, 255, 0.5); }

.app-answers { margin: 0; }

.app-answers dt {
  margin-top: 1.1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 244, 255, 0.5);
}

.app-answers dd {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(240, 244, 255, 0.85);
}

.app-thread {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-message {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(240, 244, 255, 0.12);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
}

/* Team replies carry the accent edge so a thread scans at a glance. */
.app-message--staff {
  border-color: rgba(143, 201, 190, 0.3);
  background: rgba(143, 201, 190, 0.06);
}

.app-message__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: rgba(240, 244, 255, 0.5);
}

.app-message__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(240, 244, 255, 0.85);
}

.app-summaries {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-summary__link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  flex: 1;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid rgba(240, 244, 255, 0.12);
  border-radius: 0.5rem;
  transition: border-color 200ms var(--ease-out-expo), background 200ms var(--ease-out-expo);
}

.app-summary__link:hover,
.app-summary__link:focus-visible {
  border-color: var(--color-accent);
  background: rgba(143, 201, 190, 0.07);
  outline: none;
}

.app-summary__title { font-size: 0.9rem; font-weight: 500; }
.app-summary__meta { font-size: 0.74rem; color: rgba(240, 244, 255, 0.5); }

.app-unread {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06110f;
  background: var(--color-accent);
  border-radius: 999px;
}

.app-queue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.app-queue-filters .auth-field { margin-bottom: 0; min-width: 12rem; }