/* Guardian page only. Shared components live in site.css; colours only as var(--ep-*). */

/* ---------- hero: the claim, the datasheet, the route band, the index ---------- */
.g-hero { padding-top: clamp(28px, 4.4vw, 64px); }
.g-hero-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-5);
  padding-bottom: var(--ep-space-4); border-bottom: 1px solid var(--ep-rule-strong);
}
.g-hero-top .lbl { color: var(--ep-text); }
.g-hero-id {
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 500;
  font-size: 12px; letter-spacing: 0; text-transform: none; margin-inline: 2px;
}
.g-line { display: block; }
.g-hero-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-6);
  align-items: start;
}
.g-hero-text { display: contents; }
.g-hero-text .statement { grid-column: 1 / -1; }
.g-hero-text .lead { grid-column: 1 / span 6; color: var(--ep-text-2); max-width: 54ch; padding-top: var(--ep-space-2); }
.g-hero-spec { grid-column: 8 / -1; }

.g-band { display: grid; gap: var(--ep-space-3); margin-top: clamp(48px, 5.6vw, 80px); min-width: 0; }
.g-band-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ep-space-2) var(--ep-space-6);
  border-top: 1px solid var(--ep-rule); padding-top: var(--ep-space-3);
}
.g-band-cap .small { max-width: 76ch; }

.g-toc {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-3);
  margin-top: clamp(40px, 4.4vw, 64px); border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-4);
}
.g-toc > .lbl { grid-column: 1 / span 3; color: var(--ep-text); }
.g-toc-list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ep-col-gap); }
.g-toc-list a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 8px;
  border-bottom: 1px solid var(--ep-rule); color: var(--ep-text-2); text-decoration: none; font-size: 15px; line-height: 1.3;
}
.g-toc-list a::before { content: ""; width: 7px; height: 7px; flex: none; border: 1.5px solid currentColor; }
.g-toc-list a:hover { color: var(--ep-text); border-bottom-color: var(--ep-text); }
.g-toc-list a:hover::before { background: currentColor; }

/* ---------- role: the keys, who leads, three points ---------- */
.g-role {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-7);
  align-items: start;
}
.g-role-keys { grid-column: 1 / span 5; display: grid; min-width: 0; padding-top: 10px; }
.g-rot { grid-column: 7 / -1; display: grid; gap: var(--ep-space-4); min-width: 0; }
.g-fig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-4); }
.g-fig-head .lbl { color: var(--ep-text); }
.g-rot-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.g-rot-table col.g-rot-first { width: 23%; }
.g-rot-table col.is-ours { background: var(--ep-tint); }
.g-rot-table th, .g-rot-table td { text-align: left; vertical-align: middle; padding: 10px 12px; border-top: 1px solid var(--ep-rule); }
.g-rot-table thead th {
  border-top: 0; padding-block: 10px; vertical-align: bottom;
  font-stretch: var(--ep-width-label); font-weight: 650; font-size: 11.5px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ep-text-3);
}
.g-rot-table thead th.is-ours { color: var(--ep-text); }
.g-rot-table tbody th {
  padding-left: 0; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 400;
  font-size: 12px; color: var(--ep-text-2); white-space: nowrap;
}
.g-rot-table tbody tr:last-child > * { border-bottom: 1px solid var(--ep-rule); }
.g-ord {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 12px; color: var(--ep-text-3);
}
.g-ord .glyph { width: 10px; height: 10px; }
.g-ord.is-lead { color: var(--ep-text); font-weight: 500; }
/* on the tint of our column, text-3 falls just short of AA in Carbon */
.g-rot-table tbody td:nth-child(2) .g-ord { color: var(--ep-text-2); }
.g-rot-table tbody td:nth-child(2) .g-ord.is-lead { color: var(--ep-text); }
.g-rot figcaption { max-width: 56ch; }

.g-points { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-5); column-gap: clamp(24px, 3vw, 48px); row-gap: var(--ep-space-6); }
.g-points p { font-size: 15.5px; }

/* ---------- both chains ---------- */
.g-chains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ep-col-gap); align-items: stretch; }
/* seven children: head, title, text, paths, text, engineer box, address. The free row is the
   second text, so both panels end on their engineer box and address, flush at the bottom. */
.g-chain { gap: var(--ep-space-5); padding: clamp(20px, 2.6vw, 36px); grid-template-rows: auto auto auto auto 1fr auto auto; }
.g-chain > p:nth-of-type(2) { align-self: start; }
.g-chain-title { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.01em; max-width: 22ch; }
.g-chain > p { font-size: 15.5px; }

.g-paths { display: grid; margin: 0; border-top: 1px solid var(--ep-rule-strong); }
.g-path { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--ep-space-4); align-items: center; padding-block: 14px; border-bottom: 1px solid var(--ep-rule); }
.g-path dt { margin: 0; }
.g-path dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ep-space-2) var(--ep-space-4); min-width: 0; }
.g-path-state {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-text);
}
.g-path-state .glyph { width: 10px; height: 10px; }
.g-path-note { font-size: 14.5px; line-height: 1.45; color: var(--ep-text-2); }

/* three keys in a row; the rule after the second is the threshold */
.g-keyset { display: inline-grid; grid-template-columns: auto auto 2px auto; column-gap: 3px; align-items: stretch; }
.g-k {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1.5px solid var(--ep-rule-strong); color: var(--ep-text-2);
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11px; letter-spacing: .02em; white-space: nowrap;
}
.g-k::before { content: ""; width: 6px; height: 6px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.g-k.is-ours { background: var(--ep-inverse); border-color: var(--ep-inverse); color: var(--ep-on-inverse); }
.g-k.is-ours::selection, .g-k.is-ours ::selection { background: var(--ep-on-inverse); color: var(--ep-inverse); }
.g-k-rule { grid-column: 3; grid-row: 1; margin-block: -5px; background: var(--ep-text); }
.g-k-last { grid-column: 4; grid-row: 1; }

.g-eng { display: grid; gap: var(--ep-space-3); align-self: start; align-content: start; background: var(--ep-ground); border: 1px solid var(--ep-rule); padding: 16px 18px; min-width: 0; }
.g-script {
  margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ep-text); white-space: pre; overflow-x: auto;
  border-left: 2px solid var(--ep-rule-strong); padding-left: 14px;
}
.g-script code { font-size: inherit; }
.g-op { color: var(--ep-text-2); }
.g-cm { color: var(--ep-text-3); }
.g-eng-kv { column-gap: var(--ep-space-4); }
.g-eng-kv dd { font-size: 14px; color: var(--ep-text-2); }
.g-eng-kv dd .mono { color: var(--ep-text); overflow-wrap: anywhere; }
.g-eng-kv dd a.mono { font-size: 13px; }
.g-eng-kv .datum-row { margin-top: -2px; }
.g-eng-kv .datum-value { font-size: 12.5px; padding: 4px 8px; background: var(--ep-panel); }

.g-chains-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ep-space-4) var(--ep-space-7);
  margin-top: var(--ep-space-6); padding-top: var(--ep-space-5); border-top: 1px solid var(--ep-rule);
}
.g-chains-foot .note-line { max-width: 72ch; }

/* ---------- the eight checks: the centrepiece, set apart ---------- */
.g-checks-band { background: var(--ep-panel); border-block: 1px solid var(--ep-rule); padding-block: clamp(56px, 7vw, 112px); }
.g-checks-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-5);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.g-checks-head > .lbl { grid-column: 1 / -1; }
.g-checks-title {
  grid-column: 1 / -1;
  font-stretch: var(--ep-width-display); font-weight: 380;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.012em;
}
.g-checks-lead { grid-column: 7 / -1; display: grid; gap: var(--ep-space-3); align-content: start; }
.g-checks-lead .lead { color: var(--ep-text-2); }

.g-seq { display: grid; border-top: 1px solid var(--ep-rule-strong); }
.g-step {
  --g-pad: clamp(22px, 2.4vw, 34px);
  --g-num: clamp(40px, 4.2vw, 60px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap);
  padding-block: var(--g-pad); border-bottom: 1px solid var(--ep-rule); scroll-margin-top: var(--ep-space-5);
}
.g-step-no { grid-column: 1 / span 2; position: relative; min-width: 0; }
.g-num {
  display: block; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 300;
  font-size: var(--g-num); line-height: .86; letter-spacing: -.045em; color: var(--ep-text); font-variant-numeric: tabular-nums;
}
/* the rail: from under each number down to the next step */
.g-step-no::after {
  content: ""; position: absolute; left: .22em; top: calc(var(--g-num) * .86 + 14px); bottom: calc(-1 * var(--g-pad) - 1px);
  width: 1px; background: var(--ep-rule-strong); font-size: var(--g-num);
}
.g-step-main { grid-column: 3 / span 6; display: grid; gap: var(--ep-space-2); align-content: start; min-width: 0; }
.g-step-main h3 { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.008em; }
.g-step-main p:not(.lbl) { color: var(--ep-text-2); font-size: 16px; line-height: 1.6; max-width: 60ch; }
.g-step-if {
  grid-column: 9 / -1; display: grid; gap: 6px; align-content: start; min-width: 0;
  border-left: 1px solid var(--ep-rule); padding-left: var(--ep-space-5); margin-left: var(--ep-space-2);
}
.g-step-if p:not(.lbl) { font-size: 15px; line-height: 1.5; color: var(--ep-text); }
.g-step-if .glyph { width: 10px; height: 10px; margin-right: 10px; vertical-align: -1px; }
.g-step-if .glyph-struck { color: var(--ep-refused); }
.g-step-if .lbl.g-if-2 { margin-top: var(--ep-space-3); }
.g-step-if .mono { overflow-wrap: anywhere; }
.g-step:last-child .g-step-if .glyph { color: var(--ep-text); }

/* after 08: the only output of the sequence */
.g-seq-end {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); align-items: center;
  background: var(--ep-inverse); color: var(--ep-on-inverse); padding-block: clamp(22px, 2.6vw, 34px);
}
.g-seq-end .ic { grid-column: 1 / span 2; margin-left: clamp(16px, 2vw, 24px); }
.g-seq-end .stack-sm { grid-column: 3 / span 8; }
.g-seq-end-h { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.01em; }
.g-seq-end p:not(.g-seq-end-h) { font-size: 15.5px; }
/* on the inverse band the highlight inverts again, or a selection would not show */
.g-seq-end::selection, .g-seq-end ::selection { background: var(--ep-on-inverse); color: var(--ep-inverse); }

.g-checks-foot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ep-space-4) var(--ep-col-gap);
  margin-top: var(--ep-space-6);
}

/* ---------- 23 September ---------- */
.g-rf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-6); align-items: start; }
.g-rf-lede { grid-column: 1 / span 5; display: grid; gap: var(--ep-space-4); align-content: start; }
.g-rf-lede time { font-size: 12.5px; }
.g-rf-line {
  font-stretch: var(--ep-width-display); font-weight: 380;
  font-size: clamp(30px, 3.7vw, 44px); line-height: 1.06; letter-spacing: -.01em; max-width: 14ch;
}
.g-rf-body { grid-column: 7 / -1; display: grid; gap: var(--ep-space-4); min-width: 0; }
.g-rf-log { display: grid; border-top: 1px solid var(--ep-rule-strong); }
.g-rf-row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--ep-space-4); align-items: baseline;
  padding-block: 16px; border-bottom: 1px solid var(--ep-rule);
}
.g-rf-row > p, .g-rf-row .stack-sm > p:first-child { font-size: 16px; color: var(--ep-text); }
.g-rf-row.is-refused { padding-block: 22px; }
.g-rf-said {
  font-stretch: var(--ep-width-heading); font-weight: 520; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -.004em;
  border-left: 2px solid var(--ep-refused); padding-left: 14px; margin-block: 4px;
}
.g-rf-row .data a { color: var(--ep-text-2); }
.g-rf-after { font-size: 15.5px; }

/* ---------- what we hold, what we never do ---------- */
.g-hold { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-7); align-items: start; }
.g-hold-keys { grid-column: 1 / span 7; display: grid; gap: var(--ep-space-5); min-width: 0; }
.g-hold-keys .link-arrow { justify-self: start; }
.g-keys { display: grid; border-top: 1px solid var(--ep-rule-strong); }
.g-key { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--ep-space-4); padding-block: 20px; border-bottom: 1px solid var(--ep-rule); }
.g-key > .ic { width: 28px; height: 28px; color: var(--ep-text-2); }
.g-key-body { display: grid; gap: 6px; min-width: 0; }
.g-key-body > p.muted { font-size: 15px; }
.g-key { scroll-margin-top: var(--ep-space-5); }
.g-key-pub { margin-top: 8px; }
.g-key-pub .datum-value { font-size: 12.5px; line-height: 1.55; }

.g-never {
  grid-column: 9 / -1; display: grid; gap: var(--ep-space-4); min-width: 0;
  background: var(--ep-panel); border: 1px solid var(--ep-rule); border-top: 2px solid var(--ep-text);
  padding: clamp(20px, 2.4vw, 32px);
}
.g-never-h { font-stretch: var(--ep-width-display); font-weight: 420; font-size: clamp(30px, 3.7vw, 44px); line-height: 1.04; letter-spacing: -.01em; }
.g-never-list { display: grid; }
.g-never-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--ep-space-3); padding-block: 14px; border-top: 1px solid var(--ep-rule); }
.g-never-list .ic { width: 22px; height: 22px; color: var(--ep-text-2); margin-top: 1px; }
.g-never-list p { font-stretch: var(--ep-width-heading); font-weight: 500; font-size: 17px; line-height: 1.4; }
.g-never-foot { color: var(--ep-text-2); border-top: 1px solid var(--ep-rule); padding-top: 14px; }

/* ---------- fees ---------- */
.g-fees { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-7); align-items: start; }
.g-fees-table { grid-column: 1 / span 5; display: grid; gap: var(--ep-space-4); min-width: 0; }
.g-fee-table caption.lbl { padding-bottom: var(--ep-space-4); }
.g-fee-table tbody th { font-weight: 500; font-size: 15.5px; padding-block: 16px; }
.g-fee-table td { padding-block: 16px; color: var(--ep-text-2); }
.g-fee-table tbody tr:last-child > * { border-bottom: 1px solid var(--ep-rule); }
.g-fee {
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 400; font-size: 17px;
  letter-spacing: -.01em; color: var(--ep-text); white-space: nowrap;
}
.g-fees-note { max-width: 56ch; }
.g-fees-side { grid-column: 7 / -1; display: grid; gap: var(--ep-space-6); min-width: 0; }
.g-fees-side .stack-sm p { font-size: 15.5px; }

.g-live { display: grid; border: 1px solid var(--ep-rule); background: var(--ep-panel); min-width: 0; }
.g-live-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--ep-space-4);
  padding: 12px clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--ep-rule);
}
.g-live-head .lbl { color: var(--ep-text); }
.g-live-cell { display: grid; gap: 10px; padding: var(--ep-space-4) clamp(14px, 1.6vw, 20px) var(--ep-space-5); }
.g-live-label { font-size: 14px; color: var(--ep-text-2); }
.g-live-value { min-height: 34px; display: flex; align-items: center; }
.g-live-cell[aria-busy="true"] .g-live-value { color: var(--ep-text-3); }
.g-fp { display: grid; gap: 2px; min-width: 0; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ep-text); }
.g-fp-line { display: block; }
.g-fp-g { display: inline-block; }
.g-fp-g + .g-fp-g { margin-left: .2em; }
.g-fp-g.is-diff { color: var(--ep-refused); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.g-live-sub { min-height: 20px; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; line-height: 1.5; color: var(--ep-text-2); overflow-wrap: anywhere; }
.g-live-msg { display: grid; gap: var(--ep-space-3); border-top: 1px solid var(--ep-rule); background: var(--ep-ground); padding: var(--ep-space-4) clamp(14px, 1.6vw, 20px); }
.g-live-msg p, p.g-live-msg { font-size: 14.5px; line-height: 1.55; color: var(--ep-text-2); }

/* ---------- liveness ---------- */
.g-live-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-7); align-items: start; }
.g-up-wrap { grid-column: 1 / span 7; }
.g-up caption.lbl { padding-bottom: var(--ep-space-4); }
.g-up tbody th { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 500; font-size: 14px; white-space: nowrap; padding-block: 16px; }
.g-up td { padding-block: 16px; color: var(--ep-text-2); }
.g-up td b { font-weight: 600; color: var(--ep-text); }
.g-up tbody tr:last-child > * { border-bottom: 1px solid var(--ep-rule); }
.g-up-glyphs { display: inline-flex; gap: 5px; margin-right: 14px; vertical-align: -1px; }
.g-up-glyphs .glyph { width: 11px; height: 11px; }
.g-on { color: var(--ep-synced); }
.g-off { color: var(--ep-offline); }
.g-up .st { font-size: 13px; }
.g-live-side { grid-column: 9 / -1; display: grid; gap: var(--ep-space-5); align-content: start; min-width: 0; }
.g-live-side .link-arrow { justify-self: start; }
.g-now { display: grid; gap: 10px; padding: var(--ep-space-4) clamp(14px, 1.6vw, 20px); border: 1px solid var(--ep-rule); background: var(--ep-panel); }
.g-now .lbl { color: var(--ep-text); }
.g-now-state { min-height: 24px; display: flex; align-items: center; }
.g-now-state .st { font-size: 13px; }
.g-now-state .st.wait { color: var(--ep-text-2); }
.g-now-sub { color: var(--ep-text-2); font-size: 11.5px; overflow-wrap: anywhere; }
.g-now-msg { border-top: 1px solid var(--ep-rule); padding-top: 12px; margin-top: 2px; font-size: 14.5px; line-height: 1.55; color: var(--ep-text-2); }
.g-now-msg a { color: var(--ep-text); white-space: nowrap; }

/* ---------- who would have to do what ---------- */
.g-threat th, .g-threat td { padding-block: 18px; }
.g-threat thead th { padding-top: 0; }
.g-threat tbody th {
  width: 32%; padding-right: var(--ep-space-6);
  font-stretch: var(--ep-width-heading); font-weight: 560; font-size: 16.5px; line-height: 1.35;
}
.g-threat tbody td { color: var(--ep-text-2); font-size: 15.5px; line-height: 1.55; }
.g-threat .g-threat-risk { width: 11rem; padding-right: 0; }
.g-threat .st { font-size: 13.5px; }
.g-threat tbody tr:last-child > * { border-bottom: 1px solid var(--ep-rule-strong); }
.g-threat tr.is-assumption > * { border-top: 2px solid var(--ep-text); padding-block: 24px; color: var(--ep-text); }
.g-threat tr.is-assumption th { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }
.g-threat tr.is-assumption td { font-size: 16.5px; }
.g-threat tr.is-assumption .st { font-size: 15px; font-weight: 600; }
.g-threat tr.is-assumption .st::before { width: 12px; height: 12px; }
.g-threat-foot { margin-top: var(--ep-space-5); max-width: 70ch; }

/* ---------- short answers ---------- */
.g-qa { display: grid; border-top: 1px solid var(--ep-rule-strong); }
.g-qa-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-3);
  padding-block: clamp(20px, 2.2vw, 28px); border-bottom: 1px solid var(--ep-rule);
}
.g-qa-item h3 { grid-column: 1 / span 5; font-stretch: var(--ep-width-heading); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; }
.g-qa-a { grid-column: 7 / -1; display: grid; gap: 6px; min-width: 0; }
.g-qa-short { font-weight: 600; font-size: 17px; line-height: 1.4; }
.g-qa-a p:not(.g-qa-short) { color: var(--ep-text-2); font-size: 15.5px; }

/* labels that only small screens need, where a table's header row is hidden */
.g-sm-lbl { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .g-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-toc > .lbl { grid-column: 1 / span 2; }
  .g-toc-list { grid-column: 3 / -1; }
  .g-chains { grid-template-columns: minmax(0, 1fr); }
  .g-chain { grid-template-rows: none; }
  .g-never { grid-column: 8 / -1; }
  .g-live-side { grid-column: 8 / -1; }
}
@media (max-width: 900px) {
  .g-hero-text .lead, .g-hero-spec { grid-column: 1 / -1; }
  .g-toc > .lbl, .g-toc-list { grid-column: 1 / -1; }
  .g-role-keys, .g-rot { grid-column: 1 / -1; }
  .g-role-keys { max-width: 560px; }
  .g-points { grid-template-columns: minmax(0, 1fr); }
  .g-checks-lead { grid-column: 1 / -1; }
  .g-step { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--ep-space-4); }
  .g-step-no { grid-column: 1; grid-row: 1 / span 2; }
  .g-step-main, .g-step-if { grid-column: 2; }
  .g-step-if { margin: var(--ep-space-4) 0 0; }
  .g-seq-end { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--ep-space-4); }
  .g-seq-end .ic { grid-column: 1; margin-left: 12px; }
  .g-seq-end .stack-sm { grid-column: 2; padding-right: var(--ep-space-4); }
  .g-checks-foot { grid-template-columns: minmax(0, 1fr); }
  .g-rf-lede, .g-rf-body { grid-column: 1 / -1; }
  .g-rf-line { max-width: 16ch; }
  .g-hold-keys, .g-never { grid-column: 1 / -1; }
  .g-fees-table, .g-fees-side { grid-column: 1 / -1; }
  .g-up-wrap, .g-live-side { grid-column: 1 / -1; }
  .g-live-side { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ep-col-gap); }
  .g-live-side .rules { grid-row: span 2; }
  .g-qa-item h3, .g-qa-a { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* the threat table becomes one block per case: the case and its answer, then what it would take */
  .g-threat, .g-threat tbody { display: block; }
  .g-threat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .g-threat tr { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--ep-space-4); row-gap: 8px; border-top: 1px solid var(--ep-rule); padding-block: 18px; }
  .g-threat th, .g-threat td { display: block; border: 0; padding: 0; width: auto; }
  .g-threat tbody th { grid-column: 1; grid-row: 1; padding-right: 0; width: auto; }
  .g-threat .g-threat-risk { grid-column: 2; grid-row: 1; width: auto; display: grid; gap: 4px; justify-items: end; text-align: right; }
  .g-threat .g-sm-lbl, .g-up .g-sm-lbl { display: block; font-stretch: var(--ep-width-label); font-weight: 650; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ep-text-3); white-space: nowrap; }
  .g-threat tbody td:not(.g-threat-risk) { grid-column: 1 / -1; grid-row: 2; }
  .g-threat tbody tr:last-child > * { border-bottom: 0; }
  .g-threat tbody tr:last-child { border-bottom: 1px solid var(--ep-rule-strong); }
  .g-threat tr.is-assumption { border-top: 2px solid var(--ep-text); padding-block: 22px; }
  .g-threat tr.is-assumption > * { border-top: 0; padding-block: 0; }
}
@media (max-width: 620px) {
  .g-checks-title { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.04; }
  .g-hero-spec { grid-template-columns: minmax(0, 1fr); }
  .g-hero-spec dd { border-top: 0; padding-top: 0; }
  .g-hero-spec dt { padding-bottom: 4px; }
  .g-toc-list { grid-template-columns: minmax(0, 1fr); }
  .g-toc-list a { min-height: 42px; }
  .g-rot-table th, .g-rot-table td { padding-inline: 6px; }
  .g-rot-table tbody th { padding-left: 0; font-size: 11px; }
  .g-rot-table col.g-rot-first { width: 21%; }
  .g-rot-table thead th { font-size: 10.5px; letter-spacing: .08em; }
  .g-ord { gap: 6px; font-size: 11px; }
  .g-ord .glyph { width: 9px; height: 9px; }
  .g-path { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .g-eng { padding: 14px; }
  .g-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--ep-space-3); --g-num: 32px; }
  .g-step-if { padding-left: var(--ep-space-4); }
  .g-seq-end { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--ep-space-3); }
  .g-seq-end .ic { width: 28px; height: 28px; margin-left: 10px; }
  .g-rf-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .g-key { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--ep-space-3); }
  .g-key > .ic { width: 24px; height: 24px; }
  .g-fee-table tbody th { width: 52%; }
  .g-fee { font-size: 15.5px; }
  .g-fp { font-size: 13px; }
  .g-up, .g-up tbody { display: block; }
  .g-up caption { display: block; }
  .g-up thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .g-up tr { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--ep-space-4); row-gap: 8px; align-items: center; border-top: 1px solid var(--ep-rule); padding-block: 16px; }
  .g-up th, .g-up td { display: block; border: 0; padding: 0; }
  .g-up tbody th { grid-column: 1; grid-row: 1; padding: 0; }
  .g-up .g-up-risk { grid-column: 2; grid-row: 1; display: grid; gap: 4px; justify-items: end; }
  .g-up .g-up-what { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
  .g-up tbody tr:last-child { border-bottom: 1px solid var(--ep-rule); }
  .g-up tbody tr:last-child > * { border-bottom: 0; }
  .g-live-side { grid-template-columns: minmax(0, 1fr); }
  .g-live-side .rules { grid-row: auto; }
}

/* print: our key and the closing band keep their inverse ground (browsers drop backgrounds) */
@media print {
  .g-k.is-ours, .g-seq-end { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}