/* ============================================================================
   TherapistAtlas — visual identity per docs/design-brief.md and the Claude
   Design comps in docs/TherapistAtlas Design Brief/.

   The register: a calm, well-run public resource. Warm paper and ink, one
   institutional accent (deep pine), a restrained ochre for therapist-facing
   actions, verified-green for status. Newsreader (self-hosted, 2 files) for
   display + long-form; system sans for UI; system mono for record data.

   Zero JS except forms.js on /claim and /waitlist. Mobile-first.

   Accessibility notes (all text pairings computed against WCAG 2.1):
   - Muted text is #6E675B, not the comps' #756E63/#8B8474/#9A9384 — those
     fail 4.5:1 on paper for small text. #6E675B = 5.1:1 on paper, 5.6:1 on
     white, and keeps the same warm-gray temperature.
   - Footer bottom text uses #A79F90 (6.3:1 on #211E19); the comps' #7C7566
     copyright fails at 3.6:1.
   ============================================================================ */

/* ---- Fonts (self-hosted, latin subset) ------------------------------------
   newsreader-latin-var.woff2 is the variable roman (covers 400/500/600),
   newsreader-italic-latin.woff2 is a static 400 italic. ~195 KB total. */
@font-face {
	font-family: "Newsreader";
	src: url("/assets/fonts/newsreader-latin-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	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: "Newsreader";
	src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	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;
}

/* ---- Design tokens --------------------------------------------------------- */
:root {
	/* Surfaces */
	--paper: #F7F4ED;        /* page ground */
	--surface: #FFFFFF;      /* cards, panels */
	--panel: #FBFAF6;        /* panel caps, quiet fills */
	--wash: #F3EFE6;         /* disabled fills */

	/* Ink */
	--ink: #211E19;          /* headings, primary text */
	--text: #3D3833;         /* body */
	--text-2: #5C564D;       /* secondary body */
	--muted: #6E675B;        /* small secondary text — AA-adjusted, see header */

	/* Lines */
	--line: #DFD8CA;         /* card borders */
	--line-soft: #E6E0D4;    /* section rules */
	--line-faint: #EFEAE0;   /* record rows */
	--line-hair: #F0EBE1;    /* in-card hairlines */

	/* Pine — primary accent */
	--pine: #26564A;
	--pine-dark: #1D453B;
	--pine-tint: #EAF0EC;
	--pine-tint-line: #D4E0D8;
	--pine-deep: #2E4C43;    /* chip text on tint */

	/* Status */
	--verified: #256B4E;     /* positive status text */
	--verified-stroke: #2E7D57;
	--error: #B23B2E;
	--error-bg: #FCF3F1;
	--success-bg: #F1F7F3;

	/* Ochre — therapist / founding actions */
	--ochre: #8A6A1F;
	--ochre-dark: #75591A;
	--ochre-text: #6B5623;
	--ochre-head: #4A3A12;
	--cream: #FBF3E1;
	--cream-line: #E7D7AE;
	--cream-btn-ink: #FDF6E6;

	/* Footer (dark ground) */
	--footer-bg: #211E19;
	--footer-panel: #2C2822;
	--footer-line: #3B362E;
	--footer-text: #C9C2B4;
	--footer-soft: #B4AC9D;
	--footer-muted: #A79F90;
	--footer-head: #948C7B;
	--footer-green: #9DC098;
	--footer-green-line: #6E8E6A;
	--footer-green-link: #B7C9B3;

	/* Type */
	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Shape & elevation */
	--r-s: 7px;
	--r: 10px;
	--r-l: 12px;
	--shadow-card: 0 1px 2px rgba(33, 30, 25, 0.04);
	--shadow-raised: 0 1px 3px rgba(33, 30, 25, 0.08);
	--shadow-hover: 0 6px 18px rgba(33, 30, 25, 0.10);
	--shadow-btn: 0 5px 14px rgba(38, 86, 74, 0.30);
	--focus-ring: 0 0 0 3px rgba(38, 86, 74, 0.12);
}

/* ---- Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background: var(--paper);
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .container { padding: 0 24px; } }

main.container { padding-top: 0; padding-bottom: 56px; min-height: 55vh; }
@media (min-width: 700px) { main.container { padding-bottom: 72px; } }

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pine-dark); }

a, button, input, select, summary {
	transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease,
		background-color 0.14s ease, color 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
	a, button, input, select, summary { transition: none; }
}

:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.15;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.5rem); letter-spacing: -0.5px; margin: 0 0 0.75rem; }
h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.5rem); letter-spacing: -0.3px; margin: 2.25rem 0 0.9rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

.mono { font-family: var(--mono); }

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--pine); color: var(--cream-btn-ink);
	padding: 0.5rem 1rem; z-index: 100; border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; }

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
	display: inline-block;
	background: var(--pine); color: #F7F4ED;
	font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
	padding: 0.7rem 1.5rem; border: 0; border-radius: 8px;
	text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--pine-dark); color: #F7F4ED; box-shadow: var(--shadow-btn); transform: translateY(-1px); }
.btn.btn-block { display: block; width: 100%; text-align: center; }

.btn-ochre {
	display: inline-block;
	background: var(--ochre); color: var(--cream-btn-ink);
	font-weight: 600; font-size: 0.92rem;
	padding: 0.65rem 1.15rem; border-radius: 8px; text-decoration: none;
}
.btn-ochre:hover { background: var(--ochre-dark); color: var(--cream-btn-ink); box-shadow: 0 5px 14px rgba(138, 106, 31, 0.28); transform: translateY(-1px); }

/* ---- Header ------------------------------------------------------------------ */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.header-inner {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0.35rem 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
@media (min-width: 900px) {
	.header-inner { flex-wrap: nowrap; gap: 1.4rem; height: 66px; padding-top: 0; padding-bottom: 0; }
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; background: var(--pine); color: var(--paper);
	border-radius: 6px; font-family: var(--serif); font-weight: 600; font-size: 16px;
	letter-spacing: 0.5px;
}
.brand-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; }

.site-nav { display: flex; align-items: center; gap: 2px; order: 3; width: 100%; }
@media (min-width: 900px) { .site-nav { order: 0; width: auto; } }
.site-nav a {
	font-size: 0.9rem; font-weight: 500; color: var(--text);
	text-decoration: none; padding: 0.5rem 0.7rem; border-radius: 6px; white-space: nowrap;
}
.site-nav a:hover { background: var(--line-faint); color: var(--pine); }

.nav-search {
	display: flex; align-items: center;
	background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-s);
	padding: 0 4px 0 10px; height: 38px;
	order: 4; flex: 1 1 100%; max-width: none;
}
@media (min-width: 900px) { .nav-search { order: 0; flex: 1; max-width: 230px; margin-left: auto; } }
.nav-search:focus-within { border-color: var(--pine); box-shadow: var(--focus-ring); }
.nav-search svg { flex-shrink: 0; color: var(--muted); }
.nav-search input {
	border: none; background: none; outline: none;
	font-family: inherit; font-size: 0.875rem; color: var(--ink);
	padding: 0 8px; width: 100%; min-width: 0;
}

.nav-cta {
	flex-shrink: 0; display: inline-flex; align-items: center;
	background: var(--cream); color: var(--ochre-head); border: 1px solid var(--cream-line);
	border-radius: var(--r-s); padding: 0.5rem 0.9rem;
	font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
	margin-left: auto;
}
@media (min-width: 900px) { .nav-cta { margin-left: 0; } }
.nav-cta:hover { background: #F7EBD0; color: var(--ochre-head); box-shadow: 0 4px 12px rgba(122, 94, 30, 0.18); transform: translateY(-1px); }

/* ---- Breadcrumbs --------------------------------------------------------------- */
.breadcrumbs { padding: 1.1rem 0 0.6rem; font-size: 0.845rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--pine); text-decoration: underline; }
.breadcrumbs .sep { margin: 0 0.5rem; color: #C3BBAC; }
.breadcrumbs span:last-child { color: var(--text); }

/* ---- Page head + direct answer -------------------------------------------------- */
.page-head { padding: 0.3rem 0 1.6rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1.7rem; }
.page-head h1 { margin: 0 0 0.85rem; }
.page-head .direct-answer { margin-bottom: 0; }

.direct-answer {
	font-size: 1.03rem; line-height: 1.6; color: #4A453E;
	max-width: 72ch; margin: 0 0 1.6rem;
}
.direct-answer strong { color: var(--ink); font-weight: 600; }

.section-note { color: var(--text-2); font-size: 0.95rem; max-width: 72ch; }

.kicker {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--muted);
}

/* ---- Status marks ----------------------------------------------------------------- */
.verified-pill {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--pine-tint); border: 1px solid var(--pine-tint-line); color: var(--verified);
	font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 100px;
	margin: 0;
}
/* The check glyph is drawn from CSS (data URI) so long browse lists don't pay
   a per-row inline-SVG cost — 806+ rows on the big city pages. */
.verified-mark {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--verified); font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.verified-mark::before {
	content: ""; width: 13px; height: 13px; flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D57' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.status-badge {
	display: inline-flex; align-items: center;
	background: var(--pine); color: var(--paper);
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
	padding: 6px 13px; border-radius: var(--r-s); text-transform: uppercase;
}

/* ---- Chips (specialties) ------------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0.5rem 0 0; list-style: none; }
.chips li {
	font-size: 0.875rem; color: var(--pine-deep);
	background: var(--pine-tint); border: 1px solid var(--pine-tint-line);
	padding: 6px 13px; border-radius: 100px;
}

/* Pill-shaped links (homepage specialty browse) */
.pill-links { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 1rem 0 0; list-style: none; }
.pill-links a {
	display: inline-block; font-size: 0.9rem; color: var(--pine-deep);
	background: var(--surface); border: 1px solid var(--line);
	padding: 8px 15px; border-radius: 100px; text-decoration: none;
}
.pill-links a:hover { border-color: var(--pine); color: var(--pine-dark); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.pill-links .count { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-left: 6px; }

/* ---- Tiles (city / specialty with counts) --------------------------------------------- */
.tile-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px; padding: 0; margin: 1rem 0 0; list-style: none;
}
.tile-grid li { margin: 0; }
.tile {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
	padding: 15px 17px; text-decoration: none; height: 100%;
}
.tile:hover { border-color: var(--pine); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.tile .tile-name { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.tile .tile-count { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); flex-shrink: 0; }

/* ---- Card grids (guides, browse shortcuts) ---------------------------------------------- */
.card-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px; padding: 0; margin: 1rem 0 0; list-style: none;
}
.card-grid li { margin: 0; }
.card {
	display: flex; flex-direction: column; gap: 7px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
	padding: 20px 20px 18px; text-decoration: none; height: 100%;
}
.card:hover { border-color: var(--pine); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card .card-kick {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--muted);
}
.card .card-title { font-family: var(--serif); font-size: 1.13rem; font-weight: 600; color: var(--ink); line-height: 1.28; }
.card .card-sub { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; }

/* ---- Listing cards (browse + search results) ---------------------------------------------- */
.listing-list { padding: 0; margin: 1.25rem 0 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.listing-card {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
	gap: 3px 8px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 11px; padding: 17px 19px; text-decoration: none;
	box-shadow: var(--shadow-card);
}
.listing-card:hover { border-color: var(--pine); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.listing-card .listing-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink); }
.listing-card .listing-meta { flex-basis: 100%; font-size: 0.89rem; color: var(--text-2); }
/* "View profile →" foot row is CSS-generated for the same per-row-weight reason. */
.listing-card::after {
	content: "View profile \2192";
	flex-basis: 100%; text-align: right;
	font-size: 0.82rem; font-weight: 600; color: var(--pine);
	border-top: 1px solid var(--line-hair); padding-top: 10px; margin-top: 9px;
}

.results-count { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: 0; margin: 1.75rem 0 0.75rem; }
.results-count strong { color: var(--ink); }

/* ---- Search forms ------------------------------------------------------------------------- */
.hero-search, .search-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.search-form { margin: 1.25rem 0 1.75rem; }
.search-field {
	flex: 1; min-width: 220px; display: flex; align-items: center;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
	padding: 0 6px 0 16px; height: 54px; box-shadow: var(--shadow-card);
}
.search-field:focus-within { border-color: var(--pine); box-shadow: var(--focus-ring); }
.search-field svg { flex-shrink: 0; color: var(--muted); }
.search-field input {
	border: none; background: none; outline: none;
	font-family: inherit; font-size: 1rem; color: var(--ink);
	padding: 0 12px; width: 100%; min-width: 0;
}
.hero-search .btn, .search-form .btn { height: 54px; padding: 0 26px; font-size: 1rem; border-radius: var(--r); }

/* ---- Homepage ------------------------------------------------------------------------------- */
.hero { padding: 2.6rem 0 2.4rem; }
@media (min-width: 700px) { .hero { padding: 3.6rem 0 3.2rem; } }
.hero .hero-inner { max-width: 760px; }
.hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.8rem; font-weight: 600; color: var(--verified);
	background: var(--pine-tint); border: 1px solid var(--pine-tint-line);
	padding: 6px 13px; border-radius: 100px; margin-bottom: 1.3rem;
}
.hero h1 {
	font-size: clamp(2.1rem, 1.2rem + 4.2vw, 3.25rem);
	line-height: 1.05; letter-spacing: -1px; margin: 0 0 1.2rem;
}
.hero .lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.19rem); line-height: 1.55; color: #4A453E; max-width: 60ch; margin: 0 0 1.8rem; }
.hero-alt { font-size: 0.875rem; color: var(--muted); margin: 0.9rem 0 0; }
.hero-alt a { font-weight: 600; text-decoration: none; }
.hero-alt a:hover { text-decoration: underline; }

.explainer { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-card); }
.explainer-inner {
	display: grid; grid-template-columns: 1fr; gap: 26px;
	padding-top: 1.9rem; padding-bottom: 1.9rem;
}
@media (min-width: 700px) { .explainer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 2.4rem; padding-bottom: 2.4rem; } }
.explain-col { display: flex; gap: 16px; align-items: flex-start; }
.explain-num {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px solid var(--pine); color: var(--pine);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
}
.explain-col h2 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: 0; margin: 0 0 5px; }
.explain-col p { font-size: 0.9rem; line-height: 1.55; color: var(--text-2); margin: 0; }

.home-section { padding-top: 2.6rem; }
.section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	flex-wrap: wrap; gap: 10px; margin-bottom: 0.4rem;
}
.section-head h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); margin: 0; }
.section-head .more-link { font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.section-head .more-link:hover { text-decoration: underline; }

.waitlist-note { color: var(--text-2); font-size: 0.95rem; margin-top: 1rem; }

/* ---- Claim CTA strip & box (cream / ochre) ---------------------------------------------------- */
.claim-strip {
	background: var(--cream); border: 1px solid var(--cream-line); border-radius: 14px;
	padding: 1.75rem 1.6rem; margin: 2.75rem 0 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
}
.claim-strip .claim-strip-body { flex: 1; min-width: 260px; }
.claim-strip .claim-strip-title {
	font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
	color: var(--ochre-head); margin: 0 0 0.4rem;
}
.claim-strip p { font-size: 0.96rem; color: var(--ochre-text); line-height: 1.55; margin: 0; max-width: 60ch; }
.claim-strip .btn-ochre { flex-shrink: 0; }

.claim-box {
	background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-l);
	padding: 1.25rem 1.4rem; margin-top: 20px;
}
.claim-box .claim-box-title {
	font-family: var(--serif); font-size: 1.13rem; font-weight: 600;
	color: var(--ochre-head); margin: 0 0 0.35rem;
}
.claim-box p { font-size: 0.875rem; color: var(--ochre-text); line-height: 1.55; margin: 0 0 0.9rem; }

/* ---- Profile (listing detail) ------------------------------------------------------------------ */
.profile-head { padding: 0.5rem 0 1.8rem; border-bottom: 1px solid var(--line-soft); }
.profile-head .verified-pill { margin-bottom: 0.9rem; }
.profile-head h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.5rem); line-height: 1.08; margin: 0 0 0.4rem; }
.profile-head .subtitle { font-size: 1.06rem; color: var(--text-2); margin: 0; }

.profile-cols { display: flex; flex-wrap: wrap; gap: 36px; padding-top: 2rem; }
.profile-main { flex: 1; min-width: min(100%, 340px); }
.profile-aside { width: 330px; flex: 1; min-width: min(100%, 290px); }

/* License-verification panel — the hero content, presented like a certificate. */
.verify-panel {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
	overflow: hidden; box-shadow: var(--shadow-card);
}
.verify-head {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
	padding: 18px 20px; border-bottom: 2px solid var(--pine); background: var(--panel);
}
@media (min-width: 700px) { .verify-head { padding: 20px 26px; } }
.verify-seal {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid var(--pine); color: var(--pine);
	display: flex; align-items: center; justify-content: center;
}
.verify-head h2 { font-size: 1.28rem; margin: 0; letter-spacing: 0; }
.verify-head .verify-sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.verify-head .status-badge { margin-left: auto; }

.verify-rows { margin: 0; padding: 4px 20px 6px; }
@media (min-width: 700px) { .verify-rows { padding: 6px 26px 8px; } }
.verify-rows .rec-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 12px 0; border-bottom: 1px solid var(--line-faint);
}
.verify-rows .rec-row:last-child { border-bottom: 0; }
.verify-rows dt { margin: 0; font-size: 0.845rem; color: var(--muted); flex-shrink: 0; }
.verify-rows dd { margin: 0; font-size: 0.94rem; color: var(--ink); text-align: right; font-weight: 500; }
.verify-rows dd.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.02em; }
.verify-rows dd .status-ok { color: var(--verified); font-weight: 600; }

.verify-source {
	padding: 15px 20px 18px; margin: 0;
	background: var(--panel); border-top: 1px solid var(--line-faint);
	font-size: 0.845rem; color: var(--text-2); line-height: 1.6;
}
@media (min-width: 700px) { .verify-source { padding: 16px 26px 20px; } }
.verify-source strong { color: var(--text); font-weight: 600; }
.verify-source .mono { color: var(--text); }
.verify-source a { font-weight: 600; }

/* Serif long-form for the about paragraph */
.about-body { font-family: var(--serif); font-size: 1.1rem; line-height: 1.62; color: #3A352F; max-width: 62ch; }
.about-body p { margin: 0 0 0.95rem; }
.about-body p:last-child { margin-bottom: 0; }

/* Related browse cards */
.rel-cards {
	margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.rel-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r); text-decoration: none;
}
.rel-card:hover { border-color: var(--pine); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.rel-card .rel-kick {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--muted);
}
.rel-card .rel-title { font-size: 0.9rem; font-weight: 600; color: var(--pine); }

/* Contact card */
.contact-card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
	padding: 20px 22px; box-shadow: var(--shadow-card);
}
.contact-card h2 {
	font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
	margin: 0 0 1rem;
}
.contact-card .c-row { padding: 0 0 13px; margin-bottom: 13px; border-bottom: 1px solid var(--line-hair); }
.contact-card .c-row:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.contact-card .c-label {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.contact-card .c-value { font-size: 0.9rem; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.contact-card .c-value a { text-decoration: none; font-weight: 600; }
.contact-card .c-value a:hover { text-decoration: underline; }
.contact-card .btn { margin-top: 18px; }
.contact-card .contact-note { font-size: 0.75rem; color: var(--muted); margin: 12px 0 0; text-align: center; }

/* ---- State page city index ----------------------------------------------------------------------- */
.city-index-head { margin-top: 2.25rem; }
.city-index-head h2 { margin: 0; }

.letter-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.letter-nav a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 27px; height: 27px; border-radius: 5px;
	font-size: 0.8rem; font-weight: 600; color: var(--pine); text-decoration: none;
}
.letter-nav a:hover { background: var(--pine-tint); }

.letter-group { padding: 20px 0 6px; border-top: 1px solid var(--line-faint); margin-top: 14px; }
.letter-head {
	font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
	color: var(--pine); margin: 0 0 10px; scroll-margin-top: 16px;
}
.letter-cities { columns: 220px; column-gap: 28px; }
.letter-cities a {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	text-decoration: none; padding: 6px 0; break-inside: avoid;
	font-size: 0.9rem; border-bottom: 1px solid var(--line-hair);
}
.letter-cities a:hover .city-name { text-decoration: underline; }
.letter-cities .city-name { color: var(--pine); }
.letter-cities .city-count { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }

/* ---- Search page extras ---------------------------------------------------------------------------- */
.browse-shortcuts {
	background: var(--pine-tint); border: 1px solid var(--pine-tint-line);
	border-radius: var(--r-l); padding: 17px 19px; margin: 1.6rem 0 0;
}
.browse-shortcuts h2 {
	font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
	letter-spacing: 0.07em; text-transform: uppercase; color: #35594B;
	margin: 0 0 12px;
}
.shortcut-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.shortcut-row li { flex: 1; min-width: 220px; display: flex; }
.shortcut-card {
	flex: 1; display: flex; flex-direction: column; gap: 3px;
	background: var(--surface); border: 1px solid #CFE0D6; border-radius: 9px;
	padding: 13px 16px; text-decoration: none;
}
.shortcut-card:hover { border-color: var(--pine); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.shortcut-card .shortcut-kick {
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
	text-transform: uppercase; color: #55736A;
}
.shortcut-card .shortcut-title { font-size: 0.96rem; font-weight: 600; color: var(--ink); }
.shortcut-card .shortcut-sub { font-size: 0.8rem; color: var(--muted); }

.empty-state {
	margin: 1.9rem 0; padding: 26px 22px;
	border: 1px dashed #D9D2C4; border-radius: var(--r-l);
	text-align: center; background: var(--panel);
}
.empty-state .empty-title { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink); margin: 0 0 0.4rem; }
.empty-state p { font-size: 0.92rem; color: var(--text-2); max-width: 52ch; margin: 0 auto 1rem; line-height: 1.55; }
.empty-state p:last-child { margin-bottom: 0; }

/* ---- FAQ --------------------------------------------------------------------------------------------- */
.faq details {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
	padding: 0.85rem 1.15rem; margin-bottom: 9px;
}
.faq summary { font-weight: 600; color: var(--ink); cursor: pointer; }
.faq summary:hover { color: var(--pine); }
.faq details p { margin: 0.6rem 0 0.25rem; font-size: 0.95rem; color: var(--text-2); line-height: 1.6; }

/* ---- Guides & document pages ---------------------------------------------------------------------------- */
.guide-head { max-width: 720px; padding: 0.9rem 0 1.6rem; }
.guide-head .kicker { margin-bottom: 0.85rem; }
.guide-head h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.6px; margin: 0 0 0.9rem; }
.guide-head .dek {
	font-family: var(--serif); font-style: italic;
	font-size: 1.2rem; line-height: 1.5; color: var(--text-2); margin: 0;
}

.prose { max-width: 46rem; }
.prose-serif { border-top: 1px solid var(--line-soft); padding-top: 0.5rem; }
.prose-serif, .prose-serif p, .prose-serif li {
	font-family: var(--serif); font-size: 1.16rem; line-height: 1.66; color: #33302B;
}
.prose-serif h2 { margin: 2.1rem 0 0.8rem; font-size: 1.6rem; scroll-margin-top: 24px; }
.prose-serif h3 { font-size: 1.25rem; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.35rem; }
.prose blockquote {
	margin: 1.6rem 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--pine);
	font-style: italic; color: #4A453E;
}
.prose code {
	font-family: var(--mono); font-size: 0.88em;
	background: var(--line-faint); padding: 2px 6px; border-radius: 4px;
}
.prose .sources {
	font-family: var(--sans); font-size: 0.875rem; color: var(--text-2);
	border-top: 1px solid var(--line-soft); margin-top: 2.5rem; padding-top: 1.1rem;
}
.page-meta { color: var(--muted); font-size: 0.875rem; margin: 0 0 1.5rem; }

/* End-of-article CTA card */
.cta-card {
	font-family: var(--sans);
	margin: 2.25rem 0 0; padding: 22px 24px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
}
.cta-card .cta-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 0.35rem; }
.cta-card p { font-size: 0.92rem; color: var(--text-2); line-height: 1.55; margin: 0 0 0.9rem; max-width: 60ch; }

/* ---- Founding-member callout ------------------------------------------------------------------------------ */
.founding-pill {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--ochre); background: var(--cream); border: 1px solid var(--cream-line);
	padding: 6px 12px; border-radius: 100px; margin: 0 0 1.1rem;
}
.founding-box {
	background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-l);
	padding: 1.4rem 1.5rem; margin: 1.75rem 0;
}
.founding-box .founding-title {
	font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
	color: var(--ochre-head); margin: 0 0 0.5rem;
}
.founding-box p, .founding-box li { color: var(--ochre-text); font-size: 0.96rem; line-height: 1.6; }
.founding-box p { margin: 0.5rem 0 0; }
.founding-box ul { margin: 0.6rem 0 0; padding-left: 1.3rem; }
.founding-box strong { color: var(--ochre-head); }

/* Benefit list with check seals (claim page) */
.benefits { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.benefits li { display: flex; gap: 13px; align-items: flex-start; }
.benefits .b-icon {
	flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
	background: var(--pine-tint); border: 1px solid var(--pine-tint-line); color: var(--pine);
	display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.benefits .b-body { font-size: 0.92rem; color: var(--text-2); line-height: 1.55; }
.benefits .b-body strong { display: block; font-size: 0.97rem; color: var(--ink); margin-bottom: 2px; }

/* Two-column claim layout */
.claim-grid { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 1.4rem; }
.claim-pitch { flex: 1.15; min-width: min(100%, 300px); }
.claim-pitch h1 { margin-top: 0; }
.claim-form-col { flex: 1; min-width: min(100%, 300px); max-width: 460px; }

/* ---- Public forms ------------------------------------------------------------------------------------------- */
.site-form {
	background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
	padding: 1.6rem 1.5rem 1.5rem; margin: 1.5rem 0;
	box-shadow: var(--shadow-raised);
	font-family: var(--sans);
}
@media (min-width: 700px) { .site-form { padding: 1.75rem 1.75rem 1.6rem; } }
.site-form .form-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 0 0 0.25rem; }
.site-form .form-sub { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.35rem; }
.site-form .field { margin-bottom: 1rem; }
.site-form label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.site-form .field-hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.79rem; margin: -2px 0 6px; }
.site-form input[type="text"],
.site-form input[type="email"] {
	width: 100%; font-family: inherit; font-size: 0.94rem; color: var(--ink);
	background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
	padding: 11px 13px;
}
.site-form input:focus { outline: none; border-color: var(--pine); box-shadow: var(--focus-ring); }
.site-form button[type="submit"] {
	width: 100%; background: var(--pine); color: #F7F4ED;
	font-family: inherit; font-weight: 600; font-size: 0.97rem;
	border: 0; border-radius: 9px; padding: 0.8rem; cursor: pointer; margin-top: 0.4rem;
}
.site-form button[type="submit"]:hover { background: var(--pine-dark); box-shadow: var(--shadow-btn); transform: translateY(-1px); }
.site-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; box-shadow: none; transform: none; }
.site-form .form-status { color: var(--error); font-size: 0.875rem; margin: 0.8rem 0 0; }
.site-form .form-privacy { color: var(--muted); font-size: 0.78rem; line-height: 1.5; margin: 0.9rem 0 0; text-align: center; }

/* Honeypot: hidden from humans, present for bots. Not display:none —
   some bots skip fields they detect as hidden. */
.hp-field {
	position: absolute !important; left: -9999px !important; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}

.success-box {
	background: var(--success-bg); border: 1px solid var(--pine-tint-line); border-radius: var(--r-l);
	padding: 1.25rem 1.5rem; margin: 1.5rem 0; outline: none;
}
.success-box .success-title { color: var(--verified); font-weight: 700; margin: 0 0 0.5rem; }
.success-box p { margin: 0.5rem 0 0; }

/* ---- Utility ------------------------------------------------------------------------------------------------- */
.up-links { margin-top: 2.5rem; font-size: 0.95rem; color: var(--text-2); }

/* ---- Footer ------------------------------------------------------------------------------------------------- */
.site-footer {
	background: var(--footer-bg); color: var(--footer-text);
	margin-top: 3.5rem; padding: 3rem 0 2.4rem;
	font-size: 0.875rem; line-height: 1.6;
}
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 28px 40px; }
@media (min-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }

.footer-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 0.85rem; }
.footer-brand .brand-mark { background: var(--paper); color: var(--pine); width: 30px; height: 30px; font-size: 15px; }
.footer-brand .brand-name { color: var(--paper); font-size: 1.18rem; }
.footer-tagline { color: var(--footer-muted); font-size: 0.845rem; margin: 0; max-width: 300px; }

.footer-heading {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
	text-transform: uppercase; color: var(--footer-head); margin: 0 0 0.8rem;
}
.site-footer ul { padding: 0; margin: 0; list-style: none; }
.site-footer li { margin: 0; }
.site-footer .footer-cols a {
	display: inline-block; color: var(--footer-text); text-decoration: none;
	padding: 5px 0; font-size: 0.875rem;
}
.site-footer .footer-cols a:hover { color: var(--paper); }

.crisis-line {
	margin: 2.3rem 0 1.4rem; padding: 19px 21px;
	background: var(--footer-panel); border: 1px solid var(--footer-line); border-radius: 9px;
	display: flex; gap: 16px; align-items: flex-start;
}
.crisis-line .crisis-badge {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px solid var(--footer-green-line); color: var(--footer-green);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 0.8rem;
}
.crisis-line .crisis-title { color: var(--paper); font-weight: 600; font-size: 0.91rem; margin: 0 0 2px; }
.crisis-line .crisis-text { color: var(--footer-soft); font-size: 0.845rem; margin: 0; }
.crisis-line .crisis-text strong { color: #E9E3D6; }

.footer-notes {
	border-top: 1px solid var(--footer-line); padding-top: 1.4rem;
	color: var(--footer-muted); font-size: 0.79rem; line-height: 1.7;
}
.footer-notes p { margin: 0 0 0.55rem; }
.footer-notes a { color: var(--footer-green-link); text-decoration: underline; }
.footer-notes a:hover { color: var(--paper); }
.footer-bottom {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	color: var(--footer-muted); margin-top: 0.9rem;
}