/* THESIS: make one commercial journey inspectable, from missed ownership to a sourced outcome.
   OWN-WORLD: incumbent ink/cream/coral, Inter/Tajawal, legible operational records and document folds.
   STORY: see the mechanism, inspect delivery, understand the commitment, take discovery.
   FIRST VIEWPORT: compact editorial offer above one full-width, three-state illustrative record.
   FORM: local extension, composition A's wide stage; fixed identity, no concept seed required.
   No autoplay. Semantic documents remain readable without JavaScript. */

.rx-hero { padding: 64px 0 0; overflow: visible; background: var(--v4-ink); }
.rx-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; margin-bottom: 52px; }
.rx-intro h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; margin: 18px 0 0; max-width: 15ch; text-wrap: balance; }
html[lang="ar"] .rx-intro h1 { letter-spacing: 0; line-height: 1.22; max-width: 16ch; }
.rx-intro__offer > p:first-child { font-size: 20px; line-height: 1.6; color: var(--v4-on-ink); margin: 0 0 22px; max-width: 44ch; }
.rx-intro .ros-btn { min-height: 54px; padding: 14px 22px; box-shadow: none; border-radius: 8px; }
.rx-call-note { font-size: 13px; line-height: 1.65; color: #adb6c5; max-width: 56ch; margin: 14px 0 0; }
.rx-demo { background: #151d2b; border-radius: 16px; padding: 0 30px; }
.rx-demo__bar, .rx-demo__foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 0; }
.rx-demo__bar { border-bottom: 1px solid #344050; }
.rx-demo__label { color: #bdc5d0; font-size: 13px; }
.rx-select { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #bdc5d0; }
.rx-select select { background: #151d2b; color: #fdf6f2; border: 1px solid #788596; border-radius: 6px; min-height: 44px; padding: 8px 34px 8px 12px; font: inherit; font-weight: 600; max-width: 100%; }
html[dir="rtl"] .rx-select select { padding: 8px 12px 8px 34px; }
.rx-select { visibility: hidden; }
.rx-ready .rx-select { visibility: visible; }
.rx-demo__body { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 44px; padding: 30px 0; align-items: stretch; }
.rx-demo__guide > p:first-child { font-size: 24px; font-weight: 600; margin: 4px 0 26px; }
.rx-states { display: none; }
.rx-ready .rx-states { display: grid; gap: 8px; }
.rx-states button { display: flex; width: 100%; align-items: center; text-align: start; gap: 16px; padding: 16px 12px; min-height: 76px; border: 0; border-radius: 8px; background: transparent; color: #bdc5d0; cursor: pointer; font: inherit; transition: background .2s ease-out, color .2s ease-out; }
.rx-states button:hover { background: #222d3c; color: #fff; }
.rx-states button[aria-pressed="true"] { background: #2a3545; color: #fff; }
.rx-state-n { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #788596; border-radius: 50%; font-size: 12px; }
.rx-states button[aria-pressed="true"] .rx-state-n { background: #f4ede1; color: #151d2b; border-color: #f4ede1; }
.rx-states strong { font-size: 17px; font-weight: 600; line-height: 1.25; display: block; }
.rx-states small { display: block; font-size: 12px; line-height: 1.5; margin-top: 5px; color: #bdc5d0; }
.rx-demo__hint { display: none; }
.rx-records { min-width: 0; display: grid; align-items: start; }
.rx-record { grid-area: auto; background: #f4ede1; color: #1a1a22; padding: 26px 34px 20px; border-radius: 4px; margin: 0 0 18px; position: relative; }
.rx-ready .rx-record { grid-area: 1/1; margin: 0; min-height: 344px; }
.rx-record[hidden] { display: none; }
.rx-ready .rx-record:not([hidden]) { animation: rx-record-arrive .28s cubic-bezier(.16,1,.3,1) both; }
.rx-record__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; }
.rx-status { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; border-radius: 4px; padding: 5px 9px; color: #345640; background: #dce8dc; }
.rx-status::before { content: '✓'; }
.rx-status--0 { background: #f3d7ce; color: #8c3220; }
.rx-status--0::before { content: '!'; font-weight: 800; }
.rx-status--1::before { content: '→'; }
.rx-record__journey { font-size: 13px; color: #5c5c66; margin: 28px 0 6px; }
.rx-record h2 { font-size: clamp(25px, 2.5vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
html[lang="ar"] .rx-record h2 { letter-spacing: 0; line-height: 1.35; }
.rx-facts { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; margin: 0; }
.rx-facts dt { font-size: 12px; color: #5c5c66; margin-bottom: 5px; }
.rx-facts dd { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 500; }
.rx-record__note { margin: 22px 0 0; font-size: 13px; line-height: 1.6; padding-top: 16px; border-top: 1px solid #d0c8bc; }
.rx-record__bottom { display: flex; gap: 16px; justify-content: space-between; margin-top: 20px; font-size: 11px; color: #5c5c66; }
.rx-demo__foot { border-top: 1px solid #344050; padding: 12px 0; color: #bdc5d0; font-size: 12px; }
.rx-demo .ros-motion { position: static; margin: 0; min-height: 44px; color: #fdf6f2; border-color: #788596; background: transparent; }
.rx-wayfinding { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0 28px; border-bottom: 1px solid #344050; }
.rx-wayfinding a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; color: #f4ede1; font-size: 14px; text-decoration: none; }
.rx-wayfinding a:hover, .rx-textlink:hover { text-decoration: underline; text-underline-offset: 5px; }
.rx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.rx-split .ros-h2 { max-width: 19ch; }
.rx-problem { padding-top: 96px; }
.rx-problem .ros-body + .ros-body { margin-top: 18px; }
.rx-case { padding-top: 8px; }
.rx-overline { display: flex; justify-content: space-between; gap: 18px; color: #bdc5d0; font-size: 12px; margin: 0 0 24px; }
.rx-overline b { color: #fdf6f2; }
.rx-case h3 { font-size: 25px; line-height: 1.3; margin: 0 0 24px; }
.rx-case__facts { margin: 0 0 22px; }
.rx-case__facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid #344050; }
.rx-case__facts dt { color: #adb6c5; font-size: 13px; }
.rx-case__facts dd { margin: 0; font-size: 16px; line-height: 1.5; }
.rx-textlink { display: inline-flex; gap: 30px; min-height: 44px; align-items: center; font-size: 14px; color: #f4ede1; text-decoration: none; }
.rx-muted { color: #adb6c5; font-size: 13px; line-height: 1.65; }
.rx-control .rx-split { margin-top: 28px; }
.rx-control .ros-btn { margin-top: 18px; }
.rx-exception { background: #151d2b; padding: 28px; border-radius: 12px; }
.rx-exception__bar { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: #ff937d; padding-bottom: 20px; border-bottom: 1px solid #344050; }
.rx-exception h3 { font-size: 27px; line-height: 1.3; margin: 26px 0 8px; }
.rx-exception > p[data-journey-name] { font-size: 13px; color: #bdc5d0; margin: 0 0 26px; }
.rx-exception .rx-facts dt { color: #adb6c5; }
.rx-rule { margin-top: 24px; border-top: 1px solid #344050; border-bottom: 1px solid #344050; }
.rx-rule summary { cursor: pointer; min-height: 48px; padding: 14px 0; font-size: 14px; }
.rx-rule p { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }
.rx-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin: 48px 0 40px; }
.rx-phase-label, .rx-step-label { display: block; color: #5c5c66; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.rx-engage h3 { font-size: 25px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }
.rx-engage p { font-size: 16px; line-height: 1.65; margin: 0; }
.rx-diagnostic { border-inline-start: 1px solid #d0c8bc; padding-inline-start: 38px; }
.rx-build-phase { background: #e6e2d8; border-radius: 12px; padding: 28px 34px 32px; }
.rx-phase-heading { display: flex; gap: 24px; align-items: baseline; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #b7b3a9; }
.rx-phase-heading strong { font-size: 34px; letter-spacing: -.025em; }
.rx-phase-heading span { font-size: 14px; color: #505058; }
.rx-build-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.rx-build-steps > div + div { border-inline-start: 1px solid #b7b3a9; padding-inline-start: 32px; }
.rx-engage p.rx-commitment { font-size: 13px; line-height: 1.65; margin-top: 20px; color: #505058; }
.rx-ongoing { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 32px 0; }
.rx-ongoing > div { display: grid; grid-template-columns: auto 1fr; gap: 26px; }
.rx-ongoing h3 { font-size: 20px; }
.rx-engage p.rx-phase-foot { border-top: 1px solid #d0c8bc; padding-top: 20px; font-size: 13px; color: #5c5c66; }
.rx-evidence { margin: 32px 0 0; padding: 28px; background: #e6e2d8; color: #1a1a22; border-radius: 8px; }
.rx-evidence__head { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.rx-evidence__head strong { font-size: 22px; }
.rx-evidence__head span { font-size: 12px; color: #505058; }
.rx-evidence > p { font-size: 14px; margin: 12px 0 24px; }
.rx-evidence__rows { margin: 0; }
.rx-evidence__rows > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; border-top: 1px solid #b7b3a9; padding: 18px 0; }
.rx-evidence__rows dt { color: #505058; font-size: 13px; }
.rx-evidence__rows dd { margin: 0; font-size: 15px; line-height: 1.6; }
.rx-evidence figcaption { font-size: 12px; line-height: 1.7; color: #505058; margin-top: 10px; }
.rx-documents { position: relative; background: #fbf6ee; padding: 26px 28px; color: #1a1a22; box-shadow: 0 14px 32px -24px rgba(30,25,15,.3); border-radius: 4px; }
.rx-documents::after { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 20px; height: 20px; background: linear-gradient(225deg, #f4ede1 49%, #d9d1c3 50%); border-end-start-radius: 3px; pointer-events: none; }
html[dir="rtl"] .rx-documents::after { transform: scaleX(-1); }
.rx-documents__head { display: flex; justify-content: space-between; gap: 18px; font-size: 12px; margin-bottom: 18px; }
.rx-documents__head b { color: #5c5c66; font-weight: 400; }
.rx-document-note { font-size: 13px; line-height: 1.65; color: #5c5c66; margin: 0 0 20px; }
.rx-document { border-top: 1px solid #d0c8bc; }
.rx-document summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; min-height: 56px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.rx-document summary::-webkit-details-marker { display: none; }
.rx-document summary > span { font-size: 22px; font-weight: 400; }
.rx-document[open] summary > span { transform: rotate(45deg); }
.rx-document__body { padding-bottom: 24px; }
.rx-document__body > p { font-size: 14px; font-weight: 500; margin: 0 0 14px; }
.rx-document__body .rx-facts { grid-template-columns: 1fr; gap: 16px; }
.rx-doc-path { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: path; }
.rx-doc-path li { position: relative; padding: 8px 0; min-height: 38px; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.rx-doc-path li::before { counter-increment: path; content: counter(path); display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid #9c9b93; border-radius: 50%; font-size: 11px; }
.rx-checklist { margin: 0; padding-inline-start: 18px; font-size: 14px; line-height: 1.7; }
.rx-checklist li + li { margin-top: 10px; }
.rx-hero :focus-visible, .rx-problem :focus-visible, .rx-control :focus-visible { outline: 2px solid #f4ede1; outline-offset: 4px; }
.rx-documents :focus-visible { outline: 2px solid #1a1a22; outline-offset: 4px; }
.rx-wayfinding a > span { font-size: 20px; }
html[dir="rtl"] .rx-wayfinding a > span { transform: scaleX(-1); }
@keyframes rx-record-arrive { from { opacity: .7; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
html[data-motion="off"] .rx-record { animation: none !important; }
@media(prefers-reduced-motion:reduce) { .rx-record { animation: none !important; } .rx-states button { transition: none; } }
@media(min-width:1440px) { .rx-intro { gap: 100px; } .rx-demo__body { grid-template-columns: 280px minmax(0,1fr); gap: 64px; } }
@media(min-width:1001px) and (max-height:820px) {
 .rx-hero { padding-top: 32px; }
 .rx-intro { margin-bottom: 28px; gap: 48px; }
 .rx-intro h1 { font-size: 50px; max-width: none; }
 .rx-intro__offer > p:first-child { font-size: 17px; line-height: 1.5; margin-bottom: 14px; }
 .rx-call-note { font-size: 12px; line-height: 1.5; margin-top: 10px; }
 .rx-demo__bar { padding: 12px 0; }
 .rx-demo__body { padding: 20px 0; }
 .rx-demo__guide > p:first-child { font-size: 20px; margin: 0 0 16px; }
 .rx-states button { min-height: 64px; padding: 12px; }
 .rx-states strong { font-size: 15px; }
 .rx-states small { font-size: 11px; }
 .rx-record { padding: 22px 28px 18px; }
 .rx-ready .rx-record { min-height: 308px; }
 .rx-record__journey { margin-top: 18px; }
 .rx-record h2 { font-size: 30px; margin-bottom: 16px; }
 .rx-record__note { margin-top: 18px; padding-top: 12px; }
}
@media(max-width:1000px) {
 .rx-intro { gap: 36px; grid-template-columns: 1fr 1fr; }
 .rx-intro h1 { font-size: 46px; }
 .rx-demo__body { grid-template-columns: 200px minmax(0,1fr); gap: 24px; }
 .rx-record { padding: 24px; }
 .rx-split { gap: 40px; }
 .rx-build-steps, .rx-entry, .rx-ongoing { gap: 32px; }
 .rx-ongoing > div { display: block; }
}
@media(max-width:760px) {
 .rx-hero { padding-top: 32px; }
 .rx-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
 .rx-intro h1 { font-size: clamp(38px,7vw,52px); max-width: 19ch; }
 .rx-intro h1 br { display: none; }
 .rx-intro__offer > p:first-child { font-size: 18px; margin-bottom: 20px; }
 .rx-call-note { font-size: 12px; max-width: 54ch; }
 .rx-demo { padding: 0 20px; }
 .rx-demo__bar { flex-wrap: wrap; gap: 14px; padding: 18px 0; }
 .rx-select { justify-content: space-between; width: 100%; }
 .rx-demo__body { grid-template-columns: 1fr; padding: 20px 0; gap: 18px; }
 .rx-demo__guide > p:first-child { font-size: 20px; margin: 0 0 16px; }
 .rx-ready .rx-states { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
 .rx-states button { display: grid; padding: 12px 7px; gap: 8px; min-height: 92px; align-content: start; }
 .rx-states strong { font-size: 13px; }
 .rx-states small, .rx-demo__hint { display: none; }
 .rx-state-n { width: 25px; height: 25px; font-size: 10px; }
 .rx-record { padding: 22px; }
 .rx-ready .rx-record { min-height: 346px; }
 .rx-record h2 { font-size: 28px; }
 .rx-record__journey { margin-top: 22px; }
 .rx-demo__foot { gap: 12px; }
 .rx-demo__foot > span { max-width: 23ch; line-height: 1.6; }
 .rx-wayfinding { flex-wrap: wrap; gap: 0 24px; padding: 16px 0; }
 .rx-wayfinding a { font-size: 12px; gap: 12px; }
 .rx-split { grid-template-columns: 1fr; gap: 36px; }
 .rx-problem { padding-top: 64px; }
 .rx-entry { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
 .rx-diagnostic { border-inline-start: 0; border-top: 1px solid #d0c8bc; padding: 24px 0 0; }
 .rx-phase-heading { display: block; }
 .rx-phase-heading strong { display: block; margin-bottom: 6px; }
 .rx-build-phase { padding: 24px; }
 .rx-build-steps { grid-template-columns: 1fr; gap: 28px; }
 .rx-build-steps > div + div { border-inline-start: 0; border-top: 1px solid #b7b3a9; padding: 24px 0 0; }
 .rx-ongoing { grid-template-columns: 1fr; gap: 24px; }
 .rx-ongoing > div { display: grid; grid-template-columns: 105px 1fr; gap: 16px; }
 .rx-engage h3 { font-size: 23px; }
 .rx-ongoing h3 { font-size: 18px; }
 .rx-evidence { padding: 22px; }
 .rx-evidence__head { flex-wrap: wrap; gap: 8px; }
 .rx-evidence__rows > div { grid-template-columns: 1fr; gap: 8px; }
 .rx-documents { padding: 22px; }
}
@media(max-width:380px) {
 .rx-intro h1 { font-size: 38px; }
 .rx-demo { padding: 0 14px; }
 .rx-record { padding: 18px; }
 .rx-record h2 { font-size: 25px; }
 .rx-facts { grid-template-columns: 1fr; gap: 14px; }
 .rx-ready .rx-record { min-height: 388px; }
 .rx-record__top { gap: 8px; font-size: 10px; }
 .rx-status { font-size: 10px; }
 .rx-case__facts > div { grid-template-columns: 1fr; gap: 8px; }
 .rx-states strong { font-size: 12px; }
 .rx-select { flex-wrap: wrap; gap: 6px; }
 .rx-select select { width: 100%; }
}
/* 2026-09-09: cinematic mechanism. Explicit requested SVG illustrations.
   Existing brand overrides skill defaults: Inter/Tajawal and ink/paper section rhythm.
   SVG stroke drawing is restricted to small illustrative paths; movement uses transforms.
   No scroll hijack. One narrated sequence, then rest; manual replay is available. */
.rx-hero { padding-top:42px; }
.rx-hero-grid { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:58px; }
.rx-hero-grid > .rx-intro { display:block; margin:0; }
.rx-intro h1 { font-size:clamp(44px,4.1vw,59px); line-height:1.06; max-width:18ch; margin:20px 0 26px; letter-spacing:-.045em; text-wrap:initial; }
.rx-intro h1 br { display:none; }
.rx-intro__offer > p:first-child { font-size:18px; line-height:1.65; max-width:39ch; margin-bottom:24px; }
.rx-call-note { font-size:12px; line-height:1.7; max-width:45ch; }
html[lang="ar"] .rx-intro h1 { font-size:clamp(42px,4.5vw,64px); line-height:1.24; max-width:13ch; }
.rx-hero-grid .rx-demo { background:linear-gradient(155deg,#1b293c,#121c2b 68%); border:1px solid #3b4a5d; padding:0 22px; border-radius:18px; box-shadow:0 28px 65px -35px #050913; min-width:0; }
.rx-demo__bar { padding:12px 0; gap:12px; }
.rx-demo__label { font-size:11px; max-width:19ch; line-height:1.5; }
.rx-select { gap:8px; }
.rx-select > span { display:none; }
.rx-select select { font-size:12px; background:#192639; }
.rx-circuit { display:block; width:100%; height:auto; overflow:visible; margin:12px 0 8px; }
.rx-circuit text, .rx-bridge text { font-family:inherit; }
.rx-wire { fill:none; stroke-width:2; }
.rx-wire--base { stroke:#536477; stroke-dasharray:4 7; opacity:.55; }
.rx-wire--in { stroke:#ff927a; }
.rx-wire--out { stroke:#c4ddc7; }
.rx-core { transform-origin:340px 160px; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.rx-demo[data-state="0"] .rx-core { transform:translateY(-8px); }
.rx-demo[data-state="0"] .rx-wire--in { stroke-dasharray:7 12; opacity:.5; }
.rx-demo[data-state="0"] .rx-wire--out, .rx-demo[data-state="0"] .rx-core-check { opacity:0; }
.rx-demo[data-state="0"] .rx-outcome-node { opacity:.35; }
.rx-demo[data-state="1"] .rx-outcome-node { opacity:.65; }
.rx-demo[data-state="1"] .rx-core-break, .rx-demo[data-state="2"] .rx-core-break { opacity:0; }
.rx-demo[data-state="1"] .rx-wire--out { opacity:.45; stroke-dasharray:4 7; }
.rx-demo[data-state="2"] .rx-wire--in { stroke:#c4ddc7; }
.rx-scene-label { opacity:0; }
.rx-demo[data-state="0"] .rx-scene-label--0, .rx-demo[data-state="1"] .rx-scene-label--1, .rx-demo[data-state="2"] .rx-scene-label--2 { opacity:1; }
.rx-packet { opacity:0; }
.rx-ready .rx-hero-grid .rx-states { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; border-block:1px solid #3b4a5d; padding:8px 0; }
.rx-hero-grid .rx-states button { display:flex; align-items:center; min-height:46px; gap:8px; padding:10px 8px; border-radius:5px; }
.rx-hero-grid .rx-states small { display:none; }
.rx-hero-grid .rx-states strong { font-size:13px; font-weight:500; }
.rx-hero-grid .rx-state-n { width:22px; height:22px; flex-basis:22px; font-size:9px; }
.rx-hero-grid .rx-states button[aria-pressed="true"] { background:#c4ddc7; color:#172c26; }
.rx-hero-grid .rx-states button[aria-pressed="true"] .rx-state-n { background:transparent; border-color:#536e62; color:inherit; }
.rx-hero-grid .rx-records { padding:17px 0 9px; }
.rx-ready .rx-hero-grid .rx-record, .rx-hero-grid .rx-record { padding:0; background:transparent; color:#f4ede1; border-radius:0; min-height:146px; }
.rx-hero-grid .rx-record__top { font-size:10px; color:#b6c3d2; }
.rx-hero-grid .rx-status { background:transparent; padding:0; font-size:11px; color:#c4ddc7; }
.rx-hero-grid .rx-status--0 { color:#ffad99; }
.rx-hero-grid .rx-record h2 { font-size:22px; font-weight:500; margin:12px 0; line-height:1.22; text-wrap:initial; }
.rx-hero-grid .rx-facts { grid-template-columns:.8fr 1.2fr; gap:18px; }
.rx-hero-grid .rx-facts dt { color:#aebed1; font-size:10px; margin-bottom:3px; }
.rx-hero-grid .rx-facts dd { font-size:12px; line-height:1.5; font-weight:400; }
.rx-record-detail { margin-top:9px; font-size:11px; color:#bbc9d8; }
.rx-record-detail summary { min-height:30px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.rx-record-detail summary::after { content:'+'; }
.rx-record-detail[open] summary::after { content:'−'; }
.rx-record-detail p { font-size:12px; line-height:1.6; margin:5px 0 12px; }
.rx-demo__foot { padding:5px 0; }
.rx-replay { font:inherit; font-size:12px; border:0; color:#f4ede1; background:transparent; min-height:44px; cursor:pointer; padding:4px 0; }
.rx-replay::before { content:'↻'; display:inline-block; margin-inline-end:8px; font-size:20px; vertical-align:middle; }
.rx-replay:hover::before { transform:rotate(-35deg); }
.rx-demo .ros-motion { border:0; font-size:11px; padding-inline:0; color:#bbc9d8; }
.rx-replay { display:none; }
.rx-ready .rx-replay { display:block; }
.rx-wayfinding { margin-top:38px; }
.rx-bridge { margin:34px 0 0; padding:14px 28px; border:1px solid #35475a; border-radius:14px; background:#152131; }
.rx-bridge svg { display:block; width:100%; height:auto; }
.rx-bridge-trace { stroke-dasharray:600; stroke-dashoffset:0; }
.rx-build-phase { position:relative; overflow:hidden; }
.rx-build-phase::before { content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:#607d68; transform-origin:top; }
.rx-exception { border:1px solid #4b5c71; box-shadow:0 16px 40px -28px #02040a; }
.rx-documents { transform-origin:50% 0; }
.rx-document[open] .rx-document__body { animation:rx-document-open .35s ease-out both; }
.rx-wayfinding a span { transition:transform .25s ease; }
.rx-wayfinding a:hover span { transform:translate(3px,3px); }
@media (prefers-reduced-motion:no-preference) {
 html:not([data-motion="off"]) .rx-hero-grid .rx-intro > div { animation:rx-lift .7s cubic-bezier(.16,1,.3,1) both; }
 html:not([data-motion="off"]) .rx-hero-grid .rx-intro > div + div { animation-delay:.12s; }
 html:not([data-motion="off"]) .rx-demo { animation:rx-lift .9s .1s cubic-bezier(.16,1,.3,1) both; }
 html:not([data-motion="off"]) .rx-demo[data-flow] .rx-core { animation:rx-core-breathe 2.5s ease-in-out infinite; }
 html:not([data-motion="off"]) .rx-demo[data-flow] .rx-packet--in { animation:rx-signal 2.4s ease-in-out infinite; }
 html:not([data-motion="off"]) .rx-demo[data-flow][data-state="2"] .rx-packet--out { animation:rx-result 2.4s ease-in-out infinite; }
 html:not([data-motion="off"]) [data-rx-visible] .rx-bridge-trace { animation:rx-draw 1.7s cubic-bezier(.2,.65,.3,1) both; }
 html:not([data-motion="off"]) [data-rx-visible].rx-build-phase::before { animation:rx-build-line 1.2s ease-out both; }
 html:not([data-motion="off"]) [data-rx-visible].rx-exception, html:not([data-motion="off"]) [data-rx-visible].rx-documents { animation:rx-lift .7s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes rx-lift { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes rx-core-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes rx-signal { 0% { opacity:0; transform:translate(110px,106px); } 12% { opacity:1; } 55% { transform:translate(194px,133px); } 85% { opacity:1; } 100% { opacity:0; transform:translate(260px,165px); } }
@keyframes rx-result { 0% { opacity:0; transform:translate(421px,165px); } 12% { opacity:1; } 55% { transform:translate(490px,132px); } 85% { opacity:1; } 100% { opacity:0; transform:translate(569px,104px); } }
@keyframes rx-draw { from { stroke-dashoffset:600; } to { stroke-dashoffset:0; } }
@keyframes rx-build-line { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes rx-document-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1001px) and (max-height:820px) {
 .rx-hero { padding-top:28px; }
 .rx-hero-grid { gap:44px; }
 .rx-circuit { max-height:245px; margin-block:4px; }
 .rx-intro h1 { font-size:58px; }
 html[lang="ar"] .rx-intro h1 { font-size:55px; }
 .rx-wayfinding { margin-top:24px; padding-block:14px; }
}
@media (max-width:1000px) {
 .rx-hero-grid { grid-template-columns:1fr; gap:30px; }
 .rx-intro h1 { max-width:18ch; font-size:clamp(40px,6.5vw,62px); }
 .rx-intro__offer > p:first-child { max-width:54ch; }
 .rx-call-note { max-width:58ch; }
 .rx-hero-grid .rx-demo { max-width:720px; width:100%; justify-self:center; }
 html[lang="ar"] .rx-intro h1 { max-width:18ch; }
}
@media (max-width:600px) {
 .rx-hero { padding-top:30px; }
 .rx-hero-grid { gap:28px; }
 .rx-intro h1 { font-size:44px; margin:16px 0 22px; max-width:13ch; }
 html[lang="ar"] .rx-intro h1 { font-size:42px; max-width:14ch; }
 .rx-intro__offer > p:first-child { font-size:17px; }
 .rx-hero-grid .rx-demo { padding:0 14px; border-radius:12px; }
 .rx-circuit { margin:16px 0; }
 .rx-circuit-labels { font-size:20px; }
 .rx-scene-label { font-size:23px; }
 .rx-hero-grid .rx-states button { padding:8px 4px; gap:5px; }
 .rx-hero-grid .rx-states strong { font-size:11px; }
 .rx-hero-grid .rx-state-n { width:19px; height:19px; flex-basis:19px; font-size:8px; }
 .rx-ready .rx-hero-grid .rx-record { min-height:160px; }
 .rx-hero-grid .rx-record h2 { font-size:21px; }
 .rx-hero-grid .rx-facts dd { font-size:12px; }
 .rx-record-detail summary { min-height:44px; }
 .rx-bridge { padding:16px 10px; overflow-x:auto; }
 .rx-bridge svg { min-width:540px; }
 .rx-wayfinding { margin-top:16px; }
}
@media (prefers-reduced-motion:reduce) {
 .rx-demo *, .rx-demo, .rx-intro *, [data-rx-visible], .rx-document__body, .rx-bridge-trace, .rx-build-phase::before { animation:none !important; transition:none !important; }
}
html[data-motion="off"] .rx-demo *, html[data-motion="off"] .rx-demo, html[data-motion="off"] .rx-intro *, html[data-motion="off"] [data-rx-visible], html[data-motion="off"] .rx-document__body, html[data-motion="off"] .rx-bridge-trace, html[data-motion="off"] .rx-build-phase::before { animation:none !important; transition:none !important; }



.rx-bridge-mobile { display:none !important; }
.rx-kit { display:block; width:100%; height:150px; margin-bottom:22px; }
@media(max-width:600px) {
 .rx-bridge { overflow:visible; padding:22px 16px; }
 .rx-bridge .rx-bridge-desktop { display:none; }
 .rx-bridge .rx-bridge-mobile { display:block !important; width:100%; min-width:0; }
 .rx-kit { height:120px; }
}
@media(prefers-reduced-motion:no-preference) {
 html:not([data-motion="off"]) [data-rx-visible] .rx-kit-sheet--front { animation:rx-kit-lift .9s ease-out both; }
}
@keyframes rx-kit-lift { from { opacity:0; translate:0 20px; } to { opacity:1; translate:0 0; } }
@media(max-width:600px) { .rx-hero-grid .rx-demo__bar { flex-direction:row; align-items:center; gap:8px; } .rx-demo__label { max-width:15ch; font-size:10px; } .rx-select select { max-width:150px; font-size:11px; } }
@media(max-width:600px) { .rx-hero-grid .rx-demo__bar { flex-wrap:nowrap; } .rx-hero-grid .rx-select { width:auto; max-width:55%; flex:none; } .rx-hero-grid .rx-demo__label { flex:1; } }

/* Buyer clarity revision: same brand, quieter pacing and legible choices. */
.rc-actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-block:24px 16px; }
.rc-actions .ros-btn { min-height:48px; text-align:center; }
.rx-intro .rc-actions .ros-btn--ghost { padding-inline:0; background:transparent; border-color:transparent; color:#f4ede1; text-decoration:underline; text-underline-offset:5px; }
.rx-intro h1 { font-size:clamp(40px,4.3vw,62px); line-height:1.12; max-width:18ch; }
html[lang="ar"] .rx-intro h1 { font-size:clamp(40px,4.2vw,60px); line-height:1.3; max-width:19ch; }
.rx-intro__offer > p:first-child { font-size:19px; line-height:1.65; max-width:44ch; }
.rx-call-note { font-size:13px; line-height:1.65; color:#b8c0cd; max-width:52ch; }
.rc-answer { max-width:900px; }
.rc-recognition { margin:32px 0; padding:24px 28px; border-inline-start:2px solid #d67c67; background:#141b29; }
.rc-recognition h3 { color:#f4ede1; font-size:20px; margin:0 0 16px; }
.rc-recognition ul { display:grid; gap:12px; padding-inline-start:20px; color:#c8d0da; font-size:16px; line-height:1.65; }
.rc-boundary { margin-top:12px; }
.rc-boundary summary { min-height:56px; }
.rc-boundary .ros-more__body { max-width:85ch; }
/* This block sits in a CREAM section (#engage): ink-section colours made it invisible (1.04:1) until 2026-09-17. */
.rc-orientation { padding:20px 0; border-bottom:1px solid #dccfbb; margin-bottom:24px; }
.rc-orientation h3 { color:var(--v4-on-light); font-size:20px; margin:0 0 8px; }
.rc-orientation p { color:var(--v4-on-light-mid); line-height:1.65; max-width:72ch; margin:0; }
#handover .ros-h2 { max-width:18ch; }
#handover .ros-body { margin-top:24px; }
.ros-faq__body { padding:0 24px 24px; }
.ros-faq__body p { max-width:80ch; line-height:1.75; color:#c0c9d6; }
/* A journey's meaning must remain legible at narrow widths. */
.ros-sec, .ros-shell, .rx-intro, .rx-intro__offer { min-width:0; }
.ros-rail { max-width:100%; }
@media(min-width:1001px) { .rx-hero-grid { grid-template-columns:1fr 1.03fr; gap:48px; } }
@media(max-width:600px) {
 .rx-intro h1 { font-size:clamp(34px,8.5vw,45px); max-width:18ch; }
 html[lang="ar"] .rx-intro h1 { font-size:clamp(32px,8.2vw,44px); max-width:18ch; }
 .rx-intro__offer > p:first-child { font-size:17px; }
 .rc-actions { margin-top:18px; }
 .rc-actions .ros-btn { max-width:100%; font-size:14px; }
 .rc-recognition { padding:20px; }
 .ros-faq__body { padding-inline:12px; }
}

.rc-breadcrumb { display:flex; align-items:center; gap:12px; font-size:13px; color:#aeb9c9; }
.rc-breadcrumb a { color:#aeb9c9; min-height:44px; display:inline-flex; align-items:center; text-underline-offset:4px; }
.rc-breadcrumb span[aria-current] { color:#f4ede1; }
.rx-intro h1 br { display:inline; }
.ros-fit { min-width:0; }
.ros-fitgrid { grid-template-columns:minmax(0,1fr); }
@media(max-width:600px) { .ros-fit__list { grid-template-columns:minmax(0,1fr); } .rx-hero-grid .rx-states strong { font-size:13px; } }

@media(min-width:1001px) { html[lang="en"] .rx-intro h1 { font-size:clamp(36px,3.75vw,48px); } }