/**
 * Client Result page (page-templates/page-ealing.php).
 *
 * Dark hero → cream evidence → deep-green referral moment → cream
 * systems → offer → dark close. Follows the site type floor: copy on
 * dark at >= 0.8 alpha / weight 500; crisp Inter eyebrows; deep gold
 * (#8B6914) for eyebrows on cream, brand gold on dark.
 */

/* Nav seam — dark-first page: hide the spacer, fold nav height into
 * the hero's own padding (same fix as about / hub / thank-you). */
.page-template-page-ealing .nav-spacer { display: none; }
/* (Hero now sits on the cream ground; spacer still hidden so the
 * gradient runs up behind the fixed nav like the homepage.) */

.prf-main { background: var(--cream-warm, #fef7ed); }

.prf-inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* ── Shared atoms ─────────────────────────────────────────── */
.prf-eyebrow {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gildhart-gold);
  margin: 0 0 1.1rem;
}
.prf-eyebrow--deep { color: #8B6914; }

.prf-h2 {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.prf-lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0;
  max-width: 62ch;
}
.prf-lead em { font-style: normal; color: var(--navy); font-weight: 700; }
.prf-section-head { max-width: 760px; margin: 0 0 3rem; }

.prf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.95rem 1.75rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.prf-btn:hover { transform: translateY(-1px); }
.prf-btn--gold { background: var(--gildhart-gold); color: var(--gildhart-black); }
.prf-btn--gold:hover { background: #b8912f; }
.prf-btn--ghost {
  color: #fdfbf5;
  border: 1px solid rgba(201, 164, 74, 0.5);
}
.prf-btn--ghost:hover { border-color: var(--gildhart-gold); }
.prf-btn--block { width: 100%; margin-top: auto; }

.prf-ticks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.prf-ticks li {
  position: relative;
  padding-left: 1.85rem;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.55;
}
.prf-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gildhart-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%230D1A12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ── Hero ─────────────────────────────────────────────────
 * Mirrors the homepage hero exactly: cream/peach/mint ground, 1400px
 * two-column grid, same title scale — with a live AI Overview card on
 * the right that types the real London queries Ealing is named in. */
.prf-hero {
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  background: linear-gradient(135deg, #fef7ed 0%, #fdf4e8 25%, #fef9f3 50%, #f0fdf9 75%, #ecfdf5 100%);
  padding: calc(3rem + var(--nav-h, 130px)) 2rem 5rem;
}
.prf-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}
.prf-hero-eyebrow {
  display: inline-block;
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gildhart-green);
  margin: 0 0 1.4rem;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(201, 164, 74, 0.9);
}
.prf-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #1a2b3c;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.prf-intro {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--gray-600);
  max-width: 560px;
  margin: 0 0 2.25rem;
}
.prf-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.prf-ctas--center { justify-content: center; }
.prf-textlink {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1a2b3c;
  text-decoration: none;
}
.prf-textlink span { display: inline-block; transition: transform 0.2s ease; }
.prf-textlink:hover span { transform: translateX(3px); }
.prf-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1rem 3rem;
  margin-top: 2.75rem;
}
.prf-stat { display: flex; flex-direction: column; gap: 0.4rem; }
.prf-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8B6914;
}
.prf-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #1a2b3c;
  line-height: 1;
}

/* Live AI Overview card */
.prf-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prf-ai-glow {
  position: absolute;
  inset: 6% 4%;
  background: radial-gradient(ellipse at 62% 42%, rgba(201, 164, 74, 0.24) 0%, rgba(201, 164, 74, 0) 68%);
  filter: blur(46px);
}
.prf-ai-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
  border: 1px solid rgba(201, 164, 74, 0.35);
  border-radius: 24px;
  padding: 1.9rem 1.9rem 1.65rem;
  box-shadow: 0 34px 70px -26px rgba(30, 61, 47, 0.30), 0 8px 24px rgba(15, 23, 42, 0.06);
}
.prf-ai-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; }
.prf-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gildhart-green); }
.prf-ai-head-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B6914;
}
.prf-ai-query {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #f6f3ec;
  border: 1px solid rgba(30, 61, 47, 0.08);
  border-radius: 13px;
  padding: 0.95rem 1.1rem;
  min-height: 3.4rem;
}
.prf-ai-query-icon { flex-shrink: 0; width: 17px; height: 17px; color: rgba(30, 61, 47, 0.45); display: inline-flex; }
.prf-ai-query-icon svg { width: 100%; height: 100%; }
.prf-ai-query-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.03rem;
  font-weight: 500;
  color: #1a2b3c;
  line-height: 1.4;
}
.prf-ai-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--gildhart-green);
  margin-left: 2px;
  flex-shrink: 0;
}
.prf-ai-answer { padding: 1.25rem 0.3rem 0.4rem; min-height: 6.6rem; }
.prf-ai-answer-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(13, 26, 18, 0.84);
}
.prf-ai-answer-text strong { color: #8B6914; font-weight: 800; }
.prf-ai-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin-top: 0.85rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(30, 61, 47, 0.08);
}
.prf-ai-sources-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13, 26, 18, 0.5);
}
.prf-ai-source {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gildhart-green);
  background: rgba(30, 61, 47, 0.07);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.prf-ai-caption {
  position: relative;
  z-index: 1;
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 500;
  color: var(--gray-600);
}
.prf-ai-caption a {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #8B6914;
  text-decoration: none;
  white-space: nowrap;
}
.prf-ai-caption a:hover { text-decoration: underline; }

/* Answer + source fade per cycle once JS drives the card. Without JS
 * or with reduced motion, the first pair stays fully visible. */
.prf-ai-answer, .prf-ai-sources { transition: opacity 0.5s ease, transform 0.5s ease; }
.prf-ai-card.js-anim .prf-ai-answer,
.prf-ai-card.js-anim .prf-ai-sources { opacity: 0; transform: translateY(6px); }
.prf-ai-card.js-anim.is-answering .prf-ai-answer,
.prf-ai-card.js-anim.is-answering .prf-ai-sources { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .prf-ai-card { animation: prfFloat 6.5s ease-in-out infinite; }
  @keyframes prfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .prf-ai-dot { animation: prfPulse 2.2s ease-out infinite; }
  @keyframes prfPulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 61, 47, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(30, 61, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 61, 47, 0); }
  }
  .prf-ai-caret { animation: prfBlink 1.05s step-end infinite; }
  @keyframes prfBlink { 50% { opacity: 0; } }

  /* Staggered entrance — copy first, then the card arrives. */
  .prf-hero-copy > *,
  .prf-hero-visual {
    opacity: 0;
    transform: translateY(18px);
    animation: prfRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .prf-hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
  .prf-hero-copy > *:nth-child(3) { animation-delay: 0.24s; }
  .prf-hero-copy > *:nth-child(4) { animation-delay: 0.36s; }
  .prf-hero-copy > *:nth-child(5) { animation-delay: 0.48s; }
  .prf-hero-visual { animation-delay: 0.4s; }
  @keyframes prfRise { to { opacity: 1; transform: none; } }
}

/* ── Evidence ─────────────────────────────────────────────── */
/* Each item is a "receipt": a search bar carrying the query, then the
 * AI Overview excerpt naming the clinic (or the real screenshot once
 * uploaded), then a caption and a link to run the search yourself. The
 * verify link is the point — nothing here asks to be believed. */
.prf-evidence {
  padding: 6rem 2rem;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 164, 74, 0.07) 0%, transparent 60%),
    #ffffff;
}
.prf-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
}
.prf-shot { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.prf-shot-card {
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(26, 43, 60, 0.1);
  box-shadow: 0 1px 2px rgba(26, 43, 60, 0.04), 0 18px 44px rgba(26, 43, 60, 0.08);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.prf-shot:hover .prf-shot-card {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(26, 43, 60, 0.04), 0 28px 60px rgba(26, 43, 60, 0.12);
}
.prf-shot-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 1.5rem 0;
  padding: 0.7rem 1.1rem;
  background: #f8f9fb;
  border: 1px solid rgba(26, 43, 60, 0.1);
  border-radius: 999px;
}
.prf-shot-bar-icon { display: inline-flex; color: var(--gray-500); flex-shrink: 0; }
.prf-shot-bar-icon svg { width: 17px; height: 17px; }
.prf-shot-bar-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.prf-shot-image { margin-top: 1.25rem; border-top: 1px solid rgba(26, 43, 60, 0.08); }
.prf-shot-image img { display: block; width: 100%; height: auto; }
.prf-shot-ai { padding: 1.35rem 1.5rem 1.5rem; }
.prf-shot-ai-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gildhart-green);
}
.prf-shot-ai-spark {
  font-size: 0.9rem;
  color: #8B6914;
  line-height: 1;
}
.prf-shot-ai-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--navy);
  font-weight: 500;
}
.prf-shot-ai-text strong {
  font-weight: 800;
  color: var(--gildhart-green);
  background: linear-gradient(to top, rgba(201, 164, 74, 0.32) 0 38%, transparent 38%);
  padding: 0 0.1em;
  border-radius: 2px;
}
.prf-shot-ai-source {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(26, 43, 60, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}
.prf-shot-ai-source span {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B6914;
}
.prf-shot-ai-source::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gildhart-green);
  box-shadow: 0 0 0 3px rgba(30, 61, 47, 0.12);
  flex-shrink: 0;
}
.prf-shot-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 0 0.25rem;
}
.prf-shot-caption {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
}
.prf-shot-verify {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #8B6914;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}
.prf-shot-verify span { display: inline-block; transition: transform 0.25s ease; }
.prf-shot-verify:hover { text-decoration: underline; }
.prf-shot-verify:hover span { transform: translateX(3px); }
.prf-footnote {
  margin: 3rem 0 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #8B6914;
}

/* Receipts arrive in sequence as the section scrolls into view. Without
 * JS (no .js-reveal on the grid) or with reduced motion, nothing hides. */
@media (prefers-reduced-motion: no-preference) {
  .prf-evidence-grid.js-reveal .prf-shot {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.11s);
  }
  .prf-evidence-grid.js-reveal.is-in .prf-shot { opacity: 1; transform: none; }
}

/* ── Referral moment ──────────────────────────────────────── */
.prf-referral {
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(201, 164, 74, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #12241b 0%, #0d1a13 58%, #0a140f 100%);
  border-top: 1px solid rgba(201, 164, 74, 0.4);
  padding: 7rem 2rem;
}
.prf-referral-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 5rem;
  align-items: center;
}
.prf-referral-headline {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fdfbf5;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.prf-referral-p {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.72;
  color: rgba(248, 244, 234, 0.84);
  margin: 0 0 1.1rem;
  max-width: 54ch;
}
.prf-referral-p--kicker {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(201, 164, 74, 0.25);
  font-weight: 700;
  color: var(--gildhart-gold);
}

/* The chain: clinic → ChatGPT → Ealing, down a single gold thread. */
.prf-chain {
  position: relative;
  padding-left: 0.25rem;
}
.prf-chain::before {
  content: '';
  position: absolute;
  left: calc(0.25rem + 22px);
  top: 24px;
  bottom: 3.6rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(201, 164, 74, 0.15), rgba(201, 164, 74, 0.75) 50%, rgba(201, 164, 74, 0.15));
  transform-origin: top;
}
.prf-chain-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 2rem;
}
.prf-chain-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f1f17;
  border: 1.5px solid rgba(201, 164, 74, 0.5);
  color: rgba(248, 244, 234, 0.9);
  box-shadow: 0 0 0 6px #0e1c15;
  position: relative;
  z-index: 1;
}
.prf-chain-node svg { width: 20px; height: 20px; }
.prf-chain-node--ai {
  background: var(--gildhart-gold);
  border-color: var(--gildhart-gold);
  color: #0d1a13;
  font-size: 1.1rem;
  box-shadow: 0 0 0 6px #0e1c15, 0 0 28px rgba(201, 164, 74, 0.45);
}
.prf-chain-node--end {
  background: var(--gildhart-green);
  border-color: rgba(201, 164, 74, 0.7);
  color: var(--gildhart-gold);
}
.prf-chain-body { padding-top: 0.45rem; }
.prf-chain-step--ai .prf-chain-body { padding-top: 0; }
.prf-chain-label {
  margin: 0 0 0.3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gildhart-gold);
}
.prf-chain-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(248, 244, 234, 0.84);
  max-width: 40ch;
}
.prf-chat {
  background: rgba(253, 251, 245, 0.04);
  border: 1px solid rgba(201, 164, 74, 0.28);
  border-radius: 16px;
  padding: 1.25rem 1.4rem 1.4rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.prf-chat-head {
  margin: 0 0 0.9rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(248, 244, 234, 0.7);
}
.prf-chat-q {
  margin: 0 0 1rem;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fdfbf5;
  background: rgba(253, 251, 245, 0.1);
  border-radius: 14px 14px 4px 14px;
  padding: 0.7rem 1rem;
}
.prf-chat-a {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(248, 244, 234, 0.9);
}
.prf-chat-a strong {
  color: var(--gildhart-gold);
  font-weight: 800;
}
.prf-chain-note {
  margin: 0.25rem 0 0 calc(44px + 1.25rem);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(248, 244, 234, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .prf-referral.js-reveal .prf-chain::before { transform: scaleY(0); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
  .prf-referral.js-reveal .prf-chain-step,
  .prf-referral.js-reveal .prf-chain-note {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.25s + var(--i, 3) * 0.3s);
  }
  .prf-referral.js-reveal.is-in .prf-chain::before { transform: none; }
  .prf-referral.js-reveal.is-in .prf-chain-step,
  .prf-referral.js-reveal.is-in .prf-chain-note { opacity: 1; transform: none; }
  .prf-chain-node--ai { animation: prfGoldPulse 2.6s ease-out infinite; }
  @keyframes prfGoldPulse {
    0%   { box-shadow: 0 0 0 6px #0e1c15, 0 0 0 6px rgba(201, 164, 74, 0.5); }
    70%  { box-shadow: 0 0 0 6px #0e1c15, 0 0 0 18px rgba(201, 164, 74, 0); }
    100% { box-shadow: 0 0 0 6px #0e1c15, 0 0 0 6px rgba(201, 164, 74, 0); }
  }
}

/* ── Systems ──────────────────────────────────────────────── */
/* One panel, two halves: white (recommended) hands off to deep green
 * (booked) across a gold "then" join. Ledger rows replace tick lists —
 * what each system did for Ealing, not what it offers in general. */
.prf-systems { padding: 6rem 2rem; background: #fffdf8; }
.prf-sys {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(26, 43, 60, 0.1);
  box-shadow: 0 1px 2px rgba(26, 43, 60, 0.04), 0 30px 70px rgba(26, 43, 60, 0.1);
}
.prf-sys-half {
  display: flex;
  flex-direction: column;
  padding: 2.75rem 2.5rem 2.5rem;
}
.prf-sys-half--playbook { background: #ffffff; color: var(--gray-700); }
.prf-sys-half--agent {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(201, 164, 74, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #1E3D2F 0%, #15301f 100%);
  color: rgba(248, 244, 234, 0.88);
}
.prf-sys-top { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.1rem; }
.prf-sys-num {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(26, 43, 60, 0.14);
}
.prf-sys-half--agent .prf-sys-num { color: rgba(201, 164, 74, 0.35); }
.prf-sys-stage {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8B6914;
}
.prf-sys-half--agent .prf-sys-stage { color: var(--gildhart-gold); }
.prf-sys-title {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 0.9rem;
}
.prf-sys-half--agent .prf-sys-title { color: #fdfbf5; }
.prf-sys-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 1.75rem;
}
.prf-sys-label {
  margin: 0 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(26, 43, 60, 0.1);
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.prf-sys-half--agent .prf-sys-label { border-top-color: rgba(201, 164, 74, 0.28); color: rgba(248, 244, 234, 0.6); }
.prf-sys-ledger { margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.prf-sys-ledger div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.prf-sys-ledger dt {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--navy);
}
.prf-sys-half--agent .prf-sys-ledger dt { color: var(--gildhart-gold); }
.prf-sys-ledger dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.55;
}
.prf-sys-foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(26, 43, 60, 0.1);
}
.prf-sys-half--agent .prf-sys-foot { border-top-color: rgba(201, 164, 74, 0.28); }
.prf-sys-price {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.prf-sys-half--agent .prf-sys-price { color: #fdfbf5; }
.prf-sys-price small { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--gray-500); margin-left: 0.2rem; }
.prf-sys-half--agent .prf-sys-price small { color: rgba(248, 244, 234, 0.65); }
.prf-sys-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #8B6914;
  text-decoration: none;
  white-space: nowrap;
}
.prf-sys-half--agent .prf-sys-link { color: var(--gildhart-gold); }
.prf-sys-link span { display: inline-block; transition: transform 0.25s ease; }
.prf-sys-link:hover { text-decoration: underline; }
.prf-sys-link:hover span { transform: translateX(3px); }

/* The join: vertical gold thread with a "then" pill, overlapping both
 * halves so the two systems read as one sequence. */
.prf-sys-join {
  position: relative;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.prf-sys-join-line { flex: 1; width: 2px; background: linear-gradient(180deg, transparent, rgba(201, 164, 74, 0.8), transparent); }
.prf-sys-join-pill {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gildhart-black);
  background: var(--gildhart-gold);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  box-shadow: 0 0 0 5px #fffdf8, 0 8px 22px rgba(201, 164, 74, 0.35);
}
.prf-bridge {
  margin: 3rem auto 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--navy);
  max-width: 34ch;
  line-height: 1.45;
}
.prf-bridge span { color: #8B6914; }

@media (prefers-reduced-motion: no-preference) {
  .prf-systems.js-reveal .prf-sys-half {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.18s);
  }
  .prf-systems.js-reveal .prf-sys-join { opacity: 0; transition: opacity 0.6s ease 0.45s; }
  .prf-systems.js-reveal.is-in .prf-sys-half,
  .prf-systems.js-reveal.is-in .prf-sys-join { opacity: 1; transform: none; }
}

/* ── Offer ────────────────────────────────────────────────── */
/* A comparison ledger, not product cards. Label column + three plan
 * columns; the "Both" column is the recommendation and carries the
 * only gold button. Rows align across columns because it's one grid. */
.prf-offer {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #fef7ed 0%, #fdf4e8 30%, #f0fdf9 100%);
  border-top: 1px solid rgba(26, 43, 60, 0.06);
}
.prf-plan {
  display: grid;
  grid-template-columns: 8.5rem 1fr 1fr 1fr;
  background: #ffffff;
  border: 1px solid rgba(26, 43, 60, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 43, 60, 0.04), 0 30px 70px rgba(26, 43, 60, 0.1);
}
.prf-plan-row { display: contents; }
.prf-plan-cell {
  padding: 1.4rem 1.6rem;
  border-top: 1px solid rgba(26, 43, 60, 0.08);
  border-left: 1px solid rgba(26, 43, 60, 0.08);
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray-700);
}
.prf-plan-cell strong { color: var(--navy); font-weight: 800; }
.prf-plan-row--head .prf-plan-cell { border-top: 0; padding-top: 2rem; padding-bottom: 1.6rem; }
.prf-plan-cell--label,
.prf-plan-row--head .prf-plan-cell:first-child { border-left: 0; }
.prf-plan-cell--label {
  background: #fbfaf6;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding-top: 1.6rem;
}
.prf-plan-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.prf-plan-cell--both { background: #fffcf3; }
.prf-plan-col--both { position: relative; }
.prf-plan-col--both::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gildhart-gold);
}
.prf-plan-tag {
  margin: 0 0 0.6rem;
  min-height: 1.3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8B6914;
}
.prf-plan-flag {
  display: inline-block;
  background: var(--gildhart-gold);
  color: var(--gildhart-black);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}
.prf-plan-title {
  margin: 0 0 0.3rem;
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.prf-plan-sub {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
}
.prf-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.prf-plan-list li { position: relative; padding-left: 1.35rem; }
.prf-plan-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gildhart-gold);
}
.prf-plan-row--price .prf-plan-cell { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.prf-plan-price {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
}
.prf-plan-price em { font-style: normal; color: #8B6914; font-weight: 700; font-size: 1.3rem; margin: 0 0.1rem; }
.prf-plan-terms {
  display: block;
  margin-top: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
}
.prf-plan-row--cta .prf-plan-cell { padding-top: 1.25rem; padding-bottom: 1.75rem; }
.prf-plan-row--cta .prf-plan-cell--label { background: #fbfaf6; }
.prf-btn--outline {
  color: var(--navy);
  border: 1.5px solid rgba(26, 43, 60, 0.2);
  background: #ffffff;
}
.prf-btn--outline:hover { border-color: var(--navy); }
.prf-plan-row--cta .prf-btn--block { margin-top: 0; }
.prf-plan-note {
  margin: 1.75rem 0 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-600);
  max-width: 70ch;
}

@media (prefers-reduced-motion: no-preference) {
  .prf-offer.js-reveal .prf-plan { opacity: 0; transform: translateY(20px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
  .prf-offer.js-reveal.is-in .prf-plan { opacity: 1; transform: none; }
}

/* ── Close ────────────────────────────────────────────────── */
.prf-close {
  background: linear-gradient(180deg, #0f172a 0%, #0d1424 100%);
  padding: 6rem 2rem;
}
.prf-close-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.prf-close-headline {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fdfbf5;
  margin: 0 0 2.25rem;
  text-wrap: balance;
}
.prf-close-headline span { color: var(--gildhart-gold); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .prf-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .prf-hero-visual { order: 2; }
  .prf-referral-inner { grid-template-columns: 1fr; gap: 3.5rem; }
  .prf-chain { max-width: 640px; }
}
@media (max-width: 960px) {
  .prf-sys { grid-template-columns: 1fr; }
  .prf-sys-join { width: auto; height: 0; flex-direction: row; }
  .prf-sys-join-line { width: auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 164, 74, 0.8), transparent); }
  .prf-sys-half { padding: 2.25rem 1.5rem 2rem; }
  .prf-sys-ledger div { grid-template-columns: 1fr; gap: 0.15rem; }
  /* Ledger → three stacked plan cards: label column hidden, each cell
   * carries its own row label; rows regroup by column via order. */
  .prf-plan { display: flex; flex-direction: column; background: transparent; border: 0; box-shadow: none; overflow: visible; gap: 1.25rem; }
  .prf-plan-row { display: contents; }
  .prf-plan-cell--label { display: none; }
  .prf-plan-cell { border: 1px solid rgba(26, 43, 60, 0.1); border-top: 0; background: #ffffff; padding: 1.1rem 1.4rem; }
  .prf-plan-cell::before { content: attr(data-label); display: block; margin-bottom: 0.3rem; font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gray-500); }
  .prf-plan-row--head .prf-plan-cell::before,
  .prf-plan-row--cta .prf-plan-cell::before { display: none; }
  .prf-plan-row--head .prf-plan-cell { border-top: 1px solid rgba(26, 43, 60, 0.1); border-radius: 18px 18px 0 0; padding-top: 1.6rem; }
  .prf-plan-row--cta .prf-plan-cell { border-radius: 0 0 18px 18px; margin-bottom: 0.25rem; }
  .prf-plan-cell--both { background: #fffcf3; }
  /* order: column 1 cells = 1x, column 2 = 2x, column 3 = 3x */
  .prf-plan-row > .prf-plan-cell:nth-child(2) { order: 10; }
  .prf-plan-row > .prf-plan-cell:nth-child(3) { order: 20; }
  .prf-plan-row > .prf-plan-cell:nth-child(4) { order: 30; }
  .prf-plan-row--head > .prf-plan-cell:nth-child(2) { order: 10; }
  .prf-plan-row--cta  > .prf-plan-cell:nth-child(2) { order: 19; }
  .prf-plan-row--cta  > .prf-plan-cell:nth-child(3) { order: 29; }
  .prf-plan-row--cta  > .prf-plan-cell:nth-child(4) { order: 39; }
}
@media (max-width: 640px) {
  .prf-hero { padding: calc(2.5rem + var(--nav-h, 130px)) 1.25rem 3.5rem; }
  .prf-evidence,
  .prf-referral,
  .prf-systems,
  .prf-offer,
  .prf-close { padding: 4rem 1.25rem; }
  .prf-evidence-grid { grid-template-columns: 1fr; gap: 2rem; }
  .prf-shot-bar { margin: 1rem 1rem 0; }
  .prf-shot-ai { padding: 1.15rem 1rem 1.25rem; }
  .prf-shot-foot { flex-direction: column; align-items: flex-start; }
  .prf-shot-verify { margin-left: 0; }
  .prf-stats { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .prf-ai-card { padding: 1.4rem 1.25rem 1.25rem; }
  .prf-ai-answer-text { font-size: 1.0625rem; }
  .prf-ctas .prf-btn { width: 100%; }
}