/* ========================================================================
   BHS — Interactive Tools Styling
   ======================================================================== */

/* ===== Hero flow ===== */
.hero-flow-svg { width: 100%; max-width: 600px; height: auto; }
.flow-caption { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: 8px; text-align: center; }
.sun-group .rays { transform-origin: center; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Live counter ===== */
.live-counter {
  display: inline-flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 14px 22px; border-radius: 999px;
}
.pulse-dot {
  width: 10px; height: 10px; background: #16a34a; border-radius: 50%;
  position: relative; box-shadow: 0 0 0 4px rgba(22, 163, 74, .25);
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: #16a34a; opacity: .5;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity:.5 } 70% { transform: scale(2); opacity:0 } 100% { opacity:0 } }
.live-num {
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700;
  color: white; line-height: 1;
}
.live-num.bump { animation: bump .8s ease; }
@keyframes bump { 0%,100%{transform:scale(1)} 30%{transform:scale(1.18);color:var(--accent)} }
.live-label { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: 2px; }

/* ===== Tool disclaimer ===== */
.tool-disclaimer {
  font-size: .75rem; color: var(--muted-soft);
  margin-top: 16px; line-height: 1.5;
  padding: 10px 14px; background: var(--bg-soft);
  border-left: 2px solid var(--line); border-radius: 4px;
}

/* ===== Rooftop view ===== */
.rooftop-tool { background: white; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rooftop-input-row { display: flex; gap: 10px; margin: 10px 0 16px; }
.rooftop-input-row input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; }
.rooftop-input-row input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.rooftop-map { aspect-ratio: 16/9; background: var(--bg-tinted); border-radius: var(--radius); overflow: hidden; position: relative; }
.rooftop-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.rooftop-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted-soft); gap: 8px; text-align: center; padding: 24px; }
.rooftop-placeholder svg { opacity: .3; }
.form-field-label { display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:6px; }

#rt-analysis {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.rt-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.rt-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--primary); text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 4px;
}
.rt-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.rt-badge {
  background: rgba(22, 163, 74, .12); color: var(--ok);
  padding: 6px 12px; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.rt-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
}
.rt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 780px) { .rt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rt-grid { grid-template-columns: 1fr; } }
.rt-metric {
  background: linear-gradient(180deg, var(--bg-tinted), white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.rt-metric-label {
  font-size: .72rem; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.rt-metric-val {
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700;
  color: var(--ink); line-height: 1.1;
}
.rt-metric-val.accent { color: var(--primary); }
.rt-metric-sub { font-size: .78rem; color: var(--muted-soft); margin-top: 4px; }

.rt-refine {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px;
}
.rt-refine-row {
  display: grid; grid-template-columns: 1fr 140px auto; gap: 10px; align-items: end;
}
@media (max-width: 600px) {
  .rt-refine-row { grid-template-columns: 1fr; }
}
.rt-refine label {
  display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 6px;
  grid-column: 1 / -1;
}
.rt-refine input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; background: white;
}
.rt-refine input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

.rt-cta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}

/* Sun exposure block */
.rt-sun {
  background: linear-gradient(135deg, #fff6e0, #fffaee);
  border: 1px solid rgba(250, 175, 59, .4);
  border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 20px;
}
.rt-sun-header {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent-dark); font-weight: 700; font-size: .95rem;
  margin-bottom: 14px;
}
.rt-sun-header svg { color: var(--accent-dark); }
.rt-sun-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 780px) { .rt-sun-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rt-sun-grid { grid-template-columns: 1fr 1fr; } }
.rt-sun-cell {
  background: white; border: 1px solid rgba(250, 175, 59, .25);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.rt-sun-label {
  font-size: .7rem; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.rt-sun-val {
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--ink);
  line-height: 1.1;
}
.rt-sun-sub { font-size: .72rem; color: var(--muted-soft); margin-top: 2px; }
.r-stars { color: var(--accent); letter-spacing: 1px; font-size: .85rem; }
.r-stars-off { color: var(--line); }

/* ===== Savings calculator ===== */
.calc-card {
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px;
}
.calc-go { width: 100%; margin-top: 8px; }
.calc-results { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.calc-results h4 { color: var(--ink); margin-bottom: 16px; }
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 700px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-cell {
  background: var(--bg-soft); padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.calc-cell-label { font-size: .75rem; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.calc-cell-val { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.calc-cell-val.accent { color: var(--primary); }

/* ===== Quiz ===== */
.quiz { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.quiz-progress { height: 4px; background: var(--line); border-radius: 999px; margin-bottom: 28px; overflow: hidden; }
.quiz-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); transition: width .35s; }
.quiz-step h4, .quiz-result h4 { color: var(--ink); margin-bottom: 18px; font-size: 1.15rem; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .quiz-opts { grid-template-columns: 1fr; } }
.quiz-opts button {
  position: relative;
  background: white; border: 1px solid var(--line); padding: 16px 18px 16px 46px;
  text-align: left; border-radius: var(--radius); cursor: pointer;
  font-size: .95rem; font-weight: 500; color: var(--ink);
  font-family: inherit; transition: all .15s;
}
.quiz-opts button::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); background: transparent; transition: all .15s;
}
.quiz-opts button:hover { border-color: var(--primary); background: var(--bg-tinted); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.quiz-opts button:hover::before { border-color: var(--accent); box-shadow: inset 0 0 0 3.5px white, inset 0 0 0 12px var(--accent); }
html.dark .quiz-opts button::before { border-color: var(--line); }
html.dark .quiz-opts button:hover::before { box-shadow: inset 0 0 0 3.5px var(--bg-soft), inset 0 0 0 12px var(--accent); }
.quiz-opts button:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.quiz-result-box {
  background: linear-gradient(135deg, var(--bg-tinted), white);
  border: 1px solid var(--line); padding: 24px; border-radius: var(--radius);
  margin-bottom: 16px;
}
.qres-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qres-row:last-of-type { border-bottom: 0; }
.qres-label { color: var(--muted); font-size: .9rem; }
.qres-val { font-weight: 700; color: var(--ink); font-family: var(--font-mono); }
.qres-val.accent { color: var(--primary); }
.qres-note { margin-top: 16px; padding: 14px; background: rgba(250,175,59,.12); border-left: 3px solid var(--accent); border-radius: 4px; font-size: .9rem; color: var(--ink-soft); }

/* ===== BTU ===== */
.btu-tool { background: white; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.btu-tool .btn { width: 100%; }
.btu-result { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.btu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 700px) { .btu-grid { grid-template-columns: 1fr; } }
.btu-cell { background: var(--bg-soft); padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* ===== Coverage map ===== */
#bhs-map {
  width: 100%; height: 480px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
@media (max-width: 700px) { #bhs-map { height: 360px; } }
.leaflet-popup-content-wrapper { border-radius: 12px !important; font-family: var(--font-sans); box-shadow: 0 8px 24px rgba(0,0,0,.2) !important; }
.leaflet-popup-content { margin: 14px 16px !important; min-width: 180px; }

/* Branded BHS pins (teardrops) */
.bhs-pin { background: transparent !important; border: 0 !important; }
.bhs-pin-wrap {
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transition: transform .15s;
}
.bhs-pin-wrap:hover { transform: translateY(-2px) scale(1.05); z-index: 1000; }
.bhs-pin-wrap svg { display: block; width: 100%; height: 100%; }
.bhs-pin-num {
  position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-weight: 700; font-size: .82rem;
  color: var(--ink); line-height: 1;
}
.bhs-pin-hq {
  position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-weight: 800; font-size: .7rem;
  color: white; line-height: 1; letter-spacing: .05em;
}

/* Popup styling */
.bhs-pop-city { font-weight: 700; color: var(--ink); font-size: 1.05rem; margin-bottom: 8px; }
.bhs-pop-stat { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: .92rem; color: var(--ink-soft); }
.bhs-pop-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.bhs-pop-total strong { color: var(--ink); font-family: var(--font-mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-solar { background: var(--primary); }
.dot-hvac { background: var(--accent); }

/* Legend */
.bhs-legend {
  background: white; padding: 14px 16px; border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12); font-family: var(--font-sans);
  line-height: 1.5; font-size: .82rem; color: var(--ink-soft);
  min-width: 200px;
}
.bhs-legend-title {
  font-weight: 700; color: var(--ink); margin-bottom: 8px;
  font-size: .85rem;
}
.bhs-legend-stat { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.bhs-legend-stat strong { font-family: var(--font-mono); }
.bhs-legend-total {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--ink);
}
.bhs-legend-total strong { font-family: var(--font-mono); color: var(--primary); font-size: 1.1rem; }
.bhs-legend-src {
  font-size: .68rem; color: var(--muted-soft);
  margin-top: 8px; font-family: var(--font-mono);
}

/* ===== Before / After ===== */
.ba { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; background: #0a1628; }
.ba-before, .ba-after {
  position: absolute; inset: 0;
}
.ba-before img, .ba-after img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: absolute; inset: 0;
}
.ba-before {
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
  transition: clip-path .05s linear, -webkit-clip-path .05s linear;
}
@media (max-width: 900px) { .ba { aspect-ratio: 4/3; } }
.ba-handle {
  position: absolute; top: 0; bottom: 0; transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle-bar { position: absolute; top: 0; bottom: 0; width: 3px; background: white; box-shadow: 0 0 12px rgba(0,0,0,.5); }
.ba-handle-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.4);
  font-weight: 700;
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: ew-resize; opacity: 0;
}
.ba-label {
  position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  background: rgba(0,0,0,.6); color: white; backdrop-filter: blur(6px);
}
.ba-label-before { left: 16px; }
.ba-label-after { right: 16px; }

/* ===== Trusted Brands (American-made) ===== */
.brands-banner {
  background: linear-gradient(135deg, #fff 0%, #fff6e0 100%);
  border: 1px solid rgba(178, 34, 52, .25);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex; gap: 22px; align-items: center;
  margin-bottom: 24px;
}
html.dark .brands-banner { background: linear-gradient(135deg, var(--bg-soft), var(--bg-tinted)); border-color: rgba(250, 175, 59, .25); }
@media (max-width: 700px) { .brands-banner { flex-direction: column; text-align: center; gap: 16px; } }
.brands-flag {
  flex-shrink: 0; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-radius: 4px; overflow: hidden;
}
.brands-banner h3 { color: var(--ink); margin-bottom: 6px; font-size: 1.2rem; }
.brands-banner p { color: var(--muted); margin: 0; font-size: .92rem; }
.brands-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px) { .brands-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .brands-grid { grid-template-columns: 1fr; } }
.brand-card {
  background: white; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; transition: all .2s; position: relative;
}
.brand-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.brand-logo {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(27, 98, 174, .25);
}
.brand-name { font-weight: 700; color: var(--ink); font-size: 1.1rem; margin-bottom: 4px; }
.brand-tag { font-size: .9rem; color: var(--muted); margin-bottom: 14px; }
.brand-made {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; color: var(--ok);
  padding: 5px 10px; background: rgba(22, 163, 74, .1);
  border-radius: 999px; line-height: 1.2;
}
.brand-made svg { color: var(--ok); flex-shrink: 0; }

/* ===== Consumer rights disclosure ===== */
.rights {
  background: var(--bg-tinted); border-left: 4px solid var(--primary);
  padding: 24px 28px; border-radius: var(--radius);
}
.rights h3 { color: var(--ink); margin-bottom: 12px; font-size: 1.05rem; }
.rights ul { color: var(--muted); padding-left: 20px; margin: 0; font-size: .9rem; }
.rights li { margin-bottom: 8px; }

/* ===== Cookie banner ===== */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  max-width: 760px; margin: 0 auto;
  background: var(--ink); color: white; padding: 14px 18px;
  border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.3);
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  z-index: 60; font-size: .9rem;
  animation: slideUp .4s ease;
}
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cookie-banner p { margin: 0; color: rgba(255,255,255,.85); flex: 1; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner .btn-ghost { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); border-width: 1px; border-style: solid; }
.cookie-banner .btn-ghost:hover { color: white; background: rgba(255,255,255,.05); }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-actions { justify-content: flex-end; }
}

/* ===== Sticky mobile CTA ===== */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid var(--line);
  padding: 10px 14px; display: flex; gap: 10px;
  z-index: 55;
  box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
.mobile-cta a {
  flex: 1; padding: 14px 16px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: .95rem;
}
.mobile-cta .mc-call { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); }
.mobile-cta .mc-quote { background: var(--accent); color: var(--ink); }
.mobile-cta svg { width: 18px; height: 18px; }
@media (min-width: 721px) { .mobile-cta { display: none; } }
body { padding-bottom: 76px; }
@media (min-width: 721px) { body { padding-bottom: 0; } }

/* ===== Chat launcher ===== */
.chat-launcher {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: white;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(27,98,174,.4);
  z-index: 50; transition: all .2s;
}
.chat-launcher:hover { transform: scale(1.05); background: var(--primary-dark); }
.chat-launcher svg { width: 24px; height: 24px; }
.chat-pulse {
  position: absolute; inset: -4px; border-radius: 50%; background: var(--primary);
  opacity: .4; animation: chatPulse 2s infinite;
}
@keyframes chatPulse { 0% { transform: scale(1); opacity: .4; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 720px) {
  .chat-launcher { bottom: 88px; right: 16px; }
}

/* ===== Hero flow container layout ===== */
.hero-flow-wrap {
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: 24px;
  backdrop-filter: blur(6px);
}

/* New richer flow animation */
.flow-wrap { color: white; }
.flow-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}
.flow-tab {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 14px 18px;
  color: rgba(255,255,255,.75); text-align: left; cursor: pointer;
  display: flex; gap: 10px; align-items: center; min-width: 0;
  font-family: inherit; transition: all .15s;
}
.flow-tab span, .flow-tab small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flow-tab small {
  display: block; font-size: .72rem; color: rgba(255,255,255,.5);
  font-weight: 500; margin-top: 2px;
}
.flow-tab span {
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  display: block;
}
.flow-tab svg { color: rgba(255,255,255,.6); flex-shrink: 0; }
.flow-tab:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: white; }
.flow-tab.active {
  background: linear-gradient(135deg, rgba(250,175,59,.18), rgba(27,98,174,.18));
  border-color: var(--accent); color: white;
}
.flow-tab.active svg { color: var(--accent); }
.flow-tab.active small { color: var(--accent); }

.flow-main {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .flow-main { grid-template-columns: 1fr; }
}
.flow-scene-wrap {
  background: linear-gradient(180deg, #0a1628 0%, #040b18 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.06);
  padding: 16px; overflow: hidden;
}
.flow-scene-svg { width: 100%; height: auto; display: block; }

.flow-readout {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column;
}
.flow-readout-eyebrow {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.6);
  font-family: var(--font-mono); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 18px;
}
.live-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.25);
  animation: livePulse 1.4s infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.flow-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.flow-row-label { color: rgba(255,255,255,.7); font-size: .9rem; }
.flow-row-val {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem;
  color: white;
}
.flow-row-val.accent { color: var(--accent); }
.flow-row-val.ok { color: #4ade80; }
.flow-row-total {
  border-bottom: 0; margin-top: 8px;
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,.15);
}
.flow-row-total .flow-row-val { font-size: 1.5rem; }
.flow-mode-desc {
  margin-top: 18px; color: rgba(255,255,255,.65); font-size: .85rem; line-height: 1.55;
}

/* ============================================
   AI Chatbot panel
   ============================================ */
.chat-launcher.hidden { display: none; }
.chat-panel {
  position: fixed; bottom: 24px; right: 24px;
  width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 96px);
  background: white; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05);
  display: none; flex-direction: column; overflow: hidden;
  z-index: 60;
  animation: chatSlide .25s ease-out;
}
@keyframes chatSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.chat-panel.open { display: flex; }
@media (max-width: 720px) {
  .chat-panel { bottom: 76px; right: 8px; left: 8px; width: auto; }
}
.chat-head {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.chat-head-id { display: flex; align-items: center; gap: 10px; }
.chat-avatar {
  width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--ink);
  font-weight: 800; font-size: .82rem; display: flex; align-items: center; justify-content: center;
}
.chat-name { font-weight: 700; font-size: .95rem; line-height: 1; }
.chat-sub { font-size: .72rem; opacity: .85; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.chat-sub .live-pulse { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(22,163,74,.25); }
.chat-close {
  background: rgba(255,255,255,.15); border: 0; color: white;
  width: 30px; height: 30px; border-radius: 50%; font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-close:hover { background: rgba(255,255,255,.25); }
.chat-thread {
  flex: 1; overflow-y: auto; padding: 18px;
  background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.chat-msg {
  padding: 10px 14px; border-radius: 14px; max-width: 85%;
  font-size: .92rem; line-height: 1.4;
}
.chat-msg-bot { background: white; color: var(--ink-soft); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.chat-msg-user { background: var(--primary); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
/* Respuesta HUMANA desde BHSOps — se distingue del bot con acento ámbar */
.chat-msg-agent {
  background: white; color: var(--ink-soft); align-self: flex-start;
  border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--accent);
}
.chat-agent-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 3px;
}
html.dark .chat-msg-agent { background: var(--bg-tinted); color: var(--ink); box-shadow: none; border: 1px solid var(--line); border-left: 3px solid var(--accent); }
html.dark .chat-agent-tag { color: var(--accent); }
.chat-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft);
  animation: typing 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,100%{transform: translateY(0); opacity:.4} 50%{transform: translateY(-4px); opacity:1} }
.chat-quick {
  display: flex; gap: 6px; padding: 10px 12px; flex-wrap: wrap;
  background: white; border-top: 1px solid var(--line);
}
.chat-quick button {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: .78rem; font-family: inherit; cursor: pointer;
  color: var(--ink-soft);
}
.chat-quick button:hover { background: var(--primary); color: white; border-color: var(--primary); }
.chat-input {
  display: flex; gap: 8px; padding: 12px 14px;
  background: white; border-top: 1px solid var(--line);
}
.chat-input input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .92rem; font-family: inherit;
}
.chat-input input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.chat-input button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--primary); color: white;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-input button:hover { background: var(--primary-dark); }
.chat-input svg { width: 18px; height: 18px; }
.chat-footer { font-size: .68rem; color: var(--muted-soft); text-align: center; padding: 6px; background: white; border-top: 1px solid var(--line-soft); }
/* Dark mode: the chat is global (every page). White bands + a white bot bubble with
   var(--ink-soft) text (which inverts to light in dark) were illegible. Map to surfaces. */
html.dark .chat-panel { background: var(--bg-soft); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
html.dark .chat-msg-bot { background: var(--bg-tinted); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
html.dark .chat-quick { background: var(--bg-soft); border-top-color: var(--line); }
html.dark .chat-input { background: var(--bg-soft); border-top-color: var(--line); }
html.dark .chat-input input { background: var(--bg); color: var(--ink); }
html.dark .chat-footer { background: var(--bg-soft); border-top-color: var(--line-soft); }
/* Other global white surfaces missed in dark: sticky mobile CTA frame + map legend. */
html.dark .mobile-cta { background: var(--bg-soft); border-top-color: var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.4); }
html.dark .bhs-legend { background: var(--bg-soft); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* ============================================
   WhatsApp launcher
   ============================================ */
.wa-launcher {
  position: fixed; bottom: 92px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .4);
  z-index: 49; transition: all .2s;
}
.wa-launcher:hover { transform: scale(1.05); background: #1ebe57; color: white; }
.wa-launcher svg { width: 28px; height: 28px; }
@media (max-width: 720px) {
  .wa-launcher { bottom: 156px; right: 16px; }
}

/* ============================================
   ZIP / Service Area Checker
   ============================================ */
.zip-card {
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; max-width: 640px; margin: 0 auto;
}
.zip-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.zip-head svg { color: var(--primary); flex-shrink: 0; }
.zip-head h3 { margin: 0 0 4px; color: var(--ink); font-size: 1.15rem; }
.zip-head p { margin: 0; font-size: .9rem; color: var(--muted); }
.zip-form { display: flex; gap: 10px; }
.zip-form input {
  flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1.1rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: .1em;
}
.zip-form input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.zip-result {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 16px 18px; border-radius: var(--radius);
}
.zip-result svg { flex-shrink: 0; margin-top: 2px; }
.zip-result strong { display: block; margin-bottom: 4px; color: var(--ink); }
.zip-result p { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.zip-result-ok { background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .3); }
.zip-result-ok svg { color: var(--ok); }
.zip-result-warn { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); }
.zip-result-warn svg { color: var(--warn); }

/* ============================================
   Bill Upload
   ============================================ */
.bill-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.bill-head { margin-bottom: 22px; }
.bill-head h3 { color: var(--ink); margin-bottom: 8px; }
.bill-head p { color: var(--muted); margin: 0; font-size: .92rem; }
.bill-drop {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 36px 24px; text-align: center; cursor: pointer;
  background: var(--bg-soft); transition: all .2s;
}
.bill-drop:hover, .bill-drop.drag { border-color: var(--primary); background: var(--bg-tinted); }
.bill-drop svg { color: var(--muted-soft); margin: 0 auto 10px; }
.bill-drop p { margin: 4px 0; color: var(--ink-soft); font-size: .95rem; }
.bill-drop .small { color: var(--muted-soft); font-size: .82rem; }
.bill-drop.processing { background: var(--bg-tinted); border-color: var(--primary); }
.bill-spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--primary);
  margin: 0 auto 10px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bill-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.bill-result h4 { color: var(--ink); margin-bottom: 14px; }
.bill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 700px) { .bill-grid { grid-template-columns: 1fr 1fr; } }
.bill-cell { background: var(--bg-soft); padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.bill-cell-label { font-size: .7rem; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.bill-cell-val { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.bill-cell-val.accent { color: var(--primary); }
.bill-insights { background: rgba(250, 175, 59, .08); border-left: 3px solid var(--accent); padding: 14px 16px; border-radius: 4px; margin-bottom: 16px; }
.bill-insights strong { color: var(--ink); display: block; margin-bottom: 6px; font-size: .9rem; }
.bill-insights ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: .88rem; }
.bill-insights li { margin-bottom: 4px; }

/* ============================================
   EV Calculator
   ============================================ */
.ev-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.ev-result { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.ev-result h4 { color: var(--ink); margin-bottom: 14px; }
.ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .ev-grid { grid-template-columns: 1fr 1fr; } }
.ev-cell { background: var(--bg-soft); padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.ev-cell-label { font-size: .7rem; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.ev-cell-val { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.ev-cell-val.accent { color: var(--ok); }
.ev-solar-add {
  margin-top: 16px; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(250,175,59,.1), rgba(27,98,174,.1));
  border-radius: var(--radius); border-left: 3px solid var(--accent);
}
.ev-solar-add strong { color: var(--ink); display: block; margin-bottom: 4px; }
.ev-solar-add p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.ev-solar-add .accent { color: var(--primary); font-weight: 700; }

/* ============================================
   Booking slots
   ============================================ */
.booking-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.booking-card h3 { color: var(--ink); margin-bottom: 6px; }
.booking-card p { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.booking-slots { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.booking-day {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.booking-day:last-of-type { border-bottom: 0; }
.booking-date { font-weight: 600; color: var(--ink); font-size: .92rem; }
.booking-slot-row { display: flex; gap: 8px; flex-wrap: wrap; }
.booking-slot {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
  font-family: inherit; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.booking-slot:hover { background: var(--primary); color: white; border-color: var(--primary); }
@media (max-width: 600px) { .booking-day { grid-template-columns: 1fr; gap: 8px; } }

/* ============================================
   Reviews Aggregator
   ============================================ */
.reviews-cta { max-width: 720px; margin: 0 auto; text-align: center; }
.reviews-cta .reviews-lede { font-size: 1.05rem; color: var(--muted); margin-bottom: 22px; }
.reviews-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 14px; }

/* Real customer video testimonial (Vinny, from BHS Instagram) */
.vtest { display: flex; gap: 32px; align-items: center; max-width: 880px; margin: 0 auto; }
.vtest-card {
  position: relative; flex: none; width: 240px; aspect-ratio: 9 / 16;
  border-radius: 20px; overflow: hidden; display: block; text-decoration: none;
  box-shadow: 0 18px 50px rgba(0,0,0,.22); transition: transform .2s, box-shadow .2s;
}
.vtest-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,.3); }
.vtest-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtest-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.55) 100%); }
.vtest-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10,20,36,.78); color: #fff; backdrop-filter: blur(4px);
  padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
}
.vtest-body { flex: 1; min-width: 0; text-align: left; }
.vtest-quote {
  position: relative;
  margin: 0 0 18px; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.28;
  font-weight: 700; color: var(--ink); letter-spacing: -.02em;
}
.vtest-quote::before {
  content: "\201C";
  display: block;
  font-size: 3.2rem; line-height: .6; margin-bottom: 10px;
  color: var(--accent); font-weight: 800;
}
.vtest-by {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; color: var(--muted); margin-bottom: 24px;
}
.vtest-by strong { color: var(--ink); }
.vtest-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(250,175,59,.16); color: var(--accent);
  border: 1px solid rgba(250,175,59,.35);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}
.vtest-body .reviews-lede { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.vtest-platforms { display: flex; flex-wrap: wrap; gap: 10px; }
.vtest-platforms a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: white;
  color: var(--ink); font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.vtest-platforms a:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,20,36,.08); }
.vtest-platforms .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
html.dark .vtest-platforms a { background: var(--bg-soft); }
@media (max-width: 640px) {
  .vtest { flex-direction: column; gap: 22px; text-align: center; }
  .vtest-card { width: 200px; }
  .vtest-body { text-align: center; }
  .vtest-quote { font-size: 1.3rem; }
  .vtest-quote::before { margin-left: auto; margin-right: auto; }
  .vtest-by { justify-content: center; }
  .vtest-platforms { justify-content: center; }
}
.reviews-summary {
  display: grid; grid-template-columns: 1fr 2fr; gap: 30px;
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; margin-bottom: 24px; align-items: center;
}
@media (max-width: 700px) { .reviews-summary { grid-template-columns: 1fr; } }
.rev-big { font-size: 3rem; font-weight: 800; color: var(--accent-text); line-height: 1; letter-spacing: -.02em; }
.rev-small { font-size: .95rem; color: var(--muted); margin-top: 6px; }
.rev-count { font-size: .82rem; color: var(--muted-soft); margin-top: 4px; }
.rev-sources { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .rev-sources { grid-template-columns: 1fr; } }
.rev-src { background: var(--bg-soft); padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.rev-src-name { font-weight: 700; color: var(--ink); font-size: .92rem; }
.rev-src-stars { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }
.rev-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.rev-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rev-src-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 4px;
}
.rev-src-google { background: rgba(66, 133, 244, .12); color: #1a73e8; }
.rev-src-bbb { background: rgba(0, 76, 109, .12); color: #004c6d; }
.rev-src-yelp { background: rgba(214, 50, 28, .12); color: #d6321c; }
/* Dark: brighten brand-colored source badges (esp. BBB dark teal was dark-on-dark) */
html.dark .rev-src-google { background: rgba(66, 133, 244, .18); color: #6ba6ff; }
html.dark .rev-src-bbb { background: rgba(74, 163, 204, .18); color: #6fc0e6; }
html.dark .rev-src-yelp { background: rgba(214, 50, 28, .2); color: #ff7d66; }
.rev-card-stars { color: var(--accent); letter-spacing: 1px; }
.rev-card-text { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.rev-card-author { font-size: .82rem; color: var(--muted); }
.rev-card-author strong { color: var(--ink); }

/* ============================================
   Live Ticker
   ============================================ */
.ticker { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.ticker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--ink); }
.ticker-head .live-pulse { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.ticker-list { display: flex; flex-direction: column; gap: 6px; }
.ticker-row {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--bg-soft); border-radius: var(--radius-sm);
  font-size: .88rem;
  animation: tickerSlide .5s ease backwards;
}
@keyframes tickerSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ticker-dot { width: 10px; height: 10px; border-radius: 50%; }
.ticker-solar { background: var(--primary); }
.ticker-heat-pump { background: var(--accent); }
.ticker-battery { background: var(--ok); }
.ticker-solar-roof { background: #7c3aed; }
.ticker-name { color: var(--muted); }
.ticker-action { display: block; color: var(--ink-soft); margin-top: 1px; }
.ticker-when { font-family: var(--font-mono); font-size: .78rem; color: var(--muted-soft); }

/* ============================================
   Cookie preferences modal
   ============================================ */
.cookie-modal {
  position: fixed; inset: 0; background: rgba(10, 22, 40, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 70; padding: 16px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal-card {
  background: white; border-radius: var(--radius-lg); padding: 28px;
  max-width: 480px; width: 100%; box-shadow: var(--shadow-lg);
}
.cookie-modal h3 { color: var(--ink); margin-bottom: 14px; }
.cookie-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cookie-row:last-of-type { border-bottom: 0; }
.cookie-row strong { display: block; color: var(--ink); }
.cookie-row p { margin: 4px 0 0; font-size: .82rem; color: var(--muted); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--line); border-radius: 24px; transition: .2s;
}
.switch span::before {
  position: absolute; content: ""; width: 18px; height: 18px;
  left: 3px; top: 3px; background: white; border-radius: 50%;
  transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:disabled + span { opacity: .6; cursor: not-allowed; }

/* ============================================
   Energy Flow Dashboard v2 — premium tech
   ============================================ */
.flow-v2 {
  color: white;
  position: relative;
}
.flow-v2 .flow-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}

.flow-stage {
  position: relative;
  background: radial-gradient(60% 80% at 50% 50%, #0e2543 0%, #050c1a 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.06);
  height: 540px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
@media (max-width: 720px) { .flow-stage { height: 640px; } }

.flow-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 80%);
}
.flow-bg-orb {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(250,175,59,.18) 0%, transparent 60%),
    radial-gradient(30% 40% at 80% 30%, rgba(22,163,74,.12) 0%, transparent 60%),
    radial-gradient(30% 40% at 20% 70%, rgba(27,98,174,.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Floating chips at the 4 corners */
.flow-chip {
  position: absolute;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  z-index: 3;
  animation: chipFloat 4s ease-in-out infinite;
}
.flow-chip-tl { top: 28px; left: 28px; }
.flow-chip-tr { top: 28px; right: 28px; animation-delay: -1s; }
.flow-chip-bl { bottom: 28px; left: 28px; animation-delay: -2s; }
.flow-chip-br { bottom: 28px; right: 28px; animation-delay: -3s; }
@media (max-width: 720px) {
  .flow-chip { padding: 10px 12px; min-width: 130px; }
  .flow-chip-tl, .flow-chip-bl { left: 12px; }
  .flow-chip-tr, .flow-chip-br { right: 12px; }
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.flow-chip-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.flow-chip-icon svg { width: 20px; height: 20px; }
.flow-chip-label {
  font-size: .72rem; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px;
}
.flow-chip-val {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: white;
  line-height: 1;
}
.flow-chip-val.accent { color: var(--accent); }

/* Central ring gauge */
.flow-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  z-index: 2;
}
@media (max-width: 720px) {
  .flow-ring { width: 240px; height: 240px; }
}
.flow-ring-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 40px rgba(250,175,59,.3));
}
#ring-arc { transition: stroke-dashoffset .6s ease; }
.flow-ring-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.flow-ring-label {
  font-size: .8rem; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .12em;
  font-family: var(--font-mono); margin-bottom: 8px;
}
.flow-ring-val {
  font-size: 4.5rem; font-weight: 800; line-height: 1;
  color: white; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 6px;
}
@media (max-width: 720px) { .flow-ring-val { font-size: 3rem; } }
.flow-ring-unit {
  font-size: 1.4rem; font-weight: 600; color: var(--accent);
}
.flow-ring-sub {
  font-size: .85rem; color: rgba(255,255,255,.6);
  margin-top: 8px; font-family: var(--font-mono);
}

/* Animated flow particles overlay */
.flow-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* Meta strip below the stage */
.flow-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding: 16px 22px;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
}
.flow-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: rgba(255,255,255,.65);
}
.flow-meta-item strong {
  color: white; font-family: var(--font-mono); font-weight: 700;
  font-size: 1rem;
}
.flow-meta-item .live-pulse {
  width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(22,163,74,.25);
}

/* ============================================
   Address autocomplete dropdown
   ============================================ */
.rt-addr-wrap { position: relative; flex: 1; }
.rt-addr-wrap input { width: 100%; }
.rt-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  z-index: 20; max-height: 280px; overflow-y: auto;
}
.rt-suggest-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 10px 14px;
  background: white; border: 0; cursor: pointer;
  font-family: inherit; font-size: .92rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.rt-suggest-row:last-child { border-bottom: 0; }
.rt-suggest-row:hover { background: var(--bg-soft); }
.rt-suggest-row svg { color: var(--muted-soft); flex-shrink: 0; }
/* Dark: the suggestion dropdown was white-on-light (unreadable) */
html.dark .rt-suggest { background: var(--bg-tinted); border-color: var(--line); }
html.dark .rt-suggest-row { background: var(--bg-tinted); color: var(--ink); border-bottom-color: var(--line); }
html.dark .rt-suggest-row:hover { background: var(--bg-soft); }

/* ============================================
   Energy Flow v3 — linear process diagram
   ============================================ */
.flow-v3 { color: white; }
.flow-v3 .flow-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 28px;
}

.flow-process {
  position: relative;
  background: radial-gradient(60% 80% at 50% 30%, #0e2543 0%, #050c1a 100%);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.06);
  padding: 36px 28px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: start; gap: 4px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.flow-process > .flow-step,
.flow-process > .flow-arrow { grid-row: 1; }
.flow-process > .flow-arrow { align-self: start; margin-top: 64px; }
@media (max-width: 980px) {
  .flow-process {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    padding: 28px 20px 36px;
  }
  .flow-process > .flow-step,
  .flow-process > .flow-arrow { grid-row: auto; }
  .flow-process > .flow-arrow { margin-top: 0; }
  .flow-process .flow-arrow { transform: rotate(90deg); margin: 4px 0; }
}

.flow-step {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 22px 18px 18px;
  text-align: center;
  position: relative;
  transition: all .3s;
}
.flow-step:hover {
  background: rgba(255,255,255,.07);
  transform: translateY(-2px);
  border-color: rgba(250,175,59,.3);
}
.flow-step-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(250,175,59,.18), rgba(250,175,59,.05));
  border: 1px solid rgba(250,175,59,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin: 0 auto 14px;
}
.flow-step-icon svg { width: 26px; height: 26px; }
.flow-step-num {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  font-family: var(--font-mono); font-weight: 700; font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
}
.flow-step-num.accent-green {
  background: rgba(22,163,74,.18); color: #4ade80;
  border: 1px solid rgba(22,163,74,.35);
}
.flow-step-label {
  font-size: .82rem; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px;
}
.flow-step-val {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
  color: white; line-height: 1; margin-bottom: 6px;
}
.flow-step-val.accent { color: var(--accent); }
.flow-step-val.accent-green { color: #4ade80; }
.flow-step-sub {
  font-size: .75rem; color: rgba(255,255,255,.5);
  font-family: var(--font-mono);
}

/* Connector arrow between stages */
.flow-arrow {
  position: relative;
  width: 70px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 980px) {
  .flow-arrow { width: 24px; height: 40px; margin: 8px auto; }
}
.flow-arrow-svg {
  width: 100%; height: 100%;
  color: rgba(250,175,59,.5);
  filter: drop-shadow(0 0 4px rgba(250,175,59,.4));
}
.flow-arrow-particles {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(250,175,59,.8) 50%, transparent 100%);
  width: 30%; opacity: 0;
  animation: arrowPulse 2s linear infinite;
}
@keyframes arrowPulse {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}

/* Branch (excess → battery/grid) — sits below stage 3 (inverter) */
.flow-branch {
  grid-column: 5 / 6; grid-row: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  margin-top: 12px;
}
.flow-branch-arrow {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-top: 0;
}
.flow-branch-svg {
  width: 24px; height: 60px;
  color: rgba(22,163,74,.55);
  filter: drop-shadow(0 0 4px rgba(22,163,74,.4));
}
.flow-branch-label {
  font-size: .75rem; color: #4ade80;
  font-family: var(--font-mono); font-weight: 600;
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.3);
  padding: 4px 10px; border-radius: 999px;
  margin-top: -4px;
  white-space: nowrap;
}
.flow-step-branch {
  width: 100%; min-width: 200px;
  border-color: rgba(22,163,74,.3);
}
.flow-step-branch .flow-step-icon {
  background: linear-gradient(135deg, rgba(22,163,74,.18), rgba(22,163,74,.05));
  border-color: rgba(22,163,74,.25);
  color: #4ade80;
}
@media (max-width: 980px) {
  .flow-branch {
    position: static; transform: none;
    grid-column: auto; grid-row: auto; /* don't force implicit col 5 in the collapsed 1-col grid */
    width: 100%; max-width: 320px; margin: 16px auto 0;
  }
  .flow-process { padding-bottom: 28px; }
}

/* Meta strip (below the diagram) */
.flow-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 20px; padding: 16px 22px;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
}
.flow-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: rgba(255,255,255,.65);
}
.flow-meta-item strong {
  color: white; font-family: var(--font-mono); font-weight: 700;
  font-size: 1rem;
}
.flow-meta-item .live-pulse {
  width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(22,163,74,.25);
}

/* ============================================
   Sticky top CTA bar
   ============================================ */
.sticky-bar {
  background: linear-gradient(135deg, var(--ink), #0e2543);
  color: white;
  padding: 0;
  position: sticky; top: 0; z-index: 70;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sticky-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 24px; font-size: .88rem;
}
.sticky-bar-icon { font-size: 1.1rem; line-height: 1; }
.sticky-bar-msg { flex: 1; }
.sticky-bar-cta {
  font-weight: 700; color: var(--accent);
  white-space: nowrap;
}
.sticky-bar-cta:hover { color: white; }
.sticky-bar-close {
  background: transparent; border: 0; color: rgba(255,255,255,.55);
  font-size: 1.4rem; cursor: pointer; padding: 0 6px; line-height: 1;
}
.sticky-bar-close:hover { color: white; }
@media (max-width: 600px) {
  .sticky-bar-msg { font-size: .82rem; }
  .sticky-bar-inner { padding: 8px 14px; gap: 10px; }
}

/* ============================================
   Mega menu navigation
   ============================================ */
.mega-trigger { position: relative; }
.mega-trigger-link {
  color: var(--ink-soft); padding: 8px 14px;
  font-weight: 500; font-size: .95rem;
  border-radius: var(--radius-sm); transition: all .15s;
  cursor: pointer;
}
.mega-trigger-link:hover { background: var(--bg-soft); color: var(--primary); }
.mega-panel {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: white; border: 1px solid var(--line);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  min-width: 560px;
  opacity: 0; pointer-events: none; transition: all .2s;
  z-index: 100;
}
.mega-trigger:hover .mega-panel {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mega-card {
  display: block; padding: 14px;
  border-radius: 12px; transition: background .15s;
  color: var(--ink); text-decoration: none;
}
.mega-card:hover { background: var(--bg-soft); color: var(--ink); }
.mega-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--bg-tinted);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.mega-card-title { font-weight: 700; font-size: .95rem; }
.mega-card-sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.mega-footer {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.mega-footer-link {
  font-size: .85rem; color: var(--primary); font-weight: 600;
}
@media (max-width: 980px) {
  /* The mega-menu is a desktop hover dropdown that REPLACED the product links, then was
     display:none on mobile — so Solar/Heat Pumps/Batteries/Solar+Roof became unreachable
     and the menu collapsed to a sliver. Inside the open mobile menu, render the panel
     INLINE so every product shows as a normal stacked row. */
  .mega-trigger { display: none; }                 /* still hidden in the collapsed header bar */
  .nav-links.open .mega-trigger { display: block; position: static; width: 100%; }
  .nav-links.open .mega-trigger-link {
    display: block; pointer-events: none; cursor: default;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); padding: 12px 14px 4px;
  }
  .nav-links.open .mega-panel {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    min-width: 0; width: auto; background: transparent; border: 0; box-shadow: none;
    padding: 0; z-index: auto; transition: none;
  }
  .nav-links.open .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .nav-links.open .mega-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
  .nav-links.open .mega-icon { width: 32px; height: 32px; margin: 0; flex: none; }
  .nav-links.open .mega-card-sub { display: none; }
  .nav-links.open .mega-footer { margin-top: 6px; padding-top: 10px; text-align: left; }
}

/* ============================================
   Tabbed FAQ
   ============================================ */
.faq-tabs { max-width: 820px; margin: 0 auto; }
.faq-tab-list {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.faq-tab-btn {
  background: transparent; border: 0; padding: 12px 18px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.faq-tab-btn:hover { color: var(--ink); }
.faq-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.faq-tab-panel { display: none; }
.faq-tab-panel.active { display: block; }

/* ============================================
   Logo wall (animated marquee)
   ============================================ */
.logo-wall {
  overflow: hidden;
  padding: 24px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%);
}
.lw-caption {
  text-align: center; margin: 0 0 16px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-soft); font-weight: 600;
}
.lw-track {
  display: flex; gap: 60px; width: max-content;
  animation: lwScroll 32s linear infinite;
}
.lw-item {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 1.1rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
@keyframes lwScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-wall:hover .lw-track { animation-play-state: paused; }

/* ============================================
   Awards row
   ============================================ */
.awards-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 900px) { .awards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .awards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .award { padding: 14px; gap: 10px; } }
.award {
  min-width: 0;
  background: white; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  transition: all .2s;
}
.award:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.award-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.award-icon svg { width: 22px; height: 22px; }
.award > div:last-child { min-width: 0; }
.award-t { font-weight: 700; color: var(--ink); font-size: .9rem; }
.award-sub { font-size: .75rem; color: var(--muted-soft); margin-top: 2px; font-family: var(--font-mono); }

/* ============================================
   Bento grid solutions
   ============================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 180px; }
}
.bento-card {
  background: white; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: all .25s;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ink);
  color: var(--ink);
}
/* Cursor-spotlight glow — JS sets --mx/--my on pointermove */
.bento-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(250,175,59,.16), transparent 62%);
  opacity: 0; transition: opacity .3s;
}
.bento-card:hover::before { opacity: 1; }
.bento-card.bento-large::before {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(250,175,59,.30), transparent 60%);
}
.bento-card > * { position: relative; z-index: 1; }
.bento-card.bento-large {
  grid-column: span 2; grid-row: span 2;
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(8, 18, 34, .93) 0%, rgba(14, 37, 67, .88) 100%),
    url("bento-solar.jpg") center 65% / cover no-repeat;
  color: white;
  border-color: transparent;
}
.bento-card.bento-large:hover { color: white; border-color: var(--accent); }
.bento-card.bento-large h3 { color: white; font-size: 1.7rem; line-height: 1.15; }
.bento-card.bento-large p { color: rgba(255,255,255,.75); font-size: 1rem; }
.bento-card.bento-large .bento-arrow { color: var(--accent); }
.bento-card.bento-wide { grid-column: span 2; }
@media (max-width: 600px) {
  .bento-card.bento-large, .bento-card.bento-wide { grid-column: span 1; grid-row: span 1; }
}
.bento-large-extras {
  display: flex; gap: 24px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
}
.bento-mini-stat { display: flex; flex-direction: column; }
.bento-mini-stat strong {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 800;
  color: var(--accent); line-height: 1;
}
.bento-mini-stat span {
  font-size: .7rem; color: rgba(255,255,255,.78);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 4px;
}
.bento-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--bg-tinted);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.bento-card h3 { margin-bottom: 8px; }
.bento-card p { color: var(--muted); margin: 0; flex: 1; }
.bento-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--ink); margin-top: 16px;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
  align-self: flex-start;
}
.bento-card:hover .bento-arrow { transform: translateX(4px); background: var(--accent); border-color: var(--accent); color: #0a1628; }
.bento-card.bento-large .bento-arrow { border-color: rgba(255,255,255,.3); }
.bento-card.bento-large:hover .bento-arrow { background: var(--accent); border-color: var(--accent); color: #0a1628; }

/* ============================================
   Sticky scroll storytelling
   ============================================ */
.sticky-scroll {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .sticky-scroll { grid-template-columns: 1fr; gap: 24px; } }

.ss-sticky {
  position: sticky; top: 100px;
  height: min(500px, 70vh);
}
@media (max-width: 900px) { .ss-sticky { position: static; height: 240px; } }
.ss-visual {
  background: linear-gradient(135deg, var(--ink), #0e2543);
  border-radius: var(--radius-xl);
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: white;
  padding: 40px;
  position: relative; overflow: hidden;
}
.ss-visual::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(250,175,59,.2), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(27,98,174,.2), transparent 50%);
}
.ss-visual-icon {
  width: 92px; height: 92px; border-radius: 24px;
  background: rgba(250,175,59,.12);
  border: 1px solid rgba(250,175,59,.25);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  transition: transform .4s, opacity .4s;
  position: relative; z-index: 1;
}
.ss-visual-icon svg { width: 44px; height: 44px; }
.ss-visual-count {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  color: var(--accent); letter-spacing: .14em; text-transform: uppercase;
  position: relative; z-index: 1; margin-bottom: 10px;
}
.ss-visual-count .ss-count-total { color: rgba(255,255,255,.45); }
.ss-visual-title {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 700; color: white;
  letter-spacing: -.015em; line-height: 1.2; text-align: center;
  position: relative; z-index: 1; max-width: 320px;
}
.ss-dots {
  display: flex; gap: 8px; justify-content: center;
  position: relative; z-index: 1; margin-top: 22px;
}
.ss-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: background .3s, transform .3s;
}
.ss-dots span.on { background: var(--accent); transform: scale(1.15); }
.ss-progress {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  height: 4px; background: rgba(255,255,255,.1);
  border-radius: 999px; overflow: hidden;
  z-index: 1;
}
.ss-progress-bar {
  height: 100%; background: var(--accent);
  width: 20%; transition: width .5s;
}

.ss-steps { display: flex; flex-direction: column; gap: 80px; padding: 40px 0; }
@media (max-width: 900px) { .ss-steps { gap: 32px; padding: 0; } }
.ss-step {
  padding: 24px;
  border-left: 3px solid var(--line);
  padding-left: 24px;
  transition: border-color .3s;
}
.ss-step.active { border-left-color: var(--accent); }
.ss-step-num {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  color: var(--accent); letter-spacing: .12em; margin-bottom: 12px;
}
.ss-step h3 { margin-bottom: 8px; color: var(--ink); }
.ss-step p { color: var(--muted); margin: 0; font-size: 1rem; }

/* ============================================
   Newsletter signup
   ============================================ */
.newsletter {
  background: linear-gradient(135deg, var(--ink), #0e2543);
  color: white;
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  align-items: center;
}
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; padding: 28px; } }
.newsletter h3 { color: white; margin-bottom: 6px; }
.newsletter p { color: rgba(255,255,255,.75); margin: 0; font-size: .92rem; }
.newsletter-form {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
  flex: 1; min-width: 200px;
  padding: 12px 16px; border-radius: 999px; border: 0;
  font-family: inherit; font-size: .95rem;
  background: rgba(255,255,255,.95);
}
.newsletter-form input[type="email"]:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(250,175,59,.4);
}

/* ============================================
   Roof Panel Placer
   ============================================ */
.placer { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.placer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.placer-head h3 { margin-bottom: 4px; color: var(--ink); }
.placer-head p { margin: 0; font-size: .92rem; color: var(--muted); }
.placer-canvas-wrap {
  background: linear-gradient(180deg, #a8c7e8, #d3e3f5);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.placer-canvas { width: 100%; height: auto; display: block; }
.placed-panel:hover { filter: brightness(1.15); }
.placer-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 700px) { .placer-stats { grid-template-columns: 1fr 1fr; } }
.placer-stat {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.placer-stat-label { font-size: .72rem; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.placer-stat-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.placer-stat-val.accent { color: var(--primary); }
.placer-stat-val.accent-green { color: var(--ok); }

/* ============================================
   Seasonality production chart
   ============================================ */
.season-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.season-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.season-head h3 { margin-bottom: 4px; color: var(--ink); }
.season-head p { margin: 0; font-size: .92rem; color: var(--muted); }
.season-total { text-align: right; }
.season-total strong { font-family: var(--font-mono); font-size: 2rem; font-weight: 800; color: var(--primary); display: block; line-height: 1; }
.season-total span { font-size: .85rem; color: var(--muted); font-family: var(--font-mono); }
.season-chart {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;
  height: 260px;
  align-items: end;
}
/* On touch/small screens the hover value-tooltips don't function and their edge
   bleed causes page overflow — clip it horizontally (vertical stays visible). */
@media (max-width: 600px) { .season-chart { overflow-x: clip; } }
.season-bar-col {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%;
}
.season-bar {
  width: 100%; max-width: 32px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: 6px 6px 0 0;
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  transition: all .25s;
  cursor: pointer;
}
.season-bar:hover { transform: translateY(-3px); filter: brightness(1.1); }
.season-bar-val {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink); color: white;
  padding: 4px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: .72rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.season-bar:hover .season-bar-val { opacity: 1; }
.season-bar-label { font-size: .72rem; color: var(--muted); font-family: var(--font-mono); }

/* ============================================
   Roof Panel Placer v2 (with satellite)
   ============================================ */
.placer-addr { margin-bottom: 16px; }
/* hidden attr must win over the explicit display on these (lead-first: shown after lead) */
.placer-stage[hidden], .placer-sizer[hidden], .placer-stats[hidden], .tool-disclaimer[hidden] { display: none !important; }
.placer-stage {
  background: var(--bg-tinted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  aspect-ratio: 16 / 10;
}
.placer-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--muted-soft);
  text-align: center; padding: 24px;
}
.placer-empty svg { opacity: .3; }
.placer-canvas-area {
  position: relative; width: 100%; height: 100%;
}
.placer-iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}
.placer-iframe[hidden] { display: none; }
/* Google Solar flux composite (real roof + irradiance heatmap) when available */
.placer-flux {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Lead-first form for the real solar design (shown on the public page) */
.rp-design-cta { margin-top: 14px; width: 100%; }
.rp-design-note { margin-top: 12px; font-size: .82rem; color: var(--muted); text-align: center; }
.placer-lead { max-width: 520px; margin: 0 auto; }
.placer-lead .placer-addr { margin-bottom: 12px; }
.rp-gate, .rp-gate-row { display: flex; gap: 10px; margin-bottom: 10px; }
.rp-gate-row > input { flex: 1; }
.rp-gate input[type=text], .rp-gate input[type=tel], .rp-gate input[type=email],
.placer-lead input[type=text], .placer-lead input[type=tel], .placer-lead input[type=email] {
  width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; background: var(--bg); color: var(--ink);
}
.rp-gate input[type=email], .placer-lead input[type=email] { margin-bottom: 12px; }
.rp-gate-consent { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: .82rem; color: var(--muted); margin-bottom: 14px; }
.rp-gate-consent input { margin-top: 3px; flex: none; }
.rp-gate > button, .placer-lead > button { width: 100%; }
.rp-gate-msg { font-size: .85rem; color: var(--err); margin-top: 10px; min-height: 1em; text-align: center; }
/* "Your home" locator badge on the satellite view */
.placer-located {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,20,36,.82); color: #fff; backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  pointer-events: none;
}
.placer-located svg { color: var(--accent); }

/* Leaflet satellite base (replaces the old Google Maps iframe) */
.rp-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--bg-tinted); }
.rp-map .leaflet-container { background: var(--bg-tinted); font: inherit; }

/* Draggable "drag onto your roof" hint */
.rp-hint-drag {
  position: absolute; bottom: 12px; left: 12px; z-index: 420;
  background: rgba(10,20,36,.82); color: #fff; backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  pointer-events: none; transition: opacity .2s;
}

/* Realistic solar-panel array overlay — point-anchored over the map, drag to fit roof */
.rp-array {
  position: absolute; z-index: 410; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none; touch-action: none; will-change: left, top, transform;
}
.rp-array-grid {
  display: grid; gap: 2px;
  padding: 3px; border-radius: 2px;
  background: rgba(8, 14, 26, .28);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.35);
}
/* Real Google Solar layout — one absolutely-projected panel per module */
.rp-real { position: absolute; inset: 0; z-index: 410; pointer-events: none; }
.rp-panel-real {
  position: absolute; will-change: left, top, transform;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35);
}
/* Each panel: opaque dark monocrystalline look + visible cell grid + frame + sheen */
.rp-panel {
  width: 20px; height: 33px; border-radius: 1.5px;
  border: 1px solid #c9d3e0;            /* silver frame */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 .5px, transparent .5px 16.66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 .5px, transparent .5px 50%),
    linear-gradient(150deg, #1b3a66 0%, #102744 48%, #0a1a30 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  position: relative;
}
.rp-panel::after {                       /* diagonal glass sheen */
  content: ""; position: absolute; inset: 0; border-radius: 1px;
  background: linear-gradient(125deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.04) 22%, transparent 42%);
}
@media (max-width: 560px) { .rp-panel { width: 15px; height: 25px; } }
.rp-array-cap {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  background: rgba(10,20,36,.82); color: #fff; backdrop-filter: blur(4px);
  padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  pointer-events: none;
}

/* System-size sizer (replaces the old click-to-place interaction) */
.placer-sizer { margin-top: 18px; }
.placer-sizer-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.placer-sizer-top span { color: var(--muted); font-size: .9rem; font-weight: 600; }
.placer-sizer-top strong { font-family: var(--font-mono); font-size: 1.3rem; color: var(--primary); }
.placer-sizer input[type=range] { width: 100%; accent-color: var(--primary); }
.placer-sizer-hint { margin-top: 8px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.placer-rotate { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.placer-rotate span { color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.placer-rotate input[type=range] { flex: 1; min-width: 0; accent-color: var(--primary); }
/* (removed: .placer-overlay/.placer-panel/.placer-instructions — old click-to-place UI) */

/* ============================================
   Mini-split Zone Planner (heat pumps)
   ============================================ */
.zoner { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.zoner-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.zoner-head h3 { margin-bottom: 4px; color: var(--ink); }
.zoner-head p { margin: 0; font-size: .92rem; color: var(--muted); }
.zoner-stage {
  background: var(--bg-tinted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  aspect-ratio: 16 / 10;
}
.floorplan { width: 100%; height: 100%; display: block; cursor: pointer; }
.floorplan .zr-room {
  fill: white; stroke: var(--ink); stroke-width: 2;
  transition: fill .15s;
  cursor: pointer;
}
.floorplan .zr-room:hover { fill: var(--bg-tinted); }
.floorplan .zr-room.has-unit { fill: rgba(250, 175, 59, .15); stroke: var(--accent-dark); }
.floorplan .zr-unit {
  pointer-events: none;
}
.floorplan .zr-label {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  fill: var(--ink-soft); text-anchor: middle; pointer-events: none;
}
.floorplan .zr-btu {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  fill: var(--accent-dark); text-anchor: middle; pointer-events: none;
}
.floorplan .zr-floor { fill: #f4f1ec; stroke: var(--ink); }
/* Dark mode: floor + rooms are dark surfaces (not cream/white) so labels stay readable */
html.dark .floorplan .zr-floor { fill: var(--bg-tinted); stroke: var(--line); }
html.dark .floorplan .zr-room { fill: var(--bg-soft); stroke: var(--line); }
html.dark .floorplan .zr-room:hover { fill: var(--bg-tinted); }
/* keep the amber "unit placed" highlight in dark (must out-specify the rule above) */
html.dark .floorplan .zr-room.has-unit { fill: rgba(250, 175, 59, .18); stroke: var(--accent-dark); }
.zoner-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 700px) { .zoner-stats { grid-template-columns: 1fr 1fr; } }
.zoner-stat {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.zoner-stat-label { font-size: .72rem; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.zoner-stat-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.zoner-stat-val.accent { color: var(--primary); }
.zoner-stat-val.accent-amber { color: var(--accent-dark); }
.zoner-stat-val.accent-green { color: var(--ok); }

/* ============================================
   Press / Media row
   ============================================ */
.press-row {
  display: flex; align-items: center; gap: 36px;
  padding: 18px 24px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden;
  flex-wrap: wrap; justify-content: center;
}
.press-label {
  font-size: .72rem; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  white-space: nowrap;
}
.press-logos {
  display: flex; gap: 36px; flex-wrap: wrap; align-items: center; justify-content: center;
}
.press-logo {
  font-weight: 700; font-size: 1.05rem;
  font-family: Georgia, serif;
  opacity: .7; transition: opacity .15s;
  letter-spacing: -.01em; text-decoration: none;
}
.press-logo:hover { opacity: 1; text-decoration: underline; }

/* ============================================
   Community Impact Dashboard
   ============================================ */
.impact-dash {
  background: linear-gradient(135deg, var(--ink), #0e2543);
  border-radius: var(--radius-xl);
  padding: 40px;
  color: white;
}
.impact-head { text-align: center; margin-bottom: 28px; }
.impact-head h3 { color: white; margin-bottom: 6px; font-size: 1.5rem; }
.impact-head p { color: rgba(255,255,255,.7); margin: 0; }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .impact-grid { grid-template-columns: 1fr; } }
.impact-tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
}
.impact-icon {
  margin: 0 auto 12px;
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.impact-val {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 800;
  color: var(--accent); line-height: 1; margin-bottom: 8px;
}
.impact-unit { font-size: 1rem; color: rgba(255,255,255,.6); font-weight: 600; }
.impact-label { font-size: .85rem; color: rgba(255,255,255,.7); }

/* ============================================
   Cost compare (oil vs heat pump bars)
   ============================================ */
.cc-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.cc-head h3 { margin-bottom: 4px; color: var(--ink); }
.cc-head p { margin: 0; font-size: .92rem; color: var(--muted); }
.cc-savings { text-align: right; background: rgba(22,163,74,.1); padding: 12px 18px; border-radius: var(--radius); border: 1px solid rgba(22,163,74,.25); }
.cc-savings-label { font-size: .72rem; color: var(--ok); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cc-savings-val { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 800; color: var(--ok); line-height: 1; margin: 4px 0; }
.cc-savings-sub { font-size: .75rem; color: var(--muted); }
.cc-legend { display: flex; gap: 20px; margin-bottom: 16px; }
.cc-leg-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.cc-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cc-dot-oil { background: #dc2626; }
.cc-dot-hp { background: var(--ok); }
.cc-chart { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; height: 280px; align-items: end; }
.cc-year-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.cc-bars { display: flex; gap: 4px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.cc-bar { width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; transition: filter .2s; cursor: pointer; }
.cc-bar:hover { filter: brightness(1.15); }
.cc-bar-oil { background: linear-gradient(180deg, #ef4444, #dc2626); }
.cc-bar-hp { background: linear-gradient(180deg, #4ade80, #16a34a); }
.cc-year-label { font-size: .72rem; color: var(--muted-soft); font-family: var(--font-mono); }

/* ============================================
   Warranty timeline
   ============================================ */
.warr-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px 60px; }
.warr-head { text-align: center; margin-bottom: 40px; }
.warr-head h3 { color: var(--ink); margin-bottom: 6px; }
.warr-head p { color: var(--muted); margin: 0; font-size: .92rem; }
.warr-line { position: relative; height: 4px; margin: 50px 24px 24px; }
.warr-track {
  position: absolute; inset: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
}
.warr-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
}
.warr-dot-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: white; border: 3px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: .95rem;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.warr-dot-label {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  text-align: center; min-width: 140px;
}
.warr-dot-label strong { display: block; color: var(--ink); font-size: .9rem; margin-bottom: 2px; }
.warr-dot-label span { font-size: .78rem; color: var(--muted); }
.warr-dot:nth-child(odd) .warr-dot-label { top: auto; bottom: 60px; }
.warr-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .warr-foot { grid-template-columns: 1fr; } .warr-dot-label { display: none; } }
.warr-foot-item strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: 4px; }
.warr-foot-item span { font-size: .85rem; color: var(--muted); }

/* ============================================
   VS Others comparison table
   ============================================ */
.vs-table { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; }
.vs-row:not(.vs-head):nth-child(even) { background: var(--bg-soft); }
.vs-cell { padding: 16px 18px; text-align: center; }
.vs-cell-feature { text-align: left; font-size: .92rem; color: var(--ink-soft); }
.vs-head { background: var(--ink) !important; color: white; }
.vs-head .vs-cell-feature { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; }
.vs-col-title { font-weight: 700; font-size: .95rem; color: white; }
.vs-bhs { background: rgba(250,175,59,.08); }
.vs-head.vs-row .vs-bhs { background: rgba(250,175,59,.2); }
.vs-head.vs-row .vs-bhs .vs-col-title { color: var(--accent); }
/* Dark mode: --ink flips to a light value, so pin the header to a dark bar */
html.dark .vs-head { background: var(--bg-tinted) !important; }
@media (max-width: 600px) {
  .vs-row { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .vs-cell { padding: 12px 8px; font-size: .82rem; }
}

/* ============================================
   App preview (phone mockup)
   ============================================ */
.appprev {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .appprev { grid-template-columns: 1fr; gap: 40px; } }
.appprev-text h3 { font-size: 2rem; margin: 8px 0 16px; }
.appprev-text p { font-size: 1.05rem; color: var(--muted); margin-bottom: 20px; }
.appprev-bullets { list-style: none; padding: 0; margin: 0; }
.appprev-bullets li {
  padding: 10px 0 10px 28px; position: relative;
  color: var(--ink-soft); font-size: .95rem;
}
.appprev-bullets li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.appprev-phone { display: flex; justify-content: center; }
.phone-frame {
  width: 280px; height: 580px; border-radius: 40px;
  background: linear-gradient(135deg, #1a1a1a, #000);
  padding: 12px;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.04);
  position: relative;
}
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 24px; background: #000; border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #0a1628, #050c1a);
  border-radius: 28px;
  color: white;
  padding: 36px 18px 18px;
  position: relative;
  overflow: hidden;
}
.phone-statusbar {
  position: absolute; top: 14px; left: 24px;
  font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
  color: white; z-index: 3;
}
.phone-header { text-align: center; margin-bottom: 16px; }
.phone-greeting { font-size: .72rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .12em; }
.phone-name { font-size: .95rem; font-weight: 700; color: white; margin-top: 4px; }
.phone-ring-wrap { position: relative; aspect-ratio: 1; margin: 8px 16px; }
.phone-ring { width: 100%; height: 100%; }
.phone-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.phone-ring-val { font-size: 2.4rem; font-weight: 800; color: white; line-height: 1; display: flex; align-items: baseline; gap: 2px; }
.phone-ring-val span { font-size: .9rem; color: var(--accent); }
.phone-ring-label { font-size: .7rem; color: rgba(255,255,255,.6); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }
.phone-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 12px; }
.phone-mini {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 6px; text-align: center;
}
.phone-mini-icon { display: flex; justify-content: center; margin-bottom: 4px; }
.phone-mini-val { font-family: var(--font-mono); font-weight: 700; font-size: .88rem; color: white; }
.phone-mini-lbl { font-size: .62rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.phone-saved {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: rgba(250,175,59,.1); border: 1px solid rgba(250,175,59,.25);
  border-radius: 12px; padding: 12px;
  margin-top: 12px;
}
.phone-saved > div { text-align: center; }
.phone-saved-label { font-size: .6rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.phone-saved-val { font-family: var(--font-mono); font-weight: 800; font-size: 1.05rem; color: var(--accent); margin-top: 4px; }

/* ============================================
   Hero scroll cue
   ============================================ */
.scroll-cue {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  animation: scrollBounce 2s ease-in-out infinite;
  transition: opacity .4s;
  pointer-events: none;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================
   Page fade-in
   ============================================ */
body { animation: pageIn .35s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   Heat pump unit types
   ============================================ */
.hptypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .hptypes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .hptypes { grid-template-columns: 1fr; } }
.hptype-card {
  background: white; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  transition: all .2s;
}
.hptype-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.hptype-svg {
  width: 100%; aspect-ratio: 5 / 4; margin-bottom: 14px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.hptype-svg svg { width: 75%; height: 75%; }
.hptype-card h4 { color: var(--ink); margin-bottom: 6px; font-size: 1rem; }
.hptype-card p { color: var(--muted); margin: 0; font-size: .85rem; line-height: 1.55; }

/* ===== How a heat pump works — interactive refrigerant cycle (hp-cycle) ===== */
.hpcycle { --flow: var(--accent); --flow-soft: rgba(250,175,59,.16); }
.hpcycle.mode-cool { --flow: var(--primary); --flow-soft: rgba(42,125,208,.14); }
.hpcycle-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hpcycle-head h3 { margin: 0; color: var(--ink); font-size: 1.2rem; }
.hpcycle-toggle { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.hpc-mode { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; color: var(--muted); padding: 6px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.hpc-mode.active { background: var(--flow); color: #fff; }
.hpc-mode:focus-visible { outline: none; box-shadow: var(--ring); }
.hpcycle-scene { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 8px 4px; }
.hpc-svg { width: 100%; height: auto; display: block; }
.hpc-wall { stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 6; }
.hpc-zone { fill: var(--muted); font-size: 12px; font-weight: 600; }
.hpc-label { fill: var(--ink); font-size: 11.5px; font-weight: 600; }
.hpc-pipe { fill: none; stroke: var(--border); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.hpc-flow { fill: none; stroke: var(--flow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 14; animation: hpcflow 1s linear infinite; }
.mode-cool .hpc-flow { animation-direction: reverse; }
@keyframes hpcflow { to { stroke-dashoffset: -40; } }
.hpc-box { fill: #fff; stroke: var(--ink); stroke-width: 1.6; transition: stroke .2s, filter .2s; }
html.dark .hpc-box { fill: #13233b; }
.hpc-fan { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.hpc-detail { stroke: var(--muted); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.hpcycle[data-active="outdoor"] #hpc-outdoor .hpc-box,
.hpcycle[data-active="compressor"] #hpc-compressor .hpc-box,
.hpcycle[data-active="indoor"] #hpc-indoor .hpc-box,
.hpcycle[data-active="expansion"] #hpc-expansion .hpc-box {
  stroke: var(--flow); stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--flow));
}
.hpc-weather { transition: opacity .3s; }
.mode-heat .hpc-sun, .mode-cool .hpc-snow { opacity: 0; }
.mode-heat .hpc-snow, .mode-cool .hpc-sun { opacity: 1; }
.hpc-snow { stroke: #7fb2e6; stroke-width: 1.6; stroke-linecap: round; }
.hpc-sun { stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.hpc-cap { margin: 6px 4px 2px; text-align: center; color: var(--muted); font-size: .82rem; transition: opacity .3s; }
.mode-heat .hpc-cap-cool, .mode-cool .hpc-cap-heat { display: none; }
.hpcycle-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 760px) { .hpcycle-steps { grid-template-columns: 1fr 1fr; } }
.hpc-step { text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; transition: border-color .2s, transform .2s; }
.hpc-step:hover { border-color: var(--flow); transform: translateY(-2px); }
.hpc-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--flow); color: #fff; font-size: .72rem; font-weight: 700; margin-bottom: 8px; }
.hpc-step h5 { margin: 0 0 4px; color: var(--ink); font-size: .88rem; }
.hpc-step p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.hpcycle-cop { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius); background: var(--flow-soft); color: var(--ink); font-size: .85rem; line-height: 1.55; }
.hpcycle-cop strong { color: var(--flow); }
@media (prefers-reduced-motion: reduce) { .hpc-flow { animation: none; } }

/* ===== Battery backup estimator (backup-estimator) ===== */
.bkp { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 760px) { .bkp { grid-template-columns: 1fr; } }
.bkp-pick h4 { margin: 0 0 4px; color: var(--ink); font-size: 1.15rem; }
.bkp-sub { margin: 0 0 14px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.bkp-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .bkp-apps { grid-template-columns: 1fr; } }
.bkp-app { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; font: inherit; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--ink); transition: border-color .15s, background .15s; }
.bkp-app:hover { border-color: var(--primary); }
.bkp-app:focus-visible { outline: none; box-shadow: var(--ring); }
.bkp-app.on { border-color: var(--primary); background: rgba(42,125,208,.08); }
.bkp-app-name { font-size: .85rem; font-weight: 500; }
.bkp-app-w { font-size: .72rem; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.bkp-app.on .bkp-app-w { color: var(--primary); }
.bkp-units { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .85rem; color: var(--muted); }
.bkp-unit-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.bkp-unit { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; width: 30px; height: 26px; border-radius: 999px; color: var(--muted); }
.bkp-unit.on { background: var(--primary); color: #fff; }
.bkp-unit:focus-visible { outline: none; box-shadow: var(--ring); }
.bkp-kwh { font-weight: 700; color: var(--ink); }
.bkp-result { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.bkp-batt { position: relative; width: 56px; height: 96px; border: 3px solid var(--ink); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 14px; }
.bkp-batt-cap { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 22px; height: 6px; background: var(--ink); border-radius: 3px 3px 0 0; }
.bkp-batt-fill { width: 100%; background: linear-gradient(0deg, #16a34a, #4ade80); transition: height .4s ease; }
.bkp-hours { line-height: 1; }
.bkp-hours span { font-size: 2.6rem; font-weight: 800; color: var(--ink); }
.bkp-hours small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.bkp-detail { margin: 12px 0 0; color: var(--ink); font-size: .85rem; }
.bkp-note { margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

/* ===== Incentive-stack visualizer (incentive-stack) ===== */
.istack { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.istack-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.istack-head h4 { margin: 0; color: var(--ink); font-size: 1.15rem; }
.istack-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.istack-type { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; color: var(--muted); padding: 6px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.istack-type.on { background: var(--primary); color: #fff; }
.istack-type:focus-visible { outline: none; box-shadow: var(--ring); }
.istack-slider { display: block; margin-bottom: 18px; }
.istack-slider span { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 8px; }
.istack-slider strong { color: var(--ink); }
.istack-slider input[type=range] { width: 100%; accent-color: var(--primary); }
.istack-bars { display: flex; flex-direction: column; gap: 12px; }
.istack-row-top { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; margin-bottom: 5px; }
.istack-row-top span { color: var(--ink); }
.istack-row-top strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.istack-track { height: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.istack-fill { height: 100%; border-radius: 999px; transition: width .45s cubic-bezier(.4,0,.2,1); }
.istack-row.gross .istack-fill { background: var(--ink); }
.istack-row.gross .istack-row-top strong { color: var(--ink); }
.istack-row.cut .istack-fill { background: #16a34a; }
.istack-row.cut .istack-row-top strong { color: #16a34a; }
.istack-row.net .istack-fill { background: linear-gradient(90deg, var(--accent), var(--primary)); }
.istack-row.net .istack-row-top span, .istack-row.net .istack-row-top strong { color: var(--primary); font-weight: 700; }
.istack-ongoing { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius); background: rgba(42,125,208,.08); color: var(--ink); font-size: .82rem; line-height: 1.55; }
.istack-note { margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

/* ===== A day with solar + battery (solar-day) ===== */
.sday-scene { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.sday-svg { width: 100%; height: auto; display: block; }
#sd-sky { transition: fill .4s ease; }
#sd-sun, #sd-moon { transition: opacity .4s ease; }
#sd-panel-glow, #sd-window, #sd-batt { transition: opacity .4s ease, fill .4s ease, y .4s ease, height .4s ease; }
.sd-flow { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 2 10; animation: hpcflow 1s linear infinite; transition: opacity .3s; }
.sd-flow.export { stroke: #16a34a; }
#sd-flow-batt { stroke: #16a34a; }
@media (prefers-reduced-motion: reduce) { .sd-flow { animation: none; } }
.sday-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sday-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.sday-stat span:not(.sday-dot) { font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sday-stat small { color: var(--muted); font-size: .72rem; }
.sday-dot { width: 9px; height: 9px; border-radius: 50%; }
.sday-dot.solar { background: #ffd34d; } .sday-dot.home { background: var(--primary); } .sday-dot.batt { background: #16a34a; }
.sday-cap { margin: 14px 0 0; text-align: center; color: var(--ink); font-size: .9rem; min-height: 2.6em; }
.sday-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.sday-controls input[type=range] { flex: 1; accent-color: var(--accent); }
.sday-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); min-width: 78px; text-align: right; }
.sday-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sday-preset, .sday-outage { border: 1px solid var(--border); background: var(--bg); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.sday-preset:hover, .sday-outage:hover { border-color: var(--accent); }
.sday-preset:focus-visible, .sday-outage:focus-visible { outline: none; box-shadow: var(--ring); }
.sday-outage { margin-left: auto; border-color: #dc2626; color: #dc2626; }
.sday-outage.on { background: #dc2626; color: #fff; }
.sday-note { margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

/* ============================================
   Solar Readiness Quiz
   ============================================ */
.ready-quiz {
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; max-width: 640px; margin: 0 auto;
}
.ready-progress { height: 4px; background: var(--line); border-radius: 999px; margin-bottom: 28px; overflow: hidden; }
.ready-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); transition: width .35s; }
.ready-step-num { font-family: var(--font-mono); font-size: .75rem; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.ready-body h4 { color: var(--ink); margin-bottom: 18px; font-size: 1.15rem; }
.ready-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .ready-opts { grid-template-columns: 1fr; } }
.ready-opt {
  background: white; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  text-align: left; cursor: pointer;
  font-family: inherit; font-size: .92rem; color: var(--ink); font-weight: 500;
  transition: all .15s;
}
.ready-opt:hover { border-color: var(--primary); background: var(--bg-tinted); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ready-result { text-align: center; padding: 20px 0; }
.ready-score-ring { position: relative; width: 140px; height: 140px; margin: 0 auto 16px; }
.ready-score-ring svg { width: 100%; height: 100%; }
.ready-score-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 2rem;
  color: var(--ink);
}
.ready-result h4 { color: var(--ink); font-size: 1.4rem; margin-bottom: 6px; }

/* ====== Filter chips (project gallery, etc.) ====== */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin: 0 0 32px;
}
.chip {
  background: white; color: var(--ink);
  border: 1.5px solid var(--border);
  padding: 8px 18px; border-radius: 999px;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active {
  background: var(--ink); color: white;
  border-color: var(--ink);
}

/* Exit-intent modal */
.exit-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.exit-modal-overlay.open { opacity: 1; pointer-events: auto; }
.exit-modal {
  background: white; border-radius: 18px;
  max-width: 480px; width: 100%;
  padding: 32px; position: relative;
  transform: translateY(20px);
  transition: transform .25s ease;
}
.exit-modal-overlay.open .exit-modal { transform: translateY(0); }
.exit-modal h3 { font-size: 1.5rem; margin: 0 0 12px; }
.exit-modal p { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
.exit-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 0; font-size: 1.5rem;
  cursor: pointer; color: var(--muted);
  width: 32px; height: 32px; border-radius: 50%;
}
.exit-modal-close:hover { background: var(--soft); color: var(--ink); }
.exit-modal-form { display: flex; gap: 8px; }
.exit-modal-form input {
  flex: 1; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: .95rem;
}

/* ====== Panel comparator ====== */
.panel-compare { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.panel-compare-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.panel-compare-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.panel-table { display: grid; }
.panel-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.4fr .8fr 1.4fr;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border);
  align-items: center; font-size: .9rem;
}
.panel-row > div { min-width: 0; }
.panel-row-head { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.panel-row-bhs { background: linear-gradient(90deg, rgba(250,175,59,.08), transparent); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.bhs-tag { display: inline-block; margin-left: 8px; background: var(--accent); color: var(--ink); font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.bar-wrap { width: 100%; height: 6px; background: var(--soft); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.bar { height: 100%; background: var(--primary); border-radius: 999px; }
.panel-row-bhs .bar { background: var(--accent); }
@media (max-width: 720px) {
  .panel-row { grid-template-columns: 1fr 1fr; }
  .panel-row-head { display: none; }
  .panel-row > div::before {
    content: attr(data-col-en);
    display: block;
    font-size: .65rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 2px;
  }
}
html[lang="es"] .panel-row > div::before { content: attr(data-col-es); }

/* ====== Install heatmap ====== */
.heatmap-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.heatmap-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.heatmap-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.heatmap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.heat-cell {
  border-radius: 10px; padding: 12px 10px; text-align: center;
  color: white; transition: transform .15s ease;
}
.heat-cell:hover { transform: scale(1.05); }
.heat-cell-city { font-size: .72rem; font-weight: 600; opacity: .9; }
.heat-cell-count { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800; margin-top: 4px; }
.heat-1 { background: #c7dcef; color: #0f2540; }
.heat-2 { background: #79afdb; }
.heat-3 { background: #2c7cc5; }
.heat-4 { background: #1b62ae; }
.heat-5 { background: #0d3d76; }
.heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .8rem; color: var(--muted); justify-content: center; }
.heat-step { width: 22px; height: 14px; border-radius: 3px; }
.heat-step.heat-1 { background: #c7dcef; }
.heat-step.heat-2 { background: #79afdb; }
.heat-step.heat-3 { background: #2c7cc5; }
.heat-step.heat-4 { background: #1b62ae; }
.heat-step.heat-5 { background: #0d3d76; }
.heatmap-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--muted); }

/* ====== ROI vs S&P 500 ====== */
.roi-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.roi-head h4 { margin: 0 0 4px; font-size: 1.3rem; }
.roi-head p { color: var(--muted); margin: 0 0 6px; font-size: .9rem; }
.roi-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.roi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.roi-stat { background: var(--soft); padding: 18px; border-radius: 12px; }
.roi-stat-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.roi-stat-val { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 800; margin: 6px 0 4px; color: var(--ink); }
.roi-stat-val.accent { color: var(--primary); }
.roi-stat-sub { font-size: .75rem; color: var(--muted); }

/* ====== Appointment calendar ====== */
.appt-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.appt-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.appt-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.appt-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 18px; }
.appt-day {
  border: 1.5px solid var(--border); background: white;
  border-radius: 10px; padding: 10px 6px;
  font-family: inherit; cursor: pointer;
  transition: all .15s ease;
}
.appt-day:hover { border-color: var(--primary); transform: translateY(-1px); }
.appt-day.active { background: var(--ink); color: white; border-color: var(--ink); box-shadow: var(--shadow); }
.appt-day.active .appt-day-num { color: var(--accent); }
.appt-day-name { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.appt-day-num { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 800; margin-top: 2px; }
.appt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.appt-slot {
  border: 1.5px solid var(--border); background: white;
  border-radius: 999px; padding: 10px 14px;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.appt-slot:hover:not(.taken) { border-color: var(--primary); color: var(--primary); }
.appt-slot.active { background: var(--primary); color: white; border-color: var(--primary); }
.appt-slot.taken { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.appt-pick { font-size: .9rem; color: var(--muted); text-align: center; margin: 12px 0 0; }

/* ====== Pre-install checklist ====== */
.checklist-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.checklist-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.checklist-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.checklist-progress { width: 100%; height: 8px; background: var(--soft); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.checklist-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; transition: width .25s ease; }
.checklist-list { list-style: none; padding: 0; margin: 0; }
.checklist-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item label { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.checklist-item input { position: absolute; opacity: 0; pointer-events: none; }
.checklist-check {
  width: 24px; height: 24px; border: 2px solid var(--border);
  border-radius: 8px; flex-shrink: 0; position: relative; transition: all .15s ease;
}
.checklist-item input:checked + .checklist-check {
  background: var(--primary); border-color: var(--primary);
}
.checklist-item input:checked + .checklist-check::after {
  content: ''; position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 12px;
  border: solid white; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.checklist-label { font-size: .95rem; color: var(--ink); }
.checklist-item input:checked ~ .checklist-label { color: var(--muted); text-decoration: line-through; }
.checklist-count { font-size: .85rem; color: var(--muted); text-align: right; margin: 12px 0 0; font-family: var(--font-mono); }

/* ====== Video testimonials ====== */
.vidtest-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.vidtest-card {
  background: white; border: 1px solid var(--border);
  border-radius: 14px; padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vidtest-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(15,31,51,.08); }
.vidtest-avatar {
  width: 64px; height: 64px;
  border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800;
  position: relative; margin-bottom: 14px;
}
.vidtest-play {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; padding-left: 2px;
  border: 2px solid white;
}
.vidtest-card blockquote {
  margin: 0 0 14px; font-size: .95rem; color: var(--ink);
  font-style: italic; line-height: 1.5;
}
.vidtest-meta { font-size: .8rem; color: var(--muted); }
.vidtest-meta strong { color: var(--ink); }
.vidtest-svc { color: var(--primary); font-weight: 600; }

/* ====== Projects lightbox ====== */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox {
  background: white; border-radius: 20px;
  max-width: 720px; width: 100%; max-height: 90vh;
  overflow-y: auto; position: relative;
  transform: translateY(20px);
  transition: transform .25s ease;
}
.lightbox-overlay.open .lightbox { transform: translateY(0); }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.9); border: 0;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.5rem; cursor: pointer;
  z-index: 2; color: var(--ink);
}
.lightbox-close:hover { background: white; }
.lightbox-hero {
  aspect-ratio: 16/7;
  background: linear-gradient(135deg, #1b62ae, #0a1628);
  position: relative;
  border-radius: 20px 20px 0 0;
}
.lightbox-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.lightbox-badge {
  position: absolute; top: 20px; left: 20px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  color: white; padding: 8px 16px; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.25);
}
.lightbox-body { padding: 32px; }
.lightbox-body h3 { font-size: 1.5rem; margin: 0 0 8px; }
.lightbox-body > p { color: var(--muted); margin: 0 0 18px; }
.lightbox-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.lightbox-specs span {
  background: var(--soft); padding: 6px 14px; border-radius: 999px;
  font-size: .85rem; font-weight: 600;
}
.lightbox-timeline { margin: 24px 0; }
.lightbox-timeline h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 12px; }
.lightbox-timeline ol { padding-left: 20px; margin: 0; }
.lightbox-timeline li { padding: 6px 0; }

/* ====== Utility comparator ====== */
.utility-compare { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.utility-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.utility-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.utility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; padding-top: 18px; }
.util-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.util-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; margin-top: 4px; }
.util-val.accent { color: var(--primary); }

/* ====== Portal dashboard ====== */
.portal-dash { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 28px; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.portal-head h3 { margin: 6px 0 0; font-size: 1.4rem; }
.portal-spec { display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: .85rem; color: var(--muted); }
.portal-section { margin-bottom: 28px; }
.portal-section h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 14px; }
.portal-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; counter-reset: stage; }
.portal-stages li { padding: 12px 6px; border-radius: 10px; text-align: center; background: var(--bg-soft); font-size: .72rem; color: var(--muted); border: 1px solid var(--border); position: relative; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.portal-stages li.done { background: rgba(22, 163, 74, .12); color: var(--ok, #16a34a); border-color: rgba(22, 163, 74, .25); }
.portal-stages li.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 12px rgba(27, 98, 174, .35); }
.portal-stages li .stage-num { font-family: var(--font-mono); font-weight: 800; font-size: .9rem; }
@media (max-width: 760px) {
  .portal-stages { grid-template-columns: repeat(4, 1fr); }
}
.portal-prod-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.portal-prod-stats > div { background: var(--bg-soft); padding: 14px; border-radius: 10px; }
.portal-prod-stats .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: block; margin-bottom: 4px; }
.portal-prod-stats strong { font-family: var(--font-mono); font-size: 1.2rem; }
.portal-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 14px; background: var(--bg-soft); border-radius: 12px; }
.portal-chart .bar2 { flex: 1; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 4px 4px 0 0; min-height: 4px; transition: transform .15s ease; }
.portal-chart .bar2:hover { transform: scaleY(1.04); }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.portal-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.portal-card .eyebrow { font-size: .68rem; }
.portal-card strong { display: block; margin: 6px 0 4px; font-size: 1.05rem; }
.portal-card p { color: var(--muted); margin: 0; font-size: .82rem; }
.portal-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border); }

/* ====== Neighbor compare ====== */
.neighbor-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.neighbor-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.neighbor-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.neighbor-result { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.nb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 16px; }
.nb-row > div { background: var(--bg-soft); padding: 16px; border-radius: 10px; }
.nb-row .muted { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: block; margin-bottom: 4px; }
.nb-row strong { font-family: var(--font-mono); font-size: 1.4rem; }
.nb-row strong.accent { color: var(--primary); }
.nb-narrative { font-size: .95rem; padding: 14px; background: rgba(250,175,59,.1); border-left: 3px solid var(--accent); border-radius: 8px; margin: 12px 0; }

/* ====== WhatsApp quick replies ====== */
.wa-quickreplies { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 520px; }
.wa-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.wa-avatar { width: 48px; height: 48px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-avatar svg { width: 26px; height: 26px; }
.wa-head strong { display: block; font-size: 1rem; }
.wa-head p { margin: 2px 0 0; font-size: .8rem; }
.wa-replies { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.wa-chip { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-size: .9rem; color: var(--ink); text-decoration: none; transition: all .15s ease; }
.wa-chip:hover { background: rgba(37, 211, 102, .12); border-color: #25D366; }
.wa-direct { display: block; text-align: center; color: #0a7d3a; font-weight: 700; text-decoration: underline; padding-top: 8px; }
.wa-direct:hover { color: #0b6e2e; }
html.dark .wa-direct { color: #4ade80; }

/* ====== Kiosk mode ====== */
@keyframes kioskBar { from { width: 0; } to { width: 100%; } }
body.kiosk { overflow: hidden; background: #06111f; color: #f1f5f9; }
.kiosk-frame { height: 100vh; display: flex; flex-direction: column; padding: 32px 48px; }
.kiosk-progress { height: 4px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.kiosk-bar { height: 100%; background: var(--accent); border-radius: 999px; width: 0; }
.kiosk-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.kiosk-stage > * { width: 100%; }
.kiosk-title { font-size: 2.2rem; margin: 0 0 24px; color: white; text-align: center; }
.kiosk-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: .9rem; }
.kiosk-meta strong { color: var(--accent); font-size: 1.1rem; }

/* ====== Scroll animations (richer than default reveal) ====== */
.reveal-up { transform: translateY(40px); opacity: 0; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
.reveal-up.in { transform: none; opacity: 1; }
.reveal-stagger > * { transform: translateY(28px); opacity: 0; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease; transition-delay: var(--d, 0ms); }
.reveal-stagger.in > * { transform: none; opacity: 1; }
.reveal-scale { transform: scale(.96); opacity: 0; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.reveal-scale.in { transform: none; opacity: 1; }

/* ====== Urgency countdown ====== */
.urgency-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.urgency-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.urgency-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.urgency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.urgency-item { padding: 18px; border-radius: 12px; border: 1px solid var(--border); position: relative; }
.urgency-federal { background: linear-gradient(135deg, rgba(27,98,174,.06), transparent); border-color: rgba(27,98,174,.3); }
.urgency-state   { background: linear-gradient(135deg, rgba(250,175,59,.06), transparent); border-color: rgba(250,175,59,.3); }
.urgency-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.urgency-num { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1; }
.urgency-num span { font-size: .8rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.urgency-label { margin: 8px 0 4px; font-size: .95rem; font-weight: 600; color: var(--ink); }
.urgency-date { font-size: .78rem; color: var(--muted); }

/* ====== Sun hours today ====== */
.sunhours-card {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg, rgba(250,175,59,.12), rgba(27,98,174,.06));
  border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px;
}
.sunhours-icon { color: var(--accent); flex-shrink: 0; }
.sunhours-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.sunhours-big { font-family: var(--font-mono); font-size: 2rem; font-weight: 800; margin: 4px 0 6px; line-height: 1; }
.sunhours-big span { font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--muted); margin-left: 8px; }
.sunhours-sub { font-size: .85rem; color: var(--muted); margin: 0; }
@media (max-width: 600px) { .sunhours-card { flex-direction: column; text-align: center; } }

/* ====== Energy independence score ====== */
.indep-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.indep-head h4 { margin: 0 0 4px; font-size: 1.3rem; }
.indep-head p { color: var(--muted); margin: 0 0 22px; font-size: .9rem; }
.indep-q { padding: 16px 0; border-bottom: 1px solid var(--border); }
.indep-q:last-child { border-bottom: 0; }
.indep-q-label { font-size: .95rem; margin-bottom: 10px; }
.indep-q-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.indep-btn {
  background: var(--bg-soft); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 8px 18px;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
  color: var(--ink);
}
.indep-btn:hover { border-color: var(--primary); color: var(--primary); }
.indep-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.indep-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; }
.indep-dial { display: inline-flex; align-items: baseline; gap: 6px; }
.indep-score { font-family: var(--font-mono); font-size: 4rem; font-weight: 800; color: var(--primary); line-height: 1; }
.indep-out-of { font-family: var(--font-mono); font-size: 1.2rem; color: var(--muted); }
.indep-result h5 { margin: 12px 0 6px; font-size: 1.2rem; }
.indep-result p { color: var(--muted); margin: 0 auto 18px; max-width: 480px; }

/* ====== Maintenance schedule ====== */
.maint-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.maint-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.maint-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.maint-timeline { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.maint-row {
  display: grid; grid-template-columns: 70px 1fr 36px;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-soft); border-radius: 10px;
  border-left: 3px solid var(--border);
}
.maint-solar  { border-left-color: var(--accent); }
.maint-hp     { border-left-color: #dc2626; }
.maint-battery{ border-left-color: #16a34a; }
.maint-month { font-family: var(--font-mono); font-size: .85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.maint-task { font-size: .9rem; }
.maint-type { font-size: 1.2rem; text-align: right; }

/* ====== Referral tracker ====== */
.ref-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.ref-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.ref-dial-wrap { text-align: center; }
.ref-dial { width: 180px; height: 180px; color: var(--ink); }
.ref-dial circle { transition: stroke-dashoffset .6s cubic-bezier(.16,1,.3,1); }
.ref-earned { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-top: 8px; }
.ref-content h4 { margin: 0 0 6px; font-size: 1.4rem; }
.ref-content p { color: var(--muted); margin: 0 0 16px; }
.ref-input { margin-bottom: 14px; }
.ref-input label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.ref-input input { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; width: 100px; font-family: var(--font-mono); font-size: 1rem; background: var(--bg-soft); color: var(--ink); }
@media (max-width: 640px) { .ref-grid { grid-template-columns: 1fr; text-align: center; } }

/* ====== Cmd+K search palette ====== */
.cmdk-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 24px; z-index: 11000;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.cmdk-overlay.open { opacity: 1; pointer-events: auto; }
.cmdk {
  background: var(--bg); color: var(--ink);
  width: 100%; max-width: 560px; border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
  border: 1px solid var(--border);
}
.cmdk-overlay.open .cmdk { transform: translateY(0); }
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  color: var(--muted);
}
/* Borderless input: surface keyboard focus on the wrap instead. */
.cmdk-input-wrap:focus-within {
  border-bottom-color: var(--primary);
  box-shadow: inset 0 -2px 0 0 var(--primary);
}
.cmdk-input-wrap input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink);
}
.cmdk-input-wrap kbd {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px;
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
}
.cmdk-list { max-height: 60vh; overflow-y: auto; padding: 6px; }
.cmdk-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
  transition: background .1s ease;
}
.cmdk-row.active, .cmdk-row:hover { background: var(--bg-soft); }
.cmdk-row-title { font-weight: 600; font-size: .95rem; }
.cmdk-row-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.cmdk-row kbd { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.cmdk-empty { padding: 32px; text-align: center; color: var(--muted); font-size: .9rem; }

/* Nav search button */
.nav-search-btn {
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--muted); padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: .85rem;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; transition: all .15s ease;
}
.nav-search-btn:hover { color: var(--ink); border-color: var(--primary); }
.nav-search-btn kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-family: var(--font-mono); font-size: .7rem; }
@media (max-width: 800px) { .nav-search-btn .lbl, .nav-search-btn kbd { display: none; } }
/* Very small screens: drop the header "Get Quote" (hamburger menu + sticky mobile CTA cover it) */
@media (max-width: 480px) { .nav-tools .btn-accent { display: none; } }

/* Energy independence progress */
.indep-progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.indep-progress-bar {
  flex: 1; height: 6px; background: var(--bg-soft);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.indep-progress-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px; transition: width .3s ease;
}
.indep-progress-text { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* ====== Quote wizard ====== */
.qw-card { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 32px; }
.qw-progress { height: 4px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.qw-bar { width: 25%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .3s ease; }
.qw-step-count { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); text-align: right; margin-bottom: 20px; }
.qw-stage { min-height: 280px; }
.qw-q { font-size: 1.5rem; margin: 0 0 22px; line-height: 1.3; }
.qw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qw-opt {
  position: relative;
  background: var(--bg-soft); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 18px 16px 18px 44px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease; text-align: left;
  color: var(--ink);
}
.qw-opt::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); transition: all .15s;
}
.qw-opt:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.qw-opt:hover::before { border-color: var(--accent); }
.qw-opt.selected { border-color: var(--primary); background: var(--bg-tinted); }
.qw-opt.selected::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2.5px var(--bg-soft), inset 0 0 0 10px var(--accent);
}
.qw-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--muted); margin-top: 16px; }
.qw-status { font-size: .85rem; margin-top: 12px; color: var(--muted); }
.qw-done { text-align: center; padding: 30px 10px; }
.qw-done h3 { margin: 12px 0 8px; font-size: 1.6rem; }
.qw-done p { color: var(--muted); }
@media (max-width: 540px) { .qw-opts { grid-template-columns: 1fr; } }

/* ====== Rate ticker ====== */
.rtk-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.rtk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rtk-head h4 { margin: 0 0 4px; font-size: 1.2rem; }
.rtk-head p { color: var(--muted); margin: 0; font-size: .85rem; }
.rtk-delta { text-align: right; }
.rtk-delta span { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; }
.rtk-delta.up span { color: #dc2626; }
.rtk-delta.down span { color: #16a34a; }
.rtk-delta small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.rtk-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 8px 0 0; border-bottom: 1px solid var(--border); }
.rtk-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rtk-bar { width: 70%; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 4px 4px 0 0; transition: transform .15s ease; }
.rtk-col:hover .rtk-bar { transform: scaleX(1.15); }
.rtk-month { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); }
.rtk-callout { margin-top: 16px; padding: 14px; background: rgba(250,175,59,.08); border-left: 3px solid var(--accent); border-radius: 8px; font-size: .9rem; }
.rtk-callout strong { display: block; margin-bottom: 4px; }
.rtk-callout span { color: var(--muted); }

/* ====== Care plan timeline ====== */
.care-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.care-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.care-head p { color: var(--muted); margin: 0 0 28px; font-size: .9rem; }
.care-line { position: relative; height: 130px; margin: 16px 6px 12px; }
.care-track {
  position: absolute; left: 0; right: 0; top: 56px; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
}
.care-dot { position: absolute; top: 0; transform: translateX(-50%); text-align: center; width: 130px; }
.care-dot::after {
  content: ''; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--primary);
  box-shadow: 0 2px 8px rgba(27,98,174,.3);
}
.care-label { font-family: var(--font-mono); font-weight: 700; font-size: .78rem; color: var(--primary); margin-bottom: 30px; }
.care-note { font-size: .72rem; color: var(--muted); margin-top: 24px; line-height: 1.4; }
@media (max-width: 720px) {
  .care-line { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .care-dot { position: static; transform: none; width: 100%; text-align: left; display: flex; gap: 14px; align-items: center; }
  .care-dot::after { position: relative; top: 0; left: 0; transform: none; flex-shrink: 0; }
  .care-label { margin-bottom: 0; min-width: 60px; }
  .care-note { margin-top: 0; }
  .care-track { display: none; }
}

/* ====== Community impact strip ====== */
.impact-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  background: linear-gradient(135deg, var(--primary), #0f3469);
  color: white; padding: 32px 28px; border-radius: 16px;
}
.impact-strip .impact-cell { text-align: center; }
.impact-strip .impact-num { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--accent); }
.impact-strip .impact-label { font-size: .78rem; opacity: .85; margin-top: 8px; color: white; }

/* ====== SMART estimator ====== */
.smart-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.smart-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.smart-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.smart-result { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.smart-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; }
.smart-stats > div { background: var(--bg-soft); padding: 16px; border-radius: 12px; }
.smart-stats .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.smart-stats strong { display: block; font-family: var(--font-mono); font-size: 1.4rem; margin-top: 4px; }
.smart-stats strong.accent { color: var(--primary); }
.smart-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding: 8px 0; background: var(--bg-soft); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.sm-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.sm-bar { width: 80%; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 3px 3px 0 0; transition: opacity .15s; min-height: 3px; }
.sm-col:hover .sm-bar { opacity: .85; }
.sm-year { font-family: var(--font-mono); font-size: .6rem; color: var(--muted); }

/* ====== Equipment finder ====== */
.eqf-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.eqf-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.eqf-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.eqf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.eqf-item {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.eqf-brand { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); font-weight: 700; }
.eqf-model { font-size: 1rem; font-weight: 700; margin: 4px 0 8px; }
.eqf-spec { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.eqf-made { font-size: .72rem; color: var(--muted-soft); margin-top: 8px; font-style: italic; }

/* Heatmap dark mode override */
html.dark .heat-1 { background: #1e3a5c; color: #a8c4e0; }
html.dark .heat-2 { background: #2a5384; }
html.dark .heat-3 { background: #3a73b4; }
html.dark .heat-4 { background: #4a8fd0; }
html.dark .heat-5 { background: #5fa8e0; color: #061029; }
html.dark .heat-step.heat-1 { background: #1e3a5c; }
html.dark .heat-step.heat-2 { background: #2a5384; }
html.dark .heat-step.heat-3 { background: #3a73b4; }
html.dark .heat-step.heat-4 { background: #4a8fd0; }
html.dark .heat-step.heat-5 { background: #5fa8e0; }

/* ====== Social proof toast ====== */
.social-toast {
  position: fixed; bottom: 24px; left: 24px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.18));
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
  max-width: 320px; z-index: 9000;
  opacity: 0; transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.social-toast.open { opacity: 1; transform: translateY(0); }
.social-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 800;
  flex-shrink: 0;
}
.social-text { font-size: .85rem; line-height: 1.4; }
.social-text strong { font-size: .9rem; }
.social-text .muted { color: var(--muted); font-weight: 400; }
.social-text div { color: var(--ink); }
.social-text small { color: var(--muted); font-size: .72rem; display: block; margin-top: 2px; }
.social-close {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.2rem; padding: 0;
  width: 24px; height: 24px;
}
.social-close:hover { color: var(--ink); }
@media (max-width: 640px) {
  .social-toast { left: 12px; right: 12px; max-width: none; bottom: 80px; }
}
html.dark .social-toast { background: var(--bg-soft); border-color: var(--line); }

/* ====== Live form viewers badge ====== */
.form-viewers {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.3);
  border-radius: 999px; padding: 6px 12px;
  font-size: .78rem; color: #0b6e2e; /* AA on the light-green pill */
  margin-bottom: 14px;
}
html.dark .form-viewers { color: #4ade80; }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.8); }
}

/* Wizard - selected option style */
.qw-opt.selected { background: var(--primary); color: white; border-color: var(--primary); }

/* ====== Trust badges row ====== */
.trust-badges {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.trust-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; text-decoration: none;
  color: var(--ink);
  transition: all .15s ease;
}
.trust-badge:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.trust-badge svg { color: var(--primary); flex-shrink: 0; }
.trust-badge strong { display: block; font-size: .85rem; }
.trust-badge span { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-top: 2px; }
.trust-disclaimer { font-size: .8rem; color: var(--muted); margin-top: 14px; }
.trust-disclaimer a { color: var(--primary); }

/* ====== Blog TOC + reading time ====== */
.blog-toc { margin: 24px 0 32px; padding: 14px 16px; background: var(--bg-soft); border-radius: 12px; border-left: 3px solid var(--primary); }
.blog-meta { display: flex; gap: 8px; font-size: .8rem; color: var(--muted); margin-bottom: 8px; font-family: var(--font-mono); }
.blog-toc-detail summary {
  cursor: pointer; font-size: .9rem; font-weight: 600;
  padding: 6px 0;
  color: var(--ink);
}
.blog-toc-detail summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}
.blog-toc-detail summary::marker { color: var(--primary); }
.blog-toc-detail ol { margin: 12px 0 4px 18px; padding: 0; }
.blog-toc-detail li { padding: 4px 0; font-size: .9rem; }
.blog-toc-detail li.toc-h3 { padding-left: 14px; font-size: .82rem; color: var(--muted); }
.blog-toc-detail a { color: var(--ink); text-decoration: none; }
.blog-toc-detail a:hover { color: var(--primary); }

/* ====== Print-friendly ====== */
@media print {
  .site-header, .site-footer, .footer, .chat-launcher, .chat-panel,
  .sticky-bar, .mobile-cta, .nav-search-btn, .theme-toggle,
  .social-toast, .form-viewers, .exit-modal-overlay, .cmdk-overlay,
  .nav-tools, .mobile-toggle, [data-tool="newsletter"] {
    display: none !important;
  }
  body { background: white; color: black; }
  .container { max-width: none; padding: 0 16px; }
  a { color: black; text-decoration: underline; }
  .btn { border: 1px solid black; padding: 4px 12px; }
  .section { padding: 16px 0 !important; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ====== Compare-quote ====== */
.cq-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.cq-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.cq-head p { color: var(--muted); margin: 0 0 20px; font-size: .9rem; }
.cq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cq-side h5 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.cq-side textarea {
  width: 100%; min-height: 220px;
  padding: 12px; font-family: var(--font-mono); font-size: .82rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg-soft); color: var(--ink);
  resize: vertical;
}
.cq-placeholder { color: var(--muted); font-size: .9rem; padding: 20px 0; }
.cq-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: 14px; }
.cq-table th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-weight: 700; }
.cq-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); }
.cq-table tr:last-child td { border-bottom: 0; }
.cq-win { color: var(--ok, #16a34a); font-weight: 700; }
@media (max-width: 720px) {
  .cq-grid { grid-template-columns: 1fr; }
}

/* ====== Status tracker ====== */
.st-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.st-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.st-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.st-form { display: flex; gap: 10px; margin-bottom: 16px; }
.st-form input {
  flex: 1; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 999px;
  font-family: var(--font-mono); font-size: .95rem;
  background: var(--bg); color: var(--ink);
}
.st-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.st-ref { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; margin-bottom: 14px; color: var(--primary); }
.st-stages { margin-bottom: 14px !important; }
.st-msg { font-size: .9rem; color: var(--muted); }
.st-msg strong { color: var(--ink); }

/* ====== Meet reps ====== */
.reps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rep-card {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px;
  display: flex; gap: 14px; align-items: center;
}
.rep-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: .95rem;
  flex-shrink: 0;
}
.rep-info strong { display: block; font-size: 1rem; }
.rep-role { font-size: .82rem; color: var(--primary); font-weight: 600; }
.rep-meta { font-size: .72rem; color: var(--muted); display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }

/* ====== VS DIY table ====== */
.vsdiy-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.vsdiy-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.vsdiy-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.vsdiy-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vsdiy-table th { text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--border); font-weight: 700; }
.vsdiy-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.vsdiy-table td small { display: block; color: var(--muted); font-size: .7rem; margin-top: 2px; font-style: italic; }
.vsdiy-table tr.total td { font-weight: 800; font-family: var(--font-mono); border-top: 1px solid var(--border); background: var(--bg-soft); }
.vsdiy-table tr.total.ok td { color: var(--ok, #16a34a); }

/* ====== Solar storyboard ====== */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.story-step {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 18px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.story-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.story-num {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 2.2rem; font-weight: 800;
  color: var(--accent); opacity: .25;
  line-height: 1;
}
.story-icon { color: var(--primary); margin-bottom: 12px; }
.story-step h5 { margin: 0 0 6px; font-size: 1.05rem; }
.story-step p { color: var(--muted); margin: 0; font-size: .85rem; line-height: 1.5; }

/* ====== NPS score ====== */
.nps-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.nps-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; margin-bottom: 16px; }
.nps-score-block { text-align: center; padding: 20px; background: linear-gradient(135deg, var(--primary), #0f3469); color: white; border-radius: 14px; }
.nps-num { font-family: var(--font-mono); font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--accent); }
.nps-label { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-top: 6px; }
.nps-sub { font-size: .72rem; opacity: .7; margin-top: 6px; }
.nps-band { font-size: .75rem; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.15); display: inline-block; }
.nps-bar-wrap h5 { font-size: .9rem; margin: 0 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nps-row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; margin: 8px 0 4px; }
.nps-pct { font-family: var(--font-mono); color: var(--ink); font-weight: 700; }
.nps-bar { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.nps-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.nps-promoters { background: #16a34a; }
.nps-passives  { background: #f59e0b; }
.nps-detractors{ background: #dc2626; }
@media (max-width: 640px) { .nps-grid { grid-template-columns: 1fr; } }

/* ====== Savings forecast ====== */
.forecast-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.forecast-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.forecast-head p { color: var(--muted); margin: 0 0 14px; font-size: .9rem; }
.forecast-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0; }
.forecast-stats > div { background: var(--bg-soft); padding: 14px; border-radius: 10px; }
.forecast-stats .muted { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.forecast-stats strong { display: block; font-family: var(--font-mono); font-size: 1.2rem; margin-top: 4px; }
.forecast-stats strong.accent { color: var(--primary); }
.forecast-svg { width: 100%; height: 220px; background: var(--bg-soft); border-radius: 10px; padding: 4px; }

/* ====== Review submit ====== */
.rs-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 540px; margin: 0 auto; }
.rs-head h4 { margin: 0 0 4px; font-size: 1.25rem; }
.rs-head p { color: var(--muted); margin: 0 0 18px; font-size: .9rem; }
.rs-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rs-star {
  background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; color: var(--muted-soft);
  padding: 0 2px; transition: color .1s;
}
.rs-star.active, .rs-star:hover, .rs-star:hover ~ .rs-star { color: var(--accent); }
.rs-consent { display: flex; gap: 10px; font-size: .82rem; color: var(--muted); margin: 14px 0; }
.rs-status { font-size: .85rem; margin-top: 12px; color: var(--muted); }

/* ====== Achievements ====== */
.ach-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ach-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-soft); border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.ach-year { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.ach-text { font-size: .85rem; color: var(--ink); }