/* ==========================================================================
   Page — Pricing (pricing.html)
   Hero with the Free and Plus plan cards, billing features, FAQ and CTA.
   ========================================================================== */

/* ---------- Header ---------- */
.pricing-hero {
  position: relative;
  padding: calc(var(--nav-h) + 72px) 0 32px;
  background: linear-gradient(180deg, var(--primary-50) 0%, #fff 420px);
  text-align: center;
}
/* Soft drifting aurora behind the heading */
.pricing-hero { position: relative; isolation: isolate; }
.pricing-hero::before {
  content: "";
  position: absolute; inset: -30% 0 20% 0;
  z-index: -1;
  background:
    radial-gradient(36% 50% at 20% 30%, rgba(99, 102, 241, .20), transparent 70%),
    radial-gradient(30% 46% at 82% 20%, rgba(192, 38, 211, .14), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: aurora-drift 20s ease-in-out infinite;
}

.pricing-hero__title {
  max-width: 760px;
  margin: 20px auto 0;
  font-size: clamp(2.4rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink);
}
.pricing-hero__text { max-width: 600px; margin: 18px auto 0; font-size: 18px; color: var(--muted); }

/* ---------- Plan cards (components/price-card.css) ---------- */
.pricing-plans { max-width: 1080px; margin: 56px auto 0; text-align: left; }

.pricing-login { margin-top: 24px; font-size: 14px; color: var(--muted); }
.pricing-login__link { font-weight: 600; color: var(--primary); }
.pricing-login__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Reassurance row under the cards */
.plan-assure {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}
.plan-assure__item { display: inline-flex; align-items: center; gap: 8px; }
.plan-assure__item svg { width: 16px; height: 16px; color: var(--primary); }

/* ---------- Sections (tighter than the landing page) ---------- */
.pricing-section { padding: 96px 0; }
.pricing-section--cta { padding-top: 0; }

/* ---------- FAQ ---------- */
.pricing-faq { max-width: 780px; margin: 0 auto; }
.pricing-faq__more { margin-top: 24px; font-size: 15px; text-align: center; color: var(--muted); }
.pricing-faq__link { font-weight: 600; color: var(--primary); }
.pricing-faq__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .pricing-hero { padding-top: calc(var(--nav-h) + 44px); }
  .pricing-hero__text { font-size: 16px; }
  .pricing-plans { margin-top: 40px; }
  .plan-assure { flex-direction: column; align-items: flex-start; max-width: 560px; margin-inline: auto; }
  .pricing-section { padding: 72px 0; }
  .pricing-section--cta { padding-top: 0; }
}