/* ============================================================
   THE DREAM STATE — Packages
   Goals, not just money. Trajectory background, goal-phase ladder,
   interactive tier matcher, futuristic featured tier.
   ============================================================ */

/* ---------- Background: trajectory to the goal ---------- */
.pr-aura{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52vw 52vw at 88% 8%, rgba(87,21,110,.42), transparent 60%),
    radial-gradient(48vw 48vw at 6% 96%, rgba(39,0,48,.7), transparent 62%); }
#pr-flow{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.pr-aura{ z-index:1; mix-blend-mode:screen; }
.bg-grain{ z-index:1; }

/* ---------- Hero ---------- */
.pk-hero{ position:relative; padding:8rem 0 2rem; }
.pk-hero .eyebrow{ color:var(--gold); }
.pk-hero h1{ font-size:clamp(2.7rem,7vw,5.6rem); }

/* ---------- Goal-phase ladder ---------- */
.phases{ display:grid; gap:18px; grid-template-columns:1fr; counter-reset:ph; }
@media(min-width:820px){ .phases{ grid-template-columns:repeat(3,1fr); } }
.phase{ position:relative; border:1px solid var(--line-2); border-radius:18px; padding:var(--s-4);
  background:linear-gradient(165deg,var(--card),var(--ink-2)); overflow:hidden; }
.phase .pn{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); }
.phase h3{ margin:.5rem 0 .5rem; }
.phase p{ font-size:.92rem; color:var(--mist); }
.phase .arrow{ position:absolute; top:50%; right:-22px; color:var(--gold); font-size:1.4rem; z-index:2; display:none; }
@media(min-width:820px){ .phase:not(:last-child) .arrow{ display:block; } }

/* ---------- Section block ---------- */
.pk-block{ position:relative; }
.pk-tag{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line);
  border-radius:100px; padding:.5em 1em; background:rgba(212,175,55,.05); }

/* ---------- Audit feature row ---------- */
.audit-card{ position:relative; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:linear-gradient(160deg, rgba(39,0,48,.5), #0a070e); display:grid; gap:0; }
@media(min-width:900px){ .audit-card{ grid-template-columns:1.2fr 1fr; } }
.audit-card .ac-body{ padding:clamp(1.8rem,4vw,3rem); }
.audit-card .ac-side{ padding:clamp(1.8rem,4vw,3rem); border-top:1px solid var(--line-2); background:rgba(212,175,55,.03); }
@media(min-width:900px){ .audit-card .ac-side{ border-top:0; border-left:1px solid var(--line-2); } }
.price-tag{ font-family:var(--display); font-size:clamp(2.6rem,5vw,3.6rem); color:var(--gold-3); line-height:1; }
.price-tag small{ font-family:var(--mono); font-size:.9rem; color:var(--mist-2); letter-spacing:.05em; }

/* ---------- Tier selector ---------- */
.selector{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-bottom:var(--s-5); }
.selector .lab{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-2); margin-right:.4rem; }
.selopt{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--mist); background:rgba(255,255,255,.03);
  border:1px solid var(--line-2); padding:.7em 1.2em; border-radius:100px; cursor:pointer; transition:.25s; }
.selopt:hover{ color:#fff; border-color:var(--line); }
.selopt.active{ background:linear-gradient(105deg,var(--gold),var(--gold-2)); color:#1c0024; border-color:transparent; font-weight:700; }

/* ---------- Build tiers ---------- */
.tier-grid{ display:grid; gap:22px; grid-template-columns:1fr; align-items:stretch; }
@media(min-width:900px){ .tier-grid{ grid-template-columns:repeat(3,1fr); } }
.tier{ position:relative; border:1px solid var(--line-2); border-radius:20px; padding:var(--s-5) var(--s-4);
  background:linear-gradient(170deg,var(--card),var(--ink-2)); display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; overflow:hidden; }
.tier:hover{ transform:translateY(-6px); border-color:var(--line); }
.tier.match{ border-color:var(--gold-2); box-shadow:0 0 0 1px var(--gold-2), 0 30px 60px -30px rgba(212,175,55,.4); }
.tier.match::after{ content:"Recommended for you"; position:absolute; top:12px; right:12px; font-family:var(--mono);
  font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); border:1px solid var(--line);
  padding:.3em .6em; border-radius:100px; }
/* featured (popular) */
.tier.feat{ border-color:transparent; background:linear-gradient(170deg,#1b1126,#0c0810); }
.tier.feat::before{ content:""; position:absolute; inset:0; border-radius:20px; padding:1.5px;
  background:conic-gradient(from 0deg, #9A7B22, #F3DE9B, #D4AF37, #9A7B22, #F3DE9B);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinBorder 6s linear infinite; }
@keyframes spinBorder{ to{ transform:rotate(360deg); } }
.tier.feat .ribbon{ position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:linear-gradient(105deg,var(--gold),var(--gold-2)); color:#1c0024; font-family:var(--mono);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:.45em 1.2em;
  border-radius:0 0 10px 10px; z-index:3; }
.tier > *{ position:relative; z-index:1; }
.tier .goalpill{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); }
.tier .tname{ font-family:var(--display); font-size:1.5rem; color:#fff; margin:.4rem 0 .1rem; }
.tier .tprice{ font-family:var(--display); font-size:2.6rem; color:var(--gold-3); line-height:1; margin:.3rem 0; }
.tier .tmeta{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mist-2); margin-bottom:1rem; }
.tier .tmeta b{ color:var(--gold-2); font-weight:400; }
.tier .goalmini{ height:60px; margin:.2rem 0 1rem; }
.tier .goalmini svg{ height:100%; width:auto; display:block; }
.tier ul{ list-style:none; display:grid; gap:.6rem; margin:0 0 var(--s-4); }
.tier li{ position:relative; padding-left:1.7em; font-size:.9rem; color:var(--mist); }
.tier li::before{ content:"✦"; position:absolute; left:0; top:.1em; color:var(--gold); font-size:.8em; }
.tier li b{ color:var(--cream); }
.tier .btn{ margin-top:auto; }

/* ---------- Retainer tiers ---------- */
.ret-grid{ display:grid; gap:18px; grid-template-columns:1fr; align-items:stretch; }
@media(min-width:900px){ .ret-grid{ grid-template-columns:repeat(3,1fr); } }
.ret{ position:relative; border:1px solid var(--line-2); border-radius:18px; padding:var(--s-4);
  background:linear-gradient(170deg,var(--card),var(--ink-2)); display:flex; flex-direction:column; }
.ret.feat{ border-color:var(--gold); box-shadow:0 30px 60px -34px rgba(212,175,55,.4); }
.ret.feat .rbadge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:linear-gradient(105deg,var(--gold),var(--gold-2)); color:#1c0024; font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:.35em .9em; border-radius:100px; }
.ret .rn{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); }
.ret .rp{ font-family:var(--display); font-size:2rem; color:#fff; margin:.3rem 0 .1rem; }
.ret .rp small{ font-size:.9rem; color:var(--mist-2); font-family:var(--mono); }
.ret .rg{ font-size:.86rem; color:var(--mist-2); margin-bottom:1rem; }
.ret ul{ list-style:none; display:grid; gap:.5rem; margin:0 0 1.2rem; }
.ret li{ position:relative; padding-left:1.6em; font-size:.88rem; color:var(--mist); }
.ret li::before{ content:"✦"; position:absolute; left:0; color:var(--gold); font-size:.78em; top:.1em; }
.ret .btn{ margin-top:auto; }

/* ---------- Includes grid ---------- */
.includes{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:640px){ .includes{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .includes{ grid-template-columns:repeat(3,1fr); } }
.inc{ display:flex; gap:12px; align-items:flex-start; padding:1rem 1.1rem; border:1px solid var(--line-2);
  border-radius:12px; background:rgba(255,255,255,.02); }
.inc .tick{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1c0024; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.inc b{ color:#fff; font-size:.92rem; display:block; }
.inc span{ font-size:.82rem; color:var(--mist-2); }

/* ---------- Terms ---------- */
.terms{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:760px){ .terms{ grid-template-columns:repeat(3,1fr); } }
.term{ border:1px solid var(--line-2); border-radius:16px; padding:var(--s-4); background:linear-gradient(165deg,var(--card),var(--ink-2)); }
.term .k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); }
.term h4{ margin:.5rem 0 .5rem; }
.term p{ font-size:.9rem; color:var(--mist); }

@media (prefers-reduced-motion: reduce){
  #pr-flow{ display:none; }
  .tier.feat::before{ animation:none; }
}