/* SunSetup — Hero, Quiz, Forms, Results & Responsive */

/* === MOTION ===
   Every duration that JavaScript also needs to know about lives here, so the
   two can't drift apart. Exits are quicker than entrances — the thing you're
   leaving should get out of the way faster than the thing you're going to
   arrives, or the transition reads as sluggish in both directions. */
:root {
  --t-exit:  190ms;   /* section leaving  */
  --t-enter: 300ms;   /* section arriving */
  --t-step:  200ms;   /* one half of a quiz step change; JS reads this */
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-exit: 0ms; --t-enter: 0ms; --t-step: 0ms; }
}

/* === HERO === */
/* padding-bottom keeps the card clear of the fixed footer nav on short screens */
.hero-content {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:20px 20px 52px; position:relative; z-index:1;
  width:100%;
}

/* Frosted glass panel behind hero text for readability */
.hero-text {
  background: rgba(2, 44, 82, 0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-xl);
  padding: 36px 40px 32px;
  /* 700px keeps the headline and the sub-headline each on one line at desktop */
  width:100%; max-width:700px; margin:0 auto;
  animation: fadeSlideUp 0.6s ease both;
}

.hero-brand {
  font-family:var(--font-d); font-size:1.1rem; font-weight:700;
  color:var(--gold-light); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px;
  animation: fadeSlideUp 0.8s ease both;
}
.hero-title {
  font-family:var(--font-d); font-size:clamp(2rem,6vw,3.5rem); font-weight:800;
  line-height:1.15; margin-bottom:10px; color:#fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.25), 0 0 40px rgba(0,0,0,0.1);
  animation: fadeSlideUp 0.8s 0.15s ease both;
}
.hero-subtitle {
  font-size:clamp(1rem,2.5vw,1.2rem); color:rgba(255,255,255,0.95);
  margin:0 auto 28px; max-width:100%;
  text-shadow: 0 1px 8px rgba(0,0,0,0.15);
  animation: fadeSlideUp 0.8s 0.3s ease both;
}
.hero-microcopy {
  margin-top:18px; font-size:0.85rem; color:rgba(255,255,255,0.85);
  animation: fadeSlideUp 0.8s 0.75s ease both;
}
.hero-microcopy strong { color:#fff; }

/* Trust Bar */
.trust-bar {
  display:flex; align-items:center; justify-content:center; gap:20px;
  background: rgba(255,255,255,0.15); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.25); border-radius:var(--r-lg);
  padding:16px 28px; margin:0 auto 28px; width:fit-content; max-width:100%;
  animation: fadeSlideUp 0.8s 0.45s ease both;
}
.trust-item { display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto; }
.trust-icon { color:var(--gold-light); margin-bottom:2px; }
.trust-number { font-family:var(--font-d); font-weight:800; font-size:1.3rem; color:#fff; }
.trust-label { font-size:0.72rem; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.trust-divider { width:1px; height:40px; background:rgba(255,255,255,0.2); flex:0 0 1px; }

/* Hero CTA gets its own centred row (inline-flex let it share a line with the
   partner links at wide viewports). */
.hero-text > .btn { display:flex; width:fit-content; max-width:100%; margin:0 auto; }

@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* === RESUME BANNER ===
   Ten steps is long enough that people get interrupted. */
.resume-banner {
  display:flex; align-items:center; gap:10px;
  width:fit-content; max-width:100%;
  margin:20px auto 0; padding:10px 10px 10px 16px;
  background:rgba(255,255,255,0.94);
  border:1px solid rgba(245,158,11,0.5); border-radius:999px;
  box-shadow:0 8px 26px rgba(15,40,80,0.16);
  animation: fadeSlideUp 0.5s 0.6s ease both;
}
.resume-banner[hidden] { display:none; }
.resume-banner__icon { display:flex; color:var(--gold-dark); flex-shrink:0; }
.resume-banner__text { font-size:0.86rem; color:var(--text-m); }
.resume-banner__text strong { color:var(--text); font-weight:700; }
.resume-banner__go {
  padding:8px 16px; border:none; border-radius:999px;
  background:linear-gradient(135deg, var(--gold), var(--orange));
  color:#1a1a2e; font-family:var(--font); font-size:0.85rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.resume-banner__go:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(251,191,36,0.5); }
.resume-banner__x {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0;
  background:none; border:none; border-radius:50%;
  color:var(--text-d); cursor:pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.resume-banner__x:hover { background:rgba(0,0,0,0.06); color:var(--text); }

/* === PARTNER LINK (hero bottom) ===
   display:flex + width:fit-content keeps each link on its own centred row —
   as inline-flex they packed onto one line beside the CTA on wide desktops. */
.partner-link {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:fit-content; max-width:100%;
  margin:22px auto 0; padding:10px 18px;
  background:rgba(255,255,255,0.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.25); border-radius:999px;
  color:rgba(255,255,255,0.9); font-size:0.88rem; font-family:var(--font); font-weight:500;
  cursor:pointer; text-decoration:none;
  animation: fadeSlideUp 0.8s 0.9s ease both;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.partner-link:hover {
  background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.4);
  transform:translateY(-1px);
}
.partner-link strong { color:var(--gold-light); font-weight:700; margin-left:4px; }
.partner-link-icon { display:flex; flex-shrink:0; color:var(--gold-light); }
.partner-link--reverse { margin-top:14px; }
.partner-link--reverse strong { color:rgba(255,255,255,0.95); }

/* === PARTNER HERO === */
.hero-text--partner {
  background: rgba(30, 15, 55, 0.38);
  border-color: rgba(255,255,255,0.22);
}
.hero-brand--partner { color:#fde68a; }

.partner-badge {
  position:relative; width:160px; height:160px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  animation: sunRise 1.2s cubic-bezier(0.16,1,0.3,1) both;
}
.sun-system--partner { width:100%; height:100%; }
.partner-wrench {
  position:absolute; bottom:4px; right:4px;
  background:var(--gold-light); border-radius:50%;
  padding:8px; box-shadow:0 4px 14px rgba(0,0,0,0.2);
  animation: wrenchWiggle 3s ease-in-out infinite;
}
@keyframes wrenchWiggle {
  0%,100% { transform:rotate(-8deg); }
  50%     { transform:rotate(12deg); }
}

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px; border:none; border-radius:var(--r-md);
  font-family:var(--font); font-size:1rem; font-weight:600;
  cursor:pointer; outline:none; position:relative; overflow:hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:focus-visible { box-shadow:0 0 0 3px rgba(245,158,11,0.5); }

.btn--primary {
  background:linear-gradient(135deg, var(--gold), var(--orange));
  color:#1a1a2e; box-shadow:0 4px 20px rgba(251,191,36,0.35);
}
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(251,191,36,0.5); }
.btn--primary:active { transform:translateY(0); }

.btn--lg { padding:18px 42px; font-size:1.1rem; border-radius:var(--r-lg); }

.btn--ghost { background:transparent; color:var(--text-m); border:1px solid var(--border); }
.btn--ghost:hover { color:var(--text); border-color:rgba(0,0,0,0.15); background:rgba(0,0,0,0.03); }

/* flex:1, not width:100% — at full width it overlapped the Back button, which
   is always present on the final step. */
.btn--submit { flex:1 1 auto; min-width:0; margin-left:12px; padding:16px 28px; font-size:1.05rem; }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none!important; }

.btn-arrow { transition:transform 0.2s ease; }
.btn:hover .btn-arrow { transform:translateX(3px); }

/* Ripple Effect */
.btn--ripple .ripple {
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.35);
  transform:scale(0); animation: rippleOut 0.6s ease-out forwards; pointer-events:none;
}
@keyframes rippleOut { to { transform:scale(4); opacity:0; } }

/* === QUIZ SECTION ===
   --quiz-w is the single content width shared by the header, progress bar,
   card and footer so every edge lines up on desktop. */
/* Clear both fixed bars. `margin:auto` on the child then centres it in the
   space that's left, so content can never sit under the header or footer. */
:root { --footer-h: 44px; }
#hero, #partners, #disqualified, #thankyou {
  padding-top:64px;
  padding-bottom:calc(var(--footer-h) + 12px);
}

#quiz {
  --quiz-w: 560px;
  justify-content:flex-start; padding:0 20px;
  height:100dvh; overflow-y:auto;
}

/* padding-top clears the mini sun's glow, which is 220% of its box. */
.quiz-header {
  width:100%; padding:34px 0 0; position:relative; z-index:3;
  flex:0 0 auto;
}
.quiz-header-top {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 auto 16px; width:100%; max-width:var(--quiz-w);
}
/* gap clears the mini sun's rays, which extend past its 48px box */
.quiz-logo { display:flex; align-items:center; gap:20px; }
.quiz-logo-text { font-family:var(--font-d); font-weight:700; font-size:1rem; color:var(--gold-dark); letter-spacing:1px; }
.step-counter {
  font-size:0.82rem; font-weight:600; color:var(--text-d);
  background: rgba(0,0,0,0.04); padding:6px 14px; border-radius:20px;
  letter-spacing:0.3px;
}

/* Progress Bar */
.progress-track {
  width:100%; max-width:var(--quiz-w); height:8px;
  background:rgba(0,0,0,0.06); border-radius:8px; margin:0 auto;
  overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,0.08);
}
.progress-fill {
  height:100%; width:10%; border-radius:8px;
  background:linear-gradient(90deg, var(--gold-light), var(--gold), var(--orange));
  transition:width 0.6s cubic-bezier(0.16,1,0.3,1);
  position:relative;
  box-shadow: 0 0 12px rgba(251,191,36,0.4);
}
.progress-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation:shimmer 2s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* Quiz Card */
.quiz-body {
  flex:0 1 auto; margin-top:auto;
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:20px 0 0;
}
.quiz-card {
  width:100%; max-width:var(--quiz-w); min-height:280px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--r-xl);
  padding: 0 40px 40px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.08),
    0 4px 12px rgba(0,0,0,0.04),
    0 0 0 1px rgba(255,255,255,0.3);
  /* --t-step is the single source of truth for the step change: the CSS animates
     for exactly that long and renderStep() reads the same value to decide when
     to swap the content. They used to disagree (400ms transition, 200ms timer),
     so the question text changed while the card was still a third visible. */
  transition: transform var(--t-step) cubic-bezier(0.16,1,0.3,1),
              opacity   var(--t-step) ease;
}
/* The one frame where the card is thrown to the far side so the next question
   can enter from it. This has to jump, not travel — without it the card slides
   back in from the side it just exited and "forward" reads as a bounce. */
.quiz-card.is-teleporting { transition: none; }
/* Golden accent bar at top of card */
.quiz-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--orange), var(--gold));
  background-size: 200% 100%;
  animation: gradientSlide 3s ease-in-out infinite;
}
@keyframes gradientSlide {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Step icon area */
.step-icon-area {
  text-align:center; padding:28px 0 8px; font-size:2.2rem;
  animation: bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bounceIn {
  0% { opacity:0; transform:scale(0.3) translateY(10px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
.step-subtitle {
  text-align:center; font-size:0.82rem; color:var(--text-d);
  margin-bottom:20px; font-weight:500; letter-spacing:0.3px;
}

.quiz-card.slide-out-left  { transform:translateX(-80px); opacity:0; }
.quiz-card.slide-out-right { transform:translateX(80px);  opacity:0; }
.quiz-card.slide-in        { transform:translateX(0);     opacity:1; }

/* Quiz Footer — stays visible above mobile keyboard, and reads as the bottom
   of the card itself on desktop rather than a bar stranded at the viewport edge. */
.quiz-footer {
  width:100%; max-width:var(--quiz-w); padding:12px 24px;
  display:flex; justify-content:space-between; align-items:center;
  margin:0 auto auto; flex:0 0 auto;
  position:sticky; bottom:0; z-index:4;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.6);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
#btn-back.hidden { visibility:hidden; pointer-events:none; }

/* The fixed site footer would paint on top of the sticky quiz footer. */
#quiz.section--active ~ .site-footer { opacity:0; pointer-events:none; }

/* Desktop: card + footer form one continuous panel. */
@media (min-width:601px) {
  .quiz-card { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .quiz-footer {
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    border:1px solid rgba(255,255,255,0.7); border-top:0;
    background: rgba(255,255,255,0.88);
    padding:14px 24px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  }
}

/* === FORM ELEMENTS === */
.question-label {
  display:block; font-family:var(--font-d); font-size:1.4rem; font-weight:800;
  line-height:1.3; margin-bottom:8px; color:var(--text);
}
.question-helper { font-size:0.85rem; color:var(--text-d); margin-bottom:24px; line-height:1.5; }
.question-helper:empty { display:none; }

/* Text Inputs */
.input-field {
  width:100%; padding:18px 22px;
  background:rgba(255,255,255,0.95); border:2px solid #e2e8f0; border-radius:var(--r-md);
  color:var(--text); font-family:var(--font); font-size:1.1rem; font-weight:500; outline:none;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.input-field::placeholder { color:#b0bec5; font-weight:400; }
.input-field:focus {
  border-color:var(--gold); background:#fff;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.12), 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.input-field.error { border-color:var(--border-error); box-shadow:0 0 0 4px rgba(239,68,68,0.1); animation:shake 0.4s ease; }

@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.error-message { display:none; font-size:0.82rem; color:var(--error); margin-top:8px; align-items:center; gap:4px; }
.error-message.visible { display:flex; }

/* Radio Cards */
.radio-group { display:flex; flex-direction:column; gap:10px; }
.radio-option {
  display:flex; align-items:center; padding:16px 22px;
  background:linear-gradient(135deg, rgba(250,251,255,0.92), rgba(241,245,249,0.92));
  border:2px solid #e2e8f0; border-radius:var(--r-md);
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  position:relative;
}
.radio-option:hover {
  border-color:var(--gold-light); background:linear-gradient(135deg, #fffdf5, #fef9e7);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(251,191,36,0.12);
}
.radio-option.selected {
  border-color:var(--gold);
  background:linear-gradient(135deg, #fef9e7, #fef3c7);
  box-shadow: 0 4px 20px rgba(251,191,36,0.2), inset 0 0 0 1px rgba(251,191,36,0.1);
  transform: translateX(4px);
}

.radio-indicator {
  width:24px; height:24px; border-radius:50%; border:2.5px solid #cbd5e1;
  margin-right:16px; position:relative; flex-shrink:0;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  background:#fff;
}
.radio-option:hover .radio-indicator { border-color: var(--gold-light); }
.radio-option.selected .radio-indicator {
  border-color:var(--gold); background: var(--gold);
  box-shadow: 0 0 0 4px rgba(251,191,36,0.15);
}
.radio-option.selected .radio-indicator::after {
  content:''; position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%); width:10px; height:10px;
  border-radius:50%; background:#fff;
  animation:popIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes popIn { 0%{transform:translate(-50%,-50%) scale(0)} 100%{transform:translate(-50%,-50%) scale(1)} }

.radio-label { font-size:1rem; font-weight:600; color:var(--text); }
.radio-option input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }

/* Checkbox */
.checkbox-wrapper {
  display:flex; align-items:flex-start; gap:14px; padding:22px;
  background:linear-gradient(135deg, rgba(250,251,255,0.92), rgba(241,245,249,0.92));
  border:2px solid #e2e8f0; border-radius:var(--r-md);
  cursor:pointer; user-select:none;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.checkbox-wrapper:hover {
  border-color:var(--gold-light);
  box-shadow: 0 4px 16px rgba(251,191,36,0.1);
}
.checkbox-wrapper.checked {
  border-color:var(--gold);
  background:linear-gradient(135deg, #fef9e7, #fef3c7);
  box-shadow: 0 4px 20px rgba(251,191,36,0.18);
}

.checkbox-box {
  width:24px; height:24px; border-radius:6px; border:2px solid #cbd5e1;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease; margin-top:1px;
}
.checkbox-wrapper.checked .checkbox-box { background:var(--gold); border-color:var(--gold); }
.checkbox-box svg { opacity:0; transform:scale(0); transition:all 0.25s cubic-bezier(0.16,1,0.3,1); }
.checkbox-wrapper.checked .checkbox-box svg { opacity:1; transform:scale(1); }
.checkbox-label { font-size:0.92rem; color:var(--text-m); line-height:1.5; }
.checkbox-wrapper input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }

/* File Upload */
.file-upload-zone {
  border:2.5px dashed #cbd5e1; border-radius:var(--r-lg); padding:44px 24px;
  text-align:center; cursor:pointer; position:relative;
  background:linear-gradient(135deg, rgba(250,251,255,0.92), rgba(241,245,249,0.92));
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.file-upload-zone:hover, .file-upload-zone.drag-over {
  border-color:var(--gold); background:linear-gradient(135deg, rgba(255,253,245,0.85), rgba(254,249,231,0.85));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251,191,36,0.12);
}
.file-upload-zone.has-file {
  border-style:solid; border-color:var(--success);
  background:linear-gradient(135deg, #f0fdf4, #ecfdf5);
}
.file-upload-zone.error { border-color:var(--error); animation:shake 0.4s ease; }

.upload-icon { margin-bottom:12px; color:var(--text-d); transition:color 0.2s ease; }
.file-upload-zone:hover .upload-icon { color:var(--gold); }
.upload-text { font-size:0.95rem; color:var(--text-m); }
.upload-text strong { color:var(--gold-dark); }
.upload-hint { font-size:0.8rem; color:var(--text-d); margin-top:6px; }
.file-upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }

.file-preview { display:flex; align-items:center; gap:12px; padding:12px 16px; margin-top:12px; background:#f0fdf4; border-radius:var(--r-sm); }
.file-preview-icon { color:var(--success); flex-shrink:0; }
.file-preview-name { font-size:0.88rem; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-preview-remove { background:none; border:none; color:var(--text-d); cursor:pointer; padding:4px; border-radius:4px; transition:color 0.2s ease; }
.file-preview-remove:hover { color:var(--error); }

/* Google Places Autocomplete dropdown styling */
.pac-container {
  border-radius:var(--r-md); border:1px solid var(--border); margin-top:4px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12); font-family:var(--font);
}
.pac-item { padding:10px 16px; font-size:0.95rem; cursor:pointer; border-top:1px solid #f1f5f9; }
.pac-item:hover { background:#fef3c7; }
.pac-icon { display:none; }
.pac-item-query { font-weight:600; color:var(--text); }

/* === RESULTS (Disqualified & Thank You) === */
/* padding-bottom clears the fixed copyright line, which sits above the sections */
.result-container { text-align:center; padding:32px 24px 40px; max-width:520px; width:100%; }
.result-title {
  font-family:var(--font-d); font-size:clamp(1.5rem,4vw,2rem); font-weight:800;
  margin-bottom:12px; color:var(--text);
}
.result-text { font-size:1rem; color:var(--text-m); line-height:1.7; margin-bottom:32px; }
.result-footer-text { font-size:0.8rem; color:var(--text-d); margin-top:16px; }

.result-steps { display:flex; flex-direction:column; gap:14px; text-align:left; margin-bottom:24px; }
.result-step {
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.6); border-radius:var(--r-md);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  animation:fadeSlideUp 0.5s ease both;
}
.result-step:nth-child(1) { animation-delay:0.2s; }
.result-step:nth-child(2) { animation-delay:0.4s; }
.result-step:nth-child(3) { animation-delay:0.6s; }

.result-step-icon {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-light), var(--orange));
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.result-step p { font-size:0.95rem; color:var(--text-m); }

/* === LANDSCAPE SILHOUETTE === */
.landscape {
  position:absolute; left:0; right:0; bottom:30px;
  height:140px; pointer-events:none; z-index:0;
  animation: fadeSlideUp 1.2s 0.6s ease both;
}
.landscape-svg { position:absolute; inset:0; width:100%; height:100%; }

.rooftop {
  position:absolute; bottom:38px;
  width:36px; height:34px;
}
.rooftop--1 { left:18%; transform:scale(0.85); }
.rooftop--2 { left:46%; bottom:46px; transform:scale(1); }
.rooftop--3 { right:22%; transform:scale(0.9); }

.rooftop .roof {
  position:absolute; left:50%; top:0;
  width:0; height:0;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-bottom:14px solid rgba(15,40,80,0.6);
  transform:translateX(-50%);
}
.rooftop .house-body {
  position:absolute; left:50%; top:13px;
  width:34px; height:20px;
  background:rgba(15,40,80,0.55);
  transform:translateX(-50%);
  border-radius:1px;
}
.rooftop .solar-panel {
  position:absolute; left:50%; top:6px; z-index:1;
  width:24px; height:7px;
  background:linear-gradient(135deg, #1e3a8a, #3b82f6 50%, #1e3a8a);
  background-size:6px 100%;
  border:1px solid rgba(15,40,80,0.7);
  transform:translateX(-50%) skewX(-22deg);
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
  animation: panelGlint 5s ease-in-out infinite;
}
.rooftop--2 .solar-panel { animation-delay:1.5s; }
.rooftop--3 .solar-panel { animation-delay:3s; }
@keyframes panelGlint {
  0%,100% { box-shadow:0 0 6px rgba(251,191,36,0.35); }
  50%     { box-shadow:0 0 14px rgba(251,191,36,0.85); }
}

/* === TOAST === */
.toast {
  position:fixed; top:24px; left:50%; transform:translate(-50%,-30px);
  background:linear-gradient(135deg, var(--gold), var(--orange));
  color:#1a1a2e; font-weight:700; font-size:0.92rem;
  padding:12px 22px; border-radius:999px;
  box-shadow:0 8px 28px rgba(251,191,36,0.45), 0 2px 8px rgba(0,0,0,0.1);
  opacity:0; pointer-events:none; z-index:10;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
  white-space:nowrap;
}
.toast.visible {
  opacity:1; transform:translate(-50%,0);
}

/* === SAVINGS CARD (thank-you) === */
.savings-card {
  background: linear-gradient(135deg, rgba(255,253,245,0.95), rgba(254,243,199,0.95));
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 0 0 24px;
  box-shadow: 0 8px 32px rgba(251,191,36,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
  animation: bounceIn 0.6s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.savings-label {
  font-size:0.78rem; font-weight:700; color:var(--gold-dark);
  text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px;
}
.savings-amount {
  font-family: var(--font-d); font-weight:800;
  font-size: clamp(2.2rem, 7vw, 3rem); color: var(--text);
  line-height:1.05; display:flex; align-items:flex-start; justify-content:center; gap:2px;
}
.savings-currency { font-size:0.6em; margin-top:0.35em; color:var(--gold-dark); }
.savings-number { background:linear-gradient(135deg, var(--gold-dark), var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.savings-sub { font-size:0.78rem; color:var(--text-d); margin-top:6px; }

/* === SUBMIT BUTTON LOADING STATE === */
.btn--loading { pointer-events:none; }
.btn--loading .btn-arrow { display:none; }
.btn--loading::after {
  content:''; width:18px; height:18px; margin-left:10px;
  border:2.5px solid rgba(0,0,0,0.2); border-top-color:#1a1a2e;
  border-radius:50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* === STAGGERED QUIZ CARD CONTENT === */
.quiz-card .step-icon-area { animation-delay:0.05s; }
.quiz-card .step-subtitle  { animation: fadeSlideUp 0.5s 0.12s ease both; }
.quiz-card .question-label { animation: fadeSlideUp 0.5s 0.18s ease both; }
.quiz-card .question-helper:not(:empty) { animation: fadeSlideUp 0.5s 0.22s ease both; }
.quiz-card .input-field,
.quiz-card .radio-group,
.quiz-card .file-upload-zone,
.quiz-card .checkbox-wrapper { animation: fadeSlideUp 0.5s 0.26s ease both; }
.quiz-card .radio-group .radio-option { animation: fadeSlideUp 0.45s ease both; }
.quiz-card .radio-group .radio-option:nth-child(1) { animation-delay:0.30s; }
.quiz-card .radio-group .radio-option:nth-child(2) { animation-delay:0.36s; }
.quiz-card .radio-group .radio-option:nth-child(3) { animation-delay:0.42s; }
.quiz-card .radio-group .radio-option:nth-child(4) { animation-delay:0.48s; }
.quiz-card .radio-group .radio-option:nth-child(5) { animation-delay:0.54s; }
.quiz-card .radio-group .radio-option:nth-child(6) { animation-delay:0.60s; }

/* === SUN RISE ENTRANCE === */
@keyframes sunRise {
  0%   { opacity:0; transform:translateY(80px) scale(0.6); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.sun-system--hero { animation: sunRise 1.2s cubic-bezier(0.16,1,0.3,1) both; }

/* === SITE HEADER ===
   The landing page had no navigation at all — the only links were an 11px strip
   pinned to the bottom edge. Primary nav lives here now. */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px, 4vw, 40px);
  padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(3,55,100,0.42), rgba(3,55,100,0));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.site-header__brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex-shrink:0;
}
.site-header__mark {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold-light) 48%, var(--orange));
  box-shadow: 0 2px 12px rgba(251,191,36,0.6);
}
.site-header__name {
  font-family:var(--font-d); font-weight:800; font-size:1.02rem;
  color:#fff; letter-spacing:1.4px; text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,0.25);
}

.site-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.site-nav a {
  padding:9px 14px; border-radius:999px;
  color:rgba(255,255,255,0.92); text-decoration:none;
  font-size:0.92rem; font-weight:500;
  text-shadow:0 1px 6px rgba(0,0,0,0.25);
  transition: background 0.2s ease, color 0.2s ease;
}
.site-nav a:hover { background:rgba(255,255,255,0.16); color:#fff; }

.site-header__actions { display:flex; align-items:center; gap:10px; }
.site-header__signin {
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; text-decoration:none; font-size:0.9rem; font-weight:600;
  white-space:nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.site-header__signin:hover {
  background:rgba(255,255,255,0.24); border-color:rgba(255,255,255,0.6);
  transform:translateY(-1px);
}

/* Hamburger — mobile only */
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.32);
  border-radius:12px; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav-toggle__bar {
  display:block; height:2px; width:100%; border-radius:2px; background:#fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Header steps aside for the quiz, which has its own header and progress bar.
   Driven by a class from showSection() — a sibling selector can't reach back up
   the document to an element that appears before the sections. */
.site-header.is-hidden { opacity:0; pointer-events:none; transform:translateY(-8px); }

/* === MOBILE MENU SHEET === */
.mobile-nav {
  position:fixed; inset:0; z-index:5;
  padding:88px 20px 24px;
  background:rgba(3,42,78,0.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  overflow-y:auto;
  animation: sheetIn 0.25s ease both;
}
.mobile-nav[hidden] { display:none; }
@keyframes sheetIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.mobile-nav nav { display:flex; flex-direction:column; max-width:420px; margin:0 auto; }
.mobile-nav a {
  display:block; padding:15px 16px; border-radius:var(--r-md);
  color:#fff; text-decoration:none; font-size:1.05rem; font-weight:600;
}
.mobile-nav a:active, .mobile-nav a:hover { background:rgba(255,255,255,0.12); }
.mobile-nav hr { border:0; border-top:1px solid rgba(255,255,255,0.16); margin:10px 12px; }

/* === SKIP LINK === */
.skip-link {
  position:absolute; top:-100px; left:12px; z-index:20;
  background:#fff; color:var(--text); font-weight:600; font-size:0.9rem;
  padding:10px 16px; border-radius:var(--r-sm);
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  transition:top 0.2s ease;
}
.skip-link:focus { top:12px; }

/* === FOOTER ===
   A real bar, not floating text. Twice the links ended up rendered on top of
   the frosted hero card — a fixed footer over a fixed full-viewport card
   collides differently at every viewport height. Giving the footer its own
   surface makes it legible regardless of what is behind it, and the sections
   reserve --footer-h below their content so nothing overlaps in the first place. */
.site-footer {
  position:fixed; bottom:0; left:0; width:100%;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0 6px;
  min-height:var(--footer-h);
  padding:6px 16px; padding-bottom:max(6px, env(safe-area-inset-bottom));
  text-align:center; font-size:0.8rem; color:var(--text-m);
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,0.85);
  box-shadow:0 -2px 16px rgba(15,40,80,0.05);
  z-index:4;
  transition:opacity 0.3s ease;
}
.site-footer__nav {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 2px;
}
.site-footer__sep { color:var(--text-d); user-select:none; }
.site-footer__nav a {
  color:var(--text-m); text-decoration:none; font-size:0.8rem; font-weight:500;
  padding:7px 10px; border-radius:8px; min-height:32px;
  display:inline-flex; align-items:center;
  transition: color 0.2s ease, background 0.2s ease;
}
.site-footer__nav a:hover { color:var(--gold-dark); background:rgba(245,158,11,0.12); }
.site-footer__nav a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.site-footer__copy { color:var(--text-d); font-size:0.78rem; padding:0 4px; }

/* === CONSENT DISCLOSURE (TCPA-style) === */
.consent-disclosure {
  margin-top:14px; font-size:0.72rem; line-height:1.55; color:var(--text-d);
  animation: fadeSlideUp 0.5s 0.32s ease both;
}
.consent-disclosure a { color:var(--gold-dark); font-weight:600; }

/* === NO-JS FALLBACK === */
.noscript-panel {
  position:relative; z-index:5; max-width:640px;
  margin:40px auto; padding:28px 32px;
  background:rgba(255,255,255,0.94); border-radius:var(--r-xl);
  box-shadow:0 12px 48px rgba(0,0,0,0.12);
}
.noscript-panel h2 { font-family:var(--font-d); font-size:1.4rem; margin-bottom:10px; }
.noscript-panel p { color:var(--text-m); margin-bottom:10px; }
.noscript-panel a { color:var(--gold-dark); font-weight:600; }

/* === RESPONSIVE ===
   Height queries matter more than width here: the sections are fixed to the
   viewport, so a 1366×768 laptop clipped the sun and the bottom of the card. */
@media (min-width:601px) and (max-height:940px) {
  .sun-system--hero { width:168px; height:168px; }
  .sun-beams { width:400px; height:400px; }
  .hero-text { padding:26px 34px 24px; }
  .hero-title { font-size:clamp(1.8rem,4.4vw,2.7rem); }
  .hero-subtitle { margin-bottom:20px; }
  .trust-bar { padding:12px 22px; margin-bottom:20px; }
  .hero-microcopy { margin-top:12px; }
  .partner-link { margin-top:14px; }
  .partner-badge { width:112px; height:112px; margin-bottom:6px; }
  .partner-link--reverse { margin-top:10px; }
  .landscape { height:110px; }
  /* header clearance + trimmed footer gap so a 1366x768 laptop still fits */
  #hero, #partners, #disqualified, #thankyou { padding-top:52px; }
  .hero-content { padding-bottom:18px; }
}
@media (min-width:601px) and (max-height:760px) {
  .sun-system--hero { width:124px; height:124px; margin-bottom:0; }
  .sun-beams { width:300px; height:300px; }
  .hero-text { padding:20px 30px 18px; }
  .hero-title { font-size:1.9rem; margin-bottom:6px; }
  .hero-subtitle { font-size:0.98rem; margin-bottom:16px; }
  .trust-bar { padding:10px 18px; margin-bottom:16px; }
  .trust-number { font-size:1.15rem; }
  .btn--lg { padding:14px 32px; font-size:1rem; }
  .partner-badge { width:104px; height:104px; }
  .landscape { display:none; }
  #hero, #partners, #disqualified, #thankyou { padding-top:48px; }
  .hero-content { padding-bottom:12px; }
}

/* Result screens (thank-you / disqualified) on short viewports */
@media (max-height:860px) {
  .result-container { padding:20px 24px 34px; }
  .sun-system--result { width:72px; height:72px; margin-bottom:14px; }
  .result-text { margin-bottom:20px; }
  .savings-card { padding:16px 20px; margin-bottom:18px; }
  .result-steps { gap:10px; margin-bottom:16px; }
  .result-step { padding:12px 18px; }
  .result-step-icon { width:36px; height:36px; }
  .portal-cta { margin-top:12px; }
}

@media (max-width:600px) {
  .sun-system--hero { width:132px; height:132px; margin-bottom:2px; }
  .sun-beams { width:300px; height:300px; }
  /* 40px side padding on a 390px screen left the CTA wrapping to two lines */
  .hero-content { padding:16px 16px 40px; }
  .hero-text { padding:24px 20px 22px; }
  .hero-title { margin-bottom:6px; }
  .hero-subtitle { margin-bottom:20px; }
  .hero-microcopy { margin-top:12px; }
  .trust-bar { gap:12px; padding:12px 14px; flex-wrap:nowrap; margin-bottom:20px; }
  .trust-number { font-size:1.1rem; }
  .trust-label { font-size:0.65rem; }
  .trust-divider { height:32px; }

  .quiz-card { padding:0 22px 28px; border-radius:var(--r-lg); min-height:240px; }
  .question-label { font-size:1.15rem; }
  .radio-option { padding:13px 16px; }
  .quiz-footer { padding:12px 16px 28px; }
  .btn--lg { padding:16px 32px; font-size:1rem; }
  .file-upload-zone { padding:28px 16px; }

  /* Header collapses to brand + hamburger */
  .site-nav, .site-header__signin { display:none; }
  .nav-toggle { display:flex; }
  .site-header { padding:10px 14px; gap:12px; }
  .site-header__actions { margin-left:auto; }

  .site-footer { font-size:0.74rem; padding:5px 12px; padding-bottom:max(5px, env(safe-area-inset-bottom)); }
  .site-footer__nav a { font-size:0.74rem; padding:6px 8px; min-height:30px; }
  .site-footer__copy { font-size:0.7rem; }
  /* Partner sign-in is in the mobile menu; keep the bottom strip to legal only */
  .site-footer__nav a[href="partnerportal/"],
  .site-footer__sep:last-of-type { display:none; }

  .partner-badge { width:120px; height:120px; }
  .partner-wrench { width:34px; height:34px; padding:6px; }
  .partner-link { font-size:0.8rem; padding:9px 14px; }
  .landscape { height:100px; bottom:24px; }
  .rooftop { transform:scale(0.7) !important; bottom:24px; }
  .rooftop--2 { bottom:30px; }
  .savings-card { padding:18px 18px; }
  .toast { font-size:0.82rem; padding:10px 18px; top:18px; }
}

/* Short phones (iPhone 13 and similar are ~664px of usable height) */
@media (max-width:600px) and (max-height:700px) {
  .sun-system--hero { width:104px; height:104px; }
  .sun-beams { width:240px; height:240px; }
  .hero-title { font-size:1.75rem; }
  .hero-subtitle { font-size:0.95rem; margin-bottom:16px; }
  .hero-text { padding:20px 18px 18px; }
  .trust-bar { padding:10px 12px; margin-bottom:16px; }
  .trust-number { font-size:1rem; }
  .btn--lg { padding:14px 24px; font-size:0.98rem; }
  .partner-link { margin-top:14px; }
  .landscape { display:none; }
}

@media (max-width:380px) {
  .sun-system--hero { width:110px; height:110px; }
  .sun-beams { width:250px; height:250px; }
  .hero-title { font-size:1.65rem; }
  .trust-bar { gap:8px; padding:10px 12px; }
  .trust-label { font-size:0.58rem; }
  .quiz-card { padding:0 18px 24px; }
  .question-label { font-size:1.05rem; }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Customer portal CTA on thank-you */
.portal-cta {
  margin: 18px auto 6px;
  max-width: 420px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,253,245,0.95), rgba(254,243,199,0.95));
  border: 1px solid rgba(245,158,11,0.45);
  border-radius: var(--r-lg, 16px);
  text-decoration: none;
  color: #1c2233;
  box-shadow: 0 8px 24px -12px rgba(255, 126, 61, 0.45);
  transition: transform 0.18s, box-shadow 0.18s;
}
.portal-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(255, 126, 61, 0.55); }
.portal-cta__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffb547 60%, #ff7e3d);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(255, 126, 61, 0.35);
}
.portal-cta__body { display: flex; flex-direction: column; text-align: left; }
.portal-cta__body b { font-weight: 800; font-size: 15px; }
.portal-cta__body em { font-style: normal; font-size: 12px; color: #7b5d2e; margin-top: 1px; }
.portal-cta__arrow { color: #ff7e3d; transition: transform 0.2s; }
.portal-cta:hover .portal-cta__arrow { transform: translateX(3px); }

.customer-login-link {
  color: #b45309;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 4px;
  /* wraps as one unit rather than splitting mid-phrase */
  white-space: nowrap;
}
.customer-login-link:hover { color: #ff7e3d; }

/* === HONEYPOT ===
   Off-screen rather than display:none — bots that skip hidden inputs would
   otherwise never trip it. Never focusable, never read out. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* === SCRIPT FAILURE FALLBACK === */
.app-error {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 30; width: calc(100% - 40px); max-width: 460px;
  padding: 28px 30px; text-align: center;
  background: #fff; border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(15,40,80,0.22);
}
.app-error[hidden] { display: none; }
.app-error p { color: var(--text-m); margin-bottom: 12px; line-height: 1.6; }
.app-error strong { color: var(--text); }
.app-error a { color: var(--gold-dark); font-weight: 600; }
.app-error .btn { margin-top: 6px; }