/*
 * Solar Quote Form – Frontend Styles
 * Solana brand | Poppins | Mobile-first | WCAG 2.1 AA
 *
 * Palette aligned to solana.co.za:
 *   - White surface, Poppins typeface
 *   - Brick-red (#af3529) primary actions
 *   - Amber-yellow (#ffc107) accents (badges, recommendation panel)
 *   - Dark slate (#1d2327) reserved for hero strip and footer-like surfaces
 */

/* ── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Surfaces — light theme to match solana.co.za body. */
  --sqf-bg:                    #ffffff;
  --sqf-surface:               #fafafa;
  --sqf-surface-raised:        #ffffff;
  --sqf-surface-sunken:        #f3f3f3;
  --sqf-border:                #e4e4e4;
  --sqf-border-hover:          #c9c9c9;

  /* Dark accent surface (hero strip, footer-like panels). */
  --sqf-dark:                  #1d2327;
  --sqf-dark-2:                #2a3138;

  /* Primary — brick-red CTAs, matches solana.co.za buttons. */
  --sqf-primary:               #af3529;
  --sqf-primary-hover:         #922a20;
  --sqf-primary-soft:          #fbe9e7;
  --sqf-primary-glow:          rgba(175, 53, 41, 0.20);
  --sqf-primary-glow-strong:   rgba(175, 53, 41, 0.35);

  /* Amber — solar accent, matches solana.co.za headings. */
  --sqf-amber:                 #ffc107;
  --sqf-amber-soft:            #fff3c4;
  --sqf-amber-glow:            rgba(255, 193, 7, 0.22);
  --sqf-amber-border:          #f4d889;

  /* Text. */
  --sqf-text:                  #1d2327;
  --sqf-text-muted:            #5a5f63;
  --sqf-text-faint:            #9aa0a4;
  --sqf-text-on-primary:       #ffffff;
  --sqf-text-on-amber:         #1d2327;

  --sqf-success:               #2e7d32;
  --sqf-success-light:         rgba(46, 125, 50, 0.10);
  --sqf-error:                 #c62828;
  --sqf-error-light:           rgba(198, 40, 40, 0.08);

  /*
   * v1.4.0 money + PPA tokens (Solana three-token system).
   *   --sqf-money-positive: applied ONLY to money-positive figures
   *      (savings, payback duration, R-values, PPA "you save" lines).
   *      Resolves Solana's "no red on money" note while keeping brick-red
   *      as the primary brand colour.
   *   --sqf-ppa: applied ONLY to PPA-related cards, badges, and accents.
   *      Visually separates the PPA path from the Capital path at a glance.
   */
  --sqf-money-positive:        #1b8a35;
  --sqf-money-positive-soft:   rgba(27, 138, 53, 0.10);
  --sqf-ppa:                   #6b4ea8;
  --sqf-ppa-hover:             #5a3f93;
  --sqf-ppa-soft:              rgba(107, 78, 168, 0.10);
  --sqf-ppa-glow:              rgba(107, 78, 168, 0.22);
  --sqf-ppa-border:            #ccb7e8;

  --sqf-card-selected-border:  #af3529;
  --sqf-card-selected-bg:      rgba(175, 53, 41, 0.06);

  --sqf-font:                  'Poppins', system-ui, -apple-system, sans-serif;
  --sqf-max-width:             680px;
  --sqf-max-width-lg:          1080px;

  /* Base font scale — improved readability on desktop */
  --sqf-font-base:             1rem;
  --sqf-font-sm:               0.9375rem;
  --sqf-font-xs:               0.875rem;

  --sqf-radius-sm:             8px;
  --sqf-radius:                12px;
  --sqf-radius-lg:             16px;

  --sqf-shadow-card-selected:  0 0 0 2px var(--sqf-primary), 0 8px 32px var(--sqf-primary-glow);
  --sqf-shadow-btn-hover:      0 4px 20px var(--sqf-primary-glow-strong);

  --sqf-transition:            200ms cubic-bezier(0.4, 0, 0.2, 1);
  --sqf-transition-slow:       400ms cubic-bezier(0.4, 0, 0.2, 1);

  --sqf-spacing-xs:            0.5rem;
  --sqf-spacing-sm:            0.75rem;
  --sqf-spacing:               1rem;
  --sqf-spacing-md:            1.5rem;
  --sqf-spacing-lg:            2rem;
  --sqf-spacing-xl:            3rem;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sqf-transition:      0ms;
    --sqf-transition-slow: 0ms;
  }

  .sqf-wrapper *,
  .sqf-wrapper *::before,
  .sqf-wrapper *::after {
    animation-duration:        0ms !important;
    animation-delay:           0ms !important;
    transition-duration:       0ms !important;
    transition-delay:          0ms !important;
  }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.sqf-hidden {
  display: none !important;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.sqf-wrapper {
  max-width: var(--sqf-max-width);
  margin: 0 auto;
  padding: var(--sqf-spacing) var(--sqf-spacing-sm);
  font-family: var(--sqf-font);
  color: var(--sqf-text);
  background: var(--sqf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Expand form width on tablet and larger */
@media (min-width: 768px) {
  .sqf-wrapper {
    max-width: var(--sqf-max-width-lg);
    padding: var(--sqf-spacing) var(--sqf-spacing);
  }
}

@media (min-width: 1024px) {
  .sqf-wrapper {
    padding: var(--sqf-spacing) var(--sqf-spacing);
  }
}

.sqf-wrapper *,
.sqf-wrapper *::before,
.sqf-wrapper *::after {
  box-sizing: inherit;
}

/* ── Progress Indicator ──────────────────────────────────────────────────── */
.sqf-progress {
  padding: var(--sqf-spacing-lg) var(--sqf-spacing-md) 0;
  margin-bottom: var(--sqf-spacing-lg);
}

@media (min-width: 480px) {
  .sqf-progress {
    padding: 0 var(--sqf-spacing-lg);
  }
}

.sqf-progress-track {
  height: 6px;
  background: var(--sqf-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sqf-primary), #c84436);
  border-radius: 3px;
  transition: width var(--sqf-transition-slow);
}

.sqf-progress-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: 0 var(--sqf-spacing-xs);
}

/* Connecting line between bubbles */
.sqf-progress-steps::before {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(16px + 1rem);
  right: calc(16px + 1rem);
  height: 2px;
  background: var(--sqf-border);
  z-index: 0;
}

.sqf-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.sqf-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sqf-surface);
  border: 2px solid var(--sqf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sqf-text-muted);
  transition: background var(--sqf-transition), border-color var(--sqf-transition), color var(--sqf-transition);
  position: relative;
}

/* Checkmark inside done bubble — hidden until JS adds sqf-progress-step--done */
.sqf-step-check {
  display: none;
  width: 14px;
  height: 14px;
  color: #fff;
}

.sqf-step-number-text {
  display: block;
}

.sqf-progress-step--done .sqf-step-num {
  background: var(--sqf-primary);
  border-color: var(--sqf-primary);
  color: #fff;
}

.sqf-progress-step--done .sqf-step-number-text {
  display: none;
}

.sqf-progress-step--done .sqf-step-check {
  display: block;
}

.sqf-progress-step--active .sqf-step-num {
  background: var(--sqf-primary);
  border-color: var(--sqf-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--sqf-primary-glow);
}

.sqf-step-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
}

.sqf-progress-step--active .sqf-step-label {
  color: var(--sqf-text);
  font-weight: 600;
}

.sqf-progress-step--done .sqf-step-label {
  color: var(--sqf-primary);
}

/* ── Form Container ──────────────────────────────────────────────────────── */
.sqf-form-container {
  background: var(--sqf-surface);
  border: 1px solid var(--sqf-border);
  border-radius: var(--sqf-radius-lg);
  position: relative;
  overflow: hidden;
}

/* Top accent bar — disabled in v2 because the hero with its amber bottom-border
   now provides the top-of-card visual cue. Kept here as a no-op for reference. */
.sqf-form-container::before {
  content: none;
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.sqf-step {
  display: none;
  padding: var(--sqf-spacing-lg) var(--sqf-spacing);
  animation: sqfSlideIn 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (min-width: 480px) {
  .sqf-step {
    padding: var(--sqf-spacing-xl) var(--sqf-spacing-lg);
  }
}

@media (min-width: 768px) {
  .sqf-step {
    padding: var(--sqf-spacing-xl) 3rem;
  }
}

.sqf-step--active {
  display: block;
}

@keyframes sqfSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sqfSlideBack {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sqf-step--slide-back {
  animation-name: sqfSlideBack;
}

/* ── Step Header ─────────────────────────────────────────────────────────── */
.sqf-step-header {
  margin-bottom: var(--sqf-spacing-lg);
}

.sqf-step-title {
  font-family: var(--sqf-font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sqf-text);
  margin: 0 0 var(--sqf-spacing-xs);
  /* Breathing room above the heading when JS scrolls it into view on step transitions. */
  scroll-margin-top: 1rem;
}

@media (min-width: 480px) {
  .sqf-step-title {
    font-size: 1.875rem;
  }
}

.sqf-step-subtitle {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sqf-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Selection Cards ─────────────────────────────────────────────────────── */
.sqf-cards {
  display: grid;
  gap: var(--sqf-spacing);
  margin-bottom: var(--sqf-spacing-lg);
}

@media (min-width: 480px) {
  .sqf-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sqf-cards--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sqf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sqf-spacing-md);
  background: var(--sqf-surface-raised);
  border: 2px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  cursor: pointer;
  transition: border-color var(--sqf-transition), background var(--sqf-transition), box-shadow var(--sqf-transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: var(--sqf-spacing-xs);
  min-height: 148px;
}

@media (min-width: 480px) {
  .sqf-card {
    min-height: 168px;
  }
}

.sqf-card:hover {
  border-color: var(--sqf-border-hover);
  background: var(--sqf-surface-sunken);
}

.sqf-card-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sqf-card.sqf-card--selected {
  border-color: var(--sqf-card-selected-border);
  background: var(--sqf-card-selected-bg);
  box-shadow: var(--sqf-shadow-card-selected);
}

/* Card icon */
.sqf-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(236, 57, 13, 0.10);
  color: var(--sqf-primary);
  margin-bottom: var(--sqf-spacing-xs);
  flex-shrink: 0;
}

.sqf-card-icon svg {
  width: 22px;
  height: 22px;
}

.sqf-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--sqf-text);
  line-height: 1.2;
}

.sqf-card-desc {
  font-size: 0.8125rem;
  color: var(--sqf-text-muted);
  line-height: 1.45;
}

.sqf-card-benefit {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sqf-primary);
  margin-top: auto;
  padding-top: var(--sqf-spacing-xs);
}

/* kW badge on size cards */
.sqf-card-kw {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sqf-text-muted);
  background: var(--sqf-border);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sqf-spacing-xs);
}

/* Check circle — top right */
.sqf-card-check {
  position: absolute;
  top: var(--sqf-spacing-sm);
  right: var(--sqf-spacing-sm);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--sqf-border);
  background: var(--sqf-surface);
  transition: border-color var(--sqf-transition), background var(--sqf-transition), transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sqf-card-check::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) scale(0) rotate(-45deg);
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transition: transform 180ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sqf-card.sqf-card--selected .sqf-card-check {
  border-color: var(--sqf-primary);
  background: var(--sqf-primary);
  transform: scale(1.08);
}

.sqf-card.sqf-card--selected .sqf-card-check::after {
  transform: translate(-50%, -60%) scale(1) rotate(-45deg);
}

/* Popular badge */
.sqf-card--popular {
  border-color: rgba(236, 57, 13, 0.35);
}

.sqf-card-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--sqf-primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 0 var(--sqf-radius-sm) 0 var(--sqf-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Trust Signal ─────────────────────────────────────────────────────────── */
.sqf-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
  text-align: center;
  margin-bottom: var(--sqf-spacing-md);
  flex-wrap: wrap;
}

.sqf-trust svg {
  width: 14px;
  height: 14px;
  color: var(--sqf-success);
  flex-shrink: 0;
}

/* ── Selection Summary Bar ───────────────────────────────────────────────── */
.sqf-selection-summary {
  display: flex;
  align-items: center;
  gap: var(--sqf-spacing-xs);
  margin-bottom: var(--sqf-spacing-md);
  flex-wrap: wrap;
}

.sqf-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sqf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sqf-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sqf-surface-raised);
  border: 1px solid var(--sqf-border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sqf-text);
}

.sqf-summary-pill svg {
  width: 13px;
  height: 13px;
  color: var(--sqf-primary);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.sqf-fields {
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-field-row {
  margin-bottom: var(--sqf-spacing);
}

.sqf-field-row--two {
  display: grid;
  gap: var(--sqf-spacing);
}

@media (min-width: 480px) {
  .sqf-field-row--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sqf-label {
  display: block;
  font-size: var(--sqf-font-xs);
  font-weight: 600;
  color: var(--sqf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sqf-spacing-xs);
}

.sqf-required {
  color: var(--sqf-error);
  margin-left: var(--sqf-spacing-xs);
}

.sqf-input {
  width: 100%;
  padding: 0.9375rem 1.125rem;
  border: 1.5px solid var(--sqf-border);
  border-radius: var(--sqf-radius-sm);
  background: var(--sqf-surface-raised);
  font-size: var(--sqf-font-sm);
  font-family: var(--sqf-font);
  font-weight: 400;
  color: var(--sqf-text);
  transition: border-color var(--sqf-transition), box-shadow var(--sqf-transition);
  appearance: none;
  -webkit-appearance: none;
}

.sqf-input::placeholder {
  color: var(--sqf-text-faint);
}

.sqf-input:focus {
  outline: none;
  border-color: var(--sqf-primary);
  box-shadow: 0 0 0 3px var(--sqf-primary-glow);
}

.sqf-input--error {
  border-color: var(--sqf-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.sqf-field-error {
  display: block;
  margin-top: var(--sqf-spacing-xs);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sqf-error);
  min-height: 1.25em;
}

/* Honeypot */
.sqf-hp-field {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Form-Level Error ─────────────────────────────────────────────────────── */
.sqf-form-error {
  padding: var(--sqf-spacing-sm) var(--sqf-spacing);
  background: var(--sqf-error-light);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--sqf-radius-sm);
  color: var(--sqf-error);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: var(--sqf-spacing);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.sqf-step-nav {
  display: flex;
  align-items: center;
  gap: var(--sqf-spacing);
  flex-wrap: wrap;
  margin-top: var(--sqf-spacing-lg);
}

.sqf-step-nav--right {
  justify-content: flex-end;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sqf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--sqf-radius-sm);
  font-family: var(--sqf-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--sqf-transition), border-color var(--sqf-transition),
              color var(--sqf-transition), transform var(--sqf-transition),
              box-shadow var(--sqf-transition);
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
}

/* Primary */
.sqf-btn--primary {
  background: var(--sqf-primary);
  color: #fff;
  border-color: var(--sqf-primary);
  width: 100%;
}

@media (min-width: 480px) {
  .sqf-btn--primary {
    width: auto;
    min-width: 200px;
  }
}

.sqf-btn--primary:hover:not(:disabled) {
  background: var(--sqf-primary-hover);
  border-color: var(--sqf-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--sqf-shadow-btn-hover);
}

.sqf-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.sqf-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ghost / Back */
.sqf-btn--ghost {
  background: transparent;
  color: var(--sqf-text-muted);
  border-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sqf-btn--ghost:hover {
  color: var(--sqf-text);
  background: var(--sqf-surface-raised);
}

/* Download */
.sqf-btn--download {
  background: var(--sqf-success);
  color: #fff;
  border-color: var(--sqf-success);
  font-size: 1rem;
  padding: 1rem 2rem;
  width: 100%;
  justify-content: center;
}

.sqf-btn--download:hover {
  background: #16a34a;
  border-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}

/* Arrow icons */
.sqf-btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--sqf-transition);
}

.sqf-btn--primary:hover .sqf-btn-arrow:not(.sqf-btn-arrow--back) {
  transform: translateX(3px);
}

/* Loading state */
.sqf-spinner {
  width: 18px;
  height: 18px;
  animation: sqfSpin 0.75s linear infinite;
}

@keyframes sqfSpin {
  to { transform: rotate(360deg); }
}

/* ── Privacy Notice ──────────────────────────────────────────────────────── */
.sqf-privacy {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
  margin: var(--sqf-spacing) 0 var(--sqf-spacing-lg);
  justify-content: center;
}

.sqf-privacy svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sqf-success);
}

/* ── Success Screen ──────────────────────────────────────────────────────── */
.sqf-step--success {
  text-align: center;
  padding: var(--sqf-spacing-xl) var(--sqf-spacing);
}

@media (min-width: 480px) {
  .sqf-step--success {
    padding: 4rem var(--sqf-spacing-xl);
  }
}

.sqf-success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-success-svg {
  width: 80px;
  height: 80px;
  color: var(--sqf-success);
}

/* Circle draw animation */
.sqf-success-circle {
  stroke-dasharray: 188;
  stroke-dashoffset: 188;
  transition: stroke-dashoffset 0ms;
}

.sqf-success-svg.sqf-draw .sqf-success-circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tick draw animation */
.sqf-success-tick {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0ms;
}

.sqf-success-svg.sqf-draw .sqf-success-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 320ms cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

/* Pop-in for the whole icon */
@keyframes sqfPopIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.sqf-success-icon {
  animation: sqfPopIn 360ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.sqf-success-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sqf-text);
  margin: 0 0 var(--sqf-spacing-sm);
}

@media (min-width: 480px) {
  .sqf-success-title {
    font-size: 2rem;
  }
}

.sqf-success-message {
  font-size: 1rem;
  color: var(--sqf-text-muted);
  line-height: 1.65;
  margin: 0 auto var(--sqf-spacing-lg);
  max-width: 400px;
}

.sqf-pdf-download {
  margin-top: var(--sqf-spacing-md);
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* Benefit icons row on success screen */
.sqf-success-benefits {
  display: flex;
  justify-content: center;
  gap: var(--sqf-spacing-md);
  margin-top: var(--sqf-spacing-lg);
  flex-wrap: wrap;
}

.sqf-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sqf-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(236, 57, 13, 0.10);
  color: var(--sqf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sqf-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.sqf-benefit-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
  text-align: center;
  max-width: 80px;
}

/* ── Appliance Picker ────────────────────────────────────────────────────── */
.sqf-appliance-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sqf-spacing-md);
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-appliance-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sqf-text-muted);
  margin-bottom: var(--sqf-spacing-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sqf-appliance-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sqf-border);
}

.sqf-appliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.sqf-appliance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 1.15rem 0.9rem;
  min-height: 132px;
  justify-content: center;
  background: var(--sqf-surface-raised);
  border: 1.5px solid var(--sqf-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--sqf-transition), background var(--sqf-transition),
              box-shadow var(--sqf-transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}

.sqf-appliance-card:hover {
  border-color: var(--sqf-border-hover);
  background: var(--sqf-surface-sunken);
}

.sqf-appliance-card--selected {
  border-color: var(--sqf-primary);
  background: var(--sqf-card-selected-bg);
  box-shadow: 0 0 0 2px var(--sqf-primary-glow);
}

.sqf-appliance-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(236, 57, 13, 0.08);
  color: var(--sqf-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--sqf-transition), background var(--sqf-transition);
  flex-shrink: 0;
}

.sqf-appliance-icon svg {
  width: 24px;
  height: 24px;
}

/* ── v1.7.3: appliance quantity stepper (inside a selected card) ─────────── */
.sqf-appliance-qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.sqf-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--sqf-primary);
  background: transparent;
  color: var(--sqf-primary);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--sqf-transition), color var(--sqf-transition);
}
.sqf-qty-btn:hover { background: var(--sqf-primary); color: #fff; }
.sqf-qty-num {
  min-width: 14px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sqf-text);
}

/* ── v1.7.4: oversize note — load exceeds the standard packages ──────────── */
.sqf-oversize-note {
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--sqf-amber-soft);
  border: 1px solid var(--sqf-amber-border);
  border-radius: var(--sqf-radius-sm);
  font-size: var(--sqf-font-sm);
  line-height: 1.45;
  color: var(--sqf-text);
  font-weight: 500;
}

.sqf-appliance-card--selected .sqf-appliance-icon {
  color: var(--sqf-primary);
  background: rgba(236, 57, 13, 0.15);
}

.sqf-appliance-label {
  font-size: var(--sqf-font-xs);
  font-weight: 500;
  color: var(--sqf-text-muted);
  line-height: 1.3;
  transition: color var(--sqf-transition);
}

.sqf-appliance-card--selected .sqf-appliance-label {
  color: var(--sqf-text);
  font-weight: 600;
}

/* Recommendation box */
.sqf-recommendation {
  display: flex;
  align-items: center;
  gap: var(--sqf-spacing);
  background: var(--sqf-surface-raised);
  border: 1.5px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  padding: var(--sqf-spacing-sm) var(--sqf-spacing);
  margin-bottom: var(--sqf-spacing-md);
  transition: border-color var(--sqf-transition), background var(--sqf-transition);
  min-height: 64px;
}

.sqf-recommendation--active {
  border-color: var(--sqf-primary);
  background: var(--sqf-card-selected-bg);
}

.sqf-recommendation-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(236, 57, 13, 0.10);
  color: var(--sqf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sqf-recommendation-icon svg {
  width: 18px;
  height: 18px;
}

.sqf-recommendation-body {
  flex: 1;
  min-width: 0;
}

.sqf-recommendation-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sqf-text-muted);
  margin-bottom: var(--sqf-spacing-xs);
}

.sqf-recommendation-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sqf-text);
}

.sqf-recommendation-empty {
  font-size: 0.875rem;
  color: var(--sqf-text-muted);
}

/* ── System Summary (residential) ────────────────────────────────────────── */
.sqf-system-summary {
  background: linear-gradient(135deg, var(--sqf-amber-soft) 0%, #fffbf0 100%);
  border: 1.5px solid var(--sqf-amber-border);
  border-radius: var(--sqf-radius);
  padding: var(--sqf-spacing-md) var(--sqf-spacing);
  margin-bottom: var(--sqf-spacing-md);
  transition: opacity var(--sqf-transition);
}

.sqf-system-summary.sqf-hidden {
  display: none;
}

.sqf-system-summary-header {
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-system-summary-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sqf-text);
  margin: 0 0 var(--sqf-spacing-xs) 0;
  line-height: 1.3;
}

.sqf-system-summary-subtitle {
  font-size: 0.8rem;
  color: var(--sqf-text-muted);
  margin: 0;
  line-height: 1.4;
}

.sqf-system-summary-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sqf-spacing);
  margin-bottom: var(--sqf-spacing-md);
}

@media (min-width: 480px) {
  .sqf-system-summary-specs {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sqf-spacing-md);
  }
}

.sqf-system-spec {
  display: flex;
  flex-direction: column;
  gap: var(--sqf-spacing-xs);
}

.sqf-system-spec-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sqf-text-muted);
}

.sqf-system-spec-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sqf-text);
  line-height: 1.3;
}

.sqf-system-summary-disclaimer {
  font-size: 0.7rem;
  color: var(--sqf-text-muted);
  margin: 0;
  font-style: italic;
  line-height: 1.4;
}

/* ── Enterprise Commercial Tier Cards ────────────────────────────────────── */
.sqf-enterprise-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(236, 57, 13, 0.10);
  border: 1px solid rgba(236, 57, 13, 0.25);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sqf-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-enterprise-badge svg {
  width: 12px;
  height: 12px;
}

/* Commercial tier cards use the same .sqf-card base but with extra detail */
.sqf-card--commercial .sqf-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sqf-spacing-xs);
  margin-top: auto;
  padding-top: var(--sqf-spacing-xs);
  flex-wrap: wrap;
}

.sqf-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
}

.sqf-card-meta-item svg {
  width: 11px;
  height: 11px;
  color: var(--sqf-primary);
  flex-shrink: 0;
}

/* ── Industry Dropdown ───────────────────────────────────────────────────── */
.sqf-select {
  width: 100%;
  padding: 0.8125rem 2.5rem 0.8125rem 1rem;
  border: 1.5px solid var(--sqf-border);
  border-radius: var(--sqf-radius-sm);
  background: var(--sqf-surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23858481' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  font-size: 1rem;
  font-family: var(--sqf-font);
  font-weight: 400;
  color: var(--sqf-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--sqf-transition), box-shadow var(--sqf-transition);
}

.sqf-select:focus {
  outline: none;
  border-color: var(--sqf-primary);
  box-shadow: 0 0 0 3px var(--sqf-primary-glow);
}

/* ══════════════════════════════════════════════════════════════════════════
   Redesign v2 — Phase B components
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero band (v1.7: detached — its own rounded card ABOVE the form) ─────── */
.sqf-hero {
  position: relative;
  background: linear-gradient(135deg, var(--sqf-dark) 0%, var(--sqf-dark-2) 100%);
  color: #fff;
  padding: 2rem 2rem 1.75rem;
  /* Stand-alone card with a clear gap to the form, so it doesn't read as part
     of the step workflow (which stays static while the hero never changes). */
  border-radius: var(--sqf-radius-lg);
  margin-bottom: var(--sqf-spacing-md);
  overflow: hidden;
}

/* v1.7.5 — Once a path is chosen, drop ONLY the static stats (the wording stays
   at full size). Removing them lifts the form up so there's less to scroll.
   NOTE: extra specificity (.sqf-hero) is deliberate — it must beat the later
   `.sqf-hero .sqf-hero-stats { display: flex }` polish rule. */
.sqf-quote-started .sqf-hero .sqf-hero-stats {
  display: none;
}

.sqf-hero::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--sqf-amber-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.sqf-hero-eyebrow {
  position: relative;
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sqf-amber);
}

.sqf-hero-title {
  position: relative;
  margin: 0 0 0.5rem;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.sqf-hero-sub {
  position: relative;
  margin: 0;
  max-width: 540px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.sqf-hero-stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1.75rem;
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sqf-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sqf-hero-stat-num {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sqf-amber);
}

.sqf-hero-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .sqf-hero { padding: 1.5rem 1.25rem 1.25rem; border-radius: var(--sqf-radius); }
  .sqf-hero-title { font-size: 1.375rem; }
  .sqf-hero-stats { gap: 1rem 1.25rem; }
  .sqf-hero-stat-num { font-size: 1.125rem; }
}

/* ── Certifications strip (Step 1, under .sqf-trust) ─────────────────────── */
.sqf-certs {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--sqf-surface-sunken);
  border: 1px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: center;
}

.sqf-cert {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
  letter-spacing: 0.01em;
}

.sqf-cert svg {
  width: 14px;
  height: 14px;
  color: var(--sqf-success);
  flex-shrink: 0;
}

/* ── Appliance wattage badge ─────────────────────────────────────────────── */
.sqf-appliance-watts {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sqf-text-faint);
  letter-spacing: 0.02em;
  line-height: 1;
}

.sqf-appliance-card--selected .sqf-appliance-watts {
  color: var(--sqf-primary);
}

.sqf-select option {
  background: var(--sqf-surface);
  color: var(--sqf-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   Redesign v2 — Phase C: lead-qualifier components
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Qualifier block (the sunken card that holds each pill-group question) ── */
.sqf-qualifier-block {
  margin: 1rem 0 0;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--sqf-surface-sunken);
  border: 1px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
}

.sqf-qualifier-block + .sqf-qualifier-block {
  margin-top: 0.75rem;
}

.sqf-qualifier-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.sqf-qualifier-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sqf-text);
  letter-spacing: -0.005em;
}

.sqf-qualifier-help {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--sqf-text-muted);
  background: var(--sqf-surface-raised);
  border: 1px solid var(--sqf-border);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sqf-qualifier-sub {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sqf-text-muted);
}

/* ── Pill group + pill (single-select per group) ────────────────────────── */
.sqf-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.sqf-pill {
  font-family: var(--sqf-font);
  font-size: var(--sqf-font-sm);
  font-weight: 500;
  color: var(--sqf-text);
  background: var(--sqf-surface-raised);
  border: 1.5px solid var(--sqf-border);
  border-radius: 999px;
  padding: 0.625rem 1rem;
  cursor: pointer;
  transition: border-color var(--sqf-transition), background var(--sqf-transition), color var(--sqf-transition), transform var(--sqf-transition);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.sqf-pill:hover {
  border-color: var(--sqf-border-hover);
}

.sqf-pill:focus-visible {
  outline: 3px solid var(--sqf-primary-glow);
  outline-offset: 2px;
}

.sqf-pill--selected {
  background: var(--sqf-primary);
  color: var(--sqf-text-on-primary);
  border-color: var(--sqf-primary);
  box-shadow: 0 4px 12px -4px var(--sqf-primary-glow);
}

.sqf-pill--selected:hover {
  background: var(--sqf-primary-hover);
  border-color: var(--sqf-primary-hover);
}

/* Reduced-motion users get no transforms or shadows on the pill. */
@media (prefers-reduced-motion: reduce) {
  .sqf-pill, .sqf-pill--selected { transition: none; box-shadow: none; }
}

/* Empty/placeholder option */
.sqf-select.sqf-select--empty {
  color: var(--sqf-text-faint);
}

/* ── Slide-up fade for success panel ─────────────────────────────────────── */
@keyframes sqfSuccessIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sqf-step--success.sqf-step--active {
  animation: sqfSuccessIn 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Enterprise Premium Styling ──────────────────────────────────────────── */
.sqf-card--commercial {
  background: linear-gradient(135deg, var(--sqf-surface-raised) 0%, rgba(255, 193, 7, 0.03) 100%);
  transition: all var(--sqf-transition);
}

.sqf-card--commercial:hover {
  background: linear-gradient(135deg, var(--sqf-surface-raised) 0%, rgba(175, 53, 41, 0.05) 100%);
  border-color: var(--sqf-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sqf-card--commercial.sqf-card--selected {
  background: linear-gradient(135deg, var(--sqf-card-selected-bg) 0%, rgba(175, 53, 41, 0.12) 100%);
  border-color: var(--sqf-primary);
  box-shadow: var(--sqf-shadow-card-selected);
}

/* Premium card title styling for commercial */
.sqf-card--commercial .sqf-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.3px;
}

/* KW rating for commercial cards */
.sqf-card-kw {
  display: inline-block;
  padding: var(--sqf-spacing-xs) var(--sqf-spacing-sm);
  background: var(--sqf-amber-soft);
  color: var(--sqf-text-on-amber);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--sqf-radius-sm);
  margin-bottom: var(--sqf-spacing-xs);
}

/* Enterprise badge styling */
.sqf-enterprise-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sqf-spacing-xs);
  padding: var(--sqf-spacing-xs) var(--sqf-spacing-sm);
  background: var(--sqf-primary-soft);
  color: var(--sqf-primary);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--sqf-radius-sm);
  margin-bottom: var(--sqf-spacing-md);
}

.sqf-enterprise-badge svg {
  width: 16px;
  height: 16px;
}

/* Enhance card meta for ROI messaging */
.sqf-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sqf-spacing-xs);
  margin-top: auto;
  padding-top: var(--sqf-spacing-sm);
  font-size: 0.9rem;
  color: var(--sqf-text-muted);
}

.sqf-card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sqf-spacing-xs);
  font-weight: 500;
}

.sqf-card-meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--sqf-primary);
}

/* Premium form field styling */
.sqf-field {
  margin-bottom: var(--sqf-spacing-lg);
}

.sqf-field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--sqf-spacing-sm);
  color: var(--sqf-text);
}

.sqf-input,
.sqf-select {
  width: 100%;
  padding: var(--sqf-spacing-sm) var(--sqf-spacing);
  border: 2px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  font-family: var(--sqf-font);
  font-size: 1rem;
  transition: border-color var(--sqf-transition), box-shadow var(--sqf-transition);
}

.sqf-input:focus,
.sqf-select:focus {
  outline: none;
  border-color: var(--sqf-primary);
  box-shadow: 0 0 0 3px var(--sqf-primary-glow);
}

/* Enterprise value proposition messaging */
.sqf-enterprise-value {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sqf-spacing-md);
  margin-bottom: var(--sqf-spacing-lg);
  padding: var(--sqf-spacing-md);
  background: var(--sqf-amber-soft);
  border-radius: var(--sqf-radius);
  border-left: 4px solid var(--sqf-primary);
}

.sqf-enterprise-value-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sqf-spacing-sm);
}

.sqf-enterprise-value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--sqf-primary);
  color: white;
  border-radius: var(--sqf-radius-sm);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.2rem;
}

.sqf-enterprise-value-text {
  flex: 1;
}

.sqf-enterprise-value-title {
  font-weight: 600;
  color: var(--sqf-text);
  margin-bottom: 2px;
}

.sqf-enterprise-value-desc {
  font-size: 0.85rem;
  color: var(--sqf-text-muted);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════════
 * v1.4.0 — Solana redesign components
 *
 * Three-token system applied here:
 *   --sqf-money-positive  → applied via .sqf-money on savings / payback figures
 *   --sqf-ppa             → applied to .sqf-funding-card--ppa and its accents
 *   --sqf-primary         → unchanged brand brick-red for CTAs and selection
 *
 * Phase 1 — money utility, customer-type card prominence, suburb label, etc.
 * Phase 2 — residential house-size cards (Small / Medium / Large / Custom Quote)
 * Phase 3 — PPA-vs-Capital cards + new commercial tier cards
 * ════════════════════════════════════════════════════════════════════════════ */

/* Money utility — apply to any element holding a money-positive figure. */
.sqf-money {
  color: var(--sqf-money-positive);
  font-weight: 700;
}
.sqf-money--strong {
  background: var(--sqf-money-positive-soft);
  padding: 0.125rem 0.5rem;
  border-radius: var(--sqf-radius-sm);
}

/* Hero stats — number is money-coloured, label stays muted. */
.sqf-hero .sqf-hero-stat-num {
  color: var(--sqf-money-positive);
}

/* ── Phase 1: Step 1 — Customer-type cards, C&I primary ─────────────────── */
.sqf-card--primary {
  /*
   * The Commercial & Industrial card sits first and visually dominant
   * to reflect Solana's repositioning toward C&I.
   */
  min-height: 192px;
  box-shadow: inset 0 3px 0 var(--sqf-amber);
}
.sqf-card--primary .sqf-card-title {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.sqf-card--primary .sqf-card-icon {
  color: var(--sqf-primary);
}

/* Slight padding reduction across all selection cards to address the
 * "excessive white space" feedback. */
.sqf-card {
  padding: 22px 20px;
}
@media (max-width: 480px) {
  .sqf-card {
    padding: 18px 16px;
  }
}

/* ── Phase 1: Preferred contact radio group ─────────────────────────────── */
.sqf-preferred-contact-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.sqf-pc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--sqf-border);
  border-radius: var(--sqf-radius-sm);
  background: var(--sqf-surface-raised);
  cursor: pointer;
  transition: all var(--sqf-transition);
  font-size: var(--sqf-font-sm);
  flex: 1 1 calc(33.333% - 8px);
  min-width: 110px;
  text-align: center;
  justify-content: center;
}
.sqf-pc-option:hover {
  border-color: var(--sqf-border-hover);
  background: var(--sqf-surface-sunken);
}
.sqf-pc-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sqf-pc-option--selected {
  border-color: var(--sqf-primary);
  background: var(--sqf-card-selected-bg);
  box-shadow: 0 0 0 2px var(--sqf-primary-glow);
  font-weight: 600;
}
.sqf-pc-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sqf-pc-icon--whatsapp { color: #25D366; }
.sqf-pc-icon--phone    { color: var(--sqf-primary); }
.sqf-pc-icon--email    { color: var(--sqf-text-muted); }

/* ── Phase 2: Residential house-size cards ──────────────────────────────── */
.sqf-house-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: var(--sqf-spacing) 0;
}
@media (max-width: 480px) {
  .sqf-house-cards {
    grid-template-columns: 1fr;
  }
}

.sqf-house-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--sqf-surface-raised);
  border: 2px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  cursor: pointer;
  transition: all var(--sqf-transition);
}
.sqf-house-card:hover {
  border-color: var(--sqf-border-hover);
  background: var(--sqf-surface-sunken);
}
.sqf-house-card--selected {
  border-color: var(--sqf-primary);
  background: var(--sqf-card-selected-bg);
  box-shadow: var(--sqf-shadow-card-selected);
}
.sqf-house-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sqf-house-card-icon {
  width: 36px;
  height: 36px;
  color: var(--sqf-primary);
  margin-bottom: 4px;
}
.sqf-house-card-title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--sqf-text);
  line-height: 1.25;
}
.sqf-house-card-sub {
  font-size: var(--sqf-font-xs);
  color: var(--sqf-text-muted);
  line-height: 1.4;
}
.sqf-house-card-occupancy,
.sqf-house-card-kwh {
  font-size: 0.8125rem;
  color: var(--sqf-text-muted);
  margin-top: 2px;
}
.sqf-house-card-price-range {
  margin-top: 8px;
  font-size: 0.875rem;
}

/* The fourth card (Custom Quote) is intentionally de-emphasized
 * so the simple path looks like the default. */
.sqf-house-card--ghost {
  background: var(--sqf-surface-sunken);
  border-style: dashed;
}
.sqf-house-card--ghost .sqf-house-card-title {
  color: var(--sqf-text-muted);
}
.sqf-house-card--ghost:hover {
  background: var(--sqf-surface-raised);
}
.sqf-house-card--ghost.sqf-house-card--selected {
  background: var(--sqf-card-selected-bg);
  border-style: solid;
}

/* ── Phase 3: Funding-type cards (PPA vs Capital) ───────────────────────── */
.sqf-funding-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: var(--sqf-spacing) 0;
}
@media (max-width: 600px) {
  .sqf-funding-cards {
    grid-template-columns: 1fr;
  }
}

.sqf-funding-card {
  position: relative;
  padding: 24px 22px;
  background: var(--sqf-surface-raised);
  border: 2px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  cursor: pointer;
  transition: all var(--sqf-transition);
}
.sqf-funding-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sqf-funding-card:hover {
  border-color: var(--sqf-border-hover);
}
.sqf-funding-card--selected {
  border-color: var(--sqf-primary);
  background: var(--sqf-card-selected-bg);
  box-shadow: var(--sqf-shadow-card-selected);
}

/* PPA card — purple accent (visually distinct from Capital). */
.sqf-funding-card--ppa {
  box-shadow: inset 0 3px 0 var(--sqf-ppa);
}
.sqf-funding-card--ppa.sqf-funding-card--selected {
  border-color: var(--sqf-ppa);
  background: var(--sqf-ppa-soft);
  box-shadow: 0 0 0 2px var(--sqf-ppa), 0 8px 32px var(--sqf-ppa-glow);
}

.sqf-funding-card-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--sqf-text);
  margin-bottom: 6px;
}
.sqf-funding-card-body {
  font-size: var(--sqf-font-sm);
  color: var(--sqf-text-muted);
  line-height: 1.5;
}
.sqf-funding-card-savings {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--sqf-money-positive-soft);
  color: var(--sqf-money-positive);
  border-radius: var(--sqf-radius-sm);
  font-weight: 600;
  font-size: var(--sqf-font-sm);
}
.sqf-funding-card-trust {
  margin-top: 12px;
  font-size: var(--sqf-font-xs);
  color: var(--sqf-text-faint);
  font-style: italic;
}

/* PPA badge — purple pill used in admin and on the funding-flow indicator. */
.sqf-ppa-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--sqf-ppa);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Phase 3: Commercial tier cards (new <50 / 50-500 / 500+) ───────────── */
.sqf-tier-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: var(--sqf-spacing) 0;
}
@media (min-width: 720px) {
  .sqf-tier-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sqf-tier-card {
  position: relative;
  padding: 24px 22px;
  background: var(--sqf-surface-raised);
  border: 2px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
  cursor: pointer;
  transition: all var(--sqf-transition);
}
.sqf-tier-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sqf-tier-card:hover {
  border-color: var(--sqf-border-hover);
}
.sqf-tier-card--selected {
  border-color: var(--sqf-primary);
  background: var(--sqf-card-selected-bg);
  box-shadow: var(--sqf-shadow-card-selected);
}
.sqf-tier-card-kw {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  background: var(--sqf-amber-soft);
  color: var(--sqf-text);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.sqf-tier-card-title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--sqf-text);
  margin-bottom: 6px;
}
.sqf-tier-card-fit {
  font-size: var(--sqf-font-xs);
  color: var(--sqf-text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.sqf-tier-card-value {
  font-size: var(--sqf-font-sm);
  color: var(--sqf-money-positive);
  font-weight: 600;
}
.sqf-tier-card-payback {
  display: block;
  margin-top: 4px;
  font-size: var(--sqf-font-xs);
  color: var(--sqf-text-muted);
  font-weight: 400;
}
.sqf-tier-card--popular {
  /* The 50–500kW tier gets a small popular flag — Solana said "most common". */
}
.sqf-tier-card--popular::before {
  content: "Most common";
  position: absolute;
  top: -10px;
  left: 18px;
  padding: 3px 10px;
  background: var(--sqf-amber);
  color: var(--sqf-text-on-amber);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Phase 3: PPA-only fields on Step 3 (decision-role + spend-band) ───── */
.sqf-ppa-fields {
  margin-top: var(--sqf-spacing);
  padding: 16px;
  background: var(--sqf-ppa-soft);
  border-left: 3px solid var(--sqf-ppa);
  border-radius: var(--sqf-radius-sm);
}
.sqf-ppa-fields-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: var(--sqf-font-sm);
  color: var(--sqf-ppa);
}

/* ════════════════════════════════════════════════════════════════════════════
 * v1.4.1 — Polish pass after Solana review (2026-05-28)
 *
 * - Hero stats spread across the full row (left / center / right) and bigger
 * - Step 1 cards: bigger headings + body, larger icon, tighter padding
 * - Funding cards (Step 2 commercial): bigger title + body
 * - Commercial tier cards (Step 3): bigger title + body + payback line
 * - House-size cards (Step 2 residential): bigger illustration, savings line,
 *   lifestyle hint, tighter padding
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Hero stats — spread across the width, bigger numbers ─────────────── */
.sqf-hero .sqf-hero-stats {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  margin-top: 18px;
}
.sqf-hero .sqf-hero-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sqf-hero .sqf-hero-stat:nth-child(2) {
  align-items: center;
  text-align: center;
}
.sqf-hero .sqf-hero-stat:nth-child(3) {
  align-items: flex-end;
  text-align: right;
}
.sqf-hero .sqf-hero-stat-num {
  font-size: 1.875rem;          /* was ~1.5rem */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sqf-hero .sqf-hero-stat-label {
  font-size: 0.875rem;          /* was ~0.75rem */
  opacity: 0.85;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .sqf-hero .sqf-hero-stats {
    gap: 12px;
  }
  .sqf-hero .sqf-hero-stat-num {
    font-size: 1.5rem;
  }
}

/* ─── Step 1 cards (Residential / C&I) — larger text, tighter padding ──── */
.sqf-cards .sqf-card {
  padding: 24px 22px 22px;
  gap: 12px;                    /* tighter vertical rhythm */
}
.sqf-cards .sqf-card-icon {
  width: 56px;                  /* was ~36–40px */
  height: 56px;
  font-size: 1.75rem;
  padding: 12px;
}
.sqf-cards .sqf-card-icon svg {
  width: 100%;
  height: 100%;
}
.sqf-cards .sqf-card-title {
  font-size: 1.375rem;          /* was 1rem (1.125 on primary) */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.sqf-cards .sqf-card-desc {
  font-size: 1rem;              /* was ~0.8125rem */
  line-height: 1.45;
  color: var(--sqf-text);
  opacity: 0.85;
}
.sqf-cards .sqf-card-benefit {
  font-size: 0.9375rem;         /* was ~0.875rem */
  margin-top: auto;             /* push benefit line to bottom — collapses dead whitespace */
  padding-top: 12px;
}
.sqf-cards .sqf-card--primary .sqf-card-title {
  font-size: 1.5rem;            /* C&I title a notch larger to signal primary */
}

@media (max-width: 480px) {
  .sqf-cards .sqf-card-title { font-size: 1.25rem; }
  .sqf-cards .sqf-card--primary .sqf-card-title { font-size: 1.35rem; }
  .sqf-cards .sqf-card-desc { font-size: 0.95rem; }
}

/* ─── Funding cards (Step 2 commercial) — bigger text ─────────────────── */
.sqf-funding-card-title {
  font-size: 1.375rem !important;
  line-height: 1.2;
}
.sqf-funding-card-body {
  font-size: 1rem !important;
  line-height: 1.5;
  margin-top: 8px;
}
.sqf-funding-card-savings {
  font-size: 1rem !important;
}

/* ─── Commercial tier cards (Step 3) — bigger text ────────────────────── */
.sqf-card--commercial .sqf-card-title {
  font-size: 1.25rem !important;
}
.sqf-card--commercial .sqf-card-desc {
  font-size: 0.95rem !important;
  line-height: 1.5;
  color: var(--sqf-text);
  opacity: 0.85;
}
.sqf-card--commercial .sqf-card-kw {
  font-size: 0.75rem !important;
  padding: 4px 12px !important;
}
.sqf-card--commercial .sqf-card-meta-item {
  font-size: 0.9375rem !important;
}

/* ─── House-size cards (Step 2 residential) — bigger illustration + new lines ─ */
.sqf-house-card {
  padding: 24px 22px;
  gap: 8px;
}
.sqf-house-card-icon {
  width: 60px;                  /* was 36px */
  height: 60px;
  margin-bottom: 8px;
}
.sqf-house-card-title {
  font-size: 1.25rem;           /* was 1.0625rem */
  font-weight: 700;
}
.sqf-house-card-sub {
  font-size: 0.9375rem;         /* was ~0.875rem */
}
.sqf-house-card-occupancy,
.sqf-house-card-kwh {
  font-size: 0.875rem;
}
.sqf-house-card-savings {
  /* v1.4.1 — green monthly savings figure (settings-driven) */
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  background: var(--sqf-money-positive-soft);
  color: var(--sqf-money-positive);
  border-radius: var(--sqf-radius-sm);
  font-weight: 700;
  font-size: 0.9375rem;
}
.sqf-house-card-powers {
  /* v1.4.1 — lifestyle hint, "what it powers" */
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--sqf-text-muted);
  line-height: 1.4;
}
.sqf-house-card-powers strong {
  color: var(--sqf-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  display: block;
  margin-bottom: 2px;
}

/* Custom Quote card stays ghost — title/sub bigger to match */
.sqf-house-card--ghost .sqf-house-card-title { font-size: 1.125rem; }
.sqf-house-card--ghost .sqf-house-card-sub   { font-size: 0.875rem; }

@media (max-width: 480px) {
  .sqf-house-card-icon { width: 48px; height: 48px; }
  .sqf-house-card-title { font-size: 1.125rem; }
}

/* ─── v1.4.1 — Step 4 page split — Continue-button readiness pulse ─────── */
.sqf-btn--ready {
  animation: sqfBtnReady 1.4s ease-in-out 1;
}
@keyframes sqfBtnReady {
  0%   { box-shadow: 0 0 0 0 var(--sqf-primary-glow); }
  50%  { box-shadow: 0 0 0 6px var(--sqf-primary-glow); }
  100% { box-shadow: 0 0 0 0 var(--sqf-primary-glow); }
}

/* ─── v1.4.1 — Step 4 sub-pages — same look, just toggled visibility ──── */
.sqf-step4-page {
  /* Pages share the same outer wrapper styling — no extra surface treatment. */
}
.sqf-step4-page.sqf-hidden { display: none !important; }

.sqf-label-hint {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--sqf-text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.sqf-field-row--ownership { /* residential-only — toggled by JS */ }
.sqf-field-row--spend    { /* commercial-only — toggled by JS */ }

/* ════════════════════════════════════════════════════════════════════════════
 * v1.4.2 — Polish pass after Solana review #2 (2026-05-28)
 *
 * - Step 1 cards: new fact line (green) between description and benefit,
 *   benefit line muted (was brick-red), margin-top:auto removed so the
 *   stack reads compactly without the awkward whitespace gap
 * - Funding cards: new CAPITAL pill badge to balance the PPA badge
 * - 'Most common' badge re-targeted at .sqf-card--popular
 * - Residential Page A 'Your matched system' panel
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Step 1 cards: new fact line + benefit reset ──────────────────────── */
.sqf-cards .sqf-card-fact {
  display: block;
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--sqf-money-positive-soft);
  color: var(--sqf-money-positive);
  border-radius: var(--sqf-radius-sm);
  font-weight: 700;
  font-size: 0.9375rem;
  align-self: flex-start;
}
.sqf-cards .sqf-card-benefit {
  /* v1.4.2 — undo the margin-top:auto trick. Benefit now sits compactly
   * right after the fact line. Muted colour (was inheriting brick-red). */
  margin-top: 8px !important;
  color: var(--sqf-text-muted) !important;
  font-style: italic;
  font-size: 0.875rem !important;
}

/* ─── Funding cards: CAPITAL badge (mirrors the PPA purple pill) ───────── */
.sqf-capital-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--sqf-text-muted);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sqf-funding-card--capital {
  /* Subtle neutral top-stripe to mirror the PPA purple stripe. */
  box-shadow: inset 0 3px 0 var(--sqf-border-hover);
}

/* ─── 'Most common' tag on Medium tier (re-targeted) ────────────────────── */
.sqf-card.sqf-card--popular {
  position: relative;
}
.sqf-card.sqf-card--popular .sqf-card-badge {
  /* Slightly more prominent than the v1.3 default — proper top-right tag. */
  background: var(--sqf-amber);
  color: var(--sqf-text-on-amber);
  font-size: 0.6875rem;
  padding: 4px 10px;
  letter-spacing: 0.06em;
}

/* ─── Residential Page A: 'Your matched system' panel ──────────────────── */
.sqf-matched-system {
  margin-bottom: var(--sqf-spacing-md);
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--sqf-amber-soft) 0%, var(--sqf-surface-raised) 100%);
  border: 1px solid var(--sqf-amber-border);
  border-radius: var(--sqf-radius);
}
.sqf-matched-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sqf-matched-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sqf-text-muted);
}
.sqf-matched-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sqf-text);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.sqf-matched-sub {
  font-size: var(--sqf-font-sm);
  color: var(--sqf-text-muted);
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.sqf-matched-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .sqf-matched-specs { grid-template-columns: 1fr; }
}
.sqf-matched-spec {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--sqf-radius-sm);
}
.sqf-matched-spec-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sqf-text-muted);
  margin-bottom: 2px;
}
.sqf-matched-spec-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sqf-text);
}
.sqf-matched-spec--savings .sqf-matched-spec-value {
  color: var(--sqf-money-positive);
}


/* ════════════════════════════════════════════════════════════════════════════
 * v1.4.3 — DARK CARDS THEME
 *
 * All selection cards (Step 1 type, Step 2 funding, Step 2 house, Step 3
 * commercial tier) flip to a dark surface matching the hero strip
 * (--sqf-dark: #1d2327). Text inverts to white, accents brighten to remain
 * visible on the new background. Brick-red selection + glow gets MORE
 * dramatic on dark, which is the whole point.
 *
 * Form container, inputs, and step 4 fields STAY light (Solana's choice).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Step 1 cards (Residential + C&I) ─────────────────────────────────── */
.sqf-cards .sqf-card {
  background: var(--sqf-dark);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.sqf-cards .sqf-card:hover {
  background: var(--sqf-dark-2);
  border-color: rgba(255, 255, 255, 0.18);
}
.sqf-cards .sqf-card-title {
  color: #ffffff;
}
.sqf-cards .sqf-card-desc {
  color: rgba(255, 255, 255, 0.78);
}
.sqf-cards .sqf-card-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.sqf-cards .sqf-card-icon svg {
  color: #ffffff;
}
.sqf-cards .sqf-card-benefit {
  color: rgba(255, 255, 255, 0.55) !important;
}
.sqf-cards .sqf-card-fact {
  /* Green fact line stays green but brighter on dark. */
  background: rgba(46, 200, 80, 0.18);
  color: #5fd47c;
}
/* Primary (C&I) gets an even more dramatic top stripe. */
.sqf-cards .sqf-card--primary {
  box-shadow: inset 0 4px 0 var(--sqf-amber);
}
.sqf-cards .sqf-card.sqf-card--selected {
  border-color: var(--sqf-primary);
  background: rgba(175, 53, 41, 0.18);
  box-shadow: 0 0 0 2px var(--sqf-primary), 0 12px 40px rgba(175, 53, 41, 0.5);
}

/* ─── House-size cards (Step 2 residential) ────────────────────────────── */
.sqf-house-card {
  background: var(--sqf-dark);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.sqf-house-card:hover {
  background: var(--sqf-dark-2);
  border-color: rgba(255, 255, 255, 0.18);
}
.sqf-house-card-title { color: #ffffff; }
.sqf-house-card-sub,
.sqf-house-card-occupancy,
.sqf-house-card-kwh {
  color: rgba(255, 255, 255, 0.72);
}
.sqf-house-card-icon {
  color: #ffffff;
}
.sqf-house-card-powers {
  color: rgba(255, 255, 255, 0.65);
}
.sqf-house-card-powers strong {
  color: rgba(255, 255, 255, 0.9);
}
.sqf-house-card-savings {
  background: rgba(46, 200, 80, 0.18);
  color: #5fd47c;
}
.sqf-house-card--ghost {
  background: var(--sqf-dark-2);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.15);
}
.sqf-house-card--ghost .sqf-house-card-title {
  color: rgba(255, 255, 255, 0.75);
}
.sqf-house-card--ghost:hover {
  background: var(--sqf-dark);
  border-color: rgba(255, 255, 255, 0.3);
}
.sqf-house-card--selected {
  border-color: var(--sqf-primary);
  background: linear-gradient(0deg, rgba(175, 53, 41, 0.28), rgba(175, 53, 41, 0.28)), var(--sqf-dark);
  box-shadow: 0 0 0 2px var(--sqf-primary), 0 12px 40px rgba(175, 53, 41, 0.5);
}

/* ─── Funding cards (Step 2 commercial — PPA + Capital) ────────────────── */
.sqf-funding-card {
  background: var(--sqf-dark);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.sqf-funding-card:hover {
  background: var(--sqf-dark-2);
  border-color: rgba(255, 255, 255, 0.18);
}
.sqf-funding-card-title { color: #ffffff; }
.sqf-funding-card-body {
  color: rgba(255, 255, 255, 0.78);
}
.sqf-funding-card-trust {
  color: rgba(255, 255, 255, 0.45);
}
.sqf-funding-card-savings {
  background: rgba(46, 200, 80, 0.18);
  color: #5fd47c;
}
.sqf-funding-card--ppa.sqf-funding-card--selected {
  border-color: var(--sqf-ppa);
  background: linear-gradient(0deg, rgba(107, 78, 168, 0.30), rgba(107, 78, 168, 0.30)), var(--sqf-dark);
  box-shadow: 0 0 0 2px var(--sqf-ppa), 0 12px 40px rgba(107, 78, 168, 0.5);
}
.sqf-funding-card--capital.sqf-funding-card--selected {
  border-color: var(--sqf-primary);
  background: linear-gradient(0deg, rgba(175, 53, 41, 0.28), rgba(175, 53, 41, 0.28)), var(--sqf-dark);
  box-shadow: 0 0 0 2px var(--sqf-primary), 0 12px 40px rgba(175, 53, 41, 0.5);
}
/* PPA / CAPITAL badges stay coloured — they need the contrast. */

/* ─── Commercial tier cards (Step 3) ───────────────────────────────────── */
.sqf-card--commercial {
  background: var(--sqf-dark) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.sqf-card--commercial:hover {
  background: var(--sqf-dark-2) !important;
}
.sqf-card--commercial .sqf-card-title { color: #ffffff !important; }
.sqf-card--commercial .sqf-card-desc {
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
}
.sqf-card--commercial .sqf-card-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.sqf-card--commercial .sqf-card-kw {
  background: rgba(255, 193, 7, 0.22);
  color: var(--sqf-amber);
}
.sqf-card--commercial .sqf-card-meta-item.sqf-money {
  color: #5fd47c !important;
}
.sqf-card--commercial .sqf-card-meta-item {
  color: rgba(255, 255, 255, 0.78);
}
.sqf-card--commercial.sqf-card--selected {
  border-color: var(--sqf-primary) !important;
  background: linear-gradient(0deg, rgba(175, 53, 41, 0.28), rgba(175, 53, 41, 0.28)), var(--sqf-dark) !important;
  box-shadow: 0 0 0 2px var(--sqf-primary), 0 12px 40px rgba(175, 53, 41, 0.5) !important;
}

/* ─── Selection checkmark on dark cards ────────────────────────────────── */
.sqf-cards .sqf-card-check,
.sqf-house-card .sqf-card-check {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.sqf-card--selected .sqf-card-check,
.sqf-house-card--selected .sqf-card-check {
  background: var(--sqf-primary);
  border-color: var(--sqf-primary);
}

/* ─── v1.4.3 — Page A header softening ─────────────────────────────────── */
.sqf-field-sub {
  font-size: 0.8125rem;
  color: var(--sqf-text-muted);
  margin: 4px 0 8px 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ─── v1.5.1 — Uploaded house illustrations sit in place of the SVG ─────── */
.sqf-house-card-illustration {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: var(--sqf-radius-sm);
  margin-bottom: 8px;
}
.sqf-house-card-icon img.sqf-house-card-illustration {
  /* Replaces the 60×60 SVG slot — let the illustration breathe a bit more. */
  width: 100%;
  max-width: 180px;
  max-height: 160px;
  object-fit: contain;
}

/* ─── v1.6.2: Commercial tier-card illustrations (uploaded images) ──────── */
.sqf-tier-illustration {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  border-radius: var(--sqf-radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.sqf-tier-card-illustration {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 700px) {
  .sqf-tier-card-illustration { height: 150px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v1.5.2 — House-card illustrations move to top-right + enlarged
 *
 * Was: 60×60 SVG centred at the top of the card with text below.
 * Now: ~110×110 illustration absolute-positioned in the top-right corner
 *      so the text reads cleanly down the left side.
 * ════════════════════════════════════════════════════════════════════════════ */

.sqf-house-card {
  position: relative;
  padding-right: 130px;          /* Room for the corner illustration. */
  min-height: 180px;             /* Stops short cards from compressing. */
}

.sqf-house-card .sqf-house-card-icon {
  /* Lift the icon out of the flex flow and pin it to the corner. */
  position: absolute;
  top: 16px;
  right: 16px;
  width: 110px;
  height: 110px;
  margin-bottom: 0;              /* No longer pushes down on text. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sqf-house-card .sqf-house-card-icon svg {
  width: 100%;
  height: 100%;
}

.sqf-house-card-icon img.sqf-house-card-illustration {
  /* Uploaded illustration fills the corner slot. object-fit keeps any aspect
   * ratio intact so a vertical family illustration doesn't get squashed. */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin-bottom: 0;
  object-fit: contain;
}

/* Custom Quote ghost card matches — the document icon still pins to corner. */
.sqf-house-card--ghost {
  padding-right: 130px;
}
.sqf-house-card--ghost .sqf-house-card-icon {
  opacity: 0.7;
}

/* Mobile: stack illustration above text again (corner placement breaks on narrow screens). */
@media (max-width: 480px) {
  .sqf-house-card {
    padding-right: 20px;
    min-height: 0;
  }
  .sqf-house-card .sqf-house-card-icon {
    position: static;
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
  }
  .sqf-house-card--ghost {
    padding-right: 20px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v1.6.3 — Full-bleed banner illustrations (residential + commercial)
 *
 * Uploaded images span the full top of the card, edge-to-edge, at a fixed 3:2
 * aspect (matches the 1200×800 source art → no stretch, minimal crop). SVG-only
 * cards (the Custom Quote ghost, or any tier left without an image) keep the
 * original icon treatment, guarded by :has(img) / the template's conditional.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Residential house cards — image cards become a top banner ──────────── */
.sqf-house-card:has(img.sqf-house-card-illustration) {
  padding-right: 22px;          /* undo the 130px corner-thumbnail reservation */
  min-height: 0;
}
.sqf-house-card:has(img.sqf-house-card-illustration) .sqf-house-card-icon {
  position: static;
  width: auto;
  height: auto;
  margin: -24px -22px 14px;     /* negate card padding → full-bleed */
  aspect-ratio: 3 / 2;
  border-radius: var(--sqf-radius) var(--sqf-radius) 0 0;
  overflow: hidden;
  display: block;
}
.sqf-house-card:has(img.sqf-house-card-illustration) .sqf-house-card-illustration {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

/* ── Commercial tier cards — banner spans the full card top ─────────────── */
.sqf-card--commercial .sqf-tier-illustration {
  margin: -22px -20px 14px;     /* negate card padding → full-bleed */
  width: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--sqf-radius) var(--sqf-radius) 0 0;
  background: transparent;
}
.sqf-card--commercial .sqf-tier-card-illustration {
  width: 100%;
  height: 100%;
}
/* Move the select indicator off the artwork onto the dark card body. */
.sqf-card--commercial .sqf-card-check {
  top: auto;
  bottom: 16px;
  right: 16px;
}

/* ── v1.7.2: System spec list — used by the matched panel, the custom-quote
 *    summary, and the contact-page quote summary (one shared layout). ──────── */
.sqf-spec-list {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.sqf-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sqf-border);
  font-size: var(--sqf-font-sm);
  line-height: 1.4;
}
.sqf-spec-row:last-child { border-bottom: none; }
.sqf-spec-k {
  color: var(--sqf-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.sqf-spec-v {
  color: var(--sqf-text);
  font-weight: 600;
  text-align: right;
}
.sqf-spec-row--savings {
  margin-top: 4px;
  border-top: 2px solid var(--sqf-border);
  border-bottom: none;
  padding-top: 11px;
}
.sqf-spec-row--savings .sqf-spec-v { color: var(--sqf-money-positive); }

/* Quote summary card on the contact page (below the submit button). */
.sqf-quote-summary {
  margin-top: var(--sqf-spacing-lg);
  padding: 18px 20px;
  background: var(--sqf-surface-raised);
  border: 1px solid var(--sqf-border);
  border-radius: var(--sqf-radius);
}
.sqf-quote-summary-header {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sqf-text);
}
.sqf-quote-summary-note,
.sqf-matched-disclaimer {
  margin: 10px 0 0;
  font-size: var(--sqf-font-xs);
  color: var(--sqf-text-faint);
  font-style: italic;
}