/* ═══════════════════════════════════════════════════════════════
   LaunchPad Site v2 — prototype design system
   Monochrome only. #0D0D0D→#171717 · #393C3D · #BCBCBC · #E9E9D6 · #FFF
   Type: Inter (Halenoir stand-in) · Newsreader (Gambetta stand-in)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --space:  #0D0D0D;
  --black:  #171717;
  --slate:  #393C3D;
  --gray:   #BCBCBC;
  --cream:  #E9E9D6;
  --white:  #FFFFFF;

  --rule:        rgba(233, 233, 214, 0.14);
  --rule-strong: rgba(233, 233, 214, 0.32);
  --muted:       rgba(233, 233, 214, 0.62);
  --dim:         rgba(233, 233, 214, 0.40);

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  --max:    1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }  /* clip, NOT hidden — hidden silently kills position:sticky */
body {
  margin: 0;
  background: var(--space);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cream); color: var(--black); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ───────── WebGL stage ───────── */
#stage {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
}
#stage canvas { display: block; width: 100%; height: 100%; }

/* static fallback stars (no WebGL / reduced motion) */
.static-star { display: none; }
body.static-mode .static-star {
  display: block; position: fixed; z-index: 0;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--cream); opacity: .5;
  pointer-events: none;
}
body.static-mode .static-star.dim { width: 2px; height: 2px; opacity: .28; background: var(--gray); }

main { position: relative; z-index: 1; }

/* ───────── nav shell ───────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(13, 13, 13, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
  padding-top: 12px; padding-bottom: 12px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 20px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .25s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a.world { color: var(--cream); font-weight: 600; }
.nav-links a::before { content: '// '; color: var(--dim); font-family: var(--mono); font-weight: 400; }
.nav-ctas { display: flex; align-items: center; gap: 12px; }

.nav-toggle { display: none; }

/* ───────── buttons ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--cream); color: var(--black);
  box-shadow: 0 0 0 rgba(233,233,214,0);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(233, 233, 214, 0.22);
}
.btn-ghost {
  background: transparent; color: var(--cream);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--cream); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* context flip: inside the Studio world the weights invert */
body.world-studio .nav .cta-beta   { background: transparent; color: var(--cream); border-color: var(--rule-strong); box-shadow: none; }
body.world-studio .nav .cta-beta:hover { border-color: var(--cream); }
body.world-studio .nav .cta-studio { background: var(--cream); color: var(--black); border-color: transparent; }
body.world-studio .nav .cta-studio:hover { box-shadow: 0 8px 40px rgba(233,233,214,.22); }

/* ───────── acts / sections ───────── */
.act {
  position: relative;
  padding: clamp(90px, 14vh, 160px) var(--gutter);
}
.act-inner { max-width: var(--max); margin: 0 auto; position: relative; }

.act-label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: clamp(28px, 5vh, 56px);
}
.act-label .tick { width: 42px; height: 1px; background: var(--rule-strong); }
.act-label .wp { color: var(--cream); }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.headline {
  font-size: clamp(42px, 7.5vw, 96px);
  line-height: 1.02;
}
.headline em, .h-act em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.h-act { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.06; max-width: 18ch; }
.h-sub { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }

.lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55;
  color: var(--muted); max-width: 56ch;
}
.small-note { font-size: 13px; color: var(--dim); }
.mono-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

/* ───────── hero ───────── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px var(--gutter) 80px;
  position: relative;
}
.hero-grid {
  max-width: var(--max); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-eyebrow .status {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim);
  padding: 6px 14px; border: 1px solid var(--rule); border-radius: 100px;
}
.hero-eyebrow .flavor { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); }
.hero-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.55;
  color: var(--muted); max-width: 46ch;
  margin: 28px 0 40px;
}
.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.appstore-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border: 1px solid var(--rule); border-radius: 12px;
  color: var(--muted); font-size: 12px;
}
.appstore-ghost .top { display: block; font-size: 9px; letter-spacing: 0.14em; color: var(--dim); }
.appstore-ghost .bot { display: block; font-size: 14px; font-weight: 600; color: var(--cream); }

.atlas-wrap { position: relative; display: flex; justify-content: center; }
.atlas-wrap img {
  width: min(100%, 420px);
  filter: grayscale(1) contrast(1.04);
  will-change: transform;
}
.atlas-label {
  position: absolute; bottom: -6px; right: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim);
}

/* launch base line — the parent, drawn under the hero */
.base-line {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 46px;
  height: 2px; background: var(--rule-strong);
  transform-origin: center; transform: scaleX(0);
  transition: transform 1.4s var(--ease) .3s;
}
.base-line.in { transform: scaleX(1); }
.base-line::after {
  content: 'THE LAUNCHPAD'; position: absolute; left: 0; top: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--dim);
}

.scroll-cue {
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--dim);
}
.scroll-cue .line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--cream), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ───────── the fork ───────── */
.fork { min-height: 100svh; display: flex; align-items: center; }
.fork-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.fork-svg path { fill: none; }
.fork-svg .traj { stroke-linecap: round; }
.fork-svg .traj-a { stroke: var(--cream); stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(233,233,214,.5)); }
.fork-svg .traj-b { stroke: var(--gray); stroke-width: 1.75; opacity: .7; }
.fork-svg .base   { stroke: var(--rule-strong); stroke-width: 2; }

.fork-head { text-align: center; margin-bottom: clamp(40px, 7vh, 90px); }
.fork-head .mono-tag { margin-bottom: 16px; display: block; }

.doors {
  display: grid; grid-template-columns: 60fr 40fr;
  gap: clamp(16px, 2.5vw, 32px);
  max-width: 1080px; margin: 0 auto; width: 100%;
  align-items: stretch;
}
.door {
  position: relative;
  background: rgba(23, 23, 23, 0.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 52px);
  display: flex; flex-direction: column; gap: 18px;
  text-decoration: none;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.door:hover { transform: translateY(-6px); }
.door-platform { border-color: var(--rule-strong); }
.door-platform:hover { border-color: var(--cream); box-shadow: 0 24px 80px rgba(233,233,214,.10); }
.door-studio:hover { border-color: var(--gray); box-shadow: 0 24px 80px rgba(188,188,188,.07); }

.door .door-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.door .door-id { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.door .door-id em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.door .door-promise { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--muted); flex-grow: 1; }
.door .btn { align-self: flex-start; margin-top: 6px; }
.door-platform .door-id { font-size: clamp(30px, 3.6vw, 48px); }

/* ───────── feature rows / cards ───────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 6vh, 64px); }
.feature {
  border-top: 1px solid var(--rule-strong);
  padding-top: 22px;
}
.feature .f-num { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .2em; }
.feature h3 { font-size: 19px; margin: 12px 0 10px; letter-spacing: -0.01em; }
.feature p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* package cards (studio act) */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(36px, 6vh, 60px); }
.pkg {
  border: 1px solid var(--rule); border-radius: 16px;
  padding: clamp(22px, 2.5vw, 34px);
  background: rgba(23,23,23,.55);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.pkg:hover { border-color: var(--rule-strong); transform: translateY(-4px); }
.pkg .p-price { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--gray); }
.pkg h3 { font-size: 20px; margin: 10px 0 8px; }
.pkg p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* proof strip */
.proof-strip {
  display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 28px 0; margin-top: clamp(36px, 6vh, 60px);
}
.proof-strip .p-item { font-size: 14px; color: var(--muted); }
.proof-strip .p-item strong { color: var(--cream); display: block; font-size: 15px; margin-bottom: 2px; }

/* ───────── the completed mark (// 04) ───────── */
.mark-stage { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.mark-svg { width: clamp(140px, 18vw, 220px); overflow: visible; }
.mark-svg path { fill: none; stroke-linecap: round; }
.mark-svg .m-base { stroke: var(--cream); stroke-width: 6; }
.mark-svg .m-a { stroke: var(--cream); stroke-width: 6; }
.mark-svg .m-b { stroke: var(--cream); stroke-width: 6; }
.mark-svg path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s var(--ease); }
.mark-svg.in .m-base { stroke-dashoffset: 0; transition-delay: 0s; }
.mark-svg.in .m-a { stroke-dashoffset: 0; transition-delay: .45s; }
.mark-svg.in .m-b { stroke-dashoffset: 0; transition-delay: .75s; }

/* ───────── forms ───────── */
.form-panel {
  max-width: 620px; margin: clamp(36px, 6vh, 56px) auto 0;
  border: 1px solid var(--rule-strong); border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  background: rgba(23,23,23,.65);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.form-row { display: grid; gap: 18px; margin-bottom: 18px; }
.form-row.split { grid-template-columns: 1fr 1fr; }
label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
input, select, textarea {
  width: 100%;
  background: transparent; color: var(--cream);
  border: none; border-bottom: 1px solid var(--rule-strong);
  padding: 10px 2px; font-family: var(--sans); font-size: 16px;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--cream); }
textarea { resize: vertical; min-height: 90px; }
select { -webkit-appearance: none; appearance: none; }
.form-success { display: none; text-align: center; padding: 24px 0 8px; font-family: var(--serif); font-size: 18px; color: var(--cream); }
.form-panel.sent form { display: none; }
.form-panel.sent .form-success { display: block; }

/* ───────── telemetry rail ───────── */
.telemetry {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
}
.telemetry .t-track { position: relative; width: 1px; background: var(--rule); height: 260px; margin-right: 5px; }
.telemetry .t-fill {
  position: absolute; top: 0; left: 0; width: 1px; height: 100%;
  background: var(--cream); transform-origin: top; transform: scaleY(0);
}
.t-points { position: absolute; inset: 0; }
.t-point {
  position: absolute; right: -5px; width: 11px; height: 11px;
  border-radius: 50%; border: 1px solid var(--rule-strong);
  background: var(--space);
  cursor: pointer; padding: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.t-point:hover, .t-point.active { background: var(--cream); border-color: var(--cream); transform: scale(1.2); }
.t-point .t-label {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap;
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.t-point:hover .t-label, .t-point.active .t-label { opacity: 1; color: var(--cream); }

/* ───────── reveal system ───────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; }
.reveal.in { transition-delay: 0s; }  /* hover transforms respond instantly after reveal */

/* ───────── footer ───────── */
footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 8vh, 80px) var(--gutter) 40px;
  background: rgba(13,13,13,.7);
}
.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); margin: 0 0 16px; }
.foot-grid a { display: block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 10px; transition: color .25s; }
.foot-grid a:hover { color: var(--cream); }
.foot-tag { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 15px; margin-top: 14px; }
.foot-legal { max-width: var(--max); margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--dim); }

/* ───────── world-entry (platform/studio pages) ───────── */
.world-hero { min-height: 86svh; display: flex; flex-direction: column; justify-content: center; padding: 150px var(--gutter) 70px; position: relative; }
.world-hero .act-inner { width: 100%; }
.world-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.world-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 14px rgba(233,233,214,.8); }
body.world-studio .world-kicker .dot { background: var(--gray); box-shadow: 0 0 14px rgba(188,188,188,.6); }

/* categories chips (platform) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.chip { font-size: 13px; letter-spacing: .04em; padding: 10px 20px; border: 1px solid var(--rule-strong); border-radius: 100px; color: var(--muted); }

/* ───────── mobile ───────── */
@media (max-width: 1100px) {
  .telemetry { display: none; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 22px; height: 1.5px; background: var(--cream); transition: transform .3s var(--ease), opacity .3s; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-ctas .cta-studio { display: none; }

  .mobile-sheet {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(13,13,13,.97);
    display: none; flex-direction: column; justify-content: center;
    padding: 90px var(--gutter) 40px; gap: 14px;
  }
  .nav.open ~ .mobile-sheet, .mobile-sheet.open { display: flex; }
  .sheet-door {
    border: 1px solid var(--rule-strong); border-radius: 16px;
    padding: 22px; text-decoration: none;
  }
  .sheet-door .mono-tag { display: block; margin-bottom: 6px; }
  .sheet-door strong { font-size: 20px; }
  .sheet-door span.go { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
  .sheet-links { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 18px; }
  .sheet-links a { color: var(--muted); text-decoration: none; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }

  .hero-grid { grid-template-columns: 1fr; }
  .atlas-wrap img { width: min(70%, 300px); }
  .doors { grid-template-columns: 1fr; }
  .feature-grid, .packages { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .form-row.split { grid-template-columns: 1fr; }
  .fork-svg { opacity: .5; }
}
@media (min-width: 901px) { .mobile-sheet { display: none !important; } }

/* ───────── reduced motion — first-class still mode ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .base-line { transform: scaleX(1); transition: none; }
  .mark-svg path { stroke-dashoffset: 0 !important; transition: none; }
  .scroll-cue .line { animation: none; }
  .btn, .door, .pkg { transition: none; }
  #stage { display: none; }
}

/* ═══════════ v2 creative lift ═══════════ */

/* centered hero over the galaxy */
.hero-center { text-align: center; max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.hero-center .hero-eyebrow { justify-content: center; }
.hero-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-center .hero-ctas { justify-content: center; }
/* legibility vignette behind hero text — galaxy stays visible at the edges */
.hero-vignette {
  position: absolute; inset: -8% -20%;
  background: radial-gradient(58% 52% at 50% 46%, rgba(13,13,13,.62) 0%, rgba(13,13,13,.28) 55%, rgba(13,13,13,0) 100%);
  pointer-events: none; z-index: -1;
}
.hero-hint {
  margin-top: 30px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--dim);
}

/* Atlas — floating crew member, not a statue */
.atlas-float {
  position: absolute; right: clamp(8px, 6vw, 90px); bottom: 10vh;
  width: clamp(120px, 15vw, 210px); z-index: 2; pointer-events: none;
}
.atlas-float img { width: 100%; filter: grayscale(1) contrast(1.05); animation: atlas-bob 7s ease-in-out infinite; }
.atlas-float .atlas-label { position: static; display: block; text-align: right; margin-top: 6px; }
@keyframes atlas-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-18px) rotate(2.5deg); }
}
@media (max-width: 900px) { .atlas-float { display: none; } }

/* about-page Atlas — big, drifting */
.atlas-hero { display: flex; justify-content: center; }
.atlas-hero img { width: min(64%, 340px); filter: grayscale(1) contrast(1.05); animation: atlas-bob 8s ease-in-out infinite; }

/* door orbital canvases */
.door { overflow: hidden; }
.door-orbit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .5; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.door:hover .door-orbit { opacity: .95; }
.door > *:not(.door-orbit) { position: relative; z-index: 1; }

/* B&W photo bands — the personality layer */
.photo-band {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--rule);
  aspect-ratio: 21 / 9;
  margin-top: clamp(36px, 6vh, 64px);
}
.photo-band img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.9);
  transform: scale(1.12); will-change: transform;
}
.photo-band .pb-caption {
  position: absolute; left: 22px; bottom: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.photo-band.pb-tall { aspect-ratio: 16 / 9; }
.photo-duo { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(14px, 2vw, 24px); }
@media (max-width: 760px) { .photo-duo { grid-template-columns: 1fr; } }
.photo-duo .photo-band { margin-top: 0; aspect-ratio: 4 / 3; }
.photo-duo-wrap { margin-top: clamp(36px, 6vh, 64px); }

/* the REAL mark — // 04 */
.mark-real {
  width: clamp(150px, 20vw, 240px);
  opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.6s var(--ease);
  filter: drop-shadow(0 0 0 rgba(233,233,214,0));
}
.mark-real.in {
  opacity: 1; transform: none;
  filter: drop-shadow(0 0 14px rgba(233,233,214,.18));
}

/* people (about) */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 6vh, 60px); max-width: 880px; }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }
.person {
  border: 1px solid var(--rule); border-radius: 20px; overflow: hidden;
  background: rgba(23,23,23,.6);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.person:hover { border-color: var(--rule-strong); }
.person .headshot {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1c1c1c, #101010);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.person .headshot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.person .headshot .initials {
  font-family: var(--serif); font-size: clamp(48px, 6vw, 72px); font-style: italic; color: var(--slate);
}
.person .headshot .drop-note {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.person .p-body { padding: 22px 26px 26px; }
.person .p-body h3 { font-size: 20px; }
.person .p-body .role { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); margin: 6px 0 12px; }
.person .p-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* roadmap chips (about) */
.roadmap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.roadmap .r-stop { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--rule-strong); border-radius: 100px; color: var(--cream); }
.roadmap .r-arrow { color: var(--dim); }
.roadmap .r-stop.now { background: var(--cream); color: var(--black); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .atlas-float img, .atlas-hero img { animation: none; }
  .photo-band img { transform: none; }
  .mark-real { opacity: 1; transform: none; transition: none; }
  .door-orbit { display: none; }
}

/* Leclerc-pattern: giant stat callouts + pull-quotes */
.big-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 7vh, 72px); }
@media (max-width: 760px) { .big-stats { grid-template-columns: 1fr; } }
.bstat { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.bstat .n {
  font-size: clamp(56px, 7vw, 110px); font-weight: 800; letter-spacing: -0.04em;
  line-height: .95; color: var(--cream);
}
.bstat .n em { font-family: var(--serif); font-weight: 500; font-style: italic; }
.bstat .l { margin-top: 10px; font-size: 13.5px; color: var(--muted); max-width: 24ch; }
.pull-quote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--cream); text-align: center; max-width: 26ch; margin: 0 auto;
}
.pull-quote .q-attr { display: block; margin-top: 22px; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.act-quote { padding-top: clamp(60px, 9vh, 110px); padding-bottom: clamp(60px, 9vh, 110px); }

/* hero eyebrow — readable over the galaxy */
.hero-eyebrow .status, .hero-eyebrow .flavor {
  background: rgba(13,13,13,.74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 100px; padding: 6px 14px;
}
.hero-eyebrow .status { color: var(--muted); border: 1px solid var(--rule-strong); }
.hero-eyebrow .flavor { border: 1px solid var(--rule); }

/* ═══════════ The Voyage — scroll-scrub system ═══════════ */

/* A — hero pin: the launch plays under your thumb */
.pin-track { position: relative; height: 300vh; }
.pin-track .hero { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
.morph-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 110px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--dim); opacity: 0; transition: opacity .6s var(--ease);
}
.morph-hint.on { opacity: 1; }

/* B — kinetic type transit */
.kinetic-track { position: relative; height: 240vh; }
.kinetic-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.kinetic-band {
  white-space: nowrap; will-change: transform;
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(110px, 22vw, 320px);
  color: var(--cream);
}
.kinetic-band em { font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -0.01em; }
.kinetic-band .ghost { -webkit-text-stroke: 1.5px var(--rule-strong); color: transparent; }
.kinetic-sub {
  position: absolute; left: var(--gutter); bottom: 12vh;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}

/* C — diagonal studio entrance */
#act-studio .act-inner { will-change: transform; }

/* D — mark approach scrub */
.mark-real.scrub { opacity: 1; transition: none; transform-origin: center; }

/* E — fork doors slide in on the `translate` axis (composes with magnetic transform) */
.door { will-change: translate, transform; }

/* reduced motion / mobile degradation for the voyage */
@media (prefers-reduced-motion: reduce) {
  .pin-track, .kinetic-track { height: auto; }
  .pin-track .hero { position: relative; height: auto; min-height: 100svh; }
  .kinetic-stage { position: relative; height: auto; padding: 80px 0; }
  .kinetic-band { font-size: clamp(40px, 8vw, 90px); white-space: normal; }
  #act-studio .act-inner, .door { translate: none !important; transform: none !important; }
  .mark-real.scrub { opacity: 1 !important; scale: 1 !important; }
}
@media (max-width: 900px) {
  .pin-track { height: 220vh; }
  .kinetic-track { height: 180vh; }
}

/* ═══════════ FULL CANVAS — the voyage as one giant plane ═══════════ */
#voyage-spacer { display: none; }
body.canvas-on #voyage-spacer { display: block; }
body.canvas-on main {
  position: fixed; inset: 0; z-index: 1;
  will-change: transform;
}
body.canvas-on [data-cell] {
  position: absolute; top: 0; left: 0;
  width: 100vw; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
body.canvas-on .pin-track { height: auto; }
body.canvas-on .pin-track .hero { position: relative; height: 100svh; }
body.canvas-on .kinetic-track { height: auto; width: max-content; min-height: 0; justify-content: flex-start; }
body.canvas-on .kinetic-stage { position: static; height: auto; overflow: visible; }
body.canvas-on .kinetic-band { transform: none !important; }
body.canvas-on .kinetic-sub { position: static; margin-top: 18px; }
body.canvas-on .act-quote[data-cell] { min-height: 60svh; }
body.canvas-on footer[data-cell] { justify-content: flex-end; background: transparent; }
body.canvas-on #act-studio .act-inner { translate: none !important; }

/* ── canvas fit + polish (round 4) ── */
body.canvas-on .kinetic-band { font-size: clamp(90px, 15vw, 220px); }
/* dense cells compress to one viewport — each place is one screen */
body.canvas-on #act-platform, body.canvas-on #act-studio { padding-top: 12vh; padding-bottom: 6vh; }
body.canvas-on #act-platform .act-label, body.canvas-on #act-studio .act-label { margin-bottom: 20px; }
body.canvas-on #act-platform .feature-grid { margin-top: 26px; }
body.canvas-on #act-platform .big-stats { margin-top: 26px; gap: 24px; }
body.canvas-on #act-platform .bstat .n { font-size: clamp(40px, 4.6vw, 72px); }
body.canvas-on #act-platform .photo-band { display: none; }   /* personality lives on the world pages; the hub cell must fit one screen */
body.canvas-on #act-platform .hero-ctas { margin-top: 28px !important; }
body.canvas-on #act-studio .packages { margin-top: 24px; }
body.canvas-on #act-studio .pkg { padding: 20px 22px; }
body.canvas-on #act-studio .proof-strip { margin-top: 24px; padding: 18px 0; }
body.canvas-on #act-studio .hero-ctas { margin-top: 26px !important; }
body.canvas-on footer[data-cell] { min-height: 0; padding-top: 40px; }
/* founders photos: fade in when the pixels are actually ready */
.person .headshot img { opacity: 0; transition: opacity .9s var(--ease); }
.person .headshot img.ld { opacity: 1; }
/* hero content launches into the galaxy as you scroll */
.hero-center, .atlas-float { will-change: transform, filter, opacity; }

/* ── final pass: motto lockup · boarding/footer composition · word-reveal masks ── */
.kinetic-band .kl { display: inline; }
body.canvas-on .kinetic-band { font-size: clamp(80px, 12vw, 190px); line-height: 0.98; }
body.canvas-on .kinetic-band .kl { display: block; white-space: nowrap; }
body.canvas-on .kinetic-band .k2 { margin-left: 1.1em; }
/* The Turnstile widget grew the form taller than the footer cell (fixed at
   448vh) was calibrated for, so the panel collided with the footer. Reclaim
   vertical space above the form in canvas mode so it clears with breathing room. */
body.canvas-on #act-beta { min-height: 0; padding-bottom: 0; padding-top: clamp(24px, 3vh, 52px); }
body.canvas-on #act-beta .lede { margin-top: 14px; }
body.canvas-on #act-beta .form-panel { margin-top: 20px; }
/* word-reveal masks (GSAP) */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wrd { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .wrd { transform: none !important; } }

/* ═══════════ mobile pass v2 — no pins, no voids, entrances that LAND ═══════════ */
@media (max-width: 900px) {
  /* ignition pin v2 — compact: the morph completes ON SCREEN, no dead zone */
  .pin-track { height: 165vh; }
  .pin-track .hero { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
  .hero { padding: 110px var(--gutter) 64px; }
  .scroll-cue { bottom: 20px; }

  .kinetic-track { height: auto; }
  .kinetic-stage { position: relative; height: auto; overflow: hidden; padding: 72px 0; display: block; }
  .kinetic-band { font-size: 16vw; line-height: 1.04; transform: none !important; white-space: normal; }
  .kinetic-band .kl { display: block; white-space: nowrap; will-change: transform; }
  .kinetic-band .k2 { margin-left: 12vw; }
  .kinetic-sub { position: static; margin: 20px 0 0 var(--gutter); }

  /* rhythm */
  .act { padding: 56px var(--gutter); }
  .world-hero { padding: 120px var(--gutter) 48px; min-height: 72svh; }
  .hero-sub { margin: 20px 0 28px; }
  .act-label { margin-bottom: 22px; }
  .feature-grid, .packages, .big-stats { margin-top: 26px; gap: 18px; }
  .people { margin-top: 26px; }
  .proof-strip { margin-top: 26px; padding: 18px 0; gap: 18px; }
  .foot-grid { gap: 26px; }
  footer { padding: 44px var(--gutter) 28px; }
  .form-panel { margin-top: 26px; }
  .roadmap { margin-top: 22px; }
  .photo-band { margin-top: 26px; }
  .bstat .n { font-size: clamp(44px, 13vw, 72px); }

  /* entrances — from-states apply ONLY before .in lands (the v1 bug: specificity ate the reset) */
  .feature.reveal:not(.in):nth-of-type(odd),
  .pkg.reveal:not(.in):nth-of-type(odd),
  .bstat.reveal:not(.in):nth-of-type(odd) { transform: translate(-34px, 18px); }
  .feature.reveal:not(.in):nth-of-type(even),
  .pkg.reveal:not(.in):nth-of-type(even),
  .bstat.reveal:not(.in):nth-of-type(even) { transform: translate(34px, 18px); }
  .door.reveal:not(.in) { transform: translateX(-36px); }
  .door-studio.reveal:not(.in) { transform: translateX(36px); }
  .photo-band.reveal:not(.in) { transform: translateY(30px) scale(0.965); }
  .person.reveal:not(.in) { transform: translateY(34px); }
  .reveal.in { transform: none; }

  .h-act, .pull-quote { will-change: transform; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .reveal, .reveal:not(.in) { transform: none !important; }
  .h-act, .pull-quote, .kinetic-band .kl { transform: none !important; }
}

/* ── mobile immersion layer ── */
.chapter-hud {
  position: fixed; left: var(--gutter); bottom: 16px; z-index: 30;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--cream); text-transform: uppercase;
  background: rgba(13,13,13,.72); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8px 14px; border-radius: 100px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none; max-width: 78vw; white-space: nowrap; overflow: hidden;
}
.chapter-hud.on { opacity: 1; transform: none; }
.ignition-cap {
  position: absolute; left: 0; right: 0; bottom: 96px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--cream);
  opacity: 0; pointer-events: none;
}
.motion-chip {
  display: none; align-items: center; gap: 8px;
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px;
  background: rgba(13,13,13,.72); border: 1px solid var(--rule-strong);
  border-radius: 100px; padding: 8px 16px; color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; z-index: 5;
}
@media (min-width: 901px) { .ignition-cap, .motion-chip, .chapter-hud { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .chapter-hud, .ignition-cap, .motion-chip { display: none !important; } }

/* ═══════════ restored: boot loader ═══════════ */
#lp-loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--space);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--gutter);
}
#lp-loader.lp-loader-done { opacity: 0; transition: opacity 700ms ease; }
#lp-loader.lp-loader-hidden { visibility: hidden; pointer-events: none; }
.lp-loader-mark { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease; margin-bottom: 40px; }
.lp-loader-mark.in { opacity: 1; transform: translateY(0); }
.lp-loader-mark img { display: block; height: 48px; width: auto; }
.lp-boot-rows { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.lp-boot-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); opacity: 0; transition: opacity 300ms ease; }
.lp-boot-row.in { opacity: 1; }
.lp-boot-ok { color: var(--cream); letter-spacing: 0.2em; }
.lp-boot-bar-wrap { width: 100%; max-width: 480px; height: 1px; background: var(--rule); margin-bottom: 20px; position: relative; overflow: hidden; }
.lp-boot-bar { position: absolute; inset: 0 100% 0 0; background: var(--cream); transition: right 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-boot-bar.full { right: 0; }
.lp-boot-foot { width: 100%; max-width: 480px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); opacity: 0; transition: opacity 300ms ease; }
.lp-boot-foot.in { opacity: 1; }
#lp-boot-counter { color: var(--cream); }

/* ═══════════ restored: custom cursor ═══════════ */
@media (pointer: fine) { body { cursor: none; } }
@media (pointer: coarse) { #lp-cursor { display: none; } }
#lp-cursor {
  position: fixed; top: 0; left: 0; width: 32px; height: 32px;
  margin: -16px 0 0 -16px; z-index: 190; pointer-events: none;
  mix-blend-mode: difference;
}
#lp-cursor::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--white); transform: translateX(-50%); }
#lp-cursor::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--white); transform: translateY(-50%); }
.lp-ring { position: absolute; inset: 6px; border: 1px solid var(--white); border-radius: 50%; transition: inset 0.25s ease, opacity 0.25s ease; }
#lp-cursor.hot .lp-ring { inset: 0; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { #lp-cursor { display: none; } body { cursor: auto; } }

/* ═══════════ restored: category request ═══════════ */
.cat-request {
  border: 1px solid var(--rule-strong); border-radius: 20px;
  padding: clamp(24px, 3vw, 40px); margin-top: clamp(30px, 5vh, 48px);
  background: rgba(23,23,23,.55);
}
.cat-request h3 { font-size: 20px; margin-bottom: 8px; }
.cat-request p { margin: 0 0 18px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.cat-request form { display: flex; gap: 12px; flex-wrap: wrap; }
.cat-request input[type="text"] { flex: 1 1 260px; }
.req-msg { font-size: 13px; margin-top: 12px; color: var(--dim); }
.req-msg.ok { color: var(--cream); }
.req-msg.err { color: var(--gray); }

/* ═══════════ REPACK OVERRIDES (shipped 2026-07-23) ═══════════
   QC fixes from David's review — candidates to merge to live site.css. */

/* Longer outcome-led headline: two lines, slightly smaller, never four */
.headline-long { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.1; }
.headline-long em { padding-right: .04em; }

/* Hero sub must pop off the background (old-site problem too) */
.hero-sub-bright { color: #cfcabc; }

/* Atlas holds the corner UNDER the copy, never over it */
.hero-center { position: relative; z-index: 3; }
#act-arrival .atlas-float { z-index: -1; }

/* Give the scroll cue breathing room from hero content */
.scroll-cue { bottom: 6px; }

/* Atlas: hold the corner, clear of the text column */
.atlas-float { margin-right: -190px; bottom: 5vh; width: clamp(105px, 12vw, 175px); }

/* Italic serif descenders were clipping after reveal (the g in "goal") */
.door .door-id { line-height: 1.2; padding-bottom: .08em; }
.door-platform .door-id { font-size: clamp(26px, 3vw, 40px); }
.h-act, .h-sub { padding-bottom: .05em; }
.headline em, .h-act em, .h-sub em, .door-id em { line-height: inherit; }
.kinetic-band .kl em { padding-right: .05em; }

/* Balance multi-line headings so no orphan words */
.h-act, .h-sub, .door-id { text-wrap: balance; }
.atlas-float .atlas-label { white-space: nowrap; }

/* Optical baseline fix: Newsreader italic x-height is smaller than Inter's,
   so side-by-side ems float high and read small. Scale + nudge to align. */
.door .door-id em { font-size: 1.08em; }
.headline-long em { font-size: 1.04em; }

/* Word-mask fix (flight.js splitWords): the original .wm was inline-block +
   overflow:hidden + vertical-align:bottom — bottom-aligning boxes of unequal
   height, which broke baselines across mixed fonts AND clipped descenders.
   Inline + clip-path keeps the slide-up reveal masked while words sit on the
   true shared baseline and descenders render fully. */
.wm { display: inline; overflow: visible; vertical-align: baseline;
      clip-path: inset(-0.22em -0.08em -0.34em -0.08em); }

/* ─── Mobile hero pass (2026-07-23, David's iPhone review) ─── */
/* Clean rag: balance headline lines — no orphan "need." */
.headline-long { text-wrap: balance; }

@media (max-width: 900px) {
  /* The cue and the motion chip lived where our CTAs now land */
  #act-arrival .scroll-cue { display: none; }          /* mobile users scroll; it collided with CTAs */
  .motion-chip { bottom: 10px; padding: 6px 12px; }    /* tucked to the true bottom edge */
  .hero { padding-bottom: 88px; }                      /* CTA block clears the chip */
  .hero-ctas { gap: 12px; }
}

@media (max-width: 640px) {
  /* Declutter: one pill, tighter rhythm */
  .hero-eyebrow { gap: 10px; margin-bottom: 20px; }
  .hero-eyebrow .flavor { display: none; }             /* Providence lives in the footer */
  .hero-eyebrow .status { font-size: 9.5px; letter-spacing: .15em; padding: 5px 12px; }
  .headline-long { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.12; }
  .hero-sub { margin: 18px auto 30px; }
}

/* Motion chip: two-line invitation, pinned to the hero's true bottom */
.motion-chip { flex-direction: column; gap: 3px; bottom: 14px; padding: 9px 18px 8px; }
.motion-chip .mc-line { display: inline-flex; align-items: center; gap: 8px; }
.motion-chip .mc-cap { font-size: 8.5px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
@media (max-width: 900px) {
  .hero { padding-bottom: 128px; }   /* CTA block fully clears the two-line chip */
}

/* Chip lives in normal flow under the CTAs — overlap impossible by construction */
.motion-chip { position: static; left: auto; bottom: auto; transform: none; margin: 10px auto 0; flex-basis: 100%; max-width: max-content; justify-content: center; }