:root {
  --graphite: #1F2430; --graphite-deep: #171B24; --line-dark: #363C4B;
  --orange: #E8562A; --paper: #F3F4F6; --white: #FFFFFF; --rule: #D9DCE3;
  --ink: #1F2430; --body: #3B414E; --muted: #525A69; --muted-dark: #A3A9B8;
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--f-body); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: 820px; margin: 0 auto; padding-inline: var(--gutter); }

.topbar { background: var(--graphite-deep); border-bottom: 1px solid var(--line-dark); padding-top: env(safe-area-inset-top, 0px); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; max-width: 1160px; }
.topbar img { height: 24px; width: auto; display: block; }
.topbar a.back { color: var(--muted-dark); text-decoration: none; font-size: 15px; }
.topbar a.back:hover { color: var(--white); }

header.page { background: var(--graphite); color: var(--white); padding-block: clamp(48px, 7vw, 80px); }
.eyebrow { font: 500 13px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
h1 { font: 900 clamp(36px, 6vw, 60px)/1 var(--f-display); font-stretch: 80%; margin: 0; text-wrap: balance; }
header.page p { color: #C9CDD8; margin: 18px 0 0; max-width: 60ch; }

main { padding-block: clamp(40px, 6vw, 72px); }
main h2 { font: 800 26px/1.2 var(--f-display); font-stretch: 90%; margin: 44px 0 12px; text-wrap: balance; }
main h2:first-child { margin-top: 0; }
main h3 { font: 700 19px/1.3 var(--f-display); margin: 26px 0 8px; }
main p, main li { color: var(--body); max-width: 68ch; }
main p { margin: 0 0 14px; }
main ul { padding-left: 1.2em; margin: 0 0 14px; }
main li { margin-bottom: 6px; }
main strong { color: var(--ink); }
.card { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; margin: 18px 0; }
.card p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--white); margin: 16px 0 20px; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
th { background: var(--paper); font-weight: 600; font-size: 14px; }
tr:last-child td { border-bottom: 0; }
.updated { font: 500 13px/1.4 var(--f-mono); color: var(--muted); margin-top: 40px; }

footer { background: var(--graphite-deep); color: var(--muted-dark); font-size: 14px; padding-block: 36px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; max-width: 1160px; }
footer a { color: #D5D8E0; }