/* Alter-Mal design system: the one style file for every page and screen.
   Pages link this file and use its tokens, classes and icons; a change here changes every page.
   The wireframes page is the reference for how each piece looks.
   Rules:
   - Light mode is a white page; dark mode is near-black. Brand colours are accents.
   - State uses the standard status colours everyone already reads: green done,
     amber warning, red error, blue information, grey inactive. Brand colours
     never stand in for them.
   - Amber and gold mark attention only (flags, worries, estimates), never decoration.
   - Colour never carries meaning alone: pair it with a label or icon.
   - Contrast (WCAG AA) in both modes: text 4.5:1 against what is behind it (3:1 at 24px,
     or 18.66px bold); icons, borders that carry meaning and chart marks 3:1.
     Tinted chips sit at 14% of their colour, and pass even on a box tinted 18% with the same colour.
   - Icons come only from the set at the end of this file: <i class="ico ico-check" aria-hidden="true"></i>.
     They take the colour of the text around them. A tick or cross that means done or
     not done is the icon in its status colour, never a typed character.
   - Figures use .num (IBM Plex Mono, tabular). In Arabic text, wrap the whole
     figure with its currency in <bdi dir="ltr" class="num">.
   - Money carries its currency symbol, the same in English and Arabic, on every amount
     (headlines, working lines and sums): the Saudi Riyal symbol U+20C1 then a no-break
     space (U+00A0): "⃁ 142,300", negative "−⃁ 1,200"; "$142,300", "€142,300",
     "£142,300"; any other currency by its code: "AED 142,300". The font below draws
     the riyal symbol on every device.
   - Amounts in a table or list line up by digit, in both languages: ones over ones and
     decimal points aligned, every amount in a column to the same decimal places, the
     currency symbol kept in front. Mark the amount cell .n.
   - Economica is for the logo wordmark only.
   - Cards keep at least 70% of their area empty, in English and Arabic, on a phone
     and a laptop. Empty = 1 - (area of text lines, chips, bars and chart marks /
     card area). Use the card spacing below; show one answer per card; explain only
     what the card does not already say; fold extra lines behind "Show more".
   - Page styles only lay out what is unique to that page; anything two pages share lives here. */

@import url("https://fonts.googleapis.com/css2?family=Economica:wght@700&family=IBM+Plex+Mono:wght@400;600&family=Noto+Kufi+Arabic:wght@400;600&family=Public+Sans:wght@400;600;700&display=swap");

/* The Saudi Riyal symbol (U+20C1), SIL Open Font License; used for that one character only. */
@font-face {
  font-family: "Saudi Riyal";
  src: url("https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font@1.1.0/fonts/regular/saudi_riyal.woff2") format("woff2");
  font-weight: 100 500; unicode-range: U+20C1; font-display: swap;
}
@font-face {
  font-family: "Saudi Riyal";
  src: url("https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font@1.1.0/fonts/bold/saudi_riyal.woff2") format("woff2");
  font-weight: 600 900; unicode-range: U+20C1; font-display: swap;
}

:root {
  /* Brand palette */
  --am-navy: #222b56;
  --am-ocean: #0b4683;
  --am-teal: #136e8c;
  --am-sea: #1a9695;
  --am-gold: #f2d676;
  --am-amber: #d69510;

  /* Type */
  --font-sans: "Saudi Riyal", "Public Sans", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Saudi Riyal", "Noto Kufi Arabic", "Public Sans", sans-serif;
  --font-mono: "Saudi Riyal", "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --font-logo: "Economica", sans-serif;

  /* Type sizes: page title, section head, sub-head and body, then smaller print */
  --text-h1: 30px;
  --text-h2: 21px;
  --text-h3: 15px;
  --text-body: 15px;
  --text-sm: 13.5px;
  --text-xs: 12.5px;
  --text-2xs: 11.5px;
  --text-label: 11px;
  --leading: 1.55;

  /* Spacing steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-section: 52px;
  --page-width: 1180px;
  --read-width: 80ch;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Motion */
  --motion-fast: .15s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Light mode */
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f8f9fa;
  --color-canvas: #f7f8fa;         /* the ground behind cards inside a mock screen */
  --color-text: #222b56;
  --color-text-muted: #646b89;
  --color-border: #e4e6eb;
  --color-accent: #0b4683;
  --color-on-accent: #ffffff;
  --color-accent-bg: #e2e9f0;  /* soft accent behind chips and highlighted rows */

  /* Elevation: a soft shadow on the white page; in dark mode a lighter surface and a faint top edge */
  --elev-bg: var(--color-surface);
  --elev-hover-bg: var(--color-surface);
  --elev-1: 0 1px 2px rgba(34,43,86,.06), 0 4px 14px rgba(34,43,86,.09);
  --elev-2: 0 2px 4px rgba(34,43,86,.08), 0 16px 34px rgba(34,43,86,.17);
  --elev-pop: 0 10px 30px rgba(0,0,0,.22);
  --grip: rgba(34,43,86,.22);

  /* Status: the standard meanings. Each has a text colour and a soft background. */
  --color-success: #157877;       /* sea green: done, working, matched */
  --color-success-bg: #e4f2f2;
  --color-warning: #8f630b;       /* amber: needs attention, estimate */
  --color-warning-bg: #fbf3d6;
  --color-warning-line: #c3880f;  /* amber for borders, bars and icons (3:1 on white) */
  --color-warning-fill: #d69510;  /* solid amber for chips, with --color-on-warning text */
  --color-on-warning: #2f2104;
  --color-error: #b3394f;         /* red: failed, wrong, blocked */
  --color-error-bg: #f7ebed;
  --color-info: #0b4683;          /* ocean blue: note, in progress */
  --color-info-bg: #e9eef4;
  --color-neutral: #646b89;       /* grey: inactive, not started, later */
  --color-neutral-bg: #f0f0f3;

  /* Brand teal for positive marks that are not a status (differentiators, Trust) */
  --color-positive: #136e8c;
  --color-positive-bg: #e7f0f4;

  /* Other names for the status colours, used by existing pages */
  --color-attention: var(--color-warning);
  --color-attention-bg: var(--color-warning-bg);
  --color-attention-fill: var(--color-warning-fill);
  --color-on-attention: var(--color-on-warning);
  --color-danger: var(--color-error);
  --color-danger-bg: var(--color-error-bg);

  /* AI answer labels: Facts, Analysis, Explain, Suggest, plus context */
  --label-calculated: var(--color-success);
  --label-estimated: var(--color-warning);
  --label-explained: var(--color-text-muted);
  --label-suggested: var(--color-info);
  --label-context: #136e8c;

  /* Phases 1 to 5 */
  --phase-1: #0b4683;
  --phase-2: #135a78;
  --phase-3: #155d5c;
  --phase-4: #222b56;
  --phase-5: #764b0a;

  /* Chart series, in order of use */
  --chart-1: #0b4683;
  --chart-2: #1a9695;
  --chart-3: #136e8c;
  --chart-4: #222b56;
  --chart-5: #d69510;

  /* Cards: spacing that keeps at least 70% of each card empty */
  --card-empty-min: 70%;
  --card-padding: 22px 20px 18px;
  --card-gap: 20px;
  --card-min-width: 320px;  /* large and medium cards */
  --tile-min-width: 250px;  /* small cards on a dashboard */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #131413;
    --color-surface: #1b1c1a;
    --color-surface-soft: #17191e;
    --color-canvas: #131413;
    --color-text: #edece6;
    --color-text-muted: #999eb5;
    --color-border: #232944;
    --color-accent: #5aa4f1;
    --color-on-accent: #131413;
    --color-accent-bg: #1c252e;
    --elev-bg: #1e1f1c;
    --elev-hover-bg: #242522;
    --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.5);
    --elev-2: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.6);
    --elev-pop: 0 10px 30px rgba(0,0,0,.6);
    --grip: rgba(237,236,230,.28);
    --color-positive: #1a98c2;
    --color-positive-bg: #13282e;
    --color-success: #1c9f9e;
    --color-success-bg: #142928;
    --color-warning: #f2d676;
    --color-warning-bg: #29271d;
    --color-warning-line: #d69510;
    --color-warning-fill: #d69510;
    --color-on-warning: #271b03;
    --color-error: #ce6578;
    --color-error-bg: #2d1a1d;
    --color-info: #2b8aed;
    --color-info-bg: #112335;
    --color-neutral: #999eb5;
    --color-neutral-bg: #191d26;
    --label-context: #188ab0;
    --phase-1: #7fb2e8;
    --phase-2: #5cc3de;
    --phase-3: #5fd3c7;
    --phase-4: #a7b3d9;
    --phase-5: #f2d676;
    --chart-1: #4297ef;
    --chart-2: #1da7a6;
    --chart-3: #1c9fcb;
    --chart-4: #8591cf;
    --chart-5: #d69510;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #131413;
  --color-surface: #1b1c1a;
  --color-surface-soft: #17191e;
  --color-canvas: #131413;
  --color-text: #edece6;
  --color-text-muted: #999eb5;
  --color-border: #232944;
  --color-accent: #5aa4f1;
  --color-on-accent: #131413;
  --color-accent-bg: #1c252e;
  --elev-bg: #1e1f1c;
  --elev-hover-bg: #242522;
  --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.5);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.6);
  --elev-pop: 0 10px 30px rgba(0,0,0,.6);
  --grip: rgba(237,236,230,.28);
  --color-positive: #1a98c2;
  --color-positive-bg: #13282e;
  --color-success: #1c9f9e;
  --color-success-bg: #142928;
  --color-warning: #f2d676;
  --color-warning-bg: #29271d;
  --color-warning-line: #d69510;
  --color-warning-fill: #d69510;
  --color-on-warning: #271b03;
  --color-error: #ce6578;
  --color-error-bg: #2d1a1d;
  --color-info: #2b8aed;
  --color-info-bg: #112335;
  --color-neutral: #999eb5;
  --color-neutral-bg: #191d26;
  --label-context: #188ab0;
  --phase-1: #7fb2e8;
  --phase-2: #5cc3de;
  --phase-3: #5fd3c7;
  --phase-4: #a7b3d9;
  --phase-5: #f2d676;
  --chart-1: #4297ef;
  --chart-2: #1da7a6;
  --chart-3: #1c9fcb;
  --chart-4: #8591cf;
  --chart-5: #d69510;
}

/* ---------- Base page ----------
   A page opts in with <body class="am">. Wrapped in :where() so it carries no weight:
   any page rule overrides it. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body.am) {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font: var(--text-body)/var(--leading) var(--font-sans); padding: 28px 16px 72px;
}
:where(.am main) { max-width: var(--page-width); margin: 0 auto; }
:where(.am h1) { font-size: var(--text-h1); line-height: 1.15; margin: 0 0 var(--space-2); text-wrap: balance; }
:where(.am h2) { font-size: var(--text-h2); margin: var(--space-section) 0 6px; text-wrap: balance; }
:where(.am h3) { font-size: var(--text-h3); margin: 0 0 var(--space-2); }
:where(.am a) { color: var(--color-accent); }
:where(.am code) { font-family: var(--font-mono); font-size: .88em; }
:where(.am nav) { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin: var(--space-2) 0 0; }
:where(.am nav a) { color: var(--color-text-muted); text-decoration: none; }
:where(.am nav a:hover) { color: var(--color-accent); }
:where(.am table) { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
:where(.am th, .am td) { text-align: start; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
:where(.am th) { font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Lead paragraph under a title, and the short line under a section head */
.lede { color: var(--color-text-muted); max-width: var(--read-width); margin: 0 0 14px; }
.sub { color: var(--color-text-muted); max-width: var(--read-width); margin: 0 0 var(--space-4); font-size: 14px; }
/* Small print beside or under something: how to read it, where it comes from */
.hint { font-size: var(--text-xs); color: var(--color-text-muted); }
/* A wide table scrolls inside its own box, never the page */
.tbl { overflow-x: auto; }

/* Grids that fall to one column on a phone */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid2 > *, .grid3 > * { min-width: 0; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Figures and language ---------- */
/* One numeral face everywhere, aligned in columns, left-to-right inside Arabic. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  direction: ltr;
}
[lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); }
.logo-wordmark { font-family: var(--font-logo); font-weight: 700; }

/* ---------- Boxes and cards ---------- */
/* Box: a plain bordered panel that groups content. */
.box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 18px; }

/* Card: one answer, raised off the page. A .live card lifts on hover. */
.card {
  position: relative; background: var(--elev-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--elev-1); padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--card-gap); min-width: 0;
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}
.card.live:hover, .card.live:focus-within { transform: translateY(-2px); box-shadow: var(--elev-2); background: var(--elev-hover-bg); }
.card.flagged { border-color: var(--color-warning-line); }

/* Note: a message box with an icon. Border and icon take the status colour; text stays body colour. */
.note {
  display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--color-text);
  border-radius: var(--radius-md); padding: 9px 12px; border: 1px solid var(--nc); background: var(--nb);
}
.note > .ico { color: var(--nc); --ico-size: 15px; margin-top: 2px; }
.note .btn { margin-inline-start: auto; align-self: center; white-space: nowrap; }
.note.success { --nc: var(--color-success); --nb: var(--color-success-bg); }
.note.warning { --nc: var(--color-warning-line); --nb: var(--color-warning-bg); }
.note.error { --nc: var(--color-error); --nb: var(--color-error-bg); }
.note.info { --nc: var(--color-info); --nb: var(--color-info-bg); }

/* ---------- Buttons and pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-pill); padding: 3px 10px; cursor: pointer; text-decoration: none;
}
.btn.pri { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn.danger { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); }
.btn.lg { font-size: 14.5px; padding: 9px 18px; min-height: 40px; }
/* Toggle: one choice in a row of filters or jump links; the chosen one is filled. */
.toggle {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px; min-height: 28px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-pill); padding: 3px 12px; cursor: pointer; text-decoration: none;
}
.toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.toggle.on, .toggle[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* ---------- Chips and labels ---------- */
/* Chip: a short tag. Plain by default; tinted for accent and positive marks. */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px 10px;
  background: var(--color-surface); color: var(--color-text);
}
.chip.accent { border-color: transparent; color: var(--color-accent); background: var(--color-accent-bg); }
.chip.positive { border-color: transparent; color: var(--color-positive); background: var(--color-positive-bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Follow-up questions: chips that ask their question when pressed, under a hint such as "You could ask". */
.suggest { display: flex; flex-direction: column; gap: 6px; }
button.chip { font: inherit; font-size: 12.5px; cursor: pointer; min-height: 28px; }
button.chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Status chip: soft background, coloured text, always with a word or an icon. */
.status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill);
  color: var(--sc); background: var(--sc-bg);
}
.status.success { --sc: var(--color-success); --sc-bg: var(--color-success-bg); }
.status.warning { --sc: var(--color-warning); --sc-bg: var(--color-warning-bg); }
.status.error { --sc: var(--color-error); --sc-bg: var(--color-error-bg); }
.status.info { --sc: var(--color-info); --sc-bg: var(--color-info-bg); }
.status.neutral { --sc: var(--color-neutral); --sc-bg: var(--color-neutral-bg); }

/* Flag chip: amber fill, dark text, always with words. */
.flag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-warning-fill); color: var(--color-on-warning);
}
.flag-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* AI answer labels */
.ai-label {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 5px; padding: 0 6px;
  color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, transparent);
}
.ai-label.calculated { --lc: var(--label-calculated); }
.ai-label.estimated { --lc: var(--label-estimated); }
.ai-label.explained { --lc: var(--label-explained); }
.ai-label.suggested { --lc: var(--label-suggested); }
.ai-label.context { --lc: var(--label-context); }

/* Phase chip: the roadmap phase a thing belongs to. .pl means later. */
.ph {
  display: inline-block; font-size: var(--text-label); font-weight: 700; border-radius: var(--radius-sm);
  padding: 1px 7px; white-space: nowrap; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent);
}
.p1 { --pc: var(--phase-1); } .p2 { --pc: var(--phase-2); } .p3 { --pc: var(--phase-3); }
.p4 { --pc: var(--phase-4); } .p5 { --pc: var(--phase-5); } .ph.pl { --pc: var(--color-text-muted); }

/* Legend under a chart or diagram: a colour swatch beside each word. */
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--color-text-muted); }
.legend i, .legend b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; }

/* Light and dark switch, fixed to the corner of a page. */
.theme {
  position: fixed; top: 12px; right: 12px; z-index: 40; display: flex; gap: 4px; align-items: center;
  background: var(--elev-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 4px; box-shadow: var(--elev-1); font-size: 12px;
}
.theme span { color: var(--color-text-muted); padding: 0 6px 0 8px; }
.theme button { font: inherit; border: 0; background: none; color: var(--color-text); border-radius: var(--radius-pill); padding: 3px 10px; cursor: pointer; }
.theme button.on, .theme button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 600px) { .theme { top: auto; bottom: 12px; } }

/* ---------- Forms ----------
   <form class="form wl"><fieldset class="all"> … </fieldset></form>: labelled fields, two to a row on a
   wide screen, one on a phone. Required fields carry no mark; the others say "(optional)" in .opt.
   Role and other short choices are .choice pills; agreements are .check tick boxes, unticked.
   A form that is switched off disables its fieldset.all and shows a .note above it.
   The app's forms keep their own layout (.box.form, .fld, .inp) until they move to these parts. */
.form.wl { display: grid; gap: 16px; max-width: 520px; }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 480px) { .form .row2 { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field > label:not(.check), .field > .lbl, fieldset.field > legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); padding: 0; }
.field .opt { font-weight: 400; color: var(--color-text-muted); }
.input, .select {
  width: 100%; font: inherit; font-size: var(--text-body); color: var(--color-text); background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 55%, transparent); border-radius: var(--radius-md);
  padding: 9px 12px; min-height: 42px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover, .select:hover { border-color: var(--color-text-muted); }
.input:focus, .select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-bg); }
.input[type="email"], .input.ltr { direction: ltr; }
[dir="rtl"] .input[type="email"], [dir="rtl"] .input.ltr { text-align: right; }
.select { appearance: none; padding-inline-end: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-size: 5px 5px; background-repeat: no-repeat; background-position: right 16px center, right 11px center; }
[dir="rtl"] .select { background-position: left 11px center, left 16px center; }
.field .help { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.field .err { display: none; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; color: var(--color-error); margin: 0; }
.field.invalid .err { display: flex; }
.field.invalid :is(.input, .select) { border-color: var(--color-error); }
.field.invalid :is(.input, .select):focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-bg); color: var(--color-accent); font-weight: 600; }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--text-sm); cursor: pointer; }
.choice input, .check input { accent-color: var(--color-accent); width: 18px; height: 18px; margin: 1px 0 0; }
/* Switched off ("opening soon"): the whole form sits in a disabled fieldset, greyed, with a note above it. */
.form fieldset.all { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.form fieldset.all:disabled { opacity: .55; }
:is(.input, .select):disabled { background: var(--color-surface-soft); cursor: not-allowed; }
.form fieldset.all:disabled :is(.choice, .check) { cursor: not-allowed; }
.form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.form .fine { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

/* ---------- Empty state ----------
   What the home or a list shows before it holds anything: an icon, one line saying what goes here,
   one line on how, and the one step that fills it. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 20px; border: 1.5px dashed color-mix(in srgb, var(--color-text-muted) 45%, transparent); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.empty-state .es-i { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-accent-bg); color: var(--color-accent); }
.empty-state .es-i .ico { --ico-size: 20px; }
.empty-state .es-t { margin: 0; font-size: 15px; font-weight: 700; }
.empty-state .es-s { margin: 0; max-width: 46ch; font-size: 13px; color: var(--color-text-muted); }
.empty-state .btn { margin-top: 4px; }

/* ---------- Settings list ----------
   Sections of rows, each a label with a detail line and its action (a button, or a toggle pair). */
.set { display: flex; flex-direction: column; gap: 14px; }
.set section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.set h2 { margin: 0; padding: 12px 16px 8px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.set .row { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--color-border); font-size: 13.5px; }
.set .row > span:first-child { flex: 1 1 220px; }
.set .row small { display: block; color: var(--color-text-muted); font-size: 12px; overflow-wrap: anywhere; }
/* Values keep their own direction (an English name on an Arabic page) but line up with the page. */
[dir="rtl"] .set .row small[dir] { text-align: right; }
[dir="ltr"] .set .row small[dir] { text-align: left; }
.set .row .opts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Answer card ----------
   The parts of a card (4.9.1), from the card wireframes: question and type, verdict and
   headline figure, detail and key lines, estimate, explanation, source and time, actions,
   the suggestion on the back, the history strip, and the working behind each figure.
   static/js/answer-card.js draws cards with these classes.
   .card sizes itself to its own width (container rules at 250px and 460px).
   The working pop-up is a direct child of body.am; history dots sit inside .dots; claims
   sit inside a card. That keeps these names off other pages that use them. */
.grip{position:absolute;top:5px;left:50%;width:30px;height:4px;margin-left:-15px;border-radius:2px;background:var(--grip);opacity:0;transition:opacity .15s;cursor:grab}
.card.live:hover .grip{opacity:1}
/* Icons */
.c-mini{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .15s}
.card.live:hover .c-mini,.card.live:focus-within .c-mini{opacity:1}
@media (hover:none){.c-mini{opacity:1}}
.ib{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:0;background:none;color:var(--color-text-muted);cursor:pointer}
.ib:hover{background:var(--color-surface-soft);color:var(--color-accent)}
.ib .ico{--ico-size:14px}
/* Key lines: picked by a fixed rule, brought forward; the rest step back */
.kl{display:grid;gap:2px 10px;padding:5px 8px;border-radius:6px;align-items:center}
.kl.key{box-shadow:inset 3px 0 0 var(--color-warning-line);font-weight:700}
[dir="rtl"] .kl.key{box-shadow:inset -3px 0 0 var(--color-warning-line)}
.kl.dim{color:var(--color-text-muted)}
.kl.dim .status{opacity:.85}
.kl.more{color:var(--color-text-muted);font-size:12px}
.fold summary{cursor:pointer;list-style:none;color:var(--color-text-muted);font-size:12px;padding:5px 8px;border-radius:6px;min-height:24px}
.fold summary::-webkit-details-marker{display:none}
.fold[open] summary .ico{transform:rotate(180deg)}
.fold summary:hover{background:var(--color-surface-soft);color:var(--color-text)}
.fold>div{display:flex;flex-direction:column;gap:2px}
.c-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.c-q{margin:0;font-size:14.5px;font-weight:700;line-height:1.3}
/* Arabic script sits taller in its line, so an Arabic question gets more room between its lines. */
[dir="rtl"] .c-q{line-height:1.8}
.c-kind{display:inline-flex;gap:4px;align-items:center;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:5px;padding:1px 6px;white-space:nowrap}
.c-kind .ico{--ico-size:12px}
.c-kind.alert{color:var(--color-warning);border-color:var(--color-warning-line)}
.c-fig{display:flex;flex-direction:column;gap:2px}
.c-lbl{font-size:12.5px;color:var(--color-text-muted)}
.big{font-size:clamp(21px,8.5cqi,30px);font-weight:600;line-height:1.15}
.sz-S .big{font-size:clamp(19px,9cqi,24px)}
/* Each card sizes itself to the space it is given, not to the screen: narrow slots tighten the layout. */
.card{container-type:inline-size}
@container (max-width:250px){.c-kind .kt{display:none}.c-kind{padding:2px 4px}.lst{grid-template-columns:1fr auto}.lst .d{grid-column:1/-1;grid-row:2}.hbar{font-size:11.5px}.c-foot{font-size:11px}}
@container (min-width:460px){.c-q{font-size:16px}.c-exp{font-size:14.5px}}
.c-fig .status{align-self:flex-start;margin-bottom:4px}
/* Verdict: drawn tick or cross, so it never reads as a letter in either language */
/* Turning a card over: both sides share one cell, so the card keeps its size */
.flipper{display:grid;perspective:1400px;min-width:0}
.flipper>.card{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .15s ease,background .15s ease}
.flipper:not(.flipped)>.card.back{transform:rotateY(180deg)!important;pointer-events:none}
.flipper.flipped>.card:not(.back){transform:rotateY(-180deg)!important;pointer-events:none}
@media (prefers-reduced-motion:reduce){.flipper>.card{transition:opacity .2s}
.flipper:not(.flipped)>.card.back,.flipper.flipped>.card:not(.back){transform:none!important;opacity:0;visibility:hidden}}
.flip-btn{margin-inline-start:auto;display:inline-flex;gap:5px;align-items:center;font:inherit;font-size:12px;font-weight:600;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent);border-radius:999px;padding:3px 11px;min-height:26px;cursor:pointer}
.flip-btn:hover{background:color-mix(in srgb,var(--color-accent) 16%,transparent)}
.card.has-next .c-mini{top:10px;bottom:auto}
@media (hover:none){.card.has-next .c-mini{position:static}}
.card.back{background:color-mix(in srgb,var(--color-info) 5%,var(--elev-bg))}
.back .nx-a{margin-top:auto}
.src .num,bdi.num{white-space:nowrap}
/* A headline date and time may wrap at its spaces so it stays inside a narrow card; amounts join with no-break spaces. */
.big bdi.num{white-space:normal}
.back .c-head .ai-label .ico{--ico-size:12px}
.nx-t{font-size:clamp(17px,6cqi,20px);font-weight:700;line-height:1.3}
.nx-v{margin:0;font-size:13.5px}
.nx-f{margin:0;font-size:12.5px;color:var(--color-text-muted);display:flex;gap:6px;align-items:flex-start}.nx-f .ico{margin-top:3px;color:var(--color-success);flex:none}
.vd{display:inline-flex;align-items:center;gap:4px}.vsrc{align-self:flex-start;cursor:help;border-radius:999px}.vsrc .status{margin:0}.c-fig .vsrc{margin-bottom:4px}
.c-cmp{font-size:13px;color:var(--color-text-muted)}
.c-cmp .ar{font-weight:700;margin-inline-end:4px}
.up{color:var(--color-success)}.dn{color:var(--color-error)}.hot{color:var(--color-warning)}
table.c-rows{width:100%;border-collapse:collapse;font-size:13px}
.c-rows td{padding:5px 0;border-bottom:1px solid var(--color-border)}
.c-rows td:last-child{text-align:end;white-space:nowrap}
.c-rows tr.tot td{border-bottom:0;font-weight:700}
/* Estimates: a dashed outline reads as "not certain" without the weight of a filled box. */
.c-est{font-size:13px;border:1.5px dashed var(--color-warning-line);border-radius:var(--radius-sm);padding:6px 9px}
.c-exp{font-size:13.5px;margin:0;line-height:1.55}
.c-exp .ai-label{margin-inline-end:4px}
/* Footnotes: a caveat in words under the card; the same mark sits beside the figure or line it qualifies. */
.c-fn{font-size:11.5px;line-height:1.45;color:var(--color-text-muted);display:grid;gap:2px}
.c-fn p{margin:0;display:flex;gap:4px}
.c-fnm{color:var(--color-text-muted);font-weight:600;margin-inline-start:2px}
.c-fn .c-fnm{margin:0;flex:none}
.c-foot{border-top:1px solid var(--color-border);padding-top:8px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--color-text-muted)}
.c-fl{display:contents}
.c-mini{position:absolute;inset-inline-end:10px;bottom:8px;background:var(--elev-hover-bg);border:1px solid var(--color-border);border-radius:999px;box-shadow:var(--elev-1);padding:1px 3px}
@media (hover:none){.c-mini{position:static;border:0;box-shadow:none;background:none;padding:0}}
.c-foot .labels{display:flex;gap:4px;flex-wrap:wrap}
.c-foot code{font-size:11px;background:var(--color-surface-soft);border-radius:4px;padding:0 4px}
.c-act{display:flex;gap:6px;flex-wrap:wrap}
/* Pinned to home: a card already on the owner's home shows its Pin pressed, the accent on its soft
   background; on a large card the button fills, like a chosen toggle, and reads "Pinned to home". */
.ib[aria-pressed="true"]{color:var(--color-accent);background:var(--color-accent-bg)}
.c-act .btn[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
/* With a mouse, Ask, Share and Pin float over the end of the foot line on hover: the source and time
   stop short of them, wrapping if they must, so the time is never covered. */
@media (hover:hover){.c-foot:has(>.c-mini)>.c-fl>span{max-width:calc(100% - 92px)}}
/* Moving a card on the home: the lifted card follows the pointer (on a phone, after a press and hold)
   and a dashed slot keeps its place. Dropped on the "take off" strip, it leaves the home; the note
   that follows offers Undo. */
.card.lifted{box-shadow:var(--elev-2);cursor:grabbing}
.card-slot{border:1.5px dashed color-mix(in srgb,var(--color-text-muted) 45%,transparent);border-radius:var(--radius-lg);background:var(--color-surface-soft);min-height:120px}
.drop-off{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border:1.5px dashed color-mix(in srgb,var(--color-text-muted) 45%,transparent);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text-muted);font-size:13px;text-align:center}
.drop-off .ico{--ico-size:16px;flex:none}
.drop-off.over{border-color:var(--color-error);background:var(--color-error-bg);color:color-mix(in srgb,var(--color-error) 80%,var(--color-text))}
.split{display:flex;height:8px;border-radius:5px;overflow:hidden;gap:2px}
.split i{display:block;height:100%}
.hbar{display:grid;grid-template-columns:auto 1fr auto;gap:5px 8px;align-items:center;font-size:12.5px}
.hbar .t{height:9px;border-radius:4px;overflow:hidden}.hbar .t i{display:block;height:100%;background:var(--chart-1);border-radius:4px}
.hbar .v{text-align:end}
.lst{display:grid;grid-template-columns:1fr auto auto;row-gap:2px;font-size:12.5px}
/* Every row shares the list's columns, so the amounts line up; folded rows follow the toggle. */
.lst>.kl,.lst>.fold{grid-column:1/-1}
.lst>.kl{grid-template-columns:1fr auto auto;grid-template-columns:subgrid}
.lst>.fold:not([open])~.x{display:none}
.lst .d{color:var(--color-text-muted);font-size:11.5px}
.bud{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.bud .kl{grid-template-columns:1fr auto auto}
.bud .sm{grid-column:1/-1;font-size:11.5px;font-weight:400;color:var(--color-text-muted)}
.bud .status{font-size:11.5px;padding:0;background:none;white-space:nowrap}
.c-tags{display:flex;gap:4px;align-items:center;flex:none}
.checks{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.checks div{display:flex;gap:8px;align-items:center}
.checks .fold summary{padding:0;display:inline-flex;gap:6px;align-items:center}
.checks .fold>.checks{flex-direction:column;align-items:stretch;gap:5px;margin-top:5px}
.chart{width:100%;max-width:340px;height:auto;display:block;overflow:visible}
.chart text{font-size:10px;fill:var(--color-text-muted);font-family:var(--font-sans)}
.chart .pt{fill:var(--color-surface);stroke:var(--chart-1);stroke-width:2;cursor:help}
.chart .pt:hover,.chart .pt:focus{fill:var(--chart-1)}
.chart .bar{fill:var(--chart-1);cursor:help}.chart .bar.hot{fill:var(--color-warning-line)}
.chart .bar:hover,.chart .bar:focus{opacity:.75}

/* History: swipe or drag back through earlier months; dots show where you are */
.car-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--color-text-muted)}
.car-cap{font-weight:600;color:var(--color-text);white-space:nowrap}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(to right,transparent,#000 14px);mask-image:linear-gradient(to right,transparent,#000 14px)}
[dir="rtl"] .car-track{-webkit-mask-image:linear-gradient(to left,transparent,#000 14px);mask-image:linear-gradient(to left,transparent,#000 14px)}
.car-track::-webkit-scrollbar{display:none}
.car-track.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.car-page{flex:0 0 100%;scroll-snap-align:start;padding-inline-start:6px}
.car-page .chart{max-width:none}
.dots{display:flex;gap:0}
.dots .dot{width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.dots .dot::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--color-border);transition:width .15s,background .15s}
.dots .dot.on::before{width:18px;background:var(--color-accent)}
.dots .dot:hover::before{background:var(--color-text-muted)}.dots .dot.on:hover::before{background:var(--color-accent)}

/* hoverable figures and claims */
.src{border-bottom:1.5px dotted color-mix(in srgb,var(--color-accent) 70%,transparent);cursor:help}
.src:hover,.src:focus{background:color-mix(in srgb,var(--color-accent) 12%,transparent);border-radius:3px}
.card .claim{text-decoration:underline dotted color-mix(in srgb,var(--color-text-muted) 70%,transparent);text-underline-offset:3px;cursor:help}
.card .claim:hover,.card .claim:focus{background:var(--color-surface-soft)}
.plain .src,.plain .claim{border:0;text-decoration:none;cursor:auto;background:none}
sup.fn{font-size:9.5px;color:var(--color-accent);font-weight:700;margin-left:1px}

/* tooltip: the working behind a figure */
.am>.tip{position:fixed;z-index:50;max-width:330px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--elev-pop);padding:10px 12px;font-size:12.5px;pointer-events:none;opacity:0;transition:opacity .12s}
.am>.tip.on{opacity:1}
.tt-x{text-align:center;color:var(--color-text-muted);font-size:11.5px;margin-top:10px}
/* On touch screens the working opens as a sheet from the bottom; tap anywhere to close. */
@media (hover:none){.am>.tip{left:0!important;right:0;top:auto!important;bottom:0;max-width:none;border-radius:16px 16px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));font-size:14px;opacity:1;transform:translateY(105%);transition:transform .2s ease}
.am>.tip.on{transform:none}.am>.tip::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--color-border)}}
.tapped{background:color-mix(in srgb,var(--color-accent) 14%,transparent);border-radius:3px;outline:2px solid color-mix(in srgb,var(--color-accent) 45%,transparent)}
.tt-h{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}
.tt-l{width:100%;border-collapse:collapse}.tt-l td{padding:2px 0;vertical-align:top}.tt-l td:last-child{text-align:end;padding-inline-start:10px;white-space:nowrap}
/* An amount cell: its right edge is the ones place, so amounts line up by digit in English and Arabic. */
.c-rows td.n,.tt-l td.n,.hbar .n,.lst .n{text-align:right;font-variant-numeric:tabular-nums}
.tt-f{font-family:var(--font-mono);font-size:11.5px;background:var(--color-surface-soft);border-radius:5px;padding:5px 7px;margin-top:6px}
.tt-w{color:var(--color-text-muted);font-size:11.5px;margin-top:6px}

/* ---------- Icons ----------
   <i class="ico ico-NAME" aria-hidden="true"></i>: 24px line drawings, stroke 2, round ends,
   drawn in the colour of the text around them. Sizes: 13px by default, .sm 12px, .md 15px,
   .lg 18px, .xl 23px, or set --ico-size. Put the meaning in words beside the icon.
   To change an icon everywhere, edit its drawing below. */
.ico {
  display: inline-block; flex: none; width: var(--ico-size, 13px); height: var(--ico-size, 13px);
  vertical-align: -2px; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ico.sm { --ico-size: 12px; } .ico.md { --ico-size: 15px; } .ico.lg { --ico-size: 18px; } .ico.xl { --ico-size: 23px; }
/* Arrows along the reading line point the other way in Arabic */
[dir="rtl"] :is(.ico-arrow-right, .ico-arrow-left, .ico-chevron-right) { transform: scaleX(-1); }
.ico-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E")}
.ico-x{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.ico-check-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 10'/%3E%3C/svg%3E")}
.ico-x-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.ico-check-square{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 12.3l2.8 2.8L16 9.6'/%3E%3C/svg%3E")}
.ico-alert{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17.5h.01'/%3E%3C/svg%3E")}
.ico-info{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
.ico-shield{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E")}
.ico-shield-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpolyline points='8.5 12 11 14.5 15.5 10'/%3E%3C/svg%3E")}
.ico-lock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.ico-unlock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.6-1.7'/%3E%3C/svg%3E")}
.ico-key{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.2'/%3E%3Cpath d='M11 12l9-9M16.5 6.5l3 3M14 9l2 2'/%3E%3C/svg%3E")}
.ico-eye{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E")}
.ico-flag{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V4M5.5 4h12l-2.5 4 2.5 4h-12'/%3E%3C/svg%3E")}
.ico-banknote{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E")}
.ico-wallet{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='3'/%3E%3Cpath d='M6 7l10-3v3'/%3E%3Cpath d='M16.5 13.5h.01'/%3E%3C/svg%3E")}
.ico-trend{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E")}
.ico-pie{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12A9 9 0 1 1 12 3v9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E")}
.ico-list{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
.ico-scale{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 7h14'/%3E%3Cpath d='M2 14l3-7 3 7a3 3 0 0 1-6 0z'/%3E%3Cpath d='M16 14l3-7 3 7a3 3 0 0 1-6 0z'/%3E%3C/svg%3E")}
.ico-target{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E")}
.ico-chart{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7.5 16.5v-5M12 16.5V7M16.5 16.5V10'/%3E%3C/svg%3E")}
.ico-gauge{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5a8.5 8.5 0 1 1 17 0'/%3E%3Cpath d='M12 17.5l4.2-5.2'/%3E%3Ccircle cx='12' cy='17.5' r='1'/%3E%3C/svg%3E")}
.ico-calc{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8.5 12h1M12 12h1M15.5 12h.01M8.5 16h1M12 16h1M15.5 16h.01'/%3E%3C/svg%3E")}
.ico-ask{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12 7.6L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E")}
.ico-share{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='8 7 12 3 16 7'/%3E%3Cpath d='M8 11H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2'/%3E%3C/svg%3E")}
.ico-pin{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l-1 6 4 4H6l4-4z'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")}
.ico-turn{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66L20 8.5'/%3E%3Cpolyline points='20 3.5 20 8.5 15 8.5'/%3E%3C/svg%3E")}
.ico-bulb{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.ico-refresh{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.9-3.5M4 4v3.5h3.5M4 13a8 8 0 0 0 14.9 3.5M20 20v-3.5h-3.5'/%3E%3C/svg%3E")}
.ico-search{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E")}
.ico-trash{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13'/%3E%3C/svg%3E")}
.ico-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E")}
.ico-start{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l5.2 3.5-5.2 3.5z'/%3E%3C/svg%3E")}
.ico-cursor{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l6 17 2.5-7L21 10.5z'/%3E%3C/svg%3E")}
.ico-connect{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v4M15 3v4M6.5 7h11v3.5a5.5 5.5 0 0 1-11 0V7zM12 16v5'/%3E%3C/svg%3E")}
.ico-fetch{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17.5a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 17.8 8a4.5 4.5 0 0 1 .7 9'/%3E%3Cpath d='M12 11v10M8.8 17.8L12 21l3.2-3.2'/%3E%3C/svg%3E")}
.ico-stage{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 12.5l9 5 9-5'/%3E%3Cpath d='M3 16.5l9 5 9-5'/%3E%3C/svg%3E")}
.ico-etl{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h13M14 4.5l3 3-3 3M20 16.5H7M10 13.5l-3 3 3 3'/%3E%3C/svg%3E")}
.ico-worker{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Cpath d='M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4'/%3E%3C/svg%3E")}
.ico-store{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.8'/%3E%3Cpath d='M4.5 5.5v13c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-13M4.5 12c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8'/%3E%3C/svg%3E")}
.ico-source{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='16' height='6.5' rx='1.5'/%3E%3Cpath d='M8 7.3h.01M8 16.8h.01'/%3E%3C/svg%3E")}
.ico-table{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.5'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9.5 9.5v10'/%3E%3C/svg%3E")}
.ico-rows{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")}
.ico-log{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8.5L18 6.5V21H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.ico-book{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20'/%3E%3C/svg%3E")}
.ico-branch{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.5' r='2.2'/%3E%3Ccircle cx='6' cy='18.5' r='2.2'/%3E%3Ccircle cx='18' cy='8' r='2.2'/%3E%3Cpath d='M6 7.7v8.6M18 10.2c0 4-4 4.6-10 7.2'/%3E%3C/svg%3E")}
.ico-zap{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E")}
.ico-clock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")}
.ico-wait{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11M6.5 21h11M7.5 3c0 5.5 9 5.5 9 9s-9 3.5-9 9M16.5 3c0 5.5-9 5.5-9 9s9 3.5 9 9'/%3E%3C/svg%3E")}
.ico-rename{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M4 12h6M4 17h9M16 9l4 3-4 3'/%3E%3C/svg%3E")}
.ico-type{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h8M9 6v12M14 12h5M16.5 12v6'/%3E%3C/svg%3E")}
.ico-tag{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5V4h8.5l8.5 8.5-8.5 8.5z'/%3E%3Ccircle cx='8' cy='8.5' r='1.3'/%3E%3C/svg%3E")}
.ico-gear{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E")}
.ico-user{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c1.2-4 4-6 7.5-6s6.3 2 7.5 6'/%3E%3C/svg%3E")}
.ico-robot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 4v4M9.5 17h5M2 13v3M22 13v3'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3Ccircle cx='9' cy='13' r='1.2'/%3E%3Ccircle cx='15' cy='13' r='1.2'/%3E%3C/svg%3E")}
.ico-board{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h18M6 13v6M18 13v6'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Ccircle cx='12' cy='6.5' r='2'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3C/svg%3E")}
.ico-firm{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-5h6v5'/%3E%3Cpath d='M9 10h.01M12 10h.01M15 10h.01M9 13h.01M12 13h.01M15 13h.01'/%3E%3C/svg%3E")}
.ico-arrow-right{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E")}
.ico-arrow-left{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M10 6.5L4.5 12l5.5 5.5'/%3E%3C/svg%3E")}
.ico-arrow-up{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6.5 10.5L12 5l5.5 5.5'/%3E%3C/svg%3E")}
.ico-arrow-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6.5 13.5L12 19l5.5-5.5'/%3E%3C/svg%3E")}
.ico-chevron-right{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.ico-chevron-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.ico-chevron-up{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.ico-unfold{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E")}
.ico-up{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l7 12H5z' fill='black'/%3E%3C/svg%3E")}
.ico-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19L5 7h14z' fill='black'/%3E%3C/svg%3E")}
.ico-check-bold{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E")}
.ico-x-bold{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}

/* ---------- Document pages ----------
   Reference documents (strategy, capability model, data pipeline) add the class
   "doc" to <body class="am">: brand bar, contents on the left, cover, numbered
   sections, tables in cards, tags, pop-up terms and footer. App screens are not affected. */
body.am:where(.doc){--bg:var(--color-bg);--card:var(--color-surface);--ink:var(--color-text);--mute:var(--color-text-muted);--line:var(--color-border);--soft:var(--color-surface-soft);--acc:var(--color-accent);--accbg:color-mix(in srgb,var(--color-accent) 12%,transparent);--warn:var(--color-attention);--warnbg:var(--color-attention-bg);--bad:var(--color-error);--badbg:var(--color-error-bg);--neu:var(--color-neutral);--neubg:var(--color-neutral-bg);--ok:var(--color-success);--okbg:var(--color-success-bg);--shadow:0 12px 32px rgba(15,20,40,.16)}
:where(.am.doc) *{box-sizing:border-box}
html:has(>body.am.doc){scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.am:where(.doc){background:var(--bg);color:var(--ink);font:15.5px/1.65 var(--font-sans);margin:0;padding:0 24px 72px}
.am:where(.doc) a{color:var(--acc);text-underline-offset:2px}
.am:where(.doc) :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.am:where(.doc) code{font-family:var(--font-mono);font-size:.85em;background:var(--soft);border:1px solid var(--line);padding:0 5px;border-radius:4px;overflow-wrap:anywhere}
.am:where(.doc) .ic{width:18px;height:18px;flex:none}
:where(.am.doc) .docbar{max-width:1480px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:18px 0 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mute)}
:where(.am.doc) .docbar .logo-wordmark{font-size:24px;line-height:1;color:var(--ink);letter-spacing:.02em}
:where(.am.doc) .docbar .sep{width:1px;height:18px;background:var(--line)}
:where(.am.doc) .docbar .right{margin-left:auto}
:where(.am.doc) .wrap{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px}
:where(.am.doc) .wrap>main{min-width:0;max-width:none;margin:0;padding:0}
:where(.am.doc) footer.docfoot{max-width:1480px;margin:48px auto 0;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--mute)}
:where(.am.doc) footer.docfoot .logo-wordmark{font-size:17px;color:var(--ink)}
:where(.am.doc) nav.toc{position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;padding:32px 0 24px;margin:0;font-size:12.5px;scrollbar-width:thin;display:block}
:where(.am.doc) nav.toc .g{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:16px 0 5px}
:where(.am.doc) nav.toc .g:first-child{margin-top:0}
:where(.am.doc) nav.toc a{display:flex;gap:6px;color:var(--mute);text-decoration:none;padding:2px 0 2px 8px;border-left:2px solid var(--line);line-height:1.4;white-space:normal}
:where(.am.doc) nav.toc a .k{font:500 10.5px/1.7 var(--font-mono);min-width:1.4em;flex:none}
:where(.am.doc) nav.toc a:hover{color:var(--ink);border-left-color:var(--mute)}
:where(.am.doc) nav.toc a.on{color:var(--acc);border-left-color:var(--acc);font-weight:600}
:where(.am.doc) nav.toc a.g{display:block;border-left:0;padding:0;font-weight:600}
:where(.am.doc) nav.toc a.g.on{color:var(--acc)}
:where(.am.doc) header.cover{padding:36px 0 30px;scroll-margin-top:40px}
:where(.am.doc) .kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:600;margin:0 0 8px}
.am:where(.doc) h1{font-size:36px;line-height:1.15;margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.015em}
.am:where(.doc) .lede{font-size:16.5px;line-height:1.7;margin:18px 0 0;max-width:none}
:where(.am.doc) .scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
:where(.am.doc) .scope>div{border-top:2px solid var(--acc);padding:8px 0 0;font-size:13.5px;line-height:1.5}
:where(.am.doc) .scope b{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:2px}
:where(.am.doc) .howread{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12.5px;color:var(--mute);margin:22px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
:where(.am.doc) .howread>b{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
:where(.am.doc) .howread>span{display:inline-flex;align-items:center;gap:6px}
:where(.am.doc) .howread .ic{width:15px;height:15px;color:var(--acc)}
:where(.am.doc) .docmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:13px;color:var(--mute);margin-top:18px}
:where(.am.doc) .docmeta b{color:var(--ink);font-weight:600}
:where(.am.doc) :where(.wrap main>section){padding:40px 0 16px;border-top:1px solid var(--line);scroll-margin-top:8px}
:where(.am.doc) :where(.wrap main>section>h2){display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:23px;line-height:1.25;margin:0 0 8px;text-wrap:balance;letter-spacing:-.01em}
:where(.am.doc) :where(.wrap main>section>h2 .n){font:500 13px var(--font-mono);color:var(--mute)}
:where(.am.doc) h2 .totop{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:0;color:var(--mute);text-decoration:none;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 10px}
:where(.am.doc) h2 .totop .ic,:where(.am.doc) h2 .totop .ico{width:13px;height:13px}
:where(.am.doc) h2 .totop:hover{color:var(--acc);border-color:var(--acc)}
:where(.am.doc) :where(.wrap) h3{font-size:16px;margin:28px 0 6px;scroll-margin-top:8px}
:where(.am.doc) :where(.wrap) ul{padding-left:20px;margin:10px 0}
:where(.am.doc) :where(.wrap) li{margin:5px 0}
:where(.am.doc) :where(.wrap) li::marker{color:var(--mute)}
:where(.am.doc) :where(.wrap) p{max-width:none}
:where(.am.doc) .desc{font-size:15.5px;margin:0 0 16px}
:where(.am.doc) .wrap .sub{color:var(--mute);margin:0 0 14px;max-width:none;font-size:inherit}
:where(.am.doc) .fnotes{margin:24px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;line-height:1.55;color:var(--mute)}
:where(.am.doc) .fnotes .fh{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin:0 0 4px}
:where(.am.doc) .fnotes b{color:var(--ink);font-weight:600}
:where(.am.doc) .callout{border-left:3px solid var(--acc);padding:10px 14px;background:var(--accbg);border-radius:0 10px 10px 0;margin:12px 0}
:where(.am.doc) .tcard,:where(.am.doc) details.tbl{border:1px solid var(--line);border-radius:12px;margin:12px 0;background:var(--card);overflow:hidden}
:where(.am.doc) details.tbl>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;user-select:none;padding:10px 16px;font-weight:600;font-size:14px;background:var(--soft)}
:where(.am.doc) details.tbl>summary::-webkit-details-marker{display:none}
:where(.am.doc) details.tbl[open]>summary{border-bottom:1px solid var(--line)}
:where(.am.doc) details.tbl>summary:hover{color:var(--acc)}
:where(.am.doc) .chev{width:15px;height:15px;color:var(--mute);transition:transform .15s}
:where(.am.doc) details[open]>summary .chev{transform:rotate(90deg)}
:where(.am.doc) summary .cnt{margin-left:auto;font:500 12px var(--font-mono);color:var(--mute);white-space:nowrap}
:where(.am.doc) summary .act{font-size:12px;font-weight:600;color:var(--acc);min-width:2.6em;text-align:right}
:where(.am.doc) summary .act::before{content:"Show"}
:where(.am.doc) details[open]>summary .act::before{content:"Hide"}
:where(.am.doc) .tcard>.sub,:where(.am.doc) details.tbl>.sub{margin:12px 16px 0;font-size:13.5px}
:where(.am.doc) .tw{overflow-x:auto}
:where(.am.doc) :where(.wrap) table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.55;margin:0;border:0;border-radius:0}
:where(.am.doc) :where(.wrap) th,:where(.am.doc) :where(.wrap) td{text-align:left;vertical-align:top;padding:9px 16px;border-bottom:1px solid var(--line);background:none}
:where(.am.doc) :where(.wrap) th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:600}
:where(.am.doc) :where(.wrap) tbody tr:last-child td,:where(.am.doc) :where(.wrap) table tr:last-child td{border-bottom:0}
:where(.am.doc) :where(.wrap) tbody tr:hover td{background:color-mix(in srgb,var(--acc) 4%,transparent)}
:where(.am.doc) .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:1px 9px;white-space:nowrap;vertical-align:1px}
:where(.am.doc) .tag.todo{background:var(--warnbg);color:var(--warn);border:1px dashed var(--warn)}
:where(.am.doc) .tag.done{background:var(--okbg);color:var(--ok)}
:where(.am.doc) .tag.gap{background:var(--warnbg);color:var(--warn)}
:where(.am.doc) .tag.neu{background:var(--neubg);color:var(--neu)}
:where(.am.doc) .hn{position:relative}
:where(.am.doc) .hn.term{display:inline}
:where(.am.doc) .term>.tm{font-weight:600;cursor:pointer;border-bottom:1.5px dotted var(--acc)}
:where(.am.doc) .term>.tm:hover{color:var(--acc)}
:where(.am.doc) .tip{display:none;position:absolute;z-index:30;left:0;top:calc(100% + 8px);width:min(420px,calc(100vw - 32px));background:var(--card);border:1px solid var(--acc);border-radius:12px;padding:12px 14px;font-size:13px;font-weight:400;line-height:1.5;box-shadow:var(--shadow);color:var(--ink);text-align:left;white-space:normal;letter-spacing:0;text-transform:none}
:where(.am.doc) .tip b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-top:9px}
:where(.am.doc) .tip b:first-child{margin-top:0}
:where(.am.doc) .tip ul{margin:2px 0 0;padding-left:16px}
:where(.am.doc) .tip li{margin:1px 0}
:where(.am.doc) .hn.open>.tip{display:block}
@media (max-width:1000px){:where(.am.doc) .wrap{grid-template-columns:1fr;gap:0}:where(.am.doc) nav.toc{position:sticky;top:0;z-index:40;max-height:none;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line)}:where(.am.doc) nav.toc .g{display:none}:where(.am.doc) nav.toc a{flex:none;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:3px 10px}:where(.am.doc) nav.toc a.g{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink);margin:0;font-size:12.5px;letter-spacing:0;text-transform:none}:where(.am.doc) nav.toc a .k{line-height:1.4}:where(.am.doc) nav.toc a.on{border-color:var(--acc)}:where(.am.doc) .scope{grid-template-columns:1fr}:where(.am.doc) :where(.wrap main>section),:where(.am.doc) :where(.wrap) header.cover{scroll-margin-top:56px}}
@media (max-width:760px){.am:where(.doc) h1{font-size:28px}:where(.am.doc) .docbar .hide-s{display:none}}
@media (max-width:600px){body.am:where(.doc){padding:0 16px 56px}:where(.am.doc) :where(.wrap) th,:where(.am.doc) :where(.wrap) td{padding:8px 12px}:where(.am.doc) h2 .totop{margin-left:0}}
@media (prefers-reduced-motion:reduce){html:has(>body.am.doc){scroll-behavior:auto}:where(.am.doc) *{transition:none!important}}
@media print{body.am:where(.doc){padding:0;font-size:11pt}:where(.am.doc) nav.toc,:where(.am.doc) .docbar .right,:where(.am.doc) .totop{display:none}:where(.am.doc) .wrap{display:block}:where(.am.doc) .tip{display:none!important}:where(.am.doc) :where(.wrap main>section){break-inside:auto;padding-top:20px}:where(.am.doc) details.tbl,:where(.am.doc) .tcard{break-inside:avoid}:where(.am.doc) summary .act{display:none}}
/* ---------- Document components: governance and licensing ----------
   For reference pages (body class "am doc"): a claim box, a hint row with an icon, stat tiles,
   licence route cards with meters, a segmented toggle, a top-down org chart, a flow rail, duty
   cards, score and gauge tiles, applicability pills, an authority matrix with letter marks and
   a layer stack. A tone class or an inline --rc, --nc, --lc or --c sets each item's colour. */
:where(.am.doc) .claim-box{font-size:18px;font-weight:600;margin:4px 0 14px;border-left:3px solid var(--acc);padding:10px 14px;background:var(--accbg);border-radius:0 10px 10px 0}
:where(.am.doc) .hint-row{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute);margin:0 0 10px}
:where(.am.doc) .hint-row .ico{--ico-size:15px;width:15px;height:15px}
:where(.am.doc) .stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px;margin:10px 0 14px}
:where(.am.doc) .stat-tiles>div{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px;font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:3px}
:where(.am.doc) .stat-tiles b{font:600 24px/1.1 var(--font-mono);color:var(--c,var(--acc))}
:where(.am.doc) .stat-tiles span{color:var(--mute)}
:where(.am.doc) .tone-accent{--rc:var(--color-accent)}
:where(.am.doc) .tone-p4{--rc:var(--phase-4)}
:where(.am.doc) .tone-ok{--rc:var(--color-positive)}
:where(.am.doc) .tone-p5{--rc:var(--phase-5)}
/* Licence route cards, each with meters */
:where(.am.doc) .lic-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin:8px 0 14px}
:where(.am.doc) .lic-route{border:1px solid var(--line);border-top:3px solid var(--rc,var(--acc));border-radius:12px;background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
:where(.am.doc) .lic-route h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(.am.doc) .lic-law{font-size:12.5px;color:var(--mute);margin:0}
:where(.am.doc) .lic-verdict{font-size:13.5px;margin:0}
:where(.am.doc) .meter{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12.5px}
:where(.am.doc) .meter-bar{height:8px;border-radius:5px;background:var(--soft);position:relative;overflow:hidden}
:where(.am.doc) .meter-bar>i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--rc,var(--acc))}
:where(.am.doc) .meter-val{font:600 12px var(--font-mono);color:var(--mute);white-space:nowrap}
/* Segmented toggle: buttons, the chosen one has "on" */
:where(.am.doc) .seg-toggle{display:inline-flex;flex-wrap:wrap;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--soft);margin:4px 0 12px}
:where(.am.doc) .seg-toggle button{all:unset;cursor:pointer;font-size:13px;font-weight:600;padding:5px 14px;border-radius:999px;color:var(--mute)}
:where(.am.doc) .seg-toggle button.on{background:var(--card);color:var(--ink);box-shadow:var(--elev-1)}
:where(.am.doc) .seg-toggle button:focus-visible{outline:2px solid var(--acc)}
/* Org chart, top down: .orgchart > .orgchart-inner > .orgchart-top (with .orgchart-side committees),
   then ul.orgchart-root of nested ul/li with connector lines; ul.orgchart-stack stacks leaves. */
:where(.am.doc) .org-node{position:relative;border:1.5px solid var(--nc);background:color-mix(in srgb,var(--nc) 8%,var(--card));border-radius:10px;padding:6px 9px;width:150px}
/* Node types set the colour (--nc) of a node, a legend swatch or a legend icon */
:where(.am.doc) .human{--nc:var(--color-accent)}
:where(.am.doc) .outsourced{--nc:var(--phase-4)}
:where(.am.doc) .agent{--nc:var(--color-positive)}
:where(.am.doc) .external{--nc:var(--color-text-muted)}
:where(.am.doc) .board{--nc:var(--phase-2)}
:where(.am.doc) .org-node.agent{border-style:dashed}
:where(.am.doc) .org-node.off{opacity:.35}
:where(.am.doc) .org-node-title{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-inline-end:20px}
:where(.am.doc) .org-node-role{font-size:11.5px;color:var(--mute);line-height:1.35;margin-top:2px}
:where(.am.doc) .org-node .org-node-ico{position:absolute;top:7px;inset-inline-end:8px;--ico-size:16px;width:16px;height:16px;color:var(--nc)}
:where(.am.doc) .flag-warn{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:1px 8px;background:var(--warnbg);color:var(--warn);border:1px solid var(--warn)}
:where(.am.doc) .orgchart{overflow-x:auto;padding:4px 0 10px}
:where(.am.doc) .orgchart-inner{min-width:1080px}
:where(.am.doc) .orgchart-top{display:flex;justify-content:center;align-items:center;gap:22px;margin-bottom:18px}
:where(.am.doc) .orgchart-top>.org-node{width:190px}
:where(.am.doc) .orgchart-side{display:flex;gap:8px;position:relative;padding-left:22px}
:where(.am.doc) .orgchart-side::before{content:"";position:absolute;left:0;top:50%;width:22px;border-top:2px dashed var(--line)}
:where(.am.doc) .orgchart-side .org-node{border-style:dotted}
:where(.am.doc) .orgchart ul{display:flex;justify-content:center;list-style:none;margin:0;padding:18px 0 0;position:relative}
:where(.am.doc) .orgchart li{display:flex;flex-direction:column;align-items:center;position:relative;padding:18px 5px 0}
:where(.am.doc) .orgchart ul.orgchart-root{padding-top:0}
:where(.am.doc) .orgchart ul.orgchart-root>li{padding-top:0}
:where(.am.doc) .orgchart li::before,:where(.am.doc) .orgchart li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:18px;border-top:2px solid var(--line)}
:where(.am.doc) .orgchart li::after{right:auto;left:50%;border-left:2px solid var(--line)}
:where(.am.doc) .orgchart li:only-child::before,:where(.am.doc) .orgchart li:only-child::after{display:none}
:where(.am.doc) .orgchart li:first-child::before,:where(.am.doc) .orgchart li:last-child::after{border-top:0}
:where(.am.doc) .orgchart li:last-child::before{border-right:2px solid var(--line)}
:where(.am.doc) .orgchart ul ul::before{content:"";position:absolute;top:0;left:50%;height:18px;border-left:2px solid var(--line)}
:where(.am.doc) .orgchart ul.orgchart-root::before{content:"";position:absolute;top:-18px;left:50%;height:18px;border-left:2px solid var(--line)}
:where(.am.doc) .orgchart ul.orgchart-stack{flex-direction:column;align-items:center;gap:6px;padding-top:12px}
:where(.am.doc) .orgchart ul.orgchart-stack::before{height:100%;top:0}
:where(.am.doc) .orgchart ul.orgchart-stack>li{padding:0;z-index:1}
:where(.am.doc) .orgchart ul.orgchart-stack>li::before,:where(.am.doc) .orgchart ul.orgchart-stack>li::after{display:none}
:where(.am.doc) .orgchart ul.orgchart-stack .org-node{background:color-mix(in srgb,var(--nc) 8%,var(--bg))}
:where(.am.doc) .legend-row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--mute);margin:10px 0 0}
:where(.am.doc) .legend-row>span{display:inline-flex;align-items:center;gap:6px}
:where(.am.doc) .legend-row .swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--nc,var(--line));background:color-mix(in srgb,var(--nc,var(--line)) 10%,transparent)}
:where(.am.doc) .legend-row .swatch.agent{border-style:dashed}
:where(.am.doc) .legend-row .ico{--ico-size:15px;width:15px;height:15px;color:var(--nc,currentColor)}
/* Flow rail: numbered steps in a row; each step is a button that opens its tip */
:where(.am.doc) .flow-rail{list-style:none;padding:0;margin:8px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
:where(.am.doc) .flow-rail>li{margin:0}
:where(.am.doc) .flow-step{all:unset;box-sizing:border-box;cursor:help;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:10px;background:var(--card);padding:10px 12px;height:100%;width:100%;font-size:13px;line-height:1.45}
:where(.am.doc) .flow-step:focus-visible{outline:2px solid var(--acc)}
:where(.am.doc) .flow-step b{font-size:14px}
:where(.am.doc) .flow-step-sub{color:var(--mute)}
:where(.am.doc) .flow-step-num{font:600 11px var(--font-mono);color:var(--acc)}
/* Duty cards; "main" marks the lead duty */
:where(.am.doc) .duty-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:8px;margin:8px 0 12px}
:where(.am.doc) .duty-card{border:1px solid var(--line);border-left:3px solid var(--phase-4);border-radius:0 10px 10px 0;background:var(--card);padding:8px 12px;font-size:13px;line-height:1.45}
:where(.am.doc) .duty-card.main{border-left-color:var(--acc);background:var(--accbg)}
:where(.am.doc) .duty-card b{display:block;font-size:13.5px}
:where(.am.doc) .duty-who{color:var(--mute);font-size:12px}
/* Score tile with a gauge, beside a list of domain rows */
:where(.am.doc) .score-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
:where(.am.doc) .score-tile{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
:where(.am.doc) .score-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
:where(.am.doc) .score-num{font:600 30px/1.15 var(--font-mono)}
:where(.am.doc) .score-sub{display:block;font-size:12.5px;color:var(--mute)}
:where(.am.doc) .gauge-bar{position:relative;height:9px;border-radius:5px;background:var(--soft);margin-top:9px}
:where(.am.doc) .gauge-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--acc);transition:width .25s}
:where(.am.doc) .gauge-target{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ok);transition:left .25s}
:where(.am.doc) .dom-list{display:grid;gap:8px}
:where(.am.doc) .dom-row{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--card);font-size:13px}
:where(.am.doc) .dom-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
:where(.am.doc) .dom-head b{font-family:var(--font-mono);font-size:12px;margin-inline-end:6px}
:where(.am.doc) .dom-val{font:600 13px var(--font-mono)}
:where(.am.doc) .req-list{margin:10px 0 0;padding-left:18px;font-size:13px}
:where(.am.doc) .req-list li{margin:3px 0}
:where(.am.doc) .gauge-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--mute);margin-top:10px}
:where(.am.doc) .gauge-key>span{display:inline-flex;align-items:center;gap:6px}
:where(.am.doc) .key-fill{width:14px;height:8px;border-radius:4px;background:var(--acc)}
:where(.am.doc) .key-target{width:2px;height:14px;background:var(--ok)}
/* Applicability pills: yes, limited (likely or partly), no */
:where(.am.doc) .apply-pill{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap}
:where(.am.doc) .apply-pill.yes{background:var(--okbg);color:var(--ok)}
:where(.am.doc) .apply-pill.limited{background:var(--warnbg);color:var(--warn)}
:where(.am.doc) .apply-pill.no{background:var(--neubg);color:var(--neu)}
/* Authority matrix: letter marks A approves, R does, C consulted, V verifies, I informed; group rows */
:where(.am.doc) .auth-matrix td.mark-cell{text-align:center}
:where(.am.doc) .auth-matrix tr.group-row td{background:var(--soft);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
:where(.am.doc) .auth-matrix th small{font-weight:400;color:var(--mute)}
:where(.am.doc) .raci{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font:700 11.5px var(--font-mono)}
:where(.am.doc) .raci.raci-a{background:var(--acc);color:var(--color-on-accent)}
:where(.am.doc) .raci.raci-r{background:var(--okbg);color:var(--ok)}
:where(.am.doc) .raci.raci-c{background:var(--warnbg);color:var(--warn)}
:where(.am.doc) .raci.raci-v{background:color-mix(in srgb,var(--phase-4) 18%,transparent);color:var(--phase-4)}
:where(.am.doc) .raci.raci-i{background:var(--neubg);color:var(--neu)}
:where(.am.doc) .raci-note{display:inline-block;margin-inline-start:6px;font-size:10.5px;font-weight:700;color:var(--phase-4);border:1px solid var(--phase-4);border-radius:999px;padding:0 6px}
/* Layer stack: numbered layers, each with its own colour (--lc) */
:where(.am.doc) .doc-subhead{font-size:15px;margin:18px 0 8px}
:where(.am.doc) .layer-stack{display:grid;gap:6px;margin:0 0 12px}
:where(.am.doc) .layer-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,230px);gap:12px;align-items:center;border:1px solid var(--line);border-left:5px solid var(--lc,var(--acc));border-radius:10px;background:color-mix(in srgb,var(--lc,var(--acc)) 6%,var(--card));padding:10px 12px}
:where(.am.doc) .layer-num{font:700 18px var(--font-mono);color:var(--lc,var(--acc));text-align:center}
:where(.am.doc) .layer-body b{display:block;font-size:14px}
:where(.am.doc) .layer-body span{font-size:13px;color:var(--mute);line-height:1.45}
:where(.am.doc) .layer-keys{display:flex;flex-direction:column;gap:4px;font-size:12px}
:where(.am.doc) .layer-key{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--lc,var(--acc))}
:where(.am.doc) .layer-key .ico{--ico-size:13px;width:13px;height:13px}
:where(.am.doc) .layer-kw{color:var(--mute)}
:where(.am.doc) .foot-note{font-size:12.5px;color:var(--mute);margin:6px 0 0}
@media (max-width:760px){:where(.am.doc) .score-grid{grid-template-columns:1fr}}
@media (max-width:640px){:where(.am.doc) .layer-row{grid-template-columns:28px 1fr}:where(.am.doc) .layer-keys{grid-column:2}}
/* Shared page menu: the same bar at the top of every reference page (strategy, capability
   model, data pipeline, owner journey, wireframes), with the current page marked
   aria-current="page". Pages whose body has 16px side padding add "inset" so the bar lines up. */
.am .sitebar{box-sizing:border-box;display:flex;align-items:center;gap:6px 18px;max-width:1480px;margin:0 auto;padding:16px 0 12px;border-bottom:1px solid var(--color-border);font-size:13.5px}
body.am>.sitebar.inset{margin-inline:max(8px,calc((100% - 1480px) / 2))}
body.am:has(>.sitebar.inset:first-child){padding-top:0}
body.am>.sitebar.inset+main{margin-top:28px}
.am .sitebar .logo-wordmark{font-size:24px;line-height:1;color:var(--color-text);letter-spacing:.02em;text-decoration:none;flex:none}
.am .sitebar .sl{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.am .sitebar .sl a{flex:none;color:var(--color-text-muted);text-decoration:none;padding:5px 11px;border-radius:999px;font-weight:600;white-space:nowrap}
.am .sitebar .sl a:hover{color:var(--color-text);background:var(--color-surface-soft)}
.am .sitebar .sl a[aria-current=page]{color:var(--color-accent);background:var(--color-accent-bg)}
/* The menu stays pinned at the top while the page scrolls. It is one row of fixed height
   (--sitebar-h), so a jump to an anchor and the contents list land just below it; on a phone the
   page links scroll sideways within the row. Its background runs the full width of the window.
   In print it scrolls away with the page. Pages without the menu are not affected. */
html:has(>body.am>.sitebar){--sitebar-h:60px;scroll-padding-top:var(--sitebar-h)}
.am .sitebar{position:sticky;top:0;z-index:45;height:var(--sitebar-h);padding-block:0;flex-wrap:nowrap;background:var(--color-bg);box-shadow:0 0 0 100vmax var(--color-bg);clip-path:inset(0 -100vmax)}
.am .sitebar .sl{flex-wrap:nowrap;margin:0}
html:has(>body.am>.sitebar) body.am nav.toc{top:var(--sitebar-h);max-height:calc(100vh - var(--sitebar-h))}
@media (max-width:760px){html:has(>body.am>.sitebar){--sitebar-h:52px}.am .sitebar{gap:6px 12px}.am .sitebar .logo-wordmark{font-size:20px}.am .sitebar .sl{flex:1 1 auto}}
@media (max-width:600px){body.am>.sitebar.inset{margin-inline:0}}
@media print{html:has(>body.am>.sitebar){scroll-padding-top:0}.am .sitebar{position:static;height:auto;box-shadow:none;clip-path:none}.am .sitebar .sl{display:none}}
/* Marketing dropdown in the shared menu. The button sits in .sl with the links; the panel is placed
   at the end of the page (outside the pinned bar, whose clip would cut it off), fixed just under the
   bar and lined up with the button by the menu script. */
.am .sitebar .sl .sl-dd{flex:none;display:inline-flex;align-items:center;gap:4px;margin:0;border:0;background:none;font:inherit;font-weight:600;color:var(--color-text-muted);padding:5px 11px;padding-inline-end:9px;border-radius:var(--radius-pill);white-space:nowrap;cursor:pointer}
.am .sitebar .sl .sl-dd:hover{color:var(--color-text);background:var(--color-surface-soft)}
.am .sitebar .sl .sl-dd.on{color:var(--color-accent);background:var(--color-accent-bg)}
.am .sitebar .sl-dd .ico{--ico-size:14px;transition:transform .15s}
.am .sitebar .sl-dd[aria-expanded=true] .ico{transform:rotate(180deg)}
.am .sl-menu{position:fixed;top:var(--sitebar-h,60px);left:8px;z-index:46;display:flex;flex-direction:column;gap:2px;min-width:190px;max-width:calc(100vw - 16px);margin-top:4px;padding:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow);font-size:13.5px}
.am .sl-menu[hidden]{display:none}
.am .sl-menu a{padding:8px 12px;border-radius:var(--radius-sm);color:var(--color-text);font-weight:600;text-decoration:none;white-space:nowrap}
.am .sl-menu a:hover,.am .sl-menu a:focus-visible{background:var(--color-surface-soft)}
.am .sl-menu a[aria-current=page]{color:var(--color-accent);background:var(--color-accent-bg)}
@media print{.am .sitebar .sl-dd,.am .sl-menu{display:none}}

/* Arabic document pages (html dir="rtl"; the developer pages, class "dev", carry their own):
   the document frame above is laid out left to right; these rules mirror it. Pop-ups keep opening from the left edge of their term: overflow past
   the right edge of a right-to-left page is clipped, while overflow past the left edge would
   widen the page. English words and <bdi> runs inside keep the Latin face; the wordmark keeps its own. */
html[dir="rtl"]>body.am.doc:not(.dev){font-family:var(--font-arabic);line-height:1.8}
html[dir="rtl"] .am.doc:not(.dev) :is(h1,h2,h3,.kicker,.lede,.desc,.scope,.howread,nav.toc,th,td,.tip,.callout){font-family:var(--font-arabic)}
html[dir="rtl"] .am.doc:not(.dev) nav.toc a{padding:2px 8px 2px 0;border-left:0;border-right:2px solid var(--line)}
html[dir="rtl"] .am.doc:not(.dev) nav.toc a:hover{border-right-color:var(--mute)}
html[dir="rtl"] .am.doc:not(.dev) nav.toc a.on{border-right-color:var(--acc)}
html[dir="rtl"] .am.doc:not(.dev) nav.toc a.g{border-right:0;padding:0}
html[dir="rtl"] .am.doc:not(.dev) h2 .totop{margin-left:0;margin-right:auto}
html[dir="rtl"] :where(.am.doc:not(.dev) .wrap) ul{padding-left:0;padding-right:20px}
html[dir="rtl"] .am.doc:not(.dev) .callout{border-left:0;border-right:3px solid var(--acc);border-radius:10px 0 0 10px}
html[dir="rtl"] .am.doc:not(.dev) .wrap th,html[dir="rtl"] .am.doc:not(.dev) .wrap td,html[dir="rtl"] .am.doc:not(.dev) .tip{text-align:right}
html[dir="rtl"] .am.doc:not(.dev) [lang="en"]:not(.logo-wordmark),html[dir="rtl"] .am.doc:not(.dev) bdi{font-family:var(--font-sans)}
html[dir="rtl"] .am.doc:not(.dev) bdi{white-space:nowrap}
html[dir="rtl"] .am.doc:not(.dev) .scope b,html[dir="rtl"] .am.doc:not(.dev) .kicker{letter-spacing:0}
@media (max-width:1000px){html[dir="rtl"] .am.doc:not(.dev) nav.toc a,html[dir="rtl"] .am.doc:not(.dev) nav.toc a.g{border:1px solid var(--line);padding:3px 10px}html[dir="rtl"] .am.doc:not(.dev) nav.toc a.on{border-color:var(--acc)}}

/* Brand voice guide and glossary (body class "am doc vg"): who we are and are not, the rules
   with examples, a card marked up part by part, and what we say now, later and never.
   Arabic editions set their smaller parts a half step larger, as Arabic script needs. */
.am.vg [lang="ar"]{font-family:var(--font-arabic)}
.am.vg .wrap td[lang="ar"],.am.vg td[dir="rtl"],.am.vg th[dir="rtl"]{text-align:right}
.am.vg span[lang="ar"]{text-align:start}
.am.vg .edition{display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0}
.am.vg .persona{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;margin:12px 0}
.am.vg .persona>div{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
.am.vg .persona b{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.am.vg .persona .ico{--ico-size:16px}
.am.vg .persona .is .ico{color:var(--ok)}
.am.vg .persona .isnt .ico{color:var(--bad)}
.am.vg .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.am.vg .three>div{border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:12px;background:var(--card);padding:12px 14px;font-size:14px}
.am.vg .three b{display:block;font-size:16px;margin-bottom:2px}
.am.vg .three .why{display:block;color:var(--mute);font-size:13px;margin-top:6px}
.am.vg .rules{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px;counter-reset:r}
.am.vg .wrap .rules li{margin:0;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
.am.vg .rules li::before{counter-increment:r;content:counter(r);grid-row:span 2;width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--color-on-accent);display:grid;place-items:center;font:600 12px var(--font-mono)}
.am.vg .rules li>b{font-size:15px}
.am.vg .rules .ex{font-size:13.5px;color:var(--mute)}
.am.vg .dd td:nth-child(2){color:var(--ok)}
.am.vg .dd td:nth-child(3){color:var(--mute);text-decoration:line-through;text-decoration-color:var(--bad)}
.am.vg .anat{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start;margin:14px 0}
.am.vg .mock{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:16px 18px;box-shadow:var(--shadow)}
.am.vg .mock p{margin:0}
.am.vg .mock .q{font-weight:600;font-size:15px}
.am.vg .mock .fig{font:600 30px/1.2 var(--font-sans);margin-top:10px}
.am.vg .mock .lbl{font-size:13px;color:var(--mute)}
.am.vg .mock .cmp{font-size:13.5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.am.vg .mock .u{text-decoration:underline dotted var(--acc) 2px;text-underline-offset:3px}
.am.vg .mock .foot{font-size:12px;color:var(--mute);margin-top:12px}
.am.vg .pin{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--color-on-accent);font:600 10.5px/1 var(--font-mono);vertical-align:2px;margin-inline-start:6px}
.am.vg .keys{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px}
.am.vg .wrap .keys li{margin:0;display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px}
.am.vg .keys .pin{margin:2px 0 0}
.am.vg .keys .part{font-weight:600}
.am.vg .ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.am.vg .ladder>div{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;font-size:13.5px}
.am.vg .ladder .st{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:6px}
.am.vg .ladder .now{border-top:3px solid var(--ok)}
.am.vg .ladder .later{border-top:3px solid var(--acc)}
.am.vg .ladder .never{border-top:3px solid var(--bad)}
.am.vg .ladder .now .ico{color:var(--ok)}
.am.vg .ladder .later .ico{color:var(--acc)}
.am.vg .ladder .never .ico{color:var(--bad)}
.am.vg .wrap .ladder ul{margin:6px 0 0;padding:0;padding-inline-start:18px}
.am.vg .ladder li{margin:3px 0}
.am.vg .tagline{font-size:20px;font-weight:600;margin:4px 0}
.am.vg .tagline+.tagline{margin-top:10px}
.am.vg .srcs{margin:10px 0;padding:0;padding-inline-start:20px}
.am.vg .srcs li{margin:6px 0}
html[dir="rtl"] .am.vg .three>div,html[dir="rtl"] .am.vg .keys{font-size:14.5px}
html[dir="rtl"] .am.vg .three .why,html[dir="rtl"] .am.vg .mock .lbl{font-size:13.5px}
html[dir="rtl"] .am.vg .rules li>b,html[dir="rtl"] .am.vg .mock .q,html[dir="rtl"] .am.vg .ladder .st{font-size:15.5px}
html[dir="rtl"] .am.vg .rules .ex,html[dir="rtl"] .am.vg .mock .cmp,html[dir="rtl"] .am.vg .ladder>div{font-size:14px}
html[dir="rtl"] .am.vg .mock .fig{line-height:1.3}
html[dir="rtl"] .am.vg .mock .u{text-underline-offset:4px}
html[dir="rtl"] .am.vg .mock .foot{font-size:12.5px}
html[dir="rtl"] .am.vg .keys .pin{margin-top:4px}
/* The glossary (class "gl") lets long English terms and code wrap inside its table cells. */
.am.vg.gl code{font-family:var(--font-mono);font-size:12.5px;word-break:break-all;white-space:normal}
html[dir="rtl"] .am.vg.gl td bdi{white-space:normal}
@media (max-width:760px){.am.vg :is(.three,.ladder,.anat){grid-template-columns:minmax(0,1fr)}}

/* The owner app's own top bars stay pinned too: the header of the public pages (landing, sample
   company, where data is kept) and the top row of the signed-in and sign-in screens. The top row
   sticks a little below the window edge, with a band of page colour above and below it, so the
   page looks the same until it scrolls. On a phone the row stays one line and its links scroll
   sideways. The card showcase page keeps its row in place, as its colour switch sits in that corner.
   In print both scroll away with the page. */
html:has(>body.am>header.land-nav){scroll-padding-top:72px}
body.am>header.land-nav{position:sticky;top:0;z-index:45;background:var(--color-bg)}
html:has(>body.am>main>.top:first-child){scroll-padding-top:60px}
body.am:not(:has(>main>.theme))>main>.top:first-child{position:sticky;top:10px;z-index:45;background:var(--color-bg);box-shadow:0 0 0 100vmax var(--color-bg);clip-path:inset(-10px -100vmax -8px)}
@media (max-width:600px){body.am>main>.top:first-child{flex-wrap:nowrap}body.am>main>.top:first-child .logo{flex:none}body.am>main>.top:first-child>nav{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}body.am>main>.top:first-child>nav a{flex:none;white-space:nowrap}}
@media print{html:has(>body.am>header.land-nav),html:has(>body.am>main>.top:first-child){scroll-padding-top:0}body.am>header.land-nav,body.am:not(:has(>main>.theme))>main>.top:first-child{position:static;box-shadow:none;clip-path:none}}

/* ---------- App page: the frame of a signed-in app page (body class "am app"): width, top bar, language link, test notice. ---------- */
.am.app main{max-width:var(--page-width)}
.am.app [hidden]{display:none!important}
.am.app .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 var(--space-5)}
.am.app .top .logo{font-size:24px;color:var(--color-text);text-decoration:none}
.am.app .lang{font-size:13px;color:var(--color-text-muted);text-decoration:none;padding:2px 4px}
.am.app .lang:hover{color:var(--color-accent)}
.am.app .lang[lang="ar"]{font-family:var(--font-arabic)}
.am.app .lang[lang="en"]{font-family:var(--font-sans)}
.am.app .test-mode{margin:0 0 var(--space-4)}
.am.app .app-foot{border-top:1px solid var(--color-border);margin:var(--space-6) 0 0;padding:12px 0 24px;display:flex;flex-wrap:wrap;gap:6px 16px}
.am.app .app-foot .lang{display:inline-flex;gap:6px;align-items:center}
.am.app .btn[disabled]{opacity:.6;cursor:default}
.am.app .top{flex-wrap:wrap}
.am.app .top .logo{white-space:nowrap}
.am.app.cards main{max-width:1040px}
.am.app .read-width{max-width:var(--read-width)}
.app-links{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:0}
.am.app .app-links a[aria-current="page"]{color:var(--color-accent);font-weight:600}
.app-view{display:flex;flex-direction:column;gap:14px;min-width:0}
.app-view>h1,.app-view>.lede{margin:0}
.company-pick{max-width:420px;margin:0 0 var(--space-4)}
.company-name{margin:-12px 0 var(--space-4)}
.am.app .page-note{margin:0 0 var(--space-4);max-width:var(--read-width)}
.am.app .page-hint{margin:0 0 var(--space-3);max-width:var(--read-width)}
.am.app .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Home: the first-proof cards with their "Does this match?" row, the greeting and ask bar, pinned cards, and each answer as a large card with follow-ups. ---------- */
.hm-actions{display:flex;gap:8px;flex-wrap:wrap}
.hm-h2{font-size:15px;margin:8px 0 0}
.hm-proof{align-items:start}
/* The three medium cards: a column drops before a card gets narrower than the medium card width. */
.hm-proof.grid3{grid-template-columns:repeat(auto-fit,minmax(min(var(--card-min-width),100%),1fr))}
.proof{display:flex;flex-direction:column;gap:8px;min-width:0}
.proof .ok{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--color-text-muted)}
.proof .ok .btn{font-size:12.5px}
.proof .ok-form{display:flex;flex-direction:column;gap:6px;width:100%}
.proof .ok-form .input{font-size:13px;min-height:34px;padding:6px 10px}
.proof .ok-done{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--color-text)}
.proof .ok-done>.ico{color:var(--color-success)}
/* A card that has nothing to show yet: its question and a plain note */
.card.hm-gap .note{font-size:13px}
.card.hm-gap .note a{white-space:nowrap}
.hm-greet{display:flex;flex-direction:column;gap:4px}
.greet{font-size:20px;font-weight:700;margin:0}
.hm-greet-more{margin:0;font-size:15px;max-width:var(--read-width)}
.hm-greet-more:empty{display:none}
.askbar{display:flex;gap:8px;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:5px 5px 5px 16px;background:var(--color-surface);max-width:720px}
[dir="rtl"] .askbar{padding:5px 16px 5px 5px}
.askbar:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.hm-ask-inp{flex:1;min-width:0;font:inherit;font-size:14.5px;border:0;background:none;color:var(--color-text);padding:6px 0;outline:none}
.hm-ask-inp::placeholder{color:var(--color-text-muted)}
.askbar .btn{font-size:13.5px;padding:6px 14px;min-height:34px}
.hm-suggest{display:flex;flex-direction:column;gap:6px}
/* Pinned cards: the grip at the top of each card is easier to catch, and shows when it has focus. */
.hm-dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--tile-min-width),100%),1fr));gap:12px;align-items:start}
.hm-dash .grip::before{content:'';position:absolute;inset:-8px -20px}
.hm-dash .grip:focus-visible{opacity:1;outline:2px solid var(--color-accent);outline-offset:2px}
.hm-dash .hm-slot.hm-moving{position:fixed;z-index:20;pointer-events:none;margin:0}
.hm-dash .card-slot{min-height:0}
.am.app .drop-off{margin:0 0 12px}
/* Ask: the owner's question, then the answer card and its follow-ups */
.hm-back{align-self:flex-start;display:inline-flex;gap:6px;align-items:center}
.chat{display:flex;flex-direction:column;gap:22px;max-width:680px}
.hm-pair{display:flex;flex-direction:column;gap:10px;min-width:0}
.q-me{align-self:flex-end;max-width:85%;background:var(--color-accent);color:var(--color-on-accent);border-radius:14px 14px 3px 14px;padding:8px 12px;font-size:14px;overflow-wrap:anywhere}
[dir="rtl"] .q-me{border-radius:14px 14px 14px 3px}
.a-ai{display:flex;flex-direction:column;gap:10px;min-width:0}
.a-ai>p{margin:0;font-size:14px}
.hm-chat+.askbar{width:100%;max-width:680px}
/* Drafts to copy, and the link under a figure card to its step-by-step working (check.html) */
.hm-drafts{display:grid;gap:12px;margin-top:12px}
.hm-drafts .field{display:grid;gap:6px;justify-items:start}
.hm-drafts textarea{width:100%;resize:vertical}
.hm-how{display:inline-block;margin-top:6px;font-size:12.5px}

/* ---------- Account list: filter toggles, a table of accounts with a row editor, and a pager. Balances line up by digit. ---------- */
.acct-company{max-width:420px;margin:0 0 var(--space-4)}
.acct-company-name{margin:0 0 var(--space-4);font-weight:600}
.acct-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--space-3)}
.acct-table{padding:0}
.acct-table td{vertical-align:top}
.acct-table .status{white-space:nowrap}
.acct-table tr:last-child td{border-bottom:0}
.acct-code{color:var(--color-text-muted);font-size:var(--text-xs)}
.acct-ar{display:block;width:fit-content;font-size:var(--text-xs);color:var(--color-text-muted)}
.acct-reasons{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.acct-reasons li{display:flex;gap:6px;align-items:flex-start;font-size:var(--text-xs);color:var(--color-text-muted)}
.acct-reasons li .ico{color:var(--color-warning-line);margin-top:3px;flex:none}
.acct-when{display:block;margin-top:4px}
.acct-actions{white-space:nowrap;text-align:end}
.acct-actions .btn+.btn{margin-inline-start:6px}
.acct-bal{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.acct-empty{padding:12px 14px;margin:0}
.acct-editor td{background:var(--color-surface-soft)}
.acct-edit-form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.acct-edit-form .field{flex:1 1 320px;min-width:0}
.acct-edit-form .hint{flex:1 0 100%;margin:0}
.acct-edit-actions{display:flex;gap:6px}
.acct-edit-actions .btn{min-height:38px;padding:6px 14px;font-size:13.5px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:var(--space-4) 0 0}
@media (max-width:700px){
  .acct-table thead{display:none}
  .acct-table tr{display:block;border-bottom:1px solid var(--color-border);padding:6px 0}
  .acct-table td{display:block;border:0;padding:4px 12px}
  .acct-actions,.acct-bal{text-align:start}
}

/* ---------- Data status and working: the connection, what was read, checks against the books, and the steps behind a figure. ---------- */
.ck-h2 { font-size: 15px; margin: 0 0 8px; }
.ck-reasons ul { margin: 4px 0 0; padding-inline-start: 18px; }
.ck-reasons li + li { margin-top: 2px; }
.ck-history { margin: 6px 0 0; }

/* The connection: platform, read-only, state, when last read, and what to do */
.ck-conn { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; font-size: 13.5px; padding: 12px 16px; }
.ck-plat { font-weight: 700; font-size: 15px; }
.ck-about { color: var(--color-text-muted); font-size: 12.5px; }
.ck-when { display: flex; flex-direction: column; gap: 2px; }
.ck-why { flex: 1 0 100%; margin: 0; font-size: 13px; }
.ck-conn > .btn { margin-inline-start: auto; font-size: 13px; padding: 5px 14px; }

.ck-top { align-items: start; }
.ck-slot .c-mini, .ck-slot .grip { display: none; }

/* What was read, and when */
.ck-records { padding: 12px 14px; }
.ck-records table { font-size: 13px; }
.ck-records tr:last-child td { border-bottom: 0; }
/* Amounts line up by digit: the right edge is the ones place, in both languages. */
.ck-n { text-align: right; white-space: nowrap; }
.ck-kind { display: flex; gap: 8px; align-items: center; }
.ck-flag { color: var(--color-warning); font-weight: 600; }
.ck-mark { display: inline-grid; place-items: center; flex: none; width: 18px; }
.ck-mark .ico { --ico-size: 14px; }
.ck-mark.ok { color: var(--color-success); }
.ck-mark.warn { color: var(--color-warning-line); }
.ck-mark.bad { color: var(--color-error); }
.ck-mark.info { color: var(--color-neutral); }

/* Checks against the books: one group per row, anything not passed listed under it */
.ck-checks, .ck-exc { display: flex; flex-direction: column; gap: 10px; }
.ck-checks > .hint, .ck-exc > .hint { margin: -4px 0 0; }
.ck-grp { border-top: 1px solid var(--color-border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ck-grp.bad { border-top-color: var(--color-error); }
.ck-grp-top { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
.ck-grp-name { margin: 0; font-size: 14px; }
.ck-counts { margin-inline-start: auto; }
.ck-about-g { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.ck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ck-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.ck-list li.bad .ck-li-t { font-weight: 700; }
.ck-list .ck-mark { margin-top: 2px; }
.ck-li { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ck-todo { margin: 0; font-size: 13px; }
.ck-grp > .ck-todo { background: var(--color-surface-soft); border-radius: var(--radius-md); padding: 7px 10px; }
.ck-exc-list li { border-top: 1px solid var(--color-border); padding-top: 8px; }
.ck-exc-list li:first-child { border-top: 0; padding-top: 0; }

.ck-links { display: flex; flex-direction: column; gap: 6px; }
.ck-links .chip { text-decoration: none; font-size: 12.5px; min-height: 28px; }
.ck-links .chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* How a figure was worked out: the card, and beside it the steps */
.ck-pick { display: flex; gap: 10px 18px; align-items: flex-end; flex-wrap: wrap; }
.ck-figs { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-month { min-width: 180px; }
.ck-work2 { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .ck-work2 { grid-template-columns: minmax(0, 1fr); } }
.ck-work { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ck-intro { margin: 0; font-size: 14px; font-weight: 600; }
.ck-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.ck-steps > .blk {
  counter-increment: step; position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 10px 12px 10px 40px; background: var(--color-surface); font-size: 12.5px; min-width: 0;
}
[dir="rtl"] .ck-steps > .blk { padding: 10px 40px 10px 12px; }
.ck-steps > .blk::before {
  content: counter(step); position: absolute; inset-inline-start: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--color-on-accent); background: var(--color-accent);
}
.ck-steps .note { font-size: 12.5px; }
.ck-steps .tt-w [lang="en"] { display: block; }
.ck-entries { font-size: 12px; }
.ck-entries th, .ck-entries td { padding: 5px 6px; }
.ck-entries tr.tot td { font-weight: 700; border-bottom: 0; }
.ck-steps .fold summary { display: inline-flex; gap: 4px; align-items: center; }

/* ---------- Fact page: a reading column of sections, each a heading, a table or list, and a note (where your data lives, how long it is kept). ---------- */
.dl { max-width: 860px; margin: 0 auto; padding: 32px 20px 40px; display: flex; flex-direction: column; gap: 26px; }
.dl h1 { font-size: clamp(26px, 3.6vw, 34px); margin: 0; }
.dl-lede { font-size: 15.5px; color: var(--color-text-muted); margin: -12px 0 0; max-width: 62ch; }
.dl section { display: flex; flex-direction: column; gap: 12px; }
.dl h2 { font-size: 17px; margin: 0; display: flex; gap: 8px; align-items: center; }
.dl h3 { font-size: 14px; margin: 6px 0 0; }
.dl td, .dl th { vertical-align: top; }
.dl .note { margin: 0; }
.dl-list, .dl-plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.dl-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dl-list .status { flex: 0 0 auto; }
.dl-plain li { line-height: 1.5; }
@media (max-width: 600px) { .dl { padding: 22px 16px 32px; } }
.am.app main.dl{max-width:860px}
.dl-kept{margin:6px 0 0}
.dl-list .status{white-space:normal;flex-shrink:1}

/* ---------- Two-language pages: the developer pages and the brand landing page (<body class="am doc dev"> or "am mk"). Both languages sit in the page; only the chosen one shows. ---------- */
/* An element marked hidden stays hidden, whatever display its class gives it. */
.am:is(.dev, .mk) [hidden] { display: none !important; }

/* Both languages sit in the page; only the chosen one shows. */
html[lang="en"] [data-l="ar"], html[lang="ar"] [data-l="en"] { display: none !important; }
html[lang="ar"] body.am:is(.dev, .mk) { font-family: var(--font-arabic); }

/* The language switch sits at the end of the shared page menu. */
.am .sitebar .lang { margin-inline-start: auto; flex: none; font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; }
.am .sitebar .lang:hover { color: var(--color-accent); }

/* ---------- Developer pages ----------
   The documentation, sandbox and dashboard for an institution's developers use the document
   layout (<body class="am doc dev">) and the shared page menu, plus the two-language block above
   and these parts: a method tag, an endpoint row that opens beneath itself, a code sample, a key
   line and a filter row. */

/* The reference drawn from the OpenAPI file: the version and download line, and each parameter's limits. */
.spec-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.spec-info .ico { --ico-size: 15px; color: var(--color-accent); }
:where(.am.dev) td .hint { margin: 2px 0 0; font-size: 12.5px; }
/* On narrow screens the contents list pins as a strip under the menu; an endpoint jumped to lands below both. */
@media (max-width: 1000px) { :where(.am.dev) details[id] { scroll-margin-top: 56px; } }
/* Field and parameter names stay whole; a narrow table scrolls sideways inside its card. */
:where(.am.dev) .ep-body td code { white-space: nowrap; overflow-wrap: normal; }

/* A pop-up that would run off the bottom of the window opens above its word. */
:where(.am.doc) .tip.up { top: auto; bottom: calc(100% + 8px); }

/* Method tag: every call reads, so GET is the only one. */
.meth { font: 700 10.5px/1.7 var(--font-mono); letter-spacing: .03em; color: var(--color-success); background: var(--color-success-bg); border-radius: 4px; padding: 0 6px; direction: ltr; }

/* Endpoint row: method, path and what it answers; the path opens its detail beneath. */
details.ep { border-bottom: 1px solid var(--color-border); }
details.ep > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 2px; cursor: pointer; }
details.ep > summary::-webkit-details-marker { display: none; }
details.ep > summary code { background: none; border: 0; padding: 0; font-size: 13px; border-bottom: 1.5px dotted var(--color-accent); }
details.ep > summary .what { color: var(--color-text-muted); font-size: 13.5px; margin-inline-start: auto; }
details.ep > summary:hover code, details.ep[open] > summary code { color: var(--color-accent); }
details.ep > .ep-body { padding: 2px 2px 18px; }
details.ep > .ep-body > p { margin: 0 0 10px; }
.ep-group { margin: 22px 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }

/* Code sample: always left to right, with a label and a copy button. */
.codeblk { direction: ltr; text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); margin: 10px 0; min-width: 0; }
.codeblk > .ch { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--color-border); font-size: 11.5px; color: var(--color-text-muted); }
.codeblk > .ch .btn { margin-left: auto; }
.codeblk pre { margin: 0; padding: 10px 12px; overflow-x: auto; font: 12.5px/1.6 var(--font-mono); color: var(--color-text); white-space: pre; }
.am.doc .codeblk code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Key line: a masked key, where it works, and what to do with it. */
.keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; background: var(--color-surface); }
.keyline code { font-size: 13.5px; direction: ltr; unicode-bidi: isolate; }

/* Filter row above a table, and a form row of labelled choices. */
.fl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.fl label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted); min-width: 0; flex: 1 1 220px; }
.fl select { font: inherit; font-size: 14px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 10px; min-width: 0; max-width: 100%; }

/* A call named in a table (method and path) stays on one line; the table scrolls inside its card. */
:where(.am.dev) td .tm { white-space: nowrap; }
:where(.am.dev) td .tm code { overflow-wrap: normal; }

/* An amount or count cell in a table: digits line up by their ones place. */
:where(.am.dev) :where(.wrap) td.n, :where(.am.dev) :where(.wrap) th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Right to left: the document layout mirrored. Code, keys and paths stay left to right. */
:where(.am.dev) code { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] :where(.am.dev) nav.toc a { border-left: 0; border-right: 2px solid var(--color-border); padding: 2px 8px 2px 0; }
html[dir="rtl"] :where(.am.dev) nav.toc a.on { border-right-color: var(--color-accent); }
html[dir="rtl"] :where(.am.dev) nav.toc a.g { border-right: 0; padding: 0; }
html[dir="rtl"] :where(.am.dev) :where(.wrap) th, html[dir="rtl"] :where(.am.dev) :where(.wrap) td { text-align: right; }
html[dir="rtl"] :where(.am.dev) :where(.wrap) ul { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] :where(.am.dev) .tip { left: auto; right: 0; }
html[dir="rtl"] :where(.am.dev) .callout { border-left: 0; border-right: 3px solid var(--color-accent); border-radius: 10px 0 0 10px; }

/* ---------- Developer pages: the visual parts ----------
   A hero band in the brand colours on each page, dark code windows with coloured syntax and
   language tabs, step cards, concept tiles, the consent lifecycle, company cards that fill the
   try-it console, a comparison of the two environments, and the dashboard's tiles and bars.
   Parts rise into view and figures count up; under reduced motion everything is shown in place. */

body.am.dev { --dv-grad: linear-gradient(135deg, var(--am-navy), var(--am-ocean) 45%, var(--am-teal) 80%, var(--am-sea)); --dv-lift: translateY(-3px); }
.am.dev .vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.dv-js .am.dev [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.dv-js .am.dev [data-reveal].in { opacity: 1; transform: none; }

/* An icon on a tinted tile. The icon is drawn as a mask, so the tile is its own element. */
.am.dev .dv-tile { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: var(--color-accent); background: var(--color-accent-bg); }
.am.dev .dv-tile .ico { --ico-size: 20px; }
.am.dev .dv-tile.solid { color: #fff; background: var(--dv-grad); }

/* ---- Hero band: the page's promise over the brand gradient, with its picture beside it ---- */
.am.dev header.cover.dv-hero { position: relative; overflow: hidden; isolation: isolate; margin: 24px 0 8px; padding: 36px; border-radius: 20px; background: var(--dv-grad); color: #fff; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; }
.am.dev .dv-hero::after { content: ""; position: absolute; inset: auto -12% -70% 35%; height: 130%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--am-gold) 30%, transparent), transparent); pointer-events: none; }
@media (max-width: 1000px) { .am.dev header.cover.dv-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; } }
.am.dev .dv-hero .kicker { color: var(--am-gold); }
.am.dev .dv-hero h1 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); }
html[lang="ar"] .am.dev .dv-hero h1 { line-height: 1.4; letter-spacing: 0; }
html[lang="ar"] .am.dev .kicker { letter-spacing: 0; font-size: 13px; }
.am.dev .dv-hero .lede { color: rgba(255, 255, 255, .88); margin-top: 14px; }
.am.dev .dv-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.am.dev .dv-hero .btn { background: #fff; color: var(--am-navy); border-color: #fff; }
.am.dev .dv-hero .btn:hover { background: var(--am-gold); border-color: var(--am-gold); color: var(--am-navy); }
.am.dev .dv-hero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.am.dev .dv-hero .btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.am.dev .dv-hero .btn .ico { --ico-size: 15px; }
.am.dev .dv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.am.dev .dv-chips li { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.am.dev .dv-chips .ico { --ico-size: 14px; color: var(--am-gold); }
.am.dev .dv-draft { margin: 18px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.am.dev .dv-draft .status { margin-inline-end: 6px; }

/* The one-integration picture: the accounting systems, one standard model, your system. */
.am.dev .dv-flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px auto 40px auto; align-items: center; gap: 0; }
.am.dev .dv-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.am.dev .dv-src li { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); white-space: nowrap; }
.am.dev .dv-src li.on { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.am.dev .dv-src small { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.am.dev .dv-src li.on small { color: var(--am-gold); }
.am.dev .dv-wire { height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: dv-flow 1.2s linear infinite; }
html[dir="rtl"] .am.dev .dv-wire { animation-name: dv-flow-rtl; }
@keyframes dv-flow { to { background-position: 24px 0; } }
@keyframes dv-flow-rtl { to { background-position: -24px 0; } }
.am.dev .dv-node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 112px; padding: 14px 8px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.am.dev .dv-node .dv-tile { background: #fff; color: var(--am-ocean); }
.am.dev .dv-node b { font-size: 13px; line-height: 1.3; }
.am.dev .dv-node small { font-size: 11px; color: rgba(255, 255, 255, .78); line-height: 1.35; }
@media (max-width: 560px) {
  .am.dev .dv-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .am.dev .dv-src { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .am.dev .dv-wire { width: 2px; height: 26px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 6px, transparent 6px 12px); background-size: 2px 24px; animation-name: dv-flow-down; }
  @keyframes dv-flow-down { to { background-position: 0 24px; } }
  .am.dev .dv-node { width: auto; min-width: 180px; }
}

/* A key card in the hero: the test key, where it works, and a copy button. */
.am.dev .dv-keycard { border-radius: 16px; padding: 18px; background: rgba(8, 16, 34, .45); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 16px 40px rgba(0, 0, 0, .22); display: grid; gap: 12px; }
.am.dev .dv-keycard .keyline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.am.dev .dv-keycard .keyline code { color: var(--am-gold); }
.am.dev .dv-keycard .keyline .ico { color: var(--am-gold); --ico-size: 16px; }
.am.dev .dv-keycard .btn.copy { background: #fff; color: var(--am-navy); }
.am.dev .dv-keycard p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .82); }
.am.dev .dv-keycard dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.am.dev .dv-keycard dt { color: rgba(255, 255, 255, .7); }
.am.dev .dv-keycard dd { margin: 0; font-weight: 600; }

/* ---- Code windows: dark in both colour schemes, the syntax coloured, always left to right ---- */
.am:is(.dev, .mk) .codeblk { background: #0f1a2e; border-color: #0f1a2e; color: #dce6f2; box-shadow: 0 10px 30px rgba(15, 26, 46, .16); overflow: hidden; }
.am:is(.dev, .mk) .codeblk > .ch { background: #16233b; border-bottom-color: rgba(255, 255, 255, .08); color: #9fb0c8; }
.am:is(.dev, .mk) .codeblk > .ch::before { content: ""; flex: none; width: 34px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, #e5645b 98%, transparent), radial-gradient(circle 4px at 17px 4px, #e9b949 98%, transparent), radial-gradient(circle 4px at 30px 4px, #5cc38a 98%, transparent); }
.am:is(.dev, .mk) .codeblk pre { color: #dce6f2; }
.am:is(.dev, .mk) .codeblk .btn.copy { background: rgba(255, 255, 255, .08); color: #dce6f2; border-color: rgba(255, 255, 255, .18); }
.am:is(.dev, .mk) .codeblk .btn.copy:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.am .codeblk .tk-k { color: #7fd0e6; }
.am .codeblk .tk-s { color: #f2d676; }
.am .codeblk .tk-n { color: #9be3c4; }
.am .codeblk .tk-b { color: #f5a97f; }
.am .codeblk .tk-c { color: #c9a7ff; font-weight: 600; }
.am .codeblk .tk-f { color: #7fb6ff; }

/* Language tabs above a code window. */
.am.dev .dv-tabs { margin: 12px 0; }
.am.dev .dv-tabs [role="tablist"] { display: flex; gap: 4px; padding: 4px; border-radius: 12px 12px 0 0; background: #16233b; width: fit-content; max-width: 100%; overflow-x: auto; }
.am.dev .dv-tabs [role="tab"] { font: 600 12.5px/1 var(--font-mono); padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: #9fb0c8; cursor: pointer; white-space: nowrap; }
.am.dev .dv-tabs [role="tab"]:hover { color: #fff; }
.am.dev .dv-tabs [role="tab"][aria-selected="true"] { background: #0f1a2e; color: #fff; }
.am.dev .dv-tabs [role="tab"]:focus-visible { outline: 2px solid var(--am-gold); outline-offset: 1px; }
.am.dev .dv-tabs .codeblk { margin: 0; border-start-start-radius: 0; }
html[dir="rtl"] .am.dev .dv-tabs [role="tablist"] { direction: ltr; margin-left: auto; }

/* ---- Get started: three step cards joined by a line ---- */
.am.dev .dv-steps { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: dv; position: relative; }
@media (max-width: 760px) { .am.dev .dv-steps { grid-template-columns: minmax(0, 1fr); } }
.am.dev .dv-steps li { counter-increment: dv; margin: 0; padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); display: flex; flex-direction: column; gap: 6px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.am.dev .dv-steps li:hover { transform: var(--dv-lift); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.am.dev .dv-steps li::before { content: counter(dv); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dv-grad); color: #fff; font: 700 14px/1 var(--font-mono); margin-bottom: 4px; }
.am.dev .dv-steps b { font-size: 15.5px; }
.am.dev .dv-steps span { font-size: 14px; color: var(--color-text-muted); }
.am.dev .dv-steps .status { align-self: flex-start; margin-top: auto; }

/* ---- Concepts: one tile each ---- */
.am.dev .dv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
@media (max-width: 1100px) { .am.dev .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .am.dev .dv-grid { grid-template-columns: minmax(0, 1fr); } }
.am.dev .dv-card { padding: 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--color-text-muted); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.am.dev .dv-card:hover { transform: var(--dv-lift); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.am.dev .dv-card > b { font-size: 15.5px; color: var(--color-text); margin-top: 6px; }
.am.dev .dv-card p { margin: 0; }

/* The consent lifecycle: requested, active, then expired or withdrawn. */
.am.dev .dv-life { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; position: relative; }
@media (max-width: 900px) { .am.dev .dv-life { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .am.dev .dv-life { grid-template-columns: minmax(0, 1fr); } }
.am.dev .dv-life li { margin: 0; position: relative; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 13.5px; color: var(--color-text-muted); display: flex; flex-direction: column; gap: 4px; }
.am.dev .dv-life li > code { align-self: flex-start; }
.am.dev .dv-life li b { color: var(--color-text); font-size: 14.5px; }
.am.dev .dv-life li:not(:last-child)::after { content: ""; position: absolute; top: 50%; inset-inline-end: -21px; width: 16px; height: 16px; background: var(--color-text-muted); -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat; transform: translateY(-50%); }
.am.dev .dv-life { --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
html[dir="rtl"] .am.dev .dv-life li:not(:last-child)::after { transform: translateY(-50%) scaleX(-1); }
@media (max-width: 900px) { .am.dev .dv-life li::after { display: none; } }
.am.dev .dv-life li.ok { border-top: 3px solid var(--color-success); }
.am.dev .dv-life li.wait { border-top: 3px solid var(--color-warning); }
.am.dev .dv-life li.stop { border-top: 3px solid var(--color-error); }
.am.dev .dv-life li.end { border-top: 3px solid var(--color-text-muted); }

/* Endpoint rows answer to the pointer; an open one becomes a card. */
.am.dev details.ep > summary { border-radius: 8px; padding-inline: 10px; transition: background .15s; }
.am.dev details.ep > summary:hover { background: var(--color-surface-soft); }
.am.dev details.ep[open] { border: 1px solid var(--color-border); border-radius: 12px; margin: 8px 0; background: var(--color-surface); box-shadow: var(--elev-1); }
.am.dev details.ep[open] > .ep-body { padding: 4px 12px 16px; }
.am.dev .dv-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-accent-bg); margin: 12px 0; }
.am.dev .dv-base .ico { --ico-size: 16px; color: var(--color-accent); }

/* ---- Test environment: company cards that fill the console ---- */
.am.dev .dv-cos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
@media (max-width: 1200px) { .am.dev .dv-cos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .am.dev .dv-cos { grid-template-columns: minmax(0, 1fr); } }
.am.dev .dv-co { position: relative; padding: 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.am.dev .dv-co:hover { transform: var(--dv-lift); box-shadow: var(--elev-2); }
.am.dev .dv-co.on { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--elev-2); }
.am.dev .dv-co-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.am.dev .dv-plat { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.am.dev .dv-co > b { font-size: 16px; }
.am.dev .dv-co > span { color: var(--color-text-muted); flex: 1; }
.am.dev .dv-co .status { align-self: flex-start; }
.am.dev .dv-co .btn { align-self: flex-start; }
.am.dev .dv-co .hn .tm { font-size: 12.5px; }

/* The console: the request on one side, the answer on the other. */
.am.dev .dv-console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 14px 0; }
@media (max-width: 1100px) { .am.dev .dv-console { grid-template-columns: minmax(0, 1fr); } }
.am.dev .dv-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.am.dev .dv-pane > h3 { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
html[lang="ar"] .am.dev .dv-pane > h3 { letter-spacing: 0; }
.am.dev .dv-pane .codeblk { margin: 0; }
.am.dev .dv-pane .fl { margin: 0; }
.am.dev .dv-send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.am.dev .dv-send .btn .ico { --ico-size: 15px; }
.am.dev .dv-send .btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.am.dev .dv-wait { color: #9fb0c8; font-style: italic; }
.am.dev .dv-answer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 28px; }
.am.dev .dv-answer-head .hint { margin: 0; }

/* Going live: the two environments side by side. */
.am.dev .dv-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 16px 0; }
@media (max-width: 760px) { .am.dev .dv-compare { grid-template-columns: minmax(0, 1fr); } .am.dev .dv-compare > .dv-arrow { transform: rotate(90deg); justify-self: center; } }
.am.dev .dv-env { padding: 18px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); display: flex; flex-direction: column; gap: 10px; }
.am.dev .dv-env.live { border-color: transparent; background: var(--dv-grad); color: #fff; }
.am.dev .dv-env h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; }
.am.dev .dv-env.live h3 { color: #fff; }
.am.dev .dv-env.live .dv-tile { background: rgba(255, 255, 255, .16); color: var(--am-gold); }
.am.dev .dv-env dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; }
.am.dev .dv-env dt { color: var(--color-text-muted); }
.am.dev .dv-env.live dt { color: rgba(255, 255, 255, .72); }
.am.dev .dv-env dd { margin: 0; font-weight: 600; }
.am.dev .dv-env.live code { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .24); }
.am.dev .dv-arrow { align-self: center; color: var(--color-text-muted); }
.am.dev .dv-arrow .ico { --ico-size: 22px; }

/* ---- Dashboard: tiles that count, a funnel and bars ---- */
.am.dev .dv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; }
.am.dev .dv-stat { padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); display: flex; flex-direction: column; gap: 2px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.am.dev .dv-stat:hover { transform: var(--dv-lift); box-shadow: var(--elev-2); }
.am.dev .dv-stat b { font: 700 30px/1.15 var(--font-sans); letter-spacing: -.02em; background: linear-gradient(90deg, var(--am-ocean), var(--am-teal)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .am.dev .dv-stat b { background-image: linear-gradient(90deg, var(--am-sea), var(--am-gold)); } }
:root[data-theme="dark"] .am.dev .dv-stat b { background-image: linear-gradient(90deg, var(--am-sea), var(--am-gold)); }
.am.dev .dv-stat span { font-size: 13px; color: var(--color-text-muted); }
.am.dev .dv-bars { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.am.dev .dv-bars li { margin: 0; display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
@media (max-width: 560px) { .am.dev .dv-bars li { grid-template-columns: minmax(0, 1fr) auto; } .am.dev .dv-bars .dv-track { grid-column: 1 / -1; grid-row: 2; } }
.am.dev .dv-track { height: 10px; border-radius: 999px; background: var(--color-surface-soft); border: 1px solid var(--color-border); overflow: hidden; }
.am.dev .dv-fill { display: block; height: 100%; inline-size: 0; border-radius: inherit; background: var(--dv-grad); transition: inline-size 1s var(--ease-out); }
.am.dev .dv-bars .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.am.dev .dv-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--color-text-muted); }
.am.dev #logTable tbody tr { transition: background .15s; }
.am.dev #logTable tbody tr:hover { background: var(--color-surface-soft); }

@media (prefers-reduced-motion: reduce) {
  html.dv-js .am.dev [data-reveal] { opacity: 1; transform: none; transition: none; }
  .am.dev .dv-wire { animation: none; }
  .am.dev .dv-fill { transition: none; }
  .am.dev * { transition-duration: 0s !important; }
}
@media print {
  .am.dev header.cover.dv-hero { background: none; color: inherit; border: 1px solid #999; }
  .am.dev .dv-hero h1, .am.dev .dv-hero .lede, .am.dev .dv-hero .kicker { color: inherit; }
  .am:is(.dev, .mk) .codeblk, .am:is(.dev, .mk) .codeblk pre { background: #fff; color: #000; }
}

/* The dashboard hero's funnel, from invitation to consent, in white on the brand gradient. */
.am.dev .dv-funnel { padding: 20px; border-radius: 16px; background: rgba(8, 16, 34, .4); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 16px 40px rgba(0, 0, 0, .2); }
.am.dev .dv-funnel-t { margin: 0 0 8px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.am.dev .dv-hero .dv-bars li { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) auto; font-weight: 600; }
.am.dev .dv-hero .dv-track { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
.am.dev .dv-hero .dv-fill { background: linear-gradient(90deg, var(--am-gold), #fff); }
.am.dev .dv-keycard .keyline code { background: none; border: 0; padding: 0; }
.am.dev .dv-hero a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.am.dev .dv-hero a:not(.btn):hover { color: var(--am-gold); }
.am.dev .dv-co-top { flex-wrap: wrap; }
.am.dev .dv-env .status { align-self: flex-start; }
.am.dev .dv-stat b span { font-size: inherit; color: inherit; }
/* The test key card is a jump target: it lands below the pinned menu and, on narrow screens, the contents strip. */
.am.dev .dv-keycard { scroll-margin-top: 16px; }
@media (max-width: 1000px) { .am.dev .dv-keycard { scroll-margin-top: 56px; } }

/* ---------- Landing page (<body class="am mk">) ----------
   The shared page menu, a hero with a live sample card, facts that count up, a carousel of
   sample answers, the connectors from the accounting systems, the Platform's values and uses,
   the security panel, the value chain, the AI chain, trust commitments and a closing call.
   Motion is gentle and stops when the reader asks for reduced motion. The language rules are
   in the two-language block above. */

body.am.mk {
  --mk-w: 1120px;
  /* The two feature panels stay navy in both modes, shading into a lighter navy, with white text. */
  --mk-on-navy: #ffffff;
  --mk-panel: linear-gradient(135deg, var(--am-navy), color-mix(in srgb, var(--am-navy) 80%, var(--mk-on-navy)));
  --mk-lift: translateY(-4px);
  margin: 0; padding: 0 20px 64px; background: var(--color-bg); color: var(--color-text); font: 16px/1.6 var(--font-sans);
  overflow-x: clip;
}
.am.mk * { box-sizing: border-box; }
.am.mk .sitebar { max-width: var(--mk-w); }
/* On a phone the pinned menu keeps the logo, language and sign-in; the section links would not fit. */
@media (max-width: 760px) { .am.mk .sitebar .sl { display: none; } }
/* Words for screen readers only, such as the names of arrow buttons. */
.am.mk .vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Parts of the page rise into view as they are reached. */
html.mk-js .am.mk [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.mk-js .am.mk [data-reveal].in { opacity: 1; transform: none; }
/* Inside a part, the items of a list follow one another in (--n is each item's place, set by the page script). */
html.mk-js .am.mk [data-reveal] :is(.mk-flow-col, .mk-secure-list) > li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .2s, box-shadow .2s, background .2s; transition-delay: calc(var(--n, 0) * 70ms), calc(var(--n, 0) * 70ms), 0s, 0s, 0s; }
html.mk-js .am.mk [data-reveal].in :is(.mk-flow-col, .mk-secure-list) > li { opacity: 1; transform: none; }

/* A section: one message, plenty of room. */
.mk-sec { max-width: var(--mk-w); margin: 0 auto; padding: 72px 0 8px; scroll-margin-top: 12px; }
.mk-sec + .mk-sec { border-top: 1px solid var(--color-border); margin-top: 56px; }
.mk-sec > h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18; margin: 0 0 12px; letter-spacing: -.015em; text-wrap: balance; max-width: 24ch; }
html[lang="ar"] .mk-sec > h2 { line-height: 1.45; letter-spacing: 0; }
.mk-sec > .lede { font-size: 17.5px; max-width: 62ch; margin: 0 0 32px; color: var(--color-text-muted); }
.mk-sec > h2.mk-h2b { margin-top: 80px; }
.mk-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; margin: 0 0 12px; }
html[lang="ar"] .mk-kicker { letter-spacing: 0; font-size: 13.5px; }

/* ---- Hero: the promise beside answers that take turns, over a slowly moving field in the brand colour ----
   One colour only: the accent at different strengths. A dot grid drifts, two soft pools of colour
   breathe, and two lines draw themselves like a rising chart. The field is mirrored in Arabic. */
.mk-hero { position: relative; margin: 0 -20px; padding: 64px 20px 72px; overflow: hidden; isolation: isolate; }
.mk-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html[dir="rtl"] .mk-hero-bg { transform: scaleX(-1); }
.mk-hero-glow { position: absolute; inset: -20% -10% -10%;
  background:
    radial-gradient(40% 50% at 76% 40%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    radial-gradient(30% 40% at 94% 84%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
    radial-gradient(46% 56% at 8% 8%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%);
  animation: mk-drift 22s ease-in-out infinite alternate; }
@keyframes mk-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.mk-hero-dots { position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--color-accent) 24%, transparent) 1.2px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(55% 70% at 74% 46%, #000, transparent 78%); mask-image: radial-gradient(55% 70% at 74% 46%, #000, transparent 78%);
  animation: mk-dots 40s linear infinite; }
@keyframes mk-dots { to { background-position: 24px 48px; } }
.mk-hero-line { position: absolute; inset: auto 0 4% 0; width: 100%; height: 58%; }
.mk-hero-line path { fill: none; stroke: var(--color-accent); stroke-width: 1.4; stroke-linecap: round; opacity: .22; stroke-dasharray: 100; stroke-dashoffset: 100; animation: mk-draw 12s ease-in-out infinite; }
.mk-hero-line path.b { opacity: .12; animation-delay: -6s; }
@keyframes mk-draw { 0% { stroke-dashoffset: 100; } 40%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.mk-hero-in { max-width: var(--mk-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .mk-hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mk-hero { padding-top: 40px; } }
.mk-hero h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.04; margin: 0 0 20px; letter-spacing: -.025em; text-wrap: balance; }
html[lang="ar"] .mk-hero h1 { line-height: 1.35; letter-spacing: 0; }
.mk-hero .lede { font-size: 18.5px; max-width: 52ch; color: var(--color-text-muted); margin: 0 0 26px; }
.mk-hero .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-hero .btn.pri .ico { --ico-size: 16px; transition: transform var(--motion-fast) var(--ease-out); }
.mk-hero .btn.pri:hover .ico { transform: translateX(3px); }
html[dir="rtl"] .mk-hero .btn.pri:hover .ico { transform: scaleX(-1) translateX(3px); }
.mk-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--color-text-muted); }
.mk-ticks li { display: flex; align-items: center; gap: 7px; margin: 0; }
.mk-ticks .ico { --ico-size: 16px; color: var(--color-success); }

/* The live card stands slightly turned towards the text and straightens under the pointer. */
.mk-hero-stage { position: relative; padding: 28px 8px; perspective: 1100px; }
.mk-hero-card { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin-inline: auto; transform: rotateY(-7deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
html[dir="rtl"] .mk-hero-card { transform: rotateY(7deg) rotateX(3deg); }
.mk-hero-stage:hover .mk-hero-card, .mk-hero-card:focus-within { transform: none; }
.mk-hero-card .ac { box-shadow: var(--elev-2); }
/* The answers sit on top of one another; the one showing fades and rises in, so the card keeps its place. */
.mk-hero-slides { display: grid; }
.mk-hero-slides > .mk-hs { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s; }
.mk-hero-slides > .mk-hs.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mk-hero-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.mk-car-btn.sm { width: 32px; height: 32px; }
.mk-car-btn.sm .ico { --ico-size: 15px; }
.mk-sample-tag { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: 13px; }
.mk-sample-tag b { font-weight: 600; }
.mk-sample-tag .hint { flex-basis: 100%; }
/* Chips that float beside the card. */
.mk-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--elev-bg); border: 1px solid var(--color-border); box-shadow: var(--elev-1); font-size: 12.5px; font-weight: 600; white-space: nowrap; animation: mk-float 6s ease-in-out infinite alternate; }
.mk-float .ico { --ico-size: 15px; color: var(--color-success); }
.mk-float.f1 { top: 0; inset-inline-end: 4%; }
.mk-float.f2 { bottom: 4px; inset-inline-start: 2%; animation-delay: -3s; }
.mk-float.f2 .ico { color: var(--color-accent); }
@keyframes mk-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@media (max-width: 560px) { .mk-float { display: none; } .mk-hero-card { transform: none; } html[dir="rtl"] .mk-hero-card { transform: none; } }
/* A placeholder while the card is read. */
.mk-skel { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--elev-1); }
.mk-skel span { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--color-surface-soft), var(--color-border), var(--color-surface-soft)); background-size: 200% 100%; animation: mk-shimmer 1.4s linear infinite; }
.mk-skel span:nth-child(2) { height: 34px; width: 60%; }
.mk-skel span:nth-child(3) { width: 80%; }
@keyframes mk-shimmer { to { background-position: -200% 0; } }

/* ---- Facts: large figures that count up ---- */
.mk-facts { max-width: var(--mk-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .mk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-facts > div { padding: 20px 20px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--color-text-muted); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.mk-facts > div:hover { transform: var(--mk-lift); box-shadow: var(--elev-1); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.mk-facts b { font: 700 46px/1.05 var(--font-sans); letter-spacing: -.02em; color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ---- Carousel: one row of slides, arrows, dots, and a pause for the moving one ---- */
.mk-car { margin: 8px 0 48px; }
.mk-car-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.mk-car-head h3 { margin: 0; font-size: 20px; }
.mk-car-head .mk-sample-tag { flex: 1 1 360px; }
.mk-car-ctl { display: flex; gap: 8px; margin-inline-start: auto; }
.mk-car-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.mk-car-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.mk-car-btn:active { transform: scale(.94); }
.mk-car-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mk-car-btn .ico { --ico-size: 17px; }
.mk-car-btn[aria-pressed="true"] { background: var(--color-accent-bg); color: var(--color-accent); }
.mk-car-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(380px, 86%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 4px 22px; margin: 0 -4px; overscroll-behavior-x: contain; }
.mk-car-track::-webkit-scrollbar { display: none; }
.mk-car-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-lg); }
.mk-car-track > * { scroll-snap-align: start; min-width: 0; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.mk-car-track > .dim { opacity: .55; transform: scale(.97); }
.mk-car-track > :hover { opacity: 1; transform: none; }
.mk-car-dots { display: flex; justify-content: center; gap: 6px; }
.mk-car-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-border); cursor: pointer; transition: width .3s var(--ease-out), background .3s; }
.mk-car-dots button[aria-selected="true"] { width: 26px; background: var(--color-accent); }
.mk-car-dots button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mk-car .note { margin: 0 0 12px; }
.mk-slide { display: flex; flex-direction: column; }
.mk-slide > * { flex: 1; }

/* Uses for institutions: one card per use, with its stage. */
.mk-use { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; min-height: 250px; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.mk-use::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--color-accent); }
.mk-use:hover { transform: var(--mk-lift); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.mk-use .status { align-self: flex-start; }
.mk-use .big { --ico-size: 30px; color: var(--color-accent); margin-top: 6px; }
.mk-use h4 { margin: 0; font-size: 18px; line-height: 1.3; }
.mk-use p { margin: 0; color: var(--color-text-muted); font-size: 14.5px; }

/* ---- What works, what is coming, what is later ---- */
.mk-status3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .mk-status3 { grid-template-columns: minmax(0, 1fr); } }
.mk-status3 > div { padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.mk-status3 > div:hover { transform: var(--mk-lift); box-shadow: var(--elev-1); }
.mk-status3 .now { border-top: 3px solid var(--color-success); }
.mk-status3 .soon { border-top: 3px solid var(--color-info); }
.mk-status3 .later { border-top: 3px solid var(--color-neutral); }
.mk-status3 h3 { margin: 0 0 14px; font-size: 15px; }

/* A list with a mark per line: a tick for what works, a clock for what is coming. */
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; }
.mk-list .ico { --ico-size: 17px; margin-top: 3px; color: var(--color-success); }
.mk-list.soon .ico { color: var(--color-text-muted); }
.mk-list.soon li { color: var(--color-text-muted); }

/* ---- The connectors: accounting systems flow into one model and out to the people who read it ----
   Five columns: systems, lines in, Alter-Mal, lines out, readers. Rows in each list are equal
   (gap 0, margins inside the rows), so a line drawn to (row + ½) / rows meets the middle of its
   row. Lines from the live system and to the readers move; lines from systems still to come are
   faint and still. On a phone the parts stack. */
.mk-systems { margin: 72px -20px 0; padding: 32px 0 22px; background: var(--color-surface-soft); border-block: 1px solid var(--color-border); overflow: hidden; }
.mk-sys-title { text-align: center; margin: 0 20px 22px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; }
html[lang="ar"] .mk-sys-title { letter-spacing: 0; font-size: 14px; }
.mk-flow { max-width: var(--mk-w); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(48px, .6fr) auto minmax(48px, .6fr) minmax(0, 1.1fr); align-items: stretch; }
.mk-flow-col { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 0; }
.mk-flow-col li { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-weight: 600; font-size: 14px; line-height: 1.3; transition: border-color .2s, box-shadow .2s; }
.mk-flow-col li:hover { border-color: var(--color-accent); box-shadow: var(--elev-1); }
.mk-flow-src li.on { border-color: color-mix(in srgb, var(--color-success) 50%, var(--color-border)); }
.mk-flow-src .tag { margin-inline-start: auto; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
.mk-flow-col bdi { white-space: nowrap; }
.mk-flow-src .tag.done { background: var(--color-success-bg); color: var(--color-success); }
.mk-flow-src .tag.neu { background: var(--color-neutral-bg); color: var(--color-neutral); }
/* Odoo's own files, as supplied: full colour on light, all white on dark. The file carries its
   own clear space, so the image is taller than the row's text and pulls in its margins. */
.mk-logo { height: 38px; width: auto; display: block; margin-block: -8px; margin-inline-start: -8px; }
.mk-logo.dk { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-logo.lt { display: none; } :root:not([data-theme="light"]) .mk-logo.dk { display: block; } }
:root[data-theme="dark"] .mk-logo.lt { display: none; }
:root[data-theme="dark"] .mk-logo.dk { display: block; }
.mk-flow-lines { width: 100%; height: 100%; overflow: visible; }
html[dir="rtl"] .mk-flow-lines { transform: scaleX(-1); }
.mk-flow-lines path { fill: none; stroke: var(--color-border); stroke-width: 1.5; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.mk-flow-lines path.live { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 3 5; animation: mk-flow 2.4s linear infinite; }
@keyframes mk-flow { to { stroke-dashoffset: -16; } }
.mk-flow-hub { align-self: center; display: grid; justify-items: center; gap: 2px; padding: 18px 24px; border-radius: 18px; background: var(--color-surface); border: 1.5px solid var(--color-accent); box-shadow: var(--elev-1); text-align: center; }
.mk-flow-hub .logo-wordmark { font-size: 30px; line-height: 1; color: var(--color-text); }
.mk-flow-hub-sub { font-size: 12.5px; color: var(--color-text-muted); max-width: 150px; }
.mk-flow-dst li { border-radius: 14px; padding: 12px 16px; margin: 26px 0; }
.mk-flow-dst li > .ico { --ico-size: 20px; color: var(--color-accent); flex: none; }
.mk-flow-dst b { display: block; font-size: 15px; }
.mk-flow-dst small { display: block; font-weight: 400; font-size: 12.5px; color: var(--color-text-muted); }
.mk-flow-tm { max-width: var(--mk-w); margin: 20px auto 0; padding: 0 20px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); text-align: center; }
@media (max-width: 760px) {
  .mk-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .mk-flow-lines { display: none; }
  .mk-flow-col { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .mk-flow-col li, .mk-flow-dst li { margin: 0; }
  .mk-flow-src li { padding: 6px 12px; font-size: 13px; }
  .mk-flow-dst { flex-direction: column; width: 100%; }
  .mk-flow-hub { position: relative; margin: 30px 0; }
  .mk-flow-hub::before, .mk-flow-hub::after { content: ""; position: absolute; inset-inline-start: 50%; width: 2px; height: 24px; background: repeating-linear-gradient(to bottom, var(--color-accent) 0 4px, transparent 4px 8px); }
  .mk-flow-hub::before { bottom: 100%; margin-bottom: 3px; }
  .mk-flow-hub::after { top: 100%; margin-top: 3px; }
}

/* An icon on a tinted tile. The icon is drawn as a mask, so the tile is its own element. */
.mk-tile { display: inline-grid; place-items: center; flex: none; }

/* ---- The Platform's values: four tiles ---- */
.mk-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 52px; }
@media (max-width: 900px) { .mk-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mk-values { grid-template-columns: minmax(0, 1fr); } }
.mk-values > div { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.mk-values > div:hover { transform: var(--mk-lift); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.mk-values .mk-tile { width: 42px; height: 42px; border-radius: 12px; color: var(--color-on-accent); background: var(--color-accent); margin-bottom: 8px; }
.mk-values .ico { --ico-size: 20px; }
.mk-values b { font-size: 17px; }
.mk-values span { color: var(--color-text-muted); font-size: 14.5px; }

/* The standard model for institutions: what stays the same, beside one record. */
.mk-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; margin-top: 8px; }
@media (max-width: 820px) { .mk-model { grid-template-columns: minmax(0, 1fr); } }
.mk-model > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.mk-model h3 { margin: 0; font-size: 20px; }
.mk-model .codeblk { margin: 0; }
.mk-code { box-shadow: 0 18px 50px color-mix(in srgb, var(--color-accent) 22%, transparent); transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.mk-code:hover { transform: var(--mk-lift); box-shadow: 0 24px 60px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.am.mk .codeblk code { background: none; border: 0; padding: 0; font-size: inherit; }
.am.mk .more { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; font-weight: 600; }
.am.mk .more .ico { transition: transform var(--motion-fast) var(--ease-out); }
.am.mk .more:hover .ico { transform: translateX(3px); }
html[dir="rtl"] .am.mk .more:hover .ico { transform: scaleX(-1) translateX(3px); }

/* ---- Security at the core: a deep panel in the brand colours ---- */
.mk-secure { margin-top: 52px; padding: 32px; border-radius: 20px; background: var(--mk-panel); color: var(--mk-on-navy); position: relative; overflow: hidden; isolation: isolate; }
.mk-secure::after { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--mk-on-navy) 10%, transparent), transparent); }
.mk-secure-head { display: flex; gap: 16px; align-items: flex-start; }
.mk-secure-head > .ico { --ico-size: 34px; color: var(--mk-on-navy); flex: none; }
.mk-secure h3 { margin: 0 0 4px; font-size: 24px; color: var(--mk-on-navy); }
.mk-secure-head p { margin: 0; color: color-mix(in srgb, var(--mk-on-navy) 86%, transparent); font-size: 16px; }
.mk-secure-list { list-style: none; margin: 24px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .mk-secure-list { grid-template-columns: minmax(0, 1fr); } }
.mk-secure-list li { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--mk-on-navy) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mk-on-navy) 18%, transparent); font-weight: 600; font-size: 14.5px; transition: background .2s; }
.mk-secure-list li:hover { background: color-mix(in srgb, var(--mk-on-navy) 16%, transparent); }
.mk-secure-list .ico { --ico-size: 18px; color: var(--mk-on-navy); flex: none; }
.mk-draft-note { margin: 10px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--color-warning); background: var(--color-warning-bg); border: 1px solid var(--color-warning-line); display: inline-block; }
.mk-secure .hint { color: color-mix(in srgb, var(--mk-on-navy) 80%, transparent); margin: 0; font-size: 13.5px; }

/* ---- The value chain: five steps joined by a line that fills in as it comes into view ---- */
:where(.am.mk) .chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
:where(.am.mk) .chain::before { content: ""; position: absolute; top: 25px; inset-inline: 8% 8%; height: 2px; background: var(--color-border); }
:where(.am.mk) .chain::after { content: ""; position: absolute; top: 25px; inset-inline-start: 8%; height: 2px; width: 84%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); }
html[dir="rtl"] :where(.am.mk) .chain::after { transform-origin: right; }
:where(.am.mk) .chain.run::after { transform: scaleX(1); }
:where(.am.mk) .chain li { position: relative; z-index: 1; margin: 0; padding: 0 10px; text-align: center; font-size: 14.5px; color: var(--color-text-muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
:where(.am.mk) .chain li > .mk-tile { width: 52px; height: 52px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-accent); margin-bottom: 10px; transition: border-color .4s, background .4s, color .4s, transform .4s var(--ease-out); }
:where(.am.mk) .chain li > .mk-tile .ico { --ico-size: 26px; }
:where(.am.mk) .chain.run li > .mk-tile { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
:where(.am.mk) .chain.run li:nth-child(2) > .mk-tile { transition-delay: .3s; }
:where(.am.mk) .chain.run li:nth-child(3) > .mk-tile { transition-delay: .6s; }
:where(.am.mk) .chain.run li:nth-child(4) > .mk-tile { transition-delay: .9s; }
:where(.am.mk) .chain.run li:nth-child(5) > .mk-tile { transition-delay: 1.2s; }
:where(.am.mk) .chain li:hover > .mk-tile { transform: scale(1.08); }
:where(.am.mk) .chain li b { display: block; color: var(--color-text); font-size: 16px; }
:where(.am.mk) .chain li .status { margin-top: 8px; }
:where(.am.mk) .chain-trust { margin-top: 24px; padding: 14px 18px; border: 1px dashed var(--color-accent); border-radius: var(--radius-md); font-size: 14.5px; color: var(--color-text-muted); display: flex; gap: 10px; align-items: flex-start; background: var(--color-accent-bg); }
:where(.am.mk) .chain-trust .ico { color: var(--color-accent); --ico-size: 18px; margin-top: 2px; flex: none; }
:where(.am.mk) .chain-trust b { color: var(--color-text); }
@media (max-width: 900px) {
  :where(.am.mk) .chain { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  :where(.am.mk) .chain::before, :where(.am.mk) .chain::after { display: none; }
  :where(.am.mk) .chain li { flex-direction: row; flex-wrap: wrap; text-align: start; align-items: center; gap: 4px 14px; padding: 0; }
  :where(.am.mk) .chain li > .ico { margin: 0; }
  :where(.am.mk) .chain li b { flex: 1 1 60%; }
  :where(.am.mk) .chain li > span { flex-basis: 100%; padding-inline-start: 66px; }
  :where(.am.mk) .chain li .status { margin: 0 0 0 66px; margin-inline-start: 66px; }
}

/* The AI chain: four parts, each with who makes it, its rule and whether it works yet. */
:where(.am.mk) .aichain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { :where(.am.mk) .aichain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { :where(.am.mk) .aichain { grid-template-columns: minmax(0, 1fr); } }
:where(.am.mk) .aichain > div { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
:where(.am.mk) .aichain > div:hover { transform: var(--mk-lift); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
:where(.am.mk) .aichain h3 { margin: 0; font-size: 19px; }
:where(.am.mk) .aichain .by { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }
html[lang="ar"] :where(.am.mk) .aichain .by { letter-spacing: 0; font-size: 13px; }
:where(.am.mk) .aichain p { margin: 0; font-size: 14.5px; color: var(--color-text-muted); flex: 1; }
:where(.am.mk) .aichain .status { align-self: flex-start; }

/* Trust commitments: five short lines, each under its icon; five across on a wide screen. */
:where(.am.mk) .trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
:where(.am.mk) .trust > div { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-lg); border: 1px solid transparent; transition: border-color .25s, background .25s, box-shadow .25s; }
:where(.am.mk) .trust > div:hover { border-color: var(--color-border); background: var(--color-surface); box-shadow: var(--elev-1); }
:where(.am.mk) .trust .mk-tile { width: 40px; height: 40px; border-radius: 12px; color: var(--color-accent); background: var(--color-accent-bg); margin-bottom: 6px; }
:where(.am.mk) .trust .ico { --ico-size: 20px; }
:where(.am.mk) .trust b { font-size: 16px; }
:where(.am.mk) .trust span { color: var(--color-text-muted); font-size: 14.5px; }

/* Closing call and footer. */
.mk-end { max-width: var(--mk-w); margin: 72px auto 0; padding: 44px 36px; border-radius: 20px; background: var(--mk-panel); color: var(--mk-on-navy); display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.mk-end::after { content: ""; position: absolute; inset: -60% -10% auto 55%; height: 160%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--mk-on-navy) 12%, transparent), transparent); }
.mk-end h2 { margin: 0; font-size: 28px; flex: 1 1 320px; color: var(--mk-on-navy); }
.mk-end .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-end .btn { background: transparent; color: var(--mk-on-navy); border-color: color-mix(in srgb, var(--mk-on-navy) 60%, transparent); }
.mk-end .btn:hover { background: color-mix(in srgb, var(--mk-on-navy) 12%, transparent); }
.mk-end .btn.pri { background: var(--mk-on-navy); color: var(--am-navy); border-color: var(--mk-on-navy); }
.mk-end .btn.pri:hover { background: color-mix(in srgb, var(--mk-on-navy) 86%, var(--am-navy)); border-color: transparent; }
.mk-foot { max-width: var(--mk-w); margin: 40px auto 0; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--color-text-muted); align-items: baseline; }
.mk-foot .logo-wordmark { font-size: 18px; color: var(--color-text); }
.mk-foot a { color: var(--color-text-muted); }

/* Reduced motion: everything is in place from the start, and nothing moves by itself. */
@media (prefers-reduced-motion: reduce) {
  html.mk-js .am.mk [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.mk-js .am.mk [data-reveal] :is(.mk-flow-col, .mk-secure-list) > li { opacity: 1; transform: none; transition: none; }
  .mk-hero-glow, .mk-hero-dots, .mk-float, .mk-skel span { animation: none; }
  .mk-hero-line path { animation: none; stroke-dashoffset: 0; }
  .mk-hero-card, html[dir="rtl"] .mk-hero-card { transform: none; transition: none; }
  .mk-flow-lines path.live { animation: none; }
  :where(.am.mk) .chain::after { transition: none; }
  :where(.am.mk) .chain.run li > .mk-tile { transition: none; }
  .mk-car-track { scroll-behavior: auto; }
  .am.mk * { transition-duration: 0s !important; }
}