/* practices.css — shared design layer for ALL /practices static pages (index, concept hubs, practice pages).
 * Governed by the Restraint Doctrine (design-doctrine root, founder-ratified 2026-06-01):
 * black is the brand; gold is LIGHT, not paint; type does the work; ONE quiet primary button;
 * hierarchy via size + weight, never opacity-dimmed text. Emitted by scripts/generate-practices-static.js
 * (copied to build/practices.css). Source of truth lives here in public/.
 */

:root {
  --px-bg: #0b0b0c;            /* toward black — the brand surface */
  --px-surface: #19191c;       /* slightly elevated panel */
  --px-white: #ffffff;         /* headings + emphasis: pure white (rule 1) */
  --px-content: #ffffff;       /* body text is PURE WHITE (rule 1 — founder: body is never gray) */
  --px-quiet: #c9c9cf;         /* metadata tier — solid legible shade (~gray-300) */
  --px-gold: #d4b87e;          /* gold as light: eyebrows, hairlines, numerals */
  --px-hairline: rgba(255, 255, 255, 0.10);
  --px-hairline-soft: rgba(255, 255, 255, 0.07);
  --px-border-btn: rgba(255, 255, 255, 0.30);
  --px-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --px-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--px-bg);
  color: var(--px-content);
  font-family: var(--px-sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Gold as LIGHT — one faint pool at the top of the page, like the splash. Never paint. */
body::before {
  content: '';
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 920px;
  max-width: 100vw;
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(212, 184, 126, 0.09), transparent 65%);
  pointer-events: none;
}

::selection { background: rgba(212, 184, 126, 0.28); color: var(--px-white); }

.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }

.shell { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* ── Header ───────────────────────────────────────────── */

.site-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.site-header .shell { display: flex; align-items: center; padding-top: 20px; padding-bottom: 20px; }

.wordmark {
  font-family: var(--px-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--px-white);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.wordmark:hover { color: var(--px-gold); }

/* ── Main column ──────────────────────────────────────── */

main { flex: 1 0 auto; }
main .shell { padding-top: 44px; padding-bottom: 72px; }

/* Breadcrumb — quiet metadata tier */
.crumbs { font-size: 14px; color: var(--px-quiet); margin-bottom: 40px; letter-spacing: 0.01em; }
.crumbs a { color: var(--px-quiet); text-decoration: none; }
.crumbs a:hover { color: var(--px-white); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { color: var(--px-quiet); }

/* ── Type scale (one ladder, rule 4) ──────────────────── */

article h1 {
  font-family: var(--px-serif);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.15;
  color: var(--px-white);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}

/* Lead line directly under the H1 (question / one-liner) */
article h1 + p { font-size: 20px; line-height: 1.55; color: var(--px-white); margin: 0 0 22px; }
article h1 + p strong { font-weight: 500; color: var(--px-white); }

/* Section headers — gold uppercase eyebrows at 16px (canonical treatment) */
article h2 {
  font-family: var(--px-sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--px-gold);
  margin: 52px 0 14px;
}

article h3 {
  font-family: var(--px-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--px-white);
  margin: 36px 0 8px;
}

article p { margin: 0 0 18px; color: var(--px-content); }
article strong { color: var(--px-white); font-weight: 500; }

/* Content links — white text, gold-light underline */
article a {
  color: var(--px-white);
  text-decoration: underline;
  text-decoration-color: rgba(212, 184, 126, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
article a:hover { text-decoration-color: var(--px-gold); }

/* ── Practice link list (hub) ─────────────────────────── */

.practice-list { list-style: none; margin: 6px 0 8px; padding: 0; }
.practice-list li { border-bottom: 1px solid var(--px-hairline-soft); }
.practice-list li:first-child { border-top: 1px solid var(--px-hairline-soft); }
.practice-list a {
  display: block;
  padding: 13px 0;
  font-size: 17px;
  text-decoration: none;
  color: var(--px-white);
}
.practice-list a:hover { color: var(--px-gold); }

/* Per-practice summaries on the hub */
.practice-brief p { color: var(--px-content); }

/* ── HowTo steps — gold tabular numerals, the one signature move ── */

.howto { list-style: none; counter-reset: step; margin: 6px 0 8px; padding: 0; }
.howto li {
  counter-increment: step;
  position: relative;
  padding: 15px 0 15px 54px;
  border-bottom: 1px solid var(--px-hairline-soft);
  color: var(--px-content);
}
.howto li:first-child { border-top: 1px solid var(--px-hairline-soft); }
.howto li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 2px;
  top: 17px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--px-gold);
  font-variant-numeric: tabular-nums;
}

/* ── Evidence level — quiet typographic label, not a badge shouting ── */

.evidence-level {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--px-quiet);
  white-space: nowrap;
}

/* Evidence sources — the real studies behind the grade. Quiet provenance,
 * like footnotes in a serious publication: typographic only (no box, no icons,
 * no superscript apparatus), one hairline above (same rule weight as the howTo
 * rows), metadata tier (--px-quiet, a solid legible shade — never opacity-dimmed,
 * hierarchy via size + weight only). The label matches the .evidence-level idiom
 * (13px uppercase quiet), NOT the gold h2 eyebrow ladder — provenance is metadata,
 * not a content section. Rendered only when a practice actually has sources:
 * no sources → no label, no list, no empty container. */
.evidence-sources-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--px-quiet);
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--px-hairline-soft);
}
.evidence-sources {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.evidence-sources li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--px-quiet);
  margin: 0 0 7px;
}
.evidence-sources li:last-child { margin-bottom: 0; }

/* ── The ONE quiet CTA per page ───────────────────────── */

.app-cta {
  margin-top: 60px;
  padding: 30px 30px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(212, 184, 126, 0.05), rgba(255, 255, 255, 0.015) 55%),
    var(--px-surface);
}
.app-cta h2 { margin-top: 0; }
.app-cta p { margin-bottom: 14px; }

.cta-row { margin: 22px 0 12px; }

.cta-button {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--px-border-btn);
  border-radius: 10px;
  font-family: var(--px-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--px-white);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.cta-button:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

article p.price { font-size: 14px; color: var(--px-quiet); margin-bottom: 0; }

/* ── Citation: the quietest tier, reading as the CTA card's own footer ──────
 * A reader (or an AI answer engine) can lift an APA-ish citation off the page.
 * It is a SIBLING of .app-cta, never nested inside it — that card is the
 * founder-locked canonical conversion module (scripts/seo/canonical-cta-card.js)
 * whose structure must not be edited. So it is joined VISUALLY instead: same
 * width, flush to the card's bottom edge, sharing its border and surface so the
 * two read as one object — eyebrow → button → price → hairline → citation,
 * descending in weight. Quiet via size + the metadata color token, never
 * opacity (Restraint Doctrine). Class-scoped: .cite-line exists only on /learn
 * pages, so nothing here can reach the concept hubs.
 * Set on .app-cta only where a citation follows, via :has(). */
.app-cta:has(+ .cite-line) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  padding-bottom: 22px;
}

.cite-line {
  margin: 0 0 60px;                  /* flush to the card above; breathe below */
  padding: 15px 30px 17px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--px-hairline);
  border-radius: 0 0 16px 16px;      /* completes the card's rounded bottom */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.02)),
    var(--px-surface);
  font-size: 13px;
  line-height: 1.55;
  color: var(--px-quiet);
  overflow-wrap: anywhere;           /* the canonical URL wraps, never widens the card */
}
.cite-line em { font-style: italic; }

/* Click-to-copy is progressive enhancement: without JS this stays a plain,
 * fully readable citation in the raw HTML (which is the point — answer engines
 * read it without running scripts). The line ITSELF is the target: no button
 * label announcing what it will copy. The hover state IS the affordance. */
button.cite-line {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--px-sans);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
button.cite-line:hover,
button.cite-line:focus-visible {
  color: var(--px-white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.05)),
    var(--px-surface);
  outline: none;
}
button.cite-line[data-copied='1'] { color: var(--px-gold); }

/* ── Related concepts ─────────────────────────────────── */

.related ul { list-style: none; margin: 4px 0 0; padding: 0; }
.related li { border-bottom: 1px solid var(--px-hairline-soft); }
.related li:first-child { border-top: 1px solid var(--px-hairline-soft); }
.related a { display: block; padding: 11px 0; font-size: 16px; color: var(--px-white); text-decoration: none; }
.related a:hover { color: var(--px-gold); }

/* "Related practices" — rendered in the SAME list style the tool already uses (.related /
   .concept-list above): hairline-separated text rows, no boxes, no background panels. Each row is
   one authored practice — its name, its own one-line description, and its concept's subtitle for
   context — plus an image thumbnail IF one exists (absent today; the row reads cleanly without it).
   No generated text: semantic similarity decides WHICH rows show; the practices' own words describe
   them. Matches the established list rhythm rather than introducing a new card component. */
/* Concept subtitle — a quiet sub-headline under the H1 (authored, previously unrendered). */
.hub-subtitle {
  margin: -4px 0 18px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--px-quiet);
}
/* Research citations on the concept hub — rendered in the canonical list rhythm (hairline rows,
   legible content shade, NOT faded), consistent with every other list on the page. */
.research-list { list-style: none; margin: 8px 0 0; padding: 0; }
.research-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--px-hairline-soft);
  font-size: 15px;
  line-height: 1.5;
  color: var(--px-content);
}
.research-item:first-child { border-top: 1px solid var(--px-hairline-soft); }
/* ── Canonical SEO PAGE LIST — the one list style for every list on the static SEO pages ──
   Markup is a SEMANTIC <ul class="seo-page-list"><li class="seo-page-list-item"> so crawlers /
   answer engines read it AS an enumerable list (listicle signal), not a pile of divs. Emitted ONLY
   by scripts/seo/seo-page-list-renderer.js. NOT an in-app component — see that file's header. */
.seo-page-list-section { margin-top: 44px; }
.seo-page-list-section h2 { margin-bottom: 4px; }
.seo-page-list { list-style: none; margin: 8px 0 0; padding: 0; }
/* list-style:none on the <li> too (not only the <ul>) so NO bullet dots ever render — defensive
   against an <li> ending up outside its <ul>. The listicle <ul>/<li> markup is for SEO structure;
   it must never change the approved bullet-free canonical design. */
.seo-page-list-item { margin: 0; list-style: none; }
.seo-page-list-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--px-hairline-soft);
  text-decoration: none;
}
.seo-page-list-item:first-child .seo-page-list-row { border-top: 1px solid var(--px-hairline-soft); }
/* Image is optional: a small thumbnail at the row's start when authored; when absent the text
   simply fills the row, so the row looks intentional either way. */
.seo-page-list-row-image {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
}
.seo-page-list-row-text { display: flex; flex-direction: column; gap: 3px; }
.seo-page-list-row-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--px-white);
}
.seo-page-list-row:hover .seo-page-list-row-title { color: var(--px-gold); }
.seo-page-list-row-description {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--px-content);
}
.seo-page-list-row-context {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--px-quiet);
}
/* Concern quiz — static list of recognition quotes. Body text sizing (inherits from article). */
.concern-quiz-list { margin: 8px 0 0; padding: 0 0 0 20px; }
.concern-quiz-list li { padding: 4px 0; }

/* The uppercase concept line belongs to LIVE SEARCH RESULTS ONLY, where the context line is a
   short concept title. It must NOT live on the shared .seo-page-list-row-context rule: 6,948 built
   pages render that class, and generate-practices-static.js passes a concept SUBTITLE — full prose
   sentences — into it. Uppercasing there turned a readable sentence into shouting. Scoped here so
   live search keeps its look and every other static surface is untouched. */
.live-search-results .seo-page-list-row-context {
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── /practices index ─────────────────────────────────── */

.concept-list { list-style: none; margin: 6px 0 8px; padding: 0; }
.concept-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--px-hairline-soft);
  font-size: 16px;
  line-height: 1.55;
  color: var(--px-quiet); /* the trailing question reads quiet; the link reads white */
}
.concept-list li:first-child { border-top: 1px solid var(--px-hairline-soft); }
.concept-list a {
  color: var(--px-white);
  text-decoration: underline;
  text-decoration-color: rgba(212, 184, 126, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.concept-list a:hover { color: var(--px-gold); text-decoration-color: var(--px-gold); }

/* ── Footer ───────────────────────────────────────────── */
/* The site footer's markup AND styles now live together in scripts/seo/site-footer.js, which
 * every static generator shares. Its CSS is appended to this file at build time (see
 * installStylesheet() in generate-practices-static.js), so those rules land immediately below.
 *
 * The old two-link footer's rules were REMOVED here rather than left to be overridden: they set
 * `display: flex` on `.site-footer .shell`, which would have turned the new footer's column grid
 * into flex items and silently broken the layout. Leaving them and relying on append-order to win
 * is the kind of cascade coin-flip that breaks the moment someone reorders a concatenation.
 * `.footer-nav` went with them — no markup emits that class any more. */

/* ── Small screens ────────────────────────────────────── */

@media (max-width: 480px) {
  body { font-size: 16px; }
  main .shell { padding-top: 32px; padding-bottom: 56px; }
  .crumbs { margin-bottom: 30px; }
  article h2 { margin-top: 42px; }
  .app-cta { padding: 24px 20px 22px; margin-top: 48px; }
  /* Match the card's narrower mobile padding so the citation stays aligned
   * with the CTA content above it. */
  .cite-line { padding: 14px 20px 16px; margin-bottom: 48px; }
  .howto li { padding-left: 44px; }
}

/* live-search (Part C) — classes used ONLY by nodes that practices-live-search.js injects
 * on the index page. Static HTML never references them; with JS off this block is inert.
 * Text hierarchy via size + weight, floors at --px-quiet (#c9c9cf) — never opacity-faded text.
 * The .live-search-dimmed 0.6 is the plan-specified whole-section de-emphasis STATE while
 * results show (reversible, not a text-hierarchy device). Motion: one 220ms fade + 6px rise. */
.live-search { margin: 4px 0 36px; }
/* AFFORDANCE: this box must read UNMISTAKABLY as a search field a person types into (founder note:
   "it's not clear that it's a field to be typed into"). Signals, hierarchy-through-presence not
   opacity (per design doctrine): (1) a gold-tinted visible border, not a 10%-white hairline that
   vanishes on the near-black surface; (2) a magnifier icon inset on the left (self-contained inline
   SVG — no external asset on this SEO page); (3) left padding clears the icon. Focus brightens the
   border further. */
.live-search-input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  background-color: var(--px-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d4b87e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  border: 1px solid rgba(212, 184, 126, 0.38);
  border-radius: 10px;
  color: var(--px-white);
  font-family: var(--px-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.live-search-input::placeholder { color: var(--px-quiet); opacity: 1; }
.live-search-input:hover { border-color: rgba(212, 184, 126, 0.55); }
.live-search-input:focus { outline: none; border-color: rgba(212, 184, 126, 0.7); box-shadow: 0 0 0 3px rgba(212, 184, 126, 0.14); }

/* Quality-threshold progress — a hairline gold track + a whisper hint that nudge a person to keep
   typing until the high-quality semantic search engages (at MIN_QUERY_CHARS in practices-live-search.js).
   Restrained by design: a 2px track, gold-as-light, quiet text, all 220ms fades. Invisible when the
   box is empty; fades back once the threshold is crossed (confirms once, never nags). */
.live-search-progress {
  height: 2px;
  margin: 8px 2px 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity 220ms ease;
}
.live-search-progress.is-active { opacity: 1; }
/* threshold reached → the track holds full briefly (gold), then JS adds .is-faded to fade it away */
.live-search-progress.is-complete .live-search-progress-fill { background: var(--px-gold); }
.live-search-progress.is-faded { opacity: 0; }
.live-search-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(212, 184, 126, 0.35), var(--px-gold));
  transition: width 200ms ease;
}
.live-search-progress-hint {
  margin: 7px 2px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--px-quiet);
  min-height: 1.4em; /* reserve the line so the layout doesn't jump as the hint appears/clears */
  opacity: 0;
  transition: opacity 220ms ease, color 220ms ease;
}
.live-search-progress.is-active ~ .live-search-progress-hint { opacity: 1; }
/* Threshold reached: the hint reads "unlocked" in gold, held for a beat... */
.live-search-progress.is-complete ~ .live-search-progress-hint { color: var(--px-gold); }
/* ...then JS adds .is-faded to fade the whole indicator (track + hint) away — confirm once, never nag. */
.live-search-progress.is-faded ~ .live-search-progress-hint { opacity: 0; }
.live-search-results { opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease; }
.live-search-results.is-visible { opacity: 1; transform: translateY(0); }
.live-search-results h2 { margin-top: 10px; }
/* RETIRED: .live-search-result-* was a hand-copy of .seo-page-list-* ("matching the rhythm"
   above) and had drifted from it in ways nobody chose — 17px vs 16px titles, 15px vs 14px row
   padding. Live semantic results and a generated /concerns page answer the same question with the
   same data, so they now render through the ONE canonical family and cannot drift again.
   The single treatment worth keeping — the uppercase concept line — moved onto the canonical
   context row below, so unifying did not cost the look. */
.live-search-results .seo-page-list { margin-top: 8px; }
.live-search-dimmed { opacity: 0.6; transition: opacity 220ms ease; }
/* Character-filter empty state — shown only when typed text matches no rendered practice.
   Legible content shade (never opacity-dimmed text), sits where the category lists were. */
.live-search-no-matches { margin: 18px 0 28px; font-size: 16px; color: var(--px-content); }

/* ── Feature-page patterns (added 2026-07-16) ──────────────────────────────────────────────
   Canonical styles for the /features/<slug> SEO pages. Added here — not inlined in the generator
   — so every feature page inherits them and they track future palette changes. Tokens only. */

/* Small kicker above an h1 (the hero eyebrow). Gold, uppercase, quiet — never competes with h1. */
.seo-eyebrow {
  font-family: var(--px-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-gold);
  margin: 0 0 10px;
}

/* FAQ block — question/answer pairs separated by hairlines, matching the .seo-page-list rhythm.
   Real <h3>/<p> so the visible Q&A and the FAQPage JSON-LD stay one source. */
.faq-list { margin: 32px 0; }
.faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--px-hairline);
}
.faq-item:last-child { border-bottom: 1px solid var(--px-hairline); }
.faq-item h3 {
  font-family: var(--px-serif);
  font-size: 20px;
  color: var(--px-white);
  margin: 0 0 8px;
}
.faq-item p {
  font-family: var(--px-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--px-content);
  margin: 0;
}

/* Feature-highlight list — non-link content rows (title + description), styled like .seo-page-list
   but without the anchor treatment since these are statements, not navigation. Hairline-separated. */
.feature-list { list-style: none; margin: 20px 0; padding: 0; }
.feature-list li {
  padding: 18px 0;
  border-top: 1px solid var(--px-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-list li:last-child { border-bottom: 1px solid var(--px-hairline); }
.feature-list-title {
  font-family: var(--px-serif);
  font-size: 19px;
  color: var(--px-white);
}
.feature-list-desc {
  font-family: var(--px-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--px-content);
}

/* ── SEO page top-nav menu (added 2026-07-16, restyled to nav-icon standard) ────────────────
   The single icon at the header's right that opens the outer-nav links. CSS-only via native
   <details>/<summary> — these pages ship no JS, so the menu must open without script. Links come
   from the outer nav (getOuterNavGroups), not the footer. Header stays visually identical; the
   icon is the only addition. Tokens only.

   NAV-ICON STANDARD (founder 2026-07-16): the toggle is a MUTED glyph — NO gold, NO border, NO
   box — matching how the app's real nav icons look (lucide Menu glyph, bare). Gold + a bordered
   box violated that standard.
   RESPONSIVE: mobile = full-screen overlay panel; desktop = multi-column category grid. Links
   have a hover treatment. */

.seo-nav { margin-left: auto; position: relative; }

/* Bare muted hamburger — no border, no box, no gold. list-style:none removes the default <summary>
   disclosure triangle; the three bars are the .seo-nav-icon box + its pseudo-elements. */
.seo-nav-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
}
.seo-nav-toggle::-webkit-details-marker { display: none; }
.seo-nav-icon, .seo-nav-icon::before, .seo-nav-icon::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--px-quiet);           /* muted, not gold */
  border-radius: 2px;
  position: relative;
  transition: background 160ms ease;
}
.seo-nav-icon::before { position: absolute; top: -6px; }
.seo-nav-icon::after { position: absolute; top: 6px; }
/* Hover (while closed): hamburger brightens toward white — the muted-to-active nav cue. */
.seo-nav:not([open]) .seo-nav-toggle:hover .seo-nav-icon,
.seo-nav:not([open]) .seo-nav-toggle:hover .seo-nav-icon::before,
.seo-nav:not([open]) .seo-nav-toggle:hover .seo-nav-icon::after { background: var(--px-white); }

/* ── Close-X ──
   The SAME <summary> is the only toggle. Closed: hamburger shown, X hidden. Open: hamburger hidden,
   X shown — so one click always toggles, and the X is the exit (essential on the mobile full-screen
   overlay where the header hamburger is behind the panel). Glyph matches the canonical modal close:
   muted ~50% white, thin, brightens on hover. */
.seo-nav-close { display: none; width: 20px; height: 20px; position: relative; }
.seo-nav-close::before, .seo-nav-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  transition: background 160ms ease;
}
.seo-nav-close::before { transform: rotate(45deg); }
.seo-nav-close::after  { transform: rotate(-45deg); }
.seo-nav[open] .seo-nav-icon { display: none; }
.seo-nav[open] .seo-nav-close { display: block; }
.seo-nav[open] .seo-nav-toggle:hover .seo-nav-close::before,
.seo-nav[open] .seo-nav-toggle:hover .seo-nav-close::after { background: var(--px-white); }
/* When open, lift the toggle above the panel so the X sits at the panel's top-right corner and
   stays clickable (on desktop it floats over the dropdown corner; on mobile it pins to the
   fixed overlay's top-right — see the mobile block below). */
.seo-nav[open] .seo-nav-toggle { position: relative; z-index: 50; }

/* ── The panel ──
   DESKTOP DEFAULT: a category grid dropdown anchored under the icon (multi-column). */
.seo-nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 40;
  width: min(560px, 80vw);
  max-height: 72vh;
  overflow-y: auto;
  padding: 26px 28px;
  background: var(--px-surface);
  border: 1px solid var(--px-hairline);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
.seo-nav-group-label {
  display: block;
  font-family: var(--px-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--px-gold);
  margin-bottom: 10px;
}
.seo-nav-group ul { list-style: none; margin: 0; padding: 0; }
.seo-nav-group li { margin: 0; }
.seo-nav-group a {
  display: block;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font-family: var(--px-sans);
  font-size: 15px;
  color: var(--px-content);
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}
.seo-nav-group a:hover {
  color: var(--px-white);
  background: rgba(212, 184, 126, 0.1);   /* subtle gold wash on hover */
}

/* ── MOBILE: full-screen overlay ──
   At ≤640px the dropdown becomes a full-viewport panel: the whole menu takes the screen, one
   column, comfortable tap targets. */
@media (max-width: 640px) {
  .seo-nav-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 72px 24px 40px;
    grid-template-columns: 1fr;
    gap: 28px;
    box-shadow: none;
  }
  .seo-nav-group a { padding: 12px 12px; font-size: 17px; }
  /* When open, pin the toggle (now showing the X) to the overlay's top-right, fixed above the
     full-screen panel, so the close is always reachable — the header hamburger is behind the
     panel and would otherwise leave no exit. */
  .seo-nav[open] .seo-nav-toggle {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 60;
    width: 40px;
    height: 40px;
  }
}

/* Pagination — used on /concerns and /learn index pages to split large lists across pages */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 0 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  color: #c4a44e;
  text-decoration: none;
  border: 1px solid rgba(196, 164, 78, 0.25);
  transition: background 0.15s, border-color 0.15s;
}
.pagination a:hover {
  background: rgba(196, 164, 78, 0.12);
  border-color: rgba(196, 164, 78, 0.5);
}
.pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(196, 164, 78, 0.18);
  color: #c4a44e;
  font-weight: 600;
  border: 1px solid rgba(196, 164, 78, 0.4);
}
.pagination-ellipsis {
  color: rgba(255, 255, 255, 0.35);
  padding: 0 4px;
}

/* ── Site footer: the reachability bridge (scripts/seo/site-footer.js) ───────── */
.site-footer { border-top: 1px solid var(--px-hairline-soft, rgba(255,255,255,0.07)); }
.site-footer .shell { padding-top: 44px; padding-bottom: 52px; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}
.footer-col h2 {
  font-family: var(--px-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-gold, #d4b87e);
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 9px; padding: 0; }
.footer-col li:last-child { margin-bottom: 0; }
.footer-col a,
.footer-learn a {
  font-family: var(--px-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--px-quiet, #c9c9cf);
  text-decoration: none;
}
.footer-col a:hover,
.footer-learn a:hover {
  color: var(--px-white, #ffffff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* /learn — set apart from the product nav on purpose (audience: search-strangers). */
.footer-learn {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--px-hairline-soft, rgba(255,255,255,0.07));
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-learn h2 {
  font-family: var(--px-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-gold, #d4b87e);
  margin: 0;
  padding: 0;
  border: 0;
}
.footer-learn p {
  margin: 0;
  font-family: var(--px-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--px-quiet, #c9c9cf);
}
.footer-learn a { white-space: nowrap; }
/* Baseline row: wordmark + copyright, echoing the header wordmark. */
.footer-base {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--px-hairline-soft, rgba(255,255,255,0.07));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer .wordmark {
  font-family: var(--px-serif, 'Playfair Display', Georgia, serif);
  font-size: 17px;
  color: var(--px-white, #ffffff);
  text-decoration: none;
}
.site-footer .wordmark:hover { color: var(--px-gold, #d4b87e); }
.footer-legal {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-legal a,
.footer-legal span {
  font-family: var(--px-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  color: var(--px-quiet, #c9c9cf);
  text-decoration: none;
}
.footer-legal a:hover {
  color: var(--px-white, #ffffff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 480px) {
  .site-footer .shell { padding-top: 36px; padding-bottom: 44px; }
  .footer-cols { gap: 26px 16px; }
  .footer-learn { margin-top: 30px; padding-top: 24px; }
  .footer-base { margin-top: 30px; }
}