:root { color: #0b2341; background: #f5f0e6; font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; --ink: #0b2341; --orange: #ff4b22; --blue: #1849d6; --mint: #72b8a9; --paper: #f5f0e6; --light: #fffdf8; --rule: rgba(11,35,65,.24); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
header, main, footer { width: min(860px, calc(100% - 40px)); margin: auto; }
header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); }
header > a { font-size: 1.25rem; font-weight: 900; text-decoration: none; letter-spacing: -.04em; }
header nav { display: flex; gap: 18px; }
header nav a { font-size: .8rem; font-weight: 800; }
main { padding: 72px 0 90px; }
.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .15em; }
h1 { max-width: 760px; margin: 0 0 30px; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; letter-spacing: -.065em; }
h2 { margin: 52px 0 14px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 1.5rem; letter-spacing: -.035em; }
h3 { margin-top: 30px; }
p, li { color: #3c4c61; font-size: 1rem; line-height: 1.95; }
li + li { margin-top: 8px; }
.lede { color: var(--ink); font-size: 1.12rem; font-weight: 700; }
.callout { margin: 34px 0; padding: 20px 22px; border: 1px solid var(--blue); background: var(--light); }
.callout strong { color: var(--blue); }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--orange); background: var(--orange); color: white; text-decoration: none; font-weight: 900; box-shadow: 5px 5px 0 var(--ink); }
button.secondary { min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
code { padding: 2px 5px; background: rgba(114,184,169,.18); }
table { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--light); }
th, td { padding: 12px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { color: var(--blue); }
footer { min-height: 160px; padding: 34px 0; border-top: 1px solid var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer nav a { font-size: .8rem; font-weight: 800; }
@media (max-width: 560px) { header nav a:not(:last-child) { display: none; } main { padding-top: 48px; } table { display: block; overflow-x: auto; } }