/* ============================================================================
 * AUTO-GENERATED BUNDLE - DO NOT EDIT DIRECTLY
 * Source directory: static/dashboard/
 * Build script: scripts/build_dashboard_css.py
 * ============================================================================ */

:root {
  color-scheme: light;
  --bg: #f5f1e8;
  --panel: #fffdf8;
  --panel-strong: #ffffff;
  --border: #d7c9ad;
  --text: #21201c;
  --muted: #6d685c;
  --navy: #17324f;
  --gold: #c88a2f;
  --gold-deep: #8a5d18;
  --teal: #1f6b63;
  --line-soft: rgba(23, 50, 79, 0.1);
  --ok: #25603b;
  --partial: #8f5b00;
  --failed: #9f2b2b;
  --queued: #6f4d1f;
  --sent: #1f5f46;
  --shadow: 0 1px 3px rgba(23, 50, 79, 0.04), 0 12px 32px -4px rgba(23, 50, 79, 0.08);
  --shadow-hover: 0 2px 6px rgba(23, 50, 79, 0.06), 0 20px 44px -6px rgba(23, 50, 79, 0.12);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(23, 50, 79, 0.04), 0 8px 20px -3px rgba(23, 50, 79, 0.06);
  --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 8px rgba(23, 50, 79, 0.05), 0 16px 32px -4px rgba(23, 50, 79, 0.11);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --container-max-width: 1560px;
  --page-gutter: clamp(16px, 2.2vw, 36px);
  --focus-ring-color: #0b69c7;
  --focus-ring-glow: #b4d7ff;
  --focus-ring-shadow: 0 0 0 3px #b4d7ff;
}

::selection {
  background-color: #b4d7ff;
  color: #17324f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(31, 107, 99, 0.09), transparent 34%),
    radial-gradient(circle at top right, rgba(200, 138, 47, 0.16), transparent 30%),
    linear-gradient(180deg, #f9f7f2 0%, #efe6d7 100%);
}

body.auth-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(23, 50, 79, 0.06), transparent 36%),
    linear-gradient(180deg, #fbfaf7 0%, #ede7dc 100%);
}

body.operator-layout {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(31, 107, 99, 0.07), transparent 34%),
    radial-gradient(circle at top right, rgba(200, 138, 47, 0.13), transparent 28%),
    linear-gradient(180deg, #fbfaf7 0%, #eee6d8 100%);
}

a {
  color: var(--navy);
}

.skip-link {
  position: fixed;
  left: 18px;
  top: 12px;
  z-index: 200;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--panel-strong);
  color: var(--navy);
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(23, 50, 79, 0.16);
  transition: transform .15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 2.05rem;
  font-weight: 700;
  letter-spacing: -0.028em;
}

h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.022em;
}

h3 {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
}

h5 {
  font-size: 0.9rem;
  font-weight: 600;
}

h6 {
  font-size: 0.82rem;
  font-weight: 600;
}

.page-shell:focus {
  outline: none;
}

.operator-frame {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.operator-sidebar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1vw, 16px);
  padding: 0 max(20px, calc((100vw - var(--container-max-width)) / 2 + 20px));
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(7, 21, 40, 0.98), rgba(10, 38, 68, 0.98)),
    var(--navy);
  color: white;
  border-right: 0;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(8, 23, 45, 0.16);
}

.operator-sidebar__brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: center;
  gap: 2px;
  padding: 0;
  color: white;
  text-align: left;
  text-decoration: none;
  border-bottom: 0;
  flex: 0 0 auto;
  min-width: max-content;
}

.operator-sidebar__logo {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

.operator-sidebar__brand strong {
  font-size: clamp(0.96rem, 1vw, 1.08rem);
  font-weight: 800;
  color: white;
  line-height: 1.2;
  white-space: nowrap;
}

/* The contractor writes this tagline himself, in his own case. Shouting it
   back at him made his own words read like a system label. */
.operator-sidebar__brand span {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.66rem, 0.7vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  white-space: nowrap;
}

.operator-mobile-menu-toggle {
  display: none;
}

.operator-sidebar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  margin: 0 auto;
  gap: clamp(3px, 0.4vw, 8px);
  overflow: visible;
  white-space: nowrap;
  min-width: 0;
  padding: 0 2px;
}

.operator-sidebar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 clamp(8px, 0.65vw, 12px);
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.78rem, 0.82vw, 0.86rem);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.operator-sidebar__link:active {
  transform: scale(0.97);
}

.operator-sidebar__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- Sidebar icons -------------------------------------------
   The nav used whatever glyph was closest to hand: a chess pawn for
   Team, a colour emoji padlock for Security, and the same $ for both
   Billing and Estimate settings. These are the line-art masks the
   campaign page already uses, keyed off `data-page-loading-label` so
   the sidebar markup (pinned by tests) does not change. The glyph the
   template still prints is hidden; the mask is drawn in its place. */
.operator-sidebar__link > span:first-child {
  color: var(--gold);
  text-align: center;
  /* Square icon cell: a taller glyph must not push its own row taller
     than every other one. */
  height: 14px;
  width: 14px;
  line-height: 14px;
  font-size: 0;
  font-weight: 400;
  flex-shrink: 0;
  /* Neutral default, so a nav link added later never renders a blank block. */
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3C/svg%3E");
}

.operator-sidebar__link > span:first-child::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.operator-sidebar__link[data-page-loading-label="Dashboard"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7' height='7' rx='1.4'/%3E%3Crect x='13.6' y='3.4' width='7' height='7' rx='1.4'/%3E%3Crect x='3.4' y='13.6' width='7' height='7' rx='1.4'/%3E%3Crect x='13.6' y='13.6' width='7' height='7' rx='1.4'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Campaigns"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='2'/%3E%3Cpath d='M3.2 6.6 12 13.1l8.8-6.5'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Properties"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.4l9 7.2'/%3E%3Cpath d='M5.6 9.4V20.2h12.8V9.4'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Leads"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.6h3.1l1.5 3.9-2.1 1.5a12.4 12.4 0 0 0 6.1 6.1l1.5-2.1 3.9 1.5v3.1a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.4 5.8a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Postcards and results"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='2'/%3E%3Crect x='5.8' y='9' width='5.4' height='5.6' rx='1'/%3E%3Cpath d='M14.4 9.8h4.2M14.4 12.6h4.2M14.4 15.4h2.6'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Postcard viewer"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='2'/%3E%3Cpath d='M6.1 12s2.2-3.1 5.9-3.1 5.9 3.1 5.9 3.1-2.2 3.1-5.9 3.1S6.1 12 6.1 12Z'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Billing"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Estimate settings"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.2h9.4M18.4 7.2h1.6M4 12h2.4M11 12h9M4 16.8h7.4M16.4 16.8h3.6'/%3E%3Ccircle cx='16' cy='7.2' r='2.2'/%3E%3Ccircle cx='8.6' cy='12' r='2.2'/%3E%3Ccircle cx='14' cy='16.8' r='2.2'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Settings"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Company"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='4.4' width='14.8' height='16' rx='1.8'/%3E%3Cpath d='M8.4 8.8h2.4M13.2 8.8h2.4M8.4 12.6h2.4M13.2 12.6h2.4'/%3E%3Cpath d='M10.2 20.4v-4h3.6v4'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Team"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.6' r='3.1'/%3E%3Cpath d='M3.6 19.6c0-3.1 2.5-5 5.6-5s5.6 1.9 5.6 5'/%3E%3Cpath d='M16.2 6.2a3.1 3.1 0 0 1 0 5.9'/%3E%3Cpath d='M17.6 15.1c1.9.7 3.2 2.2 3.2 4.5'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Security"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='10.4' width='14.4' height='9.6' rx='2'/%3E%3Cpath d='M8.4 10.4V8.2a3.6 3.6 0 0 1 7.2 0v2.2'/%3E%3Cpath d='M12 14.2v2.1'/%3E%3C/svg%3E");
}

.operator-sidebar__link[data-page-loading-label="Help"] > span:first-child {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.7 9.5a2.4 2.4 0 1 1 3.1 2.8c-.7.3-.9.8-.9 1.4v.5'/%3E%3Cpath d='M12 17.1v.5'/%3E%3C/svg%3E");
}

.operator-nav-label--mobile {
  display: none;
}

.operator-sidebar__mobile-account-group,
.operator-sidebar__link--mobile-account {
  display: none !important;
}

.operator-sidebar__link.is-active {
  background: rgba(200, 138, 47, 0.22);
  border-color: rgba(200, 138, 47, 0.45);
  color: #ffffff;
  font-weight: 600;
}

.operator-sidebar__link > span:first-child,
.operator-sidebar__link.is-active > span:first-child {
  font-weight: 400;
}



.operator-sidebar__link.is-loading {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .operator-sidebar__link:hover {
    background: rgba(200, 138, 47, 0.22);
    border-color: rgba(200, 138, 47, 0.4);
    color: white;
  }
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #d32f2f;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* This class sets its own display, which outranks the browser's rule for
   hidden elements. Without this, hiding the badge when it reaches zero leaves
   a red "0" alert pill sitting in the nav. */
.nav-badge[hidden] {
  display: none;
}

.header-actions .nav-badge {
  background: #c0212a;
}

.site-header__leads-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.site-header__leads-link:hover,
.site-header__leads-link:focus-visible {
  text-decoration: underline;
}

.operator-sidebar__account {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
}

.operator-sidebar__account-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.6vw, 8px);
  padding: 3px clamp(8px, 0.7vw, 12px) 3px 4px;
  min-height: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.operator-sidebar__account-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(200, 138, 47, 0.5);
}

.operator-sidebar__account-btn:active {
  transform: scale(0.97);
}

.operator-sidebar__account-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.operator-sidebar__account-btn[aria-expanded="true"],
.operator-sidebar__account-btn.is-active {
  background: rgba(200, 138, 47, 0.22);
  border-color: rgba(200, 138, 47, 0.6);
}

.operator-sidebar__avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 800;
  flex-shrink: 0;
  box-sizing: border-box;
}

.operator-sidebar__user-name {
  color: white;
  font-size: clamp(0.80rem, 0.82vw, 0.86rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}

.operator-sidebar__caret {
  color: rgba(255, 255, 255, 0.7);
  transition: transform .15s ease;
  flex-shrink: 0;
}

.operator-sidebar__account-btn[aria-expanded="true"] .operator-sidebar__caret {
  transform: rotate(180deg);
}

/* Standalone logout on desktop is hidden; accessed via profile avatar dropdown */
.operator-sidebar__logout {
  display: none;
}

/* Account Dropdown Card */
.operator-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  width: 260px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(10, 26, 48, 0.98);
  border: 1px solid rgba(200, 138, 47, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.operator-account-dropdown[hidden] {
  display: none !important;
}

.operator-account-dropdown__identity {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.operator-account-dropdown__avatar-large {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}

.operator-account-dropdown__user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.operator-account-dropdown__user-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.operator-account-dropdown__meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.operator-account-dropdown__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
  border: 0;
}

.operator-account-dropdown__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.operator-account-dropdown__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.operator-account-dropdown__link:hover,
.operator-account-dropdown__link:focus-visible {
  background: rgba(200, 138, 47, 0.16);
  border-color: rgba(200, 138, 47, 0.35);
  color: white;
  outline: none;
}

.operator-account-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 0;
  color: var(--gold);
  text-align: center;
  flex-shrink: 0;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3C/svg%3E");
}

.operator-account-dropdown__icon::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.operator-account-dropdown__icon--company,
.operator-account-dropdown__link[data-page-loading-label="Company"] .operator-account-dropdown__icon {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='4.4' width='14.8' height='16' rx='1.8'/%3E%3Cpath d='M8.4 8.8h2.4M13.2 8.8h2.4M8.4 12.6h2.4M13.2 12.6h2.4'/%3E%3Cpath d='M10.2 20.4v-4h3.6v4'/%3E%3C/svg%3E");
}

.operator-account-dropdown__icon--team,
.operator-account-dropdown__link[data-page-loading-label="Team"] .operator-account-dropdown__icon {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.6' r='3.1'/%3E%3Cpath d='M3.6 19.6c0-3.1 2.5-5 5.6-5s5.6 1.9 5.6 5'/%3E%3Cpath d='M16.2 6.2a3.1 3.1 0 0 1 0 5.9'/%3E%3Cpath d='M17.6 15.1c1.9.7 3.2 2.2 3.2 4.5'/%3E%3C/svg%3E");
}

.operator-account-dropdown__icon--security,
.operator-account-dropdown__link[data-page-loading-label="Security"] .operator-account-dropdown__icon {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='10.4' width='14.4' height='9.6' rx='2'/%3E%3Cpath d='M8.4 10.4V8.2a3.6 3.6 0 0 1 7.2 0v2.2'/%3E%3Cpath d='M12 14.2v2.1'/%3E%3C/svg%3E");
}

.operator-account-dropdown__icon--help,
.operator-account-dropdown__link[data-page-loading-label="Help"] .operator-account-dropdown__icon {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.7 9.5a2.4 2.4 0 1 1 3.1 2.8c-.7.3-.9.8-.9 1.4v.5'/%3E%3Cpath d='M12 17.1v.5'/%3E%3C/svg%3E");
}

.operator-account-dropdown__icon--example {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12s3.4-6.2 9.2-6.2 9.2 6.2 9.2 6.2-3.4 6.2-9.2 6.2S2.8 12 2.8 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}

/* The example account's viewer: a navy band with a gold way home, on every
   page, so nobody mistakes the made-up numbers for their own. */
.example-account-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 2px solid var(--gold);
  background: var(--navy);
  color: #ffffff;
}

.example-account-banner__copy {
  min-width: 0;
  flex: 1 1 320px;
}

.example-account-banner__copy strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.example-account-banner__copy p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

a.example-account-banner__back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

a.example-account-banner__back:hover,
a.example-account-banner__back:focus-visible {
  background: #ffffff;
  color: var(--navy);
}

.operator-account-dropdown__logout-form {
  width: 100%;
  margin: 0;
  padding: 0;
}

.operator-account-dropdown__logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  cursor: pointer;
  text-align: left;
  transition: all .12s ease;
  margin: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box;
}

.operator-account-dropdown__logout-btn:hover,
.operator-account-dropdown__logout-btn:focus-visible {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fee2e2;
  outline: none;
}

.operator-account-dropdown__icon--logout {
  color: #fca5a5;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.operator-account-dropdown__logout-btn .operator-account-dropdown__icon {
  color: #fca5a5;
}

.operator-main {
  min-width: 0;
}

.operator-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.1);
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.operator-topbar strong,
.operator-topbar__kicker {
  display: block;
}

.operator-topbar strong {
  color: var(--navy);
  font-size: 1rem;
}

.operator-topbar__kicker {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operator-topbar__home {
  color: var(--gold-deep);
  font-weight: 700;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--navy);
  color: white;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(23, 50, 79, 0.08);
}

.header-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 14px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.logout-form {
  margin: 0;
}

.logout-button {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 0.84rem;
  line-height: 1;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.brand {
  color: white;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 2px;
  filter: brightness(0) invert(1);
}

.page-shell {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 24px var(--page-gutter);
}

.page-shell > :first-child,
.page-shell > :not([hidden]):first-of-type {
  margin-top: 0;
}

body.is-page-navigating {
  /* Keep layout and pointer stable during navigation */
}

/* Sleek top-edge navigation progress indicator (Zero Layout Shift) */
.page-navigation-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.page-navigation-loading[hidden] {
  display: none;
}

.page-navigation-loading__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold, #c88a2f), #f6d365, var(--gold, #c88a2f));
  box-shadow: 0 0 10px rgba(200, 138, 47, 0.7), 0 0 4px rgba(200, 138, 47, 0.5);
  transform-origin: left center;
  animation: page-nav-progress 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes page-nav-progress {
  0% {
    transform: scaleX(0);
  }
  20% {
    transform: scaleX(0.35);
  }
  50% {
    transform: scaleX(0.7);
  }
  80% {
    transform: scaleX(0.88);
  }
  100% {
    transform: scaleX(0.94);
  }
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.auth-card {
  width: min(100%, 420px);
  display: grid;
  gap: 24px;
  padding: 34px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 28px 70px rgba(23, 50, 79, 0.14);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth-logo {
  width: auto;
  height: 48px;
  max-height: 48px;
  object-fit: contain;
}

/* The Homestimizer app icon is a full square; round it like a phone does. */
.auth-logo--app-icon {
  border-radius: 11px;
}

.auth-heading {
  display: grid;
  gap: 6px;
}

.auth-heading h1 {
  margin: 0;
  color: var(--navy);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form input {
  min-height: 48px;
  border-radius: 12px;
  border-color: rgba(23, 50, 79, 0.16);
  background: #fff;
}

.auth-form input:focus,
.auth-form input:focus-visible {
  outline: 2px solid transparent;
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
}

.auth-password-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
}

.auth-password-field input {
  width: 100%;
  padding-right: 80px;
}

.auth-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  min-width: 56px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  background: rgba(23, 50, 79, 0.06);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.auth-password-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 48px;
  min-height: 48px;
  width: 100%;
  height: 100%;
}

.auth-password-toggle:hover {
  background: rgba(23, 50, 79, 0.12);
  border-color: rgba(23, 50, 79, 0.26);
  color: var(--navy);
}

.auth-password-toggle:active {
  transform: translateY(-50%) scale(0.96);
  background: rgba(23, 50, 79, 0.16);
}

.auth-password-toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.auth-remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--navy);
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.35;
  margin-top: 2px;
}

.auth-remember input[type="checkbox"] {
  flex: 0 0 auto;
  min-height: 0;
  margin: 3px 0 0;
  accent-color: var(--navy);
}

.auth-remember-copy {
  display: grid;
  gap: 2px;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
}

.auth-remember-copy strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: none;
  letter-spacing: normal;
}

.auth-remember-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
}

.auth-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  border-radius: 12px;
}

.auth-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(159, 43, 43, 0.18);
  border-radius: 12px;
  background: rgba(159, 43, 43, 0.08);
  color: var(--failed);
  font-weight: 700;
  line-height: 1.4;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 24px;
}

/* Panels carry no margin of their own, so the settings pages (the ones built
   from .stack forms — Company, Team, Security) rendered their cards edge to
   edge and read as one block. Match the 24px rhythm .home-grid already uses
   between top-level blocks. Scoped to those pages on purpose: other stacked
   panels already get their spacing elsewhere and must not be overridden. */
.page-shell:has(.stack) > .panel + .panel {
  margin-top: 24px;
}

/* Some of those cards title themselves inside the .stack form and some above
   it, and only the inner ones got .stack > h2's margin reset — so two cards on
   the same page started their heading 20px apart. Sit them all on the padding. */
.page-shell:has(.stack) > .panel > h2:first-child {
  margin-top: 0;
}

/* Explicit layout stack utility for multi-panel pages */
.layout-stack > * + * {
  margin-top: 24px;
}

.table-scroll,
.table-wrap,
[class*="-table-wrap"] {
  overscroll-behavior-x: contain;
}

/* ==========================================================================
   Help Center & Knowledge Base
   ========================================================================== */

.help-heading {
  margin-bottom: 0;
}

.help-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-btn-icon {
  margin-right: 6px;
  vertical-align: -2px;
}

.help-page-container {
  margin-top: 24px;
}

/* Search & Toolbar Panel */
.help-search-panel {
  padding: 24px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.help-search-box {
  display: flex;
  flex-direction: column;
}

.help-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.help-search-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.help-search-input {
  width: 100%;
  height: 48px;
  padding: 0 80px 0 46px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--panel-strong);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-search-input::-webkit-search-decoration,
.help-search-input::-webkit-search-cancel-button {
  display: none;
}

.help-search-input:focus {
  border-color: var(--navy);
  box-shadow: var(--focus-ring-shadow);
}

.help-search-kbd {
  position: absolute;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.help-search-clear {
  position: absolute;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.help-search-clear:hover {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
}

.help-search-clear:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.help-search-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.help-search-status {
  font-weight: 500;
}

/* Category Filter Chips */
.help-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.help-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-spring);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.help-chip:hover {
  background: var(--bg);
  color: var(--navy);
  border-color: var(--navy);
}

.help-chip.is-active {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.18);
}

.help-chip:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Empty Search State */
.help-empty-state[hidden],
.help-empty-state.is-hidden {
  display: none !important;
}

.help-empty-state:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border: 1.5px dashed var(--border);
  background: var(--panel);
  border-radius: 16px;
  margin: 24px 0;
}

.help-empty-state__icon {
  color: var(--muted);
  margin-bottom: 16px;
  opacity: 0.85;
}

.help-empty-state__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}

.help-empty-state__copy {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
  font-size: 14px;
}

.help-link-btn {
  display: inline;
  padding: 0 2px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.help-link-btn:hover {
  color: var(--navy);
}

/* Content Stack & Modules */
.help-content-stack {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.help-section {
  padding: 28px 32px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.help-section + .help-section {
  margin-top: 0;
}

.help-section__header {
  margin-bottom: 24px;
}

.help-section__badge-row {
  margin-bottom: 8px;
}

.help-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.help-section__intro {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 72ch;
}

/* Badges */
.help-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  border: 1px solid transparent;
}

.help-badge--workflow {
  background: rgba(31, 107, 99, 0.12);
  color: #154c46;
  border-color: rgba(31, 107, 99, 0.25);
}

.help-badge--safety {
  background: rgba(23, 50, 79, 0.1);
  color: var(--navy);
  border-color: rgba(23, 50, 79, 0.2);
}

.help-badge--pricing {
  background: rgba(200, 138, 47, 0.15);
  color: #734c11;
  border-color: rgba(200, 138, 47, 0.3);
}

.help-badge--leads {
  background: rgba(37, 96, 59, 0.12);
  color: #1b4b2e;
  border-color: rgba(37, 96, 59, 0.25);
}

.help-badge--glossary {
  background: rgba(143, 91, 0, 0.12);
  color: #6f4700;
  border-color: rgba(143, 91, 0, 0.25);
}

.help-badge--faqs {
  background: rgba(23, 50, 79, 0.1);
  color: var(--navy);
  border-color: rgba(23, 50, 79, 0.2);
}

.help-badge--support {
  background: rgba(31, 107, 99, 0.12);
  color: #154c46;
  border-color: rgba(31, 107, 99, 0.25);
}

/* Module 1: 7-Step Lifecycle Grid */
.help-lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.help-step-card {
  display: flex;
  flex-direction: column;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), border-color 0.2s ease;
}

.help-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(23, 50, 79, 0.3);
}

.help-step-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.help-step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.help-step-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 0;
  line-height: 1.3;
}

.help-step-card__body {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 14px;
  flex-grow: 1;
}

.help-step-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* Feature Cards (Hail Targeting & Archive/Export) */
.help-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.help-feature-card {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), border-color 0.2s ease;
}

.help-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(23, 50, 79, 0.28);
}

.help-feature-card__badge-row {
  margin-bottom: 8px;
}

.help-feature-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.help-feature-card__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.help-feature-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.help-feature-card__body {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 16px;
  flex-grow: 1;
}

.help-feature-card__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* Module 2: Postcard Review & Safety */
.help-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.help-subcard {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
}

.help-subcard__icon-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.help-subcard__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.help-subcard h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.help-subcard p {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

.help-checklist-box {
  margin-top: 20px;
  background: rgba(31, 107, 99, 0.04);
  border: 1px solid rgba(31, 107, 99, 0.2);
  border-radius: 12px;
  padding: 20px 24px;
}

.help-checklist-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 6px;
}

.help-checklist-list {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

/* Module 3: Dynamic Pricing & Steepness */
.help-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Safe Pricing Formula Editor Section */
.help-formula-editor-section {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
}

.help-formula-editor-section__header {
  margin-bottom: 16px;
}

.help-formula-editor-section__header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 6px 0 4px;
}

.help-formula-vars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.help-formula-var-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}

.help-formula-var-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.help-formula-var-head strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  word-break: break-word;
}

.help-formula-var-head code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  background: transparent;
  padding: 0;
  border-radius: 0;
  word-break: break-all;
}

.help-formula-var-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(31, 107, 99, 0.12);
  color: var(--teal);
  border: 1px solid rgba(31, 107, 99, 0.20);
  max-width: 100%;
  box-sizing: border-box;
}

.help-formula-var-card p {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.help-steepness-section {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
}

.help-steepness-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}

.help-steepness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.help-steepness-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.help-steepness-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.help-steepness-pill--gentle {
  background: rgba(37, 96, 59, 0.15);
  color: #1b4b2e;
}

.help-steepness-pill--medium {
  background: rgba(200, 138, 47, 0.2);
  color: #734c11;
}

.help-steepness-pill--steep {
  background: rgba(159, 43, 43, 0.15);
  color: #7b1d1d;
}

.help-steepness-slope {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}

.help-steepness-card p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.help-pricing-cta-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Module 4: Leads & Properties */
.help-leads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Suppression Comparison Box */
.help-suppression-box {
  margin-top: 20px;
  margin-bottom: 20px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
}

.help-suppression-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}

.help-suppression-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.help-suppression-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-suppression-card h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 2px;
}

.help-suppression-card p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.help-leads-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Module 5: System Glossary */
.help-glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.help-glossary-card {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), border-color 0.2s ease;
}

.help-glossary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(23, 50, 79, 0.28);
}

.help-glossary-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-term-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

.help-term-badge--roof {
  background: rgba(31, 107, 99, 0.1);
  color: #154c46;
  border-color: rgba(31, 107, 99, 0.2);
}

.help-term-badge--materials {
  background: rgba(200, 138, 47, 0.12);
  color: #734c11;
  border-color: rgba(200, 138, 47, 0.25);
}

.help-term-badge--structure {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  border-color: rgba(23, 50, 79, 0.15);
}

.help-term-badge--systems {
  background: rgba(31, 107, 99, 0.1);
  color: #154c46;
  border-color: rgba(31, 107, 99, 0.2);
}

.help-term-badge--qa {
  background: rgba(143, 91, 0, 0.1);
  color: #6f4700;
  border-color: rgba(143, 91, 0, 0.2);
}

.help-term-badge--status {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  border-color: rgba(23, 50, 79, 0.15);
}

.help-term-badge--pricing {
  background: rgba(200, 138, 47, 0.12);
  color: #734c11;
  border-color: rgba(200, 138, 47, 0.25);
}

.help-term-badge--leads {
  background: rgba(37, 96, 59, 0.1);
  color: #1b4b2e;
  border-color: rgba(37, 96, 59, 0.2);
}

.help-term-badge--audience {
  background: rgba(31, 107, 99, 0.1);
  color: #154c46;
  border-color: rgba(31, 107, 99, 0.2);
}

.help-term-badge--outreach {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  border-color: rgba(23, 50, 79, 0.15);
}

.help-glossary-card__term {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.help-glossary-card__def {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

/* Module 6: FAQ Accordions */
.help-faq-group {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.help-faq-group__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 16px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.help-faq__item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-strong);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-faq__item[open] {
  border-color: rgba(23, 50, 79, 0.3);
  box-shadow: 0 2px 8px rgba(23, 50, 79, 0.06);
}

.help-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  outline: none;
  transition: background 0.15s ease;
}

.help-faq__summary::-webkit-details-marker {
  display: none;
}

.help-faq__summary:hover {
  background: rgba(23, 50, 79, 0.03);
}

.help-faq__summary:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
}

.help-faq__question {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  pointer-events: none;
}

.help-faq__chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s var(--ease-spring), color 0.15s ease;
  pointer-events: none;
}

details[open] .help-faq__chevron,
.help-faq__item[open] .help-faq__chevron {
  transform: rotate(180deg);
  color: var(--navy);
}

.help-faq__answer {
  padding: 0 18px 16px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  border-top: 1px solid transparent;
}

details[open] .help-faq__answer {
  border-top-color: var(--line-soft);
  padding-top: 12px;
}

.help-faq__answer p {
  margin: 0;
}

/* Module 7: Platform Support */
.help-support-card {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.help-support-card__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.help-support-card__identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.help-support-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(31, 107, 99, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.help-support-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}

.help-support-card__meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.help-support-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.help-escalation-box {
  background: rgba(200, 138, 47, 0.08);
  border: 1px solid rgba(200, 138, 47, 0.3);
  border-radius: 10px;
  padding: 18px 20px;
}

.help-escalation-box__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #734c11;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-escalation-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .help-steepness-grid {
    grid-template-columns: 1fr;
  }

  .help-formula-vars-grid {
    grid-template-columns: 1fr 1fr;
  }

  .help-support-card__main {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .help-section {
    padding: 20px 16px;
  }

  .help-search-panel {
    padding: 18px 16px;
  }

  .help-lifecycle-grid,
  .help-feature-grid,
  .help-safety-grid,
  .help-pricing-grid,
  .help-formula-vars-grid,
  .help-steepness-grid,
  .help-leads-grid,
  .help-suppression-grid,
  .help-glossary-grid {
    grid-template-columns: 1fr;
  }

  .help-step-card,
  .help-feature-card,
  .help-subcard,
  .help-glossary-card {
    padding: 16px 14px;
  }

  .help-search-input {
    height: 44px;
    font-size: 14px;
    padding: 0 46px 0 38px;
  }

  .help-search-icon {
    left: 12px;
  }

  .help-search-kbd {
    display: none;
  }

  .help-search-clear {
    right: 10px;
  }

  .help-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }

  .help-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .help-support-card__actions {
    width: 100%;
    flex-direction: column;
  }

  .help-support-card__actions .button-link {
    width: 100%;
    justify-content: center;
  }
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.panel-copy {
  max-width: 62ch;
  margin: 0;
  line-height: 1.55;
}

.home-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}

.operator-hero {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 12px;
}

.operator-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 8px;
  align-items: stretch;
}

.operator-hero-split:not(:has(.operator-campaign-launcher)) {
  grid-template-columns: 1fr;
}

.operator-hero-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  height: 100%;
}

.operator-hero-split .operator-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
}

.operator-hero-split:not(:has(.operator-campaign-launcher)) .operator-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.operator-campaign-launcher {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.03), 0 0 0 1px rgba(23, 50, 79, 0.02);
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
}

.operator-campaign-launcher::before {
  display: none;
}

.operator-campaign-launcher__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.operator-campaign-launcher__badge {
  display: none;
}

.operator-campaign-launcher__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy, #17324f);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.operator-campaign-launcher__copy {
  display: none;
}

.operator-campaign-launcher__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #17324f 0%, #1f4266 100%);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  min-height: 40px;
  box-sizing: border-box;
}

.operator-campaign-launcher__cta:hover {
  background: linear-gradient(135deg, #11253a 0%, #17324f 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 50, 79, 0.22);
  color: #ffffff;
}

.operator-campaign-launcher__cta:active {
  transform: translateY(0) scale(0.97);
}

.operator-campaign-launcher__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--teal, #1f6b63);
}

.operator-campaign-launcher__arrow {
  font-size: 1rem;
  transition: transform 120ms ease;
  display: inline-block;
  transform: translateX(0);
}

.operator-campaign-launcher__cta:hover .operator-campaign-launcher__arrow {
  transform: translateX(3px);
}

.operator-campaign-launcher__shortcuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(23, 50, 79, 0.06);
}

.operator-campaign-launcher__shortcuts-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.operator-campaign-launcher__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.operator-campaign-launcher__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  background: #ffffff;
  color: var(--navy, #17324f);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  min-height: 36px;
  min-width: 0;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.02);
}

.operator-campaign-launcher__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(23, 50, 79, 0.05);
  color: #475569;
  flex-shrink: 0;
  transition: transform 120ms ease, color 120ms ease;
}

.operator-campaign-launcher__chip-icon--amber {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.18);
}

.operator-campaign-launcher__chip-icon--blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.operator-campaign-launcher__chip-icon--teal {
  background: #e6f4f2;
  color: #1f6b63;
  border: 1px solid rgba(31, 107, 99, 0.18);
}

.operator-campaign-launcher__chip-icon--purple {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid rgba(126, 34, 206, 0.18);
}

.operator-campaign-launcher__chip-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.operator-campaign-launcher__chip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy, #17324f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.operator-campaign-launcher__chip:hover {
  border-color: rgba(31, 107, 99, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(23, 50, 79, 0.06);
}

.operator-campaign-launcher__chip:hover .operator-campaign-launcher__chip-icon {
  transform: scale(1.08);
}

.operator-campaign-launcher__chip[href*="hail-audience"]:hover {
  border-color: rgba(200, 138, 47, 0.4);
}

.operator-campaign-launcher__chip:active {
  transform: translateY(0) scale(0.97);
}

.operator-campaign-launcher__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--teal, #1f6b63);
}

.operator-campaign-launcher__chip[aria-disabled="true"],
.operator-campaign-launcher__chip:disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.operator-hero h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navy);
}

@media (min-width: 901px) {
  .operator-hero h1 {
    font-size: 2rem;
    /* Grow upward by the added line height, preserving the card and copy position. */
    margin-top: -0.69rem;
  }
}

.operator-hero .panel-copy {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--muted);
}

.operator-hero-heading {
  align-items: center;
}

.secondary-link {
  background: var(--teal);
}

.secondary-link:hover {
  background: #195a53;
}

.operator-focus {
  display: grid;
  gap: 16px;
}

.operator-focus-onboarding {
  display: grid;
  gap: 14px;
}

.operator-focus-onboarding .next-action-card,
.operator-onboarding-card {
  padding: 20px 22px;
  background: #ffffff;
  color: var(--navy, #17324f);
  border: 1px solid rgba(23, 50, 79, 0.10);
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.04), 0 4px 16px -2px rgba(23, 50, 79, 0.05);
  border-radius: 14px;
}

.operator-focus-onboarding .next-action-card strong,
.operator-onboarding-card strong {
  font-size: 1.15rem;
  color: var(--navy, #17324f);
}

.operator-focus-onboarding .first-run-checklist,
.operator-onboarding-card .first-run-checklist {
  margin-top: 6px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.operator-focus-onboarding .first-run-checklist li {
  background: #fafbfc;
  border: 1px solid rgba(23, 50, 79, 0.10);
  color: var(--navy, #17324f);
  border-radius: 8px;
}

.operator-focus-onboarding .first-run-checklist li::before {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy, #17324f);
}

/* Interactive Setup Checklist & Progress Stepper */
.next-action-card.setup-checklist-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--navy, #17324f);
  border: 1px solid rgba(23, 50, 79, 0.08);
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.03), 0 0 0 1px rgba(23, 50, 79, 0.02);
}

.setup-checklist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.setup-checklist-kicker-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.next-action-card.setup-checklist-card .insight-label,
.setup-checklist-head .insight-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal, #1f6b63);
  background: rgba(31, 107, 99, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

.setup-checklist-headline,
.setup-checklist-head strong {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy, #17324f);
  line-height: 1.25;
  text-wrap: balance;
}

.setup-checklist-progress-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  background: rgba(23, 50, 79, 0.03);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(23, 50, 79, 0.06);
}

.setup-checklist-progress-text {
  color: var(--teal, #1f6b63);
  font-weight: 700;
}

.setup-checklist-remaining {
  color: #475569;
  font-weight: 500;
}

.setup-progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.06);
  overflow: hidden;
}

.setup-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.setup-checklist-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.setup-step-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fafbfc;
  border: 1px solid rgba(23, 50, 79, 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  min-height: 40px;
  min-width: 0;
  box-sizing: border-box;
}

.setup-step-row__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.setup-step-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.setup-step-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  flex-shrink: 0;
}

.setup-step-icon.is-complete {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
  font-size: 0.75rem;
}

.setup-step-icon.is-current {
  background: var(--teal, #1f6b63);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(31, 107, 99, 0.25);
}

.setup-step-icon.is-pending {
  background: rgba(23, 50, 79, 0.06);
  color: #17324f;
  border: 1px solid rgba(23, 50, 79, 0.08);
}

.setup-step-status-wrap {
  display: none;
}

.setup-step-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.setup-step-title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy, #17324f);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.setup-step-desc {
  display: none;
}

.setup-step-action-wrap {
  display: flex;
  align-items: center;
  margin-top: 0;
  flex-shrink: 0;
}

.setup-step-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal, #1f6b63);
  white-space: nowrap;
  transition: transform 120ms ease, color 120ms ease;
}

.setup-step-action.setup-step-action--cta {
  background: var(--teal, #1f6b63);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(31, 107, 99, 0.2);
}

.setup-step-row:hover .setup-step-action {
  transform: translateX(2px);
  color: var(--navy, #17324f);
}

.setup-step-row:hover .setup-step-action.setup-step-action--cta {
  background: #164f49;
  color: #ffffff;
}

.setup-step-row.is-complete {
  background: #ffffff;
  border-color: rgba(23, 50, 79, 0.08);
}

.setup-step-row.is-complete .setup-step-title {
  color: #334155;
  font-weight: 600;
}

.setup-step-row.is-complete .setup-step-action-wrap {
  opacity: 0.6;
  transition: opacity 120ms ease;
}

.setup-step-row.is-complete:hover .setup-step-action-wrap {
  opacity: 1;
}

.setup-step-row.is-complete .setup-step-action {
  color: #475569;
  font-weight: 500;
}

.setup-step-row.is-complete:hover {
  background: #fafbfc;
  border-color: rgba(23, 50, 79, 0.16);
  transform: translateY(-1px);
}

.setup-step-row.is-current {
  background: #ffffff;
  border-color: rgba(31, 107, 99, 0.4);
  box-shadow: 0 2px 8px rgba(31, 107, 99, 0.08), 0 0 0 1px rgba(31, 107, 99, 0.25);
}

.setup-step-row.is-current:hover {
  border-color: var(--teal, #1f6b63);
  box-shadow: 0 3px 10px rgba(31, 107, 99, 0.14), 0 0 0 1.5px var(--teal, #1f6b63);
  transform: translateY(-1px);
}

.setup-step-row.is-pending:not(.is-current) {
  background: #fafbfc;
}

.setup-step-row.is-pending:not(.is-current) .setup-step-title {
  color: #64748b;
  font-weight: 500;
}

.setup-step-row.is-pending:not(.is-current) .setup-step-action {
  color: #64748b;
}

.setup-step-row.is-pending:not(.is-current):hover {
  background: #ffffff;
  border-color: rgba(23, 50, 79, 0.16);
  transform: translateY(-1px);
}

.setup-step-row:active {
  transform: translateY(0) scale(0.98);
}

.setup-step-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--teal, #1f6b63);
}

.setup-checklist-card .actions-row {
  display: none;
}

@media (max-width: 768px) {
  .setup-checklist-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .setup-step-row {
    min-height: auto;
  }
}

@media (pointer: coarse) {
  .operator-campaign-launcher__cta,
  .operator-campaign-launcher__chip,
  .setup-step-row {
    min-height: 44px;
  }
}

.next-action-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(23, 50, 79, 0.98), rgba(18, 78, 70, 0.93));
  color: white;
}

.next-action-card .insight-label {
  color: rgba(232, 200, 150, 0.9);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.next-action-card strong {
  font-size: 1.14rem;
  line-height: 1.12;
}

.next-action-card p {
  max-width: 42ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.35;
}

.next-action-card .inline-link {
  width: fit-content;
  color: white;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.dashboard-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 248, 235, 0.95);
  border: 1px solid rgba(220, 140, 40, 0.35);
  color: var(--navy);
  margin-bottom: 2px;
}

.dashboard-alert--alert {
  background: rgba(255, 240, 240, 0.95);
  border-color: rgba(210, 50, 50, 0.35);
}

.dashboard-alert__content {
  display: grid;
  gap: 2px;
}

.dashboard-alert__content strong {
  font-size: 0.96rem;
  color: var(--navy);
}

.dashboard-alert__content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.dashboard-alert .inline-link {
  font-weight: 700;
  white-space: nowrap;
}

.contact-status-unavailable {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 178, 159, 0.45);
  border-radius: 8px;
  background: rgba(255, 178, 159, 0.08);
}

.operator-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.operator-metric-grid[hidden] {
  display: none;
}

.operator-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.03), 0 0 0 1px rgba(23, 50, 79, 0.02);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), border-color 140ms ease, box-shadow 140ms ease;
}

.operator-metric[data-icon]::before {
  display: none;
}

.operator-metric__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.operator-metric span,
.operator-metric__label {
  color: #475569;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.operator-metric__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: transform 140ms ease;
}

.operator-metric__badge-icon--teal {
  background: #e6f4f2;
  color: #1f6b63;
  border: 1px solid rgba(31, 107, 99, 0.18);
}

.operator-metric__badge-icon--green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.operator-metric__badge-icon--purple {
  background: #f0f3ff;
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.18);
}

.operator-metric__badge-icon--amber {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.18);
}

.operator-metric__badge-icon--blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.operator-metric__badge-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.operator-metric:hover .operator-metric__badge-icon {
  transform: scale(1.08);
}

.operator-metric strong,
.operator-metric__value {
  color: var(--navy, #17324f);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 2px 0;
}

.operator-metric small,
.operator-metric__detail {
  color: #475569;
  font-size: 0.75rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums;
}

.operator-metric:hover {
  border-color: rgba(31, 107, 99, 0.35);
  box-shadow: 0 4px 14px rgba(23, 50, 79, 0.07), 0 1px 3px rgba(23, 50, 79, 0.03);
  transform: translateY(-2px);
}

.operator-metric:active {
  transform: translateY(0) scale(0.98);
}

.operator-metric:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--teal, #1f6b63);
}

.operator-metric--priority {
  background: linear-gradient(180deg, #f7fdfc 0%, #ffffff 60%);
  border-color: rgba(31, 107, 99, 0.28);
  box-shadow: 0 1px 3px rgba(31, 107, 99, 0.04), 0 0 0 1px rgba(31, 107, 99, 0.08);
}

.operator-metric--priority .operator-metric__label {
  color: var(--teal, #1f6b63);
}

.operator-metric--priority:hover {
  border-color: var(--teal, #1f6b63);
  box-shadow: 0 4px 16px rgba(31, 107, 99, 0.12), 0 1px 3px rgba(23, 50, 79, 0.03);
}

.operator-metric[aria-disabled="true"],
.operator-metric.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.postcard-stats-section {
  display: grid;
  gap: 22px;
}

/* The page title is a title, not a section. Boxed in panel chrome it read as
   a card whose data had failed to load. */
.postcard-stats-title,
.postcard-headline {
  margin: 0 0 18px;
}

/* Panels on this page are siblings of the shell, which spaces nothing, so
   they stacked edge to edge and ran together as one slab. 24px is the rhythm
   the rest of the dashboard uses between top-level blocks. */
.postcard-stats-section + .postcard-stats-section {
  margin-top: 24px;
}

.postcard-stats-section__heading h2 {
  margin-bottom: 6px;
}

/* Section intros read top-to-bottom on one left edge. The note sits under
   its heading instead of right-aligned across the panel, so the eye never
   has to jump the width of the page to find the explanation. */
.postcard-stats-section__heading > .muted {
  max-width: 68ch;
  margin: 0;
  line-height: 1.5;
}

.postcard-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 16px 20px;
  border: 1px solid rgba(200, 138, 47, 0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(200, 138, 47, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%), #ffffff;
  box-shadow: 0 4px 16px rgba(23, 50, 79, 0.05), 0 1px 2px rgba(23, 50, 79, 0.03);
}

.postcard-headline--ready {
  border-color: rgba(31, 107, 99, 0.28);
  background: linear-gradient(135deg, rgba(31, 107, 99, 0.09) 0%, rgba(255, 255, 255, 0.98) 100%), #ffffff;
  box-shadow: 0 4px 18px rgba(31, 107, 99, 0.08), 0 1px 3px rgba(23, 50, 79, 0.04);
}

.postcard-headline--warning {
  border-color: rgba(200, 138, 47, 0.35);
  background: linear-gradient(135deg, rgba(200, 138, 47, 0.09) 0%, rgba(255, 255, 255, 0.98) 100%), #ffffff;
  box-shadow: 0 4px 16px rgba(200, 138, 47, 0.09), 0 1px 3px rgba(23, 50, 79, 0.04);
}

.postcard-headline__body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.postcard-headline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(200, 138, 47, 0.15);
  color: var(--gold-deep);
  flex-shrink: 0;
}

.postcard-headline--ready .postcard-headline__icon {
  background: rgba(31, 107, 99, 0.12);
  color: var(--teal);
}

.postcard-headline__lead {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
}

.postcard-headline__lead strong {
  font-weight: 800;
  color: var(--navy);
}

.postcard-headline__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.postcard-headline__btn,
.postcard-headline .button-link,
.postcard-headline .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.12);
}

.postcard-headline__btn.primary,
.postcard-headline .btn-primary {
  background: var(--navy);
  color: #ffffff;
  border: 1px solid var(--navy);
}

.postcard-headline__btn.primary:hover,
.postcard-headline .btn-primary:hover {
  background: #11273f;
  border-color: #11273f;
  box-shadow: 0 4px 12px rgba(23, 50, 79, 0.22);
  transform: translateY(-1px);
  color: #ffffff;
  text-decoration: none;
}

.postcard-headline__btn.secondary,
.postcard-headline .btn-secondary {
  background: #ffffff;
  color: var(--navy);
  border: 1.5px solid rgba(23, 50, 79, 0.2);
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.05);
}

.postcard-headline__btn.secondary:hover,
.postcard-headline .btn-secondary:hover {
  background: #f8fafc;
  border-color: rgba(23, 50, 79, 0.38);
  box-shadow: 0 3px 8px rgba(23, 50, 79, 0.1);
  transform: translateY(-1px);
  color: var(--navy);
  text-decoration: none;
}

.postcard-headline__arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.postcard-headline__btn:hover .postcard-headline__arrow,
.postcard-headline .button-link:hover .postcard-headline__arrow {
  transform: translateX(3px);
}

.postcard-status-grid,
.postcard-response-grid {
  display: grid;
  gap: 12px;
}

.postcard-status-grid--states,
.postcard-response-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.postcard-status-tile,
.postcard-response-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(23, 50, 79, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.postcard-status-tile--warning {
  border-color: rgba(159, 92, 24, 0.28);
  background: rgba(232, 200, 150, 0.16);
}

.postcard-status-tile--success {
  border-color: rgba(31, 107, 99, 0.26);
  background: rgba(31, 107, 99, 0.08);
}

.postcard-status-tile > span,
.postcard-response-card > span {
  display: block;
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.postcard-status-tile strong,
.postcard-response-card strong {
  color: var(--navy);
  font-size: 2rem;
  line-height: 1;
}

.postcard-status-tile p,
.postcard-response-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.postcard-status-tile > b,
.postcard-response-card > b,
.postcard-status-tile > .postcard-tile-action,
.postcard-response-card > .postcard-card-action,
.postcard-response-card > strong.postcard-response-card__action {
  margin-top: 3px;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}

.postcard-status-tile[href]:hover,
.postcard-response-card[href]:hover {
  border-color: rgba(31, 107, 99, 0.42);
  box-shadow: 0 12px 24px rgba(23, 50, 79, 0.08);
  transform: translateY(-1px);
}

/* A count of zero is still true and stays on the page, but it should not
   shout as loudly as a real number. */
.postcard-status-tile--zero,
.postcard-response-card--zero {
  background: rgba(255, 255, 255, 0.5);
}

.postcard-status-tile--zero strong,
.postcard-response-card--zero strong {
  color: rgba(23, 50, 79, 0.42);
}

.postcard-response-card--rate {
  border-color: rgba(200, 138, 47, 0.34);
  background: rgba(232, 200, 150, 0.14);
}

.postcard-support-section {
  border-color: rgba(159, 92, 24, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(255, 248, 235, 0.92));
}

.postcard-support-list {
  display: grid;
  gap: 10px;
}

.postcard-support-campaign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid rgba(159, 92, 24, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(200, 138, 47, 0.05) 0%, #ffffff 100%);
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.03);
}

.postcard-support-campaign > div {
  min-width: 0;
}

.postcard-support-campaign__count {
  color: var(--partial);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.postcard-support-campaign h3 {
  margin: 3px 0;
  color: var(--navy);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.postcard-support-campaign .button-link {
  min-height: 44px;
  justify-content: center;
  white-space: nowrap;
}

.postcard-tracking-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.05);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.postcard-tracking-note strong {
  color: var(--navy);
}

.postcard-campaign-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 14px;
}

.postcard-campaign-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.66);
}

.postcard-campaign-table th,
.postcard-campaign-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  text-align: left;
  vertical-align: top;
}

.postcard-campaign-table tr:last-child td {
  border-bottom: 0;
}

.postcard-campaign-table th {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.postcard-campaign-table td {
  color: var(--navy);
  font-size: 0.88rem;
  line-height: 1.4;
}

.postcard-campaign-table td a {
  color: var(--navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.postcard-campaign-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Every cell wraps its content in one element. On phones each row becomes
   a label/value pair, and a stray <small> would otherwise drop into the
   label column and break the alignment. */
.postcard-cell {
  min-width: 0;
}

.postcard-cell--number {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.postcard-cell--number small {
  font-weight: 400;
}

.postcard-cell--number.is-zero {
  color: rgba(23, 50, 79, 0.42);
  font-weight: 700;
}

.postcard-cell--number.is-zero small {
  color: var(--muted);
  font-weight: 400;
}

.postcard-cell__empty {
  color: var(--muted);
}

.postcard-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.postcard-state-chip {
  padding: 3px 9px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.credit-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.credit-strip-label {
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.credit-strip-amount {
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
}

.credit-strip-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.credit-strip-note-low {
  color: var(--partial);
  font-weight: 700;
}

.credit-strip-button {
  align-self: center;
  padding: 6px 14px;
  border: 1px solid rgba(23, 50, 79, 0.35);
  border-radius: 8px;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.credit-strip-button:hover {
  border-color: var(--navy);
  background: rgba(23, 50, 79, 0.06);
}

.credit-strip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.credit-buy-panel {
  max-width: 720px;
}

.credit-buy-panel h1 {
  margin: 4px 0 8px;
}

.credit-buy-error {
  margin: 12px 0 0;
  color: var(--failed);
  font-weight: 700;
}

.credit-buy-form {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 16px;
}

.credit-buy-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
}

.credit-buy-option {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.credit-buy-option:has(input:checked) {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

.credit-buy-option strong {
  color: var(--navy);
  font-size: 1.2rem;
}

.credit-buy-option small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.credit-buy-custom-field {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

.credit-buy-custom-field input {
  width: 110px;
}

.billing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 22px;
  align-items: stretch;
}

.billing-hero__copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.billing-hero__copy > p,
.billing-hero__copy h1,
.billing-hero__copy h2 {
  margin: 0;
}

.billing-hero__copy h1,
.billing-hero__copy h2,
.billing-unavailable h1,
.billing-unavailable h2 {
  color: var(--navy);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.02em;
}

.billing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.billing-refresh-link {
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(23, 50, 79, 0.35);
  text-underline-offset: 3px;
}

.billing-refresh-link:hover {
  text-decoration-color: var(--navy);
}

/* Proof that "Check for updates" did something. Text carries the whole
   message - no colour-only signal - so it reads the same for everyone. */
.billing-checked-note {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.billing-balance {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 174px;
  padding: 22px;
  border-radius: 14px;
  background: var(--navy);
  color: white;
}

.billing-balance > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.billing-balance strong {
  color: white;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.billing-balance small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.88rem;
  font-weight: 700;
}

.billing-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.billing-summary-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 156px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.billing-summary-card__label {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.billing-summary-card strong {
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.15;
}

.billing-summary-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.billing-activity-panel__heading {
  margin-bottom: 14px;
}

.billing-activity-panel__heading h2,
.billing-payment-panel h2 {
  margin: 4px 0 8px;
  color: var(--navy);
}

.billing-activity-table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.billing-activity-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.billing-activity-table th,
.billing-activity-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.billing-activity-table th {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.billing-activity-table tbody tr:last-child td {
  border-bottom: 0;
}

.billing-activity-table td {
  color: var(--navy);
  font-size: 0.9rem;
}

.billing-activity-table td strong,
.billing-activity-table td span {
  display: block;
}

.billing-activity-table td span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.billing-activity-table .num {
  text-align: right;
  white-space: nowrap;
}

.amount-negative {
  color: var(--failed) !important;
}

.amount-positive {
  color: var(--teal) !important;
}

.billing-empty-state {
  margin: 0;
  padding: 18px 0 2px;
}

.billing-payment-panel {
  max-width: 760px;
  margin-top: 18px;
}

.billing-unavailable {
  max-width: 760px;
  margin-top: 24px;
}

.billing-unavailable h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 400;
}

.billing-unavailable p {
  margin: 0 0 16px;
  max-width: 64ch;
  line-height: 1.55;
}

.billing-unavailable__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.billing-unavailable .billing-support-code {
  margin-top: 14px;
  font-size: 0.88rem;
}

.billing-payment-panel > p:first-child,
.billing-unavailable > p:first-child,
.billing-unavailable .eyebrow {
  margin-top: 0;
}

.operator-tool-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}

.campaign-setup-grid {
  grid-template-columns: minmax(0, 1fr);
}

.campaign-new {
  width: min(100%, 980px);
  min-width: 0;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.campaign-new__heading {
  display: grid;
  gap: 12px;
  padding: 2px 4px 0;
}

.campaign-new__heading > p,
.campaign-new__heading h1,
.campaign-new__heading .eyebrow,
.campaign-new__intro {
  margin: 0;
}

.campaign-new__heading h1 {
  margin-top: 4px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: normal;
}

.campaign-new__intro {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.campaign-new__form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.campaign-new__step,
.campaign-new__selection {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.campaign-new__step-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.campaign-new__step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.campaign-new__step-heading .eyebrow,
.campaign-new__step-heading h2,
.campaign-new__step-heading p,
.campaign-new__selection .eyebrow,
.campaign-new__selection h2,
.campaign-new__selection > header > p:last-child {
  margin: 0;
}

.campaign-new__step-heading h2,
.campaign-new__selection h2 {
  margin-top: 3px;
  font-size: 1.35rem;
}

.campaign-new__step-heading > div > p:last-child,
.campaign-new__selection > header > p:last-child {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.campaign-new__sources {
  grid-template-columns: repeat(3, minmax(min(100%, 12rem), 1fr));
}

.campaign-new__source-select {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  width: min(100%, 46rem);
}

.campaign-new__source-select > span {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}

.campaign-new__source-select select {
  width: 100%;
  min-height: 48px;
  padding-right: 42px;
  border-color: var(--navy);
  background-color: white;
  color: var(--navy);
  font-weight: 700;
}

.campaign-new__source-select small {
  min-height: 1.35em;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.address-source.campaign-new__sources--contractor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.campaign-new__sources--contractor .campaign-new__source-locked,
.campaign-new__sources--contractor .campaign-new__source-option.is-disabled {
  grid-column: 1 / -1;
}

.campaign-new__sources--contractor .campaign-new__source-locked {
  order: 1;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.035);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.campaign-new__sources--contractor .campaign-new__source-option.is-disabled {
  order: 2;
  min-height: 0;
}

.campaign-new__source-option {
  align-items: flex-start;
  min-width: 0;
  min-height: 104px;
  padding: 14px;
}

.campaign-new__source-option input {
  margin-top: 4px;
}

.campaign-new__source-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.campaign-new__source-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.campaign-new__source-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.04);
}

.campaign-new__source-panel--retargeting {
  grid-template-columns: repeat(2, minmax(min(100%, 14rem), 1fr));
}

.campaign-new__source-panel--retargeting .retargeting-source-note {
  grid-column: 1 / -1;
  margin: 0;
}

.retargeting-audience-preview,
.retargeting-audience-confirm {
  grid-column: 1 / -1;
}

.retargeting-audience-preview {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(31, 107, 99, 0.22);
  border-radius: 11px;
  background: rgba(31, 107, 99, 0.07);
}

.retargeting-audience-preview > span {
  margin: 0;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.retargeting-audience-preview strong {
  color: var(--navy);
  font-size: 1.02rem;
  line-height: 1.3;
}

.retargeting-audience-preview small {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
}

.retargeting-audience-confirm {
  max-width: none;
  padding: 13px 15px;
  border: 1px solid rgba(200, 138, 47, 0.3);
  border-radius: 11px;
  background: #fff8ec;
}

.retargeting-audience-confirm[hidden] {
  display: none;
}

.campaign-new__source-panel--targeted {
  background: rgba(23, 50, 79, 0.025);
}

.campaign-new__audience-limit {
  width: min(100%, 26rem);
  padding: 16px;
  border: 1px solid rgba(31, 107, 99, 0.2);
  border-radius: 12px;
  background: rgba(31, 107, 99, 0.055);
}

.campaign-new__audience-limit label {
  display: grid;
  gap: 6px;
}

.campaign-new__audience-limit input {
  width: 100%;
}

.campaign-new__audience-limit-hint {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
}

.campaign-new__postcard-grid,
.campaign-new__name-grid,
.campaign-new__storm-grid,
.campaign-new__more-options-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(100%, 16rem), 1fr));
  gap: 16px;
  min-width: 0;
}

.campaign-new__postcard-grid {
  grid-template-columns: minmax(0, 1fr);
}

.campaign-new__name-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 36rem;
}

/* Postcard style picker: one picture card per live style. Selection is shown
   by the radio dot plus a gold border and cream fill (navy/gold only — never
   a blue-vs-purple hue shift). */
.style-picker {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.style-picker legend {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.style-picker__layout {
  display: grid;
  grid-template-columns: minmax(300px, 1.08fr) minmax(280px, 0.92fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.style-picker__commercial-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 10px;
  background: #fff8ec;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.style-picker__commercial-note[hidden] {
  display: none;
}

.style-picker__preview {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(200, 138, 47, 0.5);
  border-radius: 14px;
  background: #fff8ec;
  box-shadow: 0 10px 26px rgba(23, 50, 79, 0.08);
}

.style-picker__preview-image {
  aspect-ratio: 900 / 635;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.06);
}

.style-picker__preview-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-picker__preview-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.style-picker__preview-copy .eyebrow,
.style-picker__preview-copy p {
  margin: 0;
}

.style-picker__preview-copy strong {
  color: var(--navy);
  font-size: 1.15rem;
  line-height: 1.2;
}

.style-picker__preview-copy > p:not(.style-picker__preview-note) {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}

.style-picker__preview-note {
  color: var(--gold-deep);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.style-picker__choices {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.style-choice {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: white;
  cursor: pointer;
}

.style-choice[hidden] {
  display: none;
}

.style-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--navy);
}

.style-choice__thumbnail {
  display: block;
  width: clamp(70px, 8vw, 88px);
  aspect-ratio: 900 / 635;
  overflow: hidden;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 7px;
  background: rgba(23, 50, 79, 0.06);
}

.style-choice__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-choice__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  min-width: 0;
}

.style-choice__copy strong {
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.2;
}

.style-choice__description {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
}

.style-choice__note {
  align-self: start;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(200, 138, 47, 0.12);
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.style-choice:has(input:checked) {
  border-color: var(--gold);
  background: #fff8ec;
  box-shadow: 0 0 0 2px rgba(200, 138, 47, 0.2);
}

.style-choice:focus-within {
  outline: 3px solid rgba(23, 50, 79, 0.35);
  outline-offset: 2px;
}

.style-picker:disabled .style-choice {
  cursor: not-allowed;
  opacity: 0.58;
}

.style-picker:disabled .style-choice:has(input:checked) {
  opacity: 1;
  border-color: rgba(200, 138, 47, 0.42);
  background: #fffaf1;
  box-shadow: none;
}

@media (max-width: 760px) {
  .style-picker__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .style-picker__preview {
    position: static;
  }
}

@media (max-width: 480px) {
  .style-picker__preview {
    gap: 10px;
    padding: 10px;
  }

  .style-picker__preview-copy strong {
    font-size: 1.05rem;
  }

  .style-choice {
    min-height: 56px;
    gap: 8px;
    padding: 8px;
  }

  .style-choice__copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .style-choice__copy strong {
    font-size: 0.82rem;
  }

  .style-choice__description {
    font-size: 0.74rem;
  }

  .style-choice__note {
    justify-self: start;
    grid-row: 3;
  }

  .style-choice__description {
    grid-row: 2;
  }
}

.campaign-new__storm-fields {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(200, 138, 47, 0.48);
  border-radius: 12px;
  background: rgba(200, 138, 47, 0.09);
}

.campaign-new__storm-fields > p {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.45;
}

.campaign-new__more-options {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.75);
}

.campaign-new__more-options > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.campaign-new__more-options > summary::-webkit-details-marker {
  display: none;
}

.campaign-new__more-options > summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold-deep);
  font-size: 1.25rem;
  font-weight: 700;
}

.campaign-new__more-options[open] > summary::after {
  content: "−";
}

.campaign-new__more-options > summary > span {
  font-weight: 700;
}

.campaign-new__more-options > summary small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.campaign-new__more-options-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}

.campaign-new__owner-option,
.campaign-new__cleanup-note,
.campaign-new__processing {
  grid-column: 1 / -1;
}

/* An ordinary preference, not a money consent: it borrows the checkbox layout
   from .mailing-confirm-check without that block's heavy approval weight. */
.campaign-new__office-copy {
  margin-top: 14px;
  font-weight: 600;
}

.campaign-new__office-copy span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.campaign-new__option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.campaign-new__option-copy strong {
  color: var(--navy);
  font-size: 0.94rem;
  line-height: 1.15;
}

.campaign-new__option-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.campaign-new__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

.campaign-new__actions p {
  flex: 1 1 280px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.campaign-preflight {
  gap: 18px;
  margin-top: 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.campaign-preflight__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.campaign-preflight__heading .eyebrow,
.campaign-preflight__heading h2,
.campaign-preflight__heading h3,
.campaign-preflight__heading > p {
  margin: 0;
}

.campaign-preflight__heading h2,
.campaign-preflight__heading h3 {
  margin-top: 4px;
  color: var(--navy);
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  letter-spacing: -0.015em;
}

.campaign-preflight__heading > p {
  max-width: 32ch;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

.campaign-preflight__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.campaign-preflight__item {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(23, 50, 79, 0.11);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.035);
}

.campaign-preflight__item dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}

.campaign-preflight__item dd {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.campaign-preflight__item dd strong {
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.3;
}

.campaign-preflight__item dd span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.campaign-preflight__item--cost {
  border-color: rgba(37, 96, 59, 0.18);
  background: rgba(37, 96, 59, 0.06);
}

.campaign-preflight__item--boundary {
  border-color: rgba(200, 138, 47, 0.24);
  background: rgba(200, 138, 47, 0.07);
}

.campaign-preflight__confirm {
  max-width: none;
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.campaign-preflight__confirm span {
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.campaign-new__selection .subdivision-preview {
  margin: 0;
}

.campaign-new__source-panel[hidden],
.campaign-new__storm-fields[hidden],
.targeted-results[hidden],
.targeted-tallies[hidden],
.targeted-notes[hidden],
.targeted-table-wrap[hidden],
.targeted-sale-lag[hidden],
[data-targeted-mode][hidden] {
  display: none;
}

/* Reviewed-audience campaign flow. Keep the first screen quiet: setup fields
   only appear after an immutable address snapshot is accepted. */
.audience-flow {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.audience-flow__header {
  display: grid;
  gap: 8px;
  padding: 0 4px 4px;
}

.audience-flow__header > p,
.audience-flow__header h1,
.audience-flow__lede,
.audience-flow__panel-heading h2,
.audience-flow__panel-heading p,
.audience-flow__choice h2 {
  margin: 0;
}

.audience-flow__header h1 {
  margin-top: 2px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: normal;
}

.audience-flow__lede,
.audience-flow__panel-heading p {
  max-width: 65ch;
  color: var(--muted);
  line-height: 1.5;
}

.audience-flow__choice,
.audience-flow__panel {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.audience-flow__choice h2,
.audience-flow__panel-heading h2 {
  margin-top: 3px;
  color: var(--navy);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  letter-spacing: -0.02em;
}

.audience-flow__choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.audience-flow__choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(23, 50, 79, 0.15);
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.audience-flow__choice-card:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(23, 50, 79, 0.1);
  transform: translateY(-1px);
}

.audience-flow__choice-card strong,
.audience-flow__choice-card small {
  display: block;
}

.audience-flow__choice-card strong {
  font-size: 1rem;
  line-height: 1.25;
}

.audience-flow__choice-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
}

.audience-flow__choice-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
}

.audience-flow__choice-arrow {
  color: var(--gold-deep);
  font-size: 1.25rem;
  font-weight: 700;
}

.audience-flow__panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.audience-flow__back {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 4px;
  color: var(--navy);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.audience-flow__form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.audience-flow__form label,
.audience-flow__followup label {
  display: grid;
  gap: 6px;
}

.audience-flow__form label > span,
.audience-flow__followup label > span {
  color: var(--navy);
  font-size: .84rem;
  font-weight: 700;
}

.audience-flow__form textarea,
.audience-flow__form input[type="text"],
.audience-flow__form input[type="number"],
.audience-flow__form input[type="file"],
.audience-flow__form select {
  width: 100%;
}

.audience-flow__storm-fields {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.035);
}

.audience-flow [hidden],
.audience-flow__form [hidden],
.audience-flow__storm-fields[hidden],
[data-address-input][hidden] {
  display: none !important;
}

.audience-flow__field-help {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.4;
}

.audience-flow__checkbox {
  display: flex !important;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 10px !important;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}

.audience-flow__checkbox input {
  flex: 0 0 auto;
  width: auto !important;
  margin-top: .2rem;
}

.audience-flow__checkbox span {
  color: var(--navy) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.audience-flow__form-note,
.audience-flow__form small {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.4;
}

.audience-flow__form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.audience-flow__subdivision {
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.audience-flow__subdivision summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 700;
}

.audience-flow__subdivision .audience-flow__form {
  margin-top: 16px;
}

.audience-flow__followup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.audience-flow__notice,
.audience-flow__authorization {
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.035);
  color: var(--navy);
  line-height: 1.45;
}

.audience-flow__notice--warning {
  border-color: rgba(200, 138, 47, 0.32);
  background: #fff8ec;
}

.audience-flow__notice--success {
  border-color: rgba(37, 96, 59, 0.22);
  background: rgba(37, 96, 59, 0.06);
}

.audience-flow__counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.audience-flow__counts > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(23, 50, 79, 0.11);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.035);
}

.audience-flow__counts dt {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.audience-flow__counts dd {
  margin: 0;
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 800;
}

.audience-flow__address-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.audience-flow__address-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.audience-flow__address-list li > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-align: right;
}

.audience-flow__address-list code {
  overflow-wrap: anywhere;
  color: var(--navy);
  font-family: inherit;
  font-size: .9rem;
}

.audience-flow__authorization {
  display: grid;
  gap: 10px;
  border-color: rgba(200, 138, 47, 0.32);
  background: #fff8ec;
}

.audience-flow__authorization h3,
.audience-flow__authorization p {
  margin: 0;
}

.audience-flow__authorization h3 {
  color: var(--navy);
  font-size: 1.1rem;
}

.audience-flow__authorization p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 600;
}

.audience-flow__error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(160, 54, 54, 0.28);
  border-radius: 10px;
  background: rgba(160, 54, 54, 0.07);
  color: var(--failed);
  font-weight: 700;
}

.audience-flow__error[hidden] {
  display: none;
}

.audience-flow__pending {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.05);
  color: var(--navy);
  font-weight: 700;
}

/* Campaign Creation 3-Step Guided Stepper */
.campaign-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.campaign-stepper__step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.campaign-stepper__circle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 800;
  transition: all 0.2s ease;
}

.campaign-stepper__step.is-active {
  color: var(--navy);
}

.campaign-stepper__step.is-active .campaign-stepper__circle {
  background: var(--navy);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.25);
}

.campaign-stepper__step.is-complete {
  color: #059669;
}

.campaign-stepper__step.is-complete .campaign-stepper__circle {
  background: #059669;
  color: #ffffff;
}

.campaign-stepper__line {
  flex: 1;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 0 8px;
}

.campaign-stepper__line.is-active {
  background: #059669;
}

@media (max-width: 600px) {
  .campaign-stepper {
    padding: 10px 14px;
    gap: 4px;
  }
  .campaign-stepper__step {
    gap: 6px;
    font-size: 0.8rem;
  }
  .campaign-stepper__step span:not(.campaign-stepper__circle) {
    display: none;
  }
  .campaign-stepper__step.is-active span:not(.campaign-stepper__circle) {
    display: inline-block;
    white-space: nowrap;
  }
  .campaign-stepper__line {
    margin: 0 4px;
  }
}

/* Hail & Storm Audience Builder Styles */
.hail-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 18px;
  width: 100%;
}

@media (max-width: 900px) {
  .hail-builder-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.hail-builder-grid .audience-flow__panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.hail-builder-grid .input,
.hail-builder-grid select,
.hail-builder-grid input {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.hail-report-card {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* Audience Tab Bar */
.audience-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .audience-tabs {
    grid-template-columns: 1fr;
  }
}

.audience-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: var(--navy);
  text-decoration: none;
  transition: all 0.15s ease;
}

.audience-tab:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

.audience-tab.is-active {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}

.audience-tab__icon {
  font-size: 1.5rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  flex-shrink: 0;
}

.audience-tab strong {
  display: block;
  font-size: 0.95rem;
  color: var(--navy);
}

.audience-tab small {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 2px;
}

.audience-flow__campaign-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 12px;
}

.audience-flow__campaign-details > label {
  align-content: start;
  min-width: 0;
}

.audience-flow__campaign-details input[type="text"],
.audience-flow__campaign-details textarea {
  font: inherit;
  line-height: 1.5;
  min-height: 50px;
}

.audience-flow__campaign-details textarea.is-autosizing {
  resize: none;
  overflow-y: hidden;
}

/* Postcard Visual Card Gallery */
.postcard-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 12px 0 20px;
}

.postcard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  text-align: left;
}

.postcard-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.postcard-card.is-selected {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
}

.postcard-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 635;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
}

.postcard-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.postcard-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.postcard-card__title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.postcard-card__desc {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.4;
  flex: 1;
}

.postcard-card__radio-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.postcard-card.is-selected .postcard-card__radio-indicator {
  border-color: #0284c7;
  background: #0284c7;
}

.postcard-card.is-selected .postcard-card__radio-indicator::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

/* Audience Summary Banner for Step 3 */
.audience-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #86efac;
  border-radius: 12px;
  margin-bottom: 18px;
}

.audience-summary-bar__info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audience-summary-bar__badge {
  background: #15803d;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 999px;
}

.storm-setup-lock__summary {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(200, 138, 47, 0.32);
  border-radius: 12px;
  background: #fff8ec;
  color: var(--navy);
}

.storm-setup-lock__summary > div {
  display: grid;
  gap: 5px;
}

.storm-setup-lock__summary strong,
.storm-setup-lock__summary p {
  margin: 0;
}

.storm-setup-lock__summary > div strong {
  font-size: 1rem;
}

.storm-setup-lock__summary > div p {
  color: #5f5546;
  font-size: 0.86rem;
  line-height: 1.45;
}

.storm-setup-lock__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.storm-setup-lock__facts > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.storm-setup-lock__facts dt {
  color: #765018;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.storm-setup-lock__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.storm-setup-lock__facts code {
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
}

.storm-setup-lock__card {
  cursor: default;
}

.storm-setup-lock__card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
  transform: none;
}

.storm-setup-lock__details {
  gap: 5px;
  border-color: rgba(200, 138, 47, 0.28);
  background: rgba(200, 138, 47, 0.08);
}

.storm-setup-lock__details strong {
  color: #765018;
}

.storm-setup-lock__details p {
  margin: 0;
  color: #5f5546;
  font-size: 0.84rem;
}

@media (max-width: 700px) {
  .storm-setup-lock__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .storm-setup-lock__facts {
    grid-template-columns: 1fr;
  }
}

/* Polished targeted filter checkboxes and presets */
.audience-flow .targeted-check,
.audience-flow .targeted-exclusion-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  color: #334155 !important;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
  background: #ffffff;
  transition: all 0.15s ease;
}

.audience-flow .targeted-check:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.audience-flow .targeted-check input[type="checkbox"],
.audience-flow .targeted-check input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: #0284c7;
}

.targeted-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.targeted-preset-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.targeted-preset-button:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.targeted-preset-button[aria-pressed="true"] {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.audience-flow__pending[hidden] {
  display: none;
}

.audience-flow[aria-busy="true"] .audience-flow__panel {
  cursor: progress;
}

/* The kind of work this campaign is for: a quiet line under the back link. */
.audience-flow__kind {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.audience-flow__kind a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .audience-flow__choice-grid,
  .audience-flow__counts,
  .audience-flow__followup {
    grid-template-columns: 1fr;
  }

  .audience-flow__panel-heading {
    display: grid;
    gap: 8px;
  }

  .audience-flow__back {
    justify-self: start;
  }

  .audience-flow__form-actions,
  .audience-flow__form-actions .button,
  .audience-flow__form-actions .button-link {
    width: 100%;
  }

  .audience-flow__form-actions .audience-flow__form-note {
    width: 100%;
  }
}

.operator-drawer,
.campaign-settings-drawer,
.batch-test-panel {
  display: grid;
  gap: 16px;
}

.operator-drawer > summary,
.campaign-settings-drawer > summary,
.batch-test-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
}

.operator-drawer > summary::-webkit-details-marker,
.campaign-settings-drawer > summary::-webkit-details-marker,
.batch-test-panel > summary::-webkit-details-marker {
  display: none;
}

.operator-drawer > summary::after,
.campaign-settings-drawer > summary::after,
.batch-test-panel > summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--gold-deep);
  font-size: 0.9rem;
  transition: transform .15s ease;
}

.operator-drawer:not([open]) > summary::after,
.campaign-settings-drawer:not([open]) > summary::after,
.batch-test-panel:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.operator-drawer > summary > span,
.campaign-settings-drawer > summary > span,
.batch-test-panel > summary > span {
  display: grid;
  gap: 4px;
}

.operator-drawer summary .eyebrow,
.campaign-settings-drawer summary .eyebrow,
.batch-test-panel summary .eyebrow {
  margin: 0;
}

.operator-drawer summary strong,
.campaign-settings-drawer summary strong,
.batch-test-panel summary strong {
  color: var(--navy);
  font-size: 1.22rem;
  line-height: 1.1;
}

.operator-drawer summary small,
.campaign-settings-drawer summary small,
.batch-test-panel summary small {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.campaign-settings-drawer:not([open]),
.batch-test-panel:not([open]) {
  gap: 0;
  padding: 11px 14px;
}

.batch-test-panel:not([open]) {
  margin-top: 12px;
  margin-bottom: 12px;
}

@media (min-width: 641px) {
  .campaign-settings-drawer:not([open]) > summary > span,
  .batch-test-panel:not([open]) > summary > span {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 12px;
  }

  .campaign-settings-drawer:not([open]) summary .eyebrow,
  .batch-test-panel:not([open]) summary .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .campaign-settings-drawer:not([open]) summary strong,
  .batch-test-panel:not([open]) summary strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
  }

  .campaign-settings-drawer:not([open]) summary small,
  .batch-test-panel:not([open]) summary small {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
  }
}

.drawer-body {
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.drawer-body p {
  margin: 0;
}

.operator-section-bar {
  box-shadow: none;
  background: rgba(255, 253, 248, 0.82);
}

.action-panel h2,
.campaign-card h3,
.section-heading h2 {
  margin: 0 0 10px;
}

.section-heading h1,
.page-heading h1,
.leads-page__header h1,
.leads-page__title-row h1,
.campaign-heading h1 {
  margin: 0;
}

.leads-page__title h1::after,
.leads-page__title-row h1::after,
.leads-page__header h1::after,
.leads-header-card h1::after,
.properties-header-card h1::after,
.page-heading h1::after,
.section-heading h1::after,
.campaign-heading h1::after,
.audience-flow__header h1::after,
.credit-buy-panel h1::after,
.text-blast-review__header h1::after,
.postcard-stats-title h1::after,
.viewer-dashboard-heading h1::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-top: 10px;
  margin-bottom: 0;
}

.leads-header-card,
.properties-header-card {
  margin-bottom: 24px;
}

.leads-header-card__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}

.properties-header-card__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.leads-header-card__info,
.properties-header-card__info {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 820px;
}

.leads-header-card__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

.leads-header-card__info h1,
.properties-header-card__info h1 {
  margin: 0;
  font-size: 2.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.028em;
}

.leads-header-card__info .muted,
.properties-header-card__info .muted {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}

.properties-header-card .properties-tab-list {
  margin-top: 18px;
  position: static;
  background: rgba(23, 50, 79, 0.04);
  box-shadow: none;
}

.section-heading .muted,
.page-heading .muted,
.leads-page__count,
.postcard-stats-title .muted {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold-deep);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  max-width: 58ch;
}

.panel-section + .panel-section {
  margin-top: 18px;
}

.dashboard-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.dashboard-insight {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(31, 107, 99, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(31, 107, 99, 0.055));
}

.dashboard-insight .insight-label {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-insight strong {
  color: var(--navy);
  font-size: 1.55rem;
  line-height: 1;
}

.dashboard-insight span:last-child {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.properties-tabs {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.properties-tab-list {
  position: sticky;
  top: 76px;
  z-index: 50;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 12px 26px rgba(23, 50, 79, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
}

.properties-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.properties-tab:hover,
.properties-tab:focus-visible {
  color: var(--navy);
  background: rgba(23, 50, 79, 0.06);
}

.properties-tab.is-active,
.properties-tab[aria-selected="true"] {
  color: white;
  background: var(--navy);
}

.properties-tab span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.08);
  color: inherit;
  font-size: 0.78rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.properties-tab.is-active span,
.properties-tab[aria-selected="true"] span {
  background: rgba(255, 255, 255, 0.18);
}

.properties-tab-panel[hidden] {
  display: none !important;
}

.properties-tab-panel.is-active {
  display: grid;
}

.settings-tabs {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.settings-tab-list {
  position: sticky;
  top: 76px;
  z-index: 50;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 12px 26px rgba(23, 50, 79, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.settings-tab:hover,
.settings-tab:focus-visible {
  color: var(--navy);
  background: rgba(23, 50, 79, 0.06);
}

.settings-tab.is-active,
.settings-tab[aria-selected="true"] {
  color: white;
  background: var(--navy);
}

.address-lookup-box {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.property-lookup-panel + .property-lookup-panel {
  margin-top: 28px;
}

.property-lookup-box {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.property-activity-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
  scroll-margin-top: 180px;
}

.property-activity-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.property-activity-header h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.35rem;
}

.property-activity-campaign-form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.property-activity-campaign-form__field {
  display: grid;
  gap: 4px;
  min-width: min(280px, 58vw);
}

.property-activity-campaign-form__field > span {
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 800;
}

.property-activity-campaign-form .campaign-multiselect__menu {
  right: 0;
  left: auto;
}

.property-activity-campaign-form button {
  min-height: 42px;
  padding: 8px 16px;
}

.property-activity-segments {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  overflow-x: auto;
}

.property-activity-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.property-activity-segment:hover,
.property-activity-segment:focus-visible {
  color: var(--navy);
  background: rgba(23, 50, 79, 0.06);
}

.property-activity-segment.is-active {
  color: white;
  background: var(--navy);
}

.property-activity-explainer {
  margin: -2px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.08);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.property-activity-explainer strong {
  color: var(--navy);
}

.property-activity-list {
  display: grid;
  gap: 12px;
}

.property-activity-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 24px rgba(15, 32, 53, 0.06);
}

.property-activity-card__header {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.property-activity-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.08);
  color: inherit;
  text-decoration: none;
}

.property-activity-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-activity-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(8, 23, 45, 0.72));
  pointer-events: none;
}

.property-activity-thumb span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.property-activity-thumb-roof {
  outline: 2px solid rgba(200, 138, 47, 0.48);
  outline-offset: -2px;
}

.property-activity-thumb-empty {
  display: grid;
  place-items: center;
}

.property-activity-thumb-empty::after {
  display: none;
}

.property-activity-thumb-empty span {
  position: static;
  color: rgba(23, 50, 79, 0.58);
  text-align: center;
}

.property-activity-card__title {
  min-width: 0;
}

.property-activity-card__title h3 {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 1.15rem;
  line-height: 1.25;
}

.property-activity-card__title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.property-activity-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.property-activity-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.property-activity-meta div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 10px;
  background: rgba(247, 244, 237, 0.58);
}

.property-activity-meta dt {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.property-activity-meta dd {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.property-activity-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid rgba(43, 111, 78, 0.2);
  border-radius: 10px;
  background: rgba(43, 111, 78, 0.06);
}

.property-activity-contact__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.property-activity-contact__label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.property-activity-contact__copy strong {
  color: var(--navy);
  font-size: 1.05rem;
}

.property-activity-contact__copy > span:not(.property-activity-contact__label),
.property-activity-contact__copy small {
  color: var(--muted);
  line-height: 1.35;
}

.property-activity-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.property-activity-actions .property-activity-call {
  min-height: 44px;
  padding: 11px 18px;
}

.property-activity-empty {
  margin: 0;
}

.address-lookup-copy h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.28rem;
}

.address-lookup-copy p:last-child {
  margin: 0;
}

.address-lookup-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.address-lookup-form button {
  min-height: 46px;
  padding-inline: 20px;
}

.address-lookup-form__hint {
  grid-column: 1;
  margin-top: -4px;
}

.address-lookup-results {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(31, 107, 99, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.address-lookup-more {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(23, 50, 79, 0.72);
}

.address-result-list {
  display: grid;
  gap: 8px;
}

.address-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 12px;
  background: white;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.address-result:hover {
  border-color: rgba(31, 107, 99, 0.28);
  transform: translateY(-1px);
}

.mail-suppression-result:hover {
  border-color: rgba(23, 50, 79, 0.1);
  transform: none;
}

.address-result > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.address-result strong {
  color: var(--navy);
}

.address-result span span,
.address-result-meta {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.blocked-address-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

/* The Mailing exclusions tab stacks two sections — people who asked, then
   addresses that don't work — as plain blocks, so neither got any spacing of
   its own: the second heading sat flush against the card above it, and each
   heading sat flush against its own list. Separate the sections at the same
   28px this page already uses between panels, and give a heading the same 10px
   lead-in to its list that .blocked-address-list gives its own. */
[data-blocked-address-rows] > .blocked-address-list + .address-lookup-copy {
  margin-top: 28px;
}

[data-blocked-address-rows] > .address-lookup-copy + .panel {
  margin-top: 10px;
}

.blocked-address-panel,
.blocked-address-rows {
  display: grid;
  gap: 0;
}

.blocked-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
}

.blocked-address-row:first-child {
  padding-top: 0;
}

.blocked-address-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.blocked-address-row strong {
  color: var(--navy);
  line-height: 1.25;
}

.blocked-address-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.blocked-address-row form {
  margin: 0;
}

.blocked-address-row button {
  min-height: 36px;
  padding: 8px 14px;
}

.blocked-address-variants {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.blocked-address-variants a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .section-heading:has(+ .properties-tabs),
  .section-heading:has(+ .settings-tabs) {
    margin-bottom: 8px;
  }

  .section-heading:has(+ .properties-tabs) .muted,
  .section-heading:has(+ .settings-tabs) .muted {
    margin-bottom: 0;
  }

  .properties-tabs {
    gap: 12px;
    margin-bottom: 24px;
  }

  .properties-tab-list {
    position: static;
    z-index: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 6px 16px rgba(23, 50, 79, 0.08);
  }

  .properties-tab {
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 9px 8px;
    font-size: clamp(0.78rem, 3.6vw, 0.9rem);
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .properties-tab span {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 6px;
  }

  .settings-tabs {
    gap: 12px;
    margin-bottom: 24px;
  }

  .settings-tab-list {
    position: static;
    z-index: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 6px 16px rgba(23, 50, 79, 0.08);
  }

  .settings-tab {
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .property-activity-panel {
    gap: 12px;
    margin-bottom: 20px;
    scroll-margin-top: 120px;
  }

  .property-activity-header,
  .property-activity-campaign-form,
  .property-activity-card__header {
    display: grid;
  }

  .property-activity-header {
    align-items: start;
    gap: 12px;
  }

  .property-activity-header h2 {
    margin-bottom: 6px;
    font-size: 1.42rem;
    line-height: 1.15;
  }

  .property-activity-header .muted {
    margin: 0;
    line-height: 1.35;
  }

  .property-activity-campaign-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .property-activity-card__header {
    grid-template-columns: 1fr;
  }

  .property-activity-thumb {
    max-height: 190px;
  }

  .property-activity-campaign-form__field {
    min-width: 0;
  }

  .property-activity-segments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
    width: 100%;
    overflow: visible;
  }

  .property-activity-segment {
    min-width: 0;
    min-height: 44px;
    padding: 9px 6px;
    font-size: 0.82rem;
    text-align: center;
    white-space: normal;
  }

  .property-activity-meta {
    grid-template-columns: 1fr;
  }

  .property-activity-badges {
    justify-content: flex-start;
  }

  .property-activity-contact {
    display: grid;
    align-items: stretch;
  }

  .property-activity-actions,
  .property-activity-call {
    width: 100%;
  }

  .property-activity-call {
    justify-content: center;
  }

  .blocked-address-row {
    align-items: flex-start;
    gap: 10px;
  }

  .blocked-address-row form {
    flex-shrink: 0;
  }
}

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

.leads-page {
  display: grid;
  gap: 18px;
  margin-bottom: 32px;
}

.leads-page__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0 0 16px;
  width: 100%;
}

.leads-page__header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.leads-page__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.leads-page__title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.leads-page__title-row h1 {
  margin: 0;
}

.leads-page__count {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.leads-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px !important;
  background: var(--navy);
  color: #ffffff;
  border: 1px solid rgba(23, 50, 79, 0.14);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.15);
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.leads-add-btn:hover {
  background: #1f3f63;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 50, 79, 0.25);
}

/* Add a lead modal dialog */
dialog.leads-modal,
.leads-modal {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(23, 50, 79, 0.25), 0 0 0 1px rgba(23, 50, 79, 0.1);
  box-sizing: border-box;
  max-width: min(calc(100vw - 32px), 540px);
  width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1000;
}

dialog.leads-modal::backdrop,
.leads-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.leads-modal__content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.leads-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  padding-bottom: 16px;
}

.leads-modal__head h2 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.leads-modal__subhead {
  margin: 4px 0 0;
  font-size: 0.88rem;
}

.leads-modal__close-btn {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.leads-modal__close-btn:hover {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
}

.leads-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leads-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) {
  .leads-modal__grid {
    grid-template-columns: 1fr;
  }
}

.leads-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leads-modal__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}

.leads-modal__required {
  color: #c93b2b;
}

.leads-modal__field input[type="text"],
.leads-modal__field input[type="tel"],
.leads-modal__field select,
.leads-modal__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 79, 0.2);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text);
  background-color: #ffffff;
  box-sizing: border-box;
}

.leads-modal__field select {
  padding-right: 42px;
}

.leads-modal__field input:focus,
.leads-modal__field input:focus-visible,
.leads-modal__field select:focus,
.leads-modal__field select:focus-visible,
.leads-modal__field textarea:focus,
.leads-modal__field textarea:focus-visible {
  outline: none;
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
}

.leads-modal__consent {
  padding: 12px 14px;
  background: rgba(23, 50, 79, 0.04);
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.leads-modal__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.leads-modal__checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--teal);
}

.leads-modal__consent-hint {
  margin: 0;
  font-size: 0.78rem;
  padding-left: 24px;
}

.leads-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* One toolbar row: the tabs pick the view, the campaign and download
   popovers beside them scope and export it. The min-width: 0 pair stops the
   popover buttons' natural width from propagating up the page's grids and
   stretching every row past a phone screen. */
.leads-tabs {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.leads-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* The two popovers travel as one right-aligned pair, so when the row is too
   narrow for the tabs they wrap together instead of one straggling alone. */
.leads-toolbar__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}

.leads-campaign-filter {
  display: flex;
  align-items: center;
  min-width: 0;
}

.campaign-multiselect,
.leads-campaign-multiselect,
.leads-campaign-filter button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.campaign-multiselect,
.leads-campaign-multiselect {
  position: relative;
  width: 100%;
  border: 1px solid rgba(23, 50, 79, 0.2);
  background-color: #ffffff;
  color: var(--ink);
}

.campaign-multiselect summary,
.leads-campaign-multiselect summary {
  position: relative;
  min-height: 42px;
  padding: 10px 38px 8px 12px;
  cursor: pointer;
  list-style: none;
}

.campaign-multiselect summary::-webkit-details-marker,
.leads-campaign-multiselect summary::-webkit-details-marker {
  display: none;
}

.campaign-multiselect summary::after,
.leads-campaign-multiselect summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2317324f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transform: translateY(-50%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.campaign-multiselect[open] summary::after,
.leads-campaign-multiselect[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.campaign-multiselect__menu,
.leads-campaign-multiselect__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: min(460px, calc(100vw - 48px));
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 50, 79, 0.14), 0 2px 6px rgba(23, 50, 79, 0.04);
}

.campaign-multiselect__menu label,
.leads-campaign-multiselect__menu label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.campaign-multiselect__menu label:hover,
.leads-campaign-multiselect__menu label:hover {
  background-color: rgba(23, 50, 79, 0.06);
}

.campaign-multiselect__menu input,
.leads-campaign-multiselect__menu input {
  margin-top: 3px;
  accent-color: var(--navy);
}

/* The leads variant is a compact toolbar control, not a full-width field. */
.leads-campaign-multiselect {
  width: auto;
  max-width: 100%;
  border-radius: 8px;
}

.leads-campaign-multiselect summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 38px 8px 12px;
  white-space: nowrap;
}

.leads-campaign-multiselect__prefix {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.leads-campaign-multiselect__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 800;
}

/* Anchored to the control's right edge so it opens toward the page, not off
   it - the control sits at the toolbar's right end. */
.leads-campaign-multiselect__menu {
  left: auto;
  right: 0;
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.leads-campaign-multiselect__options {
  display: grid;
  max-height: 240px;
  overflow-y: auto;
}

/* The global `label span` rule uppercases and block-stacks field labels;
   campaign names in a picker are names, not labels. Every picker that lists
   campaign names needs this, or the same name shouts on one page and reads
   normally on the next. */
.leads-campaign-multiselect__menu label span,
.campaign-multiselect__menu label span {
  display: inline;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
}

.leads-campaign-multiselect__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 2px;
  border-top: 1px solid rgba(23, 50, 79, 0.12);
}

/* Unified single-select filter dropdowns (Status, Replied, Sort, etc.) */
.leads-filter-dropdown {
  position: relative;
  width: auto;
  max-width: 100%;
  border: 1px solid rgba(23, 50, 79, 0.2);
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--ink);
  box-shadow: none;
}

.leads-filter-dropdown summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 38px 8px 12px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.leads-filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.leads-filter-dropdown summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2317324f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transform: translateY(-50%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.leads-filter-dropdown[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.leads-filter-dropdown:hover,
.leads-campaign-multiselect:hover,
.retargeting-export > summary:hover {
  border-color: rgba(23, 50, 79, 0.58);
  background-color: #fffdf8;
}

.leads-filter-dropdown[open],
.leads-filter-dropdown:focus-within,
.leads-campaign-multiselect[open],
.leads-campaign-multiselect:focus-within,
.retargeting-export[open] > summary {
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
}

.leads-filter-dropdown__prefix {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.leads-filter-dropdown__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.leads-filter-dropdown__menu {
  position: absolute;
  z-index: 25;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 50, 79, 0.14), 0 2px 6px rgba(23, 50, 79, 0.04);
  box-sizing: border-box;
}

.leads-filter-dropdown__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
}

.leads-filter-dropdown__options > * {
  margin: 0;
}

.leads-filter-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 0.12s ease;
  box-shadow: none;
}

.leads-filter-dropdown__item + .leads-filter-dropdown__item {
  margin-left: 0;
  margin-top: 0;
}

.leads-filter-dropdown__item:hover,
.leads-filter-dropdown__item:focus-visible {
  background-color: rgba(23, 50, 79, 0.06);
  outline: none;
}

.leads-filter-dropdown__item.is-selected {
  background-color: rgba(23, 50, 79, 0.08);
  font-weight: 700;
}

.leads-filter-dropdown__check {
  flex: 0 0 auto;
  color: var(--gold-deep, #9c6c22);
}

/* The hidden attribute must beat the layout display values. */
.leads-campaign-multiselect__footer[hidden],
.leads-campaign-filter button[hidden] {
  display: none;
}

.leads-campaign-filter button {
  padding: 8px 16px;
  border: 1px solid var(--navy);
  background-color: var(--navy);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.leads-campaign-filter__clear {
  align-self: center;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
}

/* The download menu: a compact disclosure button on the toolbar whose panel
   drops over the page, so the exports cost no room until they are wanted. */
.retargeting-export {
  position: relative;
}

.retargeting-export > summary.retargeting-export__title {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 42px;
  padding: 8px 36px 8px 12px;
  border: 1px solid rgba(23, 50, 79, 0.2);
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.retargeting-export > summary.retargeting-export__title::-webkit-details-marker {
  display: none;
}

.retargeting-export > summary.retargeting-export__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2317324f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transform: translateY(-50%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.retargeting-export[open] > summary.retargeting-export__title::after {
  transform: translateY(-50%) rotate(180deg);
}

.retargeting-export__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 50, 79, 0.14), 0 2px 6px rgba(23, 50, 79, 0.04);
}

.retargeting-export__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.retargeting-export__actions {
  display: grid;
  gap: 8px;
}

.retargeting-export__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
}

.retargeting-export__button strong {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: inherit;
  font-size: 0.78rem;
  text-align: center;
}

.leads-tabs {
  display: grid;
  gap: 16px;
}

.leads-tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.leads-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  margin: 0;
  padding: 9px 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
  /* Two of the four tabs are links (they set the server-side filter) and two
     are buttons. Without this the links wear an underline and the row reads as
     two different kinds of control. */
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.leads-tab:hover,
.leads-tab:focus-visible {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  transform: none;
}

.leads-tab[aria-selected="true"],
.leads-tab.is-active {
  background: var(--navy);
  color: white;
  box-shadow: 0 6px 14px rgba(23, 50, 79, 0.16);
}

.leads-tab strong {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.08);
  color: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.leads-tab[aria-selected="true"] strong,
.leads-tab.is-active strong {
  background: rgba(255, 255, 255, 0.16);
}

.leads-tab-panel {
  display: grid;
  gap: 16px;
}

.leads-tab-panel:focus-visible {
  outline: none;
}

#canvassing-routes {
  scroll-margin-top: 92px;
}

.leads-tab-panel[hidden] {
  display: none;
}

.canvassing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 12%, rgba(200, 138, 47, 0.2), transparent 28%),
    linear-gradient(135deg, #fffdf8 0%, #f5f8f7 100%);
  box-shadow: 0 12px 28px rgba(23, 50, 79, 0.07);
}

.canvassing-header h2,
.canvassing-header p {
  margin: 0;
}

.canvassing-header h2 {
  margin-top: 4px;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
}

.canvassing-header > div > p:last-child {
  max-width: 680px;
  margin-top: 8px;
  color: var(--muted);
}

.canvassing-eyebrow,
.canvassing-ready__kicker {
  color: var(--teal);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.canvassing-review-badge,
.canvassing-ready__status {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(31, 107, 99, 0.25);
  border-radius: 999px;
  background: rgba(31, 107, 99, 0.09);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.canvassing-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

.canvassing-builder,
.canvassing-preview {
  min-width: 0;
  border: 1px solid rgba(23, 50, 79, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 30px rgba(23, 50, 79, 0.07);
}

.canvassing-builder {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.canvassing-builder__heading,
.canvassing-builder__heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.canvassing-builder__heading h3,
.canvassing-builder__heading p {
  margin: 0;
}

.canvassing-builder__heading h3 {
  font-size: 1.03rem;
}

.canvassing-builder__heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.canvassing-step {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--navy);
  color: white;
  font-size: 0.82rem;
  font-weight: 700;
}

.canvassing-selection-count {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.07);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.canvassing-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.canvassing-fieldset > legend,
.canvassing-field > span,
.canvassing-endpoint > span {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.canvassing-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.canvassing-field-header label {
  margin: 0;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.canvassing-use-location-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(31, 107, 99, 0.25);
  border-radius: 999px;
  background: rgba(31, 107, 99, 0.08);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.canvassing-use-location-btn:hover {
  background: rgba(31, 107, 99, 0.16);
  border-color: rgba(31, 107, 99, 0.45);
}

.canvassing-use-location-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.canvassing-use-location-btn:active {
  transform: scale(0.95);
}

.canvassing-use-location-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.canvassing-use-location-btn__icon {
  font-size: 0.75rem;
}

.canvassing-campaign-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.canvassing-search > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.canvassing-search input,
.canvassing-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 79, 0.22);
  border-radius: 9px;
  background: white;
  color: var(--text);
  font: inherit;
}

.canvassing-search input:focus,
.canvassing-search input:focus-visible,
.canvassing-field input:focus,
.canvassing-field input:focus-visible {
  outline: none;
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
}

.canvassing-campaign-actions {
  display: flex;
  gap: 6px;
}

.canvassing-campaign-actions button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 8px;
  background: #f7f8f7;
  color: var(--navy);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.canvassing-campaign-actions button:hover,
.canvassing-campaign-actions button:focus-visible {
  background: #edf2f1;
  transform: none;
}

.canvassing-search-count {
  min-height: 1.2em;
  margin: 7px 0 5px;
  color: var(--muted);
  font-size: 0.74rem;
}

.canvassing-campaign-list {
  max-height: 218px;
  overflow: auto;
  padding: 5px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: #fafaf8;
}

.canvassing-campaign-option {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.canvassing-campaign-option[hidden] {
  display: none;
}

.canvassing-campaign-option:hover,
.canvassing-campaign-option:focus-within {
  background: rgba(31, 107, 99, 0.07);
}

.canvassing-campaign-option + .canvassing-campaign-option {
  border-top: 1px solid rgba(23, 50, 79, 0.07);
}

.canvassing-campaign-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--teal);
}

.canvassing-campaign-option span,
.canvassing-campaign-option strong,
.canvassing-campaign-option small {
  display: block;
}

.canvassing-campaign-option span {
  min-width: 0;
  /* A campaign name is a name. The global `label span` rule shouted every one
     of them, and the note under each row with it. */
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.canvassing-campaign-option strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvassing-campaign-option small,
.canvassing-field small,
.canvassing-endpoint small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.canvassing-campaign-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.canvassing-activity__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.canvassing-activity label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.canvassing-activity input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.canvassing-activity label > span {
  display: grid;
  min-height: 72px;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 9px;
  background: white;
  text-align: center;
}

.canvassing-activity label > span strong,
.canvassing-activity label > span small {
  display: block;
}

.canvassing-activity label > span strong {
  color: var(--navy);
  font-size: 0.78rem;
}

.canvassing-activity label > span small {
  color: var(--muted);
  font-size: 0.68rem;
}

.canvassing-activity input:checked + span {
  border-color: var(--teal);
  background: rgba(31, 107, 99, 0.08);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.canvassing-activity input:focus-visible + span {
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
  outline: none;
}

.canvassing-eligibility-note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(31, 107, 99, 0.22);
  border-radius: 8px;
  background: rgba(31, 107, 99, 0.06);
}

.canvassing-eligibility-note strong {
  color: var(--navy);
  font-size: 0.76rem;
}

.canvassing-eligibility-note span {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.45;
}

.canvassing-route-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.45fr);
  gap: 10px;
}

.canvassing-field small {
  display: block;
  margin-top: 5px;
}

.canvassing-endpoint {
  display: grid;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 9px;
  background: #f6f6f2;
}

.canvassing-endpoint > span {
  margin-bottom: 3px;
}

.canvassing-endpoint strong {
  color: var(--navy);
  font-size: 0.82rem;
}

.canvassing-recipient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(23, 50, 79, 0.06), rgba(31, 107, 99, 0.07));
}

.canvassing-recipient__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
}

.canvassing-recipient > div > span,
.canvassing-recipient > div > strong,
.canvassing-recipient > div > small {
  display: block;
}

.canvassing-recipient > div > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.canvassing-recipient > div > strong {
  margin-top: 2px;
  color: var(--navy);
  font-size: 0.85rem;
}

.canvassing-recipient > div > small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.69rem;
}

.canvassing-recipient__lock {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.canvassing-builder__actions {
  display: grid;
  gap: 6px;
}

.canvassing-builder__actions button {
  min-height: 46px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: transform 150ms ease, background-color 150ms ease;
}

.canvassing-builder__actions button:active {
  transform: scale(0.97);
}

.canvassing-builder__actions p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.canvassing-preview {
  min-height: 640px;
  overflow: hidden;
}

.canvassing-state {
  min-height: 640px;
  padding: 42px;
}

.canvassing-state[hidden],
.canvassing-ready[hidden] {
  display: none;
}

.canvassing-state--input,
.canvassing-state--loading,
.canvassing-state--error {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.canvassing-state__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 16px;
  background: rgba(31, 107, 99, 0.1);
  color: var(--teal);
  font-size: 1.3rem;
  font-weight: 700;
}

.canvassing-state h3,
.canvassing-state p {
  margin: 0;
}

.canvassing-state p {
  max-width: 430px;
  margin-top: 8px;
  color: var(--muted);
}

.canvassing-state ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.canvassing-state li {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.06);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
}

.canvassing-state--error .canvassing-state__icon {
  background: rgba(159, 43, 43, 0.1);
  color: var(--failed);
}

.canvassing-state--error small {
  margin-top: 12px;
  color: var(--muted);
}

.canvassing-spinner {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 4px solid rgba(31, 107, 99, 0.16);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: canvassing-spin 0.8s linear infinite;
}

@keyframes canvassing-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .canvassing-spinner {
    animation: none;
    border-color: var(--teal);
  }
}

.canvassing-ready {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.canvassing-ready__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.canvassing-ready__header h3,
.canvassing-ready__header p {
  margin: 0;
}

.canvassing-ready__header h3 {
  margin-top: 3px;
  font-size: 1.16rem;
}

.canvassing-ready__header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.canvassing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.canvassing-stats > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 10px;
  background: #f8f8f5;
}

.canvassing-stats dt,
.canvassing-stats dd,
.canvassing-stats span {
  display: block;
  margin: 0;
}

.canvassing-stats dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.canvassing-stats dd {
  overflow: hidden;
  margin-top: 3px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvassing-stats span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
}

.canvassing-ready__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(210px, 0.95fr);
  gap: 10px;
}

.canvassing-stop-card,
.canvassing-segments {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 11px;
  background: white;
}

.canvassing-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.canvassing-section-heading span,
.canvassing-section-heading h4 {
  margin: 0;
}

.canvassing-section-heading > div > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.canvassing-section-heading h4 {
  margin-top: 2px;
  color: var(--navy);
  font-size: 0.86rem;
}

.canvassing-section-heading > span {
  color: var(--teal);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.canvassing-stop-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvassing-stop-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 49px;
  border-top: 1px solid rgba(23, 50, 79, 0.07);
}

.canvassing-stop-list li:first-child {
  border-top: 0;
}

.canvassing-stop-list li > span {
  display: grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(31, 107, 99, 0.09);
  color: var(--teal);
  font-size: 0.67rem;
  font-weight: 700;
}

.canvassing-stop-list strong,
.canvassing-stop-list small {
  display: block;
  overflow-wrap: anywhere;
}

.canvassing-stop-list strong {
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.canvassing-stop-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.canvassing-segments {
  display: grid;
  align-content: start;
  gap: 7px;
}

.canvassing-segments a {
  display: grid;
  min-height: 49px;
  justify-items: start;
  padding: 9px 12px;
  border: 1px solid rgba(31, 107, 99, 0.2);
  border-radius: 8px;
  background: rgba(31, 107, 99, 0.08);
  color: var(--teal);
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.canvassing-segments a:hover {
  border-color: rgba(31, 107, 99, 0.5);
  background: rgba(31, 107, 99, 0.14);
}

.canvassing-segments a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: rgba(31, 107, 99, 0.5);
}

.canvassing-segments a:active {
  transform: scale(0.98);
}

.canvassing-segments a span,
.canvassing-segments a strong {
  display: block;
}

.canvassing-segments a span {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.canvassing-segments a strong {
  margin-top: 3px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
}

.canvassing-segments > p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.65rem;
}

.canvassing-exclusions {
  overflow: hidden;
  border: 1px solid rgba(143, 91, 0, 0.2);
  border-radius: 10px;
  background: #fffaf0;
}

.canvassing-exclusions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  color: #664306;
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 700;
}

.canvassing-exclusions > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(143, 91, 0, 0.15);
}

.canvassing-exclusions > div > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(143, 91, 0, 0.11);
  color: var(--partial);
  font-size: 0.7rem;
  font-weight: 700;
}

.canvassing-exclusions p,
.canvassing-exclusions strong,
.canvassing-exclusions small {
  display: block;
  margin: 0;
}

.canvassing-exclusions p > strong {
  color: #664306;
  font-size: 0.72rem;
}

.canvassing-exclusions small {
  margin-top: 2px;
  color: #7a6845;
  font-size: 0.65rem;
}

.canvassing-text-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 13px;
  border-radius: 11px;
  background: var(--navy);
  color: white;
  scroll-margin-top: 92px;
}

.canvassing-text-notice {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
}

.canvassing-text-notice[data-tone="error"] {
  border-color: rgba(255, 203, 203, 0.5);
  background: rgba(159, 43, 43, 0.35);
}

.canvassing-text-notice[data-tone="success"] {
  border-color: rgba(191, 241, 214, 0.48);
  background: rgba(31, 107, 99, 0.42);
}

.canvassing-text-card > div > span,
.canvassing-text-card > div > strong,
.canvassing-text-card > div > p {
  display: block;
  margin: 0;
}

.canvassing-text-card > div > span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.canvassing-text-card > div > strong {
  margin-top: 2px;
  font-size: 0.83rem;
}

.canvassing-text-card > div > p {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.67rem;
}

.canvassing-text-card button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.67rem;
  box-shadow: none;
  opacity: 1;
}

.canvassing-text-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
}

.canvassing-text-form {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  flex-basis: 100%;
  gap: 7px;
  align-items: end;
  margin: 0;
}

.canvassing-text-form label,
.canvassing-text-form label > span {
  display: block;
}

.canvassing-text-form label > span {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.canvassing-text-form input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: white;
  color: var(--navy);
  font: inherit;
}

.canvassing-text-form input:disabled {
  opacity: 0.68;
}

.canvassing-text-card__actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: white;
  color: var(--navy);
  font-size: 0.67rem;
  font-weight: 700;
  text-decoration: none;
}

.canvassing-text-card button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.canvassing-text-card > small {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.64rem;
}

.canvassing-provider-note {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.45;
}

.canvassing-provider-note .google-maps-attribution {
  color: #5e5e5e;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
}

.qr-legal-note__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.leads-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.leads-filter__search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
}

.leads-filter__field {
  display: block;
}

.leads-filter__field--search {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}

.leads-filter__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.leads-filter__field--search input[type="search"] {
  padding-left: 38px !important;
}

.leads-filter__field--status {
  flex: 0 0 auto;
  min-width: 175px;
}

.leads-filter__field--reply {
  flex: 0 0 auto;
  min-width: 145px;
}

.leads-filter__field--sort {
  flex: 0 0 auto;
  min-width: 155px;
}

.leads-filter__more {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* The hidden attribute must always win over the layout display values. */
.leads-filter [data-leads-filter-submit][hidden],
.leads-filter__more[hidden],
.leads-filter [hidden],
.leads-filter__toggle[hidden] {
  display: none !important;
}

.leads-filter__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(23, 50, 79, 0.2);
  border-radius: 8px;
  background: white;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}

.leads-filter__toggle[aria-expanded="true"] {
  background: rgba(23, 50, 79, 0.08);
  border-color: rgba(23, 50, 79, 0.35);
}

.leads-filter__active-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy);
  margin-left: 2px;
}

.leads-filter input[type="search"] {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  background-color: white;
  width: 100%;
}

.leads-filter select {
  min-height: 42px;
  padding: 8px 38px 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(23, 50, 79, 0.2);
  background-color: #ffffff;
  background-position: right 12px center;
  background-size: 18px;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.leads-filter button {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.leads-filter .leads-filter__submit {
  min-height: 40px;
  padding: 8px 14px;
}

.leads-filter__reset-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.leads-filter__clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.07);
  border: 1px solid rgba(23, 50, 79, 0.18);
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  min-height: 38px;
  box-sizing: border-box;
}

.leads-filter__clear-btn:hover {
  background: rgba(23, 50, 79, 0.14);
  color: var(--navy);
}

.leads-filter__count {
  color: var(--muted);
  font-size: 0.85rem;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.leads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* The open lead's panel rides the list as its own row, directly under the
   card it belongs to. The row is a plain carrier - the panel brings its own
   border, background, and shadow. */
.leads-list__detail-slot {
  min-width: 0;
}

/* The click answered. While the panel row is being fetched the pressed link
   dims and the cursor says busy - a cold render can take a few seconds, and
   a page that does nothing visible for that long reads as broken. */
[data-lead-details-open][aria-busy="true"] {
  opacity: 0.45;
  cursor: progress;
}

.leads-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.leads-workspace--list-only {
  grid-template-columns: minmax(0, 1fr);
}

.lead-detail-panel {
  position: static;
  scroll-margin-top: 96px;
  display: grid;
  gap: 12px;
  padding: 14px 18px 18px;
  border: 1px solid rgba(200, 138, 47, 0.3);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
}

.lead-detail-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.lead-detail-panel__close {
  align-self: start;
  padding: 4px 2px;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.lead-detail-panel__close:hover {
  color: var(--gold-deep);
}

.lead-detail-panel__head h2 {
  margin: 0 0 4px;
  font-size: 1.14rem;
  line-height: 1.15;
}

.lead-detail-panel__phone {
  color: var(--muted);
  font-size: 0.9rem;
}

.lead-detail-result:empty {
  display: none;
}

.lead-detail-result .flash-stack {
  margin: 0;
  scroll-margin-top: 0;
}

.lead-detail-result .flash {
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.4;
}

.lead-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(23, 50, 79, 0.10);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(23, 50, 79, 0.04), 0 4px 12px -2px rgba(23, 50, 79, 0.05);
  transition: border-color .15s ease, transform .15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .15s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-card:hover {
  border-color: rgba(23, 50, 79, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 8px rgba(23, 50, 79, 0.05), 0 12px 24px -4px rgba(23, 50, 79, 0.10);
  transform: translateY(-1px);
}

.lead-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}

/* Card overflow menu: only shown on mobile where horizontal space is constrained */
.lead-card__menu {
  display: none;
  position: relative;
}

.lead-card__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(23, 50, 79, 0.18);
  background: #ffffff;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  transition: all 0.15s ease;
}

.lead-card__menu-trigger::-webkit-details-marker {
  display: none;
}

.lead-card__menu-trigger:hover,
.lead-card__menu[open] > .lead-card__menu-trigger {
  background: rgba(23, 50, 79, 0.08);
  border-color: rgba(23, 50, 79, 0.32);
}

.lead-card__menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 190px;
  background: #ffffff;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(23, 50, 79, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lead-card__menu-item,
.lead-card__menu-form button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
  box-sizing: border-box;
}

.lead-card__menu-item:hover,
.lead-card__menu-form button:hover {
  background: rgba(23, 50, 79, 0.06);
}

.lead-card__menu-item--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted);
}

.lead-card__menu-item--disabled:hover {
  background: transparent;
}

.lead-card__menu-item--delete,
.lead-card__menu-form[data-confirm-archive] button {
  color: var(--failed);
}

.lead-card__menu-item--delete:hover,
.lead-card__menu-form[data-confirm-archive] button:hover {
  background: rgba(159, 43, 43, 0.08);
}

.lead-card__menu-form {
  margin: 0;
  padding: 0;
  display: block;
}

.lead-card__menu-item--disabled {
  opacity: 0.4;
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}

/* Potential Name Callout with 1-tap Confirm Button */
.lead-card__potential-name {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px 8px;
  background: rgba(200, 138, 47, 0.08);
  border: 1px dashed rgba(200, 138, 47, 0.4);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.3;
  margin: 1px 0;
  color: var(--navy);
}

.lead-card__potential-name-label {
  color: var(--muted);
  font-weight: 600;
}

.lead-card__potential-name strong,
.lead-card__potential-name-val {
  font-weight: 700;
  color: var(--navy);
}

.lead-card__name-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--ok);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ok);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lead-card__name-confirm-btn:hover,
.lead-card__name-confirm-btn:focus {
  background: var(--ok);
  color: white;
}

.lead-card__identity {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}

.lead-card__name {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.lead-card__name--phone {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.lead-card__name-link {
  text-decoration: none;
}

.lead-card__name-link:hover,
.lead-card__name-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-card__phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(23, 50, 79, 0.06);
  border: 1px solid rgba(23, 50, 79, 0.16);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  transition: all 0.15s ease;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.lead-card__phone-badge:hover,
.lead-card__phone-badge:focus-visible {
  background: rgba(23, 50, 79, 0.12);
  border-color: rgba(23, 50, 79, 0.32);
  color: var(--navy);
  text-decoration: none;
}

.lead-card__phone-badge--primary {
  background: rgba(23, 50, 79, 0.08);
  font-size: 0.95rem;
  padding: 4px 10px;
}

.lead-card__form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-card__action-btn--texts {
  display: none;
}

.lead-card--selected {
  border-color: var(--navy);
  box-shadow: 0 6px 18px rgba(23, 50, 79, 0.12);
}

.leads-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.78);
  flex-wrap: wrap;
}

.leads-pagination__count {
  color: var(--muted);
  font-size: 0.86rem;
}

.leads-pagination__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.leads-pagination .button-link {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.leads-pagination .button-link.is-disabled {
  cursor: default;
  background: rgba(23, 50, 79, 0.08);
  color: rgba(23, 50, 79, 0.42);
  box-shadow: none;
  transform: none;
}

.lead-card__phone {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.lead-card .badge {
  font-size: 0.68rem;
  padding: 3px 8px;
  letter-spacing: 0.07em;
  align-self: center;
  transform: translateY(-1px);
}

.lead-card__quick {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-size: 0.86rem;
}

.lead-card__action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}

.lead-card__action:hover {
  background: transparent;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}

.lead-card__action--disabled,
.lead-card__action--disabled:hover {
  color: var(--muted);
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: none;
}

.lead-card__resend-form,
.lead-card__delete-form,
.lead-card__mail-form,
.lead-card__lookup-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.lead-card__quick .lead-card__lookup-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.lead-card__quick .lead-card__action--number-failed {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  box-shadow: none;
  font-size: 0.86rem;
  font-weight: 700;
}

.lead-card__quick .lead-card__action--number-failed:hover,
.lead-card__quick .lead-card__action--number-failed:focus-visible {
  background: transparent;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-card__quick .lead-typo__help {
  width: 17px;
  height: 17px;
  min-height: 17px;
  font-size: 0.68rem;
  align-self: center;
  transform: translateY(-1px);
}

/* A home already off future mailings says so where its button was, and the
   words link to the one page that can put it back on. */
.lead-card__mail-off {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  /* Dotted, not solid: it reads as "there is more here" without competing
     with the live actions beside it, and it does not depend on colour. */
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.lead-card__mail-off:hover {
  color: var(--navy);
  text-decoration: underline solid;
  text-underline-offset: 3px;
}

.lead-card__action--resend,
.lead-card__action--delete {
  color: var(--failed);
}

.lead-card__action--resend:hover,
.lead-card__action--delete:hover {
  color: #6d1a1a;
}

.lead-card__action--resend.lead-card__action--disabled,
.lead-card__action--resend.lead-card__action--disabled:hover {
  color: var(--muted);
  opacity: 1;
}

.lead-card__action--tooltip {
  position: relative;
}

.lead-card__action--tooltip::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  max-width: min(260px, calc(100vw - 48px));
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--navy);
  box-shadow: 0 10px 22px rgba(23, 50, 79, 0.2);
  color: white;
  content: attr(data-tooltip);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-decoration: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
  white-space: normal;
}

.lead-card__action--tooltip:hover::after,
.lead-card__action--tooltip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lead-card__contact-off,
.lead-table__contact-off {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--failed);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---- Texts the contractor sends from this dashboard ---------------------
   The group-text box above the list, the per-lead conversation thread, and
   the compose form in the detail panel. Alignment and labels carry the
   in/out distinction; colour only reinforces it. */

.text-blast {
  margin: 0;
  display: grid;
  gap: 8px;
}

.text-blast__status {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px 14px;
  display: grid;
  gap: 6px;
}

.text-blast__status-row {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.text-blast__status-row--active strong {
  color: var(--gold-deep);
}

.text-blast__refresh {
  justify-self: start;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.text-blast__compose summary,
.text-blast__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 8px;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  width: fit-content;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.text-blast__compose summary::-webkit-details-marker,
.text-blast__trigger::-webkit-details-marker {
  display: none;
}

.text-blast__compose summary::marker,
.text-blast__trigger::marker {
  display: none;
}

.text-blast__compose summary:hover,
.text-blast__trigger:hover {
  background: #1f3f63;
  box-shadow: 0 8px 18px rgba(23, 50, 79, 0.16);
  transform: translateY(-1px);
}

.text-blast__compose summary:active,
.text-blast__trigger:active {
  transform: translateY(0);
}

.text-blast__compose summary:focus-visible,
.text-blast__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.text-blast__compose[open] summary,
.text-blast__compose[open] .text-blast__trigger {
  margin-bottom: 10px;
}

.leads-list__intro {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.text-blast__form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 12px 14px;
}

.text-blast__hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.text-blast__form textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.text-blast__stats {
  margin: 4px 0 10px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.text-blast__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.text-blast__foot button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.text-blast__limits {
  font-size: 0.84rem;
}

.lead-thread {
  margin: 14px 0 4px;
  display: grid;
  gap: 8px;
}

.lead-thread__title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.lead-thread__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.lead-thread__empty {
  margin: 6px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* The whole conversation lives here, so the box scrolls instead of pushing the
   reply form off the screen. A short thread still shrinks to fit. */
.lead-thread__list {
  list-style: none;
  margin: 0;
  /* A hair of room on the right so a scrollbar never sits on a bubble. */
  padding: 0 2px 0 0;
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lead-thread__message {
  max-width: 88%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--panel-strong);
  justify-self: start;
}

.lead-thread__message--out {
  justify-self: end;
  background: rgba(23, 50, 79, 0.07);
  border-color: rgba(23, 50, 79, 0.22);
}

.lead-thread__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lead-thread__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.lead-compose {
  margin: 12px 0;
  display: grid;
  gap: 8px;
  /* Whatever scrolls this box into view has to bring the Send button with it,
     not stop at the last line he typed. */
  scroll-margin-bottom: 16px;
}

.lead-compose__label {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* A thumb-typed message runs long, so the box is sized to be written in, not
   just read back: three lines to start, and it grows with what he types until
   it would start crowding the screen. The floor and the ceiling live here
   rather than in the script - min-height beats an inline height, so the box
   below can never collapse under three lines however the script measures it. */
.lead-compose textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
  min-height: 5.8em;
  max-height: 11em;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* The script is driving the height now, so the drag handle would only fight
   it. Without script the handle stays, which is the only way to see a long
   message in a three-line box. Two classes deep so the three-line floor also
   outranks the 44px minimum every touch target on this layout carries. */
.lead-compose textarea.lead-compose__box--grows {
  resize: none;
  min-height: 5.8em;
}

.lead-compose__caveat {
  margin: 0;
  font-size: 0.84rem;
}

.lead-compose__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.lead-compose__foot button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.lead-compose__hint {
  font-size: 0.82rem;
  line-height: 1.4;
}

.text-blast-review {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: grid;
  gap: 18px;
}

.text-blast-review__header h1 {
  margin: 0 0 6px;
}

.text-blast-review__preview-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 20px;
  display: grid;
  gap: 16px;
}

.text-blast-review__preview-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}

.text-blast-review__preview-variant {
  display: grid;
  gap: 8px;
}

.text-blast-review__variant-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.sms-preview-bubble {
  width: fit-content;
  max-width: 540px;
  min-width: 140px;
  padding: 14px 20px;
  background: #17324f;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.15);
}

.sms-preview-bubble__body {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff !important;
  white-space: pre-wrap;
  word-break: break-word;
}

.sms-preview-bubble__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.text-blast-review__audience {
  display: grid;
  gap: 12px;
}

.text-blast-review__recipients {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 12px 16px;
}

.text-blast-review__recipients summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

.text-blast-review__recipients-list {
  margin: 10px 0 0;
  padding-left: 20px;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}

.text-blast-review__excluded {
  border: 1px solid rgba(159, 43, 43, 0.24);
  border-radius: 10px;
  background: rgba(159, 43, 43, 0.04);
  padding: 12px 16px;
}

.text-blast-review__excluded h2 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #9f2b2b;
}

.text-blast-review__excluded ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}

.text-blast-review__cost {
  margin: 0;
  font-size: 0.88rem;
}

.text-blast-review__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.text-blast-review__confirm button,
.text-blast-review__confirm .button-link,
.text-blast-review__confirm a {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.text-blast-review__confirm button {
  border: 1px solid var(--navy) !important;
  background: var(--navy) !important;
  color: #ffffff !important;
}

.text-blast-review__confirm button:hover,
.text-blast-review__confirm button:focus-visible {
  background: #0f2338 !important;
  border-color: #0f2338 !important;
}

.text-blast-review__confirm .button-link.secondary,
.text-blast-review__confirm a.secondary {
  border: 1px solid #b07820 !important;
  background: var(--gold) !important;
  color: #231b11 !important;
}

.text-blast-review__confirm .button-link.secondary:hover,
.text-blast-review__confirm a.secondary:hover,
.text-blast-review__confirm .button-link.secondary:focus-visible,
.text-blast-review__confirm a.secondary:focus-visible {
  background: #b07820 !important;
  border-color: #b07820 !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .lead-thread__message {
    max-width: 100%;
  }

  /* Phones have less room above the reply box than a desktop does. */
  .lead-thread__list {
    max-height: 260px;
  }

  /* iOS zooms any focused input under 16px; these two are the only new
     text boxes on the page. */
  .text-blast__form textarea,
  .lead-compose textarea {
    font-size: 1rem;
  }

  /* An on-screen keyboard leaves about half a phone screen. The box may grow
     to six lines inside that, which keeps the Send button under his thumb
     instead of below the keyboard; past six it scrolls itself. */
  .lead-compose textarea {
    max-height: 9em;
  }

  .text-blast__foot button,
  .lead-compose__foot button,
  .text-blast-review__confirm button,
  .text-blast-review__confirm .button-link {
    width: 100%;
  }
}

.copy-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
}

.copy-button:hover {
  background: transparent;
  color: var(--gold-deep);
  transform: none;
}

.lead-card__time {
  color: var(--muted);
  font-size: 0.82rem;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.lead-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 28px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px dashed rgba(23, 50, 79, 0.10);
}

@media (max-width: 1180px) {
  .leads-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-detail-panel {
    position: static;
  }

  .lead-card__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-card__property {
    order: 1;
  }

  .lead-card__replies {
    order: 2;
  }

  .lead-card__form {
    order: 3;
  }

  .lead-crm-strip {
    order: 4;
  }
}

.lead-crm-strip {
  grid-column: 1 / -1;
  width: 100%;
}

/* A phone lead's address block never needs half of a wide card, so the blank
   width beside it goes to the notes box instead. 43% matches the widest split
   that still keeps the address and campaign line on one row at 1366px, and the
   520px cap stops the column growing past its own text on a big monitor — both
   sized so no card gets taller. The QR tab keeps the even split; its right
   column holds the paid-lookup panel, not a notes box. */
@media (min-width: 1181px) {
  #phone-number-leads .lead-card__body {
    grid-template-columns: minmax(0, min(43%, 520px)) minmax(0, 1fr);
  }
}

.lead-card__property {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.lead-card__property .lead-typo__form--failed {
  margin: 0;
}

.lead-card__address {
  color: var(--navy);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.002em;
  text-decoration: none;
}

.lead-card__address:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-card__address--missing {
  margin: 0;
  color: var(--muted);
  font-style: italic;
  font-weight: 600;
}

/* "This number may be mistyped." Gold against navy rather than a second red:
   nothing here is broken or urgent, it is a thing worth a phone call. */
.lead-typo {
  margin: 8px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(200, 138, 47, 0.35);
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.09);
}

details.lead-typo {
  padding: 6px 12px;
  transition: padding .15s ease;
}

details.lead-typo[open] {
  padding: 9px 12px;
}

details.lead-typo > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  user-select: none;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}

details.lead-typo > summary::-webkit-details-marker {
  display: none;
}

details.lead-typo > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--gold-deep);
  font-size: 0.85rem;
  transition: transform .15s ease;
}

details.lead-typo[open] > summary::before {
  transform: rotate(90deg);
}

details.lead-typo[open] > summary {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200, 138, 47, 0.2);
}

.lead-typo__summary-sub {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.lead-typo__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lead-typo__head {
  margin: 0;
  color: var(--gold-deep);
  font-size: 0.86rem;
  font-weight: 800;
}

.lead-typo__note,
.lead-typo__rule,
.lead-typo__confirmed {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.lead-typo__confirmed {
  font-weight: 700;
  color: var(--ok);
}

.lead-typo__number,
.lead-typo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
}

.lead-typo__label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead-typo__phone {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
}

.lead-typo__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
}

.lead-typo__hint {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.lead-typo__help {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid rgba(23, 50, 79, 0.28);
  border-radius: 50%;
  background: rgba(23, 50, 79, 0.07);
  color: var(--navy);
  cursor: help;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.lead-typo__help::before,
.lead-typo__help::after {
  position: absolute;
  left: 50%;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.lead-typo__help::before {
  content: "";
  bottom: calc(100% + 3px);
  border: 6px solid transparent;
  border-top-color: var(--navy);
  transform: translate(-50%, -1px);
}

.lead-typo__help::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: min(285px, calc(100vw - 48px));
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--navy);
  box-shadow: 0 12px 24px rgba(23, 50, 79, 0.22);
  color: white;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  transform: translate(-50%, 5px);
  white-space: normal;
}

.lead-typo__help:hover,
.lead-typo__help:focus {
  border-color: rgba(200, 138, 47, 0.8);
  background: rgba(200, 138, 47, 0.14);
  color: var(--gold-deep);
}

.lead-typo__help:hover::before,
.lead-typo__help:hover::after,
.lead-typo__help:focus::before,
.lead-typo__help:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Outlined, not filled. This is the control that turns texting on, so it has
   to look like a deliberate press rather than the next thing to tap. */
.lead-typo button[type="submit"] {
  padding: 5px 12px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
}

.lead-typo button[type="submit"]:hover {
  background: rgba(23, 50, 79, 0.07);
}

.lead-card__lookup-label--short {
  display: none;
}

.lead-resend-review__name-warning {
  color: var(--failed);
  font-weight: 800;
}

.lead-card__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.lead-card__meta > span {
  display: inline-flex;
  align-items: baseline;
}

.lead-card__campaign-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lead-card__campaign-link:hover,
.lead-card__campaign-link:focus-visible {
  color: var(--navy);
}

.lead-card__meta > :not(:first-child)::before {
  content: "·";
  display: inline-block;
  margin: 0 6px 0 0;
}

/* The paid-lookup number row mixes a Copy button and a caution note into the
   same meta line; neither is a list item, so neither gets a separator dot. */
.qr-enrichment__number > .copy-button::before,
.qr-enrichment__number > .qr-enrichment__note::before {
  content: none;
  margin: 0;
  color: rgba(23, 50, 79, 0.30);
}

.lead-card__meta--sub {
  font-size: 0.82rem;
  color: rgba(23, 50, 79, 0.64);
}

.lead-card__contact-safety {
  margin: -4px 0 0;
  font-size: 0.78rem;
}

.lead-card__line-type-warn {
  color: var(--partial);
  font-weight: 600;
  text-transform: capitalize;
}

.lead-card__related {
  margin-top: 4px;
}

.lead-card__related > summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.85rem;
  list-style: none;
}

.lead-card__related > summary::-webkit-details-marker {
  display: none;
}

.lead-card__related > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--gold-deep);
  transition: transform .15s ease;
}

.lead-card__related[open] > summary::before {
  transform: rotate(90deg);
}

.lead-card__related-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 2px 14px;
  font-size: 0.86rem;
}

.lead-card__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  align-self: stretch;
}

.lead-card__form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  align-items: stretch;
  flex: 0 0 auto;
}

.lead-card__form-row > * {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.lead-card__form-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.lead-card__form-foot > textarea {
  height: 100%;
  min-height: 80px;
  align-self: stretch;
}

.lead-card__form-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 104px;
  align-self: stretch;
}

.lead-card__form-actions .lead-card__action--details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1.5px solid rgba(23, 50, 79, 0.2);
  border-radius: 7px;
  background: #ffffff;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
  min-width: 104px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.04);
  transition: all 0.15s ease;
}

.lead-card__form-actions .lead-card__action--details:hover,
.lead-card__form-actions .lead-card__action--details:focus-visible {
  background: #f1f5f9;
  border-color: rgba(23, 50, 79, 0.38);
  color: var(--navy);
  text-decoration: none;
}

.lead-card__form-actions .lead-card__action--details.lead-card__action--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(23, 50, 79, 0.04);
  border-color: rgba(23, 50, 79, 0.12);
}

.lead-card__form-actions button {
  min-width: 104px;
  width: 100%;
  min-height: 36px;
}

/* "Lead saved." on the card he pressed Save on. Full width above the notes box
   so it never squeezes the box or the button into a narrower column, and gone
   entirely (`.lead-detail-result:empty`) until there is something to say. */
.lead-card__result {
  grid-column: 1 / -1;
}

/* Notes save themselves; this line says so. It sits under the box on a card
   and under the label in the open panel, and takes no room until it speaks. */
.lead-notes-status {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}

.lead-notes-status:empty {
  display: none;
}

.lead-notes-status[data-lead-notes-state="saved"] {
  color: var(--ok);
}

/* Weight, not only hue: "saved" and "not saved" must not rest on a
   red-versus-green difference nobody is guaranteed to see. */
.lead-notes-status[data-lead-notes-state="error"] {
  color: var(--failed);
  font-weight: 700;
}

.lead-card__form input,
.lead-card__form select {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  background-color: #ffffff;
  font-size: 0.88rem;
  min-height: 36px;
}

.lead-card__form select {
  font-weight: 700;
  color: var(--navy);
  padding: 6px 30px 6px 10px;
  background-position: right 8px center;
  background-size: 16px;
}

.lead-card__form input[type="date"] {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.lead-card__form textarea {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 7px;
  border-color: rgba(23, 50, 79, 0.16);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  background: white;
  box-sizing: border-box;
}

.lead-card__form button {
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-height: 36px;
}

.leads-page__overflow {
  margin: 4px 2px 0;
  font-size: 0.86rem;
}

.leads-empty {
  padding: 22px 24px;
  border: 1px dashed rgba(23, 50, 79, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.leads-empty h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 1.05rem;
}

.leads-empty p {
  margin: 0;
  font-size: 0.92rem;
}

/* CRM Attribution in Lead Details Drawer */
.lead-detail-panel__crm {
  padding: 20px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.lead-detail-panel__crm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.lead-detail-panel__crm-title-group .eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
}
.lead-detail-panel__crm-title-group h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  margin: 0;
}
.lead-detail-crm-jobs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lead-detail-crm-job {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.45) 0%, #ffffff 100%);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: opacity 150ms ease, transform 150ms ease;
}
.lead-detail-crm-job--progress {
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.5) 0%, #ffffff 100%);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-left: 4px solid #0284c7;
}
.lead-detail-crm-job__main {
  flex: 1;
  min-width: 0;
}
.lead-detail-crm-job__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.lead-detail-crm-job__title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.lead-detail-crm-job__customer {
  font-size: 13px;
  color: #334155;
  margin: 0 0 6px 0;
  line-height: 1.35;
}
.lead-detail-crm-job__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  margin: 0 0 8px 0;
}
.lead-detail-crm-job__financials {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}
.lead-detail-crm-job__linked {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-left: auto;
}
.lead-detail-crm-job__actions {
  flex-shrink: 0;
}
.crm-unlink-btn {
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 150ms ease;
}
.crm-unlink-btn:hover {
  background-color: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.crm-unlink-btn:active {
  transform: scale(0.97);
}
.crm-unlink-btn:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}
.crm-unlink-btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.lead-detail-crm-empty,
.lead-detail-crm-unlinked {
  padding: 20px;
  border-radius: 12px;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
  text-align: center;
}
.lead-detail-crm-empty__icon,
.lead-detail-crm-unlinked__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.lead-detail-crm-empty p,
.lead-detail-crm-unlinked p {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.lead-detail-crm-unlinked .button-link,
.lead-detail-crm-unlinked .crm-unlinked-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 150ms ease;
  min-height: 38px;
}
.lead-detail-crm-unlinked .button-link:hover,
.lead-detail-crm-unlinked .crm-unlinked-btn:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.lead-detail-crm-unlinked .button-link:active,
.lead-detail-crm-unlinked .crm-unlinked-btn:active {
  transform: scale(0.96);
}
.lead-detail-crm-unlinked .button-link:focus-visible,
.lead-detail-crm-unlinked .crm-unlinked-btn:focus-visible {
  outline: 2px solid var(--accent, #0284c7);
  outline-offset: 2px;
}
.lead-detail-crm-manual-toggle summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
  transition: all 150ms ease;
}
.lead-detail-crm-manual-toggle summary:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}
.lead-detail-crm-manual-toggle summary:active {
  transform: scale(0.95);
}
.lead-detail-crm-manual-toggle summary:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}
.lead-detail-crm-manual-form {
  margin-top: 12px;
  text-align: left;
}

/* Unattribute Confirmation Modal */
.crm-unattribute-modal {
  max-width: 500px;
  width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
  border: none;
  border-radius: 16px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
.crm-unattribute-modal::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}
.crm-unattribute-modal__content {
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-radius: 16px;
  background: #ffffff;
}
.crm-unattribute-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.crm-unattribute-modal__header-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.crm-unattribute-modal__icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  background-color: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crm-unattribute-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.crm-unattribute-modal__subtitle {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}
.crm-unattribute-preview-card {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.45) 0%, #ffffff 100%);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.crm-unattribute-preview-card--progress {
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.5) 0%, #ffffff 100%);
  border-color: rgba(2, 132, 199, 0.25);
  border-left-color: #0284c7;
}
.crm-unattribute-preview-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.crm-unattribute-preview-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.crm-unattribute-preview-card__meta {
  font-size: 13px;
  color: #475569;
  margin: 0 0 12px 0;
  line-height: 1.35;
}
.crm-unattribute-preview-card__financials {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}
.crm-unattribute-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.crm-unattribute-modal .crm-unattribute-modal__cancel-btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #334155 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 150ms ease;
}
.crm-unattribute-modal .crm-unattribute-modal__cancel-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.crm-unattribute-modal .crm-unattribute-modal__cancel-btn:active {
  transform: scale(0.97);
}
.crm-unattribute-modal .crm-unattribute-modal__cancel-btn:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}
.crm-unattribute-modal .crm-unattribute-modal__confirm-btn {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff !important;
  background: #ef4444 !important;
  border: 1px solid #dc2626 !important;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 150ms ease;
}
.crm-unattribute-modal .crm-unattribute-modal__confirm-btn:hover {
  background: #dc2626 !important;
}
.crm-unattribute-modal .crm-unattribute-modal__confirm-btn:active {
  transform: scale(0.95);
}
.crm-unattribute-modal .crm-unattribute-modal__confirm-btn:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}
.crm-unattribute-modal .crm-unattribute-modal__confirm-btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}
@media (max-width: 640px) {
  .lead-detail-panel__crm {
    padding: 16px 12px;
  }
  .lead-detail-panel__crm-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .lead-detail-crm-job {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .lead-detail-crm-job__header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .lead-detail-crm-job__actions {
    width: 100%;
    margin-top: 8px;
  }
  .crm-unlink-btn {
    width: 100%;
  }
  .lead-detail-crm-job__financials {
    gap: 16px;
    justify-content: flex-start;
  }
  .lead-detail-crm-job__linked {
    margin-left: 0;
    width: 100%;
  }
  .crm-unattribute-modal__actions {
    flex-direction: column-reverse;
    width: 100%;
  }
  .crm-unattribute-modal__actions button {
    width: 100%;
    justify-content: center;
  }
}

/* Provider Selector Tabs & Webhook Feedback */
.crm-provider-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.crm-provider-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  padding: 10px 8px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  cursor: pointer;
  text-align: center;
  user-select: none;
  transition: all 150ms ease;
}
.crm-provider-tab input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.crm-provider-tab:hover {
  border-color: #cbd5e1;
  background-color: #f8fafc;
  transform: translateY(-1px);
}
.crm-provider-tab:active {
  transform: scale(0.96);
}
.crm-provider-tab:focus-visible, .crm-provider-tab:focus-within {
  outline: 2px solid var(--accent, #0284c7);
  outline-offset: 2px;
}
.crm-provider-tab--selected {
  border-color: #0284c7;
  background-color: #f0f9ff;
  box-shadow: 0 0 0 1px #0284c7, 0 1px 3px rgba(2, 132, 199, 0.12);
}
.crm-provider-tab__type,
.crm-provider-tab__name {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
}
.crm-provider-tab--selected .crm-provider-tab__type,
.crm-provider-tab--selected .crm-provider-tab__name {
  color: #0369a1;
  font-weight: 600;
}
.crm-btn--copied {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
}

/* Phone-first leads page: one column, every tap target at least 44px, and
   the actions parked at the bottom of each card where a right thumb rests —
   Call is the big filled one on the right. Desktop keeps its layout. */
@media (max-width: 640px) {
  .leads-page {
    gap: 12px;
    margin-bottom: 24px;
  }

  .leads-header-card,
  .leads-page__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin: 0 0 16px;
    padding: 16px 14px;
  }

  .leads-header-card__inner,
  .leads-page__header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 12px;
    width: 100%;
    flex-wrap: wrap;
  }

  .leads-header-card__info,
  .leads-page__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }

  .leads-header-card .eyebrow {
    margin: 0 0 6px;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
  }

  .leads-page__title-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .leads-header-card__info h1,
  .leads-page__title-row h1 {
    font-size: 1.55rem;
    line-height: 1.15;
    margin: 0;
  }

  .leads-header-card__info h1::after,
  .leads-page__title-row h1::after {
    margin-top: 4px;
    margin-bottom: 0;
    width: 30px;
    height: 3px;
  }

  .leads-header-card__info .muted,
  .leads-page__count {
    margin: 4px 0 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--muted);
  }

  .leads-header-card__actions {
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: 4px;
  }

  .crm-header-btn {
    max-width: 100%;
    min-width: 0;
  }

  .crm-header-btn span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leads-add-btn {
    margin-left: 0 !important;
    flex-shrink: 0;
    align-self: flex-start;
    padding: 6px 13px;
    font-size: 0.82rem;
    white-space: nowrap;
    min-height: 34px;
    border-radius: 8px !important;
  }


  .leads-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  /* Label above the count: side by side, "In progress" cannot shrink far
     enough at phone width, so the count gets shoved outside its own card.
     The two rows are spread rather than stacked, which lands all three
     counts on one line across the row however the labels wrap. */
  .leads-summary__pill {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr);
    align-items: start;
    align-content: space-between;
    gap: 6px 8px;
    min-width: 0;
    padding: 10px 11px 11px;
  }

  /* The label gets the whole card width — at 320px "In progress" needs every
     pixel — and the tone dot moves down beside the count it belongs to. */
  .leads-summary__pill dt {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
  }

  .leads-summary__pill::before {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .leads-summary__pill dd {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.3rem;
    line-height: 1.05;
  }

  /* The menu is anchored to the field, so it must not be wider than it. */
  .campaign-multiselect__menu,
  .leads-campaign-multiselect__menu {
    width: 100%;
    max-width: 100%;
  }

  .leads-tabs__list {
    display: flex;
    width: 100%;
  }

  .leads-tab {
    flex: 1 1 0;
    min-height: 44px;
    padding: 9px 8px;
  }

  .leads-campaign-filter button,
  .campaign-multiselect summary,
  .leads-campaign-multiselect summary {
    min-height: 44px;
  }

  .campaign-multiselect__menu label,
  .leads-campaign-multiselect__menu label {
    min-height: 44px;
    align-items: center;
  }

  .lead-card__name-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* "All campaigns" / "2 campaigns selected" says it all; the prefix only
     eats the room the value needs at this width. */
  .leads-campaign-multiselect__prefix {
    display: none;
  }

  .leads-filter {
    gap: 8px;
  }

  .leads-filter__search-wrap {
    flex: 1 0 100%;
    width: 100%;
    gap: 8px;
  }

  .leads-filter input[type="search"],
  .leads-filter select,
  .leads-filter button {
    min-height: 44px;
  }

  .leads-filter__field--search {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* A later shared phone rule makes every .leads-filter button 100% wide;
     the collapse toggle must stay compact so search + Filters share one row. */
  .leads-filter .leads-filter__toggle {
    width: auto;
    flex: 0 0 auto;
  }

  .leads-filter__more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 0 100%;
    width: 100%;
    gap: 8px;
  }

  .leads-filter__field--status,
  .leads-filter__field--reply,
  .leads-filter__field--sort {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .leads-filter__reset-cell {
    grid-column: span 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }

  .leads-filter__reset-cell .leads-filter__clear-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* The card: who they are on top, details in the middle, actions at the
     bottom. display: contents lifts the header's two halves into the card
     grid so the action row can sit last without changing the markup. */
  .lead-card {
    padding: 16px 14px;
    border-radius: 12px;
    border: 1px solid rgba(23, 50, 79, 0.12);
    box-shadow: 0 2px 8px rgba(23, 50, 79, 0.04);
  }

  .lead-card__head {
    display: contents;
  }

  .lead-card__menu {
    display: inline-block;
  }

  .lead-card__identity {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2px;
  }

  .lead-card__title-group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
  }

  .lead-card__name {
    font-size: 0.98rem;
  }

  .lead-card__phone-badge {
    font-size: 0.82rem;
    padding: 2px 7px;
    gap: 4px;
  }

  .lead-card__phone {
    font-size: 0.98rem;
  }

  .lead-card__body {
    order: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 10px;
  }

  .lead-card__address {
    font-size: 0.88rem;
    line-height: 1.3;
    font-weight: 700;
  }

  .lead-card__potential-name {
    font-size: 0.84rem;
    margin: 3px 0 2px;
  }

  .lead-typo__form--failed {
    display: none !important;
  }

  .lead-typo__help {
    width: 22px;
    height: 22px;
    min-height: 22px;
    border-radius: 50%;
    background: #fbf5ea;
    border: 1px solid #dfbe80;
    color: #8c5d1e;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .lead-card__meta {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .lead-card__form {
    gap: 10px;
    margin-top: 4px;
  }

  .lead-card__form-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 8px;
  }

  .lead-card__form-row > select[name="status"] {
    grid-column: 1 / -1;
    width: 100%;
    font-weight: 700;
  }

  .lead-card__form-row > input[name="name"] {
    grid-column: 1;
    min-width: 0;
    width: 100%;
  }

  .lead-card__form-row > input[name="next_follow_up"] {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    position: relative;
    color: var(--navy);
  }

  .lead-card__form-row > input[name="next_follow_up"]:not(:focus):not(:valid)::before,
  .lead-card__form-row > input[name="next_follow_up"][value=""]::before {
    content: "Follow-up";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.88rem;
    pointer-events: none;
  }

  .lead-card__form-row > input[name="next_follow_up"]:focus::before,
  .lead-card__form-row > input[name="next_follow_up"]:valid::before {
    display: none;
    content: "";
  }

  .lead-card__form textarea {
    min-height: 60px;
    max-height: 120px;
    padding: 10px 12px;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .lead-card__form button[type="submit"],
  .lead-card__save-btn {
    min-height: 42px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 8px;
    background: #ffffff;
    border: 1.5px solid var(--navy);
    color: var(--navy);
    width: 100%;
    cursor: pointer;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .lead-card__form button[type="submit"]:hover,
  .lead-card__save-btn:hover {
    background: #f8fafc;
  }

  .lead-card__quick {
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(23, 50, 79, 0.12);
    font-size: 0.9rem;
  }

  .lead-card__time {
    display: none !important;
  }

  .lead-card__quick .lead-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    color: var(--navy);
  }

  .lead-card__quick .lead-card__action--call {
    display: inline-flex !important;
    order: 9;
    gap: 6px;
    background: var(--navy);
    border: 1.5px solid var(--navy);
    color: white;
  }

  .lead-card__quick .lead-card__action--call:hover,
  .lead-card__quick .lead-card__action--call:focus {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: white;
  }

  .lead-card__quick .copy-button,
  .lead-card__quick .lead-card__resend-form,
  .lead-card__quick .lead-card__action--resend,
  .lead-card__quick .lead-card__mail-form,
  .lead-card__quick .lead-card__mail-off,
  .lead-card__quick .lead-card__delete-form,
  .lead-card__quick .lead-card__lookup-form {
    display: none !important;
  }

  .lead-card__mail-form {
    order: 3;
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
  }

  .lead-card__mail-form .lead-card__action {
    width: 100%;
    border-color: rgba(23, 50, 79, 0.16);
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
  }

  .lead-card__mail-off {
    order: 3;
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px dashed rgba(23, 50, 79, 0.22);
    border-radius: 8px;
    background: rgba(23, 50, 79, 0.03);
    font-size: 0.84rem;
    box-sizing: border-box;
  }

  .lead-card__contact-off {
    order: 1;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(159, 43, 43, 0.24);
    border-radius: 8px;
    background: rgba(159, 43, 43, 0.06);
    box-sizing: border-box;
  }

  .lead-card__form input,
  .lead-card__form select,
  .lead-card__form button {
    min-height: 44px;
  }

  .lead-card__form-foot {
    grid-template-columns: 1fr;
  }

  .lead-card__form-foot > textarea {
    order: 1;
  }

  .lead-card__form-foot > .lead-notes-status {
    order: 2;
  }

  .lead-card__form-actions {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .lead-card__form-actions .lead-card__action--details {
    display: inline-flex !important;
    min-height: 44px;
    background: #ffffff;
    border: 1.5px solid rgba(23, 50, 79, 0.22);
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 700;
    width: 100%;
  }

  .lead-card__form-actions .lead-card__action--details:hover {
    background: #f8fafc;
    color: var(--navy);
    text-decoration: none;
  }

  .lead-card__form-actions button {
    min-height: 44px;
    background: #ffffff;
    border: 1.5px solid var(--navy);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 1px 3px rgba(23, 50, 79, 0.08);
    width: 100%;
  }

  .lead-card__form-actions button:hover,
  .lead-card__form-actions button:focus-visible {
    background: #f1f5f9;
  }

  .lead-card__lookup-action {
    display: none !important;
  }

  /* Close is a thumb target on a phone, not a 26px word. */
  .lead-detail-panel__close {
    display: grid;
    place-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  .leads-pagination .button-link {
    min-height: 44px;
  }
}

.address-smart-suggestions {
  margin-top: -4px;
}

.address-smart-list {
  display: grid;
  gap: 8px;
}

.address-smart-suggestion {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(31, 107, 99, 0.14);
  border-radius: 12px;
  background: white;
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease;
}

.address-smart-suggestion:hover,
.address-smart-suggestion:focus-visible {
  border-color: rgba(31, 107, 99, 0.32);
  transform: translateY(-1px);
}

.address-smart-suggestion strong {
  color: var(--navy);
}

.address-smart-suggestion span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.divider {
  height: 1px;
  margin: 22px 0;
  background: rgba(23, 50, 79, 0.1);
}

.section-heading,
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 18px;
}

.compact-heading {
  margin: 0 0 18px;
}

.campaign-list-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 18px;
}

.campaign-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.campaign-hub-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.campaign-home-section {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 18px 22px;
  scroll-margin-top: 118px;
}

.campaign-home-section .campaign-list-tools {
  align-items: flex-start;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.campaign-list-tray {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.campaign-home-section .guide-details {
  margin: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.48);
}

.campaign-list-tray .campaign-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(145px, 0.7fr) minmax(250px, 1.2fr) minmax(190px, 0.9fr) minmax(132px, auto);
  grid-template-areas: "visual title stats progress actions";
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 12px 14px;
  background: rgba(255, 253, 248, 0.72);
  border-color: rgba(23, 50, 79, 0.08);
  border-radius: 8px;
  box-shadow: none;
}

.campaign-list-tray .campaign-card:hover {
  background: rgba(255, 253, 248, 0.94);
  box-shadow: none;
}

.campaign-intel-preview {
  grid-area: visual;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 86px;
  overflow: hidden;
  border: 1px solid rgba(23, 50, 79, 0.13);
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.05);
  color: inherit;
  text-decoration: none;
}

.campaign-intel-preview.has-postcard-preview {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

.campaign-intel-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.campaign-intel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.campaign-intel-preview.has-postcard-preview .campaign-intel-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.campaign-list-tray .campaign-card:hover .campaign-intel-media img {
  transform: scale(1.04);
}

.campaign-list-tray .campaign-card:hover .campaign-intel-preview.has-postcard-preview .campaign-intel-media img {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.campaign-intel-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(23, 50, 79, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
}

.campaign-list-tray .campaign-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.campaign-list-tray .card-topline {
  grid-area: title;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.campaign-list-tray .card-topline > div:first-child {
  min-width: 0;
}

.campaign-list-tray .campaign-card h3 {
  margin-bottom: 4px;
  font-size: 0.98rem;
}

.campaign-list-tray .campaign-card h3 a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.campaign-list-tray .campaign-card .muted {
  font-size: 0.8rem;
  line-height: 1.35;
}

.campaign-list-tray .card-topline .muted {
  display: -webkit-box;
  margin: 0;
  max-width: 100%;
  max-height: calc(1.35em * 2);
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.campaign-list-tray .badge {
  padding: 6px 9px;
  font-size: 0.66rem;
}

.campaign-loading-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(23, 50, 79, 0.14);
  border-top-color: var(--navy);
  border-radius: 999px;
  animation: loading-spin 0.75s linear infinite;
}

.campaign-list-tray .campaign-loading-spinner {
  width: 24px;
  height: 24px;
  border-width: 2px;
  justify-self: end;
}

.campaign-list-tray .campaign-stats-stack {
  grid-area: stats;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.campaign-list-tray .campaign-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.campaign-list-tray .campaign-stats .stat {
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px 4px 10px;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.campaign-list-tray .campaign-stats .stat-link {
  cursor: pointer;
}

.campaign-list-tray .campaign-stats .stat-link:hover {
  background: rgba(200, 138, 47, 0.08);
}

.campaign-list-tray .campaign-stats .stat-label {
  font-size: 0.66rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.campaign-list-tray .campaign-stats .stat strong {
  font-size: 1.05rem;
  line-height: 1;
  /* Pin the number to the tile's bottom edge so all five numbers sit on
     one row even when a label ("Phone leads", "Sent to printer") wraps. */
  margin-top: auto;
}

.campaign-list-tray .campaign-progress {
  grid-area: progress;
  gap: 7px;
  margin: 0;
  min-width: 0;
}

.campaign-mail-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 7px 0 2px;
}

.campaign-mail-summary p {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.campaign-mail-summary p > span {
  color: var(--teal);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.campaign-mail-summary p > strong {
  min-width: 0;
  color: var(--navy);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.campaign-mail-summary .is-excluded {
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid rgba(23, 50, 79, 0.1);
}

.campaign-mail-summary .is-excluded > span {
  color: var(--muted);
}

.campaign-mail-summary .needs-review > span,
.campaign-mail-summary .needs-review > strong {
  color: var(--failed);
}

.campaign-mail-summary--campaign {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid rgba(23, 50, 79, 0.11);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.7);
}

.campaign-mail-summary--campaign p {
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 2px 14px;
  border-left: 1px solid rgba(23, 50, 79, 0.1);
  font-size: 0.84rem;
}

.campaign-mail-summary--campaign p:first-child {
  padding-left: 0;
  border-left: 0;
}

.campaign-mail-summary--campaign .is-excluded {
  margin-top: 0;
  padding-top: 2px;
  border-top: 0;
}

.campaign-list-tray .campaign-mail-summary {
  gap: 3px;
  margin: 3px 0 0;
}

.campaign-list-tray .campaign-mail-summary p {
  grid-template-columns: minmax(62px, auto) minmax(0, 1fr);
  gap: 6px;
  font-size: 0.7rem;
  line-height: 1.25;
}

.campaign-list-tray .campaign-mail-summary p > span {
  font-size: 0.57rem;
}

@media (max-width: 720px) {
  .campaign-mail-summary--campaign {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 12px;
  }

  .campaign-mail-summary--campaign p,
  .campaign-mail-summary--campaign p:first-child {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-left: 0;
    border-top: 1px solid rgba(23, 50, 79, 0.1);
  }

  .campaign-mail-summary--campaign p:first-child {
    border-top: 0;
  }
}

.campaign-list-tray .campaign-next-step {
  padding: 3px 8px 3px 10px;
  font-size: 0.78rem;
}

.campaign-list-tray .progress-row,
.campaign-list-tray .progress-copy {
  font-size: 0.78rem;
}

.campaign-list-tray .progress-copy {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.campaign-list-tray .campaign-card-footer {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  padding-top: 0;
  border-top: 0;
  box-sizing: border-box;
}

.campaign-card-updated {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.71rem;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  z-index: 1;
}

.campaign-list-tray .campaign-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.campaign-list-tray .campaign-card-actions .button-link,
.campaign-list-tray .campaign-card-actions .campaign-edit > summary,
.campaign-list-tray .campaign-delete > summary,
.campaign-list-tray .campaign-archive-btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.78rem;
  line-height: 1;
}

@media (max-width: 1220px) {
  .campaign-list-tray .campaign-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "title"
      "stats"
      "progress"
      "actions";
    align-items: stretch;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  .campaign-list-tray .campaign-card-footer {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(23, 50, 79, 0.06);
    box-sizing: border-box;
  }

  .campaign-list-tray .campaign-card-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
  }

  .campaign-list-tray .campaign-card-actions .button-link {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: center;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .campaign-list-tray .campaign-card-actions .campaign-edit {
    flex: 0 0 auto;
  }

  .campaign-list-tray .campaign-card-actions .campaign-edit > summary {
    min-height: 40px;
  }

  .campaign-list-tray .campaign-card-actions .campaign-archive-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .campaign-list-tray .campaign-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .campaign-intel-preview {
    width: 100%;
    max-width: 280px;
    height: 160px;
    margin: 8px auto 6px;
    justify-self: center;
  }

  .campaign-list-tray .card-topline {
    flex-direction: row;
    align-items: flex-start;
  }
}

@media (max-width: 580px) {
  .campaign-list-tray .campaign-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}

.nested-empty-state {
  border: 1px dashed rgba(23, 50, 79, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
}

.campaign-list-tools h2 {
  margin: 0 0 4px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--navy);
}

.campaign-list-tools p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--muted);
}

.campaign-search-form {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(170px, 220px) auto;
  align-items: center;
  gap: 12px;
}

.campaign-search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.campaign-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.campaign-search-form input[type="search"] {
  min-height: 42px;
  padding: 10px 14px 10px 38px !important;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: #ffffff;
  width: 100%;
  font-size: 0.92rem;
  box-sizing: border-box;
}

.campaign-search-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.campaign-search-actions button {
  border-radius: 8px;
  padding: 10px 18px;
  min-height: 42px;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-card {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.campaign-card-partial,
.campaign-card-new {
  border-color: rgba(143, 91, 0, 0.24);
}

.campaign-card-failed {
  border-color: rgba(159, 43, 43, 0.28);
}

.campaign-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.campaign-card h3 a {
  text-decoration: none;
}

.campaign-card h3 a:hover {
  text-decoration: underline;
}

.campaign-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.campaign-card-footer p {
  margin: 0;
}

.campaign-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-archive-btn,
.campaign-delete > summary {
  list-style: none;
  min-height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  background: #ffffff;
  transition: all 0.15s ease;
}

.campaign-archive-btn {
  min-height: 34px;
  min-width: 34px;
  padding: 6px 8px;
}

.campaign-archive-btn:hover,
.campaign-archive-btn:focus-visible,
.campaign-delete > summary:hover,
.campaign-delete[open] > summary {
  color: var(--failed);
  background: rgba(159, 43, 43, 0.08);
  border-color: rgba(159, 43, 43, 0.3);
}

.campaign-archive-btn:focus-visible {
  outline: 2px solid var(--failed);
  outline-offset: 2px;
}

.campaign-archive-modal {
  max-width: 440px;
  width: calc(100vw - 32px);
  box-sizing: border-box;
}

.campaign-archive-modal .leads-modal__content {
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campaign-archive-modal__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

.campaign-archive-modal__body strong {
  color: var(--navy);
  font-weight: 700;
}

.campaign-archive-modal__note {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

.campaign-archive-modal .leads-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.campaign-archive-modal .leads-modal__actions button {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
}

.campaign-archive-modal .leads-modal__actions .btn-cancel,
.campaign-archive-modal .leads-modal__actions .button.secondary {
  background: #ffffff;
  border: 1px solid rgba(23, 50, 79, 0.2);
  color: var(--navy);
}

.campaign-archive-modal .leads-modal__actions .btn-cancel:hover,
.campaign-archive-modal .leads-modal__actions .button.secondary:hover {
  background: rgba(23, 50, 79, 0.06);
  border-color: rgba(23, 50, 79, 0.35);
  color: var(--navy);
}

.campaign-archive-modal .leads-modal__actions button.danger {
  background: var(--failed);
  color: #ffffff;
  border: 1px solid transparent;
}

.campaign-archive-modal .leads-modal__actions button.danger:hover {
  background: #812020;
}

@media (max-width: 600px) {
  .campaign-archive-modal .leads-modal__actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .campaign-archive-modal .leads-modal__actions button {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.campaign-delete {
  position: relative;
}

.campaign-delete[open] {
  flex-basis: 100%;
}

.campaign-delete > summary::-webkit-details-marker {
  display: none;
}

.campaign-delete-icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  display: block;
}

.campaign-delete form {
  width: min(100%, 340px);
  margin-top: 10px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(159, 43, 43, 0.22);
  border-radius: 14px;
  background: var(--panel-strong);
  box-shadow: 0 20px 42px rgba(23, 50, 79, 0.18);
}

.campaign-delete form p {
  line-height: 1.45;
}

.property-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.property-table-stack {
  gap: 10px;
}

.property-table-head {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) minmax(165px, 0.85fr) minmax(120px, 0.65fr) minmax(120px, 0.65fr) minmax(205px, 1.2fr);
  gap: 12px;
  align-items: center;
  /* Matches the card's own border + padding so the headings sit over their
     column instead of near it. */
  padding: 0 17px 4px 21px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 16px;
}

.property-list-head h2 {
  margin: 0 0 8px;
}

.property-list-head p {
  margin: 0;
}

.property-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(170px, 220px) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.78);
}

/* Campaign editing stays beside the campaign action, with a visible label. */
.campaign-list-tray .campaign-card:has(.campaign-edit[open]) {
  overflow: visible;
  z-index: 2;
}
.campaign-edit { position: relative; }
.campaign-edit > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.campaign-edit > summary::-webkit-details-marker { display: none; }
.campaign-edit > summary:hover,
.campaign-edit[open] > summary { background: var(--bg); }
.campaign-edit > summary:active { transform: scale(0.98); }
.campaign-edit > summary svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.campaign-edit > summary:focus-visible,
.campaign-edit__action:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.campaign-edit__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, calc(100vw - 64px));
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-strong);
  box-shadow: 0 8px 24px rgba(23, 50, 79, 0.16);
}
.campaign-edit__panel form { display: grid; gap: 10px; margin: 0 0 12px; }
.campaign-edit__panel label { font-weight: 600; font-size: 0.875rem; }
.campaign-edit__panel input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; font-size: 1rem; }
.campaign-edit__panel button { min-height: 44px; }
.campaign-edit__action {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.campaign-edit__action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The Group control only renders on multi-wave campaigns, and the Mail control
   only off the preview. Six controls need a sixth track, or the actions wrap
   and Estimate is squeezed into the narrow one meant for the button. */
.property-filter-form:has(#property-wave-filter):has(#property-mail-filter) {
  grid-template-columns:
    minmax(200px, 1fr) minmax(130px, 170px) minmax(150px, 190px)
    minmax(170px, 220px) minmax(150px, 190px) auto;
}

.property-filter-form--gc {
  grid-template-columns:
    minmax(260px, 1fr) minmax(150px, 190px) minmax(170px, 220px) auto;
}

.property-filter-form--gc:has(#property-wave-filter):has(#property-mail-filter) {
  grid-template-columns:
    minmax(220px, 1fr) minmax(130px, 170px) minmax(150px, 190px)
    minmax(170px, 220px) auto;
}

@media (max-width: 900px) {
  .property-filter-form--gc,
  .property-filter-form--gc:has(#property-wave-filter):has(#property-mail-filter) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.property-filter-form label {
  display: grid;
  gap: 5px;
}

.property-filter-form label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-filter-form input {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: #ffffff;
  width: 100%;
}

.property-filter-form select {
  min-height: 40px;
  padding: 8px 38px 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(23, 50, 79, 0.2);
  background-color: #ffffff;
  background-position: right 12px center;
  background-size: 18px;
  color: var(--navy);
  font-weight: 600;
  width: 100%;
}

.property-filter-form .leads-filter-dropdown,
.campaign-search-form .leads-filter-dropdown {
  width: 100%;
}

.property-filter-form .leads-filter-dropdown summary {
  min-height: 40px;
  width: 100%;
  box-sizing: border-box;
}

.campaign-search-form .leads-filter-dropdown summary {
  min-height: 42px;
  width: 100%;
  box-sizing: border-box;
}

.property-filter-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  white-space: nowrap;
}

.property-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.78);
}

.property-pagination strong,
.property-pagination span {
  line-height: 1.2;
}

.property-pagination-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.property-page-link {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.property-page-link.is-disabled {
  cursor: default;
  background: rgba(23, 50, 79, 0.08);
  color: rgba(23, 50, 79, 0.42);
  box-shadow: none;
  transform: none;
}

.property-page-current {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.property-card {
  position: relative;
  display: grid;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
}

.property-table-stack .property-card {
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: none;
}

.property-table-stack .property-card:hover {
  border-color: rgba(23, 50, 79, 0.18);
  background: rgba(255, 253, 248, 0.96);
}

.property-card:target,
.property-lookup-target {
  scroll-margin-top: 112px;
  border-color: rgba(31, 107, 99, 0.45);
  box-shadow: 0 22px 48px rgba(31, 107, 99, 0.16);
}

.mail-card-sent {
  border-color: rgba(31, 95, 70, 0.22);
}

.mail-card-queued {
  border-color: rgba(143, 91, 0, 0.22);
}

.mail-card-handled_elsewhere {
  border-color: rgba(31, 107, 99, 0.24);
}

.mail-card-do_not_mail {
  border-color: rgba(159, 43, 43, 0.22);
}

.property-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.property-card-titleblock {
  display: grid;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.property-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.property-title-row h3 {
  margin: 0 0 6px;
}

.property-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.property-header-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.property-header-links .inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.property-header-links .inline-link:hover {
  border-color: rgba(23, 50, 79, 0.28);
  background: white;
  transform: translateY(-1px);
}

.quick-mail-action {
  margin: 0;
}

.quick-mail-action button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(176, 43, 43, 0.24);
  border-radius: 8px;
  background: rgba(176, 43, 43, 0.08);
  color: var(--failed);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.quick-mail-action button:hover {
  background: rgba(176, 43, 43, 0.14);
  color: var(--failed);
  transform: translateY(-1px);
}

.quick-mail-note {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(102, 112, 133, 0.2);
  border-radius: 8px;
  background: rgba(102, 112, 133, 0.08);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
}

.roof-analysis-action {
  display: inline-grid;
  justify-items: start;
  gap: 5px;
  max-width: min(100%, 31rem);
  margin: 0;
}

.roof-analysis-action button,
.roof-analysis-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(31, 107, 99, 0.24);
  border-radius: 8px;
  background: rgba(31, 107, 99, 0.08);
  color: var(--teal);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.roof-analysis-action button:hover {
  border-color: rgba(31, 107, 99, 0.4);
  background: rgba(31, 107, 99, 0.14);
  color: var(--teal);
  transform: translateY(-1px);
}

.roof-analysis-summary {
  max-width: 31rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.roof-analysis-status.is-ready {
  border-color: rgba(38, 132, 91, 0.24);
  background: rgba(38, 132, 91, 0.1);
  color: #17633f;
}

.roof-analysis-status.is-pending::before {
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border: 2px solid rgba(31, 107, 99, 0.22);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: loading-spin 0.75s linear infinite;
  content: "";
}

.roof-analysis-status.is-locked,
.roof-analysis-status.is-unavailable {
  border-color: rgba(102, 112, 133, 0.2);
  background: rgba(102, 112, 133, 0.08);
  color: var(--muted);
}

.roof-analysis-feedback {
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.roof-analysis-help {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.roof-analysis-help-trigger {
  display: inline-grid;
  width: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(31, 107, 99, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--teal);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.roof-analysis-help-trigger:hover,
.roof-analysis-help-trigger:focus-visible {
  border-color: rgba(31, 107, 99, 0.48);
  background: rgba(31, 107, 99, 0.1);
  color: var(--teal);
  transform: none;
}

.roof-analysis-tooltip {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 9px);
  width: min(310px, calc(100vw - 44px));
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  background: #17324f;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.42;
  text-align: left;
  box-shadow: 0 12px 28px rgba(23, 50, 79, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}

.roof-analysis-help:hover .roof-analysis-tooltip,
.roof-analysis-help:focus-within .roof-analysis-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* One home reads as one row that lines up with .property-table-head. */
.property-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(140px, 0.8fr) minmax(115px, 0.62fr) minmax(120px, 0.68fr) minmax(230px, 1.4fr);
  gap: 12px;
  align-items: start;
}

.property-cell {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

/* The column head names these on wide screens; the label only appears once
   the head is hidden, so a phone still says what each line is. */
.property-cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.property-cell-value {
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Whole-home cards: one picked project per line, each with its saved range,
   in a size that keeps a range on one line in the narrow columns. */
.property-cell-value--list {
  display: grid;
  gap: 2px;
  font-size: 0.9rem;
  font-weight: 700;
  overflow-wrap: normal;
}

.property-cell-note {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.property-cell-note:empty {
  display: none;
}

.property-cell-tone-alert {
  color: var(--failed);
}

.property-cell-tone-partial {
  color: var(--partial);
}

.property-cell-tone-lead {
  color: var(--teal);
}

.property-cell-tone-mail {
  color: var(--gold-deep);
}

.property-cell .badge {
  justify-self: start;
}

.property-cell-home {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
}

.property-home-text {
  min-width: 0;
}

.property-home-text h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.property-home-place {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

/* Which batch this home arrived in. Rendered only when a campaign has more
   than one, so it reads as a distinction rather than a repeated label. */
.property-home-wave {
  margin: 5px 0 0;
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}

.property-details-toggle {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 0;
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none;
  cursor: pointer;
}

.property-details-toggle::before {
  content: "▾";
  color: var(--gold-deep);
  font-size: 0.75rem;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}

.property-details-toggle[aria-expanded="true"]::before {
  transform: rotate(0);
}

.property-details-toggle:hover,
.property-details-toggle:focus-visible {
  border: 0;
  background: transparent;
  color: var(--teal);
  box-shadow: none;
  transform: none;
}

.property-cell-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 3px;
}

.property-cell-links .inline-link {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}



.property-intel-visual {
  position: relative;
  display: block;
  min-height: 164px;
  overflow: hidden;
  border-radius: 11px;
  background: rgba(23, 50, 79, 0.08);
  color: inherit;
  text-decoration: none;
}

.property-intel-visual img {
  width: 100%;
  height: 100%;
  min-height: 164px;
  object-fit: cover;
}

.property-intel-placeholder {
  display: grid;
  place-items: center;
  min-height: 164px;
  padding: 18px;
  color: rgba(23, 50, 79, 0.62);
  font-weight: 800;
  text-align: center;
}

.property-intel-hero-badge {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 3px 5px;
  background: rgba(8, 23, 45, 0.84);
  color: #f5bc4a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.property-intel-visual-roof {
  outline: 2px solid rgba(200, 138, 47, 0.48);
  outline-offset: -2px;
}

.property-cell-home .property-intel-visual,
.property-cell-home .property-intel-visual img,
.property-cell-home .property-intel-placeholder {
  min-height: 82px;
  height: 82px;
}

.property-cell-home .property-intel-visual {
  border-radius: 7px;
}

.property-cell-home .property-intel-placeholder {
  padding: 6px;
  font-size: 0.72rem;
}

.property-detail-lede {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.property-detail-lede .property-header-links {
  justify-content: flex-start;
}

.property-intel-detail {
  margin: 0;
  line-height: 1.42;
}

.property-table-stack .property-row {
  gap: 10px;
}

.property-table-stack .property-intel-detail {
  font-size: 0.84rem;
}

.property-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 18px;
  align-items: start;
}

.property-collapse {
  margin-top: 0;
}

.property-collapse:not([open]) > summary {
  margin-bottom: 0;
}

.property-collapse > summary {
  display: none;
}

.property-collapse[open] .when-closed {
  display: none;
}

.property-collapse:not([open]) .when-open {
  display: none;
}

.property-section {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.04);
  border: 1px solid rgba(23, 50, 79, 0.08);
}

.property-brief-section {
  background:
    linear-gradient(180deg, rgba(200, 138, 47, 0.14) 0%, rgba(23, 50, 79, 0.04) 100%);
}

.brief-summary {
  display: grid;
  gap: 6px;
}

.brief-headline {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.brief-headline strong {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0;
}

.brief-facts {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
  font-size: 0.92rem;
}

.brief-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.brief-conflict {
  color: var(--gold-deep);
  font-weight: 700;
  white-space: nowrap;
}

.brief-roof-note {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  background: rgba(200, 138, 47, 0.09);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.brief-links {
  margin: 0;
}

.property-thumb-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.thumb-cell {
  display: grid;
  gap: 6px;
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 50, 79, 0.1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}

.thumb-cell:hover {
  border-color: var(--gold);
}

.thumb-cell .thumb.property-thumb {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
}

.thumb-cell-label {
  padding: 6px 10px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.thumb-cell-flagged {
  border-color: rgba(143, 91, 0, 0.45);
  background: rgba(200, 138, 47, 0.07);
}

.thumb-flag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold-deep, #8f5b00);
  color: white;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thumb-flag-prints {
  background: var(--navy, #17324f);
}

.property-actions-section {
  background: rgba(23, 50, 79, 0.05);
}

.status-strip {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(23, 50, 79, 0.1);
  font-size: 0.92rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.status-strip strong {
  color: var(--navy);
}

.status-strip-sep {
  color: rgba(23, 50, 79, 0.4);
}

.status-strip-call {
  font-weight: 700;
}

.scan-log {
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 50, 79, 0.1);
  font-size: 0.9rem;
}

.scan-log > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}

.scan-log > summary::-webkit-details-marker {
  display: none;
}

.scan-log-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  margin-top: 10px;
}

.scan-log-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scan-log-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.scan-log-table th,
.scan-log-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  vertical-align: top;
}

.scan-log-table th {
  font-weight: 600;
  color: var(--navy);
}

.scan-log-table td.muted {
  color: rgba(23, 50, 79, 0.65);
  word-break: break-all;
}

.scan-log-form button {
  align-self: flex-start;
}

.scan-log-actions {
  align-items: stretch;
  width: 100%;
}

.scan-log-actions button {
  margin: 0;
}

.scan-log-form button[disabled],
.scan-log-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(35%);
}

.scan-log-form__hint {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(23, 50, 79, 0.65);
}

.scan-log-table__checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--failed);
}

.scan-log-table td:first-child {
  width: 32px;
  padding-top: 10px;
}

.batch-test-clear-scans {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(23, 50, 79, 0.15);
}

.batch-test-clear-scans__list {
  font-size: 0.8rem;
  word-break: break-all;
}

.history-collapse,
.visit-log-collapse {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 50, 79, 0.1);
}

.history-collapse > summary,
.visit-log-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  user-select: none;
}

.history-collapse > summary::-webkit-details-marker,
.visit-log-collapse > summary::-webkit-details-marker {
  display: none;
}

.history-collapse > summary::before,
.visit-log-collapse > summary::before {
  content: "▾";
  font-size: 0.7rem;
  color: var(--gold-deep);
  transition: transform .15s ease;
}

.history-collapse:not([open]) > summary::before,
.visit-log-collapse:not([open]) > summary::before {
  transform: rotate(-90deg);
}

.history-collapse[open],
.visit-log-collapse[open] {
  background: rgba(255, 255, 255, 0.92);
}

.history-collapse[open] .outreach-history {
  margin-top: 10px;
}

/* One row per real QR visit: when it happened, and the one thing a roofer can
   say about it - that the visit was their own test of the card. */
.visit-log {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.visit-log-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  font-size: 0.88rem;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.visit-log-row:first-child {
  border-top: 0;
}

.visit-log-when {
  font-variant-numeric: tabular-nums;
}

.visit-log-row-own .visit-log-when {
  color: var(--muted);
}

.visit-log-form {
  margin: 0 0 0 auto;
  display: flex;
}

/* Scoped through .visit-log on purpose. The global `button:hover` rule paints a
   navy pill at a specificity a bare .visit-log-button cannot outrank, which put
   navy text on a navy background and made this unreadable while pointed at. The
   states below have to keep winning, so do not flatten these selectors. */
.visit-log .visit-log-button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--gold-deep);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 0;
}

/* Gold at rest, navy while pointed at: a hue pair that stays distinguishable
   without relying on brightness alone. */
.visit-log .visit-log-button:hover,
.visit-log .visit-log-button:focus-visible,
.visit-log .visit-log-button:active {
  background: none;
  color: var(--navy);
  text-decoration-thickness: 2px;
}

/* The one thing a roofer can say about a submitted number: it was them testing
   their own card. It sits under the status strip so the number itself is still
   said once, up there, and is pulled up out of the section's 16px grid gap so
   it hangs off that strip - sitting an equal distance from the visit fold below
   made it read as a control for a scan. */
.lead-owner-mark {
  display: flex;
  margin: -10px 0 0;
}

.lead-owner-form {
  margin: 0;
  display: flex;
}

/* Same shape and the same gold-to-navy pair as the visit-log button, and
   scoped the same way: the global `button:hover` rule outranks a bare class
   and would paint navy text on a navy pill. */
.lead-owner-mark .lead-owner-button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--gold-deep);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 0;
}

.lead-owner-mark .lead-owner-button:hover,
.lead-owner-mark .lead-owner-button:focus-visible,
.lead-owner-mark .lead-owner-button:active {
  background: none;
  color: var(--navy);
  text-decoration-thickness: 2px;
}

.estimate-hero {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(23, 50, 79, 0.98), rgba(18, 61, 103, 0.9));
  color: white;
}

.estimate-hero strong {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.estimate-hero .muted {
  color: rgba(255, 255, 255, 0.78);
}

.estimate-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.estimate-summary {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.empty-brief {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(23, 50, 79, 0.06);
  border: 1px dashed rgba(23, 50, 79, 0.16);
}

.section-kicker {
  display: block;
  margin-bottom: 10px;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fact-card,
.report-item,
.report-section-item,
.asset-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(23, 50, 79, 0.08);
}

.fact-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fact-value {
  line-height: 1.45;
}

.report-panel {
  display: grid;
  gap: 12px;
}

.report-bullet-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  line-height: 1.55;
}

.report-bullet-list li {
  word-break: break-word;
}

.flag-panel {
  border: 1px solid rgba(143, 91, 0, 0.2);
  border-radius: 10px;
  background: rgba(143, 91, 0, 0.05);
}

.flag-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.flag {
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.45;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 50, 79, 0.08);
}

.flag-warning {
  border: 1px solid rgba(143, 91, 0, 0.25);
  background: rgba(143, 91, 0, 0.08);
}

.flag-info {
  border: 1px solid rgba(23, 50, 79, 0.15);
  background: rgba(23, 50, 79, 0.05);
}

.report-focus-panel {
  border: 1px solid rgba(200, 138, 47, 0.3);
  background:
    linear-gradient(135deg, rgba(200, 138, 47, 0.1), rgba(255, 253, 248, 0.95) 42%),
    var(--panel);
}

.report-focus-grid .fact-card {
  border: 1px solid rgba(200, 138, 47, 0.25);
  background: rgba(255, 255, 255, 0.84);
}

.compact-report-access {
  display: grid;
  gap: 10px;
}

.compact-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.report-list,
.report-sections {
  display: grid;
  gap: 10px;
}

.report-section-block {
  display: grid;
  gap: 10px;
}

.report-section-list {
  display: grid;
  gap: 8px;
}

.report-error {
  background: rgba(159, 43, 43, 0.08);
  border-color: rgba(159, 43, 43, 0.16);
}

.property-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.roof-only-notice {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 10px;
  background: rgba(200, 138, 47, 0.09);
}

.roof-only-notice strong {
  color: var(--navy);
}

.roof-only-notice p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.treatment-preview-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.treatment-preview-strip a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: inherit;
  text-decoration: none;
}

.treatment-preview-strip a:hover {
  border-color: var(--gold);
}

.treatment-preview-strip strong {
  color: var(--navy);
  line-height: 1.15;
}

.thumb.property-thumb {
  width: 100%;
  height: 164px;
}

.report-panel .thumb.property-thumb {
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

.report-panel .asset-preview {
  display: block;
}

.card-topline,
.title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.card-meta {
  display: grid;
  gap: 6px;
}

.badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.campaign-status-summary {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 0;
  max-width: min(100%, 32ch);
  text-align: right;
}

.campaign-status-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.campaign-list-tray .campaign-status-summary {
  max-width: 24ch;
}

.campaign-list-tray .campaign-status-note {
  font-size: 0.72rem;
}

.muted {
  color: var(--muted);
}

.site-header .muted {
  color: rgba(255, 255, 255, 0.78);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.summary-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-primary-stats {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 7px;
  margin-top: 0;
}

/* Same tile as the delivery buckets above — see .mailing-tracker-grid > div. */
.campaign-primary-stats .stat {
  position: relative;
  padding: 9px 30px 9px 11px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color .15s ease;
}

.campaign-primary-stats .stat:hover {
  border-color: rgba(200, 138, 47, 0.45);
}

.campaign-primary-stats .stat-label {
  min-height: 0;
  white-space: normal;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: 5px;
}

.campaign-primary-stats .stat strong {
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.campaign-primary-stats .stat small {
  margin-top: 5px;
  font-size: 0.72rem;
  line-height: 1.3;
}

.campaign-lead-summary {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.campaign-lead-summary__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.campaign-lead-summary__head h2 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
}

.campaign-lead-summary__link {
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.campaign-lead-summary__head .muted {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.32;
}

/* Four figures, no nested boxes: the numbers are the content, so the
   chrome around each one was pure noise. A single hairline separates
   the two time windows. */
.campaign-lead-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.campaign-lead-summary__bucket {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 1px 0 1px 16px;
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}

.campaign-lead-summary__bucket:first-child {
  padding-left: 0;
  border-left: 0;
}

.campaign-lead-summary__bucket-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--navy);
}

/* auto columns + justify-content keeps the pair packed together;
   equal fr columns pushed the two numbers to opposite edges. */
.campaign-lead-summary__metrics {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 4px 24px;
}

.campaign-lead-summary__metric {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.campaign-lead-summary__metric strong {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.campaign-lead-summary__metric span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--muted);
  text-transform: none;
}

@media (max-width: 900px) {
  .campaign-lead-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .campaign-lead-summary__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* Stacked, the divider has to move to the top edge — left as-is it
     indented the second window behind a stray vertical rule. */
  .campaign-lead-summary__bucket {
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .campaign-lead-summary__bucket:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .campaign-lead-details[open] > .campaign-lead-details__summary {
    display: grid;
    gap: 4px;
  }
}

.campaign-progress {
  display: grid;
  gap: 8px;
  margin-top: -4px;
}

/* Keep the state label compact while its action and safety guidance remains
   visible as normal text directly below it. */
.campaign-next-step {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  padding: 4px 11px;
  border: 1px solid rgba(31, 107, 99, 0.28);
  border-radius: 999px;
  background: rgba(31, 107, 99, 0.075);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

.campaign-next-step-status {
  min-width: 0;
}

.progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.progress-row strong {
  color: var(--navy);
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.09);
}

.progress-track span {
  display: block;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.progress-copy {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.stat {
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(200, 138, 47, 0.35);
  border-radius: 0;
  padding: 4px 12px 4px 14px;
  transition: border-color .15s ease;
}

.stat-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.stat-link:focus-visible {
  outline: 3px solid rgba(31, 107, 99, 0.34);
  outline-offset: 2px;
}

.stat:hover {
  border-left-color: var(--gold);
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0;
}

.stat small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.stat-postcard-image-mix strong {
  color: var(--teal);
}

.mailing-tracker-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.mailing-tracker-panel-header {
  display: grid;
  gap: 6px;
}

.mailing-tracker-panel-header strong {
  display: block;
  color: var(--navy);
  font-size: 1.08rem;
  line-height: 1.2;
}

.mailing-tracker-panel-header .muted {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Headline-free delivery counts that sit directly under the postcard state
   card — the card is the headline, this row is just the numbers. */
.mailing-tracker-facts {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

/* Uppercase gold is the page's one and only "section kicker" voice.
   Everything else (tile labels, metric labels) is quiet sentence case,
   so the eye has a single cue for "new section starts here". */
.mailing-tracker-facts .section-kicker {
  margin: 0;
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
}

.mailing-result-details {
  grid-column: 1 / -1;
  margin: 0;
}

.mailing-result-panel {
  display: block;
}

.mailing-result-panel .mailing-tracker-panel-header {
  max-width: 720px;
}

.job-progress-mailing-summary {
  margin: 0 0 14px;
}

/* The office copy is a side note on both the approval and the result: it should
   read after the number that matters, never compete with it. */
.mailing-office-copy-note {
  margin: 8px 0 12px;
  max-width: 720px;
}

.mailing-result-details > summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
}

/* Only the "Mailing details" line inside the state card is toned down;
   the same class on the job-progress page keeps its own weight. */
.campaign-command-card .mailing-result-details > summary {
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 0.82rem;
}

.mailing-result-details[open] > summary {
  margin-bottom: 12px;
}

.mailing-result-details .mailing-tracker-grid,
.mailing-result-details .job-progress-counts {
  margin-bottom: 10px;
}

.mailing-tracker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

/* Shared metric tile. The delivery buckets and the outcome tiles below
   used to be styled as two unrelated things (filled boxes vs. gold rules)
   even though they are both just "a label and a number" — one language now. */
.mailing-tracker-grid > div {
  position: relative;
  min-width: 0;
  padding: 9px 30px 9px 11px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.mailing-tracker-grid dt {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.mailing-tracker-grid dd {
  margin: 5px 0 0;
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.mailing-tracker-grid .mailing-tracker-attention {
  border-color: rgba(159, 43, 43, 0.2);
  background: rgba(159, 43, 43, 0.05);
}

.mailing-tracker-grid .mailing-tracker-attention dd {
  color: var(--failed);
}

.mail-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.035);
  border: 1px dashed rgba(23, 50, 79, 0.12);
  font-size: 0.88rem;
}

.mail-breakdown > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.mail-breakdown dt {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mail-breakdown dd {
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.campaign-overview-grid {
  min-width: 0;
}

.campaign-command-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.9fr);
  gap: 12px;
  margin-bottom: 16px;
}

.campaign-command-strip--late-followup {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-command-strip--single {
  grid-template-columns: minmax(0, 1fr);
}

.campaign-command-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.campaign-command-card--action {
  border-color: rgba(200, 138, 47, 0.28);
  background: linear-gradient(135deg, rgba(200, 138, 47, 0.12), rgba(255, 255, 255, 0.82));
}

.campaign-command-card--outcome {
  align-items: center;
  padding: 20px;
}

.campaign-command-card--outcome > div {
  max-width: 940px;
}

.mailing-proof-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-command-card--quiet-followup {
  grid-column: 1 / -1;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-color: rgba(23, 50, 79, 0.09);
  background: rgba(23, 50, 79, 0.025);
}

.campaign-command-card--quiet-followup > .command-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 0.76rem;
}

.postcard-late-followup,
.postcard-late-followup summary {
  min-width: 0;
}

.postcard-late-followup summary {
  min-height: 24px;
  cursor: pointer;
  color: var(--navy);
}

.postcard-late-followup summary > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.postcard-late-followup summary strong {
  display: inline;
  font-size: 0.9rem;
}

.postcard-late-followup__body {
  display: grid;
  gap: 8px;
  max-width: 940px;
  padding-top: 9px;
}

.postcard-late-followup__body p {
  margin: 0;
}

.postcard-preview-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}

.postcard-preview-action--stacked {
  display: grid;
  justify-items: start;
}

.postcard-preview-action > p,
.postcard-preview-action > strong {
  margin: 0;
}

.postcard-flow-line {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.command-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(31, 107, 99, 0.1);
  color: var(--teal);
  font-weight: 700;
}

/* The glyph is a CSS mask, so the chip colours it with currentColor
   and every state card gets the same weight of line art. */
.command-card-icon[data-icon]::before {
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.campaign-command-card--action .command-card-icon {
  background: var(--navy);
  color: var(--gold);
}

.campaign-command-card--ai {
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-color: rgba(31, 107, 99, 0.34);
  background:
    linear-gradient(135deg, rgba(31, 107, 99, 0.1), rgba(255, 255, 255, 0.9) 54%, rgba(200, 138, 47, 0.1));
}

.campaign-command-card--ai .command-card-icon {
  width: 42px;
  height: 42px;
  background: var(--navy);
  color: var(--gold);
}

.ai-proof-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ai-proof-mail-off {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(31, 107, 99, 0.25);
  border-radius: 999px;
  background: rgba(31, 107, 99, 0.12);
  color: #145c54;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.campaign-command-card .ai-proof-card__intro {
  max-width: 900px;
  margin: 8px 0 0;
}

.ai-proof-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}

.ai-proof-metrics > div {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.ai-proof-metrics dt {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.ai-proof-metrics dd {
  margin: 5px 0 0;
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ai-proof-card__detail,
.campaign-command-card .ai-proof-card__detail {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.ai-proof-card__status,
.campaign-command-card .ai-proof-card__status {
  margin: 13px 0 0;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}

.ai-proof-card__status--complete {
  color: var(--sent);
}

.ai-proof-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.campaign-command-card .ai-proof-action p {
  margin: 0;
}

.ai-proof-confirmation {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.8fr) auto;
  gap: 10px 14px;
  align-items: end;
  max-width: 980px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(200, 138, 47, 0.32);
  border-radius: 8px;
  background: rgba(255, 250, 239, 0.82);
}

.ai-proof-confirmation__check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  align-self: center;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.ai-proof-confirmation__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}

.ai-proof-confirmation__name {
  display: grid;
  gap: 5px;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 800;
}

.ai-proof-confirmation__name input {
  width: 100%;
}

.campaign-command-card .ai-proof-confirmation > p {
  grid-column: 2;
  margin: -5px 0 0;
  font-size: 0.74rem;
}

.ai-proof-confirmation > button {
  grid-column: 3;
  grid-row: 1;
  white-space: nowrap;
}

.preview-proof-panel {
  border-color: rgba(31, 107, 99, 0.2);
  background: rgba(31, 107, 99, 0.045);
}

.command-card-label {
  margin: 0 0 4px;
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.campaign-command-card strong {
  display: block;
  color: var(--navy);
  font-size: 1.18rem;
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.campaign-command-card p:last-child {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.38;
}

.campaign-command-card .progress-track {
  margin-top: 10px;
}

.campaign-command-card .button-link {
  margin-top: 10px;
}

@media (min-width: 901px) {
  .campaign-command-strip--single {
    margin-bottom: 12px;
  }

  .campaign-command-card--outcome {
    padding: 13px 14px;
  }

  .campaign-command-card--outcome > div {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 18px;
    width: 100%;
    max-width: none;
  }

  .campaign-command-card--outcome > div > .command-card-label {
    grid-column: 1;
    grid-row: 1;
  }

  .campaign-command-card--outcome > div > strong {
    grid-column: 1;
    grid-row: 2;
  }

  .campaign-command-card--outcome > div > p.muted {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .campaign-command-card--outcome > div > .button-link,
  .campaign-command-card--outcome > div > .postcard-preview-action {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
  }
}

.campaign-inline-notice {
  margin-bottom: 14px;
}

.campaign-progress-callout {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.04);
}

.campaign-progress-callout .campaign-loading-spinner {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.campaign-progress-callout strong {
  display: block;
  color: var(--navy);
}

.campaign-progress-callout p {
  margin: 3px 0 0;
}

@media (max-width: 720px) {
  .campaign-command-card--ai {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 14px;
  }

  .campaign-command-card--ai .command-card-icon {
    width: 34px;
    height: 34px;
  }

  .ai-proof-card__header {
    display: grid;
  }

  .ai-proof-mail-off {
    justify-self: start;
  }

  .ai-proof-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-proof-confirmation {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .campaign-command-card .ai-proof-confirmation > p,
  .ai-proof-confirmation > button {
    grid-column: 1;
    grid-row: auto;
  }

  .ai-proof-confirmation > button {
    width: 100%;
    white-space: normal;
  }

  .campaign-command-card--outcome {
    align-items: start;
    padding: 14px;
  }

  .mailing-proof-links {
    display: grid;
  }

  .mailing-proof-links .button-link {
    width: 100%;
  }

  .campaign-progress-callout {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .campaign-progress-callout .button-link {
    grid-column: 2;
    justify-self: start;
  }
}

.workflow-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(200, 138, 47, 0.12), rgba(23, 50, 79, 0.045));
}

.workflow-band .eyebrow {
  margin-bottom: 8px;
}

.workflow-band strong {
  display: block;
  color: var(--navy);
  font-size: 1.08rem;
}

.workflow-band p {
  margin: 8px 0 0;
}

.workflow-meter {
  display: grid;
  gap: 8px;
}

.campaign-image-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) auto;
  align-items: end;
  gap: 18px;
}

.campaign-image-settings h2 {
  margin: 0;
  color: var(--navy);
}

.campaign-image-settings p {
  margin: 8px 0 0;
}

.campaign-settings-drawer {
  margin-top: 18px;
  margin-bottom: 22px;
}

.campaign-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* The short postcard switch reads as a full-width banner, so the two tall
   cards below it can sit side by side instead of leaving a dead column. */
@media (min-width: 1151px) {
  .campaign-settings-grid > .settings-block--postcard,
  .campaign-settings-grid > .settings-block:last-child:nth-child(2) {
    grid-column: 1 / -1;
  }

  .settings-block--postcard .image-settings-form {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-block--postcard .image-settings-form > .campaign-option-field {
    grid-column: 1;
  }

  .settings-block--postcard .image-settings-form > button {
    grid-column: 2;
    margin-top: 0;
  }
}

.settings-block {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.settings-block h2 {
  margin: 0;
}

.settings-block p {
  margin: 8px 0 0;
}

.image-settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
  gap: 12px;
}

.image-settings-form > .campaign-option-field,
.image-settings-form > .cleanup-tier-field,
.image-settings-form > .checkbox-line,
.image-settings-form > .landing-variant-field,
.image-settings-form > .settings-subgroup,
.image-settings-form > .form-hint,
.image-settings-form > button {
  grid-column: 1 / -1;
}

.image-settings-form > button {
  justify-self: start;
  margin-top: 2px;
}

.settings-subgroup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.settings-subgroup[hidden] {
  display: none;
}

.settings-subgroup__label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  grid-column: 1 / -1;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.settings-block__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.image-settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cleanup-tier-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 280px;
  gap: 8px;
  margin: 0;
  min-width: min(100%, 280px);
}

.cleanup-tier-label {
  color: var(--muted);
  display: block;
  grid-column: 1 / -1;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.cleanup-tier-field > .form-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.cleanup-tier-option {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 52px;
  min-width: 0;
  padding: 9px 10px;
}

.cleanup-tier-option input {
  accent-color: var(--navy);
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

.cleanup-tier-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cleanup-tier-copy strong {
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.15;
}

.cleanup-tier-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  min-width: 0;
}

.cleanup-tier-option:has(input:checked) {
  background: #fff8ec;
  border-color: rgba(198, 137, 43, 0.72);
  box-shadow: 0 0 0 2px rgba(198, 137, 43, 0.15);
}

.cleanup-tier-option:has(input:disabled),
.cleanup-tier-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cleanup-actions {
  align-items: center;
}

.cleanup-actions form {
  margin: 0;
}

.premium-batch-actions {
  align-items: center;
  padding-top: 2px;
}

.premium-batch-actions form {
  margin: 0;
}

.premium-batch-status {
  flex: 1 0 100%;
  margin: -2px 0 0;
}

.premium-cleanup-button {
  background: #142d47;
  color: #fff8ec;
}

.premium-cleanup-button:hover {
  background: #0d2035;
}

.image-settings-form .form-hint {
  margin: 0;
}

.back-link {
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.78;
  transition: opacity .12s ease;
}

.back-link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.back-link span {
  font-size: 1.1rem;
  font-weight: 400;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-grid > .full-width,
.form-grid .full-width {
  grid-column: 1 / -1;
}

.form-grid label small,
.stack label small {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: -2px;
}

.address-source {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  margin: 0;
}

.address-source legend {
  grid-column: 1 / -1;
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.source-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
}

/* The hidden attribute must beat the flex display, or unavailable sources
   (the subdivision picker) come back on contractor screens. */
.source-option[hidden] {
  display: none;
}

.source-option:has(input:checked) {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(23, 50, 79, 0.08);
}

.source-option input {
  width: auto;
  margin: 0;
}

.source-option strong {
  color: var(--navy);
  font-size: 0.95rem;
}

.campaign-option-field {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
}

.campaign-option-field input {
  accent-color: var(--navy);
  flex: 0 0 auto;
  height: 17px;
  margin: 0;
  width: 17px;
}

.campaign-option-field span {
  color: inherit;
  display: grid;
  font-size: inherit;
  gap: 2px;
  letter-spacing: normal;
  margin-bottom: 0;
  min-width: 0;
  text-transform: none;
}

.campaign-option-field strong {
  color: var(--navy);
  font-size: 0.94rem;
  line-height: 1.15;
}

.campaign-option-field small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.campaign-option-field:has(input:checked) {
  background: #fff8ec;
  border-color: rgba(198, 137, 43, 0.72);
  box-shadow: 0 0 0 2px rgba(198, 137, 43, 0.15);
}

.retargeting-source-note {
  margin: 4px 0 0;
  font-size: 0.88rem;
}

label span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: #ffffff;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
textarea:hover {
  border-color: rgba(23, 50, 79, 0.58);
  background-color: #fffdf8;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  border-color: #0b69c7 !important;
  box-shadow: 0 0 0 3px #b4d7ff !important;
}

select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding-right: 44px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2317324f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 20px;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.06);
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

select:not([multiple]):hover {
  border-color: rgba(23, 50, 79, 0.58);
  background-color: #fffdf8;
}

select:not([multiple]):focus,
select:not([multiple]):focus-visible {
  outline: none !important;
  border-color: #0b69c7 !important;
  box-shadow: 0 0 0 3px #b4d7ff !important;
}

select:not([multiple]):disabled {
  border-color: rgba(23, 50, 79, 0.12);
  background-color: rgba(23, 50, 79, 0.05);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.8;
}

@media (forced-colors: active) {
  select:not([multiple]) {
    -webkit-appearance: auto;
    appearance: auto;
    padding-right: 14px;
    background-image: none;
  }
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
}

.clearable-file {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.clearable-file input[type="file"] {
  min-width: 0;
}

.file-clear-button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--failed);
  white-space: nowrap;
}

.file-clear-button:hover {
  border-color: var(--failed);
  background-color: #fff5f5;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--navy);
}

textarea {
  min-height: 88px;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}

button {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: var(--navy);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}

button:hover {
  background: #1f3f63;
}

button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

button:disabled:hover {
  background: var(--navy);
}

button.secondary,
a.secondary,
.button-link.secondary {
  background: var(--gold);
  color: #231b11;
}

button.secondary:hover,
a.secondary:hover,
.button-link.secondary:hover {
  background: #b07820;
}

button.danger {
  background: var(--failed);
}

button.danger:hover {
  background: #812020;
}

button.danger:disabled:hover {
  background: var(--failed);
}

/* Settings forms (Company, Team, Security) stack their fields with .stack.
   Without this the rows run together and the save button sits flush against
   the last input, so it reads as part of the field instead of an action. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack > h2 {
  margin: 0;
}

/* These labels wrap their caption text and their field with no element between
   them, so the caption's line box ended flush against the top of the input.
   The focus ring sits 3px outside a 3px outline, so focusing a field painted
   the ring straight through the caption's descenders. Give every row a real
   column gap wider than that 6px bleed. */
.stack > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* One row on these forms is a switch, not a field. The column direction above
   would stand the caption on top of its own tickbox, so this row alone runs
   across and pins the box to the first line of a caption that wraps. */
.stack > label.stack-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.stack > label.stack-check > input {
  margin-top: 2px;
  flex: none;
}

/* `label span` is the site-wide caption style: small, muted, uppercase. That is
   right over a text box and wrong beside a tickbox, where
   the span is not a caption but the sentence the tick agrees to - and a
   sentence set in tracked-out capitals is both hard to read and quieter than
   the hint explaining it. Give this one span ordinary body text back. */
.stack > label.stack-check > span {
  margin-bottom: 0;
  color: inherit;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

.stack > button {
  align-self: flex-start;
  margin-top: 6px;
}

.actions-row,
.button-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.is-submitting button[type="submit"],
button[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.72;
  cursor: wait;
}

.form-loading-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--navy);
  font-weight: 700;
}

.form-loading-status[hidden] {
  display: none;
}

.form-loading-status::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(23, 50, 79, 0.18);
  border-top-color: var(--navy);
  border-radius: 999px;
  animation: loading-spin 0.75s linear infinite;
}

.job-progress-panel {
  max-width: 760px;
  margin: 0 auto;
}

.job-progress-alert {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(153, 82, 25, 0.28);
  border-radius: 8px;
  background: rgba(153, 82, 25, 0.08);
  color: #6f3d12;
}

.job-progress-alert strong {
  display: block;
  color: #6f3d12;
  font-weight: 700;
}

.job-progress-alert p {
  margin: 5px 0 0;
}

.job-progress-work {
  margin-top: 22px;
}

.job-progress-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.job-progress-guidance > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
}

.job-progress-guidance span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.job-progress-guidance strong {
  color: var(--navy);
  line-height: 1.45;
}

.job-progress-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.job-progress-meta div,
.job-progress-counts div {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
}

.job-progress-meta dt,
.job-progress-counts dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.job-progress-meta dd,
.job-progress-counts dd {
  margin: 6px 0 0;
  color: var(--navy);
  font-weight: 800;
}

.job-progress-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.job-progress-counts__group {
  grid-column: 1 / -1;
}

.job-progress-counts__group dd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.job-progress-counts__group dd span {
  display: block;
}

.job-progress-counts__group dd span:first-child {
  font-size: 1.08rem;
}

.job-progress-counts__group dd span:last-child {
  color: var(--muted);
  font-size: 0.92rem;
}

.job-progress-address {
  margin: 0 0 22px;
}

.job-progress-address strong {
  color: var(--navy);
}

.job-progress-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.job-progress-actions__heading {
  margin-bottom: 12px;
}

.job-progress-actions__heading p,
.job-progress-actions__heading h2 {
  margin: 0;
}

.job-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.job-action-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
}

.job-action-card--warning {
  border-color: rgba(153, 82, 25, 0.3);
  background: rgba(153, 82, 25, 0.07);
}

.job-action-card--danger {
  border-color: rgba(159, 43, 43, 0.32);
  background: rgba(159, 43, 43, 0.06);
}

.job-action-card h3,
.job-action-card p,
.job-action-card form {
  margin: 0;
}

.job-action-card h3 {
  color: var(--navy);
  font-size: 1rem;
}

.job-action-card form {
  align-self: end;
  margin-top: 2px;
}

.job-progress-panel .job-action-card button,
.job-progress-panel .button-link {
  min-height: 44px;
}

.job-progress-footer-actions {
  margin-top: 16px;
}

.job-progress-panel [hidden] {
  display: none;
}

.campaign-sending-screen {
  max-width: 640px;
  margin: 0 auto;
}

.campaign-sending-screen__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 18px 26px;
}

.campaign-sending-screen__spinner {
  width: 52px;
  height: 52px;
  border-width: 5px;
  margin-bottom: 20px;
}

.campaign-sending-screen__body h1 {
  margin: 0;
}

.campaign-sending-screen__campaign {
  margin: 8px 0 0;
  color: var(--navy);
  font-weight: 800;
}

.campaign-sending-screen__detail {
  margin: 12px 0 0;
}

.campaign-sending-screen__work {
  width: 100%;
  max-width: 420px;
  margin-top: 20px;
}

.campaign-sending-screen__lock-note {
  margin: 20px 0 0;
  max-width: 440px;
}

.campaign-sending-screen__actions {
  justify-content: center;
  margin-top: 22px;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sidebar-loading-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.subdivision-preview {
  margin-top: 18px;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 14px;
  background: rgba(23, 50, 79, 0.04);
}

.subdivision-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.subdivision-preview-header p {
  margin: 4px 0 0;
}

.subdivision-match-list {
  display: grid;
  gap: 8px;
  max-height: 460px;
  overflow: auto;
  padding-right: 2px;
}

.subdivision-match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.subdivision-match input {
  margin-top: 4px;
}

.subdivision-match-body,
.subdivision-match-title,
.subdivision-match-meta,
.subdivision-match-sample {
  display: block;
}

.subdivision-match-body span {
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.subdivision-match-title {
  color: var(--navy);
  font-weight: 700;
}

.subdivision-match-meta,
.subdivision-match-sample {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.9rem;
}

.subdivision-match-sample {
  word-break: break-word;
}

.pricing-section {
  grid-column: 1 / -1;
}

.pricing-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  min-width: 0;
}

/* One column by default. The roofing band carries no summary card any more,
   but the whole-home section below still puts its approval state on the right,
   so the second column is claimed by the card rather than assumed. */
.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 250, 252, 0.96)),
    radial-gradient(circle at 92% 0%, rgba(200, 138, 47, 0.18), transparent 34%);
  box-shadow: var(--shadow);
}

.pricing-hero:has(.pricing-model-summary) {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}

.pricing-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.98;
  color: var(--navy);
  letter-spacing: 0;
}

.pricing-hero .lead {
  margin: 0;
  color: #47443d;
  font-size: 1.02rem;
}

.pricing-model-summary {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.pricing-model-summary span,
.pricing-block-copy {
  color: var(--muted);
}

.pricing-model-summary span {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-label-row,
.pricing-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pricing-label-row {
  color: #5d625f;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pricing-legend-row {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.pricing-label-text,
.pricing-legend-row > span {
  min-width: 0;
}

.pricing-model-summary strong {
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.1;
}

.pricing-model-summary small {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.pricing-price-facts {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.pricing-price-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(23, 50, 79, 0.09);
}

.pricing-price-facts dt,
.pricing-price-facts dd {
  min-width: 0;
  margin: 0;
}

.pricing-price-facts dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.pricing-price-facts dd {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.pricing-model-summary code {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  font-size: 0.84rem;
}

.pricing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pricing-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}

.pricing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.pricing-hero-actions .button-link {
  margin: 0;
}

.pricing-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.45fr);
  align-items: start;
  gap: 18px;
}

.pricing-primary-column,
.pricing-secondary-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.pricing-phone-preview-nest {
  scroll-margin-top: 24px;
}

.pricing-preview-footer-actions {
  margin-top: 14px;
  text-align: center;
}

.pricing-preview-back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(23, 50, 79, 0.06);
  transition: background 0.15s ease;
}

.pricing-preview-back-link:hover {
  background: rgba(23, 50, 79, 0.12);
}

.pricing-secondary-column .button-link {
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.pricing-control-nest {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(200, 138, 47, 0.24);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 12px 30px rgba(23, 50, 79, 0.06);
}

.pricing-control-nest-heading {
  display: grid;
  gap: 4px;
  padding: 2px 2px 0;
}

.pricing-control-nest-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.15;
}

.pricing-control-nest-heading p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.pricing-control-nest--logic {
  gap: 0;
}

.pricing-method-steps {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pricing-method;
}

.pricing-method-step {
  position: relative;
  display: grid;
  gap: 4px;
  counter-increment: pricing-method;
  padding: 11px 12px 11px 40px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.pricing-method-step::before {
  content: counter(pricing-method);
  position: absolute;
  top: 11px;
  left: 11px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fffdf8;
  background: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Grid, not wrapping flex: a long step name pushed the tag onto its own line on
   some rows and not others, so the column of tags stopped lining up. */
.pricing-method-step-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
}

.pricing-method-step-head strong {
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.25;
}

.pricing-method-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Pricing phone preview mockup */
.pricing-phone-preview-nest {
  position: static;
  gap: 12px;
  background: #fffdf8;
}

.pricing-preview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pricing-sample-selector {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.pricing-sample-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-sample-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pricing-sample-pill {
  appearance: none;
  border: 1px solid var(--line-soft, #d6cbb8);
  border-radius: 8px;
  background: #ffffff;
  color: var(--navy, #17324f);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pricing-sample-pill:hover {
  border-color: var(--accent-gold, #c88a2f);
  background: #fffbf2;
}

.pricing-sample-pill:focus-visible {
  outline: 3px solid rgba(200, 138, 47, 0.55);
  outline-offset: 2px;
}

.pricing-sample-pill.is-active {
  background: var(--navy, #17324f);
  border-color: var(--navy, #17324f);
  color: #ffffff;
  font-weight: 600;
}

/* Realistic Smartphone Device Frame */
.phone-mockup-frame {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 375px;
  height: 740px;
  margin: 8px auto 0;
  border: 11px solid #1f242d;
  border-radius: 42px;
  background: #1f242d;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.32), 0 4px 14px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-mockup-frame *,
.phone-mockup-frame *::before,
.phone-mockup-frame *::after {
  box-sizing: border-box;
}

@media (max-width: 420px) {
  .phone-mockup-frame {
    max-width: 100%;
    border-width: 8px;
    border-radius: 32px;
    height: 680px;
  }
}

.phone-mockup-speaker {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 4.5px;
  background: #374151;
  border-radius: 4px;
  z-index: 15;
}

.phone-mockup-camera {
  position: absolute;
  top: 6px;
  left: calc(50% + 36px);
  width: 7px;
  height: 7px;
  background: #374151;
  border-radius: 50%;
  z-index: 15;
}

.phone-mockup-screen {
  position: relative;
  background: #faf7f1;
  border-radius: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e1e1e;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.phone-mockup-browser-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(234, 229, 220, 0.95);
  backdrop-filter: blur(8px);
  padding: 16px 10px 8px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.1);
  font-size: 0.72rem;
  color: #4b5563;
  font-family: monospace;
}

.phone-mockup-lock {
  font-size: 0.65rem;
}

.phone-mockup-url {
  font-weight: 600;
  color: #1f2937;
}

/* 1:1 Landing Page Top Navy Band */
.phone-mockup-screen .s1-band {
  background: #0d2140;
  color: #ffffff;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  border-bottom: 2px solid #e8a838;
}

.phone-mockup-screen .s1-band-brand {
  order: 1;
}

.phone-mockup-screen .s1-band-name {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #e8a838;
  text-transform: uppercase;
}

.phone-mockup-screen .s1-band-meta {
  order: 2;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-weight: 600;
}

.phone-mockup-screen .s1-band-meta span {
  color: #f4b948;
  margin-right: 4px;
}

.phone-mockup-screen .s1-band-tagline {
  order: 3;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
}

/* 1:1 Hero Photo Card */
.phone-mockup-screen .s1-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #08172d;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 168, 56, 0.5);
}

.phone-mockup-screen .s1-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-mockup-screen .s1-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e8a838;
  color: #0d2140;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 8px 14px;
  box-shadow: 3px 3px 0 #0d2140;
  z-index: 4;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.phone-mockup-screen .s1-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #0d2140;
  border-radius: 50%;
}

.phone-mockup-screen .s1-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 33, 64, 0.88) 100%);
  color: #ffffff;
  z-index: 3;
}

.phone-mockup-screen .s1-photo-caption {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.phone-mockup-screen .s1-photo-caption em {
  color: #f4b948;
  font-style: normal;
  display: block;
  font-size: 8.5px;
  margin-bottom: 2px;
}

/* 1:1 Stage / Left Content */
.phone-mockup-screen .s1-stage {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #faf7f1;
}

.phone-mockup-screen .s1-left {
  padding: 24px 16px 12px;
  position: relative;
}

.phone-mockup-screen .s1-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  width: 48px;
  height: 2px;
  background: #e8a838;
}

.phone-mockup-screen .s1-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0d2140;
  opacity: 0.75;
  margin-bottom: 14px;
}

.phone-mockup-screen .s1-eyebrow::before {
  content: "";
  width: 20px;
  height: 1.5px;
  background: #e8a838;
}

.phone-mockup-screen .s1-label {
  font-size: 12px;
  font-weight: 700;
  color: #5a5a5a;
  margin-bottom: 6px;
}

.phone-mockup-screen .s1-address {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 900;
  color: #0d2140;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
}

.phone-mockup-screen .s1-addr-line1 {
  display: block;
}

.phone-mockup-screen .s1-addr-line2 {
  display: block;
  font-size: 0.8em;
  color: #0d2140;
  opacity: 0.85;
  margin-top: 2px;
}

.phone-mockup-screen .s1-hero-subhead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.45;
  color: #0d2140;
  font-weight: 500;
}

/* 1:1 Hero Estimate Card (.s1-estimate) */
.phone-mockup-screen .s1-estimate {
  background: #ffffff;
  border: 1px solid rgba(13, 33, 64, 0.14);
  border-top: 3px solid #e8a838;
  box-shadow: 0 12px 34px rgba(13, 33, 64, 0.09);
  padding: 16px 16px 18px;
  margin-bottom: 20px;
  display: grid;
  gap: 0;
}

.phone-mockup-screen .s1-estimate-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(13, 33, 64, 0.1);
}

.phone-mockup-screen .s1-estimate-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8c6116;
}

.phone-mockup-screen .s1-estimate-size {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(13, 33, 64, 0.75);
  text-align: right;
}

.phone-mockup-screen .s1-estimate-scope {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #8c6116;
}

.phone-mockup-screen .s1-estimate-name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: #0d2140;
}

.phone-mockup-screen .s1-estimate-price {
  margin: 0 0 8px;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 38px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #0d2140;
}

.phone-mockup-screen .s1-estimate-price-lead {
  display: block;
  margin-bottom: 4px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(13, 33, 64, 0.75);
}

.phone-mockup-screen .s1-estimate-note {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(13, 33, 64, 0.65);
  font-weight: 500;
}

.phone-mockup-screen .s1-estimate-note a {
  color: #0d2140;
  text-decoration: underline;
}

.phone-mockup-screen .s1-estimate-spread {
  margin: 12px 0 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 33, 64, 0.1);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(13, 33, 64, 0.75);
}

.phone-mockup-screen .s1-estimate-spread strong {
  display: block;
  font-weight: 800;
  color: #0d2140;
  margin-bottom: 3px;
}

/* 1:1 Jump Button (.s1-estimate-jump) */
.phone-mockup-screen .s1-estimate-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  padding: 0 18px;
  background: #e8a838;
  color: #0d2140;
  border: 1.5px solid #0d2140;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #0d2140;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.phone-mockup-screen .s1-estimate-jump:hover,
.phone-mockup-screen .s1-estimate-jump:focus {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #0d2140;
}

.phone-mockup-screen .s1-estimate-jump-chevron {
  width: 8px;
  height: 8px;
  border-right: 2.5px solid #0d2140;
  border-bottom: 2.5px solid #0d2140;
  transform: translateY(-2px) rotate(45deg);
}

/* 1:1 Note Box (.s1-note) */
.phone-mockup-screen .s1-note {
  padding: 16px 14px;
  margin-bottom: 20px;
  border-top: 1px solid rgba(13, 33, 64, 0.14);
}

.phone-mockup-screen .s1-note-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #b8821f;
  margin-bottom: 6px;
}

.phone-mockup-screen .s1-note-tag::before {
  content: "";
  width: 16px;
  height: 2px;
  background: #e8a838;
}

.phone-mockup-screen .s1-note-body {
  font-size: 13px;
  line-height: 1.5;
  color: #1e1e1e;
  margin: 0 0 6px;
}

.phone-mockup-screen .s1-note-disclaimer {
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(13, 33, 64, 0.55);
  margin: 0;
}

/* 1:1 Call CTA Box (.s1-cta) */
.phone-mockup-screen .s1-cta {
  padding: 20px 16px;
  background: #0d2140;
  color: #ffffff;
  text-align: center;
  display: grid;
  gap: 12px;
  border-radius: 6px;
  margin-bottom: 22px;
}

.phone-mockup-screen .s1-cta-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.phone-mockup-screen .s1-cta-label strong {
  display: block;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 2px;
}

.phone-mockup-screen .s1-phone {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 24px;
  color: #0d2140;
  display: block;
  padding: 12px 14px;
  background: #e8a838;
  border: 1px solid #e8a838;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 2px 2px 0 #08172d;
}

.phone-mockup-screen .s1-phone-paren {
  opacity: 0.6;
}

/* 1:1 Options Menu Section (.s2-root) */
.phone-mockup-screen .s2-root {
  background: #faf7f1;
  border-top: 2px solid rgba(13, 33, 64, 0.12);
  display: block;
}

.phone-mockup-screen .s2-topband {
  padding: 8px 12px;
  background: #e8a838;
  color: #0d2140;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.phone-mockup-screen .s2-option-menu {
  padding: 24px 16px 32px;
}

.phone-mockup-screen .s2-option-kicker {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8c6116;
  margin-bottom: 4px;
}

.phone-mockup-screen .s2-option-title {
  margin: 0 0 4px;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0d2140;
}

.phone-mockup-screen .s2-option-title em {
  font-style: italic;
  color: #8c6116;
}

.phone-mockup-screen .s2-option-count {
  margin: 0 0 16px;
  font-size: 11.5px;
  color: #5a5a5a;
}

.phone-mockup-screen .s2-tier {
  border: 1px solid rgba(13, 33, 64, 0.13);
  background: rgba(255, 255, 255, 0.98);
  margin-bottom: 20px;
}

.phone-mockup-screen .s2-tier--priced {
  border-color: rgba(232, 168, 56, 0.6);
  box-shadow: inset 0 3px 0 #e8a838;
}

.phone-mockup-screen .s2-tier-head {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 10px;
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 33, 64, 0.11);
}

.phone-mockup-screen .s2-tier-title {
  margin: 0;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0d2140;
}

.phone-mockup-screen .s2-tier-title span {
  color: #e8a838;
  margin-right: 7px;
}

.phone-mockup-screen .s2-tier-note {
  margin: 3px 0 0;
  font-size: 11px;
  color: #5a5a5a;
  line-height: 1.4;
}

.phone-mockup-screen .s2-option-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone-mockup-screen .s2-option-item {
  background: #ffffff;
  border: none;
  border-bottom: 1px solid rgba(13, 33, 64, 0.08);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
  gap: 10px;
  align-items: center;
  box-shadow: none;
}

.phone-mockup-screen .s2-option-item.is-matched,
.phone-mockup-screen .s2-option-item.is-current-system-match {
  background: #0d2140;
  color: #ffffff;
  box-shadow: inset 5px 0 0 #e8a838;
}

.phone-mockup-screen .s2-option-item.is-current-system-match .s2-option-name,
.phone-mockup-screen .s2-option-item.is-matched .s2-option-name {
  color: #ffffff;
}

.phone-mockup-screen .s2-option-item.is-current-system-match .s2-option-description,
.phone-mockup-screen .s2-option-item.is-matched .s2-option-description {
  color: rgba(255, 255, 255, 0.72);
}

.phone-mockup-screen .s2-option-item.is-current-system-match .s2-option-fit-note,
.phone-mockup-screen .s2-option-item.is-matched .s2-option-fit-note {
  color: rgba(255, 255, 255, 0.78);
}

.phone-mockup-screen .s2-option-item.is-current-system-match .s2-option-price-col strong,
.phone-mockup-screen .s2-option-item.is-matched .s2-option-price-col strong {
  color: #f4b948;
}

.phone-mockup-screen .s2-option-item.is-current-system-match .s2-option-badge,
.phone-mockup-screen .s2-option-item.is-matched .s2-option-badge {
  color: #f4b948;
}

.phone-mockup-screen .s2-option-item.is-current-system-match .s2-option-price-col .s2-option-price-note,
.phone-mockup-screen .s2-option-item.is-matched .s2-option-price-col .s2-option-price-note {
  color: rgba(255, 255, 255, 0.72);
}

.phone-mockup-screen .s2-option-item.is-premium-path {
  background: #fffbf2;
  box-shadow: inset 4px 0 0 #e8a838;
}

.phone-mockup-screen .s2-option-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.phone-mockup-screen .s2-option-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0d2140;
  line-height: 1.25;
}

.phone-mockup-screen .s2-option-description {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #5a5a5a;
  line-height: 1.4;
}

.phone-mockup-screen .s2-option-fit-note {
  display: block;
  margin-top: 4px;
  color: #3b526d;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.phone-mockup-screen .s2-option-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  text-align: right;
  min-width: 0;
}

.phone-mockup-screen .s2-option-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8821f;
  margin-bottom: 4px;
}

.phone-mockup-screen .s2-option-price-col strong {
  display: block;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: #0d2140;
  line-height: 1.15;
  white-space: nowrap;
}

.phone-mockup-screen .s2-option-price-col .s2-option-price-note {
  display: block;
  font-size: 9.5px;
  color: #6b7280;
  margin-top: 3px;
  letter-spacing: 0.01em;
}

.phone-mockup-screen .preview-back-top-btn {
  appearance: none;
  width: 100%;
  margin-top: 18px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid rgba(13, 33, 64, 0.25);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0d2140;
  cursor: pointer;
  transition: background 0.15s ease;
}

.phone-mockup-screen .preview-back-top-btn:hover {
  background: rgba(13, 33, 64, 0.05);
}

/* Sticky Action Bar at Phone Bottom */
.phone-mockup-screen .mobile-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: #0d2140;
  box-shadow: 0 -4px 14px rgba(13, 33, 64, 0.25);
  margin-top: auto;
}

.phone-mockup-screen .mab-row {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

.phone-mockup-screen .mab-call,
.phone-mockup-screen .mab-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px 10px;
  text-decoration: none;
}

.phone-mockup-screen .mab-call {
  background: #0d2140;
  color: #ffffff;
  border-right: 1px solid rgba(232, 168, 56, 0.3);
}

.phone-mockup-screen .mab-call .mab-label {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8a838;
  font-weight: 800;
  margin-bottom: 2px;
}

.phone-mockup-screen .mab-call .mab-value {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

.phone-mockup-screen .mab-text {
  background: #e8a838;
  color: #0d2140;
}

.phone-mockup-screen .mab-text .mab-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0d2140;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
}

/* Coachmark beneath phone */
.pricing-preview-coachmark {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(232, 168, 56, 0.08);
  border: 1px solid rgba(232, 168, 56, 0.28);
  border-radius: 12px;
  margin-top: 14px;
}

.pricing-preview-coachmark-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.pricing-preview-coachmark-copy {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.45;
}

.pricing-preview-coachmark-heading {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0d2140;
}

.pricing-preview-coachmark-steps {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pricing-preview-coachmark-steps li {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #374151;
}

.pricing-preview-coachmark-steps .coachmark-step-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0d2140;
  margin-bottom: 2px;
}

.pricing-preview-coachmark-steps strong:not(.coachmark-step-title) {
  display: inline;
  font-weight: 700;
  color: #0d2140;
}

.pricing-preview-device-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(232, 168, 56, 0.35);
  font-size: 0.76rem;
  color: #6b7280;
  line-height: 1.4;
}

.pricing-preview-coachmark-copy ul {
  margin: 2px 0 0;
  padding-left: 14px;
  display: grid;
  gap: 3px;
}

.pricing-preview-coachmark-copy li {
  margin: 0;
}

/* Fill versus outline, never hue alone: the two tags have to read apart for a
   colour-blind roofer. */
.pricing-method-owner {
  justify-self: end;
  margin-top: 1px;
  padding: 2px 8px;
  border: 1px solid rgba(23, 50, 79, 0.3);
  border-radius: 999px;
  color: var(--navy);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pricing-method-owner--yours {
  border-color: var(--navy);
  color: #fffdf8;
  background: var(--navy);
}

.pricing-method-fallback {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.pricing-formula-jump {
  justify-self: start;
}

.pricing-formula-editor {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  scroll-margin-top: 88px;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.pricing-formula-editor:focus-visible {
  outline: 3px solid rgba(31, 107, 99, 0.3);
  outline-offset: 4px;
}

.pricing-formula-editor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.pricing-formula-editor-heading h4 {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.2;
}

.pricing-formula-editor-heading .eyebrow {
  margin: 0 0 4px;
}

.pricing-formula-editor-copy,
.pricing-formula-editor-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pricing-formula-editor .formula-editor {
  gap: 6px;
}

.pricing-formula-editor .formula-editor textarea {
  min-height: 92px;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.45;
}

.pricing-formula-editor-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pricing-formula-restore-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pricing-formula-restore {
  justify-self: start;
}

.pricing-formula-restore:disabled:hover {
  background: var(--gold);
}

.pricing-formula-editor .formula-guide {
  margin-top: 1px;
}

.formula-stack {
  display: grid;
  gap: 12px;
}

.formula-readout {
  display: grid;
  gap: 8px;
}

.formula-readout code {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  overflow-x: auto;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 50, 79, 0.08);
  font-size: 0.84rem;
}

.pricing-fieldset {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 12px 30px rgba(23, 50, 79, 0.06);
}

.pricing-control-nest .pricing-fieldset {
  min-width: 0;
  max-width: 100%;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid rgba(23, 50, 79, 0.10);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pricing-control-nest-heading + .pricing-fieldset {
  margin-top: 14px;
}

.pricing-fieldset legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

.pricing-fieldset legend + * {
  clear: both;
}

.pricing-block-copy {
  margin: 0 0 16px;
  max-width: 72ch;
  font-size: 0.95rem;
}

.pricing-service-guidance {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(200, 138, 47, 0.25);
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.07);
}

.pricing-service-guidance .pricing-block-copy {
  max-width: 94ch;
  margin: 0;
}

.pricing-service-guidance .pricing-block-copy + .pricing-block-copy,
.pricing-service-guidance .pricing-guidance-list + .pricing-block-copy {
  margin-top: 6px;
}

.pricing-service-guidance .pricing-guidance-list {
  margin: 6px 0;
  padding-left: 18px;
  max-width: 94ch;
  font-size: 0.95rem;
}

.pricing-service-guidance .pricing-guidance-list li {
  margin-bottom: 4px;
  line-height: 1.45;
}

.pricing-service-guidance .pricing-guidance-list li:last-child {
  margin-bottom: 0;
}

.pricing-help-details {
  position: relative;
  display: inline-block;
  font-size: 0.82rem;
  font-weight: normal;
  margin-left: 10px;
  vertical-align: middle;
}

.pricing-help-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.12);
  border: 1px solid rgba(200, 138, 47, 0.35);
  color: #8a5a14;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pricing-help-pill::-webkit-details-marker {
  display: none;
}

.pricing-help-pill:hover,
.pricing-help-details[open] .pricing-help-pill {
  background: rgba(200, 138, 47, 0.22);
  border-color: var(--gold);
}

.pricing-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: min(520px, 90vw);
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  color: #1f2937;
  font-size: 0.88rem;
}

.pricing-help-popover-title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--navy);
}

.pricing-help-popover .pricing-guidance-list {
  margin: 6px 0 10px;
  padding-left: 18px;
}

.pricing-help-popover .pricing-guidance-list li {
  margin-bottom: 6px;
  line-height: 1.4;
}

.pricing-help-popover .pricing-block-copy {
  margin: 8px 0 0;
  font-size: 0.82rem;
}

/* The backup width closes the table it draws instead of sitting below with the
   four whole-roof widths, which read as one widening ladder it never belonged
   to. Clean subtle card container with uniform border. */
.pricing-backup-width {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-strong);
  display: grid;
  gap: 10px;
  justify-items: start;
}

.pricing-backup-width .pricing-block-copy {
  max-width: 94ch;
  margin: 0;
}

/* The help text gets room to read; the percent box stays the size of the other
   percent boxes on this page so it is recognisably the same kind of control. */
.pricing-backup-width .pricing-input {
  max-width: 56ch;
}

.pricing-backup-width .input-affix {
  max-width: 160px;
}

.pricing-conditional-adjustments {
  scroll-margin-top: 86px;
}

.pricing-conditional-rule-list {
  display: grid;
  gap: 14px;
}

.pricing-conditional-rule {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pricing-conditional-rule.has-error {
  border-color: rgba(164, 61, 50, 0.72);
  box-shadow: 0 0 0 3px rgba(164, 61, 50, 0.09);
}

.pricing-conditional-rule-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pricing-conditional-rule-heading .eyebrow,
.pricing-conditional-rule-heading h3 {
  margin: 0;
}

.pricing-conditional-rule-heading h3 {
  margin-top: 3px;
  color: var(--navy);
  font-size: 1rem;
}

.pricing-conditional-remove {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
}

button.pricing-conditional-remove.secondary {
  border: 1px solid rgba(23, 50, 79, 0.22);
  background: transparent;
  color: var(--navy);
}

button.pricing-conditional-remove.secondary:hover,
button.pricing-conditional-remove.secondary:focus-visible {
  border-color: rgba(139, 47, 38, 0.5);
  background: rgba(139, 47, 38, 0.07);
  color: #72261f;
}

.pricing-conditional-basis {
  max-width: 340px;
}

.pricing-conditional-basis select,
.pricing-conditional-inline-field input,
.pricing-conditional-inline-field select {
  min-height: 44px;
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--navy);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.pricing-conditional-basis select {
  width: 100%;
}

.pricing-conditional-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 13px 10px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 12px;
  background: rgba(255, 248, 235, 0.72);
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.pricing-conditional-inline-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.pricing-conditional-value-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.pricing-conditional-currency {
  position: absolute;
  left: 10px;
  z-index: 1;
  color: var(--muted);
  font-weight: 800;
  pointer-events: none;
}

.pricing-conditional-currency[hidden] {
  display: none !important;
}

.pricing-conditional-inline-field.has-currency input {
  padding-left: 24px;
  width: 122px;
}

.pricing-conditional-inline-field input {
  width: 86px;
  min-width: 0;
}

.pricing-conditional-inline-field--rate input {
  width: 66px;
}

.pricing-conditional-inline-field select {
  width: auto;
  min-width: 96px;
  padding: 6px 30px 6px 10px;
  background-position: right 8px center;
  background-size: 16px;
  font-weight: 700;
}

.pricing-conditional-basis select:focus,
.pricing-conditional-basis select:focus-visible,
.pricing-conditional-inline-field input:focus,
.pricing-conditional-inline-field input:focus-visible,
.pricing-conditional-inline-field select:focus,
.pricing-conditional-inline-field select:focus-visible {
  outline: none;
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
}

.pricing-conditional-rule [aria-invalid="true"] {
  border-color: #a43d32;
  outline-color: rgba(164, 61, 50, 0.2);
}

.pricing-conditional-discount-cap {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(31, 107, 99, 0.2);
  border-radius: 12px;
  background: rgba(31, 107, 99, 0.06);
}

.pricing-conditional-discount-cap[hidden] {
  display: none !important;
}

.pricing-conditional-cap-input {
  flex: 0 0 220px;
}

.pricing-conditional-cap-input .input-affix {
  width: 132px;
}

.pricing-conditional-discount-cap > .pricing-help {
  margin: 0 0 11px;
}

.pricing-conditional-help {
  margin: -5px 0 0;
  max-width: 72ch;
}

.pricing-conditional-targets {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pricing-conditional-targets:focus-visible,
.pricing-conditional-targets[aria-invalid="true"] {
  outline: 3px solid rgba(164, 61, 50, 0.18);
  outline-offset: 5px;
  border-radius: 8px;
}

.pricing-control-nest .pricing-conditional-targets legend,
.pricing-conditional-targets legend {
  float: none;
  width: auto;
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 800;
}

.pricing-conditional-targets legend + * {
  clear: none;
}

.pricing-conditional-target-copy {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.pricing-conditional-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.pricing-conditional-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--navy);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.pricing-conditional-target:hover,
.pricing-conditional-target:focus-within {
  border-color: rgba(23, 50, 79, 0.34);
  background: #fff;
}

.pricing-conditional-target input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}

.pricing-conditional-target > span {
  min-width: 0;
}

.pricing-conditional-target--all {
  background: rgba(23, 50, 79, 0.045);
}

.pricing-conditional-target--all span {
  display: grid;
  gap: 2px;
}

.pricing-conditional-target--all small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
}

.pricing-conditional-target.is-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

.pricing-conditional-target-count {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.pricing-conditional-rule-error {
  min-height: 1.25em;
  margin: -6px 0 0;
  color: #8b2f26;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.pricing-conditional-global-error {
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(164, 61, 50, 0.3);
  border-radius: 8px;
  background: rgba(164, 61, 50, 0.08);
  color: #72261f;
  font-size: 0.9rem;
  font-weight: 700;
}

.pricing-conditional-empty {
  padding: 16px;
  border: 1px dashed rgba(23, 50, 79, 0.22);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.03);
}

.pricing-conditional-empty strong {
  color: var(--navy);
}

.pricing-conditional-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing-conditional-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.pricing-conditional-actions button {
  flex: 0 0 auto;
  min-height: 44px;
}

.pricing-conditional-status {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.pricing-conditional-summary-list {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.pricing-conditional-summary-empty {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px dashed rgba(23, 50, 79, 0.2);
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.025);
}

.pricing-conditional-summary-empty strong {
  color: var(--navy);
  font-size: 0.86rem;
}

.pricing-conditional-summary-empty span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.pricing-conditional-skip-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-conditional-skip-list li {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(200, 138, 47, 0.3);
  border-radius: 10px;
  background: rgba(255, 248, 235, 0.68);
}

.pricing-conditional-skip-list strong {
  color: var(--navy);
  font-size: 0.88rem;
}

.pricing-conditional-skip-list span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.pricing-subgrid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
}

.pricing-subgrid h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-grid-note {
  grid-column: 1 / -1;
  margin: 4px 0 -3px;
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.pricing-grid-allowances {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* The solar array amounts are one worked-out result row, not three boxes to
   fill in: give them the full row so the three prices read as one statement. */
.pricing-input--solar-arrays {
  grid-column: 1 / -1;
}

.pricing-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
}

html:has(#landing-pricing),
body:has(#landing-pricing),
html:has(.pricing-settings),
body:has(.pricing-settings),
html:has(.pricing-panel),
body:has(.pricing-panel) {
  overflow-x: clip;
}

.pricing-service-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: paint;
  overflow-x: auto;
  overscroll-behavior-x: none;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.pricing-service-table-scroll-hint {
  display: none;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.pricing-material-fallbacks {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(23, 50, 79, 0.12);
}

.pricing-material-fallbacks h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 1rem;
}

.pricing-service-table-wrap:focus-visible {
  outline: 3px solid rgba(200, 138, 47, 0.38);
  outline-offset: 3px;
}

.pricing-service-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--navy);
  font-size: 0.84rem;
  line-height: 1.35;
}

.pricing-service-table th,
.pricing-service-table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.1);
  text-align: left;
  vertical-align: top;
}

.pricing-service-table tr:not(.pricing-service-table-group) > * + * {
  border-left: 1px solid rgba(23, 50, 79, 0.08);
}

.pricing-service-table thead th {
  background: rgba(23, 50, 79, 0.07);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-service-table thead th:nth-child(1) { width: 23%; }
.pricing-service-table thead th:nth-child(2) { width: 10%; }
.pricing-service-table thead th:nth-child(3) { width: 19%; }
.pricing-service-table thead th:nth-child(4) { width: 14%; }
.pricing-service-table thead th:nth-child(5) { width: 8%; }
.pricing-service-table thead th:nth-child(6) { width: 26%; }

.pricing-service-table tbody:last-child tr:last-child > * {
  border-bottom: 0;
}

.pricing-service-table-group th {
  padding: 9px 10px;
  background: rgba(200, 138, 47, 0.1);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
}

.pricing-service-table-group span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.16);
  color: var(--gold-deep);
  font-size: 0.72rem;
}

.pricing-service-table-name strong,
.pricing-service-table-name > span {
  display: block;
}

.pricing-service-table-name > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.pricing-service-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
}

.pricing-service-table .pricing-service-fields {
  gap: 6px;
}

.pricing-table-input {
  display: block;
  min-width: 0;
}

.pricing-table-input-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-service-table .input-affix {
  min-width: 0;
  min-height: 44px;
}

.pricing-service-table .pricing-table-input .input-affix span {
  padding: 0 3px 0 9px;
  font-size: 0.88rem;
}

.pricing-service-table .pricing-table-input .input-affix input {
  appearance: textfield;
  padding-right: 8px;
  padding-left: 4px;
}

.pricing-service-table .pricing-table-input .input-affix input::-webkit-inner-spin-button,
.pricing-service-table .pricing-table-input .input-affix input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.pricing-service-table .pricing-derived-band {
  align-self: auto;
  padding: 0;
}

.pricing-service-table .pricing-derived-band strong {
  font-size: 1rem;
}

.pricing-service-table-empty {
  color: var(--muted);
  text-align: center !important;
}

.pricing-service-addons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pricing-service-addons legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  left: 0;
  top: 0;
}

.pricing-service-addons label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.pricing-service-addons label span {
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  word-break: normal;
}

.pricing-service-addons input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gold-deep);
}

/* Help text under these labels runs to different lengths, so the row is as tall
   as the wordiest field. Give the slack to the help text and keep every dollar
   box its own natural height, aligned along the bottom. */
.pricing-grid-compact .pricing-input,
.pricing-grid-allowances > label.pricing-input,
.pricing-service-fields .pricing-input {
  grid-template-rows: 1fr auto;
}

/* The auto row keeps the controls at the bottom, but its default stretch would
   make shorter controls grow to the height of the row. Keep each box compact. */
.pricing-grid-compact .input-affix,
.pricing-grid-allowances > label.pricing-input .input-affix,
.pricing-service-fields .input-affix {
  align-self: end;
}

/* The published band is worked out from the rate beside it, so it reads as a
   result rather than a box to fill in: same row height and baseline as the
   dollar inputs it sits next to, no border, no affix. */
.pricing-derived-band {
  display: grid;
  gap: 2px;
  margin: 0;
  align-self: end;
  padding: 9px 0 0;
}

.pricing-derived-band strong {
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

.pricing-derived-band span {
  font-size: 0.88rem;
  color: var(--muted, #5b6b7c);
  line-height: 1.35;
}

.pricing-service-adjustment-details {
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 9px;
  background: rgba(23, 50, 79, 0.025);
}

.pricing-service-adjustment-details summary {
  padding: 8px 10px;
  color: var(--navy);
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 800;
}

.pricing-service-adjustment-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  padding: 0 10px 10px;
}

.pricing-service-adjustment-toggles label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 700;
}

.pricing-service-adjustment-toggles input {
  margin: 0;
  accent-color: var(--gold-deep);
}

.pricing-service-waste-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  cursor: pointer;
}

.pricing-service-waste-toggle input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--gold-deep);
}

.pricing-service-waste-toggle > span {
  display: grid;
  gap: 1px;
  margin: 0;
  color: var(--navy);
  font-size: 0.74rem;
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
}

.pricing-service-waste-toggle strong {
  font-size: 0.76rem;
}

.pricing-service-waste-toggle small {
  color: var(--muted);
  font-size: 0.71rem;
}

.pricing-service-notice {
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing-service-notice {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(200, 138, 47, 0.25);
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.08);
}

#landing-pricing {
  min-width: 0;
  overflow-x: clip;
  scroll-margin-top: 86px;
}

.pricing-input {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.pricing-input > .pricing-label-row {
  margin: 0;
}

.pricing-input input,
.pricing-input textarea {
  border-color: rgba(23, 50, 79, 0.16);
  font-variant-numeric: tabular-nums;
}

.pricing-input textarea {
  min-height: 118px;
}

.input-affix {
  display: grid;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  background: white;
  overflow: hidden;
  transition: border-color .15s ease;
}

.has-prefix .input-affix {
  grid-template-columns: auto minmax(0, 1fr);
}

.has-suffix .input-affix {
  grid-template-columns: minmax(0, 1fr) auto;
}

.has-prefix.has-suffix .input-affix {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.input-affix:hover {
  border-color: rgba(23, 50, 79, 0.58);
}

.input-affix:focus-within,
.pricing-settings .input-affix:focus-within {
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
}

.input-affix span {
  padding: 0 11px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.input-affix input {
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.pricing-settings input[type="number"] {
  caret-color: transparent;
}

.pricing-settings .input-affix input:focus-visible {
  outline: none;
}

.pricing-service-fields .input-affix span {
  padding: 0 2px 0 7px;
  font-size: 0.82rem;
}

.pricing-service-fields .input-affix input {
  appearance: textfield;
  padding-right: 6px;
  padding-left: 2px;
  font-size: 0.88rem;
}

.pricing-service-fields .input-affix input::-webkit-inner-spin-button,
.pricing-service-fields .input-affix input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.input-affix input:hover,
.input-affix input:focus {
  border-color: transparent;
}

.pricing-details {
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 12px 30px rgba(23, 50, 79, 0.06);
  overflow: hidden;
}

.pricing-control-nest .pricing-details {
  border: 0;
  border-top: 1px solid rgba(23, 50, 79, 0.10);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pricing-control-nest .pricing-details:hover,
.pricing-control-nest .pricing-details[open] {
  background: transparent;
}

.pricing-details[open] {
  overflow: visible;
}

.pricing-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--navy);
  user-select: none;
}

.pricing-control-nest .pricing-details > summary {
  padding: 15px 2px;
}

.pricing-control-nest .pricing-details-body {
  padding: 0 2px 18px;
}

.pricing-details > summary::-webkit-details-marker {
  display: none;
}

.pricing-details > summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--gold-deep);
  font-size: 0.75rem;
  transition: transform .15s ease;
}

.pricing-details:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.pricing-details summary span {
  display: block;
  color: var(--navy);
  font-weight: 800;
}

.pricing-details summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.pricing-details-body {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
}

.formula-details .form-hint {
  margin: 0;
  line-height: 1.45;
}

.pricing-recipe-builder {
  gap: 10px;
}

.pricing-recipe-base,
.pricing-recipe-preview {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.045);
}

.pricing-recipe-preview code,
.formula-guide code {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 50, 79, 0.1);
  font-size: 0.74rem;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

.pricing-recipe-preview code {
  display: block;
  width: 100%;
}

.formula-editor textarea {
  min-height: 96px;
}

.formula-guide {
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 10px;
  background: rgba(200, 138, 47, 0.08);
  overflow: hidden;
}

.formula-guide > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  padding: 10px 12px;
  user-select: none;
}

.formula-guide > summary::-webkit-details-marker {
  display: none;
}

.formula-guide > summary::after {
  content: "▾";
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold-deep);
  font-size: 0.68rem;
  transition: transform .15s ease;
}

.formula-guide:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.formula-guide summary span {
  color: var(--navy);
  font-weight: 800;
}

.formula-guide summary small {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.formula-guide-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.formula-guide p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.formula-variable-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.formula-variable-list > div {
  display: grid;
  gap: 2px;
}

.formula-variable-list dt,
.formula-variable-list dd {
  margin: 0;
}

.formula-variable-list dd {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.formula-token-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.formula-token-grid-operators code {
  min-width: 34px;
  justify-content: center;
  font-weight: 800;
}

.pricing-recipe-base span,
.pricing-recipe-preview span {
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-recipe-base strong {
  color: var(--navy);
  line-height: 1.2;
}

.pricing-recipe-base small {
  color: var(--muted);
  line-height: 1.4;
}

.pricing-recipe-options {
  display: grid;
  gap: 9px;
}

.recipe-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.recipe-toggle:hover,
.recipe-toggle:focus-within {
  border-color: rgba(23, 50, 79, 0.28);
  background: white;
  box-shadow: 0 8px 18px rgba(23, 50, 79, 0.08);
}

.recipe-toggle input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}

.recipe-toggle span {
  display: grid;
  gap: 3px;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.recipe-toggle strong {
  color: var(--navy);
  font-size: 0.86rem;
  line-height: 1.25;
}

.recipe-toggle small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.pricing-recipe-preview {
  background: linear-gradient(135deg, rgba(23, 50, 79, 0.96), rgba(28, 73, 68, 0.94));
  color: white;
}

.pricing-recipe-preview span {
  color: rgba(232, 200, 150, 0.9);
}

.pricing-recipe-preview p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.pricing-plain-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-plain-steps li {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
}

.pricing-plain-steps strong {
  color: var(--navy);
  font-size: 0.9rem;
}

.pricing-plain-steps span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.pricing-change-review {
  margin-top: 22px;
  min-width: 0;
  scroll-margin-top: 88px;
}

.pricing-refresh-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 22px;
  margin: 18px 0 4px;
  padding: 16px 18px;
  border: 1px solid rgba(31, 107, 99, 0.32);
  border-radius: 14px;
  background: rgba(31, 107, 99, 0.08);
}

.pricing-refresh-status[hidden] {
  display: none;
}

.pricing-refresh-status[data-status="failed"],
.pricing-refresh-status[data-status="canceled"],
.pricing-refresh-status[data-status="paused"] {
  border-color: rgba(153, 82, 25, 0.34);
  background: rgba(153, 82, 25, 0.08);
}

.pricing-refresh-status__copy {
  display: grid;
  gap: 4px;
}

.pricing-refresh-status__dismiss {
  display: grid;
  place-items: center;
  align-self: start;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--navy);
  cursor: pointer;
}

.pricing-refresh-status__dismiss[hidden] {
  display: none;
}

.pricing-refresh-status__dismiss:hover {
  border-color: rgba(23, 50, 79, 0.28);
  background: rgba(255, 255, 255, 0.9);
}

.pricing-refresh-status__dismiss:focus-visible {
  outline: 3px solid rgba(31, 107, 99, 0.32);
  outline-offset: 2px;
}

.pricing-refresh-status__dismiss svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.pricing-refresh-status__copy > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pricing-refresh-status__copy > strong {
  color: var(--navy);
  font-size: 1.05rem;
}

.pricing-refresh-status__copy > p,
.pricing-refresh-status__progress {
  margin: 0;
  color: var(--muted);
}

.pricing-refresh-status__progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 700;
}

.pricing-refresh-status__progress[hidden] {
  display: none;
}

@media (min-width: 721px) {
  /* Keep this optional help inside the editor so it cannot widen the page. */
  .pricing-formula-help .roof-analysis-tooltip {
    right: 0;
    left: auto;
    transform: translateY(4px);
  }

  .pricing-formula-help:hover .roof-analysis-tooltip,
  .pricing-formula-help:focus-within .roof-analysis-tooltip {
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .pricing-formula-editor-heading {
    grid-template-columns: 1fr;
  }

  .pricing-formula-editor-heading .pricing-method-owner {
    justify-self: start;
  }

  .pricing-formula-editor-actions {
    width: 100%;
  }

  .pricing-formula-restore-group {
    width: 100%;
  }

  .pricing-formula-restore {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .pricing-refresh-status {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.pricing-change-review h3:focus-visible {
  outline: 3px solid rgba(31, 107, 99, 0.32);
  outline-offset: 5px;
  border-radius: 4px;
}

.pricing-change-review h4 {
  margin: 22px 0 10px;
}

.pricing-change-review > .table-wrap {
  min-width: 0;
  max-width: 100%;
}

.pricing-public-state-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}

.pricing-public-state {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.pricing-public-state--proposed {
  border-color: rgba(200, 138, 47, 0.48);
  background: rgba(255, 248, 235, 0.9);
}

.pricing-public-state > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pricing-public-state > strong {
  color: var(--navy);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pricing-public-state > small {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.pricing-change-table,
.pricing-sample-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.pricing-change-table th,
.pricing-change-table td,
.pricing-sample-table th,
.pricing-sample-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rule, rgba(23, 50, 79, 0.12));
  vertical-align: top;
}

.pricing-change-table thead th,
.pricing-sample-table thead th {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pricing-change-table tbody th,
.pricing-sample-table tbody th {
  font-weight: 600;
}

.pricing-change-formula {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.4;
}

.pricing-change-table tbody tr:last-child th,
.pricing-change-table tbody tr:last-child td,
.pricing-sample-table tbody tr:last-child th,
.pricing-sample-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.pricing-save-row--top {
  padding: 4px 2px 0;
}

.pricing-save-row--bottom {
  padding-top: 2px;
}

.pricing-save-row--section {
  padding: 12px 2px 16px;
}

.pricing-formula-editor .pricing-save-row--section {
  padding: 4px 0 0;
}

.pricing-save-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing-save-row button {
  min-width: 140px;
}

.pricing-save-warning {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 16px;
  color: var(--ink);
  background: #fffdf8;
  box-shadow: 0 24px 64px rgba(23, 50, 79, 0.24);
}

.pricing-save-warning::backdrop {
  background: rgba(8, 24, 41, 0.46);
}

.pricing-save-warning__body {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.pricing-save-warning h3,
.pricing-save-warning p {
  margin: 0;
}

.pricing-save-warning h3 {
  color: var(--navy);
  font-size: 1.2rem;
}

.pricing-save-warning p {
  color: var(--muted);
  line-height: 1.5;
}

.pricing-save-warning__safety {
  font-weight: 800;
  color: var(--navy) !important;
}

.pricing-save-warning__choice {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}

.pricing-save-warning__choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--navy);
}

.pricing-save-warning__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.pricing-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(23, 50, 79, 0.96), rgba(28, 73, 68, 0.94));
  color: white;
  box-shadow: 0 16px 34px rgba(23, 50, 79, 0.16);
}

.pricing-save-bar p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.pricing-save-bar button {
  flex: 0 0 auto;
  background: var(--gold);
  color: #231b11;
}

.pricing-save-bar button:hover {
  background: #d5973a;
}

.pricing-save-bar button.secondary {
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
  color: white;
}

.pricing-save-bar button.secondary:hover,
.pricing-save-bar button.secondary:focus-visible {
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.pricing-grid input {
  font-variant-numeric: tabular-nums;
}

.pricing-advanced {
  display: grid;
  gap: 14px;
}

.pricing-advanced > summary {
  list-style: none;
  width: fit-content;
  cursor: pointer;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-advanced > summary::-webkit-details-marker {
  display: none;
}

.pricing-advanced > summary::before {
  content: "▾";
  color: var(--gold-deep);
  font-size: 0.76rem;
  transition: transform .15s ease;
}

.pricing-advanced:not([open]) > summary::before {
  transform: rotate(-90deg);
}

.pricing-advanced-grid {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

.pricing-actions .form-hint {
  margin: 0;
}

/* Pricing Page Tabs & Whole-Home / GC Matrix Layout */
.pricing-main-tabs {
  margin-top: 12px;
  margin-bottom: 24px;
}

.pricing-main-tabs .settings-tab-list {
  display: flex;
  width: fit-content;
  max-width: 100%;
}

button.settings-tab {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.gc-tab-status-badge {
  margin-left: 8px;
  font-size: 0.76rem;
  padding: 2px 7px;
  vertical-align: middle;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .pricing-main-tabs .settings-tab-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .pricing-main-tabs button.settings-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 8px;
    font-size: 0.84rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .pricing-main-tabs .gc-tab-status-badge {
    margin-left: 0;
    margin-top: 2px;
  }
}

@media (max-width: 440px) {
  .pricing-main-tabs .settings-tab-list {
    grid-template-columns: 1fr;
  }
}

.pricing-tabpanel {
  display: block;
}

.pricing-tabpanel.is-hidden,
.pricing-tabpanel[hidden] {
  display: none !important;
}

.gc-category-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 12px;
}

.gc-category-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gc-category-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gc-pill {
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  background: rgba(23, 50, 79, 0.05);
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gc-pill:hover,
.gc-pill:focus-visible {
  background: rgba(23, 50, 79, 0.12);
  border-color: var(--navy);
}

.gc-pill.is-active,
.gc-pill[aria-pressed="true"] {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
}

.gc-trade-badge {
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--muted);
  background: rgba(23, 50, 79, 0.06);
}

.gc-category-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.85rem;
}

.gc-category-actions button {
  background: transparent;
  border: 0;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gc-category-actions button:hover,
.gc-category-actions button:focus-visible {
  color: var(--gold-deep);
}

/* GC Trade Accordions (Nested by default) */
details.gc-trade-accordion {
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

details.gc-trade-accordion[open] {
  border-color: rgba(23, 50, 79, 0.24);
  box-shadow: 0 8px 24px rgba(23, 50, 79, 0.07);
}

.gc-trade-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: rgba(255, 255, 255, 0.95);
  transition: background 0.15s ease;
}

.gc-trade-summary:hover,
.gc-trade-summary:focus-visible {
  background: rgba(246, 250, 252, 0.85);
}

.gc-trade-summary::-webkit-details-marker {
  display: none;
}

.gc-trade-summary-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.gc-trade-summary-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.gc-trade-summary-rates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}

.gc-summary-pill {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(23, 50, 79, 0.05);
  color: var(--navy);
}

.gc-summary-pill--band {
  background: rgba(200, 138, 47, 0.1);
  color: #8f5b00;
}

.gc-accordion-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-deep);
  white-space: nowrap;
}

.gc-chevron {
  display: inline-block;
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

details.gc-trade-accordion[open] .gc-chevron {
  transform: rotate(180deg);
}

.gc-trade-accordion-body {
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
  background: #ffffff;
}

.gc-money-pair-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.gc-matrix-container {
  margin: 18px 0;
  display: grid;
  gap: 10px;
}

.gc-matrix-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.gc-matrix-wrap {
  overflow-x: auto;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 12px;
  background: #ffffff;
}

.gc-matrix-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.gc-matrix-table th,
.gc-matrix-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  vertical-align: top;
}

.gc-matrix-corner {
  width: 180px;
  background: rgba(246, 250, 252, 0.9);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gc-matrix-col-header {
  background: rgba(246, 250, 252, 0.9);
  width: calc((100% - 180px) / 3);
}

.gc-tier-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy);
}

.gc-tier-desc {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
}

.gc-matrix-row-header {
  background: rgba(246, 250, 252, 0.5);
  border-right: 1px solid rgba(23, 50, 79, 0.08);
}

.gc-matrix-row-header strong {
  display: block;
  font-size: 0.95rem;
  color: var(--navy);
}

.gc-matrix-row-header small {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.gc-matrix-rate-row {
  background: rgba(200, 138, 47, 0.04);
}

.gc-matrix-cell {
  background: #ffffff;
}

.gc-matrix-cell .gc-money-pair-group {
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  gap: 6px;
}

.gc-matrix-cell .pricing-input {
  margin: 0;
}

.gc-matrix-cell .input-affix span {
  padding: 0 4px 0 8px;
}

.gc-matrix-cell .input-affix input {
  padding-left: 4px;
  padding-right: 8px;
}

.gc-matrix-cell .pricing-label-row {
  font-size: 0.78rem;
}

.gc-bands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.gc-band-card {
  padding: 12px 14px;
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  gap: 8px;
}

.gc-band-bucket-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
}

.gc-trade-specs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(23, 50, 79, 0.12);
}

.gc-approval-block {
  margin-top: 28px;
  margin-bottom: 56px;
  padding: 24px;
}

.gc-approval-fields {
  display: grid;
  gap: 20px;
  margin: 18px 0 24px;
}

.gc-approval-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  line-height: 1.45;
}

.gc-approval-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--navy);
  cursor: pointer;
}

.gc-signer-input {
  max-width: 480px;
}

.gc-signer-input input {
  margin-top: 6px;
  min-height: 44px;
}

.gc-approval-save-bar {
  margin-top: 24px;
}

#tab-panel-whole-home {
  padding-bottom: 80px;
}

.report-doc .report-doc__gc-projects {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Whole-Home Layout & Phone Simulator Styles */
.gc-pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.46fr);
  align-items: start;
  gap: 22px;
}

@media (min-width: 1121px) {
  .gc-pricing-secondary-column {
    position: sticky;
    top: 86px;
  }
}

@media (max-width: 1120px) {
  .gc-pricing-layout {
    grid-template-columns: 1fr;
  }
}

.gc-phone-mockup-frame {
  height: 780px;
}

.gc-phone-mockup-screen {
  background: #faf7f1;
}

.gc-sim-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  color: #fff;
  border-bottom: 2.5px solid var(--gold);
  padding: 8px 12px;
}

.gc-sim-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gc-sim-bar-name {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-sim-bar-call {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: #17324f;
  text-decoration: none;
  white-space: nowrap;
}

.gc-sim-section {
  padding: 14px 12px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.gc-sim-section:first-of-type {
  border-top: 0;
}

.gc-sim-eyebrow {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--gold);
  color: #17324f;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.gc-sim-heading {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}

.gc-sim-sub {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.gc-sim-home-photo-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 rgba(23, 50, 79, 0.6);
  margin-top: 6px;
}

.gc-sim-home-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.gc-sim-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.gc-sim-fact {
  padding: 3px 7px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 999px;
  background: #ffffff;
  color: var(--navy);
  font-size: 9.5px;
  font-weight: 700;
}

.gc-sim-card {
  padding: 10px 11px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(23, 50, 79, 0.04);
  margin-top: 8px;
}

.gc-sim-card--roof {
  border-color: rgba(200, 138, 47, 0.6);
}

.gc-sim-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200, 138, 47, 0.4);
}

.gc-sim-card-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--navy);
}

.gc-sim-card-price {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--navy);
  white-space: nowrap;
}

.gc-sim-card-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.gc-sim-aerial-wrap {
  margin-top: 6px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy);
}

.gc-sim-aerial-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.gc-sim-aerial-cap {
  display: block;
  padding: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gc-sim-card-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}

.gc-sim-looks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 8px 0 6px;
}

.gc-sim-look {
  display: grid;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  text-align: center;
}

.gc-sim-look img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gc-sim-look span {
  display: block;
  padding: 2px;
  font-size: 8px;
  font-weight: 700;
  color: var(--navy);
}

.gc-sim-tiers-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}

.gc-sim-tiers {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.gc-sim-tier-btn {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid rgba(23, 50, 79, 0.2);
  border-radius: 6px;
  background: #ffffff;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gc-sim-tier-btn:hover {
  border-color: var(--gold);
}

.gc-sim-tier-btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #17324f;
  font-weight: 900;
}

.gc-sim-book-card {
  margin-top: 8px;
  padding: 10px;
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  background: #ffffff;
}

.gc-sim-book-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}

.gc-sim-days {
  display: flex;
  gap: 4px;
}

.gc-sim-day {
  flex: 1;
  padding: 5px 2px;
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 6px;
  background: #ffffff;
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.gc-sim-day.is-selected {
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 900;
}

.gc-sim-windows {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.gc-sim-win {
  flex: 1;
  padding: 4px 2px;
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 6px;
  background: #ffffff;
  color: var(--navy);
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
}

.gc-sim-win.is-selected {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.gc-sim-book-btn {
  margin-top: 8px;
  padding: 7px;
  border-radius: 6px;
  background: var(--gold);
  color: #17324f;
  font-size: 10.5px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.gc-sim-mab {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 14px;
}

.gc-sim-mab-call,
.gc-sim-mab-text {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.gc-sim-mab-call {
  background: var(--gold);
  color: #17324f;
}

.gc-sim-mab-text {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

@media (max-width: 768px) {
  .gc-category-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .gc-bands-grid {
    grid-template-columns: 1fr;
  }
}

.guide-details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.guide-details > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.guide-details > summary::-webkit-details-marker {
  display: none;
}

.guide-details > summary::before {
  content: "▾";
  font-size: 0.75rem;
  color: var(--gold-deep);
  transition: transform .15s ease;
}

.guide-details:not([open]) > summary::before {
  transform: rotate(-90deg);
}

.guide-details .guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.guide-details .guide-step {
  background: rgba(23, 50, 79, 0.04);
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 12px;
  padding: 14px;
}

.guide-details .guide-step p {
  margin: 10px 0 0;
}

.flash-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  scroll-margin-top: 88px;
}

.flash {
  position: relative;
  border-radius: 14px;
  padding: 14px 16px;
  padding-right: 48px;
  font-weight: 600;
}

.flash[tabindex="-1"]:focus {
  outline: 3px solid rgba(31, 107, 99, 0.32);
  outline-offset: 4px;
}

.flash-success {
  background: rgba(37, 96, 59, 0.18);
  border: 1px solid rgba(37, 96, 59, 0.4);
  color: var(--ok);
}

.flash-warning {
  background: rgba(232, 200, 150, 0.24);
  border: 1px solid rgba(143, 91, 0, 0.38);
  color: var(--partial);
}

.flash-error {
  background: rgba(159, 43, 43, 0.15);
  border: 1px solid rgba(159, 43, 43, 0.35);
  color: var(--failed);
}

/* A setup account says so in one quiet line, not a boxed alert. */
.account-setup-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.account-setup-status strong {
  color: var(--navy);
  font-weight: 600;
}

.account-setup-status__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: calc((1.45em - 8px) / 2);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 138, 47, 0.18);
}

.account-readiness-alert {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  margin-bottom: 18px;
  padding: 12px 14px;
}

.account-readiness-alert strong,
.account-readiness-alert p {
  margin: 0;
}

.account-readiness-alert strong {
  line-height: 1.35;
}

.account-readiness-alert p {
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .account-readiness-alert {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 14px;
  }
}

.flash-dismiss {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  opacity: .6;
  color: inherit;
  padding: 4px 10px;
  border-radius: 8px;
}

.flash-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.badge-completed,
.badge-ok,
.badge-estimate-ok {
  background: rgba(37, 96, 59, 0.09);
  color: var(--ok);
  border-color: rgba(37, 96, 59, 0.22);
}

.badge-existing {
  background: transparent;
  color: var(--ok);
  border: 1.5px solid var(--ok);
  padding: 3.5px 8.5px;
}

.badge-partial,
.badge-queued,
.badge-new,
.badge-needs_follow_up,
.badge-called,
.badge-texted,
.badge-estimate-partial,
.badge-permit-lapsed {
  background: rgba(143, 91, 0, 0.09);
  color: var(--partial);
  border-color: rgba(143, 91, 0, 0.22);
}

.property-list-quick-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(143, 91, 0, 0.28);
  background: rgba(143, 91, 0, 0.08);
  color: var(--partial);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.filter-pill:hover {
  background: rgba(143, 91, 0, 0.16);
  border-color: rgba(143, 91, 0, 0.45);
  color: var(--partial);
}

.filter-pill.is-active,
.filter-pill[aria-current="true"] {
  background: var(--partial);
  color: #fff;
  border-color: var(--partial);
}

.badge-failed,
.badge-do_not_mail,
.badge-not_interested,
.badge-bad_number,
.badge-do_not_contact {
  background: rgba(159, 43, 43, 0.09);
  color: var(--failed);
  border-color: rgba(159, 43, 43, 0.22);
}

.badge-processing,
.badge-not_sent,
.badge-handled_elsewhere {
  background: rgba(23, 50, 79, 0.07);
  color: #17324f;
  border-color: rgba(23, 50, 79, 0.18);
}

.badge-sent,
.badge-interested,
.badge-quoted,
.badge-won {
  background: rgba(31, 95, 70, 0.09);
  color: var(--sent);
  border-color: rgba(31, 95, 70, 0.22);
}

.badge-roof_only {
  background: rgba(200, 138, 47, 0.10);
  color: #8a5a09;
  border-color: rgba(200, 138, 47, 0.24);
}

.material-mixed-signal {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 10px;
}

.material-sections-scroll {
  overflow-x: auto;
}

.material-sections-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.material-sections-table th,
.material-sections-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(15, 34, 62, 0.08);
  vertical-align: middle;
}

.material-sections-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.material-structure,
.material-confidence {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted);
}

.material-boundary {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: #8a5a09;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}

.path-text {
  word-break: break-word;
  color: var(--muted);
}

.subtle-panel {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(23, 50, 79, 0.04);
  border: 1px solid rgba(23, 50, 79, 0.08);
}

.subtle-panel p {
  margin: 8px 0 0;
}

.batch-test-panel {
  margin-top: 18px;
  margin-bottom: 22px;
  scroll-margin-top: 88px;
}

.batch-test-result:empty {
  display: none;
}

.batch-test-result .flash-stack {
  margin: 0;
  scroll-margin-top: 0;
}

.batch-test-panel__body {
  display: grid;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.batch-test-panel__controls {
  display: grid;
  gap: 8px;
}

.batch-test-panel__current {
  margin: 0;
}

.batch-test-panel__sample-switch {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.batch-test-panel__sample-switch label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
}

.batch-test-panel__sample-switch-label {
  color: var(--navy);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.batch-test-panel__sample-switch select {
  padding: 12px 14px;
  border-radius: 8px;
  background: white;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
}

.batch-test-panel__empty {
  margin: 0;
  padding: 22px 18px;
  border: 1px dashed rgba(23, 50, 79, 0.22);
  border-radius: 10px;
  background: rgba(23, 50, 79, 0.03);
  text-align: center;
  font-size: 0.95rem;
}

.batch-test-panel__jumps {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.batch-test-panel__jumps .inline-link {
  margin: 0 2px;
}

.batch-test-panel__jumps .inline-link.is-active {
  font-weight: 800;
  color: var(--navy);
}

.batch-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.batch-test-tile {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.10);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.78);
  align-content: start;
}

.batch-test-tile p {
  margin: 0;
}

.batch-test-qr-img {
  background: white;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(23, 50, 79, 0.10);
  justify-self: start;
}

.batch-test-mail-form,
.batch-test-proof-form {
  display: grid;
  gap: 10px;
}

.batch-test-mail-form label,
.batch-test-proof-form label {
  display: grid;
  gap: 6px;
}

.batch-test-mail-form input[type="text"],
.batch-test-proof-form input[type="text"] {
  padding: 10px 12px;
  border-radius: 8px;
  background: white;
  width: 100%;
}

.batch-test-mail-form .form-hint code {
  background: rgba(23, 50, 79, 0.08);
  padding: 1px 4px;
  border-radius: 4px;
}

.batch-test-proof-result {
  margin-top: 12px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.batch-test-proof-result--full {
  margin-top: 16px;
  width: 100%;
}

.batch-test-proof-result [hidden] {
  display: none !important;
}

.batch-test-proof-result__spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 12px;
  text-align: center;
}

.batch-test-proof-result__spinner-dot {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(23, 50, 79, 0.18);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: batch-test-proof-spin 0.9s linear infinite;
}

@keyframes batch-test-proof-spin {
  to { transform: rotate(360deg); }
}

.batch-test-proof-result__spinner-text {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.4;
}

.batch-test-proof-result__viewer {
  display: flex;
  flex-direction: column;
}

.batch-test-proof-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: rgba(23, 50, 79, 0.05);
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  font-size: 13px;
}

.batch-test-proof-result__actions button.inline-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  margin-left: auto;
}

.batch-test-proof-result__frame {
  width: 100%;
  height: 80vh;
  min-height: 600px;
  border: 0;
  background: white;
  display: block;
}

.batch-test-proof-result__error {
  margin: 0;
  padding: 16px;
}

@media (max-width: 900px) {
  .batch-test-proof-result__frame {
    height: 70vh;
    min-height: 480px;
  }
}

@media (max-width: 900px) {
  .batch-test-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .batch-test-panel__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mailing-workflow-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  border-color: rgba(31, 107, 99, 0.2);
  background:
    linear-gradient(135deg, rgba(31, 107, 99, 0.08), rgba(255, 255, 255, 0.74));
}

.mailing-workflow-panel > strong,
.mailing-workflow-panel > p,
.mailing-workflow-panel > summary,
.mailing-workflow-panel > form:not(.mailing-approval-form) {
  grid-column: 1 / -1;
}

.mailing-workflow-panel > .muted {
  margin-top: -4px;
}

.mailing-workflow-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding-right: 36px;
  position: relative;
  outline: none;
}

.mailing-workflow-summary::-webkit-details-marker {
  display: none;
}

.mailing-workflow-summary > strong {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.mailing-workflow-summary > .summary-meta {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-deep);
}

.mailing-workflow-summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--navy);
  border-bottom: 2.5px solid var(--navy);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

details[open] > .mailing-workflow-summary::after {
  transform: rotate(-135deg);
  top: 18px;
}

.mailing-workflow-panel--collapsible:not([open]) {
  grid-template-columns: minmax(0, 1fr);
}

.mailing-workflow-panel--collapsible:not([open]),
.campaign-lead-details:not([open]) {
  margin-top: 12px;
  padding: 10px 14px;
}

.mailing-workflow-panel--collapsible:not([open]) > .mailing-workflow-summary,
.campaign-lead-details:not([open]) > .mailing-workflow-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  min-height: 34px;
}

.mailing-workflow-panel--collapsible:not([open]) > .mailing-workflow-summary > strong,
.campaign-lead-details:not([open]) > .mailing-workflow-summary > strong {
  font-size: 1rem;
}

.mailing-workflow-panel--collapsible:not([open]) > .mailing-workflow-summary > .summary-meta,
.campaign-lead-details:not([open]) > .mailing-workflow-summary > .summary-meta {
  font-size: 0.84rem;
}

.mailing-workflow-summary:focus-visible {
  box-shadow: 0 0 0 2px rgba(31, 107, 99, 0.45);
  border-radius: 6px;
}

.mailing-workflow-panel--single {
  grid-template-columns: minmax(0, 1fr);
}

.mailing-workflow-panel--single .mailing-approval-form {
  max-width: 100%;
}

.lead-workflow-panel {
  border-color: rgba(200, 138, 47, 0.24);
  background:
    linear-gradient(135deg, rgba(200, 138, 47, 0.09), rgba(255, 255, 255, 0.74));
}

.campaign-lead-details {
  display: grid;
  gap: 12px;
  scroll-margin-top: 88px;
}

.campaign-lead-details__body {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.campaign-lead-details__body > .muted {
  margin-top: 0;
}

/* How recent the leads are. Reads as a fact, not as body copy, so it does not
   sit at the same weight as the "keep it somewhere safe" note under it. */
.campaign-lead-details__recent {
  margin: 0;
  font-weight: 600;
}

.lead-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
}

.lead-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 13px;
}

.lead-table th,
.lead-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  text-align: left;
  vertical-align: top;
}

.lead-table th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mailing-workflow-panel .mailing-approval-form {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-top: 0;
  padding: 14px 18px;
  border: 1px solid rgba(23, 50, 79, 0.08);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.72);
}

.mailing-approval-actions-split {
  display: grid;
  gap: 12px;
}

.mailing-approval-disclaimer {
  display: grid;
  gap: 6px;
}

.mailing-approval-disclaimer .mailing-office-copy-note {
  margin: 0;
  font-size: 0.84rem;
}

.mailing-submit-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.mailing-submit-column .actions-row {
  width: 100%;
  margin: 0;
}

.mailing-submit-column p.muted {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
}

@media (min-width: 768px) {
  .mailing-approval-actions-split {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.95fr);
    gap: 16px 24px;
    align-items: center;
  }

  .mailing-approval-actions-split .mailing-confirm-check {
    max-width: none;
    margin: 0;
  }

  .mailing-submit-column button {
    width: 100%;
    min-height: 44px;
    white-space: normal;
    line-height: 1.25;
    padding: 10px 16px;
    font-size: 0.96rem;
  }
}

.mailing-workflow-panel .mailing-date-row {
  margin-bottom: 2px;
}

.mailing-workflow-panel .checkbox-line {
  align-items: center;
}

.mailing-workflow-panel .actions-row {
  gap: 16px;
}

.mailing-workflow-panel .mailing-submit-row {
  align-items: flex-start;
}

.mailing-workflow-panel .form-hint {
  flex: 1 1 280px;
  margin: 8px 0 0;
  line-height: 1.35;
}

.mailing-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.35;
}

.mailing-confirm-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--navy);
}

.mailing-confirm-check span {
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
}

.mailing-confirmation-box {
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 12px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 8px;
  background: rgba(255, 248, 232, 0.72);
}

.mailing-confirmation-box p {
  margin: 0;
}

.mailing-confirmation-box label {
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 800;
}

.mailing-confirmation-box input {
  max-width: 180px;
}

.mailing-workflow-panel .mailing-confirmation-box {
  max-width: none;
  padding: 10px;
}

.warning-text {
  color: #9a5b00;
  font-weight: 800;
}

.proof-link {
  margin-top: 12px;
}

.batch-files-details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.batch-files-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 800;
  user-select: none;
}

.batch-files-details > summary::before {
  content: "▾";
  color: var(--gold-deep);
  font-size: 0.74rem;
  transition: transform .15s ease;
}

.batch-files-details:not([open]) > summary::before {
  transform: rotate(-90deg);
}

.campaign-context-details {
  margin-top: 16px;
}

.campaign-context-details[open] > .campaign-add-source-form {
  margin-top: 16px;
}

.campaign-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--muted);
  font-weight: 700;
}

.checkbox-line label,
.checkbox-line span {
  margin: 0;
  color: inherit;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.table-panel {
  padding: 0;
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(255, 253, 248, 0)) left center,
    linear-gradient(to left, var(--panel) 30%, rgba(255, 253, 248, 0)) right center,
    radial-gradient(farthest-side at 0% 50%, rgba(23, 50, 79, 0.18), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 50, 79, 0.18), transparent) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.property-table {
  width: 100%;
  border-collapse: collapse;
}

.property-table th,
.property-table td {
  padding: 18px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  vertical-align: top;
  text-align: left;
}

.property-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(23, 50, 79, 0.03);
}

.property-table .property-cell {
  min-width: 200px;
}

.property-link-row {
  margin-top: 10px;
}

.estimate-chip {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(200, 138, 47, 0.1);
  border: 1px solid rgba(200, 138, 47, 0.28);
}

.estimate-chip strong {
  color: var(--navy);
}

.estimate-chip span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.status-cell {
  min-width: 140px;
}

.mail-status-cell {
  min-width: 140px;
}

.notes-cell {
  min-width: 220px;
}

.asset-preview {
  display: grid;
  gap: 10px;
  text-decoration: none;
}

.asset-preview .inline-link {
  text-decoration: underline;
}

.thumb {
  width: 170px;
  height: 118px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(23, 50, 79, 0.03);
}

.postcard-thumb {
  width: 150px;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  background: #faf7f1;
}

.mail-form {
  display: grid;
  gap: 10px;
}

.mail-form button {
  width: fit-content;
  justify-self: start;
  padding: 10px 18px;
}

.form-hint {
  margin: 10px 0 0;
  font-size: 0.84rem;
}

.mail-form label span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}

.property-note {
  margin-top: 14px;
}

.outreach-history {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.outreach-entry {
  padding-top: 10px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.outreach-entry:first-child {
  padding-top: 0;
  border-top: none;
}

.outreach-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.outreach-entry p {
  margin: 8px 0 0;
}

.postcard-note p {
  margin: 8px 0 0;
}

.qr-preview {
  margin-top: 12px;
  justify-items: start;
}

.qr-thumb {
  width: 112px;
  height: 112px;
  object-fit: contain;
  padding: 10px;
  background: white;
}

.inline-link {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(23, 50, 79, 0.35);
}

.inline-link:hover {
  text-decoration-color: var(--navy);
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 8px;
  background: var(--navy);
  color: white;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.button-link:hover {
  background: #1f3f63;
  box-shadow: 0 10px 20px rgba(23, 50, 79, 0.16);
  transform: translateY(-1px);
}

/* Instant tap feedback for the standalone (home-screen) app, where no
   browser chrome shows a navigation is underway. */
.button-link.is-loading {
  position: relative;
  padding-right: 38px;
  pointer-events: none;
}

.button-link.is-loading::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: var(--gold);
  border-radius: 999px;
  transform: translateY(-50%);
  animation: sidebar-loading-spin 0.75s linear infinite;
}

.error-text {
  color: var(--failed);
  margin-top: 8px;
}

.empty-state {
  text-align: center;
  padding: 56px 24px;
}

.empty-state::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 20px;
}

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

button:focus-visible {
  outline-offset: 3px;
}

.brand:focus-visible,
.site-header a:focus-visible {
  outline-color: var(--gold);
  outline-offset: 4px;
}

@media (max-width: 1400px) {
  .operator-sidebar__user-name {
    display: none;
  }

  .operator-sidebar__account-btn {
    padding: 2px 6px 2px 2px;
    gap: 4px;
  }

  .operator-sidebar__link {
    padding: 0 clamp(4px, 0.45vw, 8px);
    font-size: clamp(0.72rem, 0.75vw, 0.78rem);
  }

  .operator-sidebar__nav {
    gap: clamp(1px, 0.25vw, 4px);
  }
}

@media (max-width: 1150px) {
  .operator-sidebar {
    padding: 0 clamp(8px, 1.2vw, 16px);
    gap: clamp(4px, 0.6vw, 8px);
    min-height: 64px;
    height: 64px;
  }

  .operator-sidebar__brand span {
    display: none;
  }

  .operator-sidebar__user-name {
    display: none;
  }

  .operator-sidebar__account-btn {
    padding: 2px 6px 2px 2px;
    gap: 3px;
    min-height: 36px;
    height: 36px;
  }

  .operator-account-dropdown {
    right: -4px;
    width: 240px;
  }

  .operator-sidebar__logo {
    max-height: clamp(32px, 3.4vw, 40px);
    width: auto;
  }

  .operator-sidebar__avatar {
    width: clamp(28px, 2.6vw, 32px);
    height: clamp(28px, 2.6vw, 32px);
    font-size: clamp(0.68rem, 0.7vw, 0.74rem);
  }

  .operator-sidebar__logout button {
    padding: 0 clamp(6px, 0.6vw, 10px);
    min-height: clamp(30px, 2.8vw, 36px);
    height: clamp(30px, 2.8vw, 36px);
    font-size: clamp(0.72rem, 0.74vw, 0.78rem);
  }

  .operator-sidebar__nav {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    gap: clamp(2px, 0.25vw, 4px);
    margin: 0 auto;
    overflow: visible;
    flex: 0 1 auto;
    min-width: 0;
  }

  .operator-sidebar__link {
    flex: 0 0 auto;
    min-height: clamp(32px, 3vw, 36px);
    height: clamp(32px, 3vw, 36px);
    padding: 0 clamp(4px, 0.4vw, 8px);
    font-size: clamp(0.70rem, 0.73vw, 0.76rem);
    gap: clamp(3px, 0.35vw, 5px);
    white-space: nowrap;
  }

  .operator-sidebar__link > span:first-child {
    width: clamp(12px, 1.3vw, 14px);
    height: clamp(12px, 1.3vw, 14px);
  }

  .operator-sidebar__link > span:first-child::before {
    width: clamp(12px, 1.3vw, 14px);
    height: clamp(12px, 1.3vw, 14px);
  }

  .flash-stack,
  .pricing-change-review,
  .batch-test-panel {
    scroll-margin-top: 120px;
  }

  .flash-stack {
    margin-top: 10px;
  }

  .home-grid,
  .meta-grid,
  .operator-focus,
  .operator-tool-grid,
  .campaign-settings-grid {
    grid-template-columns: 1fr;
  }

  .operator-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .postcard-status-grid--states,
  .postcard-response-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 4 metric cards form a perfect 2x2 grid */

  .campaign-command-strip,
  .leads-workspace {
    grid-template-columns: 1fr;
  }

  .lead-detail-panel {
    position: static;
  }

  .property-table-head {
    display: none;
  }

  .property-layout {
    grid-template-columns: 1fr;
  }

  .property-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .property-cell-home {
    grid-column: 1 / -1;
  }

  .property-cell-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .pricing-form-layout,
  .pricing-hero,
  .pricing-hero:has(.pricing-model-summary) {
    grid-template-columns: 1fr;
  }

  .workflow-band {
    grid-template-columns: 1fr;
  }

  .campaign-image-settings {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .guide-details .guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .operator-hero-split {
    grid-template-columns: 1fr;
  }

  .campaign-primary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mailing-workflow-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .page-shell,
  .header-inner {
    padding: 14px;
  }

  .operator-frame {
    align-content: start;
  }

  .operator-topbar {
    display: none;
  }

  .operator-nav-label--desktop {
    display: none;
  }

  .operator-nav-label--mobile {
    display: inline;
  }

  .header-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .header-actions {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 10px;
  }

  .site-header .muted {
    display: none;
  }

  .brand {
    font-size: 0.92rem;
    gap: 8px;
  }

  .brand-logo {
    height: 38px;
  }

  .section-heading,
  .page-heading,
  .postcard-stats-title,
  .campaign-heading {
    margin: 14px 0 10px;
    gap: 6px;
  }

  .section-heading h1::after,
  .page-heading h1::after,
  .campaign-heading h1::after {
    margin-top: 6px;
    margin-bottom: 0;
  }

  .section-heading .muted,
  .page-heading .muted,
  .campaign-heading > div > p.muted,
  .postcard-stats-title .muted {
    font-size: 0.86rem;
    line-height: 1.35;
    margin-top: 4px;
    margin-bottom: 0;
  }

  .section-heading,
  .card-topline,
  .title-row,
  .property-card-header,
  .property-title-row,
  .property-list-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .campaign-status-summary,
  .campaign-list-tray .campaign-status-summary {
    justify-items: start;
    max-width: 100%;
    text-align: left;
  }

  .campaign-list-tray .card-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-insight-grid {
    grid-template-columns: 1fr;
  }

  .address-lookup-form,
  .campaign-list-tools,
  .campaign-search-form,
  .address-result {
    grid-template-columns: 1fr;
  }

  .campaign-hub-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .campaign-hub-actions {
    width: 100%;
  }

  .campaign-hub-actions .campaign-new-link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .leads-header-card,
  .leads-page__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 0 16px;
    gap: 0;
  }

  .leads-header-card__inner,
  .leads-page__header > div,
  .leads-page__header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
    flex-wrap: nowrap;
  }

  .leads-header-card__info,
  .leads-page__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }

  .leads-header-card .eyebrow {
    margin: 0 0 6px;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
  }

  .leads-page__header .title-row,
  .leads-page__title-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    width: 100%;
    gap: 8px;
  }

  .leads-header-card__info h1,
  .leads-page__title-row h1,
  .leads-page__header h1 {
    font-size: 1.55rem;
    line-height: 1.15;
    margin: 0;
  }

  .leads-header-card__info h1::after,
  .leads-page__title-row h1::after,
  .leads-page__header h1::after {
    margin-top: 4px;
    margin-bottom: 0;
    width: 30px;
    height: 3px;
  }

  .leads-header-card__actions {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0;
  }

  .leads-add-btn {
    margin-left: 0 !important;
    flex-shrink: 0;
    align-self: flex-start;
    padding: 6px 14px;
    font-size: 0.82rem;
    min-height: 34px;
    border-radius: 8px !important;
    white-space: nowrap;
  }

  .leads-header-card__info .muted,
  .leads-page__count {
    margin: 4px 0 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--muted);
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The tab tiles take the first toolbar row; the campaign and download
     popovers share the second as two half-width buttons. */
  .leads-toolbar {
    gap: 8px;
  }

  .leads-toolbar__tools {
    flex: 1 1 100%;
    gap: 8px;
  }

  .leads-campaign-filter {
    flex: 1 1 100%;
    width: 100%;
  }

  .retargeting-export {
    display: none !important;
  }

  .leads-campaign-multiselect {
    width: 100%;
  }

  .leads-campaign-multiselect summary {
    width: 100%;
    font-size: 0.84rem;
    padding: 0 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Anchored left here: the campaign control is the row's left half, so a
     menu wider than it has to open toward the page's right, not off-screen. */
  .leads-campaign-multiselect__menu {
    left: 0;
    right: auto;
    width: min(460px, calc(100vw - 24px));
    max-width: none;
  }

  .retargeting-export > summary.retargeting-export__title {
    width: 100%;
    justify-content: center;
    font-size: 0.84rem;
    padding: 0 8px;
    white-space: nowrap;
  }

  /* One row of tiles, like the counts above them. Stacked full-width rows put
     four taps and a screen and a half of scrolling between the roofer and his
     lead list - and the 5pm reminder text drops him straight here. */
  .leads-tabs__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: stretch;
    flex: 1 1 100%;
    gap: 4px;
    padding: 4px;
  }

  .leads-tab {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px 2px;
    text-align: center;
    /* "Needs a note" is the longest label and it has to stay on one line down
       to a 360px handset, or that tile grows taller than the other three and
       the row stops reading as one control. */
    font-size: 0.66rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
  }

  .leads-tab strong {
    min-width: 0;
    padding: 1px 7px;
    font-size: 0.72rem;
  }

  .canvassing-header {
    flex-direction: column;
    padding: 18px;
  }

  .canvassing-workspace {
    grid-template-columns: 1fr;
  }

  .canvassing-builder,
  .canvassing-ready {
    padding: 16px;
  }

  .canvassing-campaign-tools,
  .canvassing-route-settings,
  .canvassing-ready__body {
    grid-template-columns: 1fr;
  }

  .canvassing-campaign-actions button {
    flex: 1 1 0;
  }

  .canvassing-activity__options {
    grid-template-columns: 1fr;
  }

  .canvassing-activity label > span {
    min-height: 54px;
    text-align: left;
  }

  .canvassing-preview,
  .canvassing-state {
    min-height: 420px;
  }

  .canvassing-state {
    padding: 30px 20px;
  }

  .canvassing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .canvassing-text-card {
    grid-template-columns: 1fr;
  }

  .canvassing-text-card button {
    width: 100%;
  }

  .canvassing-text-card__actions,
  .canvassing-text-card__actions a,
  .canvassing-text-card__actions form {
    width: 100%;
  }

  .canvassing-text-card__actions {
    justify-content: stretch;
  }

  .canvassing-text-form {
    grid-template-columns: 1fr;
  }

  .canvassing-ready__header {
    flex-direction: column;
  }

  .lead-card__body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lead-card__form-row {
    /* Safari date controls otherwise keep their intrinsic width and push the
       second track through the right edge of a lead card. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-card__form-row > select {
    grid-column: 1 / -1;
  }

  .qr-legal-note__cols {
    grid-template-columns: 1fr;
  }

  .campaign-list-tools {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 14px;
    box-sizing: border-box;
  }

  .campaign-list-tools-heading {
    width: 100%;
    padding-right: 100px;
    box-sizing: border-box;
  }

  .campaign-search-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .campaign-search-actions {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
  }

  .campaign-search-actions button {
    width: auto;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.92rem;
    border-radius: 8px;
  }

  .address-result-meta {
    justify-self: start;
  }

  .campaign-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .campaign-card-actions {
    justify-content: flex-start;
  }

  .property-header-links {
    justify-content: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .campaign-new__sources,
  .campaign-new__source-panel--retargeting,
  .campaign-new__name-grid,
  .campaign-new__storm-grid,
  .campaign-new__more-options-body {
    grid-template-columns: 1fr;
  }

  .address-source.campaign-new__sources--contractor {
    grid-template-columns: 1fr;
  }

  .campaign-new__step,
  .campaign-new__selection {
    padding: 18px;
  }

  .campaign-new__audience-limit,
  .campaign-new__name-grid {
    width: 100%;
    max-width: none;
  }

  .campaign-new__audience-limit input {
    min-height: 44px;
  }

  .campaign-preflight__heading {
    align-items: start;
    flex-direction: column;
    gap: 6px;
  }

  .campaign-preflight__heading > p {
    max-width: none;
    text-align: left;
  }

  .campaign-preflight__grid {
    grid-template-columns: 1fr;
  }

  .campaign-add-source-form > .actions-row button {
    width: 100%;
    justify-content: center;
  }

  .address-source {
    grid-template-columns: 1fr;
  }

  .cleanup-tier-field {
    grid-template-columns: 1fr;
  }

  .summary-grid,
  .campaign-primary-stats,
  .operator-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-service-adjustment-toggles {
    grid-template-columns: 1fr;
  }

  .fact-grid,
  .property-asset-grid {
    grid-template-columns: 1fr;
  }

  .pricing-hero,
  .pricing-fieldset,
  .pricing-save-bar {
    padding: 18px;
  }

  .pricing-control-nest {
    padding: 12px;
  }

  .pricing-control-nest .pricing-fieldset {
    padding: 16px 0;
  }

  .pricing-subgrid,
  .pricing-save-bar {
    grid-template-columns: 1fr;
  }

  .pricing-save-bar {
    display: grid;
    align-items: start;
  }

  .pricing-save-row {
    align-items: stretch;
  }

  .pricing-save-row p {
    flex: 1 1 auto;
    align-self: center;
  }

  .pricing-save-bar button {
    width: 100%;
  }

  .pricing-save-row button {
    min-height: 48px;
  }

  .pricing-save-row--section button {
    width: 100%;
  }

  .pricing-save-warning__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pricing-model-summary {
    padding: 16px;
  }

  .pricing-public-state-comparison {
    grid-template-columns: 1fr;
  }

  .pricing-change-review > .table-wrap {
    overflow: visible;
  }

  .pricing-change-table,
  .pricing-sample-table,
  .pricing-change-table tbody,
  .pricing-sample-table tbody,
  .pricing-change-table tr,
  .pricing-sample-table tr,
  .pricing-change-table th,
  .pricing-sample-table th,
  .pricing-change-table td,
  .pricing-sample-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .pricing-change-table,
  .pricing-sample-table {
    display: grid;
    gap: 10px;
  }

  .pricing-change-table thead,
  .pricing-sample-table thead {
    display: none;
  }

  .pricing-change-table tr,
  .pricing-sample-table tr {
    padding: 13px;
    border: 1px solid rgba(23, 50, 79, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
  }

  .pricing-change-table tbody th,
  .pricing-sample-table tbody th {
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(23, 50, 79, 0.1);
  }

  .pricing-change-table td,
  .pricing-sample-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 9px 0 0;
    border-bottom: 0;
    text-align: right;
  }

  .pricing-change-table td::before,
  .pricing-sample-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
  }

  .pricing-details > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .pricing-details > summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .pricing-details summary small {
    grid-column: 1;
  }

  .thumb {
    width: 140px;
    height: 98px;
  }

  .thumb.property-thumb {
    width: 100%;
    height: 180px;
  }

  .report-panel .thumb.property-thumb {
    height: auto;
  }
}

@media (max-width: 640px) {
  .page-shell {
    padding: 12px 10px 28px;
  }

  .pricing-service-table {
    min-width: 980px;
  }

  .pricing-service-table-scroll-hint {
    display: block;
  }

  .pricing-service-guidance {
    padding: 9px 10px;
  }

  .pricing-conditional-rule {
    padding: 13px;
  }

  .pricing-conditional-basis {
    max-width: none;
  }

  .pricing-conditional-target-grid {
    grid-template-columns: 1fr;
  }

  .pricing-conditional-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pricing-conditional-actions button {
    width: 100%;
  }

  .pricing-conditional-sentence {
    padding: 12px;
  }

  .pricing-conditional-discount-cap {
    display: grid;
    align-items: start;
  }

  .pricing-conditional-cap-input {
    width: 100%;
  }

  .pricing-conditional-discount-cap > .pricing-help {
    margin: -2px 0 0;
  }

  .pricing-conditional-inline-field input {
    width: 92px;
  }

  .pricing-conditional-inline-field--rate input {
    width: 72px;
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    padding: 9px 10px 10px;
  }

  .brand {
    font-size: 0.82rem;
    line-height: 1;
  }

  .brand-logo {
    height: 34px;
  }

  .operator-hero,
  .operator-drawer,
  .campaign-settings-drawer {
    padding: 18px 16px;
    border-radius: 14px;
    box-shadow: none;
  }

  .operator-hero-heading,
  .operator-drawer > summary,
  .campaign-settings-drawer > summary {
    align-items: flex-start;
  }

  .operator-hero-heading {
    flex-direction: column;
  }

  .property-thumb-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }

  .thumb-cell-label {
    flex-wrap: wrap;
    letter-spacing: 0;
    line-height: 1.25;
  }

  .next-action-card,
  .settings-block {
    padding: 16px;
  }

  .property-stack {
    gap: 14px;
  }

  .property-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .property-pagination-actions {
    width: 100%;
    justify-content: space-between;
  }

  .property-card {
    gap: 14px;
    padding: 16px 14px;
    border-radius: 14px;
    box-shadow: none;
  }

  .campaign-intel-preview {
    height: 118px;
  }

  .campaign-list-tray .campaign-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .property-cell-home {
    grid-template-columns: 1fr;
  }

  .property-cell-home .property-intel-visual,
  .property-cell-home .property-intel-visual img,
  .property-cell-home .property-intel-placeholder {
    min-height: min(46vw, 180px);
    height: min(46vw, 180px);
  }

  .property-collapse > summary {
    margin-bottom: 8px;
  }

  .property-layout {
    gap: 20px;
  }

  .property-card .property-section {
    gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .property-card .eyebrow {
    margin-bottom: 0;
  }

  .property-card .section-kicker {
    margin-bottom: 6px;
  }

  .property-card .fact-grid {
    gap: 0;
  }

  .property-card .fact-card {
    gap: 4px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(23, 50, 79, 0.1);
    border-radius: 0;
    background: transparent;
  }

  .property-card .fact-card:last-child {
    border-bottom: 0;
  }

  .property-card .fact-value {
    line-height: 1.25;
  }

  .property-card .subtle-panel {
    margin-top: 6px;
    padding: 14px 0;
    border-width: 1px 0;
    border-radius: 0;
    background: transparent;
  }

  .property-card .compact-link-list {
    gap: 6px 14px;
  }

  .property-card .asset-card {
    gap: 8px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(23, 50, 79, 0.1);
    border-radius: 0;
    background: transparent;
  }

  .property-card .asset-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .property-card .asset-preview {
    gap: 8px;
  }

  .property-card .thumb.property-thumb {
    height: min(54vw, 220px);
    border-radius: 10px;
  }

  .property-card .mail-form button {
    width: 100%;
  }
}

/* ===== House Report — premium layout ===== */

.report-head {
  margin-top: 16px;
}

.report-estimate-panel {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 50, 79, 0.18);
  box-shadow: 0 24px 48px rgba(23, 50, 79, 0.14);
}

.report-estimate-hero {
  padding: 32px 36px;
  border-radius: 17px;
  gap: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(200, 138, 47, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(23, 50, 79, 0.99), rgba(14, 40, 70, 0.98));
}

.report-estimate-hero .estimate-label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: rgba(232, 200, 150, 0.92);
}

.estimate-hero-figure {
  display: grid;
  gap: 6px;
}

.estimate-hero-figure strong {
  font-size: clamp(2.3rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.98;
}

.estimate-midpoint {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.report-estimate-hero .estimate-summary {
  margin: 2px 0 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.estimate-rationale {
  margin: 0;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 72ch;
}

.estimate-caveat {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.5;
}

.trust-row {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.trust-row-kicker {
  color: rgba(232, 200, 150, 0.85);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.trust-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trust-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.trust-chip-label {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trust-chip-value {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.98);
}

.trust-meta {
  margin: 0;
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-meta-row {
  display: grid;
  grid-template-columns: minmax(140px, 170px) 1fr;
  gap: 14px;
  align-items: baseline;
}

.trust-meta-row dt {
  margin: 0;
  color: rgba(232, 200, 150, 0.85);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trust-meta-row dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.45;
}

.report-imagery-panel .property-asset-grid {
  gap: 16px;
}

.report-before-quote-panel {
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(200, 138, 47, 0.08), rgba(255, 253, 248, 0.96) 50%),
    var(--panel);
}

.report-before-quote-panel .fact-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.report-before-quote-panel .report-focus-grid .fact-card {
  border: 1px solid rgba(200, 138, 47, 0.22);
  background: rgba(255, 255, 255, 0.88);
}

.report-before-quote-panel .flag-list {
  margin-top: 4px;
}

.report-roof-panel {
  display: grid;
  gap: 22px;
}

.roof-subsection {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(23, 50, 79, 0.08);
}

.roof-subsection:first-of-type {
  padding-top: 0;
  border-top: none;
}

.roof-subsection .section-kicker {
  color: var(--gold-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.subsection-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.subsection-head .section-kicker {
  margin-bottom: 0;
}

.fact-confidence {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(200, 138, 47, 0.14);
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

.subsection-confidence {
  margin-left: 0;
}

.report-source-panel {
  background: rgba(23, 50, 79, 0.04);
  border: 1px dashed rgba(23, 50, 79, 0.18);
  box-shadow: none;
  color: var(--muted);
}

.report-source-panel h2 {
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-source-panel .fact-card {
  background: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   Property report — disclosure ("How we got this number") inside the
   navy estimate hero. Pushes confidence chips + sourcing DL below the
   headline figure so they read as supporting data, not competing with
   the price.
   ============================================================ */
.trust-details {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 14px;
}

.trust-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  user-select: none;
  outline-offset: 4px;
}

.trust-details > summary::-webkit-details-marker {
  display: none;
}

.trust-summary-label {
  color: rgba(232, 200, 150, 0.92);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trust-summary-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.trust-summary-hint::after {
  content: " ▾";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.18s ease;
}

.trust-details[open] .trust-summary-hint::after {
  transform: rotate(180deg);
}

.trust-details[open] .trust-summary-hint {
  color: rgba(255, 255, 255, 0.7);
}

.trust-details-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.trust-details-body .trust-row,
.trust-details-body .trust-meta {
  border-top: none;
  padding-top: 0;
}

/* ============================================================
   Property report — "What we noticed" panel.
   The visible-condition findings now have their own calm panel
   placed before the on-site checklist and roof-detail grids,
   instead of being buried as a Roof Details subsection.
   ============================================================ */
.report-condition-panel {
  border: 1px solid rgba(23, 50, 79, 0.15);
  background:
    linear-gradient(135deg, rgba(23, 50, 79, 0.05), rgba(255, 253, 248, 0.96) 55%),
    var(--panel);
}

.report-condition-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.report-condition-head h2 {
  margin: 0;
}

.report-condition-panel .condition-bullets {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  line-height: 1.55;
}

/* ============================================================
   Property report — "Source data" disclosure inside Roof Details.
   The aerial-measurement raw fields (plane count, average pitch in
   degrees, image date) are technical sourcing details. Tucked into
   a collapsed disclosure so they don't crowd the homeowner-facing
   measurements above.
   ============================================================ */
.roof-subsection--source > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  user-select: none;
}

.roof-subsection--source > summary::-webkit-details-marker {
  display: none;
}

.roof-subsection--source > summary .section-kicker {
  margin-bottom: 0;
}

.roof-subsection--source > summary .trust-summary-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.roof-subsection--source > summary .trust-summary-hint::after {
  content: " ▾";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.18s ease;
}

.roof-subsection--source[open] > summary .trust-summary-hint::after {
  transform: rotate(180deg);
}

.roof-subsection--source > .fact-grid {
  margin-top: 12px;
}

.report-source-panel .report-section-block + .report-section-block {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .report-estimate-hero {
    padding: 24px 22px;
  }

  .trust-meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* =====================================================================
   Property report — redesigned document layout (.report-doc namespace).
   Scoped under a single wrapper so existing dashboard rules are untouched.
   Goal: a calm, scannable, print-ready one-pager. Quote blockers and the
   current-roof planning price come first; the full option menu and evidence
   follow. Section panels alternate white and cream with thin gold rules.
   ===================================================================== */

.report-doc {
  --rd-navy: #0d2140;
  --rd-navy-deep: #08172d;
  --rd-gold: #e8a838;
  --rd-gold-bright: #f4b948;
  --rd-cream: #faf7f1;
  --rd-paper: #ffffff;
  --rd-ink: #1e1e1e;
  --rd-ink-soft: #4a4a4a;
  --rd-mute: #526070;
  --rd-line: rgba(13, 33, 64, 0.10);
  --rd-line-soft: rgba(13, 33, 64, 0.05);
  --rd-rule-gold: rgba(232, 168, 56, 0.55);
  --rd-display-stack: "Archivo Black", "Inter", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rd-body-stack: "Inter", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  color: var(--rd-ink);
  font-family: var(--rd-body-stack);
}

.report-doc * { box-sizing: border-box; }

/* ---------- Document header (back link + title + status pills) ---------- */

.report-doc__head {
  display: grid;
  gap: 6px;
  padding: 0 2px 14px;
}

.report-doc__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rd-mute);
  text-decoration: none;
}

.report-doc__back:hover { color: var(--rd-navy); }
.report-doc__back > span:first-child { font-size: 1rem; line-height: 1; }

.report-doc__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.report-doc__title {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--navy);
}

.report-doc__title::after { display: none; } /* suppress global gold underline */

.report-doc__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.report-doc__head-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin-top: 6px;
}

.report-doc__head-links .report-doc__head-link { margin-top: 0; }

.report-doc__head-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--rd-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 33, 64, 0.18);
  padding-bottom: 1px;
  white-space: nowrap;
}

.report-doc__head-link:hover {
  color: #8a5d18;
  border-bottom-color: var(--rd-gold);
}

.report-doc__head-link > span {
  color: var(--rd-gold);
  font-weight: 700;
}

/* ---------- Homeowner status (under the address) ---------- */

.report-doc__homeowner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 12px 18px;
  background: var(--rd-paper);
  border: 1px solid var(--rd-line);
  border-radius: 12px;
}

.report-doc__homeowner.has-lead {
  border-color: var(--rd-rule-gold);
  box-shadow: inset 4px 0 0 var(--rd-gold);
}

.report-doc__homeowner-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.report-doc__homeowner-label {
  color: var(--rd-mute);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-doc__homeowner-value {
  color: var(--rd-navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-doc__homeowner-value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rd-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.report-doc__homeowner-value.is-muted {
  color: var(--rd-mute);
  font-weight: 500;
}

.report-doc__homeowner-value.is-attention {
  padding: 1px 8px;
  border-radius: 999px;
  background: #fbe6bd;
  color: #5c3a00;
}

/* ---------- Homeowner status (under the address) ---------- */

.report-doc__homeowner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 12px 18px;
  background: var(--rd-paper);
  border: 1px solid var(--rd-line);
  border-radius: 12px;
}

.report-doc__homeowner.has-lead {
  border-color: var(--rd-rule-gold);
  box-shadow: inset 4px 0 0 var(--rd-gold);
}

.report-doc__homeowner-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.report-doc__homeowner-label {
  color: var(--rd-mute);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-doc__homeowner-value {
  color: var(--rd-navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-doc__homeowner-value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rd-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.report-doc__homeowner-value.is-muted {
  color: var(--rd-mute);
  font-weight: 500;
}

.report-doc__homeowner-value.is-attention {
  padding: 1px 8px;
  border-radius: 999px;
  background: #fbe6bd;
  color: #5c3a00;
}

/* ---------- Before-you-quote summary ---------- */

.report-doc__quote-summary {
  display: grid;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  background: var(--rd-paper);
}

.report-doc__quote-summary.is-ready {
  border-color: var(--rd-line);
}

.report-doc__quote-summary.is-failed {
  border-color: var(--failed);
}

.report-doc__quote-summary-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.report-doc__quote-kicker,
.report-doc__quote-summary-head h2,
.report-doc__quote-summary-head p {
  margin: 0;
}

.report-doc__quote-kicker {
  color: #8a5d18;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.report-doc__quote-summary-head h2 {
  margin-top: 0;
  color: var(--rd-navy);
  font-family: var(--rd-body-stack);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.report-doc__quote-summary-head > div > p:last-child {
  max-width: 68ch;
  margin-top: 7px;
  color: var(--rd-mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.report-doc__quote-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--rd-navy);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-doc__quote-summary.is-review .report-doc__quote-status {
  background: #9a6814;
}

.report-doc__quote-summary.is-failed .report-doc__quote-status {
  background: #8f3024;
}

.report-doc__quote-summary-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: start;
}

.report-doc__quote-price {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 0 28px 0 0;
  border-right: 1px solid var(--rd-line);
  color: var(--rd-mute);
}

.report-doc__quote-price > span:first-child {
  color: var(--rd-mute);
  font-size: 0.85rem;
  font-weight: 500;
}

.report-doc__quote-material {
  color: var(--rd-navy);
  font-size: 1.25rem;
  line-height: 1.3;
}

.report-doc__quote-path {
  margin-top: 12px;
  color: var(--rd-ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.report-doc__quote-figure {
  color: var(--rd-navy);
  font-family: var(--rd-body-stack);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.report-doc__quote-price > small {
  font-size: 0.8rem;
  line-height: 1.45;
}

.report-doc__quote-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rd-line);
}

.report-doc__quote-facts div {
  min-width: 0;
}

.report-doc__quote-facts dt,
.report-doc__quote-facts dd {
  margin: 0;
}

.report-doc__quote-facts dt {
  color: var(--rd-mute);
  font-size: 0.8rem;
  font-weight: 500;
}

.report-doc__quote-facts dd {
  margin-top: 4px;
  color: var(--rd-ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.report-doc__quote-checks {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.report-doc__quote-check,
.report-doc__quote-ready {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.report-doc__quote-check strong,
.report-doc__quote-ready strong {
  color: var(--rd-navy);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.report-doc__quote-check span {
  color: var(--rd-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 70ch;
}

/* The "nobody has read this roof's photos" notice sits above every other
   finding, so it carries a solid navy edge rather than the shared gold hairline
   — a weight difference, not a hue difference, so it separates for any eye. */
.report-doc__quote-check--no-photo-check {
  border-color: var(--rd-navy);
  background: #fff;
}

.report-doc__quote-check--no-photo-check .roof-analysis-action {
  margin-top: 6px;
}

.report-doc__quote-ready {
  align-content: center;
  border-color: rgba(13, 33, 64, 0.13);
}

.report-doc__quote-ready ul {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--rd-ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ---------- Hero (price block) ---------- */

.report-doc__hero {
  position: relative;
  padding: 30px 34px 26px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.94);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(232, 168, 56, 0.22), transparent 55%),
    linear-gradient(135deg, var(--rd-navy) 0%, var(--rd-navy-deep) 100%);
  box-shadow: 0 22px 44px rgba(8, 23, 45, 0.22);
  overflow: hidden;
}

.report-doc__hero-eyebrow {
  margin: 0 0 6px;
  color: var(--rd-gold-bright);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.report-doc__hero-figure {
  margin: 0;
  font-family: var(--rd-display-stack);
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.report-doc__hero-support {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

.report-doc__hero-range {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

.report-doc__hero-caveats {
  margin: 18px 0 0;
  display: grid;
  gap: 6px;
  max-width: 72ch;
}

.report-doc__hero-caveats p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.report-doc__hero-caveats p.is-rationale {
  color: rgba(255, 255, 255, 0.85);
}

/* Trust disclosure inside hero */

.report-doc__trust {
  margin: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 14px;
}

.report-doc__trust > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  user-select: none;
}

.report-doc__trust > summary::-webkit-details-marker { display: none; }

.report-doc__trust-label {
  color: var(--rd-gold-bright);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.report-doc__trust-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 500;
}

.report-doc__trust-hint::after {
  content: " ▾";
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.18s ease;
}

.report-doc__trust[open] > summary .report-doc__trust-hint::after {
  transform: rotate(180deg);
}

.report-doc__trust-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.report-doc__trust-row {
  display: grid;
  gap: 10px;
}

.report-doc__trust-kicker {
  margin: 0;
  color: var(--rd-gold-bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.report-doc__chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-doc__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
}

.report-doc__chip span:first-child {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-doc__chip span:last-child {
  color: rgba(255, 255, 255, 0.97);
  font-variant-numeric: tabular-nums;
}

.report-doc__trust-meta {
  margin: 0;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.report-doc__trust-meta > div {
  display: grid;
  grid-template-columns: minmax(140px, 170px) 1fr;
  gap: 14px;
  align-items: baseline;
}

.report-doc__trust-meta dt {
  margin: 0;
  color: var(--rd-gold-bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-doc__trust-meta dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ---------- Service pricing menu inside the hero ----------
   Mirrors the homeowner page's nine-row menu: light group cards, gold wash
   for address-priced rows, gold inset bar for the premium path, and a navy
   row with gold text for the current-system match. Emphasis stays on the
   gold/navy axis (never a blue-vs-purple hue shift). */

.report-doc__comparison {
  color: var(--rd-ink);
}

.report-doc__menu-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
}

.report-doc__comparison-title {
  margin: 0;
  color: var(--rd-navy);
  font: 700 1.4rem / 1.3 var(--rd-body-stack);
}

.report-doc__comparison-status {
  margin: 8px 0 0;
  color: var(--rd-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.report-doc__menu-lede {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rd-ink-soft);
}

.report-doc__menu-count {
  min-width: 104px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.report-doc__menu-count strong {
  display: block;
  color: var(--rd-gold-bright);
  font-family: var(--rd-display-stack);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.report-doc__hybrid-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  gap: 24px;
  align-items: center;
  margin: 0 0 18px;
  padding: 17px 18px;
  border: 1px solid rgba(232, 168, 56, 0.7);
  border-radius: 12px;
  background: var(--rd-navy);
}

.report-doc__hybrid-kicker,
.report-doc__hybrid-scope,
.report-doc__hybrid-price span,
.report-doc__hybrid-price small {
  display: block;
}

.report-doc__hybrid-kicker {
  margin-bottom: 6px;
  color: var(--rd-gold-bright);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.report-doc__hybrid-title {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.3;
}

.report-doc__hybrid-scope {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  font-weight: 400;
}

.report-doc__hybrid-price {
  text-align: right;
}

.report-doc__hybrid-price span,
.report-doc__hybrid-price small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.report-doc__hybrid-price span {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.report-doc__hybrid-price strong {
  display: block;
  margin: 5px 0;
  color: var(--rd-gold-bright);
  font-family: var(--rd-display-stack);
  font-size: 1.25rem;
  white-space: nowrap;
}

.report-doc__menu-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.report-doc__menu-group {
  border-radius: 12px;
  background: var(--rd-paper);
  border: 1px solid var(--rd-line);
  overflow: hidden;
}

.report-doc__menu-group-title {
  margin: 0;
  padding: 13px 16px 12px;
  border-bottom: 1px solid var(--rd-line);
  color: var(--rd-navy);
  font-family: var(--rd-display-stack);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-doc__menu-group-title span {
  color: var(--rd-gold);
  margin-right: 7px;
}

.report-doc__menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-doc__menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
  gap: 16px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rd-line-soft);
}

.report-doc__menu-item:last-child {
  border-bottom: 0;
}

.report-doc__menu-item.has-address-price {
  background: rgba(232, 168, 56, 0.07);
}

.report-doc__menu-item.needs-onsite-review {
  background: rgba(210, 132, 31, 0.1);
  box-shadow: inset 3px 0 0 rgba(210, 132, 31, 0.78);
}

.report-doc__menu-item.is-unavailable {
  background: rgba(13, 33, 64, 0.035);
}

.report-doc__menu-item.is-premium-path {
  background: rgba(232, 168, 56, 0.16);
}

.report-doc__menu-item.is-current-system-match {
  background: var(--rd-navy);
}

.report-doc__menu-name {
  display: block;
  color: var(--rd-navy);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}

.report-doc__menu-description {
  display: block;
  margin-top: 4px;
  color: var(--rd-mute);
  font-size: 0.78rem;
  line-height: 1.4;
}

.report-doc__menu-fit {
  display: block;
  margin-top: 5px;
  color: #657287;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}

.report-doc__menu-item.is-unavailable .report-doc__menu-name,
.report-doc__menu-item.is-unavailable .report-doc__menu-price strong {
  color: #6b7585;
}

.report-doc__menu-item.needs-onsite-review .report-doc__menu-badge {
  color: #925b12;
}

.report-doc__menu-item.is-current-system-match .report-doc__menu-name {
  color: #fff;
}

.report-doc__menu-item.is-current-system-match .report-doc__menu-description {
  color: rgba(255, 255, 255, 0.7);
}

.report-doc__menu-price {
  min-width: 0;
  text-align: right;
}

.report-doc__menu-price strong {
  display: block;
  color: var(--rd-navy);
  font-family: var(--rd-display-stack);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.report-doc__menu-item.is-current-system-match .report-doc__menu-price strong {
  color: var(--rd-gold-bright);
  font-size: 1.05rem;
}

.report-doc__menu-price span {
  display: block;
  margin-top: 4px;
  color: var(--rd-mute);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.report-doc__menu-item.is-current-system-match .report-doc__menu-price span {
  color: rgba(255, 255, 255, 0.7);
}

.report-doc__menu-badge {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--rd-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-doc__menu-item.is-current-system-match .report-doc__menu-badge {
  color: var(--rd-gold-bright);
}

.report-doc__menu-item.is-premium-path .report-doc__menu-badge {
  color: var(--gold-deep);
}

.report-doc__menu-footnote {
  margin: 14px 0 0;
  max-width: 84ch;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--rd-mute);
}

.report-doc__takeoff {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--rd-paper);
  border: 1px solid var(--rd-line);
}

.report-doc__takeoff > div {
  min-width: 0;
}

.report-doc__takeoff dt {
  margin: 0;
  color: var(--rd-mute);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-doc__takeoff dd {
  margin: 3px 0 0;
  color: var(--rd-navy);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .report-doc__menu-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .report-doc__menu-count {
    min-width: 0;
    width: fit-content;
  }

  .report-doc__menu-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .report-doc__hybrid-plan {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .report-doc__hybrid-price {
    text-align: left;
  }

  .report-doc__menu-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 13px;
  }

  .report-doc__menu-price { text-align: left; }
  .report-doc__menu-name { font-size: 0.84rem; }
  .report-doc__menu-description { font-size: 0.73rem; }
  .report-doc__menu-price strong { font-size: 0.85rem; }
  .report-doc__menu-price span { font-size: 0.8rem; }
}

/* ---------- Section panels (white on cream, thin gold separator) ---------- */

.report-doc__section {
  position: relative;
  padding: 22px 26px 24px;
  border-radius: 14px;
  background: var(--rd-paper);
  border: 1px solid var(--rd-line);
  box-shadow: 0 8px 22px rgba(13, 33, 64, 0.05);
}

.report-doc__section--cream {
  background: var(--rd-cream);
  border-color: rgba(13, 33, 64, 0.08);
  box-shadow: none;
}

.report-doc__section--imagery {
  padding: 18px 18px 20px;
}

.report-doc__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rd-rule-gold);
}

.report-doc__kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-display-stack);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-navy);
}

.report-doc__kicker::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rd-gold);
  flex: 0 0 auto;
}

.report-doc__lede {
  margin: 0 0 12px;
  color: var(--rd-mute);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 70ch;
}

.report-doc__bullets {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--rd-ink);
}

.report-doc__confidence {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(232, 168, 56, 0.15);
  color: #8a5d18;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.report-doc__section-head .report-doc__confidence {
  margin-left: auto;
}

/* ---------- Fact grids (Roof at a glance, House facts) ---------- */

.report-doc__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-doc__fact {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(13, 33, 64, 0.025);
  border: 1px solid var(--rd-line-soft);
}

.report-doc__fact-label {
  color: var(--rd-mute);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-doc__fact-value {
  color: var(--rd-ink);
  font-size: 0.98rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.report-doc__inline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rd-line);
  font-size: 0.88rem;
}

.report-doc__inline-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.report-doc__inline-label {
  color: var(--rd-mute);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-doc__inline-value {
  color: var(--rd-ink);
  font-weight: 500;
}

/* Source-data disclosure inside the roof section */

.report-doc__source {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(13, 33, 64, 0.035);
  border: 1px dashed rgba(13, 33, 64, 0.16);
  color: var(--rd-mute);
}

.report-doc__source > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  user-select: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-mute);
}

.report-doc__source > summary::-webkit-details-marker { display: none; }
.report-doc__source > summary::after {
  content: "▾";
  font-size: 0.7rem;
  letter-spacing: 0;
  transition: transform 0.18s ease;
}

.report-doc__source[open] > summary::after { transform: rotate(180deg); }

.report-doc__source > .report-doc__facts {
  margin-top: 12px;
  background: transparent;
}

.report-doc__source .report-doc__fact {
  background: rgba(255, 255, 255, 0.7);
}

/* ---------- Imagery ---------- */

.report-doc__imagery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.report-doc__image {
  margin: 0;
  display: grid;
  gap: 6px;
}

.report-doc__image > a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--rd-line);
  background: rgba(13, 33, 64, 0.035);
}

.report-doc__image img {
display: block;
  width: 100%;
  height: 230px;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

.report-doc__image figcaption {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-mute);
}

/* ---------- Additional notes section ---------- */

.report-doc__section--notes {
  background: var(--rd-cream);
  border-color: rgba(13, 33, 64, 0.08);
  box-shadow: none;
}

.report-doc__note-block + .report-doc__note-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-line-soft);
}

.report-doc__note-kicker {
  margin: 0 0 6px;
  color: var(--rd-navy);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.report-doc__section--notes a { color: var(--rd-navy); }

/* ---------- Next-step CTA (phone + public-version link) ----------
   The contractor does not need a "call yourself" CTA on the dashboard, but
   the printed/handoff copy does (homeowner sees the phone). The base rule
   below defines the print/handoff appearance; @media screen overrides it
   to hide the block entirely on the dashboard view.
*/

.report-doc__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(232, 168, 56, 0.12), rgba(255, 255, 255, 0.96) 70%), var(--rd-paper);
  border: 1px solid rgba(232, 168, 56, 0.35);
  flex-wrap: wrap;
}

@media screen {
  .report-doc__cta { display: none; }
}

.report-doc__cta-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.report-doc__cta-eyebrow {
  margin: 0;
  color: #8a5d18;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.report-doc__cta-line {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rd-navy);
}

.report-doc__cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.report-doc__phone {
  display: inline-flex;
  align-items: center;
  font-family: var(--rd-display-stack);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--rd-navy);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.report-doc__phone:hover { color: var(--rd-gold); }

.report-doc__public-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--rd-navy);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.report-doc__public-link:hover {
  background: var(--rd-gold);
  color: var(--rd-navy);
  transform: translateY(-1px);
}

.report-doc__empty {
  padding: 28px;
  border-radius: 14px;
  background: var(--rd-cream);
  border: 1px dashed rgba(13, 33, 64, 0.18);
  color: var(--rd-mute);
  text-align: center;
}

/* ---------- Tablet / narrow desktop ---------- */

@media (max-width: 1024px) {
  .report-doc__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Mobile (393px target) ---------- */

@media (max-width: 720px) {
  .report-doc { gap: 12px; }
  .report-doc__head { padding: 4px 2px 10px; }
  .report-doc__back {
    min-height: 44px;
    padding-block: 10px;
  }
  .report-doc__head-link {
    min-height: 44px;
    align-items: center;
    margin-top: 0;
    padding-block: 10px;
  }
  .report-doc__title { font-size: clamp(1.45rem, 5vw, 1.85rem); }

  .report-doc__quote-summary {
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
  }

  .report-doc__quote-summary-head,
  .report-doc__quote-summary-grid {
    grid-template-columns: 1fr;
  }

  .report-doc__quote-status {
    justify-self: start;
  }

  .report-doc__hero {
    padding: 22px 20px 20px;
    border-radius: 16px;
  }

  .report-doc__hero-figure {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  .report-doc__section {
    padding: 18px 18px 20px;
    border-radius: 12px;
  }

  .report-doc__facts {
    grid-template-columns: 1fr;
  }

  .report-doc__imagery {
    grid-template-columns: 1fr;
  }

  .report-doc__cta {
    padding: 18px 20px;
  }

  .report-doc__cta-actions {
    width: 100%;
    justify-content: space-between;
  }

  .report-doc__phone {
    font-size: 1.3rem;
  }

  .report-doc__trust-meta > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .report-doc__quote-summary {
    padding: 15px;
  }

  .report-doc__quote-price {
    padding: 0 0 20px;
  }

  .report-doc__quote-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-doc__quote-facts > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Print (US Letter portrait, black-on-cream-safe) ----------
   The contractor may print the report or hand it off after the on-site visit.
   Goals: hide app chrome, render the navy hero as black-on-cream so it
   doesn't soak ink, expand all disclosures, and prevent awkward breaks.
*/

@page {
  size: letter portrait;
  margin: 0.5in 0.45in;
}

@media print {
  body {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
  }

  .site-header,
  .operator-sidebar,
  .operator-topbar,
  .operator-mobile-menu-toggle,
  .skip-link,
  .flash-stack,
  .report-doc__back,
  .report-doc__head-links,
  .report-doc__head-link,
  .report-doc__public-link {
    display: none !important;
  }

  .operator-frame {
    display: block !important;
    min-height: 0 !important;
  }

  .operator-main {
    display: block;
    min-width: 0;
  }

  .page-shell {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .report-doc {
    color: #000;
    gap: 12pt;
    margin: 0;
  }

  .report-doc__head {
    padding: 0 0 10pt;
    border-bottom: 1pt solid #000;
  }

  .report-doc__title {
    font-size: 18pt;
    line-height: 1.15;
    color: #000;
  }

  .report-doc__pills .badge {
    border: 0.5pt solid #000;
    background: transparent !important;
    color: #000 !important;
  }

  /* Flatten the navy hero to a clean ink-on-cream block. */
  .report-doc__hero {
    background: #fff !important;
    color: #000;
    border: 1pt solid #000;
    border-radius: 6pt;
    box-shadow: none;
    padding: 14pt 18pt;
  }

  .report-doc__hero-eyebrow,
  .report-doc__cta-eyebrow {
    color: #000 !important;
  }

  .report-doc__hero-figure {
    color: #000;
    font-size: 26pt;
  }

  .report-doc__hero-support {
    color: #1a1a1a;
  }

  .report-doc__hero-range,
  .report-doc__hero-caveats p {
    color: #2a2a2a !important;
  }

  /* Hide collapsed disclosures in print. Chrome's <details> shadow DOM
     ignores CSS display overrides on the slotted children, so trying to
     force-open them just leaves orphaned content outside the bounding
     box. The disclosure contents (confidence chips, calibration meta,
     raw aerial measurements) are QA artifacts; the printed copy keeps
     the headline price + facts and drops the methodology footnotes. */
  .report-doc__trust,
  .report-doc__source { display: none !important; }

  .report-doc__section,
  .report-doc__section--cream,
  .report-doc__section--notes,
  .report-doc__quote-summary,
  .report-doc__cta {
    background: #fff !important;
    border: 0.75pt solid #000 !important;
    box-shadow: none !important;
    padding: 12pt 14pt;
    color: #000;
  }

  .report-doc__section-head { border-bottom: 0.5pt solid #000; }

  .report-doc__kicker { color: #000; }
  .report-doc__kicker::before { background: #000; }

  .report-doc__lede,
  .report-doc__bullets,
  .report-doc__inline-value,
  .report-doc__cta-line {
    color: #1a1a1a;
  }

  .report-doc__quote-status {
    border: 0.5pt solid #000;
    background: transparent !important;
    color: #000 !important;
  }

  .report-doc__quote-price,
  .report-doc__quote-check,
  .report-doc__quote-ready {
    background: #fff !important;
    border: 0.5pt solid #555 !important;
    color: #000 !important;
  }

  .report-doc__quote-price > span,
  .report-doc__quote-price > strong,
  .report-doc__quote-price > small,
  .report-doc__quote-material,
  .report-doc__quote-figure,
  .report-doc__quote-facts dt,
  .report-doc__quote-facts dd {
    color: #000 !important;
  }

  .report-doc__quote-facts {
    border-top-color: #777;
  }

  .report-doc__fact {
    background: #fff !important;
    border: 0.5pt solid #777 !important;
  }

  .report-doc__source {
    background: #fff !important;
    border: 0.5pt dashed #777 !important;
  }

  .report-doc__source .report-doc__fact {
    background: #fff !important;
  }

  .report-doc__inline-facts { border-top-color: #777; }

  .report-doc__phone {
    color: #000;
    font-size: 16pt;
  }

  .report-doc__confidence {
    background: transparent !important;
    color: #000 !important;
    border: 0.5pt solid #777;
  }

  .report-doc__image img {
    max-height: 2.6in;
  }

  /* Avoid awkward breaks. */
  .report-doc__hero,
  .report-doc__quote-summary,
  .report-doc__section,
  .report-doc__cta,
  .report-doc__fact,
  .report-doc__image,
  .report-doc__note-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ============================================================
   Mobile / field-use refinements (≤800px)
   Goal: roofing contractors using a phone on the job can
   navigate, glance stats, place calls, and find properties.
   ============================================================ */

@media (max-width: 900px) {
  /* Scoped to mobile only: keeps absolutely positioned tooltips from
     pushing the page wider than the viewport. Kept out of desktop
     because `.table-wrap` (line 4611) and `.lead-table-wrap` (line 4476)
     need overflow-x: auto to work on older Safari, and a body-level
     overflow-x: clip can interact with their scroll chain. */
  html,
  body {
    overflow-x: clip;
  }

  .operator-frame,
  .operator-main,
  .page-shell,
  .panel {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Reduce side gutter inside panels so cards have more usable width. */
  .panel {
    padding: 18px 14px;
  }

  /* Campaign-card stats (Homes / Postcards / Leads / Scans / Mailed)
     were collapsing to one column on phones because of minmax(140px,1fr).
     Drop the floor so we get 3 columns on a phone. */
  .campaign-card .stats-grid,
  .campaign-card .campaign-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .campaign-card .stat {
    padding: 8px 6px;
  }

  .campaign-card .stat-label {
    font-size: 0.66rem;
  }

  .campaign-card .stat strong {
    font-size: 1.05rem;
  }

  .mailing-tracker-panel {
    grid-template-columns: 1fr;
  }

  .mailing-tracker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Phone header: keep the brand on the left and expose the complete
     dashboard navigation from a single, comfortably sized menu button
     in the right corner. */
  .operator-sidebar {
    height: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "brand menu"
      "nav nav"
      "signout signout";
    padding: 14px 14px 16px;
    gap: 0 12px;
    align-items: center;
  }

  .operator-sidebar__account {
    display: none;
  }

  .operator-sidebar__logo {
    max-height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }

  .operator-sidebar__brand {
    grid-area: brand;
    padding: 0;
    min-height: 44px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .operator-mobile-menu-toggle {
    grid-area: menu;
    display: none;
    width: 44px;
    height: 44px;
    min-height: 44px;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    justify-self: end;
  }

  html.has-mobile-menu .operator-mobile-menu-toggle {
    display: grid;
  }

  .operator-mobile-menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .operator-mobile-menu-toggle[aria-expanded="true"] {
    border-color: rgba(200, 138, 47, 0.75);
    background: rgba(200, 138, 47, 0.22);
  }

  .operator-sidebar__nav {
    grid-area: nav;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.22);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
  }

  html.has-mobile-menu .operator-sidebar__nav {
    display: none;
  }

  /* The open menu and the sign-out row are one panel: the nav gives up its
     bottom edge so the row below can finish the rounded box.
     The margin is the panel's top inset. The sidebar's row gap has to stay 0
     — an empty grid row still gets its gutters, so any row gap here would pad
     the closed header on every phone page. Without the margin the panel's top
     corner landed on the exact pixel the menu button ends on, and the two
     borders read as one crushed shape. 16px matches the panel's left, right,
     and bottom insets. */
  html.has-mobile-menu .operator-sidebar__nav.is-mobile-open {
    display: grid;
    margin-top: 12px;
    padding-bottom: 6px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    box-sizing: border-box;
  }

  html.has-mobile-menu .operator-sidebar__nav.is-mobile-open .operator-sidebar__mobile-account-group {
    display: contents !important;
  }

  html.has-mobile-menu .operator-sidebar__nav.is-mobile-open .operator-sidebar__link--mobile-account {
    display: grid !important;
  }

  /* Sign out belongs to the menu, never to the page. It rides the bottom of
     the open menu and leaves with it, so no account control sits over the
     page content on a phone. */
  .operator-sidebar__logout {
    grid-area: signout;
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }

  html.has-mobile-menu .operator-sidebar__nav.is-mobile-open ~ .operator-sidebar__logout {
    display: block;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 12px 12px;
    background: rgba(0, 0, 0, 0.22);
    width: 100%;
    box-sizing: border-box;
  }

  html.has-mobile-menu .operator-sidebar__nav.is-mobile-open ~ .operator-sidebar__logout button {
    /* Full width: this is a menu row, not the hugged button the wider
       header bar uses. */
    width: 100%;
    min-height: 44px;
    border-radius: 9px;
    font-size: 0.88rem;
  }

  /* Dashboard is the first row of the open menu. It used to be hidden here,
     which left the brand logo as the only way home — unlabelled, outside the
     nav landmark, and announced as the company rather than the page. */

  .operator-nav-label--desktop {
    display: inline;
  }

  .operator-nav-label--mobile {
    display: none;
  }

  .operator-sidebar__link {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: start;
    align-content: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: nowrap;
  }

  .operator-sidebar__link > span:first-child {
    /* Stays 0: the icon is a mask, and any size here would un-hide the
       glyph the template prints behind it. */
    font-size: 0;
    line-height: 1;
  }

  /* The active destination remains obvious within the expanded menu. */
  .operator-sidebar__link.is-active {
    background: var(--panel);
    border-color: transparent;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .operator-sidebar__link.is-active > span:first-child {
    color: var(--gold-deep);
  }

  .operator-sidebar__link .nav-badge {
    top: 3px;
    right: 5px;
  }

  /* A corner badge needs no extra reserved space in the vertical menu. */
  .operator-sidebar__link.operator-sidebar__link:has(.nav-badge) {
    padding: 10px 12px;
  }

  .operator-sidebar__link.is-loading {
    pointer-events: none;
  }

  /* Public (non-operator) header on phones */
  .header-inner {
    padding: 10px 14px;
  }

  /* Tap targets: every primary action should be ≥44px tall. */
  .button-link,
  button[type="submit"],
  .lead-card__action,
  .copy-button {
    min-height: 44px;
  }

  /* Phone-number link inside lead cards: make it look like a real
     tap-to-call button (the #1 thing a contractor does on the road). */
  .lead-card__quick {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .lead-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 8px;
  }

  .lead-card__action[href^="tel:"] {
    padding: 0 18px;
    background: var(--navy);
    color: white;
    font-weight: 700;
    text-decoration: none;
  }

  .lead-card__action[href^="tel:"]:hover,
  .lead-card__action[href^="tel:"]:focus {
    background: var(--gold-deep);
    color: white;
    text-decoration: none;
  }

}

@media (min-width: 641px) and (max-width: 900px) {
  .lead-card__action.copy-button {
    /* Contrast: copy text against panel needs ≥4.5:1. The earlier
       0.08 alpha resolved to ~3.8:1; 0.18 lands above 4.5:1. */
    background: rgba(23, 50, 79, 0.18);
    color: var(--navy);
  }
}

@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .operator-mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* Source evidence is optional; property information and offered prices are not. */
.report-doc .muted { color: var(--rd-mute); }

.report-doc__disclosure {
  min-width: 0;
  border-bottom: 1px solid var(--rd-line);
}

.report-doc__disclosure > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 56px;
  padding: 12px 4px;
  color: var(--rd-navy);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.report-doc__disclosure > summary::-webkit-details-marker { display: none; }

.report-doc__disclosure > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-right: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.report-doc__disclosure[open] > summary::after { transform: rotate(225deg); }
.report-doc__disclosure > summary:hover { color: var(--rd-ink); }

.report-doc__disclosure > summary:focus-visible {
  outline: 2px solid var(--rd-navy);
  outline-offset: 4px;
  border-radius: 4px;
}

.report-doc__disclosure-hint {
  color: var(--rd-mute);
  font-size: 0.85rem;
  font-weight: 400;
}

.report-doc__disclosure-body {
  padding: 12px 0 24px;
  display: grid;
  gap: 24px;
}

.report-doc__disclosure-body > .report-doc__section {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.report-doc__disclosure-body .report-doc__hero-caveats,
.report-doc__disclosure-body .report-doc__hero-caveats p,
.report-doc__disclosure-body .report-doc__hero-caveats .is-rationale {
  color: var(--rd-ink-soft);
  font-size: 0.9rem;
}

.report-doc__disclosure-body .report-doc__trust,
.report-doc__disclosure-body .report-doc__trust-meta { border-color: var(--rd-line); }

.report-doc__disclosure-body .report-doc__trust-label,
.report-doc__disclosure-body .report-doc__trust-kicker,
.report-doc__disclosure-body .report-doc__trust-meta dt,
.report-doc__disclosure-body .report-doc__chip span:last-child { color: var(--rd-navy); }

.report-doc__disclosure-body .report-doc__trust-hint,
.report-doc__disclosure-body .report-doc__trust-meta dd,
.report-doc__disclosure-body .report-doc__chip span:first-child { color: var(--rd-mute); }

.report-doc__disclosure-body .report-doc__chip {
  border-color: var(--rd-line);
  background: var(--rd-paper);
}

.report-doc__source-notes { margin: 16px 0; }
.report-doc__source-notes > div + div { margin-top: 16px; }
.report-doc__source-notes dt { font-weight: 600; color: var(--rd-navy); }
.report-doc__source-notes dd { margin: 4px 0 0; color: var(--rd-ink-soft); line-height: 1.5; }

.report-doc__section--imagery {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.report-doc__section--imagery .report-doc__section-head {
  border: 0;
  padding: 0;
  margin-bottom: 12px;
}

.report-doc__section--imagery .report-doc__kicker {
  font: 600 1rem / 1.4 var(--rd-body-stack);
  letter-spacing: normal;
  text-transform: none;
}

.report-doc__section--imagery .report-doc__kicker::before { display: none; }

/* Roof measurements: the bid numbers, open on the page. */

.report-doc__takeoff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 24px;
  margin: 0;
}

.report-doc__takeoff-grid > div { min-width: 0; }

.report-doc__takeoff-grid dt {
  color: var(--rd-mute);
  font-size: 0.8rem;
  font-weight: 500;
}

.report-doc__takeoff-grid dd {
  margin: 4px 0 0;
  color: var(--rd-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.report-doc__takeoff-note {
  margin: 16px 0 0;
  color: var(--rd-mute);
  font-size: 0.82rem;
}

.report-doc__gc-roof-link {
  justify-self: start;
  color: var(--rd-navy);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rd-gold);
  text-underline-offset: 3px;
}

.report-doc__quote-facts dd small {
  display: block;
  margin-top: 2px;
  color: var(--rd-mute);
  font-size: 0.8rem;
  font-weight: 500;
}

.report-doc__section--house {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.report-doc__section--house .report-doc__facts {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 24px;
}

.report-doc__section--house .report-doc__fact {
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 760px) {
  .report-doc__quote-summary-grid { grid-template-columns: 1fr; gap: 24px; }
  .report-doc__quote-price { border-right: 0; border-bottom: 1px solid var(--rd-line); padding: 0 0 20px; }
  .report-doc__quote-facts { max-width: 420px; }
  .report-doc__disclosure-hint { display: none; }
  .report-doc__imagery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-doc__image img { height: auto; aspect-ratio: 4 / 3; }
}

@media print {
  .report-doc,
  .report-doc * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .report-doc__disclosure:not([open]),
  .report-doc__homeowner { display: none; }
  .report-doc__disclosure > summary::after { display: none; }
}

/* ===== Dashboard tiles + campaign stats at the typical phone width ===== */
@media (max-width: 640px) {
  /* 5 KPI tiles → 2 columns is much denser and keeps the dashboard
     glanceable. The earlier conflicting `grid-template-columns: 1fr`
     rule on .operator-metric-grid+.campaign-primary-stats was removed
     so no `!important` is needed here. */
  .operator-metric-grid,
  .campaign-primary-stats,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .operator-metric {
    padding: 12px 28px 12px 12px;
    gap: 4px;
  }

  .operator-metric span {
    font-size: 0.66rem;
  }

  .operator-metric strong {
    font-size: 1.55rem;
  }

  .operator-metric small {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .operator-campaign-launcher {
    padding: 16px 14px;
  }

  .operator-campaign-launcher__shortcuts {
    gap: 6px;
  }

  .operator-campaign-launcher__shortcuts-label {
    font-size: 0.72rem;
  }

  .operator-campaign-launcher__chips {
    gap: 6px;
  }

  .operator-campaign-launcher__chip {
    padding: 6px 4px;
    min-height: 44px;
    flex-direction: column;
    gap: 3px;
  }

  .operator-campaign-launcher__chip-icon {
    font-size: 1.1rem;
    line-height: 1;
  }

  .operator-campaign-launcher__chip-label {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .postcard-stats-section__heading > .muted {
    max-width: none;
  }

  .postcard-stats-title,
  .postcard-headline {
    margin-bottom: 18px;
  }

  .postcard-stats-section + .postcard-stats-section {
    margin-top: 18px;
  }

  .help-section + .help-section {
    margin-top: 18px;
  }

  /* A word and its meaning side by side leaves the meaning about eight
     characters wide on a phone. Stack them instead. */
  .help-glossary > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .postcard-headline {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
  }

  .postcard-headline__body {
    align-items: flex-start;
    gap: 12px;
  }

  .postcard-headline__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    margin-top: 2px;
  }

  .postcard-headline__lead {
    font-size: 0.98rem;
  }

  .postcard-headline__actions,
  .postcard-headline__btn,
  .postcard-headline .button-link,
  .postcard-headline .btn {
    width: 100%;
  }

  .postcard-headline__btn,
  .postcard-headline .button-link,
  .postcard-headline .btn {
    min-height: 44px;
    font-size: 0.92rem;
  }

  .postcard-status-grid,
  .postcard-response-grid {
    grid-template-columns: 1fr;
  }

  .postcard-status-tile,
  .postcard-response-card {
    padding: 14px;
  }

  .postcard-support-campaign {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .postcard-support-campaign .button-link {
    width: 100%;
    white-space: normal;
  }

  .postcard-campaign-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .postcard-campaign-table,
  .postcard-campaign-table tbody,
  .postcard-campaign-table tr,
  .postcard-campaign-table td {
    display: block;
    width: 100%;
  }

  /* Each cell carries its own label via data-label on phones, so the real
     header row is redundant. Hiding it off-screen left the <th> boxes
     sticking past the viewport edge, so it is removed outright instead. */
  .postcard-campaign-table thead {
    display: none;
  }

  .postcard-campaign-table tbody {
    display: grid;
    gap: 12px;
  }

  .postcard-campaign-table tr {
    overflow: hidden;
    border: 1px solid rgba(23, 50, 79, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
  }

  .postcard-campaign-table td {
    display: grid;
    grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(23, 50, 79, 0.07);
  }

  .postcard-campaign-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .roof-analysis-tooltip {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    transform: translateY(4px);
  }

  .roof-analysis-help:hover .roof-analysis-tooltip,
  .roof-analysis-help:focus-within .roof-analysis-tooltip {
    transform: translateY(0);
  }

  /* Page padding: reduce vertical gaps so more fits above the fold. */
  .page-shell {
    padding: 10px 4px 24px;
  }

  /* Property/campaign page heading row: stop the eyebrow + h1 + button
     from each forcing its own line break. */
  .operator-hero,
  .panel.campaign-meta {
    padding: 16px 14px;
  }

  /* Hero text scales down so it doesn't dominate the viewport. */
  .operator-hero h1 {
    font-size: 1.55rem;
    line-height: 1.1;
  }

  /* Address lookup, search, and filter rows: full-width inputs. */
  .address-lookup-form input[type="search"],
  .address-lookup-form input[type="text"],
  .campaign-search-form input,
  .campaign-search-form select,
  .campaign-search-form .leads-filter-dropdown,
  .property-filter-form input,
  .property-filter-form select,
  .property-filter-form .leads-filter-dropdown,
  .property-filter-form button,
  .leads-filter input[type="search"],
  .leads-filter select,
  .leads-filter .leads-filter-dropdown,
  .leads-filter button {
    width: 100%;
    min-height: 44px;
    font-size: 1rem; /* iOS doesn't zoom inputs at ≥16px */
  }

  /* The six-track rule above is written with :has(#id), which carries id
     specificity; a media query adds none. Without repeating the selector here
     a phone keeps the desktop grid and the Mail, Next step, Estimate and
     Filter controls sit off the right edge with no way to scroll to them. */
  .property-filter-form,
  .property-filter-form:has(#property-wave-filter):has(#property-mail-filter),
  .property-filter-form--gc,
  .property-filter-form--gc:has(#property-wave-filter):has(#property-mail-filter) {
    grid-template-columns: 1fr;
  }

  .property-filter-form__actions {
    flex-wrap: wrap;
    min-height: 44px;
  }

  .property-filter-form__actions button {
    flex: 1 0 100%;
  }

  /* Generic form inputs: prevent iOS auto-zoom by enforcing 16px. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Campaign card stats: 3 columns on phone so it fits without horizontal overflow. */
  .campaign-card .stats-grid,
  .campaign-card .campaign-stats,
  .campaign-list-tray .campaign-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .campaign-list-tray .campaign-stats .stat {
    padding: 4px 6px;
  }

  .campaign-list-tray .campaign-card {
    max-width: 100%;
    min-width: 0;
    padding: 14px 12px;
    box-sizing: border-box;
  }

  /* Campaign card "View campaign" + Archive actions: align nicely on mobile. */
  .campaign-card-actions,
  .campaign-list-tray .campaign-card-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
  }

  .campaign-card-actions > .button-link,
  .campaign-list-tray .campaign-card-actions .button-link {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
  }

  .campaign-card-actions > .campaign-edit,
  .campaign-list-tray .campaign-card-actions .campaign-edit {
    flex: 0 0 auto;
  }

  .campaign-card-actions > .campaign-delete,
  .campaign-card-actions > .campaign-archive-btn,
  .campaign-list-tray .campaign-card-actions .campaign-archive-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    min-width: 38px;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Stat tiles inside campaign-meta panel (the campaign-primary-stats row
     with Homes / Postcards Ready / Personalized / QR / Phone #s / Not Sent
     / Mailed / Queued) need to be 2-up not 1-up to fit. */
  .campaign-primary-stats .stat {
    padding: 10px 8px;
  }

  /* Pricing config: title row already stacks; just keep buttons big. */
  .pricing-save-bar button {
    min-height: 48px;
  }
}

@media (min-width: 381px) and (max-width: 640px) {
  .postcard-status-grid--states,
  .postcard-response-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .postcard-status-tile,
  .postcard-response-card {
    padding: 10px;
  }

  .postcard-status-tile > span,
  .postcard-response-card > span {
    font-size: 0.65rem;
    line-height: 1.25;
  }

  .postcard-status-tile p,
  .postcard-response-card p {
    font-size: 0.76rem;
  }
}

/* ===== Very narrow / older phones (≤380px) ===== */
@media (max-width: 380px) {
  .operator-campaign-launcher {
    padding: 14px 10px;
  }

  .operator-campaign-launcher__shortcuts {
    gap: 5px;
  }

  .operator-campaign-launcher__shortcuts-label {
    font-size: 0.68rem;
  }

  .operator-campaign-launcher__chips {
    gap: 4px;
  }

  .operator-campaign-launcher__chip {
    padding: 5px 2px;
    min-height: 44px;
    flex-direction: column;
    gap: 2px;
  }

  .operator-campaign-launcher__chip-icon {
    font-size: 1rem;
    line-height: 1;
  }

  .operator-campaign-launcher__chip-label {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .campaign-card .stats-grid,
  .campaign-card .campaign-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-sidebar__link {
    min-height: 48px;
    font-size: 0.66rem;
    padding: 6px 2px 5px;
  }

  .operator-sidebar__logo {
    width: 78px;
  }

  /* No nav padding/gap override here. These used to squeeze a sideways strip
     of links onto a narrow screen; the nav is a stacked menu panel now, and
     3px left its rows pressed against the panel border while the same menu
     one pixel wider had 8px. It keeps the ≤900px panel spacing. */

  .operator-sidebar__nav .operator-sidebar__link {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.88rem;
  }
}

/* ===== Area filter builder ===== */
.targeted-builder {
  display: grid;
  gap: 14px;
}

.targeted-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.targeted-presets-label {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.targeted-preset-button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.targeted-preset-button:hover {
  border-color: #0284c7;
  background: #f0f9ff;
  color: #0369a1;
}

.targeted-presets .targeted-preset-button[aria-pressed="true"] {
  border-color: #0284c7;
  background: #0284c7;
  color: #fff;
  font-weight: 600;
}

.hail-swath-callout {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hail-swath-callout:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}

.targeted-advanced-details {
  transition: all 0.2s ease;
}

.targeted-advanced-details[open] {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.targeted-advanced-details summary:hover {
  color: #0284c7;
}

.targeted-help {
  margin: -6px 0 0;
  font-size: 0.88rem;
}

.targeted-presets + .targeted-help {
  margin-top: 14px;
}

.targeted-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.targeted-field {
  display: grid;
  gap: 8px;
}

.targeted-field > label {
  color: var(--text);
  font-weight: 700;
}

.targeted-check-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
}

.targeted-check-group legend {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px;
}

.targeted-check-group legend small {
  text-transform: none;
  letter-spacing: 0;
}

.targeted-check,
.targeted-exclusion-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.targeted-check input[type="checkbox"],
.targeted-check input[type="radio"],
.targeted-exclusion-row input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.targeted-list-type {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.targeted-ranges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 14px;
}

.targeted-range {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.targeted-range legend {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px;
}

.targeted-range input {
  flex: 1 1 7.5rem;
  width: 100%;
  min-width: 6.5rem;
}

.targeted-exclusions {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  display: grid;
  gap: 10px;
}

.targeted-exclusions legend {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px;
}

.targeted-exclusion-row {
  margin: 0;
  flex-wrap: wrap;
}

.targeted-exclusion-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.targeted-inline-number {
  width: 78px;
  padding: 6px 8px;
}

.targeted-permit-caveat {
  margin: 0;
  font-size: 0.85rem;
}

.targeted-sale-lag {
  margin: -6px 0 0;
  font-size: 0.88rem;
}

.targeted-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.targeted-results {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  background: rgba(23, 50, 79, 0.02);
}

.targeted-count-line {
  margin: 0;
  font-weight: 600;
  color: var(--navy);
}

.targeted-tallies {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
}

.targeted-notes {
  margin: 0;
  font-size: 0.85rem;
}

.targeted-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.targeted-preview-table th,
.targeted-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  text-align: left;
  white-space: nowrap;
}

.targeted-preview-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(23, 50, 79, 0.03);
}

@media (max-width: 900px) {
  .targeted-filter-grid,
  .targeted-ranges {
    grid-template-columns: 1fr;
  }
}

/* ===== Contractor-facing refresh: leads page accents ===== */

.campaign-lead-summary__quiet {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(23, 50, 79, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
  line-height: 1.45;
}

.lead-card__suppressed {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(159, 43, 43, 0.4);
  border-radius: 999px;
  background: #fff;
  color: var(--failed);
  font-size: 0.8rem;
  font-weight: 700;
}

.lead-card__interest-callout {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(200, 138, 47, 0.1);
  border: 1px solid rgba(200, 138, 47, 0.28);
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text);
}

.lead-card__interest-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1;
}

.lead-card__interest-text {
  color: var(--text);
  font-weight: 500;
}

.lead-card__interest-text strong {
  color: var(--gold-deep);
  font-weight: 700;
}

/* What a whole-home lead said needs work. A room the homeowner measured and
   typed themselves is filled gold and darkened rather than tinted a different
   hue, so it reads as emphasis at any colour vision. */
.lead-card__project-details {
  margin-top: 6px;
}

.lead-card__project-details > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  width: fit-content;
  padding: 8px 0;
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.lead-card__project-details > summary::-webkit-details-marker {
  display: none;
}

.lead-card__project-details > summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-card__project-details > summary:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 3px;
}

.lead-card__project-chevron {
  flex-shrink: 0;
}

.lead-card__project-details[open] .lead-card__project-chevron {
  transform: rotate(90deg);
}

.lead-card__project-count {
  color: var(--muted);
  font-weight: 400;
}

.lead-card__work {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  line-height: 1.4;
}

.lead-card__work-label {
  color: var(--muted);
  font-weight: 700;
}

.lead-card__work-item {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
}

.lead-card__work-item--measured {
  border-color: rgba(200, 138, 47, 0.55);
  background: rgba(200, 138, 47, 0.18);
  color: var(--gold-deep);
  font-weight: 700;
}

.lead-card__replies {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.lead-card__reply {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(200, 138, 47, 0.35);
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.09);
  color: var(--text);
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

.lead-card__reply-text {
  flex: 1 1 320px;
  min-width: 0;
}

.lead-card__reply-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  width: 100%;
}

.lead-card__reply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
  box-shadow: 0 1px 3px rgba(23, 50, 79, 0.15);
  cursor: pointer;
}

@media (max-width: 768px) {
  .lead-card__reply-text {
    flex: 1 1 100%;
    width: 100%;
  }

  .lead-card__reply-btn {
    margin-top: 4px;
  }
}

.lead-card__reply-btn:hover {
  background: #0d2238;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.22);
}

.lead-card__reply-btn:active {
  transform: translateY(0);
}

.lead-card__reply-btn svg {
  flex-shrink: 0;
}

.lead-card__reply--muted {
  border-color: rgba(23, 50, 79, 0.15);
  background: rgba(120, 120, 120, 0.09);
  font-weight: 600;
}

.lead-card__reply-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.lead-card__reply-photo {
  display: block;
  border: 2px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}

.lead-card__reply-photo img {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: cover;
}

@media (max-width: 560px) {
  .lead-card__reply-photo img {
    width: 104px;
    height: 104px;
  }
}

.qr-legal-note {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
}

.qr-legal-note__title {
  margin: 0 0 10px;
  color: var(--gold-deep);
  font-size: 1.02em;
  font-weight: 800;
}

.qr-legal-note__lede {
  margin: 0 0 16px;
  line-height: 1.55;
}

.qr-legal-note__col {
  padding: 12px 14px;
  border-radius: 8px;
}

.qr-legal-note__col--can {
  border: 1px solid rgba(31, 107, 99, 0.25);
  background: rgba(31, 107, 99, 0.04);
}

.qr-legal-note__col--cannot {
  border: 1px solid rgba(165, 58, 42, 0.25);
  background: rgba(165, 58, 42, 0.04);
}

.qr-legal-note__col-title {
  margin: 0 0 8px;
  font-weight: 800;
}

.qr-legal-note__col--can .qr-legal-note__col-title {
  color: var(--ok);
}

.qr-legal-note__col--cannot .qr-legal-note__col-title {
  color: var(--failed);
}

.qr-legal-note__col ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
}

.qr-legal-note__footer {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.5;
}

.badge-scan-only {
  background: rgba(23, 50, 79, 0.08);
  color: var(--navy);
  border: 1px solid rgba(23, 50, 79, 0.18);
}

.qr-enrichment {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(23, 50, 79, 0.18);
}

.qr-enrichment__flag {
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
}

.qr-enrichment__source {
  font-weight: 700;
}

.qr-enrichment__source-note {
  color: var(--muted);
  font-weight: 500;
}

.qr-enrichment__number {
  align-items: center;
}

.qr-enrichment__phone {
  font-weight: 700;
}

.qr-enrichment__carrier {
  color: var(--muted);
}

.qr-enrichment__possible-label {
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qr-enrichment__note {
  font-size: 0.85em;
}

.qr-enrichment__alldnc {
  color: var(--failed);
  font-weight: 600;
}

.qr-enrichment__more {
  margin-top: 6px;
}

.qr-enrichment__more > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.88em;
}

.qr-enrichment__dnc-note {
  margin-top: 6px;
}

.qr-lookup-review {
  width: min(100%, 34rem);
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 10px;
  background: #fff;
}

.qr-lookup-review > summary {
  padding: 10px 12px;
  color: var(--navy);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 800;
}

.qr-lookup-review[open] > summary {
  border-bottom: 1px solid rgba(23, 50, 79, 0.14);
}

.qr-lookup-review__panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.qr-lookup-review__address,
.qr-lookup-review__limits {
  margin: 0;
}

.qr-lookup-review__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.qr-lookup-review__facts > div {
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(23, 50, 79, 0.05);
}

.qr-lookup-review__facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qr-lookup-review__facts dd {
  margin: 3px 0 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.qr-lookup-review__limits {
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.lead-card__form .qr-lookup-review__confirm {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.lead-card__form .qr-lookup-review__confirm input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  padding: 0;
}

.lead-card__form .qr-lookup-review__submit {
  width: 100%;
  min-height: 44px;
  white-space: normal;
}

@media (max-width: 480px) {
  .qr-lookup-review__facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .billing-hero {
    grid-template-columns: 1fr;
  }

  .billing-balance {
    min-height: 0;
  }

  .billing-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .credit-strip-actions {
    width: 100%;
    margin-left: 0;
  }

  .credit-strip-button {
    flex: 1 1 auto;
    text-align: center;
  }

  .billing-summary-grid {
    grid-template-columns: 1fr;
  }

  .billing-balance,
  .billing-summary-card {
    padding: 18px;
  }
}

/* A 640px statement table is useful at desktop widths, but a field user must
   be able to read each transaction amount without hunting for a clipped
   horizontal scroller. Keep the semantic table and turn each row into a
   compact statement card on a phone. */
@media (max-width: 700px) {
  .billing-activity-table-wrap {
    overflow: visible;
    border: 0;
  }

  .billing-activity-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

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

  .billing-activity-table tbody {
    display: grid;
    gap: 10px;
  }

  .billing-activity-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
  }

  .billing-activity-table td {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .billing-activity-table__when,
  .billing-activity-table__activity {
    grid-column: 1 / -1;
  }

  .billing-activity-table__when {
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    font-weight: 800;
  }

  .billing-activity-table__cards {
    grid-column: 1;
    text-align: left !important;
  }

  .billing-activity-table__amount {
    grid-column: 2;
  }

  .billing-activity-table__cards::before,
  .billing-activity-table__amount::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

/* Contractor handoff: role truth, safe action contracts, and narrow-screen
   readability. These classes are shared by the Contractor Dashboard shell. */
.environment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(143, 91, 0, 0.35);
  border-radius: 999px;
  background: rgba(200, 138, 47, 0.12);
  color: #704800;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.private-error,
.action-contract,
.recipient-review,
.launch-team-readiness {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}


.private-error {
  max-width: 720px;
  margin: clamp(24px, 7vw, 84px) auto;
  padding: clamp(24px, 5vw, 48px);
}

.action-contract {
  display: block;
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.03);
}

.action-contract-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.action-contract-main strong {
  font-size: 1rem;
  color: var(--navy);
  display: block;
  margin-bottom: 2px;
}

.action-contract-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.action-contract-actions {
  flex-shrink: 0;
}

.action-contract-actions .button-link {
  white-space: nowrap;
}

.recipient-review {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.mailing-approval-review {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
  justify-items: start;
}

@media (max-width: 680px) {
  .action-contract-main {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .action-contract-actions .button-link {
    width: 100%;
    justify-content: center;
  }
}

.action-contract p,
.recipient-review p {
  margin: 0;
}

.action-contract--compact {
  padding: 12px 14px;
}

.action-contract--danger {
  border-color: rgba(159, 43, 43, 0.4);
  background: rgba(159, 43, 43, 0.08);
}

.action-contract--safe {
  border-color: rgba(37, 96, 59, 0.35);
  background: rgba(37, 96, 59, 0.07);
}

.recipient-review-list,
.first-run-checklist,
.settings-summary-list {
  margin: 0;
  padding: 0;
}

.recipient-review-list {
  --recipient-row-height: 38px;
  position: relative;
  max-height: 228px;
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.84);
  list-style: none;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.recipient-review-list__row {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 10px;
  height: var(--recipient-row-height);
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  overflow: hidden;
  transition: background 0.12s ease;
}

.recipient-review-list__row:hover,
.recipient-review-list__row:focus-within {
  background: rgba(31, 107, 99, 0.08);
}

.recipient-review-list__spacer {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

.recipient-review-list__number {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.recipient-review-list__name,
.recipient-review-list__address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-review-list__address {
  color: var(--muted);
}

.mailing-final-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

.mailing-final-grid > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mailing-final-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.mailing-final-grid input[type="date"] {
  padding: 6px 10px;
  min-height: 36px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.settings-summary-list {
  display: grid;
  gap: 12px;
}

.settings-summary-list > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.settings-summary-list dt {
  color: var(--muted);
  font-weight: 800;
}

.settings-summary-list dd {
  margin: 0;
}

.first-run-checklist {
  display: grid;
  gap: 10px;
  list-style: none;
  counter-reset: first-run-step;
}

.first-run-checklist li {
  position: relative;
  min-height: 44px;
  padding: 10px 12px 10px 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  counter-increment: first-run-step;
}

.first-run-checklist li::before {
  content: counter(first-run-step);
  position: absolute;
  left: 12px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(232, 200, 150, 0.95);
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 700;
}

.material-sections-scroll {
  position: relative;
  max-width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid rgba(23, 50, 79, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(200, 138, 47, 0.12), transparent 18px) left / 24px 100% no-repeat,
    #fff;
  box-shadow: inset -12px 0 16px -16px rgba(23, 50, 79, 0.75);
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.material-sections-table {
  min-width: 720px;
}

.material-sections-table th:first-child,
.material-sections-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 150px;
  background: #fff;
  box-shadow: 6px 0 10px -10px rgba(23, 50, 79, 0.9);
}

.report-doc,
.report-doc__section,
.report-doc__menu-item,
.report-doc__menu-copy {
  min-width: 0;
  max-width: 100%;
}

.report-doc__title,
.report-doc__lede,
.report-doc__menu-description,
.report-doc__menu-name {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .operator-layout main summary,
  .operator-layout main button,
  .operator-layout main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .operator-layout main select,
  .operator-layout main textarea,
  .operator-layout main .button-link,
  .operator-layout main .properties-tab,
  .operator-layout main .leads-tab {
    min-height: 44px;
  }

  .operator-layout main summary {
    display: flex;
    align-items: center;
  }

  /* The round "?" hint is not a tap target, so the 44px floor above stretches
     it into an oval. Pin height to width so it stays circular. */
  .operator-layout main .lead-typo__help {
    width: 24px;
    height: 24px;
    min-height: 24px;
  }

  .operator-layout main .roof-analysis-help-trigger {
    height: 30px;
    min-height: 30px;
  }

  .operator-layout .campaign-list-tray .campaign-card-actions .button-link,
  .operator-layout .campaign-list-tray .campaign-card-actions .campaign-edit > summary,
  .operator-layout .campaign-list-tray .campaign-delete > summary,
  .operator-layout .campaign-list-tray .campaign-archive-btn {
    min-height: 44px;
  }
}

@media (max-width: 700px) {
  .operator-layout main summary,
  .operator-layout main button,
  .operator-layout main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .operator-layout main select,
  .operator-layout main textarea {
    min-height: 44px;
  }

  .operator-layout main summary {
    display: flex;
    align-items: center;
  }

  .campaign-list-tray .campaign-delete > summary,
  .campaign-list-tray .campaign-archive-btn {
    min-height: 44px;
  }

  .mailing-final-grid,
  .settings-summary-list > div {
    grid-template-columns: 1fr;
  }

  .properties-tab-list {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    overscroll-behavior-inline: contain;
  }

  .properties-tab {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .report-doc__menu-item {
    grid-template-columns: 1fr;
  }

  .report-doc__menu-price {
    text-align: left;
  }

  .report-doc__head,
  .report-doc__section,
  .report-doc__cta {
    padding-left: 14px;
    padding-right: 14px;
  }

  .material-sections-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-gutter: auto;
  }

  .material-sections-table {
    display: block;
    min-width: 0;
  }

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

  .material-sections-table tbody {
    display: grid;
    gap: 12px;
  }

  .material-sections-table tr {
    display: grid;
    padding: 4px 12px;
    border: 1px solid rgba(23, 50, 79, 0.18);
    border-radius: 10px;
    background: #fff;
  }

  .material-sections-table td,
  .material-sections-table td:first-child {
    position: static;
    display: grid;
    grid-template-columns: minmax(7.25rem, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 9px 0;
    background: transparent;
    box-shadow: none;
    overflow-wrap: anywhere;
  }

  .material-sections-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .material-sections-table td:first-child {
    border-bottom-color: rgba(200, 138, 47, 0.28);
  }

  .material-sections-table .material-confidence,
  .material-sections-table .material-boundary {
    display: block;
    margin: 4px 0 0;
  }
}

@media (max-width: 390px) {
  .panel,
  .private-error {
    border-radius: 10px;
  }

  .recipient-review,
  .action-contract {
    padding: 13px;
  }

  .report-doc__title-row,
  .report-doc__section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .job-progress-guidance,
  .job-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-action-card {
    padding: 14px;
  }

  .job-action-card button,
  .job-progress-footer-actions .button-link {
    width: 100%;
    justify-content: center;
  }
}

:where(
  .operator-layout,
  .auth-page
) :where(
  a,
  button,
  summary,
  [tabindex]
):focus-visible {
  outline: 3px solid #0b69c7;
  outline-offset: 3px;
}

:where(
  .operator-layout,
  .auth-page
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
):focus,
:where(
  .operator-layout,
  .auth-page
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
):focus-visible {
  outline: none !important;
  border-color: #0b69c7 !important;
  box-shadow: 0 0 0 3px #b4d7ff !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Contractor handoff fixes — recipient review at real campaign size, real
   call/text actions on a lead, per-home notes, disabled sources with a reason,
   and always-visible help on the estimate-settings screen.
   --------------------------------------------------------------------------- */

.recipient-review__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.recipient-review__tools .button-link {
  min-height: 44px;
  padding: 10px 16px;
}

@media (max-width: 480px) {
  .recipient-review__tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .recipient-review__tools .button-link {
    width: 100%;
    justify-content: center;
  }
}

.recipient-review {
  gap: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.recipient-review__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--navy);
}

.recipient-review__summary > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.recipient-review__summary strong {
  font-size: 1.06rem;
}

.recipient-review__summary .summary-meta {
  color: var(--gold-deep);
  font-size: 0.86rem;
  font-weight: 700;
}

.recipient-review__search {
  display: grid;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 0;
}

.recipient-review__search input {
  width: 100%;
  min-width: 0;
}

.recipient-review__count {
  margin: 0;
  font-size: 0.86rem;
}

.recipient-review__empty {
  margin: 0;
}

.lead-card__action--call,
.lead-card__action--text {
  color: var(--navy);
}

.lead-resend-review {
  display: grid;
  gap: 12px;
  scroll-margin-top: 96px;
  margin: 14px 0;
  padding: 16px;
  border: 2px solid rgba(159, 43, 43, 0.35);
  border-radius: 12px;
  background: rgba(159, 43, 43, 0.045);
}

.lead-resend-review .eyebrow,
.lead-resend-review h3,
.lead-resend-review p {
  margin: 0;
}

.lead-resend-review__warning {
  line-height: 1.45;
}

.lead-resend-review__message {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}

.lead-resend-review__message p {
  margin: 6px 0 8px;
  line-height: 1.5;
}

.lead-resend-review__message a {
  font-size: 0.82rem;
}

.lead-resend-review__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.lead-resend-review__actions .button-link {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.lead-contact-sheet__facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.lead-contact-sheet__facts > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 34%) 1fr;
  gap: 10px;
  align-items: baseline;
}

.lead-contact-sheet__facts dt {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead-contact-sheet__facts dd {
  margin: 0;
  font-size: 0.92rem;
}

.property-note-form {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.property-note-form .form-hint {
  margin: 0;
}

/* An unavailable campaign source is shown with its reason, never hidden. */
.source-option.is-disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.source-option.is-disabled input {
  cursor: not-allowed;
}

.pricing-help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.pricing-label-row:has(.pricing-help) {
  display: block;
}

@media (max-width: 640px) {
  .recipient-review-list {
    --recipient-row-height: 56px;
    height: 16.5rem;
    max-height: 16.5rem;
  }

  .recipient-review-list__row {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-content: center;
    gap: 2px 10px;
    padding: 7px 10px;
  }

  .recipient-review-list__address {
    grid-column: 2;
    font-size: 0.84rem;
  }

  .lead-contact-sheet__facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* On a phone the visible help must sit under its label, not beside it. */
.pricing-legend-row:has(.pricing-help),
.pricing-label-row:has(.pricing-help) {
  display: block;
}

.pricing-legend-row:has(.pricing-help) > span:first-child {
  display: block;
}

/* ---------------------------------------------------------------------------
   Wave 2 — momentum and reward.
   Color rule: state is carried by check marks, numbers, and weight. Gold is
   reserved for the one genuine-first accent per screen (first postcard on the
   campaign page, first lead on the dashboard). Never blue-vs-purple.
   --------------------------------------------------------------------------- */

/* The "what's next" strip */
.campaign-journey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding: 9px 14px;
}

.campaign-journey__steps {
  display: flex;
  align-items: center;
  gap: 6px 0;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.campaign-journey__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Hairline rail between marks: the steps read as one connected path
   instead of four loose badges. It fills in as the campaign advances. */
.campaign-journey__step + .campaign-journey__step::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 1.5px;
  margin-left: 11px;
  border-radius: 1px;
  background: rgba(23, 50, 79, 0.14);
}

.campaign-journey__step.is-done + .campaign-journey__step::before {
  background: rgba(23, 50, 79, 0.38);
}

.campaign-journey__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.campaign-journey__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.005em;
}

.campaign-journey__step.is-done .campaign-journey__mark {
  border-color: var(--navy);
  background: var(--navy);
  color: white;
}

.campaign-journey__step.is-done .campaign-journey__label {
  color: var(--text);
}

.campaign-journey__step.is-current .campaign-journey__mark {
  border-color: var(--gold-deep);
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 0 0 3px rgba(200, 138, 47, 0.18);
}

.campaign-journey__step.is-current .campaign-journey__label {
  color: var(--text);
  font-weight: 800;
}

.campaign-journey__action-slot {
  display: flex;
  justify-content: flex-end;
}

.campaign-journey__action {
  white-space: normal;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.83rem;
}

.campaign-journey__action--first {
  border-color: var(--gold-deep);
  background: var(--gold);
  color: var(--navy);
}

.campaign-journey__action--first:hover,
.campaign-journey__action--first:focus-visible {
  background: var(--gold-deep);
  color: white;
}

@media (max-width: 640px) {
  .campaign-journey {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-journey__action-slot {
    justify-content: stretch;
  }

  .campaign-journey__action {
    width: 100%;
    min-height: 44px;
  }
}

/* Live research grid */
.live-research__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.live-research__counter {
  display: block;
  font-size: 1.05rem;
}

.live-research__latency {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.live-research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.live-research__empty {
  grid-column: 1 / -1;
  margin: 0;
}

.live-home-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-strong);
}

.live-home-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.live-home-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-home-card__waiting {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--bg),
      var(--bg) 10px,
      rgba(23, 50, 79, 0.05) 10px,
      rgba(23, 50, 79, 0.05) 20px
    );
}

.live-home-card__address {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.live-home-card__price {
  font-size: 0.82rem;
  color: var(--text);
}

.live-home-card__check {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ok);
}

/* The one place motion is encouraged: a card filling in. 150ms, no bounce. */
.live-home-card.is-fresh {
  animation: live-home-card-fade 150ms ease-out;
}

@keyframes live-home-card-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-home-card.is-fresh {
    animation: none;
  }
}

/* First-lead win card (dashboard) */
.first-lead-win {
  border: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(200, 138, 47, 0.25);
}

.first-lead-win__who {
  margin: 0;
  font-size: 0.95rem;
}

.first-lead-win__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  background: linear-gradient(180deg, #d89b3f 0%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 8px rgba(200, 138, 47, 0.35);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .15s ease, background .15s ease;
}

.first-lead-win__call:hover,
.first-lead-win__call:focus-visible {
  background: var(--gold-deep);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(138, 93, 24, 0.45);
}

.first-lead-win__call:active {
  transform: scale(0.98);
}

/* Shared dashboard dropdown treatment. Keep native <select> behavior while
   giving every operator-facing picker the same chevron, spacing, and states. */
.operator-layout select:not([multiple]),
.operator-layout main select:not([multiple]),
main select:not([multiple]),
.leads-modal select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2317324f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 20px;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.06);
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.operator-layout select:not([multiple]):hover,
.operator-layout main select:not([multiple]):hover,
main select:not([multiple]):hover,
.leads-modal select:not([multiple]):hover {
  border-color: rgba(23, 50, 79, 0.58);
  background-color: #fffdf8;
}

.operator-layout select:not([multiple]):focus,
.operator-layout select:not([multiple]):focus-visible,
.operator-layout main select:not([multiple]):focus,
.operator-layout main select:not([multiple]):focus-visible,
main select:not([multiple]):focus,
main select:not([multiple]):focus-visible,
.leads-modal select:not([multiple]):focus,
.leads-modal select:not([multiple]):focus-visible {
  outline: none !important;
  border-color: #0b69c7 !important;
  box-shadow: 0 0 0 3px #b4d7ff !important;
}

.operator-layout select:not([multiple]):disabled,
.operator-layout main select:not([multiple]):disabled,
main select:not([multiple]):disabled,
.leads-modal select:not([multiple]):disabled {
  border-color: rgba(23, 50, 79, 0.12);
  background-color: rgba(23, 50, 79, 0.05);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

@media (forced-colors: active) {
  .operator-layout select:not([multiple]),
  .operator-layout main select:not([multiple]),
  main select:not([multiple]),
  .leads-modal select:not([multiple]) {
    -webkit-appearance: auto;
    appearance: auto;
    padding-right: 14px;
    background-image: none;
  }
}

/* ============================================================
   Campaign page — compact pass
   Three jobs: (1) give the page one icon set, (2) make the four
   collapsed drawers one row instead of three different rows, and
   (3) take the air out of the panel that wraps all of it.
   Icons are CSS masks keyed off `data-icon`, because this page's
   markup is pinned by tests and must not gain wrapper elements.
   ============================================================ */

/* --- Icon set (alpha masks; the consumer picks the colour) --- */
[data-icon="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.4l9 7.2'/%3E%3Cpath d='M5.6 9.4V20.2h12.8V9.4'/%3E%3C/svg%3E"); }
[data-icon="card"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='2'/%3E%3Crect x='5.8' y='9' width='5.4' height='5.6' rx='1'/%3E%3Cpath d='M14.4 9.8h4.2M14.4 12.6h4.2M14.4 15.4h2.6'/%3E%3C/svg%3E"); }
[data-icon="qr"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='6.4' height='6.4' rx='1.2'/%3E%3Crect x='14.2' y='3.4' width='6.4' height='6.4' rx='1.2'/%3E%3Crect x='3.4' y='14.2' width='6.4' height='6.4' rx='1.2'/%3E%3Cpath d='M14.2 14.2h3.2v3.2M20.6 17.4v3.2h-3.2'/%3E%3C/svg%3E"); }
[data-icon="phone"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.6h3.1l1.5 3.9-2.1 1.5a12.4 12.4 0 0 0 6.1 6.1l1.5-2.1 3.9 1.5v3.1a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.4 5.8a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E"); }
[data-icon="crm"],
[data-icon="revenue"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
[data-icon="printer"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.6V3.6h10v5'/%3E%3Crect x='3.4' y='8.6' width='17.2' height='7.4' rx='2'/%3E%3Cpath d='M7 13.6h10v6.8H7z'/%3E%3C/svg%3E"); }
[data-icon="truck"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.6h10.6v9.2H2.6z'/%3E%3Cpath d='M13.2 9.8h3.9l3.3 3.2v2.8h-7.2'/%3E%3Ccircle cx='6.8' cy='18.2' r='1.9'/%3E%3Ccircle cx='17.2' cy='18.2' r='1.9'/%3E%3C/svg%3E"); }
[data-icon="delivered"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M8.2 12.3l2.6 2.6 5-5.5'/%3E%3C/svg%3E"); }
[data-icon="alert"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.3 21 19.4H3z'/%3E%3Cpath d='M12 10.1v3.9'/%3E%3Cpath d='M12 16.6v.5'/%3E%3C/svg%3E"); }
[data-icon="mail"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='2'/%3E%3Cpath d='M3.2 6.6 12 13.1l8.8-6.5'/%3E%3C/svg%3E"); }
[data-icon="check"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.6l4.9 4.9L19.4 6.6'/%3E%3C/svg%3E"); }
[data-icon="eye"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.6 12 5.6 21.5 12 21.5 12 18 18.4 12 18.4 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
[data-icon="sliders"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.2h9.4M18.4 7.2h1.6M4 12h2.4M11 12h9M4 16.8h7.4M16.4 16.8h3.6'/%3E%3Ccircle cx='16' cy='7.2' r='2.2'/%3E%3Ccircle cx='8.6' cy='12' r='2.2'/%3E%3Ccircle cx='14' cy='16.8' r='2.2'/%3E%3C/svg%3E"); }
[data-icon="hold"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.9 9.4v5.2M14.1 9.4v5.2'/%3E%3C/svg%3E"); }
[data-icon="image"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.6' cy='10' r='1.6'/%3E%3Cpath d='M3.6 17.2l4.9-4.4 4 3.4 3-2.5 4.9 4'/%3E%3C/svg%3E"); }
[data-icon="settings"],
[data-icon="gear"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
[data-icon="unknown"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.7 9.5a2.4 2.4 0 1 1 3.1 2.8c-.7.3-.9.8-.9 1.4v.5'/%3E%3Cpath d='M12 17.1v.5'/%3E%3C/svg%3E"); }

/* --- Metric-tile icons -------------------------------------- */
/* Quiet marker in the tile's top-right corner. The tiles reserve
   30px of right padding for it, so long labels never collide. */
.mailing-tracker-facts .mailing-tracker-grid > div[data-icon]::before,
.campaign-primary-stats .stat[data-icon]::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 15px;
  height: 15px;
  background-color: var(--gold-deep);
  opacity: 0.58;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.mailing-tracker-facts .mailing-tracker-grid > .mailing-tracker-attention[data-icon]::before {
  background-color: var(--failed);
  opacity: 0.62;
}

/* --- Collapsed drawers: one row style ----------------------- */
/* Postcard check, the approval panel, the phone-lead table and
   campaign setup were three different surfaces (white panel, teal
   gradient, cream subtle-panel) doing the same job. */
.batch-test-panel:not([open]),
.campaign-settings-drawer:not([open]),
.mailing-workflow-panel--collapsible:not([open]),
.campaign-lead-details:not([open]) {
  margin: 8px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(23, 50, 79, 0.09);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: none;
}

.batch-test-panel:not([open]):hover,
.campaign-settings-drawer:not([open]):hover,
.mailing-workflow-panel--collapsible:not([open]):hover,
.campaign-lead-details:not([open]):hover {
  border-color: rgba(200, 138, 47, 0.4);
}

/* Leading icon. No chip behind it: a mask paints one shape, and the
   bare glyph keeps the row lighter than a filled square would. */
.batch-test-panel[data-icon] > summary::before,
.campaign-settings-drawer[data-icon] > summary::before,
.mailing-workflow-panel--collapsible[data-icon]:not([open]) > .mailing-workflow-summary::before,
.campaign-lead-details[data-icon]:not([open]) > .mailing-workflow-summary::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 18px;
  height: 18px;
  background-color: var(--gold-deep);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.batch-test-panel[data-icon] > summary,
.campaign-settings-drawer[data-icon] > summary {
  gap: 12px;
}

.batch-test-panel[data-icon] > summary > span,
.campaign-settings-drawer[data-icon] > summary > span {
  flex: 1 1 auto;
  min-width: 0;
}

.mailing-workflow-panel--collapsible[data-icon]:not([open]) > .mailing-workflow-summary,
.campaign-lead-details[data-icon]:not([open]) > .mailing-workflow-summary {
  gap: 3px 12px;
  min-height: 26px;
  padding-right: 30px;
}

/* Same chevron in the same place on all four rows. The approval and
   phone-lead summaries drew theirs from rotated borders; this swaps
   them onto the drawer glyph so nothing points a different way. */
.mailing-workflow-panel--collapsible:not([open]) > .mailing-workflow-summary::after,
.campaign-lead-details:not([open]) > .mailing-workflow-summary::after {
  content: "\25BE";
  width: auto;
  height: auto;
  border: 0;
  top: 50%;
  right: 8px;
  margin-top: -0.62em;
  color: var(--gold-deep);
  font-size: 0.9rem;
  line-height: 1;
  transform: rotate(-90deg);
}

/* --- Collapsed drawer typography ---------------------------- */
.batch-test-panel:not([open]) summary strong,
.campaign-settings-drawer:not([open]) summary strong,
.mailing-workflow-panel--collapsible:not([open]) > .mailing-workflow-summary > strong,
.campaign-lead-details:not([open]) > .mailing-workflow-summary > strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--navy);
}

.batch-test-panel:not([open]) summary small,
.campaign-settings-drawer:not([open]) summary small {
  font-size: 0.78rem;
  line-height: 1.3;
}

.mailing-workflow-panel--collapsible:not([open]) > .mailing-workflow-summary > .summary-meta,
.campaign-lead-details:not([open]) > .mailing-workflow-summary > .summary-meta {
  font-size: 0.8rem;
  font-weight: 600;
}

.batch-test-panel:not([open]) summary .eyebrow,
.campaign-settings-drawer:not([open]) summary .eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

/* --- Panel density ------------------------------------------ */
/* The page is a panel wrapping panels wrapping tiles. Trimming the
   outer padding and radius removes one visible frame from that. */
.panel.campaign-meta {
  padding: 16px;
  border-radius: 14px;
}

.panel.campaign-journey {
  border-radius: 14px;
}

.campaign-command-strip {
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .batch-test-panel:not([open]),
  .campaign-settings-drawer:not([open]),
  .mailing-workflow-panel--collapsible:not([open]),
  .campaign-lead-details:not([open]) {
    padding: 10px 12px;
  }

  .panel.campaign-meta {
    padding: 13px;
  }
}

/* --- Expanded drawers keep the same header line -------------- */
/* Open or closed, the approval panel reads as the same row; only the
   body appears. */
.mailing-workflow-panel {
  border-color: rgba(23, 50, 79, 0.09);
  background: var(--panel);
}

.mailing-workflow-panel[open],
.campaign-lead-details[open] {
  padding: 12px 14px;
  border-radius: 12px;
}

.mailing-workflow-panel[data-icon][open] > .mailing-workflow-summary,
.campaign-lead-details[data-icon][open] > .mailing-workflow-summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding-right: 30px;
}

.mailing-workflow-panel[data-icon][open] > .mailing-workflow-summary::before,
.campaign-lead-details[data-icon][open] > .mailing-workflow-summary::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 18px;
  height: 18px;
  background-color: var(--gold-deep);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.mailing-workflow-panel[data-icon][open] > .mailing-workflow-summary > strong,
.campaign-lead-details[data-icon][open] > .mailing-workflow-summary > strong {
  grid-column: 2;
  grid-row: 1;
}

.mailing-workflow-panel[data-icon][open] > .mailing-workflow-summary > .summary-meta,
.campaign-lead-details[data-icon][open] > .mailing-workflow-summary > .summary-meta {
  grid-column: 2;
  grid-row: 2;
}

.mailing-workflow-panel[open] > .mailing-workflow-summary > strong,
.campaign-lead-details[open] > .mailing-workflow-summary > strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.012em;
}

.mailing-workflow-panel[open] > .mailing-workflow-summary > .summary-meta,
.campaign-lead-details[open] > .mailing-workflow-summary > .summary-meta {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Closed points right, open points down — same glyph, same spot. */
.mailing-workflow-panel[open] > .mailing-workflow-summary::after,
.campaign-lead-details[open] > .mailing-workflow-summary::after {
  content: "\25BE";
  width: auto;
  height: auto;
  border: 0;
  top: 50%;
  right: 8px;
  margin-top: -0.62em;
  color: var(--gold-deep);
  font-size: 0.9rem;
  line-height: 1;
  transform: none;
}

/* ---------- Security: recent sign-ins and account changes ---------- */
.account-activity-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.account-activity-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.account-activity-table th,
.account-activity-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.account-activity-table th {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-activity-table td {
  color: var(--navy);
  font-size: 0.9rem;
}

.account-activity-table td:first-child {
  color: var(--muted);
  white-space: nowrap;
}

.account-activity-table tbody tr:last-child td {
  border-bottom: 0;
}

/* One card per record on a phone. Each line says what it is on its own,
   so the repeated column headings are dropped instead of restated. */
@media (max-width: 700px) {
  .account-activity-wrap {
    border: 0;
    border-radius: 0;
  }

  .account-activity-table {
    min-width: 0;
  }

  .account-activity-table thead {
    display: none;
  }

  .account-activity-table tbody {
    display: grid;
    gap: 10px;
  }

  .account-activity-table tbody tr {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
  }

  .account-activity-table td,
  .account-activity-table tbody tr:last-child td {
    padding: 0;
    border: 0;
  }

  .account-activity-table td:first-child {
    font-size: 0.78rem;
    font-weight: 800;
  }
}

/* ============================================================
   Campaign page — premium top section
   Everything here is CSS scoped to campaign-page classes: the
   page's markup is pinned by exact-string tests, so this file
   is where the redesign has to live.
   ============================================================ */

/* --- 1. Identity block -------------------------------------- */
/* Title, one meta line, one optional receipt line. */
.campaign-heading {
  margin-bottom: 18px;
}

.campaign-heading h1 {
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin: 0;
}

.campaign-heading h1::after {
  margin-top: 10px;
  margin-bottom: 0;
}

.campaign-heading .title-row {
  gap: 10px;
}

.campaign-heading > div > p.muted {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.campaign-heading .campaign-import-receipt {
  margin-top: 3px;
  font-size: 0.79rem;
}

/* --- 1b. Creative badges ------------------------------------ */
/* The two permanent creative choices — which postcard, which photo
   style — as tags on the identity block. They replaced a six-row
   "Locked for this campaign" drawer further down the page. Neutral
   navy tint: no hue carries meaning, so nothing depends on telling
   two colors apart. */
.campaign-heading .campaign-creative-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
}

.campaign-creative-badge {
  gap: 7px;
  padding: 4px 10px;
  background: rgba(23, 50, 79, 0.06);
  border-color: var(--line-soft);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  /* Long style names wrap instead of pushing the page sideways. */
  white-space: normal;
}

.campaign-creative-badge__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 2. Journey strip --------------------------------------- */
.panel.campaign-journey {
  padding: 12px 14px;
  margin-bottom: 12px;
}

/* --- 3. Phone-lead strip ------------------------------------ */
/* The Phone leads tile and the "Phone numbers you got" drawer both
   already carry the total. What is only here is the two time
   windows, so that is all this keeps room for. */
.campaign-lead-summary {
  gap: 10px 18px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.campaign-lead-summary__head .muted {
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--muted);
}

.campaign-lead-summary__metric strong {
  font-size: 1.18rem;
}

@media (max-width: 900px) {
  /* Phone: title row, one small disclaimer, then the two windows
     side by side — not a stacked column of four boxed figures. */
  .campaign-lead-summary {
    gap: 8px;
    padding: 10px 12px;
  }

  .campaign-lead-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .campaign-lead-summary__bucket {
    gap: 5px;
    padding-left: 14px;
  }

  .campaign-lead-summary__metrics {
    gap: 4px 16px;
  }

  .campaign-lead-summary__head h2 {
    font-size: 0.92rem;
  }
}

/* --- 4. The facts band -------------------------------------- */
/* One full-width band, two labelled rows, same tile. */
.campaign-overview-grid .section-kicker,
.campaign-overview-grid .mailing-tracker-facts .section-kicker {
  margin: 0 0 8px;
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
}

.campaign-overview-grid .campaign-stats-kicker {
  margin-top: 14px;
}

.campaign-overview-grid .mailing-tracker-facts {
  display: block;
  margin: 0;
}

.campaign-primary-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

/* Operator mode renders nine tiles; five across leaves a row of
   four rather than one stranded tile on a line of its own. */
.campaign-primary-stats:has(> .stat:nth-child(9)) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mailing-tracker-facts .mailing-tracker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* --- 5. One premium tile ------------------------------------ */
/* Both groups in the band use this. Solid panel + hairline +
   a whisper of lift, instead of a 50%-alpha wash that let the
   page background show through and made the tiles look unfinished. */
.campaign-primary-stats .stat,
.mailing-tracker-facts .mailing-tracker-grid > div {
  padding: 11px 30px 12px 13px;
  border: 1px solid rgba(23, 50, 79, 0.07);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow: 0 1px 2px rgba(23, 50, 79, 0.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.campaign-primary-stats .stat:hover,
.mailing-tracker-facts .mailing-tracker-grid > div:hover {
  border-color: rgba(200, 138, 47, 0.38);
  box-shadow: 0 4px 12px rgba(23, 50, 79, 0.07);
}

/* Every tile opens the home list filtered to the homes it counted, so the
   whole tile is the target. The tile already lifts on hover; the pointer
   plus that lift is the affordance — no extra caret or link colour, which
   would turn a quiet number band into five competing links. */
.campaign-primary-stats .stat-link {
  display: block;
}

/* The applied filter, marked on the tile that applied it. Gold against the
   navy number, never a hue shift, so it survives colour-blind vision — and
   it is the only thing on the band that says why the list below is short. */
.campaign-primary-stats .stat-link[aria-current] {
  border-color: var(--gold);
  background: rgba(200, 138, 47, 0.08);
  box-shadow: inset 0 0 0 1px rgba(200, 138, 47, 0.35);
}

.campaign-primary-stats .stat-link[aria-current]:hover {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(200, 138, 47, 0.35),
              0 4px 12px rgba(23, 50, 79, 0.07);
}

.campaign-primary-stats .stat-label,
.mailing-tracker-facts .mailing-tracker-grid dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

.campaign-primary-stats .stat strong,
.mailing-tracker-facts .mailing-tracker-grid dd {
  font-size: 1.62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.campaign-primary-stats .stat small {
  margin-top: 6px;
  font-size: 0.715rem;
  line-height: 1.32;
  color: var(--muted);
}

/* The premium tile above is a solid panel, which outranks the plain
   `.mailing-tracker-grid .mailing-tracker-attention` pair. Restate the
   attention state here or the "needs support" bucket loses the only
   colour that marks it — on a surface where that count means money. */
.mailing-tracker-facts .mailing-tracker-grid > .mailing-tracker-attention {
  border-color: rgba(159, 43, 43, 0.28);
  background: rgba(159, 43, 43, 0.055);
}

.mailing-tracker-facts .mailing-tracker-grid > .mailing-tracker-attention:hover {
  border-color: rgba(159, 43, 43, 0.5);
  box-shadow: 0 4px 12px rgba(159, 43, 43, 0.1);
}

.mailing-tracker-facts .mailing-tracker-grid > .mailing-tracker-attention dd {
  color: var(--failed);
}

.campaign-primary-stats .stat[data-icon]::before,
.mailing-tracker-facts .mailing-tracker-grid > div[data-icon]::before {
  top: 11px;
  right: 11px;
  opacity: 0.5;
}

/* --- 6. State card + its footnote --------------------------- */
.campaign-command-card--outcome {
  padding: 15px 16px;
}

/* The shortfall line is a footnote to the card above it, not a new
   section — it used to float in open space between the two. */
.campaign-research-shortfall-note {
  margin: 0 0 14px;
  padding: 9px 13px;
  border: 1px solid rgba(200, 138, 47, 0.28);
  border-radius: 8px;
  background: rgba(200, 138, 47, 0.06);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* --- 7. Phone ----------------------------------------------- */
@media (max-width: 640px) {
  .campaign-heading {
    margin-bottom: 12px;
  }

  .panel.campaign-journey {
    padding: 11px 12px;
    margin-bottom: 10px;
  }

  /* Two tiles across, both groups. Four number tiles per group is
     two tidy rows, not four full-width slabs. */
  .campaign-primary-stats,
  .campaign-primary-stats:has(> .stat:nth-child(9)),
  .mailing-tracker-facts .mailing-tracker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .campaign-primary-stats .stat,
  .mailing-tracker-facts .mailing-tracker-grid > div {
    padding: 10px 26px 11px 11px;
    border-radius: 11px;
  }

  .campaign-primary-stats .stat strong,
  .mailing-tracker-facts .mailing-tracker-grid dd {
    font-size: 1.45rem;
  }

  .campaign-command-card--outcome {
    padding: 13px;
  }

  .campaign-research-shortfall-note {
    margin-bottom: 12px;
    padding: 8px 11px;
    font-size: 0.78rem;
  }

  .campaign-overview-grid .campaign-stats-kicker {
    margin-top: 12px;
  }

  /* Wrapped, the connector rail dangles off the front of the second row
     and the four steps read as a ragged list. Two clean columns, no rail —
     the check marks and the filled current mark already carry the state. */
  .campaign-journey__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 10px;
    width: 100%;
  }

  .campaign-journey__step + .campaign-journey__step::before {
    display: none;
  }

  .campaign-journey__label {
    font-size: 0.78rem;
  }

  /* The state card's supporting line ran to three lines at body size. */
  .campaign-command-card--outcome p.muted {
    font-size: 0.88rem;
    line-height: 1.4;
  }
}

/* Team access switches. State must read by shape and the On/Off text, never
   color alone; every span below resets the global `label span` shout. */
.team-admin-line {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-weight: 800;
  color: var(--navy);
}

.team-member__you {
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 600;
}

.team-access {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 24px 32px;
  align-items: start;
}

.team-access__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-member__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  align-items: start;
}

.team-member__fields > label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-access h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.team-access__status {
  min-height: 1.3em;
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--ok);
  font-weight: 700;
}

.team-access__status.is-failed {
  color: var(--failed);
}

.access-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.access-toggle__control {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.access-toggle--unavailable .access-toggle__control {
  cursor: not-allowed;
}

.access-toggle__control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.access-toggle__slider {
  flex: none;
  position: relative;
  width: 42px;
  height: 24px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--panel-strong);
  margin-bottom: 0;
  transition: background 0.15s ease;
}

.access-toggle__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy);
  transition: left 0.15s ease;
}

.access-toggle__control input:checked + .access-toggle__slider {
  background: var(--navy);
}

.access-toggle__control input:checked + .access-toggle__slider::after {
  left: 20px;
  background: var(--panel-strong);
}

.access-toggle__control input:focus-visible + .access-toggle__slider {
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
  outline: none;
}

.access-toggle__control input:disabled + .access-toggle__slider {
  border-color: var(--muted);
  opacity: 0.55;
}

.access-toggle__name,
.access-toggle__state {
  display: inline;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.98rem;
}

.access-toggle__name {
  color: var(--text);
  font-weight: 700;
}

.access-toggle--unavailable .access-toggle__name {
  color: var(--muted);
}

.access-toggle__state {
  min-width: 2.4em;
  color: var(--navy);
  font-weight: 800;
}

.access-toggle__state--plan {
  min-width: 0;
  color: var(--muted);
  font-style: italic;
  font-weight: 600;
}

.access-toggle__hint {
  margin: 2px 0 0 52px;
  font-size: 0.88rem;
  color: var(--muted);
}

.access-scope {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
}

.access-scope legend {
  padding: 0 6px;
  font-weight: 800;
  color: var(--navy);
}

.access-scope__choice {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  margin: 6px 0;
  cursor: pointer;
}
.access-scope__note {
  margin: 4px 0 8px;
  font-size: 0.88rem;
}

.access-scope__list {
  display: grid;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.access-scope__campaign {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  cursor: pointer;
}

.access-scope__choice input,
.access-scope__campaign input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--navy);
}

.access-scope__campaign:has(input:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

@media (max-width: 860px) {
  .team-access {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .team-member__fields {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Universal Button Spacing Standard (Anti-Collision / Never-Touch Protection)
   --------------------------------------------------------------------------- */

button,
.button-link,
.primary-button,
input[type="submit"],
input[type="button"] {
  box-sizing: border-box;
  transition: transform .12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

button:active:not([disabled]):not([aria-disabled="true"]),
.button-link:active:not([disabled]):not([aria-disabled="true"]),
.primary-button:active:not([disabled]):not([aria-disabled="true"]),
.btn:active:not([disabled]):not([aria-disabled="true"]),
input[type="submit"]:active:not([disabled]):not([aria-disabled="true"]),
input[type="button"]:active:not([disabled]):not([aria-disabled="true"]) {
  transform: scale(0.985);
}

/* Prevent horizontal collision between adjacent buttons */
button:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item) + button:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
.button-link:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item) + .button-link:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
button:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item) + .button-link:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
.button-link:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item) + button:not([role="tab"]):not(.leads-tab):not(.properties-tab):not(.settings-tab):not(.audience-tab):not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
.primary-button + .button-link,
.button-link + .primary-button {
  margin-left: 10px;
}

/* Prevent vertical collision when buttons wrap or follow fields/inputs */
.field + button:not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
.field + .button-link:not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
.field + .primary-button,
input:not([type="hidden"]) + button:not(.leads-filter-dropdown__item):not(.lead-card__menu-item):not(.auth-password-toggle),
input:not([type="hidden"]) + .button-link:not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
input:not([type="hidden"]) + .primary-button,
select + button:not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
select + .button-link:not(.leads-filter-dropdown__item):not(.lead-card__menu-item),
select + .primary-button {
  margin-top: 12px;
}

/* Reset margins for buttons in horizontal flex rows, search groups, and toolbars */
.leads-filter-dropdown__item,
.leads-filter-dropdown__options > button,
.leads-filter-dropdown__options > .button-link,
.lead-card__menu-item,
.lead-card__menu-dropdown button,
.auth-password-toggle,
.auth-password-field > button,
.auth-password-field > .auth-password-toggle,
input + .auth-password-toggle,
.search-input-group > button,
.search-input-group > .primary-button,
.search-input-group > .button-link,
.recipient-review__tools > button,
.recipient-review__tools > .button-link,
.recipient-review__tools > .primary-button,
.property-filter-form__actions > button,
.property-filter-form__actions > .button-link,
.campaign-search-actions > button,
.campaign-search-actions > .button-link,
.canvassing-campaign-actions > button,
.canvassing-campaign-actions > .button-link,
.leads-filter button,
.leads-filter .button-link,
.btn-group > button,
.button-group > button,
.actions > button,
.dialog-actions > button,
.modal__actions > button,
.panel-actions > button,
.tools-actions > button,
.campaign-card-actions > button,
.mailing-proof-links > button,
.operator-sidebar__logout button,
.operator-sidebar__logout > button,
.logout-form button,
.site-header .logout-button,
.crm-sync-btn,
.crm-ribbon__actions button,
.crm-ribbon__actions .button-link,
.crm-ribbon__sync-form button {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* Ensure flex button containers have explicit minimum gaps */
.form-actions,
.button-group,
.btn-group,
.actions,
.modal__actions,
.panel-actions,
.dialog-actions,
.tools-actions,
.campaign-card-actions,
.mailing-proof-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Postcard Stats Totals Row & Card */
.postcard-status-tile--total {
  border-color: rgba(23, 50, 79, 0.22);
  background: rgba(23, 50, 79, 0.04);
}

.postcard-table-totals-row {
  border-top: 2px solid rgba(23, 50, 79, 0.2);
  background: rgba(23, 50, 79, 0.035);
  font-weight: 700;
}

.postcard-table-totals-row th,
.postcard-table-totals-row td {
  padding: 14px 16px;
  color: var(--navy);
}

@media (max-width: 900px) {
  .postcard-campaign-table tfoot {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Storm audience
   The page is intentionally server-rendered: report selection, counts, and
   the frozen preview all come from one backend response.
   --------------------------------------------------------------------------- */

.storm-audience {
  width: min(100%, 1120px);
  gap: 24px;
}

.storm-audience__header {
  gap: 14px;
  padding: 0 2px 2px;
}

.storm-audience__header h1 {
  max-width: 18ch;
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.storm-audience__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.storm-audience__title-row > div {
  min-width: 0;
}

.storm-audience__title-row .eyebrow {
  margin: 0 0 8px;
  color: var(--gold-deep);
}

.storm-audience__coverage {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  border-radius: 999px;
  background: rgba(23, 50, 79, 0.04);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.storm-audience__source-status,
.storm-audience__notice,
.storm-audience__empty {
  margin: 0;
  border-radius: 12px;
}

.storm-audience__source-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(37, 96, 59, 0.2);
  background: rgba(37, 96, 59, 0.06);
  color: #245b3c;
  font-size: 0.86rem;
  font-weight: 700;
}

.storm-audience__source-status--quiet {
  border-color: rgba(23, 50, 79, 0.14);
  background: rgba(23, 50, 79, 0.04);
  color: var(--muted);
}

.storm-audience__status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #328454;
  box-shadow: 0 0 0 3px rgba(50, 132, 84, 0.12);
}

.storm-audience__notice {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  background: rgba(23, 50, 79, 0.04);
  color: var(--navy);
  line-height: 1.45;
}

.storm-audience__notice p,
.storm-audience__empty p,
.storm-audience__counts p,
.storm-audience__sample-heading p {
  margin: 0;
}

.storm-audience__notice--error {
  border-color: rgba(159, 43, 43, 0.25);
  background: rgba(159, 43, 43, 0.07);
  color: var(--failed);
}

.storm-audience__notice--error p {
  color: #743232;
}

.storm-audience__notice--candidate {
  border-color: rgba(200, 138, 47, 0.34);
  background: #fff8ec;
}

.storm-audience__notice--candidate strong {
  color: var(--navy);
}

.storm-audience__notice--candidate p {
  color: #5f5546;
}

.storm-audience__builder {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 20px;
  min-width: 0;
}

.storm-audience__panel {
  align-content: start;
  gap: 22px;
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.storm-audience__panel-heading {
  display: block;
}

.storm-audience__step-heading {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.storm-audience__step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
}

.storm-audience__panel-heading .eyebrow {
  margin: 0 0 5px;
  color: var(--gold-deep);
}

.storm-audience__panel-heading h2 {
  font-size: 1.35rem;
}

.storm-audience__panel-heading p:last-child {
  margin-top: 7px;
  font-size: 0.91rem;
}

.storm-audience__filter-form,
.storm-audience__preview-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.storm-audience__field,
.storm-audience__field-grid {
  min-width: 0;
}

.storm-audience__field {
  display: grid;
  gap: 7px;
  align-content: start;
}

.storm-audience .field-label {
  display: block;
  margin: 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-transform: uppercase;
}

.storm-audience .field-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}

.storm-audience__field input,
.storm-audience__field select,
.storm-audience__filter-form select {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
}

.storm-audience .leads-filter-dropdown {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: #ffffff;
}

.storm-audience .leads-filter-dropdown summary {
  min-height: 44px;
  padding: 10px 38px 10px 14px;
  border-radius: 10px;
  box-sizing: border-box;
}

.storm-audience .leads-filter-dropdown__value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.storm-audience__field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.storm-audience__filter-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.storm-audience__filter-button {
  min-height: 44px;
  white-space: nowrap;
}

.storm-audience__reports-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.storm-audience__list-heading {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.storm-audience__list-heading strong {
  color: var(--navy);
}

.storm-audience__reports {
  display: grid;
  gap: 10px;
  max-height: 455px;
  min-width: 0;
  padding: 2px 4px 2px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storm-report-option {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px !important;
  min-width: 0;
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(23, 50, 79, 0.16);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.storm-report-option:hover {
  border-color: rgba(23, 50, 79, 0.38);
  background: #fffdf8;
}

.storm-report-option:has(input:checked) {
  border-color: var(--navy);
  background: #f4f8fb;
  box-shadow: 0 0 0 2px rgba(23, 50, 79, 0.08);
}

.storm-report-option:focus-within {
  border-color: #0b69c7;
  box-shadow: 0 0 0 3px #b4d7ff;
  outline: none;
}

.storm-report-option input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 2px 0 0;
  accent-color: var(--navy);
}

.storm-report-option__body,
.storm-report-option__topline,
.storm-report-option__meta,
.storm-report-option__remark,
.storm-report-option__hint {
  min-width: 0;
}

.storm-report-option__body {
  display: grid;
  gap: 6px;
}

.storm-report-option__topline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 9px;
}

.storm-report-option__topline strong {
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.3;
}

.storm-report-option__county,
.storm-report-option__meta,
.storm-report-option__remark,
.storm-report-option__hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.storm-report-option__county {
  font-weight: 600;
}

.storm-report-option__magnitude {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgba(200, 138, 47, 0.38);
  border-radius: 999px;
  background: #fff8ec;
  color: #765018;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.storm-report-option__meta {
  color: #4c5968;
}

.storm-report-option__remark {
  overflow-wrap: anywhere;
  color: #5f5546;
  font-style: italic;
}

.storm-report-option__hint {
  padding-top: 3px;
  border-top: 1px solid rgba(23, 50, 79, 0.09);
  color: #4c5968;
  font-size: 0.78rem;
}

.storm-audience__empty {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px dashed rgba(23, 50, 79, 0.22);
  background: rgba(23, 50, 79, 0.035);
  color: var(--navy);
  line-height: 1.45;
}

.storm-audience__empty p {
  color: var(--muted);
  font-size: 0.86rem;
}

.storm-audience__radius-field {
  display: grid;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 12px;
  background: rgba(23, 50, 79, 0.035);
}

.storm-audience__radius-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.storm-audience__radius-heading output {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
}

.storm-audience__radius-field input[type="range"] {
  width: 100%;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--navy);
  cursor: pointer;
}

.storm-audience__form-actions {
  display: grid;
  gap: 11px;
  padding-top: 2px;
}

.storm-audience__preview-button,
.storm-audience__filter-button,
.storm-audience__actions .button {
  min-height: 46px;
}

.storm-audience .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  border-radius: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.storm-audience .button-primary {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}

.storm-audience .button-primary:hover {
  background: #1f3f63;
  box-shadow: 0 7px 16px rgba(23, 50, 79, 0.16);
}

.storm-audience .button-secondary {
  border: 1px solid rgba(23, 50, 79, 0.23);
  background: #fff;
  color: var(--navy);
}

.storm-audience .button-secondary:hover {
  border-color: var(--navy);
  background: #fffdf8;
}

.storm-audience .button:focus-visible {
  outline: 3px solid rgba(11, 105, 199, 0.24);
  outline-offset: 3px;
}

.storm-audience .button[disabled] {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

.storm-audience__result {
  gap: 20px;
  border-color: rgba(23, 50, 79, 0.2);
  box-shadow: var(--shadow-hover);
  scroll-margin-top: 24px;
}

.storm-audience__result:focus {
  outline: 3px solid rgba(11, 105, 199, 0.18);
  outline-offset: 3px;
}

.storm-audience__result.is-dirty {
  border-color: rgba(200, 138, 47, 0.46);
}

.storm-audience__result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line-soft);
}

.storm-audience__result-heading > div {
  min-width: 0;
}

.storm-audience__result-heading .eyebrow {
  margin: 0 0 5px;
  color: var(--gold-deep);
}

.storm-audience__result-heading h2 {
  scroll-margin-top: 24px;
  margin: 0;
  color: var(--navy);
  font-size: 1.55rem;
}

.storm-audience__result-heading h2:focus-visible {
  outline: 3px solid rgba(11, 105, 199, 0.22);
  outline-offset: 5px;
  border-radius: 4px;
}

.storm-audience__result-lede {
  max-width: 70ch;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.storm-audience__result-lede strong {
  color: var(--navy);
}

.storm-audience__frozen-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(37, 96, 59, 0.2);
  border-radius: 999px;
  background: rgba(37, 96, 59, 0.06);
  color: #245b3c;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.storm-audience__result.is-dirty .storm-audience__frozen-badge {
  border-color: rgba(200, 138, 47, 0.4);
  background: #fff8ec;
  color: #765018;
}

.storm-audience__preview-help--dirty {
  color: #765018;
  font-weight: 700;
}

.storm-audience__actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
}

.storm-audience__actions form {
  flex: 1 1 210px;
  min-width: 0;
}

.storm-audience__actions .button {
  width: 100%;
  padding: 11px 15px;
  white-space: normal;
}

.storm-audience__counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.storm-audience__counts > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 11px;
  background: rgba(23, 50, 79, 0.035);
}

.storm-audience__counts dt,
.storm-audience__observation-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1.25;
  text-transform: uppercase;
}

.storm-audience__counts dd {
  margin: 0;
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
}

.storm-audience__counts p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.storm-audience__observation {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(5, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 79, 0.12);
  border-radius: 11px;
  background: #fffdf8;
}

.storm-audience__observation > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.storm-audience__observation strong {
  overflow-wrap: anywhere;
  color: var(--navy);
  font-size: 0.9rem;
  line-height: 1.35;
}

.storm-audience__observation code {
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.storm-audience__sample-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.storm-audience__sample-heading h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 1.08rem;
}

.storm-audience__sample-heading p {
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.4;
}

.storm-audience__scroll-cue {
  display: none;
  align-items: center;
  gap: 6px;
  margin: -4px 0 -4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.storm-audience__table-wrap {
  max-width: 100%;
  border: 1px solid rgba(23, 50, 79, 0.13);
  border-radius: 11px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.storm-audience__table-wrap:focus-visible {
  outline: 3px solid rgba(11, 105, 199, 0.2);
  outline-offset: 3px;
}

.storm-audience__table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: left;
}

.storm-audience__table th,
.storm-audience__table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.storm-audience__table th {
  background: rgba(23, 50, 79, 0.045);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.storm-audience__table td {
  color: #4c5968;
  line-height: 1.4;
}

.storm-audience__table td:first-child {
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.storm-audience__table td:last-child {
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.storm-audience__table tbody tr:last-child td {
  border-bottom: 0;
}

.storm-audience__download-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .storm-audience__builder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .storm-audience__title-row,
  .storm-audience__result-heading {
    display: grid;
    gap: 12px;
  }

  .storm-audience__coverage,
  .storm-audience__frozen-badge {
    justify-self: start;
  }

  .storm-audience__counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storm-audience__observation {
    grid-template-columns: 1fr 1fr;
  }

  .storm-audience__scroll-cue {
    display: flex;
  }

  .storm-audience__observation > div:first-child {
    grid-column: 1 / -1;
  }

  .storm-audience__actions,
  .storm-audience__actions form {
    width: 100%;
  }

  .storm-audience__actions form {
    flex-basis: 100%;
  }
}

@media (max-width: 520px) {
  .storm-audience__header h1 {
    max-width: 14ch;
    font-size: 1.85rem;
  }

  .storm-audience__field-grid,
  .storm-audience__filter-action {
    grid-template-columns: 1fr;
  }

  .storm-audience__filter-button {
    width: 100%;
  }

  .storm-report-option__magnitude {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  .storm-audience__counts,
  .storm-audience__observation {
    grid-template-columns: 1fr;
  }

  .storm-audience__observation > div:first-child {
    grid-column: auto;
  }

  .storm-audience__panel {
    padding: 17px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storm-audience *,
  .storm-audience *::before,
  .storm-audience *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .leads-filter-dropdown:focus-within,
  .leads-campaign-multiselect:focus-within,
  .retargeting-export:focus-within {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
}

/* Hidden campaigns in Company Settings */
.hidden-campaigns-panel {
  margin-top: 24px;
}

.hidden-campaigns-header h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}

.hidden-campaigns-header p {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.hidden-campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hidden-campaign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--panel-strong, #ffffff);
  border: 1px solid rgba(23, 50, 79, 0.1);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hidden-campaign-row:hover {
  border-color: rgba(23, 50, 79, 0.2);
  box-shadow: 0 2px 6px rgba(23, 50, 79, 0.04);
}

.hidden-campaign-info h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.hidden-campaign-info h3 a {
  color: var(--navy);
  text-decoration: none;
}

.hidden-campaign-info h3 a:hover {
  text-decoration: underline;
}

.hidden-campaign-info p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.hidden-campaign-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hidden-campaign-actions .button-link {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.hidden-campaign-actions .button-link.secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(23, 50, 79, 0.18);
}

.hidden-campaign-actions .button-link.secondary:hover {
  background: rgba(23, 50, 79, 0.05);
}

.hidden-campaign-restore-form {
  margin: 0;
}

@media (max-width: 640px) {
  .hidden-campaign-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .hidden-campaign-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .hidden-campaign-actions .button-link.secondary {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.82rem;
  }

  .hidden-campaign-restore-form {
    flex: 1 1 auto;
    margin: 0;
  }

  .hidden-campaign-restore-btn {
    width: 100%;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.84rem;
  }
}

/* ==========================================================================
   Multi-Trade Lead Routing & Trade Partners Network
   ========================================================================== */

.lead-trades-routing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.trade-route-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.trade-route-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.trade-route-item__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-route-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
}

.trade-route-detail {
  font-size: 0.8rem;
  color: #475569;
}

.trade-route-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: 999px;
}

.trade-route-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-badge-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trade-badge-route--self {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.trade-badge-route--offered {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.trade-badge-route--accepted {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.trade-badge-route--declined {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.btn-trade-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: all 150ms ease;
  user-select: none;
}

.btn-trade-action:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-trade-action:active {
  transform: scale(0.95);
}

.btn-trade-action:focus-visible {
  outline: 2px solid #0d2140;
  outline-offset: 2px;
}

.btn-trade-action.is-loading,
.btn-trade-action[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}

.btn-trade-action.is-loading::after,
.btn-trade-action[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(15, 23, 42, 0.25);
  border-top-color: #0f172a;
  border-radius: 50%;
  animation: trade-btn-spin 0.6s linear infinite;
}

.btn-trade-action--dispatch.is-loading::after,
.btn-trade-action--dispatch[aria-busy="true"]::after {
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

@keyframes trade-btn-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .trade-route-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .trade-route-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .btn-trade-action {
    flex: 1 1 auto;
  }
}

.btn-trade-action--self {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.btn-trade-action--self:hover {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.btn-trade-action--dispatch {
  background: #0d2140;
  color: #ffffff;
  border-color: #0d2140;
}

.btn-trade-action--dispatch:hover {
  background: #1e3a68;
  border-color: #1e3a68;
}

.btn-trade-action--revoke {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fff;
}

.btn-trade-action--revoke:hover {
  background: #fef2f2;
  color: #991b1b;
}

.btn-trade-link {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 150ms ease;
}

.btn-trade-link:hover {
  color: #0f172a;
}

.trade-dispatch-dropdown {
  position: relative;
  display: inline-block;
}

.trade-dispatch-dropdown summary {
  list-style: none;
}

.trade-dispatch-dropdown summary::-webkit-details-marker {
  display: none;
}

.trade-dispatch-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 220px;
  margin-top: 4px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trade-dispatch-menu__title {
  padding: 6px 8px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.trade-dispatch-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: background 150ms ease;
}

.trade-dispatch-option:hover {
  background: #f1f5f9;
}

.trade-dispatch-option:active {
  transform: scale(0.98);
}

.trade-dispatch-option strong {
  font-size: 0.85rem;
  color: #0f172a;
}

.trade-dispatch-option span {
  font-size: 0.75rem;
  color: #64748b;
}

/* Trade Partners Modal */
.trade-partners-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 640px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  background: #ffffff;
}

.trade-partners-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.trade-partners-dialog__content {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.trade-partners-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.trade-partners-dialog__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.trade-partners-dialog__sub {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

.btn-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-dialog-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-dialog-close:active {
  transform: scale(0.95);
}

.trade-partners-dialog__body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trade-partners-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.trade-partner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.trade-partner-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-partner-card__company {
  font-size: 0.8rem;
  color: #64748b;
}

.trade-partner-card__phone {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0d2140;
}

.trade-partners-add {
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.trade-partners-add__title {
  margin: 0 0 12px;
  font-size: 0.96rem;
  font-weight: 700;
  color: #0f172a;
}

.trade-partners-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trade-partners-form input[type="text"],
.trade-partners-form input[type="tel"],
.trade-partners-form input[type="email"] {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.88rem;
}

.form-trades__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.form-trades__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.form-trades__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
}

.trade-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  background: #f1f5f9;
  color: #334155;
  margin-right: 4px;
  margin-bottom: 4px;
  border: 1px solid #e2e8f0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-badge--active {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-badge--paused {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.status-badge--inactive {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.trade-route-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.trade-route-pill--self {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.trade-route-pill--offered {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.trade-route-pill--accepted {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.trade-route-pill--declined {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
/* ==========================================================================
   Sketch art and motion
   Hand-drawn SVG scenes (templates/_sketch_art.html) and small moments of
   motion. Base styles are always the finished picture; keyframes only say
   how each piece arrives. Reduced motion turns every animation off, so the
   finished picture is what those visitors see.
   ========================================================================== */

.sketch-scene,
.sketch-plane,
.sketch-empty-art,
.sketch-route {
  --ps-ink: #17324f;
  --ps-paper: #fffdf8;
  --ps-gold: #c88a2f;
  --ps-gold-soft: #f2c14e;
  --ps-lit: #f7d77e;
  --ps-slate: #dce5ef;
  --ps-tile: #ecd6b8;
  --ps-flat: #eadfca;
  --ps-trim: #f1eadc;
  --ps-pane: #e6edf5;
  --ps-sage: #b8cbb0;
  --ps-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Shared line-art vocabulary ---------- */

.ps-line {
  fill: none;
  stroke: var(--ps-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ps-wall,
.ps-box {
  fill: var(--ps-paper);
}

.ps-roof-slate {
  fill: var(--ps-slate);
}

.ps-roof-tile {
  fill: var(--ps-tile);
}

.ps-roof-flat {
  fill: var(--ps-flat);
}

.ps-trim {
  fill: var(--ps-trim);
}

.ps-pane {
  fill: var(--ps-pane);
}

.ps-chimney {
  fill: #e4d9c9;
}

.ps-bar {
  fill: var(--ps-slate);
}

.ps-bar-gold {
  fill: var(--ps-gold-soft);
}

.ps-wheel {
  fill: var(--ps-ink);
  stroke: var(--ps-paper);
  stroke-width: 1.8;
}

.ps-thin {
  stroke-width: 1.1;
  opacity: 0.55;
}

.ps-cloud {
  fill: var(--ps-paper);
  stroke-width: 1.3;
  opacity: 0.9;
}

.ps-shrub {
  fill: #dbe4d2;
}

.ps-knob,
.ps-viga {
  fill: var(--ps-ink);
}

.ps-viga {
  opacity: 0.7;
}

.ps-ground {
  fill: none;
  stroke: var(--ps-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* A roofer's chalk line under every street. */
.ps-chalk {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 0.5 7;
  opacity: 0.85;
}

.ps-cactus-outline,
.ps-cactus-fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ps-cactus-outline {
  stroke: var(--ps-ink);
  stroke-width: 9.6;
}

.ps-cactus-fill {
  stroke: var(--ps-sage);
  stroke-width: 6.4;
}

.ps-measure,
.ps-measure-tick {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.ps-flag-pole {
  fill: none;
  stroke: var(--ps-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.ps-flag {
  fill: var(--ps-gold);
  stroke: var(--ps-ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.ps-card {
  fill: #ffffff;
  stroke: var(--ps-ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.ps-stamp {
  fill: var(--ps-gold);
}

.ps-card-lines {
  fill: none;
  stroke: var(--ps-ink);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
}

.ps-smoke {
  fill: none;
  stroke: var(--ps-ink);
  stroke-width: 1.2;
  opacity: 0.3;
}

/* ---------- Roofline scene ---------- */

.sketch-scene {
  position: relative;
  min-width: 0;
}

.sketch-scene__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 128;
  overflow: hidden;
}

.sketch-scene__sun-disc {
  fill: var(--ps-gold-soft);
  stroke: var(--ps-gold);
  stroke-width: 1.4;
}

.sketch-scene__sun-halo,
.sketch-scene__mail,
.sketch-scene__flag,
.sketch-scene__mailbox,
.sketch-scene__ripple,
.sketch-scene__cloud,
.ps-smoke {
  transform-box: fill-box;
  transform-origin: center;
}

.sketch-scene__window {
  fill: var(--ps-lit);
}

.sketch-scene__ripple {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 1.6;
  opacity: 0;
}

/* Delivered: the postcard is already inside the mailbox. */
.sketch-scene__mail {
  opacity: 0;
}

.sketch-scene__flag {
  transform-origin: 0 100%;
}

.sketch-scene__mailbox {
  transform-origin: 50% 100%;
}

/* Idle life: always on, slow, and small. */
.sketch-scene__cloud--a {
  animation: ps-drift-a 22s ease-in-out infinite alternate;
}

.sketch-scene__cloud--b {
  animation: ps-drift-b 28s ease-in-out infinite alternate;
}

.sketch-scene__sun-halo {
  animation: ps-breathe 6s ease-in-out infinite;
}

.ps-smoke {
  opacity: 0;
  animation: ps-smoke 5s ease-out infinite;
}

.ps-smoke--2 {
  animation-delay: 2.5s;
}

/* The story: plays once when the scene arrives, then rests on the last frame.
   Outlines draw themselves house by house; details fade in behind them. */
.sketch-scene__house--b {
  --ps-delay: 0.12s;
}

.sketch-scene__house--c {
  --ps-delay: 0.24s;
}

.sketch-scene__house--d {
  --ps-delay: 0.36s;
}

.sketch-scene__mailbox {
  --ps-delay: 0.45s;
}

.sketch-scene.is-playing [pathLength] {
  animation: ps-draw 1s ease-in-out var(--ps-delay, 0s) both;
}

.sketch-scene.is-playing .ps-late {
  animation: ps-fade-in 0.6s ease-out calc(var(--ps-delay, 0s) + 0.75s) both;
}

.sketch-scene.is-playing .ps-ground {
  animation: ps-draw-line 1.2s ease-in-out both;
}

.sketch-scene.is-playing .ps-chalk {
  animation: ps-fade-in 0.8s ease-out 0.9s both;
}

.sketch-scene.is-playing .sketch-scene__sun {
  animation: ps-rise 1.8s var(--ps-ease-out) 0.1s both;
}

.sketch-scene.is-playing .ps-measure {
  animation: ps-draw-line 0.8s ease-in-out 1.1s both;
}

.sketch-scene.is-playing .ps-measure-tick {
  animation: ps-fade-in 0.4s ease-out 1.1s both;
}

.sketch-scene.is-playing .sketch-scene__mail-x {
  animation: ps-mail-x 1.9s linear 1.6s both;
}

.sketch-scene.is-playing .sketch-scene__mail-y {
  animation: ps-mail-y 1.9s 1.6s both;
}

.sketch-scene.is-playing .sketch-scene__mail {
  animation: ps-mail-card 1.9s ease-in-out 1.6s both;
}

.sketch-scene.is-playing .sketch-scene__mailbox {
  animation: ps-bump 0.45s ease-out 3.45s both;
}

.sketch-scene.is-playing .sketch-scene__flag {
  animation: ps-flag-up 0.7s var(--ps-ease-out) 3.55s both;
}

.sketch-scene.is-playing .sketch-scene__window {
  animation:
    ps-draw 1s ease-in-out var(--ps-delay, 0s) both,
    ps-light-on 0.5s ease-out 3.95s both;
}

.sketch-scene.is-playing .sketch-scene__glow {
  animation: ps-fade-in 0.9s ease-out 3.95s both;
}

.sketch-scene.is-playing .sketch-scene__ripple--1 {
  animation: ps-ripple 1.5s ease-out 4.25s;
}

.sketch-scene.is-playing .sketch-scene__ripple--2 {
  animation: ps-ripple 1.5s ease-out 4.7s;
}

.sketch-scene.is-offscreen *,
.sketch-plane.is-offscreen *,
.sketch-route.is-offscreen *,
.sketch-empty-art.is-offscreen * {
  animation-play-state: paused !important;
}

/* Hero placement: the street runs along the right of "Welcome back". */
.operator-hero-heading:has(> .sketch-scene--hero) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.sketch-scene--hero {
  flex: 0 1 440px;
  margin: -10px 0 -6px auto;
}

@media (max-width: 640px) {
  .operator-hero-heading:has(> .sketch-scene--hero) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .sketch-scene--hero {
    flex: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto -4px;
  }
}

/* Login: the same street at dawn across the top of the sign-in card. */
.auth-card:has(> .sketch-scene--login) {
  overflow: hidden;
}

/* Bleeds to the card edge: matches the card's 34px padding. */
.sketch-scene--login {
  margin: -34px -34px -6px;
  padding: 18px 12px 0;
  background: linear-gradient(180deg, #fbefd6 0%, #fdf6e8 55%, var(--ps-paper) 100%);
  border-bottom: 1px solid rgba(23, 50, 79, 0.08);
}

/* ---------- Paper plane on "Start a new campaign" ---------- */

.operator-campaign-launcher__content:has(> .sketch-plane) {
  position: relative;
}

.operator-campaign-launcher__content:has(> .sketch-plane) .operator-campaign-launcher__title {
  padding-right: 104px;
}

.sketch-plane {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 112px;
  height: auto;
  aspect-ratio: 132 / 48;
  overflow: visible;
  pointer-events: none;
}

.sketch-plane__trail {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 0.5 6.5;
  animation: pl-trail 8s linear infinite;
}

.sketch-plane__craft {
  transform-box: fill-box;
  transform-origin: center;
  animation: pl-bob 3.4s ease-in-out infinite;
}

.sketch-plane__wing {
  fill: #ffffff;
  stroke: var(--ps-ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.sketch-plane__fold {
  fill: none;
  stroke: var(--ps-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sketch-plane__stamp {
  fill: var(--ps-gold);
}

.operator-campaign-launcher:has(.operator-campaign-launcher__cta:is(:hover, :focus-visible)) .sketch-plane__craft {
  animation: pl-launch 1.1s cubic-bezier(0.5, 0, 0.3, 1) both;
}

.operator-campaign-launcher:has(.operator-campaign-launcher__cta:is(:hover, :focus-visible)) .sketch-plane__trail {
  animation-duration: 1.4s;
}

/* ---------- Dashboard number tiles ---------- */

.operator-metric__value,
.postcard-status-tile strong {
  font-variant-numeric: tabular-nums;
}

.operator-metric__badge-icon {
  position: relative;
  overflow: hidden;
}

.operator-metric__badge-icon svg {
  transform-origin: center;
}

.operator-metric[data-icon="mail"]:is(:hover, :focus-visible) .operator-metric__badge-icon svg {
  animation: pm-wiggle 0.6s ease both;
}

.operator-metric[data-icon="card"]:is(:hover, :focus-visible) .operator-metric__badge-icon svg {
  animation: pm-post 0.6s ease both;
}

.operator-metric[data-icon="delivered"] .operator-metric__badge-icon path {
  stroke-dasharray: 14;
  stroke-dashoffset: 0;
}

.operator-metric[data-icon="delivered"]:is(:hover, :focus-visible) .operator-metric__badge-icon path {
  animation: pm-check 0.55s ease-out both;
}

.operator-metric[data-icon="qr"] .operator-metric__badge-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200, 138, 47, 0.8);
  opacity: 0;
  pointer-events: none;
}

.operator-metric[data-icon="qr"]:is(:hover, :focus-visible) .operator-metric__badge-icon::after {
  animation: pm-scan 0.9s ease-in-out both;
}

.operator-metric[data-icon="phone"]:is(:hover, :focus-visible) .operator-metric__badge-icon svg {
  animation: pm-ring 0.7s ease both;
}

/* ---------- Setup checklist ---------- */

.setup-progress-fill {
  transform-origin: left center;
  animation: pm-fill 1.2s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)) 0.3s both;
}

.setup-step-icon.is-current {
  animation: pm-pulse 2.2s ease-out 1s 3;
}

/* ---------- First contact: a one-time celebration ---------- */

.first-lead-win[data-sketch-celebrate] {
  position: relative;
}

.first-lead-win__call::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.6h3.1l1.5 3.9-2.1 1.5a12.4 12.4 0 0 0 6.1 6.1l1.5-2.1 3.9 1.5v3.1a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.4 5.8a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.6h3.1l1.5 3.9-2.1 1.5a12.4 12.4 0 0 0 6.1 6.1l1.5-2.1 3.9 1.5v3.1a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.4 5.8a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: pm-ring-rest 3.6s ease 1.2s infinite;
}

.sketch-confetti {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.sketch-confetti__bit {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 8px);
  height: var(--h, 12px);
  border-radius: var(--radius, 2px);
  background: var(--c, var(--gold));
  opacity: 0;
  animation: pm-confetti var(--d, 2.2s) cubic-bezier(0.2, 0.7, 0.35, 1) var(--delay, 0s) both;
}

/* ---------- Empty states ---------- */

.empty-state:has(> .sketch-empty-art)::before {
  display: none;
}

.sketch-empty-art {
  display: block;
  width: 132px;
  height: auto;
  aspect-ratio: 132 / 76;
  margin: 0 auto 14px;
  overflow: visible;
}

.sketch-empty-art__card,
.sketch-empty-art__flag,
.sketch-empty-art__bar {
  transform-box: fill-box;
}

.sketch-empty-art__card {
  transform-origin: center;
  animation: pm-float 3.6s ease-in-out infinite;
}

.sketch-empty-art__dash {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.5 5;
  animation: pl-trail 6s linear infinite reverse;
}

/* Nothing mailed yet, so the flag rests down until someone points at it. */
.sketch-empty-art__flag {
  transform-origin: 0 100%;
  transform: rotate(90deg);
  transition: transform 0.6s var(--ps-ease-out);
}

.empty-state:hover .sketch-empty-art__flag {
  transform: rotate(0deg);
}

.sketch-empty-art__bar {
  transform-origin: 50% 100%;
}

.sketch-empty-art__trend,
.sketch-empty-art__trend-head {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sketch-empty-art.is-playing .sketch-empty-art__bar {
  animation: pm-grow 0.8s var(--ps-ease-out) both;
}

.sketch-empty-art.is-playing .sketch-empty-art__bar--2 {
  animation-delay: 0.12s;
}

.sketch-empty-art.is-playing .sketch-empty-art__bar--3 {
  animation-delay: 0.24s;
}

.sketch-empty-art.is-playing .sketch-empty-art__trend {
  animation: ps-draw-line 0.8s ease-in-out 0.6s both;
}

.sketch-empty-art.is-playing .sketch-empty-art__trend-head {
  animation: ps-fade-in 0.3s ease-out 1.3s both;
}

/* ---------- Postcards & results: printer to mailbox ---------- */

.sketch-route {
  margin: 4px 0 14px;
}

.sketch-route__svg {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  aspect-ratio: 800 / 64;
  margin: 0 auto;
  overflow: visible;
}

.sketch-route__road {
  fill: none;
  stroke: var(--ps-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.5 9;
}

.sketch-route__truck,
.sketch-route__flag,
.sketch-route__sheet {
  transform-box: fill-box;
}

/* Still (or reduced motion): cards are on the road. */
.sketch-route__truck {
  transform: translateX(270px);
}

.sketch-route__flag {
  transform-origin: 0 100%;
}

.sketch-route:not(.is-settled) .sketch-route__road {
  animation: pl-trail 3s linear infinite;
}

.sketch-route:not(.is-settled) .sketch-route__truck {
  animation: pr-drive 7.5s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

.sketch-route:not(.is-settled) .sketch-route__flag {
  animation: pr-flag 7.5s ease infinite;
}

.sketch-route:not(.is-settled) .sketch-route__sheet {
  animation: pr-sheet 7.5s ease infinite;
}

/* Nothing on the road: the truck makes its last run from the printer, parks
   at the mailbox, and the flag goes up. Once per page view, then still. */
.sketch-route.is-settled .sketch-route__truck {
  transform: translateX(544px);
  animation: pr-drive-once 3.4s cubic-bezier(0.45, 0, 0.35, 1) both;
}

.sketch-route.is-settled .sketch-route__road {
  animation: pl-trail 3s linear both;
}

.sketch-route.is-settled .sketch-route__sheet {
  animation: pr-sheet 4s ease both;
}

.sketch-route.is-settled .sketch-route__flag {
  animation: ps-flag-up 0.7s var(--ps-ease-out) 3.4s both;
}

/* On a phone the whole route would shrink to a sliver; leave it out. */
@media (max-width: 560px) {
  .sketch-route {
    display: none;
  }
}

/* ---------- Keyframes ---------- */

@keyframes ps-draw {
  0% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }
  70% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@keyframes ps-draw-line {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes ps-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes ps-rise {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
}

@keyframes ps-breathe {
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes ps-drift-a {
  to {
    transform: translateX(34px);
  }
}

@keyframes ps-drift-b {
  to {
    transform: translateX(-26px);
  }
}

@keyframes ps-smoke {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.6);
  }
  30% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.35);
  }
}

@keyframes ps-mail-x {
  from {
    transform: translateX(-440px);
  }
}

@keyframes ps-mail-y {
  0% {
    transform: translateY(-58px);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1);
  }
  42% {
    transform: translateY(-76px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes ps-mail-card {
  0% {
    opacity: 1;
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(10deg);
  }
  86% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(8px) scale(0.45);
  }
}

@keyframes ps-bump {
  50% {
    transform: scale(1.08, 0.94);
  }
}

@keyframes ps-flag-up {
  0% {
    transform: rotate(90deg);
  }
  65% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes ps-light-on {
  from {
    fill: var(--ps-pane);
  }
}

@keyframes ps-ripple {
  0% {
    opacity: 0.75;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes pl-trail {
  to {
    stroke-dashoffset: -56;
  }
}

@keyframes pl-bob {
  50% {
    transform: translateY(-3px) rotate(-3deg);
  }
}

@keyframes pl-launch {
  0% {
    opacity: 1;
    transform: none;
  }
  38% {
    opacity: 0;
    transform: translate(46px, -22px) rotate(-12deg) scale(0.8);
  }
  39% {
    opacity: 0;
    transform: translate(-120px, 30px) rotate(8deg) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pm-wiggle {
  25% {
    transform: rotate(-12deg);
  }
  55% {
    transform: rotate(9deg);
  }
  80% {
    transform: rotate(-4deg);
  }
}

@keyframes pm-post {
  40% {
    transform: translateX(3px) rotate(6deg);
  }
  41% {
    opacity: 0;
    transform: translateX(10px);
  }
  42% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes pm-check {
  from {
    stroke-dashoffset: 14;
  }
}

@keyframes pm-scan {
  0% {
    top: 3px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 5px);
    opacity: 0;
  }
}

@keyframes pm-ring {
  15%,
  45%,
  75% {
    transform: rotate(-14deg);
  }
  30%,
  60%,
  90% {
    transform: rotate(14deg);
  }
}

@keyframes pm-ring-rest {
  0%,
  24%,
  100% {
    transform: rotate(0deg);
  }
  4%,
  12%,
  20% {
    transform: rotate(-15deg);
  }
  8%,
  16% {
    transform: rotate(15deg);
  }
}

@keyframes pm-fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes pm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 107, 99, 0.45), 0 1px 3px rgba(31, 107, 99, 0.25);
  }
  100% {
    box-shadow: 0 0 0 11px rgba(31, 107, 99, 0), 0 1px 3px rgba(31, 107, 99, 0.25);
  }
}

@keyframes pm-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--x) * 0.55), var(--up)) rotate(calc(var(--r) * 0.4));
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--fall)) rotate(var(--r));
  }
}

@keyframes pm-float {
  50% {
    transform: translateY(-4px) rotate(3deg);
  }
}

@keyframes pm-grow {
  from {
    transform: scaleY(0);
  }
}

@keyframes pr-drive {
  0%,
  12% {
    opacity: 0;
    transform: translateX(0);
  }
  18% {
    opacity: 1;
    transform: translateX(0);
  }
  74% {
    opacity: 1;
    transform: translateX(544px);
  }
  90% {
    opacity: 1;
    transform: translateX(544px);
  }
  97%,
  100% {
    opacity: 0;
    transform: translateX(544px);
  }
}

@keyframes pr-drive-once {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  15% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(544px);
  }
}

@keyframes pr-flag {
  0%,
  74% {
    transform: rotate(90deg);
  }
  80%,
  94% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes pr-sheet {
  0% {
    transform: translateY(10px);
  }
  12%,
  100% {
    transform: translateY(0);
  }
}

@media print {
  .sketch-scene,
  .sketch-plane,
  .sketch-empty-art,
  .sketch-route,
  .sketch-confetti {
    display: none !important;
  }
}

/* ---------- Reduced motion: the finished picture, perfectly still ---------- */

@media (prefers-reduced-motion: reduce) {
  .sketch-scene *,
  .sketch-plane *,
  .sketch-empty-art *,
  .sketch-route *,
  .operator-metric__badge-icon,
  .operator-metric__badge-icon *,
  .operator-metric__badge-icon::after,
  .setup-progress-fill,
  .setup-step-icon.is-current,
  .first-lead-win__call::before,
  .sketch-confetti {
    animation: none !important;
    transition: none !important;
  }

  .sketch-confetti {
    display: none;
  }
}