:root {
  color-scheme: light;
  --ink: #173042;
  --muted: #587080;
  --line: #d8e2e8;
  --surface: #ffffff;
  --wash: #f3f8fa;
  --blue: #15749a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.site-header, main, .site-footer { width: min(760px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 20px;
}

.brand { color: var(--ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { color: var(--blue); }

nav { display: flex; gap: 18px; }
nav a, .text-link { color: #0d607f; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgb(23 48 66 / 7%);
  padding: clamp(28px, 7vw, 54px);
}

.eyebrow { color: var(--blue); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.045em; line-height: 1.05; margin: 10px 0 18px; }
h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 32px 0 8px; }
p { margin: 0 0 15px; }
.lead { color: var(--muted); font-size: 1.15rem; max-width: 57ch; }

.links { display: grid; gap: 12px; margin-top: 30px; }
.links a { border: 1px solid var(--line); border-radius: 12px; color: var(--ink); padding: 16px 18px; text-decoration: none; }
.links a:hover, .links a:focus-visible { border-color: var(--blue); outline: none; }
.links strong, .links span { display: block; }
.links span { color: var(--muted); font-size: .92rem; }

.notice { background: #eef8fb; border-left: 4px solid var(--blue); border-radius: 4px; margin-top: 28px; padding: 14px 16px; }
.site-footer { color: var(--muted); font-size: .9rem; padding: 24px 0 36px; }
.site-footer a { color: inherit; }

@media (max-width: 480px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 10px; }
}