:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#17243b;
  --muted:#667892;
  --line:#dfe7f1;
  --accent:#2563eb;
}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{margin:0}
.wrap{max-width:900px;margin:0 auto;padding:48px 20px 64px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#1d4ed8,#60a5fa);display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 24px rgba(37,99,235,.18)}
.brand strong{font-size:18px}
.brand span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:0 10px 30px rgba(15,23,42,.05)}
h1{font-size:36px;line-height:1.15;margin:0 0 14px}
h2{font-size:22px;margin:34px 0 12px}
p,li{font-size:16px;line-height:1.7}
p{margin:0 0 16px}
ul{padding-left:22px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.note{margin-top:24px;padding:16px 18px;border-radius:12px;background:#eef4ff;border:1px solid #d8e6ff;color:#334e7d}
.footer{margin-top:24px;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:640px){
  .wrap{padding:28px 14px 40px}
  .card{padding:24px 20px}
  h1{font-size:30px}
}