/* direction: horizon (v5 — "head-first hero", R5 fix pass) — near-black
   field, violet spectrum accents, the Alexander head mark as the hero visual:
   on scroll the header hands off in a staggered exit (subcopy -> CTAs ->
   statement) while the head docks into the full-body machine figure
   assembling UNDERNEATH over a ~2-viewport runway; Waves shader as dark
   atmosphere behind the hero.
   Scoped entirely under :root[data-rx="horizon"]; additive only. */

/* ---- palette: dark field, light ink ---- */
:root[data-rx="horizon"],
:root[data-rx="horizon"] body {
  background-color: #0a0b0d !important;
  color: #f4f4f2;
}
:root[data-rx="horizon"] {
  /* flip the captured site palette vars the ink rides on */
  --core-silver-a12: #f4f4f2;
  --core-silver-a11: #b9bbc0;
  --core-silver-a10: #9a9da3;
  --core-gray-a12: #f4f4f2;
  --core-gray-a11: #b9bbc0;
  --gray-a12: #f4f4f2;
  --gray-a11: #b9bbc0;
  --black-a2: rgba(255, 255, 255, 0.07);
  --black-a3: rgba(255, 255, 255, 0.1);
  --black-a4: rgba(255, 255, 255, 0.14);
  --black-a5: rgba(255, 255, 255, 0.18);
  --black-a6: rgba(255, 255, 255, 0.24);
  --site-faint: rgba(244, 244, 242, 0.45);
  /* light-theme ink vars that mono labels + link hovers ride inline:
     "learn more" (color:var(--site-muted)) and hover:text-core-silver-12
     were near-invisible on the dark field */
  --site-muted: rgba(244, 244, 242, 0.55);
  --core-silver-12: #f4f4f2;
}
/* R5 item 5c: --site-faint/--site-muted/--site-hairline are DECLARED ON
   .site-shell in c1.tokenized.css, so the :root flips above never reach the
   hero telemetry rail or the LEARN MORE cue — both rendered at the captured
   light-theme inks (~1.1:1 on the dark field). Re-declare at the same scope.
   0.55-alpha white on #0a0b0d ≈ 5.8:1. */
:root[data-rx="horizon"] .site-shell {
  --site-faint: rgba(244, 244, 242, 0.55);
  --site-muted: rgba(244, 244, 242, 0.6);
  --site-hairline: rgba(244, 244, 242, 0.16);
}
:root[data-rx="horizon"] .hero-stage {
  background: #0a0b0d !important;
}
/* the shell rides an inline --bg-canvas:255,255,255 var — override the
   property itself so the field below the hero is near-black too */
:root[data-rx="horizon"] .site-shell.bg-canvas {
  background-color: #0a0b0d !important;
}
:root[data-rx="horizon"] .shapes-field {
  display: none !important;
}
:root[data-rx="horizon"] article[style*="background"] {
  background: #121317 !important;
  box-shadow: 0 0 0 1px #1e2026;
}
:root[data-rx="horizon"] .site-ink-soft {
  color: #c9cbd0 !important;
}
/* ---- CTA system (R2): primary = clean white pill, dark ink; hover = subtle
   spectrum hairline + violet glow. Orange is retired as a UI accent — it
   survives only in telemetry dots / spectrum art. */
:root[data-rx="horizon"] .hero-cta-dark {
  background: #ffffff !important;
  color: #0a0b0d !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
:root[data-rx="horizon"] .hero-cta-dark:hover {
  background: #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(255, 47, 179, 0.55),
    0 4px 28px rgba(122, 77, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ---- flame palette: molten spectrum on the near-black field ----
   accent #ff6a00 · secondary #ff2fb3 · tertiary #7a4dff · quaternary #2f6bff */
:root[data-rx="horizon"] svg line[stroke="#c65a4a"] { stroke: #ff6a00; }
:root[data-rx="horizon"] svg line[stroke="#c98a3d"] { stroke: #ff2fb3; }
:root[data-rx="horizon"] svg line[stroke="#4a9a72"] { stroke: #7a4dff; }
:root[data-rx="horizon"] svg line[stroke="#7a55c8"] { stroke: #2f6bff; }
/* R6 item 4: the 78-bar div chart is gone (base now ships the 6-month inline
   SVG #run-chart, legend dots carry spectrum hexes directly), so the R2/R5
   inline-literal recolors ([style*="rgb(74, 127, 192)"], [style*="#dce8f5"],
   [style*="#4a7fc0"]) matched nothing and were removed. Chart theming lives
   in the R6 proof block below. */
:root[data-rx="horizon"] {
  --core-blue-10: #b18cff;
  --core-blue-8: #8f6bff;
}
:root[data-rx="horizon"] [style*="color:#4a7fc0"] { color: #b18cff !important; }

/* ---- type: grotesk-led display; Newsreader retired to pull-quotes ---- */
:root[data-rx="horizon"] h1.hero-title-words {
  font-family: var(--font-family-display, Inter, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(32px, 3.8vw, 56px) !important;
  line-height: 1.02 !important;
  color: #f4f4f2 !important;
  margin-top: 0 !important;
}
:root[data-rx="horizon"] h2,
:root[data-rx="horizon"] footer#footer p.font-editorial {
  font-family: var(--font-family-display, Inter, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #f4f4f2 !important;
}

/* ---- hero v3 (R4): head-first, body assembles UNDERNEATH ----
   The hero visual is the Alexander head mark, LARGE and centered under a
   compact one-line statement. Scroll runway: --mx-lead-vh viewport heights
   belong to the hero choreography (behaviors.js reads it) — the essay starts
   only after the assembly completes. The manifesto spacer grows by the same
   lead so the essay/close range is unchanged. */
:root[data-rx="horizon"] #hero-canvas {
  --mx-lead-vh: 2; /* R5 item 6: pin trimmed 2.8 -> 2 viewports (~1.5 screens of assembly) */
}
:root[data-rx="horizon"] #manifesto-spacer {
  height: calc(200svh + 2598px) !important;
}
:root[data-rx="horizon"] .hero-stagger {
  width: 100%;
  max-width: 1240px !important;
  padding-top: clamp(1.25rem, 3.5svh, 2.75rem) !important;
}
/* one-line statement: the three stacked lines join (trailing spaces inside
   each block keep the word gaps); compact display scale leaves the stage to
   the head */
:root[data-rx="horizon"] .hero-title-words .block {
  display: inline;
}
/* compact header rhythm */
:root[data-rx="horizon"] .hero-stagger > .mt-14 {
  margin-top: 1.9rem !important;
}
:root[data-rx="horizon"] .hero-stagger > .mt-8 {
  margin-top: 1.4rem !important;
}
:root[data-rx="horizon"] .hero-stagger > .mt-8 p {
  max-width: 62ch;
  margin-inline: auto;
}
/* R5 item 1 — header -> second-scroll handoff is a designed exit, keyed to
   the same channel that drives the head morph (--rxh): the subcopy leaves
   first, then the CTA row, then the statement — each fading as it drifts up —
   so by the time the head docks into the figure the stage is already clear.
   Fully reversible (scroll back re-enters in reverse order). patch.js flips
   .rx-hdrout past the exit so the invisible controls are unfocusable. */
:root[data-rx="horizon"] .hero-stagger > .mt-8 {
  opacity: calc(1 - var(--rxh, 0) * 2.2);
  translate: 0 calc(var(--rxh, 0) * -18px);
}
:root[data-rx="horizon"] .hero-stagger > .mt-14 {
  opacity: calc(1 - (var(--rxh, 0) - 0.12) * 2.1);
  translate: 0 calc(var(--rxh, 0) * -26px);
}
:root[data-rx="horizon"] .hero-stagger > h1 {
  opacity: calc(1 - (var(--rxh, 0) - 0.28) * 1.8);
  translate: 0 calc(var(--rxh, 0) * -34px);
}
:root[data-rx="horizon"] #hero-canvas.rx-hdrout .hero-stagger > h1,
:root[data-rx="horizon"] #hero-canvas.rx-hdrout .hero-stagger > .mt-14,
:root[data-rx="horizon"] #hero-canvas.rx-hdrout .hero-stagger > .mt-8,
:root[data-rx="horizon"] #hero-canvas.rx-hdrout .hero-stagger a[href="#manifesto"] {
  visibility: hidden;
}
:root[data-rx="horizon"] .hero-stagger a[href="#manifesto"] {
  opacity: calc(0.9 - var(--rxh, 0) * 2.2);
}
/* the floating nav island holds until the hero statement has left the stage
   (it mounts top-center, exactly over the one-line h1); patch.js flips the
   data-rx-navhold attribute off past the hero lead */
:root[data-rx="horizon"] nav[aria-label="Site"] {
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s var(--site-ease-spring), visibility 0s linear 0s;
}
/* R5 item 9 (audit N3): hidden = unfocusable. Both hidden causes (nav hold
   during the hero, data-visible=false at rest) flip visibility — after the
   fade on the way out, instantly on the way in. */
:root[data-rx="horizon"][data-rx-navhold] nav[aria-label="Site"],
:root[data-rx="horizon"] nav[aria-label="Site"]:not([data-visible="true"]) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s var(--site-ease-spring), visibility 0s linear 0.45s;
}
/* the head mark — hero-dominant, transparent on the dark field. The morph
   channels are measured by patch.js: --rx-head-dy (translate to the figure's
   head slot) and --rx-head-se (end scale matching the figure's head size). */
:root[data-rx="horizon"] .rx-hero-head {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid; /* R6 item 2: bust image + head-turn scrub video share a cell */
  grid-template: 100% / 100%;
  place-items: center;
  justify-items: center;
  margin-top: clamp(0.75rem, 2.5svh, 2rem);
  pointer-events: none;
}
/* R6 item 2 (Alex addendum): the head layer is the head-turn scrub video
   (profile at rest -> three-quarter at the stitch, --rxh-scrubbed by
   startHeroHandoff). bust.webp stays underneath as the instant paint + the
   fallback when the video errors; phones/reduced-motion never build the video.
   --rxb is the pull-forward bump: the head grows toward the viewer before
   yielding into the dock. */
:root[data-rx="horizon"] .rx-hero-head img,
:root[data-rx="horizon"] .rx-hero-head video {
  grid-area: 1 / 1;
  height: 100%;
  max-height: 56svh;
  width: auto;
  /* R7 item 1: translate/scale re-targeted EVERY FRAME by writeSlot() —
     the transform-origin sits on the visible head center of each plate, so
     the translate lands that exact point on the live slot center and the
     scale matches laurel->chin height to the measured slot regardless of
     plate framing. --rxo is the landing crossfade (1 through the whole
     transit + assembly, ->0 only across the LAND window while the figure's
     own head is released underneath — pixel-aligned, so the cut is
     invisible). */
  transform: translate(calc(var(--rxh, 0) * var(--rx-head-dx, 0px)),
      calc(var(--rxh, 0) * var(--rx-head-dy, 30svh)))
    scale(calc((1 + var(--rxh, 0) * (var(--rx-head-se, 0.3) - 1)) * (1 + var(--rxb, 0) * 0.13)));
  opacity: var(--rxo, 1);
  /* R5 item 10: no resting will-change — the handoff writes vars per frame */
}
:root[data-rx="horizon"] .rx-hero-head img {
  transform-origin: 50% 45%; /* bust.webp visible-head center */
  filter: drop-shadow(0 0 70px rgba(122, 77, 255, 0.28))
    drop-shadow(0 30px 80px rgba(0, 0, 0, 0.5));
}
:root[data-rx="horizon"] .rx-hero-head video {
  transform-origin: 51% 34.9%; /* head-turn plate visible-head center */
  mix-blend-mode: screen; /* black plate melts into the near-black field */
  /* feather the plate edges (same melt as the figure videos): the near-black
     plate isn't pure black, so over the aurora streak its rectangle would
     read as a dim panel without the mask.
     R7 item 1: the mask TIGHTENS with the morph — by the dock only the head
     and a fading neck stub survive (the plate's bust shoulders would
     otherwise ghost over the figure's chest): the bottom cut rides --rxh to
     solid-through-chin (chin = 64.4% of plate height) + a 10% feather, while
     the radial's center travels onto the head center (51% 34.9%) and its
     radii collapse to head+halo — at dock nothing of the plate survives
     beyond the head and a soft neck stub. */
  -webkit-mask-image: radial-gradient(
      ellipse calc(140% - var(--rxh, 0) * 76%) calc(140% - var(--rxh, 0) * 82%)
        at calc(50% + var(--rxh, 0) * 1%) calc(46% - var(--rxh, 0) * 11.1%),
      #000 58%, transparent 82%),
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%,
      #000 calc(90% - var(--rxh, 0) * 23%), transparent calc(100% - var(--rxh, 0) * 23%));
  mask-image: radial-gradient(
      ellipse calc(140% - var(--rxh, 0) * 76%) calc(140% - var(--rxh, 0) * 82%)
        at calc(50% + var(--rxh, 0) * 1%) calc(46% - var(--rxh, 0) * 11.1%),
      #000 58%, transparent 82%),
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%,
      #000 calc(90% - var(--rxh, 0) * 23%), transparent calc(100% - var(--rxh, 0) * 23%));
  -webkit-mask-composite: source-in, source-in, source-in;
  mask-composite: intersect;
  visibility: hidden;
}
:root[data-rx="horizon"] .rx-hero-head.rx-turn-live video {
  visibility: visible;
}
:root[data-rx="horizon"] .rx-hero-head.rx-turn-live img {
  opacity: 0; /* keeps layout for the morph geometry measure */
}
/* the machine figure — centered on the hero card UNDERNEATH the statement,
   LARGE. Revealed by --rxf (rises 6svh as the exploded body arrives), exits
   with the card settle (1 - --hx) as the story takes over. Three stacked
   state videos share one grid cell and crossfade. Sits above the Waves band
   (DOM order) and below the z-10 statement / essay window. */
:root[data-rx="horizon"] .rx-h2-figure {
  position: absolute;
  left: 50%;
  top: 24svh;
  height: 86svh;
  margin: 0;
  transform: translateX(-50%) translateY(calc((1 - var(--rxf, 0)) * 6svh));
  opacity: calc(var(--rxf, 0) * (1 - var(--hx, 0)));
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  pointer-events: none;
  /* seamless pass (R2): screen-blend the composed figure (layers composite
     normally against each other first — no double-brighten during
     crossfades); the generous feather mask below is the real melt. */
  mix-blend-mode: screen;
}
:root[data-rx="horizon"] .rx-h2-figure video,
:root[data-rx="horizon"] .rx-h2-figure img {
  grid-area: 1 / 1;
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  /* feather mask softens residual plate texture near the edges (the screen
     blend on the container does the heavy lifting) */
  -webkit-mask-image: radial-gradient(130% 130% at 50% 48%, #000 50%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 90%, transparent 100%);
  mask-image: radial-gradient(130% 130% at 50% 48%, #000 50%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in, source-in, source-in;
  mask-composite: intersect;
}
/* three-state crossfade: the scrub layer is the always-visible base; the two
   idle loops opacity-fade above it — 150ms at the REST boundary (p=0.02),
   250ms at the DONE boundary (p=0.98). data-fig-state set by patch.js. */
:root[data-rx="horizon"] .rx-h2-figure .rx-fig-rest,
:root[data-rx="horizon"] .rx-h2-figure .rx-fig-done {
  opacity: 0;
  transition: opacity 150ms linear;
  pointer-events: none;
}
:root[data-rx="horizon"] .rx-h2-figure .rx-fig-done {
  transition-duration: 250ms;
}
:root[data-rx="horizon"] .rx-h2-figure[data-fig-state="rest"] .rx-fig-rest {
  opacity: 1;
}
:root[data-rx="horizon"] .rx-h2-figure[data-fig-state="done"] .rx-fig-done {
  opacity: 1;
}
@media (max-width: 900px) {
  /* R5 item 3: 0.7vh of static-head lead put a full black viewport one flick
     past the hero on phones — a short hold, then the essay arrives */
  :root[data-rx="horizon"] #hero-canvas {
    --mx-lead-vh: 0.35;
  }
  :root[data-rx="horizon"] #manifesto-spacer {
    height: calc(35svh + 2598px) !important;
  }
  :root[data-rx="horizon"] .rx-h2-figure {
    display: none;
  }
  :root[data-rx="horizon"] .rx-hero-head img {
    max-height: 42svh;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-rx="horizon"] #hero-canvas {
    --mx-lead-vh: 0.5;
  }
  :root[data-rx="horizon"] #manifesto-spacer {
    height: calc(50svh + 2598px) !important;
  }
}

/* ---- motion: scroll-weighted — long-ease reveals (travel set in patch.js);
        keep the CSS scroll-timeline masks, they shine on dark. The bynar-style
        section scrub engine lives in patch.js and writes inline styles. ---- */
:root[data-rx="horizon"] [style*="transition"] {
  transition-duration: 1.05s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* NOBENCH (2026-08-25): the optical-bench spectrum-machine set-piece (B9 ->
   R6 item 1 -> R7 item 2) was removed per Alex — mount, videos, caption
   typer, beam/wipe/ray/parallax channels and the bench-only settled-card
   override (--card-shrink:0 / --card-settle-h:82svh) are all gone; the card
   reverts to the captured 76vw x max(42.75vw,55svh) settle and the essay
   hands off directly to the close. See remix/NOBENCH-NOTES.md. */
/* essay sign-off spacing: the closing beat hands straight to the close
   instead of a viewport of dark (tightened for the bench originally; kept
   so the essay rhythm is unchanged) */
:root[data-rx="horizon"] #manifesto .mt-28 {
  margin-top: 3rem !important;
}

/* ---- button & chip pass (FIGURE-STATE-BRIEF) ----
   Secondary CTAs ("Email Alex" hero + nav island) ride bg-white-a14, which
   the horizon token flip turns into the page field color — a true ghost on
   dark. Give them a legible glass fill + hairline; hover moves the hairline
   to the flame accent. */
:root[data-rx="horizon"] .hero-cta-light,
:root[data-rx="horizon"] .site-island-cta {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #f4f4f2 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
:root[data-rx="horizon"] .hero-cta-light:hover,
:root[data-rx="horizon"] .site-island-cta:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(177, 140, 255, 0.65) !important;
}
/* consistent pill radius across button-like controls (nav links were 8px) */
:root[data-rx="horizon"] .site-island-link {
  border-radius: 999px !important;
}
/* nav island shell rides background:var(--ink), which the horizon ink flip
   turns WHITE (white-on-white links mid-page) — dark glass instead */
:root[data-rx="horizon"] .site-island-shell {
  background: rgba(18, 19, 23, 0.88) !important;
  box-shadow: 0 0 0 1px #24262c, 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* keyboard focus: violet ring on every interactive control */
:root[data-rx="horizon"] :is(a, button):focus-visible {
  outline: 2px solid #b18cff !important;
  outline-offset: 2px;
}
/* station chips carrying inline --chip-tone-2:#a9c6e8 — the inline var beats
   any CSS var override, so recolor the tone-2 strokes on the descendants
   directly (they take color via [data-color=color-2], stroke=currentColor) */
:root[data-rx="horizon"] [style*="--chip-tone-2:#a9c6e8"] [data-color="color-2"] {
  color: #b79aff !important;
}

/* ---- mid-page cards go dark-native (R2 A3) — the octolane light-card
   interiors (dark hairlines, dark-alpha panels, white chips) re-cut for the
   #121317 card field. Attribute selectors target the captured inline styles. */
:root[data-rx="horizon"] .pillar-icon-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px #24262c !important;
}
:root[data-rx="horizon"] article [style*="background-color:rgba(10, 11, 13, 0.02)"] {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
:root[data-rx="horizon"] article [style*="background:rgba(10, 11, 13, 0.02)"] {
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16) !important;
}
:root[data-rx="horizon"] article [style*="background:rgba(10, 11, 13, 0.035)"] {
  background: rgba(255, 255, 255, 0.05) !important;
}
:root[data-rx="horizon"] article [style*="height:0.5px"] {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ---- manifesto closing CTA — a designed moment (R2 A4): display-scale
   type, white pill (via .hero-cta-dark above), spectrum seam accent */
:root[data-rx="horizon"] .hero-closing {
  gap: 2.5rem !important;
}
:root[data-rx="horizon"] .hero-closing > p:not(.rx-proofline) {
  font-family: var(--font-family-display, Inter, sans-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(52px, 6.4vw, 92px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  color: #f4f4f2 !important;
  max-width: 15ch !important;
}
:root[data-rx="horizon"] .hero-closing > p:not(.rx-proofline)::after {
  content: "";
  display: block;
  height: 1px;
  width: min(340px, 42vw);
  margin: 2.4rem auto 0;
  background: linear-gradient(90deg, transparent, #ff2fb3 25%, #7a4dff 55%, #2f6bff 80%, transparent);
  box-shadow: 0 0 22px rgba(122, 77, 255, 0.55);
}

/* ---- footer (R2 A7): the Waves backdrop becomes a faint violet monochrome
   whisper — no aurora rainbow behind the Rodriguez wordmark. The final-ask
   CTA joins the white-pill system (A6: card untouched otherwise). */
:root[data-rx="horizon"] footer#footer > div[aria-hidden="true"] {
  opacity: 0.15;
  filter: grayscale(1) sepia(1) hue-rotate(215deg) saturate(2.6) brightness(0.65);
}
:root[data-rx="horizon"] #footer a.hero-cta-light {
  background: #ffffff !important;
  color: #0a0b0d !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
:root[data-rx="horizon"] #footer a.hero-cta-light:hover {
  background: #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(255, 47, 179, 0.55),
    0 4px 28px rgba(122, 77, 255, 0.4) !important;
}

/* ---- R3 surgical fixes (2026-08-24 late) ---------------------------------
   (3) hero figure seam: the video feather mask dimmed the bright Waves streak
   over an ~80px falloff at the container edge — a readable vertical seam.
   A wide scrim BEHIND the masked videos (z:-1 inside the figure's stacking
   context) grades the streak's brightness over a ~340px ramp instead: full
   aurora outside, gently darkening from ~140px beyond the container edge,
   near-dark where the plate takes over. No readable column edge remains. */
:root[data-rx="horizon"] .rx-h2-figure::before {
  content: "";
  position: absolute;
  inset: -4% -26%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 11, 13, 0.94) 34%,
    rgba(10, 11, 13, 0.6) 58%, rgba(10, 11, 13, 0.22) 79%, rgba(10, 11, 13, 0) 100%);
}

/* (2) closing moment: reveal FAST to full white. Captured curve was
   (--cx - .35) * 1.54 — full opacity only at the very end of the range, so
   the settled-in-view state read as ~40% gray. Now the
   text is fully white by cx≈0.57 (visibility flips at .32 via .hx-close). */
:root[data-rx="horizon"] .hero-closing {
  opacity: calc((var(--cx) - 0.32) * 4) !important;
  transform: translateY(calc(max(0, 1 - (var(--cx) - 0.32) * 4) * 24px)) !important;
}
/* dark vignette behind the closing text zone (~55-65% darken) so the white
   type pops; lives on .hero-card (whose transform makes it a stacking
   context, so its children layer against it): above the essay window (z-10),
   below .hero-closing (z-20). NOT on #hero-canvas — a ::after there paints
   above the whole card, veiling the closing text. --cx inherits from
   #hero-canvas. */
:root[data-rx="horizon"] .hero-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1120px, 96vw);
  height: min(600px, 76svh);
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 11, 13, 0.72) 38%,
    rgba(10, 11, 13, 0.42) 66%, rgba(10, 11, 13, 0) 100%);
  opacity: calc((var(--cx) - 0.25) * 3.3);
}
/* (R4 item 2b, NOBENCH-retuned wording) the essay window transitions
   completely OUT before the close settles: fully gone by cx≈0.57
   — the same point the closing type reaches full white — and drifts up as
   it fades so the exit reads as motion, not a dimmer */
:root[data-rx="horizon"] .hero-essay-window {
  /* hold full brightness through the essay's last beat (cx<0.18),
     then exit steeply — gone by cx≈0.56, the frame the close hits full white */
  opacity: calc(1 - (var(--cx) - 0.18) * 2.6) !important;
  transform: translateY(calc(var(--cx) * -44px));
}
/* closing CTA: white pill at full opacity with the spectrum hairline at rest */
:root[data-rx="horizon"] .hero-closing .hero-cta-dark {
  box-shadow: 0 0 0 1.5px rgba(255, 47, 179, 0.55),
    0 4px 28px rgba(122, 77, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ==== R7 item 3 — the closing CTA is a powered moment =====================
   1. Six spectral rays (the six station hues) converge on the button from
      the edges of the stage, arriving with the close (--cx) and flaring on
      hover — the machine's light feeding the button.
   2. The button is magnetic (patch.js writes --mgx/--mgy on fine pointers;
      the `translate` property keeps clear of the captured transform) and a
      seam-light sweep crosses the pill on hover: powering the machine.
   3. Proof line under it (base markup, DRAFT copy, verified numbers). */
:root[data-rx="horizon"] .hero-closing::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc((var(--cx, 0) - 0.35) * 2.6);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  background: conic-gradient(from 8deg at 50% 54%,
    transparent 0deg, rgba(255, 106, 0, 0.14) 6deg, transparent 13deg,
    transparent 55deg, rgba(255, 77, 90, 0.13) 62deg, transparent 69deg,
    transparent 115deg, rgba(255, 47, 179, 0.15) 122deg, transparent 129deg,
    transparent 175deg, rgba(188, 62, 217, 0.13) 182deg, transparent 189deg,
    transparent 235deg, rgba(122, 77, 255, 0.15) 242deg, transparent 249deg,
    transparent 295deg, rgba(47, 107, 255, 0.13) 302deg, transparent 309deg);
  /* clear core so the type + button stay clean; rays read as arriving */
  -webkit-mask-image: radial-gradient(circle at 50% 54%,
    transparent 0 88px, #000 220px, #000 58%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 54%,
    transparent 0 88px, #000 220px, #000 58%, transparent 78%);
}
:root[data-rx="horizon"] .hero-closing:has(.hero-cta-dark:hover)::before {
  opacity: 1;
  transform: scale(1.045);
}
:root[data-rx="horizon"] .hero-closing .hero-cta-dark {
  position: relative;
  overflow: hidden;
  translate: var(--mgx, 0px) var(--mgy, 0px);
  transition: translate 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
:root[data-rx="horizon"] .hero-closing .hero-cta-dark:hover {
  box-shadow: 0 0 0 1.5px rgba(255, 47, 179, 0.85),
    0 6px 34px rgba(122, 77, 255, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-rx="horizon"] .hero-closing .hero-cta-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%,
    rgba(255, 47, 179, 0.28) 46%, rgba(122, 77, 255, 0.32) 54%, transparent 68%);
}
:root[data-rx="horizon"] .hero-closing .hero-cta-dark:hover::before {
  animation: rx-sweep 0.85s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes rx-sweep {
  to { transform: translateX(130%); }
}
:root[data-rx="horizon"] .rx-proofline {
  color: rgba(244, 244, 242, 0.58);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-rx="horizon"] .hero-closing .hero-cta-dark:hover::before {
    animation: none;
  }
  :root[data-rx="horizon"] .hero-closing::before {
    transition: none;
  }
}

/* (R4 item 3) Greek statue cutout REMOVED from the proof section — the head
   belongs to the hero now. Proof-card cleanup: consistent inner rhythm. */
:root[data-rx="horizon"] section[aria-labelledby="feature-pillars-heading"] article h3 {
  color: #f4f4f2 !important;
}

/* ==== R6 (ALEX-FEEDBACK-R5) — motion & brand-graphics round ================ */

/* ---- item 2: head->body stitch — seam flare + filament surge -------------
   --rxg is a bell channel written by startHeroHandoff, peaking at the moment
   the head docks (the dwell). The flare sits on the figure's head slot
   (14.5% from frame top — the same measured slot the morph targets); the
   ::after filament surges down toward the emerging chest. */
/* R7 item 1 — the cover over the figure's OWN head: a near-black feathered
   blob riding the measured live slot (top = --rx-slot-cy, written per frame).
   The figure container is screen-blended against the near-black field, so a
   field-colored blob simply erases the video's head there — cheap (no mask
   repaint on 4K video), GPU-friendly, and it makes the figure arrive
   HEADLESS: the traveling hero head is the only head on stage until the
   landing crossfade releases the cover (--rxm 1 -> 0 in sync with --rxo). */
:root[data-rx="horizon"] .rx-headhole {
  position: absolute;
  left: 48.52%;
  top: var(--rx-slot-cy, 14.03%);
  width: 40%;
  aspect-ratio: 12 / 13;
  transform: translate(-50%, -50%);
  opacity: var(--rxm, 1);
  pointer-events: none;
  background: radial-gradient(closest-side, #0a0b0d 58%,
    rgba(10, 11, 13, 0.9) 74%, rgba(10, 11, 13, 0) 100%);
}
:root[data-rx="horizon"] .rx-stitch {
  position: absolute;
  left: 50%;
  top: var(--rx-slot-cy, 14.5%); /* R7: the flare rides the live slot */
  width: min(440px, 52%);
  aspect-ratio: 3 / 1;
  transform: translate(-50%, -50%) scale(calc(0.7 + var(--rxg, 0) * 0.5));
  opacity: var(--rxg, 0);
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.85) 0%, rgba(255, 47, 179, 0.5) 24%,
    rgba(122, 77, 255, 0.38) 48%, transparent 74%);
  filter: blur(6px);
}
:root[data-rx="horizon"] .rx-stitch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 2px;
  height: 330%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.9), rgba(255, 47, 179, 0.55) 30%,
    rgba(122, 77, 255, 0.45) 62%, transparent);
}

/* ---- item 3: essay typography + motion ----------------------------------
   Spine pull-quote at display scale with a spectrum seam underline; drop cap
   on the lede; when the per-line engine is active (.rx-lines on html —
   desktop, motion-full only) the per-paragraph blur/opacity that behaviors.js
   writes inline is neutralized and the line vars take over. */
:root[data-rx="horizon"] #manifesto .site-lede::first-letter {
  font-family: var(--font-family-editorial, Georgia, serif);
  font-size: 3.15em;
  line-height: 0.82;
  float: left;
  padding: 0.05em 0.14em 0 0;
  color: #f4f4f2;
}
:root[data-rx="horizon"] #manifesto .rx-spine {
  font-family: var(--font-family-display, Inter, sans-serif) !important;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: #f4f4f2 !important;
  max-width: 19ch;
  margin-block: 2.8rem 2.6rem !important;
}
:root[data-rx="horizon"] #manifesto .rx-spine::after {
  content: "";
  display: block;
  height: 1px;
  width: min(300px, 52%);
  margin-top: 1.5rem;
  background: linear-gradient(90deg, #ff6a00, #ff2fb3 30%, #7a4dff 65%, #2f6bff 92%, transparent);
  box-shadow: 0 0 18px rgba(122, 77, 255, 0.5);
}
:root[data-rx="horizon"].rx-lines #manifesto p[data-o] {
  opacity: 1 !important;
  filter: none !important;
}
:root[data-rx="horizon"] #manifesto .rx-w {
  display: inline-block;
}
/* station rail — margin progress motif: six station nodes in the six spectrum
   hues; the beam climbs the rail (--rxe = essay progress) and lights each
   node as the essay advances. Wide viewports only; rides the sticky card. */
:root[data-rx="horizon"] .rx-rail {
  position: absolute;
  left: max(30px, calc(50% - 34vw - 120px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 12;
  /* visible through the essay only: in after the card settles (--hx), out
     before the closing (--cx) AND as the essay parks (--rxe exit ramp runs
     0.70 -> 0.80 — NOBENCH: rxe now tops out ~1.0 at the essay's end) */
  opacity: calc(min(var(--hx, 0) * 1.6, 1)
    * (1 - min(var(--cx, 0) * 2.5, 1))
    * (1 - clamp(0, (var(--rxe, 0) - 0.7) * 10, 1)));
  pointer-events: none;
  font-family: var(--font-family-code, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
}
:root[data-rx="horizon"] .rx-rail::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(244, 244, 242, 0.13);
}
:root[data-rx="horizon"] .rx-rail .rx-rail-beam {
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, #ff6a00, #ff4d5a, #ff2fb3, #bc3ed9, #7a4dff, #2f6bff);
  box-shadow: 0 0 10px rgba(122, 77, 255, 0.6);
  transform-origin: top;
  transform: scaleY(var(--rxe, 0));
}
:root[data-rx="horizon"] .rx-rail-it {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #b9bbc0;
  opacity: calc(0.3 + 0.7 * clamp(0, (var(--rxe, 0) - var(--thr, 0)) * 14, 1));
}
:root[data-rx="horizon"] .rx-rail-it i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stc, #7a4dff);
  box-shadow: 0 0 10px var(--stc, #7a4dff);
}
@media (max-width: 1279px) {
  :root[data-rx="horizon"] .rx-rail { display: none; }
}

/* ---- item 4: proof section — dark-native chart + six lit stations --------
   The inner bg-white-a14 panels (chart plate, station plate) go transparent
   with a hairline: no white/flat card inside the dark article. */
:root[data-rx="horizon"] section[aria-labelledby="feature-pillars-heading"] div.bg-white-a14.rounded-\[16px\] {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}
/* chart re-theme for the dark field (base SVG ships light-panel inks) */
:root[data-rx="horizon"] #run-chart .rc-glab { fill: #b9bbc0; }
:root[data-rx="horizon"] #run-chart .rc-slab { fill: #ff7ad1; }
:root[data-rx="horizon"] #run-chart .rc-month { fill: #9a9da3; }
:root[data-rx="horizon"] #run-chart .rc-base { stroke: rgba(244, 244, 242, 0.18); }
:root[data-rx="horizon"] #run-chart .rc-gross {
  fill: rgba(143, 107, 255, 0.09);
  stroke: rgba(177, 140, 255, 0.45);
}
/* scroll-linked growth: bars rise from the baseline, staggered per month
   (--chp written by the section engine on the chart article; default 1 so
   reduced-motion / engine-off shows the full chart) */
:root[data-rx="horizon"] #run-chart rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(clamp(0.004, (var(--chp, 1) - var(--i, 0) * 0.055) * 1.45, 1));
}
:root[data-rx="horizon"] #run-chart .rc-col text {
  opacity: clamp(0, (var(--chp, 1) - 0.38 - var(--i, 0) * 0.055) * 3, 1);
}
/* station tiles: dark glass, per-station spectrum hue (the four brand hues +
   two derived midpoints complete the orange->blue ramp), scroll-staggered
   light-up (--stp on the grid article; --stl per tile), and a beam that
   passes through the six like the machine's own light. */
:root[data-rx="horizon"] .badge-chip[data-st] {
  --stl: clamp(0, calc(var(--stp, 1) * 6.6 - var(--sti, 0)), 1);
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
:root[data-rx="horizon"] .badge-chip[data-st="offer"] { --stc: #ff6a00; --sti: 0; }
:root[data-rx="horizon"] .badge-chip[data-st="funnel"] { --stc: #ff4d5a; --sti: 1; }
:root[data-rx="horizon"] .badge-chip[data-st="ads"] { --stc: #ff2fb3; --sti: 2; }
:root[data-rx="horizon"] .badge-chip[data-st="followup"] { --stc: #bc3ed9; --sti: 3; }
:root[data-rx="horizon"] .badge-chip[data-st="salesfloor"] { --stc: #7a4dff; --sti: 4; }
:root[data-rx="horizon"] .badge-chip[data-st="numbers"] { --stc: #2f6bff; --sti: 5; }
/* R7 item 4 — the grid is a PROCESS DIVE now (base ships .rx-st tiles with
   name + half badge + 1-2 sentence copy and a per-tile beam segment forming
   the continuous offer->numbers spectrum line). Horizon re-theme: dark
   glass, hue-lit icon + segment, copy that opens with the scroll stagger
   (--stl per tile off --stp; default 1 = fully open when the engine is off,
   which is also the reduced-motion + base state). */
:root[data-rx="horizon"] .badge-chip[data-st] .station-icon {
  color: var(--stc);
  opacity: calc(0.3 + 0.7 * var(--stl));
  filter: drop-shadow(0 0 calc(2px + 7px * var(--stl)) var(--stc));
}
:root[data-rx="horizon"] .rx-st-top {
  color: #e6e7e9;
}
:root[data-rx="horizon"] .rx-st::before {
  transform-origin: 0 50%;
  transform: scaleX(var(--stl, 1));
  box-shadow: 0 0 calc(10px * var(--stl, 1)) color-mix(in srgb, var(--stc) 55%, transparent);
}
:root[data-rx="horizon"] .rx-st-half {
  color: rgba(244, 244, 242, 0.6);
  box-shadow: inset 0 0 0 0.5px rgba(244, 244, 242, 0.22);
}
:root[data-rx="horizon"] .rx-st-copy {
  color: #b9bbc0;
  opacity: calc(0.08 + 0.92 * var(--stl, 1));
  translate: 0 calc((1 - var(--stl, 1)) * 8px);
}
:root[data-rx="horizon"] .badge-marquee-grid {
  position: relative;
}
:root[data-rx="horizon"] .badge-marquee-grid::after {
  content: "";
  position: absolute;
  top: -6%;
  bottom: -6%;
  width: 90px;
  left: calc(-12% + var(--stp, 1) * 118%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(177, 140, 255, 0.13), transparent);
  opacity: calc(4 * var(--stp, 1) * (1 - var(--stp, 1)));
}
/* nav island duck (item 4 fix): while the island floats over the proof
   section's text blocks it drops to a ghost so the copy stays readable;
   hover/focus restores it instantly. Attribute written by startIslandDuck. */
:root[data-rx="horizon"][data-rx-navduck] nav[aria-label="Site"] {
  opacity: 0.1 !important;
}
:root[data-rx="horizon"][data-rx-navduck] nav[aria-label="Site"]:hover,
:root[data-rx="horizon"][data-rx-navduck] nav[aria-label="Site"]:focus-within {
  opacity: 1 !important;
}