/* ============================================================
   Client micro-site — THE shared shell. One file, every client.

   This file is loaded by every page of every client portal. It is the
   single copy of the shell, which is what makes cross-page and
   cross-client drift structurally impossible rather than merely
   discouraged. Before this existed each page inlined its own copy of
   the shell and the copies drifted; the 2026-08-06 portal audit found
   a page rendering an 89px header against its siblings' 109px, and the
   opt-in shell-consistency gate never saw it.

   Values come from the brand overlay's tokens (below); this sheet reads var() only.
   Canon: plugins/custom/marketing/harper-identity/knowledge/KNW_BR_MC_Visual-Design-System.md
          .claude/rules/content/mobile-first.md (the seven laws)

   Structure of a client portal page:
     .banner        confidentiality line, above everything
     nav.ring       tier 1 = phase (Proposal / Delivery), tier 2 = documents
     header.hero    the document opening
     section        the body
     footer         wordmark, tagline, copyright
   ============================================================ */

/* The brand overlay (tokens + font-faces) is a separate sheet, loaded BEFORE
   this one: /shared/brands/{brand}.css — harperos.css by default, declared per
   family via `brand:` in _family.mjs. This file is the BLOCK CANON: structure
   only, reading var() — a raw color or font literal here is a build error
   (check-block-system rule 5). */

*, *::before, *::after { box-sizing: border-box; }

/* clip, never hidden, where the browser has it: both stop the page scrolling sideways (law 5),
   but hidden makes the body a scroll container, and a sticky nav inside one never sticks; it
   scrolled away with the page until Oct 1, 2026 */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--field);
  -webkit-font-smoothing: antialiased;
}

/* ---------- type ladder — canon screen_fluid, matching the shipped shell ----------
   h1 carries the TITLE role: clamp(40,8vw,64). h2 is the SECTION role: clamp(36,6vw,60).
   h4 is deliberately NOT a display face — it is the JetBrains Mono metadata label. */
/* Law 4 (canon, MC 2026-08-13): the display face OPENS — H1 opens the document,
   H2 opens a section. H3 is a step INSIDE a section, not a new one, so it takes
   the body face with weight carrying its rank. Grouping h3 here was why every
   client page in the portfolio rendered subsection heads in Ponomar. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(40px, 8vw, 64px); line-height: 1.1; }
h2 { font-size: clamp(32px, 4.8vw, 48px); line-height: 1.1; }
h3 { font-size: clamp(20px, 2.6vw, 24px); line-height: 1.3; }
/* H4 is the JetBrains Mono metadata label (uppercase by authoring convention),
   not a small serif heading. Canon §Type scale. */
h4 {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
p { margin: 0; }
strong { font-weight: 600; }
a { color: var(--accent-label, var(--accent)); text-decoration: none; }
/* a link inside prose carries a green underline, so it still signals itself once its
   text is ink. The nav, the footer and a card's own link are not prose and stay clean. */
.body a, .blist a, .ln a, .note a, .ptable a, .tbl a, .swu a, .plede a, .aln a {
  text-decoration: var(--link-underline, none); text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.accent { color: var(--accent-text, var(--accent)); }

/* ---------- the subhead rule ----------
   Exactly ONE subhead per section, ONE SENTENCE (MC 2026-07-16). Everything after
   is body. The general-sibling guard forces any 2nd-or-later .body to body size by
   construction, so the defect cannot recur even if .sub is forgotten. (brand canon,
   MC 2026-07-01 — "encode that once and for all") */
.body { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.55; color: var(--ink-muted); margin-top: var(--s5); max-width: 60ch; }
.body.tight { margin-top: var(--s4); }
.body.sub { font-size: 16px; line-height: 1.55; }
.wrap .body ~ .body { font-size: 16px; line-height: 1.55; }
.body strong { color: var(--ink); font-weight: 600; }
.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px)  { :root { --gutter: var(--s6); } }  /* 32px */
@media (min-width: 1024px) { :root { --gutter: var(--s8); } }  /* 64px */

/* Sections separate by space and the 1px rule, never by a change of background.
   Canon §Surface rule. There is no .alt section class by design. */
section { padding: var(--s8) 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-label, var(--accent));
  margin: 0 0 var(--s5);
}

/* ---------- focus: one ring, every interactive element (Affordance) ---------- */
:focus-visible {
  outline: 2px solid var(--accent-text, var(--accent));  /* a control holds 3:1 */
  outline-offset: 2px;
}


/* ---------- the confidential banner — the document's first line, above the nav.
   Ink field, mono 11, centred: it states who the document is for. ---------- */
.banner { background: var(--ink); color: var(--field); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; text-align: center; padding: var(--s2) var(--s4); line-height: 1.6; }
/* Eased tracking on a phone. The full tracking wraps a long banner line at
   375px, so the tracking eases below 768px and there is room for all of it
   above. It does not hold every name to one line: measured Sep 23, 2026, the
   four longest client names run two lines and 51px at 11px, and ran two lines
   and 48px at the 10px this carried until that day's ruling — the wrap was
   never the point size. Every micro label is 11px (MC, 2026-09-23). */
@media (max-width: 767px) {
  /* The longest banner line in the portfolio runs 51 characters with
     "Prepared for" and "Confidential". It wraps to two lines here, as it did
     before the ruling. What the eased tracking buys, measured across all 251
     banner lines at 375px on Sep 23, 2026: 195 hold one line against 134 at
     the full tracking, so it rescues 61 names from a wrap. Two or three names
     will not show it — the first sample taken here showed no change at all. */
  .banner { font-size: 11px; letter-spacing: 0.06em; padding: var(--s2); }
}

/* ---------- nav ring — the progressive reveal ---------- */
.ring {
  /* STATIC on the phone, sticky from tablet up. A phase carrying eight
     documents wraps to three rows at 375px — roughly 264px, a third of the
     viewport — and pinning that would hold a third of the screen hostage for
     the whole read. Static, it shows every document when you are at the top and
     gets out of the way once you start reading, which is when you want the
     screen. On a wide viewport the same nav is two rows and pinning is a
     convenience rather than a tax. */
  position: static;
  background: var(--field);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) { .ring { position: sticky; top: 0; z-index: 50; } }
.ring .inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s3) var(--gutter);
  display: flex; align-items: center; gap: var(--s2) var(--s5);
  justify-content: space-between; flex-wrap: wrap;
}
@media (min-width: 768px) { .ring .inner { flex-wrap: nowrap; } }
/* The wordmark composes from the harperOS atom: ink body, green `_` terminal.
   No underline — the shipped shell's `a` carries no border. */
.wordmark {
  /* sized to the website wordmark (28px, brand.ts .bp .wordmark) — MC 2026-07-29 */
  font-family: var(--font-display); font-size: 28px; color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1; white-space: nowrap; border-bottom: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.wordmark .u { color: var(--accent); }
.wordmark:hover { color: var(--ink); opacity: 1; }

/* Steps are a segmented tab bar on the phone — a full-width row of three equal
   cells under the wordmark, every document always visible, labels centered,
   numbers hidden (the label is the tab; the number returns at desktop). No
   scroller, no hamburger, no ragged wrap: three peers get three equal cells
   (Norman: visible controls; the segmented control is the standard pattern
   for a small fixed set). One inline row from 768 up. */
.steps {
  /* auto-fill, not a fixed 3: a phase carries however many documents it carries,
     and the row has to hold 3 for one client and 6 for another without either
     one being hand-tuned. At 375px the 104px floor still yields 3 columns, so
     the three-document families render exactly as they did before. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%; align-items: stretch;
}
.steps .step { justify-content: center; padding: var(--s3) var(--s1); white-space: normal; text-align: center; }
.steps .step .n { display: none; }
@media (min-width: 768px) {
  /* wrap, not nowrap: the delivery phase grows by one document every week, and
     a row that cannot wrap pushes the later updates off the right edge where
     the page's overflow guard hides them completely. */
  .steps { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; width: auto; }
  .steps .step { justify-content: flex-start; padding: var(--s3); }
  .steps .step .n { display: inline; }
}
.step {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: var(--s3); min-height: 44px;
  border-bottom: 2px solid transparent; color: var(--ink-muted);
  cursor: pointer;
}
.step .n { color: var(--ink-subtle); }
.step:hover { color: var(--ink); border-bottom-color: var(--rule); }
.step:active { color: var(--ink); }
.step[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
/* A locked step is genuinely inert: muted, no pointer, not focusable, not a link
   target. A thing that does nothing never wears the costume of a control.
   Canon §Interaction (Affordance — the honest signifier). */
.step.locked {
  color: var(--ink-subtle); opacity: 0.55;
  cursor: default; pointer-events: none;
}
.legend { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- tier 1 — the phase tabs (Proposal / Delivery) ----------
   A client portal has two lives: the documents that won the work, and the
   record of the work being delivered. They are different reading contexts, so
   they get different sections rather than one flat list of eleven links — and
   the phase is carried in the URL (/proposal/…, /delivery/…) so the address bar
   says the same thing the nav does.

   The phase tab sits beside the wordmark on row one; the documents of the
   ACTIVE phase sit on row two. Switching phase lands on that phase's first
   document, so the second row is always the row you are reading in. */
.phases { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.phase {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s3) var(--s2); color: var(--ink-subtle);
  border-bottom: 2px solid transparent;
}
.phase:hover { color: var(--ink); }
.phase[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
/* A portal before signature has a proposal and no delivery yet. The Delivery
   phase still shows — it is what comes next, and a client should see the whole
   arc — but it is genuinely inert: muted, no pointer, not focusable, not a link
   target. A thing that does nothing never wears the costume of a control.
   Canon §Interaction (Affordance — the honest signifier). */
.phase.locked {
  color: var(--ink-subtle); opacity: 0.55;
  cursor: default; pointer-events: none;
}

/* ---------- tier 2 — the documents inside the active phase ----------
   A hairline above it, so the two tiers read as one nav block with an internal
   division rather than as two stacked bars. */
/* ---------- a wide table scrolls, never clips ----------
   html/body carry overflow-x:hidden (the seven laws, law 5). That guard stops
   the PAGE scrolling sideways, which also means anything wider than the
   viewport is silently cut off with no indication it exists. A data table is
   the usual offender. Giving it its own scroll box is the opt-in the law
   provides for. Canon: .claude/rules/content/mobile-first.md, law 7. */
.tscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tscroll > table { min-width: 100%; }

.subring { border-top: 1px solid var(--rule-soft); }
.subring .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}

/* ---------- hero ---------- */
.hero { padding: var(--s8) 0 0; }
/* a hero sitting directly on a band keeps the site hero's bottom space, so its last line never touches the band */
.hero:has(+ .band) { padding-bottom: var(--s7); }
@media (min-width: 1024px) { .hero:has(+ .band) { padding-bottom: var(--s8); } }
.hero h1 { max-width: 18ch; }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--s6); }
/* the declared small-mono tier — replaces the inline style= repetitions */
.meta-sm { font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); letter-spacing: 0.04em; margin-top: var(--s3); }
/* a small explanatory note under a figure or control */
/* the note, as the approved pages render it — 15px muted + accent bar. The
   approved client pages override the old 13px ink-subtle note with
   this treatment everywhere it appears (R3, MC's ruling pending; 13px fails
   his not-too-small-to-read anchor). */
.note { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin-top: var(--s3); padding-left: var(--s4); border-left: 2px solid var(--accent); max-width: 60ch; }

/* ---------- cards / grid (mobile-first: 1 col, enhance up) ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card { background: var(--alt); border: 1px solid var(--rule); padding: var(--s5); }
.card h4 { margin-bottom: var(--s2); }
.card .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-label, var(--accent)); }
/* Question card: mono label, question at body tier, and a designed answer void.
   The void is what makes the neutral-fill rung honest — the card is visibly half-full. */
.card .q { font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink); margin-top: var(--s3); }

/* verbatim / quote */
.quote { border: 1px solid var(--rule); border-left: 2px solid var(--accent); background: var(--alt); padding: var(--s5) var(--s6); font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: var(--s6); max-width: 60ch; }
.quote .who { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); margin-top: var(--s3); }

/* the Our -> Your arc marker */
.arc { display: flex; flex-wrap: wrap; gap: var(--s2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-subtle); margin-bottom: var(--s5); }
.arc b { color: var(--accent-label, var(--accent)); font-weight: 500; }

/* rows */
.row { display: grid; grid-template-columns: 1fr; gap: var(--s3); padding: var(--s5) 0; border-top: 1px solid var(--rule-soft); }
@media (min-width: 768px) { .row { grid-template-columns: 1fr 1.4fr; gap: var(--s6); } }
.row .k { font-weight: 600; }

/* ---------- calculator ----------
   NOT a dark panel: the footer is the only dark surface (canon §Surface rule).
   It reads as a card — the square atom, hairline border, generous space. */
.calc {
  background: var(--alt); border: 1px solid var(--rule);
  color: var(--ink); padding: var(--s4); margin-top: var(--s6);
}
@media (min-width: 768px) { .calc { padding: var(--s6); } }
.calc label {
  display: block; font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-subtle); margin: var(--s5) 0 var(--s2);
}
/* Tap targets: every control clears 44px on a touch surface. */
.calc input[type=range] {
  width: 100%; accent-color: var(--accent);
  min-height: 44px; cursor: pointer;
}
.calc select {
  width: 100%; background: var(--field); color: var(--ink);
  border: 1px solid var(--rule); padding: var(--s3);
  font-family: var(--font-mono); font-size: 14px;
  min-height: 44px; cursor: pointer; border-radius: 0;
}
.calc select:hover { border-color: var(--ink); }
.calc .out { font-family: var(--font-display); font-size: clamp(32px, 6vw, 48px); color: var(--accent-text, var(--accent)); margin-top: var(--s5); line-height: 1.1; }
.calc .upside { font-family: var(--font-mono); font-size: 14px; color: var(--ink-subtle); margin-top: var(--s2); }
.calc .upside b { color: var(--ink); font-weight: 500; }
.calc .val { font-family: var(--font-mono); color: var(--ink); }
/* Confidence is encoded in type weight and label, not colour: the status palette is
   scoped to diffs, charts and ops dashboards — never a marketing surface.
   Canon §Tokens ("The scope is the rule"). */
.calc .conf {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px; margin-left: var(--s2);
  border: 1px solid currentColor; vertical-align: middle;
}
.calc .conf.high { color: var(--ink); font-weight: 500; }
.calc .conf.med  { color: var(--ink-muted); }
.calc .conf.low  { color: var(--ink-subtle); }
.calc .conf-note { font-size: 13px; color: var(--ink-subtle); margin-top: var(--s2); min-height: 1.2em; }

/* ---------- swatches — a design system's colors, each shown as it ships ----------
   The chip is filled from the token itself, so it shows what the brand overlay
   loads; the value printed beside it is read from the same file. */
.swatches { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 768px) { .swatches.cols-2 { grid-template-columns: 1fr 1fr; } .swatches.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.sw { background: var(--alt); border: 1px solid var(--rule); padding: var(--s4); }
.sw .chip { display: block; height: 64px; border: 1px solid var(--rule); margin-bottom: var(--s3); }
.sw .swn { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.sw .swv { margin: var(--s1) 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.sw .swu { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.sw .swc { margin: var(--s2) 0 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-subtle); }
.chip.t-field { background: var(--field); } .chip.t-alt { background: var(--alt); } .chip.t-ink { background: var(--ink); }
.chip.t-ink-muted { background: var(--ink-muted); } .chip.t-ink-subtle { background: var(--ink-subtle); }
.chip.t-rule { background: var(--rule); } .chip.t-rule-soft { background: var(--rule-soft); }
.chip.t-accent { background: var(--accent); } .chip.t-accent-soft { background: var(--accent-soft); }
.chip.t-accent-text { background: var(--accent-text, var(--accent)); }
.chip.t-accent-label { background: var(--accent-label, var(--accent)); }

/* ---------- entries — an index of pieces, one row each, the whole row the link ---------- */
.entries { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.entry { display: block; position: relative; padding: var(--s5) var(--s7) var(--s5) 0; border-bottom: 1px solid var(--rule); color: inherit; }
.entry:hover { border-bottom-color: var(--ink); }
.entry .ek { margin: 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); }
.entry .et { margin: var(--s2) 0 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); max-width: var(--measure); }
.entry .ex { margin: var(--s2) 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); max-width: 60ch; }
.entry .earr { position: absolute; right: var(--s4); top: var(--s5); width: 20px; height: 20px; color: var(--accent-text, var(--accent)); transition: transform .2s ease; }
.entry:hover .earr { transform: translateX(4px); }
/* entries · feature: the entries an index leads with, as white cards in whole rows; the arrow sits
   at the card's foot, the title on the subsection rung */
.entries.feature { display: grid; grid-template-columns: 1fr; gap: var(--s4); border-top: none; }
.entries.feature .entry { display: flex; flex-direction: column; min-width: 0; background: var(--alt); border: 1px solid var(--rule); padding: var(--s5); transition: border-color .2s ease; }
.entries.feature .entry:hover { border-color: var(--ink); }
.entries.feature .entry .et { font-size: 18px; }
.entries.feature .entry .earr { position: static; margin-top: auto; padding-top: var(--s5); }
@media (min-width: 768px) { .entries.feature.n2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .entries.feature.n3 { grid-template-columns: repeat(3, 1fr); } }
/* entries · table: a dated index as rows (date, an optional category, the title), each row one link.
   Stacked on a phone; columns from the tablet up. */
.entries.etable { border-top: 1px solid var(--rule); }
.etable .trow { display: grid; grid-template-columns: 1fr; gap: 4px; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.etable .thead { display: none; }
.etable .tdate, .etable .tcat, .etable .thead span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); }
.etable .ttitle { font-size: 16px; line-height: 1.45; color: var(--ink); }
.etable a.trow:hover .ttitle { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .etable .trow { grid-template-columns: 160px 1fr; gap: var(--s5); align-items: baseline; }
  .etable.wcat .trow { grid-template-columns: 160px 180px 1fr; }
  .etable .thead { display: grid; padding: var(--s3) 0; }
}
/* entries · course: one card per course, its numbered lessons and a start link at the foot */
.entries.course { display: grid; grid-template-columns: 1fr; gap: var(--s4); border-top: none; margin-top: var(--s6); }
@media (min-width: 768px) { .entries.course { grid-template-columns: repeat(2, 1fr); } }
.ccard { display: flex; flex-direction: column; background: var(--alt); border: 1px solid var(--rule); padding: var(--s6) var(--s5); }
.ccard .chead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.ccard .ek { margin: 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); }
.ccard .cnum { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.ccard .ct { margin-top: var(--s2); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; }
.ccard .ct:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccard .ex { margin: var(--s2) 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.ccard .clessons { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.ccard .clessons a { display: flex; gap: var(--s3); min-height: 44px; padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration: none; }
.ccard .clessons a:hover { color: var(--accent-text, var(--accent)); }
.ccard .clessons .ln { flex: none; min-width: 20px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.ccard .cfoot { margin-top: auto; padding-top: var(--s5); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.ccard .cstart { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ccard .cstart .carr { width: 16px; height: 16px; color: var(--accent-text, var(--accent)); transition: transform .2s ease; }
.ccard .cstart:hover .carr { transform: translateX(3px); }
.ccard .ccount { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); }

/* ---------- the article register — the reading ladder a long piece is set in ----------
   A page takes it with register: "article". The headline rungs step down, because an
   article is read straight through rather than scanned, and its sections run on with
   no rule between them. */
/* the article register, every size on a rung of the Visual Design System's table (the creative
   director's review, Oct 2, 2026: 52, 23 and 17.28 sat on no rung): the title on the private
   overview's title rung, a section on the pull-line rung, a sub-section on the H3 rung, the
   subhead (a section's first .body) on the 18px rung, and the running text after it at 16px */
.article h1 { font-size: clamp(32px, 4.8vw, 48px); line-height: 1.1; }
.article h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; }
.article h3 { font-family: var(--font-body); font-weight: 600; font-size: clamp(20px, 2.6vw, 24px); line-height: 1.25; }
.article .body { font-size: 18px; line-height: 1.7; }
.article .body.sub, .article .wrap .body ~ .body { font-size: 16px; line-height: 1.7; }
/* running text holds to 60 characters on a page read straight through, its first paragraph too */
.article .wrap .body { max-width: 60ch; }
.article section { border-top: none; padding: var(--s6) 0; }
.article section:first-of-type { padding-top: var(--s4); }
.article .hero { padding-bottom: var(--s5); }
.byline { display: flex; align-items: center; gap: var(--s4); padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.byline .avatar { width: 44px; height: 44px; object-fit: cover; display: block; flex: none; }
.byline .who { font-size: 16px; color: var(--ink); }
.byline .who .role { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); margin-top: 4px; }
.byline .when { margin: 0 0 0 auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }
.signoff { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.signoff .label { margin: 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); }
.signoff .name { margin: var(--s2) 0 0; font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.signoff .name .role { display: block; font-family: var(--font-body); font-size: 14px; color: var(--ink-subtle); margin-top: 2px; }

/* ---------- the design-system blocks: type specimen, space scale, marks, actions, icons ----------
   Each draws with the system's own rules: a specimen row renders a real heading or the
   real block, a bar takes its step's own token, a mark sits on the ground it is made for. */
.tspec { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.tsr { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.tsr .tsn { margin: 0; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.tsr .tss { margin: var(--s1) 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.tsr .tsx { margin-top: var(--s3); }
.tsr .tsx > * { margin-top: 0; }
.tsr .tsx .card { max-width: 480px; }
.tsface { margin: 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.3; color: var(--ink); }  /* the pull-line rung */
.ff-display { font-family: var(--font-display); } .ff-body { font-family: var(--font-body); } .ff-mono { font-family: var(--font-mono); }
.spscale { margin-top: var(--s6); }
.spr { display: grid; grid-template-columns: 72px 56px 1fr; align-items: center; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--rule-soft); }
.spr code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
/* inline code on the public site: the mono family, a step under the text around it */
.site code { font-family: var(--font-mono); font-size: .9em; }
.spr .spv { font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }
.spbar { display: block; height: 12px; background: var(--ink-muted); }
.spbar.s1 { width: var(--s1); } .spbar.s2 { width: var(--s2); } .spbar.s3 { width: var(--s3); } .spbar.s4 { width: var(--s4); } .spbar.s5 { width: var(--s5); }
.spbar.s6 { width: var(--s6); } .spbar.s7 { width: var(--s7); } .spbar.s8 { width: var(--s8); } .spbar.s9 { width: var(--s9); } .spbar.s10 { width: var(--s10); }
.marks { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 768px) { .marks.cols-2 { grid-template-columns: 1fr 1fr; } .marks.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
/* scoped under .marks: the today/tomorrow label and the old metagrid label share the name
   .mk, and an unscoped rule drew both as white boxes (Oct 1, 2026) */
.marks .mk { margin: 0; background: var(--alt); border: 1px solid var(--rule); }
.marks .mk .mkimg { height: 160px; display: flex; align-items: center; justify-content: center; padding: var(--s5); border-bottom: 1px solid var(--rule); }
.marks .mk.g-field .mkimg { background: var(--field); } .marks .mk.g-box .mkimg { background: var(--alt); } .marks .mk.g-ink .mkimg { background: var(--ink); }
.marks .mk img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.marks .mk figcaption { padding: var(--s4); }
.marks .mk .swn { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.marks .mk .swu { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.marks .mk .swv { margin: var(--s2) 0 0; font-family: var(--font-mono); font-size: 12px; }
.ctas .tlink { align-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.icongrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 768px) { .icongrid.cols-3 { grid-template-columns: repeat(3, 1fr); } .icongrid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.icn { background: var(--alt); border: 1px solid var(--rule); padding: var(--s4); }
.icn .ico { display: block; }
.icn .swv { margin: var(--s3) 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.icn .swu { margin: var(--s1) 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- footer — the one dark surface, ink, every page (canon §Surface rule) ---------- */
footer { background: var(--ink); color: var(--field); padding: var(--s8) 0 var(--s7); }
footer a { color: var(--field); }
footer .mark { font-family: var(--font-display); font-size: 30px; color: var(--field); line-height: 1; letter-spacing: -0.01em; }
footer .mark .u { color: var(--accent); }
/* the tagline is said, not named: Inter at 14px, as on the homepage and About (MC 2026-09-17) */
footer .line { margin-top: var(--s3); font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--footer-line); }
footer .conf { margin-top: var(--s6); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--footer-conf); }
/* the link row a family declares (the site: Terms, Privacy, Support); each link a 44px tap target */
footer .flinks { margin-top: var(--s2); display: flex; flex-wrap: wrap; column-gap: var(--s5); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
footer .flinks a { color: var(--footer-line); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- internal build marker ----------
   Inert scaffolding, not a callout: green marks an element, it never floods an area
   (canon §Tokens). Strip these before any promotion to a client-facing surface. */
.stub-note {
  background: transparent; border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: var(--s4); font-size: 13px; color: var(--ink-subtle);
  font-family: var(--font-mono); line-height: 1.5; margin-top: var(--s5);
}

/* ---------- the hero meta-grid — who / by / when as a vertical ruled block ----------
   The family-standard hero treatment,
   corrected from a horizontal-columns variant on MC's call, 2026-07-25: labeled rows
   read vertically, label column beside the value, a hairline rule above and below —
   the formality of a title page. The document top is eyebrow · h1 at system scale ·
   one body statement · this block. No covernote. */
.metagrid { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); margin-bottom: var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 760px; }
.metagrid > div { display: grid; grid-template-columns: 1fr; gap: var(--s1); }
@media (min-width: 768px) { .metagrid > div { grid-template-columns: 150px 1fr; gap: 0 var(--s6); align-items: baseline; } }
.metagrid .mk { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.metagrid .mv { font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: 0; }

/* ---------- the continue block — the document chain's forward door ----------
   At the end of a document, before the footer: the next document, prominent —
   never expect the reader to find the top nav (MC 2026-07-25). The whole block
   is the link; one green — the arrow, the direction of travel; hover is the
   border waking and the arrow leaning, nothing louder. */
.continue { display: block; border: 1px solid var(--rule); padding: var(--s5); margin-top: var(--s7); text-decoration: none; transition: border-color 0.2s ease-out; }
.continue:hover { border-color: var(--ink-muted); }
.continue .ck { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); display: block; }
.continue .cn { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); line-height: 1.2; color: var(--ink); display: block; margin-top: var(--s2); }
.continue .cn .carr { color: var(--accent-text, var(--accent)); margin-left: var(--s3); display: inline-block; transition: transform 0.2s ease-out; }
.continue:hover .cn .carr { transform: translateX(4px); }
.continue .cl { font-size: 15px; line-height: 1.5; color: var(--ink-muted); display: block; margin-top: var(--s2); }
@media (min-width: 768px) { .continue { padding: var(--s6); } }

/* ---------- the dense ladder — SCOPED to tech-brief-class reference surfaces ONLY ----------
   Client documents (overview, proposal, approach, delivery plan, the portal pages) read
   at the system scale above — they are the product and they do not whisper (MC audit
   2026-07-25; one family was reading at 40px section heads while the other client
   families and the marketing site read at 60). Values are the shipped
   tech-brief family (precedented, not invented). A genuinely dense reference page opts in
   with <body class="dense">; it never re-types its own sizes. (MC ruling 2026-07-16:
   60px section heads overwhelm a content-heavy TECH-BRIEF page — that scope, no wider.) */
.dense h1 { font-size: clamp(40px, 8vw, 64px); }  /* was 52 — misencoded; every shipped page overrode it */
.dense h2 { font-size: clamp(32px, 5.5vw, 40px); }
.dense h3 { font-size: clamp(20px, 2.6vw, 24px); }
.dense .body { font-size: 18px; }
.dense .wrap .body ~ .body { font-size: 16px; }

/* ---------- the bulleted list — body copy with the green square marker ---------- */
.list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); max-width: 60ch; }
.list li { font-size: 16px; line-height: 1.55; color: var(--ink-muted); position: relative; padding-left: var(--s4); }
.list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: var(--accent); }
.list li strong { color: var(--ink); font-weight: 600; }

/* Container ladder: the hairline rung — a defined set, grouped, still of the page.
   Distinct from .card (neutral fill = an object on the page). */
.set { border: 1px solid var(--rule); padding: var(--s5); margin-top: var(--s6); max-width: 68ch; }
.set .list { margin-top: 0; max-width: none; }

/* Themes grid — ported from an approved client proposal's "what you are looking to
   unlock" module. Two adaptations: .tl takes ink-subtle (accent stays reserved for actions),
   and .by is omitted — naming a handling agent presumes a solution, which Orientation
   has not earned. */
.themes { margin-top: var(--s6); display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.theme { padding: var(--s6); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tl { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--accent-label, var(--accent)); margin-bottom: var(--s5); }
.ti { padding: var(--s4) 0; border-top: 1px solid var(--rule-soft); }
.ti:first-of-type { border-top: none; padding-top: 0; }
.ti .p { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.ti .s { font-size: 14px; color: var(--ink-muted); line-height: 1.45; margin-top: var(--s1); }
@media (min-width: 768px) { .themes { grid-template-columns: repeat(2, 1fr); } }

/* ---------- level-2 dropdown — a step with children opens VERTICALLY ----------
   The Anthropic model, ratified by MC 2026-08-13 (SPEC_2026-08-13_WB_MC_Portal-
   Nav-Level2-Dropdown): one horizontal row of level-1 steps; a step whose section
   holds more than one document becomes a trigger — label + chevron (down closed,
   up open) — and its children list vertically in a panel under it. Never a second
   horizontal row of documents. Current-location marking is unchanged: the parent
   trigger carries aria-current on a child page (green underline via the existing
   .step rule), and inside the panel the current child is an inert accent span —
   a page never links to itself (the 2026-08-06 audit rule, carried forward).
   No shadow on the panel — Restraint forbids it; the hairline border separates. */
.drop { position: relative; display: flex; }
.dropbtn { background: none; border-top: 0; border-left: 0; border-right: 0; flex: 1 1 auto;
  /* explicit, not font:inherit — this rule sits after .step in the cascade, so an
     inherit here overrides the step's mono with the body face (the wrong-font Demo). */
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.chev { display: inline-block; transition: transform 120ms ease; color: var(--ink-subtle); }
.drop.open .chev { transform: rotate(180deg); }
.menu {
  /* right-anchored: the steps live at the right end of the nav, so a left-anchored
     panel walks off the viewport edge and the overflow guard clips it silently.
     Pure white, not the warm-white field: the panel floats over field-colored
     content, and field-on-field has no edge (MC, 2026-08-13). Hover is the light
     green — grey-on-grey read as no signal. */
  display: none; position: absolute; top: 100%; right: 0; z-index: 60;
  min-width: 260px; background: var(--alt); border: 1px solid var(--rule);
  padding: var(--s2) 0;
}
.drop.open .menu { display: block; }
@media (hover: hover) {
  .drop:hover .menu, .drop:focus-within .menu { display: block; }
  .drop:hover .chev, .drop:focus-within .chev { transform: rotate(180deg); }
}
.menu a, .menu .cur {
  display: block; padding: var(--s3) var(--s4);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: none; white-space: nowrap;
}
.menu a:hover { color: var(--ink); background: var(--accent-soft); }
.menu .cur { color: var(--accent-text, var(--accent)); }
/* On the phone the panel spans the nav, not the cell — the anchored panel would
   clip at the right edge for a late step; the full-width panel is the Anthropic
   mobile behavior and needs no second layout. */
@media (max-width: 767px) {
  .ring .inner { position: relative; }
  .drop { position: static; }
  .menu { left: 0; right: 0; min-width: 0; }
}

/* ---- block layer ----
   The closed block vocabulary of the client-page block system. Every class the
   renderer (scripts/render-client-pages.mjs) emits is defined HERE and only here,
   at canon values. A generated page carries no <style> of its own — that is the
   invariant: you can change blocks, you cannot change design.
   Contract: SPEC_2026-08-13_BR_MC_Client-Page-Block-System.md (brand plugin).
   Existing shell classes above (.hero, .card, .grid, .tscroll, .note, .quote,
   .eyebrow, .body) are part of the vocabulary and are not re-declared. */

/* lockup sub-label (Law 2: the rung is 12px/500) */
/* ---- the site shell (shell: "site") — the marketing surface ----
   The one button treatment: ink fill, alt text, square. Colors are tokens
   (rule 5); the nav variant is smaller, riding inside the ring. */
.ctas { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn { font-family: var(--font-body); font-weight: 500; font-size: 15px; padding: 14px 24px; display: inline-block; background: var(--ink); color: var(--alt); border: 1px solid var(--ink); text-decoration: none; line-height: 1; transition: opacity 0.15s ease; }
.btn:hover { opacity: 0.85; }
/* the ghost button: the quieter second action beside the primary one */
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { opacity: 1; background: var(--ink); color: var(--alt); }
/* a person's portrait: a 160px square on the accent ground, above the card's text */
.card .photo { width: 160px; height: 160px; object-fit: cover; display: block; background: var(--accent); margin-bottom: var(--s4); }
nav.ring .steps .btn.nav-cta { padding: 10px 18px; font-size: 14px; color: var(--alt); }

/* ---- the site shell nav: mobile hamburger (nav.ring.site only) ----
   Desktop shows the links row; under 768 the hamburger takes over.
   Structure only — colors are tokens. */
nav.ring.site .m-menu { display: none; position: relative; }
nav.ring.site .m-menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 7px; align-items: stretch; padding: 14px 10px; -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
nav.ring.site .m-menu > summary::-webkit-details-marker { display: none; }
nav.ring.site .m-menu > summary span { display: block; height: 2px; width: 100%; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
nav.ring.site .m-menu[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.ring.site .m-menu[open] > summary span:nth-child(2) { opacity: 0; }
nav.ring.site .m-menu[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
nav.ring.site .m-panel { position: absolute; right: 0; top: calc(100% + 16px); min-width: 220px; background: var(--field); border: 1px solid var(--rule); display: flex; flex-direction: column; z-index: 60; }
nav.ring.site .m-panel a { padding: 16px 24px; color: var(--ink); border-bottom: 1px solid var(--rule); font-size: 15px; text-decoration: none; }
nav.ring.site .m-panel a:last-child { border-bottom: none; color: var(--accent-label, var(--accent)); }
@media (max-width: 767px) {
  nav.ring.site .steps { display: none; }
  nav.ring.site .m-menu { display: block; }
}
/* the site nav from 768px: the wordmark left, the links centred in the space between, the booking
   button right, as a product site sets it (MC, Oct 3, 2026: "crammed to the left", the Gumloop bar) */
@media (min-width: 768px) {
  nav.ring.site .steps { flex: 1; display: flex; align-items: center; gap: var(--s6); }
  nav.ring.site .steps .step:first-child { margin-left: auto; }
  nav.ring.site .steps .nav-cta { margin-left: auto; }
}

/* ---- the site register (body.site) — the marketing surface breathes ----
   One register per surface (Law 5). Wider section air, muted statements,
   air under the heading. The ladder, the faces, and the 16px floor are
   untouched — this register spends space and color, never new sizes. */
body.site section { padding: var(--s8) 0; }
body.site .hero { padding: var(--s8) 0 var(--s7); }
/* hero parent: the page this one belongs under, one quiet line above the label, a full tap target */
.hero .parent { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 var(--s2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text, var(--accent)); text-decoration: none; }
.hero .parent:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the site hero's subtitle is one size: a body line under the statement continues it */
body.site header.hero .body.sub { font-size: 20px; line-height: 1.55; }
/* article register: an untitled opening section continues the standfirst at one paragraph gap */
body.site.article header.hero.cont { padding-bottom: 0; }
body.site.article header.hero.cont + section { padding-top: 0; }
body.site .wrap h2 { margin-bottom: var(--s5); }
body.site .wrap .body { color: var(--ink-muted); }
body.site .agenda { border-top: none; }
body.site .agenda .d-step { padding: var(--s6) 0; }
@media (min-width: 768px) {
  body.site section { padding: var(--s9) 0; }
  body.site .hero { padding: var(--s9) 0 var(--s8); }
}
/* the article register keeps its own rhythm on the site: its sections run on at s6, and the
   site's marketing air never reaches a page read straight through (the creative director's
   review, Oct 2, 2026: 272px between an essay's sections) */
body.site.article section { padding: var(--s6) 0; }
body.site.article section:first-of-type { padding-top: var(--s4); }
body.site.article .hero { padding-bottom: var(--s5); }
body.site.article section > .wrap { padding-top: 0; padding-bottom: 0; }
/* a standalone control is a 44px target (Law 8): a card's profile link, the hero's note link */
.cmeta a, .hero .note a { display: inline-flex; align-items: center; min-height: 44px; }

.catlabel { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent-label, var(--accent));
  margin: var(--s8) 0 var(--s2); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.catlabel.first { border-top: none; padding-top: 0; margin-top: var(--s7); }
/* a chips label inside a function band names more of the same function, so it takes no
   divider and sits close to what it extends, in the label gray (Law 4: green marks the band) */

/* list block — bullets are body copy (16px), green square marker */
.blist { list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s3); max-width: 62ch; }
.blist li { font-size: 16px; line-height: 1.55; color: var(--ink-muted);
  position: relative; padding-left: var(--s4); }
.blist li::before { content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; background: var(--accent); }
.blist li strong { color: var(--ink); font-weight: 600; }

/* table block — mono 11 header, 16px body, no fills (Tufte) */
.ptable { width: 100%; border-collapse: collapse; margin-top: var(--s5); }
.ptable td { padding: var(--s4); border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.ptable td.term { font-weight: 600; color: var(--ink); width: 190px; }
/* a description cell: the body of the row, after its name; it takes the cell's own rule and fills
   the width the name and the amount leave (the open item "a table's middle cells", Oct 2, 2026) */
.ptable td.desc { color: var(--ink-muted); }
.ptable td.amt { text-align: right; font-family: var(--font-mono); white-space: nowrap; width: 120px; color: var(--ink); }
.ptable tr.head td { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-subtle); font-weight: 500;
  border-bottom: 1px solid var(--rule); padding-bottom: var(--s3); }

/* meta block — ONE spelling; the .metagrid above is legacy, kept for unmigrated pages */
.meta-grid { margin-top: var(--s7); display: grid; grid-template-columns: 1fr;
  gap: 2px var(--s4); padding-top: var(--s6); border-top: 1px solid var(--rule); max-width: 760px; }
.meta-grid dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-subtle); padding-top: 3px; }
.meta-grid dd { font-size: 15px; color: var(--ink); margin: 0; }
.meta-grid dd .name { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.3; }
@media (min-width: 768px) { .meta-grid { grid-template-columns: 150px 1fr; gap: var(--s3) var(--s6); } }

/* card block internals — kicker 11 mono (box-label rung), title Inter 600 16 (a name is a point title; Ponomar opens a page or a section only), body 16 */
.card .kick { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-subtle); margin-bottom: var(--s2); }
.card .nm { font-family: var(--font-body); font-size: 16px; font-weight: 600;
  line-height: 1.3; color: var(--ink); }
/* component copy: 15px muted, the box-text rung */
.card .ln { font-size: 15px; color: var(--ink-muted); margin-top: var(--s2); line-height: 1.5; }
.card ul { list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s2); }
.card li { font-size: 16px; color: var(--ink-muted); position: relative;
  padding-left: var(--s4); line-height: 1.5; }
.card li::before { content: ''; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; background: var(--accent); }

/* chip row — inert labels, never controls (Affordance) */
/* logos — the proof strip of client marks: grayscale, quiet, whole rows */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); align-items: center; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule); max-width: var(--measure); }
@media (min-width: 768px){ .logos { grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s7); } }
.logos img { height: 30px; width: auto; max-width: 165px; object-fit: contain; justify-self: center; filter: grayscale(1); opacity: 0.42; }

/* chips — a bordered mono box. The fill is ALWAYS white (--alt), never the page
   field: a box the same color as the page behind it reads as a hairline outline
   rather than an object, and loses legibility. Ratified by MC 2026-08-14 after
   the same .chip shipped white on every proposal and grey on every delivery
   plan (RC1: one block, two page-local definitions). --alt is element fill;
   --field is the page. A chip is an element. */
.chips { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips .chip, .toolrow .chip, .ecap .chip { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
  border: 1px solid var(--rule); background: var(--alt); padding: var(--s2) var(--s3); }

/* sequence block — numbered steps; step title is a NAME (Law 6), display face 20 */
.agenda { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.agenda .d-step { display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.agenda .sn { font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; color: var(--accent-label, var(--accent)); }
.agenda .st { font-family: var(--font-display); font-size: 20px; font-weight: 400;
  color: var(--ink); line-height: 1.15; }
.agenda .sd { font-size: 16px; color: var(--ink-muted); margin-top: var(--s2);
  line-height: 1.5; max-width: 62ch; }

/* quote attribution (block layer form) */
.quote .qby { margin-top: var(--s4); font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-subtle); }

/* block layer — card extensions (quote, price, trailing meta line) */
.card .cq { font-size: 16px; line-height: 1.5; color: var(--ink); margin-top: var(--s3); font-style: italic; }
.card .pr { font-family: var(--font-mono); font-size: 22px; color: var(--ink); margin-top: var(--s3); }
.card .pr span { font-size: 13px; color: var(--ink-subtle); }
.card .cmeta { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-subtle); }
.card .cmeta strong { color: var(--ink); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; }
.card .pr .was { font-size: 14px; color: var(--ink-subtle); text-decoration: line-through; margin-right: var(--s2); }

/* ============================================================
   THE DERIVED BLOCK LAYER — lifted VERBATIM from the approved
   client pages (the block-library loop, 2026-08-14).
   Source of truth: the computed rendering MC approved. Two laws:
   · Never define --measure — the approved pages reference it
     undefined, so it resolves to nothing; that IS the approved
     rendering (full-width headings, 60ch only on prose).
   · Values here follow the approved-page anchor; MC's five pending
     rulings (R1-R5, calibration SPEC) may adjust them — until
     ruled, the approved page wins.
   Constructs: compare (.vs) · stats · price/boxes (.bx/.tbox/.lvl)
   · caveat · agent cards (.acards/.acard) · agent-spec (.enc/.erail/.tt)
   · panel (.fnb/.fgroup) · prooflist (.plist) · inline steps
   (.howsteps) · report table (.tbl) · sublab · figcap · pull · op
   · the reveal behavior (.seq under .anim, reduced-motion-gated).
   ============================================================ */
.vs, .fnb, .plist, .stats, .trio, .continue, .wrap .grid { max-width: var(--measure); }

.figcap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-muted); max-width: 60ch; line-height: 1.5; margin-top: var(--s3); }

/* ---- the assessment table (.tbl) — the construct this section's manifest has
   named since 2026-08-14 and never defined. Lifted from the approved Dashlane
   marketing and product assessments (2026-09-29), which carried it in their own
   page styles, so it reached no other surface and no ruling ever swept it.
   Two values move on the way in, and both are MC's ruling of 2026-09-23 that
   every micro label sits on one rung: the column head 10.5px -> 11px and the
   source line 10px -> 11px. Everything else is the approved page verbatim.
   .dl is the subject's column — the one the whole comparison is about. ---- */
.tbl { margin-top: var(--s5); overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

.tbl table { border-collapse: collapse; width: 100%; min-width: 920px; table-layout: fixed; background: var(--alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.tbl th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-subtle); border-bottom: 1px solid var(--rule); padding: var(--s3) var(--s4); }

.tbl th.dl { background: var(--accent-soft); color: var(--accent-label, var(--accent)); }

.tbl td { border-bottom: 1px solid var(--rule-soft); padding: var(--s3) var(--s4); vertical-align: top; line-height: 1.5; font-size: 13px; color: var(--ink-muted); overflow-wrap: break-word; }

.tbl td:first-child { font-weight: 600; color: var(--ink); font-size: 13.5px; }

.tbl td.dl { background: color-mix(in srgb, var(--accent-soft) 45%, white); color: var(--ink); }

.tbl.num td { font-family: var(--font-mono); font-size: 12.5px; }

.tbl.num td:first-child { font-family: var(--font-body); font-size: 13.5px; }

.tbl.num td a { white-space: nowrap; }

.tbl td strong { color: var(--ink); font-weight: 600; }

.tbl td strong.vgood { color: var(--accent-text, var(--accent)); font-weight: 600; }

.tbl td .src { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); margin-top: 4px; }

.tbl td .cb { display: block; position: relative; padding-left: 12px; }

.tbl td .cb::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: var(--accent); }

.tbl td .cb + .cb { margin-top: 6px; }

/* The verdict glyph (.gl up/dn/op) that leads an assessment's subhead is defined
   in THE PAGE FRAME below; the subhead block emits it. */

.pull, .wrap .quote { max-width: calc(var(--measure) * 0.75); margin: var(--s7) 0; }

/* the pull line: a line set apart in the text face, never the display face (MC, Oct 6, 2026), held to
   a readable measure, with the accent rule that marks it as set apart rather than as a second title */
.pull { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--ink); max-width: 640px; border-left: 2px solid var(--accent); padding-left: var(--s5); }
/* in an article the pull shares its rung with the section title, so it carries the accent rule and
   reads as a line set apart, never as a second heading (the creative director's review, Oct 2, 2026) */
.article .trio.one { max-width: 680px; }  /* a quote in an article holds the text column's measure */

.sublab { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-label, var(--accent)); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); }

.sublab + .body, .sublab + .list { margin-top: var(--s3); }

.plist { margin-top: var(--s3); }

.plist .pr { padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); }

.plist .pr:last-child { border-bottom: none; }

.plist .pk { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-bottom: var(--s2); }

.plist .pq { font-size: 15px; line-height: 1.5; color: var(--ink); }

.plist .pw { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); margin-top: var(--s2); }

@media (min-width: 768px) {
  .plist .pr { display: grid; grid-template-columns: 180px 1fr; gap: var(--s4); align-items: baseline; }
  .plist .pk { margin-bottom: 0; }
}

.vs { margin-top: var(--s6); }

.vs .vs-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }

.vs .vs-head .spacer { display: none; }

.vs .vs-head .h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); line-height: 1.5; }

.vs .vs-head .arr { color: var(--accent-text, var(--accent)); font-size: 14px; line-height: 1; margin-right: var(--s2); display: inline-block; }

.vs .vs-row { padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); }

.vs .vs-row:last-child { border-bottom: none; }

.vs .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-bottom: var(--s2); }

.vs .one, .vs .os-v { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

.vs .os-v .rar { color: var(--accent-text, var(--accent)); margin-right: var(--s2); display: inline-block; }

.vs .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

@media (min-width: 768px) {
  .vs .vs-head { grid-template-columns: 180px 1fr 1fr; }
  .vs .vs-head .spacer { display: block; }
  .vs .vs-row { display: grid; grid-template-columns: 180px 1fr 1fr; gap: var(--s4); align-items: baseline; }
  .vs .k { margin-bottom: 0; }
  .vs .pair { display: contents; }
}

.fnb { margin-top: var(--s6); border: 1px solid var(--rule); padding: var(--s5); }

@media (min-width: 768px) {
  .fnb { padding: var(--s6); }
}

.fnb .fk { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

.fnb .agents { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
/* the NAME chip — a proper noun in a quiet white box (the approved soft chip;
   uppercase mono would lie about what an agent name is). The label chip
   (.chips .chip) stays mono 12. Both fills white, per MC's chip ruling. */
.fnb .agents .chip, .flowv .fagents .chip, .overview-doc .ecap .chip { font-family: var(--font-body); font-size: 15px; text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--ink); border: 1px solid var(--rule); background: var(--alt); padding: var(--s3) var(--s4); }

.fnb .fgroup { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule-soft); }

.fnb .fgroup:first-of-type { margin-top: var(--s5); padding-top: 0; border-top: none; }

.fnb .fgroup .gl { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-label, var(--accent)); }

.fnb .fgroup .gl .gn { color: var(--ink-subtle); margin-right: var(--s3); }

.fnb .fgroup .agents { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s3); }

@media (min-width: 768px) {
  .fnb .fgroup .agents { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.fnb .flands { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule-soft); }

.fnb .flands .darr { display: block; color: var(--accent-text, var(--accent)); font-size: 16px; line-height: 1; margin-bottom: var(--s4); }

.fnb .flands .lbox { border: 1px solid var(--rule); border-top: 2px solid var(--accent); background: var(--alt); padding: var(--s5); }

.fnb .flands .lbox .ll { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

.fnb .flands .lbox .lt { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s3); max-width: 60ch; }

.fnb .agents .chip { font-family: var(--font-body); font-size: 15px; text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--ink); padding: var(--s3) var(--s4); }

.stats { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats.stats2 { grid-template-columns: repeat(2, 1fr); }
}

.stats .st { border-top: 1px solid var(--rule); padding-top: var(--s3); }

.stats .sv { font-family: var(--font-mono); font-size: clamp(26px, 4vw, 34px); color: var(--ink); line-height: 1.1; }

.stats .sl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); margin-top: var(--s2); }

@media (min-width: 768px) {
  .stats4 { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .anim .seq > * { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
  .anim .seq.in > * { opacity: 1; transform: none; }
  .anim .seq > :nth-child(2) { transition-delay: 0.07s; }
  .anim .seq > :nth-child(3) { transition-delay: 0.14s; }
  .anim .seq > :nth-child(4) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(5) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(6) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(7) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(8) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(9) { transition-delay: 0.21s; }
  .anim .seq > .fjoin { transform: scaleY(0); }
  .anim .seq.in > .fjoin { transform: scaleY(1); }
  .anim .seq.pair > :nth-child(2) { transition-delay: 0.21s; }
  .anim .vs.seq .arr { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s ease-out 0.21s, transform 0.4s ease-out 0.21s; }
  .anim .vs.seq.in .arr { opacity: 1; transform: none; }
}

.lvl, .tbox, .acards, .ops, .price, .howsteps, .stack, .continue, .wrap .grid { max-width: var(--measure); }

.caveat { border: 1px solid var(--rule); background: var(--alt); padding: var(--s5); margin-top: var(--s6); max-width: var(--measure); }

@media (min-width: 768px) {
  .caveat { padding: var(--s6); }
}

.caveat .cvk { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-label, var(--accent)); }

.caveat .cvt { font-size: 15px; line-height: 1.55; color: var(--ink); margin-top: var(--s3); max-width: 60ch; }

.howsteps { margin-top: var(--s6); max-width: 60ch; }

.hstep { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding: var(--s4) 0; align-items: baseline; }

.hstep:first-child { padding-top: 0; }

.hstep + .hstep { border-top: 1px solid var(--rule-soft); }

.hstep .sn { font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }

.hstep .sc { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

.hstep .sc strong { color: var(--ink); font-weight: 600; }

.lvl, .tbox { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }

@media (min-width: 768px) {
  .lvl { grid-template-columns: repeat(3, 1fr); }
  .tbox { grid-template-columns: 1fr 1fr; }
}

.bx { border: 1px solid var(--rule); background: var(--alt); padding: var(--s5); }

.sublab + .body { margin-top: var(--s3); }

.bx .bk { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

.bx .bv { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s3); }

.bx .list { margin-top: var(--s4); max-width: none; gap: var(--s2); }

.bx .list li { font-size: 15px; line-height: 1.5; padding-left: var(--s3); }

.bx .list li::before { top: 8px; }

.bx .bp { font-family: var(--font-mono); font-size: 19px; color: var(--ink); margin-top: var(--s3); }

.bx .bp .was { font-size: 14px; color: var(--ink-subtle); text-decoration: line-through; margin-right: var(--s3); }

.bx .bp .per { font-size: 12px; color: var(--ink-muted); margin-left: var(--s2); }
/* a pricing section's lead boxes: the price two steps up, in the same mono face (Oct 8, 2026) */
.tbox.lead .bx .bp { font-size: 24px; }

.acards { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }

@media (min-width: 768px) {
  .acards { grid-template-columns: 1fr 1fr; }
}

.acard { border: 1px solid var(--rule); background: var(--alt); padding: var(--s5); display: flex; flex-direction: column; }

.acard .ak { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }

.acard .anm { font-family: var(--font-display); font-size: 20px; line-height: 1.15; color: var(--ink); margin-top: var(--s2); }

.acard .aln { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s3); flex: 1; }

.acard .list { margin-top: var(--s3); max-width: none; gap: var(--s2); flex: 1; }

.acard .list li { font-size: 15px; line-height: 1.5; padding-left: var(--s3); }

.acard .list li::before { top: 8px; }

.acard .aown { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-soft); }

.ops { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s6); }

@media (min-width: 768px) {
  .ops { grid-template-columns: 1fr 1fr; }
}

.op { border: 1px solid var(--rule); background: var(--alt); padding: var(--s4); }

.op .on { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

.op .ov { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s2); }

.price { margin-top: var(--s6); border: 1px solid var(--rule); padding: var(--s5); }

@media (min-width: 768px) {
  .price { padding: var(--s6); }
}

.price .pnum { font-family: var(--font-mono); font-size: clamp(30px, 4vw, 40px); color: var(--accent-text, var(--accent)); line-height: 1.1; }

.price .pnum .per { font-size: 0.45em; color: var(--ink-muted); margin-left: var(--s2); }

.price .plede { font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: var(--s3); }

.price .prow { padding: var(--s4) 0; border-top: 1px solid var(--rule-soft); margin-top: 0; }

.price .prow:first-of-type { margin-top: var(--s6); }

.price .sublab + .prow { margin-top: var(--s5); }

.price .pl { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); margin-bottom: var(--s2); }

.price .pv { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

@media (min-width: 768px) {
  .price .prow { display: grid; grid-template-columns: 150px 1fr; gap: var(--s4); align-items: baseline; }
  .price .pl { margin-bottom: 0; }
}

.ptable .pr { padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); }
.ptable .pr:last-child { border-bottom: none; }
.enc { border: 1px solid var(--rule); background: var(--alt); padding: var(--s5); margin-top: var(--s5); }
.enc .ek { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.enc .enm { font-family: var(--font-display); font-size: 20px; line-height: 1.15; color: var(--ink); margin-top: var(--s2); }
.enc .egoal { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s2); max-width: 60ch; }
.erow .epur { color: var(--ink); font-weight: 600; }
.enc .list { margin-top: var(--s4); max-width: none; gap: var(--s2); }
.enc .list li { font-size: 15px; line-height: 1.5; padding-left: var(--s3); }
.enc .list li::before { top: 8px; }
.erail { margin-top: var(--s5); }
.erow { padding: var(--s4) 0; border-top: 1px solid var(--rule-soft); }
.erow .el { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); margin-bottom: var(--s2); }
.erow .ev { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.tt { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.tt .half .mk { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); display: block; margin-bottom: 2px; }
.tt .today { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.tt .tmrw { font-size: 15px; line-height: 1.5; color: var(--ink); }
.tt .earr { color: var(--accent-text, var(--accent)); font-size: 14px; line-height: 1; }
.tt .earr.h { display: none; }
.ecap { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ecap .chip { background: var(--alt); }
.fnhead { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.sublab + .fnhead { margin-top: var(--s5); padding-top: 0; border-top: none; }
.fnhead .fnk { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-label, var(--accent)); }
.fnhead .fnn { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); line-height: 1.15; color: var(--ink); margin-top: var(--s2); }
.fnhead .fnl { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s2); max-width: 60ch; }
.fnhead .fnn.withicon { display: flex; align-items: center; gap: var(--s3); }
.fnhead .fnn.withicon .ico { width: 28px; height: 28px; }
/* a function's name inside a chapter: the sub-label's rung, with its icon (Oct 7, 2026) */
.overview-doc h4.sublab.fnsub { align-items: center; }
/* under a function at that rung, its agent cards name the agent one step down, in the body face */
.overview-doc section.chapter:has(h4.fnsub) .enc.rail .enm.withicon { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
/* the purpose reads in the box text's gray, under its name (a child never outweighs its parent) */
.overview-doc section.chapter:has(h4.fnsub) .enc.rail .egoal { font-size: 15px; font-weight: 400; color: var(--ink-muted); }
.overview-doc section.chapter:has(h4.fnsub) .enc.rail .enm.withicon .ico { width: 18px; height: 18px; }
.overview-doc h4.sublab.fnsub .ico { width: 20px; height: 20px; flex: none; }
.overview-doc h4.sublab.fnsub .fnlab { font-weight: 400; color: var(--ink-subtle); }
/* the agent card (Oct 1, 2026): one question a row, label left and answer right, in one
   column; the head is the shared agent icon beside the role, the purpose bold under it; the
   workflow row is the hero, Today muted, an arrow down, Tomorrow in ink on an accent rule;
   one label style throughout; the entities a card names are boxes carrying their icon */
.enc.rail .ehead { padding-bottom: var(--s5); }
.enc.rail .enm.withicon { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0; }
.enc.rail .enm.withicon .ico { width: 26px; height: 26px; flex: none; }
.enc.rail .egoal { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); max-width: 64ch; margin-top: var(--s3); }
.enc.rail .erail { margin-top: 0; }
.enc.rail .erow .el { color: var(--ink-subtle); }
.enc.rail .eb > .ev { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); max-width: 72ch; }
.enc.rail .eb > .list { margin-top: 0; }
.enc.rail .flow { display: grid; gap: var(--s2); }
.enc.rail .flow .mk { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); margin-bottom: var(--s1); }
/* Today and Tomorrow are symmetrical: the same size, the same ink, the same rule; only the
   rule's color says which is the change */
.enc.rail .flow .was, .enc.rail .flow .now { border-left: 2px solid var(--rule); padding-left: var(--s4); }
.enc.rail .flow .now { border-left-color: var(--accent); }
.enc.rail .flow p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.enc.rail .flow .arw { width: 18px; height: 18px; color: var(--ink-subtle); margin-left: var(--s4); }
.enc.rail .ecap .chip { display: inline-flex; align-items: center; gap: var(--s2); }
/* the light card (Oct 1, 2026): the full card's head alone, set across the row; an approach's
   agents, which a proposal fills in with the rows */
.fx.lightgrid { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 768px) { .fx.lightgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fx.lightgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx.lightgrid.one { grid-template-columns: 1fr; } }
.enc.light { margin-top: 0; padding: var(--s5); }
.enc.light .enm.withicon, .overview-doc .enc.light .enm.withicon { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 22px); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.enc.light .enm.withicon .ico { width: 22px; height: 22px; flex: none; }
.enc.light .egoal { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin-top: var(--s3); }
.enc.rail .ecap .chip .ico { width: 16px; height: 16px; flex: none; color: var(--ink-subtle); }
/* the inline point list: the marker beside the title, the detail under the title */
.pointrow.inline > .point { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); align-items: center; padding: var(--s4) 0; }
.pointrow.inline > .point > .ico, .pointrow.inline > .point > .nmark { margin-bottom: 0; grid-row: 1; }
.pointrow.inline > .point > :not(.ico):not(.nmark) { grid-column: 2; }
.pointrow.inline .detail { margin-top: var(--s1); }
/* a chapter number in a phase's contents: mono, gray, unboxed, the width of its digits (Oct 7, 2026) */
.nmark.ref { width: auto; height: auto; border: none; color: var(--ink-subtle); letter-spacing: 0.08em; min-width: 4ch; justify-content: flex-start; }
/* a text underline stays under the words; the padding widens the tap target to 44px without
   moving it (a border here sat on the line below) */
.pointrow.inline .phrase a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.pointrow.inline .phrase a:hover { text-decoration-color: currentColor; }
.eown { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink); }
.sublab + .body, .sublab + .list, .sublab + .lvl, .sublab + .ecap { margin-top: var(--s3); }
.body + .ecap { margin-top: var(--s4); }
.lvl { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); max-width: var(--measure); }
@media (min-width: 768px) {
  .ptable .pr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: baseline; }
}
@media (min-width: 768px) {
  .enc { padding: var(--s6); }
}
@media (min-width: 768px) {
  .erow { display: grid; grid-template-columns: 110px 1fr; gap: var(--s4); align-items: baseline; }
  .erow .el { margin-bottom: 0; }
}
@media (min-width: 768px) {
  .tt { grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: baseline; }
  .tt .earr.h { display: block; }
  .tt .earr.v { display: none; }
}
@media (min-width: 768px) {
  .lvl { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .anim .seq > * { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
  .anim .seq.in > * { opacity: 1; transform: none; }
  .anim .seq > :nth-child(2) { transition-delay: 0.07s; }
  .anim .seq > :nth-child(3) { transition-delay: 0.14s; }
  .anim .seq > :nth-child(4) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(5) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(6) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(7) { transition-delay: 0.21s; }
  .anim .seq > :nth-child(8) { transition-delay: 0.21s; }
}

/* trio cards, the vertical flow, the logo wall, paired quotes — lifted from an approved client overview */
.trio { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 768px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}
.trio .t { background: var(--alt); border: 1px solid var(--rule); padding: var(--s5); display: flex; flex-direction: column; }
.trio .num { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.trio .nm, .card .nm { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }  /* a name is a point title, in Inter 600: Ponomar opens a page or a section and nothing below (MC, Oct 6, 2026) */
.trio .nm { margin-top: var(--s3); }
.trio .ln, .card .ln { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--s3); }
.trio .ln { flex: 1; }
.trio .tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-label, var(--accent)); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule-soft); }
.flowv { margin-top: var(--s6); max-width: 640px; }
.flowv .fnode { border: 1px solid var(--rule); padding: var(--s3) var(--s4); font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.flowv .fnode .fk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--s1); }
.flowv .fjoin { width: 1px; height: var(--s5); background: var(--rule); margin-left: var(--s5); transform-origin: top; }
.flowv .fagents { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.logowall { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); align-items: center; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule); max-width: var(--measure); }
@media (min-width: 768px) {
  .logowall { grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s7); }
}
.logowall img { height: 30px; width: auto; max-width: 165px; object-fit: contain; justify-self: center; filter: grayscale(1); opacity: 0.42; }
.qpair { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s7); max-width: var(--measure); }
@media (min-width: 768px) {
  .qpair { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
.qpair .quote { margin: 0; max-width: none; }

/* the pillar marker + the tool row — lifted from an approved client proposal */
.eyebrow.pillar { margin: 0 0 var(--s5); }
.eyebrow.pillar .pn, .eyebrow.pillar .pd { color: inherit; font-weight: inherit; }
.toolrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.fx { margin-top: var(--s2); }

/* the report register's small constructs — lifted from an approved client intelligence report */
.heromnu { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-subtle); margin-top: var(--s5); }
.sev { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-label, var(--accent)); margin: var(--s7) 0 var(--s2); }
.sev.med { color: var(--ink-subtle); }
.gl { display: inline-block; margin-right: 8px; }
.gl.up { color: var(--accent-text, var(--accent)); }
.gl.dn { color: var(--ink-muted); }
.gl.op { color: var(--ink-subtle); }
h3 + .blist, h3 + .tscroll, h3 + .tbl { margin-top: var(--s3); }

/* ---- THE PAGE FRAME — the top half of every approved page's local styles,
   lifted after the creative director's cold read caught the gap. The dead
   --measure stays undefined by law: these max-widths resolve to none, which
   IS the approved rendering (full-wrap headings); the shell's older 18ch
   hero cap is overridden back to the approved full measure. ---- */
.wrap h1, .wrap h2, .wrap h3 { max-width: var(--measure); }
.hero h1 { max-width: none; }
.wrap .body { max-width: var(--measure); }
.wrap .body ~ .body { max-width: 60ch; font-size: 16px; line-height: 1.55; }
/* a paragraph under a sub-label is running text, never the section's subhead, even when it is
   the section's first paragraph (What we stand for's first conviction, Oct 2, 2026) */
.wrap .sublab + .body { max-width: 60ch; font-size: 16px; line-height: 1.55; }
.article .wrap .sublab + .body { font-size: 16px; line-height: 1.7; }
section > .wrap { padding-top: var(--s4); padding-bottom: var(--s4); }
.wrap > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  section > .wrap { padding-top: var(--s6); padding-bottom: var(--s6); }
  .hero > .wrap { padding-top: var(--s6); padding-bottom: 0; }
}
/* the report register's subsection rhythm + wide data lists (approved intel page) */
h3 { margin-top: var(--s6); }
h3 + .blist, h3 + .tscroll, h3 + .tbl { margin-top: var(--s3); }
.dense .blist { max-width: 70ch; }

/* The sub-subhead (.h4) — one rung under a subhead, inside an assessment's source
   list. Not the mono h4 metadata label above; this one is a heading. Lifted from
   the approved Dashlane product assessment, 2026-09-29. */
h4.h4 { font-family: var(--font-body); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--ink); margin-top: var(--s6); }
h4.h4 + .blist { margin-top: var(--s3); }

/* ---- the embed scope (.em) — the container every embed is wrapped in, named in
   the block canon since 2026-08-14 and never given a rule, because no LIVE page
   carried an embed until Dashlane graduated (2026-09-29) and page-integrity reads
   public/clients only. It holds no look: each embed owns its own rhythm. It holds
   the one thing a container owes the page, which is not to widen it. ---- */
.em { display: block; max-width: 100%; }

/* ============================================================
   THE POINT LAYER — the icon, point, logo-panel and workflow
   constructs first built on /overview-a (2026-09-16/17), merged
   into the block canon when MC approved
   SPEC_2026-09-17_BR_MC_Design-System-Landing.md.

   Manual: KNW_BR_MC_Block-Library.md. Every class below is an
   atom, a block or a view named there, and each one is rendered
   on the specimen at /design-system/blocks.

   Additive by construction. Every base class here had zero uses
   on any page when it was added (measured over 383 files), and a
   modifier only ever appears compounded with one of them, so no
   page already published can change.

   Icons are drawn from content/brand/icons.mjs, one drawing per
   concept; the stroke rides on the SVG as currentColor, so the
   color is the token set here.
   ============================================================ */

/* atom · icon — the 24px line drawing, in ink */
.ico { display: block; width: 24px; height: 24px; flex: none; color: var(--ink); }

/* atom · number — a numeral in the icon's place, size and line (S3: every
   numeral is JetBrains Mono) */
.nmark { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; border: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; color: var(--ink); }

/* atom · arrow — the one direction mark in a diagram: the icon line and an
   open head, ink-muted. It points right; the modifier turns it. */
.arw { display: block; width: 24px; height: 24px; flex: none; color: var(--ink-muted); transform-origin: 50% 50%; }
.arw.down { transform: rotate(90deg); }
.arw.up { transform: rotate(-90deg); }

/* atom · phrase — the bold lead of a point: the body's size and color,
   weight 600 carries the rank (MC 2026-09-16) */
.phrase { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--ink-muted); }

/* atom · card head — the marker and the box title on one line (S2). A box
   title is a point title in a box: Inter 600 at 16, gray, four words or fewer
   (MC 2026-09-17: one treatment for a named thing beside its marker, boxed or
   not; Ponomar stays with the headlines). Its 24px line box matches the
   marker, so a title that wraps keeps its marker on the first line. */
.cardhead { display: flex; align-items: flex-start; gap: var(--s3); }
.cardhead .nm { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink-muted); }

/* atom · white box for a visual — a diagram, a panel or a product view
   always sits in one */
.figbox { background: var(--alt); border: 1px solid var(--rule); padding: var(--s5); margin-top: var(--s6); }
@media (min-width: 768px) { .figbox { padding: var(--s6); } }

/* ---- block · point row ----
   Two or three points side by side, no box, divided by a hairline. A point
   is its marker (an icon, or a number where the order is the content), the
   phrase, then its text 8px below. Stacked on a phone; .stack keeps it
   stacked at every width (the text side of a split). */
.pointrow { display: grid; grid-template-columns: 1fr; margin-top: var(--s6); }
.pointrow > .point { padding: var(--s5) 0; }
.pointrow > .point:first-child { padding-top: 0; }
.pointrow > .point:last-child { padding-bottom: 0; }
.pointrow > .point + .point { border-top: 1px solid var(--rule-soft); }
.pointrow > .point > .ico, .pointrow > .point > .nmark { margin-bottom: var(--s4); }
.pointrow .detail { margin: var(--s2) 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
@media (min-width: 768px) {
  .pointrow:not(.stack) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pointrow.two:not(.stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pointrow:not(.stack) > .point { padding: 0 var(--s5); }
  .pointrow:not(.stack) > .point:first-child { padding-left: 0; }
  .pointrow:not(.stack) > .point:last-child { padding-right: 0; }
  .pointrow:not(.stack) > .point + .point { border-top: none; border-left: 1px solid var(--rule); }
}

/* ---- block · card grid, the point views ----
   The approved trio (.trio .t) with the card head in place of the kicker
   and name. Views: parts (a mono tag at the foot, S4), compare (From and
   To), quote, function (the agents it holds). .two and .one set the count;
   six cards take two whole rows (Law 3). Card copy is the 15px rung. */
@media (min-width: 768px) {
  .trio.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio.two.fill > :last-child { grid-column: 1 / -1; }
  .trio.two.fill.lead > :first-child { grid-row: span 2; }
  .trio.two.fill.lead > :last-child { grid-column: auto; }
  .trio.one { grid-template-columns: minmax(0, 1fr); }
}
.trio .cardhead + .ln, .trio .cardhead + .fromto, .trio .cardhead + .rolelist { margin-top: var(--s3); }

/* view · compare — both halves in the component copy and one label style
   (MC 2026-09-16: one From, one To, no second color) */
.fromto { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.fromto .frk { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.fromto .frv { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* view · function — the card head names the function; a quiet list names
   the agents it holds (the approved .acard list, at the same rung) */
.rolelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.rolelist li { font-size: 15px; line-height: 1.5; color: var(--ink-muted); position: relative; padding-left: var(--s3); }
.rolelist li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: var(--accent); }
/* a function card may say what the agents would do before naming them: the line takes the card's spare height, the list sits under it */
.trio .ln + .rolelist { margin-top: var(--s4); }
/* the agents of a function card, as equal cells (MC, Oct 2, 2026: "have every box the same
   size", "a better thing than a box"): no box and no fill, a soft rule between the agents. A
   narrow card stacks them as equal rows, icon beside the name; a card wide enough sets them as
   equal columns, icon above the name, so three agents are three cells the same width. On a page
   with agent cards each is a link to its card, marked by an arrow on hover. */
.trio .t:has(> .rolelist.boxes) { container-type: inline-size; }
.rolelist.boxes { gap: 0; border-top: 1px solid var(--rule-soft); }
/* the agents sit right under the card's line, never pinned to the card's foot */
.trio .t:has(> .rolelist.boxes) > .ln { flex-grow: 0; }
.rolelist.boxes li { padding-left: 0; }
.rolelist.boxes li::before { content: none; }
.rolelist.boxes li + li { border-top: 1px solid var(--rule-soft); }
.rolelist.boxes a, .rolelist.boxes .bxi { position: relative; display: flex; align-items: center; gap: var(--s2); min-height: 44px; box-sizing: border-box; padding: var(--s3) var(--s5) var(--s3) 0; font-family: var(--font-body); font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.rolelist.boxes a .ico, .rolelist.boxes .bxi .ico { width: 16px; height: 16px; flex: none; color: var(--ink-subtle); }
.rolelist.boxes a::after { content: "\2192"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); color: var(--accent-text, var(--accent)); opacity: 0; transition: opacity .2s ease; }
.rolelist.boxes a:hover { color: var(--accent-text, var(--accent)); }
.rolelist.boxes a:hover::after, .rolelist.boxes a:focus-visible::after { opacity: 1; }
/* agents that carry their purpose: each agent is a full row,
   its name over the line that says what it does, stacked at every width (Oct 7, 2026) */
.rolelist.boxes.rich a, .rolelist.boxes.rich .bxi { align-items: flex-start; padding-top: var(--s4); padding-bottom: var(--s4); }
.rolelist.boxes.rich .ico { margin-top: 3px; }
.rolelist.boxes.rich .bt { display: flex; flex-direction: column; gap: 4px; }
.rolelist.boxes.rich .bn { font-weight: 500; color: var(--ink); }
.rolelist.boxes.rich .bp { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
@container (min-width: 420px) {
  .rolelist.boxes:not(.rich) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .rolelist.boxes:not(.rich) li + li { border-top: none; border-left: 1px solid var(--rule-soft); }
  .rolelist.boxes:not(.rich) a, .rolelist.boxes:not(.rich) .bxi { flex-direction: column; align-items: flex-start; height: 100%; padding: var(--s4) var(--s5) var(--s4) var(--s4); }
  .rolelist.boxes:not(.rich) li:first-child a, .rolelist.boxes:not(.rich) li:first-child .bxi { padding-left: 0; }
  .rolelist.boxes a::after { top: var(--s4); right: var(--s3); transform: none; }
}
/* a stacked scope (one function a row, full width): the agents that carry their purpose sit
   two across, so four agents read as one even block instead of a long list (Oct 14, 2026) */
@container (min-width: 760px) {
  .trio.one .rolelist.boxes.rich { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
  .trio.one .rolelist.boxes.rich li + li { border-top: none; }
  .trio.one .rolelist.boxes.rich li:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}

/* view · quote — someone else's words: the quote icon, the words at 18px in
   ink, the speaker on the mono label rung. The weight is the box and its
   place on the page, never the size (S7). */
.trio .said { margin: var(--s4) 0 0; font-size: 16px; line-height: 1.55; color: var(--ink); flex: 1; }
.trio .said + .saidby { margin: var(--s4) 0 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.5; color: var(--ink-subtle); }

/* ---- block · split ----
   The text on one side, its visual in a white box on the other. Stacked
   below 1024 with the visual after its text; side by side from 1024, the
   box as tall as the text. .flip sets the visual first. */
.textfig { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); }
.textfig > .pointrow, .textfig > .figbox, .textfig > .pshot { margin-top: 0; }
.textfig.flip > .pshot { order: -1; }
/* a window's label: the line above it naming what it shows, in the section eyebrow's mono, with a
   short accent rule before it so it reads as the window's title (Oct 7, 2026) */
.textfig > .figcol { min-width: 0; }
.textfig.flip > .figcol { order: -1; }
.figcol .pshot { margin-top: 0; }
.figlabel { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.figlabel::before { content: ""; width: 24px; height: 1px; background: var(--accent); flex: none; }
@media (min-width: 1024px) {
  .textfig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: stretch; }
  .textfig.flip > .figbox { order: -1; }
}

/* ---- block · logo panel ----
   Other companies' marks in their own color (S8), one category to a row:
   the mono label, then the marks in columns. Each mark is sized to equal
   optical area by its width and height attributes, never by CSS. The
   brands view is the proof row: no label, larger, centred. */
.logorows > .lrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; }
.logorows > .lrow:first-child { padding-top: 0; }
.logorows > .lrow:last-child { padding-bottom: 0; }
.logorows > .lrow + .lrow { border-top: 1px solid var(--rule-soft); }
.lrow .lk { margin: 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.lrow .marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 36px; gap: var(--s4); align-items: center; }
.lrow .marks img { display: block; max-width: 100%; height: auto; }
.lrow.brands .marks { grid-auto-rows: 56px; justify-items: center; }
/* the closing row: everything a panel cannot show, in one line of body text (Oct 14, 2026) */
.lrow.rest .ltx { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink); }
@media (min-width: 768px) {
  .logorows > .lrow { grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: var(--s5); }
  .lrow .marks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
  .logorows > .lrow.brands { grid-template-columns: minmax(0, 1fr); }
  .lrow.brands .marks { grid-auto-rows: 72px; }
}

/* ---- block · product view ----
   The product as it shows itself: a head (what it is, when), then rows of
   an icon, a name, its status and its state. Illustrative content says so. */
.pview { display: flex; flex-direction: column; justify-content: center; }
.pview .pvh { display: flex; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.pview .pvr { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s3); align-items: center; padding: var(--s4) 0; }
.pview .pvr + .pvr { border-top: 1px solid var(--rule-soft); }
.pview .pvr:last-child { padding-bottom: 0; }
.pview .pvn, .pview .pvs { margin: 0; font-size: 15px; line-height: 1.45; }
.pview .pvn { font-weight: 600; color: var(--ink-muted); }
.pview .pvs { color: var(--ink-subtle); }
.pview .state { grid-column: 2; justify-self: start; margin-top: var(--s2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.5; color: var(--ink-subtle); border: 1px solid var(--rule); padding: 0 var(--s2); white-space: nowrap; }
.pview .state.go { color: var(--accent-text, var(--accent)); border-color: var(--accent); }
@media (min-width: 768px) {
  .pview .pvr { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .pview .state { grid-column: auto; margin-top: 0; }
}

/* ---- block · workflow ----
   White boxes joined by the arrow atom (S5). A node's head is the number
   marker and the name on one line; its text is the 15px rung. Views:
     (none)    stacked, top to bottom, at every width
     .across   left to right from 1024, stacked below
     .branch   one step fans out to the functions and they return: a tree
               below 1024, the orchestration diagram from 1024
     .returns  the last step feeds the first: a return path under the row
               from 1024, a return note when stacked
   The joins are the arrow atom; a bent path is the same 1.5 line in CSS.
   Spacing is the tokens. The fixed lengths in the diagram rules below are
   the atoms' own sizes, and each is one of these:
     24px   the arrow atom and the number marker; 12px is half of it
     1.5px  the line; 0.75px is half of it, so a line is centred on its point
     1px    a box's rule
     22px   the run from the spine to a function box, which the arrow spans
     2px    where the arrow's shaft starts inside its 24px box */
.wflow { margin-top: var(--s6); max-width: 720px; }
.wnode { position: relative; background: var(--alt); border: 1px solid var(--rule); padding: var(--s4) var(--s5); }
.wnode .ln { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.wnode .wtitle { margin: var(--s2) 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.wnode .wpoints { margin: var(--s3) 0 0; padding-left: 1.4em; font-size: 15px; line-height: 1.5; color: var(--ink); }
.wnode .wpoints li + li { margin-top: var(--s1); }
.wnode .wpillars { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.wnode .wpillars li { border-bottom: 1px solid var(--rule); }
.wnode .wpillars a { display: flex; gap: var(--s3); min-height: 44px; padding: var(--s2) 0; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.4; box-sizing: border-box; align-items: center; }
.wnode .wpillars a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.wnode .wpillars .pnum { flex: none; min-width: 2.2em; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }
/* the map: a sequence that lists its pillars, in the point row's calm treatment */
.wflow.map { max-width: none; }
.wflow.map > .wjoin { display: none; }
.wflow.map > .wnode { background: none; border: none; padding: var(--s5) 0; }
.wflow.map > .wnode:first-child { padding-top: 0; }
.wflow.map > .wjoin + .wnode { border-top: 1px solid var(--rule-soft); }
.wflow.map .wpillars { border-top: none; margin-top: var(--s3); }
.wflow.map .wpillars li { border-bottom: none; }
@media (min-width: 768px) {
  .wflow.map.across { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wflow.map.across > .wnode { padding: 0 var(--s5); }
  .wflow.map.across > .wnode:first-child { padding-left: 0; }
  .wflow.map.across > .wnode:last-of-type { padding-right: 0; }
  .wflow.map.across > .wjoin + .wnode { border-top: none; border-left: 1px solid var(--rule); }
}
.wjoin { display: block; padding: var(--s1) 0 var(--s1) calc(var(--s5) + 1px); }
.wreturn { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0 0 calc(var(--s5) + 1px); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.wreturn .ico { color: var(--ink-muted); }
.wflow > .arw.up { display: none; }

/* atom · diagram label — a name inside a workflow is a label, not a box
   title: JetBrains Mono like every other label (MC 2026-09-17). Its 18px
   lines sit centred on the 24px marker. */
.wflow .cardhead .nm { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 18px; padding-top: 3px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

/* the fan — stacked, a spine with a branch into each function. The fan is a
   step of its own, so its number and label head the column; stacked, the
   marker sits on the spine and masks it with the page field. */
/* back the 22px run and half the marker, so the marker is centred on the spine */
.wfan > .cardhead { position: relative; margin-left: calc(-1 * (22px + 12px)); }
.wfan > .cardhead .nmark { background: var(--field); }
/* geometry: a node's marker centres at its padding + 1px border + 12px; the spine sits there,
   and the fan nodes start 22px past it so the arrow atom spans the gap exactly */
.wfan { position: relative; display: grid; gap: var(--s3); padding: var(--s4) 0 var(--s4) calc(var(--s5) + 35px); }
/* the spine runs on through the next join's top padding to where its arrow's shaft starts */
.wfan::before { content: ''; position: absolute; left: calc(var(--s5) + 12.25px); top: 0; bottom: calc(-1 * (var(--s1) + 2px)); width: 1.5px; background: var(--ink-muted); }
.wfan > .wnode { height: calc(2 * var(--s4) + 24px); display: flex; align-items: center; }
.wfan > .wnode > .arw { position: absolute; left: -23px; top: calc(var(--s4) - 1px); }
.wfan > .wtie { display: none; }

@media (min-width: 1024px) {
  .wflow.across, .wflow.branch { display: flex; max-width: none; }
  .wflow.across { align-items: stretch; }
  .wflow.across > .wnode, .wflow.branch > .wnode { flex: 1 1 0; min-width: 0; padding: var(--s4); }
  .wflow.across > .wjoin { flex: none; padding: calc(var(--s4) + 1px) var(--s1) 0; }
  .wflow.across .arw.down, .wflow.branch .arw.down { transform: none; }

  /* the orchestration diagram — the fan becomes a column: a bracket in with
     an arrow to each function, a bracket out, level with the nodes */
  .wflow.branch { align-items: center; }
  /* the steps around the column share one height: their top and bottom edges
     line up with its first and last function (the column's 16px inset and its
     rule, and the 12px the column's label needs above it) */
  .wflow.branch > .wnode { align-self: stretch; margin: calc(var(--s3) + var(--s4) + 1px) 0 calc(var(--s4) + 1px); }
  /* the arrows sit on the middle function's line, 6px under the row's centre */
  .wflow.branch > .wjoin { flex: none; padding: 0 var(--s1) 0 0; margin-top: var(--s3); }
  /* the column is one step, so a thin rule holds it together (MC 2026-09-17).
     It sits a join's width (24px arrow and 4px) from the step before it, like
     every other pair of steps; the line in crosses that gap. Its label sits on
     the rule, so the functions keep the one 16px inset above and below, and
     the label's marker sits 16px in, like every other step's. */
  /* the column's geometry: the in-spine sits 16px inside it and the functions start
     the 22px run past it; the out-spine sits 16px past the functions, so the column
     keeps 8px (24 less 16) beyond it */
  .wflow.branch > .wfan { flex: 0 0 auto; margin: var(--s3) 0 0 calc(24px + var(--s1)); border: 1px solid var(--rule); padding: var(--s4) var(--s5) var(--s4) calc(var(--s4) + 22px); }
  .wflow.branch > .wfan > .wnode { padding: var(--s4); }
  /* the label's marker is centred on the rule: half the marker above the column's
     outer edge, and the position is measured inside the 1px rule */
  .wflow.branch > .wfan > .cardhead { position: absolute; top: calc(-1 * (12px + 1px)); left: calc(var(--s4) - var(--s2)); margin: 0; padding: 0 var(--s2); background: var(--field); }
  .wflow.branch > .wfan::before { left: calc(var(--s4) - 0.75px); top: calc(2 * var(--s4) + 12px); bottom: calc(2 * var(--s4) + 12px); }
  .wflow.branch > .wfan::after { content: ''; position: absolute; right: calc(var(--s5) - var(--s4) - 0.75px); top: calc(2 * var(--s4) + 12px); bottom: calc(2 * var(--s4) + 12px); width: 1.5px; background: var(--ink-muted); }
  .wflow.branch > .wfan > .wtie { display: block; position: absolute; top: calc(50% - 0.75px); height: 1.5px; background: var(--ink-muted); }
  /* the line in starts at the step before (back across the join and the rule) and
     ends on the in-spine; the line out starts on the out-spine and ends where the
     next arrow's shaft starts, past the rule; each function's stub runs from its
     rule to the out-spine */
  .wflow.branch > .wfan > .wtie.into { left: calc(-1 * (24px + var(--s1) + 1px)); width: calc(24px + var(--s1) + 1px + var(--s4)); }
  .wflow.branch > .wfan > .wtie.outof { right: calc(-1 * (1px + 2px)); width: calc(var(--s5) - var(--s4) + 1px + 2px); }
  .wflow.branch > .wfan > .wnode::after { content: ''; position: absolute; right: calc(-1 * (var(--s4) + 1px)); top: calc(50% - 0.75px); width: var(--s4); height: 1.5px; background: var(--ink-muted); }

  /* the return path — under the row, from the last node back up into the first.
     The path is 32px deep and 8px off the bottom, so the row keeps 40px under it;
     its arms sit on the markers' centres; the up-arrow's box reaches 1px into the
     first node's rule, so its tip meets the box */
  .wflow.across.returns { position: relative; padding-bottom: calc(var(--s6) + var(--s2)); }
  .wflow.across.returns::before { content: ''; position: absolute; left: calc(var(--s4) + 12.25px); right: calc(var(--s4) + 12.25px); bottom: var(--s2); height: var(--s6); border: 1.5px solid var(--ink-muted); border-top: none; }
  .wflow.across.returns > .arw.up { display: block; position: absolute; left: calc(var(--s4) + 1px); bottom: calc(var(--s6) + var(--s2) - 24px + 1px); }
  .wflow.across.returns > .wreturn { display: none; }
}

/* ---- view · stats, held — three short figures stay three across on a phone ---- */
.stats.held { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* four figures hold two by two on a phone and run four across from 768 */
.stats.held.stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .stats.held.stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- behavior · motion (a page opts in with body.motion; MC 2026-09-17) ----
   After Emil Kowalski (emilkowal.ski/ui/great-animations): ease-out, pieces
   shorter than 300ms, and transform and opacity. Arrows also draw with
   clip-path, which his rule does not cover. The curve is a strong ease-out,
   so a thing responds at once and settles. No piece runs longer than 0.3s.
   It extends the reveal (.seq under .anim, which the page script sets only
   when motion is allowed), so a reader who prefers reduced motion, or a page
   without the script, sees every block at rest.
     workflow   the steps arrive in order and each arrow draws toward the
                next step; in a branch the brackets draw, the functions light
                up one after another, and the steps after the column wait
     stats      each figure rises a little further than its label and settles
     logos      the rows arrive in a short stagger, and the marks in each */
@media (prefers-reduced-motion: no-preference) {
  .anim .motion .seq > * { transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

  /* workflow: every child carries its place in the order as --d */
  .anim .motion .wflow.seq > :nth-child(1) { --d: 0.0s; }
  .anim .motion .wflow.seq > :nth-child(2) { --d: 0.12s; }
  .anim .motion .wflow.seq > :nth-child(3) { --d: 0.24s; }
  .anim .motion .wflow.seq > :nth-child(4) { --d: 0.36s; }
  .anim .motion .wflow.seq > :nth-child(5) { --d: 0.48s; }
  .anim .motion .wflow.seq > :nth-child(6) { --d: 0.6s; }
  .anim .motion .wflow.seq > :nth-child(7) { --d: 0.72s; }
  .anim .motion .wflow.seq > :nth-child(8) { --d: 0.84s; }
  .anim .motion .wflow.seq > :nth-child(9) { --d: 0.96s; }
  .anim .motion .wflow.seq > :nth-child(10) { --d: 1.08s; }
  .anim .motion .wflow.seq > * { transition-delay: calc(var(--d, 0s) + var(--x, 0s)); }
  .anim .motion .wflow.branch.seq > .wfan ~ * { --x: 0.9s; }
  .anim .motion .wflow.seq > .wjoin { opacity: 1; transform: none; }
  .anim .motion .wflow.seq > .wjoin .arw, .anim .motion .wfan > .wnode > .arw { clip-path: inset(0 100% 0 0); transition: clip-path 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: inherit; }
  .anim .motion .wflow.seq.in > .wjoin .arw, .anim .motion .wflow.seq.in .wfan > .wnode > .arw { clip-path: inset(0 0 0 0); }
  .anim .motion .wfan::before, .anim .motion .wfan::after { transform: scaleY(0); transform-origin: top; transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--d, 0s) + 0.15s); }
  .anim .motion .wflow.seq.in .wfan::before, .anim .motion .wflow.seq.in .wfan::after { transform: scaleY(1); }
  .anim .motion .wfan > .wtie { transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--d, 0s) + 0.15s); }
  .anim .motion .wfan > .wtie.outof { transition-delay: calc(var(--d, 0s) + 0.75s); }
  .anim .motion .wfan::after { transition-delay: calc(var(--d, 0s) + 0.55s); }
  .anim .motion .wflow.seq.in .wfan > .wtie { transform: scaleX(1); }
  .anim .motion .wfan > .wnode { opacity: 0.25; transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
  .anim .motion .wflow.seq.in .wfan > .wnode { opacity: 1; }
  .anim .motion .wfan > .wnode::after { transform: scaleX(0); transform-origin: left; transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
  .anim .motion .wflow.seq.in .wfan > .wnode::after { transform: scaleX(1); }
  /* the column: its head comes first and the tie second, so the functions are children 3 onward */
  .anim .motion .wfan > .wnode:nth-child(3), .anim .motion .wfan > .wnode:nth-child(3) > .arw { transition-delay: calc(var(--d, 0s) + 0.25s); }
  .anim .motion .wfan > .wnode:nth-child(3)::after { transition-delay: calc(var(--d, 0s) + 0.37s); }
  .anim .motion .wfan > .wnode:nth-child(4), .anim .motion .wfan > .wnode:nth-child(4) > .arw { transition-delay: calc(var(--d, 0s) + 0.35s); }
  .anim .motion .wfan > .wnode:nth-child(4)::after { transition-delay: calc(var(--d, 0s) + 0.47s); }
  .anim .motion .wfan > .wnode:nth-child(5), .anim .motion .wfan > .wnode:nth-child(5) > .arw { transition-delay: calc(var(--d, 0s) + 0.45s); }
  .anim .motion .wfan > .wnode:nth-child(5)::after { transition-delay: calc(var(--d, 0s) + 0.57s); }
  .anim .motion .wfan > .wnode:nth-child(6), .anim .motion .wfan > .wnode:nth-child(6) > .arw { transition-delay: calc(var(--d, 0s) + 0.55s); }
  .anim .motion .wfan > .wnode:nth-child(6)::after { transition-delay: calc(var(--d, 0s) + 0.67s); }
  .anim .motion .wfan > .wnode:nth-child(7), .anim .motion .wfan > .wnode:nth-child(7) > .arw { transition-delay: calc(var(--d, 0s) + 0.65s); }
  .anim .motion .wfan > .wnode:nth-child(7)::after { transition-delay: calc(var(--d, 0s) + 0.77s); }
  .anim .motion .wfan > .wnode:nth-child(8), .anim .motion .wfan > .wnode:nth-child(8) > .arw { transition-delay: calc(var(--d, 0s) + 0.75s); }
  .anim .motion .wfan > .wnode:nth-child(8)::after { transition-delay: calc(var(--d, 0s) + 0.87s); }
  .anim .motion .wflow.across.returns::before { clip-path: inset(0 0 0 100%); transition: clip-path 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 0.6s; }
  .anim .motion .wflow.across.returns.in::before { clip-path: inset(0 0 0 0); }

  /* the compare block's arrow sits outside .seq > *, so its 0.4s reveal is held to the bound here */
  .anim .motion .vs.seq .arr { transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

  /* stats: the figure settles a little after its label */
  .anim .motion .stats.seq .sv { transform: translateY(8px); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: inherit; }
  .anim .motion .stats.seq.in .sv { transform: none; }

  /* logo rows, then the marks in each */
  .anim .motion .logorows.seq > :nth-child(1) { --d: 0.0s; }
  .anim .motion .logorows.seq > :nth-child(2) { --d: 0.045s; }
  .anim .motion .logorows.seq > :nth-child(3) { --d: 0.09s; }
  .anim .motion .logorows.seq > :nth-child(4) { --d: 0.135s; }
  .anim .motion .logorows.seq > :nth-child(5) { --d: 0.18s; }
  .anim .motion .logorows.seq > :nth-child(6) { --d: 0.225s; }
  .anim .motion .logorows.seq > :nth-child(7) { --d: 0.27s; }
  .anim .motion .logorows.seq > :nth-child(8) { --d: 0.315s; }
  .anim .motion .logorows.seq > :nth-child(9) { --d: 0.36s; }
  .anim .motion .logorows.seq > :nth-child(10) { --d: 0.405s; }
  .anim .motion .logorows.seq > :nth-child(11) { --d: 0.45s; }
  .anim .motion .logorows.seq > :nth-child(12) { --d: 0.495s; }
  .anim .motion .logorows.seq > :nth-child(13) { --d: 0.54s; }
  .anim .motion .logorows.seq > :nth-child(14) { --d: 0.585s; }
  .anim .motion .logorows.seq > * { transition-delay: var(--d, 0s); }
  .anim .motion .logorows.seq .marks > img { opacity: 0; transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
  .anim .motion .logorows.seq.in .marks > img { opacity: 1; }
  .anim .motion .logorows.seq .marks > img:nth-child(1) { transition-delay: calc(var(--d, 0s) + 0.1s); }
  .anim .motion .logorows.seq .marks > img:nth-child(2) { transition-delay: calc(var(--d, 0s) + 0.13s); }
  .anim .motion .logorows.seq .marks > img:nth-child(3) { transition-delay: calc(var(--d, 0s) + 0.16s); }
  .anim .motion .logorows.seq .marks > img:nth-child(4) { transition-delay: calc(var(--d, 0s) + 0.19s); }
  .anim .motion .logorows.seq .marks > img:nth-child(5) { transition-delay: calc(var(--d, 0s) + 0.22s); }
  .anim .motion .logorows.seq .marks > img:nth-child(6) { transition-delay: calc(var(--d, 0s) + 0.25s); }
  .anim .motion .logorows.seq .marks > img:nth-child(7) { transition-delay: calc(var(--d, 0s) + 0.28s); }
  .anim .motion .logorows.seq .marks > img:nth-child(8) { transition-delay: calc(var(--d, 0s) + 0.31s); }
  .anim .motion .logorows.seq .marks > img:nth-child(9) { transition-delay: calc(var(--d, 0s) + 0.34s); }
  .anim .motion .logorows.seq .marks > img:nth-child(10) { transition-delay: calc(var(--d, 0s) + 0.37s); }
}

/* the reveal must not undo a turned arrow: the returns view's up arrow keeps its rotation */
@media (prefers-reduced-motion: no-preference) {
  .anim .seq > .arw.up, .anim .seq.in > .arw.up { transform: rotate(-90deg); }
}

/* ---- template · the private overview (body.overview-doc) ----
   A document sent to a named reader, not a web page: the cover opens it
   between two rules, headlines balance, and the colophon sits under the
   next step it belongs to. */
.overview-doc .wrap h1, .overview-doc .wrap h2 { text-wrap: balance; }
/* the lockup's scale and measure (MC 2026-09-17). The page title is the
   cover, so the Vision headline takes the section size: every headline is 48
   and every subhead 18. The ratio is Anthropic's (claude.com at 1440: the text
   under a section title is about a third of it). The lockup reads in a 720px
   column (36em at 20, 40em at 18); a headline may run to 816px (17em at 48).
   Ours ran 1052px; Anthropic holds paragraphs to 517-640px. --measure stays
   undefined. */
.overview-doc .wrap h1 { font-size: clamp(32px, 4.8vw, 48px); max-width: 17em; }
/* a section title may run a little wider than its subhead, as Anthropic's do (704 over 672px) */
.overview-doc .wrap h2 { font-size: clamp(32px, 4.8vw, 48px); max-width: 17em; }
.overview-doc .wrap .body { max-width: 36em; }
.overview-doc .wrap h1 + .body, .overview-doc .wrap h2 + .body { font-size: clamp(16px, 1.8vw, 18px); max-width: 40em; }
.overview-doc .wrap .body { text-wrap: pretty; }
.overview-doc .hero .meta-grid { margin: 0 0 var(--s7); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.overview-doc section.colophon { padding-top: 0; margin-top: calc(-1 * var(--s8)); border-top: none; }
.overview-doc section.colophon > .wrap { padding-top: var(--s5); }
/* The page's ladder (Oct 1, 2026). H1 the page; H2 a part: its number and green label, the
   big heading, the full section break; H3 a chapter inside the part: a grey label, the
   subheading size, a soft rule and half the space; H4 a subsection: a bold line in the body
   face, sentence case. Mono capitals mean two things only: a part's green label and a row's
   grey label. */
.overview-doc section.chapter { border-top: 1px solid var(--rule-soft); padding-top: var(--s6); padding-bottom: var(--s6); }
.overview-doc section.chapter > .wrap { padding-top: 0; }
.overview-doc section:not(.chapter) + section.chapter { margin-top: calc(-1 * var(--s5)); }
.overview-doc section.chapter .kick { margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-subtle); }
.overview-doc section.chapter h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); max-width: 22em; text-wrap: balance; margin: 0; }
.overview-doc section.chapter h3 + .body { margin-top: var(--s3); font-size: clamp(16px, 1.8vw, 17px); max-width: 40em; }
.overview-doc .eyebrow .pn { font-weight: inherit; color: inherit; }
.overview-doc h4.sublab { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--ink); border-top: 1px solid var(--rule-soft); display: flex; align-items: baseline; gap: var(--s3); }
/* a point inside a numbered section: one rung below the section, Inter 600 at the box-title size,
   with no hairline, so the section's points read as its parts (the book's ladder, Oct 6, 2026) */
.overview-doc h5.sublab.point { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--ink-muted); border-top: none; padding-top: 0; margin-top: var(--s6); }
/* the number in the pillar label's mono gray, so 1.1 reads as part of Pillar 1 */
.overview-doc h4.sublab .sn { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-subtle); }
/* the older blocks on this register (MC, Sep 17, 2026: the approach page is built
   on it). Their names take the ladder's faces: Ponomar stays with the headlines,
   a function head is an H3, an agent's or a box's name is a box title, and bold
   text keeps the body's gray, as a point title does, and no text is black against
   it. A number or a key is a row label, never green. Both halves of a before and
   after read in the one box-text gray, joined by the arrow drawing. Inline code is
   the mono face. A note under a list, a box or a diagram sits a step's distance
   from it. Other registers keep the earlier treatment. */
/* The function head keeps the display face on the large rung (MC, 2026-09-23). This rule
   set the Inter H3 treatment that ruling rejected, and out-specified the ruled rule on
   every overview-doc page. Only the letter-spacing is the register's own now. */
.overview-doc .fnhead .fnn { letter-spacing: -0.01em; }
.overview-doc .enc .enm, .overview-doc .bx .bk { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.overview-doc .enc .enm { margin-top: var(--s1); }
.overview-doc .enc.rail .enm.withicon { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin-top: 0; }
/* the agent card's row labels hold one line: the 180px label column every keyed-row block
   on this register uses (.plist, .vs), where 110px broke "Workflows we would run" in two */
@media (min-width: 768px) { .overview-doc .erow { grid-template-columns: 180px 1fr; } }
.overview-doc .blist li strong, .overview-doc .tt .tmrw, .overview-doc .tt .earr { color: var(--ink-muted); }
/* from 768 the arrow sits beside the labels: its 24px centered on their 16px line */
.overview-doc .tt .earr.h { align-self: start; margin-top: -4px; }
.overview-doc :is(.pointrow, .trio, .wflow, .tbox, .lvl, .blist, .plist) + .note { margin-top: var(--s5); }
/* on the site a note is a plain aside: no rule beside it, which made every aside read as a quote
   (MC, Oct 3, 2026: "I never want to see this quote model") */
body.site .note { border-left: none; padding-left: 0; }
.overview-doc .plist .pq, .overview-doc .eown { color: var(--ink-muted); }
.overview-doc .plist .pk, .overview-doc .fnhead .fnk { color: var(--ink-subtle); }
.overview-doc .fnhead .fnl { font-size: 16px; }
.overview-doc code { font-family: var(--font-mono); font-size: 15px; }
/* the read-this-first strip reads in the lockup's 720px column, its text in the box-text gray */
.overview-doc .caveat { max-width: 720px; }
.overview-doc .caveat .cvt { color: var(--ink-muted); max-width: none; }
/* print is at rest: no transition runs (a transition outranks !important, so a
   page switched to print mid-reveal would otherwise print pieces in flight), and
   the returns view's up-arrow keeps its quarter turn */
@media print {
  .overview-doc *, .overview-doc *::before, .overview-doc *::after { transition: none !important; }
  .overview-doc .seq > :not(.arw.up), .overview-doc .seq .marks > img, .overview-doc .wfan > .wnode { opacity: 1 !important; transform: none !important; }
  .overview-doc .seq > .arw.up { opacity: 1 !important; transform: rotate(-90deg) !important; }
  .overview-doc .seq .arw, .overview-doc .wflow::before { clip-path: none !important; }
  .overview-doc .wfan::before, .overview-doc .wfan::after, .overview-doc .wfan > .wtie, .overview-doc .wfan > .wnode::after, .overview-doc .stats .sv { transform: none !important; }
}

/* ---------- reduced motion — a reader who asks for less gets none ----------
   The reveals already sit inside prefers-reduced-motion: no-preference. This stops
   what is left: every transition, every animation, and the smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* band: a strip ruled above and below, the section after it unruled (the homepage's client
   logos, as the live page draws them; MC, Oct 2, 2026). The hero's own bottom space sets the
   gap above it. Last in the sheet, and as specific as the site shell's section padding, so it
   holds at every width. */
section.band, body.site section.band { padding: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
section.band > .wrap { padding-top: 0; padding-bottom: 0; }
section.band + section { border-top: none; }
/* a stats band holds its figures evenly, and the band's rules are the only lines: a stat inside it
   carries no rule of its own (MC, Oct 3, 2026: the labels sat on the bottom rule, under a doubled top) */
section.band .stats { margin: var(--s6) 0; }
section.band .stats .st { border-top: none; padding-top: 0; }
/* product-shot: the real product in an app window: a title bar, the file's real lines numbered (or a
   capture), and one caption line under it */
.pshot { margin: var(--s6) 0 0; }
.pshot .pwin { background: var(--alt); border: 1px solid var(--rule); overflow: hidden; }
.pshot .pbar { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--rule); background: var(--field); }
.pshot .ptitle { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pshot .pcode { margin: 0; padding: var(--s4) var(--s4) var(--s5); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink); }
.pshot .pl { display: block; white-space: pre-wrap; padding-left: 3em; text-indent: -3em; }
.pshot .pn { display: inline-block; width: 3em; text-indent: 0; color: var(--ink-subtle); user-select: none; }
.pshot .pimg { display: block; width: 100%; height: auto; }
.pimgshot picture { display: block; max-width: 390px; }
@media (min-width: 768px) { .pimgshot picture { max-width: none; } section .pimgshot picture { max-width: 760px; } }  /* in a section, the reading width; in a hero, its column */
.pshot figcaption { margin-top: var(--s3); font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 60ch; }
@media (min-width: 768px) { .pshot .pcode { font-size: 14px; padding: var(--s5) var(--s5) var(--s6); } }
/* hero aside: one product shot beside the copy, the claude.com Claude Code hero translated. Stacked under
   the copy on a phone; copy left and the shot right from 1024px, centred on each other. */
.hero.split .hcopy { min-width: 0; }
.hero.split .haside { margin-top: var(--s6); }
.hero.split .haside .pshot { margin: 0; }
@media (min-width: 1024px) {
  .hero.split .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s7); align-items: center; }
  .hero.split .haside { margin-top: 0; }
}
/* demo: the product at work, one use case at a time. The phase-tab idiom on a 1px rule above the
   session, the use cases as a plain list (beside it from 1024, under it below). Radio inputs, no script.
   The accent underline marks the use case on screen, the block's one green mark. */
.demo { margin: var(--s6) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
.demo .dr { position: absolute; opacity: 0; width: 1px; height: 1px; }
.demo .dmenu { display: flex; flex-wrap: nowrap; border-bottom: 1px solid var(--rule); }
.demo .dt { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: var(--s2); margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.3; letter-spacing: 0.04em;
  text-transform: uppercase; text-align: center; color: var(--ink-subtle); cursor: pointer; }
.demo .dt:hover { color: var(--ink); }
.demo .dt:active { color: var(--ink); border-bottom-color: var(--rule); }
.demo .d0:checked ~ .dmenu .t0, .demo .d1:checked ~ .dmenu .t1,
.demo .d2:checked ~ .dmenu .t2, .demo .d3:checked ~ .dmenu .t3 { color: var(--ink); border-bottom-color: var(--accent); }
.demo .d0:focus-visible ~ .dmenu .t0, .demo .d1:focus-visible ~ .dmenu .t1,
.demo .d2:focus-visible ~ .dmenu .t2, .demo .d3:focus-visible ~ .dmenu .t3 { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 2px; }
.demo .dp { display: none; margin: 0; }
.demo .dp picture { display: block; max-width: 390px; }
.demo .pimg { display: block; width: 100%; height: auto; }
.demo .d0:checked ~ .dpanes .p0, .demo .d1:checked ~ .dpanes .p1,
.demo .d2:checked ~ .dpanes .p2, .demo .d3:checked ~ .dpanes .p3 { display: block; }
.demo .dcap { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 60ch; }
.demo .dnotes { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s5); max-width: 60ch; }
.demo .dn { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.demo .dn strong { display: block; font-weight: 600; color: var(--ink); }
@media (min-width: 768px) {
  .demo .dt { flex: none; padding: var(--s3) var(--s4); white-space: nowrap; }
  .demo .dp picture { max-width: none; }
}
@media (min-width: 1024px) {
  .demo.notes { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s7); }
  .demo.notes .dmenu { grid-column: 1; grid-row: 1; }
  .demo.notes .dpanes { grid-column: 1; grid-row: 2; }
  .demo.notes .dcap { grid-column: 1; grid-row: 3; }
  .demo.notes .dnotes { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
}
/* story: a narrative in two to five short paragraphs, at reading size in the reading measure */
/* the transcript shot: a real exchange, the person's turns set apart from the agent's, the source under it */
.txshot .tx { padding: var(--s4); display: grid; gap: var(--s4); font-size: 15px; line-height: 1.5; color: var(--ink); }
.txshot .tx-turn p, .txshot .tx-turn ul { margin: 0 0 var(--s2); }
.txshot .tx-turn ul { padding-left: var(--s4); }
.txshot .tx-who { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-subtle); }
.txshot .tx-person { border-left: 2px solid var(--accent); padding-left: var(--s3); }
.txshot .tx-agent { padding-left: 0; }  /* the agent's turn sits on the window's own margin; the person's carries the rule */
.txshot .tx-gap { color: var(--ink-subtle); }
.txshot .tx-src { margin: var(--s2) 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-subtle); }
@media (min-width: 768px) { .txshot .tx { padding: var(--s5); } }
/* the section icon: one registry icon above the label, in ink, at the point-title size */
.sec-icon { color: var(--ink); margin-bottom: var(--s4); }
.sec-icon .ico { display: block; width: 32px; height: 32px; }
.story { margin-top: var(--s5); max-width: 60ch; }
.story p { margin: 0 0 var(--s4); font-size: 16px; line-height: 1.6; color: var(--ink); }
.story p:last-child { margin-bottom: 0; }

/* collapse: a block behind a labeled toggle (details/summary), closed by default. The label is
   the mono label rung in green with a plus that turns to a minus, a 44px tap target; the block
   keeps its own spacing once open. */
details.collapse { margin-top: var(--s6); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
details.collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 44px; padding: var(--s4) 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-text, var(--accent)); }
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary::after { content: "+"; font-size: 18px; line-height: 1; }
details.collapse[open] > summary::after { content: "\2212"; }
details.collapse > .trio { margin-top: 0; padding-bottom: var(--s6); }

/* consent: the cookie banner a live site page draws (public/shared/site.js), the same bar as the
   React pages' CookieConsent: the footer's ink, its words at 14px, the two choices at 44px */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ink); border-top: 1px solid var(--footer-line); padding: var(--s5) 0; }
.consent-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.consent p { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--footer-line); }
.consent a { color: var(--accent); border-bottom: 1px solid var(--accent); text-decoration: none; }
.consent-btns { display: flex; gap: var(--s3); flex: none; }
.consent button { height: 44px; padding: 0 var(--s5); font-family: var(--font-body); font-size: 15px; font-weight: 500; cursor: pointer; }
.consent-no { background: transparent; color: var(--field); border: 1px solid var(--footer-line); }
.consent-no:hover { background: var(--field); color: var(--ink); }
.consent-yes { background: var(--accent); color: var(--field); border: 1px solid var(--accent); }
.consent-yes:hover { opacity: .85; }
@media (min-width: 768px) { .consent-in { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s7); } }

/* view · shift — the compare cards as one line each: the aspect, the old way in the muted gray,
   an arrow in green, the new way in ink at 500. Stacked on a phone, one row of four
   from 768px. The words From and To stay for a screen reader. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shift { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.shift .srow { display: grid; grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.shift .srow .cardhead { margin: 0; }
.shift .sfrom { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.shift .sarr { display: none; font-family: var(--font-mono); color: var(--accent-text, var(--accent)); }
.shift .sto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 500; }
@media (min-width: 768px) {
  .shift .srow { grid-template-columns: minmax(200px, 1.1fr) 1.4fr auto 1.4fr; align-items: center; gap: var(--s5); }
  .shift .sarr { display: block; }
}

/* view · roster — the function cards as one line each: the function, then its agents in equal
   cells with the agent icon, the muted gray, a soft rule between rows. Stacked on a phone, the
   function above its agents; one line from 768px. */
.roster { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.roster .rrow { display: grid; grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.roster .rrow .cardhead { margin: 0; }
.roster .ragents { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s4); }
.roster .ragents li { padding-left: 0; display: flex; align-items: center; gap: var(--s2); font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.roster .ragents li::before { content: none; }
.roster .ragents .ico { width: 16px; height: 16px; flex: none; color: var(--ink-subtle); }
@media (min-width: 768px) {
  .roster .rrow { grid-template-columns: minmax(200px, 1fr) 3fr; align-items: center; gap: var(--s5); }
}

/* a quote with the speaker's photo: the byline's avatar beside the name */
.trio .saidby.withav { display: flex; align-items: center; gap: var(--s3); }
.trio .saidby .avatar { width: 44px; height: 44px; object-fit: cover; display: block; flex: none; }

/* closer: the page's last line and its one action on a single row, the button beside the
   heading from 768px, stacked under it on a phone; tighter than a section */
section.closer, body.site section.closer { padding: var(--s8) 0; }
section.closer > .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); }
section.closer h2 { margin: 0; }
section.closer .ctas { margin: 0; flex: none; }
@media (min-width: 768px) {
  section.closer > .wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s7); }
}

/* view · org — the functions as a line-drawn org chart: the company node on top, a line down to
   a bar, a line down to each function's node, and under each function a spine with a tick out to
   each agent. Nodes are the only boxes; every line is the 1px rule, drawn orthogonally. Stacked
   on a phone and a tablet, each function keeping its spine; six columns from 1024px. */
.org { margin-top: var(--s6); }
.org .otop { display: flex; justify-content: flex-start; position: relative; padding-bottom: var(--s5); }
.org .otop::after { content: ""; position: absolute; left: var(--s4); bottom: 0; width: 1px; height: var(--s5); background: var(--rule); }
.org .onode { border: 1px solid var(--ink); background: var(--alt); padding: var(--s3) var(--s5); font-size: 15px; font-weight: 500; color: var(--ink); }
/* on a phone and a tablet a trunk runs down the left from the company to every function, a tick
   out to each; it stops at the last function's tick */
.org .ocols { display: grid; grid-template-columns: 1fr; gap: var(--s5); position: relative; margin-left: var(--s4); padding-left: var(--s5); border-left: 1px solid var(--rule); }
.org .ocol { position: relative; }
.org .ocol::before { content: ""; position: absolute; left: calc(-1 * var(--s5)); top: 18px; width: var(--s5); height: 1px; background: var(--rule); }
.org .ocol:last-child::after { content: ""; position: absolute; left: calc(-1 * var(--s5) - 1px); top: 19px; bottom: 0; width: 1px; background: var(--field); }
.org .ofn { display: flex; align-items: center; gap: var(--s2); border: 1px solid var(--rule); background: var(--alt); padding: var(--s2) var(--s3); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.org .ofn .ico { width: 16px; height: 16px; flex: none; }
.org .oagents { position: relative; gap: 0; margin: 0 0 0 var(--s4); padding: var(--s2) 0 0 var(--s5); border-left: 1px solid var(--rule); }
.org .oagents li { position: relative; padding: var(--s2) 0; font-size: 14px; line-height: 1.35; color: var(--ink-muted); }
.org .oagents li::before { content: ""; position: absolute; left: calc(-1 * var(--s5)); top: calc(var(--s2) + 0.65em); width: var(--s4); height: 1px; background: var(--rule); }
/* the spine stops at the last agent's tick */
.org .oagents li:last-child::after { content: ""; position: absolute; left: calc(-1 * var(--s5) - 1px); top: calc(var(--s2) + 0.65em + 1px); bottom: 0; width: 1px; background: var(--field); }
.org .oagents .ico { display: none; }
/* the columns and the bar follow the number of functions (--n, set by the renderer), so four
   functions draw a bar from the first to the last, never past it (Oct 7, 2026) */
@media (min-width: 1024px) {
  .org .otop { justify-content: center; }
  .org .otop::after { left: 50%; }
  .org .ocols { grid-template-columns: repeat(var(--n, 6), 1fr); gap: 0; padding-top: var(--s5); margin-left: 0; padding-left: 0; border-left: 0; }
  .org .ocol:last-child::after { content: none; }
  .org .ocols::before { content: ""; position: absolute; top: 0; left: calc(100% / (2 * var(--n, 6))); right: calc(100% / (2 * var(--n, 6))); height: 1px; background: var(--rule); }
  .org .ocol { margin: 0 var(--s2); }
  .org .ocol::before { top: calc(-1 * var(--s5)); left: 50%; width: 1px; height: var(--s5); }
}

/* form — a short survey: each question numbered in the mono green, its label in ink at 17px and a
   hint in the subtle gray; answers in the alt field with the soft rule, the accent on focus and on
   a chosen answer; every target 44px. The thank-you takes the form's place once it is sent. */
.form { margin-top: var(--s6); max-width: 680px; }
.form .fq { border: 0; margin: 0 0 var(--s7); padding: 0; min-width: 0; }
.form .fq-l { display: flex; gap: var(--s3); padding: 0; margin-bottom: var(--s4); font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.form .fq-n { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text, var(--accent)); padding-top: 2px; flex: none; }
.form .fq-h { font-family: var(--font-mono); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); }
.form .fscale { display: flex; flex-wrap: wrap; gap: var(--s2); }
.form .fscale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .fscale span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); background: var(--alt); font-family: var(--font-mono); font-size: 14px; color: var(--ink); cursor: pointer; }
.form .fscale label:hover span { border-color: var(--accent); }
.form .fscale input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--field); }
.form .fscale input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form textarea, .form input[type="text"], .form input[type="email"], .form select { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--alt); border: 1px solid var(--rule); padding: var(--s3) var(--s4); resize: vertical; }
.form textarea:focus, .form input[type="text"]:focus, .form input[type="email"]:focus, .form select:focus { outline: none; border-color: var(--accent); }
/* a plain form: short labels, tighter rhythm, for a sign-up rather than a survey */
.form.plain .fq { margin-bottom: var(--s5); }
.form.plain .fq-l { font-size: 15px; margin-bottom: var(--s2); }
.form select { min-height: 48px; }
.form .fopts { display: flex; flex-direction: column; gap: var(--s2); }
.form .fopt { display: flex; gap: var(--s3); align-items: flex-start; min-height: 44px; box-sizing: border-box; padding: var(--s3) var(--s4); border: 1px solid var(--rule); background: var(--alt); font-size: 15px; line-height: 1.45; color: var(--ink-muted); cursor: pointer; }
.form .fopt:hover, .form .fopt:has(input:checked) { border-color: var(--accent); }
.form .fopt input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.form .fopt strong { color: var(--ink); font-weight: 500; }
.form .fsend { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.form .ferr { margin: 0; font-size: 14px; color: var(--ink); }
.fthanks { margin-top: var(--s6); max-width: 680px; border-left: 2px solid var(--accent); background: var(--alt); padding: var(--s5) var(--s6); }
.fthanks .ft { margin: 0 0 var(--s2); font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.fthanks p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* a mark is one download: the whole card is the link, its file named with the go-arrow
   (Buttons and links: a whole card that goes somewhere is one link; Law 8) */
.mk .mklink { display: block; color: inherit; text-decoration: none; }
.mk .mklink .swv { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); }
.mk .mklink .swv svg { width: 14px; height: 14px; color: var(--accent); }
.mk .mklink:hover .swv, .mk .mklink:focus-visible .swv { text-decoration: underline; }

/* ---------- the site, after the Apple-standard review (Oct 3, 2026) ----------
   Graduated from the preview at /staging/next on Oct 3, 2026. A rule still awaiting approval is scoped
   to body.next, which only the preview carries. */
/* one heading scale on the site's marketing pages (MC, Oct 3, 2026), measured against Apple's sentence
   headlines (48-56px), Anthropic (58), Linear (64/48) and Claude (68/49): the title 56px, a section title
   40px, the homepage included. The reading register (essays, training, legal) keeps 48/30. */
body.site:not(.article) header.hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; }
body.site:not(.article) section h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; }
/* a chapter sits inside the part before it, so its title steps down to the h3 role of the type scale
   (clamp 22-28px, design-tokens.json), never near a part's 40px (Oct 6, 2026) */
body.site:not(.article) section.chapter h3 { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }
/* mono marks labels about the page (eyebrows, dates, numbers, file names); what a person reads as
   content is Inter: step titles, people's names and roles, stat descriptions */
body.site .wflow .cardhead .nm { font-family: var(--font-body); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 22px; padding-top: 0; }
body.site .stats .sl { font-family: var(--font-body); font-size: 15px; text-transform: none; letter-spacing: 0; line-height: 1.45; color: var(--ink-muted); }
body.site .trio .said + .saidby { font-family: var(--font-body); font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
body.site .card .kick { font-family: var(--font-body); font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
body.site .byline .who .role { font-family: var(--font-body); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink-muted); margin-top: 2px; }
/* the footer as a directory: one column per group on a phone, four across from the tablet up */
footer .fcols { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5); }
footer .fcol { display: flex; flex-direction: column; }
footer .fcol .fh { margin: 0 0 var(--s2); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--footer-conf); }
footer .fcol a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--footer-line); text-decoration: none; }
footer .fcol a:hover { color: var(--field); }
@media (min-width: 768px) { footer .fcols { grid-template-columns: repeat(4, 1fr); } }

/* ---- entries · lead and tabs: the blog index, set in type (the creative director's ruling on three
   designers' options, Oct 12, 2026, measured against anthropic.com/news: one display line, no covers, no
   boxes, the list on hairlines; MC: "so much bold, so much text everywhere") ---- */
.entries.lead { margin-top: var(--s6); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.entries.lead .entry { display: block; padding: var(--s7) 0; border: none; color: inherit; }
.entries.lead .entry .ek { margin: 0; }
.entries.lead .entry .et { margin: var(--s3) 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; color: var(--ink); max-width: 26em; }
.entries.lead .entry .ex { margin: var(--s3) 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-muted); max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entries.lead .entry .earr { display: block; position: static; margin-top: var(--s5); }
.entries.lead .entry:hover .et { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* the feature row, open: three items under a hairline, never a box, titles medium and never bold (the
   creative director's ruling, Oct 12, 2026, after anthropic.com/news; MC: "we're the only ones using this
   big bold font"). A page opts in with open: true while the boxed row stays live elsewhere. */
.entries.feature.open { gap: var(--s6); }
.entries.feature.open .entry { background: none; border: none; border-top: 1px solid var(--rule); padding: var(--s4) 0 0; }
.entries.feature.open .entry:hover { border-top-color: var(--ink); }
.entries.feature.open .entry .et { font-size: clamp(18px, 2vw, 20px); font-weight: 500; line-height: 1.35; }
.entries.feature.open .entry .earr { padding-top: var(--s4); }
.entries.feature.open .entry .ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .entries.feature.open.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the tabs: the phase-tab idiom the demo block owns (mono capitals, a green rule under the open one) */
.entries.tabs { border-top: none; margin-top: var(--s6); }
.entries.tabs .etr { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.entries.tabs .etlabels { display: flex; flex-wrap: nowrap; margin: 0; border-bottom: 1px solid var(--rule); }
/* the tabs read as the two categories they are, in the text face at body size (MC, Oct 12, 2026: "SO subtle you can't see it") */
.entries.tabs .etlabels label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--s3) var(--s4); margin-bottom: -1px; border-bottom: 2px solid transparent; font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.3; text-align: center; color: var(--ink-muted); cursor: pointer; }
.entries.tabs .etlabels label:hover { color: var(--ink); }
.entry .elab { margin: 0 0 var(--s2); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
@media (min-width: 768px) { .entries.tabs .etlabels label { flex: none; padding: var(--s3) var(--s4); white-space: nowrap; } }
.entries.tabs .etpanel { display: none; }
.entries.tabs .etr:nth-of-type(1):checked ~ .etpanel:nth-of-type(1),
.entries.tabs .etr:nth-of-type(2):checked ~ .etpanel:nth-of-type(2),
.entries.tabs .etr:nth-of-type(3):checked ~ .etpanel:nth-of-type(3),
.entries.tabs .etr:nth-of-type(4):checked ~ .etpanel:nth-of-type(4),
.entries.tabs .etr:nth-of-type(5):checked ~ .etpanel:nth-of-type(5),
.entries.tabs .etr:nth-of-type(6):checked ~ .etpanel:nth-of-type(6) { display: block; }
.entries.tabs .etr:nth-of-type(1):checked ~ .etlabels label:nth-of-type(1),
.entries.tabs .etr:nth-of-type(2):checked ~ .etlabels label:nth-of-type(2),
.entries.tabs .etr:nth-of-type(3):checked ~ .etlabels label:nth-of-type(3),
.entries.tabs .etr:nth-of-type(4):checked ~ .etlabels label:nth-of-type(4),
.entries.tabs .etr:nth-of-type(5):checked ~ .etlabels label:nth-of-type(5),
.entries.tabs .etr:nth-of-type(6):checked ~ .etlabels label:nth-of-type(6) { color: var(--ink); border-bottom-color: var(--accent); }
.entries.tabs .etr:nth-of-type(1):focus-visible ~ .etlabels label:nth-of-type(1),
.entries.tabs .etr:nth-of-type(2):focus-visible ~ .etlabels label:nth-of-type(2),
.entries.tabs .etr:nth-of-type(3):focus-visible ~ .etlabels label:nth-of-type(3),
.entries.tabs .etr:nth-of-type(4):focus-visible ~ .etlabels label:nth-of-type(4),
.entries.tabs .etr:nth-of-type(5):focus-visible ~ .etlabels label:nth-of-type(5),
.entries.tabs .etr:nth-of-type(6):focus-visible ~ .etlabels label:nth-of-type(6) { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 2px; }

/* the list: one row a link on a hairline. On a phone the date and source share a mono line above the
   title; from 768px a row reads date | title | source | arrow */
.entries.tabs .elist { display: block; margin: 0; }
.entries.tabs .erow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date src src" "title title arr"; gap: var(--s2) var(--s4); align-items: baseline; min-height: 44px; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); color: inherit; }
.entries.tabs .erow .edate { grid-area: date; }
.entries.tabs .erow .esrc { grid-area: src; }
.entries.tabs .erow .etl { grid-area: title; }
.entries.tabs .erow .earr { grid-area: arr; position: static; align-self: center; width: 18px; height: 18px; }
.entries.tabs .erow .edate, .entries.tabs .erow .esrc { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.entries.tabs .erow .etl { font-size: 17px; line-height: 1.45; color: var(--ink); }
.entries.tabs .erow:hover .etl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .entries.tabs .erow { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 200px) 18px; grid-template-areas: "date title src arr"; }
}
.entries.tabs .emore { margin-top: var(--s5); }
.entries.tabs .emore > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5); border: 1px solid var(--rule); background: var(--alt); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); cursor: pointer; list-style: none; }
.entries.tabs .emore > summary::-webkit-details-marker { display: none; }
.entries.tabs .emore > summary:hover { border-color: var(--ink); }
.entries.tabs .emore[open] > summary { display: none; }