/* MAILsimple marketing site: compact utility layer on top of Bootstrap 5.
   Mirrors the class names used across CCMS marketing pages so copy ports 1:1. */
:root {
  --ms-dark: #0a1020;
  --ms-blue: #2563eb;
  --ms-ink: #1e293b;
  --ms-muted: #64748b;
  --ms-line: #e2e8f0;
}
body { color: var(--ms-ink); }

.page-hero {
  background: radial-gradient(1200px 500px at 20% -10%, rgba(37,99,235,.18), transparent 60%), var(--ms-dark);
  color: #fff;
  padding: 4.5rem 0 3.5rem;
}
.page-hero .display-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.display-title { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .lead { color: rgba(255,255,255,.85); }

.subhero { background: var(--ms-dark); }

.section { padding: 3rem 0; }
.section.pt-0 { padding-top: 0; }

.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--ms-blue); }
.muted { color: var(--ms-muted); }

.card-soft {
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 2px 14px rgba(10,16,32,.05);
}

.list-check { list-style: none; padding-left: 0; margin-bottom: 0; }
.list-check li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.list-check li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--ms-blue); position: absolute; left: 0; top: .15rem; font-size: .8rem;
}

.cta-band { background: var(--ms-dark); color: #fff; border-radius: 18px; padding: 2.5rem; }
.cta-band .muted { color: rgba(255,255,255,.75); }

.badge-coming-soon {
  display: inline-block; background: rgba(37,99,235,.15); color: #93c5fd;
  border: 1px solid rgba(37,99,235,.4); border-radius: 999px;
  padding: .3rem .8rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

.pricing-card { background: var(--ms-dark); color: #fff; }
.pricing-card .kicker, .pricing-card .list-check li { color: #fff; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--ms-blue); color: #fff; font-weight: 800; font-size: 1rem;
  margin-bottom: .9rem;
}

footer.site-footer { background: var(--ms-dark); color: #94a3b8; }
footer.site-footer a { color: #cbd5e1; text-decoration: none; }
footer.site-footer a:hover { color: #fff; }

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 1080;
  background: var(--ms-dark);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}
.cookie-banner-inner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
}
.cookie-banner .cookie-text { flex: 1 1 320px; font-size: .85rem; line-height: 1.4; margin: 0; }
.cookie-banner .cookie-text a { color: #fff; text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .cookie-banner .cookie-actions { width: 100%; }
  .cookie-banner .cookie-actions .btn { flex: 1 1 auto; }
}