:root {
  --brand: #2A4BFF; --brand-deep: #1832C8; --sun: #FFC400; --ink: #0E1326;
  --paper: #F6F1E6; --card: #FFFFFF; --muted: #5B6075; --line: #E4DED0;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  background: var(--paper); color: var(--ink); line-height: 1.55; font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
.hero { background: var(--brand); color: #fff; padding: 28px 20px 40px; border-radius: 0 0 36px 36px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.hero .wrap { padding: 0; }
.top { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.top img { width: 44px; height: 44px; border-radius: 11px; }
.wordmark { font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.wordmark b { color: var(--sun); font-weight: 800; }
h1 { font-weight: 800; font-size: clamp(34px, 7vw, 54px); letter-spacing: -0.03em; line-height: 1.02; margin: 34px 0 10px; }
.lede { font-size: 20px; color: rgba(255,255,255,.85); max-width: 560px; margin: 0; }
main { padding: 32px 0 60px; }
h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 38px 0 8px; }
h3 { font-weight: 700; font-size: 18px; margin: 22px 0 4px; }
p, li { color: #23283A; }
.muted { color: var(--muted); font-size: 15px; }
.card { background: var(--card); border-radius: 22px; padding: 20px 22px; margin: 16px 0; box-shadow: 0 5px 0 var(--line); }
.badge { display: inline-block; margin-top: 26px; background: var(--sun); color: var(--ink); font-weight: 800; padding: 14px 22px; border-radius: 999px; text-decoration: none; box-shadow: 0 5px 0 #D9A600; }
footer { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); margin-right: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td, th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E1326; --card: #171C33; --line: #262C47; --muted: #A3A8BF; }
  body { color: #F2F3F8; } p, li { color: #D9DCE8; } td, th { color: #D9DCE8; }
  .card { box-shadow: none; }
}