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

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'DM Sans', Arial, sans-serif;
      background: radial-gradient(circle at top left, #e8f5eb, var(--bg) 42%);
      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: 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;
      }
    }