/* Zola GP Theme — shared site system
   Cleaned version:
   - one custom header
   - one custom footer
   - one shared modal
   - one shared form language for all .hs-* blocks
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--hs-font-base);
  font-size: 16px;
  line-height: 1.7;
  color: var(--hs-text);
  background: var(--hs-bg);
  overflow-x: hidden;
}

body.hs-modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--hs-accent);
  text-decoration: none;
  transition: color var(--hs-transition);
}

a:hover {
  color: var(--hs-accent-dark);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 16px;
  color: var(--hs-title);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 {
  font-size: 46px;
}

h2 {
  font-size: 38px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

p,
ul,
ol {
  margin: 0 0 16px;
}

.hs-container {
  width: min(100% - 40px, var(--hs-container));
  margin: 0 auto;
}

.hs-section {
  padding: var(--hs-section-y) 0;
  background: var(--hs-bg);
}

.hs-section--alt {
  background: var(--hs-bg-alt);
}

.hs-grid {
  display: grid;
  gap: 24px;
}

.hs-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hs-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hs-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hs-grid--1 {
  /* Single-column variant — used by why-us "mini-hero" rows where each
     row is a full-width .hs-card with .hs-split inside. .hs-grid base
     gap: 24px gives consistent spacing between rows. */
  grid-template-columns: 1fr;
}

/* Site-wide eyebrow label (small caps above headings) */
.hs-eyebrow {
  display: inline-block;
  color: var(--hs-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Site-wide section head (centered eyebrow + H2/H3) */
.hs-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}
.hs-section-head__title {
  font-size: 32px;
  color: var(--hs-title);
  margin: 0;
  line-height: 1.25;
}
@media (max-width: 768px) {
  .hs-section-head__title { font-size: 26px; }
}

/* 4.5.13: GP's <footer class="site-footer"> wrapper is part of GP's
   footer.php template, NOT generate_construct_footer action — so removing
   the action only nukes the CONTENT but leaves an empty <footer> with
   default padding that shows as a blank strip below our hs-site-footer.
   Force-hide it. Same for .site-info (credit container in some GP versions).
   .widget-area kept as defense for any leftover sidebar widget. */
.site-footer,
.site-info,
.widget-area {
  display: none;
}

/* Hide the auto-generated WordPress entry-header ONLY on our ACF templates
   (they render their own H1/banner from ACF fields). Default-template pages
   and blog posts keep their entry-header so users don't end up with pages
   that have no visible title.
 */
body:is(
  .page-template-tpl-product-collection-v3,
  .page-template-tpl-raw-html
) .entry-header {
  display: none;
}

body.page :is(
  .page-header-image-single,
  .generate-page-header,
  .generate-featured-image,
  .featured-image,
  .post-image-above-header,
  .inside-article > .post-image
) {
  display: none !important;
}

.site-content .content-area,
.site-content .hs-pcv3-page {
  /* GP .site-content 是 flex 容器:flex 子项宽度默认随内容固有宽度走,
     内容少的页面 main 会收缩、整页看似"不居中"。强制铺满。 */
  width: 100%;
  float: none;
}

.inside-article,
.entry-content,
.page.one-container .site-content,
.single.one-container .site-content,
.container.grid-container {
  max-width: 100%;
}

.inside-article {
  padding: 0;
}

/* Raw HTML (Full Width) rendering — active for:
   - pages using "Raw HTML (Full Width)" template (explicit opt-in)
   - all default-template pages (via page.php)
   Kills every width/padding wrapper so hand-written HTML can be truly
   edge-to-edge. Header/footer still render normally. */
body.hs-raw-html-active :is(
  #page,
  .site-content,
  .content-area,
  .site-main,
  .inside-article,
  .entry-content,
  .hs-raw-html
),
body.hs-raw-html-active .site-main > article.post,
body.hs-raw-html-active .site-main > article.page,
body.hs-raw-html-active .site-main > article.hentry {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.hs-raw-html-active .hs-raw-html {
  display: block;
}

.entry-content a {
  color: var(--hs-accent);
}

.entry-content a:hover {
  color: var(--hs-accent-dark);
  text-decoration: underline;
}

/* ==========================================================================
   Global table styling — 4.8.96 恢复。
   4.8.91 清理 .hs-pc-richtext 死类时，脚本对 `:is(.entry-content,
   .hs-pc-richtext, .hs-pcv3-richtext) table` 这类三合一合并选择器按 needle
   删了整条规则（连带 entry-content + pcv3 一起蒸发）—— richtext 表格样式
   全丢（表头主色/白字/斑马纹消失，用户实测发现）。此处恢复，selector
   去掉死类 .hs-pc-richtext，保留 .entry-content + .hs-pcv3-richtext。
   ========================================================================== */
:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--hs-border);
}

:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table th,
:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: none;
  border-top: 1px solid var(--hs-border);
}

:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table thead th {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  font-weight: 600;
  border-top: none;
  letter-spacing: 0.02em;
}

:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table thead th a {
  color: var(--hs-text-inverse);
  text-decoration: underline;
}

:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table tbody tr:nth-child(even) {
  background: var(--hs-bg-alt);
}

:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table tbody tr:first-child td {
  border-top: none;
}

:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table td:first-child {
  font-weight: 600;
  color: var(--hs-accent-dark);
}

/* Tables without a <thead> — keep them clean but no accent row */
:is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table:not(:has(thead)) tr:first-child {
  background: var(--hs-bg-alt);
  font-weight: 600;
}

/* Mobile horizontal scroll: parent gets overflow, table gets min-width */
@media (max-width: 768px) {
  :is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  :is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table {
    min-width: 560px;
    font-size: 13px;
  }

  :is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table th,
  :is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table td {
    padding: 10px 12px;
  }
}

/* JS-injected table wrapper (see site.js wrapTables()) — gives any content
   table a robust horizontal-scroll container that works regardless of the
   parent's overflow rules. Skipped inside .hs-pg-compare which has its own
   table layout. */
.hs-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
}
.hs-table-wrap > table {
  margin: 0;
  min-width: max-content;
}

:is(.hs-btn, .hs-btn-inquiry) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 28px;
  border: 1px solid var(--hs-accent);
  border-radius: var(--hs-radius-btn);
  background: transparent;
  color: var(--hs-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}

/* Suppress browser default focus ring after mouse click (keyboard nav
   still gets a visible ring via :focus-visible below).
   4.8.90: 补齐 background/color/border —— 之前只声明 outline，点击松开后
   按钮保持 :focus，背景被 GeneratePress 父主题 button:focus 的深灰抢走
   （0,1,1 打赢子主题基础规则 0,1,0），出现"黑底红框"闪现（用户截图实证）。
   显式声明默认态三件套打回 GP。本规则必须排在 :hover 之前 —— 同特异性
   下靠源码顺序让 hover/active 的主色在悬停/按下时接管。 */
:is(.hs-btn, .hs-btn-inquiry):focus {
  outline: none;
  background: transparent;
  color: var(--hs-accent);
  border-color: var(--hs-accent);
}

:is(.hs-btn, .hs-btn-inquiry):is(:hover, :focus-visible) {
  background: var(--hs-btn-hover-bg, var(--hs-accent));
  color: var(--hs-btn-hover-text, #ffffff);
  border-color: var(--hs-btn-hover-bg, var(--hs-accent));
}

/* Active (pressed) state mirrors hover — prevents the grey browser
   default flash on tap/click. */
:is(.hs-btn, .hs-btn-inquiry):active {
  background: var(--hs-btn-hover-bg, var(--hs-accent));
  color: var(--hs-btn-hover-text, #ffffff);
  border-color: var(--hs-btn-hover-bg, var(--hs-accent));
}

/* Keep keyboard accessibility focus ring (only triggers for tab nav,
   not mouse click). */
:is(.hs-btn, .hs-btn-inquiry):focus-visible {
  outline: 2px solid var(--hs-accent);
  outline-offset: 2px;
}

/* 4.8.36: removed .hs-btn--ghost / --sm / --lg modifier rules and stripped
   the modifier class names from templates. All site-wide buttons share
   one look: 44px tall / transparent bg / accent border + text / hover
   fills accent. .hs-btn-inquiry is visually identical to .hs-btn — the
   class only exists as a JS hook (.js-hs-open-inquiry triggers the modal
   on click). 4.8.38 rolled back the brief 4.8.37 accent-fill override on
   .hs-btn-inquiry per user preference for site-wide button uniformity. */

/* === Card system (.hs-card) — used by Pitfalls (v3), blog index, Raw HTML.
   Unified design: 100% height, centered title, left-aligned body, CTA bottom
   + center. Product-template cards (.hs-pcv3-card / related / support) get
   the SAME design via product-shared.css using the same CSS variables —
   keeps non-product pages light (4.8.34 architecture plan B). */
.hs-card {
  height: 100%;
  background: var(--hs-surface, #fff);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-card, 14px);
  overflow: hidden;
  box-shadow: var(--hs-shadow-card, 0 2px 12px rgba(0,0,0,.04));
  display: flex;
  flex-direction: column;
  transition: transform var(--hs-transition), box-shadow var(--hs-transition);
}
.hs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-card-hover, 0 16px 36px rgba(0,0,0,.1));
}
.hs-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hs-accent-soft);
  font-size: 0;
}
.hs-card__image :is(img, svg) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hs-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 4.8.91: __title/__desc 的字号/边距定义合并到 L1220 附近的
   "Card content slots" 块（此处旧值 18px/14px 一直被后者同特异性
   覆盖，属死代码）。本块只保留后者没有声明、实际生效的对齐/行高。 */
.hs-card__title {
  text-align: center;
}
.hs-card__desc {
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}
.hs-card__desc p { margin: 0 0 8px; font-size: 14px; }
.hs-card__desc p:last-child { margin-bottom: 0; }

.hs-split {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hs-split__media,
.hs-split__content {
  flex: 1 1 50%;
}

.hs-split__media img {
  width: 100%;
  border-radius: var(--hs-radius-card);
  box-shadow: var(--hs-shadow-card);
}


.hs-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--hs-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.hs-site-header__inner {
  display: grid;
  /* 6.0.21: 第 4 列给页眉语言菜单;无语种时该列宽为 0,单语言站布局零变化 */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  min-height: 96px;
  position: relative;
}

.hs-site-header__brand {
  display: flex;
  align-items: center;
}

.hs-site-header__logo,
.hs-site-footer__logo {
  display: inline-flex;
  align-items: center;
}

.hs-site-header__logo-image {
  max-height: 48px;
  width: auto;
}

.hs-site-footer__logo-image {
  max-height: 46px;
  width: auto;
}

.hs-site-header__brand-text,
.hs-site-footer__logo-fallback {
  color: var(--hs-title);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.hs-site-footer__logo-fallback {
  color: var(--hs-text-inverse);
}

.hs-site-header__nav {
  justify-self: center;
}

.hs-site-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-site-header__menu,
.hs-site-header__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hs-site-header__menu li {
  margin: 0;
}

.hs-site-header__menu > li {
  position: relative;
}

.hs-site-header__menu > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 96px;
}

.hs-site-header__menu a {
  color: var(--hs-title);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hs-site-header__menu > li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.hs-site-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.hs-site-header__menu .sub-menu li {
  position: relative;
}

.hs-site-header__menu .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  white-space: nowrap;
}

/* 二级菜单项有三级时：箭头贴最右侧（桌面 flyout 向右展开） */
.hs-site-header__menu .sub-menu li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs-site-header__menu .sub-menu li.menu-item-has-children > a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.hs-site-header__menu .sub-menu .sub-menu {
  top: -9px;
  left: calc(100% + 8px);
}

.hs-site-header__menu li:hover > .sub-menu,
.hs-site-header__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 4.8.67: 顶级菜单恢复原色（白底深字），只在 hover 时换字色为 accent；
   accent 实底 + 白字行为只留给 sub-menu。
   先前 4.8.66 一刀切把顶级也改成 accent 实底太抢眼，回退。 */
.hs-site-header__menu .current-menu-item > a,
.hs-site-header__menu .current-menu-ancestor > a,
.hs-site-header__menu .current-menu-parent > a,
.hs-site-header__menu .current_page_item > a,
.hs-site-header__menu a:hover {
  color: var(--hs-accent);
}

.hs-site-header__menu .sub-menu .current-menu-item > a,
.hs-site-header__menu .sub-menu .current-menu-ancestor > a,
.hs-site-header__menu .sub-menu .current-menu-parent > a,
.hs-site-header__menu .sub-menu a:hover,
.hs-site-header__menu .sub-menu a:focus-visible {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
}

.hs-site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 页眉语言菜单(多语种克隆系统):地球图标 + 下拉 */
.hs-ml-langmenu {
  position: relative;
}
.hs-ml-langmenu summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--hs-text);
  padding: 6px 10px;
  border: 1px solid var(--hs-border, #e2e5ea);
  border-radius: 999px;
  white-space: nowrap;
}
.hs-ml-langmenu summary::-webkit-details-marker { display: none; }
.hs-ml-langmenu summary:hover { border-color: var(--hs-accent); color: var(--hs-accent); }
.hs-ml-langmenu__caret { font-size: 10px; opacity: 0.6; }
.hs-ml-langmenu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hs-border, #e2e5ea);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  min-width: 150px;
  z-index: 9990;
}
.hs-ml-langmenu__list a,
.hs-ml-langmenu__current {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--hs-text);
  text-decoration: none;
}
.hs-ml-langmenu__list a:hover { background: var(--hs-bg-soft, #f3f5f8); color: var(--hs-accent); }
.hs-ml-langmenu__current { font-weight: 700; opacity: 0.55; }

.hs-site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--hs-accent);
  border-radius: 5px;
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

.hs-site-header__toggle:hover,
.hs-site-header__toggle:focus-visible {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  border-color: var(--hs-accent);
}

.hs-site-footer {
  background: var(--hs-footer);
  color: var(--hs-footer-text);
}

.hs-site-footer a {
  color: var(--hs-footer-text);
}

.hs-site-footer a:hover {
  color: var(--hs-text-inverse);
}

.hs-site-footer__inner {
  padding: 52px 0 24px;
}

.hs-site-footer__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.1fr;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hs-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hs-site-footer__text {
  max-width: 560px;
  color: var(--hs-footer-text-muted);
}

.hs-site-footer__heading {
  margin-bottom: 14px;
  color: var(--hs-text-inverse);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hs-site-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-site-footer__menu li {
  margin-bottom: 10px;
}

.hs-site-footer__menu a {
  color: var(--hs-footer-text-muted);
}

.hs-site-footer__menu .current-menu-item > a,
.hs-site-footer__menu a:hover {
  color: var(--hs-text-inverse);
}

.hs-site-footer__contact {
  margin-bottom: 8px;
}

.hs-site-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 22px;
  border: 1px solid #ffffff;
  border-radius: var(--hs-radius-btn);
  background: #ffffff;
  color: var(--hs-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}

/* Footer CTA hover — inverse (transparent bg + white text) with white border. */
.hs-site-footer__cta:is(:hover, :focus-visible) {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.hs-site-footer__cta:focus {
  outline: none;
}

.hs-site-footer__cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.hs-site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
}

.hs-site-footer__copyright {
  margin: 0;
  color: var(--hs-footer-text-faint);
  font-size: 14px;
}

.hs-site-footer__bottom-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hs-site-footer__bottom-links a {
  color: var(--hs-footer-text-muted);
}

.hs-site-footer__bottom-links a:hover {
  color: var(--hs-text-inverse);
}

/* 页脚社媒图标(company_sameas 同源) */
.hs-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-social__link {
  display: inline-flex;
  color: var(--hs-footer-text-muted);
}
.hs-social__link:hover {
  color: var(--hs-text-inverse);
}

.hs-whatsapp,
.hs-back-to-top {
  position: fixed;
  right: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  z-index: 999;
}

.hs-whatsapp {
  bottom: 200px;
  background: #25d366;
  border: 0;
  cursor: pointer;
  padding: 0;
}
/* 4.9.50/4.8.172/4.5.135: 浮标悬停不变色 —— 多销售模式下是 <button>,
   GP 母主题全局 button:hover(灰底)会盖过绿色,这里钉死。 */
.hs-whatsapp:hover,
.hs-whatsapp:focus,
.hs-whatsapp:active {
  background: #25d366;
  border: 0;
  color: #fff;
}
/* 多销售面板(4.9.49/4.8.171/4.5.134):浮标上方弹出,白卡列表 */
.hs-whatsapp-panel {
  position: fixed;
  right: 16px;
  bottom: 264px;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--hs-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  z-index: 999;
}
.hs-whatsapp-panel__item {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--hs-border);
}
.hs-whatsapp-panel__item:last-child {
  border-bottom: 0;
}
.hs-whatsapp-panel__item:hover {
  background: var(--hs-bg-alt, #f6f7f9);
}
.hs-whatsapp-panel__name {
  display: block;
  font-weight: 600;
  color: var(--hs-title);
  font-size: 15px;
}
.hs-whatsapp-panel__role {
  display: block;
  font-size: 13px;
  color: var(--hs-text-muted, #697469);
  margin-top: 2px;
}

.hs-back-to-top {
  bottom: 30px;
  padding: 0;
  /* 4.8.37: aligned with the unified .hs-btn look (transparent bg + accent
     border/text). On hover the shared rule fills with accent + white text. */
  border: 1px solid var(--hs-accent);
  background: transparent;
  color: var(--hs-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--hs-transition),
    transform var(--hs-transition),
    visibility var(--hs-transition),
    background-color var(--hs-transition),
    color var(--hs-transition),
    border-color var(--hs-transition);
}

.hs-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hs-back-to-top:is(:hover, :focus-visible) {
  background: var(--hs-btn-hover-bg, var(--hs-accent));
  color: var(--hs-btn-hover-text, #ffffff);
  border-color: var(--hs-btn-hover-bg, var(--hs-accent));
}

.hs-text-center {
  text-align: center;
}

@media (max-width: 1024px) {
  .hs-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs-split {
    gap: 28px;
  }

  .hs-site-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .hs-site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 992px) {
  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 32px;
  }

  .hs-split,
  :is(.hs-form-row) {
    flex-direction: column;
  }

  :is(.hs-form-row) {
    gap: 0;
  }

  .hs-site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding: 14px 0;
  }

  .hs-site-header__toggle {
    display: inline-flex;
    justify-self: end;
  }

  .hs-site-header__nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 30;
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--hs-border);
    border-top: 0;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  }

  .hs-site-header__actions {
    display: none;
  }

  .hs-ml-langmenu { justify-self: end; margin-left: 0; } /* 移动端导航隐藏后菜单落在 1fr 列,右对齐贴汉堡 */
  .hs-ml-langmenu__label { display: none; } /* 手机上只留地球图标,惯例够认 */

  .hs-site-header.is-open .hs-site-header__nav {
    display: block;
  }

  .hs-site-header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0;
  }

  .hs-site-header__menu li {
    width: 100%;
  }

  .hs-site-header__menu > li > a {
    min-height: 0;
  }

  .hs-site-header__menu a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 5px;
  }

  .hs-site-header__menu > li.menu-item-has-children > a::after {
    margin-left: auto;
    transition: transform 0.22s ease;
  }

  /* Sub-menus on mobile: collapsed by default, toggled via JS click on
     parent. Parent <li> gets `.is-submenu-open` when expanded. */
  .hs-site-header__menu .sub-menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .hs-site-header__menu .menu-item-has-children.is-submenu-open > .sub-menu {
    display: block;
    padding-bottom: 6px;
  }

  .hs-site-header__menu > li.menu-item-has-children.is-submenu-open > a::after {
    transform: rotate(225deg) translateY(-1px);
  }

  /* 移动端二级带三级：箭头向下，展开后翻转（点击展开而非 flyout） */
  .hs-site-header__menu .sub-menu li.menu-item-has-children > a::after {
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.22s ease;
  }

  .hs-site-header__menu .sub-menu li.menu-item-has-children.is-submenu-open > a::after {
    transform: rotate(225deg);
  }

  .hs-site-header__menu .sub-menu a {
    padding: 10px 16px;
    white-space: normal;
  }

  .hs-site-header__menu li + li {
    margin-top: 2px;
  }

  /* 6.0.27: 子菜单首行"进入父级页"链接(JS 注入)——仅移动端存在意义,
     桌面 hover 下拉在本媒体查询外统一隐藏(见文件末尾对应规则) */
  .hs-site-header__menu .hs-submenu-overview > a {
    font-weight: 700;
  }

  /* 6.0.26: 移动菜单 hover/current 文字一律白色——accent-soft 为深色底的
     站点上主色字不可读(用户截图反馈,原 4.8.67 浅底假设不成立) */
  .hs-site-header__menu a:hover,
  .hs-site-header__menu a:focus-visible,
  .hs-site-header__menu .current-menu-item > a,
  .hs-site-header__menu .current_page_item > a {
    background: var(--hs-accent-soft);
    color: #ffffff;
  }

  .hs-site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .hs-site-footer__brand,
  .hs-site-footer__column--contact {
    grid-column: 1 / -1;
  }

  .hs-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  :root {
    --hs-section-y: 56px;
  }

  .hs-container {
    width: min(100% - 24px, var(--hs-container));
  }

  .page .elementor-section.elementor-section-boxed > .elementor-container,
  .page .e-con.e-con-boxed > .e-con-inner {
    width: min(100% - 24px, 1140px);
  }

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  .hs-site-header__logo-image {
    max-height: 40px;
  }

  .hs-site-header__toggle {
    min-height: 40px;
    padding: 8px 14px;
  }

  .hs-site-header__menu a {
    color: var(--hs-accent);
  }

  .hs-modal {
    padding: 12px;
  }

  .hs-modal__header,
  .hs-modal__body,
  :is(.hs-form) {
    padding: 16px;
  }

  .hs-site-footer__inner {
    padding: 44px 0 24px;
  }

  .hs-site-footer__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hs-site-footer__brand,
  .hs-site-footer__column--contact {
    grid-column: auto;
  }

  .hs-whatsapp,
  .hs-back-to-top {
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .hs-whatsapp {
    bottom: 200px;
  }

  .hs-back-to-top {
    bottom: 20px;
  }
}

/* ==========================================================================
   Page Component Layer (.hs-page / .hs-pg-*)
   ==========================================================================
   Used by raw HTML / AI-generated pages dropped into the
   "Raw HTML (Full Width)" template. The wrapper <div class="hs-page"> is
   added by tpl-raw-html.php; everything below either inherits via that
   wrapper (typography defaults) or is opt-in via .hs-pg-* class names.

   The point of this layer is so AI-generated HTML helper pages don't need
   to write their own <style> — they assemble pages purely from class hooks
   and inherit the theme's brand visual language.

   Existing reusable primitives this layer composes with:
     .hs-container               max-width wrapper (1200px)
     .hs-section / --alt         vertical section padding
     .hs-grid / --2 / --3 / --4  responsive grid
     .hs-eyebrow                 small label above heading
     .hs-section-head            centered heading block
     .hs-card / __image / __body card primitive
     .hs-split / __media / __content   two-column split (used by hero)
     .hs-btn / .hs-btn-inquiry   buttons

   New additions in this layer:
     .hs-page            typography defaults for raw-HTML body
     .hs-pg-hero         hero section (composes .hs-split inside)
     .hs-pg-hero--center centered text variant
     .hs-pg-hero--inverse  accent-bg variant (used by blog index banner)
     .hs-pg-hero__lead   lead paragraph below H1
     .hs-card__title     card heading
     .hs-card__desc      card description paragraph
     .hs-card__link      "Learn more →" link at bottom
     .hs-card__meta      small meta row (specs etc.)
     .hs-pg-compare      comparison table wrapper (mobile horizontal scroll)
     .hs-pg-faq          FAQ accordion (also the schema-extraction hook)
   ========================================================================== */

/* === Raw HTML typography (.hs-page). Product templates use
   .hs-pcv3-richtext (defined in product-shared.css with same baseline). */
.hs-page {
  font-family: var(--hs-font-base);
  color: var(--hs-text);
  line-height: 1.65;
}

/* 4.8.129: 卡片底部按钮区 —— 指令类清单里一直有、CSS 此前从未定义
   (幽灵类审计发现)。body 是 flex column,margin-top:auto 让按钮沉底,
   多卡并排时底部动作永远对齐。 */
.hs-card__cta {
  margin-top: auto;      /* 顶到卡底 → 多卡等高对齐 */
  padding-top: 14px;
  align-self: center;    /* 4.8.134: 与 v3 .hs-pcv3-card__cta 对齐 — flex-column body 里水平居中 */
  text-align: center;    /* 兜底:inline 子元素也居中 */
  display: flex;         /* 多按钮成组居中 */
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hs-page h1,
.hs-page h2,
.hs-page h3,
.hs-page h4 {
  color: var(--hs-title);
  font-weight: 700;
  line-height: 1.25;
}
.hs-page h1 { font-size: 40px; margin: 0 0 24px; }
.hs-page h2 { font-size: 32px; margin: 0 0 20px; }
.hs-page h3 { font-size: 22px; margin: 0 0 14px; }
.hs-page h4 { font-size: 18px; margin: 0 0 10px; }
.hs-page p  { margin: 0 0 16px; }
.hs-page p:last-child { margin-bottom: 0; }
/* 4.8.69: 排除面包屑 — `.hs-breadcrumb__list` 是 .hs-page 内的 <ol> 但不应继承
   正文列表的 padding/margin；之前不排除导致面包屑文字相对 H1 右移 24px。 */
.hs-page ul:not(.hs-breadcrumb__list),
.hs-page ol:not(.hs-breadcrumb__list) { margin: 0 0 16px; padding-left: 24px; }
.hs-page li:not(.hs-breadcrumb__item) { margin: 4px 0; }
.hs-page li:not(.hs-breadcrumb__item)::marker { color: var(--hs-accent); }
.hs-page strong,
.hs-page b { color: var(--hs-title); }
.hs-page a:not([class]) {
  color: var(--hs-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--hs-transition);
}
.hs-page a:not([class]):hover { color: var(--hs-accent-dark); }

@media (max-width: 992px) {
  .hs-page h1 { font-size: 32px; }
  .hs-page h2 { font-size: 26px; }
}

@media (max-width: 576px) {
  .hs-page h1 { font-size: 26px; margin-bottom: 16px; }
  .hs-page h2 { font-size: 22px; margin-bottom: 14px; }
  .hs-page h3 { font-size: 18px; }
}

/* === Raw HTML hero (.hs-pg-hero). Product templates use .hs-pcv3-hero
   (defined in product-shared.css with same baseline typography). */
.hs-pg-hero {
  padding: calc(var(--hs-section-y) * 0.7) 0;
  background: var(--hs-bg);
}
.hs-pg-hero h1 {
  font-size: 38px;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--hs-title);
}
.hs-pg-hero__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--hs-text);
  margin: 0 0 22px;
}

/* 4.9.9/4.8.126: 左文右图 hero 与 v3 集合页 split hero 逐像素对齐
   (列距 48 / 右图 4:3 圆角 14 投影)。只作用于 hero 内的 .hs-split,
   不动通用 .hs-split(卡片行等别处还在用 gap 40)。 */
.hs-pg-hero .hs-split {
  gap: 48px;
  align-items: center;
}
.hs-pg-hero .hs-split__media {
  max-width: 600px;
  margin-left: auto;
}
.hs-pg-hero .hs-split__media img {
  aspect-ratio: 600 / 450;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: block;
}
@media (max-width: 767px) {
  .hs-pg-hero .hs-split {
    flex-direction: column;
  }
  .hs-pg-hero h1 {
    font-size: 28px;
  }
}

.hs-pg-hero--center {
  text-align: center;
}
.hs-pg-hero--center .hs-pg-hero__lead {
  max-width: 720px;
  margin: 0 auto 28px;
}

@media (max-width: 992px) {
  .hs-pg-hero h1 { font-size: 36px; }
  .hs-pg-hero { padding: calc(var(--hs-section-y) * 0.55) 0; }
}
@media (max-width: 576px) {
  .hs-pg-hero h1 { font-size: 28px; }
  .hs-pg-hero__lead { font-size: 16px; }
}

/* --- Card content slots -------------------------------------------------- */

.hs-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--hs-title);
  margin: 0 0 12px;
  line-height: 1.3;
}

.hs-card__desc {
  color: var(--hs-text);
  margin: 0 0 16px;
}
.hs-card__desc:last-child { margin-bottom: 0; }

.hs-card__meta {
  font-size: 14px;
  color: var(--hs-text);
  border-top: 1px solid var(--hs-border);
  padding-top: 12px;
  margin-top: 12px;
}
.hs-card__meta dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}
.hs-card__meta dt {
  font-weight: 600;
  color: var(--hs-title);
}
.hs-card__meta dd { margin: 0; }

.hs-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hs-accent);
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  padding-top: 12px;
}
.hs-card__link::after {
  content: '→';
  transition: transform var(--hs-transition);
}
.hs-card__link:hover { color: var(--hs-accent-dark); }
.hs-card__link:hover::after { transform: translateX(4px); }

/* --- Comparison table ---------------------------------------------------- */

/* 4.9.9/4.8.126: 表格样式与 v3 集合页统一 —— 视觉规则全部来自上方
   :is(.entry-content, .hs-pcv3-richtext, .hs-pg-compare) table 共享块
   (主题色表头白字 + 斑马纹 + 首列加粗),本容器只负责移动端横滚。 */
.hs-pg-compare {
  overflow-x: auto;
}

.hs-pg-compare table {
  min-width: 720px;
}

/* === FAQ accordion (.hs-pg-faq) — Raw HTML pages. Product templates
   use .hs-pcv3-faq__item (defined in product-shared.css with the same
   visual via shared CSS variables). */
.hs-pg-faq {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hs-pg-faq details {
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: 12px;
  padding: 18px 22px;
  transition: border-color var(--hs-transition);
}
.hs-pg-faq details[open] { border-color: var(--hs-accent-border); }
.hs-pg-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
  font-weight: 600;
  color: var(--hs-title);
  font-size: 17px;
}
.hs-pg-faq summary::-webkit-details-marker { display: none; }
.hs-pg-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 22px;
  color: var(--hs-accent);
  line-height: 1;
  font-weight: 400;
}
.hs-pg-faq details[open] summary::after { content: "\2212"; }
.hs-pg-faq details > *:not(summary) {
  margin-top: 12px;
  color: var(--hs-text);
  font-size: 15px;
  line-height: 1.8;
}
.hs-pg-faq details > *:not(summary):last-child { margin-bottom: 0; }

/* --- Stats grid (data row, often used as "腰线" inside .hs-section--accent) -- */

/* 4.5.17: stats 段的上下 padding 收紧为默认 section 的 80%，
   因为数字栅格本身视觉密度高，全 80px 上下空白太空旷。
   :has() 兼容 Chrome 105+ / Safari 15.4+ / Firefox 121+，2026 已普及。
   命中 v3 模板 Stats Strip 以及任何 Raw HTML 页用 .hs-pg-stats 的段。 */
.hs-section:has(.hs-pg-stats) {
  padding-top: calc(var(--hs-section-y) * 0.8);
  padding-bottom: calc(var(--hs-section-y) * 0.8);
}

.hs-pg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  text-align: center;
}
/* 4.9.42/4.8.159/4.5.127: CLS 修复 —— nowrap 长数字在缩号 JS 跑之前会把 auto-fit
   列宽撑爆(列数变少、段变高),JS 缩号后又弹回 → 低速设备整页移位。
   min-width:0 让格子不得撑轨道,溢出只是暂时视觉溢出,布局始终稳定。 */
.hs-pg-stats > div {
  min-width: 0;
}

.hs-pg-stat__number {
  font-size: 48px;
  font-weight: 700;
  color: var(--hs-accent);
  line-height: 1;
  margin: 0 0 8px;
  white-space: nowrap;
  /* 4.9.42/4.8.159/4.5.127: 定高 flex 盒 —— fitStatNumbers() 缩字号时盒子高度不变,
     缩号成为纯视觉动作,任何执行时机都不再引起布局偏移(CLS)。 */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-pg-stat__label {
  font-size: 15px;
  color: var(--hs-text);
  margin: 0;
}

/* Compact variant — for dense bands with 4+ stats (used by v3 template
   when stats_n >= 4). Number font matches the site H2 size (32px desktop /
   26px mobile, see .hs-section-head__title) so stats feel as visually
   weighted as section titles. */
.hs-pg-stats--compact .hs-pg-stat__number { font-size: 32px; height: 32px; }
.hs-pg-stats--compact .hs-pg-stat__label  { font-size: 14px; }

@media (max-width: 576px) {
  .hs-pg-stat__number { font-size: 36px; height: 36px; }
  .hs-pg-stats--compact .hs-pg-stat__number { font-size: 26px; height: 26px; }
}

/* --- CTA strip — bottom-of-page call-to-action card ---------------------- */

.hs-pg-cta {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  padding: 60px 32px;
  border-radius: var(--hs-radius-card);
  text-align: center;
}

/* 4.8.68: --soft 修饰符不再改背景/字色 — 整站 bottom CTA 统一实底 accent + 白字。
   保留 class 仅为向后兼容旧页面 HTML，不需要逐页改。视觉等同 .hs-pg-cta。 */

.hs-pg-cta h2,
.hs-pg-cta__title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
  color: inherit;
  line-height: 1.25;
}

.hs-pg-cta p,
.hs-pg-cta__lead {
  font-size: 17px;
  margin: 0 0 28px;
  color: inherit;
  /* 4.8.71: 去掉 opacity 0.92 让 lead 跟 title 一样纯白（用户要求"文字都是白色"） */
}

/* 4.8.72: pd 模板 lead 用 <div class="hs-pg-cta__lead hs-pcv3-richtext"> 双 class，
   product-shared.css 的 .hs-pcv3-richtext { color: var(--hs-text) }（深灰）加载晚，
   打赢了父继承白。这里把 richtext 及内部 p/strong/a 拉回继承白，保持"CTA 里全白字"。 */
.hs-pg-cta .hs-pcv3-richtext,
.hs-pg-cta .hs-pcv3-richtext p,
.hs-pg-cta .hs-pcv3-richtext strong,
.hs-pg-cta .hs-pcv3-richtext li,
.hs-pg-cta .hs-pcv3-richtext a { color: inherit; }
.hs-pg-cta .hs-pcv3-richtext a { text-decoration: underline; }
.hs-pg-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* accent 实底上的按钮统一反色 — 白底主色字。
   4.8.66: hover/focus 不变化（用户要求）。
   4.8.68: 移除 :not(--soft) — 整站 CTA 只有实底一种形态。
   4.8.71: 扩展到 .hs-section--accent 腰线 — 默认 .hs-btn 是主色边框
   透明底，在 accent 实底上红压红看不清；腰线内按钮与 CTA 块同款反白。 */
.hs-pg-cta :is(.hs-btn, .hs-btn-inquiry),
.hs-pg-cta :is(.hs-btn, .hs-btn-inquiry):is(:hover, :focus-visible),
.hs-section--accent :is(.hs-btn, .hs-btn-inquiry),
.hs-section--accent :is(.hs-btn, .hs-btn-inquiry):is(:hover, :focus-visible) {
  background: #ffffff;
  color: var(--hs-accent);
  border-color: var(--hs-text-inverse);
}

@media (max-width: 576px) {
  .hs-pg-cta { padding: 40px 24px; }
  .hs-pg-cta h2,
  .hs-pg-cta__title { font-size: 24px; }
  .hs-pg-cta p,
  .hs-pg-cta__lead { font-size: 15px; }
  .hs-pg-cta__buttons { flex-direction: column; }
  .hs-pg-cta__buttons .hs-btn,
  .hs-pg-cta__buttons .hs-btn-inquiry { width: 100%; }
}

/* --- Section accent variant (solid brand-color band) --------------------- */
/* Use case: "腰线" — a stats / value-prop band inside a long page that
   breaks the white/grey rhythm with a bold brand-color block. Pair with
   .hs-pg-stats inside to invert numbers + labels to white automatically. */

.hs-section--accent {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
}
.hs-section--accent :is(h1, h2, h3, h4) {
  color: var(--hs-text-inverse);
}
.hs-section--accent p {
  color: var(--hs-footer-text-muted);
}
.hs-section--accent .hs-eyebrow {
  color: var(--hs-footer-text-muted);
}
.hs-section--accent .hs-section-head__title {
  color: var(--hs-text-inverse);
}
.hs-section--accent .hs-pg-stat__number {
  color: var(--hs-text-inverse);
}
.hs-section--accent .hs-pg-stat__label {
  /* 4.9.13/4.8.130: footer-text-muted 在 accent 底上对比度不达标
     (Lighthouse 点名),改近白 —— 保留一丝层级又过 WCAG。 */
  color: rgba(255, 255, 255, 0.92);
}
.hs-section--accent a:not([class]) {
  color: var(--hs-text-inverse);
  text-decoration: underline;
}

/* --- Mobile grid graceful degradation ------------------------------------ */
/* Existing .hs-grid--3 / --4 don't drop columns on narrow viewports.
   Add page-component-friendly responsive defaults. */

@media (max-width: 992px) {
  /* 4.8.91: --4 从本块移除 —— L864 的 @1024 块已让 --4 在 ≤1024 降 2 列，
     此处重复声明永远不生效（审计发现）。--4 归 @1024 管，--3 归本块。 */
  .hs-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  /* 4.8.32: unified grid collapse breakpoint at 768px (was 576px here +
     768px in product-shared.css — inconsistent across raw HTML vs product
     pages). 768 is the site-wide mobile single-col threshold now. */
  .hs-grid--2,
  .hs-grid--3,
  .hs-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* --- End of Page Component Layer ----------------------------------------- */

/* When .hs-split is nested inside .hs-card (e.g. why-us mini-hero rows),
   the content side needs internal padding for breathing room. The image
   side stays flush to the card edge (full-bleed, with .hs-card overflow
   hidden clipping it to the rounded corners). */
.hs-card > .hs-split > .hs-split__content {
  padding: 28px 32px;
}
@media (max-width: 992px) {
  .hs-card > .hs-split > .hs-split__content {
    padding: 24px;
  }
}

/* Hero image radius override: 5px (smaller than card 10px for sharper look).
   Also covers inline <svg> placeholders that mirror the same aspect ratio. */
.hs-pg-hero :is(img, svg) {
  border-radius: 5px;
}
.hs-pg-hero .hs-split__media :is(img, svg) {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Mobile responsive — page-component layout fallbacks
   ============================================================ */

@media (max-width: 768px) {
  /* hs-grid responsive — 3-col becomes 2-col on tablet */
  .hs-grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* hs-split stacks vertically on tablet; image moves above content */
  .hs-split {
    grid-template-columns: 1fr;
  }
  .hs-split__media { order: -1; }
}

@media (max-width: 576px) {
  /* hs-grid collapses to single column on mobile */
  .hs-grid--3 { grid-template-columns: 1fr; }
  /* Stats belt → 2 columns on mobile (not 1, to keep horizontal scan) */
  .hs-pg-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ============================================================
   Visible breadcrumb (SEO + UX)
   Shared markup emitted by hs_render_breadcrumb(); same data
   source as the JSON-LD BreadcrumbList schema.
   ============================================================ */
.hs-breadcrumb {
  padding: 12px 0;
  font-size: 13px;
  color: var(--hs-text-muted);
}
.hs-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.hs-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.hs-breadcrumb__item a {
  color: var(--hs-text-muted);
  text-decoration: none;
}
.hs-breadcrumb__item a:hover {
  color: var(--hs-accent);
  text-decoration: underline;
}
.hs-breadcrumb__sep {
  margin: 0 8px;
  opacity: 0.6;
}
.hs-breadcrumb__item [aria-current="page"] {
  color: var(--hs-title);
  font-weight: 500;
}
@media (max-width: 576px) {
  .hs-breadcrumb { font-size: 12px; }
  .hs-breadcrumb__sep { margin: 0 6px; }
}

/* ============================================================
   2.19.2 / 3.5.2 — Blog archive (Posts page)
   Used by home.php (3-col card grid + footer-color banner +
   native WP pagination). Reuses .hs-pg-hero / .hs-section
   / .hs-grid / .hs-card primitives; only adds:
     - .hs-pg-hero--inverse  (footer-color banner variant)
     - .hs-blog-card title styling
     - Native .page-numbers pagination styling
   ============================================================ */

/* Inverse hero variant (used for blog index banner) — uses brand accent. */
.hs-pg-hero--inverse {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
}
.hs-pg-hero--inverse h1,
.hs-pg-hero--inverse .hs-eyebrow {
  color: var(--hs-text-inverse);
}
.hs-pg-hero--inverse .hs-pg-hero__lead {
  color: var(--hs-footer-text-muted);
}

/* Blog archive (Posts page) — full-bleed override.
   GeneratePress's "Separate Containers" layout wraps <main> inside a
   .grid-container.container that has max-width + padding + a background.
   This makes our full-width hero look like a narrower card with a white
   strip between hero and content. Mirror the hs-raw-html-active pattern
   to bust out of every wrapping box. */
body.blog :is(
  #page,
  .site-content,
  .content-area,
  .site-main,
  .inside-article
) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide any auto-generated archive header / featured image that WP or GP
   may render above the loop (would visually conflict with our banner). */
body.blog :is(
  .page-header,
  .generate-page-header,
  .entry-header,
  .post-image,
  .featured-image
) {
  display: none !important;
}

/* Kill any margin/border between adjacent <section> children that GP
   or WP add via `.site-main > * { margin: 1.5em 0 }` style rules. With
   our transparent wrappers (above), even a few px of margin shows the
   body background as a horizontal stripe between sections. */
body.blog .site-main > *,
body.blog .hs-blog-archive > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Tighten the gap between banner and first content section so they feel
   cohesive — banner already provides hero feel; another 80px above the
   cards looks like an empty band. */
body.blog .hs-blog-archive > .hs-pg-hero {
  padding-bottom: 40px;
}
body.blog .hs-blog-archive > .hs-pg-hero + .hs-section {
  padding-top: 48px;
}
@media (max-width: 768px) {
  body.blog .hs-blog-archive > .hs-pg-hero {
    padding-bottom: 28px;
  }
  body.blog .hs-blog-archive > .hs-pg-hero + .hs-section {
    padding-top: 32px;
  }
}

/* Blog card overrides — tighter meta row, clickable title */
.hs-blog-card .hs-card__meta {
  font-size: 13px;
  color: var(--hs-text-muted);
  margin-bottom: 8px;
}
.hs-blog-card .hs-card__title {
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 12px;
}
.hs-blog-card .hs-card__title a {
  color: var(--hs-title);
  text-decoration: none;
  transition: color var(--hs-transition);
}
.hs-blog-card .hs-card__title a:hover {
  color: var(--hs-accent);
}
.hs-blog-card .hs-card__link {
  margin-top: auto;
}

/* WordPress native pagination (used by the_posts_pagination) */
.hs-blog-archive .navigation.pagination {
  margin-top: 48px;
  text-align: center;
}
.hs-blog-archive .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.hs-blog-archive .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-btn);
  background: var(--hs-bg);
  color: var(--hs-title);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}
.hs-blog-archive .page-numbers:hover,
.hs-blog-archive .page-numbers:focus-visible {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  border-color: var(--hs-accent);
}
.hs-blog-archive .page-numbers.current {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  border-color: var(--hs-accent);
  pointer-events: none;
}
.hs-blog-archive .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
.hs-blog-archive .page-numbers:focus {
  outline: none;
}


/* ============================================================
   4.5.21 — Unified hero media (image OR YouTube video)
   Locked to 3:2 (600×400) for both v3 template and Raw HTML hero.
   No size modifiers — helpers don't need to choose, ratio is enforced.
   ============================================================ */

.hs-hero-media {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--hs-radius-card, 10px);
}

.hs-hero-video {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--hs-radius-card, 10px);
}
.hs-hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   4.5.22 — FORCE 3:2 on ANY hero media (no class required)
   Catches helpers who forget to add .hs-hero-media / .hs-hero-video.
   Generic selector targets hero media slot directly.
   ============================================================ */

/* Any direct <img> child in hero media slot → forced 3:2 */
.hs-pg-hero .hs-split__media > img {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--hs-radius-card, 10px);
}

/* Auto-wrapped iframe (see site.js wrapHeroIframes) — same 3:2 box */
.hs-pg-hero .hs-split__media > .hs-hero-video-auto {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--hs-radius-card, 10px);
}
.hs-pg-hero .hs-split__media > .hs-hero-video-auto iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* === Inquiry modal === */

.hs-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 30, 20, 0.52);
}

.hs-modal.is-open {
  display: flex;
}

.hs-modal__dialog {
  width: min(100%, 680px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-modal);
  box-shadow: var(--hs-shadow-modal);
}

.hs-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hs-border);
}

.hs-modal__title {
  margin: 0;
  font-size: 22px;
}

.hs-modal__close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--hs-border);
  border-radius: 5px;
  background: #ffffff;
  color: var(--hs-title);
  line-height: 1;
}

.hs-modal__close:hover {
  background: var(--hs-accent);
  color: var(--hs-text-inverse);
  border-color: var(--hs-accent);
}

.hs-modal__body {
  padding: 20px;
}

/* === Inquiry form (.hs-form) === */

.hs-form {
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-left: 4px solid var(--hs-accent);
  border-radius: var(--hs-radius-form);
  padding: 24px;
  box-shadow: var(--hs-shadow-card);
}

.hs-form-row {
  display: flex;
  gap: 16px;
}

.hs-form-field {
  margin-bottom: 14px;
}

.hs-form-field--half {
  flex: 1;
}

.hs-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--hs-title);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hs-form label span {
  color: var(--hs-accent);
}

.hs-form :is(input, textarea, select) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-btn);
  background: #ffffff;
  color: var(--hs-title);
  transition: border-color var(--hs-transition), box-shadow var(--hs-transition);
}

.hs-form textarea {
  min-height: 110px;
  resize: vertical;
}

.hs-form :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--hs-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 12%, transparent);
}

.hs-form .hs-btn {
  width: 100%;
}

.hs-form__notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.6;
}

.hs-form__notice--error {
  background: var(--hs-error-bg);
  color: var(--hs-error-text);
  border: 1px solid var(--hs-error-border);
}

.hs-form__notice ul {
  margin: 0;
  padding-left: 18px;
}

:is(.hs-form-honeypot, .hs-visually-hidden) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Static privacy notice near the submit button. Informative, not a block. */
.hs-form-privacy {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--hs-text);
  opacity: 0.8;
}
.hs-form-privacy a {
  color: var(--hs-accent);
  text-decoration: underline;
}

/* ============================================================
   4.8.26 — bare iframe in Raw HTML hero gets 3:2 via aspect-ratio
   Replaces site.js wrapHeroIframes() JS shim. aspect-ratio shipped
   in all modern browsers (Chrome 88 / Safari 15 / Firefox 89), works
   without needing a wrapper div. Helpers who paste a YouTube iframe
   directly into .hs-split__media now get the correct ratio
   automatically — same UX as before but pure CSS.
   ============================================================ */
.hs-pg-hero .hs-split__media > iframe {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  border: 0;
  display: block;
  border-radius: var(--hs-radius-card, 10px);
}

/* === Glossary（templates/tpl-glossary.php 术语表） === */
.hs-glossary__item { margin: 0 0 28px; scroll-margin-top: 96px; }
.hs-glossary__term { margin: 0 0 8px; }
.hs-glossary__item:target .hs-glossary__term { color: var(--hs-accent, #467c3d); }
.hs-glossary__intro { margin-bottom: 34px; }

/* === YouTube facade(点击才播放)— 4.9.10/4.8.127 自 product-shared.css
   挪入共享层:v3/pd 模板与 Raw HTML 页的 [hs_video] 共用,一处定义。 === */
/* 4.8.45: YouTube facade. Click-to-play placeholder used in:
   - Hero gallery video panel (pd)
   - Why Us card video (pd + v3, both use .hs-pcv3-why-card__image--video)
   - Reviews + Videos tab card (pd)
   See JS handler in site.js + PHP helper hs_yt_facade() in template-helpers.php.
   Stops 1.5 MB YouTube SDK from loading on initial page render. */
.hs-yt-facade {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.hs-yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hs-yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.hs-yt-facade:hover .hs-yt-facade__play,
.hs-yt-facade:focus-within .hs-yt-facade__play {
  opacity: 1;
}
.hs-yt-facade__play:focus-visible {
  outline: 2px solid var(--hs-accent, #f00);
  outline-offset: 4px;
  border-radius: 6px;
}

/* 4.8.45: noscript fallback inside facade — only renders when JS disabled.
   When JS is on, browsers never insert <noscript> content into the DOM, so
   this rule has zero impact on normal users. When JS is off, the link sits
   centered over the poster image (button is still visible but inert). */
.hs-yt-facade__noscript {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.hs-yt-facade__noscript:hover {
  background: #f00;
}

/* === [hs_video] 容器:16:9 圆角,facade 撑满 === */
.hs-video-embed {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  margin: 24px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* facade 点击后 site.js 注入的是裸 iframe(无 class)——必须由容器规则
   撑满,否则回落到浏览器默认 300×150(4.8.148 修复,卡片内视频同享)。 */
.hs-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* === Why Us 左图右文卡(4.9.41/4.8.158/4.5.126 自 product-shared.css 挪入共享层)===
   raw 页用 .hs-why-card* 前缀;v3/pd 模板沿用 .hs-pcv3-why-card*(历史前缀,
   50+ 处 PHP 引用不改名)。两前缀分组共用同一份定义 —— 一处改全站生效。
   --stacked(图上文下)是 pd 模板专属变体,不提供 raw 前缀。 */
.hs-why-card,
.hs-pcv3-why-card {
  background: #fff;
  border: 1px solid var(--hs-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  column-gap: 22px;
}
.hs-pcv3-why-card--stacked {
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  column-gap: 0;
  transition: transform var(--hs-transition), box-shadow var(--hs-transition);
}
.hs-pcv3-why-card--stacked:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-card-hover, 0 16px 36px rgba(0,0,0,.1));
}
.hs-why-card__image,
.hs-pcv3-why-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--hs-accent-soft);
}
.hs-pcv3-why-card--stacked .hs-pcv3-why-card__image {
  aspect-ratio: 4 / 3;
}
.hs-why-card__image img,
.hs-pcv3-why-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hs-why-card__image--video,
.hs-pcv3-why-card__image--video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.hs-why-card__image--video iframe,
.hs-pcv3-why-card__image--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hs-why-card__body,
.hs-pcv3-why-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.hs-pcv3-why-card--stacked .hs-pcv3-why-card__body {
  justify-content: flex-start;
  flex: 1;
}
.hs-why-card__title,
.hs-pcv3-why-card__title {
  margin: 0 0 8px;
  color: var(--hs-title);
  font-size: 17px;
}
.hs-why-card__bullets ul,
.hs-pcv3-why-card__bullets ul {
  margin: 0;
  padding-left: 18px;
  color: var(--hs-text);
  font-size: 14px;
  line-height: 1.7;
}
.hs-why-card__cta,
.hs-pcv3-why-card__cta { margin-top: 16px; align-self: flex-start; }
@media (max-width: 768px) {
  .hs-why-card,
  .hs-pcv3-why-card { grid-template-columns: 1fr; }
}

/* 卡片图区内的视频:跟随卡片 4:3 盒撑满,去独立块样式 —— 与相邻图片卡逐像素对齐 */
.hs-card__image .hs-video-embed {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* === 段内统一留白:挂在内容块(卡片网格/表格/FAQ 列表)自身的上下,导言不再各自设底距。
   前提:.hs-container 是普通块级流,相邻兄弟 margin 折叠——与 section-head 的
   30px 底距重叠取 30,不会翻倍;首/末元素不加,段落节奏交给 section padding === */
.hs-container > :is(.hs-grid, .hs-pg-compare, .hs-pcv3-faq__list):not(:first-child) {
  margin-top: 30px;
}
.hs-container > :is(.hs-grid, .hs-pg-compare, .hs-pcv3-faq__list):not(:last-child) {
  margin-bottom: 30px;
}
.hs-pcv3-guide__cards {
  margin: 8px 0 44px;
}

/* 6.0.27: 桌面端隐藏 JS 注入的"进入父级页"子菜单首行(桌面父项本身可点) */
@media (min-width: 993px) {
  .hs-site-header__menu .hs-submenu-overview {
    display: none;
  }
}