/* Base theme: structure only. No colours beyond currentColor, no fonts.
   Site styles load after this file in @layer site and win over @layer engine. */
@layer engine, site;

@layer engine {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; line-height: 1.6; }
  img, video, svg { max-width: 100%; height: auto; }

  .skip-link { position: absolute; left: -9999px; top: 0; }
  .skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  .site-header, .site-footer, main { padding-inline: 1rem; }
  .site-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; padding-block: 1rem; }
  .site-header__nav, .site-footer__nav { display: flex; flex-wrap: wrap; gap: 1rem; }
  .site-footer { padding-block: 2rem; }

  .article, .post-index { max-width: 72rem; margin-inline: auto; }
  .article__main, .post-index { max-width: 42rem; min-width: 0; }
  .prose { overflow-wrap: break-word; }
  .article--toc { display: grid; gap: 2rem; }
  @media (min-width: 64rem) {
    .article--toc { grid-template-columns: minmax(0, 42rem) 16rem; }
    .toc-rail { position: sticky; top: 1rem; align-self: start; }
  }

  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: 0.5rem; }

  .table-scroll { overflow-x: auto; }
  .table-scroll table { border-collapse: collapse; }
  .table-scroll th, .table-scroll td { border: 1px solid currentColor; padding: 0.25rem 0.5rem; text-align: left; }

  figure { margin-inline: 0; }
  .diagram { margin-block: 1.5rem; }
  .diagram img, .diagram svg { display: block; width: 100%; }

  .post-list, .related__list { list-style: none; padding: 0; }
  .post-list__item, .related__item { margin-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  @layer engine {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* site.css */
@layer site {
/* Solo and Sure: tokens, fonts, base type and shared components (B2a).
   Ported from design/mockups/merged/styles.css per design/DESIGN.md.
   Mobile first at 390px; min-width breakpoints 480 / 720 / 1024 / 1280.
   B2b adds the page components (home, article, jurisdiction, folder) before the print rules. */

/* ---------- fonts: self-hosted Latin subsets (OFL, licenses in theme/assets/fonts/) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  /* weight 600 instance with the opsz axis (8-60) kept, so font-optical-sizing: auto works */
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-600-opsz.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* color: white page, one brand blue, deep navy for the frame (operator 2026-09-30: blue + navy
     replace teal; R7 senior sites mostly blue/navy), marigold for the card band only */
  --page: #FFFFFF;        /* page and all running text */
  --wash: #F0F4FA;        /* pale blue tint for short UI only. Never behind long paragraphs */
  --ink: #1A1C1E;         /* body + headings, 17.09:1 on page, 15.48:1 on wash */
  --slate: #4A5157;       /* meta, captions, 8.06:1 on page, 7.30:1 on wash */
  --brand: #1A44A0;       /* links, buttons, door titles, chevrons, numbers, current bar. 8.83:1, white on it 8.83:1 */
  --brand-deep: #12337D;  /* hover / pressed, 11.70:1 */
  --navy: #14264A;        /* header rule, footer ground, wordmark. White on it 14.94:1 */
  --navy-deep: #0E1C38;   /* primary button bottom edge. White on it 16.91:1 */
  --on-navy-soft: #DCE3F0; /* footer legal line and held footer items, 11.59:1 on navy */
  --visited: #5B2E91;     /* visited links, 9.36:1 */
  --focus: #FFD23F;       /* focus fill / ring (with an ink edge). Ink on it 11.83:1, 10.34:1 vs navy */
  --warm: #F2B84B;        /* marigold. Emergency-card header band only. Ink on it 9.55:1 */
  --stop: #A1301F;        /* "Watch out", "No" verdicts, always icon + word. 7.10:1 */
  --rule: #D5D9E0;        /* decorative dividers only */
  --edge: #6B7278;        /* input borders, ad-slot rules, 4.88:1 (3:1 non-text) */

  /* type (R7) */
  --font-body: "Atkinson Hyperlegible Next", Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fs-body: 1.25rem;     /* 20px */
  --fs-lead: 1.3125rem;   /* 21px */
  --fs-ui: 1.125rem;      /* 18px */
  --fs-meta: 1.0625rem;   /* 17px */
  --fs-floor: 1rem;       /* 16px: legal + ad label only */
  --fs-h1: 2.125rem;      /* 34px */
  --fs-h2: 1.75rem;       /* 28px */
  --fs-h3: 1.5rem;        /* 24px */
  --fs-h4: 1.3125rem;     /* 21px */
  --lh-body: 1.6;

  /* space + shape */
  --gutter: 20px;
  --space-section: 56px;
  --radius: 12px;
  --radius-sm: 8px;
  --measure: 32em;        /* about 66 characters of Atkinson. em, not ch (R7) */
  --tap: 48px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --space-section: 72px; }
}
@media (min-width: 1024px) {
  :root {
    --fs-body: 1.3125rem; /* 21px */
    --fs-lead: 1.4375rem; /* 23px */
    --fs-ui: 1.1875rem;   /* 19px */
    --fs-h1: 2.75rem;     /* 44px */
    --fs-h2: 2rem;        /* 32px */
    --fs-h3: 1.625rem;    /* 26px */
    --fs-h4: 1.375rem;    /* 22px */
    --space-section: 88px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
}
main { padding-inline: 0; }
img, svg { display: block; }
.sprite { display: none; }

h1, h2 {
  font-family: var(--font-head); font-weight: 600; font-optical-sizing: auto;
  margin: 0 0 0.5em; text-wrap: balance; letter-spacing: 0;
}
h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.3; margin: 0 0 0.5em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
@media (min-width: 1024px) { h1 { line-height: 1.15; } }
p { margin: 0 0 1.2em; }
strong, b { font-weight: 700; }

a { color: var(--brand); text-decoration: underline; text-decoration-thickness: max(1px, 0.07em); text-underline-offset: 0.18em; }
a:visited { color: var(--visited); }
a:hover { color: var(--brand-deep); text-decoration-thickness: 0.14em; }

/* focus: marigold fill + ink bar on text links, marigold + ink double ring on controls */
:focus-visible {
  outline: 3px solid transparent;
  background-color: var(--focus);
  box-shadow: 0 -2px var(--focus), 0 4px var(--ink);
  color: var(--ink) !important;
  text-decoration: none;
}
.btn:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible, .door:focus-visible, .related a:focus-visible, .region-list a:focus-visible {
  box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink);
}
input:focus-visible { background-color: var(--page); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* the engine base template emits .skip-link as the first element in body */
.skip-link { position: absolute; left: 8px; top: -100px; background: var(--focus); color: var(--ink); padding: 12px 16px; font-weight: 700; z-index: 10; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- header: white, navy wordmark, full-width navy rule ----------
   Phone and tablet (< 1024): wordmark + "Menu" word button, nav opens as a ruled list below.
   Desktop (1024+): one row inside the page container, wordmark left, nav right, centered
   (operator 2026-09-30). The nav at 19px is 694px wide and the wordmark 220px, so 1024-1279
   steps down to 18px text, 18px gaps and a 30px wordmark to fit 1007px (1024 minus a scrollbar);
   1280+ uses 19px, 36px gaps and the 36px wordmark. 720-1023 keeps the Menu button: one row
   needs about 900px at 18px, the container there is 656-959px. */
.site-header { display: block; padding: 0; background: var(--page); border-bottom: 4px solid var(--navy); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--navy); text-decoration: none; white-space: nowrap;
  min-height: var(--tap);
}
.wordmark:visited, .wordmark:hover { color: var(--navy); }
.wordmark svg { height: 2.25rem; width: auto; max-width: none; } /* design/brand/wordmark.svg */
.menu-btn {
  font: 700 var(--fs-ui) var(--font-body); color: var(--brand); background: var(--page);
  border: 2px solid var(--brand); border-radius: var(--radius-sm);
  min-height: var(--tap); padding: 0 18px; cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--brand); color: #fff; }
/* Without JS the nav renders open and the button has nothing to do. */
html:not(.js) .menu-btn { display: none; }

.site-nav { border-top: 1px solid var(--rule); }
.site-nav ul { list-style: none; margin: 0 auto; padding-top: 4px; padding-bottom: 8px; }
.site-nav li + li { border-top: 1px solid var(--rule); }
/* Live sections are links, held ones (hub not live yet, e.g. Tools) plain text: both in ink at
   the same weight, so nothing looks disabled. Only links get the hover/focus underline. */
.site-nav a, .site-nav .pending {
  display: flex; align-items: center; min-height: 56px;
  font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none;
}
.site-nav a:visited { color: var(--ink); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* Current section (the hub itself, or a guide whose `section` matches): a 3px brand bar under the label. */
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
@media (max-width: 1023.98px) { .js .site-nav:not([data-open]) { display: none; } }
/* Card button (HP4): the last menu row under 1024 (full width), right of the wordmark at 1024+.
   The copy a breakpoint hides is display:none, so it is in the accessibility tree once. */
.site-nav .nav-cta { padding: 12px 0 4px; }
.site-nav .nav-cta a, .site-nav .nav-cta a:visited, .site-nav .nav-cta a:hover {
  width: 100%; justify-content: center; min-height: 56px; color: #fff; text-decoration: none;
}
.site-nav .nav-cta a:hover { background: var(--brand-deep); }
.site-nav .nav-cta a:focus-visible { background: var(--focus); color: var(--ink); } /* ink on yellow, 11.83:1 */

@media (min-width: 1024px) {
  /* Three columns so the header row and the nav share the page container's middle column.
     HB1: the five topic labels plus All topics do not fit beside the wordmark (about 820px of
     labels at 18px), so the nav is its own row under the wordmark, left-aligned with it. */
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1180px) minmax(0, 1fr); gap: 0; }
  .header-row { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 2; grid-row: 2; }
  .header-row { width: 100%; min-height: 76px; }
  .wordmark svg { height: 1.875rem; }
  .menu-btn { display: none; }
  .site-nav { justify-self: stretch; border-top: 1px solid var(--rule); padding: 4px var(--gutter) 8px; }
  .site-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 18px; max-width: none; margin: 0; padding: 0; }
  .site-nav li + li { border-top: 0; }
  .site-nav a, .site-nav .pending { min-height: var(--tap); font-size: var(--fs-ui); white-space: nowrap; }
  .site-nav .nav-cta { margin-left: auto; padding: 0; align-self: center; } /* HP7: end of the nav row */
  .site-nav .nav-cta a, .site-nav .nav-cta a:visited, .site-nav .nav-cta a:hover { width: auto; min-height: var(--tap); padding: 0 20px; font-size: var(--fs-ui); white-space: nowrap; }
  .site-nav .nav-cta a:focus-visible { color: var(--ink); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-nav a, .site-nav .pending { font-size: 1.125rem; } /* 18px, see the header note */
}
@media (min-width: 1280px) {
  .wordmark svg { height: 2.25rem; }
  .site-nav ul { gap: 0 36px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 14px 24px;
  font: 700 1.25rem/1.25 var(--font-body);
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; border: 0;
  text-align: center;
}
.btn .ic { display: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (min-width: 720px) { .btn .ic { display: block; } }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--navy-deep); }
.btn-primary:visited, .btn-primary:hover { color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-secondary { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #000; }
.btn-secondary:visited, .btn-secondary:hover { color: #fff; }
.btn-outline { background: var(--page); color: var(--brand); border: 2px solid var(--brand); }
.btn-outline:visited { color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.link-strong { font-weight: 700; font-size: var(--fs-ui); display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- sections ---------- */
.section { padding: var(--space-section) 0; }
.section-tight { padding-top: 0; }
.section-ruled { border-top: 1px solid var(--rule); }
.band-wash { background: var(--wash); }
.section-intro { max-width: var(--measure); margin-bottom: 28px; }
.lede { font-size: var(--fs-lead); max-width: 30em; text-wrap: pretty; }

/* ---------- fear doors: plain strong type + chevron (home, 404) ---------- */
.doors-more { margin: 16px 0 0; }
.doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.door {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  min-height: 88px; padding: 18px 18px;
  background: var(--page); color: var(--ink); text-decoration: none;
  border: 2px solid var(--rule); border-radius: var(--radius);
}
.door:visited { color: var(--ink); }
.door:hover { border-color: var(--brand); }
.door:hover .door-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.door-title { font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--brand); }
.door-sub { grid-column: 1 / -1; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.chev { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 720px) {
  .doors { grid-template-columns: 1fr 1fr; gap: 16px; }
  .doors li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .door { padding: 20px 24px; min-height: 108px; }
  .door .chev { grid-row: 1 / span 2; grid-column: 2; }
  .door-sub { grid-column: 1; }
}
@media (min-width: 1024px) {
  .door-title { font-size: 1.625rem; }
}

/* ---------- email capture: label above, consent unchecked, inline only ---------- */
.kit-form, .newsletter { background: var(--page); border: 2px solid var(--rule); border-radius: var(--radius); padding: 24px 20px; }
.kit-form h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.optional { font-weight: 400; color: var(--slate); font-size: var(--fs-ui); }
label { display: block; font-weight: 700; font-size: var(--fs-ui); margin-bottom: 8px; }
input[type="email"], input[type="text"] {
  width: 100%; min-height: 56px; padding: 10px 14px;
  font: 400 var(--fs-body) var(--font-body); color: var(--ink);
  background: var(--page); border: 2px solid var(--edge); border-radius: var(--radius-sm);
}
.consent { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 24px; }
.consent input { width: 30px; height: 30px; flex: none; margin: 2px 0 0; accent-color: var(--brand); }
.consent label { font-weight: 400; font-size: var(--fs-ui); line-height: 1.45; margin: 0; }
.field-error { color: var(--stop); font-weight: 700; font-size: var(--fs-ui); margin: 8px 0 0; }
.fine { font-size: var(--fs-meta); color: var(--slate); margin: 16px 0 0; }
.kit-form .btn { width: 100%; }
.newsletter { max-width: 760px; margin-inline: auto; padding: 28px 20px; border-color: var(--brand); }
.newsletter .btn { width: 100%; }
@media (min-width: 720px) {
  .newsletter { padding: 40px; }
  .newsletter .btn { width: auto; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #fff; padding: 48px 0 40px; }
.site-footer a, .site-footer a:visited { color: #fff; }
.site-footer :focus-visible { color: var(--ink) !important; box-shadow: 0 0 0 3px var(--focus); } /* yellow ring stays visible on navy */
.footer-grid { display: grid; gap: 24px; }
.footer-mark { font-family: var(--font-head); font-weight: 600; font-size: 1.625rem; margin-bottom: 4px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a, .footer-links .pending { display: inline-flex; min-height: var(--tap); align-items: center; font-size: var(--fs-ui); }
.footer-links .pending { color: var(--on-navy-soft); } /* page not live yet: plain text, 11.59:1 */
.legal { font-size: var(--fs-floor); line-height: 1.5; color: var(--on-navy-soft); max-width: 70ch; margin: 0; }
@media (min-width: 720px) { .footer-links { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1.4fr; column-gap: 64px; }
  .legal { grid-column: 1 / -1; }
}

/* ---------- breadcrumbs ---------- */
.crumbs { padding-top: 16px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: var(--fs-ui); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 8px; height: 8px; margin: 0; border-right: 2px solid var(--slate); border-top: 2px solid var(--slate); transform: rotate(45deg); }
.crumbs a { display: inline-flex; min-height: var(--tap); align-items: center; }
.crumbs span { display: inline-flex; min-height: var(--tap); align-items: center; }

/* ---------- article column (shared by page, post and jurisdiction layouts) ---------- */
.article-layout { display: grid; gap: 0; }
.article-main { min-width: 0; padding-bottom: 72px; }
.article-main > *, .article-main .prose > * { max-width: var(--measure); }
.article-head { padding: 8px 0 4px; }
.article-head h1 { max-width: 24ch; }

.trustcard { display: grid; gap: 2px; margin: 16px 0 28px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 12px 0; }
.trustcard p { display: flex; align-items: center; gap: 14px; margin: 0; font-size: var(--fs-ui); line-height: 1.4; padding: 6px 0; }
.monogram {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--page); color: var(--brand); border: 3px solid var(--brand);
  font-family: var(--font-head); font-weight: 600; font-size: 1.375rem;
}
.trustcard .monogram { width: 48px; height: 48px; font-size: 1.0625rem; border-width: 2px; }
/* reviewer row: render only for a real, contracted reviewer (DESIGN.md) */
.trustcard .reviewer-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--brand); }

.article-main h2 { margin-top: 56px; scroll-margin-top: 16px; }
.article-main h3 { margin-top: 32px; scroll-margin-top: 16px; }
.article-main ul, .article-main ol { padding-left: 1.3em; }
.article-main li { margin-bottom: 8px; }
.prose { overflow-wrap: break-word; }

/* ---------- contents: <details>, collapsed on phones (menu.js) ---------- */
.toc { border: 2px solid var(--ink); border-radius: var(--radius); background: var(--page); margin: 0 0 40px; }
.toc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 8px 18px;
  font-weight: 700; font-size: 1.3125rem; border-radius: var(--radius);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary .state { font-size: var(--fs-ui); font-weight: 700; color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.toc[open] summary .state-open { display: none; }
.toc:not([open]) summary .state-close { display: none; }
.article-main .toc ol { margin: 0; padding: 4px 18px 16px 2.6em; }
.toc li { padding: 2px 0; margin: 0; }
.toc a { display: inline-block; vertical-align: top; min-height: 48px; font-size: var(--fs-ui); line-height: 1.45; padding: 6px 0; }

/* ---------- callout "Watch out": full border + icon + word ---------- */
.callout-watch { border: 3px solid var(--stop); border-radius: var(--radius); padding: 20px 20px 8px; margin: 32px 0; }
.callout-watch .callout-title { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: var(--fs-h4); color: var(--stop); margin-bottom: 10px; }
.callout-watch .callout-title svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--stop); stroke-width: 2.4; stroke-linecap: round; }

/* ---------- ad slot: reserved height, never sticky ---------- */
.ad-slot { margin: 48px 0; min-height: 300px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.ad-slot .ad-label { font-size: var(--fs-floor); color: var(--slate); padding: 6px 0; margin: 0; }
@media (min-width: 1024px) { .ad-slot { min-height: 280px; } }

/* ---------- tables: .compare (hand-built) and markdown tables in .prose.
   Under 720 each row stacks into a card; cells carry data-label (menu.js adds it to markdown tables). ---------- */
.table-wrap, .prose .table-scroll { margin: 24px 0 0; }
.prose .table-scroll { overflow-x: visible; margin-bottom: 1.2em; }
.compare, .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.4; }
.compare caption, .prose caption { text-align: left; font-weight: 700; font-size: var(--fs-ui); padding-bottom: 12px; color: var(--slate); }
.compare th, .compare td, .prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 12px; border: 0; }
.compare thead th, .prose thead th { background: var(--brand); color: #fff; font-weight: 700; }
.compare thead th:first-child, .prose thead th:first-child { border-top-left-radius: var(--radius-sm); }
.compare thead th:last-child, .prose thead th:last-child { border-top-right-radius: var(--radius-sm); }
.compare tbody tr, .prose tbody tr { border-bottom: 1px solid var(--rule); }
.compare tbody th { font-weight: 700; }
.verdict { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.verdict svg { width: 22px; height: 22px; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v-yes { color: var(--brand); } .v-yes svg { stroke: var(--brand); }
.v-maybe { color: var(--ink); } .v-maybe svg { stroke: var(--ink); }
.v-no { color: var(--stop); } .v-no svg { stroke: var(--stop); }

/* wide tables scroll inside their own box (never widen the page); right-edge shadow shows more is there */
@media (min-width: 720px) {
  .prose .table-scroll {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--page), var(--page)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--page), var(--page)) right center / 24px 100% no-repeat local,
      linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0,0,0,.22), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
  }
  .prose td, .prose th { overflow-wrap: break-word; }
}

@media (max-width: 719.98px) {
  .compare thead, .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td,
  .prose table, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: 100%; }
  .compare tbody tr, .prose tbody tr { border: 2px solid var(--rule); border-radius: var(--radius); margin-bottom: 14px; padding: 6px 16px 10px; }
  .compare tbody th { font-size: var(--fs-h4); padding: 10px 0 8px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
  .prose tbody td:first-child { font-weight: 700; font-size: var(--fs-h4); padding: 10px 0 8px; border-bottom: 2px solid var(--ink); display: block; }
  .prose tbody td:first-child::before { display: none; }
  .compare caption, .prose caption { display: block; width: 100%; }
  .compare td, .prose td { padding: 8px 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; }
  .compare td + td, .prose td + td { border-top: 1px dashed var(--rule); }
  .compare td::before, .prose td::before { content: attr(data-label); font-weight: 700; color: var(--slate); font-size: var(--fs-meta); }
}

/* ---------- jurisdiction tables (TB1). Opt in from markdown:
     <section class="jurisdiction-table" markdown="1">
     | State | ... |   (first column names the place)
     </section>
   jurisdiction-table.js adds the "Find your state" picker and its card, row headers, and steps
   the contents rail aside. With JS: under 1024 rows stack as cards; 1024+ the table spans the
   full page container (over the rail column) with a sticky header row and no sideways scroll.
   Without JS: the plain table above. ---------- */
.article-main .prose > .jurisdiction-table, .article-main > .prose:has(> .jurisdiction-table) { max-width: none; }
.jt-picker { margin: 24px 0 0; padding: 20px; border: 2px solid var(--brand); border-radius: var(--radius); background: var(--page); }
.jt-picker select {
  display: block; width: 100%; min-height: 56px; padding: 10px 48px 10px 14px; appearance: none; cursor: pointer;
  font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--ink); background-color: var(--page);
  border: 2px solid var(--edge); border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5l6.5 6.5 6.5-6.5' fill='none' stroke='%231A1C1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.jt-picker select:focus-visible { background-color: var(--page); box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink); }
.jt-card { margin-top: 20px; border-top: 2px solid var(--ink); }
.jt-card-title { font-family: var(--font-head); font-weight: 600; font-optical-sizing: auto; font-size: var(--fs-h3); line-height: 1.25; margin: 0; padding: 12px 0 4px; }
.jt-card dl { margin: 0; font-size: var(--fs-ui); line-height: 1.45; }
.jt-card dl > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dashed var(--rule); }
.jt-card dt { font-weight: 700; color: var(--slate); font-size: var(--fs-meta); }
.jt-card dd { margin: 0; }
.jt-all { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: 8px; font-size: var(--fs-ui); font-weight: 700; }
@media (min-width: 480px) {
  .jt-card dl > div { grid-template-columns: 10.5rem 1fr; gap: 16px; align-items: start; }
  .jt-card dt { padding-top: 1px; }
}
@media (min-width: 720px) { .jt-card dl > div { grid-template-columns: 13.5rem 1fr; } }
.jurisdiction-table .table-scroll { margin-top: 28px; }
/* wrapped verdicts ("Not confirmed"): icon on the first line, not centered on two */
.jurisdiction-table .verdict { align-items: flex-start; }
.jurisdiction-table .verdict::before { margin-top: 0.12em; }

/* with JS, under 1024: every row is a card (phones already stack; this extends it to tablets,
   where a six-column table would scroll sideways) */
@media (max-width: 1023.98px) {
  .js .jurisdiction-table .table-scroll { overflow: visible; background: none; }
  .js .jurisdiction-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .js .jurisdiction-table table, .js .jurisdiction-table tbody, .js .jurisdiction-table tr,
  .js .jurisdiction-table tbody th, .js .jurisdiction-table td { display: block; width: 100%; }
  .js .jurisdiction-table tbody tr { border: 2px solid var(--rule); border-radius: var(--radius); margin-bottom: 14px; padding: 6px 16px 10px; }
  .js .jurisdiction-table tbody th { font-weight: 700; font-size: var(--fs-h4); padding: 10px 0 8px; border-bottom: 2px solid var(--ink); }
  .js .jurisdiction-table td { padding: 8px 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; }
  .js .jurisdiction-table td + td { border-top: 1px dashed var(--rule); }
  .js .jurisdiction-table td::before { content: attr(data-label); font-weight: 700; color: var(--slate); font-size: var(--fs-meta); }
  /* a picked place shows only its card; "Show all" brings the stack back */
  .jurisdiction-table.is-picked .table-scroll, .jurisdiction-table.is-picked > table { display: none; }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
  .js .jurisdiction-table tbody tr { padding: 6px 20px 10px; }
  .js .jurisdiction-table td { grid-template-columns: 13.5rem 1fr; gap: 16px; }
}

/* 1024+: full container width. The rail column sits under the table, which paints over it
   (opaque), and the script hides the rail while they overlap. Header row sticks to the top. */
@media (min-width: 1024px) {
  .jt-picker { max-width: var(--measure); }
  .article-layout:has(.rail) .prose > .jurisdiction-table { width: calc(100% + 72px + 300px); }
  .jurisdiction-table .table-scroll { position: relative; z-index: 1; background-color: var(--page); }
  .js .jurisdiction-table .table-scroll { overflow: visible; background: var(--page); }
  .jurisdiction-table thead th { position: sticky; top: 0; z-index: 2; }
  .jurisdiction-table tbody th { font-weight: 700; }
  /* fallback when a table still cannot fit: a scroll box no taller than the screen, so its
     scrollbar is always in view; sticky header and first column inside it; edge shadows */
  .js .jurisdiction-table.is-wide .table-scroll {
    overflow: auto; max-height: calc(100vh - 32px);
    background:
      linear-gradient(to right, var(--page), var(--page)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--page), var(--page)) right center / 24px 100% no-repeat local,
      linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0,0,0,.22), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll,
      var(--page);
  }
  .jurisdiction-table.is-wide tbody th { position: sticky; left: 0; z-index: 1; background: var(--page); }
  .jurisdiction-table.is-wide thead th:first-child { left: 0; z-index: 3; }
  .jurisdiction-table.is-wide .table-scroll:focus-visible { box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink); }
  .rail.jt-covered { visibility: hidden; opacity: 0; }
}
@media (min-width: 1280px) {
  .article-layout:has(.rail) .prose > .jurisdiction-table { width: calc(100% + 72px + 320px); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .rail { transition: opacity .2s, visibility .2s; }
}

/* ---------- 404 ---------- */
.not-found { padding-top: 32px; padding-bottom: var(--space-section); }
.not-found h1 { max-width: 18ch; }
.not-found .actions { margin: 24px 0 0; }
.not-found .doors-block { margin-top: var(--space-section); }
@media (max-width: 719.98px) { .not-found .actions .btn { width: 100%; } }
/* updated pages: phones show only "Updated <date>" so the byline stays one line */
@media (max-width: 719.98px) { .date-pub { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .btn, .door, .related a, .region-list a { transition: background-color .15s, border-color .15s; }
}

/* =================== HOME (B2b) =================== */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hero { padding: 32px 0 40px; }
.hero + .section { padding-top: 8px; }
.hero h1 { max-width: 18ch; }
.hero-grid { display: grid; gap: 28px; }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 24px 0 0; }
.hero-actions .link-strong { align-self: center; }
.three-q { border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 20px 6px; }
.three-q-title { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.25; margin-bottom: 4px; }
.three-q ol { list-style: none; margin: 0; padding: 0; }
.three-q li { border-top: 1px solid var(--rule); }
.three-q li:first-child { border-top: 0; }
.three-q li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; font-size: var(--fs-ui); line-height: 1.4; }
.three-q li a strong { color: inherit; }
@media (min-width: 720px) {
  .hero-actions { flex-direction: row; align-items: center; gap: 28px; }
}
@media (min-width: 1024px) {
  .hero { padding: 56px 0 var(--space-section); }
  .hero-grid { grid-template-columns: 1.25fr 1fr; column-gap: 64px; align-items: center; }
  .hero-actions { flex-wrap: wrap; gap: 8px 28px; }
  .hero-actions .btn { white-space: nowrap; }
  .three-q { padding: 24px 28px 12px; }
  .three-q li a { font-size: var(--fs-body); }
}

/* emergency card band */
.card-grid { display: grid; gap: 40px; }
.card-copy p { max-width: 26em; }
.ticks { list-style: none; padding: 0; margin: 0 0 28px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; font-size: var(--fs-ui); }
.ticks svg { width: 28px; height: 28px; flex: none; margin-top: 1px; fill: none; stroke: var(--brand); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.card-copy [data-print], .card-copy .card-tool-link { width: 100%; }
@media (min-width: 720px) { .card-copy [data-print], .card-copy .card-tool-link { width: auto; } }
.ecard-wrap { margin: 0; }
.ecard { background: var(--page); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; max-width: 520px; }
.ecard-head { background: var(--warm); padding: 14px 20px; margin: 0; display: flex; flex-direction: column; border-bottom: 2px solid var(--ink); }
.ecard-head span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.ecard-head-sub { font-weight: 700; font-size: var(--fs-ui); }
.ecard-body { margin: 0; padding: 6px 20px 14px; }
.ecard-body div { display: grid; grid-template-columns: 1fr; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.ecard-body div:last-child { border-bottom: 0; }
.ecard-body dt { font-size: var(--fs-meta); font-weight: 700; color: var(--slate); }
.ecard-body dd { margin: 0; font-size: var(--fs-ui); line-height: 1.35; }
.ecard-wrap figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
@media (min-width: 480px) {
  .ecard-body div { grid-template-columns: 8.5rem 1fr; gap: 12px; align-items: baseline; }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 48px; align-items: start; }
}

/* start here guides (home) and "Start with these" (folder index) */
.guides { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.guides li { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.guides a { font-weight: 700; font-size: 1.375rem; line-height: 1.3; display: block; margin-bottom: 6px; }
.guides p { margin: 0 0 10px; max-width: 28em; }
.tag { display: inline-block; font-size: var(--fs-meta); font-weight: 700; color: var(--slate); }
@media (min-width: 1024px) {
  .guides { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .guides a { font-size: 1.5rem; }
}
.start-group + .start-group { margin-top: 56px; }

/* HP1: example card in the hero (1024+ only; on a phone it would push the tools down) */
.hero-card { display: none; }
@media (min-width: 1024px) { .hero-card { display: block; } }
/* the hero column is narrower than the old band: stack label over value so numbers never split */
@media (min-width: 1024px) and (max-width: 1279.98px) { .hero-card .ecard-body div { grid-template-columns: 1fr; gap: 0; } }

/* HP1: free tools rows (home). Lighter than the fear doors: 20px name, one slate line, chevron */
.tool-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tool-rows li { display: flex; }
.tool-rows a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: center; gap: 2px 16px;
  flex: 1; min-height: 80px; padding: 14px 18px; color: var(--ink); text-decoration: none;
  border: 2px solid var(--rule); border-radius: var(--radius);
}
.tool-rows a:visited { color: var(--ink); }
.tool-rows a:hover { border-color: var(--brand); }
.tool-rows a:hover .tool-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tool-rows a:focus-visible { box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink); }
.tool-name { font-weight: 700; font-size: var(--fs-body); line-height: 1.3; color: var(--brand); }
.tool-line { grid-column: 1; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.tool-rows .chev { grid-row: 1 / span 2; grid-column: 2; }
@media (min-width: 720px) { .tool-rows { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (prefers-reduced-motion: no-preference) { .tool-rows a { transition: border-color .15s; } }

/* Margaret note + how we research */
.trust-grid { display: grid; gap: 40px; }
.author-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.author-head h2 { margin: 0; }
.author-note p { max-width: var(--measure); }
.sig { font-weight: 700; }
.how { border-top: 2px solid var(--ink); padding-top: 20px; }
.how h3 { font-size: var(--fs-h4); }
.how-list { margin: 0 0 16px; padding-left: 1.2em; }
.how-list li { padding: 6px 0; font-size: var(--fs-ui); line-height: 1.45; }
.how-list li::marker { color: var(--brand); }
.how-links, .author-links { display: flex; flex-direction: column; margin: 0; }
.how-links a, .author-links a { display: inline-flex; min-height: var(--tap); align-items: center; font-weight: 700; font-size: var(--fs-ui); }
@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
}

/* US + Canada strip (home) and the cross-link box (folder index) */
.where { border: 2px solid var(--brand); border-radius: var(--radius); padding: 28px 20px; }
.where p { max-width: var(--measure); }
.where-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.where-links .btn { width: 100%; }
@media (min-width: 720px) {
  .where { padding: 36px 40px; }
  .where-links { flex-direction: row; }
  .where-links .btn { width: auto; }
}
@media (min-width: 1024px) {
  .where { display: grid; grid-template-columns: 0.8fr 1.2fr; column-gap: 48px; }
  .where h2 { grid-row: 1 / span 2; }
}

/* newsletter: Web3Forms signup */
.newsletter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.newsletter .not-open { font-size: var(--fs-ui); line-height: 1.45; }

/* =================== ARTICLE + JURISDICTION (B2b) =================== */
.short-answer { border: 2px solid var(--brand); border-radius: var(--radius); padding: 22px 20px 10px; margin: 0 0 32px; }
.article-main .short-answer h2 { margin-top: 0; font-size: var(--fs-h3); margin-bottom: 12px; }
.short-answer ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-lead); }
.short-answer li { margin-bottom: 12px; }
.short-answer li::marker { color: var(--brand); }

/* Watch out written in markdown: the first paragraph is the title; icon drawn here */
.callout-watch > p:first-child:not(.callout-title) { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: var(--fs-h4); color: var(--stop); margin-bottom: 10px; }
.callout-watch > p:first-child:not(.callout-title)::before {
  content: ""; width: 32px; height: 32px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1301F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6.5'/%3E%3Ccircle cx='12' cy='16.9' r='1.1' fill='%23A1301F' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* verdict words in markdown tables: icon added here, word always present */
.prose .verdict::before { content: ""; width: 22px; height: 22px; flex: none; background: center / contain no-repeat; }
.prose .v-yes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A44A0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.prose .v-maybe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1C1E' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.prose .v-no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1301F' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }

/* numbered components: markdown lists wrapped in <section class="..."> */
.ranked > ol, .steps > ol, .ladder > ol, .checklist > ul { list-style: none; padding: 0 !important; margin: 24px 0 0; }
.ranked > ol { counter-reset: rank; }
.ranked > ol > li { counter-increment: rank; position: relative; padding: 0 0 28px 64px; margin: 0; }
.ranked > ol > li::before {
  content: counter(rank); position: absolute; left: 0; top: -6px;
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.5rem;
}
.ranked > ol > li:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 52px; bottom: 4px; width: 2px; background: var(--rule); }
.steps > ol { counter-reset: step; }
.steps > ol > li { counter-increment: step; position: relative; padding: 0 0 20px 60px; margin: 0; }
.steps > ol > li::before {
  content: counter(step); position: absolute; left: 0; top: -4px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--brand); color: var(--brand); background: var(--page); font-weight: 700; font-size: 1.25rem;
}
@media (min-width: 720px) { .ranked > ol > li { padding-left: 76px; } }
.article-main .ranked h3, .article-main .steps h3 { margin: 0 0 8px; font-size: var(--fs-h4); }
.ranked p, .steps p { margin-bottom: 10px; }
.ladder > ol { counter-reset: rung; border-top: 2px solid var(--ink); }
.ladder > ol > li {
  counter-increment: rung; position: relative; margin: 0; padding: 16px 0 16px 58px;
  border-bottom: 1px solid var(--rule); font-size: var(--fs-ui); line-height: 1.45; color: var(--slate);
}
.ladder > ol > li::before {
  content: counter(rung); position: absolute; left: 0; top: 14px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
}
.ladder strong { display: block; font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); }
.ladder em { display: block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: var(--fs-meta); color: var(--brand); }
.ladder > ol > li:last-child { border-bottom: 2px solid var(--ink); }
.ladder > ol > li:last-child::before { content: ""; background: var(--page); border: 3px solid var(--ink); }
.checklist > ul > li { position: relative; padding: 8px 0 8px 42px; margin: 0; }
.checklist > ul > li::before { content: ""; position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border: 2.5px solid var(--ink); border-radius: 6px; }

/* end-of-guide card teaser (_cta.html) */
.card-teaser { background: var(--wash); border-radius: var(--radius); padding: 24px 20px; margin: 36px 0; display: grid; gap: 20px; }
.article-main .card-teaser h2 { margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; }
.card-teaser p { margin: 0 0 16px; }
.card-teaser .btn { width: 100%; }
.mini-card { background: var(--page); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; max-width: 320px; }
.mini-card p { margin: 0; }
.mini-card .mc-head { background: var(--warm); font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; padding: 8px 14px; border-bottom: 2px solid var(--ink); }
.mini-card .mc-row { padding: 8px 14px; border-top: 1px dashed var(--rule); font-size: var(--fs-ui); line-height: 1.35; }
.mini-card .mc-head + .mc-row { border-top: 0; }
.mini-card .mc-row b { display: block; font-size: var(--fs-meta); color: var(--slate); }
@media (min-width: 720px) {
  .card-teaser { grid-template-columns: 1fr 260px; align-items: center; padding: 32px; }
  .card-teaser .btn { width: auto; }
}

/* sources: numbered, checked date as a slate note (markdown *...*, no italics) */
.sources-block ol, .sources { font-size: var(--fs-ui); line-height: 1.5; }
.sources-block li, .sources li { margin-bottom: 12px; }
.sources-block em, .sources .checked { font-style: normal; color: var(--slate); }

.related { list-style: none; padding: 0 !important; margin: 16px 0 0; display: grid; gap: 12px; }
.article-main .related li { margin: 0; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 18px; border: 2px solid var(--rule); border-radius: var(--radius); font-weight: 700; font-size: var(--fs-ui); line-height: 1.35; }
.related a:hover { border-color: var(--brand); }

.author-box { border: 2px solid var(--rule); border-radius: var(--radius); padding: 24px 20px 8px; margin-top: 56px; }
.article-main .author-box h2 { margin: 0; font-size: var(--fs-h3); }
.author-box > h2 { margin-bottom: 12px !important; }

/* contents rail: sticky from 1024 (menu.js keeps it open) */
.rail { display: none; }
@media (min-width: 1024px) {
  .article-layout:has(.rail) { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
  .article-main .toc-inline { display: none; }
  .rail { display: block; position: sticky; top: 24px; padding-top: 28px; }
  .rail .toc { margin: 0; }
  .rail .toc summary { cursor: default; }
  .rail .toc ol { margin: 0; padding: 4px 18px 16px 2.2em; }
  .short-answer, .card-teaser, .author-box { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1280px) { .article-layout:has(.rail) { grid-template-columns: minmax(0, 1fr) 320px; } }

/* jurisdiction badge, scope line, "In other places" */
.jur-badge { margin: 4px 0 16px; padding: 10px 16px; border: 2px solid var(--brand); border-radius: var(--radius-sm); font-size: var(--fs-ui); line-height: 1.5; }
.jur-badge strong { color: var(--brand); }
.jur-badge a { font-weight: 700; white-space: nowrap; }
.scope-note { font-size: var(--fs-meta); color: var(--slate); line-height: 1.5; margin: -16px 0 32px; }
.elsewhere { margin: 56px 0 0; padding: 24px 20px 12px; border: 2px solid var(--brand); border-radius: var(--radius); }
.article-main .elsewhere h2 { margin-top: 0; font-size: var(--fs-h3); }
.article-main .elsewhere h3 { font-size: var(--fs-ui); margin: 16px 0 4px; color: var(--slate); }
.place-links { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.article-main .place-links li { margin: 0; border-bottom: 1px solid var(--rule); }
.place-links a { display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: var(--fs-ui); }
.all-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 8px 0 0; }
.all-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; font-size: var(--fs-ui); }
@media (min-width: 720px) { .place-links { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .elsewhere { padding: 28px 32px 16px; } .place-links { grid-template-columns: repeat(3, 1fr); } }

/* =================== HUB, ALL TOPICS AND FOLDER PAGES (B5, W1) =================== */
/* hub.html and folder.html: crumbs, H1, then the page markdown. The lead paragraph is lead size;
   each list is the ruled guides list, written in markdown as a loose list: the first paragraph
   of an item is the [[wikilink]] title, the second its one-line description. A guide that is
   not live yet is a soft link (plain text): ink at the link's size and weight, never grayed. */
.hub-head { padding: 8px 0 var(--space-section); }
.hub-head h1 { max-width: 20ch; }
.hub-body > p { max-width: var(--measure); text-wrap: pretty; }
.hub-body > p:first-child { font-size: var(--fs-lead); }
.hub-body h2 { margin: 48px 0 20px; }
.hub-body ul { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.hub-body h2 + ul { margin-top: 0; }
.hub-body li { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.hub-body li p { margin: 0; max-width: 32em; }
.hub-body li p:first-child { margin-bottom: 6px; font-weight: 700; font-size: 1.375rem; line-height: 1.3; color: var(--ink); }
@media (min-width: 1024px) {
  .hub-body ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .hub-body li p:first-child { font-size: 1.5rem; }
}

/* ---------- print ---------- */
@media print {
  .skip-link, .menu-btn, .site-nav, .ad-slot, .toc { display: none !important; }
  .site-footer { background: #fff; color: #000; padding: 12pt 0 0; }
  .site-footer a, .legal { color: #000; }
}
/* The homepage card prints alone, blank, at wallet size, for filling in by hand.
   Guides print normally; their card teaser is left out. */
@media print {
  @page { margin: 12mm; }
  .card-teaser { display: none !important; }
  body:has(.ecard) { background: #fff; }
  body:has(.ecard) * { visibility: hidden; }
  /* same specificity as the hide rule above plus the class, so the card wins (it printed blank before EC1) */
  body:has(.ecard) .ecard, body:has(.ecard) .ecard * { visibility: visible; }
  .ecard { position: absolute; left: 0; top: 0; width: 3.5in; max-width: none; border: 1.5pt solid #000; border-radius: 6pt; color: #000; }
  .ecard-head { background: #fff !important; border-bottom: 1.5pt solid #000; }
  .ecard-head span:first-child { font-size: 13pt; }
  .ecard-head-sub { font-size: 10pt; }
  .ecard-body dt { font-size: 8pt; color: #000; }
  .ecard-body dd { font-size: 10pt; min-height: 14pt; color: transparent !important; }
  .ecard-body div { grid-template-columns: 1fr; padding: 3pt 0; border-bottom: 0.5pt solid #000; }
}

/* =================== CONTACT FORM (B4) =================== */
/* Web3Forms, no backend. Labels above (18/19px bold, base label rule), 20/21px fields
   56px tall, 8-row message box, full-width send, errors in words under each field. */
.contact-box { max-width: var(--measure); margin-top: 8px; padding-bottom: 12px; }
.contact-after { margin-top: 40px; border-top: 2px solid var(--rule); }
.contact-box .not-open { font-size: var(--fs-body); }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form .field { margin-bottom: 24px; }
.contact-form select, .contact-form textarea {
  display: block; width: 100%; min-height: 56px; padding: 10px 14px;
  font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--ink);
  background-color: var(--page); border: 2px solid var(--edge); border-radius: var(--radius-sm);
}
.contact-form textarea { resize: vertical; }
.contact-form select {
  appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5l6.5 6.5 6.5-6.5' fill='none' stroke='%231A1C1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.contact-form select:focus-visible, .contact-form textarea:focus-visible {
  background-color: var(--page); box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink);
}
.contact-form [aria-invalid="true"] { border-color: var(--stop); }
.contact-form .field-error { margin-top: 8px; }
.contact-form .field-error[hidden] { display: none; }
.contact-form .btn { width: 100%; margin-top: 4px; }
.contact-form .btn:disabled { background: var(--slate); box-shadow: none; cursor: not-allowed; }
/* disabled until the access key is set: fields stay readable, border dashed */
.contact-form fieldset[disabled] input, .contact-form fieldset[disabled] select, .contact-form fieldset[disabled] textarea {
  color: var(--ink); background-color: var(--page); border-style: dashed; cursor: not-allowed; opacity: 1;
}
/* honeypot: off screen, not focusable (tabindex -1), hidden from assistive tech */
.contact-form .field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.form-status { font-size: var(--fs-body); font-weight: 700; margin: 20px 0 0; min-height: 1.5em; }
.form-status.is-ok { color: var(--brand); }
.form-status.is-err { color: var(--stop); }

/* =================== STEP FLOW (shared: CA1 calculator, EC2 emergency card) =================== */
/* One short question per screen inside a 2px ink box: "Step 2 of 6" + a segmented bar, the
   question as an h3 (focused on Next), choices as full-width 64px rows, Back / Next, then
   link-style extras (Skip). Operator (2026-10-02): every tool uses this flow. */
.flow { max-width: 46rem; }
.flow { border: 2px solid var(--ink); border-radius: var(--radius); padding: 20px 20px 8px; }
.flow-progress { margin: 0 0 12px; }
.flow-progress-text { font-size: var(--fs-ui); font-weight: 700; color: var(--slate); margin: 0 0 8px; }
.flow-progress-bar { display: flex; gap: 6px; }
.flow-progress-bar span { flex: 1; height: 8px; border-radius: 4px; background: var(--rule); }
.flow-progress-bar span.is-done { background: var(--brand); }
.flow-q { font-size: var(--fs-h3); margin: 0 0 8px; }
.flow-q:focus-visible { background: transparent; box-shadow: none; outline: 3px solid var(--focus); outline-offset: 4px; }
.flow-q-hint { margin: 0 0 20px; }
.flow-choices { display: grid; gap: 12px; }
.flow-choice label { min-height: 64px; }
.flow-err { margin: 16px 0 0; }
.flow-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; }
.flow-nav .btn { width: 100%; }
.flow-nav .flow-next { grid-column: 2; }
.flow-skip-line { margin: 8px 0 0; }
.flow-skip-note { font-size: var(--fs-ui); color: var(--slate); }
.flow-skip-line + .flow-skip-line { margin-top: 0; }

/* answer choices: full-width rows, 64px tall, the whole row is the tap target; state select */
.flow-radio { position: relative; }
.flow-radio input { position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; margin: -13px 0 0; accent-color: var(--brand); }
.flow-radio label {
  display: flex; align-items: center; min-height: 64px; margin: 0; padding: 10px 12px 10px 50px;
  font-size: var(--fs-body); line-height: 1.25; border: 2px solid var(--edge); border-radius: var(--radius-sm); cursor: pointer;
}
.flow-radio input:checked + label { border-color: var(--brand); background: var(--wash); box-shadow: inset 0 0 0 1px var(--brand); }
.flow-radio input:focus-visible { box-shadow: none; background: transparent; }
.flow-radio input:focus-visible + label { box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink); }
@media (min-width: 720px) {
  .flow { padding: 24px 32px 12px; }
  .flow-nav { display: flex; justify-content: space-between; }
  .flow-nav .btn { width: auto; min-width: 9rem; }
  .flow-nav .flow-next { margin-left: auto; }
}

/* =================== TOOL PAGE: EMERGENCY CONTACT CARD (EC1) =================== */
/* emergency-card.html. Phone: crumbs, H1, intro, the form, "How to use your kit", then the
   privacy box and example card. 1024+: the form column plus a 340px rail (not sticky: it is
   taller than a laptop screen) with the privacy box and example card. Labels above fields (18/19px bold), fields at body size and
   56px tall, hints in slate, no placeholders. Without JS the form is hidden and the note shows.
   EC2 (operator: the one-page form was intimidating): the form runs as the shared STEP FLOW,
   one screen per question with 1 to 3 boxes, "Make my card now" under every screen, and a
   review screen (answers + Change) before the PDF. The PDF result replaces the flow. */
.tool-layout { display: grid; gap: 48px; padding-bottom: 72px; }
.tool-main { min-width: 0; }
.tool-main .article-head h1 { max-width: 20ch; }
.tool-after { margin-top: 56px; }
.tool-after > * { max-width: var(--measure); }
.tool-after h2 { margin-top: 48px; }
.tool-after h2:first-child { margin-top: 0; }
/* TU1 (operator: the tool must show on landing): step 1 above the fold at 390x844 and 1280x800;
   everything explanatory sits below the tool. TU2 (operator: short title, tool right after it):
   H1 = the short tool name (_tool_head.html), then the tool. 768+: the page lede is a small
   subtitle under the H1. TU3 (operator: lines floating under the card looked orphaned): the
   2px frame moves from .flow to .tool-card (_tool_card.html), which holds a short value lead at
   its top (phones only; 768+ has the subtitle, so it is said once) and the trust line as fine
   print at its bottom. Once a result replaces the flow, the frame and lead drop, so the result
   card is not boxed twice; the trust line stays under it. No JS: the card hides (the tool needs
   JS). TU4 (operator: don't put the leading text inside the app): the value lead leaves the card
   and the 768+ subtitle goes; the lead is one plain lead line under the H1 at every width. */
.tool-head { padding-bottom: 0; }
.tool-head h1 { margin-bottom: 8px; }
.tool-lead { max-width: var(--measure); margin: 0 0 16px; font-size: var(--fs-lead); line-height: 1.4; text-wrap: pretty; }
html:not(.js) .tool-card { display: none; }
.tool-card { max-width: 46rem; border: 2px solid var(--ink); border-radius: var(--radius); padding: 12px 20px 16px; }
.tool-card .flow { border: 0; border-radius: 0; padding: 0; }
.tool-card > .ec-form, .tool-card > .fc { margin: 0; }
.tool-trust { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--slate); }
.tool-trust svg { width: 20px; height: 20px; margin-top: 2px; flex: none; fill: none; stroke: var(--brand); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-disclaimer { margin: 12px 0 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--slate); }
.tool-card:has(.flow[hidden]) { border-color: transparent; padding: 0; }
@media (min-width: 720px) {
  .tool-card { padding: 24px 32px 20px; }
}
@media (min-width: 768px) {
  .tool-layout .tool-main .tool-head h1, .fc-layout .fc-main .tool-head h1 { max-width: none; margin-bottom: 8px; }
  .tool-lead { margin-bottom: 20px; }
}

.ec-nojs { border: 2px solid var(--brand); border-radius: var(--radius); padding: 20px; max-width: var(--measure); }
.js .ec-nojs { display: none; }
html:not(.js) .ec-form { display: none; }

.ec-form { max-width: 46rem; margin-top: 8px; }
.ec-form-title { margin-bottom: 12px; }

/* one screen = a fieldset; its legend holds the question */
.flow-panel { border: 0; margin: 0; padding: 0; min-width: 0; }
.flow-legend { padding: 0; margin: 0; width: 100%; }
.ec-form .flow-panel > .flow-q-hint { margin: 0 0 16px; }
.ec-form .flow-after-hint { margin: 16px 0 0; }
.flow-legend + .ec-field { margin-top: 16px; }
.ec-field { margin: 0 0 22px; }
.ec-field:last-child, .flow-panel > .ec-check:last-child { margin-bottom: 4px; }
.ec-hint { font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); margin: -2px 0 10px; max-width: 34em; }
.ec-now { margin: 16px 0 0; padding: 4px 0 12px; border-top: 1px solid var(--rule); }
.ec-now-btn { gap: 10px; }
.ec-now-btn .ic { display: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ec-now-note { margin: 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }

/* review: each screen's answers under a ruled heading with its Change button */
.ec-review-list { margin: 0 0 28px; border-bottom: 2px solid var(--ink); }
.ec-review-item { padding: 14px 0 16px; border-top: 1px solid var(--rule); }
.ec-review-item:first-child { border-top: 2px solid var(--ink); }
.ec-review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ec-review-head h4 { margin: 0; }
.ec-review-head .ec-link-btn { flex: none; }
.ec-review-values { margin: 4px 0 0; padding: 0; list-style: none; }
.ec-review-values li { padding: 2px 0; white-space: pre-line; overflow-wrap: anywhere; }
.ec-review-label { display: block; font-size: var(--fs-ui); font-weight: 700; color: var(--slate); white-space: normal; }
.ec-review-empty { margin: 4px 0 0; color: var(--slate); }
.ec-return-line { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.ec-return { width: 100%; }
.ec-result-title:focus-visible { background: transparent; box-shadow: none; outline: 3px solid var(--focus); outline-offset: 4px; }
.ec-hint a { font-weight: 700; }

.ec-form input[type="text"], .ec-form input[type="tel"], .ec-form textarea, .ec-form select {
  display: block; width: 100%; min-height: 56px; padding: 10px 14px;
  font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--ink);
  background-color: var(--page); border: 2px solid var(--edge); border-radius: var(--radius-sm);
}
.ec-form textarea { resize: vertical; }
.ec-form select {
  appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5l6.5 6.5 6.5-6.5' fill='none' stroke='%231A1C1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.ec-form textarea:focus-visible, .ec-form select:focus-visible {
  background-color: var(--page); box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink);
}
.ec-check { margin: 0 0 24px; }
.ec-check label, .ec-piece label { font-size: var(--fs-body); line-height: 1.45; }
.ec-piece { margin: 0 0 18px; }
.ec-piece label strong { display: block; }
.ec-piece label span { display: block; font-size: var(--fs-ui); color: var(--slate); }

.ec-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ec-actions .btn { width: 100%; }
.ec-alt { margin: 4px 0 0; font-size: var(--fs-ui); }
.ec-link-btn {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 700 var(--fs-ui)/1.4 var(--font-body); color: var(--brand);
  text-decoration: underline; text-decoration-thickness: max(1px, 0.07em); text-underline-offset: 0.18em;
}
.ec-link-btn:hover { color: var(--brand-deep); text-decoration-thickness: 0.14em; }
.ec-link-btn:disabled, .ec-form .btn:disabled { cursor: progress; }
.ec-clear-line { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }

.ec-result { border: 2px solid var(--brand); border-radius: var(--radius); padding: 22px 20px; margin: 24px 0 0; }
.ec-result-title { font-size: var(--fs-h4); margin-bottom: 8px; }
.ec-result-lead { margin-bottom: 8px; }
.ec-pages { margin: 0 0 20px; padding-left: 1.2em; }
.ec-pages li { padding: 2px 0; }
.ec-pages li::marker { color: var(--brand); }
.ec-status { margin: 0; font-weight: 700; }
.ec-error { margin: 0; font-weight: 700; color: var(--stop); }
.ec-warn { border: 3px solid var(--stop); border-radius: var(--radius); padding: 16px 18px 4px; margin: 0 0 20px; }
.ec-warn-title { display: flex; gap: 12px; align-items: center; margin: 0 0 8px; font-weight: 700; font-size: var(--fs-h4); color: var(--stop); }
.ec-warn-title svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--stop); stroke-width: 2.4; stroke-linecap: round; }
.ec-warn ul { margin: 0 0 12px; padding-left: 1.2em; }
.ec-warn li { padding: 4px 0; font-size: var(--fs-ui); line-height: 1.45; }
.ec-download { width: 100%; }
.ec-open-line { margin: 8px 0 0; }
.ec-open { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; font-size: var(--fs-ui); }
.ec-fine { font-size: var(--fs-meta); color: var(--slate); margin: 8px 0 0; }

.tool-aside { display: grid; gap: 32px; align-content: start; }
/* the rail is 340px at 1024+: keep the example card's rows stacked so numbers never break */
.tool-aside .ecard-body div { grid-template-columns: 1fr; gap: 0; }

@media (min-width: 720px) {
  .ec-actions .btn, .ec-download, .ec-return { width: auto; }
  .ec-now-btn .ic { display: block; }
  .ec-actions { align-items: flex-start; }
  .ec-result { padding: 28px 32px; }
}
@media (min-width: 1024px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; align-items: start; }
  .tool-aside { padding-top: 24px; }
}

/* No-JS fallback print: only the blank example card, on one page (the .ecard print rules above
   do the card; this drops the form column and page chrome so nothing else takes up pages).
   FP1: scoped to pages with the example card, so other tools on .tool-layout print normally. */
@media print {
  body:has(.ecard) .site-header, body:has(.ecard) .site-footer, body:has(.ecard) .crumbs,
  body:has(.ecard) .tool-main, body:has(.ecard) .tool-aside figcaption { display: none !important; }
}

/* =================== TOOL PAGE: FINAL WISHES PLANNER (FP1) =================== */
/* funeral-wishes.html + funeral-wishes.js. Same layout, step flow, review and result classes as
   the emergency card (above); only the rail's example card is new. Its navy band matches the
   PDF: navy reads calm and formal, marigold stays the emergency color. */
.flow-choices + .ec-field { margin-top: 28px; }
.fw-example { margin: 0; }
.fw-card { background: var(--page); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.fw-card-head { background: var(--navy); color: #fff; padding: 14px 20px; margin: 0; display: flex; flex-direction: column; }
.fw-card-head span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.fw-card-sub { font-weight: 700; font-size: var(--fs-ui); }
.fw-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
@media print {
  body:has(.fw-card) .tool-aside, body:has(.fw-card) .ec-form { display: none !important; }
}

/* =================== TOOL PAGE: WHERE IT ALL IS (WI1) =================== */
/* where-it-all-is.html + where-it-all-is.js. Same layout, step flow, review and result classes as
   the emergency card and the funeral planner (above). New here: the rule box on the money and
   digital screens, repeatable rows (accounts, policies, bills), Yes / No pairs for the legacy
   contacts, the long-number note under a box, the answers-file lines, and the rail's example
   cover. Brand blue is this tool's band (card = marigold, planner = navy). */
/* TU2: the open line is the card's first row, so the H1 runs straight into the tool. */
.wi-open { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.wi-open-line { margin: 0; font-size: var(--fs-ui); }
.wi-open-status { margin: 4px 0 0; font-size: var(--fs-ui); font-weight: 700; }
.wi-open-status:empty { display: none; }
.wi-open-status.is-err { color: var(--stop); }

/* the rule: full 2px border on wash (never a side stripe), icon + words */
.wi-rule { background: var(--wash); border: 2px solid var(--brand); border-radius: var(--radius-sm); padding: 14px 16px 2px; margin: 0 0 24px; }
.wi-rule-title { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 6px; font-weight: 700; line-height: 1.35; }
.wi-rule-title svg { width: 28px; height: 28px; flex: none; margin-top: 1px; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.wi-rule-sub { margin: 0 0 12px; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }

/* repeatable rows: each row a ruled group with its number and a Remove button */
.wi-row { padding: 14px 0 0; border-top: 2px solid var(--rule); }
.wi-row + .wi-row { margin-top: 8px; }
.wi-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.wi-row-head h4 { margin: 0; }
.wi-row-head .ec-link-btn { flex: none; }
.wi-add-line { margin: 0; border-top: 2px solid var(--rule); padding-top: 4px; }
.wi-full { margin: 8px 0 0; }

/* Yes / No pairs: one small fieldset per account, two 64px rows side by side */
.wi-yn { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.wi-yn-legend { padding: 0; margin: 0 0 8px; font-weight: 700; font-size: var(--fs-body); line-height: 1.35; }
.wi-yn-legend span { font-weight: 400; font-size: var(--fs-ui); color: var(--slate); }
.wi-yn-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wi-yn + .ec-field { margin-top: 24px; }

/* the long-number note under a box: words in stop color, never a block */
.wi-guard { margin: 8px 0 0; font-size: var(--fs-ui); line-height: 1.45; font-weight: 700; color: var(--stop); }

.wi-save { margin: 20px 0 0; }
.wi-save-line { margin: 0; }
.wi-save .ec-hint { margin: 0; }
.ec-result .wi-save { padding-top: 12px; border-top: 1px solid var(--rule); }

/* the rail's example cover: brand band like the PDF, a numbered "Do these first" list */
.wi-example { margin: 0; }
.wi-cover { background: var(--page); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.wi-cover-head { background: var(--brand); color: #fff; padding: 14px 20px; margin: 0; display: flex; flex-direction: column; }
.wi-cover-head span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.wi-cover-sub { font-weight: 700; font-size: var(--fs-ui); }
.wi-cover-body { padding: 14px 20px 6px; }
.wi-cover-h { margin: 0 0 6px; font-weight: 700; }
.wi-cover-body ol { margin: 0 0 8px; padding-left: 1.4em; font-size: var(--fs-ui); line-height: 1.4; }
.wi-cover-body li { padding: 3px 0; }
.wi-cover-body li::marker { color: var(--brand); font-weight: 700; }
.wi-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
@media print {
  body:has(.wi-cover) .tool-aside, body:has(.wi-cover) .ec-form { display: none !important; }
}

/* =================== TOOL PAGE: ESTATE PLANNING CHECKLIST (QT1) =================== */
/* estate-checklist.html + estate-checklist.js. Same layout, step flow, review and result classes as
   the tools above. New here: the on-screen checklist (three priority groups, numbered tasks, an
   ink tick box per task, the same box the PDF prints) and the rail's example sheet. Plum
   (--visited, white on it 9.36:1) is this tool's band and group rule: card = marigold, funeral
   planner = navy, where-it-all-is = brand blue. Text stays ink and slate; links stay brand. */
.ep-pdf { margin: 4px 0 0; }
.ep-group { margin: 36px 0 0; }
.ep-group-h { margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--visited); }
.ep-group-note { margin: 10px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.ep-list { list-style: none; margin: 0; padding: 0; }
/* phone: the box sits beside the title only, so the explanation gets the full width */
.ep-item { position: relative; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.ep-box { display: block; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 4px; margin-top: 3px; }
.ep-item > .ep-box { position: absolute; left: 0; top: 20px; }
.ep-item .ep-title { padding-left: 40px; min-height: 32px; }
.ep-body > * { margin: 0 0 8px; }
.ep-body > :last-child { margin-bottom: 0; }
.ep-title { font-weight: 700; line-height: 1.35; }
.ep-num { color: var(--visited); }
.ep-local, .ep-read { font-size: var(--fs-ui); line-height: 1.45; }
.ep-read { color: var(--slate); }
.ep-rules { margin: 0 0 16px; }
.ep-disclaimer { margin: 28px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
@media (min-width: 720px) {
  .ep-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
  .ep-item > .ep-box { position: static; width: 28px; height: 28px; }
  .ep-item .ep-title { padding-left: 0; min-height: 0; }
}

/* the rail's example sheet: plum band like the PDF, a few tasks with tick boxes */
.ep-example { margin: 0; }
.ep-sheet { background: var(--page); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ep-sheet-head { background: var(--visited); color: #fff; padding: 14px 20px; margin: 0; display: flex; flex-direction: column; }
.ep-sheet-head span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.ep-sheet-sub { font-weight: 700; font-size: var(--fs-ui); }
.ep-sheet-body { padding: 14px 20px 8px; }
.ep-sheet-h { margin: 0; padding-bottom: 6px; font-weight: 700; border-bottom: 3px solid var(--visited); }
.ep-sheet-body ol { list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); line-height: 1.4; }
.ep-sheet-body li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ep-sheet-body li:last-child { border-bottom: 0; }
.ep-sheet-body .ep-box { width: 22px; height: 22px; margin-top: 1px; }
.ep-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
/* printing the page prints the on-screen checklist (the PDF is the better copy) */
@media print {
  body:has(.ep-sheet) .tool-aside, body:has(.ep-sheet) .ec-form > :not(.ep-result),
  body:has(.ep-sheet) .ep-pdf, body:has(.ep-sheet) .ep-result .ec-return-line { display: none !important; }
  body:has(.ep-sheet) .ep-result { border: 0; padding: 0; }
  body:has(.ep-sheet) .ep-item { break-inside: avoid; }
}

/* =================== TOOL PAGE: AGING IN PLACE CHECKLIST (QT2) =================== */
/* home-check.html + home-check.js. Same layout, step flow, review and result classes as the tools
   above, and QT1's task list (.ep-item, .ep-box, .ep-why ...). New here: the plan box ("If I fall
   or get sick", the signature), six links each marked with icon + words (check = in place, cross
   + "Not yet." in --stop = a gap, dash + "Not answered."), and marigold group rules. Marigold
   (--warm) is the emergency card's band: this tool is in the card's family, and the plan page sits
   on the fridge next to the card's sheet. Marigold is decoration only; text on it is ink (9.55:1). */
.hc-plan { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; margin: 24px 0 0; }
.hc-plan-h { background: var(--warm); color: var(--ink); margin: 0; padding: 12px 18px; font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
.hc-chain-list { list-style: none; margin: 0; padding: 0 18px; }
.hc-link { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.hc-link:last-child { border-bottom: 0; }
.hc-link svg { width: 26px; height: 26px; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-link.is-gap svg { stroke: var(--stop); }
.hc-link.is-skip svg { stroke: var(--slate); }
.hc-k { margin: 0; font-weight: 700; line-height: 1.35; }
.hc-v { margin: 2px 0 0; font-size: var(--fs-ui); line-height: 1.45; }
.hc-link.is-gap .hc-v strong { color: var(--stop); }
.hc-link.is-skip .hc-v strong { color: var(--slate); }
.hc-group-h { margin: 0; padding-bottom: 8px; border-bottom: 4px solid var(--warm); }
.hc-num { color: var(--ink); }
.hc-nowrap { white-space: nowrap; }
@media (min-width: 720px) {
  .hc-plan-h { padding: 14px 24px; }
  .hc-chain-list { padding: 0 24px; }
}

/* the rail's example: the plan box, three links */
.hc-example { margin: 0; }
.hc-sheet { background: var(--page); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.hc-sheet-head { background: var(--warm); color: var(--ink); padding: 12px 20px; margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
.hc-sheet .hc-chain-list { padding: 0 20px; }
.hc-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
/* printing the page prints the on-screen plan and checklist (the PDF is the better copy) */
@media print {
  body:has(.hc-sheet) .tool-aside, body:has(.hc-sheet) .ec-form > :not(.hc-result),
  body:has(.hc-sheet) .ep-pdf, body:has(.hc-sheet) .hc-result .ec-return-line { display: none !important; }
  body:has(.hc-sheet) .hc-result { border: 0; padding: 0; }
  body:has(.hc-sheet) .ep-item, body:has(.hc-sheet) .hc-link { break-inside: avoid; }
}

/* =================== TOOL PAGE: DAILY CHECK-IN PLAN BUILDER (QT3) =================== */
/* check-in-plan.html + check-in-plan.js. Same layout, step flow, review and result classes as the
   tools above, QT1's task list (.ep-item, .ep-box ...) and the card's .ec-warn box for the 911 line.
   New here: the ladder (the signature): time | marigold rail with a dot per rung | who does what,
   in the PDF's order; a gap rung's words in --stop; the 911 rung's time in --stop with a filled
   dot. Then "What to tell the police" and each person's steps. Marigold (--warm) is the emergency
   card's band: this tool is in the card's family (the summary sits on the fridge with the card's
   sheet and the aging in place checklist's plan page). Marigold is decoration only; text on it is ink (9.55:1). */
.ck-ladder { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; margin: 24px 0 0; }
.ck-ladder-h { background: var(--warm); color: var(--ink); margin: 0; padding: 12px 18px; font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
/* phone (and the 340px rail): the rail on the left, the time above the words, so the words get
   the width; 720+: time | rail | words, the PDF's layout */
.ck-rungs { list-style: none; margin: 0; padding: 8px 16px; }
.ck-rung { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 0 12px 30px; }
.ck-rung::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 4px; background: var(--warm); }
.ck-rung:first-child::before { top: 22px; }
.ck-rung:last-child::before { bottom: auto; height: 22px; }
.ck-rung::after { content: ""; position: absolute; left: 0; top: 16px; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--page); }
.ck-time { margin: 0; font-weight: 700; font-size: var(--fs-ui); line-height: 1.35; overflow-wrap: anywhere; }
.ck-time.is-unset { font-weight: 400; color: var(--slate); }
.ck-do { margin: 0; line-height: 1.45; }
.ck-do strong { display: block; }
.ck-gap { font-weight: 700; color: var(--stop); }
.ck-rung.is-gap::after { border-color: var(--stop); }
.ck-rung.is-911 .ck-time { color: var(--stop); }
.ck-rung.is-911::after { border-color: var(--stop); background: var(--stop); }
.ck-nowrap { white-space: nowrap; }
@media (min-width: 720px) {
  .ck-ladder-h { padding: 14px 24px; }
  .ck-rungs { padding: 8px 24px; }
  .ck-result .ck-rung { grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 30px; padding-left: 0; }
  .ck-result .ck-rung::before { left: calc(10.5rem + 13px); }
  .ck-result .ck-rung::after { left: calc(10.5rem + 7px); }
}

/* the 911 line at the top of the result: the card's warn box, words in ink */
.ck-911 { margin: 16px 0 20px; padding-bottom: 14px; }
.ck-911-text { margin: 0; font-weight: 700; }

/* questions: the local note on the program screen, the time-order note */
.ck-local { margin: 0 0 20px; font-size: var(--fs-ui); line-height: 1.45; }
.ck-time-err { margin: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--stop); }
.ck-time-err:empty { display: none; }

/* what to tell the police: a full ink border, label / words pairs */
.ck-script { border: 2px solid var(--ink); border-radius: var(--radius); padding: 16px 18px 6px; margin: 28px 0 0; }
.ck-script-h { margin: 0 0 4px; }
.ck-script-note { margin: 0 0 12px; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.ck-script-list { margin: 0; }
.ck-script-list dt { font-weight: 700; margin: 0; }
.ck-script-list dd { margin: 0 0 12px; overflow-wrap: anywhere; }
.ck-blank { color: var(--slate); font-size: var(--fs-ui); }

/* each person's steps */
.ck-people { margin: 36px 0 0; }
.ck-group-h { margin: 0; padding-bottom: 8px; border-bottom: 4px solid var(--warm); }
.ck-person { padding: 18px 0 8px; border-bottom: 1px solid var(--rule); }
.ck-person-h { font-size: var(--fs-h4); margin: 0 0 4px; overflow-wrap: anywhere; }
.ck-person-role { margin: 0 0 8px; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.ck-steps { margin: 0; padding-left: 1.5em; }
.ck-steps li { padding: 4px 0; overflow-wrap: anywhere; }
.ck-steps li::marker { font-weight: 700; }
.ck-num { color: var(--ink); }
.ck-result .ep-group { margin-top: 36px; }

/* the rail's example: the ladder, five rungs, in the stacked phone layout so it fits the 340px rail */
.ck-example { margin: 0; }
.ck-sheet { margin: 0; }
.ck-sheet .ck-rungs { padding: 8px 16px; }
.ck-sheet .ck-do { font-size: var(--fs-ui); }
.ck-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
/* printing the page prints the on-screen plan (the PDF is the better copy) */
@media print {
  body:has(.ck-sheet) .tool-aside, body:has(.ck-sheet) .ec-form > :not(.ck-result),
  body:has(.ck-sheet) .ep-pdf, body:has(.ck-sheet) .ck-result .ec-return-line { display: none !important; }
  body:has(.ck-sheet) .ck-result { border: 0; padding: 0; }
  body:has(.ck-sheet) .ck-rung, body:has(.ck-sheet) .ep-item, body:has(.ck-sheet) .ck-person { break-inside: avoid; }
}

/* =================== TOOL PAGE: DIGITAL LEGACY CONTACT (QT4) =================== */
/* digital-legacy.html + digital-legacy.js. Same layout, step flow, review and result classes as the
   tools above, and QT1's task list (.ep-item, .ep-box, .ep-why, .ep-read). New here: "Who you're
   naming" (the worksheet), one section per account under a brand rule, the gets / doesn't get pair
   (icon + words: check in ink, cross in --stop), the clock box, the dated source line, and the keep
   card (the signature: the page the named person keeps, brand band like the PDF's last page).
   Brand blue is this tool's band: it is the digital part of the where-it-all-is family (R10:
   "folds into tool 3 later"); card = marigold, planner = navy, estate checklist = plum. */
.dl-num { color: var(--brand); }
/* long words like myaccount.google.com/inactive wrap instead of pushing past the column */
.dl-result .ep-title, .dl-result .ep-why, .dl-keep-list dd { overflow-wrap: break-word; }
.dl-who, .dl-plat { margin: 40px 0 0; }
.dl-who-h, .dl-plat-h { margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--brand); }
.dl-who-list { margin: 8px 0 0; }
.dl-who-list div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dl-who-list dt { font-weight: 700; }
.dl-who-list dd { margin: 0; overflow-wrap: anywhere; }
.dl-unset { color: var(--slate); }
.dl-kinds { margin: 16px 0 0; padding-left: 1.2em; }
.dl-kinds li { padding: 4px 0; font-size: var(--fs-ui); line-height: 1.45; }
.dl-kinds li::marker { color: var(--brand); }
.dl-ask-h { margin: 24px 0 0; font-weight: 700; }
.dl-plat-sub { margin: 10px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.dl-note { margin: 6px 0 0; font-size: var(--fs-ui); line-height: 1.45; }
.dl-gets { display: grid; gap: 4px 32px; margin: 20px 0 0; }
.dl-get-h { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; font-weight: 700; line-height: 1.35; }
.dl-get-h svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-get.is-no .dl-get-h svg { stroke: var(--stop); }
.dl-get-list { margin: 0 0 12px; padding-left: 36px; font-size: var(--fs-ui); line-height: 1.45; }
.dl-get-list li { padding: 3px 0; }
/* the clock: a full ink border, warn icon + words (never a side stripe) */
.dl-clock { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 0; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius-sm); line-height: 1.45; }
.dl-clock svg { width: 28px; height: 28px; flex: none; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.dl-src { margin: 14px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); overflow-wrap: anywhere; }
.dl-src a { font-weight: 700; }
.dl-plat > .ep-read { margin: 6px 0 0; }
@media (min-width: 720px) { .dl-gets { grid-template-columns: 1fr 1fr; } }

/* the keep card, on the result and in the rail: brand band like the PDF's last page */
.dl-keep { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; margin: 40px 0 0; }
.dl-keep-h { background: var(--brand); color: #fff; margin: 0; padding: 12px 18px; font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
.dl-keep-body { padding: 4px 18px 10px; }
.dl-keep-lead { margin: 12px 0 4px; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.dl-keep-list { margin: 0; }
.dl-keep-list dt { font-weight: 700; padding-top: 12px; border-top: 1px solid var(--rule); }
.dl-keep-list dt:first-child { border-top: 0; }
.dl-keep-list dd { margin: 2px 0 12px; font-size: var(--fs-ui); line-height: 1.45; }
.dl-keep-closing { padding-top: 12px; border-top: 3px solid var(--brand); }
.dl-keep-closing p { margin: 0 0 10px; font-weight: 700; font-size: var(--fs-ui); line-height: 1.45; }
@media (min-width: 720px) {
  .dl-keep-h { padding: 14px 24px; }
  .dl-keep-body { padding: 4px 24px 12px; }
}
.dl-example { margin: 0; }
.dl-sheet { margin: 0; }
.dl-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
/* printing the page prints the on-screen checklist (the PDF is the better copy) */
@media print {
  body:has(.dl-sheet) .tool-aside, body:has(.dl-sheet) .ec-form > :not(.dl-result),
  body:has(.dl-sheet) .ep-pdf, body:has(.dl-sheet) .dl-result .ec-return-line { display: none !important; }
  body:has(.dl-sheet) .dl-result { border: 0; padding: 0; }
  body:has(.dl-sheet) .ep-item, body:has(.dl-sheet) .dl-get, body:has(.dl-sheet) .dl-clock, body:has(.dl-sheet) .dl-keep { break-inside: avoid; }
}

/* =================== TOOL PAGE: PET PLANNING SHEET (QT5) =================== */
/* pet-handoff.html + pet-handoff.js. Same layout, step flow, review and result classes as the tools
   above, plus where-it-all-is's repeatable rows, rule box and Yes / Not yet pairs (.wi-row, .wi-rule,
   .wi-yn). New here: one block per pet on the care screens, the behavior ticks (64px rows like the
   answer choices), the result's "Who has your pets" list and "Still to do", and the rail's example
   card. Marigold is this tool's band: its wallet card is the emergency contact card's pet card. */
.ph-pet + .ph-pet { margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--rule); }
.ph-behave { border: 0; margin: 0; padding: 0; min-width: 0; }
/* floated so the divider between pets runs above the name, not through it */
.ph-behave-legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 700; font-size: var(--fs-ui); line-height: 1.4; }
.ph-behave-legend + * { clear: both; }
.ec-form .flow-after-hint.ph-after { margin: 6px 0 26px; }
.ph-tick { margin: 0 0 12px; }
.ph-behave .ec-field { margin-top: 20px; }
.ph-summary { margin: 0 0 24px; }
.ph-summary h4 { margin: 24px 0 4px; }
.ph-summary-list { margin: 0; }
.ph-summary-list div { display: grid; grid-template-columns: 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ph-summary-list dt { font-weight: 700; }
.ph-summary-list dd { margin: 0; overflow-wrap: anywhere; }
.ph-todo { margin: 4px 0 0; padding-left: 1.2em; }
.ph-todo li { padding: 4px 0; font-size: var(--fs-ui); line-height: 1.45; }
.ph-todo li::marker { color: var(--brand); }
@media (min-width: 480px) {
  .ph-summary-list div { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 12px; }
}

/* the rail's example: the wallet card's front, marigold band like the PDF and the kit's pet card */
.ph-example { margin: 0; }
.ph-card { background: var(--page); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.ph-card-head { background: var(--warm); padding: 14px 20px; margin: 0; display: flex; flex-direction: column; border-bottom: 2px solid var(--ink); }
.ph-card-head span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.ph-card-sub { font-weight: 700; font-size: var(--fs-ui); }
.ph-card-body { margin: 0; padding: 6px 20px 14px; }
.ph-card-body div { padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.ph-card-body div:last-child { border-bottom: 0; }
.ph-card-body dt { font-size: var(--fs-meta); font-weight: 700; color: var(--slate); }
.ph-card-body dd { margin: 0; font-size: var(--fs-ui); line-height: 1.35; }
.ph-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
@media print {
  body:has(.ph-card) .tool-aside, body:has(.ph-card) .ec-form { display: none !important; }
}

/* =================== TOOL PAGE: HOSPITAL DISCHARGE CHECKLIST (QT6) =================== */
/* no-ride-home.html + no-ride-home.js. Same layout, step flow, review and result classes as the
   tools above; the check-in plan's ladder (.ck-ladder, .ck-rung, in a .ck-result box) is the day
   (arrive, who takes me home, going home, first night, backup, who to call); QT1's task list
   (.ep-item, .ep-box) holds the first 72 hours and "Before the day"; the card's .ec-warn box holds
   the 911 line. New here: people and numbers, the grouped questions, and the boxes shown only
   for some answers. Marigold (--warm) is the emergency card's band: this tool is in the card's
   hospital family (the day plan rides with the wallet card; the first days hand off to the
   check-in plan). Marigold is decoration only; text on it is ink (9.55:1). */
.ec-form [data-nr-task] > .ec-field, .ec-form [data-nr-for] > .ec-field { margin-bottom: 22px; }
.nr-911 { margin: 0 0 24px; }
.nr-people { margin: 36px 0 0; }
.nr-roster { margin: 8px 0 0; }
.nr-roster div { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.nr-roster dt { font-weight: 700; }
.nr-roster dd { margin: 0; overflow-wrap: anywhere; }
.nr-unset { color: var(--slate); }
.nr-q-group { font-size: var(--fs-body); margin: 24px 0 4px; }
.nr-q-list { margin: 0; padding-left: 1.6em; }
.nr-q-list li { padding: 6px 0; overflow-wrap: anywhere; }
.nr-q-list li::marker { font-weight: 700; }
@media (min-width: 480px) {
  .nr-roster div { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 12px; }
}

/* the rail's example: the day, six rungs, in the stacked phone layout so it fits the 340px rail */
.nr-example { margin: 0; }
.nr-sheet { margin: 0; }
.nr-sheet .ck-do { font-size: var(--fs-ui); }
.nr-example figcaption { font-size: var(--fs-meta); color: var(--slate); margin-top: 12px; }
/* printing the page prints the on-screen plan (the PDF is the better copy) */
@media print {
  body:has(.nr-sheet) .tool-aside, body:has(.nr-sheet) .ec-form > :not(.nr-result),
  body:has(.nr-sheet) .ep-pdf, body:has(.nr-sheet) .nr-result .ec-return-line { display: none !important; }
  body:has(.nr-sheet) .nr-result { border: 0; padding: 0; }
  body:has(.nr-sheet) .ck-rung, body:has(.nr-sheet) .ep-item, body:has(.nr-sheet) .nr-roster div { break-inside: avoid; }
}

/* =================== TOOL PAGE: FAMILY COST CALCULATOR (CA1) =================== */
/* family-cost.html + family-cost.js. Crumbs, H1, intro, then the tool as short questions, one per
   screen (progress "Step 2 of 6", Back / Next, "Skip, use typical"), then the result: the total
   box, line by line, and two collapsed boxes, "See or change the numbers" (event counts, the
   helper hour, every item, the double-ruled year total) and "Where each price comes from". Then
   the method and sources. One column at every width (46rem), so the question and the answer
   choices sit together. Without JS the tool is hidden and the note points to the example-year
   table in the method. Operator feedback (CA1): one question per screen, numbers after the result. */
.fc-layout { display: grid; gap: 48px; padding-bottom: 72px; }
.fc-main { min-width: 0; }
.fc-main .article-head h1 { max-width: 22ch; }
.fc-nojs { border: 2px solid var(--brand); border-radius: var(--radius); padding: 20px; max-width: var(--measure); }
.js .fc-nojs { display: none; }
html:not(.js) .fc { display: none; }
.fc { margin: 40px 0 0; }
.fc-title { margin-bottom: 20px; }
.fc-loading { color: var(--slate); }
.fc-block { border-top: 2px solid var(--ink); padding-top: 20px; min-width: 0; }
.fc-block > h3 { margin: 0 0 8px; }
.fc-lead { max-width: var(--measure); margin: 0 0 16px; }
.fc-hint { font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); margin: 8px 0 0; max-width: 34em; }
.fc-field { min-width: 0; }
.fc-field .field-error { margin-top: 6px; }

/* result */
.fc-result { max-width: 46rem; }
.fc-result > * + * { margin-top: 32px; }
.fc-sum-h:focus-visible { background: transparent; box-shadow: none; outline: 3px solid var(--focus); outline-offset: 4px; }
.fc-again-line { margin-top: 16px !important; }
.fc-again { width: 100%; }
.fc-more { border: 2px solid var(--ink); border-radius: var(--radius); background: var(--page); }
.fc-more + .fc-more { margin-top: 16px; }
.fc-more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 10px 18px; font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; border-radius: var(--radius);
}
.fc-more summary::-webkit-details-marker { display: none; }
.fc-more-state { font-size: var(--fs-ui); color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.fc-more[open] .fc-more-open, .fc-more:not([open]) .fc-more-close { display: none; }
.fc-more-body { padding: 4px 18px 20px; border-top: 1px solid var(--rule); }
.fc-more-body > .fc-lead:first-child, .fc-items > .fc-lead:first-child { margin-top: 12px; }
.fc-sub { margin: 24px 0 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.fc-items .fc-hour { margin-top: 28px; }

/* state select */
.fc select {
  display: block; width: 100%; min-height: 56px; padding: 10px 48px 10px 14px; appearance: none; cursor: pointer;
  font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--ink); background-color: var(--page);
  border: 2px solid var(--edge); border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5l6.5 6.5 6.5-6.5' fill='none' stroke='%231A1C1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.fc select:focus-visible { background-color: var(--page); box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink); }

/* the year we priced: event counts with minus / plus */
.fc-step { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.fc-step-text label { font-size: var(--fs-body); margin: 0; }
.fc-step-text .fc-hint { margin-top: 4px; }
.fc-stepper { display: inline-flex; justify-self: start; border: 2px solid var(--edge); border-radius: var(--radius-sm); overflow: hidden; }
.fc-step-btn { display: grid; place-items: center; width: 56px; min-height: 56px; padding: 0; background: var(--page); border: 0; color: var(--brand); cursor: pointer; }
.fc-step-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--brand); stroke-width: 2.8; stroke-linecap: round; }
.fc-step-btn:hover { background: var(--wash); }
.fc .fc-stepper input {
  width: 3.5rem; min-height: 56px; padding: 0; text-align: center; font-weight: 700; font-size: 1.375rem;
  border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-radius: 0;
}
.fc-step .field-error { margin: 0; }

/* the result: the one number the page is for */
.fc-summary { background: var(--wash); border: 2px solid var(--brand); border-radius: var(--radius); padding: 22px 20px 20px; min-width: 0; }
.fc-sum-h { font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; line-height: 1.4; margin: 0 0 6px; }
.fc-big { font-family: var(--font-head); font-weight: 600; font-optical-sizing: auto; font-size: 3.25rem; line-height: 1.05; margin: 0 0 8px; }
.fc-range { font-weight: 700; margin: 0 0 12px; }
.fc-scope { font-size: var(--fs-ui); line-height: 1.45; margin: 0 0 4px; }
.fc-avg p, .fc-missing p { font-size: var(--fs-ui); line-height: 1.45; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.fc-avg a { font-weight: 700; }
.fc-estimate { font-size: var(--fs-meta); line-height: 1.5; color: var(--slate); margin: 16px 0 0; }

/* the items */
.fc-hour { border: 2px solid var(--rule); border-radius: var(--radius); padding: 16px 16px 14px; margin: 8px 0 0; }
.fc-hour-title { margin: 0; }
.fc-hour .fc-does { margin-left: 0; }
.fc-hour .fc-field { margin-top: 12px; max-width: 12rem; }
.fc-hour .fc-note { margin-left: 0; }
.fc-group { margin-top: 36px; }
.fc-group > h4 { margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.fc-line { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.fc-line-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fc .fc-check { margin: 0; }
.fc .fc-check label { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; cursor: pointer; }
.fc-cost { font-weight: 700; white-space: nowrap; padding-top: 1px; }
.fc-cost.is-muted { font-weight: 400; font-size: var(--fs-ui); color: var(--slate); padding-top: 3px; }
.fc-does { font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); margin: 6px 0 0 44px; }
.fc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 14px 0 0 44px; align-items: end; }
.fc-fields label { font-size: var(--fs-ui); line-height: 1.3; }
.fc-fixed { font-size: var(--fs-ui); line-height: 1.45; margin: 0; align-self: center; }
.fc-money { display: flex; align-items: center; background: var(--page); border: 2px solid var(--edge); border-radius: var(--radius-sm); }
.fc-prefix { padding: 0 2px 0 12px; font-weight: 700; white-space: nowrap; }
.fc .fc-money input { border: 0; min-height: 52px; padding: 8px 10px 8px 4px; border-radius: var(--radius-sm); min-width: 0; }
.fc .fc-money input:focus-visible { box-shadow: none; }
.fc-money:focus-within { box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px var(--ink); }
.fc [aria-invalid="true"] { outline: 2px solid var(--stop); }
.fc-note { font-size: var(--fs-ui); line-height: 1.45; margin: 12px 0 0 44px; max-width: 36em; }
.fc-nocan { font-weight: 700; }
.fc-tag {
  display: inline-block; vertical-align: 2px; padding: 0 8px; border-radius: 6px;
  background: var(--warm); color: var(--ink); font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.fc-total {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
  margin: 28px 0 0; padding: 16px 0 0; border-top: 6px double var(--ink);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2;
}
.fc-total-n { font-size: 2rem; }
.fc-reset-line { margin: 12px 0 0; }

/* line by line + where each price comes from (stacked cards under 720, see .compare) */
.fc-table .table-wrap { margin-top: 8px; }
.fc-table caption { font-weight: 400; }
.fc-table tbody th .fc-tag { margin-top: 4px; }
.fc-break-table tbody tr:last-child { border-top: 2px solid var(--ink); }
.fc-caveats { margin: 24px 0 0; padding-left: 1.2em; max-width: var(--measure); }
.fc-caveats li { font-size: var(--fs-ui); line-height: 1.45; margin-bottom: 10px; }
.fc-method-table td a { overflow-wrap: anywhere; }
.fc-src-note { display: block; margin-top: 6px; color: var(--ink); }

/* method and sources (page markdown after the tool) */
.fc-after > * { max-width: var(--measure); }
.fc-after > h2 { margin-top: 72px; }
.fc-after > h3 { margin-top: 40px; }
.fc-after li { margin-bottom: 8px; }
.fc-after .table-scroll, .fc-after table { max-width: 46rem; }

@media (max-width: 719.98px) {
  .fc-table td.fc-empty, .fc-after td:empty { display: none; }
  /* without JS the stacked example table has no column labels (menu.js adds them): its cells
     say what they are ("24 hours", "$35 an hour"), so drop the empty label column */
  html:not(.js) .fc-after td { display: block; }
  html:not(.js) .fc-after td::before { content: none; }
  html:not(.js) .fc-after td:empty { display: none; }
}
@media (min-width: 720px) {
  .fc-step { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .fc-step .field-error { grid-column: 1 / -1; }
  .fc-fields { grid-template-columns: minmax(0, 14rem) minmax(0, 14rem); }
  .fc-summary { padding: 28px 32px; }
  .fc-again { width: auto; }
  .fc-more-body { padding: 4px 32px 24px; }
}
@media (min-width: 1024px) {
  .fc-big { font-size: 3.5rem; }
  .fc-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; align-items: start; }
}

/* =================== TOOL PAGE: POWER OF ATTORNEY FORM (TL-poaform) =================== */
/* poa-form.html + poa-form.js. Same layout, step flow, review and result classes as the tools
   above, and QT1's plum task list (.ep-*): a power of attorney is estate planning paperwork, so
   plum (--visited) is this tool's band and rule, as on the estate planning checklist. New here:
   the state card (a ruled list like the TB1 card), the signing table (the signature: one box per
   person who must be there, required in ink, optional or unconfirmed dashed, "or" between
   alternatives), the mirror/summary flag (wash + full 2px border, icon + words, never a side
   stripe), and the all-states table collapsed under the card. Text stays ink and slate. */
.pf-facts { margin: 4px 0 0; }
.pf-facts-state { margin: 32px 0 0; padding-bottom: 8px; border-bottom: 3px solid var(--visited); }
.pf-facts-list { margin: 0; }
.pf-facts-list > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pf-facts-list > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.pf-facts-list dt { font-weight: 700; color: var(--slate); font-size: var(--fs-meta); line-height: 1.35; }
.pf-facts-list dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.pf-facts-list dd > p { margin: 0 0 6px; }
.pf-facts-list dd > :last-child { margin-bottom: 0; }
.pf-form-name { font-size: var(--fs-h4); line-height: 1.3; }
.pf-cite, .pf-sign, .pf-v-text { font-size: var(--fs-ui); line-height: 1.45; }
.pf-v { display: grid; gap: 4px; }
.pf-seats { list-style: none; margin: 2px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pf-seat { display: flex; flex-direction: column; justify-content: center; min-width: 7.5rem; padding: 8px 14px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--page); }
.pf-seat.is-sign { border-color: var(--visited); box-shadow: inset 0 0 0 1px var(--visited); }
.pf-seat.is-opt, .pf-seat.is-unk { border-style: dashed; border-color: var(--edge); }
.pf-seat-who { font-weight: 700; font-size: var(--fs-ui); line-height: 1.3; }
.pf-seat-need { font-size: var(--fs-meta); line-height: 1.3; color: var(--slate); }
.pf-seat-or { align-self: center; font-weight: 700; font-size: var(--fs-ui); color: var(--slate); }
.pf-flag { background: var(--wash); border: 2px solid var(--edge); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 6px; }
.pf-flag-title { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 4px; font-weight: 700; line-height: 1.35; }
.pf-flag-title svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-flag-text { margin: 0; font-size: var(--fs-ui); line-height: 1.45; }
.pf-extra { margin: 0; padding-left: 1.2em; font-size: var(--fs-ui); line-height: 1.45; }
.pf-extra li { padding: 2px 0; }
.pf-src-link a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; font-size: var(--fs-ui); }
/* step 1 has no Back: Next takes the full row on phones instead of half of it */
[data-pf-flow] .flow-back[hidden] + .flow-next { grid-column: 1 / -1; }
/* the signing screen's boxes sit in show/hide wrappers: keep the field gap between them */
[data-pf-flow] [data-pf-notary] > .ec-field, [data-pf-flow] [data-pf-wit] > .ec-field { margin-bottom: 22px; }
.pf-warn-text { margin: 0 0 12px; font-size: var(--fs-ui); line-height: 1.45; }
.pf-unset { color: var(--slate); }
.pf-checks { list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); line-height: 1.45; }
.pf-checks li { position: relative; padding: 5px 0 5px 34px; }
.pf-checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; }
.pf-checks li.is-on::after { content: ""; position: absolute; left: 8px; top: 9px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
@media (min-width: 720px) {
  .pf-facts-list > div { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .pf-facts-list dt { padding-top: 2px; }
}

/* every state at a glance: plain text, collapsed under the card (no JS: a tap opens it) */
.pf-all { margin: 32px 0 0; }
/* the summary works like the contents box: a Show / Hide word instead of the browser's triangle */
.pf-all-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 8px 18px; border: 2px solid var(--ink); border-radius: var(--radius);
  font-weight: 700; font-size: var(--fs-body); line-height: 1.35;
}
.pf-all-box > summary::-webkit-details-marker { display: none; }
.pf-all-box > summary .state { flex: none; font-size: var(--fs-ui); color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.pf-all-box[open] > summary .state-open, .pf-all-box:not([open]) > summary .state-close { display: none; }
.pf-all-count { display: block; font-weight: 400; font-size: var(--fs-meta); color: var(--slate); }
.pf-all-note { max-width: var(--measure); margin: 16px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--slate); }
.pf-table td, .pf-table th { overflow-wrap: break-word; }
.pf-table thead th { background: var(--visited); }
@media (min-width: 720px) {
  .pf-table th, .pf-table td { padding: 12px 10px; }
}
@media print {
  body:has(.pf-result) .pf-all, body:has(.pf-result) .tool-after { display: none !important; }
}

}