@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Special+Gothic+Expanded+One&display=swap");

:root {
  --shell-background:
    radial-gradient(1200px 700px at 20% -10%, rgba(30, 99, 255, 0.35), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgb(72 79 81 / 25%), transparent 55%),
    linear-gradient(160deg, #071a3a 0%, #002a80 45%, #000000 100%);
  --shell-surface: rgba(255, 255, 255, 0.08);
  --shell-border: rgba(255, 255, 255, 0.18);
  --shell-blur: 16px;
  --shell-text: #ffffff;
  --shell-text-muted: #bbd0ff;
  --card-background: #ffffff;
  --card-border: #e5e7eb;
  --card-text: #1f2937;
  --card-text-muted: #6b7280;
  --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 24px;
  --radius-full: 9999px;
  --accent-primary: #071e44;
  --accent-info: #00d4ff;
  --accent-success: #35d07f;
  --accent-gold: #f5b301;
  --accent-gold-hover: #ffca28;
  --accent-gold-active: #e0a000;
  --accent-warning: #ffb000;
  --accent-danger: #ef4444;
  --font-display: "Special Gothic Expanded One", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 200ms;
  --motion-base: 300ms;
  --shell-max: 1200px;
  --content-max: 920px;
}

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

html {
  min-height: 100%;
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--shell-background);
  color: var(--shell-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(420px 240px at 12% 18%, rgba(255, 255, 255, 0.06), transparent 72%),
    radial-gradient(360px 220px at 88% 14%, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
  opacity: 0.8;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.24);
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.display-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--shell-text);
}

.section-title-dark,
h2:not(.display-heading):not(.section-title-light) {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--shell-text);
}

.section-title-light {
  margin: 0;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--card-text);
}

.muted {
  color: var(--shell-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.info-note,
[data-results-summary] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--shell-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-info);
}

[data-results-summary] {
  display: none;
}

.white-card-surface {
  position: relative;
  overflow: hidden;
  background: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  color: var(--card-text);
}

/* result-template: no card chrome — content renders directly on dark shell */
.result-template {
  position: relative;
  overflow: hidden;
}

.white-card-surface::before {
  display: none;
}

.white-card-surface>* {
  position: relative;
  z-index: 1;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgb(5 40 98 / 42%);
  backdrop-filter: blur(var(--shell-blur));
}

.header-container {
  width: min(var(--shell-max), calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.logo {
  align-items: center;
  display: flex;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.logo-text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  letter-spacing: 0.03em;
  text-transform: none;
}

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

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--shell-text);
  font-size: 13px;
  font-weight: 600;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.header-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.header-phone {
  color: var(--shell-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.app-shell {
  width: min(var(--shell-max), calc(100% - 48px));
  margin: 0 auto;
  padding: var(--space-xl) 0 var(--space-xxl);
}

.app {
  max-width: var(--content-max);
  margin: 0 auto;
}


.toolbar {
  display: flex;
  justify-content: center;
  margin: 20px 0 0 0;
}

.toolbar [data-reset-state] {
  width: auto;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--shell-text-muted);
  font-size: 13px;
  font-weight: 600;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.toolbar [data-reset-state]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--shell-text);
}

.block {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  padding: clamp(24px, 4vw, 32px);
  border: 1px solid var(--shell-border);
  border-radius: var(--radius-xl);
  background: var(--shell-surface);
  backdrop-filter: blur(var(--shell-blur));
  box-shadow: 0 8px 18px rgba(5, 10, 22, 0.22);
  color: var(--shell-text);
  animation: fadeInUp var(--motion-base) var(--motion-ease);
}

.block::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -72px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.block>* {
  position: relative;
  z-index: 1;
}

.is-hidden {
  display: none !important;
}

.entry-form-card {
  display: grid;
  gap: var(--space-lg);
  max-width: 640px;
  margin-top: var(--space-lg);
  padding: clamp(24px, 4vw, 32px);
}

.entry-form-card .actions {
  margin-top: 0;
}

.entry-form-card .actions>* {
  flex: 0 0 auto;
  width: auto;
}

.field-stack {
  display: grid;
  gap: var(--space-sm);
}

.field-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--card-text);
}

form {
  margin: 0;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--card-text);
  background: #ffffff;
  border: 1px solid #cdd5df;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

select {
  appearance: none;
  padding-right: 52px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-primary) 50%),
    linear-gradient(135deg, var(--accent-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) calc(50% - 3px),
    calc(100% - 18px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])::placeholder,
textarea::placeholder {
  color: var(--card-text-muted);
  font-weight: 500;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.15);
}

input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--accent-danger);
  background: #fef2f2;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.quiz-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.quiz-icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.14);
  object-fit: contain;
}

.quiz-icon.is-empty {
  visibility: hidden;
}

[data-quiz-title] {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-quiz-description] {
  margin-top: var(--space-xs);
  max-width: 58ch;
}

.option-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.option-card-button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-background);
  color: var(--card-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
}

.option-card-button:hover {
  border-color: #1e63ff;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(30, 99, 255, 0.14);
  transform: translateY(-1px);
}

.option-card-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--card-text);
}

.option-card-description {
  font-size: 15px;
  line-height: 1.5;
  color: var(--card-text-muted);
}

.choice-form {
  display: grid;
  gap: var(--space-md);
}

.choice-card {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 18px 62px;
  border: 1px solid #dce4ee;
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
  cursor: pointer;
}

.choice-card::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  background: #ffffff;
  transform: translateY(-50%);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.choice-card:hover {
  border-color: #8aa8d4;
  box-shadow: 0 6px 16px rgba(10, 36, 80, 0.08);
  transform: translateY(-1px);
}

.choice-card:has(input:checked) {
  border-color: #1f5fc9;
  border-width: 1.5px;
  background: #eef4ff;
  box-shadow: 0 4px 12px rgba(31, 95, 201, 0.1);
}

.choice-card:has(input:checked)::before {
  border-color: #1f5fc9;
  border-width: 1.5px;
  background: radial-gradient(circle at center, #ffffff 0 30%, #1f5fc9 31% 100%);
  box-shadow: 0 0 0 3px rgba(31, 95, 201, 0.1);
}

.choice-card input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.choice-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.actions>* {
  width: auto;
}

.button-hero,
.button-primary,
.button-secondary,
.button-quiet,
.back-button {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    filter var(--motion-fast) var(--motion-ease);
}

.back-button.button-quiet {
  background: none !important;
  border: none !important;
}

.button-hero {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #ffd54f 0%, #f5b301 45%, #e0a000 100%);
  color: #1a1207;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(245, 179, 1, 0.22);
}

.button-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(245, 179, 1, 0.42);
  filter: brightness(1.02);
}

.button-hero:active {
  transform: translateY(0);
  background: linear-gradient(135deg, #ffda63 0%, var(--accent-gold-hover) 45%, var(--accent-gold-active) 100%);
}

.button-primary,
.actions>button:not(.button-quiet):not(.back-button):not(.button-secondary):not(.button-hero) {
  padding: 14px 28px;
  border: 1px solid rgb(53, 208, 127);
  background: linear-gradient(135deg, rgb(12, 43, 27) 0%, rgb(8, 150, 76) 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(53, 208, 127, 0.28);
}

.button-primary:hover,
.actions>button:not(.button-quiet):not(.back-button):not(.button-secondary):not(.button-hero):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(53, 208, 127, 0.34);
}

.button-primary:active,
.actions>button:not(.button-quiet):not(.back-button):not(.button-secondary):not(.button-hero):active {
  transform: translateY(0);
}

.button-secondary {
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}

.button-quiet,
.back-button {
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--shell-text-muted);
  font-size: 15px;
  font-weight: 500;
}

.button-quiet:hover,
.back-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.white-card-surface .button-quiet,
.white-card-surface .back-button {
  border-color: rgba(7, 30, 68, 0.18);
  color: rgba(7, 30, 68, 0.56);
}

.white-card-surface .button-quiet:hover,
.white-card-surface .back-button:hover {
  background: rgba(7, 30, 68, 0.06);
  border-color: rgba(7, 30, 68, 0.32);
  color: var(--card-text);
}

.button-hero:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.button-quiet:disabled,
.back-button:disabled,
button:disabled {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-hero:disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

.button-primary:disabled,
.actions>button:not(.button-quiet):not(.back-button):not(.button-secondary):not(.button-hero):disabled {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.18);
}

.special-offers-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #071e44 0%, #0e2a66 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(7, 30, 68, 0.28);
}

.special-offers-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.estimate-header {
  display: grid;
  gap: 12px;
  margin-bottom: var(--space-lg);
  text-align: center;
  justify-items: center;
}

.estimate-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--card-text);
}

.estimate-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--card-text-muted);
}

/* result-template renders on dark shell — override text to shell palette */
.result-template .estimate-title {
  color: var(--shell-text);
}

.result-template .estimate-subtitle {
  color: var(--shell-text-muted);
}

/* result-template: info/priority message boxes render on dark shell — fix text colors */
.result-template .free-inspection-message h4,
.result-template .priority-consultation-message h4 {
  color: var(--shell-text);
}

.result-template .free-inspection-message p,
.result-template .priority-consultation-message p {
  color: var(--shell-text-muted);
}

.result-template .inspection-benefits li,
.result-template .priority-benefits li {
  color: var(--shell-text);
}

.inspection-benefits,
.priority-benefits {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.inspection-benefits li,
.priority-benefits li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--card-text);
}

.inspection-benefits li::before,
.priority-benefits li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.inspection-benefits li::before {
  content: "✓";
  color: var(--accent-success);
}

.priority-benefits li::before {
  content: "•";
  left: 6px;
  color: var(--accent-warning);
}

.free-inspection-message h4,
.priority-consultation-message h4 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--card-text);
}

.free-inspection-message p,
.priority-consultation-message p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--card-text-muted);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.package-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 400px;
  padding: 32px 28px;
  border: 1px solid #e8edf4;
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--card-text);
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
  cursor: pointer;
  overflow: hidden;
}


.package-card input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.package-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(7, 30, 68, 0.14);
}

.package-card.best-value {
  border-color: var(--accent-success);
  border-width: 1.5px;
  box-shadow: 0 4px 16px rgba(53, 208, 127, 0.1);
}


.package-card:has(input:checked) {
  border-color: var(--accent-success);
  border-width: 1.5px;
  box-shadow: 0 6px 20px rgba(53, 208, 127, 0.15);
}

.package-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 4px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #35d07f 0%, #00b85b 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(53, 208, 127, 0.34);
}

.package-badge svg {
  width: 14px;
  height: 14px;
}

.package-name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--card-text);
}

.package-description {
  min-height: 68px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--card-text-muted);
}

.package-price {
  margin-top: 8px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent-primary);
}

.package-divider {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-text-muted);
}

.package-monthly {
  font-size: 26px;
  font-weight: 800;
  color: var(--card-text);
}

.package-term {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--card-text-muted);
}

.privacy-note-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.privacy-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.privacy-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: rgba(255, 255, 255, 0.6);
}

.privacy-note-text {
  display: inline;
}

.trust-footer {
  max-width: var(--content-max);
  margin: 18px auto 0;
  padding: 20px 24px;
  border: 1px solid var(--shell-border);
  border-radius: var(--radius-xl);
  background: var(--shell-surface);
  backdrop-filter: blur(var(--shell-blur));
  box-shadow: 0 8px 18px rgba(5, 10, 22, 0.22);
}

.trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  height: 52px;
  width: auto;
  opacity: 0.85;
  filter: grayscale(1) brightness(1.3);
  transition: all var(--transition-base);
}

.trust-logo-image {
  width: auto;
  height: 54px;
  object-fit: contain;
}

.trust-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-md);
  color: var(--shell-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
}

.separator {
  color: rgba(187, 208, 255, 0.55);
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(4, 15, 36, 0.76);
  backdrop-filter: blur(10px);
}

.footer-content {
  width: min(var(--shell-max), calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 36px;
  text-align: center;
}

.disclaimer,
.copyright {
  max-width: 760px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.4;
  color: var(--shell-text-muted);
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 12px;
}

.footer-links a {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1024px) {

  .header-container,
  .app-shell,
  .footer-content {
    width: min(var(--shell-max), calc(100% - 40px));
  }

  .packages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {

  .header-container,
  .app-shell,
  .footer-content {
    width: min(var(--shell-max), calc(100% - 32px));
  }

  .header-container {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-contact {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .header-cta,
  .header-phone {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .block {
    padding: 24px 20px;
  }

  .entry-form-card {
    margin-top: var(--space-lg);
  }

  .quiz-header {
    grid-template-columns: 1fr;
  }

  .quiz-icon {
    width: 52px;
    height: 52px;
  }

  .actions>* {
    width: auto;
  }

  .packages-grid {
    grid-template-columns: 1fr;
  }

  .package-card {
    min-height: auto;
  }

  .trust-stats {
    flex-direction: column;
    gap: 10px;
  }

  .separator {
    display: none;
  }
}

@media (max-width: 480px) {
  .display-heading {
    font-size: 2rem;
    line-height: 1.08;
  }

  .block,
  .entry-form-card {
    padding: 20px 18px;
  }

  .option-card-button,
  .choice-card {
    padding: 18px;
  }

  .choice-card {
    padding-left: 54px;
  }

  .choice-card::before {
    left: 16px;
    width: 20px;
    height: 20px;
  }

  .package-card {
    padding: 24px 20px;
  }
}


/*
 * css-audit-fixes.css
 * CSS Design Audit — Roof Meter Quiz Calculator
 * Generated: 2026-03-06
 * ─────────────────────────────────────────────────────────────────
 *
 * === DESIGN CONTRACT ===
 *
 * Typefaces:
 *   Display / headings  → "Special Gothic Expanded One" (--font-display)
 *                         uppercase, weight 400, letter-spacing 0.02em
 *   Body                → "Manrope" (--font-body)
 *                         weights 400–800
 *
 * Type scale:
 *   Display h1          clamp(2.5rem, 6vw, 3rem)
 *   Section h2 (dark)   clamp(1.6rem, 3.5vw, 1.75rem)
 *   Card title (light)  24px / 700
 *   Estimate title      clamp(1.8rem, 4vw, 2rem) / 800
 *   Option card title   18px / 800
 *   Body                15–16px / 400–600
 *   Caption / small     12–13px
 *
 * Max widths:
 *   Shell               1200px (--shell-max)
 *   Content             920px  (--content-max)
 *   Both centered via   min(value, 100% - margin)
 *
 * Spacing rhythm: 8px base
 *   xs:4  sm:8  md:16  lg:24  xl:32  xxl:48  xxxl:64
 *
 * Button system (all share --radius-md: 8px, --motion-fast transition):
 *   .button-hero      gold gradient  |  18px font, 900w  |  18px/20px pad
 *   .button-primary   green gradient |  18px font, 800w  |  14px/28px pad
 *   .button-secondary ghost white    |  14px font, 500w  |  12px/24px pad
 *   .button-quiet     ghost white    |  15px font, 500w  |  12px/24px pad
 *
 * Card pattern:
 *   Dark shell block    → .block (glass, dark blue, blur, border)
 *   White content card  → .white-card-surface / .result-template (white, shadow)
 *
 * Color hierarchy:
 *   Gold (#f5b301)  = primary entry CTA
 *   Green (#35d07f) = quiz navigation / success / selection
 *   Info (#00d4ff)  = accent / progress / highlights
 *   Danger (#ef4444)= errors
 *
 * Trust of values when conflict arises:
 *   visual context + UX role > :root token > HTML tag
 * ─────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════
   :ROOT TOKEN OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

:root {
  /*
   * ISSUE: --transition-base is referenced in .trust-logos { transition: all var(--transition-base) }
   * but is never defined. The transition resolves to "all" with no duration, giving
   * instant/browser-default behavior instead of the intended smooth fade.
   * FIX: Define it to match the existing motion system.
   */
  --transition-base: var(--motion-base) var(--motion-ease);
}


/* ═══════════════════════════════════════════════════════════════
   TRANSPARENT BLOCKS — zip / quiz / progress_search
   Remove .block glass card styling so these screens render on the
   raw dark background without a visible container box.
   ═══════════════════════════════════════════════════════════════ */

[data-block="zip"],
[data-block="quiz"],
[data-block="progress_search"] {
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Hide the decorative radial glow ::after pseudo-element on these blocks */
[data-block="zip"]::after,
[data-block="quiz"]::after,
[data-block="progress_search"]::after {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL — Remove .app max-width constraint
   ═══════════════════════════════════════════════════════════════ */

.app {
  max-width: none;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL COMPONENTS — Buttons
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [ZIP screen] [.button-hero] — Font size 16px is SMALLER than .button-primary (18px).
 * The hero button is the primary entry CTA (highest conversion importance on the page),
 * yet its font renders smaller than the quiz navigation buttons that follow.
 * Semantically wrong: the most prominent action should have equal or greater font weight.
 * FIX: Raise .button-hero font-size to match .button-primary at 18px.
 */
.button-hero {
  font-size: 18px;
  /* was 16px — matches .button-primary scale for consistent CTA hierarchy */
}


/* ═══════════════════════════════════════════════════════════════
   ZIP SCREEN — h1.headline (missing class definition)
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [ZIP screen] [h1.headline] — Class .headline has NO CSS rule in style.css.
 * The element renders as browser-default h1: Manrope 700 at 32px (body font).
 * Every other top-level heading in the app uses .display-heading or .section-title-dark
 * (both use --font-display, uppercase, Special Gothic Expanded One).
 * The ZIP block is the landing screen and the most important visual moment;
 * using plain body font here breaks the display-font heading hierarchy established
 * everywhere else in the app.
 * FIX: Style .headline identically to .display-heading (same token values).
 */
.headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--shell-text);
  text-align: center;
}

@media (max-width: 480px) {

  /* Match the .display-heading mobile override already in style.css */
  .headline {
    font-size: 2rem;
    line-height: 1.08;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ZIP SCREEN — .hero-counter (missing class definition)
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [ZIP screen] [.hero-counter] — Class .hero-counter has NO CSS rule.
 * Renders as a plain block-level div at 16px body text with no visual hierarchy.
 * The counter contains key trust signals ("12,472+ Florida homeowners", "$7,000 savings")
 * that are completely unstyled, making them indistinguishable from a sub-caption.
 * FIX: Flex row, centered, baseline-aligned — matching legacy computed values.
 *
 * LEGACY CORRECTION (2026-03-06): Initial patch used white for both numbers.
 * Legacy reference shows:
 *   .counter-number  → rgba(187,208,255,0.9)  — soft blue, NOT white
 *   .counter-savings → rgb(53,208,127)         — green accent, NOT white
 *   align-items: baseline (numbers align on text baseline, not vertical center)
 *   justify-content: center (centered in the block)
 *   font-size: 18px (not 14px — legacy uses large trust text)
 *   padding: 15px 0 (not margin)
 */
.hero-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* legacy: baseline, not center */
  justify-content: center;
  /* legacy: centered */
  gap: 6px;
  padding: 15px 0;
  /* legacy: padding, not margin */
  margin: 0;
  font-size: 18px;
  /* legacy: 18px, not 14px */
  font-family: var(--font-display);
  line-height: 1.5;
  color: rgba(187, 208, 255, 0.7);
  /* legacy body text color */
}

/* LEGACY-CORRECTED: counter-number is soft blue, not white */
.counter-number {
  color: rgba(187, 208, 255, 0.9);
  /* was: var(--shell-text) — wrong */
  font-weight: 700;
}

/* LEGACY-CORRECTED: counter-savings is green accent, not white */
.counter-savings {
  color: var(--accent-success);
  /* was: var(--shell-text) — wrong */
  font-weight: 700;
}

/* Dim the bullet separator */
.counter-separator {
  color: rgba(187, 208, 255, 0.4);
  /* legacy: 0.4 opacity, not 0.5 */
}


/* ═══════════════════════════════════════════════════════════════
   ZIP SCREEN — .subheadline (missing class definition)
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [ZIP screen] [p.subheadline] — Class .subheadline has NO CSS rule.
 * Renders as a default <p> with browser margin (16px top + bottom) and 16px body text.
 * In context it sits between the hero-counter and the entry form card, acting as
 * a prominent supporting caption.
 *
 * LEGACY CORRECTION (2026-03-06): Initial patch used 14px / var(--shell-text-muted).
 * Legacy reference shows font-size: 20px, color: rgba(255,255,255,0.85) — this is a
 * large, prominent caption, NOT fine-print muted text. Using 18px as conservative value.
 */
.subheadline {
  margin: 0 0 var(--space-lg);
  font-size: 18px;
  /* was: 14px — legacy is 20px */
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  /* was: var(--shell-text-muted) — legacy is near-white */
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   QUIZ SCREEN — .quiz-icon.is-empty grid column bleed
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [QUIZ screen] [.quiz-icon.is-empty] — When a quiz step has no icon,
 * the .is-empty class sets visibility: hidden but NOT display: none.
 * The .quiz-header grid has grid-template-columns: auto 1fr, so the hidden
 * 56px icon element still occupies its auto-sized grid column, pushing the
 * [data-quiz-title] text 56px + gap(16px) = 72px to the right — wasting space
 * and creating a ragged left edge inconsistent with steps that have real icons.
 * FIX: Add display: none to collapse the column entirely when empty.
 */
.quiz-icon.is-empty {
  display: none;
  /* collapses the auto grid column; visibility: hidden alone was insufficient */
}


/* ═══════════════════════════════════════════════════════════════
   RESULTS SCREEN — Package card vertical alignment
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [RESULTS screen] [.package-card] — The "Better" (best-value) card has a
 * .package-badge element (~38px tall incl. margin-bottom: 4px) that non-badge cards lack.
 * Because cards use align-content: start, the .package-name on the best-value card sits
 * ~42px lower than on Good/Best cards. This breaks the horizontal eye-line across all
 * three cards: "Good", "Better", "Best" headings do not align.
 * FIX: Reserve equivalent top spacing on non-badge cards via padding-top on .package-name.
 * Token is fine (--radius-pill used on badge is correct). This is an element-level fix.
 */
.package-card:not(.best-value) .package-name {
  padding-top: 42px;
  /* reserves space equal to .package-badge height (8+8px pad + 11px font ≈ line) + 4px margin */
}

/* When a non-best-value card is selected it doesn't get a badge either — keep spacing */
.package-card:not(.best-value):has(input:checked) .package-name {
  padding-top: 42px;
}

/* Ensure the best-value card itself has no extra top padding */
.package-card.best-value .package-name {
  padding-top: 0;
}


/* ═══════════════════════════════════════════════════════════════
   TRUST FOOTER — Missing transition duration
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [Trust footer] [.trust-logos] — Uses transition: all var(--transition-base)
 * but --transition-base was undefined (now fixed at :root above).
 * Without the :root fix this resolved to "all" with 0s duration = no animation.
 * The :root fix above restores the intended 300ms ease. No additional change needed here.
 * This comment documents that the :root override is the authoritative fix.
 */


/* ═══════════════════════════════════════════════════════════════
   TEMPLATE C (.free-inspection-template) — h4 spacing
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [Results — template_c] [.free-inspection-message h4] — Style rule exists in
 * style.css (.free-inspection-message h4 { font-size: 24px }) which is correct.
 * No fix needed for h4. Confirmed OK.
 */


/* ═══════════════════════════════════════════════════════════════
   TRUST FOOTER — Logo image filter (LEGACY PATTERN)
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [Trust footer] [.trust-logos img] — Logo images render in full color against
 * the dark navy shell. Legacy applies grayscale + brightness to make them appear as
 * monochrome silver/white marks — a standard dark-background trust logo treatment.
 * Without this, color logos look jarring and amateurish on the dark background.
 * SOURCE: Legacy computed: filter: grayscale(1) brightness(1.3), opacity: 0.85
 */
.trust-logos img {
  filter: grayscale(1) brightness(1.3);
  opacity: 0.85;
  height: 52px;
  object-fit: contain;
  transition: opacity var(--motion-fast) var(--motion-ease),
    filter var(--motion-fast) var(--motion-ease);
}

.trust-logos img:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

@media screen and (max-width: 560px) {
  .trust-logos img {
    height: 32px;
  }
}

/*
 * ISSUE [Trust footer] [.trust-stats .separator] — Pipe separators (|) between
 * "BBB A+ rated", "4.9 average rating", "1249+ Google Reviews" should be very dim.
 * Legacy: color: rgba(255,255,255,0.2) — nearly invisible separator.
 */
.trust-stats .separator {
  color: rgba(255, 255, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════════════
   QUIZ SCREEN — Option card border weight (LEGACY PATTERN)
   ═══════════════════════════════════════════════════════════════ */

/*
 * ISSUE [Quiz screen] [.option-card] — Legacy uses 2px border on option cards.
 * New project likely uses 1px. The heavier border provides better visual weight
 * for interactive choice cards and improves click-target clarity.
 * SOURCE: Legacy computed: border: 2px solid rgb(229,231,235)
 */
.option-card {
  border-width: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   JS ANIMATION SUPPORT — Counter pulse keyframe
   ═══════════════════════════════════════════════════════════════ */

/*
 * Support class for animateNeighborCounter() JS feature (LEGACY-JS-1).
 * The JS function adds/removes .counter-pulse during the counting animation.
 * Without this CSS the class has no visual effect.
 * See legacy-patterns-audit.md [LEGACY-JS-1] for JS implementation details.
 */
@keyframes counter-tick {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
  }
}

.counter-pulse {
  animation: counter-tick 0.1s ease-in-out;
}

/* Live +1 increment effect — distinct from intro pulse */
@keyframes counter-tick-live {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  35% {
    transform: scale(1.1);
    filter: brightness(1.65);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.counter-tick-up {
  animation: counter-tick-live 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERRIDES for new rules above
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /*
   * On mobile, the .hero-counter wraps to multiple lines naturally.
   * Reduce font size to stay compact — legacy is 18px desktop, 14px mobile.
   */
  .hero-counter {
    font-size: 14px;
    padding: 10px 0;
  }

  /*
   * On mobile, package cards stack vertically (packages-grid: 1fr).
   * The padding-top spacer is unnecessary since cards don't share a row.
   * Reset it to avoid wasted whitespace in the single-column layout.
   */
  .package-card:not(.best-value) .package-name,
  .package-card:not(.best-value):has(input:checked) .package-name {
    padding-top: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ZIP SCREEN — Inline input + button row (LEGACY PATTERN)
   ═══════════════════════════════════════════════════════════════ */

/*
 * PATTERN [ZIP screen] [.zipcode-input-wrapper] — Single-line fused input+button row.
 * Container uses overflow:hidden with border-radius to clip the joined corners,
 * creating a unified pill-shaped control from two separate elements.
 * SOURCE: Legacy computed styles (legacy-patterns-audit.md [LEGACY-1])
 */
.entry-form-card {
  background: transparent;
  padding: 0;
  gap: 0;
  box-shadow: none;
  border: none;
  width: 100%;
  max-width: 100%;
}

.zipcode-input-wrapper {
  display: flex;
  overflow: hidden;
  max-width: 520px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 32px;
  margin: 0 auto;
}

.zipcode-input {
  flex: 1 1 0%;
  border: 0;
  border-radius: 8px 0 0 8px !important;
  padding: 18px 20px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-body);
  background: #ffffff;
  color: #1f2937;
  outline: none;
  min-width: 0;
}

.zipcode-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.zipcode-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 0 8px 8px 0 !important;
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 900;
  font-family: var(--font-body);
  color: rgb(26, 18, 7);
  background-image: linear-gradient(135deg, #ffd54f 0%, #f5b301 45%, #e0a000 100%);
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--motion-fast) var(--motion-ease);
}

.zipcode-btn:hover {
  filter: brightness(1.05);
}

.zipcode-btn:active {
  filter: brightness(0.95);
}

.zipcode-helper {
  margin-top: 10px;
  font-size: 13px;
  color: var(--shell-text-muted);
  text-align: center;
}

.zipcode-input-wrapper.is-invalid {
  border-color: var(--accent-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* NOTE: no .is-valid border — valid state expressed via button shine only */

/* Error message below the input row */
.zipcode-error {
  margin: 6px auto 0;
  max-width: 520px;
  font-size: 13px;
  color: var(--accent-danger);
  min-height: 1.4em;
  /* reserve space so layout doesn't jump */
  padding-left: 4px;
}

/* Shine animation on the Calculate button when a valid FL ZIP is entered */
@keyframes btn-shine {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

.zipcode-btn.has-valid-zip {
  background-image: linear-gradient(110deg,
      #e0a000 0%,
      #f5b301 20%,
      #ffd54f 35%,
      #fff9c4 50%,
      #ffd54f 65%,
      #f5b301 80%,
      #e0a000 100%);
  background-size: 300% auto;
  background-repeat: repeat;
  animation: btn-shine 6.5s linear infinite;
}

@media (max-width: 560px) {
  .zipcode-btn {
    padding: 18px 14px;
    font-size: 13px;
    gap: 0;
  }

  .zipcode-btn svg {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PRIVACY NOTE — Flex pill, no forced line breaks
   ═══════════════════════════════════════════════════════════════ */

/*
 * PATTERN: privacy-note is a flex row with wrap and gap.
 * <br> tags were removed from zip.html; this ensures the pill holds its shape.
 */
.privacy-note {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: var(--shell-text-muted);
}

.privacy-note svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.privacy-note-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM — Field validation states
   ═══════════════════════════════════════════════════════════════ */

/*
 * States applied by contact-form.js behavior on blur validation.
 */
.field-stack.is-invalid input,
.field-stack.is-invalid select {
  border-color: var(--accent-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-stack.is-valid input {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.12);
}


/* ═══════════════════════════════════════════════════════════════
   QUIZ SCREEN — Option card buttons: dark glass style
   ═══════════════════════════════════════════════════════════════ */

.option-card-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.option-card-title {
  color: #ffffff;
}

.option-card-description {
  color: rgba(255, 255, 255, 0.62);
}

.option-card-button:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.option-card-button:active {
  border-color: var(--accent-gold);
  background: rgba(245, 179, 1, 0.12);
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.25);
  transform: translateY(0);
}

.option-card-button.is-selected {
  border-color: var(--accent-gold);
  background: rgba(245, 179, 1, 0.10);
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.25);
}


/* ═══════════════════════════════════════════════════════════════
   QUIZ SCREEN — Option list: 2×2 grid on desktop
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  [data-block="quiz"] .option-list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════
   RESULTS SCREEN — Package card gold selection (PD-1 resolved)
   ═══════════════════════════════════════════════════════════════ */

.package-card:has(input:checked) {
  border-color: var(--accent-gold);
  background: rgb(255, 251, 235);
  box-shadow: rgba(245, 179, 1, 0.25) 0px 8px 24px;
}

.package-card:has(input:checked) .package-price,
.package-card:has(input:checked) .package-name {
  color: #92650a;
}


/* ═══════════════════════════════════════════════════════════════
   FINANCING SCREENS — Horizontal chips, no radio, dark glass
   ═══════════════════════════════════════════════════════════════ */

[data-block="financing_need"] .choice-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-block="financing_need"] .choice-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

[data-block="financing_need"] .choice-card {
  width: auto;
  flex: 0 0 auto;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-lg);
}

[data-block="financing_need"] .choice-card::before {
  display: none;
}

[data-block="financing_need"] .choice-card__title {
  color: #ffffff;
}

[data-block="financing_need"] .choice-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

[data-block="financing_need"] .choice-card:has(input:checked) {
  border-color: var(--accent-gold);
  background: rgba(245, 179, 1, 0.12);
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.25);
}

[data-block="financing_need"] .choice-card:has(input:checked)::before {
  display: none;
}

[data-block="financing_need"] .choice-card:has(input:checked) .choice-card__title {
  color: var(--accent-gold);
}




/* ═══════════════════════════════════════════════════════════════
   RESULTS SCREEN — Countdown timer floating bubble (PD-2 resolved)
   Classes renamed: .results-countdown / .results-countdown__label / .results-countdown__time
   ═══════════════════════════════════════════════════════════════ */

/*
 * Floating pill anchored to the viewport bottom-center.
 * position: fixed so it stays visible while user scrolls the results page.
 * No box-shadow glow — subtle border only.
 */
.results-countdown {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(18, 24, 40, 0.88);
  border: 1px solid rgba(245, 179, 1, 0.35);
  border-radius: var(--radius-pill, 999px);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  /* don't block underlying clicks */
}

.results-countdown svg {
  flex-shrink: 0;
  color: var(--accent-gold);
  opacity: 0.85;
}

.results-countdown__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01em;
}

.results-countdown__time {
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--accent-gold);
  min-width: 3.2ch;
  /* fits "30:00" */
  text-align: right;
}

.results-countdown.is-expired {
  opacity: 0.45;
  filter: grayscale(0.6);
}

@media (max-width: 480px) {
  .results-countdown {
    font-size: 13px;
    padding: 8px 16px;
    bottom: 16px;
  }

  .results-countdown__time {
    font-size: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TRUST FOOTER — strip glass card, correct spacing
   ═══════════════════════════════════════════════════════════════ */

.trust-footer {
  max-width: 100%;
  margin: 14px auto 0;
  padding: 20px 24px;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}


/*
 * ─────────────────────────────────────────────────────────────────
 * DEV REVIEW FLAGS (cannot be fixed via CSS alone):
 *
 * 1. [CONTACT screen] [contact.html] — No section-title-dark heading before the white
 *    card. Every other screen (.block) shows an h2.section-title-dark on the dark
 *    background before the content. The contact block is visually inconsistent —
 *    the dark shell block shows completely empty above the white card.
 *    FIX (HTML): Add <h2 class="section-title-dark">Get Your Quote</h2> as the
 *    first child of the [data-template-slot="contact"] slot in contact.html,
 *    before the .contact-flow div.
 *
 * 2. [RESULTS screen] [app.js / calculate.php] — The "Better" package price renders
 *    as "$12,132.5" (decimal cents). The data-result-format="currency" formatter
 *    does not round to whole dollars, while all other prices show whole numbers.
 *    FIX (JS): In app.js, the "currency" format handler should use
 *    { maximumFractionDigits: 0 } in toLocaleString, or use Math.round() before
 *    formatting. Alternatively, use data-result-format="currency-int" which already
 *    rounds, consistent with other price fields.
 * ─────────────────────────────────────────────────────────────────
 */

.zipcode-helper {
  display: none;
}

[data-block="zip"],
[data-block="quiz"],
[data-block="progress_search"] {
  margin-bottom: 0;
  padding-bottom: 0;
}

.back-button {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff66;
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
}

/* REPAIR SCREEN */
.repair-package-card {
  padding-bottom: 28px;
}

.package-tagline {
  min-height: 16px;
  margin-bottom: 4px;
  color: var(--card-text-muted);
  font-size: 13px;
}

.package-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 14px 24px;
  border: 1px solid #071e44;
  border-radius: var(--radius-md);
  background: #0d2861;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.repair-package-card:has(input[type="radio"]:checked) .package-select-btn {
  background: var(--accent-success);
  border-color: var(--accent-success);
}

.repair-package-card:hover .package-select-btn {
  transform: translateY(-1px);
}

.package-price-original {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-danger);
  text-decoration: line-through;
  opacity: 0.7;
}

/* CONTRACTOR SCREEN */
.contractor-form {
  display: grid;
  gap: var(--space-md);
}

.contractor-block {
  position: relative;
  padding: 28px 20px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.contractor-selected {
  border-color: var(--accent-success);
  box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.15);
}

.contractor-badge {
  position: absolute;
  top: -14px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #35d07f 0%, #00b85b 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(53, 208, 127, 0.35);
}

.contractor-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.contractor-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
}

.contractor-info h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.contractor-license {
  display: inline-block;
  margin-top: 3px;
  color: var(--shell-text-muted);
  font-size: 11px;
}

.contractor-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
}

.highlight-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
  flex: 0 0 auto;
}

.contractor-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contractor-stat {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-gold);
}

.stat-label {
  display: block;
  font-size: 10px;
  color: var(--shell-text-muted);
  margin-top: 2px;
}

.contractor-badges {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 200px;
  justify-content: flex-end;
}

.contractor-badges img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}

@media (max-width: 720px) {
  .contractor-header {
    grid-template-columns: 1fr;
  }

  .contractor-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contractor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contractor-badges {
    position: static;
    max-width: none;
    margin-top: 14px;
  }

  .contractor-badges img {
    width: 48px;
    height: 48px;
  }
}

/* CONTACT SCREEN */
/* ── Contractor block (compact, embedded) ── */
.contractor-embed {
  position: relative;
  padding: 28px 20px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-success);
  box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.15);
}

.contractor-embed .contractor-badge {
  position: absolute;
  top: -14px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #35d07f 0%, #00b85b 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(53, 208, 127, 0.35);
}

.contractor-embed .contractor-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.contractor-embed .contractor-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
}

.contractor-embed .contractor-info h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.contractor-embed .contractor-license {
  display: inline-block;
  margin-top: 3px;
  color: var(--shell-text-muted);
  font-size: 11px;
}

.contractor-embed .contractor-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contractor-embed .highlight-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
}

.contractor-embed .highlight-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
  flex: 0 0 auto;
}

.contractor-embed .contractor-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contractor-embed .contractor-stat {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}

.contractor-embed .stat-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-gold);
}

.contractor-embed .stat-label {
  display: block;
  font-size: 10px;
  color: var(--shell-text-muted);
  margin-top: 2px;
}

.contractor-embed .contractor-badges {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 200px;
  justify-content: flex-end;
}

.contractor-embed .contractor-badges img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}

/* ── Contact flow ── */
.contact-flow {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(24px, 4vw, 32px);
}

.contact-flow .contact-intro {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--shell-text-muted);
}

.contact-flow [data-contact-form] {
  display: grid;
  gap: var(--space-md);
}

.contact-flow .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.contact-flow [data-contact-status] {
  min-height: 1.5em;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--shell-text-muted);
}

.contact-flow .actions {
  margin-top: var(--space-sm);
}

/* ── Dark-shell inputs ── */
.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.2);
  outline: none;
}

/* ── Price summary (dark) ── */
.price-summary {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.price-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--shell-text-muted);
}

.price-summary__savings {
  color: var(--accent-success);
  font-weight: 600;
}

.price-summary__total {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.price-summary__total span:last-child {
  color: var(--accent-gold);
}

.price-sticker {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.price-sticker__old {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-danger);
  text-decoration: line-through;
}

.price-sticker__new {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-success);
}

/* ── Discount cards (multi-select, dark) ── */
.discount-group {
  display: grid;
  gap: var(--space-sm);
}

.discount-group__label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.discount-cards {
  display: grid;
  gap: 10px;
}

.discount-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.discount-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}

.discount-card:has(input:checked) {
  border-color: var(--accent-success);
  background: rgba(53, 208, 127, 0.08);
  box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.15);
}

.discount-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-success);
  cursor: pointer;
}

.discount-card__content {
  display: grid;
  gap: 2px;
}

.discount-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.discount-card__desc {
  font-size: 12px;
  color: var(--shell-text-muted);
  line-height: 1.4;
}

.discount-card__savings {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-success);
  white-space: nowrap;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.discount-card__savings.is-hidden {
  opacity: 0;
}

.discount-card:has(input:checked) .discount-card__savings {
  opacity: 1;
}

/* ── Compact discount cards on desktop ── */
@media (min-width: 768px) {
  .discount-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .discount-card {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .discount-card__savings {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 14px;
  }
}

/* ── SMS modal ── */
.contact-flow .sms-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 24px;
  background: rgba(5, 10, 22, 0.75);
  backdrop-filter: blur(4px);
}

.contact-flow .sms-modal:not(.is-hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-flow .sms-modal__backdrop {
  position: absolute;
  inset: 0;
}

.contact-flow .sms-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 26, 58, 0.92);
  box-shadow: 0 14px 28px rgba(3, 8, 22, 0.45);
  color: #ffffff;
  animation: modalSlideIn var(--motion-base) var(--motion-ease);
}

.contact-flow .sms-modal__dialog h3 {
  margin: 0 40px 10px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact-flow .sms-modal__dialog .muted,
.contact-flow [data-sms-status] {
  color: var(--shell-text-muted);
}

.contact-flow .sms-modal .field-label {
  color: #ffffff;
}

.contact-flow .sms-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--shell-text-muted);
  font-size: 22px;
  line-height: 1;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.contact-flow .sms-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.contact-flow [data-sms-code] {
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.28em;
}

@media (max-width: 720px) {
  .contractor-embed .contractor-header {
    grid-template-columns: 1fr;
  }

  .contractor-embed .contractor-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contractor-embed .contractor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contractor-embed .contractor-badges {
    position: static;
    max-width: none;
    margin-top: 14px;
  }

  .contractor-embed .contractor-badges img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 767px) {
  .contact-flow .row {
    grid-template-columns: 1fr;
  }

  .contact-flow .sms-modal__dialog {
    padding: 24px 20px;
  }
}

/* ── Contact form ── */

.contact-flow {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(24px, 4vw, 32px);
}

.contact-flow .contact-intro {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--shell-text-muted);
}

.contact-flow [data-contact-form] {
  display: grid;
  gap: var(--space-md);
}

.contact-flow .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.contact-flow [data-contact-status] {
  min-height: 1.5em;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--shell-text-muted);
}

.contact-flow .actions {
  margin-top: var(--space-sm);
}

/* ── Dark-shell inputs ── */
.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.2);
  outline: none;
}

/* ── Price summary (dark) ── */
.price-summary {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.price-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--shell-text-muted);
}

.price-summary__savings {
  color: var(--accent-success);
  font-weight: 600;
}

.price-summary__total {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.price-summary__total span:last-child {
  color: var(--accent-gold);
}

.price-sticker {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.price-sticker__old {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-danger);
  text-decoration: line-through;
}

.price-sticker__new {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-success);
}

/* ── Discount cards (multi-select, dark) ── */
.discount-group {
  display: grid;
  gap: var(--space-sm);
}

.discount-group__label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.discount-cards {
  display: grid;
  gap: 10px;
}

.discount-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.discount-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}

.discount-card:has(input:checked) {
  border-color: var(--accent-success);
  background: rgba(53, 208, 127, 0.08);
  box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.15);
}

.discount-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-success);
  cursor: pointer;
}

.discount-card__content {
  display: grid;
  gap: 2px;
}

.discount-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.discount-card__desc {
  font-size: 12px;
  color: var(--shell-text-muted);
  line-height: 1.4;
}

.discount-card__savings {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-success);
  white-space: nowrap;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.discount-card__savings.is-hidden {
  opacity: 0;
}

.discount-card:has(input:checked) .discount-card__savings {
  opacity: 1;
}

/* ── Compact discount cards on desktop ── */
@media (min-width: 768px) {
  .discount-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .discount-card {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .discount-card__savings {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 14px;
  }
}

/* ── SMS modal ── */
.contact-flow .sms-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 24px;
  background: rgba(5, 10, 22, 0.75);
  backdrop-filter: blur(4px);
}

.contact-flow .sms-modal:not(.is-hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-flow .sms-modal__backdrop {
  position: absolute;
  inset: 0;
}

.contact-flow .sms-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 26, 58, 0.92);
  box-shadow: 0 14px 28px rgba(3, 8, 22, 0.45);
  color: #ffffff;
  animation: modalSlideIn var(--motion-base) var(--motion-ease);
}

.contact-flow .sms-modal__dialog h3 {
  margin: 0 40px 10px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact-flow .sms-modal__dialog .muted,
.contact-flow [data-sms-status] {
  color: var(--shell-text-muted);
}

.contact-flow .sms-modal .field-label {
  color: #ffffff;
}

.contact-flow .sms-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--shell-text-muted);
  font-size: 22px;
  line-height: 1;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.contact-flow .sms-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.contact-flow [data-sms-code] {
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.28em;
}

@media (max-width: 767px) {
  .contact-flow .row {
    grid-template-columns: 1fr;
  }

  .contact-flow .sms-modal__dialog {
    padding: 24px 20px;
  }
}

/* ── Simple contact form ── */

/* ── Contractor block (compact, embedded) ── */
.contractor-embed {
  position: relative;
  padding: 28px 20px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-success);
  box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.15);
}

.contractor-embed .contractor-badge {
  position: absolute;
  top: -14px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #35d07f 0%, #00b85b 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(53, 208, 127, 0.35);
}

.contractor-embed .contractor-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.contractor-embed .contractor-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
}

.contractor-embed .contractor-info h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.contractor-embed .contractor-license {
  display: inline-block;
  margin-top: 3px;
  color: var(--shell-text-muted);
  font-size: 11px;
}

.contractor-embed .contractor-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contractor-embed .highlight-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
}

.contractor-embed .highlight-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
  flex: 0 0 auto;
}

.contractor-embed .contractor-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contractor-embed .contractor-stat {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}

.contractor-embed .stat-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-gold);
}

.contractor-embed .stat-label {
  display: block;
  font-size: 10px;
  color: var(--shell-text-muted);
  margin-top: 2px;
}

.contractor-embed .contractor-badges {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 200px;
  justify-content: flex-end;
}

.contractor-embed .contractor-badges img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}

/* ── Contact flow ── */
.contact-flow {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(24px, 4vw, 32px);
}

.contact-flow .contact-intro {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--shell-text-muted);
}

.contact-flow [data-contact-form] {
  display: grid;
  gap: var(--space-md);
}

.contact-flow .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.contact-flow [data-contact-status] {
  min-height: 1.5em;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--shell-text-muted);
}

.contact-flow .actions {
  margin-top: var(--space-sm);
}

/* ── Dark-shell inputs ── */
.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-flow input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.2);
  outline: none;
}

/* ── Price summary (dark) ── */
.price-summary {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.price-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--shell-text-muted);
}

.price-summary__total {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.price-summary__total span:last-child {
  color: var(--accent-gold);
}

/* ── SMS modal ── */
.contact-flow .sms-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 24px;
  background: rgba(5, 10, 22, 0.75);
  backdrop-filter: blur(4px);
}

.contact-flow .sms-modal:not(.is-hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-flow .sms-modal__backdrop {
  position: absolute;
  inset: 0;
}

.contact-flow .sms-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 26, 58, 0.92);
  box-shadow: 0 14px 28px rgba(3, 8, 22, 0.45);
  color: #ffffff;
  animation: modalSlideIn var(--motion-base) var(--motion-ease);
}

.contact-flow .sms-modal__dialog h3 {
  margin: 0 40px 10px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact-flow .sms-modal__dialog .muted,
.contact-flow [data-sms-status] {
  color: var(--shell-text-muted);
}

.contact-flow .sms-modal .field-label {
  color: #ffffff;
}

.contact-flow .sms-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--shell-text-muted);
  font-size: 22px;
  line-height: 1;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.contact-flow .sms-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.contact-flow [data-sms-code] {
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.28em;
}

@media (max-width: 720px) {
  .contractor-embed .contractor-header {
    grid-template-columns: 1fr;
  }

  .contractor-embed .contractor-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contractor-embed .contractor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contractor-embed .contractor-badges {
    position: static;
    max-width: none;
    margin-top: 14px;
  }

  .contractor-embed .contractor-badges img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 767px) {
  .contact-flow .row {
    grid-template-columns: 1fr;
  }

  .contact-flow .sms-modal__dialog {
    padding: 24px 20px;
  }
}

/* INSPECTION SCREEN */

.priority-badge-chip {
  background: linear-gradient(135deg, #f5b301 0%, #ffca28 100%);
  color: #1a1207;
  box-shadow: 0 4px 12px rgba(245, 179, 1, 0.24);
}

.priority-consultation-message {
  position: relative;
  border-radius: var(--radius-xl);
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #ffb000 0%, #e58b00 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.contractor-badges {
  flex-wrap: nowrap !important;
}

.contractor-embed .contractor-badge {
  position: absolute;
  top: -14px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #177243 0%, #0a743e 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: unset;
}

.contractor-embed .contractor-badges img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}

.contractor-embed .contractor-badges {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 230px;
  justify-content: flex-end;
}

.contractor-embed .contractor-highlights {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contractor-embed .stat-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-gold);
}

.contractor-embed .stat-label {
  display: block;
  font-size: 13px;
  color: var(--shell-text-muted);
  margin-top: 2px;
}

.contractor-embed .contractor-logo {
  width: 136px;
  height: 61px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
}

.contractor-embed .contractor-license {
  display: inline-block;
  margin-top: 3px;
  color: var(--shell-text-muted);
  font-size: 15px;
}

.priority-consultation-message h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Adjust horizontal spacing */
}

.priority-badge {
  margin-top: 0;
  margin-bottom: 0;
}

.priority-consultation-message h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 10px 0;
}

.contractor-embed .contractor-highlights {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Phase 2 improvements (2026-03-08)
   Targets: 320–480px readability, tap targets, layout fixes
   All rules appear AFTER global rules to ensure correct cascade.
   ═══════════════════════════════════════════════════════════════ */

/* ── 767px: package-description min-height ──
   Cards stack to 1 column; equal-height alignment is no longer needed.
   Removing min-height prevents excessive whitespace per card. */
@media (max-width: 767px) {
  .package-description {
    min-height: auto;
  }
}

/* ── 720px + 560px: contractor-embed highlights cascade fix ──
   BUG FIX: The global .contractor-embed .contractor-highlights rule above
   sets repeat(6, 1fr) which appears AFTER the 720px breakpoint rule,
   overriding it at all screen sizes. These rules restore correct column
   counts by appearing last in the cascade. */
@media (max-width: 720px) {
  .contractor-embed .contractor-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .contractor-embed .contractor-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 480px: typography & spacing ── */
@media (max-width: 480px) {

  /* ZIP: 18px subheadline is slightly large for 375px viewports */
  .subheadline {
    font-size: 16px;
  }

  /* Results: 24px h4 headings feel oversized in single-column dark-shell layout */
  .free-inspection-message h4,
  .priority-consultation-message h4 {
    font-size: 20px;
  }

  /* White-card section titles (contractor embedded in contact) */
  .section-title-light {
    font-size: 20px;
  }

  /* Contact flow double-padding fix:
     .block provides 18px sides + .contact-flow adds 24px min = 42px each side.
     On 375px that leaves only 259px for form inputs. Reduce flow padding. */
  .contact-flow {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Estimate header: tighten gap in result screens on small viewports */
  .estimate-header {
    gap: 8px;
    margin-bottom: var(--space-md);
  }

  /* Progress search title: clamp(2rem, 5vw, 2.75rem) on 375px clamps to 2rem=32px
     (5vw=18.75px falls below the minimum). "CALCULATING YOUR PRICE" in Special
     Gothic Expanded One at 32px overflows a 343px column. Lower the clamp floor. */
  [data-behavior-root="search_progress"] .progress-search-title {
    font-size: clamp(1.6rem, 5vw, 2.75rem);
  }

  /* Contractor embed stats: restore 2-col on 480px
     (the global 6-col highlights rule above broke the 720px cascade) */
  .contractor-embed .contractor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 380px: narrow-phone guard ──
   On 360–375px viewports Special Gothic Expanded One at 2rem (32px)
   risks horizontal overflow on long display headings like "CALCULATE YOUR".
   Reduce to 1.6rem (25.6px) which comfortably fits a 343px content column. */
@media (max-width: 380px) {

  .headline,
  .display-heading {
    font-size: 1.6rem;
  }

  /* Reduce shell side gap: 12px per side instead of 16px → +8px content width */
  .header-container,
  .app-shell,
  .footer-content {
    width: min(var(--shell-max), calc(100% - 24px));
  }

  /* Tighten block padding sides on very narrow screens */
  .block {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Transparent blocks always keep zero side padding */
  [data-block="zip"],
  [data-block="quiz"],
  [data-block="progress_search"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Phase 3 screen-by-screen fixes (2026-03-08)
   ═══════════════════════════════════════════════════════════════ */

/* ── ZIP screen ──────────────────────────────────────────────── */

/* hero-counter: on mobile all flex items share one pool, so the
   separator "•" dangled at the end of a wrapped line. Fix: stack
   vertically and hide the separator. Each stat stays as one unit. */
@media (max-width: 560px) {
  .hero-counter {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .hero-counter .counter-separator {
    display: none;
  }

  .hero-counter .counter-text {
    text-align: center;
  }

  /* privacy-note: same dangling-separator issue at narrow widths */
  .privacy-note {
    flex-wrap: wrap;
    justify-content: center;
  }

  .privacy-note .counter-separator {
    display: none;
  }

  .privacy-note span {
    white-space: nowrap;
  }
}

/* ZIP input: button steals >50% of the 351px wrapper, leaving only
   162px for the input field — placeholder clips to "Enter your ZIP c".
   Fix: stack input + button vertically so both get full width. */
@media (max-width: 560px) {
  .zipcode-input-wrapper {
    flex-direction: column;
  }

  .zipcode-input {
    border-radius: 8px 8px 0 0 !important;
    font-size: 18px;
  }

  .zipcode-btn {
    border-radius: 0 0 8px 8px !important;
    width: 100%;
    font-size: 15px;
    padding: 17px 20px;
  }
}

/* Trust footer logos: container had fixed height: 52px. At 375px the 3 logos
   (136 + 147 + 136px) total 455px — far wider than the 303px container, so
   Energy Star wraps to row 2 but stays inside a clipped 52px box, then bleeds
   over the trust-stats text below (overflow: visible). Fix: height: auto. */
@media (max-width: 560px) {
  .trust-logos {
    height: auto;
    gap: 10px;
    row-gap: 8px;
  }
}

/* ── Quiz / all screens: back-button tap target ──────────────── */

/* back-button: styled as bare text link (padding:0, border:none) →
   computed height 24px. iOS/Android min tap target is 44px.
   Add vertical padding that expands the tap area without changing appearance. */
@media (max-width: 767px) {
  .back-button {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ── Contractor screen: badges overflow fix ──────────────────── */

/* ROOT CAUSE: Global rules at lines ~3544–3562 set
   .contractor-embed .contractor-badges { position: absolute; max-width: 230px }
   for ALL viewport widths, overriding the existing @media (max-width: 720px)
   block that correctly used position: static (normal flow).
   At 375px the 5 badges (52px each) total 284px > 230px container →
   flex overflow-start causes BBB badge to protrude 14px outside the card.

   FIX: Restore the intended mobile layout with !important to beat the
   unscoped global overrides. Badges become a static grid row below the logo,
   wrapped in a single row (5×44px + 4×6px gaps = 244px ≈ header width). */
@media (max-width: 720px) {
  .contractor-embed .contractor-badges {
    position: static !important;
    max-width: none !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .contractor-embed .contractor-badges img {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── ZIP input: center placeholder + digits on mobile ──────── */
@media (max-width: 560px) {
  .zipcode-input {
    text-align: center !important;
  }
}

/* ── OTP verification cells ─────────────────────────────────── */

.otp-cells-wrapper {
  margin-bottom: 16px;
}

.otp-cells {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.otp-cell {
  width: 44px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  caret-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background: #fff;
  color: #111827;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.otp-cell:focus {
  border-color: #2563eb;
  background: #eff6ff;
}

.otp-cell.is-filled {
  border-color: #16a34a;
  background: #f0fdf4;
}

.otp-cell::-webkit-outer-spin-button,
.otp-cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hidden aggregator: holds concatenated 6-digit value for form submission */
.otp-aggregator {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
  top: -9999px;
  left: -9999px;
}

/* Contact fields section label */
.contact-fields-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 0 0 8px 0;
}

/* ── Header mobile: one row (logo + CTA), phone number hidden ── */
@media (max-width: 767px) {
  .header-phone {
    display: none !important;
  }

  .header-container {
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px 0 !important;
  }

  .header-contact {
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .header-cta {
    width: auto !important;
    white-space: nowrap;
  }
}