/* ============================================================================
   STYLE.CSS — Momentum AI Institute
   Visual system: MISSION CONTROL

   A dark, premium space-dashboard look. Deep navy star-field ground,
   frosted-glass panels, sky-blue and bolt-yellow used as GLOWING accents,
   monospace "telemetry" labels, calm motion.

   TYPE (two families, nothing more):
     Poppins     — display, headings, body. 400/600/700/800.
     Space Mono  — telemetry labels, numbers, data. 400/700.

   THE RULES THAT KEEP IT ON-STYLE:
     - Backgrounds live in the --bg / --sheet / --panel family. Never pure
       black, never gray, never white cards.
     - --bolt yellow is the PRIMARY ACTION only, plus tiny hot accents. One
       glowing yellow CTA per screen region — if everything glows, nothing does.
     - --navy text appears only on top of --bolt or --sky fills.
     - Depth comes from blur, 1px light edges and soft dark shadows. No hard
       offset shadows, no thick borders.
   ========================================================================= */

:root {
  /* Grounds */
  --bg:     #070D1A;               /* page ground (near-black navy) */
  --sheet:  #0A1322;               /* content surface, one step lighter */
  --solid:  #0C1730;               /* opaque panel */
  --panel:  rgba(16,28,56,.55);    /* glass panel fill — ALWAYS with blur */

  /* Lines */
  --edge:       rgba(127,214,246,.18);
  --edge-hover: rgba(63,191,239,.5);

  /* Text */
  --ink:  #EAF7FF;                 /* primary text (ice white) */
  --dim:  #8FA6C8;                 /* secondary text */
  --soft: #A7B7D4;                 /* muted body text on panels */

  /* Brand accents */
  --sky:      #3FBFEF;
  --sky-deep: #2FA9DA;
  --cloud:    #7FD6F6;
  --navy:     #0F1E3D;             /* text ON bolt/sky fills only */
  --bolt:     #F2C744;             /* CTA yellow — always glowing */

  /* Semantic */
  --good: #2FB673;
  --good-text: #7FE0A9;
  --bad-text: #F0A0A0;

  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;

  /* One container definition drives every section's horizontal rhythm. */
  --content: 1080px;
  --gutter: clamp(20px, 5vw, 24px);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 22px;

  --glow-sky:  0 0 30px rgba(63,191,239,.35);
  --glow-bolt: 0 0 26px rgba(242,199,68,.35);
  --shadow:    0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 14px 44px rgba(0,0,0,.45), 0 0 30px rgba(63,191,239,.12);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- The star field ---------------------------------------------------- */
/* A fixed, non-interactive layer of tiny CSS stars over --bg. Every piece of
   content sits above it on z-index 1.

   Three tiling layers rather than one: each is a set of dots inside a tile,
   and the three tile sizes are deliberately not multiples of one another, so
   the pattern only truly repeats far off-screen and the field reads as
   scattered rather than gridded.
     .stars          — fine dust, densest, always still
     .stars::before  — mid stars, slow twinkle
     .stars::after   — sparse bright stars, including the one bolt-yellow */
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: repeat;
  background-size: 230px 230px;
  background-image:
    radial-gradient(1.1px 1.1px at 18px 32px,   rgba(234,247,255,1) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 122px 78px,  rgba(234,247,255,.8) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 74px 176px,  rgba(234,247,255,.95) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 202px 128px, rgba(127,214,246,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 46px 214px,  rgba(234,247,255,.75) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 176px 206px, rgba(234,247,255,.7) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 214px 48px,  rgba(127,214,246,.8) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 96px 12px,   rgba(234,247,255,.65) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 8px 120px,   rgba(127,214,246,.7) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 148px 148px, rgba(234,247,255,.6) 50%, transparent 51%);
}
.stars::before,
.stars::after { content: ""; position: absolute; inset: 0; }
.stars::before {
  background-repeat: repeat;
  background-size: 390px 390px;
  background-image:
    radial-gradient(1.6px 1.6px at 60px 70px,   rgba(234,247,255,1) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 286px 140px, rgba(127,214,246,.95) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 150px 320px, rgba(234,247,255,.9) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 356px 288px, rgba(127,214,246,.85) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 240px 28px,  rgba(234,247,255,.8) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 20px 232px,  rgba(234,247,255,.75) 50%, transparent 51%);
  animation: twinkle 5.5s ease-in-out infinite;
}
.stars::after {
  background-repeat: repeat;
  background-size: 670px 670px;
  background-image:
    /* a few brighter stars carry a faint halo */
    radial-gradient(2px 2px at 110px 180px, rgba(234,247,255,1) 45%, rgba(234,247,255,.12) 60%, transparent 72%),
    radial-gradient(2px 2px at 520px 90px,  rgba(127,214,246,1) 45%, rgba(127,214,246,.14) 60%, transparent 72%),
    radial-gradient(2px 2px at 330px 520px, rgba(234,247,255,.95) 45%, rgba(234,247,255,.1) 60%, transparent 72%),
    /* the single bolt-yellow star — the "hot" accent in the field */
    radial-gradient(2px 2px at 600px 400px, rgba(242,199,68,1) 45%, rgba(242,199,68,.18) 60%, transparent 74%);
  animation: twinkle 7.5s ease-in-out infinite reverse;
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.page { position: relative; z-index: 1; width: 100%; overflow-x: clip; }

/* Grid items default to min-width:auto, so one long unbreakable string — a
   mono URL label, say — can push its whole track wider than the viewport.
   Let those items shrink, and let the long strings wrap. "anywhere" rather
   than "break-word" because only anywhere affects min-content sizing, which
   is what the track is measured from. */
.feature-card, .path-card, .guide-card, .product-card,
.tier-card, .quote-card, .stat-card { min-width: 0; }
.meta, .link-note, .archive-title, .product-blurb,
.guide-blurb, .tier-desc, .addon-name { overflow-wrap: anywhere; }

/* THE container rule. Every full-bleed band gets it, so backgrounds run
   edge to edge while their content lines up on one shared centre column. */
.section,
.hero,
.sky-band,
.band,
.masthead,
.links-head,
.site-footer {
  padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
}
.links-wrap { padding-inline: var(--gutter); }

/* ---- Focus + skip link ------------------------------------------------- */
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--bolt); color: var(--navy);
  font-weight: 800; font-size: 13px; padding: 14px 22px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- Type -------------------------------------------------------------- */
.display-hero {
  font-family: var(--font-head);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 6vw, 68px); line-height: 1.02;
  letter-spacing: -0.01em; color: var(--ink);
  text-shadow: 0 0 34px rgba(63,191,239,.35);
  text-wrap: balance;
}
.display-hero .accent { color: var(--sky); }

.h1, .h2, .h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.h1 {
  font-weight: 800; font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.04; letter-spacing: -0.005em;
  text-shadow: 0 0 30px rgba(63,191,239,.28);
}
.h2 { font-weight: 800; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.12; }
.h3 { font-weight: 700; font-size: 16.5px; line-height: 1.3; text-transform: none; }

/* Telemetry label — the "system readout" motif. This is what every eyebrow
   on the site becomes. */
.kicker {
  font-family: var(--font-mono);
  font-weight: 400; font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--sky);
}
.meta {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim);
}
.lede { color: var(--soft); font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.6; }

/* ---- Buttons ----------------------------------------------------------- */
/* .btn-pill is the glowing bolt primary. --white / --sky are the ghosts. */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--bolt); color: var(--navy);
  padding: 14px 26px; min-height: 46px;
  border: none; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--glow-bolt);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(242,199,68,.55); }

.btn-pill--white,
.btn-pill--sky {
  background: rgba(63,191,239,.06); color: var(--sky);
  border: 1px solid var(--edge); box-shadow: none;
}
.btn-pill--white:hover,
.btn-pill--sky:hover {
  border-color: var(--sky); background: rgba(63,191,239,.12);
  box-shadow: none; transform: translateY(-2px);
}
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ONE glowing bolt CTA per screen region. A grid of cards each carrying a
   yellow button would be twelve competing "primary" actions, so buttons
   inside repeating cards fall back to the ghost treatment. Bolt is kept for
   the hero, the form submits, the band CTAs and the one featured tier. */
.path-card .btn-pill,
.product-card .btn-pill,
.tier-card .btn-pill,
.guide-card .btn-pill {
  background: rgba(63,191,239,.06); color: var(--sky);
  border: 1px solid var(--edge); box-shadow: none;
}
.path-card .btn-pill:hover,
.product-card .btn-pill:hover,
.tier-card .btn-pill:hover,
.guide-card .btn-pill:hover {
  border-color: var(--sky); background: rgba(63,191,239,.12); box-shadow: none;
}
/* The featured tier is the exception — it is the one action being pushed. */
.tier-card--featured .btn-pill {
  background: var(--bolt); color: var(--navy);
  border: none; box-shadow: var(--glow-bolt);
}
.tier-card--featured .btn-pill:hover {
  background: var(--bolt); box-shadow: 0 0 40px rgba(242,199,68,.55);
}

/* ---- Navigation -------------------------------------------------------- */
/* Floating sticky glass bar — never glued to the viewport edge. */
.site-nav {
  position: sticky; top: 12px; z-index: 50;
  max-width: var(--content); margin: 12px auto 0;
  width: calc(100% - (2 * var(--gutter)));
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge); border-radius: 16px;
  padding: 8px 18px;
}
.site-nav .brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--font-head); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
}
.site-nav .brand img {
  height: 42px; width: 42px; object-fit: cover; border-radius: 10px;
  filter: drop-shadow(0 0 14px rgba(63,191,239,.45));
}
.site-nav ul { display: flex; gap: 2px; list-style: none; flex-wrap: wrap; }
.site-nav ul a {
  display: block;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--dim);
  text-decoration: none; padding: 9px 12px; border-radius: 9px;
  transition: color .15s ease, background .15s ease;
}
.site-nav ul a:hover { color: var(--ink); background: rgba(63,191,239,.12); }
.site-nav ul a[aria-current="page"] { color: var(--navy); background: var(--sky); }

/* On phones six links would swallow the screen. Keep them on one swipe row. */
@media (max-width: 860px) {
  .site-nav { gap: 10px; padding: 8px 12px; }
  .site-nav ul {
    flex-wrap: nowrap; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav ul a { white-space: nowrap; padding: 8px 10px; font-size: 11.5px; }
  .site-nav .brand { font-size: 12.5px; }
  .site-nav .brand img { height: 34px; width: 34px; }
}

/* ---- Sections ---------------------------------------------------------- */
.section { position: relative; padding-block: clamp(56px, 7vw, 80px); }

/* Section header: H2 on a 1px rule, with an optional right-aligned Space Mono
   index (data-sys="SYS.01 / LEARNING MAP") — the system-readout motif. */
.section-head {
  margin-bottom: clamp(28px, 3.5vw, 40px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--edge);
  position: relative;
}
.section-head .kicker { display: block; margin-bottom: 10px; }
.section-head .lede { margin-top: 14px; max-width: 68ch; }
.section-head[data-sys]::after {
  content: attr(data-sys);
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--dim);
  position: absolute; right: 0; bottom: 16px;
}
/* Keep the copy clear of the index rather than letting it wrap underneath. */
@media (min-width: 721px) {
  .section-head[data-sys] > * { max-width: calc(100% - 260px); }
}
@media (max-width: 720px) { .section-head[data-sys]::after { display: none; } }

/* Sub-heading inside a section, above its own group of cards. */
.section-sub {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--sky);
  margin-bottom: 16px;
}
.section-sub + .tier-grid { margin-bottom: clamp(30px, 4vw, 46px); }

/* Nebula glow — used by hero and mastheads. Deliberately NO opaque colour
   underneath: these are the tallest blocks on the site, and a solid fill
   here would paint straight over the fixed star field. The glow alone on
   the page ground is what's wanted. */
.hero, .masthead, .links-head {
  position: relative;
  background: radial-gradient(ellipse at 50% -20%, rgba(63,191,239,.20), transparent 60%);
}

/* ---- Glass panel: the core surface ------------------------------------- */
/* Every card on the site is built from this. */
.panel,
.stat-card,
.path-card,
.feature-card,
.guide-card,
.product-card,
.tier-card,
.quote-card,
.faq-row,
.form-card,
.step-list li,
.pathways a,
.link-row {
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Interactive panels lift; static ones do not. */
.path-card:hover,
.feature-card:hover,
.guide-card:hover,
.product-card:hover,
.tier-card:hover,
.pathways a:hover,
.pathways a:focus-visible,
.link-row:hover,
.link-row:focus-visible {
  transform: translateY(-4px);
  border-color: var(--edge-hover);
  box-shadow: var(--shadow-lg);
}

.panel { padding: clamp(20px, 2.6vw, 26px); max-width: 880px; }
.panel h3 { font-size: 16.5px; }
.panel p { color: var(--soft); font-size: 14.5px; }
.panel > * + * { margin-top: 12px; }
.panel .tier-features { margin-top: 16px; }
.panel .btn-pill { margin-top: 20px; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 104px);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero .display-hero { margin-top: 18px; }
.hero .lede { margin-top: 20px; max-width: 46ch; }
.hero-note {
  margin-top: 20px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--dim);
}

/* Hero art floats directly on the dark ground with a sky glow — no white box.
   The gentle bob is the one ambient animation in this region. */
.hero-visual { position: relative; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hero-glow {
  position: absolute; inset: -14% -10% -18%;
  background: radial-gradient(closest-side, rgba(63,191,239,.34), transparent 72%);
  filter: blur(26px); pointer-events: none;
}
.hero-photo {
  position: relative;
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--edge);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 44px rgba(63,191,239,.18);
}
.hero-badge {
  position: absolute;
  left: calc(-1 * clamp(40px, 5vw, 76px));
  top: calc(-1 * clamp(24px, 3vw, 44px));
  width: clamp(120px, 15vw, 200px); aspect-ratio: 1; object-fit: cover;
  border-radius: 22px; border: 1px solid var(--edge);
  filter: drop-shadow(0 0 34px rgba(63,191,239,.45));
}
.hero-logo { width: 100%; border-radius: var(--radius); }

.scroll-cue {
  position: absolute; z-index: 3;
  left: 50%; bottom: clamp(16px, 2.4vw, 28px); transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--dim); text-decoration: none;
}
.scroll-cue svg { width: 16px; height: 16px; }
.scroll-cue:hover { color: var(--sky); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 380px; }
  .hero-badge { width: clamp(96px, 26vw, 124px); left: -10px; top: -16px; border-radius: 18px; }
  .hero-logo { order: -1; max-width: 360px; }
}

/* ---- Telemetry stat tiles --------------------------------------------- */
.stat-sky { background: none; }
.stat-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat-card { padding: 22px 20px; text-align: left; }
.stat-big {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); line-height: 1;
  color: var(--bolt); text-shadow: 0 0 20px rgba(242,199,68,.3);
}
.stat-card .meta { margin-top: 10px; }
/* The old sky theme built each tile out of cloud bumps. Mission Control uses
   flat glass, so any leftover puffs stay hidden. */
.cloud-puff, .cloud-svg { display: none !important; }

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

/* ---- Feature / CTA bands ---------------------------------------------- */
/* Tinted glass, not a solid colour block. */
.sky-band, .band {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 6vw, 72px);
  color: var(--ink);
}
.sky-band > *, .band > * { position: relative; z-index: 2; }
.sky-band .band-copy,
.band .lede { color: var(--soft); margin-top: 16px; max-width: 52ch; }
.band .btn-pill { margin-top: 26px; }

.band-split {
  display: grid; grid-template-columns: 1fr minmax(320px, 420px);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.band-split .section-head { margin: 0; }
@media (max-width: 900px) { .band-split { grid-template-columns: 1fr; } }

.form-card {
  padding: clamp(22px, 2.8vw, 30px);
  /* Feature blocks may tint the glass. */
  background: linear-gradient(135deg, rgba(63,191,239,.12), rgba(242,199,68,.07)), var(--panel);
}
.band-split .form-card { margin: 0; }

/* ---- Forms ------------------------------------------------------------- */
.capture-form label {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--sky);
  margin-bottom: 8px;
}
.capture-form label + input { margin-bottom: 16px; }
.capture-form input {
  width: 100%;
  background: rgba(7,13,26,.6);
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 13px 16px; min-height: 46px;
}
.capture-form input::placeholder { color: var(--dim); }
.capture-form input:focus {
  outline: 2px solid var(--sky); outline-offset: 1px;
  border-color: var(--edge-hover);
}
.capture-form .btn-pill { margin-top: 6px; }
.form-error {
  color: var(--bad-text); font-size: 13.5px; font-weight: 600;
  margin-bottom: 12px;
}
.no-spam {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
}

/* ---- Path / feature / service cards ----------------------------------- */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.path-card { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.path-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; color: var(--sky);
}
.path-card h3 { font-size: 16.5px; }
.path-card p { font-size: 14.5px; color: var(--soft); flex: 1; }
.path-card .btn-pill { margin-top: 18px; align-self: stretch; }
@media (max-width: 860px) { .path-grid { grid-template-columns: 1fr; } }

.feature-grid, .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid--two { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.feature-card { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.feature-card .feature-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(63,191,239,.1); color: var(--sky);
  border: 1px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
}
.feature-card .feature-icon svg { width: 21px; height: 21px; }
.feature-card p { font-size: 14.5px; color: var(--soft); }
.feature-card .meta { margin-top: auto; padding-top: 8px; }
@media (max-width: 860px) { .feature-grid, .service-grid, .feature-grid--two { grid-template-columns: 1fr; } }

/* ---- Pricing tiers ----------------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier-grid--two { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.tier-card { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
/* The featured tier tints its glass and keeps the glow — it does not sit
   higher than its neighbours, so nothing shifts on hover. */
.tier-card--featured {
  background: linear-gradient(135deg, rgba(63,191,239,.12), rgba(242,199,68,.07)), var(--panel);
  border-color: var(--edge-hover);
  box-shadow: 0 0 30px rgba(63,191,239,.12);
}
.tier-badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--dim); border: 1px solid var(--edge);
  border-radius: 99px; padding: 5px 11px;
}
.tier-card--featured .tier-badge {
  color: var(--bolt); border-color: rgba(242,199,68,.5);
}
.tier-card h3 { font-size: 17px; }
.tier-price {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.05;
  color: var(--bolt); text-shadow: 0 0 18px rgba(242,199,68,.28);
}
.tier-price span {
  font-family: var(--font-mono); font-weight: 400; font-size: 12px;
  color: var(--dim); text-shadow: none; letter-spacing: .1em;
}
.tier-desc { font-size: 14px; color: var(--soft); }
.tier-features { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.tier-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink);
}
.tier-features li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--sky); }
.tier-card .btn-pill { margin-top: auto; }
@media (max-width: 860px) { .tier-grid, .tier-grid--two { grid-template-columns: 1fr; } }

/* ---- Add-on rows ------------------------------------------------------- */
.addon-list { list-style: none; max-width: 880px; border-top: 1px solid var(--edge); }
.addon-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 15px 8px; border-bottom: 1px solid var(--edge);
  transition: background .15s ease;
}
.addon-row:hover { background: rgba(63,191,239,.06); }
.addon-name { font-size: 14.5px; color: var(--ink); }
.addon-name em { color: var(--dim); font-style: normal; font-size: 13px; }
.addon-price {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--bolt); white-space: nowrap;
}
.fineprint {
  max-width: 880px; margin-top: 18px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
}

/* ---- Pathway rows ----------------------------------------------------- */
.pathways { list-style: none; display: grid; gap: 12px; }
.pathways a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px 24px; text-decoration: none; color: var(--ink);
}
.pathways .path-title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(17px, 2vw, 22px); text-transform: uppercase;
}
.pathways .path-side { display: flex; align-items: center; gap: 16px; }
.link-arrow, .pathways .link-arrow { width: 20px; height: 20px; color: var(--sky); flex-shrink: 0; }

/* ---- Masthead (inner page headers) ------------------------------------ */
.masthead {
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 80px);
}
.ghost-numeral {
  position: absolute; top: 50%; right: 3%; transform: translateY(-50%);
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(120px, 22vw, 260px); line-height: 1;
  color: rgba(63,191,239,.07); z-index: 0; user-select: none;
}
.masthead > *:not(.ghost-numeral) { position: relative; z-index: 2; }
.masthead .lede { margin-top: 16px; max-width: 62ch; }
.masthead .kicker { display: block; }

/* ---- Guides library --------------------------------------------------- */
.greeting { margin-bottom: 12px; }
.chip-group { margin-top: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .14em;
  background: transparent; color: var(--dim);
  border: 1px solid var(--edge); border-radius: 99px;
  padding: 8px 15px; min-height: 34px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--edge-hover); }
.chip[aria-pressed="true"] {
  background: var(--sky); color: var(--navy); border-color: var(--sky); font-weight: 700;
}

.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 32px;
}
.guide-card { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.guide-card h3 { font-size: 16.5px; }
.guide-blurb { font-size: 14.5px; color: var(--soft); flex: 1; }
.guide-link {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; color: var(--sky); align-self: flex-start;
}
.guide-link:hover { color: var(--bolt); }
.guide-empty { margin-top: 26px; color: var(--soft); }

/* ---- Guide archive ---------------------------------------------------- */
.archive-list { list-style: none; margin-top: 28px; border-top: 1px solid var(--edge); }
.archive-row {
  display: grid; grid-template-columns: 100px 1fr auto; align-items: center;
  gap: clamp(14px, 2.4vw, 28px); padding: 15px 8px;
  border-bottom: 1px solid var(--edge);
  transition: background .15s ease;
}
.archive-row:hover { background: rgba(63,191,239,.06); }
.archive-date {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; color: var(--sky);
}
.archive-title { font-size: 14.5px; color: var(--ink); }
.archive-link {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; color: var(--sky); white-space: nowrap;
}
.archive-link:hover { color: var(--bolt); }
.archive-link--none { color: var(--dim); }
@media (max-width: 640px) { .archive-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---- Products: book-cover cards --------------------------------------- */
.product-shelf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.product-shelf--wide { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
@media (max-width: 720px) { .product-shelf--wide { grid-template-columns: 1fr; } }

.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-cover {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-bottom: 1px solid var(--edge);
}
.product-cover--generated {
  display: flex; align-items: flex-end;
  padding: 20px; position: relative; overflow: hidden;
}
.product-cover--generated::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(63,191,239,.28), transparent 62%);
}
/* Cover tones stay inside the Mission Control family — deep navy grounds with
   a sky or bolt wash, never a bright pastel block. */
.product-cover--sky  { background: linear-gradient(160deg, #123456, var(--bg)); }
.product-cover--navy { background: linear-gradient(160deg, #0C1730, #05080F); }
.product-cover--sand { background: linear-gradient(160deg, #3A2F16, var(--bg)); }
.product-cover--sand::before { background: radial-gradient(ellipse at 30% 0%, rgba(242,199,68,.26), transparent 62%); }
.product-cover-title {
  position: relative; z-index: 1;
  font-family: var(--font-head); font-weight: 800;
  font-size: 18px; line-height: 1.15; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 0 22px rgba(63,191,239,.4);
  text-wrap: balance;
}

.product-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.product-card-body h3 { font-size: 15.5px; }
.product-blurb { font-size: 13.5px; color: var(--soft); flex: 1; }
.product-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.product-cta .btn-pill { white-space: nowrap; padding: 12px 20px; font-size: 12px; }
.product-cta .product-price:empty { display: none; }
.product-price {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 20px; line-height: 1; color: var(--bolt);
  text-shadow: 0 0 16px rgba(242,199,68,.28);
}
.product-price-store {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
  text-shadow: none;
}

/* ---- Story chapters --------------------------------------------------- */
.chapter {
  max-width: 760px; margin-inline: auto;
  padding-block: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--edge);
}
.chapter:last-of-type { border-bottom: none; }
.chapter-num {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--sky);
  margin-bottom: 12px;
}
.chapter .h2 { margin-bottom: 16px; }
.chapter p { color: var(--soft); font-size: 15px; margin-bottom: 14px; }
.chapter p strong { color: var(--ink); font-weight: 700; }
/* Callout block: bolt left border, faint bolt wash. */
.pull {
  margin: 22px 0;
  border-left: 3px solid var(--bolt);
  background: rgba(242,199,68,.06);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  color: var(--ink); font-size: 15.5px; font-weight: 600;
}

/* ---- Steps ------------------------------------------------------------- */
.step-list { list-style: none; display: grid; gap: 12px; max-width: 820px; }
.step-list li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; }
.step-num {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(63,191,239,.1); border: 1px solid var(--edge);
  color: var(--sky);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.step-list h3 { font-size: 15.5px; margin-bottom: 6px; }
.step-list p { font-size: 14px; color: var(--soft); }

/* ---- Testimonials ----------------------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote-card { padding: 24px 22px; }
.quote-card p { color: var(--ink); font-size: 14.5px; }
.quote-name { margin-top: 16px; }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---- FAQ --------------------------------------------------------------- */
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq-row { overflow: hidden; }
.faq-row summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 700;
  font-size: 20px; color: var(--sky); line-height: 1; flex-shrink: 0;
}
.faq-row[open] summary::after { content: "\2013"; }
.faq-row summary:hover { color: var(--sky); }
.faq-answer { padding: 0 22px 20px; }
.faq-answer p { font-size: 14.5px; color: var(--soft); max-width: 68ch; }

/* ---- Links page ------------------------------------------------------- */
.links-wrap { max-width: 620px; margin-inline: auto; position: relative; }
.links-head {
  text-align: center; overflow: hidden;
  padding-block: clamp(44px, 5.5vw, 72px) clamp(32px, 4vw, 48px);
}
.links-head > * { position: relative; z-index: 2; }
.links-head .links-avatar {
  width: clamp(140px, 18vw, 176px); height: clamp(140px, 18vw, 176px);
  object-fit: cover; border-radius: 50%;
  border: 1px solid var(--edge);
  filter: drop-shadow(0 0 40px rgba(63,191,239,.4));
  margin: 0 auto 22px;
}
.links-head .kicker { display: block; }
.links-head .lede { margin-top: 14px; }
.links-head p { margin-inline: auto; }

.links-list { list-style: none; display: grid; gap: 12px; padding-block: 28px clamp(56px, 7vw, 80px); }
.link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; min-height: 68px;
  text-decoration: none; color: var(--ink); cursor: pointer;
}
.link-label { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; display: block; }
.link-note {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--dim);
}

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 6vw, 76px) 30px;
  border-top: 1px solid var(--edge);
  /* Glow only — see the note on .hero: an opaque fill would hide the stars. */
  background: radial-gradient(ellipse at 50% 120%, rgba(63,191,239,.16), transparent 60%);
}
.site-footer > * { position: relative; z-index: 2; }
.site-footer .display-hero { font-size: clamp(30px, 4.6vw, 60px); }
.footer-row {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--edge);
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: center; justify-content: space-between;
}
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; }
.footer-socials a {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; color: var(--sky);
}
.footer-socials a:hover { color: var(--bolt); }
.site-footer .copyright {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
}

/* The old light theme flagged reversed grounds with these. Everything is a
   dark ground now, so they carry no styling of their own. */
.on-sky, .on-navy { }

/* ---- Scroll reveal ---------------------------------------------------- */
/* Scoped behind .js (set by an inline script in <head> before first paint)
   so content stays visible if JavaScript never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .section-head,
  .js [data-reveal] :is(.stat-card, .path-card, .feature-card, .quote-card,
                        .faq-row, .product-card, .tier-card, .panel,
                        .addon-row, .archive-row, .step-list li, .pathways li) {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .js [data-reveal].revealed .section-head,
  .js [data-reveal].revealed :is(.stat-card, .path-card, .feature-card, .quote-card,
                                 .faq-row, .product-card, .tier-card, .panel,
                                 .addon-row, .archive-row, .step-list li, .pathways li) {
    opacity: 1; transform: none;
  }

  /* Stagger: each card in a row starts a beat after the one before it. */
  .js [data-reveal].revealed
    :is(.stat-grid, .path-grid, .feature-grid, .service-grid, .quote-grid,
        .faq-list, .product-shelf, .tier-grid, .addon-list, .archive-list,
        .step-list, .pathways) > *:nth-child(2) { transition-delay: .07s; }
  .js [data-reveal].revealed
    :is(.stat-grid, .path-grid, .feature-grid, .service-grid, .quote-grid,
        .faq-list, .product-shelf, .tier-grid, .addon-list, .archive-list,
        .step-list, .pathways) > *:nth-child(3) { transition-delay: .14s; }
  .js [data-reveal].revealed
    :is(.stat-grid, .path-grid, .feature-grid, .service-grid, .quote-grid,
        .faq-list, .product-shelf, .tier-grid, .addon-list, .archive-list,
        .step-list, .pathways) > *:nth-child(4) { transition-delay: .21s; }
  .js [data-reveal].revealed
    :is(.stat-grid, .path-grid, .feature-grid, .service-grid, .quote-grid,
        .faq-list, .product-shelf, .tier-grid, .addon-list, .archive-list,
        .step-list, .pathways) > *:nth-child(5) { transition-delay: .28s; }
}

/* ---- Utility ---------------------------------------------------------- */
[hidden] { display: none !important; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 22px; }
.mt-lg { margin-top: 32px; }
.center { text-align: center; }