/* Selected public-column banners only. Brand SSL pages and homepage are untouched. */
.marketing-banner { position:relative; isolation:isolate; overflow:hidden; background:#f4f8ff; color:#101f36; }
.marketing-banner--dark { background:#071b38; color:#fff; }
.marketing-banner .marketing-banner-art { position:absolute; inset:0; z-index:-2; display:block; width:min(100%,1680px); margin-inline:auto; pointer-events:none; }
.marketing-banner .marketing-banner-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.marketing-banner::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#f4f8ff 0%,rgba(244,248,255,.96) 13%,rgba(244,248,255,.7) 32%,rgba(244,248,255,0) 52%); }
.marketing-banner--dark::after { background:linear-gradient(90deg,#071b38 0%,rgba(7,27,56,.96) 13%,rgba(7,27,56,.7) 32%,rgba(7,27,56,0) 52%); }
.marketing-banner .marketing-banner-inner { display:flex; align-items:center; min-height:clamp(500px,39vw,600px); padding-block:48px; }
.marketing-banner .marketing-banner-copy { width:46%; max-width:610px; }
.marketing-banner .marketing-banner-label { display:block; margin-bottom:20px; color:#2160e8; font-size:15px; font-weight:650; line-height:1.6; }
.marketing-banner--dark .marketing-banner-label { color:#83d9f2; }
.marketing-banner .marketing-banner-copy h1 { margin:0 0 22px; color:inherit; font-size:clamp(32px,3.25vw,48px); line-height:1.24; letter-spacing:-.7px; font-weight:750; }
.marketing-banner .marketing-banner-copy h1 em { color:#1858ed; font-style:normal; }
.marketing-banner--dark .marketing-banner-copy h1 em { color:#67e0c7; }
.marketing-banner .marketing-banner-description { margin:0 0 28px; max-width:530px; color:#526881; font-size:16px; line-height:1.85; }
.marketing-banner--dark .marketing-banner-description { color:#c3d4ea; }
.marketing-banner .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; }
.marketing-banner .hero-actions > a { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:11px 20px; border:1px solid #b5c7e3; border-radius:8px; background:rgba(255,255,255,.72); color:#25476e; font-size:14px; font-weight:650; line-height:1.5; text-decoration:none; }
.marketing-banner .hero-actions > a.btn:not(.btn-outline) { border-color:#1759ed; background:#1759ed; color:#fff; box-shadow:0 8px 20px rgba(20,77,190,.14); }
.marketing-banner--dark .hero-actions > a:not(.btn),.marketing-banner--dark .hero-actions > a.btn-outline { background:rgba(255,255,255,.05); border-color:#7f9abc; color:#fff; }
.marketing-banner .hero-actions > a:hover { filter:brightness(.96); }
.marketing-banner .hero-actions > a:focus-visible,.marketing-banner .marketing-banner-related a:focus-visible { outline:3px solid #85b7ff; outline-offset:4px; }
.marketing-banner .marketing-banner-conversion > p,.marketing-banner .marketing-banner-note { margin:18px 0 0; color:#60758e; font-size:12px; line-height:1.75; }
.marketing-banner--dark .marketing-banner-conversion > p,.marketing-banner--dark .marketing-banner-note { color:#b6cce4; }
.marketing-banner .marketing-banner-conversion > p a { color:#1759ed; text-decoration:underline; text-underline-offset:3px; }
.marketing-banner .marketing-banner-related { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.marketing-banner .marketing-banner-related a { display:flex; align-items:center; gap:8px; border:1px solid #718eaf; border-radius:8px; padding:8px 10px; color:inherit; font-size:12px; text-decoration:none; }
.marketing-banner .marketing-banner-related strong { font-size:12px; }
.marketing-banner .marketing-banner-related small { display:block; font-size:10px; color:#b6cce4; }
.marketing-banner .marketing-banner-related i { font-style:normal; }
@media(min-width:901px) and (max-width:1100px) {
  .marketing-banner .marketing-banner-inner { min-height:480px; padding-block:36px; }
  .marketing-banner .marketing-banner-copy { width:48%; }
  .marketing-banner .marketing-banner-copy h1 { font-size:34px; }
  .marketing-banner .marketing-banner-description { font-size:14px; }
  .marketing-banner .hero-actions > a { padding-inline:13px; font-size:13px; }
}
@media(max-width:900px) {
  .marketing-banner { display:flex; flex-direction:column; }
  .marketing-banner::after { display:none; }
  .marketing-banner .marketing-banner-inner { order:0; width:100%; min-height:0; padding-top:32px; padding-bottom:20px; }
  .marketing-banner .marketing-banner-copy { width:100%; max-width:660px; }
  .marketing-banner .marketing-banner-label { margin-bottom:12px; font-size:13px; }
  .marketing-banner .marketing-banner-copy h1 { font-size:34px; line-height:1.24; margin-bottom:16px; }
  .marketing-banner .marketing-banner-description { max-width:620px; font-size:14px; margin-bottom:22px; }
  .marketing-banner .marketing-banner-art { position:relative; order:1; z-index:0; width:100%; max-width:720px; margin:0 auto; aspect-ratio:1.65; overflow:hidden; }
  .marketing-banner .marketing-banner-art img { position:static; width:100%; max-width:100%; height:100%; transform:none; object-fit:contain; object-position:center; }
}
@media(max-width:620px) {
  .marketing-banner .marketing-banner-inner { padding-top:26px; padding-bottom:14px; }
  .marketing-banner .marketing-banner-copy h1 { font-size:clamp(27px,7.3vw,34px); letter-spacing:-.4px; }
  .marketing-banner .hero-actions { gap:8px; }
  .marketing-banner .hero-actions > a { font-size:12px; padding:10px 12px; min-height:44px; }
  .marketing-banner .marketing-banner-description { line-height:1.8; }
  .marketing-banner .marketing-banner-note,.marketing-banner .marketing-banner-conversion > p { margin-top:14px; }
  .marketing-banner .marketing-banner-art { aspect-ratio:1.75; }
}
/* Keep the partnership introduction from ending in a one-character line. */
.marketing-banner--reseller .marketing-banner-description { max-width:470px; text-wrap:pretty; }

/* Map banners: keep the complete artwork height instead of cover-cropping it. */
@media(min-width:901px) {
  .marketing-banner:is(.marketing-banner--baidulocal,.marketing-banner--gaodelocal) .marketing-banner-inner { min-height:560px; }
  .marketing-banner:is(.marketing-banner--baidulocal,.marketing-banner--gaodelocal) .marketing-banner-art {
    inset:0 0 auto auto; width:1120px; max-width:none; height:560px; margin:0;
    transform:none;
    mask-image:linear-gradient(90deg,transparent,#000 5%);
  }
  .marketing-banner:is(.marketing-banner--baidulocal,.marketing-banner--gaodelocal) .marketing-banner-art img {
    width:1120px; height:560px; max-width:none; object-fit:contain; object-position:center;
  }
}