/*
  Deploy Outbound, shared styles for the privacy notice and the 404 page.
  Same tokens as the home page: one type scale, one grey scale, one blue scale,
  three radii, one shadow family. IBM Plex Sans and Plex Mono, served from this domain.
*/

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("/fonts/ibm-plex-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  /* type scale */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-36: 36px; --fs-48: 48px; --fs-60: 60px;
  --fs-h1: clamp(36px, 1.5rem + 3.1vw, 60px);
  --fs-lead: clamp(18px, 1.05rem + .45vw, 20px);
  /* greys, cool, dark to light */
  --g-900: #101418; --g-800: #1B2128; --g-700: #4A525A; --g-600: #5C646C; --g-500: #7A8188; --g-400: #9AA2AA; --g-300: #AEB6BF; --g-200: #D9D9E0; --g-100: #E8E8EC; --g-50: #EEF1F6; --white: #FFFFFF;
  /* blues */
  --b-900: #1C33B0; --b-700: #2541D6; --b-400: #8EA2FF; --b-300: #AFC0FF; --b-200: #C9D3FF; --b-100: #D5DCFF;
  /* radii */
  --r-4: 4px; --r-8: 8px; --r-16: 16px; --r-pill: 999px;
  /* depth */
  /* depth, tinted toward the page hue like the home page: one ring, layered soft shadows */
  --ring: 0 0 0 1px rgba(15,23,42,.08);
  --shadow-sm: var(--ring), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: var(--ring), 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.10);
  /* roles */
  --bg: var(--g-50); --surface: var(--white);
  --ink: var(--g-900); --ink-2: var(--g-700); --ink-3: var(--g-600); --ink-4: var(--g-500);
  --muted: var(--ink-2); --rule: #DFE4EC;
  --accent: var(--b-700); --accent-d: var(--b-900);
  --text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { position: relative; min-height: 100%; }
body::before, body::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(15,23,42,.06); left: calc(50% - 568px); pointer-events: none; }
body::after { left: auto; right: calc(50% - 568px); }
@media (max-width: 1200px) { body::before, body::after { display: none; } }
main, .page { position: relative; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-18)/1.5 var(--text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--b-100); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-4); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* ---------------------------------- Header ---------------------------------- */

.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-16); }
.brand svg { width: 24px; height: 24px; flex: none; }
.top-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-right: -12px; color: var(--ink-3); text-decoration: none; font-size: var(--fs-16); transition: color .15s; }
.top-link:hover { color: var(--ink); }
@media (max-width: 560px) { .top .wrap { height: 64px; } }

/* ----------------------------------- Type ----------------------------------- */

h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 700; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-weight: 600; font-size: var(--fs-24); line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-weight: 600; font-size: var(--fs-18); line-height: 1.35; }
p { margin: 0 0 1em; text-wrap: pretty; }
.eyebrow { display: block; font: 400 var(--fs-14)/1.2 var(--mono); color: var(--ink-3); margin-bottom: 14px; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 31em; }

/* --------------------------------- Button ----------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-16);
  padding: 13px 20px;
  border-radius: var(--r-8);
  transition: background .15s;
}
.btn:hover { background: var(--accent-d); }

/* ---------------------------------- Footer ---------------------------------- */

footer { padding: 40px 0 72px; font-size: var(--fs-14); color: var(--ink-3); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
footer p { margin: 0 0 6px; }
footer nav { display: flex; gap: 20px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
footer a { color: var(--ink-3); }

/* --------------------------------- Privacy ---------------------------------- */

.doc { max-width: 700px; padding: 32px 0 96px; }
.doc h1 { margin: 6px 0 14px; }
.doc h2 { margin: 2.6rem 0 0.7rem; }
.doc p, .doc li { color: var(--muted); }
.doc p strong { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: var(--fs-16); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--rule); }
.doc th { font-weight: 600; color: var(--ink); width: 34%; }
.doc td { color: var(--muted); }
@media (max-width: 640px) {
  .doc th, .doc td { display: block; width: auto; padding: 8px 0 0; border: 0; }
  .doc tr { display: block; padding: 10px 0; border-top: 1px solid var(--rule); }
}

/* ----------------------------------- 404 ------------------------------------ */

.lost { padding-block: clamp(64px, 12vw, 152px); }
.lost h1 { margin-bottom: 18px; }
.lost .lead { margin-bottom: 32px; }

@media print {
  .top-link { display: none; }
  body { background: #fff; color: #000; }
}