/* ══════════════════════════════════════════════════════════════════════════
   Revenue OS — نظام الإيرادات · v2.1 visual system

   Copy master: dr-business-revenue-os-page-ar-master-v3.0 (header v4.0).
   Visual/motion brief: its v2.0 sibling (header v2.1, §16 addendum).
   Homepage parity: homepage-preview-v4.

   🔴 TOKENS ARE INHERITED FROM V4, NOT REINVENTED. Colour and type keep V4's
   names so a diff between the two files stays meaningful.

   WHAT MAKES THIS READ AS ONE BRAND WITH THE HOMEPAGE (all measured in V4):
   - the ink field recedes at the edges: radial-gradient(120% 90% at 50% 42%)
   - strain is HEAT (coral fill wash), resolution is CALM (#6f9c8a wash)
   - 3% feTurbulence grain, tiled at 160px so the filter never runs live
   - shadows are deep and soft: 0 40px 90px -30px rgba(0,0,0,.8)
   - numbered beat eyebrows «01 — …», Inter for Latin/numerals

   COLOUR LAW (v2 §13): coral is ONLY exception · human decision · failed
   handoff · attention. One documented exemption: the primary CTA. #ff5a45
   never sits as text on a light ground.

   MOTION (v2.1 §16.1): three signatures animate — the hero scrub, the
   theatre, the attention queue. Everything else is a static diagram with an
   entrance reveal. Every animation has a reduced-motion path AND a manual
   off switch, which lives in the hero's control row.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --v4-fs-1: 11px;  --v4-fs-2: 13px;  --v4-fs-3: 15px;  --v4-fs-4: 17px;
  --v4-fs-5: 19px;  --v4-fs-6: 21px;  --v4-fs-7: 24px;

  --v4-ink: #0a0e1a;
  --v4-ink-lift: #12172a;
  --v4-ink-deep: #05070f;
  --v4-line: #232a3a;
  --v4-line-soft: #1a2030;
  --v4-cream: #f4ede1;
  --v4-paper: #fbf6ee;

  --v4-on-ink: #fdf6f2;
  --v4-on-ink-mid: #9aa2b1;
  --v4-on-ink-low: #7d8494;
  --v4-on-light: #1a1a22;
  --v4-on-light-mid: #5c5c66;

  --v4-coral: #ff5a45;
  --v4-coral-display: #d4523f;
  --v4-coral-light: #ad3b28;
  --v4-calm: #6f9c8a;

  --v4-editorial: "Inter", "Tajawal", "Segoe UI", Arial, sans-serif;
  --v4-system: "Inter", "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --v4-shell: 1240px;
  --v4-gut: 24px;
  --v4-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v4-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --ros-sec-y: clamp(64px, 8vw, 120px);
  --ros-stack: clamp(20px, 2.4vw, 32px);

  --ros-shadow-deep: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(244, 237, 225, 0.04) inset;
  --ros-shadow-card: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(244, 237, 225, 0.05) inset;
  --ros-shadow-paper: 0 0 0 1px rgba(26, 26, 34, 0.06), 0 1px 2px -1px rgba(26, 26, 34, 0.08), 0 12px 30px -18px rgba(20, 22, 29, 0.35);
  --ros-shadow-paper-hover: 0 0 0 1px rgba(26, 26, 34, 0.09), 0 2px 4px -1px rgba(26, 26, 34, 0.1), 0 22px 44px -20px rgba(20, 22, 29, 0.45);

  --ros-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");

  --ros-reveal-dur: 620ms;
  --ros-reveal-step: 70ms;
}

@media (max-width: 640px) { :root { --v4-gut: 18px; --ros-sec-y: 52px; --ros-stack: 18px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--v4-ink);
  color: var(--v4-on-ink);
  font-family: var(--v4-editorial);
  font-size: var(--v4-fs-4);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.ros-skip {
  position: absolute; top: 0; inset-inline-start: 0;
  background: var(--v4-coral); color: #16060a;
  padding: 12px 20px; z-index: 99; border-radius: 0 0 8px 0;
  clip-path: inset(50%); transform: translateY(-120%);
  font-weight: 800;
}
.ros-skip:focus { clip-path: none; transform: none; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--v4-coral); outline-offset: 3px; border-radius: 6px;
}

/* ── shell · grounds · atmosphere ──────────────────────────────────────── */

.ros-shell {
  width: min(100% - (var(--v4-gut) * 2), var(--v4-shell));
  margin-inline: auto;
  position: relative;
}

.ros-sec { padding-block: var(--ros-sec-y); position: relative; isolation: isolate; }

.ros-sec--ink {
  color: var(--v4-on-ink);
  background:
    radial-gradient(110% 70% at 50% 0%, #0f1424 0%, var(--v4-ink) 55%, var(--v4-ink) 100%);
}
.ros-sec--deep {
  color: var(--v4-on-ink);
  background: radial-gradient(120% 90% at 50% 100%, #0c1120 0%, var(--v4-ink-deep) 60%);
}
.ros-sec--cream {
  color: var(--v4-on-light);
  background: linear-gradient(180deg, #f7f1e6 0%, var(--v4-cream) 40%, var(--v4-cream) 100%);
}

.ros-sec--ink::after, .ros-sec--deep::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.035;
  background-image: var(--ros-grain); background-size: 160px 160px;
}
.ros-sec > .ros-shell { z-index: 1; }

.ros-sec--ink + .ros-sec--ink::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--v4-line) 30%, var(--v4-line) 70%, transparent);
}

/* ── reveal (Jakub: opacity + translateY + blur) ─────────────────────────── */

/* readable without JavaScript: the hiding rule exists only under .ros-js,
   which the page's own head script adds (brief v2.1 §16.8) */
.ros-js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition:
    opacity var(--ros-reveal-dur) var(--v4-ease),
    transform var(--ros-reveal-dur) var(--v4-ease),
    filter var(--ros-reveal-dur) var(--v4-ease);
  transition-delay: calc(var(--i, 0) * var(--ros-reveal-step));
}
.ros-js [data-reveal][data-shown] { opacity: 1; transform: none; filter: blur(0); }

/* ── type ─────────────────────────────────────────────────────────────── */

.ros-eyebrow {
  font-family: var(--v4-system);
  font-size: var(--v4-fs-1); font-weight: 700; letter-spacing: 0.16em;
  color: var(--v4-on-ink-mid); margin: 0 0 20px;
}

.ros-chapter {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--v4-system);
  font-size: var(--v4-fs-2); font-weight: 700; letter-spacing: 0.06em;
  color: var(--v4-on-ink-mid);
  margin: 0 0 24px;
}
.ros-chapter b {
  font-size: var(--v4-fs-1); letter-spacing: 0.2em; font-weight: 800;
  color: var(--v4-on-ink-low);
  padding: 5px 10px; border: 1px solid var(--v4-line); border-radius: 999px;
  direction: ltr;
}
.ros-chapter::after {
  content: ""; flex: 1; height: 1px; max-width: 160px;
  background: linear-gradient(90deg, var(--v4-line), transparent);
}
.ros-sec--cream .ros-chapter { color: var(--v4-on-light-mid); }
.ros-sec--cream .ros-chapter b { color: var(--v4-on-light-mid); border-color: #d8cdbd; }
.ros-sec--cream .ros-chapter::after { background: linear-gradient(90deg, #d8cdbd, transparent); }

.ros-h1 {
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1.14; font-weight: 900; letter-spacing: -0.012em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.ros-tension {
  font-size: var(--v4-fs-5); line-height: 1.7; font-weight: 600;
  color: rgba(253, 246, 242, 0.82); margin: 0 0 16px; max-width: 34ch;
}
.ros-promise { color: var(--v4-on-ink); font-weight: 600; }

.ros-h2 {
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.22; font-weight: 900; letter-spacing: -0.01em;
  margin: 0 0 var(--ros-stack);
  max-width: 22ch; text-wrap: balance;
}
.ros-h2--wide  { max-width: 30ch; }
.ros-h2--final { max-width: 18ch; }
.ros-h3 { font-size: var(--v4-fs-6); font-weight: 800; margin: 0 0 12px; }

.ros-lede {
  font-size: var(--v4-fs-5); line-height: 1.85;
  color: var(--v4-on-ink-mid); margin: 0 0 var(--ros-stack); max-width: 56ch;
}
.ros-lede--wide { max-width: 68ch; }
.ros-lede--strong { color: var(--v4-on-ink); font-weight: 600; }
.ros-sec--cream .ros-lede { color: var(--v4-on-light-mid); }

.ros-body { margin: 0 0 var(--ros-stack); max-width: 62ch; }
.ros-body--wide { max-width: 72ch; }
.ros-lede strong, .ros-body strong { color: var(--v4-on-ink); font-weight: 700; }
.ros-sec--cream :where(.ros-lede, .ros-body) strong { color: var(--v4-on-light); }

.ros-claim {
  font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; line-height: 1.45;
  margin: var(--ros-stack) 0 0; max-width: 34ch; text-wrap: balance;
}
.ros-sec--cream .ros-claim { color: var(--v4-on-light); }

.ros-rule {
  border-inline-start: 3px solid var(--v4-on-ink-low); padding-inline-start: 18px;
  font-size: var(--v4-fs-5); font-weight: 700; line-height: 1.6;
  margin: var(--ros-stack) 0; max-width: 52ch;
}
.ros-rule--light { border-inline-start-color: var(--v4-on-light-mid); }
.ros-rule strong { font-weight: 800; }

.ros-illus {
  display: inline-block; font-family: var(--v4-system);
  font-size: var(--v4-fs-2); font-weight: 700; letter-spacing: 0.04em;
  color: var(--v4-on-ink-mid);
  border: 1px dashed var(--v4-line); border-radius: 999px; padding: 6px 16px;
  margin: 0 0 20px;
}
.ros-illus--light { color: var(--v4-on-light-mid); border-color: #d8cdbd; }

.ros-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 64px); align-items: start; margin-bottom: clamp(24px, 3vw, 40px);
}
@media (max-width: 860px) { .ros-split { grid-template-columns: 1fr; } }

/* ── hero ─────────────────────────────────────────────────────────────── */

/* The hero is a RUNWAY on desktop: .ros-hero__runway is 240vh tall and the
   scene pins for 140vh while the three acts play. What the pin holds is
   sized to fit: eyebrow, H1, tension, promise, CTA. On a viewport too
   short or too narrow, the pin releases and the copy comes FIRST in flow
   (audit finding 4: the diagram used to push the button under the fold at
   624×682 and 320×700). */
.ros-hero { padding: 0; background: var(--v4-ink); }
.ros-hero__pin {
  position: relative;
  padding-block: clamp(40px, 6vw, 96px) clamp(36px, 5vw, 72px);
  display: grid; align-items: center;
  overflow: hidden;
}
@media (min-width: 901px) and (min-height: 640px) {
  .ros-hero__runway { height: 240vh; }
  .ros-hero__pin {
    position: sticky; top: 0;
    height: 100vh; min-height: 640px;
    /* the shared V4 header is sticky above the pin: its height is reserved so
       the centred ladder never starts behind it */
    padding-block: var(--ros-head, 0px) 0;
  }
}
.ros-hero__field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, #0d1220 0%, var(--v4-ink) 46%, var(--v4-ink-deep) 100%);
}
.ros-hero__field::after {
  content: ""; position: absolute; inset: 0;
  opacity: 0.035; background-image: var(--ros-grain); background-size: 160px 160px;
}
.ros-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
@media (max-width: 900px) {
  .ros-hero__pin { padding-top: 28px; }
  .ros-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  /* copy first, diagram after — DOM order, no reordering */
  .ros-hero__stage { margin-inline: -2%; }
}

/* act dots */
.ros-cap__acts { display: inline-flex; gap: 6px; flex: none; }
.ros-cap__acts i { width: 18px; height: 2px; border-radius: 2px; background: var(--v4-line); transition: background-color 400ms var(--v4-ease); }
.ros-hero[data-act="0"] .ros-cap__acts i:nth-child(1),
.ros-hero[data-act="1"] .ros-cap__acts i:nth-child(-n+2),
.ros-hero[data-act="2"] .ros-cap__acts i { background: var(--v4-on-ink); }

.ros-scrollcue {
  display: flex; align-items: center; gap: 12px; margin-top: clamp(24px, 4vh, 44px);
  transition: opacity 400ms var(--v4-ease);
}
.ros-scrollcue span { width: 36px; height: 1px; background: linear-gradient(90deg, var(--v4-on-ink-low), transparent); }
.ros-scrollcue b { font-family: var(--v4-system); font-size: var(--v4-fs-1); font-weight: 700; letter-spacing: 0.06em; color: var(--v4-on-ink-low); }
.ros-hero[data-act="2"] .ros-scrollcue { opacity: 0; }
@media (max-width: 900px) { .ros-scrollcue { display: none; } }
.ros-hero[data-nopin] .ros-scrollcue { display: none; }

/* ── Signature 1 — People as Glue ─────────────────────────────────────── */

.ros-hero__stage { margin: 0; position: relative; }
/* THE SCENE IS SCRUBBED, NOT STEPPED. --p runs 0..1 (scroll on the runway, the
   handle when free, a tween for autoplay). Three phases derive from it. No
   transitions on scrubbed properties: a scrub that lags the thumb reads as
   broken. */
.ros-glue {
  width: 100%; height: auto; display: block; overflow: visible;
  --p: 0;
  --p1: clamp(0, calc(var(--p) / 0.4), 1);
  --p2: clamp(0, calc((var(--p) - 0.3) / 0.5), 1);
  --p3: clamp(0, calc((var(--p) - 0.5) / 0.5), 1);
}

.ros-glue__sys {
  transform: translate(
    calc(var(--x) + (var(--jx) - var(--x)) * var(--p2)),
    calc(var(--y) + (var(--jy) - var(--y)) * var(--p2))
  );
}
.ros-glue__sys rect {
  fill: url(#ros-node); stroke: var(--v4-line); stroke-width: 1;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  transition: stroke 800ms var(--v4-ease);
}
.ros-glue__sys text {
  font-family: var(--v4-system); font-size: 15px; font-weight: 700;
  fill: var(--v4-on-ink); text-anchor: middle;
}

.ros-glue__link {
  fill: none; stroke: var(--v4-line); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 5 8;
}
.ros-glue__links { opacity: calc(1 - var(--p2)); }

.ros-glue__heat { opacity: calc(1 - 0.45 * var(--p1) - 0.55 * var(--p2)); }
.ros-glue__calm { opacity: calc(0.6 * var(--p1) + 0.4 * var(--p3)); }

.ros-glue__journey { opacity: var(--p1); }
.ros-glue__band { fill: var(--v4-ink-lift); stroke: var(--v4-on-ink-low); stroke-width: 1.5; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7)); }
.ros-glue__jline { fill: none; stroke: var(--v4-on-ink-low); stroke-width: 1.5; opacity: var(--p3); }
.ros-glue__rise { fill: none; stroke: var(--v4-on-ink-low); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: var(--p3); }
.ros-glue__bandlabel { font-family: var(--v4-system); font-size: 17px; font-weight: 800; fill: var(--v4-on-ink); text-anchor: middle; opacity: var(--p3); }
.ros-glue__bandsub { font-family: var(--v4-system); font-size: 11px; font-weight: 600; fill: var(--v4-on-ink-mid); text-anchor: middle; letter-spacing: 0.04em; opacity: var(--p3); }

.ros-glue__events { opacity: calc(1 - var(--p2)); }
.ros-glue__event, .ros-glue__jevent {
  fill: var(--v4-on-ink); opacity: 0.9;
  offset-path: var(--path); offset-rotate: 0deg;
  animation: ros-carry 6.4s linear infinite; animation-delay: var(--d, 0s);
}
.ros-glue__jevents { opacity: var(--p3); }
.ros-glue__jevent { animation-name: ros-flow; animation-duration: 3.4s; }
.ros-glue__exc { fill: var(--v4-coral); offset-path: var(--path); offset-rotate: 0deg; animation: ros-rise 4.2s var(--v4-ease-io) infinite; animation-delay: 1.4s; }
.ros-glue__exc text { font-family: var(--v4-system); font-size: 11px; font-weight: 700; text-anchor: start; }
.ros-glue__lead { offset-path: var(--path); offset-rotate: 0deg; animation: ros-carry 6.4s linear infinite; animation-delay: var(--d, 0s); }
.ros-glue__lead--journey { animation-name: ros-flow; animation-duration: 3.4s; }
.ros-glue__lead circle { fill: var(--v4-ink); stroke: var(--v4-on-ink); stroke-width: 2; }
.ros-glue__lead text { font-family: var(--v4-system); font-size: 11px; font-weight: 700; fill: var(--v4-on-ink); text-anchor: middle; }
@keyframes ros-carry {
  0%   { offset-distance: 0%;  opacity: 0; }
  6%   { opacity: 0.9; }
  40%  { offset-distance: 50%; }
  78%  { offset-distance: 50%; opacity: 0.9; }
  86%  { opacity: 0; }
  100% { offset-distance: 50%; opacity: 0; }
}
@keyframes ros-flow {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ros-rise {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  55%  { offset-distance: 100%; opacity: 1; }
  70%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

.ros-glue__person {
  transform: translate(
    calc(var(--x) + (var(--cx) - var(--x)) * var(--p3)),
    calc(var(--y) + (var(--cy) - var(--y)) * var(--p3))
  );
}
.ros-glue__person rect { fill: var(--v4-ink); stroke: var(--v4-coral); stroke-width: 1.8; transition: stroke 800ms var(--v4-ease); }
.ros-glue__person text {
  font-family: var(--v4-system); font-size: 12px; font-weight: 700;
  fill: var(--v4-coral); text-anchor: middle; transition: fill 800ms var(--v4-ease);
}

.ros-glue__rail { opacity: var(--p3); }
.ros-glue__rail line { stroke: var(--v4-on-ink-low); stroke-width: 1; }
.ros-glue__rail text {
  font-family: var(--v4-system); font-size: 13px; font-weight: 700;
  fill: var(--v4-on-ink-mid); text-anchor: middle; letter-spacing: 0.04em;
}

/* ── the mobile composition: portrait 560×870, its own geometry (brief v2.1
   §16.7). Desktop geometry hides; the shared systems and people take new
   rest / journey / control positions. !important is what lets a stylesheet
   custom property beat the inline one that carries the desktop position. */
.ros-glue__m { display: none; }
@media (max-width: 900px) {
  .ros-glue__d { display: none; }
  .ros-glue__m { display: block; }
  .ros-glue__sys:nth-of-type(1) { --x: 120px !important; --y: 150px !important; --jx: 280px !important; --jy: 130px !important; }
  .ros-glue__sys:nth-of-type(2) { --x: 440px !important; --y: 150px !important; --jx: 280px !important; --jy: 236px !important; }
  .ros-glue__sys:nth-of-type(3) { --x: 120px !important; --y: 400px !important; --jx: 280px !important; --jy: 342px !important; }
  .ros-glue__sys:nth-of-type(4) { --x: 440px !important; --y: 400px !important; --jx: 280px !important; --jy: 448px !important; }
  .ros-glue__sys:nth-of-type(5) { --x: 120px !important; --y: 650px !important; --jx: 280px !important; --jy: 554px !important; }
  .ros-glue__sys:nth-of-type(6) { --x: 440px !important; --y: 650px !important; --jx: 280px !important; --jy: 660px !important; }
  .ros-glue__person:nth-of-type(1) { --x: 280px !important; --y: 150px !important; --cx: 160px !important; --cy: 40px !important; }
  .ros-glue__person:nth-of-type(2) { --x: 280px !important; --y: 400px !important; --cx: 240px !important; --cy: 40px !important; }
  .ros-glue__person:nth-of-type(3) { --x: 280px !important; --y: 650px !important; --cx: 320px !important; --cy: 40px !important; }
  .ros-glue__person:nth-of-type(4) { --x: 280px !important; --y: 525px !important; --cx: 400px !important; --cy: 40px !important; }
  /* legibility floor: ≥ 11px system labels at 320 (viewBox 560 → 284px, ×0.507) */
  .ros-glue__sys rect { x: -70px; width: 140px; y: -25px; height: 50px; }
  .ros-glue__sys text { font-size: 22px; dominant-baseline: middle; }
  .ros-glue__person rect { x: -38px; width: 76px; y: -19px; height: 38px; }
  .ros-glue__person text { font-size: 18px; dominant-baseline: middle; }
  .ros-glue__bandlabel { font-size: 24px; }
  .ros-glue__bandsub { font-size: 14px; }
  .ros-glue__rail text { font-size: 17px; }
  .ros-glue__exc text, .ros-glue__lead text { font-size: 14px; }
  .ros-glue__link { stroke-width: 2; }
}

.ros-glue[data-act="2"] .ros-glue__sys rect { stroke: var(--v4-on-ink-low); }
.ros-glue[data-act="2"] .ros-glue__person rect { stroke: var(--v4-on-ink-mid); }
.ros-glue[data-act="2"] .ros-glue__person text { fill: var(--v4-on-ink); }
.ros-glue:not([data-act="2"]) .ros-glue__exc { animation-name: none; opacity: 0; }

/* the control row: caption on one side, the motion control on the other */
.ros-hero__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 12px; }
.ros-cap {
  display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 0;
  font-family: var(--v4-system); font-size: var(--v4-fs-2);
  color: var(--v4-on-ink-mid); margin: 0; min-height: 44px;
}
.ros-cap span:not(.ros-cap__acts) { display: none; }
.ros-cap span[data-shown] { display: inline; }

.ros-motion {
  flex: none; min-height: 44px; min-width: 44px;
  font-family: var(--v4-system); font-size: var(--v4-fs-2); font-weight: 700;
  color: var(--v4-on-ink); background: rgba(18, 23, 42, 0.8);
  border: 1px solid var(--v4-line); border-radius: 999px; padding: 10px 16px; cursor: pointer;
  transition: border-color 180ms var(--v4-ease), color 180ms var(--v4-ease);
}
.ros-motion:hover { border-color: var(--v4-on-ink-mid); }
.ros-motion[aria-pressed="true"] { color: var(--v4-on-ink-mid); }

/* the handle — a real range input. Shown whenever the pin is not sticky */
.ros-scrub { display: none; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; margin-top: 6px; }
.ros-hero[data-nopin] .ros-scrub { display: flex; }
.ros-scrub__end { font-family: var(--v4-editorial); font-size: var(--v4-fs-2); font-weight: 700; color: var(--v4-on-ink-mid); white-space: nowrap; }
.ros-scrub__end:last-child { color: var(--v4-on-ink); order: 1; }
.ros-scrub__in { -webkit-appearance: none; appearance: none; flex: 1 1 100%; order: 2; height: 44px; background: transparent; margin: 0; cursor: pointer; }
.ros-scrub__in::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--v4-on-ink-low), var(--v4-line)); }
.ros-scrub__in::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--v4-on-ink-low), var(--v4-line)); }
.ros-scrub__in::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--v4-on-ink); border: 3px solid var(--v4-ink); box-shadow: 0 0 0 1.5px var(--v4-on-ink-low), 0 8px 20px -6px rgba(0,0,0,.9); }
.ros-scrub__in::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--v4-on-ink); border: 3px solid var(--v4-ink); box-shadow: 0 0 0 1.5px var(--v4-on-ink-low), 0 8px 20px -6px rgba(0,0,0,.9); }
.ros-scrub__in:focus-visible { outline: 2px solid var(--v4-coral); outline-offset: 4px; border-radius: 6px; }

/* ── CTAs ─────────────────────────────────────────────────────────────── */

.ros-cta { margin-top: clamp(20px, 2.6vw, 32px); }
.ros-cta--final { margin-top: clamp(28px, 3.4vw, 44px); }

.ros-btn {
  display: inline-block; font-family: var(--v4-system);
  font-size: var(--v4-fs-4); font-weight: 800; text-decoration: none;
  padding: 16px 32px; border-radius: 12px; border: 1.5px solid transparent;
  min-height: 48px;
  transition: transform 180ms var(--v4-ease), background-color 180ms var(--v4-ease),
              border-color 180ms var(--v4-ease), box-shadow 180ms var(--v4-ease);
}
.ros-btn:active { transform: scale(0.97); }
.ros-btn--lg { padding: 19px 40px; font-size: var(--v4-fs-5); }

/* the documented coral exemption: the primary commercial ask */
.ros-btn--primary {
  background: var(--v4-coral); color: #16060a;
  box-shadow: 0 18px 40px -18px rgba(255, 90, 69, 0.55);
}
.ros-btn--primary:hover { background: #ff6f5c; transform: translateY(-1px); box-shadow: 0 24px 48px -18px rgba(255, 90, 69, 0.6); }

.ros-btn--secondary { background: transparent; color: var(--v4-on-ink); border-color: var(--v4-on-ink-low); }
.ros-btn--secondary:hover { border-color: var(--v4-on-ink); transform: translateY(-1px); }
.ros-btn--ghost { background: transparent; color: var(--v4-on-ink); border-color: var(--v4-line); font-size: var(--v4-fs-3); padding: 12px 24px; }
.ros-btn--ghost:hover { border-color: var(--v4-on-ink-mid); }

.ros-cta__note { font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); margin: 14px 0 0; max-width: 54ch; }
.ros-cta__note strong { color: var(--v4-on-ink); font-weight: 700; }
/* laptops between 640 and 760px tall: the pin holds, so the ladder tightens */
@media (min-width: 901px) and (min-height: 640px) and (max-height: 760px) {
  .ros-h1 { font-size: clamp(32px, 3.8vw, 48px); margin-bottom: 12px; }
  .ros-tension { font-size: var(--v4-fs-4); margin-bottom: 10px; }
  .ros-hero .ros-lede { font-size: var(--v4-fs-4); margin-bottom: 12px; }
  .ros-hero .ros-cta { margin-top: 12px; }
  .ros-cta__note { font-size: var(--v4-fs-2); margin-top: 10px; }
  .ros-scrollcue { margin-top: 14px; }
}
/* phones and short tablets: the promise must sit above the fold with the
   button; the note may fall under it */
@media (max-width: 900px) {
  .ros-h1 { font-size: clamp(32px, 9vw, 46px); margin-bottom: 14px; }
  .ros-tension { font-size: var(--v4-fs-4); margin-bottom: 12px; }
  .ros-hero .ros-lede { font-size: var(--v4-fs-4); margin-bottom: 14px; line-height: 1.75; }
  .ros-hero .ros-cta { margin-top: 12px; }
  .ros-cta__note { font-size: var(--v4-fs-2); margin-top: 12px; }
}
@media (max-width: 360px) {
  .ros-h1 { font-size: 30px; }
  .ros-hero .ros-lede { font-size: var(--v4-fs-3); }
}

/* the id chip that follows #184 through the page */
.ros-id { display: inline-block; font-family: var(--v4-system); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; direction: ltr; border: 1.5px solid var(--v4-on-ink); border-radius: 999px; padding: 2px 9px; line-height: 1.5; vertical-align: middle; }
.ros-theatre__id { margin: 0 0 12px; text-align: center; }
.ros-theatre__id .ros-id { font-size: var(--v4-fs-1); padding: 5px 14px; direction: rtl; }

/* a disclosure that keeps a master block one tap away */
.ros-more { border-top: 1px solid var(--v4-line-soft); border-bottom: 1px solid var(--v4-line-soft); margin-top: clamp(24px, 3vw, 40px); }
.ros-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; min-height: 56px; }
.ros-more > summary::-webkit-details-marker { display: none; }
.ros-more > summary .ros-h3 { margin: 0; }
.ros-more > summary::after { content: "+"; font-family: var(--v4-system); font-size: var(--v4-fs-6); color: var(--v4-on-ink-mid); transition: transform 200ms var(--v4-ease); flex: none; }
.ros-more[open] > summary::after { transform: rotate(45deg); }
.ros-more__body { padding: 4px 4px 22px; animation: ros-materialize 360ms var(--v4-ease) both; }
@keyframes ros-materialize { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ── 02 problem · breakdown scene (static) + theatre ──────────────────── */

.ros-scene { margin: 0 0 clamp(24px, 3vw, 40px); }
.ros-break {
  width: 100%; height: auto; display: block;
  background: var(--v4-ink-lift); border-radius: 18px;
  box-shadow: var(--ros-shadow-card);
  padding: 8px 0;
}
.ros-break__lane line { stroke: var(--v4-line-soft); stroke-width: 1; }
.ros-break__ev rect { fill: var(--v4-ink); stroke: var(--v4-line); stroke-width: 1; }
.ros-break__ev text {
  font-family: var(--v4-editorial); font-size: 13px; font-weight: 700;
  fill: var(--v4-on-ink-mid); text-anchor: middle;
}
.ros-break__ev--stall rect { stroke: rgba(255, 90, 69, 0.55); }
.ros-break__ev--stall text { fill: var(--v4-on-ink); }
.ros-break__ev .ros-break__tag { font-size: 11px; fill: var(--v4-coral); font-weight: 800; }
.ros-break__ev--lead rect { stroke: var(--v4-on-ink); stroke-width: 1.5; }
.ros-scene__cap { font-family: var(--v4-system); font-size: var(--v4-fs-2); color: var(--v4-on-ink-mid); margin-top: 12px; }

.ros-price { margin: 0 0 var(--ros-stack); }
.ros-price__lead { font-weight: 700; margin: 0 0 14px; }
.ros-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ros-price__list li {
  font-family: var(--v4-editorial); font-size: var(--v4-fs-3);
  border: 1px solid var(--v4-line); border-radius: 999px; padding: 9px 18px;
}

.ros-theatre { margin-block: clamp(20px, 3vw, 36px) clamp(24px, 3.4vw, 44px); }
.ros-panels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 700px) { .ros-panels { grid-template-columns: 1fr; gap: 10px; } }
.ros-panel {
  border-radius: 22px; background: linear-gradient(180deg, #141b30, var(--v4-ink-lift));
  padding: clamp(36px, 6vw, 72px) 20px; text-align: center;
  box-shadow: var(--ros-shadow-card);
  transition: opacity 600ms var(--v4-ease), transform 600ms var(--v4-ease), box-shadow 600ms var(--v4-ease);
  transition-delay: calc(var(--i) * 140ms);
  position: relative; overflow: hidden;
}
.ros-js .ros-panel { opacity: 0; transform: translateY(10px); }
@media (max-width: 700px) { .ros-panel { padding: 24px 20px; } }
[data-run] .ros-panel { opacity: 1; transform: none; }
.ros-panel__sys { font-family: var(--v4-system); font-size: var(--v4-fs-3); font-weight: 700; letter-spacing: 0.12em; color: var(--v4-on-ink-mid); margin: 0 0 16px; }
.ros-panel__state { font-family: var(--v4-system); font-size: clamp(26px, 3.8vw, 46px); font-weight: 800; letter-spacing: 0.01em; margin: 0; direction: ltr; line-height: 1.1; }
.ros-panel[data-state="ok"] .ros-panel__state { color: var(--v4-cream); }
.ros-panel[data-state="broken"] { box-shadow: var(--ros-shadow-card), 0 0 0 1px rgba(255, 90, 69, 0.35) inset; }
.ros-panel[data-state="broken"]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: radial-gradient(60% 100% at 50% 100%, rgba(255, 90, 69, 0.14), transparent 70%); pointer-events: none; }
.ros-panel[data-state="broken"] .ros-panel__state { color: var(--v4-coral); }

.ros-thread { display: block; width: 100%; height: auto; margin: 6px 0 0; overflow: visible; }
@media (max-width: 700px) { .ros-thread { display: none; } }
.ros-thread__base { stroke: var(--v4-line); stroke-width: 2; }
.ros-thread__node { fill: var(--v4-ink); stroke: var(--v4-line); stroke-width: 2; }
.ros-thread__live { stroke: var(--v4-cream); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 300; transition: stroke-dashoffset 1.2s var(--v4-ease-io) 300ms; }
.ros-js .ros-thread__live { stroke-dashoffset: 300; }
.ros-thread__head { fill: var(--v4-cream); transition: opacity 300ms var(--v4-ease) 1.4s; }
.ros-js .ros-thread__head { opacity: 0; }
.ros-thread__break { fill: none; stroke: var(--v4-coral); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: opacity 400ms var(--v4-ease) 1.5s, transform 500ms var(--v4-ease) 1.5s; }
.ros-js .ros-thread__break { opacity: 0; transform: scale(0.6); }
[data-run] .ros-thread__live { stroke-dashoffset: 0; }
[data-run] .ros-thread__head { opacity: 1; }
[data-run] .ros-thread__break { opacity: 1; transform: none; }

.ros-exception {
  border-radius: 18px; background: rgba(255, 90, 69, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 90, 69, 0.4) inset, var(--ros-shadow-card);
  padding: 22px 24px; margin: 18px auto 0; max-width: 560px;
  animation: ros-materialize 600ms var(--v4-ease) both;
}
.ros-exception__tag { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); font-weight: 800; color: var(--v4-coral); margin: 0 0 12px; }
.ros-exception__meta { margin: 0; display: grid; gap: 8px; }
.ros-exception__meta > div { display: flex; gap: 12px; }
.ros-exception__meta dt { font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); min-width: 8ch; }
.ros-exception__meta dd { margin: 0; font-size: var(--v4-fs-3); font-weight: 700; }

/* ── 03 what · the rail (static) ──────────────────────────────────────── */

.ros-knows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ros-knows li { position: relative; padding-inline-start: 22px; font-size: var(--v4-fs-4); }
.ros-knows li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.86em;
  width: 10px; height: 1px; background: var(--v4-on-ink-low);
}

.ros-rail {
  list-style: none; margin: clamp(24px, 3vw, 40px) 0; padding: 24px 20px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
  background: var(--v4-ink-lift); border-radius: 18px; box-shadow: var(--ros-shadow-card);
  position: relative;
}
.ros-rail::before {
  content: ""; position: absolute; top: 48px; inset-inline: 6%; height: 2px; border-radius: 2px;
  background: var(--v4-on-ink-low);
}
.ros-rail__node { position: relative; text-align: center; z-index: 1; }
.ros-rail__node::before {
  content: ""; display: block; width: 12px; height: 12px; border-radius: 50%;
  margin: 18px auto 12px; background: var(--v4-on-ink); border: 2px solid var(--v4-on-ink);
}
.ros-rail__node--gate::before { border-color: var(--v4-coral); background: var(--v4-ink); }
.ros-rail__node span { display: block; font-size: var(--v4-fs-4); font-weight: 800; }
.ros-rail__ex { display: none; font-style: normal; font-size: var(--v4-fs-2); color: var(--v4-on-ink-mid); margin-top: 6px; }
[data-journey] .ros-rail__ex { display: block; }
[data-journey] .ros-rail__ex:empty { display: none; }
.ros-rail__exc {
  display: block; margin-top: 8px; font-style: normal;
  font-family: var(--v4-editorial); font-size: var(--v4-fs-1); font-weight: 800;
  color: var(--v4-coral);
}
@media (max-width: 860px) {
  .ros-rail { grid-template-columns: repeat(4, 1fr); }
  .ros-rail::before { display: none; }
}
@media (max-width: 480px) { .ros-rail { grid-template-columns: repeat(2, 1fr); padding: 16px 14px; } }

/* ── 04 journeys (cream) ──────────────────────────────────────────────── */

.ros-journeys { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ros-journey {
  background: var(--v4-paper); border-radius: 20px; padding: 26px 24px;
  box-shadow: var(--ros-shadow-paper); position: relative;
  transition: transform 220ms var(--v4-ease), box-shadow 220ms var(--v4-ease);
}
.ros-journey:hover { transform: translateY(-2px); box-shadow: var(--ros-shadow-paper-hover); }
.ros-journey__pick { position: absolute; inset: 0; border: 0; background: transparent; border-radius: 20px; cursor: pointer; z-index: 1; }
.ros-journey__pick:focus-visible { outline: 2px solid var(--v4-coral-light); outline-offset: 3px; }
.ros-journey[data-picked] { box-shadow: 0 0 0 2px var(--v4-on-light), var(--ros-shadow-paper-hover); }
.ros-journey[data-picked] .ros-journey__kicker::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--v4-on-light); margin-inline-start: 8px; vertical-align: middle; }
.ros-journey__name, .ros-journey__steps, .ros-journey__fit, .ros-journey__kicker { position: relative; }
.ros-journey__kicker { font-family: var(--v4-system); font-size: var(--v4-fs-1); letter-spacing: 0.2em; font-weight: 800; color: var(--v4-on-light-mid); margin: 0 0 10px; direction: ltr; text-align: start; }
.ros-journey__name { font-size: var(--v4-fs-5); font-weight: 800; margin: 0 0 16px; color: var(--v4-on-light); }
.ros-journey__steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.ros-journey__steps li { font-family: var(--v4-editorial); font-size: var(--v4-fs-2); font-weight: 700; color: var(--v4-on-light); background: #f2e9db; border-radius: 6px; padding: 5px 10px; position: relative; }
.ros-journey__steps li:not(:last-child)::after { content: "←"; color: var(--v4-on-light-mid); margin-inline-start: 6px; font-weight: 400; }
/* the arrow follows the reading direction: the English page reads left to right */
[dir="ltr"] .ros-journey__steps li:not(:last-child)::after { content: "→"; }
.ros-journey__steps li:last-child { background: var(--v4-on-light); color: var(--v4-paper); }
.ros-journey__fit { margin: 0; font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); border-top: 1px solid #e6dccb; padding-top: 14px; }

/* on phones the three journey cards are a swipe row (v2 §13) */
@media (max-width: 700px) {
  .ros-shell .ros-journeys {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(var(--v4-gut) * -1); padding-inline: var(--v4-gut); padding-bottom: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ros-journeys::-webkit-scrollbar { display: none; }
  .ros-shell .ros-journey { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ── 05 keep · the sorter (static) ────────────────────────────────────── */

.ros-sorter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 var(--ros-stack); }
@media (max-width: 860px) { .ros-sorter { grid-template-columns: repeat(2, 1fr); } }
.ros-sorter__bin {
  background: linear-gradient(180deg, #131a2e, var(--v4-ink-lift)); border-radius: 18px; padding: 20px 18px;
  box-shadow: var(--ros-shadow-card); min-height: 170px;
}
.ros-sorter__q { margin: 0; font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); }
.ros-sorter__a { margin: 4px 0 14px; font-size: var(--v4-fs-6); font-weight: 900; }
.ros-sorter__bin ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ros-sorter__bin li {
  font-family: var(--v4-editorial); font-size: var(--v4-fs-2); font-weight: 700;
  background: var(--v4-ink); border: 1px solid var(--v4-line); border-radius: 8px; padding: 7px 12px;
}
.ros-sorter__bin--build { box-shadow: var(--ros-shadow-card), 0 0 0 1px rgba(253, 246, 242, 0.14) inset; }

/* ── 06 build · five groups ───────────────────────────────────────────── */

.ros-groups { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; counter-reset: grp; display: grid; gap: 1px; background: var(--v4-line-soft); border-block: 1px solid var(--v4-line-soft); }
.ros-group { counter-increment: grp; background: var(--v4-ink); padding: 18px 8px; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.ros-group::before { content: counter(grp, decimal-leading-zero); font-family: var(--v4-system); font-size: var(--v4-fs-2); font-weight: 700; color: var(--v4-on-ink-low); direction: ltr; }
.ros-group h3 { margin: 0; font-size: var(--v4-fs-5); font-weight: 800; }
.ros-group p { grid-column: 2; margin: 0; font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); max-width: 70ch; }
@media (max-width: 640px) { .ros-group { padding: 14px 4px; } }

.ros-modules__list { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ros-modules__list li { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); background: var(--v4-ink-lift); border: 1px solid var(--v4-line); border-radius: 10px; padding: 10px 18px; }

/* ── 07 engage (cream) · the sequence ─────────────────────────────────── */

.ros-seq { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; max-width: 880px; }
.ros-step { background: var(--v4-paper); border-radius: 18px; padding: 18px 20px; box-shadow: var(--ros-shadow-paper); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; align-items: start; position: relative; }
.ros-step__n { margin: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--v4-system); font-size: var(--v4-fs-5); font-weight: 800; border: 2px solid var(--v4-on-light-mid); color: var(--v4-on-light); direction: ltr; }
.ros-step--gate .ros-step__n { background: var(--v4-on-light); color: var(--v4-paper); border-color: var(--v4-on-light); }
.ros-step h3 { margin: 0 0 6px; font-size: var(--v4-fs-5); font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ros-step p { margin: 0; font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); max-width: 66ch; }
.ros-step__tag { font-family: var(--v4-system); font-size: var(--v4-fs-1); font-weight: 800; letter-spacing: 0.08em; border: 1px solid #d8cdbd; border-radius: 999px; padding: 4px 10px; color: var(--v4-on-light-mid); }
.ros-step__tag--paid { background: var(--v4-on-light); color: var(--v4-paper); border-color: var(--v4-on-light); }
.ros-step__key { font-family: var(--v4-system); font-size: var(--v4-fs-1); font-weight: 800; letter-spacing: 0.16em; color: var(--v4-on-light-mid); direction: ltr; }
/* steps 4 and 5 are one recurring pair: a bracket joins them */
.ros-step--loop { border-inline-start: 3px solid var(--v4-on-light-mid); }
.ros-step--loop + .ros-step--loop { margin-top: -6px; }
.ros-seq__cap { margin: 0 0 var(--ros-stack); font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); }
@media (max-width: 640px) {
  .ros-step { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 4px 14px; }
  .ros-step__n { width: 40px; height: 40px; font-size: var(--v4-fs-4); }
}

/* ── 08 control · the room · Signature 3 ──────────────────────────────── */

.ros-room {
  background: linear-gradient(180deg, #131a2e, var(--v4-ink-lift)); border-radius: 22px;
  box-shadow: var(--ros-shadow-deep); overflow: hidden; max-width: 1000px;
  margin: 0 0 var(--ros-stack);
}
.ros-room__bar { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--v4-line-soft); font-family: var(--v4-system); font-size: var(--v4-fs-2); }
.ros-room__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v4-calm); }
.ros-room__title { font-weight: 800; }
.ros-room__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.ros-room__col--flow { border-inline-start: 1px solid var(--v4-line-soft); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ros-room__k { margin: 0; padding: 12px 22px 6px; font-family: var(--v4-system); font-size: var(--v4-fs-1); font-weight: 700; letter-spacing: 0.08em; color: var(--v4-on-ink-low); }
@media (max-width: 760px) {
  .ros-room__body { grid-template-columns: 1fr; }
  .ros-room__col--flow { border-inline-start: 0; border-top: 1px solid var(--v4-line-soft); }
}

.ros-queue { list-style: none; margin: 0; padding: 0; }
.ros-queue__row {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 18px; border-top: 1px solid var(--v4-line-soft);
  transition: opacity 520ms var(--v4-ease), transform 520ms var(--v4-ease), background-color 180ms var(--v4-ease);
}
.ros-js .ros-queue__row { opacity: 0; transform: translateY(8px); }
.ros-queue__row:hover { background: rgba(253, 246, 242, 0.025); }
[data-run] .ros-queue__row { opacity: 1; transform: none; }
[data-run] .ros-queue__row:nth-child(1) { transition-delay: 0.9s; }
[data-run] .ros-queue__row:nth-child(2) { transition-delay: 1.5s; }
[data-run] .ros-queue__row:nth-child(3) { transition-delay: 2.1s; }
[data-run] .ros-queue__row:nth-child(4) { transition-delay: 2.7s; }
[data-run] .ros-queue__row:nth-child(5) { transition-delay: 3.3s; }
.ros-queue__n { font-family: var(--v4-system); font-size: var(--v4-fs-7); font-weight: 800; color: var(--v4-coral); text-align: center; direction: ltr; }
.ros-queue__t { font-size: var(--v4-fs-3); font-weight: 700; }
/* «راجع»: a real button at 44×44 minimum */
button.ros-queue__go { font: inherit; font-family: var(--v4-editorial); font-size: var(--v4-fs-2); font-weight: 800; color: var(--v4-on-ink-mid); border: 1px solid var(--v4-line); border-radius: 999px; padding: 8px 16px; min-height: 44px; min-width: 64px; cursor: pointer; background: transparent; transition: border-color 180ms var(--v4-ease), color 180ms var(--v4-ease); }
button.ros-queue__go:hover, button.ros-queue__go[aria-expanded="true"] { border-color: var(--v4-on-ink); color: var(--v4-on-ink); }
.ros-queue__detail { grid-column: 2 / -1; margin: 4px 0 0; display: grid; gap: 6px; animation: ros-materialize 300ms var(--v4-ease) both; }
/* the author display:grid would beat the hidden attribute (second audit, finding 1) */
.ros-queue__detail[hidden] { display: none; }
.ros-queue__detail > div { display: flex; gap: 12px; font-size: var(--v4-fs-2); }
.ros-queue__detail dt { color: var(--v4-on-ink-mid); min-width: 7ch; }
.ros-queue__detail dd { margin: 0; font-weight: 700; }
@media (max-width: 480px) { .ros-queue__row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; } }

.ros-flow { flex: 1 1 0; min-height: 0; height: 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
@media (max-width: 760px) { .ros-flow { min-height: 150px; height: 150px; } }
.ros-flow__strip { display: flex; flex-direction: column; animation: ros-stream 26s linear infinite; }
@keyframes ros-stream { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ros-flow__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 22px; font-family: var(--v4-editorial); font-size: var(--v4-fs-2); color: var(--v4-on-ink-low); border-top: 1px solid rgba(26, 32, 48, 0.6); }
.ros-flow__row b { font-weight: 600; }
.ros-flow__row i { font-style: normal; }

.ros-wider { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ros-wider li { font-family: var(--v4-editorial); font-size: var(--v4-fs-2); color: var(--v4-on-ink-mid); border: 1px solid var(--v4-line-soft); border-radius: 999px; padding: 6px 14px; }

.ros-soft { margin-top: clamp(28px, 3.6vw, 48px); padding-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid var(--v4-line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.ros-soft__q { margin: 0; font-size: var(--v4-fs-5); font-weight: 700; }

/* ── 09 people · static rows ──────────────────────────────────────────── */

.ros-shift { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); align-items: stretch; margin-bottom: var(--ros-stack); }
@media (max-width: 760px) { .ros-shift { grid-template-columns: 1fr; } .ros-shift__arrow { transform: rotate(90deg); justify-self: center; } }
.ros-shift__col { border-radius: 18px; padding: 24px 22px; box-shadow: var(--ros-shadow-card); }
.ros-shift__col--before { background: var(--v4-ink); }
.ros-shift__col--after { background: linear-gradient(180deg, #141b30, var(--v4-ink-lift)); }
.ros-shift__label { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); font-weight: 800; color: var(--v4-on-ink-mid); margin: 0 0 14px; }
.ros-shift__col--after .ros-shift__label { color: var(--v4-cream); }
.ros-shift__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ros-shift__col li { font-size: var(--v4-fs-3); }
.ros-shift__col--before li { color: var(--v4-on-ink-mid); }
.ros-shift__col--after li { color: var(--v4-on-ink); font-weight: 700; }
.ros-shift__arrow { display: grid; place-items: center; }
.ros-shift__arrow svg { width: 44px; height: 44px; }
.ros-shift__arrow path { fill: none; stroke: var(--v4-on-ink-low); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ros-shift__arrow svg { transform: scaleX(-1); }

.ros-ai { margin-top: clamp(32px, 4vw, 56px); }
.ros-ai__list { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ros-ai__list li { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); border: 1px solid var(--v4-line); border-radius: 10px; padding: 9px 16px; }

.ros-rows { display: grid; gap: 14px; margin: 0 0 var(--ros-stack); background: var(--v4-ink-lift); border-radius: 18px; padding: 18px; box-shadow: var(--ros-shadow-card); }
.ros-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 9rem; align-items: center; gap: 14px; }
@media (max-width: 640px) { .ros-row { grid-template-columns: 1fr; gap: 6px; } }
.ros-row__k { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); font-weight: 800; color: var(--v4-on-ink-mid); }
.ros-row__end { font-size: var(--v4-fs-3); font-weight: 700; color: var(--v4-on-ink); }
.ros-row__track { position: relative; height: 42px; border-radius: 999px; background: var(--v4-ink); border: 1px solid var(--v4-line-soft); overflow: hidden; }
/* static: the token sits where it ended — the far end, or the human gate */
.ros-row__tok { position: absolute; top: 6px; width: 28px; height: 28px; border-radius: 999px; background: var(--v4-on-ink); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.8); }
.ros-row__tok--end { inset-inline-end: 6px; }
.ros-row__tok--gate { inset-inline-start: calc(62% - 36px); }
.ros-row__tok em { font-style: normal; font-family: var(--v4-editorial); font-size: 10px; font-weight: 800; color: var(--v4-on-light); white-space: nowrap; }
.ros-row--policy .ros-row__tok { width: auto; padding-inline: 10px; }
.ros-row--human .ros-row__tok { background: var(--v4-coral); width: auto; padding-inline: 10px; }
.ros-row__gate { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 62%; width: 3px; border-radius: 2px; background: var(--v4-coral); }

.ros-formula { font-family: var(--v4-editorial); font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; background: var(--v4-ink-lift); border-radius: 14px; padding: 16px 20px; margin: 0 0 var(--ros-stack); display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; box-shadow: var(--ros-shadow-card); }
.ros-formula span { color: var(--v4-on-ink-low); }

/* ── 10 measure (cream) · plinths ─────────────────────────────────────── */

.ros-levels { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: grid; gap: 14px; }
.ros-level { background: var(--v4-paper); border-radius: 20px; padding: 20px 20px 20px 24px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 22px; box-shadow: var(--ros-shadow-paper); align-items: stretch; }
.ros-level__key { margin: 0; display: grid; place-items: center; border-radius: 12px; font-family: var(--v4-system); font-size: var(--v4-fs-7); font-weight: 800; direction: ltr; min-height: 100%; }
.ros-level[data-certainty="high"] .ros-level__key { background: var(--v4-on-light); color: var(--v4-paper); }
.ros-level[data-certainty="mid"]  .ros-level__key { border: 2px solid var(--v4-on-light-mid); color: var(--v4-on-light); }
.ros-level[data-certainty="low"]  .ros-level__key { border: 2px dashed #b9ad98; color: var(--v4-on-light-mid); }
.ros-level[data-certainty="mid"]  { margin-inline-start: 4%; }
.ros-level[data-certainty="low"]  { margin-inline-start: 8%; background: #f8f2e8; }
.ros-level h3 { margin: 0 0 10px; font-size: var(--v4-fs-5); font-weight: 800; }
.ros-level ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ros-level li { font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); background: #f2e9db; border-radius: 6px; padding: 6px 12px; }
.ros-level[data-certainty="low"] li { background: transparent; border: 1px dashed #d8cdbd; }
.ros-level__note { margin: 0; font-size: var(--v4-fs-3); }
@media (max-width: 640px) { .ros-level[data-certainty="mid"], .ros-level[data-certainty="low"] { margin-inline-start: 0; } .ros-level { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding: 16px; } }

.ros-evidence { margin-top: clamp(24px, 3vw, 40px); }
.ros-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--v4-editorial); font-weight: 700; font-size: var(--v4-fs-3); margin: 0; }
.ros-chain span:nth-child(odd) { background: var(--v4-paper); box-shadow: var(--ros-shadow-paper); border-radius: 10px; padding: 9px 16px; }
.ros-chain span:nth-child(even) { color: var(--v4-on-light-mid); }

.ros-record { margin: clamp(20px, 3vw, 36px) 0 0; max-width: 620px; background: var(--v4-paper); border-radius: 18px; padding: 20px 22px; box-shadow: var(--ros-shadow-paper); }
.ros-record__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e6dccb; margin-bottom: 12px; flex-wrap: wrap; }
.ros-record__t { font-weight: 800; font-size: var(--v4-fs-3); display: inline-flex; align-items: center; gap: 8px; }
.ros-record__head .ros-id { border-color: var(--v4-on-light-mid); color: var(--v4-on-light-mid); }
.ros-record__j { font-weight: 700; font-size: var(--v4-fs-3); }
.ros-record__rows { margin: 0; display: grid; gap: 14px; }
.ros-record__rows > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px; align-items: center; }
.ros-record__rows dt { font-weight: 700; font-size: var(--v4-fs-3); }
.ros-record__rows dd { margin: 0; display: grid; gap: 7px; }
.ros-record__rows dd i { display: block; height: 1px; background: repeating-linear-gradient(90deg, #b9ad98 0 4px, transparent 4px 8px); }
@media (max-width: 520px) { .ros-record__rows > div { grid-template-columns: 1fr; } }

/* ── 11 handover (cream) ──────────────────────────────────────────────── */

.ros-handover__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .ros-handover__grid { grid-template-columns: 1fr; } }
.ros-handover__list { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ros-handover__list li { position: relative; padding-inline-start: 20px; }
.ros-handover__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.86em; width: 9px; height: 1px; background: var(--v4-on-light-mid); }
.ros-handover__turn { font-size: clamp(24px, 3vw, 36px); font-weight: 900; margin: 0 0 var(--ros-stack); }

.ros-panelfig { margin: 0; }
.ros-panelfig svg { width: 100%; height: auto; display: block; max-width: 420px; margin-inline: auto; }
.ros-panelfig__body { fill: var(--v4-paper); stroke: #d8cdbd; filter: drop-shadow(0 16px 28px rgba(20, 22, 29, 0.16)); }
.ros-panelfig__row rect { fill: var(--v4-on-light); }
.ros-panelfig__row circle { fill: var(--v4-paper); }
.ros-panelfig__row text { font-size: 15px; font-weight: 700; fill: var(--v4-on-light); text-anchor: start; }

/* ── who ─────────────────────────────────────────────────────────────── */
.ros-who { padding-block: clamp(36px, 5vw, 64px); }
.ros-who__in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.ros-who__fig { margin: 0; }
.ros-who__img { display: block; width: 100%; height: auto; max-width: 200px; filter: grayscale(0.15); }
.ros-who__body { padding-bottom: 12px; }
.ros-who__bound { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.45; margin: 0 0 16px; max-width: 30ch; text-wrap: balance; }
.ros-who__sign { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ros-who__sign b { font-size: var(--v4-fs-5); }
.ros-who__sign span { font-family: var(--v4-editorial); font-size: var(--v4-fs-2); color: var(--v4-on-ink-mid); }
@media (max-width: 640px) { .ros-who__in { grid-template-columns: 120px minmax(0, 1fr); align-items: end; } }

/* ── 12 fit ───────────────────────────────────────────────────────────── */

.ros-fitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(24px, 3vw, 40px); }
.ros-fit__label { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); font-weight: 800; color: var(--v4-on-ink-mid); margin: 0 0 12px; }
.ros-fit__label--gate { margin-top: 18px; color: var(--v4-on-ink); }
.ros-fit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ros-fit__list button { font: inherit; text-align: start; width: 100%; color: var(--v4-on-ink); background: transparent; border: 1px solid var(--v4-line); border-radius: 12px; padding: 12px 16px 12px 14px; min-height: 48px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: border-color 180ms var(--v4-ease), background-color 180ms var(--v4-ease); }
.ros-fit__list button::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--v4-on-ink-low); transition: background-color 180ms var(--v4-ease), border-color 180ms var(--v4-ease); }
.ros-fit__list--gate button::before { border-radius: 3px; }
.ros-fit__list button:hover { border-color: var(--v4-on-ink-mid); }
.ros-fit__list button[aria-pressed="true"] { border-color: var(--v4-on-ink); background: rgba(253, 246, 242, 0.04); }
.ros-fit__list button[aria-pressed="true"]::before { background: var(--v4-on-ink); border-color: var(--v4-on-ink); }
.ros-fit__count { margin: 14px 0 0; font-family: var(--v4-editorial); font-size: var(--v4-fs-2); color: var(--v4-on-ink-mid); }
.ros-fit__count b { font-size: var(--v4-fs-5); color: var(--v4-on-ink); font-family: var(--v4-system); }
.ros-fit__sep { margin-inline: 8px; }
.ros-fit__verdict { margin: 12px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(253, 246, 242, 0.04); border: 1px solid var(--v4-line); font-weight: 700; line-height: 1.7; animation: ros-materialize 360ms var(--v4-ease) both; }
.ros-fit__verdict span[hidden] { display: none; }
.ros-fit__verdict em { font-style: normal; color: var(--v4-coral); }
.ros-fit__verdict [data-fit-first] { display: block; color: var(--v4-on-ink); margin-top: 4px; }
.ros-notfull__list { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: grid; gap: 12px; }
.ros-notfull__list li { border-inline-start: 2px solid var(--v4-line); padding-inline-start: 16px; color: var(--v4-on-ink-mid); }
.ros-notfull__list strong { color: var(--v4-on-ink); }

.ros-fitcheck {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  background: linear-gradient(180deg, #141b30, var(--v4-ink-lift)); border-radius: 22px;
  padding: clamp(22px, 3vw, 40px); box-shadow: var(--ros-shadow-deep);
}
@media (max-width: 760px) { .ros-fitcheck { grid-template-columns: 1fr; } }
.ros-fitcheck__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ros-fitcheck__list li { font-family: var(--v4-editorial); font-size: var(--v4-fs-3); border: 1px solid var(--v4-line); border-radius: 999px; padding: 8px 16px; }

/* ── 13 FAQ ───────────────────────────────────────────────────────────── */

.ros-faq { border-top: 1px solid var(--v4-line-soft); max-width: 900px; }
.ros-faq__item { border-bottom: 1px solid var(--v4-line-soft); }
.ros-faq__item summary { cursor: pointer; list-style: none; padding: 18px 4px; font-size: var(--v4-fs-5); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; }
.ros-faq__item summary::-webkit-details-marker { display: none; }
.ros-faq__item summary::after { content: "+"; font-family: var(--v4-system); font-size: var(--v4-fs-6); color: var(--v4-on-ink-mid); transition: transform 200ms var(--v4-ease); flex: none; }
.ros-faq__item[open] summary::after { transform: rotate(45deg); }
.ros-faq__item p { margin: 0 0 22px; padding-inline-end: 40px; color: var(--v4-on-ink-mid); max-width: 72ch; animation: ros-materialize 360ms var(--v4-ease) both; }

/* ── 14 final ─────────────────────────────────────────────────────────── */

.ros-final { overflow: hidden; }
.ros-final__glow { position: absolute; inset-inline: 0; bottom: -10%; height: 60%; pointer-events: none; z-index: 0; background: radial-gradient(60% 80% at 50% 100%, rgba(255, 90, 69, 0.12), transparent 70%); }
.ros-final__in { z-index: 1; }
.ros-final__list { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: grid; gap: 8px; max-width: 60ch; }
.ros-final__list li { position: relative; padding-inline-start: 22px; }
.ros-final__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.86em; width: 10px; height: 1px; background: var(--v4-on-ink-low); }

/* ── motion OFF — reduced-motion preference, or the toggle ─────────────
   Everything lands on its final state. Functional reveals stay visible;
   decorative movement stops. Same rules for both entry points. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .ros-panel, .ros-queue__row, .ros-thread__break { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
  .ros-glue { --p: 1; }
  .ros-flow__strip { animation: none; }
  .ros-thread__live { transition: none; stroke-dashoffset: 0; }
  .ros-thread__head { opacity: 1; transition: none; }
  .ros-glue__event, .ros-glue__jevent, .ros-glue__exc, .ros-glue__lead { display: none; }
  .ros-exception, .ros-faq__item p, .ros-queue__detail, .ros-more__body, .ros-fit__verdict { animation: none; }
}
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] [data-reveal], html[data-motion="off"] .ros-panel, html[data-motion="off"] .ros-queue__row,
html[data-motion="off"] .ros-thread__break { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
html[data-motion="off"] .ros-glue { --p: 1; }
html[data-motion="off"] .ros-flow__strip { animation: none; }
html[data-motion="off"] .ros-thread__live { transition: none; stroke-dashoffset: 0; }
html[data-motion="off"] .ros-thread__head { opacity: 1; transition: none; }
html[data-motion="off"] .ros-glue__event, html[data-motion="off"] .ros-glue__jevent, html[data-motion="off"] .ros-glue__exc, html[data-motion="off"] .ros-glue__lead { display: none; }
html[data-motion="off"] .ros-exception, html[data-motion="off"] .ros-faq__item p, html[data-motion="off"] .ros-queue__detail, html[data-motion="off"] .ros-more__body, html[data-motion="off"] .ros-fit__verdict { animation: none; }

/* 2026-09-07: approved commercial distinction within the existing engagement beat. */
.ros-engage-note { margin-block: 18px; }
.ros-fit-note { margin-block: 12px 0; font-size: var(--v4-fs-3); }