/* Temporary traffic notice; the site navigation stays below it while visible. */
.service-notice[hidden]{display:none!important}
.service-notice{position:fixed;inset:0 0 auto;z-index:200;background:#eef8f6;color:#17645f;border-bottom:1px solid #b9ded5;box-shadow:0 4px 18px #144c5910}
.service-notice-inner{display:grid;grid-template-columns:22px minmax(0,1fr) 40px;gap:13px;align-items:start;padding-top:13px;padding-bottom:13px}
.service-notice-icon{margin-top:3px}
.service-notice-copy strong{display:block;font-size:14px;line-height:1.6;font-weight:700;color:#087c79;margin-bottom:3px}
.service-notice-copy p{font-size:14px;line-height:1.8;color:#315f5d}
.service-notice-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:#386863}
.service-notice-close:hover{background:#dcefe9}
body.service-notice-visible{padding-top:var(--service-notice-height,0px)}
body.service-notice-visible #header{top:var(--service-notice-height,0px)}
@media(max-width:680px){.service-notice-inner{grid-template-columns:20px minmax(0,1fr) 32px;gap:9px;padding:12px 16px}.service-notice-close{width:32px;height:36px}.service-notice-copy p{font-size:13px;line-height:1.75}}
@media print{.service-notice{display:none!important}body.service-notice-visible{padding-top:0}body.service-notice-visible #header{top:0}}

/* DeepBio official website: color and material system. */
:root {
  --paper: #f7f9fc;
  --ink: #202c40;
  --body: #53657b;
  --muted: #5e7188;
  --green: #087c79;
  --deep: #124c59;
  --mint: #e7f5f1;
  --line: #dfe7f0;
  --accent: #087c79;
  --tint: #e9f6f2;
  --blue: #2868d8;
  --shadow: 0 8px 28px rgba(35, 66, 104, .055);
}

body {
  color: var(--ink);
  background:
    radial-gradient(62rem 41rem at -8% 4%, rgba(255,210,157,.45), transparent 56%),
    radial-gradient(62rem 43rem at 108% 7%, rgba(160,207,255,.50), transparent 59%),
    #f7f9fc;
  background-attachment: fixed;
}
::selection { background: #cce7f1; color: #193b53; }
:focus-visible { outline-color: #2868d8; }
p { color: var(--body); }
.fine, .muted { color: var(--muted); }
.white { background: rgba(255,255,255,.67); }
.eyebrow { color: #197b82; }
.eyebrow:before { height: 3px; border-radius: 3px; background: linear-gradient(90deg,#15978c,#679ff1); }
.text-link { color: #096d79; }
.text-link:hover { color: #2868d8; }

/* Quiet glass navigation and clear interaction colors. */
#header {
  background: rgba(255,255,255,.83);
  border-bottom-color: rgba(212,225,238,.7);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow: 0 3px 20px rgba(43,74,106,.025);
}
.nav a { color: #53657b; }
.nav a:hover, .nav a.active { color: #087c79; }
.nav a.active:after { background: linear-gradient(90deg,#0d958a,#498de4); border-radius: 3px; }
.button {
  border-color: #087c79;
  border-radius: 10px;
  background: linear-gradient(115deg,#087f77,#146d89);
  box-shadow: 0 5px 12px rgba(8,124,121,.12), inset 0 1px 0 rgba(255,255,255,.15);
}
.button:hover { background: linear-gradient(115deg,#086a65,#175f85); border-color: #126d7a; box-shadow: 0 8px 18px rgba(8,98,117,.18); }
.button.secondary { color: #28435d; background: rgba(255,255,255,.65); border-color: #ccdce9; box-shadow: inset 0 1px 0 white; }
.button.secondary:hover { color: #2868d8; border-color: #9cbde9; background: #f0f6ff; }
.button.light { background: #e1f5ef; color: #144d56; border-color: #d8f0e9; box-shadow: none; }
.button.light:hover { background: white; border-color: white; }
.icon-button:hover { background: #e9f3f9; }
.icon-box { color: var(--accent); background: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); border: 1px solid color-mix(in srgb,var(--accent) 12%,white); border-radius: 13px; }
.pill { color: #2d6686; background: #eaf3fd; border-color: #dbe8f7; border-radius: 7px; }

/* The existing pharmaceutical image is retained, in its rectangular frame. */
.hero { padding-top: 58px; }
.hero-tag { color: #287c80; background: rgba(231,246,241,.75); border: 1px solid rgba(153,207,195,.36); border-radius: 30px; padding: 6px 11px; letter-spacing: .11em; }
.live-dot { background: #159e8f; box-shadow: 0 0 0 4px rgba(27,156,137,.09); }
.hero h1 em { color: #087c79; background: linear-gradient(105deg,#087c79 8%,#23658b 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-note { color: #66798c; }
.hero-note svg { color: #388f87; }
.hero-visual.hero-visual-flat { border-radius: 22px; border-color: rgba(255,255,255,.96); box-shadow: 0 22px 55px rgba(34,77,103,.12), 0 2px 8px rgba(34,77,103,.03); }
.hero-flat-caption { padding: 22px 25px 25px; background: linear-gradient(115deg,#fff 3%,#f1f8fb 100%); border-top-color: #e3edf0; }
.hero-flat-caption h2 { color: #213f50; }
.hero-flat-caption .visual-chips { gap: 7px; }
.hero-flat-caption .visual-chips span { background: #e9f5f2; border-color: #d5eae4; color: #266c62; font-size: 10px; }
.hero-flat-caption .visual-chips span:nth-child(2) { color: #475ba1; background: #edf0fc; border-color: #dfe4f7; }
.hero-flat-caption .visual-chips span:nth-child(3) { color: #246b97; background: #eaf3ff; border-color: #d9e6f8; }
.hero-flat-caption .visual-chips span:nth-child(4) { color: #976029; background: #fff3e3; border-color: #f5e4cb; }
.hero-flat-caption .visual-chips span:nth-child(5) { color: #735393; background: #f4edfa; border-color: #e9ddf3; }

/* Numeric overview: distinct, restrained color fields aid quick scanning. */
.stats-strip { gap: 10px; border: 1px solid rgba(215,227,238,.8); border-radius: 18px; padding: 12px; background: rgba(255,255,255,.69); box-shadow: var(--shadow); }
.stats-label { color: #263f56; padding-left: 12px; font-size: clamp(14px, 1.5vw, 18px); font-weight: 650; line-height: 1.7; letter-spacing: .01em; }
.stats-label .fine { color: #53657b; font-size: clamp(12px, 1.16vw, 14px); font-weight: 500; letter-spacing: 0; }
.stat { border: 0; padding: 17px 18px; border-radius: 11px; min-height: 79px; background: #edf7f3; }
.stat b { color: #087c79; font-weight: 550; }
.stat span { color: #587183; }
.stat:nth-child(3) { background: #edf3ff; }
.stat:nth-child(3) b { color: #3265bd; }
.stat:nth-child(4) { background: #fff3e6; }
.stat:nth-child(4) b { color: #aa6528; }

/* Semantic accents, shared by capability and skill categories. */
[data-tone="data"], .skill-card[data-category="6"] { --accent: #087c79; --tint: #e9f6f2; }
[data-tone="literature"], .skill-card[data-category="0"], .skill-card[data-category="1"] { --accent: #356bc2; --tint: #edf3ff; }
[data-tone="design"], .skill-card[data-category="4"] { --accent: #915e25; --tint: #fff4e4; }
[data-tone="drug"], .skill-card[data-category="2"] { --accent: #7b5bb0; --tint: #f3edfb; }
[data-tone="clinical"], .skill-card[data-category="5"] { --accent: #1b708f; --tint: #e9f6fc; }
[data-tone="safety"], .skill-card[data-category="7"] { --accent: #5e718d; --tint: #edf2f8; }
.skill-card[data-category="3"] { --accent: #4b69b1; --tint: #eef1fd; }
.cap-card, .skill-card, .detail-card, .source-section .card {
  border-radius: 16px;
  border-color: color-mix(in srgb,var(--accent) 14%,white);
  background: linear-gradient(150deg,var(--tint),rgba(255,255,255,.96) 65%);
  box-shadow: var(--shadow);
}
.cap-card { border-top: 3px solid color-mix(in srgb,var(--accent) 65%,white); }
.cap-card:hover, .skill-card:hover, a.detail-card:hover { border-color: color-mix(in srgb,var(--accent) 47%,white); box-shadow: 0 13px 32px rgba(35,66,104,.09); transform: translateY(-3px); }
.cap-card .icon-box { width: 49px; height: 49px; }
.cap-card-top .index { color: var(--accent); font-weight: 550; letter-spacing: .05em; }
.cap-card .card-foot { color: var(--accent); border-top-color: color-mix(in srgb,var(--accent) 12%,white); }
.cap-card h3, .detail-card h3 { color: #263b50; }
.detail-grid > :nth-child(2n) { --accent: #356bc2; --tint: #edf3ff; }
.detail-grid > :nth-child(3n) { --accent: #7b5bb0; --tint: #f3edfb; }
.database-row { border-color: #dfe9f1; padding-top: 25px; }
.database-row > span { color: #203950; }
.database-names { gap: 12px; color: #46647d; }
.database-names span { background: rgba(255,255,255,.78); border: 1px solid #dce7f0; border-radius: 8px; padding: 5px 12px; font-size: 16px; white-space: nowrap; }

/* Workflow and applications: color belongs to the content containers. */
.workflow-section { background: linear-gradient(115deg,#eaf5f3 0%,#eef4fd 65%,#f3effb 100%); border-top: 1px solid #e0edf0; border-bottom: 1px solid #e2eaf5; }
.workflow-list:before { border-color: #aac6d4; }
.workflow-step { gap: 19px; margin-bottom: 12px; padding: 19px; border: 1px solid rgba(255,255,255,.9); border-radius: 15px; background: rgba(255,255,255,.74); box-shadow: 0 5px 18px rgba(52,83,116,.035); }
.workflow-step:last-child { margin-bottom: 0; padding-bottom: 19px; }
.step-number { background: #dff2eb; border-color: #c8e5da; color: #23766b; font-family: inherit; font-size: 13px; font-weight: 650; border-radius: 12px; }
.workflow-step:nth-child(2) .step-number { background: #e5edfc; color: #356bc2; border-color: #d2dff7; }
.workflow-step:nth-child(3) .step-number { background: #f7ead8; color: #94642e; border-color: #edddc4; }
.workflow-foot { color: #57758b; }
.case-grid { gap: 18px; }
.case-card { --accent: #356bc2; --tint: #edf3ff; border: 1px solid #dce6f4; border-radius: 16px; padding: 24px; background: linear-gradient(150deg,var(--tint),white 75%); box-shadow: var(--shadow); transition: transform .2s,box-shadow .2s; }
.case-card:nth-child(2) { --accent: #087c79; --tint: #e9f6f2; border-color: #d7eae3; }
.case-card:nth-child(3) { --accent: #7b5bb0; --tint: #f3edfb; border-color: #e5dff0; }
.case-card:hover { transform: translateY(-3px); box-shadow: 0 13px 32px rgba(35,66,104,.09); }
.case-card .case-number { color: var(--accent); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.case-number svg { width: 39px; height: 39px; padding: 9px; color: var(--accent); background: white; border: 1px solid color-mix(in srgb,var(--accent) 15%,white); border-radius: 11px; }
.case-card h3 { font-size: 18px; }
.case-card .text-link { color: var(--accent); }
.api-panel { border-radius: 20px; border: 1px solid #215c78; background: radial-gradient(ellipse at 100% 0%,#157880 0,transparent 62%),linear-gradient(120deg,#173652,#163e58 55%,#135c69); box-shadow: 0 18px 42px rgba(21,60,83,.11); }
.api-panel:after { display: none; }
.api-panel .eyebrow { color: #99d8ce; }
.api-panel h2 { color: #f5fafc; }
.api-panel p { color: #bed5e3; }
.api-panel .text-link { color: #d6eaf4; }
.api-paths div { background: rgba(255,255,255,.055); border-color: rgba(175,222,237,.23); border-radius: 9px; }
.api-paths code { color: #9fe6d1; }
.api-paths div:nth-child(2) code { color: #b8d4ff; }
.api-paths div:nth-child(3) code { color: #f2cf9e; }
.api-paths span { color: #d0e0e9; }
.api-paths p.fine { color: #acc7d8; }

/* A color-aware journal, with a calm article reading surface. */
.blog-feature { background: linear-gradient(145deg,#fff,#f0f5ff); border-color: #dce6f4; border-radius: 18px; box-shadow: var(--shadow); }
.blog-thumb { border-radius: 11px; background: #ecf3f9; }
.mini-article { border-color: #dee7f0; padding-left: 12px; padding-right: 12px; border-radius: 9px; transition: background .2s; }
.mini-article:hover { background: rgba(232,241,252,.7); }
.mini-article:first-child { padding-top: 16px; }
.article-meta { color: #5e728b; gap: 10px; }
.article-meta .category { display: inline-block; border-radius: 5px; padding: 2px 7px; background: #eaf3fd; color: #3567aa; }
.article-meta[data-category="科研写作"] .category { color: #7b5b9a; background: #f0eaf8; }
.article-meta[data-category="临床研究"] .category { color: #167768; background: #e2f3ec; }
.article-meta[data-category="药物与前沿"] .category { color: #986328; background: #fbf0df; }
.article-meta[data-category="数据与统计"] .category { color: #5266a5; background: #e9eefc; }
.blog-masthead { background: linear-gradient(110deg,rgba(236,247,244,.7),rgba(242,246,255,.6) 60%,rgba(241,235,250,.7)); }
.blog-masthead-top { color: #56768a; }
.blog-masthead h1 span { color: #327e8e; }
.blog-masthead p { color: #5b6d85; }
.blog-feature-large { padding: 25px; margin-top: -5px; background: rgba(255,255,255,.79); border: 1px solid #dde7f2; border-radius: 20px; box-shadow: var(--shadow); }
.blog-feature-large .featured-image { border-color: #e1e9f4; border-radius: 13px; background: #eef3fb; }
.featured-label { color: #296b76; background: rgba(244,253,250,.95); border-color: #d4eae3; }
.filter-tab { color: #60758e; border-radius: 8px; }
.filter-tab.active { color: #285fa9; background: #e6effe; border-color: #ccdff7; }
.filter-tab:hover { color: #285fa9; background: #edf3fc; }
.blog-card { border-radius: 16px; border-color: #dce6ef; box-shadow: var(--shadow); }
.blog-card:hover { border-color: #a9c4e6; box-shadow: 0 13px 28px rgba(35,66,104,.08); }
.blog-card-foot { color: #54748e; }
.small-article-graphic { color: #4583a6; background: #e9f2fb; }
.article-hero { background: linear-gradient(120deg,rgba(255,255,255,.65),rgba(231,242,253,.6)); }
.article-head .dek { color: #5b6d85; }
.article-body { color: #34465d; }
.article-body p, .article-body ul, .article-body ol { color: #4d6076; }
.article-body h2 { border-top-color: #dce7f2; }
.article-body .caption { color: #5d7188; }
.article-body blockquote { border-left-color: #4d9cba; background: #edf5fc; border-radius: 0 10px 10px 0; color: #3e637d; }
.article-body .disc { color: #6f6c57; background: #fbf6e9; border-color: #eae4d0; }
.article-pagination a { background: rgba(255,255,255,.85); border-color: #dce6f1; border-radius: 13px; }
.article-pagination small { color: #5e7da1; }
.toc a { color: #667e95; }
.toc a.active { color: #246b9b; border-color: #438cb8; background: #eef5fc; }
.article-share { color: #6b839a; }
.qrcode-card { background: #edf6f7; border-color: #d9e9ec; border-radius: 16px; }

/* Shared detail pages, directory controls, and footer. */
.page-hero { background: linear-gradient(115deg,rgba(255,248,239,.52),rgba(255,255,255,.35) 44%,rgba(221,237,255,.47)); border-bottom-color: #dce8f3; }
.page-hero .hero-icon { color: #bfdce8; opacity: .42; z-index: 0; pointer-events: none; }
.page-hero .container > :not(.hero-icon) { position: relative; z-index: 1; }
.breadcrumb { color: #6b8195; }
.side-label { color: #5d738a; }
.side-nav a { border-radius: 0 9px 9px 0; color: #63778e; }
.side-nav a.active { border-left-color: #319692; background: linear-gradient(90deg,#e3f2ef,#edf5fc); color: #1c7079; }
.side-note { color: #61748b; border-color: #dfe8f1; }
.quote-panel { border-left-color: #5a9dc2; background: linear-gradient(120deg,#eaf5f4,#edf3fe); color: #316276; border-radius: 0 13px 13px 0; }
.detail-cta { background: linear-gradient(120deg,#e8f4ee,#eaf2ff 85%); border-color: #d5e7ec; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.detail-visual { background: linear-gradient(120deg,#e9f5f1,#edf3fe); border: 1px solid #dae9ee; border-radius: 16px; }
.detail-visual .icon-box { background: white; }
.detail-visual .flow-item:nth-of-type(2) { --accent: #356bc2; --tint: #edf3ff; }
.detail-visual .flow-item:nth-of-type(3) { --accent: #a36c27; --tint: #fff4e4; }
.detail-visual > svg { color: #7c9bb5; }
.number-row > .num { color: #3c7e9e; }
.callout { background: #f5f6fc; color: #61718c; border-color: #e0e4f2; border-radius: 10px; }
.callout svg { color: #7b75a0; }
.data-table { border: 1px solid #dfe8f1; border-radius: 12px; overflow: hidden; }
.data-table th { color: #4d7395; background: #edf4fc; }
.data-table td:first-child { color: #42637e; }
.source-section tr:first-child { background: #edf4fc; }
.source-section .quote { background: #edf5f8; }
.directory-bar { padding: 15px; background: rgba(255,255,255,.74); border: 1px solid #dfe8f2; border-radius: 13px; }
.search input { border-color: #d6e2ef; border-radius: 9px; color: var(--ink); }
.search input:focus { border-color: #70a3d5; box-shadow: 0 0 0 3px #2868d810; }
.search svg { color: #7090aa; }
.result-count { color: #5b7896; }
.skill-card .skill-foot { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 12%,white); }
.skill-kv h3 { color: #5081a1; }
.skill-output { border-color: #d4e8e8; background: linear-gradient(120deg,#e9f6f0,#edf5fe); border-radius: 13px; }
.endpoint { border-color: #dbe6f1; border-left: 3px solid #5f9fc1; border-radius: 12px; background: linear-gradient(120deg,white,#f3f7fd); }
.endpoint:nth-of-type(2) { border-left-color: #8b7cb7; }
.endpoint:nth-of-type(3) { border-left-color: #4a9b8f; }
.endpoint code { color: #286a91; }
.about-statement { background: linear-gradient(130deg,#153d52,#176a72); border: 1px solid #2e717c; border-radius: 16px; }
.about-statement p { color: #b9d7df; }
.about-statement .eyebrow { color: #9fd8cd; }
.download-card { border-radius: 18px; border-color: #d9e5f0; background: linear-gradient(130deg,white,#edf4fe); box-shadow: var(--shadow); }
.download-card > .icon-box { color: #356bc2; background: #e5efff; border-color: #cedff7; }
.download-version { color: #6c829a; }
.trust-strip { background: linear-gradient(110deg,#eef5fc,#f4f1fa); border-top-color: #dfe8f3; }
.trust-content .icon-box { color: #9b7339; background: #fbf0dc; border-color: #efdfc2; }
#footer { background: linear-gradient(120deg,#f8fbfe,#f2f7fc 75%,#f3f8f7); border-color: #dfe8f2; }
.footer-col h4 { color: #304b64; }
.footer-col a { color: #63798e; }
.footer-col a:hover { color: #2868d8; }
.footer-bottom, .footer-boundary { color: #61738a; }
dialog { background: #f8fbfe; border-color: #d9e7f1; }
dialog::backdrop { background: rgba(17,39,62,.48); }
.mobile-nav.open { background: rgba(250,253,255,.98); border-color: #e0eaf3; }

@media(max-width:1100px) {
  .stat { padding: 15px; gap: 10px; }
  .database-names { gap: 8px; }
  .database-names span { font-size: 15px; padding: 5px 9px; }
  .case-card { padding: 22px; }
}
@media(max-width:850px) {
  .hero { padding-top: 44px; }
  .hero-tag { font-size: 8px; letter-spacing: .07em; padding: 5px 9px; }
  .hero-flat-caption { padding: 18px 20px 22px; }
  .stats-strip { padding: 10px; gap: 8px; }
  .stat { padding: 15px 12px; }
  .database-row { align-items: flex-start; flex-wrap: wrap; }
  .database-names { flex-wrap: wrap; }
  .workflow-list { padding-left: 0; }
  .workflow-list:before { display: none; }
  .case-grid { gap: 13px; }
  .case-card { padding: 20px; }
  .case-card h3 { font-size: 17px; }
  .blog-feature-large { padding: 20px; }
}
@media(max-width:600px) {
  .hero { padding-top: 30px; }
  .hero-tag { font-size: 8px; letter-spacing: .05em; }
  .hero-visual.hero-visual-flat { border-radius: 17px; }
  .hero-flat-caption { padding: 18px 20px 23px; }
  .hero-flat-caption .visual-chips span { font-size: 10px; }
  .stats-strip { padding: 8px; gap: 7px; border-radius: 14px; }
  .stat { padding: 13px 10px; min-height: 103px; border-radius: 9px; }
  .stat b { font-size: 27px; }
  .stat span { font-size: 10px; color: #526b80; }
  .database-row { gap: 15px; }
  .database-row > span { font-size: 15px; }
  .database-names { gap: 7px; }
  .database-names span { font-size: 14px; padding: 4px 8px; }
  .workflow-step { padding: 17px; gap: 16px; }
  .workflow-step:last-child { padding-bottom: 17px; }
  .case-grid { gap: 14px; }
  .case-card { padding: 22px; }
  .case-card h3 { font-size: 19px; }
  .api-panel { padding: 27px; border-radius: 16px; }
  .blog-feature-large { padding: 16px; border-radius: 16px; }
  .directory-bar { padding: 12px; }
  .filter-select { color: #496d8f; border-color: #d5e2ee; border-radius: 8px; }
  .side-nav a { border-radius: 7px; border-color: #dce6ef; }
  .side-nav a.active { border-color: #b3d5de; }
  .detail-cta, .detail-card, .source-section .card { border-radius: 13px; }
}


/* Content-matched, two-tone scientific icons. Navigation controls retain Lucide. */
.medical-icon{display:inline-block;vertical-align:middle;flex-shrink:0;stroke-width:1.65}
.icon-box .medical-icon{width:28px;height:28px}
.cap-card .icon-box .medical-icon{width:29px;height:29px}
.skill-card .icon-box .medical-icon{width:24px;height:24px}
.side-nav a .medical-icon{width:18px;height:18px}
.pill .medical-icon{width:14px;height:14px}
.hero-note .medical-icon{width:15px;height:15px}
.trust-content .icon-box .medical-icon{width:30px;height:30px}
.detail-visual .icon-box .medical-icon{width:35px;height:35px}
.case-number .medical-icon{width:43px;height:43px;padding:8px}
.callout>.medical-icon{width:20px;height:20px;margin-top:2px}
.skill-output h3 .medical-icon{width:20px;height:20px;margin-right:5px}
.small-article-graphic .medical-icon{width:52px;height:52px}
@media(max-width:600px){.cap-card .icon-box .medical-icon{width:26px;height:26px}.detail-visual .icon-box .medical-icon{width:27px;height:27px}.trust-content .icon-box .medical-icon{width:25px;height:25px}}

/* Preserve article spacing when the shared container padding changes. */
.container.article-layout{padding-top:45px}
@media(max-width:600px){.container.article-layout{padding-top:31px}}

/* Keep the three capability steps equally sized and easier to scan. */
body[data-page^="/capability/"] .detail-visual{
  display:grid;
  grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);
  gap:16px;
  padding:36px 24px;
}
body[data-page^="/capability/"] .detail-visual .flow-item{min-width:0}
body[data-page^="/capability/"] .detail-visual .icon-box{width:88px;height:88px;margin-bottom:16px}
body[data-page^="/capability/"] .detail-visual .icon-box svg{width:50px;height:50px}
body[data-page^="/capability/"] .detail-visual .flow-item strong{display:block;font-size:18px;font-weight:650;line-height:1.5}
body[data-page^="/capability/"] .detail-visual>svg{width:26px;height:26px;justify-self:center;margin-bottom:43px}
@media(max-width:850px){
  body[data-page^="/capability/"] .detail-visual{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);gap:12px;padding:28px 16px}
  body[data-page^="/capability/"] .detail-visual .icon-box{width:76px;height:76px}
  body[data-page^="/capability/"] .detail-visual .icon-box svg{width:44px;height:44px}
  body[data-page^="/capability/"] .detail-visual .flow-item strong{font-size:16px}
  body[data-page^="/capability/"] .detail-visual>svg{width:22px;height:22px;margin-bottom:40px}
}
@media(max-width:600px){
  body[data-page^="/capability/"] .detail-visual{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);gap:6px;padding:24px 12px}
  body[data-page^="/capability/"] .detail-visual .icon-box{width:60px;height:60px}
  body[data-page^="/capability/"] .detail-visual .icon-box svg{width:36px;height:36px}
  body[data-page^="/capability/"] .detail-visual .flow-item strong{font-size:14px;white-space:nowrap}
  body[data-page^="/capability/"] .detail-visual>svg{width:16px;height:16px;margin-bottom:33px}
}

/* Shared navigation, guide entry, and a filled client-download button. */
#header:not(.blog-header) .header-inner{gap:22px}
#header:not(.blog-header) .nav{gap:18px}
#header .nav a{white-space:nowrap}
#header:not(.blog-header) .header-actions{gap:10px}
#header:not(.blog-header) .header-actions .button{padding:10px 14px}
#header:not(.blog-header) .download-nav,.mobile-nav .mobile-download{display:inline-flex;background:#e0f2ee;color:#076c68;border:1px solid #b7dcd4;box-shadow:inset 0 1px 0 #ffffffa6}
#header:not(.blog-header) .download-nav:hover,.mobile-nav .mobile-download:hover{background:#cce8e1;color:#065b57;border-color:#8bc2b6;box-shadow:0 4px 12px #087c7914}
.mobile-nav .mobile-download{align-self:flex-start;padding:10px 16px;margin-top:8px}
#header:not(.blog-header) .header-actions{flex-shrink:0}
#header:not(.blog-header) .header-actions .button{white-space:nowrap}
@media(max-width:1200px){
  #header:not(.blog-header) .header-inner{gap:20px}
  #header:not(.blog-header) .nav{gap:18px}
}
@media(max-width:1200px){
  #header:not(.blog-header) .nav{display:none}
  #header:not(.blog-header) .header-actions{margin-left:auto}
  #header:not(.blog-header) .menu-toggle{display:grid}
  #header:not(.blog-header) .mobile-nav.open{display:flex;flex-direction:column;padding:10px 25px 20px;border-top:1px solid var(--line);background:var(--paper)}
  #header:not(.blog-header) .mobile-nav a{padding:10px 0;font-size:14px}
  #header:not(.blog-header) .mobile-nav .mobile-download{padding:10px 16px}
}
@media(max-width:600px){
  #header:not(.blog-header) .header-inner{gap:10px}
  #header:not(.blog-header) .brand img{width:100px;height:40px}
  #header:not(.blog-header) .header-actions{gap:6px}
  #header:not(.blog-header) .header-actions .button{font-size:11px;padding:9px 10px;gap:0}
  #header:not(.blog-header) .header-actions .button svg{display:none}
}
@media(max-width:380px){
  #header:not(.blog-header) .header-inner{gap:6px}
  #header:not(.blog-header) .brand img{width:84px}
  #header:not(.blog-header) .header-actions{gap:4px}
  #header:not(.blog-header) .header-actions .button{font-size:10px;padding:9px 8px}
  #header:not(.blog-header) .menu-toggle{width:24px}
}

@media(max-width:680px){#header:not(.blog-header) .header-actions .download-nav{display:none}}