/* ============================================================
   DispuPoint master stylesheet - CIVIC token layer (step 1)
   Serves at: https://www.dispupoint.com/style.css
   One file, every page links to it.

   s176 -> Civic, STEP 1 (tokens + paint + base type/shape ONLY):
   - Introduces the Civic token set and re-points every existing s176
     token AND every legacy shim alias to its Civic equivalent, so the
     whole site recolors to Civic neutrals/cream/ink/hairline with nothing
     undefined. Square corners (radius tokens = 0), structure from 1px
     hairlines, no shadows, native font stacks (zero download).
   - Component STRUCTURE, the publisher, the worker/LPs are NOT touched
     (later steps). Reversible by this one file.

   KNOWN INTERIM (expected, not a bug):
   One old accent drove links + buttons + accent marks at once. This step
   maps it UNIFORMLY to --lake, so body LINKS are correct Civic blue, but
   primary BUTTONS and ACCENT/STAR marks read flat lake until:
     - step 2 (buttons)     -> .btn-solid : --deep
     - component step       -> accents     : --brick
   The Civic text-color token is named --text (not --body) to avoid the
   existing --body font-alias used by warm-page component CSS.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- CIVIC neutral / surface ---- */
  --paper: #F3F0E7;        /* page background (warm newsprint) */
  --surface: #FFFFFF;      /* white blocks */
  --surface-alt: #FAF8F2;  /* alt surface; card + table-header fills */
  --ink: #16191D;          /* headings, near-black, wordmark */
  --text: #34383D;         /* body copy (renamed from --body to dodge the font-alias collision) */
  --muted: #6B6F6A;        /* muted text, captions, labels */
  --hairline: #D8D2C4;     /* 1px borders/dividers - structure */

  /* ---- CIVIC brand / structure ---- */
  --deep: #16323F;         /* primary buttons (arrives in step 2) */
  --deep-hover: #0E242E;
  --lake: #1C4B68;         /* links (interim: also buttons + accents this step) */
  --lake-hover: #143548;
  --flag: #2C9FD6;         /* focus ring + info accent */
  --flag-soft: #7FC4E6;
  --brick: #B5392F;        /* accent / star (arrives in the component step) */

  /* ---- CIVIC semantic ---- */
  --caution: #9A6B1E;  --caution-bg: #F4EAD6;
  --alert: #B5392F;    --alert-bg: #F6E6E2;
  --info-bg: #E8EEF1;
  --success: #2E6B4F;  --success-bg: #E4EEE8;

  /* ---- CIVIC fonts (native stacks, zero download) ---- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Charter, "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- CIVIC type scale (serif headings, sans body, mono labels) ---- */
  --fs-display: 46px; --lh-display: 1.02; --tk-display: -0.025em;
  --fs-h1: 36px;      --lh-h1: 1.1;       --tk-h1: -0.02em;
  --fs-h2: 28px;      --lh-h2: 1.15;      --tk-h2: -0.015em;
  --fs-h3: 22px;      --lh-h3: 1.2;
  --fs-body: 16px;    --lh-body: 1.6;
  --fs-small: 14px;   --lh-small: 1.55;
  --fs-label: 11px;   --tk-label: 0.16em;
  --weight-heading: 700; --weight-body: 400;

  /* ---- CIVIC shape: square everywhere; structure from 1px hairlines; no shadows ---- */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --shadow-sm: none; --shadow-drawer: none;

  /* ---- CIVIC spacing (8px scale: 4 8 12 16 24 32 48 64) ---- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-12: 0.75rem; /* 12 */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.5rem;   /* 24 */
  --space-5: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-64: 4rem;    /* 64 */

  /* ---- layout ---- */
  --content-max: 760px; --wide-max: 1100px;

  /* ---- legacy type tokens kept (px sizes still referenced by component CSS) ---- */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem;
  --h1-size: var(--fs-h1);
  --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75;
  --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: var(--tk-label);

  /* ============================================================
     RECOLOR SHIM - every existing s176 token + legacy page alias now
     resolves to Civic. Re-pointed, nothing removed -> no undefined var.
     ============================================================ */
  /* s176 --color-* tokens */
  --color-ink:        var(--ink);
  --color-ink-2:      var(--text);
  --color-ink-3:      var(--muted);
  --color-surface:    var(--paper);
  --color-surface-2:  var(--surface);
  --color-card:       var(--surface-alt);
  --color-border:     var(--hairline);
  --color-terracotta:      var(--lake);   /* INTERIM: links correct; buttons/accents read flat-lake until step 2 */
  --color-terracotta-dark: var(--lake);
  --color-teal:       var(--success);
  --color-amber-bg:   var(--caution-bg);
  --color-amber-ink:  var(--caution);
  --font-serif:       var(--serif);
  --font-sans:        var(--sans);
  /* legacy page / warm / pricing aliases */
  --black:        var(--ink);
  --off-white:    var(--paper);
  --mid-gray:     var(--muted);
  --light-gray:   var(--surface-alt);
  --border:       var(--hairline);
  --rust:         var(--lake);
  --rust-d:       var(--lake);
  --bg:           var(--paper);
  --bg-card:      var(--surface-alt);
  --bg-paper:     var(--surface-alt);
  --ink-soft:     var(--text);
  --ink-muted:    var(--muted);
  --rule:         var(--hairline);
  --rule-strong:  var(--hairline);
  --accent:       var(--ink);
  --accent-warm:  var(--lake);
  --redact:       var(--ink);
  --display:      var(--serif);
  --body:         var(--sans);            /* stays a FONT alias - the Civic text color is --text */
  --text-secondary:  var(--text);
  --text-tertiary:   var(--muted);
  --border-tertiary: var(--hairline);
  --teal-600:        var(--success);
  --amber-50:        var(--caution-bg);
  --amber-900:       var(--caution);
  --dp-tint:         rgba(28, 75, 104, 0.07);  /* lake tint (was terracotta) */
  --dp-tint-strong:  rgba(28, 75, 104, 0.12);
  --row-green-tint:  rgba(46, 107, 79, 0.06);  /* success tint */
}

/* ============================================================
   BASE TYPOGRAPHY (Civic scale; selector-safe)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: var(--weight-heading);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tk-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tk-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h5 { font-size: var(--text-md); line-height: var(--leading-snug); }
h6 { /* Civic mono label */
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tk-label);
  color: var(--muted);
}

p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
li { margin-bottom: var(--space-1); }
strong, b { color: var(--ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-5) 0; }
img { max-width: 100%; height: auto; }

/* ============================================================
   LINKS (Civic lake; scoped to content via main a, leaving nav/footer/logo)
   Interim: hover stays lake; step 2 wires --lake-hover.
   ============================================================ */
main a:not(.btn) {
  color: var(--lake);
  text-decoration: underline;
  text-underline-offset: 2px;
}
main a:not(.btn):hover { color: var(--lake); }

/* wordmark - keep black/ink, no underline */
.nav-logo, .footer-logo { color: var(--ink); text-decoration: none; }

/* ============================================================
   CANONICAL BUTTON SYSTEM (Civic step 2)
   Primary = deep navy, Secondary = deep outline, Tertiary = lake text link.
   Square, 15/600 sans, 13x26 padding, >=44px tap target.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 26px;
  min-height: 44px;
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* primary */
.btn-solid { background: var(--deep); color: #fff; border-color: var(--deep); }
.btn-solid:hover { background: var(--deep-hover); border-color: var(--deep-hover); }
/* secondary */
.btn-outline { background: transparent; color: var(--deep); border-color: var(--deep); }
.btn-outline:hover { background: var(--deep); color: #fff; border-color: var(--deep); }
/* tertiary: plain underlined lake link, no box */
.btn-text { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--lake); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.btn-text:hover { color: var(--lake-hover); background: none; }
/* disabled */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"], .btn-disabled {
  background: #E7E3D9; color: #9aa0a3; border-color: #E7E3D9; cursor: not-allowed; pointer-events: none;
}
/* optional leading star for main conversion CTAs.
   --brick on --deep = 2.3:1 (fails 3:1 UI-graphic), so the star uses --flag-soft (7:1). */
.btn-star::before { content: "\2605"; color: var(--flag-soft); margin-right: 0.4em; font-size: 0.9em; line-height: 1; }

/* mobile-menu CTA: re-skin to canonical deep + square; keep its full-width drawer layout */
.mobile-menu .mobile-menu-cta { background: var(--deep); border-radius: 0; min-height: 44px; }
.mobile-menu .mobile-menu-cta:hover { background: var(--deep-hover); }

/* ============================================================
   FOCUS (Civic flag ring, global)
   ============================================================ */
:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }

/* ============================================================
   HEADER + FOOTER re-skin (Civic step 3)
   Overrides the per-page inline nav/footer CSS via minimally-higher
   specificity (style.css loads before the inline <style>). No HTML edits;
   the menu JS keys on .active classes, untouched.
   Already Civic from step 1/2: nav paper bg + hairline border + no shadow,
   ink serif wordmark, ink hamburger bars, paper drawer, hairline dividers,
   deep/square menu CTA.
   ============================================================ */

/* nav links -> ink, semibold */
nav .nav-links a { color: var(--ink); font-weight: 600; }

/* mobile menu -> full-width stacked panel, no shadow (slide + JS unchanged) */
body .mobile-menu { width: 100%; max-width: 100%; box-shadow: none; }

/* footer -> deep band, light text, translucent dividers; logo light on dark (approved) */
body footer { background: var(--deep); color: var(--hairline); }
footer .footer-logo { color: var(--paper); }
footer .footer-tagline,
footer .footer-links a,
footer .footer-copy { color: var(--hairline); }
footer .footer-links a:hover { color: var(--paper); }
footer .footer-top { border-bottom-color: rgba(255, 255, 255, 0.14); }
footer .footer-divider { border-top-color: rgba(255, 255, 255, 0.14); }

/* ============================================================
   CANONICAL CARD (Civic step 4)
   One card: white surface, 1px hairline, square, no shadow, 24px padding.
   Feature variant adds a 3px --lake top accent. Overrides the per-page
   inline card CSS via the `body ` specificity bump. CSS-only, no markup.
   Collapses: .fit-card .receive-card .case-card .compare-card (hand) +
   .blog-card .microviz-card (generated - this is a shared-sheet override,
   so a blog regeneration can't revert it; publisher.py structural sync later).
   Left DISTINCT (untouched here except price shadow): .price-card (offer
   block), .form-card (interactive selector w/ .active), .exhibit-tile (flip).
   ============================================================ */
body .fit-card,
body .receive-card,
body .case-card,
body .compare-card,
body .blog-card,
body .microviz-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem;
}
/* feature variant: 3px lake top accent */
body .receive-card { border-top: 3px solid var(--lake); }
/* kicker -> mono muted */
body .case-card .eyebrow,
body .microviz-card .mv-type { font-family: var(--mono); color: var(--muted); }
/* price block stays distinct; drop its box-shadow for Civic no-shadow */
body .price-card { box-shadow: none; }

/* blog index: 2-col card grid desktop, 1 col under 700px (step 4b - layout only).
   Overrides both indexes' inline .blog-cards (IL = display:block, /blog/ = 1-col
   grid). Canonical card styling from step 4 unchanged; gap on the 8px scale;
   card margins neutralized so the grid gap controls spacing. CSS-only - the same
   wrapper class is generated by publisher.py, so this covers regenerated output. */
body .blog-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}
body .blog-cards .blog-card { margin: 0; }
@media (max-width: 700px) {
  body .blog-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   CANONICAL COMPARISON TABLE (Civic step 5)
   Desktop: deep header row, lake "ours" column (.col-dp), mono comparison
   marks, hairline rules, square, no shadow. Overrides the inline per-page
   table CSS via `body .comparison-table` specificity.
   Mobile (<700px): reflow to stacked row-cards using data-label (added to
   data cells) - NO horizontal scroll; the "ours" value reads emphasized (lake).
   All 9 tables are hand pages (real <table>, real text).
   ============================================================ */

/* --- desktop paint --- */
body .comparison-table { background: var(--surface); border-collapse: collapse; }
body .comparison-table thead th { background: var(--deep); color: #fff; border-bottom: 1px solid var(--deep); font-weight: 600; }
body .comparison-table thead th.col-dp { background: var(--lake); }            /* "ours" header = lake */
body .comparison-table td { border-bottom: 1px solid var(--hairline); }
body .comparison-table tbody th { background: var(--surface-alt); }            /* glossary row-label th */
body .comparison-table td.col-dp { background: rgba(28, 75, 104, 0.07); font-weight: 600; }  /* "ours" column tint + weight */
body .comparison-table tr.row-statutes td.col-dp { background: rgba(28, 75, 104, 0.07); }     /* keep "ours" lake even in the statutes row (beats 3-class inline) */
body .comparison-table .yes { color: var(--success); }
body .comparison-table .no, body .comparison-table .partial, body .comparison-table .varies { color: var(--muted); }
body .comparison-table .yes, body .comparison-table .no, body .comparison-table .partial, body .comparison-table .varies { font-family: var(--mono); font-weight: 600; }  /* mono marks */

/* --- mobile reflow: stacked row-cards, no horizontal scroll --- */
@media (max-width: 700px) {
  body .comparison-wrap { overflow-x: visible; margin: 0; padding: 0; }
  body .comparison-table { display: block; min-width: 0; overflow-x: visible; font-size: 15px; }
  body .comparison-table thead { display: none; }
  body .comparison-table tbody { display: block; }
  body .comparison-table tr {
    display: block; background: var(--surface);
    border: 1px solid var(--hairline); margin: 0 0 1rem; padding: 0;
  }
  body .comparison-table tr:last-child { margin-bottom: 0; }
  /* row label -> card title */
  body .comparison-table tbody tr > th:first-child,
  body .comparison-table tbody tr > td:first-child {
    display: block; width: auto; background: var(--surface-alt);
    font-family: var(--serif); font-weight: 700; color: var(--ink);
    padding: 12px 16px; border-bottom: 1px solid var(--hairline);
  }
  /* data cells -> labeled rows */
  body .comparison-table td[data-label] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 10px 16px; border-top: 0; border-bottom: 1px solid var(--hairline);
  }
  body .comparison-table tr td[data-label]:last-child { border-bottom: 0; }
  body .comparison-table td[data-label]::before {
    content: attr(data-label); font-family: var(--mono); text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 11px; color: var(--muted); flex: 0 0 auto;
  }
  /* "ours" emphasized inside each card */
  body .comparison-table td.col-dp { background: rgba(28, 75, 104, 0.07); color: var(--lake); font-weight: 600; }
  body .comparison-table td.col-dp::before { color: var(--lake); }
}

/* ============================================================
   CANONICAL FAQ (Civic step 6) - always-open Q&A, no accordion, no JS.
   All patterns -> serif question + body answer + hairline rule between
   pairs, square, no shadow, generous spacing. Forces answers visible
   (overrides the old homepage accordion display:none). CSS-only; the
   shared sheet covers generated blog FAQs too. FAQPage JSON-LD untouched.
   ============================================================ */
body .faq-answer { display: block; }   /* always open (was accordion display:none) */
body .faq-icon { display: none; }       /* retired +/- marker (markup also removed on homepage) */
/* question: serif, ink, H3-ish */
body .faq-question,
body .faq-item h3,
body .faq-q {
  font-family: var(--serif); color: var(--ink);
  font-size: 18px; font-weight: 600; line-height: 1.35;
  margin: 0 0 0.5rem; cursor: default;
}
/* answer: body copy */
body .faq-answer,
body .faq-item p,
body .faq-a {
  font-family: var(--sans); color: var(--text);
  font-size: 16px; line-height: 1.7; margin: 0;
}
/* pair separation: hairline rule, square, generous spacing */
body .faq-item,
body .faq-pair {
  border-bottom: 1px solid var(--hairline);
  padding: 1.25rem 0; margin: 0;
}
body .faq-item:last-child,
body .faq-pair:last-child { border-bottom: 0; }

/* ============================================================
   CANONICAL CALLOUT FAMILY (Civic step 7a)
   5 reserved semantic types (each = reserved bg + 3px left border, square,
   no shadow) + a neutral statement treatment (3px --lake left border, NO
   fill). Existing one-off boxes aliased to their approved type. CSS-only.
   Semantic point: a deadline must never look like a tip. Per the approved
   mapping, success/caution/alert are DEFINED-BUT-UNUSED on the marketing
   site for now (no green badges); proof points read as quiet evidence
   (neutral statement), not success.
   ============================================================ */

/* INFO (in-plain-English): --info-bg fill + 3px --lake left border */
.callout-info,
body .review-callout, body .credit-block, body .processor-block,
body .case-access-box, body .portal-callout, body .referral-statement {
  background: var(--info-bg);
  border: 0; border-left: 3px solid var(--lake);
  border-radius: 0; box-shadow: none;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.callout-info .star { color: var(--brick); }   /* optional leading star (unused for now) */

/* NEUTRAL STATEMENT: 3px --lake left border, NO fill (brand/values + proof points) */
.callout-statement,
body .believe-callout, body .statement-box, body .closing-box,
body .proof-callout, body .stat-callout {
  background: transparent;
  border: 0; border-left: 3px solid var(--lake);
  border-radius: 0; box-shadow: none;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}

/* CAUTION / deadline (reserved) */
.callout-caution { background: var(--caution-bg); border: 0; border-left: 3px solid var(--caution); border-radius: 0; box-shadow: none; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
/* IMPORTANT / error (reserved) */
.callout-alert   { background: var(--alert-bg);   border: 0; border-left: 3px solid var(--alert);   border-radius: 0; box-shadow: none; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
/* SUCCESS / confirmation (reserved) */
.callout-success { background: var(--success-bg); border: 0; border-left: 3px solid var(--success); border-radius: 0; box-shadow: none; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }

/* DISCLAIMER: hairline box, no fill, --muted text, square */
.callout-disclaimer,
body .page-disclaimer, body .highlight-box {
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 0; box-shadow: none;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
  color: var(--muted);
}

/* ============================================================
   STEPS + REVIEWER + PULL QUOTES + ACCENT CLEANUP (Civic step 7b)
   CSS-only. Ornamental accents -> --brick (links stay --lake, buttons --deep).
   ============================================================ */

/* STEPS: mono --brick numeral across all 3 patterns (referral .step-num,
   homepage .step-v-num, what-you-get .seq-num); square the what-you-get
   numeral tile. Layouts kept (vertical numbered-list + horizontal rail). */
body .step-num, body .step-v-num, body .seq-num {
  font-family: var(--mono); font-style: normal; color: var(--brick);
}
body .seq-num { border-radius: 0; }   /* square the numeral tile (was circle) */

/* REVIEWER: standard .reviewed = name + mono meta, hairline top, square.
   Pricing .reviewer-trust-block stays distinct - just square its photo. */
body .reviewed { border-top: 1px solid var(--hairline); box-shadow: none; }
body .reviewed .timestamp { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); }
body .reviewer-photo-link img { border-radius: 0; }

/* PULL QUOTES: one canonical - serif italic, 3px --brick left rule, square */
body .pullquote, body .pull, body .article-body blockquote {
  font-family: var(--serif); font-style: italic; color: var(--ink);
  border: 0; border-left: 3px solid var(--brick); border-radius: 0;
  padding: 0.25rem 0 0.25rem 1.5rem; margin: 2rem 0;
  box-shadow: none;
}

/* ACCENT CLEANUP: decorative accent borders -> --brick */
body .compare-others { border-left-color: var(--brick); }

/* ============================================================
   MONO LABELS (Civic step 7c)
   Eyebrow/kicker/section-label text -> mono 11px uppercase, ls 0.16em,
   --muted default / --brick for true category marks. CSS-only group rule.
   Finishes the deferred --accent-warm label (.bucket-label) and drops the
   green .cta-eyebrow. Already-mono (h6 step 1; .case-card .eyebrow + .mv-type
   step 4) not re-touched. Real headings/body/links/buttons untouched.
   ============================================================ */
body .eyebrow,
body .eyebrow-label,
body .section-tag,
body .page-tag,
body .hero-tag,
body .believe-tag,
body .bucket-label,
body .price-card .cta-eyebrow,
body .howto .howto-label,
body .donow-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
/* true category marks -> brick (blog "How to" / "Do now") */
body .howto .howto-label,
body .donow-label { color: var(--brick); }
/* deferred 2px section accents -> brick (.exhibit-detail stays for the flip-card step) */
body .doc-excerpt, body .form-detail { border-left-color: var(--brick); }

/* ============================================================
   FLIP CARDS + EXHIBIT SELECTOR (Civic step 8) - what-you-get only.
   Already square + hairline + no shadow (no radii; --rule*→hairline). This
   adds the deferred brick ornament accents + mono labels. Keyboard fix
   (role/tabindex/keydown) is in the markup/JS, not here.
   ============================================================ */
body .flip-corner::after { color: var(--brick); }          /* the "↻" refresh glyph */
body .exhibit-tile .tag { color: var(--brick); }            /* the A-F exhibit letter (kept serif) */
body .exhibit-detail { border-left-color: var(--brick); }   /* 2px accent border */
body .flip-corner, body .exhibit-detail .label { font-family: var(--mono); color: var(--muted); }
body .flip-tag { font-family: var(--mono); color: var(--brick); }   /* category mark */

/* ============================================================
   CIVIC STEP 11 — canonical deep-band header + center-lock + breadcrumbs
   Overrides the inline per-page nav{} (body nav = 0,0,2 > inline nav = 0,0,1).
   CSS-only; covers all 47 hand pages + generated blog (identical nav markup).
   ============================================================ */

/* deep band + grid center-lock (replaces the inline flex space-between = the wobble) */
body nav {
  background: var(--deep);
  border-bottom: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* center col is viewport-centered, independent of side widths */
  align-items: center;
  column-gap: 1.5rem;
}
body nav .nav-logo    { justify-self: start; color: #fff; font-size: 24px; line-height: 1; }  /* larger pure-white wordmark; line-height:1 centers it tightly */
body nav .nav-links   { justify-self: center; gap: 1.25rem; margin: 0; } /* locked center zone; margin:0 resets the default <ul> bottom-margin so links sit on the centerline */
body nav .nav-actions { justify-self: end; }                         /* right zone */
/* nav-scale buttons (smaller than hero CTAs); nowrap + no-shrink so they stay one line and the 3 zones fit viewport-centered */
body nav .nav-actions .btn { font-size: 14px; padding: 8px 14px; min-height: 0; white-space: nowrap; flex-shrink: 0; }

/* light nav links + active underline */
body nav .nav-links a { color: #fff; font-weight: 500; }
body nav .nav-links a:hover { color: #fff; opacity: 1; }
body nav .nav-links a[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--paper); padding-bottom: 4px; }

/* light divider + hamburger bars */
body nav .nav-divider { background: rgba(255, 255, 255, 0.18); }
body nav .hamburger-line { background: var(--paper); }

/* right-zone buttons recolored for the deep band */
body nav .nav-actions .btn-outline { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.45); }
body nav .nav-actions .btn-outline:hover { background: var(--paper); color: var(--deep); border-color: var(--paper); }
body nav .nav-actions .btn-solid { background: var(--brick); color: #fff; border-color: var(--brick); }
body nav .nav-actions .btn-solid:hover { background: #97271e; border-color: #97271e; }
/* canonical star on the nav CTA (flag-soft per the established button rule) */
body nav .nav-actions .btn-solid::before { content: "\2605"; color: var(--flag-soft); margin-right: 0.4em; font-size: 0.9em; line-height: 1; }

/* pricing has no "Start your case" -> reserve its exact slot so "My account" stays pixel-frozen.
   Spacer mirrors the brick CTA box; the star footprint (0.9em glyph + 0.4em margin = 1.3em) is
   replicated as extra left padding so the reserved width equals the real button. */
body nav .nav-actions:not(:has(.btn-solid))::after {
  content: "Start your case";
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 14px;
  padding-left: calc(14px + 1.14em);   /* 14px pad + star footprint (0.82em glyph + 0.4em margin), matched to the real CTA */
  border: 1px solid transparent;
  min-height: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

/* mobile (<1024px): nav-links/actions hidden + hamburger shown -> revert grid to flex
   (wordmark left, hamburger right). Deep band + white marks still apply. */
@media (max-width: 1024px) {
  body nav { display: flex; justify-content: space-between; column-gap: 0; }
}

/* mono breadcrumbs: restyle the 32 existing + style the 14 added (generated pages covered too) */
body p.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  padding: 1.25rem 0 0;
  margin: 0 0 2rem;   /* uniform gap below the breadcrumb to the hero kicker */
}
body p.breadcrumb a { color: var(--muted); text-decoration: none; }
body p.breadcrumb a:hover { color: var(--lake); opacity: 1; }

/* ============================================================
   CIVIC HERO ROLLOUT + LAKE CARD-BARS
   ============================================================ */

/* PART A - hero kicker: mono uppercase BRICK. p.page-tag (0,1,2) beats each page's inline generic
   `.container p` / `.article-body p` rules (0,1,2 > 0,1,1); .page-tag + blog .eyebrow-label are hero-only. */
body p.page-tag, body p.eyebrow-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brick);
  line-height: 1.4;
  margin: 0 0 0.85rem;
}

/* PART A - canonical one-line subtitle (muted sans); p.subhead (0,1,2) beats the inline generic p rules */
body p.subhead { font-family: var(--sans); font-size: 17px; font-weight: 400; color: var(--muted); line-height: 1.55; margin: 0.5rem 0 0; }
/* principles' inline `.page-header p.subhead` is (0,2,1) — beat it on the page-header pages */
body .page-header p.subhead { color: var(--muted); }

/* PART A - uniform hero top-spacing. The breadcrumb position used to track each container's top-padding
   (0/40/56/64px). Zero it on the offending container TYPES so the breadcrumb's own 1.25rem padding lands it
   at ~20px everywhere; the breadcrumb margin-bottom (set above) + page-header padding-top:0 give one hero
   start on every subpage. Supersedes the polish-step pricing-only negative-margin breadcrumb rule. */
body article.container,
body .page-wrap,
body .article-wrap,
body .blog-wrap { padding-top: 0; }
body .page-header { padding-top: 0; }
body .hero-block { padding-top: 0; }   /* pricing's hero-block had 1rem top -> kicker rode 16px low */

/* PART B - lake fixed-height title bands on blog cards + compare boxes. The band is the card's <h2>, pulled
   full-width (negative margin = -card-padding), fixed height = 2 title lines, vertically centered, with a
   2-line clamp + overflow:hidden so a long title clamps with an ellipsis and never grows or spills the band. */
body .blog-card h2,
body .compare-card h2 {
  background: var(--lake);
  color: var(--paper);
  display: flex;
  align-items: center;        /* vertically center the title in the fixed band (1-line -> middle; 2-line -> fills + centers) */
  overflow: hidden;           /* fixed-height band clips anything past ~2 lines; titles are <=2 lines */
  font-weight: 500;
  letter-spacing: -0.01em;
}
body .blog-card h2    { margin: -1.5rem -1.5rem 1.5rem; padding: 0 1.4rem; height: 5rem; font-size: 19px; line-height: 1.3; }
body .compare-card h2 { margin: -28px -24px 1.5rem;     padding: 0 24px;   height: 5rem; font-size: 20px; line-height: 1.3; }
/* The content under the band sits in an evenly-padded zone: the band's 1.5rem bottom-margin (space ABOVE
   the description) matches the card's 1.5rem bottom padding (space BELOW) -> balanced, same on both surfaces,
   not flush to the band. Compare cards keep equal-height per row (height:100% + stretched grid); a shorter
   card's extra space sits below the padded content (expected). Bands stay fixed 80px + uniform. */
body .compare-card { height: 100%; padding-bottom: 1.5rem; }
body .compare-grid { align-items: stretch; }