/* ==========================================================================
   Instant Quote Widget
   Mobile-first. Inherits the site :root color vars and system font stack
   defined in index.html. Premium, calm, forward-only funnel.
   ========================================================================== */

.qw-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--sand);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qw-overlay[hidden] { display: none; }

/* Top bar: back, progress, close */
.qw-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 72px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--green-100);
}
.qw-back,
.qw-close {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.qw-back:hover,
.qw-close:hover { color: var(--green-900); background: var(--green-100); }
.qw-back { justify-self: start; }
.qw-close { justify-self: end; font-size: 1.1rem; }
.qw-back[hidden] { visibility: hidden; }

/* Progress: one fill bar that ends at the price */
.qw-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.qw-bar-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.qw-bar-now { color: var(--green-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qw-bar-goal { color: #b3bfb8; white-space: nowrap; flex: none; }
.qw-bar-goal.reached { color: var(--green-700); }
.qw-bar {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #e3e9e5;
  overflow: hidden;
}
.qw-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), var(--green-700));
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .qw-bar-fill { transition: none; }
}

/* Stage / screens */
.qw-stage {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 28px 18px 48px;
}
.qw-screen {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  animation: qwIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.qw-screen.back { animation: qwInBack 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }

@keyframes qwIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes qwInBack {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .qw-screen, .qw-screen.back { animation: qwFade 0.2s ease; }
  @keyframes qwFade { from { opacity: 0; } to { opacity: 1; } }
}

/* Headlines */
.qw-h {
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--green-900);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.qw-sub {
  color: var(--muted);
  font-size: 1.02rem;
  margin-bottom: 26px;
}
.qw-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 12px;
}

/* Tap cards */
.qw-cards { display: grid; gap: 12px; margin-bottom: 8px; }
.qw-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--white);
  border: 2px solid var(--green-100);
  border-radius: 14px;
  padding: 18px 18px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.qw-card:hover { border-color: var(--green-300); box-shadow: var(--shadow); }
.qw-card:active { transform: scale(0.99); }
.qw-card.selected { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.15); }
.qw-card .qw-card-title { font-weight: 700; color: var(--green-900); font-size: 1.08rem; }
.qw-card .qw-card-meta { color: var(--muted); font-size: 0.92rem; margin-top: 2px; }
.qw-card .qw-card-num {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--green-100);
  color: var(--green-900);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qw-card .qw-card-num-none { font-size: 1.25rem; background: var(--sand); }
.qw-card .qw-card-body { flex: 1; min-width: 0; }
/* Selected checkmark */
.qw-card .qw-check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0.85rem;
  font-weight: 800;
  transition: all 0.15s ease;
}
.qw-card.selected .qw-check {
  background: var(--green-500);
  border-color: var(--green-500);
  color: var(--white);
}

/* Photo cards (size) */
.qw-card.qw-card-photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.qw-card.qw-card-photo .qw-card-img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  background: var(--green-100);
  display: block;
}
.qw-card.qw-card-photo .qw-card-body { padding: 14px 16px 16px; }
.qw-card.qw-card-photo .qw-check { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.9); }

/* Low-emphasis text option */
.qw-textlink {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 8px;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qw-textlink:hover { color: var(--green-700); }

/* Fields */
.qw-field { margin-bottom: 18px; }
.qw-field label {
  display: block;
  font-weight: 700;
  color: var(--green-900);
  font-size: 0.95rem;
  margin-bottom: 7px;
}
.qw-field input {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--green-100);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qw-field input:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.15);
}
.qw-field input::placeholder { color: #a7b3ac; }
.qw-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

/* Consent block */
.qw-consent {
  margin-top: 4px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--green-100);
  border-radius: 12px;
}
.qw-consent[hidden] { display: none; }
.qw-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.qw-consent input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--green-700); }
.qw-consent p { color: var(--muted); font-size: 0.8rem; line-height: 1.5; margin: 0; }
.qw-consent a { color: var(--green-700); font-weight: 600; }

/* Buttons */
.qw-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: inherit;
  background: var(--green-700);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 15px 26px;
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.qw-btn:hover { background: var(--green-900); transform: translateY(-1px); }
.qw-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.qw-btn.secondary {
  background: none;
  color: var(--green-700);
  box-shadow: none;
  border: 2px solid var(--green-100);
}
.qw-btn.secondary:hover { background: var(--green-100); color: var(--green-900); }

.qw-error {
  color: #b3261e;
  font-size: 0.9rem;
  font-weight: 600;
  margin: -6px 0 14px;
  min-height: 1em;
}

/* Map embed. The dominant element on the confirm screen: full column width,
   roughly a 4:3 frame, capped so both buttons stay in view.
   The fixed height is the fallback for browsers without aspect-ratio. */
.qw-map {
  width: 100%;
  height: 440px;
  border: 1px solid var(--green-100);
  border-radius: 14px;
  margin-bottom: 18px;
  background: var(--green-100);
  display: block;
}
@supports (aspect-ratio: 4 / 3) {
  .qw-map {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 42vh;   /* narrow screens: take the height even if it exceeds 4:3 */
    max-height: 58vh;   /* short screens: shrink rather than push the buttons off */
  }
}

/* Calculating */
.qw-calc {
  text-align: center;
  padding: 60px 0;
}
.qw-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 4px solid var(--green-100);
  border-top-color: var(--green-700);
  animation: qwSpin 0.9s linear infinite;
}
@keyframes qwSpin { to { transform: rotate(360deg); } }
.qw-calc p { color: var(--green-900); font-weight: 700; font-size: 1.1rem; }

/* Price reveal */
.qw-price-block {
  background: var(--white);
  border: 1px solid var(--green-100);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-align: center;
  margin-bottom: 22px;
}
.qw-strike {
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: line-through;
  margin-bottom: 4px;
}
.qw-bigprice {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--green-700);
  line-height: 1;
}
.qw-bigprice span {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.qw-price-note { color: var(--green-900); font-size: 1rem; margin-top: 16px; font-weight: 600; }
.qw-fineprint { color: var(--muted); font-size: 0.92rem; margin: 14px 0 0; line-height: 1.55; }
.qw-video-cta {
  display: inline-block;
  color: var(--green-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}
.qw-softnote {
  background: var(--green-100);
  color: var(--green-900);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.92rem;
  margin-bottom: 18px;
}

.qw-center { text-align: center; }
.qw-lead-icon { font-size: 2.6rem; display: block; margin-bottom: 12px; }

@media (min-width: 560px) {
  .qw-h { font-size: 2rem; }
  .qw-cards.two { grid-template-columns: 1fr 1fr; }
}

/* Stacked secondary action (map confirm) */
.qw-btn-stack { margin-top: 10px; }

/* Plan cards (price reveal) */
.qw-plans-hint {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.qw-plans { display: grid; gap: 14px; margin-bottom: 22px; }
.qw-plan {
  position: relative;
  background: var(--white);
  border: 2px solid var(--green-100);
  border-radius: 18px;
  padding: 22px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qw-plan:hover { border-color: var(--green-300); box-shadow: var(--shadow); }
.qw-plan:focus-visible { outline: 3px solid rgba(64, 145, 108, 0.4); outline-offset: 2px; }
.qw-plan.selected { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.15); }
.qw-plan.static { cursor: default; border-style: solid; }
.qw-plan.static:hover { border-color: var(--green-100); box-shadow: none; }
.qw-plan-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--green-500);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.qw-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qw-plan .qw-check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0.85rem;
  font-weight: 800;
  transition: all 0.15s ease;
}
.qw-plan.selected .qw-check {
  background: var(--green-500);
  border-color: var(--green-500);
  color: var(--white);
}
.qw-plan-name {
  font-weight: 800;
  color: var(--green-900);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
/* Offer block: anchor and intro price sit side by side at the same size */
.qw-offer { margin-top: 14px; }
.qw-offer-label {
  font-weight: 700;
  color: var(--green-900);
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.qw-offer-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}
.qw-offer-was,
.qw-offer-now {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.05;
}
.qw-offer-was { color: var(--muted); text-decoration: line-through; }
.qw-offer-now { color: var(--green-700); }
.qw-offer-note {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.qw-plan-price {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--green-700);
  line-height: 1.05;
}
.qw-plan-price span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.qw-plan-after {
  color: var(--green-900);
  font-size: 0.98rem;
  font-weight: 600;
  margin-top: 12px;
}
.qw-plan-terms {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--green-100);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* What's included checklist */
.qw-included {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--green-100);
}
.qw-included-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 10px;
}
.qw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qw-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.qw-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep the progress bar readable on very small screens */
@media (max-width: 460px) {
  .qw-topbar { grid-template-columns: 60px 1fr 40px; }
  .qw-bar-labels { font-size: 0.64rem; letter-spacing: 0.02em; }
  .qw-plan-price,
  .qw-offer-was,
  .qw-offer-now { font-size: 2.2rem; }
  .qw-offer-prices { gap: 12px; }
}

/* ==========================================================================
   Desktop layout hooks. Last in the file so these win on order as well as
   specificity. Below this breakpoint both screens keep the standard 520px
   column and the plan cards stay stacked, monthly first. Screens without one
   of these classes, including heavy reset, waitlist, and custom, are
   unaffected at every width.
   ========================================================================== */
@media (min-width: 900px) {
  .qw-screen.qw-map-screen { max-width: 720px; }
  .qw-screen.qw-plans-screen { max-width: 880px; }
  .qw-screen.qw-plans-screen .qw-plans {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
  }
}