/* ---------------------------------------------------------------------------
   BLUEPRINT — "DRAWING No. 001: THE HYBRID ATHLETE"
   The section after the CRT story: the three 3D objects (male, female, mark)
   printed onto a live drafting sheet by a scan line, annotated with real app
   features, closed by the brand mark. One canvas, ScrollTrigger-pinned;
   src/blueprint.js scrubs the whole film. Tokens come from cinematic.css.
--------------------------------------------------------------------------- */

#blueprint {
  position: relative; z-index: 20;          /* opaque: covers the fixed CRT + hands */
  background: #000;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* ---- drafting sheet chrome ---- */
#blueprint .bp-grid {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  background:
    repeating-linear-gradient(0deg,  rgba(245,245,247,.030) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(245,245,247,.030) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(245,245,247,.012) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(245,245,247,.012) 0 1px, transparent 1px 18px);
}
#blueprint .bp-frame {
  position: absolute; top: 16px; right: 16px; bottom: 16px; left: 16px; opacity: 0;
  border: 1px solid rgba(245,245,247,.13); pointer-events: none;
}
#blueprint .bp-frame i {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid rgba(245,245,247,.5);
}
#blueprint .bp-frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
#blueprint .bp-frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
#blueprint .bp-frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
#blueprint .bp-frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* the real lab renders live in a clipped stage; each is an embedded lab page.
   pointer-events:none keeps the film deterministic (rotation is parent-driven). */
#blueprint .bp-stage { position: absolute; top: 17px; right: 17px; bottom: 17px; left: 17px; overflow: hidden; z-index: 1; }
#blueprint .bp-figure {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; background: #000;
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}
#blueprint #bpFigF { z-index: 1; }
#blueprint #bpFigM { z-index: 2; }
#blueprint #bpFigL { z-index: 3; }
#blueprint #bpFigB {
  z-index: 4;
  background: var(--red);
  transform-origin: 50% 50%;      /* centred depth push, not a right-edge wipe */
}

/* The Honest Coach slide and the Bento are BOTH #FF2233. Painting the stage
   red for the handoff makes that shared field the through-line: the outgoing
   slide can recede into depth without ever exposing black at its edges, so
   the red reads as continuous and only the CONTENT changes. */
#blueprint .bp-stage.bp-red-field { background: var(--red); }
#blueprint #bpFigB.is-live { pointer-events: auto; }

/* Honest Coach -> product system. The Bento remains a full live viewport while
   a narrow illuminated edge travels from the right side to the left. */
/* Was a 2px hard wipe line animated via `left` — a layout write every frame,
   and visually a 2010s wipe. Now a wide, soft light pass that travels across
   the red field once as the system resolves: transform + opacity only, so it
   lives entirely on the compositor. */
#blueprint .bp-bento-edge {
  position: absolute; z-index: 6;
  top: 0; bottom: 0; left: 0; width: 42%;
  opacity: 0; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.035) 38%,
    rgba(255,255,255,.11) 60%,
    rgba(255,236,238,.055) 80%,
    transparent 100%);
  transform: translate3d(-100%, 0, 0);
  will-change: transform, opacity;
}

/* Woman -> Honest Coach handoff. After the card's content clears, this exact
   brand-red shell inherits its bounds and expands to the viewport. The AI
   iframe resolves underneath the full red field, producing a seamless wipe. */
#blueprint .bp-ai-card-wipe {
  /* Full-size static layer, painted once; blueprint.js drives ONLY transform
     and opacity (compositor properties). Scaled down to the promo-card rect
     the 6px radius reads ~1.5px — indistinguishable mid-wipe, and exact at
     full frame, where it matters. */
  position: absolute; z-index: 5;
  left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 6px;
  background: var(--red);
  box-shadow: 0 50px 120px -28px rgba(0,0,0,.92), 0 20px 46px -24px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

#blueprint .bp-stamp { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
/* (readiness heat now lives inside the male figure's own shader — no overlay) */
#blueprint svg.bp-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* horizontal print head for the preserved male scan. The former vertical
   section-cut stays dormant; the 3D vortex now owns the handoff. */
#blueprint .bp-scan {
  position: absolute; left: 17px; right: 17px; top: 0; height: 3px; z-index: 2;
  background: var(--fg); opacity: 0;
  box-shadow: 0 0 18px rgba(245,245,247,.95), 0 0 74px rgba(245,245,247,.58), 0 0 130px rgba(255,34,51,.22);
}
#blueprint .bp-scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -92px; height: 184px;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(245,245,247,.06) 28%,
      rgba(255,34,51,.15) 50%,
      rgba(245,245,247,.08) 68%,
      transparent 100%);
  filter: blur(14px);
}
#blueprint .bp-scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -24px; height: 48px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(245,245,247,.22), transparent);
  filter: blur(8px);
}
#blueprint .bp-scan b {
  position: absolute; right: 0; bottom: 8px;
  font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .18em;
  color: rgba(245,245,247,.8);
}
#blueprint .bp-wipe {
  position: absolute; top: 17px; bottom: 17px; left: 0; width: 2px; z-index: 2;
  background: var(--fg); opacity: 0;
  box-shadow: 0 0 12px rgba(245,245,247,.85), 0 0 40px rgba(245,245,247,.38);
}

/* ---- header: kicker + Anton headline (one per beat) + section line ---- */
#blueprint .bp-head { position: absolute; left: 44px; top: 40px; z-index: 3; }
#blueprint .bp-head .bp-kicker {
  font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(245,245,247,.40);
}
#blueprint .bp-head .bp-titles { position: relative; margin-top: 14px; height: clamp(30px, 3.8vw, 52px); }
#blueprint .bp-head h2 {
  position: absolute; left: 0; top: 0; margin: 0; opacity: 0;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.06;
  color: var(--fg); white-space: nowrap; text-transform: uppercase;
}
#blueprint .bp-head h2 em { font-style: normal; color: var(--red); }
#blueprint .bp-head .bp-sub {
  margin-top: 12px;
  font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(245,245,247,.5);
}

/* ---- MINIMAL PASS ----------------------------------------------------------
   The drafting chrome (border rule, datum + dimension rails, kicker/section
   labels, corner meta) is retired: the frame now carries the figure and one
   headline, and the LEFT half is deliberately empty for future copy — the
   figure and its readings compose into the right. The elements are hidden
   rather than deleted so the film's JS keeps its element refs; blueprint.js
   still lays the rails out, it just paints nothing.
   -------------------------------------------------------------------------- */
#blueprint .bp-frame,
#blueprint .bp-corner,
#blueprint .bp-head,
#blueprint #bpDatum,
#blueprint #bpDim { display: none; }

/* brand logo — red HYREN SVG (mark + wordmark), top-left */
#blueprint .bp-logo {
  position: absolute; top: 34px; left: 44px; z-index: 4;
  height: 56px; width: auto; display: block;
  opacity: 0; will-change: opacity, transform; pointer-events: none;
}

/* ============================================================================
   RED PROMO CARD — left of the figure. Matches the hero card: flat brand red,
   4px radius, Anton display headline, black ink, heavy drop shadow (Brutalist
   Sport). Carries the product's OUTCOME promise (projected finish).
   ========================================================================== */
#blueprint .bp-promo {
  position: absolute; left: 48px; top: 50%; transform: translateY(-50%); z-index: 4;
  width: clamp(360px, 27vw, 460px); padding: 40px 38px 34px;
  background: var(--red); border-radius: 5px;
  box-shadow: 0 50px 120px -28px rgba(0,0,0,.92), 0 20px 46px -24px rgba(0,0,0,.7);
  opacity: 0; will-change: opacity, transform; pointer-events: none;
}
#blueprint .bp-promo-kicker {
  font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(0,0,0,.58); margin-bottom: 20px;
}
#blueprint .bp-promo-title {
  margin: 0; color: #000; text-transform: uppercase;
  font-size: clamp(3rem, 4vw, 4.2rem); line-height: .9; letter-spacing: .004em;
}
#blueprint .bp-promo-line {
  margin: 24px 0 0; color: rgba(0,0,0,.82);
  font: 600 14px/1.55 'Helvetica Neue', Arial, sans-serif; max-width: 23rem;
}
#blueprint .bp-promo-verdicts {
  margin-top: 26px; padding-top: 20px; border-top: 1.5px solid rgba(0,0,0,.26);
  display: flex; flex-direction: column; gap: 10px;
}
#blueprint .bp-promo-vlabel {
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(0,0,0,.5); margin-bottom: 5px;
}
#blueprint .bp-promo .v-row {
  display: flex; align-items: center; gap: 11px;
  font: 700 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #000;
}
#blueprint .bp-promo .v-row i {
  width: 7px; height: 7px; background: #000; transform: rotate(45deg); flex: none;
}
/* limiter row gets the same quiet emphasis it has on the readiness card */
#blueprint .bp-promo .v-row[data-tier="limiter"] { font-weight: 800; }

/* ============================================================================
   WOMAN — CYCLE-AWARE READINESS
   Same black / white / HYREN red product system as the male slide. The phase
   rail uses contrast as data: primed, protected, limiter.
   ========================================================================== */
#blueprint .bp-her-promo {
  position: absolute; right: 96px; top: 50%; z-index: 4;
  width: clamp(360px, 27vw, 460px); padding: 38px 38px 34px;
  background: var(--red); border-radius: 5px;
  box-shadow: 0 50px 120px -28px rgba(0,0,0,.92), 0 20px 46px -24px rgba(0,0,0,.7);
  opacity: 0; transform: translate(34px, -50%);
  will-change: opacity, transform; pointer-events: none;
}
#blueprint .bp-her-content {
  opacity: 1;
  will-change: opacity, transform;
}
#blueprint .bp-her-kicker {
  font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(0,0,0,.58); margin-bottom: 20px;
}
#blueprint .bp-her-title {
  margin: 0; color: #000; text-transform: uppercase;
  font-size: clamp(3rem, 4vw, 4.2rem); line-height: .9; letter-spacing: 0;
}
#blueprint .bp-her-copy {
  margin: 24px 0 0; max-width: 24rem;
  color: rgba(0,0,0,.82);
  font: 600 14px/1.52 'Helvetica Neue', Arial, sans-serif;
}
#blueprint .bp-cycle {
  margin-top: 25px; padding-top: 20px; border-top: 1.5px solid rgba(0,0,0,.26);
}
#blueprint .bp-cycle-rail {
  display: grid; grid-template-columns: 1fr 1fr .42fr; gap: 3px;
  height: 6px; transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}
#blueprint .bp-cycle-rail i { display: block; background: #F5F5F7; }
#blueprint .bp-cycle-rail i:nth-child(2) { background: rgba(0,0,0,.48); }
#blueprint .bp-cycle-rail i:nth-child(3) { background: #000; }
#blueprint .bp-cycle-labels {
  display: grid; grid-template-columns: 1fr 1fr .42fr; gap: 3px; margin-top: 10px;
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(0,0,0,.72);
}
#blueprint .bp-cycle-labels span:nth-child(3) { text-align: right; color: #000; }

/* Women Open loads are a separate field matrix, not a recolored readiness card. */
#blueprint .bp-her-standards {
  position: absolute; top: 150px; left: 30px; z-index: 4;
  width: min(300px, 26vw); padding: 10px 16px 14px;
  border-radius: 22px;
  background: rgba(20,20,24,.42);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 16px 50px -14px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.14);
  opacity: 0; transform: translateX(-34px);
  will-change: opacity, transform; pointer-events: none;
}
#blueprint .bp-her-standards-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0 12px; margin-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.08);
  font: 700 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(245,245,247,.82);
}
#blueprint .bp-her-standards-head span:last-child { color: var(--red); }
#blueprint .bp-her-standard {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.055);
  font: 600 9.5px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .11em;
  text-transform: uppercase;
}
#blueprint .bp-her-standard span { color: rgba(245,245,247,.48); }
#blueprint .bp-her-standard b { color: rgba(245,245,247,.94); font-weight: 700; white-space: nowrap; }
/* Compact carrier for the five Women's Open figures. Hidden by default (the full
   .bp-her-standards table shows on wide screens); the same media queries that hide
   the table reveal this line, so the race weights exist at every viewport. */
#blueprint .bp-her-standards-inline {
  display: none;
  margin: 12px 0 0;
  font: 600 10px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .04em;
  color: rgba(0,0,0,.72);
}

#blueprint .bp-her-benchmark {
  margin-top: 13px;
  font: 700 9.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(245,245,247,.55);
}

/* ============================================================================
   INFO-MATRIX CARD — one floating liquid-glass panel, tabbed.
   Apple-grade: translucent fill, backdrop blur+saturate, a hairline rim, a
   bright top inset highlight, and a sliding tab indicator. Holds the readiness
   legend and the drawing block as switchable panels.
   ========================================================================== */
#blueprint .bp-card {
  position: absolute; top: 5.5vh; right: 30px; z-index: 4;
  /* clamp, not min(): a bare min() has no FLOOR, so between 621px and 939px
     the card fell under the ~244px its widest legend row needs and cut
     'LIMITER' mid-word on every tablet portrait and landscape phone. */
  width: clamp(248px, 26vw, 300px); max-width: calc(100vw - 60px); padding: 5px;
  border-radius: 22px;
  /* one clean frosted surface: a single translucent tone + a strong blur.
     The realism is in the blur + one specular top edge, NOT in stacked layers. */
  background: rgba(20,20,24,.42);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 16px 50px -14px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.14);
  opacity: 0; will-change: opacity, transform;
}

/* tabs: no inner track, no borders — just text with one soft frosted pill
   floating on the glass behind the active label */
#blueprint .bp-tabs {
  position: relative; display: flex;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#blueprint .bp-tab {
  position: relative; z-index: 1; flex: 1; appearance: none; border: 0; cursor: pointer;
  padding: 12px 6px; border-radius: 15px; background: transparent;
  font: 600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(245,245,247,.4);
  transition: color .3s ease;
}
#blueprint .bp-tab.is-on { color: var(--fg); }
#blueprint .bp-tab:hover { color: rgba(245,245,247,.75); }
#blueprint .bp-tab-ink {
  position: absolute; z-index: 0; top: 4px; bottom: 5px; left: 4px; width: calc(50% - 4px);
  border-radius: 15px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .4s cubic-bezier(.5,.05,.2,1);
}
#blueprint .bp-card[data-active="drawing"] .bp-tab-ink { transform: translateX(100%); }

/* panels */
#blueprint .bp-panel { display: none; padding: 15px 13px 13px; }
#blueprint .bp-panel.is-on { display: block; }

/* readiness heat LEGEND — a ranked key that mirrors the in-body heat map */
#blueprint .bp-maplist { position: static; width: auto; }
#blueprint .bp-leg-head { opacity: 0; margin-bottom: 12px; will-change: opacity; }
#blueprint .bp-leg-head span { display: none; }
#blueprint .bp-leg-key {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #2BE977 0%, #FFB020 55%, #FF3B47 100%);
  opacity: .85;
}
#blueprint .bp-leg {
  display: flex; align-items: baseline; gap: .5em; opacity: 0;
  padding: 5px 0;
  font: 600 10px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase;
  will-change: opacity, transform;
}
#blueprint .bp-leg .car { color: var(--c); font-size: .8em; }
/* no white-space:nowrap: it set min-width:auto to the full min-content width,
   so the row could never compress and simply overflowed the card instead. */
#blueprint .bp-leg .g { flex: 1 1 auto; min-width: 0; color: rgba(245,245,247,.9); }
#blueprint .bp-leg .lead { display: none; }   /* dashed connectors removed — cleaner rows */
#blueprint .bp-leg .v { color: var(--c); font-weight: 700; }
#blueprint .bp-leg .st { color: var(--c); opacity: .55; font-size: .82em; letter-spacing: .08em; white-space: nowrap; min-width: 52px; }
#blueprint .bp-leg[data-tier="ready"]   { --c: #2BE977; }
#blueprint .bp-leg[data-tier="watch"]   { --c: #FFB020; }
#blueprint .bp-leg[data-tier="limiter"] { --c: #FF3B47; border-left-color: rgba(255,59,71,.5); }
#blueprint .bp-leg[data-tier="limiter"] .v { animation: bpLimPulse 2.1s ease-in-out infinite; }
@keyframes bpLimPulse { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { #blueprint .bp-leg[data-tier="limiter"] .v { animation: none; } }

/* ---- feature callouts (leader lines live in the SVG overlay) ---- */
#blueprint .bp-callout {
  position: absolute; z-index: 3; opacity: 0;
  width: clamp(168px, 17vw, 210px); max-width: calc(100vw - 52px);
  will-change: transform, opacity, left, top;
}
#blueprint .bp-callout h3 {
  margin: 0; font-family: 'Anton', 'Helvetica Neue', Impact, sans-serif; font-weight: 400;
  font-size: clamp(16px, 1.45vw, 22px); letter-spacing: .03em; line-height: 1;
  color: var(--fg); text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid rgba(245,245,247,.46);
}
#blueprint .bp-callout p {
  margin: 6px 0 0; font: 600 9.5px/1.65 ui-monospace, Menlo, monospace;
  letter-spacing: .11em; text-transform: uppercase; color: rgba(245,245,247,.66);
}
/* 10px @ .58 (~5:1), was 8.5px @ .38 (3.19:1) — this line carries the explanatory
   half of every callout and failed WCAG contrast at a size nobody could read. */
#blueprint .bp-callout p.bp-dim { font-size: 10px; color: rgba(245,245,247,.58); margin-top: 2px; }
#blueprint .bp-callout p b { font-weight: 600; color: var(--red); }
#blueprint .bp-callout.bp-right h3, #blueprint .bp-callout.bp-right p { text-align: right; }

/* ---- drawing block (now a card panel) ---- */
#blueprint .bp-tblock {
  font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(245,245,247,.72);
}
#blueprint .bp-tblock .r { display: flex; border-top: 1px solid rgba(245,245,247,.08); }
#blueprint .bp-tblock .r:first-child { border-top: 0; }
#blueprint .bp-tblock .c { padding: 10px 4px 9px; flex: 1; white-space: nowrap; }
#blueprint .bp-tblock .c + .c { border-left: 1px solid rgba(245,245,247,.08); flex: 0 0 108px; }
#blueprint .bp-tblock .bp-brand {
  font-family: 'Anton', 'Helvetica Neue', Impact, sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: .06em; color: var(--fg); padding: 8px 10px 7px;
}
#blueprint .bp-tblock .lbl { color: rgba(245,245,247,.55); margin-right: 6px; }
#blueprint .bp-tblock .bp-flash { color: var(--fg); text-shadow: 0 0 12px rgba(245,245,247,.8); }
#blueprint .bp-tblock #bpStatus.bp-approved { color: var(--red); text-shadow: none; }

/* ---- corner meta ---- */
#blueprint .bp-corner {
  position: absolute; right: 32px; top: 40px; z-index: 3; text-align: right;
  font: 600 9px/1.8 ui-monospace, Menlo, monospace; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(245,245,247,.32);
}

/* portrait / narrow: keep the film, shed the side apparatus */
@media (max-aspect-ratio: 13/10) {
  /* must match .bp-panel.is-on's specificity (1,2,0) or it never applies —
     activateTab('readiness') keeps .is-on on this node permanently. */
  #blueprint .bp-panel.bp-maplist { display: none; }
  /* Same 'shed the side apparatus' rule as the maplist above. At the male hold
     beat (hash 0.3 = p .54 — storyP/.68 in blueprint.js) the promo card, both
     leader callouts, the logo and the readiness card are all on at once; under
     ~1024px of width the 360px promo and a 220px callout physically collide
     (measured 220x79 at 768x1024). The promo card itself carries the Recovery
     Vision copy, so the floating duplicates go, as they already do on short
     viewports. */
  #blueprint .bp-callout { display: none; }
  #blueprint #bpLeadA, #blueprint #bpLeadB, #blueprint #bpLeadC { display: none; }
  #blueprint .bp-corner { display: none; }
  #blueprint .bp-tblock { width: 252px; right: 16px; bottom: 16px; }
  #blueprint .bp-head { left: 20px; top: 24px; right: 20px; }
  #blueprint .bp-head h2 { white-space: normal; }
  #blueprint .bp-head .bp-titles { height: auto; min-height: clamp(30px, 3.8vw, 52px); }
  #blueprint .bp-callout { width: min(220px, 88vw); max-width: min(220px, 88vw); }
  #blueprint .bp-her-standards { display: none; }
  #blueprint .bp-her-standards-inline { display: block; }
  #blueprint .bp-her-promo {
    left: auto; right: 20px;
    width: min(300px, 42vw); padding: 28px 26px 24px;
  }
  #blueprint .bp-her-title { font-size: clamp(2.1rem, 5vw, 3rem); }
  #blueprint .bp-her-copy { font-size: 12px; }
}

/* ===========================================================================
   COMPACT SPLIT — phones and anything under 620px.

   The desktop grammar floats cards over the figure. That relies on horizontal
   room this width does not have: .bp-promo was `clamp(360px, 27vw, 460px)`, and
   a clamp FLOOR of 360px cannot shrink — on a 375px screen it sat at x=48 and
   ran 33px off the right edge, covering the athlete completely. .bp-card was
   `min(300px, 26vw)` = 98px, so every row truncated mid-word.

   So the film splits instead of stacking: the stage keeps the top band, the
   beat's card owns the bottom. Nothing overlaps, the figure is never covered,
   and copy sits on solid ground rather than over moving 3D. The 46% band and
   the 620px breakpoint are mirrored in blueprint.js (STAGE_CARD_BAND,
   COMPACT_MAX) — change them together.
   =========================================================================== */
@media (max-width: 620px) {
  /* --- the card band: both beat cards share one footprint and cross-fade --- */
  /* Height is NOT fixed at a share of the screen. A hard `max-height: calc(46% - 26px)`
     clipped 20px off the bottom of .bp-promo at 375x667 — the LIMITER row of the
     verdict legend was silently cut. The card sizes to its content instead, and
     blueprint.js measures it and hands the stage whatever is left (--bp-band).
     62% is only a backstop so a future copy change can never eat the whole screen. */
  #blueprint .bp-promo,
  #blueprint .bp-her-promo {
    left: 14px; right: 14px; width: auto; max-width: none;
    top: auto; bottom: 14px;
    max-height: 62%;
    padding: 20px 20px 18px;
    border-radius: 4px;
    overflow: hidden;
  }
  /* JS drives these transforms per frame; the desktop rules carry a -50% that
     would pull the card back over the figure. blueprint.js switches to a plain
     translateY under the same breakpoint — this is only the at-rest value.
     .bp-her-promo needs it too: its desktop rest state is translate(34px, -50%),
     and that 34px pushed it 20px past the right edge at 320px before the film
     had run a frame and overwritten it. */
  #blueprint .bp-promo,
  #blueprint .bp-her-promo { transform: translateY(0); }

  #blueprint .bp-promo-kicker,
  #blueprint .bp-her-kicker { margin-bottom: 10px; font-size: 9px; letter-spacing: .22em; }
  #blueprint .bp-promo-title,
  #blueprint .bp-her-title { font-size: 1.9rem; line-height: .92; }
  /* The <br>s stay. The markup is `Train<br>What's<br>Ready` with NO spaces
     around the breaks, so hiding them welds the words into TRAINWHAT'SREADY.
     (The old rule here hid .bp-her-title's first <br> and produced exactly that:
     "Built forher".) The stacked three-line title is the brutalist look anyway —
     it just needed a card wide enough to hold it, which the split band gives. */
  #blueprint .bp-promo-line,
  #blueprint .bp-her-copy { margin-top: 12px; font-size: 11.5px; line-height: 1.45; }
  #blueprint .bp-promo-verdicts { margin-top: 13px; padding-top: 12px; }
  #blueprint .bp-her-standards-inline { display: block; }
  #blueprint .bp-promo-vlabel { font-size: 9px; }
  #blueprint .bp-promo .v-row { font-size: 10px; }
  #blueprint .bp-cycle { margin-top: 13px; padding-top: 12px; }
  #blueprint .bp-cycle-labels { font-size: 9px; }

  /* The stage must yield the band in CSS too, not only once the film's first frame
     runs setStageInset(). Before that frame the base rule's `bottom: 17px` left the
     stage nearly full-height and it overlapped the card by 356x214. */
  #blueprint .bp-stage { bottom: var(--bp-band, 46%); }

  /* --- readiness matrix: was clipping every row at 98px --- */
  #blueprint .bp-card {
    top: auto; bottom: calc(var(--bp-band, 46%) + 10px); right: 14px; left: 14px;
    width: auto; max-width: none;
  }
  #blueprint .bp-tabs { justify-content: flex-start; }
  #blueprint .bp-leg { font-size: 10px; }
  #blueprint .bp-tblock { width: auto; right: 14px; left: 14px; bottom: calc(46% + 10px); }

  /* --- header chrome shares the stage band, so keep it tight --- */
  #blueprint .bp-head { left: 16px; right: 16px; top: 18px; }
  #blueprint .bp-logo { left: 16px; top: 16px; }

  /* Leader-line callouts point at body parts inside the stage. blueprint.js
     clamps them to the viewport, but at this width the rail plus a 168px block
     crowds the figure it is annotating. The card band already carries the same
     copy, so drop the floating duplicates rather than stack two of everything. */
  #blueprint .bp-callout { display: none; }
  #blueprint #bpLeadA, #blueprint #bpLeadB, #blueprint #bpLeadC { display: none; }
}

/* ===========================================================================
   SHORT VIEWPORTS — landscape phones, and any window under ~560px tall.

   A landscape phone is 844x390 or 932x430: WIDE but very short. It misses the
   620px compact rules (too wide) and it misses the max-aspect-ratio: 13/10 rule
   (too wide again), so it was being served the full desktop composition inside
   390px of height. Measured at 844x390: .bp-promo renders 450px tall and
   .bp-her-promo 433px — both TALLER THAN THE ENTIRE VIEWPORT, centred on
   top:50% so they overflowed off the top and bottom at once.

   cinematic.css already does exactly this for the hero (@media max-height:540px);
   blueprint.css had no height-keyed rule at all. Everything here is keyed on
   height only, so no desktop, laptop, tablet or TV is touched — the shortest
   common laptop is 720px tall.
   =========================================================================== */
/* min-width guard is load-bearing. This block sits AFTER the 620px compact block
   and has identical specificity, so without it a viewport that is BOTH narrow and
   short (390x420 split-screen, 568x320 SE landscape) took `top: 10px` from here
   while keeping `bottom: calc(var(--bp-band) + 10px)` from there — top+bottom+auto
   height stretched .bp-card to 207px and it covered the whole figure. Measured:
   card/stage overlap 356x200. Narrow-AND-short is handled by its own block below. */
@media (max-height: 560px) and (min-width: 621px) {
  /* 375px of height cannot hold the brand chrome AND a centred promo card —
     they overlapped by 13px. The card wins; the footer still carries the brand. */
  #blueprint .bp-logo { display: none; }
  /* the readiness card owns the right edge (30px + 248px + breathing room) —
     at 667px wide a fixed 360px promo ran 19px into it */
  #blueprint .bp-promo, #blueprint .bp-her-promo { max-width: calc(100vw - 366px); }
  /* Leader-line callouts annotate a figure that is only ~200px tall here, and
     a 220px block plus its rail collides with both the promo and the readiness
     card (measured: 184x74 and 151x23 overlaps at 667x375 and 844x390). The
     same copy is already in the card band. */
  #blueprint .bp-callout { display: none; }
  #blueprint #bpLeadA, #blueprint #bpLeadB, #blueprint #bpLeadC { display: none; }
  #blueprint .bp-promo,
  #blueprint .bp-her-promo {
    max-height: calc(100vh - 28px);
    overflow: hidden;
    padding: 16px 20px 14px;
  }
  #blueprint .bp-promo-kicker,
  #blueprint .bp-her-kicker { margin-bottom: 8px; font-size: 9px; }
  /* size the display type off HEIGHT here — vw would read this as a desktop */
  #blueprint .bp-promo-title,
  #blueprint .bp-her-title { font-size: clamp(1.35rem, 5.4vh, 2.3rem); line-height: .92; }
  #blueprint .bp-promo-line,
  #blueprint .bp-her-copy { margin-top: 9px; font-size: 10.5px; line-height: 1.4; }
  #blueprint .bp-promo-verdicts { margin-top: 9px; padding-top: 8px; }
  #blueprint .bp-promo .v-row { font-size: 9.5px; }
  #blueprint .bp-cycle { margin-top: 9px; padding-top: 8px; }
  #blueprint .bp-card {
    top: 10px; max-height: calc(100vh - 20px); overflow: hidden;
  }
  #blueprint .bp-leg { font-size: 9.5px; }
  /* 219px of standards table cannot share 390px of height with everything else */
  #blueprint .bp-her-standards { display: none; }
  #blueprint .bp-her-standards-inline { display: block; font-size: 9px; margin-top: 8px; }
}

/* NARROW *AND* SHORT — phone split-screen (~390x420), iPhone SE-1 landscape
   (568x320), any window dragged small. Keeps the compact split (the stage/card
   band above still applies) and only shrinks the type, so nothing overlaps.
   The band itself is measured by blueprint.js, so it follows this smaller type. */
@media (max-width: 620px) and (max-height: 560px) {
  #blueprint .bp-promo,
  #blueprint .bp-her-promo { padding: 13px 16px 12px; max-height: 58%; }
  #blueprint .bp-promo-kicker,
  #blueprint .bp-her-kicker { margin-bottom: 6px; font-size: 9px; }
  #blueprint .bp-promo-title,
  #blueprint .bp-her-title { font-size: clamp(1.15rem, 5vh, 1.6rem); }
  #blueprint .bp-promo-line,
  #blueprint .bp-her-copy { margin-top: 7px; font-size: 10px; line-height: 1.35; }
  #blueprint .bp-promo-verdicts,
  #blueprint .bp-cycle { margin-top: 7px; padding-top: 6px; }
  /* the readiness matrix cannot also fit here - the card band carries the story */
  #blueprint .bp-card { display: none; }
}

/* Landscape tablets (1024x768 class): too wide for the 13/10 aspect rule, too
   tall for the short-viewport rule, but still ~250px short of the width the male
   hold beat needs for promo + leader callouts side by side (fits at 1280,
   collides 48x79 at 1024 — measured by test/test_layout.py). Same shedding rule. */
@media (min-aspect-ratio: 13/10) and (max-width: 1152px) {
  #blueprint .bp-callout { display: none; }
  #blueprint #bpLeadA, #blueprint #bpLeadB, #blueprint #bpLeadC { display: none; }
}