*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#1e293b;background:#f1f5f9;line-height:1.65}
a{color:#0369a1}header{background:#0f172a;color:#fff;padding:14px 22px}
header .brand{font-size:22px;font-weight:700}header .brand small{font-size:13px;color:#7dd3fc}
nav{background:#1e293b;padding:0 22px}nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
nav li{position:relative}nav a{display:block;color:#e2e8f0;text-decoration:none;padding:11px 13px;font-size:15px}
nav a:hover{background:#0369a1;color:#fff}
nav .menu{display:none;position:absolute;left:0;top:100%;background:#0f172a;min-width:230px;z-index:50;flex-direction:column}
nav .has-menu:hover>.menu,nav .has-menu:focus-within>.menu{display:flex}
.hero{background:linear-gradient(120deg,#0f172a,#075985);color:#fff;padding:44px 22px}
.hero h1{margin:0 0 10px;font-size:32px;line-height:1.25}.hero p{max-width:760px;color:#e0f2fe}
main{max-width:980px;margin:0 auto;padding:26px 22px;background:#fff}
h2{color:#0f172a;border-bottom:2px solid #38bdf8;padding-bottom:6px}
table{border-collapse:collapse;width:100%;margin:14px 0}th,td{border:1px solid #cbd5e1;padding:8px 10px;text-align:left;font-size:15px}
th{background:#e0f2fe}.note{background:#f0f9ff;border-left:4px solid #38bdf8;padding:12px 16px;margin:16px 0}
.diagram{background:#f8fafc;border:1px solid #cbd5e1;padding:14px;margin:16px 0;font-size:14px;color:#475569}
footer{background:#0f172a;color:#cbd5e1;padding:26px 22px;font-size:14px}
footer a{color:#7dd3fc}.cta{display:inline-block;background:#0284c7;color:#fff!important;padding:10px 18px;text-decoration:none;border-radius:4px;margin:12px 0}
form label{display:block;margin:10px 0 4px}input,textarea{display:block;width:100%;max-width:520px;padding:9px;border:1px solid #94a3b8;border-radius:4px}
button{background:#0284c7;color:#fff;border:0;padding:11px 22px;border-radius:4px;cursor:pointer}
.related{margin-top:26px;border-top:1px solid #e2e8f0;padding-top:12px}