:root {
  /* Brand — gold and blue sampled from the Securemedy logo */
  --color-navy: #061b3a;
  --color-navy-dark: #031329;
  --color-navy-700: #0b2a57;
  --color-navy-600: #12366e;
  --color-blue: #0409e4;
  --color-blue-soft: #e8ecff;
  --color-gold: #edbb00;
  --color-gold-hover: #f7c923;
  --color-gold-ink: #8a6700; /* gold that passes AA as text on white */
  --color-white: #ffffff;
  --color-light: #f5f7fa;
  --color-light-blue: #eef3fa;
  --color-line: #e3e8f0;
  --color-line-dark: rgba(255, 255, 255, 0.14);

  --color-text: #0b1f3f;
  --color-text-muted: #56627a;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #c3cde0;

  /* Type */
  --font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-nav: 0.875rem;
  --fs-small: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: 1.0625rem;
  --fs-card-title: 1.0625rem;
  --fs-h2: clamp(1.625rem, 1.1rem + 1.9vw, 2.625rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --section-padding: clamp(3.5rem, 2.4rem + 3.8vw, 6rem);

  --container-width: 1240px;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
  /* Distance from viewport edge to container content, for full-bleed split layouts */
  --edge: max(var(--gutter), calc((100vw - var(--container-width)) / 2 + var(--gutter)));

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 27, 58, 0.06), 0 2px 8px rgba(6, 27, 58, 0.05);
  --shadow-md: 0 6px 20px rgba(6, 27, 58, 0.09);
  --shadow-lg: 0 18px 40px rgba(6, 27, 58, 0.16);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 300ms;
  --dur-slow: 500ms;

  /* Header: top row (logo + actions) and the navy menu bar. "compact" is the sticky height while
     scrolling, used to offset in-page anchors and sticky panels. */
  --header-top-height: 96px;
  --header-top-compact: 66px;
  --header-bar-height: 52px;
  --header-height: calc(var(--header-top-height) + var(--header-bar-height));
  --header-height-compact: calc(var(--header-top-compact) + var(--header-bar-height));
  --utility-height: 34px;
  --z-header: 50;
  --z-overlay: 90;
  --z-modal: 100;
}

/* Below 1160 px the menu bar is replaced by the menu button: the header is one row. */
@media (max-width: 1159px) {
  :root {
    --header-top-height: 80px;
    --header-top-compact: 68px;
    --header-bar-height: 0px;
  }
}

@media (max-width: 479px) {
  :root {
    --header-top-height: 68px;
    --header-top-compact: 60px;
  }
}