/* ==========================================================================
   POA 全站排版系统 / Site typography system
   --------------------------------------------------------------------------
   模块标题和模块说明文案在全站只有一套规格，基准取自「关于我们」页面的模块
   标题：公司介绍 / ABOUT US。

    模块标题 module title
      font-family  "Noto Sans SC"
      font-size    24px desktop / 20px mobile
      font-weight  800
      color        #ff9900
      line-height  1.35
      letter-spacing .04em

    模块说明文案 module copy
      font-family  "Noto Sans SC"
      font-size    13px
      font-weight  400
      color        #41505f
      line-height  1.8

    卡片 / 指标等更小一级的说明文案 caption
      font-size    9px - 12px
      color        #41505f   （与模块说明文案同色，全站统一加深）

   卡片标题与卡片文案低一级，只用于模块内部的重复条目，保持层级关系。
   本表通过各页面的 shared chrome 样式链接加载，覆盖历史遗留的零散声明。
   ========================================================================== */

/* Keep document scrolling while hiding the browser's page scrollbar. */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

:root {
  /* TRO reference stack: Chinese glyphs first, then the same neutral UI fallbacks. */
  --poa-font-sans: "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  /* Legacy About-page styles read --sans; keep that page on the same stack. */
  --sans: var(--poa-font-sans);

  /* 模块主标题：统一规格；颜色按用户指定保留亮橙色。 */
  --poa-module-title-size: 24px;
  --poa-module-title-weight: 800;
  --poa-module-title-color: #ff9900;
  --poa-module-title-leading: 1.35;
  --poa-module-title-tracking: .04em;

  /* 模块说明文案 */
  --poa-module-copy-size: 13px;
  --poa-module-copy-color: #41505f;
  --poa-module-copy-leading: 1.8;

  /* 小号说明文案（指标卡、步骤、列表副标题等）统一配色 */
  --poa-caption-color: #41505f;

  /* 卡片标题 / 卡片文案 */
  --poa-card-title-size: 16px;
  --poa-card-title-weight: 700;
  --poa-card-title-color: #172b3d;
  --poa-card-copy-size: 12px;
  --poa-card-copy-color: #41505f;

  /* 旧变量名继续保留，避免历史样式失效 */
  --poa-section-title-size: var(--poa-module-title-size);
  --poa-section-title-weight: var(--poa-module-title-weight);
  --poa-section-title-color: var(--poa-module-title-color);
  --poa-section-copy-size: var(--poa-module-copy-size);
  --poa-section-copy-color: var(--poa-module-copy-color);
}

body,
button,
input,
textarea,
select {
  font-family: var(--poa-font-sans);
}

/* --------------------------------------------------------------------------
   TRO reference chrome typography
   Keep shared navigation and the lower information bars on the same compact
   scale as the reference project. These rules are intentionally scoped to
   shared chrome so page-specific content can keep its established hierarchy.
   -------------------------------------------------------------------------- */
body {
  letter-spacing: 0;
}

.sidebar .nav-item,
.sidebar .nav-item.sidebar-tool-item,
.sidebar .sub-nav-item {
  font-family: var(--poa-font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.sidebar .nav-item i,
.sidebar .sub-nav-item > i {
  font-size: 17px !important;
}

.sidebar-qr-title {
  font-family: var(--poa-font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.sidebar-qr-title i { font-size: 12px !important; }
.sidebar-qr small {
  font-family: var(--poa-font-sans) !important;
  font-size: 10px !important;
}

.site-footer .footer-topic-grid span,
.site-footer .footer-brand-description,
.site-footer .footer-contact-item b,
.site-footer .footer-contact-item span,
.site-footer .footer-contact-label,
.site-footer .footer-contact-value {
  font-family: var(--poa-font-sans) !important;
}

.site-footer .footer-topic-grid span {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.site-footer .footer-brand-description {
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.site-footer .footer-section-heading h3 {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.site-footer .footer-quick-links-grid a {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.site-footer .footer-contact-icon i {
  font-size: 12px !important;
}

.site-footer .footer-contact-item b,
.site-footer .footer-contact-item span,
.site-footer .footer-contact-label,
.site-footer .footer-contact-value {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.site-footer .footer-meta-links,
.site-footer .footer-friend-links,
.site-footer .footer-legal-links {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

@media (max-width: 720px) {
  .site-footer .footer-topic-grid span {
    font-size: 9px !important;
  }

  .site-footer .footer-brand-description,
  .site-footer .footer-quick-links-grid a,
  .site-footer .footer-contact-item b,
  .site-footer .footer-contact-item span,
  .site-footer .footer-contact-label,
  .site-footer .footer-contact-value {
    font-size: 12px !important;
  }

  .site-footer .footer-contact-icon i {
    font-size: 10px !important;
  }

  .site-footer .footer-meta-links,
  .site-footer .footer-friend-links,
  .site-footer .footer-legal-links {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* --------------------------------------------------------------------------
   1. 模块标题
   所有页面的模块标题共用同一套字体、字号、字重和颜色。
   -------------------------------------------------------------------------- */
:is(
  .section-heading,
  .tool-panel-head,
  .panel-title-row,
  .dashboard-panel-head,
  .policy-stream-heading,
  .policy-feature-copy,
  .appeal-types-toolbar,
  .cases-results-head,
  .cases-filter-head,
  .types-topic-head,
  .community-qa-head,
  .qa-ask-panel,
  .about-process-copy,
  .positioning-copy,
  .about-values-copy,
  .about-vision-copy,
  .appeal-faq-intro,
  .platform-showcase-head,
  .module-showcase-head,
  .why-head
) :is(h1, h2),
.module-showcase-head h2,
.module-showcase-head .module-kicker,
.platform-showcase-head h2,
.platform-showcase-head .module-kicker,
.why-head .section-title,
.section-head h2,
.section-head .section-title,
.section-head .kicker,
.about-profile-title,
.about-process-copy .kicker,
.about-values-copy .kicker,
.positioning-copy .kicker,
.about-vision-copy .kicker,
.appeal-faq-intro .kicker,
.team-support-band .kicker,
.contact-section .kicker,
.service-contact-cta h2 {
  color: var(--poa-module-title-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-module-title-size) !important;
  font-weight: var(--poa-module-title-weight) !important;
  line-height: var(--poa-module-title-leading) !important;
  letter-spacing: var(--poa-module-title-tracking) !important;
}

/* About 页的「核心优势」标题在历史样式里用了更高优先级的选择器，这里按同等优先级重申。 */
body[data-page="about"] .about-advantage-section.why .why-head .section-title,
body[data-page="home"] .about-advantage-section.why .why-head .section-title {
  color: var(--poa-module-title-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-module-title-size) !important;
  font-weight: var(--poa-module-title-weight) !important;
  line-height: var(--poa-module-title-leading) !important;
  letter-spacing: var(--poa-module-title-tracking) !important;
}

/* 关于我们页深色面板里的标题行（企业定位 / POSITIONING、企业愿景 / VISION）属于模块标题，
   同样使用上面这一套规格；这里用同等优先级重申，避免被面板样式覆盖。 */
body[data-page="about"] .positioning-copy .kicker,
body[data-page="about"] .about-vision-copy .kicker {
  color: var(--poa-module-title-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-module-title-size) !important;
  font-weight: var(--poa-module-title-weight) !important;
  line-height: var(--poa-module-title-leading) !important;
  letter-spacing: var(--poa-module-title-tracking) !important;
}

/* 企业愿景面板的标题由 .kicker 承担，隐藏重复的 h2 副标题。 */
body[data-page="about"] .about-vision-copy > h2 {
  display: none !important;
}

@media (max-width: 760px) {
  :root { --poa-module-title-size: 20px; }
}

/* --------------------------------------------------------------------------
   2. 模块说明文案
   -------------------------------------------------------------------------- */
:is(
  .section-heading,
  .tool-panel-head,
  .panel-title-row,
  .dashboard-panel-head,
  .policy-stream-heading,
  .community-qa-head,
  .qa-ask-panel,
  .platform-showcase-head,
  .module-showcase-head,
  .appeal-faq-intro,
  .about-vision-copy
) p:not(.kicker),
.section-caption,
.section-intro,
.service-flow-intro,
.about-process-intro,
.positioning-copy > p:not(.kicker),
.about-values-description,
.appeal-faq-intro > p:not(.kicker),
.about-vision-statement,
.qa-ask-panel > p,
.about-main > p,
.types-disclaimer,
.services-section .section-intro,
.service-case-preview .section-heading p {
  color: var(--poa-module-copy-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-module-copy-size) !important;
  font-weight: 400 !important;
  line-height: var(--poa-module-copy-leading) !important;
  letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   3. 卡片标题与卡片文案
   模块内部的重复条目保持低一级，橙色模块标题的层级不被削弱。
   -------------------------------------------------------------------------- */
:is(
  .dashboard-panel,
  .service-card,
  .policy-card,
  .ip-tool-card,
  .advantage-grid,
  .promise-grid,
  .type-group-card,
  .case-card,
  .community-question,
  .detail-section-card,
  .api-detail-card,
  .about-process-list,
  .appeal-faq-list,
  .about-columns
) :is(h2, h3, strong) {
  font-family: var(--poa-font-sans);
  letter-spacing: 0;
}

:is(
  .service-card,
  .policy-card,
  .ip-tool-card,
  .advantage-grid,
  .promise-grid,
  .type-group-card,
  .case-card,
  .community-question,
  .detail-section-card,
  .api-detail-card,
  .about-columns
) :is(h2, h3) {
  color: var(--poa-card-title-color);
  font-size: var(--poa-card-title-size);
  font-weight: var(--poa-card-title-weight);
  line-height: 1.5;
}

:is(
  .service-card,
  .policy-card,
  .ip-tool-card,
  .advantage-grid,
  .promise-grid,
  .type-group-card,
  .case-card,
  .community-question,
  .detail-section-card,
  .api-detail-card,
  .about-columns
) p,
.service-flow li p,
.about-process-list li p,
.appeal-faq-list p,
.case-summary,
.qa-answer {
  color: var(--poa-card-copy-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-card-copy-size) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   4. 深色底色区块的文案
   第 2 节的配色以浅色卡片为前提；深色区块里的说明文案要保持浅色，
   否则会出现深色文字压深色底的情况。
   -------------------------------------------------------------------------- */
.service-promises .section-kicker { color: #ffc76b !important; }
.service-promises .promise-grid h3 { color: #ffffff !important; }
.service-promises .promise-grid p { color: #b3c0cc !important; }
.service-promises .promise-primary h3 { color: #142438 !important; }
.service-promises .promise-primary p { color: #65481f !important; }

.positioning-copy > p:not(.kicker),
.about-vision-statement { color: #d5dee8 !important; }
.about-process-list li > span { color: #b0620a !important; }

/* --------------------------------------------------------------------------
   5. 页面主标题与副标题
   侧边栏各页面的顶部标题区块共用同一套规格，覆盖：
   首页 / 封号风险检测 / 侵权检测 / 平台政策 / 申诉类型 / 申诉问答 / 申诉服务 / 关于我们。

     页面主标题 page title
       font-family  "Noto Sans SC"
       font-size    clamp(26px, 2.8vw, 38px)
       font-weight  700
       color        #ff9900
       line-height  1.25

     页面副标题 page subtitle（主标题下方的说明文案，及标题内的英文副标）
       font-family  "Noto Sans SC"
       font-size    13px
       color        #41505f
       line-height  1.8

     页眉小标 page kicker（主标题上方的英文小标）
       font-size    11px
       font-weight  700
       color        #9f5e00
   -------------------------------------------------------------------------- */
:root {
  --poa-page-title-size: clamp(26px, 2.8vw, 38px);
  --poa-page-title-weight: 700;
  --poa-page-title-color: #ff9900;
  --poa-page-title-leading: 1.25;
  --poa-page-subtitle-size: 13px;
  --poa-page-subtitle-color: #41505f;
  --poa-page-subtitle-leading: 1.8;
  --poa-page-kicker-size: 11px;
  --poa-page-kicker-color: #9f5e00;
}

/* 页面主标题 */
:is(
  .dashboard-intro-copy,
  .home-command-copy,
  .module-intro > div,
  .services-hero-copy,
  .appeal-types-hero .hero-content,
  .page-hero .container,
  .search-results-heading,
  .detail-head-copy
) > h1 {
  color: var(--poa-page-title-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-page-title-size) !important;
  font-weight: var(--poa-page-title-weight) !important;
  line-height: var(--poa-page-title-leading) !important;
}

/* 标题内的英文副标（如 / IP CHECK、/ Q&A、/ SERVICES） */
:is(
  .module-intro > div,
  .services-hero-copy,
  .page-hero .container,
  .search-results-heading,
  .detail-head-copy
) > h1 em {
  color: var(--poa-page-title-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-weight: inherit !important;
}

/* 页面副标题（主标题下方的说明文案） */
:is(
  .dashboard-intro-copy,
  .module-intro > div,
  .services-hero-copy,
  .appeal-types-hero .hero-content,
  .page-hero .container,
  .search-results-heading,
  .detail-head-copy
) > p:not(.eyebrow) {
  color: var(--poa-page-subtitle-color) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-page-subtitle-size) !important;
  font-weight: 400 !important;
  line-height: var(--poa-page-subtitle-leading) !important;
}

/* The About page keeps its description readable over the dark photo hero. */
body[data-page="about"] .page-hero .container > p:not(.eyebrow) {
  color: #dbe5ee !important;
}

/* 页眉小标（主标题上方的英文小标） */
:is(
  .dashboard-intro-copy,
  .module-intro > div,
  .services-hero-copy,
  .appeal-types-hero .hero-content,
  .page-hero .container,
  .search-results-heading,
  .detail-head-copy
) > .eyebrow,
.search-results-heading > span,
.detail-head-copy > .detail-head-code,
.cases-results-head > div > .cases-kicker {
  color: var(--poa-page-kicker-color) !important;
  font-family: 'DM Sans', var(--poa-font-sans) !important;
  font-size: var(--poa-page-kicker-size) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

/* Content sections use the same main-title tier even when assembled by JavaScript. */
.detail-section-card.api-detail-card > h2,
.detail-sidebar .detail-section-card > h2,
.knowledge-library-head > .kicker,
.service-promise-heading > .kicker,
.process-support-head > .module-kicker {
  color: #ff9900 !important;
  font-family: var(--poa-font-sans) !important;
  font-size: var(--poa-module-title-size) !important;
  font-weight: var(--poa-module-title-weight) !important;
  line-height: var(--poa-module-title-leading) !important;
  letter-spacing: var(--poa-module-title-tracking) !important;
}

/* The former orange contact bands now support the requested orange headings. */
.service-contact-cta {
  background: linear-gradient(120deg, #20364f, #142438);
  border: 1px solid #2b435c;
}
.service-contact-cta h2,
.contact-section .kicker { color: #ff9900 !important; }
.service-contact-cta .section-kicker { color: #ffbd68; }
.service-contact-cta p { color: #d6e1eb !important; }
.service-contact-cta a.primary-action {
  color: #fff !important;
  background: #ffad38;
  border: 1px solid #ffad38;
}
.service-contact-cta a.primary-action:hover {
  color: #fff !important;
  background: #ffc063;
}
.contact-section {
  background-color: #142438;
  background-image: linear-gradient(90deg, rgba(20,36,56,.96), rgba(20,36,56,.84)), url("../static/all/tu1.png");
}
.contact-section .contact-inner > div:first-child > p:not(.kicker) { color: #e0e8f0; }

/* Repeated entries remain a smaller, dark-ink tier. */
.search-result-item h2,
.home-dash .home-tool-copy strong,
.appeal-service-card h3 {
  color: #17283c;
  font-family: var(--poa-font-sans);
  font-size: var(--poa-card-title-size);
  font-weight: var(--poa-card-title-weight);
  line-height: 1.5;
}

/* A consistent gap connects the title, explanation, and content. */
:is(.section-heading, .section-head, .home-section-head, .dashboard-panel-head,
    .policy-stream-heading, .cases-results-head, .community-qa-head) {
  margin-bottom: 18px;
}
:is(.section-heading, .section-head, .home-section-head, .dashboard-panel-head,
    .policy-stream-heading, .cases-results-head, .community-qa-head) p:not(.kicker) {
  margin-top: 8px;
}
:is(.platform-section, .service-advantages, .service-promises,
    .service-case-preview, .service-contact-cta) { margin-top: 32px; }

/* Light surfaces use one restrained border and corner treatment. */
:is(.service-card, .policy-card, .case-card,
    .community-question, .detail-section-card, .ip-tool-card,
    .platform-card, .advantage-grid article) {
  border-color: #dce5ee;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(20,39,60,.035);
}

/* Orange action buttons use white text across pages. */
:is(.home-tool-action, .ip-entry .home-tool-action, a.services-hero-primary,
    .primary-action:not(.dash-cta), .rdx-btn-primary, .case-apply,
    .case-page-number.active, .search-results-form button:not(.search-results-clear)),
:is(.home-tool-action, .ip-entry .home-tool-action, a.services-hero-primary,
    .primary-action:not(.dash-cta), .rdx-btn-primary, .case-apply,
    .case-page-number.active, .search-results-form button:not(.search-results-clear)):hover {
  color: #fff !important;
  text-shadow: none !important;
}
.platform-card.active { color: #805000; }
.services-stats strong { color: var(--poa-page-title-color, #ff9900); }
.appeal-service-card .service-no { color: #a35c00; }
.rdx-step-label,
.rdx-or span,
.poa-select.is-placeholder .poa-select-label { color: #4e5f70; }
.search-result-meta b { color: #41505f; }
body[data-page="about"] .about-advantage-section.why .why-card-fixed h3 {
  color: #17283c !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Continuous shine competes with page content; keep feedback on hover/focus. */
.site-search-button::before,
.dash-cta::before,
.home-tool-action::before,
.ip-check::before,
.primary-action::before,
a.services-hero-primary::before { animation: none; }

/* At laptop widths the six About advantages need real reading width. */
@media (min-width: 981px) and (max-width: 1160px) {
  body[data-page="about"] .about-advantage-section.why .why-grid-fixed {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 20px !important;
  }
  body[data-page="about"] .about-advantage-section.why .why-side-fixed {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }
  body[data-page="about"] .about-advantage-section.why .why-grid-fixed .why-card-fixed {
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
  }
  body[data-page="about"] .about-advantage-section.why .why-center-fixed {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 320px;
  }
}

/* --------------------------------------------------------------------------
   Content-page hero system
   Home keeps its independent command-centre hero. All other page heroes use
   the same surface, spacing rhythm and visual proportion while retaining their
   own copy, badges, actions and imagery.
   -------------------------------------------------------------------------- */
:root {
  --poa-hero-min-height: 300px;
  --poa-hero-radius: 12px;
  --poa-hero-border: #dce5ee;
  --poa-hero-accent: #ff9900;
  --poa-hero-shadow: 0 12px 30px -24px rgba(20, 39, 60, .42);
  --poa-hero-copy-padding: 32px;
}

body:not([data-page="home"]) :is(
  .module-intro.image-intro,
  .appeal-types-hero,
  .services-hero.services-hero-image,
  .detail-head
) {
  min-height: var(--poa-hero-min-height);
  overflow: hidden;
  border: 1px solid var(--poa-hero-border);
  border-left: 4px solid var(--poa-hero-accent);
  border-radius: var(--poa-hero-radius);
  background: #fff;
  box-shadow: var(--poa-hero-shadow);
}

body:not([data-page="home"]) .module-intro.image-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
  align-items: stretch;
  padding: 0;
}

body:not([data-page="home"]) .module-intro.image-intro > div:first-child,
.appeal-types-hero .hero-content,
.services-hero-copy,
.detail-head-copy {
  align-self: center;
  min-width: 0;
  padding: var(--poa-hero-copy-padding);
}

body:not([data-page="home"]) .module-intro.image-intro > div:first-child {
  padding: var(--poa-hero-copy-padding) !important;
}

body[data-page="policy"] .module-intro.image-intro-policy {
  display: flex !important;
  align-items: center;
  min-height: var(--poa-hero-min-height) !important;
  padding: 0 !important;
}

body[data-page="policy"] .module-intro.image-intro-policy > div:first-child {
  width: 100%;
}

.appeal-types-hero,
.services-hero.services-hero-image,
.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
  align-items: stretch;
  height: auto;
  padding: 0;
}

.appeal-types-hero .hero-content { max-width: none; }

:is(
  .module-intro.image-intro > div:first-child,
  .appeal-types-hero .hero-content,
  .services-hero-copy,
  .detail-head-copy
) > :is(.eyebrow, .hero-eyebrow, .detail-head-code) {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
}

:is(
  .module-intro.image-intro > div:first-child,
  .appeal-types-hero .hero-content,
  .services-hero-copy,
  .detail-head-copy
) > h1 {
  margin: 0 !important;
}

:is(
  .module-intro.image-intro > div:first-child,
  .appeal-types-hero .hero-content,
  .services-hero-copy,
  .detail-head-copy
) > p:not(.eyebrow) {
  margin: 12px 0 0 !important;
}

.module-intro.image-intro :is(.module-badge, .outline-action),
.detail-head-category { margin-top: 16px !important; }
.appeal-types-hero .hero-facts { margin-top: 18px; }
.services-hero-tags { margin-top: 16px; }
.services-hero-actions { margin-top: 16px; }

.module-intro-visual,
.appeal-types-visual,
.services-hero-visual,
.detail-head-media {
  min-width: 0;
  overflow: hidden;
  background: #e9eef3;
}

.module-intro-visual {
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: calc(var(--poa-hero-min-height) - 2px);
}

.appeal-types-visual,
.services-hero-visual,
.detail-head-media {
  display: block !important;
  align-self: stretch;
  width: auto;
  height: auto;
  min-height: 202px;
  margin: 14px;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}

:is(.module-intro-visual, .appeal-types-visual, .services-hero-visual, .detail-head-media) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 761px) {
  body[data-page="appeal-qa"] .module-intro.image-intro {
    height: var(--poa-hero-min-height);
    min-height: var(--poa-hero-min-height);
  }

  body[data-page="appeal-qa"] .module-intro-visual {
    height: 100%;
    min-height: 0;
  }

  body[data-page="services"] .services-hero.services-hero-image {
    height: var(--poa-hero-min-height);
    min-height: var(--poa-hero-min-height);
  }

  body[data-page="services"] .services-hero-visual {
    height: auto;
    min-height: 0;
  }

  body[data-page="appeal-type-detail"] .appeal-detail-content .detail-head {
    height: 230px;
    min-height: 230px;
  }

  body[data-page="appeal-type-detail"] .appeal-detail-content .detail-head-media {
    height: auto;
    min-height: 0;
  }
}

/* The company page keeps its photographic treatment but joins the same card
   geometry and mobile spacing as the other content-page introductions. */
body[data-page="about"] .page-hero {
  min-height: var(--poa-hero-min-height);
  overflow: hidden;
  border: 1px solid #2c4258;
  border-left: 4px solid var(--poa-hero-accent);
  border-radius: var(--poa-hero-radius);
  box-shadow: var(--poa-hero-shadow);
}

/* Align the content and search introductions to the shared desktop hero height. */
@media (min-width: 761px) {
  .services-hero-copy {
    padding-block: calc(var(--poa-hero-copy-padding) - 1px);
  }

  body[data-page="about"] .page-hero {
    padding-block: 32px !important;
  }

  .search-results-hero {
    min-height: var(--poa-hero-min-height);
    align-items: center;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --poa-hero-copy-padding: 26px; }

  body:not([data-page="home"]) .module-intro.image-intro,
  .appeal-types-hero,
  .services-hero.services-hero-image,
  .detail-head {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 36%);
  }

  .appeal-types-visual,
  .services-hero-visual,
  .detail-head-media { margin: 12px; }
}

@media (max-width: 760px) {
  :root { --poa-hero-copy-padding: 20px; }

  body:not([data-page="home"]) :is(
    .module-intro.image-intro,
    .appeal-types-hero,
    .services-hero.services-hero-image,
    .detail-head
  ) {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    border-radius: 11px;
  }

  body:not([data-page="home"]) .module-intro.image-intro > div:first-child,
  .appeal-types-hero .hero-content,
  .services-hero-copy,
  .detail-head-copy {
    width: 100%;
    max-width: none;
    padding: var(--poa-hero-copy-padding) !important;
  }

  body[data-page="policy"] .module-intro.image-intro-policy {
    min-height: 0 !important;
  }

  .module-intro-visual,
  .appeal-types-visual,
  .services-hero-visual,
  .detail-head-media {
    width: auto;
    height: 140px;
    min-height: 140px;
    margin: 0 10px 10px;
    border-radius: 8px;
  }

  .module-intro-visual { width: calc(100% - 20px); }

  .services-hero-actions { align-items: flex-start; }

  body[data-page="about"] .page-hero {
    min-height: 0;
    padding: 28px 18px !important;
    border-radius: 11px;
    background-position: 68% center;
  }

  body[data-page="about"] .page-hero .container {
    width: 100%;
    max-width: none;
  }

  body[data-page="about"] .about-section {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  body[data-page="about"] .about-section .about-profile-side { margin-top: 24px; }

  body[data-page="about"] .services-section {
    padding-top: 36px;
    padding-bottom: 56px;
  }
}

@media (max-width: 420px) {
  :root { --poa-hero-copy-padding: 18px; }

  :is(.services-hero-tags, .services-hero-actions, .hero-facts) { row-gap: 8px; }
  .services-hero-link { min-height: 38px; }
  .module-intro-visual,
  .appeal-types-visual,
  .services-hero-visual,
  .detail-head-media { height: 126px; min-height: 126px; }
}

/* --------------------------------------------------------------------------
   全站按钮系统 / Site button system
   主操作、次操作和紧凑控件各自统一；卡片按钮、下拉框与手风琴保留结构语义。
   -------------------------------------------------------------------------- */

/* 主操作：统一高度、圆角、字重、品牌橙底和交互反馈。 */
body :is(
  .primary-action,
  .rdx-btn-primary,
  .case-apply,
  .services-hero-primary,
  .home-tool-action,
  .dashboard-search-box button:not(.dashboard-search-clear),
  .search-results-form button:not(.search-results-clear),
  .btn-orange.contact-trigger
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--poa-button-height) !important;
  min-height: var(--poa-button-height) !important;
  padding: 0 18px !important;
  border: 1px solid var(--poa-button-accent-hover) !important;
  border-radius: var(--poa-button-radius) !important;
  color: var(--poa-button-ink) !important;
  background: linear-gradient(135deg, #ffb13b 0%, var(--poa-button-accent) 100%) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px -11px rgba(154, 82, 0, .78) !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease !important;
}

body :is(
  .primary-action,
  .rdx-btn-primary,
  .case-apply,
  .services-hero-primary,
  .home-tool-action,
  .dashboard-search-box button:not(.dashboard-search-clear),
  .search-results-form button:not(.search-results-clear),
  .btn-orange.contact-trigger
):hover {
  color: var(--poa-button-ink) !important;
  border-color: #dc7e00 !important;
  background: linear-gradient(135deg, #ffc15f 0%, #ffa31a 100%) !important;
  box-shadow: 0 11px 22px -13px rgba(154, 82, 0, .86) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

body :is(
  .primary-action,
  .rdx-btn-primary,
  .case-apply,
  .services-hero-primary,
  .home-tool-action,
  .dashboard-search-box button:not(.dashboard-search-clear),
  .search-results-form button:not(.search-results-clear),
  .btn-orange.contact-trigger
):active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(143, 76, 0, .16) !important;
}

/* 上面的 display:inline-flex!important 会盖掉统一规则里的 [hidden]{display:none!important}
   （选择器更具体），导致 JS 想隐藏这类按钮时隐藏不掉；这里补一条更具体的兜底。 */
body :is(
  .outline-action,
  .rdx-btn:not(.rdx-btn-primary),
  .case-reset,
  .qa-expand-button
)[hidden] {
  display: none !important;
}

/* 次操作：统一白底、深橙文字和橙色描边。 */
body :is(
  .outline-action,
  .rdx-btn:not(.rdx-btn-primary),
  .case-reset,
  .qa-expand-button
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--poa-button-height) !important;
  min-height: var(--poa-button-height) !important;
  padding: 0 14px !important;
  border: 1px solid var(--poa-button-border) !important;
  border-radius: var(--poa-button-radius) !important;
  color: var(--poa-button-orange-text) !important;
  background: #fff !important;
  font-family: var(--poa-font-sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 5px 14px -12px rgba(154, 82, 0, .7) !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease !important;
}

body :is(
  .outline-action,
  .rdx-btn:not(.rdx-btn-primary),
  .case-reset,
  .qa-expand-button
):hover {
  color: #8f4c00 !important;
  border-color: var(--poa-button-accent) !important;
  background: #fff7e8 !important;
  box-shadow: 0 8px 18px -13px rgba(154, 82, 0, .76) !important;
  transform: translateY(-1px) !important;
}

/* 文字操作保留轻量层级，但统一字号、字重、颜色和触控高度。 */
body :is(.text-action, .home-ghost-action, .services-hero-link, .rdx-back) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: var(--poa-button-height) !important;
  color: var(--poa-button-orange-text) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body :is(.text-action, .home-ghost-action, .services-hero-link, .rdx-back):hover {
  color: #8f4c00 !important;
}

/* 标签、筛选和分页属于紧凑控件，共用同一圆角与状态语言。 */
body :is(
  .dashboard-search-tab,
  .policy-tab,
  .search-filter-tabs button,
  .search-suggestions button,
  .case-page-number,
  .case-page-direction
) {
  min-height: var(--poa-button-compact-height) !important;
  border-radius: var(--poa-button-compact-radius) !important;
  font-family: var(--poa-font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease !important;
}

body :is(button, a.primary-action, a.outline-action, a.services-hero-primary,
  a.home-ghost-action, a.services-hero-link):focus-visible {
  outline: 3px solid var(--poa-button-focus) !important;
  outline-offset: 2px !important;
}

body button:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  body .home-dash :is(.dashboard-search-tab, .search-suggestions button) {
    font-size: clamp(10px, 2.8vw, 11px) !important;
  }
  body .home-dash .search-suggestions > span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  body :is(button, .primary-action, .outline-action, .services-hero-primary,
    .home-ghost-action, .services-hero-link) {
    transition: none !important;
  }
}