/* ==========================================================================
   Makoon site — one small design system ("Beside the work", 2026-09-13).
   1. Tokens (light, dark, print)  2. Fonts  3. Base  4. Layout  5. Components  6. The demonstration
   7. Growth and closing  8. Footer, pages and forms  9. Arabic  10. Motion
   Source of truth: src/site/assets/site.css. tools/build.mjs rewrites the font URLs to their
   fingerprinted names and writes public/assets/site.<hash>.css. No framework.
   Marketing surface and product surface have separate tokens (--win-*): the product window is quieter.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  --bg: #f3f1ec; --surface-1: #f9f8f5; --surface-2: #e9e6df; --surface-raised: #ffffff;
  --ink: #1b1a17; --ink-2: #4a4741; --muted: #5f5c54; --line: #dcd8cf; --line-strong: #a39e93;
  --accent: #b8431f; --accent-hover: #93351a; --accent-soft: #f8ddd3; --on-accent: #ffffff; --focus: #1b1a17;
  --ok: #1f7a4d; --warn: #9a6200; --blocked: #8a3b2a;
  --success: #1f7a4d; --warning: #9a6200; --danger: #a52332; --info: #1f4f8f;
  --ground: #e6e2d9; --ground-2: #f0ede6; --ground-glow: rgba(255, 255, 255, .85);
  --win-bg: #ffffff; --win-bar: #f4f3ef; --win-line: #e4e2dc; --win-ink: #1b1a17; --win-ink-2: #45433e; --win-muted: #6f6d67; --win-accent: #1f4f8f; --win-ok: #1f7a4d; --win-warn: #9a6200; --win-blocked: #8a3b2a; --win-shadow: 0 30px 60px rgba(35, 30, 20, .16), 0 2px 6px rgba(35, 30, 20, .08);
  --shadow-1: 0 1px 2px rgba(35, 30, 20, .06), 0 1px 1px rgba(35, 30, 20, .03);
  --shadow-2: 0 20px 50px rgba(35, 30, 20, .14);
  --radius: 6px; --radius-lg: 12px; --r-control: 6px; --r-panel: 12px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --fs-0: .8125rem; --fs-1: .9375rem; --fs-2: 1.0625rem; --fs-3: 1.25rem; --fs-4: 1.5rem;
  --fs-5: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); --fs-6: clamp(2.125rem, 1.5rem + 2.8vw, 4rem);
  --lh: 1.6; --lh-tight: 1.12; --track: -.015em;
  --max: 74rem; --max-wide: 88rem; --max-text: 42rem;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #15151a; --surface-1: #1b1b21; --surface-2: #23232a; --surface-raised: #26262e;
  --ink: #f2f1ee; --ink-2: #c6c4bf; --muted: #8f8d86; --line: #2e2e36; --line-strong: #5a5a64;
  --accent: #ff7a52; --accent-hover: #ff9a7d; --accent-soft: #3a2119; --on-accent: #1a0d08; --focus: #f2f1ee;
  --ok: #6ad39a; --warn: #f2c078; --blocked: #e4c388;
  --success: #6ad39a; --warning: #f2c078; --danger: #ff9aa8; --info: #8fb4ec;
  --ground: #1d1d24; --ground-2: #24242c; --ground-glow: rgba(255, 244, 230, .08);
  --win-bg: #22222a; --win-bar: #2a2a33; --win-line: #383842; --win-ink: #f2f1ee; --win-ink-2: #cfcdc7; --win-muted: #9b998f; --win-accent: #8fb4ec; --win-ok: #6ad39a; --win-warn: #f2c078; --win-blocked: #eba193; --win-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 20px 50px rgba(0, 0, 0, .45);
} }
:root[data-theme="dark"] {
  --bg: #15151a; --surface-1: #1b1b21; --surface-2: #23232a; --surface-raised: #26262e;
  --ink: #f2f1ee; --ink-2: #c6c4bf; --muted: #8f8d86; --line: #2e2e36; --line-strong: #5a5a64;
  --accent: #ff7a52; --accent-hover: #ff9a7d; --accent-soft: #3a2119; --on-accent: #1a0d08; --focus: #f2f1ee;
  --ok: #6ad39a; --warn: #f2c078; --blocked: #e4c388;
  --success: #6ad39a; --warning: #f2c078; --danger: #ff9aa8; --info: #8fb4ec;
  --ground: #1d1d24; --ground-2: #24242c; --ground-glow: rgba(255, 244, 230, .08);
  --win-bg: #22222a; --win-bar: #2a2a33; --win-line: #383842; --win-ink: #f2f1ee; --win-ink-2: #cfcdc7; --win-muted: #9b998f; --win-accent: #8fb4ec; --win-ok: #6ad39a; --win-warn: #f2c078; --win-blocked: #eba193; --win-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 20px 50px rgba(0, 0, 0, .45);
}
/* Print is always light: text on paper, visible lines, no dark surfaces. */
@media print {
  :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #ffffff; --surface-1: #ffffff; --surface-2: #f2f1ec; --surface-raised: #ffffff;
    --ink: #1b1a17; --ink-2: #4a4741; --muted: #7a766d; --line: #d5d1c8; --line-strong: #a39e93;
    --accent: #d4502a; --accent-hover: #b3401f; --accent-soft: #f8ddd3; --on-accent: #ffffff;
    --focus: #1b1a17; --ok: #1f7a4d; --warn: #9a6200; --blocked: #7a5a2a; --success: #1f7a4d; --warning: #9a6200; --danger: #a52332; --info: #1f4f8f;
    --ground: #ffffff; --ground-2: #ffffff; --ground-glow: transparent;
    --win-bg: #ffffff; --win-bar: #f2f1ec; --win-line: #d5d1c8; --win-ink: #1b1a17; --win-ink-2: #4a4741; --win-muted: #6f6d67; --win-shadow: none;
    --shadow-1: none; --shadow-2: none;
  }
  .site-header, .site-footer nav, .skip, .theme, .lang-switch, .people, .story__invite, .grow__steps { display: none !important; }
  .view[hidden], .fig[hidden] { display: block !important; }
}

/* 2. Fonts (self-hosted IBM Plex, SIL Open Font License; the licence ships next to the font sources) -----
   Latin pages load only the Latin subsets they use; Arabic pages load the Arabic family, which
   also carries Latin so digits, "ERP" and the wordmark match. Weights: 400, 500, 600; the display face is Plex Sans Condensed Bold (Latin) and Noto Kufi Arabic Bold (Arabic). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Latin1.b5ad7bd39f.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium-Latin1.b5610af04d.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Latin1.fff0ab3a88.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Latin2.fcfa82e0d4.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium-Latin2.46fbe4f398.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Latin2.2bc85a8e53.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Latin3.17593bcbd5.woff2") format("woff2"); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium-Latin3.3a2c97295f.woff2") format("woff2"); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Latin3.b4c2405247.woff2") format("woff2"); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
/* Arabic ships two weights: 400 and 600. Weight 500 resolves to Regular (nearest lighter face), so
   Arabic pages load about 75 KB less on the critical path; the Arabic family also renders the Latin
   wordmark and the language switch, so no Latin file is fetched on Arabic pages. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSansArabic-Regular.74112e1b7b.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSansArabic-SemiBold.869b2acd0a.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSansCondensed-Bold-Latin1.765b0d6c8e.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/NotoKufiArabic-Bold.c964525ff0.woff2") format("woff2"); }

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-2)/var(--lh) var(--font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 600; letter-spacing: var(--track); line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 700; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-3); line-height: 1.25; }
p { margin: 0 0 var(--s4); }

/* One reading measure for running prose, set once here. The version this replaces was nineteen
   hand-picked selectors - every one of them a selector a reviewer had named by hand - so the three
   pages that are nothing but prose (about, principles, privacy) were the three that never got a cap.
   The unit is em, not ch. `ch` is the width of a zero, and a zero is a different fraction of average
   character width in Arabic than in Latin: one ch cap yields about 70 Latin and 91 Arabic characters
   on the same painted width, which is why the Arabic looked broken when it was in fact tighter than
   the English (measured medians 26.2em against 30.8em). 34em is about 62 Latin characters here.
   Compact surfaces opt out on the next line: their text is labels and values, not prose. */
:is(p, dd, figcaption, blockquote) { max-width: 34em; }
:is(.win, .fields, .journey, .moments, .keeps, .gains, .compare, .people, table) :is(p, dd, figcaption, blockquote) { max-width: none; }
a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
svg { display: inline-block; }
b, strong { font-weight: 600; }
small { font-size: var(--fs-0); }
.muted { color: var(--muted); }
.num { text-align: end; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.skip {
  position: absolute; top: 0; z-index: 100;
  padding: var(--s3) var(--s4); background: var(--accent); color: var(--on-accent);
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; font-weight: 600;
}

/* 4. Layout ---------------------------------------------------------------- */
.container { width: min(100% - 2.75rem, var(--max)); margin-inline: auto; }
.container--wide { max-width: var(--max-wide); }
.container.narrow { max-width: var(--max-text); }
.eyebrow { font-size: var(--fs-0); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }
.lede { font-size: var(--fs-3); line-height: 1.5; color: var(--ink-2); margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* 5. Components ------------------------------------------------------------ */
/* Brand */
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); }

/* Header: brand, three links + call to action, then language and appearance controls. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--s5); min-height: 4.25rem; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--s5); }
.site-nav li > a:not(.btn) {
  display: inline-block; padding: .85rem 0; color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-1); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav li > a:not(.btn):hover { color: var(--ink); border-color: var(--line-strong); }
.site-nav li > a[aria-current="page"]:not(.btn) { color: var(--accent); border-color: var(--accent); }
.site-header__tools { display: flex; align-items: center; gap: .5rem; flex: none; }
.lang-switch {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .7rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface-1); color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-0); font-weight: 600; white-space: nowrap;
}
.lang-switch:hover { color: var(--accent); border-color: var(--accent); }
.theme { display: none; }
.js .theme { display: inline-block; }
.theme__select {
  min-height: 2.25rem; padding: .25rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-1); color: var(--ink-2); font: 600 var(--fs-0)/1.2 var(--font); cursor: pointer;
}
.theme__select:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 56.25rem) {
  .site-header__inner { flex-wrap: wrap; column-gap: var(--s4); row-gap: 0; min-height: 0; padding-top: .6rem; }
  .site-header__tools { margin-inline-start: auto; }
  .site-nav { order: 3; flex-basis: 100%; }
  .site-nav ul { gap: 0 var(--s4); }
  .site-nav li > a:not(.btn) { padding: .6rem 0 .75rem; font-size: var(--fs-0); }
  .site-nav__cta { margin: .15rem 0 .6rem; }
}
@media (max-width: 30rem) { .site-nav__cta { margin-inline-start: 0; flex-basis: 100%; } }

/* Status line */
.status { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: var(--fs-0); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.status__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); flex: none; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: .7rem 1.25rem; border-radius: var(--radius); border: 1px solid transparent;
  font: 600 var(--fs-1)/1.2 var(--font); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.link { font-weight: 600; text-decoration: none; }
.link::after { content: " \2192"; }
[dir="rtl"] .link::after { content: " \2190"; }
.link:hover { text-decoration: underline; }


/* Disclosures (details) */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.faq { border-top: 1px solid var(--line); }
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: .9rem 0; font-weight: 600; }
.faq > summary::after { content: "+"; flex: none; width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--accent); font-size: 1.1rem; line-height: 1; }
.faq[open] > summary::after { content: "\2212"; }
.faq > p { margin: 0 0 var(--s4); color: var(--ink-2); }

/* Notices */
.notice { padding: var(--s4) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-1); color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }
.notice--info { border-color: var(--line); }
.notice--warn { border-color: var(--warning); }
.notice--warn::before { content: "\26A0\00a0"; color: var(--warning); }
.notice--error { border-color: var(--danger); color: var(--danger); font-weight: 500; }

/* 6. The demonstration: introduction, stage (selected person beside the product window), portrait
   controls, the story of the order; 7. growth and closing. Product-surface type is quieter than the page's. */
/* Intro: the restrained marketing introduction. Category + status, promise, one sentence, two actions. */
@media (max-width: 64rem) { .intro__in { grid-template-columns: minmax(0, 1fr); gap: .75rem; } }

/* Direction E demonstration: the stage (selected person beside the product window), the portrait controls,
   and the one story continuation. Product-surface typography is quieter than the page's. */
.demo { padding-top: .5rem; }
.demo__in { display: grid; gap: 1.25rem; }

/* The stage: a quiet studio ground; the person stands on it, the window rests on it. */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 0 2.5rem; align-items: end; padding: 2.25rem 2.5rem 0; border-radius: var(--r-panel) var(--r-panel) 0 0; background: linear-gradient(180deg, var(--ground-2), var(--ground)); overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: auto 0 0; height: 62%; background: radial-gradient(ellipse 60% 70% at 24% 100%, var(--ground-glow), transparent 70%); pointer-events: none; }
[dir="rtl"] .stage::before { background: radial-gradient(ellipse 60% 70% at 76% 100%, var(--ground-glow), transparent 70%); }
.stage > * { position: relative; }

/* Cast: four figures stacked in one slot; one visible. */
/* Transition: the leaving figure recedes, the arriving one steps in. Same clock as the window (below). */

/* The product window */
.win { --f: 0.92rem; align-self: end; margin-bottom: 0; background: var(--win-bg); color: var(--win-ink); border: 1px solid var(--win-line); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--win-shadow); font-size: var(--f); line-height: 1.45; overflow: hidden; }
.win__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .6rem 1.1rem; background: var(--win-bar); border-bottom: 1px solid var(--win-line); color: var(--win-ink-2); font-size: .82rem; }
.win__mark { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 5px; background: var(--win-ink); color: var(--win-bg); }
.win__mark svg { width: .9rem; height: .9rem; }
.win__crumb { font-weight: 600; color: var(--win-ink); }
.win__ref { color: var(--win-ink-2); }
.win__reflabel { color: var(--win-muted); }
.win__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-inline-start: auto; }
/* Chips: the state's text in its semantic colour, carried by a tone glyph as well; on a neutral outline. */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--win-bar); border: 1px solid var(--win-line); color: var(--win-ink-2); white-space: nowrap; }
.chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.chip--ok { color: var(--win-ok); } .chip--warn { color: var(--win-warn); } .chip--blocked { color: var(--win-blocked); }
.view { padding: 1.1rem 1.25rem 1.25rem; }
.view[hidden] { display: none !important; }
.view.is-in { animation: view-in .42s cubic-bezier(.2, .7, .2, 1) both; }
.view.is-out { animation: view-out .22s ease-in both; }
.win__views { position: relative; overflow: hidden; }
.view.is-out { position: absolute; inset-block-start: 0; inset-inline: 0; pointer-events: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes view-out { from { opacity: 1; } to { opacity: 0; } }
.view__h { margin: 0 0 .9rem; font-family: var(--font); font-weight: 600; font-size: 1.25rem; letter-spacing: -.005em; color: var(--win-ink); }
.view__front { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem 1.75rem; align-items: start; }
.view__front:has(> .surf--lines:first-child) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.surf { min-width: 0; }
.surf__t { margin: 0 0 .5rem; font-size: .78rem; font-weight: 600; color: var(--win-muted); }
.fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; }
.surf--fields:first-child .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f { min-width: 0; }
.f dt { font-size: .76rem; color: var(--win-muted); margin-bottom: .1rem; }
.f dd { margin: 0; font-weight: 500; font-size: .95rem; color: var(--win-ink); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.f dd small { display: block; font-weight: 400; font-size: .76rem; color: var(--win-muted); margin-top: .05rem; }
.f--ok dd { color: var(--win-ok); } .f--warn dd { color: var(--win-warn); } .f--blocked dd { color: var(--win-blocked); }
.f--ok dd small, .f--warn dd small, .f--blocked dd small { color: var(--win-muted); }
.fields--decision { grid-template-columns: minmax(0, 1fr); }
.lines { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lines th, .lines td { text-align: start; padding: .42rem 0; border-bottom: 1px solid var(--win-line); vertical-align: top; }
.lines th { font-size: .74rem; font-weight: 500; color: var(--win-muted); }
.lines th:nth-child(n+2), .lines td:nth-child(n+2) { text-align: end; padding-inline-start: .75rem; font-variant-numeric: tabular-nums; }
.lines--items th:nth-child(n+2), .lines--items td:nth-child(n+2), .lines--posting th:nth-child(n+2), .lines--posting td:nth-child(n+2), .lines th:nth-child(2), .lines td:nth-child(2) { white-space: nowrap; }
.lines--pick th:nth-child(3), .lines--pick td:nth-child(3), .lines--transfer th:nth-child(n+3), .lines--transfer td:nth-child(n+3) { text-align: start; }
.lines td:first-child { min-width: 8rem; }
.lines tfoot td { white-space: normal; }
.lines tfoot td { border-bottom: 0; font-weight: 600; padding-top: .5rem; }
.view__more { margin-top: .9rem; display: grid; gap: .5rem; }
.more { border-top: 1px solid var(--win-line); padding-top: .55rem; }
.more summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--win-ink-2); list-style: none; display: flex; align-items: center; gap: .4rem; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; width: .4rem; height: .4rem; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
[dir="rtl"] .more summary::before { transform: rotate(135deg); }
.more[open] summary::before { transform: rotate(45deg); }
.tl { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .84rem; display: grid; gap: .25rem; }
.tl li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .5rem; }
.tl__t { color: var(--win-muted); font-variant-numeric: tabular-nums; }
.note { margin: .4rem 0 0; font-size: .84rem; color: var(--win-ink-2); }
.aside { margin: 0; padding-top: .55rem; border-top: 1px solid var(--win-line); font-size: .82rem; color: var(--win-muted); display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.aside__t { font-weight: 600; color: var(--win-ink-2); }
.next { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin: 1.1rem 0 0; padding: .75rem .95rem; border-radius: 8px; background: var(--win-bar); border: 1px solid var(--win-line); }
.next__k { font-size: .76rem; font-weight: 600; color: var(--win-muted); }
.next__v { font-weight: 600; color: var(--win-ink); }
.next--do .next__v::after { content: " →"; color: var(--win-accent); }
[dir="rtl"] .next--do .next__v::after { content: " ←"; }
.next--wait .next__v, .next--none .next__v { font-weight: 500; color: var(--win-ink-2); }
.win__hint { margin: 0; padding: .35rem 1.25rem; font-size: .7rem; color: var(--win-muted); border-top: 1px solid var(--win-line); }

/* Portrait controls: real radios; the selected one is lit. */
.people { display: grid; gap: .75rem; padding: 1.1rem 2.5rem 1.25rem; border-radius: 0 0 var(--r-panel) var(--r-panel); background: var(--surface-2); }
.people__k { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.people__hint { font-family: var(--font); font-weight: 400; font-size: var(--fs-0); color: var(--muted); }
.people__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.person { display: flex; align-items: center; gap: .75rem; min-height: 4.25rem; padding: .5rem .8rem .5rem .55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
[dir="rtl"] .person { padding: .5rem .55rem .5rem .8rem; }
.person:hover { border-color: var(--line-strong); }
.person[aria-checked="true"] { background: var(--surface-raised); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); }
.person:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.person__thumb { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; overflow: hidden; }
.person__body { display: grid; line-height: 1.2; min-width: 0; }
.person__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.person__role { font-size: .8rem; color: var(--muted); }
.person[aria-checked="true"] .person__role { color: var(--ink-2); }
.story { margin: 1rem 0 0; padding: 0 .25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; font-size: var(--fs-0); color: var(--ink-2); }
.story__k { font-weight: 600; color: var(--muted); }

/* Motion */
@media (prefers-reduced-motion: reduce) { .fig.is-in, .fig.is-out, .view.is-in, .view.is-out { animation: none; } .person { transition: none; } }

/* Small screens: portraits first, then the person, then a work surface designed for the width. */
@media (max-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.25rem 1rem 0; }
  .stage::before { background: radial-gradient(ellipse 80% 50% at 50% 60%, var(--ground-glow), transparent 70%); }
  .win { --f: .9rem; margin-top: .75rem; border-radius: 10px 10px 0 0; }
  .win__bar { padding: .55rem .9rem; }
  .win__chips { margin-inline-start: 0; width: 100%; }
  .view { padding: .9rem 1rem 1rem; }
  .view__front, .view__front:has(> .surf--lines:first-child) { grid-template-columns: minmax(0, 1fr); }
  .lines thead { display: none; }
  .lines tr { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .1rem .9rem; padding: .5rem 0; border-bottom: 1px solid var(--win-line); }
  .lines th, .lines td { border: 0; padding: 0; text-align: start !important; white-space: normal !important; }
  .lines td:first-child { grid-column: 1 / -1; font-weight: 500; }
  .lines td:not(:first-child)::before { content: attr(data-col); display: block; font-size: .7rem; color: var(--win-muted); white-space: nowrap; }
  .lines tfoot td::before { display: none; }
  .lines tfoot tr { grid-template-columns: 1fr auto; }
  .lines td:empty { display: none; }
  .lines tfoot tr { border-bottom: 0; }
  .people { padding: 1rem 1rem 1.1rem; }
  .people__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .person { min-height: 3.6rem; padding: .4rem .6rem .4rem .45rem; gap: .55rem; }
  .person__thumb { width: 2.6rem; height: 2.6rem; }
  .person__name { font-size: 1rem; }
}


/* People as emblems: the objects of each person's work, composed on a tinted plate (no faces, no photos). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bi { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex: none; }
.emblem--sales { --tint: #c2683f; } .emblem--warehouse { --tint: #b8891c; } .emblem--manager { --tint: #34507f; } .emblem--finance { --tint: #7d7566; }
.emblem-mini { --tint: var(--accent); display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in oklab, var(--tint) 32%, var(--surface-raised)), color-mix(in oklab, var(--tint) 12%, var(--surface-raised))); border: 1px solid color-mix(in oklab, var(--tint) 40%, var(--line)); color: var(--ink); }
.emblem-mini .bi { width: 48%; height: 48%; }
.jn__ico { width: .95rem; height: .95rem; opacity: .9; }
.scene .glyph { fill: var(--ink); } .scene .glyph--accent { fill: var(--accent); }
@media (prefers-reduced-motion: reduce) { .fig.is-in .emblem__tool { animation: none; } }

/* ---- Journey (inside the window): what the order set in motion, lit per moment */
.journey { list-style: none; margin: 0; padding: .55rem 1.25rem .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; border-top: 1px solid var(--win-line); font-size: .78rem; }
.journey[hidden] { display: none !important; }
.journey__k { color: var(--win-muted); margin-inline-end: .25rem; }
.jn { display: inline-flex; align-items: center; gap: .35rem; color: var(--win-muted); }
.jn__dot { width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.jn.is-lit { color: var(--win-ink-2); font-weight: 500; }
.jn.is-lit .jn__dot { background: var(--win-accent); border-color: var(--win-accent); }
.jn.is-current { color: var(--win-ink); }
.jn.is-current .jn__dot { border-color: var(--win-accent); border-style: dashed; background: transparent; }
.jn.is-held { color: var(--win-warn); }
.jn.is-held .jn__dot { border-color: var(--win-warn); border-style: dashed; background: transparent; }
.win__when { margin-inline-start: auto; font-size: .72rem; color: var(--win-muted); }

/* ---- The story: four authored moments of the same order, one invitation */
.story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem 2.5rem; align-items: start; margin: 1.5rem 0 0; padding: 0 .25rem; }
.story__k { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.moments { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.moments::before { content: ""; position: absolute; top: .55rem; inset-inline: 0; height: 1px; background: var(--line-strong); }
.moment { position: relative; display: grid; justify-items: start; gap: .2rem; width: 100%; padding: 0 .5rem 0 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; text-align: start; cursor: pointer; }
.moment__dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--surface-1); border: 1.5px solid var(--line-strong); box-sizing: border-box; transition: background-color .2s, border-color .2s; }
.moment__label { margin-top: .35rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.moment__when { font-size: .74rem; color: var(--muted); }
.moment:hover .moment__dot { border-color: var(--ink); }
.moment[aria-current="step"] .moment__dot { background: var(--accent); border-color: var(--accent); }
.moment.is-past .moment__dot { background: var(--line-strong); border-color: var(--line-strong); }
.moment:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.story__now { display: grid; gap: .75rem; justify-items: start; }
.story__caption { margin: 0; font-size: var(--fs-1); color: var(--ink-2); text-wrap: pretty; }
.story__caption[hidden] { display: none !important; }

/* ---- Growth: the company grows; Dana's screen stays calm */
.grow { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.grow__head { max-width: 48rem; margin-bottom: 1.5rem; }
.grow__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.015em; margin: .25rem 0 .75rem; text-wrap: balance; }
.grow__lede { margin: 0; color: var(--ink-2); font-size: var(--fs-2); }
.grow__stage { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 20rem); grid-template-areas: "side scene pinned"; gap: 1.5rem 2rem; align-items: start; padding: 1.5rem; border-radius: var(--r-panel); background: linear-gradient(180deg, var(--ground-2), var(--ground)); }
.grow__side { grid-area: side; display: grid; gap: 1rem; }
.grow__steps { display: grid; gap: .5rem; }
.gstep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .05rem .7rem; align-items: start; text-align: start; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); color: var(--ink-2); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.gstep__n { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.gstep__body { display: grid; }
.gstep__k { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.gstep__sub { font-size: .78rem; color: var(--muted); }
.gstep:hover { border-color: var(--line-strong); }
.gstep[aria-checked="true"] { background: var(--surface-raised); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gstep[aria-checked="true"] .gstep__n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gstep.is-past .gstep__n { background: var(--line-strong); border-color: var(--line-strong); color: var(--bg); }
.gstep:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gains { list-style: none; margin: 0; padding: 0 .25rem; display: grid; gap: .4rem; font-size: var(--fs-1); color: var(--ink-2); }
.gains[hidden] { display: none !important; }
.gains li { position: relative; padding-inline-start: 1rem; }
.gains li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.grow__scene { grid-area: scene; min-width: 0; }
.scene { width: 100%; height: auto; display: block; }
.scene .ground { fill: var(--surface-1); stroke: var(--line); stroke-width: 1; }
.scene .grid { stroke: var(--line); stroke-width: .6; opacity: .55; }
.scene .road { fill: none; stroke: var(--surface-2); stroke-linejoin: round; stroke-linecap: round; }
.scene .wall, .scene .roof, .scene .office, .scene .quay { stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.scene .wall--l { fill: var(--surface-raised); } .scene .wall--r { fill: var(--surface-2); }
.scene .roof--front { fill: var(--line); } .scene .roof--back { fill: var(--line-strong); } .scene .ridge { stroke: var(--ink); stroke-width: .9; }
.scene .door { fill: var(--ink-2); stroke: var(--ink); stroke-width: .7; } .scene .door__line { stroke: var(--surface-1); stroke-width: .7; opacity: .55; }
.scene .window { fill: var(--surface-1); stroke: var(--ink-2); stroke-width: .6; }
.scene .office--l { fill: var(--surface-raised); } .scene .office--r { fill: var(--surface-2); } .scene .office--t { fill: var(--line); }
.scene [class*="truck"] { stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.scene .truck-box--l, .scene .truck-a-box--l { fill: var(--surface-raised); } .scene .truck-box--r, .scene .truck-a-box--r { fill: var(--surface-2); } .scene .truck-box--t, .scene .truck-a-box--t { fill: var(--line); }
.scene .truck-cab--l, .scene .truck-cab--r, .scene .truck-a-cab--l, .scene .truck-a-cab--r { fill: var(--accent); } .scene .truck-cab--t, .scene .truck-a-cab--t { fill: var(--accent-hover); }
.scene .water { fill: color-mix(in oklab, var(--info) 14%, var(--surface-1)); } .scene .wave { fill: none; stroke: var(--info); stroke-width: 1; opacity: .5; }
.scene .quay--l { fill: var(--surface-2); } .scene .quay--r { fill: var(--line); } .scene .quay--t { fill: var(--surface-raised); }
.scene .crane { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.scene .ctn { stroke: var(--ink); stroke-width: .7; stroke-linejoin: round; } .scene .ctn--a { fill: var(--accent); } .scene .ctn--b { fill: var(--ink-2); } .scene .ctn--c { fill: var(--line-strong); }
.scene .tie { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.scene .lbl { fill: var(--ink); font: 600 13px var(--font); }
.scene .lbl--sm { font: 500 11px var(--font); fill: var(--ink-2); }
.scene .lbl--halo { paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; }
.scene .flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.scene .flow--dash { stroke-dasharray: 5 5; }
.scene .card, .scene .pill { fill: var(--surface-raised); stroke: var(--line-strong); }
.scene .node { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.5; }
.scene .sheet { fill: var(--surface-raised); stroke: var(--ink); } .scene .sheet__lines { stroke: var(--line-strong); stroke-width: 1.5; }
.scene[data-enhanced] .item { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.scene[data-enhanced] .item.is-on { opacity: 1; transform: none; }
.pinned { grid-area: pinned; display: grid; gap: .5rem; align-content: start; }
.pinned__k { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.pinned__chip { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pinned__chip::before { display: none; }
.pinned__chip.is-pulse { animation: pulse .8s ease; }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
.win--mini { --f: .84rem; border-bottom: 1px solid var(--win-line); border-radius: 10px; }
.win--mini[hidden] { display: none !important; }
.win--mini .win__bar { padding: .45rem .8rem; }
.fields--mini { padding: .7rem .8rem .2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
.next--mini { margin: .5rem .8rem .8rem; padding: .55rem .7rem; }
.keeps__k { margin: .5rem 0 0; font-size: .78rem; font-weight: 600; color: var(--muted); }
.keeps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.keeps li { padding: .15rem .6rem; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--line); font-size: .78rem; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .scene .item { transition: none; } .pinned__chip.is-pulse { animation: none; } }
@media (max-width: 64rem) {
  .grow__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "side pinned" "scene scene"; }
}
@media (max-width: 60rem) {
  .story { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 1rem; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .5rem; }
  .moments::before { display: none; }
  .moment { grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: center; }
  .moment__label { margin-top: 0; grid-column: 2; }
  .moment__when { grid-column: 2; }
  .moment__dot { grid-row: 1 / span 2; }
  .journey { padding: .5rem 1rem .55rem; gap: .3rem .8rem; }
  .grow__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "scene" "pinned"; padding: 1rem; gap: 1rem; }
}

/* 7. Closing */
.closing { padding: clamp(3rem, 2rem + 4vw, 6rem) 0; border-top: 1px solid var(--line); margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.closing__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
.closing h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.01em; max-width: 20ch; text-wrap: balance; }
.closing__lede { color: var(--ink-2); font-size: var(--fs-2); max-width: 46ch; }
@media (max-width: 52rem) { .closing__in { grid-template-columns: minmax(0, 1fr); } }

/* ---- Layout, revised: the story strip leads; the selector is a sticky sidebar beside the work ---- */
.demo__in { gap: 1rem; }
.story { margin: 0; padding: .25rem .25rem 0; }
.stage { grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); gap: 0 2rem; align-items: start; padding: 1.5rem 1.75rem 1.75rem; border-radius: var(--r-panel); }
.stage::before { height: 100%; background: radial-gradient(ellipse 34% 46% at 14% 34%, var(--ground-glow), transparent 70%); }
[dir="rtl"] .stage::before { background: radial-gradient(ellipse 34% 46% at 86% 34%, var(--ground-glow), transparent 70%); }
.side { position: sticky; top: 4.75rem; display: grid; gap: 1.1rem; align-content: start; }
.people { padding: 0; border-radius: 0; background: transparent; gap: .5rem; }
.people__k { font-size: .95rem; }
.people__row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.person { min-height: 3.3rem; padding: .4rem .7rem .4rem .45rem; gap: .6rem; }
[dir="rtl"] .person { padding: .4rem .45rem .4rem .7rem; }
.person__thumb { width: 2.5rem; height: 2.5rem; }
.person__name { font-size: 1.02rem; }
.people__hint { margin: .1rem 0 0; font-size: .78rem; color: var(--muted); }
.win { align-self: start; border-bottom: 1px solid var(--win-line); border-radius: 12px; }
.win__hint { border-radius: 0 0 12px 12px; }
.lines--pick th:nth-child(2), .lines--pick td:nth-child(2), .lines--transfer th:nth-child(2), .lines--transfer td:nth-child(2), .lines--transfer th:nth-child(3), .lines--transfer td:nth-child(3) { text-align: start; white-space: normal; }
.lines--pick th:nth-child(n+3), .lines--pick td:nth-child(n+3), .lines--transfer th:nth-child(4), .lines--transfer td:nth-child(4) { text-align: end; white-space: nowrap; }
@media (max-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 1fr); padding: 1rem; border-radius: var(--r-panel); }
  .side { position: static; gap: .75rem; }
  .people__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win { margin-top: .5rem; }
}

/* ---- 95+ pass: first viewport, the selector's "now" line, person-tinted stage, moving route ---- */
.demo { padding-top: 0; }
.story { padding-top: 0; }
.story__k { font-size: 1rem; }
.person__now { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; line-height: 1.25; }
.person[aria-checked="true"] .person__now { color: var(--ink-2); }
.person__body { align-content: start; }
.demo[data-person="sales"] { --tint: #c2683f; } .demo[data-person="warehouse"] { --tint: #b8891c; } .demo[data-person="manager"] { --tint: #34507f; } .demo[data-person="finance"] { --tint: #7d7566; }
.stage::before { background: radial-gradient(ellipse 34% 46% at 14% 34%, color-mix(in oklab, var(--tint, var(--accent)) 22%, var(--ground-glow)), transparent 70%); transition: background .6s ease; }
[dir="rtl"] .stage::before { background: radial-gradient(ellipse 34% 46% at 86% 34%, color-mix(in oklab, var(--tint, var(--accent)) 22%, var(--ground-glow)), transparent 70%); }
.scene .item.is-on .flow--dash { animation: route 1.6s linear infinite; }
@keyframes route { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .scene .item.is-on .flow--dash { animation: none; } .stage::before { transition: none; } }
@media (max-width: 60rem) { .person__now { display: none; } }

/* 8. Footer, pages and forms ---------------------------------------------- */
/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s6); font-size: var(--fs-1); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s7); }
.site-footer__brand p { color: var(--ink-2); max-width: 32rem; margin: var(--s4) 0 0; }
.site-footer__status { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: var(--fs-0); }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.site-footer nav a { display: inline-block; padding: .35rem 0; color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-0); }
.site-footer__legal p { margin: 0; }
@media (max-width: 40rem) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

.page { padding: clamp(3rem, 2.5rem + 3vw, 5rem) 0 clamp(4rem, 3rem + 4vw, 7rem); max-width: var(--max-text); }
.page--wide { max-width: 52rem; }
.page__head { margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.page__head h1 { font-size: var(--fs-6); margin: var(--s3) 0 var(--s4); }
.page__head .status { margin-bottom: var(--s4); }
.page__limit { margin: var(--s4) 0 0; color: var(--muted); }
.page__foot { margin-top: var(--s7); color: var(--muted); }
.page__faq { margin-top: var(--s8); }
.page__faq h2 { font-size: var(--fs-4); margin-bottom: var(--s3); }
.prose h2 { font-size: var(--fs-4); margin: var(--s7) 0 var(--s3); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }
.principles { list-style: none; margin: 0; padding: 0; counter-reset: principle; }
.principles li { counter-increment: principle; padding: var(--s5) 0; border-top: 1px solid var(--line); }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principles h2 { font-size: var(--fs-4); margin-bottom: var(--s3); display: flex; gap: var(--s3); align-items: baseline; }
.principles h2::before { content: counter(principle, decimal-leading-zero); color: var(--accent); font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.principles p { color: var(--ink-2); margin: 0; }
.page__aside { margin-top: var(--s7); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); }
.page__aside h2 { font-size: var(--fs-3); margin: 0 0 var(--s3); }
.page__aside p { margin: 0; color: var(--ink-2); }

.intake-inactive { padding: var(--s5); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-1); }
.intake-inactive h2 { font-size: var(--fs-3); margin-bottom: var(--s3); }
.intake-inactive p { color: var(--ink-2); }
.intake-inactive__programme { margin: var(--s4) 0 0; padding: var(--s4); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-1); }
.intake-inactive__programme strong { display: block; color: var(--ink); margin-bottom: .15rem; }

.intake { max-width: 40rem; }
.intake__fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.intake__alert, .intake__status { margin-bottom: var(--s5); }
.field { margin-bottom: var(--s5); }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-raised); color: var(--ink); font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field__error { margin: .4rem 0 0; color: var(--danger); font-size: var(--fs-1); font-weight: 500; }
.field__error::before { content: "\2716\00a0"; font-size: .8em; }
.field--hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.intake__notice { margin: var(--s5) 0; padding: var(--s4); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-1); color: var(--ink-2); }
.intake__challenge { min-height: 66px; margin: var(--s4) 0; }
.intake .actions { margin-top: var(--s4); }
.intake__done { padding: var(--s5); border: 1px solid var(--success); border-radius: var(--radius-lg); background: var(--surface-1); }
.intake__done h2 { font-size: var(--fs-4); color: var(--success); margin-bottom: var(--s3); }
.intake__done p { margin: 0; color: var(--ink); }
.intake__done .ref { font-family: var(--font-mono); font-weight: 600; }

/* 9. Arabic (html[lang="ar"]) --------------------------------------------------
   IBM Plex Sans Arabic; no tracking (letter-spacing breaks joining), taller line-height, slightly
   larger body. Latin runs inside Arabic pages (IDs, amounts, the wordmark) render in the same family. */
html[lang="ar"] {
  --font: "IBM Plex Sans Arabic", "Segoe UI", "SF Arabic", "Noto Sans Arabic", Tahoma, Arial, system-ui, sans-serif;
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --fs-2: 1.125rem;
  --fs-6: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --lh: 1.8;
  --lh-tight: 1.35;
  --track: 0;
}
html[lang="ar"] .lede, html[lang="ar"] .intro__sentence, html[lang="ar"] .grow__lede { line-height: 1.7; }
html[lang="ar"] .eyebrow, html[lang="ar"] .status, html[lang="ar"] .lines th, html[lang="ar"] .brand, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.35; font-weight: 700; }
html[lang="ar"] .win { line-height: 1.6; }
html[lang="ar"] .brand span[lang="en"], html[lang="ar"] .lang-switch { font-family: var(--font); }

/* 10. Motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Review round 2026-09-14: window chrome per person, state carried by shape as well as colour, the
   responsibility model on the card, receded surfaces, honesty and depth blocks, physical number alignment,
   the map's geometry in Arabic, anchors below the header, a no-script floor ---- */
.win__note { margin: 0; padding: .4rem 1.1rem; font-size: .74rem; color: var(--win-muted); background: var(--win-bar); border-bottom: 1px solid var(--win-line); }
.win__id { display: contents; } .win__id[hidden] { display: none; }
.chip__i { width: .8em; height: .8em; flex: none; }
.chip--ok::before, .chip--warn::before, .chip--blocked::before { display: none; }
.f dd .tone { width: .85em; height: .85em; vertical-align: -.08em; margin-inline-end: .3em; }
.people__hint--auth { margin-top: .4rem; color: var(--ink-2); }
.surf--mid { border-top: 1px solid var(--win-line); padding-top: .6rem; }
.surf--mid .surf__t { font-size: .78rem; color: var(--win-muted); }
.surf--mid .lines, .surf--mid .fields { font-size: .84rem; }
.surf--mid .f dd { font-size: .88rem; }
.view__hidden { margin: .8rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-size: .72rem; color: var(--win-muted); }
.view__hidden-k { margin-inline-end: .2rem; }
.hid { padding: .05rem .5rem; border: 1px dashed var(--win-line); border-radius: 999px; }
.jn.is-current.is-held .jn__dot { border-color: var(--win-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--win-warn) 35%, transparent); }
.unshown { margin: 1.5rem auto 0; max-width: 62rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
.unshown h3 { margin: 0 0 .35rem; font-family: var(--font); font-size: var(--fs-1); font-weight: 600; }
.unshown p { margin: 0; color: var(--ink-2); font-size: var(--fs-0); }
.grow__claim { margin: .75rem auto 0; max-width: 34em; text-align: center; color: var(--ink-2); font-size: var(--fs-1); text-wrap: balance; }
.depth { margin: 2.25rem auto 0; max-width: 62rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.depth__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.01em; text-wrap: balance; }
.depth__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem 1.5rem; margin: 1rem 0 0; }
.depth__layer { margin: 0; }
.depth__layer dt { font-weight: 600; color: var(--ink); }
.depth__layer dd { margin: .25rem 0 0; color: var(--ink-2); font-size: var(--fs-0); }
.depth__ex { display: block; margin-top: .25rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.scope { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 62rem; }
.scope__t { margin: 0 0 .35rem; font-family: var(--font); font-size: var(--fs-1); font-weight: 600; }
.scope p { margin: 0; color: var(--ink-2); font-size: var(--fs-0); }
.lines th.num, .lines td.num { text-align: right; }
[dir="rtl"] .scene text[text-anchor="start"], [dir="rtl"] .scene text:not([text-anchor]) { text-anchor: end; }
#main, #demo, #grow, #fit, #partners { scroll-margin-top: 5.25rem; }
@media (max-width: 52rem) { .site-header { position: static; } #main, #demo, #grow, #fit, #partners { scroll-margin-top: 1rem; } }
@media (max-width: 60rem) { .lines td.num { text-align: right !important; } }
[dir="rtl"] .more summary::before { transform: rotate(135deg); }
[dir="rtl"] .more[open] summary::before { transform: rotate(45deg); }

/* ---- The stage as one panel: the story band on top, the selector beside the window; the selected card
   carries responsibility and authority; the journey's sentence; any number of moments ---- */
.stage { grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); grid-template-areas: "story story" "side win"; gap: 0 2rem; align-items: start; padding: 1.35rem 1.75rem 1.75rem; }
.stage > .story { grid-area: story; margin: 0 0 1.35rem; padding: 0 0 1.15rem; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .45rem 2.25rem; align-items: center; }
.stage > .story .story__k { grid-column: 1 / -1; margin: 0 0 .1rem; font-family: var(--font); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .stage > .story .story__k { letter-spacing: 0; }
.moments { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.moment__label { font-size: .95rem; }
.story__now { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem 1.25rem; }
.stage > .side { grid-area: side; }
.stage > .win { grid-area: win; }
.win--mini { grid-area: auto; }
.keeps { align-items: flex-start; }
.person { align-items: flex-start; }
.person__thumb { margin-top: .1rem; }
.people__hint { font-size: .74rem; }
.stage::before { background: radial-gradient(ellipse 30% 42% at 10% 55%, color-mix(in oklab, var(--tint, var(--accent)) 20%, var(--ground-glow)), transparent 70%); }
[dir="rtl"] .stage::before { background: radial-gradient(ellipse 30% 42% at 90% 55%, color-mix(in oklab, var(--tint, var(--accent)) 20%, var(--ground-glow)), transparent 70%); }
.journey__note { margin: 0; padding: 0 1.25rem .6rem; font-size: .74rem; color: var(--win-muted); }
@media (max-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "story" "side" "win"; }
  .stage > .story { grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; padding-bottom: .9rem; }
  .moments { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .moment__label { font-size: .82rem; }
  .story__now { grid-template-columns: minmax(0, 1fr); }
}
/* seven journey nodes on one line at the window's width; five moments as a compact list on phones; one-column selector on phones */
.journey { gap: .3rem .8rem; font-size: .76rem; padding-inline: 1.1rem; }
.jn { gap: .3rem; }
@media (max-width: 60rem) {
  .moments { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .75rem; margin-top: .35rem; }
  .moments::before { display: none; }
  .moment { grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: center; padding: 0; }
  .moment__label { margin-top: 0; grid-column: 2; font-size: .9rem; }
  .moment__when { grid-column: 2; }
  .moment__dot { grid-row: 1 / span 2; }
  .people__row { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .person__now { display: block; }
}

/* ---- round 2: the hero composed top-aligned with one quiet link; the story band stacked; the invitation as an
   outline control so one primary action remains per screen; a per-moment note; the journey's label on its own
   line; the depth list names who; a compact phone selector ---- */
.stage > .story { grid-template-columns: minmax(0, 1fr); gap: .35rem; align-items: start; }
.story__now { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-top: 1.1rem; }
.story__caption { max-width: 34em; }
.story__invite { background: transparent; color: var(--accent); border-color: var(--accent); }
.story__invite:hover { background: var(--accent); color: var(--on-accent); }
.story__invite::after { content: "→"; margin-inline-start: .45em; }
[dir="rtl"] .story__invite::after { content: "←"; }
.win__note[hidden] { display: none !important; }
.journey__k { flex-basis: 100%; margin: 0 0 .1rem; }
.depth__who { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
[dir="rtl"] .depth__who { letter-spacing: 0; }
@media (max-width: 60rem) {
  .story__now { margin-top: .75rem; }
  .people__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .person { flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: .55rem .25rem .5rem; min-height: 0; }
  .person__thumb { margin-top: 0; }
  .person__body { justify-items: center; }
  .person__name { font-size: .92rem; }
  .person__role { font-size: .7rem; }
  .person__now { display: none !important; }
}

/* cards never change height; the rail ends at the last dot; dates never wrap; the header is static where it wraps */
.person { transition: border-color .15s, box-shadow .15s; }
.moments::before { display: none; }
.moment::after { content: ""; position: absolute; top: .55rem; inset-inline: 1.3rem -.25rem; height: 1px; background: var(--line-strong); }
.moments li:last-child .moment::after { display: none; }
.moment__when { white-space: nowrap; font-size: .72rem; }
@media (max-width: 56.25rem) { .site-header { position: static; } }
@media (max-width: 60rem) { .moment::after { display: none; } .moment__when { white-space: normal; } }

/* round 3: a static responsibility-and-authority list (never moves); long values span the row; the product higher
   in the first viewport on smaller screens; the phone timeline stays one column with a vertical rail */
.people__auth { margin: .4rem 0 0; display: grid; gap: .12rem; font-size: .72rem; line-height: 1.35; color: var(--muted); }
.pauth { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .5rem; margin: 0; }
.pauth dt { font-weight: 600; color: var(--ink-2); }
.pauth dd { margin: 0; text-wrap: pretty; }
.pauth__a { color: var(--ink-2); }
.f--wide { grid-column: 1 / -1; }
@media (max-width: 72rem) {
  .stage { padding-top: 1rem; }
  .stage > .story { margin-bottom: .9rem; padding-bottom: .8rem; }
  .story__now { margin-top: .6rem; }
}
@media (max-width: 60rem) { .people__auth { font-size: .7rem; } }
@media (max-width: 30rem) {
  .moments { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .moment { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .55rem; align-items: center; padding: 0; }
  .moment__label { margin-top: 0; }
  .moment__when { white-space: nowrap; }
  .moment::after { display: block; top: 1.35rem; bottom: -.7rem; inset-inline: .55rem auto; width: 1px; height: auto; }
  .moments li:last-child .moment::after { display: none; }
}

/* round 3, engineering: painted contrast, the wide container, the four tints, the map's painted label size, the
   phone order (story, people, window, notes), narrow money fields, the header band */
.people__hint { color: var(--ink-2); }
.keeps__k { color: var(--ink-2); }
.container--wide { width: min(100% - 2.75rem, var(--max-wide)); max-width: none; }
.emblem-mini.emblem--sales { --tint: #c2683f; } .emblem-mini.emblem--warehouse { --tint: #b8891c; } .emblem-mini.emblem--manager { --tint: #34507f; } .emblem-mini.emblem--finance { --tint: #7d7566; }
.scene .lbl { font-size: 15px; }
.scene .lbl--sm { font-size: 13px; }
.side { gap: .7rem; }
.people__auth { margin-top: 0; }
@media (max-width: 64rem) { .scene .lbl { font-size: 18px; } .scene .lbl--sm { font-size: 16px; } }
@media (max-width: 60rem) {
  .stage { grid-template-areas: none; }
  .stage > .story, .stage > .win { grid-area: auto; }
  .side { display: contents; }
  .stage > .story { order: 1; } .people { order: 2; } .stage > .win { order: 3; } .people__auth { order: 4; margin-top: 1rem; } .people__hint { order: 5; }
}
@media (max-width: 30rem) {
  .story__caption { font-size: .95rem; }
  .moments { gap: .3rem; }
  .moment__label { font-size: .92rem; }
  .theme__select, .lang-switch { min-height: 2rem; padding: .2rem .45rem; font-size: .78rem; }
  .scene .lbl { font-size: 24px; } .scene .lbl--sm { font-size: 21px; }
}
@media (max-width: 24rem) { .fields, .fields--mini { grid-template-columns: minmax(0, 1fr); } .f dd { overflow-wrap: normal; } }

/* ============================================================================================
   Routes added for the master directive: the lighter homepage, the three story pages and the
   distributor page. Organised by component, using the existing tokens; nothing here redefines a
   token or reaches into the product-window internals.
   ============================================================================================ */

/* ---- shared page furniture ---------------------------------------------------------------- */
.page__intro { padding: var(--s7) 0 var(--s5); }
.page__intro-in { max-width: 52rem; }
.page__intro h1 { margin: .35rem 0 var(--s4); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.08; letter-spacing: var(--track); text-wrap: balance; }
.page__disclosure { margin: var(--s4) 0 0; padding: .55rem .8rem; border-inline-start: 3px solid var(--line-strong); background: var(--surface-1); color: var(--ink-2); font-size: var(--fs-1); border-radius: 0 var(--radius) var(--radius) 0; text-wrap: pretty; }
[dir="rtl"] .page__disclosure { border-radius: var(--radius) 0 0 var(--radius); }
.page__caution { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--fs-1); text-wrap: pretty; }
.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: var(--s5) 0 0; }

/* ---- homepage hero: one composition of copy and one real work surface ---------------------- */
.hero { padding: var(--s6) 0 var(--s7); }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) var(--s7); align-items: center; }
.hero__eyebrow { margin: 0 0 var(--s3); color: var(--accent); font-size: var(--fs-0); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
[dir="rtl"] .hero__eyebrow { letter-spacing: 0; }
.hero h1 { margin: 0 0 var(--s4); font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); font-weight: 700; line-height: 1.06; letter-spacing: var(--track); text-wrap: balance; }
[dir="rtl"] .hero h1 { line-height: 1.3; letter-spacing: 0; }
.hero__lede { margin: 0 0 var(--s4); font-size: var(--fs-2); line-height: var(--lh); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.hero__status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 var(--s5); color: var(--muted); font-size: var(--fs-1); }
.hero__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0; }
.hero__sample { margin: 0; display: grid; gap: var(--s3); }
.hero__caption { font-size: var(--fs-1); color: var(--ink-2); text-wrap: pretty; }
.hero__caption-note { display: block; margin-top: .2rem; color: var(--muted); font-size: var(--fs-0); }

/* the sample is the same window component, sized for a marketing composition rather than a story */
.win--sample { --f: .95rem; align-self: start; border-bottom: 1px solid var(--win-line); border-radius: var(--r-panel); overflow: hidden; }
.win__body { padding: var(--s4) var(--s5) var(--s5); }
.win__h { margin: 0 0 var(--s4); font-size: 1.15rem; font-weight: 600; color: var(--win-ink); }
.win__ref--own { margin: 0 0 var(--s3); color: var(--win-ink-2); font-size: var(--fs-1); font-weight: 500; }
.win--sample .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.win--sample .next { margin-top: var(--s4); }
.win--exception .incident__dl { margin: 0; }

/* ---- alternating explanation bands --------------------------------------------------------- */
.band { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.band--alt { background: var(--surface-1); }
.band__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) var(--s7); align-items: start; }
.band__in--three { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.band h2 { margin: 0 0 var(--s4); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: var(--track); text-wrap: balance; }
[dir="rtl"] .band h2 { letter-spacing: 0; line-height: 1.35; }
.band__lede { margin: 0 0 var(--s4); color: var(--ink-2); font-size: var(--fs-2); line-height: var(--lh); text-wrap: pretty; }
.band__cta { margin: 0; }

/* ---- four responsibilities ----------------------------------------------------------------- */
.roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.role { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-panel); }
.role__thumb { width: 2.5rem; height: 2.5rem; border-radius: 8px; flex: none; }
.role__body { display: grid; gap: .1rem; min-width: 0; }
.role__name { font-weight: 600; font-size: var(--fs-2); color: var(--ink); }
.role__role { font-size: var(--fs-0); color: var(--accent); font-weight: 600; }
.role__resp { margin-top: .25rem; font-size: var(--fs-1); color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }

/* ---- what changes / what stays -------------------------------------------------------------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.compare__col { padding: var(--s4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-panel); }
.compare__k { margin: 0 0 var(--s3); font-size: var(--fs-0); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .compare__k { letter-spacing: 0; }
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--fs-1); line-height: 1.5; color: var(--ink-2); }
.compare__list li { padding-inline-start: 1.35rem; position: relative; text-wrap: pretty; }
.compare__list li::before { position: absolute; inset-inline-start: 0; top: 0; font-weight: 700; }
.compare__list--add li::before { content: "+"; color: var(--accent); }
.compare__list--keep li::before { content: "="; color: var(--ok); }

/* ---- operating loops ------------------------------------------------------------------------ */
.loops { display: grid; gap: var(--s4); }
.loop { padding: var(--s4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-panel); }
.loop--planned { background: transparent; border-style: dashed; }
.loop__k { margin: 0 0 var(--s3); font-size: var(--fs-0); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .loop__k { letter-spacing: 0; }
.loop__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .35rem; }
.loop__step { display: inline-flex; align-items: center; padding: .4rem .7rem; background: var(--surface-2); border-radius: 999px; font-size: var(--fs-1); color: var(--ink-2); }
.loop__step + .loop__step::before { content: "→"; margin-inline-end: .5rem; color: var(--line-strong); }
[dir="rtl"] .loop__step + .loop__step::before { content: "←"; }
.loop__steps--planned .loop__step { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }
.loop__note { margin: var(--s3) 0 0; font-size: var(--fs-0); color: var(--muted); }

/* ---- three commitments ----------------------------------------------------------------------- */
.whys { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.why { margin: 0; padding-top: var(--s3); border-top: 2px solid var(--accent); }
.why dt { margin: 0 0 .4rem; font-weight: 600; font-size: var(--fs-2); color: var(--ink); }
.why dd { margin: 0; font-size: var(--fs-1); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---- where Makoon stands ---------------------------------------------------------------------- */
.stand { margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.stand__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.stand__row dt { font-size: var(--fs-0); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .stand__row dt { letter-spacing: 0; }
.stand__row dd { margin: 0; font-size: var(--fs-1); color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }

/* ---- story page: the four narrative beats ------------------------------------------------------ */
.story-copy { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.story-copy h2 { margin: 0 0 var(--s5); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.beats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); counter-reset: beat; }
.beat { counter-increment: beat; padding-top: var(--s3); border-top: 1px solid var(--line-strong); scroll-margin-top: 6rem; }
.beat h3 { margin: 0 0 .5rem; font-size: var(--fs-3); line-height: 1.3; text-wrap: balance; }
.beat h3::before { content: counter(beat) ". "; color: var(--accent); font-variant-numeric: tabular-nums; }
.beat p { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.story-copy__end { margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 2px solid var(--accent); font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.45; color: var(--ink); text-wrap: pretty; }

/* ---- growth page: the three business conditions -------------------------------------------------- */
.stage--later { grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); grid-template-areas: none; }
.later { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.later h2 { margin: 0 0 var(--s3); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* ---- exceptions page ------------------------------------------------------------------------------ */
.pattern { padding: var(--s5) 0 0; }
.pattern__t { margin: 0 0 var(--s3); font-size: var(--fs-1); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .pattern__t { letter-spacing: 0; }
.pattern__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .35rem; counter-reset: step; }
.pattern__list li { counter-increment: step; display: inline-flex; align-items: center; padding: .4rem .8rem; background: var(--surface-2); border-radius: 999px; font-size: var(--fs-1); color: var(--ink-2); }
.pattern__list li::before { content: counter(step); margin-inline-end: .5rem; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.incidents { padding: var(--s6) 0 var(--s7); }
.incident { margin: 0 0 var(--s6); scroll-margin-top: 6rem; }
.incident:last-of-type { margin-bottom: 0; }
.incident__win { background: var(--win-bg); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); overflow: hidden; --f: .95rem; }
.incident__body { padding: var(--s4) var(--s5) var(--s5); }
.incident__t { margin: 0 0 var(--s4); font-size: var(--fs-3); line-height: 1.3; color: var(--win-ink); text-wrap: balance; }
.incident__dl { margin: 0; display: grid; gap: var(--s3); }
.incident__row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.incident__row dt { font-size: var(--fs-0); font-weight: 600; color: var(--win-muted); }
.incident__row dd { margin: 0; font-size: var(--fs-1); line-height: 1.55; color: var(--win-ink-2); text-wrap: pretty; }
.incident__row--next dd { font-weight: 500; color: var(--win-ink); }
.incident__row--next dt { color: var(--win-accent); }
.incident__note { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--win-line); font-size: var(--fs-0); color: var(--win-muted); text-wrap: pretty; }

/* ---- distributor page ------------------------------------------------------------------------------ */
.opday, .problems, .region { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.opday h2, .problems h2, .region h2 { margin: 0 0 var(--s4); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.opday .lede, .region .lede { margin: 0 0 var(--s5); }
.opday .loops { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.problems__list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.problem { margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line-strong); }
.problem dt { margin: 0 0 .35rem; font-weight: 600; font-size: var(--fs-2); color: var(--ink); text-wrap: balance; }
.problem dd { margin: 0; font-size: var(--fs-1); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.region__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.region__item { padding: var(--s4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-panel); }
.region__k { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--s3); margin: 0 0 .35rem; font-weight: 600; font-size: var(--fs-2); }
.region__v { margin: 0; font-size: var(--fs-1); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.tag { display: inline-flex; align-items: center; padding: .15rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-0); font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ---- responsive ------------------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .hero__in, .band__in, .band__in--three { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .stagelist, .problems__list, .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beats { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .stage--later { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .hero { padding: var(--s5) 0 var(--s6); }
  .band, .story-copy, .opday, .problems, .region, .incidents, .stages, .later { padding: var(--s6) 0; }
  .roles, .compare, .stagelist, .problems__list, .whys, .opday .loops { grid-template-columns: minmax(0, 1fr); }
  .incident__row, .stand__row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .win--sample .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
}
@media (max-width: 30rem) {
  .win--sample .fields { grid-template-columns: minmax(0, 1fr); }
  .page__intro { padding: var(--s5) 0 var(--s4); }
  .loop__step { font-size: var(--fs-0); }
}
.later__when { font-size: var(--fs-1); font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ---- header navigation disclosure -----------------------------------------------------------
   Desktop: the summary is not shown and the details is a transparent wrapper, so the header is one
   row. Phones: the script closes it, the summary becomes a named button, and the native element
   handles toggling, keyboard and focus. With no script the menu simply stays open. */
.site-nav__disclosure { display: contents; }
.site-nav__toggle { display: none; }

/* ---- hero refinements -------------------------------------------------------------------------
   The headline is two sentences with a deliberate break between them; letting the first one wrap as
   well produces four ragged lines. Give the copy column equal width at desktop and cap the size so
   each sentence holds its own line. The status dot aligns to the first line rather than floating
   beside a two-line block. */
@media (min-width: 64.0625rem) {
  .hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s5) var(--s6); }
  .hero h1 { font-size: clamp(2.25rem, 1.4rem + 2.1vw, 3.375rem); }
}
.hero__status { align-items: flex-start; }
.hero__dot { margin-top: .5em; }
.pinned__badge { margin: .1rem 0 .5rem; font-size: var(--fs-0); color: var(--muted); }

/* Contrast, measured against the pixels actually painted over the stage's gradient rather than against an
   ancestor's background-color: the authority list read 4.03:1 light and 3.06:1 dark on --muted. The list is
   substantive content, not a whisper, so it takes the body's secondary ink. */
.people__auth { color: var(--ink-2); }
.pauth dd { color: var(--ink-2); }
.pauth dt, .pauth__a { color: var(--ink); }

/* ---- reading measure -------------------------------------------------------------------------
   Measured, not guessed: the three-column card grids squeezed their prose to 27-40 characters a
   line, and several paragraphs ran to 83-103. The directive's reading target is 60-72. Two columns
   give the card prose room; a ch-based cap stops the wide ones. Nothing is added here — the grids
   get simpler and the paragraphs get a ceiling. */
.whys, .problems__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
/* the exception card's label column was wide enough to squeeze its own answers */
.win--exception .incident__row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
@media (max-width: 64rem) { .whys, .problems__list { grid-template-columns: minmax(0, 1fr); } }

/* The last two grids read better as rows than as columns: a one-sentence definition in a 330px column wraps at
   36 characters, which is a list of fragments rather than prose. Term beside definition gives it a real measure
   and takes a column of machinery out of the page. */
.whys { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.why { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s3) var(--s5); align-items: baseline; padding-top: var(--s3); }
.why dt { margin: 0; }
@media (max-width: 64rem) {
  .why { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .stagecard__dl { grid-template-columns: minmax(0, 1fr); }
  .stagecard__dl dt, .stagecard__dl dd { grid-column: 1; }
}

/* The previous attempt at the stage cards nested a two-column list inside a narrow column and squeezed the
   prose to 17 characters. The third column carries the whole list, stacked, with a cap that gives it a real
   measure. Measured after, not assumed. */

/* The stage card has two children, not three: the number and the body. The earlier three-column rule put the
   body in a 320px middle column and left a 770px column empty, which is what squeezed the list. Also: `ch` is
   the width of a zero, which runs wider than this font's average character, so a 62ch cap measured ~83
   characters. These caps are set from measured characters per line, not from the nominal unit. */

/* ---- three measured UI defects ---------------------------------------------------------------
   1. The growth diagram is drawn in a 760-unit viewBox. At a 390px viewport it renders 314px wide,
      so its 21px labels paint at 8.7px and at 320px they paint at 6.7px. Scaling the authored size
      further would distort the drawing. The directive allows a phone to replace the diagram with
      the list beside it, which is already on the page — so below 48rem the drawing steps out and
      the stage list and the pinned screen carry the section. Less on a phone, not more.
   2. The chapter rail marked the current moment with a 14px dot and nothing else: same colour,
      same weight, on a 1340px timeline. The label now carries the state too.
   3. The header was not monotonic: 69px at 960+, but 92px between 844 and 900, because five links
      plus the brand and the controls do not fit before they wrap. The compact menu now covers up
      to 60rem, so the header only ever has one row or the disclosed one. */
@media (max-width: 48rem) {
  .grow__scene { display: none; }
}
.moment[aria-current="step"] .moment__label { color: var(--accent); font-weight: 700; }
.moment.is-past .moment__label { color: var(--muted); }
@media (max-width: 60rem) {
  .site-header__inner { flex-wrap: wrap; column-gap: var(--s4); row-gap: 0; min-height: 0; padding-top: .6rem; }
  .site-header__tools { margin-inline-start: auto; }
  .site-nav { order: 3; flex-basis: 100%; }
  .site-nav ul { gap: 0 var(--s4); }
  .site-nav li > a:not(.btn) { padding: .6rem 0 .75rem; font-size: var(--fs-0); }
  .site-nav__disclosure { display: block; flex-basis: 100%; }
  .site-nav__toggle { display: inline-flex; }
}

/* One definition of the collapsed header, at one breakpoint. The wordmark steps down with it, so the collapsed
   header lands inside the 64-80px starting specification instead of 84, and the disclosure keeps a 36px target
   rather than the 27px it had when a second block was not applying. */
@media (max-width: 60rem) {
  .brand { font-size: 1.25rem; }
  .brand svg { width: 1.25rem; height: 1.25rem; }
  .site-nav__toggle { min-height: 2.25rem; }
  .site-header__inner { padding-top: .45rem; padding-bottom: .1rem; }
}
.page__updated { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-0); color: var(--muted); }

/* Full-width stage rows left half the card empty. The body becomes two columns: the condition on the left, the
   two answers beside it, which uses the width and keeps each answer at a readable measure. */
@media (max-width: 64rem) {
  .stagecard__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .stagecard__body > h3, .stagecard__sub, .stagecard__dl { grid-column: 1; grid-row: auto; }
  .stagecard__dl { grid-template-columns: minmax(0, 1fr); }
  .stagecard__dl dt, .stagecard__dl dd { grid-column: 1; }
}

/* Side by side, the selling loop wrapped and put an arrow at the start of a line. Each loop on its own row
   fits its whole chain, and the two boxes stop being unequal heights for no reason. */
.opday .loops { grid-template-columns: minmax(0, 1fr); }
.opday .loop { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--s3) var(--s5); align-items: center; }
.opday .loop__k { margin: 0; }
.opday .loop__note { grid-column: 2; margin: 0; }
@media (max-width: 48rem) { .opday .loop { grid-template-columns: minmax(0, 1fr); } .opday .loop__note { grid-column: 1; } }

/* ---- reflow: 320px wide with text at 200% ------------------------------------------------------
   WCAG 1.4.10. Measured at a 320px viewport with the root font doubled, which is what a browser's
   text-size setting does: seven of nine routes forced a horizontal scroll, the growth page by 155px.
   Two causes, and both were decoration rather than structure.

   The skip link was parked at inset-inline-start: -999px. In English that is off the left, which no
   browser scrolls to reach; in Arabic the logical property maps to the right, so every Arabic page was
   999px wider than its viewport and overflowed by 49px. It now hides by translation instead, which has
   no side and no width.

   The rest was `white-space: nowrap` held for looks. Nothing below needs to be on one line more than it
   needs to be readable at 320px, so at narrow widths they wrap. The query is in rem deliberately: rem
   media queries track the text-size setting, so this engages exactly when the text is large enough to
   need it, rather than at a fixed pixel width. */
.skip { inset-inline-start: 0; transform: translateY(-200%); transition: transform .12s; }
.skip:focus { transform: none; }

/* A long word must break rather than push the page wider than the screen. At 320px with the text
   doubled the Arabic h1 wanted 270px inside a 232px column. */
h1, h2, h3, h4, p, dd, dt, li, figcaption, a, summary, td, th, .chip { overflow-wrap: break-word; }

@media (max-width: 34rem) {
  .chip, .moment__when, .win__ref, .win__crumb, .f__v, .gstep__k, .gstep__sub { white-space: normal; }
  .pinned__k, .journey { flex-wrap: wrap; }
  .chip { max-width: 100%; }
  /* Every multi-column grid becomes one column. These already collapse at narrow PIXEL widths; this
     query is in rem so it also engages when the viewport is wide but the text is large. */
  .roles, .whys, .problems__list, .compare, .stagelist, .opday__grid, .region, .loops { grid-template-columns: minmax(0, 1fr); }
  /* The header's tools - the language link and the theme select - are `flex: none`, so at 320px with the
     text doubled they held 309px inside a 232px bar and every Arabic page overflowed by the same amount.
     Constant across nine routes, which is what gave the shared element away. */
  .site-header__tools { flex-wrap: wrap; flex: 0 1 auto; justify-content: flex-end; }
  .theme__select, .lang-switch { max-width: 100%; min-width: 0; }
  .role { grid-template-columns: minmax(0, 1fr); }
  /* An amount must not be broken across lines, so a four-column money table has a real minimum width and
     at 320px with doubled text it cannot fit. The correct answer for a table is its own scroll container,
     not a narrower table. The section already carries an accessible name. */
  .surf--lines { overflow-x: auto; }
  /* A button's label plus its padding can exceed the screen once the text doubles. */
  .btn, .gstep, .person { max-width: 100%; white-space: normal; }
  /* The stage button puts its number in an `auto` column beside the body; at a doubled root font that
     circle is 51px of the 232px available, and the label could not fit beside it. It stacks instead. */
  .gstep { grid-template-columns: minmax(0, 1fr); }
  .gstep__n { grid-row: auto; }
  /* A clamp() whose maximum is in rem scales with the text setting, so the section headings rendered at
     64px inside a 232px column. And the date beside "six months later" was nowrap. Both are decoration
     that must yield before the page scrolls sideways. */
  .later h2, .hero h1, .band h2 { font-size: 1.4rem; }
  .later__when { white-space: normal; }
  /* The FAQ summary is a flex row whose label is an anonymous text item, so it cannot be given
     min-width: 0 and will not shrink below its own content. A grid track can. */
  .faq > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  /* Same shape as the FAQ summary: a flex row whose heading text is an anonymous item, so it cannot be
     given min-width: 0 and will not shrink below its own content. Four of these self-overflowed at 320px
     with the text doubled, the widest wanting 269px in a 217px column. */
  .principles h2 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
}

/* ---- forced colours --------------------------------------------------------------------------
   Windows high-contrast and similar modes replace every background, border colour and shadow with the
   user's own palette. Every selected state here was expressed as an accent tint, an accent border or an
   accent ring, so in that mode the current chapter and the selected person simply vanished - the page
   stayed legible and became unusable, which is the worse failure. These restate the same states in the
   two things the mode keeps: a system colour and an outline. */
@media (forced-colors: active) {
  .person[aria-checked="true"], .gstep[aria-checked="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; outline: 2px solid Highlight; outline-offset: 2px;
  }
  .person[aria-checked="true"] *, .gstep[aria-checked="true"] * { forced-color-adjust: none; color: HighlightText; }
  .moment[aria-current="step"] .moment__dot { forced-color-adjust: none; background: Highlight; border: 2px solid Highlight; }
  .moment[aria-current="step"] { outline: 2px solid Highlight; outline-offset: 2px; }
  .site-nav li > a[aria-current="page"]:not(.btn) { outline: 2px solid Highlight; outline-offset: 3px; }
  .chip { border: 1px solid CanvasText; }
}