/* ========================================================================
   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, #F6F7F2 0px, #F6F7F2 96px, #f6f7fb 210px, #F6F7F2 340px)
    no-repeat, #F6F7F2;
  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: #475569; 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; }
/* The security page's data-residency and AI-processing blocks run to
   several paragraphs. Every other sp-block is a single paragraph, so this
   only ever applies where one is actually followed by another. */
.sp-block p + p { margin-top: 12px; }

/* -- Swiss credentials ------------------------------------------------- */

/* Official artwork, used as issued. The page ground is already white, which is
   what these black marks need, so they sit directly on it — a card here would
   be a card for its own sake and would read as a certification badge wall,
   which is precisely what these are not.

   Width is set and height left to follow, so each keeps its own aspect ratio
   (they differ: 1.309 and 1.406). The <img> tags carry matching width/height
   attributes so the row reserves its space before the files load. */
.sp-swiss-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;                 /* generous: these marks have mandated clear space */
  margin: 26px 0 2px;
}
.sp-swiss-mark {
  display: block;
  width: 132px;
  height: auto;
}

.sp-swiss-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}
.sp-swiss-points li {
  position: relative;
  padding-left: 16px;
  font: 500 14px/1.5 Inter, sans-serif;
  color: #4b5468;
}
/* The same short rule the outcomes list uses, rather than a tick: a tick reads
   as "certified", and these are origin labels. */
.sp-swiss-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1.5px;
  background: #cbd5e1;
}

@media (max-width: 560px) {
  .sp-swiss-marks { gap: 32px; }
  .sp-swiss-mark { width: 112px; }
  .sp-swiss-points { gap: 8px; flex-direction: column; }
}

.sp-cta {
  margin-top: 52px; background: linear-gradient(155deg, #241d63 0%, #101828 70%);
  border-radius: 16px; 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 {
  /* Graphite rather than the bright blue it used to be: this is a secondary
     CTA on a quiet page, and the accent blue was pulling more attention than
     the action deserves. Same family as the navy primary buttons.

     This is the light-ground version, used on the report page. The dark
     .sp-cta panel overrides it below — the two grounds need opposite
     treatments, and styling only one of them broke the other. */
  border: 1px solid rgba(16,24,40,0.10);
  cursor: pointer;
  background: linear-gradient(180deg, #4A5462 0%, #344054 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
  border-radius: 8px;
  padding: 13px 24px;
  /* It sat flush against the paragraph above it. */
  margin-top: 20px;
  font: 600 15px/1 Poppins, Inter, sans-serif;
  transition: background 0.18s ease, transform 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: linear-gradient(180deg, #3A4452 0%, #1D2939 100%);
  transform: translateY(-1px);
}

/* On the dark CTA panel the graphite fill came to 1.82 against the ground and
   the rgba(16,24,40,.10) border drew nothing at all, so the button read as a
   smudge. Secondary still, but drawn the way a secondary button is drawn on a
   dark surface: light edge, lifted fill. */
.sp-cta .sp-btn {
  border-color: rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  box-shadow: none;
}
.sp-cta .sp-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.13) 100%);
  border-color: rgba(255,255,255,0.42);
}
.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: #3F7D4E; 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; }
  .sp-btn:hover { transform: 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, #F6F7F2 0px, #F6F7F2 96px, #f6f7fb 210px, #ffffff 320px)
    no-repeat, #ffffff;
}
.sp-back--wide { max-width: 1400px; margin: 0 auto; padding: 0 2rem 56px; }
@media (max-width: 620px) {
  .sp-back--wide { padding: 0 1.25rem 40px; }
}