/* MyAgentHubs — research article template.
   Loads after /assets/style.css (the site shell), which already supplies
   :root tokens, body/a/.wrap resets, nav/lang-switcher/.btn. Everything
   here is scoped under .research-article so it cannot leak into or clash
   with the generic .hero/.kicker/.grid rules the product pages use.

   Site shell's own <nav> is `position:sticky;top:0` and 60px tall (see
   site/assets/style.css) — the values below that reference "60px" are
   accounting for that fixed header, not a magic number of our own.

   Scale: web scale (tokens.md §二) — body 14–15px, secondary 12.5–13px,
   radii 12/14px, spacing 8–10 / 14 / 20–26px. Chapter-level narrative
   follows the shared content grid; dense evidence components manage their
   own internal measure. */

.research-article {
  --topbar-h: 48px;
  --rail-w: 300px;
  --content-w: 1040px;
  /* Single z-index scale for this component (do not open a new layer
     elsewhere in this file; .backtop is a fixed-position sibling of
     .research-article, not a descendant, so it carries its own literal
     z-index: 8 below, one step under --rc-z-masthead). Kept below the
     site shell's own nav (z:10) and lang-menu (z:20) since our masthead
     sits directly under the site nav and never needs to compete with it. */
  --rc-z-masthead: 9;
  --rc-z-rail: 2;
  /* Safety net against page-level horizontal scroll (a 100vw figure plus a
     classic scrollbar, a long unbreakable URL…). `clip`, not `hidden`: clip
     does not create a scroll container, so the sticky masthead keeps
     sticking to the document. */
  overflow-x: clip;
  line-break: strict;
  overflow-wrap: break-word;
}

.research-article :is(.num, .tl .t, .meta-row, .fig-tag, .stat .src) {
  font-variant-numeric: tabular-nums;
}

.research-article .ic { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -3px; }

/* ---------- masthead: contents toggle · title · current-section indicator · PDF link ---------- */
.research-article .masthead { position: sticky; top: 60px; z-index: var(--rc-z-masthead); background: var(--bg); border-bottom: 1px solid var(--line); }
.research-article .masthead-in { display: flex; align-items: center; gap: 14px; height: var(--topbar-h); max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.research-article .masthead .brand { font-family: var(--mono); font-size: 12.8px; font-weight: 700; color: var(--ink); flex: none; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
.research-article .masthead .brand:hover { color: var(--accent-dk); }
.research-article .masthead .current-sec { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.8px; color: var(--ink-3); font-family: var(--mono); text-align: center; }
.research-article .masthead .actions { display: flex; align-items: center; gap: 8px; flex: none; }
.research-article .masthead :is(button, .pdf-nav-link) { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font-size: 12.3px; font-family: var(--mono); color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; cursor: pointer; flex: none; white-space: nowrap; text-decoration: none; }
.research-article .masthead :is(button, .pdf-nav-link):hover { border-color: var(--ink-3); color: var(--ink); }
.research-article .masthead .mtoggle[aria-expanded="true"] { border-color: var(--accent-dk); color: var(--accent-dk); }
/* m-wordmark（品牌 dot 回首页）与 m-lang（语言切换）只在 ≤680px 的单条
   banner 形态出现（见文件尾部 media block），桌面 masthead 不变。 */
.research-article .masthead .m-wordmark { display: none; flex: none; }
.research-article .masthead .m-wordmark .dot { width: 24px; height: 24px; }
.research-article .masthead .m-lang { display: none; flex: none; }
.research-article .progress-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.research-article .progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width .08s linear; }

.research-article header.hero { padding: 60px 0 36px; border-bottom: 1px solid var(--line); background: var(--panel); text-align: left; }
.research-article header.hero .kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); font-weight: 700; }
.research-article header.hero h1 { font-size: clamp(26px, 4.1vw, 40px); line-height: 1.28; letter-spacing: -.02em; font-weight: 750; margin-top: 14px; color: var(--ink); }
.research-article header.hero h1 em { font-style: normal; color: var(--accent); }
.research-article .hero-cta { margin-top: 18px; }
.research-article .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.research-article .hero-cta a.deck-link { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; }
.research-article .hero-cta a.deck-link:hover { border-color: var(--ink-3); }
@media print { .research-article .hero-cta { display: none !important; } }
.research-article .hero-sub { color: var(--ink-2); font-size: 16px; line-height: 1.75; max-width: 42em; margin-top: 16px; }
.research-article .meta-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.research-article .meta-row span { font-size: 12.3px; font-family: var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; background: var(--panel); }
.research-article .meta-row b { color: var(--ink-2); font-weight: 650; }
.research-article .rev-note { margin-top: 18px; font-size: 13.3px; line-height: 1.7; color: var(--ink-2); max-width: 42em; border-left: 2px solid var(--accent); padding-left: 12px; }

/* ---------- centered narrative + on-demand floating contents ----------
   The rail is a fixed overlay: opening it never reflows the article. On
   desktop it drops in under the contents toggle at the left edge of the
   1160px masthead (50vw − 580px + 32px padding); ≤1024px it slides in from
   the right as a sheet. */
.research-article .layout { max-width: 1160px; margin: 0 auto; padding: 0 32px; display: block; min-width: 0; }
.research-article .rail { position: fixed; left: max(16px, calc(50vw - 548px)); top: calc(60px + var(--topbar-h) + 12px); width: var(--rail-w); max-height: calc(100vh - 60px - var(--topbar-h) - 32px); max-height: calc(100dvh - 60px - var(--topbar-h) - 32px); overflow-y: auto; z-index: var(--rc-z-rail); padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 22px 60px -28px rgba(42,38,34,.42); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.research-article .rail.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.research-article .rail h2 { font-size: 11.3px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; font-weight: 700; }
.research-article .rail ol { list-style: none; }
.research-article .rail li { border-left: 2px solid var(--line); margin-bottom: 1px; transition: border-color .15s; }
.research-article .rail li.active { border-left-color: var(--accent); }
.research-article .rail a { display: block; padding: 7px 0 7px 12px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.research-article .rail a:hover { color: var(--ink); }
.research-article .rail li.active a { color: var(--ink); font-weight: 700; }
.research-article .rail a b { font-family: var(--mono); color: var(--ink-3); font-weight: 700; min-width: 22px; display: inline-block; }
.research-article .rail li.active a b { color: var(--accent-dk); }
.research-article .main { min-width: 0; max-width: var(--content-w); margin-inline: auto; }

/* One report, three entry points. These links do not introduce another
   summary artifact; they route readers into the same canonical content. */
.research-article .read-paths { margin: 30px 0 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.research-article .read-paths-label { font: 700 12.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.research-article .read-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.research-article .read-path-grid a { min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--bg); text-decoration: none; }
.research-article .read-path-grid a:hover { border-color: var(--accent-dk); background: var(--panel); }
.research-article .read-path-num { font: 700 12.5px/1 var(--mono); color: var(--accent-dk); }
.research-article .read-path-grid b { display: block; font-size: 14px; line-height: 1.3; }
.research-article .read-path-grid small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.research-article .read-path-arrow { color: var(--accent-dk); font-size: 15px; }

/* Inline (no-JS, front-matter) contents: hidden on desktop where the rail
   covers it, shown ≤1024px — see the media block below. */
.research-article .mobile-toc { display: none; }

.research-article section[id] { scroll-margin-top: calc(60px + var(--topbar-h) + 12px); }

.research-article section { padding: 72px 0 8px; }
.research-article .sec-head { margin-bottom: 26px; padding-top: 0; border-top: 0; }
.research-article .section-divider { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 19px; }
.research-article .section-divider > span { height: 1px; background: var(--accent); opacity: .58; }
.research-article .panda-mark { display: block; width: 48px; height: 34px; overflow: visible; }
.research-article .panda-ear, .research-article .panda-eye { fill: var(--ink); }
.research-article .panda-face { fill: var(--panel); stroke: var(--ink); stroke-width: 1.6; }
.research-article .panda-pupil { fill: var(--panel); }
.research-article .panda-nose { fill: var(--accent); }
.research-article .sec-head .kicker { display: block; margin-bottom: 10px; font-size: 13px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); font-weight: 700; }
.research-article .sec-head h2 { font-size: 27px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.research-article .sec-head p { color: var(--ink-2); font-size: 15.3px; line-height: 1.8; max-width: none; margin-top: 12px; }
.research-article .subhead { font-size: 15.5px; line-height: 1.4; margin: 28px 0 10px; color: var(--ink); }
.research-article .subhead-intro { color: var(--ink-2); font-size: 14px; line-height: 1.7; max-width: none; margin-bottom: 16px; }
.research-article .report-figure { margin: 0; min-width: 0; }

/* ---------- McKinsey-style information architecture ---------- */
/* Chapter takeaways use whitespace and numbering rather than stacked rules.
   The chapter heading already establishes the boundary; repeating lines
   around every sentence made the summary feel procedural and over-built. */
.research-article .takeaways { background: transparent; padding: 2px 0 4px; margin: 0 0 30px; }
.research-article .takeaways .lbl { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin-bottom: 10px; }
.research-article .takeaways ol { list-style: none; counter-reset: tk; }
.research-article .takeaways li { counter-increment: tk; position: relative; padding: 0 0 0 30px; font-size: 14px; line-height: 1.7; color: var(--ink); max-width: none; }
.research-article .takeaways li + li { margin-top: 12px; }
.research-article .takeaways li::before { content: counter(tk, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--accent-dk); }

.research-article .exec-box { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 12px 12px 0; padding: 22px 26px 20px; font-size: 15.3px; line-height: 1.8; color: var(--ink); margin-top: 18px; }
.research-article .exec-box p { max-width: none; }
.research-article .exec-box p + p { margin-top: 12px; }
.research-article .exec-box b { color: var(--ink); }

/* Every chapter uses one 1040px reading grid. Headings, summaries, figures,
   cases and editorial rows share the same outer edges so the page no longer
   jumps between narrow and wide compositions. */
.research-article .operating-model { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 30px 0 34px; }
@media screen and (min-width: 1025px) {
  .research-article .operating-model, .research-article .tblwrap { margin-inline: 0; }
}
.research-article .model-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 18px 0; align-items: start; }
.research-article .model-row + .model-row { margin-top: 4px; }
.research-article .model-label { font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dk); }
.research-article .model-flow { color: var(--ink-2); font-size: 13px; }
.research-article .model-flow-new { color: var(--ink); }
.research-article .model-note { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--accent); }
.research-article .model-note a { color: var(--accent-dk); text-decoration: underline; }

/* Figure furniture: tag (mono, accent-dk) → one-sentence reading (fig-cap)
   → the figure → source line. The caption carries the "so what" and is set
   in running-text ink-2 so it is read, not skimmed past as a label. */
.research-article .fig-tag { display: block; font-family: var(--mono); font-size: 11.8px; letter-spacing: .075em; text-transform: uppercase; color: var(--accent-dk); font-weight: 700; margin: 28px 0 6px; }
.research-article .fig-cap { font-size: 13.8px; line-height: 1.7; color: var(--ink-2); max-width: none; margin: 0 0 14px; }
.research-article .fig-src { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); font-family: var(--mono); line-height: 1.8; overflow-wrap: anywhere; }

.research-article blockquote.pull { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 12px 12px 0; padding: 22px 26px; margin: 18px 0; }
.research-article blockquote.pull, .research-article blockquote.pull p { font-size: 18.5px; line-height: 1.55; color: var(--ink); font-weight: 650; letter-spacing: -.01em; }
.research-article blockquote.pull .who { display: block; margin-top: 14px; font-size: 12px; color: var(--ink-3); font-family: var(--mono); font-weight: 400; }

.research-article .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 6px; }
.research-article .stat { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 20px 20px 16px; box-shadow: 0 18px 44px -34px rgba(42,38,34,.25); }
.research-article .stat .num { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.research-article .stat .lab { font-size: 13.3px; color: var(--ink-2); margin-top: 9px; line-height: 1.6; }
.research-article .stat .src { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); margin-top: auto; padding-top: 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.research-article .stat .src a, .research-article .fig-src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.research-article .stat .src a:hover, .research-article .fig-src a:hover { color: var(--accent-dk); text-decoration-color: currentColor; }
/* One rule for every in-text link: accent-dk (4.65:1 on --bg) with a
   hairline underline that darkens on hover. Chips have their own style. */
.research-article :is(.exec-box, .takeaways, .fig-cap, .subhead-intro, .card p, .note, .tl li, .co-sum, .stat .lab, .sec-head p, .tension, .fact, .model-step, .vcard .purpose, blockquote, td) a:not(.chip) { color: var(--accent-dk); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.research-article :is(.exec-box, .takeaways, .fig-cap, .subhead-intro, .card p, .note, .tl li, .co-sum, .stat .lab, .sec-head p, .tension, .fact, .model-step, .vcard .purpose, blockquote, td) a:not(.chip):hover { text-decoration-color: currentColor; }
.research-article .co-index { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.3px; line-height: 1.5; max-width: none; }
.research-article .co-index .lbl { font-family: var(--mono); font-size: 10.8px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-right: 4px; }
.research-article .company[id] { scroll-margin-top: calc(60px + var(--topbar-h) + 12px); }

.research-article .case-index { margin: 14px 0 28px; }
.research-article .case-index .co-index { margin: 0; padding: 12px 0 0; }

.research-article .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.research-article .card { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 22px 22px 20px; box-shadow: 0 18px 44px -34px rgba(42,38,34,.25); }
.research-article .card h3 { font-size: 16.3px; line-height: 1.35; margin-bottom: 9px; color: var(--ink); }
.research-article .card p { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.research-article .card .idx { font-family: var(--mono); font-size: 11.3px; color: var(--accent-dk); letter-spacing: .09em; font-weight: 700; margin-bottom: 9px; text-transform: uppercase; }

/* Three drivers: the report's thesis leads at full width; the two supporting
   forces share the next row. Importance determines geometry, not copy length. */
.research-article .driver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.research-article .driver-card { min-width: 0; }
.research-article .driver-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); column-gap: 30px; border-left: 3px solid var(--accent); border-radius: 0 13px 13px 0; }
.research-article .driver-feature .idx { grid-column: 1; grid-row: 1; align-self: end; }
.research-article .driver-feature h3 { grid-column: 1; grid-row: 2; align-self: start; font-size: 20px; margin: 0; }
.research-article .driver-feature p { grid-column: 2; grid-row: 1 / span 2; font-size: 14.5px; line-height: 1.78; }

/* The chapter summary already names all three drivers. Repeat neither the
   labels nor an ornamental convergence diagram; move directly into the
   source-bearing explanation as calm editorial rows. */
.research-article .driver-convergence { margin-top: 2px; }
.research-article .driver-details { border-top: 1px solid var(--line); }
.research-article .driver-detail { display: grid; grid-template-columns: minmax(160px, .56fr) minmax(0, 1.44fr); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.research-article .driver-detail-head span { font: 700 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dk); }
.research-article .driver-detail-head h3 { margin-top: 7px; font-size: 17px; line-height: 1.4; color: var(--ink); }
.research-article .driver-detail p { font-size: 14px; line-height: 1.78; color: var(--ink-2); }
.research-article .driver-detail a { color: var(--accent-dk); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }

/* CH.01 preserves unlike denominators by grouping signals instead of
   pretending that percentages, headcount and span-of-control share an axis. */
.research-article .signal-groups { display: grid; gap: 0; border-block: 1px solid var(--line); }
.research-article .signal-group { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 20px 0; }
.research-article .signal-group + .signal-group { border-top: 1px solid var(--line); }
.research-article .signal-group > header { padding-top: 4px; }
.research-article .signal-group > header h3 { font-size: 15px; line-height: 1.4; color: var(--ink); }
.research-article .signal-group > header p { margin-top: 6px; font: 500 11.5px/1.55 var(--mono); color: var(--ink-3); }
.research-article .signal-items { display: grid; grid-template-columns: repeat(var(--signal-cols, 2), minmax(0, 1fr)); gap: 10px; }
.research-article .signal-workforce .signal-items { --signal-cols: 3; }
.research-article .signal-items .stat { min-height: 100%; padding: 15px 16px 14px; border-radius: 9px; box-shadow: none; }
.research-article .signal-items .stat .num { font-size: 25px; white-space: nowrap; }
.research-article .signal-items .stat .lab { font-size: 12.6px; line-height: 1.55; }
.research-article .signal-items .stat .src { font-size: 10.8px; line-height: 1.6; }

/* CH.01 is the chapter's primary answer, not a detached chart. */
.research-article .chart-variant-chapter-answer { border: 1px solid var(--line); background: var(--panel); padding: 0 24px 20px; }
.research-article .chart-variant-chapter-answer > figcaption { margin-inline: -24px; padding: 18px 24px 0; border-bottom: 1px solid var(--line); }
.research-article .chart-variant-chapter-answer .fig-tag { margin-top: 0; }
.research-article .chart-variant-chapter-answer .chartwrap { margin-top: 18px; }
.research-article .chart-variant-chapter-answer .py-top { border-radius: 0; background: var(--bg); }
.research-article .chart-variant-chapter-answer .py-mids { grid-template-columns: 1fr; gap: 8px; }
.research-article .chart-variant-chapter-answer .py-mid {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 0;
  border-radius: 0;
  padding: 12px 2px;
  background: transparent;
}
.research-article .chart-variant-chapter-answer .py-h { margin: 2px 0 0; font-size: 12px; }

/* Six-trend overview: one synthesis first, then three paired dimensions.
   It stays semantic HTML so labels remain exact, localizable and accessible. */
.research-article .trend-map-visual { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.78fr); gap: 28px; padding: 24px 26px; border: 1px solid var(--line); background: var(--panel); }
.research-article .trend-map-core { padding: 6px 26px 6px 0; border-right: 1px solid var(--line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.research-article .trend-map-core > span { font: 700 11.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-dk); }
.research-article .trend-map-core h3 { margin-top: 10px; font-size: 23px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.research-article .trend-map-core p { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.research-article .trend-axes { min-width: 0; }
.research-article .trend-axis { display: grid; grid-template-columns: 68px minmax(180px, .9fr) minmax(0, 1.25fr); gap: 16px; align-items: center; padding: 14px 0; }
.research-article .trend-axis + .trend-axis { border-top: 1px solid var(--line); }
.research-article .trend-axis-label { font: 700 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dk); }
.research-article .trend-axis h3 { font-size: 16px; line-height: 1.45; color: var(--ink); }
.research-article .trend-axis-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.research-article .trend-map-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 0; border-top: 1px dashed var(--line); }
.research-article .trend-map-item b { font: 700 11.5px/1.5 var(--mono); color: var(--accent-dk); }
.research-article .trend-map-item span { font-size: 12.8px; line-height: 1.55; color: var(--ink-2); }

/* Detailed trends: numbered editorial rows instead of another card wall. */
.research-article .editorial-list { margin-top: 28px; border-top: 1px solid var(--line); }
.research-article .editorial-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.research-article .editorial-index { padding-top: 3px; font: 700 11.8px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-dk); }
.research-article .editorial-copy h3 { font-size: 18px; line-height: 1.4; color: var(--ink); margin-bottom: 8px; }
.research-article .editorial-copy p { max-width: none; font-size: 14.3px; line-height: 1.78; color: var(--ink-2); }
.research-article .editorial-list-labelled .editorial-row { grid-template-columns: 1fr; gap: 7px; }
.research-article .editorial-list-labelled .editorial-index { padding-top: 0; max-width: none; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
.research-article .editorial-copy a { color: var(--accent-dk); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.research-article .editorial-evidence { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.research-article .editorial-evidence-label { flex: 0 0 74px; padding-top: 4px; font: 700 10.8px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.research-article .editorial-evidence-source { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 3px; min-width: 0; }
.research-article .editorial-evidence-source > b { font: 700 11.5px/1.6 var(--mono); color: var(--ink); }
.research-article .editorial-evidence .ev { margin-left: 2px; }

/* Industry viewpoints: four independent lenses around one question. The
   absence of arrows is intentional—the sources do not form a causal chain. */
.research-article .viewpoint-map-visual { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.78fr); gap: 28px; padding: 24px 26px; border-block: 1px solid var(--line); background: var(--panel); }
.research-article .viewpoint-lead { padding: 6px 26px 6px 0; border-right: 1px solid var(--line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.research-article .viewpoint-lead > span { font: 700 11.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-dk); }
.research-article .viewpoint-lead h3 { margin-top: 10px; font-size: 23px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.research-article .viewpoint-lead p { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.research-article .viewpoint-row { display: grid; grid-template-columns: 34px 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; }
.research-article .viewpoint-row + .viewpoint-row { border-top: 1px solid var(--line); }
.research-article .viewpoint-num { font: 700 11.5px/1.5 var(--mono); color: var(--accent-dk); }
.research-article .viewpoint-lens { font: 700 11.5px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.research-article .viewpoint-copy h3 { font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.research-article .viewpoint-copy p { margin-top: 5px; font-size: 12.8px; line-height: 1.6; color: var(--ink-2); }

@media screen and (min-width: 1025px) {
  .research-article .trend-map, .research-article .viewpoint-map { margin-inline: 0; }
}

/* Operating-practice questions use a wide evidence row instead of two
   competing columns. Company names inside the evidence text become clear
   scanning anchors without changing any authored claim. */
.research-article .evidence-grid { display: grid; gap: 14px; }
.research-article .evidence-card { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); gap: 24px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: 0 18px 44px -34px rgba(42,38,34,.25); }
.research-article .evidence-card .idx { font: 700 12.5px/1.5 var(--mono); color: var(--accent-dk); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 9px; }
.research-article .evidence-card h3 { font-size: 18px; line-height: 1.42; color: var(--ink); }
.research-article .evidence-body { font-size: 14px; line-height: 1.78; color: var(--ink-2); }
.research-article .evidence-unit { margin: 0; }
.research-article .evidence-unit + .evidence-unit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.research-article .evidence-unit > b { color: var(--ink); font-size: 13.5px; }
.research-article .evidence-body .ev { margin-top: 3px; }

.research-article .company-tools { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 30px 0 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.research-article .company-tools p { margin: 0; max-width: 42em; color: var(--ink-2); font-size: 12.5px; line-height: 1.6; }
.research-article .company-tools > div { display: flex; gap: 8px; flex: none; }
.research-article .company-tools button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink-2); font: 600 12.5px/1.3 var(--mono); cursor: pointer; }
.research-article .company-tools button:hover { color: var(--ink); border-color: var(--ink-3); }

.research-article .company { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0; margin-bottom: 14px; position: relative; overflow: hidden; box-shadow: 0 20px 50px -36px rgba(42,38,34,.3); }
.research-article .company::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, #D97757); }
.research-article .company > summary { position: relative; list-style: none; cursor: pointer; padding: 22px 62px 20px 26px; min-height: 44px; }
.research-article .company > summary::-webkit-details-marker { display: none; }
.research-article .company > summary::after { content: "+"; position: absolute; right: 24px; top: 22px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-dk); font: 600 17px/1 var(--mono); }
.research-article .company[open] > summary { border-bottom: 1px solid var(--line); }
.research-article .company[open] > summary::after { content: "−"; }
.research-article .company-detail { padding: 2px 26px 18px; }
.research-article .co-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; }
.research-article .co-head h3 { font-size: 19.5px; line-height: 1.3; color: var(--ink); }
.research-article .co-tag { font-size: 11.8px; line-height: 1.6; color: var(--cdk, var(--accent-dk)); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-family: var(--mono); }
.research-article .co-sum { color: var(--ink-2); font-size: 14.5px; line-height: 1.75; margin-bottom: 12px; max-width: none; }

.research-article .tl { margin: 14px 0 18px; padding-left: 18px; border-left: 2px solid var(--line); }
.research-article .tl li { list-style: none; position: relative; padding: 0 0 18px 16px; font-size: 14px; line-height: 1.7; color: var(--ink); max-width: none; }
.research-article .tl li::before { content: ""; position: absolute; left: -23px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #D97757); }
.research-article .tl li:last-child { padding-bottom: 2px; }
.research-article .tl .t { display: block; font-family: var(--mono); font-size: 11.8px; color: var(--cdk, var(--accent-dk)); font-weight: 700; letter-spacing: .02em; margin-bottom: 3px; }
.research-article .tl b { font-weight: 650; color: var(--ink); }
.research-article .tl .why { display: block; color: var(--ink-2); font-size: 13.3px; line-height: 1.65; margin-top: 4px; }

.research-article .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 16px 0; }
.research-article .fact { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.research-article .fact b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 3px; }

.research-article blockquote { border-left: 3px solid var(--accent); background: rgba(217,119,87,.06); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 16px 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.research-article blockquote .who { display: block; color: var(--ink-3); font-size: 12px; margin-top: 6px; font-family: var(--mono); }

.research-article .tension { border: 1px solid var(--line); border-left: 3px solid var(--ink); background: var(--bg); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 16px 0; font-size: 13.6px; line-height: 1.7; color: var(--ink-2); }
.research-article .tension .lbl { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.3px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 6px; }

.research-article .note { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 16px 20px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-top: 24px; }
.research-article .note .lbl { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.3px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dk); font-weight: 700; margin-bottom: 6px; }

.research-article .srcs { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.3px; color: var(--ink-3); line-height: 2; }
.research-article .srcs .lbl { font-family: var(--mono); font-size: 10.8px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-right: 6px; }
.research-article .srcs a.chip, .research-article .co-index a.chip { display: inline-block; margin: 2px 8px 2px 0; padding: 2px 10px; line-height: 1.6; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--accent-dk); }
.research-article .co-index a.chip { margin: 0; }
.research-article .srcs a.chip:hover, .research-article .co-index a.chip:hover { border-color: var(--ink-3); }

/* ---------- tables: horizontal-rule style, mono uppercase headers, no verticals ----------
   Desktop: the wrapper is the (both-axis) scroll container. Header row is
   sticky at its top, the company column is sticky at its left; both need an
   opaque token background. border-collapse is `separate` on purpose —
   collapsed borders do not travel with sticky cells. */
.research-article .tblwrap { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 60px - 40px); max-height: calc(100dvh - var(--topbar-h) - 60px - 40px); border: 1px solid var(--line); border-radius: 13px; background: var(--panel); margin-top: 22px; }
.research-article table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.6; min-width: 880px; }
.research-article th { position: sticky; top: 0; z-index: 2; background: var(--bg); color: var(--ink-2); text-align: left; font-weight: 650; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 11.3px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.research-article td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; background: var(--panel); }
.research-article tbody tr:nth-child(even) td { background: var(--bg); }
.research-article th:first-child, .research-article td:first-child { position: sticky; left: 0; border-right: 1px solid var(--line); }
.research-article th:first-child { z-index: 3; }
.research-article td:first-child { z-index: 1; }
.research-article th:nth-child(1) { width: 96px; }
.research-article th:nth-child(2) { width: 17%; }
.research-article th:nth-child(3) { width: 19%; }
.research-article th:nth-child(4) { width: 22%; }
.research-article th:nth-child(5) { width: 20%; }
.research-article th:nth-child(6) { width: 17%; }
.research-article td b { color: var(--ink); }
.research-article td:first-child b { font-size: 13.5px; }
.research-article td a { color: var(--accent-dk); text-decoration: underline; text-decoration-color: var(--line); }
.research-article tr:last-child td { border-bottom: none; }
/* Evidence column: the grade badge sits on its own line, the note beneath. */
.research-article td:last-child { font-size: 12.3px; color: var(--ink-3); }
.research-article td:last-child > .ev:first-child { display: block; width: fit-content; margin: 1px 0 5px; }

.research-article .refs-group { margin-bottom: 24px; }
.research-article .refs-group h3 { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.research-article .refs-group .srcs { border-top: none; padding-top: 0; margin-top: 0; }

/* Evidence appendices stay in the same document but do not dominate the
   default reading path. Print always expands them below. */
.research-article .evidence-drawer { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.research-article .evidence-drawer > summary { min-height: 52px; padding: 14px 18px; display: flex; align-items: center; cursor: pointer; list-style: none; color: var(--ink); font-size: 14px; font-weight: 700; }
.research-article .evidence-drawer > summary::-webkit-details-marker { display: none; }
.research-article .evidence-drawer > summary::after { content: "+"; margin-left: auto; color: var(--accent-dk); font: 600 17px/1 var(--mono); }
.research-article .evidence-drawer[open] > summary { border-bottom: 1px solid var(--line); }
.research-article .evidence-drawer[open] > summary::after { content: "−"; }
.research-article .evidence-drawer-body { padding: 18px; }

/* ---------- video sources: thumbnail card grid, not a text table ---------- */
.research-article .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 4px; }
.research-article .vcard { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: 0 18px 44px -34px rgba(42,38,34,.25); display: flex; flex-direction: column; }
.research-article .vcard .thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.research-article .vcard .thumb img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Primary experience, not a fallback in the usual sense: readers in regions
   where both youtube.com and i.ytimg.com are blocked (a large share of this
   article's audience) will always see this card, never the <img>. It has to
   read as intentional design, not a broken image. The <img> (alt="",
   onerror → display:none) is layered above it, so the placeholder is what
   shows while loading, on failure, and when the request never resolves. */
.research-article .vcard .thumb-fb { display: flex; position: absolute; inset: 0; z-index: 1; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 12px; background: repeating-linear-gradient(135deg, var(--line-soft) 0 2px, var(--bg) 2px 22px); }
.research-article .vcard .thumb-fb .play { width: 42px; height: 42px; border-radius: 50%; border: 1.6px solid var(--accent-dk); display: flex; align-items: center; justify-content: center; color: var(--accent-dk); background: rgba(255,254,251,.75); }
.research-article .vcard .thumb-fb .play svg { width: 16px; height: 16px; margin-left: 2px; }
.research-article .vcard .thumb-fb .fbch { font-size: 12.3px; font-weight: 650; color: var(--ink-2); }
.research-article .vcard .thumb-fb .fbidx { font-family: var(--mono); font-size: 10.8px; color: var(--ink-3); letter-spacing: .04em; }
.research-article .vcard .body { padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.research-article .vcard h4 { font-size: 14px; line-height: 1.42; color: var(--ink); font-weight: 650; }
.research-article .vcard h4 a:hover { color: var(--accent-dk); }
.research-article .vcard .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.8px; color: var(--ink-3); }
.research-article .vcard .badge { font-size: 10.6px; font-family: var(--mono); color: var(--accent-dk); border: 1px solid var(--accent-dk); border-radius: 999px; padding: 1px 8px; letter-spacing: .03em; }
.research-article .vcard .purpose { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; flex: 1; }
.research-article .vcard .open { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.6px; color: var(--accent-dk); font-family: var(--mono); }
.research-article .vcard .open:hover { color: var(--ink); }
.research-article .video-groupline { font-size: 15px; margin: 26px 0 12px; color: var(--ink); }
.research-article .video-groupline:first-of-type { margin-top: 0; }

.research-article .article-foot { margin-top: 56px; border-top: 1px solid var(--line); padding: 26px 0 44px; color: var(--ink-3); font-size: 12.3px; text-align: center; background: var(--panel); }
.research-article .article-foot p + p { margin-top: 6px; }

/* ---------- back-to-top ----------
   Rendered as a sibling of .research-article (fixed-position overlay), so
   this rule is intentionally unscoped — .backtop only exists on this
   template's pages. */
.backtop { position: fixed; right: 24px; bottom: 24px; z-index: 8; width: 44px; height: 44px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px -14px rgba(42,38,34,.4); display: flex; align-items: center; justify-content: center; color: var(--ink-2); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s, color .15s, border-color .15s; }
.backtop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.backtop:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- evidence provenance: localized grade + direct source links ---------- */
.research-article .ev { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; font: 600 10.5px/1.65 var(--mono); letter-spacing: .02em; padding: 2px 8px; border-radius: 7px; border: 1px solid; vertical-align: 1px; margin: 2px 3px 1px 4px; white-space: normal; }
.research-article .ev-grade { font-weight: 750; }
.research-article .ev-grade::after { content: " ·"; }
.research-article .ev-links { display: inline; }
.research-article .ev a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; }
.research-article .ev a::after { content: " ↗"; font-size: .9em; }
.research-article .ev a:hover { color: var(--ink); }
.research-article .ev-1 { color: #0B6B54; border-color: #0B6B54; background: rgba(11,107,84,.06); }
.research-article .ev-2 { color: var(--accent-dk); border-color: var(--accent-dk); background: rgba(217,119,87,.07); }
.research-article .ev-3 { color: var(--ink-3); border-color: var(--ink-3); background: var(--bg); }
.research-article td .ev { margin: 0 4px 2px 0; }
/* A six-column comparison table cannot carry pill-within-pill evidence.
   Render the same semantic component as a compact editorial footnote here;
   the color stripe preserves the grade without turning the cell into cards. */
.research-article .tblwrap td:last-child > .ev,
.research-article .tblwrap td:last-child > .ev:first-child {
  display: block;
  width: 100%;
  margin: 1px 0 7px;
  padding: 1px 0 1px 8px;
  border: 0;
  border-left: 2px solid currentColor;
  border-radius: 0;
  background: none;
  line-height: 1.55;
}

/* ---------- operating-model figure: labelled rows of step chains ---------- */
.research-article .operating-model .fig-tag { margin-top: 0; }
.research-article .model-row { align-items: start; }
.research-article .model-flow { counter-reset: model-step; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; border: 0; padding: 0; }
.research-article .model-flow::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 1px; background: var(--line); }
.research-article .model-flow-new { border: 0; }
.research-article .model-step { counter-increment: model-step; position: relative; min-width: 0; min-height: 82px; border: 0; border-radius: 0; padding: 38px 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); background: transparent; }
.research-article .model-step::before { content: counter(model-step, decimal-leading-zero); position: absolute; z-index: 1; left: 0; top: 0; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink-3); font: 700 9.5px/1 var(--mono); }
.research-article .model-flow-new .model-step { background: transparent; color: var(--ink); }
.research-article .model-flow-new .model-step::before { border-color: var(--accent); background: var(--accent); color: var(--panel); }
.research-article .model-step b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.research-article .model-arrow { display: none; }
.research-article .operating-model .fig-src { margin-top: 10px; }

/* =================== responsive =================== */
@media screen and (max-width: 1024px) {
  .research-article .rail { left: auto; right: 16px; top: calc(60px + var(--topbar-h) + 12px); width: min(360px, calc(100vw - 32px)); transform: translateY(-8px); }
  .research-article .rail a { min-height: 44px; display: flex; align-items: center; }
  .research-article .layout { display: block; }
  .research-article .main { max-width: 100%; }
  /* Inline contents (works without JS): a collapsed card above chapter 1. */
  .research-article .mobile-toc { display: block; margin: 24px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 0 18px; }
  .research-article .mobile-toc summary { cursor: pointer; padding: 13px 0; min-height: 44px; font-family: var(--mono); font-size: 12.3px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
  .research-article .mobile-toc summary::-webkit-details-marker { display: none; }
  .research-article .mobile-toc summary::after { content: "+"; margin-left: auto; font-size: 15px; color: var(--ink-3); }
  .research-article .mobile-toc[open] summary { border-bottom: 1px solid var(--line); }
  .research-article .mobile-toc[open] summary::after { content: "−"; }
  .research-article .mobile-toc ol { list-style: none; padding: 6px 0 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 20px; }
  .research-article .mobile-toc li { font-size: 13.5px; line-height: 1.5; border-bottom: 1px dashed var(--line); padding: 0; }
  .research-article .mobile-toc li:last-child { border-bottom: none; }
  .research-article .mobile-toc a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 0; color: var(--ink); font-weight: 600; }
  .research-article .mobile-toc a b { font-family: var(--mono); color: var(--accent-dk); font-weight: 700; min-width: 22px; flex: none; }
  .research-article .mobile-toc a span.d { font-weight: 400; color: var(--ink-3); margin-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .research-article .rail { transition: none; }
}

@media screen and (max-width: 820px) {
  .research-article { --topbar-h: 56px; }
  .research-article .masthead-in { padding: 0 20px; gap: 10px; }
  .research-article .masthead .brand { max-width: 34vw; }
  .research-article .masthead :is(button, .pdf-nav-link) { min-height: 44px; padding: 8px 11px; }
  .research-article .layout { padding: 0 20px; }
  .research-article .read-paths { margin-top: 20px; padding: 15px; }
  .research-article .read-path-grid { grid-template-columns: 1fr; gap: 8px; }
  .research-article .read-path-grid a { min-height: 64px; }
  .research-article .mobile-toc ol { grid-template-columns: 1fr; }
  .research-article section { padding: 48px 0 6px; }
  .research-article .sec-head { margin-bottom: 24px; }
  .research-article .section-divider { grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
  .research-article .panda-mark { width: 42px; height: 30px; }
  .research-article .sec-head h2 { font-size: 24px; }
  .research-article .sec-head .kicker { font-size: 12px; margin-bottom: 9px; }
  .research-article .takeaways { padding: 0; margin-bottom: 26px; }
  .research-article .exec-box { padding: 18px 18px 16px; font-size: 14.5px; }
  .research-article .co-index a.chip { padding: 4px 11px; }
  .research-article .case-index .co-index a.chip { min-height: 44px; display: inline-flex; align-items: center; }
  .research-article .card { padding: 18px 18px 16px; }
  .research-article .driver-grid { grid-template-columns: 1fr; }
  .research-article .driver-feature { grid-column: auto; display: block; }
  .research-article .driver-feature h3 { font-size: 18px; margin-bottom: 9px; }
  .research-article .driver-feature p { font-size: 14px; line-height: 1.72; }
  .research-article .driver-detail { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .research-article .driver-detail-head { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .research-article .driver-detail-head h3 { margin-top: 0; font-size: 16px; }
  .research-article .signal-group { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .research-article .signal-group > header { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); align-items: baseline; gap: 12px; }
  .research-article .signal-group > header p { margin-top: 0; }
  .research-article .signal-workforce .signal-items { --signal-cols: 2; }
  .research-article .chart-variant-chapter-answer { padding: 0 18px 18px; }
  .research-article .chart-variant-chapter-answer > figcaption { margin-inline: -18px; padding: 16px 18px 0; }
  .research-article .chart-variant-chapter-answer .py-mid { display: block; padding: 11px 0; }
  .research-article .chart-variant-chapter-answer .py-h { margin: 0 0 4px; }
  .research-article .trend-map-visual { grid-template-columns: 1fr; gap: 0; padding: 20px 18px; }
  .research-article .trend-map-core { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .research-article .trend-map-core h3 { font-size: 21px; }
  .research-article .trend-axis { grid-template-columns: 58px minmax(0, 1fr); gap: 10px 14px; padding: 16px 0; align-items: start; }
  .research-article .trend-axis-items { grid-column: 1 / -1; }
  .research-article .editorial-row { grid-template-columns: 1fr; gap: 7px; padding: 21px 0; }
  .research-article .editorial-copy h3 { font-size: 17px; }
  .research-article .viewpoint-map-visual { grid-template-columns: 1fr; gap: 0; padding: 20px 18px; }
  .research-article .viewpoint-lead { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .research-article .viewpoint-lead h3 { font-size: 21px; }
  .research-article .viewpoint-row { grid-template-columns: 30px 88px minmax(0, 1fr); gap: 10px; padding: 15px 0; }
  .research-article .stat { padding: 18px 18px 14px; }
  .research-article .stat .num { font-size: 28px; }
  .research-article .evidence-card { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .research-article .evidence-card h3 { font-size: 17px; }
  .research-article .company-tools { align-items: stretch; flex-direction: column; }
  .research-article .company-tools > div { display: grid; grid-template-columns: 1fr 1fr; }
  .research-article .company > summary { padding: 20px 58px 18px 18px; }
  .research-article .company > summary::after { right: 16px; top: 18px; }
  .research-article .company-detail { padding: 2px 18px 14px; }
  .research-article .company > summary .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; }
  .research-article .company > summary .fact { padding: 9px 10px; font-size: 11.8px; line-height: 1.45; }
  .research-article .company > summary .fact b { font-size: 14px; }
  .research-article .co-sum { margin-bottom: 14px; }
  .research-article .tl li { padding-bottom: 16px; }
  .research-article .note { padding: 14px 16px; }
  .research-article .operating-model { margin: 24px 0 28px; padding: 0; }
  .research-article .model-row { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }
  .research-article .model-label { padding: 0; }
  .research-article .model-flow { grid-template-columns: 1fr; gap: 0; }
  .research-article .model-flow::before { left: 14px; right: auto; top: 14px; bottom: 20px; width: 1px; height: auto; }
  .research-article .model-step { min-height: 0; padding: 0 0 20px 44px; }
  .research-article .model-step:last-child { padding-bottom: 0; }
  .research-article .model-arrow { display: none; }

  /* Comparison table → one card per company. The header row is dropped;
     each cell restates its column via data-th (emitted by render_table). */
  .research-article .tblwrap { overflow: visible; max-height: none; border: 0; border-radius: 0; background: transparent; margin-top: 18px; }
  .research-article table { display: block; min-width: 0; width: 100%; }
  .research-article thead { display: none; }
  .research-article tbody { display: grid; gap: 12px; }
  .research-article tr { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 6px 16px 8px; }
  .research-article th, .research-article td { position: static; width: auto; }
  .research-article td, .research-article tbody tr:nth-child(even) td { display: block; background: transparent; border: 0; border-bottom: 1px dashed var(--line); padding: 10px 0; }
  .research-article tr:last-child td { border-bottom: 1px dashed var(--line); }
  .research-article tr td:last-child { border-bottom: none; }
  .research-article td::before { content: attr(data-th); display: block; font-family: var(--mono); font-size: 10.8px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 4px; }
  .research-article td:first-child { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
  .research-article td:first-child::before { display: none; }
  .research-article td:first-child b { font-size: 16px; }
  .research-article td:last-child { font-size: 12.3px; }
}

@media screen and (max-width: 600px) {
  /* Bar is too narrow for title + section label + two controls: keep the
     section label (it says where you are); #top is one tap away via .backtop. */
  .research-article .masthead .brand { display: none; }
  .research-article .masthead .current-sec { text-align: left; }
  .research-article .signal-items,
  .research-article .signal-workforce .signal-items { grid-template-columns: 1fr; }
  .research-article .signal-group > header { grid-template-columns: 1fr; gap: 4px; }
  .research-article .driver-detail-head { grid-template-columns: 96px minmax(0, 1fr); }
}

/* =================== print =================== */
@page {
  size: A4 portrait;
  margin: 14mm 14mm 18mm;
}

@media print {
  .research-article .masthead, .research-article .rail, .research-article .mobile-toc, .backtop { display: none !important; }
  body { background: var(--panel); }
  .research-article { overflow-x: visible; }
  .research-article .read-paths, .research-article .company-tools { display: none !important; }
  .research-article :is(p, li, blockquote) { orphans: 3; widows: 3; }
  .research-article .card, .research-article .stat, .research-article .vcard, .research-article .note, .research-article .fact, .research-article .tension, .research-article blockquote { box-shadow: none; break-inside: avoid; }
  /* 打印时 stat 网格降为单列：双列 grid 的一行（两张 break-inside:avoid 的卡）
     只能整行跳页，卡片文本较长的语言（en）会在页尾留下大段空白
     （2026-09-01 用户在 en PDF 发现，backlog 项）。单列后每张卡独立决定
     断页，空白消失；屏幕端布局不受影响。 */
  .research-article .stats, .research-article .signal-items { grid-template-columns: 1fr; }
  .research-article .takeaways, .research-article .exec-box { box-shadow: none; break-inside: auto; }
  .research-article .evidence-card { display: block; box-shadow: none; break-inside: auto; }
  .research-article .evidence-card-head { margin-bottom: 14px; break-after: avoid; }
  .research-article .evidence-unit { break-inside: avoid; }
  .research-article .driver-detail, .research-article .trend-map-visual, .research-article .editorial-row { break-inside: avoid; }
  .research-article .signal-group > header, .research-article .model-row { break-after: avoid; }
  .research-article .company { box-shadow: none; break-inside: auto; border-color: #ccc; }
  .research-article details.company > summary::after, .research-article .evidence-drawer > summary { display: none !important; }
  .research-article details.company > .company-detail, .research-article details.evidence-drawer > .evidence-drawer-body { display: block !important; }
  .research-article details.evidence-drawer { border: 0; overflow: visible; }
  .research-article details.evidence-drawer > .evidence-drawer-body { padding: 0; }
  .research-article .card, .research-article .stat, .research-article .vcard, .research-article .takeaways, .research-article .note { border-color: #ccc; }
  .research-article .fig-tag, .research-article .fig-cap, .research-article .subhead, .research-article .sec-head { break-after: avoid; }
  .research-article .sec-head { break-inside: avoid; }
  .research-article #ch-07 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-article :is(#ch-01, #ch-04, #ch-05, #ch-06, #ch-10, #ch-11) { break-before: page; }
  .research-article a { color: var(--ink); text-decoration: underline; }
  .research-article section { padding: 10mm 0 0; }
  .research-article .sec-head { padding-top: 2mm; margin-bottom: 6mm; }
  .research-article .section-divider { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 10px; margin-bottom: 4mm; }
  .research-article .panda-mark { width: 34px; height: 24px; }
  .research-article header.hero { background: var(--panel); }
  .research-article header.hero h1 em { font-size: .9em; }
  .research-article .layout { display: block; max-width: 100%; padding: 0; }
  .research-article .main { max-width: 100%; }
  .research-article .operating-model { margin: 16px 0; break-inside: avoid-page; page-break-inside: avoid; }
  .research-article .operating-model, .research-article .tblwrap { margin-inline: 0; }
  /* Keep each four-step path on one print line. Nodes sit on a shared rail,
     so different copy lengths no longer create visibly uneven card boxes. */
  .research-article .operating-model .model-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .research-article .operating-model .model-step { min-width: 0; min-height: 72px; padding: 34px 4px 0 0; font-size: 10.8px; line-height: 1.45; }
  .research-article .operating-model .model-step b { font-size: 12.5px; }
  .research-article .operating-model .model-arrow { display: none; }
  .research-article .trend-map, .research-article .viewpoint-map { margin-inline: 0; }
  /* Figure 3 gets a print-native composition. The shared conclusion becomes
     a compact header and the three axes use the full A4 text width; this
     prevents the six trends from collapsing into narrow vertical columns. */
  .research-article .trend-map-visual { display: block; padding: 16px 18px; }
  .research-article .trend-map-core { display: grid; grid-template-columns: 74px 180px minmax(0, 1fr); gap: 14px; align-items: start; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .research-article .trend-map-core > span { padding-top: 3px; }
  .research-article .trend-map-core h3 { margin: 0; font-size: 18px; line-height: 1.35; }
  .research-article .trend-map-core p { margin: 0; font-size: 11.5px; line-height: 1.6; }
  .research-article .trend-axis { grid-template-columns: 52px 164px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .research-article .trend-axis h3 { font-size: 13px; line-height: 1.45; }
  .research-article .trend-axis-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .research-article .trend-map-item { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding: 5px 0; }
  .research-article .trend-map-item span { font-size: 11px; line-height: 1.5; }
  .research-article .editorial-evidence { gap: 6px 8px; margin-top: 10px; padding-top: 9px; }
  .research-article .editorial-evidence-label { flex-basis: 64px; font-size: 9.5px; }
  /* Table prints at full width as a real table: no scroll box, no sticky,
     header row repeated on every page, rows never split. */
  .research-article .tblwrap { overflow: visible; max-height: none; border: 0; border-radius: 0; background: none; }
  .research-article table { min-width: 0; width: 100%; font-size: 10.5px; line-height: 1.5; }
  .research-article thead { display: table-header-group; }
  .research-article th, .research-article td { position: static; padding: 7px 8px; white-space: normal; }
  .research-article th { background: #eee; border-color: #bbb; }
  .research-article td { background: none; border-color: #ddd; }
  .research-article tr { break-inside: avoid; }
  .research-article .ev { border-color: #999; color: #333; background: none; }
  .research-article .video-grid { display: block; }
  .research-article .vcard { display: block; border: none; border-bottom: 1px solid #ccc; border-radius: 0; box-shadow: none; padding: 8px 0; margin: 0; }
  .research-article .vcard .thumb { display: none; }
  .research-article .vcard .body { padding: 0; }
  .research-article .chart-variant-chapter-answer { break-inside: auto; }
  .research-article .signal-group { break-inside: auto; }
}

/* Shared deck charts embedded as report figures (chart block type).
   The SVG carries its own colors; CSS owns layout, legend and the
   collapsible table fallback (same class names as the deck renderer). */
.research-article .chart-mobile-hint { display: none; }
.research-article .chartwrap { overflow-x: auto; margin: 4px 0 0; scrollbar-color: var(--accent-dk) var(--line-soft); }
.research-article .chartwrap:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 3px; }
.research-article .chartwrap svg.chart { display: block; width: 100%; height: auto; min-width: 620px; overflow: visible; }
.research-article .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; font-size: 12px; color: var(--ink-2); }
.research-article .legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.research-article .legend .muted { color: var(--ink-3); }
.research-article details.tv { margin-top: 8px; font-size: 12px; }
.research-article details.tv summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }
.research-article details.tv table { border-collapse: collapse; width: 100%; min-width: 0; margin-top: 6px; font-size: 12px; }
.research-article details.tv th, .research-article details.tv td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; position: static; background: none; }
.research-article details.tv th { color: var(--ink-3); font-weight: 600; }
@media print {
  .research-article .chart-mobile-hint { display: none !important; }
  .research-article .chartwrap { overflow: visible; break-inside: auto; }
  .research-article .chartwrap svg.chart { min-width: 0; }
  .research-article details.tv { display: none; }
}

/* Deck chart components ported for report figures (kpi/matrix/pyramid/
   transfer/dumbbell group titles). Selectors and metrics mirror
   deck_render.py's inline CSS; scoped under .research-article. Deck-only
   tokens are defined here so standalone-base.css stays byte-compatible
   with the site shell. */
.research-article { --sunken: #ECE5D6; --ink-4: #A39D90; --line-soft: #EFE8D4; --accent-soft: #F3DDD0; }
.research-article .kpi { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.research-article .tile { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 14px; background: var(--panel); }
.research-article .tv-l { font-size: 12.5px; color: var(--ink-2); }
.research-article .tv-v { font-size: 34px; font-weight: 750; color: var(--accent-dk); line-height: 1.15; margin-top: 4px; letter-spacing: -.02em; }
.research-article .tv-d { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.research-article .tv-s { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.research-article table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 0; font-size: 13px; }
.research-article table.matrix th { font-weight: 600; color: var(--ink-2); text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; position: static; background: none; }
.research-article table.matrix th[scope=row] { text-align: left; color: var(--ink); }
.research-article table.matrix td { text-align: center; padding: 5px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink-4); font-size: 16px; line-height: 1; background: none; }
.research-article table.matrix td.on { color: var(--accent); }
.research-article .pyramid { display: grid; gap: 12px; }
.research-article .py-top { border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 12px 12px 0; padding: 18px 22px; font-size: 16px; font-weight: 700; line-height: 1.65; }
.research-article .py-mids { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.research-article .py-mid { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; background: var(--panel); }
.research-article .py-h { font-family: var(--mono); font-size: 11px; color: var(--accent-dk); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 4px; }
.research-article .py-base { font-size: 13px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 12px; }
.research-article .transfer { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 16px 52px; align-items: center; }
.research-article .tr-src { border: 1px solid var(--line); border-radius: 14px; background: var(--sunken); padding: 20px 22px; }
.research-article .tr-src .tr-h { font-size: 16px; font-weight: 750; }
.research-article .tr-src p { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.research-article .tr-targets { display: grid; gap: 14px; }
.research-article .tr-t { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 16px 10px; }
.research-article .tr-t::before { content: "→"; position: absolute; left: -38px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 22px; font-weight: 700; }
.research-article .tr-k { font-family: var(--mono); font-size: 11px; color: var(--accent-dk); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.research-article .tr-t .tr-h { font-size: 15px; font-weight: 750; margin-top: 2px; }
.research-article .tr-t p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.research-article .tr-s { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.research-article .dbg + .dbg { margin-top: 10px; }
.research-article .dbg-t { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0 0 2px; }
.research-article .chartwrap .chart-note { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.6; }
@media screen and (max-width: 820px) {
  .research-article .chart-mobile-hint { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; color: var(--ink-2); font: 600 12.5px/1.5 var(--mono); }
  .research-article .chartwrap-wide { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .research-article .kpi, .research-article .py-mids { grid-template-columns: 1fr; }
  .research-article .transfer { grid-template-columns: 1fr; gap: 12px; }
  .research-article .tr-t::before { display: none; }
}
@media print {
  .research-article .tile, .research-article .py-mid, .research-article .tr-t, .research-article .tr-src { break-inside: avoid; }
}

/* ==== /research/ listing (channel index) ====================================
   Scoped under .research-index the same way the article is scoped under
   .research-article. Web scale (site shell), zero JS. Divergence from the
   handoff baseline research.css: this block is www-side channel chrome,
   added 2026-09-01 together with the listing pages. */
.research-index { padding: 64px 0 96px; }
.research-index .ri-wrap { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.research-index .ri-head h1 { font-size: 40px; letter-spacing: -.03em; line-height: 1.15; margin-top: 12px; }
.research-index .ri-sub { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; max-width: 620px; margin-top: 14px; }
.research-index .ri-list { margin-top: 44px; display: grid; gap: 20px; }
.research-index .ri-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px; }
.research-index .ri-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.research-index .ri-badge { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--bg); }
.research-index .ri-card h2 { font-size: 23px; line-height: 1.4; letter-spacing: -.02em; margin-top: 14px; }
.research-index .ri-card h2 a { color: var(--ink); }
.research-index .ri-card h2 a:hover { color: var(--accent-dk); }
.research-index .ri-em { color: var(--accent-dk); font-weight: 620; font-size: 15px; line-height: 1.6; margin-top: 8px; }
.research-index .ri-blurb { color: var(--ink-2); font-size: 14.5px; line-height: 1.8; margin-top: 12px; }
.research-index .ri-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--ink-3); }
.research-index .ri-chips span { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: var(--bg); }
.research-index .ri-chips b { color: var(--ink); font-weight: 640; }
.research-index .ri-actions { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.research-index .ri-actions a { font-weight: 620; font-size: 14px; color: var(--accent-dk); }
.research-index .ri-actions a:hover { color: var(--ink); }
.research-index .ri-ic { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -1px; margin-left: 4px; }
.research-index .ri-upcoming { margin-top: 36px; color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 640px) {
  .research-index { padding: 44px 0 72px; }
  .research-index .ri-wrap { padding: 0 20px; }
  .research-index .ri-head h1 { font-size: 31px; }
  .research-index .ri-card { padding: 22px 20px; border-radius: 14px; }
  .research-index .ri-card h2 { font-size: 19.5px; }
  .research-index .ri-actions { flex-wrap: wrap; gap: 14px; }
}

/* 分享入口（www 构建；独立版/PDF 无）——用户 2026-09-01 拍板的组合：
   masthead 常驻图标（阅读全程可见，与 PDF 同一动作簇）+ 文末胶囊按钮
   （读完转化位，与信源 chips 同构，含「复制链接」）。
   品牌 glyph 用 fill 而非站点惯用的线性 stroke —— 品牌标志的有意分叉。 */
.research-article .masthead .share-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; width: 30px; color: var(--ink-3); border: 1px solid transparent; border-radius: 7px; flex: none; }
.research-article .masthead .share-nav-link:hover { color: var(--ink); border-color: var(--line); background: var(--panel); }
.research-article .masthead .share-nav-link svg { width: 14px; height: 14px; fill: currentColor; }
.research-article .share-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.research-article .share-row .lbl { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.research-article .share-row .chip { display: inline-flex; align-items: center; padding: 5px 15px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dk); font-size: 13px; font-weight: 620; font-family: inherit; line-height: 1.6; cursor: pointer; }
.research-article .share-row .chip:hover { border-color: var(--ink-3); color: var(--ink); }
.research-article .share-row .chip:disabled { color: var(--ink-3); cursor: default; }
@media (max-width: 640px) {
  .research-article .masthead .share-nav-link { min-height: 40px; width: 36px; }
  .research-article .share-row .chip { min-height: 40px; }
}

/* ---- www 构建专用修正（2026-09-01，用户在真机上发现） --------------------
   site/assets/style.css 的两条元素级规则会渗进文章（独立版不加载 style.css，
   handoff 阶段看不到）：
   1) nav { position: sticky; top: 0; z-index: 10 } —— 文章内的「选择读法」
      （.read-paths）与「案例索引」（.case-index）也是 <nav>，被它变成吸顶层，
      滚动时盖住 masthead（z=9）。文章内 nav 一律还原为流内元素；
      .rail 的类规则特异性更高，自己该有的定位不受影响。
   2) footer .wrap { display: flex; justify-content: space-between } ——
      会把 .article-foot 的两段脚注排成一行。 */
.research-article nav { position: static; top: auto; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; z-index: auto; }
.research-article .article-foot .wrap { display: block; }

/* www masthead 不放频道/标题标签（2026-09-01 两轮拍板）：回列表由吸顶主导航
   Research 承担；章节标签初始为空、由 scrollspy 填充。独立版保留标题 .brand。 */

/* 手机端把「两行站点导航 + masthead」整合为单条吸顶 banner（用户 2026-09-01
   两轮手机反馈：先是 masthead 被导航盖住一半，后明确要求整合为一个 top
   banner）。≤680px 文章页整页隐藏站点导航，masthead 独占吸顶：品牌 dot
   回首页、语言切换进 banner（零 JS <details>，复用 style.css .lang），
   章节指示隐藏让位。产品页链接在窄屏文章页不再直达（经首页两跳可达）——
   这是对设计规范「窄屏导航折行而不隐藏」的有意分叉，仅限文章页；
   /research/ 列表页保留导航（随页面滚走），20 个产品页导航行为不变。 */
@media (max-width: 680px) {
  body.research-page nav { position: static; }
  /* 只隐藏站点导航（body 的直接子级）；文章内部的 <nav>（.rail 目录、
     .read-paths、.case-index）不受影响。 */
  body.research-article-page > nav { display: none; }
  .research-article .masthead { top: 0; }
  .research-article .masthead .m-wordmark { display: flex; }
  .research-article .masthead .m-lang { display: block; }
  .research-article .masthead .current-sec { display: none; }
  .research-article .rail { top: calc(var(--topbar-h) + 12px); max-height: calc(100dvh - var(--topbar-h) - 32px); }
  .research-article section[id], .research-article .company[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }
  .research-article .tblwrap { max-height: calc(100vh - var(--topbar-h) - 40px); max-height: calc(100dvh - var(--topbar-h) - 40px); }
}