/* hero--rx-media-stack: one stacked column of copy laid over the site's media. forge's
   full-bleed-video supplies the media layer (the clip covers the band at forge's own height,
   the smaller of 88 percent of the viewport and 860px, so a centred subject stays whole), its
   scrim and the pause button, rendered media only; this part's copy shares the same grid
   cell, centred vertically. Terminal register: a large monospaced
   uppercase heading held to twelve characters a line with a blinking block cursor, a small
   accent eyebrow, a measured lead, square actions (the first behind a > prompt) and a row of
   small status pairs, values in the accent. No rule above or below the band. */
.s-hero--rx-media-stack { display: grid; isolation: isolate; border: 0; }
.s-hero--rx-media-stack > .s-hero,
.s-hero--rx-media-stack > .rx-stack-copy { grid-area: 1 / 1; }
.s-hero--rx-media-stack .rx-stack-copy {
  position: relative; z-index: 1; align-self: center;
  padding-block: var(--s7); pointer-events: none;
}
.s-hero--rx-media-stack .rx-stack-copy > * { pointer-events: auto; }
.s-hero--rx-media-stack .rx-stack-eyebrow {
  font-family: var(--font-mono); font-size: calc(var(--t-sm) * 0.9375); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.s-hero--rx-media-stack .rx-stack-title {
  max-width: 12ch; margin-top: var(--s5); font-family: var(--font-mono); font-size: var(--t-hero);
  font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.02;
  color: var(--fg); overflow-wrap: break-word; text-wrap: wrap;
}
.s-hero--rx-media-stack .rx-stack-cursor {
  display: inline-block; width: 0.5em; height: 0.09em; margin-left: 0.12em;
  vertical-align: baseline; background: var(--accent);
}
/* The origin line (forge_hero_origin) as a status chip under the headline: a thin frame on a
   half-tone of the ground, the pixel flag, the signed wording in monospaced capitals. */
.s-hero--rx-media-stack .rx-stack-origin {
  gap: calc(var(--s3) + var(--s1) / 2); width: fit-content; max-width: 100%;
  padding: calc(var(--s2) + var(--s1) / 2) var(--s4) calc(var(--s2) + var(--s1) / 2) var(--s3);
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 60%, transparent);
  font-family: var(--font-mono); font-size: calc(var(--t-sm) * 0.95); font-weight: var(--w-semi);
  letter-spacing: 0.16em; line-height: 1.35; text-transform: uppercase; color: var(--fg);
}
.s-hero--rx-media-stack .rx-stack-lead {
  max-width: 46ch; margin-top: var(--s5); font-family: var(--font-body); font-size: var(--t-base);
  line-height: var(--lh-body); color: var(--muted);
}
.s-hero--rx-media-stack .rx-stack-actions { display: flex; flex-wrap: wrap; gap: calc(var(--s3) + var(--s1) / 2); margin-top: calc(var(--s6) + var(--s1)); }
.s-hero--rx-media-stack .rx-stack-action { display: inline-flex; }
.s-hero--rx-media-stack .rx-stack-actions .btn {
  min-height: var(--tap); padding: var(--s4) calc(var(--s5) - var(--s1) / 2); border-radius: 0;
  font-family: var(--font-mono); font-size: calc(var(--t-sm) * 1.016); font-weight: var(--w-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.s-hero--rx-media-stack .rx-stack-actions .btn-icon { display: none; }
.s-hero--rx-media-stack .rx-stack-actions .btn--cta::before { content: ">"; content: ">" / ""; }
.s-hero--rx-media-stack .rx-stack-actions .btn--ghost { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.s-hero--rx-media-stack .rx-stack-actions .btn--ghost:hover { background: var(--accent); color: var(--on-cta); }
.s-hero--rx-media-stack .rx-stack-actions .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.s-hero--rx-media-stack .rx-stack-facts {
  display: flex; flex-wrap: wrap; gap: var(--s3) calc(var(--s5) + var(--s1) / 2); margin: calc(var(--s7) + var(--s1) * 1.5) 0 0; padding: 0;
  list-style: none; font-family: var(--font-mono); font-size: calc(var(--t-xs) * 1.074); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.s-hero--rx-media-stack .rx-stack-fact-label::after { content: ":"; }
.s-hero--rx-media-stack .rx-stack-fact-value { color: var(--accent); }
.s-hero--rx-media-stack .hero-pause { border-radius: 0; }

@media (max-width: 767px) {
  .s-hero--rx-media-stack .rx-stack-copy { align-self: end; padding-block: var(--s7); }
  .s-hero--rx-media-stack .rx-stack-action { flex: 1 1 100%; }
  .s-hero--rx-media-stack .rx-stack-actions .btn { width: 100%; }
}