/* ════════════════════════════════════════════════════════════════════════
   Nibomont · marketing.css
   Self-contained stylesheet for the public marketing page (nibomont.com).
   Deliberately independent of the app shell (tw.css / nibomont.css) so the
   marketing surface can evolve without touching the operator UI — it only
   shares the brand: deep forest green, paper white, IBM Plex, and the
   scales-of-justice seal. Fonts come from /static/fonts/fonts.css.

   Aesthetic: "The Decision Desk." Authoritative, government-grade trust.
   Paper sections for reading, deep-forest bands for gravitas, a live
   "verdict" product card as the hero anchor, hash-chain and ledger-grid
   motifs, one orchestrated page-load, and full EN/AR + RTL support.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (mirrors static/nibomont.css tokens; the single source of the
        forest-green identity) ─────────────────────────────────────────── */
  --brand:        oklch(0.306 0.066 259);  /* #1A2F50 — NIBOMONT NAVY */
  --brand-deep:   oklch(0.245 0.055 259);  /* pressed / deeper field */
  --brand-deeper: oklch(0.185 0.042 259);  /* hero-band floor, extra depth */
  --brand-soft:   oklch(0.451 0.096 259);  /* #34558A — navy 500 */
  --brand-on:     oklch(0.985 0.005 259);
  --brand-on-mu:  oklch(0.90 0.018 259);
  --brand-on-fa:  oklch(0.78 0.028 259);
  --brand-tint:   oklch(0.97 0.020 259);
  --brand-line:   oklch(0.44 0.05 259 / 0.55);  /* hairline on brand surfaces */

  --paper:        oklch(1.000 0 0);
  --paper-warm:   oklch(0.985 0.004 259);
  --paper-sunk:   oklch(0.967 0.006 259);
  --ink:          oklch(0.18 0.012 259);
  --ink-muted:    oklch(0.42 0.014 259);
  --ink-faint:    oklch(0.56 0.012 259);
  --rule:         oklch(0.88 0.010 259);
  --rule-soft:    oklch(0.92 0.008 259);

  /* ── State ink (verdict words) + a single restrained warm accent for the
        seal glow and the premium edition ─────────────────────────────── */
  --state-pass:      oklch(0.42 0.12 150);
  --state-pass-tint: oklch(0.95 0.05 150);
  --state-gov:       oklch(0.55 0.10 255);
  --state-gov-tint:  oklch(0.95 0.03 260);
  --state-near:      oklch(0.62 0.12 78);
  --gold:            oklch(1 0 0);            /* highlight on brand surfaces (was gold) */
  --gold-deep:       oklch(0.45 0.095 259);   /* navy 500 — highlight on PAPER */

  --maxw: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-card:  none;
  --shadow-float: 0 24px 48px -32px oklch(0.2 0.06 259 / 0.35);
  --shadow-menu:  0 0 0 1px oklch(0.2 0.03 259 / 0.08),
                  0 8px 16px -8px oklch(0.2 0.03 259 / 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Type scale — the only font-size values allowed on the marketing surface */
  --fs-01: 0.6875rem;                                 /* 11px  ledger meta */
  --fs-02: 0.75rem;                                   /* 12px  labels, eyebrows */
  --fs-03: 0.875rem;                                  /* 14px  secondary body, chips, buttons */
  --fs-04: 1rem;                                      /* 16px  body */
  --fs-05: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 17→20px  leads, h3 */
  --fs-06: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); /* 24→34px  standard section h2 */
  --fs-07: clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);   /* 30→44px  chapter h2 */
  --fs-08: clamp(2.55rem, 1.9rem + 3vw, 4.1rem);     /* 41→66px  hero display */
}

/* ════════════════════════════════════ RESET / BASE ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'ss02', 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Arabic voice — swap the family and relax the leading; kill decorative
   tracking (it breaks cursive joins). Applied whenever the doc flips to AR. */
html[dir="rtl"] body,
html[lang="ar"] body {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.75;
}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .stat-num,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .btn { letter-spacing: 0; }
/* Latin fragments (product-card codes, hashes) stay LTR inside an RTL doc. */
html[dir="rtl"] .mono, html[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }

/* ══ RTL label voice — Arabic labels are Plex Sans Arabic Medium, never mono,
      never letter-spaced (tracking breaks cursive joins), one step larger
      (Arabic at 11–12px is below comfortable x-height). ══ */
html[dir="rtl"] .label,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .trust-label,
html[dir="rtl"] .hero-note,
html[dir="rtl"] .hero-marks,
html[dir="rtl"] .feature-tag,
html[dir="rtl"] .bigstat .kicker,
html[dir="rtl"] .pipe-title,
html[dir="rtl"] .pipe-foot,
html[dir="rtl"] .mock-nav-label,
html[dir="rtl"] .ed-tag,
html[dir="rtl"] .ed-spec dt,
html[dir="rtl"] .sch-cap-k,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .verify-label,
html[dir="rtl"] .hero-record-line .hrl-k {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  letter-spacing: 0;
  font-weight: 500;
  font-size: var(--fs-03);
  text-transform: none;
}
/* Data stays mono, stays LTR, stays Latin — a hash is a hash in any language. */
html[dir="rtl"] .mono, html[dir="rtl"] code,
html[dir="rtl"] .stat-num, html[dir="rtl"] .sch-code,
html[dir="rtl"] .hero-record-line .hrl-v, html[dir="rtl"] .clause {
  direction: ltr; unicode-bidi: isolate;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Bilingual text: JS writes the active language into textContent from the
   data-en / data-ar attributes. No-JS falls back to the EN already in the DOM. */
[data-ar] { transition: none; }

/* Hidden ABOVE the viewport via transform — never off to the side:
   `left:-999px` extends the document in RTL (scrollWidth blows out to
   ~viewport+999) and shoves the whole page sideways. Slides in on focus. */
.skip-link {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 100;
  background: var(--brand-deep); color: var(--brand-on);
  padding: 0.75rem 1.25rem; border-radius: 0 0 4px 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  transform: translateY(-130%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ════════════════════════════════════ LAYOUT ═════════════════════════════ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section-tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.band-paper { background: var(--paper); }
.band-warm  { background: var(--paper-warm); }

/* ── Scanned-annex texture: subtle paper grain on band-paper sections ─────
   feTurbulence filter embedded as data-URI in the CSS file (CSP style-src
   'self' is satisfied; data-URI in a stylesheet is not an inline style).
   The ::before pseudo-element is pointer-events:none so it never blocks clicks.
   The SVG filter is purely visual grain — no layout impact. ── */
.band-paper { position: relative; }
.band-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* Ensure band-paper direct children sit above the grain pseudo-element */
.band-paper > * { position: relative; z-index: 1; }

/* Deep-forest bands — flat brand-deep + inset hairline.
   No radial blooms: ft.com-style single honest tone, depth from ruled edges. */
.band-forest {
  background: var(--brand-deep);
  box-shadow: inset 0 1px 0 var(--brand-line);
  color: var(--brand-on);
  position: relative;
  overflow: hidden;
}

/* ════════════════════════════════════ TYPE ═══════════════════════════════ */

/* ── Three-voice register ──
   Document (decree):  IBM Plex Serif 500 — h1, h2, .hero-title, .ed-name
   Working (desk):     IBM Plex Sans 400/500/600 — body, leads, h3, nav, labels
   Data (ledger):      IBM Plex Mono 400/500 — hashes, codes, numbers only     */

h1, h2 { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
h3, .h3 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }
/* Section eyebrows carry the brand voice — the one Montserrat slot in
   the page body, so the headings themselves stay IBM Plex Serif. */
.eyebrow, .sec-eyebrow, .kicker {
  font-family: 'Montserrat', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
}

/* RTL: IBM Plex Serif has no Arabic glyphs — always fall back to Sans Arabic */
html[dir="rtl"] h1,
html[dir="rtl"] h2 {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

h1, h2, h3 { margin: 0; }

/* text-wrap: headlines balance, body pretty (prevents orphans) */
h1, .h2, .hero-title { text-wrap: balance; }
h3, .h3 { text-wrap: pretty; }
.lead, .hero-lead, .feature p, .sch-body p, .q-body, .ed-price { text-wrap: pretty; }

/* ── Shared label style — Oxide $label-01 × Carbon $label-01 hybrid ── */
.label {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--fs-02); font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Eyebrow → label voice (sans, 0.08em, not mono 0.22em) ── */
.eyebrow {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--fs-02);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.band-forest .eyebrow { color: var(--brand-on-mu); }
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.6;
}

/* ── § clause device: #how and #deployment H2s ── */
.clause {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.5em; font-weight: 500; letter-spacing: 0.04em;
  color: var(--gold-deep); vertical-align: 0.5em; margin-inline-end: 0.5em;
}

/* ── Type scale ── */
.h-display {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: var(--fs-08);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.h1 { font-size: var(--fs-07); line-height: 1.18; }
.h2 { font-size: var(--fs-06); line-height: 1.18; }
.h3 { font-size: var(--fs-05); line-height: 1.5; }
.lead {
  font-size: var(--fs-05);
  line-height: 1.6; color: var(--ink-muted); max-width: 46ch; margin: 0;
}
.band-forest .lead { color: var(--brand-on-mu); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; }

/* ── Three H2 registers: chapter (07), section (06), utility passage (05×1.15) ── */
/* Chapters: #product and #security have the two deepest section heads */
#product .section-head h2,
#product .sec-head-sticky h2,
#security .section-head h2,
#security .sec-head-sticky h2 { font-size: var(--fs-07); }

/* Utility passages (#how, #faq) — sans, not document serif */
#how h2.h2, #faq h2.h2 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: calc(var(--fs-05) * 1.15);
  font-weight: 600;
}
html[dir="rtl"] #how h2.h2,
html[dir="rtl"] #faq h2.h2 {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
}

/* Arabic display counterparts — smaller than Latin so the pair reads as
   title + translation, and never letter-spaced. */
html[dir="rtl"] .h-display { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.3; font-weight: 500; }
html[dir="rtl"] .h1 { line-height: 1.35; }
html[dir="rtl"] .h2 { line-height: 1.4; }
html[dir="rtl"] .lead { max-width: 52ch; }

/* ════════════════════════════════════ BUTTONS ═══════════════════════════ */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-on);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 4px;
  font-family: inherit; font-size: var(--fs-03); font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer;
  /* No transform or box-shadow in transition — prevents float reintroduction */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  /* GOV.UK ledge: hard zero-blur shadow = printed edge */
  box-shadow: 0 2px 0 var(--brand-deeper);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--ease); }
/* Hover: darken ink only — no translateY levitation */
.btn:hover { background: color-mix(in oklab, var(--btn-bg) 86%, black); }
/* Active: press eats the ledge — a stamp pressing down */
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--brand-deeper); }
.btn:hover svg { transform: translateX(3px); }
html[dir="rtl"] .btn:hover svg { transform: translateX(-3px); }
html[dir="rtl"] .btn svg.flip { transform: scaleX(-1); }

.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--rule); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--paper-sunk); }

.btn-on-forest { --btn-bg: var(--brand-on); --btn-fg: var(--brand-deep);
  box-shadow: 0 2px 0 oklch(0 0 0 / 0.45); }
.btn-ghost-on-forest {
  --btn-bg: transparent; --btn-fg: var(--brand-on);
  border-color: var(--brand-line); box-shadow: none;
}
.btn-ghost-on-forest:hover { border-color: var(--brand-on); color: var(--brand-on); }

.btn-lg { padding: 1rem 1.9rem; font-size: var(--fs-04); }

.textlink {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--brand); font-weight: 500;
  /* GOV.UK: underline is always present, hover thickens it */
  border-bottom: 1px solid currentColor;
}
.textlink svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.textlink:hover { border-bottom-width: 2px; margin-block-end: -1px; }
.textlink:hover svg { transform: translateX(3px); }
/* Dark band: textlink stays light ink, not gold */
.band-forest .textlink { color: var(--brand-on); border-bottom-color: currentColor; }

.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); }
.brand .mark { width: 34px; height: 30px; color: var(--brand); }
/* BRAND wordmark — Montserrat SemiBold caps, tracked per the logo
   package. Body copy and headings keep the IBM Plex voice. */
.brand .word {
  font-family: 'Montserrat', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 1.05rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand .word-ar { letter-spacing: 0; text-transform: none; font-size: 1.2rem; }
html[dir="rtl"] .brand .word-en { display: none; }
html:not([dir="rtl"]) .brand .word-ar { display: none; }

.lang-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
}
.lang-toggle button {
  border: 0; background: transparent; color: var(--ink-muted);
  padding: 0.4rem 0.7rem; cursor: pointer; font: inherit; letter-spacing: 0.05em;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-toggle button.is-active { background: var(--brand); color: var(--brand-on); }

.nav-burger {
  display: none; border: 1px solid var(--rule); background: transparent;
  width: 2.6rem; height: 2.6rem; border-radius: 4px; cursor: pointer;
  color: var(--ink); align-items: center; justify-content: center;
}
.nav-burger svg { width: 1.3rem; height: 1.3rem; }

/* ════════════════════════════════════ HERO ═══════════════════════════════ */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
/* atmosphere: flat paper tint + hard rule at foot — a form, not a sky */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--paper-warm);
  border-block-end: 1px solid var(--rule);
}
.hero-copy { max-width: 40rem; }
.hero-copy .eyebrow { margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.4rem; }
.hero .lead { margin-bottom: 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ════════════════════════════════════ SECTION HEADS ═════════════════════ */
.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: 1rem; }

/* ════════════════════════════════════ DARK FEATURE BAND ═════════════════ */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.dcol .dcol-ico { display: block; margin-bottom: 1.05rem; color: var(--brand-on-mu); }
.dcol .dcol-ico svg { width: 1.4rem; height: 1.4rem; display: block; }
.dcol .dcol-ico::after {
  content: ""; display: block; width: 1.75rem; height: 1px;
  background: var(--brand-line); margin-top: 0.85rem;
}
.dcol h3 { margin-bottom: 0.6rem; }
.dcol p { color: var(--brand-on-mu); margin: 0; font-size: 0.95rem; line-height: 1.65; }

/* ════════════════════════════════════ EDITIONS (deployment dossiers) ════
   Two deployment postures as stamped dossier cards. Specs read as a ruled
   register (dt/dd rows on hairlines), not a checkmark list. The production
   posture carries a static debossed seal emboss — no ribbon, no rotating
   conic border. Procurement chooses; the vendor does not recommend. */
.editions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: stretch; }
.edition {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 2.1rem 2rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
/* Featured posture: deep-forest dossier with a static gold-embossed frame
   (an inset gold hairline + seal watermark) — the grammar of a sealed
   document, not a SaaS "recommended" tier. No float shadow — border only. */
.edition.featured {
  background: linear-gradient(158deg, var(--brand-deep), var(--brand-deeper));
  border-color: color-mix(in oklab, var(--gold) 45%, var(--brand-deep));
  color: var(--brand-on);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22);
}
/* Debossed seal, top-inline-end — a wax-seal impression, not decoration. */
.ed-emboss {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: -2.6rem; inset-inline-end: -2.6rem;
  width: 11rem; height: 11rem; color: var(--gold); opacity: 0.10;
}
.edition.featured > * { position: relative; z-index: 1; }

.ed-head { margin-bottom: 1.4rem; }
.edition .ed-tag {
  display: block; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--fs-02);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand);
}
html[dir="rtl"] .edition .ed-tag { letter-spacing: 0; font-size: var(--fs-03); text-transform: none; }
.edition.featured .ed-tag { color: var(--brand-on-mu); }
.edition .ed-name {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: var(--fs-06); font-weight: 500; margin: 0.4rem 0 0.5rem; letter-spacing: -0.01em;
}
html[dir="rtl"] .edition .ed-name {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; letter-spacing: 0;
}
.edition .ed-price { font-size: 0.95rem; color: var(--ink-muted); margin: 0; max-width: 34ch; line-height: 1.5; }
.edition.featured .ed-price { color: var(--brand-on-mu); }

/* Ruled spec register — dt/dd on hairlines, ledger-aligned. */
.ed-spec { margin: 0 0 1.75rem; display: grid; }
.ed-spec-row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem 1rem;
  align-items: baseline; padding-block: 0.72rem;
  border-top: 1px solid var(--rule);
}
.ed-spec-row:last-child { border-bottom: 1px solid var(--rule); }
.edition.featured .ed-spec-row { border-color: var(--brand-line); }
.ed-spec dt {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--fs-02); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.edition.featured .ed-spec dt { color: var(--brand-on-fa); }
html[dir="rtl"] .ed-spec dt { letter-spacing: 0; font-size: var(--fs-03); text-transform: none; }
.ed-spec dd { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.edition.featured .ed-spec dd { color: var(--brand-on); }
.edition .btn { margin-top: auto; justify-content: center; }
.editions-note { text-align: center; margin-top: 1.5rem; color: var(--ink-faint); font-size: 0.9rem; }
@media (max-width: 460px) { .ed-spec-row { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ════════════════════════════════════ FINAL CTA ════════════════════════
   A letterhead sign-off, not a centered two-pill closer: the seal sits to
   the inline-start of a left-set invitation with one primary action. */
.cta-sheet {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  max-width: 60rem;
}
.cta-copy .eyebrow { margin-bottom: 1.1rem; }
.cta-copy .h2 { margin-bottom: 1rem; max-width: 22ch; }
.cta-band .lead { margin-bottom: 2rem; color: var(--brand-on-mu); max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin-block-start: 1.5rem; }
.cta-secondary { color: var(--brand-on); text-decoration: underline 1px; }

/* Demo-request form — a ruled intake block on the forest band. Labels above
   inputs (text-align: start → RTL-safe); inputs read as document fields, not
   plush pills (squared, hairline border, honest focus ring). */
.cta-form { max-width: 40rem; }
.cta-form .lead { margin-bottom: 1.75rem; }
.cta-field { display: flex; flex-direction: column; gap: 0.4rem; margin-block-end: 1rem; }
.cta-field label {
  font-size: 0.82rem; letter-spacing: 0.02em; color: var(--brand-on-mu);
  text-align: start;
}
.cta-field input,
.cta-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  font: inherit; font-size: 0.95rem; color: var(--brand-on);
  background: oklch(0.24 0.05 259);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cta-field input::placeholder,
.cta-field textarea::placeholder { color: var(--brand-on-fa); }
.cta-field input:focus,
.cta-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px oklch(1 0 0 / 0.25);
}
.cta-field textarea { resize: vertical; min-height: 5.5rem; }
/* Honeypot — visually + assistive-tech hidden, not display:none (some bots
   skip display:none fields). */
.cta-hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cta-fallback { margin-block-start: 1.25rem; font-size: 0.88rem; color: var(--brand-on-mu); }
.cta-fallback a { color: var(--brand-on); text-decoration: underline 1px; }
/* Two-up name/org and email rows on wide screens, single column ≤ 560px. */
@media (min-width: 560px) {
  .cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
  .cta-form input[name="_csrf"], .cta-hp { grid-column: 1 / -1; }
  .cta-form .lead, .cta-field-wide, .cta-actions, .cta-fallback { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .cta-sheet { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* Seal surrounded by the girih star — debossed well, not floating aura. */
.cta-sealwrap {
  position: relative; display: inline-grid; place-items: center;
  width: 7rem; height: 7rem; flex: none;
  border-radius: 50%;
  background: oklch(0.29 0.07 259);           /* one step deeper than --brand-deep */
  box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.35),
              inset 0 -1px 0 oklch(1 0 0 / 0.07),
              0 0 0 1px oklch(1 0 0 / 0.22);  /* gold hairline ring */
}
.cta-star {
  position: absolute; inset: 0; width: 7rem; height: 7rem;
  color: var(--gold); opacity: 0.4;
}
.cta-seal {
  position: relative; width: 3.1rem; height: 3.45rem; color: var(--gold);
  filter: none;  /* aura removed — seal is pressed into the band, not backlit */
}
@media (prefers-reduced-motion: no-preference) {
  .cta-star { animation: star-settle 1.1s var(--ease-out) both; }
}
@keyframes star-settle {
  from { opacity: 0; transform: rotate(-22deg) scale(0.82); }
  to   { opacity: 0.4; transform: none; }
}

/* ── Girih star section divider ──
   Full-bleed warm strip carrying a ruled line broken by the seal star; it
   bridges the paper stats section into the warm deployment band. */
.star-band { background: var(--paper-warm); padding-block: clamp(2.5rem, 6vw, 4rem); }
.star-rule {
  display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.8rem);
  max-width: 34rem; margin-inline: auto; padding-inline: var(--gutter);
}
.star-rule-line { flex: 1; height: 1px; background: linear-gradient(90deg,
  transparent, var(--rule) 30%, var(--rule) 70%, transparent); }
.star-rule-mark { width: 1.8rem; height: 1.8rem; flex: none; color: var(--gold-deep); opacity: 0.75; }

/* ════════════════════════════════════ FOOTER ═══════════════════════════ */
.footer { background: var(--brand-deeper); color: var(--brand-on); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
  align-items: flex-start; padding-block: clamp(3rem, 6vw, 4rem) 2rem;
}
.footer .brand { color: var(--brand-on); align-items: flex-start; flex-direction: column; gap: 1rem; max-width: 22rem; }
.footer .brand .row { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer .brand .mark { color: var(--gold); }
.footer .tagline { color: var(--brand-on-mu); font-size: 0.92rem; line-height: 1.6; }
.footer-nav { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-on-fa); margin: 0 0 0.9rem; font-weight: 500; }
.footer-col a { display: block; color: var(--brand-on-mu); font-size: 0.9rem; padding-block: 0.3rem;
  transition: color 0.2s ease; }
.footer-col a:hover { color: var(--brand-on); }
.footer-bottom {
  border-top: 1px solid var(--brand-line); padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; justify-content: space-between;
  font-size: 0.82rem; color: var(--brand-on-fa);
}
.footer-bottom .mono { letter-spacing: 0.04em; }

/* ════════════════════════════════════ MOTION ═══════════════════════════ */
/* One-motion identity: the stamp-press (.btn-stamp:active → stamp-ring) is the
   entire signature; the CTA seal's one-time star-settle and the map arcs'
   draw-once share that seal/stamp vocabulary. There is no hero load-in stagger
   and no scroll-entrance system — every content block is opacity 1, transform
   none, in static CSS, so any capture / print / no-JS render is complete. */

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .feature:hover { transform: none; }
}

/* ════════════════════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .bigstat { text-align: center; }
  .bigstat p { margin-inline: auto; }
}
@media (max-width: 900px) {
  .cards-3 { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  /* Relax the ruled spine on narrow screens so copy isn't cramped. */
  .hero-copy { padding-inline-start: 0.9rem; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  /* mobile menu panel */
  .nav-links.open {
    display: flex; position: absolute; inset-inline: 0; top: 4.5rem;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0.75rem var(--gutter) 1.1rem; margin: 0;
    box-shadow: var(--shadow-card);
  }
  .nav-links.open a { padding: 0.75rem 0.5rem; font-size: 1rem; }
  .nav .hide-sm { display: none; }
}
@media (max-width: 680px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-inline-end: 0; border-bottom: 1px solid var(--rule); }
  .stat:last-child { border-bottom: 0; }
  .editions { grid-template-columns: 1fr; }
  .hero-cta .btn, .cta-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* CSP hardening — externalised inline styles (style-src 'self') */
.mk-svg-defs { position: absolute; }
.mk-mb-1 { margin-bottom: 1rem; }
.mk-ico-check { width: 0.9rem; height: 0.9rem; }
.mk-mx-auto { margin-inline: auto; }
.mk-mark-32 { width: 32px; height: 32px; }

/* ════════════════════════════════════════════════════════════════════════
   v2 — floating pill nav + centered hero + framed console preview.
   (Supersedes the split hero; older .nav / .hero-grid / .decision-card rules
   above are unused by the current markup.)
   ════════════════════════════════════════════════════════════════════════ */
:root { --state-deny: oklch(0.44 0.16 25); --state-deny-tint: oklch(0.96 0.03 25); }

/* ── Grounded letterhead nav ──
   A government registry doesn't float on glass. Solid paper band, ruled
   bottom edge, a hairline gold rule beneath the seal — a masthead, not a
   detached pill. Condenses (not blurs) on scroll. */
.mk-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
}
.mk-topbar-inner { max-width: var(--maxw); position: relative; }
.mk-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0;
  transition: padding 0.25s var(--ease);
}
.mk-nav .brand { margin-inline-end: 0.4rem; position: relative; }
/* Brand rule beneath the wordmark — letterhead spine. */
.mk-nav .brand::after {
  content: ""; position: absolute; inset-block-end: -0.32rem; inset-inline-start: 0;
  width: 2.1rem; height: 2px; border-radius: 1px; background: var(--brand);
}
.mk-nav-links { display: flex; align-items: center; gap: 0.25rem; margin-inline-end: auto; }
.mk-nav-links a {
  padding: 0.4rem 0.8rem; border-radius: 4px; font-size: var(--fs-03); color: var(--ink-faint);
  transition: color 0.2s ease, background 0.2s ease;
}
.mk-nav-links a:hover { color: var(--ink); background: var(--paper-sunk); }
.mk-nav-actions { display: flex; align-items: center; gap: 0.55rem; }
.mk-divider { width: 1px; height: 1.4rem; background: var(--rule); }
.mk-signin { font-size: 0.88rem; color: var(--ink-faint); padding: 0.35rem 0.4rem; transition: color 0.2s ease; }
.mk-signin:hover { color: var(--ink); }
.mk-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--brand-deep); color: var(--brand-on);
  padding: 0.5rem 1.05rem; border-radius: 4px; font-size: var(--fs-03); font-weight: 500;
  transition: background 0.2s ease;
}
.mk-cta:hover { background: var(--brand); }

/* ── Asymmetric case-record hero ──
   Copy set against a ruled left margin (a bound-register spine), the console
   preview below at full bleed. Not a centered announcement stack. */
.wrap-hero { max-width: var(--maxw); }
.hero-copy {
  max-width: 44rem;
  padding-inline-start: clamp(1rem, 3vw, 2.25rem);
  border-inline-start: 2px solid var(--rule);
  position: relative;
}
/* Register spine: a gold tick where the ruled margin meets the headline. */
.hero-copy::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: -2px;
  width: 2px; height: 3.25rem; background: var(--gold);
}

/* Running record line above the headline — an official form header.
   Keys (hrl-k) are labels → sans; values (hrl-v) are data → mono. */
.hero-record-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.8rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-02);
}
.hero-record-line .hrl-k {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint);
}
html[dir="rtl"] .hero-record-line .hrl-k { letter-spacing: 0; font-size: var(--fs-03); }
.hero-record-line .hrl-v {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--brand); font-weight: 500;
}
.hero-record-line .hrl-sep { width: 1px; height: 0.9rem; background: var(--rule); }

.hero-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: var(--fs-08);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0; max-width: 16ch;
}
/* keyword emphasis inside the H1: italic serif, not gold bold */
.hero-title em { font-style: italic; font-weight: 450; color: var(--brand); }
/* Arabic: IBM Plex Serif has NO Arabic — keep the Sans Arabic voice */
html[dir="rtl"] .hero-title {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  font-weight: 500; line-height: 1.3; letter-spacing: 0;
}
.hero-lead {
  margin: 1.5rem 0 0; max-width: 44ch;
  font-size: var(--fs-05); line-height: 1.6; color: var(--ink-muted);
}
/* Three scannable facts as a ruled register — replaces the old lead paragraph */
.hero-facts {
  list-style: none;
  margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.65rem;
  max-width: 46ch;
}
.hero-facts li {
  font-size: 0.97rem; line-height: 1.5; color: var(--ink-muted);
  border-inline-start: 2px solid var(--brand);
  padding-inline-start: 0.8rem;
}
.hero-record .hero-cta {
  margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem;
}
.hero-cta-note {
  margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--ink-faint);
}
.hero-cta-note .mono { color: var(--ink-muted); }

/* Marks: a ruled register of the three guarantees, not centered pills. */
.hero-marks {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--fs-02);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.hero-marks li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-marks li::before {
  content: ""; width: 3px; height: 0.85rem; border-radius: 1px; background: var(--brand);
}
html[dir="rtl"] .hero-marks { letter-spacing: 0; }

/* ── Framed console preview (crafted mock, not an image) ── */
.hero-frame {
  margin-top: 3.5rem; padding: 0.6rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: oklch(0.99 0.004 259 / 0.6);
  position: relative;
}
/* Registration ticks — L-shaped corner marks, offset 4px outside the frame */
.hero-frame::before,
.hero-frame::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border-color: var(--rule);
  border-style: solid;
  pointer-events: none;
}
.hero-frame::before {
  top: -4px; left: -4px;
  border-width: 1px 0 0 1px;
}
.hero-frame::after {
  bottom: -4px; right: -4px;
  border-width: 0 1px 1px 0;
}
.app-mock {
  position: relative; overflow: hidden; text-align: start;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
  box-shadow: var(--shadow-float);
}
/* mock-plate: form title block replacing the old browser chrome dots */
.mock-plate {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 1rem;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 -2px oklch(0.5 0.05 259 / 0.4);
}
.mock-plate-title {
  font-size: 0.67rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
}
.mock-plate-ref {
  font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.mock-body { display: grid; grid-template-columns: 210px 1fr; min-height: 340px; }
.mock-side {
  background: linear-gradient(var(--brand-deep), var(--brand-deeper)); color: var(--brand-on);
  padding: 1rem 0.85rem; display: flex; flex-direction: column; gap: 0.1rem;
}
.mock-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-weight: 600; font-size: 0.95rem; }
/* The mock console renders the real product wordmark, so it carries the
   real brand face too. */
.mock-brand span {
  font-family: 'Montserrat', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.mock-brand .mark { width: 25px; height: 22px; color: var(--brand-on); }
.mock-nav-label {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--fs-01);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-on-fa);
  margin: 0.7rem 0 0.3rem;
}
.mock-nav-item {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem;
  border-radius: 4px; font-size: var(--fs-03); color: var(--brand-on-mu);
}
.mock-nav-item svg { width: 0.95rem; height: 0.95rem; }
.mock-nav-item.is-active { background: oklch(1 0 0 / 0.12); color: var(--brand-on); }
.mock-main { padding: 1.25rem 1.4rem; min-width: 0; }
.mock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mock-h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.mock-sub { font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.15rem; }
.mock-pill { font-size: 0.66rem; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 4px; padding: 0.2rem 0.6rem; white-space: nowrap; }
.mock-rows { display: flex; flex-direction: column; }
.mock-row {
  display: grid; grid-template-columns: 1.4fr 1.3fr auto 3rem; align-items: center; gap: 1rem;
  padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--rule-soft);
}
.mock-name { font-weight: 500; font-size: 0.9rem; }
.mock-meta { font-size: 0.76rem; color: var(--ink-faint); }
/* Squared ledger tag — the app itself uses squared state tags, so the
   mock matches the real product: 4px corners + an inline-start accent bar. */
.mock-verdict {
  justify-self: start; font-size: 0.7rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: 4px;
  border-inline-start: 2px solid currentColor;
}
.mock-verdict.pass { color: var(--state-pass); background: var(--state-pass-tint); }
.mock-verdict.gov  { color: var(--state-gov);  background: var(--state-gov-tint); }
.mock-verdict.deny { color: var(--state-deny); background: var(--state-deny-tint); }
.mock-conf { font-size: 0.8rem; color: var(--ink-muted); text-align: end; }
.mock-fade { display: none; } /* replaced by hard ledger cut edge */
/* Honest ledger-cut row at the bottom of the mock — says where it was cut */
.mock-more {
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0.25rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--fs-01); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── v2 responsive ── */
@media (max-width: 820px) {
  .mk-nav-links { display: none; }
  .mk-nav-links.open {
    display: flex; position: absolute; inset-inline: var(--gutter); top: 100%;
    flex-direction: column; align-items: stretch; gap: 0.1rem;
    background: var(--paper); border: 1px solid var(--rule); border-radius: 0 0 6px 6px;
    border-top: 0; padding: 0.6rem; box-shadow: var(--shadow-menu);
  }
  .mk-nav-links.open a { padding: 0.7rem 0.6rem; font-size: 1rem; }
  .mk-nav .nav-burger { display: inline-flex; }
  .mk-divider, .mk-signin { display: none; }
}
@media (max-width: 700px) {
  .mock-side { display: none; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-row { grid-template-columns: 1fr auto; }
  .mock-row .mock-meta { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   v3 — registers marquee · bento capabilities · FAQ accordion
   ════════════════════════════════════════════════════════════════════════ */

/* ── Registers marquee (honest "logo cloud" analog) ── */
.mq { border-block: 1px solid var(--rule); background: var(--paper-warm); padding-block: 1.75rem; }
.mq-lead { text-align: center; color: var(--ink-muted); font-size: 0.95rem; margin: 0 auto 1.25rem; padding-inline: var(--gutter); max-width: 44rem; }
/* A standing register, not a conveyor belt: the entries lay out statically and
   wrap, LTR and RTL alike (flex + logical gaps are direction-agnostic). The old
   44s marquee (duplicated track + its scrolling keyframes, LTR and RTL) is gone. */
.mq-viewport { padding-inline: var(--gutter); }
.mq-track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 0.9rem; max-width: 56rem; margin-inline: auto;
}
/* Ledger tag, not a pill: squared corners + an inline-start accent bar.
   (Stadium chips with a leading dot are banned on this project.) */
.mq-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.5rem 0.95rem; border: 1px solid var(--rule); border-radius: 4px;
  border-inline-start: 3px solid var(--brand);
  background: var(--paper); font-size: var(--fs-03); font-weight: 500; color: var(--ink-muted);
}

/* ── Capability schedule (Annex) — a ruled register, not a card grid ──
   A single bordered table-of-capabilities: a caption band up top, then rows
   separated by hairlines. Each row carries a monospace clause code in an
   inside margin. Two rows (.is-lead) sit at heavier register weight so the
   schedule reads with intent rather than as a uniform grid. No per-item
   icons, no rounded soft-shadow cells — this is an official annex. */
.schedule {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.sch-caption {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.9rem clamp(1.25rem, 3vw, 2rem);
  background: var(--paper-warm); border-bottom: 1px solid var(--rule);
}
.sch-cap-k {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand); font-weight: 600;
}
.sch-cap-v {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--fs-02);
  letter-spacing: 0.04em; color: var(--ink-faint);
}
/* Rows: a fixed code column + a flexible body. Hairline between rows. */
.sch-row {
  display: grid; grid-template-columns: 3.75rem 1fr;
  gap: clamp(1rem, 3vw, 2rem); align-items: start;
  padding: clamp(1.15rem, 2.6vw, 1.7rem) clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-soft);
  transition: background 0.3s ease;
}
.sch-row:first-of-type { border-top: 0; }
.sch-row:hover { background: color-mix(in oklab, var(--brand-tint) 55%, transparent); }
/* Wide screens: the annex sets in two ruled columns — half the scroll, same register */
@media (min-width: 900px) {
  .schedule { display: grid; grid-template-columns: 1fr 1fr; }
  h2.sch-caption { grid-column: 1 / -1; }
  .sch-row:nth-of-type(-n+2) { border-top: 0; }
  .sch-row:nth-of-type(odd) { border-inline-end: 1px solid var(--rule-soft); }
}
.sch-code {
  font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.04em;
  padding-top: 0.15rem; font-variant-numeric: tabular-nums;
}
.sch-body { min-width: 0; }
.sch-name {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 0.4rem; color: var(--ink);
}
.sch-body p { margin: 0; color: var(--ink-muted); font-size: 0.94rem; line-height: 1.62; max-width: 62ch; }
/* Lead capabilities — set larger, with a brand accent + marginal rule. */
.sch-row.is-lead { border-inline-start: 3px solid var(--brand); }
.sch-row.is-lead .sch-code { color: var(--ink); font-weight: 600; }
.sch-row.is-lead .sch-name { font-size: 1.28rem; }
.sch-row.is-lead .sch-body p { font-size: 1rem; color: var(--ink-muted); }
@media (max-width: 620px) {
  .sch-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .sch-code { padding-top: 0; }
}

/* ── FAQ accordion (native <details>, no JS) ── */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: 0.75rem; }
.faq details {
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); padding-inline: 1.3rem;
  transition: border-color 0.3s ease;
}
/* --shadow-card is now none; state signal by border-color deepening only */
.faq details[open] { border-color: color-mix(in oklab, var(--brand) 45%, var(--rule)); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 1.02rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
/* Plus icon rotates 45° into an × when open. */
.q-plus { position: relative; width: 1.05rem; height: 1.05rem; flex: none; color: var(--brand);
  transition: transform 0.35s var(--ease), color 0.25s ease; }
.q-plus::before, .q-plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.q-plus::before { inset-inline: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.q-plus::after { inset-block: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.faq details[open] .q-plus,
.faq-mobile details[open] .q-plus { transform: rotate(45deg); color: var(--gold-deep); }
.q-body { padding: 0 0 1.25rem; margin: 0; max-width: 60ch; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.65; }

/* ════════════════════════════════════ GLOBAL REACH: WORLD MAP ════════════
   Dotted world map (static/world-dots.svg) with arcs converging on Riyadh.
   Pure SVG + CSS: arcs draw in once (dash offset), then endpoint rings pulse
   twice and rest. No perpetual motion; everything honours
   prefers-reduced-motion and rests fully drawn for print/no-JS captures.
   Coordinates are in the map's own viewBox (0 0 210 100 → aspect 21/10);
   the container is locked to that ratio so the img, the arc SVG and the %
   label chips all register pixel-for-pixel.
   ═════════════════════════════════════════════════════════════════════════ */
.reach-map {
  position: relative;
  max-width: 1000px;
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  aspect-ratio: 21 / 10;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}
.reach-dots,
.reach-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Fade the dotted field top & bottom so it melts into the paper band. */
.reach-dots {
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.reach-arcs { overflow: visible; }

/* ── Arc lines (origin → Riyadh) ─────────────────────────────────────────── */
.reach-arcs stop { stop-color: var(--brand-soft); }
.reach-arc {
  fill: none;
  stroke: url(#reach-grad);
  stroke-width: 0.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: reach-draw 1.5s var(--ease-out) forwards;
}
.reach-arc.a0 { animation-delay: 0.15s; }
.reach-arc.a1 { animation-delay: 0.35s; }
.reach-arc.a2 { animation-delay: 0.55s; }
.reach-arc.a3 { animation-delay: 0.75s; }
.reach-arc.a4 { animation-delay: 0.95s; }
.reach-arc.a5 { animation-delay: 1.15s; }
.reach-arc.a6 { animation-delay: 1.35s; }
.reach-arc.a7 { animation-delay: 1.55s; }
@keyframes reach-draw { to { stroke-dashoffset: 0; } }

/* ── Endpoints: origin nodes + Riyadh hub ─────────────────────────────────── */
/* The travelling comet dots are gone (perpetual inbound traffic is decoration
   with no referent). The solid .dot circles are the permanent, printable
   representation of each node. Rings pulse twice after the last arc lands
   (delay 1.7s ≈ a7's 1.55s draw), then rest — their rest / reduced-motion /
   no-JS state is opacity 0, so every static capture is identical. */
.reach-node .dot  { fill: var(--brand); }
.reach-node .ring { fill: var(--brand); opacity: 0; r: 0.7; }
.reach-node.hub .dot  { fill: var(--brand); filter: none; }
.reach-node.hub .ring { fill: var(--brand); opacity: 0; r: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  .reach-node .ring     { animation: reach-pulse 2.6s ease-out 1.7s 2 both; }
  .reach-node.hub .ring { animation: reach-pulse-hub 2.6s ease-out 1.7s 2 both; }
}
@keyframes reach-pulse     { from { r: 0.7; opacity: 0.5; } to { r: 3;   opacity: 0; } }
@keyframes reach-pulse-hub { from { r: 1.1; opacity: 0.6; } to { r: 4.5; opacity: 0; } }

/* ── City chips (HTML overlay, positioned by % of the 21:10 box) ──────────── */
.reach-labels { position: absolute; inset: 0; pointer-events: none; }
/* Map pins: mini ledger tags — opaque, bordered, no glass (Effect 7).
   Matches .mock-verdict grammar: opaque bg, inline-start accent bar. */
.reach-pin {
  position: absolute;
  font-size: clamp(0.58rem, 1.15vw, 0.72rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 0.25em 0.55em;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-inline-start: 2px solid var(--brand);
  color: var(--ink-muted);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.reach-pin.hub {
  font-weight: 700;
  color: var(--brand-deep);
  /* Riyadh = the ONE gold accent on the map */
  border-inline-start-color: var(--gold-deep);
  box-shadow: none;
}
/* Position = dot's % coordinate in the box; transform nudges the chip clear of it. */
.rp-riyadh  { left: 63.1%; top: 45.0%; transform: translate(-12%, 0.7rem); }
.rp-london  { left: 50.0%; top: 25.1%; transform: translate(-50%, -150%); }
.rp-nyc     { left: 29.5%; top: 33.8%; transform: translate(-62%, -150%); }
.rp-sao     { left: 36.9%; top: 74.5%; transform: translate(-45%, 70%); }
.rp-tokyo   { left: 88.8%; top: 38.1%; transform: translate(-92%, -150%); }
.rp-jakarta { left: 79.8%; top: 64.1%; transform: translate(-28%, 70%); }
/* Three new city chips: Lagos, Cairo, Mumbai */
.rp-lagos   { left: 50.9%; top: 60.5%; transform: translate(-50%, 70%); }
.rp-cairo   { left: 58.8%; top: 36.5%; transform: translate(-50%, -150%); }
.rp-mumbai  { left: 70.2%; top: 52.5%; transform: translate(-10%, 70%); }
/* All-or-nothing: hide all three new chips below 640px (partial labelling = tell) */
@media (max-width: 640px) {
  .rp-new { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reach-arc  { stroke-dashoffset: 0; animation: none; }
  .reach-node .ring, .reach-node.hub .ring { animation: none; }
}

/* ════════════════════════════════════ WALKTHROUGH EMBED (How it works) ════
   Self-driving product tour iframed from the CSP-clean /static/demo build.
   Desktop-only choreography (needs ≥1000px) — below that the frame is hidden
   and only the "open in a new tab" affordance shows.
   ═════════════════════════════════════════════════════════════════════════ */
.how-demo { margin-top: clamp(2.5rem, 5vw, 3.75rem); text-align: center; }
.how-demo-head { max-width: 46rem; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); }
.how-demo-head .eyebrow { justify-content: center; margin-bottom: 1rem; }
.how-demo-head h3 { margin-bottom: 0.85rem; }

/* Dark device bezel — the walkthrough reads as a screen on a border-desk
   kiosk/monitor: thick deep-forest frame, inset screen, grounded shadow. */
.how-demo-frame {
  max-width: 1160px; margin: 0 auto;
  padding: clamp(0.75rem, 1.7vw, 1.2rem);
  background: linear-gradient(158deg, var(--brand-deep), var(--brand-deeper));
  border-radius: 24px;
  box-shadow:
    0 2px 4px oklch(0.2 0.03 259 / 0.25),
    0 46px 92px -46px oklch(0.15 0.05 259 / 0.7),
    inset 0 1px 0 oklch(1 0 0 / 0.07);            /* top rim light */
}
.how-demo-screen {
  position: relative; aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: 11px; background: var(--paper);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.4); /* screen edge, sunk into bezel */
}
.how-demo-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.how-demo-mobile { display: none; }

.how-demo-open {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem;
  font-weight: 500; font-size: 0.95rem; color: var(--brand);
}
.how-demo-open:hover { color: var(--brand-deep); }
.how-demo-open svg { width: 1.05rem; height: 1.05rem; }
html[dir="rtl"] .how-demo-open svg.flip { transform: scaleX(-1); }

@media (max-width: 999px) {
  .how-demo-frame { display: none; }
  .how-demo-mobile {
    display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
    max-width: 32rem; margin: 0 auto;
    padding: 2.25rem 1.5rem;
    border: 1px dashed var(--rule); border-radius: var(--radius);
    background: var(--paper); color: var(--ink-muted);
  }
  .how-demo-mobile svg { width: 2rem; height: 2rem; color: var(--brand); }
  .how-demo-mobile p { margin: 0; max-width: 26rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   v4 — Nibomont motion & interaction language.
   The signature gesture is the customs-stamp impression: a decision surface
   presses in on activation, like an inked seal meeting paper — not a SaaS
   sheen sweep or ambient cursor glow. All motion is reduced-motion gated;
   layout uses logical properties for RTL.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Nav condense once scrolled (marketing.js toggles .is-stuck) ──
     Grounds a paper edge under the masthead — a ruled line, not a shadow-
     floated pill. */
.mk-topbar { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.mk-topbar.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 oklch(0.2 0.05 259 / 0.03);
}
.mk-topbar.is-stuck .mk-nav { padding-block: 0.55rem; }

/* ── Ledger-rule advance on paper cards (feature cards + bento cells).
     On hover a hairline is ruled along the card foot, like a pen drawing a
     new ledger entry — a record action, not an ambient cursor glow. The
     draw direction follows reading direction (flips in RTL). ── */
.feature, .bento .cell { position: relative; overflow: hidden; }
.feature::before,
.bento .cell::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
html[dir="rtl"] .feature::before,
html[dir="rtl"] .bento .cell::before { transform-origin: right; }
@media (hover: hover) and (pointer: fine) {
  .feature:hover::before,
  .bento .cell:hover::before { transform: scaleX(1); }
}

/* ── Customs-stamp impression on the primary/stamp buttons.
     On press the surface deboss-presses in (scale-down + slight rotate),
     as an inked seal meets paper — the page's one signature gesture. A
     faint gold ring flashes at the moment of contact. ── */
.btn-stamp { position: relative; transition:
    transform 0.14s cubic-bezier(0.3, 0, 0.2, 1),
    box-shadow 0.14s ease; }
.btn-stamp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: 0 0 0 0 oklch(1 0 0 / 0.55);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-stamp:active { transform: scale(0.965) rotate(-0.6deg); }
  html[dir="rtl"] .btn-stamp:active { transform: scale(0.965) rotate(0.6deg); }
  .btn-stamp:active::after { animation: stamp-ring 0.4s var(--ease-out) forwards; }
}
@keyframes stamp-ring {
  0%   { opacity: 1; box-shadow: 0 0 0 0 oklch(1 0 0 / 0.55); }
  100% { opacity: 0; box-shadow: 0 0 0 7px oklch(1 0 0 / 0); }
}

/* ── FAQ: smooth native <details> open via ::details-content.
     Needs interpolate-size (Chrome 129+/Safari 18.2+); everywhere else the
     panel simply snaps open, exactly as before. ── */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    block-size: 0; overflow-y: clip; opacity: 0;
    transition: content-visibility 0.4s allow-discrete,
                opacity 0.4s var(--ease), block-size 0.4s var(--ease);
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ── Verify strip (dark security band): the factual proof chips ── */
.verify-strip {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-top: 1.5rem; border-top: 1px solid var(--brand-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
.verify-label {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--fs-02);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-on-fa);
  margin-inline-end: 0.5rem;
}
.verify-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; border: 1px solid var(--brand-line); border-radius: 6px;
  border-inline-start: 2px solid var(--gold);
  font-size: 0.74rem; letter-spacing: 0.03em; color: var(--brand-on-mu);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.verify-chip:hover { border-color: color-mix(in oklab, var(--gold) 55%, var(--brand-line));
  color: var(--brand-on); }

/* ── Final CTA: ghosted seal watermark behind the band content ── */
.cta-band .wrap { position: relative; z-index: 1; }
.cta-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; inset-inline-end: -5rem; transform: translateY(-50%);
  width: clamp(16rem, 30vw, 26rem); height: clamp(16rem, 30vw, 26rem);
  color: var(--gold); opacity: 0.05;
}

/* ── Footer: status link (gold dot + console host) ── */
.foot-status { display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--brand-on-fa); transition: color 0.2s ease; }
.foot-status:hover { color: var(--brand-on); }

@media (prefers-reduced-motion: reduce) {
  .q-plus, .mk-nav, .mk-topbar { transition: none; }
  .feature::before, .bento .cell::before { transition: none; }
  .btn-stamp { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   De-AI Pass 1 — new layout components
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tell 3 rhythm break 1: hero console overlap ─────────────────────── */
.hero-record { padding-block-end: 0; }
.hero-frame {
  margin-block-end: -3.5rem;
  position: relative;
  z-index: 2;
}
.mq { padding-block-start: 5.5rem; }

/* ── Hero specimen watermark ─────────────────────────────────────────── */
.app-mock { position: relative; overflow: hidden; }
.mock-specimen-watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--state-near);
  opacity: 0.22;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  text-transform: uppercase;
}
.mock-case-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.mock-phase {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--ink-faint);
  text-align: end;
}

/* ── The pipeline as a diagram: three stage plates + labelled hand-offs ── */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  border-block: 1px solid var(--rule);
}
.flow-stage {
  padding: 2rem 1.75rem 1.75rem;
  border-inline-start: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--paper);
}
.flow-stage:first-child { border-inline-start: none; }
.flow-stage.is-lead { border-block-start: 3px solid var(--brand); margin-block-start: -1px; }
.flow-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.4rem;
}
.flow-num {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.flow-stage.is-lead .flow-num { color: var(--brand); }
.flow-glyph { width: 44px; height: 44px; color: var(--brand); }
.flow-stage h3 { margin: 0; }
.flow-stage p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-muted);
  flex: 1;
}
.flow-stage p a { color: var(--brand); }
.flow-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.4rem; }
.flow-link {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding-inline: 1.1rem;
  color: var(--ink-faint);
}
.flow-arrow { width: 22px; height: 22px; color: var(--brand); }
html[dir="rtl"] .flow-arrow { transform: scaleX(-1); }
.flow-link .mono { font-size: 0.68rem; letter-spacing: 0.04em; white-space: nowrap; }
@media (max-width: 920px) {
  .flow { grid-template-columns: 1fr; border-block: none; }
  .flow-stage { border: 1px solid var(--rule); border-block-start-width: 1px; }
  .flow-stage.is-lead { border-block-start: 3px solid var(--brand); margin-block-start: 0; }
  .flow-link { flex-direction: row; padding-block: 0.8rem; }
  .flow-arrow { transform: rotate(90deg); }
  html[dir="rtl"] .flow-arrow { transform: rotate(90deg); }
}

/* ── Map as a standalone evidence figure below the flow ── */
.reach-figure { margin: 3rem auto 0; max-inline-size: 56rem; }
/* Squared ledger category tags (never rounded pill-dot chips) */
.ledger-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-inline-start: 2px solid var(--gold);
  border-radius: 2px;
  font-size: 0.72rem;
  color: var(--ink-muted);
  background: var(--paper-warm);
}
.reach-category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
}

/* ── Figure caption ──────────────────────────────────────────────────── */
.fig-cap {
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.5;
  margin-block-start: 0.75rem;
  font-style: italic;
}

/* ── Tell 5: case-chain artifact (full-bleed, Tell 3 break 2) ────────── */
.case-chain {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  padding-block: 2.5rem;
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-line) transparent;
}
.cc-head {
  font-size: 0.8rem;
  color: var(--brand-on-mu);
  letter-spacing: 0.04em;
  margin-block-end: 1.25rem;
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.cc-ok {
  color: var(--state-pass);
}
.cc-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-inline-size: max-content;
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.cc-ev {
  flex: none;
  inline-size: 17rem;
  padding: 1.4rem 1.6rem;
  border-block-start: 2px solid var(--brand-line);
  border-inline-end: 1px solid oklch(1 0 0 / 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cc-ev:last-child { border-inline-end: none; }
.cc-ev h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-on);
  letter-spacing: 0.02em;
  margin: 0;
}
.cc-ev p {
  font-size: 0.85rem;
  color: var(--brand-on-mu);
  margin: 0;
  line-height: 1.55;
  flex: 1;
}
.cc-prev {
  font-size: 0.74rem;
  color: var(--brand-on-fa);
  letter-spacing: 0.02em;
}
.cc-hash {
  font-size: 0.74rem;
  color: var(--brand-on-fa);
  letter-spacing: 0.02em;
  margin-block-start: auto;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid oklch(1 0 0 / 0.06);
}
/* Elided middle of the chain — dashed plate, honest about what's not shown */
.cc-ev.cc-elide {
  border-block-start-style: dashed;
  border-block-start-color: oklch(1 0 0 / 0.25);
}
.cc-ev.cc-elide h3 { color: var(--brand-on-fa); letter-spacing: 0.3em; }
/* Section title above the artifact */
.cc-title {
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  margin-block-end: 0.5rem;
}
.cc-title .h2 { color: var(--brand-on); margin-block-end: 0.7rem; }
.cc-title .lead { color: var(--brand-on-mu); max-width: 44rem; }
.case-chain .fig-cap {
  margin-block-start: 1rem;
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  color: var(--brand-on-fa);
  font-style: normal;
}
/* Micro-labels on the two hex lines — without them the bare "↑ 8b21f0" and
   "8b21f0a4…" read as decoration rather than as prev-hash / this-hash. */
.cc-lbl {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  color: var(--brand-on-fa);
  opacity: 0.65;
  margin-inline-end: 0.4rem;
}
/* Phones: the chain is a ~85rem flex row, which off-screen becomes an
   invisible horizontal scroller nobody discovers. Stack it into a readable
   top-to-bottom ledger — each event's hash sits directly above the next
   event's "carries" line, which is exactly what the chain claims. */
@media (max-width: 860px) {
  .case-chain {
    inline-size: auto;
    margin-inline: 0;
    overflow-x: visible;
    padding-block: 1.75rem 0;
  }
  .cc-head { margin-block-end: 1rem; }
  .cc-row {
    flex-direction: column;
    min-inline-size: 0;
  }
  .cc-ev {
    inline-size: auto;
    padding: 0.95rem 0 1.1rem;
    border-inline-end: none;
    border-block-start: 1px solid oklch(1 0 0 / 0.14);
  }
  .cc-ev:first-child { border-block-start: 2px solid var(--brand-line); }
  .cc-ev.cc-elide { border-block-start-style: dashed; }
  .cc-hash { margin-block-start: 0.45rem; border-block-start: none; padding-block-start: 0; }
  .cc-ev p { flex: none; }
}

/* ── Tell 4: #security two-column heading layout ─────────────────────── */
.sec-two-col {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2.5fr;
  gap: 0 3rem;
  align-items: start;
}
.sec-head-sticky {
  position: sticky;
  inset-block-start: 6rem;
  padding-block-end: 2rem;
}
.sec-cols { min-width: 0; }
@media (max-width: 720px) {
  .sec-two-col {
    grid-template-columns: 1fr;
  }
  .sec-head-sticky {
    position: static;
    padding-block-end: 1.5rem;
  }
}

/* ── Tell 7: colophon footer ─────────────────────────────────────────── */
.footer.colophon {
  border-block-start: 1px solid var(--rule);
  padding-block: 2.5rem;
  background: var(--paper-warm);
}
.footer.colophon .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.colo-entity {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.colo-tag {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0;
  max-inline-size: 48rem;
  line-height: 1.5;
}
.colo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-block-start: 0.4rem;
}
.colo-links a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.18s ease;
  padding-inline: 0.1rem;
}
.colo-links a:hover { color: var(--ink); }
.colo-build {
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-start: 0.5rem;
}
.colo-build a { color: var(--ink-muted); text-decoration: none; }
.colo-build a:hover { color: var(--ink); text-decoration: underline; }

/* ── Q&A: <details> register at every width — scannable, two answers open ── */
.faq-mobile {
  display: block;
  max-inline-size: 46rem;
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--rule);
}
.faq-mobile details { border-block-end: 1px solid var(--rule); }
.faq-mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  gap: 0.75rem;
  font-size: 1rem;
}
.faq-mobile summary::-webkit-details-marker { display: none; }
.faq-mobile summary:hover { color: var(--brand); }
.faq-mobile .q-body {
  padding-block-end: 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 58ch;
  margin: 0;
}
/* plus toggle: reuses the existing .q-plus rules (defined with the .faq styles) */

/* ── Tell 3 rhythm break 3: editions-sheet narrowing ────────────────── */
.editions-sheet {
  max-inline-size: 56rem;
  margin-inline: auto;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 2rem;
}

/* ── Capabilities: promoted sch-caption as h2 ────────────────────────── */
h2.sch-caption {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-block-end: 0;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--rule);
}

/* ── FAQ section heading (plain h2, no eyebrow) ──────────────────────── */
#faq h2.h2 {
  margin-block-end: 0;
}

/* ── Deployment section: strip the band-warm tint (Tell 3 break 3) ───── */
#deployment { background: var(--paper); }

/* ── Narrow phones: the longer "Arrange an evaluation" nav CTA no longer
   fits beside the lang toggle + burger (overflowed the page at 390px);
   drop it — the hero CTA sits one scroll below and the burger menu still
   reaches #contact. ──────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .mk-nav .mk-cta { display: none; }
}

/* ════════════════════════════════ LEGAL / CONTACT PAGES ══════════════════
   Standalone /privacy · /terms · /contact — short document pages that reuse
   this stylesheet. A single measure column, ruled section heads, honest
   register. The contact page overrides the forest-band form field colours
   with paper-variant fields. ═══════════════════════════════════════════════ */
.legal-page {
  max-inline-size: 46rem;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.legal-page h1.h2 { margin-block-end: 0.5rem; }
.legal-updated { font-size: 0.78rem; color: var(--ink-faint); margin-block-end: 1.75rem; }
.legal-lead { font-size: 1.05rem; color: var(--ink-muted); line-height: 1.7; margin-block-end: 2.25rem; max-inline-size: 62ch; }
.legal-sec { border-block-start: 1px solid var(--rule); padding-block-start: 1.5rem; margin-block-end: 2rem; }
.legal-h { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.75rem; color: var(--ink); }
.legal-sec p { margin: 0 0 0.85rem; color: var(--ink-muted); font-size: 0.97rem; line-height: 1.72; max-inline-size: 65ch; }
.legal-sec p:last-child { margin-block-end: 0; }
.legal-page a { color: var(--brand); text-decoration: underline 1px; }
.legal-page a:hover { text-decoration-thickness: 2px; }

/* Contact page: light form fields (the .cta-field rules are tuned for the
   forest band; override to paper here). */
.contact-page .cta-field label { color: var(--ink-muted); }
.contact-page .cta-field input,
.contact-page .cta-field textarea {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
}
.contact-page .cta-field input:focus,
.contact-page .cta-field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 25%, transparent);
}
.contact-page .cta-field.has-error input,
.contact-page .cta-field.has-error textarea { border-color: var(--state-deny, oklch(0.55 0.16 25)); }
.contact-page .cta-fallback { color: var(--ink-muted); }
.contact-page .cta-fallback a { color: var(--brand); }

.contact-note {
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--brand);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-block: 1.5rem 2rem;
  background: var(--paper-warm);
}
.contact-note p { margin: 0 0 0.5rem; color: var(--ink-muted); }
.contact-note p:last-child { margin-block-end: 0; }
.contact-ok { border-inline-start-color: var(--brand); }
.contact-fail { border-inline-start-color: var(--state-deny, oklch(0.55 0.16 25)); }

/* ════════════════════════════════════════════════════════════════════════
   mk17 — Proof strip · desk & policy feature columns · MRZ / dry-run figures
   · restrained, explanatory, play-once motion layer.

   MOTION CONTRACT (matches the page's existing anti-slop stance):
   · Nothing is load-bearing. Every block is fully visible with JS blocked and
     under prefers-reduced-motion — entrance states apply ONLY under
     `html.mk-motion` (set by marketing.js when motion is welcome).
   · Each animation EXPLAINS a mechanism (stamp, scan, backtest count, chain
     break) and rests once played. No perpetual loops.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Proof strip — the honest metrics band (no fabricated logos) ────────── */
.proof {
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
}
.proof-lead {
  text-align: center; margin: 0 auto 1.15rem; max-width: 44rem;
  padding-inline: var(--gutter);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--fs-02); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
html[dir="rtl"] .proof-lead { letter-spacing: 0; font-size: var(--fs-03); text-transform: none; }
.proof-tags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem 0.7rem; max-width: 58rem; margin-inline: auto;
}
/* Stamped ledger tag — squared, inline-start seal bar. Never a pill-dot chip. */
.proof-tag {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule); border-inline-start: 3px solid var(--gold-deep);
  border-radius: 3px; background: var(--paper);
  font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap;
}
html[dir="rtl"] .proof-tag { white-space: normal; }

/* ── Feature columns (shared by #desk and #policy) — light-band ledger cols
      that mirror the dark-band .dcol grammar: glyph, hairline, copy. ────── */
.feature-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.feat { min-width: 0; }
.feat-ico { display: block; margin-bottom: 1.05rem; color: var(--brand); }
.feat-ico svg { width: 1.5rem; height: 1.5rem; display: block; }
.feat-ico::after {
  content: ""; display: block; width: 1.75rem; height: 1px;
  background: var(--rule); margin-top: 0.85rem;
}
.feat h3 { margin-bottom: 0.55rem; }
.feat p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.65; max-width: 40ch; }
/* Lead feature (dry-run) — brand marginal accent, the schedule's is-lead voice. */
.feat.feat-lead {
  border-inline-start: 3px solid var(--brand);
  padding-inline-start: clamp(1rem, 2.5vw, 1.5rem);
  margin-inline-start: -3px;
}
/* Single surviving card (#desk, 2026-08-15): a lone cell in a 3-col grid reads
   as a broken layout, so .is-single collapses to one centred measure. */
.feature-cols.is-single { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.feature-cols.is-single .feat p { max-width: none; }
@media (max-width: 900px) {
  .feature-cols { grid-template-columns: 1fr; gap: 2rem; }
  .feat.feat-lead { margin-inline-start: 0; }
}

/* ── MRZ scan figure — two ICAO 9303 lines on a dark plate + a scan bar ─── */
.mrz-fig {
  position: relative; overflow: hidden;
  margin: 0.35rem 0 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--brand-deeper);
  border: 1px solid var(--brand-line); border-radius: 4px;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.mrz-line {
  font-size: 0.66rem; letter-spacing: 0.04em; line-height: 1.3;
  color: var(--brand-on-mu); white-space: nowrap; overflow: hidden;
  text-overflow: clip;
}
.mrz-scan {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 34%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent,
              oklch(1 0 0 / 0.28) 45%, oklch(1 0 0 / 0.55) 50%,
              oklch(1 0 0 / 0.28) 55%, transparent);
}

/* ── Dry-run count-up figure ────────────────────────────────────────────── */
.dryrun-fig {
  margin: 0.35rem 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--brand-tint);
  border: 1px solid var(--rule); border-radius: 4px;
}
.dryrun-num {
  display: block; font-size: 2.2rem; font-weight: 500; line-height: 1;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.dryrun-label {
  display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--ink-faint);
}
.dryrun-bar {
  display: block; margin-top: 0.7rem; height: 4px; border-radius: 2px;
  background: color-mix(in oklab, var(--brand) 14%, transparent); overflow: hidden;
}
.dryrun-bar-fill {
  display: block; height: 100%; width: 74%;
  background: var(--brand); border-radius: 2px;
}

/* ════════════════════════════════════ MOTION LAYER ═══════════════════════
   All entrance states are scoped to html.mk-motion so no-JS / reduced-motion
   renders at rest, fully visible. .in-view is added by the IntersectionObserver
   in marketing.js (once per element). ═══════════════════════════════════════ */

/* Proof tags — stamp in, staggered. */
html.mk-motion .proof-tags[data-reveal] .proof-tag {
  opacity: 0; transform: translateY(7px) scale(0.985);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
html.mk-motion .proof-tags[data-reveal].in-view .proof-tag { opacity: 1; transform: none; }
html.mk-motion .proof-tags.in-view .proof-tag:nth-child(1) { transition-delay: 0.00s; }
html.mk-motion .proof-tags.in-view .proof-tag:nth-child(2) { transition-delay: 0.07s; }
html.mk-motion .proof-tags.in-view .proof-tag:nth-child(3) { transition-delay: 0.14s; }
html.mk-motion .proof-tags.in-view .proof-tag:nth-child(4) { transition-delay: 0.21s; }
html.mk-motion .proof-tags.in-view .proof-tag:nth-child(5) { transition-delay: 0.28s; }

/* MRZ scan bar — sweeps once across the plate, then rests hidden. */
html.mk-motion .mrz-fig[data-reveal].in-view .mrz-scan {
  animation: mrz-sweep 1.6s var(--ease-out) 0.15s 1 both;
}
@keyframes mrz-sweep {
  0%   { opacity: 0; transform: translateX(-40%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(320%); }
}
html[dir="rtl"] .mrz-fig .mrz-scan { transform: scaleX(-1); }

/* Dry-run bar — fills from 0 once in view (the number is counted by JS). */
html.mk-motion .dryrun-fig[data-reveal] .dryrun-bar-fill { width: 0; }
html.mk-motion .dryrun-fig[data-reveal].in-view .dryrun-bar-fill {
  width: 74%; transition: width 1s var(--ease-out) 0.1s;
}

/* Pipeline hand-off — a token travels each link once when the flow enters view. */
html.mk-motion .flow[data-reveal] .flow-link { position: relative; }
html.mk-motion .flow[data-reveal] .flow-link::before {
  content: ""; position: absolute; z-index: 2;
  inset-block-start: calc(50% - 3px); inset-inline-start: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-deep); opacity: 0;
}
html.mk-motion .flow[data-reveal].in-view .flow-link::before {
  animation: flow-token 1.05s var(--ease-out) 1 both;
}
html.mk-motion .flow[data-reveal].in-view .flow-link:nth-of-type(2)::before { animation-delay: 0.55s; }
@keyframes flow-token {
  0%   { opacity: 0; inset-inline-start: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; inset-inline-start: 100%; }
}

/* Hash chain — seal in on scroll (staggered), plus a hover-crack that SHOWS
   "edit one row and every row after it breaks". Both pure-CSS on top of JS
   reveal; the hover-crack works even with motion off (color is the signal). */
/* The chain's entrance is an ANIMATION on .in-view, never a resting opacity:0
   that .in-view has to undo. Every other reveal on this page animates
   decoration (a travelling token, a scan bar, a bar fill) — the chain was the
   only one gating CONTENT on the observer, so any reveal that failed to fire
   left five events at opacity:0 and the section rendered as an empty dark
   void. Now a chain that is never observed simply shows, un-animated. */
html.mk-motion .cc-row[data-reveal].in-view .cc-ev {
  animation: cc-rise 0.55s var(--ease-out) both;
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html.mk-motion .cc-row.in-view .cc-ev:nth-child(1) { animation-delay: 0.00s; }
html.mk-motion .cc-row.in-view .cc-ev:nth-child(2) { animation-delay: 0.09s; }
html.mk-motion .cc-row.in-view .cc-ev:nth-child(3) { animation-delay: 0.18s; }
html.mk-motion .cc-row.in-view .cc-ev:nth-child(4) { animation-delay: 0.27s; }
html.mk-motion .cc-row.in-view .cc-ev:nth-child(5) { animation-delay: 0.36s; }

/* Hover-crack: hovering an event breaks every event AFTER it — red hairline +
   a shove that opens a gap where the chain no longer verifies. */
.cc-row .cc-ev { transition: border-color 0.25s ease, transform 0.25s var(--ease-out); }
@media (hover: hover) {
  .cc-row:hover .cc-ev:hover ~ .cc-ev {
    border-block-start-color: var(--state-deny);
    transform: translateX(0.6rem);
  }
  html[dir="rtl"] .cc-row:hover .cc-ev:hover ~ .cc-ev { transform: translateX(-0.6rem); }
  .cc-row:hover .cc-ev:hover ~ .cc-ev .cc-prev,
  .cc-row:hover .cc-ev:hover ~ .cc-ev .cc-hash { color: var(--state-deny); }
}

@media (prefers-reduced-motion: reduce) {
  /* Belt-and-braces: even if mk-motion were set, never move under reduced. */
  html.mk-motion .proof-tags .proof-tag,
  html.mk-motion .cc-row .cc-ev {
    opacity: 1 !important; transform: none !important;
    transition: none; animation: none !important;
  }
  html.mk-motion .mrz-fig .mrz-scan,
  html.mk-motion .flow .flow-link::before { animation: none !important; opacity: 0; }
  html.mk-motion .dryrun-fig .dryrun-bar-fill { width: 74% !important; transition: none; }
  .cc-row:hover .cc-ev:hover ~ .cc-ev { transform: none; }
}