/* ========================================================================
   Standalone sub-pages (security, pricing, ROI calculator).
   Reuses the homepage tokens: Poppins headline / Inter body, indigo accent,
   navy ink, soft grey borders, 16-22px radii.
   ======================================================================== */

/* ==========================================================================
   Reset — identical to the one inlined in the homepage's <style>.
   Without it the sub-pages render in content-box with the UA's default
   margins, so shared components drift: .nav has height:62px plus a 1px
   border, which measured 64px here and 62px on the homepage. Anything that
   loads nav.css must share the homepage's box model.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0; color: #1e2338;
  /* The nav is a white pill designed to float on the hero's tint. On a plain
     background it loses its edge and reads as a rendering fault, so sub-pages
     carry the same band behind the nav and fade into the page ground. */
  background:
    linear-gradient(180deg, #eef1f8 0px, #eef1f8 96px, #f6f7fb 210px, #fbfbfe 340px)
    no-repeat, #fbfbfe;
  font: 400 16px/1.65 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sp { max-width: 820px; margin: 0 auto; padding: 40px 1.5rem 96px; }

.sp-eyebrow {
  font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #FC057C; margin: 0 0 14px;
}
.sp-head h1 {
  font-family: Poppins, sans-serif; font-weight: 700; color: #0f172a;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 16px; text-wrap: balance;
}
.sp-lede { font-size: 17px; line-height: 1.7; color: #56607a; margin: 0 0 26px; max-width: 62ch; }

.sp-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 8px; }
.sp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px/1 Inter, sans-serif; color: #14603f;
  background: #e7f6ee; border: 1px solid #c9ebda; border-radius: 999px; padding: 8px 13px;
}
.sp-badge.is-soon { color: #6b7280; background: #f2f3f7; border-color: #e2e5ee; }

.sp-block { margin-top: 42px; }
.sp-block h2 {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3;
  color: #0f172a; margin: 0 0 10px; letter-spacing: -0.01em;
}
.sp-block p { margin: 0; color: #4b5468; max-width: 68ch; }

.sp-cta {
  margin-top: 52px; background: linear-gradient(155deg, #241d63 0%, #1C1859 70%);
  border-radius: 20px; padding: 32px 34px; color: #fff;
}
.sp-cta h2 {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 21px;
  margin: 0 0 10px; color: #fff; letter-spacing: -0.01em;
}
.sp-cta p { color: #bcbadd; margin: 0 0 20px; max-width: 60ch; font-size: 15px; }
.sp-btn {
  border: 0; cursor: pointer; background: #4f46e5; color: #fff;
  border-radius: 11px; padding: 13px 24px;
  font: 600 15px/1 Poppins, Inter, sans-serif;
  transition: background 0.18s ease;
  /* also used as an <a> to /xx/#demo, so it needs the link resets */
  display: inline-block; text-decoration: none; line-height: 1;
}
.sp-btn:hover { background: #FC057C; }
.sp-btn:focus-visible { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 3px; }

.sp-back { margin-top: 40px; font-size: 14px; }
.sp-back a { color: #5b4fe0; text-decoration: none; }
.sp-back a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .sp { padding: 28px 1.25rem 72px; }
  .sp-cta { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } }

/* ---- pages that carry a full homepage section verbatim ----
   The section keeps its own background and padding, so the page chrome
   must not re-wrap it in the narrow .sp container. */
.sp-body {
  background:
    linear-gradient(180deg, #eef1f8 0px, #eef1f8 96px, #f6f7fb 210px, #ffffff 320px)
    no-repeat, #ffffff;
}
.sp-back--wide { max-width: 1180px; margin: 0 auto; padding: 0 2rem 56px; }
@media (max-width: 620px) {
  .sp-back--wide { padding: 0 1.25rem 40px; }
}