/* ──────────────────────────────────────────────────────────────────────────
   lp.css — ad landing-page chrome for MoldCure.
   Loaded ONLY by the /service/* paid landing pages, on top of
   colors_and_type.css + site.css + service-page.css + remediation.css.

   These pages live one folder deep (service/…), so the HTML references the
   shared stylesheets with ../ — url() values in this file resolve relative
   to this file at the repo root.
   ────────────────────────────────────────────────────────────────────────── */

/* LP-local tokens derived from the MoldCure palette in colors_and_type.css.
   The navy RGB triplets exist so the hero scrim can run alpha ramps over a
   photo; the deep gradient stays inside the navy family per the brand rule
   (never mix navy and green in one gradient). */
:root {
  --lp-rgb-navy-deep: 10, 21, 48;    /* --color-brand-primary-900 #0a1530 */
  --lp-rgb-navy:      21, 41, 79;    /* --color-brand-primary-700 #15294f */
  --lp-rgb-mid:       42, 79, 147;   /* --color-brand-primary-500 #2a4f93 */
  --lp-gradient-deep: linear-gradient(90deg, #0a1530 0%, #15294f 100%);
}

/* ── Stripped ad-LP header ─────────────────────────────────────────────────
   No dropdowns, no escape routes — logo + phone + one consultation anchor. */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.lp-nav-logo img { height: 38px; width: auto; display: block; }
.lp-nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.lp-nav-phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800;
  color: var(--color-brand-primary);
  font-size: 1.05rem;
  white-space: nowrap;
}
.lp-nav-phone svg { width: 18px; height: 18px; }
.lp-nav-rating {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary);
}
.lp-nav-rating .stars { display: inline-flex; gap: 1px; }
.lp-nav-rating .stars svg { width: 14px; height: 14px; fill: var(--color-accent-gold); }
@media (max-width: 760px) {
  .lp-nav-rating { display: none; }
  .lp-nav-phone span { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Two columns: copy + benefit checklist (left), multi-step form card (right). */
.lp-hero {
  /* Per-page override: set --lp-hero-img on the section to swap the photo. */
  --lp-hero-img: url(assets/hero-homepage.jpg);
  position: relative;
  overflow: hidden;
  padding: 4rem 0 4.5rem;
  /* The photo fills the entire hero (cover) and a translucent navy overlay
     sits on top so the reversed white copy stays legible across the whole
     section. The diagonal scrim runs deeper on the left (under the copy)
     and lifts toward the right; a soft top/bottom gradient grounds the
     photo edges. */
  background-color: var(--color-brand-primary-900);
  background-image:
    linear-gradient(100deg,
      rgba(var(--lp-rgb-navy-deep),0.92) 0%,
      rgba(var(--lp-rgb-navy-deep),0.80) 45%,
      rgba(var(--lp-rgb-navy-deep),0.60) 100%),
    linear-gradient(180deg,
      rgba(var(--lp-rgb-navy-deep),0.45) 0%,
      rgba(var(--lp-rgb-navy-deep),0.15) 30%,
      rgba(var(--lp-rgb-navy-deep),0.15) 70%,
      rgba(var(--lp-rgb-navy-deep),0.55) 100%),
    var(--lp-hero-img);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
/* Let the columns shrink below their content's intrinsic width so the hero
   never overflows (and gets clipped by `overflow:hidden`) on narrow phones. */
.lp-hero-copy, .lp-quote { min-width: 0; }
.lp-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.9rem 0 1rem;
  color: #fff;
}
.lp-hero .t-lead { max-width: 36rem; color: var(--color-white-text-lead); }

/* Copy reversed to white over the photo scrim */
.lp-hero .lp-checklist li { color: var(--color-white-text-lead); }
.lp-hero .lp-checklist li b { color: #fff; }
.lp-hero .lp-hero-trustline { color: var(--color-white-text-muted); }
.lp-hero .lp-hero-trustline b { color: #fff; }

/* Benefit checklist */
.lp-checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.lp-checklist li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  font-weight: 500;
}
.lp-checklist li b { font-weight: 800; }
.lp-check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-status-success);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.lp-check svg { width: 14px; height: 14px; stroke: #fff; }

.lp-hero-trustline {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: 0.95rem; color: var(--color-text-secondary);
}
.lp-hero-trustline .stars { display: inline-flex; gap: 2px; }
.lp-hero-trustline .stars svg { width: 18px; height: 18px; fill: var(--color-accent-gold); }
.lp-hero-trustline b { color: var(--color-text-primary); }

@media (max-width: 980px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .lp-hero {
    padding: 2.5rem 0 3rem;
    /* Stronger, even scrim once the copy spans the full width. */
    background:
      linear-gradient(180deg,
        rgba(var(--lp-rgb-navy-deep),0.93) 0%,
        rgba(var(--lp-rgb-navy-deep),0.86) 55%,
        rgba(var(--lp-rgb-navy),0.80) 100%),
      var(--lp-hero-img);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
  }
}

/* ── Multi-step consultation card ─────────────────────────────────────────*/
.lp-quote {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-image);
  padding: 2rem 2rem 1.75rem;
  position: relative;
}
.lp-quote-head { text-align: center; margin-bottom: 1.25rem; }
.lp-quote-head h2 {
  font-size: 1.45rem; letter-spacing: -0.02em; margin: 0 0 0.35rem;
}
.lp-quote-head p { font-size: 0.92rem; color: var(--color-text-secondary); margin: 0; }
.lp-quote-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-brand-primary-700);
  background: var(--color-surface-subtle);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}
.lp-quote-badge svg { width: 13px; height: 13px; }

/* progress */
.lp-progress { margin-bottom: 1.25rem; }
.lp-progress-bar {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--color-border-default); overflow: hidden;
}
.lp-progress-fill {
  height: 100%; width: 20%;
  background: var(--gradient-brand);
  border-radius: var(--radius-pill);
  transition: width 0.45s var(--ease-brand);
}
.lp-progress-label {
  display: flex; justify-content: space-between;
  margin-top: 0.5rem; font-size: 0.75rem; color: var(--color-text-tertiary);
  font-weight: 600;
}

/* steps */
.lp-step { display: none; animation: lp-step-in 0.4s var(--ease-out) both; }
.lp-step.is-active { display: block; }
@keyframes lp-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lp-step-q {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 0.25rem; color: var(--color-text-primary);
}
.lp-step-help { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0 0 1rem; }

/* choice buttons */
.lp-choices { display: grid; gap: 0.6rem; }
.lp-choices.two { grid-template-columns: 1fr 1fr; }
.lp-choice {
  display: flex; align-items: center; gap: 0.75rem;
  text-align: left; width: 100%;
  background: var(--color-surface-app);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  font: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-brand), background 0.2s var(--ease-brand), transform 0.15s var(--ease-brand);
}
.lp-choice:hover { border-color: var(--color-border-brand-30); background: #fff; transform: translateY(-1px); }
.lp-choice.is-selected {
  border-color: var(--color-brand-primary);
  background: var(--color-surface-subtle);
  box-shadow: 0 0 0 3px rgba(var(--lp-rgb-mid),0.12);
}
.lp-choice-emoji { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }

/* fields */
.lp-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.lp-field label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-text-secondary);
}
.lp-field label .req { color: var(--color-brand-primary-700); }
.lp-field input {
  font: inherit; font-size: 0.95rem; color: var(--color-text-primary);
  background: var(--color-surface-app);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  transition: border-color 0.2s var(--ease-brand), box-shadow 0.2s var(--ease-brand);
}
.lp-field input:focus {
  outline: none; border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--lp-rgb-mid),0.12); background: #fff;
}
.lp-field.err input { border-color: var(--color-status-danger); }
.lp-field-error { font-size: 0.78rem; color: var(--color-status-danger); display: none; }
.lp-field.err .lp-field-error { display: block; }
.lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }

/* nav buttons */
.lp-step-nav { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.lp-back {
  flex: 0 0 auto;
  background: transparent; border: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--color-text-secondary);
  padding: 0 0.9rem; border-radius: var(--radius-pill);
}
.lp-back:hover { color: var(--color-brand-primary); }
.lp-next { flex: 1 1 auto; justify-content: center; }

.lp-quote-reassure {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  margin-top: 0.9rem; font-size: 0.78rem; color: var(--color-text-tertiary);
}
.lp-quote-reassure svg { width: 14px; height: 14px; stroke: var(--color-status-success); }

.lp-quote-callrow {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--color-border-subtle);
  text-align: center; font-size: 0.9rem; color: var(--color-text-secondary);
}
.lp-quote-callrow a { font-weight: 800; color: var(--color-brand-primary); white-space: nowrap; }

/* success state */
.lp-quote-success { display: none; text-align: center; padding: 1.5rem 0.5rem; }
.lp-quote.is-done .lp-quote-success { display: block; }
.lp-quote.is-done .lp-quote-form,
.lp-quote.is-done .lp-progress,
.lp-quote.is-done .lp-quote-head { display: none; }
.lp-success-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: var(--radius-pill); background: var(--color-status-success);
  display: flex; align-items: center; justify-content: center;
}
.lp-success-icon svg { width: 32px; height: 32px; stroke: #fff; }

/* ── Process timeline — photo variant (LP only) ────────────────────────────
   Adds a photo to the top of each step card. Scoped to `.with-photo` so the
   shared `.process-timeline` on the main service pages is unaffected. */
.process-timeline.with-photo::before { display: none; } /* drop connector line */
.process-timeline.with-photo .process-step {
  padding: 0 0 1.6rem;
  gap: 0.55rem;
  overflow: hidden;
  border-radius: 0.9rem;
}
.process-timeline.with-photo .icon { display: none; }
.process-timeline.with-photo .process-photo {
  display: block; width: 100%; aspect-ratio: 16 / 11;
  object-fit: cover; margin: 0 0 0.5rem;
}
.process-timeline.with-photo .num {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  width: 2.85rem; height: 2.85rem; font-size: 1.2rem;
  box-shadow: var(--shadow-card);
}
.process-timeline.with-photo h3 { margin-top: 0.3rem; }
.process-timeline.with-photo h3,
.process-timeline.with-photo p { padding: 0 1.6rem; }

/* ── Accreditation strip ───────────────────────────────────────────────────*/
.lp-accred {
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-section);
  padding: 1.4rem 0;
}
.lp-accred-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1rem 2.5rem;
}
.lp-accred-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-text-tertiary);
}
.lp-accred-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 700; color: var(--color-brand-primary);
}
.lp-accred-item svg { width: 20px; height: 20px; stroke: var(--color-brand-primary-700); }

/* ── Paired CTA row (filled "book" + outline "call", equal weight) ─────────*/
.lp-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ── Before / After transformation ─────────────────────────────────────────*/
.lp-ba-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  margin-top: 2.75rem;
  position: relative; /* anchor for the hand-drawn arrow */
}
.lp-ba-col { display: flex; flex-direction: column; }

/* Column heading (title + subtitle), centered above the list */
.lp-ba-head { text-align: center; margin-bottom: 1.25rem; }
.lp-ba-tag {
  display: block;
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text-primary);
  margin: 0 0 0.3rem;
}
.lp-ba-sub { font-size: 0.95rem; color: var(--color-text-secondary); margin: 0; }

/* The comparison list as a bordered card with row dividers */
.lp-ba-list {
  list-style: none; margin: 0; padding: 0.2rem 1.4rem;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.9rem;
}
.lp-ba-col.before .lp-ba-list {
  border-color: #fca5a5;
  box-shadow: 0 0 0 1px #fecaca inset, var(--shadow-subtle);
}
.lp-ba-col.after .lp-ba-list {
  border-color: #86efac;
  box-shadow: 0 0 0 1px #bbf7d0 inset, var(--shadow-subtle);
}
.lp-ba-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.95rem; line-height: 1.45; color: var(--color-text-body);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.lp-ba-list li:last-child { border-bottom: none; }
.lp-ba-list b { color: var(--color-text-primary); font-weight: 700; }
.lp-ba-list .mark {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 900; line-height: 1; margin-top: 1px;
}
.lp-ba-col.before .mark { background: #fee2e2; color: #dc2626; }
.lp-ba-col.after  .mark { background: var(--color-status-success); color: #fff; }

/* Hand-drawn arrow arcing from "before" across to "after" */
.lp-ba-arrow {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  width: 196px; color: var(--color-brand-secondary);
  z-index: 2; pointer-events: none;
}
.lp-ba-arrow svg { width: 100%; height: auto; display: block; transform: scaleY(-1); }

@media (max-width: 760px) {
  .lp-ba-grid { grid-template-columns: 1fr; gap: 2rem; }
  .lp-ba-arrow { display: none; }
}

/* ── Benefit grid ──────────────────────────────────────────────────────────*/
.lp-benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-top: 2.5rem;
}
.lp-benefit {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 1.6rem;
  transition: transform 0.3s var(--ease-brand), box-shadow 0.3s var(--ease-brand), border-color 0.3s var(--ease-brand);
}
.lp-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--color-border-brand-30); }
.lp-benefit-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.lp-benefit-icon svg { width: 26px; height: 26px; stroke: var(--color-brand-primary-700); }
.lp-benefit h3 { font-size: 1.1rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.lp-benefit p { font-size: 0.92rem; line-height: 1.55; color: var(--color-text-body); margin: 0; }
.lp-benefit p b { color: var(--color-text-primary); }
@media (max-width: 980px) { .lp-benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .lp-benefits { grid-template-columns: 1fr; } }

/* ── Badge-card variant of the benefit grid ─────────────────────────────────
   2-up, centered copy, with a circular icon badge floating over the top edge. */
.lp-benefits.is-badge-cards {
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem 1.75rem;
  margin-top: 3.5rem;
}
.lp-benefits.is-badge-cards .lp-benefit {
  position: relative;
  text-align: center;
  padding: 3.75rem 2rem 2.25rem;
  margin-top: 2.5rem; /* room for the overhanging badge */
  border-radius: 1.1rem;
}
.lp-benefits.is-badge-cards .lp-benefit-icon {
  position: absolute;
  top: -2.5rem; left: 50%; transform: translateX(-50%);
  width: 84px; height: 84px; margin: 0; padding: 4px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--color-text-primary);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}
.lp-benefits.is-badge-cards .lp-benefit-icon svg { width: 34px; height: 34px; }
.lp-benefits.is-badge-cards .lp-benefit h3 { font-size: 1.2rem; }
.lp-benefits.is-badge-cards .lp-benefit p { color: var(--color-text-secondary); }
@media (max-width: 760px) { .lp-benefits.is-badge-cards { grid-template-columns: 1fr; } }

/* ── 3-up featured reviews ─────────────────────────────────────────────────*/
.svc-reviews-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 900px) { .svc-reviews-3 { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* ── 3-step "get started" process + closing CTA ────────────────────────────*/
.lp-steps3 {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
  margin-top: 3.5rem;
}
.lp-step3 {
  position: relative;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: 1.1rem;
  padding: 3.5rem 1.75rem 2rem;
  margin-top: 2.25rem;
  text-align: center;
}
.lp-step3-icon {
  position: absolute; top: -2.25rem; left: 50%; transform: translateX(-50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--color-border-brand-30);
  box-shadow: var(--shadow-subtle);
  display: flex; align-items: center; justify-content: center;
}
.lp-step3-icon svg { width: 32px; height: 32px; }
.lp-step3-icon.is-check { background: var(--color-status-success); border-color: var(--color-status-success); }
.lp-step3 h3 { font-size: 1.15rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.lp-step3 p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-secondary); margin: 0; }
/* curved connector arrows over the gaps (desktop only) */
.lp-steps3-arrow {
  position: absolute; top: 0.4rem; width: 104px; height: auto;
  color: var(--color-brand-secondary); opacity: 0.85;
  pointer-events: none; z-index: 1;
}
.lp-steps3-arrow.a1 { left: calc(33.333% - 52px); }
.lp-steps3-arrow.a2 { left: calc(66.666% - 52px); }
.lp-steps3-arrow svg { width: 100%; height: auto; display: block; transform: scaleY(-1); }
.lp-steps3-cta {
  margin-top: 2.75rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
/* Dark-band variant: lighten the connector arrows for legibility */
.svc-section.is-dark .lp-steps3-arrow { color: var(--color-brand-secondary-500); opacity: 1; }
@media (max-width: 860px) {
  .lp-steps3 { grid-template-columns: 1fr; gap: 2.75rem; max-width: 440px; margin-left: auto; margin-right: auto; }
  .lp-steps3-arrow { display: none; }
}

/* ── Faint gridlines on every dark navy band ───────────────────────────────
   Some sections opt in with `.surface-grid-dark`; on the landing pages we
   want the subtle 64px grid on ALL navy bands for consistency. lp.css is
   only loaded by the /service/ landing pages, so this never touches the
   homepage or standard service pages. */
.svc-section.is-dark { position: relative; overflow: hidden; }
.svc-section.is-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-white-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-white-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
  opacity: var(--grid-opacity, 0.6);
}

/* ── Squarer corners (LP direction) ────────────────────────────────────────*/
.compare { border-radius: 0.9rem; }

/* ── Guarantee band (risk reversal) ────────────────────────────────────────*/
.lp-guarantee {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.75rem;
  color: #fff;
}
.lp-guarantee > div:last-child { max-width: 760px; }
.lp-guarantee-seal {
  width: 110px; height: 110px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1.5px solid var(--color-text-primary);
  padding: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; line-height: 1; gap: 2px;
}
.lp-guarantee-seal .big {
  font-size: 2.1rem; font-weight: 900; letter-spacing: -0.02em;
  color: var(--color-brand-primary);
}
.lp-guarantee-seal .sm {
  font-size: 0.7rem; font-weight: 700; line-height: 1.05; text-align: center;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--color-brand-primary-700);
}
.lp-guarantee h2 { color: #fff; font-size: 1.6rem; margin: 0 0 0.5rem; }
/* "Why we can offer this?" callout, adapted to the dark band */
.lp-guarantee-why {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--color-white-border-hi);
  border-radius: 1.1rem;
  background: var(--color-white-surface);
  text-align: left;
}
.lp-guarantee-why .why-title { color: #fff; font-weight: 800; margin: 0 0 0.35rem; font-size: 1rem; }
.lp-guarantee-why p:last-child { margin: 0; }
.lp-guarantee p { color: var(--color-white-text-lead); margin: 0 0 0.4rem; font-size: 1rem; line-height: 1.55; }
.lp-guarantee p b { color: #fff; }
@media (max-width: 700px) { .lp-guarantee { text-align: center; padding: 2rem 1.5rem; } .lp-guarantee-seal { margin: 0 auto; } }

/* ── Test-option cards (testing LP) ────────────────────────────────────────*/
.lp-tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.lp-test {
  background: var(--color-surface-card); border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);   /* white card keeps dark text even on a dark section */
  border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-brand), box-shadow 0.3s var(--ease-brand);
}
.lp-test:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.lp-test-photo { aspect-ratio: 16/10; overflow: hidden; background: var(--color-surface-subtle); }
.lp-test-photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-test-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.lp-test-body h3 { font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; }
.lp-test-body p { font-size: 0.92rem; line-height: 1.55; color: var(--color-text-body); margin: 0; }
.lp-test-list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.lp-test-list li { display: flex; gap: 0.5rem; font-size: 0.88rem; align-items: flex-start; }
.lp-test-list svg { width: 16px; height: 16px; stroke: var(--color-status-success); flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 980px) { .lp-tests { grid-template-columns: 1fr; } }

/* ── Pain-point / agitation list ───────────────────────────────────────────*/
.lp-pain {
  background: var(--color-surface-card); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg); padding: 2.25rem;
}
.lp-pain-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.lp-pain-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.lp-pain-list .q { font-size: 1.2rem; flex: 0 0 auto; }
.lp-pain-list b { color: var(--color-text-primary); }

/* ── Why testing matters — split text + photo ──────────────────────────────*/
.lp-why {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.lp-why-text h2 { margin: 1rem 0 0; }
.lp-why-text .t-lead { margin-top: 1rem; }
.lp-why-text p { margin: 0.9rem 0 0; color: var(--color-text-secondary); line-height: 1.65; }
.lp-why-sub {
  font-size: 1.3rem; line-height: 1.2; margin: 1.85rem 0 0;
  color: var(--color-text-primary);
}
.lp-why-text .lp-pain-list { margin: 1.1rem 0; }
.lp-hl {
  background: var(--color-brand-primary-100); color: var(--color-text-primary);
  font-weight: 600; padding: 0.05em 0.18em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lp-why-media img {
  display: block; width: 100%; height: auto;
  border-radius: 1.4rem;
}
@media (max-width: 880px) {
  .lp-why { grid-template-columns: 1fr; gap: 2rem; }
  .lp-why-media { order: -1; }
}

/* ── Sticky mobile CTA bar ─────────────────────────────────────────────────*/
.lp-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 0.6rem; padding: 0.7rem 0.8rem;
  background: var(--color-glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border-default);
  box-shadow: 0 -8px 24px rgba(var(--lp-rgb-navy-deep),0.08);
}
.lp-sticky-bar .btn { flex: 1 1 0; justify-content: center; padding: 0.85rem 0.5rem; font-size: 0.95rem; }
@media (max-width: 760px) {
  .lp-sticky-bar { display: flex; }
  body { padding-bottom: 4.5rem; }
}

/* ── Minimal LP footer ─────────────────────────────────────────────────────*/
.lp-footer {
  background: var(--lp-gradient-deep); color: var(--color-white-text-muted);
  padding: 2.5rem 0; margin-top: 0;
}
.lp-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.lp-footer img { height: 34px; }
.lp-footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; font-size: 0.95rem; }
.lp-footer-contact a { color: #fff; font-weight: 700; }
.lp-footer-legal { font-size: 0.8rem; color: var(--color-white-text-muted); width: 100%; padding-top: 1.25rem; border-top: 1px solid var(--color-white-border); margin-top: 0.5rem; }
.lp-footer-legal a { color: var(--color-white-text-muted); }