@font-face { font-family: "Poppins"; src: url("fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --bg: #f3f2f2; --paper: #fff; --text: #201e1d; --slate: #0b2e59; --accent: #f2b705; --accent-700: #1565c0; --accent-300: #bfd2fe; --n-800: #444141; --divider: color-mix(in srgb, #201e1d 25%, transparent); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.7 "Poppins", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 820px; margin: 0 auto; padding-inline: 16px; }
a { color: var(--accent-700); }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.testing { background: #fde68a; color: #422006; border-bottom: 2px solid #b45309; font-size: 14px; line-height: 1.5; }
.testing .wrap { padding-block: 10px; }
.top { background: var(--slate); }
.top .wrap { padding-block: 16px; }
.brand { color: #fff; font-weight: 700; text-decoration: none; }
.brand:hover { color: var(--accent-300); }
.doc { padding-block: 40px 64px; }
.kicker { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-700); font-weight: 600; margin: 0 0 12px; }
h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.12; letter-spacing: -.015em; font-weight: 700; margin: 0 0 20px; }
h2 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 36px 0 10px; padding-top: 20px; border-top: 2px solid var(--divider); }
p, li { color: var(--n-800); }
ul, ol { padding-left: 22px; }
li + li { margin-top: 6px; }
.facts { list-style: none; padding: 0; }
mark { background: #fde68a; color: #422006; padding: 0 4px; }
code { font-size: .92em; background: #e5e7eb; padding: 1px 5px; }
.box { margin-top: 40px; background: var(--paper); border-left: 6px solid var(--accent); padding: 4px 24px 20px; }
.box h2 { border-top: 0; padding-top: 12px; }
.foot { background: var(--slate); color: var(--accent-300); font-size: 14px; }
.foot .wrap { padding-block: 20px; }
.foot a { color: #fff; }