body { margin:0; background:#d7d7d7; color:#202020; font-family: Georgia, 'Times New Roman', serif; }
.site { width: 778px; max-width: calc(100% - 24px); margin:24px auto; background:#fff; border:1px solid #b5b5b5; box-shadow:0 2px 14px rgba(0,0,0,.18); }
.top { background:linear-gradient(135deg,#fdfdfd,#e9eef2); border-bottom:1px solid #c9c9c9; padding:24px 28px; }
.brand { font-size:34px; line-height:1.1; color:#253a5a; margin:0; font-weight:bold; }
.tagline { margin:8px 0 0; color:#555; font-family:Arial,Helvetica,sans-serif; }
.nav { background:#253a5a; padding:0 18px; font-family:Arial,Helvetica,sans-serif; }
.nav a { display:inline-block; color:#fff; padding:13px 12px; text-decoration:none; font-size:14px; }
.nav a:hover { background:#3a5682; }
.hero { background:linear-gradient(90deg,#eef3f7,#ffffff); padding:28px; border-bottom:1px solid #ddd; font-family:Arial,Helvetica,sans-serif; }
.hero h2 { margin:0 0 8px; color:#253a5a; font-size:25px; }
.content { padding:30px 42px 38px; font-size:18px; line-height:1.65; }
.content h1 { text-align:center; color:#253a5a; font-size:28px; margin:0 0 24px; }
.content h2 { color:#253a5a; margin-top:28px; font-size:22px; }
.notice { background:#f7f4e8; border:1px solid #e2d8a8; padding:16px; margin:24px 0; font-size:15px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:24px 0; font-family:Arial,Helvetica,sans-serif; }
.card { background:#f7f9fb; border:1px solid #dfe7ef; border-radius:8px; padding:16px; }
.footer { background:#f5f5f5; border-top:1px solid #ddd; padding:18px 28px; color:#666; font-size:13px; font-family:Arial,Helvetica,sans-serif; }
@media (max-width:700px){ .content{padding:22px;} .brand{font-size:28px;} .nav a{display:block;} }