*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f8fb;
    color: #243a48;
    font-size: 16px;
    line-height: 1.7;
}
a { color: #1f5f78; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #17485b; }
a:focus-visible { outline: 3px solid #75a9bd; outline-offset: 3px; border-radius: 2px; }
a:active { color: #123d4d; }
header { background: #dcecf2; border-bottom: 5px solid #6ea0b4; }
.topbar {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.logo {
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #2e596b;
    text-decoration: none;
}
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
nav a { color: #315d6e; font-weight: 700; text-decoration: none; }
.hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 52px 24px 48px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
    gap: 36px;
    align-items: start;
}
h1 { font-size: 40px; line-height: 1.15; margin: 0 0 20px; color: #264b5b; }
h2 { font-size: 28px; line-height: 1.25; margin: 0 0 18px; color: #2b5566; }
h3 { font-size: 20px; line-height: 1.35; margin: 0 0 10px; color: #315f70; }
p { font-size: 16px; margin: 0 0 16px; }
.hero p { font-size: 17px; max-width: 780px; }
.hero-box { background: #eef7fa; border-left: 5px solid #6ea0b4; padding: 22px 24px; }
main { max-width: 1180px; margin: 0 auto; padding: 38px 24px 64px; }
section { margin: 0 0 34px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.panel { background: #fff; border: 1px solid #c9dce5; padding: 24px; }
.panel p:last-child { margin-bottom: 0; }
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.link-card { display: block; background: #fff; border: 1px solid #bdd4de; padding: 18px; text-decoration: none; }
.link-card strong { display: block; color: #285366; margin-bottom: 6px; }
.link-card span { color: #4d6875; }
.callout { background: #e6f2f6; border-left: 5px solid #50879d; padding: 24px; }
.checklist { margin: 0; padding-left: 22px; }
.checklist li { margin-bottom: 9px; }
.steps { counter-reset: item; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: item; background: #fff; border: 1px solid #c9dce5; padding: 16px 18px 16px 58px; position: relative; }
.steps li::before { content: counter(item); position: absolute; left: 17px; top: 15px; width: 28px; height: 28px; display: grid; place-items: center; background: #d7eaf1; color: #285366; font-weight: 800; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #c9dce5; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 14px 16px; border-bottom: 1px solid #d8e5eb; text-align: left; vertical-align: top; }
th { background: #e4f0f4; color: #294f5f; }
tr:last-child td { border-bottom: 0; }
.definition-list { display: grid; grid-template-columns: 220px 1fr; gap: 0; background: #fff; border: 1px solid #c9dce5; }
.definition-list dt, .definition-list dd { margin: 0; padding: 14px 16px; border-bottom: 1px solid #d8e5eb; }
.definition-list dt { font-weight: 800; background: #edf6f8; }
.definition-list dt:last-of-type, .definition-list dd:last-of-type { border-bottom: 0; }
footer { background: #d4e7ee; border-top: 1px solid #b8d3de; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 26px 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.footer-inner p { margin: 0; color: #426371; }
.footer-inner nav { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) {
    .hero, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .link-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .topbar, .hero, main, .footer-inner { padding-left: 18px; padding-right: 18px; }
    .topbar, .footer-inner { display: block; }
    .topbar nav { margin-top: 14px; }
    .footer-inner nav { margin-top: 14px; }
    .link-grid { grid-template-columns: 1fr; }
    .definition-list { grid-template-columns: 1fr; }
    .definition-list dt { border-bottom: 0; padding-bottom: 4px; }
    .definition-list dd { padding-top: 4px; }
}