/* ============================================================
   LEAD SYSTEMS GO — Pay-Per-Lead VSL Page
   Additive stylesheet. Loads AFTER css/styles.css.
   Inherits all design tokens from styles.css :root.
   NOTE: no class name may begin with "ad", contain "ads",
   "sponsor" or "banner" — ad blockers hide those elements
   and the page renders blank. Use "grow", "spot", "promo".
   ============================================================ */

/* ---------- page-level ---------- */

.ppl-body { background: var(--color-light-bg); }

.ppl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }
.ppl-narrow { max-width: 860px; margin: 0 auto; padding: 0 var(--space-5); }

.ppl-sec { padding: var(--space-16) 0; }
@media (min-width: 768px) { .ppl-sec { padding: var(--space-20) 0; } }

.ppl-sec--tight { padding: var(--space-12) 0; }
.ppl-sec--dark { background: var(--color-dark-bg); color: var(--color-text-light); }
.ppl-sec--ink { background: #0C0A09; color: var(--color-text-light); }
.ppl-sec--surface { background: var(--color-white); }
.ppl-sec--warm { background: linear-gradient(180deg, #FFF7F2 0%, #F9FAFB 100%); }

.ppl-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.ppl-sec--dark .ppl-eyebrow,
.ppl-sec--ink .ppl-eyebrow { color: var(--color-primary-light); }

.ppl-h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.65rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.ppl-h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.ppl-lede {
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  line-height: 1.62;
  color: var(--color-text-secondary);
  max-width: 68ch;
}
.ppl-sec--dark .ppl-lede,
.ppl-sec--ink .ppl-lede { color: rgba(255,255,255,0.76); }

.ppl-p { font-size: 1.02rem; line-height: 1.68; margin-bottom: var(--space-4); max-width: 68ch; }
.ppl-p--muted { color: var(--color-text-secondary); }
.ppl-sec--dark .ppl-p--muted,
.ppl-sec--ink .ppl-p--muted { color: rgba(255,255,255,0.72); }

.ppl-hl { color: var(--color-primary); font-weight: 600; }
.ppl-sec--dark .ppl-hl, .ppl-sec--ink .ppl-hl { color: var(--color-primary-light); }
.ppl-strong { font-weight: 700; color: var(--color-text-dark); }
.ppl-sec--dark .ppl-strong, .ppl-sec--ink .ppl-strong { color: #fff; }

.ppl-note {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 74ch;
}

/* ---------- slim header for the VSL page ---------- */

.ppl-head {
  position: sticky; top: 0; z-index: 90;
  background: rgba(20,18,16,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-dark-border);
}
.ppl-head__in {
  max-width: 1180px; margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
}
.ppl-head__logo {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.02em; line-height: 1;
  display: inline-flex; gap: 0.32em; color: #fff;
}
.ppl-head__logo span:last-child { color: var(--color-primary); }
.ppl-head__spacer { flex: 1; }
.ppl-head__phone {
  color: rgba(255,255,255,0.78); font-size: 0.9rem;
  font-family: var(--font-heading); font-weight: 500;
}
.ppl-head__phone:hover { color: #fff; }
@media (max-width: 620px) { .ppl-head__phone { display: none; } }
.ppl-head .btn { font-size: 0.8rem; padding: var(--space-2) var(--space-4); }

/* ---------- top strip ---------- */

.ppl-strip {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-primary); color: #fff;
  padding: var(--space-2) var(--space-5);
  font-size: 0.82rem; text-align: center;
}
.ppl-strip__tag {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(0,0,0,0.24); padding: 3px 8px; border-radius: var(--radius-full);
}
.ppl-strip__cta { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- lane switch ---------- */

.lane-switch-row { display: block; margin-bottom: var(--space-6); }
.lane-switch-row .lane-switch { margin-bottom: 0; }

.lane-switch {
  display: inline-flex; padding: 4px; gap: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}
.lane-switch--onlight {
  background: rgba(29,41,57,0.05);
  border-color: rgba(29,41,57,0.12);
}
.lane-switch__btn {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,0.66);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.lane-switch--onlight .lane-switch__btn { color: var(--color-text-secondary); }
.lane-switch__btn:hover { color: #fff; }
.lane-switch--onlight .lane-switch__btn:hover { color: var(--color-text-dark); }
.lane-switch__btn[aria-selected="true"] {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(255,98,16,0.32);
}
@media (max-width: 480px) {
  .lane-switch { width: 100%; }
  .lane-switch__btn { flex: 1; padding: var(--space-2) var(--space-2); font-size: 0.74rem; }
}

/* two-line toggle buttons: the role AND the lead type they get */
.lane-switch__btn b {
  display: block; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.1;
}
.lane-switch__btn small {
  display: block; font-weight: 500; font-size: 0.72rem; line-height: 1.2;
  margin-top: 3px; opacity: 0.85; text-transform: none; letter-spacing: 0;
}
.lane-switch__btn { padding: var(--space-3) var(--space-5); text-align: left; }
.lane-switch__btn[aria-selected="true"] small { opacity: 0.95; }
@media (max-width: 480px) {
  .lane-switch__btn { padding: var(--space-2) var(--space-3); }
  .lane-switch__btn b { font-size: 0.72rem; }
  .lane-switch__btn small { font-size: 0.64rem; }
}

/* lane visibility, driven by data-lane on <html> */
html[data-lane="dealer"] .lane-inv { display: none !important; }
html[data-lane="investor"] .lane-dlr { display: none !important; }

/* ---------- hero ---------- */

.ppl-hero {
  position: relative;
  background: var(--color-dark-bg);
  color: var(--color-text-light);
  overflow: hidden;
  padding: var(--space-12) 0 var(--space-16);
}
/* Flyover: a slow pan + zoom across the aerial so it reads as a drone
   pass over a manufactured home park, not a static wallpaper. */
@keyframes flyover {
  from { transform: scale(1.18) translate(-3.5%, -2%); }
  to   { transform: scale(1.34) translate(3.5%, 2.5%); }
}
.ppl-hero__bg {
  position: absolute; inset: 0;
  background: url('/images/bg-manufactured-homes.webp') center/cover no-repeat;
  opacity: 0.32;
  transform-origin: center;
  will-change: transform;
  animation: flyover 46s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .ppl-hero__bg { animation: none; transform: scale(1.2); } }

/* light sections with the same flyover behind white cards (replaces the pink tint) */
.ppl-sec--fly { position: relative; overflow: hidden; background: #F9FAFB; }
.ppl-sec--fly::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('/images/bg-manufactured-homes.webp') center/cover no-repeat;
  transform-origin: center; will-change: transform;
  animation: flyover 52s ease-in-out infinite alternate-reverse;
}
.ppl-sec--fly::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(249,250,251,0.86) 0%, rgba(249,250,251,0.80) 50%, rgba(249,250,251,0.9) 100%);
}
.ppl-sec--fly > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ppl-sec--fly::before { animation: none; transform: scale(1.2); } }
.ppl-hero__glow {
  position: absolute; top: -22%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,98,16,0.20) 0%, rgba(255,98,16,0) 68%);
}
.ppl-hero__in { position: relative; z-index: 2; text-align: center; }

/* the label now sits UNDER the H1 */
.ppl-hero__label {
  display: inline-block;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary-light);
  border: 1px solid rgba(255,98,16,0.34);
  background: rgba(255,98,16,0.08);
  padding: 6px 14px; border-radius: var(--radius-full);
  margin: 0 auto var(--space-6);
}
.ppl-hero__h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2.05rem, 6.4vw, 4rem);
  line-height: 1.02; letter-spacing: -0.028em;
  text-transform: uppercase;
  margin: 0 auto var(--space-5);
  max-width: 20ch;
}
@media (max-width: 480px) { .ppl-hero__label { letter-spacing: 0.1em; font-size: 0.64rem; padding: 5px 10px; } }

.hero-story {
  font-size: clamp(0.98rem, 1.9vw, 1.1rem);
  line-height: 1.66; color: rgba(255,255,255,0.84);
  max-width: 66ch; margin: 0 auto var(--space-5);
}
.hero-story b { color: #fff; font-weight: 600; }
.hero-mech {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.5;
  color: #fff; max-width: 60ch; margin: 0 auto var(--space-8);
}
.hero-mech em { font-style: normal; color: var(--color-primary-light); }
.ppl-hero__h1 em {
  font-style: normal; color: var(--color-primary);
  display: block;
}
/* Second line of the hero. Smaller than the H1, clearly bigger and stronger
   than .ppl-hero__label, and it reuses the H1 em treatment so the promise
   lands on its own line in brand orange. */
.ppl-hero__deck {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.15rem, 2.9vw, 1.75rem);
  line-height: 1.25; letter-spacing: -0.012em;
  color: rgba(255,255,255,0.92);
  max-width: 30ch; margin: 0 auto var(--space-5);
}
.ppl-hero__deck em {
  font-style: normal; color: var(--color-primary);
  display: block; margin-top: 4px;
}

.ppl-hero__sub {
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  line-height: 1.62; color: rgba(255,255,255,0.8);
  max-width: 62ch; margin: 0 auto var(--space-8);
}

/* ---------- video stage ---------- */

.vsl-stage { max-width: 900px; margin: 0 auto var(--space-6); }
.vsl-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,98,16,0.07);
}
.vsl-frame iframe, .vsl-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* placeholder poster — also doubles as the thumbnail design spec */
.vsl-poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); text-align: center; cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(255,98,16,0.30) 0%, rgba(255,98,16,0) 62%),
    linear-gradient(150deg, #16130F 0%, #0A0908 62%, #1A1310 100%);
  padding: var(--space-6);
}
.vsl-poster__num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 5.2rem); line-height: 0.9;
  letter-spacing: -0.04em; color: #fff;
}
.vsl-poster__num b { color: var(--color-primary); font-weight: 800; }
.vsl-poster__words {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(0.8rem, 2.2vw, 1.05rem);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.vsl-poster__play {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--color-primary);
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(255,98,16,0.5);
  transition: transform var(--transition-fast);
}
.vsl-poster:hover .vsl-poster__play { transform: scale(1.07); }
.vsl-poster__play svg { margin-left: 4px; }
.vsl-poster__meta {
  position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-3); align-items: center;
  font-size: 0.72rem; color: rgba(255,255,255,0.55);
  font-family: var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase;
}
.vsl-poster__slot {
  position: absolute; top: var(--space-4); left: var(--space-4);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
  border: 1px dashed rgba(255,255,255,0.28);
  padding: 4px 9px; border-radius: var(--radius-sm);
}
/* A 16:9 frame on a 390px phone is only ~195px tall, which is not
   enough room for slot + number + words + play + meta. Drop the
   chrome and keep the number, the words and the button. */
@media (max-width: 700px) {
  .vsl-poster { gap: var(--space-2); padding: var(--space-4); }
  .vsl-poster__slot,
  .vsl-poster__meta { display: none; }
  .vsl-poster__num { font-size: clamp(1.9rem, 11vw, 3rem); }
  .vsl-poster__words { font-size: 0.66rem; letter-spacing: 0.12em; }
  .vsl-poster__play { width: 52px; height: 52px; }
  .vsl-poster__play svg { width: 17px; height: 20px; }
  .vsl-fallback { padding: var(--space-5); gap: var(--space-3); }
  .vsl-fallback p { font-size: 0.84rem; line-height: 1.45; }
  .vsl-fallback .btn { font-size: 0.8rem; padding: var(--space-2) var(--space-4); }
}

.vsl-fallback {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); text-align: center; padding: var(--space-8);
  background: rgba(10,9,8,0.96);
}
.vsl-fallback.is-open { display: flex; }
.vsl-fallback p { color: rgba(255,255,255,0.82); max-width: 42ch; line-height: 1.6; }

.vsl-veil {
  position: absolute; inset: 0; z-index: 2;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; appearance: none;
}
/* Both video controls stack in the top-right corner, Caption above the
   sound pill, well clear of the caption band the browser draws along the
   bottom of the frame. The container is click-through so the veil still
   catches taps in the gap between the two buttons. */
.vsl-controls {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.vsl-controls > * { pointer-events: auto; }

.vsl-sound {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.vsl-sound:hover { background: var(--color-primary-dark, var(--color-primary)); }

/* captions toggle. Top of the stack, so removing the sound pill beneath it
   on unmute does not move it. It survives the sound handoff. */
.vsl-cc {
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.34); border-radius: var(--radius-full);
  background: rgba(12,10,9,0.72); color: rgba(255,255,255,0.78);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.06em; cursor: pointer;
}
.vsl-cc.is-on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.vsl-frame video::cue {
  background: rgba(0,0,0,0.78); color: #fff; line-height: 1.4;
}
@media (max-width: 480px) {
  .vsl-controls { top: 10px; right: 10px; }
  .vsl-sound { font-size: 0.88rem; padding: 10px 14px; }
  .vsl-cc { padding: 8px 12px; font-size: 0.8rem; }
}

.vsl-caption {
  text-align: center; font-size: 0.84rem; color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-8);
}

/* ---------- proof row under the video ---------- */

.proofrow {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4); max-width: 900px; margin: 0 auto var(--space-8);
}
@media (min-width: 720px) { .proofrow { grid-template-columns: repeat(4, 1fr); } }
.proofrow__cell {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.proofrow__n {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1;
  color: var(--color-primary); margin-bottom: 6px;
}
.proofrow__t {
  font-size: 0.76rem; line-height: 1.4; color: rgba(255,255,255,0.68);
}

/* fine print for the 60-second claim. Floors at 12.16px so it stays legible. */
.proofrow__note {
  max-width: 760px; margin: calc(var(--space-8) * -1) auto var(--space-8);
  padding-top: var(--space-3);
  text-align: center; font-size: 0.76rem; line-height: 1.5;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 560px) { .proofrow__note { font-size: 0.82rem; } }

/* ---------- CTA cluster ---------- */

.cta-cluster { text-align: center; }
.cta-cluster .btn--lg { font-size: 1rem; padding: var(--space-4) var(--space-8); }
.cta-cluster__micro {
  margin-top: var(--space-3); font-size: 0.82rem; color: rgba(255,255,255,0.6);
  line-height: 1.55;
}
.cta-cluster--onlight .cta-cluster__micro { color: var(--color-text-secondary); }
.cta-cluster__alt {
  display: inline-block; margin-top: var(--space-4);
  font-size: 0.88rem; color: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.28); padding-bottom: 2px;
}
.cta-cluster--onlight .cta-cluster__alt {
  color: var(--color-text-secondary); border-color: rgba(29,41,57,0.24);
}

/* ---------- trust bar ---------- */

.trustbar { background: #0C0A09; padding: var(--space-6) 0; }
.trustbar__in {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--space-4) var(--space-8);
}
.trustbar__label {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); width: 100%; text-align: center;
}
.trustbar__item {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.84rem;
  letter-spacing: 0.03em; color: rgba(255,255,255,0.82);
}

/* ---------- fit filter ---------- */

.fitgrid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 820px) { .fitgrid { grid-template-columns: 1fr 1fr; } }
.fitcard {
  border-radius: var(--radius-lg); padding: var(--space-6);
  background: var(--color-white); border: 1px solid #E5E7EB;
  box-shadow: var(--shadow-card);
}
.fitcard--yes { border-top: 3px solid var(--color-success); }
.fitcard--no  { border-top: 3px solid #D1D5DB; }
.fitcard__h {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem;
  margin-bottom: var(--space-4);
}
.fitlist { display: grid; gap: var(--space-3); }
.fitlist li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3);
  font-size: 0.95rem; line-height: 1.55; color: var(--color-text-secondary);
}
.fitlist li::before {
  content: '✓'; font-weight: 700; color: var(--color-success);
  font-size: 0.95rem; line-height: 1.55;
}
.fitcard--no .fitlist li::before { content: '✕'; color: #9CA3AF; }

.admission {
  margin-top: var(--space-8); padding: var(--space-6);
  background: #1C1917; color: #fff; border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
}
.admission p { color: rgba(255,255,255,0.82); line-height: 1.66; max-width: 70ch; }
.admission p + p { margin-top: var(--space-3); }

.bluntbox {
  margin-top: var(--space-8); padding: var(--space-6);
  background: #FFF1E8; border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
}
.bluntbox__h {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.15rem; color: var(--color-text-dark);
  margin-bottom: var(--space-4);
}
/* Was max-width:70ch, which capped the paragraphs ~380px short of the box
   content width at 1440 and left a dead column on the right. 84ch keeps the
   line length readable (53rem = 848px = 84ch of this body text; a ch cap
   would resolve differently for the larger heading and knock it out of
   alignment), and auto margins centre the block inside the box
   instead of leaving it left-hugging. */
.bluntbox p { color: var(--color-text-secondary); line-height: 1.66; max-width: 53rem; margin-left: auto; margin-right: auto; }
.bluntbox p + p { margin-top: var(--space-4); }
.bluntbox b { color: var(--color-text-dark); font-weight: 700; }

/* ---------- big number callout ---------- */

.bignum {
  display: grid; gap: var(--space-6); align-items: center;
  margin: var(--space-8) 0;
}
@media (min-width: 820px) { .bignum { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); } }
.bignum__fig {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(3.2rem, 12vw, 6rem); line-height: 0.92;
  letter-spacing: -0.045em; color: var(--color-primary);
}
.bignum__figsub {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.86rem; line-height: 1.5; letter-spacing: 0;
  color: rgba(255,255,255,0.6); max-width: 34ch;
}
.ppl-sec--surface .bignum__figsub, .ppl-sec--warm .bignum__figsub { color: var(--color-text-secondary); }

.statpair { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 560px) { .statpair { grid-template-columns: 1fr 1fr; } }
.statpair__cell {
  padding: var(--space-5); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.statpair__n {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.9rem;
  line-height: 1; color: #fff; display: block; margin-bottom: 6px;
}
.statpair__n--dim { color: rgba(255,255,255,0.42); }
.statpair__t { font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.66); }

/* ---------- comparison table ---------- */

.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-8); }
.cmp {
  width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
  font-size: 0.9rem; background: var(--color-white);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cmp th, .cmp td {
  padding: var(--space-4); text-align: left; vertical-align: top;
  border-bottom: 1px solid #EEF0F3; line-height: 1.5;
}
.cmp thead th {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: #F3F4F6; color: var(--color-text-secondary);
}
.cmp thead th.is-ours {
  background: var(--color-dark-bg); color: #fff;
}
.cmp tbody th {
  font-weight: 600; color: var(--color-text-dark);
  width: 25%; background: #FAFBFC;
}
.cmp td.is-ours {
  background: rgba(255,98,16,0.055); font-weight: 600; color: var(--color-text-dark);
}
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp-hint {
  font-size: 0.76rem; color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.cmp sup {
  font-size: 0.62rem; font-weight: 700; color: var(--color-primary);
  margin-left: 2px; vertical-align: super;
}
.cmp-notes {
  counter-reset: fn; margin-top: var(--space-5);
  display: grid; gap: var(--space-3); max-width: 78ch;
}
.cmp-notes li {
  counter-increment: fn;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3);
  font-size: 0.84rem; line-height: 1.6; color: var(--color-text-secondary);
}
.cmp-notes li > span { min-width: 0; }
.cmp-notes li::before {
  content: counter(fn); font-family: var(--font-heading); font-weight: 700;
  font-size: 0.68rem; color: var(--color-primary); padding-top: 3px;
}
.cmp-notes b { color: var(--color-text-dark); }

/* ---------- the standard (lead file card) ---------- */

.stdgrid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .stdgrid { grid-template-columns: 1fr 1fr; } }

.stdlist { counter-reset: std; display: grid; gap: var(--space-4); }
.stdlist li {
  counter-increment: std;
  display: grid; grid-template-columns: 34px 1fr; gap: var(--space-4);
  align-items: start;
}
.stdlist li::before {
  content: counter(std);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
  background: var(--color-primary); color: #fff;
}
.stdlist__t {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.98rem; margin-bottom: 3px;
}
.stdlist__d { font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.68); }
.ppl-sec--surface .stdlist__d { color: var(--color-text-secondary); }

/* lead record mock */
.record {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid #E5E7EB; box-shadow: var(--shadow-lg);
  overflow: hidden; font-size: 0.86rem;
}
.record__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #141210; color: #fff;
}
.record__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.record__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.record__tag {
  margin-left: auto; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--color-primary); color: #fff;
  padding: 3px 8px; border-radius: var(--radius-full);
}
.record__body { padding: var(--space-4); }
.record__row {
  display: grid; grid-template-columns: 128px 1fr; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px dashed #EDEFF2;
}
.record__row:last-child { border-bottom: 0; }
.record__k {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
}
.record__v { color: var(--color-text-dark); font-weight: 500; line-height: 1.45; }
.record__v small { display: block; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }
.record__foot {
  padding: var(--space-3) var(--space-4);
  background: #FAFBFC; border-top: 1px solid #EEF0F3;
  font-size: 0.76rem; color: var(--color-text-secondary);
  display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
}
.record__price { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-dark); }

@media (max-width: 420px) {
  .record__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- flow steps ---------- */

.flow { display: grid; gap: var(--space-5); margin-top: var(--space-10); }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .flow { grid-template-columns: repeat(4, 1fr); } }
/* Step art sits BEHIND the copy: the illustration reads through the text
   rather than sitting above it. A scrim keeps the body legible over the
   busiest part of the artwork. */
.flowcard { position: relative; overflow: hidden; isolation: isolate; }
.flowcard__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: 58% 72%;
  opacity: 0.62; filter: brightness(1.12) saturate(1.05);
}
.flowcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(158deg, rgba(12,10,9,0.95) 0%, rgba(12,10,9,0.82) 46%, rgba(12,10,9,0.42) 100%);
}
.flowcard > *:not(.flowcard__bg) { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .flowcard__bg { transition: opacity var(--transition-slow), transform var(--transition-slow); }
  .flowcard:hover .flowcard__bg { opacity: 0.85; transform: scale(1.05); }
}

.flowcard {
  position: relative; padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.11);
}
.flowcard__n {
  font-family: var(--font-heading); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-3);
}
.flowcard__h {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  line-height: 1.25; margin-bottom: var(--space-3); color: #fff;
}
.flowcard__d { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.7); }
.flowcard__d strong { color: #fff; font-weight: 600; }

.youdo {
  margin-top: var(--space-8); padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255,98,16,0.09);
  border: 1px solid rgba(255,98,16,0.26);
}
.youdo h3 { color: #fff; }

/* ---------- "why pay per lead" (the problem, stated plainly) ---------- */

.why { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
@media (min-width: 820px) { .why { grid-template-columns: repeat(3, 1fr); } }

.flip {
  margin-top: var(--space-8); padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(255,98,16,0.1); border: 1px solid rgba(255,98,16,0.34);
}
@media (max-width: 560px) { .flip { padding: var(--space-6); } }

/* ---------- "everything included" cards ---------- */

.incl { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 640px) { .incl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .incl { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 420px) {
  
}
.flip__h {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem;
  line-height: 1.2; color: #fff; margin-bottom: var(--space-3);
}
.flip__d { font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,0.82); max-width: 70ch; }
.flip__d b { color: var(--color-primary-light); }

/* ---------- value stack: 3 columns, worth struck through, you pay $0 ---------- */

.stack__head {
  display: grid; grid-template-columns: 1fr 130px 150px;
  gap: var(--space-4); padding: var(--space-3) var(--space-5);
  background: #F3F4F6; border-bottom: 1px solid #E5E7EB;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary);
}
.stack__head span:nth-child(2), .stack__head span:nth-child(3) { text-align: right; }
.stack__row.stack__row--3 { grid-template-columns: 1fr 130px 150px; align-items: center; }
.stack__worth {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  color: #9CA3AF; text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: #D14343; text-align: right; white-space: nowrap;
}
.stack__pay {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem;
  color: var(--color-success); text-align: right; white-space: nowrap;
}
.stack__total.stack__total--3 {
  grid-template-columns: 1fr 130px 150px; align-items: center;
}
.stack__total-pay--unit { font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.1; }
.stack__total-pay--unit small { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 4px; }
.stack__total-worth {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem;
  color: rgba(255,255,255,0.45); text-decoration: line-through;
  text-decoration-thickness: 3px; text-decoration-color: #F87171; text-align: right; white-space: nowrap;
}
.stack__total-pay {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1; color: var(--color-success); text-align: right; white-space: nowrap;
}
.stack__only {
  padding: var(--space-6); text-align: center;
  background: #FFF7F2; border-top: 1px solid rgba(255,98,16,0.2);
}
.stack__only-k {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.stack__only-v {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  line-height: 1.15; color: var(--color-text-dark);
}
.stack__only-v b { color: var(--color-primary); }
.stack__only p { margin-top: var(--space-3); font-size: 0.92rem; color: var(--color-text-secondary); }
@media (max-width: 560px) {
  .stack__head { display: none; }
  .stack__row.stack__row--3, .stack__total.stack__total--3 { grid-template-columns: 1fr; gap: var(--space-1); }
  .stack__worth, .stack__pay, .stack__total-worth, .stack__total-pay { text-align: left; }
  .stack__worth::before { content: 'Worth '; text-decoration: none; color: #9CA3AF; font-weight: 500; }
  .stack__pay::before { content: 'You pay '; color: var(--color-text-secondary); font-weight: 500; font-size: 0.85rem; }
  .stack__total-worth::before { content: 'Total worth '; font-size: 0.8rem; }
  .stack__total-pay::before { content: 'You pay '; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
}

/* ---------- receipt-style price block ---------- */

.receipt {
  background: #fff; color: var(--color-text-dark);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.receipt__head {
  padding: var(--space-4) var(--space-5); background: var(--color-dark-bg); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: var(--space-3);
}
.receipt__head span:last-child { color: rgba(255,255,255,0.55); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.receipt__body { padding: var(--space-3) var(--space-5); }
.receipt__line {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px dashed #E5E7EB;
  font-size: 0.96rem;
}
.receipt__line:last-child { border-bottom: 0; }
.receipt__k { color: var(--color-text-secondary); }
.receipt__k small { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.receipt__v { font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
.receipt__v--zero { color: var(--color-success); }
.receipt__v--big { font-size: 1.35rem; color: var(--color-primary); }
.receipt__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5); background: #FFF7F2; border-top: 2px solid var(--color-dark-bg);
}
.receipt__total-k { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; }
.receipt__total-k small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 3px; max-width: 34ch; }
.receipt__total-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1; color: var(--color-text-dark); }
.receipt__foot { padding: var(--space-4) var(--space-5); font-size: 0.84rem; line-height: 1.55; color: var(--color-text-secondary); background: #FAFBFC; border-top: 1px solid #EEF0F3; }
.receipt__foot b { color: var(--color-text-dark); }

/* hero one-liner under the proof row */
.hero-included {
  max-width: 900px; margin: 0 auto var(--space-8);
  text-align: center; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.78);
}
.hero-included b { color: #fff; }

/* ============================================================
   ART CARDS
   One card system, three skins. Each card leads with a
   commissioned isometric illustration rather than an icon.
   Layered shadow (tight + wide) instead of one flat grey blur,
   and a hairline that fades rather than boxing the card in.
   ============================================================ */

.artcard {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(16,12,8,0.06), 0 12px 28px -12px rgba(16,12,8,0.22);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.artcard::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  border: 1px solid rgba(16,12,8,0.09);
}
.artcard__art {
  position: relative; aspect-ratio: 16 / 10; background: #141210; overflow: hidden;
}
.artcard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artcard__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,0) 62%, rgba(20,18,16,0.34) 100%);
}
.artcard__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.artcard__kicker {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.artcard__h {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.12rem; line-height: 1.24; letter-spacing: -0.012em;
  margin-bottom: var(--space-3);
}
.artcard__d { font-size: 0.93rem; line-height: 1.62; color: var(--color-text-secondary); flex: 1; }
.artcard__tag {
  align-self: flex-start; margin-top: var(--space-5);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-success); background: rgba(18,183,106,0.1);
  padding: 4px 9px; border-radius: var(--radius-sm);
}

/* dark skin, used on the dark "why" section */
.artcard--dark { background: #1A1613; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 18px 40px -18px rgba(0,0,0,0.7); }
.artcard--dark::after { border-color: rgba(255,255,255,0.09); }
.artcard--dark .artcard__h { color: #fff; }
.artcard--dark .artcard__d { color: rgba(255,255,255,0.68); }
.artcard--dark .artcard__kicker { color: rgba(255,255,255,0.4); }

/* the cost line that closes each "why" card */
.artcard__cost {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: #fff; line-height: 1.25;
}
.artcard__cost small {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem;
  color: rgba(255,255,255,0.55); margin-top: 3px;
}

.mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.mark svg { width: 16px; height: 16px; }
.mark--x { background: rgba(248,113,113,0.14); color: #F87171; border: 1.5px solid rgba(248,113,113,0.55); }
.mark--ok { background: rgba(18,183,106,0.16); color: var(--color-success); border: 1.5px solid rgba(18,183,106,0.65); }
.mark--big { width: 72px; height: 72px; border-width: 2.5px; }
.mark--big svg { width: 36px; height: 36px; }

/* the flip: the one loud moment on the page */
.flip--big {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-6); align-items: start;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(18,183,106,0.16) 0%, rgba(18,183,106,0) 58%),
    rgba(18,183,106,0.05);
  border: 1.5px solid rgba(18,183,106,0.42);
}
.flip--big .flip__h { font-size: clamp(1.55rem, 3.8vw, 2.15rem); letter-spacing: -0.02em; }
.flip--big .flip__h span { color: var(--color-success); }
.flip__cta { margin-top: var(--space-5); }
@media (max-width: 560px) { .flip--big { grid-template-columns: 1fr; } .flip--big .mark--big { width: 56px; height: 56px; } }

/* ---------- legacy why-card shell (kept for the grid) ---------- */

.mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.mark svg { width: 18px; height: 18px; }
.mark--x { background: rgba(248,113,113,0.16); color: #F87171; border: 2px solid rgba(248,113,113,0.6); }
.mark--ok { background: rgba(18,183,106,0.16); color: var(--color-success); border: 2px solid rgba(18,183,106,0.65); }
.mark--big { width: 72px; height: 72px; border-width: 3px; }
.mark--big svg { width: 38px; height: 38px; }

.flip--big {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-6); align-items: start;
  background: rgba(18,183,106,0.09); border: 2px solid rgba(18,183,106,0.5);
}
.flip--big .flip__h { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.flip--big .flip__h span { color: var(--color-success); }
.flip__cta { margin-top: var(--space-5); }
@media (max-width: 560px) { .flip--big { grid-template-columns: 1fr; } .flip--big .mark--big { width: 56px; height: 56px; } }

/* grids that hold art cards */
.incl { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
@media (min-width: 700px) { .incl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .incl { grid-template-columns: repeat(3, 1fr); } }

.nextgrid { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
@media (min-width: 700px) { .nextgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .nextgrid { grid-template-columns: repeat(4, 1fr); } }
.nextgrid .artcard__art { aspect-ratio: 4 / 3; }

/* footnotes for market-based pricing */
.receipt__ast {
  margin: 0 0 var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px dashed #E5E7EB;
  font-size: 0.78rem; line-height: 1.55; color: var(--color-text-muted);
}
.stack__ast {
  margin-top: var(--space-3); font-size: 0.78rem; line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------- checkout section ---------- */

.checkout { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 960px) { .checkout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.cofield { display: grid; gap: 6px; }
.cofield > label {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.cogrid { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .cogrid--2 { grid-template-columns: 1fr 1fr; } }
.paybox {
  background: #fff; color: var(--color-text-dark); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.paybox__head {
  padding: var(--space-4) var(--space-5); background: var(--color-dark-bg); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.paybox__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: none; color: rgba(255,255,255,0.6); font-weight: 500; }
.paybox__body { padding: var(--space-2) var(--space-5); }
.paybox__line { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed #E5E7EB; font-size: 0.95rem; color: var(--color-text-secondary); }
.paybox__line:last-child { border-bottom: 0; }
.paybox__line b { font-family: var(--font-heading); color: var(--color-text-dark); }
.paybox__line .ok { color: var(--color-success); font-family: var(--font-heading); font-weight: 700; }
.paybox__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-5); background: #F3F4F6; border-top: 2px solid var(--color-dark-bg); }
.paybox__total-k { font-family: var(--font-heading); font-weight: 700; }
.paybox__total-k small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 3px; }
.paybox__total-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1; }
.paybox__pay { padding: var(--space-5); }
/* Stripe buy button. Stripe renders it in a shadow root, so we can only
   size the wrapper, not restyle the button itself: match brand colour
   and radius in the Stripe Dashboard under the Payment Link's Buy button
   design settings. */
/* Stripe renders the buy button as a fixed-width iframe inside a shadow root. The host
   element was forced to width:100%, so that fixed-width iframe sat at the left edge of the
   host instead of the middle of the card. Let the host shrink to the iframe and centre it. */
.paybtn { display: flex; justify-content: center; }
.paybtn stripe-buy-button { display: block; width: auto; max-width: 100%; text-align: center; }
.paybtn__note {
  margin-top: var(--space-3); text-align: center;
  font-size: 0.78rem; line-height: 1.5; color: var(--color-text-muted);
}
.paybtn__note::before { content: '\1F512'; margin-right: 5px; }
.paybox__foot { padding: 0 var(--space-5) var(--space-5); font-size: 0.8rem; line-height: 1.55; color: var(--color-text-secondary); }
/* Fine print under the paybox guarantee text. Copied from .receipt__ast; the dashed
   rule sits on top here because these notes follow the text instead of leading it.
   Colour is #6B7280, not --color-text-muted: #9CA3AF measured 2.54:1 on the white
   paybox, too faint for a fee disclosure beside the buy button. #6B7280 is 4.83:1
   and still lighter than the #475467 guarantee text above it. */
.paybox__ast {
  margin: var(--space-3) 0 0; padding-top: var(--space-3);
  border-top: 1px dashed #E5E7EB;
  font-size: 0.78rem; line-height: 1.55; color: #6B7280;
}
.cochecks { display: grid; gap: var(--space-3); margin-top: var(--space-5); }

/* ---------- calculator extras ---------- */

.calc__ast { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.74rem; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.5); margin-top: 4px; }
.calc__weekline {
  margin: var(--space-2) 0 var(--space-5); font-family: var(--font-heading); font-weight: 600;
  font-size: 0.98rem; color: #fff;
}
.calc__weekline b { color: var(--color-primary-light); font-weight: 800; }

/* neutralise the two remaining warm tints */
.stack__only { background: #F3F4F6; border-top-color: #E5E7EB; }
.receipt__total { background: #F3F4F6; }

/* ---------- ROI calculator ---------- */

.roi-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.roi-preset {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
}
.roi-preset[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.roi-preset small { display: block; font-weight: 500; font-size: 0.7rem; opacity: 0.85; margin-top: 2px; }

.roi { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 560px) { .roi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .roi { grid-template-columns: 1fr 1fr 1fr; } }
.roi__cell {
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.roi__cell--hero {
  grid-column: 1 / -1;
  background: rgba(18,183,106,0.1); border-color: rgba(18,183,106,0.36);
}
.roi__n {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.25rem, 4vw, 1.7rem); line-height: 1; color: #fff; margin-bottom: 5px;
}
.roi__cell--hero .roi__n { font-size: clamp(1.7rem, 5.5vw, 2.4rem); color: var(--color-success); }
.roi__t { font-size: 0.76rem; line-height: 1.45; color: rgba(255,255,255,0.6); }
.roi__t b { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ---------- onboarding step cards with art ---------- */

              /* drop the faint counter number */

/* ---------- testimonials ---------- */

.tvideo { max-width: 760px; margin: var(--space-8) auto 0; }
.tvideo video {
  width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius-lg); border: 1px solid #E5E7EB; box-shadow: var(--shadow-lg);
}
.tvideo__cap { text-align: center; margin-top: var(--space-3); font-size: 0.88rem; color: var(--color-text-secondary); }
.tvideo__cap b { color: var(--color-text-dark); }
.tgrid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 720px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tgrid { grid-template-columns: repeat(3, 1fr); } }
.tcard {
  background: var(--color-white); border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.tcard__q {
  font-size: 0.98rem; line-height: 1.62; color: var(--color-text-dark);
  flex: 1; margin-bottom: var(--space-4);
}
.tcard__q::before { content: '\201C'; color: var(--color-primary); font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; line-height: 0; margin-right: 4px; vertical-align: -0.35em; }
.tcard__who { font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; }
.tcard__who small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 2px; }

/* two compact lead records side by side */
.recpair { display: grid; gap: var(--space-5); }
@media (min-width: 1100px) { .recpair { grid-template-columns: 1fr 1fr; } }
.record__sub {
  padding: var(--space-2) var(--space-4); background: #F3F4F6;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary);
}
.record__sub--inc { background: rgba(18,183,106,0.1); color: var(--color-success); }

/* ---------- value stack ---------- */

.stack {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid #E5E7EB; box-shadow: var(--shadow-lg);
  overflow: hidden; margin-top: var(--space-8);
}
.stack__row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-4); align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid #EEF0F3;
}
.stack__row:nth-child(even) { background: #FCFCFD; }
.stack__name {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem;
  line-height: 1.3;
}
.stack__name small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 0.85rem; line-height: 1.5; color: var(--color-text-secondary);
  margin-top: 4px; max-width: 62ch;
}
.stack__val {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;
  color: var(--color-text-secondary); white-space: nowrap;
}
.stack__val--free { color: var(--color-success); }
.stack__total {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-4);
  align-items: center; padding: var(--space-5);
  background: var(--color-dark-bg); color: #fff;
}
.stack__total-l {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.68);
}
.stack__total-v {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1; color: var(--color-primary);
}
.stack__strike {
  padding: var(--space-5); background: #FFF7F2; text-align: center;
  border-top: 1px solid rgba(255,98,16,0.2);
}
.stack__strike p { font-size: 0.98rem; line-height: 1.6; color: var(--color-text-secondary); }
.stack__strike b { color: var(--color-text-dark); }
@media (max-width: 520px) {
  .stack__row, .stack__total { grid-template-columns: 1fr; gap: var(--space-2); }
  .stack__val { text-align: left; }
}

/* ---------- price block + calculator ---------- */

.pricegrid { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 900px) { .pricegrid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.pricecard {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.pricecard--hero { border-color: rgba(255,98,16,0.4); background: rgba(255,98,16,0.07); }
.priceline {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); padding: var(--space-3) 0;
  border-bottom: 1px dashed rgba(255,255,255,0.14);
}
.priceline:last-of-type { border-bottom: 0; }
.priceline__k { font-size: 0.92rem; color: rgba(255,255,255,0.74); }
.priceline__v {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; color: #fff;
  white-space: nowrap;
}
.priceline__v--zero { color: var(--color-success); }
.priceline__v--big {
  font-size: clamp(1.5rem, 5vw, 2rem); color: var(--color-primary);
}
.pricecard__tag {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--color-primary); color: #fff;
  padding: 4px 10px; border-radius: var(--radius-full); margin-bottom: var(--space-4);
}

.calc__label {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin-bottom: var(--space-3);
}
.calc__range { width: 100%; accent-color: var(--color-primary); height: 30px; }
.calc__ticks {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-bottom: var(--space-5);
}
.calc__out { display: grid; gap: var(--space-4); }
@media (min-width: 520px) { .calc__out { grid-template-columns: 1fr 1fr; } }
.calc__cell {
  background: rgba(0,0,0,0.28); border-radius: var(--radius-md);
  padding: var(--space-4); border: 1px solid rgba(255,255,255,0.08);
}
.calc__n {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1; color: #fff; margin-bottom: 5px;
}
.calc__t { font-size: 0.76rem; line-height: 1.45; color: rgba(255,255,255,0.6); }
.calc__vs {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.9rem; line-height: 1.62; color: rgba(255,255,255,0.74);
}
.calc__vs b { color: var(--color-primary); }

/* ---------- guarantees ---------- */

.ggrid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 760px) { .ggrid { grid-template-columns: 1fr 1fr; } }
.gcard {
  background: var(--color-white); border: 1px solid #E5E7EB;
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md); padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.gcard__n {
  font-family: var(--font-heading); font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-success); margin-bottom: var(--space-2);
}
.gcard__h {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.06rem;
  line-height: 1.25; margin-bottom: var(--space-3);
}
.gcard__d { font-size: 0.92rem; line-height: 1.62; color: var(--color-text-secondary); }
.gcard__d strong { color: var(--color-text-dark); }

.anti {
  text-align: center; max-width: 720px; margin: 0 auto;
}
.anti p { color: rgba(255,255,255,0.72); line-height: 1.72; font-size: 1.02rem; }
.anti p + p { margin-top: var(--space-4); }
/* must outrank ".anti p" above, hence the doubled selector */
.anti p.anti__mark {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.7rem, 5.6vw, 2.8rem); line-height: 1.12;
  letter-spacing: -0.025em; color: #fff;
  margin-bottom: var(--space-8); margin-top: 0;
}
.anti p.anti__mark span { color: var(--color-primary); }
.anti__rule {
  width: 60px; height: 3px; background: var(--color-primary);
  margin: 0 auto var(--space-6); border-radius: 2px;
}

/* ---------- proof ---------- */

.proofgrid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 820px) { .proofgrid { grid-template-columns: repeat(3, 1fr); } }
.proofcard {
  background: var(--color-white); border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.proofcard__step {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-3);
}
.proofcard__n {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: 1;
  margin-bottom: var(--space-3);
}
.proofcard__d { font-size: 0.92rem; line-height: 1.6; color: var(--color-text-secondary); }
.proofcard--todo {
  border-style: dashed; background: #FAFBFC; box-shadow: none;
}
.proofcard--todo .proofcard__n { color: #C3C8D0; }

/* ---------- territory ---------- */

.terrgrid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .terrgrid { grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); } }
.terrbox {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.terrform { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.ppl-field { display: grid; gap: 6px; }
.ppl-field > label {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.ppl-input, .ppl-select {
  width: 100%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-family: var(--font-body); font-size: 1rem;
  background: rgba(0,0,0,0.34); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.ppl-input::placeholder { color: rgba(255,255,255,0.38); }
.ppl-input:focus, .ppl-select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,98,16,0.2);
}
.ppl-input--light, .ppl-select--light {
  background: #fff; color: var(--color-text-dark); border-color: #D6DAE0;
}
.ppl-input--light::placeholder { color: #9CA3AF; }
.terrresult {
  margin-top: var(--space-5); padding: var(--space-4);
  border-radius: var(--radius-md); font-size: 0.92rem; line-height: 1.6;
  display: none;
}
.terrresult.is-open { display: block; }
.terrresult--open {
  background: rgba(18,183,106,0.13); border: 1px solid rgba(18,183,106,0.4); color: #fff;
}
.terrresult--wait {
  background: rgba(255,98,16,0.11); border: 1px solid rgba(255,98,16,0.36); color: #fff;
}

/* ---------- next steps ---------- */

.nextgrid { display: grid; gap: var(--space-5); margin-top: var(--space-8); counter-reset: nx; }
@media (min-width: 760px) { .nextgrid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1060px) { .nextgrid { grid-template-columns: repeat(4,1fr); } }

/* ---------- FAQ tweaks (inherits .faq from styles.css) ---------- */

.ppl-faq { max-width: 860px; margin: var(--space-8) auto 0; }

/* ---------- written recap ---------- */

.recap {
  background: var(--color-white); border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-card); margin-top: var(--space-8);
}
.recap h3 { margin-top: var(--space-6); }
.recap h3:first-child { margin-top: 0; }
.recap p { font-size: 0.98rem; line-height: 1.72; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.recap ul { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.recap li {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--space-3);
  font-size: 0.96rem; line-height: 1.6; color: var(--color-text-secondary);
}
.recap li::before { content: '›'; color: var(--color-primary); font-weight: 700; }

/* ---------- closing CTA ---------- */

.closer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,98,16,0.22) 0%, rgba(255,98,16,0) 62%),
    var(--color-dark-bg);
  color: #fff; text-align: center; padding: var(--space-20) 0;
}
.closer__h {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.8rem, 5.6vw, 3rem); line-height: 1.06;
  letter-spacing: -0.025em; text-transform: uppercase;
  max-width: 22ch; margin: 0 auto var(--space-5);
}
.closer__p {
  color: rgba(255,255,255,0.76); font-size: 1.05rem; line-height: 1.65;
  max-width: 56ch; margin: 0 auto var(--space-8);
}
.closer__phone { margin-top: var(--space-5); font-size: 0.92rem; color: rgba(255,255,255,0.6); }
.closer__phone a { color: var(--color-primary-light); font-weight: 600; }

/* ---------- booking embed ---------- */

.bookembed { max-width: 900px; margin: var(--space-8) auto 0; }
.bookembed iframe {
  display: block; width: 100%; max-width: 100%;
  min-height: 900px; border: 0;
}
@media (max-width: 560px) { .bookembed { margin-top: var(--space-6); } }

/* ---------- sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: rgba(20,18,16,0.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-dark-border);
  padding: var(--space-3) var(--space-4);
  display: none; align-items: center; gap: var(--space-3);
  transform: translateY(110%); transition: transform var(--transition-base);
}
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta__txt {
  flex: 1; min-width: 0; font-size: 0.76rem; line-height: 1.35;
  color: rgba(255,255,255,0.72);
}
.sticky-cta__txt b { display: block; color: #fff; font-family: var(--font-heading); font-size: 0.86rem; }
.sticky-cta .btn { flex-shrink: 0; font-size: 0.82rem; padding: var(--space-3) var(--space-5); }
@media (max-width: 900px) { .sticky-cta { display: flex; } body.has-sticky-cta { padding-bottom: 76px; } }

/* ---------- start / checkout flow ---------- */

.wiz { max-width: 720px; margin: 0 auto; }
.wizbar {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-8);
  counter-reset: wz;
}
.wizbar__step {
  counter-increment: wz; flex: 1; text-align: center;
  padding-top: var(--space-3); border-top: 3px solid rgba(255,255,255,0.14);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.wizbar__step.is-on { border-top-color: var(--color-primary); color: #fff; }
.wizbar__step.is-done { border-top-color: rgba(255,98,16,0.5); color: rgba(255,255,255,0.7); }

.wizpane { display: none; }
.wizpane.is-on { display: block; }

.wizcard {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.wizgrid { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .wizgrid--2 { grid-template-columns: 1fr 1fr; } }
.wizactions {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-6); align-items: center;
}
.wizback {
  font-size: 0.88rem; color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.24); padding-bottom: 2px;
}

.paystub {
  border: 1px dashed rgba(255,98,16,0.5); background: rgba(255,98,16,0.07);
  border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-5);
}
.paystub__tag {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-light);
  margin-bottom: var(--space-3);
}
.paystub p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.76); }

.sumline {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px dashed rgba(255,255,255,0.14);
  font-size: 0.94rem; color: rgba(255,255,255,0.76);
}
.sumline:last-of-type { border-bottom: 0; }
.sumline b { color: #fff; font-family: var(--font-heading); }
.sumtotal {
  display: flex; justify-content: space-between; gap: var(--space-4);
  align-items: baseline; margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 2px solid rgba(255,255,255,0.2);
}
.sumtotal__l { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: #fff; }
.sumtotal__v {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.9rem;
  line-height: 1; color: var(--color-primary);
}

.ppl-check {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3);
  align-items: start; font-size: 0.88rem; line-height: 1.55;
  color: rgba(255,255,255,0.72);
}
.ppl-check input { margin-top: 3px; accent-color: var(--color-primary); width: 18px; height: 18px; }

/* ---------- welcome page ---------- */

.wel-hero { text-align: center; padding: var(--space-16) 0 var(--space-12); }
.wel-tick {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(18,183,106,0.16); border: 2px solid var(--color-success);
  display: grid; place-items: center; margin: 0 auto var(--space-6);
  font-size: 1.9rem; color: var(--color-success);
}
.timeline { display: grid; gap: 0; margin-top: var(--space-8); }
.timeline__row {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--space-5);
  padding: var(--space-5) 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.timeline__row:last-child { border-bottom: 0; }
.timeline__when {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary);
  padding-top: 3px;
}
.timeline__h {
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  margin-bottom: 5px; color: #fff;
}
.timeline__d { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.68); }
@media (max-width: 520px) {
  .timeline__row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- misc ---------- */

.ppl-center { text-align: center; }
.ppl-mt-6 { margin-top: var(--space-6); }
.ppl-mt-8 { margin-top: var(--space-8); }
.ppl-mb-0 { margin-bottom: 0; }
.ppl-maxc { margin-left: auto; margin-right: auto; }

.ppl-disclaimer {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid #E5E7EB;
  font-size: 0.76rem; line-height: 1.6; color: var(--color-text-muted);
  max-width: 78ch;
}

/* internal build markers — delete the class to hide all of them at once */
.build-note {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-heading); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #B45309; background: #FEF3C7;
  border: 1px dashed #F59E0B; border-radius: var(--radius-sm);
  padding: 5px 9px;
}

@media (prefers-reduced-motion: reduce) {
  .vsl-poster:hover .vsl-poster__play { transform: none; }
  .sticky-cta { transition: none; }
}


/* ============================================================
   INTERACTION
   Comparison rows respond to the pointer and latch on click, so a
   reader can pin the row they are arguing with. Pointer-only:
   touch devices get the static table.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  /* Roll over a row and the whole row turns orange, so it can be read
     straight across without losing your place. Nothing latches. */
  .cmp tbody tr { transition: background-color 120ms ease; }
  .cmp tbody tr:hover th[scope="row"],
  .cmp tbody tr:hover td { background: #FFF1E8; color: var(--color-primary-dark); }
  .cmp tbody tr:hover th[scope="row"] { box-shadow: inset 3px 0 0 var(--color-primary); color: var(--color-primary-dark); }
  .cmp tbody tr:hover td.is-ours { background: rgba(255,98,16,0.18); color: #7A2E06; }
  .cmp tbody tr:hover td b, .cmp tbody tr:hover td strong { color: inherit; }
  .cmp tbody tr:hover sup { color: var(--color-primary-dark); }
}
.cmp-howto {
  margin-top: var(--space-3); font-size: 0.76rem; color: var(--color-text-muted);
}
@media (hover: none) { .cmp-howto { display: none; } }

/* ---------- staggered entrances ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1); }
  .why > .reveal:nth-child(2), .incl > .reveal:nth-child(2), .nextgrid > .reveal:nth-child(2),
  .flow > .reveal:nth-child(2), .ggrid > .reveal:nth-child(2), .tgrid > .reveal:nth-child(2) { transition-delay: 90ms; }
  .why > .reveal:nth-child(3), .incl > .reveal:nth-child(3), .nextgrid > .reveal:nth-child(3),
  .flow > .reveal:nth-child(3), .ggrid > .reveal:nth-child(3), .tgrid > .reveal:nth-child(3) { transition-delay: 180ms; }
  .incl > .reveal:nth-child(4), .nextgrid > .reveal:nth-child(4), .flow > .reveal:nth-child(4),
  .ggrid > .reveal:nth-child(4), .tgrid > .reveal:nth-child(4) { transition-delay: 270ms; }
  .incl > .reveal:nth-child(5), .ggrid > .reveal:nth-child(5), .tgrid > .reveal:nth-child(5) { transition-delay: 330ms; }
  .incl > .reveal:nth-child(6), .ggrid > .reveal:nth-child(6), .tgrid > .reveal:nth-child(6) { transition-delay: 380ms; }
  .incl > .reveal:nth-child(n+7) { transition-delay: 420ms; }

  /* cards lift toward the pointer */
  .artcard, .flowcard, .gcard, .tcard, .whycard { will-change: transform; }
  .artcard:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16,12,8,0.08), 0 22px 44px -16px rgba(16,12,8,0.3); }
  .artcard--dark:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 26px 52px -18px rgba(0,0,0,0.8); }
  .gcard, .tcard { transition: transform var(--transition-slow), box-shadow var(--transition-slow); }
  .gcard:hover, .tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
  .flowcard { transition: border-color var(--transition-slow), transform var(--transition-slow); }
  .flowcard:hover { transform: translateY(-3px); border-color: rgba(255,98,16,0.36); }
  .roi__cell { transition: background-color var(--transition-base), border-color var(--transition-base); }
  .roi__cell:hover { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.18); }
}


/* ---------- checkout: single column when there is no form beside it ---------- */
.checkout--solo { display: block; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- what a lead is: three points across, records full width ---------- */

.leadpoints {
  display: grid; gap: var(--space-6); margin: var(--space-10) 0 var(--space-10);
  counter-reset: lp;
}
@media (min-width: 820px) { .leadpoints { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.leadpoints li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: var(--space-4); row-gap: 6px; align-items: start;
}
.leadpoints__n {
  grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem;
  color: var(--color-primary); background: rgba(255,98,16,0.12);
  border: 1.5px solid rgba(255,98,16,0.38);
}
.leadpoints__t {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.06rem;
  line-height: 1.25; color: #fff; padding-top: 9px;
}
.leadpoints__d { font-size: 0.93rem; line-height: 1.6; color: rgba(255,255,255,0.68); }

.leadcaption {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-5);
}
#lead .recpair { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { #lead .recpair { grid-template-columns: 1fr 1fr; } }

.spamband {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-4);
  align-items: center; margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
  background: rgba(18,183,106,0.08); border: 1px solid rgba(18,183,106,0.34);
}
.spamband p { font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.78); }
.spamband b { color: #fff; }

/* ---------- testimonial: real frame from the video as the poster ---------- */

.tvideo { max-width: 900px; margin: var(--space-10) auto 0; }
.tvideo__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); background: #000;
  box-shadow: 0 2px 6px rgba(16,12,8,0.12), 0 30px 60px -24px rgba(16,12,8,0.5);
}
.tvideo__poster, .tvideo__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.tvideo__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,7,0.10) 0%, rgba(10,8,7,0.30) 46%, rgba(10,8,7,0.86) 100%);
}
.tvideo__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); text-align: center; cursor: pointer; padding: var(--space-6);
}
.tvideo__playicon {
  width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary); box-shadow: 0 12px 40px rgba(255,98,16,0.5);
  transition: transform var(--transition-base);
}
.tvideo__playicon svg { margin-left: 5px; }
.tvideo__play:hover .tvideo__playicon { transform: scale(1.07); }
.tvideo__label {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.4rem, 4.2vw, 2.3rem); line-height: 1.1; letter-spacing: -0.02em;
  color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.tvideo__who {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
@media (max-width: 560px) {
  .tvideo__playicon { width: 62px; height: 62px; }
  .tvideo__who { font-size: 0.68rem; }
}

/* ==========================================================================
   PHONE PASS (measured, not guessed)
   Every rule below is inside a phone-width media query, so desktop is
   untouched. Rules that reach shared header/footer components are scoped to
   .ppl-body so they only apply on this page.
   ========================================================================== */

/* 1 - HORIZONTAL OVERFLOW.
   Root cause at 360px: .btn carries white-space:nowrap globally, so the
   "GET 5 LEADS FOR THE PRICE OF 1" button had a min-content width of 336px.
   The single-column .flip--big track resolves to minmax(auto, 1fr), so that
   336px minimum forced the track wider than the 272px content box and pushed
   the card 22px past the viewport. Let the button wrap and floor the track. */
@media (max-width: 560px) {
  .flip--big { grid-template-columns: minmax(0, 1fr); }
  .flip--big > div { min-width: 0; }
  .flip__cta .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* 2 - TAP TARGETS. Anything a thumb has to hit gets at least 44px of height. */
@media (max-width: 900px) {
  .ppl-head .btn { min-height: 44px; }
  .ppl-strip__cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  }
  .ppl-head__logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* ROI calculator slider: 30px tall was too short to grab reliably. */
  .calc__range { height: 44px; }

  /* Footer, scoped to this page only. */
  .ppl-body .footer__links a,
  .ppl-body .footer__contact-item a,
  .ppl-body .footer__bottom a,
  .ppl-body .footer__youtube,
  .ppl-body .footer__logo-text {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .ppl-body .footer__links a { width: 100%; }

  /* Inline phone link inside a sentence: vertical padding grows the hit area
     to 44px without changing the line box, so nothing reflows. */
  .closer__phone a { padding-block: 13px; }
}

/* 3 - TEXT LEGIBILITY. Only running prose and functional instructions that
   measured under 14px on a phone are lifted, each to 0.88rem (14.08px). The
   wide-tracked uppercase eyebrows, kickers and tags are the same size on
   desktop, so they are design, not a mobile defect, and are left alone. */
@media (max-width: 560px) {
  .ppl-disclaimer,
  .ppl-note,
  .receipt__ast,
  .paybox__ast,
  .paybtn__note,
  .paybox__foot,
  .vsl-caption,
  .vsl-fallback p,
  .cmp-hint,
  .roi__t { font-size: 0.88rem; }
  .record__v { font-size: 0.9rem; }
}

/* 3b - Stripe's buy button iframe has a hard 288px width. On a 360px screen the
   card's 20px inner padding left only 280px, so the iframe could not sit centred
   inside it. Trim that padding on the narrowest phones so 288px fits. */
@media (max-width: 380px) {
  .paybox__pay { padding-left: 12px; padding-right: 12px; }
}

/* 4 - THE VIDEO. .vsl-frame is aspect-ratio 16/9 and the source is 1280x720,
   so the file fills the frame exactly. Guard against a future source with a
   different aspect, and stop the poster copy from clipping in a short frame. */
@media (max-width: 560px) {
  .vsl-frame video { object-fit: contain; background: #000; }
  .vsl-poster { padding: var(--space-4); gap: var(--space-2); }
}

/* ==========================================================================
   5 - THE MAIN CTA, BIGGER
   "GET 5 LEADS FOR THE PRICE OF 1" is the one control on this page that has
   to be unmissable. Every rule is scoped under .ppl-body so styles.css
   behaviour on every other page is untouched. .btn carries white-space:nowrap
   globally, so these are switched to normal and floored to the container
   width: at 390px and 360px the label wraps to two lines instead of forcing
   a horizontal scroll.
   ========================================================================== */
.ppl-body .btn--lg,
.ppl-body .cta-cluster .btn--lg,
.ppl-body .flip__cta .btn--lg {
  font-size: 1.4rem;
  padding: var(--space-5) var(--space-10);
  min-height: 76px;
  border-radius: var(--radius-lg);
  letter-spacing: 0.005em;
  white-space: normal;
  max-width: 100%;
  text-align: center;
  line-height: 1.15;
}

@media (max-width: 900px) {
  .ppl-body .btn--lg,
  .ppl-body .cta-cluster .btn--lg,
  .ppl-body .flip__cta .btn--lg {
    font-size: 1.18rem;
    padding: var(--space-4) var(--space-5);
    min-height: 68px;
  }
}

/* The video fallback overlay is a short 16:9 box, so its button keeps the
   smaller phone treatment already tuned for that frame. */
@media (max-width: 700px) {
  .ppl-body .vsl-fallback .btn--lg {
    font-size: 0.95rem; padding: var(--space-3) var(--space-4); min-height: 48px;
  }
}

/* ==========================================================================
   6 - CONTRAST AND SPACING PASS (2026-09-11)
   Four targeted jobs, every rule scoped to this page (#lead, #how, #price)
   so nothing leaks to any other page that loads ppl.css.
     6a  #lead is now a LIGHT section, so every white-on-dark descendant
         inside it is re-coloured for a white ground.
     6b  A static photographic texture behind #how, with a scrim over it.
     6c  The four step-card background images lifted out of the mud.
     6d  Breathing room above the CTA at the end of #price.
   Every colour below was chosen against a measured WCAG ratio: body copy
   at 4.5:1 or better, large text at 3:1 or better, icons at 3:1 or better.
   ========================================================================== */

/* ---------- 6a - #lead on a light ground ---------------------------------
   Ratios measured against the composited background, not eyeballed:
     .ppl-eyebrow    #A33C09 on #FFFFFF ................. 6.55:1
     .ppl-h2         #1D2939 on #FFFFFF ................. 14.7:1  (large)
     .ppl-lede       #475467 on #FFFFFF ................. 7.69:1
     .leadpoints__n  #A33C09 on peach #FFECE2 ........... 5.73:1
     .leadpoints__t  #1D2939 on #FFFFFF ................. 14.7:1
     .leadpoints__d  #475467 on #FFFFFF ................. 7.69:1
     .leadcaption    #475467 on #FFFFFF ................. 7.69:1
     .record__tag    #FFFFFF on #B8450B ................. 5.39:1
     .record__sub--inc #067741 on #E7F8F0 ............... 5.12:1
     .record__k      #475467 on #FFFFFF ................. 7.69:1
     .record__v small #5B6577 on #FFFFFF ................ 5.88:1
     .spamband p     #475467 on #ECF9F3 ................. 7.0:1
     .spamband b     #1D2939 on #ECF9F3 ................. 13.4:1
     .mark--ok       #067741 on #E2F6EC ................. 4.9:1  (icon, needs 3)
   ------------------------------------------------------------------------ */

#lead .ppl-eyebrow { color: #A33C09; }
#lead .ppl-h2 { color: var(--color-text-dark); }
#lead .ppl-lede { color: var(--color-text-secondary); }

#lead .leadpoints__n {
  color: #A33C09;
  background: rgba(255, 98, 16, 0.12);
  border-color: rgba(255, 98, 16, 0.48);
}
#lead .leadpoints__t { color: var(--color-text-dark); }
#lead .leadpoints__d { color: var(--color-text-secondary); }
#lead .leadcaption { color: var(--color-text-secondary); }

/* The two sample records are the centrepiece of this section. On a white
   ground a hairline is not enough, so they get a real edge plus a layered
   shadow and keep their near-black title bar. */
#lead .record {
  border: 1px solid #D5DAE2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
              0 4px 10px rgba(16, 24, 40, 0.06),
              0 24px 48px -20px rgba(16, 24, 40, 0.30);
}
#lead .record__tag { background: #B8450B; }
#lead .record__sub--inc { color: #067741; background: rgba(18, 183, 106, 0.12); }
#lead .record__k { color: var(--color-text-secondary); }
#lead .record__v small { color: #5B6577; }
#lead .record__foot { border-top-color: #E4E7EC; }
#lead .record__row { border-bottom-color: #E4E7EC; }

#lead .spamband {
  background: rgba(18, 183, 106, 0.08);
  border-color: rgba(18, 183, 106, 0.45);
}
#lead .spamband p { color: var(--color-text-secondary); }
#lead .spamband b { color: var(--color-text-dark); }
#lead .mark--ok {
  color: #067741;
  background: rgba(18, 183, 106, 0.14);
  border-color: rgba(6, 119, 65, 0.55);
}

/* ---------- 6b - texture behind #how ------------------------------------
   The same aerial the hero and .ppl-sec--fly already use, held right down
   so it reads as texture rather than as a photograph competing with the
   type. A scrim sits over the image and under the content so the lightest
   region of the aerial cannot lift the composited ground.
   Static on purpose: no flyover animation here.
   ------------------------------------------------------------------------ */

#how { position: relative; overflow: hidden; isolation: isolate; }
#how::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/images/bg-manufactured-homes.webp') center / cover no-repeat;
  opacity: 0.14;
}
#how::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(12, 10, 9, 0.62) 0%,
    rgba(12, 10, 9, 0.40) 42%,
    rgba(12, 10, 9, 0.52) 100%);
}
#how > * { position: relative; z-index: 1; }

/* ---------- 6c - lift the four step-card background graphics -------------
   Two layers were crushing the artwork: a 0.62 image opacity and a scrim
   whose first stop sat at 0.95. The image is lifted and warmed, the scrim
   is softened where the artwork lives and kept strong where the type lives.
   ------------------------------------------------------------------------ */

#how .flowcard__bg {
  opacity: 0.90;
  filter: brightness(1.34) saturate(1.05);
}
#how .flowcard::before {
  background: linear-gradient(158deg,
    rgba(12, 10, 9, 0.84) 0%,
    rgba(12, 10, 9, 0.64) 46%,
    rgba(12, 10, 9, 0.24) 100%);
}
/* A second, text-only scrim: a soft vertical wash anchored to the top of the
   card, where the step label, the heading and the body copy all sit. It
   guarantees the type its ratio without dimming the artwork lower down. */
#how .flowcard::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(12, 10, 9, 0.48) 0%,
    rgba(12, 10, 9, 0.43) 58%,
    rgba(12, 10, 9, 0.34) 86%,
    rgba(12, 10, 9, 0.14) 100%);
}
/* The body copy carries a little more weight now that the artwork behind it
   is brighter: 0.70 white could not hold 4.5:1 over the lifted images. */
#how .flowcard__d { color: rgba(255, 255, 255, 0.82); }
@media (prefers-reduced-motion: no-preference) {
  #how .flowcard:hover .flowcard__bg { opacity: 0.96; }
}

/* ---------- 6d - room above the CTA at the end of #price -----------------
   The markup carries a .ppl-mt-10 utility that is not defined anywhere in
   this stylesheet or in styles.css, so the computed margin-top was 0px and
   the button sat hard against the receipt and ROI panels. Scoped to #price
   so no shared utility is introduced.
   ------------------------------------------------------------------------ */

#price .cta-cluster { margin-top: var(--space-12); }
@media (min-width: 768px) { #price .cta-cluster { margin-top: var(--space-20); } }
@media (min-width: 1100px) { #price .cta-cluster { margin-top: var(--space-24); } }