/* ===================================================================
   CommTrack — IBM Design Language
   Blue + grey ramps only. Zero border-radius, zero box-shadow.
   The single blur is the 6px backdrop-filter on the hero record panel.
   Separation is carried by 1px hairlines and 1px grid seams.
   =================================================================== */

:root {
  --blue-90: #001d6c;
  --blue-80: #002d9c;
  --blue-70: #0043ce;
  --blue-60: #0f62fe;
  --blue-50: #4589ff;
  --blue-40: #78a9ff;
  --blue-30: #a6c8ff;
  --blue-20: #d0e2ff;
  --blue-10: #edf5ff;

  --grey-100: #161616;
  --grey-90: #262626;
  --grey-80: #393939;
  --grey-70: #525252;
  --grey-60: #6f6f6f;
  --grey-50: #8d8d8d;
  --grey-40: #a8a8a8;
  --grey-30: #c6c6c6;
  --grey-20: #e0e0e0;
  --grey-10: #f4f4f4;
  --tint: #e8e8e8;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, 0, .38, .9);
  --pad: 64px;
  --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  background: #fff;
  color: var(--grey-100);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }

.mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--blue-50);
  outline-offset: 2px;
}

/* prose links only — chrome links carry their own treatment */
.prose a {
  color: var(--blue-70);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-30);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.prose a:hover { color: var(--blue-80); border-bottom-color: var(--blue-70); }

.ico { width: 16px; height: 16px; flex: 0 0 16px; }

/* ================================================ 1. header — 56px bar */

.hd {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: stretch;
  background: var(--grey-100); color: #fff;
  border-bottom: 1px solid var(--grey-90);
}
.hd a, .hd button { text-decoration: none; }

.hd-brand { display: flex; align-items: center; gap: 12px; padding: 0 24px 0 16px; flex-shrink: 0; color: #fff; }
.hd-ct {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-60); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .012em;
}
.hd-ct i { font-style: normal; color: var(--blue-30); }
.hd-word { font-size: 16px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; }
.hd-word i { font-style: normal; color: var(--blue-50); }

.hd-nav { display: flex; align-items: stretch; }
.hd-nav a, .hd-login, .hd-menu {
  display: flex; align-items: center;
  font-size: 14px; color: var(--grey-30);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.hd-nav a { padding: 0 16px; }
.hd-nav a:hover, .hd-login:hover, .hd-menu:hover { color: #fff; background: var(--grey-90); }
.hd-nav a.is-active { color: #fff; box-shadow: inset 0 -3px 0 var(--blue-60); }

.hd-gap { flex: 1; }
.hd-login { padding: 0 20px; }
.hd-cta {
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border: 0; background: var(--blue-60); color: #fff;
  font-family: inherit; font-size: 14px; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.hd-cta:hover { background: var(--blue-70); }

.hd-menu { display: none; gap: 8px; padding: 0 16px; border: 0; background: none; font-family: inherit; cursor: pointer; }
.hd-panel {
  display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
  flex-direction: column; background: var(--grey-100); border-bottom: 1px solid var(--grey-90);
}
.hd-panel.open { display: flex; }
.hd-panel a {
  padding: 14px 16px; font-size: 14px; color: var(--grey-30);
  border-top: 1px solid var(--grey-90);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.hd-panel a:hover { color: #fff; background: var(--grey-90); }

/* ================================================== 2. hero — 7fr 5fr */

.hero {
  display: grid; grid-template-columns: 7fr 5fr;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-l, .hero-r { padding: 104px var(--pad) 72px; }
.hero-l { display: flex; flex-direction: column; gap: 28px; min-height: 600px; min-width: 0; }
.hero-r { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative; overflow: hidden; background: var(--blue-80); }
.hero-fill { flex: 1; min-height: 40px; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey-70);
}
.hero-eyebrow::before { content: ""; flex: 0 0 32px; width: 32px; height: 2px; background: var(--blue-60); }

.hero-h1 {
  font-size: 72px; font-weight: 300; line-height: 1.04; letter-spacing: -.032em;
  color: var(--grey-100); max-width: 17ch; text-wrap: balance;
}
.hero-copy { font-size: 19px; line-height: 1.55; color: var(--grey-70); max-width: 52ch; text-wrap: pretty; }

.hero-btns { display: flex; gap: 1px; margin-top: 8px; flex-wrap: wrap; }
.hbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px; border: 0; background: none;
  font-family: inherit; font-size: 16px; line-height: 1;
  color: #fff; text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.hbtn-p { background: var(--blue-60); gap: 16px; }
.hbtn-p:hover { background: var(--blue-70); }
.hbtn-s { border: 1px solid var(--blue-70); color: var(--blue-70); }
.hbtn-s:hover { background: var(--blue-70); color: #fff; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px;
  border-top: 1px solid var(--grey-20); padding-top: 24px;
}
.hero-stat { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); }
.hero-stat b { font-size: 22px; font-weight: 450; line-height: 1.1; color: var(--grey-100); }
.hero-stat span { font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-70); }
.hero-stat span.nowrap { white-space: nowrap; }

.rec {
  position: relative; border: 1px solid var(--blue-50);
  background: rgba(0, 29, 108, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rec-head {
  height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px; background: var(--blue-90); border-bottom: 1px solid var(--blue-50);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-30);
}
.rec-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--blue-90); background: var(--blue-40); padding: 3px 8px; white-space: nowrap;
}
.rec-row {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 12px 16px; border-bottom: 1px solid var(--blue-70);
  font-family: var(--mono); font-size: 15px;
}
.rec-row:last-child { border-bottom: 0; }
.rec-row span { color: var(--blue-30); }
.rec-row b { color: #fff; font-weight: 400; text-align: right; }
.rec-row.is-var { background: var(--blue-90); box-shadow: inset 3px 0 0 var(--blue-40); }
.rec-row.is-var span { color: var(--blue-20); }
.rec-row.is-var b { font-weight: 600; }

.hero-cap {
  border-top: 1px solid var(--blue-70); padding-top: 24px;
  font-size: 15px; line-height: 1.6; color: var(--blue-20); max-width: 38ch;
}

/* ============================================== 3. accent band — 6px */

.accent-band { display: grid; grid-template-columns: 7fr 5fr; height: 6px; }
.accent-band i { display: block; background: var(--blue-80); }
.accent-band div { display: grid; grid-template-columns: repeat(3, 1fr); }
.accent-band div i:nth-child(1) { background: var(--blue-70); }
.accent-band div i:nth-child(2) { background: var(--blue-60); }
.accent-band div i:nth-child(3) { background: var(--blue-50); }

/* ============================ shared band grid — 16 col / 32px gutter */

.band {
  display: grid; grid-template-columns: repeat(16, 1fr);
  column-gap: 32px; row-gap: 48px;
  padding: 96px var(--pad);
  scroll-margin-top: var(--header-h);
}
.band-head {
  grid-column: 1 / span 5;
  display: flex; flex-direction: column; gap: 16px;
  border-top: 2px solid var(--grey-100); padding-top: 16px;
}
.band-body { grid-column: 6 / span 11; min-width: 0; }

.tick {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--grey-70);
}
.h2 { font-size: 44px; font-weight: 300; line-height: 1.08; letter-spacing: -.024em; }
.standfirst { font-size: 16px; line-height: 1.6; color: var(--grey-70); max-width: 38ch; }

/* cell grids: 1px seams, never cards */
.cells { display: grid; gap: 1px; background: var(--grey-20); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--grey-20); }
.cells-2 { grid-template-columns: 1fr 1fr; border: 1px solid var(--grey-20); }
.cell { background: #fff; padding: 32px 24px 40px; }
.cells-2 .cell { padding: 28px 24px; }
.cell h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cells-2 .cell h3 { font-size: 19px; }
.cell p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--grey-70); }
.cells-2 .cell p { margin-top: 10px; }
.cell.is-lead { box-shadow: inset 3px 0 0 var(--blue-60); }

/* dark band (#engine) */
.band.is-dark { background: var(--grey-100); color: #fff; }
.band.is-dark .band-head { border-top: 2px solid var(--grey-10); }
.band.is-dark .tick { color: var(--blue-40); }
.band.is-dark .standfirst { color: var(--grey-40); }
.band.is-dark .cells { background: var(--grey-80); border: 1px solid var(--grey-80); }
.band.is-dark .cell { background: var(--grey-100); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.band.is-dark .cell h3 { font-size: 18px; }

.spec {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0;
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.spec dt { color: var(--grey-50); }
.spec dd { margin: 0; color: #fff; text-align: right; }
/* the underline is the only accent in this band, and it means "derived" */
.spec dd.is-derived { border-bottom: 1px solid var(--blue-50); }

/* ==================================================== 4. lifecycle strip */

.lifecycle { padding: 80px var(--pad); row-gap: 40px; border-bottom: 1px solid var(--grey-20); }
.lifecycle .band-head { grid-column: 1 / span 4; border-top: 2px solid var(--grey-100); padding-top: 12px; }
.lifecycle .band-body { grid-column: 5 / span 12; }
.lc-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--grey-30); border: 1px solid var(--grey-30);
}
.lc { background: #fff; padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.lc b { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--grey-60); }
.lc span { font-size: 15px; font-weight: 600; }
.lc.is-terminal { background: var(--blue-10); box-shadow: inset 0 3px 0 var(--blue-60); }
.lc.is-terminal b { color: var(--blue-70); }
.lc.is-terminal span { color: var(--blue-80); }

/* ============================================== 8. ruled list (#close) */

.ruled { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--grey-20); }
.ruled li { display: grid; grid-template-columns: 40px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--grey-20); }
.ruled li:first-child { border-top: 1px solid var(--grey-100); }
.ruled b { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--grey-60); }
.ruled h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ruled p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--grey-70); }
.ruled p .num { font-size: 14px; color: var(--grey-100); }

/* ================================================= 9. register mock */

.register { padding: 96px var(--pad); }
.reg { border: 1px solid var(--grey-30); background: var(--grey-10); }
.reg-title {
  height: 40px; display: flex; align-items: center; padding: 0 16px;
  background: var(--grey-100); color: #fff; font-size: 13px; font-weight: 600;
}
.reg-title i { font-style: normal; color: var(--blue-50); }
.reg-title span { margin-left: 12px; color: var(--grey-50); font-weight: 400; }
.reg-scroll { overflow-x: auto; }
.reg-table { min-width: 700px; }
.reg-head, .reg-row { display: grid; grid-template-columns: 96px 1fr 130px 170px 150px; }
.reg-head { height: 40px; background: var(--tint); border-bottom: 1px solid var(--grey-30); }
.reg-head span {
  display: flex; align-items: center; padding: 0 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey-80);
}
.reg-head span.n { justify-content: flex-end; }
.reg-head span.period { color: var(--blue-70); }
.reg-row { height: 44px; background: #fff; border-bottom: 1px solid var(--grey-20); }
.reg-row > * {
  display: flex; align-items: center; padding: 0 16px;
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--grey-100);
}
.reg-row .mv { font-family: var(--sans); }
.reg-row .n { justify-content: flex-end; }
.reg-row .ledger { color: var(--grey-60); }
.reg-row.is-edge { background: var(--grey-10); }
.reg-row.is-open .period { font-weight: 600; }
.reg-row.is-close { border-bottom: 1px solid var(--grey-30); }
.reg-row.is-close > * { font-weight: 600; }
.reg-note {
  display: flex; gap: 12px; padding: 14px 16px;
  background: var(--blue-10); box-shadow: inset 3px 0 0 var(--blue-60);
  font-size: 13.5px; line-height: 1.5; color: var(--grey-80);
}
.reg-note .ico { margin-top: 2px; }

/* ================================================ 10. contact — split */

.contact { display: grid; grid-template-columns: 1fr 1fr; scroll-margin-top: var(--header-h); }
.contact > div { padding: 96px var(--pad); display: flex; flex-direction: column; gap: 24px; }
.contact-l { background: var(--blue-60); }
.contact-l .tick { color: var(--blue-30); }
.contact-l h2 { font-size: 56px; font-weight: 200; line-height: 1.04; letter-spacing: -.028em; color: #fff; max-width: 16ch; }
.contact-l p { font-size: 17px; line-height: 1.55; color: var(--blue-20); max-width: 42ch; }
.contact-r { background: var(--grey-100); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey-50);
}
.field input {
  height: 48px; padding: 0 16px;
  background: var(--grey-90); color: #fff;
  border: 0; border-bottom: 1px solid var(--grey-60);
  font-family: inherit; font-size: 14px;
  transition: border-color .15s var(--ease);
}
.field input::placeholder { color: var(--grey-50); }
.field input:focus { border-bottom-color: var(--blue-50); }
.submit {
  height: 48px; align-self: flex-start; padding: 0 24px;
  background: var(--blue-60); color: #fff; border: 0;
  font-family: inherit; font-size: 15px; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.submit:hover { background: var(--blue-70); }
.form-done { display: none; background: var(--grey-90); box-shadow: inset 3px 0 0 var(--blue-60); padding: 16px; }
.form-done p { font-size: 14px; line-height: 1.6; color: var(--grey-30); }
.form-done .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-40); }
.contact-r.sent form { display: none; }
.contact-r.sent .form-done { display: block; }

/* ======================================================== 11. footer */

.ft {
  background: var(--grey-100); border-top: 1px solid var(--grey-80);
  padding: 48px var(--pad);
  display: grid; grid-template-columns: repeat(16, 1fr); column-gap: 32px; row-gap: 32px;
}
.ft-brand { grid-column: 1 / span 5; }
.ft-mark { display: flex; align-items: center; gap: 12px; }
.ft-ct {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-80); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .012em;
}
.ft-ct i { font-style: normal; color: var(--blue-40); }
.ft-word { font-size: 17px; font-weight: 600; color: #fff; }
.ft-word i { font-style: normal; color: var(--blue-50); }
.ft-brand p { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--grey-50); max-width: 34ch; }
.ft-col { grid-column: span 3; }
.ft-col h4 {
  margin-bottom: 12px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-60);
}
.ft-col a {
  display: block; padding: 5px 0; font-size: 13px; color: var(--grey-40);
  text-decoration: none; transition: color .15s var(--ease);
}
.ft-col a:hover { color: #fff; }
.ft-legal { grid-column: span 5; display: flex; align-items: flex-end; justify-content: flex-end; }
.ft-legal span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-70); }

/* ============================================ legal page template */

.legal-band { background: var(--grey-100); padding: 40px var(--pad); min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.legal-band .tick { color: var(--blue-40); }
.legal-band h1 { font-size: 44px; font-weight: 300; line-height: 1.08; letter-spacing: -.024em; color: #fff; }
.legal-band .updated { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-50); }

.legal-body { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: 32px; row-gap: 40px; padding: 80px var(--pad); }
.legal-index { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.legal-index a {
  display: block; padding: 8px 0 8px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-60); text-decoration: none;
  transition: color .15s var(--ease), box-shadow .15s var(--ease);
}
.legal-index a:hover { color: var(--grey-100); }
.legal-index a.is-active { color: var(--blue-70); box-shadow: inset 2px 0 0 var(--blue-60); }

.prose { grid-column: 6 / span 9; max-width: 68ch; }
.prose > p:first-child { font-size: 17px; }
.prose h2 {
  font-size: 24px; font-weight: 600; letter-spacing: -.01em;
  border-top: 1px solid var(--grey-20); padding-top: 24px; margin-top: 56px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 { font-size: 17px; font-weight: 600; margin-top: 32px; }
.prose p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--grey-80); }
.prose ul, .prose ol { margin: 16px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.7; color: var(--grey-80); }
.prose li { margin-top: 8px; }
.prose li::marker { color: var(--grey-60); }
.prose strong { color: var(--grey-100); font-weight: 600; }
.prose em { font-style: italic; }

/* ========================================= error / status hero shell */

.shell { display: grid; grid-template-columns: 7fr 5fr; min-height: calc(100vh - var(--header-h)); background: #fff; }
.shell-l { padding: 104px var(--pad) 72px; display: flex; flex-direction: column; gap: 28px; justify-content: center; min-width: 0; }
.shell-r { background: var(--blue-80); min-width: 0; padding: 104px var(--pad) 72px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.shell-h1 { font-size: 56px; font-weight: 300; line-height: 1.04; letter-spacing: -.028em; color: var(--grey-100); max-width: 16ch; }
.shell-l p { font-size: 19px; line-height: 1.55; color: var(--grey-70); max-width: 48ch; }
.shell-panel { border: 1px solid var(--blue-50); background: rgba(0, 29, 108, .72); }
.shell-panel .rec-head { background: var(--blue-90); }
.shell-panel p { padding: 20px 16px; font-size: 15px; line-height: 1.6; color: var(--blue-20); }
.shell-panel p .mono { color: #fff; }

/* ============================================== reveal on scroll */

[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ================================================ responsive pass */

@media (max-width: 1279px) {
  :root { --pad: 40px; }
  .hero-h1 { font-size: clamp(40px, 5.4vw, 72px); }
  .contact-l h2 { font-size: clamp(38px, 4.4vw, 56px); }
}

@media (max-width: 1023px) {
  :root { --pad: 24px; }

  .hd-nav { display: none; }
  .hd-menu { display: flex; }

  .hero { grid-template-columns: 1fr; }
  .hero-l { min-height: 0; }
  .hero-l, .hero-r { padding: 72px var(--pad) 56px; }
  .hero-h1 { font-size: clamp(40px, 7vw, 72px); }
  .hero-cap { max-width: none; }

  .band, .lifecycle { grid-template-columns: 1fr; row-gap: 32px; padding: 72px var(--pad); }
  .band-head, .band-body,
  .lifecycle .band-head, .lifecycle .band-body { grid-column: 1 / -1; }
  .h2 { font-size: 34px; }
  .standfirst { max-width: none; }

  .cells-3, .cells-2, .lc-grid { grid-template-columns: 1fr; }
  .cells-3 { border: 1px solid var(--grey-20); }

  .register { padding: 72px var(--pad); }
  .contact { grid-template-columns: 1fr; }
  .contact > div { padding: 72px var(--pad); }
  .contact-l h2 { max-width: none; }
  .contact-l p { max-width: none; }

  .ft { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-col { grid-column: span 1; }
  .ft-legal { grid-column: 1 / -1; justify-content: flex-start; }

  .legal-body { grid-template-columns: 1fr; padding: 56px var(--pad); }
  .legal-index { grid-column: 1 / -1; position: static; display: flex; flex-wrap: wrap; gap: 4px 16px; border-bottom: 1px solid var(--grey-20); padding-bottom: 16px; }
  .prose { grid-column: 1 / -1; max-width: none; }
  .legal-band h1 { font-size: 34px; }

  .shell { grid-template-columns: 1fr; min-height: 0; }
  .shell-l, .shell-r { padding: 72px var(--pad); }
  .shell-h1 { font-size: clamp(36px, 6vw, 56px); }
}

@media (max-width: 620px) {
  .hd-login { display: none; }
  .hd-brand { padding: 0 12px; gap: 10px; }
  .hd-menu { padding: 0 14px; font-size: 0; gap: 0; }
  .hd-cta { padding: 0 14px; gap: 8px; font-size: 13px; }
  .hero-l, .hero-r { padding: 56px var(--pad) 44px; }
  .hero-stats { column-gap: 12px; }
  .hero-stat b { font-size: 19px; }
  .hero-stat span, .hero-stat span.nowrap { font-size: 10px; letter-spacing: .08em; white-space: normal; }
  .rec-head { letter-spacing: .1em; }
  .rec-row { font-size: 13px; gap: 12px; }
  .hbtn { flex: 1 1 auto; font-size: 15px; padding: 0 18px; }
  .ruled li { grid-template-columns: 32px 1fr; gap: 16px; }
}

@media (max-width: 420px) {
  .hd-word { display: none; }
}

/* shell mark + dark right plane (client login / 404) */
.shell-mark { display: flex; align-items: center; gap: 12px; }
.shell-mark b {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-60); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .012em;
}
.shell-mark b i { font-style: normal; color: var(--blue-30); }
.shell-mark span { font-size: 17px; font-weight: 600; color: var(--grey-100); }
.shell-mark span i { font-style: normal; color: var(--blue-70); }

.shell-r.is-dark { background: var(--grey-100); }
.shell-r.is-dark .rec { border-color: var(--grey-80); background: var(--grey-90); }
.shell-r.is-dark .rec-head { background: var(--grey-100); border-bottom-color: var(--grey-80); color: var(--grey-50); }
.shell-r.is-dark .rec-row { border-bottom-color: var(--grey-80); }
.shell-r.is-dark .rec-row span { color: var(--grey-50); }
.shell-r.is-dark p { font-size: 15px; line-height: 1.6; color: var(--grey-40); max-width: 40ch; }
.shell-r.is-dark .shell-note {
  border-top: 1px solid var(--grey-80); padding-top: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey-60);
}

/* ============================================ page transition sweep */

/* Pre-paint cover on the incoming page. This rule has to be reachable
   before first paint, which it is: styles.css is a render-blocking
   <link> and the class is set by an inline script in <head>. Same
   colour as the tiles, so handing over to the real grid is invisible. */
html.pt-armed::before {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  background: var(--grey-100);
}

.pt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid;
  overflow: hidden;
  pointer-events: none;   /* never intercepts input, at any point */
}

/* Animations, not transitions. The reveal is built while the incoming page
   is still parsing, before its first paint -- a transition there has no
   committed before-change style to run from, so the browser jumped straight
   to the end value and the cover vanished in a single frame. A keyframe
   animation starts correctly on a freshly inserted element. */
@keyframes pt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-fade-out { from { opacity: 1; } to { opacity: 0; } }

.pt-tile {
  background: var(--grey-100);
  opacity: 0;
  animation-fill-mode: both;   /* holds the from-value through the delay */
  animation-play-state: paused;
  /* A half-pixel seam in the next grey up. It closes the subpixel gaps
     between fractional grid tracks, and it keeps the dissolve legible over
     the parts of a page that are already grey-100 -- the header, the footer
     and the login page's right column -- where flat tiles would vanish
     against the background. Carries the tile's own opacity, so it fades
     in step. */
  box-shadow: 0 0 0 0.5px var(--grey-90);
}
.pt-overlay.is-covering  .pt-tile { animation-name: pt-fade-in; }
.pt-overlay.is-revealing .pt-tile { animation-name: pt-fade-out; }
/* released a frame after paint, so the dissolve cannot start already spent */
.pt-overlay.is-running   .pt-tile { animation-play-state: running; }