/* MANAGEMENT M01 — shared editorial finish (management DUPLICATE only; loaded last on every root page)
 *
 * Scope: every rule sits under :where(body:not([data-page="home"])), so the approved B homepage keeps
 * every pixel, and each selector keeps the specificity of the rule it refines (no !important).
 * Existing tokens only: Readex Pro / IBM Plex Sans Arabic, navy · ivory · cobalt. No new fonts, colours,
 * icons, gradients-as-decoration or motion. Not touched: header, footer, pricing hero (.pr-hero),
 * global .hero, chapter/booking sticky rails, status and warning colours, the approved wordmark.
 */

/* ===================== 1 · SUB-PAGE HERO ===================== */
/* Calmer height, deep-navy fall from a slightly lit top edge, no dotted scatter. */
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) {
  padding-block: clamp(2rem, 1.3rem + 2.8vw, 4rem) clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  border-top: 1px solid rgb(82 148 255 / .22);
}
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero)::after { content: none; }
/* Directional cobalt hairline, aligned to the content edge rather than the viewport */
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero)::before {
  content: ""; position: absolute; top: -1px; height: 2px; width: clamp(3.5rem, 8vw, 7rem);
  inset-inline-start: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background: var(--blue-500); pointer-events: none;
}
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.75rem clamp(2rem, 4vw, 4rem); align-items: center;
}
/* Editorial edge: one thin vertical rule carries the text column */
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid > div:first-child {
  border-inline-start: 1px solid var(--line-2);
  padding-inline-start: clamp(.9rem, .5rem + 1.6vw, 1.75rem);
}
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) h1 {
  font-size: clamp(1.7rem, 1.2rem + 1.65vw, 2.6rem); line-height: 1.4;
  margin-top: .7rem; max-width: 24ch; text-wrap: balance;
}
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__lead {
  font-size: clamp(1rem, .96rem + .22vw, 1.14rem); line-height: 1.85;
  margin-top: .9rem; max-width: 50ch; text-wrap: pretty;
}
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__ctas { margin-top: 1.4rem; gap: .65rem; }
:where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .byline { margin-top: .8rem; }

/* Product screen: flat, light, thin shadow. No tinted slab behind it. */
:where(body:not([data-page="home"])) .page-hero__visual > div::before { content: none; }
:where(body:not([data-page="home"])) .page-hero__visual .win {
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px rgb(16 34 80 / .08), 0 22px 44px -30px rgb(0 0 0 / .75);
}
:where(body:not([data-page="home"])) .page-hero__visual figcaption {
  color: var(--text-2); font-size: .84rem; line-height: 1.75; max-width: 50ch;
  padding-top: .6rem; border-top: 1px solid var(--line-2);
}

/* Hero without an illustration (resources, solutions): headline and lead share the width as a
   reading spread instead of leaving the far half empty. DOM order is unchanged. */
@media (min-width: 1000px) {
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid:not(:has(.page-hero__visual)) { grid-template-columns: minmax(0, 1fr); }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid:not(:has(.page-hero__visual)) > div {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: end;
    border-inline-start: 0; padding-inline-start: 0;
  }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid:not(:has(.page-hero__visual)) > div > * { grid-column: 1; }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid:not(:has(.page-hero__visual)) .page-hero__lead {
    grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0;
    padding-inline-start: clamp(1.25rem, 2vw, 2rem); border-inline-start: 1px solid var(--line-2);
  }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid:not(:has(.page-hero__visual)) .page-hero__ctas {
    grid-column: 2; grid-row: 4; padding-inline-start: clamp(1.25rem, 2vw, 2rem);
  }
}

/* Support / demo heroes keep their own layout; only the heading scale and measure are aligned. */
:where(body:not([data-page="home"])) .cv-hero h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.4; }
:where(body:not([data-page="home"])) .cv-hero__lead { max-width: 50ch; line-height: 1.85; }

/* ===================== 2 · SECTION RHYTHM ===================== */
/* About 14% less vertical padding; the tight variant is restated so it keeps winning. */
:where(body:not([data-page="home"])) .block { padding-block: clamp(3rem, 2.2rem + 3.4vw, 5.5rem); }
:where(body:not([data-page="home"])) .block--tight { padding-block: clamp(2.15rem, 1.8rem + 1.7vw, 3.4rem); }
:where(body:not([data-page="home"])) .tone-mist { background: var(--bg-1); }

/* Section heads: a full hairline with a short cobalt lead-in, smaller and steadier headings */
:where(body:not([data-page="home"])) .block__head {
  position: relative; gap: .75rem; padding-top: 1.1rem; border-top: 1px solid var(--line-2);
  margin-bottom: clamp(1.6rem, 1.3rem + 1.6vw, 2.75rem);
}
:where(body:not([data-page="home"])) .block__head::before {
  content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 2.75rem; height: 2px;
  background: var(--blue-400); pointer-events: none;
}
:where(body:not([data-page="home"])) .block__head h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); line-height: 1.45; text-wrap: balance; }
:where(body:not([data-page="home"])) .block__head p {
  font-size: clamp(1rem, .97rem + .2vw, 1.12rem); line-height: 1.85; max-width: 50ch; text-wrap: pretty;
}

/* ===================== 3 · DEPTH VARIETY ===================== */
/* Scenarios on dark bands: one flat panel, smaller radius, no gradient glow */
:where(body:not([data-page="home"])) .cases { gap: 1rem; }
:where(body:not([data-page="home"])) .case {
  background: rgb(255 255 255 / .022); border-radius: var(--r-md);
  gap: 1rem 2.25rem; padding: clamp(1.1rem, 2.6vw, 1.75rem);
}
/* Scenarios on light bands: ruled editorial rows, not cards */
:where(body:not([data-page="home"])) :is(.tone-paper, .block--paper, .tone-mist) .case {
  background: none; border: 0; border-top: 1px solid var(--line-3); border-radius: 0;
  padding: 1.4rem 0 .4rem;
}
:where(body:not([data-page="home"])) .case__head::before { font-variant-numeric: tabular-nums; letter-spacing: 0; }
:where(body:not([data-page="home"])) .case__head h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.5; }
:where(body:not([data-page="home"])) .case__head p { line-height: 1.85; max-width: 50ch; }

/* Actor / trigger / system / outcome: hairline definition rows instead of four small boxes */
:where(body:not([data-page="home"])) .atso { gap: 0 1.5rem; }
:where(body:not([data-page="home"])) .atso div {
  background: none; border: 0; border-top: 1px solid var(--line-1); border-radius: 0; padding: .7rem 0 .55rem;
}
/* Outcome keeps its existing status colour, only the radius is calmer */
:where(body:not([data-page="home"])) .atso .is-outcome {
  margin-top: .5rem; padding: .7rem .9rem; border: 1px solid rgb(63 214 156 / .25);
  background: var(--ok-tint); border-radius: var(--r-sm);
}
:where(body:not([data-page="home"])) :is(.tone-paper, .block--paper, .tone-mist) .atso .is-outcome { border-color: rgb(11 132 87 / .28); }

/* Feature lists are already ruled: tighten and keep a readable measure */
:where(body:not([data-page="home"])) .feature { padding: 1.2rem 0 1.3rem; }
:where(body:not([data-page="home"])) .feature h3 { font-size: 1.14rem; line-height: 1.5; }
:where(body:not([data-page="home"])) .feature p { line-height: 1.85; max-width: 50ch; }

/* Closing band: same surfaces, no radial glow, calmer radius */
:where(body:not([data-page="home"])) .cta-band {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border-radius: var(--r-lg);
}
:where(body:not([data-page="home"])) .prose-block { line-height: 1.85; }

/* ===================== 4 · ACCESSIBILITY ===================== */
/* Focus rings come from base.css (:focus-visible outline, re-tinted per tone); nothing here hides them.
   This layer adds no motion; the guard keeps it that way if components animate elsewhere. */
@media (prefers-reduced-motion: reduce) {
  :where(body:not([data-page="home"])) :is(.page-hero, .case, .feature, .cta-band) { transition: none; animation: none; }
}

/* ===================== 5 · TABLET / MOBILE ===================== */
@media (max-width: 900px) {
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  :where(body:not([data-page="home"])) .page-hero__visual { margin-top: .25rem; }
}
@media (max-width: 600px) {
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) { padding-block: 1.5rem 1.85rem; }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__lead { line-height: 1.8; }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__ctas { margin-top: 1.1rem; }
  :where(body:not([data-page="home"])) .page-hero:not(.pr-hero) .page-hero__ctas .btn { flex: 1 1 14rem; }
}

/* ===================== 6 · PRICING HERO (M03) ===================== */
/* Same navy fall, cobalt lead-in and heading scale as the other sub-page heroes. The free-tier offer
   keeps its content, ivory card, 0 SAR mark and disclaimer; only its shadow and radius are calmer. */
body[data-page="pricing"] .pr-hero {
  padding-block: clamp(2rem, 1.3rem + 2.8vw, 4rem) clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  border-top: 1px solid rgb(82 148 255 / .22);
}
body[data-page="pricing"] .pr-hero::after { content: none; }
body[data-page="pricing"] .pr-hero::before {
  content: ""; position: absolute; top: -1px; height: 2px; width: clamp(3.5rem, 8vw, 7rem);
  inset-inline-start: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background: var(--blue-500); pointer-events: none;
}
body[data-page="pricing"] .pr-hero .page-hero__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.75rem clamp(2rem, 4vw, 4rem); align-items: center;
}
body[data-page="pricing"] .pr-hero h1 {
  font-size: clamp(1.8rem, 1.25rem + 1.7vw, 2.65rem); line-height: 1.4;
  margin-top: .7rem; max-width: 24ch; text-wrap: balance; overflow-wrap: break-word;
}
body[data-page="pricing"] .pr-hero .page-hero__lead {
  font-size: clamp(1rem, .96rem + .22vw, 1.14rem); line-height: 1.8;
  margin-top: .9rem; max-width: 50ch; text-wrap: pretty;
}
body[data-page="pricing"] .pr-hero .page-hero__ctas { margin-top: 1.4rem; gap: .65rem; }
body[data-page="pricing"] .pr-hero .pr-trust { margin-top: 1.1rem; }
body[data-page="pricing"] .pr-offer {
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgb(140 184 255 / .5), 0 22px 44px -30px rgb(0 0 0 / .75);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="pricing"] :is(.pr-hero, .pr-offer) { transition: none; animation: none; }
}
@media (max-width: 900px) {
  body[data-page="pricing"] .pr-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 600px) {
  body[data-page="pricing"] .pr-hero { padding-block: 1.5rem 1.85rem; }
  body[data-page="pricing"] .pr-hero .page-hero__ctas { margin-top: 1.1rem; }
  body[data-page="pricing"] .pr-hero .page-hero__ctas .btn { flex: 1 1 14rem; min-height: 44px; }
  body[data-page="pricing"] .pr-offer { border-radius: var(--r-md); }
}

/* M05 home: design-law restraint — calmer backdrop, same stage, story and motion */
body[data-page="home"] .hero__grid { background-image: none; }
body[data-page="home"] .hero__key { background: radial-gradient(closest-side, rgb(52 108 255 / .2), rgb(40 90 230 / .07) 48%, transparent 78%); }
body[data-page="home"] .hero__key::after { content: none; }
body[data-page="home"] .hero__horizon {
  background: radial-gradient(ellipse 46% 26% at 50% 0%, rgb(70 130 255 / .16), transparent 72%), #030611;
  box-shadow: 0 -1px 0 rgb(170 200 255 / .24), 0 -40px 110px -50px rgb(60 120 255 / .3);
}
body[data-page="home"] .chain::after { box-shadow: none; }
body[data-page="home"] .journey__stage::before { content: none; }
body[data-page="home"] .journey__stage { background: linear-gradient(180deg, var(--surface-1), var(--bg-2)); }

/* ===================== M07 · NAVIGATION COLOUR LAW (management edition) ===================== */
/* Colour presentation only for the shared light header, the three mega panels (product, solutions,
   resources/knowledge) and the ≤1080px drawer. Every selector sits under .site-header.is-light (always set
   by chrome.js), so it outranks the w14/w15/w16 hardcodes without !important. Literal hex from the approved
   palette only (inside .site-header.is-light the editorial tokens remap, so dark-story colours are literal).
   Unchanged: display, position, grids, spacing, motion, focus outlines, messages, green outcome marks. */

/* -- Header: cool white instead of warm cream -- */
.site-header.is-light, .site-header.is-light.is-scrolled { background: rgb(255 255 255 / .95); }
.site-header.is-light.has-mega, .site-header.is-light.has-drawer { background: #fff; }
.site-header.is-light .mega__top { color: #36435f; }
.site-header.is-light .mega__top:hover { color: #0a1430; }
.site-header.is-light .lang { color: #5b6787; }
.site-header.is-light .icon-btn { color: #0a1430; }

/* -- Panel ink: three approved light-tone text steps -- */
.site-header.is-light :is(.mega__lead, .mega__coltitle, .mega__foot, .mega__note, .mega__price span:not(.mega__price-go)) { color: #36435f; }
.site-header.is-light :is(.mega__pain small, .mega__ghead small, .mega__role span, .mega__sector-mods, .kn-search small) { color: #5b6787; }
.site-header.is-light .mega__panel .mega__link span { color: #5b6787; }

/* -- Quiet surfaces: one pale-blue tint for hover/selected, one cool grey for footer strips -- */
.site-header.is-light :is(.mega__foot, .mega__price, .mega__note) { background: #f6f7fa; }
.site-header.is-light .mega__count { background: #f2f5fb; }
.site-header.is-light :is(.mega__pain:hover, .mega__role:hover, .mega__guide:hover) { background: #f2f5fb; }
.site-header.is-light .mega__panel .mega__link:hover { background: #f2f5fb; }
.site-header.is-light .mega__pain[aria-selected="true"] { background: #f2f5fb; border-color: rgb(31 99 232 / .35); }
.site-header.is-light :is(.mega__tile:hover, .mega__tile.is-lit, .mega__tile:focus-within) { background: #fff; }

/* -- Icons: one chip style (pale tint, cobalt glyph); hover/selected keep the solid cobalt state -- */
.site-header.is-light :is(.mega__picon, .mega__gicon) { background: #f2f5fb; color: #1f63e8; }
.site-header.is-light .mega__pain[aria-selected="true"] .mega__picon,
.site-header.is-light :is(.mega__tile:hover, .mega__tile.is-lit, .mega__sector:hover) .mega__gicon { background: #1f63e8; color: #fff; }
.site-header.is-light .mega__mods li + li::before { color: #8cb8ff; }

/* -- Availability caveats: same words, cobalt-on-pale instead of amber -- */
.site-header.is-light .mega__flag { border-color: #8cb8ff; background: #f2f5fb; color: #1747b8; }
.site-header.is-light .kn-note { background: #f2f5fb; color: #1747b8; }

/* -- Links and CTAs: navy footer CTA, cobalt story CTA, approved accessible link blues -- */
.site-header.is-light .mega__cta { background: #0c1530; }
.site-header.is-light .mega__cta:hover { background: #1747b8; }
.site-header.is-light .kn-start { background: #1f63e8; }
.site-header.is-light .kn-start:hover { background: #1747b8; }
.site-header.is-light .kn-preview:focus-visible { outline-color: #1a56d1; }

/* -- Product story: flat navy #0C1530, dark-tone text, blue accents -- */
.site-header.is-light .mega__story { background: #0c1530; color: #eef2fb; }
.site-header.is-light .mega__story-k { color: #8cb8ff; }
.site-header.is-light .mega__flow::before { background: linear-gradient(180deg, #5294ff, rgb(82 148 255 / .25)); }
.site-header.is-light .mega__node { background: #0a1122; border-color: #5294ff; color: #8cb8ff; }
.site-header.is-light .mega__flow li.is-lit .mega__node { background: #2f7bff; color: #fff; }
.site-header.is-light .mega__step small { color: #b0bcd9; }
.site-header.is-light .mega__step em { color: #8cb8ff; font-weight: 600; }
.site-header.is-light .mega__story-p { color: #b0bcd9; }
.site-header.is-light .mega__story-limit {
  background: rgb(82 148 255 / .12); border-inline-start-color: #5294ff; color: #eef2fb;
}
.site-header.is-light .mega__story .link-arrow:hover { color: #8cb8ff; }
.site-header.is-light .mega__story .mega__story-go { background: #1f63e8; }
.site-header.is-light .mega__story .mega__story-go:hover { background: #2f7bff; color: #fff; }
.site-header.is-light :is(.mega__story :focus-visible, .mega__story:focus-visible) { outline-color: #8cb8ff; }

/* -- Solutions journey card: the same navy story surface -- */
.site-header.is-light .mega__journey { background: #0c1530; color: #eef2fb; }
.site-header.is-light .mega__journey small { color: #8cb8ff; }
.site-header.is-light .mega__journey-p { color: #b0bcd9; }
.site-header.is-light .mega__journey:hover .mega__journey-go { color: #8cb8ff; }
.site-header.is-light .mega__chain li { border-color: rgb(140 184 255 / .24); color: #eef2fb; }

/* -- Resources / knowledge mega: flat pale-blue preview (the selected job's area), approved link blues -- */
.site-header.is-light .kn-preview { background: #f2f5fb; border-color: rgb(31 99 232 / .18); }
.site-header.is-light .kn-flow li { color: #36435f; }
.site-header.is-light .kn-flow__n { color: #1747b8; }
.site-header.is-light .kn-answers a { color: #0a1430; }
.site-header.is-light .kn-answers a:hover { background: #f2f5fb; color: #1747b8; }
.site-header.is-light :is(.kn-ask svg, .kn-answers svg, .kn-search svg) { color: #1747b8; }
.site-header.is-light .kn-search:hover { border-color: #1747b8; }

/* -- Drawer (≤1080px): cool light surface so the white panels still read as cards -- */
@media (max-width: 1080px) {
  .site-header.is-light .mega { background: #f6f7fa; }
}

/* ===================== M08 · SALES STORY COLOUR LAW (management edition) ===================== */
/* Colour presentation only for the five-moment sales storyboard (.scx in #ch-sales, w17-04.css). Same
   selectors as the source, loaded later, so they win without !important. Ribbon, split paper | witness,
   stage.js, layout, type and motion are untouched. Kept as functional signals: legend/evidence dots
   (verified / runtime), ok + warn stamps, lit invoice state, stock and guarantee greens, the runtime
   "check availability" note on module links, and the return scene's orange limit (mark, bound, stripe). */

/* -- Scene: legacy variable names, canonical values; flat navy, cobalt hairline -- */
.scx {
  --scx-gold: #2f7bff; --scx-gold-2: #8cb8ff; --scx-cyan: #5294ff; --scx-ink: #0a1430; --scx-ivory: #fff;
  background: #0c1530; border-color: rgb(82 148 255 / .22);
}
.scx ::selection { background: rgb(82 148 255 / .35); }
.scx-legend .is-example::before, .scx-ev .is-example > b::before { border-color: #8cb8ff; }
.scx-nav { border-color: rgb(82 148 255 / .45); }
.scx-nav:hover:not(:disabled) { background: rgb(82 148 255 / .16); }

/* -- Ribbon: cobalt thread without glow; selected node solid cobalt with white numeral -- */
.scx-wave__lit { filter: none; }
.scx-tab__n { background: #0a1122; }
.scx-tab.is-past .scx-tab__n { background: #0c1530; color: #eef2fb; }
.scx-tab[aria-selected="true"] .scx-tab__n { border-color: #8cb8ff; background: #1f63e8; color: #fff; box-shadow: none; }
.scx-tab[aria-selected="true"] .scx-tab__n::after { border-color: rgb(82 148 255 / .55); }

/* -- Story line and desk -- */
.scx-story { border-color: rgb(82 148 255 / .28); background: rgb(82 148 255 / .07); }
.scx-desk { background: #0a1122; border-color: rgb(82 148 255 / .2); }
.scx-desk::after { border-top-color: rgb(47 123 255 / .55); border-bottom-color: rgb(140 184 255 / .45); }

/* -- Paper: white, cool separators, cobalt marks, approved light ink -- */
.scx-doc::before { background: #1f63e8; }
.scx-doc--receipt::before { background: #1747b8; }
.scx-doc--review::before { background: #0a1430; }
.scx-doc__head { border-bottom-color: #e9edf5; }
.scx-doc__type svg, .scx-link__arrow svg, .scx-apart svg { color: #1747b8; }
.scx-doc__head .ident { color: #36435f; }
.scx-doc__foot, .scx-fields dt, .scx-sum dt, .scx-lines th, .scx-life li, .scx-sign small, .scx-sign__arrow svg, .scx-bound small { color: #5b6787; }
.scx-stamp--wait { color: #1747b8; background: #f2f5fb; }
.scx-lines th { border-bottom-color: rgb(10 20 48 / .16); }
.scx-lines td { border-bottom-color: rgb(10 20 48 / .1); }
.scx-link, .scx-sign, .scx-calc { background: #f2f5fb; }
.scx-link { color: #36435f; }
.scx-link .ident { box-shadow: 0 0 0 1px rgb(31 99 232 / .2); }
.scx-life li, .scx-fake { border-color: rgb(54 67 95 / .3); }
.scx-fake { color: #36435f; }
.scx-apart { border-color: rgb(31 99 232 / .2); background: #f2f5fb; color: #0a1430; }
.scx-bound__bar { background: repeating-linear-gradient(135deg, #f2f5fb 0 6px, #e9edf5 6px 12px); }
.scx-calc li { border-bottom-color: rgb(10 20 48 / .1); }
/* "illustrative example" chip keeps its dashed cue, in link blue instead of violet */
.scx-calc em { border-color: #1a56d1; color: #1747b8; }

/* -- Books witness: deep navy, cobalt progress, cool-white ledger -- */
.scx-witness { background: #0a1122; border-color: rgb(82 148 255 / .25); }
.scx-witness__k { color: #8cb8ff; }
.scx-witness__k span { background: rgb(82 148 255 / .14); color: #eef2fb; }
.scx-tally .is-on { border-color: rgb(82 148 255 / .5); background: rgb(82 148 255 / .1); }
.scx-books { background: #f6f7fa; }
.scx-books h5 { color: #1747b8; }
.scx-books .scx-lines th { border-bottom-color: rgb(10 20 48 / .16); }
.scx-books .scx-lines td { border-bottom-color: rgb(10 20 48 / .1); }
.scx-books__none, .scx-books__note { color: #36435f; }
.scx-mod { border-color: rgb(82 148 255 / .45); color: #eef2fb; }
.scx-mod:hover { background: rgb(82 148 255 / .16); }

/* -- Limit note and chapter jump -- */
.scx-limit { border-color: rgb(82 148 255 / .45); }
.scx-jump { border-color: rgb(82 148 255 / .5); }
.scx-jump:hover { background: rgb(82 148 255 / .12); }

@media (max-width: 720px) {
  .scx-tab[aria-selected="true"] { background: rgb(47 123 255 / .14); }
}

/* ===================== M09 · FOOTER + PRICING COLOUR LAW (management edition) ===================== */
/* Colour presentation only. Footer: the w16 .ft light surface keeps its variable names; values move to the
   canonical white / paper / navy / cobalt steps (ink 16.9:1, ink-2 ≈9.2:1, ink-3 ≈5.2:1 on #F6F7FA). Pricing:
   the promotional offer flag and its caveat move from amber to cobalt with the same words. Kept as functional
   signals: footer guard green (--ft-guard), .pr-trust ok ticks, .pr-card__note (registration not live,
   var(--warn)), the "مقترح" cell note (var(--warn)), and .pr-state--ok / --warn / --wait. Geometry untouched. */

/* -- Footer surface and tokens -- */
.ft {
  --ft-bg: #f6f7fa; --ft-card: #ffffff;
  --ft-ink: #0a1430; --ft-ink-2: #36435f; --ft-ink-3: #5b6787;
  --ft-link: #1747b8; --ft-link-hover: #0a1430; --ft-accent: #1f63e8;
  --ft-line: rgb(10 20 48 / .12); --ft-line-2: rgb(10 20 48 / .2); --line-3: rgb(10 20 48 / .32);
  --focus-ring: #1747b8;
}
.ft .footer-band { background: linear-gradient(180deg, #ffffff 0%, #f6f7fa 100%); }
.ft :focus-visible { outline-color: #1747b8; }

/* -- Footer icon chips: pale cobalt tint for flow steps, white chip for groups, navy for start cards -- */
.ft .ft-flow__icon { background: #f2f5fb; color: #1747b8; }
.ft .ft-group__icon { color: #1747b8; }
.ft .ft-card:hover { border-color: #1747b8; box-shadow: 0 14px 30px -22px rgb(23 71 184 / .6); }
.ft .ft-card__go { color: #1747b8; }

/* -- Footer buttons: every state restated so the order rest → hover → active → focus → disabled holds -- */
.ft .ft-btn--ghost { --_fg: #0a1430; --_bd: rgb(10 20 48 / .32); }
.ft .ft-btn--ghost:hover { --_bg: #f2f5fb; --_fg: #1747b8; --_bd: #1747b8; }
.ft .ft-btn--ghost:active { --_bg: #e9edf5; }
.ft .ft-btn--primary:hover { --_bg: #1747b8; }
.ft .ft-btn--primary:active { --_bg: #0c1530; }
.ft .ft-btn:focus-visible { outline-color: #1747b8; }
.ft .ft-btn:is([aria-disabled="true"], :disabled) { --_bg: #e9edf5; --_fg: #5b6787; --_bd: rgb(10 20 48 / .2); }

/* -- Pricing offer: white → pale paper, approved light ink; 0 SAR stays navy and focal -- */
body[data-page="pricing"] .pr-offer {
  background: linear-gradient(160deg, #ffffff 0%, #f2f5fb 100%); color: #36435f;
  --text-2: #36435f; --text-3: #5b6787; --line-1: rgb(10 20 48 / .12); --line-2: rgb(10 20 48 / .2);
  --blue-300: #1747b8; --focus-ring: #1747b8;
}
/* promotional caveat, not a status: same words, cobalt-on-pale instead of yellow */
body[data-page="pricing"] .pr-offer__flag { background: #f2f5fb; color: #1747b8; border-color: #8cb8ff; }
body[data-page="pricing"] .pr-offer__k { color: #1747b8; }
body[data-page="pricing"] .pr-offer__list li { color: #36435f; }
body[data-page="pricing"] .pr-offer__note { color: #5b6787; }
body[data-page="pricing"] .pr-offer__note b { color: #1747b8; }

/* -- Plan cards (dark band): the free card repeats the offer's caveat, so it takes the same cobalt voice -- */
body[data-page="pricing"] .pr-card__flag { background: rgb(82 148 255 / .12); color: #8cb8ff; box-shadow: inset 0 0 0 1px rgb(140 184 255 / .3); }

/* ===================== M10 · PROCUREMENT STORY COLOUR LAW (management edition) ===================== */
/* Colour presentation only for the six-station procure-to-pay storyboard (.p2p in #ch-procure, w17.css). Same
   selectors as the source, loaded later, so they win without !important. The blueprint desk grid, document pile,
   station rail and briefing card stay; only warm ivory/beige and off-palette blues/greys move to canonical steps.
   Kept as functional signals: legend/evidence dots (verified / runtime), p2p-stamp--ok / --wait / --warn, receipt
   (green) and match (amber) document stripes, the below-reorder gauge fill, the flagged price row and chip, the
   received-quantity bar, stock gain, variance note, "not the creator" marks, p2p-state is-ok / is-warn, the guard,
   and the runtime "check availability" note on module links. Geometry, motion and stage.js untouched. */

/* -- Scene: flat navy, restrained cobalt hairline -- */
.p2p {
  background: #0c1530; border-color: rgb(82 148 255 / .22);
  box-shadow: 0 40px 90px -50px rgb(3 5 11 / .9), inset 0 1px 0 rgb(238 242 251 / .05);
}
/* "illustrative example" keeps its dashed cue, cobalt instead of violet */
.p2p-legend .is-example::before, .p2p-ev .is-example > b::before { border-color: #8cb8ff; }

/* -- Rail: night nodes, cobalt past, light-on-navy captions -- */
.p2p-tab__n { background: #0a1122; }
.p2p-tab.is-past .p2p-tab__n { background: rgb(31 99 232 / .22); color: #eef2fb; }
.p2p-tab small { color: #b0bcd9; }
.p2p-tab[aria-selected="true"] small { color: #8cb8ff; }

/* -- Blueprint desk: same 24px grid and top light, night base -- */
.p2p-desk {
  background:
    linear-gradient(rgb(140 184 255 / .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(140 184 255 / .07) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(90% 80% at 50% 0%, rgb(47 123 255 / .14), transparent 70%),
    #0a1122;
}
/* earlier papers: cool paper that darkens with depth (--d 1..3) instead of warm ivory */
.p2p-pile li {
  background: #e9edf5; color: #36435f;
  box-shadow: 0 -6px 16px -10px rgb(3 5 11 / .6);
}
.p2p-pile li:nth-child(2) { background: #f2f5fb; }
.p2p-pile li:nth-child(3) { background: #f6f7fa; }

/* -- Paper: white sheet, navy ink, pale separators; approval stripe in cobalt -- */
.p2p-doc { background: #fff; color: #0a1430; box-shadow: 0 26px 50px -24px rgb(3 5 11 / .85), 0 0 0 1px rgb(10 20 48 / .06); }
.p2p-doc--approve::before { background: #1747b8; }
.p2p-doc__head { border-bottom-color: #e9edf5; }
.p2p-doc__type svg, .p2p-route { color: #1747b8; }
.p2p-doc__head .ident { color: #36435f; }
.p2p-doc__foot, .p2p-fields dt, .p2p-sum dt, .p2p-qty dt, .p2p-stock small, .p2p-qty3 dt, .p2p-stock s,
.p2p-sign small, .p2p-sign__arrow svg, .p2p-lines th { color: #5b6787; }
.p2p-fields dd, .p2p-qty dd, .p2p-inbox li b, .p2p-sign b, .p2p-lines td { color: #0a1430; }

/* -- Neutral panels: pale cobalt paper instead of beige; status-tinted panels stay as they are -- */
.p2p-gauge, .p2p-sign, .p2p-qty3 { background: #f2f5fb; }
.p2p-gauge small { color: #36435f; }
.p2p-gauge__bar { background: rgb(10 20 48 / .12); }
.p2p-gauge__bar s { background: #0a1430; }
.p2p-qty__bar { background: repeating-linear-gradient(135deg, #f2f5fb 0 6px, #e9edf5 6px 12px); }

/* -- Approval inbox and mock buttons -- */
.p2p-inbox li { border-color: rgb(10 20 48 / .12); color: #36435f; }
.p2p-inbox li.is-on { border-color: #8cb8ff; background: #f2f5fb; box-shadow: inset 3px 0 0 #1747b8; }
[dir="rtl"] .p2p-inbox li.is-on { box-shadow: inset -3px 0 0 #1747b8; }
.p2p-fake { border-color: rgb(10 20 48 / .24); color: #36435f; }
.p2p-fake.is-on { border-color: #1f63e8; background: #1f63e8; color: #fff; }

/* -- Ledger lines: navy rules; the liability row takes the pale cobalt tint -- */
.p2p-lines th { border-bottom-color: rgb(10 20 48 / .16); }
.p2p-lines td { border-bottom-color: rgb(10 20 48 / .1); }
.p2p-lines tfoot td { border-top-color: #0a1430; }
.p2p-lines .is-liab td { background: #f2f5fb; }
.p2p-sum .is-grand { background: #0c1530; }
.p2p-sum .is-grand dt { color: #b0bcd9; }

/* -- Briefing card: night surface, canonical light-on-navy steps -- */
.p2p-card { background: rgb(10 17 34 / .92); }
.p2p-card__k span { color: #eef2fb; }
.p2p-card__t .ident, .p2p-next small, .p2p-mod { color: #8cb8ff; }
.p2p-facts dt, .p2p-mods > small { color: #b0bcd9; }
.p2p-state.is-wait { background: rgb(140 184 255 / .16); color: #8cb8ff; }
.p2p-limit { border-color: rgb(140 184 255 / .4); }

/* ===================== M11 · BOOKING + RESOURCE ATLAS COLOUR LAW (management edition) ===================== */
/* Colour presentation only for the booking control room (.bkc in #ch-services, w17-06.css) and the resource atlas
   (.brx, w17-07.css). Same selectors as the source, loaded later, so they win without !important; the ≤560px
   transposed beam and ruler gradients are restated so their direction survives. Decorative teal / violet / copper /
   ivory move to canonical navy, white and cobalt steps. The seven cell states stay apart by fill, border style and
   word: idle (navy, dashed), free (ok green, solid), busy (neutral hatch), clash (bad red, 2px + glow), ask (cobalt
   tint, dashed), held (solid cobalt, double ring), booked (white panel, ok border). Kept as functional signals:
   legend/evidence dots (verified / runtime), the runtime "check availability" note on module links, the fit tag
   (ok), the clash tag and short column (bad). Atlas accents are four cobalt steps, not status colours; selection
   is still aria-pressed + border + ring. Geometry, motion, keyframes, stage.js and text untouched. */

/* -- Scene: legacy variable names, canonical values; copper is the collision accent, so it takes --bad -- */
.bkc {
  --bkc-teal: #5294ff; --bkc-teal-2: #8cb8ff; --bkc-violet: #2f7bff; --bkc-violet-2: #8cb8ff; --bkc-copper: var(--bad);
  --bkc-ink: #0a1430; --bkc-ivory: #fff;
  --bkc-c-idle: #36435f; --bkc-c-free: var(--ok); --bkc-c-busy: #b0bcd9; --bkc-c-clash: var(--bad);
  --bkc-c-ask: #8cb8ff; --bkc-c-held: #1f63e8; --bkc-c-booked: #eef2fb;
  background: linear-gradient(165deg, #0c1530 0%, #0a1122 55%, #060a15 100%);
  border-color: rgb(82 148 255 / .22);
}
.bkc ::selection { background: rgb(82 148 255 / .35); }
.bkc-legend .is-example::before { border-color: #8cb8ff; }

/* -- Controls and moment rail: cobalt hairlines, no glow; selected node solid cobalt with white numeral -- */
.bkc-nav { border-color: rgb(82 148 255 / .45); }
.bkc-nav:hover:not(:disabled) { background: rgb(82 148 255 / .16); }
.bkc-rail__beam i { box-shadow: none; }
.bkc-tab__n { border-color: rgb(82 148 255 / .35); background: #0a1122; }
.bkc-tab:hover { border-color: rgb(82 148 255 / .5); }
.bkc-tab.is-past .bkc-tab__n { background: rgb(31 99 232 / .22); color: #eef2fb; }
.bkc-tab[aria-selected="true"] { background: rgb(47 123 255 / .14); }
.bkc-tab[aria-selected="true"] .bkc-tab__n { border-color: #8cb8ff; background: #1f63e8; color: #fff; box-shadow: 0 0 0 5px rgb(82 148 255 / .18); }

/* -- Control room and matrix furniture: night surfaces; the time ruler stays luminous, in cobalt -- */
.bkc-room { border-color: rgb(82 148 255 / .22); background: radial-gradient(70% 90% at 50% 0%, rgb(47 123 255 / .1), transparent 70%), #0a1122; }
.bkc-ex { border-color: #8cb8ff; color: #eef2fb; }
.bkc-grid::before { background: linear-gradient(270deg, #8cb8ff, #5294ff 55%, #1f63e8); box-shadow: 0 0 12px rgb(82 148 255 / .6); }
.bkc-slot::after { background: #0a1122; }
.bkc-res { background: #0c1530; }

/* -- The beam: cobalt column; ask = dashed filament, clash = red foot, held = strong double ring, booked = ok ring -- */
.bkc-grid > .bkc-beam { background: linear-gradient(180deg, rgb(82 148 255 / .34), rgb(82 148 255 / .08)); box-shadow: 0 0 0 1px rgb(82 148 255 / .55), 0 0 30px rgb(82 148 255 / .35); }
.bkc-beam.is-ask { background: linear-gradient(180deg, rgb(140 184 255 / .22), rgb(140 184 255 / .05)); box-shadow: 0 0 0 1px rgb(140 184 255 / .55), 0 0 24px rgb(140 184 255 / .25); }
.bkc-beam.is-clash { background: linear-gradient(180deg, rgb(82 148 255 / .28) 0 64%, rgb(255 123 123 / .38) 64%); box-shadow: 0 0 0 1px rgb(255 123 123 / .6), 0 0 28px rgb(255 123 123 / .35); }
.bkc-beam.is-held { background: linear-gradient(180deg, rgb(31 99 232 / .5), rgb(31 99 232 / .16)); box-shadow: 0 0 0 2px rgb(140 184 255 / .8), 0 0 36px rgb(47 123 255 / .55); }
.bkc-beam.is-booked { box-shadow: 0 0 0 2px rgb(63 214 156 / .8), 0 0 40px rgb(82 148 255 / .45); }

/* -- Slot tags: same words; status tags keep ok / bad, booking tags take cobalt steps -- */
.bkc-tag.is-ask { background: #8cb8ff; color: #0a1430; }
.bkc-tag.is-clash { background: var(--bad); color: #03050b; }
.bkc-tag.is-fit { background: var(--ok); color: #03050b; }
.bkc-tag.is-held { background: #1f63e8; color: #fff; box-shadow: 0 0 0 1px #8cb8ff; }
.bkc-tag.is-wait { border-color: #8cb8ff; background: #0a1122; color: #8cb8ff; }
.bkc-tag.is-booked { background: #fff; color: #0a1430; }

/* -- Seven cell states (and the five legend keys that share them) -- */
.bkc-cell.is-idle, .bkc-keys .is-idle::before { background-color: #0a1122; border-color: rgb(140 184 255 / .35); color: #b0bcd9; }
.bkc-cell.is-free, .bkc-keys .is-free::before { background-color: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.bkc-cell.is-busy, .bkc-keys .is-busy::before {
  background-color: #0c1530; border-color: rgb(176 188 217 / .4); color: #eef2fb;
  background-image: repeating-linear-gradient(135deg, rgb(176 188 217 / .12) 0 5px, transparent 5px 10px);
}
.bkc-cell.is-clash { background-color: rgb(255 123 123 / .16); border-color: var(--bad); color: #eef2fb; box-shadow: 0 0 18px rgb(255 123 123 / .4); }
.bkc-cell.is-ask, .bkc-keys .is-ask::before { background-color: rgb(31 99 232 / .2); border-color: #5294ff; color: #8cb8ff; }
.bkc-cell.is-held, .bkc-keys .is-held::before { background-color: #1f63e8; border-color: #8cb8ff; color: #fff; box-shadow: inset 0 0 0 1px #0a1122; }
.bkc-cell.is-booked, .bkc-keys .is-booked::before { background-color: #fff; border-color: var(--ok); color: #0a1430; }
.bkc-cell.is-beam.is-free { border-color: var(--ok); }
.bkc-cell.is-short { outline-color: var(--bad); }
.bkc-cell.is-wait { outline-color: #8cb8ff; }

/* -- All-or-none medallion: arcs read from --bkc-c-*; held ring cobalt, booked ring ok -- */
.bkc-orbit__arcs { filter: drop-shadow(0 0 8px rgb(82 148 255 / .45)); }
.bkc-orbit__spin { border-color: rgb(140 184 255 / .35); }
.bkc-orbit.is-held .bkc-orbit__ring::after { border-color: #8cb8ff; }
.bkc-orbit.is-booked .bkc-orbit__ring::after { border-color: var(--ok); }
.bkc-orbit__core > span { color: #eef2fb; }

/* -- Reading band: white sheet, cobalt stripe, cool paper facts, approved light ink -- */
.bkc-read::before { background: linear-gradient(270deg, #1f63e8, #2f7bff 60%, #8cb8ff); }
.bkc-read__k { color: #1747b8; }
.bkc-read__k span { background: #f2f5fb; color: #1747b8; }
.bkc-did, .bkc-ev li { color: #36435f; }
.bkc-facts > div { background: #f2f5fb; }
.bkc-facts dt, .bkc-mods > small { color: #5b6787; }
.bkc-guard { border-color: #8cb8ff; background: #f2f5fb; color: #0a1430; }
.bkc-guard b { color: #1747b8; }
/* "illustrative example" keeps its dashed cue, in link blue instead of violet */
.bkc-ev .is-example > b::before { border-color: #1a56d1; }
.bkc-mod { border-color: #1747b8; color: #1747b8; }
.bkc-mod:hover { background: #1747b8; color: #fff; }

/* -- Limit note -- */
.bkc-limit { border-color: rgb(140 184 255 / .4); }

/* -- ≤560px transposed matrix: the same colours along the horizontal beam and vertical ruler -- */
@media (max-width: 560px) {
  .bkc-grid::before { background: linear-gradient(180deg, #8cb8ff, #5294ff 55%, #1f63e8); }
  .bkc-grid > .bkc-beam { background: linear-gradient(270deg, rgb(82 148 255 / .34), rgb(82 148 255 / .08)); }
  .bkc-beam.is-ask { background: linear-gradient(270deg, rgb(140 184 255 / .22), rgb(140 184 255 / .05)); }
  .bkc-beam.is-clash { background: linear-gradient(270deg, rgb(82 148 255 / .28) 0 70%, rgb(255 123 123 / .38) 70%); }
  .bkc-beam.is-held { background: linear-gradient(270deg, rgb(31 99 232 / .5), rgb(31 99 232 / .16)); }
}

/* -- Resource atlas: four cobalt steps for the four example bundles; --brx-rgb matches each hex -- */
.brx, .brx-pick { --brx-a: #1f63e8; --brx-a2: #8cb8ff; --brx-rgb: 31 99 232; }
.brx[data-accent="copper"], .brx-pick[data-accent="copper"] { --brx-a: #2f7bff; --brx-a2: #8cb8ff; --brx-rgb: 47 123 255; }
.brx[data-accent="violet"], .brx-pick[data-accent="violet"] { --brx-a: #5294ff; --brx-a2: #8cb8ff; --brx-rgb: 82 148 255; }
.brx[data-accent="cobalt"], .brx-pick[data-accent="cobalt"] { --brx-a: #8cb8ff; --brx-a2: #eef2fb; --brx-rgb: 140 184 255; }
.brx {
  background-color: #0a1122;
  background-image: radial-gradient(38% 120% at 50% 50%, rgb(var(--brx-rgb) / .16), transparent 70%);
}
.brx-kicker { color: #8cb8ff; }
.brx-pick { background-color: #0c1530; }
.brx-pick[aria-pressed="true"] { background-color: rgb(47 123 255 / .18); }
.brx-node { background-color: #0c1530; }
.brx-lock { background-color: #0a1122; }
.brx-ex { border-color: #8cb8ff; color: #eef2fb; }
.brx-eq__result { background-color: rgb(82 148 255 / .16); }
.brx-proof b { color: var(--ok); }

/* -- Selected-node halo: same keyframe name, geometry and timing (2.2s × 2, set in w17-06.css); teal glow → cobalt -- */
@keyframes bkc-halo { from { box-shadow: 0 0 0 0 rgb(82 148 255 / .6); } to { box-shadow: 0 0 0 9px rgb(82 148 255 / 0); } }

/* M12 — immediate first-paint navigation, progressively enhanced by unchanged chrome.js. */
.site-header[data-header-preload] { background: #ffffff; border-bottom-color: #e9edf5; }
.site-header[data-header-preload] .mega__top { text-decoration: none; }
.site-header[data-header-preload] .site-nav-fallback { display: none; }
@media (max-width: 1080px) {
  .site-header[data-header-preload] .mega { display: none; }
  .site-header[data-header-preload] .site-nav-fallback { display: block; position: relative; }
  .site-header[data-header-preload] .site-nav-fallback summary {
    display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer;
    list-style: none; color: #0a1430; background: #f6f7fa;
    border: 1px solid #e9edf5; border-radius: 12px;
  }
  .site-header[data-header-preload] .site-nav-fallback summary::-webkit-details-marker { display: none; }
  .site-header[data-header-preload] .site-nav-fallback summary:focus-visible { outline: 2px solid #1f63e8; outline-offset: 3px; }
  .site-header[data-header-preload] .site-nav-fallback__links {
    position: absolute; top: calc(100% + 12px); inset-inline-end: 0;
    display: grid; gap: 3px; width: min(310px, calc(100vw - 2rem));
    padding: 12px; background: #ffffff; border: 1px solid #e9edf5;
    border-radius: 14px; box-shadow: 0 20px 45px rgb(10 20 48 / .18); z-index: 65;
  }
  .site-header[data-header-preload] .site-nav-fallback__links a {
    display: block; padding: 11px 13px; border-radius: 8px;
    color: #0a1430; text-decoration: none; font-size: .95rem; font-weight: 500;
  }
  .site-header[data-header-preload] .site-nav-fallback__links a:hover,
  .site-header[data-header-preload] .site-nav-fallback__links a:focus-visible {
    color: #1747b8; background: #f2f5fb;
  }
}

/* ===================== M12 DECORATIVE COLOR AUTHORITY ===================== */
/* Presentation-only chrome and "example numbers" labels move to white / navy / cobalt.
   Real status cues (.is-ok, .is-warn, .live-dot, booking states, stock-low, needs-check) are untouched. */

/* -- Product windows: paper title bar; window dots stay varied, inside the blue family -- */
.win .win__bar { background-color: #f2f5fb; }
.win .win__dots i { background-color: #8cb8ff; }
.win .win__dots i:nth-child(2) { background-color: #5294ff; }
.win .win__dots i:nth-child(3) { background-color: #1f63e8; }

/* -- Illustrative-numbers badge inside windows: pale blue sheet, link-blue ink; badge text unchanged -- */
.win .demo-tag { color: #1747b8; background-color: #f2f5fb; border-color: #8cb8ff; }

/* -- Home hero "illustrative numbers" tag: cobalt instead of gold; size, layout and motion unchanged -- */
.hero .ui-tag { color: #8cb8ff; border-color: rgb(140 184 255 / .55); }

/* -- Mist bands outside home: approved pale-blue surface instead of #ebf0f9 (colour only, no layout/shadow change) -- */
:where(body:not([data-page="home"])) .block.tone-mist { background-color: #f2f5fb; }
body[data-page=support] .cv-node[aria-pressed=true] small { color: #ffffff; }

/* ===================== M14 HOME DECISION GUIDE ===================== */
/* Compact start guide: activity (+ optional role) on the start side at 43%, a short answer on the end side at 57%.
   White / paper / navy / cobalt only; runtime chips and the availability note keep their real warning cue. */
#guide.block { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); background: #f6f7fa; border-block: 1px solid #e9edf5; }
#guide .gd-head { gap: .35rem; max-width: 620px; margin-bottom: clamp(1rem, .85rem + .6vw, 1.4rem); }
#guide .gd-head h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); line-height: 1.45; text-wrap: balance; }
#guide .gd-head > p { margin: 0; color: #36435f; font-size: var(--fs-sm); line-height: 1.7; }
#guide .kicker { color: #1f63e8; }

#guide .gd {
  position: relative; display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); align-items: stretch;
  background: #ffffff; border: 1px solid #e9edf5; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgb(10 20 48 / .05), 0 20px 40px -30px rgb(10 20 48 / .26);
}

/* -- Choices -- */
#guide .gd-in { display: grid; align-content: start; gap: .75rem; min-width: 0; padding: clamp(1rem, .85rem + .7vw, 1.4rem); background: #f2f5fb; border-inline-end: 1px solid #e9edf5; }
#guide .gd-step { min-width: 0; margin: 0; padding: 0; border: 0; }
#guide .gd-step > legend:not(.visually-hidden) { margin: 0 0 .5rem; padding: 0; color: #0a1430; font-family: var(--font-display); font-size: .98rem; font-weight: 600; line-height: 1.4; }
#guide .gd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }

#guide .guide-opt { position: relative; display: grid; min-width: 0; }
#guide .guide-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#guide .guide-opt .guide-opt__box {
  position: relative; display: grid; align-content: center; gap: .1rem; min-height: 44px;
  padding: .45rem .7rem; padding-inline-end: 2rem; border-radius: 12px; border: 1px solid #e9edf5;
  background: #ffffff; color: #0a1430; font-size: var(--fs-sm); transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
#guide .guide-opt b { font-weight: 600; line-height: 1.45; }
#guide .guide-opt small { color: #5b6787; font-size: var(--fs-meta); line-height: 1.45; }
#guide .gd-opts--role .guide-opt b { font-weight: 500; }
#guide .guide-opt__ok { position: absolute; inset-inline-end: .65rem; top: .65rem; width: 16px; height: 16px; color: #1f63e8; opacity: 0; }
#guide .guide-opt:hover .guide-opt__box { border-color: #8cb8ff; }
#guide .guide-opt input:checked + .guide-opt__box { background: #ffffff; border-color: #1f63e8; color: #0a1430; box-shadow: inset 0 0 0 1px #1f63e8; }
#guide .guide-opt input:checked + .guide-opt__box b { color: #1f63e8; font-weight: 600; }
#guide .guide-opt input:checked + .guide-opt__box .guide-opt__ok { opacity: 1; }
#guide .guide-opt input:focus-visible + .guide-opt__box { outline: 2px solid #1f63e8; outline-offset: 2px; }

#guide .guide-role-details { min-width: 0; border-top: 1px solid #e9edf5; padding-top: .75rem; }
#guide .guide-role-details > summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; min-height: 44px;
  padding: .4rem .75rem; border-radius: 12px; border: 1px solid #e9edf5; background: #ffffff; cursor: pointer; list-style: none;
}
#guide .guide-role-details > summary::-webkit-details-marker { display: none; }
#guide .guide-role-details > summary::after { content: ""; width: 7px; height: 7px; margin-inline-start: auto; border: solid #1f63e8; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
#guide .guide-role-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
#guide .guide-role-details > summary:focus-visible { outline: 2px solid #1f63e8; outline-offset: 2px; }
#guide .gd-sum__t { color: #0a1430; font-size: var(--fs-sm); font-weight: 600; }
#guide .gd-sum__v { color: #5b6787; font-size: var(--fs-meta); }
#guide .guide-role-details[open] .gd-step { margin-top: .5rem; }
#guide .gd-clear {
  justify-self: start; min-height: 32px; padding: .15rem .1rem; border: 0; background: none; color: #5b6787;
  font: inherit; font-size: var(--fs-meta); text-decoration: underline; text-underline-offset: .25em; cursor: pointer;
}
#guide .gd-clear:hover { color: #1f63e8; }
#guide .gd-clear:focus-visible { outline: 2px solid #1f63e8; outline-offset: 2px; border-radius: 4px; }

/* -- Answer -- */
#guide .gd-out { display: flex; flex-direction: column; min-width: 0; }
#guide .gd-out__head { padding: .85rem clamp(1rem, .85rem + .7vw, 1.4rem); background: #0a1122; }
#guide .gd-out__k { margin: 0; color: #8cb8ff; font-size: var(--fs-meta); font-weight: 600; line-height: 1.5; }
#guide .gd-out__head h3 { margin: .1rem 0 0; color: #ffffff; font-family: var(--font-display); font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); font-weight: 600; line-height: 1.5; }

#guide .gd-sec { padding: .85rem clamp(1rem, .85rem + .7vw, 1.4rem); }
#guide .gd-sec + .gd-sec { border-top: 1px solid #e9edf5; }
#guide .gd-sec h4 { margin: 0 0 .5rem; color: #0a1430; font-family: var(--font-display); font-size: .92rem; font-weight: 600; line-height: 1.4; }

#guide .gd-steps { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
#guide .gd-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .55rem; align-items: start; color: #36435f; font-size: var(--fs-sm); line-height: 1.65; }
#guide .gd-steps__n { display: grid; place-items: center; width: 22px; height: 22px; margin-top: .1rem; border-radius: 7px; background: #f2f5fb; color: #1f63e8; font-family: var(--font-num); font-size: .74rem; font-weight: 600; }
#guide .gd-steps li:first-child .gd-steps__n { background: #1f63e8; color: #ffffff; }

#guide .gd-role { margin-top: .6rem; padding: .5rem .7rem; border-radius: 10px; background: #f2f5fb; border-inline-start: 3px solid #2f7bff; }
#guide .gd-role p { display: grid; gap: .05rem; margin: 0; }
#guide .gd-role small { color: #5b6787; font-size: var(--fs-meta); }
#guide .gd-role b { color: #0a1430; font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; }

#guide .gd-more { margin-top: .4rem; }
#guide .gd-more > summary { display: inline-flex; align-items: center; min-height: 32px; color: #1f63e8; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
#guide .gd-more > summary:focus-visible { outline: 2px solid #1f63e8; outline-offset: 2px; border-radius: 4px; }
#guide .gd-more ul { display: grid; gap: .2rem; margin: .25rem 0 0; padding-inline-start: 1.1rem; color: #36435f; font-size: var(--fs-meta); line-height: 1.6; }
#guide .gd-more--mods .gd-mods { margin-top: .35rem; }
#guide .gd-more__n { margin-inline-start: .25rem; color: #5b6787; font-weight: 500; }

#guide .gd-mods { display: flex; flex-wrap: wrap; gap: .35rem; }
#guide .gd-mods .pf-chip { background: #ffffff; border-color: #e9edf5; color: #0a1430; font-size: var(--fs-meta); }
#guide .gd-mods .pf-chip:hover, #guide .gd-mods .pf-chip:focus-visible { border-color: #1f63e8; color: #1f63e8; }
#guide .gd-mods .pf-chip.is-runtime { border-style: dashed; border-color: rgb(147 92 0 / .45); }
#guide .gd-mods .pf-chip small { color: var(--warn); }
#guide .gd-note { margin: .45rem 0 0; color: #36435f; font-size: var(--fs-meta); line-height: 1.65; }
#guide .gd-note::before { border-color: var(--warn); }

#guide .gd-out__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: auto; padding: .75rem clamp(1rem, .85rem + .7vw, 1.4rem); border-top: 1px solid #e9edf5; background: #f6f7fa; }
#guide .gd-out__cta .gd-out__alt { color: #1f63e8; font-size: var(--fs-meta); font-weight: 500; }

@media (max-width: 960px) {
  #guide .gd { grid-template-columns: minmax(0, 1fr); }
  #guide .gd-in { border-inline-end: 0; border-bottom: 1px solid #e9edf5; }
}
@media (max-width: 480px) {
  #guide .gd-opts { grid-template-columns: minmax(0, 1fr); }
  #guide .gd-out__cta .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { #guide .guide-opt .guide-opt__box { transition: none; } }

/* ===================== M16 DEMO CONTACT + HANDOFF CHANNELS ===================== */
/* Step 4 contact group and the two gated send actions. White / navy / cobalt only; the disabled
   channels read as "waiting", never as broken or as working. */
body[data-page="demo"] .cv-contact {
  display: grid; gap: .55rem; margin-top: .4rem; padding: clamp(.85rem, .75rem + .5vw, 1.15rem);
  background: #ffffff; border: 1px solid #e9edf5; border-inline-start: 3px solid #1f63e8; border-radius: 14px;
  box-shadow: 0 1px 2px rgb(10 20 48 / .05);
}
body[data-page="demo"] .cv-contact__t { margin: 0; color: #0a1430; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.4; }
body[data-page="demo"] .cv-contact__help { margin: 0; color: #36435f; font-size: var(--fs-meta); line-height: 1.7; }
body[data-page="demo"] .cv-contact .field-row { margin-top: 0; }
body[data-page="demo"] .cv-contact input[dir="ltr"] { text-align: left; }
body[data-page="demo"] .cv-contact input:focus-visible { outline: 2px solid #1f63e8; outline-offset: 1px; }

body[data-page="demo"] .cv-channel:disabled {
  color: #5b6787; background: #f2f5fb; border-color: #e9edf5; box-shadow: none; cursor: not-allowed; opacity: 1;
}
body[data-page="demo"] .cv-channel:not(:disabled) { color: #1747b8; border-color: #8cb8ff; }
body[data-page="demo"] .cv-channel:not(:disabled):hover { color: #1f63e8; border-color: #1f63e8; }
body[data-page="demo"] .cv-channels-note { margin: .45rem 0 0; color: #36435f; font-size: var(--fs-meta); line-height: 1.7; }

@media (max-width: 834px) {
  body[data-page="demo"] .cv-contact .field-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  body[data-page="demo"] .cv-copy .btn { flex: 1 1 100%; justify-content: center; }
}

/* M20: CloudySystem management 5196 — unified review, no split long-form columns. */
body[data-page="demo"] #planner.is-review {scroll-margin-top:calc(var(--header-h) + 16px);padding-block:clamp(1.4rem,2.5vw,2.5rem)}
body[data-page="demo"] #planner.is-review .cv-planner__grid {grid-template-columns:minmax(0,1fr);gap:0}
body[data-page="demo"] #planner.is-review .cv-wizard {max-width:1000px;width:100%;margin-inline:auto;gap:.9rem;padding:clamp(1rem,2vw,1.6rem)}
body[data-page="demo"] #planner.is-review .cv-wizard__note,body[data-page="demo"] #planner.is-review .cv-preview {display:none}
body[data-page="demo"] #planner.is-review .block__head {max-width:1000px;margin-inline:auto;margin-bottom:.8rem}
body[data-page="demo"] #planner.is-review .cv-step {gap:.4rem}
body[data-page="demo"] #planner.is-review .cv-step__t {color:#0a1430;font-size:clamp(1.2rem,2.2vw,1.6rem)}
body[data-page="demo"] #planner.is-review .cv-step__hint {color:#36435f;margin-bottom:.4rem}
body[data-page="demo"] #planner.is-review .cv-step__t:focus:not(:focus-visible) {outline:none}
body[data-page="demo"] #planner.is-review .cv-nav {padding-top:.4rem}
body[data-page="demo"] .cv-preview__details>summary {list-style:none;cursor:pointer;color:#c4dbff;min-height:44px}
body[data-page="demo"] .cv-preview__details>summary::-webkit-details-marker {display:none}
body[data-page="demo"] .cv-preview__body {display:grid;gap:1.2rem;margin-top:.6rem}
body[data-page="demo"] .m20-panel {width:100%;border:1px solid #e9edf5;border-radius:16px;background:#fff;overflow:hidden}
body[data-page="demo"] .m20-choice {padding:clamp(1rem,1.7vw,1.35rem)}
body[data-page="demo"] .m20-section-head {display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
body[data-page="demo"] .m20-section-head h3 {margin:0;color:#0a1430;font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.5}
body[data-page="demo"] .m20-topic-count {color:#5b6787;font-size:.8rem;font-weight:500}
body[data-page="demo"] :is(.m20-edit,.m20-route,.m20-action) {border:0;background:transparent;color:#1f63e8;min-height:44px;padding:.4rem .5rem;border-radius:8px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer}
body[data-page="demo"] :is(.m20-edit,.m20-route,.m20-action):hover {background:#f2f5fb;color:#1747b8}
body[data-page="demo"] :is(.m20-edit,.m20-route,.m20-action):focus-visible {outline:2px solid #1f63e8;outline-offset:2px}
body[data-page="demo"] .m20-topics {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:.7rem 0 .9rem;padding:0;list-style:none}
body[data-page="demo"] .m20-topics li {display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-width:0;min-height:45px;padding:.55rem .8rem;border:1px solid #e9edf5;border-radius:9px;background:#f6f7fa;color:#0a1430;font-size:.89rem;line-height:1.5;overflow-wrap:anywhere}
body[data-page="demo"] .m20-topics li small {color:#5b6787;font-size:.76rem}
body[data-page="demo"] .m20-facts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:.75rem 0 .15rem;gap:.8rem;border-top:1px solid #e9edf5}
body[data-page="demo"] .m20-facts>div {min-width:0}
body[data-page="demo"] .m20-facts dt {color:#5b6787;font-size:.8rem;line-height:1.55}
body[data-page="demo"] .m20-facts dd {margin:.2rem 0 0;color:#0a1430;font-size:.9rem;font-weight:600;line-height:1.65;overflow-wrap:anywhere}
body[data-page="demo"] .m20-route {margin-top:.5rem;text-decoration:underline;text-underline-offset:3px}
body[data-page="demo"] .m20-contact {padding:clamp(1rem,1.7vw,1.35rem);border-top:1px solid #e9edf5}
body[data-page="demo"] .m20-contact .cv-contact {margin:0;padding:0;border:0;background:transparent;box-shadow:none;gap:.65rem}
body[data-page="demo"] .m20-contact .cv-contact__t {font-size:1.08rem;color:#0a1430}
body[data-page="demo"] .m20-contact .cv-contact__help {color:#5b6787}
body[data-page="demo"] .m20-contact .cv-review__row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1rem;margin-top:0}
body[data-page="demo"] .m20-contact .field {min-width:0}
body[data-page="demo"] .m20-contact .field input {min-height:46px;border-color:#dce4f1}
body[data-page="demo"] .m20-contact .cv-review__notes summary {cursor:pointer;min-height:44px;padding:.5rem .2rem;color:#1f63e8}
body[data-page="demo"] .m20-footer {padding:0 clamp(1rem,1.7vw,1.35rem) 1.15rem}
body[data-page="demo"] .m20-primary-actions {display:grid;grid-template-columns:1.1fr 1fr;gap:.65rem}
body[data-page="demo"] .m20-primary-actions .btn {min-height:50px;width:100%;justify-content:center;text-align:center;white-space:normal}
body[data-page="demo"] .m20-whatsapp:not(:disabled) {color:#fff;background:#1f63e8;border-color:#1f63e8;box-shadow:none}
body[data-page="demo"] .m20-whatsapp:not(:disabled):hover {background:#1747b8}
body[data-page="demo"] .m20-email:not(:disabled) {color:#1f63e8;background:#fff;border:1.5px solid #1f63e8}
body[data-page="demo"] .m20-email:not(:disabled):hover {background:#f2f5fb}
body[data-page="demo"] .m20-privacy {margin:.7rem 0 .2rem;color:#5b6787;font-size:.82rem;line-height:1.6}
body[data-page="demo"] .m20-secondary-actions {display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .6rem}
body[data-page="demo"] .m20-reset {color:#36435f}
body[data-page="demo"] .m20-dialog {width:min(720px,calc(100% - 24px));max-height:min(88dvh,820px);padding:0;margin:auto;border:1px solid #dce4f1;border-radius:16px;background:#fff;color:#0a1430;box-shadow:0 20px 70px rgb(3 5 11 / .23)}
body[data-page="demo"] .m20-dialog::backdrop {background:rgb(3 5 11 / .55)}
body[data-page="demo"] .m20-dialog:not([open]) {display:none}
body[data-page="demo"] .m20-dialog__content {display:grid;max-height:88dvh;grid-template-rows:auto auto minmax(0,1fr)}
body[data-page="demo"] .m20-dialog__header {display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;border-bottom:1px solid #e9edf5}
body[data-page="demo"] .m20-dialog__header h3 {margin:0;font-size:1.12rem;color:#0a1430}
body[data-page="demo"] .m20-dialog__close {min-height:44px;padding:.3rem .8rem;border:1px solid #dce4f1;background:#f6f7fa;color:#0a1430;border-radius:8px;cursor:pointer;font:inherit}
body[data-page="demo"] .m20-dialog__explain {padding:.75rem 1.1rem;color:#36435f;font-size:.86rem}
body[data-page="demo"] .m20-dialog__message,body[data-page="demo"] .m20-dialog__route {min-height:0;max-height:65dvh;overflow:auto;margin:0;padding:1rem 1.1rem;background:#f6f7fa;border-top:1px solid #e9edf5;color:#0a1430;font:inherit;font-size:.91rem;line-height:1.85;direction:rtl;text-align:start;white-space:pre-wrap;overflow-wrap:anywhere}
body[data-page="demo"] .m20-dialog__message[hidden],body[data-page="demo"] .m20-dialog__route[hidden] {display:none}
body[data-page="demo"] .m20-dialog__route ol {padding-inline-start:1.4rem}
body[data-page="demo"] .m20-dialog__route li {margin-bottom:.75rem}
body[data-page="demo"] .m20-dialog__route li b,body[data-page="demo"] .m20-dialog__route li span,body[data-page="demo"] .m20-dialog__route li small {display:block}
body[data-page="demo"] .m20-dialog__route li small {color:#5b6787}
body[data-page="demo"] .m20-dialog--fallback[open] {position:fixed;inset:0;z-index:99999}
@media(max-width:720px) {
body[data-page="demo"] .m20-facts {grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-page="demo"] .m20-contact .cv-review__row {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px) {
body[data-page="demo"] .m20-topics,body[data-page="demo"] .m20-contact .cv-review__row,body[data-page="demo"] .m20-primary-actions {grid-template-columns:minmax(0,1fr)}
body[data-page="demo"] .m20-primary-actions .btn {min-height:48px}
body[data-page="demo"] .m20-panel {border-radius:12px}
body[data-page="demo"] #planner.is-review .cv-wizard {padding:1rem .75rem}
body[data-page="demo"] .m20-dialog__header {padding:.6rem .75rem}
}
@media(prefers-reduced-motion:reduce) {body[data-page="demo"] #planner.is-review .cv-step.is-entering {animation:none}}

/* M20 final visual correction: Step 4 has its own heading; avoid duplicate oversized section heading. */
body[data-page="demo"] #planner.is-review .block__head { display:none; }

/* M21 review scroll stability: prevent a smoothly moving page from swallowing immediate contact/reset clicks. Scoped exclusively to demo Step 4. */
html:has(body[data-page="demo"] #planner.is-review) { scroll-behavior: auto; }

/* M22: an unapproved free-plan concept must never look like a giant published price. */
body[data-page="pricing"] .pr-card .pr-price--concept { font-family: var(--font-display); font-size: clamp(1.12rem, .75rem + 1.15vw, 1.45rem); font-weight: 600; line-height: 1.5; letter-spacing: 0; min-height: 2.6rem; display: flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
body[data-page="pricing"] .pr-offer .pr-price--concept { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); font-weight: 600; line-height: 1.5; }