/* ══════════════════════════════════════════════════════════════════════════
   نظام المحتوى — Content OS · page visual system v0.1

   Copy master:  ../dr-business-content-os-page-ar-master-v0.1-2026-09-19.md
   Positioning:  ../dr-business-content-os-ar-master-v0.1-2026-09-18.md (v0.3)
   Doctrine:     ../dr-business-content-os-doctrine-v1.0-2026-09-18.md (v1.1)
   Parity:       ../revenue-os-preview/styles.css — inherited, not reinvented.
                 styles.css / header.css / footer.css / header.js in this folder
                 are byte-identical to Revenue OS and Reputation. Everything
                 below is this page and nothing else.

   ── THE GROUNDS MEAN SOMETHING HERE ───────────────────────────────────────
   Ink is the governed environment: the asset is still inside the system.
   Cream is release: the moment something reaches somebody who is not us.
   That is why the loop, the approval rules, the two stoppers, the knowledge
   layer, the boundaries and the ladder are cream, and the chain, the modes
   and the FAQ are ink. It is an alternation you can defend in one sentence —
   ink is inside, cream is out — which is also what stops it reading as a
   stripe pattern.

   ── COLOUR LAW (inherited from Revenue v2 §13, extended once) ─────────────
   Coral = a human decision · an open exception · the primary commercial
   action. THE EXTENSION: on this page coral also means STOPPED, AND A NAMED
   PERSON OWNS CLEARING IT. It therefore appears more often here than on
   Revenue, and never as decoration — every coral mark on this page sits
   beside a named stop reason or a named signature.
   Sage (--cx-sage) = a controlled terminal state, and nothing else: صادر
   and منشور. #ff5a45 NEVER sits as text on cream; cream coral text is
   #ad3b28. --v4-coral-display is NOT used on cream: the :root comment and
   the inline comment on that token disagree about its ground, and an
   unmeasured token is not a token.

   ── THE DRAWING ALPHABET (four marks, one rule each) ──────────────────────
   1. A governed asset is a near-square block with a 3px leading edge on its
      inline-start side carrying the state colour. Never a document with a
      folded corner — the fold is Revenue's mark for a delivered document,
      and sales enablement, partner material, approved messages and campaign
      briefs are assets, none of which is a published document.
   2. A MACHINE ACTION IS A SQUARE. A HUMAN ACTION IS A CIRCLE. There are no
      other circles on this page, so اعتماد being the only circle in the
      chain teaches, without a caption, that a circle means a person put
      their name on it. It is also the AI lock drawn rather than asserted:
      the squares are many and the circle is one.
   3. A STOP IS A BREAK IN THE ENCLOSURE, never a cross, never a strike,
      never a warning triangle. The leading edge turns coral and the
      inline-end side opens as a 14px gap, with the reason beside it. The gap
      is the argument: a stopped asset is held open until its reason clears.
   4. (WITHDRAWN 2026-09-19.) Risk class was to be notches on the leading edge.
      It was never drawn in any figure, so the alphabet has three marks, not
      four — recorded rather than left as a rule the page does not keep.
   PUBLIC is drawn ONE way: the filled block plus a single 1px halo offset
   4px outside it. No globe, no megaphone, no platform glyph, no channel
   mark of any kind — naming a channel breaks the channel lock (§1).

   ── MOTION INVENTORY — if it is not listed here, it does not move ─────────
   SIG-A hero grid  · once when SEEN, ~1.8s, then rests.
   SIG-B the loop   · once when the FIGURE is in the reading zone, 1.4s, then STOPS DEAD.
   SIG-C the chain  · once when the FIGURE is in the reading zone, ~3.4s, rests; replayable.
   All three re-arm if the reader scrolls the figure out of the reading zone and
   back into it. That is reader-driven and still not a loop: nothing restarts on
   its own, and every signature ends at rest. Measured 2026-09-20 — triggering on
   the SECTION made all three finish drawing off-screen.
   Section reveals  · the shared [data-reveal] pattern, 620ms, staggered.
   Tabs, chips, the mode switch and the boundary test · state changes only.
   NOTHING LOOPS. `animation-iteration-count: infinite` appears nowhere in
   this file, and that is a release check, not a preference: §12 B-01 forbids
   presenting the loop as one that turns today, and an idling diagram asserts
   exactly that. §12 also forbids a live/pulsing status dot for the same
   reason. Section 12 (الحالة) has no motion at all — the stillness is the
   design.

   ── AND IT MUST NOT OUT-SHOUT REVENUE OS (§10) ────────────────────────────
   No sticky bar, no floating control, one ask, a hero that animates once and
   rests where Revenue's circuit runs while visible. Revenue stays the
   flagship; this page is quieter on purpose.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── page-scoped tokens ─────────────────────────────────────────────────── */

.cx-page {
  --cx-stroke: 1.5px;              /* structure                              */
  --cx-stroke-edge: 2.5px;         /* the governed leading edge, active gate */
  --cx-hair: 1px;                  /* rules, notches, risers, the halo       */
  --cx-radius: 2px;
  --cx-gap-stop: 14px;             /* the break in a stopped enclosure       */

  --cx-draw: cubic-bezier(.2, .65, .3, 1);
  --cx-step: cubic-bezier(.4, 0, .2, 1);

  /* ── diagram inks, resolved per ground so one <symbol> serves both ───────
     🔴 TWO DEFECTS MEASURED HERE ON 2026-09-19, BOTH SHIPPED INVISIBLE.
     1. `--cx-sage: var(--v4-flow)` — and --v4-flow is defined in NO stylesheet
        this page loads. It computed to EMPTY, so `.cx-halo`'s stroke resolved
        to `none` and the halo — which the header above calls the only way
        PUBLIC is ever drawn — was not painted at all. The house sage is
        --v4-calm (#6f9c8a, styles.css:49); a 1px halo needs it lighter still.
     2. Every load-bearing stroke inherited --v4-line, measured at 1.34:1
        against the ink ground. WCAG wants 3:1 for a graphical object, and the
        flagship reserves that token for scaffolding while drawing its meaning
        near 5:1. So this page was quieter than Revenue OS by being literally
        harder to see, which is not what §10 asked for.
     The token is now SPLIT: --cx-line is scaffolding (ticks, risers, inert
     rules) and --cx-line-strong carries anything a reader must resolve —
     the spine, the nodes, the asset's body. Every value below is measured
     against the ground it actually lands on, not against ink alone. */
  --cx-line: #2f394d;              /* scaffolding · 1.8:1 on ink            */
  --cx-line-strong: #7d8fa8;       /* load-bearing · measured ≥ 3:1         */
  --cx-face: #1b2236;              /* raised face — must read against ink   */
  --cx-label: var(--v4-on-ink-mid);
  --cx-coral: var(--v4-coral);
  --cx-sage: #7fb39d;              /* survives as a 1px stroke on ink       */
}
.ros-sec--cream .cx-page,
.cx-page .ros-sec--cream {
  --cx-line: var(--v4-cream-line);
  --cx-line-strong: #7a6f61;       /* load-bearing on cream                 */
  --cx-face: var(--v4-cream-soft);
  --cx-label: var(--v4-on-light-mid);
  --cx-coral: #ad3b28;             /* NEVER #ff5a45 as text on cream        */
  --cx-sage: #3f6a58;
}

/* Diagram text is reading text. The Arabic readability floor is reset inside
   <svg> by the shared layer, which is correct for Latin system tokens and
   wrong for a stop reason a buyer has to read — so reading-bearing <text>
   sets its own size and never inherits the reset.
   🔴 THAT WAS A CLAIM, NOT A GUARD. A font-size inside a scaled viewBox is a
   RATIO. Measured 2026-09-20, the old 14px rendered 12.6px at 1180, 10.9px at
   1024, 9.0px at 861 and 4.0px on a 390px phone — silently, because the shared
   floor rule is reset inside <svg>, so the only check that could have caught
   it was switched off by design.
   The floor now holds by arithmetic. These figures are drawn in a 1240-unit
   viewBox inside a container of (viewport − 63px), so a label renders at
   size × (viewport − 63) ÷ 1240 . At 18px nothing renders below 13.3px
   anywhere the drawing is shown, because below 981px it is not shown at all —
   .cx-stack replaces it. Change either number and verify.py recomputes that
   product and fails. */
.cx-fig text { font-family: var(--v4-arabic, "Tajawal", system-ui, sans-serif); }
.cx-fig .cx-t-read { font-size: 18px; fill: currentColor; }
.cx-fig .cx-t-label { font-size: 18px; fill: var(--cx-label); }
.cx-fig .cx-t-sys {
  font-family: "Inter", system-ui, sans-serif; font-size: 11px;
  letter-spacing: .14em; fill: var(--cx-label); direction: ltr;
}

.cx-fig { display: block; width: 100%; height: auto; overflow: visible; }
.cx-fig [stroke] { stroke-linecap: square; stroke-linejoin: miter; }

/* The shared focus ring is --v4-coral, which measures 2.65:1 on cream — and the page's
   only ask sits on a cream plate. A keyboard buyer must be able to see it. */
.ros-sec--cream :where(a, button, summary, input):focus-visible { outline-color: #ad3b28; }

/* ── the truth tag · every diagram on this page carries one ─────────────────
   Reputation established the pattern: dashed = illustrative, solid sage =
   real. Every tag on this page is dashed, and the fact that a solid sage tag
   appears NOWHERE is itself the honest statement. */

.cx-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--v4-fs-3); color: var(--cx-label);
  border: 1px dashed var(--cx-line); border-radius: 999px;
  padding: 6px 14px; margin: 0;
}
.cx-tag + .cx-tag { margin-inline-start: 10px; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* ── the maturity label is a typographic decision, not a badge ──────────────
   It is never fs-1, never a chip, never --v4-on-ink-low, and never smaller
   than the sentence it qualifies. A label a buyer has to squint at is a
   disclaimer; a label set at reading size is a position. */

.cx-status {
  font-size: var(--v4-fs-3); line-height: 1.75; font-weight: 700;
  color: var(--v4-on-ink); margin: 18px 0 0;
  border-inline-start: 3px solid var(--v4-coral);
  padding-inline-start: 16px; max-width: 54ch;
}
.ros-sec--cream .cx-status { color: var(--v4-on-light); border-inline-start-color: #ad3b28; }

/* ── 01 · hero ─────────────────────────────────────────────────────────── */

.cx-hero__in {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 981px) { .cx-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.cx-h1 {
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.24; font-weight: var(--v4-display-weight, 900);
  letter-spacing: 0; margin: 0 0 20px; max-width: 19ch; text-wrap: balance;
}
.cx-h1 span { display: block; }
.cx-h1 span + span { color: var(--v4-on-ink-mid); }

.cx-hero__tension {
  font-size: var(--v4-fs-5); line-height: 1.8; max-width: 44ch;
  color: rgba(253, 246, 242, .84); margin: 0 0 20px;
}
.cx-hero__promise {
  font-size: var(--v4-fs-5); line-height: 1.8; max-width: 46ch;
  font-weight: 700; margin: 0 0 8px;
}
.cx-hero__promise b { color: var(--v4-coral); font-weight: inherit; }
.cx-hero__keep { font-size: var(--v4-fs-4); line-height: 1.85; max-width: 46ch; color: var(--v4-on-ink-mid); margin: 0 0 4px; }

.cx-cta { margin: 28px 0 0; }
.cx-cta__note {
  font-size: var(--v4-fs-3); line-height: 1.8; color: var(--v4-on-ink-mid);
  max-width: 52ch; margin: 14px 0 0;
}
.cx-cta__note + .cx-cta__note { font-size: var(--v4-fs-2); margin-top: 8px; color: var(--v4-on-ink-low); }
.ros-sec--cream .cx-cta__note { color: var(--v4-on-light-mid); }

/* wayfinding — three in-page anchors. NOT asks. There is one ask on this
   page and it is the free call. */
.cx-way { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; }
.cx-way a {
  font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); text-decoration: none;
  border-bottom: 1px solid transparent; padding-block: 8px; display: inline-flex; gap: 6px;
}
.cx-way a:hover { color: var(--v4-on-ink); border-bottom-color: var(--v4-on-ink-low); }
.cx-way i { font-style: normal; transform: scaleX(-1); }

/* SIG-A · شبكة الشهر — the blank backs */

.cx-grid {
  display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr);
  perspective: 900px;
}
@media (min-width: 981px) { .cx-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

.cx-tile {
  position: relative; aspect-ratio: 1 / .78;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 500ms var(--cx-step);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.cx-grid[data-flipped] .cx-tile { transform: rotateY(180deg); }

/* 🔴 MEASURED 2026-09-19: the front face and the back face differed by 1.2:1 — twenty
   identical dark rectangles. The flip that carries the ENTIRE hero argument was invisible,
   and the grid read as a loading skeleton, which is a poor first impression for a company
   selling governance. The front is now a filled, written-on card; the back is emptier and
   darker than the ground. Front faces also vary, because twenty identical ones look
   generated rather than drawn. */
.cx-tile__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: var(--cx-hair) solid var(--cx-line); border-radius: var(--cx-radius);
  background: #161d30;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 12px;
}
.cx-tile__face i { display: block; height: 1px; background: var(--cx-line-strong); opacity: .75; }
.cx-tile__face i:nth-child(1) { width: 78%; }
.cx-tile__face i:nth-child(2) { width: 92%; }
.cx-tile__face i:nth-child(3) { width: 54%; }
/* a month of output is not twenty identical things */
.cx-tile:nth-child(3n) .cx-tile__face i:nth-child(1) { width: 62%; }
.cx-tile:nth-child(3n) .cx-tile__face i:nth-child(3) { width: 84%; }
.cx-tile:nth-child(4n) .cx-tile__face i:nth-child(2) { width: 70%; }
.cx-tile:nth-child(5n) .cx-tile__face i:nth-child(1) { width: 90%; }
.cx-tile:nth-child(5n) .cx-tile__face i:nth-child(3) { width: 40%; }
.cx-tile:nth-child(7n) .cx-tile__face i:nth-child(2) { width: 58%; }

.cx-tile__face--back {
  transform: rotateY(180deg);
  background: #070a14;
  border-color: #1d2536;
  justify-content: flex-end; gap: 10px;
}
/* the backs ARE identical, and that is the point */
.cx-tile__face--back i { background: var(--cx-line); opacity: 1; }
/* the blank field where the reason would be. It never fills, for as long as
   the page is open — that is the whole argument, and it claims nothing. */
.cx-tile__field {
  height: 22px; border: 1px dashed var(--v4-line); border-radius: var(--cx-radius);
}
.cx-tile__face--back i { width: 44%; }

/* the draw-in: cheap and fast, the visual sound of output.

   🔴 MEASURED 2026-09-20: this used to be a transition waiting for JS to add [data-drawn],
   so the hero's whole visual owed its existence to script.js having run. It is now a CSS
   animation that plays at first paint and owes script start nothing. [data-drawn] stays as the
   assert, for the same reason settleDrawn() exists — where animations are disabled the faces
   must still end up visible, and that fallback must not be JavaScript.

   What this does NOT fix, measured rather than assumed: on the 411KB inlined standalone the
   faces still read opacity 0 for ~2.9s, with animationPlayState already 'running'. Nothing
   paints until the single-file parse finishes, so the animation's clock has not started. That
   is the review artifact's cost, not this rule's — production serves separate files. Do not
   quote the standalone's first-paint as though it were the page's. */
.cx-js .cx-tile__face {
  opacity: 0; animation: cx-face-in 260ms linear forwards;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes cx-face-in { to { opacity: 1; } }
.cx-grid[data-drawn] .cx-tile__face { opacity: 1; }

.cx-grid__under { margin: 20px 0 0; font-size: var(--v4-fs-4); color: var(--v4-on-ink); font-weight: 700; }

/* ── 02 · المشكلة · خيط الشهر ───────────────────────────────────────────── */

.cx-thread { list-style: none; margin: 0 0 var(--ros-stack); padding: 0; display: grid; gap: 4px; }
.cx-thread li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  align-items: center; padding-block: 14px;
  font-size: var(--v4-fs-4); line-height: 1.8;
}
@media (min-width: 861px) {
  .cx-thread li { grid-template-columns: 120px minmax(0, 1fr); gap: 26px; }
  /* the seam: each rule carries a gap in its middle, and the gaps widen down
     the column until the fifth. Read as a column, they are one vertical
     tear — which is the section's argument without a word spent on it. */
  .cx-thread__rule {
    display: grid; grid-template-columns: 1fr var(--g, 4px) 1fr; align-items: center; gap: 0;
  }
  .cx-thread__rule::before, .cx-thread__rule::after {
    content: ""; height: 1px; background: var(--cx-line);
  }
  .cx-thread__rule::after { grid-column: 3; }
  .cx-thread li:nth-child(1) .cx-thread__rule { --g: 4px; }
  .cx-thread li:nth-child(2) .cx-thread__rule { --g: 8px; }
  .cx-thread li:nth-child(3) .cx-thread__rule { --g: 14px; }
  .cx-thread li:nth-child(4) .cx-thread__rule { --g: 22px; }
  .cx-thread li:nth-child(5) .cx-thread__rule { --g: 34px; }
}
@media (max-width: 860px) {
  .cx-thread__rule { height: 1px; width: 24px; background: var(--cx-line); }
}

.cx-release {
  margin: var(--ros-stack) 0 0; padding: 26px 28px;
  background: var(--v4-ink-lift); border-radius: 18px;
  box-shadow: var(--ros-shadow-card);
  font-size: var(--v4-fs-5); line-height: 1.8; max-width: 58ch;
}
.cx-release strong { color: var(--v4-on-ink); }
.cx-release p { margin: 0; }
.cx-release p + p { margin-top: 14px; color: var(--v4-on-ink-mid); }

/* ── 03 · ما هو · the definition slab + the two rails ───────────────────── */

.cx-def {
  display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 981px) { .cx-def { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; } }

.cx-def__slab {
  background: var(--v4-cream-soft); border-radius: 20px;
  padding: clamp(24px, 3vw, 38px); box-shadow: var(--ros-shadow-paper);
  border-inline-start: 4px solid #ad3b28;
}
.cx-def__slab blockquote {
  margin: 0; font-size: var(--v4-fs-6); line-height: 1.85; font-weight: 700;
  color: var(--v4-on-light);
}
.cx-def__slab .cx-def__keep { margin: 18px 0 0; font-size: var(--v4-fs-4); line-height: 1.85; color: var(--v4-on-light-mid); }

.cx-diff {
  margin: var(--ros-stack) 0 0; font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.6; font-weight: 800; max-width: 40ch; text-wrap: balance;
}

/* ── 04 · SIG-B · الخط الذي صار حلقة ────────────────────────────────────── */

.cx-loop { position: relative; }
.cx-loop__fig { margin: 0 0 var(--ros-stack); }

/* the added segments are coral because they are what the buyer does not own;
   they draw only when the section is seen, once, and then stop dead. */
.cx-loop .cx-seg-add {
  stroke: var(--cx-coral);
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
}
.cx-loop[data-run] .cx-seg-add {
  animation: cx-draw 520ms var(--cx-draw) forwards;
  animation-delay: var(--d, 0ms);
}
.cx-loop .cx-ghost { stroke: var(--cx-line); stroke-dasharray: 5 5; }
.cx-loop .cx-ring { stroke: var(--cx-line-strong); stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); }
.cx-loop[data-run] .cx-ring { animation: cx-draw 760ms var(--cx-draw) 620ms forwards; }

@keyframes cx-draw { to { stroke-dashoffset: 0; } }

.cx-stations { list-style: none; margin: var(--ros-stack) 0 0; padding: 0; display: grid; gap: 1px; background: var(--v4-cream-line); }
.cx-station { background: var(--v4-cream); padding: 16px 18px; display: grid; gap: 6px; }
.cx-station b { font-size: var(--v4-fs-4); font-weight: 800; }
.cx-station span { font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); }
@media (min-width: 861px) { .cx-stations { grid-template-columns: repeat(5, 1fr); } }

.cx-versus { display: grid; gap: 16px; margin: var(--ros-stack) 0 0; }
@media (min-width: 861px) { .cx-versus { grid-template-columns: 1fr 1fr; gap: 24px; } }
.cx-versus__q {
  padding: 20px 22px; border-radius: 16px; background: var(--v4-cream-soft);
  box-shadow: var(--ros-shadow-paper); font-size: var(--v4-fs-5); line-height: 1.7; font-weight: 700;
}
.cx-versus__q--weak { color: var(--v4-on-light-mid); font-weight: 500; }
.cx-versus__q small { display: block; margin-top: 10px; font-size: var(--v4-fs-3); font-weight: 500; color: var(--v4-on-light-mid); }

/* ── 05 · SIG-C · السلسلة التي ترفض ─────────────────────────────────────── */

.cx-chain { position: relative; }
.cx-chain__fig { margin: 0 0 18px; }

.cx-chain .cx-spine { stroke: var(--cx-line-strong); stroke-width: var(--cx-stroke); fill: none;
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.cx-chain[data-run] .cx-spine { animation: cx-draw 950ms var(--cx-draw) forwards; }

.cx-node { fill: none; stroke: var(--cx-line-strong); stroke-width: var(--cx-stroke); }
.cx-node--gate { transition: stroke-width 200ms var(--cx-step), stroke 200ms var(--cx-step); }
.cx-chain[data-halt] .cx-node--gate { stroke-width: var(--cx-stroke-edge); stroke: var(--cx-coral); }
/* the only circle on the page: a person put their name on it */
.cx-node--human { stroke: var(--cx-label); }

/* the travelling asset */
.cx-asset { transition: transform 260ms var(--cx-step); transform: translateX(var(--cx-x, 0)); }
.cx-asset__body { fill: var(--cx-face); stroke: var(--cx-line-strong); stroke-width: var(--cx-stroke); }
.cx-asset__edge { fill: var(--cx-label); }
.cx-chain[data-halt] .cx-asset__edge { fill: var(--cx-coral); }
/* a stop is a BREAK in the enclosure — the inline-end side opens by 14px */
.cx-asset__gap { opacity: 0; transition: opacity 200ms linear; }
.cx-chain[data-halt] .cx-asset__gap { opacity: 1; }
.cx-asset__reason { opacity: 0; transition: opacity 260ms linear 120ms; }
.cx-chain[data-halt] .cx-asset__reason { opacity: 1; }

.cx-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cx-reasons button {
  font: inherit; font-size: var(--v4-fs-3); cursor: pointer;
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: transparent; color: var(--v4-on-ink-mid);
  border: 1px solid var(--v4-line); transition: border-color 180ms, color 180ms;
}
.cx-reasons button:hover { color: var(--v4-on-ink); border-color: var(--v4-on-ink-low); }
.cx-reasons button[aria-pressed="true"] { color: var(--v4-coral); border-color: var(--v4-coral); }



.cx-states { margin: var(--ros-stack) 0 0; }
.cx-halo { fill: none; stroke: var(--cx-sage); stroke-width: var(--cx-hair); }
.cx-state-note { margin: 14px 0 0; font-size: var(--v4-fs-3); line-height: 1.8; color: var(--v4-on-ink-mid); max-width: 62ch; }

.cx-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 0; }
.cx-controls button {
  font: inherit; font-size: var(--v4-fs-3); cursor: pointer; min-height: 44px;
  padding: 10px 18px; border-radius: 10px; background: transparent;
  color: var(--v4-on-ink-mid); border: 1px solid var(--v4-line);
}
.cx-controls button:hover { color: var(--v4-on-ink); border-color: var(--v4-on-ink-low); }
.ros-sec--cream .cx-controls button { color: var(--v4-on-light-mid); border-color: var(--v4-cream-line); }
/* the replay control does not exist until the script says the motion exists */
.cx-controls [data-replay] { display: none; }
.cx-ready .cx-controls [data-replay] { display: inline-flex; align-items: center; }

/* ── 06 · قاعدة الاعتماد · three bands, each ending in its own terminus ─── */

.cx-bands { display: grid; gap: 16px; margin: 0 0 var(--ros-stack); }
.cx-band {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: 22px 24px; border-radius: 16px;
  background: var(--v4-ink-lift); box-shadow: var(--ros-shadow-card);
}
@media (min-width: 861px) { .cx-band { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; } }
.cx-band__name { font-size: var(--v4-fs-5); font-weight: 800; margin: 0 0 6px; }
.cx-band__eg { font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); margin: 0; }
.cx-band__rule { font-size: var(--v4-fs-4); line-height: 1.8; margin: 0; }
.cx-band__label { display: block; font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); margin-bottom: 6px; }

/* the terminus IS the rule, drawn rather than written in a cell */
.cx-term { margin-top: 14px; }
.cx-term--open { border-top: 2px dashed var(--v4-on-ink-low); padding-top: 10px; }
.cx-term--stamp { border-top: 2px solid var(--v4-coral); padding-top: 10px; }
.cx-term--sign { border-top: 1px solid var(--v4-on-ink); padding-top: 10px; }
.cx-term span { font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); }

/* ── 07 · خاصيتان توقفان الإصدار ────────────────────────────────────────── */

.cx-gates { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) { .cx-gates { grid-template-columns: 1fr 1fr; } }
.cx-gate {
  background: var(--v4-cream-soft); border-radius: 18px; padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--ros-shadow-paper);
}
.cx-gate h3 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 24px); font-weight: 800; }
.cx-gate p { margin: 0 0 16px; font-size: var(--v4-fs-4); line-height: 1.85; color: var(--v4-on-light-mid); }

/* the comb: parallel strokes, one per recent asset, height = its structure.
   NO count, NO percentage, NO threshold — and nothing about our own library,
   which is internal (§7). */
.cx-comb { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin: 0 0 16px; }
.cx-comb i {
  flex: 1; background: var(--v4-cream-line); border-radius: 1px;
  height: var(--h, 60%); transition: height 420ms var(--cx-step), background 300ms;
}
.cx-gate[data-flat] .cx-comb i { height: 62%; background: #e0c7bd; }
.cx-gate[data-flat] .cx-comb i:nth-child(odd) { background: #d9b3a7; }

.cx-stopbadge {
  display: none; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: var(--v4-fs-3); font-weight: 700; color: #ad3b28;
  border: 1px solid #e3c6bd; border-radius: 10px; padding: 12px 14px; background: #fbf0ec;
}
.cx-gate[data-flat] .cx-stopbadge { display: flex; }

/* two language tracks, each with its own approval circle, and no rule
   connecting them: «اعتماد إحداهما لا يعني اعتماد الأخرى», with nothing left
   to explain. */
.cx-langs { display: grid; gap: 12px; margin: 0 0 16px; }
.cx-lang {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--v4-cream-line); border-radius: 12px; background: #fff;
}
.cx-lang__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--v4-on-light-mid); justify-self: center; }
.cx-lang--done .cx-lang__mark { background: #4e7a68; border-color: #4e7a68; }
.cx-lang b { font-size: var(--v4-fs-4); }
.cx-lang span { display: block; font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); }

/* ── 08 · ما الذي تشتريه أولاً — the fan of deliverables ────────────────── */

.cx-fan { display: grid; gap: 8px; margin: 0 0 var(--ros-stack); }
.cx-fan { list-style: none; padding: 0; }
.cx-fan__row {
  background: #fff; border: 1px solid var(--v4-cream-line); border-radius: 12px;
  border-inline-start: 3px solid #ad3b28;
  padding: 16px 18px; min-height: 56px; display: flex; align-items: center;
  font-size: var(--v4-fs-4); text-align: start;
}
.cx-fan__caption {
  margin: 14px 0 0; font-size: var(--v4-fs-3); line-height: 1.8; color: var(--v4-on-light-mid);
}

.cx-own {
  margin: var(--ros-stack) 0 0; padding: 18px 22px; border-radius: 14px;
  background: #fbf0ec; border-inline-start: 4px solid #ad3b28;
  font-size: var(--v4-fs-5); line-height: 1.75; font-weight: 700; color: var(--v4-on-light);
}

/* ── 09 · التحكّم الإداري — the rejection, then the replacement ─────────── */

.cx-reject {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 14px 18px; border: 1px solid var(--v4-line); border-radius: 12px;
  color: var(--v4-on-ink-low); font-size: var(--v4-fs-4);
  position: relative; margin: 0 0 8px;
}
.cx-reject::after {
  content: ""; position: absolute; inset-inline: 14px; top: 50%; height: 1px;
  background: var(--v4-coral);
}
.cx-reject__cap { display: block; font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); margin: 0 0 var(--ros-stack); }

.cx-report { background: var(--v4-ink-lift); border-radius: 18px; box-shadow: var(--ros-shadow-card); overflow: hidden; }
.cx-report__row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px 24px; font-size: var(--v4-fs-4); line-height: 1.8;
}
.cx-report__row + .cx-report__row { border-top: 1px solid var(--v4-line-soft); }
.cx-report__row b { font-family: "Inter", system-ui, sans-serif; font-size: var(--v4-fs-2); color: var(--v4-on-ink-low); direction: ltr; }
/* the fourth row is never set smaller than the other three. What we could
   not measure is part of the report, not a footnote to it. */

/* ── 10 · من يشغّله — the board where exactly one marker moves ──────────── */

.cx-board { background: var(--v4-ink-lift); border-radius: 18px; box-shadow: var(--ros-shadow-card); overflow: hidden; }
.cx-board__head, .cx-board__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; align-items: center;
  padding: 16px 20px; gap: 12px;
}
.cx-board__head { color: var(--v4-on-ink-mid); font-size: var(--v4-fs-3); border-bottom: 1px solid var(--v4-line); }
.cx-board__row + .cx-board__row { border-top: 1px solid var(--v4-line-soft); }
.cx-board__row span:first-child { font-size: var(--v4-fs-4); }
.cx-board__cell { justify-self: center; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--v4-line); }
.cx-board__cell[data-on] { background: var(--v4-coral); border-color: var(--v4-coral); }
.cx-board__cell { transition: background 260ms var(--cx-step), border-color 260ms var(--cx-step); }

.cx-switch { display: inline-flex; padding: 4px; border: 1px solid var(--v4-line); border-radius: 12px; gap: 4px; margin: 0 0 18px; }
.cx-switch button {
  font: inherit; font-size: var(--v4-fs-3); cursor: pointer; min-height: 44px; padding: 10px 18px;
  border: 0; border-radius: 9px; background: transparent; color: var(--v4-on-ink-mid);
}
.cx-switch button[aria-selected="true"] { background: var(--v4-on-ink); color: var(--v4-ink); font-weight: 700; }

.cx-pinned { margin: 18px 0 0; display: grid; gap: 10px; }
.cx-pinned p { margin: 0; font-size: var(--v4-fs-4); line-height: 1.8; color: var(--v4-on-ink-mid); }
.cx-pinned p:last-child { color: var(--v4-on-ink); font-weight: 700; border-bottom: 2px solid var(--v4-coral); padding-bottom: 10px; display: inline-block; }

/* ── 11 · الحدود · one test, not a list ─────────────────────────────────── */

.cx-test { display: grid; gap: 18px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cx-chips button {
  font: inherit; font-size: var(--v4-fs-3); cursor: pointer; min-height: 44px; padding: 10px 16px;
  border-radius: 10px; background: #fff; border: 1px solid var(--v4-cream-line); color: var(--v4-on-light);
}
.cx-chips button[aria-pressed="true"] { border-color: var(--v4-on-light); box-shadow: var(--ros-shadow-paper); }
.cx-verdict {
  min-height: 132px; border: 1px dashed var(--v4-cream-line); border-radius: 16px;
  padding: 20px 22px; background: var(--v4-cream-soft);
}
.cx-verdict__q { margin: 0 0 12px; font-size: var(--v4-fs-5); line-height: 1.7; font-weight: 700; }
.cx-verdict__a { margin: 0; font-size: var(--v4-fs-4); line-height: 1.8; color: var(--v4-on-light-mid); }
.cx-verdict__a b { color: var(--v4-on-light); }

.cx-compare { display: grid; gap: 1px; background: var(--v4-cream-line); border-radius: 14px; overflow: hidden; margin: var(--ros-stack) 0 0; }
@media (min-width: 861px) { .cx-compare { grid-template-columns: 1fr 1fr; } }
.cx-compare > div { background: var(--v4-cream-soft); padding: 22px 24px; }
.cx-compare h4 { margin: 0 0 6px; font-size: var(--v4-fs-4); font-weight: 800; }
.cx-compare p { margin: 0; font-size: var(--v4-fs-3); line-height: 1.8; color: var(--v4-on-light-mid); }
.cx-compare a { color: #ad3b28; }

/* ── 12 · أين نحن اليوم · the only motionless section, on purpose ───────── */

.cx-rungs { display: grid; gap: 10px; margin: 0 0 var(--ros-stack); }
.cx-rung {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: 14px; border: 1px solid var(--v4-line);
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 800;
}
.cx-rung--on { border-color: transparent; background: var(--v4-ink-lift); box-shadow: var(--ros-shadow-card); border-bottom: 3px solid var(--v4-coral); }
.cx-rung--off { color: var(--v4-on-ink-low); }
.cx-rung__field { min-width: 120px; height: 1px; background: var(--v4-line); }
.cx-rung small { display: block; font-size: var(--v4-fs-3); font-weight: 500; color: var(--v4-on-ink-mid); margin-top: 6px; }

.cx-absences { list-style: none; margin: var(--ros-stack) 0 0; padding: 0; display: grid; gap: 12px; }
.cx-absences li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: start; font-size: var(--v4-fs-4); line-height: 1.8; }
.cx-absences i { width: 14px; height: 14px; border: 1px solid var(--v4-on-ink-low); border-radius: 2px; margin-top: 8px; }

.cx-coralline {
  margin: var(--ros-stack) 0 0; font-size: var(--v4-fs-5); line-height: 1.75; font-weight: 700;
  color: var(--v4-coral); max-width: 56ch;
}
.cx-selfrule { margin: 18px 0 0; font-size: var(--v4-fs-4); line-height: 1.85; color: var(--v4-on-ink-mid); max-width: 60ch; }

/* ── 14 · السلّم · plates on a rail ─────────────────────────────────────── */

.cx-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cx-plate {
  display: grid; gap: 8px; padding: 22px 24px; border-radius: 16px;
  background: var(--v4-cream-soft); border: 1px solid var(--v4-cream-line);
}
.cx-plate b { font-size: var(--v4-fs-5); font-weight: 800; }
.cx-plate p { margin: 0; font-size: var(--v4-fs-3); line-height: 1.8; color: var(--v4-on-light-mid); }
.cx-plate--off { background: transparent; color: var(--v4-on-light-mid); border-style: dashed; }
.cx-plate--off b { text-decoration: line-through; text-decoration-thickness: 1px; }
.cx-plate--on { border-color: #ad3b28; border-inline-start: 4px solid #ad3b28; background: #fff; box-shadow: var(--ros-shadow-paper); }
.cx-plate--future { background: transparent; border-style: dashed; }
.cx-ladder__band {
  margin: 16px 0 0; font-size: var(--v4-fs-3); color: var(--v4-on-light-mid);
  border-top: 1px solid var(--v4-cream-line); padding-top: 14px;
}

/* ── 15 · FAQ — deliberately undesigned ─────────────────────────────────── */

.cx-faq { display: grid; gap: 1px; background: var(--v4-line-soft); border-block: 1px solid var(--v4-line-soft); }
.cx-faq details { background: var(--v4-ink); }
.cx-faq summary {
  cursor: pointer; list-style: none; padding: 20px 4px; min-height: 44px;
  font-size: var(--v4-fs-5); font-weight: 700; display: flex; gap: 14px; align-items: baseline;
}
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::before { content: "+"; color: var(--v4-coral); font-family: "Inter", system-ui, sans-serif; }
.cx-faq details[open] summary::before { content: "−"; }
.cx-faq__a { padding: 0 4px 22px; font-size: var(--v4-fs-4); line-height: 1.9; color: var(--v4-on-ink-mid); max-width: 70ch; }
.cx-faq__a strong { color: var(--v4-on-ink); }
.cx-faq table { width: 100%; border-collapse: collapse; margin: 16px 0 0; font-size: var(--v4-fs-3); }
.cx-faq th, .cx-faq td { border: 1px solid var(--v4-line); padding: 12px 14px; text-align: start; vertical-align: top; }
.cx-faq th { color: var(--v4-on-ink); font-weight: 700; background: var(--v4-ink-lift); }

/* ── 16 · the close ─────────────────────────────────────────────────────── */

.cx-close { text-align: start; max-width: 62ch; }
.cx-close__test { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.35; font-weight: 900; margin: 0 0 var(--ros-stack); text-wrap: balance; }
.cx-close__ask { font-size: var(--v4-fs-5); line-height: 1.8; margin: 0 0 var(--ros-stack); }

/* the page opens on many blank backs and closes on one blank field */
.cx-lastcard {
  width: min(100%, 320px); border: 1px solid var(--v4-line); border-radius: 6px;
  padding: 20px; margin: 0 0 var(--ros-stack); background: rgba(18, 23, 42, .45);
}
.cx-lastcard i { display: block; height: 1px; background: var(--v4-line); margin-bottom: 10px; }
.cx-lastcard i:nth-of-type(2) { width: 72%; }
.cx-lastcard label { display: block; font-size: var(--v4-fs-3); color: var(--v4-on-ink-mid); margin: 16px 0 8px; }
.cx-lastcard__field { height: 34px; border: 1px dashed var(--v4-line); border-radius: 3px; position: relative; }
.cx-lastcard__field::after {
  content: ""; position: absolute; inset-inline-start: 12px; top: 8px; width: 1px; height: 18px;
  background: var(--v4-on-ink-low);
}
.cx-final-note { margin: var(--ros-stack) 0 0; font-size: var(--v4-fs-3); line-height: 1.8; color: var(--v4-on-ink-mid); max-width: 56ch; }

/* ── motion off · reduced motion ────────────────────────────────────────────
   Both paths render the ARGUMENT, not a frozen first frame: the grid shows
   its backs, the loop shows the closed ring, the chain shows the halt with
   its reason already visible. A reader who has turned motion off must not
   lose the point, only the theatre. */

.cx-page[data-motion="off"] .cx-tile,
.cx-page[data-motion="off"] .cx-tile__face { transition: none; }
.cx-page[data-motion="off"] .cx-grid .cx-tile { transform: rotateY(180deg); }
/* `animation: none` is load-bearing here, not tidiness: a running animation with
   fill-mode forwards outranks a normal `opacity: 1` declaration in the cascade, so without
   cancelling it by name the motion-off path would still fade the faces in. */
.cx-page[data-motion="off"] .cx-grid .cx-tile__face { opacity: 1; animation: none !important; }
.cx-page[data-motion="off"] .cx-seg-add,
.cx-page[data-motion="off"] .cx-ring,
.cx-page[data-motion="off"] .cx-spine { animation: none !important; stroke-dashoffset: 0 !important; }
.cx-page[data-motion="off"] .cx-asset { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .cx-tile, .cx-tile__face, .cx-asset, .cx-comb i, .cx-board__cell, .cx-fan__row { transition: none !important; }
  .cx-grid .cx-tile { transform: rotateY(180deg); }
  .cx-grid .cx-tile__face { opacity: 1; animation: none !important; }
  .cx-seg-add, .cx-ring, .cx-spine { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ── phone ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .cx-h1 { font-size: clamp(32px, 8.2vw, 44px); max-width: 18ch; }
  .cx-hero__tension, .cx-hero__promise { font-size: var(--v4-fs-4); }
  .cx-cta .ros-btn { width: 100%; max-width: 100%; min-height: 48px; justify-content: center; }
  .cx-board__head, .cx-board__row { grid-template-columns: minmax(0, 1fr) 64px 64px; padding-inline: 14px; }
  .cx-report__row { grid-template-columns: 28px minmax(0, 1fr); padding: 18px 16px; }
  .cx-comb { height: 84px; }
  .cx-comb i:nth-child(n + 9) { display: none; }
  .cx-rung { font-size: 20px; padding: 18px 18px; }
  .cx-close__test { font-size: clamp(22px, 7.4vw, 30px); }
  .cx-switch { width: 100%; }
  .cx-switch button { flex: 1; }
}

/* ── the third geometry: a vertical ladder, and it is now SHARED ─────────
   An overflow-x container in RTL opens at the WRONG END, so a horizontally
   scrolling figure would show the buyer its last node first. Nothing here
   scrolls sideways; below 981px every .cx-fig is replaced by a .cx-stack
   carrying the same links, the same alphabet and the same halt.
   It was the chain's alone until 2026-09-20, when measurement showed the other
   two figures had NO phone geometry — they were simply scaled down until the
   Arabic reached 4px. Generalising the one ladder, rather than giving each
   figure its own, is what keeps a square a square and a circle a circle in all
   three places. */

.cx-stack { display: none; list-style: none; margin: 0 0 18px; padding: 0; }
@media (max-width: 980px) {
  .cx-stack { display: grid; gap: 0; }
  .cx-fig { display: none; }
}
.cx-stack li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center;
  min-height: 40px; padding: 10px 0; position: relative;
  font-size: var(--v4-fs-4); color: var(--v4-on-ink-mid);
}
.cx-stack li + li::before {
  content: ""; position: absolute; inset-inline-start: 16px; top: -10px; height: 20px;
  width: 1px; background: var(--v4-line);
}
.cx-stack .cx-rung__mark {
  width: 18px; height: 18px; justify-self: center;
  border: var(--cx-stroke) solid var(--cx-line-strong); border-radius: var(--cx-radius);
}
/* the circle, and it is the ONLY round mark: a person put their name on it */
.cx-stack li[data-human] .cx-rung__mark { border-radius: 50%; }
.cx-chain__stack li[data-passed] { color: var(--v4-on-ink); }
.cx-chain__stack li[data-passed] .cx-rung__mark { background: var(--v4-line); }
.cx-chain__stack li[data-here] { color: var(--v4-on-ink); font-weight: 700; }
.cx-chain[data-halt] .cx-chain__stack li[data-here] .cx-rung__mark { border-color: var(--v4-coral); border-width: var(--cx-stroke-edge); }
.cx-rung__why { grid-column: 2; font-size: var(--v4-fs-3); color: var(--v4-coral); margin-top: 4px; }
.cx-rung__why[hidden] { display: none; }

/* ── the states ladder's marks ──────────────────────────────────
   These are the drawing's alphabet, not decoration, so the phone DRAWS them
   rather than naming them: صادر carries the sage leading edge; مجدوَل is dashed
   because the time has not arrived; منشور is the filled block plus ONE halo,
   here an offset ring — the same lock the SVG draws, and still no channel
   glyph of any kind. صُحِّح is the resident correction badge: dotted, coral. */
.cx-states__stack li[data-mark="issued"] .cx-rung__mark,
.cx-states__stack li[data-mark="public"] .cx-rung__mark {
  background: var(--cx-face);
  border-inline-start-color: var(--cx-sage); border-inline-start-width: 3px;
}
.cx-states__stack li[data-mark="scheduled"] .cx-rung__mark { border-style: dashed; }
.cx-states__stack li[data-mark="public"] .cx-rung__mark { outline: 1px solid var(--cx-sage); outline-offset: 3px; }
.cx-states__stack li[data-mark="corrected"] { color: var(--v4-coral); }
.cx-states__stack li[data-mark="corrected"] .cx-rung__mark { border-color: var(--v4-coral); border-style: dotted; }
/* A legend, not a chain — the four states are not four steps. */
.cx-states__stack li + li::before { display: none; }

/* ── .cx-figalt ── what a hidden drawing was carrying alone ────────────────
   Not a caption and not a repeat: these lines exist in the SVG and NOWHERE
   else, so at the widths where the SVG is hidden they are the only carrier.
   Mirrors .cx-stack's breakpoint exactly — one width governs one swap. */
/* 🔴 MEASURED ON THE LIVE PAGE 2026-09-21, and it is the same mistake in two places.
   The SHARED styles.css hardcodes `.ros-eyebrow { color: var(--v4-on-ink-mid) }` — a
   DARK-BACKGROUND token — with no light-surface scope. Revenue OS never puts an eyebrow in a
   cream section (measured: 0 of them), so the bug sat latent in shared CSS for months. This page
   puts one in ALL FIVE cream sections, which is what exposed it: 2.28:1 against the cream, where
   12px text needs 4.5:1. The fix belongs HERE, not in styles.css, because that file is
   byte-identical across the three system pages by contract — editing it would restyle Revenue OS
   and Reputation to fix a page neither of them has.
   .cx-figalt__label and .cx-figalt__chain above were mine, and made the identical error. */
.ros-sec--cream .ros-eyebrow { color: var(--v4-on-light-mid); }

/* 🔴 And these had no colour rule AT ALL, so they fell to the user agent's #0000EE:
   measured 2.05:1 on ink. Two links live in FAQ answers today; the rule is written for prose
   containers generally so the next one does not repeat it. Coral is the house link colour —
   #ff5a45 on ink, and the small-text coral on cream, per the locked three-value coral system. */
.cx-faq__a a, .ros-body a, .ros-lede a { color: var(--v4-coral); text-decoration: underline; text-underline-offset: 3px; }
.ros-sec--cream .cx-faq__a a, .ros-sec--cream .ros-body a, .ros-sec--cream .ros-lede a { color: var(--v4-coral-light); }

.cx-figalt { display: none; }
@media (max-width: 980px) { .cx-figalt { display: block; } }
.cx-figalt__label { font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); margin: 0; }
.cx-figalt__chain { font-size: var(--v4-fs-4); color: var(--v4-on-light-mid); margin: 2px 0 0; }
.cx-figalt__arc { font-size: var(--v4-fs-4); color: var(--v4-on-light); margin: 0 0 4px; }

/* ── the alphabet follows the loop into the station list ────────────────
   Above 981px the drawing teaches it — four squares and one circle — and the
   list stays clean. Below, the drawing is gone, so the list carries the mark
   instead. The alphabet is never taught twice at the same width, and #gate
   then argues from it on every device rather than only on a desktop. */
.cx-station .cx-rung__mark {
  display: none; width: 18px; height: 18px;
  border: var(--cx-stroke) solid var(--cx-line-strong); border-radius: var(--cx-radius);
}
.cx-station[data-human] .cx-rung__mark { border-radius: 50%; }
@media (max-width: 980px) {
  .cx-station { grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; }
  .cx-station .cx-rung__mark { display: block; grid-column: 1; grid-row: 1; align-self: center; }
  .cx-station b, .cx-station span { grid-column: 2; }
}

/* ── §03 · the two rails ────────────────────────────────────────────────── */

.cx-rails { display: grid; gap: 18px; margin: 0; }
.cx-rail { display: grid; gap: 8px; }
.cx-rail__line { height: 1px; background: var(--v4-cream-line); position: relative; }
.cx-rail__dot {
  position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--v4-on-light);
}
.cx-rail--tool .cx-rail__line { width: 62%; margin-inline-start: auto; }
.cx-rail--sys .cx-rail__dot { background: #ad3b28; }
.cx-rail b { font-size: var(--v4-fs-3); font-weight: 700; }
.cx-rail span { font-size: var(--v4-fs-3); color: var(--v4-on-light-mid); }

/* ── §04 · the four signal examples ─────────────────────────────────────── */

.cx-signals { list-style: none; margin: var(--ros-stack) 0 0; padding: 0; display: grid; gap: 10px; }
.cx-signals li {
  padding-inline-start: 18px; position: relative;
  font-size: var(--v4-fs-4); line-height: 1.85; color: var(--v4-on-light-mid);
}
.cx-signals li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 13px;
  width: 8px; height: 1px; background: #ad3b28;
}

/* ── §09 · the stop reasons repeated as inert chips ─────────────────────── */

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

/* ── the founder strip reuses the shared .ros-who construction ──────────── */
.cx-page .ros-who__img { max-width: 200px; }
@media (max-width: 860px) {
  .cx-page .ros-who__in { grid-template-columns: minmax(0, 1fr); }
  .cx-page .ros-who__img { max-width: 200px; }
}

/* ── the breadcrumb ───────────────────────────────────────────────────────
   It renders inside .ros-eyebrow because this page does not load Revenue's
   experience.css, where .rc-breadcrumb lives. The label style carries, but a
   15px-tall link is not a tap target — measured at 375px, it was the only
   control on the page under 44px. */

.cx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.cx-crumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline-end: 4px; }
.cx-crumb a:hover { color: var(--v4-on-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ══ v0.2 · what the new eleven-section structure needs ═══════════════════ */

/* ── §07 · the risk classes as a REAL table ────────────────────────────────
   They were three cards with «قاعدة الاعتماد» printed above each one. Three
   printings of a column head is not a table, and a regulated buyer reads this
   block more carefully than anything else on the page. One header row, three
   data rows, and on a phone each row becomes its own block with the column
   names carried by ::before so nothing scrolls sideways. */

.cx-risk { width: 100%; border-collapse: collapse; margin: 0 0 var(--ros-stack); font-size: var(--v4-fs-3); }
.cx-risk caption { text-align: start; font-size: var(--v4-fs-3); color: var(--cx-label); padding-bottom: 12px; }
.cx-risk th, .cx-risk td {
  border: 1px solid var(--cx-line); padding: 14px 16px; text-align: start; vertical-align: top;
  line-height: 1.8;
}
.cx-risk thead th { background: var(--cx-face); font-weight: 700; font-size: var(--v4-fs-3); }
.cx-risk tbody th { font-weight: 800; font-size: var(--v4-fs-4); white-space: nowrap; }
.ros-sec--cream .cx-risk thead th { background: var(--v4-cream-soft); }
/* the terminus belongs to the rule, so it lives in the cell, not beside it */
.cx-risk td b { display: block; margin-top: 8px; font-size: var(--v4-fs-3); font-weight: 700; }
.cx-risk td b.is-open { color: var(--cx-label); font-weight: 500; }

@media (max-width: 760px) {
  .cx-risk, .cx-risk tbody, .cx-risk tr, .cx-risk td, .cx-risk th { display: block; width: auto; }
  .cx-risk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cx-risk tr { border: 1px solid var(--cx-line); border-radius: 12px; margin-bottom: 12px; }
  .cx-risk th, .cx-risk td { border: 0; padding: 12px 16px; }
  .cx-risk tbody th { padding-bottom: 4px; }
  .cx-risk td::before {
    content: attr(data-col); display: block; font-size: var(--v4-fs-2);
    color: var(--cx-label); margin-bottom: 4px;
  }
}

/* ── §05 · the loop's permanent visible label ──────────────────────────────
   The loop carries the page's heaviest compliance load, and its only
   qualifier used to live in alt text — which no sighted reader, screenshot or
   search snippet has ever seen. It shows with motion, without motion, and
   without JavaScript, and it is never hidden on a phone. */

.cx-loop__label {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0;
  font-size: var(--v4-fs-3); color: var(--cx-label);
  border: 1px dashed var(--cx-line); border-radius: 999px; padding: 6px 14px;
}

/* ── §08 · the board's argument, for a screen reader ───────────────────────
   Every cell is aria-hidden and empty, so the whole section reached nobody
   using assistive technology: the argument was carried by fill colour alone. */

.cx-board__live { margin: 12px 0 0; }