/* ===========================================================================
   SIPPARSOFT deck — slide layouts + shared primitives

   Grid: 12 columns, RTL. Column 1 is the RIGHT-most column.
   Content is deliberately off-centre — the eye lands on a single focal point
   per slide and whitespace does the rest of the work.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FRAME
   --------------------------------------------------------------------------- */
.slide__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--sp-5);
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--pad-block) var(--pad-inline);
  /* No letterbox: the slide fills the viewport at any aspect. The composition
     is centred, so surplus width on a non-16:9 display splits evenly as margin
     rather than becoming a band on one side — and the autofit pass grows the
     type into it instead of leaving it empty. */
}

/* ---------------------------------------------------------------------------
   TYPE PRIMITIVES
   Arabic gets zero tracking everywhere. Only .eyebrow (Latin, uppercase)
   is allowed to track, and it is marked lang="en".
   --------------------------------------------------------------------------- */
h1, h2, h3, p, ul, ol, dl, figure, table { margin: 0; }

.d-display,
.d-h1, .d-h2, .d-h3 {
  font-family: var(--font-display);
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--text-strong);
}
.d-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--w-semi); }
.d-h1      { font-size: var(--fs-h1);      line-height: var(--lh-display); font-weight: var(--w-semi); }
.d-h2      { font-size: var(--fs-h2);      line-height: var(--lh-heading); font-weight: var(--w-semi); }
.d-h3      { font-size: var(--fs-h3);      line-height: var(--lh-heading); font-weight: var(--w-medium); }

.d-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-regular);
  color: var(--text-muted);
  max-width: var(--measure-wide);
  text-wrap: pretty;
}
.d-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--measure-wide);
  text-wrap: pretty;
}
.d-sm   { font-size: var(--fs-sm); line-height: var(--lh-lead); color: var(--text-muted); }
.d-xs   { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--text-muted); }

.d-emph { color: var(--text-accent); font-weight: inherit; }

/* Eyebrow: gold rule + label. The rule sits on the inline-start side, so in
   Arabic it runs off the right edge of the text.
   Tracking stays at 0 because these labels are Arabic; any Latin fragment
   inside carries its own tracking via .lat. Do not add letter-spacing here. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-muted);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: calc(var(--sp-6));
  height: 2px;
  background: var(--accent-line);
}
/* Pure-Latin eyebrow (no Arabic in it) — only here is tracking safe. */
.eyebrow--lat {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Hairline */
.rule { height: 1px; border: 0; background: var(--rule); width: 100%; }
.rule--accent { height: 2px; background: var(--accent-line); width: var(--sp-8); }

/* ---------------------------------------------------------------------------
   THE TWO SPEAKING MARKERS
   The deck says exactly two kinds of thing, and he has to be able to tell them
   apart at a glance from across a table:

     .rec  "توصيتنا"    — we have an opinion. Quiet: a gold hairline spine.
     .ask  "قرار مطلوب" — we need his answer. Loud: a gold cap rule + chip.

   Both are used identically on every slide type, on both grounds. Never
   restyle them per-slide.
   --------------------------------------------------------------------------- */
.rec {
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--accent-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  max-width: var(--measure-wide);
}
.rec b {
  font-weight: var(--w-semi);
  color: var(--text-accent);
}

.ask {
  display: grid;
  gap: var(--sp-2);
  width: fit-content;
  /* ch must resolve at the question's own size, not the inherited base */
  font-size: var(--fs-lead);
  max-width: 33ch;
  padding-block-start: var(--sp-3);
  border-block-start: 3px solid var(--accent-line);
}
.ask__tag {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: 0;
  color: var(--text-accent);
}
.ask__tag::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: var(--accent-line);
  rotate: 45deg;          /* a small gold lozenge — the deck's decision glyph */
}
.ask__qs { list-style: none; display: grid; gap: var(--sp-3); margin: 0; }
.ask__qs li {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-medium);
  color: var(--text-strong);
}
.ask__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}

/* Big brand-mark watermark, used only on ink grounds. Derived from the brand
   pattern page — not a generic decorative blob. */
.watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--pad-inline) * -0.55);
  translate: 0 -50%;
  height: 78%;
  width: auto;
  opacity: 0.07;
  pointer-events: none;
}
.watermark .mark-curve, .watermark .mark-dot { fill: var(--gold-500); }

/* ---------------------------------------------------------------------------
   CONTENT-SLIDE SKELETON
   data-layout carries the value written in content.md, so the deck is
   traceable back to the source file. bullets / two-column / diagram / flow all
   share one frame: title pinned top, content optically centred, questions
   parked at the foot. Composition varies inside the frame, not by swapping it.
   --------------------------------------------------------------------------- */
[data-layout="bullets"] .slide__body,
[data-layout="two-column"] .slide__body,
[data-layout="diagram"] .slide__body,
[data-layout="flow"] .slide__body {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  row-gap: var(--sp-6);
}
.s__head { grid-column: 1 / span 10; grid-row: 1; }
/* The title is pinned to the top of the frame. The body and its questions are
   one block, optically centred in whatever is left — so a sparse slide reads as
   a composed group with even air above and below it, instead of content and
   questions stranded at opposite ends with a hole between them. */
.s__col {
  grid-column: 1 / span 12;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: var(--sp-8);
  min-height: 0;
}
/* NOT min-height:0 — that lets the row compress below its content, and the body
   then paints straight over the question block without ever leaving the frame,
   so it reads as "fits" to any overflow test. Let it push out instead. */
.s__main { min-height: min-content; }
.s__foot { min-height: min-content; }
/* .s__main is a child of .s__col now, not of the 12-col .slide__body — a
   grid-column span here would spawn 12 implicit tracks inside .s__col and
   shrink-wrap the question row into the first of them. */
.s__main--narrow { grid-column: auto; }

/* ---------------------------------------------------------------------------
   ALIGNMENT — inline-start, i.e. the RIGHT edge in Arabic
   The composition is anchored to the reading edge; surplus width falls away on
   the inline-end side. Every value here is logical, so it stays correct in RTL.
   --------------------------------------------------------------------------- */
[data-layout="bullets"] .s__head,
[data-layout="two-column"] .s__head,
[data-layout="diagram"] .s__head,
[data-layout="flow"] .s__head,
[data-layout="bullets"] .s__col,
[data-layout="two-column"] .s__col,
[data-layout="diagram"] .s__col,
[data-layout="flow"] .s__col {
  text-align: start;
  justify-self: stretch;
  width: 100%;
}
.s__head .d-h2 { max-width: none; }

/* keep both rows spanning the full column — a row whose only child is
   fit-content (the question block) would otherwise shrink-wrap and take the
   grid track with it */
.s__main, .s__foot { justify-self: stretch; width: 100%; }

.groups, .g-list, .terms, .col-pair, .col-stack { justify-items: start; }
.group, .col-stack { text-align: start; }
.group__body, .s-line, .rec, .s-note { margin-inline: 0; }
.ask { margin-inline: 0; text-align: start; justify-items: start; }
.ask__tag { justify-content: flex-start; }
.term { justify-content: start; }
.agenda, .d-table { margin-inline: 0; }
.d-table th, .d-table td { text-align: start; }

/* ---------------------------------------------------------------------------
   LABELLED GROUPS
   content.md's dominant shape: a **bold label** with one line beneath it.
   The label is quiet and typographic — gold is reserved for questions, so it
   keeps its meaning across 30 slides.
   --------------------------------------------------------------------------- */
.groups {
  display: grid;
  /* auto-fit, so a stack of short Arabic entries fills the slide in two columns
     instead of running down one edge and leaving the other half dead.
     The floor is a PERCENTAGE, not a --u length: a --u floor grows with the
     autofit multiplier, so raising the type would silently collapse the two
     columns back into one and make the block narrower the bigger it got.
     42% also caps it at two columns — three would need 126%. */
  grid-template-columns: repeat(auto-fit, minmax(42%, 1fr));
  column-gap: var(--sp-8);
  row-gap: var(--sp-6);
  align-content: start;
}
.groups--2col {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-8);
  row-gap: var(--sp-5);
}
.group { display: grid; gap: var(--sp-2); align-content: start; }
.group__label {
  font-size: var(--fs-body);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
  color: var(--text-muted);
}
.group__body {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-strong);
  /* 1ch is the "0" advance, ~half an average Arabic glyph — 46ch measured out
     at 87 characters per line, well past the ~70 readability ceiling. */
  max-width: 33ch;
}
/* a group that spans both columns still needs a measure — it was previously
   max-width:none inline, which is what produced the 87-character line */
.group__body--wide { max-width: 46ch; }
/* a standalone line of body text that carries no label */
.s-line {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--measure-wide);
}
.s-line--lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* plain list inside a group */
.g-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
  column-gap: var(--sp-7);
  row-gap: var(--sp-3);
  margin: 0;
}
.g-list li {
  display: grid;
  grid-template-columns: calc(var(--u) * 1.1) 1fr;
  column-gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-strong);
}
.g-list li::before {
  content: "";
  align-self: center;
  width: calc(var(--u) * 1.1);
  height: 2px;
  background: var(--accent-line);
  transform: translateY(-0.15em);
}

/* ---------------------------------------------------------------------------
   TERM TABLE — a Latin term against its Arabic gloss
   --------------------------------------------------------------------------- */
.terms { display: grid; gap: 0; width: 100%; max-width: calc(56 * var(--u)); }
.term {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--rule);
}
.term:first-child { border-block-start: 0; padding-block-start: 0; }
.term__k {
  font-size: var(--fs-h3);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.term__v { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); }
.terms--lg .term { padding-block: var(--sp-6); }
.terms--lg .term__k { font-size: var(--fs-h2); }
.terms--lg .term__v { font-size: var(--fs-lead); color: var(--text); }

/* ---------------------------------------------------------------------------
   ON-SLIDE NOTE — "ملاحظة تُعرض على الشريحة"
   Set apart from the body, and clearly not a question: a gold hairline spine
   with no label, against the question block's heavy gold cap rule.
   --------------------------------------------------------------------------- */
.s-note {
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--accent-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  max-width: var(--measure-wide);
}

/* ---------------------------------------------------------------------------
   PURE QUESTION SLIDE — layout: question
   Nothing on the slide but the ask, so it is set larger and centred.
   --------------------------------------------------------------------------- */
[data-layout="question"] .slide__body { align-content: center; row-gap: var(--sp-6); position: relative; }
[data-layout="question"] .q__head { grid-column: 1 / span 10; }
[data-layout="question"] .q__body { grid-column: 1 / span 9; }
[data-layout="question"] .ask { font-size: var(--fs-h2); max-width: 30ch; }
[data-layout="question"] .ask__qs li { font-size: var(--fs-h2); line-height: var(--lh-heading); }

/* ---------------------------------------------------------------------------
   1 · COVER
   --------------------------------------------------------------------------- */
[data-layout="cover"] .slide__body {
  align-content: end;
  position: relative;
  padding-block-end: calc(var(--pad-block) * 1.45);
}
/* The mark is pinned to the top of the frame; the text block sits low.
   The empty middle is the composition, not an oversight. */
[data-layout="cover"] .cover__logo {
  position: absolute;
  inset-block-start: var(--pad-block);
  inset-inline-start: var(--pad-inline);
  height: calc(var(--u) * 6);
  width: calc(var(--u) * 6 * 0.4853);   /* mark aspect 264:544 */
}
[data-layout="cover"] .cover__logo .mark-curve { fill: var(--logo-ink); }
[data-layout="cover"] .cover__logo .mark-dot   { fill: var(--logo-dot); }

[data-layout="cover"] .cover__eyebrow { grid-column: 1 / span 9; margin-block-end: var(--sp-4); }
[data-layout="cover"] .cover__title   { grid-column: 1 / span 8; }
[data-layout="cover"] .cover__sub     { grid-column: 1 / span 6; margin-block-start: var(--sp-4); }
[data-layout="cover"] .cover__meta {
  grid-column: 1 / span 10;
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
[data-layout="cover"] .cover__meta span { display: flex; align-items: center; gap: var(--sp-4); }
/* separator dot between items only — not a bullet in front of each */
[data-layout="cover"] .cover__meta span + span::before {
  content: "";
  width: calc(var(--u) * 0.34);
  height: calc(var(--u) * 0.34);
  border-radius: 50%;
  background: var(--accent-line);
}

/* ---------------------------------------------------------------------------
   2 · SECTION DIVIDER
   --------------------------------------------------------------------------- */
/* Explicit rows: the number/title/standfirst stack occupies the inline-start
   half, the section contents list sits opposite and spans all three rows. */
[data-layout="divider"] .slide__body {
  position: relative;
  align-content: center;
  grid-template-rows: auto auto auto;
  row-gap: 0;
}
[data-layout="divider"] .divider__n {
  grid-column: 1 / span 7;
  grid-row: 1;
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
  font-size: var(--fs-numeral);
  font-weight: var(--w-bold);
  line-height: 0.9;
  color: var(--accent-line);
  opacity: 0.9;
  margin-block-end: var(--sp-3);
}
/* The element is direction:ltr so the digits read "01" not "10"; text-align:end
   therefore lands on the visual right — which is the inline-start edge in RTL,
   flush with the title below it. */
[data-layout="divider"] .divider__title { grid-column: 1 / span 7; grid-row: 2; }
[data-layout="divider"] .divider__sub {
  grid-column: 1 / span 6;
  grid-row: 3;
  margin-block-start: var(--sp-4);
}
[data-layout="divider"] .divider__contents {
  grid-column: 9 / span 4;
  grid-row: 1 / 4;
  align-self: center;
  padding-inline-start: var(--sp-5);
  border-inline-start: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
[data-layout="divider"] .divider__contents li { list-style: none; }
[data-layout="divider"] .divider__contents li[aria-current="true"] {
  color: var(--text-strong);
  font-weight: var(--w-medium);
}

/* ---------------------------------------------------------------------------
   3 · STATEMENT — one sentence, nothing else on the slide
   --------------------------------------------------------------------------- */
[data-layout="statement"] .slide__body { align-content: center; }
[data-layout="statement"] .statement {
  grid-column: 1 / span 10;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--w-semi);
  color: var(--text-strong);
  text-wrap: balance;
  max-width: 22ch;
}
[data-layout="statement"] .statement .d-emph { color: var(--text-accent); }
[data-layout="statement"] .statement__note {
  grid-column: 1 / span 6;
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-3);
  border-block-start: 2px solid var(--accent-line);
  width: fit-content;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   4 · TWO-COLUMN — text (inline-start / right) + visual (inline-end / left)
   --------------------------------------------------------------------------- */
/* Title pinned to the top of the frame, content optically centred in the
   space that is left. Without this the slide reads top-heavy with a dead
   lower half. */
[data-layout="split"] .slide__body,
[data-layout="points"] .slide__body,
[data-layout="table"] .slide__body {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  row-gap: var(--sp-6);
}

[data-layout="split"] .split__head { grid-column: 1 / span 12; grid-row: 1; }
[data-layout="split"] .split__text {
  grid-column: 1 / span 5;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;   /* one column — children stack */
  gap: var(--sp-4);
  align-content: center;
}
[data-layout="split"] .split__visual {
  grid-column: 8 / span 5;
  grid-row: 2;
  display: grid;
  align-content: center;
  min-height: 0;
}
[data-layout="split"] .split__aside {
  margin-block-start: var(--sp-2);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--accent-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}

/* Stat block used inside visuals — figures, not boxes */
.stats { display: grid; gap: var(--sp-5); }   /* the grid column is the measure */
.stat { display: grid; gap: var(--sp-1); padding-block-end: var(--sp-4); border-block-end: 1px solid var(--rule); }
.stat:last-child { border-block-end: 0; padding-block-end: 0; }
.stat__n {
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: calc(var(--u) * 4.25);
  font-weight: var(--w-semi);
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__n small { font-size: 0.42em; font-weight: var(--w-medium); color: var(--text-accent); margin-inline-start: 0.25em; }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-tight); }

/* ---------------------------------------------------------------------------
   5 · POINTS — max 5. Numbered in gold, hairline separated, no cards.
   --------------------------------------------------------------------------- */
[data-layout="points"] .points__head { grid-column: 1 / span 8; grid-row: 1; }
[data-layout="points"] .points {
  grid-column: 1 / span 9;
  grid-row: 2;
  list-style: none;
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  gap: 0;
}
.points li {
  display: grid;
  grid-template-columns: calc(var(--u) * 3) 1fr;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.points li:first-child { border-block-start: 0; padding-block-start: 0; }
.points li::before {
  content: counter(pt, decimal-leading-zero);
  counter-increment: pt;
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}
.points { counter-reset: pt; }
.points b { font-weight: var(--w-semi); color: var(--text-strong); }

/* ---------------------------------------------------------------------------
   6 · TABLE / COMPARISON — rules only, no zebra fills, no boxes
   --------------------------------------------------------------------------- */
[data-layout="table"] .table__head { grid-column: 1 / span 9; grid-row: 1; }
[data-layout="table"] .d-table { grid-column: 1 / span 12; grid-row: 2; align-self: center; }

.d-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.d-table th, .d-table td {
  text-align: start;
  padding: var(--sp-3) var(--sp-3);
  border-block-end: 1px solid var(--rule);
  vertical-align: baseline;
}
.d-table thead th {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  color: var(--text-muted);
  border-block-end: 2px solid var(--rule-strong);
  padding-block-end: var(--sp-2);
}
.d-table tbody th {
  font-weight: var(--w-semi);
  color: var(--text-strong);
  font-size: var(--fs-sm);
}
.d-table tbody tr:last-child th, .d-table tbody tr:last-child td { border-block-end: 0; }
.d-table .col--mark { width: 1%; white-space: nowrap; }
.d-table td .num { color: var(--text-strong); font-weight: var(--w-medium); }

/* The column we are arguing for gets a gold spine, not a filled box. */
.d-table .col--focus { box-shadow: inset 2px 0 0 0 var(--accent-line); }
html[dir="rtl"] .d-table .col--focus { box-shadow: inset -2px 0 0 0 var(--accent-line); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.tag::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--rule-strong);
}
.tag--yes::before { background: var(--accent-line); }
.tag--no::before  { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }

/* ---------------------------------------------------------------------------
   7 · FLOW / PROCESS — custom SVG, reads RIGHT → LEFT
   --------------------------------------------------------------------------- */
[data-layout="flow"] .slide__body {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  row-gap: var(--sp-6);
}
[data-layout="flow"] .flow__head { grid-column: 1 / span 9; grid-row: 1; }
/* .flow__main is the generic centred content row — it carries an SVG flow,
   a journey rail, or a set of level bands. .flow below only styles SVG. */
[data-layout="flow"] .flow__main { grid-column: 1 / span 12; grid-row: 2; align-self: center; }
[data-layout="flow"] .flow__foot {
  grid-column: 1 / span 9;
  grid-row: 3;
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
[data-layout="flow"] .flow__note {
  grid-column: 1 / span 7;
  grid-row: 3;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-lead);
}

.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .fl-node   { fill: none; stroke: var(--rule-strong); stroke-width: 1.25; }
.flow .fl-node--on { stroke: var(--accent-line); stroke-width: 2; }
.flow .fl-arrow  { stroke: var(--rule-strong); stroke-width: 1.25; fill: none; }
.flow .fl-arrow--on { stroke: var(--accent-line); stroke-width: 2; }
.flow .fl-fill   { fill: var(--accent-line); }
.flow .fl-label  {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text-strong);
  letter-spacing: 0;
}
.flow .fl-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  fill: var(--text-muted);
  letter-spacing: 0;
}
.flow .fl-step {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-accent);
  direction: ltr;
}

/* ---------------------------------------------------------------------------
   8 · QUESTION — the decisions we need from him
   --------------------------------------------------------------------------- */
[data-layout="question"] .slide__body { align-content: center; row-gap: var(--sp-5); position: relative; }
[data-layout="question"] .q__eyebrow { grid-column: 1 / span 12; }
[data-layout="question"] .q__title {
  grid-column: 1 / span 9;
  max-width: 26ch;
}
[data-layout="question"] .q__opts {
  grid-column: 1 / span 10;
  margin-block-start: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
}
.q__opt {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border-inline-start: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.q__opt:first-child { border-inline-start: 0; padding-inline-start: 0; }
.q__opt h3 { font-size: var(--fs-h3); font-weight: var(--w-semi); color: var(--text-strong); line-height: var(--lh-heading); }
.q__opt p  { font-size: var(--fs-sm); line-height: var(--lh-lead); color: var(--text-muted); }
.q__opt .q__key {
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  color: var(--text-accent);
}
[data-layout="question"] .q__ask {
  grid-column: 1 / span 8;
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-3);
  border-block-start: 2px solid var(--accent-line);
  width: fit-content;
  font-size: var(--fs-body);
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   9 · CLOSING / NEXT STEPS
   --------------------------------------------------------------------------- */
[data-layout="closing"] .slide__body { align-content: center; row-gap: var(--sp-5); position: relative; }
[data-layout="closing"] .closing__title { grid-column: 1 / span 6; }
[data-layout="closing"] .closing__steps {
  grid-column: 8 / span 5;
  grid-row: 1 / span 3;
  align-self: center;
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: st;
}
.closing__steps li {
  display: grid;
  grid-template-columns: calc(var(--u) * 2.6) 1fr;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
.closing__steps li:first-child { border-block-start: 0; padding-block-start: 0; }
.closing__steps li::before {
  content: counter(st);
  counter-increment: st;
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--fs-body);
  font-weight: var(--w-semi);
  color: var(--text-accent);
}
.closing__steps time { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 0.25em; }
[data-layout="closing"] .closing__contact {
  grid-column: 1 / span 6;
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   10 · DECISION — one question, our recommendation, his call
   Always on ink so it stands out from the explanatory slides around it.
   --------------------------------------------------------------------------- */
[data-layout="decision"] .slide__body { align-content: center; row-gap: var(--sp-4); position: relative; }
[data-layout="decision"] .dec__tag { grid-column: 1 / span 12; }
[data-layout="decision"] .dec__title { grid-column: 1 / span 8; max-width: 24ch; }
[data-layout="decision"] .dec__body {
  grid-column: 1 / span 6;
  margin-block-start: var(--sp-2);
}
[data-layout="decision"] .dec__rec {
  grid-column: 1 / span 6;
  margin-block-start: var(--sp-3);
}
[data-layout="decision"] .dec__aside {
  grid-column: 8 / span 5;
  grid-row: 2 / span 3;
  align-self: center;
  padding-inline-start: var(--sp-5);
  border-inline-start: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   11 · DECISION LIST — the six. He will photograph this slide.
   Big gold numerals, two columns, nothing else on the slide.
   --------------------------------------------------------------------------- */
[data-layout="decision-list"] .slide__body {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  row-gap: var(--sp-6);
}
[data-layout="decision-list"] .dl__head { grid-column: 1 / span 9; grid-row: 1; }
[data-layout="decision-list"] .dl {
  grid-column: 1 / span 12;
  grid-row: 2;
  align-content: center;
  display: grid;
  /* column flow, so he reads 1·2·3 down the right then 4·5·6 down the left —
     row flow would put 1·3·5 in one column, which is how you lose a reader */
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: var(--sp-8);
  row-gap: 0;
  list-style: none;
  counter-reset: dl;
}
.dl li {
  display: grid;
  grid-template-columns: calc(var(--u) * 3.4) 1fr;
  column-gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  color: var(--text-strong);
}
.dl li::before {
  content: counter(dl);
  counter-increment: dl;
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: calc(var(--u) * 3);
  font-weight: var(--w-bold);
  line-height: 1;
  color: var(--accent-line);
}
.dl li:nth-child(1), .dl li:nth-child(4) { border-block-start: 0; padding-block-start: 0; }

/* ---------------------------------------------------------------------------
   12 · LEVELS — the three user tiers, as bands rather than boxes
   --------------------------------------------------------------------------- */
.levels { display: grid; gap: 0; width: 100%; }
/* Full-slide treatment: the three tiers carry the whole slide, so the names
   are set at heading scale and the block is capped so it does not strand a
   short Arabic phrase across 1700px of empty ground.

   NB: the name column must be max-content, never a `ch` value. `ch` in
   grid-template-columns resolves against THIS element's font-size (the 16px
   base), but .level__name renders at 52px — a ch-sized column is roughly a
   third of the width the name actually needs, and the glyphs overflow it
   straight onto the description. Same reason the cap below uses --u. */
.levels--lg { max-width: calc(66 * var(--u)); }
.levels--lg .level { padding-block: var(--sp-6); column-gap: var(--sp-5); }
.levels--lg .level__name { font-size: var(--fs-h2); }
.levels--lg .level__do   { font-size: var(--fs-lead); color: var(--text); }
.level {
  display: grid;
  /* max-content, not a ch value — the name is set at a much larger font-size
     than this element, so a ch-sized track under-measures it badly */
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--rule);
  position: relative;
}
.level:first-child { border-block-start: 0; padding-block-start: 0; }
.level__name {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.level__name::before {
  content: "";
  align-self: center;
  flex: none;
  width: calc(var(--u) * 0.55);
  height: calc(var(--u) * 0.55);
  background: var(--accent-line);
  rotate: 45deg;
}
.level__do {
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   13 · NINE DEPARTMENTS — a typographic list, deliberately not nine cards
   Numerals hang in gold, names set large, hairlines only between rows.
   --------------------------------------------------------------------------- */
.depts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-7);
  row-gap: 0;
  list-style: none;
  counter-reset: dept;
  width: 100%;
}
.depts li {
  display: grid;
  grid-template-columns: calc(var(--u) * 2.4) 1fr;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  color: var(--text-strong);
}
.depts li::before {
  content: counter(dept, decimal-leading-zero);
  counter-increment: dept;
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  color: var(--text-accent);
}
.depts li:nth-child(1), .depts li:nth-child(2) { border-block-start: 0; padding-block-start: 0; }

/* ---------------------------------------------------------------------------
   14 · JOURNEY RAIL — one visual grammar for all three journeys
   A single gold rail running right → left with a stop at each step. Used
   wherever the content is a sequence of many short steps; the boxed .flow
   above is kept for short processes where each node needs a sub-label.
   --------------------------------------------------------------------------- */
.rail svg { display: block; width: 100%; height: auto; overflow: visible; }
.rail .rl-line  { stroke: var(--accent-line); stroke-width: 2; fill: none; }
.rail .rl-dot   { fill: var(--surface); stroke: var(--accent-line); stroke-width: 2; }
.rail .rl-dot--on { fill: var(--accent-line); }
.rail .rl-n {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-accent);
  direction: ltr;
}
.rail .rl-label {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  fill: var(--text-strong);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   POINT-LIST VARIANTS
   --------------------------------------------------------------------------- */
/* Unordered: a short gold rule instead of a number, for lists with no sequence */
.points--mark li::before {
  content: "";
  align-self: center;
  width: calc(var(--u) * 1.1);
  height: 2px;
  background: var(--accent-line);
  transform: translateY(-0.15em);
}
/* Six items still have to breathe on a 1080-tall slide */
.points--six li { padding-block: var(--sp-2); }

/* A points slide that ends in a recommendation or a decision */
[data-layout="points"] .points__foot {
  grid-column: 1 / span 9;
  grid-row: 3;
  margin-block-start: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
[data-layout="points"] .slide__body:has(.points__foot) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
/* a points slide whose list needs the full width (long inline runs) */
[data-layout="points"] .points--wide { grid-column: 1 / span 12; }

/* ---------------------------------------------------------------------------
   TABLE VARIANTS
   --------------------------------------------------------------------------- */
/* Scope table: two columns, the deferred side deliberately receding */
.d-table--scope td { font-size: var(--fs-body); }
.d-table--scope .col--out { color: var(--text-muted); }
.d-table--scope thead th { font-size: var(--fs-sm); }

/* Spec-template table: the option values are the point, so give them room */
.d-table--spec td:last-child { color: var(--text-strong); }
.d-table--spec .opt {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35em 0.9em;
}
.d-table--spec .opt span { white-space: nowrap; }

/* Compact three-column run — used for the nine AI tools, so it does not
   read as a repeat of the nine departments composition. */
.depts--sm { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-5); }
.depts--sm li { font-size: var(--fs-body); font-weight: var(--w-regular); padding-block: var(--sp-2); }
.depts--sm li:nth-child(3) { border-block-start: 0; padding-block-start: 0; }

/* Split with a dominant visual side (the nine departments) */
[data-layout="split"] .split--wide.split__text   { grid-column: 1 / span 4; }
[data-layout="split"] .split--wide.split__visual { grid-column: 6 / span 7; }

/* ---------------------------------------------------------------------------
   15 · PAIRS — problem against solution. The specification-templates slide.
   Two facing statements, then one full-width outcome rule underneath.
   --------------------------------------------------------------------------- */
[data-layout="pairs"] .slide__body {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  row-gap: var(--sp-6);
}
[data-layout="pairs"] .pairs__head { grid-column: 1 / span 9; grid-row: 1; }
/* align-self:center, not stretch — otherwise the pair's rule runs the full
   height of the row and reads as an empty column divider */
[data-layout="pairs"] .pair--problem  { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
[data-layout="pairs"] .pair--solution { grid-column: 7 / span 6; grid-row: 2; align-self: start; }
[data-layout="pairs"] .slide__body { align-items: start; }
[data-layout="pairs"] .outcome        { grid-column: 1 / span 12; grid-row: 3; }

.pair {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--rule);
}
.pair--solution { border-inline-start: 3px solid var(--accent-line); }
.pair__tag {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  color: var(--text-muted);
}
.pair--solution .pair__tag { color: var(--text-accent); }
.pair__text {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: var(--w-medium);
  color: var(--text-strong);
  max-width: 24ch;
}

/* The same product description, twice, the way two suppliers would type it.
   Values are lifted from the rebar template on the next slide — nothing new
   is asserted, the point is purely that the two strings do not match. */
.freetext { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.freetext p {
  font-size: var(--fs-sm);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
}

/* …and the same thing as a filled template. */
.fields { display: grid; gap: 0; margin-block-start: var(--sp-2); list-style: none; }
.fields li {
  display: grid;
  grid-template-columns: 11ch 1fr;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-2);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-sm);
}
.fields li:first-child { border-block-start: 0; padding-block-start: 0; }
.fields b { font-weight: var(--w-regular); color: var(--text-muted); }
.fields i {
  font-style: normal;
  font-weight: var(--w-semi);
  color: var(--text-strong);
  justify-self: start;
  padding: 0.12em var(--sp-2);
  background: var(--paper-000);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
}
.outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  padding-block-start: var(--sp-3);
  border-block-start: 3px solid var(--accent-line);
  font-size: var(--fs-body);
  color: var(--text-strong);
}
.outcome b { font-weight: var(--w-semi); color: var(--text-accent); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------------
   NARROW SCREENS
   Below ~760px the 12-column grid collapses to a single column and slides
   scroll internally. Type stays at the --u floor so it never goes small.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Reflow branch. The fit scale would be unreadably small here, so the unit is
     driven by viewport width instead and the slide becomes a scrolling column. */
  body:not(.is-overview) .slide { --u: clamp(11px, 3.4vw, 16px); }

  body:not(.is-overview) .slide__body {
    grid-template-columns: 1fr;
    align-content: start;
    padding: calc(var(--u) * 3.5) calc(var(--u) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    row-gap: var(--sp-4);
  }
  body:not(.is-overview) .slide__body > * { grid-column: 1 / -1 !important; grid-row: auto !important; }

  /* Neutralise the content skeleton. Left in place it keeps a 1fr row and a
     centred inner grid, which in a short window compresses the rows until the
     body and the question block paint over each other. Here they simply stack. */
  body:not(.is-overview) [data-layout="bullets"] .slide__body,
  body:not(.is-overview) [data-layout="two-column"] .slide__body,
  body:not(.is-overview) [data-layout="diagram"] .slide__body,
  body:not(.is-overview) [data-layout="flow"] .slide__body {
    grid-template-rows: none;
    align-content: start;
  }
  body:not(.is-overview) .s__col { display: block; min-height: 0; }
  body:not(.is-overview) .s__foot { margin-block-start: var(--sp-7); }
  body:not(.is-overview) .ask { width: auto; max-width: none; }

  body:not(.is-overview) .slide { --fs-display: calc(2.6 * var(--u)); }
  body:not(.is-overview) .slide { --fs-h1: calc(2.35 * var(--u)); }
  body:not(.is-overview) .slide { --fs-h2: calc(1.9 * var(--u)); }
  body:not(.is-overview) .slide { --fs-h3: calc(1.4 * var(--u)); }
  body:not(.is-overview) .slide { --fs-lead: calc(1.25 * var(--u)); }
  body:not(.is-overview) .slide { --fs-body: calc(1.15 * var(--u)); }
  body:not(.is-overview) .slide { --fs-numeral: calc(3.4 * var(--u)); }

  body:not(.is-overview) [data-layout="divider"] .divider__contents,
  body:not(.is-overview) .watermark { display: none; }
  body:not(.is-overview) [data-layout="question"] .q__opts { grid-template-columns: 1fr; }
  body:not(.is-overview) .q__opt { border-inline-start: 0; border-block-start: 1px solid var(--rule); padding-inline: 0; }
  body:not(.is-overview) .q__opt:first-child { border-block-start: 0; padding-block-start: 0; }
  body:not(.is-overview) .flow,
  body:not(.is-overview) .rail { overflow-x: auto; overscroll-behavior-inline: contain; }
  body:not(.is-overview) .flow svg { min-width: 560px; }
  body:not(.is-overview) .rail svg { min-width: 720px; }
  body:not(.is-overview) [data-layout="table"] { overflow-x: auto; }
  body:not(.is-overview) .d-table { min-width: 520px; }

  /* multi-column compositions collapse to one column on a phone */
  body:not(.is-overview) .dl,
  body:not(.is-overview) .depts { grid-template-columns: 1fr; }
  body:not(.is-overview) .dl li:nth-child(2),
  body:not(.is-overview) .depts li:nth-child(2) {
    border-block-start: 1px solid var(--rule);
    padding-block-start: var(--sp-3);
  }
  body:not(.is-overview) .level { grid-template-columns: 1fr; row-gap: var(--sp-2); }
}

/* ---------------------------------------------------------------------------
   AGENDA — slide 2. The markers are the ١…٧ written in content.md, so they
   are literal text rather than a CSS counter.
   --------------------------------------------------------------------------- */
.agenda { list-style: none; display: grid; gap: 0; margin: 0; }
.agenda li {
  display: grid;
  grid-template-columns: calc(var(--u) * 2.2) 1fr;
  column-gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  color: var(--text-strong);
}
.agenda li:first-child { border-block-start: 0; padding-block-start: 0; }
.agenda .ag-n { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--text-accent); }

/* two-column content that also carries a table underneath one column */
.col-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); row-gap: var(--sp-5); align-items: start; }
.col-stack { display: grid; gap: var(--sp-5); align-content: start; }

@media (max-width: 900px) {
  body:not(.is-overview) .groups--2col,
  body:not(.is-overview) .col-pair { grid-template-columns: 1fr; }
  body:not(.is-overview) .term { grid-template-columns: 1fr; row-gap: var(--sp-1); }
}

/* Header row for .terms and .agenda — content.md's tables carry a header row,
   and "keep every row and column" includes it. */
.term--head { padding-block: 0 var(--sp-3); border-block-end: 1px solid var(--rule-strong); }
.term--head .term__k,
.term--head .term__v {
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  color: var(--text-muted);
}
.terms--lg .term--head .term__k { font-size: var(--fs-sm); }
.terms--lg .term--head .term__v { font-size: var(--fs-sm); color: var(--text-muted); }
.terms--lg .term--head + .term { border-block-start: 0; padding-block-start: var(--sp-5); }
.terms .term--head + .term { border-block-start: 0; padding-block-start: var(--sp-4); }

.agenda .agenda__head {
  border-block-start: 0;
  padding-block: 0 var(--sp-3);
  border-block-end: 1px solid var(--rule-strong);
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  color: var(--text-muted);
}
.agenda .agenda__head .ag-n { color: var(--text-muted); font-size: var(--fs-sm); }
.agenda .agenda__head + li { border-block-start: 0; padding-block-start: var(--sp-4); }

/* Column key for the flow diagram on slide 26 */
.flow-key { display: flex; gap: var(--sp-5); margin-block-end: var(--sp-4); }
.flow-key span { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--text-muted); }