/* Inter font is already loaded globally by base.html — no @import needed here. */

/* =======================================================
   Master-Quiz — Pricing v2 (scoped)
   All rules scoped under #pricing.pricing-v2 so the mockup's
   generic class names never collide with the global style.css.
   Tokens (--mq-*) come from tokens.css; navbar/body/tokens
   are provided by the SPA shell and intentionally NOT included.
   ======================================================= */

/* ============ PAGE (purple hero like dashboard/landing) ============ */
#pricing.pricing-v2 { background: #fff; padding: 0; }
#pricing.pricing-v2 .pv-page { position: relative; background: var(--mq-gradient-landing); color: #fff; overflow: hidden; isolation: isolate; }
#pricing.pricing-v2 .pv-page::before, #pricing.pricing-v2 .pv-page::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); z-index: 0; }
#pricing.pricing-v2 .pv-page::before { width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(240,147,251,.5), transparent); top: -180px; left: -120px;  }
#pricing.pricing-v2 .pv-page::after  { width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(102,126,234,.5), transparent); top: 60px; right: -140px;  }
@keyframes pricingHeroFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-16px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #pricing.pricing-v2 .pv-page::before, #pricing.pricing-v2 .pv-page::after { animation: none; } }

/* ============ HERO HEADER ============ */
#pricing.pricing-v2 .pv-hero { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 60px 24px 30px; text-align: center; }
#pricing.pricing-v2 .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; border-radius: 9999px; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(12px); }
#pricing.pricing-v2 .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#pricing.pricing-v2 .pv-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; margin: 20px 0 16px; text-wrap: balance; }
#pricing.pricing-v2 .pv-hero h1 .glow { background: linear-gradient(135deg,#fbbf24 0%,#fb923c 60%,#f59e0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#pricing.pricing-v2 .pv-hero p.lead { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.86); margin: 0 auto; max-width: 56ch; }

/* Billing toggle */
#pricing.pricing-v2 .billing { display: inline-flex; align-items: center; gap: 4px; margin-top: 30px; padding: 5px; border-radius: 9999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); }
#pricing.pricing-v2 .billing button { appearance: none; border: 0; cursor: pointer; font: 700 14px var(--mq-font-sans); color: rgba(255,255,255,.8); background: transparent; padding: 10px 20px; border-radius: 9999px; transition: all .2s var(--mq-ease); display: inline-flex; align-items: center; gap: 8px; }
#pricing.pricing-v2 .billing button.active { background: #fff; color: var(--mq-primary-dark); box-shadow: 0 4px 14px rgba(15,23,42,.2); }
#pricing.pricing-v2 .billing .save { font-size: 11px; font-weight: 900; letter-spacing: .03em; padding: 2px 8px; border-radius: 9999px; background: linear-gradient(135deg,#10b981,#059669); color: #fff; }
#pricing.pricing-v2 .billing button.active .save { background: linear-gradient(135deg,#ff9500,#ff7b00); }

/* ============ WAVE DIVIDER ============ */
#pricing.pricing-v2 .pv-wave { display: block; width: 100%; height: 70px; margin-top: 36px; margin-bottom: -1px; position: relative; z-index: 2; }

/* ============ WHITE SECTION ============ */
#pricing.pricing-v2 .pv-band { position: relative; z-index: 2; background: #fff; color: var(--mq-fg-1); }
#pricing.pricing-v2 .pv-inner { max-width: 1240px; margin: 0 auto; padding: 44px 24px 50px; }
#pricing.pricing-v2 .pv-band.pv-tint { background: linear-gradient(180deg, #e9e4fb 0%, #ddd5f4 100%); }
#pricing.pricing-v2 .pv-band.pv-tint .pv-inner { padding-top: 70px; padding-bottom: 54px; }

/* reusable wave divider — fill color set per-SVG to match the NEXT block */
#pricing.pricing-v2 .pv-wave2 { display: block; width: 100%; height: 70px; margin-bottom: -1px; position: relative; z-index: 2; }

/* ============ TIERS (from landing) ============ */
#pricing.pricing-v2 .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; position: relative; z-index: 3; }
@media (max-width: 900px) { #pricing.pricing-v2 .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

#pricing.pricing-v2 .tier { background: #fff; border-radius: 24px; padding: 32px 28px; box-shadow: var(--mq-shadow-card); border: 2px solid var(--mq-gray-100); position: relative; display: flex; flex-direction: column; transition: transform .3s var(--mq-ease), box-shadow .3s var(--mq-ease); }
#pricing.pricing-v2 .tier:hover { transform: translateY(-6px); box-shadow: var(--mq-shadow-card-hover); }
#pricing.pricing-v2 .tier.featured { background: var(--mq-gradient-main); color: #fff; border: 0; box-shadow: 0 28px 50px -22px rgba(76, 29, 149, .55), 0 10px 24px -12px rgba(102, 126, 234, .35); transform: scale(1.03); }
#pricing.pricing-v2 .tier.featured:hover { transform: scale(1.03) translateY(-6px); }
@media (max-width: 900px) { #pricing.pricing-v2 .tier.featured, #pricing.pricing-v2 .tier.featured:hover { transform: none; } }
#pricing.pricing-v2 .tier .ribbon { position: absolute; top: 18px; right: 22px; background: var(--mq-gradient-cta); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 12px; border-radius: 9999px; box-shadow: 0 6px 16px rgba(255,149,0,.4); }
#pricing.pricing-v2 .tier .name { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: .8; margin-bottom: 10px; }
#pricing.pricing-v2 .tier .price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; flex-wrap: wrap; }
#pricing.pricing-v2 .tier .price .v { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
#pricing.pricing-v2 .tier .price .p { font-size: 14px; font-weight: 600; opacity: .7; }
#pricing.pricing-v2 .tier .price-note { font-size: 12.5px; font-weight: 700; opacity: .7; min-height: 18px; margin-bottom: 6px; }
#pricing.pricing-v2 .tier.featured .price-note { color: #fde68a; opacity: 1; }
#pricing.pricing-v2 .tier .desc { font-size: 14px; opacity: .8; margin: 8px 0 22px; line-height: 1.5; }
#pricing.pricing-v2 .tier ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
#pricing.pricing-v2 .tier ul li { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
#pricing.pricing-v2 .tier ul li .ck { width: 20px; height: 20px; border-radius: 50%; background: rgba(99,102,241,.14); color: var(--mq-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0; margin-top: 1px; }
#pricing.pricing-v2 .tier.featured ul li .ck { background: rgba(255,255,255,.25); color: #fff; }

#pricing.pricing-v2 .btn { font-family: inherit; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; line-height: 1; border: 0; cursor: pointer; height: 52px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s var(--mq-ease), box-shadow .15s var(--mq-ease); }
#pricing.pricing-v2 .btn:hover { transform: translateY(-2px); }
#pricing.pricing-v2 .btn:active { transform: translateY(0); }
#pricing.pricing-v2 .btn-cta { background: var(--mq-gradient-cta); color: #fff; box-shadow: 0 8px 24px rgba(255,149,0,.45); }
#pricing.pricing-v2 .btn-cta:hover { box-shadow: 0 14px 32px rgba(255,149,0,.55); }
#pricing.pricing-v2 .btn-purple { background: var(--mq-gradient-button); color: #fff; box-shadow: 0 8px 24px rgba(102,126,234,.45); }
#pricing.pricing-v2 .btn-white { background: #fff; color: var(--mq-primary-dark); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
#pricing.pricing-v2 .tier .btn { width: 100%; }

/* ============ TOP-UP PACKS (honours dashboard 💎 economy) ============ */
#pricing.pricing-v2 .topup { margin-top: 0; }
#pricing.pricing-v2 .sec-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
#pricing.pricing-v2 .sec-head .eyebrow.light { background: rgba(99,102,241,.10); color: var(--mq-primary-dark); border: 0; }
#pricing.pricing-v2 .sec-head h2 { margin: 16px 0 10px; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
#pricing.pricing-v2 .sec-head p { margin: 0; color: var(--mq-gray-500); font-size: 15.5px; line-height: 1.55; }
#pricing.pricing-v2 .sec-head p .gem-inline { display:inline-flex; width:18px; height:18px; border-radius:5px; align-items:center; justify-content:center; background:linear-gradient(135deg,#fb923c,#f97316); color:#fff; font-size:9px; vertical-align:-3px; margin: 0 1px; }

#pricing.pricing-v2 .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 920px; margin: 0 auto; }
@media (max-width: 760px) { #pricing.pricing-v2 .packs { grid-template-columns: 1fr; max-width: 420px; } }
#pricing.pricing-v2 .pack { position: relative; background: var(--mq-gray-50); border: 2px solid var(--mq-gray-200); border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; transition: transform .25s var(--mq-ease), box-shadow .25s var(--mq-ease), border-color .2s; }
#pricing.pricing-v2 .pack:hover { transform: translateY(-5px); box-shadow: var(--mq-shadow-card-hover); border-color: var(--mq-primary-light); }
#pricing.pricing-v2 .pack.best { border-color: var(--mq-orange); background: linear-gradient(180deg,#fffdf8,#fff7ed); box-shadow: 0 14px 36px rgba(255,149,0,.18); }
#pricing.pricing-v2 .pack .pack-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--mq-gradient-cta); color:#fff; font-size: 10.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 9999px; box-shadow: 0 6px 16px rgba(255,149,0,.4); white-space: nowrap; }
#pricing.pricing-v2 .pack .gem-stack { font-size: 34px; line-height: 1; margin-bottom: 8px; }
#pricing.pricing-v2 .pack .count { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
#pricing.pricing-v2 .pack .count small { font-size: 14px; font-weight: 700; color: var(--mq-gray-500); margin-left: 2px; }
#pricing.pricing-v2 .pack .per { font-size: 12.5px; font-weight: 700; color: var(--mq-gray-400); margin-top: 6px; }
#pricing.pricing-v2 .pack .pack-price { margin: 12px 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--mq-fg-1); }
#pricing.pricing-v2 .pack .pack-old { font-size: 13px; font-weight: 700; color: var(--mq-gray-400); text-decoration: line-through; margin-bottom: 10px; min-height: 16px; }
#pricing.pricing-v2 .pack .btn { width: 100%; height: 46px; font-size: 14px; }
#pricing.pricing-v2 .pack .btn-ghost-p { background: #fff; color: var(--mq-primary-dark); border: 1.5px solid var(--mq-gray-200); box-shadow: none; }
#pricing.pricing-v2 .pack .btn-ghost-p:hover { border-color: var(--mq-primary-light); box-shadow: 0 6px 16px rgba(99,102,241,.15); }

/* ============ COMPARISON / TRUST STRIP ============ */
#pricing.pricing-v2 .trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 44px auto 0; max-width: 920px; }
#pricing.pricing-v2 .trust .t { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; background: var(--mq-gray-50); border: 1px solid var(--mq-gray-200); border-radius: 9999px; font-size: 13.5px; font-weight: 700; color: var(--mq-gray-700); }
#pricing.pricing-v2 .trust .t .ic { font-size: 15px; }

/* ============ FAQ ============ */
#pricing.pricing-v2 .faq { max-width: 760px; margin: 0 auto; }
#pricing.pricing-v2 .faq-item summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--mq-fg-1); }
#pricing.pricing-v2 .faq-item summary::-webkit-details-marker { display: none; }
#pricing.pricing-v2 .faq-item summary .chev { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--mq-gray-100); display: inline-flex; align-items: center; justify-content: center; color: var(--mq-primary-dark); font-size: 16px; font-weight: 900; transition: transform .25s var(--mq-ease), background .2s; }
#pricing.pricing-v2 .faq-item[open] summary .chev { transform: rotate(45deg); background: var(--mq-primary); color: #fff; }
#pricing.pricing-v2 .faq-item .a { padding: 0 24px 24px; color: var(--mq-gray-600); font-size: 15px; line-height: 1.6; max-width: 64ch; }

/* ============ FINAL CTA (purple band) ============ */
#pricing.pricing-v2 .final { position: relative; z-index: 2; background: var(--mq-gradient-main); color: #fff; overflow: hidden; isolation: isolate; }
#pricing.pricing-v2 .final .pv-wave-top { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; z-index: 1; display: block; }
#pricing.pricing-v2 .final::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(255,149,0,.25), transparent 45%), radial-gradient(circle at 12% 90%, rgba(236,72,153,.25), transparent 45%); pointer-events:none; }
#pricing.pricing-v2 .final-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 88px 24px 80px; text-align: center; }
#pricing.pricing-v2 .final-inner h2 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.06; margin: 16px 0 14px; text-wrap: balance; }
#pricing.pricing-v2 .final-inner p { font-size: 1.1rem; color: rgba(255,255,255,.85); margin: 0 0 30px; }
#pricing.pricing-v2 .final-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============ ENTRANCE ============ */
@media (prefers-reduced-motion: no-preference) {
  #pricing.pricing-v2 .anim { animation: pricingFadeUp .6s var(--mq-ease-out) both; }
  #pricing.pricing-v2 .d1 { animation-delay: .05s; } #pricing.pricing-v2 .d2 { animation-delay: .12s; } #pricing.pricing-v2 .d3 { animation-delay: .19s; }
  #pricing.pricing-v2 .d4 { animation-delay: .26s; } #pricing.pricing-v2 .d5 { animation-delay: .33s; }
  @keyframes pricingFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  #pricing.pricing-v2 .pv-hero { padding-top: 44px; }
}