/* ============================================================
   Wonderkit — public /pricing page (pricing plan 5, Task 9).
   Loaded LAST, after /design/styles.css + app.css + portal.css +
   portal/landing.css, so it can lean on all four:
     · the landing's nav (.lp, .lp-nav, .lp-brand, .lp-loginbtn)
     · the portal's plan cards (.pl-plans, .pl-plan*)
     · the design-system button atoms (.wk-btn*)
   Only the page-specific pieces live here. No JS on this page —
   it is a static, pre-auth marketing surface (the plan copy is
   filled server-side from the canonical packages/db catalog).
   ============================================================ */

/* ── The page frame, which landing.css used to supply ─────────────────────────
   .lp once carried the wash, the column layout and a top vignette, .lp__aura
   sized four blooms, and .lp-foot styled the footer. The v2 landing moved all
   of that onto its own .lp-heroband / .lp-footfull — neither of which exists
   on this script-free page — so the frame lives here now. Scoped to this
   page's own .pr-* classes throughout, so nothing here can reach the landing.
   Everything still borrowed from landing.css (.lp, .lp-nav*, .lp-brand,
   .lp-loginbtn, .lp__aura's positioning + drift keyframes) is genuinely
   shared and stays there. */
.pr-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Bottom safe-area so the footer clears the macOS Dock (and similar OS bars). */
  padding-bottom: 96px;
  /* Clip only horizontally — the blooms (inset:-12%) bleed sideways and must
     stay hidden; vertical clipping would cut off the footer on a short screen. */
  overflow-x: hidden;
  /* The landing's hero ink, which .pr-hero and .pr-band below still read.
     landing.css declares the same pair on .lp, which this element also carries,
     so today this copy is redundant and merely wins by loading later. Kept on
     purpose: the parked follow-up has /pricing stop linking landing.css
     entirely, and this is what carries the page across that. Keep the two in
     step — they must not drift. */
  --lp-ink:  var(--violet-900);
  --lp-body: var(--ink-700);
  background:
    radial-gradient(900px 680px at 56% 60%, rgba(255, 255, 255, .58), transparent 60%),
    linear-gradient(165deg, #faf5ff 0%, #fbeaf4 50%, #f3edff 100%);
}
/* soft top vignette so the nav reads */
.pr-page::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 220px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent);
  pointer-events: none; z-index: 1;
}

/* The aura blooms without landing.js: landing.js sets each bloom's gradient in
   an inline style attribute, and the v2 landing only ever renders two of them,
   so a script-free page with four has to declare both the colours and the
   geometry. Same brand colours and the same drift keyframes as the landing.
   b1 and b3 also match landing.css's own .lp__aura rules at equal specificity;
   these win only by loading later, so b3 states `right: auto` explicitly rather
   than relying on the UA dropping the inherited `right: 6%` because `left` and
   `width` are both set. */
.pr-aura { inset: -12%; }
.pr-aura .b1 { top: 2%;  left: 4%;  width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(124, 58, 237, .90), transparent 68%); opacity: .5; }
.pr-aura .b2 { top: -4%; right: 2%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(168, 85, 247, .90), transparent 68%); opacity: .5; }
.pr-aura .b3 { bottom: -8%; left: 28%; right: auto; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(236, 72, 153, .90), transparent 68%); opacity: .5; }
.pr-aura .b4 { bottom: 0; right: 14%; width: 38vw; height: 38vw; background: radial-gradient(circle, rgba(244, 114, 182, .90), transparent 68%); opacity: .5; }
/* landing.css drifts b1 and b3; the two this page adds get the same treatment. */
@media (prefers-reduced-motion: no-preference) {
  .pr-aura .b2 { animation: lp-drift-b 23s ease-in-out infinite; }
  .pr-aura .b4 { animation: lp-drift-a 21s ease-in-out infinite reverse; }
}

/* ── Footer ──────────────────────────────────────────────────────────────────
   Was the v1 landing's .lp-foot. v2 replaced it with a much larger .lp-footfull
   (store badges, a brand row, four legal links) that this page does not want,
   so the compact one moved here under this page's own prefix. */
.pr-foot {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 22px; padding: 26px 24px 30px; text-align: center;
}
.pr-foot__legal { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2px; }
.pr-foot__legal a { font-size: 13px; font-weight: 600; color: var(--lp-body); text-decoration: none; opacity: .75; }
.pr-foot__legal a:hover { opacity: 1; text-decoration: underline; }
.pr-foot__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--violet-300); }

/* Non-link nav item for the page you're already on. */
.pr-nav__current { color: var(--color-primary-ink); background: rgba(124, 58, 237, .09); cursor: default; }

.pr {
  position: relative; z-index: 5; flex: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(28px, 5vh, 62px) clamp(16px, 4vw, 40px) 56px;
}

/* ── Hero ────────────────────────────────────────────────────── */
.pr-hero { text-align: center; max-width: 780px; margin: 0 auto 34px; }
.pr-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 5.2vw, 52px); line-height: 1.06;
  letter-spacing: -0.025em; color: var(--lp-ink);
  margin: 0; text-wrap: balance;
}
.pr-hero h1 .sun { color: var(--amber-600); }
.pr-hero__sub {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(15px, 1.9vw, 19px); line-height: 1.55;
  color: var(--lp-body); margin: 16px auto 0; max-width: 660px; text-wrap: pretty;
}

/* ── Plan cards ──────────────────────────────────────────────── */
/* .pl-plans owns the grid; these are the marketing-surface deltas (lift off
   the wash, equal-height cards, a quiet ring on Basic — no "most popular"
   badge: that is a claim, and this page states nothing it can't back). */
.pr-plans { align-items: stretch; margin: 0 auto; }
.pr-plan { box-shadow: 0 18px 46px -26px rgba(91, 33, 182, .40); }
.pr-plan--ring { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--violet-100), 0 18px 46px -24px rgba(91, 33, 182, .42); }
.pr-plan .pl-plan__feat { margin-top: 2px; }
.pr-plan .pl-plan__feat li { line-height: 1.45; }
.pr-plan .pr-check { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.pr-plan .pl-plan__cta { padding-top: 4px; }

/* Plan grid ladder. Declared here in full — portal.css's own .pl-plans
   breakpoints (2-up ≤860, 1-up ≤520) are earlier in the cascade at equal
   specificity, so a partial override here would win at the WRONG widths. */
@media (max-width: 1080px) { .pr-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .pr-plans { grid-template-columns: 1fr; } }

/* ── Explainer bands ─────────────────────────────────────────── */
.pr-band {
  margin: 34px auto 0; max-width: 820px;
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(124, 58, 237, .14);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 3.4vw, 30px);
  box-shadow: 0 14px 40px -28px rgba(91, 33, 182, .40);
  text-align: center;
}
.pr-band--soft { background: rgba(255, 255, 255, .58); }
.pr-band h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em;
  color: var(--lp-ink); margin: 0;
}
.pr-band p {
  font-size: clamp(14.5px, 1.7vw, 16.5px); line-height: 1.6;
  color: var(--lp-body); margin: 12px auto 0; max-width: 640px; text-wrap: pretty;
}
.pr-band p b { color: var(--color-primary-ink); font-weight: 800; }
.pr-fine { font-size: 13px !important; color: var(--text-muted) !important; margin-top: 10px !important; }

.pr-cta { text-align: center; margin: 34px 0 0; }