:root {
      --bg: #f4f6f3;
      --card: #ffffff;
      --ink: #17211b;
      --muted: #667067;
      --line: #dfe6df;
      --accent: #1f7a3f;
      --accent-dark: #14552b;
      --soft: #eaf4ec;
      --warn: #fff4d8;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      background: transparent !important;
    }

    body {
      font-family: 'DM Sans', Arial, sans-serif;
      color: var(--ink);
      padding: 32px;
    }

    .solar-shell {
      display: grid;
      grid-template-columns: 1fr;
      max-width: 860px;
      width: 100%;
      margin: 0 auto;
      gap: 24px;
    }

    .solar-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 18px 55px rgba(23, 33, 27, 0.08);
    }

    .eyebrow {
      display: inline-block;
      background: var(--soft);
      color: var(--accent-dark);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 8px 12px;
      border-radius: 999px;
      margin-bottom: 14px;
    }

    h1, h2, h3 {
      margin: 0;
      line-height: 1.08;
      font-family: 'Manrope', Arial, sans-serif;
    }

    h1 {
      font-size: clamp(32px, 5vw, 52px);
      letter-spacing: -0.04em;
      margin-bottom: 14px;
    }

    h2 {
      font-size: 24px;
      margin-bottom: 16px;
    }

    p {
      line-height: 1.55;
      color: var(--muted);
    }

    .hero-copy {
      font-size: 17px;
      max-width: 560px;
      margin-bottom: 22px;
    }


    .pv-status {
      background: #eaf4ec;
      border: 1px solid rgba(31, 122, 63, 0.25);
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 14px;
      color: var(--accent-dark);
      font-weight: 700;
      line-height: 1.4;
    }

    .pv-status.warning {
      background: #fff4d8;
      border-color: #f1d38b;
      color: #5b4200;
    }

    .field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .field {
      margin-bottom: 16px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 7px;
      font-family: 'Manrope', Arial, sans-serif;
    }

    input, select {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 15px;
      color: var(--ink);
      background: #fff;
      outline: none;
    }

    input:focus, select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(31, 122, 63, 0.12);
    }

    .helper {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
    }

    button {
      width: 100%;
      border: 0;
      border-radius: 14px;
      padding: 15px 18px;
      background: var(--accent);
      color: #fff;
      font-family: 'Manrope', Arial, sans-serif;
      font-weight: 800;
      font-size: 16px;
      cursor: pointer;
      transition: 0.18s ease;
    }

    button:hover {
      background: var(--accent-dark);
      transform: translateY(-1px);
    }

    .headline-result {
      background: linear-gradient(135deg, var(--accent), #35a75d);
      color: #fff;
      border-radius: 22px;
      padding: 24px;
      margin-bottom: 18px;
    }

    .headline-result p,
    .headline-result .small {
      color: rgba(255,255,255,0.86);
      margin: 0;
    }

    .headline-number {
      font-family: 'Manrope', Arial, sans-serif;
      font-size: 44px;
      font-weight: 800;
      letter-spacing: -0.05em;
      margin: 6px 0 8px;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 18px;
    }

    .metric {

      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      background: #fff;
    }

    .metric-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 7px;
      font-family: 'Manrope', Arial, sans-serif;
    }

    .metric-value {
      font-family: 'Manrope', Arial, sans-serif;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .tax-box, .fine-print {
      border-radius: 16px;
      padding: 16px;
      margin-top: 14px;
    }

    .tax-box {
      background: var(--warn);
      border: 1px solid #f1d38b;
    }

    .tax-box strong {
      color: #5b4200;
    }

    .results {
      display: none;
      opacity: 0;
      transform: translateY(14px);
    }

    .results {
      margin-top: 0;
    }

    .details-card {
      margin-top: 24px;
    }

    .results.results-visible {
      animation: resultsFadeIn 0.45s ease forwards;
    }

    @keyframes resultsFadeIn {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .success-banner {
      background: #eaf4ec;
      border: 1px solid rgba(31, 122, 63, 0.25);
      border-radius: 18px;
      padding: 16px;
      margin-bottom: 18px;
      color: var(--accent-dark);
      line-height: 1.45;
    }

    .success-banner strong {
      display: block;
      font-family: 'Manrope', Arial, sans-serif;
      font-size: 18px;
      margin-bottom: 3px;
    }

    .success-banner span {
      color: var(--accent-dark);
      font-size: 14px;
    }

    .metric-featured.flash-highlight {
      animation: featuredPulse 1.1s ease;
    }

    @keyframes featuredPulse {
      0% {
        box-shadow: 0 0 0 rgba(31, 122, 63, 0);
        transform: scale(1);
      }
      45% {
        box-shadow: 0 0 0 7px rgba(31, 122, 63, 0.14);
        transform: scale(1.015);
      }
      100% {
        box-shadow: 0 0 0 rgba(31, 122, 63, 0);
        transform: scale(1);
      }
    }
    .location-estimate-card,
    .monthly-production-card {
      border: 1px solid rgba(31, 122, 63, 0.22);
      border-radius: 22px;
      background: #f8fbf8;
      margin: 18px 0 22px;
      padding: 22px;
      box-shadow: 0 12px 30px rgba(23, 33, 27, 0.06);
    }

    .location-estimate-card h3,
    .monthly-production-card h3 {
      font-size: 24px;
      margin-bottom: 10px;
      letter-spacing: -0.03em;
    }

    .location-estimate-card p,
    .monthly-production-card p {
      margin: 8px 0;
    }

    .location-note {
      color: var(--accent-dark);
      font-weight: 700;
      font-size: 14px;
    }

    .monthly-chart {
      margin-top: 16px;
      display: grid;
      gap: 9px;
    }

    .monthly-row {
      display: grid;
      grid-template-columns: 42px 1fr 82px;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }

    .monthly-label {
      color: var(--muted);
      font-weight: 800;
      font-family: 'Manrope', Arial, sans-serif;
    }

    .monthly-bar-track {
      height: 12px;
      border-radius: 999px;
      background: #e6ece6;
      overflow: hidden;
    }

    .monthly-bar {
      height: 100%;
      border-radius: 999px;
      background: var(--accent);
      min-width: 3%;
    }

    .monthly-value {
      text-align: right;
      color: var(--ink);
      font-weight: 800;
      font-family: 'Manrope', Arial, sans-serif;
    }

.methodology-card {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #ffffff;
      margin: 18px 0 22px;
      padding: 22px;
      box-shadow: 0 16px 42px rgba(23, 33, 27, 0.08);
    }

    .methodology-card h3 {
      font-size: 26px;
      margin-bottom: 16px;
      letter-spacing: -0.03em;
    }

    .methodology-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 16px 0;
    }

    .methodology-item {
      position: relative;
      background: #f7f8f7;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 12px 12px 36px;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.35;
    }

    .methodology-item::before {
      content: "✓";
      position: absolute;
      left: 13px;
      top: 11px;
      color: var(--accent);
      font-weight: 800;
      font-family: 'Manrope', Arial, sans-serif;
    }

    .methodology-note {
      color: var(--accent-dark);
      font-weight: 700;
      margin-bottom: 0;
    }

.report-card h3 {
      font-family: 'Manrope', Arial, sans-serif;
      font-size: 26px;
      letter-spacing: -0.03em;
      margin-bottom: 10px;
    }

    .warning-box {
      background: #fff4d8;
      border: 1px solid #f1d38b;
      border-radius: 16px;
      padding: 15px 16px;
      margin: 16px 0 18px;
      color: #5b4200;
      line-height: 1.48;
      font-size: 14px;
    }

    .timeline-box {
      background: #eaf4ec;
      border: 1px solid rgba(31, 122, 63, 0.22);
      border-radius: 16px;
      padding: 15px 16px;
      margin: -4px 0 18px;
      color: var(--accent-dark);
      line-height: 1.48;
      font-size: 14px;
    }


    .lead-submit-message {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #eaf4ec;
      border: 1px solid rgba(31, 122, 63, 0.25);
      color: var(--accent-dark);
      font-weight: 700;
      line-height: 1.4;
    }

    .lead-submit-message.warning {
      background: #fff4d8;
      border-color: #f1d38b;
      color: #5b4200;
    }

    .fine-print {
      background: #f7f8f7;
      border: 1px solid var(--line);
      font-size: 12px;
      color: var(--muted);
    }

    .cta-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 16px;
    }

    .ghost-button {
      background: #17211b;
    }

    .ghost-button:hover {
      background: #000;
    }

    .error {
      display: none;
      background: #fdeaea;
      color: #8c1f1f;
      border: 1px solid #f0b8b8;
      padding: 12px 14px;
      border-radius: 12px;
      margin-bottom: 14px;
      font-weight: 700;
    }

    .metric-featured {
      grid-column: span 2;
      background: linear-gradient(135deg, #eaf4ec, #ffffff);
      border-color: rgba(31, 122, 63, 0.25);
      padding: 24px;
    }

    .metric-featured .metric-label {
      color: var(--accent-dark);
      font-size: 13px;
    }

    .metric-featured .metric-value {
      color: var(--accent-dark);
      font-size: clamp(42px, 6vw, 60px);
      line-height: 1;
    }

@media (max-width: 860px) {
      .metric-featured {
        grid-column: span 1;
      }

      body {
        padding: 18px;
      }

      .solar-shell {
        grid-template-columns: 1fr;
      }

      .field-grid, .metric-grid, .methodology-grid {
        grid-template-columns: 1fr;
      }
    }

/* Lead-generation results flow */
.results-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.results-topbar .eyebrow { margin-bottom: 8px; }

.text-button {
  width: auto;
  flex: 0 0 auto;
  background: transparent;
  color: var(--accent-dark);
  border: 1px solid rgba(31, 122, 63, 0.28);
  padding: 10px 13px;
  font-size: 13px;
}

.text-button:hover {
  background: var(--soft);
  color: var(--accent-dark);
  transform: none;
}

.metric-subtext {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.metric-impact {
  grid-column: span 2;
  background: #fff8e9;
  border-color: #edd39b;
  padding: 22px;
}

.metric-impact .metric-label { color: #6a4a08; }
.metric-impact .metric-value { font-size: clamp(34px, 5vw, 48px); color: #6a4a08; }

.financing-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f4f7fb;
  border: 1px solid #dce4ee;
  border-radius: 18px;
  padding: 17px;
  margin: 18px 0;
}

.financing-callout p { margin: 4px 0 0; font-size: 14px; }
.financing-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dce4ee;
  font-weight: 800;
  color: var(--accent-dark);
}

.conversion-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr;
  gap: 16px;
  margin: 24px 0;
}

.conversion-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  background: #fff;
}

.conversion-panel h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.email-results-panel { background: #f8fbf8; border-color: rgba(31, 122, 63, 0.22); }
.review-panel { background: #fbfbfb; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0 4px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.email-results-form { margin-top: 12px; }
.review-form-grid { margin-top: 14px; }

@media (max-width: 860px) {
  .conversion-grid { grid-template-columns: 1fr; }
  .metric-impact { grid-column: span 1; }
  .results-topbar { flex-direction: column; }
  .text-button { width: 100%; }
}


/* Dual recommendation cards */
.solar-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; text-align:left; }
.solar-option { border:1px solid rgba(0,0,0,.10); border-radius:16px; padding:20px; background:rgba(255,255,255,.72); }
.solar-option-featured { border-width:2px; }
.option-kicker { display:block; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.solar-option .headline-number { font-size:clamp(1.65rem,4vw,2.6rem); line-height:1.08; }
@media (max-width:700px){ .solar-option-grid { grid-template-columns:1fr; } }