/* longislandpropertytax.com
 * Cool coastal palette — cedar gray, navy, sea-glass green.
 * Clean SaaS structure (Linear/Stripe), Long Island visual identity.
 */

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Fraunces — editorial serif used for hero amounts and section heads on the
   calculator result card. Variable axis: weight 400-700, opsz 9-144. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Cool coastal surfaces */
  --bg: #f5f4f0;
  --surface: #eceae3;
  --surface-2: #e2dfd5;
  --surface-elevated: #ffffff;
  --hero-glow: rgba(45, 106, 81, 0.10);

  /* Borders */
  --border: #d8d4c8;
  --border-strong: #a8a497;
  --divider: #e6e3da;

  /* Text — slate */
  --text: #18202b;
  --text-secondary: #44505d;
  /* WCAG AA: #79808a was failing 4.5:1 against white/cream backgrounds. #5e6670
     passes everywhere we use --text-muted (nav, breadcrumbs, footer, stat labels,
     muted em, callout subtext) and still reads as visually "muted." */
  --text-muted: #5e6670;
  --text-faint: #b3b8be;
  --text-inverse: #ffffff;

  /* Brand mark — Atlantic navy */
  --brand-mark: #0b2545;
  --navy: #0b2545;
  --navy-2: #143257;

  /* Accent — sea-glass green */
  --accent: #2d6a51;
  --accent-hover: #235641;
  --accent-bg: #ecf5ef;
  --accent-text: #235641;

  /* Aliases used by newer components (mobile nav, calculators, watch). */
  /* These exist so the new CSS reads naturally with var(--brand) etc. */
  --brand: var(--accent);
  --brand-hover: var(--accent-hover);
  --border-strong: var(--border);
  --surface-2: #e7e4dc;
  --surface-elevated: var(--bg);
  --text-secondary: var(--text);
  --divider: var(--border);
  --negative: #8a2424;
  --negative-bg: #fdecec;
  --hero-glow: rgba(45,106,81,0.06);
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --shadow-sm: 0 1px 2px rgba(11,37,69,0.06);

  /* Semantic */
  --positive: #2d6a51;
  --positive-bg: #ecf5ef;
  --warning: #6b4a18;
  --warning-bg: #f4ecd8;
  --negative: #8a2424;
  --negative-bg: #f7e7e3;
  --info: #1d4e89;
  --info-bg: #e7eef7;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* Editorial serif for hero amounts. Falls back to Georgia gracefully. */
  --font-display: 'Fraunces', 'Georgia', serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(11,37,69,0.04);
  --shadow-sm: 0 1px 3px rgba(11,37,69,0.06), 0 1px 2px rgba(11,37,69,0.04);
  --shadow-md: 0 4px 12px rgba(11,37,69,0.06), 0 2px 4px rgba(11,37,69,0.04);
  --shadow-lg: 0 12px 32px rgba(11,37,69,0.08);

  --content-narrow: 640px;
  --content-default: 1120px;
  --content-wide: 1280px;

  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--text); }
p, li { line-height: 1.55; }
a { color: var(--text); text-decoration: none; transition: var(--transition); }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; transition: var(--transition); }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: white; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Layout
   ============================================================ */
.container { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); }
.container-wide { max-width: var(--content-wide); }
.container-narrow { max-width: var(--content-narrow); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; color: var(--text);
  letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
}
.nav__brand:hover { color: var(--text); }
.nav__brand-mark {
  width: 26px; height: 26px;
  color: var(--brand-mark);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .nav__brand-text { font-size: 13px; }
}
.nav__links { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.nav__link {
  /* WCAG AA contrast: use --text-secondary (#44505d) instead of --text-muted (#79808a).
     #44505d on the nav's near-white background passes 4.5:1, the muted gray didn't. */
  color: var(--text-secondary);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link.is-active { color: var(--text); background: var(--surface-2); }
.nav__link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Honeypot field for spam forms — keep accessible to screen readers but visually
   off-screen so real users never see or interact with it. Bots that fill every field
   trip it and the server silently drops their submission. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: var(--space-24) 0 var(--space-16);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--hero-glow) 0%, transparent 70%),
    var(--bg);
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) { .hero { padding: var(--space-16) 0 var(--space-10); } }

.hero__pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 12px 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-weight: 500;
  font-family: var(--font-mono);
}
.hero__pill__dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }

.hero__title {
  font-size: var(--text-5xl);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-5);
  max-width: 18ch;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 56ch;
  line-height: 1.5;
  margin-bottom: var(--space-10);
}

/* ============================================================
   Search
   ============================================================ */
.search { position: relative; max-width: 640px; margin-bottom: var(--space-6); }

/* Google-style pill search field. The field is a flex row with a soft
   floating shadow that lifts on hover/focus. When the dropdown is open
   the bottom corners flatten so the input + dropdown read as one shape. */
.search__field {
  display: flex; align-items: center;
  background: var(--surface-elevated, #fff);
  border: 1px solid var(--border, #e2dccd);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  box-shadow: 0 1px 6px rgba(11, 37, 69, 0.04);
  transition: box-shadow 180ms, border-color 180ms, border-radius 180ms;
}
.search__field:hover {
  box-shadow: 0 2px 12px rgba(11, 37, 69, 0.08);
  border-color: var(--border-strong, #c9bfa6);
}
.search__field:focus-within {
  border-color: var(--border-strong, #c9bfa6);
  box-shadow: 0 4px 16px rgba(11, 37, 69, 0.10);
}
/* When the dropdown is open, flatten the field's bottom corners so the
   input visually merges with the dropdown below it. Same shadow continues
   down past the field so the two shapes share their elevation. */
.search:has(.search__suggestions.is-open) .search__field {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 transparent;
}
.search__icon {
  width: 20px; height: 20px;
  color: var(--text-muted, #5e6670);
  flex-shrink: 0; margin-right: 14px;
}
.search__input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 12px 0; font-size: 16px; color: var(--text); min-width: 0;
  font-family: inherit;
}
.search__input::placeholder { color: var(--text-faint, #8a8f96); }
.search__btn {
  background: var(--navy, var(--text, #0b2545));
  color: #fff;
  padding: 0 20px; border-radius: 999px;
  font-weight: 500; font-size: 14px; white-space: nowrap;
  height: 40px; display: inline-flex; align-items: center; gap: 6px;
  border: none; cursor: pointer;
  transition: opacity 120ms, transform 120ms;
}
.search__btn:hover { opacity: 0.92; }
.search__btn:active { transform: scale(0.98); }

/* ===== Google-style suggestions dropdown =====
   The dropdown reads as a continuation of the input field, not a separate
   panel. To achieve that:
     1. .search__field flattens its bottom corners when the dropdown is
        open (rule above), and the dropdown matches that flat top edge.
     2. The dropdown shares the same background, has no top border, and
        sits flush under the input with no gap.
     3. A single shared shadow wraps both shapes so they visually float
        together.
     4. Each suggestion gets a small left-aligned magnifying-glass icon
        that mirrors the input's icon, reinforcing the search relationship.

   Anchored to .search (the wrapper). top: 56px is the intrinsic field
   height. We also hide the chips strip while open so the dropdown isn't
   competing for vertical space directly below the input. */
.search__suggestions {
  position: absolute;
  top: 56px; left: 0; right: 0;
  background: var(--surface-elevated, #fff);
  border: 1px solid var(--border-strong, #c9bfa6);
  border-top: 1px solid var(--divider, rgba(0,0,0,0.08));
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 6px 24px rgba(11,37,69,0.12), 0 2px 6px rgba(11,37,69,0.04);
  overflow: hidden;
  z-index: 20;
  display: none;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 8px 0;
}
.search__suggestions.is-open {
  display: block;
  animation: searchSuggestionsIn 140ms ease-out;
}
@keyframes searchSuggestionsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide the chips strip when suggestions are open so the two don't compete
   for visual space directly below the input. */
.search:has(.search__suggestions.is-open) .search__chips { visibility: hidden; }

.search__suggestion {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 80ms;
  position: relative;
}
/* Subtle hover that doesn't fight the rest of the design system. */
.search__suggestion:hover,
.search__suggestion:focus-visible,
.search__suggestion[aria-selected="true"] {
  background: var(--surface, #f4f1ec);
  outline: none;
}
/* Each suggestion gets a magnifying-glass icon mirroring the input's icon.
   Reinforces that the dropdown is a search-result list, not a navigation. */
.search__suggestion::before {
  content: "";
  flex: 0 0 18px;
  width: 18px; height: 18px;
  background: currentColor;
  color: var(--text-muted, #5e6670);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0.55;
}
.search__suggestion__body { flex: 1; min-width: 0; }
.search__suggestion__addr {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search__suggestion__addr > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.search__suggestion__meta {
  font-size: 12.5px;
  color: var(--text-muted, #5e6670);
  margin-top: 2px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search__suggestion__value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-muted, #5e6670);
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 13.5px;
}
.search__suggestion__tag {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(184,75,8,0.08); color: #8a4b08; border: 1px solid rgba(184,75,8,0.15);
  flex: 0 0 auto;
}
.search__suggestion--banner {
  font-size: 12px;
  font-weight: 600;
  color: #8a4b08;
  background: rgba(184,75,8,0.06);
  letter-spacing: 0.01em;
  cursor: default;
  padding: 8px 22px;
  border-bottom: 1px solid rgba(184,75,8,0.12);
  margin: -8px 0 6px;  /* pull up into the dropdown's top padding */
}
.search__suggestion--banner::before { display: none; }
.search__suggestion--banner:hover { background: rgba(184,75,8,0.06); }

@media (max-width: 640px) {
  .search__suggestion { padding: 10px 16px; gap: 14px; }
  .search__suggestion__addr { font-size: 14px; }
  .search__suggestion__value { font-size: 12.5px; }
  .search__suggestion__meta { font-size: 12px; }
  .search__suggestion::before { flex: 0 0 16px; width: 16px; height: 16px; }
}

.search__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5);
}
.search__chips__label { font-size: var(--text-xs); color: var(--text-muted); margin-right: var(--space-1); }
.search__chip {
  cursor: pointer;
  font-size: var(--text-xs);
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-weight: 500;
  transition: var(--transition);
}
.search__chip:hover {
  background: var(--surface-elevated);
  border-color: var(--text);
  color: var(--text);
}

/* ============================================================
   Hero stats
   ============================================================ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-top: var(--space-16);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hero-stat {
  background: var(--bg);
  padding: var(--space-5) var(--space-6);
}
.hero-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
  line-height: 1.1;
}
.hero-stat__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  padding-block: var(--space-20);
  border-top: 1px solid var(--border);
}
.section--alt { background: var(--surface); }
.section__header { margin-bottom: var(--space-12); }
.section__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.section__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-bottom: var(--space-3);
  max-width: 24ch;
}
.section__sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ============================================================
   Result page
   ============================================================ */
.result {
  display: none;
  border-top: 1px solid var(--border);
  padding-block: var(--space-16);
  background: var(--surface);
}
.result.is-visible { display: block; }
.result__crumbs {
  display: flex; gap: var(--space-2); font-size: var(--text-xs);
  color: var(--text-muted); margin-bottom: var(--space-3);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
}
.result__crumbs > * + *::before { content: "/"; margin-right: var(--space-2); color: var(--text-faint); }
/* Make breadcrumbs look like links (Fix #7) */
.result__crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.result__crumbs a:hover {
  color: var(--text);
  border-bottom-color: var(--text-muted);
}
.result__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}
.result__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.result__meta > div { display: flex; gap: var(--space-2); align-items: center; }
.result__meta strong { color: var(--text); font-weight: 500; }

.confidence-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 8px; font-size: var(--text-xs); font-weight: 500;
  border-radius: var(--radius-sm);
}
.confidence-badge--high { background: var(--positive-bg); color: var(--positive); }
.confidence-badge--medium { background: var(--warning-bg); color: var(--warning); }
.confidence-badge--low { background: var(--negative-bg); color: var(--negative); }

/* Bill card */
.bill-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-12);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) { .bill-card { grid-template-columns: 1fr; } }
.bill-card__pane { background: var(--surface-elevated); padding: var(--space-8); }
.bill-card__pane--accent {
  background: var(--navy);
  color: var(--text-inverse);
}
.bill-card__label {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
}
.bill-card__pane--accent .bill-card__label { color: rgba(255,255,255,0.6); }
.bill-card__amount {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.bill-card__sub {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.bill-card__pane--accent .bill-card__sub { color: rgba(255,255,255,0.78); }
.bill-card__delta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500;
  margin-top: var(--space-4);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-mono);
}
.sale-input {
  margin-top: var(--space-5);
  display: flex; gap: var(--space-2); align-items: center;
  font-size: var(--text-sm); color: rgba(255,255,255,0.85);
}
.sale-input input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: white;
  width: 140px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.sale-input input::placeholder { color: rgba(255,255,255,0.4); }
.sale-input input:focus { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 1px; }

/* Breakdown */
.breakdown { margin-bottom: var(--space-16); }
.breakdown__row {
  display: grid;
  grid-template-columns: 220px 1fr 130px;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--radius-md);
}
.breakdown__row:last-child { border-bottom: none; }
.breakdown__row:hover { background: var(--surface-elevated); }
.breakdown__label { font-weight: 500; font-size: var(--text-base); }
.breakdown__bar {
  height: 4px; background: var(--surface-2);
  border-radius: var(--radius-full); overflow: hidden; position: relative;
}
.breakdown__bar__fill {
  position: absolute; inset: 0;
  background: var(--navy);
  width: var(--pct, 0%);
  border-radius: var(--radius-full);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.breakdown__amount {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: right;
}
.breakdown__amount span {
  display: block; color: var(--text-muted);
  font-weight: 400; font-size: var(--text-xs);
}
.breakdown__explainer {
  grid-column: 1 / -1;
  font-size: var(--text-sm); color: var(--text-secondary);
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: none;
  max-width: 80ch;
  line-height: 1.55;
}
.breakdown__row.is-expanded .breakdown__explainer { display: block; }
@media (max-width: 720px) {
  .breakdown__row { grid-template-columns: 1fr auto; }
  .breakdown__bar { grid-column: 1 / -1; order: 3; }
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}
.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: var(--transition);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card__title { font-weight: 600; font-size: var(--text-md); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.card__amount {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--positive);
  margin-bottom: var(--space-3);
}
.card__meta {
  font-size: var(--text-xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; margin-bottom: var(--space-3);
}
.card__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.card__body em { font-style: normal; color: var(--text-muted); display: block; margin-top: var(--space-2); }
.card__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--space-3);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--accent-text);
}
.card__link:hover { color: var(--accent-hover); }

/* Compare table */
.compare-table {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-16);
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
}
.compare-row:last-child { border-bottom: none; }
.compare-row__name { font-weight: 500; font-size: var(--text-sm); }
.compare-row__bill { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); }
.compare-row__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  min-width: 90px;
  text-align: right;
}
.compare-row__delta--up { background: var(--negative-bg); color: var(--negative); }
.compare-row__delta--down { background: var(--positive-bg); color: var(--positive); }
.compare-row__delta--neutral { background: var(--surface-2); color: var(--text-muted); }

/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left;
  padding: var(--space-5) 0;
  font-weight: 600; font-size: var(--text-md);
  letter-spacing: -0.01em; color: var(--text);
}
.faq__q__icon {
  flex-shrink: 0;
  margin-left: var(--space-4);
  transition: transform 200ms ease;
  color: var(--text);
  background: var(--surface-soft, var(--surface));
  border-radius: 999px;
  width: 28px;
  height: 28px;
  padding: 5px;
  box-sizing: border-box;
}
.faq__q:hover .faq__q__icon { background: var(--border); }
.faq__item.is-open .faq__q__icon { transform: rotate(180deg); color: var(--accent-text, var(--accent)); }
.faq__a {
  display: none;
  padding: 0 0 var(--space-5);
  color: var(--text-secondary);
  max-width: 72ch;
  font-size: var(--text-base);
  line-height: 1.6;
}
.faq__item.is-open .faq__a { display: block; }

/* Provenance */
.provenance {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-12);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.provenance ul { padding-left: var(--space-5); margin-top: var(--space-2); list-style: none; }
.provenance li::before { content: "—"; margin-right: var(--space-2); color: var(--text-faint); }
.provenance a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-strong); }
.provenance a:hover { color: var(--text); }

/* District grid */
.district-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
}
.district {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}
.district:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.district__name { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.district__county { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.district__bill {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.district__bill__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 400;
  margin-top: 2px;
}

.district-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}
.district-tab {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.district-tab.is-active {
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

/* Facts grid */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.fact {
  padding: var(--space-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.fact__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: var(--space-3);
}
.fact__title { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-2); }
.fact__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; }

/* Footer — single compact strip */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 20px;
  background: var(--surface);
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__brand { font-size: 14px; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
}
.footer__links a {
  color: var(--text-muted);
  white-space: nowrap;
  padding: 2px 0;
}
.footer__links a:hover { color: var(--text); }
.footer__legal {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  line-height: 1.5;
}
.footer__legal__sep { color: var(--border); }
@media (max-width: 640px) {
  .footer__top { gap: 14px; }
  .footer__links { gap: 4px 14px; font-size: 12px; }
  .footer__legal__sep { display: none; }
}

/* ============================================================
   Additional components (added in Phase 4)
   ============================================================ */

/* Inline disclaimer below the bill card */
.inline-disclaimer {
  margin-bottom: var(--space-12);
  padding: 12px 16px;
  background: var(--surface-2);
  border-left: 3px solid var(--text-muted);
  border-radius: 0 6px 6px 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.inline-disclaimer a { color: var(--accent-text); text-decoration: underline; }
.inline-disclaimer a:hover { color: var(--accent-hover); }

/* Result section titles */
.result__section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  margin-top: var(--space-12);
}
.result__section-sub {
  color: var(--text-secondary);
  font-size: var(--text-md);
  margin-bottom: var(--space-6);
  max-width: 70ch;
}

/* CTA strip — partner placement */
.cta-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-10);
}
@media (max-width: 720px) {
  .cta-strip { grid-template-columns: 1fr; }
}
.cta-strip__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.cta-strip__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.cta-strip p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 60ch;
  line-height: 1.5;
}
.cta-strip__btn {
  background: var(--text);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition);
}
.cta-strip__btn:hover { opacity: 0.9; }
.cta-strip__btn--accent {
  background: var(--accent);
  color: white;
}
.cta-strip__btn--accent:hover { background: var(--accent-hover); }

.cta-strip--grievance { border-left: 3px solid var(--negative); }
.cta-strip--mortgage { border-left: 3px solid var(--info); background: var(--info-bg); }
.cta-strip--realtor { border-left: 3px solid var(--accent); }

/* Result page email capture */
.result-email-capture {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--space-8);
  background: var(--navy);
  color: white;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-12);
}
@media (max-width: 720px) {
  .result-email-capture { grid-template-columns: 1fr; }
}
.result-email-capture h3 {
  font-size: var(--text-lg);
  color: white;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}
.result-email-capture p {
  color: rgba(255,255,255,0.78);
  font-size: var(--text-sm);
  max-width: 60ch;
  line-height: 1.5;
}
.result-email-capture__form {
  display: flex;
  gap: 8px;
}
.result-email-capture__form input {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: var(--text-sm);
  width: 240px;
}
.result-email-capture__form input::placeholder { color: rgba(255,255,255,0.5); }
.result-email-capture__form input:focus { outline: 2px solid rgba(255,255,255,0.4); }
.result-email-capture__form button {
  padding: 10px 18px;
  border-radius: 6px;
  background: white;
  color: var(--navy);
  font-weight: 600;
  font-size: var(--text-sm);
}
.result-email-capture__form button:hover { background: var(--bg); }

/* Hero email capture */
.email-signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-10);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
@media (max-width: 720px) {
  .email-signup { grid-template-columns: 1fr; }
}
.email-signup__form {
  display: grid;
  gap: 8px;
}
.email-signup__form input,
.email-signup__form select {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  font-size: var(--text-md);
  background: var(--bg);
}
.email-signup__form button {
  padding: 12px 24px;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  font-weight: 500;
  font-size: var(--text-md);
}
.email-signup__form button:hover { opacity: 0.9; }
.email-signup__note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.email-signup__note a { text-decoration: underline; color: var(--text-muted); }

.signup-success {
  padding: 16px;
  background: var(--positive-bg);
  color: var(--positive);
  border-radius: 8px;
  font-weight: 500;
  font-size: var(--text-sm);
}

/* Footer signup */
.footer__signup {
  display: flex;
  gap: 6px;
}
.footer__signup input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  font-size: 13px;
  background: var(--bg);
}
.footer__signup button {
  padding: 8px 14px;
  background: var(--text);
  color: var(--bg);
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
}

/* Footer disclaimer */
.footer__disclaimer {
  margin-top: var(--space-12);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}
.footer__disclaimer strong { color: var(--text); }

/* Static pages */
.static-page {
  padding-block: var(--space-16);
}
.static-page__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}
.static-page__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
.static-page h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}
.static-page p {
  color: var(--text-secondary);
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
  max-width: 70ch;
  line-height: 1.65;
}
.static-page ul {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  max-width: 70ch;
}
.static-page li {
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  line-height: 1.6;
}
.static-page a {
  color: var(--accent-text);
  text-decoration: underline;
}
.static-page a:hover { color: var(--accent-hover); }
.static-page__code {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}

/* ============================================================
   v2 Polish — Senior UX pass (May 7, 2026)
   ============================================================ */

/* --- Long Island silhouette watermark behind hero ---
   The faint outline of Long Island sits behind the hero. Keep it subtle
   enough to read as 'designed texture,' not 'random shape.' */
.hero::before {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -8%;
  width: 720px;
  height: 200px;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 200' fill='none' stroke='%230b2545' stroke-width='1.5' stroke-linejoin='round'><path d='M30 130 Q60 120 95 122 Q130 125 165 130 Q200 135 232 130 Q260 120 295 118 Q330 116 360 122 Q395 130 425 132 Q455 134 485 130 Q510 124 540 124 Q570 126 600 130 Q625 132 650 130 Q675 128 690 124 L700 124 L700 138 Q680 142 660 144 Q635 146 610 144 Q580 142 550 140 Q520 138 490 140 Q460 142 430 142 Q400 142 370 140 Q335 138 300 136 Q265 134 230 138 Q195 142 160 142 Q125 140 90 138 Q55 136 30 142 Z'/><circle cx='120' cy='102' r='3' fill='%230b2545'/><circle cx='280' cy='98' r='4' fill='%230b2545'/><circle cx='450' cy='100' r='3' fill='%230b2545'/><circle cx='620' cy='102' r='5' fill='%230b2545'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

@media (max-width: 720px) {
  /* On mobile the watermark just adds visual noise — hide it entirely. */
  .hero::before { display: none; }
}

/* --- Stronger search as primary CTA --- */
.search__field {
  padding: 6px 6px 6px 18px;
  box-shadow: 0 8px 24px rgba(11,37,69,0.08), 0 2px 6px rgba(11,37,69,0.04);
}
.search__icon { width: 20px; height: 20px; }
.search__input { padding: 14px 0; font-size: var(--text-lg); }
.search__btn {
  background: var(--navy);
  height: 44px;
  padding: 0 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.search__btn:hover { background: var(--navy-2); opacity: 1; }

/* --- Hero stats: more presence, monospaced numbers feel premium --- */
.hero-stats {
  margin-top: var(--space-12);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.hero-stat { background: var(--surface-elevated); padding: var(--space-6) var(--space-6); }
.hero-stat__value {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--navy);
}
.hero-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
  .hero-stat { padding: var(--space-4) var(--space-4); }
  .hero-stat__value { font-size: var(--text-xl); }
}

/* --- Section eyebrows: consistent weight, small caps feel --- */
.section__eyebrow,
.cta-strip__eyebrow {
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: 0.1em;
  font-size: 11px;
}

/* --- Confidence badge: switch to cool-coastal palette --- */
.confidence-badge {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid transparent;
}
.confidence-badge--high {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-color: rgba(45,106,81,0.2);
}
.confidence-badge--medium {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(29,78,137,0.18);
}
.confidence-badge--low {
  background: var(--negative-bg);
  color: var(--negative);
  border-color: rgba(138,36,36,0.2);
}

/* --- Result header: better address treatment --- */
.result__crumbs { gap: var(--space-3); flex-wrap: wrap; }
.result__title {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  word-break: break-word;
}
@media (max-width: 480px) { .result__title { font-size: 1.375rem; } }

/* --- Bill card: navy pane gets gradient + visual weight --- */
.bill-card { box-shadow: var(--shadow-md); }
.bill-card__pane--accent {
  background: linear-gradient(155deg, #0b2545 0%, #143257 60%, #1a3d68 100%);
  position: relative;
  overflow: hidden;
}
.bill-card__pane--accent::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(45,106,81,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.bill-card__pane--accent > * { position: relative; z-index: 1; }
.bill-card__amount { font-size: clamp(2rem, 1.4rem + 2vw, var(--text-4xl)); }
.bill-card__pane--accent .bill-card__amount { font-weight: 600; }

/* --- Sale price input: more prominent, mobile-friendly --- */
.sale-input {
  margin-top: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sale-input label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  width: 100%;
}
.sale-input input {
  width: 180px;
  padding: 10px 14px;
  font-size: var(--text-md);
  font-weight: 500;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}
@media (max-width: 480px) {
  .sale-input input { width: 100%; }
}

/* Always-visible delta pill area (reserve space) */
.bill-card__delta { display: inline-flex !important; }
.bill-card__delta:empty,
.bill-card__delta:has(span:empty) {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.4);
}
.bill-card__delta:has(span:empty)::before {
  content: "Enter a sale price to see the projection delta";
  font-size: 11px;
  font-family: var(--font-sans);
  font-style: italic;
  letter-spacing: 0;
}

/* --- Breakdown bars: stronger visual weight --- */
.breakdown__bar { height: 8px; background: var(--surface-2); }
.breakdown__bar__fill {
  background: linear-gradient(90deg, var(--navy) 0%, var(--accent) 100%);
}
.breakdown__row { padding: var(--space-5) var(--space-3); }
.breakdown__row:hover { background: var(--surface-elevated); border-radius: var(--radius-md); }
.breakdown__amount { font-size: var(--text-md); }

/* --- Compare table: highlight current district, larger deltas --- */
.compare-row__delta {
  font-size: var(--text-sm);
  padding: 4px 12px;
  font-weight: 600;
  min-width: 100px;
}
.compare-row.is-current {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
}
/* The whole .is-current row gets a green tint + left border, and the
   right-side delta cell shows "Your district" — no inline pill needed.
   The previous ::after pill was wrapping mid-name on narrow screens. */
.compare-row.is-current .compare-row__name { font-weight: 600; }

/* --- Result page email capture: white-on-navy works, but ensure mobile stack --- */
@media (max-width: 720px) {
  .result-email-capture { padding: var(--space-5); }
  .result-email-capture__form { flex-direction: column; }
  .result-email-capture__form input { width: 100%; }
  .result-email-capture__form button { width: 100%; }
}

/* --- Hero email signup card: better mobile --- */
@media (max-width: 720px) {
  .email-signup { padding: var(--space-6); gap: var(--space-6); }
  .email-signup__form input,
  .email-signup__form select,
  .email-signup__form button { width: 100%; }
}

/* --- FOOTER REBUILD: critical mobile fix --- */
.footer { padding-block: var(--space-16) var(--space-10); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
@media (max-width: 880px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

.footer__signup {
  display: flex;
  gap: 6px;
  max-width: 320px;
}
.footer__signup input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 14px;
}
.footer__signup button {
  padding: 10px 18px;
  background: var(--navy);
  color: white;
  font-size: 14px;
  white-space: nowrap;
}
.footer__signup button:hover { background: var(--navy-2); }

.footer__col h4 {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.footer__col li { margin-bottom: 8px; }
.footer__col a { font-size: 14px; color: var(--text-muted); }

.footer__disclaimer {
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 520px) {
  .footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* --- Hero pill: long version for desktop, short for mobile --- */
.hero__pill__short { display: none; }
@media (max-width: 480px) {
  .hero__pill { font-size: 10px; padding: 3px 10px 3px 8px; }
  .hero__pill__long  { display: none; }
  .hero__pill__short { display: inline; }
}

/* --- Mobile hero compaction: get search above the fold --- */
@media (max-width: 560px) {
  .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .hero__title {
    font-size: clamp(1.75rem, 1.3rem + 3vw, 2.25rem);
    line-height: 1.15;
    margin-bottom: var(--space-3);
  }
  .hero__sub {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: var(--space-4);
    /* Allow full wrap on small screens — truncating was hiding real info */
  }
}


/* --- Search chips on mobile: tighter --- */
@media (max-width: 480px) {
  .search__chips { gap: 6px; margin-top: var(--space-4); }
  .search__chip { font-size: 11px; padding: 4px 10px; }
}

/* --- Bill card mobile: stack with breathing room --- */
@media (max-width: 720px) {
  .bill-card__pane { padding: var(--space-6); }
  .bill-card__amount { font-size: 2rem; }
}

/* --- Result meta on mobile --- */
@media (max-width: 480px) {
  .result__meta { gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
  .result__meta > div { font-size: 12px; }
}

/* --- Sticky condensed search on result page --- */
.sticky-search {
  /* Position FIXED below the global sticky nav (60px). When inactive, hidden
     above the viewport; .is-active slides it into place. z-index below nav
     (50) so the brand/links stay clickable. */
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--bg) 95%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  transform: translateY(-200%);
  transition: transform 200ms ease;
  pointer-events: none;
}
.sticky-search.is-active {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-search__field {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.sticky-search__field input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-elevated);
  font-size: 14px;
  min-width: 0;
}
.sticky-search__field button {
  padding: 8px 16px;
  background: var(--navy);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.sticky-search__wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.sticky-search__wrap .sticky-search__field {
  margin: 0;
}
.sticky-search__suggestions {
  position: absolute;
  top: 100%;
  left: var(--space-6);
  right: var(--space-6);
  margin-top: 6px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  z-index: 41;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.sticky-search__suggestions.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-search__suggestions:empty { display: none; }

/* --- Admin polish --- */
.pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.pill-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.pill-status--off::before { background: var(--text-faint); box-shadow: 0 0 0 3px var(--surface-2); }

/* --- Generic provenance + trust footer --- */
.provenance { font-size: 13px; line-height: 1.7; }
.provenance a { color: var(--accent-text); }

/* --- Hero title: tighter wrap on mobile --- */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(2rem, 1.4rem + 4vw, 2.75rem); max-width: 100%; }
}

/* ============================================================
   v3 Critical fixes — overflow, search overlap, nav crowding
   ============================================================ */

/* Prevent horizontal overflow at any viewport.
   IMPORTANT: setting overflow-x on <html> breaks position:sticky in any
   descendant, because <html> becomes the scroll container instead of
   <body>. Apply to body only so the nav can still pin to the viewport. */
body { overflow-x: clip; max-width: 100vw; }
.container { padding-inline: clamp(16px, 4vw, 24px); }

/* ===== SEARCH FIELD =====
   Flex needs explicit min-width:0 on input so button can never overlap. */
.search__field {
  flex-wrap: nowrap;
  gap: 8px;
  position: relative;
}
/* Hide the native clear button on type="search" — we render our own. */
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search__input { min-width: 0; flex: 1 1 0; }
.search__btn { flex: 0 0 auto; }

/* Clear (×) button — sits inside the field, between the input and the submit btn.
   Hidden by default; JS toggles visibility via the `hidden` HTML attribute. */
.search__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.search__clear:hover { background: var(--border); color: var(--text); }
.search__clear svg { width: 14px; height: 14px; }
.search__clear[hidden] { display: none; }

/* Submit button visual: hide the arrow on desktop, show only the label */
.search__btn__arrow { display: none; width: 18px; height: 18px; }

/* ===== Mobile (≤560px): keep input + button INLINE, not stacked =====
   Stacking pushes suggestions far below the keyboard. Inline + icon-only
   button keeps the dropdown right under the input where it belongs. */
@media (max-width: 560px) {
  .search__field {
    flex-direction: row;
    align-items: center;
    padding: 6px 6px 6px 14px;
    gap: 6px;
  }
  /* Keep magnifying glass for visual affordance */
  .search__field > .search__icon {
    display: block;
    margin-right: 6px;
    width: 18px;
    height: 18px;
  }
  .search__input {
    padding: 12px 0;
    /* 16px prevents iOS auto-zoom on focus */
    font-size: 16px;
    background: transparent;
    min-width: 0;
  }
  .search__clear {
    width: 28px;
    height: 28px;
  }
  /* Submit becomes a compact icon-arrow button on mobile */
  .search__btn {
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
  }
  .search__btn__label { display: none; }
  .search__btn__arrow { display: block; color: #fff; }
}

/* ===== Mobile suggestions: float right under the input =====
   When the keyboard is up on iOS, only ~500px of viewport is visible.
   We need the suggestions to (a) appear immediately under the input and
   (b) NOT be pushed down by the chips row below them.

   Trick: anchor relative to the .search__field (the form itself) using
   absolute positioning. We achieve this with top calculated from the field
   bottom — but since .search__field is the form and .search__suggestions
   is a SIBLING of the form (both children of .search), we need a different
   approach: position the suggestions using `top: <field-height>` via a CSS
   variable that JS sets, OR easier — just stack chips AFTER the suggestions
   in the DOM and use top:0 for suggestions in the flex column.

   Simplest robust fix: position relative to .search and order chips AFTER
   suggestions. Since both are flex/block children of .search, we can use
   `order` on the chips to push them visually below the suggestions. */
@media (max-width: 560px) {
  .search {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
  }
  .search__field { order: 0; }
  .search__suggestions {
    order: 1;
    position: static !important;  /* override desktop absolute positioning */
    top: auto !important;
    margin-top: 6px;
    z-index: 50;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  }
  .search__chips { order: 2; margin-top: var(--space-3); }
  .search__suggestion { padding: 14px 16px; min-height: 56px; }
  .search__suggestion__addr { font-size: 15px; }
  .search__suggestion__meta { font-size: 13px; }
  /* Hide the “Try: chips” row when user is actively searching */
  .search.is-searching .search__chips { visibility: hidden; height: 0; margin-top: 0; }
}


/* NAV — desktop links hidden below 720px in favor of a hamburger drawer */
.nav__inner { gap: var(--space-3); }
.nav__burger { display: none; }  /* shown only on mobile, see media query */

@media (max-width: 720px) {
  /* Hide the inline desktop link row */
  .nav__links { display: none; }

  /* Hamburger button */
  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    margin-right: -8px;          /* visual alignment with container edge */
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 200ms ease, opacity 150ms ease;
  }
  /* Animate to X when drawer is open */
  .nav__burger[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav__burger[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }
  .nav__burger[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ---- Drawer (mobile only) ---- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;            /* shown via .is-open */
  pointer-events: none;
}
.nav-drawer.is-open { display: block; pointer-events: auto; }
.nav-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 37, 69, 0.45);
  opacity: 0;
  transition: opacity 200ms ease;
}
.nav-drawer.is-open .nav-drawer__scrim { opacity: 1; }
.nav-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 320px);
  background: var(--bg);
  box-shadow: -8px 0 32px rgba(11, 37, 69, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0.16, 1);
  overscroll-behavior: contain;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.nav-drawer__head .nav__brand-text { font-size: 13px; }
.nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer__close:hover { background: var(--surface-2); }
.nav-drawer__list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
}
.nav-drawer__list li a {
  display: block;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer__list li a:active,
.nav-drawer__list li a:hover { background: var(--surface); }
.nav-drawer__foot {
  padding: 14px 22px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.nav-drawer__foot a { color: var(--text-muted); }
.nav-drawer__foot a:hover { color: var(--text); }

/* Lock body scroll while drawer open. Set on <html> via JS. */
html.is-nav-open, html.is-nav-open body { overflow: hidden; }

/* Result page sticky search — keep input from being eaten by button */
.sticky-search__field input { min-width: 0; }
.sticky-search__field button { flex-shrink: 0; }

/* Email signup forms — flex sane defaults */
.email-signup__form input,
.email-signup__form select { min-width: 0; }
.footer__signup input { min-width: 0; }
.result-email-capture__form input { min-width: 0; flex: 1; }

/* Hero pill: don't overflow at any width */
.hero__pill { max-width: 100%; }
.hero__pill > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Make sure compare table delta column never clips the dash for current row */
.compare-row__delta { white-space: nowrap; }

/* Bill card amount — cap on tiny screens so it doesn't overflow */
@media (max-width: 360px) {
  .bill-card__amount { font-size: 1.75rem; }
}

/* ============================================================
   Voices (social proof) section
   ============================================================ */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.voice {
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.voice::before {
  content: "“";
  position: absolute;
  top: -28px;
  right: -8px;
  font-family: 'Georgia', serif;
  font-size: 180px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}
.voice:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.voice__bill {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--accent-text);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
  font-variant-numeric: proportional-nums;
  font-feature-settings: 'ss01' on;
}
.voice__quote {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  flex: 1;
}
.voice__attr {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--divider);
  padding-top: var(--space-3);
}
.voices__note {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.voices__note a { color: var(--accent-text); text-decoration: underline; }

/* ============================================================
   Verify-with-official-source cards (result page)
   ============================================================ */
.verify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.verify-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.verify-card:hover {
  border-color: var(--border-strong);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.verify-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.verify-card h3 {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
  color: var(--text);
  line-height: 1.3;
}
.verify-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  flex: 1;
}
.verify-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-top: 1px solid var(--divider);
  padding-top: var(--space-2);
}

/* ============================================================
   Action bar (Save / Email / Share) on result page
   ============================================================ */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.action-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.action-bar__btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-bg);
}
.action-bar__btn svg { color: var(--text-muted); flex-shrink: 0; }
.action-bar__btn:hover svg { color: var(--accent); }

@media (max-width: 480px) {
  .action-bar__btn { font-size: 12px; padding: 7px 11px; }
}

/* ============================================================
   Floating mobile action bar (Fix #14)
   Pinned bottom-right on small screens once scrolled past hero.
   ============================================================ */
.floating-actions {
  display: none;  /* mobile-only — see media query below */
}
@media (max-width: 720px) {
  .floating-actions {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    transform: translate(-50%, 12px);
  }
  .floating-actions[hidden] { display: none; }
  .floating-actions.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .floating-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .floating-actions__btn:hover,
  .floating-actions__btn:active {
    background: var(--surface-soft);
  }
  .floating-actions__btn svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
  }
  /* The first "top" button is icon-only — no label */
  #floating-actions-top { padding: 8px 10px; }
}

/* Breakdown row — NYSED report card link (Fix #13) */
.breakdown__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text, var(--accent));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.breakdown__link:hover { color: var(--text); }

/* ============================================================
   Neighborhood comp band (Fix #9) — "Is this assessment fair?"
   ============================================================ */
.nb-band {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: var(--space-6);
}
.nb-band--low {
  background: rgba(47, 107, 79, 0.05);
  border-left-color: var(--accent);
}
.nb-band--high {
  background: #fef6f5;
  border-left-color: #b8403c;
}
.nb-band--neutral {
  border-left-color: var(--text-muted);
}
.nb-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.nb-band__title {
  margin: 0;
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.nb-band__sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.nb-band__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  margin-bottom: 12px;
}
.nb-band__stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.nb-band__stat__amount {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: 'tnum';
}
.nb-band__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 560px) {
  .nb-band__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .nb-band__stat:nth-child(3) { grid-column: 1 / -1; }
  .nb-band__stat__amount { font-size: 14px; }
}

/* ============================================================
   District percentile band (Fix #6)
   Visual representation of where the user's district sits across LI.
   ============================================================ */
.pct-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: var(--space-5);
}
.pct-band__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(47, 107, 79, 0.30) 0%,
    rgba(47, 107, 79, 0.18) 33%,
    rgba(184, 110, 31, 0.20) 66%,
    rgba(184, 64, 60, 0.30) 100%);
  overflow: visible;
}
.pct-band__bar__fill { display: none; } /* gradient is the bar itself */
.pct-band__bar__marker {
  position: absolute;
  top: 50%;
  left: var(--pct, 50%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--surface-elevated);
  box-shadow: 0 0 0 1px var(--text), var(--shadow-sm);
}
.pct-band__text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pct-band__text strong { color: var(--text); font-weight: 600; }
.pct-band--high { border-color: rgba(184, 64, 60, 0.30); background: #fef6f5; }
.pct-band--high .pct-band__text strong { color: #b8403c; }
.pct-band--low { border-color: rgba(47, 107, 79, 0.30); background: rgba(47, 107, 79, 0.06); }
.pct-band--low .pct-band__text strong { color: var(--accent-text, var(--accent)); }

/* ============================================================
   Exemption qualifier quiz (Fix #5)
   ============================================================ */
.ex-quiz {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: var(--space-4);
}
.ex-quiz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ex-quiz__head__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.ex-quiz__reset {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.ex-quiz__reset:hover { color: var(--accent-text, var(--text)); }
.ex-quiz__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ex-quiz__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-elevated);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ex-quiz__chip:hover { border-color: var(--text-muted); }
.ex-quiz__chip input { position: absolute; opacity: 0; pointer-events: none; }
.ex-quiz__chip:has(input:checked) {
  background: rgba(47, 107, 79, 0.10);
  border-color: var(--accent);
  color: var(--accent-text, var(--accent));
  font-weight: 600;
}
/* Fallback for browsers without :has() — ::before checkmark */
.ex-quiz__chip span::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--text-faint);
  margin-right: 6px;
  vertical-align: middle;
  transition: background 120ms ease, border-color 120ms ease;
}
.ex-quiz__chip:has(input:checked) span::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface-elevated);
}
.ex-quiz__total {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.ex-quiz__total strong {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent-text, var(--text));
}
@media (max-width: 560px) {
  .ex-quiz__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   B-CARD — Option B bill card (editorial hero + buyer block + actions)
   Replaces the old .bill-card on the result page. Self-contained so we
   can iterate without fighting legacy styles.
   ============================================================ */
.b-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

/* ---- HERO ---- */
.b-card__hero {
  /* Editorial v4 (May 2026): green accent rule on left edge ties the hero +
     buyer block together without heavy borders. Padding kept generous so
     the serif amount has room to breathe. */
  padding: 32px 24px 24px;
  background: linear-gradient(180deg, #fbf9f3 0%, var(--surface-elevated) 100%);
  border-bottom: 1px solid var(--divider);
  position: relative;
}
.b-card__hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;
  width: 3px;
  height: 60px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.b-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  font-weight: 600;
  margin: 0 0 12px;
}
.b-card__amount {
  /* Fraunces editorial serif, opsz-tuned for display. Same family used for
     the "/yr" suffix so the whole price quote reads as one unit.
     letter-spacing positive here so the heavy serif digits don't kiss
     each other — default tracking on Fraunces digits is too tight at
     this weight + size. */
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 5vw, 3.75rem);
  font-weight: 450;
  letter-spacing: 0.005em;
  line-height: 1.0;
  margin: 0;
  color: var(--text);
  font-feature-settings: 'tnum';
  font-variation-settings: "opsz" 96;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  /* Subtle color transition for the live-update flash on input change. */
  transition: color 250ms;
}
.b-card__amount.is-flashing { color: var(--accent-text); }
.b-card__amount__year {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  font-feature-settings: 'tnum';
  /* Lift slightly so it optically baseline-aligns with the heavy digits */
  position: relative;
  top: -0.1em;
}
/* Monthly equivalent line directly under the headline. Mortgage-think for buyers. */
.b-card__monthly {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-feature-settings: 'tnum';
  line-height: 1.55;
}
.b-card__monthly span {
  font-weight: 600;
  color: var(--text);
}
/* Aside in the explainer when the user is in buyer mode — reminds them what
   the *current owner* pays, in case they're cross-checking realtor numbers. */
.b-card__owner-aside {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.b-card__owner-aside strong {
  font-family: var(--font-mono);
  color: var(--text);
}
.b-card__pills {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.b-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.b-pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
.b-pill--high {
  background: rgba(47, 107, 79, 0.10);
  color: var(--accent-text, #1f4d36);
  border-color: rgba(47, 107, 79, 0.30);
}
.b-pill--medium {
  background: #fff3e0;
  color: #b86e1f;
  border-color: rgba(184, 110, 31, 0.30);
}
.b-pill--low {
  background: #fdebe9;
  color: #b8403c;
  border-color: rgba(184, 64, 60, 0.30);
}
.b-pill--condo {
  background: rgba(11, 37, 69, 0.06);
  color: var(--navy);
  border-color: rgba(11, 37, 69, 0.20);
}
/* Neutral variance pill — used for condos where the wider range isn't a
   warning (we're not wrong) but a statement of fact (bills vary by building). */
.b-pill--neutral {
  background: var(--surface-soft, #f1ede5);
  color: var(--text-secondary, #555);
  border-color: rgba(0, 0, 0, 0.12);
}
/* Estimated current market value pill — soft green, signals "fresh data". */
.b-pill--market {
  background: rgba(34, 130, 80, 0.08);
  color: #1f6a44;
  border-color: rgba(34, 130, 80, 0.30);
}
.b-pill--market .b-pill__dot { background: #228250; }
/* Most-recent-sale pill — slightly stronger green, this is hard ground truth. */
.b-pill--sale {
  background: rgba(34, 130, 80, 0.12);
  color: #195937;
  border-color: rgba(34, 130, 80, 0.40);
  font-weight: 600;
}
.b-pill--sale .b-pill__dot { background: #195937; }
.b-card__explainer {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.b-card__explainer strong { color: var(--text); font-weight: 600; }

/* STAR savings nudge — give it room so it doesn't bleed into the explainer */
.b-card__star-nudge {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.b-card__star-nudge strong { color: var(--text-secondary); }

/* Editorial v4 structured data grid — replaces the noisy pills row
   for assessor / market / last sale values. Sits under the explainer
   with a divider rule above. */
.b-card__data {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.b-card__data__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.b-card__data__row--wide { grid-column: 1 / -1; }
.b-card__data__label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.b-card__data__val {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: 'tnum';
  letter-spacing: -0.005em;
}
.b-card__data__suffix {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
  font-size: 13px;
}

/* Honest range underneath the headline bill. Shown when the model has
   known gaps (village rate / special districts / library missing). Sits
   between the monthly figure and the confidence pills so users read it
   before they read the precise $X/yr as a guarantee. */
.b-card__range {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.b-card__range strong {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

/* Collapsible "why the real bill may be higher" disclosure. Stays closed
   by default so it doesn't push the calculator below the fold, but opens
   to a tidy bullet list of every known gap in the model. */
.b-card__caveats {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--surface-elevated, #f4f1ec);
  border: 1px solid var(--border, #e6dfd1);
  border-radius: 10px;
}
.b-card__caveats > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.b-card__caveats > summary::-webkit-details-marker { display: none; }
.b-card__caveats > summary::before {
  content: "›";
  display: inline-block;
  transition: transform 150ms;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
}
.b-card__caveats[open] > summary::before { transform: rotate(90deg); }
.b-card__caveats ul {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.b-card__caveats li { margin: 4px 0; }
.b-card__caveats li strong { color: var(--text); font-weight: 600; }
.b-card__caveats__foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- BUYER BLOCK ---- */
/* Editorial v4 (May 2026): the buyer block no longer has its own duplicate
   projected-bill pill. Sale-price input drives the hero amount directly.
   The block carries a soft green accent rule on its left edge matching
   the hero, and a small delta indicator at the bottom (vs current owner). */
.b-card__buyer {
  padding: 24px 24px 32px;
  background: var(--surface-elevated);
  position: relative;
}
.b-card__buyer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 3px;
  height: 32px;
  background: var(--accent);
  opacity: 0.4;
  border-radius: 0 2px 2px 0;
}
.b-card__buyer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.b-card__buyer__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  line-height: 1;
}
.b-card__buyer__hint {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.b-card__buyer__hint::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: bcardLivePulse 2s infinite;
}
@keyframes bcardLivePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Small description line under the buyer-block title. */
.b-card__buyer__desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.b-card__buyer__row {
  /* Single-column now — no projected pill on the right, so the input gets
     full width and the field reads as a primary control. */
  display: block;
}
.b-card__buyer__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b-card__buyer__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.b-card__buyer__input {
  font: inherit;
  font-family: var(--font-sans);
  /* 18px reads as a primary control, still >= 16px to prevent iOS zoom */
  font-size: 18px;
  font-weight: 500;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-elevated);
  color: var(--text);
  width: 100%;
  min-width: 0;
  font-feature-settings: 'tnum';
  letter-spacing: -0.005em;
  transition: border-color 150ms, box-shadow 150ms;
}
.b-card__buyer__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.b-card__buyer__input::placeholder { color: var(--text-faint); }

/* Compact delta indicator showing the projected vs current-owner gap.
   Replaces the old standalone projected-bill pill. */
.b-card__buyer__delta {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  font-feature-settings: 'tnum';
  flex-wrap: wrap;
}
.b-card__buyer__delta__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  font-weight: 600;
  font-feature-settings: 'tnum';
  font-size: 13px;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.b-card__buyer__delta__pill::before { content: ""; font-weight: 700; }
.b-card__buyer__delta__pill.is-higher {
  background: #fff3e0;
  color: #8a4f0e;
  border-color: rgba(184, 110, 31, 0.30);
}
.b-card__buyer__delta__pill.is-higher::before { content: "↑ "; }
.b-card__buyer__delta__pill.is-lower {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-color: rgba(47, 107, 79, 0.25);
}
.b-card__buyer__delta__pill.is-lower::before { content: "↓ "; }
.b-card__buyer__delta__pill.is-match {
  background: var(--surface-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
}

/* Hide the legacy duplicate projected pill but keep DOM nodes so the
   existing JS (which writes to #r-projected-bill etc) still has targets
   to update. We mirror those updates into the hero amount instead. */
.b-card__buyer__projected { display: none !important; }

/* The projected-bill pill: color shifts based on delta vs year-1 (set by JS).
   Layout: label on top, then a right-aligned body column with the amount,
   monthly, and range stacked vertically. On mobile the label flips to sit
   to the LEFT of the body so the pill stays a compact horizontal strip. */
.b-card__buyer__projected {
  align-self: end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid;
  min-width: 130px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.b-card__buyer__projected__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 4px;
}
.b-card__buyer__projected__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.b-card__buyer__projected__amount {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.b-card__buyer__projected__year {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.7;
  margin-left: 3px;
}
.b-card__buyer__projected__monthly {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Honest range under the projected bill. Tracks the hero range above. */
.b-card__buyer__projected__range {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-top: 2px;
}
/* Color variants — toggled by JS based on projected-vs-year1 delta */
.b-card__buyer__projected--neutral {
  background: var(--surface-soft, #f1ede5);
  color: var(--text-secondary);
  border-color: var(--border);
}
.b-card__buyer__projected--higher {
  background: #fff3e0;
  color: #8a4f0e;
  border-color: rgba(184, 110, 31, 0.40);
}
.b-card__buyer__projected--lower {
  background: rgba(47, 107, 79, 0.10);
  color: var(--accent-text, #1f4d36);
  border-color: rgba(47, 107, 79, 0.40);
}
.b-card__buyer__projected--match {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border-strong);
}
.b-card__buyer__sub {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- PITI mini-calculator ---- */
.b-card__piti {
  padding: var(--space-5) 28px var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--surface-elevated);
}
.b-card__piti[hidden] { display: none; }
.b-piti__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.b-piti__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b-piti__field__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.b-piti__field__wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-elevated);
  padding: 8px 12px;
  transition: border-color 120ms ease;
}
.b-piti__field__wrap:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.b-piti__field__wrap input,
.b-piti__field__wrap select {
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  width: 100%;
  min-width: 0;
  padding: 0;
}
.b-piti__field__wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236e7585' stroke-width='1.5'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 16px;
}
.b-piti__field__suffix {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
/* Hide spinner buttons on number inputs (Firefox + WebKit) */
.b-piti__field__wrap input[type=number]::-webkit-inner-spin-button,
.b-piti__field__wrap input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.b-piti__field__wrap input[type=number] { -moz-appearance: textfield; }

.b-piti__breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-soft, #f1ede5);
  border-radius: 10px;
}
.b-piti__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.b-piti__line__label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.b-piti__line__hint {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--border);
  color: var(--text-muted);
  font-weight: 600;
  cursor: help;
}
.b-piti__line__amount {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text);
  font-feature-settings: 'tnum';
}
.b-piti__line--total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.b-piti__line--total .b-piti__line__amount {
  font-size: 17px;
  font-weight: 600;
}
.b-piti__sub {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
}

@media (max-width: 560px) {
  .b-card__piti { padding: var(--space-5) 20px; }
  .b-piti__inputs {
    grid-template-columns: 1fr 1fr;
    /* Term goes full-width on second row */
  }
  .b-piti__field:nth-child(3) { grid-column: 1 / -1; }
}

/* ---- ACTIONS ---- */
.b-card__actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--divider);
  background: var(--surface-soft, #f1ede5);
}
.b-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  min-height: 40px;
}
.b-card__btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.b-card__btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.b-card__btn--primary:hover {
  background: var(--navy-2);
  color: #fff;
  border-color: var(--navy-2);
}
.b-card__btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- DISCLAIMER (muted footnote, not a loud box) ---- */
.b-card__disclaimer {
  margin: 14px 0 var(--space-8);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
  max-width: 640px;
}
.b-card__disclaimer a {
  color: var(--text-muted);
  text-decoration: underline;
}
.b-card__disclaimer a:hover {
  color: var(--accent-text, var(--accent));
}

/* ---- MOBILE ---- */
@media (max-width: 560px) {
  .b-card__hero { padding: var(--space-5) var(--space-5) var(--space-5); }
  .b-card__buyer { padding: var(--space-5) var(--space-5); }
  .b-card__amount { font-size: clamp(2rem, 1.4rem + 4vw, 2.5rem); }
  /* Stack input above the projected pill, full-width */
  .b-card__buyer__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .b-card__buyer__projected {
    text-align: left;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 12px 14px;
    gap: 12px;
  }
  .b-card__buyer__projected__label {
    margin-bottom: 0;
    flex: 0 0 auto;
    max-width: 40%;
  }
  .b-card__buyer__projected__body {
    align-items: flex-end;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .b-card__buyer__projected__amount { font-size: 17px; }
  .b-card__actions {
    padding: 10px;
    gap: 6px;
  }
  .b-card__btn {
    padding: 10px 8px;
    font-size: 12px;
  }
  .b-card__btn span { display: inline; }
}

/* ============================================================
   Open-slot CTA: visible when no paying advertiser fills the slot.
   Slightly subdued to make it clear this isn't an active sponsor.
   ============================================================ */
.cta-strip--open-slot {
  border-style: dashed;
  background: var(--surface);
  opacity: 0.95;
}
.cta-strip--open-slot .cta-strip__eyebrow {
  color: var(--text-muted);
}
.cta-strip--open-slot .cta-strip__title {
  font-style: italic;
  font-family: 'Georgia', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.cta-strip--open-slot .cta-strip__btn {
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.cta-strip--open-slot .cta-strip__btn:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-text);
}
.cta-strip--open-slot .cta-strip__btn--accent {
  background: var(--navy);
  color: white;
  border: none;
}
.cta-strip--open-slot .cta-strip__btn--accent:hover {
  background: var(--navy-2);
}

/* ============================================================
   School-district SEO landing page
   ============================================================ */
.d-hero {
  padding: 32px 0 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.d-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 8px 0 16px;
}
.d-deck {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55;
  color: var(--text);
  max-width: 70ch;
  margin: 0 0 8px;
}
.d-deck--muted { color: var(--text-secondary); font-size: 14px; }
.d-deck strong { font-weight: 600; }

.d-stats {
  padding: 24px 0 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.d-grid .stat {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.d-grid .stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.d-grid .stat__value {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.d-grid .stat__value span { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.d-grid .stat__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.d-section { padding: 32px 0; border-bottom: 1px solid var(--border); }
.d-section--alt { background: var(--surface); }
.d-h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 12px;
}
.d-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  max-width: 70ch;
  margin: 0 0 20px;
}
.d-lede strong { font-weight: 600; }

.d-rates {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.d-rates th, .d-rates td { padding: 10px 14px; text-align: left; }
.d-rates thead { background: var(--surface-2); }
.d-rates th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.d-rates tbody tr { border-top: 1px solid var(--border); }
.d-rates td:nth-child(2), .d-rates td:nth-child(3) { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.d-foot { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

.d-comps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 640px) { .d-comps { grid-template-columns: 1fr; } }
.d-comps__col h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.d-comps__col ul { list-style: none; padding: 0; margin: 0; }
.d-comps__col li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  margin-bottom: 6px;
}
.d-comps__col li a { color: var(--text); font-weight: 500; }
.d-comps__col li a:hover { color: var(--accent); }
.d-comps__col li span { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.d-hamlets {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.d-hamlets li {
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.d-hamlets li strong { display: block; font-size: 14px; }
.d-hamlets li span { font-size: 12px; color: var(--text-muted); }

.d-faq details {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.d-faq details[open] { border-color: var(--accent-soft); }
.d-faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
  font-size: 15px;
}
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 200ms;
}
.d-faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--accent);
}
.d-faq p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

.aff-slot {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.aff-slot__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 10px;
}
.aff-slot h3 { margin: 4px 0 8px; font-size: 20px; font-weight: 600; }
.aff-slot p { font-size: 14px; color: var(--text-secondary); margin: 0 0 14px; max-width: 50ch; margin-inline: auto; }

.d-news {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  max-width: 520px;
  margin: 0 auto;
}
.d-news h3 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.d-news > p { font-size: 14px; color: var(--text-secondary); margin: 0 0 14px; }
.d-news__form { display: flex; gap: 8px; flex-wrap: wrap; }
.d-news__form input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.d-news__foot { font-size: 12px; color: var(--text-muted); margin-top: 8px; margin-bottom: 0; }

.d-foot-section { background: var(--surface); }
.d-sources { list-style: none; padding: 0; margin: 0 0 16px; }
.d-sources li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }
.d-sources li strong { color: var(--text); }
.d-sources li a { word-break: break-all; overflow-wrap: anywhere; }
.d-disclaimer {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* ============================================================
   Email-this-report sheet (mobile bottom sheet, desktop centered modal)
   Triggered from the floating-actions Email button + any inline CTAs.
   ============================================================ */
.email-sheet {
  position: fixed; inset: 0;
  z-index: 90;
  display: none;
  pointer-events: none;
}
.email-sheet.is-open { display: block; pointer-events: auto; }
.email-sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(11, 37, 69, 0.45);
  opacity: 0;
  transition: opacity 200ms ease;
}
.email-sheet.is-open .email-sheet__scrim { opacity: 1; }

.email-sheet__panel {
  position: absolute;
  background: #ffffff;
  box-shadow: 0 -10px 40px rgba(11, 37, 69, 0.18);
  /* Mobile: bottom sheet */
  left: 0; right: 0; bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 28px 22px 24px;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0.16, 1);
  max-height: 90vh;
  overflow-y: auto;
}
.email-sheet.is-open .email-sheet__panel { transform: translateY(0); }

@media (min-width: 720px) {
  /* Desktop: centered modal */
  .email-sheet__panel {
    bottom: auto; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(92vw, 460px);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 24px 64px rgba(11, 37, 69, 0.25);
  }
  .email-sheet.is-open .email-sheet__panel {
    transform: translate(-50%, -50%) scale(1);
  }
}

.email-sheet__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: var(--surface);
  border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.email-sheet__close:hover { background: var(--surface-2); }

.email-sheet__head { padding-right: 32px; margin-bottom: 18px; }
.email-sheet__head h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.email-sheet__sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.email-sheet__form {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
@media (min-width: 480px) {
  .email-sheet__form { flex-direction: row; }
}
.email-sheet__form input[name='email'] {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px; /* ≥16px prevents iOS zoom on focus */
  font-family: inherit;
  color: var(--text);
  background: white;
  -webkit-appearance: none;
}
.email-sheet__form input[name='email']:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.email-sheet__form .btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
}

.email-sheet__bullets {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.email-sheet__list {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.email-sheet__list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--text);
}
.email-sheet__list li svg {
  color: #2d6a51;
  flex-shrink: 0;
  margin-top: 4px;
}

.email-sheet__success {
  display: none; /* shown only when sheet has .is-success */
  flex-direction: column; align-items: center;
  gap: 12px; padding: 24px 0 8px; margin: 0;
  text-align: center;
  font-size: 15px; color: var(--text);
}
.email-sheet__success svg { color: #2d6a51; }
.email-sheet__success strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  margin-bottom: 4px;
  color: var(--text);
}

.email-sheet__legal {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

.email-sheet.is-success .email-sheet__form,
.email-sheet.is-success .email-sheet__bullets,
.email-sheet.is-success .email-sheet__list { display: none; }
.email-sheet.is-success .email-sheet__success { display: flex; }

/* ============================================================
   Generic .btn classes — used in schools/unsubscribe/email-sheet
   (the existing site uses them inline but never defined them).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:disabled, .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--text);          /* navy */
  color: white;
  border-color: var(--text);
}
.btn--primary:hover:not(:disabled) {
  background: #0a1f3a;
  border-color: #0a1f3a;
  color: white;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--text-muted);
}

/* =====================================================================
   Guide pages (grievance, STAR, glossary, exemptions, etc.)
   Built on top of existing .d-section / .d-h2 / .d-faq / .stat tokens.
   ===================================================================== */

.guide-alert {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #fef3c7;
  border-left: 4px solid #d97706;
  color: #78350f;
  font-size: 0.95rem;
  line-height: 1.55;
}
.guide-alert--info {
  background: #dbeafe;
  border-left-color: #2563eb;
  color: #1e3a8a;
}
.guide-alert--deadline {
  background: #fee2e2;
  border-left-color: #b91c1c;
  color: #7f1d1d;
}
.guide-alert strong { font-weight: 700; }
.guide-alert a { color: inherit; text-decoration: underline; }

/* Tool & guide page hero — unified treatment for breadcrumb + h1 + lede + alert.
   Left-aligned magazine-column treatment: content stays at the left edge of
   the .container but its own children (h1, deck, alert) cap out at ~720-860px
   so they don't stretch into uncomfortable line-lengths on wide screens. */
.guide-hero {
  padding-block: var(--space-10) var(--space-6);
}
.guide-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
  color: var(--text);
  max-width: 22ch;
}
.guide-hero .guide-deck,
.guide-deck {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted, #4a525e);
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}
.guide-hero .guide-alert {
  margin-top: var(--space-5);
  max-width: 760px;
}
.guide-hero .lookup-search,
.guide-hero .lookup-result {
  max-width: 760px;
}
@media (min-width: 720px) {
  .guide-hero { padding-block: var(--space-12) var(--space-8); }
}

.guide-prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 760px;
  /* Left-aligned to match .guide-hero magazine column treatment */
  margin-inline: 0;
}
.guide-prose p { margin: 0 0 14px; }
.guide-prose p:last-child { margin-bottom: 0; }
.guide-prose ul, .guide-prose ol {
  margin: 8px 0 14px 0;
  padding-left: 24px;
}
.guide-prose li { margin-bottom: 6px; line-height: 1.6; }
.guide-prose h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--text);
}
.guide-prose strong { font-weight: 700; }
.guide-prose em { font-style: italic; color: var(--text-muted); }
.guide-prose a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guide-prose a:hover { color: #0a1f3a; }
.guide-prose code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.95em;
  font-family: ui-monospace, Menlo, monospace;
}

.guide-callout {
  margin: 16px 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  color: #14532d;
  font-size: 0.98rem;
  line-height: 1.6;
}
.guide-callout--warn {
  background: #fef3c7;
  border-left-color: #d97706;
  color: #78350f;
}
.guide-callout--fact {
  background: var(--surface);
  border-left-color: var(--text);
  color: var(--text);
}
.guide-callout strong { font-weight: 700; }
.guide-callout a {
  /* WCAG 2.1: links inside body text must be distinguishable without relying on color alone.
     Inherit the callout's text color and add an underline so colorblind / monochrome users
     can still see the link. */
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.guide-callout a:hover { text-decoration-thickness: 2px; }

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.guide-list li {
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.96rem;
  line-height: 1.55;
}
.guide-list li strong { display: block; margin-bottom: 4px; font-weight: 700; }

/* When list items are bulleted prose (not cards) */
.guide-prose .guide-list {
  display: block;
  list-style: disc;
  padding-left: 24px;
  margin: 8px 0 14px 0;
}
.guide-prose .guide-list li {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 6px;
}

.guide-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
  max-width: 100%;
  /* Visual hint that table scrolls horizontally on narrow viewports */
  background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to right, rgba(255,255,255,0), white 70%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.guide-table-wrap .d-rates { min-width: 520px; }

/* Internal cross-links section */
.guide-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.guide-related a {
  display: block;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 120ms, transform 120ms;
}
.guide-related a:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}
.guide-related a strong { display: block; margin-bottom: 4px; font-weight: 700; }
.guide-related a span { font-size: 0.9rem; color: var(--text-muted); }

/* Mobile: ensure long callouts and prose don't get awkward */
@media (max-width: 640px) {
  .guide-prose { font-size: 1rem; }
  .guide-alert, .guide-callout { padding: 12px 14px; font-size: 0.95rem; }
  .guide-list { grid-template-columns: 1fr; }
}

/* Footer guides nav */
/* Compact 4-column footer grid (replaces 6-col .footer__guides) */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 24px 0 8px;
  padding: 24px 0 8px;
  border-top: 1px solid var(--border);
}
.footer__grid-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 10px 0;
}
.footer__grid-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__grid-col li {
  margin: 0;
}
.footer__grid-col a {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 3px 0;
  line-height: 1.4;
  transition: color 120ms;
}
.footer__grid-col a:hover {
  color: var(--text);
  text-decoration: underline;
}
.footer__grid-col .footer__grid-more {
  color: var(--accent, var(--text));
  font-weight: 500;
  margin-top: 2px;
}
/* Break to 2 columns earlier on tablet to avoid mid-phrase text wrap
   (e.g. "Suffolk County · due" / "May 19, 2026") in the 720-960 range. */
@media (max-width: 960px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 24px;
    margin: 20px 0 4px;
    padding: 20px 0 4px;
  }
}
@media (max-width: 720px) {
  .footer__grid-col h4 { font-size: 0.72rem; margin-bottom: 8px; }
  .footer__grid-col a { font-size: 0.85rem; padding: 2px 0; }
}

/* ---------- Footer "Browse by town & ZIP" block ----------
   Sits between the 4-column nav grid and the legal strip. Renders 4 inline
   columns of curated location links (Nassau towns / Suffolk towns / Nassau
   ZIPs / Suffolk ZIPs). Intentionally does NOT duplicate the county
   grievance links from the .footer__grid above; pairs town hubs with their
   adjacent ZIPs so the layout reads geographically.

   Breakpoint sequence:
     >= 960px  -> 4 columns (desktop)
     720-960   -> 2 columns (tablet, otherwise text wraps mid-phrase)
     < 720     -> 2 columns with tighter spacing (mobile) */
.footer__locations {
  margin: 18px 0 8px;
  padding: 22px 0 8px;
  border-top: 1px solid var(--border);
}
.footer__locations-head { margin-bottom: 16px; }
.footer__locations-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 4px 0;
}
.footer__locations-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.footer__locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.footer__locations-col h5 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px 0;
}
.footer__locations-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__locations-col li { margin: 0; }
.footer__locations-col a {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 3px 0;
  line-height: 1.4;
  transition: color 120ms;
}
.footer__locations-col a:hover {
  color: var(--text);
  text-decoration: underline;
}
.footer__locations-foot {
  margin: 18px 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.footer__locations-foot a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.footer__locations-foot a:hover { color: var(--text); }
@media (max-width: 960px) {
  .footer__locations-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
}
@media (max-width: 720px) {
  .footer__locations { margin: 14px 0 4px; padding: 18px 0 6px; }
  .footer__locations-head { margin-bottom: 12px; }
  .footer__locations-title { font-size: 0.72rem; }
  .footer__locations-sub { font-size: 0.78125rem; }
  .footer__locations-grid { gap: 18px 22px; }
  .footer__locations-col h5 { font-size: 0.68rem; margin-bottom: 6px; }
  .footer__locations-col a { font-size: 0.85rem; padding: 2px 0; }
  .footer__locations-foot { font-size: 0.78125rem; }
}

/* Legal strip restructured: stacked rows on mobile, inline on desktop */
.footer .footer__legal {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.footer__legal-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.footer__legal-line a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer__legal-line a:hover { color: var(--text); text-decoration: underline; }
.footer__legal-disc {
  flex: 1 1 100%;
  font-size: 11px;
  /* WCAG AA: opacity 0.85 was dropping effective contrast below 4.5:1.
     Keeping it at full opacity — the existing --text-muted color already reads
     as subordinate footer text without needing additional dimming. */
  margin-top: 2px;
}
@media (min-width: 720px) {
  .footer__legal-disc {
    flex: 1 1 auto;
    margin-top: 0;
    margin-left: auto;
    text-align: right;
    max-width: 60%;
  }
}

/* ============================================================
   Header megamenu (Guides)
   ============================================================ */
.nav__menu { position: relative; }
.nav__menu-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; line-height: inherit;
}
.nav__menu-caret { transition: transform 160ms ease; opacity: 0.7; }
.nav__menu.is-open .nav__menu-caret { transform: rotate(180deg); opacity: 1; }
.nav__menu.is-open .nav__menu-trigger { color: var(--text); background: var(--surface-2); }

.megamenu {
  position: fixed;
  top: 64px; /* just under the 60px sticky nav */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(11, 37, 69, 0.12), 0 2px 6px rgba(11, 37, 69, 0.06);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  z-index: 60;
}
.nav__menu.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}
.megamenu__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px 22px 16px;
}
.megamenu__col { display: flex; flex-direction: column; min-width: 0; }
.megamenu__h {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 8px 0;
}
.megamenu__h--spaced { margin-top: 14px; }
.megamenu__col a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  line-height: 1.35;
  text-decoration: none;
  transition: background 100ms, color 100ms;
}
.megamenu__col a:hover {
  background: var(--surface-2);
  color: var(--text);
}
.megamenu__pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand);
  white-space: nowrap;
}
/* "New" badge on time-sensitive megamenu sections (e.g. 2026 news column).
   Slightly warmer / more attention-grabbing than the deadline pill above. */
.megamenu__badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  white-space: nowrap;
}
.megamenu__sub {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 10px 0 4px;
  opacity: 0.7;
}
.megamenu__sub-link {
  font-size: 0.82rem !important;
  padding: 2px 8px !important;
}
.megamenu__foot {
  border-top: 1px solid var(--border);
  padding: 12px 22px;
  background: var(--surface);
  border-radius: 0 0 12px 12px;
}
.megamenu__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.megamenu__cta:hover { text-decoration: underline; }

/* Hide megamenu entirely on mobile (drawer handles it) */
@media (max-width: 880px) {
  .nav__menu { display: none; }
}

/* Tighten megamenu for tablet-sized screens */
@media (max-width: 1100px) and (min-width: 881px) {
  .megamenu { width: min(880px, calc(100vw - 24px)); }
  .megamenu__inner { gap: 16px; padding: 18px 18px 14px; }
}

/* ============================================================
   Mobile drawer — Guides nested expansion
   ============================================================ */
.nav-drawer__group > details > summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
}
.nav-drawer__group > details > summary::-webkit-details-marker { display: none; }
.nav-drawer__group > details > summary:hover { background: var(--surface); }
.nav-drawer__group > details > summary svg { transition: transform 160ms ease; opacity: 0.6; }
.nav-drawer__group > details[open] > summary svg { transform: rotate(180deg); opacity: 1; }

.nav-drawer__sub {
  padding: 4px 0 8px 12px;
  border-left: 2px solid var(--border);
  margin-left: 12px;
}
.nav-drawer__sub a {
  display: block;
  padding: 7px 12px;
  font-size: 0.92rem;
  color: var(--text-muted);
  border-radius: 6px;
  text-decoration: none;
}
.nav-drawer__sub a:hover { background: var(--surface); color: var(--text); }
.nav-drawer__sub-h {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 14px 0 4px 12px;
  opacity: 0.8;
}
.nav-drawer__nested > summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}
.nav-drawer__nested > summary::-webkit-details-marker { display: none; }
.nav-drawer__nested > summary::after {
  content: '▾';
  font-size: 0.7rem;
  opacity: 0.5;
  transition: transform 160ms ease;
}
.nav-drawer__nested[open] > summary::after { transform: rotate(180deg); }
.nav-drawer__nested a {
  padding: 5px 12px 5px 24px;
  font-size: 0.86rem;
}
.nav-drawer__cta {
  display: block;
  margin: 14px 12px 4px;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  color: var(--brand) !important;
  font-weight: 600;
  font-size: 0.9rem !important;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
}
.nav-drawer__cta:hover {
  background: color-mix(in oklab, var(--brand) 14%, transparent) !important;
}

/* ============================================================
   Footer — town sub-list under Tax grievance
   ============================================================ */
.footer__guides-sub {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  opacity: 0.7;
  margin: 12px 0 2px;
}
.footer__guides-sub-link {
  font-size: 0.82rem !important;
  padding: 2px 0 !important;
  opacity: 0.85;
}

/* ============================================================
   Property pages — /property/[county]/[slug]
   ============================================================ */
.property-key-facts,
.property-breakdown,
.property-comps,
.property-grievance,
.property-actions,
.property-sources {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border);
}
.property-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 960px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .property-grid { grid-template-columns: 1fr; }
}
.property-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-5);
}
.property-card__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.property-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.property-card__sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 0.95rem;
}
.guide-table th,
.guide-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.guide-table th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface);
}
.guide-table tbody tr:hover { background: var(--surface); }
.guide-table a { color: var(--brand); text-decoration: none; }
.guide-table a:hover { text-decoration: underline; }

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.breadcrumbs a {
  color: var(--text-muted);
  /* WCAG 2.1: breadcrumb links must be distinguishable from surrounding text without
     relying on color alone. Underline-on-hover wasn't enough — the resting state
     needs a visible affordance. Subtle dotted underline keeps the breadcrumb feeling
     light but still reads as a link. */
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.breadcrumbs a:hover { color: var(--text); text-decoration: underline solid; }
.breadcrumbs span { padding: 0 2px; }

.guide-sources {
  list-style: none;
  padding: 0;
  margin: 0;
}
.guide-sources li {
  padding: 6px 0;
}
.guide-sources a {
  color: var(--brand);
  text-decoration: none;
  font-size: 0.92rem;
}
.guide-sources a:hover { text-decoration: underline; }

/* ============================================================
   School district lookup + PITI tools (shared visual language)
   ============================================================ */
.lookup-search {
  margin: var(--space-6) 0 var(--space-3);
}
.lookup-search form {
  display: flex;
  gap: 8px;
  max-width: 640px;
}
.lookup-search input[type="search"] {
  flex: 1;
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
.lookup-search input[type="search"]:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}
.lookup-search button {
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lookup-search button:hover { filter: brightness(0.95); }

/* Mobile: stack input above button (was overflowing off-screen) */
@media (max-width: 520px) {
  .lookup-search form {
    flex-direction: column;
    gap: 10px;
  }
  .lookup-search button {
    width: 100%;
    padding: 14px 20px;
  }
}
.lookup-help {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.lookup-result { margin-top: var(--space-5); }
.lookup-result__loading,
.lookup-result__empty {
  padding: 14px 16px;
  background: var(--surface);
  border-radius: 8px;
  color: var(--text-muted);
}
.lookup-row {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg);
}
.lookup-row__addr { font-weight: 600; }
.lookup-row__addr a { color: var(--text); text-decoration: none; }
.lookup-row__addr a:hover { color: var(--brand); text-decoration: underline; }
.lookup-row__meta { font-size: 0.92rem; color: var(--text-muted); margin-top: 4px; }
.lookup-row__meta a { color: var(--brand); text-decoration: none; }
.lookup-row__meta a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   PITI calculator
   ============================================================ */
.piti-tool { padding: var(--space-8) 0; background: var(--surface); }
.piti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 960px) {
  .piti-grid { grid-template-columns: 1fr; }
}
.piti-inputs, .piti-outputs {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6);
}
.piti-inputs h2, .piti-outputs h2 { margin-top: 0; }

/* PITI output cell with primary value + muted explanation underneath */
.piti-out__primary {
  display: block;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.piti-out__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted, #79808a);
  font-weight: 400;
  line-height: 1.4;
}

.piti-field {
  margin-bottom: var(--space-4);
}
.piti-field > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.piti-field input[type="number"],
.piti-field input[type="search"],
.piti-field select {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
.piti-input-prefix, .piti-input-suffix {
  position: relative;
  display: flex;
  align-items: stretch;
}
.piti-input-prefix span, .piti-input-suffix span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
}
.piti-input-prefix span { border-right: 0; border-radius: 8px 0 0 8px; }
.piti-input-suffix span { border-left: 0; border-radius: 0 8px 8px 0; }
.piti-input-prefix input { border-radius: 0 8px 8px 0; }
.piti-input-suffix input { border-radius: 8px 0 0 8px; }

.piti-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 520px) {
  .piti-row { grid-template-columns: 1fr; }
}

.piti-radio { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; font-size: 0.92rem; }
.piti-radio label { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.piti-hint { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }
.piti-picks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.piti-pick {
  text-align: left;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.piti-pick:hover { background: var(--surface-2); }
.piti-picked-active {
  padding: 8px 12px;
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent);
  border-radius: 6px;
  font-size: 0.9rem;
}

.piti-total {
  text-align: center;
  padding: var(--space-5);
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: var(--space-4);
}
.piti-total__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.piti-total__value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
}
.piti-total__sub { font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }

.piti-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.piti-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.93rem;
}
.piti-table td:first-child { color: var(--text-muted); }
.piti-table td:last-child { text-align: right; font-weight: 600; color: var(--text); }

.piti-context {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border-radius: 8px;
}
.piti-context h3 { margin-top: 0; font-size: 1rem; }
.piti-context p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

.piti-disclaimer {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-left: 3px solid var(--text-muted);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--text-muted);
  border-radius: 0 6px 6px 0;
}

/* ============================================================
   "Should I grieve" quiz
   ============================================================ */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-6);
}
.quiz-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress__bar > div {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 240ms ease;
}
.quiz-progress__text {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.quiz-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-7);
}
.quiz-card h3 {
  margin: 0 0 var(--space-5) 0;
  font-size: 1.25rem;
  line-height: 1.3;
}
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-options button {
  text-align: left;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 120ms;
  line-height: 1.4;
}
.quiz-options button:hover {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 6%, transparent);
}

.quiz-result {
  text-align: center;
  padding: var(--space-7);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.quiz-result h2 { margin: 0 0 var(--space-3) 0; font-size: 1.4rem; }
.quiz-result p { margin: 0 0 var(--space-5) 0; line-height: 1.6; }
.quiz-cta { margin: var(--space-4) 0; }
.quiz-cta .btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  margin: 4px;
}
.quiz-cta .btn--secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.quiz-restart {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
}

/* ============================================================
   Property watch
   ============================================================ */
.watch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 880px) {
  .watch-grid { grid-template-columns: 1fr; }
}
.watch-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6);
}
.watch-card h2 { margin-top: 0; }
.watch-card .piti-field input[type="email"] { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 1rem; color: var(--text); }
.watch-card .btn { display: inline-block; padding: 10px 18px; background: var(--brand); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; border: 0; cursor: pointer; }

/* ============================================================
   Mobile nav — full rebuild ('.mnav' replaces old '.nav-drawer')
   ============================================================ */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 37, 69, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  pointer-events: none;
}
.mnav.is-open {
  display: block;
  pointer-events: auto;
}
.mnav__panel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.mnav.is-open .mnav__panel {
  transform: translateY(0);
  opacity: 1;
}

/* Header: sticky brand + close button */
.mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
}
.mnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-width: 0;
}
.mnav__brand-mark { width: 24px; height: 24px; color: var(--brand-mark, var(--brand)); flex-shrink: 0; }
.mnav__brand-text { overflow: hidden; text-overflow: ellipsis; }
.mnav__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.mnav__close:hover, .mnav__close:active { background: var(--surface-2, var(--surface)); }

/* Search bar */
.mnav__search {
  position: sticky;
  top: 65px;
  z-index: 2;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mnav__search svg { color: var(--text-muted); flex-shrink: 0; }
.mnav__search input[type="search"] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px; /* prevent iOS zoom */
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.mnav__search input[type="search"]:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: transparent;
}
.mnav__search input[type="search"]::-webkit-search-cancel-button { display: none; }
.mnav__search-clear {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mnav__search-clear:hover { background: var(--surface); }

/* Scrolling content area */
.mnav__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Section + heading */
.mnav__sec { padding: 18px 14px 4px; }
.mnav__sec--first { padding-top: 18px; }
.mnav__sec--meta { padding-top: 6px; padding-bottom: 14px; border-top: 1px solid var(--border); margin-top: 10px; }
.mnav__sec-h {
  margin: 0 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Quick actions: 4-up icon grid */
.mnav__quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mnav__quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: transform 80ms ease, background 100ms;
}
.mnav__quick-item:hover, .mnav__quick-item:active {
  background: color-mix(in oklab, var(--brand) 8%, var(--surface));
  transform: translateY(-1px);
}
.mnav__quick-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--brand);
}
.mnav__quick-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Tools grid: 2-up rich cards */
.mnav__tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.mnav__tool {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  min-height: 64px;
}
.mnav__tool:hover, .mnav__tool:active {
  background: color-mix(in oklab, var(--brand) 6%, var(--surface));
  border-color: color-mix(in oklab, var(--brand) 30%, var(--border));
}
.mnav__tool-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--brand);
  flex-shrink: 0;
}
.mnav__tool-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mnav__tool-body strong { font-size: 0.88rem; font-weight: 600; line-height: 1.2; color: var(--text); }
.mnav__tool-body span { font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; }

/* Rows (used for guide links and meta) */
.mnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  margin: 0 4px;
  background: transparent;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  min-height: 48px; /* iOS touch target */
}
.mnav__row > span:first-child {
  flex: 1;
  min-width: 0;
}
.mnav__row:hover, .mnav__row:active { background: var(--surface); }
.mnav__row--meta { color: var(--text-muted); font-weight: 500; }
.mnav__chev {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
}
.mnav__pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Expandable sections */
.mnav__expand { margin: 0; }
.mnav__expand > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  margin: 0 4px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 48px;
}
.mnav__expand > summary::-webkit-details-marker { display: none; }
.mnav__expand > summary:hover, .mnav__expand > summary:active { background: var(--surface); }
.mnav__expand[open] > summary { background: var(--surface); }
.mnav__chev--rot { transition: transform 160ms ease; }
.mnav__expand[open] > summary .mnav__chev--rot { transform: rotate(90deg); }
.mnav__expand-body {
  padding: 6px 0 10px 16px;
  margin: 4px 8px 6px 12px;
  border-left: 2px solid color-mix(in oklab, var(--brand) 20%, var(--border));
}
.mnav__expand-body .mnav__row { font-size: 0.92rem; min-height: 42px; padding: 9px 14px; }

.mnav__expand--block > summary h3 { font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text); margin: 0; }
.mnav__expand--block[open] > summary h3 { color: var(--brand); }

.mnav__sub-row {
  display: block;
  padding: 9px 14px;
  margin: 0 4px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}
.mnav__sub-row:hover, .mnav__sub-row:active { background: var(--bg); }

/* Search results */
.mnav__results { padding: 12px 4px 16px; }
.mnav__results-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.mnav__results-group { padding: 8px 0; }
.mnav__results-group h4 {
  margin: 0 14px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Footer (sticky bottom strip) */
.mnav__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.mnav__foot a { color: var(--text-muted); text-decoration: none; }
.mnav__foot a:hover { color: var(--text); text-decoration: underline; }

/* Hide everything by default; show only on mobile */
@media (min-width: 721px) {
  .mnav { display: none !important; }
}

/* Prevent body scroll behind drawer */
html.is-nav-open, html.is-nav-open body {
  overflow: hidden;
}

/* Hide the old .nav-drawer entirely \u2014 we're using .mnav now */
.nav-drawer { display: none !important; }

/* ============================================================
   Desktop Tools megamenu — rich icon cards
   ============================================================ */
.megamenu--tools .megamenu__inner--tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 16px;
  max-width: 640px;
}
.megatool {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background 100ms;
}
.megatool:hover, .megatool:focus-visible {
  background: var(--surface-2, var(--surface));
}
.megatool__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--brand);
  flex-shrink: 0;
}
.megatool__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.megatool__body strong { font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.megatool__body span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; }

/* Tools menu doesn't need the wider 1080px width — it's compact */
.megamenu--tools { width: min(680px, calc(100vw - 32px)); }
.mnav__results-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}