/*
 * Admin command center — dark, futuristic, minimalistic.
 * Mobile-first, purely CSS-driven nav toggle.
 * Accent = indigo/violet (distinct from pro's cyan) so Braxton always knows
 * which surface he's looking at at a glance.
 */

:root {
  --a-bg:         #0a0e1a;
  --a-bg-2:       #05070f;
  --a-surface:    #141a2c;
  --a-surface-2: rgba(20, 26, 44, 0.72);
  --a-line:       rgba(255, 255, 255, 0.06);
  --a-line-2:     rgba(255, 255, 255, 0.10);
  --a-line-3:     rgba(129, 140, 248, 0.22);
  --a-text:       #e8e9f0;
  --a-text-2:     #b7bccd;
  --a-dim:        #8a8fa3;
  --a-muted:      #5a6379;
  --a-accent:     #818cf8;           /* indigo-400 */
  --a-accent-2:   #a78bfa;           /* violet-400 */
  --a-success:    #34d399;           /* emerald-400 */
  --a-warn:       #fbbf24;           /* amber-400 */
  --a-danger:     #f87171;           /* red-400 */
  --a-radius:     12px;
  --a-radius-sm:  8px;
  --a-radius-lg:  16px;
  --a-shadow-1:   0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --a-shadow-2:   0 20px 60px -30px rgba(0,0,0,0.6);
}

html, body { margin: 0; padding: 0; }

body.a-app {
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(129,140,248,0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(167,139,250,0.05), transparent 60%),
    linear-gradient(180deg, var(--a-bg) 0%, var(--a-bg-2) 100%);
  color: var(--a-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.a-mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-feature-settings: "tnum";
}

/* ── Skip link ───────────────────────────────────────────────── */
.a-skip {
  position: absolute; top: -100px; left: 0;
  background: var(--a-accent); color: var(--a-bg);
  padding: 10px 16px; z-index: 100; font-weight: 700;
}
.a-skip:focus { top: 0; }

/* ── Layout shell ────────────────────────────────────────────── */
.a-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
@media (max-width: 900px) { .a-shell { grid-template-columns: 1fr; } }

/* ── Top bar ─────────────────────────────────────────────────── */
.a-topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 14, 26, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--a-line);
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
}
.a-topbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 13px; color: var(--a-text); text-decoration: none;
  letter-spacing: 0.02em;
}
.a-topbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a-accent);
  box-shadow: 0 0 18px rgba(129,140,248,0.7);
  animation: a-pulse 2.4s ease-in-out infinite;
}
@keyframes a-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.86); }
}
.a-topbar__right {
  display: flex; align-items: center; gap: 10px;
}
.a-env {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  padding: 4px 9px; border-radius: 999px; font-weight: 700;
}
.a-env--dev    { background: rgba(129,140,248,0.14); color: var(--a-accent);  border: 1px solid rgba(129,140,248,0.3); }
.a-env--test   { background: rgba(167,139,250,0.14); color: var(--a-accent-2);border: 1px solid rgba(167,139,250,0.3); }
.a-env--stage  { background: rgba(251,191,36,0.14);  color: var(--a-warn);    border: 1px solid rgba(251,191,36,0.32); }
.a-env--prod   { background: rgba(52,211,153,0.14);  color: var(--a-success); border: 1px solid rgba(52,211,153,0.32); }
.a-topbar__user {
  font-size: 12.5px; color: var(--a-dim);
}
.a-topbar__user strong { color: var(--a-text); font-weight: 500; }

.a-signout {
  background: transparent; color: var(--a-text-2);
  border: 1px solid var(--a-line-2); border-radius: var(--a-radius-sm);
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.a-signout:hover { border-color: var(--a-accent); color: var(--a-text); }

/* Mobile hamburger — CSS-only toggle */
.a-hamburger-toggle { position: absolute; opacity: 0; pointer-events: none; }
.a-hamburger {
  display: none;
  width: 36px; height: 36px; padding: 7px;
  background: transparent; border: 1px solid var(--a-line-2);
  border-radius: var(--a-radius-sm); cursor: pointer;
}
.a-hamburger__bar {
  display: block; width: 100%; height: 2px; margin: 3px 0;
  background: var(--a-text-2); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
@media (max-width: 900px) {
  .a-hamburger { display: inline-block; }
}

/* ── Sidebar nav ─────────────────────────────────────────────── */
.a-sidebar {
  background: rgba(10, 14, 26, 0.5);
  border-right: 1px solid var(--a-line);
  padding: 24px 14px 40px;
  min-height: calc(100vh - 60px);
}
.a-sidebar__section {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-muted); font-weight: 700;
  padding: 16px 10px 8px;
}
.a-sidebar__list {
  list-style: none; margin: 0; padding: 0;
}
.a-sidebar__item a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--a-radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--a-text-2);
  text-decoration: none; letter-spacing: -0.005em;
  transition: background .12s ease, color .12s ease;
}
.a-sidebar__item a:hover {
  background: rgba(255,255,255,0.03);
  color: var(--a-text);
}
.a-sidebar__item--active a {
  background: rgba(129,140,248,0.10);
  color: var(--a-text);
  box-shadow: inset 0 0 0 1px var(--a-line-3);
}
.a-sidebar__icon {
  width: 16px; height: 16px; flex-shrink: 0;
  opacity: 0.8; color: inherit;
}
.a-sidebar__item--active .a-sidebar__icon { opacity: 1; color: var(--a-accent); }

@media (max-width: 900px) {
  .a-sidebar {
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
    z-index: 25; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    background: var(--a-bg);
    border-right: none; border-top: 1px solid var(--a-line);
  }
  .a-hamburger-toggle:checked ~ .a-shell .a-sidebar { transform: translateX(0); }
  .a-hamburger-toggle:checked ~ .a-shell .a-hamburger .a-sidebar__scrim {
    display: block;
  }
}

/* ── Main content ────────────────────────────────────────────── */
.a-main {
  padding: 28px 28px 80px;
  max-width: 1280px; margin: 0 auto; width: 100%;
}
@media (max-width: 640px) { .a-main { padding: 20px 16px 80px; } }

.a-page-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 4px; color: var(--a-text);
}
.a-page-sub {
  color: var(--a-dim); font-size: 13.5px; margin: 0 0 22px;
}

.a-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}

/* ── Flash ───────────────────────────────────────────────────── */
.a-flash {
  padding: 11px 15px; margin-bottom: 16px;
  border-radius: var(--a-radius-sm); font-size: 13.5px;
  border: 1px solid transparent;
}
.a-flash--notice {
  background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.25);
  color: var(--a-success);
}
.a-flash--alert {
  background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.28);
  color: var(--a-danger);
}

/* ── Cards / surfaces ───────────────────────────────────────── */
.a-card {
  background: var(--a-surface-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  padding: 20px;
  box-shadow: var(--a-shadow-1);
}
.a-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.a-card__title {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--a-dim); margin: 0;
}

/* ── KPI tiles ──────────────────────────────────────────────── */
.a-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
@media (max-width: 1100px) { .a-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .a-kpis { grid-template-columns: 1fr; } }

.a-kpi {
  position: relative; overflow: hidden;
  padding: 18px 20px;
  background: var(--a-surface-2); border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  box-shadow: var(--a-shadow-1);
}
.a-kpi::after {
  content: ""; position: absolute; top: -50%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(129,140,248,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.a-kpi--success::after { background: radial-gradient(circle, rgba(52,211,153,0.13) 0%, transparent 60%); }
.a-kpi--warn::after    { background: radial-gradient(circle, rgba(251,191,36,0.13) 0%, transparent 60%); }
.a-kpi--danger::after  { background: radial-gradient(circle, rgba(248,113,113,0.13) 0%, transparent 60%); }
.a-kpi--violet::after  { background: radial-gradient(circle, rgba(167,139,250,0.14) 0%, transparent 60%); }

.a-kpi__label {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-dim); font-weight: 600; margin-bottom: 6px;
}
.a-kpi__value {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 30px; font-weight: 600; color: var(--a-text);
  line-height: 1.1;
}
.a-kpi__sub {
  color: var(--a-dim); font-size: 12px; margin-top: 6px;
}
.a-kpi__trend--up   { color: var(--a-success); }
.a-kpi__trend--down { color: var(--a-danger); }

/* ── Two-column layout ───────────────────────────────────────── */
.a-grid-2 {
  display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
}
@media (max-width: 900px) { .a-grid-2 { grid-template-columns: 1fr; } }

.a-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .a-grid-3 { grid-template-columns: 1fr; } }

/* ── Table ──────────────────────────────────────────────────── */
.a-tablewrap {
  background: var(--a-surface-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  overflow: hidden;
  box-shadow: var(--a-shadow-1);
}
.a-table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
.a-table thead th {
  position: sticky; top: 60px; z-index: 5;
  background: rgba(10, 14, 26, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
  padding: 12px 14px;
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--a-dim);
  border-bottom: 1px solid var(--a-line);
}
.a-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--a-line);
  color: var(--a-text-2);
  vertical-align: top;
}
.a-table tbody tr:hover td {
  background: rgba(129,140,248,0.04);
  color: var(--a-text);
}
.a-table tbody tr:last-child td { border-bottom: none; }
.a-table a { color: var(--a-accent); text-decoration: none; }
.a-table a:hover { color: var(--a-accent-2); text-decoration: underline; }
.a-table__num {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--a-text);
}

/* Mobile: table collapses into card stack */
@media (max-width: 700px) {
  .a-table { display: block; }
  .a-table thead { display: none; }
  .a-table tbody { display: block; }
  .a-table tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--a-line); }
  .a-table tr:last-child { border-bottom: none; }
  .a-table td { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border: none; }
  .a-table td:before {
    content: attr(data-label);
    font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--a-dim);
    font-weight: 700; flex-shrink: 0;
  }
}

/* ── Empty states ────────────────────────────────────────────── */
.a-empty {
  text-align: center; padding: 48px 20px;
  color: var(--a-muted); font-size: 14px;
}
.a-empty__title {
  font-size: 16px; color: var(--a-text-2); margin: 0 0 4px; font-weight: 600;
}

/* ── Badges / pills ──────────────────────────────────────────── */
.a-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 10.5px; letter-spacing: 0.08em;
  border-radius: 999px;
  text-transform: uppercase; font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid transparent;
  white-space: nowrap;
}
.a-badge--default  { background: rgba(255,255,255,0.05);   color: var(--a-text-2); border-color: var(--a-line-2); }
.a-badge--accent   { background: rgba(129,140,248,0.12);   color: var(--a-accent); border-color: rgba(129,140,248,0.3); }
.a-badge--violet   { background: rgba(167,139,250,0.12);   color: var(--a-accent-2); border-color: rgba(167,139,250,0.3); }
.a-badge--success  { background: rgba(52,211,153,0.12);    color: var(--a-success);border-color: rgba(52,211,153,0.3); }
.a-badge--warn     { background: rgba(251,191,36,0.12);    color: var(--a-warn);   border-color: rgba(251,191,36,0.3); }
.a-badge--danger   { background: rgba(248,113,113,0.12);   color: var(--a-danger); border-color: rgba(248,113,113,0.3); }
.a-badge--muted    { background: rgba(90,99,121,0.18);     color: var(--a-muted);  border-color: rgba(90,99,121,0.35); }

/* Status chips use same as badge — semantic names */
.a-status--intake    { background: rgba(129,140,248,0.12); color: var(--a-accent); border-color: rgba(129,140,248,0.3); }
.a-status--routed    { background: rgba(167,139,250,0.12); color: var(--a-accent-2); border-color: rgba(167,139,250,0.3); }
.a-status--matched   { background: rgba(52,211,153,0.12);  color: var(--a-success); border-color: rgba(52,211,153,0.3); }
.a-status--converted { background: rgba(52,211,153,0.14);  color: var(--a-success); border-color: rgba(52,211,153,0.35); }
.a-status--dead      { background: rgba(90,99,121,0.18);   color: var(--a-muted);   border-color: rgba(90,99,121,0.35); }
.a-status--refunded  { background: rgba(248,113,113,0.12); color: var(--a-danger);  border-color: rgba(248,113,113,0.3); }
.a-status--pending   { background: rgba(129,140,248,0.12); color: var(--a-accent); border-color: rgba(129,140,248,0.3); }
.a-status--notified  { background: rgba(167,139,250,0.12); color: var(--a-accent-2); border-color: rgba(167,139,250,0.3); }
.a-status--claimed   { background: rgba(251,191,36,0.12);  color: var(--a-warn);   border-color: rgba(251,191,36,0.3); }
.a-status--contacted { background: rgba(251,191,36,0.14);  color: var(--a-warn);   border-color: rgba(251,191,36,0.32); }
.a-status--won       { background: rgba(52,211,153,0.14);  color: var(--a-success); border-color: rgba(52,211,153,0.35); }
.a-status--lost      { background: rgba(90,99,121,0.18);   color: var(--a-muted);   border-color: rgba(90,99,121,0.35); }
.a-status--passed    { background: rgba(90,99,121,0.18);   color: var(--a-muted);   border-color: rgba(90,99,121,0.35); }
.a-status--disputed  { background: rgba(248,113,113,0.12); color: var(--a-danger);  border-color: rgba(248,113,113,0.3); }

/* ── Filter bar ──────────────────────────────────────────────── */
.a-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--a-surface-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
}
.a-filters__field {
  display: flex; flex-direction: column; gap: 3px; min-width: 140px;
}
.a-filters__label {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--a-muted); font-weight: 700;
}
.a-filters__input,
.a-filters__select {
  padding: 8px 10px;
  background: #0d1220;
  border: 1px solid var(--a-line-2);
  color: var(--a-text);
  border-radius: var(--a-radius-sm);
  font-size: 13px; font-family: inherit;
  color-scheme: dark;
  min-width: 140px;
}
.a-filters__input:focus,
.a-filters__select:focus {
  outline: none;
  border-color: var(--a-accent);
  box-shadow: 0 0 0 2px rgba(129,140,248,0.2);
}

.a-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 14px; min-height: 36px;
  font-size: 13px; font-weight: 600;
  border-radius: var(--a-radius-sm);
  font-family: inherit; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
}
.a-btn--primary {
  background: var(--a-accent); color: var(--a-bg);
  box-shadow: 0 8px 20px -12px rgba(129,140,248,0.6);
}
.a-btn--primary:hover { background: var(--a-accent-2); }
.a-btn--ghost {
  background: transparent; color: var(--a-text-2);
  border-color: var(--a-line-2);
}
.a-btn--ghost:hover { color: var(--a-text); border-color: var(--a-accent); }
.a-btn--danger {
  background: transparent; color: var(--a-danger);
  border-color: rgba(248,113,113,0.4);
}
.a-btn--danger:hover { background: rgba(248,113,113,0.1); }

/* ── Forms (edit pages) ──────────────────────────────────────── */
.a-form { max-width: 680px; }
.a-form__group {
  padding: 16px 0; border-top: 1px solid var(--a-line);
}
.a-form__group:first-child { border-top: none; padding-top: 0; }
.a-form__group-title {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-muted); font-weight: 700; margin: 0 0 10px;
}
.a-field { margin-bottom: 14px; }
.a-field__label {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--a-text-2);
  margin-bottom: 5px; letter-spacing: 0.03em;
}
.a-field__help {
  font-size: 11.5px; color: var(--a-dim); margin-top: 4px;
}
.a-field__input,
.a-field__select,
.a-field__textarea {
  width: 100%; padding: 10px 12px;
  background: #0d1220; color: var(--a-text);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-radius-sm);
  font-family: inherit; font-size: 13.5px;
  color-scheme: dark;
}
.a-field__input:focus,
.a-field__select:focus,
.a-field__textarea:focus {
  outline: none;
  border-color: var(--a-accent);
  box-shadow: 0 0 0 2px rgba(129,140,248,0.2);
}
.a-field__checkbox {
  display: flex; align-items: center; gap: 8px;
  color: var(--a-text-2); font-size: 13px;
}

/* ── Detail view (show pages) ────────────────────────────────── */
.a-detail {
  display: grid; grid-template-columns: 160px 1fr;
  row-gap: 8px; column-gap: 20px;
  font-size: 13.5px;
}
.a-detail__label {
  color: var(--a-dim); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding-top: 2px;
}
.a-detail__val {
  color: var(--a-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  word-break: break-word;
}
@media (max-width: 560px) {
  .a-detail { grid-template-columns: 1fr; row-gap: 2px; }
  .a-detail__label { padding-top: 10px; }
}

/* ── Pagination ──────────────────────────────────────────────── */
.a-pagy {
  margin-top: 20px;
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  justify-content: center;
}
.a-pagy a,
.a-pagy .a-pagy__gap,
.a-pagy .a-pagy__current {
  padding: 6px 11px;
  font-size: 12.5px; font-weight: 600;
  border-radius: var(--a-radius-sm); color: var(--a-text-2);
  text-decoration: none;
  border: 1px solid var(--a-line-2); background: transparent;
  font-family: "JetBrains Mono", monospace;
  min-width: 34px; text-align: center;
}
.a-pagy a:hover { color: var(--a-text); border-color: var(--a-accent); }
.a-pagy .a-pagy__current {
  background: var(--a-accent); color: var(--a-bg);
  border-color: var(--a-accent);
}
.a-pagy .a-pagy__gap { border: none; color: var(--a-muted); }

/* ── Activity feed ───────────────────────────────────────────── */
.a-feed { list-style: none; padding: 0; margin: 0; }
.a-feed__item {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--a-line);
  font-size: 13px;
}
.a-feed__item:last-child { border-bottom: none; }
.a-feed__dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;
  background: var(--a-accent);
}
.a-feed__dot--success { background: var(--a-success); }
.a-feed__dot--warn    { background: var(--a-warn); }
.a-feed__dot--danger  { background: var(--a-danger); }
.a-feed__dot--violet  { background: var(--a-accent-2); }
.a-feed__text { color: var(--a-text-2); }
.a-feed__text strong { color: var(--a-text); font-weight: 600; }
.a-feed__time {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; color: var(--a-muted);
  white-space: nowrap;
}

/* ── Section headings ────────────────────────────────────────── */
.a-section-title {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--a-dim); font-weight: 700;
  margin: 28px 0 12px;
}

/* ── Sparkline / inline chart stub ───────────────────────────── */
.a-spark {
  display: inline-flex; gap: 2px; align-items: flex-end;
  height: 28px;
}
.a-spark__bar {
  width: 5px; background: var(--a-accent);
  border-radius: 1px; opacity: 0.7;
}
.a-spark__bar:last-child { opacity: 1; }

/* ── Brand link tint ─────────────────────────────────────────── */
.a-link { color: var(--a-accent); text-decoration: none; }
.a-link:hover { color: var(--a-accent-2); text-decoration: underline; }

/* ── Copy-on-click input ─────────────────────────────────────── */
.a-codebox {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  padding: 8px 10px;
  background: #0d1220;
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-radius-sm);
  color: var(--a-text);
  width: 100%;
  word-break: break-all;
  display: block;
}
/*
 * NorthernAZRoofing — homeowner site CSS.
 * Light theme. Built for 80-IQ-easy UX: one decision per screen, icon-first,
 * huge tap targets, Inter body, Fraunces headlines. Mobile-first always.
 *
 * Palette (from BUSINESS_PLAN.md):
 *   --ink   #0F2A44 (granite navy) — headers, primary CTA
 *   --green #2E6F4E (ponderosa)    — trust signals
 *   --copper #D97A1F (AZ sunset)   — secondary CTA accents
 *   --bg    #F7F4EE (warm off-white) — page bg
 *   --text  #1A1A1A                 — body
 */

:root {
  --ink:      #0F2A44;
  --ink-hi:   #1a3a5c;
  --green:    #2E6F4E;
  --green-hi: #3a8760;
  --copper:    #B06215;   /* Darker terracotta: 4.8:1 on --bg (was #D97A1F = 2.83:1) */
  --copper-hi: #D97A1F;   /* Original copper kept as the hover shade */
  --bg:       #F7F4EE;
  --bg-2:     #ffffff;
  --line:     #e5e0d4;
  --line-2:   #cec8b8;
  --text:     #1A1A1A;
  --text-dim: #4a4a4a;    /* WCAG AAA: 8.8:1 on --bg (was #6b6b6b = 4.29:1 — failed AA) */
  --text-muted: #6a6a6a;  /* WCAG AA: 5.2:1 on --bg (was #9a9285 = 3.65:1 — failed AA) */
  --red:      #c93838;
  --amber:    #e89a2c;

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(15,42,68,0.04), 0 4px 12px -6px rgba(15,42,68,0.08);
  --shadow-lg: 0 4px 6px rgba(15,42,68,0.06), 0 20px 40px -15px rgba(15,42,68,0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--copper); }

/* ── Top bar ─────────────────────────────────────────────────────── */
.nav {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
}
.nav__brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 700; font-size: 18px;
  text-decoration: none; letter-spacing: -0.015em;
}
.nav__brand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--ink); color: white; font-size: 14px;
}
.nav__links {
  display: none; align-items: center; gap: 4px;
  margin: 0 auto 0 32px;
}
/* The nav-link group only renders ≥1040px. Below that we fall back to
   the actions-only header (brand + Get matched + For contractors) and
   route deep links through the footer + the wizard. Earlier breakpoints
   tried to fit all 7 links into a 720-1040px stage and the result was
   the cramped wrap that read as a single wall of grey text. The one
   thing worse than no nav is a broken-looking nav. */
@media (min-width: 1040px) {
  /* gap of 18px reads as proper breathing room between short labels —
     anything below 12 collapses visually into a wall of grey text. */
  .nav__links { display: flex; gap: 18px; margin: 0 auto 0 40px; }
}
@media (min-width: 1040px) and (max-width: 1199px) {
  .nav__links { gap: 14px; margin: 0 auto 0 28px; }
  .nav__link { padding: 8px 8px; }
}

.nav__actions { display: flex; gap: 10px; align-items: center; }
.nav__link {
  color: var(--text-dim); font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  position: relative;
  white-space: nowrap;
}
/* No more bullet-divider hack — proper visual breathing room comes
   from the gap on the parent + per-link padding. Dividers between
   short labels read as a wall of dots; we let whitespace carry the
   separation now. */
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--ink);
  background: var(--bg);
  outline: none;
}

.nav__pro {
  color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 8px;
  display: none;
}
@media (min-width: 720px) { .nav__pro { display: inline-flex; } }
.nav__pro:hover { border-color: var(--ink); }

.nav__cta {
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 2px 6px -2px rgba(15,42,68,0.3);
  transition: background .12s ease, transform .08s ease;
}
.nav__cta:hover { background: var(--copper); color: #fff; }
.nav__cta:active { transform: scale(0.97); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  padding: 60px 20px 40px;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.hero__eyebrow {
  /* QA fix A4 — inline-flex made the storm-alerts eyebrow render as
     a 3-column stacked grid on mobile because of the `·`-separated
     chunks containing an <abbr>. Plain inline-block + natural text
     wrap reads cleanly on every viewport. */
  display: inline-block;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); font-weight: 600;
  padding: 6px 12px; background: rgba(46,111,78,0.08); border-radius: 999px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.hero__sub {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--text-dim);
  max-width: 680px; margin: 0 auto 32px;
  line-height: 1.5;
}
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; min-height: 56px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 16px;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .08s ease, background-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--ink); color: #fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--ink-hi); box-shadow: var(--shadow-lg); }

.btn--copper {
  background: var(--copper); color: #fff;
  box-shadow: 0 4px 14px -4px rgba(217,122,31,0.5);
}
.btn--copper:hover { background: var(--copper-hi); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink); }

/* Light, high-contrast variant for buttons that sit on a dark widget
   (storm risk widget hero, weather ticker spillover, etc.). The ghost
   variant disappears on dark surfaces because its border (var(--line-2))
   is near-white-on-near-white; --on-dark inverts the relationship so
   the button is always legible regardless of underlying surface. */
.btn--on-dark {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}
.btn--on-dark:hover {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.45);
}

/* Panel-themed variant for buttons that sit *inside* a dark themed
   panel (storm risk widget, hero feature panels) and need to read as
   part of the panel rather than stamped on top of it. Translucent
   white-over-navy fill plus a thin copper accent border keeps it
   tied to the brand palette without yelling for attention next to
   the primary CTA. */
.btn--on-panel {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 2px solid rgba(184, 115, 51, 0.55); /* copper at ~55% */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(2px);
}
.btn--on-panel:hover,
.btn--on-panel:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--copper);
  outline: none;
}
.btn--on-panel:active {
  background: rgba(255, 255, 255, 0.14);
}

.btn--huge { padding: 20px 40px; font-size: 20px; min-height: 72px; border-radius: 14px; }

/* ── Trust strip ─────────────────────────────────────────────────── */
.trust {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  padding: 14px 20px; font-size: 13px; color: var(--text-dim);
}
.trust__item { display: inline-flex; align-items: center; gap: 6px; }
.trust__icon { color: var(--green); font-size: 16px; }

/* ── Page container ──────────────────────────────────────────────── */
.page { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; }
.page--wide { max-width: 1280px; }

/* ── Wizard shell ────────────────────────────────────────────────── */
.wz {
  max-width: 720px; margin: 0 auto; padding: 24px 20px 80px;
}
.wz__progress {
  height: 6px; background: var(--line); border-radius: 3px;
  overflow: hidden; margin-bottom: 20px;
}
.wz__progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--ink), var(--copper));
  transition: width .3s ease;
}
.wz__step-of {
  font-size: 13px; color: var(--text-dim); margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.wz__eta { color: var(--green); font-weight: 600; font-size: 12px; }

.wz__question {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15; color: var(--ink);
  margin: 24px 0 12px;
}
.wz__help {
  color: var(--text-dim); font-size: 16px;
  margin: 0 0 28px;
}

/* ── Tile grid (step 1, 2, 3, 4) ─────────────────────────────────── */
.tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  /* QA fix B9 — without this, rows with mixed-length sub-text rendered
     uneven on iPhone 14 (414 px) because tiles auto-sized to content. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 24px 20px; min-height: 132px;
  background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius);
  text-align: left; text-decoration: none; color: var(--text);
  cursor: pointer; transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease;
  font: inherit;
}
.tile:hover, .tile:focus {
  border-color: var(--ink); box-shadow: var(--shadow-lg); outline: none;
  transform: translateY(-2px);
}
.tile:active { transform: translateY(0); }
.tile__emoji { font-size: 36px; line-height: 1; }
.tile__title { font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.2; margin: 0; }
.tile__sub   { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.4; }
.tile--selected { border-color: var(--copper); background: rgba(217,122,31,0.05); }

/* ── Form fields (step 5) ────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field__label {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.field__help { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.field__input {
  display: block; width: 100%;
  padding: 14px 16px; font-size: 16px; min-height: 52px;
  background: var(--bg-2); color: var(--text);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
}
.field__input:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,42,68,0.1);
}
.field__input::placeholder { color: var(--text-muted); }

/* Larger inputs for elderly / low-vision users */
.field--big .field__input { padding: 18px 20px; font-size: 18px; min-height: 60px; }

/* ── Wizard nav buttons ─────────────────────────────────────────── */
.wz__nav {
  display: flex; gap: 10px; margin-top: 28px; align-items: center; justify-content: space-between;
}
.wz__back { color: var(--text-dim); text-decoration: none; padding: 10px 14px; font-size: 14px; font-weight: 500; }
.wz__back:hover { color: var(--ink); }

/* ── Contractor preview sidebar (shown on step 5 and confirmation) ── */
.pros {
  display: grid; gap: 12px; margin: 16px 0 24px;
}
.pro-card {
  display: flex; gap: 14px; align-items: center;
  padding: 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pro-card__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink), var(--green));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; flex-shrink: 0;
}
.pro-card__body { flex: 1; min-width: 0; }
.pro-card__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.pro-card__meta { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.pro-card__stars { color: var(--copper); font-size: 13px; }

/* ── Consent block (TCPA) ───────────────────────────────────────── */
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; background: #fcfaf5;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.consent__box { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--ink); }
.consent__text { font-size: 13px; color: var(--text-dim); line-height: 1.45; }

/* ── Landing sections ───────────────────────────────────────────── */
.section { padding: 60px 20px; }
.section--white { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__title {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  text-align: center; margin: 0 0 12px;
}
.section__sub {
  text-align: center; color: var(--text-dim); max-width: 640px; margin: 0 auto 32px;
  font-size: 17px;
}

/* ── How-it-works cards ─────────────────────────────────────────── */
.how {
  display: grid; gap: 18px; max-width: 960px; margin: 0 auto;
}
@media (min-width: 720px) { .how { grid-template-columns: repeat(3, 1fr); } }
.how__card {
  padding: 28px 24px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.how__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff; font-weight: 700;
  margin-bottom: 14px;
}
.how__card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--ink); }
.how__card p  { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ── Badges / trust signals row ─────────────────────────────────── */
.badges {
  display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
  padding: 20px; align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim); font-weight: 500;
}
.badge__icon { font-size: 20px; }

/* ── Footer ─────────────────────────────────────────────────────── */
.ft {
  background: var(--ink); color: rgba(255,255,255,0.78);
  padding: 56px 20px 32px; margin-top: 80px;
  font-size: 14px;
  background-image:
    radial-gradient(1200px 300px at 50% -10%, rgba(217,122,31,0.10), transparent 70%),
    linear-gradient(180deg, #10314f 0%, #0F2A44 100%);
}
.ft__inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; gap: 32px 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ft__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ft__inner { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.ft__col { min-width: 0; }
.ft__col--brand { max-width: 360px; }

.ft__brand { color: #fff; font-weight: 700; font-size: 20px; margin-bottom: 14px; letter-spacing: -0.015em; }
.ft__tagline { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.ft__disclaimer {
  color: rgba(255,255,255,0.62); font-size: 12px; line-height: 1.5;
  padding: 12px 14px; background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--copper-hi); border-radius: 4px;
  margin: 0 0 18px;
}
.ft__disclaimer strong { color: #fff; font-weight: 600; }
.ft__trust { display: flex; flex-wrap: wrap; gap: 8px; }
.ft__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  letter-spacing: 0.02em;
}

.ft__h {
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0 0 14px;
}
.ft__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.ft__list li { min-width: 0; }
.ft__list--cities { grid-template-columns: repeat(2, 1fr); gap: 3px 12px; }

.ft a {
  color: rgba(255,255,255,0.72); text-decoration: none;
  display: inline-block; padding: 5px 0;
  font-size: 14px; line-height: 1.4;
  transition: color .12s ease;
}
.ft a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.ft__newsletter {
  max-width: 1160px; margin: 40px auto 0;
  padding: 24px 28px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--copper-hi);
  border-radius: var(--radius);
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .ft__newsletter { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.ft__newsletter-eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--copper-hi); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.ft__newsletter-title { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: #fff; font-weight: 700; line-height: 1.2; margin-bottom: 6px; letter-spacing: -0.015em; }
.ft__newsletter-sub { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.5; margin: 0; max-width: 480px; }
.ft__newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ft__newsletter-input {
  flex: 1; min-width: 180px;
  padding: 12px 16px; font-size: 15px; border-radius: 10px;
  background: rgba(255,255,255,0.95); color: var(--ink);
  border: 1px solid transparent;
}
.ft__newsletter-input:focus { outline: none; border-color: var(--copper-hi); box-shadow: 0 0 0 3px rgba(217,122,31,0.25); }
.ft__newsletter-btn {
  padding: 12px 22px; background: var(--copper); color: #fff;
  font-weight: 700; font-size: 15px; border-radius: 10px;
  border: none; cursor: pointer;
  transition: background .12s;
}
.ft__newsletter-btn:hover { background: var(--copper-hi); }

.ft__legal {
  max-width: 1160px; margin: 40px auto 0;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,0.55);
}
.ft__legal-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ft__legal-links a { padding: 2px 0; font-size: 12px; color: rgba(255,255,255,0.6); }
.ft__legal-links span { color: rgba(255,255,255,0.25); }

/* ── Flash messages ─────────────────────────────────────────────── */
.flash { padding: 14px 20px; font-size: 14px; font-weight: 500; text-align: center; }
.flash--notice { background: rgba(46,111,78,0.1); color: var(--green); }
.flash--alert  { background: rgba(201,56,56,0.1); color: var(--red); }

/* ── Priority match upsell ─────────────────────────────────────── */
.upsell {
  background: linear-gradient(135deg, #fff7ec, #fefaf3);
  border: 2px solid var(--copper); border-radius: var(--radius);
  padding: 24px; margin: 24px 0;
}
.upsell__title { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.upsell__price { font-size: 32px; font-weight: 800; color: var(--copper); font-family: "JetBrains Mono", monospace; }

/* ── Countdown ──────────────────────────────────────────────────── */
.countdown {
  text-align: center; padding: 28px 20px; background: rgba(15,42,68,0.04);
  border-radius: var(--radius); margin: 16px 0 24px;
}
.countdown__label { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.countdown__time { font-family: "JetBrains Mono", monospace; font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

/* ── Skip to content (a11y) ─────────────────────────────────────── */
.skip { position: absolute; top: -100px; left: 0; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 100; }
.skip:focus { top: 0; }

/* ── Accessibility: focus states ────────────────────────────────── */
:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; border-radius: 4px; }

/* ── News section ───────────────────────────────────────────────── */
.news-hero {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 60px 20px 48px;
  text-align: center;
}
.news-hero__inner { max-width: 900px; margin: 0 auto; }
.news-hero__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); padding: 6px 12px;
  background: rgba(46,111,78,0.08); border-radius: 999px;
  margin-bottom: 18px;
}
.news-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.08;
  font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
  margin: 0 0 14px;
}
.news-hero__sub { font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); max-width: 680px; margin: 0 auto 24px; line-height: 1.5; }
.news-hero__cta { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.news-hero__reassure { font-size: 13px; color: var(--text-dim); }

.news-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 20px 20px 10px; max-width: 1100px; margin: 0 auto;
}
.news-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-dim); background: var(--bg-2);
  border: 1px solid var(--line);
  transition: all .12s ease;
}
.news-chip:hover { border-color: var(--ink); color: var(--ink); }
.news-chip--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.news-chip--on:hover { color: #fff; }

.news-featured {
  max-width: 1100px; margin: 20px auto 0; padding: 0 20px;
}
.news-featured__card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .news-featured__card { grid-template-columns: 5fr 7fr; }
}
.news-featured__figure {
  display: block; aspect-ratio: 16 / 9; background: var(--bg);
  overflow: hidden; position: relative;
}
.news-featured__figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.news-featured__figure:hover img { transform: scale(1.04); }
.news-featured__body { padding: 32px 28px; }
.news-featured__meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  font-size: 13px; color: var(--text-dim); margin-bottom: 12px;
}
.news-featured__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; font-weight: 700;
  color: var(--ink); margin: 0 0 12px; letter-spacing: -0.02em;
}
.news-featured__title a { color: inherit; text-decoration: none; }
.news-featured__title a:hover { color: var(--copper); text-decoration: underline; }
.news-featured__summary { color: var(--text-dim); font-size: 16px; line-height: 1.55; margin: 0 0 18px; }
.news-featured__cta { display: flex; gap: 10px; flex-wrap: wrap; }

.news-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  max-width: 1100px; margin: 28px auto 0; padding: 0 20px;
}
@media (min-width: 720px)  { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .1s ease, border-color .12s, box-shadow .12s;
}
.news-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.news-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-dim);
}
.news-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px; font-weight: 700; line-height: 1.25;
  margin: 0; letter-spacing: -0.015em;
}
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { color: var(--copper); }
.news-card__summary { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 0; flex: 1; }
.news-card__foot { display: flex; gap: 8px; font-size: 12px; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--line); }
.news-card__time, .news-card__src, .news-card__city { font-weight: 500; }

.news-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}
.news-pill--storm     { background: rgba(201,56,56,0.1);    color: #b52a2a; }
.news-pill--insurance { background: rgba(15,42,68,0.08);    color: var(--ink); }
.news-pill--roofing   { background: rgba(176,98,21,0.1);    color: var(--copper); }
.news-pill--repair    { background: rgba(46,111,78,0.1);    color: var(--green); }
.news-pill--wildfire  { background: rgba(232,154,44,0.14);  color: #a56410; }
.news-pill--general   { background: rgba(15,42,68,0.06);    color: var(--text-dim); }

.news-inline-cta {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--ink), #1a3c62);
  color: #fff; border-radius: var(--radius);
  padding: 28px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.news-inline-cta__eyebrow { font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.6); font-weight: 700; margin-bottom: 4px; }
.news-inline-cta__text { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.25; }
.news-inline-cta .btn--primary { background: var(--copper); }
.news-inline-cta .btn--primary:hover { background: var(--copper-hi); }

.news-empty { text-align: center; padding: 80px 20px; color: var(--text-dim); }

.news-bottom-cta {
  max-width: 1100px; margin: 60px auto; padding: 40px 32px;
  background: linear-gradient(135deg, #fff7ec, #fefaf3);
  border: 2px solid var(--copper); border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.news-bottom-cta__title { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.news-bottom-cta__sub { color: var(--text-dim); margin: 0; font-size: 15px; line-height: 1.5; }

/* News article (show page) */
.news-article { max-width: 760px; margin: 40px auto 20px; padding: 0 20px; }
.news-breadcrumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.news-breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.news-breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.news-breadcrumbs span { margin: 0 6px; color: var(--line-2); }
.news-article__head { margin-bottom: 24px; }
.news-article__meta { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.news-article__title { font-family: "Fraunces", Georgia, serif; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.news-article__body { margin-bottom: 28px; }
.news-article__lede { font-size: 18px; line-height: 1.65; color: var(--text); }
.news-article__cta {
  background: linear-gradient(135deg, var(--ink), #1a3c62);
  color: #fff; border-radius: var(--radius);
  padding: 28px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 28px 0;
}
.news-article__cta-eyebrow { font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.6); font-weight: 700; margin-bottom: 4px; }
.news-article__cta-title { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.25; }
.news-article__cta-sub { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; margin: 6px 0 0; }
.news-article__cta .btn--primary { background: var(--copper); }
.news-article__cta .btn--primary:hover { background: var(--copper-hi); }
.news-article__source { text-align: center; padding: 20px 0; border-top: 1px solid var(--line); margin-top: 24px; }
.news-article__source-link { font-size: 14px; color: var(--text-dim); }

.news-article__figure {
  margin: 0 0 24px; border-radius: var(--radius); overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
}
.news-article__figure img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.news-article__figure figcaption { font-size: 12px; color: var(--text-muted); padding: 8px 12px; }
.news-article__note { font-size: 14px; color: var(--text-dim); line-height: 1.55; padding: 14px 16px; background: var(--bg); border-left: 3px solid var(--line-2); border-radius: 6px; margin-top: 18px; }

.news-article__local {
  display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin: 24px 0;
}
.news-article__local-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); font-weight: 700; margin-bottom: 4px; }
.news-article__local-body { font-size: 15px; color: var(--text); line-height: 1.5; }

.news-card__figure {
  width: 100%; aspect-ratio: 16 / 9; background: var(--bg);
  border-radius: 10px; overflow: hidden; margin: -4px 0 6px;
}
.news-card__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-related { max-width: 1100px; margin: 40px auto 80px; padding: 0 20px; }
.news-related__title { font-family: "Fraunces", Georgia, serif; font-size: 24px; color: var(--ink); margin: 0 0 20px; font-weight: 700; }
.news-related__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .news-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Newsletter / exit-intent popup ─────────────────────────────── */
.popup-backdrop {
  position: fixed; inset: 0; background: rgba(15,42,68,0.6);
  display: none; align-items: center; justify-content: center;
  z-index: 120; padding: 20px;
}
.popup-backdrop[data-open="true"] { display: flex; }
.popup {
  background: var(--bg-2); border-radius: var(--radius);
  max-width: 460px; width: 100%; padding: 32px 28px;
  box-shadow: var(--shadow-lg); position: relative;
}
.popup__close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: none; font-size: 22px; cursor: pointer;
  color: var(--text-dim); line-height: 1;
}
.popup__close:hover { background: var(--bg); color: var(--ink); }
.popup__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); margin-bottom: 8px; }
.popup__title { font-family: "Fraunces", Georgia, serif; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.popup__sub { color: var(--text-dim); margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.popup__form { display: flex; flex-direction: column; gap: 10px; }
.popup__fine { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.4; }

/* ── Sticky "Get matched" mobile bar ─────────────────────────────── */
.sticky-cta {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50;
  display: none;
  background: var(--ink); color: #fff;
  border-radius: 14px; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  box-shadow: 0 10px 30px -8px rgba(15,42,68,0.45);
}
@media (min-width: 720px) { .sticky-cta { display: none; } }
.sticky-cta__text { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sticky-cta__sub  { font-size: 12px; opacity: 0.8; }
.sticky-cta .btn { padding: 10px 16px; min-height: 44px; font-size: 14px; background: var(--copper); color: #fff; }
.sticky-cta .btn:hover { background: var(--copper-hi); }

/* QA fix B8 — sticky CTA was overlapping the last paragraph of body
   content on every mobile page (cost, faq, insurance-claims). Reserve
   bottom padding equal to the sticky bar height + breathing room. */
@media (max-width: 719px) {
  body { padding-bottom: 96px; }
}

/* ── Social-proof toast ─────────────────────────────────────────── */
.proof-toast {
  position: fixed; left: 14px; bottom: 80px; z-index: 45;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px 12px 14px;
  box-shadow: var(--shadow-lg);
  max-width: 320px; font-size: 13px; color: var(--text);
  display: none; gap: 10px; align-items: center;
  animation: proof-slide 0.4s ease;
}
.proof-toast[data-open="true"] { display: flex; }
.proof-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,111,78,0.15); flex-shrink: 0; }
.proof-toast__text { line-height: 1.4; }
.proof-toast__text strong { color: var(--ink); font-weight: 600; }
.proof-toast__time { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
@keyframes proof-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Referral block (post-match + pro dashboard) ────────────────── */
.refer-block {
  max-width: 760px; margin: 32px auto 0; padding: 28px 26px;
  background: linear-gradient(135deg, #fff8ec, #fefaf3);
  border: 2px solid var(--copper);
  border-radius: var(--radius);
}
.refer-block__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--copper); text-transform: uppercase; margin-bottom: 8px; }
.refer-block__title { font-family: "Fraunces", Georgia, serif; font-size: 26px; color: var(--ink); margin: 0 0 8px; font-weight: 700; letter-spacing: -0.02em; }
.refer-block__sub { color: var(--text-dim); margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.refer-block__link { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.refer-block__input {
  flex: 1; min-width: 220px; padding: 12px 14px; font-size: 14px;
  background: var(--bg-2); color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: 10px;
  font-family: "JetBrains Mono", monospace;
}
.refer-block__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,42,68,0.08); }
.refer-block__copy {
  padding: 12px 20px; background: var(--ink); color: #fff;
  border: none; border-radius: 10px; font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.refer-block__copy:hover { background: var(--ink-hi); }
.refer-block__share { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.refer-block__chip {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.refer-block__chip:hover { border-color: var(--ink); color: var(--ink); }
.refer-block__fine { font-size: 12px; color: var(--text-muted); margin: 0; }
.refer-block__fine code { background: var(--bg-2); padding: 2px 6px; border-radius: 4px; font-size: 11px; border: 1px solid var(--line); }

/* ── Roof-age calculator ────────────────────────────────────────── */
.tool-hero {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 60px 20px 48px;
  text-align: center;
}
.tool-hero__inner { max-width: 780px; margin: 0 auto; }
.tool-hero__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); padding: 6px 12px;
  background: rgba(46,111,78,0.08); border-radius: 999px;
  margin-bottom: 18px;
}
.tool-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.05;
  font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
  margin: 0 0 16px;
}
.tool-hero__sub { font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); max-width: 680px; margin: 0 auto 18px; line-height: 1.55; }

.tool-body { max-width: 780px; margin: 0 auto; padding: 28px 20px 60px; }

.rac-form {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px;
  box-shadow: var(--shadow);
  display: grid; gap: 16px;
}
.rac-field { display: flex; flex-direction: column; gap: 6px; }
.rac-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.rac-select, .rac-input {
  padding: 14px 16px; font-size: 16px; min-height: 52px;
  background: var(--bg-2); color: var(--text);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit;
  appearance: none;
  /* QA fix A1 — without these the longest <option> ("Asphalt 3-Tab
     Shingles (typical 15-20 yr)") forced the select to its content
     width on mobile, dragging the page sideways. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.rac-input { background-image: none; padding-right: 16px; }
.rac-select:focus, .rac-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,42,68,0.1); }
.rac-help { font-size: 13px; color: var(--text-dim); margin: 2px 0 0; }
.rac-fine { text-align: center; font-size: 12px; color: var(--text-dim); margin: 4px 0 0; }

/* Result card */
.rac-result {
  margin-top: 32px;
  background: var(--bg-2); border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  border-top: 6px solid var(--ink);
  animation: rac-slide 0.4s ease;
}
.rac-result--green  { border-top-color: #2E6F4E; }
.rac-result--blue   { border-top-color: #1f5a95; }
.rac-result--amber  { border-top-color: #d98c1f; }
.rac-result--red    { border-top-color: #c93838; }
@keyframes rac-slide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rac-result__header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.rac-result__badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.rac-result__badge--green  { background: rgba(46,111,78,0.12);   color: #1e5339; }
.rac-result__badge--blue   { background: rgba(31,90,149,0.12);   color: #1f5a95; }
.rac-result__badge--amber  { background: rgba(217,140,31,0.12);  color: #a56410; }
.rac-result__badge--red    { background: rgba(201,56,56,0.12);   color: #b52a2a; }
.rac-result__age { font-size: 13px; color: var(--text-dim); }
.rac-result__age strong { color: var(--ink); font-weight: 700; }

.rac-result__big {
  text-align: center; padding: 18px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.rac-result__number {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(64px, 10vw, 96px); line-height: 1;
  color: var(--ink); font-weight: 700; letter-spacing: -0.04em;
}
.rac-result__unit { font-size: 17px; color: var(--text-dim); margin-top: 4px; }
.rac-result__subtext { font-size: 14px; color: var(--text-dim); line-height: 1.55; max-width: 560px; margin: 14px auto 0; }

.rac-meter { margin: 22px 0 26px; }
.rac-meter__bar {
  width: 100%; height: 14px; background: var(--line); border-radius: 999px; overflow: hidden;
  position: relative;
}
.rac-meter__fill {
  height: 100%; border-radius: 999px;
  transition: width .6s ease;
  background: linear-gradient(90deg, #2E6F4E, #2E6F4E);
}
.rac-meter__fill--blue  { background: linear-gradient(90deg, #2E6F4E, #1f5a95); }
.rac-meter__fill--amber { background: linear-gradient(90deg, #2E6F4E, #d98c1f); }
.rac-meter__fill--red   { background: linear-gradient(90deg, #2E6F4E, #d98c1f, #c93838); }
.rac-meter__labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted);
  margin-top: 8px;
}

.rac-result__callout {
  background: var(--bg); border-left: 4px solid var(--copper);
  padding: 18px 20px; border-radius: 10px;
  margin-bottom: 24px;
}
.rac-result__callout-title { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.rac-result__callout-body { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; }

.rac-warning {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff9e6; border: 1px solid #f0c874;
  border-radius: 10px; padding: 16px 18px;
  margin-bottom: 24px;
}
.rac-warning__icon { font-size: 22px; color: #a56410; line-height: 1; margin-top: 2px; }
.rac-warning__title { font-weight: 700; color: #7a4a10; margin-bottom: 4px; }
.rac-warning p { margin: 0; font-size: 14px; line-height: 1.55; color: #5c3608; }

.rac-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}
@media (min-width: 720px) { .rac-grid { grid-template-columns: 1fr 1fr; } }
.rac-box {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px;
}
.rac-box__title { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.rac-box p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--text); }
.rac-box__fine { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; font-style: italic; }
.rac-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rac-list li {
  font-size: 13.5px; line-height: 1.5; color: var(--text);
  padding-left: 20px; position: relative;
}
.rac-list li::before {
  content: "→"; color: var(--copper); font-weight: 700;
  position: absolute; left: 0; top: 0;
}
.rac-list--sources li::before { content: "📖"; font-weight: 400; }

.rac-cta {
  background: linear-gradient(135deg, var(--ink), #1a3c62);
  color: #fff; border-radius: var(--radius);
  padding: 24px 26px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.rac-cta__eyebrow { font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.rac-cta__title { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 6px; }
.rac-cta__sub { font-size: 14px; color: rgba(255,255,255,0.8); margin: 0; line-height: 1.5; }

.rac-share { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.rac-share__label { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.rac-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.rac-share__btn {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
}
.rac-share__btn:hover { border-color: var(--ink); background: var(--bg-2); }

.rac-method {
  margin-top: 60px; padding: 32px 28px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.rac-method__title { font-family: "Fraunces", Georgia, serif; font-size: 24px; color: var(--ink); margin: 0 0 18px; font-weight: 700; letter-spacing: -0.02em; }
.rac-method__grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 720px) { .rac-method__grid { grid-template-columns: 1fr 1fr; } }
.rac-method__grid h3 { font-size: 15px; color: var(--ink); margin: 0 0 6px; font-weight: 700; }
.rac-method__grid p { font-size: 14px; color: var(--text-dim); margin: 0; line-height: 1.6; }
.rac-method__disclaimer { font-size: 13px; color: var(--text-dim); padding: 14px 16px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--copper); margin: 0; line-height: 1.55; }

/* ── Homepage news rail ─────────────────────────────────────────── */
.home-news { padding: 60px 20px; max-width: 1100px; margin: 0 auto; }
.home-news__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.home-news__title { font-family: "Fraunces", Georgia, serif; font-size: clamp(24px, 3.4vw, 32px); color: var(--ink); margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.home-news__sub { color: var(--text-dim); font-size: 14px; margin: 4px 0 0; }
.home-news__all { font-weight: 600; text-decoration: none; color: var(--copper); }
.home-news__all:hover { color: var(--ink); }
.home-news__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .home-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .home-news__grid { grid-template-columns: repeat(3, 1fr); } }

/* ── SEO page factory (city + service pages) ─────────────────────── */
.seo-hero { position: relative; }
.seo-hero--service { padding-top: 48px; }
.seo-hero--emergency .hero__eyebrow {
  background: rgba(201,56,56,0.10); color: var(--red);
}
.seo-zone-note {
  max-width: 760px; margin: 20px auto 0; padding: 14px 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; line-height: 1.55;
  text-align: left;
}
.seo-zone-note strong { color: var(--ink); }

.seo-trust-rail {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .seo-trust-rail { grid-template-columns: repeat(3, 1fr); } }
.seo-trust-rail__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.seo-trust-rail__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 700; flex-shrink: 0;
  font-size: 18px;
}
.seo-trust-rail__title { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.seo-trust-rail__body  { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

.seo-services-grid {
  display: grid; gap: 14px; max-width: 1100px; margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .seo-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .seo-services-grid { grid-template-columns: repeat(4, 1fr); } }
.seo-services-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.seo-service-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  min-height: 160px;
}
.seo-service-card:hover {
  transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-lg);
}
.seo-service-card__badge {
  align-self: flex-start;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(15,42,68,0.08); color: var(--ink);
}
.seo-service-card--emergency .seo-service-card__badge { background: rgba(201,56,56,0.12); color: var(--red); }
.seo-service-card--urgent    .seo-service-card__badge { background: rgba(232,154,44,0.15); color: #8b5a11; }
.seo-service-card--planned   .seo-service-card__badge { background: rgba(46,111,78,0.12); color: var(--green); }
.seo-service-card__name { font-weight: 700; color: var(--ink); font-size: 16px; margin-top: 4px; }
.seo-service-card__sub  { font-size: 12px; color: var(--text-muted); }
.seo-service-card__desc { font-size: 13px; color: var(--text-dim); line-height: 1.45; flex: 1; }
.seo-service-card__cta  { font-size: 13px; color: var(--copper); font-weight: 600; margin-top: 6px; }

.seo-all-services {
  list-style: none; padding: 0; margin: 0; max-width: 860px; margin-left: auto; margin-right: auto;
  display: grid; gap: 6px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .seo-all-services { grid-template-columns: repeat(2, 1fr); } }
.seo-all-services li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.seo-all-services a { color: var(--ink); font-weight: 600; text-decoration: none; }
.seo-all-services a:hover { color: var(--copper); }
.seo-all-services__tag {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  color: var(--text-muted);
}

.seo-zip-list {
  list-style: none; padding: 0; margin: 0 auto; max-width: 820px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.seo-zip-list__chip {
  padding: 10px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; color: var(--text-dim);
}
.seo-zip-list__chip strong { color: var(--ink); font-family: "JetBrains Mono", monospace; }

.seo-pain-grid, .seo-check-grid {
  display: grid; gap: 14px; max-width: 1000px; margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .seo-pain-grid  { grid-template-columns: repeat(2, 1fr); }
  .seo-check-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .seo-check-grid { grid-template-columns: repeat(3, 1fr); }
}
.seo-pain-card, .seo-check-card {
  padding: 20px 22px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text); line-height: 1.55;
  position: relative;
}
.seo-pain-card__quote {
  position: absolute; top: -18px; left: 12px;
  font-family: "Fraunces", Georgia, serif; font-size: 72px; line-height: 1;
  color: var(--copper-hi); opacity: 0.4;
}
.seo-pain-card p { margin: 8px 0 0; font-style: italic; color: var(--text-dim); }
.seo-check-card { padding-left: 24px; }
.seo-check-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 700;
  font-size: 14px; margin-bottom: 10px;
}
.seo-check-card p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; }

.seo-emergency-strip {
  background: linear-gradient(90deg, rgba(201,56,56,0.08), rgba(217,122,31,0.08));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 20px;
}
.seo-emergency-strip__inner {
  max-width: 1100px; margin: 0 auto; font-size: 14px; color: var(--text); line-height: 1.5;
  text-align: center;
}
.seo-emergency-strip strong { color: var(--red); }

.seo-nearby-grid {
  display: grid; gap: 12px; max-width: 1100px; margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .seo-nearby-grid { grid-template-columns: repeat(3, 1fr); } }
.seo-nearby-card {
  display: flex; gap: 14px; align-items: center;
  padding: 16px 20px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.seo-nearby-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-lg); }
.seo-nearby-card__emoji { font-size: 28px; line-height: 1; }
.seo-nearby-card__name  { font-weight: 700; color: var(--ink); font-size: 15px; }
.seo-nearby-card__sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }


/* ── Blog (editorial long-form) ─────────────────────────────────── */
.blog-hero {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 64px 20px 48px;
  text-align: center;
}
.blog-hero__inner { max-width: 820px; margin: 0 auto; }
.blog-hero__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--copper);
  padding: 6px 12px; background: rgba(176,98,21,0.1); border-radius: 999px;
  margin-bottom: 18px;
}
.blog-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
  margin: 0 0 16px;
}
.blog-hero__title-accent { color: var(--copper); }
.blog-hero__sub { font-size: clamp(15px, 2vw, 18px); color: var(--text-dim); max-width: 720px; margin: 0 auto; line-height: 1.6; }

.blog-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 24px 20px 12px; max-width: 1100px; margin: 0 auto;
}
.blog-chip {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-dim); background: var(--bg-2);
  border: 1px solid var(--line);
  transition: all .12s ease;
}
.blog-chip:hover { border-color: var(--ink); color: var(--ink); }
.blog-chip--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.blog-chip--on:hover { color: #fff; }

.blog-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}
.blog-pill--guide     { background: rgba(15,42,68,0.08);   color: var(--ink); }
.blog-pill--insurance { background: rgba(46,111,78,0.1);   color: var(--green); }
.blog-pill--storm     { background: rgba(201,56,56,0.1);   color: #b52a2a; }
.blog-pill--cost      { background: rgba(176,98,21,0.1);   color: var(--copper); }
.blog-pill--materials { background: rgba(31,90,149,0.1);   color: #1f5a95; }
.blog-pill--code      { background: rgba(75,85,99,0.1);    color: #4b5563; }
.blog-pill--scams     { background: rgba(232,154,44,0.14); color: #a56410; }
.blog-pill--diy       { background: rgba(46,111,78,0.1);   color: var(--green); }
.blog-pill--year      { background: rgba(99,102,241,0.1);  color: #4f46e5; }

.blog-featured {
  max-width: 1100px; margin: 24px auto 0; padding: 0 20px;
}
.blog-featured__inner {
  display: grid; grid-template-columns: 1fr;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
}
@media (min-width: 760px) { .blog-featured__inner { grid-template-columns: 5fr 6fr; } }
.blog-featured__hero {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; min-height: 220px; overflow: hidden;
}
.blog-featured__hero img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured__emoji { font-size: 96px; }
.blog-featured__body { padding: 32px 28px; }
.blog-featured__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.2;
  font-weight: 700; color: var(--ink); margin: 14px 0 10px;
  letter-spacing: -0.02em;
}
.blog-featured__excerpt { color: var(--text-dim); font-size: 16px; line-height: 1.55; margin: 0 0 14px; }
.blog-featured__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--text-muted); }

.blog-grid {
  display: grid; gap: 18px; grid-template-columns: 1fr;
  max-width: 1100px; margin: 32px auto 0; padding: 0 20px;
}
@media (min-width: 720px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, border-color .15s, box-shadow .15s;
}
.blog-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.blog-card__hero {
  display: block; aspect-ratio: 16 / 9; background: var(--bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.blog-card__hero img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__emoji { font-size: 56px; }
.blog-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px; font-weight: 700; line-height: 1.25;
  margin: 6px 0 0; letter-spacing: -0.01em;
}
.blog-card__title a { color: var(--ink); text-decoration: none; }
.blog-card__title a:hover { color: var(--copper); }
.blog-card__excerpt { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 0; flex: 1; }
.blog-card__meta { display: flex; gap: 6px; font-size: 12px; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--line); }

.blog-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-dim); }

/* Blog article page */
.blog-article { max-width: 760px; margin: 40px auto 32px; padding: 0 20px; }
.blog-article__head { margin: 18px 0 22px; }
.blog-article__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1; font-weight: 700;
  letter-spacing: -0.025em; color: var(--ink); margin: 12px 0 8px;
}
.blog-article__subtitle { font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); margin: 0 0 18px; line-height: 1.5; }
.blog-article__meta { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.blog-article__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.blog-article__author { display: block; font-weight: 700; color: var(--ink); font-size: 14px; }
.blog-article__time { display: block; font-size: 13px; color: var(--text-muted); }
.blog-article__hero { margin: 0 0 28px; }
.blog-article__hero img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }

.blog-article__body { font-size: 17px; line-height: 1.75; color: var(--text); }
.blog-article__body h2 { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 700; color: var(--ink); margin: 38px 0 14px; letter-spacing: -0.015em; line-height: 1.2; }
.blog-article__body h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 28px 0 10px; }
.blog-article__body h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 22px 0 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.blog-article__body p { margin: 0 0 16px; }
.blog-article__body strong { color: var(--ink); }
.blog-article__body a { color: var(--copper); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.blog-article__body a:hover { color: var(--ink); }
.blog-article__body code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 14px; }
.blog-article__body blockquote { margin: 24px 0; padding: 14px 20px; border-left: 4px solid var(--copper); background: var(--bg); border-radius: 6px; color: var(--text-dim); }
.blog-article__body .bp-list { padding-left: 22px; margin: 0 0 18px; }
.blog-article__body .bp-list li { margin-bottom: 6px; }
.blog-article__body hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.blog-article__body .bp-figure { margin: 24px 0; }
.blog-article__body .bp-figure img { width: 100%; border-radius: 12px; }
.blog-article__body .bp-figure figcaption { font-size: 13px; color: var(--text-muted); text-align: center; padding: 8px 0 0; }

.blog-article__body .bp-callout {
  margin: 24px 0; padding: 16px 20px; border-radius: 12px;
  font-size: 16px; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 12px;
}
.blog-article__body .bp-callout::before {
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.blog-article__body .bp-callout--note { background: rgba(31,90,149,0.08); border: 1px solid rgba(31,90,149,0.2); color: #1f5a95; }
.blog-article__body .bp-callout--note::before { content: "ℹ️"; }
.blog-article__body .bp-callout--warn { background: rgba(201,56,56,0.06); border: 1px solid rgba(201,56,56,0.18); color: #b52a2a; }
.blog-article__body .bp-callout--warn::before { content: "⚠️"; }
.blog-article__body .bp-callout--tip { background: rgba(46,111,78,0.08); border: 1px solid rgba(46,111,78,0.2); color: var(--green); }
.blog-article__body .bp-callout--tip::before { content: "💡"; }
.blog-article__body .bp-callout--info { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.18); color: #4f46e5; }
.blog-article__body .bp-callout--info::before { content: "📌"; }

.blog-article__cta {
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--ink), #1a3c62);
  color: #fff; border-radius: var(--radius); padding: 28px;
  margin: 36px 0;
}
.blog-article__cta-eyebrow { font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.6); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.blog-article__cta-title { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: #fff; }
.blog-article__cta-sub { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; margin: 0; max-width: 460px; }
.blog-article__cta .btn--primary { background: var(--copper); color: #fff; }
.blog-article__cta .btn--primary:hover { background: var(--copper-hi); }

.blog-article__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.blog-tag { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--bg); padding: 4px 10px; border-radius: 999px; text-decoration: none; }
.blog-tag:hover { background: var(--ink); color: #fff; }

.blog-related { max-width: 1100px; margin: 40px auto 80px; padding: 0 20px; }
.blog-related__title { font-family: "Fraunces", Georgia, serif; font-size: 26px; color: var(--ink); margin: 0 0 22px; font-weight: 700; }
.blog-related__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .blog-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Coming-soon card (pre-domain Twilio/Resend gating) ────────────── */
.coming-soon-card {
  border: 1px solid var(--rule, #e6e1d6);
  background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
  border-radius: 18px;
  padding: 28px 26px 24px;
  text-align: left;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px rgba(15,42,68,0.04);
}
.coming-soon-card__eyebrow {
  font-size: 11px; letter-spacing: 0.16em; color: #b76e0d;
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
}
.coming-soon-card__title {
  font-family: "Fraunces", Georgia, serif; font-size: 22px; line-height: 1.2;
  color: var(--ink, #0F2A44); margin: 0 0 12px; font-weight: 700;
}
.coming-soon-card__body {
  font-size: 15px; line-height: 1.6; color: var(--text, #2a3b50);
  margin: 0 0 14px;
}

/* ── News emoji fallback (when Google News doesn't return real images) ─ */
.news-card__figure,
.news-featured__figure,
.news-article__figure {
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.news-card__emoji,
.news-article__emoji {
  font-size: 64px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.news-featured__figure .news-card__emoji { font-size: 96px; }
.news-article__figure .news-article__emoji {
  font-size: 110px; aspect-ratio: 16 / 9;
}

/* Topic-tinted gradient backgrounds — gives every card a hero visual */
.news-card__figure--storm,
.news-featured__figure--storm,
.news-article__figure--storm {
  background: linear-gradient(135deg, #2a4663 0%, #4a6fa5 60%, #7da3d4 100%);
}
.news-card__figure--insurance,
.news-featured__figure--insurance,
.news-article__figure--insurance {
  background: linear-gradient(135deg, #1b3d3a 0%, #2e6f5c 60%, #66a08c 100%);
}
.news-card__figure--roofing,
.news-featured__figure--roofing,
.news-article__figure--roofing {
  background: linear-gradient(135deg, #4a3220 0%, #8a5a2e 60%, #c98e4f 100%);
}
.news-card__figure--repair,
.news-featured__figure--repair,
.news-article__figure--repair {
  background: linear-gradient(135deg, #3d2c4a 0%, #6b4a82 60%, #a07ec0 100%);
}
.news-card__figure--wildfire,
.news-featured__figure--wildfire,
.news-article__figure--wildfire {
  background: linear-gradient(135deg, #5a1e0e 0%, #b8492a 60%, #e08555 100%);
}
.news-card__figure--general,
.news-featured__figure--general,
.news-article__figure--general {
  background: linear-gradient(135deg, #2c3e52 0%, #4a6175 60%, #7c95ad 100%);
}

/* ============================================================
   Glossary tooltips — wraps industry acronyms (ROC, BBB, GAF,
   TCPA, NWS, etc) with a hover/focus tooltip. Native <abbr title>
   gives us free mobile long-press + screen-reader support; we
   layer custom CSS for desktop hover so the explanation isn't
   stuck behind a browser-default delay.
   ============================================================ */
.nz-abbr {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(15, 42, 68, 0.4);
  font-weight: inherit;
  outline: none;
}
.nz-abbr:hover, .nz-abbr:focus-visible {
  text-decoration-color: var(--ink, #0F2A44);
}
.nz-abbr:focus-visible {
  outline: 2px solid var(--copper, #D97A1F);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Custom tooltip — only on devices with hover. Mobile keeps the
   native long-press behavior. */
@media (hover: hover) and (pointer: fine) {
  .nz-abbr::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 280px;
    padding: 9px 13px;
    background: #0F2A44;
    color: #F7F4EE;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    text-align: left;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
  }
  .nz-abbr::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0F2A44;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
  }
  .nz-abbr:hover::after, .nz-abbr:focus::after,
  .nz-abbr:hover::before, .nz-abbr:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ──────── Wizard ownership step (Tier 1A) ──────── */
.wz-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.wz-fieldset__legend {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  padding: 0;
}
.wz-fieldset__help {
  font-size: 13px;
  color: var(--text-dim);
  margin: 6px 0 0;
}
.wz-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wz-radios--row {
  flex-direction: row;
  flex-wrap: wrap;
}
.wz-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.12s ease, background 0.12s ease;
  flex: 1 1 auto;
  min-width: 100px;
}
.wz-radio:hover {
  border-color: var(--copper);
}
.wz-radio--on {
  border-color: var(--copper);
  background: rgba(184, 115, 51, 0.08);
}
.wz-radio__input {
  width: 18px;
  height: 18px;
  accent-color: var(--copper);
  flex-shrink: 0;
}
.wz-radio__text {
  line-height: 1.3;
}

/* ──────── Renter soft-redirect page ──────── */
.renter-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
}
.renter-card__icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.renter-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.25;
}
.renter-card__sub {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 18px;
}
.renter-card__sample {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  margin-bottom: 16px;
  line-height: 1.5;
}
.renter-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 22px;
}
.renter-card__divider {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 18px 0;
}
.renter-card__alt {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  text-align: left;
  background: rgba(184, 115, 51, 0.06);
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--copper);
}
.renter-card__footer {
  margin-top: 22px;
}
.renter-card__back {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
}
.renter-card__back:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ──────── Storm Hub (top-of-page weather + roof-stress dashboard) ──────── */
.hub {
  background: linear-gradient(135deg, #0F2A44 0%, #143655 55%, #1a3d5e 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hub--moderate { background: linear-gradient(135deg, #2c1f0a 0%, #3b2810 55%, #4a3015 100%); }
.hub--high     { background: linear-gradient(135deg, #2a0e0e 0%, #3d1717 55%, #4a1d1d 100%); }
.hub--unknown  { background: linear-gradient(135deg, #1a1a1a 0%, #242424 55%, #2c2c2c 100%); }

.hub__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 20px 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1.2fr) minmax(280px, 2fr);
  gap: 24px;
  align-items: stretch;
}
.hub__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Now column ─────────────────────────────────────────────────── */
.hub__city-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.hub__pin { display: inline-flex; opacity: 0.85; }
.hub__city { font-weight: 700; letter-spacing: 0.01em; }
.hub__sep  { opacity: 0.45; }
.hub__local-time { font-variant-numeric: tabular-nums; }

.hub__current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.hub__current-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f6cf6b;
}
.hub--moderate .hub__current-glyph { color: #f5b66e; }
.hub--high     .hub__current-glyph { color: #ff9f6b; }
.hub--unknown  .hub__current-glyph { color: rgba(255,255,255,0.55); }

.hub__temp {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hub__current-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.3;
}
.hub__cond {
  font-weight: 600;
  opacity: 0.95;
}
.hub__wind {
  opacity: 0.78;
}
.hub__updated {
  font-size: 11px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

/* ── Stress column ───────────────────────────────────────────────── */
.hub__stress-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hub__stress-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
  font-weight: 700;
}
.hub__stress-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
}
.hub__stress-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.hub__stress-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #5fa66f 0%, #d6c14a 50%, #d97a1f 80%, #c93838 100%);
  transition: width 0.4s ease;
}
.hub__stress-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.hub__stress-score {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hub__stress-score-max {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.55;
  margin-left: 2px;
}
.hub__stress-band {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}
.hub__col--stress-low      .hub__stress-band { background: rgba(95, 166, 111, 0.30); color: #d8f0dd; }
.hub__col--stress-moderate .hub__stress-band { background: rgba(214, 193, 74, 0.30); color: #f5e9a8; }
.hub__col--stress-elevated .hub__stress-band { background: rgba(217, 122, 31, 0.32); color: #fcd9b1; }
.hub__col--stress-high     .hub__stress-band { background: rgba(201, 56, 56, 0.40); color: #ffd0d0; }

.hub__stress-summary {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.85;
  margin: 2px 0 0;
}

/* ── Forecast column ─────────────────────────────────────────────── */
.hub__forecast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hub__forecast-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.78;
}
.hub__forecast-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  white-space: nowrap;
  transition: background 0.12s ease;
}
.hub__forecast-cta:hover, .hub__forecast-cta:focus-visible {
  background: rgba(255,255,255,0.24);
}
.hub__forecast-strip {
  display: grid;
  grid-template-columns: repeat(14, minmax(34px, 1fr));
  gap: 4px;
  margin-top: 2px;
}
.hub__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid transparent;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.hub__day--today {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
  transform: scale(1.04);
}
.hub__day--hail {
  background: linear-gradient(165deg, rgba(201, 56, 56, 0.42) 0%, rgba(120, 30, 30, 0.32) 100%);
  border-color: rgba(255, 130, 130, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 130, 130, 0.20);
}
.hub__day--storm {
  background: rgba(255, 184, 107, 0.18);
  border-color: rgba(255, 184, 107, 0.40);
}
/* Days 8-14 fade slightly to signal "outlook, not forecast" — meteor.
   accuracy for hail-specific predictions falls off past ~7 days, and
   showing them at full opacity over-promised. The data is still here
   for users who want the directional read. */
.hub__day:nth-child(n+8) { opacity: 0.78; }
.hub__day:nth-child(n+11) { opacity: 0.62; }
.hub__day--hail,
.hub__day--storm,
.hub__day--today { opacity: 1 !important; }
.hub__day-name {
  font-size: 10px;
  letter-spacing: 0.02em;
  font-weight: 700;
  opacity: 0.78;
}
.hub__day--today .hub__day-name { opacity: 1; }
.hub__day-glyph {
  display: inline-flex;
  width: 22px; height: 22px;
}
.hub__day--sun       .hub__day-glyph { color: #f6cf6b; }
.hub__day--sun_cloud .hub__day-glyph { color: #f0d090; }
.hub__day--cloud     .hub__day-glyph { color: rgba(255,255,255,0.78); }
.hub__day--rain      .hub__day-glyph { color: #6db8e0; }
.hub__day--snow      .hub__day-glyph { color: #d6e8f0; }
.hub__day--storm     .hub__day-glyph { color: #ffb86b; }
.hub__day--hail      .hub__day-glyph { color: #ff8d8d; }
.hub__day--unknown   .hub__day-glyph { color: rgba(255,255,255,0.5); }
.hub__day-meta {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.75;
  min-height: 12px;
}
.hub__day-flag {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  color: #ffb86b;
}

/* ── Tablet: 2 columns (now+stress on top, forecast below) ───────── */
@media (max-width: 1100px) {
  .hub__inner {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .hub__col--forecast {
    grid-column: 1 / -1;
  }
}

/* ── Mobile: stack everything ────────────────────────────────────── */
@media (max-width: 720px) {
  .hub__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px 16px 16px;
  }
  .hub__forecast-strip {
    /* Show only first 7 days on mobile to keep glyphs legible. */
    grid-template-columns: repeat(7, 1fr);
  }
  .hub__day:nth-child(n+8) {
    display: none;
  }
  .hub__temp { font-size: 28px; }
  .hub__stress-summary { font-size: 11px; }
}

/* Legacy ticker class — keep the empty stub so any markup still
   referencing .wx-ticker (cached HTML, mailers) doesn't fall back to
   unstyled text. */
.wx-ticker { display: none; }
/* Subtle accent bar on the left so the strip reads at a glance: green
   for calm, amber for moderate, red for active risk. */
.wx-ticker {
  border-left: 3px solid transparent;
}
.wx-ticker--low      { border-left-color: rgba(110, 195, 130, 0.85); }
.wx-ticker--moderate { border-left-color: #d98c1f; }
.wx-ticker--high     { border-left-color: #c93838; background: linear-gradient(90deg, #1a1818 0%, #3a1a1a 100%); }
.wx-ticker--unknown  { border-left-color: rgba(255, 255, 255, 0.25); }

.wx-ticker__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.wx-ticker__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.wx-ticker--low      .wx-ticker__glyph { color: #f6cf6b; }   /* sun */
.wx-ticker--moderate .wx-ticker__glyph { color: #f5b66e; }   /* rain */
.wx-ticker--high     .wx-ticker__glyph { color: #ff9f6b; }   /* lightning */
.wx-ticker--unknown  .wx-ticker__glyph { color: rgba(255,255,255,0.6); }

.wx-ticker__city {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.wx-ticker__sep {
  opacity: 0.4;
}
.wx-ticker__body {
  opacity: 0.92;
  flex: 1 1 auto;
  min-width: 0;
}

.wx-ticker__risk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
  max-width: 100%;
}
.wx-ticker--moderate .wx-ticker__risk {
  background: rgba(217, 140, 31, 0.20);
  border-color: rgba(217, 140, 31, 0.45);
}
.wx-ticker--high .wx-ticker__risk {
  background: rgba(201, 56, 56, 0.28);
  border-color: rgba(201, 56, 56, 0.55);
}
.wx-ticker__risk-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wx-ticker__risk-sep {
  opacity: 0.5;
}
.wx-ticker__risk-detail {
  opacity: 0.92;
  font-weight: 500;
}
.wx-ticker__risk-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.12s ease;
  white-space: nowrap;
}
.wx-ticker__risk-cta:hover,
.wx-ticker__risk-cta:focus-visible {
  background: rgba(255, 255, 255, 0.30);
}

/* Mobile: stack the risk pill below the snapshot, hide the verbose
   detail to keep the strip ~1 line tall, keep the CTA + label. */
@media (max-width: 720px) {
  .wx-ticker { font-size: 12px; padding: 9px 14px; gap: 8px; }
  .wx-ticker__inner { gap: 8px; }
  .wx-ticker__sep { display: none; }
  .wx-ticker__risk { font-size: 11px; padding: 4px 10px; }
  .wx-ticker__risk-detail,
  .wx-ticker__risk-sep { display: none; }
}

/* ──────── Wizard photo upload (Tier 2A) ──────── */
.wz-photos__input {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.wz-photos__input:hover, .wz-photos__input:focus {
  border-color: var(--copper);
}
.wz-photos__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.wz-photos__thumb {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.wz-photos__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wz-photos__warn {
  color: #c93838;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(201, 56, 56, 0.08);
  width: 100%;
}

/* ──────── Storm-risk widget (Tier 3A) ──────── */
.storm-widget {
  background: linear-gradient(135deg, #1a3d5e 0%, #0F2A44 100%);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  margin: 24px auto;
  max-width: 920px;
  box-shadow: 0 8px 28px rgba(15, 42, 68, 0.15);
}
.storm-widget__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.storm-widget__icon {
  font-size: 42px;
  line-height: 1;
}
.storm-widget__head-text { flex: 1; }
.storm-widget__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 4px;
}
.storm-widget__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.storm-widget__current {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.storm-widget__stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  flex: 1 1 110px;
  min-width: 100px;
}
.storm-widget__stat--warn {
  background: rgba(217, 140, 31, 0.18);
  border-color: rgba(217, 140, 31, 0.45);
}
.storm-widget__stat-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.storm-widget__stat-lbl {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.storm-widget__alert {
  background: rgba(217, 140, 31, 0.16);
  border-left: 3px solid #d98c1f;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.storm-widget__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ──────── NOAA radar embed (Tier 3B) ──────── */
.radar-embed {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 4 / 3;
  margin: 12px 0;
}
.radar-embed__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.radar-embed__credit {
  font-size: 12px;
  color: var(--text-dim);
  margin: 6px 0 0;
}
.radar-embed__credit a { color: var(--copper); }

/* ──────── /cost price-anchor table (Tier 3G) ──────── */
.cost-table {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
}
.cost-table__head {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.9fr 1.4fr 0.8fr;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cost-table__h {
  padding: 12px 14px;
  font-weight: 600;
}
.cost-table__row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.9fr 1.4fr 0.8fr;
  border-top: 1px solid var(--line);
  align-items: center;
  transition: background 0.12s ease;
}
.cost-table__row:hover { background: rgba(184, 115, 51, 0.04); }
.cost-table__c {
  padding: 14px;
  color: var(--text);
  font-size: 14px;
}
.cost-table__c--mat { padding-right: 8px; }
.cost-table__mat-label {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 4px;
}
.cost-table__mat-note {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.cost-table__c--total, .cost-table__h--total {
  font-weight: 700;
  color: var(--ink);
}
.cost-table__c--cta { text-align: right; }
.btn--small { padding: 7px 12px; font-size: 13px; }
.cost-table__source {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 12px;
  line-height: 1.55;
}
.cost-tips {
  max-width: 720px;
  margin: 14px auto;
  padding-left: 22px;
}
.cost-tips li { margin-bottom: 10px; line-height: 1.6; color: var(--text); }

@media (max-width: 720px) {
  .cost-table__head { display: none; }
  .cost-table__row {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 6px;
  }
  .cost-table__c { padding: 4px 0; }
  .cost-table__c--cta { text-align: left; padding-top: 10px; }
  .cost-table__c--total::before { content: "Total: "; color: var(--text-dim); font-weight: 400; font-size: 12px; }
  .cost-table__c:nth-child(2)::before { content: "Lifespan: "; color: var(--text-dim); font-weight: 400; font-size: 12px; }
  .cost-table__c:nth-child(3)::before { content: "Per sq ft: "; color: var(--text-dim); font-weight: 400; font-size: 12px; }
}

/* ──────── Disclaimers (Tier 3G clarity) ──────── */
.cost-disclaimer {
  background: rgba(217, 140, 31, 0.08);
  border-left: 3px solid #d98c1f;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  margin: 8px 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.cost-disclaimer__icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.cost-disclaimer strong { color: var(--ink); }
.rac-result__disclaimer {
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(217, 140, 31, 0.08);
  border-left: 3px solid #d98c1f;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 18px;
  line-height: 1.55;
}

/* ──────── Mobile tap-target floors ──────── */
.tile { min-height: 88px; }
.field__input { min-height: 48px; }
.nav__link, .ft__list a { padding: 6px 0; }   /* ensures 44px row */

/* ──────── Concierge match card (replaces placeholder pros) ──────── */
.concierge-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, #fff 0%, #f9f6f2 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 18px auto;
  max-width: 640px;
  box-shadow: 0 4px 14px rgba(15, 42, 68, 0.06);
}
.concierge-card__icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.concierge-card__body { flex: 1; }
.concierge-card__eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; margin-bottom: 6px;
}
.concierge-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px; line-height: 1.3; color: var(--ink); margin: 0 0 8px;
  font-weight: 600;
}
.concierge-card__sub { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; }


/* ──────── /faq — FAQPage list ──────── */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  scroll-margin-top: 100px;
}
.faq-item__q {
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}
.faq-item__a {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
@media (max-width: 640px) {
  .faq-item { padding: 18px 18px; }
  .faq-item__q { font-size: 18px; }
  .faq-item__a { font-size: 15px; }
}

/* ──────── /partners — two-card grid ──────── */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .partners-grid { grid-template-columns: 1fr; }
}
.partners-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.partners-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 700;
  margin-bottom: 8px;
}
.partners-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 12px;
}
.partners-card__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.partners-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.partners-card__list li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  padding-left: 24px;
  position: relative;
}
.partners-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 700;
}
.partners-card__cta {
  margin-top: auto;
  text-align: center;
  word-break: break-word;
}

/* ──────── /pro/p/:slug — public contractor profile ──────── */
.pro-public__hero {
  padding-top: 30px;
  padding-bottom: 30px;
}
.pro-public__head {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.pro-public__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.pro-public__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pro-public__avatar-initials {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--copper);
  letter-spacing: 0.04em;
}
.pro-public__head-body { flex: 1 1 320px; }
.pro-public__title { margin: 8px 0 6px; font-size: clamp(28px, 4vw, 40px); }
.pro-public__roc {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--text-dim);
}
.pro-public__roc a {
  color: var(--copper);
  text-decoration: underline;
}
.pro-public__badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pro-public__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text);
}
.pro-public__badge--verified {
  background: rgba(46,111,78,0.08);
  border-color: rgba(46,111,78,0.25);
  color: var(--green);
  font-weight: 600;
}
.pro-public__badge-icon { font-size: 14px; }

.pro-public__bio {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}

.pro-public__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
  justify-content: center;
}
.pro-public__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.pro-public__chip--city:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.pro-public__chip--specialty {
  background: rgba(217,122,31,0.08);
  border-color: rgba(217,122,31,0.25);
  color: var(--copper);
  font-weight: 600;
}

.pro-public__contact {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.pro-public__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  min-height: 48px;
}
.pro-public__contact-link:hover {
  border-color: var(--copper);
  color: var(--copper);
}

.pro-public__photos-empty {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  padding: 32px 24px;
  text-align: center;
  color: var(--text-dim);
}
.pro-public__photos-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.pro-public__photos-empty p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ──────── Exit-intent popup form — stacked layout ──────── */
.popup__form--stacked {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup__form--stacked .field__input {
  width: 100%;
}
.popup__form--stacked .btn { width: 100%; }

/* ──────── Storm-alerts eligibility pre-qualifier ──────── */
.storm-eligibility {
  background: linear-gradient(135deg, #fff 0%, #f9f6f2 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 auto 24px;
}
.storm-eligibility__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.storm-eligibility__icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.storm-eligibility__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 700;
  margin-bottom: 4px;
}
.storm-eligibility__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 600;
}
.storm-eligibility__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.storm-eligibility__cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.storm-eligibility__city {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.storm-eligibility__city-emoji { font-size: 18px; }
.storm-eligibility__city-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
}
.storm-eligibility__city-zips {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.storm-eligibility__fine {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

/* ──────── QA wave 2 — popup label visibility (D5) ──────── */
.popup__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.popup__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ──────── QA wave 2 — mobile <abbr> tap-to-show (E5) ──────── */
/* Desktop: native title hover already works (homeowner.css lines 1376+).
   On (hover: none) devices native title tooltips don't fire. We add an
   explicit class state controlled by a tiny inline script: tap on .nz-abbr
   toggles aria-expanded; the popover renders via ::after when expanded.
   No JS framework dep — 280 bytes inline. */
@media (hover: none) {
  .nz-abbr {
    /* Make the underline a tap affordance */
    position: relative;
    border-bottom: 1px dashed var(--copper);
    cursor: pointer;
  }
  .nz-abbr[aria-expanded="true"]::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    background: #0F2A44;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35);
    z-index: 60;
    white-space: normal;
  }
}

/* ──────── Account settings page ────────
   Lives in homeowner.css because require_tree . pulls every CSS
   file into application.css regardless of layout, so these classes
   are available in admin + pro layouts too. Palette-neutral white
   card with copper accent — readable on every layout's bg color. */
.account-shell {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}
.account-card {
  background: #fff;
  border: 1px solid #e6e1d8;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 6px 24px -10px rgba(15, 42, 68, 0.12);
  color: #1a2536;
}
.account-card__head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #ece8df; }
.account-card__eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #b87333; font-weight: 700; margin-bottom: 6px;
}
.account-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px; font-weight: 700; color: #0F2A44;
  margin: 0 0 10px; line-height: 1.25; word-break: break-word;
}
.account-card__role { font-size: 13px; color: #5b6577; }
.account-card__role-pill {
  display: inline-block; padding: 3px 10px; margin-left: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px;
  background: #eef1f6; color: #1a2536;
}
.account-card__role-pill--admin     { background: #fee4d3; color: #9c4117; }
.account-card__role-pill--contractor{ background: #d6f1e2; color: #1f6442; }
.account-card__role-pill--homeowner { background: #e0ecf7; color: #18406b; }

.account-section {
  padding: 22px 0;
  border-bottom: 1px solid #ece8df;
}
.account-section:last-child { border-bottom: 0; padding-bottom: 0; }
.account-section--danger { padding-top: 26px; }
.account-section__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px; font-weight: 600; color: #0F2A44;
  margin: 0 0 14px;
}

.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-field { display: flex; flex-direction: column; gap: 4px; }
.account-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #5b6577;
}
.account-input {
  padding: 12px 14px; min-height: 48px; font-size: 15px;
  background: #fafaf7; color: #1a2536;
  border: 1.5px solid #d6cfbf; border-radius: 10px;
  font-family: inherit;
  width: 100%; box-sizing: border-box;
  transition: border-color 0.12s ease;
}
.account-input:focus {
  outline: none; border-color: #b87333;
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.18);
}
.account-help {
  font-size: 13px; color: #5b6577; line-height: 1.55;
  margin: 4px 0 0;
}
.account-btn {
  align-self: flex-start;
  padding: 11px 22px; min-height: 44px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: #b87333; color: #fff;
  border: 1.5px solid #b87333; border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin-top: 6px;
}
.account-btn:hover { background: #a4642b; border-color: #a4642b; }
.account-btn--ghost {
  background: transparent; color: #b87333;
}
.account-btn--ghost:hover { background: #fdf6ee; color: #a4642b; }
.account-btn--danger {
  background: #c93838; border-color: #c93838;
}
.account-btn--danger:hover { background: #a82e2e; border-color: #a82e2e; }

@media (max-width: 600px) {
  .account-card { padding: 20px 18px; border-radius: 12px; }
  .account-card__title { font-size: 22px; }
}
/*
 * Contractor portal — dark theme, mobile-first.
 * Roofers work from phones on ladders, in trucks, at 6am.
 * Big tap targets, high-contrast, no animations that burn battery.
 * Palette mirrors ApplyGlide's admin2.css + NorthernAZRoofing accents.
 */

:root {
  --pro-ink:     #06070f;
  --pro-ink-2:   #0a0c18;
  --pro-card:    rgba(20, 22, 38, 0.72);
  --pro-line:    rgba(255, 255, 255, 0.06);
  --pro-line-2:  rgba(255, 255, 255, 0.10);
  --pro-text:    #e6e9f2;
  --pro-dim:     #8a92a8;
  --pro-muted:   #5a6379;
  --pro-cyan:    #00e0ff;
  --pro-emerald: #00e39a;
  --pro-amber:   #ffb020;
  --pro-magenta: #ff2f92;
  --pro-violet:  #a78bfa;
  --pro-copper:  #D97A1F;
  --pro-radius:  12px;
  --pro-radius-sm: 8px;
}

.pro-app {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,224,255,0.07), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%,  rgba(167,139,250,0.07), transparent 60%),
    linear-gradient(180deg, var(--pro-ink) 0%, #04050a 100%);
  color: var(--pro-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.pro-mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-feature-settings: "tnum";
}

/* ── Top bar ──────────────────────────────────────────────────── */
.pro-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(6, 7, 15, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--pro-line);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pro-nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 13px;
  color: var(--pro-text); text-decoration: none;
}
.pro-nav__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pro-cyan); box-shadow: 0 0 24px rgba(0,224,255,0.4);
  animation: pro-pulse 2.4s ease-in-out infinite;
}
@keyframes pro-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}
.pro-nav__links { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.pro-nav__link {
  color: var(--pro-dim); padding: 6px 12px; border-radius: var(--pro-radius-sm);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.pro-nav__link:hover { color: var(--pro-text); background: rgba(255,255,255,0.03); }
.pro-nav__link--active {
  color: var(--pro-text); background: rgba(0,224,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,224,255,0.18);
}

/* ── Layout ───────────────────────────────────────────────────── */
.pro-main { max-width: 1280px; margin: 0 auto; padding: 24px 16px 80px; }
.pro-page-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 18px;
}

/* ── KPI tiles (top of dashboard) ─────────────────────────────── */
.pro-kpis {
  display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .pro-kpis { grid-template-columns: 1fr; }
}
.pro-kpi {
  padding: 16px 20px; background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius); position: relative; overflow: hidden;
}
.pro-kpi::after {
  content: ""; position: absolute; top: -40%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,224,255,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.pro-kpi--emerald::after { background: radial-gradient(circle, rgba(0,227,154,0.10) 0%, transparent 60%); }
.pro-kpi--magenta::after { background: radial-gradient(circle, rgba(255,47,146,0.10) 0%, transparent 60%); }
.pro-kpi__label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pro-dim); margin-bottom: 6px;
}
.pro-kpi__value {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 28px; font-weight: 600; color: var(--pro-text);
}
.pro-kpi__sub { color: var(--pro-dim); font-size: 12px; margin-top: 4px; }

/* ── Kanban board ─────────────────────────────────────────────── */
.pro-board {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) { .pro-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pro-board { grid-template-columns: 1fr; } }

.pro-col {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius); padding: 16px 14px 20px;
  min-height: 240px;
}
.pro-col__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--pro-line);
}
.pro-col__title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pro-dim); font-weight: 600;
}
.pro-col__count {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--pro-text);
  background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 999px;
}
.pro-col--new   .pro-col__title { color: var(--pro-cyan); }
.pro-col--work  .pro-col__title { color: var(--pro-amber); }
.pro-col--won   .pro-col__title { color: var(--pro-emerald); }
.pro-col--dead  .pro-col__title { color: var(--pro-muted); }

/* ── Lead card ────────────────────────────────────────────────── */
.pro-lead {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pro-line-2);
  border-radius: var(--pro-radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  text-decoration: none; color: inherit; display: block;
  transition: transform .08s ease, border-color .12s ease;
}
.pro-lead:hover {
  border-color: var(--pro-cyan);
  transform: translateY(-1px);
}
.pro-lead__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pro-lead__title {
  font-size: 14px; font-weight: 600; color: var(--pro-text); margin: 0;
}
.pro-lead__age {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--pro-dim);
  white-space: nowrap;
}
.pro-lead__meta { margin-top: 4px; font-size: 12px; color: var(--pro-dim); }
.pro-lead__pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; font-size: 10.5px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
}
.pro-lead__pill--emergency { background: rgba(255,47,146,0.12); color: var(--pro-magenta); border: 1px solid rgba(255,47,146,0.3); }
.pro-lead__pill--exclusive { background: rgba(167,139,250,0.12); color: var(--pro-violet); border: 1px solid rgba(167,139,250,0.3); }
.pro-lead__pill--priority  { background: rgba(217,122,31,0.15); color: var(--pro-copper); border: 1px solid rgba(217,122,31,0.3); }

.pro-col__empty {
  font-size: 12px; color: var(--pro-muted);
  text-align: center; padding: 32px 10px;
}

/* ── Lead detail page ─────────────────────────────────────────── */
.pro-detail {
  background: var(--pro-card); border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius); padding: 24px; margin-bottom: 20px;
}
.pro-detail__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px; font-weight: 700; margin: 0 0 4px;
}
.pro-detail__meta {
  color: var(--pro-dim); font-size: 13px; margin-bottom: 20px;
  font-family: "JetBrains Mono", monospace;
}
.pro-detail__grid {
  display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px;
  font-size: 14px; margin: 18px 0;
}
.pro-detail__label { color: var(--pro-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; }
.pro-detail__val { color: var(--pro-text); font-family: "JetBrains Mono", monospace; font-size: 13px; }

/* ── Action buttons — huge tap targets for field use ─────────── */
.pro-actions {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}
@media (max-width: 480px) { .pro-actions { grid-template-columns: 1fr; } }
.pro-btn {
  padding: 16px 20px; min-height: 56px;
  border-radius: var(--pro-radius-sm); font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; border: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
}
.pro-btn--call {
  background: var(--pro-emerald); color: #001f15;
}
.pro-btn--call:hover { background: #3af2ba; }
.pro-btn--pass {
  background: transparent; color: var(--pro-dim);
  border: 2px solid var(--pro-line-2);
}
.pro-btn--pass:hover { color: var(--pro-text); border-color: var(--pro-dim); }
.pro-btn--won  { background: var(--pro-emerald); color: #001f15; }
.pro-btn--lost { background: transparent; color: var(--pro-magenta); border: 2px solid rgba(255,47,146,0.4); }
.pro-btn--primary { background: var(--pro-cyan); color: var(--pro-ink); }
.pro-btn--primary:hover { background: #4dedff; }
.pro-btn--ghost { background: transparent; color: var(--pro-dim); border: 1px solid var(--pro-line-2); }

/* ── Forms (signup, profile) ──────────────────────────────────── */
.pro-form { max-width: 520px; }
.pro-field { margin-bottom: 14px; }
.pro-field__label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--pro-text); margin-bottom: 5px; letter-spacing: 0.04em;
}
.pro-field__help { font-size: 12px; color: var(--pro-dim); margin-top: 4px; }
.pro-field__input, .pro-field__select {
  width: 100%; padding: 12px 14px; font-size: 14px;
  background: #141629; color: var(--pro-text);
  border: 1px solid var(--pro-line-2); border-radius: var(--pro-radius-sm);
  color-scheme: dark; font-family: inherit;
}
.pro-field__input:focus, .pro-field__select:focus {
  outline: none; border-color: var(--pro-cyan);
  box-shadow: 0 0 0 2px rgba(0,224,255,0.25);
}
.pro-field__input::placeholder { color: var(--pro-muted); }

/* ── Tier picker on signup ────────────────────────────────────── */
.pro-tiers {
  display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);
  margin: 14px 0 22px;
}
@media (max-width: 560px) { .pro-tiers { grid-template-columns: 1fr; } }
.pro-tier {
  display: block; padding: 16px 18px; cursor: pointer;
  background: rgba(255,255,255,0.02); border: 2px solid var(--pro-line-2);
  border-radius: var(--pro-radius); position: relative;
}
.pro-tier input { position: absolute; opacity: 0; pointer-events: none; }
.pro-tier:has(input:checked) {
  border-color: var(--pro-cyan);
  background: rgba(0,224,255,0.06);
  box-shadow: 0 0 0 3px rgba(0,224,255,0.15);
}
.pro-tier__name { font-weight: 700; font-size: 16px; color: var(--pro-text); }
.pro-tier__price {
  font-family: "JetBrains Mono", monospace;
  font-size: 20px; font-weight: 600; color: var(--pro-cyan);
  margin: 4px 0;
}
.pro-tier__feats { font-size: 12px; color: var(--pro-dim); line-height: 1.45; }
.pro-tier__popular {
  position: absolute; top: -10px; right: 14px;
  background: var(--pro-cyan); color: var(--pro-ink);
  padding: 3px 10px; border-radius: 999px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── Flash messages ───────────────────────────────────────────── */
.pro-flash {
  padding: 12px 16px; margin-bottom: 16px;
  border-radius: var(--pro-radius-sm); font-size: 14px; font-weight: 500;
}
.pro-flash--notice {
  background: rgba(0,227,154,0.1); border: 1px solid rgba(0,227,154,0.3);
  color: var(--pro-emerald);
}
.pro-flash--alert {
  background: rgba(255,47,146,0.1); border: 1px solid rgba(255,47,146,0.3);
  color: var(--pro-magenta);
}

/* ── Status pill (for lead detail) ────────────────────────────── */
.pro-status {
  display: inline-flex; align-items: center; padding: 4px 10px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; font-weight: 600;
}
.pro-status--pending   { background: rgba(167,139,250,0.12); color: var(--pro-violet); }
.pro-status--notified  { background: rgba(0,224,255,0.12);  color: var(--pro-cyan); }
.pro-status--claimed   { background: rgba(255,176,32,0.12); color: var(--pro-amber); }
.pro-status--contacted { background: rgba(255,176,32,0.12); color: var(--pro-amber); }
.pro-status--won       { background: rgba(0,227,154,0.12);  color: var(--pro-emerald); }
.pro-status--lost      { background: rgba(90,99,121,0.15);  color: var(--pro-muted); }
.pro-status--passed    { background: rgba(90,99,121,0.15);  color: var(--pro-muted); }

/* Skip-to-content link */
.pro-skip {
  position: absolute; top: -100px; left: 0;
  background: var(--pro-cyan); color: var(--pro-ink);
  padding: 10px 16px; z-index: 100; font-weight: 600;
}
.pro-skip:focus { top: 0; }

/* ── Demo banner (premium) ───────────────────────────────────── */
.pro-demo-banner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 20px 24px; margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(217,122,31,0.08), rgba(167,139,250,0.08));
  border: 1px solid rgba(217,122,31,0.35);
  border-radius: var(--pro-radius);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 20px 50px -30px rgba(217,122,31,0.4);
}
@media (max-width: 780px) {
  .pro-demo-banner { grid-template-columns: auto 1fr; }
  .pro-demo-banner__actions { grid-column: 1 / -1; margin-top: 8px; text-align: left; }
}
.pro-demo-banner__pulse {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pro-copper); box-shadow: 0 0 20px rgba(217,122,31,0.8);
  animation: pro-pulse 2s ease-in-out infinite; flex-shrink: 0;
}
.pro-demo-banner__eyebrow {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pro-copper); font-weight: 700; margin-bottom: 4px;
}
.pro-demo-banner__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px; font-weight: 700; color: var(--pro-text);
  letter-spacing: -0.015em; line-height: 1.2;
}
.pro-demo-banner__text { font-size: 13px; color: var(--pro-dim); margin-top: 4px; max-width: 600px; }
.pro-demo-banner__text strong { color: var(--pro-text); font-weight: 600; }
.pro-demo-banner__actions { text-align: right; }
.pro-demo-banner__note {
  display: block; font-size: 10.5px; color: var(--pro-muted); margin-top: 6px;
}

/* Top-right tag pills on dashboard header */
.pro-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; margin-left: 4px;
}
.pro-tag--cyan    { background: rgba(0,224,255,0.12);  color: var(--pro-cyan);   border: 1px solid rgba(0,224,255,0.25); }
.pro-tag--amber   { background: rgba(255,176,32,0.12); color: var(--pro-amber);  border: 1px solid rgba(255,176,32,0.3); }
.pro-tag--copper  { background: rgba(217,122,31,0.15); color: var(--pro-copper); border: 1px solid rgba(217,122,31,0.3); }

/* Demo chip on fake lead cards */
.pro-lead--demo {
  background: rgba(217,122,31,0.03);
  border-color: rgba(217,122,31,0.2);
}
.pro-lead__demo-chip {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--pro-copper); background: rgba(217,122,31,0.15);
  border-radius: 3px; vertical-align: middle;
}

/* Amber variant of KPI tile */
.pro-kpi--amber::after { background: radial-gradient(circle, rgba(255,176,32,0.12) 0%, transparent 60%); }

/* Copper button (the activation CTA — deliberately warm/attention-grabbing) */
.pro-btn--copper {
  background: linear-gradient(135deg, var(--pro-copper), #f09332);
  color: #18130a;
  box-shadow: 0 8px 20px -8px rgba(217,122,31,0.6);
  font-size: 14px; padding: 12px 20px; min-height: 48px;
}
.pro-btn--copper:hover {
  box-shadow: 0 12px 30px -10px rgba(217,122,31,0.8);
  transform: translateY(-1px);
}

/* Activation card (bottom of demo dashboard) */
.pro-activate {
  margin-top: 32px; padding: 28px 32px;
  background: linear-gradient(135deg, rgba(0,224,255,0.06), rgba(167,139,250,0.06));
  border: 1px solid rgba(0,224,255,0.25);
  border-radius: var(--pro-radius);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.pro-activate__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px; font-weight: 700; color: var(--pro-text);
  margin: 0 0 4px;
}
.pro-activate__body { color: var(--pro-dim); font-size: 14px; margin: 0; max-width: 560px; }

/* ── Contractor referral block ─────────────────────────────────── */
.pro-refer {
  margin-top: 28px; padding: 24px 26px;
  background: linear-gradient(135deg, rgba(46,255,197,0.06), rgba(217,122,31,0.06));
  border: 1px solid rgba(46,255,197,0.2);
  border-left: 4px solid var(--pro-emerald);
  border-radius: 14px;
}
.pro-refer__head {
  display: flex; gap: 20px; justify-content: space-between;
  flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px;
}
.pro-refer__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--pro-emerald); text-transform: uppercase; margin-bottom: 6px; }
.pro-refer__title { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: var(--pro-text); font-weight: 700; margin: 0 0 6px; letter-spacing: -0.015em; }
.pro-refer__sub { color: var(--pro-dim); font-size: 14px; line-height: 1.55; margin: 0; max-width: 540px; }
.pro-refer__stats { display: flex; gap: 14px; }
.pro-refer__stat { text-align: center; min-width: 64px; }
.pro-refer__stat-num { font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 700; color: var(--pro-emerald); }
.pro-refer__stat-lbl { font-size: 11px; color: var(--pro-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.pro-refer__link { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-refer__input {
  flex: 1; min-width: 220px; padding: 12px 14px;
  background: #0d1220; border: 1px solid var(--pro-line-2); color: var(--pro-text);
  border-radius: 10px; font-size: 13px; font-family: "JetBrains Mono", monospace;
}
.pro-refer__input:focus { outline: none; border-color: var(--pro-emerald); box-shadow: 0 0 0 3px rgba(46,255,197,0.15); }
.pro-refer__copy {
  padding: 12px 20px; background: var(--pro-emerald); color: #0d1220;
  border: none; border-radius: 10px; font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.pro-refer__copy:hover { filter: brightness(1.1); }

/* ── P16: 14-day free-trial countdown ──────────────────────────── */

/* Days-left meter — lives inside the demo banner, above the fold.
   Gradient fill, smooth width transition, color-shifts by stage
   (cyan → amber → magenta) as the trial burns down. */
.pro-trial-meter {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(10, 12, 24, 0.4);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius-sm);
  max-width: 560px;
}
.pro-trial-meter__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
}
.pro-trial-meter__label {
  font-size: 12px; color: var(--pro-text); font-weight: 500;
  letter-spacing: 0.01em;
}
.pro-trial-meter__label strong {
  font-family: "JetBrains Mono", monospace; font-size: 15px;
  color: var(--pro-text); font-weight: 700; margin-right: 2px;
}
.pro-trial-meter__count {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--pro-dim); letter-spacing: 0.04em;
}
.pro-trial-meter__bar {
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.pro-trial-meter__fill {
  height: 100%; border-radius: 999px;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1),
              background 300ms ease;
  box-shadow: 0 0 20px -2px currentColor;
}
.pro-trial-meter__fill--fresh {
  background: linear-gradient(90deg, var(--pro-cyan), var(--pro-emerald));
  color: rgba(0,224,255,0.55);
}
.pro-trial-meter__fill--warning {
  background: linear-gradient(90deg, var(--pro-amber), var(--pro-copper));
  color: rgba(255,176,32,0.55);
}
.pro-trial-meter__fill--expired {
  background: linear-gradient(90deg, var(--pro-magenta), #c2185b);
  color: rgba(255,47,146,0.55);
}
.pro-trial-meter__fill--active {
  background: linear-gradient(90deg, var(--pro-emerald), var(--pro-cyan));
  color: rgba(0,227,154,0.55);
}

/* Amber urgency banner — days 8-13. Sits above the kanban board,
   doesn't replace it, adds social proof + CTA. */
.pro-trial-warning {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  margin: 0 0 20px; padding: 16px 22px;
  background: linear-gradient(135deg, rgba(255,176,32,0.08), rgba(217,122,31,0.06));
  border: 1px solid rgba(255,176,32,0.35);
  border-left: 4px solid var(--pro-amber);
  border-radius: var(--pro-radius);
  box-shadow: 0 10px 30px -20px rgba(255,176,32,0.4);
}
@media (max-width: 780px) {
  .pro-trial-warning { grid-template-columns: auto 1fr; }
  .pro-trial-warning .pro-btn { grid-column: 1 / -1; margin-top: 4px; }
}
.pro-trial-warning__icon { font-size: 26px; line-height: 1; }
.pro-trial-warning__title {
  font-size: 15px; font-weight: 700; color: var(--pro-text);
  margin-bottom: 3px; letter-spacing: -0.005em;
}
.pro-trial-warning__text {
  font-size: 13px; color: var(--pro-dim); line-height: 1.5; max-width: 520px;
}
.pro-trial-warning__text strong { color: var(--pro-text); font-weight: 600; }

/* Paywall — day 14+. Kanban renders blurred underneath so the
   contractor sees what they're unlocking, wrapper blocks interaction. */
.pro-paywall {
  position: relative; margin-bottom: 20px;
  border-radius: var(--pro-radius); overflow: hidden;
  min-height: 360px;
}
.pro-paywall__blurred {
  filter: blur(8px) saturate(0.6);
  pointer-events: none; user-select: none;
  opacity: 0.55;
}
.pro-paywall__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(217,122,31,0.22), transparent 70%),
    rgba(6, 7, 15, 0.68);
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  border: 1px solid rgba(217,122,31,0.35);
  border-radius: var(--pro-radius);
}
.pro-paywall__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--pro-copper); text-transform: uppercase; margin-bottom: 10px;
}
.pro-paywall__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px; font-weight: 700; color: var(--pro-text);
  letter-spacing: -0.015em; line-height: 1.2;
  max-width: 520px; margin: 0 0 12px;
}
.pro-paywall__text {
  font-size: 14px; color: var(--pro-dim); line-height: 1.6;
  max-width: 520px; margin: 0 0 22px;
}
.pro-paywall__text strong { color: var(--pro-text); font-weight: 600; }
.pro-paywall__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── Return-to-homeowner-site link in /pro nav ──────────────────── */
.pro-nav__actions {
  display: flex; align-items: center; gap: 8px;
}
.pro-nav__return {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pro-nav__return:hover {
  color: var(--pro-text); border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}
.pro-nav__signout {
  padding: 6px 12px !important; min-height: auto !important; font-size: 12px !important;
}

/* ── Devise auth surface (sign in, password reset) ──────────────── */
.pro-auth {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  max-width: 1080px; margin: 60px auto;
  padding: 0 20px;
  align-items: stretch;
}
@media (min-width: 880px) {
  .pro-auth { grid-template-columns: minmax(0, 460px) 1fr; gap: 32px; }
}

/* Both panels share the dashboard card pattern (solid background, real
   border, real shadow) so they feel native to the rest of /pro. */
.pro-auth__card,
.pro-auth__side {
  background: #14162a;
  border: 1px solid var(--pro-line-2);
  border-radius: var(--pro-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.pro-auth__card { padding: 36px 32px; }
.pro-auth__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--pro-dim); margin-bottom: 22px;
}
.pro-auth__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px; line-height: 1.15; font-weight: 700;
  color: var(--pro-text); margin: 0 0 10px;
}
.pro-auth__sub {
  color: var(--pro-dim); font-size: 14px;
  line-height: 1.55; margin: 0 0 24px;
}
.pro-auth__links {
  display: flex; align-items: center; flex-wrap: wrap;
  font-size: 13px; margin-top: 18px;
}
.pro-auth__link {
  color: var(--pro-dim); text-decoration: none;
  border-bottom: 1px dashed var(--pro-line-2); padding-bottom: 1px;
}
.pro-auth__link:hover {
  color: var(--pro-text); border-bottom-color: var(--pro-cyan);
}
.pro-auth__link--accent {
  color: var(--pro-cyan); border-bottom-color: rgba(0,224,255,0.4);
}
.pro-auth__link--accent:hover {
  color: var(--pro-emerald); border-bottom-color: var(--pro-emerald);
}

.pro-auth__return {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--pro-line);
}
.pro-auth__return-link {
  color: var(--pro-muted); font-size: 13px; text-decoration: none;
  transition: color .15s ease;
}
.pro-auth__return-link:hover { color: var(--pro-text); }

/* Right-hand promo panel — same card chrome + accent strip up the left. */
.pro-auth__side {
  padding: 32px 28px;
  position: relative; overflow: hidden;
}
.pro-auth__side::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--pro-cyan) 0%, var(--pro-emerald) 100%);
}
.pro-auth__side-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--pro-cyan); text-transform: uppercase;
  margin-bottom: 14px;
}
.pro-auth__side-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; line-height: 1.3; font-weight: 700;
  color: var(--pro-text); margin: 0 0 22px;
}
.pro-auth__side-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.pro-auth__side-list li {
  color: var(--pro-text); font-size: 15px; font-weight: 500;
  line-height: 1.5;
}

/* ──────── Tier 2A: Lead photos on the contractor dashboard ──────── */
.pro-lead__pill--claim {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}
.pro-lead__pill--photos {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
}
.pro-lead__photos {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 6px;
}
.pro-lead__photo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--pro-line);
  flex-shrink: 0;
}
.pro-detail__photos-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pro-line);
}
.pro-detail__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.pro-detail__photo-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--pro-line);
  aspect-ratio: 1 / 1;
  transition: border-color 0.12s ease;
}
.pro-detail__photo-link:hover {
  border-color: var(--pro-cyan);
}
.pro-detail__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pro-detail__photos-help {
  font-size: 12px;
  color: var(--pro-dim);
  margin-top: 8px;
}

/* ──────── /pro/join — tier comparison table ──────── */
.pro-tiers {
  margin: 0 0 32px;
}
.pro-tiers__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pro-text);
  margin: 0 0 6px;
}
.pro-tiers__sub {
  color: var(--pro-dim);
  font-size: 14px;
  margin: 0 0 18px;
  max-width: 600px;
}
.pro-tiers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) {
  .pro-tiers__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pro-tiers__grid { grid-template-columns: 1fr; }
}
.pro-tier {
  position: relative;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
}
.pro-tier--founding {
  background: linear-gradient(180deg, rgba(46,255,197,0.05) 0%, rgba(20,22,38,0.72) 100%);
  border-color: rgba(46,255,197,0.35);
}
.pro-tier--featured {
  border-color: rgba(0,224,255,0.35);
  box-shadow: 0 0 24px rgba(0,224,255,0.08);
}
.pro-tier__flag {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--pro-emerald);
  color: #04050a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.pro-tier--featured .pro-tier__flag {
  background: var(--pro-cyan);
}
.pro-tier__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  color: var(--pro-text);
  margin: 4px 0 8px;
}
.pro-tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.pro-tier__price-num {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--pro-text);
}
.pro-tier__price-unit {
  font-size: 13px;
  color: var(--pro-dim);
}
.pro-tier__price-note {
  font-size: 12px;
  color: var(--pro-dim);
  margin-bottom: 14px;
}
.pro-tier__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--pro-text);
}
.pro-tier__features li {
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.pro-tier__features li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--pro-dim);
}
.pro-tier__feature--yes {
  color: var(--pro-emerald);
}
.pro-tier__feature--yes::before {
  content: "" !important;
}
.pro-tier__feature--no {
  color: var(--pro-muted);
}
.pro-tier__yes-mark {
  display: inline-block;
  margin-left: 4px;
  color: var(--pro-emerald);
  font-weight: 700;
}
.pro-tier__no-mark {
  color: var(--pro-muted);
  font-weight: 700;
}
.pro-tiers__footnote {
  margin-top: 16px;
  font-size: 12px;
  color: var(--pro-dim);
  line-height: 1.5;
  max-width: 720px;
}

/* ──────── /pro/billing — pending Stripe state ──────── */
.pro-detail__pending {
  display: inline-block;
  padding: 10px 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--pro-muted);
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--pro-line-2);
  border-radius: var(--pro-radius-sm);
}

/* ──────── Public contractor profile (mirror of homeowner.css)
   The public profile page is rendered inside the homeowner layout
   (light theme), but shipping these rules here too means an admin
   preview of the page from the dark /pro shell still looks coherent.
   ──────── */
.pro-public__hero { padding: 30px 0; }
.pro-public__head {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.pro-public__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pro-card);
  border: 2px solid var(--pro-line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pro-public__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pro-public__avatar-initials {
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  color: var(--pro-cyan);
  font-weight: 700;
}
.pro-public__badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pro-public__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--pro-text);
}
.pro-public__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pro-public__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--pro-text);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
 * /pro/join — billion-dollar landing page
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero ──────────────────────────────────────────────────── */
.pro-hero {
  margin: 4px 0 36px;
  padding: 36px 4px 28px;
  position: relative;
}
.pro-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 224, 255, 0.06);
  border: 1px solid rgba(0, 224, 255, 0.18);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pro-cyan);
  margin-bottom: 18px;
}
.pro-hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pro-emerald);
  box-shadow: 0 0 12px rgba(0, 227, 154, 0.7);
  animation: pro-pulse 2.4s ease-in-out infinite;
}
.pro-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 44px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--pro-text);
  margin: 0 0 16px;
  max-width: 780px;
}
.pro-hero__title-accent {
  background: linear-gradient(135deg, var(--pro-cyan) 0%, var(--pro-emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pro-hero__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pro-dim);
  max-width: 700px;
  margin: 0 0 26px;
}
.pro-hero__lede strong { color: var(--pro-text); font-weight: 600; }
.pro-hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.pro-hero__chips {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pro-hero__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pro-line-2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--pro-text);
}

@media (max-width: 720px) {
  .pro-hero { padding: 18px 0 16px; }
  .pro-hero__title { font-size: 32px; }
  .pro-hero__lede { font-size: 15px; }
}

/* ── XL button modifier ──────────────────────────────────────── */
.pro-btn--xl {
  padding: 18px 28px;
  font-size: 16px;
  min-height: 60px;
}
.pro-btn--full {
  width: 100%;
}

/* ── 2. ROI math ─────────────────────────────────────────────── */
.pro-roi {
  margin: 0 0 40px;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(0,227,154,0.04) 0%, rgba(20,22,38,0.6) 100%);
  border: 1px solid rgba(0,227,154,0.18);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.pro-roi::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0,227,154,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.pro-roi__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pro-emerald);
  margin-bottom: 6px;
}
.pro-roi__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.pro-roi__sub {
  color: var(--pro-dim);
  font-size: 14px;
  max-width: 620px;
  margin: 0 0 22px;
}
.pro-roi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 880px) { .pro-roi__grid { grid-template-columns: 1fr; } }
.pro-roi__card {
  position: relative;
  padding: 20px 20px 18px;
  background: rgba(20, 22, 38, 0.6);
  border: 1px solid var(--pro-line-2);
  border-radius: 14px;
}
.pro-roi__card--featured {
  border-color: rgba(0,224,255,0.4);
  box-shadow: 0 0 24px rgba(0,224,255,0.08);
}
.pro-roi__card-flag {
  position: absolute;
  top: -10px; left: 16px;
  background: var(--pro-cyan);
  color: var(--pro-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.pro-roi__card-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pro-dim);
  margin-bottom: 6px;
}
.pro-roi__card-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.pro-roi__card-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pro-dim);
}
.pro-roi__card-sub strong { color: var(--pro-text); font-weight: 600; }
.pro-roi__footnote {
  font-size: 12px;
  color: var(--pro-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

/* ── 3. Tier-table head + claims callout ─────────────────────── */
.pro-tiers__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}
@media (max-width: 880px) {
  .pro-tiers__head { grid-template-columns: 1fr; }
}
.pro-tiers__claim-callout {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(0,227,154,0.04));
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: var(--pro-radius);
  max-width: 360px;
}
.pro-tiers__claim-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pro-violet);
  margin-bottom: 4px;
}
.pro-tiers__claim-text {
  font-size: 13px;
  color: var(--pro-text);
  line-height: 1.5;
}
.pro-tiers__claim-text strong { color: var(--pro-violet); font-weight: 700; }

/* ── 4. vs. shared-lead networks ─────────────────────────────── */
.pro-vs {
  margin: 0 0 40px;
  padding: 30px 28px;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 18px;
}
.pro-vs__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pro-magenta);
  margin-bottom: 6px;
}
.pro-vs__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.pro-vs__table {
  display: grid;
  gap: 0;
  border: 1px solid var(--pro-line-2);
  border-radius: 12px;
  overflow: hidden;
}
.pro-vs__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 0;
}
.pro-vs__row > * {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--pro-line-2);
}
.pro-vs__row:last-child > * { border-bottom: none; }
.pro-vs__row--head > * {
  background: rgba(255,255,255,0.04);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pro-dim);
}
.pro-vs__label { color: var(--pro-text); font-weight: 600; }
.pro-vs__yes {
  color: var(--pro-emerald);
  font-weight: 500;
  background: rgba(0,227,154,0.04);
}
.pro-vs__yes::before {
  content: "✓ ";
  color: var(--pro-emerald);
  font-weight: 700;
  margin-right: 4px;
}
.pro-vs__no {
  color: var(--pro-dim);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(255,47,146,0.4);
}
@media (max-width: 720px) {
  .pro-vs__row { grid-template-columns: 1fr; }
  .pro-vs__row > * { border-bottom: 1px solid var(--pro-line); }
  .pro-vs__row .pro-vs__label {
    background: rgba(255,255,255,0.03);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pro-dim);
  }
}

/* ── 5. Trust block ──────────────────────────────────────────── */
.pro-trust {
  margin: 0 0 40px;
  padding: 30px 28px;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 18px;
}
.pro-trust__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.pro-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .pro-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pro-trust__grid { grid-template-columns: 1fr; } }
.pro-trust__cell {
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pro-line-2);
  border-radius: 12px;
}
.pro-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: rgba(0,227,154,0.12);
  color: var(--pro-emerald);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.pro-trust__head {
  font-size: 14px;
  font-weight: 700;
  color: var(--pro-text);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.pro-trust__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pro-dim);
  margin: 0;
}
.pro-trust__body a {
  color: var(--pro-cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,224,255,0.3);
}

/* ── 6. Form wrap ────────────────────────────────────────────── */
.pro-join-form-wrap {
  scroll-margin-top: 80px;
  margin: 0 0 40px;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(217,122,31,0.05) 0%, rgba(20,22,38,0.6) 100%);
  border: 1px solid rgba(217,122,31,0.25);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.pro-join-form__head {
  margin-bottom: 22px;
  max-width: 620px;
}
.pro-join-form__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(217,122,31,0.12);
  border: 1px solid rgba(217,122,31,0.3);
  color: var(--pro-copper);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pro-join-form__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.pro-join-form__sub {
  color: var(--pro-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.pro-join-form__small {
  text-align: center;
  font-size: 12px;
  color: var(--pro-muted);
  margin: 12px 0 0;
}
.pro-form--wide { max-width: 720px; }
.pro-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .pro-form__row { grid-template-columns: 1fr; } }

.pro-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.pro-city-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #141629;
  border: 1px solid var(--pro-line-2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--pro-text);
  transition: border-color .12s ease, background .12s ease;
}
.pro-city-chip:hover { border-color: var(--pro-line-2); background: #1a1d34; }
.pro-city-chip input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--pro-cyan);
  flex-shrink: 0;
}
.pro-city-chip:has(input:checked) {
  border-color: var(--pro-cyan);
  background: rgba(0,224,255,0.06);
}

.pro-free-callout {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: rgba(46,255,197,0.06);
  border: 1px solid rgba(46,255,197,0.2);
  border-radius: 10px;
}
.pro-free-callout__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pro-emerald);
  margin-bottom: 4px;
}
.pro-free-callout__text {
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

/* ── 7. FAQ ──────────────────────────────────────────────────── */
.pro-faq { margin: 0 0 40px; }
.pro-faq__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.pro-faq__list {
  display: grid;
  gap: 8px;
}
.pro-faq__item {
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .12s ease;
}
.pro-faq__item[open] { border-color: rgba(0,224,255,0.3); }
.pro-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pro-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pro-faq__q::-webkit-details-marker { display: none; }
.pro-faq__q::after {
  content: "+";
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  color: var(--pro-dim);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.pro-faq__item[open] .pro-faq__q::after { content: "−"; color: var(--pro-cyan); }
.pro-faq__a {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pro-dim);
}

/* ── 8. Final CTA strip + sticky mobile bar ──────────────────── */
.pro-final-cta {
  margin: 0 0 80px;
  padding: 30px 28px;
  background: linear-gradient(135deg, rgba(217,122,31,0.1), rgba(0,224,255,0.06));
  border: 1px solid rgba(217,122,31,0.35);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .pro-final-cta { grid-template-columns: 1fr; margin-bottom: 100px; }
}
.pro-final-cta__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pro-copper);
  margin-bottom: 8px;
}
.pro-final-cta__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  line-height: 1.15;
}
.pro-final-cta__sub {
  color: var(--pro-dim);
  font-size: 14px;
  margin: 0;
}

/* Sticky mobile CTA — only renders below 720px */
.pro-sticky-cta {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 50;
  text-align: center;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--pro-copper), #f09332);
  color: #18130a;
  font-weight: 700;
  font-size: 15px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(217,122,31,0.65),
              0 0 0 1px rgba(0,0,0,0.25);
}
.pro-sticky-cta:hover { filter: brightness(1.05); }
@media (max-width: 720px) {
  .pro-sticky-cta { display: block; }
}

/* ════════════════════════════════════════════════════════════════════
 * /pro (demo dashboard) — guided conversion funnel
 * ════════════════════════════════════════════════════════════════════ */

/* ── Top-of-page demo hero ───────────────────────────────────── */
.pro-demo-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  margin-bottom: 18px;
  background:
    radial-gradient(700px 250px at 100% 0%, rgba(217,122,31,0.18), transparent 65%),
    linear-gradient(135deg, rgba(217,122,31,0.14), rgba(20,22,38,0.92));
  border: 1px solid rgba(217,122,31,0.45);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset,
              0 24px 60px -28px rgba(217,122,31,0.55);
  overflow: hidden;
}
@media (max-width: 880px) {
  .pro-demo-hero { grid-template-columns: auto 1fr; }
  .pro-demo-hero__actions { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
}
.pro-demo-hero__pulse {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--pro-copper);
  box-shadow: 0 0 24px rgba(217,122,31,0.9);
  animation: pro-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.pro-demo-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pro-copper);
  margin-bottom: 4px;
}
.pro-demo-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  line-height: 1.2;
}
.pro-demo-hero__text {
  font-size: 13.5px;
  color: var(--pro-dim);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}
.pro-demo-hero__text strong { color: var(--pro-text); font-weight: 600; }
.pro-demo-hero__actions {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pro-demo-hero__note {
  font-size: 11px;
  color: var(--pro-muted);
}
@media (max-width: 880px) {
  .pro-demo-hero__actions { align-items: flex-start; }
}

/* ── Dashboard head row ──────────────────────────────────────── */
.pro-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.pro-dash-head__title { margin: 0; }
.pro-dash-head__meta {
  color: var(--pro-dim);
  margin: 4px 0 0;
  font-size: 14px;
}
.pro-dash-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pro-board-heading {
  font-size: 14px;
  color: var(--pro-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 28px 0 12px;
  font-weight: 600;
}
.pro-board-heading__demo {
  color: var(--pro-amber);
  font-weight: 600;
}

/* ── KPI "what unlocks" preview chip ─────────────────────────── */
.pro-kpi__unlock {
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--pro-copper);
  background: rgba(217,122,31,0.08);
  border: 1px dashed rgba(217,122,31,0.3);
  border-radius: 6px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ── Demo lead-card footer note ──────────────────────────────── */
.pro-lead__demo-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(217,122,31,0.2);
  font-size: 11px;
  color: var(--pro-muted);
  font-style: italic;
}

/* ── Why activate today ──────────────────────────────────────── */
.pro-why-activate {
  margin: 32px 0 28px;
  padding: 26px 26px 22px;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 16px;
}
.pro-why-activate__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.pro-why-activate__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .pro-why-activate__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pro-why-activate__grid { grid-template-columns: 1fr; } }
.pro-why-activate__cell {
  padding: 16px 16px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pro-line-2);
  border-radius: 12px;
}
.pro-why-activate__cell--featured {
  border-color: rgba(217,122,31,0.4);
  background: rgba(217,122,31,0.04);
  box-shadow: 0 0 24px rgba(217,122,31,0.06);
}
.pro-why-activate__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(0,224,255,0.1);
  color: var(--pro-cyan);
  border: 1px solid rgba(0,224,255,0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pro-why-activate__chip--copper {
  background: rgba(217,122,31,0.15);
  color: var(--pro-copper);
  border-color: rgba(217,122,31,0.35);
}
.pro-why-activate__chip--violet {
  background: rgba(167,139,250,0.12);
  color: var(--pro-violet);
  border-color: rgba(167,139,250,0.3);
}
.pro-why-activate__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pro-dim);
  margin: 0;
}
.pro-why-activate__body strong { color: var(--pro-text); font-weight: 600; }

/* ── Mini tier strip (inline pricing recap) ──────────────────── */
.pro-mini-tiers {
  margin: 0 0 24px;
  padding: 22px 24px 20px;
  background: var(--pro-card);
  border: 1px solid var(--pro-line);
  border-radius: 16px;
}
.pro-mini-tiers__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.pro-mini-tiers__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--pro-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.pro-mini-tiers__link {
  font-size: 13px;
  color: var(--pro-cyan);
  text-decoration: none;
  font-weight: 500;
}
.pro-mini-tiers__link:hover { color: var(--pro-emerald); }
.pro-mini-tiers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 880px) { .pro-mini-tiers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pro-mini-tiers__grid { grid-template-columns: 1fr; } }
.pro-mini-tier {
  position: relative;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pro-line-2);
  border-radius: 10px;
}
.pro-mini-tier--founding {
  border-color: rgba(46,255,197,0.4);
  background: rgba(46,255,197,0.05);
}
.pro-mini-tier--featured {
  border-color: rgba(0,224,255,0.4);
  background: rgba(0,224,255,0.04);
}
.pro-mini-tier__badge {
  position: absolute;
  top: -8px; left: 10px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--pro-emerald);
  color: #04050a;
}
.pro-mini-tier--featured .pro-mini-tier__badge {
  background: var(--pro-cyan);
  color: var(--pro-ink);
}
.pro-mini-tier__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pro-dim);
  margin-bottom: 4px;
}
.pro-mini-tier__price {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--pro-text);
}
.pro-mini-tier__price span {
  font-size: 11px;
  font-weight: 400;
  color: var(--pro-dim);
}
.pro-mini-tier__feat {
  font-size: 11px;
  color: var(--pro-dim);
  margin-top: 6px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
 * /pro/billing — activation hero (demo contractors only)
 * ════════════════════════════════════════════════════════════════════ */
.pro-bill-hero {
  margin: 0 0 22px;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(217,122,31,0.12), rgba(0,224,255,0.06));
  border: 1px solid rgba(217,122,31,0.4);
  border-radius: 16px;
}
.pro-bill-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pro-copper);
  margin-bottom: 8px;
}
.pro-bill-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.15;
}
.pro-bill-hero__sub {
  color: var(--pro-dim);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}


/* ──────── QA fix A3 — mobile nav breakpoint ──────── */
/* Pro nav had no mobile rules: brand label was being cut at 375 px,
   "Sign in" partially clipped, "← Homeowner site" hidden behind
   scroll. /pro/join is a paid-acquisition landing page so this is
   ship-blocking. Below 720 px we collapse to: brand-only logo +
   "← Site" return + sign-in/up CTAs in a stacked second row. */
@media (max-width: 720px) {
  .pro-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .pro-nav__brand {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .pro-nav__brand span:not(.pro-nav__dot) {
    /* Hide the long brand text — keep just the pulsing dot + a short label */
    font-size: 0;
  }
  .pro-nav__brand span:not(.pro-nav__dot)::after {
    content: "NAZ · PRO";
    font-size: 11px;
  }
  .pro-nav__links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
  }
  .pro-nav__link {
    padding: 6px 10px;
    font-size: 12px;
  }
  .pro-nav__actions {
    flex-shrink: 0;
    gap: 4px;
  }
  .pro-nav__return {
    font-size: 0; /* hide "Homeowner site" text */
    padding: 6px 8px;
  }
  .pro-nav__return::after {
    content: "← Site";
    font-size: 11px;
  }
  .pro-nav__signout {
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* ──────── Plan picker (/pro/billing/upgrade) ──────── */
.plan-grid {
  max-width: 1140px;
  margin: 32px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1040px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .plan-grid { grid-template-columns: 1fr; } }

.plan-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--pro-line, #e2e8f0);
  border-radius: 14px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(15, 42, 68, 0.18);
  border-color: var(--pro-ink, #0f2a44);
}
.plan-card--featured {
  border-color: var(--pro-copper, #b87333);
  box-shadow: 0 8px 24px -8px rgba(184, 115, 51, 0.30);
}
.plan-card--current {
  border-color: var(--pro-green, #2e6f4e);
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 80%);
}
.plan-card--chosen {
  border-color: var(--pro-ink, #0f2a44);
  box-shadow: 0 0 0 3px rgba(15, 42, 68, 0.10), 0 12px 30px -10px rgba(15, 42, 68, 0.25);
}
.plan-card__ribbon {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--pro-copper, #b87333);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-card__current-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--pro-green, #2e6f4e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-card__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--pro-ink, #0f2a44);
  letter-spacing: -0.01em;
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--pro-ink, #0f2a44);
}
.plan-card__currency { font-size: 18px; font-weight: 600; opacity: 0.7; }
.plan-card__amount   { font-size: 40px; font-weight: 800; letter-spacing: -0.025em; }
.plan-card__cadence  { font-size: 14px; font-weight: 500; opacity: 0.7; margin-left: 2px; }
.plan-card__per-lead {
  font-size: 12px;
  color: var(--pro-text-dim, #475569);
  font-weight: 500;
}

.plan-card__feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px dashed var(--pro-line, #e2e8f0);
  padding-top: 14px;
}
.plan-card__feats li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
}
.plan-card__feat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--pro-ink, #0f2a44);
  letter-spacing: -0.01em;
  text-align: right;
}
.plan-card__feat-num--check {
  color: var(--pro-green, #2e6f4e);
  font-size: 22px;
}
.plan-card__feat-num--dash {
  color: var(--pro-text-dim, #94a3b8);
  font-weight: 600;
}
.plan-card__feat-lbl {
  font-size: 13px;
  color: var(--pro-text-dim, #475569);
  line-height: 1.35;
}
.plan-card__feat-lbl--dim { opacity: 0.6; }

.plan-card__cta { margin-top: auto; }
.plan-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--pro-ink, #0f2a44);
  color: var(--pro-ink, #0f2a44);
  background: #fff;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  cursor: pointer;
}
.plan-card__btn:hover {
  background: var(--pro-ink, #0f2a44);
  color: #fff;
}
.plan-card__btn:active { transform: scale(0.98); }
.plan-card__btn--featured {
  background: var(--pro-copper, #b87333);
  border-color: var(--pro-copper, #b87333);
  color: #fff;
}
.plan-card__btn--featured:hover { background: #9a5e2a; border-color: #9a5e2a; }
.plan-card__btn--current {
  background: var(--pro-green, #2e6f4e);
  border-color: var(--pro-green, #2e6f4e);
  color: #fff;
  cursor: default;
}
.plan-card__btn--current:hover { background: var(--pro-green, #2e6f4e); }

/* ── Selected-plan checkout panel ───────────────────────────────── */
.plan-checkout {
  max-width: 760px;
  margin: 28px auto;
  padding: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
  border: 2px solid var(--pro-ink, #0f2a44);
  border-radius: 16px;
  box-shadow: 0 14px 36px -14px rgba(15, 42, 68, 0.20);
}
@media (max-width: 600px) {
  .plan-checkout { margin: 22px 16px; padding: 22px 18px; border-radius: 12px; }
}
.plan-checkout__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.plan-checkout__eyebrow {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pro-text-dim, #475569);
  font-weight: 700;
  margin-bottom: 4px;
}
.plan-checkout__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--pro-ink, #0f2a44);
  letter-spacing: -0.015em;
}
.plan-checkout__sub {
  font-size: 14px;
  color: var(--pro-text-dim, #475569);
  margin: 0;
  line-height: 1.5;
}
.plan-checkout__delta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-checkout__delta-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--pro-copper, #b87333);
  letter-spacing: -0.01em;
}
.plan-checkout__delta-num--down { color: var(--pro-green, #2e6f4e); }
.plan-checkout__delta-lbl {
  font-size: 11px;
  color: var(--pro-text-dim, #475569);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.plan-checkout__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.plan-checkout__section { display: flex; flex-direction: column; gap: 8px; }
.plan-checkout__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--pro-ink, #0f2a44);
  letter-spacing: 0.02em;
}
.plan-checkout__lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--pro-text-dim, #475569);
  letter-spacing: 0;
}
.plan-checkout__stripe-mount {
  background: #fff;
  border: 1.5px solid var(--pro-line, #cbd5e1);
  border-radius: 10px;
  padding: 14px 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.plan-checkout__stripe-mount:focus-within {
  border-color: var(--pro-ink, #0f2a44);
  box-shadow: 0 0 0 3px rgba(15, 42, 68, 0.12);
}
.plan-checkout__stripe-loading {
  font-size: 13px;
  color: var(--pro-text-dim, #94a3b8);
  font-style: italic;
}
.plan-checkout__stripe-error {
  min-height: 16px;
  font-size: 12px;
  color: #c93838;
  font-weight: 600;
}

.plan-checkout__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  background: var(--pro-ink, #0f2a44);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(15, 42, 68, 0.30);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.plan-checkout__submit:hover:not(:disabled) {
  background: #1a3d5e;
  box-shadow: 0 10px 24px -6px rgba(15, 42, 68, 0.38);
}
.plan-checkout__submit:active:not(:disabled) { transform: scale(0.985); }
.plan-checkout__submit:disabled,
.plan-checkout__submit--disabled {
  background: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}
.plan-checkout__legal {
  font-size: 11px;
  color: var(--pro-text-dim, #94a3b8);
  margin: 0;
  line-height: 1.5;
}

.plan-checkout__not-ready {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
}
.plan-checkout__not-ready-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.plan-checkout__not-ready-title {
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 4px;
}
.plan-checkout__not-ready-body {
  font-size: 12px;
  color: #78350f;
  margin: 0;
  line-height: 1.55;
}
.plan-checkout__not-ready-body code {
  background: rgba(146, 64, 14, 0.10);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: "SFMono-Regular", Menlo, monospace;
}

/* ── Trust strip ────────────────────────────────────────────────── */
.plan-trust {
  max-width: 1040px;
  margin: 36px auto 12px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 720px) { .plan-trust { grid-template-columns: 1fr; gap: 14px; } }
.plan-trust__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: #f8fafb;
  border: 1px solid var(--pro-line, #e2e8f0);
  border-radius: 10px;
}
.plan-trust__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(15, 42, 68, 0.06);
  color: var(--pro-ink, #0f2a44);
  align-items: center;
  justify-content: center;
}
.plan-trust__head {
  font-size: 14px;
  font-weight: 700;
  color: var(--pro-ink, #0f2a44);
  margin-bottom: 2px;
}
.plan-trust__body {
  font-size: 12px;
  color: var(--pro-text-dim, #475569);
  line-height: 1.5;
}

.plan-back {
  max-width: 1140px;
  margin: 14px auto 40px;
  padding: 0 20px;
  font-size: 13px;
}
.plan-back a {
  color: var(--pro-text-dim, #475569);
  text-decoration: none;
}
.plan-back a:hover { color: var(--pro-ink, #0f2a44); }

/* ──────── Contractor dashboard v2 (April 2026 — clarity-first) ──── */

/* Primary "what to do next" hero. One per page. Color tied to the
   trial state via .pro-next--{copper|amber|emerald|cyan|navy|danger}. */
.pro-next {
  margin: 24px auto;
  max-width: 1180px;
  padding: 28px 32px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 14px 36px -16px rgba(15, 42, 68, 0.20);
  color: #fff;
}
.pro-next--copper  { background: linear-gradient(135deg, #b87333 0%, #8a5424 100%); }
.pro-next--amber   { background: linear-gradient(135deg, #d97a1f 0%, #a35717 100%); }
.pro-next--emerald { background: linear-gradient(135deg, #2e6f4e 0%, #1f4f37 100%); }
.pro-next--cyan    { background: linear-gradient(135deg, #0d9488 0%, #0f6e64 100%); }
.pro-next--navy    { background: linear-gradient(135deg, #1a3d5e 0%, #0f2a44 100%); }
.pro-next--danger  { background: linear-gradient(135deg, #c93838 0%, #8b2727 100%); }

.pro-next__body { flex: 1 1 480px; min-width: 0; }
.pro-next__eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 10px;
}
.pro-next__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  line-height: 1.15;
}
.pro-next__sub {
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
  opacity: 0.95;
  max-width: 720px;
}
.pro-next__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.pro-next__sub-cta {
  font-size: 12px;
  text-align: center;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* Big buttons inside the hero come in matching colors. */
.pro-btn--xl {
  padding: 18px 28px;
  font-size: 17px;
  border-radius: 12px;
  font-weight: 800;
}
.pro-btn--copper  { background: #fff; color: #8a5424; border: none; }
.pro-btn--amber   { background: #fff; color: #a35717; border: none; }
.pro-btn--emerald { background: #fff; color: #1f4f37; border: none; }
.pro-btn--cyan    { background: #fff; color: #0f6e64; border: none; }
.pro-btn--navy    { background: #fff; color: #0f2a44; border: none; }
.pro-btn--danger  { background: #fff; color: #8b2727; border: none; }
.pro-btn--copper:hover, .pro-btn--amber:hover, .pro-btn--emerald:hover,
.pro-btn--cyan:hover, .pro-btn--navy:hover, .pro-btn--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.25);
}

/* Stats strip — 4 large numbers + plain-English labels. */
.pro-stats {
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .pro-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pro-stats { grid-template-columns: 1fr; } }
.pro-stats__cell {
  background: #fff;
  border: 1px solid var(--pro-line, #e2e8f0);
  border-left: 4px solid var(--pro-line, #e2e8f0);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pro-stats__cell--new  { border-left-color: var(--pro-copper, #b87333); }
.pro-stats__cell--work { border-left-color: var(--pro-cyan, #0d9488); }
.pro-stats__cell--won  { border-left-color: var(--pro-green, #2e6f4e); }
.pro-stats__cell--mrr  { border-left-color: var(--pro-ink, #0f2a44); }
.pro-stats__num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--pro-ink, #0f2a44);
  line-height: 1;
}
.pro-stats__lbl {
  font-size: 14px;
  font-weight: 700;
  color: var(--pro-ink, #0f2a44);
  margin-top: 4px;
}
.pro-stats__hint {
  font-size: 12px;
  color: var(--pro-text-dim, #475569);
  line-height: 1.4;
}

/* Quick-action grid — 6 big cards with one-tap navigation. */
.pro-quick {
  max-width: 1180px;
  margin: 24px auto;
  padding: 0 24px;
}
.pro-quick__heading {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--pro-ink, #0f2a44);
  letter-spacing: -0.01em;
}
.pro-quick__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .pro-quick__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pro-quick__grid { grid-template-columns: 1fr; } }
.pro-quick__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: #fff;
  border: 1.5px solid var(--pro-line, #e2e8f0);
  border-radius: 12px;
  text-decoration: none;
  color: var(--pro-ink, #0f2a44);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pro-quick__card:hover {
  transform: translateY(-2px);
  border-color: var(--pro-ink, #0f2a44);
  box-shadow: 0 10px 22px -10px rgba(15, 42, 68, 0.20);
}
.pro-quick__card--disabled {
  opacity: 0.45;
  pointer-events: none;
}
.pro-quick__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}
.pro-quick__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pro-quick__sub {
  font-size: 12px;
  color: var(--pro-text-dim, #475569);
}

/* Leads section reframe — header + sub. */
.pro-leads {
  max-width: 1180px;
  margin: 28px auto 12px;
  padding: 0 24px;
}
.pro-leads__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pro-leads__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--pro-ink, #0f2a44);
}
.pro-leads__sub {
  font-size: 13px;
  color: var(--pro-text-dim, #475569);
  font-weight: 600;
}

/* Empty state — for trial day-1 contractors. */
.pro-empty {
  margin: 18px 0 0;
  padding: 28px 24px;
  background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
  border: 1.5px dashed var(--pro-line, #cbd5e1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.pro-empty__icon { font-size: 36px; }
.pro-empty__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  color: var(--pro-ink, #0f2a44);
}
.pro-empty__body {
  font-size: 14px;
  color: var(--pro-text-dim, #475569);
  margin: 0 0 10px;
  max-width: 600px;
  line-height: 1.55;
}
.pro-empty__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Trial banner kept for the in-flow countdown view. */
.pro-trial-banner {
  max-width: 1180px;
  margin: 16px auto;
  padding: 18px 22px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fcd34d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.pro-trial-banner--expired { background: #fef2f2; border-color: #fca5a5; }
.pro-trial-banner__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #92400e;
}
.pro-trial-banner__title {
  font-size: 17px;
  font-weight: 700;
  color: #78350f;
  margin: 4px 0;
}
.pro-trial-banner__text {
  font-size: 13px;
  color: #78350f;
  margin: 0 0 10px;
  line-height: 1.5;
}
.pro-trial-meter {
  margin-top: 6px;
  max-width: 360px;
}
.pro-trial-meter__row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #78350f;
  margin-bottom: 4px;
  font-weight: 600;
}
.pro-trial-meter__bar {
  height: 6px;
  background: rgba(146, 64, 14, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.pro-trial-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, #d97a1f 0%, #c93838 100%);
  border-radius: 999px;
  transition: width .3s ease;
}
.pro-trial-meter__fill--fresh    { background: linear-gradient(90deg, #2e6f4e 0%, #d97a1f 100%); }
.pro-trial-meter__fill--warning  { background: linear-gradient(90deg, #d97a1f 0%, #c93838 100%); }
.pro-trial-meter__fill--expired  { background: #c93838; }

/* a-badge--danger for the locked admin chip. */
.a-badge--danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }

/* ═══════════════════════════════════════════════════════════════════
   /pro/join — premium pricing section (April 2026 redesign)

   Goals:
     - Read like a Linear/Stripe pricing page: big numbers, breathing
       room, tier-tinted accents, prominent CTA.
     - Work flawlessly at every size (4 cols ≥ 1080, 2 cols 580–1080,
       1 col < 580). No content reflow surprises.
     - High-contrast CTAs that pass WCAG AA on the dark background.
     - Accessible focus rings (2px white/55% with offset) and
       prefers-reduced-motion respected.

   Namespace: `.pricing` / `.tier` (deliberately separate from legacy
   `.pro-tier*` markup which is still used by /pro/billing/upgrade).
   ═══════════════════════════════════════════════════════════════════ */

.pricing {
  position: relative;
  padding: 48px 0 56px;
  margin: 0 0 32px;
}

.pricing__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 4px;
}

/* ── Section head ── */
.pricing__head {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 16px;
}
.pricing__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pro-cyan, #00e0ff);
  padding: 6px 14px;
  background: rgba(0, 224, 255, 0.08);
  border: 1px solid rgba(0, 224, 255, 0.22);
  border-radius: 999px;
  margin-bottom: 16px;
}
.pricing__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pro-text);
  margin: 0 0 14px;
}
.pricing__title-accent {
  background: linear-gradient(135deg, #00e0ff 0%, #2effc5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing__sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pro-dim);
}

/* ── Founding banner ── */
.founding {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  margin: 0 16px 28px;
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(46, 255, 197, 0.10), transparent 70%),
    linear-gradient(135deg, rgba(46, 255, 197, 0.06) 0%, rgba(0, 224, 255, 0.04) 100%);
  border: 1px solid rgba(46, 255, 197, 0.30);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 40px rgba(46, 255, 197, 0.05);
}
.founding__medal {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 255, 197, 0.18) 0%, rgba(0, 224, 255, 0.12) 100%);
  border: 1px solid rgba(46, 255, 197, 0.35);
  color: #2effc5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.founding__head {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: #2effc5;
  margin-bottom: 6px;
}
.founding__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pro-text);
}
.founding__body strong { color: #2effc5; font-weight: 700; }

@media (max-width: 580px) {
  .founding { flex-direction: column; gap: 12px; padding: 20px; }
  .founding__medal { width: 40px; height: 40px; }
}

/* ── Grid ── */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  padding: 0 4px;
}
@media (max-width: 1080px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 16px; }
}
@media (max-width: 580px) {
  .pricing__grid { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
}

/* ── Card ── */
.tier {
  --tier-accent: #94a3b8;             /* default; per-tier override below */
  --tier-accent-soft: rgba(148, 163, 184, 0.18);
  --tier-glow: rgba(148, 163, 184, 0.10);

  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 24px;
  border: 1px solid var(--pro-line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, var(--pro-card) 0%, rgba(8, 9, 16, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 240ms ease,
    box-shadow 240ms ease;
  overflow: hidden;
}

/* Tier-tinted top accent bar (full-width across the card head) */
.tier::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tier-gradient, linear-gradient(90deg, #94a3b8, #cbd5e1));
}

/* Soft tier glow that intensifies on hover */
.tier::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  box-shadow: 0 0 32px var(--tier-glow);
}

.tier:hover {
  transform: translateY(-3px);
  border-color: var(--tier-accent);
}
.tier:hover::after { opacity: 1; }

/* Per-tier color accents — copper / silver / gold / violet */
.tier--bronze {
  --tier-accent: #d18347;
  --tier-accent-soft: rgba(209, 131, 71, 0.18);
  --tier-glow: rgba(209, 131, 71, 0.18);
  --tier-gradient: linear-gradient(90deg, #b06b3c 0%, #e0985a 100%);
}
.tier--silver {
  --tier-accent: #c1cad9;
  --tier-accent-soft: rgba(193, 202, 217, 0.16);
  --tier-glow: rgba(193, 202, 217, 0.14);
  --tier-gradient: linear-gradient(90deg, #8a94a6 0%, #d9e0eb 100%);
}
.tier--gold {
  --tier-accent: #f0cb5c;
  --tier-accent-soft: rgba(240, 203, 92, 0.16);
  --tier-glow: rgba(240, 203, 92, 0.22);
  --tier-gradient: linear-gradient(90deg, #d4a93a 0%, #f7d978 100%);
}
.tier--platinum {
  --tier-accent: #a78bfa;
  --tier-accent-soft: rgba(167, 139, 250, 0.18);
  --tier-glow: rgba(167, 139, 250, 0.22);
  --tier-gradient: linear-gradient(90deg, #6366f1 0%, #c4b5fd 100%);
}

/* Most-popular tier gets a permanent glow + slightly stronger border */
.tier--popular {
  border-color: rgba(240, 203, 92, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 32px rgba(240, 203, 92, 0.12),
    0 0 0 1px rgba(240, 203, 92, 0.10);
  transform: translateY(-2px);
}
.tier--popular:hover { transform: translateY(-5px); }

/* "Most popular" ribbon */
.tier__ribbon {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1209;
  background: linear-gradient(135deg, #f0cb5c 0%, #f7d978 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 14px rgba(240, 203, 92, 0.35);
  z-index: 1;
}
.tier__ribbon svg { color: #5b4407; }

/* ── Card head: name + price + tagline ── */
.tier__head {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tier__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pro-text);
  margin-bottom: 12px;
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
}
.tier__currency {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--pro-dim);
  position: relative;
  top: -22px;
}
.tier__amount {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pro-text);
  background: linear-gradient(180deg, #ffffff 0%, #c8cdd9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tier__period {
  font-size: 14px;
  color: var(--pro-dim);
  font-weight: 500;
}
.tier__tagline {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pro-dim);
  margin: 0;
}

/* ── Feature list ── */
.tier__feats {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tier__feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--pro-text);
}
.tier__feat-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--tier-accent);
  background: var(--tier-accent-soft);
  border-radius: 8px;
  letter-spacing: -0.02em;
}
.tier__feat-num-sub {
  font-size: 10px;
  font-weight: 600;
  margin-left: 1px;
  opacity: 0.85;
}
.tier__feat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  margin-left: 11px;          /* visually align with .tier__feat-num center */
}
.tier__feat--yes .tier__feat-icon {
  color: #1a1f3a;
  background: linear-gradient(135deg, #2effc5 0%, #00e0ff 100%);
}
.tier__feat--no .tier__feat-icon {
  color: var(--pro-muted, #5a637a);
  background: rgba(90, 99, 122, 0.12);
}
.tier__feat--no .tier__feat-lbl { color: var(--pro-muted, #5a637a); }
.tier__feat-lbl { flex: 1; }
.tier__feat-lbl strong { color: var(--pro-text); font-weight: 700; }

/* ── CTA buttons (high-contrast, WCAG AA) ── */
.tier__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
  margin-top: auto;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.tier__cta-arrow {
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tier__cta:hover .tier__cta-arrow { transform: translateX(3px); }
.tier__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 0 0 6px rgba(0, 224, 255, 0.42);
}

/* Bronze — copper outline */
.tier__cta--bronze {
  background: rgba(209, 131, 71, 0.10);
  color: #ffc89a;
  border-color: rgba(209, 131, 71, 0.45);
}
.tier__cta--bronze:hover {
  background: rgba(209, 131, 71, 0.20);
  border-color: #d18347;
  color: #ffd6ad;
  box-shadow: 0 8px 24px rgba(209, 131, 71, 0.20);
}
/* Silver — neutral outline */
.tier__cta--silver {
  background: rgba(193, 202, 217, 0.08);
  color: #e6ecf3;
  border-color: rgba(193, 202, 217, 0.40);
}
.tier__cta--silver:hover {
  background: rgba(193, 202, 217, 0.18);
  border-color: #c1cad9;
  box-shadow: 0 8px 24px rgba(193, 202, 217, 0.18);
}
/* Gold — solid warm gradient (high contrast on dark bg) */
.tier__cta--gold {
  background: linear-gradient(135deg, #d4a93a 0%, #f7d978 100%);
  color: #1a1209;
  border-color: #f0cb5c;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(240, 203, 92, 0.32);
}
.tier__cta--gold:hover {
  background: linear-gradient(135deg, #e0b945 0%, #ffe48b 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(240, 203, 92, 0.42);
}
/* Platinum — solid violet gradient */
.tier__cta--platinum {
  background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
  color: #ffffff;
  border-color: #a78bfa;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.40);
}
.tier__cta--platinum:hover {
  background: linear-gradient(135deg, #7378f5 0%, #b8a0fb 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.50);
}

/* ── Footnote ── */
.pricing__footnote {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 0 16px;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
  color: var(--pro-dim);
}
.pricing__footnote strong { color: var(--pro-text); font-weight: 700; }
.pricing__footnote em { color: #2effc5; font-style: normal; font-weight: 600; }

/* Reduced-motion: respect users who opted out of animations. */
@media (prefers-reduced-motion: reduce) {
  .tier, .tier__cta, .tier__cta-arrow {
    transition: none !important;
  }
  .tier:hover, .tier__cta:hover { transform: none !important; }
  .tier::after { display: none; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */