/**
 * SSL 证书页 — 华为云官网式：浅底分区、蓝强调、卡片栅格、标题层级与留白
 * 依赖 body.zjmf-home-hw；主体包裹 .zjmf-hw-cn-page--ssl（仅 ssl.html）
 */

body.zjmf-home-hw .zjmf-hw-cn-page--ssl {
  --hw-cn-blue: #1677ff;
  --hw-cn-blue-hover: #0958d9;
  --hw-cn-text: #252b3a;
  --hw-cn-text-secondary: #575d6c;
  --hw-cn-text-muted: #8a9099;
  --hw-cn-border: #e5e6eb;
  --hw-cn-bg-soft: #f7f8fa;
  --hw-cn-card-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  color: var(--hw-cn-text);
  -webkit-font-smoothing: antialiased;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .tab-content > div {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .tab-content > div + div {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .page-hero.ssl {
  position: relative;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .page-hero.ssl::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 2;
  background: linear-gradient(180deg, var(--hw-cn-blue) 0%, #69b1ff 100%);
  pointer-events: none;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .page-hero .page-hero-text {
  padding-left: clamp(8px, 2vw, 20px);
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .page-hero h2 {
  letter-spacing: -0.03em;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .page-hero .hero-slogan-small {
  color: var(--hw-cn-text-secondary) !important;
  max-width: 36rem;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .hw-hero-actions .free-use-btn.btn-white:first-child a {
  background: var(--hw-cn-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .hw-hero-actions .free-use-btn.btn-white:first-child a:hover {
  background: var(--hw-cn-blue-hover) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .hw-hero-actions .free-use-btn.btn-white ~ .free-use-btn.btn-white a {
  background: #fff !important;
  color: var(--hw-cn-text) !important;
  border: 1px solid var(--hw-cn-border) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .hw-hero-actions .free-use-btn.btn-white ~ .free-use-btn.btn-white a:hover {
  border-color: var(--hw-cn-blue) !important;
  color: var(--hw-cn-blue) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .titleSpan span,
body.zjmf-home-hw .zjmf-hw-cn-page--ssl .i-title span {
  color: var(--hw-cn-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-features {
  background: var(--hw-cn-bg-soft) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-features .newDivTitle {
  align-items: center;
  gap: 14px;
  min-height: 52px;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-features .newDivTitle img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  padding: 10px;
  border-radius: 50%;
  background: rgba(22, 119, 255, 0.08);
  box-sizing: border-box;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-features .newDivTitle span {
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem) !important;
  font-weight: 600 !important;
  color: var(--hw-cn-text) !important;
  margin-left: 0 !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-features .newDiv > div:nth-child(2) span {
  color: var(--hw-cn-text) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-features .newDiv > div:nth-child(3) span {
  color: var(--hw-cn-text-secondary) !important;
  line-height: 1.75 !important;
  font-size: 14px !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .hw-cn-solution-head {
  margin-bottom: 20px !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .hw-cn-solution-title {
  margin: 0 clamp(16px, 4vw, 48px);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  font-weight: 600;
  color: var(--hw-cn-text) !important;
  text-align: center;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-recommendedPackage {
  background: #fff;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-recommendedPackage .newpackage {
  flex-wrap: wrap;
  gap: 0;
  padding: 8px;
  border-radius: 12px;
  background: var(--hw-cn-bg-soft);
  border: 1px solid var(--hw-cn-border);
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-recommendedPackage .newpackage > div {
  flex: 1 1 18%;
  min-width: 100px;
  height: 64px !important;
  border: none !important;
  border-radius: 8px !important;
  margin: 4px;
  background: #fff;
  box-shadow: var(--hw-cn-card-shadow);
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-recommendedPackage .newpackage > div + div {
  border-left: none !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-recommendedPackage .newpackage img {
  max-height: 36px;
  width: auto;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-appScenario {
  background: #fff;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-appScenario .appScenario > .col-md-4 > div:last-child p {
  font-weight: 600 !important;
  color: var(--hw-cn-text) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-appScenario .appScenario > .col-md-4 > div:last-child span {
  color: var(--hw-cn-text-secondary) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl #pro-advantage .advantage-3num {
  background: var(--hw-cn-bg-soft) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl #pro-func .pro-func.func2 {
  background: #fff !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl #pro-func .pro-func.func2.bgfff {
  padding-bottom: clamp(32px, 4vw, 56px);
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-func.func2 .item dl dt .icon {
  color: var(--hw-cn-blue) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-func.func2 .item dl dt {
  color: var(--hw-cn-text) !important;
  font-weight: 600 !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-func.func2 .item dl dd {
  color: var(--hw-cn-text-secondary) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .configure .config-tab span.active {
  color: var(--hw-cn-blue) !important;
  border-color: var(--hw-cn-blue) !important;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .configure .config-detail .c5 {
  color: var(--hw-cn-blue) !important;
  font-weight: 600;
}

body.zjmf-home-hw .zjmf-hw-cn-page--ssl .container,
body.zjmf-home-hw .zjmf-hw-cn-page--ssl section.page-hero .container {
  max-width: min(1200px, calc(100vw - 32px));
}

@media (max-width: 767px) {
  body.zjmf-home-hw .zjmf-hw-cn-page--ssl .pro-recommendedPackage .newpackage > div {
    flex: 1 1 45%;
  }
}