/* ============================================================
   Pricing — Animated Ladder CTA
   Page-specific mechanic. Every other animated CTA on the site
   resolves "upward" — Full Score's ring fills, Case Studies'
   bars climb to their highest verified score. This page argues
   the opposite: "the safest first step is still free." So the
   animation climbs the whole real ladder (Free → $299+ →
   $2,500+ → $25,000+, using this page's own real tier names and
   prices) to show the range exists — then deliberately settles
   back down on tier 1, pinned, because that's the page's actual
   argument. Resolution here means "start here," not "here's the
   top."

   The rotating status line uses this page's own real "decision
   guide" phrases (Curious / Unsure what's wrong / Need it fixed /
   Entering high-stakes rooms), not invented copy.

   Same loop discipline as the other three builds:
   - Loops while in view, pauses off-screen / tab-hidden.
   - prefers-reduced-motion: static, resolved, no animation.
   - CTA button and copy are real DOM throughout.
   ============================================================ */

.pr-ladder-cta{
  padding:54px 0;
  border-top:1px solid rgba(122,164,255,.14);
  background:
    radial-gradient(circle at 78% 48%,rgba(18,104,255,.13),transparent 24rem),
    linear-gradient(180deg,#040914 0%,#02050b 100%);
  isolation:isolate;
}
.pr-ladder-cta::before,.pr-ladder-cta::after{ display:none; }
.pr-cta-grid{ position:absolute; inset:0; z-index:-1; opacity:.2; pointer-events:none;
  background-image:linear-gradient(rgba(122,164,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(122,164,255,.03) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(90deg,transparent,#000 45%,#000 100%); }

.pr-cta-shell{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr); gap:clamp(38px,5vw,72px); align-items:center; }
.pr-cta-copy{ text-align:left; max-width:650px; }
.pr-cta-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:13px; font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:#6f8daf; }
.pr-live-dot{ width:7px; height:7px; border-radius:50%; background:#45d7ff; box-shadow:0 0 13px rgba(69,215,255,.72); }
.pr-ladder-cta h2{ margin:0 0 14px; font-size:clamp(2.2rem,3.9vw,3.85rem); line-height:.98; letter-spacing:-.06em; text-wrap:balance; }
.pr-ladder-cta .pr-cta-copy>p{ max-width:54ch; margin:0; color:#aebbd1; font-size:clamp(.94rem,1.1vw,1.06rem); line-height:1.55; }
.pr-cta-actions{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin-top:23px; }
.pr-cta-button{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:14px; min-width:180px; }
.pr-cta-button::before{ content:""; position:absolute; inset:-1px; transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.pr-cta-button:hover::before{ transform:translateX(110%); }
.pr-cta-button i{ font-style:normal; transition:transform .22s ease; }
.pr-cta-button:hover i{ transform:translateX(4px); }
.pr-cta-assurance{ font-family:var(--mono); font-size:.61rem; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; color:#7186a5; }

/* ── The ladder card ── */
.pr-ladder-card{
  position:relative; overflow:hidden; min-height:258px;
  border:1px solid rgba(122,164,255,.25); border-radius:23px 23px 23px 7px;
  background:linear-gradient(145deg,rgba(10,22,42,.94),rgba(3,8,18,.93));
  box-shadow:0 24px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04),0 0 60px rgba(18,104,255,.07);
  transform:translateY(10px) scale(.99); opacity:.72;
  transition:opacity .55s ease,transform .55s cubic-bezier(.1,.9,.2,1),border-color .55s ease;
}
.pr-ladder-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 18% 28%,rgba(69,215,255,.075),transparent 34%); }
.pr-ladder-cta.is-visible .pr-ladder-card{ opacity:1; transform:none; border-color:rgba(69,215,255,.34); }

.pr-card-head{ position:relative; z-index:2; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:13px 17px; border-bottom:1px solid rgba(122,164,255,.12); font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:#6e85a6; }
.pr-ladder-badge{ padding:5px 8px; border:1px solid rgba(69,215,255,.28); border-radius:999px; color:#9bdfff; background:rgba(69,215,255,.045); transition:border-color .4s ease,color .4s ease,background .4s ease; white-space:nowrap; }
.pr-ladder-cta.is-complete .pr-ladder-badge{ border-color:rgba(63,240,162,.34); color:#8ff4c6; background:rgba(63,240,162,.05); }

.pr-card-body{ position:relative; z-index:2; padding:16px 17px 16px; }

.pr-rungs{ display:flex; flex-direction:column; gap:7px; margin-bottom:13px; }
.pr-rung{ display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center;
  padding:8px 11px; border:1px solid rgba(122,164,255,.11); border-radius:10px; background:rgba(255,255,255,.016);
  opacity:.42; transform:translateX(-6px); transition:opacity .3s ease,transform .3s ease,border-color .3s ease,background .3s ease; }
.pr-rung b{ font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; color:#4e89d8; }
.pr-rung-name{ font-size:.78rem; color:#c2cee2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-rung-price{ font-family:var(--display); font-size:.85rem; font-weight:700; letter-spacing:-.02em; color:#7f92ad; white-space:nowrap; }
.pr-rung.active{ opacity:1; transform:none; border-color:rgba(69,215,255,.25); background:rgba(18,104,255,.07); }
.pr-rung.active .pr-rung-price{ color:#45d7ff; }
/* The pinned/resolved rung (tier 1, Free) gets a distinct, held-open
   treatment — it's the answer, not just another step in the sequence. */
.pr-rung.pinned{ opacity:1; transform:none; border-color:rgba(63,240,162,.4); background:rgba(63,240,162,.08); }
.pr-rung.pinned .pr-rung-price{ color:#3ff0a2; }

.pr-status-line{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:#7188a9; }
.pr-status-line::before{ content:""; width:6px; height:6px; border-radius:50%; background:#526782; transition:background .25s ease,box-shadow .25s ease; }
.pr-ladder-cta.is-complete .pr-status-line{ color:#a8c6e9; }
.pr-ladder-cta.is-complete .pr-status-line::before{ background:#3ff0a2; box-shadow:0 0 12px rgba(63,240,162,.62); }

.pr-scan-line{ position:absolute; z-index:3; top:0; bottom:0; left:0; width:1px; opacity:0;
  background:linear-gradient(transparent,#45d7ff,transparent); box-shadow:0 0 15px rgba(69,215,255,.75); pointer-events:none; }
.pr-ladder-cta.is-scanning .pr-scan-line{ animation:prCardScan 2.1s cubic-bezier(.2,.8,.2,1) .08s both; }
@keyframes prCardScan{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 82%{ opacity:1; } 100%{ left:100%; opacity:0; } }

.pr-ladder-cta.is-scanning:not(.is-complete) .pr-live-dot{ animation:prBlink .8s ease-in-out infinite; }
@keyframes prBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

@media (max-width:980px){
  .pr-ladder-cta{ padding:52px 0; }
  .pr-cta-shell{ grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); gap:34px; }
  .pr-ladder-cta h2{ font-size:clamp(2.15rem,4.9vw,3.25rem); }
}
@media (max-width:780px){
  .pr-cta-shell{ grid-template-columns:1fr; gap:30px; }
  .pr-cta-copy{ max-width:680px; }
  .pr-ladder-card{ max-width:620px; width:100%; }
}
@media (max-width:620px){
  .pr-ladder-cta{ padding:46px 0 42px; }
  .pr-ladder-cta h2{ font-size:clamp(2.2rem,11vw,3.2rem); }
  .pr-cta-actions{ align-items:stretch; margin-top:20px; }
  .pr-cta-button{ width:100%; justify-content:center; }
  .pr-cta-assurance{ width:100%; text-align:center; }
  .pr-ladder-card{ min-height:0; border-radius:20px 20px 20px 6px; }
  .pr-card-head{ padding:12px 13px; font-size:.5rem; letter-spacing:.08em; gap:8px; }
  .pr-card-body{ padding:14px 13px 14px; }
  .pr-rung-name{ font-size:.7rem; }
  .pr-rung-price{ font-size:.75rem; }
}

@media (prefers-reduced-motion:reduce){
  .pr-ladder-card,.pr-rung,.pr-cta-button::before,.pr-cta-button i{ transition:none !important; }
  .pr-live-dot,.pr-scan-line{ animation:none !important; }
  .pr-ladder-card{ opacity:1; transform:none; }
  .pr-rung{ opacity:1; transform:none; }
}