/* ============================================================
   PRODUCT FUNNEL — long-form landing-page sections (rebuild)
   Warm home-system palette to match the below-hero flow.
   Tokens only. (Draft: shared file; split per-section on live port.)
   ============================================================ */

.pf {
  padding: var(--section-py) var(--section-px) var(--section-py-b);
  text-align: center;
}
.pf-checklist-band {
  padding-block: clamp(var(--space-5), 2vw, var(--space-6));
  background: var(--cream);
}
.pf-checklist-band .pf__inner {
  max-width: calc(var(--container) - (2 * var(--space-24)));
}
.pf__inner { max-width: 820px; margin: 0 auto; min-width: 0; }

.pf__eyebrow {
  color: var(--gold);
  display: block;
  width: fit-content;
  margin: 0 auto clamp(var(--space-3), 1.2vw, var(--space-4));
}

/* Operator, 2026-07-28: agitation's and mechanism's eyebrows both reverted to
   the gold/beige default (were blue-on-blue) — their H2 accent words keep
   the blue accent. */
.pf-agitation .pf__title em,
.pf-mechanism .pf__title em {
  color: var(--blush);
}
.pf__title {
  font-family: "Heebo", var(--sans);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 clamp(var(--space-4), 2vw, var(--space-6));
}
.pf__title em { font-style: normal; color: var(--gold); }
.pf__lead {
  font-family: "Heebo", var(--sans);
  font-weight: 700;
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  color: var(--ink);
  margin: 0 0 clamp(var(--space-4), 2vw, var(--space-6));
}
.pf__body {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--taupe);
  line-height: 1.8;
  margin: 0 auto clamp(var(--space-4), 2vw, var(--space-6));
  max-width: 64ch;
}
.pf__body:last-child { margin-bottom: 0; }
.pf__body strong { color: var(--ink); font-weight: 700; }

/* Operator, 2026-07-28: these two emphasised runs must each START a line rather
   than beginning mid-row and wrapping, which was splitting one bold sentence
   across two rows and orphaning the tail. Block display makes the break fall at
   the clause boundary at every width instead of wherever the text happens to
   run out. Scoped to these two sections on purpose — the other pf titles and
   bodies keep their inline flow. Note this intentionally overrides the
   "h2 reads as one line on desktop" default in site CLAUDE.md §3 for
   .pf-loc-again only, per operator instruction. */
.pf-mechanism .pf__body strong {
  display: block;
  margin-top: clamp(var(--space-3), 1.5vw, var(--space-4));
}
.pf-loc-again .pf__title em { display: block; }

/* --- Agitation checklist --- */
.pf-checklist__header {
  font-family: "Heebo", var(--sans);
  font-weight: 800;
  color: var(--ink);
  margin: clamp(var(--space-6), 2.5vw, var(--space-8)) 0 var(--space-5);
}
.pf-checklist-band .pf-checklist__header {
  margin-top: 0;
  margin-bottom: var(--space-4);
}
.pf-checklist {
  list-style: none;
  padding: 0;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
  text-align: right;
}
.pf-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  font-weight: 600;
  min-width: 0;
}
.pf-checklist li::before {
  content: "✓";
  color: var(--gold);
  font-weight: 800;
  flex: none;
}
.pf-checklist-band .pf-checklist {
  max-width: none;
  gap: var(--space-2);
}
.pf-checklist-band .pf-checklist li {
  position: relative;
  justify-content: center;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-10);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-footer);
}
.pf-checklist-band .pf-checklist li::before {
  position: absolute;
  inset-inline-start: var(--space-4);
  color: var(--blush);
  font-size: 1.15em;
}

/* --- Benefits grid --- */
.pf-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
  max-width: 760px;
  margin: clamp(var(--space-6), 2.5vw, var(--space-8)) auto 0;
  text-align: right;
}
.pf-benefit {
  background: var(--surface-lit);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: clamp(var(--space-5), 2.2vw, var(--space-8));
  min-width: 0;
}
.pf-benefit__label {
  display: block;
  font-family: "Heebo", var(--sans);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.pf-benefit__text { color: var(--taupe); line-height: 1.7; margin: 0; }
.pf-benefits__close {
  font-family: "Heebo", var(--sans);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  max-width: 44ch;
  margin: clamp(var(--space-6), 2.5vw, var(--space-8)) auto clamp(var(--space-5), 2vw, var(--space-6));
}

/* --- Shared CTA (gold, matches fair-question) --- */
.pf-cta {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.95rem 2.6rem;
  min-height: 3rem;
  background: var(--gold);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-button);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}
.pf-cta:hover,
.pf-cta:focus-visible {
  background: color-mix(in srgb, var(--gold) 82%, #000 18%);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .pf-checklist,
  .pf-benefits__grid { grid-template-columns: 1fr; }

  .pf-checklist-band .pf-checklist li {
    min-height: var(--space-10);
    padding-inline: var(--space-8);
  }
}