*{box-sizing:border-box}
:root{--ink:#20262c;--muted:#5b6670;--line:#dfe4e8;--panel:#fff;--soft:#f4f6f8;--accent:#315d73;--accent-soft:#e8f0f4}
html{scroll-behavior:smooth}
body{margin:0;background:var(--soft);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.75}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(980px,92%);margin:auto}
nav{background:#243944;color:#fff;border-bottom:1px solid #1c2f38}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 0}
.brand{color:#fff;font-weight:800;font-size:1.03rem}
.links{display:flex;flex-wrap:wrap;gap:17px}
.links a{color:#dbe6ea;font-size:.94rem}
main{padding:38px 0 65px}
.hero{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:38px;margin-bottom:22px}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.15;margin:0 0 14px;color:#243944}
h2{font-size:1.65rem;line-height:1.3;margin:0 0 14px;color:#294b5c}
h3{font-size:1.1rem;line-height:1.35;margin:22px 0 8px;color:#355666}
.lead{font-size:1.13rem;max-width:820px;color:var(--muted);margin:0}
.section{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:22px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
ul,ol{padding-left:23px}
li{margin:7px 0}
.note{background:var(--accent-soft);border-left:4px solid var(--accent);padding:15px 18px;border-radius:6px;margin:20px 0}
.checklist{padding-left:23px}
.checklist li::marker{content:"✓  "}
table{width:100%;border-collapse:collapse;margin:18px 0}
th,td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f1f4f6;color:#294b5c}
.small{font-size:.92rem;color:var(--muted)}
footer{background:#243944;color:#dbe6ea;padding:28px 0}
footer strong{display:block;margin-bottom:5px}
footer span{font-size:.9rem;color:#c1cfd4}
@media(max-width:700px){
.nav-inner{align-items:flex-start;flex-direction:column}
.links{gap:10px 14px}
.hero,.section{padding:23px}
.grid{grid-template-columns:1fr}
}