/* shared.css — common public-site design system for the consumer website,
   content pages, and admin-adjacent public surfaces that intentionally use
   the shared presentation layer. The live partner agency surface is kept
   isolated in public/agency.html with self-contained styles so partner
   testing continuity is never coupled to public brand work. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy: #153653;
  --navy-deep: #0d2437;
  --navy-light: #2b5879;
  --teal: #158c8c;
  --accent: #158c8c;
  --blue: #2e79b7;
  --accent-bright: #2e79b7;
  --accent-light: #72b5bb;
  --signal-orange: #d97a20;
  --ink: #1d2935;
  --muted: #5f6f7f;
  --muted-light: #8a98a7;
  --bg: #f4f7f9;
  --bg-alt: #edf3f6;
  --card-bg: #ffffff;
  --border: #d8e3ea;

  --green: #1f7a46;
  --green-bg: #e8f5ec;
  --yellow: #9d7000;
  --yellow-bg: #fcedc9;
  --orange: #d97a20;
  --orange-bg: #fff0e2;
  --red: #c4483d;
  --red-bg: #fde9e6;
  --gray: #617485;
  --gray-bg: #edf1f4;
  --hazard-flood: #2e79b7;
  --hazard-wildfire: #d9683a;
  --hazard-earthquake: #b9862e;
  --hazard-wind: #158c8c;
  --hazard-heat: #b84573;
  --hazard-environmental: #7755a6;
  --hazard-property: #52697c;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(21, 54, 83, .06), 0 8px 22px rgba(21, 54, 83, .04);
  --shadow-md: 0 18px 44px rgba(16, 42, 64, .10);
  --shadow-lg: 0 28px 70px rgba(12, 31, 56, .16);

  /* Desktop surfaces should use the available laptop width without making
     long-form reading lines too wide. Article prose keeps its own measure. */
  --site-max: 1360px;
  --longform-max: 780px;
  --section-space: clamp(56px, 8vw, 96px);
  --section-space-compact: clamp(40px, 6vw, 72px);

  --font-display: "Montserrat", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display { font-family: var(--font-display); }

a {
  color: var(--accent-bright);
  text-underline-offset: 2px;
}

/* ---------- Top navigation (shared across all 3 pages) ---------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background:
    linear-gradient(180deg, rgba(9, 25, 38, .08), rgba(9, 25, 38, 0)),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 36px rgba(8, 25, 40, .12);
  backdrop-filter: blur(12px);
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1px;
}

.topnav-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.topnav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.topnav-menu-btn:hover { background: rgba(255, 255, 255, .14); }
.topnav-menu-btn:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.topnav-menu-btn .menu-icon {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background .15s ease;
}
.topnav-menu-btn .menu-icon::before,
.topnav-menu-btn .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .15s ease, top .15s ease, bottom .15s ease;
}
.topnav-menu-btn .menu-icon::before { top: -6px; }
.topnav-menu-btn .menu-icon::after { bottom: -6px; }

.topnav-link {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}

.topnav-link:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.topnav-link.active {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- Page intro (slim sub-header under nav) ---------- */

.page-intro {
  padding: 26px 24px 6px;
  max-width: var(--site-max);
  margin: 0 auto;
}
.page-intro h1 { margin: 0 0 6px; font-size: 24px; color: var(--navy); }
.page-intro p { margin: 0; font-size: 14px; color: var(--muted); }

main { max-width: var(--site-max); margin: 0 auto; padding: 18px 24px 88px; }
main.narrow { max-width: var(--longform-max); }
main.page-sections {
  max-width: none;
  padding: 0;
}

.public-section {
  padding: clamp(68px, 9vw, 108px) 24px;
}
.public-section.alt {
  background: var(--bg-alt);
}
.public-section-inner {
  max-width: var(--site-max);
  margin: 0 auto;
}
.public-section-header {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}
.public-kicker {
  margin-bottom: 10px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.public-section-header h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.public-section-header p {
  max-width: 700px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.landing-search-card {
  max-width: 900px;
  margin: 28px auto 0;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 60px rgba(8, 28, 45, .24);
  text-align: left;
}
.landing-search-card label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.landing-search-row {
  display: flex;
  gap: 10px;
}
.landing-search-row input[type="text"] {
  flex: 1;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  color: var(--ink);
  font-size: 16px;
}
.landing-search-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.landing-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  color: rgba(13, 36, 55, .72);
  font-size: 12px;
  font-weight: 800;
}
.landing-trust-line span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: middle;
}
.landing-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.landing-panel {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.landing-panel h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 21px;
}
.landing-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.68;
}
.landing-panel strong {
  color: var(--navy);
}
.landing-limit-card {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at bottom right, rgba(217, 122, 32, .12), transparent 28%),
    linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.landing-limit-card h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 28px;
}
.landing-limit-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.74;
}
.landing-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.landing-faq-grid details {
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.landing-faq-grid summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 800;
}
.landing-faq-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.principle-grid,
.partner-feature-grid,
.contact-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.principle-card,
.partner-feature-card,
.contact-category-card {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.principle-card {
  min-height: 160px;
}
.principle-card strong,
.partner-feature-card strong,
.contact-category-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.25;
}
.principle-card span,
.partner-feature-card span,
.contact-category-card span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.process-ribbon {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  box-shadow: var(--shadow-md);
}
.process-step {
  position: relative;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
}
.process-step:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.44);
  font-weight: 900;
}
.process-step strong {
  display: block;
  color: #fff;
  font-size: 15px;
}
.process-step span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  line-height: 1.45;
}
.founder-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  padding: 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(21, 140, 140, .12), transparent 30%),
    linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.founder-note h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.12;
}
.founder-note p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.about-portrait-img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(16, 38, 58, .13);
}
.about-portrait-caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  line-height: 1.45;
}

.partner-hero-panel {
  max-width: 1040px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  text-align: left;
}
.partner-hero-copy,
.partner-dashboard {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8, 28, 45, .54);
  box-shadow: 0 26px 60px rgba(8, 28, 45, .26);
}
.partner-hero-copy {
  padding: 26px;
}
.partner-hero-copy p {
  margin: 0 0 18px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.7;
}
.partner-dashboard {
  padding: 18px;
  color: #fff;
}
.partner-dashboard-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.partner-dashboard-header strong {
  display: block;
  color: #fff;
  font-size: 15px;
}
.partner-dashboard-header span {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.partner-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.partner-metric {
  padding: 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.partner-metric strong {
  display: block;
  color: #fff;
  font-size: 20px;
}
.partner-metric span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.64);
  font-size: 11.5px;
  line-height: 1.35;
}
.partner-map-preview {
  min-height: 158px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(127,208,160,.18) 1px, transparent 1px),
    linear-gradient(rgba(127,208,160,.16) 1px, transparent 1px),
    radial-gradient(circle at 20% 40%, rgba(127,208,160,.85) 0 8px, transparent 9px),
    radial-gradient(circle at 46% 58%, rgba(240,180,93,.9) 0 10px, transparent 11px),
    radial-gradient(circle at 76% 34%, rgba(93,174,226,.85) 0 8px, transparent 9px),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  background-size: 34px 34px, 34px 34px, auto, auto, auto, auto;
  border: 1px solid rgba(255,255,255,.1);
}
.partner-feature-card {
  min-height: 172px;
}
.partner-feature-card .mini-label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(21, 140, 140, .1);
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.market-model {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.market-model-card {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.market-model-card::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 13%, white);
  border: 1px solid color-mix(in srgb, var(--teal) 24%, white);
}
.market-model-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 22px;
}
.market-model-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.68;
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .95fr);
  gap: 28px;
  align-items: start;
}
.contact-form-card {
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.contact-form-card h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 28px;
}
.contact-form-card > p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.contact-form-card label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.contact-form-card input[type=text],
.contact-form-card input[type=email],
.contact-form-card select,
.contact-form-card textarea {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.contact-form-card textarea {
  min-height: 150px;
  resize: vertical;
}
.field-hint {
  margin: -9px 0 16px;
  color: var(--muted-light);
  font-size: 11.5px;
}
.contact-category-grid {
  grid-template-columns: 1fr;
}
.contact-category-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 12%, white);
  color: var(--teal);
}
.contact-icon svg {
  width: 21px;
  height: 21px;
}

/* ---------- Cards ---------- */

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, opacity .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--signal-orange), #e38b39);
  color: #fff;
  box-shadow: 0 10px 26px rgba(217, 122, 32, .22);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #cb6b10, #dd7b22); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: #f2f6fb; }
.btn-ghost { background: none; color: var(--accent-bright); border: 1px solid var(--border); padding: 6px 12px; font-size: 12.5px; }
.btn-ghost:hover:not(:disabled) { background: #f2f6fb; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- Spinner ---------- */

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
.spinner.dark { border-color: rgba(46, 109, 164, .25); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Badges (status pills) ---------- */

.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}
.badge.status-green  { background: var(--green-bg);  color: var(--green); }
.badge.status-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge.status-orange { background: var(--orange-bg); color: var(--orange); }
.badge.status-red    { background: var(--red-bg);    color: var(--red); }
.badge.status-gray   { background: var(--gray-bg);   color: var(--gray); }

.status-green  { --status-color: var(--green); }
.status-yellow { --status-color: var(--yellow); }
.status-orange { --status-color: var(--orange); }
.status-red    { --status-color: var(--red); }
.status-gray   { --status-color: var(--gray); }

/* ---------- Chips (history summary bar) ---------- */

.chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Filter chips (blog category filter) — same chip look, made clickable */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip-filter { cursor: pointer; font-family: inherit; }
.chip-filter span { color: var(--muted-light); font-weight: 600; }
.chip-filter:hover { border-color: var(--accent); }
.chip-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-filter.active span { color: rgba(255, 255, 255, .75); }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
th, td { text-align: left; padding: 11px 13px; font-size: 13px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td.wrap { white-space: normal; }
th { background: #f5f7fb; font-weight: 700; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
tr:last-child td { border-bottom: none; }
tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: #f7f9fc; }

/* ---------- Misc ---------- */

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted-light); }
.empty-state .icon { font-size: 30px; margin-bottom: 8px; }
.msg-line { font-size: 13px; margin-top: 8px; }
.msg-line.err { color: var(--red); }
.msg-line.ok { color: var(--green); }
.mode-tag { font-size: 11px; color: var(--muted-light); text-align: center; margin-top: 10px; }

details.disclosure { font-size: 13px; }
details.disclosure summary {
  cursor: pointer; font-weight: 600; color: var(--accent); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
details.disclosure[open] summary::before { transform: rotate(90deg); }
details.disclosure .disclosure-body { padding: 10px 2px 2px; color: var(--muted); line-height: 1.55; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .28s ease both; }

/* ---------- Print ---------- */

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .card, .top-card, .cat-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  main { max-width: 100%; padding: 0; }
}

@media (max-width: 640px) {
  .topnav { padding: 10px 14px; }
  .page-intro { padding: 18px 14px 4px; }
  main { padding: 12px 14px 60px; }
}

@media (max-width: 860px) {
  .topnav {
    padding: 10px 14px;
    gap: 10px;
    align-items: center;
  }
  .topnav-brand { min-height: 44px; }
  .topnav-menu-btn { display: inline-flex; }
  .topnav-links {
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 2px;
  }
  .topnav.is-open .topnav-links { display: flex; }
  .topnav-link {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
  }
  .topnav-link.active { background: rgba(255,255,255,.16); }
}

/* ---------- Content pages (how-it-works, hazard landing pages, blog) ---------- */
/* Added for the site's first content/SEO build-out — kept in this shared
   file rather than per-page <style> blocks so blog posts, hazard landing
   pages, and evergreen pages stay visually consistent with each other and
   with the report tool, same reasoning as the rest of this file. */

.content-hero { padding: 34px 20px 10px; text-align: center; }
.content-hero .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.content-hero h1 { margin: 0 0 12px; font-size: 32px; color: var(--navy); line-height: 1.2; }
.content-hero p.lede { margin: 0 auto; font-size: 16px; color: var(--muted); max-width: 680px; line-height: 1.65; }

main.content { max-width: var(--longform-max); }

.breadcrumb { font-size: 12.5px; color: var(--muted-light); margin: 0 0 14px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

.post-meta { font-size: 12.5px; color: var(--muted-light); margin: -4px 0 18px; text-align: center; }

.prose { font-size: 16px; line-height: 1.78; color: var(--ink); }
.prose h2 { font-size: 24px; color: var(--navy); margin: 36px 0 14px; line-height: 1.25; }
.prose h3 { font-size: 18px; color: var(--navy); margin: 28px 0 10px; line-height: 1.3; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose a { font-weight: 600; }
.prose strong { color: var(--navy); }

.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 24px; }
.stat-box { flex: 1 1 150px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.stat-box .num { font-size: 21px; font-weight: 800; color: var(--navy); }
.stat-box .label { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

.callout { background: #edf8f7; border-left: 4px solid var(--teal); border-radius: var(--radius-sm); padding: 16px 18px; margin: 24px 0; font-size: 14.5px; line-height: 1.65; }
.callout strong { color: var(--navy); }

.source-cite { font-size: 11.5px; color: var(--muted-light); margin-top: -8px; margin-bottom: 20px; }
.source-cite a { color: var(--muted-light); }

.hazard-status-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 24px; }
.hazard-status-strip .badge { font-size: 11px; padding: 5px 11px; }

.cluster-nav { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 30px 0; box-shadow: var(--shadow-sm); }
.cluster-nav h4 { margin: 0 0 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.cluster-nav ul { margin: 0; padding-left: 18px; }
.cluster-nav li { margin-bottom: 6px; font-size: 14px; }

.post-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.post-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block; transition: box-shadow .15s ease, transform .1s ease; }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.post-card .tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--accent); margin-bottom: 6px; }
.post-card h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--navy); }
.post-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---------- About page portrait ---------- */
.about-portrait-img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.about-portrait { width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--muted-light); font-family: var(--font-display); font-weight: 800; font-size: 44px; }
.about-portrait-caption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }

.author-box { display: flex; gap: 12px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 28px 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.author-box strong { color: var(--ink); }

.faq-list details.disclosure { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; background: var(--card-bg); }

@media (min-width: 640px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .content-hero { padding: 26px 16px 6px; }
  .content-hero h1 { font-size: 23px; }
}

/* =====================================================================
   Marketing design system — hero bands, section rhythm, numbered flow
   cards, feature strips, and a real footer. Added when the site moved
   from "functional prototype" to a real public launch; built to sit
   underneath the same tokens (--navy, --accent, --card-bg, etc.) above
   so nothing here is a second, competing palette.
   ===================================================================== */

.site-logo-mark {
  width: 30px; height: 30px; flex-shrink: 0;
}

/* Full lockup (icon + wordmark) logo images — replaces the old inline-SVG
   icon-only mark. -nav is the white-wordmark variant for the navy topnav;
   -footer is the dark-wordmark variant for the light footer background. */
.brand-logo-img {
  height: 62px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.site-footer-brand .brand-logo-img { height: 54px; }
@media (max-width: 480px) {
  .brand-logo-img { height: 42px; }
  .site-footer-brand .brand-logo-img { height: 40px; }
}

/* ---------- Hero band (full-bleed gradient section) ---------- */

.hero-band {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.10) 0, transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(21, 140, 140, .32) 0, transparent 34%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 52%, #1d4f67 100%);
  color: #fff;
  padding: clamp(72px, 10vw, 112px) 24px clamp(78px, 10vw, 116px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-band::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.07) 0, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,.05) 0, transparent 45%);
  pointer-events: none;
}
.hero-band > * { position: relative; z-index: 1; }
.hero-band.compact { padding: clamp(42px, 8vw, 62px) 20px clamp(48px, 8vw, 66px); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #afd9de;
  margin-bottom: 14px;
}
.hero-band .eyebrow { color: #bfe6e6; }

.hero-band h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.08;
  margin: 0 0 20px;
  max-width: 1080px;
  margin-left: auto; margin-right: auto;
  letter-spacing: -.04em;
}
.hero-band p.lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 2.5vw, 21px);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  max-width: 880px;
  margin: 0 auto 30px;
}
.hero-band .hero-bullets {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
}
.hero-band .hero-bullets li {
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.92);
  display: flex; align-items: center; gap: 7px;
}
.hero-band .hero-bullets li::before {
  content: "✓"; color: #7fd0a0; font-weight: 800;
}
.hero-band .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-lg { padding: 14px 26px; font-size: 15.5px; font-family: var(--font-display); font-weight: 700; letter-spacing: .1px; border-radius: 10px; }
.btn-hero-primary { background: linear-gradient(135deg, var(--signal-orange), #ea9341); color: #fff; box-shadow: 0 10px 28px rgba(217,122,32,.32); }
.btn-hero-primary:hover { background: linear-gradient(135deg, #cb6b10, #de832d); }
.btn-hero-secondary { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.36); }
.btn-hero-secondary:hover { background: rgba(255,255,255,.14); }

/* ---------- Section rhythm ---------- */

.section { padding: var(--section-space) 20px; }
.section.section-white { background: #fff; }
.section.section-alt { background: var(--bg-alt); }
.section-inner { max-width: var(--site-max); margin: 0 auto; }
.section-inner.narrow { max-width: 1100px; }
.section-head { text-align: center; margin-bottom: clamp(30px, 5vw, 44px); }
.section-head .eyebrow { color: var(--teal); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); color: var(--navy);
  margin: 0 0 12px; letter-spacing: -.03em; line-height: 1.16;
}
.section-head p { font-size: 16px; color: var(--muted); max-width: 680px; margin: 0 auto; line-height: 1.72; }

/* ---------- Numbered flow cards ---------- */

.flow-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.flow-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.flow-card .flow-num {
  font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent-bright);
  width: 38px; height: 38px; border-radius: 50%; background: #e7f4f5;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.flow-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.flow-card p { font-size: 14.5px; color: var(--muted); line-height: 1.68; margin: 0; }
.hero-band .flow-card { text-align: left; }

@media (min-width: 720px) {
  .flow-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
  .flow-grid.four-up { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .flow-grid.four-up { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Feature strip (4-up light band) ---------- */

.feature-strip { display: grid; grid-template-columns: 1fr; gap: 26px; }
.feature-strip .feature { text-align: left; }
.feature-strip .feature h4 { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.feature-strip .feature p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }
@media (min-width: 720px) {
  .feature-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Two-column "why" section ---------- */

.split-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 860px) {
  .split-grid { grid-template-columns: 1.15fr .85fr; gap: 44px; }
}
.split-grid h2 { font-family: var(--font-display); font-weight: 800; font-size: 27px; color: var(--navy); line-height: 1.3; margin: 0 0 16px; }
.split-grid .prose p, .split-grid .prose li { font-size: 15px; }
.credibility-card {
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: 26px 24px;
}
.credibility-card .eyebrow { color: var(--accent-bright); }
.credibility-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--navy); margin: 0 0 10px; line-height: 1.35; }
.credibility-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------- Explore / index card grid (2x2 numbered) ---------- */

.explore-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .explore-grid { grid-template-columns: 1fr 1fr; } }
.explore-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; text-decoration: none; color: inherit; display: block;
  transition: box-shadow .15s ease, transform .1s ease;
}
.explore-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.explore-card .flow-num { margin-bottom: 12px; }
.explore-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.explore-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.explore-card .explore-link { font-size: 13px; font-weight: 700; color: var(--accent-bright); }

/* ---------- Final CTA band ---------- */

.cta-band { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 72%, #184561 100%); border-radius: var(--radius-lg); padding: 40px; color: #fff; box-shadow: var(--shadow-md); }
.cta-band-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 780px) { .cta-band-grid { grid-template-columns: 1.2fr .8fr; } }
.cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: 27px; margin: 0 0 14px; color: #fff; }
.cta-band p { font-size: 14.5px; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0 0 14px; }
.cta-band .hero-bullets li { color: rgba(255,255,255,.9); }
.cta-band-panel { background: #fff; border-radius: var(--radius); padding: 22px; color: var(--ink); }
.cta-band-panel h3 { font-family: var(--font-display); font-size: 18px; color: var(--navy); margin: 0 0 8px; }
.cta-band-panel p { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.55; }

/* ---------- Real footer ---------- */

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 48px 20px 24px; }
.site-footer-inner { max-width: var(--site-max); margin: 0 auto; }
.site-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 30px; }
.site-footer-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--navy); margin-bottom: 10px; }
.site-footer-brand span { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.site-footer p.tagline { font-size: 13px; color: var(--muted); max-width: 240px; line-height: 1.55; margin: 0; }
.site-footer h5 { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a.footer-link { color: var(--ink); text-decoration: none; font-size: 13.5px; }
.site-footer a.footer-link:hover { color: var(--teal); text-decoration: underline; }
.site-footer-legal {
  border-top: 1px solid var(--border); padding-top: 18px; font-size: 11.5px; color: var(--muted-light);
  line-height: 1.6; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: flex-start;
}
.site-footer-legal .legal-disclaimer { max-width: 720px; }
.site-footer-legal .legal-links a { color: var(--muted-light); margin-right: 14px; }

@media (max-width: 720px) {
  .site-footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .site-footer { padding: 36px 16px 22px; }
  .site-footer-legal { flex-direction: column; gap: 10px; }
  .site-footer-legal .legal-links { line-height: 1.8; }
  .cta-band { padding: 26px; }
  .topnav { padding: 10px 16px; }
}

@media (max-width: 480px) {
  .hero-band { padding: 56px 16px 64px; }
  .hero-band.compact { padding: 34px 16px 42px; }
  .hero-band h1 { font-size: 26px; line-height: 1.18; }
  .hero-band p.lede { font-size: 14px; line-height: 1.55; }
  .hero-band .hero-bullets {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
  }
  .section { padding: var(--section-space-compact) 16px; }
  .flow-card,
  .explore-card,
  .cta-band,
  .credibility-card { padding: 22px 18px; }
  .section-head { margin-bottom: 28px; }
}

/* =====================================================================
   Public product primitives — extracted from the approved homepage pass
   so later public pages can reuse the same cards, report preview, source
   panels, guide assets, and calm CTA surfaces without copying inline CSS.
   These are additive and do not affect the isolated partner agency surface.
   ===================================================================== */

.surface-card,
.hazard-overview-card,
.use-case-card,
.professional-panel,
.report-preview-shell,
.source-showcase,
.final-address-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.hazard-overview-grid,
.use-case-grid,
.professional-grid,
.learn-feature-grid {
  display: grid;
  gap: 18px;
}

.hazard-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.use-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.professional-grid { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.learn-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hazard-overview-card {
  --hazard-color: var(--hazard-property);
  position: relative;
  overflow: hidden;
  padding: 22px;
}
.hazard-overview-card::after {
  content: "";
  position: absolute;
  inset: auto -28px -28px auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hazard-color) 14%, white);
}
.hazard-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.hazard-overview-card h3 {
  margin: 0;
  font-size: 22px;
  color: var(--navy);
}
.hazard-overview-card p {
  position: relative;
  z-index: 1;
  max-width: 36ch;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.hazard-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--hazard-color) 14%, white);
  color: var(--hazard-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hazard-pill .dot,
.preview-summary-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.hazard-mini {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hazard-color) 7%, white);
  border: 1px solid color-mix(in srgb, var(--hazard-color) 22%, white);
}
.hazard-mini strong { color: var(--navy); font-size: 14px; }
.hazard-mini span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.hazard-mini a {
  color: var(--hazard-color);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.report-preview-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
  padding: 28px;
}
.report-preview-frame {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(155deg, var(--navy-deep), var(--navy));
  color: #fff;
}
.report-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.report-preview-meta span {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.report-preview-meta strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.preview-summary-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  background: rgba(255,255,255,.1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.preview-summary-badge .dot { background: #f0b45d; }
.preview-logic,
.preview-callouts,
.professional-details {
  display: grid;
  gap: 12px;
}
.preview-logic-row {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.preview-logic-row strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.preview-logic-row span {
  display: block;
  color: rgba(255,255,255,.94);
  font-size: 14px;
  line-height: 1.65;
}
.report-preview-side {
  display: grid;
  align-content: center;
  gap: 14px;
}
.report-preview-side h3 {
  margin: 0;
  color: var(--navy);
  font-size: 28px;
  line-height: 1.16;
}
.report-preview-side p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}
.preview-callout,
.professional-details div,
.state-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.preview-callout strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 14px;
}
.preview-callout span,
.professional-details div {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.source-showcase {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: stretch;
  padding: 34px;
  background:
    radial-gradient(circle at top left, rgba(21, 140, 140, .08), transparent 32%),
    linear-gradient(180deg, #ffffff, #f8fbfd);
}
.source-showcase-copy {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 8px 0;
}
.source-showcase-copy h3 {
  margin: 0;
  color: var(--navy);
  font-size: 34px;
  line-height: 1.04;
}
.source-showcase-copy p {
  max-width: 32ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}
.source-highlight {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(21, 140, 140, .08);
  border: 1px solid rgba(21, 140, 140, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.source-highlight strong {
  display: block;
  margin-bottom: 6px;
  color: var(--teal);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.source-highlight span {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
}
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}
.source-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 20px 20px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(16, 38, 58, .09);
}
.source-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}
.source-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 20px;
}
.source-card span {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.66;
}

.learn-feature-card {
  --card-tone: var(--accent);
  --card-accent: linear-gradient(135deg, #e6f1fb, #f7fafc);
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 288px;
  padding: 24px 24px 22px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,1)),
    var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-tone) 18%, var(--border));
  box-shadow: 0 18px 40px rgba(16, 38, 58, .10);
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.learn-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--card-tone);
}
.learn-feature-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-tone) 12%, white);
}
.learn-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(16, 38, 58, .16);
  border-color: color-mix(in srgb, var(--card-tone) 34%, var(--border));
}
.learn-feature-card-top,
.learn-feature-card-bottom {
  position: relative;
  z-index: 1;
}
.learn-feature-card-top {
  display: grid;
  gap: 14px;
}
.learn-feature-card .tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--card-tone) 12%, white);
  color: var(--card-tone);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.learn-feature-card h3 {
  max-width: 12ch;
  margin: 0;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.learn-feature-card p {
  max-width: 29ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.learn-feature-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--card-tone) 14%, var(--border));
}
.learn-feature-card-bottom span {
  color: var(--card-tone);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.learn-feature-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-tone) 14%, white);
  color: var(--card-tone);
  font-size: 18px;
  font-weight: 800;
}

.use-case-card,
.professional-panel { padding: 22px; }
.use-case-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 21px;
}
.use-case-card p,
.professional-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.66;
}
.professional-panel { padding: 26px; }
.professional-panel h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 28px;
  line-height: 1.18;
}
.professional-panel p {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.72;
}

.final-address-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 34px;
  background:
    radial-gradient(circle at bottom right, rgba(217, 122, 32, .14), transparent 26%),
    linear-gradient(180deg, #ffffff, #fbfcfe);
  box-shadow: 0 16px 36px rgba(16, 38, 58, .08);
}
.final-address-panel h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 30px;
}
.final-address-panel p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}
.final-address-panel .btn {
  min-width: 180px;
}

.state-card {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.state-card strong {
  color: var(--navy);
}
.state-card.error {
  background: var(--red-bg);
  border-color: color-mix(in srgb, var(--red) 28%, white);
  color: #7a271f;
}
.state-card.warning {
  background: var(--yellow-bg);
  border-color: color-mix(in srgb, var(--yellow) 24%, white);
  color: #684b00;
}
.state-card.success {
  background: var(--green-bg);
  border-color: color-mix(in srgb, var(--green) 22%, white);
  color: #235d37;
}
.loading-state {
  position: relative;
  overflow: hidden;
  min-height: 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #edf3f6 0%, #f8fbfd 42%, #edf3f6 84%);
  background-size: 220% 100%;
  animation: hc-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes hc-loading-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (max-width: 720px) {
  .public-section { padding: 54px 16px; }
  .landing-panel-grid,
  .landing-faq-grid,
  .principle-grid,
  .partner-feature-grid,
  .market-model,
  .process-ribbon,
  .partner-hero-panel,
  .contact-shell {
    grid-template-columns: 1fr;
  }
  .process-step:not(:last-child)::after { display: none; }
  .founder-note { grid-template-columns: 1fr; padding: 22px; }
  .partner-metric-grid { grid-template-columns: 1fr; }
  .landing-search-row {
    flex-direction: column;
  }
  .hazard-overview-grid,
  .learn-feature-grid,
  .use-case-grid,
  .professional-grid,
  .report-preview-shell,
  .source-showcase,
  .final-address-panel {
    grid-template-columns: 1fr;
  }
  .source-grid { grid-template-columns: 1fr; }
  .final-address-panel { justify-content: stretch; }
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card,
  .principle-card,
  .partner-feature-card,
  .contact-category-card {
    padding: 18px;
  }
  .hazard-overview-card,
  .learn-feature-card,
  .use-case-card,
  .professional-panel,
  .report-preview-shell,
  .source-showcase,
  .final-address-panel {
    padding: 18px;
  }
  .learn-feature-card { min-height: 236px; }
  .learn-feature-card h3 {
    max-width: 100%;
    font-size: 24px;
  }
}

/* =====================================================================
   Analytics / privacy / legal-page additions (Day-1 analytics build).
   Purely additive — new classes only, nothing above this point changed.
   The "Do Not Sell" control renders as a plain-text-styled button so it
   sits naturally alongside the existing .legal-links anchor tags in the
   real site footer (.site-footer-legal, defined above).
   ===================================================================== */

.site-footer-legal .legal-links button.link-btn {
  background: none; border: none; padding: 0; margin-right: 14px;
  color: var(--muted-light); font-size: 11.5px; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.site-footer-legal .legal-links button.link-btn:hover { color: var(--accent-bright); text-decoration: underline; }

/* Draft-status banner + doc metadata line, used on /privacy.html and
   /terms.html above the actual policy/terms text. */
.draft-banner {
  background: #fdf3dc; border: 1px solid #f0dfa8; border-radius: var(--radius-sm);
  padding: 12px 15px; font-size: 13px; line-height: 1.55; color: #6b4e00; margin-bottom: 16px;
}
.draft-banner strong { color: #4d3800; }
.doc-meta { font-size: 12px; color: var(--muted-light); margin-bottom: 18px; }

/* Analytics dashboard stat tiles / bar panels (/analytics.html) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-tile { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.stat-tile .stat-value { font-size: 26px; font-weight: 800; color: var(--navy); }
.stat-tile .stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 13.5px; margin: 0 0 10px; color: var(--navy); text-transform: uppercase; letter-spacing: .3px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 7px; }
.bar-row .bar-label { width: 70px; flex-shrink: 0; color: var(--ink); font-weight: 600; }
.bar-row .bar-track { flex: 1; background: var(--bg); border-radius: 6px; height: 10px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: var(--accent); border-radius: 6px; }
.bar-row .bar-count { width: 34px; text-align: right; color: var(--muted); flex-shrink: 0; }
.privacy-note { font-size: 12px; color: var(--muted-light); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-top: 6px; line-height: 1.55; }

/* =====================================================================
   Blog redesign — index + article pages (Aug 2026).
   New classes only (.blog-*, .article-*, .cat-pill, .toc-*, .featured-*),
   layered on top of the existing tokens/.prose/.cluster-nav/.cta/
   .breadcrumb rules above so hazard landing pages and how-it-works, which
   share those classes, keep working unchanged. Category colors below are
   the same status hues already used for badges elsewhere in the app —
   no new palette introduced.
   ===================================================================== */

:root {
  --cat-basics: var(--accent);
  --cat-market: var(--navy);
  --cat-insurability: var(--green);
  --cat-buying: var(--yellow);
  --cat-flood: var(--accent-bright);
  --cat-wildfire: var(--red);
  --cat-hurricane: var(--orange);
  --cat-earthquake: var(--navy-light);
  --cat-about: var(--gray);
}

/* ---------- Category pill (icon + label), reused on cards + article hero */

.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  padding: 5px 11px 5px 8px; border-radius: 20px;
  background: color-mix(in srgb, var(--cat-color) 12%, white);
  color: var(--cat-color);
}
.cat-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.cat-pill.lg { font-size: 12px; padding: 7px 14px 7px 10px; }
.cat-pill.lg svg { width: 15px; height: 15px; }
.cat-pill.on-dark { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Blog index hero ---------- */

.blog-hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.10) 0, transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(21, 140, 140, .28) 0, transparent 34%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 56%, #1d4f67 100%);
  color: #fff;
  text-align: center;
  padding: clamp(58px, 8vw, 86px) 20px clamp(44px, 6vw, 58px);
  position: relative;
  overflow: hidden;
}
.blog-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(circle at 12% 25%, rgba(255,255,255,.08) 0, transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,.07) 0, transparent 45%);
  pointer-events: none;
}
.blog-hero > * { position: relative; z-index: 1; }
.blog-hero .eyebrow { color: #bfe6e6; }
.blog-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.08;
  max-width: 920px;
  margin: 0 auto 16px;
  letter-spacing: -.04em;
}
.blog-hero p.lede {
  max-width: 760px;
  margin: 0 auto 28px;
  color: rgba(255,255,255,.88);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.68;
}

.blog-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.blog-hero-stats div {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
}
.blog-hero-stats strong {
  margin-right: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
}

.blog-search { max-width: 620px; margin: 0 auto; position: relative; }
.blog-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted-light); }
.blog-search input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 15px 18px 15px 46px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: var(--shadow-lg);
  background: #fff;
  color: var(--ink);
}
.blog-search input::placeholder { color: var(--muted-light); }
.blog-search input:focus { outline: 3px solid rgba(255,255,255,.4); }

/* ---------- Filter bar (colored dots keyed to category) ---------- */

.filter-bar { align-items: center; }
.chip-filter .dot { background: var(--dot-color, var(--accent)); }

/* ---------- Featured post ---------- */

.featured-post {
  display: block; text-decoration: none; color: inherit;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; margin: 28px 0 34px;
  display: grid; grid-template-columns: 1fr; transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.featured-post:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 28%, var(--border));
}
.featured-post-panel {
  background:
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.12) 0, transparent 42%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--cat-color, var(--accent)) 150%);
  color: #fff; padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.featured-post-panel .featured-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.75); }
.featured-post-panel h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.12; margin: 0; color: #fff; letter-spacing: -.03em; }
.featured-post-body { padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.featured-post-body p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--muted); }
.featured-post-body .featured-meta { font-size: 12px; color: var(--muted-light); display: flex; gap: 14px; flex-wrap: wrap; }
.featured-post-body .featured-cta { font-size: 13.5px; font-weight: 800; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em; }
.featured-post-body .featured-cta svg { width: 15px; height: 15px; transition: transform .15s ease; }
.featured-post:hover .featured-cta svg { transform: translateX(3px); }

@media (min-width: 760px) {
  .featured-post { grid-template-columns: 1.05fr 1.2fr; }
}

/* ---------- Post grid + cards (index) ---------- */

.post-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  min-height: 288px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,1)),
    linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--accent)) 12%, white), #fff);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 16%, var(--border));
  border-radius: 22px;
  padding: 0; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
  position: relative;
}
.post-card::before { content: ""; display: block; height: 8px; background: var(--cat-color, var(--accent)); }
.post-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 10%, white);
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 40%, var(--border)); }
.post-card-body { position: relative; z-index: 1; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card .cat-pill { align-self: flex-start; }
.post-card h3 { margin: 0; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.12; letter-spacing: -.025em; color: var(--navy); }
.post-card p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.62; flex: 1; }
.post-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 14%, var(--border)); }
.post-card .card-meta { font-size: 12px; color: var(--muted-light); }
.post-card .card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 12%, white);
  color: var(--cat-color, var(--accent));
  transition: transform .15s ease;
  flex-shrink: 0;
}
.post-card .card-arrow svg { width: 16px; height: 16px; }
.post-card:hover .card-arrow { transform: translateX(3px); }

/* ---------- Article hero (post pages) ---------- */

.article-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.09) 0, transparent 34%),
    radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--cat-color, var(--accent)) 28%, transparent) 0, transparent 38%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, color-mix(in srgb, var(--cat-color, var(--accent)) 34%, var(--navy)) 150%);
  color: #fff; padding: clamp(42px, 7vw, 76px) 20px clamp(38px, 6vw, 58px); position: relative; overflow: hidden;
}
.article-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.08) 0, transparent 40%);
  pointer-events: none;
}
.article-hero > * { position: relative; z-index: 1; max-width: 860px; margin-left: auto; margin-right: auto; }
.article-hero > .article-hero-inner { width: min(var(--site-max), 100%); max-width: var(--site-max); }
.article-hero .article-hero-inner > * { max-width: 760px; margin-left: 0; margin-right: 0; }
.article-hero .article-breadcrumb { font-size: 12px; color: rgba(255,255,255,.65); margin: 0 0 16px; }
.article-hero .article-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.article-hero .article-breadcrumb a:hover { color: #fff; }
.article-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; margin: 16px 0 16px; letter-spacing: -.04em; }
.article-hero p.lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.68; color: rgba(255,255,255,.86); margin: 0 0 20px; }
.article-hero .article-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: rgba(255,255,255,.74); }
.article-hero .article-meta span { display: inline-flex; align-items: center; gap: 5px; }
.article-hero .article-meta svg { width: 13px; height: 13px; }

/* State themes use limited regional accents while retaining the shared site
   hierarchy. Each route provides these five custom properties from a registry. */
.state-theme .article-hero {
  background:
    radial-gradient(circle at 78% 35%, color-mix(in srgb, var(--state-accent) 25%, transparent) 0, transparent 22%),
    radial-gradient(circle at 93% 88%, color-mix(in srgb, var(--state-accent) 16%, transparent) 0, transparent 30%),
    linear-gradient(145deg, var(--state-deep), var(--state-ink) 68%, color-mix(in srgb, var(--state-ink) 78%, #fff));
}
.state-hero-flag { position: absolute; z-index: 1; right: clamp(18px, 8vw, 132px); bottom: clamp(16px, 3vw, 34px); width: min(20vw, 190px); min-width: 130px; margin: 0; overflow: hidden; aspect-ratio: 1.5; border: 1px solid color-mix(in srgb, var(--state-accent) 62%, transparent); border-radius: 12px; box-shadow: 0 22px 46px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12); opacity: .92; }
.state-hero-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.state-theme .state-hub-shell { background: linear-gradient(180deg, var(--state-wash), var(--bg) 320px); }
.state-signature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; max-width: 980px; margin: -66px 0 42px; padding: 28px 30px; position: relative; z-index: 2; color: #fff; border: 1px solid color-mix(in srgb, var(--state-accent) 46%, transparent); border-radius: 22px; background: linear-gradient(125deg, var(--state-deep), var(--state-ink)); box-shadow: 0 24px 56px color-mix(in srgb, var(--state-deep) 22%, transparent); }
.state-signature-kicker { margin: 0 0 10px; color: var(--state-accent); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.state-signature h2 { max-width: 650px; margin: 0 0 10px; color: #fff; font-size: clamp(23px, 3vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
.state-signature p:not(.state-signature-kicker) { max-width: 680px; margin: 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.62; }
.state-signature ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.state-signature li { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--state-accent) 60%, transparent); border-radius: 999px; color: var(--state-accent-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.state-bird-note { width: 176px; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--state-accent) 60%, transparent); border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.state-bird-note img { display: block; width: 100%; height: 126px; object-fit: cover; object-position: center; filter: saturate(.86) contrast(.98); }
.state-bird-note figcaption { display: grid; gap: 2px; padding: 10px 11px 11px; }
.state-bird-note span { color: var(--state-accent); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.state-bird-note strong { color: #fff; font-family: var(--font-display); font-size: 14px; }
.state-bird-note a { margin-top: 3px; color: rgba(255,255,255,.66); font-size: 10px; text-decoration-color: rgba(255,255,255,.3); }
.state-bird-note a:hover { color: #fff; }
.state-signature--bird-left .state-bird-note { order: -1; }
.state-signature--bird-bottom { grid-template-columns: 1fr; align-items: start; }
.state-signature--bird-bottom .state-bird-note { display: grid; grid-template-columns: 132px 1fr; width: min(100%, 520px); }
.state-signature--bird-bottom .state-bird-note img { height: 100%; min-height: 108px; }
.state-theme .state-guide-section { border-color: color-mix(in srgb, var(--state-ink) 18%, var(--border)); }
.state-theme .public-kicker,
.state-theme .state-guide-kicker { color: color-mix(in srgb, var(--state-ink) 74%, #000); }
.state-theme .state-guide-card { border-color: color-mix(in srgb, var(--state-ink) 18%, var(--border)); background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--state-wash) 72%, #fff)); }
.state-theme .state-guide-card::before { content: ""; width: 38px; height: 3px; margin: -24px 0 20px; border-radius: 999px; background: var(--state-accent); }
.state-theme .state-guide-card:hover { border-color: color-mix(in srgb, var(--state-accent) 60%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.state-theme .state-guide-card h2 a:hover,
.state-theme .text-link:hover { color: var(--state-ink); }

@media (max-width: 760px) {
  .state-hero-flag { right: 16px; bottom: 18px; min-width: 104px; border-radius: 14px; opacity: .74; }
  .state-signature { grid-template-columns: 1fr; gap: 20px; margin-top: -38px; padding: 24px; }
  .state-signature--bird-left .state-bird-note { order: 0; }
  .state-bird-note { width: min(100%, 240px); }
  .state-signature--bird-bottom .state-bird-note { grid-template-columns: 104px 1fr; width: min(100%, 360px); }
}

/* ---------- Reading progress bar ---------- */

/* Fixed at the very top edge, above the sticky nav (z-index 40) — a thin
   accent line overlaid on the nav's own top edge, YouTube/Medium-style, so
   it never has to match the nav's height across breakpoints. */
.reading-progress-track { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 3px; background: transparent; }
.reading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-bright), var(--cat-color, var(--accent))); transition: width .1s linear; }

/* ---------- Article shell: prose + sticky TOC/promo rail ---------- */

.article-shell { max-width: var(--site-max); margin: 0 auto; padding: 38px 24px 78px; display: block; }
.article-shell .article-main { max-width: 760px; margin: 0 auto; }

@media (min-width: 980px) {
  .article-shell { display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: 54px; align-items: start; }
  .article-shell .article-main { max-width: none; margin: 0; }
  .article-shell .article-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
}
.article-shell .article-aside { display: none; }
@media (min-width: 980px) { .article-shell .article-aside { display: flex; } }

.toc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.toc-card h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  display: block; font-size: 13px; line-height: 1.4; color: var(--muted); text-decoration: none;
  padding: 6px 0 6px 12px; border-left: 2px solid var(--border); transition: color .15s ease, border-color .15s ease;
}
.toc-list a:hover { color: var(--accent); }
.toc-list a.active { color: var(--cat-color, var(--accent)); border-left-color: var(--cat-color, var(--accent)); font-weight: 600; }

.promo-card {
  background:
    radial-gradient(circle at bottom right, rgba(217,122,32,.25), transparent 42%),
    linear-gradient(150deg, var(--navy-deep), var(--navy));
  border-radius: var(--radius);
  padding: 20px;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.promo-card h4 { font-family: var(--font-display); font-size: 18px; line-height: 1.2; margin: 0 0 8px; color: #fff; }
.promo-card p { font-size: 13.5px; color: rgba(255,255,255,.82); margin: 0 0 14px; line-height: 1.55; }
.promo-card .btn { width: 100%; }

.toc-mobile { margin: 0 0 22px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.toc-mobile summary { padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::before { content: "▸"; font-size: 10px; color: var(--cat-color, var(--accent)); transition: transform .15s ease; }
.toc-mobile[open] summary::before { transform: rotate(90deg); }
.toc-mobile .toc-list { padding: 2px 16px 14px; }
@media (min-width: 980px) { .toc-mobile { display: none; } }

/* Keep article openings calm and readable; no decorative drop caps. */
.prose > p:first-of-type::first-letter {
  float: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* ---------- Cluster-nav icon treatment (Related reading / Sources) ---------- */

.cluster-nav h4 { display: flex; align-items: center; gap: 7px; }
.cluster-nav h4 svg { width: 14px; height: 14px; color: var(--cat-color, var(--accent)); }
.cluster-nav.sources li { font-size: 13px; color: var(--muted); }
.cluster-nav.sources a { color: var(--muted); font-weight: 500; }
.cluster-nav.sources a:hover { color: var(--accent); }

/* ---------- Article author box + CTA polish ---------- */

.article-main .cta {
  background:
    radial-gradient(circle at bottom right, rgba(217,122,32,.12), transparent 30%),
    linear-gradient(135deg, #fff, #fbfcfe);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  text-align: center;
  margin: 34px 0;
  box-shadow: var(--shadow-sm);
}
.article-main .cta p { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--navy); font-family: var(--font-display); letter-spacing: -.02em; }

/* ---------- State guide directory and hubs ---------- */

.state-directory-shell,
.state-hub-shell {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 38px 24px 78px;
}
.state-directory-intro,
.state-hub-intro {
  max-width: 760px;
  margin: 0 0 38px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}
.state-hub-intro .event-freshness { margin-bottom: 22px; }
.state-guide-section { padding-top: 34px; border-top: 1px solid var(--border); }
.state-guide-section-header {
  max-width: 720px;
  margin-bottom: 22px;
}
.state-guide-section-header h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.03em;
}
.state-guide-section-header p:not(.public-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.state-directory-grid,
.state-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.state-directory-card,
.state-guide-card {
  display: flex;
  min-height: 262px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: var(--shadow-sm);
}
.state-directory-card:hover,
.state-guide-card:hover {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--border));
  box-shadow: var(--shadow-md);
}
.state-directory-card.is-coming-soon {
  border-style: dashed;
  background: #f8fafc;
  box-shadow: none;
}
.state-directory-card.is-coming-soon:hover {
  border-color: var(--border);
  box-shadow: none;
}
.state-status {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e9eef3;
  color: #506579;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.state-directory-status-note {
  margin: 14px 0 0;
  color: var(--muted);
}
.state-directory-card.is-coming-soon .text-link { color: #62798f; }
.state-directory-code,
.state-guide-kicker {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.state-directory-card h2,
.state-guide-card h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 23px;
  line-height: 1.16;
}
.state-directory-card h2 a,
.state-guide-card h2 a {
  color: inherit;
  text-decoration: none;
}
.state-directory-card h2 a:hover,
.state-guide-card h2 a:hover { color: var(--teal); }
.state-directory-card p:not(.state-directory-code):not(.state-status),
.state-guide-card p:not(.state-guide-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.text-link {
  display: inline-flex;
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--accent-bright);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.text-link:hover { color: var(--teal); }

@media (max-width: 900px) {
  .state-directory-grid,
  .state-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .state-directory-shell,
  .state-hub-shell { padding: 28px 16px 56px; }
  .state-directory-grid,
  .state-guide-grid { grid-template-columns: 1fr; }
  .state-directory-card,
  .state-guide-card { min-height: 0; }
}

@media (max-width: 640px) {
  .blog-hero { padding: 40px 16px 30px; }
  .blog-hero h1 { font-size: 34px; }
  .blog-hero-stats div { width: 100%; max-width: 280px; }
  .article-hero { padding: 30px 16px 26px; }
  .article-hero h1 { font-size: 31px; }
  .featured-post-panel h2 { font-size: 21px; }
  .post-card { min-height: 0; }
  .post-card h3 { font-size: 22px; }
}


/* Keyboard focus and reduced-motion support across public pages. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}