/* ============================================================
   Cred Count website — legal document pages
   Loaded by privacy.html and terms.html (generated by
   build_legal.py). Depends on tokens.css, which it overrides for
   long-form reading: softer body colour, looser leading, and a
   narrower measure than the landing page uses.
   ============================================================ */

/* This file used to re-declare the whole palette, including --low at #64748B
   against tokens.css's #7C8BA5. One token name meant two colours depending on
   which page you were on, and the legal one measured 3.75:1 on the page
   background — under the 4.5:1 the footer and the contents numbers need.
   The palette, the reset, the header and the footer now come from tokens.css
   alone. What is left here is only what a long legal document needs and a
   landing page does not. */
body{color:#E2E8F0;line-height:1.7}

/* Prose links. Scoped to the document so the shared header and footer keep
   their own quieter treatment. */
main a{color:var(--cyan);text-decoration:none;
  border-bottom:1px solid rgba(56,189,248,.3)}
main a:hover{border-bottom-color:var(--cyan)}
main{max-width:900px;margin:0 auto;padding:56px 24px 80px}
h1{font-size:2.4rem;line-height:1.15;letter-spacing:-.02em;color:var(--white);
  margin:0 0 8px}
h2{font-size:1.5rem;line-height:1.25;color:var(--white);margin:56px 0 14px;
  padding-top:20px;border-top:1px solid var(--slate-800);letter-spacing:-.01em}
h3{font-size:1.15rem;color:var(--white);margin:36px 0 10px}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 10px}
li>p{margin:12px 0}
strong{color:var(--white);font-weight:650}
code{font-family:var(--mono);font-size:.87em;background:var(--slate-800);
  padding:2px 6px;border-radius:5px;color:#BAE6FD;word-break:break-word}
hr{border:0;border-top:1px solid var(--slate-800);margin:40px 0}
blockquote{margin:24px 0;padding:18px 22px;background:var(--slate-850);
  border-left:3px solid var(--cyan);border-radius:0 10px 10px 0}
blockquote h3{margin-top:0;color:var(--cyan)}
blockquote>*:last-child{margin-bottom:0}
.tw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--slate-800);
  vertical-align:top}
th{color:var(--white);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;font-family:var(--mono);color:var(--dim)}
tbody tr:hover{background:rgba(30,41,59,.4)}
.meta{color:var(--dim);font-size:.95rem;margin-bottom:32px}
.meta p{margin:0 0 4px}
@media (max-width:640px){
  h1{font-size:1.9rem} h2{font-size:1.3rem}
  main{padding:36px 20px 64px}
}
@media print{
  body{background:#fff;color:#000}
  a{color:#000;border:0}
  table{min-width:0}
}

/* ---------- layout: contents sidebar ---------- */
.layout{max-width:900px;margin:0 auto;padding:0 var(--gutter)}
.layout main{max-width:none;margin:0;padding:40px 0 72px}

.toc-mobile{background:var(--slate-850);border:1px solid var(--slate-800);
  border-radius:14px;padding:16px 20px;margin:32px 0 0}
.toc-summary{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;list-style:none}
.toc-summary::-webkit-details-marker{display:none}
.toc h2, .toc-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  font-family:var(--mono);color:var(--dim);margin:0;padding:0;border:0}
.toc-chevron{width:8px;height:8px;border-right:2px solid var(--dim);
  border-bottom:2px solid var(--dim);transform:rotate(45deg);
  transition:transform .2s ease;margin-right:4px}
details[open] .toc-chevron{transform:rotate(-135deg)}
.toc-mobile .toc-in{margin-top:14px}

.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 6px;font-size:.91rem}
.toc li.sub{padding-left:18px;font-size:.86rem;margin:0 0 5px}
.toc a{color:var(--dim);border:0;display:flex;gap:8px;align-items:baseline;
  padding:2px 0;transition:color .15s ease,border-color .15s ease}
.toc a:hover{color:var(--white)}
.toc .n{font-family:var(--mono);font-size:.8em;color:var(--low);
  flex:none;min-width:2.7em;transition:color .15s ease}
.toc a:hover .n{color:var(--cyan)}
.toc a.here{color:var(--white);font-weight:500}
.toc a.here .n{color:var(--cyan);font-weight:600}

@media (max-width:1099px){
  .toc-desktop{display:none}
  .toc-mobile ol{max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:6px}
}

@media (min-width:1100px){
  .toc-mobile{display:none}
  /* One container width for the whole site (--maxw, 1160px). This was 1240px
     while the header and every landing-page section were 1160px, so both the
     wordmark and the left edge of the page shifted by 40px each time you moved
     between a legal page and the home page. The contents rail and the reading
     column still fit comfortably: 1160 - 48 gutters - 280 rail - 64 gap leaves
     768px for a column capped at 74ch (~660px). */
  .layout{max-width:var(--maxw);display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:52px}
  /* A page with no contents rail — versions.html — would otherwise drop
     <main> into the 280px rail column and render as a narrow strip down the
     left. The grid needs telling, because an empty @@TOC@@ slot leaves no
     element for the first column to hold. */
  .layout.wide{grid-template-columns:minmax(0,1fr)}
  /* …and centre the column, or the 74ch reading measure hugs the left
     edge with 450px of dead space beside it. The measure itself stays:
     this page should read like the documents it indexes. */
  .layout.wide main{margin-inline:auto}
  aside.toc{align-self:stretch}
  .layout main{padding:48px 0 96px;max-width:74ch}
  .toc-desktop{position:sticky;top:80px;margin-top:48px;
    display:flex;flex-direction:column;
    max-height:calc(100vh - 120px)}
  .toc-title{font-size:.75rem;margin-bottom:12px;padding-left:12px;
    letter-spacing:.14em;color:var(--dim);flex:none}
  /* The fades exist so a clipped list doesn't look amateur — but a fade at
     the top of an unscrolled list just dims the first item for no reason.
     Each edge is applied only when there is actually something beyond it;
     legal.js toggles the classes. Defaults assume "at the top", which is
     where the page starts and where it stays without JS. */
  .toc-rail{overflow-y:auto;flex:1 1 auto;min-height:0;
    padding-right:24px;padding-bottom:36px;padding-top:8px;
    --fade-top:0px;--fade-bot:32px;
    mask-image:linear-gradient(to bottom, transparent 0px, black var(--fade-top), black calc(100% - var(--fade-bot)), transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0px, black var(--fade-top), black calc(100% - var(--fade-bot)), transparent 100%);
    scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent}
  .toc-rail::-webkit-scrollbar{width:4px}
  .toc-rail::-webkit-scrollbar-track{background:transparent}
  .toc-rail::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25);border-radius:4px}
  .toc-rail::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.5)}
  .toc-rail.sc-top{--fade-top:32px}
  .toc-rail.sc-end{--fade-bot:0px}
  .toc-desktop li{margin:0 0 5px}
  .toc-desktop a{border-left:2px solid transparent;padding:3px 0 3px 12px;margin-left:-14px}
  .toc-desktop a:hover{border-left-color:var(--slate-700)}
  .toc-desktop a.here{border-left-color:var(--cyan)}
}

/* Cross-references to other sections. These appear many times per page, so
   they stay quiet — a dotted underline rather than turning the prose blue. */
a.xref{font-family:var(--mono);font-size:.9em;color:var(--dim);
  border-bottom:1px dotted rgba(148,163,184,.45)}
a.xref:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

/* "Version 1" pointing at an archived version. A sibling of a.xref, not a
   reuse of it: the mono face is right for a "§7" token and wrong for two
   words of running prose, which it renders as though they were code. */
a.vref{color:inherit;border-bottom:1px dotted rgba(148,163,184,.45)}
a.vref:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

@media print{.toc{display:none}.layout{display:block;max-width:none}}

/* The skip link, the focus ring and the sticky-header scroll offset are in
   tokens.css now — the landing page needed all three too. A scrolling table
   is the one element that wants its ring tight against the edge. */
.tw:focus-visible{outline-offset:0}

/* ============================================================
   Reading polish — added 2026-08-03
   ============================================================ */

/* The markdown puts --- before every ##, and h2 already draws its own rule.
   Together they produced two identical lines ~96px apart at every section
   boundary, which read as a mistake rather than a decision. */
hr + h2{border-top:0;padding-top:0;margin-top:24px}

/* The summary is the most-read part of the document and the reason the
   layered structure works. It was styled identically to everything else. */
.summary{background:var(--slate-850);border:1px solid var(--slate-800);
  border-radius:14px;padding:4px 26px 22px;margin:32px 0 8px}
.summary h2{border-top:0;padding-top:0;margin-top:24px}
.summary p{font-size:1.05rem}
.summary > :last-child{margin-bottom:0}

/* Back to top. Revealed by legal.js once you're past the first screen; it
   stays hidden without JS, which is fine for a pure convenience control. */
.totop{position:fixed;right:18px;bottom:18px;z-index:15;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:0;
  background:var(--slate-850);color:var(--white);border:1px solid var(--slate-700);
  border-radius:50%;font-size:1.1rem;text-decoration:none;opacity:.92}
.totop:hover{background:var(--slate-800);color:var(--cyan)}
.totop[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* --- narrow screens: restack tables instead of scrolling them sideways --- */
@media (max-width:600px){
  .tw{overflow-x:visible}
  table{min-width:0}
  table,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{border:1px solid var(--slate-800);border-radius:10px;padding:10px 14px;
    margin:0 0 12px;background:var(--slate-850)}
  /* The label sits beside the value, but the cell is NOT a flex container.
     It used to be, and that pushed every page sideways on a phone.

     In a flex container each inline child becomes its own flex item, so a
     cell reading "…before uninstalling (§3)" is not one wrapping paragraph —
     it is three items in a row (text, the <a>, the closing bracket) on a line
     that, by default, does not wrap. The text can only shrink to its longest
     word, and the rest is pushed past the edge of the card. Plain-text cells
     were fine, which is why this survived: it needed a cell containing any
     inline markup at all. Every § citation in a retention table, and every
     "page · markdown · PDF" cell on /versions, is exactly that.

     Absolute-positioning the label keeps the two-column look and leaves the
     value in normal block flow, where arbitrary inline content simply wraps. */
  td{border:0;padding:6px 0 6px 38%;display:block;position:relative}
  td::before{content:attr(data-label);position:absolute;left:0;top:6px;
    width:34%;color:var(--dim);
    font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
    font-family:var(--mono)}
  .summary{padding:4px 18px 18px;margin-left:-6px;margin-right:-6px}
}

/* --- print ---------------------------------------------------------------
   Chrome's default print-color-adjust:economy darkens light text over an
   unprinted dark background, so this mostly worked by luck. Safari and
   Firefox make their own choices. State it instead of relying on theirs. */
@media print{
  html,body{background:#fff !important;color:#111 !important}
  h1,h2,h3,h4,strong{color:#000 !important}
  a{color:#111 !important;border-bottom:0 !important}
  a.xref{color:#444 !important}
  hr,h2{border-color:#bbb !important}
  code{background:#f2f2f2 !important;color:#111 !important;border:1px solid #ddd}
  .summary{background:#f7f7f7 !important;border:1px solid #ccc !important}
  blockquote{background:#f7f7f7 !important;border-left:3px solid #666 !important;
    color:#111 !important}
  .tw{overflow:visible !important}
  table{min-width:0 !important}
  th{color:#000 !important;background:#eee !important}
  th,td{border-color:#ccc !important}
  .totop,.skip{display:none !important}
  /* Keep related things on the same sheet. */
  h2,h3,h4{break-after:avoid;page-break-after:avoid}
  tr,blockquote,.summary{break-inside:avoid;page-break-inside:avoid}
  main{padding:0 !important;max-width:none !important}
}

/* ============================================================
   Navigation, actions and cohesion — 2026-08-03
   ============================================================ */

/* Contents entries with no § to cite them by: the summary, the device-ID
   explainer, "Asking us for something", and the UK-iPhone passage. They are
   real destinations, so they belong in the rail; they just have no number. */
/* Unnumbered entries have no <span class="n">, so the flex row starts with
   bare text. The desktop rail pulls links left by 14px to make room for the
   active-state border, which clipped the first character. A spacer the width
   of a section number restores the alignment and keeps the column tidy. */
/* Unnumbered entries have no §N, so they need a spacer to stay in column. */
.toc li.unnumbered > a::before{content:"";flex:0 0 auto;width:1.5em}

/* One active marker for every entry, numbered or not. Previously a numbered
   item signalled "here" by turning its §N cyan and an unnumbered one had no
   equivalent — two different treatments, one of which was invisible. */
.toc a{position:relative}
.toc a::after{content:"";position:absolute;left:-14px;top:50%;
  width:2px;height:0;background:var(--cyan);border-radius:2px;
  transform:translateY(-50%);transition:height .18s ease}
.toc a.here::after{height:1.05em}
.toc li.sub.unnumbered{padding-left:18px}
.toc li.unnumbered > a{color:var(--dim)}
/* ...but that selector is (0,2,2) and the active-state rule above it is
   (0,2,1), so it silently won and NO unnumbered entry could ever light up.
   "What this covers", "The 30-second version" and every unnumbered
   subsection stayed grey however far you scrolled into them — the rail
   claimed you were nowhere. Group dividers are excluded: they are passed
   through on the way to their first section and must not claim "here". */
.toc li.unnumbered:not(.group) > a.here{color:var(--white);font-weight:500}

/* Save-a-copy row, at the end of the header block. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:22px 0 0}
.actions .lbl{color:var(--dim);font-size:.85rem;margin-right:2px}
a.dl{display:inline-flex;align-items:baseline;gap:8px;
  background:var(--slate-850);border:1px solid var(--slate-700);
  border-radius:8px;padding:7px 13px;font-size:.88rem;font-weight:600;
  color:var(--white);text-decoration:none}
a.dl::before{content:"↓";color:var(--cyan);font-weight:400}
a.dl .sz{color:var(--low);font-weight:400;font-size:.82em}
a.dl:hover{border-color:var(--cyan);color:var(--cyan)}

/* "What changed in Version N", at the top of a document that has a change
   page. Sits above the save-a-copy row because it answers the question a
   returning reader actually arrives with. Injected by the builder into the
   rendered page, never into the markdown — see add_changes_link(). */
/* On the version line. Lighter than the metadata it sits beside — it is an
   offer, not a heading, and it must not outweigh "Save a copy" below it. */
.vchg{display:inline-flex;align-items:center;gap:6px;margin-left:14px;
  font-weight:500;font-size:.86rem;color:var(--cyan);text-decoration:none;
  border-bottom:1px solid transparent;line-height:1}
.vchg:hover{border-bottom-color:var(--cyan)}
.vchg .arw{transition:transform .18s ease}
.vchg:hover .arw{transform:translateX(3px)}
@media print{.vchg{display:none !important}}

/* In the versions table's "What changed" cell. Sits after the one-line note,
   wrapping to its own line on narrow screens rather than squeezing the note. */
.seemore{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:.85rem;color:var(--cyan);text-decoration:none;
  border-bottom:1px solid transparent}
.seemore:hover{border-bottom-color:var(--cyan)}
.seemore .arw{transition:transform .18s ease}
.seemore:hover .arw{transform:translateX(3px)}

/* Fallback placement only — see add_changes_link(). */
.whatsnew{margin:22px 0 0}
.whatsnew a{display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--slate-850),var(--slate-900));
  border:1px solid var(--cyan);border-radius:10px;padding:11px 16px;
  font-size:.92rem;color:var(--white);text-decoration:none}
.whatsnew a strong{font-weight:650}
.whatsnew .arw{color:var(--cyan);transition:transform .18s ease}
.whatsnew a:hover .arw{transform:translateX(3px)}
@media print{.whatsnew{display:none !important}}

/* Per-heading controls. Hidden until the heading is hovered or focused, so
   they never compete with the text. Both icons occupy the same fixed box and
   cross-fade, so nothing reflows when the state changes — swapping a glyph
   for the word "copied" resized the control and moved it out from under the
   pointer, which is why the confirmation only seemed to appear on mouse-out. */
.htools{display:inline-flex;gap:5px;margin-left:12px;vertical-align:middle;
  opacity:0;transform:translateY(1px);
  transition:opacity .16s ease,transform .16s ease}
h2:hover .htools,h3:hover .htools,h4:hover .htools,
.htools:focus-within{opacity:1;transform:none}
@media (hover:none){.htools{opacity:.55}}

.htools a,.htools button{
  position:relative;display:inline-grid;place-items:center;
  width:26px;height:26px;padding:0;cursor:pointer;
  color:var(--dim);background:var(--slate-850);
  border:1px solid var(--slate-800);border-radius:7px;
  transition:color .16s ease,border-color .16s ease,background .16s ease}
.htools a:hover,.htools button:hover{
  color:var(--cyan);border-color:rgba(56,189,248,.45);background:var(--slate-800)}

.htools .i{grid-area:1/1;width:14px;height:14px;fill:none;
  stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .18s ease,transform .18s ease}
.htools .i-b{opacity:0;transform:scale(.6)}
.htools .copied{color:var(--green);border-color:rgba(74,222,128,.5);
  background:rgba(74,222,128,.10)}
.htools .copied .i-a{opacity:0;transform:scale(.6)}
.htools .copied .i-b{opacity:1;transform:none}

/* Cross-page transitions moved to tokens.css: a cross-document view transition
   only runs if BOTH the page you leave and the page you arrive at opt in, and
   this file is not loaded by index.html — so privacy<->terms faded and
   home<->either did not. */

/* Page-numbered contents when printing the HTML page.
   No browser implements target-counter() today, so this does nothing yet and
   costs nothing — the leader dots and numbers simply don't render. If one
   ever ships it, the printed contents starts working on its own. Until then,
   build_legal_pdf.py produces the real thing. */
@media print{
  .toc{display:block !important}
  .toc-mobile{display:none !important}
  .toc-desktop{display:block !important;position:static !important;
    max-height:none !important}
  .toc-rail{overflow:visible !important;mask-image:none !important;
    -webkit-mask-image:none !important}
  .toc a{color:#111 !important}
  .toc a::after{content:leader('.') " " target-counter(attr(href), page);
    color:#888}
  .toc + main{break-before:page}
  .actions{display:none !important}
}

/* Rail breathing room. The scrollbar and fade sat hard against the reading
   column; at 1100–1300px the two were almost touching. */
@media (min-width:1100px){
  .layout{gap:64px}
  .toc-rail{padding-right:30px}
}
@media (min-width:1400px){ .layout{gap:80px} }

@media print{
  .htools,.actions{display:none !important}
}

/* Derived sub-subsection label — 4A(i). Quieter than a section number,
   because it exists to show what a heading belongs to, not to be cited. */
.hnum{font-family:var(--mono);font-size:.62em;font-weight:400;
  color:var(--low);letter-spacing:.04em;vertical-align:.18em;margin-right:2px}

/* ============================================================
   HEADING GRAMMAR — added 2026-08-03

   The privacy policy uses three levels of <h2>/<h4> that are different KINDS
   of thing, not just different depths. build_legal.py marks the first two; the
   third is what <h4> means in these documents. The contract is in README.md
   under "Heading grammar" — read it before changing anything here.

     h2                -> a numbered section.               "3. What stays..."
     h2.group          -> a divider heading a GROUP.        "What we hold"
     h4                -> a repeating spine label.          "Lawful basis"
   ============================================================ */

/* --- group dividers: body ---------------------------------------------------
   These have no section number because they are not sections — each one heads
   the three-to-six numbered sections beneath it. Styled as a numbered h2 they
   looked like sections someone had forgotten to write. They now use the same
   mono/uppercase/tracked language the landing page uses for its section
   eyebrows, so a reader who has seen credcount.app already knows this means
   "new part starts here" rather than "new section". */
main h2.group{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--cyan);
  border-top:0; padding-top:0;
  margin:78px 0 8px;
  display:flex; align-items:center; gap:14px;
}
/* The rule runs to the end of the measure, so the divider reads as a band
   across the column rather than as a very small heading. */
main h2.group::after{
  content:""; flex:1 1 auto; height:1px; min-width:24px;
  background:linear-gradient(90deg,rgba(56,189,248,.5),rgba(56,189,248,0));
}
/* The <hr> the markdown puts before every h2 would double the rule this
   divider already draws. */
hr:has(+ h2.group){display:none}
/* Each divider is followed by a sentence saying what the group contains.
   That sentence belongs to the divider, so it sits tight beneath it and reads
   as a standfirst rather than as the first paragraph of a section. */
main h2.group + p{
  color:var(--dim); font-size:1.05rem; line-height:1.6;
  margin:0 0 8px;
}
/* The first section in a group follows its standfirst directly and needs no
   further separation — the divider above has already done that work. */
main h2.group + p + h2{margin-top:34px}

/* --- group dividers: contents rail -----------------------------------------
   In the rail these sat as siblings of the sections they contain, so the
   structure they exist to express was invisible. They become quiet labels and
   the sections indent beneath them. */
.toc li.group{margin:26px 0 8px}
.toc li.group:first-child{margin-top:0}
/* No padding override here: the desktop rail pulls every link left by 14px to
   make room for the active-state border, and zeroing the compensating padding
   clipped the first character ("What we hold" -> "at we hold"). The label
   starts in the § column and the section titles indent past it, which is the
   relationship being expressed. */
.toc li.group > a{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--low);
}
.toc li.group > a:hover{color:var(--cyan)}
/* Unnumbered entries reserve a §-width spacer to keep the column aligned. A
   group label is not in that column — it labels it. */
.toc li.group > a::before{content:none}
/* Never mark a divider as the section you are reading: legal.js tracks every
   heading in the rail, and a divider is only ever passed through on the way to
   the first section of its group — so it would claim "you are here" for the
   two seconds before §3 arrives, and the real answer would be nowhere. All
   three active markers are suppressed: the colour, the bar, and the rail's
   own left border. */
.toc li.group > a.here{color:var(--low); font-weight:600}
.toc li.group > a.here::after{height:0}
.toc-desktop li.group > a.here{border-left-color:transparent}

/* --- the spine labels -------------------------------------------------------
   Six disclosure sections each carry the same seven <h4>s in the same order:
   What happens / What we receive / Who processes it / Where / Lawful basis /
   Retention / Also worth knowing. They are a scaffold, not a table of
   contents: you learn the seven positions once, then scan any section for the
   one you want. They are deliberately absent from the rail.

   Styled as headings they turned six sections into ~forty, which is worse than
   the flat prose they replaced. They are field labels now — small, tracked,
   muted, and tight to the answer beneath — so the eye passes over them until
   it is hunting for one, and then finds it instantly because it is in the same
   place every time. */
main h4{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em;
  color:var(--dim);
  margin:26px 0 3px;
}
/* Label and answer are one unit. */
main h4 + p,
main h4 + ul,
main h4 + ol,
main h4 + .tw{margin-top:0}
/* A spine label opening a section shouldn't be pushed away from it. */
main h3 + h4,
main h2 + h4{margin-top:18px}

/* The copy-link control is sized for a 1.5rem h2. In a 0.72rem label it was
   taller than the line it belonged to and shifted the text off the baseline. */
main h2.group .htools,
main h4 .htools{margin-left:9px}
main h2.group .htools a,
main h2.group .htools button,
main h4 .htools a,
main h4 .htools button{width:20px;height:20px;border-radius:5px}
main h2.group .htools .i,
main h4 .htools .i{width:11px;height:11px}

@media (max-width:640px){
  main h2.group{margin-top:56px; letter-spacing:.16em}
  main h2.group + p{font-size:1rem}
  main h4{font-size:.7rem; letter-spacing:.11em}
}
/* Narrow enough that a long label wraps ("What moves, and where"), which left
   the trailing rule floating beside two lines of text. Below this the rule
   takes its own full-width line under the label instead. */
@media (max-width:560px){
  main h2.group{flex-wrap:wrap; gap:0 14px; line-height:1.35}
  main h2.group::after{flex:0 0 100%; margin-top:9px}
}

@media print{
  main h2.group{color:#000 !important; margin-top:34px;
    border-bottom:1px solid #bbb; padding-bottom:4px}
  main h2.group::after{display:none}
  hr:has(+ h2.group){display:none}
  main h4{color:#333 !important}
  /* --dim is a mid-grey chosen for a near-black background; on white it
     measures about 2.4:1 and the standfirst all but disappears. */
  main h2.group + p{color:#333 !important}
  /* A group divider belongs with the group it opens. */
  main h2.group{break-after:avoid; page-break-after:avoid}
}