/* ==========================================================================
   Makoon site — one small design system.
   1. Tokens (light, dark, print)  2. Fonts  3. Base  4. Layout  5. Components
   6. The order example  7. Home sections  8. 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.
   Edit tokens first; components only use tokens. Status meaning never depends on the theme.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------
   Light is the default. Dark applies when the system prefers it and no explicit choice was
   stored, or when the visitor chose Dark (html[data-theme="dark"], set before first paint). */
:root {
  --bg: #f8f8f4;
  --surface-1: #fdfdfb;
  --surface-2: #eef1ec;
  --surface-raised: #ffffff;
  --ink: #18231e;
  --ink-2: #38483f;
  --muted: #5d6b62;
  --line: #d5ddd4;
  --line-strong: #7b8b7e;
  --accent: #0f5c4a;
  --accent-hover: #0b4a3b;
  --accent-soft: #e5f1ea;
  --on-accent: #ffffff;
  --focus: #1d4ed8;
  --success: #216535;
  --warning: #8a4b08;
  --danger: #a52332;
  --info: #235a97;
  --blocked: #76521e;
  --shadow-1: 0 1px 2px rgba(24, 35, 30, .06), 0 1px 1px rgba(24, 35, 30, .03);
  --shadow-2: 0 12px 32px rgba(24, 35, 30, .08), 0 2px 6px rgba(24, 35, 30, .05);

  --radius: 6px;
  --radius-lg: 10px;
  --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-text: 42rem;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, 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: #111a18;
    --surface-1: #17231f;
    --surface-2: #20312b;
    --surface-raised: #293c34;
    --ink: #f1f5ef;
    --ink-2: #cdd6ce;
    --muted: #a1b0a5;
    --line: #34473e;
    --line-strong: #7d9184;
    --accent: #8ad4b2;
    --accent-hover: #a6e2c6;
    --accent-soft: #203d30;
    --on-accent: #0e251b;
    --focus: #9bbeff;
    --success: #8cdda0;
    --warning: #f2c078;
    --danger: #ff9aa8;
    --info: #a5c8ff;
    --blocked: #e4c388;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"] {
  --bg: #111a18;
  --surface-1: #17231f;
  --surface-2: #20312b;
  --surface-raised: #293c34;
  --ink: #f1f5ef;
  --ink-2: #cdd6ce;
  --muted: #a1b0a5;
  --line: #34473e;
  --line-strong: #7d9184;
  --accent: #8ad4b2;
  --accent-hover: #a6e2c6;
  --accent-soft: #203d30;
  --on-accent: #0e251b;
  --focus: #9bbeff;
  --success: #8cdda0;
  --warning: #f2c078;
  --danger: #ff9aa8;
  --info: #a5c8ff;
  --blocked: #e4c388;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
}
/* 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: #f2f2ee; --surface-raised: #ffffff;
    --ink: #18231e; --ink-2: #38483f; --muted: #5d6b62; --line: #c9d0c8; --line-strong: #7b8b7e;
    --accent: #0f5c4a; --accent-hover: #0b4a3b; --accent-soft: #e5f1ea; --on-accent: #ffffff;
    --focus: #1d4ed8; --success: #216535; --warning: #8a4b08; --danger: #a52332; --info: #235a97; --blocked: #76521e;
    --shadow-1: none; --shadow-2: none;
  }
  .site-header, .site-footer nav, .skip, .theme, .lang-switch, .ex__tabs, .ex__select { display: none !important; }
  .ex__panel[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. */
@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"); }

/* 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; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-3); line-height: 1.25; }
p { margin: 0 0 var(--s4); }
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; }
.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.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; inset-inline-start: -999px; 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;
}
.skip:focus { inset-inline-start: 0; }

/* 4. Layout ---------------------------------------------------------------- */
.container { width: min(100% - 2.75rem, var(--max)); margin-inline: auto; }
.container.narrow { max-width: var(--max-text); }
.section { padding: clamp(3.25rem, 2.5rem + 3.5vw, 5.5rem) 0; }
.section--alt { background: var(--surface-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--alt + .section--alt { border-top: 0; }
.section__head { max-width: var(--max-text); margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.section__head h2 { margin-bottom: var(--s4); }
.section__foot { max-width: var(--max-text); color: var(--muted); margin: var(--s6) 0 0; }
.section__foot strong { color: var(--ink); }
.section__link { margin: var(--s5) 0 0; }
.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: .6rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand svg { width: 1.75rem; height: 1.75rem; flex: none; }

/* 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-nav__cta { margin-inline-start: auto; }
.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: 52rem) {
  .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--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink-2); color: var(--ink); }
.btn--sm { min-height: 2.5rem; padding: .45rem .9rem; font-size: var(--fs-0); }
.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; }
.caption { font-size: var(--fs-0); color: var(--muted); margin: var(--s3) 0 0; }

/* Chips: a status is text plus an outline in a semantic colour; never colour alone. */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid currentColor; font-size: var(--fs-0); font-weight: 600; white-space: nowrap; line-height: 1.3; }
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.chip--review { color: var(--blocked); }

/* Disclosures (details) */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.disc { flex: 1 1 18rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
.disc > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; font-weight: 600; }
.disc > summary::before { content: ""; width: .5rem; height: .5rem; flex: none; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); transition: transform .15s ease; }
.disc[open] > summary::before { transform: rotate(-135deg) translate(-1px, -1px); }
.disc > *:not(summary) { margin: 0; padding: 0 .9rem .85rem; color: var(--ink-2); }

.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 order example (one fixture, four work views) --------------------- */
.ex {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); font-size: var(--fs-1); line-height: 1.5; overflow: hidden;
}
.ex__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; padding: .8rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ex__bar p { margin: 0; min-width: 0; }
.ex__label { color: var(--muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; margin-inline-end: .3rem; }
.ex__id b { font-size: var(--fs-2); }
.ex__code { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-2); margin-inline-end: .35rem; }
.ex__status { margin-inline-start: auto; }
.ex__controls { padding: 1rem 1.25rem 0; }
.ex__tabs { display: none; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.js .ex__tabs { display: flex; }
.ex__tabs [role="tab"] {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .4rem .7rem;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-2);
  font: inherit; text-align: start; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.ex__tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-raised); }
.ex__tabs [role="tab"][aria-selected="true"] { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.ex__tabs [role="tab"][aria-selected="true"] .ex__avatar { background: var(--accent); color: var(--on-accent); }
.ex__tabs [role="tab"]:focus-visible { outline-offset: 0; }
.ex__avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: var(--fs-0); }
.ex__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ex__name { font-weight: 600; }
.ex__role { font-size: var(--fs-0); color: var(--muted); }
.ex__select { display: none; }
.ex__select > span { display: block; font-size: var(--fs-0); color: var(--muted); margin-bottom: .3rem; }
.ex__select select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); color: var(--ink); font: inherit; }
@media (max-width: 47.99rem) {
  .js .ex__tabs { display: none; }
  .js .ex__select { display: block; }
}
.ex__panel { padding: 1.1rem 1.25rem 1.25rem; }
.ex__panel + .ex__panel { border-top: 1px solid var(--line); }
.js .ex__panel + .ex__panel { border-top: 0; }
/* Without script every work view is shown in sequence (the HTML hides all but the first for the
   scripted tabs; this override wins on specificity). */
html:not(.js) .ex__panel[hidden] { display: block !important; }
.ex__panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.ex__panel-head h3 { font-size: var(--fs-2); margin: 0; }
.ex__panel-role { font-weight: 500; color: var(--muted); }
.ex__depth { margin-inline-start: auto; font-size: var(--fs-0); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.ex__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem 2rem; align-items: start; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; margin: 0; }
.facts > div { min-width: 0; }
.facts dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.facts dd small { display: block; font-weight: 400; color: var(--muted); }
.facts .is-review dd { color: var(--blocked); }
.lines { width: 100%; border-collapse: collapse; }
.lines th, .lines td { text-align: start; padding: .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines th { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.lines th + th, .lines td + td { padding-inline-start: .75rem; }
.lines .num { white-space: nowrap; }
.lines tfoot td { color: var(--ink-2); }
.lines tfoot tr:last-child td { border-bottom: 0; }
.lines tfoot .is-total td { font-weight: 600; color: var(--ink); }
.ex__excluded { font-size: var(--fs-0); color: var(--muted); margin: .6rem 0 0; }
.ex__next { margin: 1.1rem 0 0; padding: .8rem .95rem; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.ex__next b { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.ex__more { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface-1); }
.ex__history { list-style: none; margin: 0; padding: 0 .9rem .6rem; }
.ex__history li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--line); color: var(--ink); }
.ex__history li span:first-child { font-weight: 600; }
.ex__history li span:last-child { color: var(--muted); text-align: end; }
.ex__captions { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.ex__captions .caption { margin: 0; }
@media (max-width: 47.99rem) {
  .ex__bar, .ex__controls, .ex__panel, .ex__more { padding-inline: 1rem; }
  .ex__status { margin-inline-start: 0; }
  .ex__grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .ex__depth { margin-inline-start: 0; }
  /* Item lines become readable rows: the item on top, each figure with its own label. */
  .lines:not(.lines--plain) thead { display: none; }
  .lines:not(.lines--plain), .lines:not(.lines--plain) tbody, .lines:not(.lines--plain) tfoot, .lines:not(.lines--plain) tr, .lines:not(.lines--plain) td { display: block; }
  .lines:not(.lines--plain) tbody tr { padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .lines:not(.lines--plain) tbody td { padding: .1rem 0; border: 0; }
  .lines:not(.lines--plain) tbody td.num { text-align: start; }
  .lines:not(.lines--plain) tbody td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--fs-0); }
  .lines:not(.lines--plain) tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
  .lines:not(.lines--plain) tfoot td { padding: 0; border: 0; }
  .lines:not(.lines--plain) tfoot td + td { padding-inline-start: 0; }
  .lines:not(.lines--plain) tfoot tr:last-child { border-bottom: 0; }
}

/* 7. Home sections ---------------------------------------------------------- */
/* Hero: text only; the example below is the visual. */
.hero { padding: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hero__eyebrow { margin: var(--s4) 0 var(--s3); font-size: var(--fs-2); font-weight: 600; color: var(--accent); }
.hero__title { font-size: var(--fs-6); margin: 0 0 var(--s5); max-width: 52rem; }
.hero__lede { font-size: var(--fs-3); line-height: 1.5; color: var(--ink-2); max-width: 40rem; margin: 0; }
.hero__audience { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-1); max-width: 40rem; }
.section--example { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Organizational depth strip: three stages, one direction, no interaction. */
.maturity { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s6); }
.maturity__stage { position: relative; padding-top: var(--s4); border-top: 3px solid var(--line-strong); }
.maturity__stage:nth-child(2) { border-top-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.maturity__stage:nth-child(3) { border-top-color: var(--accent); }
.maturity__stage + .maturity__stage::before { content: "\2192"; position: absolute; top: -.85rem; inset-inline-start: calc(-1 * var(--s6)); width: var(--s6); text-align: center; color: var(--muted); font-size: 1.1rem; line-height: 1; }
[dir="rtl"] .maturity__stage + .maturity__stage::before { content: "\2190"; }
.maturity__num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 600; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.maturity h3 { font-size: var(--fs-3); margin: 0 0 .4rem; }
.maturity p { color: var(--ink-2); font-size: var(--fs-1); margin: 0; }
@media (max-width: 47.99rem) {
  .maturity { grid-template-columns: minmax(0, 1fr); gap: var(--s6) 0; }
  .maturity__stage + .maturity__stage::before { content: "\2193"; top: -1.85rem; inset-inline-start: .2rem; width: auto; }
  [dir="rtl"] .maturity__stage + .maturity__stage::before { content: "\2193"; }
}

/* Connected work: two rails; accounting sits under the events that produce it. */
.flows { display: grid; gap: var(--s6); }
.flow__title { font-size: var(--fs-0); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s4); }
.flow__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flow__rail li { position: relative; padding-block: 1.6rem 0; padding-inline: 0 .75rem; font-size: var(--fs-1); }
.flow__rail li::before { content: ""; position: absolute; top: .5rem; inset-inline-start: .95rem; inset-inline-end: 0; height: 2px; background: var(--line-strong); }
.flow__rail li:last-child::before { display: none; }
.flow__rail li::after { content: ""; position: absolute; top: .05rem; inset-inline-start: 0; width: .95rem; height: .95rem; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--accent); }
.flow__step { display: block; font-weight: 600; }
.flow__acct { display: block; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed var(--line-strong); font-size: var(--fs-0); color: var(--ink-2); }
.flow__acct-k { display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .1rem; }
.flow--purchase .flow__rail li { font-size: var(--fs-0); }
.flow--purchase .flow__step { font-weight: 500; }
@media (max-width: 52rem) {
  .flow__rail { grid-template-columns: minmax(0, 1fr); }
  .flow__rail li { padding-block: .35rem .6rem; padding-inline: 1.75rem 0; }
  .flow__rail li::before { top: 1.25rem; bottom: -.35rem; inset-inline-start: .42rem; inset-inline-end: auto; width: 2px; height: auto; }
  .flow__rail li::after { top: .45rem; }
  .flow__acct { margin-top: .3rem; }
}

/* Trust: one main statement, one supporting, one line across. */
.trust { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s6) var(--s8); align-items: start; }
.trust__main h2 { margin-bottom: var(--s4); }
.trust__main p, .trust__item p { color: var(--ink-2); margin: 0; }
.trust__item { padding-top: var(--s2); }
.trust__item h3 { font-size: var(--fs-4); margin-bottom: var(--s3); }
.trust__integration { grid-column: 1 / -1; margin: 0; padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-3); line-height: 1.45; max-width: 52rem; }
@media (max-width: 60rem) { .trust { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .trust__item { padding-top: 0; } }

/* Fit and planned scope */
.fit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.fit__copy h2 { margin-bottom: var(--s4); }
.fit__scope { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.fit__scope h3 { font-size: var(--fs-3); margin-bottom: var(--s4); }
.scope { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .55rem; }
.scope li { position: relative; padding-inline-start: 1.5rem; font-weight: 500; color: var(--ink); }
.scope li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: .65rem; height: .65rem; border-radius: 2px; background: var(--accent-soft); border: 1.5px solid var(--accent); }
@media (max-width: 60rem) { .fit { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

/* Invitation */
.invite { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.invite__panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-1); }
.invite__panel h2 { margin-bottom: var(--s4); }
.invite__limit { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--fs-1); }
.invite__programme { margin: var(--s5) 0 0; padding: var(--s4); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-1); color: var(--ink-2); }
.invite__programme strong { display: block; color: var(--ink); margin-bottom: .15rem; }
.invite__faq h3 { font-size: var(--fs-3); margin-bottom: var(--s3); }
@media (max-width: 60rem) { .invite { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

/* 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); } }

/* 8. Pages and forms ---------------------------------------------------------- */
.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;
  --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"] .hero__lede, html[lang="ar"] .trust__integration { line-height: 1.7; }
html[lang="ar"] .eyebrow, html[lang="ar"] .status, html[lang="ar"] .flow__title, html[lang="ar"] .flow__acct-k,
html[lang="ar"] .ex__label, html[lang="ar"] .facts dt, html[lang="ar"] .lines th, html[lang="ar"] .ex__next b, html[lang="ar"] .brand { letter-spacing: 0; }
html[lang="ar"] .ex { font-size: 1rem; line-height: 1.65; }
html[lang="ar"] .ex__code, html[lang="ar"] .amt, html[lang="ar"] .intake__done .ref { font-family: var(--font); }
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; }
}