/* ─── CSS Variables (match site) ─── */
    :root {
      --forest: #12344D;
      --premium: #0F172A;
      --accent: #D4A017;
      --forest-light: #2C5240;
      --clay: #C77B4F;
      --gold: #E8A23D;
      --oatmeal: #F7F2EA;
      --oatmeal-deep: #EFE7D8;
      --charcoal: #2B2724;
      --charcoal-soft: #5A554F;
      --line: rgba(43,39,36,0.12);
      --white: #FFFFFF;
      --font-head: "Fraunces","Georgia",serif;
      --font-body: "Inter",-apple-system,BlinkMacSystemFont,sans-serif;
      --radius: 8px;
      --max: 1200px;
    }

    /* ─── Calculator Layout ─── */
    .calc-shell {
      background: var(--oatmeal);
      padding: 48px 0 80px;
    }
    .calc-grid {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 32px;
      align-items: start;
    }
    @media(max-width:900px){
      .calc-grid { grid-template-columns: 1fr; }
    }

    /* ─── Progress Bar ─── */
    .progress-bar {
      display: flex;
      gap: 0;
      margin-bottom: 32px;
    }
    .progress-step {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--charcoal-soft);
      cursor: pointer;
      position: relative;
    }
    .progress-step::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 2px;
      background: var(--line);
    }
    .progress-step:last-child::after { display: none; }
    .progress-step .step-num {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--oatmeal-deep);
      border: 2px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-head);
      font-size: 0.85rem;
      flex-shrink: 0;
      transition: all .2s;
    }
    .progress-step.active .step-num {
      background: var(--forest);
      border-color: var(--forest);
      color: var(--oatmeal);
    }
    .progress-step.done .step-num {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--premium);
    }
    .progress-step.active { color: var(--forest); }
    .step-label { display: none; }
    @media(min-width:600px){ .step-label { display: block; } }

    /* ─── Form Cards ─── */
    .form-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 32px;
      box-shadow: 0 4px 16px rgba(15,23,42,0.04);
      margin-bottom: 16px;
    }
    .form-card h2 {
      font-family: var(--font-head);
      font-size: 1.4rem;
      color: var(--forest);
      margin: 0 0 4px;
    }
    .form-card .card-sub {
      font-size: 0.85rem;
      color: var(--charcoal-soft);
      margin: 0 0 24px;
    }
    .field-group { margin-bottom: 20px; }
    .field-group label {
      display: block;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--charcoal);
      margin-bottom: 6px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .field-group .hint {
      font-size: 0.78rem;
      color: var(--charcoal-soft);
      margin-top: 4px;
    }
    .field-group input,
    .field-group select {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 0.95rem;
      background: var(--oatmeal);
      color: var(--charcoal);
      box-sizing: border-box;
      transition: border-color .15s;
    }
    .field-group input:focus,
    .field-group select:focus {
      outline: none;
      border-color: var(--forest);
      background: var(--white);
    }
    .field-prefix-wrap {
      position: relative;
    }
    .field-prefix-wrap span {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--charcoal-soft);
      font-weight: 600;
      pointer-events: none;
    }
    .field-prefix-wrap input { padding-left: 26px; }

    .radio-group {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 8px;
    }
    .radio-opt {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      cursor: pointer;
      font-size: 0.88rem;
      color: var(--charcoal);
      background: var(--oatmeal);
      transition: all .15s;
    }
    .radio-opt:hover { border-color: var(--gold); }
    .radio-opt input { display: none; }
    .radio-opt.selected {
      border-color: var(--forest);
      background: var(--white);
      color: var(--forest);
      font-weight: 600;
    }

    .doc-tip {
      background: var(--oatmeal-deep);
      border-left: 3px solid var(--gold);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 12px 16px;
      font-size: 0.82rem;
      color: var(--charcoal-soft);
      margin-bottom: 20px;
      line-height: 1.6;
    }
    .doc-tip strong { color: var(--charcoal); }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      font-size: 0.9rem;
      color: var(--charcoal);
    }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-switch {
      position: relative;
      width: 40px; height: 22px;
      flex-shrink: 0;
    }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-track {
      position: absolute;
      inset: 0;
      background: var(--oatmeal-deep);
      border-radius: 22px;
      border: 1.5px solid var(--line);
      cursor: pointer;
      transition: .2s;
    }
    .toggle-track::before {
      content: '';
      position: absolute;
      left: 3px; top: 2px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--charcoal-soft);
      transition: .2s;
    }
    .toggle-switch input:checked + .toggle-track {
      background: var(--forest);
      border-color: var(--forest);
    }
    .toggle-switch input:checked + .toggle-track::before {
      transform: translateX(18px);
      background: var(--white);
    }

    .nav-btns {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      flex-wrap: wrap;
    }
    .btn-calc-next {
      background: var(--forest);
      color: var(--oatmeal);
      border: none;
      padding: 12px 28px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background .15s;
    }
    .btn-calc-next:hover { background: var(--premium); }
    .btn-calc-back {
      background: transparent;
      color: var(--charcoal-soft);
      border: 1.5px solid var(--line);
      padding: 12px 20px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 0.9rem;
      cursor: pointer;
    }
    .btn-calc-back:hover { border-color: var(--charcoal-soft); color: var(--charcoal); }

    .hidden { display: none !important; }

    /* ─── Results Panel (sticky sidebar) ─── */
    .results-panel {
      position: sticky;
      top: 24px;
    }
    .result-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: 0 4px 16px rgba(15,23,42,0.06);
      margin-bottom: 16px;
    }
    .result-card h3 {
      font-family: var(--font-head);
      font-size: 1rem;
      color: var(--charcoal-soft);
      margin: 0 0 16px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.75rem;
    }

    .summary-big {
      font-family: var(--font-head);
      font-size: 2.4rem;
      font-weight: 600;
      color: var(--forest);
      line-height: 1;
      margin: 0 0 4px;
    }
    .summary-big.savings { color: #1a7f4f; }
    .summary-label {
      font-size: 0.8rem;
      color: var(--charcoal-soft);
      margin-bottom: 20px;
    }

    .result-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
      font-size: 0.88rem;
    }
    .result-row:last-of-type { border-bottom: none; }
    .result-row .rr-label { color: var(--charcoal-soft); }
    .result-row .rr-val { font-weight: 600; color: var(--charcoal); }
    .result-row .rr-val.green { color: #1a7f4f; }
    .result-row .rr-val.gold { color: var(--accent); }

    .bracket-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--oatmeal-deep);
      border-radius: 100px;
      padding: 4px 12px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--charcoal);
      margin-top: 8px;
    }
    .bracket-badge.dropped { background: #d1fae5; color: #065f46; }

    .placeholder-msg {
      text-align: center;
      padding: 32px 0;
      color: var(--charcoal-soft);
      font-size: 0.9rem;
    }
    .placeholder-msg .icon { font-size: 2rem; display: block; margin-bottom: 8px; }

    /* ─── Comparison Table ─── */
    .comparison-section {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 16px;
    }
    .comparison-section h3 {
      font-family: var(--font-head);
      font-size: 1.1rem;
      color: var(--forest);
      padding: 20px 24px 12px;
      margin: 0;
      border-bottom: 1px solid var(--line);
      background: var(--oatmeal-deep);
    }
    .comp-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
    }
    .comp-table th {
      background: var(--oatmeal);
      padding: 10px 14px;
      text-align: left;
      color: var(--charcoal-soft);
      font-weight: 600;
      font-size: 0.74rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      border-bottom: 1px solid var(--line);
    }
    .comp-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--charcoal);
    }
    .comp-table tr:last-child td { border-bottom: none; }
    .comp-table tr:hover td { background: var(--oatmeal); }
    .comp-table td.highlight { font-weight: 600; color: #1a7f4f; }
    .comp-table td.type-label { font-weight: 600; color: var(--forest); }
    .comp-table td.benefit-tag {
      font-size: 0.72rem;
      color: var(--charcoal-soft);
    }

    /* ─── State Insights ─── */
    .state-insight-box {
      background: var(--oatmeal-deep);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 16px;
      border: 1px solid var(--line);
    }
    .state-insight-box h4 {
      font-family: var(--font-head);
      font-size: 1rem;
      color: var(--forest);
      margin: 0 0 12px;
    }
    .state-insight-box p {
      font-size: 0.85rem;
      color: var(--charcoal);
      margin: 0 0 8px;
      line-height: 1.6;
    }
    .state-insight-box p:last-child { margin-bottom: 0; }

    /* ─── Pro Tips ─── */
    .pro-tips { margin-bottom: 16px; }
    .tip-item {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px 20px;
      margin-bottom: 10px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .tip-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--oatmeal-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .tip-body h4 {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--charcoal);
      margin: 0 0 4px;
    }
    .tip-body p {
      font-size: 0.8rem;
      color: var(--charcoal-soft);
      margin: 0;
      line-height: 1.6;
    }
    .tip-item.highlight-tip {
      border-color: var(--gold);
      background: #fdf8ee;
    }

    /* ─── AI Advisor ─── */
    .ai-advisor {
      background: var(--forest);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 16px;
      color: var(--oatmeal);
    }
    .ai-advisor h3 {
      font-family: var(--font-head);
      font-size: 1.1rem;
      color: var(--oatmeal);
      margin: 0 0 8px;
    }
    .ai-advisor .ai-sub {
      font-size: 0.8rem;
      color: rgba(247,242,234,0.65);
      margin: 0 0 16px;
    }
    .ai-response {
      font-size: 0.88rem;
      line-height: 1.7;
      color: rgba(247,242,234,0.9);
      min-height: 80px;
    }
    .ai-response.loading::after {
      content: '...';
      animation: blink 1s infinite;
    }
    @keyframes blink { 0%,100%{opacity:.3} 50%{opacity:1} }
    .ai-btn {
      background: var(--gold);
      color: var(--premium);
      border: none;
      padding: 10px 20px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.88rem;
      cursor: pointer;
      margin-top: 14px;
      transition: background .15s;
    }
    .ai-btn:hover { background: var(--accent); }
    .ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ─── Disclaimer ─── */
    .disclaimer {
      background: var(--oatmeal-deep);
      border: 1px solid var(--line);
      border-left: 4px solid var(--clay);
      border-radius: var(--radius);
      padding: 20px 24px;
      font-size: 0.8rem;
      color: var(--charcoal-soft);
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .disclaimer p {
      margin: 0 0 10px;
    }
    .disclaimer p:last-child { margin-bottom: 0; }

    /* ─── Hero banner ─── */
    .meta-badges {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .meta-badge {
      background: rgba(247,242,234,0.1);
      border: 1px solid rgba(247,242,234,0.2);
      border-radius: 100px;
      padding: 4px 14px;
      font-size: 0.78rem;
      color: rgba(247,242,234,0.8);
      font-weight: 500;
    }

    /* ─── Results Sections (full-width below form on mobile) ─── */
    .results-full-section {
      margin-top: 40px;
    }
    .results-full-section h2 {
      font-family: var(--font-head);
      font-size: 1.5rem;
      color: var(--forest);
      margin: 0 0 20px;
    }

    /* ─── Download / CTA ─── */
    .results-cta {
      background: var(--gold);
      border-radius: var(--radius);
      padding: 24px;
      text-align: center;
      margin-top: 24px;
    }
    .results-cta h3 {
      font-family: var(--font-head);
      color: var(--premium);
      margin: 0 0 8px;
      font-size: 1.2rem;
    }
    .results-cta p {
      font-size: 0.88rem;
      color: rgba(15,23,42,0.7);
      margin: 0 0 16px;
    }

    /* ─── Print ─── */
    @media print {
      nav, .calc-hero, .progress-bar, .form-step, .nav-btns, .ai-advisor,
      .calc-shell ~ footer { display: none !important; }
      .calc-grid { grid-template-columns: 1fr; }
      .results-panel { position: static; }
    }