/* Stable content columns for the injected v2 salepage. */
:root {
  --sp-type-kicker: clamp(.66rem, .58rem + .16vw, .78rem);
  --sp-type-body: clamp(.92rem, .86rem + .16vw, 1.02rem);
  --sp-type-small: clamp(.78rem, .74rem + .12vw, .88rem);
  --sp-type-note: clamp(.74rem, .7rem + .1vw, .8rem);
  --sp-type-heading: clamp(2.55rem, 3.65vw, 4.25rem);
}

.sp-v2 {
  font-size: var(--sp-type-body);
}

/* Dark hero variant: preserve a calm text field for mobile readability. */
.sp-v2 #hero.sp-light {
  color: #f8f0dc;
}

.sp-v2 #hero .sp-overlay-light {
  background: linear-gradient(90deg, rgba(5, 30, 22, .9) 0%, rgba(5, 30, 22, .72) 48%, rgba(5, 30, 22, .12) 82%);
}

.sp-v2 #hero .sp-btn-ghost {
  border-color: rgba(255, 245, 215, .55);
  color: #fff7df;
}

@media (max-width: 820px) {
  .sp-v2 #hero .sp-overlay-light {
    background: linear-gradient(180deg, rgba(5, 30, 22, .94) 0%, rgba(5, 30, 22, .86) 62%, rgba(5, 30, 22, .28) 100%);
  }
}

.sp-v2 .sp-kicker {
  font-size: var(--sp-type-kicker);
  line-height: 1.35;
  letter-spacing: .16em;
}

.sp-v2 .sp-section h1,
.sp-v2 .sp-section h2 {
  font-size: var(--sp-type-heading);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.sp-v2 .sp-lead {
  font-size: var(--sp-type-body);
  line-height: 1.68;
}

.sp-v2 .sp-grid h3,
.sp-v2 .sp-offers h3 {
  font-size: 1rem;
  line-height: 1.35;
}

.sp-v2 .sp-grid p,
.sp-v2 .sp-offers p,
.sp-v2 .sp-offers strong,
.sp-v2 .sp-offers a,
.sp-v2 .sp-steps span,
.sp-v2 .sp-inline li,
.sp-v2 .sp-checks li,
.sp-v2 .sp-list li,
.sp-v2 .sp-metrics span {
  font-size: var(--sp-type-small);
  line-height: 1.55;
}

/* Evidence, ingredient and audience copy must read as body content, not captions. */
.sp-v2 .sp-list li,
.sp-v2 .sp-checks li {
  font-size: clamp(.94rem, .88rem + .16vw, 1.04rem);
  line-height: 1.62;
}

.sp-v2 .sp-list,
.sp-v2 .sp-checks {
  gap: 14px;
}

.sp-v2 .sp-list + .sp-note,
.sp-v2 .sp-checks + .sp-note {
  font-size: clamp(.82rem, .78rem + .12vw, .9rem);
  line-height: 1.62;
}

.sp-v2 .sp-legal,
.sp-v2 .sp-note,
.sp-v2 .sp-form-status {
  font-size: var(--sp-type-note);
  line-height: 1.55;
}

.sp-v2 .sp-btn {
  font-size: .86rem;
  letter-spacing: .01em;
}

.sp-v2 .sp-accordion summary {
  font-size: var(--sp-type-body);
  line-height: 1.4;
}

.sp-v2 .sp-accordion details p,
.sp-v2 .sp-form label,
.sp-v2 .sp-form input,
.sp-v2 .sp-form select,
.sp-v2 .sp-form textarea {
  font-size: var(--sp-type-small);
  line-height: 1.5;
}

.sp-v2 .sp-metrics b {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
}

.sp-v2 .sp-footer {
  font-size: var(--sp-type-small);
}

.sp-v2 .sp-wrap {
  display: flex;
  flex-direction: column;
  width: min(1320px, calc(100% - 112px));
  padding-block: clamp(64px, 6vw, 96px);
}

.sp-v2 .sp-left {
  align-items: flex-start;
  padding-left: 0;
  padding-right: 0;
}

.sp-v2 .sp-left > * {
  width: min(100%, 700px);
}

.sp-v2 .sp-right {
  align-items: flex-end;
  padding-left: 0;
  padding-right: 0;
}

.sp-v2 .sp-right > * {
  width: min(100%, 620px);
}

  .sp-v2 .sp-section h1,
  .sp-v2 .sp-section h2 {
    font-size: var(--sp-type-heading);
    line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.sp-v2 .sp-section h1 br,
.sp-v2 .sp-section h2 br {
  display: block;
}

.sp-v2 .sp-grid,
.sp-v2 .sp-steps,
.sp-v2 .sp-metrics,
.sp-v2 .sp-checks,
.sp-v2 .sp-list,
.sp-v2 .sp-inline,
.sp-v2 .sp-actions,
.sp-v2 .sp-accordion,
.sp-v2 .sp-offers,
.sp-v2 .sp-form {
  max-width: 700px;
}

@media (max-width: 1100px) {
  .sp-v2 .sp-wrap {
    width: min(100% - 64px, 1000px);
  }

  .sp-v2 .sp-left > *,
  .sp-v2 .sp-right > * {
    width: min(100%, 600px);
  }

  .sp-v2 .sp-section h1,
  .sp-v2 .sp-section h2 {
    font-size: clamp(2.45rem, 5.1vw, 3.55rem);
  }
}

@media (max-width: 820px) {
  .sp-v2,
  .sp-v2 .sp-section {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sp-v2 .sp-section {
    min-height: max(820px, 100svh);
  }

  .sp-v2 .sp-wrap {
    width: calc(100% - 32px);
    max-width: calc(100vw - 32px);
    align-items: flex-start;
    padding-block: clamp(42px, 8vw, 58px);
  }

  .sp-v2 .sp-left > *,
  .sp-v2 .sp-right > * {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .sp-v2 .sp-section h1,
  .sp-v2 .sp-section h2 {
    font-size: clamp(2.05rem, 8.5vw, 2.8rem);
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    line-height: 1.08;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  .sp-v2 .sp-section h1 br,
  .sp-v2 .sp-section h2 br {
    display: block;
  }

  .sp-v2 .sp-btn,
  .sp-v2 .sp-form input,
  .sp-v2 .sp-form select,
  .sp-v2 .sp-form textarea,
  .sp-v2 .sp-accordion summary {
    min-height: 48px;
  }

  .sp-v2 .sp-grid,
  .sp-v2 .sp-metrics,
  .sp-v2 .sp-offers {
    gap: 10px;
  }

  .sp-v2 .sp-grid article,
  .sp-v2 .sp-metrics article,
  .sp-v2 .sp-offers article {
    padding: 15px;
  }

  .sp-v2 .sp-form {
    gap: 12px;
  }

  .sp-v2 #hero .sp-bg,
  .sp-v2 #benefits .sp-bg,
  .sp-v2 #ingredients .sp-bg,
  .sp-v2 #audience .sp-bg,
  .sp-v2 #usage .sp-bg,
  .sp-v2 #why .sp-bg,
  .sp-v2 #story .sp-bg,
  .sp-v2 #experience .sp-bg,
  .sp-v2 #objections .sp-bg,
  .sp-v2 #closing .sp-bg {
    object-position: 72% center;
  }

  .sp-v2 #value .sp-bg,
  .sp-v2 #offers .sp-bg,
  .sp-v2 #order-form .sp-bg,
  .sp-v2 #faq .sp-bg {
    object-position: 25% center;
  }

  .sp-v2 #problem .sp-bg,
  .sp-v2 #solution .sp-bg {
    object-position: center;
  }
}

@media (max-width: 360px) {
  .sp-v2 .sp-wrap {
    width: calc(100% - 28px);
  }

  .sp-v2 .sp-section h1,
  .sp-v2 .sp-section h2 {
    font-size: clamp(2rem, 10.8vw, 2.35rem);
  }

  .sp-v2 .sp-kicker {
    font-size: .66rem;
    line-height: 1.35;
    letter-spacing: .12em;
  }

  .sp-v2 .sp-lead {
    font-size: .94rem;
    line-height: 1.62;
  }

  .sp-v2 .sp-grid h3,
  .sp-v2 .sp-offers h3 {
    font-size: .98rem;
  }

  .sp-v2 .sp-grid p,
  .sp-v2 .sp-offers p,
  .sp-v2 .sp-offers strong,
  .sp-v2 .sp-offers a,
  .sp-v2 .sp-steps span,
  .sp-v2 .sp-inline li,
  .sp-v2 .sp-checks li,
  .sp-v2 .sp-list li,
  .sp-v2 .sp-metrics span,
  .sp-v2 .sp-accordion details p,
  .sp-v2 .sp-form label,
  .sp-v2 .sp-form input,
  .sp-v2 .sp-form select,
  .sp-v2 .sp-form textarea {
    font-size: .84rem;
  }

  .sp-v2 .sp-list li,
  .sp-v2 .sp-checks li {
    font-size: .94rem;
    line-height: 1.58;
  }

  .sp-v2 .sp-list,
  .sp-v2 .sp-checks {
    gap: 13px;
  }

  .sp-v2 .sp-list + .sp-note,
  .sp-v2 .sp-checks + .sp-note {
    font-size: .84rem;
    line-height: 1.58;
  }
}
