/* ============================================================
   "How Bigfix GSP Works" — scroll-scrubbed, paired step reveal
   ------------------------------------------------------------
   A soft "journey" card holding an avatar + benefits panel on
   the left, curved arrow connectors, and two 5-row numbered
   card lists on the right, with a 3-chip stat strip underneath.

   Desktop (>=961px, no reduced-motion): the panel is pinned
   (position: sticky) while the outer #pfScrub wrapper is given
   real extra scroll height by JS. The two lists are revealed in
   matched PAIRS — row i on the left and row i on the right
   animate together, at the same scroll position — and getting
   through all 5 pairs takes about twice the scroll distance (and
   each pair's own fade/slide is stretched over twice the scroll)
   compared to the plain cascade version, per request. A step
   counter + progress bar in the side panel track it.

   Smaller screens / reduced motion / no JS: falls back to a plain
   one-time forward cascade (or, with no JS at all, a fully visible
   static list) — see the .pf-cascade rules further down.
   ============================================================ */

.pf-outer {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 36px;
  background-image:
    radial-gradient(circle at 4% 82%, rgba(26,111,244,.08), transparent 42%),
    radial-gradient(circle at 97% 58%, rgba(124,92,252,.07), transparent 40%),
    radial-gradient(circle at 60% 100%, rgba(34,197,94,.05), transparent 36%);
  background-repeat: no-repeat;
  /* No overflow:hidden here on purpose — an ancestor with overflow set to
     anything but visible breaks position:sticky on any descendant (the
     pinned panel below), silently falling back to normal in-flow
     positioning. The decorative blobs are clipped by .pf-outer-bg
     instead, a plain sibling layer that never wraps the sticky panel. */
}
.pf-outer-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
  border-radius: inherit;
}
.pf-outer-bg::before,
.pf-outer-bg::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.pf-outer-bg::before {
  width: 320px; height: 320px; top: -100px; left: -90px;
  background: radial-gradient(circle, rgba(26,111,244,.11), transparent 70%);
}
.pf-outer-bg::after {
  width: 380px; height: 380px; top: -130px; right: -130px;
  background: radial-gradient(circle, rgba(124,92,252,.10), transparent 70%);
}
.pf-outer > *:not(.pf-outer-bg) { position: relative; z-index: 1; }
.pf-outer .program-lead { margin-bottom: 8px; }

/* Small dotted-grid accent, top-left corner of the card — a quiet
   graphic touch so the area above the heading doesn't read as bare
   empty space. */
.pf-bg-dots {
  position: absolute; top: 16px; left: 22px; width: 86px; height: 44px;
  background-image: radial-gradient(circle, #c7d5ee 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: .9; pointer-events: none; z-index: 0;
}

.pf-scrub { position: relative; }
.pf-scrub-sticky {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
/* Pin the panel in place on desktop while #pfScrub's JS-assigned
   extra height gives the visitor real scroll distance to move
   through — this is what makes step-by-step reveal track scroll
   position instead of a timer. */
@media (min-width: 961px) {
  .pf-scrub.pf-scrub-pin .pf-scrub-sticky {
    position: sticky;
    top: 96px;
  }
}

/* ── Left panel: avatar, copy, benefit list, CTA ── */
.pf-side { flex: 0 0 250px; text-align: left; position: relative; }
.pf-side-deco { position: absolute; inset: -20px -10px auto auto; width: 60px; height: 60px; pointer-events: none; }
.pf-side-deco span {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #c9d6ee;
}
.pf-side-deco span:nth-child(1) { top: 0;    left: 0; }
.pf-side-deco span:nth-child(2) { top: 0;    left: 18px; }
.pf-side-deco span:nth-child(3) { top: 0;    left: 36px; }
.pf-side-deco span:nth-child(4) { top: 18px; left: 0; }
.pf-side-deco span:nth-child(5) { top: 18px; left: 18px; }
.pf-side-deco span:nth-child(6) { top: 18px; left: 36px; }

.pf-side .pc-avatar { margin: 0 0 16px; }
.pf-side h3 { text-align: left; }
.pf-side-desc { font-size: .82rem; color: #4a6080; line-height: 1.6; margin: 0 0 16px; }
.pf-side-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-side-list li { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--navy, #0d1f3c); }
.pf-side-ico {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: #eaf1ff; display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.pf-side .pc-cta { width: 100%; text-align: center; }

/* ── Curved arrow connectors ── */
.pf-arrow { flex: 0 0 84px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pf-arrow-label { font-size: .62rem; font-weight: 700; color: var(--blue, #1a6ff4); text-align: center; letter-spacing: .01em; line-height: 1.25; }
.pf-arrow svg { width: 100%; height: 40px; overflow: visible; }
.pf-arrow path { fill: none; stroke: var(--blue, #1a6ff4); stroke-width: 2; stroke-linecap: round; }
.pf-arrow .pf-arrow-head { stroke-width: 2.2; }

/* ── Lists ── */
.pf-list { flex: 1 1 0; min-width: 0; }
.pf-list-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--head, #1a6ff4); color: #fff; font-size: .8rem; font-weight: 700;
  padding: 9px 14px; border-radius: 11px; margin-bottom: 10px;
}
.pf-list-head-ico { font-size: .92rem; }
.pf-list-card {
  background: #fff; border: 1px solid var(--border, #dde4ef); border-radius: 16px;
  box-shadow: 0 12px 28px rgba(13,31,60,.06); padding: 12px;
  display: flex; flex-direction: column; gap: 14px;
  /* Clip so a row mid-reveal can never visually spill past the card's
     rounded border. */
  overflow: hidden;
}
/* Pin/scrub mode grows each row's own height/padding/margin from zero
   as it's revealed (see program-scroll.js) — the static gap here would
   otherwise add extra fixed spacing on top of that per-row margin, so
   it's turned off only in this mode. */
#pfScrub.pf-scrub-pin .pf-list-card { gap: 0; }
.pf-row {
  display: flex; align-items: center; gap: 10px;
  border-radius: 10px; padding: 10px 12px 10px 11px;
  background: #fafbfd;
  border-left: 3px solid var(--num, transparent);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.pf-row:hover { background: #f4f7fc; }
#pfScrub.pf-scrub-pin .pf-row.pf-in { box-shadow: 0 2px 10px rgba(13,31,60,.05); }
.pf-num {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--num, #1a6ff4); color: #fff; font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pf-ico {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .92rem; box-shadow: inset 0 0 0 1px rgba(13,31,60,.08);
}
.pf-row strong { font-size: .82rem; font-weight: 700; color: var(--navy, #0d1f3c); display: block; }
.pf-row em { font-style: normal; font-weight: 500; font-size: .66rem; color: #5a7090; display: block; margin-top: 1px; }

/* ── Bottom stat strip ── */
.pf-stats {
  max-width: 1280px; margin: 32px auto 0; padding: 20px 24px;
  background: #eef2fa; border-radius: 16px;
  border: 1px solid rgba(13,31,60,.06);
  box-shadow: 0 12px 30px rgba(13,31,60,.06);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.pf-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 18px;
  border-left: 1px solid #dbe3f0;
}
.pf-stat:first-child { border-left: none; }
.pf-stat-ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: #fff; display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: inset 0 0 0 1px rgba(13,31,60,.07), 0 4px 10px rgba(13,31,60,.06);
  padding: 0 !important; margin: 0 !important;
}
.pf-stat-ico svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pf-stat:nth-child(1) .pf-stat-ico { background: #ffe1e8; }
.pf-stat:nth-child(2) .pf-stat-ico { background: #ffedcc; }
.pf-stat:nth-child(3) .pf-stat-ico { background: #dde8ff; }
.pf-stat strong { font-size: .9rem; font-weight: 800; color: var(--navy, #0d1f3c); display: block; }
.pf-stat span { font-size: .76rem; color: #48597a; font-weight: 500; display: block; margin-top: 2px; }

/* ── Pin/scrub state (desktop) ──
   program-scroll.js grows each row's height/padding/margin and fades
   its opacity inline, every scroll frame, directly from scroll
   progress (paired left/right, so row i in both lists always shows
   the same value) — so no CSS transition is attached here: a
   transition would add lag between the scroll gesture and what you
   see, which defeats the point of scrubbing. Because each row's real
   box grows from zero, the card's total height tracks how many steps
   have appeared instead of reserving space for all of them up front. */
#pfScrub.pf-scrub-pin .pf-arrow { opacity: 0; }
#pfScrub.pf-scrub-pin .pf-row.pf-in .pf-num { box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 2px 8px rgba(13,31,60,.18); }

/* ── Cascade fallback (mobile, reduced motion, progressive
   enhancement while JS is still loading) ──
   One-time forward reveal: each row fades/slides in as it scrolls
   into view and then stays — still driven by an IntersectionObserver,
   not scroll math, since there's no pinned panel to scrub against. */
#pfScrub.pf-cascade .pf-row {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.16,.75,.3,1), transform 1.8s cubic-bezier(.16,.75,.3,1);
  will-change: transform, opacity;
}
#pfScrub.pf-cascade .pf-row:nth-child(1) { transition-delay: 0ms; }
#pfScrub.pf-cascade .pf-row:nth-child(2) { transition-delay: 280ms; }
#pfScrub.pf-cascade .pf-row:nth-child(3) { transition-delay: 560ms; }
#pfScrub.pf-cascade .pf-row:nth-child(4) { transition-delay: 840ms; }
#pfScrub.pf-cascade .pf-row:nth-child(5) { transition-delay: 1120ms; }
#pfScrub.pf-cascade #pfListLeft .pf-row  { transform: translateX(-12px); }
#pfScrub.pf-cascade #pfListRight .pf-row { transform: translateX(12px); }
#pfScrub.pf-cascade .pf-row.pf-in { opacity: 1; transform: none; }

#pfScrub.pf-cascade .pf-arrow { opacity: 0; transform: scale(.94); transition: opacity 1s ease, transform 1s ease; }
#pfScrub.pf-cascade.pf-connectors-in .pf-arrow { opacity: 1; transform: none; }

/* ── Mid-width layout (roughly laptop widths that are too narrow for
   the full 5-item row: side panel + 2 arrows + 2 lists) ──
   Below this, the row runs out of horizontal room and every element
   just gets squeezed thinner and thinner — list columns end up too
   narrow for their own text, which wraps to extra lines the scrub
   animation didn't budget height for. Instead of squeezing, the side
   panel is pushed onto its own row, full width, and the two lists (with
   their arrow connectors) wrap onto a second row underneath — still
   side-by-side with each other, just no longer fighting the side panel
   for space. */
@media (min-width: 961px) and (max-width: 1180px) {
  .pf-scrub-sticky { flex-wrap: wrap; justify-content: center; row-gap: 28px; }
  /* flex: 0 0 100% (no grow, no shrink) — unlike a plain 100% basis, this
     can't shrink back down to squeeze onto the same line as the arrows
     and lists, so it reliably claims the whole row on its own and pushes
     everything else onto the row below. Any width-narrowing for a nicer
     reading measure is done on the CHILDREN below instead of on this
     element itself, since capping .pf-side's own width here would give
     the browser just enough spare room on that line to stop wrapping. */
  .pf-side {
    flex: 0 0 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  .pf-side h3,
  .pf-side-desc { text-align: center; }
  .pf-side-desc { max-width: 460px; margin-left: auto; margin-right: auto; }
  .pf-side-deco { display: none; }
  .pf-side-list { align-items: center; max-width: 460px; margin-left: auto; margin-right: auto; }
  .pf-side .pc-cta { max-width: 320px; margin: 0 auto; }
}

/* ── Responsive layout: stack the columns on small screens ──
   Everything collapses into one column, but that column is capped at
   a comfortable reading width and centered in the viewport (rather
   than every full-width piece — the CTA button, list headers, cards —
   stretching edge to edge), so the whole thing reads as one centered
   block on tablets and wide phones instead of a loose full-bleed
   stack. */
@media (max-width: 960px) {
  .pf-outer { padding: 32px 20px 28px; border-radius: 20px; overflow: hidden; }
  .pf-bg-dots { display: none; }
  .pf-scrub-sticky {
    flex-direction: column; align-items: center; gap: 28px; padding: 0;
    width: 100%; max-width: 440px; margin: 0 auto;
  }
  .pf-side { flex: none; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .pf-side h3,
  .pf-side-desc { text-align: center; }
  .pf-side .pc-avatar { width: 72px; height: 72px; font-size: 2rem; }
  .pf-side-deco { display: none; }
  .pf-side-list { align-items: center; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .pf-side-list li { width: 100%; justify-content: center; text-align: left; }
  .pf-side .pc-cta { max-width: 340px; margin: 0 auto; }
  .pf-arrow { display: none; }
  .pf-list { width: 100%; }
  .pf-list-head { max-width: 340px; margin-left: auto; margin-right: auto; }
  .pf-list-card { padding: 12px; max-width: 340px; margin-left: auto; margin-right: auto; }
  .pf-row { padding: 10px 12px; gap: 10px; }
  .pf-stats { grid-template-columns: 1fr; gap: 14px; }
  .pf-stat { border-left: none; padding: 10px 0; }
  .pf-stat:not(:first-child) { border-top: 1px solid #e2e8f2; }
}

@media (max-width: 420px) {
  .pf-row strong { font-size: .8rem; }
  .pf-row em { font-size: .66rem; }
  .pf-num { width: 22px; height: 22px; font-size: .6rem; }
  .pf-ico { width: 30px; height: 30px; font-size: .9rem; }
  .pf-list-head { font-size: .76rem; padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #pfScrub.pf-cascade .pf-row { transition: opacity .3s ease !important; transform: none !important; }
}