/* Cavelux — the one page. Loaded after the tokens, the visual master and the launch CSS.
   The stage is the only place with a grid: everything outside it is native black, and the
   dossier is drawn with corner marks, captions, stamps and plates only. Accents are the
   stage's planet hues (cvl-tokens.css), as filled cells, never as text or lines. */
:root {
  --v3-hdr-h: calc(var(--cvl-master-nav-h) + var(--cvl-master-rule));  /* JS writes the measured value */
  --v3-band-h: 8rem;
  --v3-col-doc: minmax(26rem, min(42%, 56rem));   /* the dossier column: a floor and a cap */
  --v3-cell: 3px;                          /* one pixel cell of the dossier furniture */
}

[data-accent="lifepunch"] { --v3-accent: var(--cvl-planet-lifepunch); }
[data-accent="cleverchameleon"] { --v3-accent: var(--cvl-planet-cleverchameleon); }
[data-accent="kinetix"] { --v3-accent: var(--cvl-planet-kinetix); }
/* Only the section in view carries its accent, so a tall screen never shows three at once. */
html.v3-js .v3-frame:not(.is-current), html.v3-js .v3-frame:not(.is-current) [data-accent],
html.v3-js .v3-frame:not(.is-current) .v3-brief-btn, html.v3-js .v3-frame:not(.is-current) .v3-picks button { --v3-accent: initial; }

/* ---------- native black: no master grid behind the page (the stage keeps its own) ---------- */
body[data-page="launch"].v3 { background-color: var(--cvl-bg); background-image: none; }

/* ---------- icons: the inline sprite, whole-multiple sizes only ---------- */
.cvl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.v3-icon { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; color: currentColor; vertical-align: -3px; shape-rendering: crispEdges; }
.v3-icon--md { width: 32px; height: 32px; }
.v3-icon--title { width: 32px; height: 32px; margin-right: var(--cvl-space-4); vertical-align: -4px; }
/* tones reach the sprite's cells by inheritance (selectors stop at the <use> boundary) */
.v3-icon, .cvl-sprite { --v3-icon-dim: var(--cvl-muted); --v3-icon-hot: var(--cvl-lime); }

/* ---------- layout: lockup, stage column and frames are grid siblings, so the stage follows
   the lockup in reading and tab order; the stage column is pinned beside the frames ---------- */
.v3-main { display: block; }
.v3-layout {
  position: relative;
  display: grid;
  /* the dossier column keeps a floor (its files never run under the stage) and a cap (rows never
     spread across a 2560 screen); the stage takes the rest */
  grid-template-columns: var(--v3-col-doc) minmax(0, 1fr);
  align-items: start;
}
/* the site's one header lines up with the frames on the full-bleed page */
html:not(.v3-static) body[data-page="launch"].v3 .nav-inner { max-width: none; }
.v3-layout > * { grid-column: 1; min-width: 0; }
.v3-layout > .v3-stage-col {
  grid-column: 2;
  grid-row: 1 / span 8;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  border-left: var(--cvl-master-rule) solid var(--cvl-border-control);   /* the split */
}
.v3-stage-col > .launch-stage { height: 100%; }
.v3-stage-slot, .v3-band-host { display: none; }

/* §0 entry: the plain lockup, centred in the dossier column, one screen tall */
.v3-entry {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: var(--cvl-space-8) max(var(--cvl-launch-gutter), var(--cvl-safe-area-left));
}
body[data-page="launch"][data-launch-state="entry"] .v3-entry .launch-entry {
  position: relative;
  inset: auto;
  grid-area: auto;
  display: grid;
  width: 100%;
  padding: var(--cvl-space-4);   /* room for Explore's focus ring inside the entry's clip */
  place-items: center;
}

/* ---------- the sun: a quarter of the stage's short side on desktop, a third on a phone, so
   the system has a sky. Only its placed size changes; the art is the mark's own. ---------- */
body[data-page="launch"].v3 .launch-stage .launch-core { width: 25cqmin; }

/* Keyboard focus lands clear of the fixed header (and, on a phone, the band). Margins on the
   controls themselves, not root scroll-padding, which the focusable stage in a sticky band
   turns into focus jumps. */
.v3-frame :is(a, button, [tabindex]) { scroll-margin-top: calc(var(--v3-hdr-h) + var(--cvl-space-4)); scroll-margin-bottom: var(--cvl-space-4); }

/* ---------- the timeline rule on the split (desktop); it fades in once the entry is left ---------- */
.v3-timeline { position: absolute; top: 0; bottom: 0; left: calc(var(--cvl-master-rule) * -1); z-index: 6; width: 0; pointer-events: none; transition: opacity var(--cvl-motion-fast) linear; }
body[data-v3-section="entry"] .v3-timeline { opacity: 0; }
.v3-timeline i { position: absolute; left: 0; width: calc(var(--v3-cell) * 3); height: var(--v3-cell); background: var(--cvl-border-control); }
.v3-timeline i.is-major { width: calc(var(--v3-cell) * 5); background: var(--cvl-ink-dim); }
.v3-timeline-now { position: absolute; top: 0; left: calc(var(--v3-cell) * -1); width: calc(var(--v3-cell) * 3); height: calc(var(--v3-cell) * 3); background: var(--cvl-lime); transform: translateY(var(--v3-now, 0px)); }

/* ---------- the dossier frame: black, held by its four corner marks ---------- */
.v3-frame {
  position: relative;
  margin: 0 max(var(--cvl-launch-gutter), var(--cvl-safe-area-left)) var(--cvl-space-8);
  padding: var(--cvl-space-8) var(--cvl-space-7);
  background: var(--cvl-bg);
  scroll-margin-top: calc(var(--v3-hdr-h) + var(--cvl-space-4));
}
.v3-sec-system { margin-top: var(--cvl-space-8); }
.v3-sec-contact { margin-bottom: var(--cvl-space-9); }
@media (min-width: 901px) {
  .v3-frame { min-height: min(76svh, 40rem); }
  .v3-sec-contact { min-height: 0; }
}
@media (min-width: 901px) and (max-width: 1299px) {
  .v3-frame { margin-inline: var(--cvl-space-5); padding-inline: var(--cvl-space-6); }
}
/* a narrow desktop shares the width evenly, so the copy keeps a reading measure */
@media (min-width: 901px) and (max-width: 1199px) {
  :root { --v3-col-doc: minmax(0, 1fr); }
}
/* a narrow frame drops its redaction bars, so the caption stays one line */
.v3-frame { container-type: inline-size; }
@container (max-width: 30rem) { .v3-bars { display: none; } }
.v3-corners i { position: absolute; width: calc(var(--v3-cell) * 4); height: calc(var(--v3-cell) * 4); }
.v3-corners i::before, .v3-corners i::after { position: absolute; top: 0; left: 0; background: var(--v3-accent, var(--cvl-border-control)); content: ""; }
.v3-corners i::before { width: 100%; height: var(--v3-cell); }
.v3-corners i::after { width: var(--v3-cell); height: 100%; }
.v3-corners i:nth-child(1) { top: 0; left: 0; }
.v3-corners i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.v3-corners i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }
.v3-corners i:nth-child(4) { right: 0; bottom: 0; transform: scale(-1, -1); }

.v3-caption {
  display: flex;
  align-items: center;
  gap: var(--cvl-space-3);
  margin: 0 0 var(--cvl-space-5);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}
.v3-caption--sub { margin: var(--cvl-space-6) 0 var(--cvl-space-3); }
.v3-tick { flex: 0 0 auto; width: calc(var(--v3-cell) * 3); height: calc(var(--v3-cell) * 3); background: var(--v3-accent, var(--cvl-muted)); }
.v3-bars { display: inline-flex; gap: var(--v3-cell); margin-left: auto; }   /* redaction-bar texture: ink, never over words */
.v3-bars i { display: block; height: calc(var(--v3-cell) * 2); background: var(--cvl-border-control); }
.v3-bars i:nth-child(1) { width: 28px; }
.v3-bars i:nth-child(2) { width: 9px; }
.v3-bars i:nth-child(3) { width: 46px; }

.v3-title {
  max-width: 22ch;
  margin: 0 0 var(--cvl-space-4);
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
  font-size: clamp(1.6rem, 2.35vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-wrap: balance;
}
/* Headings are programmatic focus targets (Explore, nav): they draw no ring. */
.v3-title:focus, .v3-title:focus-visible { outline: none; }
/* a title's icon hangs in the margin, so every line of the title starts on one edge */
@media (min-width: 431px) {
  .v3-title:has(.v3-icon--title) { padding-left: calc(32px + var(--cvl-space-4)); text-indent: calc(-32px - var(--cvl-space-4)); }
}
.v3-lede {
  max-width: 38rem;
  margin: 0;
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-mono);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: var(--cvl-leading-body);
  text-wrap: pretty;
}
.v3-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cvl-space-2);
  min-height: var(--cvl-master-control-h);
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p875rem);
  letter-spacing: var(--cvl-tracking-nav);
  text-decoration: underline;
  text-decoration-color: var(--cvl-border-control);
  text-transform: uppercase;
  text-underline-offset: 0.3em;
}
.v3-link:hover, .v3-link:focus-visible { color: var(--cvl-lime); text-decoration-color: currentColor; }
.v3-link:focus-visible, .v3-brief-btn:focus-visible, .v3-picks button:focus-visible, .v3-entry-link:focus-visible { outline: calc(var(--cvl-master-rule) * 2) solid var(--cvl-lime); outline-offset: var(--cvl-space-2); }
.v3-picks button:focus-visible { position: relative; z-index: 1; }   /* the ring sits above its neighbours */
.v3-entry-link:focus-visible, body.v3-band .launch-motion-toggle:focus-visible { outline-offset: calc(var(--cvl-master-rule) * -4); }   /* inset inside the band's edges */

/* stamps are plates */
.v3-stamp {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  margin: 0 0 var(--cvl-space-4);
  padding: 0 var(--cvl-space-3);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-label);
  text-transform: uppercase;
}
.v3-stamp--live { background: var(--cvl-lime); color: var(--cvl-bg); }
.v3-stamp--dev { border: var(--cvl-master-rule) solid var(--cvl-border-control); color: var(--cvl-ink-dim); }

/* ---------- §1 the system ---------- */
.v3-diagram { display: none; margin: var(--cvl-space-6) 0 0; }
.v3-diagram svg { display: block; width: 100%; max-width: 30rem; height: auto; }
.v3-dg-orbit { fill: none; stroke: var(--cvl-border-control); stroke-width: 1; }
.v3-dg-sun { fill: var(--cvl-ink); }
.v3-dg-planet { fill: var(--cvl-ink-dim); }
.v3-dg-legend { margin: var(--cvl-space-3) 0 0; text-transform: none; letter-spacing: 0.02em; }
.v3-brief-index { display: grid; margin: var(--cvl-space-6) 0 0; padding: 0; border-top: var(--cvl-master-rule) solid var(--cvl-border); list-style: none; }
.v3-brief-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cvl-space-4);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--cvl-space-3) 0;
  border: 0;
  border-bottom: var(--cvl-master-rule) solid var(--cvl-border);
  background: transparent;
  color: var(--cvl-ink);
  cursor: pointer;
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-1rem);
  font-weight: 500;
  text-align: left;
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.v3-brief-btn-name { display: inline-flex; align-items: center; gap: var(--cvl-space-3); letter-spacing: var(--cvl-tracking-nav); }
.v3-brief-btn-status { color: var(--cvl-ink-dim); font-size: var(--cvl-fs-0p875rem); white-space: nowrap; }
.v3-swatch { width: calc(var(--v3-cell) * 3); height: calc(var(--v3-cell) * 3); background: var(--cvl-muted); }
.v3-brief-btn[aria-expanded="true"] .v3-swatch { background: var(--v3-accent, var(--cvl-ink)); }
.v3-brief-btn[data-brief-open="lifepunch"] { --v3-accent: var(--cvl-planet-lifepunch); }
.v3-brief-btn[data-brief-open="cleverchameleon"] { --v3-accent: var(--cvl-planet-cleverchameleon); }
.v3-brief-btn[data-brief-open="kinetix"] { --v3-accent: var(--cvl-planet-kinetix); }
.v3-brief-btn:hover .v3-brief-btn-status, .v3-brief-btn[aria-expanded="true"] .v3-brief-btn-status { color: var(--cvl-ink); }
.v3-brief-empty {
  display: flex;
  align-items: center;
  gap: var(--cvl-space-4);
  margin-top: var(--cvl-space-5);
  padding: var(--cvl-space-5) var(--cvl-space-6);
  border: var(--cvl-master-rule) dashed var(--cvl-border-control);
}
.v3-brief-empty .v3-caption { margin: 0; }
.v3-brief-empty[hidden] { display: none; }
.v3-icon--ticks { width: 48px; height: 48px; }
.v3-brief {
  position: relative;
  margin-top: var(--cvl-space-5);
  padding: var(--cvl-space-6);
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-bg);
}
.v3-brief .v3-caption { gap: var(--cvl-space-3); }
.v3-brief-line { max-width: 34rem; margin: 0 0 var(--cvl-space-3); color: var(--cvl-ink); font-family: var(--cvl-mono); font-size: var(--cvl-fs-1rem); line-height: var(--cvl-leading-body); text-wrap: pretty; }

/* ---------- §2 the numbers ---------- */
.v3-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cvl-master-rule); margin: var(--cvl-space-6) 0 0; border: var(--cvl-master-rule) solid var(--cvl-border); background: var(--cvl-border); }
.v3-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--cvl-space-3); padding: var(--cvl-space-5); background: var(--cvl-bg); }
.v3-stat dd { margin: 0; color: var(--cvl-ink); font-family: var(--cvl-mono); font-size: clamp(2.5rem, 3.6vw, 4rem); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; }
.v3-stat dt { display: flex; align-items: center; gap: var(--cvl-space-3); color: var(--cvl-ink-dim); font-family: var(--cvl-mono); font-size: var(--cvl-fs-0p75rem); font-weight: 500; letter-spacing: var(--cvl-tracking-label); text-transform: uppercase; }
.v3-source { max-width: 40rem; margin: var(--cvl-space-4) 0 0; color: var(--cvl-muted); font-family: var(--cvl-mono); font-size: var(--cvl-fs-0p75rem); line-height: 1.6; text-wrap: pretty; }

/* ---------- §3 how we build: pick a build, the route lights up station by station ---------- */
.v3-picks { display: flex; flex-wrap: wrap; gap: var(--cvl-space-2); }
.v3-picks button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: var(--cvl-master-control-h);
  min-height: 3.25rem;
  padding: var(--cvl-space-2) var(--cvl-space-4);
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-bg);
  color: var(--cvl-ink-dim);
  cursor: pointer;
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p8125rem);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-nav);
  text-align: left;
  text-transform: uppercase;
}
.v3-picks button small { color: var(--cvl-muted); font-size: var(--cvl-fs-0p75rem); letter-spacing: 0; text-transform: none; }
.v3-picks button[aria-checked="true"] { border-color: var(--cvl-ink); box-shadow: inset calc(var(--v3-cell) * 2) 0 0 var(--v3-accent, var(--cvl-ink)); color: var(--cvl-ink); }
.v3-route { display: grid; margin: var(--cvl-space-6) 0 0; padding: 0; list-style: none; }
.v3-station {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--cvl-space-4);
  min-height: 3.5rem;
  padding: var(--cvl-space-3) 0 var(--cvl-space-3) var(--cvl-space-5);
  border-top: var(--cvl-master-rule) solid var(--cvl-border);
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
  transition: color 160ms linear;
}
.v3-station:last-child { border-bottom: var(--cvl-master-rule) solid var(--cvl-border); }
.v3-station-name { font-size: var(--cvl-fs-0p875rem); font-weight: 500; letter-spacing: var(--cvl-tracking-nav); text-transform: uppercase; }
.v3-station-line { color: var(--cvl-ink-dim); font-size: var(--cvl-fs-0p875rem); line-height: 1.5; text-wrap: pretty; }
/* After a pick the route resets to dim and lights up in order (the static layout lights all at once). */
.v3-route.is-running .v3-station { color: var(--cvl-muted); }
.v3-route.is-running .v3-station .v3-station-line { color: var(--cvl-muted); }
.v3-route .v3-station.is-lit { color: var(--cvl-ink); }
/* A lit station carries one accent cell beside its icon: a filled cell, never a bar. */
.v3-route .v3-station.is-lit::before { position: absolute; top: calc(var(--cvl-space-3) + 16px - var(--v3-cell) * 1.5); left: 0; width: calc(var(--v3-cell) * 3); height: calc(var(--v3-cell) * 3); background: var(--v3-accent, var(--cvl-ink)); content: ""; }
.v3-route .v3-station.is-lit .v3-station-line { color: var(--cvl-ink-dim); }
.v3-shipped { position: relative; margin-top: var(--cvl-space-6); padding: var(--cvl-space-5) var(--cvl-space-6); border: var(--cvl-master-rule) solid var(--cvl-border-control); background: var(--cvl-bg); }
.v3-shipped[hidden] { display: none; }
.v3-shipped .v3-caption--sub { margin-top: 0; }
.v3-shipped-name { margin: 0 0 var(--cvl-space-3); color: var(--cvl-ink); font-family: var(--cvl-mono); font-size: var(--cvl-fs-1p15rem); font-weight: 500; letter-spacing: var(--cvl-tracking-nav); }

/* ---------- §4 why ---------- */
.v3-mission { max-width: 40rem; margin: var(--cvl-space-5) 0 0; color: var(--cvl-ink); font-family: var(--cvl-mono); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: var(--cvl-leading-body); text-wrap: pretty; }
.v3-principles { display: grid; gap: var(--cvl-space-3); margin: var(--cvl-space-6) 0 0; padding: 0; list-style: none; }
.v3-plate {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cvl-space-4);
  min-height: 4rem;
  padding: var(--cvl-space-3) var(--cvl-space-5);
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  background: var(--cvl-bg);
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-1rem);
  line-height: 1.4;
}
.v3-plate-n { color: var(--cvl-ink-dim); font-size: var(--cvl-fs-0p75rem); letter-spacing: var(--cvl-tracking-label); }
.v3-plate > span:last-child { text-wrap: balance; }
.v3-links { display: flex; flex-wrap: wrap; gap: var(--cvl-space-2) var(--cvl-space-7); margin: var(--cvl-space-6) 0 0; }

/* ---------- §5 proof: the shared Showcase cards as compact file cards, one column ---------- */
.v3-sec-proof .showcase-card-grid.v3-cards { grid-template-columns: minmax(0, 1fr); gap: var(--cvl-space-4); margin-top: var(--cvl-space-6); }
.v3-sec-proof .showcase-card { position: relative; display: block; min-height: 0; padding: var(--cvl-space-8) var(--cvl-space-6) var(--cvl-space-5); border: var(--cvl-master-rule) solid var(--cvl-border-control); background: var(--cvl-bg); }
.v3-sec-proof .showcase-card-identity { display: flex; align-items: center; gap: var(--cvl-space-4); margin: 0 0 var(--cvl-space-4); }
.v3-sec-proof .showcase-product-mark { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.v3-sec-proof .showcase-card-wordmark { margin: 0; line-height: 0; }
.v3-sec-proof .showcase-card-wordmark img { display: block; width: auto; max-width: 100%; height: 22px; object-fit: contain; object-position: left center; }
.v3-sec-proof .showcase-card-body { gap: var(--cvl-space-3); height: auto; }
.v3-sec-proof .showcase-card-body p { text-wrap: pretty; }
.v3-sec-proof .showcase-card-number { left: var(--cvl-space-6); }
/* the card statuses are stamps: beat BASE's `.showcase-card p` (ink-dim, 0.95rem) so the live plate
   keeps black text and every stamp keeps the stamp size */
.v3-sec-proof .showcase-card .v3-stamp { margin: 0; font-size: var(--cvl-fs-0p75rem); line-height: normal; }
.v3-sec-proof .showcase-card .v3-stamp--live { color: var(--cvl-bg); }
.v3-brief-index, .v3-brief, .v3-shipped { max-width: 40rem; }

/* ---------- §6 contact ---------- */
.v3-actions { margin: var(--cvl-space-6) 0 0; }
.v3-mail { gap: var(--cvl-space-3); text-transform: none; letter-spacing: 0.02em; }

/* ---------- the phone band's way back to the entry ---------- */
.v3-entry-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cvl-space-2);
  min-width: var(--cvl-master-control-h);
  min-height: var(--cvl-master-control-h);
  padding: 0 var(--cvl-space-3);
  background: var(--cvl-bg);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-label);
  text-transform: uppercase;
}
.v3-entry-link:hover { color: var(--cvl-lime); }
body:not(.v3-band) .v3-entry-link { visibility: hidden; }

/* ---------- reveal (motion only; the static layout shows everything at once) ---------- */
html.v3-js:not(.v3-static) .v3-frame { opacity: 0.001; transform: translateY(14px); transition: opacity 520ms var(--cvl-launch-portal-ease), transform 520ms var(--cvl-launch-portal-ease); }
html.v3-js:not(.v3-static) .v3-frame.is-in { opacity: 1; transform: none; }

/* ---------- the stage's own control: icon + label ---------- */
.launch-motion-toggle { gap: var(--cvl-space-2); }
.launch-motion-toggle .v3-icon { width: 16px; height: 16px; }

/* ---------- phone: the same page, stacked; the stage ends as a sticky band ---------- */
@media (max-width: 900px) {
  .v3-layout { display: block; }
  .v3-layout > .v3-stage-col { display: none; }
  .v3-entry { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  body[data-page="launch"][data-launch-state="entry"] .v3-entry .launch-entry { padding: var(--cvl-space-8) var(--cvl-space-5) var(--cvl-space-6); }
  .v3-stage-slot { display: block; position: relative; flex: 1 1 auto; min-height: 19rem; border-top: var(--cvl-master-rule) solid var(--cvl-border-control); }
  /* The band overlaps the slot's last band-height, transparent and inert until it holds the
     stage, so no empty strip ever scrolls between the stage and §1: when it sticks, the slot's
     visible part is exactly the band. */
  .v3-band-host {
    display: block;
    position: sticky;
    top: var(--v3-hdr-h);
    z-index: 30;
    height: var(--v3-band-h);
    margin-top: calc(var(--v3-band-h) * -1);
    border-bottom: var(--cvl-master-rule) solid var(--cvl-border-control);
    background: var(--cvl-bg);
  }
  body:not(.v3-band) .v3-band-host { border-bottom-color: transparent; background: transparent; pointer-events: none; }
  .v3-stage-slot > .launch-stage, .v3-band-host > .launch-stage { position: absolute; inset: 0; height: auto; }
  body[data-page="launch"][data-launch-state="entry"].v3 .v3-band-host > .launch-stage,
  body[data-page="launch"][data-launch-state="entry"].v3 .v3-stage-slot > .launch-stage { min-height: 0; border-block-start: 0; }
  body[data-page="launch"].v3 .launch-stage .launch-core { width: 33.333cqmin; }
  .v3-frame {
    margin: var(--cvl-space-6) max(var(--cvl-space-4), var(--cvl-safe-area-right)) var(--cvl-space-6) max(var(--cvl-space-4), var(--cvl-safe-area-left));
    padding: var(--cvl-space-6) var(--cvl-space-5);
    scroll-margin-top: calc(var(--v3-hdr-h) + var(--v3-band-h) + var(--cvl-space-3));
  }
  .v3-frame :is(a, button, [tabindex]) { scroll-margin-top: calc(var(--v3-hdr-h) + var(--v3-band-h) + var(--cvl-space-3)); }
  html.v3-static .v3-frame, html.v3-static .v3-frame :is(a, button, [tabindex]) { scroll-margin-top: calc(var(--v3-hdr-h) + var(--cvl-space-4)); }
  .v3-sec-contact { margin-bottom: var(--cvl-space-8); }
  .v3-bars { display: none; }
  .v3-stat { padding: var(--cvl-space-4); }
  .v3-stat dt { flex-direction: column; align-items: flex-start; gap: var(--cvl-space-2); }
  /* the band keeps the stage clear: its motion control goes icon-only, 44 px, in the corner */
  body.v3-band .launch-motion-toggle { right: var(--cvl-safe-area-right); bottom: 0; width: var(--cvl-master-control-h); min-width: var(--cvl-master-control-h); padding: 0; justify-content: center; }
  body.v3-band .launch-motion-toggle [data-launch-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v3-stage-slot .launch-motion-toggle { right: max(var(--cvl-space-4), var(--cvl-safe-area-right)); }
  .v3-entry-link { left: var(--cvl-safe-area-left); }
  .v3-station { grid-template-columns: 2rem minmax(0, 1fr); row-gap: var(--cvl-space-2); }
  .v3-station .v3-station-line { grid-column: 2; }
  .v3-plate { grid-template-columns: auto minmax(0, 1fr); }
  .v3-plate-n { display: none; }
  /* a pick's result sits right under the picks; the route follows */
  .v3-sec-how { display: flex; flex-direction: column; }
  .v3-sec-how .v3-route { order: 1; }
}
@media (max-width: 430px) {
  .v3-icon--title { display: block; margin: 0 0 var(--cvl-space-3); }
  .v3-caption { letter-spacing: 0.06em; }
}
@media (max-width: 420px) {
  .v3-brief-btn { flex-direction: column; align-items: flex-start; justify-content: center; }
  .v3-brief-btn-status { padding-left: calc(var(--v3-cell) * 3 + var(--cvl-space-3)); }
}
@media (max-width: 400px) {
  .v3-stat dt { letter-spacing: 0.06em; }
}
@media (max-width: 23.5rem) {
  .v3-stats { grid-template-columns: minmax(0, 1fr); }
}
/* Print or save as PDF: every frame shows, the live stage does not. */
@media print {
  html.v3-js .v3-frame { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v3-layout > .v3-stage-col, .v3-band-host { display: none; }
  .v3-layout { display: block; }
}
/* Landscape phones: the entry lays out side by side and the band is shorter, so the header
   and band never take half the screen. */
@media (max-width: 900px) and (max-height: 500px) {
  :root { --v3-band-h: 5rem; }
  .v3-entry { flex-direction: row; }
  body[data-page="launch"][data-launch-state="entry"] .v3-entry .launch-entry { flex: 0 0 42%; padding: var(--cvl-space-5); }
  .v3-stage-slot { min-height: 0; border-top: 0; border-left: var(--cvl-master-rule) solid var(--cvl-border-control); }
}

/* ---------- the static layout: reduced motion or forced colours ----------
   No pin, no band, no parallax, no flourish: a plain stacked document. The stage keeps the
   entry beside (desktop) or under (phone) the lockup and scrolls away like any figure; §1
   shows its static diagram instead of the live system. */
html.v3-static .v3-layout { display: block; }
html.v3-static .v3-layout > .v3-stage-col, html.v3-static .v3-band-host, html.v3-static .v3-timeline { display: none; }
html.v3-static .v3-diagram { display: block; }
html.v3-static .v3-frame { max-width: 64rem; min-height: 0; }
@media (min-width: 901px) {
  /* the stacked document lines up with the header's own band */
  html.v3-static .v3-frame { margin-inline: max(var(--cvl-launch-gutter), calc((100% - var(--cvl-max)) / 2 + var(--cvl-launch-gutter))); }
  html.v3-static .v3-entry { grid-template-columns: var(--v3-col-doc) minmax(0, 1fr); padding: 0; place-items: stretch; }
  html.v3-static .v3-entry .launch-entry { align-self: center; padding: var(--cvl-space-8) var(--cvl-launch-gutter); }
  html.v3-static .v3-stage-slot { display: block; position: relative; min-height: 100svh; border-left: var(--cvl-master-rule) solid var(--cvl-border-control); }
  html.v3-static .v3-stage-slot > .launch-stage { position: absolute; inset: 0; height: auto; }
}

@media (forced-colors: active) {
  .v3-corners i::before, .v3-corners i::after, .v3-tick, .v3-swatch, .v3-bars i, .v3-timeline i { background: CanvasText; }
  .v3-stamp--live { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .v3-icon { color: CanvasText; --v3-icon-dim: GrayText; --v3-icon-hot: Highlight; }
  .v3-dg-orbit { stroke: CanvasText; }
  .v3-dg-sun, .v3-dg-planet { fill: CanvasText; }
  /* SC-03: the wordmarks and marks sit on a fixed dark plate, so a light scheme cannot erase them */
  .showcase-card-wordmark, .showcase-product-mark { forced-color-adjust: none; background: var(--cvl-bg); }
  .showcase-card-wordmark { padding: var(--cvl-space-1, 0.25rem) var(--cvl-space-2); }
  /* state is drawn with the border, so the focus ring (an outline) stays visible on top of it */
  .v3-picks button[aria-checked="true"] { border-color: Highlight; border-width: 3px; padding: calc(var(--cvl-space-2) - 2px) calc(var(--cvl-space-4) - 2px); }
  .v3-brief-btn[aria-expanded="true"] { border-bottom: 3px solid Highlight; padding-bottom: calc(var(--cvl-space-3) - 2px); }
  .v3-brief-btn[aria-expanded="true"] .v3-swatch { background: Highlight; }
  .v3-route .v3-station.is-lit::before { background: Highlight; }
}