* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #263238; background: #fff; font-family: Ubuntu, Arial, sans-serif; }
a { color: #168bd2; }
.article-header { border-bottom: 1px solid #e7edf1; background: #fff; }
.article-nav { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 40px); max-width: 1120px; margin: auto; padding: 18px 20px; }
.article-logo img { display: block; width: 430px; max-width: 100%; }
.article-nav__links { display: flex; gap: 22px; font-weight: 700; }
.article-nav__links a { text-decoration: none; }
.article { width: calc(100% - 40px); max-width: 920px; margin: auto; padding: 52px 20px 72px; }
.article-kicker { margin: 0 0 12px; color: #168bd2; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.article h1 { margin: 0 0 20px; color: #18242c; font-size: 44px; line-height: 1.16; }
.article-lead { margin: 0 0 32px; color: #4c5b64; font-size: 21px; line-height: 1.65; }
.article-cover { width: 100%; margin: 0 0 38px; border-radius: 16px; aspect-ratio: 3 / 2; object-fit: cover; }
.article h2 { margin: 42px 0 16px; color: #18242c; font-size: 28px; line-height: 1.3; }
.article h3 { margin: 28px 0 10px; color: #18242c; font-size: 21px; }
.article p, .article li { font-size: 18px; line-height: 1.72; }
.article ul, .article ol { padding-left: 24px; }
.article-note { margin: 30px 0; padding: 22px 24px; border-left: 4px solid #168bd2; border-radius: 0 10px 10px 0; background: #f4faff; }
.article-cta { margin-top: 46px; padding: 32px; border-radius: 14px; color: #fff; background: #183f56; text-align: center; }
.article-cta h2 { margin: 0 0 10px; color: #fff; }
.article-cta p { margin: 0 0 22px; }
.article-button { display: inline-block; padding: 14px 24px; border-radius: 7px; color: #fff; background: #1f8fff; font-weight: 700; text-decoration: none; }
.related { margin-top: 48px; padding-top: 30px; border-top: 1px solid #e2e8ed; }
.related a { display: block; margin: 10px 0; }
.article-footer { padding: 24px 20px; color: #66747d; background: #f6f8fa; text-align: center; }
@media (max-width: 700px) {
  .article-nav { align-items: flex-start; flex-direction: column; gap: 14px; }
  .article-logo img { width: 230px; }
  .article { padding-top: 36px; }
  .article h1 { font-size: 34px; }
  .article-lead { font-size: 18px; }
  .article p, .article li { font-size: 17px; }
}