/* HomeQuantify — shared design system (Phase 15B Batch 1: premium tokens)
   Mobile-first, accessible, no external dependencies. One stylesheet for all pages.
   Palette: Forest #173D32, Warm Ivory #F5F2EA, Warm Gold #D5A45B. Gold is decorative only. */
:root {
  --forest: #173D32; --forest-deep: #0E2A22;
  --ink: #173D32; --muted: #5C6B60; --line: #D8D2C4; --bg: #F5F2EA;
  --card: #FFFFFF; --accent: #0b6e4f; --accent-dark: #173D32; --accent-soft: #E9EFE7;
  --gold: #D5A45B; --gold-dark: #7E5F27; --gold-soft: #F3E9D7;
  --control-border: #7A8B80;
  --warn: #8a5a00; --warn-bg: #fff4d6; --err: #a61c1c; --err-bg: #FBEFEA;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px; --radius-btn: 10px;
  --max: 1060px; --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-sm: 0 2px 8px rgba(23,61,50,.08); --shadow-md: 0 6px 20px rgba(23,61,50,.12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.6; font-size: 17px; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.site-header :focus-visible, .site-footer :focus-visible, .hero-home :focus-visible, .cta-band :focus-visible { outline-color: var(--gold); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--forest); color: #fff; padding: 8px 14px; z-index: 10;
  border-radius: 0 0 8px 0; box-shadow: var(--shadow-md); }
.skip-link:focus { left: 8px; top: 8px; color: #fff; z-index: 100; }

/* Header / nav */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--forest); color: #fff;
  border-bottom: 2px solid var(--gold); box-shadow: 0 1px 0 rgba(23,61,50,.25); }
.site-header .wrap { max-width: var(--max); margin: 0 auto; padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
  font-weight: 800; font-size: 1.2rem; letter-spacing: .2px; }
.brand svg { flex: 0 0 auto; display: block; }
.brand span { color: #fff; }
.main-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; }
.main-nav a { color: #ede8da; text-decoration: none; padding: 4px 2px; }
.main-nav a:hover { color: #fff; text-decoration: underline; }
.main-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px 0; }
  .main-nav a { padding: 10px 4px; }
}
.breadcrumb { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .current { color: var(--forest); font-weight: 650; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 18px; }
main { padding-bottom: 56px; }
.hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 26px 0 22px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 4.5vw, 2.3rem); line-height: 1.2; }
.hero p.lede { margin: 0; color: var(--muted); font-size: 1.06rem; max-width: 62ch; }
section { margin-top: 28px; }
h2 { font-size: 1.4rem; margin: 0 0 10px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.12rem; margin: 18px 0 6px; line-height: 1.3; font-weight: 700; }
h4 { font-size: 1rem; margin: 16px 0 6px; line-height: 1.35; font-weight: 700; }

/* Former inline styles, moved into classes (Batch 1) */
.copy-results { margin-top: 12px; }
.note-gap { margin-top: 28px; }
.hero-cta.flush { margin-top: 0; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 22px; }
li { margin-bottom: 4px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.note { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 12px 14px; border-radius: 0 8px 8px 0; }
.note.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.safety-note { background: var(--warn-bg); border: 2px solid var(--warn); border-radius: var(--radius-sm); padding: 14px 16px; margin: 20px 0; font-size: 1rem; line-height: 1.55; }
.safety-note strong { color: var(--warn); }

/* Calculator */
.calc-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .calc-grid { grid-template-columns: 1.05fr .95fr; align-items: start; gap: 24px; } }
.calc-form { border-top: 3px solid var(--gold); }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 650; margin-bottom: 5px; font-size: .98rem; color: var(--forest); }
.field .hint { font-weight: 400; color: var(--muted); font-size: .88rem; display: block; margin-top: 3px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1 1 auto; min-width: 0; }
.input-row select { flex: 0 0 auto; max-width: 46%; }
input[type="number"], input[type="text"], select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 1rem; color: var(--ink);
  border: 1.5px solid var(--control-border); border-radius: 8px; background: #fff; }
input[type="number"]:focus, input[type="text"]:focus, select:focus { border-color: var(--forest); outline: 3px solid rgba(23,61,50,.25); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--err); }
.btn { display: inline-block; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 700;
  padding: 12px 22px; background: var(--accent); color: #fff; }
.btn:hover { background: var(--accent-dark); }
.btn.secondary { background: #e8eef2; color: var(--ink); }
/* Calculator template (Batch 3): forest primary, ivory secondary — scoped so
   404 / directory buttons keep their Batch 1 treatment until their batches. */
.calc-grid .btn { background: var(--forest); border-radius: var(--radius-btn); padding: 13px 24px;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.calc-grid .btn:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.calc-grid .btn:active { transform: translateY(0); box-shadow: none; }
.calc-grid .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.calc-grid .btn.secondary { background: #EFE9DC; color: var(--forest); border: 1.5px solid var(--control-border); }
.calc-grid .btn.secondary:hover { background: #E7DFCE; }
@media (max-width: 480px) { .btn-row { flex-direction: column; } .btn-row .btn { width: 100%; text-align: center; } }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.unit-toggle { display: inline-flex; border: 1.5px solid var(--control-border); border-radius: 9px; overflow: hidden; margin-bottom: 14px; }
.unit-toggle button { border: 0; background: #fff; padding: 9px 16px; font: inherit; font-weight: 650; cursor: pointer; color: var(--muted); }
.unit-toggle button[aria-pressed="true"] { background: var(--forest); color: #fff; }
.unit-toggle button:not([aria-pressed="true"]):hover { background: var(--accent-soft); }

/* Results */
/* Results: border = --control-border #7A8B80, measured 3.08:1 vs the #E9EFE7 panel
   and 3.22:1 vs the #F5F2EA page (WCAG 2.1, PASS >=3:1). The blueprint's
   #C9D8CC (1.27:1) and #A8BFAF (1.67:1) both fail; the old #bcdccf was 1.26:1.
   Gold rules + a soft shadow reinforce the boundary. */
.results { background: var(--accent-soft); border: 1.5px solid var(--control-border); box-shadow: var(--shadow-sm); }
.results h2 { margin-top: 0; }
.results h2::after { content: ""; display: block; width: 32px; height: 3px; background: var(--gold);
  border-radius: 2px; margin-top: 8px; }
.result-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-bottom: 1px dashed #C9D8CC; }
.result-line.big { border-top: 2px solid var(--gold); }
.result-line:last-child { border-bottom: 0; }
.result-line .k { color: var(--muted); }
.result-line .v { font-weight: 750; text-align: right; white-space: nowrap; }
.result-line.big .v { font-size: 1.4rem; color: var(--accent-dark); }
.result-line.big .k { font-weight: 700; color: var(--ink); }
.results-empty { color: var(--muted); }
.error-box { background: var(--err-bg); border: 1px solid #E3B7B7; color: var(--err);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.error-box ul { margin: 6px 0 0; }
.formula { background: #EFE9DC; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92rem; overflow-x: auto; white-space: pre-wrap; }

/* Directory cards */
.dir-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dir-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .dir-grid { grid-template-columns: 1fr 1fr 1fr; } }
.dir-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-decoration: none; color: var(--ink); }
.dir-card:hover { border-color: var(--accent); }
.dir-card h3 { margin: 0 0 6px; color: var(--accent-dark); font-size: 1.06rem; }
.dir-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-dark); border-radius: 20px; padding: 3px 10px; margin-bottom: 8px; }
.related { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.related li { margin: 0; }
.related a { display: inline-block; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 7px 14px; text-decoration: none; font-size: .94rem; }
.related a:hover { background: var(--accent-soft); color: var(--forest); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 10px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 8px 0 0; }
.faq details[open] { box-shadow: inset 3px 0 0 var(--gold); }
.example table, .steps table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .96rem; }
.example th, .example td, .steps th, .steps td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
.example th, .steps th { background: #EFE9DC; }
.example { overflow-x: auto; }
.steps li::marker { color: var(--forest); font-weight: 700; }
@media (min-width: 820px) { .example tbody tr:hover th, .example tbody tr:hover td { background: var(--accent-soft); } }

/* Footer */
.site-footer { background: var(--forest); border-top: 3px solid var(--gold); padding: 36px 0 40px;
  color: #ede8da; font-size: .93rem; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem;
  color: #fff; margin: 0 0 6px; }
.footer-brand svg { flex: 0 0 auto; display: block; }
.footer-tagline { color: var(--gold); font-weight: 700; margin: 0 0 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .btn-row { display: none; } body { background: #fff; } }

/* ---------------- Homepage upgrade: hero, search, categories, guides ---------------- */
/* Dark hero (homepage only) */
.hero-home { background: linear-gradient(135deg, #0E2A22 0%, #173D32 60%, #1F5142 100%);
  color: #fff; border-bottom: 0; padding: 40px 0 36px; }
@media (min-width: 640px) { .hero-home { padding: 56px 0 48px; } }
@media (min-width: 820px) { .hero-home { padding: 64px 0 56px; } }
.hero-wrap { }
@media (min-width: 980px) { .hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: center; } }
.hero-art { display: none; }
@media (min-width: 980px) { .hero-art { display: block; } }
.hero-art svg { display: block; width: 100%; height: auto; }
.hero-rule { display: block; width: 24px; height: 3px; background: var(--gold); border-radius: 2px; margin-bottom: 14px; }
.hero-home h1 { color: #fff; font-size: clamp(2.1rem, 5.5vw, 3.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; }
.hero-home .eyebrow { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); background: rgba(0,0,0,.25);
  border-radius: 20px; padding: 5px 12px; margin-bottom: 14px; }
.hero-home p.lede { color: #E9EFE7; font-size: 1.14rem; line-height: 1.55; max-width: 58ch; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 18px 0 0; padding: 0; list-style: none;
  font-size: .95rem; color: #D9EFE5; }
@media (min-width: 980px) { .hero-stats li + li { border-left: 1px solid rgba(255,255,255,.25); padding-left: 26px; } }
.hero-stats strong { color: #fff; font-size: 1.05rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 640px) { .hero-home .hero-cta { flex-direction: column; } .hero-home .hero-cta .btn { text-align: center; } }
.btn.light { background: #fff; color: var(--accent-dark); }
.btn.light:hover { background: var(--accent-soft); }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn.ghost:hover { background: rgba(255,255,255,.12); }

/* Search box */
.search-box { position: relative; max-width: 640px; margin-top: 24px; }
.search-box label { position: absolute; left: -9999px; }
.search-box input[type="search"] { width: 100%; padding: 15px 16px 15px 46px; font: inherit; font-size: 1.05rem;
  color: var(--ink); border: 0; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23173D32' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat 14px center;
  box-shadow: 0 6px 24px rgba(0,0,0,.28); }
.search-box input[type="search"]:focus { outline: 3px solid #7fd6b2; outline-offset: 2px; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.22);
  list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; z-index: 30; }
.search-results[hidden] { display: none; }
.search-results li { margin: 0; }
.search-results a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border-radius: 8px; text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a.active { background: var(--accent-soft); }
.search-results a .s-name { font-weight: 700; }
.search-results a .s-tag { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.search-no-results { padding: 12px 14px; color: var(--muted); }

/* Trust strip */
.trust-strip { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
@media (min-width: 820px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 360px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-item { display: flex; gap: 12px; align-items: flex-start; background: #EFE9DC;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; font-size: .95rem; }
.trust-item svg { flex: 0 0 auto; margin-top: 2px; background: var(--ink); border-radius: 50%;
  padding: 4px; width: 28px; height: 28px; box-sizing: border-box; }
.trust-item strong { display: block; line-height: 1.35; }
.trust-item span { color: var(--muted); font-size: .88rem; }

/* Section headers */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.section-head p { color: var(--muted); margin: 0; }
.section-head .more { font-weight: 700; white-space: nowrap; }

/* Category cards */
.cat-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cat-grid { grid-template-columns: 1fr 1fr 1fr; } }
.cat-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); }
.cat-art { display: block; height: 120px; background: #EFE9DC; border-bottom: 1px solid var(--line); }
.cat-art svg { display: block; width: 100%; height: 100%; }
.cat-body { display: flex; flex-direction: column; flex: 1; padding: 0 20px 20px; }
.cat-card .cat-icon { margin-top: -23px; }
@media (max-width: 640px) { .cat-art { height: 96px; } }
.cat-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(23,61,50,.12); }
.cat-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.dir-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.guide-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.guide-diagram { max-width: 720px; margin: 24px auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 20px 8px; }
.guide-diagram svg { display: block; width: 100%; height: auto; font-family: inherit; }
.guide-diagram figcaption { margin-top: 12px; color: var(--muted); font-size: .95rem;
  border-left: 3px solid var(--gold); padding-left: 12px; }
.cat-card h3 { margin: 0 0 4px; color: var(--ink); font-size: 1.12rem; }
.cat-card .count { font-size: .88rem; color: var(--gold-dark); margin: 0 0 8px; }
.cat-card .examples { margin: 0 0 12px; color: var(--muted); font-size: .92rem; flex: 1; }
.cat-card .go { font-weight: 700; color: var(--accent-dark); }

/* Popular calculators */
.pop-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pop-grid { grid-template-columns: 1fr 1fr; } }
.pop-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-decoration: none; color: var(--ink); }
.pop-card:hover { border-color: var(--accent); }
.pop-card h3 { margin: 0 0 4px; color: var(--accent-dark); font-size: 1.05rem; }
.pop-card p { margin: 0 0 8px; color: var(--muted); font-size: .93rem; }
.pop-card .go { font-weight: 700; font-size: .92rem; color: var(--accent-dark); }

/* Guides */
.guide-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .guide-grid { grid-template-columns: 1fr 1fr 1fr; } }
.guide-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; text-decoration: none; color: var(--ink); }
.guide-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(23,61,50,.12); }
.guide-card h3 { margin: 0 0 6px; color: var(--ink); font-size: 1.08rem; }
.guide-card p { margin: 0 0 10px; color: var(--muted); font-size: .93rem; flex: 1; }
.guide-meta { font-size: .85rem; color: var(--muted); }
.guide-meta .go { font-weight: 700; color: var(--accent-dark); }

/* CTA band */
.cta-band { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 28px 24px; }
.cta-band h2 { color: #fff; margin: 0 0 8px; }
.cta-band p { color: #d7e5ee; margin: 0 0 18px; max-width: 62ch; }

/* Footer columns */
.footer-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-col h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gold); margin: 0 0 10px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 6px; }
.footer-col a { color: #fff; text-decoration: none; }
.footer-col a:hover { color: var(--gold); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); margin-top: 22px; padding-top: 16px; }
.footer-bottom p { margin: 0 0 8px; font-size: .88rem; }

/* ---------------- Calculator directory ---------------- */
.dir-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 22px; }
.dir-search { flex: 1 1 320px; margin-top: 0; max-width: none; }
.sort-box { flex: 0 0 auto; }
.sort-box label { display: block; font-weight: 650; margin-bottom: 5px; font-size: .98rem; }
.sort-box select { width: auto; min-width: 160px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 640px) {
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .filter-chips .chip { flex: 0 0 auto; padding: 10px 16px; }
  .dir-toolbar { flex-direction: column; align-items: stretch; }
  .sort-box select { width: 100%; }
}
.chip { border: 1.5px solid var(--control-border); background: #fff; color: var(--ink); border-radius: var(--radius-pill);
  padding: 7px 14px; font: inherit; font-size: .92rem; font-weight: 650; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.results-count { color: var(--muted); font-size: .95rem; margin: 16px 0 12px; }
.dir-item { display: flex; flex-direction: column; }
.dir-item h3 { margin: 0 0 6px; }
.dir-item h3 a { color: var(--accent-dark); text-decoration: none; }
.dir-item h3 a:hover { text-decoration: underline; }
.dir-item p { flex: 1; }
.dir-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.dir-card-foot .go { font-weight: 700; font-size: .92rem; text-decoration: none; }
.fav-btn { border: 1.5px solid var(--control-border); background: #fff; border-radius: 20px; padding: 5px 12px;
  min-height: 44px; font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer; color: var(--muted); white-space: nowrap; }
.fav-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.fav-btn[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-dark); }
.empty-state { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; margin-top: 16px; }
.empty-state p { margin: 0 0 10px; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 6px; }
.page-btn { border: 1.5px solid var(--control-border); background: #fff; border-radius: 8px; padding: 8px 14px;
  font: inherit; font-weight: 650; cursor: pointer; color: var(--ink); }
.page-btn:hover:not(:disabled) { border-color: var(--accent); }
.page-btn.current { background: var(--forest); border-color: var(--forest); color: #fff; }
.page-btn:disabled { opacity: .45; cursor: default; }
.recent-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .recent-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .recent-grid { grid-template-columns: 1fr 1fr 1fr; } }
.recent-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; text-decoration: none; color: var(--ink); }
.recent-card:hover { border-color: var(--accent); }
.recent-card strong { display: block; color: var(--accent-dark); font-size: .98rem; }
.recent-card span { color: var(--muted); font-size: .88rem; }

/* ---------------- Batch 4: directory + guides ---------------- */
/* Gold rule under the h1 on the directory + guides-index heroes. */
.hero-ruled h1::after { content: ""; display: block; width: 32px; height: 3px; background: var(--gold);
  border-radius: 2px; margin-top: 10px; }
/* Feature card variant: ivory panel + gold top rule (directory "About" + guides "How to use"). */
.card.feature { background: #EFE9DC; border-top: 3px solid var(--gold); }
/* Phase pill: above guide h1s and on guides-index cards. Forest on accent-soft 10.27:1. */
.phase-pill { display: inline-block; align-self: flex-start; font-size: .78rem; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; background: var(--accent-soft); color: var(--forest);
  border-radius: 20px; padding: 3px 10px; margin-bottom: 10px; }
/* Read-time: gold-dark on white 5.91:1. Scoped to a span so the homepage's
   .guide-meta (muted) is untouched. */
.read-time { color: var(--gold-dark); font-weight: 700; }
/* Guide article body: forest h2s with a 32px gold rule; roomier padding on larger screens. */
.guide-body h2 { color: var(--forest); }
.guide-body h2::after { content: ""; display: block; width: 32px; height: 3px; background: var(--gold);
  border-radius: 2px; margin-top: 8px; }
@media (min-width: 640px) { .guide-body { padding: 24px; } }
@media (min-width: 980px) { .guide-body { padding: 28px; } }
/* Info pages (Batch 5): hero lede + body card. h2s match the guide-body
   standard (forest + 32px gold rule); paragraphs capped at a readable
   70ch; 'Last updated' lines muted; Disclaimer list lead-ins forest. */
.info-body h2 { color: var(--forest); }
.info-body h2::after { content: ""; display: block; width: 32px; height: 3px; background: var(--gold);
  border-radius: 2px; margin-top: 8px; }
.info-body p, .info-body li { max-width: 70ch; }
.info-body .last-updated { color: var(--muted); font-size: .95rem; }
.info-body ul strong { color: var(--forest); }
/* 404 page (Batch 5): centred card (720px), 64px brand mark above the h1,
   forest primary + ivory secondary buttons scoped to the 404 card only
   (the global .btn keeps its Batch 1 accent treatment elsewhere). */
.not-found-mark { margin-bottom: 14px; }
.not-found-mark svg { display: block; }
.not-found-card { max-width: 720px; margin-left: auto; margin-right: auto; }
.not-found-card .btn { background: var(--forest); border-radius: var(--radius-btn); padding: 13px 24px; }
.not-found-card .btn:hover { background: var(--forest-deep); }
.not-found-card .btn.secondary { background: #EFE9DC; color: var(--forest); border: 1.5px solid var(--control-border); }
.not-found-card .btn.secondary:hover { background: #E7DFCE; }
/* Directory search on the ivory surface: bordered white pill + forest focus ring
   (the base .search-box rule is the dark-hero treatment: no border, black shadow,
   mint ring — all overridden here; the forest magnifier icon is inherited). */
.dir-search input[type="search"] { border: 1.5px solid var(--control-border); box-shadow: var(--shadow-sm); }
.dir-search input[type="search"]:focus { outline: 3px solid rgba(23,61,50,.25); outline-offset: 0; border-color: var(--forest); }