/* Site stylesheet. One file, no outside fonts or services. */
@font-face { font-family: "Atkinson"; src: url("../fonts/AtkinsonHyperlegibleNext-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fonts/AtkinsonHyperlegibleNext-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fonts/AtkinsonHyperlegibleNext-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Serif"; src: url("../fonts/SourceSerif4Display-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1A1F26;
  --muted: #434B57;
  --navy: #0E2A47;
  --navy-hover: #1B3D63;
  --blue: #1F4E8C;
  --on-navy: #FFFFFF;
  --on-navy-soft: #D5DFEA;
  --on-navy-link: #CFE0F5;
  --hair: #D6D8DC; /* decorative dividers only */
  --control: #857F73; /* borders that show something is clickable, or a form control (3:1 or more) */
  --panel: #F4F5F7;
  --paper: #FFFFFF;
  --deep-red: #A4262C; /* only the thin top rule on an emergency panel (home, now/ and the 404 page) */
  /* The one warm accent, for the drawings only (art.ts): never for words, links, buttons or the emergency rule. */
  --brass: #B07D2B; /* lines and small shapes */
  --brass-tint: #F3E4C4; /* glows and fills */
  --radius: 4px;
  --focus: 0 0 0 4px #FFD54A, 0 0 0 6px var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Atkinson", Verdana, system-ui, sans-serif;
  font-size: 1.1875rem; line-height: 1.5;
}
/* The home page reads at 1.6. Other pages keep 1.5 on a phone, so a recovery guide's first step stays
   on a small phone's first screen, and read at 1.6 on wider screens. */
.home, .site-footer { line-height: 1.6; }
@media (min-width: 48em) { .page { line-height: 1.6; } }
/* The page grid: 75rem (1200px) of content, with a 1rem gutter on phones and 2rem on wider screens. */
.wrap { width: 100%; max-width: 79rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5rem; text-wrap: balance; }
h1 { font-family: "Serif", Georgia, serif; font-weight: 700; font-size: 2rem; line-height: 1.12; color: var(--navy); letter-spacing: -0.005em; }
h2 { font-family: "Serif", Georgia, serif; font-weight: 700; font-size: 1.5rem; color: var(--navy); }
h3 { font-size: 1.3125rem; font-weight: 700; }
p { margin: 0 0 0.9rem; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }
/* The transparent outline is invisible, but High Contrast mode paints it (and drops the box-shadow),
   so focus shows in both. */
:focus-visible { outline: 3px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: 2px; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; }
.icon { width: 2rem; height: 2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Words for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon.tiny { width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Header ---------- */
/* The header is navy: a white masthead on top, and on wider screens the navy menu bar under it. */
.site-header { background: var(--navy); }
.masthead { background: var(--paper); border-bottom: 1px solid var(--hair); }
.header-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 0; min-width: 0; min-height: 2.75rem; color: var(--navy); text-decoration: none; }
.brand:hover { color: var(--navy); }
.brand:hover .brand-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.brand-mark { flex: none; width: auto; height: 2.75rem; }
/* The latchstring, its hole and its knot take the background's colour, so they read as cut out of the door. */
.brand-mark .bm-cut { fill: var(--paper); }
.brand-mark .bm-cut-line { stroke: var(--paper); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: "Serif", Georgia, serif; font-weight: 700; font-size: 1.375rem; line-height: 1.1; }
/* On a phone the header keeps to two short rows: the name, then the emergency link. */
.brand-tag { display: none; font-size: 1.0625rem; line-height: 1.3; color: var(--muted); }
.menu-link { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem; font-weight: 700; }
.urgent-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.5rem 1.1rem; border: 2px solid var(--navy); border-radius: var(--radius);
  background: var(--paper); color: var(--navy); font-weight: 700; text-decoration: none;
}
.urgent-link:hover, .urgent-link[aria-current] { background: var(--navy); color: #fff; }
.urgent-icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* On a phone the emergency link gets its own full-width row, and the menu lives in the footer. */
.urgent-link { order: 3; flex: 1 1 100%; }
.site-nav { display: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 2.25rem; margin: 0 auto; list-style: none; }
.site-nav a {
  display: block; padding: 0.7rem 0 0.55rem; border-bottom: 4px solid transparent;
  color: #fff; font-weight: 700; text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; color: #fff; }
.site-nav a[aria-current] { border-bottom-color: #fff; }
.site-nav a:focus-visible { box-shadow: inset 0 0 0 3px #FFD54A; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy); padding: 3rem 0 2.5rem; font-size: 1.0625rem; }
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: var(--on-navy); }
/* Our promise and the anti-coaching line: two calm quotes, each with a thin rule on its left. */
.footer-promise { display: grid; gap: 1.25rem 2rem; margin-bottom: 2.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.footer-promise .promise { margin: 0; max-width: 40rem; padding-left: 1.1rem; border-left: 3px solid var(--on-navy-link); }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; font-family: "Serif", Georgia, serif; font-size: 1.5rem; line-height: 1.1; }
.site-footer .brand-mark .bm-cut { fill: var(--navy); }
.site-footer .brand-mark .bm-cut-line { stroke: var(--navy); }
.footer-id p:not(.footer-brand) { color: var(--on-navy-soft); max-width: 34rem; }
.footer-h { font-family: "Atkinson", Verdana, sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--on-navy); margin: 0 0 0.6rem; }
.footer-h::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: 0.75rem; background: var(--on-navy-link); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fine { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.28); color: var(--on-navy-soft); }

/* ---------- Home page ---------- */
.band { padding: 3.5rem 0; }
.band-intro { background: var(--panel); border-bottom: 1px solid var(--hair); padding: 2rem 0 2.5rem; }
.band-gray { background: var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.band-rule { padding-top: 0; }
.band-rule > .wrap::before { content: ""; display: block; margin-bottom: 3.5rem; border-top: 1px solid var(--hair); }
.band-navy { background: var(--navy); color: var(--on-navy); }
.section-title { margin: 0 0 1.75rem; }
.section-title::after { content: ""; display: block; width: 5rem; height: 4px; margin-top: 0.85rem; background: var(--navy); }
.section-intro { max-width: 46rem; margin: -0.5rem 0 2rem; }
.home p { max-width: 66ch; }

/* Opening: the title and lead, the emergency panel, the other two paths (phones only), and a small
   still life. On a phone they stack in that order, so the emergency panel comes right after the title. */
.intro { display: grid; grid-template-columns: minmax(0, 1fr); }
.intro h1 { margin: 0 0 0.75rem; }
.intro .lead { margin: 0 0 1.25rem; max-width: 34em; }
.urgent-panel { background: var(--paper); border: 1px solid var(--hair); border-top: 5px solid var(--deep-red); padding: 1.25rem 1.25rem 1.1rem; }
.panel-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.6rem; }
.urgent-mark { width: 2.25rem; height: 2.25rem; color: var(--navy); stroke-width: 1.6; margin-top: 0.05rem; }
.urgent-panel h2 { font-size: 1.5rem; margin: 0; }
.urgent-go { margin: 1rem 0 0.9rem; }
.urgent-911 { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--hair); font-weight: 700; }
/* The other two paths, straight after the emergency panel. Only phones need them here:
   phones have no menu bar, and the cards that also lead there come much further down.
   Wider screens show the menu bar instead (see the 48em rules). */
.quick-paths { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.quick-paths li { padding-bottom: 0.7rem; border-bottom: 1px solid var(--hair); }
/* The link reaches 0.5rem past the text on each side, so its focus ring clears the words. */
.quick-paths a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; margin: 0 -0.5rem; padding: 0.4rem 0.5rem 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.quick-paths p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 700; cursor: pointer; line-height: 1.3;
  padding: 0.75rem 1.4rem; min-height: 3rem; border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; text-align: center;
}
.button.navy { background: var(--navy); color: #fff; }
.button.navy:hover { background: var(--navy-hover); color: #fff; }
.button.ghost { background: #fff; color: var(--navy); border-color: var(--navy); }
.button.ghost:hover { background: var(--panel); }

/* Cards: white, a navy rule on top and a hairline edge */
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hair); border-top: 4px solid var(--navy); padding: 1.5rem 1.5rem 0.75rem; }
.paths { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.card-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.4rem; }
.card-icon { width: 2.25rem; height: 2.25rem; color: var(--navy); stroke-width: 1.5; margin-top: 0.3rem; }
.card-title { font-size: 1.375rem; line-height: 1.25; margin: 0; }
/* A title link is a tap target of its own: at least 44px tall. */
.card-title a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.15rem 0; }
.card > p { margin-bottom: 1rem; }
/* The links sit right under each card's description, not pushed to the bottom. */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.rows li + li { border-top: 1px solid var(--hair); }
.rows a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.55rem 0; }
.chev { width: 1.15rem; height: 1.15rem; stroke-width: 2.2; color: var(--navy); }

/* What happened: every recovery guide, in groups, with the first step from the guide itself */
.guides { display: grid; gap: 2.5rem 2rem; }
.group-title { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hair); font-size: 1.3125rem; color: var(--navy); }
.group-icon { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; }
.guide-list { display: grid; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }
/* Plain weight, like a reference list: the underline and the blue say it's a link.
   At least 44px tall to tap; a one-line title sits at the bottom, next to its first step. */
.guide-list { row-gap: 0.4rem; }
.guide-list a { display: inline-block; padding: 0.7rem 0 0.4rem; font-size: 1.25rem; line-height: 1.35; }
.guide-list p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.guide-side .guide-group + .guide-group { margin-top: 2.5rem; }
.not-sure { margin-top: 2.25rem; padding: 1.1rem 1.25rem; background: var(--panel); border-left: 4px solid var(--navy); }
.not-sure p { margin: 0; }
.not-sure p + p { margin-top: 0.35rem; }
.meta-line { font-size: 1.0625rem; color: var(--muted); }
.meta-line .icon { margin-right: 0.45rem; vertical-align: -0.2rem; color: var(--navy); }

/* How the guides work */
.how-steps { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.how-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.how-steps li > :not(.how-num) { grid-column: 2; }
.how-steps .how-num { grid-row: 1 / span 2; }
.how-num {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.9rem;
  border: 2px solid var(--navy); border-radius: 50%; color: var(--navy);
  font-family: "Serif", Georgia, serif; font-weight: 700; font-size: 1.35rem; line-height: 1;
}
.how-steps h3 { margin-bottom: 0.35rem; }
.how-steps p { margin: 0; }

/* Free helplines: columns divided by thin rules */
.helplines { display: grid; margin: 0; padding: 0; list-style: none; }
.hl { padding: 1.5rem 0; border-top: 1px solid var(--hair); }
.hl:first-child { border-top: 0; padding-top: 0; }
.hl h3 { font-size: 1.25rem; color: var(--navy); margin-bottom: 0.4rem; }
.hl-who { font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.hl-number { margin: 0 0 0.35rem; font-size: 1.625rem; font-weight: 700; line-height: 1.25; }
.hl-number a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.hl-how { display: block; font-size: 1.0625rem; font-weight: 400; color: var(--ink); }
.hl-hours { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 1.0625rem; margin-bottom: 0.25rem; }
.hl-hours .icon { color: var(--navy); margin-top: 0.25rem; }
/* The hours only break between their phrases (pages.ts), and into lines of even length. */
.hl-hours span { text-wrap: balance; }
.hl-site { margin: 0; font-size: 1.0625rem; }
.hl-site a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.report { margin-top: 2.5rem; padding: 1.5rem; background: var(--panel); border: 1px solid var(--hair); border-left: 4px solid var(--navy); }
.report h3 { margin-bottom: 0.75rem; }
.report-list { display: grid; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }
.report-list a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.report-list p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }

.who-words p:last-child { margin-bottom: 0; }
.faq-more a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Common questions: a full-width navy band */
.band-navy .section-title { color: var(--on-navy); }
.band-navy .section-title::after { background: var(--on-navy-link); }
.faq-head p { color: var(--on-navy-soft); }
.faq-head a, .faq-head a:hover { color: var(--on-navy-link); }
.faq { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.faq:first-child { border-top: 1px solid rgba(255, 255, 255, 0.3); }
/* A little room on the left, so the focus ring clears the first letter. */
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.25rem; padding: 0.8rem 0.25rem 0.8rem 0.5rem; cursor: pointer; list-style: none;
  font-size: 1.25rem; font-weight: 700; color: var(--on-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.65rem; height: 0.65rem; margin: 0 0.35rem 0.3rem 0;
  border-right: 2px solid var(--on-navy-link); border-bottom: 2px solid var(--on-navy-link); transform: rotate(45deg);
}
.faq[open] summary::after { transform: rotate(-135deg); margin-bottom: -0.2rem; }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.faq-answer { padding: 0 0 1.1rem 0.5rem; color: var(--on-navy-soft); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a, .faq-answer a:hover { color: var(--on-navy-link); }

/* Our promises: a plain ruled list, no icons */
.promises { display: grid; gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.promises li { padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--hair); }
.promises h3 { font-size: 1.25rem; color: var(--navy); margin: 0 0 0.3rem; }
.promises p { margin: 0; }

/* ---------- Drawings (art.ts) ----------
   Small still-life drawings break up the text: at most one in a section, decorative only.
   They are sized in px, not rem: bigger text needs the room, the drawings don't. */
.art { display: block; flex: none; max-width: 100%; width: auto; height: auto; }
.art .b { fill: var(--brass); }
.art .bl { stroke: var(--brass); }
.art .bt { fill: var(--brass-tint); }
.art .btl { stroke: var(--brass-tint); }
/* The home page's opening: a small still life under the title and lead. */
.hero-art { width: 20rem; margin: 1.75rem 0 0; }
/* A drawing beside a section title: the title on the left, the drawing on the right. */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin: 0 0 1.75rem; }
.section-head h2.section-title { min-width: 0; margin-bottom: 0; }
.page .section-head { margin-bottom: 1.25rem; }
.spot { height: 88px; }
/* On the navy band the drawing is reversed: white lines on navy paper. */
.band-navy .art { stroke: var(--on-navy); fill: #183B60; }
.band-navy .art .s { fill: #08203A; }
.band-navy .art .t { stroke: #5F7D9C; }
.band-navy .art .g { fill: #24507C; }
.band-navy .art .m { stroke: #C5D5E6; }
.band-navy .art .n { fill: var(--on-navy); }
.band-navy .art .w { stroke: #183B60; }
/* On a phone the questions follow their heading straight away: the drawing shows on wider screens only. */
.faq-head .art { display: none; height: 96px; margin: 1.75rem 0 0.5rem; }
/* A section with a drawing beside its words on wider screens (the title stays the section's first child). */
.has-art > .art { margin: 1.25rem 0 0 auto; }
/* Under the help line, in the rail beside the main column. */
.rail-art { height: 96px; margin: 2rem auto 0; }
/* now/: the card turned over to its number, beside "what to say", in the "call back" card. */
.callback .art { display: none; }
/* Only on wider screens: on a phone it would come before the choices. A phone gets it after them (.narrow-only). */
.wide-only { display: none; }
.end-art { height: 96px; margin: 2rem auto 0; }
/* The page not found: the front door, closed. */
.nf-art { height: 150px; margin: 2rem auto 0; }

/* ---------- Every page but the home page ----------
   The same parts as the home page: a light gray opening band, white cards with a navy rule on top,
   gray panels with a navy rule on the left, hairlines between rows, and navy section titles. */
/* Long words and web addresses break instead of pushing the page sideways (big text, small phones). */
main { overflow-wrap: anywhere; }
/* Paragraphs keep a readable measure, even in a wide column. Boxes (a warning, a deadline) fill their column. */
.page p, .page blockquote { max-width: 66ch; }
.page :is(.warn, .deadline, .nojs-note) { max-width: none; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--muted); }

/* The opening band: the title, its lead, and on some pages a card or panel beside them. */
.page-head { background: var(--panel); border-bottom: 1px solid var(--hair); padding: 1.5rem 0 1.75rem; }
.page-head h1 { margin: 0; max-width: 22em; }
.page-head .lead { margin: 0.6rem 0 0; max-width: 36em; }
.head-grid > .head-aside, .head-grid > .warn { margin: 1.25rem 0 0; }
/* On a white panel inside the band, a warning is white too, so it stands apart from the gray. */
.page-head .warn { background: var(--paper); }
/* The way back, on a recovery guide: first in the band, with a tap area 44px tall. */
.crumb { margin: -0.75rem 0 0.25rem; }
.crumb a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-weight: 700; }
.crumb-icon { width: 1.1rem; height: 1.1rem; stroke-width: 2.4; }

.page-body { padding-top: 2.25rem; padding-bottom: 3.5rem; }
.layout-main > :first-child, .prose > :first-child { margin-top: 0; }
.section { margin: 2.75rem 0 0; }
/* Section titles: the home page's short navy rule under the words. */
.page .section-title, .guide-main > h2, .guide-main > .section > h2, .prose > .section > h2, .checklist-wrap > h2 { margin: 0 0 1.25rem; }
.page .section-title::after, .guide-main > h2::after, .guide-main > .section > h2::after, .prose > .section > h2::after, .checklist-wrap > h2::after {
  content: ""; display: block; width: 5rem; height: 4px; margin-top: 0.75rem; background: var(--navy);
}
/* The rail: the help line, and on a guide its sources and Print. Under the main column on a phone. */
.sources { margin-top: 2rem; }
.checked { margin: 0 0 0.25rem; color: var(--muted); font-size: 1.0625rem; }
.print-row { margin: 1.25rem 0 0; }
.bottom-link { margin: 1.5rem 0 0; }
.bottom-link .button { width: 100%; }

/* White cards with a navy rule on top, like the home page's. */
.callback, .do-first, .answer, .item, .q, .helpline { background: var(--paper); border: 1px solid var(--hair); border-top: 4px solid var(--navy); }
/* Gray panels with a navy rule on the left, like the home page's "Also report it". */
.warn, .keep, .tools, .nojs-note { background: var(--panel); border: 1px solid var(--hair); border-left: 4px solid var(--navy); }

/* A warning: a gray panel with an outline "!" sign. */
.warn { position: relative; margin: 1.5rem 0; padding: 0.9rem 1.1rem 0.9rem 3.1rem; }
.warn-icon { position: absolute; left: 0.85rem; top: 0.95rem; width: 1.55rem; height: 1.55rem; color: var(--navy); stroke-width: 1.7; }
/* A step's numbered list, with navy numbers. */
.do-list { margin: 0 0 1rem; padding-left: 1.6rem; }
.do-list li { margin: 0 0 0.45rem; padding-left: 0.2rem; }
.do-list li::marker { color: var(--navy); font-weight: 700; }
/* What to say: a quote with a navy rule on its left, like our promise in the footer. */
.say { margin: 1rem 0; padding: 0.1rem 0 0.1rem 1.1rem; border-left: 4px solid var(--navy); }
.say span { display: block; margin-bottom: 0.15rem; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }

/* Links to other pages, in rows like the home page's cards: a hairline between rows, a chevron at the end. */
.link-rows, .choices { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.link-rows li, .choices li { border-bottom: 1px solid var(--hair); }
/* The link reaches 0.5rem past the words on each side, so its focus ring clears them. */
.link-rows a, .choice, .next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; margin: 0 -0.5rem; padding: 0.55rem 0.5rem; }
.link-rows a::after, .choice::after, .next::after {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem;
  border-top: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: rotate(45deg);
}
/* A list to read, with a hairline between items. */
.plain { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.plain li { padding: 0.75rem 0; border-bottom: 1px solid var(--hair); }
/* Official links under a step, one to a line, each 44px tall to tap. */
.links { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.15rem 0; }

/* Free help line (help box) */
.helpline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 0.9rem; align-items: start; margin: 2.75rem 0 0; padding: 1.2rem 1.25rem 1.25rem; }
.helpline .icon { width: 1.75rem; height: 1.75rem; margin-top: 0.1rem; color: var(--navy); stroke-width: 1.7; }
.helpline p { margin: 0; }
.helpline .hq { margin-bottom: 0.25rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--navy); }
.helpline .call {
  grid-column: 1 / -1; display: block; padding: 0.7rem 1rem; border: 2px solid transparent; border-radius: var(--radius);
  background: var(--navy); color: #fff; text-align: center; text-decoration: none; font-size: 1.0625rem; line-height: 1.35;
}
.helpline .call strong { font-size: 1.5rem; letter-spacing: 0.02em; }
.helpline .call:hover { background: var(--navy-hover); color: #fff; }

/* Boxes to tick and answers to pick: a 2px border with at least 3:1 contrast, navy once chosen. */
.did input, .item-head input, .opt input {
  appearance: none; -webkit-appearance: none; flex: none; width: 1.75rem; height: 1.75rem; margin: 0;
  border: 2px solid var(--control); border-radius: 3px; background: var(--paper) no-repeat center / 1.2rem; cursor: pointer;
}
.opt input, .opt input:focus-visible { border-radius: 50%; }
.did input:checked, .item-head input:checked {
  border-color: var(--navy); background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.opt input:checked { border-color: var(--navy); background-image: radial-gradient(circle, var(--navy) 0 0.42rem, transparent calc(0.42rem + 0.5px)); }
.did input:hover, .item-head input:hover, .opt input:hover { border-color: var(--navy); }
/* High Contrast mode draws its own boxes and dots. */
@media (forced-colors: active) { .did input, .item-head input, .opt input { appearance: auto; -webkit-appearance: auto; } }

/* ---------- Someone's pressuring me right now ---------- */
/* The emergency panel holds the page's title, its biggest words. "Call back" comes next. */
.now-grid { display: grid; gap: 1rem; }
.now-grid > .warn { margin: 0; }
.page .now-panel h1 { margin: 0; font-size: 2.25rem; line-height: 1.08; }
.now-panel .panel-head { align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; }
.now-panel .urgent-mark { width: 2.75rem; height: 2.75rem; margin-top: 0; }
.now-panel .lead { margin: 0; }
.callback { padding: 1.1rem 1.25rem 0.75rem; }
.callback h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.callback p { margin-bottom: 0.8rem; }
/* What are they asking you to do? Each choice jumps down to its answer. */
.ask-section { margin: 0 0 2.75rem; }
.ask-grid { display: grid; gap: 0.75rem; }
.ask-card {
  display: flex; align-items: center; gap: 0.9rem; min-height: 4.75rem; padding: 0.85rem 1rem;
  background: var(--paper); border: 1px solid var(--hair); color: var(--ink); text-decoration: none;
}
.ask-icon { width: 2.1rem; height: 2.1rem; color: var(--navy); stroke-width: 1.6; }
.ask-text { flex: 1 1 auto; min-width: 0; }
.ask-card strong { display: block; font-size: 1.1875rem; line-height: 1.3; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ask-text span { display: block; margin-top: 0.15rem; font-size: 1.0625rem; line-height: 1.4; color: var(--muted); }
.ask-chev { transform: rotate(90deg); }
.ask-card:hover { border-color: var(--navy); color: var(--ink); }
.ask-card:hover strong { color: var(--navy); text-decoration-thickness: 2px; }
/* The answers */
.answer { margin: 0 0 1.5rem; padding: 1.15rem 1.25rem 0.9rem; scroll-margin-top: 1rem; }
.answer:target { box-shadow: var(--focus); }
.answer h2 { font-size: 1.375rem; margin-bottom: 0.6rem; }
.answer > .warn { margin: 1rem 0; }
/* "Already …? Here's what to do." links: rows, like the home page cards' links. */
.answer > p:has(> .next) { margin: 0; }
.next { border-top: 1px solid var(--hair); font-weight: 700; }
.answer > .do-list + p:has(> .next), .answer > .warn + p:has(> .next) { margin-top: 0.5rem; }

/* ---------- I think I got scammed ---------- */
.do-first { padding: 1.1rem 1.25rem 0.4rem; }
.do-first h2 { font-size: 1.375rem; margin-bottom: 0.75rem; }
.choice-group + .choice-group { margin-top: 2.25rem; }
/* The group's title already has a hairline under it: it is the first row's top edge. */
.choice-group .group-title { margin-bottom: 0.15rem; }
.group-title + .choices { border-top: 0; }
.choice { font-size: 1.1875rem; line-height: 1.35; }
.section + p { margin-top: 1.75rem; }

/* ---------- Recovery guides ---------- */
/* When the person found out, and how many steps are done. With the date question,
   the count shares the question's first line, so the first step stays on a phone's first screen. */
.plan { margin: 0 0 0.75rem; }
.plan p { margin: 0; }
.done-count { font-weight: 700; color: var(--navy); }
.plan:has(.when) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 1rem; }
.when { display: contents; }
.when label { grid-column: 1; grid-row: 1; font-weight: 700; }
.plan:has(.when) .done-count { grid-column: 2; grid-row: 1; }
.when input {
  grid-column: 1 / -1; grid-row: 2; justify-self: start; min-height: 2.75rem; padding: 0.25rem 0.6rem;
  border: 2px solid var(--control); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit;
}
.when input:hover { border-color: var(--navy); }
.when-hint { display: block; grid-column: 1 / -1; grid-row: 3; font-size: 1.0625rem; line-height: 1.4; color: var(--muted); }
/* The steps: numbered like "How the guides work" on the home page, with a hairline between them. */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--hair); }
.steps > .step:first-child { padding-top: 0.35rem; border-top: 0; }
.step .num {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 2px solid var(--navy); border-radius: 50%;
  color: var(--navy); font-family: "Serif", Georgia, serif; font-weight: 700; font-size: 1.25rem; line-height: 1;
}
.step.urgent .num { background: var(--navy); color: #fff; }
.step h3 { margin: 0 0 0.6rem; font-size: 1.25rem; line-height: 1.3; }
.step p { margin-bottom: 0.75rem; }
/* "Do this now": a small navy label with a clock, above the step's title. */
.now-tag { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.1rem; font-size: 1.0625rem; line-height: 1.3; color: var(--navy); }
.now-icon { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.step.is-done h3 { text-decoration: line-through; text-decoration-thickness: 2px; }
.step.is-done .num { background: var(--paper); border-color: var(--muted); color: var(--muted); }
/* A deadline: a gray panel with a calendar. */
.deadline { position: relative; margin: 0 0 0.85rem; padding: 0.6rem 0.9rem 0.6rem 2.85rem; background: var(--panel); border: 1px solid var(--hair); }
.deadline-icon { position: absolute; left: 0.85rem; top: 0.8rem; width: 1.35rem; height: 1.35rem; color: var(--navy); stroke-width: 1.8; }
/* inline-block keeps "Do by Fri, Oct 30" on one line whenever it fits, and lets it wrap with very big text. */
.due { display: inline-block; font-weight: 700; color: var(--navy); }
.did { display: flex; align-items: center; gap: 0.7rem; min-height: 3rem; margin: 0.75rem 0 0; font-weight: 700; }
/* The words reach to the row's end and its full height, so the whole row is the tap area. */
.did label { display: flex; flex: 1 1 auto; align-items: center; align-self: stretch; cursor: pointer; }
/* Keep your place (recovery.js) */
.keep { margin: 2.75rem 0 0; padding: 1.15rem 1.25rem 1rem; }
.keep h2 { font-size: 1.375rem; }
.keep p:last-child { margin-bottom: 0; }
.tool-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* The line that says a link was copied or a reminder saved. It takes no room until it has something to say. */
.copied { font-weight: 700; color: var(--navy); }
.copied:empty { margin: 0; }
/* A help box straight after the band (the page not found) needs no space of its own above it. */
.page-body > .helpline:first-child { margin-top: 0; }
.nf-body > .helpline { margin-top: 0; }
.after .warn { margin-bottom: 0; }

/* ---------- Protect your accounts ---------- */
/* The questions: calm white cards, each answer a row 48px tall. */
.questions { display: grid; gap: 1rem; margin: 0 0 2.25rem; }
.q { min-width: 0; margin: 0; padding: 1rem 1.25rem 0.75rem; }
/* The question sits inside its card, not on its border. */
.q legend { float: left; width: 100%; margin: 0 0 0.4rem; padding: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
.q legend + * { clear: both; }
.opt { display: flex; align-items: center; gap: 0.8rem; min-height: 3rem; margin: 0 -0.5rem; padding: 0.3rem 0.5rem; border-radius: 2px; cursor: pointer; }
.opt:hover { background: var(--panel); }
.opt:has(input:checked) { background: var(--panel); }
.q-actions { margin: 0.25rem 0 0; }
.nojs-note { margin: 0 0 2.25rem; padding: 0.9rem 1.25rem; }
.checklist-wrap .keep { margin: 0 0 1.25rem; }
.progress { position: sticky; top: 0; z-index: 2; margin: 0 0 1.25rem; padding: 0.7rem 0 0.8rem; background: var(--paper); border-bottom: 1px solid var(--hair); }
/* Focused steps and jumps to a step land below the sticky progress bar, not under it. */
html:has(#progress:not([hidden])) { scroll-padding-top: 6rem; }
/* On a short screen (a phone turned sideways, or big text) the bar would cover too much: let it scroll away. */
@media (max-height: 32rem) { .progress { position: static; } }
.progress p { margin: 0 0 0.4rem; }
.bar { height: 0.625rem; background: var(--panel); border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--navy); transition: width 0.3s; }
/* High Contrast mode drops background colors, which would hide the progress bar. */
@media (forced-colors: active) {
  .bar { border: 1px solid CanvasText; }
  .bar span { forced-color-adjust: none; background: Highlight; }
}
/* The checklist: white cards like the home page's. A step that's done turns gray. */
.checklist { list-style: none; margin: 0; padding: 0; }
.item { margin: 0 0 1.25rem; padding: 1.1rem 1.25rem 0.6rem; }
.item.is-done { background: var(--panel); border-top-color: var(--muted); }
.item-head { display: flex; align-items: center; gap: 0.8rem; min-height: 2.75rem; }
.item-title { margin: 0; font-size: 1.3125rem; line-height: 1.3; }
.item-title label { cursor: pointer; }
.item.is-done .item-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.meta { margin: 0.4rem 0 0.5rem; font-size: 1.0625rem; color: var(--muted); }
.where { font-weight: 700; color: var(--navy); }
.why { margin-bottom: 0.5rem; }
.item .warn { margin: 1rem 0; }
/* "How to do it": a link-blue toggle 44px tall, with a chevron that turns when it opens. */
.how summary {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin: 0 0.15rem 0 0.1rem; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.how[open] summary::before { transform: rotate(45deg); margin-top: -0.25rem; }
.how summary:hover { color: var(--navy); text-decoration-thickness: 2px; }
.variant { margin: 0.25rem 0 0.9rem; }
.variant h4 { margin: 0.75rem 0 0.3rem; font-size: 1.0625rem; color: var(--navy); }
.variant ol { margin: 0; padding-left: 1.6rem; }
.variant li { margin-bottom: 0.4rem; padding-left: 0.15rem; }
.variant li::marker { color: var(--navy); font-weight: 700; }
.tools { margin: 2.25rem 0 0; padding: 1.15rem 1.25rem 1rem; }
.tools h2 { font-size: 1.375rem; }
.tools p:last-child { margin-bottom: 0; }

/* ---------- About ---------- */
/* Who runs the site. The photo sits above the words on a phone, beside them on wider screens. */
.who-about { display: grid; gap: 1rem 1.5rem; align-items: start; }
.who-photo { display: block; width: 6rem; height: 6rem; border-radius: var(--radius); background: var(--panel); }
.who-about .who-photo { width: 7rem; height: 7rem; }
.who-about .who-words p:last-child { margin-bottom: 0; }

/* ---------- Page not found ---------- */
.page-head .choices { margin-top: 1.5rem; }

/* Without JavaScript: show everything, hide the interactive parts. They never print either. */
html:not(.js) .js-only { display: none !important; }
/* The checklist's questions and boxes to tick show only once protect.js has started, so a script
   that fails to load leaves the full checklist and the note, not boxes that do nothing. */
html:not(.protect-ready) .item input.done { display: none !important; }
html.protect-ready .nojs-note { display: none; }
html:not(.protect-ready) .item-title .sr-only { display: none; } /* no box to mark as done */
[hidden] { display: none !important; }

@media (min-width: 40rem) {
  .helpline { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .helpline .call { grid-column: auto; }
  .ask-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Wider screens ----------
   Breakpoints are in em, so someone who makes their text bigger gets the simpler, narrower layout. */
@media (max-width: 47.99em) {
  /* Inner pages on a phone: a little tighter, so a recovery guide's first step still shows
     on a small phone's first screen under the two-row header. */
  .page h1 { font-size: 1.75rem; }
  .page .lead { font-size: 1.125rem; line-height: 1.45; }
  .page-head { padding: 1.25rem 0 1.4rem; }
  .page-head h1 + .lead { margin-top: 0.5rem; }
  .page-body { padding-top: 1.5rem; }
  /* A recovery guide on a phone: everything down to the first step's title fits the first screen.
     The band starts with the way back, whose own 44px tap area is the band's top edge. */
  .guide-head { padding-top: 0.1rem; padding-bottom: 0.75rem; }
  .crumb { margin: 0 0 0.1rem; }
  .guide-head h1 + .lead { margin-top: 0.375rem; line-height: 1.4; }
  .guide-head + .page-body { padding-top: 1rem; }
  .guide-main > h2:first-child { margin-bottom: 0.7rem; }
  .guide-main > h2:first-child::after { margin-top: 0.45rem; }
  .plan { margin-bottom: 0.5rem; }
  .plan:has(.when) { row-gap: 0.2rem; }
  .when-hint { line-height: 1.3; }
  .steps > .step:first-child { padding-top: 0.15rem; }
  .now-tag { margin-bottom: 0; }
  .step h3 { line-height: 1.25; }
  .page .now-panel h1 { font-size: 2.25rem; }
  /* The home page introduces the site, so on a phone it keeps the tagline under the name.
     Other pages save that room, so a recovery guide's first step stays on the first screen. */
  .is-home .header-top { padding-top: 0.75rem; row-gap: 0.6rem; align-items: flex-start; }
  .is-home .brand { align-items: flex-start; }
  .is-home .brand-tag { display: block; margin-top: 0.15rem; text-wrap: balance; }
  /* "Menu" lines up with the name; its tap area stays 44px tall. */
  .is-home .menu-link { margin-top: -0.55rem; }
  .home .button { width: 100%; }
  .band { padding: 2.5rem 0; }
  .band-rule > .wrap::before { margin-bottom: 2.5rem; }
  .band-intro { padding: 1.5rem 0 2rem; }
  .q-actions .button { width: 100%; }
}
@media (min-width: 48em) {
  .wrap { padding-left: 2rem; padding-right: 2rem; }
  .hero-art { width: 24rem; }
  .spot { height: 112px; }
  .page .section-head { margin-bottom: 1.5rem; }
  .faq-head .art { display: block; height: 116px; }
  .rail-art { height: 112px; }
  .callback .art { display: block; float: right; height: 84px; margin: 0.35rem 0 0.5rem 1.25rem; }
  .wide-only { display: block; }
  .narrow-only { display: none; }
  .has-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2.5rem; align-items: start; }
  .has-art > * { grid-column: 1; }
  .has-art > .art { grid-column: 2; grid-row: 1 / span 6; margin: 0; height: 112px; }
  .has-art > .art-door { height: 184px; margin-top: 0.25rem; }
  .nf-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2.5rem; align-items: center; }
  .nf-art { height: 168px; margin: 0; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  .menu-link { display: none; }
  .header-top { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .masthead { border-bottom: 0; }
  .brand-mark { height: 3rem; }
  .brand-name { font-size: 1.5rem; }
  .brand-tag { display: block; }
  .urgent-link { order: 0; flex: none; }
  .site-nav { display: block; }
  .quick-paths { display: none; } /* the menu bar has these paths now */
  .who-photo { width: 8.5rem; height: 8.5rem; }
  .who-about { grid-template-columns: auto minmax(0, 1fr); }
  .who-about .who-photo { width: 10rem; height: 10rem; }
  .wide .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps li { display: block; }
  .helplines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0; }
  .hl, .hl:first-child { border-top: 0; padding: 0 1.75rem; border-left: 1px solid var(--hair); }
  .hl:nth-child(odd) { border-left: 0; padding-left: 0; }
  .report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-id { grid-column: 1 / -1; }
  .footer-promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urgent-panel { padding: 1.5rem 1.75rem 1.25rem; }
  /* Inner pages */
  .page-head { padding: 2.25rem 0 2.5rem; }
  .page-body { padding-top: 3rem; padding-bottom: 4.5rem; }
  .page .section-title, .guide-main > h2, .guide-main > .section > h2, .prose > .section > h2, .checklist-wrap > h2 { margin-bottom: 1.5rem; }
  .page .section-title::after, .guide-main > h2::after, .guide-main > .section > h2::after, .prose > .section > h2::after, .checklist-wrap > h2::after { margin-top: 0.85rem; }
  .section { margin-top: 3.5rem; }
  .page .now-panel h1 { font-size: 3rem; }
  .now-panel .urgent-mark { width: 3.25rem; height: 3.25rem; }
  .now-panel .panel-head { gap: 1.1rem; margin-bottom: 1rem; }
  .callback, .answer, .do-first, .item, .q, .helpline { padding-left: 1.75rem; padding-right: 1.75rem; }
  .callback { padding-top: 1.5rem; }
  .answer { padding-top: 1.5rem; padding-bottom: 1.1rem; }
  .answer h2, .callback h2 { font-size: 1.625rem; }
  .do-first { padding-top: 1.4rem; }
  .do-first h2 { font-size: 1.5rem; }
  .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-actions { grid-column: 1 / -1; }
  .item { padding-top: 1.35rem; }
  .warn { padding: 1rem 1.4rem 1rem 3.4rem; }
  .warn-icon { left: 1rem; top: 1.05rem; }
  .keep, .tools { padding: 1.4rem 1.75rem 1.25rem; }
  .keep h2, .tools h2 { font-size: 1.5rem; }
  /* The date question and the count, in a panel of their own. */
  .plan:has(.when) { padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--hair); margin-bottom: 1.5rem; }
  .step { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; }
  .step .num { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }
  .step h3 { font-size: 1.3125rem; }
  .wide .choices, .link-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (min-width: 64em) {
  .band-intro { padding: 3rem 0 3rem; }
  /* 12 columns: the title and lead take 7 on the left, the emergency panel 5 on the right,
     and the small still life sits in the space under the lead. */
  .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 2rem; }
  .intro > * { grid-column: 1 / span 7; }
  .intro h1 { max-width: 12em; }
  .intro .lead { font-size: 1.3125rem; }
  .intro .urgent-panel { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: start; }
  .intro .hero-art { grid-row: 3; align-self: end; margin: 1.25rem 0 0; }
  /* Three across: the icon goes above the title, so a title never breaks mid-phrase.
     Each card's title, description and links line up with the other cards' (subgrid). */
  .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 2rem; }
  .path { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .card-head { flex-direction: column; gap: 0.5rem; }
  .card-icon { margin-top: 0; }
  .guides { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .guides-main { grid-column: span 8; }
  .guide-side { grid-column: span 4; padding-left: 2rem; border-left: 1px solid var(--hair); }
  .faq-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
  .faq-head { grid-column: span 4; }
  .faq-list { grid-column: span 8; }
  .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 6fr 3fr 3fr; gap: 2.5rem; }
  .footer-id { grid-column: auto; }
  /* Inner pages: the same 12 columns as the header and the home page.
     The band: the title on the left (7), a card or panel on the right (5), like the home page's opening. */
  .head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 2rem; }
  .head-grid > * { grid-column: 1 / span 7; align-self: start; }
  .head-grid > .head-aside { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: start; margin-top: 0; }
  .page-head .lead { font-size: 1.3125rem; }
  /* now/: "Hang up" (7) with the warning under it, and "call back" (5) beside them. */
  .now-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 1.5rem 2rem; align-items: start; }
  .now-panel { grid-column: 1 / span 7; grid-row: 1; }
  .callback { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .now-grid > .warn { grid-column: 1 / span 7; grid-row: 2; }
  .ask-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
  /* Under the band: the main column (8) and the rail (4), divided by a hairline like the home page's guides. */
  .layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .layout-main { grid-column: span 8; }
  .layout-rail { grid-column: span 4; padding-left: 2rem; border-left: 1px solid var(--hair); }
  .layout-rail > :first-child { margin-top: 0; }
  .layout-rail .helpline { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding-left: 1.25rem; padding-right: 1.25rem; }
  .layout-rail .helpline .call { grid-column: 1 / -1; }
  .guides .choice-group + .choice-group { margin-top: 2.5rem; }
}
/* A short rail (the help line) stays in view while you read, when the screen is tall enough to show all of it. */
@media (min-width: 64em) and (min-height: 46em) {
  .layout-rail.sticky { position: sticky; top: 1.5rem; }
}
/* Four across only once each column has room for a helpline's hours and a step's title.
   Until then they stay two by two (the 48em rules). */
@media (min-width: 75em) {
  .how-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .helplines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hl:nth-child(odd) { border-left: 1px solid var(--hair); padding-left: 1.75rem; }
  .hl:first-child { border-left: 0; padding-left: 0; }
  /* Line up each helpline's name, number, hours and link across the columns. */
  .helplines { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .hl { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  .hl > * { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* High Contrast mode drops backgrounds: keep the shapes that carry meaning. */
@media (forced-colors: active) {
  .art { display: none; } /* decorative, and their colours would not survive */
  .brand-mark .bm-cut { fill: Canvas; }
  .brand-mark .bm-cut-line { stroke: Canvas; }
  .section-title::after, .footer-h::before, .guide-main > h2::after, .guide-main > .section > h2::after, .prose > .section > h2::after, .checklist-wrap > h2::after { background: CanvasText; }
  .step.urgent .num { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}

@media print {
  .site-header, .footer-grid, .site-footer .fine, .questions, .tools, .progress, .button, .crumb, .nojs-note, .how summary, .js-only, .art { display: none !important; }
  body { font-size: 12pt; line-height: 1.35; }
  /* Our promise and the anti-coaching line still print. */
  .site-footer { background: none; color: #000; margin-top: 1rem; padding: .5rem 0; }
  .footer-promise { display: block; margin: 0; padding: 0; border: 0; }
  .footer-promise .promise { border-left: 0; padding-left: 0; margin-bottom: .4rem; }
  .band, .band-intro, .band-gray, .band-navy { background: none; color: #000; padding: 1rem 0; }
  .band-navy .section-title, .faq summary, .faq-answer, .faq-head p { color: #000; }
  /* Inner pages: one column, no bands or sticky parts, thin black edges, and the full width of the paper. */
  .page { line-height: 1.35; }
  .page p, .page blockquote { max-width: none; }
  .page-head { background: none; border: 0; padding: 0 0 .5rem; }
  .page-body { padding-top: 0; padding-bottom: 0; }
  /* The paper's own margin is enough: every part starts at the same left edge. */
  .wrap { padding-left: 0; padding-right: 0; }
  .head-grid, .now-grid, .layout { display: block; }
  .layout-rail { position: static; padding: 0; border: 0; }
  .page .lead { font-size: 12pt; }
  .page-head .head-aside, .now-grid > *, .now-grid > .warn, .layout-rail > * { margin-top: .6rem; }
  .section { margin-top: 1rem; }
  .callback, .do-first, .answer, .item, .helpline, .urgent-panel, .warn, .keep, .deadline { background: none; border: 1px solid #000; }
  .callback, .do-first, .answer, .helpline, .urgent-panel { padding: .6rem .8rem; }
  .warn { padding: .5rem .7rem; }
  .warn-icon, .deadline-icon, .now-icon, .ask-icon, .ask-chev { display: none; }
  .deadline { padding: .4rem .6rem; }
  .helpline .call { background: none; color: #000; border: 1px solid #000; }
  .step .num, .step.urgent .num { background: none; color: #000; border: 1px solid #000; }
  .link-rows a, .choice, .next, .links a { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; }
  .link-rows a::after, .choice::after, .next::after { display: none; }
  .link-rows, .choices { border: 0; }
  .link-rows li, .choices li { border: 0; }
  .plain, .plain li { border: 0; padding: .1rem 0; }
  .step { padding: .6rem 0; }
  /* A card or panel stays on one sheet. */
  .card, .urgent-panel, .hl, .report, .not-sure, .callback, .do-first, .warn, .helpline { break-inside: avoid; }
  /* Tighter on paper. A long step can go on to the next page, but a title stays with what follows it. */
  h2, h3, h4, .item-head { break-after: avoid; }
  .page .section-title::after, .guide-main > h2::after, .guide-main > .section > h2::after, .prose > .section > h2::after, .checklist-wrap > h2::after { margin-top: .3rem; height: 2px; background: #000; }
  .item { border-width: 1px; padding: .6rem .8rem; margin-bottom: .6rem; }
  /* Tap areas are for screens: on paper the title row is only as tall as its words. */
  .item-head { min-height: 0; }
  .meta { margin: .2rem 0; font-size: 1rem; }
  .variant ol { padding-left: 1.4rem; }
  .why { margin-bottom: .4rem; }
  .variant { margin: .3rem 0 .4rem; }
  .variant h4 { margin: .3rem 0 .2rem; }
  .variant li { margin-bottom: .15rem; }
  .variant li, .links li { break-inside: avoid; }
  a { color: var(--ink); }
  /* Paper can't follow a link, so show where it goes. */
  main a.ext[href^="https://"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
  .item[hidden], .variant[hidden] { display: none !important; }
  /* Checklist steps on paper: a box to tick, in place of the screen's checkbox. */
  .item-title::before { content: ""; display: inline-block; width: .9em; height: .9em; border: 2px solid #000; margin-right: .4em; vertical-align: -.1em; }
  /* Recovery steps on paper: a box to tick, and a line to write the date. */
  .step h3::before { content: ""; display: inline-block; width: .9em; height: .9em; border: 2px solid #000; margin-right: .4em; vertical-align: -.1em; }
  .step h3 .now-tag { display: inline-block; margin: 0 .4em 0 0; } /* on the box's line */
  .step > div::after { content: "Done on: ______________"; display: block; margin-top: .4rem; }
}