/*
 * /reliability — The reliability layer.  Brief sect 19.2 P1.
 * NOUN = LAYER.
 *
 * Five acts:
 *   1. Centered hero — H1 sect 9.3 verbatim across 3 lines
 *   2. Asymmetric editorial pull-quote (kicker L, oversize R)
 *   3. Reliability stack — sticky-stage scroll-paint, six
 *      layers (Access / Rendering / Sessions / Retries /
 *      Observability / Compliance) stack up one by one
 *   4. WARM CREAM ground trust strip (SOC 2 + DPA + SSO + Audit)
 *      with body.is-on-light topbar inversion
 *   5. Centered closer back on dark
 *
 * DS-strict: btn-marketing, cta-stack atoms, token colours via
 * DS palette.  No invented hex.
 */

@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

.back-to-top { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   ACT 1 — Centered hero
═══════════════════════════════════════════════════════════ */

.rl-hero {
  position: relative;
  padding: clamp(160px, 20vh, 220px) clamp(24px, 5vw, 56px) clamp(96px, 12vh, 160px);
  background: var(--surface);
  overflow: hidden;
}

.rl-hero-frame {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 3vw, 44px);
}

.rl-hero-kicker { margin: 0; }

.rl-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.028em;
  line-height: 1.02;
}
.rl-hero-h1 > span { display: block; }



.rl-hero-h1-l2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
}


.rl-hero-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
}

.rl-hero-cta {}

/* Hero orbit — continuous SVG ring rotation + station pulse.
   Sits beneath the H1, just decorative continuous motion to
   anchor the layer concept. */
.rl-hero-orbit {
  width: clamp(280px, 36vw, 460px);
  aspect-ratio: 1 / 1;
  margin-top: clamp(8px, 1.6vw, 20px);
  pointer-events: none;
}
.rl-hero-orbit-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rl-hero-orbit-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--text-primary) 12%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  animation: rl-hero-orbit-spin 60s linear infinite;
  transform-origin: 200px 200px;
}
.rl-hero-orbit-dot {
  fill: color-mix(in srgb, var(--text-primary) 24%, transparent);
  transition: fill 320ms ease, r 320ms ease;
}
.rl-hero-orbit-station[data-active] .rl-hero-orbit-dot {
  fill: #7C4FE8;
}
.rl-hero-orbit-label {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--text-primary) 55%, transparent);
  transition: fill 320ms ease;
}
.rl-hero-orbit-station[data-active] .rl-hero-orbit-label {
  fill: var(--text-primary);
}
.rl-hero-orbit-pulse {
  fill: #7C4FE8;
  filter: drop-shadow(0 0 8px rgba(124, 79, 232, 0.6));
  opacity: 0;
  animation:
    rl-hero-orbit-march 9.6s steps(6) infinite,
    rl-hero-orbit-pulse 1.6s ease-in-out infinite;
}
@keyframes rl-hero-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes rl-hero-orbit-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes rl-hero-orbit-march {
  0%     { transform: translate(200px, 40px); }
  16.66% { transform: translate(338.6px, 120px); }
  33.33% { transform: translate(338.6px, 280px); }
  50%    { transform: translate(200px, 360px); }
  66.66% { transform: translate(61.4px, 280px); }
  83.33% { transform: translate(61.4px, 120px); }
  100%   { transform: translate(200px, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .rl-hero-orbit-ring,
  .rl-hero-orbit-pulse { animation: none; }
  .rl-hero-orbit-pulse { opacity: 0.6; transform: translate(200px, 40px); }
}

/* ═══════════════════════════════════════════════════════════
   ACT 2 — Run a request (interactive scenario journey)
═══════════════════════════════════════════════════════════ */

.rl-run {
  position: relative;
  padding: clamp(96px, 14vh, 180px) clamp(24px, 5vw, 56px);
  background: var(--surface);
}

.rl-run-frame {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.5vw, 56px);
}

.rl-run-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
}

.rl-run-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}
.rl-run-h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
}

/* Scenario picker — DS seg-control atom.  Page-level override
   just constrains where it sits in the column. */
.rl-run-scenarios {
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}

/* The vertical journey.  Start step on top, six layer lanes
   in the middle, delivered step on the bottom.  A travelling
   pulse runs down the left edge during a run. */
.rl-run-journey {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.rl-run-step {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.rl-run-step--end { border-bottom: 0; border-top: 1px solid var(--border-subtle); padding: 18px 0 0; }

.rl-run-step-tag {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.rl-run-step-code {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body);
  color: var(--text-primary);
  transition: color 240ms ease;
}
.rl-run-step--end .rl-run-step-code { color: #7C4FE8; }

/* BU variant: same slot + colour treatment, plain-language font so the
   delivered output reads as a sentence, not a JSON payload. */
.rl-run-step-code--bu {
  font-family: var(--font-base);
  letter-spacing: 0;
}

.rl-run-step-meta {
  font-family: var(--font-base);
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: right;
}

/* Six layer lanes — full-width rows, hairline-divided, NO box
   container.  A lane lights when it absorbs work for the
   active scenario. */
.rl-run-lanes {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.rl-run-lane {
  position: relative;
  display: grid;
  grid-template-columns: 100px 220px minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(18px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: opacity 320ms ease;
  opacity: 0.55;
}

.rl-run-lane-num {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  transition: color 240ms ease;
}

.rl-run-lane-name {
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--mkt-h4);
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  transition: color 240ms ease;
}

.rl-run-lane-action {
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.5;
  color: var(--text-tertiary);
  transition: color 240ms ease, opacity 320ms ease;
}

.rl-run-lane.is-active {
  opacity: 1;
}
.rl-run-lane.is-active .rl-run-lane-num { color: #7C4FE8; }
.rl-run-lane.is-active .rl-run-lane-name { color: var(--text-primary); }
.rl-run-lane.is-active .rl-run-lane-action { color: var(--text-secondary); }

.rl-run-lane.is-firing .rl-run-lane-name {
  animation: rl-run-fire 420ms ease;
}
@keyframes rl-run-fire {
  0%   { letter-spacing: -0.02em; }
  60%  { letter-spacing: 0em; }
  100% { letter-spacing: -0.02em; }
}

/* Travelling pulse — a small dot that slides down the left
   gutter as the journey plays.  Pure CSS transform driven
   from JS via `--y` custom property. */
.rl-run-pulse {
  position: absolute;
  left: 36px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #7C4FE8;
  box-shadow: 0 0 0 4px color-mix(in srgb, #7C4FE8 28%, transparent);
  transform: translate3d(0, var(--y, 0px), 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  opacity: 0;
  pointer-events: none;
}
.rl-run-journey.is-running .rl-run-pulse { opacity: 1; }

.rl-run-replay-row {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

/* DS link-cta is built for <a>; on a <button>, browser
   native chrome (background, border, padding, border-radius)
   bleeds through.  Reset locally so the replay button looks
   identical to a link-cta. */
/* @pattern button-link-cta-reset START
   .link-cta is shipped for <a> only — on a native <button> the OS chrome
   (background, border, padding, border-radius) bleeds through and the
   link reads as a chunky pink box.  Drop this block into any page that
   mounts .link-cta on a <button>.  Port verbatim, no recolor. */
/* button.link-cta reset lives in _shared/components.css (shared). */

/* IO entry — head + scenarios + journey + replay fade in. */
.rl-run[data-rl-run] > .rl-run-frame > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-run[data-rl-run].is-in > .rl-run-frame > * { opacity: 1; transform: none; }
.rl-run[data-rl-run].is-in > .rl-run-frame > *:nth-child(1) { transition-delay:   0ms; }
.rl-run[data-rl-run].is-in > .rl-run-frame > *:nth-child(2) { transition-delay: 120ms; }
.rl-run[data-rl-run].is-in > .rl-run-frame > *:nth-child(3) { transition-delay: 260ms; }
.rl-run[data-rl-run].is-in > .rl-run-frame > *:nth-child(4) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .rl-run[data-rl-run] > .rl-run-frame > * { opacity: 1; transform: none; transition: none; }
  .rl-run-pulse { transition: none; }
  .rl-run-lane.is-firing .rl-run-lane-name { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 3 — The contract (editorial manifesto, dark)
═══════════════════════════════════════════════════════════ */

.rl-pact {
  position: relative;
  padding: clamp(96px, 14vh, 180px) clamp(24px, 5vw, 56px);
  background: var(--surface);
}

.rl-pact-frame {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}

.rl-pact-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
  align-self: flex-end;
  text-align: right;
}

.rl-pact-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}
.rl-pact-h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
}

.rl-pact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.rl-pact-line {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: padding 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-pact-line:nth-child(even) { padding-left: clamp(20px, 6vw, 96px); }

.rl-pact-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
  align-self: start;
  padding-top: 12px;
  transition: color 240ms ease;
}

.rl-pact-promise {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}
.rl-pact-promise em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
}

.rl-pact-mech {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: 14px;
  max-width: 64ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-tertiary);
  opacity: 0;
  max-height: 0;
  transform: translateY(-6px);
  overflow: hidden;
  transition: opacity 280ms ease, max-height 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms ease, color 240ms ease, margin-top 320ms ease;
}

.rl-pact-line:hover,
.rl-pact-line:focus-within,
.rl-pact-line.is-open {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.rl-pact-line:hover .rl-pact-num,
.rl-pact-line:focus-within .rl-pact-num,
.rl-pact-line.is-open .rl-pact-num { color: #7C4FE8; }
.rl-pact-line:hover .rl-pact-mech,
.rl-pact-line:focus-within .rl-pact-mech,
.rl-pact-line.is-open .rl-pact-mech {
  opacity: 1;
  max-height: 200px;
  transform: none;
  color: var(--text-secondary);
}

/* IO entry — each pact line fades up in sequence on first
   scroll into view. */
.rl-pact[data-rl-pact] .rl-pact-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1), padding 320ms ease;
}
.rl-pact[data-rl-pact].is-in .rl-pact-line { opacity: 1; transform: none; }
.rl-pact[data-rl-pact].is-in .rl-pact-line:nth-child(1) { transition-delay:   0ms; }
.rl-pact[data-rl-pact].is-in .rl-pact-line:nth-child(2) { transition-delay: 110ms; }
.rl-pact[data-rl-pact].is-in .rl-pact-line:nth-child(3) { transition-delay: 220ms; }
.rl-pact[data-rl-pact].is-in .rl-pact-line:nth-child(4) { transition-delay: 330ms; }
.rl-pact[data-rl-pact].is-in .rl-pact-line:nth-child(5) { transition-delay: 440ms; }
.rl-pact[data-rl-pact].is-in .rl-pact-line:nth-child(6) { transition-delay: 550ms; }

@media (prefers-reduced-motion: reduce) {
  .rl-pact[data-rl-pact] .rl-pact-line { opacity: 1; transform: none; transition: none; }
  .rl-pact-mech { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 4 — Trust strip (on dark, DS tokens)
═══════════════════════════════════════════════════════════ */

.rl-trust-band {
  position: relative;
  background: var(--surface);
  isolation: isolate;
}

.rl-trust {
  position: relative;
  padding: clamp(96px, 14vh, 180px) clamp(24px, 5vw, 56px);
}

.rl-trust-frame {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.rl-trust-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
}

.rl-trust-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--text-primary);
  text-wrap: balance;
}
.rl-trust-h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
}

.rl-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.rl-trust-item {
  display: grid;
  grid-template-columns: 64px 220px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 220ms ease, padding 220ms ease;
}
.rl-trust-item:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  padding-left: 12px;
}
.rl-trust-item:hover .rl-trust-num { color: #7C4FE8; }

/* Atlas-roll entry — items slide from the left, staggered.
   --i is set per-item via inline style. */
.rl-trust-list[data-rl-trust-list] .rl-trust-item {
  opacity: 0;
  transform: translateX(-24px);
}
.rl-trust-list[data-rl-trust-list].is-in .rl-trust-item {
  opacity: 1;
  transform: none;
  transition: opacity 540ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms),
              transform 540ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms),
              background 220ms ease,
              padding 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .rl-trust-list[data-rl-trust-list] .rl-trust-item { opacity: 1; transform: none; transition: none; }
}

.rl-trust-num {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.rl-trust-name {
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.018em;
  color: var(--text-primary);
}

.rl-trust-line {
  font-family: var(--font-base);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.rl-trust-foot {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--text-tertiary);
}


/* ═══════════════════════════════════════════════════════════
   ACT 5 — Centered closer (back on dark)
═══════════════════════════════════════════════════════════ */

.rl-end {
  position: relative;
  padding: clamp(140px, 20vh, 220px) clamp(20px, 5vw, 80px) clamp(120px, 14vh, 200px);
  display: flex;
  justify-content: center;
  text-align: center;
  background: var(--surface);
}

.rl-end-frame {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vh, 40px);
}

.rl-end-kicker { margin: 0; }

.rl-end-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}
.rl-end-h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
}

.rl-end-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
}

.rl-end-cta { margin-top: clamp(20px, 3vh, 36px); }

.rl-end-frame[data-rl-end] > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}
.rl-end-frame[data-rl-end].is-in > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.rl-end-frame[data-rl-end].is-in > *:nth-child(1) { transition-delay: 0ms; }
.rl-end-frame[data-rl-end].is-in > *:nth-child(2) { transition-delay: 120ms; }
.rl-end-frame[data-rl-end].is-in > *:nth-child(3) { transition-delay: 280ms; }
.rl-end-frame[data-rl-end].is-in > *:nth-child(4) { transition-delay: 420ms; }

/* ═══════════════════════════════════════════════════════════
   Wide-desktop tiers (1600 / 1920 / 2400)

   Per-act framing breaks the central column so each act
   commits to its own width + alignment rhythm.  Hero stays
   centered, Act 2 anchors LEFT (request flows down the
   left lane), Act 3 anchors RIGHT (the manifesto's H2 is
   already right-aligned), Act 4 spans wide for the ledger,
   Act 5 stays centered.
═══════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .rl-hero-frame { max-width: 1280px; }
  .rl-hero-h1-l1, .rl-hero-h1-l2, 
  .rl-hero-sub   { max-width: 64ch; font-size: var(--mkt-body); }

  .rl-run        { padding: clamp(120px, 14vh, 200px) clamp(56px, 6vw, 96px); }
  .rl-run-frame  { max-width: 1440px; margin-left: clamp(56px, 8vw, 140px); margin-right: auto; }
  .rl-run-head   { max-width: none; }
  .rl-run-h2     { font-size: var(--mkt-hero); max-width: 24ch; }
  .rl-run-lane   { grid-template-columns: 120px 280px minmax(0, 1fr); }

  .rl-pact       { padding: clamp(120px, 14vh, 200px) clamp(56px, 6vw, 96px); }
  .rl-pact-frame { max-width: 1520px; margin-right: clamp(56px, 8vw, 140px); margin-left: auto; }
  .rl-pact-head  { max-width: none; }
  
  .rl-pact-h2    { font-size: var(--mkt-hero); max-width: 22ch; }
  .rl-pact-line  { grid-template-columns: 100px minmax(0, 1fr); }
  .rl-pact-mech  { max-width: 72ch; }

  .rl-trust       { padding: clamp(120px, 14vh, 200px) clamp(56px, 6vw, 96px); }
  .rl-trust-frame { max-width: 1520px; }
  .rl-trust-head  { max-width: none; }
  .rl-trust-h2   { font-size: clamp(44px, 3.4vw, 72px); max-width: 24ch; }
  .rl-trust-item { grid-template-columns: 96px 280px minmax(0, 1fr); }

  .rl-end-frame  { max-width: 1280px; }
  .rl-end-h2     { font-size: clamp(72px, 7vw, 160px); }
  .rl-end-sub    { max-width: 64ch; font-size: var(--mkt-lead); }
}

@media (min-width: 1920px) {
  .rl-hero-frame { max-width: 1520px; }
  .rl-hero-h1-l1, .rl-hero-h1-l2, 

  .rl-run        { padding: clamp(140px, 14vh, 220px) clamp(72px, 6vw, 120px); }
  .rl-run-frame  { max-width: 1720px; margin-left: clamp(80px, 7vw, 180px); }
  .rl-run-h2     { font-size: clamp(56px, 4.2vw, 100px); max-width: 22ch; }
  .rl-run-lane   { grid-template-columns: 140px 320px minmax(0, 1fr); padding: clamp(22px, 2vw, 32px) 0; }
  .rl-run-lane-name { font-size: var(--mkt-h3); }
  .rl-run-lane-action { font-size: var(--mkt-body); }
  .rl-run-step-code { font-size: var(--mkt-lead); }

  .rl-pact       { padding: clamp(140px, 14vh, 220px) clamp(72px, 6vw, 120px); }
  .rl-pact-frame { max-width: 1800px; margin-right: clamp(80px, 7vw, 180px); }
  
  .rl-pact-h2    { font-size: clamp(52px, 4.2vw, 88px); max-width: 20ch; }
  .rl-pact-line:nth-child(even) { padding-left: clamp(60px, 8vw, 160px); }
  .rl-pact-mech  { font-size: var(--mkt-body); }

  .rl-trust       { padding: clamp(140px, 14vh, 220px) clamp(72px, 6vw, 120px); }
  .rl-trust-frame { max-width: 1800px; }
  .rl-trust-h2   { font-size: clamp(52px, 3.6vw, 84px); max-width: 22ch; }
  .rl-trust-item { grid-template-columns: 120px 320px minmax(0, 1fr); padding: clamp(22px, 2.4vw, 32px) 0; }
  .rl-trust-name { font-size: var(--mkt-h4); }
  .rl-trust-line { font-size: var(--mkt-body); }

  .rl-end-frame  { max-width: 1520px; }
}

@media (min-width: 2400px) {
  .rl-hero-frame { max-width: 1680px; }
  .rl-hero-h1-l1, .rl-hero-h1-l2, 

  .rl-run        { padding: clamp(160px, 14vh, 260px) clamp(96px, 6vw, 160px); }
  .rl-run-frame  { max-width: 1960px; margin-left: clamp(100px, 7vw, 240px); }
  
  .rl-run-lane   { grid-template-columns: 180px 380px minmax(0, 1fr); }
  .rl-run-lane-name { font-size: var(--mkt-h2); }

  .rl-pact       { padding: clamp(160px, 14vh, 260px) clamp(96px, 6vw, 160px); }
  .rl-pact-frame { max-width: 2040px; margin-right: clamp(100px, 7vw, 240px); }
  
  

  .rl-trust       { padding: clamp(160px, 14vh, 260px) clamp(96px, 6vw, 160px); }
  .rl-trust-frame { max-width: 2040px; }
  .rl-trust-h2   { font-size: clamp(60px, 3.8vw, 96px); }
  .rl-trust-item { grid-template-columns: 160px 380px minmax(0, 1fr); }

  .rl-end-frame  { max-width: 1760px; }
}

/* ═══════════════════════════════════════════════════════════
   Responsive collapses
═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .rl-run-step,
  .rl-run-lane { grid-template-columns: 60px minmax(0, 1fr); }
  .rl-run-step-meta { grid-column: 2; text-align: left; }
  .rl-run-lane-action { grid-column: 2; }
  .rl-run-pulse { left: 22px; }
  .rl-pact-line { grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; }
  .rl-pact-line:nth-child(even) { padding-left: clamp(20px, 6vw, 48px); }
  .rl-trust-item { grid-template-columns: 56px 160px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .rl-hero { padding: clamp(120px, 14vh, 160px) clamp(16px, 4vw, 24px) clamp(64px, 8vh, 96px); }
  /* Left-aligned editorial hero on mobile (matches the rest of the page,
     which is all left-anchored); the centered desktop treatment doesn't
     carry to a phone. */
  .rl-hero-frame { gap: clamp(20px, 4vw, 32px); width: 100%; align-items: flex-start; text-align: left; }
  .rl-hero-h1 { width: 100%; text-wrap: wrap; overflow-wrap: anywhere; word-break: break-word; }
  .rl-hero-h1 > span { width: 100%; }
  .rl-hero-h1-l1, .rl-hero-h1-l2, .rl-hero-h1-l3 { font-size: var(--mkt-h3); letter-spacing: -0.022em; line-height: 1.05; }
  .rl-hero-sub { font-size: 14px; }
  /* Hero CTA follows the now-left-aligned hero (override the --center variant
     for the hero only; the closer CTA stays centered). */
  .rl-hero-cta { align-items: flex-start; text-align: left; }
  .rl-hero-cta > * { align-self: flex-start; }
  .rl-hero-orbit { align-self: center; }
  /* Keep the orbit small enough that its outward station labels fall inside
     the viewport, and let them paint (overflow:visible). The old overflow:hidden
     clipped the labels at the 400x400 SVG box edge — that was the "MPLIANCE /
     VABILITY / RENDERIN" cut-off. Page-level scroll is caught by html,body
     overflow-x:hidden below. */
  .rl-hero-orbit { width: clamp(170px, 52vw, 220px); overflow: visible; }
  .rl-hero-orbit-svg { overflow: visible; }
  .rl-hero-orbit-label { font-size: 7.5px; letter-spacing: 0.08em; }

  .rl-run { padding: clamp(72px, 11vh, 110px) clamp(16px, 4vw, 24px); overflow: hidden; }
  .rl-run-frame { gap: clamp(24px, 5vw, 36px); }
  .rl-run-h2 { font-size: var(--mkt-h4); overflow-wrap: anywhere; word-break: break-word; max-width: none; text-wrap: wrap; }
  .rl-run-lane-name { font-size: var(--mkt-h4); }

  /* Collapse run journey to single column at narrow widths.
     align-items: stretch so children take full row width and
     long captions wrap inside their own column. */
  .rl-run-step,
  .rl-run-lane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 0;
  }
  .rl-run-step > *,
  .rl-run-lane > * { width: 100%; }
  .rl-run-step-tag,
  .rl-run-lane-num { color: var(--text-tertiary); }
  .rl-run-step-meta { text-align: left; font-size: 12px; }
  .rl-run-step-code { font-size: 13px; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
  .rl-run-lane-action { font-size: 13px; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
  .rl-run-pulse { display: none; }

  /* Scenario picker: keep the pill on ONE row and scroll it horizontally
     instead of wrapping into a tall stadium blob with the active pill
     floating (the DS seg-control is inline-flex; override the container). */
  .rl-run-scenarios {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rl-run-scenarios::-webkit-scrollbar { display: none; }
  .rl-run-scenarios .seg-control-opt { font-size: 11.5px; padding: 6px 12px; flex: 0 0 auto; white-space: nowrap; }

  .rl-pact { padding: clamp(80px, 12vh, 120px) clamp(16px, 4vw, 24px); }
  .rl-pact-frame { gap: clamp(28px, 6vw, 40px); }
  .rl-pact-head { align-self: flex-start; text-align: left; }
  .rl-pact-h2 { font-size: var(--mkt-h4); max-width: none; overflow-wrap: anywhere; word-break: break-word; text-wrap: wrap; }
  .rl-pact-promise { font-size: var(--mkt-h4); overflow-wrap: anywhere; word-break: break-word; text-wrap: wrap; }
  .rl-pact-line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: clamp(20px, 5vw, 32px) 0;
  }
  .rl-pact-line > * { width: 100%; }
  .rl-pact-line:nth-child(even) { padding-left: 0; }
  .rl-pact-num { padding-top: 0; }
  .rl-pact-mech { font-size: 13px; line-height: 1.5; max-height: none; opacity: 1; transform: none; color: var(--text-secondary); }

  .rl-trust { padding: clamp(72px, 11vh, 120px) clamp(16px, 4vw, 24px); }
  .rl-trust-h2 { font-size: var(--mkt-h4); overflow-wrap: anywhere; word-break: break-word; text-wrap: wrap; }
  .rl-trust-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 0;
  }
  .rl-trust-item > * { width: 100%; }
  .rl-trust-name { font-size: 18px; }
  .rl-trust-line { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .rl-trust-item:hover { padding-left: 0; background: transparent; }

  .rl-end { padding: clamp(96px, 14vh, 140px) clamp(16px, 4vw, 24px) clamp(80px, 10vh, 120px); }
  .rl-end-h2 { font-size: var(--mkt-h3); overflow-wrap: anywhere; word-break: break-word; text-wrap: wrap; line-height: 1.06; }
  .rl-end-sub { font-size: 14px; }

  /* Hard stop any horizontal overflow at any depth on mobile. */
  html, body { overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-fail-card-name,
  .rl-fail-card-line,
  .rl-fail-absorbs { transition: none; }
  .rl-end-frame[data-rl-end] > * { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.
   The page is dark-by-default; html.dark stays untouched.
   In html:not(.dark) (Business audience) the body bg recesses to
   var(--zen-gray-3) so hairline-bordered content reads on a
   sunken canvas (mirror of /home + /pricing).  --font-display
   flips to Mq12 automatically via _shared/audience-switcher.css.
═══════════════════════════════════════════════════════════ */

html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}