/* ============================================================
   WizBrand Pricing page — themed + creative (external)
   ============================================================ */
.pr { font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif; color: #41506b; }
.pr * { box-sizing: border-box; }
.pr-container { max-width: 1140px; margin: 0 auto; padding: 0 1.4rem; }

/* Hero */
.pr-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, #0b2350 0%, #1d4ed8 60%, #3b7dff 100%); color: #fff; padding: 3rem 1.4rem 6.5rem; text-align: center; }
.pr-hero::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; top: -200px; right: -120px; background: radial-gradient(circle, rgba(59, 130, 246, .5), transparent 70%); animation: prFloat 9s ease-in-out infinite; }
.pr-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); }
.pr-hero .inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.pr-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cfe0ff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); padding: .42rem .9rem; border-radius: 999px; }
.pr-hero h1 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; color: #fff; font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.02em; margin: 1rem 0 .9rem; }
.pr-hero p { color: #dbe6f7; font-size: 1.1rem; max-width: 640px; margin: 0 auto; }
@keyframes prFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(24px) scale(1.05); } }

/* Toggle */
.pr-toggle { display: inline-flex; gap: 4px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 5px; margin-top: 1.6rem; position: relative; z-index: 1; }
.pr-toggle button { border: none; cursor: pointer; padding: .6rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .95rem; color: #dbe6f7; background: transparent; transition: all .2s; }
.pr-toggle button.active { background: #fff; color: #1d4ed8; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }

/* Plans grid (pulled up over hero) */
.pr-plans { position: relative; z-index: 2; margin-top: -4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 900px) { .pr-plans { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
.pr-plan { position: relative; background: #fff; border: 1px solid #e6ecf5; border-radius: 20px; padding: 2rem 1.6rem; box-shadow: 0 14px 34px rgba(15, 27, 52, .1); display: flex; flex-direction: column; text-align: center; transition: transform .25s, box-shadow .25s; }
.pr-plan:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(15, 27, 52, .18); }
.pr-plan.popular { border: 2px solid #1d4ed8; box-shadow: 0 26px 56px rgba(29, 78, 216, .22); }
@media (min-width: 901px) { .pr-plan.popular { transform: scale(1.04); } .pr-plan.popular:hover { transform: scale(1.04) translateY(-8px); } }
.pr-ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(35deg); background: linear-gradient(120deg, #3b82f6, #1d4ed8); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .05em; padding: 6px 40px; box-shadow: 0 6px 14px rgba(29, 78, 216, .35); }
.pr-plan .ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; margin: 0 auto 1rem; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 10px 22px rgba(29, 78, 216, .28); }
.pr-plan.p2 .ic { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.pr-plan.p3 .ic { background: linear-gradient(135deg, #34d399, #2f9e44); }
.pr-plan h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.3rem; font-weight: 800; color: #0f1b34; margin: 0 0 .3rem; }
.pr-plan .tag { color: #6b7894; font-size: .9rem; margin-bottom: 1rem; }
.pr-amount { display: flex; align-items: baseline; justify-content: center; gap: .4rem; margin: .4rem 0 .2rem; }
.pr-amount .big { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 2.6rem; font-weight: 800; color: #1d4ed8; line-height: 1; }
.pr-amount .per { color: #6b7894; font-size: .95rem; }
.price { color: #97a3ba; text-decoration: line-through; font-size: 1rem; margin: 0 0 .2rem; }
.pr-was { color: #6b7894; font-size: .9rem; margin-bottom: 1rem; }
.pr-desc { color: #6b7894; font-size: .95rem; margin: 0 0 1.2rem; line-height: 1.6; }
.pr-features { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .65rem; text-align: left; }
.pr-features li { position: relative; padding-left: 1.9rem; color: #41506b; line-height: 1.5; }
.pr-features li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: .05rem; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .64rem; color: #2f9e44; background: #e7f7ec; }
.pr-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #1d4ed8; color: #fff; font-weight: 700; padding: .85rem 1.4rem; border-radius: 11px; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 10px 22px rgba(29, 78, 216, .28); transition: transform .18s, background .18s; }
.pr-btn:hover { background: #1741b6; color: #fff; transform: translateY(-2px); }
.pr-plan.popular .pr-btn { background: linear-gradient(120deg, #3b82f6, #1d4ed8); }

/* Why-free note */
.pr-note { max-width: 880px; margin: 3rem auto 0; background: #fff; border: 1px solid #e6ecf5; border-left: 4px solid #fbbf24; border-radius: 14px; padding: 1.6rem 1.8rem; text-align: center; box-shadow: 0 2px 10px rgba(15, 27, 52, .06); }
.pr-note h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: #0f1b34; font-weight: 800; font-size: 1.25rem; margin: 0 0 .5rem; }
.pr-note p { color: #6b7894; margin: 0; line-height: 1.7; }

/* CTA */
.pr-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #0b2350, #1d4ed8); color: #fff; text-align: center; padding: 2.6rem 1.5rem; border-radius: 22px; max-width: 1040px; margin: 3rem auto 0; box-shadow: 0 30px 70px rgba(15, 27, 52, .16); }
.pr-cta p { position: relative; color: #d7e3fb; margin: 0; font-size: 1.08rem; }
.pr-cta a { color: #ffd24a; font-weight: 700; text-decoration: none; }
.pr-cta a:hover { text-decoration: underline; }

.pr-section { padding: 0 0 4rem; }