/* Policy Core: layout and the few components the kit does not provide. Colours and type come from the suite kit's tokens. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
:root { --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 600; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.logo { text-decoration: none; font-size: 1.2rem; font-weight: 700; }
.nav-menu { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-menu a { display: inline-block; padding: .5rem .8rem; text-decoration: none; min-height: 44px; line-height: 1.7; }
.nav-menu a[aria-current="page"], .who a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.who { display: flex; align-items: center; gap: .75rem; }
.who a { padding: .5rem 0; }
.inline { display: inline; margin: 0; }
main { padding: 1.5rem 0 3rem; min-height: 60vh; }
.demo-bar { background: var(--thistle-tint, #f1ecf8); border-bottom: 1px solid var(--rule, #dcd8cd); font-size: .9rem; padding: .5rem 0; }
.page-head { padding: .5rem 0 1.25rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.5rem; }
.page-head h1 { margin: .15rem 0 .35rem; font-size: 1.9rem; }
.page-head p { margin: 0; max-width: 62ch; }
.eyebrow { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; margin: 0; }
section { margin-bottom: 2rem; }
section > h2 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--rule); padding-bottom: .5rem; margin: 0 0 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.5rem; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 1rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.1rem; text-decoration: none; cursor: pointer; }
.card { padding: 1.25rem; }
.card h2, .card h3 { margin-top: 0; }
.form-group { margin-bottom: 1rem; }
.form-group label, .form-group .label { display: block; margin-bottom: .35rem; font-weight: 600; }
.form-group .hint { display: block; font-size: .88rem; margin-top: .25rem; font-weight: 400; }
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form-group select, .form-group textarea { width: 100%; padding: .6rem .75rem; font: inherit; }
.form-group textarea { min-height: 14rem; line-height: 1.5; }
.form-group textarea.short { min-height: 7rem; }
.checks { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 16rem; overflow: auto; padding: .5rem; border: 1px solid var(--rule); }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400 !important; min-height: 32px; }
.check input { margin-top: .3rem; flex: none; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .65rem .8rem; text-align: left; vertical-align: top; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: .15rem .65rem; font-size: .78rem; }
.muted { color: var(--ink-soft, #4a5a60); }
.small { font-size: .88rem; }
progress { width: 100%; height: .6rem; accent-color: var(--brand); }
.pct { white-space: nowrap; font-variant-numeric: tabular-nums; }
.policy-text { max-width: 70ch; font-size: 1.05rem; line-height: 1.65; }
.policy-text h2 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.policy-text h3 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; }
.policy-text ul, .policy-text ol { padding-left: 1.4rem; }
.pdf-frame { width: 100%; height: 75vh; border: 1px solid var(--rule); }
.read-panel { border: 2px solid var(--ink); padding: 1.25rem; margin-top: 2rem; max-width: 70ch; background: var(--surface, #fff); }
.read-panel.done { border-color: var(--brand); }
.question { border-top: 1px solid var(--rule); padding: 1rem 0; }
.question legend { font-weight: 600; padding: 0; }
.login-box { max-width: 28rem; margin: 3rem auto; }
.login-box h1 { font-size: 1.6rem; }
.empty-state { padding: 2rem 1rem; text-align: center; border: 1px dashed var(--rule); }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: .75rem; }
.steps li { counter-increment: s; padding-left: 2.4rem; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; background: var(--ink); color: #fff; font-weight: 700; text-align: center; line-height: 1.7rem; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.2rem; margin-top: 2rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.kv dt { font-weight: 600; }
.kv dd { margin: 0; }
footer { margin-top: 2rem; }
.footer-bottom { padding: 1.25rem 0; font-size: .88rem; }
.footer-bottom p { margin: .25rem 0; }
.report h1 { font-size: 1.5rem; }
.report .meta { margin-bottom: 1rem; }
@media (max-width: 640px) { .page-head h1 { font-size: 1.5rem; } .kv { grid-template-columns: 1fr; } }
@media print {
  .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .container { max-width: none; padding: 0; }
  main { padding: 0; }
  .table th, .table td { padding: .3rem .5rem; border-bottom: 1px solid #999; }
  a { text-decoration: none; color: inherit; }
  .card { border: 1px solid #999; box-shadow: none; }
}
ul.plain { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
h2.sec { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--rule); padding-bottom: .5rem; margin: 2rem 0 1rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.toolbar form { display: inline; margin: 0; }
.narrow { max-width: 30rem; }
td progress { width: 7rem; vertical-align: middle; margin-right: .4rem; }

/* ── Structured policies, the editor and the outline ── */
.rich { border: 1px solid var(--field-border, #857f6f); background: var(--surface, #fff); }
.rich-bar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; border-bottom: 1px solid var(--rule); background: var(--paper); }
.rich-area { min-height: 12rem; padding: .75rem 1rem; line-height: 1.6; outline-offset: -2px; }
.rich-area:focus { outline: 3px solid var(--thistle, #5b3a8c); }
.rich-area img, .clause-body img { max-width: 100%; height: auto; }
.rich-area ul, .rich-area ol, .clause-body ul, .clause-body ol { padding-left: 1.5rem; }
.rich-msg { margin: 0; padding: .25rem .75rem .5rem; min-height: 1.4rem; }
.clause { margin: 0 0 .5rem; }
.clause > .clause-head { margin: 1.25rem 0 .35rem; }
.clause.level-1 > .clause-head { font-size: 1.3rem; margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.clause.level-2 > .clause-head { font-size: 1.1rem; }
.clause.level-3 > .clause-head { font-size: 1rem; }
.clause .clause { margin-left: 1.25rem; }
.clause-num { font-variant-numeric: tabular-nums; font-weight: 600; text-decoration: none; margin-right: .35rem; }
.clause-body p { margin: .4rem 0; }
.clause-meta { margin: .15rem 0 .6rem; font-size: .82rem; color: var(--ink-soft, #2f484b); }
.linkbtn { background: none; border: 0; padding: .1rem .25rem; font: inherit; font-size: .82rem; color: var(--brand, #0e5f5a); text-decoration: underline; cursor: pointer; min-height: 24px; }
.appendix-body { border: 1px solid var(--rule); padding: .5rem 1rem; margin-top: .5rem; background: var(--surface, #fff); }
h2.plain-h { font-size: 1rem; margin: 0 0 .35rem; }
.outline .indent-1 { padding-left: 0; } .outline .indent-2 { padding-left: 1.2rem; } .outline .indent-3 { padding-left: 2.4rem; } .outline .indent-4 { padding-left: 3.6rem; }
.outline td.outline-num { white-space: nowrap; }
.block { display: block; }
.row.tight { gap: .25rem; }
ul.plain.tight { gap: .25rem; margin: 0; }
ul.results li { padding-bottom: .5rem; border-bottom: 1px solid var(--rule-soft, #ebe8df); }
.narrow-wide { max-width: 44rem; }
.question + .question { margin-top: .25rem; }
@media print { .clause.level-1 > .clause-head { break-after: avoid; } .clause { break-inside: avoid-page; } .rich-bar { display: none; } }

section.clause > h2.clause-head, section.clause > h3.clause-head, section.clause > h4.clause-head { text-transform: none; letter-spacing: normal; border: 0; padding-bottom: 0; font-weight: 600; font-family: var(--font-body); color: var(--ink); }
section.clause.level-1 > h2.clause-head { font-size: 1.35rem; margin: 2rem 0 .4rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.jump { margin: 0 0 1rem; font-size: .92rem; }
.btn-secondary { border: 1px solid var(--field-border, #857f6f); }
.outline .row { gap: .4rem; }

/* ── Documentation ── */
.docs { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .docs { grid-template-columns: 17rem minmax(0, 1fr); } .docs-nav-details { display: block; } .docs-nav-details > summary { display: none; } }
@media (min-width: 1250px) { .docs { grid-template-columns: 17rem minmax(0, 46rem) 13rem; } .docs-toc-inline { display: none; } }
@media (max-width: 1249px) { .docs-toc { display: none; } }
.docs-nav { font-size: .93rem; }
@media (min-width: 900px) { .docs-nav { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow: auto; padding-right: .5rem; } }
.docs-nav-details > summary { cursor: pointer; font-weight: 600; padding: .6rem .8rem; border: 1px solid var(--field-border, #857f6f); background: var(--surface, #fff); min-height: 44px; }
.docs-nav-details[open] > summary { margin-bottom: .75rem; }
.docs-nav-h { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; margin: 1.1rem 0 .35rem; border: 0; padding: 0; color: var(--ink-soft, #2f484b); }
.docs-nav ul.plain { gap: .1rem; }
.docs-nav a { display: block; padding: .3rem .5rem; text-decoration: none; }
.docs-nav a:hover { text-decoration: underline; }
.docs-nav a[aria-current="page"] { font-weight: 700; background: var(--brand-tint, #e6f1ef); }
.docs-toc { position: sticky; top: 1rem; align-self: start; font-size: .88rem; max-height: calc(100vh - 2rem); overflow: auto; }
.docs-toc-title { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; margin: 0 0 .4rem; color: var(--ink-soft, #2f484b); }
.docs-toc a, .docs-toc-inline a { text-decoration: none; display: block; padding: .15rem 0; }
.docs-toc a:hover, .docs-toc-inline a:hover { text-decoration: underline; }
.toc-3 { padding-left: .9rem; }
.docs-toc-inline { border: 1px solid var(--rule); background: var(--surface, #fff); padding: .75rem 1rem; margin: 0 0 1.5rem; }
.crumbs { font-size: .88rem; margin-bottom: .5rem; }
.docs-main h1 { font-size: 2rem; margin: .1rem 0 .5rem; }
.docs-lede { font-size: 1.12rem; margin: 0 0 .5rem; max-width: 60ch; }
.docs-meta { margin: 0 0 1.25rem; }
.docs-body { max-width: 46rem; font-size: 1.04rem; line-height: 1.65; }
.docs-body h2 { font-size: 1.4rem; margin: 2.4rem 0 .6rem; padding-top: .9rem; border-top: 1px solid var(--rule); text-transform: none; letter-spacing: normal; font-family: var(--font-body); color: var(--ink); }
.docs-body h3 { font-size: 1.12rem; margin: 1.7rem 0 .4rem; }
.docs-body p, .docs-body li { max-width: 68ch; }
.docs-body table { margin: 1rem 0; }
.docs-body code { background: var(--rule-soft, #ebe8df); padding: .05rem .3rem; }
.anchor { margin-left: .4rem; font-size: .8em; text-decoration: none; opacity: 0; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
.ui { font-weight: 600; background: var(--paper, #f7f5f0); border: 1px solid var(--rule); padding: 0 .3rem; white-space: nowrap; }
.doc-steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.doc-steps > li { counter-increment: step; position: relative; padding-left: 3rem; min-height: 2.2rem; }
.doc-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; background: var(--ink); color: #fff; font-weight: 700; text-align: center; line-height: 2.1rem; }
.callout { border: 1px solid var(--rule); background: var(--surface, #fff); padding: .75rem 1rem; margin: 1.25rem 0; }
.callout p:last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 .25rem; font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }
.callout-warning { background: var(--gold-tint, #f8f0dc); border-color: #ecdcb0; }
.callout-tip { background: var(--brand-tint, #e6f1ef); border-color: #b9d8d3; }
.callout-demo { background: var(--thistle-tint, #f1ecf8); border-color: #ddd1ee; }
.doc-figure { margin: 1.5rem 0; }
.doc-figure img { width: 100%; height: auto; border: 1px solid var(--rule); display: block; }
.doc-figure figcaption { font-size: .88rem; margin-top: .4rem; color: var(--ink-soft, #2f484b); }
.doc-result { margin: .75rem 0; padding: .5rem .8rem; background: var(--paper, #f7f5f0); border: 1px solid var(--rule); }
.doc-result-label { font-weight: 700; }
.doc-example { margin: 1rem 0; border: 1px solid var(--rule); background: var(--surface, #fff); }
.doc-example-label { margin: 0; padding: .3rem .8rem; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; background: var(--paper, #f7f5f0); border-bottom: 1px solid var(--rule); }
.doc-example pre { margin: 0; padding: .8rem; overflow: auto; white-space: pre-wrap; font-size: .92rem; }
.doc-terms dt { font-weight: 700; margin-top: .9rem; }
.doc-terms dd { margin: .15rem 0 0; }
.doc-who { font-size: .93rem; margin: .5rem 0 1rem; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3rem 0 1rem; max-width: 46rem; }
.docs-pager a { display: block; padding: .8rem 1rem; border: 1px solid var(--rule); background: var(--surface, #fff); text-decoration: none; min-height: 44px; }
.docs-pager a:hover { border-color: var(--ink); }
.docs-next { text-align: right; grid-column: 2; }
.docs-search { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; }
.docs-search .form-group { margin: 0; flex: 1 1 18rem; }
.docs-filter { margin: 1.25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.docs-filter a { padding: .3rem .8rem; border: 1px solid var(--field-border, #857f6f); text-decoration: none; background: var(--surface, #fff); min-height: 36px; display: inline-flex; align-items: center; }
.docs-filter a[aria-current="true"] { background: var(--ink); color: #fff; }
.docs-card { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; min-height: 5rem; }
.docs-card:hover { border-color: var(--ink); }
.docs-list { gap: 1rem; }
@media print { .docs { display: block; } .docs-body { max-width: none; } .doc-figure { break-inside: avoid; } .docs-body h2 { break-after: avoid; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.help-line { margin: 0 0 .75rem; text-align: right; font-size: .9rem; }
.help-link { font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .75rem; }
.who a.btn { color: var(--ink); }
.who a.btn { padding: 0 1rem; }

/* ── Accessibility: beyond WCAG 2.2 AA ───────────────────────────────────────────────────────────────────────────────────────────────
   Colour: body text, links and small labels meet the enhanced 7:1 contrast (AAA), not just 4.5:1.
   Targets: everything you press is at least 24px (AA) and buttons are 44px (AAA). Focus: a 3px outline with a clear gap everywhere. */
:root { --brand: var(--brand-deep, #0a4440); --muted: var(--ink-soft, #2f484b); --thistle: var(--thistle-deep, #3f2766); --focus-ring: 0 0 0 3px var(--surface, #fff), 0 0 0 6px var(--thistle-deep, #3f2766); }
.eyebrow, .muted, .hint, .small.muted, .docs-toc-title, .callout-title, .docs-nav-h { color: var(--ink-soft, #2f484b); }
::placeholder { color: #4b5d60; opacity: 1; }
main:focus { outline: none; }
a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]) { scroll-margin-top: 5rem; }
:focus-visible { outline: 3px solid var(--thistle-deep, #3f2766); outline-offset: 3px; }
.btn, .btn-sm, button.btn { min-height: 44px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--ink, #0d2b2e); }
.check { min-height: 44px; align-items: center; }
.check input { margin-top: 0; }
.jump a, .help-link, .anchor, .clause-num, .docs-nav a, .docs-toc a, .docs-toc-inline a, .linkbtn, .crumbs a { display: inline-block; min-height: 24px; min-width: 24px; padding-top: .15rem; padding-bottom: .15rem; }
.jump { line-height: 2; }
.jump a { padding-inline: .15rem; }
.clause-num { text-decoration: underline; text-underline-offset: 3px; text-align: center; }
.anchor { text-align: center; }
.linkbtn { min-height: 28px; }
.help-line a { min-height: 32px; display: inline-flex; align-items: center; }
td a, th a { min-height: 24px; display: inline-block; }
.help-link { min-height: 28px; }
.docs-nav a { display: block; min-height: 32px; padding-top: .35rem; padding-bottom: .35rem; }
/* tables: row headers are real headers */
.table th[scope="row"] { font-weight: 600; text-align: left; }
@media (prefers-contrast: more) {
  :root { --rule: #55625f; --field-border: #1b2b2d; }
  .card, .callout, .doc-example, .doc-result, .docs-toc-inline, .table-wrap { border-color: #1b2b2d; }
  .btn-secondary { border-width: 2px; }
}
@media (forced-colors: active) {
  .badge, .btn, .callout, .card, .doc-example, .doc-result, .read-panel, .docs-toc-inline, .table-wrap, .rich, .rich-bar { border: 1px solid CanvasText; }
  progress { border: 1px solid CanvasText; }
  .doc-steps > li::before { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
  .docs-nav a[aria-current="page"] { border-left: 0; text-decoration: underline; font-weight: 700; }
  .docs-filter a[aria-current="true"] { text-decoration: underline; font-weight: 700; }
}
.session-notice { background: var(--gold-tint, #f8f0dc); border-bottom: 2px solid var(--ink, #0d2b2e); padding: .75rem 0; position: sticky; top: 0; z-index: 20; }
.session-notice p { margin: 0 auto; max-width: 1100px; padding: 0 1.25rem; }
.session-notice[hidden] { display: none; }
.demo-bar, .demo-bar * { color: var(--ink, #0d2b2e); }
td a, th a { min-width: 28px; text-align: center; }
td a:not([href^="/staff"]):not([href^="/compliance"]):not([href^="/policies/"]) { text-align: left; }
/* Reflow (WCAG 1.4.10): nothing makes the page scroll sideways at 320px, even with the user's own text spacing */
body { overflow-wrap: break-word; }
code, pre, .ui { overflow-wrap: anywhere; }
h1, h2, h3, h4, li, dd, dt, td, th, a, label, .hint, p { overflow-wrap: break-word; }
.ui { white-space: normal; }
@media print { .table-wrap { overflow: visible; } }
input[type="file"] { max-width: 100%; width: 100%; }

/* ── Printing and saving as PDF ─────────────────────────────────────────────────────────────────────────────────────────────────────
   A4, sensible margins, page numbers and a reminder that a printed copy is not updated; black text on white; no menus; links written out;
   headings kept with their text; table headings repeated; nothing important split across pages. */
.print-only { display: none; }
@page { size: A4; margin: 16mm 14mm 18mm; @bottom-left { content: "Printed copy: check Policy Core for the current version"; font: 8pt sans-serif; color: #333; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt sans-serif; color: #333; } }
@media print {
  .print-only { display: block; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.45; }
  main { padding: 0; min-height: 0; }
  .container { max-width: none; padding: 0; }
  a { color: #000 !important; text-decoration: underline; }
  .policy-text, .docs-body { max-width: none; font-size: 11pt; }
  .policy-text a[href^="http"]::after, .docs-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .policy-text a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .clause.leaf, .clause-body, .doc-figure, .callout, .table tr, .appendix-body, li { break-inside: avoid; }
  h1, h2, h3, h4, .clause-head { break-after: avoid-page; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .badge { background: none !important; border: 1px solid #000 !important; color: #000 !important; }
  .table th { background: #eee !important; color: #000 !important; border-bottom: 2px solid #000; }
  .table td { border-bottom: 1px solid #666; }
  .card, .info-box, .read-panel { border: 1px solid #000; box-shadow: none; background: none; }
  .print-control { border: 1px solid #000; padding: 6pt 8pt; margin: 0 0 10pt; font-size: 10pt; }
  .print-control p { margin: 2pt 0; }
  img { max-width: 100% !important; height: auto !important; }
  .page-head { border-bottom: 1px solid #000; }
}
.alert, .info-box, .success-box { padding: .8rem 1rem; margin-bottom: .75rem; }
.linkbtn { min-height: 44px; min-width: 44px; }
.clause-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; }

/* A box that explains something (what changed, notes): comfortable padding, and its heading is a heading, not a section divider */
.info-box { padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
.info-box > h2.plain-h, .info-box > h2 { border: 0; padding: 0; margin: 0 0 .4rem; font-size: 1rem; letter-spacing: normal; text-transform: none; color: inherit; font-weight: 700; }
.info-box > p { margin: 0 0 .35rem; }
.info-box > p:last-child { margin-bottom: 0; }

/* Enlarged pictures */
a.zoom, button.zoom { display: block; cursor: zoom-in; background: none; border: 0; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; }
button.zoom-inline { display: inline-block; max-width: 100%; }
a.zoom:focus-visible, button.zoom:focus-visible { outline-offset: 4px; }
dialog.lightbox { border: 2px solid var(--ink, #0d2b2e); padding: 0; background: var(--surface, #fff); color: var(--ink, #0d2b2e); width: min(96vw, 1400px); max-height: 96vh; margin: auto; display: flex; flex-direction: column; }
dialog.lightbox:not([open]) { display: none; }
dialog.lightbox::backdrop { background: rgba(8, 20, 22, .82); }
.lightbox-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: .6rem .75rem; border-bottom: 1px solid var(--rule, #dcd8cd); background: var(--paper, #f7f5f0); }
.lightbox-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; padding: .75rem; background: #fff; }
.lightbox-scroll img { display: block; max-width: 100%; max-height: calc(96vh - 11rem); width: auto; height: auto; margin: 0 auto; }
dialog.lightbox.actual .lightbox-scroll img { max-width: none; max-height: none; margin: 0; }
.lightbox-caption { margin: 0; padding: .6rem .9rem; font-size: .95rem; border-top: 1px solid var(--rule, #dcd8cd); }
@media print { dialog.lightbox { display: none !important; } a.zoom, button.zoom { cursor: auto; } }

/* Reading: status line, contents, what it said before, quiz feedback, next policy */
.read-status { margin: 0 0 1rem; padding: .6rem .9rem; background: var(--surface, #fff); border: 1px solid var(--rule); }
.contents { margin: 0 0 1.5rem; padding: .75rem 1rem; border: 1px solid var(--rule); background: var(--surface, #fff); max-width: 46rem; }
.contents-title { margin: 0 0 .35rem; font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }
.contents ul { margin: 0; columns: 2 16rem; column-gap: 2rem; display: block; }
.contents li { break-inside: avoid; }
.contents a { display: block; padding: .2rem 0; min-height: 28px; }
.contents-num { font-weight: 700; display: inline-block; min-width: 1.9rem; }
details.was { margin: .35rem 0 .5rem; border: 1px dashed var(--field-border, #857f6f); padding: .1rem .75rem; background: var(--paper, #f7f5f0); max-width: 46rem; }
details.was > summary { cursor: pointer; padding: .4rem 0; min-height: 36px; font-size: .92rem; }
.was-body { padding: .25rem 0 .5rem; color: var(--ink-soft, #2f484b); }
.was-body p { margin: .3rem 0; }
.question.not-quite { border-left: 0; background: var(--gold-tint, #f8f0dc); padding-left: .75rem; padding-right: .75rem; }
.q-feedback { margin: .35rem 0 0; padding: .4rem .6rem; background: var(--surface, #fff); border: 1px solid var(--rule); }
.next-read { margin: .75rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
mark { background: #ffe58a; color: #1b1b00; padding: 0 .1em; }
@media (forced-colors: active) { mark { background: Mark; color: MarkText; } }

.breadcrumbs { margin: 0 0 .5rem; font-size: .9rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--muted); }
.breadcrumbs a { display: inline-block; padding: .55rem 0; min-height: 24px; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.next-steps { border: 1px solid var(--line, #cfd6dd); border-radius: 8px; padding: 1rem 1.25rem; background: #fff; }
.next-steps ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.part-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.alert a.btn-primary, .alert-warning a.btn-primary { color: #fff; }

/* Public pages */
.site-hero { padding: 2.5rem 0 1.5rem; max-width: 46rem; }
.site-hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.15; margin: .25rem 0 1rem; }
.site-hero .lead { font-size: 1.15rem; max-width: 40rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
.site-band { padding: 1.75rem 0; border-top: 1px solid var(--line, #d5dbe0); max-width: 60rem; }
.site-band h2 { margin-top: 0; }
.site-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.site-cols h3 { margin-top: 0; }
.site-steps { padding-left: 1.4rem; display: grid; gap: .75rem; }
.site-steps.big { list-style: none; padding: 0; gap: 2rem; max-width: 52rem; }
.site-steps.big h2 { margin: 0 0 .25rem; font-size: 1.3rem; }
.site-dl { display: grid; gap: .25rem 1.5rem; grid-template-columns: 1fr; margin: 0; }
.site-dl dt { font-weight: 700; margin-top: .85rem; }
.site-dl dd { margin: 0; max-width: 46rem; }
@media (min-width: 52rem) { .site-dl { grid-template-columns: 15rem 1fr; } .site-dl dt { margin-top: 0; padding: .1rem 0; } .site-dl dd { padding-bottom: .75rem; } }
.site-cta { padding-bottom: 2.5rem; }
/* Public pages show the top of tall screenshots; selecting one opens the whole picture */
.site-hero ~ figure.doc-figure img, .site-band figure.doc-figure img, .site-steps figure.doc-figure img { width: 100%; height: auto; max-height: 26rem; object-fit: cover; object-position: top left; }
@media (max-width: 40rem) { .site-hero ~ figure.doc-figure img, .site-band figure.doc-figure img, .site-steps figure.doc-figure img { max-height: 16rem; } }

/* Use the full width of the page */
.site-hero { max-width: none; display: grid; gap: 2rem; align-items: center; padding: 2.5rem 0 2rem; }
.site-hero-text { max-width: 40rem; }
.site-hero figure.doc-figure { margin: 0; min-width: 0; }
@media (min-width: 62rem) { .site-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; } }
.site-band { max-width: none; }
.site-band > p, .site-band > ul, .site-band > ol { max-width: 52rem; }
.site-steps.big { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.site-dl { max-width: none; }
.site-band figure.doc-figure { margin: 1.5rem 0 0; }
@media (min-width: 62rem) { .site-hero figure.doc-figure img { max-height: 32rem; } }
.container.wide { max-width: 78rem; }
.site-band > p, .site-band > ul, .site-band > ol { max-width: 56rem; }
.secret { word-break: break-all; overflow-wrap: anywhere; font-size: 1rem; }

/* =============================================================================
   Public site ("the controlled document"): full-bleed bands, clause numbers as the visual signature
   ============================================================================= */
.site-main { padding: 0; min-height: 0; }
.wrap { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.site-main .btn { text-decoration: none; }
.btn-light { background: var(--paper, #f7f5f0); color: var(--ink, #0d2b2e); border-color: var(--paper, #f7f5f0); }
.btn-light:hover { background: #fff; }
.btn-outline-light { background: transparent; color: var(--paper, #f7f5f0); border-color: var(--paper, #f7f5f0); }
.btn-outline-light:hover { background: rgba(247, 245, 240, .14); }
a.arrow { font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
a.arrow::after { content: " \2192"; }

/* hero */
.hero { background: var(--ink, #0d2b2e); color: var(--paper, #f7f5f0); padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 8vw, 6rem); overflow: hidden; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.kicker { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #e6c470; margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 600; margin: 0 0 1.25rem; color: var(--paper, #f7f5f0); }
.hero-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 38rem; color: #d9e4e2; margin: 0 0 1.75rem; }
.hero-note { font-size: .9rem; color: #b9cac7; margin: 0; max-width: 38rem; }
.hero .cta-row { margin: 0 0 1.25rem; }
.hero-art { position: relative; padding: 0 0 4.5rem; max-width: 34rem; }
.sheet { background: #fff; color: var(--ink, #0d2b2e); padding: 1.4rem 1.5rem 1.6rem; box-shadow: 12px 12px 0 var(--thistle, #5b3a8c); border-radius: 2px; }
.sheet-meta { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #3d5558; margin: 0 0 .35rem; }
.sheet-title { font-size: 1.35rem; font-weight: 600; margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--ink, #0d2b2e); }
.sheet-row { display: flex; align-items: baseline; gap: .7rem; padding: .42rem .5rem; font-size: .98rem; }
.sheet-row .num { font-weight: 700; color: var(--brand-deep, #0a4440); min-width: 3rem; font-variant-numeric: tabular-nums; }
.sheet-row.l1 { font-weight: 600; margin-top: .25rem; }
.sheet-row.l2 { padding-left: 1.6rem; }
.sheet-row.l3 { padding-left: 3rem; font-size: .93rem; }
.sheet-row.hit { background: #f1ecf8; outline: 2px solid var(--thistle-deep, #3f2766); outline-offset: -2px; }
.chip { margin-left: auto; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; background: var(--thistle-deep, #3f2766); color: #fff; padding: .18rem .45rem; border-radius: 2px; white-space: nowrap; }
.record { position: absolute; right: -.5rem; bottom: 0; width: min(17rem, 78%); background: var(--paper, #f7f5f0); color: var(--ink, #0d2b2e); border: 2px solid var(--ink, #0d2b2e); padding: 1rem 1.1rem; box-shadow: 8px 8px 0 #c79a35; border-radius: 2px; }
@media (max-width: 40rem) { .record { right: 0; } }
.record-h { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin: 0 0 .15rem; color: #3d5558; }
.record-big { font-size: 2.3rem; font-weight: 600; line-height: 1; margin: 0 0 .6rem; }
.record-big span { font-size: 1rem; font-weight: 500; color: #3d5558; }
.bar-track { height: .6rem; background: #dcd8cd; border-radius: 1px; overflow: hidden; margin-bottom: .75rem; }
.bar-fill { height: 100%; background: var(--brand, #0e5f5a); }
.record-list { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.record-list li { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; }
.record-list em { margin-left: auto; font-style: normal; color: #3d5558; font-size: .8rem; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.dot.ok { background: var(--brand, #0e5f5a); } .dot.wait { background: #c79a35; }
.record-foot { font-size: .72rem; color: #3d5558; margin: .5rem 0 0; }

/* numbered sections: the clause number is the margin mark */
.sec { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sec.tint { background: #ece8dd; }
.sec.dark { background: var(--ink-soft, #2f484b); color: var(--paper, #f7f5f0); }
.sec-grid { display: grid; gap: .5rem 2rem; }
@media (min-width: 52rem) { .sec-grid { grid-template-columns: 6rem minmax(0, 1fr); } }
.sec-num { font-size: clamp(3rem, 8vw, 5.5rem); line-height: .9; font-weight: 600; letter-spacing: -.04em; color: #b9c9c6; margin: 0; }
.sec.dark .sec-num { color: #6f8c8b; }
.sec-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; margin: 0 0 1.25rem; max-width: 40rem; border: 0; padding: 0; text-transform: none; }
.sec-lead { font-size: 1.12rem; max-width: 44rem; margin: 0 0 1.75rem; }
.pull { font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; max-width: 36rem; margin: 0 0 1.25rem; color: var(--thistle-deep, #3f2766); }
.numbered-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 46rem; border-top: 2px solid var(--ink, #0d2b2e); }
.numbered-list li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--rule, #dcd8cd); }
.numbered-list .num { font-weight: 700; color: var(--brand-deep, #0a4440); font-variant-numeric: tabular-nums; }
.sec.dark a { color: #fff; }

/* comparison table */
.compare { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--ink, #0d2b2e); font-size: 1rem; }
.compare th, .compare td { padding: .9rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule, #dcd8cd); overflow-wrap: break-word; }
.compare thead th { background: var(--ink, #0d2b2e); color: var(--paper, #f7f5f0); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.compare thead th:last-child { background: var(--thistle-deep, #3f2766); }
.compare tbody th { font-weight: 600; width: 22%; }
.compare tbody td:nth-child(2) { color: #3d5558; width: 30%; }
.compare tbody td:last-child { background: #f1ecf8; font-weight: 500; }
.compare tbody tr:last-child > * { border-bottom: 0; }

/* showcase rows */
.show { display: grid; gap: 1.75rem 3rem; align-items: center; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
@media (min-width: 62rem) { .show { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .show.flip .show-text { order: 2; }  .show { padding-left: calc(clamp(1.25rem, 4vw, 2.5rem) + 8rem); } }
.show h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .75rem; }
.sub-num { font-weight: 700; color: var(--thistle-deep, #3f2766); font-size: 1rem; margin: 0 0 .25rem; letter-spacing: .04em; }
.show-text p { max-width: 34rem; }
.show-art figure.doc-figure { margin: 0; }
.show-art figure.doc-figure a { display: block; border: 2px solid var(--ink, #0d2b2e); box-shadow: 10px 10px 0 #cfc5e3; background: #fff; }
.show-art figure.doc-figure img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: cover; object-position: top left; }
.show-art figcaption { margin-top: 1rem; font-size: .85rem; }
.code-panel { background: var(--ink, #0d2b2e); color: #e8f0ee; border: 2px solid var(--ink, #0d2b2e); box-shadow: 10px 10px 0 #cfc5e3; padding: 1.1rem 1.25rem; overflow-x: auto; }
.code-panel pre { margin: 0; font-size: .86rem; line-height: 1.55; white-space: pre; }
.code-panel code { background: none; color: inherit; padding: 0; }
.caption-note { font-size: .85rem; margin: 1rem 0 0; }

/* roles and fits: ruled columns, not cards */
.roles { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 52rem) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.role { border-top: 3px solid var(--ink, #0d2b2e); padding-top: .9rem; }
.role h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.fits { display: grid; gap: 1.75rem 2.5rem; }
@media (min-width: 52rem) { .fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .fits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fits > div { border-top: 1px solid var(--rule, #dcd8cd); padding-top: .9rem; }
.fits h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.honest { display: grid; gap: 1.1rem; max-width: 46rem; font-size: 1.08rem; }
.honest p { margin: 0; }
.honest strong { color: #fff; }

/* FAQ */
.faq { max-width: 48rem; border-top: 2px solid var(--ink, #0d2b2e); }
.faq details { border-bottom: 1px solid var(--rule, #dcd8cd); }
.faq summary { cursor: pointer; padding: 1rem 2.5rem 1rem 0; font-weight: 600; font-size: 1.1rem; list-style: none; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .6rem; font-size: 1.5rem; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.1rem; max-width: 40rem; }

/* final call to action */
.cta-band { background: var(--thistle-deep, #3f2766); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; }
.cta-band h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .75rem; max-width: 40rem; color: #fff; border: 0; padding: 0; text-transform: none; }
.cta-band p { font-size: 1.1rem; max-width: 40rem; color: #ece6f6; }
.cta-band .cta-row { margin-top: 1.5rem; }
.cta-band .btn-light { color: var(--thistle-deep, #3f2766); }

/* inner pages: an ink title band, then the same numbered rhythm */
.page-band { background: var(--ink, #0d2b2e); color: var(--paper, #f7f5f0); padding: clamp(2.25rem, 6vw, 4rem) 0; }
.page-band h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 .9rem; color: var(--paper, #f7f5f0); max-width: 44rem; font-weight: 600; }
.page-band p { font-size: 1.15rem; max-width: 40rem; color: #d9e4e2; margin: 0; }
.page-band .cta-row { margin-top: 1.5rem; }
.split { display: grid; gap: 1rem 3rem; padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--rule, #dcd8cd); }
@media (min-width: 52rem) { .split { grid-template-columns: 17rem minmax(0, 1fr); } .split > h2 { position: sticky; top: 1.5rem; align-self: start; } }
.split > h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; margin: 0; border: 0; padding: 0; text-transform: none; }
.split .site-dl { margin: 0; }
.split ul { margin: 0; padding-left: 1.2rem; max-width: 46rem; }
.split li + li { margin-top: .6rem; }
.split p { max-width: 46rem; margin-top: 0; }
.plain-sec { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.timeline > li { display: grid; gap: .75rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule, #dcd8cd); }
@media (min-width: 52rem) { .timeline > li { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .timeline > li:not(.has-art) { grid-template-columns: 5rem minmax(0, 1fr); } }
.timeline .step-n { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; color: #b9c9c6; line-height: 1; margin: 0; }
.timeline h2 { font-size: 1.5rem; margin: 0 0 .5rem; border: 0; padding: 0; text-transform: none; letter-spacing: -.01em; }
.timeline p { max-width: 34rem; margin: 0 0 .75rem; }
.timeline figure.doc-figure { margin: 0; }
.timeline figure.doc-figure a { display: block; border: 2px solid var(--ink, #0d2b2e); box-shadow: 8px 8px 0 #cfc5e3; background: #fff; }
.timeline figure.doc-figure img { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: cover; object-position: top left; }
.flow { display: grid; gap: 1rem; align-items: stretch; margin: 0 0 1.5rem; }
@media (min-width: 52rem) { .flow { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.flow .node { border: 2px solid var(--ink, #0d2b2e); padding: 1.1rem 1.25rem; background: #fff; border-radius: 2px; }
.flow .node.right { background: #f1ecf8; box-shadow: 8px 8px 0 #cfc5e3; }
.flow .node h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.flow .node ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.flow .arrow-mid { text-align: center; font-weight: 700; color: var(--thistle-deep, #3f2766); font-size: .85rem; }
.flow .arrow-mid span { display: block; font-size: 2rem; line-height: 1; }
.options { display: grid; gap: 2rem; padding: clamp(2rem, 5vw, 3.5rem) 0; }
@media (min-width: 52rem) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option { padding: 1.75rem; border: 2px solid var(--ink, #0d2b2e); background: #fff; }
.option.alt { background: var(--ink, #0d2b2e); color: var(--paper, #f7f5f0); }
.option.alt h2, .option.alt p { color: var(--paper, #f7f5f0); }
.option h2 { margin: 0 0 .6rem; font-size: 1.5rem; border: 0; padding: 0; text-transform: none; }
.limits { background: #f1ecf8; border: 2px solid var(--thistle-deep, #3f2766); padding: 1.25rem 1.5rem; max-width: 50rem; }
.limits h3 { margin: 0 0 .5rem; }
.limits ul { margin: 0; padding-left: 1.2rem; }
/* site header/footer sit on the same wide measure */
.site-main + footer .container { max-width: 78rem; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color .15s ease-out, transform .1s ease-out; } }
@media print { .hero, .cta-band, .page-band, .sec.dark { background: #fff !important; color: #000 !important; } }

.sheet-gap { height: 3.2rem; }
.hero-art { padding-bottom: 1.5rem; }
.record { right: -1.25rem; bottom: -1.5rem; }
@media (max-width: 40rem) { .record { right: 0; } }

.sec.dark .sec-title, .sec.dark h3 { color: var(--paper, #f7f5f0); }
.container.wide { padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.site-main + footer { margin-top: 0; }
.code-panel pre { font-size: .82rem; }
.site-main section { margin-bottom: 0; }
.page-band .kicker { font-size: .8rem; color: #e6c470; margin: 0 0 1rem; }
.flow .node h2 { margin: 0 0 .5rem; font-size: 1.1rem; border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.show { grid-template-columns: minmax(0, 1fr); }
.show > * { min-width: 0; }
@media (min-width: 62rem) { .show { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sec-grid > * { min-width: 0; }
@media (max-width: 52rem) { .code-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; } }
@media (max-width: 40rem) { .record { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 1.25rem; box-shadow: 6px 6px 0 #c79a35; } .sheet-gap { display: none; } .hero-art { padding-bottom: 0; } }

/* ── Motion ────────────────────────────────────────────────────────────────────────────────────────────
   Only transform, opacity and clip-path move. Everything is switched off for people who ask for less motion,
   and scroll-linked effects apply only where the browser supports them: elsewhere the page is simply still. */
@property --n { syntax: '<integer>'; initial-value: 38; inherits: false; }
.bar-fill { width: 82%; transform-origin: left center; }
.count { --n: 38; counter-reset: n var(--n); }
.count::before { content: counter(n); }
.rl-done { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes tally { from { --n: 0; } }
@keyframes ring { 0% { outline-color: transparent; } 40% { outline-color: var(--thistle-deep, #3f2766); outline-offset: 3px; } 100% { outline-color: var(--thistle-deep, #3f2766); outline-offset: -2px; } }
@keyframes swap-out { to { opacity: 0; } }
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(26px); } }
@keyframes numeral { from { opacity: 0; transform: translateX(-24px); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-24px -24px -24px -24px); } }
@keyframes lines { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes drift-sheet { to { transform: translateY(-34px); } }
@keyframes drift-record { to { transform: translateY(26px); } }

@media (prefers-reduced-motion: no-preference) {
  /* page load: the hero assembles itself */
  .hero-copy > * { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-copy > :nth-child(1) { animation-delay: .05s; } .hero-copy > :nth-child(2) { animation-delay: .15s; }
  .hero-copy > :nth-child(3) { animation-delay: .3s; } .hero-copy > :nth-child(4) { animation-delay: .45s; } .hero-copy > :nth-child(5) { animation-delay: .55s; }
  .sheet { animation: rise .9s .2s cubic-bezier(.16, 1, .3, 1) both; }
  .sheet-row { animation: slide-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  .sheet-row:nth-of-type(1) { animation-delay: .55s; } .sheet-row:nth-of-type(2) { animation-delay: .65s; } .sheet-row:nth-of-type(3) { animation-delay: .75s; }
  .sheet-row:nth-of-type(4) { animation-delay: .85s; } .sheet-row:nth-of-type(5) { animation-delay: .95s; } .sheet-row:nth-of-type(6) { animation-delay: 1.05s; } .sheet-row:nth-of-type(7) { animation-delay: 1.15s; }
  .sheet-row.hit { animation: slide-in .5s .95s cubic-bezier(.16, 1, .3, 1) both, ring 1.1s 1.5s ease-out both; }
  .chip { animation: pop .5s 1.9s cubic-bezier(.34, 1.4, .64, 1) both; }
  .record { animation: rise .9s 1.1s cubic-bezier(.16, 1, .3, 1) both; }
  .bar-fill { animation: fill 1.3s 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  .count { animation: tally 1.4s 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  .record-list li { animation: slide-in .45s ease-out both; }
  .record-list li:nth-child(1) { animation-delay: 1.9s; } .record-list li:nth-child(2) { animation-delay: 2.05s; } .record-list li:nth-child(3) { animation-delay: 2.2s; }
  /* the story: the last person confirms */
  .rl-done { display: inline; }
  .tick .rl-wait { animation: swap-out .25s 4.2s ease-out both; }
  .tick .rl-done { position: absolute; right: 0; color: var(--brand-deep, #0a4440); font-weight: 600; animation: swap-in .4s 4.35s ease-out both; }
  .tick { position: relative; }
  .tick .dot { animation: dot-ok .3s 4.3s ease-out both; }
  @keyframes dot-ok { to { background: var(--brand, #0e5f5a); transform: scale(1.25); } }
  a.arrow::after { display: inline-block; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
  a.arrow:hover::after, a.arrow:focus-visible::after { transform: translateX(5px); }
  .btn { transition: background-color .15s ease-out, transform .15s cubic-bezier(.16, 1, .3, 1); }
  .btn:hover { transform: translateY(-2px); }
  .faq details::details-content { transition: block-size .3s ease, content-visibility .3s allow-discrete; block-size: 0; overflow: clip; }
  .faq details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }
}

/* scroll-driven: each piece arrives as it enters the view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec-title, .pull, .sec-lead, .numbered-list li, .show-text, .role, .fits > div, .honest p, .faq details, .compare tbody tr, .cta-band h2, .cta-band p, .split, .timeline > li, .option { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .sec-num, .step-n { animation: numeral linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .show-art figure.doc-figure a, .timeline figure.doc-figure a { animation: wipe linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
    .code-panel pre { animation: lines steps(11, end) both; animation-timeline: view(); animation-range: entry 10% entry 75%; }
    .hero-art .sheet { animation: drift-sheet linear both; animation-timeline: scroll(root); animation-range: 0 40vh; }
    .hero-art .record { animation: drift-record linear both; animation-timeline: scroll(root); animation-range: 0 40vh; }
  }
}

.record-big .count { font-size: 2.3rem; font-weight: 600; color: inherit; }
.record-big .of { font-size: 1rem; font-weight: 500; color: #3d5558; }
.record { bottom: -3.2rem; }
.sheet-gap { height: 5.2rem; }
.hero-art { padding-bottom: 3rem; }
@media (max-width: 40rem) { .record { bottom: auto; } .hero-art { padding-bottom: 0; } }

.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1.25rem; }
.demo-row a { display: inline-block; padding: .35rem 0; font-weight: 600; }
.demo-row .demo-back { text-decoration: underline; text-underline-offset: 3px; }
.container.wide.bar { padding-block: .8rem; }
.split.last { border-bottom: 0; }
.clause-num { text-decoration: none; text-align: left; }

/* =====================================================================================================
   The policy as a document: a self-contained sheet, separate from the page, with its own letterhead,
   facts and footer. Part numbers hang in the margin; the reading status and contents sit beside it.
   ===================================================================================================== */
.doc-layout { display: grid; gap: 1.5rem 2.5rem; align-items: start; margin: 1rem 0 2rem; }
@media (min-width: 70rem) { .doc-layout { grid-template-columns: 13.5rem minmax(0, 48rem); justify-content: center; } .doc-rail .contents ul { columns: 1; } .doc-rail { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow: auto; } }
.doc-rail .read-status { margin: 0 0 1rem; }
.doc-rail .contents { max-width: none; margin: 0; padding: .75rem .85rem; }
.doc-rail .contents ul { columns: 2 12rem; }
.doc-sheet { background: #fff; border: 2px solid var(--ink, #0d2b2e); box-shadow: 10px 10px 0 #cfc5e3; padding: clamp(1.25rem, 4vw, 3.25rem); min-width: 0; }
.doc-org { margin: 0 0 1.1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--ink, #0d2b2e); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft, #2f484b); }
.doc-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 0 0 1.1rem; border: 0; padding: 0; }
.doc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem 1.5rem; margin: 0 0 1.1rem; padding: .9rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.doc-facts > div { min-width: 0; }
.doc-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-soft, #2f484b); }
.doc-facts dd { margin: .15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.doc-summary { margin: 0 0 1rem; }
.doc-changes { margin: 0 0 1rem; max-width: none; }
.doc-cite { margin: 0; }
.doc-head { margin-bottom: 1.5rem; }
.doc-body { max-width: none; font-size: 1.06rem; line-height: 1.7; }
.doc-sheet .doc-body > .clause.level-1:first-child > .clause-head { border-top: 0; padding-top: 0; margin-top: .5rem; }
/* numbers hang in the margin; text lines up under the title; each level steps in by its parent's number width */
.doc-sheet .clause { --nw: 2.6rem; margin-left: 0; }
.doc-sheet .clause.level-2 { --nw: 3.4rem; margin-left: 2.6rem; }
.doc-sheet .clause.level-3 { --nw: 4.2rem; margin-left: 3.4rem; }
.doc-sheet .clause.level-4 { --nw: 5rem; margin-left: 4.2rem; }
.doc-sheet .clause-head { display: flex; flex-wrap: wrap; align-items: baseline; }
.doc-sheet .clause-head .clause-num { flex: 0 0 var(--nw); margin-right: 0; color: var(--brand-deep, #0a4440); }
.doc-sheet .clause-body, .doc-sheet .clause-meta, .doc-sheet details.was { margin-left: var(--nw); }
.doc-sheet .clause-body { position: relative; }
.doc-sheet .clause-lead { position: absolute; left: calc(-1 * var(--nw)); width: var(--nw); font-weight: 600; color: var(--brand-deep, #0a4440); }
.doc-sheet .clause-lead .clause-num { margin: 0; }
.doc-sheet .clause-head .badge { margin-left: .5rem; }
.doc-sheet .appendices { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--ink, #0d2b2e); max-width: none; }
.doc-sheet .appendices h2.sec { margin-top: 0; }
.doc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem; margin-top: 2.5rem; padding-top: .9rem; border-top: 2px solid var(--ink, #0d2b2e); font-size: .82rem; color: var(--ink-soft, #2f484b); }
@media (max-width: 40rem) { .doc-sheet { box-shadow: 6px 6px 0 #cfc5e3; } .doc-sheet .clause { --nw: 2rem; } .doc-sheet .clause.level-2 { --nw: 2.6rem; margin-left: 2rem; } .doc-sheet .clause.level-3 { --nw: 3.2rem; margin-left: 2.6rem; } .doc-sheet .clause.level-4 { --nw: 3.8rem; margin-left: 3.2rem; } }
@media print {
  .doc-layout { display: block; margin: 0; }
  .doc-sheet { border: 0; box-shadow: none; padding: 0; }
  .doc-rail { display: none !important; }
}

/* Copy-link icon button: 44px to touch, but takes no more room in the line than the icon */
.copybtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.65rem -.35rem -.65rem -.2rem; padding: 0; background: none; border: 0; border-radius: 4px; color: var(--brand-deep, #0a4440); cursor: pointer; vertical-align: middle; }
.copybtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copybtn .i-done { display: none; }
.copybtn.copied .i-link { display: none; }
.copybtn.copied .i-done { display: block; }
.copybtn:hover { background: var(--brand-tint, #e6f1ef); }
.copybtn:focus-visible { outline: 3px solid var(--thistle-deep, #3f2766); outline-offset: 0; }
.copybtn.copied { color: #0b5a3a; }
.clause-head .copybtn { margin: -.65rem -.35rem -.65rem .1rem; }
.doc-sheet .clause-head .copybtn { margin-left: .15rem; }

/* Demonstration: one-click entry, role switch and the "three things to try" guide */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-enter__btns { display: grid; gap: .75rem; }
.demo-enter__btns .btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; height: auto; min-height: 56px; padding: .7rem 1.1rem; text-align: left; }
.demo-enter__btns .btn span { font-size: .85rem; font-weight: 400; opacity: .95; }
.demo-switch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin: 0; }
.demo-switch .linkbtn { font-size: .9rem; }
.tour { margin: 0 0 1.5rem; padding: .25rem 1.1rem 1rem; background: #fff; border: 2px solid var(--ink, #0d2b2e); box-shadow: 6px 6px 0 #cfc5e3; }
.tour > summary { cursor: pointer; padding: .8rem 0; min-height: 44px; }
.tour ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; max-width: 52rem; }
.hp { position: absolute; left: -9999px; top: auto; overflow: visible; width: auto; height: auto; }
.demo-enter__btns .btn-secondary { border: 2px solid var(--ink, #0d2b2e); background: #fff; }