/* Single typography authority. Legacy component rules cannot introduce extra sizes.
   Five roles: caption / body / card title / section title / display.
   Two weights: regular (400) and emphasis (600). */
:root {
  --font-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --type-caption: .875rem;
  --type-body: 1rem;
  --type-title: 1.25rem;
  --type-section: 2.5rem;
  --type-display: 4rem;
}
body, body * {
  font-family: var(--font-ui) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
body { line-height: 1.7; }
body :is(h1,h2,h3,h4,strong,b,summary,button,.button),
body :is(h1,h2,h3,h4,strong,b,summary,button,.button) * { font-weight: 600 !important; }
body :is(h1,h1 *,.price) { font-size: var(--type-display) !important; line-height: 1.15; }
body :is(h2,h2 *) { font-size: var(--type-section) !important; line-height: 1.3; }
body #mgCaption, body :is(h3,h3 *,.nav .brand strong) {
  font-size: var(--type-title) !important;
}
body .hero h1 [data-t=heroTitle1] { font-size: var(--type-section) !important; }
body :is(small,.eyebrow,.eyebrow *,.hero-meta,.hero-meta *,
  .map-resource,.map-resource *,.map-bridge,.map-bridge *,
  .destination-card>span,.destination-card>small,.future-chip,
  .compare-tag,.compare-number,.compare-number *,
  .mg-disclaimer,.mg-controls .mg-disclaimer,.mg-map>span,
  .mg-node,.mg-node *,.mg-output-node,.mg-output-node *,
  .mg-mesh-card strong,.mg-mesh-card small,.mg-paint-toolbar,.mg-paint-toolbar *,
  .mg-ue-toolbar,.mg-ue-toolbar *,
  .compatibility-note,.compatibility-note *,.price-timeline span,
  .stage-track,.stage-track *,#feedbackStatus,.draft,
  .footer-inner>span,.cta-inner>small) { font-size: var(--type-caption) !important; }
body :is(.eyebrow,.eyebrow *,.compare-tag,.mg-node,.mg-node *,
  .mg-map>span,.stage-track,.stage-track *,small) { font-weight: 400 !important; }
body .brand strong { font-weight: 600 !important; }
body .brand small { font-size: var(--type-caption) !important; font-weight: 400 !important; }

/* Responsive contract: a capped reading rail, not a viewport-sized poster.
   Ordinary windows use fixed type steps; the wide hero has a bounded shared scale. */
:root {
  --page-width:1180px;
  --page-gutter:20px;
  --hero-gap:56px;
  --hero-copy-size:1.125rem;
  --hero-product-size:2.5rem;
  --hero-heading-size:5.5rem;
}
html { -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
.container,.nav.container {
  width:100%; max-width:var(--page-width);
  margin-inline:auto; padding-inline:var(--page-gutter);
}
/* The header shares the same content rail and remains stable on wide screens. */
.nav-wrap { background:rgba(12,16,23,.96); border-bottom:1px solid var(--border); }
.nav {
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
  min-height:64px; height:auto; padding-block:8px; gap:24px;
}
.nav .brand { margin:0; gap:10px; flex-shrink:0; }
.nav .brand span { display:block; line-height:1; }
body .nav .brand strong { display:block; font-size:1.25rem!important; line-height:1.2; white-space:nowrap; }
.nav .brand img { width:28px; height:28px; min-width:28px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; object-fit:contain; }
.nav-links { display:flex; flex:0 1 auto; width:auto; order:0; gap:24px; padding:0; border:0; justify-content:center; }
body .nav-links a { display:inline-flex; align-items:center; min-height:44px; font-size:.9375rem!important; color:var(--sub); }
.nav-links a:hover { color:var(--text); }
.nav-actions { display:flex; align-items:center; flex-shrink:0; gap:16px; margin-left:0; }
body .nav-actions :is(.language,.language *,.purchase-button,.purchase-button *) { font-size:.9375rem!important; }
.nav .language { min-height:44px; padding:8px 0; color:var(--sub); }
.nav .language b { color:var(--text); }
.nav .language span { margin-inline:3px; }
.nav-actions .purchase-button { min-height:44px; padding:10px 18px; border-radius:999px; background:var(--button-blue,#3169db); color:#fff; box-shadow:none; }
.nav-actions .purchase-button:hover { background:var(--button-blue-hover,#3670df); box-shadow:none; }
.footer-brand img { width:24px; height:24px; border-radius:0; box-shadow:none; }
/* Keep title, explanation, action and reassurance grouped, not spread over 100vh. */
main > .hero { min-height:0; display:block; padding-block:96px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--hero-gap); align-items:center; }
.hero-copy,.hero-purchase-copy { min-width:0; max-width:none; padding:0; display:flex; flex-direction:column; justify-content:flex-start; gap:28px; }
.hero-purchase-copy .hero-intro { min-width:0; }
body .hero-purchase-copy .hero-cn-headline,
body .hero-purchase-copy .hero-cn-headline span {
  font-size:var(--hero-heading-size)!important; font-weight:600!important;
  line-height:1.12; white-space:normal; overflow-wrap:normal;
}
body .hero-purchase-copy .hero-cn-headline { width:auto; max-width:100%; margin:0 0 16px; text-wrap:balance; }
.hero-purchase-copy .hero-cn-headline span { display:block; color:inherit; }
.hero-cn-headline { color:var(--accent-soft); background-image:linear-gradient(120deg,var(--accent-soft),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
html[lang=en] .hero-cn-headline span { display:inline; }
html[lang=en] .hero-cn-headline span + span::before { content:' '; }
body .hero-purchase-copy .hero-product-name { width:auto; max-width:100%; font-size:var(--hero-product-size)!important; font-weight:600!important; line-height:1.25; color:var(--text); white-space:normal; margin:0 0 24px; }
body .hero-purchase-copy .hero-description { font-size:var(--hero-copy-size)!important; line-height:1.8; margin:0; max-width:36em; }
.hero-purchase-copy .hero-buttons { margin:0; flex-wrap:wrap; gap:12px; }
.hero-purchase-copy .hero-buttons .button { min-height:52px; padding:14px 22px; border-radius:999px; }
.hero-purchase-copy .hero-meta { margin:0; padding:0; gap:10px 18px; }
body #top .hero-purchase-copy .hero-meta,
body #top .hero-purchase-copy .hero-meta span { font-size:var(--type-caption)!important; color:var(--sub); }
.hero-purchase-copy .hero-meta > span { display:flex; align-items:center; gap:8px; }
.hero-check { width:18px; height:18px; flex:0 0 18px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.purchase-prices { display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap; }
body .purchase-prices del { font-size:inherit!important; font-weight:400!important; color:#d4def3; text-decoration-thickness:1.5px; }
body .purchase-prices strong { font-size:inherit!important; font-weight:600!important; color:#fff; }
.price-comparison { display:flex; align-items:baseline; flex-wrap:wrap; gap:18px; }
body .price-original { font-size:var(--type-title)!important; color:var(--sub); text-decoration-thickness:2px; }
body .price { font-weight:600!important; }
/* Keep the existing platform artwork and full names at a bounded, readable size. */
.platform-map .destination-card .software-logo { width:72px; height:72px; min-width:72px; flex:0 0 72px; padding:8px; }
.platform-map .destination-card .official-logo { width:54px; height:54px; max-width:100%; object-fit:contain; }
.platform-map .destination-card { padding:20px 12px; gap:12px; }
.platform-map .destination-card strong { width:100%; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; text-wrap:balance; }
.feature-card h3,.mg-scenarios button { line-height:1.5; }
/* Use small desktop gutters until the shared composition reaches its comfortable cap.
   Artwork owns its natural aspect ratio, rather than letterboxing inside a tall box. */
@media (min-width:1200px) {
  .hero-grid { width:calc(100% - 48px); max-width:1400px; padding-inline:0; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); column-gap:48px; align-items:center; }
  .hero-grid > .hero-copy { align-self:center; justify-content:flex-start; gap:28px; }
  .hero-grid > .hero-copy > .hero-meta { margin-top:-4px; }
  .hero-grid > .hero-gallery { align-self:center; min-height:0; box-shadow:none; }
  .hero-grid .gallery-stage { position:relative; inset:auto; aspect-ratio:1346 / 1030; }
  .hero-grid .gallery-slide { min-height:0; object-fit:contain; object-position:center; }
  .nav.container { width:calc(100% - 48px); max-width:1400px; padding-inline:0; }
  main > .hero { padding-block:80px 96px; }
  .hero-purchase-copy .hero-description { max-width:34em; }
}
@media (min-width:1200px) and (max-width:1399px) {
  :root { --hero-heading-size:4.5rem; --hero-product-size:2rem; }
  body .hero-purchase-copy .hero-cn-headline { margin-bottom:12px; }
  body .hero-purchase-copy .hero-product-name { margin-bottom:20px; }
}
/* The longer English copy uses a compact, fixed type step, not viewport scaling. */
@media (min-width:1200px) and (max-width:1399px) {
  html[lang=en] { --hero-heading-size:3.75rem; }
  html[lang=en] .hero-purchase-copy .hero-description { line-height:1.6; }
  html[lang=en] body .hero-purchase-copy .hero-cn-headline { margin-bottom:8px; }
  html[lang=en] body .hero-purchase-copy .hero-product-name { margin-bottom:16px; }
}
/* Layout changes at content breakpoints; no canvas/text measurement resizing. */
@media (min-width:900px) and (max-width:1100px) {
  .nav { gap:16px; }
  .nav-links { gap:18px; }
  .nav-actions { gap:12px; }
}
@media (max-width:1199px) {
  :root { --type-display:3rem; --hero-heading-size:3rem; --type-section:2rem; --hero-gap:40px; }
  main > .hero { padding-block:56px 64px; }
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .hero-grid > .hero-copy,.hero-grid > .hero-gallery { width:100%; max-width:680px; margin-inline:auto; }
  .nav { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; }
  .nav .brand { grid-row:1; grid-column:1; }
  .nav-actions { grid-row:1; grid-column:2; }
  .nav-links { grid-row:2; grid-column:1 / -1; justify-content:flex-start; }
  html { scroll-padding-top:128px; }
}
@media (max-width:600px) {
  :root { --page-gutter:20px; --type-display:2.5rem; --hero-heading-size:2.5rem; --hero-product-size:1.5rem; --hero-copy-size:1rem; --hero-gap:32px; }
  main > .hero { padding-block:40px 56px; }
  .nav.container { width:100%; margin-inline:auto; padding-inline:16px; }
  .nav { gap:4px 12px; }
  .nav .brand { gap:8px; grid-column:1 / -1; width:max-content; }
  body .nav .brand strong { font-size:1rem!important; }
  .nav .brand img { width:24px; height:24px; min-width:24px; }
  .nav-actions { display:contents; }
  .nav-actions .language { grid-row:1; grid-column:2; justify-self:end; }
  .nav-actions .purchase-button { grid-row:2; grid-column:2; padding:8px 12px; min-height:44px; justify-self:end; }
  body .nav-actions :is(.language,.language *,.purchase-button,.purchase-button *) { font-size:.875rem!important; }
  .nav-links { grid-row:3; grid-column:1 / -1; }
  .hero-copy,.hero-purchase-copy { gap:24px; }
  body .hero-purchase-copy .hero-product-name { margin-bottom:20px; }
  .hero-purchase-copy .hero-buttons .button { padding:12px 18px; }
  .platform-map .destination-card .software-logo { width:64px; height:64px; min-width:64px; flex-basis:64px; padding:8px; }
  .platform-map .destination-card .official-logo { width:48px; height:48px; }
  .platform-map .destination-card { padding:16px 10px; }
}
@media (max-width:359px) {
  :root { --page-gutter:16px; --type-display:2.25rem; --hero-heading-size:2.25rem; --hero-product-size:1.375rem; }
  .nav.container { padding-inline:12px; }
  body .nav .brand strong { font-size:.9375rem!important; }
}
/* Wide-screen enhancement: scale the approved 1400px composition as one system.
   1448px and below stay unchanged; the hero grows at most 20%. Use layout sizes,
   never transforms/zoom, so images stay complete and following content flows. */
@media (min-width:1448px) {
  .hero-grid {
    --hero-wide-unit:clamp(.0625rem, calc((100vw - 48px) / 1400), .075rem);
    --hero-heading-size:calc(88 * var(--hero-wide-unit));
    --hero-product-size:calc(40 * var(--hero-wide-unit));
    --hero-copy-size:calc(18 * var(--hero-wide-unit));
    --type-body:calc(16 * var(--hero-wide-unit));
    --type-caption:calc(14 * var(--hero-wide-unit));
    max-width:1680px;
    column-gap:calc(48 * var(--hero-wide-unit));
  }
  .hero-grid > .hero-copy { gap:calc(28 * var(--hero-wide-unit)); }
  .hero-grid > .hero-copy > .hero-meta { margin-top:calc(-4 * var(--hero-wide-unit)); }
  body .hero-purchase-copy .hero-cn-headline { margin-bottom:calc(16 * var(--hero-wide-unit)); }
  body .hero-purchase-copy .hero-product-name { margin-bottom:calc(24 * var(--hero-wide-unit)); }
  .hero-purchase-copy .hero-buttons { gap:calc(12 * var(--hero-wide-unit)); }
  .hero-purchase-copy .hero-buttons .button {
    min-height:calc(52 * var(--hero-wide-unit));
    padding:calc(14 * var(--hero-wide-unit)) calc(22 * var(--hero-wide-unit));
    gap:calc(14 * var(--hero-wide-unit));
  }
  .hero-purchase-copy .button svg { width:calc(18 * var(--hero-wide-unit)); height:calc(18 * var(--hero-wide-unit)); }
  .hero-purchase-copy .purchase-prices { gap:calc(8 * var(--hero-wide-unit)); }
  .hero-purchase-copy .hero-meta { gap:calc(10 * var(--hero-wide-unit)) calc(18 * var(--hero-wide-unit)); }
  .hero-purchase-copy .hero-meta > span { gap:calc(8 * var(--hero-wide-unit)); }
  .hero-purchase-copy .hero-check { width:calc(18 * var(--hero-wide-unit)); height:calc(18 * var(--hero-wide-unit)); flex-basis:calc(18 * var(--hero-wide-unit)); }
  .nav.container { max-width:1680px; }
}