:root {
  /* #556ee6 (frontend/portal's Themesbrand blue) measures ~4.4:1 on white —
     just under WCAG AA's 4.5:1 for normal text, confirmed by an axe-core
     pass against this page (docs/SPEC.md §33.4/§33.5). Darkened to a value
     that clears AA (~6.6:1) for anywhere it's used as text/icon color; the
     original stays available as --brand-accent for backgrounds/soft fills,
     where contrast against the page (not against the accent itself) is what
     matters. */
  --brand-primary: #3f52c1;
  --brand-primary-dark: #33429e;
  --brand-accent: #556ee6;
  --brand-ink: #1a2138;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--brand-ink);
}

.brand-mark { letter-spacing: -0.02em; }

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.text-primary { color: var(--brand-primary) !important; }
.bg-primary-soft { background-color: rgba(85, 110, 230, 0.08); }

.navbar .nav-link.active { color: var(--brand-primary); font-weight: 600; }

.hero {
  background: linear-gradient(180deg, rgba(85,110,230,0.08) 0%, rgba(255,255,255,0) 60%);
  padding: 5rem 0 4rem;
}

.card-feature {
  border: 1px solid #eaecf4;
  border-radius: 0.75rem;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.card-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.5rem rgba(26, 33, 56, 0.08);
}

.card-plan {
  border: 1px solid #eaecf4;
  border-radius: 0.75rem;
  height: 100%;
}
.card-plan.is-highlight {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 0.75rem 1.5rem rgba(85, 110, 230, 0.15);
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-primary);
}

.footer-link { color: #adb5bd; text-decoration: none; }
.footer-link:hover { color: #fff; }

/* Bootstrap's .text-secondary/.text-primary utilities aren't tuned for a
   dark background — confirmed by axe-core (docs/SPEC.md §33.5): Bootstrap's
   default #6c757d measures ~3.3:1 on this footer's #212529, and even
   --brand-primary's AA-on-white shade (§ above) drops to ~2.3:1 here. #adb5bd
   (already proven at ~7.4:1 via .footer-link) and --brand-accent (the
   original, lighter brand blue) both clear AA on this specific background. */
footer.bg-dark .text-secondary { color: #adb5bd !important; }
footer.bg-dark .text-primary { color: var(--brand-accent) !important; }

/* The supplied mark's dark-navy strokes read almost invisibly on this dark
   footer (confirmed visually, not just by contrast math) — a small white
   chip guarantees legibility regardless of the mark's own color mix. */
.footer-mark-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0.375rem;
  padding: 0.25rem;
  line-height: 0;
}

.cta-band {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #7b8ff0 100%);
  border-radius: 1rem;
}

.logo-strip img, .logo-strip span {
  opacity: 0.6;
  filter: grayscale(100%);
}

.comparison-table th, .comparison-table td { vertical-align: middle; }

/* Rendered markdown blog content (docs/SPEC.md §33.9) */
.blog-content { font-size: 1.05rem; line-height: 1.75; color: var(--brand-ink); }
.blog-content h2 { font-weight: 700; font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 1rem; }
.blog-content h3 { font-weight: 700; font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.blog-content p { margin-bottom: 1.25rem; color: #3a4257; }
.blog-content ul, .blog-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.blog-content li { margin-bottom: 0.5rem; color: #3a4257; }
.blog-content li strong { color: var(--brand-ink); }
.blog-content a { color: var(--brand-primary); }
.blog-content blockquote { border-left: 3px solid var(--brand-primary); padding-left: 1rem; color: #5a6178; font-style: italic; }
.blog-content code { background: #f4f5fa; padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.9em; }

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 2000;
}
.skip-link:focus { top: 0; }