/* ---- Design tokens (RenoCopilot validation LPs) ----
   Skin: white type over a darkened photo, thin white outlines, no accent color.
   Layout and element positions are locked; only the surface styling lives here. */
:root {
  --color-bg: #0d131d;
  --color-text: #ffffff;
  --color-text-dim: rgba(255, 255, 255, 0.88);
  --color-text-faint: rgba(255, 255, 255, 0.6);
  --color-line: rgba(255, 255, 255, 0.55);
  --color-line-soft: rgba(255, 255, 255, 0.32);
  --color-panel: rgba(11, 17, 27, 0.42);
  --color-error: #fda4a4;

  --text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --text-hook: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  --text-question: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);

  --space-frame: clamp(1.25rem, 0.8rem + 2.5vw, 4rem);
  --radius-card: 10px;
  --radius-pill: 999px;

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ---- Full-bleed photo backdrop with a neutral dark wash ---- */
.lp {
  position: relative;
  min-height: 100dvh;
  display: flex;
  isolation: isolate;
}

.lp::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: var(--bg-focus, center 30%);
}

.lp::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(10, 15, 23, 0.92) 0%,
      rgba(10, 15, 23, 0.84) 42%,
      rgba(11, 17, 26, 0.55) 74%,
      rgba(12, 18, 28, 0.38) 100%);
}

@media (max-width: 720px) {
  /* Landscape photos crop to a narrow sliver under `cover` on portrait
     phones and read as over-zoomed. Show the photo wider (--bg-zoom-mobile
     is a unitless % of viewport width, default 180) anchored to the top,
     and fade it into the dark backdrop before its bottom edge. Mask stops
     are derived from the same number because the scaled photo height is
     width-driven (zoom vw / 1.5 aspect), so the fade tracks the photo at
     any zoom on any screen height. */
  .lp::before {
    background-size: calc(var(--bg-zoom-mobile, 180) * 1vw) auto;
    background-repeat: no-repeat;
    background-position: var(--bg-focus-mobile, center top);
    -webkit-mask-image: linear-gradient(180deg,
      #000 calc(var(--bg-zoom-mobile, 180) * 0.4vw),
      transparent calc(var(--bg-zoom-mobile, 180) * 0.62vw));
    mask-image: linear-gradient(180deg,
      #000 calc(var(--bg-zoom-mobile, 180) * 0.4vw),
      transparent calc(var(--bg-zoom-mobile, 180) * 0.62vw));
  }

  .lp::after {
    background:
      linear-gradient(180deg,
        rgba(10, 15, 23, 0.9) 0%,
        rgba(10, 15, 23, 0.8) 55%,
        rgba(11, 17, 26, 0.74) 100%);
  }
}

.frame {
  position: relative;
  width: min(46rem, 100%);
  padding: var(--space-frame);
  padding-top: clamp(3.5rem, 8vh, 5rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Faint oversized trade icon behind the words (LP1 to LP3).
   First child of .frame so every sibling paints above it without z-index. */
.watermark {
  position: absolute;
  top: clamp(3rem, 12vh, 6.5rem);
  right: -1.5rem;
  width: clamp(200px, 28vw, 320px);
  height: auto;
  color: var(--color-text);
  opacity: 0.08;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* ---- Brand: logo + name, top right corner ---- */
.top-bar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 1.2rem 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-shadow: 0 1px 10px rgba(8, 12, 18, 0.65);
}

.wordmark svg {
  flex: none;
  filter: drop-shadow(0 1px 6px rgba(8, 12, 18, 0.55));
}

/* ---- Kicker line above the hook (plain text, no pill) ---- */
.badge {
  align-self: flex-start;
  display: inline-block;
  margin-top: auto; /* balances the bottom-pinned fineprint to center content */
  color: var(--color-text-dim);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---- Type ---- */
.hook {
  margin: 0;
  font-size: var(--text-hook);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 27ch;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(8, 12, 18, 0.45);
}

.hook em { font-style: normal; color: #fbbf24; }

/* Forced two line break (LP4, LP6) */
.hook-break {
  text-wrap: normal;
  max-width: 32ch;
}

/* Mid size hook (LP6): fits its longer first line on one line */
.hook-mid {
  font-size: clamp(1.4rem, 0.95rem + 1.9vw, 2.3rem);
}

/* Small lead-in space on a forced second line (LP4) */
.hook-indent {
  margin-left: 2em;
}

/* Extra break that only exists on phones (LP6) */
.br-mobile { display: none; }

/* Longer hooks (LP2): slightly smaller with a wider measure so they hold two lines */
.hook-long {
  font-size: clamp(1.2rem, 0.85rem + 1.3vw, 1.7rem);
  max-width: 44ch;
}

.question, .step-heading {
  margin: 0;
  font-size: var(--text-question);
  font-weight: 600;
  color: var(--color-text);
  max-width: 32ch;
  text-shadow: 0 2px 14px rgba(8, 12, 18, 0.45);
}

.sub {
  margin: 0;
  color: var(--color-text-dim);
  max-width: 46ch;
  font-weight: 400;
  font-size: clamp(1.02rem, 0.97rem + 0.4vw, 1.2rem);
  text-shadow: 0 1px 12px rgba(8, 12, 18, 0.5);
}

/* ---- Poll option cards ---- */
form[data-role="poll"] {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.options legend {
  padding: 0;
  margin-bottom: 1.1rem;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease,
              background-color var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out-expo);
}

.option:hover { border-color: var(--color-line); }
.option:active { transform: scale(0.99); }

.option input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  display: grid;
  place-content: center;
  transition: border-color var(--duration-fast) ease;
}

.option input::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-text);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.option input:checked { border-color: var(--color-text); }
.option input:checked::before { transform: scale(1); }

.option:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
}

.option input:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.option span { font-weight: 500; }

/* ---- Buttons: quiet rectangle with a white outline, like the reference ---- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  padding: 1rem 1.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-card);
  background: rgba(11, 17, 27, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out-expo),
              opacity var(--duration-fast) ease;
}

.btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

.btn-arrow { flex: none; }

.btn-hero {
  width: auto;
  min-width: min(20rem, 100%);
  padding: 1.05rem 2.4rem;
}

.link-skip {
  align-self: center;
  background: none;
  border: 0;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--color-text-dim);
  text-decoration: underline;
  cursor: pointer;
}
.link-skip:hover { color: var(--color-text); }

/* ---- Email form ---- */
.email-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.email-form input[type="email"] {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.05rem;
}

.email-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.email-form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.field-error {
  margin: 0;
  min-height: 1.4em;
  color: var(--color-error);
  font-size: 0.92rem;
}

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Trust badges (LP5) ---- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  font-size: 0.9rem;
  font-weight: 500;
}

.trust-row svg { flex: none; color: #34d399; }

/* ---- Capture icons (LP4): photo / text / video / voice row above the CTA ---- */
.capture-row {
  display: flex;
  gap: clamp(1.2rem, 4vw, 2rem);
}

.capture-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}

.chip-circle {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: var(--color-panel);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-content: center;
  color: var(--color-text);
}

/* ---- Step transitions ---- */
.step[hidden] { display: none; }

.step {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  animation: step-in var(--duration-normal) var(--ease-out-expo);
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
  .option, .btn { transition: none; }
}

/* ---- Thank-you ---- */
.thanks-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: var(--color-panel);
  color: var(--color-text);
}

/* ---- Footer note ---- */
.fineprint {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

/* ---- Mobile type & CTA rhythm ----
   Last in the file so the .hook size wins over .hook-mid / .hook-long. */
@media (max-width: 720px) {
  .hook {
    font-size: 1.35rem;
    line-height: 1.3;
    max-width: none;
  }

  /* Desktop-only forced line breaks stack into a jumble on narrow screens;
     let the hook wrap naturally instead. */
  .hook br { display: none; }
  .hook-indent { margin-left: 0; }

  .capture-row { margin-top: 0.5rem; gap: clamp(0.8rem, 3vw, 1.5rem); }
  .btn-hero { margin-top: 1.4rem; }

  /* LP4 & LP6 mobile hero: one dominant hook, a clearly subordinate
     subtitle, then the actions following in natural flow (same centered
     composition as LP5). 8.1vw is the largest size that keeps LP4 on two
     lines and LP6 on three at 320-428px widths (measured in-browser with
     Poppins loaded). */
  :is([data-page="lp4"], [data-page="lp5"], [data-page="lp6"]) .hook {
    font-weight: 700;
    line-height: 1.18;
    font-size: clamp(1.5rem, 8.1vw, 2.2rem);
  }

  /* LP5's hook is longer: 6.2vw is its two-line ceiling (320-428px) */
  [data-page="lp5"] .hook { font-size: clamp(1.2rem, 6.2vw, 1.75rem); }

  /* LP4 keeps its forced break on mobile so line 2 reads
     "Don't know where to start?" — 6.4vw is the largest size that
     holds that line unbroken at 320px. Line 1 ("Home repair...") is
     short, so it steps up to 10vw with a little air before line 2. */
  [data-page="lp4"] .hook br { display: inline; }
  :is([data-page="lp4"], [data-page="lp6"]) .hook {
    font-size: clamp(1.25rem, 6.4vw, 1.8rem);
  }
  :is([data-page="lp4"], [data-page="lp6"]) .hook-lead {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
  }
  [data-page="lp4"] .hook-indent {
    display: inline-block;
    margin-top: 0.45em;
    color: #fbbf24; /* phone-only emphasis; desktop stays white */
  }

  /* LP6 mirrors LP4's pattern: big "Home repair," lead, then
     "match with a pro," / "and we check the work." on lines 2-3 */
  [data-page="lp6"] .hook br { display: inline; }
  [data-page="lp6"] .hook-tail {
    display: inline-block;
    margin-top: 0.45em;
  }

  /* A hair of air before the "?" at the big lead size (phones only) */
  [data-page="lp6"] .q-mark { margin-left: 0.07em; }

  :is([data-page="lp4"], [data-page="lp6"]) .step[data-step="hero"] .sub {
    margin-top: 0.4rem;
    font-size: 1rem;
    color: var(--color-text-faint);
    max-width: 30ch;
  }
}