/* CEVO legal pages. Sage look, values copied from kit/tokens.css (never linked into ../brand3).
   1rem = 10px (62.5% of the reader's own default, so browser text zoom still works).
   Every class is prefixed lg- so pasted blocks never collide. Two marks are unprefixed on purpose: mark.ph and mark.cf
   (the placeholder convention in SPEC.md). No JavaScript anywhere. */

@font-face {
  font-family: "Switzer";
  src: url(../fonts/Switzer-Variable.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../fonts/JetBrainsMono-Regular.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Sage palette */
  --mist: #F3F5F2;
  --paper: #E4EBE6;
  --cloud: #D2DCD5;
  --sage: #B8C7BD;
  --celadon: #7E9688;
  --field: #5E7367;
  --pine: #244839;
  --pine-deep: #1C3A2D;
  --obsidian: #111614;
  --card: #F9FAF8;
  --white: #FFFFFF;

  /* Inks on mist */
  --ink: #111614;
  --ink-2: rgba(17, 22, 20, .70);   /* 8:1 on mist */
  --ink-3: rgba(17, 22, 20, .62);   /* 5.6:1 on mist, small meta only */
  --line: rgba(17, 22, 20, .12);
  --line-2: rgba(17, 22, 20, .24);
  --focus: #244839;

  /* Placeholder marks: two hues no link or brand colour uses (links are pine and underlined) */
  --ph-bg: #F9DED6; --ph-ink: #8C2410; --ph-line: rgba(140, 36, 16, .55);   /* 6.9:1 */
  --cf-bg: #E6E3F6; --cf-ink: #3D2A82; --cf-line: rgba(61, 42, 130, .55);   /* 9.0:1 */

  --sans: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 4rem;
  --toc-w: 22rem;
  --measure: 68ch;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 2.4rem;
}
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--mist); color: var(--ink);
  font-family: var(--sans); font-feature-settings: "kern";
  font-size: 1.6rem; line-height: 2.6rem; font-weight: 370; letter-spacing: -.006em; word-spacing: .03em;
  overflow-wrap: break-word;
}
main { display: block; flex: 1; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--pine-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: .2rem; }
[id] { scroll-margin-top: 2.4rem; }
.lg-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lg-skip { position: absolute; left: 1.6rem; top: -10rem; z-index: 10; padding: .8rem 1.4rem; border-radius: .8rem;
  background: var(--pine); color: var(--mist); text-decoration: none; font-size: 1.4rem; line-height: 2rem; }
.lg-skip:focus { top: 1.6rem; }
.lg-mono { font-family: var(--mono); font-size: 1.2rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; }

.lg-wrap { width: 100%; max-width: 128rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header ---------- */
.lg-header { border-bottom: 1px solid var(--line); }
.lg-header .lg-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-height: 7.2rem; }
.lg-brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; margin-left: -.6rem; padding: .4rem; }
.lg-brand img { display: block; height: 3.2rem; width: auto; }
.lg-draft {
  flex: none; padding: .5rem 1.1rem; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}

/* ---------- title block ---------- */
.lg-title { padding: 8rem 0 6.4rem; }
.lg-eyebrow { font-family: var(--mono); font-size: 1.2rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pine); }
.lg-h1 {
  margin-top: 1.6rem; max-width: 20ch;
  font-size: 5.2rem; line-height: 5.8rem; font-weight: 330; letter-spacing: -.032em; word-spacing: .03em; text-wrap: balance;
}
.lg-lead { margin-top: 2.4rem; max-width: 56ch; font-size: 2rem; line-height: 3rem; font-weight: 350; letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.lg-updated { margin-top: 2.4rem; font-family: var(--mono); font-size: 1.2rem; line-height: 1.6rem; letter-spacing: .04em; color: var(--ink-3); }

/* ---------- layout: sticky section nav left, prose right ---------- */
.lg-layout { display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr); column-gap: 8rem; align-items: start; padding-bottom: 12rem; }
.lg-layout--single { grid-template-columns: minmax(0, 1fr); }
.lg-toc { position: sticky; top: 3.2rem; max-height: calc(100vh - 6.4rem); overflow-y: auto; padding: .4rem .4rem .4rem 0; }
.lg-toc__label { font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lg-toc__list { list-style: none; margin: 1.2rem 0 0; padding: 0; border-left: 1px solid var(--line); }
.lg-toc__list a {
  display: block; padding: .6rem 0 .6rem 1.6rem; margin-left: -1px; border-left: 1px solid transparent;
  font-size: 1.4rem; line-height: 2rem; color: var(--ink-2); text-decoration: none;
}
.lg-toc__list a:hover { color: var(--ink); border-left-color: var(--pine); }

/* ---------- prose ---------- */
.lg-prose { max-width: var(--measure); min-width: 0; font-size: 1.7rem; line-height: 2.8rem; }
.lg-prose > * + * { margin-top: 2rem; }
.lg-sec + .lg-sec { margin-top: 6.4rem; padding-top: 4rem; border-top: 1px solid var(--line); }
.lg-sec > * + * { margin-top: 2rem; }
.lg-prose h2 { font-size: 3rem; line-height: 3.6rem; font-weight: 340; letter-spacing: -.024em; text-wrap: balance; }
.lg-prose h3 { font-size: 2rem; line-height: 2.8rem; font-weight: 440; letter-spacing: -.012em; }
.lg-prose h2 + *, .lg-prose h3 + * { margin-top: 1.2rem; }
.lg-prose * + h3 { margin-top: 3.6rem; }
.lg-prose h4 { font-size: 1.7rem; line-height: 2.6rem; font-weight: 480; letter-spacing: -.006em; }
.lg-prose strong, .lg-prose b { font-weight: 480; }
.lg-prose ul, .lg-prose ol { padding-left: 2.4rem; }
.lg-prose li + li { margin-top: .8rem; }
.lg-prose li > ul, .lg-prose li > ol { margin-top: .8rem; }
.lg-prose ul li::marker { color: var(--celadon); }
.lg-prose ol li::marker { color: var(--pine); font-family: var(--mono); font-size: .8em; }
.lg-prose .lg-small { font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-2); }
.lg-prose code { font-family: var(--mono); font-size: .86em; padding: .1em .35em; border-radius: .4rem; background: var(--paper); }

/* definition rows: <dl class="lg-defs"><div><dt>Term</dt><dd>Meaning</dd></div>...</dl> */
.lg-defs { border-top: 1px solid var(--line); }
.lg-defs > div { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: 3.2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.lg-defs dt { font-weight: 480; font-size: 1.6rem; line-height: 2.6rem; }
.lg-defs dd { color: var(--ink); }
.lg-defs dd > * + * { margin-top: .8rem; }
.lg-sec > .lg-defs:last-child > div:last-child { border-bottom: 0; }

/* tables: always inside <div class="lg-table" role="region" aria-label="..." tabindex="0"> so they scroll in their own box */
.lg-table {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-radius: 1.2rem; box-shadow: inset 0 0 0 1px var(--line); background: var(--card);
}
.lg-table table { width: 100%; min-width: 64rem; border-collapse: collapse; font-size: 1.5rem; line-height: 2.3rem; }
.lg-table--narrow table { min-width: 44rem; }
.lg-table th, .lg-table td { padding: 1.4rem 1.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table--wide th, .lg-table--wide td { padding-left: 1.2rem; padding-right: 1.2rem; }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table thead th {
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 400; color: var(--ink-2); background: var(--paper); white-space: nowrap;
}
.lg-table thead th:first-child { border-top-left-radius: 1.2rem; }
.lg-table thead th:last-child { border-top-right-radius: 1.2rem; }
.lg-table tbody th { font-weight: 480; }

/* plain summary callout: <aside class="lg-summary"><p class="lg-summary__label">In short</p>...</aside> */
.lg-summary { padding: 2.4rem 2.8rem; border-radius: 1.6rem; background: var(--paper); }
.lg-summary__label { font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pine); }
.lg-summary > * + * { margin-top: 1.2rem; }
.lg-summary ul { padding-left: 0; list-style: none; }
.lg-summary li + li { margin-top: .6rem; }

/* ---------- placeholder marks (SPEC "Placeholder convention") ---------- */
mark.ph, mark.cf, .lg-key.ph, .lg-key.cf {
  padding: .1em .38em; border-radius: .4rem; font-weight: 460; letter-spacing: -.004em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
mark.ph, .lg-key.ph { background: var(--ph-bg); color: var(--ph-ink); box-shadow: inset 0 0 0 1px var(--ph-line); }
mark.cf, .lg-key.cf { background: var(--cf-bg); color: var(--cf-ink); outline: 1px dashed var(--cf-line); outline-offset: -1px; }
mark.ph a, mark.cf a { color: inherit; }

/* ---------- decision choice (decisions.html) ---------- */
.lg-choice { padding: 2.8rem; border-radius: 1.6rem; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.lg-prose .lg-choice { max-width: none; }
.lg-choice > * + * { margin-top: 1.2rem; }
.lg-choice__n { font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lg-prose .lg-choice__q { margin-top: .8rem; font-size: 2rem; line-height: 2.8rem; font-weight: 440; letter-spacing: -.012em; }
.lg-choice__why { font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-2); }
.lg-choice__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.lg-opt { position: relative; padding: 2rem 2rem 2.2rem; border-radius: 1.2rem; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); }
.lg-opt--rec { box-shadow: inset 0 0 0 1.5px var(--pine); }
.lg-opt__tag {
  display: inline-block; padding: .3rem .9rem; border-radius: 9999px;
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.lg-opt--rec .lg-opt__tag { background: var(--pine); color: var(--mist); box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lg-opt__title { margin-top: 1.4rem; padding-right: 0; font-size: 1.7rem; line-height: 2.5rem; font-weight: 480; letter-spacing: -.008em; }
.lg-opt__body { margin-top: .8rem; font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-2); }
.lg-opt__body > * + * { margin-top: .8rem; }
.lg-opt ul { padding-left: 2rem; }
.lg-cite { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 1.4rem; line-height: 2.2rem; color: var(--ink-2); }
.lg-cite__label { margin-right: .8rem; font-family: var(--mono); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- consent step mock (copies the look of questionnaire step 6, static) ---------- */
.lg-step { max-width: 68rem; border-radius: 2rem; background: var(--card); box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .10); font-size: 1.6rem; line-height: 2.4rem; }
.lg-prose .lg-step { margin-top: 2.8rem; }
.lg-prose .lg-step + * { margin-top: 2.8rem; }
.lg-step__top { padding: 2.8rem 4rem 0; }
.lg-step__count {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem;
  font-family: var(--mono); font-size: 1.2rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.lg-step__count span:first-child { color: var(--pine); }
.lg-step__progress { margin-top: 1.4rem; height: 2px; border-radius: 2px; background: rgba(17, 22, 20, .08); overflow: hidden; }
.lg-step__progress span { display: block; width: 100%; height: 100%; background: var(--pine); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lg-step__body { padding: 3.6rem 4rem 4rem; }
.lg-step__h { font-size: 2.8rem; line-height: 3.4rem; font-weight: 340; letter-spacing: -.024em; text-wrap: balance; }
.lg-consent {
  margin-top: 2.4rem; padding: 2rem; border-radius: 1.2rem; background: var(--white); box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .12);
  display: flex; gap: 1.6rem; align-items: flex-start;
}
.lg-consent + .lg-consent { margin-top: 1.2rem; }
.lg-consent__icon { flex: none; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--pine); }
.lg-consent__icon svg { width: 2.2rem; height: 2.2rem; display: block; }
.lg-consent__body { flex: 1; min-width: 0; }
.lg-consent__lead { font-size: 1.5rem; line-height: 2.2rem; font-weight: 370; color: var(--ink-2); text-wrap: pretty; }
.lg-check { margin-top: 1.6rem; display: flex; gap: 1.2rem; align-items: flex-start; min-height: 4.4rem; padding: .2rem 0; }
.lg-check + .lg-check { margin-top: 1.2rem; }
.lg-check__box { flex: none; width: 2.4rem; height: 2.4rem; margin-top: .1rem; border-radius: .6rem; background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(17, 22, 20, .42); }
.lg-check__text { font-size: 1.5rem; line-height: 2.4rem; font-weight: 420; color: var(--ink); }
.lg-check__tag {
  display: inline-block; margin-left: .6rem; padding: 0 .7rem; border-radius: 9999px; vertical-align: .1em;
  font-family: var(--mono); font-size: 1rem; line-height: 1.8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 400;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.lg-step__note { margin-top: 2rem; display: flex; gap: 1rem; align-items: flex-start; font-size: 1.4rem; line-height: 2rem; color: var(--ink-2); }
.lg-step__note svg { flex: none; width: 1.8rem; height: 1.8rem; margin-top: .1rem; color: var(--pine); }

/* ---------- index list (written by tools/build-index.mjs) ---------- */
.lg-key-row { display: flex; flex-wrap: wrap; gap: 1.2rem 3.2rem; font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-2); }
.lg-key-row p { margin: 0; }
.lg-pages, .lg-prose .lg-pages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lg-prose .lg-key-row + .lg-pages { margin-top: 3.2rem; }
.lg-prose .lg-pages > li + li { margin-top: 0; }
.lg-pages > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3.2rem; align-items: baseline; padding: 2.4rem 0; border-bottom: 1px solid var(--line); }
.lg-pages__name { font-size: 2rem; line-height: 2.8rem; font-weight: 400; letter-spacing: -.014em; }
.lg-pages__name a { display: block; padding: .8rem 0; margin: -.8rem 0; color: var(--ink); text-decoration: none; }
.lg-pages__name a:hover { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; }
.lg-pages__name--pending { color: var(--ink-3); }
.lg-pages__desc { grid-column: 1; margin-top: .6rem; font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-2); }
.lg-pages__counts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
.lg-pages__counts .lg-key { font-size: 1.3rem; line-height: 2rem; white-space: nowrap; }
.lg-pages__state { font-family: var(--mono); font-size: 1.1rem; line-height: 2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lg-pages__total { font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-2); }

/* ---------- footer ---------- */
.lg-footer { border-top: 1px solid var(--line); background: var(--paper); }
.lg-footer .lg-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8rem; row-gap: 3.2rem; padding-top: 5.6rem; padding-bottom: 5.6rem; }
.lg-footer__brand { align-self: start; }
.lg-footer__brand img { display: block; height: 2.8rem; width: auto; }
.lg-footer__links { list-style: none; margin: -.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: .4rem 4rem; }
.lg-footer__links a { display: inline-block; padding: .5rem 0; font-size: 1.4rem; line-height: 2rem; color: var(--ink); text-decoration: none; }
.lg-footer__links a:hover { color: var(--pine); text-decoration: underline; }
.lg-footer__links a[aria-current="page"] { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; }
.lg-footer__contact { grid-column: 2; display: flex; flex-wrap: wrap; gap: .8rem 3.2rem; font-size: 1.4rem; line-height: 2rem; color: var(--ink-2); }
.lg-footer__contact a { color: var(--ink); }

/* ---------- tablet and phone ---------- */
@media (max-width: 1099px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { position: static; max-height: none; overflow: visible; margin-bottom: 4.8rem; padding: 2rem 2.4rem; border-radius: 1.2rem; box-shadow: inset 0 0 0 1px var(--line); }
  .lg-toc__list { border-left: 0; margin-top: .8rem; }
  .lg-toc__list li + li { border-top: 1px solid var(--line); }
  .lg-toc__list a { padding: 1rem 0; margin: 0; border: 0; font-size: 1.5rem; line-height: 2rem; }
  .lg-toc__list a:hover { border: 0; }
  .lg-prose { max-width: 72ch; }
}
@media (max-width: 767px) {
  :root { --gutter: 1.6rem; }
  .lg-header .lg-wrap { min-height: 6.4rem; }
  .lg-brand { padding: .8rem; margin-left: -.8rem; }
  .lg-brand img { height: 2.8rem; }
  .lg-title { padding: 4.8rem 0 4rem; }
  .lg-h1 { font-size: 3.6rem; line-height: 4.2rem; letter-spacing: -.028em; }
  .lg-lead { margin-top: 1.6rem; font-size: 1.8rem; line-height: 2.7rem; }
  .lg-layout { padding-bottom: 8rem; }
  .lg-toc { padding: 1.6rem 2rem; margin-bottom: 4rem; }
  .lg-prose { font-size: 1.6rem; line-height: 2.6rem; }
  .lg-prose h2 { font-size: 2.4rem; line-height: 3rem; }
  .lg-prose h3 { font-size: 1.8rem; line-height: 2.6rem; }
  .lg-sec + .lg-sec { margin-top: 4.8rem; padding-top: 3.2rem; }
  .lg-prose ul, .lg-prose ol { padding-left: 2rem; }
  .lg-defs > div { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
  .lg-summary { padding: 2rem; }
  .lg-choice { padding: 2rem 1.6rem; }
  .lg-choice__opts { grid-template-columns: minmax(0, 1fr); }
  .lg-opt { padding: 1.8rem 1.6rem 2rem; }
  .lg-step { border-radius: 1.6rem; }
  .lg-step__top { padding: 2rem 2rem 0; }
  .lg-step__body { padding: 2.8rem 2rem 3.2rem; }
  .lg-step__h { font-size: 2.4rem; line-height: 3rem; }
  .lg-consent { padding: 1.6rem; gap: 1.2rem; }
  .lg-consent__icon { width: 3.2rem; height: 3.2rem; }
  .lg-consent__icon svg { width: 1.8rem; height: 1.8rem; }
  .lg-check { margin-left: -4.4rem; }
  .lg-pages > li { grid-template-columns: minmax(0, 1fr); padding: 2rem 0; }
  .lg-pages__counts { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 1.2rem; }
  .lg-footer .lg-wrap { grid-template-columns: minmax(0, 1fr); padding-top: 4rem; padding-bottom: 4rem; }
  .lg-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
  .lg-footer__links a { padding: 1.2rem 0; }
  .lg-footer__brand { display: inline-block; padding: .8rem 0; }
  .lg-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
  .lg-toc__list li + li { border-top: 0; }
  .lg-toc__list li { border-top: 1px solid var(--line); }
  .lg-toc__list a { padding: 1.2rem 0; }
  .lg-table:not(.lg-table--wide) table { min-width: 0; }
  .lg-table:not(.lg-table--wide) th, .lg-table:not(.lg-table--wide) td { padding: 1.2rem 1rem; }
  .lg-table:not(.lg-table--wide) thead th { white-space: normal; }
  .lg-table:not(.lg-table--wide) td { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
  .lg-table--wide {
    background:
      linear-gradient(90deg, var(--card) 30%, rgba(249, 250, 248, 0)) left center / 3rem 100% no-repeat local,
      linear-gradient(270deg, var(--card) 30%, rgba(249, 250, 248, 0)) right center / 3rem 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(17, 22, 20, .16), transparent) right center / 1.2rem 100% no-repeat scroll,
      var(--card);
  }
  .lg-footer__contact { grid-column: 1; flex-direction: column; }
}

/* ---------- print: legal pages get printed ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  html { font-size: 50%; }
  body { background: #fff; display: block; }
  .lg-skip, .lg-toc, .lg-footer__links { display: none !important; }
  .lg-header { border-bottom: 1px solid #999; }
  .lg-wrap { max-width: none; padding: 0; }
  .lg-title { padding: 3rem 0 3rem; }
  .lg-layout { display: block; padding-bottom: 0; }
  .lg-prose { max-width: none; font-size: 1.9rem; line-height: 2.9rem; }
  .lg-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; overflow-wrap: anywhere; }
  .lg-prose h2, .lg-prose h3 { break-after: avoid; page-break-after: avoid; }
  .lg-sec + .lg-sec { break-before: auto; }
  .lg-summary, .lg-choice, .lg-opt, .lg-step, .lg-consent, .lg-defs > div, .lg-table tr, .lg-pages > li { break-inside: avoid; page-break-inside: avoid; }
  .lg-table { overflow: visible; box-shadow: 0 0 0 1px #bbb; }
  .lg-table table { min-width: 0; }
  .lg-summary { box-shadow: inset 0 0 0 1px #bbb; }
  mark.ph { box-shadow: none; border: 1.5px solid var(--ph-ink); }
  mark.cf { outline: 0; border: 1.5px dashed var(--cf-ink); }
  .lg-footer { background: #fff; border-top: 1px solid #999; }
  .lg-footer .lg-wrap { display: block; padding: 3rem 0 0; }
  .lg-footer__brand { display: none; }
}

/* block components get more air than paragraphs (placed last so it wins over the 2rem flow rule) */
.lg-sec > * + .lg-table, .lg-sec > * + .lg-choice, .lg-sec > * + .lg-step, .lg-sec > * + .lg-summary, .lg-sec > * + .lg-defs,
.lg-sec > .lg-table + *, .lg-sec > .lg-step + *, .lg-sec > .lg-summary + * { margin-top: 3.2rem; }
.lg-sec > .lg-choice + .lg-choice { margin-top: 2.4rem; }

/* under 390px whole words no longer fit three columns; break inside a word rather than scroll the table */
@media (max-width: 389px) {
  .lg-table:not(.lg-table--wide) td { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Answer state (decision sheet). Jim's Checkpoint-1 answers, 24 Oct 2026.
   <section class="lg-choice lg-choice--decided">   Jim answered; his answer goes in .lg-answer, both options dim
   <section class="lg-choice lg-choice--pending">   still open; options keep their normal look
   <span class="lg-state lg-state--decided|pending"> sits inside .lg-choice__n next to the card number
   Dimmed options stay at ink-3 (5.6:1) so the record of what was offered remains readable.
   --------------------------------------------------------------------------------------------------------------- */
.lg-choice__n { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.lg-state {
  display: inline-block; padding: .3rem .9rem; border-radius: 9999px;
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase;
}
.lg-state--decided { background: var(--pine); color: var(--mist); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lg-state--pending { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lg-answer {
  padding: 1.4rem 1.8rem; border-radius: 1.2rem; background: var(--pine); color: var(--mist);
  font-size: 1.6rem; line-height: 2.5rem; font-weight: 400;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lg-answer__label {
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sage);
}
.lg-choice--decided .lg-opt { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lg-choice--decided .lg-opt__tag { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.lg-choice--decided .lg-opt__title, .lg-choice--decided .lg-opt__body { color: var(--ink-3); }
@media (max-width: 767px) {
  .lg-answer { padding: 1.2rem 1.4rem; font-size: 1.5rem; line-height: 2.4rem; }
}

/* decided cards: the offered options fold away (decisions.html) */
.lg-offered > summary { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; padding: 1.4rem 0; }
.lg-offered[open] > summary { margin-bottom: 1.2rem; }
@media (max-width: 767px) { .lg-toc--desk { display: none; } }
.lg-offered { margin-top: .6rem; }
.lg-offered .lg-choice__opts { margin-top: 0; }
.lg-summary--done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------------------------------------------------------------------------------------------------------------
   dpia: risk register (dpia.html only). A real <table> (explicit ARIA roles keep table semantics after the display
   change) whose rows render as cards at every width, so seven columns stay readable inside the 68ch measure and at
   390px. Each <td> shows its column name from data-label. Levels: <span class="dpia-lvl dpia-lvl--low|med|high">.
   --------------------------------------------------------------------------------------------------------------- */
.dpia-risks { border-top: 1px solid var(--line); }
.dpia-risks table, .dpia-risks tbody, .dpia-risks tr, .dpia-risks th, .dpia-risks td { display: block; }
.dpia-risks table { width: 100%; }
.dpia-risks tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.4rem; padding: 2.8rem 0 3.2rem; border-bottom: 1px solid var(--line); }
.dpia-risks th[scope="row"] { grid-column: 1 / -1; text-align: left; font-weight: 440; font-size: 1.9rem; line-height: 2.7rem; letter-spacing: -.01em; }
.dpia-risks th[scope="row"] .dpia-id { display: block; margin-bottom: .6rem; font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; font-weight: 400; color: var(--pine); }
.dpia-risks th[scope="row"] .dpia-what { display: block; margin-top: .8rem; font-size: 1.5rem; line-height: 2.4rem; font-weight: 370; letter-spacing: 0; color: var(--ink-2); }
.dpia-risks td { font-size: 1.5rem; line-height: 2.4rem; }
.dpia-risks td::before {
  content: attr(data-label); display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.dpia-risks td.dpia-full { grid-column: 1 / -1; }
.dpia-risks td > * + * { margin-top: .8rem; }
.dpia-risks td ul { padding-left: 2rem; }
.dpia-risks td li + li { margin-top: .4rem; }
.dpia-lvl {
  display: inline-block; padding: .2rem .9rem; border-radius: 9999px; vertical-align: .1em;
  font-family: var(--mono); font-size: 1.1rem; line-height: 1.8rem; letter-spacing: .06em; text-transform: uppercase;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dpia-lvl--high { background: var(--obsidian); color: var(--mist); }
.dpia-lvl--med { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.dpia-lvl--low { background: var(--paper); color: var(--pine); }
@media (max-width: 767px) {
  .dpia-risks tr { gap: 1.4rem 1.2rem; padding: 2.4rem 0 2.8rem; }
  .dpia-risks th[scope="row"] { font-size: 1.7rem; line-height: 2.5rem; }
}
@media print { .dpia-risks tr { break-inside: avoid; page-break-inside: avoid; } }

/* footer social marks: same glyphs as the homepage footer, monochrome, 18px in a 44px hit area */
.lg-footer__social { list-style: none; margin: 1.2rem 0 0 -13px; padding: 0; display: flex; gap: 4px; }
.lg-footer__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; opacity: .72; transition: opacity .2s; }
.lg-footer__social a:hover { opacity: 1; }
.lg-footer__social a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 50%; opacity: 1; }