/* Self-hosted web fonts (latin subset from Google Fonts, SIL Open Font License; source URL in site.json
   fonts_css_google). Red Hat Display (variable) for headings, Red Hat Text (variable) for text, Red Hat Mono 500
   for labels, dates and counts. Same origin: no extra connections before text paints. */
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/redhat-display-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/redhat-text-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/redhat-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Local fallbacks sized close to the web fonts so the swap barely moves text. */
@font-face { font-family: "Red Hat Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 101%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
/* Red Hat Mono is not preloaded (few pages use it), so it swaps in late: without this, the /get-help/ form shifted
   (CLS 0.034). Menlo, Courier New and DejaVu Sans Mono all advance 0.6em like Red Hat Mono; the overrides copy its
   vertical metrics (ascent 1018, descent 305 per 1000), so the swap moves nothing. */
@font-face { font-family: "Red Hat Mono Fallback"; src: local("Menlo"), local("Courier New"), local("CourierNewPSMT"), local("DejaVu Sans Mono"), local("Liberation Mono"), local("Droid Sans Mono"); size-adjust: 100%; ascent-override: 101.8%; descent-override: 30.5%; line-gap-override: 0%; }

/* Septic 2030 design system, v2 (2026-11-01, docs/ART-DIRECTION-septic2030.md section 2).
   Clear water, not paper: crisp white and cool grey surfaces, deep lagoon navy ink, clear-water teal as the brand,
   seagrass green for "you are fine", and ONE urgency color (signal red) used only for deadline and alert moments.
   No beige, cream, sand, tan or orange. Light theme only. Diagrams and tools use these tokens, never raw hex. */
:root {
  /* brand tokens (use these in new work) */
  --navy: #071e2c;          /* darkest surface: footer, deadline bar, home hero scrim */
  --brand: #00727e;         /* clear-water teal: buttons, links, active states (5.7:1 on white) */
  --brand-deep: #063a4a;    /* dark teal-navy surface: fact strip, CTA band */
  --brand-hover: #005d68;
  --water: #e6f5f6;         /* pale aqua tint: callouts, selected pills, diagram water fills */
  --water-2: #bfe6e8;       /* mid aqua: diagram fills, borders on water */
  --seagrass: #2e7d4f;      /* "you are fine" / outside the area / pass */
  --seagrass-soft: #e7f3ec;
  --alert: #d4213d;         /* signal red: deadline, North IRL, urgent callouts ONLY (5.1:1 on white) */
  --alert-ink: #b5172f;     /* red for small text on white */
  --alert-soft: #fdecee;    /* urgent callout background */
  --on-dark: #e8f1f5;       /* text on navy / brand-deep */
  --on-dark-2: #b8cad6;     /* secondary text on dark */
  --on-dark-accent: #5fd4d6;/* eyebrows, links and numbers on dark (9.6:1 on navy) */
  --on-dark-alert: #ff7a8a; /* urgent numbers on dark (6.8:1 on navy) */
  /* base tokens shared with base.css */
  --bg: #ffffff;
  --panel: #f2f5f7;
  --card: #ffffff;
  --ink: #0b2233;
  --ink-2: #475a69;
  --line: #dde4e9;
  --line-strong: #a7b5bf;
  --link: var(--brand);
  --focus: #0b8a96;
  --accent: var(--brand);
  --accent-on: #ffffff;
  --accent-hover: var(--brand-hover);
  --accent-ink: var(--brand-hover);
  --ok: var(--seagrass);
  --warn: var(--alert);
  --warn-ink: var(--alert-ink);
  --bad: var(--alert-ink);
  /* legacy names from v1, kept as aliases so older partials keep working; do not use in new work */
  --tannin: var(--alert);
  --lagoon: var(--brand);
  --lagoon-deep: var(--brand-deep);
  --font-body: "Red Hat Text", "Red Hat Fallback", system-ui, sans-serif;
  --font-head: "Red Hat Display", "Red Hat Fallback", system-ui, sans-serif;
  --font-mono: "Red Hat Mono", "Red Hat Mono Fallback", ui-monospace, Menlo, monospace;
  --fw-head: 750;
  --ls-head: -0.022em;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-btn: 10px;
  --maxw: 1280px;
  --fs-h1: clamp(2.2rem, 4.8vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 2.7vw, 2.15rem);
  --header-bg: rgba(255, 255, 255, .96);
  --footer-bg: var(--navy);
  --input-bg: #ffffff;
  --progress: var(--brand);
}
h1, h2, h3 { font-family: var(--font-head); }
h3 { font-size: 1.2rem; }
.eyebrow { color: var(--accent-ink); font-size: .74rem; }
a { color: var(--link); }
.btn--sm { min-height: 40px; padding: .45rem 1rem; font-size: .95rem; }
.btn--primary { box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.btn--ghost { border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--card); }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; }
.logo__mark { flex: none; color: var(--navy); }
.logo__text { display: grid; line-height: 1.05; }
.logo__word { font: 800 1.34rem/1 var(--font-head); letter-spacing: -0.025em; }
.logo__word b { color: var(--brand); font-weight: 800; }
.logo__tag { font: 500 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: .3rem; }
.site-nav a { font-size: .95rem; }
.site-nav a[aria-current="page"] { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
@media (min-width: 860px) and (max-width: 1120px) { .site-nav ul { gap: .1rem .9rem; } .site-nav a { font-size: .88rem; } }

/* ---------- home hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4.25rem) 0 clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line);
  background: var(--panel); }
.hero__contours { position: absolute; inset: 0; pointer-events: none; color: var(--lagoon); opacity: .16; }
.hero__contours svg { width: 100%; height: 100%; }
.hero__contours path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.hero__grid { position: relative; display: grid; gap: 2rem 4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr); } }
.hero h1 { max-width: 13em; margin-bottom: .6em; }
.hero .lede { max-width: 38em; margin-bottom: 1.5rem; color: var(--ink); opacity: .86; }
.hero__cite { color: var(--ink-2); margin: 1rem 0 0; }
.hero__cite [data-countdown]:not(:empty) { display: inline-block; margin-left: .35rem; font-family: var(--font-mono); font-size: .8rem; color: var(--accent-ink); }
.deadline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-top: 2px solid var(--ink); }
.deadline > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.deadline dt { font: 500 .72rem/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: .15rem; }
.deadline dd { margin: 0; font-weight: 600; }

/* ---------- address checker ---------- */
.checker { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(1.1rem, 3vw, 1.75rem);
  box-shadow: 0 18px 40px -22px rgba(7, 30, 44, .45), 0 2px 0 rgba(7, 30, 44, .04); }
.checker::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--navy) 0 55%, var(--brand) 55% 100%); }
.checker__title { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: .35rem 0 .3rem; }
.checker__sub { color: var(--ink-2); margin: 0 0 1rem; }
.checker__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
@media (min-width: 480px) { .checker__row { grid-template-columns: minmax(0, 1fr) auto; } }
.checker__row input { min-height: 52px; font-size: 1.05rem; border-radius: 12px; border-width: 1.5px; }
.checker__row .btn { min-height: 52px; padding: .7rem 1.6rem; font-size: 1.05rem; }
.checker__status { min-height: 1.4em; margin: .5rem 0 0; color: var(--ink-2); font-family: var(--font-mono); font-size: .8rem; }
.checker__fine { color: var(--ink-2); margin: .75rem 0 0; }
.checker__result { margin-top: .75rem; }
.result { border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 1rem 1.1rem 1.1rem; border-left: 6px solid var(--line-strong); }
.result--in { border-left-color: var(--tannin); }
.result--out, .result--ok { border-left-color: var(--seagrass); }
.result--unk { border-left-color: var(--line-strong); }
.result__kicker { font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .35rem; overflow-wrap: anywhere; }
.result__head { font-size: 1.25rem; margin: 0 0 .75rem; outline: none; }
.result--in .result__head { color: var(--alert-ink); }
.result--out .result__head, .result--ok .result__head { color: var(--ok); }
.result__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0 0 .85rem; font-size: .93rem; }
.result__facts dt { color: var(--ink-2); }
.result__facts dd { margin: 0; font-weight: 600; }
.result__points { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .95rem; }
.result__points li + li { margin-top: .45rem; }
.result__note { font-size: .88rem; color: var(--warn-ink); }
.result__link { align-self: center; font-weight: 600; }
.result__fine { font-size: .78rem; color: var(--ink-2); margin: .85rem 0 0; }

/* ---------- fact strip ---------- */
.facts { background: var(--lagoon-deep); color: var(--on-dark); border-bottom: 0; }
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 640px) { .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts__item { display: grid; gap: .25rem; padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 1024px) { .facts__item { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .12); padding: .4rem 1.5rem; } .facts__item:first-child { padding-left: 0; } .facts__item:last-child { border-right: 0; } }
.facts__item + .facts__item { margin-top: 0; }
.facts__value { font: 650 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--font-head); color: #ffffff; }
.facts__item:first-child .facts__value { color: var(--on-dark-accent); }
.facts__label { font-size: .92rem; color: var(--on-dark-2); }
.facts__src { font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--on-dark-2); }
.facts__src:hover { color: #ffffff; }

/* ---------- map ---------- */
.map-split__body { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .map-split__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.irl-map { padding: .75rem; background: var(--card); }
.irl-map svg { max-height: 640px; }
.m-sea { fill: #d6eef0; }
.m-county { fill: #eef2f4; stroke: #b4c0c8; stroke-width: .9; }
.m-county--in { fill: #ffffff; stroke: #7d8d98; }
.m-area { fill: var(--lagoon); fill-opacity: .82; stroke: var(--lagoon-deep); stroke-width: .5; }
.m-area--north { fill: var(--brand-deep); fill-opacity: .85; stroke: var(--navy); }
.m-clabel { font: 500 9px var(--font-mono); letter-spacing: .1em; fill: #8597a3; }
.m-clabel--in { fill: var(--ink); font-size: 10px; }
.m-plabel { font: italic 600 11px var(--font-head); fill: var(--lagoon-deep); }
.m-city { fill: var(--ink); stroke: #fff; stroke-width: 1.2; }
.m-ctext { font: 600 10.5px var(--font-body); fill: var(--ink); paint-order: stroke; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round; }
.irl-map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.m-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.m-leg { display: inline-flex; align-items: center; gap: .4rem; margin-right: .9rem; font-weight: 600; color: var(--ink); }
.m-note { display: block; width: 100%; margin-top: .3rem; }
.m-key--area { background: var(--lagoon); } .m-key--north { background: var(--brand-deep); } .m-key--out { background: #eef2f4; border: 1px solid #b4c0c8; }
.map-split__counts h3 { margin-top: 0; }

/* ---------- cards ---------- */
.guide-cards, .county-cards, .type-cards { --gap: 1rem; }
.guide-card, .county-card { position: relative; display: flex; flex-direction: column; gap: .35rem; background: var(--card); padding: 1.2rem 1.25rem 1.3rem; transition: border-color .2s, transform .2s; }
.guide-card:hover, .county-card:hover { transform: translateY(-2px); }
.guide-card h3 { margin: 0; font-size: 1.12rem; }
.guide-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.guide-card__k { font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.county-cards { margin: 2rem 0 1rem; }
.county-card__n { font: 650 2.2rem/1 var(--font-head); color: var(--lagoon-deep); }
.county-card__k { font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; }
.county-card h2 { font-size: 1.35rem; margin: 0; }
.county-card p { margin: 0; color: var(--ink-2); }
.type-card { background: var(--card); }
.type-card__n { font: 800 2rem/1 var(--font-head); color: var(--brand); margin: 0 0 .5rem; }
.type-card h3 { margin-bottom: .4rem; }
.type-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.split__body > .grid { margin: 0 0 1rem; }

/* ---------- article bits ---------- */
.split__body blockquote { font: 500 1.12rem/1.55 var(--font-head); border-left-color: var(--brand); color: var(--ink); background: var(--water); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; }
.split__body ol > li::marker { font-family: var(--font-mono); color: var(--accent-ink); }
.split__body strong { color: var(--ink); }
.page-head { background: var(--panel); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--lagoon-deep); border: 0; color: var(--on-dark); border-radius: 16px; }
.cta-band h2 { color: #ffffff; }
.cta-band .eyebrow { color: var(--on-dark-accent); }
.cta-band__body > p { color: var(--on-dark-2); }
.cta-band .btn--primary { background: var(--on-dark-accent); border-color: var(--on-dark-accent); color: var(--navy); }
.cta-band .btn--primary:hover { background: #ffffff; border-color: #ffffff; }
.cta-band .btn--ghost { color: #ffffff; border-color: rgba(255, 255, 255, .5); }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.cta-band :focus-visible { outline-color: var(--on-dark-accent); }

/* ---------- calculator ---------- */
.calc { background: var(--card); border-radius: 16px; padding: clamp(1.1rem, 3vw, 1.75rem); display: grid; gap: 1.25rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .calc__title { grid-column: 1 / -1; } }
.calc__title { margin: 0; }
.calc__form { display: grid; gap: 1rem; }
.calc__path { display: grid; gap: .1rem; }
.calc__range { display: block; }
.calc__fin { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.calc__out { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; align-self: start; }
.calc__num { display: grid; gap: .15rem; margin-bottom: 1rem; }
.calc__k { font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.calc__v { font: 650 clamp(2rem, 4vw, 2.75rem)/1.05 var(--font-head); color: var(--lagoon-deep); }
.calc__v--sm { font-size: 1.5rem; }
.calc__bar { height: 10px; border-radius: 999px; background: #d6eef0; overflow: hidden; margin: .25rem 0 .75rem; }
.calc__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); transition: width .3s; }

/* ---------- request form ---------- */
.form-card { background: var(--card); border-radius: 16px; padding: clamp(1rem, 3vw, 1.75rem); }
.steps-nav { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; counter-reset: st; }
.steps-nav li { counter-increment: st; font-size: .82rem; font-weight: 600; color: var(--ink-2); padding-top: .55rem; border-top: 4px solid var(--line); margin: 0; }
.steps-nav li::before { content: counter(st) ". "; font-family: var(--font-mono); }
.steps-nav li[aria-current="step"] { color: var(--ink); border-top-color: var(--brand); }
.steps-nav li.is-done { color: var(--ink); border-top-color: var(--lagoon); }
.form-step { border: 0; padding: 0; }
.form-step > legend { font: 650 1.2rem/1.3 var(--font-head); padding: 0; margin-bottom: 1rem; outline: none; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills--stack { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pills--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pill { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .6rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; font-size: .95rem; line-height: 1.3; }
.pill input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }
.pill:has(input:checked) { border-color: var(--accent); background: var(--water); box-shadow: inset 0 0 0 1px var(--accent); }
.pill:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.checks { border: 0; padding: 0; }
.checks > legend { padding: 0; margin-bottom: .35rem; }
.prefilled { background: var(--water); border: 1px solid var(--water-2); border-radius: 10px; padding: .7rem .9rem; color: var(--lagoon-deep); }
.review { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; font-size: .92rem; background: var(--bg); border-radius: 10px; padding: .9rem 1rem; margin: 0; }
.review dt { color: var(--ink-2); } .review dd { margin: 0; font-weight: 600; }
.consent .choice span { font-size: .88rem; line-height: 1.5; }
.success { background: var(--card); border-color: var(--seagrass); }
.form-layout__aside ol { padding-left: 1.2rem; }

/* ---------- footer ---------- */
.site-footer { color: var(--on-dark-2); border-top: 0; padding-top: 3rem; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: #ffffff; }
.site-footer h2 { color: var(--on-dark-accent); font-family: var(--font-mono); font-weight: 500; font-size: .72rem; }
.site-footer li + li { margin-top: .4rem; }
.logo--footer { margin: 0 0 .75rem; color: #fff; }
.logo--footer .logo__word b { color: var(--on-dark-accent); }
.site-footer__legal { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); color: var(--on-dark-2); }
.site-footer :focus-visible { outline-color: var(--on-dark-accent); }

/* ---------- small screens ---------- */
/* phones and tablets: eyebrow, H1, lede, then the checker, then the deadline facts */
@media (max-width: 999px) {
  .hero .hero__grid { display: flex; flex-direction: column; gap: 0; }
  .hero__text { display: contents; }
  .hero__text > .eyebrow { order: 1; } .hero__text > h1 { order: 2; margin-bottom: .45em; } .hero__text > .lede { order: 3; }
  .hero__tool { order: 4; margin-bottom: 1.5rem; }
  .hero__text > .deadline { order: 5; } .hero__text > .hero__cite { order: 6; } .hero__text > .placed { order: 7; }
}
@media (max-width: 480px) { .deadline > div { grid-template-columns: 5.2rem minmax(0, 1fr); gap: .6rem; } .result__facts { grid-template-columns: minmax(0, 1fr); } .result__facts dt { margin-top: .35rem; } }
@media print { .checker, .calc, .hero__contours { display: none !important; } }
.site-nav a.btn--primary { color: var(--accent-on); padding: .45rem 1.1rem; }
.site-nav a.btn--primary:hover { color: var(--accent-on); }
.map-split .split__head h2, .guides .split__head h2 { position: static; }
.map-split__body .irl-map svg { max-height: 560px; margin: 0 auto; }

.checker__try { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .9rem 0 0; font-size: .85rem; color: var(--ink-2); }
.checker__try button { font: 600 .85rem/1 var(--font-body); color: var(--link); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .8rem; min-height: 36px; cursor: pointer; }
.checker__try button:hover { border-color: var(--link); }
.map-split .split__head p { margin-top: .9rem; }


/* =====================================================================================================
   v2 components (2026-11-01, docs/ART-DIRECTION-septic2030.md sections 2 and 4)
   ===================================================================================================== */
.btn { font-weight: 700; letter-spacing: .005em; }
.btn--lg { min-height: 54px; padding: .85rem 1.5rem; font-size: 1.06rem; }
.btn--ghost { color: var(--ink); border-color: var(--ink); }

/* ---------- sitewide deadline bar ---------- */
.dbar { background: var(--navy); color: var(--on-dark); font-size: .92rem; }
.dbar__in { display: flex; align-items: center; justify-content: center; gap: .35rem 1.25rem; flex-wrap: wrap; min-height: 40px; padding-top: .35rem; padding-bottom: .35rem; text-align: center; }
.dbar__txt { margin: 0; }
.dbar__n { font-weight: 700; color: #ffffff; white-space: nowrap; }
.dbar__n b { font: 800 .98rem/1 var(--font-head); letter-spacing: -.01em; display: inline-block; color: #ffffff; background: var(--alert); padding: .18rem .45rem; border-radius: 6px; margin-right: .2rem; }
.dbar__until { color: var(--on-dark); }
.dbar__cta { color: var(--on-dark-accent); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.dbar__cta:hover { color: #ffffff; }
.dbar :focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 2px; }
@media (max-width: 599px) { .dbar__cta { display: none; } .dbar__until { display: block; font-size: .84rem; color: var(--on-dark-2); } .dbar__in { min-height: 0; } }
@media print { .dbar { display: none; } }

/* ---------- home hero: video behind, navy scrim, white text, light checker card ---------- */
.hero--bg { position: relative; isolation: isolate; background: var(--navy); color: var(--on-dark); border-bottom: 0; padding: clamp(2.25rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 4rem); overflow: hidden; }
.hero--bg > .hero-media { position: absolute; inset: 0; margin: 0; z-index: -2; }
[data-hero].hero--bg > .hero-media .hero-media__frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; background: var(--navy); }
.hero--bg > .hero-media .hero-media__frame picture { position: absolute; inset: 0; }
.hero--bg .hero-media__img { width: 100%; height: 100%; object-fit: cover; }
.hero--bg .hero__video { width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; } /* 1px inside the poster: see motion.css */
.hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 30, 44, .93) 0%, rgba(7, 30, 44, .86) 38%, rgba(7, 30, 44, .55) 64%, rgba(7, 30, 44, .30) 100%),
              linear-gradient(0deg, rgba(7, 30, 44, .55) 0%, rgba(7, 30, 44, 0) 40%); }
.hero--bg .hero__grid { position: relative; }
@media (min-width: 1000px) { .hero--bg .hero__grid { grid-template-columns: minmax(0, 6.2fr) minmax(0, 5fr); align-items: center; } }
.hero--bg h1 { color: #ffffff; max-width: 14em; text-wrap: balance; }
.hero--bg .eyebrow { color: var(--on-dark-accent); }
.hero--bg .lede { color: var(--on-dark); opacity: 1; max-width: 36em; }
.hero--bg a:not(.btn) { color: var(--on-dark-accent); }
.hero--bg a:not(.btn):hover { color: #ffffff; }
.hero--bg :focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 2px; }
.hero--bg .btn--primary { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.hero--bg .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.hero--bg .btn--ghost { color: #ffffff; border-color: rgba(255, 255, 255, .75); background: rgba(7, 30, 44, .35); }
.hero--bg .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #ffffff; }
.hero__urgency { margin: 0 0 1.5rem; display: grid; gap: .9rem; }
.countdown { display: flex; align-items: center; gap: .9rem 1.1rem; margin: 0; flex-wrap: wrap; }
.countdown__n { font: 800 clamp(2.5rem, 5.6vw, 3.8rem)/1 var(--font-head); letter-spacing: -.03em; color: #ffffff; background: var(--alert); padding: .3rem .7rem .35rem; border-radius: 12px; font-variant-numeric: tabular-nums; }
.countdown__l { font: 700 1.05rem/1.35 var(--font-head); color: #ffffff; max-width: 17em; }
.countdown__l time { color: var(--on-dark-alert); white-space: nowrap; }
.hero__irl { margin: 0; color: var(--on-dark); max-width: 38em; font-size: .98rem; line-height: 1.55; padding-left: .9rem; border-left: 3px solid var(--on-dark-accent); }
.hero__irl-k { font: 500 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-accent); margin-right: .35rem; }
.hero__ctas { margin: 0 0 1.75rem; }
.hero--bg .deadline { border-top: 1px solid rgba(255, 255, 255, .25); max-width: 40em; }
.hero--bg .deadline > div { border-bottom-color: rgba(255, 255, 255, .14); }
.hero--bg .deadline dt { color: var(--on-dark-2); }
.hero--bg .deadline dd { color: #ffffff; }
.hero--bg .hero__cite { color: var(--on-dark-2); }
.hero--bg .hero-media__toggle { position: absolute; right: 16px; bottom: 16px; top: auto; z-index: 3; }
.hero--bg .checker { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); border-color: transparent; }
@media (max-width: 999px) {
  .hero--bg { padding-top: 0; }
  .hero--bg > .hero-media { bottom: auto; height: clamp(296px, 58vh, 456px); }
  .hero__scrim { bottom: auto; height: clamp(300px, 58vh, 460px);
    background: linear-gradient(180deg, rgba(7, 30, 44, .66) 0%, rgba(7, 30, 44, .74) 55%, var(--navy) 100%); }
  .hero--bg .hero__grid { padding-top: clamp(2rem, 9vw, 3.5rem); }
  .hero--bg .hero__text > .hero__urgency { order: 4; } .hero--bg .hero__tool { order: 5; } .hero--bg .hero__text > .hero__ctas { order: 6; }
  .hero--bg .hero__ctas .btn--primary { display: none; } /* the checker's own button is the primary on phones */
  .hero--bg .hero__text > .deadline { order: 7; } .hero--bg .hero__text > .hero__cite { order: 8; } .hero--bg .hero__tool { margin-bottom: 1.25rem; }
  .hero--bg .hero-media__toggle { top: 12px; bottom: auto; }
}
@media (max-width: 480px) { .countdown__n { font-size: 2.3rem; } .hero__ctas .btn { width: 100%; } }
html.rm .hero--bg .hero__video { display: none !important; }

/* ---------- page heads: cool grey band, photo below ---------- */
.page-head { background: var(--panel); border-bottom: 0; }
.page-head .hero-media__frame { box-shadow: 0 24px 48px -32px rgba(7, 30, 44, .55); }
.hero-media__cap { color: var(--ink-2); }
.photo-note { color: var(--ink-2); }

/* ---------- urgency callout (tools/urgency.html) ---------- */
.urgent { margin: 1.75rem 0; padding: 1.25rem 1.4rem 1.3rem; border-radius: var(--radius); background: var(--alert-soft); border: 1px solid #f5c2c9; border-left: 6px solid var(--alert); max-width: 52rem; }
.urgent--plan { background: var(--water); border-color: var(--water-2); border-left-color: var(--brand); }
.urgent__k { margin: 0 0 .35rem; font: 500 .74rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--alert-ink); }
.urgent--plan .urgent__k { color: var(--brand-hover); }
.urgent__t { margin: 0 0 .4rem; font: 750 1.22rem/1.3 var(--font-head); color: var(--ink); }
.urgent__b { margin: 0 0 .6rem; color: var(--ink); }
.urgent__f { margin: 0 0 .9rem; color: var(--ink-2); }
.placed--tool > .urgent { margin-left: auto; margin-right: auto; }

/* ---------- mid-page CTA (tools/cta-inline.html) ---------- */
.cta-inline { display: grid; gap: 1rem 2rem; align-items: center; margin: 2rem 0; padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--navy); color: var(--on-dark); }
@media (min-width: 900px) { .cta-inline { grid-template-columns: minmax(0, 1fr) auto; padding: 1.5rem 2rem; } }
.cta-inline__t { margin: 0 0 .3rem; font: 750 1.25rem/1.3 var(--font-head); color: #ffffff; }
.cta-inline__b { margin: 0; color: var(--on-dark-2); max-width: 42em; }
.cta-inline .btn--ghost { color: #ffffff; border-color: rgba(255, 255, 255, .7); }
.cta-inline .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.cta-inline :focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 2px; }
@media print { .cta-inline, .urgent .btn-row { display: none; } }

/* ---------- in-body photos ---------- */
.placed--media .media { margin: 2rem 0; }
.media img { border-radius: var(--radius); }
.media figcaption { color: var(--ink-2); font-size: .9rem; margin-top: .55rem; }
.site-footer .photo-note { color: var(--on-dark-2); margin: 1.5rem 0 0; }
@media (min-width: 900px) { .media--wide img { aspect-ratio: 21 / 9; width: 100%; height: auto; object-fit: cover; } }

/* =====================================================================================================
   UX pass (2026-11-01, docs/UX-REVIEW-septic2030.md): readability for older readers on phones, 44px tap
   targets, the checker result on the dark home hero, stacked table cards on phones, form reassurance.
   ===================================================================================================== */

/* ---------- type: 18px body on phones, no form or table text under 16px ---------- */
@media (max-width: 640px) {
  :root { --fs-body: 1.125rem; }
  .small, small { font-size: .9375rem; }
  .toc { font-size: 1rem; }
}
.pill { font-size: 1.0625rem; }
.field__label { font-size: 1.0625rem; }
.field__hint { font-size: .9375rem; }
.field__error { font-size: .95rem; font-weight: 600; }
table { font-size: 1rem; }
.steps-nav li { font-size: .95rem; }
.checker__fine, .result__fine { font-size: .9rem; }
.result__points, .result__facts { font-size: 1rem; }

/* ---------- tap targets: 44px minimum for every control that is not a link inside a sentence ---------- */
.btn--sm { min-height: 44px; }
.quiz__all summary { min-height: 44px; }
.faq summary { min-height: 44px; padding: .55rem 0; }
.site-nav a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
.dbar__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; }
.toc a { display: inline-block; padding: .5rem 0; min-height: 44px; }
.toc li + li { margin-top: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.logo { min-height: 44px; }
.site-footer li + li { margin-top: 0; }
.facts__src { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.result__link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- deadline bar: two short lines on phones instead of three ---------- */
@media (max-width: 599px) { .dbar__until { display: inline; font-size: .9rem; } .dbar__txt { line-height: 1.45; } .dbar__cta { display: none; } }

/* ---------- checker: light card inside the dark home hero (results were white-on-white) ---------- */
.checker { color: var(--ink); }
.hero--bg .checker a:not(.btn) { color: var(--link); }
.hero--bg .checker a:not(.btn):hover { color: var(--brand-hover); }
.hero--bg .checker :focus-visible { outline-color: var(--focus); }
.hero--bg .checker .btn--ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.hero--bg .checker .btn--ghost:hover { background: var(--panel); border-color: var(--ink); }
.checker__status:empty { min-height: 0; margin: 0; }
.result__facts dd { color: var(--ink); }
.result__points { color: var(--ink); }
.result .btn-row { align-items: center; }
.result__reassure { margin: .75rem 0 0; font-size: .95rem; color: var(--ink-2); }
@media (max-width: 480px) {
  .result__facts { grid-template-columns: 7.2rem minmax(0, 1fr); gap: .35rem .75rem; }
  .result__facts dt { margin-top: 0; }
  .result .btn-row .btn { width: 100%; }
}

/* ---------- home hero on phones: the checker comes right after the lede, the day count after it ---------- */
@media (max-width: 999px) {
  .hero--bg .hero__tool { order: 4; }
  .hero--bg .hero__text > .hero__urgency { order: 5; margin-bottom: 1.25rem; }
}

/* ---------- wide tables become stacked cards on phones (4+ columns; td data-label from the markdown renderer) ---------- */
@media (max-width: 639px) {
  .table-wrap:has(> table thead th:nth-child(4)) { overflow: visible; border: 0; border-radius: 0; background: none; }
  .table-wrap:has(> table thead th:nth-child(4)) + .table-hint { display: none; }
  .table-wrap > table:has(thead th:nth-child(4)), .table-wrap > table:has(thead th:nth-child(4)) tbody { display: block; }
  .table-wrap > table:has(thead th:nth-child(4)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap > table:has(thead th:nth-child(4)) tr { display: block; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; padding: .85rem 1rem .4rem; margin: 0 0 .85rem; }
  .table-wrap > table:has(thead th:nth-child(4)) td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); text-align: left; }
  .table-wrap > table:has(thead th:nth-child(4)) td::before { content: attr(data-label); font: 500 .78rem/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); padding-top: .1rem; }
  .table-wrap > table:has(thead th:nth-child(4)) td:first-child { display: block; font: 750 1.15rem/1.3 var(--font-head); color: var(--ink); padding: 0 0 .5rem; }
  .table-wrap > table:has(thead th:nth-child(4)) td:first-child::before { content: none; }
  .table-wrap > table:has(thead th:nth-child(4)) td:last-child { border-bottom: 0; }
  .table-wrap > table:has(thead th:nth-child(4)) td:empty { display: none; }
  .table-wrap > table:has(thead th:nth-child(4)) td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; margin: -.6rem 0; }
  .table-wrap > table:has(thead th:nth-child(4)) td.num { text-align: left; }
}

/* ---------- request form: reassurance next to the steps, clearer progress ---------- */
.form-reassure { list-style: none; margin: 0 0 1.1rem; padding: .7rem .9rem; display: grid; gap: .2rem; background: var(--water); border: 1px solid var(--water-2); border-radius: 10px; font-size: 1rem; color: var(--ink); }
.form-reassure li { margin: 0; padding-left: 1.6rem; position: relative; }
.form-reassure li::before { content: ""; position: absolute; left: .2rem; top: .35em; width: .75rem; height: .45rem; border-left: 2.5px solid var(--seagrass); border-bottom: 2.5px solid var(--seagrass); transform: rotate(-45deg); }
.form-reassure a { color: var(--brand-hover); }
.steps-nav li.is-done::before { content: "\2713  "; color: var(--seagrass); }
.form-step .btn-row .btn--primary { min-width: 10rem; }
@media (max-width: 480px) { .form-step .btn-row { flex-direction: column-reverse; } .form-step .btn-row .btn { width: 100%; } }
.calc__fin-l { display: grid; gap: .2rem; font-size: .9rem; color: var(--ink-2); }
.checker__result:not([hidden]) ~ .checker__fine { display: none; } /* the result card carries its own source line */
/* request form on phones: less page head before the first field */
@media (max-width: 640px) { .tpl-form .page-head { padding-top: 1.5rem; } .tpl-form .page-head .meta-line, .tpl-form .page-head .lede { display: none; } }

/* ---------- checker: address suggestions, busy button, progress panel (2026-11-01) ----------
   Tokens only. The progress steps change only when a real lookup starts or ends (checker.js). */
.checker__field { position: relative; min-width: 0; }
.checker__field input { width: 100%; }
.checker__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem 0 0; list-style: none;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 36px -18px rgba(7, 30, 44, .45);
  max-height: min(22rem, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.checker__list[hidden] { display: none; }
.checker__opt { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: 52px; padding: .45rem .95rem; cursor: pointer;
  border-left: 3px solid transparent; line-height: 1.3; }
.checker__opt + .checker__opt { border-top: 1px solid var(--line); }
.checker__opt:hover, .checker__opt[aria-selected="true"] { background: var(--water); border-left-color: var(--brand); }
.checker__opt-main { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.checker__opt-sub { font-size: .9rem; color: var(--ink-2); overflow-wrap: anywhere; }
.checker__by { padding: .45rem .95rem .55rem; font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); border-top: 1px solid var(--line); text-align: right; }
.checker__btn { gap: .55rem; }
.checker__spin { display: none; width: 1.05em; height: 1.05em; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; flex: none; }
.checker__btn.is-busy .checker__spin { display: inline-block; animation: s30-spin .8s linear infinite; }
.checker__btn:disabled { cursor: progress; opacity: 1; }
.checker__btn.is-busy { background: var(--brand-hover); border-color: var(--brand-hover); }
.checking { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: .9rem; padding: 1rem 1.1rem;
  border: 1px solid var(--water-2); border-radius: 12px; background: var(--water); scroll-margin: 6rem 0 1rem; }
.checking[hidden] { display: none; }
.checking__water { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 1px solid var(--water-2); overflow: hidden; }
.checking__ring { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--brand); opacity: 0;
  transform: scale(.15); animation: s30-ripple 2.4s cubic-bezier(.2, .6, .35, 1) infinite; }
.checking__ring:nth-child(2) { animation-delay: .8s; }
.checking__ring:nth-child(3) { animation-delay: 1.6s; }
.checking__drop { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand);
  animation: s30-drop 2.4s ease-in-out infinite; }
.checking__title { margin: .1rem 0 .45rem; font: var(--fw-head) 1.05rem/1.3 var(--font-head); color: var(--ink); }
.checking__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.checking__steps li { display: flex; align-items: center; gap: .6rem; min-height: 1.9rem; color: var(--ink-2); font-size: .98rem; }
.checking__steps li.is-active { color: var(--ink); font-weight: 650; }
.checking__steps li.is-done { color: var(--ink); }
.checking__mark { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); }
.is-active > .checking__mark { border-color: var(--brand); border-top-color: transparent; animation: s30-spin .9s linear infinite; }
.is-done > .checking__mark { border-color: var(--brand); background: var(--brand); }
.is-done > .checking__mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checking__slow { margin: .6rem 0 0; font-weight: 600; color: var(--brand-hover); }
.checking__slow[hidden] { display: none; }
.result__head { scroll-margin-top: 5.5rem; }
@keyframes s30-spin { to { transform: rotate(360deg); } }
@keyframes s30-ripple { 0% { opacity: 0; transform: scale(.15); } 15% { opacity: .85; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes s30-drop { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(3px); } }
@media (max-width: 479px) {
  .checking { position: relative; grid-template-columns: minmax(0, 1fr); padding: .9rem; }
  .checking__water { position: absolute; top: .7rem; right: .7rem; width: 40px; height: 40px; }
  .checking__title { padding-right: 3rem; }
}
/* the answer heading takes focus only so screen readers land on it; it is not a control */
.checker .result__head:focus, .hero--bg .checker .result__head:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .checker__btn.is-busy .checker__spin, .checking__ring, .checking__drop, .is-active > .checking__mark { animation: none; }
  .checking__ring { opacity: .5; }
  .checking__ring:nth-child(1) { transform: scale(.45); }
  .checking__ring:nth-child(2) { transform: scale(.75); }
  .checking__ring:nth-child(3) { transform: scale(1.05); }
  .checking__drop { transform: none; }
  .is-active > .checking__mark { border-top-color: var(--brand); }
  .is-active > .checking__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
}