/* RooferWatch - restrained, records-first homepage.
   White background, one accent, no photos, no gradients. */

:root {
  --bg:           #ffffff;
  --bg-soft:      #f7f8fa;
  --bg-tint:      #f5f8fd;
  --bg-tint-cool: #f4f6fa;
  --ink:          #14181f;
  --ink-soft:     #3f4654;
  --ink-mute:     #6b7280;
  --ink-faint:    #9aa1ad;
  --line:         #e6e8ec;
  --line-strong:  #d4d7dd;
  --accent:       #1351b8;
  --accent-ink:   #0e3d8a;
  --accent-soft:  #eef3fc;
  --accent-soft-2:#dde8fa;
  --ok:           #1f8a4e;
  --max:          1420px;
  --radius:       8px;
  --radius-lg:    14px;
  --pad-x:        28px;
  /* Type scale - every text style maps to one of these steps.
     body  = all reading AND UI text: paragraphs, blurbs, values, buttons
     ui    = aliases body (James: one uniform size everywhere) - kept as a
             separate knob only so UI text could be stepped down later
     meta  = footnotes, hints, expiries
     label = uppercase eyebrow labels, chips, badges */
  --fs-body:      1.0625rem;
  --fs-ui:        var(--fs-body);
  --fs-meta:      0.8125rem;
  --fs-label:     0.75rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Guard against stray off-canvas elements (e.g. the 380px records tooltips,
     anchored to right-edge chips) creating horizontal scroll on mobile.
     `clip` (not `hidden`) avoids establishing a scroll container, so sticky
     positioning keeps working. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a {
  color: var(--accent-ink);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

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

/* Kept in the DOM for screen readers (jumps to #main), but never shown
   visually - even on keyboard focus - so the black box no longer appears
   by the logo. Uses the same clip technique as .visually-hidden. */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Icons (Lucide, inlined) */
.icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  flex: 0 0 auto;
  display: block;
}
.icon-mark   { width: 22px; height: 22px; stroke-width: 2; color: var(--accent); }
.icon-search { width: 20px; height: 20px; color: var(--ink-mute); }
.icon-submit { width: 16px; height: 16px; stroke-width: 2.25; }
.icon-inline { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255, 255, 255, 0.92);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

/* Persistent mobile-only "Compare Quotes" bar; revealed under the nav below. */
.header-mobile-cta { display: none; }

.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.wordmark:hover { text-decoration: none; }
.wordmark-img {
  display: block;
  height: 24px;
  width: auto;
  max-width: 100%;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.9375rem;
}
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }

.site-nav-trigger {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
  line-height: inherit;
}
.site-nav-trigger:hover { color: var(--ink); }
.site-nav-trigger[aria-expanded="true"] { color: var(--accent); }

/* Search - icon-only trigger on desktop; the label only shows in the
   stacked mobile menu (see the max-width: 760px block below). */
.site-nav-trigger--search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-nav-search-icon { width: 19px; height: 19px; }
.site-nav-search-label { display: none; }

/* Resources - click-toggle dropdown anchored to its trigger */
.site-nav-dropdown { position: relative; display: inline-flex; }
#resources-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-nav-caret {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
#resources-trigger[aria-expanded="true"] .site-nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
  z-index: 50;
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-dropdown-menu a:hover { background: rgba(15, 23, 42, 0.04); color: var(--ink); }

/* Primary call-to-action in the nav - the quote-request entry point. */
.site-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  background: linear-gradient(180deg, #1a5ec9 0%, var(--accent) 55%, var(--accent-ink) 100%);
  color: #fff !important;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.site-nav-cta:hover {
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.site-nav-cta:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
.site-nav-cta-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Quote-form submit - same pill/gradient look as the .site-nav-cta nav button,
   sized a touch larger for a primary form action, with its own icon. */
.quote-submit-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, #1a5ec9 0%, var(--accent) 55%, var(--accent-ink) 100%);
  color: #fff;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.quote-submit-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.quote-submit-cta:active { transform: translateY(0); filter: brightness(0.98); }
.quote-submit-cta-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Mobile hamburger - hidden on desktop, revealed below the nav breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* State search panel - collapsible row beneath the header */
.state-search-panel {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 14px 0;
}
.state-search-select { width: 100%; }

/* Select2 overrides to match the site's minimal aesthetic */
.select2-container--default .select2-selection--single {
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  background: var(--bg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--line-strong);
  box-shadow: none;
  outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  line-height: 1.4;
  padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ink-mute);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 12px;
}

.select2-dropdown {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9375rem;
  outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(19, 81, 184, 0.18);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--accent);
  color: #fff;
}
.select2-container--default .select2-results__option {
  padding: 8px 12px;
  font-size: 0.9375rem;
}

/* Hero */
.hero {
  padding: clamp(55px, 11vw, 70px) 0 clamp(20px, 5vw, 0px);
  background: var(--bg-tint);
}
.hero-inner {
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 20px;
}
.hero-icon .icon { width: 28px; height: 28px; }
.hero-title {
  font-size: clamp(1.875rem, 4.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
}
.hero-sub {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* Search */
.search {
  margin: 28px auto 0;
  max-width: 640px;
}
/* Same search shell, dropped into the header panel - no hero top margin, and
   full container width (not capped at the hero's 640px). */
.search--header { margin: 0; max-width: none; width: 100%; }
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  border-radius: 32px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.search-field:hover { border-color: #bfc4cc; }
.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(19, 81, 184, 0.16);
}

.search-icon { display: inline-flex; }

.search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  padding: 14px 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.search input[type="search"]::placeholder { color: var(--ink-mute); }
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 26px;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.search-submit:hover { background: var(--accent-ink); }
.search-submit:active { transform: translateY(1px); }
.search-submit:focus-visible { outline-offset: 3px; }

.search-help {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* --- Search autocomplete dropdown ---------------------------------------
   Panel is appended inside .search-field (the rounded pill) and positioned
   beneath it. Built client-side from /api/suggest (see script.js). */
.search-field { position: relative; }

.ac-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(20, 24, 31, 0.16);
  padding: 6px;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.ac-group + .ac-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

.ac-group-head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 8px 12px 4px;
}

.ac-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.ac-item:hover,
.ac-item.is-active { background: var(--surface, #f3f5f8); }

.ac-thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #f3f5f8);
  border: 1px solid var(--line);
}
.ac-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ac-thumb--icon { color: var(--ink-mute); }
.ac-thumb--icon svg { width: 20px; height: 20px; }
.ac-thumb--city, .ac-thumb--state { color: var(--accent); }

.ac-text { display: flex; flex-direction: column; min-width: 0; }
.ac-label {
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-sub {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-item--all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  color: var(--accent);
  font-weight: 500;
}
.ac-item--all .ac-thumb { background: transparent; border: 0; color: var(--accent); }

.ac-empty {
  padding: 16px 12px;
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* "Browse by city" live filter on state pages. Reuses the .search-field shell
   but left-aligned and constrained, sitting above the city grid rather than
   centered in the hero. Filters the city links client-side (see script.js). */
.city-filter {
  margin: 0 0 18px;
  width: 100%;
  max-width: none;
}
/* Smaller and less rounded than the homepage hero search. */
.city-filter .search-field {
  border-radius: 10px;
  padding: 2px 6px 2px 14px;
}
.city-filter input[type="search"] {
  font-size: 0.9375rem;
  padding: 9px 4px;
}
.city-filter .search-icon .icon {
  width: 18px;
  height: 18px;
}
.city-filter-status {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.city-filter-empty { margin-top: 4px; }

/* Live table filter (under the state/county companies table title).
   Reuses the .search-field shell but left-aligned, tighter, and full-width
   within the section rather than the centered hero box. Filters table rows
   client-side as you type (see script.js) - no submit, no reload. */
.table-filter {
  margin: 0 0 18px;
  max-width: 100%;
}
.search-field--compact {
  border-width: 1px;
  border-radius: 12px;
  padding: 4px 4px 4px 14px;
  gap: 8px;
}
.search-field--compact input[type="search"] {
  font-size: 0.9375rem;
  padding: 9px 2px;
}
/* The filter input fills the field shell - no box/border of its own; the
   rounded .search-field wrapper provides the visible frame. */
.table-filter-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: 9px 2px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.table-filter-input::placeholder { color: var(--ink-mute); }
.table-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field--compact .search-submit {
  padding: 9px 14px;
  border-radius: 9px;
}
.table-filter-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--ink-mute);
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color 120ms ease, background-color 120ms ease;
}
.table-filter-clear[hidden] { display: none; }
.table-filter-clear:hover {
  color: var(--ink);
  background: var(--line, rgba(20, 24, 31, 0.06));
}
.table-filter-clear .icon { width: 16px; height: 16px; }
.table-filter-status {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* Rows the live filter hides, plus its injected "no matches" row. */
.data-table tr.is-filtered-out { display: none; }

/* Filter bar (Service Area / Site Age / Credentials / Rating), rendered below
   the search and above the table. Service Area + Credentials are Select2
   multi-selects whose options/tags are the SAME badges the table shows; Site
   Age + Rating are min/max noUiSlider ranges revealed in a dropdown. script.js
   narrows the table(s) live. */
.companies-filters {
  margin: 14px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.companies-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.companies-filters-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.companies-filters-title .icon { width: 16px; height: 16px; }

/* Reset filters - pushed to the far end of the bar, shown only when a filter is
   set (script.js toggles [hidden]). Because it's only ever visible while filters
   are active, its resting state is the accent (blue) treatment. */
.companies-filters-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.companies-filters-reset:hover { border-color: var(--accent-ink); background: var(--accent-soft-2); }
.companies-filters-reset[hidden] { display: none; }
.companies-filters-reset .icon { width: 14px; height: 14px; }

.companies-filters-status {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.companies-filters-status[hidden] { display: none; }

/* Shared badge used in the Select2 options/tags - mirrors the table badges
   (.area-pill / .cert-badge): 2px 8px pill, 4px radius, 0.75rem. */
.filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.filter-badge-text { line-height: 1; }
.filter-badge-img { display: block; height: 18px; width: auto; }
img.filter-badge-img { max-width: 18px; }
/* Service Area badge - colored square glyph, identical to .area-pill. */
.filter-badge--area .filter-badge-icon {
  flex: none; width: 18px; height: 18px; padding: 3px;
  border-radius: 4px; color: #fff; stroke-width: 2.5;
}
.filter-badge--local { background: rgba(47, 122, 79, 0.12); color: #1f6a40; }
.filter-badge--local .filter-badge-icon { background: #2f7a4f; }
.filter-badge--multi { background: var(--accent-soft); color: var(--accent-ink); }
.filter-badge--multi .filter-badge-icon { background: var(--accent-ink); }
/* Credential badge - accent chip with the provider logo (or a glyph). */
.filter-badge--cred { background: var(--accent-soft); color: var(--accent-ink); }
.filter-badge--cred .filter-badge-icon { flex: none; width: 16px; height: 16px; }

/* Select2 facet controls - sized and chromed to match the range toggles
   (.filter-range-toggle): 38px tall, same border/radius, a chevron caret on the
   right, and the facet name shown bold when empty. */
/* Each facet keeps its intrinsic width - don't let the flex row squish them
   down to the label (which clipped "Service Area" to "Service" and dragged the
   dropdown to the same sliver width). */
.filter-facet { flex: 0 0 auto; }
/* IMPORTANT: scope to the wrapper div we render (.filter-facet--select), NOT a
   Select2 container class. Select2 4.1's containerCssClass is unreliable, so the
   class never lands on the control and every rule keyed off it dies. The wrapper
   always exists and holds the inserted .select2-container, and chaining through
   .select2-container also out-specifies Select2's own defaults. */

/* width:auto !important beats the inline px width Select2 writes from
   width:'resolve' (which resolves to the hidden <select>'s ~0 width). */
.filter-facet--select .select2-container { width: auto !important; min-width: 10rem; }
.filter-facet--select .select2-container .select2-selection--multiple {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 2px 30px 2px 9px;       /* room for the caret on the right */
  cursor: pointer;                 /* read as a button, not a text field */
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.filter-facet--select .select2-container .select2-selection--multiple:hover { border-color: var(--accent-ink); }
.filter-facet--select .select2-container--focus .select2-selection--multiple,
.filter-facet--select .select2-container--open .select2-selection--multiple {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* When something is picked, tint the control like an active range toggle. */
.filter-facet--select .select2-container.has-selections .select2-selection--multiple {
  border-color: var(--accent);
  background: var(--accent-soft);
}
/* Chevron caret, mirroring .filter-caret on the range toggles. */
.filter-facet--select .select2-container .select2-selection--multiple::after {
  content: "";
  position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  transition: transform 150ms ease;
}
.filter-facet--select .select2-container--open .select2-selection--multiple::after {
  transform: translateY(-35%) rotate(225deg);
}
/* The selections list: wrap badges, never let it balloon the control height. */
.filter-facet--select .select2-container .select2-selection__rendered {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0; padding: 0; line-height: normal; list-style: none;
}
/* Select2 4.1 renders the multi-select placeholder as the inline search field's
   OWN placeholder (a <textarea>) - that field is what made the empty control
   read like a text box. Neutralize it: no blink caret, pointer cursor, and show
   the facet name bold like the range toggles. */
.filter-facet--select .select2-container .select2-search--inline { margin: 0; }
.filter-facet--select .select2-container .select2-search__field {
  margin: 0; padding: 0;
  min-height: 24px; height: 24px; line-height: 24px;
  font-size: 0.8125rem; color: var(--ink);
  caret-color: transparent; cursor: pointer;
  resize: none; overflow: hidden; border: 0;
}
.filter-facet--select .select2-container .select2-search__field::placeholder {
  color: var(--ink-soft); font-weight: 600; opacity: 1;
}
/* Don't render the individual tokens in the trigger - with several picks they
   get ungodly long. Hide them (and their × remove button); script.js injects a
   compact "N selected" summary instead. Items are removed by reopening the
   dropdown and unchecking, or via Reset filters. */
.filter-facet--select .select2-container .select2-selection__choice { display: none; }
.filter-sel-count {
  font-weight: 600; font-size: 0.8125rem; color: var(--accent-ink); line-height: 1;
}

/* Select2 dropdown - rich rows with a leading checkbox. Force it wider than the
   trigger so the badges are fully visible; width:auto + min-width beats the
   inline px width Select2 copies from the (narrow) control, and overflow-x is
   hidden so a stray pixel never spawns a horizontal scrollbar. */
.select2-dropdown.filter-dropdown {
  width: auto !important;
  min-width: 15rem;
  border-color: var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20, 24, 31, 0.12);
  overflow: hidden;
}
/* Raise Select2's default 200px cap so the whole option list shows without an
   inner scrollbar - Credentials has 7 brands (GAF/OC/CT/Malarkey/IKO/NRCA/EPA)
   and overflowed at 200px. 24rem fits ~10 rows with headroom. The selector must
   out-specify Select2's own `.select2-container--default .select2-results >
   .select2-results__options` (0,3,0) rule - hence the .select2-dropdown +
   direct-child match, giving (0,4,0). */
.select2-dropdown.filter-dropdown .select2-results > .select2-results__options {
  overflow-x: hidden;
  max-height: 24rem;
}
.filter-dropdown .select2-results__option { display: flex; align-items: center; padding: 8px 11px; white-space: nowrap; }
.filter-opt { display: inline-flex; align-items: center; gap: 9px; }
.filter-opt-check {
  flex: none; position: relative;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--line-strong); background: var(--bg);
}
.filter-dropdown .select2-results__option--highlighted { background: var(--bg-soft); color: inherit; }
.filter-dropdown .select2-results__option[aria-selected=true],
.filter-dropdown .select2-results__option--selected { background: var(--accent-soft); }
.filter-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted,
.filter-dropdown .select2-results__option--selected.select2-results__option--highlighted { background: var(--accent-soft-2); }
.filter-dropdown .select2-results__option[aria-selected=true] .filter-opt-check,
.filter-dropdown .select2-results__option--selected .filter-opt-check {
  background: var(--accent); border-color: var(--accent);
}
.filter-dropdown .select2-results__option[aria-selected=true] .filter-opt-check::after,
.filter-dropdown .select2-results__option--selected .filter-opt-check::after {
  content: ""; position: absolute; left: 50%; top: 48%;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* Range facet (Site Age / Rating) - dropdown button + slider panel */
.filter-facet--range { position: relative; }
.filter-range-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--ink-soft);
  font-size: 0.8125rem; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.filter-range-toggle:hover { border-color: var(--accent-ink); }
.filter-facet--range.is-active .filter-range-toggle {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink);
}
.filter-range-name { font-weight: 600; }
.filter-range-value { color: var(--ink-mute); }
.filter-facet--range.is-active .filter-range-value { color: var(--accent-ink); font-weight: 600; }
.filter-caret { width: 14px; height: 14px; opacity: 0.7; transition: transform 150ms ease; }
.filter-range-toggle[aria-expanded="true"] .filter-caret { transform: rotate(180deg); }
.filter-range-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 248px; padding: 18px 18px 16px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: 0 12px 28px rgba(20, 24, 31, 0.14);
}
.filter-range-panel[hidden] { display: none; }
.filter-range-head {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; font-size: 0.8125rem; font-weight: 600; color: var(--ink);
}
/* Rating star inside the panel head - gold, matching the table's .rating-star. */
.filter-star { color: #e6a800; margin-left: 1px; }
/* noUiSlider theme */
.filter-range-slider { height: 6px; margin: 4px 8px 2px; }
.filter-range-slider.noUi-target { background: var(--line); border: 0; box-shadow: none; border-radius: 999px; }
.filter-range-slider .noUi-connect { background: var(--accent); }
.filter-range-slider .noUi-handle {
  width: 18px; height: 18px; right: -9px; top: -6px;
  border-radius: 50%; border: 2px solid var(--accent); background: #fff;
  box-shadow: 0 1px 3px rgba(20, 24, 31, 0.2); cursor: grab;
}
.filter-range-slider .noUi-handle::before,
.filter-range-slider .noUi-handle::after { display: none; }
.filter-range-slider .noUi-handle:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.filter-range-slider .noUi-handle.noUi-active { cursor: grabbing; }

/* Record-type chips below the search */
.record-chips {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
  cursor: default;
}
.chip:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--bg-soft);
}
.chip-icon { color: var(--accent); }
.chip-icon .icon { width: 14px; height: 14px; }

/* Sections.
   Inter-section gap is delivered by margin-top on the *second* sibling,
   never padding. That way every gap is exactly one value, set in one
   place, and adding/removing a section (e.g. the optional active-alerts
   strip) never changes the spacing of anything else.

   Sections themselves carry NO vertical padding by default - their
   content sits flush with the section's top edge, and the margin above
   handles all separation. Tinted bands (.osha / .sources / .active-alerts)
   and the hero opt back in to internal padding so their colored
   background has breathing room around its content. */
/* Sections - symmetric vertical padding, then alternating background
   color per section so the page reads as a stack of bands. Padding is
   intentionally restrained: county/city pages have empty-state sections
   ("No companies indexed yet") that look stranded in a generously
   padded band. With smaller padding, short and tall sections share a
   consistent rhythm. */
section { padding: clamp(28px, 4vw, 40px) 0; }
.state-hero { padding: clamp(20px, 4vw, 36px) 0; }

/* Alternating band colors. Odd-positioned sections (1st, 3rd, 5th, …)
   get the light blue tint; the hero is position 1 so it picks this up
   naturally (the historical hardcoded `.state-hero { background }` rule
   below still sets the same color - harmless duplication). */
main > section:nth-of-type(odd) { background: var(--bg-tint); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.section-title {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section-link {
  font-size: var(--fs-ui);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.section-link:hover { text-decoration: underline; }
.section-note {
  margin-top: 22px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31, 138, 78, 0.16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31, 138, 78, 0.16); }
  50%      { box-shadow: 0 0 0 5px rgba(31, 138, 78, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-dot { animation: none; }
}

/* Stats */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.stat-grid--6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-grid--8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-grid--9 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .stat-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid--9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .stat-grid--6 { grid-template-columns: 1fr; }
  .stat-grid--8 { grid-template-columns: 1fr; }
  .stat-grid--9 { grid-template-columns: 1fr; }
}
.stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.stat:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(19, 81, 184, 0.06);
}
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
}
.stat-icon .icon { width: 20px; height: 20px; }
.stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat-number {
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.875rem;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* Review Signals Over Time - KPI cards (reuse .stat/.stat-grid) + two charts. */
.review-signals-kpis { margin-bottom: 18px; }
.stat-unit {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 1px;
}
.stat-number--sm { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.review-signals .signal-star {
  display: inline-block;   /* base .icon is display:block, which forced each star onto its own line */
  width: 0.8em;
  height: 0.8em;
  margin: 0 1px;
  vertical-align: -0.06em;
  color: #e6a800;   /* matches the rating star elsewhere on the page */
  fill: #e6a800;    /* CSS fill overrides Lucide's fill="none" → solid gold star */
}
.review-signals .signal-up   { color: var(--ok); }
.review-signals .signal-down { color: #c0392b; }
.review-signals .signal-flat { color: var(--ink-mute); }
.signal-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.signal-chart {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
}
.signal-chart-title {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.signal-chart-canvas { position: relative; height: 200px; }
.signal-foot {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
/* Peer-ranking prose at the foot of the Review Signals section - plain body
   text with the same treatment/spacing as .review-summary-text under the
   review cards in "Reviews and Reputation". */
.signal-rank {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .signal-charts { grid-template-columns: 1fr; }
}

/* What we check */
.checks { background: var(--bg-tint-cool); }
.check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
}
.check {
  display: flex;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
}
.check-icon .icon { width: 18px; height: 18px; }
.check-body { min-width: 0; }
.check-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.check-desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Methodology */
.method-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.method-step {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.method-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.method-step-body { min-width: 0; }
.method-step-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.method-step-desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  background: var(--bg-soft);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wordmark-footer .wordmark-img { height: 22px; }
.footer-statement {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.footer-col a:hover { color: var(--ink); }

.footer-disclaimer {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  line-height: 1.55;
  padding-top: 24px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
}
.footer-meta,
.footer-credit,
.footer-credit a {
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.footer-credit a {
  text-decoration: underline;
}
.footer-credit a:hover { color: var(--ink); }
.footer-heart { color: #e0245e; }

/* ============================================================
   State page (/{state}/)
   ============================================================ */

/* Breadcrumbs - sits in a tinted bar above the page hero */
.breadcrumbs-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--ink-faint);
}
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* State hero - shares the tint with the breadcrumbs bar above so the
   top of the page reads as one continuous block, like the homepage hero.
   Padding is set in the section-rhythm block near the top of this file
   (don't add it back here - it'd override the unified spacing). */
.state-hero { background: var(--bg-tint); }
section.state-hero {
  padding-bottom: 45px;
  border-bottom: 1px solid #e7ebf1;
}

/* Background is now driven by the :nth-of-type alternation near the top
   of this file - don't re-tint .osha here, or it'll break the rhythm
   on pages where OSHA lands on an even position. */
.state-hero-inner {
  /* fills container */
}
.state-title {
  font-size: clamp(2rem, 3.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 14px;
}
/* Hero eyebrow: flag + state name in small caps above the H1, so the flag
   pairs with the state name rather than interrupting the headline. Flags
   are uniform 3:2; the hairline ring keeps light flag fields from bleeding
   into the page. */
.state-eyebrow {
  /* inline-flex so the divider under it only spans the flag + name, not the
     full hero width */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 7px;
}
.state-eyebrow-flag {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.state-eyebrow-name {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.state-eyebrow + .state-title { margin-top: 0; }
.state-lede {
  margin-top: 14px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Inline note in section heads (used by company table count) */
.section-note-inline {
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* State requirements box */
.reqs-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #FFF;
  padding: 34px 33px;
}
.reqs-summary {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.reqs-summary p {
  margin: 0 0 0.85em;
}
.reqs-summary p:last-child {
  margin-bottom: 0;
}
.reqs-source {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.reqs-source a {
  color: var(--accent-ink);
  font-weight: 500;
}

/* Data tables (companies, hail events, future records) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg-soft);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--bg-tint-cool); }
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Left-aligned numeric column (e.g. Site Age) - keeps tabular figures and
   no-wrap, but reads left like the text columns instead of right. */
.data-table .num-left {
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table .table-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-mute);
  font-size: 0.9375rem;
  background: var(--bg-soft);
}
.data-table a { color: var(--accent-ink); font-weight: 500; }
.data-table a:hover { color: var(--accent); }

/* Column-header tooltips. Native title="" was unreliable and got clipped by the
   .table-scroll wrapper, so this is a styled bubble that DROPS DOWN from the
   header (downward = inside the scroll box, never clipped at the top) and shows
   on hover/focus. The label gets a dotted underline + help cursor to advertise
   it. Bubble text resets the header's uppercase/letter-spacing/nowrap. */
.data-table th.has-th-tip .th-cell { position: relative; }
.data-table th.has-th-tip .th-sort,
.data-table th.has-th-tip .th-label {
  cursor: help;
  text-decoration: underline dotted var(--line-strong, #c7ccd3);
  text-underline-offset: 3px;
}
.data-table th.has-th-tip .th-sort:hover,
.data-table th.has-th-tip .th-label:hover { text-decoration-color: var(--accent); }
.th-tip {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: 250px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-align: left;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  pointer-events: none;
}
/* Rightmost columns anchor the bubble to their right edge so it can't spill off
   (and get clipped by) the table's right side. */
.th-tip--right { left: auto; right: 0; }
.data-table th.has-th-tip:hover .th-tip,
.data-table th.has-th-tip:focus-within .th-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sortable column headers (progressive enhancement - added by script.js) */
.data-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.data-table thead th.is-sortable:hover { color: var(--ink); }
.data-table thead th.is-sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  color: var(--ink);
}
.data-table thead th .sort-indicator {
  margin-left: 0.4em;
  font-size: 0.85em;
  opacity: 0.4;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.data-table thead th.is-sortable:hover .sort-indicator { opacity: 0.7; }
.data-table thead th[aria-sort="ascending"] .sort-indicator,
.data-table thead th[aria-sort="descending"] .sort-indicator {
  opacity: 1;
  color: var(--accent);
}

/* Pagination nav under a paginated record table */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination-link,
.pagination-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--accent-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pagination-link:hover,
.pagination-num:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--accent);
}
.pagination-num.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.pagination-link.is-disabled {
  color: var(--ink-mute);
  background: var(--bg-soft);
  cursor: default;
  opacity: 0.6;
}
.pagination-gap {
  padding: 0 4px;
  color: var(--ink-mute);
}

/* Empty-state placeholder for sections with no rows yet */
.empty-state {
  margin: 0;
  padding: 24px 26px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  color: var(--ink-mute);
  font-size: 0.9375rem;
  text-align: center;
}

.data-table-narrow { font-size: 0.9375rem; }
.data-table-narrow thead th,
.data-table-narrow tbody td {
  padding: 12px 16px;
}

/* City grid */
.city-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 14px;
}
.city-grid a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.city-grid a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
  text-decoration: none;
}

/* Search - "jump to a place" cards.
   Shown above the company results when a query also matches a state/city but
   we didn't auto-redirect (ambiguous name, or a company matched too). */
.search-places { padding-top: clamp(16px, 3vw, 24px); }
.place-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.place-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--ink-soft);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.place-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
  box-shadow: 0 1px 0 var(--line);
}
.place-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.place-card-icon .icon { width: 20px; height: 20px; }
.place-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.place-card-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-card-sub {
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.place-card-go {
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--ink-mute);
  transition: transform 120ms ease, color 120ms ease;
}
.place-card:hover .place-card-go {
  color: var(--accent-ink);
  transform: translateX(2px);
}

/* FAQ */
.faq-list {
  display: grid;
  gap: 12px;
}
/* "Computed from our records - as of {date}" stamp on the data-driven city FAQ.
   A small trust/citation cue sitting under the section title. */
.faq-asof {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--ink-mute, #6b7280);
}
/* Emphasised figures inside a computed answer (permit amounts, counts, ages). */
.faq--data .faq-a strong { color: var(--ink, #111827); font-weight: 650; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item:hover { border-color: var(--ink-mute, #c9ccd1); }
.faq-item[open] {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Hide the native disclosure triangle (we draw our own chevron). */
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}
.faq-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  position: relative;
  transition: transform 0.2s ease;
}
/* Chevron drawn from two pseudo-element bars. */
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-mute, #6b7280);
  transition: background 0.15s ease;
}
.faq-icon::before { left: 1px; transform: rotate(45deg); }
.faq-icon::after  { right: 1px; transform: rotate(-45deg); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: var(--accent, #2563eb); }
.faq-a {
  padding: 0 22px 20px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Company table - secondary info under name */
.company-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Container is a flex box at a fixed outer size; inner <img> is given
   max-width/max-height 100% + object-fit so it scales INTO the padded
   content area. Putting padding directly on <img> is unreliable across
   browsers - wrapping it like this is the standard pattern. */
.company-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ink-faint, #e5e5e5);
  flex-shrink: 0;
  vertical-align: middle;
  overflow: hidden;
}
.company-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.company-thumb--empty {
  background: #f6f6f6;
  color: var(--ink-mute, #777);
}
.company-thumb--empty .thumb-icon {
  width: 20px;
  height: 20px;
}
.company-link {
  font-weight: 500;
  color: var(--accent-ink);
  /* Visually cap long names (~25 chars) with an ellipsis while the FULL name
     stays in the HTML text node (SEO-friendly) and on hover via title="".
     ch ≈ one "0" glyph, so 25ch is the standard CSS char-count approximation. */
  display: inline-block;
  max-width: 25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.company-link:hover { color: var(--accent); }
/* In the state/city/county results tables, keep the logo + name on one row:
   a long name ellipsizes (via .company-link above) instead of wrapping below
   the thumbnail. flex-wrap:nowrap pins the row; min-width:0 lets the link
   shrink past its content so the ellipsis can kick in inside a narrow cell. */
.companies-table-results .company-cell { flex-wrap: nowrap; }
.companies-table-results .company-link { min-width: 0; }
/* Paid-member plan badge beside the company name (Verified / Featured). Sits in
   the .company-cell flex row, never shrinks, and stays put when a long name
   ellipsizes next to it. */
.member-badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}
/* Round logo avatar in the table: fill the circular frame edge-to-edge and
   clip the image to a circle (cover), instead of the default letterboxed
   "contain" logo floating on a white disc. */
.companies-table-results .company-thumb { padding: 0; }
.companies-table-results .company-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* The companies table carries a lot of columns (name, city, area, age, certs,
   rating, records, + optional license/OSHA). Trim the generous default cell
   padding so the text columns get their width back instead of wrapping, and
   keep the City column on one line. */
.data-table--companies thead th,
.data-table--companies tbody td { padding-left: 11px; padding-right: 11px; }
.data-table--companies tbody td:nth-child(2) { white-space: nowrap; }

/* "Your Company Here" promo row pinned to the top of every listing table. A
   light-yellow highlight + pointer cursor mark it as a call-to-action; the
   whole row links to /memberships (anchor in the first cell + a delegated
   row-click handler in script.js). */
.company-promo-row {
  cursor: pointer;
  background: #fffdf3;            /* faint warm tint, not a loud yellow */
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.company-promo-row:hover {
  background: #fff8e3;
}
/* JS-injection reveal: the row is inserted with .is-entering (collapsed/faded),
   then the class is dropped on the next frame so it slides + fades into place.
   .is-leaving plays the same in reverse just before it's removed. */
.company-promo-row.is-entering,
.company-promo-row.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
}
@media (prefers-reduced-motion: reduce) {
  .company-promo-row { transition: none; }
}
/* Dismiss button (rides in the final cell). */
.company-promo-row .records-verified-col { white-space: nowrap; }
.promo-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mute, #6b7280);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease;
}
.promo-close:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink, #111);
}
.company-promo-row td {
  border-top: 1px solid #f1ead2;
  border-bottom: 1px solid #f1ead2;
}
/* On-brand placeholder avatar: soft accent disc with a "+" mark. */
.company-promo-row .company-thumb--promo {
  background: var(--accent-soft, #eef3fc);
  border-color: var(--accent-soft-2, #dde8fa);
  color: var(--accent, #1351b8);
}
.company-promo-row .company-thumb--promo .thumb-icon {
  width: 18px;
  height: 18px;
}
.company-promo-row .company-promo-link {
  color: var(--accent-ink, #0e3d8a);
  font-weight: 600;
}
.company-promo-row .company-promo-link:hover { color: var(--accent, #1351b8); }
/* "Get listed" call-to-action: a clean accent pill in the page's own font -
   no uppercase / letter-spacing, so it reads as part of the UI, not pasted in. */
.company-promo-row .promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--accent, #1351b8);
}
.company-promo-row:hover .promo-cta { background: var(--accent-ink, #0e3d8a); }
.company-promo-row .promo-cta-icon {
  width: 13px;
  height: 13px;
}
.company-promo-row .promo-sample { color: var(--ink-mute, #777); }

.company-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label);
  color: var(--ink-mute);
}

/* Company detail hero - logo / title-stack / contact strip across the top. */
.company-hero-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.company-headline {
  flex: 1 1 auto;
  min-width: 0;
}
.company-headline .state-title { margin: 0; }
/* Title + inline "Update Information" button share a row; the button hugs the
   end of the line and drops below the name on narrow screens. */
.company-title-row {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.company-title-row .state-title { flex: 0 1 auto; }
/* "Membership: …" status line directly under the company name. */
.company-membership {
  margin: 6px 0 0;
  font-size: var(--fs-ui);
  color: var(--muted, #5b6066);
}
.company-membership a { color: inherit; text-decoration: underline; }
.company-membership a:hover { color: var(--accent, inherit); }
/* "Not yet claimed" CTA - white button pinned to the right of the title row. */
.company-claim-cta {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: var(--fs-ui);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  /* 10px (not the 8px token): this button is taller than the nav's Compare
     Quotes pill, so it needs a touch more radius to look equally rounded. */
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.company-claim-cta-icon {
  width: 16px;
  height: 16px;
  color: var(--warn, #b8860b);
}
.company-claim-cta:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
/* On mobile the CTA drops to its own full-width line below the company name. */
@media (max-width: 640px) {
  .company-claim-cta {
    flex: 1 0 100%;
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* Public Records Check - at-a-glance status chips on company pages. Each chip is
   a card matching the page's Contact/Credentials cards: var(--radius-lg) corners,
   1px border, soft shadow. The --ok tone uses the site's soft-blue accent palette
   so a cleared check reads positive without clashing. */
.records-check-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.records-chip {
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
}
.records-chip-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.records-chip-icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
/* ok - check cleared: white card + green icon. */
.records-chip--ok {
  background: var(--bg);
  border-color: var(--line);
  color: var(--accent-ink);
}
.records-chip--ok .records-chip-icon .icon { color: var(--ok); }
/* muted - neutral "Okay": light-grey text + grey icon on the white card. */
.records-chip--muted {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink-faint);
}
.records-chip--muted .records-chip-icon .icon { color: var(--ink-faint); }
/* Hover/focus tooltip - a chip carrying explanatory copy (e.g. License). */
.records-chip--tip { position: relative; cursor: help; }
.records-chip-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 380px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  pointer-events: none;
}
.records-chip--tip:hover .records-chip-tip,
.records-chip--tip:focus .records-chip-tip,
.records-chip--tip:focus-within .records-chip-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Keep the tooltip inside the viewport on phones so it never exceeds the
   screen width (works with body's overflow-x: clip to kill horizontal scroll). */
@media (max-width: 640px) {
  .records-chip-tip { max-width: calc(100vw - 24px); }
}
/* Chip as a jump link - icon + label wrap in an anchor that scrolls to the
   chip's full section (Company Info / Contact Info / Credentials / Reviews).
   The anchor fills the chip so the whole pill is clickable; --link must come
   after --tip so pointer beats the tooltip's help cursor. */
.records-chip--link { cursor: pointer; }
.records-chip-link {
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}
/* Offset for the sticky header when a records chip jumps to its section */
#company-info-title,
#company-contact-title,
#company-certs-title,
#company-reviews-title {
  scroll-margin-top: 84px;
}
.records-check-intro {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.records-check-empty { margin: 0; color: var(--ink-soft); }

/* Records Verified bar - the listing-table column rendering of the Public
   Records Check score. Five rounded segments; the first $score fill green
   (var(--ok)), the rest read as empty wells. A small "N/5" count trails the
   bar so the value is legible without counting pips. The wrapper is the
   accessible label (role="img"); --ok-soft tints the filled track lighter than
   the fill itself for a touch of depth. */
:root { --ok-soft: #d8efe2; --records-empty: #e9edf2; }
.records-verified-col { white-space: nowrap; }
.records-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.records-bar-seg {
  width: 11px;
  height: 8px;
  border-radius: 2px;
  background: var(--records-empty);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 31, 0.06);
  transition: background 120ms ease;
}
.records-bar-seg.is-filled {
  background: linear-gradient(180deg, #28a166 0%, var(--ok) 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 95, 55, 0.28),
              0 1px 1px rgba(15, 95, 55, 0.18);
}
.records-bar-count {
  margin-left: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
/* A perfect 5/5 earns a slightly stronger count color to reward the eye. */
.records-bar--5 .records-bar-count { color: var(--ok); }
/* Zero verified: keep the segments visibly empty, mute the count. */
.records-bar--0 .records-bar-count { color: var(--ink-faint); }
/* URL link under the company name - minimal underlined link that picks up
   accent on hover. Keeps the hero light. */
.company-url-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.company-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  text-decoration: none;
}
.company-url span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.company-url:hover { color: var(--accent); }
.company-url:hover span { text-decoration-color: var(--accent); }
.company-url-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-mute); }
.company-url:hover .company-url-icon { color: var(--accent); }

/* Social icons - solid brand-colored tiles with a white glyph, sitting to the
   right of the URL. Each anchor sets its brand color inline as --social-bg
   (lib/social_icons.php); the glyph is white via `color` + currentColor. */
.company-socials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.company-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--social-bg, #4b5563);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.company-social:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}
.company-social-icon {
  /* 16px glyph in a 24px tile => an exact 4px gap on every side. An odd size
     (e.g. 15px) leaves a 4.5px gap that can't sit on a pixel boundary, so the
     browser rounds it unevenly and the glyph looks off-center (worst on wide
     marks like YouTube). Keep tile and glyph both even. */
  width: 16px;
  height: 16px;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .company-social { transition: none; }
  .company-social:hover { transform: none; }
}
/* Hover/focus tooltip - expanded platform label ("Instagram Profile",
   "YouTube Channel", ...). Mirrors the Public Records Check pill tooltip
   (.records-chip-tip): dark bubble floating above the icon. The icon tile is
   the positioning context. */
.company-social { position: relative; }
.company-social-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 380px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.20);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  pointer-events: none;
}
.company-social:hover .company-social-tip,
.company-social:focus .company-social-tip,
.company-social:focus-visible .company-social-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .company-social-tip { transition: opacity 120ms ease, visibility 120ms; transform: translateX(-50%); }
  .company-social:hover .company-social-tip,
  .company-social:focus .company-social-tip,
  .company-social:focus-visible .company-social-tip { transform: translateX(-50%); }
}

/* Contact strip - matches the .stat card pattern from stats_strip so the
   hero reads consistently with the rest of the page (same border token,
   same rounded-square icon badges, same body type). No wrapping card
   chrome; each row is its own small surface that blends with --bg-tint. */
.company-contact {
  /* Full-width row below the logo + headline. flex-wrap on the hero
     container drops it to its own line. */
  flex: 1 1 100%;
}
.company-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Column count is set inline per page (--contact-cols): phone + address only
     → 2 cards at 50% each; with owner email → 3 cards at 33%. Falls back to 3. */
  grid-template-columns: repeat(var(--contact-cols, 3), minmax(0, 1fr));
  gap: 12px;
}
/* When the card has wrapped below the title or the viewport is narrow,
   collapse to a single column so each row keeps full width instead of
   getting crushed. */
@media (max-width: 720px) {
  .company-contact-list { grid-template-columns: 1fr; }
}
.company-contact-row {
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.company-contact-row:hover {
  border-color: var(--accent-soft-2);
  box-shadow: 0 6px 18px rgba(19, 81, 184, 0.08);
}
.company-contact-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  line-height: 1.35;
}
.company-contact-label {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
/* Label + its (i) info button on one line (alt phone / alt address). */
.company-contact-labelrow {
  display: flex;
  align-items: center;
  gap: 4px;
}
.company-contact-value {
  font-size: var(--fs-ui);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}
a.company-contact-value:hover { color: var(--accent); }
/* Small leading glyph sitting inline just before each value (replaces the old
   left-hand icon tile - keeps a single icon per row next to the actual data). */
.company-contact-inlineicon {
  width: 24px;
  height: 24px;
  color: var(--ink-mute);
  vertical-align: -7px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Self-hosted site favicon shown in place of the generic link glyph on the
   Website row (see lib/favicon.php). It's a raster image, so keep it contained
   and lightly rounded rather than tinted like the stroke icons. */
img.company-favicon {
  object-fit: contain;
  border-radius: 8px;
  overflow: hidden;
  /* 1px hairline border, shrinking the image 2px so the 24px footprint (and
     alignment with the other contact icons) is preserved: 22 + 1 + 1 = 24. */
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
}

/* White / very-light favicon on a transparent canvas: it would disappear on the
   default light chip, so favicon_meta.is_light flags it (rw_favicon_is_light in
   lib/favicon.php) and company.php adds this modifier to paint a dark-grey chip
   behind just those icons, keeping the artwork visible. */
img.company-favicon--dark {
  background-color: #33363b;
  border-color: #33363b;
}

/* call.png is a raster glyph (shown when no iMessage/Android device icon is
   available) - round + clip it like the favicon so its corners aren't square. */
img.company-contact-callicon {
  border-radius: 8px;
  overflow: hidden;
}

/* Address pin on the primary + alternate address rows (both use location.png). */
img.company-contact-inlineicon[src="/images/location.png"] {
  border-radius: 8px !important;
  overflow: hidden;
}

/* Email icon (owner email row + reveal placeholder both use email.png). */
img.company-contact-inlineicon[src="/images/email.png"] {
  border-radius: 8px !important;
  overflow: hidden;
}

/* Android (RCS) device glyph on the phone rows. */
img.device-icon[src="/images/android.png"] {
  border-radius: 8px !important;
  overflow: hidden;
}

/* iMessage indicators for a phone number with a confirmed active iMessage
   account (see lib/checknumber.php):  🍎 (760) 822-5316 (Call or Text). The 24px
   glyph sits before the number; "Call"/"Text" are tel:/sms: links. */
.company-contact-valueline { display: block; }
/* Value line holding a taller control (the "Show email" pill): center the
   leading icon against the pill instead of baseline-aligning it. */
.company-contact-valueline--center { display: flex; align-items: center; }
.company-contact-valueline--center .company-contact-inlineicon { vertical-align: 0; }
.imessage-icon,
.device-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: -7px;
  object-fit: contain;
}
/* Styled hover tooltip for the iMessage/Android device glyph - matches the
   Public Records Check pill tooltip (.records-chip-tip): same dark card, large
   readable copy and generous padding, left-anchored beside the small glyph. */
.device-tipwrap { position: relative; display: inline-block; line-height: 0; vertical-align: -7px; }
.device-tipwrap .device-icon,
.device-tipwrap .company-contact-callicon { vertical-align: baseline; cursor: help; }
.device-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 380px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  pointer-events: none;
}
.device-tipwrap:hover .device-tip,
.device-tipwrap:focus-within .device-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Keep the tooltip inside the viewport on phones (works with body overflow-x). */
@media (max-width: 640px) {
  .device-tip { max-width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .device-tip { transition: opacity 120ms ease, visibility 120ms; transform: none; }
  .device-tipwrap:hover .device-tip,
  .device-tipwrap:focus-within .device-tip { transform: none; }
}
.imessage-actions {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-mute, #6b7280);
  white-space: nowrap;
}
.imessage-action { color: #1186FF; text-decoration: none; }
.imessage-action:hover { text-decoration: underline; }

/* WhatsApp card (its own Contact Info block, primary number only). The glyph
   matches the iMessage/Android device marks - 24px app tile, 8px rounded,
   overflow-clipped - rather than the smaller 16px line icons. */
img.company-contact-appicon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: -7px;
  border-radius: 8px;
  overflow: hidden;
  object-fit: contain;
  flex-shrink: 0;
}

/* Alternate phone / address cards can list more than one value. The (i) button
   that opens the "which sources report this" modal now sits inline next to the
   label (.company-contact-labelrow), not over the value. */
.company-contact-altline { display: block; }
.company-contact-altline + .company-contact-altline { margin-top: 8px; }
.company-contact-altinfo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* The button is taller than the 12px label; absorb the overflow so the label
     row stays the same height as a plain label and cards line up across the grid. */
  margin: -3px 0;
}
.company-contact-altinfo .icon { width: 15px; height: 15px; }

/* Contact Info section - its own page band below the hero. The same card rows
   as the old hero strip (phone / address / owner email) plus Website + Socials,
   laid out in a responsive auto-fit grid that wraps ~3-per-row down to 1. */
.company-contact-list--cards {
  /* Auto-fit, but the max() floor caps it at 3 columns: each track can't be
     narrower than a third of the row (minus the two 10px gaps), so a 4th never
     fits. Below ~3×240px the 240px floor wins and it steps down to 2, then the
     720px rule collapses it to 1. */
  grid-template-columns: repeat(auto-fit, minmax(max(240px, (100% - 24px) / 3), 1fr));
}
/* Exactly 4 cards: auto-fit would leave a 3 + 1 orphan, so pin to a 2x2 grid
   above the mobile breakpoint (below 720px the rule above still collapses to 1). */
@media (min-width: 721px) {
  .company-contact-list--cards-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A long address is present: drop the whole grid from 3 columns to 2 so every
     card is ~50% wide and the address stays on one line instead of wrapping in a
     cramped one-third column (set on the <ul> in routes/company.php). */
  .company-contact-list--cards.company-contact-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Socials card: the brand-tile row is the card's "value", so lift it off the
   label by the same hair as a .company-contact-value. */
.company-contact-row .company-socials { margin-top: 3px; }

/* Owner Email - click-to-reveal. The address is fetched on click; until then
   only this button is in the DOM. */
.owner-email { margin-top: 1px; }
.owner-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  font-size: var(--fs-meta);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.owner-email-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-soft); }
.owner-email-btn:disabled { opacity: 0.6; cursor: progress; }
.owner-email-eye { width: 14px; height: 14px; }
.owner-email-out { font-size: var(--fs-ui); color: var(--ink); font-weight: 500; word-break: break-word; }
.owner-email-out--warn { color: #a06000; font-weight: 400; line-height: 1.3; }
/* Honeypot - visually removed but still in the DOM and fillable by bots. */
.owner-email-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Services Offered - icon tile grid.
   Each tile is an informational card (not clickable) with a Lucide icon
   in an accent-soft pill on the left and the service label on the right.
   The icon is picked server-side per-label by lib/service_icons.php. */
/* Business description - single Claude-generated paragraph rendered just
   above the Services Offered grid. Plain text, no formatting, narrow
   measure for readability. */
/* Padding inherited from the global `section` rule near the top of this
   file - don't override here or the alternating-band rhythm breaks. */
.company-description {}
.company-description-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Padding inherited from the global `section` rule - see note in
   .company-description above. */
.company-services {}
.services-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.service-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.service-tile:hover {
  border-color: var(--accent-soft-2);
  box-shadow: 0 4px 14px rgba(20, 24, 31, 0.06);
  transform: translateY(-1px);
}
.service-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.service-tile-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}
.service-tile-label {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
/* Clickable service tile (company page) - the label is an anchor whose
   ::after overlay makes the whole tile a single click target to its
   city × service page. Layout/hover otherwise inherit from .service-tile. */
.service-tile--link { position: relative; cursor: pointer; }
a.service-tile-label { text-decoration: none; color: var(--ink); }
.service-tile--link .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.service-tile--link:hover {
  border-color: var(--accent-soft-2);
  box-shadow: 0 4px 14px rgba(20, 24, 31, 0.06);
  transform: translateY(-1px);
}
.service-tile--link:hover .service-tile-label { color: var(--accent); }

/* Company "Services Offered": linked tiles read as links - blue label with a
   subtle underline that firms up on hover; plain (unmatched) tiles stay ink. */
.services-grid--company a.service-tile-label {
  color: var(--accent-ink);
  text-decoration: none;
}
.services-grid--company .service-tile--link:hover .service-tile-label {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-ink);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Company tiles carry a 1-2 sentence subline (service_label_descriptions), so
   they read as small cards: icon top-aligned, label + blurb stacked, and one
   fewer column than the plain grids so the text has room. The double-class
   selectors in the media blocks outrank the generic .services-grid column
   rules further down. */
.services-grid--company { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services-grid--company .service-tile { align-items: flex-start; }
.service-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.service-tile-desc {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (max-width: 960px) {
  .services-grid.services-grid--company { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .services-grid.services-grid--company { grid-template-columns: 1fr; }
}

/* "Services Offered" clamp - with 10+ services the grid shows 9 full tiles,
   10-12 as a faded peek row behind a centered Show More button, and 13+
   hidden (still in the DOM for crawlers). script.js [data-services-toggle]
   flips .is-collapsed; expanded, the button reads Show Less below the grid. */
.services-clamp.is-collapsed { position: relative; }
.services-clamp.is-collapsed .services-grid--company > li:nth-child(n+10) {
  opacity: 0.3;
  pointer-events: none;
}
.services-clamp.is-collapsed .services-grid--company > li:nth-child(n+13) { display: none; }
.services-clamp-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.services-clamp.is-collapsed .services-clamp-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 46px 0 12px;
}
.services-clamp-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 24, 31, 0.10);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.services-clamp-btn:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(20, 24, 31, 0.14);
}

/* "Services available" grid (city pages) - prevalence-ranked links to the
   city×service pages, rendered with the same .services-grid / .service-tile
   look as a company's "Services Offered" so the two read consistently. Tiles
   past the visible cap carry .is-hidden and are revealed in batches by the
   Show-more control (script.js). (.chip--link is kept below for the service-
   area chips, which still use it.) */
.services-cloud-item.is-hidden { display: none; }
.chip--link {
  cursor: pointer;
  text-decoration: none;
}
.chip--link:hover {
  border-color: var(--accent-soft-2);
  color: var(--ink);
  background: var(--accent-soft);
}
.services-cloud-actions { margin-top: 16px; }
.services-cloud-more {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.services-cloud-more:hover {
  border-color: var(--line-strong);
  background: var(--bg-soft);
}

/* Service-area map - Leaflet, fixed height, greyscale tiles, red pins. */
.service-area-map {
  width: 100%;
  height: 360px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
  z-index: 0; /* keep Leaflet panes under sticky site chrome */
}
/* Desaturate the basemap so only the pins carry color. */
.service-area-map .leaflet-tile { filter: grayscale(1); }
.service-area-map .leaflet-container { font: inherit; background: var(--bg-soft); }
/* Strip the divIcon's default white box so the SVG pin sits clean on the map. */
.rw-map-pin { background: none; border: 0; }
.rw-map-pin svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(20, 24, 31, 0.4)); }

/* Service Areas - place-name chips (reuses the .chip pill). Each <li> holds an
   <a class="chip"> when it resolves to a real city/county page, else a <span>. */
.company-service-areas {}
.service-areas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-areas-list > li { display: inline-flex; }
a.chip--link {
  text-decoration: none;
  cursor: pointer;
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}
a.chip--link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  .service-tile { transition: none; }
  .service-tile:hover { transform: none; }
}

/* Professional Certifications - one card per manufacturer. Big badge on
   the left, provider label + list of credential names on the right. Grid
   so multiple providers (GAF + CertainTeed + …) wrap evenly. */
/* Padding inherited from the global `section` rule. */
.company-certs {}
.cert-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
/* Stacked variant - one full-width credential card per row (company page). */
.cert-cards--stacked {
  grid-template-columns: 1fr;
}
.cert-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.cert-cards--stacked .cert-card { align-items: flex-start; gap: 20px; }
.cert-cards--stacked .cert-card-badge {
  flex-basis: 80px;
  width: 80px;
}
.cert-cards--stacked .cert-card-badge img {
  width: 80px;
  height: 80px;
}
.cert-card-title {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.cert-card-title a { color: var(--ink); }
.cert-card-excerpt {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
}
.cert-card-more { font-weight: 600; white-space: nowrap; }
.cert-card-badge {
  flex: 0 0 72px;
  width: 72px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cert-card-badge img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.cert-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cert-card-provider {
  margin: 0 0 4px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cert-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cert-card-item {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
}

/* EPA RRP variant - no provider PNG, so the badge slot holds a Lucide
   icon on a colored backdrop instead of an image. */
.cert-card-badge--icon {
  height: 72px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 14px;
}
.cert-card-badge--icon .icon {
  width: 36px;
  height: 36px;
}
.cert-card-provider .cert-card-source {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-tint-cool);
  color: var(--ink-soft);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: 2px;
}
.cert-card-cert-no {
  font-variant-numeric: tabular-nums;
}
.cert-card-expiry {
  margin-left: 8px;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--ink-mute);
}

/* Reviews and Reputation - third-party trust signals (BBB today). Card grid
   mirrors .cert-cards so additional review sources flow in later. */
.company-reviews {}
/* AI-generated review summary (lib/yelp.php → Claude), sits above the badges.
   Plain text styled to match .company-description - no card chrome. */
.review-summary {
  margin: 0 0 18px;
}
.review-summary-text {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Section heading + inline (i) info trigger (Reviews and Reputation). */
.section-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-mute);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease;
}
.info-btn:hover { color: var(--accent); }
.info-btn .icon { width: 18px; height: 18px; }

/* Lightweight native <dialog> modal - used by the review-summary disclaimer. */
.info-modal {
  width: min(92vw, 460px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--ink);
  /* A <dialog> renders in the top layer but still INHERITS CSS from its DOM
     ancestor. These modals can be emitted from inside a right-aligned value
     cell (.company-info-value), so pin left-alignment/weight here or the
     modal body inherits text-align:right and reads as ragged word-soup. */
  text-align: left;
  font-weight: 400;
  letter-spacing: normal;
}
.info-modal::backdrop { background: rgba(0, 0, 0, 0.4); }
.info-modal-body { padding: 24px; }
.info-modal-title {
  margin: 0 0 12px;
  font-size: var(--fs-body);
  font-weight: 700;
}
.info-modal-body p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.info-modal-close {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.info-modal-close:hover { color: var(--accent); border-color: var(--accent); }
/* Bulleted list inside an info modal (e.g. AR licensed classifications).
   Explicit block/list-item + left-align so it can't inherit the value cell's
   right-alignment or flex layout when the dialog is nested in one. */
.info-modal-list {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding-left: 20px;
  list-style: disc;
  text-align: left;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.info-modal-list li {
  display: list-item;
  margin: 0 0 6px;
  padding: 0;
}
/* Inline "(see all)" trigger on a Company Info value - a link-styled button. */
.company-info-seeall {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.company-info-seeall:hover { color: var(--accent); }
.review-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  /* Up to 3 cards per row, equal width (33% each); a 4th+ wraps to a new row.
     Smaller counts fill the row instead of leaving a trailing gap (see below). */
  grid-template-columns: repeat(3, 1fr);
}
/* 1 card → 50% (sits in a 2-col grid, spanning one column). */
.review-cards:has(.review-card:only-child) { grid-template-columns: repeat(2, 1fr); }
/* exactly 2 → 50% each. */
.review-cards:has(.review-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
/* exactly 3 → 33% each. */
.review-cards:has(.review-card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
/* exactly 4 → 50% each (2×2) rather than a 3+1 orphan row. */
.review-cards:has(.review-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
/* Stack to a single column on narrow screens (selectors mirror the ones above
   so they match their specificity and win inside the query). */
@media (max-width: 640px) {
  .review-cards,
  .review-cards:has(.review-card:only-child),
  .review-cards:has(.review-card:nth-child(2):last-child),
  .review-cards:has(.review-card:nth-child(3):last-child),
  .review-cards:has(.review-card:nth-child(4):last-child) {
    grid-template-columns: 1fr;
  }
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Brand glyph tile + network name, grouped on the left of the card head. */
.review-card-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* let a long name wrap instead of overflowing a narrow card */
}
.review-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand, var(--accent));
  color: #fff;
}
.review-card-icon .icon { width: 17px; height: 17px; }
/* Brand-logo tile (GAF / CertainTeed / Owens Corning) - full-color logo on a
   white chip rather than a single-color glyph on a brand tile. */
.review-card-icon--logo {
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px;
}
.review-card-icon--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Aggregate tile: white background; the purple sparkles come from the SVG. */
.review-card-icon--aggregate {
  background: #fff;
  border: 1px solid var(--line);
}
.review-card-source {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.2;
  min-width: 0;
  /* Keep every name on one line so the card heads stay the same height and the
     star ratings line up across the row (e.g. "Aggregate Review" never wraps). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* BBB letter grade - bold pill, prominent on the right of the card head. */
.bbb-grade {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.review-card-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink);
}
.review-card-meta--muted { color: var(--ink-mute); }
.review-card-link {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-ink);
  text-decoration: none;
}
.review-card-link:hover { color: var(--accent); text-decoration: underline; }
/* The Avg. Rating card uses a <button> (opens a modal) styled as the link. */
button.review-card-link {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
/* Question-mark trigger beside the "Avg. Rating" label - opens the
   "how is this calculated?" modal. */
.review-card-help {
  flex: 0 0 auto;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 2px;
  background: none;
  color: var(--ink-mute);
  cursor: pointer;
}
.review-card-help:hover { color: var(--accent); }
.review-card-help .icon { width: 15px; height: 15px; }

/* Nearby Roofing Businesses - one unified grid of up to 9 companies (located in
   this city + servicing it from elsewhere), ranked closest-first. Two roomy
   cards per row: logo + name + distance + rating, a short excerpt, cert badges. */
.related-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.related-card { display: flex; }
.related-card-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 176px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.related-card-link:hover {
  border-color: var(--ink-faint);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* Whole card is one link, so suppress the global a:hover underline on it -
   only the company name should underline on hover (see below). */
.related-card-link,
.related-card-link:hover { text-decoration: none; }
.related-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.related-card-head .company-thumb { flex: 0 0 auto; }
.related-card-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Distance pill rides at the top-right of the card head, inline with the
   company name. */
.related-card-head .related-distance { flex: 0 0 auto; }
.related-card-name {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-card-link:hover .related-card-name { color: var(--accent); text-decoration: underline; }
/* Distance pill - solid red pin + mileage from this company's city. Rides
   top-right of the card head, inline with the company name. */
.related-distance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink-soft);
}
.related-distance-icon {
  width: 14px;
  height: 14px;
  color: #e02424;
  fill: currentColor;
}
/* The pin is two shapes (teardrop + inner circle). Filling both red erases the
   dot, so paint the inner circle white to restore the classic map-pin look. */
.related-distance-icon circle { fill: #fff; }
.related-card-excerpt {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Footer pinned to the card foot: "Avg Rating:" score + "Certs:" badges.
   Excerpt reads at --fs-body like all sentence text; footer labels/values
   share --fs-ui so the card foot reads as data, not prose. */
.related-card-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.related-card-label {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink-soft);
}
.related-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.related-card-rating .rating-value { font-size: var(--fs-ui); }
/* Cert badges. Distinct wrapper class (not .cert-badges) so the table's
   badge-cap JS doesn't touch it; chips reuse the .cert-badge visual. */
.related-card-certs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* Company Info - key/value strip of public-record fields (license,
   registration, anything else we extract). Optional rows, grows from
   the top as more fields land. */
/* Padding inherited from the global `section` rule. */
.company-info {}
.company-info-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.company-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.company-info-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.company-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.company-info-icon .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}
.company-info-value {
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-align: right;
  /* Wrap at spaces first; only split inside a token when a single long word
     (license number, URL, email) genuinely can't fit. break-all chopped
     multi-word names mid-word ("CONSTRUC-TION"). */
  overflow-wrap: anywhere;
}
.company-info-value--muted {
  color: var(--ink-mute);
  font-weight: 500;
  word-break: normal;
}
/* Row-level (i) explainer sitting after the value (e.g. the N/A on
   state-administered RRP rows). Shares .info-btn chrome; just needs to
   sit on the text baseline inside the right-aligned value cell. */
.company-info-infobtn {
  vertical-align: middle;
  margin-left: 2px;
}
/* Inline chip next to a value - used for mail-drop addresses (PO Box / CMRA),
   which are a top-tier storm-chaser tell. Sits to the LEFT of the value
   because the value column is right-aligned: in the rendered output the chip
   reads "Mail drop · PO Box" left-to-right. */
.company-info-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-right: 0.4rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: 0.08em;
}
.company-info-chip--warn {
  background: #fde9d2;
  color: #8a3a06;
  border: 1px solid #f5c89c;
}
.company-info-chip--ok {
  background: #e3f5ea;
  color: #1f6b40;
  border: 1px solid #b6e2c8;
}
/* External-link affordances inside a Company Info value (e.g. the EPA
   Lead-Safe row). The whole value links when there's no record; a
   trailing "Verify on EPA.gov" link sits beside the cert number when
   there is. */
.company-info-value-link,
.company-info-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-ink);
  font-weight: 600;
}
.company-info-value-link { font-style: normal; }
.company-info-value--muted .company-info-value-link { color: var(--accent-ink); }

/* Disciplinary-action info marker (Illinois): an (i) after each action with a
   CSS tooltip (date + reason) on hover/focus. */
.company-info-disc {
  position: relative;
  cursor: help;
  color: var(--ink-mute, #6b7280);
  outline: none;
}
.company-info-disc:hover,
.company-info-disc:focus-visible { color: var(--accent-ink); }
.company-info-disc-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.22em;   /* sit on the text, not above it */
}
.company-info-disc::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: 7px 10px;
  background: #14181f;
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.company-info-disc::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: calc(100% + 2px);
  z-index: 30;
  border: 5px solid transparent;
  border-top-color: #14181f;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.company-info-disc:hover::after,
.company-info-disc:focus-visible::after,
.company-info-disc:hover::before,
.company-info-disc:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
.company-info-link {
  margin-left: 0.5rem;
  font-size: var(--fs-ui);
  font-weight: 500;
}
.company-info-link-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}
/* Detailed rows - empty-record fields (no license / EPA match / etc.) that
   carry a dated, non-defamatory disclaimer and a "Report a correction" link.
   They span the full grid width and stack: the label/value line on top, then
   the note, then the correction link. The plain label/value line lives in
   .company-info-main so it keeps the same left/right split as a normal row. */
.company-info-row--detailed {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
}
.company-info-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Fill the row so space-between can push the value out to the right edge. On a
     simple (non-detailed) row the parent .company-info-row is a row-direction
     flex and would otherwise let .company-info-main shrink to content width,
     clumping label + value together at the left. (Detailed rows get full width
     from .company-info-row--detailed's align-items: stretch.) min-width: 0 lets
     it shrink inside the narrow 2-column grid cell instead of overflowing. */
  flex: 1 1 auto;
  min-width: 0;
}
/* Jurisdictional/disclaimer notes under an info row (e.g. state-run RRP).
   These carry the "absence is not evidence" framing, so they read at full
   body size like every other sentence on the page - never small or faint.
   May contain a server-built inline link (note_html). */
.company-info-note {
  margin: 10px 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: left;
}
@media (max-width: 640px) {
  .company-info-list { grid-template-columns: 1fr; }
}

/* Permits Pulled - BuildZoom-sourced permit history. Stat row (count +
   value) over a table of individual permits. Mirrors the OSHA section's
   stat-card look; padding inherited from the global `section` rule. */
/* Inherits chrome from .data-table / .table-scroll; only the permit-specific
   cell internals are styled here. Multi-line project cell reads better
   top-aligned than the data-table default of middle. */
.data-table--permits tbody td { vertical-align: top; }
.permits-col-date { white-space: nowrap; color: var(--ink-mute); }
.permits-project-title { display: block; font-weight: 600; color: var(--ink); }
.permits-project-desc  { display: block; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }
.permits-project-num   { display: block; color: var(--ink-mute); font-size: var(--fs-meta); margin-top: 3px; font-variant-numeric: tabular-nums; }
.permits-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
  color: var(--ink);
}
.permits-pill-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
/* Semantic tones - track the OSHA section's muted-tint convention. */
.permits-pill--green { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.permits-pill--blue  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.permits-pill--amber { background: #fff7ed; border-color: #fed7aa; color: #b45309; }
.permits-pill--red   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.permits-pill--gray  { background: var(--bg); border-color: var(--line); color: var(--ink-mute); }
.permits-note {
  margin: 12px 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-mute);
  line-height: 1.5;
}
.permits-note a { color: var(--accent-ink); font-weight: 500; }
.permits-note a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .permits-project-desc { display: none; }
}

/* OSHA Inspections & Violations - public-records section. Stat row at
   the top, then a list of inspections with the standards cited under
   each. Violation-type colors are semantic, not branded:
     S - Serious  (orange)
     W - Willful  (red)
     R - Repeat   (purple)
     O - Other    (gray)
     U - Unclassified (gray)
   Padding inherited from the global `section` rule. */
.osha-source {
  font-size: var(--fs-meta);
  color: var(--ink-mute);
  font-weight: 500;
}
.osha-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.osha-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.osha-stat-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.osha-stat-value {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.osha-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.osha-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.osha-pill-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.osha-pill--s { background: #fff1e6; color: #b3590e; }
.osha-pill--w { background: #fde7e7; color: #b3261e; }
.osha-pill--r { background: #efe6fb; color: #5b21b6; }
.osha-pill--o,
.osha-pill--u { background: #eef0f4; color: #4b5563; }

.osha-insp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.osha-insp {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.osha-insp:last-child { border-bottom: 0; }
.osha-insp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-size: var(--fs-ui);
}
.osha-insp-date {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.osha-insp-where { color: var(--ink-soft); }
.osha-insp-id {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.osha-viol-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.osha-viol {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: var(--fs-ui);
}
.osha-viol-type {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
}
.osha-viol-standard {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.osha-viol-label {
  color: var(--ink);
  font-size: var(--fs-ui);
  line-height: 1.3;
}
.osha-viol-code {
  color: var(--ink-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  line-height: 1.2;
}
.osha-viol-code--bare {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}
.osha-viol-penalty {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
@media (max-width: 640px) {
  .osha-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osha-viol { grid-template-columns: 90px 1fr; }
  .osha-viol-penalty { grid-column: 2; text-align: left; }
  .osha-insp-id { margin-left: 0; }
}

.company-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ink-faint, #e5e5e5);
  flex-shrink: 0;
  overflow: hidden;
}
.company-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 48px;
}
.company-logo--empty {
  background: #f6f6f6;
  color: var(--ink-mute, #777);
}
.company-logo--empty .logo-icon {
  width: 44px;
  height: 44px;
}
.muted { color: var(--ink-faint); }

/* License pill */
.license-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.license-pill--active {
  background: rgba(31, 138, 78, 0.08);
  color: #176a3c;
  border-color: rgba(31, 138, 78, 0.22);
}
.license-pill--expired,
.license-pill--inactive,
.license-pill--suspended {
  background: rgba(180, 60, 36, 0.07);
  color: #9b3520;
  border-color: rgba(180, 60, 36, 0.22);
}

/* Service-area badge - same chrome as the credential badges (.cert-badge):
   identical padding, 4px radius, gap and type. The mark is a small solid
   square (white glyph on a colored fill), sized like a .cert-badge-img. */
.area-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.area-pill-icon {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  stroke-width: 2.5;
}
/* Local - established, single-market: green chip. */
.area-pill--local {
  background: rgba(47, 122, 79, 0.12);
  color: #1f6a40;
}
.area-pill--local .area-pill-icon { background: #2f7a4f; }
/* Multi-State - wider reach: accent chip (matches the GAF-style cert badge). */
.area-pill--multi {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.area-pill--multi .area-pill-icon { background: var(--accent-ink, #0e3d8a); }

/* Site Age */
.site-age { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Manufacturer cert badges. inline-flex (not block flex) + vertical-align:middle
   so the badges sit in the cell's text line box exactly like the Service Area
   .area-pill - otherwise the block-level list centers a couple px lower. */
.cert-badges {
  display: inline-flex;
  vertical-align: middle;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
}
.cert-badge-img {
  display: block;
  height: 18px;
  width: auto;
  max-width: 18px;
}
.cert-badge-name { line-height: 1; }
/* "+N more" chip when a row has >3 credentials (script.js caps the visible set
   at two). Muted vs. the real badges so it reads as a count, not a credential. */
.cert-badge--more {
  position: relative;
  background: var(--bg-soft);
  color: var(--ink-soft);
  cursor: default;
}
/* Hover/focus tooltip listing the collapsed credentials (built in script.js
   rwApplyCertCap). Dark bubble centered above the chip with a small caret. */
.cert-more-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  background: var(--ink);
  color: #fff;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: var(--fs-label);
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(20, 24, 31, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.cert-more-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.cert-badge--more:hover .cert-more-tip,
.cert-badge--more:focus-within .cert-more-tip {
  opacity: 1;
  visibility: visible;
}

/* OSHA citation pill */
.osha-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.osha-pill--zero {
  background: var(--bg-soft);
  color: var(--ink-faint);
}
.osha-pill--some {
  background: rgba(214, 158, 46, 0.12);
  color: #8a5a00;
}
.osha-pill--high {
  background: rgba(180, 60, 36, 0.10);
  color: #9b3520;
}

/* Google rating */
.rating {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.rating-star {
  color: #e6a800;
  font-size: 0.875rem;
  line-height: 1;
}
.rating-value {
  font-weight: 600;
  color: var(--ink);
}
.rating-count {
  color: var(--ink-mute);
  font-size: 0.8125rem;
}
/* Larger variant - used in the Reviews & Reputation Google card head so the
   score reads as prominently as the BBB grade pill opposite it. */
.rating--lg .rating-star { font-size: var(--fs-body); }
.rating--lg .rating-value { font-size: var(--fs-body); font-weight: 700; }

/* "N/A" rating with a (?) hover/focus tooltip - used in the Reviews &
   Reputation Google card when we couldn't locate the Business Profile, so the
   card keeps the same height as its siblings instead of spilling a muted line. */
.rating-na {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
  outline: none;
}
.rating-na-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-mute);
}
.rating-na-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.rating-na-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 280px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  pointer-events: none;
}
.rating-na:hover .rating-na-tip,
.rating-na:focus .rating-na-tip,
.rating-na:focus-within .rating-na-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* OSHA-citation standard-code styling */
.cited {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.cited-cell { min-width: 0; }
.cited-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cited-label {
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.3;
}
.cited-code {
  color: var(--ink-mute);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Data sources strip */
.sources { background: var(--bg-tint-cool); }
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.source {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
}
.source-icon .icon { width: 18px; height: 18px; }
.source-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.source-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.source-meta {
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.source-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.source-status--ok {
  background: rgba(31, 138, 78, 0.10);
  color: #176a3c;
}
.source-status--pending {
  background: var(--bg-soft);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}

/* Empty-state paragraph (used outside tables) */
.empty-state {
  padding: 24px;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-mute);
  font-size: 0.9375rem;
}

/* Responsive ---------- */
@media (max-width: 960px) {
  .stat-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-list   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-steps { grid-template-columns: 1fr; }
  .footer-top   { grid-template-columns: 1fr; gap: 36px; }
  .city-grid    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .source-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .check-list { grid-template-columns: 1fr; gap: 20px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-bottom { justify-content: flex-start; }
  .hero { padding: 56px 0 36px; }
  .hero-sub { font-size: 1rem; }
  .search input[type="search"] { font-size: 1rem; padding: 12px 4px; }
  .search-field { padding: 6px 6px 6px 16px; border-radius: 28px; }
  .search-submit { padding: 10px 14px; }
  .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reqs-box { padding: 20px; }
}

/* Header nav collapses into the hamburger below this width */
@media (max-width: 760px) {
  .header-row { position: relative; }
  .nav-toggle { display: inline-flex; }
  /* Full-width Compare Quotes bar, pinned under the nav (inside the sticky
     header so it stays visible). The in-menu copy is hidden to avoid a dupe. */
  .header-mobile-cta {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-sizing: border-box;
  }
  .header-mobile-cta .site-nav-cta {
    display: flex;
    width: 100%;
    margin: 0;
    justify-content: center;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    font-size: 1rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a,
  .site-nav-trigger {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 18px;
    line-height: 1.3;
  }
  .site-nav a:hover { background: rgba(15, 23, 42, 0.04); }
  /* In the stacked mobile menu the search trigger reads as a labelled row */
  .site-nav-trigger--search { display: flex; }
  .site-nav-search-label { display: inline; }
  /* Resources dropdown flows inline within the stacked mobile nav */
  .site-nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-dropdown-menu a { padding: 12px 18px 12px 34px; border-radius: 0; }
  /* The in-menu CTA is redundant on mobile - the persistent .header-mobile-cta
     bar carries Compare Quotes now. Qualified with `a` to beat `.site-nav a`. */
  .site-nav a.site-nav-cta { display: none; }
}

@media (max-width: 480px) {
  :root { --pad-x: 16px; }
  .stat-grid { gap: 12px; }
  .stat { padding: 18px; }
  .method-step { padding: 20px; }
  .search-submit-label { display: none; }
  .search-submit { padding: 10px 12px; border-radius: 50%; }
  .search-submit .icon { width: 18px; height: 18px; }
  .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: 1fr; }
  .state-lede { font-size: 1rem; }
  .data-table thead th,
  .data-table tbody td { padding: 10px 12px; }
}

@media (max-width: 380px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .record-chips { gap: 6px; }
  .chip { padding: 5px 10px 5px 9px; font-size: 0.75rem; }
}

/* ============================================================
   County map - two-column card. Section gets a subtle cool tint;
   the inner wrap is a white card with border, rounded corners,
   and hairline shadow so it reads as a distinct module. Map on
   the left, quick-links on the right; both columns share the
   same heading / lede treatment so they align at the top.
   SVG produced by tools/map/build-map.js.
   ============================================================ */
.state-map {
  background: var(--bg-tint-cool);
  padding: clamp(20px, 3vw, 32px) 0 clamp(40px, 5vw, 64px);
}
.state-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: 28px 56px;
  align-items: start;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow:
    0 1px 2px rgba(20, 24, 31, 0.04),
    0 4px 16px rgba(20, 24, 31, 0.03);
}
.state-map-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Shared heading + lede for both columns */
.state-map-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.state-map-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
  min-height: 18px;
}
.state-map-heading-row .state-map-heading { margin: 0; }
.state-map-see-all {
  font-size: 0.8125rem;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.state-map-see-all span {
  font-size: 0.875rem;
  transition: transform 0.15s ease;
}
.state-map-see-all:hover { text-decoration: none; color: var(--accent); }
.state-map-see-all:hover span { transform: translateY(2px); }
/* The repeated "See all" under the city list is styled to read as one more
   row in the list - same padding, hairline divider, chevron and hover as a
   .quick-links item - rather than the small inline link in the heading row. */
.state-map-see-all--below {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-ink);
}
.state-map-see-all--below:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.state-map-see-all--below span {
  font-size: 1rem;
}
.state-map-lede {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 52ch;
  min-height: 22px;
}

/* Left column - the map */
.state-map-fig { margin: 0; }
.state-map-fig .region-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(360px, 56vh, 500px);
}

/* US-states map - full width on the homepage, sits in its own card */
.us-map-section {
  background: var(--bg-tint);
  padding: clamp(28px, 4vw, 48px) 0 clamp(10px, 5vw, 0px);
}
.us-map-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.5vw 4.5vw 2.5vw 4.5vw;
  box-shadow:
    0 1px 2px rgba(20, 24, 31, 0.04),
    0 4px 16px rgba(20, 24, 31, 0.03);
  text-align: center;
}
.us-map-heading {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.us-map-lede {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 auto 20px;
  max-width: 52ch;
}
.us-map-fig { max-width: 1000px; margin: 0 auto; }
.us-map-fig .us-map {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* Coverage overlay - a <canvas> of "we have a roofer here" pins drawn on top
   of a clickable region map: .us-map-stage on the homepage (US states map +
   images/maps/coverage-pins.json) and .state-map-stage on state pages (county
   map + images/maps/pins/{state}.json). The stage is the positioning context;
   the canvas matches the SVG box exactly and ignores pointer events so the
   regions underneath stay hoverable/clickable. script.js fetches the baked
   pin JSON named by data-coverage-pins and paints the pins. */
.us-map-stage,
.state-map-stage {
  position: relative;
  display: block;
}
.us-map-stage .coverage-canvas,
.state-map-stage .coverage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Hidden until script.js paints the first frame. The intro motion (per-pin
     fade + rise, left-to-right) is driven on the canvas itself, so the canvas
     element appears instantly rather than cross-fading as a whole. */
  opacity: 0;
}
.us-map-stage .coverage-canvas.is-painted,
.state-map-stage .coverage-canvas.is-painted { opacity: 1; }

/* Custom tooltip - JS-driven, replaces SVG <title>. Floats over the map
   following the cursor; positioned by script.js using clientX/clientY. */
.map-tooltip {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background: rgba(20, 24, 31, 0.96);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(20, 24, 31, 0.18);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.map-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .map-tooltip { transition: opacity 0.05s linear; transform: none; }
  .map-tooltip.is-visible { transform: none; }
}

/* County path styling + interaction */
.region-map .region-link { outline: none; cursor: pointer; }
.region-map .region-link path {
  fill: #e9ecef;
  stroke: #9ca3af;
  stroke-width: 2;
  transition: fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}
/* Homepage US map - state-to-state borders read finer than county borders
   do on per-state pages. Scoped by the .us-map modifier the homepage SVG
   carries; per-state county maps use .county-map and keep stroke-width: 2. */
.region-map.us-map .region-link path {
  stroke-width: 1;
}
/* Dissolved state outline, drawn on top so the perimeter reads as one
   thicker line than the internal county borders. */
.region-map .state-outline {
  fill: none;
  stroke: #9ca3af;
  stroke-width: 2.5;
  pointer-events: none;
}
.region-map .region-link:hover path {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 0.8;
}
.region-map .region-link:focus-visible path {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .region-map .region-link path { transition: none; }
}

/* Right column - quick-link city list */
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.quick-links li { position: relative; }
.quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.quick-links a::after {
  content: "›";
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.12s ease, transform 0.12s ease;
}
.quick-links a:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}
.quick-links a:hover::after {
  color: var(--accent);
  transform: translateX(2px);
}
/* Hairline dividers between rows (skip the first row in each column) */
.quick-links li::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.quick-links li:nth-child(-n+2)::before { display: none; }

/* Offset for the sticky header when "See all ↓" jumps to #cities-title */
#cities-title {
  scroll-margin-top: 84px;
}

/* Responsive: stack at narrow widths */
@media (max-width: 880px) {
  .state-map-wrap { grid-template-columns: 1fr; gap: 28px; }
  .state-map-fig .region-map { margin: 0 auto; }
}
@media (max-width: 480px) {
  .state-map-fig .region-map { max-height: clamp(260px, 64vw, 380px); }
  .quick-links { grid-template-columns: 1fr; }
  .quick-links li { border-top: 1px solid var(--line); }
  .quick-links li:first-child { border-top: 0; }
}

/* ============================================================
   Company page - "Update Information" button + modal
   ============================================================ */

/* Breadcrumb row with a right-aligned action button on the company page.
   We add vertical padding only - horizontal padding stays inherited from
   .container so the row keeps the boxed max-width gutter (don't use the
   `padding: 18px 0` shorthand here, it would override --pad-x). */
.breadcrumbs-bar--has-action .breadcrumbs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 18px;
}
/* The row supplies its own 18px top/bottom padding; the nav's own padding would
   stack on top of it and knock the crumbs out of vertical alignment with the
   "Data updated" stamp beside them. Zero it on the company page only. */
.breadcrumbs-bar--has-action .breadcrumbs { padding-top: 0; padding-bottom: 0; }

/* Solid accent pill, white text. Used in the breadcrumb bar and as the
   modal submit. The Cancel button uses the --ghost modifier below. */
.btn-update-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 33, 0.08);
}
.btn-update-info:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
  text-decoration: none;
}
.btn-update-info-icon { width: 14px; height: 14px; stroke-width: 2; flex: 0 0 auto; }

/* "Data updated" stamp - sits where the Update button used to, right-aligned in
   the breadcrumb bar. Muted, low-key: it's a freshness cue, not a CTA. */
.data-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fs-meta);
  line-height: 1.2;
  white-space: nowrap;
}
.data-updated-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex: 0 0 auto;
  color: var(--accent);
}
.data-updated-text { display: inline-flex; align-items: baseline; gap: 6px; }
.data-updated-label { font-weight: 600; color: var(--ink-soft); }
.data-updated-date { color: var(--ink-mute); }

/* Right-hand group in the breadcrumb bar: the "Data updated" stamp and the
   "Update Information" link, separated by a hairline divider. */
.breadcrumbs-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.breadcrumbs-meta .data-updated + .update-info-link {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

/* "Update Information" - a quiet text link, not a CTA pill. Picks up the accent
   on hover, matching the company URL link treatment elsewhere in the hero. */
.update-info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s ease;
}
.update-info-link:hover {
  color: var(--accent);
  text-decoration: none;
}
.update-info-link span { text-decoration: underline; text-underline-offset: 2px; }
.update-info-link-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  flex: 0 0 auto;
}

/* Modal cancel - neutral outline so it doesn't compete with submit. */
.btn-update-info--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
  box-shadow: none;
}
.btn-update-info--ghost:hover {
  background: var(--bg-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Success flash banner after submission */
.update-flash {
  margin: 14px auto;
  padding: 10px 14px;
  background: #e7f6ee;
  color: #14532d;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  border: 1px solid #cfe6d6;
}
.update-flash--warn {
  background: #fff2e1;
  border-color: #f0d5a8;
  color: #6e3d00;
}

@media (max-width: 540px) {
  .breadcrumbs-bar--has-action .breadcrumbs-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* ============================================================
   Storm history (NOAA Storm Events) - county + state pages
   ============================================================ */

.section-meta {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Stat unit suffix inside .stat-number ("mph" etc.) */
.stat-unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
}

.storm-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
@media (max-width: 720px) {
  .storm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.storm-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-tint-cool);
  color: var(--ink-soft);
}
.storm-empty p { margin: 0; }

.storm-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .storm-charts { grid-template-columns: 1fr; }
}

.storm-chart {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 18px 18px 14px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
}
.storm-chart--wide { grid-column: 1 / -1; }
@media (min-width: 861px) {
  /* Year chart sits next to donut on row 1; month chart spans full row 2. */
  .storm-chart:nth-of-type(1) { grid-column: 1 / 2; }
  .storm-chart:nth-of-type(2) { grid-column: 2 / 3; }
  .storm-chart:nth-of-type(3) { grid-column: 1 / -1; }
}
.storm-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.storm-chart-title .icon {
  width: 16px; height: 16px;
  color: var(--accent);
}
.storm-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.storm-canvas-wrap--donut { height: 240px; }
.storm-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

.storm-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  margin: 26px 0 12px;
  color: var(--ink);
}
.storm-subhead .icon { width: 18px; height: 18px; color: var(--accent); }

.storm-county-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.storm-county-link {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.storm-county-link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}
.storm-county-name {
  display: block;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: 4px;
}
.storm-county-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.storm-county-stat { display: inline-flex; align-items: center; gap: 4px; }
.storm-county-stat .icon { width: 14px; height: 14px; }

.storm-type-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.storm-type-icon { display: inline-flex; color: var(--accent); }
.storm-type-icon .icon { width: 14px; height: 14px; }

/* ============================================================
   NWS active-alerts strip
   ============================================================ */

.nws-alerts-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.nws-alerts-head .section-title { margin: 0; }

.nws-alert-list {
  display: grid;
  gap: 10px;
}
.nws-alert-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.nws-alert-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .nws-alert-list--cols-2,
  .nws-alert-list--cols-3 { grid-template-columns: 1fr; }
}

.nws-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px solid var(--line);
}
.nws-alert--severe   { border-color: #fca5a5; background: #fff5f5; }
.nws-alert--moderate { border-color: #fcd34d; background: #fffaf0; }
.nws-alert--minor    { border-color: var(--line); }

.nws-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
  color: #b45309;
  flex: 0 0 auto;
}
.nws-alert--severe .nws-alert-icon   { background: #fee2e2; color: #b91c1c; }
.nws-alert--moderate .nws-alert-icon { background: #fef3c7; color: #b45309; }
.nws-alert-icon .icon { width: 18px; height: 18px; }

.nws-alert-body { min-width: 0; flex: 1 1 auto; }
.nws-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}
.nws-alert-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
/* Affected-area "Read more" toggle - the overflow span is server-rendered and
   only visually hidden, so the full county list stays crawlable. */
.nws-area-toggle {
  font: inherit;
  font-weight: 500;
  color: var(--brand, #2563eb);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  text-decoration: underline;
}
.nws-area-toggle:hover { text-decoration: none; }
.nws-area-ellipsis { margin: 0 2px; }

.nws-alert-sev {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--ink-soft);
}
.nws-alert--severe .nws-alert-sev   { background: #fee2e2; color: #991b1b; }
.nws-alert--moderate .nws-alert-sev { background: #fde68a; color: #92400e; }

.nws-alert-headline {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink);
}

.nws-alert-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9c7860;
}
.nws-alert-time .icon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: -2px; }
.nws-alert-time time { font-variant-numeric: tabular-nums; }

/* Fine-print under the city-page storm history. Sits below the table,
   reads as a quiet attribution, not a banner. */
.storm-scope-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  background: none;
  color: var(--ink-mute);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.storm-scope-note .icon { width: 14px; height: 14px; color: var(--ink-faint); flex: 0 0 auto; }
.storm-scope-note a { color: var(--accent-ink); }

/* Generous breathing room between the chart grid and the "Recent storm
   events" h2 that follows. The .storm-canvas-wrap has no bottom margin
   so this is the only separator. */
.storm-recent-wrap { margin-top: 56px; }

/* ============================================================================
   Customer Reviews (company page) - visitor-submitted ratings + reviews,
   shown once approved in the admin Ratings Queue. Submission form gated by a
   Cloudflare Turnstile challenge + honeypot + 1-per-IP cap (server-side).
   Banding/background is handled by the section :nth-of-type alternation.
   ========================================================================= */
.customer-reviews { scroll-margin-top: 80px; }

/* Aggregate score next to the section title. */
.cr-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
}
.cr-stars { display: inline-flex; line-height: 1; }
.cr-star { font-size: 0.95rem; line-height: 1; }
.cr-star--on  { color: #e6a800; }
.cr-star--off { color: var(--line-strong); }
.cr-summary-num   { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-summary-count { color: var(--ink-mute); font-size: 0.8125rem; }

/* Approved review list. */
.cr-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.cr-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px 20px;
}
.cr-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.cr-item-stars { display: inline-flex; line-height: 1; }
.cr-item-name { font-weight: 600; color: var(--ink); }
.cr-item-date { color: var(--ink-mute); font-size: 0.8125rem; margin-left: auto; }
.cr-item-body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
/* Owner response shown under a review (members reply, approved by admin). */
.cr-item-response {
  margin: 12px 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent, #1351b8);
  background: var(--accent-soft, #eef3fb);
  border-radius: 0 10px 10px 0;
}
.cr-item-response-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-ink, #1351b8);
}
.cr-item-response-icon { width: 15px; height: 15px; }
.cr-item-response-body {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.cr-empty {
  margin: 0 0 28px;
  color: var(--ink-mute);
  font-size: 0.9375rem;
}

/* "Write a review" form. */
.cr-form-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 24px 24px 26px;
}
.cr-form-title {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.cr-form { display: grid; gap: 16px; }
.cr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cr-field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.cr-field > span,
.cr-field > legend {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0;
}
.cr-field input[type="text"],
.cr-field input[type="email"],
.cr-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.cr-field input:focus,
.cr-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cr-field textarea { resize: vertical; min-height: 110px; }
.cr-field-hint { color: var(--ink-mute); font-size: var(--fs-label); }

/* Honeypot - visually gone, off-screen, not announced. */
.cr-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* Star-rating radio input. Source order is 5→1; row-reverse renders 1..5
   left-to-right while letting `input:checked ~ label` (and hover) fill the
   chosen star plus every lower one. */
.cr-rating-field { gap: 4px; }
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.star-rating input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.star-rating label {
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--line-strong);
  transition: color 0.12s ease;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #e6a800; }
.star-rating input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cr-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.cr-turnstile-field { min-height: 65px; }
.cr-form-actions { margin-top: 2px; }

@media (max-width: 640px) {
  .cr-form-row { grid-template-columns: 1fr; }
  .cr-item-date { margin-left: 0; width: 100%; }
}

/* ── Roofing-quote page (/get-roofing-quotes) ───────────────────────── */
.quote-wrap { padding-bottom: 40px; }

.quote-form { display: flex; flex-direction: column; gap: 18px; }

/* Single container for the whole form - tighter than the old 3-box layout. */
.quote-fieldset {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 34px 34px;
  margin: 0;
  background: #fff;
}

.quote-fields { display: flex; flex-direction: column; gap: 14px; }

/* Multi-field rows. The address row stays on one line at every width so the
   form reads short; the others stack on narrow screens. */
.quote-row { display: grid; gap: 14px; }
.quote-row--3 { grid-template-columns: repeat(3, 1fr); }
.quote-row--2 { grid-template-columns: repeat(2, 1fr); }
.quote-row--addr { grid-template-columns: 2fr 0.9fr 1.1fr; }

.quote-field { display: flex; flex-direction: column; gap: 6px; }
.quote-field--wide { grid-column: 1 / -1; }
.quote-field > span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.quote-field > span em { color: var(--accent); font-style: normal; }

.quote-field input,
.quote-field select,
.quote-field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.quote-field textarea { resize: vertical; }

.quote-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.quote-fineprint { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }

.quote-success {
  border: 1px solid var(--accent-soft-2);
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 28px 26px;
}
.quote-success h2 { margin: 0 0 8px; color: var(--accent-ink); }
.quote-success p { margin: 0; color: var(--ink); }

.quote-error {
  border: 1px solid #f2c2c2;
  background: #fdeeee;
  color: #8a1c1c;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 22px;
}

@media (max-width: 640px) {
  /* Stack contact + property rows, but keep city/state/zip on one line. */
  .quote-row--3,
  .quote-row--2 { grid-template-columns: 1fr; }
  .quote-row--addr { grid-template-columns: 1.5fr 0.8fr 1fr; gap: 10px; }
}

/* "How it works" 3-step illustration above the form. */
.how-it-works { padding: 40px 0 44px; }
.hiw-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hiw-step {
  flex: 1 1 0;
  max-width: 320px;
  text-align: center;
  padding: 34px 26px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hiw-step:hover {
  transform: translateY(-3px);
  border-color: var(--accent-soft-2);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.hiw-step-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(155deg, #2a6fd6 0%, var(--accent) 55%, var(--accent-ink) 100%);
  /* Drop shadow removed per design - keep only the subtle top-edge highlight. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.18s ease;
}
.hiw-step:hover .hiw-step-badge { transform: scale(1.05); }
.hiw-icon { width: 32px; height: 32px; stroke-width: 1.9; }
.hiw-step-title { font-size: 1.0625rem; margin: 0 0 9px; color: var(--ink); }
.hiw-step-desc { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.hiw-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--accent);
  opacity: 0.5;
}
.hiw-arrow-icon { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .how-it-works { padding: 36px 0 32px; }
  .hiw-steps { flex-direction: column; align-items: center; gap: 18px; }
  .hiw-step { max-width: 440px; width: 100%; }
  .hiw-arrow { display: none; }
}

/* ==========================================================================
   Credentials - master list (/credentials) + detail (/credentials/{slug})
   ========================================================================== */
.credential-eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Jump To nav - quick links to each manufacturer group. Sticks just below
   the sticky site header; --rw-header-h is measured by script.js because the
   header's height varies (mobile carries the Compare Quotes bar inside it). */
.credential-jump {
  position: sticky;
  top: var(--rw-header-h, 64px);
  z-index: 15; /* below .site-header's 20 */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-tint-cool, #f7f9fc);
  padding: 14px 0;
}
/* Mobile-only collapser; hidden on desktop where the pills show inline */
.credential-jump-toggle { display: none; }
.credential-jump-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
/* Desktop: a fixed two-row grid - the route sets --jump-cols to half the
   manufacturer count (rounded up), so every column is equal width and the
   pills stretch to fill their cells instead of rag-wrapping. */
.credential-jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--jump-cols, 6), minmax(0, 1fr));
  gap: 8px 10px;
}
.credential-jump-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.credential-jump-list a:hover { border-color: var(--accent); color: var(--accent); }
.credential-jump-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

/* ≤760px (matches the header's mobile breakpoint): collapse the pill row
   into a tap-to-open dropdown so the sticky bar stays one line tall. */
@media (max-width: 760px) {
  .credential-jump { padding: 10px 0; }
  .credential-jump-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  .credential-jump-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .credential-jump-toggle[aria-expanded="true"] .credential-jump-caret { transform: rotate(180deg); }
  /* Panel drops over the content, anchored to the sticky bar. Two-column
     grid so the manufacturers split evenly instead of overfilling column
     one and orphaning the tail (flex column-wrap's behavior). */
  .credential-jump-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 0;
    padding: 6px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }
  .credential-jump.is-open .credential-jump-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .credential-jump-list a {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 11px var(--pad-x, 16px);
  }
}

/* Manufacturer group heading + section anchor - clear the sticky header +
   jump bar stack when an anchor is followed (heights measured by script.js,
   fallbacks cover the no-JS first paint) */
.credential-group {
  scroll-margin-top: calc(var(--rw-header-h, 64px) + var(--rw-jump-h, 64px) + 14px);
}
.credential-group + .credential-group { margin-top: 44px; }
.credential-group-title {
  margin: 0 0 18px;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ink);
}

/* Master list */
.credential-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.credential-card {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.credential-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.credential-card-logo {
  flex: 0 0 auto;
  margin: 0;
  width: 96px;
}
.credential-card-logo img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the box before the lazy image loads - otherwise every logo above
     an anchor target shifts the page after a Jump To link has already jumped */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.credential-card-body { min-width: 0; }
.credential-card-title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; }
.credential-card-title a { text-decoration: none; color: var(--ink); }
.credential-card-title a:hover { color: var(--accent); }
.credential-card-excerpt { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.6; }
.credential-card-more { margin: 0; }
.credential-card-more a { font-weight: 600; text-decoration: none; }

/* Detail page */
.credential-detail {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}
.credential-detail-logo {
  flex: 0 0 auto;
  margin: 0;
  width: 160px;
}
.credential-detail-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.credential-detail-body { min-width: 0; }
.credential-detail-body p { margin: 0 0 16px; line-height: 1.7; }
.credential-detail-body p:last-child { margin-bottom: 0; }
.credential-back { margin: 28px 0 0; }
.credential-back a { font-weight: 600; text-decoration: none; }

/* Related credentials - row of sibling-tier cards with excerpts */
.credential-related {
  margin: 52px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.credential-related-title {
  margin: 0 0 22px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}
.credential-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.credential-related-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.credential-related-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
}
.credential-related-card:hover .credential-related-name,
.credential-related-card:hover .credential-related-more {
  text-decoration: underline;
}
.credential-related-logo {
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.credential-related-logo img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.credential-related-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.credential-related-name {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.credential-related-excerpt {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.credential-related-more {
  display: block;
  margin-top: auto;
  padding-top: 4px;
  font-weight: 600;
  color: var(--accent);
}

/* Credential "by the numbers" strip - stat tiles + brand-accented bar chart.
   Each tile sets --cred-accent inline from the manufacturer's brand colour. */
.cred-stats {
  margin: 40px 0 8px;
}
.cred-stat-grid {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.cred-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
}
.cred-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cred-accent) 12%, transparent);
  color: var(--cred-accent);
  flex: 0 0 auto;
}
.cred-stat-icon .icon { width: 21px; height: 21px; }
.cred-stat-icon--badge {
  background: none;
  border: 0;
  padding: 0;
}
.cred-stat-icon--badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cred-stat-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cred-stat-number {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cred-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cred-stat-number--text {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.25;
}
.cred-stat-of {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0;
}
.cred-stat-label {
  font-size: 0.875rem;
  color: var(--ink-mute);
  line-height: 1.4;
}
.cred-stat-chart {
  margin: 20px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.cred-stat-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.cred-stat-chart-title .icon-inline { color: var(--ink-mute); }
.cred-stat-canvas-wrap {
  position: relative;
  width: 100%;
}

@media (max-width: 720px) {
  .credential-related-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .credential-card { flex-direction: column; gap: 14px; }
  .credential-card-logo { width: 80px; }
  .credential-detail { flex-direction: column; gap: 20px; }
  .credential-detail-logo { width: 130px; }
}

/* ============================================================
   Memberships pricing (/memberships) - .rw-pricing
   ============================================================ */
.rw-pricing { margin: 8px 0 48px; }

.rw-pricing-banner {
  margin: 0 0 36px;
  padding: 18px 24px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-lg);
  text-align: center;
}
.rw-pricing-banner p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--accent-ink);
}
.rw-pricing-banner strong { color: var(--ink); }

.rw-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.rw-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 30px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.rw-plan-featured {
  border-color: var(--accent);
  box-shadow: 0 12px 30px -16px rgba(19, 81, 184, 0.55);
}

.rw-plan-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  white-space: nowrap;
}

.rw-plan-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); text-align: center; }
.rw-plan-img { display: block; margin: 0 auto 12px; width: 84px; height: 84px; object-fit: contain; }

/* Shimmer badge - a gloss sweep clipped to the badge shape, every 7s */
.rw-plan-badge { position: relative; display: block; width: 84px; height: 84px; margin: 0 auto 12px; }
.rw-plan-badge .rw-plan-img { margin: 0; }
.rw-plan-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  -webkit-mask: var(--badge-img) center / contain no-repeat;
          mask: var(--badge-img) center / contain no-repeat;
  animation: rw-badge-shimmer 7s ease-in-out infinite;
}
@keyframes rw-badge-shimmer {
  0%   { background-position: 150% 0; }
  14%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-plan-badge::after { animation: none; }
}
.rw-plan-name {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.rw-plan-price { margin: 0 0 10px; }
.rw-plan-amount { font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1; }
.rw-plan-per { font-size: 0.95rem; color: var(--ink-mute); font-weight: 500; }
.rw-plan-tagline { margin: 0; font-size: 0.92rem; color: var(--ink-soft); font-weight: 600; }

.rw-plan-features {
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rw-plan-features li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.rw-plan-features li:first-child,
.rw-plan-features li.rw-plan-feature-strong {
  font-weight: 700;
  color: var(--ink);
}
.rw-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ok);
  /* white check */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Little plan-badge icon shown inline beside the "… Member badge" feature. */
.rw-plan-feature-badge {
  display: inline-block;
  width: 18px;
  height: 21px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  left: 3px;
  margin-left: 2px;
}
.rw-plan-note { color: var(--ink-mute); font-weight: 500; }

.rw-plan-cta {
  display: block;
  margin-top: auto;
  padding: 12px 18px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rw-plan-cta-solid {
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
}
.rw-plan-cta-solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.rw-plan-cta-ghost {
  color: var(--accent-ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.rw-plan-cta-ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
/* Logged-in: the member's current plan - greyed out, non-interactive. */
.rw-plan-cta-current {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-mute);
  background: var(--bg-soft, #f3f4f6);
  border: 1px solid var(--line);
  cursor: default;
}
.rw-plan-cta-current .icon-inline { width: 16px; height: 16px; }
/* Subtle ring around the card you're currently on. */
.rw-plan--current { border-color: var(--accent-soft-2); box-shadow: 0 0 0 2px var(--accent-soft) inset; }

@media (max-width: 900px) {
  .rw-pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 28px; }
}

/* ------------------------------------------------------------------------
   Signup flow (/signup) - .signup-*
   Two-step claim form reached from the /memberships CTAs. Reuses the
   .search-field + .ac-panel autocomplete shell for the company picker.
   --------------------------------------------------------------------- */
.signup-wrap { padding-bottom: 48px; }

.signup-form { display: flex; flex-direction: column; gap: 18px; }

.signup-step {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 26px 26px;
  background: #fff;
}

/* Completed step - whole card tints green (the inner pills stay white). */
.signup-step.is-complete {
  background: #f1faf3;
  border-color: #b9e2c4;
}

.signup-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.signup-step-n {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.9375rem;
}
/* Once a step is complete, swap its number for a green check disc. The digit
   stays in the DOM (transparent) so it's still announced to screen readers. */
.signup-step.is-complete .signup-step-n {
  background-color: #1a8a3c;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
.signup-step-title { margin: 0; font-size: 1.125rem; }
.signup-step-sub { margin: 2px 0 0; font-size: 0.875rem; color: var(--ink-mute); }

.signup-step-body { padding-left: 46px; }
@media (max-width: 560px) { .signup-step-body { padding-left: 0; } }

/* Step 1 - Select2 plan dropdown. Scoped to .page-signup (Select2 doesn't add
   our containerCssClass here) and sized to match the Step 2 search pill exactly:
   62px tall, 32px radius. */
.signup-plan-select { width: 100%; }
.page-signup .select2-container { width: 100% !important; }
.page-signup .select2-container--default .select2-selection--single {
  box-sizing: border-box;
  position: relative;
  height: 62px;
  display: flex;
  align-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 32px;
  padding: 0 20px;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}
.page-signup .select2-selection--single .select2-selection__rendered {
  line-height: 1.4; color: var(--ink); font-weight: 600; padding: 0 56px 0 0;
}
/* A plan is always selected, so this step is always "done" - show the same
   green check at the right edge, just left of the dropdown caret. */
.page-signup .select2-selection--single::after {
  content: "";
  position: absolute;
  top: 50%; right: 40px;
  width: 24px; height: 24px;
  transform: translateY(-50%);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231a8a3c'/%3E%3Cpath d='M7 12.5l3.4 3.4 6.6-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Plan option layout (icon + label) in both the pill and the dropdown rows. */
.signup-plan-opt { display: inline-flex; align-items: center; gap: 10px; }
/* Optical nudge: icon + label sit ~2px high in the closed selection pill. */
.page-signup .select2-selection__rendered .signup-plan-opt { position: relative; top: 2px; }
.signup-plan-opt-img { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }
.signup-plan-dropdown .select2-results__option {
  display: flex; align-items: center;
  font-size: 1.0625rem;
  padding-top: 11px; padding-bottom: 11px;
}
.page-signup .select2-selection--single .select2-selection__arrow {
  height: 62px; right: 14px;
}
.page-signup .select2-container--default.select2-container--focus .select2-selection--single,
.page-signup .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(19, 81, 184, 0.16);
}

/* Step 2 - company picker. One pill that never changes shape; a green check
   appears at its right edge once a company is locked in. */
.signup-company { position: relative; }
.signup-company-search { padding: 4px 16px 4px 18px; border-radius: 32px; }
.signup-company-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  padding: 12px 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.signup-company-search input[type="search"]::placeholder { color: var(--ink-mute); }
.signup-company-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Right-hand confirmation badge - solid green disc, white check (shared look
   with the Step 1 dropdown check). */
.signup-check {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #1a8a3c;
  color: #fff;
}
.signup-check[hidden] { display: none; }
.signup-check .icon { width: 15px; height: 15px; stroke-width: 3; }

/* Step 3 - login fields. */
.signup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .signup-fields { grid-template-columns: 1fr; } }
.signup-field { display: flex; flex-direction: column; gap: 6px; }
.signup-field > span { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.signup-field > span em { color: var(--accent); font-style: normal; }
.signup-field input {
  box-sizing: border-box;
  font: inherit;
  font-size: 1.0625rem;
  height: 62px;
  padding: 0 20px;
  border: 2px solid var(--line-strong);
  border-radius: 32px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}
.signup-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(19, 81, 184, 0.16);
}

/* Submit */
.signup-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.signup-submit {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit; font-size: 1rem; font-weight: 600;
  padding: 13px 26px;
  border-radius: 28px;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.signup-submit:hover { background: var(--accent-ink); }
.signup-submit:active { transform: translateY(1px); }
.signup-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.signup-submit .icon-submit { width: 18px; height: 18px; }
.signup-fineprint { font-size: 0.8125rem; color: var(--ink-mute); margin: 0; }

.signup-error {
  border: 1px solid #f2c2c2;
  background: #fdf3f3;
  color: #9a2727;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 0.9375rem;
}

/* Success state */
.signup-success {
  border: 1px solid var(--accent-soft-2);
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 30px 28px;
}
.signup-success-icon { display: inline-flex; color: #1a8a3c; margin-bottom: 8px; }
.signup-success-icon .icon { width: 40px; height: 40px; }
.signup-success h2 { margin: 0 0 8px; color: var(--accent-ink); }
.signup-success p { margin: 0 0 12px; color: var(--ink); }
.signup-success-links { margin-top: 6px; }

/* Step 4 - payment (NMI Collect.js). The card fields are secure iframes that
   NMI mounts into the #nmi-* containers; we style the container to look like
   our other inputs and let the iframe fill it. */
.signup-pay { display: flex; flex-direction: column; gap: 14px; }
.signup-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .signup-pay-row { grid-template-columns: 1fr; } }
.signup-field--card { width: 100%; }

/* Billing address (AVS) block inside Step 4. */
.signup-billing { display: flex; flex-direction: column; gap: 14px; }
.signup-billing-head {
  margin: 4px 0 -2px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-mute);
}
.signup-billing-head--card { margin-top: 8px; }
/* City / State / ZIP row - city gets the extra room; collapses on mobile. */
.signup-pay-row--addr { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 560px) { .signup-pay-row--addr { grid-template-columns: 1fr; } }
/* Match the <select> and the disabled country field to the text inputs. */
.signup-field select.signup-select {
  box-sizing: border-box;
  font: inherit;
  font-size: 1.0625rem;
  height: 62px;
  padding: 0 18px;
  border: 2px solid var(--line-strong);
  border-radius: 32px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.signup-field select.signup-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(19, 81, 184, 0.16);
}
.signup-field input:disabled {
  background: var(--bg-soft, #f5f6f8);
  color: var(--ink-mute);
  cursor: not-allowed;
}
.nmi-field {
  box-sizing: border-box;
  height: 62px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}
.nmi-field iframe { width: 100% !important; height: 100% !important; border: 0; background: transparent; }
/* Collect.js adds these state classes to the container. */
.nmi-field.CollectJSFocused { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(19, 81, 184, 0.16); }
.nmi-field.CollectJSInvalid { border-color: #d14343; }

.signup-pay-secure {
  display: flex; align-items: center; gap: 7px;
  margin: 12px 0 0;
  font-size: 0.8125rem; color: var(--ink-mute);
}
.signup-pay-secure .icon-inline { width: 15px; height: 15px; flex: 0 0 auto; }

.signup-pay-error {
  border: 1px solid #f2c2c2;
  background: #fdf3f3;
  color: #9a2727;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0 0;
  font-size: 0.9375rem;
}
.signup-pay-error[hidden] { display: none; }

.signup-turnstile { margin: 20px 0 4px; min-height: 65px; }

.signup-submit.is-loading { opacity: 0.7; cursor: progress; }

/* 3-D Secure step-up challenge. Hidden until the issuer prompts; then it dims the
   page and centers NMI's challenge iframe (which auto-resizes itself). */
.signup-3ds-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 31, 0.55);
}
.signup-3ds-overlay[hidden] { display: none; }
.signup-3ds-box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(20, 24, 31, 0.3);
  padding: 18px;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow: auto;
}
.signup-3ds-head { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.signup-3ds-mount { min-height: 360px; }
.signup-3ds-mount iframe { width: 100% !important; border: 0; }

/* ------------------------------------------------------------------------
   Member portal (/members) - .member-*
   --------------------------------------------------------------------- */
.member-auth-section { padding: 56px 0 72px; }
/* Auth pages (sign in, email-verify result) are short. Make the body a flex
   column and let the auth section grow so the footer is pinned to the bottom
   instead of leaving white space below it. Scoped via :has() so only pages
   that render .member-auth-section are affected. */
body:has(.member-auth-section) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(.member-auth-section) #main { flex: 1 0 auto; display: flex; flex-direction: column; }
body:has(.member-auth-section) .member-auth-section {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.member-auth-card {
  max-width: 440px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 32px 30px 30px;
}
.member-auth-title { margin: 0 0 4px; font-size: 1.5rem; }
.member-auth-sub { margin: 0 0 22px; color: var(--ink-mute); }
.member-auth-form { display: flex; flex-direction: column; gap: 16px; }
.member-auth-submit { justify-content: center; width: 100%; }
.member-auth-alt { margin: 20px 0 0; font-size: 0.875rem; color: var(--ink-mute); text-align: center; }

.member-dash-section { padding: 48px 0 72px; }
.member-dash-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.member-dash-title { margin: 0 0 4px; font-size: 1.6rem; }
.member-dash-sub { margin: 0; color: var(--ink-mute); }
.member-dash-signout { margin: 0; }
.member-dash-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface, #f7f8fa);
  padding: 48px 30px;
  text-align: center;
  color: var(--ink-mute);
}
.member-dash-empty p { margin: 0; }

/* ------------------------------------------------------------------------
   Member portal - nav, membership pill, verification gate
   --------------------------------------------------------------------- */
/* Sub-nav band below the public header. */
.member-nav { border-bottom: 1px solid var(--line); background: #fff; }
.member-nav-inner { display: flex; align-items: center; gap: 18px; min-height: 54px; flex-wrap: wrap; }
.member-nav-links { display: flex; gap: 4px; flex: 1 1 auto; }
@media (min-width: 761px) { .member-nav-links { margin-left: -13px; } }
.member-nav-link {
  padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 0.9375rem;
  color: var(--ink-soft);
}
.member-nav-link:hover { background: var(--accent-soft); color: var(--accent-ink); }
.member-nav-link.is-active { background: var(--accent-soft); color: var(--accent-ink); }
/* Vertical separator between the day-to-day tools and the account/support group. */
.member-nav-divider {
  align-self: center; width: 1px; height: 22px; margin: 0 8px;
  background: var(--line); flex: 0 0 auto;
}
@media (max-width: 760px) { .member-nav-divider { display: none; } }
.member-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: #d92d20; color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 18px; vertical-align: middle;
  position: relative; top: -1px;
}
.member-nav-right { display: flex; align-items: center; gap: 14px; }
.member-plan-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.875rem; color: var(--ink);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  padding: 5px 12px 5px 8px; border-radius: var(--radius);
}
.member-plan-pill-img { width: 22px; height: 22px; object-fit: contain; }
.member-nav-signout { margin: 0; }
.member-nav-signout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-soft);
  font: inherit; font-size: 0.875rem; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.member-nav-signout-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.member-nav-signout-btn .icon-inline { width: 15px; height: 15px; }

.member-dash-section { padding: 36px 0 72px; }
.member-flash {
  border-radius: 10px; padding: 12px 16px; margin: 0 0 22px; font-size: 0.9375rem;
}
.member-flash--success { border: 1px solid #b9e2c4; background: #f1faf3; color: #176a3c; }
.member-flash--error   { border: 1px solid #f2c2c2; background: #fdf3f3; color: #9a2727; }

/* Verification gate */
.member-verify-intro { text-align: center; margin: 8px 0 26px; }
.member-verify-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 6px;
}
.member-verify-badge .icon { width: 30px; height: 30px; }
.member-dash-title { margin: 0 0 6px; font-size: 1.6rem; }
.member-dash-sub { margin: 0; color: var(--ink-mute); }

/* White panel wrapping the whole verification gate. */
.member-verify-wrap {
  max-width: 860px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 40px 44px 44px;
}
@media (max-width: 600px) { .member-verify-wrap { padding: 26px 20px 30px; } }

/* Accordion - 3 stacked methods, one open at a time. */
.member-verify-accordion { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.member-verify-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.member-verify-item.is-open { border-color: var(--accent-soft-2); box-shadow: 0 1px 3px rgba(20, 24, 31, 0.06); }
.member-verify-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
}
.member-verify-trigger:hover { background: var(--surface, #f7f8fa); }
.member-verify-trigger-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; justify-content: space-between; }
.member-verify-trigger-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.member-verify-chevron { color: var(--ink-mute); display: inline-flex; transition: transform 160ms ease; flex: 0 0 auto; }
.member-verify-chevron .icon { width: 20px; height: 20px; }
.member-verify-item.is-open .member-verify-chevron { transform: rotate(180deg); }
.member-verify-panel[hidden] { display: none; }
.member-verify-panel-inner {
    padding: 22px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid #e8e8e8;
}
.member-speed {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.875rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.member-speed .icon-inline { width: 18px; height: 18px; }
.member-speed--fast { background: #e7f6ee; color: #157347; }   /* green - instant */
.member-speed--slow { background: #fbf3d6; color: #9a7b13; }   /* yellow - 3-5 days */
.member-verify-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; color: var(--ink-soft); }
.member-verify-steps code { font-size: 0.8125rem; word-break: break-all; background: var(--accent-soft); padding: 2px 5px; border-radius: 5px; }
.member-verify-dl { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.member-verify-dl .icon-inline { width: 16px; height: 16px; }
.member-verify-note { font-size: 0.875rem; color: var(--ink-mute); margin: 0; }
.member-verify-note--ok { display: flex; align-items: center; gap: 7px; color: #176a3c; background: #f1faf3; border: 1px solid #b9e2c4; border-radius: 8px; padding: 9px 12px; }
.member-verify-note--ok .icon-inline { width: 16px; height: 16px; flex: 0 0 auto; }
.member-verify-action { margin: 0; }
.member-verify-submit { width: 100%; justify-content: center; }
.member-verify-submit .icon-inline { width: 16px; height: 16px; }
.signup-submit--ghost { background: #fff; color: var(--accent-ink); border: 1px solid var(--line-strong); }
.signup-submit--ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Email prefix field */
.member-email-form { display: flex; flex-direction: column; gap: 12px; }
.member-email-row {
  display: flex; align-items: stretch;
  border: 2px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff;
}
.member-email-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19,81,184,0.16); }
.member-email-prefix { flex: 1 1 auto; min-width: 0; border: 0; outline: none; font: inherit; padding: 11px 12px; }
.member-email-suffix { display: flex; align-items: center; padding: 0 12px; background: var(--bg-soft); color: var(--ink-mute); font-weight: 600; font-size: 0.9375rem; border-left: 1px solid var(--line); }

/* Verified dashboard / detail lists */
.member-verified-tag { display: inline-flex; align-items: center; gap: 5px; color: #176a3c; font-weight: 700; }
.member-verified-tag .icon-inline { width: 16px; height: 16px; background: radial-gradient(circle, #fff 0 48%, transparent 49%); }
.member-detail { display: grid; gap: 0; margin: 18px 0 0; max-width: 560px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.member-detail > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.member-detail > div:last-child { border-bottom: 0; }
.member-detail dt { margin: 0; color: var(--ink-mute); font-size: 0.875rem; font-weight: 600; }
.member-detail dd { margin: 0; color: var(--ink); }
.member-verify-result { text-align: center; }
.member-verify-result .signup-success-icon { display: inline-flex; color: #1a8a3c; margin-bottom: 6px; }
.member-verify-result .signup-success-icon .icon { width: 40px; height: 40px; }

/* Subscription card */
.member-sub-card { max-width: 560px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 24px 24px 22px; }
.member-sub-plan { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.member-sub-plan-img { width: 40px; height: 40px; object-fit: contain; }
.member-sub-plan-name { margin: 0; font-size: 1.25rem; }
.member-sub-plan-price { margin: 2px 0 0; color: var(--ink-mute); }
.member-sub-card .member-detail { border: 0; border-radius: 0; }
.member-sub-card .member-detail > div { padding-left: 0; padding-right: 0; }
.member-sub-note { margin: 16px 0 0; font-size: 0.875rem; color: var(--ink-mute); }

.member-section-title { margin: 26px 0 4px; font-size: 1.0625rem; color: var(--ink-soft); }
.member-section-title:first-of-type { margin-top: 18px; }

/* My Account - two-column card layout */
.member-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 18px;
}
.member-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px 28px;
  box-shadow: 0 1px 3px rgba(20, 24, 31, 0.05);
}
/* Update-info's first content card is a plain .member-card (30px top margin),
   whereas Reviews/Leads pull their first card to 18px via .member-leads-emails
   / -list. This class (set on the first card of every Update-info branch) matches
   that 18px so the gap under the page subtext lines up with the other member
   pages; later cards keep the 30px .member-card stack. */
.member-update-first { margin-top: 18px; }
.member-card-title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
/* Detail list flush inside a card (card supplies the border/radius/bg). */
.member-detail--flush {
  margin-top: 8px;
  max-width: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.member-detail--flush > div { padding-left: 0; padding-right: 0; }
.member-detail--flush > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 760px) {
  .member-account-grid { grid-template-columns: 1fr; }
}

/* Change-plan confirmation (/members/change-plan) */
.member-account--narrow { max-width: 620px; }
.change-plan-card { padding: 28px 30px 30px; }
.change-plan-move {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 4px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.change-plan-side-label {
  display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-mute); margin-bottom: 8px;
}
.change-plan-plan { display: flex; align-items: center; gap: 10px; }
.change-plan-plan img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.change-plan-plan strong { display: block; font-size: 1.0625rem; color: var(--ink); }
.change-plan-plan span { display: block; font-size: 0.875rem; color: var(--ink-mute); }
.change-plan-arrow { color: var(--ink-mute); display: inline-flex; }
.change-plan-arrow .icon { width: 22px; height: 22px; }
.change-plan-summary { margin-top: 0; }
.change-plan-summary > div { grid-template-columns: 140px 1fr; align-items: baseline; }
.change-plan-muted { color: var(--ink-mute); font-weight: 400; font-size: 0.9375rem; }
.change-plan-pay { margin-top: 22px; }
.change-plan-pay-title { margin: 0 0 12px; font-size: 1.0625rem; color: var(--ink-soft); }
.change-plan-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.change-plan-submit { flex: 0 0 auto; }
.change-plan-cancel { font-weight: 600; color: var(--ink-mute); }
.change-plan-cancel:hover { color: var(--accent-ink); }
@media (max-width: 520px) {
  .change-plan-move { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .change-plan-arrow { transform: rotate(90deg); justify-self: start; }
  .change-plan-summary > div { grid-template-columns: 1fr; gap: 2px; }
  .change-plan-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* Full-width card: spans both grid columns. */
.member-card--full { grid-column: 1 / -1; }

/* Account forms (change password) inside a card. */
.member-account-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.member-account-submit { margin-top: 4px; align-self: flex-start; }

/* Danger card + stacked action rows (sign out / close account). */
.member-card--danger { border-color: #f0cccc; }
.member-action-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.member-action-row:first-of-type { border-top: 0; }
.member-action-row strong { font-size: 0.9375rem; color: var(--ink); }
.member-action-row--danger strong { color: #9a2727; }

.member-btn-secondary, .member-btn-danger {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 9px 16px; border-radius: 10px; font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; background: #fff;
}
.member-btn-secondary { border: 1px solid var(--line); color: var(--ink); }
.member-btn-secondary:hover { background: var(--surface, #f6f7f9); }
.member-btn-danger { border: 1px solid #d98b8b; color: #9a2727; }
.member-btn-danger:hover { background: #fdf3f3; }
@media (max-width: 480px) {
  .member-action-row { flex-direction: column; align-items: flex-start; }
}
.member-btn-danger { text-decoration: none; }

/* Loyalty-discount tag on the account billing line. */
.member-discount-tag {
  display: inline-block; margin-left: 6px; font-size: 0.75rem; font-weight: 700;
  color: #157347; background: #e7f6ee; border-radius: 999px; padding: 2px 9px;
  vertical-align: middle;
}

/* ------------------------------------------------------------------------
   Cancellation funnel (/members/cancel) - confirm step + save offer
   --------------------------------------------------------------------- */
.member-account--narrow .cancel-confirm,
.member-account--narrow .cancel-offer { max-width: 540px; margin: 0 auto; }

/* Step 1 - permanent-deletion confirmation */
.cancel-confirm { padding: 30px 32px 28px; }
.cancel-confirm-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cancel-warn-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: #fdecec; color: #c0392b;
}
.cancel-warn-badge .icon { width: 27px; height: 27px; }
.cancel-confirm-title { margin: 0; font-size: 1.25rem; color: var(--ink); line-height: 1.2; }
.cancel-confirm-intro { margin: 3px 0 0; color: var(--ink-mute); font-size: 0.9375rem; }
.cancel-confirm-list {
  list-style: none; margin: 0 0 20px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: #fcf4f4; border: 1px solid #f3d6d6; border-radius: 12px;
  color: var(--ink-soft); font-size: 0.9375rem;
}
.cancel-confirm-list li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.45; }
.cancel-confirm-list .icon {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  color: #c0392b; stroke-width: 2.5;
}
.cancel-confirm-list strong { color: #9a2727; font-weight: 700; }
.cancel-confirm-fine {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--ink-mute); font-size: 0.875rem; margin: 0 0 24px; line-height: 1.5;
}
.cancel-confirm-fine .icon-inline { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.cancel-confirm-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.cancel-keep {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.9375rem; color: var(--ink-soft);
}
.cancel-keep:hover { color: var(--accent-ink); }
.cancel-keep .icon-inline { width: 16px; height: 16px; }
.cancel-delete {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9375rem;
  color: #fff; background: #c0392b; padding: 12px 22px; border-radius: 10px;
  transition: background-color 0.15s ease;
}
.cancel-delete:hover { background: #a52f22; }
.cancel-delete .icon-inline { width: 17px; height: 17px; }
@media (max-width: 520px) {
  .cancel-confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .cancel-delete { justify-content: center; }
  .cancel-keep { justify-content: center; }
}

/* Step 2 - the save offer */
.cancel-offer { text-align: center; padding: 32px 32px 30px; }
.cancel-offer-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 12px;
}
.cancel-offer-badge .icon { width: 32px; height: 32px; }
.cancel-offer-lead { font-size: 1.0625rem; color: var(--ink); margin: 0 auto 20px; max-width: 440px; line-height: 1.5; }
.cancel-offer-price {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 auto 12px; padding: 18px 24px; max-width: 360px;
  background: #f1faf4; border: 1px solid #c6ead4; border-radius: 14px;
}
.cancel-offer-old { font-size: 1.25rem; color: var(--ink-mute); text-decoration: line-through; }
.cancel-offer-arrow { color: #157347; display: inline-flex; }
.cancel-offer-arrow .icon { width: 22px; height: 22px; }
.cancel-offer-new { font-size: 2rem; font-weight: 800; color: #157347; line-height: 1; }
.cancel-offer-per { font-size: 1rem; font-weight: 600; color: var(--ink-mute); }
.cancel-offer-save { color: var(--ink-soft); font-size: 0.9375rem; margin: 0 auto 26px; max-width: 440px; line-height: 1.5; }
.cancel-offer-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cancel-offer-accept { gap: 8px; padding: 14px 28px; font-size: 1rem; width: 100%; justify-content: center; max-width: 360px; }
.cancel-offer-accept .icon-submit { width: 18px; height: 18px; }
.cancel-offer-decline {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-mute);
}
.cancel-offer-decline:hover { color: #9a2727; text-decoration: underline; }

/* Sticky footer - body fills the viewport and #main grows, so the footer never
   floats above the bottom on short pages. Flexbox handles the variable-height
   member nav band automatically (no JS measuring / resize listeners needed). */
body { min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* Document upload field (verification method 3). */
.member-upload-form { display: flex; flex-direction: column; gap: 12px; }
.member-upload {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: 14px;
  padding: 26px 20px; cursor: pointer; background: var(--bg-soft, #f7f8fa);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.member-upload:hover { border-color: var(--accent); background: var(--accent-soft); }
.member-upload-icon { display: inline-flex; color: var(--accent); }
.member-upload-icon .icon { width: 28px; height: 28px; }
.member-upload-text { font-weight: 700; color: var(--ink); }
.member-upload-hint { font-size: 0.8125rem; color: var(--ink-mute); }
.member-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.member-upload-chosen { margin: 0; font-size: 0.875rem; color: var(--ink-soft); word-break: break-word; }
.member-upload-chosen[hidden] { display: none; }
.member-doc-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.member-doc-list li { display: flex; align-items: center; gap: 7px; font-size: 0.875rem; color: var(--ink-soft); }
.member-doc-list .icon-inline { width: 16px; height: 16px; color: #176a3c; flex: 0 0 auto; }

/* Admin: attached-document links in the Members table. */
.member-doc-links { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.member-doc-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.admin-doc-icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* Verification rejection banner (member dashboard). */
.member-verify-reject {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #f2c2c2; background: #fdf3f3; color: #9a2727;
  border-radius: 12px; padding: 16px 18px; margin: 0 0 18px;
}
.member-verify-reject-icon { display: inline-flex; color: #d14343; flex: 0 0 auto; }
.member-verify-reject-icon .icon { width: 22px; height: 22px; }
.member-verify-reject strong { color: #7d1f1f; }
.member-verify-reject p { margin: 4px 0 0; color: #9a2727; }
.member-verify-reject-cta { font-size: 0.875rem; }
.member-verify-reject-cta strong { color: #7d1f1f; }

/* ── Member dashboard: Analytics ─────────────────────────────────────────
   First section of the verified member dashboard. Three Chart.js charts +
   summary tiles. Free accounts get the same layout with sample data, blurred,
   behind an "Upgrade to Unlock" overlay. */
.member-analytics { margin: 0 0 28px; }
.member-analytics-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.member-analytics-title { font-size: 1.35rem; margin: 0 0 2px; color: var(--ink); }
.member-analytics-sub { margin: 0; color: var(--ink-mute); font-size: 0.92rem; }
.member-analytics-sub a { color: var(--accent); font-weight: 600; }
.member-analytics-flag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; color: var(--ok);
  background: #eaf6ef; border: 1px solid #cde9d8; border-radius: 999px;
  padding: 5px 11px;
}
.member-analytics-flag--sample { color: var(--ink-mute); background: var(--bg-soft); border-color: var(--line); }

/* Summary tiles */
.member-stat-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px;
}
.member-stat-tile {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.member-stat-label {
  font-size: 0.8rem; color: var(--ink-mute); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.member-stat-period {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--bg-soft); border-radius: 5px; padding: 1px 6px;
}
.member-stat-value { font-size: 1.85rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.member-stat-value[data-blur="1"] { filter: blur(7px); user-select: none; }
.member-stat-hint { font-size: 0.78rem; color: var(--ink-faint); }

.member-analytics-empty {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: 0.88rem; color: var(--ink-soft);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius); padding: 11px 14px;
}
.member-analytics-empty .icon { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* Chart grid: two side-by-side line charts, full-width bar chart below */
.member-chart-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.member-chart-box {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.member-chart-box--wide { grid-column: 1 / -1; }
.member-chart-head { margin-bottom: 10px; }
.member-chart-title { font-size: 0.98rem; margin: 0; color: var(--ink-soft); }
.member-chart-canvas-wrap { position: relative; height: 220px; }
.member-chart-box--wide .member-chart-canvas-wrap { height: 240px; }
.member-chart-canvas-wrap canvas { max-width: 100%; }

/* Locked (Free) overlay: frost the chart, drop an Upgrade button on top */
.member-analytics.is-locked .member-chart-canvas-wrap canvas { filter: blur(5px); opacity: 0.75; }
.member-chart-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 28px 24px;
  background: radial-gradient(120% 120% at 50% 45%, rgba(255,255,255,0.97) 55%, rgba(255,255,255,0.78) 100%);
  border-radius: var(--radius-lg);
}
.member-chart-lock-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-ink);
}
.member-chart-lock-icon .icon { width: 26px; height: 26px; }
.member-chart-lock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; padding: 12px 24px; border-radius: 999px;
  box-shadow: 0 2px 12px rgba(19, 81, 184, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
.member-chart-lock-btn:hover { background: var(--accent-ink); transform: translateY(-1px); }

@media (max-width: 720px) {
  .member-stat-tiles { grid-template-columns: 1fr; }
  .member-chart-grid { grid-template-columns: 1fr; }
  .member-chart-box--wide { grid-column: auto; }
  .member-analytics-head { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------------------
   Traffic by City: per-service-area breakdown (Featured-gated)
   --------------------------------------------------------------------- */
.member-citytraffic { margin: 0 0 28px; }
.member-citytraffic-box { margin: 0; }
/* Horizontal bar chart sizes its own height inline (one row per city), so the
   shared fixed-height .member-chart-canvas-wrap rule is relaxed here. */
.member-citytraffic-canvas-wrap { height: auto; }
/* Locked (non-Featured) overlay: frost the sample chart, drop the gate on top. */
.member-citytraffic.is-locked .member-citytraffic-canvas-wrap canvas { filter: blur(5px); opacity: 0.75; }
.member-citytraffic-empty {
  padding: 18px;
}
.member-citytraffic-empty p {
  margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55;
  display: flex; align-items: flex-start; gap: 8px;
}
.member-citytraffic-empty .icon { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }
.member-citytraffic-empty a { color: var(--accent); font-weight: 600; }
/* Richer lock card copy (title + sub) layered over the frosted chart. */
.member-chart-lock-title {
  margin: 0; font-size: 1.18rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.member-chart-lock-sub {
  margin: 0 auto; max-width: 430px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);
}

/* ------------------------------------------------------------------------
   Paid-member company page: badge, member label, Get-a-Quote CTA + modal
   --------------------------------------------------------------------- */
.company-member-badge { flex: 0 0 auto; display: inline-flex; }
.company-member-badge img { height: 35px; width: auto; object-fit: contain; position: relative; top: 3px; }
.company-membership--member {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.company-membership--member strong { color: var(--accent-ink); font-weight: 700; }

/* Member CTA is a solid accent button (vs the ghost "Not yet claimed"). */
/* 12px radius: taller than the white claim CTA (10px) and the nav pill (8px),
   so it steps up once more to keep the rounding visually equal. */
.company-quote-cta { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; padding: 14px 26px; font-size: var(--fs-body); gap: 9px; border-radius: 12px; }
.company-quote-cta .company-claim-cta-icon { width: 20px; height: 20px; color: #fff; }
.company-quote-cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; box-shadow: 0 1px 3px rgba(15,23,42,0.12); }

/* Verified (non-Featured) members get a static badge, not a clickable CTA. Mirrors
   the Public Records Check "ok" chip: white card, soft line border + shadow,
   accent-ink text, green check icon. */
.company-verified-cta {
  color: var(--accent-ink);
  border-color: var(--line);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03);
  cursor: default;
}
.company-verified-cta .company-claim-cta-icon { width: 22px; height: 22px; stroke-width: 2.2; color: var(--ok); }
.company-verified-cta:hover { color: var(--accent-ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(20, 24, 31, 0.03); }

.company-lead-flash { margin: 18px 0 0; }

/* Quote modal */
.quote-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.quote-modal[hidden] { display: none; }
.quote-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
.quote-modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 640px; margin: auto 0;
  background: #fff; border-radius: 16px; padding: 28px 30px 30px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
.quote-modal-x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--bg-soft, #f3f5f8); color: var(--ink-mute); border-radius: 8px; cursor: pointer;
}
.quote-modal-x:hover { background: var(--line); color: var(--ink); }
.quote-modal-x .icon { width: 18px; height: 18px; }
.quote-modal-title { margin: 0 6px 4px 0; font-size: 1.4rem; }
.quote-modal-sub { margin: 0 0 18px; color: var(--ink-mute); }

/* ------------------------------------------------------------------------
   Member Leads page (/members/leads)
   --------------------------------------------------------------------- */
.member-leads-emails { margin-top: 18px; }
.member-card-sub { margin: 0 0 12px; color: var(--ink-mute); font-size: 0.9375rem; }
.member-leads-email-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.member-leads-textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9375rem;
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; resize: vertical;
}
.member-leads-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19,81,184,0.16); }
.member-leads-save { align-self: flex-start; }
.member-leads-save .icon-inline { width: 15px; height: 15px; }

.member-leads-list { margin-top: 20px; }
.member-leads-count {
  display: inline-block; font-size: 0.8125rem; font-weight: 700; color: var(--ink-mute);
  background: var(--bg-soft, #f3f5f8); border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: middle;
}
.member-leads-empty { margin: 8px 0 0; color: var(--ink-mute); }
.member-leads-table-wrap { overflow-x: auto; margin-top: 12px; }
.member-leads-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.member-leads-table th, .member-leads-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.member-leads-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); font-weight: 700; }
.member-leads-table tr:last-child td { border-bottom: 0; }
.member-leads-muted { color: var(--ink-mute); white-space: nowrap; }
.member-leads-source { white-space: nowrap; }
.member-leads-details { max-width: 320px; color: var(--ink-soft); }

/* Leads "Status" column: a labelled pill - a green "New" with a live dot, a
   muted grey "Archived" with a check once the member has dealt with it. */
.member-leads-status, .member-leads-actions { white-space: nowrap; width: 1%; }
.lead-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.45; white-space: nowrap;
}
.lead-status .icon { width: 13px; height: 13px; }
.lead-status--new { background: #e7f6ee; color: #157a43; }
.lead-status--new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lead-status--archived { background: #eef1f4; color: var(--ink-mute); }

/* Leads "Actions" column: archive / restore icon buttons. */
.lead-action-form { margin: 0; display: inline-flex; }
.lead-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  transition: background .15s, border-color .15s, color .15s;
}
.lead-action-btn .icon { width: 16px; height: 16px; }
.lead-action-btn--archive:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.lead-action-btn--restore:hover { background: #e8f5ee; border-color: var(--ok); color: var(--ok); }

/* Archived rows read back a touch, but their action stays fully legible. */
.member-leads-table tr.is-archived td { opacity: 0.62; }
.member-leads-table tr.is-archived td.member-leads-actions { opacity: 1; }

/* Verified member dashboard "Welcome back" header. */
.member-welcome {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 28px; margin-bottom: 24px;
}
.member-welcome-logo {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 14px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft, #f3f5f8); border: 1px solid var(--line);
}
.member-welcome-logo img { width: 100%; height: 100%; object-fit: cover; }
.member-welcome-logo--empty { color: var(--ink-faint); }
.member-welcome-logo--empty .icon { width: 34px; height: 34px; }
.member-welcome-body { flex: 1 1 auto; min-width: 0; }
.member-welcome-name {
  margin: 2px 0 6px; font-size: 1.6rem; line-height: 1.15;
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.member-welcome-plan { width: 30px; height: 30px; object-fit: contain; }
.member-welcome-meta {
  margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.9375rem; color: var(--ink-soft);
}
.member-welcome-dot { color: var(--ink-faint); }
.member-welcome-link {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600; color: var(--accent-ink); white-space: nowrap;
}
.member-welcome-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.member-welcome-link .icon-inline { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .member-welcome { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
  .member-welcome-name { font-size: 1.35rem; }
  .member-welcome-link { margin-left: 0; order: 3; flex-basis: 100%; justify-content: center; }
}

/* ── Member Leads: locked (Free) state ───────────────────────────────────
   Free members see the Leads page with a blurred sample table behind an
   "Upgrade to Unlock" overlay - same pattern as the dashboard analytics. */
.member-leads-locknote {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 0;
  font-size: 0.85rem; color: var(--ink-mute);
}
.member-leads-locknote .icon { width: 15px; height: 15px; }

.member-leads-lockwrap { position: relative; min-height: 300px; }
.member-leads-sample {
  filter: blur(5px); opacity: 0.7; pointer-events: none; user-select: none;
}
.member-leads-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 14px; padding: 40px 28px;
  /* Frost the blurred sample beneath, fading in from the edges. */
  background: radial-gradient(120% 120% at 50% 45%, rgba(255,255,255,0.97) 55%, rgba(255,255,255,0.78) 100%);
  border-radius: var(--radius-lg);
}
.member-leads-lock-icon {
  flex: none;   /* never let the flex column compress it into an oval */
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-ink);
}
.member-leads-lock-icon .icon { width: 26px; height: 26px; }
.member-leads-lock-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.member-leads-lock-sub { margin: 0 auto; max-width: 420px; font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }
.member-leads-lock-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; padding: 12px 24px; border-radius: 999px;
  box-shadow: 0 2px 12px rgba(19, 81, 184, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
.member-leads-lock-btn:hover { background: var(--accent-ink); transform: translateY(-1px); }

/* ------------------------------------------------------------------------
   Member Service Areas (/members/service-areas)
   --------------------------------------------------------------------- */
.member-areas { margin-top: 18px; }
.member-areas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.member-areas-count { font-size: 0.875rem; font-weight: 700; color: var(--ink-mute); }
.member-areas-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; min-height: 22px; }
.member-area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius); padding: 5px 6px 5px 10px; font-size: 0.9375rem; font-weight: 600;
}
.member-area-chip-pin { display: inline-flex; align-items: center; color: var(--accent); }
.member-area-chip-pin .icon { width: 15px; height: 15px; }
.member-area-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; background: rgba(19,81,184,0.12); color: var(--accent-ink);
  border-radius: 5px; cursor: pointer; font-size: 16px; line-height: 1;
}
.member-area-chip-x:hover { background: var(--accent); color: #fff; }
.member-area-chip-x .icon { width: 14px; height: 14px; }
.member-areas-empty { color: var(--ink-mute); font-size: 0.9375rem; }
.member-areas-empty[hidden] { display: none; }

.member-areas-search { position: relative; max-width: 460px; padding: 4px 16px 4px 18px; border-radius: var(--radius); }
.member-areas-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem;
  color: var(--ink); padding: 10px 4px; outline: none; -webkit-appearance: none; appearance: none;
}
.member-areas-search input:disabled { color: var(--ink-faint); cursor: not-allowed; }
/* The picker uses <button> items (homepage uses <a>); reset button chrome. */
.member-areas-search .ac-item { width: 100%; border: 0; background: transparent; box-shadow: none; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.member-areas-search .ac-item:hover:not([disabled]), .member-areas-search .ac-item.is-active { background: var(--surface, #f3f5f8); }
.member-areas-search .ac-item.is-disabled { opacity: 0.45; cursor: default; }
.member-areas-limit { margin: 8px 0 0; font-size: 0.875rem; color: #9a7b13; }
.member-areas-limit[hidden] { display: none; }

.member-areas-suggest { margin-top: 18px; }
.member-areas-suggest-label { margin: 0 0 8px; font-size: 0.875rem; color: var(--ink-mute); font-weight: 600; }
.member-areas-suggest-list { display: flex; flex-wrap: wrap; gap: 8px; }
.member-area-suggest-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 6px 12px; font: inherit; font-size: 0.9375rem; color: var(--ink-soft); cursor: pointer;
}
.member-area-suggest-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.member-area-suggest-btn[hidden] { display: none; }
.member-area-suggest-btn .icon-inline { width: 15px; height: 15px; }
.member-areas-actions { margin-top: 22px; }

/* ── Member dashboard: Recent Leads widget ───────────────────────────────
   Latest 5 leads with a "See all" link (Featured), or the locked sample
   preview + upgrade overlay (everyone else). Reuses the .member-leads-*
   table + lock styles from the Leads page. */
.member-recent-leads { margin: 0 0 28px; padding-top: 0; }
.member-recent-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.member-recent-seeall {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.member-recent-seeall:hover { color: var(--accent-ink); }
.member-recent-seeall .icon { width: 15px; height: 15px; }
.member-recent-leads .member-leads-list { margin: 0; }

/* Member dashboard - Recent Reviews widget.
   Latest few approved reviews with a "See all" link to the Reviews tab. Reuses
   the .member-recent-head + "See all" link styles from the leads widget. */
.member-recent-reviews { margin: 0 0 28px; padding-top: 0; }
.member-recent-reviews-card { margin: 0; }
.member-dash-review-list { list-style: none; margin: 0; padding: 0; }
.member-dash-review { padding: 14px 0; border-top: 1px solid var(--line); }
.member-dash-review:first-child { padding-top: 0; border-top: 0; }
.member-dash-review:last-child { padding-bottom: 0; }
.member-dash-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.member-dash-review-name { font-weight: 700; color: var(--ink); }
.member-dash-review-date { color: var(--ink-mute); font-size: 0.875rem; }
.member-dash-review-body {
  margin: 8px 0 0; color: var(--ink); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------------------------------ *\
   Legal / editorial documents (Terms, Privacy, Methodology)
   routes/static.php. Two columns: a sticky Contents sidebar (~30%) and the
   document (~70%). Each section is a rounded card; numbers via CSS counters.
   One type system: --ink headings/strong, --ink-soft body, accent on links
   + number badges. Outer width handled by the page .container.
\* ------------------------------------------------------------------ */
.legal-layout {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 44px;
  align-items: start;
  padding: clamp(16px, 3vw, 28px) 0 64px;
}

/* Sticky Contents sidebar */
.legal-sidebar { position: sticky; top: 80px; }
.legal-sidebar .legal-toc {
  margin: 0;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.legal-sidebar .legal-toc-list { grid-template-columns: 1fr; }

.legal-doc {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  counter-reset: legalsec;
}
.legal-doc p { margin: 0 0 1.05em; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc strong { color: var(--ink); font-weight: 650; }
.legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--accent-ink); }

.legal-updated {
  margin: 0 0 1.6em !important;
  font-size: 0.875rem;
  color: var(--ink-mute);
}
.legal-intro { color: var(--ink-soft); }

/* Table of contents - boxed jump list with matching numbers */
.legal-toc {
  margin: 1.8em 0 2em;
  padding: 22px 26px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  counter-reset: legaltoc;
}
.legal-toc-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.legal-toc-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 32px;
}
.legal-toc-list li { margin: 0; counter-increment: legaltoc; }
.legal-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
}
.legal-toc-list a::before {
  content: counter(legaltoc);
  flex: 0 0 1.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--ink-faint);
}
.legal-toc-list a:hover { color: var(--accent); }
.legal-toc-list a:hover::before { color: var(--accent); }
/* Active section while scrolling (set by scrollspy in script.js) */
.legal-toc-list a.is-active { color: var(--ink); font-weight: 650; }
.legal-toc-list a.is-active::before { color: var(--ink); }

/* Sections - each a rounded card with even spacing */
.legal-section {
  counter-increment: legalsec;
  margin-top: 16px;
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  scroll-margin-top: 84px;
}
.legal-section:first-of-type { margin-top: 0; }
.legal-section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0.8em;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.legal-section > h2::before {
  content: counter(legalsec);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85em;
  height: 1.85em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
/* Sub-headings within a section (Privacy "Information you give us directly") */
.legal-subhead {
  margin: 1.6em 0 0.6em;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}
.legal-section > .legal-subhead:first-of-type { margin-top: 0; }

/* Definition list */
.legal-defs { margin: 0; }
.legal-defs dt {
  font-weight: 650;
  color: var(--ink);
  margin-top: 1em;
}
.legal-defs dt:first-child { margin-top: 0; }
.legal-defs dd { margin: 2px 0 0; }

/* Bulleted lists */
.legal-list {
  margin: 0 0 1.05em;
  padding: 0;
  list-style: none;
}
.legal-list li {
  position: relative;
  margin: 0 0 0.6em;
  padding-left: 20px;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* Single emphasized statement - quiet left-rule pull quote, same type colors */
.legal-emphasis {
  margin: 1.3em 0 0 !important;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-weight: 650;
}

/* Contact block */
.legal-contact {
  margin: 0 0 1.1em;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink);
}
.legal-contact-list { margin: 0; padding: 0; list-style: none; }
.legal-contact-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}
.legal-contact-label {
  flex: 0 0 130px;
  font-weight: 600;
  color: var(--ink);
}

/* Stack the sidebar above the document before it gets cramped */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 24px; }
  .legal-sidebar { position: static; top: auto; }
  .legal-sidebar .legal-toc { max-height: none; overflow: visible; }
  .legal-sidebar .legal-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .legal-toc-list,
  .legal-sidebar .legal-toc-list { grid-template-columns: 1fr; gap: 0; }
  .legal-section > h2 { font-size: 1.1rem; }
  .legal-contact-list li { flex-direction: column; gap: 1px; }
  .legal-contact-label { flex-basis: auto; }
}

/* ============================================================
   State Licensing page (/state-licensing)
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* One shared body text size across the whole page so nothing reads "off". */
.sl-page { --sl-text: 1rem; padding: 0 0 24px; }
/* Trim the global `section { padding }` that otherwise stacks ~40px on top of
   the hero's own padding for a cavernous top gap - but keep enough room to give
   the "Rules change" callout some air above it (scoped to this page). */
section:has(> .container > .sl-page) { padding-top: 24px; }

/* Rules-change callout (reuses .nws-alert) */
.sl-callout { margin-bottom: 24px; }
.sl-callout .sl-callout-text {
  margin: 5px 0 0; font-size: var(--sl-text); line-height: 1.6; color: var(--ink-soft);
}

/* Intro lede - same size as the callout body, just a touch stronger in tone. */
.sl-lede { margin-bottom: 18px; }
.sl-lede .sl-lede-text { margin: 0; font-size: var(--sl-text); line-height: 1.65; color: var(--ink-soft); }

/* Divider between the situation cards and the state table. */
.sl-divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.sl-divider + .sl-section { margin-top: 0; }

/* Section rhythm + heading with icon */
.sl-section { margin-top: 30px; }
.sl-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.sl-section-icon { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.sl-h2 { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.sl-note { margin: 14px 0 0; font-size: var(--sl-text); line-height: 1.6; color: var(--ink-mute); }
.sl-lead-p { margin: 0 0 14px; font-size: var(--sl-text); line-height: 1.6; color: var(--ink-soft); }

/* Three situation cards - icon inline with the title */
.sl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sl-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 20px; }
.sl-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.sl-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-ink);
}
.sl-card-icon .icon { width: 19px; height: 19px; }
.sl-card-title { margin: 0; font-size: 1.0625rem; font-weight: 650; color: var(--ink); }
.sl-card-body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

/* Find-your-state panel */
.sl-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.sl-filter {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.sl-search { position: relative; flex: 1 1 240px; min-width: 200px; display: block; }
.sl-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none; }
.sl-search input {
  width: 100%; padding: 11px 14px 11px 38px; font-size: 0.95rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.sl-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(19,81,184,0.15); }

.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.sl-chip-icon { width: 15px; height: 15px; }
.sl-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.sl-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sl-chip-n { font-size: 0.78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,0.06); color: inherit; }
.sl-chip.is-active .sl-chip-n { background: rgba(255,255,255,0.22); }
.sl-chip--license.is-active      { background: #1f7a46; border-color: #1f7a46; }
.sl-chip--registration.is-active { background: #b26a12; border-color: #b26a12; }
.sl-chip--none.is-active         { background: #6b7280; border-color: #6b7280; }

/* Sortable state table (reuses .data-table; the panel supplies the frame) */
.sl-panel .table-scroll { border: 0; border-radius: 0; background: transparent; }
.sl-states-table { width: 100%; }
.sl-states-table th.sl-sortable { padding: 0; }
.sl-sort-btn {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  padding: 14px 18px; font: inherit; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
  background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap;
}
.sl-sort-btn:hover { color: var(--ink); }
.sl-sort-icon { width: 14px; height: 14px; color: var(--ink-faint); flex: 0 0 auto; }
.sl-states-table th.is-sorted .sl-sort-btn,
.sl-states-table th.is-sorted .sl-sort-icon { color: var(--accent); }
.sl-states-table thead th { white-space: nowrap; }
.sl-states-table th.sl-notes-col { width: 32%; padding: 14px 18px; }

/* Equal-height rows: a fixed row height with vertically-centred cells; the two
   wrapping columns (Agency, Notes) are clamped to 2 lines so every row is the
   same height. A clamped cell's full text stays available via its title tooltip. */
.sl-states-table tbody tr { height: 82px; }
.sl-states-table tbody th,
.sl-states-table tbody td {
  padding: 12px 18px; vertical-align: middle;
  font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft);
  text-align: left; /* <th scope="row"> defaults to center - force left */
}
.sl-states-table tbody th[scope="row"] { font-weight: 650; color: var(--ink); white-space: nowrap; }
.sl-state-link { color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.sl-state-link:hover { color: var(--accent-ink); text-decoration: underline; }
.sl-state-flag {
  width: 42px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.sl-row[hidden] { display: none; }

.sl-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.sl-status-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.sl-status--license      { color: #1f7a46; }
.sl-status--registration { color: #b26a12; }
.sl-status--none         { color: var(--ink-mute); }

/* One text colour for the whole column; the map-pin icon marks "local". */
.sl-applies { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink-soft); }
.sl-applies-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-mute); }

/* Agency link is INLINE (not flex) so the -webkit-line-clamp below can clamp
   its text; the external-link glyph sits inline after it. */
.sl-agency-text { color: var(--ink-soft); }
.sl-agency-link { color: var(--accent-ink); }
.sl-agency-link:hover { text-decoration: underline; }
.sl-agency-icon { width: 12px; height: 12px; display: inline; vertical-align: -1px; margin-left: 3px; color: var(--ink-faint); }

/* Clamp the two wrapping columns to 2 lines so rows stay equal height. */
.sl-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.sl-cell-notes { min-width: 240px; }

.sl-nomatch { margin: 0; padding: 22px 18px; color: var(--ink-mute); font-style: italic; }

/* Closing checklist accordions (native <details>, faq look) */
.sl-accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.sl-accordion + .sl-accordion { margin-top: 14px; }
.sl-accordion:hover { border-color: var(--ink-mute); }
.sl-accordion[open] { border-color: var(--accent); box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
.sl-accordion-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; user-select: none; }
.sl-accordion-head::-webkit-details-marker { display: none; }
.sl-accordion-head::marker { content: ""; }
.sl-accordion-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sl-accordion-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); flex: 0 0 auto; }
.sl-accordion-icon .icon { width: 18px; height: 18px; }
.sl-accordion-title { flex: 1 1 auto; font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.sl-row-chevron { width: 18px; height: 18px; color: var(--ink-faint); flex: 0 0 auto; transition: transform .2s ease; }
.sl-accordion[open] .sl-row-chevron { transform: rotate(180deg); color: var(--accent); }
.sl-accordion-body { padding: 2px 22px 22px; }
.sl-accordion-body > p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.sl-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sl-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
.sl-check-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; background: var(--bg-tint); color: var(--accent); margin-top: 1px; }
.sl-check-icon .icon { width: 17px; height: 17px; }
.sl-check-label { color: var(--ink); font-weight: 650; }

/* The two vetting checklists sit side by side (50/50) on desktop, each in its
   own white card - same treatment as the situation cards above. */
.sl-vet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; align-items: start; }
.sl-vet-col {
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 26px 26px 28px;
}
.sl-vet-col .sl-section-head { margin-bottom: 18px; }
.sl-vet-col .sl-checklist { gap: 15px; }
/* Softer, smaller aside inside the "Verify..." heading. */
.sl-h2-note { display: inline-block; font-size: 0.9rem; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; }

/* References (grouped by state, with a "Gov Page" badge) - same white-card
   container as the situation and vetting cards. */
.sl-references {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 26px 26px 28px;
}
.sl-ref-intro { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
/* Government/primary-source badge: blue, shield check - a "gov page" cue. */
.sl-gov-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px;
  font-size: 0.72rem; font-weight: 650; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2); border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
.sl-gov-icon { width: 12px; height: 12px; }
.sl-ref-groups { display: grid; gap: 24px; }
.sl-ref-group-title {
  margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
/* Flat, tidy list: a small bullet + minimal indent (no deep browser ol/ul indent). */
.sl-ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sl-ref-list li { position: relative; padding-left: 16px; color: var(--ink-soft); line-height: 1.5; }
.sl-ref-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong);
}
.sl-ref-list a { color: var(--accent-ink); word-break: break-word; }
.sl-ref-list a:hover { text-decoration: underline; }
.sl-ref-icon { width: 12px; height: 12px; display: inline; vertical-align: -1px; margin-left: 4px; color: var(--ink-faint); }
.sl-ref-list li .sl-gov-tag { margin-left: 6px; }

@media (max-width: 720px) {
  .sl-cards { grid-template-columns: 1fr; }
  .sl-vet-cols { grid-template-columns: 1fr; gap: 26px; }
  .sl-filter { flex-direction: column; align-items: stretch; }
  .sl-states-table th.sl-notes-col { width: auto; }
}