/* iziwerk, the product: page styles. Mobile first. Without script or motion, every part is its finished state. */

body[data-page="iziwerk-app"] {
  --ia-ground: #0a0c10;
  --ia-panel: #10131a;
  --ia-panel-2: #161a23;
  --ia-term: #07090c;
  --ia-line: rgba(232, 235, 240, .13);
  --ia-hair: rgba(232, 235, 240, .07);
  --ia-ink: #e8ebf0;
  --ia-body: #c3c9d6;
  --ia-meta: #949db0;
  --ia-amber: #efab5f;
  --ia-blue: #8fb0ff;
  --ia-pass: #8fc79a;
  --ia-pass-dim: rgba(143, 199, 154, .3);
  --ia-fail: #f08a6e;
  --ia-paper: #ece6dc;
  --ia-gut: var(--rebuild-gutter);
  --case-accent: #efab5f;
  --ia-stick: 104px; /* sticky columns sit below the site header when it comes back */
  background: var(--ia-ground);
}
body[data-page="iziwerk-app"] main { background: var(--ia-ground); }

.ia { display: block; overflow: clip; color: var(--ia-body); }
.ia-wrap { max-width: var(--rebuild-max); margin: 0 auto; padding: 0 var(--ia-gut); }
.ia .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ia a:focus-visible, .ia button:focus-visible, .ia select:focus-visible { outline: 2px solid var(--ia-amber); outline-offset: 3px; }
.ia .eyebrow { margin: 0 0 14px; font: 500 .8125rem/1.4 "JetBrains Mono", var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ia-amber); }
.ia .eyebrow a { color: inherit; text-decoration: none; }
.ia .eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ia h2 { margin: 0 0 18px; font: 500 clamp(1.75rem, 3.4vw, 2.75rem)/1.08 "Space Grotesk", var(--font-display); letter-spacing: -.025em; color: var(--ia-ink); text-wrap: balance; }
.ia h3 { margin: 0 0 10px; font: 500 1.25rem/1.25 "Space Grotesk", var(--font-display); color: var(--ia-ink); letter-spacing: -.01em; }
.ia-prose p { margin: 0 0 1.1em; max-width: 66ch; font-size: 1.0625rem; line-height: 1.72; }
.ia-prose p:last-child { margin-bottom: 0; }
.ia-prose strong { color: var(--ia-ink); }

/* ---------- 1. cover: one table, two tenants ---------- */
.ia-cover { padding: clamp(24px, 6vw, 72px) 0 clamp(44px, 6vw, 88px); border-bottom: 1px solid var(--ia-hair);
  background: radial-gradient(60% 50% at 85% 30%, rgba(239, 171, 95, .07), transparent 70%); }
.ia-cover__grid { display: grid; gap: 36px; }
.ia-title { margin: 14px 0 18px; font: 500 clamp(2.7rem, 11.5vw, 5.4rem)/.96 "Space Grotesk", var(--font-display); letter-spacing: -.05em; color: var(--ia-ink); text-wrap: balance; }
.ia-deck { margin: 0 0 14px; max-width: 26ch; font: 400 clamp(1.25rem, 2vw, 1.55rem)/1.38 "Space Grotesk", var(--font-display); color: var(--ia-ink); }
.ia-supporting { margin: 0 0 24px; max-width: 46ch; font-size: .975rem; line-height: 1.6; color: var(--ia-meta); }
.ia-meta { margin: 0; padding: 16px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--ia-line);
  font: 400 .8125rem/1.55 "JetBrains Mono", var(--font-mono); color: var(--ia-body); }
.ia-meta span { margin-right: 8px; color: var(--ia-meta); text-transform: uppercase; letter-spacing: .1em; }
.ia-meta a { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; color: var(--ia-amber); text-decoration: none; }
.ia-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }

.ia-replay { position: relative; margin: 0; border: 1px solid var(--ia-line); border-radius: 14px; background: var(--ia-panel);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); overflow: hidden; }
.ia-replay__label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 13px 16px;
  border-bottom: 1px solid var(--ia-line); font: 500 .75rem/1.3 "JetBrains Mono", var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ia-meta); }
.ia-replay__label b { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .875rem; color: var(--ia-ink); }

.ia-ledger { position: relative; padding: 4px 0 8px; font: 400 .8125rem/1.3 "JetBrains Mono", var(--font-mono); color: var(--ia-body); font-variant-numeric: tabular-nums; }
.ia-ledger__head, .ia-ledger__row { position: relative; display: grid; grid-template-columns: 22px 4.3em minmax(0, 1fr) 3.7em 3.6em; gap: 0 10px; align-items: center; padding: 0 16px; }
.ia-ledger__head { min-height: 34px; font-size: .75rem; color: var(--ia-meta); }
.ia-ledger__head > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ia-ledger__head > span:nth-child(2) { grid-column: 2; }
.ia-ledger__head > span:nth-child(4) { text-align: right; }
.ia-ledger__row { min-height: 40px; border-top: 1px solid var(--ia-hair); }
.ia-ledger__row > span { position: relative; z-index: 1; }
.ia-ledger__row > span:nth-child(4) { text-align: right; }
.ia-ledger__row i { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 5px; font-style: normal; font-weight: 600; font-size: .75rem; }
.ia-ledger__row[data-tenant="a"] i { color: var(--ia-amber); }
.ia-ledger__row[data-tenant="b"] i { color: var(--ia-blue); }
.ia-ledger__row[data-tenant="b"] { color: #cdd8f5; }
/* A row the client asked for and did not get: hatched, and named. */
.ia-ledger__row[data-target], .ia-ledger__row[data-draft] { grid-template-rows: auto auto; padding-top: 8px; padding-bottom: 8px; }
.ia-ledger__row[data-target]::before, .ia-ledger__row[data-draft]::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 9px); opacity: var(--hatch-on, 1); }
.ia-ledger__row[data-target] { --hatch: rgba(143, 176, 255, .22); }
.ia-ledger__row[data-draft] { --hatch: rgba(239, 171, 95, .14); }
.ia-ledger__mark { position: relative; z-index: 1; grid-column: 2 / -1; justify-self: start; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
  font: 500 .75rem/1.4 "JetBrains Mono", var(--font-mono); font-style: normal; letter-spacing: .02em; background: var(--ia-term); border: 1px solid currentColor; }
.ia-ledger__row[data-target] .ia-ledger__mark { color: var(--ia-blue); }
.ia-ledger__row[data-draft] .ia-ledger__mark { color: var(--ia-amber); }
.ia-ledger__scan { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(143, 199, 154, .16) 70%, rgba(143, 199, 154, .55) 100%); border-bottom: 1px solid var(--ia-pass); }

.ia-console { padding: 14px 16px 16px; border-top: 1px solid var(--ia-line); background: var(--ia-term);
  font: 400 .78rem/1.55 "JetBrains Mono", var(--font-mono); color: var(--ia-body); }
.ia-console p { margin: 0 0 6px; overflow-wrap: anywhere; }
.ia-console code { font: inherit; color: var(--ia-ink); }
.ia-console__who { color: var(--ia-meta); padding-bottom: 6px; border-bottom: 1px dashed var(--ia-hair); margin-bottom: 10px !important; }
.ia-console__who b { color: var(--ia-ink); font-weight: 600; }
.ia-console__q > span { color: var(--ia-amber); }
.ia-console__r { color: var(--ia-meta); }
.ia-console__r > span { color: var(--ia-meta); }
.ia-console__ok { color: var(--ia-pass); font-weight: 500; }
.ia-console__ok + .ia-console__q { margin-top: 12px; }
.ia-replay figcaption { padding: 14px 16px 16px; border-top: 1px solid var(--ia-line); font-size: .875rem; line-height: 1.6; color: var(--ia-meta); }

/* ---------- prose blocks ---------- */
.ia-lead { padding-top: clamp(40px, 6vw, 80px); }
.ia-lead p { margin: 0; max-width: 62ch; font: 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.6 "Space Grotesk", var(--font-display); color: var(--ia-ink); }
.ia-block { padding-top: clamp(44px, 6vw, 80px); }
.ia-pair { display: grid; gap: 0; }

/* ---------- 2. the suite, phase by phase ---------- */
.ia-suite { margin-top: clamp(52px, 7vw, 100px); padding: clamp(44px, 6vw, 92px) 0; background: var(--ia-panel); border-block: 1px solid var(--ia-hair); }
.ia-suite__grid { display: grid; gap: 28px; }
.ia-suite__side > p { margin: 0 0 18px; max-width: 46ch; font-size: 1rem; line-height: 1.65; }
.ia-suite__count { margin: 8px 0 0 !important; display: flex; align-items: baseline; gap: 12px; }
.ia-suite__count b { font: 500 clamp(3.6rem, 13vw, 7rem)/.9 "Space Grotesk", var(--font-display); letter-spacing: -.05em; color: var(--ia-pass); font-variant-numeric: tabular-nums; min-width: 3ch; }
.ia-suite__count span { font: 500 .8125rem/1.3 "JetBrains Mono", var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ia-meta); }

.ia-table { width: 100%; border-collapse: collapse; }
.ia-table caption { caption-side: top; }
.ia-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ia-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--ia-line); }
.ia-table tbody tr:last-child { border-bottom: 1px solid var(--ia-line); }
.ia-table td { display: block; padding: 0; }
.ia-table td:nth-child(1) { order: 1; }
.ia-table td:nth-child(1) strong { font: 500 1.125rem/1.3 "Space Grotesk", var(--font-display); color: var(--ia-ink); }
.ia-table td:nth-child(2) { order: 3; font-size: .875rem; line-height: 1.6; color: var(--ia-meta); }
.ia-table td.num { order: 2; position: relative; height: 30px; padding-right: 0; text-align: right;
  font: 600 1.0625rem/30px "JetBrains Mono", var(--font-mono); color: var(--ia-ink); font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--ia-line), var(--ia-line)) left 50% / calc(100% - 5em) 1px no-repeat; }
.ia-table td.num::before, .ia-table td.num::after { content: ""; position: absolute; left: 0; top: 10px; height: 10px; border-radius: 2px; }
/* The bright bar is everything to the phase's count; the dim bar sits over what was carried. */
.ia-table td.num::after { width: calc((100% - 5em) * var(--b)); background: var(--ia-pass); transform-origin: 0 50%; transform: scaleX(var(--fill, 1)); }
.ia-table td.num::before { z-index: 1; width: calc((100% - 5em) * var(--a)); background: #3c5442; }
.ia-table tr.ia-written td.num::after { background: repeating-linear-gradient(90deg, var(--ia-pass) 0 5px, transparent 5px 9px); }
.ia-table tr.ia-written td.num { color: var(--ia-meta); }
.ia-rec { order: 4; font-size: .9375rem; line-height: 1.6; color: var(--ia-body); }
.ia-rec time { margin-right: 8px; font: 500 .8125rem/1 "JetBrains Mono", var(--font-mono); color: var(--ia-amber); text-transform: uppercase; letter-spacing: .06em; }
.ia-red { display: inline-block; margin-right: 6px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px;
  font: 600 .8125rem/1.5 "JetBrains Mono", var(--font-mono); color: var(--ia-fail); }
.ia-fix { color: var(--ia-pass); }
.ia-fix time { color: var(--ia-pass); }
.ia-suite__foot { margin: 22px 0 0; max-width: 64ch; font-size: .9375rem; line-height: 1.65; color: var(--ia-body); }
.ia-suite__after { margin: 12px 0 0; font: 400 .8125rem/1.6 "JetBrains Mono", var(--font-mono); color: var(--ia-meta); }
.ia-suite__after time { margin-right: 8px; color: var(--ia-pass); }

/* ---------- 3. screens and their checks ---------- */
.ia-screens { padding: clamp(56px, 8vw, 112px) 0 0; }
.ia-screens__head { max-width: 62rem; margin-bottom: clamp(30px, 4vw, 52px); }
.ia-screens__head > p:last-child { margin: 0; max-width: 64ch; font-size: 1rem; line-height: 1.68; }
.ia-shots { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(40px, 6vw, 72px); }
.ia-shot { display: grid; gap: 18px; align-items: start; }
.ia-shot__frame { margin: 0; padding: 10px; border-radius: 12px; background: var(--ia-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 30px 60px -34px rgba(0, 0, 0, .9); justify-self: start; max-width: 100%; }
.ia-shot__frame img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(23, 20, 15, .35); }
.ia-shot__text h3 span { margin-right: 10px; font: 500 .8125rem/1 "JetBrains Mono", var(--font-mono); color: var(--ia-amber); letter-spacing: .08em; vertical-align: 2px; }
.ia-shot__text > p { margin: 0 0 14px; max-width: 54ch; font-size: 1rem; line-height: 1.65; }
.ia-checks { margin: 0; padding: 12px 14px; list-style: none; display: grid; gap: 6px; border-radius: 10px; border: 1px solid var(--ia-line); background: var(--ia-term);
  font: 400 .8125rem/1.5 "JetBrains Mono", var(--font-mono); color: var(--ia-body); overflow-wrap: anywhere; }
.ia-checks li { position: relative; padding-left: 1.6em; }
.ia-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ia-pass); font-weight: 700; }

/* ---------- 4. documents ---------- */
.ia-documents { margin-top: clamp(64px, 9vw, 120px); padding: clamp(52px, 7vw, 100px) 0 clamp(56px, 8vw, 110px);
  background: linear-gradient(var(--ia-panel), var(--ia-ground) 70%); border-top: 1px solid var(--ia-hair); }
.ia-documents__head { margin-bottom: clamp(30px, 4vw, 48px); }
.ia-shot--editor { margin-bottom: clamp(48px, 7vw, 88px); }
.ia-docs__view { display: grid; gap: 26px; }
.ia-docs__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important; }
.ia-docs__text > p { margin: 0 0 14px; max-width: 52ch; font-size: 1rem; line-height: 1.65; }
.ia-docs__text > .ia-docs__note { font: 400 .8125rem/1.6 "JetBrains Mono", var(--font-mono); color: var(--ia-meta); }
.ia-docs__controls { display: grid; gap: 12px; margin: 22px 0 18px; }
.ia-docs__controls[hidden] { display: none; }
.ia-docs__pick { display: flex; align-items: center; gap: 8px; }
.ia-docs__step { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ia-line); border-radius: 10px;
  background: var(--ia-panel-2); color: var(--ia-ink); font: 500 1.4rem/1 "Space Grotesk", var(--font-display); cursor: pointer; }
.ia-docs__step:hover { border-color: var(--ia-amber); }
.ia-docs__select { flex: 1; min-width: 0; }
.ia-docs__select select { width: 100%; min-height: 44px; padding: 0 40px 0 14px; border: 1px solid var(--ia-line); border-radius: 10px; appearance: none; -webkit-appearance: none;
  background: var(--ia-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efab5f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--ia-ink); font: 500 1rem/1.2 "Space Grotesk", var(--font-display); cursor: pointer; }
.ia-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--ia-line); border-radius: 12px; background: var(--ia-panel-2); }
.ia-seg button { flex: 1 1 auto; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ia-body);
  font: 500 1rem/1 "Space Grotesk", var(--font-display); cursor: pointer; }
.ia-seg button:hover { color: var(--ia-ink); }
.ia-seg button[aria-pressed="true"] { background: var(--ia-amber); color: #16130f; }
.ia-docs__sheet { margin: 0; }
.ia-docs__page { position: relative; aspect-ratio: 640 / 905; overflow: hidden; border-radius: 4px; background: #f6f2ea;
  box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); }
.ia-docs__img { position: absolute; top: 0; left: 0; width: 300%; height: 200%; max-width: none;
  transform: translate(calc(var(--s) * -33.3333%), calc(var(--b) * -50%)); }
.ia-docs__cap { margin-top: 12px; font: 500 .8125rem/1.4 "JetBrains Mono", var(--font-mono); color: var(--ia-meta); letter-spacing: .04em; }
.ia-docs__wall { margin: clamp(44px, 6vw, 72px) 0 0; display: grid; gap: 14px; }
.ia-docs__rows { display: none; }
.ia-docs__grid { position: relative; }
.ia-docs__grid > img { display: block; width: 100%; height: auto; border-radius: 3px; }
.ia-docs__hl { position: absolute; left: 0; top: 0; width: calc(128 / 2240 * 100%); height: calc(181 / 1106 * 100%); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--ia-amber), 0 0 18px 2px rgba(239, 171, 95, .45); pointer-events: none;
  transform: translate(calc(var(--c) * 103.125%), calc(var(--r) * 102.21%)); transition: transform .5s cubic-bezier(.2, .75, .2, 1); }
.ia-docs__cols { position: absolute; inset: 0; display: none; }
.ia-docs__cols button { flex: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ia-docs__cols button:hover { background: rgba(239, 171, 95, .1); }
.ia-docs__cols button:focus-visible { outline: 2px solid var(--ia-amber); outline-offset: -2px; }
.ia-docs__wall figcaption { font: 400 .8125rem/1.6 "JetBrains Mono", var(--font-mono); color: var(--ia-meta); max-width: 72ch; }

/* ---------- 5. method, numbers, status ---------- */
.ia-method { padding-top: clamp(56px, 8vw, 104px); }
.ia-stats { margin-top: clamp(44px, 6vw, 72px); display: grid; grid-template-columns: 1fr; gap: 1px; border: 1px solid var(--ia-line); border-radius: 14px; overflow: hidden; background: var(--ia-line); }
.ia-stats .stat { border: 0; padding: 22px 22px 24px; background: var(--ia-panel); display: grid; gap: 8px; }
.ia-stats .stat:hover { background: var(--ia-panel); }
.ia-stats .stat__num { font: 500 clamp(2.4rem, 6vw, 3.6rem)/1 "Space Grotesk", var(--font-display); letter-spacing: -.035em; color: var(--ia-ink); }
.ia-stats .stat:first-child .stat__num { color: var(--ia-pass); }
.ia-stats .stat__label { font: 500 .8125rem/1.4 "JetBrains Mono", var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ia-meta); }
.ia-lastrun { position: relative; margin: 32px 0 0; max-width: 46rem; padding: 16px 18px 18px; border: 1px solid var(--ia-line); border-radius: 12px; background: var(--ia-term); }
.ia-lastrun figcaption { margin-bottom: 10px; font: 500 .75rem/1.4 "JetBrains Mono", var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ia-meta); }
.ia-lastrun figcaption time { color: var(--ia-amber); }
.ia-lastrun pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .875rem/1.6 "JetBrains Mono", var(--font-mono); color: var(--ia-ink); }
.ia-lastrun pre code { font: inherit; }
.ia-lastrun__ok { color: var(--ia-pass); }
.ia-lastrun__stamp { display: inline-block; margin: 16px 0 0; padding: 5px 12px; border: 2px solid currentColor; border-radius: 6px; transform: rotate(-4deg);
  font: 700 .8125rem/1 "JetBrains Mono", var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ia-amber); }
.ia-cta { padding: clamp(56px, 8vw, 104px) var(--ia-gut) clamp(64px, 9vw, 120px); text-align: center; }
.ia-cta p { margin: 0; }

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  .ia-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ia-shot__frame { max-width: 460px; }
  .ia-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 821px) {
  .ia-shot__frame { max-width: none; justify-self: stretch; padding: 12px; }
  .ia-shot--wide { grid-template-columns: minmax(0, 1fr); }
  .ia-shot--wide .ia-shot__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 36px; align-items: start; }
  .ia-shot--wide .ia-shot__text h3 { grid-column: 1; }
  .ia-shot--wide .ia-shot__text > p { grid-column: 1; }
  .ia-shot--wide .ia-checks { grid-column: 2; grid-row: 1 / span 2; }
  .ia-shot--tall { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: center; }
  .ia-shot--tall:nth-child(even) .ia-shot__frame { order: 2; }
  .ia-docs__wall { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; }
  .ia-docs__rows { display: grid; grid-template-rows: repeat(6, 1fr); font: 500 .75rem/1.2 "JetBrains Mono", var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ia-meta); }
  .ia-docs__rows span { display: flex; align-items: center; justify-content: flex-end; text-align: right; }
  .ia-docs__rows span:nth-child(odd) { color: var(--ia-body); }
  .ia-docs__wall figcaption { grid-column: 2; }
  .ia-docs__cols:not([hidden]) { display: flex; }
}
@media (min-width: 980px) {
  .ia-cover__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  .ia-block:not(.ia-pair .ia-block), .ia-method { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 56px; align-items: start; }
  .ia-block > .eyebrow, .ia-block > h2 { grid-column: 1; }
  .ia-block > .ia-prose { grid-column: 2; grid-row: 1 / span 3; }
  .ia-block > .ia-lastrun { grid-column: 2; }
  .ia-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
  .ia-suite__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .ia-suite__side { position: sticky; top: var(--ia-stick); }
  /* Each row: its text above, then one bar the full width of the chart, so the bars read down as a staircase. */
  .ia-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "phase rec" "what rec" "num num"; gap: 4px 36px; padding: 20px 0 18px; }
  .ia-table td:nth-child(1) { grid-area: phase; }
  .ia-table td:nth-child(2) { grid-area: what; }
  .ia-table td.num { grid-area: num; margin-top: 10px; height: 34px; line-height: 34px; font-size: 1.25rem; }
  .ia-table td.num::before, .ia-table td.num::after { top: 11px; height: 12px; }
  .ia-rec { grid-area: rec; }
  .ia-docs__view { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .ia-docs__text { position: sticky; top: var(--ia-stick); }
}

/* ---------- motion: reduced motion and Pause motion are the finished state ---------- */
html.ia-boot .ia-console > [data-step], html.ia-boot .ia-ledger__mark { opacity: 0; }
html[data-motion-preference="off"] .ia-docs__hl { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preference="on"]) .ia-docs__hl { transition: none; }
}