/* ============================================================
   Above the Bell — Homepage styles
   ============================================================ */

:root {
  --atb-deep-space: #022151;
  --atb-midnight: #011040;
  --atb-mission-blue: #0B77E7;
  --atb-accent-blue: #2B6CA8;
  --atb-sky-blue: #37AFF5;
  --atb-atmosphere-blue: #B9DCF8;
  --atb-launch-gold: #FB950B;
  --atb-cloud-white: #EFF2F6;
  --atb-orbit-gray: #5F7293;
  --atb-white: #FFFFFF;

  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — shared across all pages. Decorative micro-text
     (illustration props, telemetry, mini calendars) is exempt. */
  --text-display: clamp(1.95rem, 4vw, 3.1rem);    /* page hero titles */
  --text-h2: clamp(1.7rem, 3vw, 2.4rem);          /* large standalone section titles */
  /* Homepage story-section titles (Guide, Mission Control, Schools, Next Steps).
     Sized for titles that sit beside media or over a dense layout, so they stay
     consistent with each other rather than jumping between --text-h2 and a
     one-off clamp. */
  --text-section-title: clamp(1.35rem, 2.1vw, 1.95rem);
  --text-h3: clamp(1.25rem, 2.2vw, 1.55rem);      /* sub-section titles */
  --text-lede: 1.05rem;                           /* section intro paragraphs */
  --text-body: 0.95rem;                           /* lists, standard copy */
  --text-card-h: 0.95rem;                         /* card headings */
  --text-detail: 0.85rem;                         /* card body, captions, meta */
  --text-eyebrow: 0.78rem;                        /* kickers, uppercase labels */

  /* Accent text colors used on dark illustration panels */
  --atb-telemetry-green: #8FE3A9;
  --atb-label-blue: #8FC8F2;

  /* Subtle telemetry dot grid + its base tint. Shared by the sections that
     form one continuous patterned field (see Built for Schools onward), and
     matches the Learning Outcomes field on the For Schools page. */
  --atb-dot-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.4' cy='1.4' r='1.4' fill='%23022151' fill-opacity='0.055'/%3E%3C/svg%3E");
  --atb-dot-field: #E8EEF4;

  --container: 1180px;
  --nav-h: 82px;
  --stats-h: 120px;
  --hero-panel: clamp(320px, 52vw, 580px);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(2, 33, 81, 0.08);
  --shadow: 0 12px 30px rgba(2, 33, 81, 0.12);
  --shadow-lg: 0 30px 60px rgba(2, 33, 81, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------- Base ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--atb-deep-space);
  background: var(--atb-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* Keep existing img layout rules when wrapped in <picture> for AVIF/WebP. */
picture:has(> img) { display: contents; }
a { color: inherit; text-decoration: none; }

/* Skip link: visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: 16px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--atb-mission-blue);
  color: var(--atb-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(12px);
  outline: 3px solid rgba(251, 149, 11, 0.7);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.1;
  margin: 0;
  color: var(--atb-deep-space);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atb-mission-blue);
  margin: 0 0 14px;
}
.eyebrow--center { text-align: center; }
.eyebrow--gold { color: var(--atb-launch-gold); }
.eyebrow--accent { color: var(--atb-accent-blue); }

/* ----------------------------- Buttons ----------------------------- */
.btn {
  --btn-bg: var(--atb-mission-blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 13px 26px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn:hover { transform: translateY(-2px); }

.btn--gold {
  background: var(--atb-launch-gold);
  color: var(--atb-white);
  box-shadow: 0 10px 24px rgba(251, 149, 11, 0.35);
}
.btn--gold:hover { box-shadow: 0 16px 30px rgba(251, 149, 11, 0.45); }

.btn--blue { background: var(--atb-mission-blue); color: #fff; box-shadow: 0 10px 24px rgba(11,119,231,0.3); }

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: var(--atb-white);
  border-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.18); }

.btn--outline {
  background: transparent;
  color: var(--atb-mission-blue);
  border-color: var(--atb-mission-blue);
}
.btn--outline:hover {
  background: var(--atb-mission-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 119, 231, 0.25);
}

.btn--outline-gold {
  background: transparent;
  color: var(--atb-launch-gold);
  border-color: var(--atb-launch-gold);
}
.btn--outline-gold:hover {
  background: var(--atb-launch-gold);
  color: #fff;
  box-shadow: 0 10px 24px rgba(251, 149, 11, 0.3);
}

/* Learn More — quiet text-link style with animated gold underline */
.btn--learn {
  position: relative;
  background: transparent;
  border: none;
  padding: 6px 2px;
  color: var(--atb-deep-space);
  box-shadow: none;
}
.btn--learn .btn__label {
  position: relative;
}
.btn--learn .btn__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--atb-launch-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.btn--learn:hover {
  transform: translateX(4px);
  color: var(--atb-deep-space);
}
.btn--learn:hover .btn__label::after { transform: scaleX(1); transform-origin: left; }
.btn--learn .btn__arrow { color: var(--atb-launch-gold); }

/* Destination tag — quiet pill hinting where the link goes */
.btn__dest {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atb-orbit-gray);
  background: var(--atb-cloud-white);
  border: 1px solid rgba(95, 114, 147, 0.25);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 4px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.btn--learn:hover .btn__dest {
  color: var(--atb-launch-gold);
  border-color: rgba(251, 149, 11, 0.45);
  background: rgba(251, 149, 11, 0.08);
}

.btn__arrow {
  position: relative;
  z-index: 1;
  font-weight: 800;
  transition: transform 0.2s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================== NAV ============================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--atb-white);
  z-index: 100;
  transition: box-shadow 0.25s var(--ease);
}
.nav.is-scrolled { box-shadow: var(--shadow-sm); }

.nav__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 20px;
}
.nav__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.nav__logo-mark {
  height: 56px;
  width: auto;
  flex: none;
  display: block;
}
.nav__logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
.nav__logo-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.34rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--atb-deep-space);
  white-space: nowrap;
  line-height: 1;
}
.nav__logo-tag {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--atb-sky-blue);
  line-height: 1;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  visibility: hidden;
}
html.fonts-ready .nav__logo-tag {
  visibility: visible;
}

.nav__menu {
  display: flex;
  gap: 28px;
  justify-self: start;
  margin-left: 48px;
}
.nav__menu a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--atb-deep-space);
  position: relative;
  padding: 6px 0;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--atb-mission-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__menu a:hover::after { transform: scaleX(1); }
.nav__menu a[aria-current="page"] {
  color: var(--atb-mission-blue);
}
.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Nav rocket divider — fills the flexible space between the menu and the
   Mission Control button; the dotted contrail stretches, the rocket stays crisp */
.nav__divider {
  display: flex;
  align-items: center;
  justify-self: stretch;
  gap: 4px;
  min-width: 40px;
  margin: 0 14px;
}
.nav__divider-trail {
  flex: 1;
  min-width: 20px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='14'%20viewBox='0%200%2028%2014'%3E%3Cpath%20d='M0%207%20Q7%201%2014%207%20T28%207'%20fill='none'%20stroke='%230B77E7'%20stroke-width='3'%20stroke-linecap='round'%20stroke-dasharray='0.5%209'/%3E%3C/svg%3E");
  background-size: 28px 14px;
  background-repeat: repeat-x;
  background-position: left center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
}
.nav__divider-rocket {
  flex: none;
  height: 26px;
  width: auto;
  display: block;
}

/* Hover: rocket lurches forward, flame flickers, contrail streaks past */
.nav__rocket-flame {
  transform-box: fill-box;
  transform-origin: right center;
}
.nav__divider:hover .nav__divider-trail {
  animation: nav-trail-flow 0.55s linear infinite;
}
.nav__divider:hover .nav__divider-rocket {
  animation: nav-rocket-fly 1.1s ease-in-out infinite;
}
.nav__divider:hover .nav__rocket-flame {
  animation: nav-rocket-flame 0.24s ease-in-out infinite alternate;
}
@keyframes nav-trail-flow {
  to { background-position-x: -28px; }
}
@keyframes nav-rocket-fly {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(-3deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(4px) rotate(3deg); }
}
@keyframes nav-rocket-flame {
  from { transform: scaleX(0.6); opacity: 0.8; }
  to   { transform: scaleX(1.3); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__divider:hover .nav__divider-trail,
  .nav__divider:hover .nav__divider-rocket,
  .nav__divider:hover .nav__rocket-flame { animation: none; }
}

/* Mission Control button (Wrigley) */
.mission-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  justify-self: end;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mission-control-btn:hover {
  transform: translateY(-1px);
  border-color: var(--atb-launch-gold);
  box-shadow: 0 4px 14px rgba(251, 149, 11, 0.28);
}
.mission-control-btn__owl {
  height: 48px;
  width: auto;
  display: block;
  flex: none;
}
.mission-control-btn__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--atb-deep-space);
  white-space: nowrap;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  width: 26px; height: 3px; border-radius: 3px;
  background: var(--atb-deep-space);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

/* ============================== HERO ============================== */
.hero {
  position: relative;
  /* Nav overlays the hero; stats sit flush below — all three visible at scroll top */
  height: calc(100svh - var(--stats-h));
  min-height: 480px;
  max-height: 820px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--atb-deep-space);
}

/* Full-bleed rotating photos */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: 58% 42%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
  transform-origin: 58% 42%;
}
.hero__slide.is-active {
  opacity: 1;
  animation: heroKenBurns 14s ease-out forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* Navy left → gentle fade into photo (no hard panel edge) */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--atb-deep-space) 0%,
      var(--atb-deep-space) 22%,
      rgba(2, 33, 81, 0.94) 28%,
      rgba(2, 33, 81, 0.82) 33%,
      rgba(2, 33, 81, 0.66) 38%,
      rgba(2, 33, 81, 0.48) 43%,
      rgba(2, 33, 81, 0.30) 48%,
      rgba(2, 33, 81, 0.14) 53%,
      rgba(2, 33, 81, 0.04) 58%,
      transparent 64%
    ),
    linear-gradient(180deg, rgba(2, 16, 40, 0.12) 0%, transparent 20%);
}

.hero__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 26%, rgba(0,0,0,0.75) 36%, rgba(0,0,0,0.35) 46%, transparent 54%);
  mask-image: linear-gradient(90deg, #000 0%, #000 26%, rgba(0,0,0,0.75) 36%, rgba(0,0,0,0.35) 46%, transparent 54%);
  background-image:
    radial-gradient(1.5px 1.5px at 4% 10%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 9% 28%, rgba(180,220,255,0.62), transparent),
    radial-gradient(2px 2px at 6% 18%, rgba(255,255,255,0.88), transparent),
    radial-gradient(1.5px 1.5px at 12% 52%, rgba(200,230,255,0.58), transparent),
    radial-gradient(1.5px 1.5px at 3% 68%, rgba(255,255,255,0.68), transparent),
    radial-gradient(2px 2px at 15% 42%, rgba(170,210,255,0.78), transparent),
    radial-gradient(1.5px 1.5px at 18% 8%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.5px 1.5px at 21% 58%, rgba(190,225,255,0.6), transparent),
    radial-gradient(2px 2px at 8% 78%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 24% 22%, rgba(160,205,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 11% 88%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 27% 12%, rgba(200,230,255,0.5), transparent),
    radial-gradient(2.5px 2.5px at 14% 32%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 30% 72%, rgba(175,215,255,0.62), transparent),
    radial-gradient(1.5px 1.5px at 33% 48%, rgba(255,255,255,0.54), transparent),
    radial-gradient(2px 2px at 19% 62%, rgba(190,225,255,0.76), transparent),
    radial-gradient(1.5px 1.5px at 36% 18%, rgba(255,255,255,0.58), transparent),
    radial-gradient(1.5px 1.5px at 22% 92%, rgba(165,210,255,0.56), transparent),
    radial-gradient(1.5px 1.5px at 39% 38%, rgba(255,255,255,0.64), transparent),
    radial-gradient(2.5px 2.5px at 5% 44%, rgba(200,235,255,0.68), transparent),
    radial-gradient(1.5px 1.5px at 42% 58%, rgba(255,255,255,0.52), transparent),
    radial-gradient(2.5px 2.5px at 28% 82%, rgba(255,255,255,0.82), transparent),
    radial-gradient(1.5px 1.5px at 35% 6%, rgba(180,220,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 16% 74%, rgba(255,255,255,0.54), transparent),
    radial-gradient(2px 2px at 38% 28%, rgba(170,215,255,0.66), transparent),
    radial-gradient(1.5px 1.5px at 32% 66%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 41% 84%, rgba(195,228,255,0.58), transparent),
    radial-gradient(1.5px 1.5px at 7% 36%, rgba(255,255,255,0.62), transparent),
    radial-gradient(2px 2px at 25% 52%, rgba(185,222,255,0.78), transparent),
    radial-gradient(1.5px 1.5px at 13% 14%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 37% 44%, rgba(160,205,255,0.58), transparent),
    radial-gradient(2px 2px at 20% 26%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 43% 14%, rgba(190,225,255,0.56), transparent),
    radial-gradient(1.5px 1.5px at 10% 48%, rgba(255,255,255,0.68), transparent),
    radial-gradient(1.5px 1.5px at 31% 34%, rgba(175,215,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 17% 86%, rgba(255,255,255,0.54), transparent),
    radial-gradient(1.5px 1.5px at 40% 72%, rgba(200,232,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 26% 68%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.5px 1.5px at 34% 54%, rgba(170,215,255,0.56), transparent);
  opacity: 0.95;
}
.hero__stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 5% 32%, rgba(190,225,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 11% 64%, rgba(255,255,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 14% 20%, rgba(175,215,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 20% 46%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 23% 82%, rgba(185,222,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 29% 56%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 32% 24%, rgba(165,210,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 38% 76%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 41% 14%, rgba(195,228,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 7% 54%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 16% 38%, rgba(180,220,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 34% 8%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 36% 62%, rgba(170,215,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 27% 90%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 42% 36%, rgba(190,225,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 8% 22%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 19% 70%, rgba(175,215,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 39% 50%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 2% 42%, rgba(185,222,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 44% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 30% 78%, rgba(200,232,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 12% 96%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 35% 92%, rgba(170,215,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 4% 58%, rgba(255,255,255,0.46), transparent);
  pointer-events: none;
}

/* Occasional shooting stars across the left hero starfield. Same streak
   recipe as Mission Routing: bright head, fading tail, long quiet cycles
   with staggered paths so the flashes feel random rather than looped. */
.hero__shoot {
  position: absolute;
  width: 78px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 94%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.hero__shoot--a {
  top: 8%;
  left: 4%;
  transform: rotate(26deg);
  animation: hero-shoot-a 15s linear infinite 2.5s;
}
.hero__shoot--b {
  top: 16%;
  left: 14%;
  width: 64px;
  transform: rotate(34deg);
  animation: hero-shoot-b 19s linear infinite 8s;
}
.hero__shoot--c {
  top: 4%;
  left: 22%;
  width: 56px;
  transform: rotate(20deg);
  animation: hero-shoot-c 22s linear infinite 13s;
}
@keyframes hero-shoot-a {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(26deg); }
  1.1% { opacity: 0.95; }
  5.5% { opacity: 0; transform: translate3d(210px, 104px, 0) rotate(26deg); }
  100% { opacity: 0; transform: translate3d(210px, 104px, 0) rotate(26deg); }
}
@keyframes hero-shoot-b {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(34deg); }
  1.3% { opacity: 0.88; }
  5%   { opacity: 0; transform: translate3d(160px, 108px, 0) rotate(34deg); }
  100% { opacity: 0; transform: translate3d(160px, 108px, 0) rotate(34deg); }
}
@keyframes hero-shoot-c {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(20deg); }
  1%   { opacity: 0.9; }
  4.8% { opacity: 0; transform: translate3d(180px, 66px, 0) rotate(20deg); }
  100% { opacity: 0; transform: translate3d(180px, 66px, 0) rotate(20deg); }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 0 12px;
}
.hero__copy {
  position: relative;
  max-width: var(--hero-panel);
  padding-top: 44px;
}
.hero__eyebrow {
  color: var(--atb-launch-gold);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  margin: 0 0 14px;
}
.hero__lead {
  /* Width comes from the longest headline line; lede matches that measure. */
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}
.hero__title {
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.16;
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.hero__title-line {
  display: block;
  width: max-content;
  max-width: 100%;
}
/* Soft sky shimmer on "edge of space": same idea as How It Works / For Schools,
   kept luminous for the dark hero and without a heavy glow. */
.hero__accent {
  font-style: normal;
  display: inline;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  background-image: linear-gradient(
    105deg,
    #ffffff 0%,
    #f2f8ff 16%,
    #c8e9ff 34%,
    var(--atb-sky-blue) 50%,
    #c8e9ff 66%,
    #fff6e0 84%,
    #ffffff 100%
  );
  background-size: 240% 100%;
  background-position: 10% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  animation: hero-accent-rise 14s var(--ease) infinite alternate;
}
@keyframes hero-accent-rise {
  from { background-position: 10% 50%; }
  to   { background-position: 90% 50%; }
}
.hero__subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.02rem, 1.55vw, 1.18rem);
  font-weight: 500;
  margin: 18px 0 28px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
}
/* Slight weight emphasis only; stays white with the lede. */
.hero__mark {
  font-style: normal;
  font-weight: 700;
  color: inherit;
}
.hero__actions {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 100%;
}
.hero__actions .btn {
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
}

.hero__sparkle {
  position: absolute;
  color: #fff;
  z-index: 2;
  opacity: 0.85;
  animation: twinkle 3.5s ease-in-out infinite;
  pointer-events: none;
}
.hero__sparkle--1 { top: 24%; left: 5%; font-size: 20px; animation-delay: 0s; }
.hero__sparkle--2 { top: 4px; left: 24%; font-size: 26px; animation-delay: 1.2s; z-index: 0; }
.hero__sparkle--3 { top: 56%; left: 9%; font-size: 16px; animation-delay: 2.1s; }
.hero__eyebrow,
.hero__lead,
.hero__actions { position: relative; z-index: 1; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.95; transform: scale(1.15); }
}

.hero__dots {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__dot.is-active { background: #fff; border-color: #fff; transform: scale(1.1); }

/* ============================== STATS ============================== */
.stats {
  background: var(--atb-cloud-white);
  border-bottom: 1px solid rgba(2,33,81,0.06);
  min-height: var(--stats-h);
}
.stats__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: var(--stats-h);
  padding-block: 28px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: center;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 66px; width: 1px;
  background: rgba(2, 33, 81, 0.12);
}
.stat__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.stat__icon img {
  height: 56px;
  width: auto;
  display: block;
}
.stat__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 2px;
}
.stat__text strong {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--atb-deep-space);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stat__text span {
  color: var(--atb-deep-space);
  font-size: var(--text-body);
  font-weight: 500;
}

/* ============================== INTRO ============================== */
.intro { padding: 90px 0 30px; }
.intro__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.intro__title { font-size: var(--text-h2); font-weight: 800; }
.intro__lede { color: var(--atb-orbit-gray); font-size: var(--text-lede); margin-top: 20px; }

/* ============================== JOURNEY ============================== */
/* Section vertical rhythm (desktop), shared with For Schools' 84px band:
   light story sections use 84; Journey hands off to Guide through the Learn
   More CTA (equal air above/below the button); Guide opens more air into
   Mission Control (88 bottom); the dark MC band uses 72; the dotted field
   (schools → paths → cta) splits 72/72 then keeps 112 under the console so
   its 70px shadow fades inside the section before the CTA title. */
.journey { padding: 84px 0 0; }
.journey__heading {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  letter-spacing: 0.12em;
  margin-block: 0 56px;
  color: var(--atb-deep-space);
}

.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
/* Bridge between steps and Mission Guide; extra bottom air before Guide. */
.journey__cta { text-align: center; margin: 40px 0 88px; }
.step {
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.step.is-visible { opacity: 1; transform: translateY(0); }

/* connector arrows */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 62px;
  right: -9px;
  width: 18px; height: 18px;
  border-top: 3px solid var(--atb-atmosphere-blue);
  border-right: 3px solid var(--atb-atmosphere-blue);
  transform: rotate(45deg);
}
.step__badge {
  position: relative;
  width: 132px;
  margin: 0 auto 18px;
  background: none;
  border: none;
  display: block;
  overflow: visible;
}
.step__badge img { width: 100%; height: auto; display: block; object-fit: contain; }
.step__badge--gold img {
  filter: drop-shadow(0 0 10px rgba(251, 149, 11, 0.4));
}
.step__num {
  position: absolute;
  top: -8px; left: -8px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--atb-deep-space);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  font-size: 0.95rem;
}
.step__badge--gold .step__num { background: var(--atb-launch-gold); }
.step__name { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.step__desc { color: var(--atb-orbit-gray); font-size: var(--text-body); padding-inline: 4px; }

/* ============================== MISSION CONTROL ============================== */
/* Soft S-curve seams into and out of deep-space Mission Control.
   Marks are HTML dots (not SVG) so they stay round when the path stretches. */
.mc-bridge {
  position: relative;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
  height: clamp(48px, 5vw, 72px);
  /* Overlap the next section by 1px to hide subpixel hairlines without
     filling the SVG's transparent zone (that would square off the curve). */
  margin-bottom: -2px;
}
.mc-bridge--out {
  /* Pull up over MC's padded bottom so transparent areas still show deep-space. */
  z-index: 3;
  margin-top: calc(-1 * clamp(48px, 5vw, 72px));
}
.mc-bridge__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
/* Only seal the bottom edge of each seam (where sections meet). */
.mc-bridge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  z-index: 0;
  pointer-events: none;
}
.mc-bridge--in::after {
  background: var(--atb-deep-space);
}
.mc-bridge--out::after {
  /* Same continuous field as .schools (fixed dots = one seamless lattice). */
  background-image: var(--atb-dot-grid), linear-gradient(var(--atb-dot-field), var(--atb-dot-field));
  background-size: 26px 26px, auto;
  background-attachment: fixed, scroll;
}
/* Dotted field clipped to the exit S-curve so it matches .schools exactly. */
.mc-bridge__field {
  display: none;
}
.mc-bridge--out .mc-bridge__field {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--atb-dot-grid), linear-gradient(var(--atb-dot-field), var(--atb-dot-field));
  background-size: 26px 26px, auto;
  /* Viewport-locked tiles so bridge + schools share one continuous pattern. */
  background-attachment: fixed, scroll;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 40 C200 40 270 26 480 26 C720 26 800 50 1040 50 C1260 50 1340 36 1440 38 L1440 72 L0 72 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 40 C200 40 270 26 480 26 C720 26 800 50 1040 50 C1260 50 1340 36 1440 38 L1440 72 L0 72 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.mc-bridge__glow {
  fill: none;
  stroke-linecap: round;
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
}
.mc-bridge--in .mc-bridge__glow {
  /* Slightly wider + softer so the top seam fades instead of banding. */
  stroke: rgba(150, 205, 255, 0.28);
  stroke-width: 10;
}
.mc-bridge--out .mc-bridge__glow {
  stroke: rgba(2, 33, 81, 0.1);
}
.mc-bridge__orbit {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.45;
  stroke-dasharray: 2.5 9;
  vector-effect: non-scaling-stroke;
  /* Barely-there signal crawl along the dashed seam (period 11.5). */
  animation: mc-bridge-orbit-crawl 48s linear infinite;
}
.mc-bridge--in .mc-bridge__orbit {
  stroke: rgba(230, 245, 255, 0.82);
}
.mc-bridge--out .mc-bridge__orbit {
  stroke: rgba(2, 33, 81, 0.28);
  /* Exit seam drifts the other way so the two seams do not feel mirrored. */
  animation-duration: 56s;
  animation-direction: reverse;
}
@keyframes mc-bridge-orbit-crawl {
  to { stroke-dashoffset: -69; }
}
.mc-bridge__mark {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: mc-bridge-mark-pulse 5.4s ease-in-out infinite;
}
.mc-bridge--in .mc-bridge__mark--gold { animation-delay: 0s; }
.mc-bridge--in .mc-bridge__mark--ice { animation-delay: 1.7s; }
.mc-bridge--out .mc-bridge__mark--ice { animation-delay: 0.9s; }
.mc-bridge--out .mc-bridge__mark--gold { animation-delay: 2.6s; }
@keyframes mc-bridge-mark-pulse {
  0%, 100% {
    opacity: 0.72;
    filter: brightness(0.92);
  }
  50% {
    opacity: 1;
    filter: brightness(1.18);
  }
}
/* Amber waypoint: warm enough to read, glow kept soft. */
.mc-bridge__mark--gold {
  background: #E8A63A;
  box-shadow:
    0 0 0 1.5px rgba(255, 250, 240, 0.5),
    0 0 9px rgba(232, 166, 58, 0.4);
}
.mc-bridge--out .mc-bridge__mark--gold {
  background: #D99220;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.75),
    0 0 8px rgba(217, 146, 32, 0.35);
}
/* Ice waypoint: pale core + cool ring so it reads on dark without going neon. */
.mc-bridge__mark--ice {
  width: 7px;
  height: 7px;
  background: #F4FBFF;
  box-shadow:
    0 0 0 1.5px rgba(120, 190, 240, 0.65),
    0 0 9px rgba(100, 185, 245, 0.35);
}
.mc-bridge--out .mc-bridge__mark--ice {
  width: 7px;
  height: 7px;
  background: #8BBFE8;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(11, 119, 231, 0.22);
}

.mc {
  position: relative;
  background: var(--atb-deep-space);
  color: #fff;
  /* Bottom padding reserves the exit-bridge overlap zone. */
  padding: 48px 0 clamp(48px, 5vw, 72px);
  overflow: hidden;
}
.mc__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 4% 8%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 11% 22%, rgba(180,220,255,0.62), transparent),
    radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,0.88), transparent),
    radial-gradient(1.5px 1.5px at 15% 48%, rgba(200,230,255,0.58), transparent),
    radial-gradient(1.5px 1.5px at 7% 62%, rgba(255,255,255,0.68), transparent),
    radial-gradient(2px 2px at 18% 38%, rgba(170,210,255,0.78), transparent),
    radial-gradient(1.5px 1.5px at 22% 8%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.5px 1.5px at 26% 55%, rgba(190,225,255,0.6), transparent),
    radial-gradient(2px 2px at 28% 72%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 31% 28%, rgba(160,205,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 34% 84%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 38% 14%, rgba(200,230,255,0.5), transparent),
    radial-gradient(2.5px 2.5px at 42% 18%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 44% 66%, rgba(175,215,255,0.62), transparent),
    radial-gradient(1.5px 1.5px at 48% 42%, rgba(255,255,255,0.54), transparent),
    radial-gradient(2px 2px at 55% 58%, rgba(190,225,255,0.76), transparent),
    radial-gradient(1.5px 1.5px at 52% 92%, rgba(255,255,255,0.58), transparent),
    radial-gradient(1.5px 1.5px at 58% 24%, rgba(165,210,255,0.56), transparent),
    radial-gradient(1.5px 1.5px at 61% 76%, rgba(255,255,255,0.64), transparent),
    radial-gradient(2.5px 2.5px at 62% 8%, rgba(200,235,255,0.68), transparent),
    radial-gradient(1.5px 1.5px at 64% 52%, rgba(255,255,255,0.52), transparent),
    radial-gradient(2.5px 2.5px at 68% 28%, rgba(255,255,255,0.82), transparent),
    radial-gradient(1.5px 1.5px at 71% 88%, rgba(180,220,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 74% 16%, rgba(255,255,255,0.54), transparent),
    radial-gradient(1.5px 1.5px at 76% 64%, rgba(170,215,255,0.66), transparent),
    radial-gradient(2px 2px at 78% 82%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 81% 36%, rgba(195,228,255,0.58), transparent),
    radial-gradient(1.5px 1.5px at 84% 72%, rgba(255,255,255,0.62), transparent),
    radial-gradient(2.5px 2.5px at 88% 44%, rgba(185,222,255,0.78), transparent),
    radial-gradient(1.5px 1.5px at 86% 12%, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px 2px at 92% 14%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 90% 58%, rgba(160,205,255,0.58), transparent),
    radial-gradient(2px 2px at 35% 88%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.5px 1.5px at 93% 78%, rgba(190,225,255,0.56), transparent),
    radial-gradient(2px 2px at 95% 68%, rgba(255,255,255,0.68), transparent),
    radial-gradient(1.5px 1.5px at 97% 32%, rgba(175,215,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 12% 78%, rgba(255,255,255,0.54), transparent),
    radial-gradient(1.5px 1.5px at 19% 92%, rgba(200,232,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 41% 32%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.5px 1.5px at 67% 46%, rgba(170,215,255,0.56), transparent);
  opacity: 0.95;
}
.mc__stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 6% 34%, rgba(190,225,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 13% 68%, rgba(255,255,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 17% 16%, rgba(175,215,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 24% 44%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 29% 86%, rgba(185,222,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 33% 58%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 37% 24%, rgba(165,210,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 46% 78%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 49% 10%, rgba(195,228,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 53% 38%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 57% 68%, rgba(180,220,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 63% 18%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 69% 56%, rgba(170,215,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 72% 92%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 77% 28%, rgba(190,225,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 82% 48%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 87% 86%, rgba(175,215,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 91% 22%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 96% 52%, rgba(185,222,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 3% 52%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 9% 88%, rgba(200,232,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 52%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.5px 1.5px at 59% 84%, rgba(170,215,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 79% 6%, rgba(255,255,255,0.46), transparent);
  pointer-events: none;
}
/* Occasional shooting stars across Mission Control. Same streak recipe as
   the hero / routing console: brief flash, long quiet cycle, staggered
   paths so the motion stays ambient rather than busy. */
.mc__shoot {
  position: absolute;
  width: 72px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 94%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.mc__shoot--a {
  top: 12%;
  left: 8%;
  transform: rotate(24deg);
  animation: mc-shoot-a 18s linear infinite 4s;
}
.mc__shoot--b {
  top: 38%;
  left: 48%;
  width: 58px;
  transform: rotate(30deg);
  animation: mc-shoot-b 22s linear infinite 11s;
}
.mc__shoot--c {
  top: 22%;
  left: 68%;
  width: 52px;
  transform: rotate(18deg);
  animation: mc-shoot-c 26s linear infinite 1.5s;
}
@keyframes mc-shoot-a {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg); }
  0.9% { opacity: 0.72; }
  4.8% { opacity: 0; transform: translate3d(200px, 88px, 0) rotate(24deg); }
  100% { opacity: 0; transform: translate3d(200px, 88px, 0) rotate(24deg); }
}
@keyframes mc-shoot-b {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(30deg); }
  1%   { opacity: 0.65; }
  4.2% { opacity: 0; transform: translate3d(160px, 96px, 0) rotate(30deg); }
  100% { opacity: 0; transform: translate3d(160px, 96px, 0) rotate(30deg); }
}
@keyframes mc-shoot-c {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg); }
  0.8% { opacity: 0.6; }
  4%   { opacity: 0; transform: translate3d(150px, 52px, 0) rotate(18deg); }
  100% { opacity: 0; transform: translate3d(150px, 52px, 0) rotate(18deg); }
}
/* Tiny satellite drift: one slow pass every ~32s across the upper field.
   Kept small and low-contrast so it reads as atmosphere, not decoration. */
.mc__sat {
  position: absolute;
  top: 8%;
  left: -5%;
  color: rgba(220, 235, 250, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(160, 210, 255, 0.28));
  animation: mc-sat-drift 32s linear infinite 7s;
}
.mc__sat-icon {
  display: block;
  width: clamp(26px, 3vw, 36px);
  height: auto;
}
@keyframes mc-sat-drift {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg); }
  4%   { opacity: 0.62; }
  42%  { opacity: 0.5; }
  52%  { opacity: 0; transform: translate3d(72vw, 18vh, 0) rotate(12deg); }
  100% { opacity: 0; transform: translate3d(72vw, 18vh, 0) rotate(12deg); }
}
.mc__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.mc__sparkle {
  position: absolute;
  line-height: 1;
  animation: twinkle 3.5s ease-in-out infinite;
}
.mc__sparkle--gold {
  color: var(--atb-launch-gold);
  text-shadow: 0 0 18px rgba(251, 149, 11, 0.55), 0 0 36px rgba(251, 149, 11, 0.25);
}
.mc__sparkle--white {
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.65), 0 0 28px rgba(255, 255, 255, 0.3);
}
.mc__sparkle--1 { top: 10%; left: 6%; font-size: clamp(22px, 3vw, 34px); animation-delay: 0s; }
.mc__sparkle--2 { top: 6%; right: 14%; font-size: clamp(16px, 2vw, 24px); animation-delay: 1.4s; }
.mc__sparkle--3 { bottom: 14%; right: 8%; font-size: clamp(20px, 2.6vw, 30px); animation-delay: 0.7s; }
.mc__sparkle--4 { bottom: 22%; left: 38%; font-size: clamp(14px, 1.6vw, 20px); animation-delay: 2.2s; opacity: 0.75; }

.mc__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(300px, 1.25fr);
  gap: clamp(48px, 7vw, 80px);
  align-items: center;
  padding-bottom: 40px;
}
.mc__text {
  max-width: 38ch;
  align-self: center;
}
.mc__title {
  color: #fff;
  font-size: var(--text-section-title);
  font-weight: 800;
  line-height: 1.15;
}
/* Soft sky shimmer on "every stage": same recipe as the hero
   "edge of space" accent, tuned for the deep-space band. */
.mc__accent {
  font-style: normal;
  display: inline;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  background-image: linear-gradient(
    105deg,
    #ffffff 0%,
    #f2f8ff 16%,
    #c8e9ff 34%,
    var(--atb-sky-blue) 50%,
    #c8e9ff 66%,
    #fff6e0 84%,
    #ffffff 100%
  );
  background-size: 240% 100%;
  background-position: 10% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  animation: mc-accent-rise 14s var(--ease) infinite alternate;
}
@keyframes mc-accent-rise {
  from { background-position: 10% 50%; }
  to   { background-position: 90% 50%; }
}
.mc__lede { color: rgba(255,255,255,0.82); font-size: var(--text-body); margin: 12px 0 18px; line-height: 1.55; }
.mc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  font-size: var(--text-body);
}
.mc__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  line-height: 1.35;
}
.mc__list img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.mc__list span { min-width: 0; }
.mc__list strong {
  font-weight: 700;
  color: #fff;
}

.mc__media {
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  /* No min-height: keep the device box as tall as the art so grid centering
     lines up with the text column instead of floating in a taller cell. */
  margin: 0;
  padding-right: clamp(4px, 1vw, 12px);
}
.mc__zoom {
  position: relative;
  width: 100%;
  max-width: 720px;
  line-height: 0;
}
.mc__zoom-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}
.mc__lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: clamp(200px, 24vw, 280px);
  height: clamp(200px, 24vw, 280px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background-color: var(--atb-deep-space);
  background-repeat: no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(55, 175, 245, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: opacity 0.18s var(--ease);
}
.mc__zoom.is-zooming .mc__lens {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .mc__zoom { cursor: crosshair; }
  .mc__zoom.is-zooming { cursor: none; }
}

/* ============================== BUILT FOR SCHOOLS ============================== */
/* Opens the patterned field that runs through Next Steps and dissolves into
   the closing sky. A soft glow off the top keeps the dots from competing
   with the section head right below the dark Mission Control band. */
.schools {
  padding: 56px 0 72px;
  background-image:
    radial-gradient(1000px 320px at 50% 28%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%),
    var(--atb-dot-grid),
    linear-gradient(var(--atb-dot-field), var(--atb-dot-field));
  background-size: auto, 26px 26px, auto;
  /* Keep the dot lattice continuous with the MC exit bridge field. */
  background-attachment: scroll, fixed, scroll;
}
.schools__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 36px;
  align-items: start;
}
/* Eyebrow and title share one row so their tops line up across the columns. */
.schools__eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--atb-deep-space);
  align-self: start;
}
.schools__title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-section-title);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  align-self: start;
}
.schools__media {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin: 0;
}
.schools__media img {
  width: min(100%, 680px);
  max-width: none;
  height: auto;
  display: block;
  /* The tight zero-offset pass feathers the cutout's hard alpha edge into the
     section background; the wide pass grounds the boxes. */
  filter:
    drop-shadow(0 0 2px rgba(2, 33, 81, 0.22))
    drop-shadow(0 2px 6px rgba(2, 33, 81, 0.10))
    drop-shadow(0 20px 40px rgba(2, 33, 81, 0.14));
}
.schools__text {
  grid-column: 2;
  grid-row: 2;
}
.schools__lede { color: var(--atb-orbit-gray); margin: 16px 0 32px; }

.schools__cta { margin-top: 32px; text-align: right; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 18px 16px;
  border-radius: 6px;
  border: 1px solid rgba(2, 33, 81, 0.05);
  box-shadow: 0 4px 16px rgba(2, 33, 81, 0.07);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.feature:hover,
a.feature:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(11, 119, 231, 0.35);
  box-shadow: 0 10px 26px rgba(2, 33, 81, 0.13);
}
.feature__icon {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
}
.feature__icon img {
  width: auto;
  height: 64px;
  max-width: 64px;
  object-fit: contain;
  display: block;
}
.feature > div {
  flex: 1;
  min-width: 0;
}
.feature h3 {
  font-size: var(--text-card-h);
  font-weight: 700;
  color: var(--atb-deep-space);
  margin: 2px 0 5px;
}
.feature p { margin: 0; color: var(--atb-orbit-gray); font-size: var(--text-detail); line-height: 1.42; }

/* ============================== MISSION GUIDE ============================== */
/* Sits between the Mission Plan steps and Mission Control. The gradient
   starts on the journey's white and deepens toward the blue of the sky,
   easing the page into the dark Mission Control band below. */
.guide {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F9FF 45%, #E3F1FC 100%);
  /* Top air comes from .journey__cta margin-bottom.
     Bottom padding is the mc-bridge height (curve sits in-flow). */
  padding: 0;
  overflow: hidden;
}
.guide .eyebrow { color: var(--atb-deep-space); }
.guide__inner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.6fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-bottom: 36px;
}
.guide__media {
  text-align: center;
  align-self: center;
}
.guide__flight { position: relative; display: inline-block; }
.guide__owl {
  position: relative;
  z-index: 1;
  width: min(100%, 330px);
  filter: drop-shadow(0 18px 30px rgba(2, 33, 81, 0.22));
  animation: guide-owl-float 5s ease-in-out infinite;
}
@keyframes guide-owl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
/* Wind streaks trailing behind Wrigley (he flies left to right, so the air
   streams left). Each streak starts invisible, sweeps left and fades: with
   animations disabled (reduced motion) they simply never appear. */
.guide__wind { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.guide__wind i {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(120, 190, 250, 0) 0%,
    rgba(11, 119, 231, 0.22) 55%,
    rgba(120, 190, 250, 0.5) 100%);
  opacity: 0;
  animation: guide-wind 3s linear infinite;
}
.guide__wind i:nth-child(1) { top: 20%; left: -8%; width: 30%; animation-delay: 0s; }
.guide__wind i:nth-child(2) { top: 38%; left: -16%; width: 38%; animation-duration: 3.4s; animation-delay: 1.2s; }
.guide__wind i:nth-child(3) { top: 56%; left: -4%; width: 24%; height: 2px; animation-duration: 2.6s; animation-delay: 0.6s; }
.guide__wind i:nth-child(4) { top: 74%; left: -12%; width: 32%; animation-duration: 3.2s; animation-delay: 1.8s; }
.guide__wind i:nth-child(5) { top: 8%; left: 48%; width: 20%; height: 2px; animation-duration: 2.8s; animation-delay: 2.3s; }
@keyframes guide-wind {
  0%   { transform: translateX(46px) scaleX(0.55); opacity: 0; }
  18%  { opacity: 0.9; }
  70%  { opacity: 0.35; }
  100% { transform: translateX(-72px) scaleX(1); opacity: 0; }
}
.guide__text {
  /* Lets the title size itself to this column via cqi (JS refines further). */
  container-type: inline-size;
  container-name: guide-text;
}
.guide__title {
  /* Fallback before JS: scale so the one-line headline fills the text column.
     19.87 ≈ measured advance width of this string in Poppins 800 (em units). */
  font-size: clamp(1.05rem, calc(100cqi / 19.87), 2.85rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--atb-deep-space);
  margin: 6px 0 14px;
  width: 100%;
  max-width: 100%;
}
.guide__title-text {
  display: inline-block;
  white-space: nowrap;
}
.guide__lede {
  font-size: var(--text-lede);
  color: var(--atb-orbit-gray);
  line-height: 1.65;
}
.guide__facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 28px;
  padding: 0;
  width: 100%;
}
.guide__facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(11, 119, 231, 0.14);
  border-radius: 14px;
  padding: 18px 20px;
  min-height: 84px;
  box-shadow: 0 10px 22px rgba(2, 33, 81, 0.06);
}
.guide__facts img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.guide__facts span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--atb-orbit-gray);
  line-height: 1.35;
}
.guide__facts strong {
  font-family: var(--font-head);
  font-size: 0.98rem;
  color: var(--atb-deep-space);
}
@media (max-width: 820px) {
  .guide { padding: 0; }
  .guide__inner { grid-template-columns: 1fr; padding-bottom: 28px; }
  .guide__media { order: -1; }
  .guide__owl { width: min(60%, 260px); }
}
@media (max-width: 560px) {
  .guide__facts { grid-template-columns: 1fr; }
}

/* ============================== NEXT STEPS (routing console) ============================== */
/* The two destinations live inside a dark Mission Control console that
   floats on the page, so the section reads as hardware without breaking
   the light background flowing from Built for Schools into the CTA. */
/* Continues the Built for Schools field unbroken, so the two sections read as
   one surface. Bottom padding clears the console's 100px shadow reach: any
   less and the CTA's background clips the shadow into a visible hairline. */
.paths {
  background-image: var(--atb-dot-grid), linear-gradient(var(--atb-dot-field), var(--atb-dot-field));
  background-size: 26px 26px, auto;
  background-attachment: fixed, scroll;
  padding: 72px 0 112px;
}
.paths .eyebrow { color: var(--atb-deep-space); }
/* Extra room on wide screens so Wrigley clears the heading above the console. */
.paths__head { text-align: center; margin-bottom: 38px; }
@media (min-width: 861px) {
  .paths__head { margin-bottom: 62px; }
}
.paths__title {
  font-size: var(--text-section-title);
  font-weight: 800;
  line-height: 1.15;
  color: var(--atb-deep-space);
  margin-top: 6px;
}

/* Wrigley presents the console from behind it. The same cutout is drawn twice:
   --back sits under the panel (which hides him from the chest down) and --front
   is clipped to the arm he drapes over the top edge. The insets below are tied
   to the artwork: the arm's flat underside outline sits at y 543-546/933, so
   the cut line runs at y 543 to tuck the console edge just under that dark
   outline (no background gap), and x 130/925 limits the front copy to the
   hanging finger cluster only. Keep these in sync with the image. The front
   copy must NOT have a drop-shadow: the clipped strip's shadow paints a band
   over the console that ends in a visible vertical seam. */
.paths__stage {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.paths__host {
  position: absolute;
  right: -30px;
  width: 272px;
  top: -160px; /* -0.582 x rendered height, so the cut line meets the console edge */
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(2, 24, 62, 0.28));
}
.paths__host--back { z-index: 0; }
.paths__host--front {
  z-index: 2;
  clip-path: inset(58.2% 85.9% 0 0);
  filter: none;
}
@media (max-width: 1080px) {
  .paths__host { width: 236px; top: -139px; right: -14px; }
}

.console {
  position: relative;
  z-index: 1; /* own stacking context, so route art stays under the draped wing */
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(155deg, #041B45 0%, var(--atb-deep-space) 46%, #01102E 100%);
  border: 1px solid rgba(120, 190, 250, 0.22);
  box-shadow: 0 30px 70px rgba(2, 24, 62, 0.32);
}
.console__glow {
  position: absolute;
  inset: -30% 18% 52% 18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(55, 175, 245, 0.22), rgba(55, 175, 245, 0) 70%);
  pointer-events: none;
}
.console__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 18% 68%, rgba(185,220,248,0.6), transparent),
    radial-gradient(2px 2px at 30% 34%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 44% 78%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.6px 1.6px at 58% 18%, rgba(185,220,248,0.6), transparent),
    radial-gradient(2px 2px at 72% 56%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.4px 1.4px at 86% 28%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.6px 1.6px at 94% 72%, rgba(185,220,248,0.55), transparent);
}
/* Occasional shooting stars across the console starfield. Same streak recipe
   as the How It Works journey band: bright head, fading tail, long quiet
   cycle so only a brief flash shows each pass. Three staggered paths keep
   the starts and stops from looking looped. */
.console__shoot {
  position: absolute;
  width: 88px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 94%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  opacity: 0;
  pointer-events: none;
}
.console__shoot--a {
  top: 18%;
  left: 8%;
  transform: rotate(28deg);
  animation: console-shoot-a 14s linear infinite 3s;
}
.console__shoot--b {
  top: 52%;
  left: 42%;
  width: 72px;
  transform: rotate(22deg);
  animation: console-shoot-b 17s linear infinite 9s;
}
.console__shoot--c {
  top: 28%;
  left: 62%;
  width: 64px;
  transform: rotate(32deg);
  animation: console-shoot-c 19s linear infinite 1s;
}
@keyframes console-shoot-a {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(28deg); }
  1.2% { opacity: 0.95; }
  6%   { opacity: 0; transform: translate3d(280px, 148px, 0) rotate(28deg); }
  100% { opacity: 0; transform: translate3d(280px, 148px, 0) rotate(28deg); }
}
@keyframes console-shoot-b {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(22deg); }
  1%   { opacity: 0.9; }
  5%   { opacity: 0; transform: translate3d(220px, 90px, 0) rotate(22deg); }
  100% { opacity: 0; transform: translate3d(220px, 90px, 0) rotate(22deg); }
}
@keyframes console-shoot-c {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(32deg); }
  1.4% { opacity: 0.85; }
  5.5% { opacity: 0; transform: translate3d(190px, 118px, 0) rotate(32deg); }
  100% { opacity: 0; transform: translate3d(190px, 118px, 0) rotate(32deg); }
}

/* status bar across the top of the console */
.console__bar {
  position: relative;
  display: flex;
  /* Both labels stay left: Wrigley leans over the right end of the bar. */
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(120, 190, 250, 0.18);
  background: rgba(1, 16, 46, 0.55);
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.console__bar-left { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.console__bar-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(143, 200, 242, 0.8);
}
.console__bar-right::before {
  content: "";
  width: 1px;
  height: 11px;
  background: rgba(120, 190, 250, 0.34);
}
.console__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--atb-telemetry-green);
  box-shadow: 0 0 0 3px rgba(143, 227, 169, 0.22);
  animation: console-blink 2.4s ease-in-out infinite;
}
@keyframes console-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.console__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(120, 190, 250, 0.16);
}
.route {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 28px 26px 26px;
  text-decoration: none;
  overflow: hidden;
  background: rgba(2, 33, 81, 0.3);
  transition: background 0.24s var(--ease);
}
.route:hover { background: rgba(11, 119, 231, 0.16); }
.route--fs:hover { background: rgba(251, 149, 11, 0.12); }
.route__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.route__num {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(143, 200, 242, 0.85);
}
.route--fs .route__num { color: rgba(251, 193, 90, 0.9); }
.route__eyebrow {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atb-sky-blue);
  margin: 0;
}
.route--fs .route__eyebrow { color: var(--atb-launch-gold); }
.route__title { font-size: var(--text-h3); font-weight: 700; color: #fff; }
.route__desc { font-size: var(--text-body); color: rgba(223, 235, 247, 0.82); line-height: 1.55; margin: 0; }
.route__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 5px 0 0; }
.route__chips li {
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(223, 235, 247, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(143, 200, 242, 0.22);
  border-radius: 999px;
  padding: 5px 10px;
}
.route__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.route--fs .route__go { color: var(--atb-launch-gold); }
.route__go i { font-style: normal; transition: transform 0.2s var(--ease); }
.route:hover .route__go i { transform: translateX(6px); }

/* ---- layered art wells: a tilted glass plate with elements stacked
        in front of it, so each route reads as a small 3D scene ---- */
.route__art {
  position: relative;
  flex: none;
  width: clamp(132px, 15vw, 176px);
  perspective: 900px;
  pointer-events: none;
}
.route__plate {
  position: absolute;
  inset: 14% 2% 16% 4%;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(143, 200, 242, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: rotateY(-17deg) rotateX(7deg);
  transition: transform 0.4s var(--ease);
}
.route__plate--gold { border-color: rgba(251, 193, 90, 0.32); transform: rotateY(15deg) rotateX(7deg); }
.route:hover .route__plate { transform: rotateY(-11deg) rotateX(4deg); }
.route--fs:hover .route__plate--gold { transform: rotateY(10deg) rotateX(4deg); }

/* route 01: fanned deck of mission-phase badges over a dashed arc */
.route__arc {
  position: absolute;
  inset: 24% 2% 26% 4%;
  width: auto;
  height: auto;
  transform: rotateY(-17deg) rotateX(7deg);
}
.route__deck { position: absolute; inset: 0; }
.route__badge {
  position: absolute;
  width: 45%;
  filter: drop-shadow(0 10px 16px rgba(0, 6, 24, 0.6));
  transition: transform 0.4s var(--ease);
}
.route__badge--a { left: -2%; bottom: 15%; transform: rotate(-12deg) scale(0.92); z-index: 1; }
.route__badge--b { left: 27%; top: 4%; z-index: 3; }
.route__badge--c { right: -2%; bottom: 13%; transform: rotate(12deg) scale(0.92); z-index: 2; }
.route:hover .route__badge--a { transform: rotate(-16deg) scale(0.96) translate(-10%, -8%); }
.route:hover .route__badge--b { transform: translateY(-8%) scale(1.05); }
.route:hover .route__badge--c { transform: rotate(16deg) scale(0.96) translate(10%, -8%); }

/* route 02: stacked briefing sheets */
.route__sheet {
  position: absolute;
  border-radius: 9px;
  background: linear-gradient(160deg, #FFFFFF 0%, #E8F1FA 100%);
  box-shadow: 0 14px 24px rgba(0, 6, 24, 0.5);
  transition: transform 0.4s var(--ease);
}
.route__sheet--back {
  left: 3%;
  bottom: 27%;
  width: 68%;
  height: 48%;
  z-index: 2;
  transform: rotate(-8deg);
  opacity: 0.75;
}
.route__sheet--front {
  left: 15%;
  bottom: 13%;
  width: 74%;
  height: 52%;
  z-index: 3;
  padding: 9% 9% 0;
  transform: rotate(4deg);
}
.route--fs:hover .route__sheet--back { transform: rotate(-11deg) translate(-6%, -4%); }
.route--fs:hover .route__sheet--front { transform: rotate(2deg) translateY(-5%); }
.route__mark { position: absolute; top: 9%; right: 8%; width: 13%; opacity: 0.85; }
.route__sheet-head {
  display: block;
  font-family: var(--font-head);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--atb-deep-space);
}
.route__line {
  display: block;
  height: 3px;
  border-radius: 2px;
  margin-top: 9%;
  background: rgba(2, 33, 81, 0.18);
}
.route__line--1 { width: 84%; }
.route__line--2 { width: 68%; }
.route__line--3 { width: 76%; }
.route__stamp {
  position: absolute;
  left: -2%;
  bottom: 2%;
  z-index: 4;
  font-family: var(--font-head);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atb-deep-space);
  background: var(--atb-launch-gold);
  border-radius: 999px;
  padding: 4px 9px;
  transform: rotate(-7deg);
  box-shadow: 0 8px 16px rgba(0, 6, 24, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .console__dot { animation: none; }
  .console__shoot { animation: none; opacity: 0; }
}
@media (max-width: 860px) {
  .route__art { display: none; }
  .paths__host { display: none; }
}
@media (max-width: 720px) {
  .paths { padding: 64px 0 72px; }
  .console__grid { grid-template-columns: 1fr; }
}

/* ============================== FINAL CTA ============================== */
.cta {
  position: relative;
  background:
    image-set(
      url("../assets/images/g/web/cta-background-a-1280.webp") type("image/webp"),
      url("../assets/images/g/cta-background-a.png") type("image/png")
    ) center center / cover no-repeat,
    linear-gradient(160deg, var(--atb-deep-space), var(--atb-midnight));
  color: #fff;
  text-align: center;
  padding: 56px 0;
  overflow: hidden;
}
.cta__inner { position: relative; z-index: 2; }
.cta__title { color: #fff; font-size: var(--text-display); font-weight: 800; }
.cta__sub { color: rgba(255,255,255,0.85); margin: 12px 0 24px; font-size: var(--text-lede); }

/* --- landing variant: the homepage's closing descent back to earth ---
   Picks up the exact tint Next Steps ends on and carries its dot pattern a
   little way in (see ::before) before both dissolve into daylight sky above
   the touchdown strip, whose grass runs into the footer. Text flips dark. */
.cta--landing {
  background: linear-gradient(180deg,
    var(--atb-dot-field) 0%,
    #EDF4FA 15%,
    #D4EAFB 50%,
    #A9D5F7 78%,
    #7FC2F3 100%);
  color: var(--atb-deep-space);
  padding: 72px 0 0;
  /* absorbs sub-pixel rounding at the section boundary on fractional DPRs */
  margin-top: -1px;
}
.cta--landing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  background-image: var(--atb-dot-grid);
  background-size: 26px 26px;
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.cta--landing .cta__title { color: var(--atb-deep-space); }
.cta--landing .cta__sub { color: var(--atb-orbit-gray); }
.cta--landing .cta__pdf { color: var(--atb-deep-space); }
.cta--landing .cta__pdf:hover { color: var(--atb-launch-gold); }
.cta__pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  gap: 8px;
  margin: 24px auto 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s var(--ease);
}
.cta__pdf:hover { color: #fff; }
.cta__pdf svg { width: 18px; height: 18px; flex: none; }

.cta__landing {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  margin-top: 46px;
}
.cta__landing-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* descending payload rig: hover starts a slow drift toward the pin,
   same interaction as the How It Works / For Schools landing strips */
.cta__landing-rig {
  position: absolute;
  z-index: 2;
  right: clamp(10%, 13vw, 17%);
  top: clamp(4px, 1.4vw, 16px);
  width: clamp(84px, 9vw, 128px);
  pointer-events: none;
}
.cta__landing-hot {
  position: absolute;
  inset: -8% -12%;
  pointer-events: auto;
}
.cta__landing-drift {
  display: block;
  transition: transform 1.6s var(--ease);
}
.cta__landing-chute {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(2, 33, 81, 0.18));
  transform-origin: 50% 8%;
}
@media (hover: hover) {
  .cta__landing-hot:hover ~ .cta__landing-drift {
    transform: translate(-20%, 46%) scale(0.8);
    transition: transform 7s cubic-bezier(0.3, 0.1, 0.6, 0.9);
  }
  .cta__landing-hot:hover ~ .cta__landing-drift .cta__landing-chute {
    animation: cta-chute-wobble 2.8s ease-in-out infinite;
  }
}
@keyframes cta-chute-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3.4deg); }
  75%      { transform: rotate(3.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cta__landing-hot:hover ~ .cta__landing-drift { transform: none; }
  .cta__landing-hot:hover ~ .cta__landing-drift .cta__landing-chute { animation: none; }
}
.cta__landing-marker {
  position: absolute;
  z-index: 2;
  right: clamp(17%, 19vw, 23%);
  bottom: clamp(8px, 1.6vw, 22px);
  pointer-events: none;
}
.cta__landing-pin {
  display: block;
  width: clamp(24px, 2.6vw, 34px);
  height: clamp(24px, 2.6vw, 34px);
  filter: drop-shadow(0 4px 8px rgba(2, 33, 81, 0.3));
}
.cta__landing-label {
  position: absolute;
  bottom: calc(100% - 4px);
  right: calc(100% - 8px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--atb-deep-space);
  white-space: nowrap;
}
.cta__landing-field {
  position: relative;
  display: block;
  left: -3%;
  width: 106%;
  max-width: none;
  min-width: 900px;
  height: calc(clamp(170px, 19vw, 280px) + clamp(28px, 3.5vw, 48px));
  margin-top: calc(-1 * clamp(28px, 3.5vw, 48px));
  object-fit: cover;
  /* same crop window as the For Schools strip: keeps every treetop
     intact, shows sky above the tree line, and keeps foreground grass
     in frame at the bottom */
  object-position: center 26%;
  pointer-events: none;
  user-select: none;
}

/* ============================== FOOTER ============================== */
.footer {
  background: var(--atb-midnight);
  color: rgba(255, 255, 255, 0.88);
  padding: 56px 0 0;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 0.9fr 1.15fr;
  gap: 28px 32px;
  padding-bottom: 44px;
  align-items: start;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.footer__mark {
  width: 72px;
  height: auto;
  flex: none;
  display: block;
}
.footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.footer__name {
  font-family: var(--font-head);
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.footer__tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atb-sky-blue);
  margin: 0;
  line-height: 1.2;
}
.footer__col h4 {
  color: var(--atb-sky-blue);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.footer__col a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--atb-sky-blue); }
.footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__contact li + li { margin-top: 10px; }
.footer__contact a,
.footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}
.footer__contact a:hover { color: var(--atb-sky-blue); }
.footer__icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: #fff;
}
.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 20px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}
.footer__bar p { margin: 0; }
.footer__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 40rem;
}
.footer__entity {
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer__legal a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s var(--ease);
}
.footer__legal a:hover { color: var(--atb-sky-blue); }
.footer__legal span { color: rgba(255, 255, 255, 0.35); }
.footer__disclaimer {
  margin: -8px auto 0;
  padding-bottom: 18px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================== REVEAL ============================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], .step { opacity: 1 !important; transform: none !important; }
  .hero__slide.is-active { transform: none !important; }
  .hero__accent,
  .mc__accent {
    background-position: 30% 50%;
  }
  .mc__shoot,
  .mc__sat { opacity: 0; }
  .mc__zoom.is-zooming .mc__lens { opacity: 0; }
  html { scroll-behavior: auto; }
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1100px) {
  /* Drop the rocket trail before the hamburger kicks in so the primary
     links keep clearance from the logo on mid-width screens. */
  .nav__divider { display: none; }
  .nav__menu {
    gap: 20px;
    margin-left: 28px;
  }
  .nav__menu a { font-size: 0.92rem; }
  .mission-control-btn__label { display: none; }
  .mission-control-btn { padding-inline: 8px; }
  .footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .mc__inner, .schools__inner { grid-template-columns: 1fr; }
  .mc__text { max-width: none; }
  .mc__media {
    justify-content: center;
    margin: 0;
    min-height: 0;
  }
  .mc__zoom {
    width: min(100%, 640px);
    max-width: 100%;
  }
  .mc__sparkle--1 { top: 6%; left: 4%; }
  .mc__sparkle--2 { top: 4%; right: 6%; }
  .mc__sparkle--3 { bottom: 8%; right: 5%; }
  .mc__sparkle--4 { bottom: 18%; left: 12%; }
  .schools__inner {
    grid-template-rows: none;
    row-gap: 14px;
  }
  .schools__eyebrow,
  .schools__title,
  .schools__media,
  .schools__text {
    grid-column: 1;
    grid-row: auto;
  }
  /* eyebrow → title → features → kit */
  .schools__eyebrow { order: 1; }
  .schools__title { order: 2; }
  .schools__text { order: 3; }
  .schools__media {
    order: 4;
    min-height: 0;
    margin: 0;
  }
  .schools__media img {
    width: min(100%, 600px);
    max-width: 100%;
  }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .step:not(:last-child)::after { display: none; }
  .step:last-child { grid-column: span 2; }
}

@media (max-width: 760px) {
  :root { --stats-h: 240px; }

  .journey { padding: 64px 0 0; }
  .journey__cta { margin: 32px 0 64px; }
  .mc { padding: 56px 0 clamp(48px, 5vw, 72px); }
  .mc__inner { padding-bottom: 32px; }
  .schools { padding: 48px 0 64px; }
  .cta--landing { padding: 64px 0 0; }

  .nav__inner {
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }
  .nav__menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 10px 24px 20px;
    /* Clear the fixed header completely when closed. A plain -120%
       leaves the menu overlapping the logo/toggle on short menus. */
    transform: translateY(calc(-100% - var(--nav-h)));
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ease), visibility 0.3s var(--ease);
    justify-self: stretch;
    margin-left: 0;
    z-index: 99;
  }
  .nav__menu.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav__menu a { padding: 14px 0; border-bottom: 1px solid rgba(2,33,81,0.08); }
  .nav__divider { display: none; }
  .nav__toggle { display: flex; }
  .mission-control-btn__owl { height: 42px; }
  .mission-control-btn__label { display: none; }
  .nav__logo-mark { height: 48px; }
  .nav__logo-name { font-size: 1.12rem; letter-spacing: 0.03em; }
  .nav__logo-tag { font-size: 0.64rem; letter-spacing: 0.04em; }

  .hero {
    height: calc(100svh - var(--stats-h));
    min-height: 360px;
    max-height: none;
    align-items: flex-end;
    padding-bottom: 48px;
  }
  .hero__slides { left: 0; }
  .hero__scrim {
    background:
      linear-gradient(
        180deg,
        var(--atb-deep-space) 0%,
        var(--atb-deep-space) 34%,
        rgba(2, 33, 81, 0.82) 48%,
        rgba(2, 33, 81, 0.38) 72%,
        rgba(2, 33, 81, 0.08) 92%
      );
  }
  .hero__slide { background-position: center 30%; transform-origin: center 30%; }
  .hero__copy { max-width: none; padding-top: 40px; }
  .hero__eyebrow {
    font-size: 0.72rem;
    margin-bottom: 12px;
  }
  .hero__lead {
    max-width: 100%;
  }
  .hero__title {
    font-size: clamp(1.65rem, 6.4vw, 2.1rem);
    line-height: 1.18;
  }
  .hero__subtitle {
    font-size: clamp(0.98rem, 3.6vw, 1.08rem);
    margin: 12px 0 22px;
    line-height: 1.5;
  }
  .hero__actions {
    width: 100%;
  }
  .hero__actions .btn {
    min-width: 0;
  }
  .hero__sparkle--1 { top: 18%; left: 8%; }
  .hero__sparkle--2 { top: 2px; left: 55%; }
  .hero__sparkle--3 { top: 14%; left: 42%; }

  .stats__inner { flex-direction: column; gap: 14px; align-items: stretch; padding-block: 28px; }
  .stat + .stat::before { display: none; }
  .stat { justify-content: flex-start; }

  .steps { grid-template-columns: 1fr; }
  .step:last-child { grid-column: auto; }
  .features { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bar { flex-direction: column; gap: 8px; text-align: center; }
  .footer__copy { max-width: none; align-items: center; }
  .footer__legal { justify-content: center; }
}

@media (max-width: 460px) {
  .footer__inner { grid-template-columns: 1fr; }
  .hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .btn { justify-content: center; }
}

/* ============================== CONTACT ============================== */
.contact-page {
  padding: calc(var(--nav-h) + 48px) 0 100px;
  background: linear-gradient(180deg, #F4F9FF 0%, var(--atb-white) 42%);
  min-height: 60vh;
}
.contact-page__head {
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: center;
}
.contact-page__title {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 800;
}
.contact-page__lede {
  color: var(--atb-orbit-gray);
  margin: 12px 0 0;
}
.contact-form {
  max-width: 560px;
  margin-inline: auto;
  background: var(--atb-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px 32px 40px;
}
.contact-form__field {
  position: relative;
  margin-bottom: 34px;
}
.contact-form__optional {
  font-weight: 500;
  color: var(--atb-orbit-gray);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__row--identity {
  grid-template-columns: minmax(7.25rem, 0.4fr) 1fr;
}
.contact-form__row .contact-form__field {
  margin-bottom: 34px;
}
.contact-form__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.contact-form__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.contact-form__label-row .contact-form__label {
  margin-bottom: 0;
}
.contact-form__tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.contact-form__tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--atb-orbit-gray);
  cursor: default;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.contact-form__tip-btn:hover,
.contact-form__tip-btn:focus-visible {
  color: var(--atb-mission-blue);
  background: rgba(11, 119, 231, 0.08);
  outline: none;
}
.contact-form__tip-icon {
  display: block;
}
.contact-form__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: min(240px, 70vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--atb-deep-space);
  color: var(--atb-white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 10px 24px rgba(2, 33, 81, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), visibility 0.15s var(--ease);
}
.contact-form__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--atb-deep-space);
}
.contact-form__tip:hover .contact-form__tooltip,
.contact-form__tip:focus-within .contact-form__tooltip {
  opacity: 1;
  visibility: visible;
}
.contact-form__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: #9f1239;
  pointer-events: none;
}
.contact-form__hint[hidden] {
  display: none;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid rgba(2, 33, 81, 0.14);
  border-radius: var(--radius-sm);
  color: var(--atb-deep-space);
  background: var(--atb-white);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23022151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--atb-mission-blue);
  box-shadow: 0 0 0 3px rgba(11, 119, 231, 0.15);
}
.contact-form__input.is-invalid,
.contact-form__select.is-invalid,
.contact-form__textarea.is-invalid {
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.contact-form__input.is-invalid:focus,
.contact-form__select.is-invalid:focus,
.contact-form__textarea.is-invalid:focus {
  border-color: rgba(220, 38, 38, 0.7);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}
.contact-form__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}
.contact-form__textarea--tall {
  min-height: 200px;
}
.contact-form__field[hidden] {
  display: none;
}
.contact-form__status {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.contact-form__status[hidden] {
  display: none;
}
.contact-form__status.is-success {
  background: rgba(22, 163, 74, 0.12);
  color: #14532d;
  border: 1px solid rgba(22, 163, 74, 0.35);
}
.contact-form__status.is-error {
  background: rgba(220, 38, 38, 0.1);
  color: #7f1d1d;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.contact-form__actions {
  margin-top: 28px;
}
.contact-form__actions .btn {
  width: 100%;
  justify-content: center;
}
.contact-form__submit {
  gap: 12px;
}
.contact-form__submit-spinner {
  display: none;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--atb-white);
  border-radius: 50%;
  animation: contact-submit-spin 0.7s linear infinite;
}
.contact-form.is-busy .contact-form__submit-spinner {
  display: inline-block;
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: #FFFFFF;
}
.contact-form.is-busy .contact-form__submit,
.contact-form.is-busy .contact-form__submit:hover,
.contact-form.is-busy .contact-form__submit:disabled,
.contact-form.is-busy .contact-form__submit.btn--gold:hover {
  background: #F3C78A;
  color: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  cursor: wait;
  transform: none;
  box-shadow: none;
  opacity: 1;
}
@keyframes contact-submit-spin {
  to { transform: rotate(360deg); }
}
.contact-form__sent {
  margin: 0;
  padding: 18px 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #14532d;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
}
.contact-form__sent[hidden] {
  display: none;
}
.contact-form.is-sent .contact-form__submit {
  display: none;
}
.contact-form.is-sent .contact-form__label {
  color: var(--atb-orbit-gray);
}
.contact-form.is-sent .contact-form__input,
.contact-form.is-sent .contact-form__select,
.contact-form.is-sent .contact-form__textarea {
  background: var(--atb-cloud-white);
  color: var(--atb-orbit-gray);
  border-color: rgba(95, 114, 147, 0.28);
  cursor: not-allowed;
  opacity: 0.92;
  box-shadow: none;
}
.contact-form.is-sent .contact-form__input:focus,
.contact-form.is-sent .contact-form__select:focus,
.contact-form.is-sent .contact-form__textarea:focus {
  outline: none;
  border-color: rgba(95, 114, 147, 0.28);
  box-shadow: none;
}

/* Cloudflare Turnstile host. With appearance:interaction-only the widget
   stays collapsed for most visitors; only expands if a challenge is needed. */
.atb-turnstile-host {
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: 0;
}
.mc-gate .atb-turnstile-host {
  display: flex;
  justify-content: center;
}
@media (max-width: 460px) {
  .contact-form { padding: 28px 20px 32px; }
  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ============================== LEGAL PAGES ============================== */
.legal-page {
  padding: calc(var(--nav-h) + 40px) 0 96px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(185, 220, 248, 0.55), transparent 55%),
    linear-gradient(180deg, #F4F9FF 0%, var(--atb-white) 38%);
  min-height: 60vh;
}
.legal-page__inner {
  max-width: 760px;
}
.legal-page__eyebrow {
  margin: 0 0 8px;
  color: var(--atb-accent-blue);
}
.legal-page__mount {
  min-height: 12rem;
}
.legal-page__loading {
  margin: 24px 0;
  color: var(--atb-orbit-gray);
}
.legal-page__related {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(2, 33, 81, 0.1);
  font-size: 0.92rem;
  color: var(--atb-orbit-gray);
}
.legal-page__related a {
  color: var(--atb-mission-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page__related code {
  font-size: 0.86em;
  word-break: break-all;
}

.legal-doc__header {
  margin-bottom: 28px;
}
.legal-doc__title {
  font-size: clamp(1.85rem, 3.4vw, 2.55rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: var(--atb-deep-space);
}
.legal-doc__meta {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--atb-orbit-gray);
}
.legal-doc__lede {
  margin: 18px 0 0;
  font-size: var(--text-lede);
  color: var(--atb-deep-space);
}
.legal-doc__toc {
  margin: 0 0 36px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(2, 33, 81, 0.12);
}
.legal-doc__toc-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--atb-deep-space);
}
.legal-doc__toc ol {
  margin: 0;
  padding-left: 1.25rem;
}
.legal-doc__toc li + li {
  margin-top: 6px;
}
.legal-doc__toc a {
  color: var(--atb-deep-space);
  text-decoration: none;
}
.legal-doc__toc a:hover {
  color: var(--atb-mission-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc__section {
  margin: 0 0 32px;
  padding-top: 4px;
}
.legal-doc__section h2 {
  font-size: 1.28rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--atb-deep-space);
}
.legal-doc__section h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--atb-deep-space);
}
.legal-doc__section p,
.legal-doc__section li {
  color: rgba(2, 33, 81, 0.92);
}
.legal-doc__section p {
  margin: 0 0 12px;
}
.legal-doc__section ul {
  margin: 0 0 12px;
  padding-left: 1.25rem;
}
.legal-doc__section li + li {
  margin-top: 8px;
}
.legal-doc__section a {
  color: var(--atb-mission-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc--error {
  padding: 24px;
  border: 1px solid rgba(2, 33, 81, 0.12);
  border-radius: var(--radius-sm);
  background: #fff;
}
.legal-doc--error code {
  font-size: 0.9em;
}

@media (max-width: 640px) {
  .legal-page { padding-top: calc(var(--nav-h) + 28px); }
}

/* ============================== FLOATING PLAN CTA ============================== */
/* Right edge matches .container content (max-width + 24px inline padding). */
.plan-fab {
  position: fixed;
  right: max(
    calc(env(safe-area-inset-right, 0px) + 24px),
    calc((100vw - var(--container)) / 2 + 24px)
  );
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 22px;
  border-radius: 10px;
  background: var(--atb-launch-gold);
  color: var(--atb-white);
  box-shadow: 0 12px 28px rgba(251, 149, 11, 0.4);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.2s var(--ease);
}
.plan-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.plan-fab:hover {
  box-shadow: 0 16px 32px rgba(251, 149, 11, 0.5);
  transform: translateY(-2px);
}
.plan-fab:focus-visible {
  outline: 3px solid rgba(11, 119, 231, 0.45);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .plan-fab {
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    font-size: 0.88rem;
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-fab {
    transition: none;
    transform: none;
  }
  .plan-fab:hover {
    transform: none;
  }
}