/* A stable brand landscape across public sections; article surfaces and site colours are preserved. */
.section-banner,.section-banner *,.section-return,.section-return * { box-sizing:border-box; }
.section-banner { --section-width:1280px; font-family:"PingFang SC","Microsoft YaHei",system-ui,Arial,sans-serif; color:var(--glass-ink,#153250); }
.section-banner-stage { position:relative; overflow:hidden; background:radial-gradient(ellipse at 77% 74%,#f4e3cb80,transparent 38%),linear-gradient(115deg,#f1f7ff,#eaf3ff 65%,#f8faff); }
.section-banner-inner { width:calc(100% - 80px); max-width:var(--section-width); margin:0 auto; min-height:330px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:32px; }
.section-banner-copy { position:relative; padding:40px 0; }
.section-banner .section-banner-brand { margin:0 0 20px; color:#50759b; font-size:12px; font-weight:600; letter-spacing:.16em; line-height:1.8; }
.section-banner .section-banner-title { margin:0; font-size:clamp(32px,3.2vw,48px); font-weight:650; letter-spacing:-.035em; line-height:1.5; color:#173d68; }
.section-banner-title>span { display:block; }.section-banner-title em { font-style:normal; color:#1764df; }
.section-banner .section-banner-pack { width:500px; max-width:100%; margin:0; justify-self:end; pointer-events:none; mix-blend-mode:multiply; }
.section-banner-pack img { width:100%; height:auto; aspect-ratio:1185/897; object-fit:contain; display:block; mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); }
/* Extract only the supplied default pack silhouette; replacement uploads keep their own composition. */
.section-banner .section-banner-pack:has(img[src^="/static/images/package-family-20261102.png"]) { mix-blend-mode:normal; filter:drop-shadow(0 18px 16px #183d6726); }
:is(.section-banner-pack,.hero-product) img[src^="/static/images/package-family-20261102.png"] { mask-image:none; clip-path:polygon(43.7% 9.8%,93.7% 9.8%,95.2% 14.3%,95.2% 69.5%,83.3% 69.5%,83.3% 76.5%,71.6% 76.5%,71.6% 83.7%,60.8% 83.7%,60.8% 91%,11.2% 91%,10.1% 87%,10.1% 39.8%,21% 39.8%,21% 32.2%,33.3% 32.2%,33.3% 25%,44.6% 25%); }
.section-route-bar { background:rgba(250,253,255,.91); border-top:1px solid #ffffff; border-bottom:1px solid #dce7f4; }
.section-route-inner { width:calc(100% - 80px); max-width:1280px; min-height:68px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0; }
.section-crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; line-height:1.7; min-width:0; }
.section-crumbs a { color:#57718e; text-decoration:none; }.section-crumbs span { color:#b2c5d9; }.section-crumbs a[aria-current] { color:#234c78; font-weight:600; }
.section-return-links { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin:0; }
.section-back,.section-home,.section-to-top { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:44px; padding:8px 17px; border:1px solid #d4e2f2; border-radius:25px; color:#335f8e; background:#ffffffca; text-decoration:none; font-size:13px; line-height:1.6; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.section-back svg,.section-to-top svg { width:17px; height:17px; flex:0 0 17px; }
.section-back:is(:hover,:focus-visible),.section-home:is(:hover,:focus-visible),.section-to-top:is(:hover,:focus-visible) { background:#fff; border-color:#a4c5e9; color:#1764df; }
.section-back:is(:hover,:focus-visible) svg { transform:translateX(-2px); }.section-back svg { transition:transform .2s; }
.section-return { box-sizing:border-box; max-width:1280px; width:calc(100% - 80px); margin:38px auto 48px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; border-top:1px solid #d8e5f3; font-family:"PingFang SC","Microsoft YaHei",system-ui,Arial,sans-serif; }
.section-to-top { background:transparent; border-color:transparent; }
/* The academy keeps its original headings, text and category links below the shared banner. */
body .has-section-banner .academy-hero { overflow:visible; background:transparent; border:0; }
body .has-section-banner .academy-hero-inner { display:block; min-height:0; padding-top:34px; padding-bottom:0; }
body .has-section-banner .academy-title { font-size:clamp(28px,2.5vw,36px); }
body .has-section-banner .academy-intro { max-width:800px; margin-top:13px; }
body .has-section-banner .academy-kicker { margin-bottom:12px!important; }
body .has-section-banner .academy-categories { margin-top:22px; }
body .has-section-banner .academy-bottom-nav { justify-content:center; margin-top:26px; }
/* Calm section openings: no second large decorative band after the brand landscape. */
body .has-section-banner :is(.research-masthead,.review-heading,.policy-heading) { background:transparent; padding-top:32px; }
body .has-section-banner>.main-channel-label { margin-top:34px; margin-bottom:30px; }
body .has-section-banner>.page-heading { margin-top:34px; }
body .has-section-banner>.legal-content { margin-top:34px; }
body .section-banner~:is(.topic-page,.topics-page,.glossary-page,.research-detail) { padding-top:32px; }
/* The homepage retains all text and actions, using the same genuine packaging silhouette. */
body.home-page .home-hero { background:radial-gradient(ellipse at 77% 74%,#f4e3cb80,transparent 38%),linear-gradient(115deg,#f1f7ff,#eaf3ff 65%,#f8faff); }
body.home-page .hero-product { background:transparent; border-color:transparent; outline:0; box-shadow:none; padding-left:0; padding-right:0; }
body.home-page .hero-product picture { mix-blend-mode:multiply; }
body.home-page .hero-product picture:has(img[src^="/static/images/package-family-20261102.png"]) { mix-blend-mode:normal; filter:drop-shadow(0 18px 16px #183d6726); }
body.home-page .hero-product img { width:100%; max-width:550px; height:auto; object-fit:contain; mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); margin:16px auto 22px; }
@media(min-width:1800px) { .section-banner-inner,.section-route-inner,.section-return { max-width:1380px; }.section-banner-inner { min-height:360px; }.section-banner .section-banner-pack { width:530px; } }
@media(max-width:1000px) { .section-banner-inner,.section-route-inner,.section-return { width:calc(100% - 48px); }.section-banner-inner { min-height:290px; gap:20px; }.section-banner .section-banner-title { font-size:34px; } }
@media(max-width:767px) {
  .section-banner-inner,.section-route-inner,.section-return { width:calc(100% - 40px); }
  .section-banner-inner { min-height:0; grid-template-columns:minmax(0,1fr) minmax(0,.88fr); gap:8px; padding:26px 0; }
  .section-banner-copy { padding:0; }.section-banner .section-banner-brand { font-size:10px; margin-bottom:12px; letter-spacing:.03em; }
  .section-banner .section-banner-title { font-size:clamp(21px,4.5vw,30px); line-height:1.65; }
  .section-banner .section-banner-pack { width:100%; }.section-banner-pack img { transform:none; }
  .section-route-inner { min-height:0; gap:8px; flex-wrap:wrap; padding:10px 0; }.section-crumbs { gap:8px; font-size:12px; }.section-return-links { gap:7px; }
  .section-back,.section-home,.section-to-top { font-size:12px; padding:8px 12px; }
  .section-return { margin:28px auto 32px; align-items:flex-start; gap:10px; padding-top:20px; }
  .section-return .section-return-links { justify-content:flex-start; }.section-to-top { white-space:nowrap; }
  body .has-section-banner .academy-hero-inner { padding-top:26px; padding-bottom:0; }.has-section-banner .academy-title { font-size:27px; }
  body .has-section-banner :is(.research-masthead,.review-heading,.policy-heading) { padding-top:26px; }
  html[lang=en] .section-banner .section-banner-title { font-size:clamp(19px,4vw,27px); letter-spacing:-.03em; }
  html[lang=en] .section-route-inner { align-items:flex-start; }
}
@media(max-width:359px) { .section-banner-inner,.section-route-inner,.section-return { width:calc(100% - 32px); }.section-banner-inner { grid-template-columns:1fr .85fr; gap:4px; }.section-banner .section-banner-title { font-size:19px; }.section-banner .section-banner-brand { font-size:9px; }.section-to-top { padding-left:4px; padding-right:4px; } }
/* Native cross-document transitions keep the common landscape steady while content changes.
   Browsers without this enhancement retain normal server-rendered navigation. */
@view-transition { navigation:auto; }
.section-banner-stage { view-transition-name:section-landscape; }
.site-navigation,.home-page .home-header { view-transition-name:section-navigation; }
::view-transition-group(section-landscape),::view-transition-group(section-navigation) { animation-duration:0s; }
::view-transition-old(section-landscape),::view-transition-new(section-landscape),
::view-transition-old(section-navigation),::view-transition-new(section-navigation) { animation:none; mix-blend-mode:normal; }
::view-transition-old(root) { animation:section-page-out .16s ease-out both; }
::view-transition-new(root) { animation:section-page-in .2s ease-out both; }
@keyframes section-page-out { to { opacity:0; } }
@keyframes section-page-in { from { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  .section-back,.section-back svg,.section-home,.section-to-top { transition:none; }
  .section-back:is(:hover,:focus-visible) svg { transform:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }
}
@media print { .section-banner,.section-return { display:none; } }
