/* ===========================================================================
   LEGAL & REGULATORY INTELLIGENCE — a Madar product.
   Implements design-systems/madar-legal/DESIGN.md.

   This stylesheet is deliberately independent of the Madar corporate system
   (../styles.css). Nothing is imported from it: different palette, different
   typefaces, different motion, different component language.
   =========================================================================== */

/* ---------- Fonts (bundled, latin subset, no CDN) ---------- */
@font-face {
  font-family: 'Source Serif 4';
  src: url('assets/fonts/SourceSerif4-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Var';
  src: url('assets/fonts/IBMPlexSans-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-display: swap;
}

/* Language switch — names the destination language in its own script. A text
   link, not a flag: flags are countries, not languages. Sits in the nav rule
   set below, so it inherits .nav-link sizing and only overrides the face. */
.lang-switch { font-variant-numeric: normal; }
[lang="ar"] .lang-switch, .lang-switch[lang="en"] { direction: ltr; unicode-bidi: isolate; }

/* ---------- Tokens (§01–§03) ---------- */
:root {
  --paper: #F6F3EE;
  --paper-deep: #EFEAE1;
  --surface: #FDFCFA;
  --ink: #1A1814;
  --ink-2: #4A453C;
  --ink-3: #6B6459;
  --rule: #E0D9CD;
  --rule-strong: #C9C0B1;
  --claret: #6E2A34;
  --claret-deep: #4E1D24;
  --claret-wash: rgba(110, 42, 52, 0.07);

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans Var', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 7.5vw, 116px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--claret); }
:focus-visible {
  outline: 2px solid var(--claret);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Logical properties throughout so an [dir="rtl"] flip needs no new CSS. */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--deep { background: var(--paper-deep); }
.section--ruled { border-block-start: 1px solid var(--rule); }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------- Section label (§05 — the signature element) ---------- */
.label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claret);
  margin-block-end: 32px;
}
.section-head { max-width: 760px; }
.section-head h2 {
  font-size: clamp(30px, 4vw, 48px);
}
.section-head .lede {
  margin-block-start: 24px;
  font-size: 19px;
  color: var(--ink-2);
  max-width: 68ch;
}

/* ---------- Buttons (§05) ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn-primary { background: var(--claret); color: var(--paper); border-color: var(--claret); }
.btn-primary:hover { background: var(--claret-deep); border-color: var(--claret-deep); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 243, 238, 0.92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.16s var(--ease);
}
.site-header.is-stuck { border-block-end-color: var(--rule); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 76px;
}
.wordmark {
  text-decoration: none;
  display: block;
  margin-inline-end: auto;
}
.wordmark-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  line-height: 1.15;
}
.wordmark-parent {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-start: 3px;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a.nav-link {
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.site-nav a.nav-link:hover { color: var(--ink); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 8px;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-block: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a.nav-link {
    padding-block: 14px;
    border-block-end: 1px solid var(--rule);
    font-size: 16px;
  }
  .site-nav .btn { margin-block-start: 20px; text-align: center; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(64px, 8vw, 112px) clamp(56px, 7vw, 96px); }
.hero-copy { max-width: 780px; }
.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.025em;
}
.hero .lede {
  margin-block-start: 28px;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
}
.hero .sub {
  margin-block-start: 20px;
  max-width: 62ch;
  color: var(--ink-2);
}
.hero-actions {
  margin-block-start: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Product UI panel (§05 — the only shadow in the system) ---------- */
.panel-frame { margin-block-start: clamp(48px, 6vw, 80px); }
.panel-caption {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin-block-end: 14px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.04), 0 12px 40px -24px rgba(26, 24, 20, 0.28);
  overflow: hidden;
}
.panel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-block-end: 1px solid var(--rule);
  background: var(--paper-deep);
}
.panel-bar-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-bar-meta {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--ink-3);
}
.panel-query {
  padding: 24px clamp(20px, 3vw, 32px);
  border-block-end: 1px solid var(--rule);
}
.panel-query .field-name,
.panel-field .field-name,
.demo-in .field-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 10px;
}
.panel-query p {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  color: var(--ink);
}
.panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.panel-field {
  padding: 24px clamp(20px, 3vw, 32px);
  border-block-end: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.45;
}
.panel-field:nth-child(odd) { border-inline-end: 1px solid var(--rule); }
.panel-field--full { grid-column: 1 / -1; border-inline-end: 0; }
.panel-field:last-child { border-block-end: 0; }
.panel-field p { color: var(--ink-2); }
.panel-verdict {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin-block-end: 8px;
}

/* Source chips — expand in place, never a modal or tooltip (§05) */
.sources { display: flex; flex-direction: column; gap: 8px; }
.source {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--claret-wash);
  overflow: hidden;
}
.source-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: start;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--claret);
  padding: 9px 12px;
  cursor: pointer;
}
.source-caret {
  flex: none;
  width: 9px; height: 9px;
  margin-block-start: 5px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.22s var(--ease);
}
.source-toggle[aria-expanded="true"] .source-caret { transform: rotate(45deg); }
.source-excerpt {
  padding: 0 12px 12px 31px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.source-excerpt[hidden] { display: none; }
.source-note {
  display: block;
  margin-block-start: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 820px) {
  .panel-body { grid-template-columns: 1fr; }
  .panel-field:nth-child(odd) { border-inline-end: 0; }
}

/* ---------- Trust strip (factual positioning only) ---------- */
.trust {
  border-block: 1px solid var(--rule);
  padding-block: 28px;
}
.trust ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.trust li {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* ---------- Rule-separated cells (§04 — borders over boxes) ---------- */
.cells {
  display: grid;
  gap: 0 48px;
  margin-block-start: 64px;
}
.cells--2 { grid-template-columns: repeat(2, 1fr); }
.cells--3 { grid-template-columns: repeat(3, 1fr); }
.cell {
  border-block-start: 1px solid var(--rule);
  padding-block: 32px 40px;
  transition: border-color 0.16s var(--ease);
}
.cell:hover { border-block-start-color: var(--claret); }
.cell h3 {
  font-size: 24px;
  margin-block-end: 14px;
}
.cell p { color: var(--ink-2); font-size: 16px; }
.cell-index {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-block-end: 12px;
}
.cell-terms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 20px;
}
.cell-terms li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 4px 10px;
}

/* ---------- Problem section ---------- */
.problem-body {
  margin-block-start: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
/* One child now, not two. The list files itself into the same two columns the
   section always had, so the measure is unchanged and the section is half as
   tall. --wide is the modifier because the list, not the wrapper, does the work. */
.problem-body:has(> :only-child) { grid-template-columns: 1fr; }
.fragment-list--wide {
  display: grid;
  /* Column flow, not row flow: this is one list of seven read top to bottom
     and then over, the way a directory is read. Row flow would have made it
     two unrelated lists of four and three. */
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}
.fragment-list, .question-list { list-style: none; }
.fragment-list li, .question-list li {
  border-block-start: 1px solid var(--rule);
  padding-block: 13px;
  font-size: 16px;
  color: var(--ink-2);
}
.question-list li { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.list-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 18px;
}

/* ---------- Pipeline: Search → Analyse → Verify → Apply → Draft ---------- */
.pipeline {
  margin-block-start: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-block-start: 1px solid var(--rule-strong);
}
.stage {
  padding: 28px 24px 32px 0;
  border-inline-end: 1px solid var(--rule);
}
.stage:last-child { border-inline-end: 0; }
.stage-no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--claret);
}
.stage h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-block: 14px 12px;
}
.stage p { font-size: 15px; color: var(--ink-2); }

/* ---------- Sources ---------- */
.source-grid {
  margin-block-start: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
}
.source-cat {
  border-block-start: 1px solid var(--rule);
  padding-block: 28px 34px;
}
.source-cat h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-block-end: 10px;
}
.source-cat p { font-size: 15px; color: var(--ink-2); }
.source-cat ul { list-style: none; margin-block-start: 12px; }
.source-cat ul li {
  font-size: 14px;
  color: var(--ink-3);
  padding-block: 4px;
}
.traceability {
  margin-block-start: 72px;
  border-block-start: 2px solid var(--claret);
  padding-block-start: 32px;
  max-width: 780px;
}
.traceability p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- Photographic breaker ----------
   Full-bleed on purpose: every other block on this page is held inside the
   1140px measure, so going edge-to-edge is what makes this read as a pause in
   the argument rather than another card. */
.breaker {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  background: var(--ink);
  border-block: 1px solid var(--rule-strong);
  /* No min-height. The photograph is shown uncropped (Yousef, 2026-09-16), so
     the band takes its height from the image's own ratio — 585px at 1440 — and
     the plate stretches to match. Cropping this back is his call, not a
     maintenance edit: an earlier pass held it to 432px with a 1.95:1 crop. */
}
.breaker-figure { display: block; }
.breaker-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1086;   /* the photograph's own ratio; nothing is cut */
}
.breaker-plate {
  order: -1;                       /* picture leads in the DOM so it stacks first on a phone */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(40px, 5vw, 64px);
  padding-inline-end: clamp(28px, 3.5vw, 56px);
  /* Holds the headline on the same axis as every other heading on the page:
     the gutter, plus whatever the 1140px measure leaves at the side. The band
     is full-bleed but the reading axis does not move. */
  padding-inline-start: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.breaker-line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.breaker-sub {
  margin-block: 16px 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(246, 243, 238, 0.74);
}
/* Kept next to the component rather than in the shared breakpoint block at the
   foot of the file: this is art direction, not reflow. Below 700px the split
   collapses and the plate becomes a caption under the photograph. The image
   keeps its own ratio here too, so a phone gets the full frame at 281px tall —
   the faces stay readable without a second crop. */
@media (max-width: 700px) {
  .breaker { grid-template-columns: 1fr; }
  .breaker-plate {
    order: 0;
    padding: 26px var(--gutter) 30px;
  }
  .breaker-line { font-size: 24px; }
  .breaker-sub { font-size: 14.5px; margin-block-start: 12px; }
}

/* ---------- Demo (mock) ---------- */
.demo-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; justify-content: space-between; }
.demo-tabs {
  display: flex;
  gap: 28px;
  margin-block-start: 40px;
  border-block-end: 1px solid var(--rule);
}
.demo-tab {
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 0 0 14px;
  margin-block-end: -1px;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.demo-tab:hover { color: var(--ink); }
.demo-tab[aria-selected="true"] { color: var(--ink); border-block-end-color: var(--claret); font-weight: 600; }
.demo-panel { margin-block-start: 32px; }
.demo-panel[hidden] { display: none; }
.demo-fade { animation: fade 0.16s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.mock-note {
  margin-block-start: 20px;
  font-size: 13px;
  color: var(--ink-3);
}
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.demo-in, .demo-out { padding: 28px clamp(20px, 3vw, 32px); }
.demo-in { border-inline-end: 1px solid var(--rule); background: var(--paper-deep); }
.demo-in p { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); }
.demo-in ul { list-style: none; margin-block-start: 14px; }
.demo-in ul li {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  border-block-start: 1px solid var(--rule);
  padding-block: 9px;
}
.demo-out h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block: 20px 8px;
}
.demo-out h4:first-child { margin-block-start: 0; }
.demo-out p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* A drafted document, quoted inside the interface: set in the display serif
   and marked off by a rule so it reads as produced output, not page copy. */
.draft {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  border-inline-start: 2px solid var(--rule-strong);
  padding-inline-start: 16px;
}
.demo-out ul { list-style: none; }
.demo-out ul li {
  font-size: 15px;
  color: var(--ink-2);
  padding-block: 7px;
  border-block-start: 1px solid var(--rule);
}
.demo-out ul li b { color: var(--ink); font-weight: 600; }

/* ---------- Registers (§04 — rule-separated cells, no cards) ---------- */
.registers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  margin-block-start: 64px;
}
.register {
  border-block-start: 1px solid var(--rule);
  padding-block: 32px 40px;
  transition: border-color 0.16s var(--ease);
}
.register:hover { border-block-start-color: var(--claret); }
.register-figure {
  width: 176px;
  height: 176px;
  margin-block-end: 24px;
  margin-inline-start: -10px; /* optical: the matte carries ~10px of air */
}
.register h3 {
  font-size: 24px;
  margin-block-end: 8px;
}
.register-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 18px;
}
.register p:last-child {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 46ch;
}

/* ---------- Use cases ---------- */
/* Tried in two columns; it came out taller, not shorter. The 266px title
   track does not fit a half-width column, so every description wrapped to
   three lines and three tall rows beat five short ones. Full-width rows stay. */
.usecases { margin-block-start: 64px; }
.usecase {
  border-block-start: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  padding-block: 28px;
  transition: border-color 0.16s var(--ease);
}
.usecase:hover { border-block-start-color: var(--claret); }
.usecase:last-child { border-block-end: 1px solid var(--rule); }
.usecase h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.usecase p { font-size: 17px; color: var(--ink-2); }

/* ---------- Integrations ---------- */
/* Deployment carries two lists under one heading. The sub-label is the same
   uppercase device as .list-title, spaced to read as a rung below the h2
   rather than a second section start. */
.deployment-sub {
  margin-block-start: 64px;
  margin-block-end: 0;
  padding-block-end: 4px;
}
.deployment-sub + .integrations,
.deployment-sub + .cells { margin-block-start: 20px; }
.integrations {
  margin-block-start: 64px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}
.integration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-block-start: 1px solid var(--rule);
  padding-block: 18px;
}
.integration span { font-size: 16px; color: var(--ink-2); }
.status {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
}
.integration-note {
  margin-block-start: 32px;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 68ch;
}

/* ---------- Built by Madar ---------- */
.madar-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  padding: 40px clamp(24px, 4vw, 48px);
}
.madar-block img { width: 168px; height: auto; }
.madar-block p { font-size: 17px; color: var(--ink-2); max-width: 56ch; }

/* ---------- Final CTA + demo request form ---------- */
.final h2 { font-size: clamp(30px, 4.4vw, 52px); max-width: 22ch; }
.final-grid {
  margin-block-start: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.assurances { list-style: none; }
.assurances li {
  border-block-start: 1px solid var(--rule);
  padding-block: 13px;
  font-size: 16px;
  color: var(--ink-2);
}
.demo-form { display: grid; gap: 18px; }
.field label, .field .field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-block-end: 7px;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--claret);
  box-shadow: 0 0 0 3px var(--claret-wash);
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.req { color: var(--claret); }
.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.consent input { margin-block-start: 3px; accent-color: var(--claret); flex: none; }
.form-status {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
}
.form-status[hidden] { display: none; }
/* The live region stays in the accessibility tree while empty, so screen
   readers are already listening when the message lands; it only collapses visually. */
.form-status:empty { padding: 0; border: 0; }
.field [aria-invalid="true"] { border-color: var(--claret); }
.form-status.ok { border-color: var(--claret); background: var(--claret-wash); color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  border-block-start: 1px solid var(--rule);
  padding-block: 48px 40px;
  background: var(--paper-deep);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom {
  margin-block-start: 40px;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-3);
}
.disclaimer {
  margin-block-start: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 76ch;
}

/* ===========================================================================
   FIGURE SYSTEM
   One authored stroke across the whole page. The glyphs are documents the
   product reads and artifacts it produces — never decoration, never a stock
   icon set. Ink by default; claret is spent only where §01 allows it, which
   is why the figures do not all reach for the accent.
   =========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fig {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  color: var(--ink-3);
  transition: color 0.16s var(--ease);
}
/* The one struck line in the amendment glyph reads as a deletion, not a rule. */
.fig .strike { stroke: var(--claret); stroke-width: 1.1; }

/* ---------- Problem: seven kinds of paper, five questions ---------- */
.fragment-list li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fragment-list .fig { width: 26px; height: 26px; }
.fragment-list li:hover .fig { color: var(--ink-2); }

.question-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: baseline;
}
/* A question mark would be decoration. This is the mark a reader makes in a
   margin next to the thing they still have to resolve. */
.question-list li::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-inline-start: 1px solid var(--claret);
  border-block-start: 1px solid var(--claret);
  transform: translateY(4px);
}

/* ---------- Pipeline: the trace rail ---------- */
.stage-fig {
  display: block;
  inline-size: 34px;
  block-size: 34px;
  margin-block-end: 20px;
  color: var(--ink-2);
}
.stage { position: relative; }
/* The hairline that carries the eye from Search to Draft. It is the rail the
   five stages sit on, so it is drawn once per stage and stops at the last. */
.stage::after {
  content: "";
  position: absolute;
  inset-block-start: 45px;
  inset-inline-start: 34px;
  inline-size: calc(100% - 34px);
  block-size: 1px;
  background: var(--rule);
}
.stage:last-child::after { display: none; }
.stage:hover .stage-fig { color: var(--claret); }

/* ---------- Capabilities: a fragment of the product's own output ---------- */
.cell-artifact {
  margin-block: 22px 0;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.cell-artifact .af-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 8px;
}
.cell-artifact .af-line {
  color: var(--ink-2);
  font-size: 13px;
}
.cell-artifact .af-cite {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 10px;
}
.cell-artifact .af-cite span {
  border: 1px solid var(--rule);
  background: var(--claret-wash);
  color: var(--claret);
  font-size: 11px;
  padding: 3px 8px;
}
.cell-artifact .af-rows { margin-block-start: 8px; }
.cell-artifact .af-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-block-start: 1px solid var(--rule);
  padding-block: 6px;
  font-size: 12px;
}
.cell-artifact .af-row b { font-weight: 500; color: var(--ink-2); }
.cell-artifact .af-row i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cell-artifact .af-row i.on { color: var(--claret); }
.cell-artifact .af-draft {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  border-inline-start: 1px solid var(--rule-strong);
  padding-inline-start: 12px;
}

/* ---------- Sources: the typology at full size ---------- */
/* align-content: start — the glyph spans three rows, and without this a card
   with only a heading and one short line stretches its rows to match the
   glyph, opening a gap under the heading. */
.source-cat { display: grid; grid-template-columns: 40px 1fr; gap: 0 18px; align-content: start; }
.source-cat .fig {
  width: 34px;
  height: 34px;
  grid-row: 1 / span 3;
  color: var(--ink-2);
}
.source-cat:hover .fig { color: var(--claret); }

/* ---------- Analyse: four provisions across six years ---------- */
.timeline {
  margin-block-start: 20px;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 18px;
}
.timeline-axis {
  position: relative;
  block-size: 1px;
  background: var(--rule-strong);
  margin-block: 26px 0;
}
.tl-mark {
  position: absolute;
  inset-block-start: -5px;
  inline-size: 9px;
  block-size: 9px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  /* Negative margin rather than translateX so the axis centres correctly
     when the document flips to RTL. */
  margin-inline-start: -5px;
  inset-inline-start: var(--at);
}
.tl-mark.is-current { border-color: var(--claret); background: var(--claret); }
.timeline-keys { list-style: none; margin-block-start: 22px; }
.timeline-keys li {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 14px;
  align-items: baseline;
  border-block-start: 1px solid var(--rule);
  padding-block: 9px;
  font-size: 13px;
  color: var(--ink-2);
}
.timeline-keys .tl-year {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.timeline-keys .tl-state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.timeline-keys .tl-state.on { color: var(--claret); }
/* Superseded provisions are struck, because that is what happened to them. */
.timeline-keys li.is-past .tl-label { text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.timeline-keys li.is-past { color: var(--ink-3); }

/* ---------- Approach: the order of precedence, drawn ---------- */
.hierarchy {
  margin-block-start: 56px;
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 48px;
  align-items: start;
}
.hier-stack { list-style: none; }
.hier-stack li {
  position: relative;
  border: 1px solid var(--rule);
  border-block-end: 0;
  background: var(--surface);
  padding: 13px 16px;
  font-size: 14px;
  color: var(--ink-2);
  /* Each tier is inset from the one above: authority narrows as it descends. */
  margin-inline-start: calc(var(--tier) * 14px);
}
.hier-stack li:last-child { border-block-end: 1px solid var(--rule); }
.hier-stack li:first-child {
  border-color: var(--rule-strong);
  color: var(--ink);
  font-weight: 500;
}
.hier-note {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 14px;
}
.hier-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-inline-size: 46ch;
}

/* ---------- Use cases + security: the mark beside the work ---------- */
.usecase { grid-template-columns: 34px 266px 1fr; }
.usecase .fig { width: 30px; height: 30px; margin-block-start: 2px; }
.usecase:hover .fig { color: var(--claret); }

.cell-mark {
  display: block;
  inline-size: 30px;
  block-size: 30px;
  margin-block-end: 18px;
  color: var(--ink-3);
}
.cell:hover .cell-mark { color: var(--claret); }

/* ===========================================================================
   DRAFTING ASSISTANT — revamp, 18 Oct 2026
   One connected case carries the page: the hero example, the four-stage case,
   the SOP comparison and the handbook answer all share these parts. Every
   control is direct: nothing advances, loops or scrolls on its own (§06).
   =========================================================================== */

/* ---------- Shared parts ---------- */
.field-name {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 8px;
}
mark {
  background: var(--claret-wash);
  color: inherit;
  box-shadow: inset 0 -1px 0 rgba(110, 42, 52, 0.32);
  padding-inline: 2px;
}
.text-link, .mini-more {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
  transition: color 0.16s var(--ease), text-decoration-color 0.16s var(--ease);
}
.text-link:hover, .mini-more:hover { color: var(--claret); text-decoration-color: currentColor; }

/* Approach choice: a pressed state, not a tab. Ink, not claret, so the accent
   stays on the primary action in the hero viewport. */
.approach-set { display: flex; flex-wrap: wrap; gap: 8px; }
.approach-set--wide { margin-block-end: 28px; }
.approach-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.approach-btn:hover { border-color: var(--ink); color: var(--ink); }
.approach-btn[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--paper-deep);
  color: var(--ink);
  font-weight: 600;
}
.approach-btn b { font-weight: 700; color: var(--ink-3); margin-inline-end: 6px; }
.approach-btn[aria-pressed="true"] b { color: var(--ink); }
[data-approach-pane][hidden] { display: none; }

/* Citation chip inside a draft: opens the passage under the paragraph. */
.cite {
  display: inline;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--claret);
  background: var(--claret-wash);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 7px;
  margin-inline-start: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s var(--ease);
}
.cite:hover, .cite[aria-expanded="true"] { border-color: var(--claret); }
.cite-excerpt {
  margin-block: 10px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px 14px;
}
.cite-excerpt[hidden] { display: none; }

/* ---------- Hero: copy and a compact example side by side ---------- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.hero-demo { margin: 0; }
.mini { padding: 22px clamp(18px, 2.4vw, 26px) 24px; display: grid; gap: 16px; }
.mini-docs { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 6px 10px;
}
.doc-card .fig { width: 16px; height: 16px; }
.mini-q {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.mini-out { border-block-start: 1px solid var(--rule); padding-block-start: 16px; }
.mini-assess { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mini-draft {
  margin-block-start: 12px;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  border-inline-start: 2px solid var(--rule-strong);
  padding-inline-start: 12px;
}
.mini-due { margin-block-start: 14px; font-size: 14px; font-weight: 500; color: var(--ink); }
.mini-more { display: inline-block; margin-block-start: 16px; font-size: 15px; }

/* Entrance: the documents arrive, then the question, then the answer. Once. */
.js .mini .seq { opacity: 0; transform: translateY(6px); }
.js .mini.is-played .seq {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.js .mini.is-static .seq { opacity: 1; transform: none; }

@media (min-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
  }
  .hero-grid h1 { font-size: clamp(44px, 4.4vw, 62px); }
}

/* ---------- The connected case ---------- */
.case { margin-block-start: 24px; }
.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-end: 1px solid var(--rule);
  background: var(--paper-deep);
}
.demo-tab.step {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  padding: 18px 20px 16px;
  margin: 0;
  border-inline-end: 1px solid var(--rule);
}
.demo-tab.step:last-child { border-inline-end: 0; }
.demo-tab.step[aria-selected="true"] { background: var(--surface); }
.step-no { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink-3); }
.step[aria-selected="true"] .step-no { color: var(--ink); }
.demo-panel.stage-panel { margin: 0; padding: clamp(24px, 3vw, 40px); }
.stage-panel:focus-visible { outline: 2px solid var(--claret); outline-offset: -2px; }
.stage-next { margin-block-start: 32px; }

.stage-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.facts > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  border-block-start: 1px solid var(--rule);
  padding-block: 14px;
}
.facts > div:last-child { border-block-end: 1px solid var(--rule); }
.facts dt {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.stage-q { font-family: var(--serif); font-size: 22px; line-height: 1.35; color: var(--ink); margin-block-end: 28px; }
.doc-list { list-style: none; }
.doc-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  border-block-start: 1px solid var(--rule);
  padding-block: 11px;
  font-size: 15px;
  color: var(--ink-2);
}
.doc-list .fig { width: 20px; height: 20px; }

.assess-what { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink); max-width: 62ch; margin-block-end: 20px; }
.assess-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.assess-block { border-block-start: 1px solid var(--rule); padding-block: 18px 20px; }
.assess-block h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 8px;
}
.assess-block p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rating { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink) !important; margin-block-end: 6px; }
.rating--gap { color: var(--claret) !important; }
.assess-note {
  margin-block-start: 20px;
  max-width: 76ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--paper-deep);
  border-inline-start: 2px solid var(--rule-strong);
  padding: 12px 16px;
}
.assess-note b { color: var(--ink); }

.stage-panel .source-toggle { font-size: 14.5px; padding: 12px 14px; }
.stage-panel .source-excerpt { padding: 0 14px 14px; font-size: 15px; }
.stage-panel .source-excerpt p + p { margin-block-start: 8px; }
.source-key { flex: none; min-inline-size: 2.2em; font-weight: 700; color: var(--ink); }
.source-meta { margin-block-start: 10px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }

.draft-meta { font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin-block-end: 14px; }
.draft-meta b { color: var(--ink); font-weight: 600; }
.stage-panel .draft { font-size: 17px; line-height: 1.65; padding-inline-start: 20px; max-width: 70ch; }
.stage-panel .draft p + p { margin-block-start: 12px; }

/* ---------- Specialisation ---------- */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-block-start: 64px; }
.layer { border-block-start: 1px solid var(--rule); padding-block: 28px 8px; transition: border-color 0.16s var(--ease); }
.layer:hover { border-block-start-color: var(--claret); }
.layer-no { display: block; font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--ink-3); margin-block-end: 16px; }
.layer h3 { font-size: 22px; line-height: 1.25; margin-block-end: 14px; }
.layer-status { margin-block-end: 16px; }
.layer p { font-size: 16px; color: var(--ink-2); }
.layer p + p { margin-block-start: 12px; }
.layer .layer-later { margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-3); }
.layer-later .status { margin-inline-end: 8px; }

.sop {
  margin-block-start: 80px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(24px, 3vw, 40px);
}
.sop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.sop-head h3 { font-size: 22px; line-height: 1.3; }
.sop-head .demo-tabs { margin: 0; }
.sop .demo-panel { margin-block-start: 20px; }
.sop-rows { list-style: none; }
.sop-rows li {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  border-block-start: 1px solid var(--rule);
  padding-block: 14px;
}
.sop-rows p { font-size: 15.5px; color: var(--ink-2); }
.sop-rows b { color: var(--ink); font-weight: 600; }
.tag {
  justify-self: start;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 4px 8px;
}
.tag--co { color: var(--ink); border-color: var(--ink); }
.tag--gap { color: var(--ink-3); border-style: dashed; }
.sop .mock-note { margin-block-start: 18px; }

.weigh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(40px, 6vw, 80px); margin-block-start: 80px; }
.weigh h3 { font-size: 22px; margin-block-end: 18px; }
.plain-list { list-style: none; }
.plain-list li { border-block-start: 1px solid var(--rule); padding-block: 13px; font-size: 16px; color: var(--ink-2); }
.process { list-style: none; counter-reset: step; }
.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  border-block-start: 1px solid var(--rule);
  padding-block: 13px;
  font-size: 16px;
  color: var(--ink-2);
}
.process li::before { content: counter(step); font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink-3); }
[dir="rtl"] .process li::before { content: counter(step, arabic-indic); }

/* ---------- Handbook answer ---------- */
.handbook { margin: 64px 0 0; max-width: 860px; }
.handbook .panel-bar-meta { display: block; }
.handbook .panel-query p:not(.field-name) { font-size: clamp(17px, 2vw, 20px); }
.facts--answer { padding: 8px clamp(20px, 3vw, 32px) 24px; }
.facts--answer > div:first-child { border-block-start: 0; }
.facts--answer > div:last-child { border-block-end: 0; }
.facts--answer .cite { white-space: normal; text-align: start; padding-block: 3px; }
.facts-gap dt { color: var(--claret); }

/* ---------- Controls ---------- */
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-block: 56px 40px; }
.control { display: flex; gap: 16px; border-block-start: 1px solid var(--rule); padding-block: 22px; }
.control .fig { width: 28px; height: 28px; margin-block-start: 2px; }
.control p { font-size: 16px; color: var(--ink-2); }
.control b { display: block; color: var(--ink); font-weight: 600; margin-block-end: 4px; }

details.more { border-block-start: 1px solid var(--rule); }
details.more:last-child { border-block-end: 1px solid var(--rule); }
details.more summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease);
}
details.more[open] summary::after { transform: rotate(-135deg); }
details.more summary:hover { color: var(--claret); }
details.more > :not(summary) { margin-block-end: 28px; }
details.more .integrations { margin-block-start: 0; }
details.more .integration-note { margin-block-start: 20px; }

/* ---------- Scenarios: ruled rows, one matter per row ---------- */
/* Field, the question in the business's own words, then the law and the
   output. Same rule-and-hover language as the use cases; not cards. */
.matters { list-style: none; margin-block-start: 56px; }
.matter {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 340px);
  gap: 12px 40px;
  align-items: baseline;
  border-block-start: 1px solid var(--rule);
  padding-block: 26px;
  transition: border-color 0.16s var(--ease);
}
.matter:hover { border-block-start-color: var(--claret); }
.matter:last-child { border-block-end: 1px solid var(--rule); }
.matter-field h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.matter-field p { margin-block-start: 6px; font-size: 15px; color: var(--ink-3); }
.matter-q { font-family: var(--serif); font-size: 20px; line-height: 1.45; color: var(--ink); max-inline-size: 46ch; }
.matter-src { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.matter-src .fig { flex: none; inline-size: 18px; block-size: 18px; color: var(--ink-3); transform: translateY(3px); }
.matter:hover .matter-src .fig { color: var(--claret); }
.matter-out { margin-block-start: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.matter-out .field-name { margin-block-end: 4px; }
#scenarios .mock-note { margin-block-start: 24px; }
@media (max-width: 1079px) {
  .matter { grid-template-columns: 200px minmax(0, 1fr); }
  .matter-law { grid-column: 2; }
}
@media (max-width: 820px) {
  .matter { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 22px; }
  .matter-law { grid-column: auto; }
  .matter-q { font-size: 18px; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1079px) {
  .hero-demo { max-width: 640px; }
}
@media (max-width: 820px) {
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-tab.step { border-block-end: 1px solid var(--rule); padding: 14px 16px; }
  .demo-tab.step:nth-child(2) { border-inline-end: 0; }
  .demo-tab.step:nth-child(n+3) { border-block-end: 0; }
  .stage-grid, .assess-grid, .layers, .weigh, .controls { grid-template-columns: minmax(0, 1fr); }
  .layer + .layer { margin-block-start: 24px; }
  .sop-rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .stage-q { font-size: 20px; }
  .stage-panel .draft { font-size: 16px; padding-inline-start: 14px; }
  .sop-head .demo-tabs { gap: 20px; }
  .demo-panel.stage-panel { padding: 22px 18px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mini .seq { opacity: 1; transform: none; transition: none; }
  details.more summary::after { transition: none; }
}

/* ---------- Scroll reveal (§06) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .demo-fade { animation: none; }
  .source-caret { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .madar-block { grid-template-columns: 1fr; gap: 24px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); border-block-start: 0; }
  .stage { border-block-start: 1px solid var(--rule-strong); padding-inline-end: 24px; }
  .stage:nth-child(even) { border-inline-end: 0; }
  /* The rail only reads as a rail in one row. Wrapped, it would draw a line
     between two stages that do not follow each other. */
  .stage::after { display: none; }
  .hierarchy { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  .cells--3, .source-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-body, .final-grid, .demo-grid, .integrations,
  /* auto-flow and the row template must both be undone, or column flow keeps
     generating implicit columns after the template is narrowed to one. */
  .fragment-list--wide { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
  .demo-in { border-inline-end: 0; border-block-end: 1px solid var(--rule); }
  .usecase { grid-template-columns: 30px 1fr; gap: 10px 16px; }
  .usecase h3 { align-self: center; }
  .usecase p { grid-column: 2; }
  .final h2 { max-width: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .cells--2, .registers, .source-grid { grid-template-columns: 1fr; gap: 0; }
  /* A short label and one sentence holds two columns at 375px, and collapsing
     these was costing real scroll. .source-grid is not in this set: it was
     tried and its descriptions broke to three words a line. */
  .cells--3 { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
  .register-figure { width: 144px; height: 144px; margin-block-end: 20px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .stage { border-inline-end: 0; padding-inline-end: 0; }
  .field-pair { grid-template-columns: 1fr; }
  .trust ul { gap: 10px 24px; }
  .panel-bar-meta { display: none; }
  .source-cat { grid-template-columns: 34px 1fr; gap: 0 16px; }
  .timeline-keys li { grid-template-columns: 54px 1fr; }
  .timeline-keys .tl-state { grid-column: 2; }
  .hier-stack li { margin-inline-start: calc(var(--tier) * 8px); }
}