/* Brand tokens: navy overlay + light blue accent + clean grey background */

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Color palette — use only these */
  --navy: #0B1F3B;
  --navy-2: #0A2446;
  --lightBlue: #5AA7FF;
  --color-light-blue: var(--lightBlue);
  --bg: #F3F5F7;
  --color-grey-light: #F7F8FA;
  --surface: #FFFFFF;
  --text: #0B1F3B;
  --muted: #475569;
  --border: #E2E8F0;

  /* Radius scale — one scale everywhere */
  --r-lg: 28px;
  --r-md: 18px;
  --r-pill: 999px;

  /* Shadow: subtle only on big panels; small cards use border only */
  --shadow-panel: 0 18px 50px rgba(11, 31, 59, 0.12);

  /* Typography: match hero; H2 40–44px desktop / 30–34px mobile */
  --h1: clamp(2.375rem, 4vw + 1.5rem, 4rem);
  --h2: clamp(1.875rem, 2.5vw + 1.25rem, 2.75rem);
  --body: 1.0625rem;
  --body-line: 1.6;
  --small: 0.92rem;

  /* Layout */
  --section-pad-y: 56px;
  --section-pad-x: 1.25rem;
  --section-gap: clamp(1.75rem, 3vw, 3rem);
  --container-max: 1120px;
  --content-max-line: 60ch;

  /* Page inset: align nav first link with hero card label */
  --page-max: 1120px;
  --page-gutter: clamp(16px, 4vw, 72px);
  --hero-card-left: clamp(8px, 1.2vw, 36px);
  --hero-card-pad-x: 36px;
  --hero-label-left: calc(var(--hero-card-left) + var(--hero-card-pad-x));

  --transition-fast: 0.18s ease-out;
  --transition-med: 0.24s ease-out;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}

.page-title {
  font-family: var(--font-sans);
  font-size: var(--h1);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-subtitle {
  max-width: 40rem;
  color: var(--muted);
  font-size: var(--body);
}

.card {
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem 1.75rem;
}

@media (min-width: 720px) {
  :root {
    --section-pad-y: 80px;
  }
}

.chip {
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.78rem;
}