/* ═══ Paath Symptom Funnel — widget styles (scoped to #pf-root) ═══
   Extracted VERBATIM from paath-symptom-quiz.html so the standalone preview
   and the Next /quiz page share ONE source. Do not add unscoped rules. */
/* ————— Paath Symptom Funnel v3 — scoped, borderless, editorial ————— */
:where(#pf-root),:where(#pf-root *){box-sizing:border-box;margin:0;padding:0}
#pf-root{
  /* v2 tokens — one warm base, one confident accent (clay), olive for the Paath "yes" */
  --paper:#F1EDE8; --paper-2:#ECEADD; --wash:#ECEADD; --wash-deep:#D1CAC0; --card:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(44,44,44,.05),0 3px 10px rgba(44,44,44,.05);
  --shadow-md:0 2px 4px rgba(44,44,44,.05),0 10px 28px rgba(44,44,44,.09);
  --ink:#2C2C2C; --ink-2:#666766; --ink-3:#898F97;
  --copper:#976450; --copper-deep:#7F5442; --clay-tint:#F5E6E0;
  --flame:#E8654A; --flame-deep:#C94E33;
  --optimal:#6B6E5E; /* sage-dark (text-safe; fills use sage washes) */ --watch:#C4A962; --alarm:#c07f7f;
  --gold:#C4A962; --line:#D1CAC0; --line-soft:rgba(44,44,44,.07);
  /* brand match (7/18, president's note): --serif now carries the site DISPLAY font
     (Outfit — paath.us has no serif) and --sans the site body font. Var names kept
     so every existing usage maps: serif=display, sans=body. */
  --serif:'Outfit',-apple-system,sans-serif;
  --sans:'Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-family:var(--sans); color:var(--ink-2); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* launcher — flame (the brand's energy accent) so it lifts off the cream and reads as
   the interactive helper, distinct from the copper CTAs. Right side by default. */
/* base uses flame-deep so white text clears WCAG AA (4.5:1); flame is the hover lift. */
.pf-launcher{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:24px;z-index:99990;
  display:inline-flex;align-items:center;gap:11px;
  /* bigger (Alex: "it's too tiny" / needs to be a bigger CTA) — larger pad + type + a
     stronger shadow so it reads as the primary invitation, not a chat bubble. */
  background:var(--flame-deep);color:#fff;border:none;cursor:pointer;border-radius:999px;padding:19px 32px;
  font-family:var(--sans);font-size:18px;font-weight:700;box-shadow:0 16px 40px rgba(201,78,51,.42);
  transition:transform .25s,background .25s,box-shadow .25s}
.pf-launcher.pf-right{left:auto;right:24px}
.pf-launcher:hover{background:var(--flame);transform:translateY(-2px)}
.pf-launcher .pf-dot{width:8px;height:8px;border-radius:99px;background:#fff;opacity:.92;animation:pf-pulse 2.4s ease infinite}
.pf-launcher .pf-ltext{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.pf-launcher .pf-lmain{line-height:1.15}
.pf-launcher .pf-lsub{font-size:12.5px;font-weight:600;opacity:.82;letter-spacing:.02em;line-height:1.1}
.pf-launcher.pf-wiggle{animation:pf-wiggle .9s ease}
@keyframes pf-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes pf-wiggle{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-3px) rotate(-3deg)}30%{transform:translateY(0) rotate(3deg)}45%{transform:translateY(-2px) rotate(-2deg)}60%{transform:translateY(0) rotate(1deg)}}
/* overlay + modal — the shell is a warm spread, not a floating dialog box */
.pf-overlay{position:fixed;inset:0;z-index:99995;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(44,44,44,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.pf-overlay.pf-open{opacity:1;pointer-events:auto}
.pf-modal{position:relative;width:100%;max-width:560px;height:min(760px,92vh);display:flex;flex-direction:column;
  background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(44,44,44,.4);
  transform:translateY(12px) scale(.99);transition:transform .32s cubic-bezier(.22,1,.36,1);
  isolation:isolate}
/* ghost-text fix (Alex's screenshots): Safari/WebKit can leave stale composited fragments of
   the outgoing step when a transform animation runs over a backdrop-filtered overlay. Promote
   the animated step to its own layer so the old paint is fully discarded. */
.pf-step{transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pf-overlay.pf-open .pf-modal{transform:none}
/* header — hairline, no border box */
.pf-head{display:flex;align-items:center;gap:14px;padding:16px 20px 12px}
.pf-iconbtn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:99px;
  border:none;background:transparent;color:var(--ink-3);cursor:pointer;font-size:17px;transition:color .2s,background .2s}
.pf-iconbtn:hover{color:var(--copper);background:var(--wash)}
.pf-iconbtn[disabled]{opacity:0;pointer-events:none}
.pf-progress{flex:1;min-width:0}
.pf-progress-label{display:flex;justify-content:space-between;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
/* segmented app-style progress — one pill per step */
.pf-bar{display:flex;gap:5px;height:5px}
.pf-bar i{position:relative;flex:1;border-radius:99px;background:var(--line-soft);overflow:hidden;transition:background .4s ease}
.pf-bar i.pf-on{background:var(--copper)}
/* active segment sub-fills so the bar advances on EVERY tap (val→sex→age), even
   though they share step 2 — momentum without inflating the honest step count */
.pf-bar i.pf-cur b{position:absolute;inset:0 auto 0 0;height:100%;background:var(--copper);border-radius:99px;transition:width .45s cubic-bezier(.22,1,.36,1)}
/* body — 3-zone frame: TOP(head) fixed · MIDDLE flexes+centers · BOTTOM(cta) fixed. NO page scroll. */
.pf-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0 32px 8px}
.pf-step{flex:1;min-height:0;display:flex;flex-direction:column}
.pf-step.pf-fwd{animation:pf-slide-l .32s cubic-bezier(.22,1,.36,1) both}
.pf-step.pf-back{animation:pf-slide-r .32s cubic-bezier(.22,1,.36,1) both}
/* overflow-y:auto is a SAFETY NET so a non-scroll screen (validation/sex/age) can never
   clip if copy grows or a device is unusually short — every screen is top-anchored (pf-top),
   so it scrolls from the top, never the centered-overflow trap. overflow-x stays hidden for
   the slide transition. Content screens fill this zone with their own .pf-scroll, so this
   never adds a second scrollbar. */
.pf-mid{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow-x:hidden;overflow-y:auto}
.pf-mid.pf-top{justify-content:flex-start;padding-top:6px}
.pf-scroll{overflow-y:auto;min-height:0;scrollbar-width:thin}
/* the fade only appears while there IS more below (never at the end, never when it fits) —
   so the last line is always fully readable. Toggled by updateFades() in JS. */
.pf-scroll.pf-fading{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
.pf-bot{flex:0 0 auto;padding:12px 0 6px}
@keyframes pf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* transform-only rise for content cards — opacity stays 1, so they can NEVER render
   invisible if the tab is backgrounded/throttled mid-transition (which freezes animations). */
@keyframes pf-rise{from{transform:translateY(8px)}to{transform:none}}
@keyframes pf-slide-l{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes pf-slide-r{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.pf-kick{display:inline-flex;align-items:center;gap:9px;color:var(--copper);font-weight:600;font-size:12.5px;
  letter-spacing:.22em;text-transform:uppercase;margin:14px 0 16px}
.pf-kick::before{content:"";width:24px;height:1px;background:var(--copper);opacity:.55}
.pf-h{font-family:var(--serif);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink);
  font-size:clamp(2rem,5vw,2.75rem);margin-bottom:14px;text-wrap:balance}
.pf-h em{font-style:italic;color:var(--copper)}
.pf-lede{color:var(--ink-2);font-size:17.5px;line-height:1.55;max-width:54ch}
.pf-lede b{color:var(--copper-deep)}
.pf-serif{font-family:var(--serif)}
/* symptoms — borderless washes that populate on scroll */
.pf-symwrap{margin-top:8px}
.pf-area{margin:22px 0 6px}
.pf-arealabel{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pf-arealabel i{width:7px;height:7px;border-radius:99px;flex:0 0 auto}
.pf-syms{display:flex;flex-direction:column;gap:9px}
.pf-sym{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:58px;text-align:left;cursor:pointer;
  border:none;background:var(--wash);border-radius:14px;padding:13px 18px;transition:background .22s,transform .22s;
  opacity:0;transform:translateY(10px)}
.pf-sym.pf-shown{opacity:1;transform:none}
.pf-sym:hover{background:var(--wash-deep);transform:translateX(3px)}
.pf-sym .pf-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pf-sym .pf-lab{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink);line-height:1.15}
.pf-sym .pf-sub{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);line-height:1.3}
.pf-sym .pf-arrow{flex:0 0 auto;color:var(--copper);font-size:16px;opacity:.45;transition:opacity .22s,transform .22s}
.pf-sym:hover .pf-arrow{opacity:1;transform:translateX(3px)}
/* step 1 — trending term cloud: uniform warm-white chips, one copper accent (clean, on-brand) */
.pf-cloud{display:flex;flex-wrap:wrap;gap:10px 9px;margin-top:20px}
.pf-chip{cursor:pointer;border:none;border-radius:999px;padding:14px 21px;font-family:var(--sans);font-size:15.5px;
  font-weight:600;line-height:1.1;white-space:nowrap;color:var(--ink);background:var(--card);
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,background .18s,color .18s;
  opacity:0;transform:translateY(8px)}
.pf-chip.pf-shown{opacity:1;transform:none}
.pf-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--copper-deep)}
.pf-chip:active{transform:scale(.96)}
/* small ♀/♂ mark on sex-specific terms (tapping auto-picks the sex) */
.pf-chsex{display:inline-flex;vertical-align:-2px;margin-right:7px}
.pf-chsex.pf-f{color:#c07f7f}
.pf-chsex.pf-m{color:#8E9083}
/* soft family tints so groups read apart (muted, three washes — never patchwork):
   warm = energy/metabolism · blush = hormones · sage = mind/sleep/nerves */
.pf-chip.pf-c-em{background:rgba(196,169,98,.20)}
.pf-chip.pf-c-hr{background:#F5E6E0}
.pf-chip.pf-c-ms{background:rgba(142,144,131,.16)}
.pf-morechip{background:var(--clay-tint)!important;color:var(--copper-deep)!important;box-shadow:none!important}
/* v3 multi-select: selected fills copper, opposite-sex greys out, count + Continue */
.pf-chip.pf-sel{background:var(--copper)!important;color:#fff!important;box-shadow:0 5px 16px rgba(151,100,80,.32)}
.pf-chip.pf-sel .pf-chsex{color:rgba(255,255,255,.85)!important}
.pf-chip.pf-blocked{opacity:.3;pointer-events:none}
.pf-chk{font-weight:800;margin-left:3px}
.pf-selcount{color:var(--copper-deep);font-weight:800;font-size:14px;white-space:nowrap}
.pf-cta.pf-disabled{opacity:.42;pointer-events:none;filter:grayscale(.25)}
/* "see the exact markers" expand on the connected read */
.pf-seemk{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:700;
  color:var(--copper-deep);padding:10px 0 2px;display:block}
.pf-markerlist{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.pf-mk{font-family:var(--sans);font-size:12px;font-weight:600;background:var(--paper-2);color:var(--ink-2);border-radius:999px;padding:5px 11px}
/* validation interstitial (2a) — one warm line, tap anywhere. Fully CENTERED. */
.pf-valbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:center;
  align-items:center;flex:1;min-height:0;width:100%;text-align:center}
.pf-valbtn .pf-validate{margin-left:auto;margin-right:auto}
/* left-aligned "breakdown" variant: each pick → its system, then the group tie */
.pf-valbtn.pf-valleft{align-items:stretch;text-align:left;justify-content:flex-start}
.pf-valbtn.pf-valleft .pf-validate{margin:0}
.pf-tielist{display:flex;flex-direction:column;gap:8px;width:100%}
.pf-tierow{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:13px;
  padding:12px 15px;box-shadow:var(--shadow-sm)}
.pf-tieterm{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);line-height:1.2}
.pf-tiearr{color:var(--ink-3);font-weight:700;flex:0 0 auto;margin-left:auto}
.pf-tiesys{font-family:var(--serif);font-style:italic;font-size:15.5px;font-weight:600;color:var(--copper);
  flex:0 0 auto;text-align:right;line-height:1.2}
.pf-valleft .pf-lede b{color:var(--copper-deep)}
/* validation synthesis — the real, specific "here's what this points to" line (the hero) */
.pf-synth{font-family:var(--serif);font-size:clamp(1.12rem,3.3vw,1.32rem);line-height:1.5;color:var(--ink);margin:0}
.pf-synth b{font-weight:700;color:var(--ink)}
.pf-synth em{font-style:italic;color:var(--copper)}
.pf-valhint{display:block;width:100%;max-width:100%;text-align:center;white-space:normal;font-family:var(--sans);
  font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin-top:28px;padding:0 8px;animation:pf-fadepulse 2.6s ease infinite}
@keyframes pf-fadepulse{0%,100%{opacity:.45}50%{opacity:1}}
/* offer price drop — base shows first, then strikes + sale slides in with a badge */
.pf-price .pf-salewrap{display:none;align-items:baseline;gap:8px}
.pf-price.pf-dropped .pf-salewrap{display:inline-flex;animation:pf-rise .45s cubic-bezier(.22,1,.36,1) both}
.pf-price .pf-base{font-family:var(--serif);font-weight:800;font-size:38px;color:var(--ink);line-height:1;transition:all .3s}
.pf-price.pf-dropped .pf-base{font-size:28px;color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pf-dropbadge{font-family:var(--sans);font-size:13px;font-weight:800;border-radius:999px;padding:5px 11px;
  background:var(--copper);color:#fff;letter-spacing:.03em;white-space:nowrap}
/* (the dead .pf-hold/.pf-live/pf-blink countdown-timer CSS was deleted — it styled a ticking
   red clock that violates the no-fake-urgency rule and was one wiring change from resurfacing.
   The honest "$200 off · ends July 31" pf-empower badge is the only promo callout.) */
/* privacy reassurance — quiet, under the step-1 CTA (trust: without it the modal reads as a data grab) */
.pf-privacy{font-size:12px;color:var(--ink-3);text-align:center;margin:8px 0 0}
/* EMPOWERMENT banner — a defined savings callout that lifts off the cream (was blending in).
   Badge = the value made a solid object; warm gradient + copper edge + shadow = it stands out.
   Still no timer — the credit is a gift, not a ticking clock. */
.pf-empower{display:flex;align-items:center;gap:13px;width:100%;margin:4px 0 12px;
  background:linear-gradient(135deg,#FFFFFF,#F5E6E0);border:1.5px solid rgba(151,100,80,.26);
  border-radius:14px;padding:13px 14px;box-shadow:0 5px 16px rgba(151,100,80,.14)}
/* badge = espresso (the darkest brand tone) so the value POPS off the cream instead of
   blending with the copper edge */
.pf-empbadge{flex:0 0 auto;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:800;
  font-size:17px;letter-spacing:.02em;padding:11px 14px;border-radius:11px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(44,44,44,.30)}
.pf-emptxt{font-family:var(--sans);font-size:14px;color:var(--ink-2);line-height:1.35;text-align:left}
.pf-emptxt b{display:block;font-family:var(--serif);font-style:italic;font-weight:700;font-size:17.5px;
  color:var(--copper-deep);line-height:1.15;margin-bottom:2px}
/* the tightened 4-item list shows on every tier now (no collapse) — the value is visible
   at the buy, but limited to 4 scannable lines so it never becomes a wall. */
.pf-featsbtn{display:none}
@media (max-width:640px){
  .pf-feats li{font-size:15.5px}
}
/* generic entrance reveal (paath.us feel): animates in on render and HOLDS visible via
   `both` fill — pure CSS, no JS gate, so a card (esp. the HOW-WE-HELP money shot) can
   never stall hidden if a scroll/timing check misses. */
[data-r]{animation:pf-rise .5s cubic-bezier(.22,1,.36,1) both}
/* step 2 — echo + validation ("fan the fire") */
.pf-echo{display:inline-block;border-radius:999px;padding:9px 16px;font-family:var(--sans);font-size:13.5px;
  font-weight:700;background:var(--copper);color:#fff;margin-bottom:16px}
.pf-echo-big{font-size:17.5px;padding:14px 26px;letter-spacing:.02em}
/* the thing each marker is LOOKING FOR — italic serif in copper so it pops per row */
.pf-dval{font-family:var(--serif);font-style:italic;font-size:16.5px;font-weight:500;color:var(--copper-deep)}
.pf-validate{font-family:var(--serif);font-size:clamp(1.45rem,3.4vw,1.95rem);line-height:1.28;color:var(--ink);
  max-width:44ch;margin-bottom:26px}
.pf-validate em{font-style:italic;color:var(--copper)}
/* continue / primary button */
.pf-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;
  background:var(--copper);color:#fff;font-family:var(--sans);font-weight:600;
  font-size:15.5px;padding:15px 30px;transition:filter .22s,transform .22s;box-shadow:0 10px 24px rgba(151,100,80,.28)}
.pf-cta:hover{background:var(--copper-deep);transform:translateY(-1px)}
.pf-cta.pf-block{width:100%}
.pf-cta.pf-quiet{background:transparent;color:var(--copper);box-shadow:none;padding:14px 20px}
.pf-cta.pf-quiet:hover{background:var(--wash)}
/* secondary CTA — outline, not gradient. Used inside the offer cards so the pinned
   sticky buy bar stays the SINGLE dominant "buy" (one obvious action, no doubt). */
.pf-cta.pf-cta-sec{background:none;border:2px solid var(--copper);color:var(--copper-deep);box-shadow:none;padding:13px 28px}
.pf-cta.pf-cta-sec:hover{background:var(--wash);filter:none;transform:none}
.pf-ctarow{margin-top:26px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pf-ctarow.pf-center{align-items:center}
.pf-linkbtn{background:none;border:none;color:var(--ink-3);font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:12px 8px;min-height:44px}
.pf-linkbtn:hover{color:var(--copper)}
/* explainer analogy */
.pf-quote{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);border-left:2px solid var(--copper);
  padding-left:16px;margin-bottom:20px}
.pf-analogy{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.35;color:var(--ink);margin-bottom:14px}
.pf-analogy em{font-style:italic;color:var(--copper)}
/* age/sex — borderless tonal chips, no ring */
.pf-choicelabel{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.pf-choices{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.pf-choice{cursor:pointer;border:none;background:var(--card);border-radius:16px;padding:21px 32px;font-family:var(--serif);
  font-size:21px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:11px;
  box-shadow:var(--shadow-sm);transition:background .2s,transform .2s,color .2s,box-shadow .2s}
.pf-choice svg{color:var(--copper);flex:0 0 auto}
.pf-choice:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pf-choice.pf-on{background:var(--copper);color:#fff}
.pf-choice.pf-on::after{content:'✓';font-weight:800;margin-left:6px}
.pf-choice.pf-on svg{color:#fff}
/* biomarkers — line-art-ish map, borderless */
.pf-reads{display:flex;flex-direction:column;gap:14px;margin:4px 0 6px}
.pf-read{font-size:15.5px;color:var(--ink-2);line-height:1.5}
.pf-read b{color:var(--ink);font-weight:600}
.pf-markers{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pf-marker{cursor:pointer;border:none;background:var(--paper-2);border-radius:999px;padding:9px 16px;font-family:var(--sans);
  font-size:13px;font-weight:600;color:var(--copper-deep);transition:background .2s,color .2s,transform .2s}
.pf-marker:hover{background:var(--wash-deep);transform:translateY(-1px)}
.pf-marker.pf-on{background:var(--copper);color:#fff}
.pf-chip.pf-picked{background:var(--copper)!important;color:#fff!important;transform:scale(.96)}
/* the marker dossier — ALL markers at once: app-list rows w/ leading icon circles. Zero taps. */
.pf-dossier{margin-top:14px;background:var(--card);border-radius:18px;padding:6px 20px 12px;box-shadow:var(--shadow-md);animation:pf-rise .35s both}
.pf-dintro{font-size:14.5px;color:var(--ink-2);padding:11px 0 5px}
.pf-dintro b{color:var(--ink)}
/* dossier lead-in: name the KEY markers for THEIR symptom, then the insurance kick */
.pf-dhead{font-family:var(--serif);font-size:18.5px;font-weight:600;color:var(--ink);line-height:1.3;padding:9px 0 2px}
.pf-dhead b{color:var(--copper-deep);font-weight:600}
.pf-dins{font-size:14px;font-weight:700;color:var(--copper-deep);padding:0 0 4px}
.pf-drow{display:grid;grid-template-columns:40px 1fr;gap:13px;padding:13px 0 12px;border-top:1px solid var(--line-soft)}
.pf-drow:first-of-type{border-top:0}
.pf-dic{width:38px;height:38px;border-radius:13px;background:rgba(151,100,80,.11);color:var(--copper);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
/* soft tint variants per marker family — color pop without patchwork */
.pf-dic.pf-ti-blush{background:#F5E6E0;color:#a05252}
.pf-dic.pf-ti-gold{background:#E8D9A6;color:#8a7434}
.pf-dic.pf-ti-sage{background:rgba(142,144,131,.18);color:#5c6151}
.pf-dname{font-family:var(--serif);font-weight:600;font-size:19.5px;color:var(--ink);line-height:1.2}
.pf-dwhat{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}
/* quiet miss label — muted, a ✕ glyph. Never red, never loud — but big enough to actually read. */
.pf-dmiss{font-size:14px;line-height:1.45;margin-top:5px;color:var(--ink-2)}
.pf-dmiss i{font-style:normal;font-weight:800;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-right:6px;opacity:.85}
/* read-row contrast: the "insurance can't" half recedes (muted + subtle ✕),
   our mechanism advances (bold, dark). Reads "insurance doesn't do this" at a glance. */
.pf-ins{color:var(--ink-3)}
.pf-dmiss .pf-ins i{font-size:13px;text-transform:none;letter-spacing:0;opacity:1;color:var(--ink-3);margin-right:3px;font-weight:800}
.pf-dmiss b{color:var(--ink);font-weight:700}
/* flipped read row: the gentle "not always run" aside recedes after the value lead */
.pf-softnote{color:var(--ink-3);font-style:italic}
.pf-dall{margin-top:4px;border-top:1.5px solid rgba(142,144,131,.45);padding-top:8px;font-size:14.5px;color:var(--optimal);font-weight:700}
/* read row header: symptom(s) → its driver system, echoing the validation row */
.pf-dhead{line-height:1.25;margin-bottom:1px}
.pf-drterm{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink)}
.pf-drterm-sub{font-weight:500;font-size:14.5px;color:var(--ink-2)}
.pf-drto{font-family:var(--serif);font-style:italic;font-weight:600;font-size:16px;color:var(--copper);white-space:nowrap}
.pf-dsub{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin:1px 0 6px;line-height:1.3}
/* synthesis line — the "tie it all together" beat under the driver rows */
.pf-tieclose{font-family:var(--serif);font-size:15px;line-height:1.42;color:var(--ink);background:rgba(151,100,80,.07);
  border-left:3px solid var(--copper);border-radius:0 11px 11px 0;padding:11px 14px;margin:13px 0 4px}
.pf-tieclose em{font-style:italic;color:var(--copper)}
/* bucket-level safety note (e.g. neuro red-flags) — calm amber, never alarm-red */
.pf-safety{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--wash);
  border-radius:12px;padding:11px 14px}
.pf-whymiss{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-2)}
.pf-whymiss i{display:block;font-style:normal;font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--alarm);margin-bottom:3px}
/* one plain line under the markers on the read */
.pf-missline{margin-top:14px;font-size:14px;color:var(--ink-2)}
.pf-missline b{color:var(--ink);font-weight:600}
/* THE PAATH DIFFERENCE — the VERSUS card (paath.us comparison energy):
   pale muted Insurance column vs a solid copper Paath column. Fits one screen. */
.pf-vs{background:var(--card);border-radius:18px;padding:14px 12px 12px;box-shadow:var(--shadow-md)}
.pf-vs-h{display:grid;grid-template-columns:1fr 1.15fr;gap:8px}
.pf-vs-h span{text-align:center;font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:10px 4px;border-radius:11px}
.pf-vs-hi{background:var(--wash);color:var(--ink-3)}
.pf-vs-hp{background:var(--copper);color:#fff}
.pf-vs-row{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;margin-top:8px}
.pf-vs-row span{display:flex;align-items:center;gap:8px;border-radius:12px;padding:12px 11px;font-size:14.5px;line-height:1.3}
.pf-vs-i{background:var(--wash);color:var(--ink-2)}
.pf-vs-i i{font-style:normal;color:var(--ink-3);font-weight:700;flex:0 0 auto}
.pf-vs-p{background:var(--copper);color:#fff;font-weight:600}
.pf-vs-p i{font-style:normal;font-weight:800;flex:0 0 auto}
.pf-vspunch{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:17.5px;color:var(--copper-deep);
  font-weight:600;text-align:center}
/* HOW WE HELP slide — positive value card: olive (good-news) icons, plan + hand-holding */
.pf-help{background:var(--card);border-radius:18px;padding:6px 20px 14px;box-shadow:var(--shadow-md)}
.pf-hrow{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--line-soft);align-items:start}
.pf-hrow:first-child{border-top:0}
.pf-hic{width:40px;height:40px;border-radius:13px;background:rgba(142,144,131,.17);color:var(--optimal);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.pf-hname{font-family:var(--serif);font-weight:600;font-size:18.5px;color:var(--ink);line-height:1.25}
.pf-hd{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.pf-hclose{margin-top:4px;border-top:1.5px solid rgba(142,144,131,.39);padding-top:12px;font-family:var(--serif);
  font-style:italic;font-size:17px;color:var(--optimal);font-weight:600;text-align:center}
.pf-hclose em{font-style:italic;color:var(--copper)}
.pf-hnote{text-align:center;font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:12px 4px 0}
.pf-hnote b{color:var(--copper-deep);font-weight:700}
/* doctor trust block — named program authority (license-safe); per-patient care = clinician */
.pf-doc{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;margin-top:14px;box-shadow:var(--shadow-md)}
.pf-docimg{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top;flex:0 0 auto;background:var(--wash)}
/* cleaned + easier to read (Alex): the title sits RIGHT under the ND on its own tight line,
   the scope qualifier drops to a quiet second line (it must always render — license scope). */
.pf-docname{font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--ink);line-height:1.2}
.pf-doctitle{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--copper);margin-top:3px;line-height:1.25}
/* the scope line is license protection — it must READ, not disappear (audit: was 10.5px
   grey, below WCAG AA). Bumped to --ink-2 at 11.5px so it always renders legibly. */
.pf-docscope{display:block;margin-top:1px;font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);font-weight:600}
.pf-docline{font-size:14px;line-height:1.55;color:var(--ink-2);margin:9px 0 0}
/* the patient walkthrough — 4 icon steps under the offers */
.pf-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.pf-jstep{background:var(--card);border-radius:16px;padding:14px 10px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.pf-jic{position:relative;width:42px;height:42px;border-radius:99px;background:rgba(151,100,80,.12);color:var(--copper);
  display:flex;align-items:center;justify-content:center;margin:0 auto 9px}
.pf-jn{position:absolute;top:-4px;right:-6px;width:17px;height:17px;border-radius:99px;background:var(--copper);color:#fff;
  font-family:var(--sans);font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pf-jt{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);line-height:1.25}
.pf-nextnote{text-align:center;font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:12px}
/* what-to-expect line — sits at the TOP of the money screen, before the timeline */
.pf-expectline{text-align:center;font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 4px}
.pf-expectline b{color:var(--ink)}
/* "why insurance misses it" — legacy box (unused after difference beat added) */
.pf-miss{margin-top:26px;background:var(--wash);border-radius:16px;padding:22px 24px}
.pf-miss h4{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:12px}
.pf-misslist{list-style:none;display:flex;flex-direction:column;gap:10px}
.pf-misslist li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.pf-misslist li::before{content:"—";color:var(--alarm);font-weight:700}
/* big serif numerals */
.pf-stat{font-family:var(--serif);font-weight:700;color:var(--ink);line-height:.9;letter-spacing:-.02em}
/* state */
.pf-stateselect{margin-top:8px;width:100%;appearance:none;-webkit-appearance:none;
  background:var(--wash) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23976450' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
  border:none;border-radius:14px;padding:16px 44px 16px 18px;font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);cursor:pointer}
.pf-stateselect:focus{outline:2px solid var(--copper);outline-offset:2px}
.pf-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
/* the rest of the states — an alphabetical DIRECTORY grouped by letter (phone-book index) */
.pf-strest{column-count:3;column-gap:18px;margin-top:10px}
.pf-stgroup{break-inside:avoid;margin-bottom:16px}
.pf-stletter{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--copper);
  padding:0 12px 5px;border-bottom:1px solid var(--line-soft);margin-bottom:5px}
/* primary action on the dedicated A-Z page: >=15.5px type + >=44px rows (owner floors) */
.pf-strest button{display:block;width:100%;text-align:left;cursor:pointer;border:none;
  background:transparent;border-radius:10px;padding:12px;font-family:var(--sans);font-size:15.5px;
  font-weight:600;color:var(--ink-2);transition:background .18s,color .18s}
.pf-strest button:hover{background:var(--wash-deep);color:var(--ink)}
/* group labels: which states get Thrive+ (the 1-hour visit) vs Thrive-only */
.pf-stlabel{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-deep);margin:2px 0 10px}
.pf-stlabel.pf-quiet{color:var(--ink-3);margin-top:18px}
.pf-tile{cursor:pointer;border:none;background:var(--card);border-radius:16px;padding:14px 10px 13px;text-align:center;
  box-shadow:var(--shadow-sm);transition:background .2s,transform .2s,box-shadow .2s}
.pf-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pf-stshape{display:block;height:36px;color:rgba(151,100,80,.55);margin-bottom:4px}
.pf-tile:hover .pf-stshape{color:var(--copper)}
.pf-tile.pf-statepick{background:var(--copper)!important}
.pf-tile.pf-statepick b,.pf-tile.pf-statepick small{color:#fff!important}
.pf-tile.pf-statepick .pf-stshape{color:rgba(255,255,255,.85)!important}
.pf-strest button.pf-statepick{background:var(--copper)!important;color:#fff!important}
.pf-tile b{display:block;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink)}
.pf-tile small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
/* the SUPPORT WALKTHROUGH — 5 beats light up left→right once, a caption narrates each one.
   Centered. Ends on the concierge line. Beats stay tappable to replay any caption. */
.pf-jwrap{background:var(--card);border-radius:16px;padding:14px 12px 11px;box-shadow:var(--shadow-sm);text-align:center}
.pf-jrow{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:0 4px}
.pf-jtrack{position:absolute;top:20px;left:10%;right:10%;height:2.5px;background:var(--line);border-radius:99px}
.pf-jfill{position:absolute;top:20px;left:10%;width:0;height:2.5px;background:var(--copper);border-radius:99px;
  transition:width .8s cubic-bezier(.22,1,.36,1)}
.pf-jbeat{position:relative;z-index:1;flex:1;background:none;border:none;cursor:pointer;padding:0;text-align:center}
.pf-jbic{width:40px;height:40px;border-radius:99px;background:var(--paper-2);color:var(--ink-3);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 6px;
  transition:background .35s,color .35s,border-color .35s,transform .35s,box-shadow .35s}
.pf-jbeat.pf-lit .pf-jbic{background:var(--copper);color:#fff;border-color:var(--copper)}
.pf-jbeat.pf-now .pf-jbic{transform:scale(1.2);box-shadow:0 5px 16px rgba(151,100,80,.4)}
.pf-jbw{display:block;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em;line-height:1.2;transition:color .3s}
.pf-jbeat.pf-lit .pf-jbw{color:var(--ink)}
.pf-jcap{min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:12px;
  font-size:15px;line-height:1.45;color:var(--ink-2);padding:0 10px;max-width:34ch;margin-left:auto;margin-right:auto}
.pf-jcap b{color:var(--copper-deep);font-weight:700}
.pf-jcap.pf-swap{animation:pf-in .3s cubic-bezier(.22,1,.36,1) both}
/* offers — ONE package at a time (never side-by-side): the doctor tier sells first,
   full width and full focus; the alternative sits below a quiet divider. */
.pf-offers{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.pf-offer{position:relative;background:var(--card);border-radius:18px;padding:24px 24px;box-shadow:var(--shadow-md)}
.pf-offer.pf-reco{border-top:4px solid var(--copper);box-shadow:0 3px 6px rgba(44,44,44,.06),0 16px 40px rgba(44,44,44,.13)}
.pf-badge{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:var(--copper);color:#fff;border-radius:999px;padding:6px 13px;margin-bottom:12px}
.pf-consult{font-family:var(--sans);font-size:13.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.pf-reco .pf-consult{color:var(--copper-deep)}
.pf-offer h4{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--ink);margin-bottom:8px}
.pf-price{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.pf-price .pf-now{font-family:var(--serif);font-weight:800;font-size:46px;color:var(--ink);line-height:1}
.pf-price .pf-was{font-size:17px;color:var(--ink-3);text-decoration:line-through}
.pf-price .pf-off{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--copper-deep)}
.pf-feats{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.pf-feats li{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:16px;color:var(--ink-2);line-height:1.45}
.pf-feats li b{color:var(--copper-deep);font-weight:700}
.pf-feats li::before{content:"✓";color:var(--copper);font-weight:800}
/* payment badges ON each plan — HSA/FSA + Shop Pay/Affirm monthly, so they see how
   affordable it is right next to the price (recognizable Shop Pay purple). */
.pf-pay{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px}
.pf-pay span{font-family:var(--sans);font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 11px;line-height:1.25;white-space:nowrap}
.pf-pay-hsa{background:rgba(142,144,131,.18);color:var(--optimal)}
.pf-pay-sp{background:rgba(90,49,244,.10);color:#5a31f4}
/* the quiet hand-off to option two — the user scrolls INTO it, never sees both at once */
.pf-altlead{display:flex;align-items:center;gap:14px;margin:10px 0 2px;
  font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ink-2);white-space:nowrap}
.pf-altlead::before,.pf-altlead::after{content:"";flex:1;height:1px;background:var(--line)}
/* in-card escape hatch: jumps (smooth-scrolls) down to the Thrive card */
.pf-skiplink{display:block;width:100%;text-align:center;background:none;border:none;cursor:pointer;
  margin-top:12px;padding:6px 0 2px;font-family:var(--sans);font-size:14px;color:var(--ink-2)}
.pf-skiplink b{color:var(--copper-deep);font-weight:700}
.pf-skiplink:hover b{text-decoration:underline;text-underline-offset:3px}
/* Step 6 vindication crown — the "you were right" payoff leads the offer */
.pf-vindicate{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,3vw,1.25rem);
  line-height:1.35;color:var(--copper-deep);margin:2px 0 8px}
/* PRESCRIBED-PROGRAM REVEAL — a chart note: their intake mirrored back, then the matched
   program dispensed. Reads like it was written up FOR them (compliance: "matched", not "Rx"). */
.pf-rx{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--copper);
  border-radius:14px;padding:13px 15px 6px;box-shadow:var(--shadow-sm);animation:pf-rise .35s both}
.pf-rxhead{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:9px}
.pf-rxmark{font-family:var(--serif);font-size:19px;line-height:1;color:var(--copper);font-weight:600}
.pf-rxbody{display:flex;flex-direction:column;gap:5px;padding-bottom:11px;border-bottom:1px dashed var(--line)}
.pf-rxrow{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:baseline}
.pf-rxk{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.pf-rxv{font-family:var(--serif);font-size:15px;line-height:1.3;color:var(--ink)}
/* the program reveal POPS (Alex 8:17pm 4:33): warm wash panel + bigger copper serif name,
   so "Your recommended program → Thrive+" reads as the payoff, not a form row. */
.pf-rxout{display:flex;flex-direction:column;padding:14px 16px 12px;margin:6px -4px 0;
  background:var(--clay-tint);border-radius:14px}
.pf-rxoutk{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--copper-deep)}
.pf-rxoutv{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.1;color:var(--copper-deep);margin:2px 0 8px}
.pf-rxoutd{font-size:13px;line-height:1.45;color:var(--ink-2)}
/* step-5 pull-quote — LARGER, the relief moment leads in bold copper (Alex: "push the most
   meaningful part of the Tara testimonial") */
.pf-testi{background:var(--wash);border-left:3px solid var(--copper);border-radius:0 12px 12px 0;
  padding:15px 17px;margin:14px 0 12px}
.pf-testi p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;color:var(--ink);margin:0 0 7px}
.pf-testi p b{color:var(--copper-deep);font-weight:700}
.pf-testi span{display:block;font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--copper-deep)}
.pf-testi .pf-testinote{font-weight:600;font-size:10.5px;letter-spacing:0;color:var(--ink-3);margin-top:3px}
/* what the program includes — the report/plan/guidance/support named on the match card (Alex) */
.pf-rxgets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pf-rxgets li{position:relative;padding-left:22px;font-size:14px;line-height:1.35;color:var(--ink)}
.pf-rxgets li::before{content:"✓";position:absolute;left:0;top:0;color:var(--copper);font-weight:800}
.pf-rxfoot{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);font-size:11px;line-height:1.4;color:var(--ink-3)}
.pf-rxmark{color:var(--copper)!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:800}
/* WANT slide + personalization line ("what you want back" → step 5/6) */
/* 10 options (Alex: top-10 life costs) — compact cards so the full set reads as one screen */
.pf-wantgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-wantgrid .pf-choice{width:100%;justify-content:center;text-align:center;
  font-size:15.5px;line-height:1.3;padding:13px 10px;min-height:0}
.pf-wantline{background:var(--wash);border-left:3px solid var(--copper);border-radius:0 12px 12px 0;
  padding:11px 14px;margin:12px 0 12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pf-wantline b{color:var(--copper-deep);font-weight:700}
/* SOCIAL PROOF — member quotes, styled to POP (Alex): white cards, copper spine, serif
   pull-quote scale. No stars/ratings (nothing we can't substantiate). */
.pf-quotes{margin-top:4px}
/* fit: the downsell card starts collapsed behind its divider (the sticky bar still buys
   Thrive in one tap); the divider itself is the expander */
.pf-collapsed{display:none}
/* generic in-place hide (chips beyond 18, the A–Z state directory) — unhidden without re-render */
.pf-hid{display:none}
/* thumb zone: 1-tap screens center their cards safely — flex-start fallback, `safe center`
   where supported, so short/zoomed viewports can never clip (the pf-top guarantee holds) */
.pf-center-safe{justify-content:flex-start;justify-content:safe center}
.pf-altbtn{background:none;border:none;cursor:pointer;width:100%;font-weight:700;color:var(--copper-deep)}
.pf-altbtn:hover{text-decoration:underline;text-underline-offset:3px}
.pf-quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--copper);
  border-radius:14px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-md)}
.pf-quoteq{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--ink);margin:0 0 8px}
.pf-quotewho{font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--copper-deep)}
.pf-quotewho span{font-weight:600;color:var(--ink-3);letter-spacing:0}
.pf-quotenote{font-size:11px;color:var(--ink-3);margin:2px 0 0;text-align:center}
.pf-checkoutnote{font-size:12.5px;color:var(--ink-3);text-align:center;margin:8px 0 0}
/* FREE CALL — sits between the two offer cards. Visible and clickable (a real button to the
   booking widget) but deliberately OUTLINED, not filled: it catches the undecided without
   competing with the copper buy CTAs. */
.pf-freecall{margin:14px 0 4px;background:var(--wash);border:1px dashed rgba(151,100,80,.4);
  border-radius:14px;padding:14px 16px;text-align:center}
.pf-fctext{margin:0 0 10px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.pf-fcbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;
  border:1.5px solid var(--copper);color:var(--copper-deep);cursor:pointer;border-radius:999px;
  padding:11px 22px;font-family:var(--sans);font-size:15px;font-weight:700;transition:background .2s,color .2s}
.pf-fcbtn:hover{background:var(--copper);color:#fff}
.pf-soon{margin-top:14px;background:var(--wash);border-radius:14px;padding:16px 18px;font-size:13.5px;color:var(--ink-2)}
.pf-soon b{color:var(--ink);font-family:var(--serif)}
/* what to expect — numbered spine, borderless */
.pf-expect{display:flex;flex-direction:column;gap:0;margin:6px 0 4px}
.pf-estep{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:14px 0;align-items:start}
.pf-estep .pf-en{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--copper);line-height:1}
.pf-estep b{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink);display:block;margin-bottom:2px}
.pf-estep p{font-size:14px;color:var(--ink-2);line-height:1.45}
.pf-ordercard{background:var(--wash);border-radius:16px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 20px}
.pf-ordercard .pf-oname{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink)}
.pf-ordercard .pf-odesc{font-size:12.5px;color:var(--ink-2);margin-top:2px;max-width:44ch}
.pf-ordercard .pf-oprice{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--ink);line-height:1}
.pf-ordercard .pf-oprice small{font-size:15px;color:var(--ink-3);text-decoration:line-through;font-weight:500;margin-left:6px}
.pf-email{display:flex;gap:9px;margin:6px 0 4px}
.pf-input{flex:1;min-width:0;background:var(--paper-2);border:none;border-radius:12px;padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.pf-input:focus{outline:2px solid var(--copper);outline-offset:1px}
.pf-input::placeholder{color:var(--ink-3)}
.pf-msg{font-size:13px;font-weight:600;margin-top:8px}
.pf-msg.ok{color:var(--optimal)}.pf-msg.err{color:var(--alarm)}
.pf-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:13.5px;color:var(--ink-2)}
/* runoff catch — deliberately quiet + subordinate; sits at the very bottom of the scroll,
   below both offers, the trust row and the pinned buy CTAs. Never a loud alternative. */
.pf-runoff{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);text-align:center;
  font-size:13px;color:var(--ink-3);line-height:1.5}
.pf-runoffbtn{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:2px 0}
.pf-runoffbtn:hover{color:var(--copper-deep)}
.pf-trust span{display:inline-flex;align-items:center;gap:6px}
.pf-trust i{font-style:normal;color:var(--copper)}
.pf-note{font-size:12px;color:var(--ink-3);margin-top:20px;line-height:1.5}
/* legal footer — present and readable, but deliberately quiet (it is NOT a focus) */
.pf-foot{flex:0 0 auto;padding:7px 32px 9px;font-size:10px;color:var(--ink-3);opacity:.8;line-height:1.4;border-top:1px solid var(--line-soft)}
/* stagger for read cards */
.pf-stagger>*{animation:pf-in .5s cubic-bezier(.22,1,.36,1) both}
.pf-stagger>*:nth-child(2){animation-delay:.07s}.pf-stagger>*:nth-child(3){animation-delay:.14s}
/* responsive — full screen on mobile */
@media (max-width:640px){
  .pf-overlay{padding:0}
  .pf-modal{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .pf-body{padding:0 20px 4px}
  /* .pf-modal already adds safe-area-inset-bottom — .pf-foot must NOT re-add it (was
     double-counted, floating the CTA ~60px up and stealing vertical room). */
  .pf-foot{padding:6px 20px 8px;font-size:9.5px}
  /* condense: each step ≈ one phone screen */
  .pf-h{font-size:clamp(1.6rem,7vw,1.95rem);margin-bottom:10px}
  .pf-lede{font-size:16px}
  .pf-kick{margin:8px 0 12px}
  .pf-validate{font-size:clamp(1.25rem,5.6vw,1.5rem);margin-bottom:18px}
  /* owner's 15.5px readability floor — chips are the FIRST interaction (also lifts tap target to ~44px) */
  .pf-chip{padding:13px 18px;font-size:15.5px}
  .pf-choice{padding:19px 28px;font-size:19px}
  .pf-echo-big{font-size:16px;padding:12px 22px}
  .pf-valhint{font-size:13.5px}
  .pf-dossier{padding:2px 14px 8px}
  .pf-drow{padding:7px 0 6px;gap:10px}
  .pf-dhead{line-height:1.2}
  .pf-dmiss{line-height:1.38;margin-top:3px}
  .pf-dic{width:34px;height:34px}
  .pf-dname{font-size:18px}
  .pf-dmiss{font-size:15.5px}  /* the read's emotional payload — owner floor */
  .pf-dintro{font-size:14px}
  .pf-dhead{font-size:17px}
  .pf-dins{font-size:13px}
  .pf-dval{font-size:15.5px}
  .pf-tiles{grid-template-columns:repeat(3,1fr)}
  .pf-strest{column-count:2}
  .pf-jcap{font-size:14px}
  .pf-altlead{font-size:15px}
  .pf-nextnote{font-size:13px}
  .pf-offer{padding:20px 18px}
  .pf-offer h4{font-size:24px}
  .pf-journey{grid-template-columns:repeat(2,1fr)}
  .pf-vs-row span{font-size:13.5px;padding:9.5px 10px}
  .pf-vs-row{margin-top:7px}
  .pf-vs-h span{font-size:10.5px;padding:9px 4px}
  .pf-vspunch{font-size:16px}
  .pf-help{padding:2px 16px 10px}
  .pf-hrow{padding:8px 0;gap:11px}
  .pf-hic{width:38px;height:38px}
  .pf-hname{font-size:16.5px;line-height:1.2}
  .pf-hd{font-size:13.5px;line-height:1.4;margin-top:1px}
  .pf-hclose{font-size:15px;padding-top:10px;margin-top:2px}
  .pf-doc{padding:11px 13px;gap:11px;margin-top:10px}
  .pf-docimg{width:48px;height:48px}
  .pf-docline{font-size:13px;line-height:1.42;margin-top:5px}
  .pf-hnote{margin-top:8px}
  .pf-vs{padding:12px 10px 10px}
  .pf-launcher{bottom:calc(16px + env(safe-area-inset-bottom));left:16px;padding:14px 22px;font-size:16.5px}
  .pf-launcher .pf-lsub{font-size:11.5px}
  /* fit: proof becomes a one-card swipe row on mobile (saves ~2 screens of height) */
  .pf-qrow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pf-qrow::-webkit-scrollbar{display:none}
  .pf-qrow .pf-quote{flex:0 0 86%;scroll-snap-align:start;margin-bottom:4px}
  /* ghost-text + jank fix: the live backdrop blur repaints every frame during the slide
     animation and is the prime suspect for the stale-paint fragments — a solid scrim on
     mobile is visually equivalent and immune. */
  .pf-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(44,44,44,.62)}
  /* LESS BUSY on phone (Alex, Hims-standard): the gentle "not always run" asides come off
     the read rows, the journey drops its rotating caption (icons+words carry it), and long
     quotes clamp to four lines — the swipe row still gives the full stories. */
  .pf-softnote{display:none}
  #pf-jcap{display:none}
  .pf-jwrap{margin:8px 0 6px}
  .pf-quoteq{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  /* offer-page slimming (one-page mandate): the match step now carries the program story,
     so the card's reco line + checkout note come off; trust row tightens to one line; the
     expect line's forced breaks collapse. Features stay — value must be visible at the buy. */
  .pf-recoline{display:none}
  .pf-checkoutnote{display:none}
  .pf-trust{font-size:12px;gap:6px 12px;margin-top:10px}
  .pf-expectline{font-size:12.5px;margin:10px 0 4px}
  .pf-expectline br{display:none}
  /* step-1 above-fold compression: 3-4 more chips visible before any scroll (time-to-first-tap).
     Chip size itself untouched — the 15.5px/44px floor holds. */
  .pf-kick{margin:4px 0 8px}
  .pf-h{margin-bottom:6px}
  .pf-cloud{gap:8px 7px}
  /* want grid: fit from padding/gap only — font stays AT the 15.5px floor, never below */
  .pf-wantgrid{gap:6px}
  .pf-wantgrid .pf-choice{padding:11px 8px}
  /* offer banner: one tight line — reclaims ~30px of sell window; deadline stays pinned */
  .pf-empower{padding:8px 12px;gap:9px}
  .pf-empbadge{font-size:14px;padding:7px 10px}
  .pf-emptxt{font-size:13.5px}
  .pf-emptxt b{display:inline;font-size:14.5px;margin-right:5px}
  .pf-launcher.pf-right{left:auto;right:16px}
}
@media (prefers-reduced-motion:reduce){
  #pf-root *{animation:none!important;transition:none!important}
  .pf-sym,.pf-chip,[data-r]{opacity:1!important;transform:none!important}
}

/* ── EXIT SAVE (two-step downsell) ───────────────────────────────────────────
   Cards are horizontal at every width: a 3-up grid at 375px squeezes them to
   ~105px and wraps the hook onto four lines with the art at mismatched heights
   (the same trap the site's save screen hit). Art left, copy right, always. */
.pf-svlist{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.pf-svcard{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;
  background:var(--clay-tint);text-decoration:none;transition:background .18s ease}
.pf-svcard:hover{background:#EFDCD4}
.pf-svimg{width:74px;height:74px;flex:0 0 auto;object-fit:cover;border-radius:10px;background:var(--wash)}
.pf-svtxt{display:flex;flex-direction:column;min-width:0}
.pf-svhook{color:var(--copper);font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.25}
.pf-svname{color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:800;line-height:1.25;margin-top:1px}
.pf-svprice{font-family:var(--sans);font-size:13px;line-height:1.3;margin-top:2px}
.pf-svprice s{color:var(--ink-3)}
.pf-svprice b{color:var(--ink);font-weight:800}
.pf-svben{color:var(--ink-2);font-family:var(--sans);font-size:11.5px;line-height:1.35;margin-top:4px}
.pf-svmore{color:var(--ink-2);font-family:var(--sans);font-size:13px;margin:16px 0 0}
.pf-svrows{display:flex;flex-direction:column}
.pf-svrow{display:block;padding:9px 0;border-top:1px solid var(--line-soft);text-decoration:none}
.pf-svrowmain{display:block;color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.35}
.pf-svrowmain b{font-weight:800}
.pf-svrowmain i{color:var(--copper);font-style:normal;font-weight:800}
.pf-svrow:hover .pf-svrowmain{color:var(--copper)}
.pf-svrownote{display:block;color:var(--ink-3);font-family:var(--sans);font-size:11.5px;line-height:1.35;margin-top:2px}
/* DSHEA — required on any screen carrying structure/function claims. */
.pf-svfda{color:var(--ink-3);font-family:var(--sans);font-size:10.5px;line-height:1.4;text-align:center;margin:16px 0 0}
@media (min-width:560px){
  .pf-svimg{width:88px;height:88px}
  .pf-svname{font-size:16px}
}