:root {
  --bg: #E4EEF6; --card: #fff; --ink: #1B2B4B; --mute: #5B687E; --line: #DCE6F0; --soft: #EEF3F9; --acc: #F0795A;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 Figtree, -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
a { color: var(--ink); font-weight: 600; text-underline-offset: 3px }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px }

header { padding: 28px 0 8px }
.logo { display: inline-flex; align-items: center; text-decoration: none }
.logo img { display: block; height: 38px; width: auto }
nav { float: right; margin-top: 8px; display: flex; gap: 18px; font-size: 15px }
nav a { font-weight: 500; color: var(--mute); text-decoration: none }
nav a.on, nav a:hover { color: var(--ink) }

main { padding: 18px 0 40px }
h1 { font-size: 36px; line-height: 1.15; letter-spacing: -1px; margin: 18px 0 8px }
h2 { font-size: 21px; letter-spacing: -.3px; margin: 30px 0 8px }
.lead { color: var(--mute); font-size: 18px; margin: 0 0 20px }
.card { background: var(--card); border-radius: 22px; padding: 22px 24px; margin: 14px 0 }
.card h2:first-child { margin-top: 0 }
ul { padding-left: 20px; margin: 8px 0 }
li { margin: 4px 0 }
.small { font-size: 14px; color: var(--mute) }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; text-decoration: none; border-radius: 16px; padding: 14px 20px; font-weight: 700; margin: 6px 8px 0 0 }
.btn.light { background: var(--card); color: var(--ink) }
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 }
th { font-weight: 700 }

footer { padding: 26px 0 40px; color: var(--mute); font-size: 14px }
footer a { color: var(--mute); font-weight: 500; margin-right: 14px }

@media (max-width: 560px) {
  nav { float: none; margin: 12px 0 0 }
  h1 { font-size: 29px }
  .card { padding: 18px }
  table, tbody, tr, td, th { display: block } thead { display: none } td { border: 0; padding: 2px 0 } tr { border-bottom: 1px solid var(--line); padding: 8px 0 }
}
.card > :first-child { margin-top: 0 }
.card > :last-child { margin-bottom: 0 }