/* ---------------------------------------------------------------------------
   LP4 — "Home Repair... Not Sure Who To Call?"
   A product-demo hero: copy on the left, the three-step flow artwork on the
   right. Unlike LP1-LP11 this page has no photo backdrop; the artwork carries
   the visual weight, so the page sits on a flat dark surface instead.

   The flow artwork is the owner's own mock-up (images/lp4-flow.*), cropped out
   of the full-page design and masked to transparent corners so the page
   background shows through its rounded edges.
   --------------------------------------------------------------------------- */

[data-page="lp4"] {
  --lp4-surface: #0d1420;
  --lp4-line: rgba(255, 255, 255, 0.07);
}

/* No backdrop photo: kill the shared image layer and flatten the scrim into a
   single dark surface with a touch of lift behind the artwork. */
[data-page="lp4"] .lp::before { display: none; }

[data-page="lp4"] .lp::after {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(34, 197, 94, 0.07) 0%, transparent 55%),
    radial-gradient(90% 70% at 8% 12%, rgba(148, 180, 255, 0.05) 0%, transparent 60%),
    var(--lp4-surface);
}

/* Space allocation is taken straight off the source design (12345.png,
   1672x941): 3.5% left margin, 33.6% copy, 1.7% gap, 59.4% panel, 1.9% right
   margin. The shared 46rem centred measure is a single-column frame and gets
   nowhere near it. */
[data-page="lp4"] .frame {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 3.5vw, 4rem) clamp(1rem, 1.85vw, 2.2rem);
}

/* ...but the wide frame is only right for the two-column hero. The email and
   thanks steps are single-column forms and would stretch to 88rem otherwise. */
[data-page="lp4"] .step[data-step="email"],
[data-page="lp4"] .step[data-step="thanks"] {
  width: min(32rem, 100%);
}

/* .badge normally sits directly in .frame, where margin-top:auto balances the
   bottom-pinned fineprint. Inside .hero-copy that would shove the column down. */
[data-page="lp4"] .badge { margin-top: 0; }

/* ---- Hero: copy left, artwork right ---- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.565fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.73vw, 1.9rem);
  align-items: center;
  width: 100%;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}

/* ---- Capture chips with hairline dividers ---- */
[data-page="lp4"] .capture-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.2rem 0 0;
}

[data-page="lp4"] .capture-chip {
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 clamp(0.9rem, 2vw, 1.6rem);
  border-left: 1px solid var(--lp4-line);
}

[data-page="lp4"] .capture-chip:first-child {
  padding-left: 0;
  border-left: 0;
}

/* ---- Flow artwork ---- */
.flow-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 993 / 709;
}


/* ---- Desktop: centre the hero in the viewport ----
   .step is a *column* flex container (shared/styles.css), so the vertical axis
   is the main axis — justify-content centres it, align-items would not.

   The fineprint is taken out of flow and the block padding made symmetric, so
   the panel centres on the viewport itself. Left in flow it stole ~46px from
   the bottom of the centring box and pushed the artwork visibly high, which is
   the uneven top/bottom gap in the source comparison. */
@media (min-width: 1081px) {
  [data-page="lp4"] .frame {
    position: relative;
    padding-block: clamp(3rem, 6.5vh, 5rem);
  }

  [data-page="lp4"] .step[data-step="hero"] {
    flex: 1;
    justify-content: center;
  }

  [data-page="lp4"] .fineprint {
    position: absolute;
    left: clamp(1.25rem, 3.5vw, 4rem);
    bottom: clamp(1.5rem, 4.5vh, 3rem);
    margin: 0;
    padding: 0;
  }
}

/* ---- Tablet: artwork drops under the copy ---- */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ---- Phones: the V3 mobile design ----
   Not a squeezed version of the desktop layout — the source design drops the
   sub-headline, spreads the chips full width, and adds a "How it works" band
   above its own taller artwork. */
@media (max-width: 720px) {
  /* V3 puts the wordmark top-left, not top-right */
  [data-page="lp4"] .top-bar {
    right: auto;
    left: 0;
  }

  [data-page="lp4"] .frame {
    padding-inline: clamp(1.1rem, 6.6vw, 2rem);
  }

  /* V3 drops the sub-headline on phones so the CTA clears the fold. Scoped to
     the hero — the email step's own .sub must stay. */
  [data-page="lp4"] .step[data-step="hero"] .sub { display: none; }

  .hero-copy { gap: 1.05rem; }

  /* Shared mobile CSS puts 1.4rem above .btn-hero; LP4 sits the CTA closer to
     the capture chips. */
  [data-page="lp4"] .btn-hero { margin-top: 0.25rem; }

  /* band is gone — pull the artwork up under the CTA */
  .hero-grid { gap: 1.4rem; }

  /* Chips span the full width with the dividers falling between them */
  [data-page="lp4"] .capture-row { width: 100%; }

  [data-page="lp4"] .capture-chip {
    flex: 1;
    padding: 0;
    font-size: 0.82rem;
  }

  /* Full-width CTA: label centred, arrow pinned right (as drawn in V3) */
  [data-page="lp4"] .btn-hero {
    position: relative;
    align-self: stretch;
    width: 100%;
    justify-content: center;
    padding: 1.15rem 3.2rem;
  }

  [data-page="lp4"] .btn-hero .btn-arrow {
    position: absolute;
    right: 1.4rem;
    width: 22px;
    height: 22px;
  }

  /* Full-bleed: the negative margin cancels .frame's inline padding exactly,
     so the artwork spans the viewport without overflowing it. */
  .flow-media {
    margin-inline: calc(clamp(1.1rem, 6.6vw, 2rem) * -1);
  }

  .flow-media img {
    aspect-ratio: 882 / 705;
  }

  [data-page="lp4"] .fineprint { text-align: center; }
}