/* SafeAhead — marketing site.
   Values are lifted from packages/tokens in the product repo so the site reads as
   the same system. Severity colours are deliberately absent: in the product,
   severity is the only axis that owns colour, and decorating a marketing page with
   it would contradict that. Brand is one variable, exactly as it is there. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 112%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 112%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The one brand knob, same as the product. Change this and the site changes. */
  --brand-h: 178;
  --brand-c: 0.085;

  --font-core: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --surface-page: oklch(0.982 0.003 220);
  --surface-raised: oklch(1 0 0);
  --surface-sunken: oklch(0.952 0.005 220);

  --text-primary: oklch(0.215 0.012 220);
  --text-secondary: oklch(0.448 0.012 220);
  --text-tertiary: oklch(0.572 0.010 220);
  --text-on-brand: oklch(0.995 0.004 var(--brand-h));

  --line-hairline: oklch(0.898 0.006 220);
  --line-strong: oklch(0.782 0.008 220);

  --brand-base: oklch(0.52 var(--brand-c) var(--brand-h));
  --brand-strong: oklch(0.40 var(--brand-c) var(--brand-h));
  --brand-surface: oklch(0.962 calc(var(--brand-c) * 0.3) var(--brand-h));
  --focus-ring: oklch(0.52 0.16 var(--brand-h));

  --ls-caps: 0.09em;
  --ls-tight: -0.008em;
  --lh-body: 1.45;
  --lh-tight: 1.18;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: oklch(0.178 0.010 220);
    --surface-raised: oklch(0.228 0.011 220);
    --surface-sunken: oklch(0.148 0.009 220);
    --text-primary: oklch(0.955 0.004 220);
    --text-secondary: oklch(0.762 0.008 220);
    --text-tertiary: oklch(0.632 0.008 220);
    --line-hairline: oklch(0.322 0.010 220);
    --line-strong: oklch(0.432 0.012 220);
    --brand-base: oklch(0.72 var(--brand-c) var(--brand-h));
    --brand-strong: oklch(0.82 var(--brand-c) var(--brand-h));
    --brand-surface: oklch(0.262 calc(var(--brand-c) * 0.4) var(--brand-h));
    --text-on-brand: oklch(0.165 0.010 var(--brand-h));
    --focus-ring: oklch(0.72 0.16 var(--brand-h));
  }
}

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-core);
  font-size: 17px;
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

a { color: var(--brand-base); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 3px; }

/* ── Masthead ─────────────────────────────────────────────── */
header { border-bottom: 1px solid var(--line-hairline); }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }

.wordmark {
  font-weight: 800;
  font-stretch: 92%;
  font-size: 21px;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  text-decoration: none;
}
.wordmark span { color: var(--brand-base); }

.entity-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  text-align: right;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding-block: 72px 56px; }
h1 {
  font-size: clamp(30px, 5.5vw, 44px);
  font-weight: 800;
  font-stretch: 92%;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 20px;
  max-width: 17ch;
}
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-secondary); margin: 0; max-width: 58ch; }

/* ── Sections ─────────────────────────────────────────────── */
section { padding-block: 40px; border-top: 1px solid var(--line-hairline); }

h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 20px;
}
h3 { font-size: 18px; font-weight: 700; letter-spacing: var(--ls-tight); margin: 0 0 6px; }
p { margin: 0 0 16px; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.status {
  background: var(--brand-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  padding: 20px 22px;
}
.status p { color: var(--text-secondary); font-size: 16px; }
.status p:first-child { color: var(--text-primary); font-weight: 600; }

.contact-mail { font-size: 19px; font-weight: 600; }

/* ── Footer ───────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line-hairline); margin-top: 24px; padding-block: 28px 44px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
footer, footer a { color: var(--text-tertiary); font-size: 13px; }

/* ── Long-form (privacy) ──────────────────────────────────── */
.prose { padding-block: 48px; }
.prose h1 { font-size: clamp(26px, 4vw, 34px); max-width: none; margin-bottom: 8px; }
.prose .updated { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 32px; }
.prose h2 {
  font-size: 18px; font-weight: 700; text-transform: none;
  letter-spacing: var(--ls-tight); color: var(--text-primary);
  margin: 32px 0 10px;
}
.prose p, .prose li { color: var(--text-secondary); }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }