:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #2563eb;
  --color-primary-600: #1d4ed8;
  --color-primary-700: #1e40af;
  --color-primary-800: #1e3a8a;
  --color-primary-900: #0f255f;
  --color-accent-400: #67e8f9;
  --color-accent-500: #22d3ee;
  --color-accent-600: #0891b2;
}

body {
  background: linear-gradient(180deg, #eef6ff 0, #fff 32%, #e0f2fe 100%);
}

.header {
  background: #fffffff0;
  border-bottom: 1px solid #93c5fd55;
  box-shadow: 0 14px 36px #2563eb14;
}

.nav-link:hover,
.nav-link--active {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
}

.header-cta,
.btn--primary,
.plan-button--featured,
.subpage-cta--featured,
.annual-cta,
.monthly-cta {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px #2563eb30, 0 10px 24px #06b6d426;
}

.header-cta:hover,
.btn--primary:hover,
.plan-button--featured:hover,
.subpage-cta--featured:hover,
.annual-cta:hover,
.monthly-cta:hover {
  background: linear-gradient(135deg, #38bdf8, #2563eb, #1e40af) !important;
  color: #fff !important;
}

/* Shared header typography across the main site and checkout. */
.header .nav-link {
  font-family: var(--font-outfit), var(--font-inter), sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.header .header-cta {
  font-family: var(--font-outfit), var(--font-inter), sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.btn--accent {
  background: linear-gradient(135deg, #67e8f9, #2563eb);
  color: #ffffff;
  box-shadow: 0 14px 28px #2563eb33;
}

.btn--outline {
  background: #fff8;
  border-color: #2563eb;
  color: #1d4ed8;
}

.btn--outline:hover {
  background: #2563eb;
  color: #fff;
}

.hero,
.subpage-hero,
.product-hero,
.legal-hero,
.blog-hero,
.blog-article-hero {
  background:
    radial-gradient(circle at 12% 18%, #38bdf855 0 12%, #0000 30%),
    radial-gradient(circle at 92% 8%, #2563eb3d 0 14%, #0000 34%),
    linear-gradient(135deg, #eff6ff 0%, #fff 42%, #dbeafe 100%);
}

.text-gradient,
.plan-price,
.price-hero {
  background: linear-gradient(90deg, #1d4ed8, #06b6d4);
  color: #0000 !important;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-kicker,
.section-eyebrow,
.testimonial-badge,
.blog-tag-filter-item--active,
.blog-tag-filter-item:hover {
  background: #dbeafe;
  border: 1px solid #93c5fd80;
  color: #1d4ed8;
  font-weight: 800;
}

.hero-image-frame {
  background: linear-gradient(135deg, #2563eb60, #38bdf84f, #1e40af55);
  box-shadow: 0 34px 90px #2563eb24;
}

.plan-card {
  border-color: #93c5fd66;
  box-shadow: 0 22px 48px #2563eb1c;
}

.plan-card--featured {
  border-color: #2563eb;
  box-shadow: 0 28px 72px #2563eb2b, 0 20px 52px #06b6d422;
}

#planos .plans-grid {
  max-width: 1180px;
}

@media (min-width: 761px) {
  #planos .plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #planos .plan-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #planos .feature-list,
  #planos .feature-list--spacious {
    grid-template-columns: 1fr;
  }
}

.plan-card--featured .plan-ribbon,
.plan-badge,
.product-kicker,
.annual-product-ribbon {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
}

.plan-saving,
.price-badge,
.annual-saving-badge {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #047857;
}

.section--soft,
.monthly-faq,
.annual-faq,
.plans-features,
.home-blog-section {
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
}

.timeline-card,
.info-card,
.step-card,
.faq-item,
.blog-card,
.blog-spotlight-primary,
.plans-feature-item,
.featured-testimonial,
.testimonial-card {
  border-color: #93c5fd40;
  box-shadow: 0 18px 38px #2563eb10;
}

.feature-icon,
.timeline-icon,
.info-card-icon,
.plans-feature-icon,
.download-icon,
.compatibility-icon {
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  color: #1d4ed8;
}

.final-cta,
.annual-annual-cta,
.monthly-annual-cta {
  background: linear-gradient(135deg, #0f255f 0%, #1d4ed8 52%, #06b6d4 120%) !important;
}

.footer {
  background: linear-gradient(135deg, #071a31, #10255f 62%, #0e7490);
  color: #dbeafe;
}

.footer h3 {
  color: #e0f2fe;
}

.footer a:hover {
  color: #67e8f9;
}