/* pricing-2026-10-06: Pricing page redesign (Chris mockup). Scoped .pp-* on top of the .rd-* system. Brand #5b47f0. */
/* v2 hero (Chris 2026-10-06): ONE full-bleed lavender hero holding copy, art AND plan cards; soft curved shapes edge to edge,
   fading into the next section's #f6f5fd so there is no band edge. */
.pp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 2.75rem 0 4.5rem;
  background: linear-gradient(180deg, #ebe8fb 0%, #efedfc 40%, #f4f2fd 75%, #f6f5fd 100%); }
.pp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 380px at -80px 320px, rgba(255, 255, 255, 0.72) 0, rgba(255, 255, 255, 0.55) 70%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 1000px 580px at 104% -8%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.7) 65%, rgba(255, 255, 255, 0) 79%),
    radial-gradient(ellipse 780px 480px at 113% 2%, rgba(196, 185, 250, 0) 54%, rgba(196, 185, 250, 0.4) 62%, rgba(196, 185, 250, 0) 75%),
    radial-gradient(ellipse 1150px 540px at 72% 120%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.5) 65%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 660px 430px at 78% 24%, rgba(91, 71, 240, 0.1), rgba(91, 71, 240, 0) 70%),
    radial-gradient(ellipse 560px 380px at 8% 88%, rgba(91, 71, 240, 0.06), rgba(91, 71, 240, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%); }
/* seam guard: the next (unchanged) section's top-left glow would start with a hard line under the hero; fade only its top 160px of background */
.pp-hero + .rd-tint { isolation: isolate; }
.pp-hero + .rd-tint::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #f6f5fd 0%, rgba(246, 245, 253, 0) 100%); }
@media (min-width: 1024px) { .pp-hero { padding: 3.25rem 0 5.5rem; } }
/* wide container: cards/art up to 1320px (header stays 1176px); copy keeps the header's left edge */
.pp-hero-wrap { width: 100%; max-width: calc(1320px + 4rem); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .pp-hero-wrap { padding: 0 2rem; } }
.pp-hero-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) { .pp-hero-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr); gap: 2rem; } }

@media (min-width: 1024px) { .pp-hero-grid { padding-left: max(0px, calc((100% - 1176px) / 2)); } }   /* % = wrap content width: copy lines up with the header logo */
.pp-hero .rd-h1 { margin-top: 0.8rem; font-size: clamp(2.2rem, 4.6vw, 3.85rem); line-height: 1.06; }
.pp-hero .rd-lede { max-width: 40rem; font-size: 1.08rem; }
.pp-hero-art { justify-self: end; width: 100%; max-width: 34rem; }
.pp-hero-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 1023px) { .pp-hero-art { justify-self: center; max-width: 26rem; } }
@media (max-width: 639px) { .pp-hero-art { max-width: 21rem; } }

/* plan cards: translucent white, soft shadow; Growth purple border + tint + Recommended pill on the border */
.pp-plans { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
@media (min-width: 1024px) { .pp-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2.5rem; } }
@media (min-width: 700px) and (max-width: 1023px) { .pp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-plan--rec { order: -1; grid-column: 1 / -1; } }
.pp-plan { position: relative; display: flex; flex-direction: column; padding: 1.6rem; border-radius: 22px; background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(230, 227, 247, 0.95); box-shadow: 0 22px 50px rgba(42, 30, 140, 0.08), 0 2px 6px rgba(42, 30, 140, 0.03);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1024px) { .pp-plan { padding: 1.9rem 2rem 2rem; } }
.pp-plan--rec { border: 1.5px solid #7564f3; background: linear-gradient(180deg, rgba(249, 248, 255, 0.95) 0%, rgba(240, 237, 254, 0.93) 100%);
  box-shadow: 0 0 0 4px rgba(91, 71, 240, 0.07), 0 26px 60px rgba(91, 71, 240, 0.18); }
.pp-rec { position: absolute; top: 0; right: 1.1rem; transform: translateY(-50%); padding: 0.32rem 0.85rem; border-radius: 999px; background: #5b47f0; color: #fff;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; box-shadow: 0 8px 18px rgba(91, 71, 240, 0.32); }
.pp-plan-top { display: flex; align-items: center; gap: 0.85rem; }
.pp-plan-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 14px;
  background: #f1effd; color: #5b47f0; box-shadow: inset 0 0 0 1px #e4e0fb; }
.pp-plans .pp-plan-ic { width: 3.1rem; height: 3.1rem; background: #efecfd; box-shadow: inset 0 0 0 1px #e2ddfb, 0 4px 10px rgba(91, 71, 240, 0.08); }
.pp-plan--rec .pp-plan-ic { background: #fff; }
.pp-plan-ic svg { width: 1.35rem; height: 1.35rem; }
.pp-plans .pp-plan-ic svg { width: 1.45rem; height: 1.45rem; }
.pp-plan-name { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: #0b1631; }
.pp-price { margin: 1.2rem 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.pp-amt { font-size: clamp(2rem, 3.1vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #0b1631; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-mo { font-size: 1rem; font-weight: 500; color: #64748b; }
.pp-setup { margin: 0.4rem 0 0; font-size: 0.95rem; color: #64748b; font-variant-numeric: tabular-nums; }
.pp-envs { margin: 1.25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid #e4e1f2; display: grid; gap: 0.7rem; }
.pp-envs div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pp-envs dt { font-size: 0.95rem; color: #475569; }
.pp-envs dd { margin: 0; font-size: 1rem; font-weight: 700; color: #0b1631; font-variant-numeric: tabular-nums; }
.pp-fit { margin: 1.15rem 0 1.45rem; font-size: 0.97rem; line-height: 1.55; color: #475569; flex: 1 0 auto; }
.pp-btn { width: 100%; min-height: 3.1rem; font-size: 0.97rem; }
.pp-btn--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid #dcd7f2;
  background: #fff; color: #0b1631; font-weight: 700; text-decoration: none; transition: border-color .15s, color .15s, box-shadow .15s; }
.pp-btn--ghost:hover { border-color: #5b47f0; color: #4a38d8; box-shadow: 0 8px 20px rgba(91, 71, 240, 0.12); }
.pp-btn:focus-visible, .pp-cta-btn:focus-visible, .pp-q summary:focus-visible { outline: 3px solid rgba(91, 71, 240, 0.45); outline-offset: 2px; }
.pp-cad { margin: 1.25rem 0 0; font-size: 0.85rem; color: #64748b; }

/* split sections: heading left, cards right */
.pp-split { display: grid; gap: 1.75rem; }
@media (min-width: 1024px) { .pp-split { grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); gap: 3rem; align-items: start; } }
.pp-split-head .rd-lede { max-width: 22rem; }
.pp-checks, .pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 640px) { .pp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-check, .pp-step { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem 1.1rem; font-size: 0.93rem; line-height: 1.5; color: #334155; }
.pp-check-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: #efecfd; color: #5b47f0; }
.pp-check-ic svg { width: 1rem; height: 1rem; }
.pp-step { align-items: center; }
.pp-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: #efecfd; color: #5b47f0; font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* ownership boundary */
.pp-own { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) { .pp-own { grid-template-columns: minmax(0, 0.68fr) minmax(0, 0.32fr); gap: 3rem; } }
.pp-own-card { margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-left: 4px solid #5b47f0; }
.pp-own-card p { margin: 0; font-size: 0.98rem; line-height: 1.65; color: #334155; }
.pp-own-art svg { display: block; width: 100%; max-width: 24rem; height: auto; margin: 0 auto; }
@media (max-width: 1023px) { .pp-own-art svg { max-width: 18rem; } }

/* choosing */
.pp-choose { display: grid; gap: 1rem; }
@media (min-width: 900px) { .pp-choose { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.pp-ch { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; }
.pp-ch-h { margin: 0.15rem 0 0; font-size: 1rem; font-weight: 700; color: #0b1631; }
.pp-ch p { margin: 0.4rem 0 0; font-size: 0.93rem; line-height: 1.55; color: #64748b; }

/* FAQ accordion (native details/summary: mouse, Enter and Space all work) */
.pp-faq { display: grid; gap: 0.6rem; }
.pp-q { background: #fff; border: 1px solid #e6e3f7; border-radius: 14px; box-shadow: 0 6px 18px rgba(11, 22, 49, 0.04); }
.pp-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.85rem 1.1rem;
  cursor: pointer; list-style: none; font-size: 0.97rem; font-weight: 600; color: #0b1631; border-radius: 14px; }
.pp-q summary::-webkit-details-marker { display: none; }
.pp-q summary:hover { color: #4a38d8; }
.pp-q-ic { flex: none; display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 999px; background: #f1effd; color: #5b47f0; transition: transform .2s; }
.pp-q-ic svg { width: 0.95rem; height: 0.95rem; }
.pp-q[open] .pp-q-ic { transform: rotate(45deg); }
.pp-a { padding: 0 1.1rem 1.05rem; }
.pp-a p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: #475569; }

/* dark indigo CTA band */
.pp-cta-sec { padding: 0 0 3.5rem; background: #f6f5fd; }
.pp-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem;
  padding: 2.25rem 1.5rem; border-radius: 20px; color: #fff;
  background: radial-gradient(520px 260px at 12% 0%, rgba(91, 71, 240, 0.45), transparent 70%), radial-gradient(420px 240px at 100% 100%, rgba(124, 92, 246, 0.35), transparent 70%),
    linear-gradient(120deg, #0b1030 0%, #141a4a 55%, #1a1660 100%); box-shadow: 0 24px 60px rgba(11, 16, 48, 0.28); }
@media (min-width: 768px) { .pp-cta { padding: 2.5rem 3rem; } }
.pp-cta-copy { max-width: 40rem; }
.pp-cta-eb { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b7a9ff; }
.pp-cta-h { margin: 0.45rem 0 0; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.pp-cta-p { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.pp-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.6rem; border-radius: 9999px;
  background: linear-gradient(90deg, #5b47f0, #6f5cf5); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 14px 34px rgba(91, 71, 240, 0.5); transition: filter .15s; }
.pp-cta-btn:hover { filter: brightness(1.1); }
@media (max-width: 400px) { .pp-plan { padding: 1.25rem; } .pp-amt { font-size: 1.75rem; } .pp-cta-btn { width: 100%; justify-content: center; } }