:root{
  --page:#f6f7fb;
  --surface:#ffffff;
  --hero-1:#fafcff;
  --hero-2:#f1f5fe;
  --text:#1a2741;
  --muted:#667793;
  --line:#e2e8f3;
  --accent:#7aa2ff;
}

@keyframes pageSoftIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--page);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.article-page .site-nav{animation:pageSoftIn .52s ease both}
body.article-page .article-hero{animation:pageSoftIn .68s .05s ease both}
body.article-page .article-body{animation:pageSoftIn .78s .12s ease both}
body.article-page .mini-cta,
body.article-page .related{animation:pageSoftIn .8s .18s ease both}
body.article-page .site-footer{animation:pageSoftIn .82s .22s ease both}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.page{
  max-width:980px;
  margin:0 auto;
  padding:0 26px 68px;
  background:var(--surface);
}

.article{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

.article-hero{
  margin:0 -26px;
  padding:120px 26px 96px;
  background:linear-gradient(180deg,var(--hero-1) 0%,var(--hero-2) 100%);
  border-bottom:1px solid var(--line);
}

.article-kicker{
  margin:0 0 16px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7a8aa7;
  font-weight:620;
}

.article-hero h1{
  margin:0;
  max-width:16ch;
  font-size:clamp(40px,5.8vw,64px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:#0f1d38;
  font-weight:760;
}

.article-meta{
  margin-top:20px;
  font-size:13px;
  color:#6d7f9d;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.article-divider{
  margin:22px 0 0;
  border:0;
  border-top:1px solid var(--line);
}

.toc{
  margin:40px 0 0;
  padding:0;
  border:0;
  background:transparent;
}

.toc h2{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#7b8ca6;
}

.toc ol,.toc ul{margin:0;padding-left:20px}
.toc li{margin:8px 0;color:#4b5d7d}

.article-body{
  max-width:900px;
  margin:44px auto 0;
  padding:0;
}

.article-body p{
  margin:0 0 24px;
  font-size:18px;
  line-height:1.88;
  color:#32445f;
}

.article-body h2{
  margin:64px 0 16px;
  font-size:clamp(28px,3.2vw,34px);
  line-height:1.22;
  letter-spacing:-.01em;
  color:#112141;
}

.article-body h2::after{content:none}

.article-body h3{
  margin:20px 0 10px;
  font-size:22px;
  line-height:1.32;
  color:#17294d;
}

.article-body ul,.article-body ol{
  margin:8px 0 24px;
  padding-left:22px;
  color:#344661;
}

.article-body li{margin:0 0 10px;line-height:1.85}

.article-body .card,
.article-body .risk-position-box,
.article-body .callout,
.article-body details.faq,
.article-body .grid-3{
  margin:30px 0 34px;
  padding:2px 0 2px 18px;
  border:0;
  border-left:3px solid #95b3ff;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:block;
}

.article-body .grid-3 .card{
  margin:0 0 18px;
  padding:2px 0 2px 0;
  border-left:0;
}

.article-body .card h3,
.article-body .risk-position-box h3,
.article-body .callout h3,
.article-body details.faq summary{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b7da0;
  font-weight:620;
}

.article-body .card p,
.article-body .risk-position-box p,
.article-body .callout p,
.article-body details.faq p{
  margin:0;
  color:#223554;
}

.article-body details.faq summary{cursor:pointer}
.article-body details.faq .faq-body{margin-top:8px}

.sep{
  border:0;
  border-top:1px solid var(--line);
  margin:54px 0;
}

.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid #d7deeb;
  background:#fff;
  color:#516487;
  text-decoration:none;
  font-size:14px;
}

.btn.primary{
  border-color:#102343;
  background:#12284d;
  color:#edf2ff;
  font-weight:630;
}

.btn:hover{opacity:.92;text-decoration:none}

.fineprint{font-size:13px;color:#6f7f97}

.related{
  margin:62px 0 0;
  padding-top:24px;
  border-top:1px solid var(--line);
  background:transparent;
  border-radius:0;
}

.related h2{margin:0 0 10px;font-size:20px;color:#12223f}
.related-back{margin-top:10px}

@media(max-width:900px){
  .article-hero{padding-top:108px;padding-bottom:86px}
}

@media(max-width:640px){
  .page{padding:0 24px 54px}
  .article-hero{margin:0 -24px;padding:102px 24px 80px}
  .article-body p{font-size:17px;line-height:1.86}
  .article-body h2{margin-top:56px}
  .actions{width:100%}
  .btn.primary{width:100%}
}

/* Site branding */
.container{max-width:980px;margin:0 auto;padding:0 26px}
.site-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line)}
.nav-row{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-size:14px;font-weight:650;letter-spacing:.01em;color:#112141}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{font-size:13px;color:#5b6d8a}
.site-footer{margin-top:54px;border-top:1px solid var(--line);background:#fff}
.site-footer .container{padding-top:18px;padding-bottom:28px}
.site-footer .en-body{font-size:12px;line-height:1.7;color:#6f7f97;letter-spacing:.06em;text-transform:uppercase}

/* Small editorial CTA */
.mini-cta{max-width:900px;margin:46px auto 0;padding:18px 18px 16px;border:1px solid #d9e3f6;border-radius:10px;background:#f8fbff}
.mini-cta h3{margin:0 0 8px;font-size:18px;line-height:1.35;color:#12284d}
.mini-cta p{margin:0 0 10px;font-size:15px;line-height:1.75;color:#3d4f6b}
.mini-cta-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border:1px solid #c8d7f6;border-radius:999px;background:#fff;color:#2f4e87;font-size:13px;text-decoration:none}
.mini-cta-btn:hover{background:#f4f8ff;text-decoration:none}

@media(max-width:640px){
  .container{padding:0 24px}
  .nav-row{min-height:54px}
  .brand{font-size:13px}
  .nav-links{gap:12px}
  .mini-cta{padding:16px 14px}
  .mini-cta h3{font-size:17px}
}

@media (prefers-reduced-motion: reduce){
  body.article-page .site-nav,
  body.article-page .article-hero,
  body.article-page .article-body,
  body.article-page .mini-cta,
  body.article-page .related,
  body.article-page .site-footer{animation:none !important}
}