:root {
  color-scheme: light;
  --ink: #092037;
  --muted: #5e6f7e;
  --paper: #f6f8fa;
  --line: #dce5ea;
  --blue: #1769c2;
  --green: #147c68;
  --card: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: var(--blue); text-underline-offset: 3px; }
.shell { width: min(100% - 40px, 920px); margin: 0 auto; }
header { background: #071a2d; color: #fff; padding: 18px 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; gap: 10px; align-items: center; color: #fff; font-weight: 750; letter-spacing: -.02em; text-decoration: none; }
.mark { width: 30px; height: 30px; display: grid; place-items: center; background: linear-gradient(135deg, #2b8ee9, #1bb28a); border-radius: 9px; font-size: 15px; }
.links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
.links a { color: #d9e8f2; font-size: .9rem; text-decoration: none; }
.links a:hover, .links a[aria-current="page"] { color: #fff; }
main { padding: 58px 0 74px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
h1 { max-width: 720px; margin: 11px 0 12px; font-size: clamp(2.35rem, 7vw, 4.5rem); line-height: 1.04; letter-spacing: -.06em; }
.lead { max-width: 680px; margin: 0; color: var(--muted); font-size: 1.12rem; }
.notice { margin: 36px 0; padding: 18px 20px; border-left: 4px solid var(--green); background: #eaf7f3; border-radius: 0 14px 14px 0; color: #174f45; }
.content { margin-top: 36px; padding: clamp(24px, 5vw, 48px); background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 44px rgba(9, 32, 55, .06); }
.content h2 { margin: 42px 0 10px; font-size: 1.35rem; letter-spacing: -.025em; }
.content h2:first-child { margin-top: 0; }
.content h3 { margin: 24px 0 5px; font-size: 1.03rem; }
.content p, .content li { color: #344a5d; }
.content ul { padding-left: 21px; }
.content li + li { margin-top: 8px; }
.date { color: var(--muted); font-size: .9rem; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 38px 0; }
.tile { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.tile strong { display: block; margin: 8px 0 4px; font-size: 1.05rem; }
.tile p { margin: 0; color: var(--muted); font-size: .92rem; }
.icon { font-size: 1.35rem; }
.support-box { margin-top: 30px; padding: 26px; border-radius: 18px; background: #eaf3fc; }
.support-box h2 { margin: 0 0 6px; }
.button { display: inline-block; margin-top: 12px; padding: 11px 16px; background: var(--blue); color: white; border-radius: 11px; font-weight: 700; text-decoration: none; }
footer { border-top: 1px solid var(--line); padding: 25px 0 38px; color: var(--muted); font-size: .86rem; }
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 640px) { .shell { width: min(100% - 30px, 920px); } header { padding: 14px 0; } .nav { align-items: flex-start; flex-direction: column; } .links { justify-content: flex-start; } main { padding: 42px 0 55px; } .tiles { grid-template-columns: 1fr; } }