/* ═══════════════════════════════════════════════════════════
   PRICING PAGE — 10/10 Polish (Task #1579876)
   2026-05-14
   Apple simplicity · Stripe professionalism · Bloomberg trust · Tesla elegance
   Targets: 375px mobile, 1440px desktop
   ═══════════════════════════════════════════════════════════ */

/* ── HERO: off-white + subtle depth instead of flat white ── */
.pr-hero {
  background: linear-gradient(180deg, #F8FFFE 0%, #FFFFFF 100%) !important;
  border-bottom: 1px solid #E5F5EE !important;
  padding: clamp(4rem, 9vw, 6.5rem) 1.5rem clamp(3.5rem, 7vw, 5rem) !important;
}

.pr-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  margin-bottom: 1.1rem !important;
  max-width: 720px !important;
}

.pr-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem) !important;
  max-width: 540px !important;
  color: #374151 !important;
}

/* Toggle: more breathing room below hero text */
.pr-toggle-wrap {
  margin-top: 2.8rem !important;
}

/* Bigger save badge */
.pr-save-global-badge {
  font-size: .78rem !important;
  padding: .3rem .85rem !important;
  letter-spacing: .01em !important;
}

/* Urgency bar: higher up, more visible */
.pr-urgency-bar {
  margin-top: 1.8rem !important;
  max-width: 540px !important;
  font-weight: 700 !important;
}

/* ── PLANS SECTION ── */
.pr-plans-section {
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(.75rem, 2.5vw, 2rem) !important;
  background: #FAFBFA !important;
}

/* Desktop: 5 columns — all plans in one row */
@media (min-width: 1100px) {
  .pr-plans-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    max-width: 1380px !important;
  }
}

/* Tablet sweet spot: 3+2 layout */
@media (min-width: 720px) and (max-width: 1099px) {
  .pr-plans-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    max-width: 960px !important;
  }
}

/* ── PLAN CARDS: premium base ── */
.pr-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E8EDE8 !important;
  border-radius: 20px !important;
  padding: 1.75rem 1.4rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 0 transparent !important;
  transition: transform .22s cubic-bezier(.25,.46,.45,.94),
              box-shadow .22s cubic-bezier(.25,.46,.45,.94) !important;
}

.pr-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.10) !important;
}

/* ── MOST POPULAR (Pro+) — dramatic visual elevation ── */
.pr-card--popular {
  background: #FFFFFF !important;
  border: 2px solid #00875A !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 4px rgba(0,135,90,.08),
    0 8px 32px rgba(0,135,90,.16) !important;
  transform: translateY(-8px) !important;
  z-index: 10 !important;
  padding-top: 2.1rem !important;
}

.pr-card--popular:hover {
  transform: translateY(-14px) !important;
  box-shadow:
    0 0 0 4px rgba(0,135,90,.1),
    0 20px 60px rgba(0,135,90,.22) !important;
}

/* ── AUTOPILOT — elevated with dark accent ── */
.pr-card--autopilot {
  background: #FAFFFE !important;
  border: 2px solid #00875A !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0,135,90,.08) !important;
}

.pr-card--autopilot:hover {
  box-shadow: 0 14px 44px rgba(0,135,90,.15) !important;
  transform: translateY(-6px) !important;
}

/* ── POPULAR BADGE: pill above card ── */
.pr-popular-badge {
  top: -18px !important;
  font-size: .7rem !important;
  padding: .32rem 1.1rem !important;
  letter-spacing: .08em !important;
  box-shadow: 0 4px 16px rgba(0,135,90,.45) !important;
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
}

/* ── PRICE NUMBERS: larger, instantly scannable ── */
.pr-price-num {
  font-size: clamp(2.4rem, 5vw, 3rem) !important;
  letter-spacing: -.04em !important;
}

/* Popular plan price: extra large */
.pr-card--popular .pr-price-num {
  font-size: clamp(2.6rem, 5.5vw, 3.2rem) !important;
  color: #00875A !important;
}

.pr-card-name {
  font-size: clamp(1.4rem, 3vw, 1.7rem) !important;
  margin-bottom: .25rem !important;
}

/* ── CTA BUTTONS: premium with gradient ── */
.pr-cta--emerald {
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
  box-shadow: 0 4px 16px rgba(0,135,90,.3) !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  padding: .85rem 1rem !important;
  min-height: 50px !important;
}

.pr-cta--emerald:hover {
  background: linear-gradient(135deg, #006B4D 0%, #047857 100%) !important;
  box-shadow: 0 8px 28px rgba(0,135,90,.4) !important;
  transform: translateY(-2px) !important;
}

/* Most popular CTA: extra elevated */
.pr-card--popular .pr-cta--emerald {
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
  box-shadow: 0 6px 24px rgba(0,135,90,.45), 0 0 0 2px rgba(0,135,90,.1) !important;
  font-size: .95rem !important;
  padding: .9rem 1rem !important;
  min-height: 52px !important;
}

.pr-card--popular .pr-cta--emerald:hover {
  box-shadow: 0 10px 36px rgba(0,135,90,.5), 0 0 0 3px rgba(0,135,90,.15) !important;
  transform: translateY(-3px) !important;
}

.pr-cta--autopilot {
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
  box-shadow: 0 5px 20px rgba(0,135,90,.35) !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  min-height: 50px !important;
  padding: .85rem 1rem !important;
}

.pr-cta--autopilot:hover {
  background: linear-gradient(135deg, #006B4D 0%, #047857 100%) !important;
  box-shadow: 0 10px 32px rgba(0,135,90,.45) !important;
  transform: translateY(-2px) !important;
}

/* Free card outline CTA */
.pr-cta--outline {
  border: 2px solid #D1D5DB !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
  min-height: 50px !important;
  padding: .85rem 1rem !important;
  color: #374151 !important;
  font-weight: 600 !important;
}

.pr-cta--outline:hover {
  border-color: #00875A !important;
  color: #00875A !important;
  background: #F0FDF4 !important;
  transform: translateY(-2px) !important;
}

/* ── FEATURE LIST: cleaner spacing ── */
.pr-features li {
  font-size: .82rem !important;
  gap: .5rem !important;
  line-height: 1.5 !important;
}

.pr-feature-head {
  font-size: .68rem !important;
  letter-spacing: .1em !important;
  margin: 1rem 0 .6rem !important;
  padding-top: .85rem !important;
  border-top: 1px solid #EDF0ED !important;
  color: #4B5563 !important;
}

/* ── TRUST STRIP: elevated ── */
.pr-trust-strip {
  background: linear-gradient(180deg, #F0FDF8 0%, #F8FFFE 100%) !important;
  border-top: 1px solid #BBF7D0 !important;
  border-bottom: 1px solid #BBF7D0 !important;
  padding: 2rem 1.5rem !important;
}

.pr-trust-badge {
  background: #FFFFFF !important;
  border: 1px solid #BBF7D0 !important;
  box-shadow: 0 1px 4px rgba(0,135,90,.06) !important;
  padding: .38rem 1rem !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
}

/* ── OTP SECTION BACKGROUND ── */
.pr-otp-section {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
}

.pr-otp-card {
  border-radius: 18px !important;
  border: 1.5px solid #E8EDE8 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.pr-otp-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.09) !important;
}

.pr-otp-cta {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
  box-shadow: 0 2px 10px rgba(0,135,90,.2) !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .83rem !important;
  padding: .65rem .8rem !important;
}

.pr-otp-cta:hover {
  background: linear-gradient(135deg, #006B4D 0%, #047857 100%) !important;
  box-shadow: 0 5px 18px rgba(0,135,90,.3) !important;
}

/* ── COMPARISON TABLE ── */
.pr-compare-section {
  background: #FAFBFA !important;
  border-top: 1px solid #E5E7EB !important;
}

.pr-compare-wrap {
  border-radius: 18px !important;
  border: 1.5px solid #E5E7EB !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
}

.pr-compare-table thead tr {
  background: #F0FDF8 !important;
  border-bottom: 2px solid #D1FAE5 !important;
}

.pr-compare-table th.th-popular {
  background: linear-gradient(180deg, #F0FDF8 0%, #E6F9F3 100%) !important;
}

/* ── FAQ SECTION: cleaner ── */
.pr-faq-section {
  background: #FFFFFF !important;
}

.pr-faq-q {
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 1.25rem 0 !important;
}

/* ── FINAL CTA: bold, not plain white ── */
.pr-final-cta {
  background: linear-gradient(180deg, #F0FDF8 0%, #E6F9F3 100%) !important;
  border-top: 1px solid #BBF7D0 !important;
}

.pr-final-cta h2 {
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
}

.pr-final-cta-btn {
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
  box-shadow: 0 6px 28px rgba(0,135,90,.4) !important;
  padding: 1rem 2.8rem !important;
  font-size: 1.05rem !important;
  border-radius: 100px !important;
}

.pr-final-cta-btn:hover {
  background: linear-gradient(135deg, #006B4D 0%, #047857 100%) !important;
  box-shadow: 0 12px 40px rgba(0,135,90,.5) !important;
  transform: translateY(-3px) !important;
}

/* ── SAVINGS ROW PILL ── */
.pr-savings-row {
  background: linear-gradient(135deg, #E6F9F3 0%, #D1FAE5 100%) !important;
  font-size: .72rem !important;
  padding: .28rem .75rem !important;
  border-radius: 100px !important;
  display: inline-block !important;
  margin-top: .4rem !important;
  text-align: center !important;
}

/* Testimonials: slightly larger */
.pr-testimonial {
  font-size: .74rem !important;
  border-radius: 10px !important;
  padding: .6rem .8rem !important;
  border-left: 3px solid #00875A !important;
}

/* Upgrade count: live feel */
.pr-upgrade-count {
  font-size: .75rem !important;
  color: #374151 !important;
}

/* ═══════════════════════════════════════
   MOBILE 375px REFINEMENTS
   ═══════════════════════════════════════ */

@media (max-width: 767px) {
  /* Reset the popular card elevation on mobile — stacked doesn't need Y offset */
  .pr-card--popular {
    transform: none !important;
  }
  .pr-card--popular:hover {
    transform: translateY(-4px) !important;
  }

  /* Bigger price on mobile for scannability */
  .pr-price-num {
    font-size: 2.4rem !important;
  }

  /* Full-width buttons, thumb-friendly */
  .pr-cta,
  .pr-cta--emerald,
  .pr-cta--autopilot,
  .pr-cta--outline {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
  }

  /* Cards breathe on mobile */
  .pr-card {
    padding: 1.5rem 1.1rem 1.3rem !important;
    border-radius: 16px !important;
  }

  /* Hero is tighter on mobile */
  .pr-hero {
    padding: 3rem 1.25rem 2.5rem !important;
  }

  .pr-hero h1 {
    font-size: clamp(2.1rem, 9vw, 2.6rem) !important;
  }

  /* Trust badges scroll comfortably */
  .pr-trust-badges {
    gap: .6rem !important;
  }
  .pr-trust-badge {
    font-size: .7rem !important;
    padding: .32rem .7rem !important;
  }

  /* FAQ readable on mobile */
  .pr-faq-q {
    font-size: .95rem !important;
  }

  /* Comparison table hint visible on mobile */
  .pr-compare-scroll-hint {
    display: block !important;
  }

  /* Plans grid: single column, full width */
  .pr-plans-grid {
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
    max-width: 100% !important;
  }

  /* Plan section background on mobile */
  .pr-plans-section {
    padding: 2.5rem 1rem !important;
  }
}

@media (max-width: 480px) {
  /* OTP grid: single column below 480px */
  .pr-otp-grid {
    grid-template-columns: 1fr !important;
  }
  .pr-otp-grid--2 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════
   DESKTOP 1440px REFINEMENTS
   ═══════════════════════════════════════ */

@media (min-width: 1200px) {
  /* Plans section: more vertical breathing */
  .pr-plans-section {
    padding: 5rem 2rem 5.5rem !important;
  }

  /* Hero: big and bold */
  .pr-hero {
    padding: 6rem 2rem 5rem !important;
  }

  /* Slightly larger card text on wide screens */
  .pr-features li {
    font-size: .85rem !important;
  }

  /* Pricing disclaimer alignment */
  .sr-pricing-disclaimer {
    margin-top: 1.5rem !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════
   BILLING TOGGLE: cleaner look
   ═══════════════════════════════════════ */

.pr-toggle-label {
  font-size: .92rem !important;
  font-weight: 600 !important;
}

.pr-toggle-label.active {
  font-weight: 800 !important;
}

/* Annual nudge: clear call to action */
.pr-annual-nudge {
  font-size: .72rem !important;
  color: #059669 !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════
   SECTION HEADERS: consistent rhythm
   ═══════════════════════════════════════ */

.pr-section-title {
  font-size: clamp(1.75rem, 3.8vw, 2.6rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1.08 !important;
}

.pr-section-eyebrow {
  font-size: .75rem !important;
  letter-spacing: .14em !important;
  color: #00875A !important;
}

/* ═══════════════════════════════════════
   LOSS FRAMES: warmer amber
   ═══════════════════════════════════════ */

.pr-loss-frame {
  font-size: .72rem !important;
  line-height: 1.55 !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════
   REFERRAL SECTION POLISH
   ═══════════════════════════════════════ */

.pr-referral-section {
  background: linear-gradient(180deg, #F0FDF8 0%, #E6F9F3 100%) !important;
  border-top: 1px solid #BBF7D0 !important;
  border-bottom: 1px solid #BBF7D0 !important;
  padding: 3.5rem 1.5rem !important;
}

.pr-referral-cta {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #00875A 0%, #059669 100%) !important;
  box-shadow: 0 4px 16px rgba(0,135,90,.3) !important;
  padding: 14px 28px !important;
}

.pr-referral-cta:hover {
  background: linear-gradient(135deg, #006B4D 0%, #047857 100%) !important;
  box-shadow: 0 8px 24px rgba(0,135,90,.4) !important;
  transform: translateY(-2px) !important;
}