/* ═══════════════════════════════════════════════════════════════════
   Windows LP — starter styles
   Override / extend the existing /promo stylesheet. Web dev should
   inherit Paradise brand tokens from the main site rather than
   introduce new fonts or redefine colors.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paradise-navy: #0F2040;     /* verify against /promo actual brand token */
  --paradise-cyan: #00B2E3;
  --paradise-gold: #F5B800;     /* optional accent, used sparingly */
  --text-dark: #1A1A1A;
  --text-muted: #5A5A5A;
  --bg-light: #F5F7FA;
  --border-light: #E1E4E8;
  --white: #FFFFFF;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background: var(--white);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

h1, h2, h3, h4 { margin: 0 0 var(--space-sm); line-height: 1.2; }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

.accent { color: var(--paradise-cyan); }

/* ──────────────── Buttons ──────────────── */
.btn {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
  font-size: 1rem;
}
.btn-primary {
  background: var(--paradise-cyan);
  color: var(--paradise-navy);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-block { display: block; width: 100%; }
.btn-lg { padding: 1.1rem 2.25rem; font-size: 1.125rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* ──────────────── Header ──────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-link img { display: block; }
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.phone-link {
  color: var(--paradise-navy);
  font-weight: 700;
  text-decoration: none;
}

/* ──────────────── Hero ──────────────── */
.hero {
  padding: var(--space-lg) 0 var(--space-xl);
  background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.hero-text h1 { color: var(--paradise-navy); }
.hero-sub {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin: var(--space-sm) 0 var(--space-md);
}
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.trust-bar strong { color: var(--paradise-navy); }
.hero-image-wrap {
  margin: var(--space-md) 0 0;
}
.hero-image-wrap img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.hero-image-wrap figcaption {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
}
.footnote {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

/* ──────────────── Form Card ──────────────── */
.form-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  /* No sticky positioning. Operator-flagged 2026-05-01 PM: with sticky on,
     the form pins to top:100px but its bottom (CTA button on each step)
     hangs off the viewport on common laptop screens (1366x768 → only 668px
     of vertical room; step-3 is ~740px tall with the consent label). The
     user can't access the CTA until they scroll past the entire hero
     section, by which point they've left the form they were filling.
     Sticky is already disabled at <=1024px via the media query below; we
     extend the same to wider screens because the form-height issue is
     present everywhere except very tall desktop monitors. */
}
.form-heading {
  color: var(--paradise-navy);
  font-size: 1.5rem;
}
.form-sub {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-md);
}
.lead-form label {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--paradise-navy);
}
.lead-form input,
.lead-form select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
}
.lead-form input:focus,
.lead-form select:focus {
  outline: 2px solid var(--paradise-cyan);
  outline-offset: 1px;
  border-color: var(--paradise-cyan);
}
.field-help {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.25rem;
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-sm) 0;
}
.consent-label input {
  margin: 0;
  margin-top: 2px;
  width: auto;
}
.consent-label a { color: var(--paradise-cyan); }
.form-trust {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}
.form-success {
  text-align: center;
  padding: var(--space-md);
}
.form-success h3 { color: var(--paradise-cyan); }

/* ──────────────── Urgency band ──────────────── */
.urgency-band {
  background: var(--paradise-navy);
  color: var(--white);
  padding: var(--space-lg) 0;
  text-align: center;
}
.urgency-band h2 { color: var(--white); }
.urgency-band p { color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto; }
.countdown {
  font-size: 2rem;
  font-weight: 800;
  color: var(--paradise-cyan);
  margin-bottom: var(--space-sm);
}
.countdown span {
  display: inline-block;
  padding: 0 0.5rem;
}

/* ──────────────── Three-column layouts ──────────────── */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-md);
}
.three-col .col { text-align: center; }
.icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: var(--paradise-cyan);
  /* SVG icon goes here via background-image or inline <svg> */
}

.why-paradise, .social-proof, .process, .financing, .faq {
  padding: var(--space-xl) 0;
}
.why-paradise { background: var(--white); }
.social-proof { background: var(--bg-light); }

/* ──────────────── Social proof ──────────────── */
.big-badge {
  font-size: 1.25rem;
  text-align: center;
  margin: var(--space-md) 0;
  color: var(--paradise-navy);
}
.testimonial {
  background: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 0;
  font-style: normal;
}
.testimonial p { margin-bottom: var(--space-sm); }
.testimonial cite {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: normal;
  font-weight: 600;
}
.stars {
  color: var(--paradise-gold);
  margin-top: 0.5rem;
}

/* ──────────────── Form band (mid-page) ──────────────── */
.form-band {
  background: var(--paradise-cyan);
  padding: var(--space-xl) 0;
}
.form-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.form-band-text { color: var(--white); }
.form-band-text h2 { color: var(--white); }
.lead-form-compact {
  background: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

/* ──────────────── Process / steps ──────────────── */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.steps li { text-align: center; }
.step-num {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  background: var(--paradise-navy);
  color: var(--white);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

/* ──────────────── Financing ──────────────── */
.finance-option {
  background: var(--bg-light);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.finance-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.finance-disclosure {
  background: var(--white);
  padding: var(--space-sm);
  border-left: 3px solid var(--paradise-cyan);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}
.placeholder-disclaimer {
  background: #FFF4D6;
  border: 1px dashed #D4A017;
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: #8B6914;
}
.offer-footnote {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ──────────────── FAQ ──────────────── */
.faq details {
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-sm) 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--paradise-navy);
  padding: 0.5rem 0;
}
.faq details[open] summary { color: var(--paradise-cyan); }

/* ──────────────── Final CTA ──────────────── */
.final-cta {
  background: var(--paradise-navy);
  color: var(--white);
  padding: var(--space-xl) 0;
}
.final-cta h2 { color: var(--white); }
.final-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.final-cta-inner form {
  background: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  color: var(--text-dark);
}

/* ──────────────── Footer ──────────────── */
.site-footer {
  background: #0A1833;
  color: rgba(255,255,255,0.8);
  padding: var(--space-xl) 0 var(--space-md);
  font-size: 0.875rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-lg);
}
.site-footer h4 { color: var(--white); font-size: 1rem; }
.site-footer a { color: var(--paradise-cyan); text-decoration: none; }
.footer-legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}
.fb-disclaimer { margin-bottom: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════════
   Responsive breakpoints
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .form-card { position: static; }
  .form-band-inner, .final-cta-inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .three-col { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions .phone-link { display: none; } /* CTA button is enough on mobile */
}

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

/* ═══════════════════════════════════════════════════════════════════
   Multi-step form (added 2026-04-30)
   Backed by landing_page_playbook.json — research-verified +86% lift
   over single-page forms (case studies up to +700%).
   ═══════════════════════════════════════════════════════════════════ */

.lead-form-multi-step .form-step {
  border: none;
  padding: 0;
  margin: 0;
}
.lead-form-multi-step .form-step[hidden] { display: none; }

.step-indicator {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs, 8px);
  margin: 0 0 var(--space-md, 20px) 0;
  padding: 0;
  counter-reset: step;
}
.step-indicator .step-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.45);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.step-indicator .step-dot:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: rgba(0,0,0,0.12);
  z-index: 0;
}
.step-indicator .step-dot.is-complete::after {
  background: var(--paradise-cyan, #00aeef);
}
.step-indicator .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.55);
  font-weight: 800;
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.step-indicator .step-dot.is-active .step-num {
  background: var(--paradise-cyan, #00aeef);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,174,239,0.35);
}
.step-indicator .step-dot.is-complete .step-num {
  background: var(--paradise-navy, #1A1D6E);
  color: #fff;
}
.step-indicator .step-dot.is-active .step-label,
.step-indicator .step-dot.is-complete .step-label {
  color: var(--paradise-navy, #1A1D6E);
}

.form-step-heading {
  font-size: 1.1rem;
  margin: 0 0 4px 0;
  color: var(--paradise-navy, #1A1D6E);
  font-weight: 800;
}
.form-step-sub {
  font-size: 0.88rem;
  color: rgba(0,0,0,0.62);
  margin: 0 0 var(--space-md, 16px) 0;
  line-height: 1.4;
}

.form-step-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--space-sm, 12px);
}
.form-step-actions .btn { flex: 1; }
.form-step-actions .form-step-back {
  flex: 0 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 480px) {
  .step-indicator .step-label { display: none; }
  .step-indicator .step-dot:not(:last-child)::after {
    top: 14px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Form input/select VISIBILITY fixes (operator-flagged 2026-05-01)
   ═══════════════════════════════════════════════════════════════════ */

/* Form input + select: explicit color so values + placeholders show */
.lead-form input,
.lead-form select {
  color: var(--paradise-navy, #1A1D6E);
  background-color: #fff;
}
.lead-form input::placeholder {
  color: rgba(26,29,110,0.45);
}

/* Dropdown OPTIONS: by default, OS-native option list inherits color
   from select; explicit rules guarantee black-on-white regardless of
   parent inheritance. Operator-flagged white-on-white bug 2026-05-01. */
.lead-form select option {
  color: var(--paradise-navy, #1A1D6E);
  background-color: #fff;
  padding: 6px 10px;
}
.lead-form select option:disabled {
  color: rgba(26,29,110,0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   AGGRESSIVE override: dropdown options (2026-05-01 PM operator-flagged
   — first attempt didn't take effect; some upstream rule was winning)
   ═══════════════════════════════════════════════════════════════════ */
.lead-form select {
  color: #1A1D6E !important;
  background-color: #fff !important;
  font-family: inherit !important;
}
.lead-form select option,
.lead-form select option:not(:disabled),
.lead-form select option:checked,
.lead-form select option:hover,
.lead-form select option:focus {
  color: #1A1D6E !important;
  background-color: #fff !important;
}
.lead-form select option:disabled,
.lead-form select option[value=""] {
  color: rgba(26,29,110,0.55) !important;
}
/* Logo never stretches: contain in its declared box */
.site-header img,
.site-footer img {
  object-fit: contain;
  height: auto;
  width: auto;
}
.site-header .logo-link img { max-height: 60px; max-width: 180px; }
.site-footer img { max-height: 50px; max-width: 150px; }

/* ═══════════════════════════════════════════════════════════════════
   Custom-select combobox (P5 of world-class roadmap, 2026-05-01)
   ═══════════════════════════════════════════════════════════════════
   Replaces native <select>. Keeps same visual footprint as the native
   inputs around it. Listbox is DOM-rendered (not OS popover), so the
   Critic vision pass + screenshot tooling can actually see opened
   dropdowns. ARIA combobox/listbox/option semantics carry full a11y.   */
.custom-select {
  position: relative;
  margin-top: 0.25rem;
}
.custom-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-light, #d6d8e1);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--paradise-navy, #1A1D6E);
  font-size: 1rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.custom-select:not(.has-value) .custom-select-button .custom-select-value {
  color: rgba(26,29,110,0.55);  /* placeholder appearance */
}
.custom-select-button:focus,
.custom-select.is-open .custom-select-button {
  outline: 2px solid var(--paradise-cyan, #00aeef);
  outline-offset: 1px;
  border-color: var(--paradise-cyan, #00aeef);
}
.custom-select.has-error .custom-select-button {
  border-color: #d04545;
  outline-color: #d04545;
}
.custom-select-arrow {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  color: var(--paradise-navy, #1A1D6E);
  transition: transform 0.15s ease;
}
.custom-select.is-open .custom-select-arrow {
  transform: rotate(180deg);
}
.custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-light, #d6d8e1);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 20px rgba(26,29,110,0.12);
  max-height: 280px;
  overflow-y: auto;
}
.custom-select-list[hidden] {
  display: none !important;
}
.custom-select-option {
  padding: 0.625rem 0.875rem;
  color: var(--paradise-navy, #1A1D6E);
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}
.custom-select-option.is-active,
.custom-select-option:hover {
  background: rgba(0,174,239,0.10);
  color: var(--paradise-navy, #1A1D6E);
}
.custom-select-option[aria-selected="true"] {
  font-weight: 700;
  background: rgba(0,174,239,0.16);
}