/* ============================================================================
   SellingDubai — Pricing / Upgrade Premium Layer  (v2 — deep type + spacing)
   Additive, loads after pricing.css. Overhauls hero/price typography, spacing,
   featured-tier emphasis, FAQ. Revert = remove the one <link>.
   ========================================================================== */

/* ====== TYPOGRAPHY ===================================================== */
.hero h1, .hero h2, .hero-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(32px, 5vw, 48px) !important; font-weight: 800 !important;
  letter-spacing: -0.03em !important; line-height: 1.05 !important;
}
.plan-name { font-family: 'Manrope', sans-serif !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.price-amount {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(44px, 7vw, 60px) !important; font-weight: 800 !important;
  letter-spacing: -0.04em !important; line-height: 1 !important;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.72));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.price-currency, .price-period { color: rgba(255,255,255,0.5) !important; font-weight: 600 !important; }
.faq-title { font-family: 'Manrope', sans-serif !important; font-size: clamp(26px, 4vw, 34px) !important; font-weight: 800 !important; letter-spacing: -0.025em !important; }
.faq-question { font-size: 15px !important; font-weight: 600 !important; }
.features-list li, .features-list { font-size: 15px !important; line-height: 1.7 !important; }
.plan-description { font-size: 14px !important; color: rgba(255,255,255,0.55) !important; }
.logo { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em; }

/* ====== SPACING ======================================================== */
.pricing-card { padding: 30px !important; }
.pricing-grid { gap: 20px !important; }
.hero { padding-bottom: 8px !important; }
.faq-item { padding: 18px 20px !important; }
.enterprise-card { padding: 28px !important; }

/* ====== TIER CARDS ===================================================== */
.pricing-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 46%, transparent),
    var(--color-surface, #111) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -28px rgba(0,0,0,0.85);
  transition: transform 0.2s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)), border-color 0.2s ease, box-shadow 0.2s ease;
  animation: fadeUp 0.5s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
.pricing-card:nth-child(2) { animation-delay: 0.06s; } .pricing-card:nth-child(3) { animation-delay: 0.12s; }
.pricing-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18) !important; }
@media (prefers-reduced-motion: reduce) { .pricing-card { animation: none; } }

/* Featured tier — highlight the card carrying the badge */
.pricing-card:has(.featured-badge) {
  border-color: rgba(77,101,255,0.55) !important;
  background:
    linear-gradient(180deg, rgba(77,101,255,0.15), rgba(77,101,255,0.02) 40%, transparent),
    var(--color-surface, #111) !important;
  box-shadow: 0 0 0 1px rgba(77,101,255,0.28), 0 28px 64px -30px rgba(17,39,210,0.65) !important;
}
.featured-badge {
  background: linear-gradient(180deg, var(--color-brand-light, #4d65ff), var(--color-brand, #1127d2)) !important;
  color: #fff !important; border: none !important; font-weight: 800 !important; letter-spacing: 0.1em !important;
  box-shadow: 0 6px 18px -8px rgba(17,39,210,0.9);
}

/* ====== CTAs =========================================================== */
.cta-button { padding: 15px 20px !important; border-radius: 14px !important; font-size: 15px !important; font-weight: 700 !important; }
.cta-upgrade {
  background: linear-gradient(180deg, var(--color-brand-light, #4d65ff), var(--color-brand, #1127d2)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 8px 22px -10px rgba(17,39,210,0.95), 0 1px 0 rgba(255,255,255,0.15) inset;
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.cta-upgrade:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px -12px rgba(17,39,210,1); }
.cta-free { border: 1px solid rgba(255,255,255,0.16) !important; }
.cta-free:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.28) !important; }

/* "Coming Soon" — dim the whole feature, but style ONLY the small label.
   (Do NOT uppercase/shrink the wrapper — it holds the feature NAME too.) */
.feature-coming-soon { opacity: 0.7 !important; color: rgba(255,255,255,0.5) !important; }
.feature-coming-soon .coming-soon-label {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4) !important;
}

/* ====== TOGGLE / FAQ / ENTERPRISE ===================================== */
.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(180deg, var(--color-brand-light, #4d65ff), var(--color-brand, #1127d2)) !important;
  box-shadow: 0 0 12px -2px rgba(77,101,255,0.7);
}
.yearly-badge { background: rgba(37,211,102,0.14) !important; color: #4ade80 !important; border: 1px solid rgba(37,211,102,0.25) !important; border-radius: 100px !important; }
.faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent), rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.faq-item:hover { border-color: rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.035) !important; }
.faq-icon { color: var(--color-brand-light, #4d65ff) !important; }
.enterprise-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--color-surface, #111) !important;
  border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 22px !important;
  box-shadow: 0 14px 40px -26px rgba(0,0,0,0.85);
}
.btn-enterprise { border: 1px solid rgba(255,255,255,0.16) !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.btn-enterprise:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.28) !important; transform: translateY(-1px); }

/* ====== HERO RHYTHM — kill the dead vertical void ====================== */
.hero { padding-top: 44px !important; padding-bottom: 14px !important; }
.billing-toggle-container { margin-bottom: 26px !important; }
.pricing-grid { margin-top: 24px !important; margin-bottom: 44px !important; }

/* ====== MOBILE — gutters + tighter rhythm ============================== */
@media (max-width: 768px) {
  .pricing-card { padding: 24px !important; }
  .pricing-grid { gap: 14px !important; margin-top: 16px !important; }
}
@media (max-width: 600px) {
  /* Consistent side gutters so nothing bleeds to the screen edge */
  .container { padding-left: 22px !important; padding-right: 22px !important; }
  .hero { padding: 30px 22px 8px !important; }
  .faq-section { padding-left: 22px !important; padding-right: 22px !important; }
  .footer { padding-left: 22px !important; padding-right: 22px !important; }
  /* Title sized to sit comfortably within the gutters */
  .hero h1 { font-size: 28px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
  .hero p { font-size: 15px !important; margin-bottom: 16px !important; }
  .faq-title { font-size: 26px !important; }
  .billing-toggle-container { margin-bottom: 18px !important; }
}