:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #17213b;
  background: #f6f7fb;
  line-height: 1.7;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #4629aa; text-underline-offset: 0.2em; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #715bf9; outline-offset: 5px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; padding: 0.5rem 1rem; background: white; z-index: 1; }
.skip-link:focus { top: 1rem; }
header { background: #001a50; }
header > div, main, footer { max-width: 48rem; margin-inline: auto; padding-inline: 1.5rem; }
header > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header img { display: block; width: 10rem; height: 4rem; object-fit: contain; }
header a { display: inline-flex; align-items: center; min-height: 2.75rem; color: white; }
main { padding-block: 3rem; }
article { padding: clamp(1.5rem, 5vw, 3rem); background: white; border: 1px solid #dce0eb; border-radius: 0.75rem; }
h1, h2 { line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
p, ul { margin: 0 0 1rem; }
p { text-wrap: pretty; overflow-wrap: break-word; }
ul { padding-left: 1.25rem; }
li + li { margin-top: 0.5rem; }
.intro { font-size: 1.1rem; }
.agreement { padding: 1rem 1.25rem; border-left: 3px solid #633dee; background: #f5f3ff; }
footer { padding-bottom: 2rem; color: #526078; font-size: 0.875rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 0.75rem; }
footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
footer a[aria-current="page"] { color: #17213b; font-weight: 600; text-decoration: none; }
@media (max-width: 30rem) {
  header > div, main, footer { padding-inline: 1rem; }
  main { padding-block: 1.5rem; }
}