/* AMLCompliant site.css — "Evidence file" design system, final.
   Paper, ink navy, one signal colour (brick). Every claim carries its source.
   Type: Atkinson Hyperlegible Next (text) and Atkinson Hyperlegible Mono (citations, dates, labels),
   self-hosted from the Google Fonts files (SIL Open Font Licence) so no visitor IP goes to a third party.
   Sections: 1 fonts · 2 tokens · 3 base · 4 plumbing · 5 layout · 6 header · 7 buttons · 8 citations ·
   9 hero + publisher · 10 ask/show · 11 register · 12 cards/offers/bands · 13 buy panel · 14 documents ·
   15 index · 16 steps · 17 callouts · 18 tables · 19 guide · 20 answers/faq · 21 footer · 22 utilities */

/* ---------- 1. fonts ---------- */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/next-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/next-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/next-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/mono-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/mono-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. tokens ---------- */
:root {
  --paper: #F7F5F0;       /* page background */
  --sheet: #FFFFFF;       /* documents, cards, tables */
  --tint: #ECE8DD;        /* table heads, quiet panels */
  --ink: #14213A;         /* text, primary fills — 14.73:1 on paper */
  --ink-soft: #3B4658;    /* secondary text — 8.75:1 on paper */
  --signal: #A3321A;      /* the one signal colour — 6.36:1 on paper */
  --signal-wash: #F8E9E2; /* "warning" callouts, fill-in fields */
  --rule: #D6D0C2;        /* decorative hairlines only */
  --rule-strong: #7D7766; /* borders that carry meaning — 4.10:1 on paper */
  --on-ink: #FFFFFF;
  --on-ink-soft: #C8D2E3; /* 10.53:1 on ink */

  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-ui: 1rem;          /* 16px — floor for chips and fine print only */
  --t-label: 1.125rem;   /* 18px — every label, button, nav item, independence line */
  --t-body: 1.125rem;    /* 18px */
  --t-lead: 1.25rem;     /* 20px */
  --t-h4: 1.25rem;       /* 20px */
  --t-h3: 1.5rem;        /* 24px */
  --t-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);  /* 28 -> 36 */
  --t-h1: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);    /* 34 -> 52 */

  --gutter: 16px;
  --max: 74rem;
  --radius: 4px;
  --shadow: 0 1px 0 rgba(20,33,58,.06), 0 6px 18px -8px rgba(20,33,58,.22);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- 3. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.6;
  font-variant-numeric: lining-nums; overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-h4); font-weight: 700; }
p { margin: 0 0 1em; max-width: 68ch; }
.lead { font-size: var(--t-lead); max-width: 60ch; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-ui); }
strong, b { font-weight: 700; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--signal); }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .4em; }
li::marker { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

/* labels: mono, 18px, sentence case, no tracking — never uppercase */
.eyebrow, .tab, .label, .kind, .toc-title, .facts-title {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 600; letter-spacing: 0; text-transform: none;
}
.eyebrow { color: var(--signal); margin: 0 0 14px; }
.eyebrow .no { color: var(--ink-soft); margin-right: .6ch; }

/* ---------- 4. plumbing: skip link, focus, hidden, motion ---------- */
.skip {
  position: absolute; left: var(--gutter); top: -200px; z-index: 10;
  background: var(--ink); color: var(--on-ink); padding: 12px 18px;
  font-size: var(--t-label); font-weight: 700; border-radius: var(--radius);
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 5. layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow > * { max-width: 46rem; }
main > section, .section { padding: 56px 0; }
@media (min-width: 960px) { main > section, .section { padding: 80px 0; } }
.tone-rule { border-top: 1px solid var(--rule); }
.tone-sheet { background: var(--sheet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tone-tint { background: var(--tint); }
.section-head { display: grid; gap: 8px; margin-bottom: 28px; }
.section-head > *:last-child { margin-bottom: 0; }
.split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* preview builds only: says out loud that links and kit contents are not final */
.preview-banner { background: var(--signal-wash); border-bottom: 2px solid var(--signal); color: var(--ink); font-size: var(--t-label); }
.preview-banner p { margin: 0; padding: 10px 0; max-width: none; }
.preview-banner b { color: var(--signal); font-family: var(--mono); font-weight: 600; }

/* ---------- 6. header ---------- */
.site-header { background: var(--paper); border-top: 5px solid var(--signal); border-bottom: 2px solid var(--ink); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 12px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); min-height: 48px; }
.brand img { width: 222px; height: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px;
  font-size: var(--t-label); font-weight: 700; text-decoration: none; color: var(--ink);
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--signal); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--signal); }
@media (max-width: 719px) {
  .brand img { width: 196px; }
  .site-nav { width: 100%; border-top: 1px solid var(--rule); padding-top: 2px; }
  .site-nav ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .site-nav a { padding: 0 2px; }
}

/* ---------- 7. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; border-radius: var(--radius);
  font: 700 var(--t-label)/1.25 var(--font); text-decoration: none; text-align: center;
  border: 2px solid var(--ink); cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: #22345A; color: var(--on-ink); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--sheet); color: var(--ink); }
.btn-block { width: 100%; }
/* a buy button whose checkout is not open: visibly not a button, not focusable, says why */
.btn-held { background: var(--tint); color: var(--ink); border: 2px dashed var(--rule-strong); cursor: not-allowed; font-weight: 700; }
.held-note { font-size: var(--t-label); color: var(--ink-soft); margin: 8px 0 0; }
/* a prose link whose checkout or file is not published yet (preview builds only) */
.held-inline { border-bottom: 2px dashed var(--rule-strong); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }
.jump { display: inline-flex; margin: 0 0 8px; align-items: center; min-height: 44px; font-size: var(--t-label); font-weight: 700; }

/* ---------- 8. citations: solid brick = law in the authorised text; dashed grey = AUSTRAC guidance ---------- */
.cite {
  display: inline-block; font-family: var(--mono); font-size: var(--t-ui); font-weight: 600;
  line-height: 1.3; color: var(--signal); background: var(--sheet);
  border: 1.5px solid var(--signal); border-radius: 3px; padding: 1px 7px;
  max-width: 100%; white-space: nowrap; vertical-align: baseline; text-decoration: none;
}
.cite.guidance { color: var(--ink-soft); border-color: var(--rule-strong); border-style: dashed; white-space: normal; }
a.cite:hover { background: var(--signal-wash); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: none; }
.cites .cite, .register .cite, .index .cite { white-space: normal; text-wrap: balance; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: var(--t-label); color: var(--ink-soft); margin: 0 0 18px; max-width: none; }
.legend > span { display: inline-flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* ---------- 9. hero + publisher panel ---------- */
.hero { padding-top: 40px; padding-bottom: 48px; }
@media (min-width: 960px) { .hero { padding-top: 60px; padding-bottom: 64px; } }
.hero h1 { max-width: 20ch; }
.hero .meta { font-size: var(--t-label); color: var(--ink-soft); margin: 0 0 12px; }
.hero-split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) { .hero-split { grid-template-columns: minmax(0, 1fr) 24rem; gap: 56px; align-items: start; } }

.entry { background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 6px solid var(--ink); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.entry .facts-title { color: var(--signal); margin: 0 0 10px; }
.entry dl { margin: 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0; }
.entry dt, .entry dd { padding: 10px 0; border-top: 1px solid var(--rule); margin: 0; }
.entry dt { font-weight: 700; padding-right: 12px; }
.entry dd a { font-weight: 700; }
@media (max-width: 400px) { .entry dl { grid-template-columns: minmax(0, 1fr); } .entry dd { border-top: 0; padding-top: 0; } }

/* the independence line: essential copy, 18px bold, boxed */
.independent {
  font-size: var(--t-label); font-weight: 700; line-height: 1.5; color: var(--ink); background: var(--tint);
  border-left: 5px solid var(--ink); padding: 12px 14px; margin: 16px 0 0; max-width: none;
}

/* self-check: numbered questions with neutral markers — nothing to tick, nothing implied */
.selfcheck { margin: 0 0 28px; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 22px; }
.selfcheck h2, .selfcheck h3 { font-size: var(--t-h3); margin-bottom: 12px; }
.selfcheck ol { list-style: none; padding: 0; margin: 0 0 14px; counter-reset: q; }
.selfcheck li { counter-increment: q; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 10px; padding: 10px 0; border-top: 1px solid var(--rule); margin: 0; }
.selfcheck li::before { content: "Q" counter(q); font-family: var(--mono); font-weight: 600; color: var(--signal); }
.selfcheck .after { font-weight: 700; margin: 0; }

/* ---------- 10. ask / show table ---------- */
.evidence { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.evidence-head { padding: 18px 20px 14px; border-bottom: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; }
.evidence-head h2, .evidence-head h3 { font-size: var(--t-h3); margin: 0; }
.evidence-head p { margin: 0; font-size: var(--t-label); color: var(--ink-soft); }
table.ask-show { width: 100%; border-collapse: collapse; }
.ask-show th, .ask-show td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.ask-show thead th { background: var(--tint); font-family: var(--mono); font-size: var(--t-label); font-weight: 600; color: var(--signal); }
.ask-show tbody th { font-weight: 400; }
.ask-show .no { font-family: var(--mono); font-size: var(--t-label); font-weight: 600; color: var(--signal); width: 3.4rem; }
.ask-show .ask { width: 38%; }
.ask-show .show { background: #FBFAF6; }
.ask-show .show strong { display: block; }
.ask-show .basis { width: 13rem; }
.ask-show .basis .cite { margin: 0 4px 4px 0; }
.ask-show tbody tr:last-child > * { border-bottom: 0; }
.evidence-foot { padding: 14px 20px; border-top: 1px solid var(--rule); color: var(--ink-soft); background: var(--paper); }
.evidence-foot p { margin: 0; max-width: none; }
@media (max-width: 799px) {
  .ask-show thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ask-show, .ask-show tbody, .ask-show tr, .ask-show th, .ask-show td { display: block; width: auto !important; }
  .ask-show tr { padding: 18px 16px; border-bottom: 1px solid var(--rule); }
  .ask-show tbody tr:last-child { border-bottom: 0; }
  .ask-show th, .ask-show td { padding: 0; border: 0; }
  .ask-show .no { margin-bottom: 6px; }
  .ask-show td::before, .ask-show tbody th.ask::before {
    content: attr(data-label); display: block; font-family: var(--mono); font-size: var(--t-label);
    font-weight: 600; color: var(--ink-soft); margin: 12px 0 2px;
  }
  .ask-show tbody th.ask::before { margin-top: 0; }
  .ask-show .show { background: transparent; border-left: 4px solid var(--ink); padding-left: 12px; margin-top: 8px; }
  .ask-show .show::before { margin-top: 0; }
  .evidence-head { padding: 16px; }
  .evidence-foot { padding: 14px 16px; }
}

/* ---------- 11. dated register ---------- */
.register { list-style: none; padding: 0; margin: 24px 0 0; border-top: 2px solid var(--ink); }
.register > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; padding: 18px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.register .date { font-family: var(--mono); font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.register .date small { display: block; font-family: var(--font); font-size: var(--t-label); color: var(--ink-soft); font-weight: 400; }
.register .past .date::after { content: "past"; display: block; font-family: var(--font); font-weight: 400; color: var(--ink-soft); font-size: var(--t-label); }
.register .what > *:last-child { margin-bottom: 0; }
.register .what p { margin: 0 0 10px; }
.register .note { background: var(--sheet); border: 1px solid var(--rule-strong); border-left: 5px solid var(--ink); padding: 12px 14px; margin-top: 12px; border-radius: 0 var(--radius) var(--radius) 0; }
.register .note p:last-child { margin: 0; }
@media (min-width: 800px) {
  .register > li { grid-template-columns: 14rem minmax(0, 1fr) 16rem; align-items: baseline; }
  .register .cites { margin-top: 0; justify-content: flex-end; }
}

/* ---------- 12. cards, offers, bands, sectors, stats ---------- */
.card { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.card h3 { margin-bottom: 8px; }
.card > *:last-child { margin-bottom: 0; }
.card .tab { color: var(--signal); margin: 0 0 10px; }
.card .push { margin-top: auto; padding-top: 16px; }
.offer { border-top: 6px solid var(--ink); }
.offer.mid { border-top-color: var(--signal); }
.price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0 2px; }
.price small { display: block; margin-top: 6px; font-size: var(--t-label); font-weight: 600; color: var(--ink-soft); letter-spacing: 0; line-height: 1.4; }
.checks { list-style: none; padding: 0; margin: 12px 0 16px; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 16px; height: 9px;
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg);
}
.checks.not li::before { border: 0; width: 16px; height: 3px; top: .8em; background: var(--signal); transform: none; }
.squares { list-style: none; padding: 0; }
.squares li { position: relative; padding-left: 24px; }
.squares li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; background: var(--ink-soft); }
.fits { background: var(--tint); border-radius: 3px; padding: 12px 14px; margin: 12px 0 14px; }
.fits b { display: block; font-family: var(--mono); font-size: var(--t-label); font-weight: 600; color: var(--signal); margin-bottom: 2px; }
.fits p { margin: 0; }

.sectors > .card { display: grid; grid-row: span 7; grid-template-rows: subgrid; gap: 0; }
.sectors .n { font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 16px; }
.sectors .l { margin: 4px 0 10px; }
.sectors .cite { justify-self: start; align-self: start; }
.sectors .go { margin: 14px 0 0; font-weight: 700; }
.sectors .go a { display: inline-flex; align-items: center; min-height: 44px; }
.sectors .pending { margin: 14px 0 0; color: var(--ink-soft); font-size: var(--t-label); }
.sectors .note { font-size: var(--t-label); color: var(--ink-soft); margin: 10px 0 0; }

.stats { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin: 0 0 12px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 4px solid var(--ink); border-radius: var(--radius); padding: 18px 20px; }
.stat .n { font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 6px; }
.stat .l { margin: 0 0 10px; }
.stat .src { font-family: var(--mono); font-size: var(--t-ui); font-weight: 600; color: var(--ink-soft); margin: 0; }

/* ---------- 13. product layout + buy panel ---------- */
.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1040px) {
  .product { grid-template-columns: minmax(0, 1fr) 23rem; grid-template-rows: auto 1fr; gap: 32px 56px; align-items: start; }
  .product > .buy { position: sticky; top: 20px; grid-column: 2; grid-row: 1 / span 2; }
  .product > :not(.buy) { grid-column: 1; }
}
.buy { background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.buy .label { color: var(--signal); margin: 0 0 6px; }
.buy .price { font-size: 3rem; line-height: 1; margin: 0; }
.buy .price-note { font-size: var(--t-label); color: var(--ink); margin: 8px 0 16px; }
.buy .after-pay { font-size: var(--t-label); margin: 10px 0 0; }
.buy .checks { margin: 18px 0 8px; }
.buy dl { margin: 16px 0 0; font-size: var(--t-label); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.buy dt { font-weight: 700; padding-top: 10px; }
.buy dd { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.buy .fine { font-size: var(--t-label); color: var(--ink-soft); margin: 12px 0 0; }

.ready { background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--radius); padding: 28px 24px; display: grid; gap: 8px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ready { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.ready h2 { margin-bottom: 4px; }
.ready .price { margin: 0; }

/* ---------- 14. document previews ---------- */
.doc {
  position: relative; background: var(--sheet); border: 1px solid var(--rule-strong);
  border-radius: 2px; box-shadow: var(--shadow); padding: 26px 22px 20px; font-size: var(--t-ui); line-height: 1.5;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.doc::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, var(--paper) 50%, var(--tint) 50%); }
.doc .doc-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: var(--mono); font-weight: 600; color: var(--signal); border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; padding-right: 22px; }
.doc h4 { font-size: 1.25rem; margin: 0 0 8px; }
.doc p { margin: 0 0 10px; }
.doc .edition { color: var(--ink-soft); border-left: 3px solid var(--signal); padding-left: 10px; }
.doc .ph { background: var(--signal-wash); color: var(--ink); padding: 0 3px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0 12px; }
.doc th, .doc td { border: 1px solid var(--rule-strong); padding: 6px 8px; text-align: left; vertical-align: top; }
.doc th { background: var(--tint); font-weight: 700; }
.doc .attrib { border-top: 1px solid var(--rule); margin: 12px 0 0; padding-top: 8px; color: var(--ink-soft); }
.doc-wrap { display: flex; flex-direction: column; margin: 0; }
.doc-wrap > .doc { flex: 1 1 auto; }
.doc-caption { font-size: var(--t-label); color: var(--ink); margin: 12px 0 0; }
.doc-status { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: var(--t-ui); color: var(--ink-soft); border: 1.5px dashed var(--rule-strong); border-radius: 3px; padding: 0 6px; margin-bottom: 6px; }

/* ---------- 15. document index ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.index > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.index .ex { font-family: var(--mono); font-weight: 600; color: var(--signal); font-size: var(--t-label); }
.index h3 { font-size: var(--t-h4); margin: 0 0 2px; }
.index p { margin: 0; }
.index .cites { grid-column: 2; margin-top: 6px; }
@media (min-width: 800px) {
  .index > li { grid-template-columns: 3.4rem minmax(0, 1fr) 16rem; align-items: baseline; }
  .index .cites { grid-column: 3; margin-top: 0; justify-content: flex-end; }
}
.index.compact > li { padding: 10px 0; }
.index.compact h3 { font-size: var(--t-body); font-weight: 700; }

/* ---------- 16. steps ---------- */
.steps { list-style: none; padding: 0; margin: 20px 0; counter-reset: st; }
.steps > li { counter-increment: st; position: relative; padding: 0 0 22px 60px; margin: 0; }
.steps > li::before {
  content: counter(st); position: absolute; left: 0; top: -2px; width: 42px; height: 42px;
  border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; background: var(--sheet);
}
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 44px; bottom: 4px; width: 2px; background: var(--rule); }
.steps h3 { font-size: var(--t-h4); margin: 6px 0 4px; }
.steps p { margin: 0 0 6px; }

/* ---------- 17. callouts ---------- */
.callout { border: 1px solid var(--rule-strong); border-left: 6px solid var(--ink); background: var(--sheet); padding: 16px 18px; margin: 24px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.callout .kind { margin: 0 0 6px; color: var(--ink); }
.callout.warning { border-left-color: var(--signal); background: var(--signal-wash); }
.callout.warning .kind { color: var(--signal); }
.callout.info { border-left-color: var(--rule-strong); }
.callout > *:last-child { margin-bottom: 0; }

/* ---------- 18. data tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); margin: 20px 0; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.data caption { text-align: left; padding: 14px 16px; font-weight: 700; border-bottom: 2px solid var(--ink); }
.data th, .data td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.data thead th { background: var(--tint); font-family: var(--mono); font-size: var(--t-label); font-weight: 600; }
.data tbody th { font-weight: 700; }
.past-tag { display: block; font-family: var(--font); font-weight: 400; font-size: var(--t-label); color: var(--ink-soft); }
.data td.date, .data .mono { font-family: var(--mono); font-weight: 600; }
.data td.num { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.data tr:last-child > * { border-bottom: 0; }
.data .cite { margin: 0 4px 4px 0; }
@media (min-width: 720px) { .data td.date { min-width: 10rem; } }
@media (max-width: 719px) {
  table.data.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data.stack, .data.stack caption, .data.stack tbody, .data.stack tr, .data.stack td, .data.stack th { display: block; }
  .data.stack caption { width: auto; }
  .data.stack tr { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .data.stack tr:last-child { border-bottom: 0; }
  .data.stack td, .data.stack th { padding: 2px 0; border: 0; white-space: normal; }
  .data.stack td[data-label]::before, .data.stack th[data-label]::before {
    content: attr(data-label); display: block; font-family: var(--mono); font-size: var(--t-label);
    color: var(--ink-soft); font-weight: 600; margin-top: 10px;
  }
  .data.stack tr > :first-child::before { margin-top: 0; }
  .data.stack tbody tr > :first-child { font-size: var(--t-lead); }
}

/* ---------- 19. guide: stamp, contents, footnotes ---------- */
.stamp {
  display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  border: 2px solid var(--signal); background: var(--sheet); color: var(--ink);
  padding: 10px 14px; border-radius: 3px; font-size: var(--t-label); line-height: 1.45; margin: 4px 0 18px; max-width: 100%;
}
.stamp b { font-family: var(--mono); font-weight: 600; color: var(--signal); }
.crumbs { font-size: var(--t-label); margin: 0 0 14px; color: var(--ink-soft); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; padding: 0 8px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1040px) {
  .guide-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 56px; align-items: start; }
  .toc { position: sticky; top: 20px; }
}
.toc { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 18px 18px 8px; }
.toc .toc-title { color: var(--signal); margin: 0 0 6px; }
.toc ol { padding-left: 1.5em; margin: 0 0 10px; }
.toc li { margin: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.article { min-width: 0; }
.article > h2 { scroll-margin-top: 16px; padding-top: 20px; margin-top: 40px; border-top: 2px solid var(--ink); }
.article > h2:first-child { margin-top: 0; }

/* footnote markers: small to look at, large to tap (44px box on touch screens) */
.footnote-ref, sup a[href^="#fn"] {
  font-family: var(--mono); font-size: var(--t-ui); font-weight: 600; text-decoration: none; color: var(--signal);
  padding: 4px 4px; margin: 0 -1px;
}
sup { line-height: 0; }
@media (pointer: coarse), (max-width: 719px) {
  .footnote-ref, sup a[href^="#fn"] { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center; padding: 0; margin: -18px -14px -18px -12px; vertical-align: middle; }
}
.footnotes { font-size: var(--t-body); border-top: 2px solid var(--ink); margin-top: 48px; padding-top: 16px; }
.footnotes h2 { font-size: var(--t-h3); margin: 0 0 8px; border: 0; padding: 0; }
.footnotes ol { padding-left: 1.8em; }
.footnotes li { margin-bottom: 10px; }
.footnotes li::marker { font-family: var(--mono); color: var(--signal); font-weight: 600; }
.footnotes a { word-break: break-word; }
.footnotes li p { margin: 0; }
.sources { border-top: 2px solid var(--ink); margin-top: 40px; padding-top: 16px; }
.sources h2 { font-size: var(--t-h3); }
.sources li { margin-bottom: 10px; }
.sources .cite { margin-right: 8px; }

/* ---------- 20. straight answers + FAQ (always open: older readers should not have to hunt) ---------- */
.answers { margin: 0; border-top: 2px solid var(--ink); }
.answers > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 40px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.answers dt { font-weight: 800; font-size: var(--t-h4); }
.answers dd { margin: 0; }
.answers dd p { margin: 0 0 8px; }
.answers dd > *:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .answers > div { grid-template-columns: 18rem minmax(0, 1fr); } }

/* ---------- 21. footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); border-top: 6px solid var(--signal); padding: 48px 0 40px; font-size: var(--t-label); }
.site-footer a { color: var(--on-ink); }
.site-footer a:hover { color: var(--on-ink-soft); }
.site-footer .grid { gap: 28px; }
.site-footer h2 { font-size: var(--t-label); font-family: var(--mono); font-weight: 600; color: var(--on-ink-soft); margin: 0 0 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { color: var(--on-ink); max-width: 60ch; }
.footer-brand img { width: 210px; height: auto; margin-bottom: 16px; }
.footer-independent { border: 1.5px solid var(--on-ink-soft); padding: 12px 14px; border-radius: 3px; font-weight: 700; margin: 0 0 16px; }
.footer-contact a { font-weight: 700; }
.footer-base { border-top: 1px solid #33425F; margin-top: 32px; padding-top: 16px; display: grid; gap: 8px; color: var(--on-ink-soft); }
.footer-base p { margin: 0; color: var(--on-ink-soft); max-width: none; }
@media (min-width: 720px) and (max-width: 1039px) { .site-footer .grid-4 > :first-child { grid-column: 1 / -1; } }

/* ---------- 22. utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-l { margin-top: 32px; }
.align-start { align-self: start; }
.more { margin: 24px 0 0; font-weight: 700; }
.example { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.example:first-of-type { border-top: 2px solid var(--ink); }
.margin-note { font-size: var(--t-label); line-height: 1.5; color: var(--ink-soft); border-left: 3px solid var(--signal); padding: 4px 0 4px 12px; margin: 14px 0 0; max-width: 60ch; }
.margin-note b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.legal h2 { margin-top: 40px; }

/* ---------- 23. tools (template: tool) — forms, step guides, result cards, drafts, checklists ---------- */
[hidden] { display: none !important; }
.tool-intro { max-width: 46rem; }
.tool-note { background: var(--sheet); border: 1px solid var(--rule-strong); border-left: 6px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 18px; margin: 0 0 24px; max-width: 46rem; }
.tool-note > *:last-child { margin-bottom: 0; }

/* step guides built from anchors: each step is a numbered block, each answer a large link */
.qsteps { counter-reset: q; max-width: 46rem; }
.qstep { counter-increment: q; border-top: 2px solid var(--ink); padding: 20px 0 8px; margin: 0; }
.qstep h3 { font-size: var(--t-h3); margin: 0 0 10px; scroll-margin-top: 16px; }
.qstep h3::before { content: "Step " counter(q) ". "; font-family: var(--mono); font-weight: 600; color: var(--signal); }
.qstep h4 { font-size: var(--t-h4); margin: 22px 0 6px; scroll-margin-top: 16px; }
.answers-links { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 10px; }
.answers-links li { margin: 0; }
.answers-links a { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.answers-links a:hover { border-color: var(--ink); text-decoration: underline; }
.answers-links a .go { margin-left: auto; padding-left: 12px; font-family: var(--mono); color: var(--signal); font-weight: 600; }

/* result cards: the target of an answer link is outlined so the reader sees where they landed */
.results { display: grid; gap: 16px; max-width: 46rem; }
.result { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 20px; scroll-margin-top: 16px; }
.result:target, .result:has(:target) { outline: 3px solid var(--signal); outline-offset: 2px; }
.result h3 { scroll-margin-top: 16px; }
.result h3 { font-size: var(--t-h4); margin: 0 0 8px; }
.result .tab { margin: 0 0 6px; }
.result blockquote { margin: 0 0 12px; padding: 8px 0 8px 14px; border-left: 3px solid var(--signal); }
.result blockquote p { margin: 0; }
.result .who { font-weight: 700; }
.result > *:last-child { margin-bottom: 0; }
.back-to { font-size: var(--t-label); margin: 10px 0 0; }
.back-to a { display: inline-flex; align-items: center; min-height: 44px; }

/* forms */
.tool-form { max-width: 46rem; }
.tool-form fieldset { border: 0; border-top: 2px solid var(--ink); padding: 18px 0 8px; margin: 0 0 8px; min-width: 0; }
.tool-form legend { font-size: var(--t-h4); font-weight: 700; padding: 0; float: left; width: 100%; margin: 0 0 6px; }
.tool-form legend + * { clear: left; }
.tool-form .hint { color: var(--ink-soft); margin: 0 0 10px; }
.choice { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 10px 12px; margin: 0 0 8px; background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; font-size: var(--t-body); line-height: 1.45; }
.choice:hover { border-color: var(--ink); }
.choice input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--ink); }
.choice small { display: block; font-size: var(--t-label); color: var(--ink-soft); margin-top: 2px; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--ink); }
.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field label { font-weight: 700; }
.field input[type=text] { font: inherit; font-size: var(--t-body); min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); color: var(--ink); width: 100%; max-width: 32rem; }
.field input[type=text]:focus-visible { border-color: var(--ink); }
.tool-form .btn-row { margin-top: 20px; }
button.btn { cursor: pointer; border: 2px solid var(--ink); }

/* the generated draft: a document on paper */
.draft { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 2px; box-shadow: var(--shadow); padding: 24px 20px; margin: 24px 0; max-width: 52rem; scroll-margin-top: 16px; }
@media (min-width: 720px) { .draft { padding: 36px 40px; } }
.draft h2 { font-size: var(--t-h2); margin: 0 0 8px; }
.draft h3 { font-size: var(--t-h3); margin: 28px 0 8px; padding-top: 16px; border-top: 2px solid var(--ink); }
.draft h2:focus { outline: none; }
.draft .fill { background: var(--signal-wash); padding: 0 4px; border-radius: 2px; }
.draft .write { display: block; border-bottom: 1.5px dashed var(--rule-strong); min-height: 1.8em; margin: 4px 0 12px; color: var(--ink-soft); }
.draft table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.draft th, .draft td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--rule-strong); }
.draft thead th { background: var(--tint); font-family: var(--mono); font-weight: 600; font-size: var(--t-label); }
.rating { display: inline-block; font-family: var(--mono); font-weight: 600; padding: 0 8px; border: 2px solid var(--ink); border-radius: 3px; }
.rating.high { border-color: var(--signal); color: var(--signal); }
@media (max-width: 719px) {
  .draft table, .draft thead, .draft tbody, .draft tr, .draft th, .draft td { display: block; }
  .draft thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .draft tr { border: 1px solid var(--rule-strong); margin: 0 0 12px; }
  .draft td, .draft tbody th { border: 0; border-bottom: 1px solid var(--rule); }
  .draft td[data-label]::before, .draft tbody th[data-label]::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: var(--t-label); font-weight: 600; color: var(--ink-soft); }
}

/* checklists: real checkboxes, large targets; ticks are not saved anywhere */
.checklist { list-style: none; padding: 0; margin: 12px 0 20px; max-width: 46rem; }
.checklist li { margin: 0 0 8px; }
.checklist label { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 10px 12px; background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
.checklist input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--ink); }
.checklist .why { display: block; color: var(--ink-soft); font-size: var(--t-label); margin-top: 2px; }
.checklist .cite { margin-left: 4px; }
.tally { position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: 2px solid var(--ink); padding: 10px 0; margin: 0; font-weight: 700; max-width: none; }

/* printing one region (tools.js adds .printing to <html> and .print-target to the region) */
@media print {
  html.printing body * { visibility: hidden; }
  html.printing .print-target, html.printing .print-target * { visibility: visible; }
  html.printing .print-target { position: absolute; left: 0; top: 0; width: 100%; margin: 0; box-shadow: none; border: 0; }
  html.printing .print-target .no-print, html.printing .print-target .btn-row { display: none !important; }
  .tally { position: static; }
}