@import url("../service-pages.css");

.article-hero { padding: clamp(46px, 7vw, 82px) 24px clamp(42px, 6vw, 72px); background: linear-gradient(180deg,#fff,#f4f8fd); border-bottom:1px solid var(--line); }
.article-hero-inner { width:min(980px,100%); margin:0 auto; }
.article-hero h1 { max-width:15ch; margin:20px 0 22px; font-size:clamp(42px,6vw,68px); }
.article-answer { margin-top:28px; padding:24px 28px; border-left:4px solid var(--brand); border-radius:0 var(--radius) var(--radius) 0; background:#fff; box-shadow:0 14px 36px rgba(28,57,82,.06); }
.article-answer strong { color:var(--brand); }
.article-answer p { margin:0; color:var(--ink); font-size:17px; line-height:1.9; }
.article-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; color:var(--muted); font-size:12px; }
.article-meta span { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:56px; width:min(1180px,100%); margin:0 auto; padding:64px 24px 88px; }
.article-content { max-width:780px; }
.article-content section { margin-top:52px; }
.article-content h2 { margin:0 0 18px; font-size:clamp(28px,3.4vw,40px); line-height:1.22; letter-spacing:-.03em; }
.article-content h3 { margin:28px 0 10px; font-size:21px; }
.article-content p, .article-content li { color:var(--body); font-size:15px; line-height:1.9; }
.article-content p { margin:0 0 16px; }
.article-content ul, .article-content ol { display:grid; gap:10px; margin:0; padding-left:22px; }
.article-content blockquote { margin:26px 0; padding:20px 24px; border-left:3px solid var(--brand); border-radius:0 var(--radius) var(--radius) 0; background:var(--brand-soft); color:var(--ink); line-height:1.85; }
.article-content table { width:100%; margin-top:22px; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }
.article-content th, .article-content td { padding:16px 18px; border-bottom:1px solid var(--line); color:var(--body); font-size:14px; line-height:1.7; text-align:left; vertical-align:top; }
.article-content th { background:#edf4ff; color:var(--ink); font-size:12px; letter-spacing:.05em; }
.article-content tr:last-child td { border-bottom:0; }
.article-aside { position:sticky; top:96px; align-self:start; display:grid; gap:16px; }
.aside-card { padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.aside-card h2, .aside-card h3 { margin:0 0 14px; font-size:16px; }
.aside-card a { display:block; padding:9px 0; color:var(--body); font-size:13px; line-height:1.55; }
.aside-card a:hover { color:var(--brand); }
.aside-card .btn { width:100%; margin-top:8px; }
.article-related { padding:0 24px 90px; }
.article-related-inner { width:min(1180px,100%); margin:0 auto; }
.article-related h2 { margin-bottom:24px; font-size:32px; }
.hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hub-card { display:flex; flex-direction:column; min-height:250px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; transition:.2s; }
.hub-card:hover { transform:translateY(-3px); border-color:rgba(22,119,255,.34); box-shadow:0 18px 38px rgba(28,57,82,.07); }
.hub-card small { color:var(--brand); font-size:11px; font-weight:750; letter-spacing:.08em; }
.hub-card h2, .hub-card h3 { margin:28px 0 12px; font-size:22px; line-height:1.4; }
.hub-card p { color:var(--body); font-size:14px; line-height:1.8; }
.hub-card span { margin-top:auto; color:var(--brand); font-size:13px; font-weight:700; }
@media (max-width: 900px) { .article-layout { grid-template-columns:1fr; } .article-aside { position:static; order:-1; } .hub-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .article-hero { padding-inline:16px; } .article-layout { padding-inline:16px; } .hub-grid { grid-template-columns:1fr; } .article-content table { display:block; overflow-x:auto; white-space:normal; } }