/* =========================================================
   PTG SOLAR — LOAD CALCULATION / QUOTATION TOOL
   Page-specific styles, layered on top of styles.css.
   Reuses the site's design tokens (--ink, --amber, --paper,
   --line, --gradient-gold, --shadow-*, --font-*) so the tool
   reads as part of the same product, not a bolted-on widget.
========================================================= */

/* ---------- 0. Section rhythm override ---------- */
/* The base stylesheet gives every <section> 100px of vertical
   padding for the marketing pages. This tool is dense and
   functional, not a scroll-story, so each step manages its own
   spacing instead. */
.calc-step { padding: 0; }

/* ---------- 1. PAGE HERO ---------- */
.calc-hero {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-softer) 100%);
  color: var(--white);
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
}
.calc-hero::after {
  content: "";
  position: absolute;
  right: -80px; top: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,185,60,0.30), transparent 70%);
}
.calc-hero .container { position: relative; z-index: 1; }
.calc-hero h1 { color: var(--white); font-size: clamp(28px, 4vw, 38px); max-width: 640px; }
.calc-hero p.lede { color: #B8C1CA; max-width: 560px; margin-top: 12px; font-size: 15.5px; }

.calc-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
  max-width: 760px;
}
.calc-trust-item {
  border-left: 2px solid var(--gold-line);
  padding-left: 14px;
}
.calc-trust-item .num { font-family: var(--font-mono); color: var(--amber); font-size: 13px; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }
.calc-trust-item .desc { font-size: 13px; color: #B8C1CA; line-height: 1.45; }
@media (max-width: 720px) {
  .calc-trust-row { grid-template-columns: 1fr; }
}

/* ---------- 2. STEP TRACKER ---------- */
.step-tracker {
  position: sticky;
  top: 73px; /* sits just under the site header */
  z-index: 50;
  background: rgba(249,247,242,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.step-tracker-inner {
  display: flex;
  align-items: center;
  padding: 14px 0;
  gap: 6px;
  overflow-x: auto;
}
.step-node {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  opacity: 0.42;
  transition: opacity 0.25s var(--ease);
}
.step-node.active, .step-node.done { opacity: 1; }
.step-node .dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  background: var(--paper-dim);
  color: var(--slate);
  border: 1.5px solid var(--line);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.step-node.active .dot { background: var(--gradient-gold); border-color: transparent; color: var(--ink); }
.step-node.done .dot { background: var(--ink); border-color: var(--ink); color: var(--amber); }
.step-node .label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.step-connector { width: 22px; height: 1.5px; background: var(--line); flex-shrink: 0; margin: 0 2px; }
@media (max-width: 720px) {
  .step-node .label { display: none; }
  .step-connector { width: 14px; }
}

/* ---------- 3. SHELL / PANELS ---------- */
.calc-shell { padding: 40px 0 100px; }

.calc-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 36px;
  margin-top: 28px;
  position: relative;
}
.calc-panel::before {
  content: attr(data-step);
  position: absolute;
  top: -14px; left: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--gradient-gold);
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.calc-panel h2 { font-size: 20px; margin-top: 4px; }
.calc-panel .section-sub { color: var(--slate); font-size: 13.5px; margin: 4px 0 22px; }
@media (max-width: 640px) {
  .calc-panel { padding: 26px 20px; }
}

.meter-group-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--slate); margin: 26px 0 12px;
}
.meter-group-label:first-child { margin-top: 0; }

/* ---------- 4. FORM FIELDS ---------- */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { font-size: 13px; font-weight: 600; color: var(--ink); }

input[type=text], input[type=number], input[type=email], input[type=tel] {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14.5px;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 4px rgba(245,185,60,0.16);
}
.help-text { font-size: 12px; color: var(--slate-light); }
.error-text { font-size: 12.5px; color: #B24A2A; display: none; margin-top: 6px; font-weight: 600; }

.assumption-note {
  font-size: 12.5px;
  color: var(--slate);
  background: var(--paper-dim);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 16px;
  line-height: 1.6;
}

.advanced-toggle {
  background: none;
  border: none;
  color: var(--slate);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 6px 0;
  margin-top: 14px;
  font-family: var(--font-body);
}
.advanced-toggle:hover { color: var(--amber-dark); }

.field-link-toggle {
  background: none; border: none; color: var(--slate);
  font-size: 11.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; padding: 4px 0 0; margin: 0; font-family: var(--font-body); display: block;
}
.field-link-toggle:hover { color: var(--amber-dark); }

.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper-dim);
  color: var(--slate);
  font-size: 12px; font-weight: 700;
  font-family: var(--font-body);
  border: none; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.info-btn:hover { background: var(--amber-dark); color: var(--white); }

.rate-trigger {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  color: var(--amber-dark);
  font-weight: 700;
}
.rate-trigger:hover { color: var(--ink); }

/* ---------- 5. BUTTONS (tool-scoped) ---------- */
.calc-shell button:not(.advanced-toggle):not(.info-btn):not(.report-gate-close) {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), opacity .15s var(--ease);
}
.calc-shell button:active { transform: scale(0.98); }
.btn-primary { background: var(--gradient-gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,185,60,0.35); }
.btn-secondary { background: var(--paper-dim); color: var(--ink); border: 1.5px solid var(--line) !important; }
.btn-secondary:hover { border-color: var(--amber-dark) !important; color: var(--amber-dark); }
.btn-block { width: 100%; }

/* ---------- 6. APPLIANCE PANEL ---------- */
.appliance-panel {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-top: 22px;
  background: var(--paper-dim);
}
.appliance-panel h3 { font-size: 15px; }
.appliance-panel .section-sub { margin-bottom: 16px; }
.appliance-block { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.appliance-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.appliance-block-title { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.appliance-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; align-items: end; }
.appliance-row + .appliance-row { margin-top: 12px; }
.appliance-row .field { gap: 5px; }
.appliance-row label { font-size: 11.5px; color: var(--slate); font-weight: 600; }
.checkbox-row { display: flex; align-items: center; gap: 9px; height: 40px; }
.checkbox-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--amber-dark); }
.checkbox-row label { font-size: 13px; color: var(--ink); font-weight: 600; }
.night-subrow { background: var(--teal-soft-local); border-radius: var(--radius-sm); padding: 10px 12px; }
.night-subrow .checkbox-row label { color: var(--success); }

select {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
input[type=number].compact {
  border: 1.5px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  width: 92px;
}

/* Local, muted teal used only for the "used at night" callouts inside
   this tool — kept separate from the brand palette so it still reads
   as an informational tint rather than a second brand color. */
:root { --teal-soft-local: #E7F2EF; }

/* ---------- 7. RESULT METERS ---------- */
.meter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.meter {
  background: var(--ink);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.meter::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gradient-gold);
}
.meter.teal-accent::before { background: linear-gradient(180deg, #6FCBB8, var(--success)); }
.meter .meter-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #8A97A0; margin-bottom: 8px; }
.meter .meter-value { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--amber); text-shadow: 0 0 18px rgba(245,185,60,0.22); }
.meter.teal-accent .meter-value { color: #7FDCC8; text-shadow: 0 0 18px rgba(127,220,200,0.2); }
.meter .meter-unit { font-size: 13px; color: #B8C1CA; margin-left: 4px; }
.meter .meter-note { font-size: 11.5px; color: #B8C1CA; margin-top: 8px; line-height: 1.4; }
.breakdown-row .note { display: block; font-size: 11px; color: var(--slate-light); font-weight: 400; margin-top: 2px; }

.appliance-breakdown-list { margin-top: 22px; font-size: 12.5px; color: var(--slate); }
.appliance-breakdown-list strong { color: var(--ink); font-size: 13px; }
.appliance-breakdown-list .abl-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.abl-tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: var(--teal-soft-local); color: var(--success); margin-left: 6px; }

/* ---------- 8. PACKAGE CARDS ---------- */
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 18px; margin-top: 20px; }
.package-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  background: var(--white);
}
.package-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.package-card.selected { border-color: var(--amber-dark); box-shadow: 0 0 0 4px rgba(245,185,60,0.16); }
.package-card .brand-name { font-size: 18px; font-family: var(--font-display); font-weight: 600; }
.package-card .brand-tier {
  font-size: 12px; font-weight: 600; color: var(--success);
  background: var(--teal-soft-local); display: inline-block; padding: 4px 9px;
  border-radius: 6px; margin-top: 5px;
}
.package-note { font-size: 12px; color: #B24A2A; background: #F7E9E2; border-radius: 7px; padding: 8px 10px; display: none; }

.sub-field { display: flex; flex-direction: column; gap: 5px; }
.sub-field label { font-size: 12px; color: var(--slate); font-weight: 600; }
.panel-count-row { display: flex; align-items: center; gap: 9px; }
.diff-tag { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.diff-tag.pos { background: var(--teal-soft-local); color: var(--success); }
.diff-tag.neg { background: #F7E9E2; color: #B24A2A; }
.diff-tag.zero { background: var(--paper-dim); color: var(--slate); }

.breakdown { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.breakdown-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--slate); gap: 12px; }
.breakdown-row .val { font-family: var(--font-mono); text-align: right; }
.breakdown-row.total { font-weight: 700; color: var(--ink); font-size: 16.5px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }

/* ---------- Financial projection: chart + data table ---------- */
.chart-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 18px 10px;
  margin-top: 4px;
  height: 420px;
  position: relative;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 640px) { .chart-wrap { height: 320px; padding: 14px 12px 8px; } }
@media (max-width: 400px) { .chart-wrap { height: 260px; padding: 10px 8px 6px; } }
.chart-legend-note {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink); margin: 0 2px 12px; font-weight: 600;
}
.chart-legend-note span { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart-legend-line { width: 22px; height: 3px; border-radius: 2px; display: inline-block; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.projection-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.projection-table caption { display: none; }
.projection-table thead th {
  background: var(--ink); color: var(--white); text-align: right; font-weight: 600;
  padding: 10px 12px; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase;
  position: sticky; top: 0;
}
.projection-table thead th:first-child, .projection-table tbody td:first-child { text-align: left; }
.projection-table tbody td { padding: 8px 12px; text-align: right; font-family: var(--font-mono); border-top: 1px solid var(--line); }
.projection-table tbody tr:nth-child(even) { background: var(--paper-dim); }
.projection-table tbody tr.payback-row { background: rgba(245,185,60,0.22); font-weight: 700; }
.projection-table td.neg { color: #B3261E; }
.projection-table td.pos { color: #1E7A3D; }

.util-block { margin-top: 6px; }
.util-label-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate); margin-bottom: 4px; }
.util-bar-track { background: var(--paper-dim); border-radius: 6px; height: 7px; overflow: hidden; }
.util-bar-fill { height: 100%; background: var(--success); border-radius: 6px; transition: width 0.4s var(--ease); }
.util-bar-fill.low { background: #B24A2A; }
.shortfall-note { font-size: 12px; color: #B24A2A; background: #F7E9E2; border-radius: 7px; padding: 9px 11px; margin-top: 8px; display: none; line-height: 1.5; }
.surplus-note { font-size: 12px; color: var(--success); background: var(--teal-soft-local); border-radius: 7px; padding: 9px 11px; margin-top: 8px; line-height: 1.5; }

/* Opt-in "lower-cost alternative" suggestion — Step 3 package card only.
   Amber-toned to match the site's existing highlight/discount treatment
   (see .discount-row), but visually distinct from the red shortfall note
   above: this isn't a warning, it's a suggestion the customer can accept
   or ignore. */
.value-alt-note {
  font-size: 12px; color: var(--ink); background: rgba(245,185,60,0.10);
  border: 1px solid rgba(245,185,60,0.35); border-radius: 7px;
  padding: 10px 12px; margin-top: 8px; line-height: 1.5;
}
.value-alt-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--amber-dark); margin-bottom: 4px;
}
.value-alt-body { color: var(--slate); }
.value-alt-btn {
  display: inline-block; margin-top: 7px; background: none; border: none; padding: 0;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--amber-dark);
  text-decoration: underline; cursor: pointer;
}
.value-alt-btn:hover { color: var(--ink); }

/* Revert-to-recommended note — neutral/slate, distinct from both the
   red shortfall warning and the amber value-alternative suggestion,
   since this is just informational (you've changed something) rather
   than a warning or an upsell. */
.revert-note {
  font-size: 12px; color: var(--slate); background: var(--paper-dim);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 11px; margin-top: 8px; line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between;
}
.revert-note .value-alt-btn { margin-top: 0; white-space: nowrap; }

/* ---------- 9. FINAL QUOTE ---------- */
#quoteSection { display: none; }
.quote-header {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;
  border-bottom: 2px dashed var(--line); padding-bottom: 18px; margin-bottom: 18px;
}
.quote-header .cust-name { font-size: 21px; font-family: var(--font-display); font-weight: 600; }
.quote-header .cust-loc { color: var(--slate); font-size: 13.5px; margin-top: 2px; }
.quote-tag { font-family: var(--font-mono); font-size: 12px; color: var(--slate-light); text-align: right; }
.quote-brand-footer { font-size: 12px; color: var(--slate-light); margin-top: 6px; }

.savings-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--teal-soft-local); color: var(--success); font-weight: 700; font-size: 14px;
  border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 8px;
}
.savings-row .val { font-family: var(--font-mono); }

.discount-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(245,185,60,0.14); color: var(--amber-dark); font-weight: 700; font-size: 14px;
  border: 1px solid rgba(245,185,60,0.4); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 6px;
}
.discount-row .val { font-family: var(--font-mono); }

.final-total-box {
  background: var(--ink); color: var(--white); border-radius: var(--radius-md);
  padding: 22px 24px; display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; box-shadow: var(--shadow-lg);
}
.final-total-box .label { font-size: 12.5px; color: #B8C1CA; text-transform: uppercase; letter-spacing: 0.08em; }
.final-total-box .amount { font-family: var(--font-mono); font-size: 32px; color: var(--amber); font-weight: 600; }
@media (max-width: 480px) {
  .final-total-box { flex-direction: column; align-items: flex-start; gap: 8px; }
  .final-total-box .amount { font-size: 26px; }
}

.quote-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hidden { display: none !important; }

@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* ---------- 10. MOBILE TUNING ---------- */
@media (max-width: 720px) {
  /* iOS Safari auto-zooms the page when a focused input/select has a
     font-size under 16px. All form fields in this tool are set below
     that on desktop for density, so bump them back up to 16px here
     to stop that zoom-on-tap behavior. */
  input[type=text], input[type=number], input[type=email], input[type=tel], select, input[type=number].compact {
    font-size: 16px;
  }

  /* Bigger checkbox + label tap area */
  .checkbox-row { min-height: 44px; }
  .checkbox-row input[type=checkbox] { width: 19px; height: 19px; }
  .checkbox-row label { padding: 8px 0; }

  .calc-hero { padding: 48px 0 36px; }
  .calc-panel { margin-top: 20px; }
  /* Matches the site header's mobile height (44px tap-target nav
     toggle now sets the row height, +padding/borders) so this bar
     sticks flush under the header instead of gapping or overlapping. */
  .step-tracker { top: 76px; }

  /* Hint that the data table scrolls horizontally, since that's not
     obvious on a touch device without a visible scrollbar. */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: "Swipe to see more →";
    display: block;
    font-size: 11px;
    color: var(--slate-light);
    text-align: right;
    padding: 4px 10px 0;
  }

  /* Result meters — scoped to the "Estimated Load & Sizing" panel
     only (#resultsSection). On desktop these sit 3-up as compact
     stat cards; the default auto-fit grid can only fit one per row
     on a phone (minmax(200px,1fr) doesn't fit twice under ~400px),
     which is why they were rendering as oversized full-width blocks
     here. Force a 2-up grid and shrink the card to match — same
     card language (dark tile, accent bar, mono value), just sized
     for a small screen instead of stretched to fill it. Other meter
     grids on the site (quote totals, breaker/protection results,
     financial projection) are intentionally left at their original
     single-column mobile sizing. */
  #resultsSection .meter-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #resultsSection .meter { padding: 13px 14px; }
  #resultsSection .meter .meter-label { font-size: 10px; letter-spacing: 0.05em; margin-bottom: 6px; }
  #resultsSection .meter .meter-value { font-size: 19px; }
  #resultsSection .meter .meter-unit { font-size: 11px; margin-left: 3px; }
  #resultsSection .meter .meter-note { font-size: 10.5px; margin-top: 6px; }

  /* Appliance breakdown list sits inside this same panel — same
     scoping, same reasoning as above. */
  #resultsSection .appliance-breakdown-list .abl-row { flex-wrap: wrap; row-gap: 3px; }

  /* Investment Ratios (Step 5) — same 2-up treatment as the Step 2
     result meters above, extended here for the same reason: 7 cards
     full-width-stacked on a phone made this the single longest scroll
     in the whole tool. Scoped to #investmentRatios only — the on-screen
     live version; the PDF-only #proposalRatios is never viewed on a
     phone screen, so it's untouched. */
  #investmentRatios .meter-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #investmentRatios .meter { padding: 13px 14px; }
  #investmentRatios .meter .meter-label { font-size: 10px; letter-spacing: 0.05em; margin-bottom: 6px; }
  #investmentRatios .meter .meter-value { font-size: 19px; }
  #investmentRatios .meter .meter-unit { font-size: 11px; margin-left: 3px; }
  #investmentRatios .meter .meter-note { font-size: 10.5px; margin-top: 6px; }

  /* "Note" toggle buttons (?) — 24px on desktop is fine for a mouse
     pointer, but well under the ~44px minimum touch target size for a
     finger. Bumped up for mobile only; desktop keeps the smaller,
     denser look. */
  .info-btn { width: 44px; height: 44px; font-size: 15px; }

  /* "Use this instead" / "Revert to recommended" — these are real
     actionable buttons (they change the customer's selection), but
     were styled as plain underlined text with zero padding, giving
     them almost no tappable area on a touchscreen. Gives them a proper
     44px-tall tap target without changing how they look on desktop. */
  .value-alt-btn {
    min-height: 44px; padding: 10px 2px; display: inline-flex; align-items: center;
  }

  /* Inverter/battery dropdown rows pair a long-label <select> with a
     compact quantity <select> side by side with no wrapping allowed —
     a long inverter label ("12 kW — ₱83,000") could push the row wider
     than a narrow phone's viewport. Letting it wrap instead of
     overflowing keeps both selects fully visible and tappable. */
  .panel-count-row { flex-wrap: wrap; }
  .panel-count-row > select:first-child { min-width: 160px; }
}

@media (max-width: 480px) {
  .calc-panel { padding: 22px 16px; }
  .calc-panel::before { left: 20px; }
  .appliance-panel { padding: 16px 16px; }
  .final-total-box { padding: 18px 18px; }
}

/* ---------- 11. REPORT GATE MODAL (lead capture before the PDF) ---------- */
.report-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(6,15,28,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: reportGateFadeIn 0.2s var(--ease);
}
@keyframes reportGateFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reportGateScaleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.report-gate-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  max-width: 420px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
  animation: reportGateScaleIn 0.28s var(--ease);
}
.report-gate-box h3 { margin: 0 30px 10px 0; font-size: 20px; }

/* Close button — must opt out of the generic .calc-shell button rule
   (see BUTTONS section above) the same way .info-btn does, otherwise
   that rule's padding/border-radius/font-size flattens this into a
   rounded rectangle instead of a clean circle. */
.report-gate-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: none;
  background: var(--paper-dim);
  color: var(--slate);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.2s var(--ease);
}
.report-gate-close svg { width: 15px; height: 15px; display: block; }
.report-gate-close:hover { background: var(--amber-dark); color: var(--white); transform: rotate(90deg); }
.report-gate-close:focus-visible { outline: 2px solid var(--amber-dark); outline-offset: 2px; }

.report-gate-box .field { margin-bottom: 14px; }
.report-gate-box .field:last-of-type { margin-bottom: 6px; }

.report-gate-box button[type=submit] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.report-gate-box button[type=submit][disabled] { opacity: 0.7; cursor: default; transform: none !important; }
.report-gate-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(6,15,28,0.25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: reportGateSpin 0.6s linear infinite;
}
@keyframes reportGateSpin { to { transform: rotate(360deg); } }

.report-gate-chat-links {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.report-gate-chat-links > .help-text { margin-bottom: 12px; }
.report-gate-chat-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.report-gate-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease);
}
.report-gate-chat-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.report-gate-chat-btn:hover { transform: translateY(-1px); }
.report-gate-chat-btn.messenger:hover { border-color: #0084FF; background: rgba(0,132,255,0.07); }
.report-gate-chat-btn.viber:hover { border-color: #7360F2; background: rgba(115,96,242,0.07); }

@media (max-width: 480px) {
  .report-gate-box { padding: 30px 22px 26px; }
  .report-gate-chat-row { flex-direction: column; }
}

/* ---------- 12. GATED CONTENT (Step 3 fully hidden until the report
   gate is submitted; Steps 4-5's pricing/results stay blurred rather
   than hidden — see the 2026-07-24 note below on why Step 3 is
   different from the other two) ---------- */
.gate-unlock-banner {
  display: none;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(245,185,60,0.14), rgba(245,185,60,0.05));
  border: 1.5px solid var(--amber);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 18px 0 24px;
  flex-wrap: wrap;
}
.gate-locked .gate-unlock-banner { display: flex; }
.gate-unlock-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-unlock-icon svg { width: 19px; height: 19px; }
.gate-unlock-copy { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.gate-unlock-copy strong { font-size: 14.5px; color: var(--ink); }
.gate-unlock-copy span { font-size: 13px; color: var(--slate); }

/* Step 3 (2026-07-24): rather than blurring the package grid behind
   the banner like Steps 4-5 do, the grid is hidden outright and the
   banner becomes the section's only content — since Steps 4 and 5 can
   only ever be reached by first clicking through Step 3's own package
   cards, gating entry to Step 3 itself already gates the whole rest of
   the funnel behind one single unlock, so there's nothing left to see
   at all until that happens. Sized up and centered here specifically
   (not globally on .gate-unlock-banner, which would needlessly bloat
   Steps 4-5's smaller strip-above-blurred-content treatment) since
   it's carrying the full visual weight of the step on its own. */
#packagesSection.gate-locked #packageGrid { display: none; }
#packagesSection .gate-unlock-banner {
  flex-direction: column;
  text-align: center;
  padding: 40px 32px;
  margin: 28px 0;
}
#packagesSection .gate-unlock-icon { width: 56px; height: 56px; }
#packagesSection .gate-unlock-icon svg { width: 26px; height: 26px; }
#packagesSection .gate-unlock-copy { align-items: center; }
#packagesSection .gate-unlock-copy strong { font-size: 17px; }
#packagesSection .gate-unlock-copy span { font-size: 14px; max-width: 380px; }
#packagesSection .gate-unlock-banner .btn { margin-top: 6px; }

/* The blur targets themselves for Steps 4-5 — scoped per section so
   the fix only ever touches the pricing/results block, never the
   inverter/panel/battery configurator controls that sit above it
   (those must stay interactive regardless of lock state). */
#quoteSection.gate-locked #quoteBody,
#quoteSection.gate-locked .final-total-box .amount,
#quoteSection.gate-locked #protectionDetailBlur,
#projectionSection.gate-locked #paybackDetailBlur,
#projectionSection.gate-locked #investmentRatios,
#projectionSection.gate-locked #netPositionTableWrap,
#breakerResultsSection.gate-locked #breakerDetailBlur {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .gate-unlock-banner { padding: 16px; gap: 12px; }
  .gate-unlock-banner .btn { width: 100%; }
  /* Overrides #packagesSection's own higher-specificity desktop
     padding above (ID + class beats a bare class, so without this the
     40px/32px desktop padding would otherwise win on mobile too). */
  #packagesSection .gate-unlock-banner { padding: 28px 20px; }
}