/* =====================================================================
   Combined funnel - one design system, two audiences.

   Homeowners and contractors share this stylesheet so the site reads as one
   property rather than two microsites bolted together. The split is by role,
   not by palette: blue is the homeowner primary (carried over from the B2C
   funnel), orange is the shared call-to-action and the contractor accent
   (carried over from the B2B page), navy is the ground both sit on.
   ===================================================================== */
:root {
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-soft: #eff6ff;
  --cta: #f97316;
  --cta-hover: #ea580c;
  --navy: #0b1220;
  --navy-light: #131c2e;
  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --card-bg: #ffffff;
  --bg-light: #f8fafc;
  --radius: 12px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--card-bg);
  -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  /* Placeholder background — swap in a real HVAC-unit photo before launch, e.g.:
     background-image: linear-gradient(rgba(10,15,25,0.55), rgba(10,15,25,0.55)), url('hero.jpg'); */
  background:
    linear-gradient(rgba(10, 15, 25, 0.55), rgba(10, 15, 25, 0.55)),
    radial-gradient(circle at 30% 20%, #2b3646 0%, #0f1620 60%, #05080c 100%);
  background-size: cover;
  background-position: center;
}

.survey-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  margin: -28px -28px 20px;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width 0.25s ease;
}

.brand-mark {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  margin-bottom: 14px;
}

.survey-step h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 16px;
  line-height: 1.3;
}

.survey-step h2 {
  font-size: 17px;
  margin: 0 0 16px;
}

.choice-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  padding-right: 44px;
}
.choice-btn:hover { border-color: var(--primary); }
.choice-btn.selected {
  border-color: var(--primary);
  background: rgba(13, 110, 253, 0.06);
  font-weight: 600;
}
.choice-btn::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.choice-btn.selected::after {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px #fff;
}
.choice-btn.selected-warning {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  font-weight: 600;
}
.choice-btn.selected-warning::after {
  border-color: #dc2626;
  background: #dc2626;
  box-shadow: inset 0 0 0 3px #fff;
}
.choice-warning {
  color: #dc2626;
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0 0;
}

.survey-step label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
}
.survey-step input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.consent-text {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.consent-text a {
  color: var(--primary);
  text-decoration: underline;
}

.survey-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.nav-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.nav-btn.prev {
  background: transparent;
  color: var(--muted);
}
.nav-btn.next {
  background: var(--primary);
  color: #fff;
  margin-left: auto;
}
.nav-btn.next:hover { background: var(--primary-hover); }
.nav-btn.next:disabled {
  background: #a8c7fa;
  cursor: not-allowed;
}
.nav-btn.next.warning { background: #dc2626; }
.nav-btn.next.warning:hover { background: #b91c1c; }

.form-error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 12px;
}

.confirmation h2 { color: var(--ink); }

.trust-bar {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.trust-bar .stars { color: #f59e0b; font-size: 14px; margin-right: 6px; }
.trust-bar .rating { font-weight: 700; font-size: 14px; }
.trust-bar .testimonial {
  margin: 8px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

/* Belt-and-suspenders: guarantees [hidden] always wins over any future display rule,
   regardless of selector specificity or source order. A missing version of this exact
   rule caused a real bug in the B2B build (see docs/superpowers/plans/2026-08-10-b2b-lead-funnel.md Task 6). */
[hidden] { display: none !important; }

/* --- shared-engine additions --- */
.step-hint { margin: -4px 0 14px; font-size: 0.9rem; color: #5c6b7a; }
.choice-group.multi .choice-btn.selected::after { content: "✓"; float: right; font-weight: 700; }

/* =====================================================================
   Site chrome — shared by both audiences.
   ===================================================================== */

.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header--dark { background: var(--navy); border-bottom-color: rgba(255,255,255,0.08); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: radial-gradient(120% 120% at 30% 15%, rgba(29,78,216,0.28), rgba(29,78,216,0.10) 70%);
  box-shadow: inset 0 0 0 1px rgba(29,78,216,0.32);
  color: var(--primary);
}
.site-header--dark .brand-mark {
  background: radial-gradient(120% 120% at 30% 15%, rgba(249,115,22,0.32), rgba(249,115,22,0.10) 70%);
  box-shadow: inset 0 0 0 1px rgba(249,115,22,0.34);
  color: var(--cta);
}
.brand-mark svg { width: 19px; height: 19px; }

.brand-name { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand-word { font-weight: 700; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); }
.site-header--dark .brand-word { color: #fff; }
.brand-sub {
  margin-top: 4px; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.site-header--dark .brand-sub { color: #8fa0b8; }

/* The audience switch. Deliberately understated: homeowners are the traffic,
   contractors are the minority who already know why they came. */
.audience-link {
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--muted); padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap;
}
.audience-link:hover { color: var(--ink); border-color: var(--muted); }
.site-header--dark .audience-link { color: #cbd5e1; border-color: rgba(255,255,255,0.18); }
.site-header--dark .audience-link:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

.site-footer { background: var(--navy); color: #94a3b8; padding: 36px 0; margin-top: 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-nav a { color: #cbd5e1; font-size: 14px; text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-copyright, .footer-tagline { font-size: 13px; margin: 0; }
.footer-tagline { max-width: 420px; line-height: 1.6; }

/* =====================================================================
   Homeowner homepage.
   ===================================================================== */

.home-hero {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(249,115,22,0.16), rgba(249,115,22,0) 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  padding: 64px 0 72px;
  text-align: center;
}
.home-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }
.home-hero h1 .accent { color: var(--cta); }
.home-hero .subtitle { font-size: clamp(15px, 1.8vw, 18px); color: #cbd5e1; margin: 0 auto 30px; max-width: 560px; line-height: 1.6; }

/* Project picker. Mirrors the card grid below rather than replacing it:
   people who know what they want use this, people browsing scroll. */
.project-picker {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 560px; margin: 0 auto;
}
.project-picker select {
  flex: 1 1 260px; min-width: 0; padding: 14px 16px; font-size: 16px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
  background: #fff; color: var(--ink); font-family: inherit;
}
.project-picker button {
  padding: 14px 26px; font-size: 16px; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 10px; background: var(--cta); color: #fff; font-family: inherit;
}
.project-picker button:hover { background: var(--cta-hover); }
.project-picker button:disabled { opacity: 0.55; cursor: not-allowed; }
.picker-note { font-size: 13px; color: #94a3b8; margin: 14px 0 0; }

.section { padding: 64px 0; }
.section--light { background: var(--bg-light); }
.section h2 { font-size: clamp(22px, 3vw, 30px); text-align: center; margin: 0 0 10px; letter-spacing: -0.015em; }
.section .section-lead { text-align: center; color: var(--muted); margin: 0 auto 36px; max-width: 560px; line-height: 1.65; }

.niche-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.niche-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.niche-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.niche-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--primary-soft); font-size: 22px; margin-bottom: 14px;
}
.niche-card h3 { margin: 0 0 6px; font-size: 17px; }
.niche-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Niches we do not run yet. Shown so the page does not look thin, but not
   clickable - sending someone into a funnel that has no buyers wastes their
   time and produces a lead nobody can service. */
.niche-card--soon { opacity: 0.6; pointer-events: none; }
.niche-card--soon .badge {
  display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  background: var(--border); border-radius: 999px; padding: 3px 9px;
}

.steps-row { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step-item { text-align: center; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cta); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px;
}
.step-item h3 { margin: 0 0 8px; font-size: 17px; }
.step-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.promise-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.promise-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px;
}
.promise-card h3 { margin: 0 0 8px; font-size: 16px; }
.promise-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* =====================================================================
   Contractor page. Same tokens, inverted ground: dark is the signal that
   you have crossed from the consumer side to the business side.
   ===================================================================== */

.pro-hero {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(249,115,22,0.14), rgba(249,115,22,0) 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  padding: 48px 0 64px;
}
.pro-hero-inner {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
}
@media (max-width: 880px) { .pro-hero-inner { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta);
  border: 1px solid rgba(249,115,22,0.4); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 18px;
}
.pro-hero h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.14; margin: 0 0 16px; letter-spacing: -0.02em; }
.pro-hero h1 .accent { color: var(--cta); }
.pro-hero .subtitle { font-size: 17px; color: #cbd5e1; line-height: 1.65; margin: 0 0 24px; max-width: 520px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.trust-row span { font-size: 14px; color: #cbd5e1; display: inline-flex; align-items: center; gap: 7px; }
.trust-row span::before { content: "✓"; color: var(--cta); font-weight: 700; }

.value-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.value-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px;
}
.value-card .card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(249,115,22,0.12); color: var(--cta); font-size: 19px; margin-bottom: 14px;
}
.value-card h3 { margin: 0 0 8px; font-size: 17px; }
.value-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid var(--border); padding: 16px 0;
}
.faq-list summary {
  cursor: pointer; font-weight: 600; font-size: 16px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "▸"; color: var(--cta); transition: transform .15s ease; }
.faq-list details[open] summary::before { transform: rotate(90deg); }
.faq-list p { margin: 12px 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.section-cta { text-align: center; padding: 56px 0; background: var(--bg-light); }
.cta-btn {
  display: inline-block; margin-top: 18px; padding: 15px 34px;
  background: var(--cta); color: #fff; font-weight: 700; font-size: 16px;
  border: 0; border-radius: 10px; text-decoration: none; cursor: pointer; font-family: inherit;
}
.cta-btn:hover { background: var(--cta-hover); }

/* The contractor survey sits on the dark hero, so it needs its own ground. */
.pro-hero .survey-card { margin: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }

/* =====================================================================
   Thank-you / confirmation.
   ===================================================================== */

.thanks { max-width: 540px; margin: 0 auto; text-align: center; }
.thanks .tick {
  width: 64px; height: 64px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #dcfce7; color: #16a34a;
}
.thanks .tick svg { width: 32px; height: 32px; }
.thanks h1 { font-size: 26px; margin: 0 0 12px; }
.thanks > p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 14px; }
.next-steps {
  text-align: left; margin: 24px 0 0; padding: 18px 20px;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 10px;
}
.next-steps h2 { font-size: 15px; margin: 0 0 10px; }
.next-steps li { color: var(--muted); font-size: 14px; line-height: 1.75; }

/* The survey card is white but can sit on a dark section — it does on the
   contractor hero. Without this it inherits that section's white text and the
   question headings render white-on-white: present, readable to a screen
   reader, invisible to everyone else. Caught in-browser 2026-08-26. */
.survey-card { color: var(--ink); }
.survey-card h2, .survey-card h3, .survey-card label { color: var(--ink); }
.survey-card .consent-text, .survey-card .step-hint { color: var(--muted); }

/* On the contractor page the accent is orange, so the primary action follows
   it rather than the site-wide blue used on the homeowner funnels. */
.pro-hero .nav-btn.next { background: var(--cta); }
.pro-hero .nav-btn.next:hover:not(:disabled) { background: var(--cta-hover); }

/* =====================================================================
   Mobile.

   The funnel pages inherited from b2c-funnel are a single centred card and
   are responsive by construction. The combined site added real page layout
   — a two-column hero, card grids, a header with a brand lockup and an
   audience switch — and none of it had a narrow-viewport pass. Measured:
   the header alone budgets ~370px, so it overflowed anything at 320px
   (iPhone SE and every small Android).
   ===================================================================== */

@media (max-width: 560px) {
  .container { padding: 0 16px; }

  /* Stack the header rather than letting the brand and the audience switch
     fight over a 320px line. */
  .header-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
  .audience-link { align-self: stretch; text-align: center; }

  .home-hero { padding: 40px 0 48px; }
  .pro-hero  { padding: 32px 0 44px; }
  .section, .section-cta { padding: 44px 0; }

  /* One column below this width; the 220/240px minimums would otherwise
     leave a grid item wider than the viewport once padding is removed. */
  .niche-grid, .steps-row, .promise-row, .value-grid { grid-template-columns: 1fr; }
  .steps-row { gap: 24px; }

  .project-picker { flex-direction: column; }
  .project-picker button { width: 100%; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .trust-row { gap: 8px 16px; }
}

/* Below the smallest common phone, drop the brand sub-label rather than let
   the lockup wrap mid-word. */
@media (max-width: 360px) {
  .brand-sub { display: none; }
  .brand-word { font-size: 17px; }
}