/* ----------------------------------------------------------------
   Choreograph — a running instrument printed on fine paper
   ---------------------------------------------------------------- */

:root {
  --paper: #EDE8DA;
  --paper-2: #E6E0CF;
  --ink: #3E2438;
  --ink-2: #5A4A52;
  --mute: #5A4A52;
  --violet: #5A3A7A;
  --teal: #286261;
  --sand: #B8AC9C;
  --red: #9C3F2B;
  --instrument: #0B0A0C;
  --rule: rgba(62, 36, 56, 0.16);
  --rule-strong: rgba(62, 36, 56, 0.42);

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --text: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --mono: "Courier Prime", "Courier New", monospace;

  --margin: clamp(20px, 4vw, 64px);
  --gutter: clamp(28px, 4vw, 72px);
  --line: 1.85rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  scrollbar-color: var(--sand) var(--paper);
  accent-color: var(--violet);
}

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

html {
  background: var(--paper);

  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body { margin: 0; min-height: 100dvh; background: var(--paper); font-feature-settings: "kern" 1, "liga" 1; }

::selection { background: var(--violet); }
input, textarea, [contenteditable] { caret-color: var(--violet); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 1px; }
a { text-decoration-color: color-mix(in srgb, var(--violet) 45%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
img, video, svg { display: block; max-width: 100%; }
p { margin: 0 0 var(--line); }
h1, h2, h3 { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

code, .mono { overflow-wrap: anywhere; }
pre { margin: 0; }
::placeholder { opacity: 1; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- page and sections ------------------------------------------ */

.page { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 var(--margin); }
.section { position: relative; padding: 3rem 0 4.4rem; border-top: 1px solid var(--rule-strong); }
.section > h2, .section > .head h2, .section > .two-col h2 { margin-bottom: 1.4rem; }
.section > h2 { max-width: 24ch; }
.section h3 { margin-bottom: 0.6rem; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }

.lede { max-width: 60ch; }

.small-print { margin-top: 0.8rem; }

.two-col { display: grid; gap: var(--gutter); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } .two-col.wide-right { grid-template-columns: 2fr 3fr; } .two-col.wide-left { grid-template-columns: 3fr 2fr; } }
.three-col { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .three-col { grid-template-columns: 1fr 1fr 1fr; } }
.two-col > *, .three-col > *, .spread > *, .versus > *, .stack-row > *, .bio > * { min-width: 0; }

.subpage-title { max-width: 18ch; margin-bottom: 1.2rem; }

/* ---- masthead --------------------------------------------------- */

.masthead { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule-strong); }
.masthead .page { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.8rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.wordmark img { width: 34px; height: auto; }
.masthead nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; align-items: center; }
.masthead nav a { text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid transparent; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { border-bottom-color: var(--violet); }

.masthead nav a.soon::after { content: " · soon"; }
.masthead nav .cta a { border: 1px solid var(--ink); padding: 0.5rem 0.9rem; }
.masthead nav .cta a:hover { background: var(--ink); border-bottom-color: var(--ink); }

.menu { display: none; }
@media (max-width: 82em) {
  .masthead nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; border: 1px solid var(--ink); padding: 0.45rem 0.8rem; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--ink); }
  .menu ul { position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: 15rem; list-style: none; margin: 0; padding: 0.5rem 0; background: var(--paper); border: 2px solid var(--ink); }
  .menu li a { display: block; padding: 0.7rem 1.1rem; text-decoration: none; }
  .menu li a:hover { background: var(--paper-2); }

  .menu li a.soon::after { content: " · soon"; }
}

/* ---- controls --------------------------------------------------- */

.btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ink); border: 1px solid var(--ink); padding: 0.85rem 1.3rem; text-decoration: none; cursor: pointer; transition: background 160ms var(--ease-out); }
.btn:hover { background: var(--violet); border-color: var(--violet); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.textlink { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--violet) 45%, transparent); }
.textlink:hover { border-bottom-color: var(--violet); }
.textlink::after { content: " →"; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--violet) 45%, transparent); }
.linkbtn:hover { border-bottom-color: var(--violet); }
.linkbtn:disabled { border-bottom-color: transparent; cursor: default; }

.field { position: relative; }
.field input, .field textarea, .field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); padding: 0.6rem 0; border-radius: 0; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--violet); box-shadow: 0 1px 0 var(--violet); }
.field textarea { resize: vertical; min-height: 6rem; }
.field label { display: block; margin-bottom: 0.1rem; }
.notify { display: grid; grid-template-columns: 1fr auto; gap: 0.9rem; align-items: end; max-width: 34rem; }

.notify .hint { grid-column: 1 / -1; }
.field .error { display: none; margin-top: 0.4rem; }
.field.invalid .error { display: block; }
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--red); }
.contact-form { display: grid; gap: 1.4rem; max-width: 40rem; }
.contact-form .row { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .contact-form .row { grid-template-columns: 1fr 1fr; } }

/* ---- status pills: the instrument's own idiom ------------------- */

.pill { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.5rem 0.85rem 0.45rem; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; max-width: 100%; }
.pill::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; flex: none; transition: opacity 200ms var(--ease-out); }

.pill.busy::before { animation: blink 900ms steps(2, end) infinite; }
.pill.wrap { white-space: normal; }
@keyframes blink { 50% { opacity: 0.25; } }
.pill.land::before { animation: dotin 220ms var(--ease-out); }
@keyframes dotin { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.actor { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; vertical-align: 0.05em; margin-right: 0.35em; }
.actor.human { background: var(--ink); }
.actor.agent { background: var(--teal); }
.actor.system { background: transparent; border: 1.5px solid var(--sand); }

/* ---- figures: the product's own black UI on the page ------------ */

.fig { margin: 0; }
.fig-frame { position: relative; background: var(--instrument); border-top: 1px solid var(--rule-strong); }
.fig-frame img, .fig-frame video { width: 100%; height: auto; }
.fig-cap { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; align-items: baseline; padding-top: 0.6rem; margin-top: 0; border-top: 1px solid var(--rule); }
.fig-no { white-space: nowrap; }
.fig-src { grid-column: 2; }
.fig-legend { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.fig-legend li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.fig-legend a { text-decoration: none; }

/* the film */
.film { position: relative; aspect-ratio: 16 / 9; background: var(--instrument); overflow: hidden; box-shadow: 0 30px 60px -32px rgba(62, 36, 56, 0.55); }
.film video { width: 100%; height: 100%; object-fit: cover; background: var(--instrument); }
.film .poster { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; background: transparent; display: grid; place-items: center; }
.film .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film .poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,12,0.05), rgba(11,10,12,0.45)); }
.film .play { position: relative; width: 6rem; height: 6rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.85); display: grid; place-items: center; background: rgba(11,10,12,0.28); backdrop-filter: blur(4px); transition: transform 220ms var(--ease-out), background 220ms var(--ease-out); }
.film .play svg { width: 1.7rem; height: 1.7rem; margin-left: 0.3rem; fill: #fff; }
.film .poster:hover .play { transform: scale(1.06); background: rgba(90,58,122,0.55); }
.film .poster .label { position: absolute; left: 1.2rem; bottom: 1rem; }
.film.playing .poster { display: none; }
.film .fallback { position: absolute; inset: 0; display: none; place-items: center; padding: 2rem; text-align: center; }
.film.failed .fallback { display: grid; }

/* ---- the spread (first viewport) ------------------------------- */

.spread { display: grid; gap: 2.8rem; padding: 2.8rem 0 3.2rem; }
@media (min-width: 1000px) {
  .spread { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: 0; }
  .spread .verso { padding-right: 3rem; border-right: 1px solid var(--rule-strong); }
  .spread .recto { padding-left: 3rem; }
}
.verso .flock { width: min(100%, 300px); height: auto; margin: 0 0 1rem -6px; }
@media (min-width: 1000px) { .verso .flock { width: min(100%, 340px); } }
.verso h1 { max-width: 11ch; margin-bottom: 1.3rem; }
.verso .tagline { margin-bottom: 1.5rem; }
.verso .lede { margin-bottom: 1.6rem; max-width: 54ch; }
.verso .actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin-top: 1.1rem; }
.transcript { margin-top: 1rem; }
.transcript summary { cursor: pointer; list-style: none; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::before { content: "+"; margin-right: 0.5rem; }
.transcript[open] summary::before { content: "–"; }
.transcript p { max-width: 66ch; margin-top: 0.8rem; }

/* ---- the record (Figure 3) --------------------------------------- */

.record-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.record-status { display: flex; align-items: center; gap: 1rem; min-height: 2.6rem; flex-wrap: wrap; }
.record-status { min-width: 0; max-width: 100%; }
.record-status .pill { white-space: normal; }
.record-frame { background: var(--paper-2); border-top: 1px solid var(--rule-strong); padding: 1rem 1.1rem 0.6rem; }
.ledger { width: 100%; border-collapse: collapse; }
.ledger thead th { text-align: left; padding: 0 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ledger tbody tr { position: relative; }
.ledger td { vertical-align: baseline; padding: 0.55rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
.ledger td.folio-col { white-space: nowrap; width: 5.5rem; }
.ledger td.hash { white-space: nowrap; cursor: help; }
.ledger td.hash .now { display: block; }
.ledger td.when { white-space: nowrap; }
.ledger td.amt { text-align: right; white-space: nowrap; }
.ledger td.edge { white-space: nowrap; }
.ledger td.edge .arrow { margin: 0 0.3rem; }
.ledger td.who { white-space: nowrap; }
@media (min-width: 761px) { .ledger td.memo { min-width: 16rem; } }
.ledger td[contenteditable] { outline: none; cursor: text; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--violet) 35%, transparent); }
.ledger td[contenteditable]:hover { background: color-mix(in srgb, var(--violet) 6%, transparent); }
.ledger td[contenteditable]:focus { box-shadow: inset 0 -2px 0 var(--violet); background: color-mix(in srgb, var(--violet) 8%, transparent); }

.ledger tr.broken td.hash .rec { text-decoration: line-through; }
.ledger tr.broken::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--red); opacity: 0.8; }

.ledger tr.after td.hash .rec { text-decoration: line-through; }

.record-foot { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.record-foot .hint { max-width: 62ch; margin: 0; }
.record-foot .controls { display: flex; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr { display: block; }
  .ledger tbody tr { display: grid; grid-template-columns: 5rem 1fr; gap: 0 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
  .ledger td { display: block; padding: 0.12rem 0; border: 0; white-space: normal; }
  .ledger td.folio-col { grid-row: 1; }
  .ledger td.hash { grid-column: 2; overflow-wrap: anywhere; white-space: normal; }
  .ledger td.when, .ledger td.who, .ledger td.edge, .ledger td.amt, .ledger td.memo { grid-column: 2; }
  .ledger td.amt { text-align: left; }
  .ledger td::before { content: attr(data-l); margin-right: 0.5rem; }
  .ledger td.folio-col::before, .ledger td.hash::before { content: none; }
}

/* ---- listings: the declaration as code -------------------------- */

.listing { background: var(--paper-2); border-top: 1px solid var(--rule-strong); padding: 1rem 1.1rem; overflow-x: auto; position: relative; }
.listing-cue { display: none; margin: 0 0 0.4rem; }
@media (max-width: 900px) {
  .listing-cue { display: block; }
  .listing { -webkit-overflow-scrolling: touch; background-image: linear-gradient(to left, var(--paper-2), transparent 2.5rem); background-attachment: local; background-position: right; background-repeat: no-repeat; background-size: 2.5rem 100%; }
}
.listing pre { display: inline-block; min-width: 100%; white-space: pre; tab-size: 4; }

.listing .hl { display: block; margin: 0 -1.1rem; padding: 0.55em 1.1rem; background: color-mix(in srgb, var(--teal) 12%, transparent); }
.listing .hl + .hl { margin-top: -0.55em; }
.listing-cap { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; align-items: baseline; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.key-list { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.key-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; padding: 0.35rem 0; }
.key-list li::before { content: ""; width: 0.6rem; height: 1em; background: color-mix(in srgb, var(--teal) 28%, transparent); margin-top: 0.25em; }

/* ---- entries (guarantees, capabilities, use cases) --------------- */

.entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.section > .visually-hidden + .entries { border-top: 0; margin-top: -1.2rem; }
.entries > li { display: grid; gap: 0.5rem 2rem; padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .entries > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .entries > li .fig { grid-column: 1 / -1; margin-top: 0.6rem; } }
.entries h3 { margin-bottom: 0.3rem; }
.entries .promise { margin: 0 0 0.4rem; }
.entries p { margin-bottom: 0.6rem; }
.entries .proof { border-top: 1px dotted var(--rule-strong); padding-top: 0.5rem; margin-top: 0.4rem; }
.entries .proof b { margin-right: 0.5rem; }
.entries ul { margin: 0.2rem 0 0.6rem 1.1rem; padding: 0; }
.entries ul li { margin-bottom: 0.25rem; }

.status.live::before { content: "●"; margin-right: 0.4em; }
.status.designed::before { content: "○"; margin-right: 0.4em; }

/* ---- lines (SQL, CLI, proof strip) ------------------------------- */

.sql { list-style: none; margin: 0.9rem 0 var(--line); padding: 0; border-top: 1px solid var(--rule-strong); }
.sql li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.sql .c { display: block; margin-bottom: 0.2rem; }
.sql code { display: block; white-space: pre-wrap; }

.versus { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .versus { grid-template-columns: 2fr 3fr; } }
.versus > div { border-top: 3px double var(--rule-strong); padding-top: 1rem; }

.versus .verdict { margin-left: 0.5rem; }

.versus .prog { white-space: pre-wrap; margin: 0.6rem 0 1rem; }

.states { display: flex; align-items: center; flex-wrap: wrap; margin: 0.6rem 0 0.6rem; }
.states .s { padding: 0.45rem 0.7rem; border: 1px solid var(--rule-strong); background: var(--paper); }
.states .s.h { border-color: var(--ink); }
.states .e { width: 1.3rem; height: 1px; background: var(--rule-strong); position: relative; }
.states .e.agent { background: var(--teal); }
.states .e.human { background: var(--ink); }
.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.stack-row { display: grid; gap: var(--gutter); align-items: start; }
@media (min-width: 900px) { .stack-row { grid-template-columns: 1fr 1fr; } }
.stack-list { list-style: none; margin: 0; padding: 0; }
.stack-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }

/* ---- articles table (EU AI Act) --------------------------------- */

.articles { width: 100%; border-collapse: collapse; }
.articles th { text-align: left; padding: 0 1rem 0.5rem 0; border-bottom: 1px solid var(--rule-strong); }
.articles td { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.articles td.art { white-space: nowrap; }
.articles td.st { white-space: nowrap; }
.tag { display: inline-block; padding: 0.35rem 0.6rem; border: 1px solid currentColor; }

@media (max-width: 760px) {
  .articles thead { display: none; }
  .articles, .articles tbody, .articles tr, .articles td { display: block; }
  .articles tr { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  .articles td { border: 0; padding: 0.15rem 0; }

}

.faq { border-top: 1px solid var(--rule-strong); padding-top: 0.3rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 0.9rem 2rem 0.9rem 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.8rem; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { margin: 0 0 1rem; max-width: 66ch; }

.bio { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .bio { grid-template-columns: 1fr 1fr 1fr; } }
.bio h3 { margin-bottom: 0.6rem; }
.bio ul { margin: 0; padding: 0; list-style: none; }
.bio li { margin-bottom: 0.5rem; }

/* ---- colophon (footer) ------------------------------------------ */

.colophon { border-top: 3px double var(--rule-strong); margin-top: 3rem; padding: 2.6rem 0 3.6rem; }
.colophon .grid { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .colophon .grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.colophon .disclosure { max-width: 60ch; }
.colophon h3 { margin: 0 0 0.6rem; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: 0.35rem; }
.colophon .legal { margin-top: 2.2rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- motion: one authored grammar ------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .ledger tbody tr.arrive { animation: rowin 600ms var(--ease-out) both; }
  @keyframes rowin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .ledger tbody tr.sweep td.hash { animation: sweep 300ms var(--ease-out); animation-delay: calc(var(--i) * 35ms); }
  @keyframes sweep { 0% { color: var(--teal); } 100% { color: var(--mute); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill.busy::before, .pill.land::before { animation: none; }
  .btn, .film .play { transition: none; }
}

@media print {
  .masthead, .film .poster, .record-foot, .notify { display: none; }
}

/* ---- figure insets: the readable detail beside the untouched frame ---- */
.fig.with-inset .fig-pair { display: grid; gap: 0.5rem; }
@media (min-width: 900px) { .fig.with-inset .fig-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } .fig.with-inset .fig-pair.stacked { grid-template-columns: 1fr; } }
.fig.with-inset .fig-frame.inset { border-top: 0; }
.fig.with-inset .fig-frame.inset img { object-fit: contain; }
.inset-label { display: block; padding: 0.3rem 0 0; }

/* Round 3: the same paper, more evidence per page. */
.section { padding: 2rem 0 2.8rem; }
.section > h2, .section > .head h2, .section > .two-col h2 { margin-bottom: 1rem; }

.verso .flock { width: min(100%, 225px); }
.spread { padding: 2rem 0 2.8rem; }

.round-three .section p { margin-bottom: 1rem; }
.round-three .entries > li { gap: 1.5rem 2rem; padding: 2rem 0; }
.round-three .entries > li > * { min-width: 0; }
.round-three .entries > li > .diagram { margin-top: 0; }
.round-three .entries .capability-evidence { min-width: 0; }
.capability-evidence .fig { margin: 0; }
.capability-evidence .fig-frame { background: transparent; }
.capability-evidence .fig-frame img { max-height: 380px; object-fit: contain; object-position: left; width: auto; max-width: 100%; }
.capability-evidence .diagram-scroll { margin-top: 1rem; }
.capability-entries .diagram-scroll { overflow-x: auto; }
.capability-entries .architecture { min-width: 590px; }
.guarantees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.8rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.guarantees li { min-width: 0; }
.guarantees .fig-frame { background: transparent; border-top: 0; height: 300px; display: flex; align-items: end; justify-content: start; }
.guarantees .fig-frame img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.guarantees .fig-cap { margin-top: 0.6rem; }

.guarantees p { max-width: 56ch; }
.architecture { display: block; width: 100%; height: auto; overflow: visible; }
.architecture text { font-family: var(--text); fill: var(--ink); stroke: none; font-size: 20px; }
.architecture .svg-small { font-size: 15px; fill: var(--ink-2); }
.architecture .node rect { fill: var(--paper); stroke: var(--teal); stroke-width: 1.4; }
.architecture .node.human rect { stroke: var(--ink); }
.architecture .node.effect rect { stroke: var(--red); stroke-dasharray: 6 5; }
.architecture .edge-line { fill: none; stroke: var(--teal); stroke-width: 1.4; }
.architecture .edge-line.human { stroke: var(--ink); }
.architecture .edge-line.system { stroke: var(--mute); }
.architecture .edge-line.effect { stroke: var(--red); stroke-dasharray: 6 5; }
.architecture .edge-line.reopen { stroke: var(--mute); stroke-dasharray: 2 5; }
.architecture .gate { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.diagram-scroll { overflow-x: auto; padding: 0.5rem 0; }
.diagram-scroll:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.diagram-scroll .architecture { min-width: 680px; }
.diagram-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.5rem 0; }
.diagram-key span::before { content: ''; display: inline-block; width: 1.5rem; margin-right: 0.4rem; vertical-align: middle; border-top: 1px dotted var(--mute); }
.diagram-key .agent-key::before { border-top: 1px solid var(--teal); }
.diagram-key .human-key::before { border-top: 1px solid var(--ink); }
.diagram-key .effect-key::before { border-top: 1px dashed var(--red); }
.diagram-key .gate-key::before { display: none; }
.diagram-open { display: inline-block; margin-top: 0.5rem; }
.stack-section .architecture .node.enterprise rect { fill: color-mix(in srgb, var(--violet) 5%, var(--paper)); stroke: var(--violet); }
.stack-section .architecture .node.governance rect { fill: color-mix(in srgb, var(--teal) 9%, var(--paper)); stroke: var(--teal); }
.stack-section .architecture .node.external rect { fill: var(--paper-2); stroke: var(--mute); }
.stack-section .architecture a:hover rect, .stack-section .architecture a:focus rect { stroke-width: 2.5; }
.stack-desktop { max-width: 1120px; margin: 0 auto; }
.stack-mobile { display: none; }
.stack-copy { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-top: 1.25rem; }

.coordination-gloss { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: start; }
.coordination-gloss details { flex: 1 1 145px; }
.coordination-gloss summary { cursor: pointer; }
.coordination-gloss p { margin: 0.5rem 0 0; }
.coord-touch { fill: transparent; stroke: var(--teal); stroke-width: 1; }
.query-strip { min-width: 0; }
.query-tabs { display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.8rem; }
.query-tabs a { padding: 0.35rem 0; text-decoration: none; }
.query-tabs a[aria-selected="true"] { text-decoration: underline; text-underline-offset: 0.35rem; }
.query-panel { padding: 1rem 0; }
.query-panel[hidden] { display: none; }

.query-panel pre { margin: 0.6rem 0; padding: 0.85rem; background: var(--paper-2); overflow-x: auto; }

.query-panel .query-output { background: transparent; border-top: 1px solid var(--rule); }

.evidence-player { position: relative; }
.evidence-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ink); cursor: pointer; }
.evidence-play[hidden] { display: none; }
.evidence-play img { display: block; width: 100%; height: 100%; object-fit: contain; }
.evidence-play span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 90%; padding: 0.65rem 0.9rem; background: var(--paper); }
.evidence-play:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.evidence-play:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.guard-key-icon { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.query-panel details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.compare-pair .fig-frame { background: var(--paper); }
.compare-pair .fig { margin-bottom: 2rem; }
.compare-pair .fig-frame img { max-width: 1100px; margin: 0 auto; }
.about-opening .fig { max-width: 400px; }
.release-band .fig { align-self: center; }
.release-band .notify { margin: 1rem 0; }
.round-three .colophon { margin-top: 0; }
@media (min-width: 900px) {
  .capability-entries > li { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
  .capability-entries > li .fig { grid-column: auto; }

  .landing .ledger td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
}
@media (max-width: 899px) {
  .stack-copy { grid-template-columns: 1fr; gap: 0; }
  .guarantees { grid-template-columns: 1fr; }
  .guarantees .fig-frame { height: auto; max-height: none; }
  .guarantees .fig-frame img { max-height: 380px; }
  .stack-desktop { display: none; }
  .stack-mobile { display: block; max-width: 450px; margin: auto; }
  .stack-mobile .architecture text { font-size: 17px; }
  .stack-mobile .architecture .svg-small { font-size: 12px; }
  .coordination-gloss details { flex-basis: 100%; }
  .diagram-scroll::after { content: 'Scroll sideways to read the whole diagram →'; display: block; margin-top: 0.5rem; }
  .about-opening .fig { max-width: 100%; }

}

/* Founder review: business consequence first, evidence at its natural proportion. */
.business-first .spread { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; }
.business-first .verso { text-align: center; padding-right: 1.6rem; }
.business-first .verso .flock { width: min(100%, 340px); margin: 0 auto -0.2rem; }
.hero-wordmark { margin: 0 0 1rem; }
.business-first .verso .lede { max-width: 39ch; margin: 1rem auto; }

.business-first .verso .notify { text-align: left; max-width: 420px; margin: 1.3rem auto; }
.business-first .verso .actions { justify-content: center; }
.film-headline { margin: 0 0 1.4rem; max-width: 20ch; }
.business-first .recto { border-left: 0; padding-left: 0; }
.business-first .fig-cap { display: flex; gap: 0.65rem; align-items: baseline; margin-top: 0.45rem; padding-top: 0.45rem; }
.business-first .fig-cap .fig-no { flex: 0 0 auto; }
.business-first .fig-cap > span:last-child { white-space: nowrap; }
.business-first .fig-src { display: none; }
.business-first .image-open { display: block; }
.business-first .image-open:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; }
.stack-intro { max-width: 78ch; }
.coverage-diagram { width: 100%; display: block; height: auto; }
.coverage-diagram text { fill: var(--ink-2); font: 16px var(--text); }
.coverage-diagram .diagram-heading { font-weight: 700; }
.coverage-diagram .layer-name { font-size: 13px; }
.coverage-diagram .light-label { fill: var(--paper); }
.coverage-diagram .teal-label { fill: var(--teal); }
.coverage-diagram .small-label { font-size: 12px; }
.business-first .stack-desktop { max-width: 1120px; }
.scope-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 1.4rem; }

.section-lede { max-width: 77ch; }
.business-first .guarantees { display: block; max-width: 1160px; margin: 0 auto; }
.business-first .guarantees > li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 3rem; padding: 2rem 0; }
.business-first .guarantees .fig-frame { height: auto; min-height: 0; justify-content: center; align-items: center; }
.business-first .guarantees .fig-frame img { width: auto; max-width: 100%; max-height: 340px; display: block; margin: 0 auto; }
.business-first .guarantees .fig-frame a { width: 100%; }

.business-first .guarantees .fig-cap { justify-content: center; }
.business-first .deck-figure { margin: 1.5rem auto; max-width: 1080px; }
.business-first .deck-figure img { display: block; width: 100%; height: auto; }
.business-first .capability-evidence .deck-figure img { width: 100%; max-height: none; }
.business-first .deck-figure .fig-cap { justify-content: center; }
.technical-disclosure { width: 100%; align-self: start; }
.technical-disclosure > summary { cursor: pointer; padding: 0.8rem 0; }
.technical-disclosure[open] > summary { margin-bottom: 1rem; }
.case-value { max-width: 70ch; }
.business-first .business-case h3 { margin: 0 0 0.6rem; }
.business-first .release-band .two-col { align-items: center; }
.download-soon { white-space: nowrap; }
@media (max-width: 899px) {
 .business-first .spread { display: flex; flex-direction: column; gap: 2rem; }
 .business-first .verso { padding: 0; width: 100%; }
 .business-first .verso .flock { width: 260px; }
 .business-first .recto { width: 100%; }

 .scope-copy { grid-template-columns: 1fr; gap: 0.6rem; }
 .business-first .guarantees > li { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.3rem 0; }
 .business-first .guarantees .fig-frame img { max-height: 420px; }
 .business-first .guarantees .fig-cap { justify-content: flex-start; }
 .business-first .deck-figure .fig-cap { justify-content: flex-start; }
 .business-first .fig-cap { gap: 0.5rem; }

}

.business-first .evidence-links { margin: 0 0 0.5rem; }
.business-first .textlink + .textlink { margin-left: 1.2rem; }
.business-first .menu summary { min-height: 44px; display: flex; align-items: center; }
/* The stack is an editorial diagram: hierarchy, a wash, and one fine rail. */
.refined-coverage .enterprise-hairline { fill: none; stroke: var(--sand); stroke-width: 0.7; opacity: 0.55; }
.refined-coverage .coordination-rail { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.6; }
.refined-coverage .coordination-branch { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.65; }
.refined-coverage .coordination-node { fill: var(--teal); stroke: var(--paper); stroke-width: 2; }
.refined-coverage .governance-wash { fill: color-mix(in srgb, var(--teal) 7%, var(--paper)); }
.refined-coverage .governance-label { fill: var(--teal); font-weight: 700; }
.refined-coverage .coordination-label { fill: var(--teal); }
.refined-coverage .stack-value { fill: var(--ink-2); }
.refined-coverage .layer-name { fill: var(--mute); font-style: italic; font-size: 12px; }
.refined-coverage .diagram-heading { font-size: 15px; }
.business-first .stack-figure { margin-top: 1.6rem; }
.business-first .stack-mobile .refined-coverage .diagram-heading { font-size: 16px; }
.business-first .stack-mobile .refined-coverage .small-label { font-size: 13px; }

/* One evidence viewer, subordinate to the record's business promise. */
.proof-section { margin-top: 2.5rem; }
.proof-section > h3 { margin-bottom: 1.5rem; }
.proof-tabs { display: none; }
.proof-ready .proof-tabs { display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 1.5rem; }
.proof-tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.6rem 0; min-height: 44px; text-align: left; cursor: pointer; }
.proof-tabs button[aria-selected="true"] { border-bottom-color: var(--teal); }

.business-first .proof-ready .guarantees > li { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; padding: 0; min-height: 370px; }
.business-first .proof-ready .guarantees > li[hidden] { display: none; }
.proof-ready .guarantee-copy h4 { margin: 0 0 1rem; }
.proof-ready .guarantee-copy > p:not(.mechanism) { max-width: 32ch; }
.business-first .proof-ready .guarantees .fig-frame { height: 310px; display: flex; background: none; }
.business-first .proof-ready .guarantees .fig-frame img { max-height: 310px; object-fit: contain; }
.business-first .proof-ready .guarantees .fig-cap { border-top: 0; padding-top: 0.7rem; }
.proof-section > .note { margin: 1rem 0 0; }
.graph-explanation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin: 1.5rem 0; }
.section-conclusion { margin-top: 1.8rem; }
@media (max-width: 899px) {
 .proof-ready .proof-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
 .business-first .proof-ready .guarantees > li { grid-template-columns: 1fr; gap: 1rem; min-height: 580px; align-content: start; }
 .proof-ready .guarantee-copy { min-height: 180px; }

 .business-first .proof-ready .guarantees .fig-frame, .business-first .proof-ready .guarantees .fig-frame img { max-height: 300px; }
 .business-first .proof-ready .guarantees .fig-cap { justify-content: center; }
 .graph-explanation { grid-template-columns: 1fr; gap: 0; }
}
.proof-reference { max-width: 40ch; margin: auto; padding: 2rem 0; }

#product-loop { scroll-margin-top: 6rem; }
/* The hero has two balanced groups separated by space, not a page seam. */
.business-first .spread { gap: 3rem; }
.business-first .spread .verso { padding: 0; border: 0; }
.business-first .spread .recto { padding: 0; border: 0; }
.business-first .film-headline { text-align: center; max-width: none; }
@media (max-width: 899px) { .business-first .spread { gap: 2rem; } }
@media (max-width: 899px) {
 .business-first .proof-ready .guarantees > li { min-height: 0; gap: 1.5rem; }
 .proof-ready .guarantee-copy { min-height: 0; }
 .business-first .proof-ready .guarantees .fig-frame { height: auto; }
 .proof-reference { margin: 0; padding: 0; }

}
.business-first .proof-ready .guarantees .fig-frame { height: auto; }
/* Coordination gets its own explanation and a full-board demonstration. */
.coordination-section > h2 { max-width: 30ch; }
.coordination-section > .capability-graphic { margin: 2rem 0 1rem; }
.capability-graphic img { display: block; width: 100%; height: auto; }
.coordination-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin: 1.5rem 0 2.5rem; }

.board-intro p, .declaration-intro p { max-width: 75ch; }
.declaration-intro { margin-top: 2.5rem; max-width: 75ch; }
.business-first .capability-evidence .capability-graphic { width: 100%; }
.declaration-preview .listing { max-height: none; }
@media (max-width: 899px) {
 .coordination-benefits { grid-template-columns: 1fr; gap: 0; }
 .coordination-section .capability-graphic { overflow-x: auto; }
 .coordination-section .capability-graphic img { min-width: 760px; }
 .capability-evidence .capability-graphic { overflow-x: auto; }
 .capability-evidence .capability-graphic img { min-width: 580px; }
}
.business-first .capability-graphic .diagram-scroll { min-width: 0; }
@media (max-width: 899px) {
 .coordination-section .capability-graphic, .capability-evidence .capability-graphic { overflow: visible; }
}

.coordination-board img { display:block; width:100%; height:auto; }
/* Keep a text's identifying image in the same reading group. */
.coordination-concept { margin: 1.5rem 0 2.5rem; }
.coordination-concept img { display: block; width: 100%; height: auto; }
.image-copy-pair { display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: center; gap: 2.5rem; }
.image-copy-pair > * { min-width: 0; }
.image-copy-pair .paired-copy > :last-child { margin-bottom: 0; }
.business-first .declaration-intro { max-width: none; }
.python-image { display: block; width: 116px; margin: auto; }
.python-image img { display: block; width: 100%; height: auto; }
.act-pair { grid-template-columns: minmax(220px,0.65fr) minmax(0,1.35fr); }
.act-page-pair { grid-template-columns: minmax(0,1.35fr) minmax(220px,0.65fr); }
.act-image { margin: 0; }
.act-image img { display: block; width: 100%; height: auto; }
.act-image figcaption { margin-top: 0.5rem; }
@media (max-width: 899px) {
 .image-copy-pair { grid-template-columns: 1fr; gap: 1rem; }
 .python-image { width: 72px; margin: 0; }
 .act-image { max-width: 350px; }
 .act-page-pair .act-image { grid-row: 1; }
}
/* Printed illustrations share the parchment rather than a white canvas. */

.act-image img { mix-blend-mode: multiply; }
.act-logo-window { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 2; overflow: hidden; }
.act-logo-window img { position: absolute; width: 222.2222%; max-width: none; height: auto; left: -60.9375%; top: -43.4896%; }
.license-mark { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle; white-space: nowrap; }
.license-mark img { display: inline-block; width: 16px; height: 25px; object-fit: contain; flex: none; }

/* Original categorical diagram paired with readable page text. */
.category-explanation { align-items: start; margin: 2rem 0; }
.category-explanation .deck-figure { margin: 0; }
.category-equation { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; padding: 1rem 0; text-align: center; }
.category-equation code { white-space: nowrap; }
.category-section > .note { text-align: center; }

@media (max-width: 760px) {
  .category-equation { flex-direction: column; align-items: center; }
}

/* Founder artwork: preserve source pixels; adapt the two-panel comparison to phones. */

.why-figure { margin: 1.5rem 0; }
.why-desktop { display: block; width: 100%; height: auto; }
.why-mobile { display: none; }
@media (max-width: 760px) {
  .why-desktop { display: none; }
  .why-mobile { display: grid; gap: 1.25rem; }
  .why-panel { display: block; position: relative; overflow: hidden; }
  .why-before { aspect-ratio: 832 / 809; }
  .why-after { aspect-ratio: 739 / 809; }
  .why-panel img { position: absolute; top: 0; height: auto; max-width: none; }
  .why-before img { width: 189.783654%; left: 0; }
  .why-after img { width: 213.667118%; left: -113.667118%; }
}

/* Illustration parchment is matched in the raster; no browser filters required. */
.coordination-concept, .why-figure { background: var(--paper); }

/* Numbered principles reuse the shared short-label role. */
.principle-label { margin: 0 0 0.5rem; }

.principle-support { margin-top: 2.5rem; }
.enforcement-section > h2 { max-width: 32ch; }

.masthead .wordmark { flex-shrink: 0; }
.masthead nav a { white-space: nowrap; }

/* Evaluator comparison follows the deck in a readable three-column text layout. */
.evaluation-methods { margin-top: 2rem; gap: 2rem; }
.evaluation-methods h3 { margin-top: 0; }
.evaluation-figure { margin-top: 2rem; }
.evaluation-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) { .evaluation-figure img { min-width: 760px; } }

/* Preserve the supplied recovery diagram’s five linked obligations at a readable scale. */
.business-first .workflow-figure { max-width: none; }
.business-first .workflow-figure img { min-width: 1280px; }
@media (min-width: 761px) and (max-width: 1400px) {
 .workflow-figure .diagram-scroll::after { content: "Scroll sideways to read the whole diagram →"; display: block; margin-top: 0.5rem; }
}

/* Compare: six editorial panels, with enforcement as the dividing line. */
.compare-editorial .subpage-title { max-width: 28ch; }
.compare-editorial .section > h2 { max-width: 34ch; }
.compare-intro > p:last-child { margin-bottom: 0; }
.invoice-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 2rem; }
.invoice-method { min-width: 0; display: flex; flex-direction: column; }
.invoice-method > .fig { margin-top: auto; }
.invoice-legend { display: flex; align-items: center; gap: 0.75rem; font-size: var(--type-meta); margin: 0.75rem 0; }
.invoice-legend svg { width: 38px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.invoice-method:last-child .invoice-legend svg { stroke: var(--teal); }
.invoice-scroll img { width: 100%; height: auto; }
.invoice-scroll a { display: block; }
.rule-listings { display: grid; grid-template-columns: 14% 43% 43%; margin-top: 2rem; }
.rule-listings .listing { min-width: 0; margin: 0; padding-inline: 1rem; display: flex; flex-direction: column; }
.rule-listings .listing:first-child { grid-column: 2; margin-right: 1rem; }
.rule-listings .listing:last-child { margin-left: 1rem; }
.rule-listings .listing pre { flex: 1; overflow-x: auto; white-space: pre; margin-top: 0; padding-bottom: 1rem; }
.rule-listings pre:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.comparison-ledger { width: 100%; border-collapse: collapse; margin: 1rem 0; table-layout: fixed; font-size: var(--type-meta); line-height: 1.5; }
.comparison-ledger th, .comparison-ledger td { padding: 0.65rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.comparison-ledger th:first-child, .comparison-ledger td:first-child { width: 24%; padding-left: 0; }
.comparison-ledger td:last-child, .comparison-ledger th:last-child { padding-right: 0; }
.comparison-ledger thead th { font-size: var(--type-body); }
.comparison-ledger thead th:last-child { color: var(--teal); }
.comparison-ledger tbody th { font-weight: 700; }
.rule-ledger th:first-child, .rule-ledger td:first-child { width: 14%; }
.rule-ledger td:last-child, .rule-ledger th:last-child { padding-left: 2rem; }
.mobile-column { display: none; }
.boundary-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 2rem; }
.boundary-pair > * { min-width: 0; }
.boundary-drawing { width: 100%; max-width: 520px; margin: 1.5rem auto; overflow: visible; color: var(--ink); }
.boundary-drawing text { font: 20px var(--text); fill: var(--ink); }
.boundary-drawing .drawing-note { font: 17px var(--text); fill: var(--ink-2); }
.boundary-drawing .drawing-code { font: 16px var(--mono); }
.boundary-domain { fill: var(--paper-2); fill-opacity: 0.4; stroke: var(--ink-2); stroke-width: 1; }
.boundary-node { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1; }
.boundary-line { fill: none; stroke: currentColor; stroke-width: 1.3; }
.boundary-bypass { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; }
.boundary-effect { color: var(--teal); }
.boundary-drawing .effect-label, .boundary-drawing .gate-label { fill: var(--teal); }
.boundary-drawing .gate-label { font-weight: 700; }
.gate-line { stroke: var(--teal); stroke-width: 4; }
.refusal-node { stroke: var(--red); }
.boundary-drawing .refusal-text { fill: var(--red); }
.boundary-example .fig { margin: 0; }
.boundary-explanation { margin-top: 1.5rem; }
.boundary-explanation p:last-child { margin-bottom: 0; }
.compare-close-links { display: flex; gap: 1rem 2rem; flex-wrap: wrap; margin: 1.5rem 0; }
.compare-faq-heading { margin-top: 2.5rem; }
@media (max-width: 899px) {
  .invoice-comparison, .rule-listings, .boundary-pair { grid-template-columns: 1fr; gap: 2rem; }
  .rule-listings .listing, .rule-listings .listing:first-child, .rule-listings .listing:last-child { grid-column: auto; margin: 0; padding: 1rem; }
  .invoice-scroll img { min-width: 900px; max-width: none; }
  .invoice-scroll::after { content: 'Scroll sideways to inspect the diagram →'; display: block; margin-top: 0.5rem; }
  .comparison-ledger, .comparison-ledger tbody { display: block; }
  .comparison-ledger { font-size: var(--type-body); }
  .comparison-ledger thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .comparison-ledger tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .comparison-ledger th, .comparison-ledger td { display: block; width: auto; padding: 0; border: 0; }
  .comparison-ledger th:first-child { width: auto; padding: 0; margin-bottom: 0.65rem; }
  .rule-ledger td:last-child, .rule-ledger th:last-child { padding-left: 0; }
  .comparison-ledger td + td { margin-top: 0.65rem; }
  .mobile-column { display: block; font-size: var(--type-meta); font-weight: 700; margin-bottom: 0.25rem; }
  .comparison-ledger td:last-child .mobile-column { color: var(--teal); }
}

/* Use cases: show the workflow, then read its three explanations together. */
.business-first .business-case > .deck-figure { max-width: none; margin: 1.5rem 0 2rem; }
.case-explanations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0 0 1.25rem; }
.case-explanations > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: 2rem; }
.case-explanations p:last-child { margin-bottom: 0; }
.business-first .business-case > .note { margin-bottom: 0; }
@media (max-width: 999px) {
  .case-explanations { grid-template-columns: 1fr; gap: 1.25rem; }
  .case-explanations > div + div { border-inline-start: 0; padding-inline-start: 0; }
}

/* About: the Apache mark accompanies the Open section's body. */
.open-layout { display: grid; gap: var(--gutter); align-items: start; }
.open-layout > * { min-width: 0; }
.open-license-logo { display: block; width: 80px; align-self: center; }
.open-license-logo img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .open-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 96px; }
  .open-license-logo { width: 96px; }
}