/* ============================================
   米洛SDK官网 - Stripe风格全局覆盖样式
   应用于所有页面,确保设计一致性
   ============================================ */

/* === 全局排版覆盖 === */

/* Hero标题 - 300轻字重 */
.hero-title,
h1 {
    font-weight: 300 !important;
    letter-spacing: 0;
    line-height: 1.03;
}

/* 2026 production visual lock: keep the confirmed SDK-industry palette after all overrides. */
body .navbar {
    background: #172a45 !important;
}

body .navbar .logo,
body .navbar .logo span {
    color: #ffffff !important;
}

body .navbar .nav-menu > li > a {
    color: rgba(255, 255, 255, 0.88) !important;
}

body .navbar .nav-menu > li > a:hover,
body .navbar .nav-menu > li > a.active,
body .navbar .nav-menu > li > a.is-active {
    color: #20a7ff !important;
}

body .home-hero .hero-title,
body .home-hero .hero-title .gradient-text {
    color: #17243a !important;
    -webkit-text-fill-color: #17243a !important;
}

body .home-hero .hero-slogan {
    color: #334963 !important;
    -webkit-text-fill-color: #334963 !important;
}

body .home-hero .hero-description {
    color: #54677e !important;
    -webkit-text-fill-color: #54677e !important;
}

body .home-hero .hero-proof-item,
body .home-hero .proof-text {
    color: #2f5d7b !important;
    -webkit-text-fill-color: #2f5d7b !important;
}

body .home-hero .btn-outline-light {
    color: #17365b !important;
    background: #ffffff !important;
    border-color: #b8cede !important;
}

body .docs-page .docs-navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #d7e3f0 !important;
}

body .docs-page .docs-navbar .logo,
body .docs-page .docs-navbar .logo span {
    color: #17243a !important;
}

/* 区块标题 - 300轻字重 */
.section-title,
h2 {
    font-weight: 300 !important;
    letter-spacing: 0;
    line-height: 1.1;
}

/* 卡片标题 - 400字重 */
h3,
.product-card h3,
.case-card .case-title,
.feature-card h3 {
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.2;
}

/* 小标题 - 400字重 */
h4, h5, h6 {
    font-weight: 400 !important;
    letter-spacing: 0;
}

/* 正文 - 300轻字重 */
body, p, .body-text {
    font-weight: 300;
    line-height: 1.5;
}

/* 强调整文 */
strong, b {
    font-weight: 500;
}

/* 数据统计 - 等宽数字 */
.stat-number,
.stat-card-number,
.metric-value,
[data-count] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.logo,
.hero-title,
h1,
.section-title,
h2,
h3,
.product-card h3,
.case-card .case-title,
.feature-card h3,
.hero-slogan,
.section-subtitle {
    letter-spacing: 0 !important;
}

/* === 背景色覆盖 === */

/* 浅色区块使用微冷调白 */
.products,
.cases,
.solutions,
.partners {
    background: var(--bg-soft) !important;
}

/* 白色区块 */
.technology,
.process {
    background: var(--bg-white) !important;
}

/* === 卡片样式统一 === */

/* 所有卡片使用边框优先 */
.product-card,
.case-card,
.feature-card,
.solution-card,
.partner-card {
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* 卡片悬停效果 - 更克制 */
.product-card:hover,
.case-card:hover,
.feature-card:hover,
.solution-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* 移除顶部渐变装饰条 */
.product-card::before {
    display: none !important;
}

/* === 标签系统 === */

.case-tag,
.pill-tag,
.badge {
    background: var(--secondary-soft) !important;
    color: var(--secondary) !important;
    border-radius: var(--radius-pill) !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}

/* === 按钮覆盖 === */

/* 所有按钮使用Pill形状 */
.btn,
button,
.button {
    border-radius: var(--radius-pill) !important;
}

/* 主按钮 - 青绿色 */
.btn-primary {
    background: var(--secondary) !important;
    box-shadow: 0 2px 8px rgba(0,212,170,0.25) !important;
}

.btn-primary:hover {
    background: var(--secondary-light) !important;
    box-shadow: 0 4px 12px rgba(0,212,170,0.3) !important;
}

/* === 间距覆盖 === */

/* 统一区块间距 */
section {
    padding: var(--space-section) 0 !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    section {
        padding: var(--space-4xl) 0 !important;
    }
}

/* === 文档页面特殊样式 === */

/* 代码块 */
pre, code {
    font-family: 'Consolas', 'SFMono-Regular', 'Menlo', 'Microsoft YaHei Mono', monospace;
    font-weight: 400;
}

/* 表格 */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid var(--border-light);
    padding: 12px 16px;
    text-align: left;
}

th {
    background: var(--bg-soft);
    font-weight: 500;
}

/* 列表 */
ul, ol {
    padding-left: 24px;
}

li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* === 链接样式 === */

a {
    color: var(--primary-light);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* 导航链接覆盖 */
.nav-menu > li > a {
    color: var(--text-secondary);
}

.nav-menu > li > a:hover {
    color: var(--text-primary);
}

/* === 响应式优化 === */

@media (max-width: 1024px) {
    .hero-title {
        font-size: 48px !important;
        letter-spacing: 0 !important;
    }
    
    .section-title {
        font-size: 36px !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 34px !important;
        letter-spacing: 0 !important;
    }
    
    .section-title {
        font-size: 32px !important;
        letter-spacing: 0 !important;
    }
    
    h3 {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px !important;
        letter-spacing: 0 !important;
    }
    
    .section-title {
        font-size: 28px !important;
    }
}

/* === 触摸设备优化 === */

@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
    }
    
    .product-card:hover,
    .case-card:hover {
        transform: none !important;
    }
    
    .product-card:active,
    .case-card:active {
        transform: scale(0.98) !important;
    }
}

/* === 打印样式 === */

@media print {
    .navbar,
    .hero-buttons,
    .btn {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    a {
        color: var(--text-primary);
    }
}

/* === Hero区域文字可读性修复 === */

/* Hero副标题 - 白色确保在深色背景上清晰可见 */
.hero-slogan {
    color: var(--text-white) !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    opacity: 0.95;
}

/* Hero描述文字 - 提高亮度 */
.hero-description {
    color: rgba(255,255,255,0.85) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-slogan {
        font-size: 18px !important;
    }
    
    .hero-description {
        font-size: 16px !important;
    }
}

/* === 最终移动端首屏修正 === */
@media (max-width: 1024px) {
    .nav-menu,
    .nav-buttons {
        display: none !important;
    }

    .nav-menu.active {
        display: flex !important;
        flex-direction: column !important;
    }

    .menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: 18px !important;
        right: 16px !important;
        z-index: 1100 !important;
        color: var(--primary) !important;
        background: #fff !important;
        border: 1px solid var(--border-input) !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 390px !important;
        padding: 0 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }

    .hero-title,
    .hero-slogan,
    .hero-description,
    .hero-proof-list {
        width: 100% !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .hero-slogan {
        letter-spacing: 0 !important;
        line-height: 1.55 !important;
    }

    .hero-proof-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .hero-proof-item {
        justify-content: center !important;
        white-space: nowrap !important;
    }
}

/* Compatibility hardening for Chrome and browser dark/contrast rewrites. */
.hero-proof-item {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    opacity: 1 !important;
    color-scheme: dark !important;
    forced-color-adjust: none;
}

.hero-proof-item .proof-text {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
}

.hero-proof-item .proof-dot {
    background: #00d4aa !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.16) !important;
}

/* Topic pages share the homepage visual language but need stronger mobile text wrapping. */
.topic-hero h1 {
    line-height: 1.14 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.topic-lead,
.topic-summary,
.topic-summary li span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
    .topic-page,
    .topic-page .topic-hero,
    .topic-page .topic-hero .container,
    .topic-page .topic-hero-grid,
    .topic-page .topic-hero-grid > *,
    .topic-page .topic-summary,
    .topic-page .topic-section,
    .topic-page .topic-section .container,
    .topic-page .topic-grid,
    .topic-page .topic-card,
    .topic-page .topic-steps,
    .topic-page .topic-step,
    .topic-page .topic-faq,
    .topic-page .topic-related {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .topic-page {
        overflow-x: hidden !important;
    }

    .topic-page .topic-hero .container,
    .topic-page .topic-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .topic-hero h1 {
        font-size: 32px !important;
        line-height: 1.22 !important;
        word-break: break-all !important;
        max-width: 100% !important;
    }

    .topic-lead {
        max-width: 100% !important;
        word-break: break-word !important;
    }

    .topic-hero-actions {
        width: 100% !important;
    }

    .topic-hero-actions .btn {
        max-width: 100% !important;
    }
}

/* Homepage hero: keep the polished industry feel while cropping closer to product UI. */
body .home-hero .hero-visual {
    min-height: 316px;
}

body .home-hero .hero-screen {
    border: 1px solid #d5e5f3;
    background: #fff;
    box-shadow: 0 20px 46px rgba(18, 64, 113, 0.18);
}

body .home-hero .hero-screen.main {
    width: 620px;
    height: 292px;
    top: 24px;
}

body .home-hero .hero-screen.main img {
    object-position: center 18%;
    filter: saturate(0.92) contrast(0.98);
}

body .home-hero .hero-screen.secondary,
body .home-hero .hero-labels {
    display: none;
}

@media (max-width: 768px) {
    body .home-hero .hero-visual {
        min-height: 180px;
    }

    body .home-hero .hero-screen.main {
        width: 100%;
        height: 180px;
        top: 0;
    }
}

/* User-first content cleanup: clearer product menu and readable conversion band. */
body .mega-menu {
    position: fixed !important;
    top: 68px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: min(1080px, calc(100vw - 64px)) !important;
    padding: 0 !important;
    border: 1px solid #d9e4ef !important;
    border-radius: 0 0 10px 10px !important;
    background: #fff !important;
    box-shadow: 0 24px 54px rgba(8, 30, 62, 0.22) !important;
}

body .nav-dropdown:hover .mega-menu,
body .nav-dropdown.open .mega-menu {
    transform: translateX(-50%) translateY(0) !important;
}

body .mega-menu::before {
    left: 104px !important;
    background: #f7fbff !important;
    border-left: 1px solid #d9e4ef !important;
    border-top: 1px solid #d9e4ef !important;
}

body .mega-menu-inner {
    display: block !important;
}

body .mega-feature {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: #f7fbff;
    border-bottom: 1px solid #d9e4ef;
}

body .mega-feature-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 20px 22px;
    color: #102744;
    border-right: 1px solid #d9e4ef;
    min-height: 126px;
}

body .mega-feature-card:last-child {
    border-right: 0;
}

body .mega-feature-card:hover {
    background: #eef7ff;
}

body .mega-feature-icon {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #1478ff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(20, 120, 255, 0.18);
}

body .mega-feature-card strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
    color: #102744;
}

body .mega-feature-card > span:last-child {
    display: block;
    margin-top: 7px;
    color: #4c6078;
    font-size: 14px;
    line-height: 1.6;
}

body .mega-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 24px 28px 28px;
}

body .mega-group-title {
    margin: 0 0 12px !important;
    color: #102744 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

body .mega-link {
    grid-template-columns: 36px 1fr !important;
    gap: 11px !important;
    min-height: 62px;
    padding: 9px 10px !important;
    border-radius: 8px;
    color: #102744 !important;
}

body .mega-link:hover {
    background: #f4f8fd;
}

body .mega-link i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px;
    color: #1478ff !important;
    background: #eef5ff !important;
}

body .mega-link:hover i {
    color: #fff !important;
    background: #1478ff !important;
}

body .mega-link strong {
    font-size: 15px !important;
    color: #102744 !important;
}

body .mega-link span span {
    margin-top: 4px !important;
    color: #52677f !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body .cta-section {
    background: linear-gradient(105deg, #e7f7fb 0%, #f7fafc 52%, #eef6ff 100%) !important;
    border-top: 1px solid #d9e8f4 !important;
    border-bottom: 1px solid #d9e8f4 !important;
}

body .cta-bg::before,
body .cta-particles {
    display: none !important;
}

body .cta-title {
    color: #102744 !important;
    -webkit-text-fill-color: #102744 !important;
    font-size: 38px !important;
}

body .cta-subtitle {
    color: #425a74 !important;
    font-size: 17px !important;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .cta-section .btn-outline-light {
    color: #102744 !important;
    border-color: #b9c9d9 !important;
    background: #fff !important;
}

body .cta-section .btn-outline-light:hover {
    border-color: #1478ff !important;
    color: #1478ff !important;
}

body .products .section-title {
    color: #102744 !important;
    -webkit-text-fill-color: #102744 !important;
}

body .products .section-subtitle {
    color: #52677f !important;
    max-width: 760px;
}

body .products-grid {
    align-items: stretch;
}

body .product-card {
    background: #fff !important;
    color: #102744 !important;
    border: 1px solid #dbe5ef !important;
    border-radius: 8px !important;
    padding: 30px 28px !important;
    box-shadow: 0 10px 26px rgba(16, 39, 68, 0.05) !important;
}

body .product-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 36px rgba(16, 39, 68, 0.1) !important;
}

body .product-card h3 {
    color: #102744 !important;
    font-size: 20px !important;
}

body .product-card p {
    color: #52677f !important;
    font-size: 15px !important;
}

body .product-card .product-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 8px !important;
    background: #eef5ff !important;
    color: #1478ff !important;
    border: 1px solid #d7e7fb !important;
}

body .product-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1478ff !important;
    font-weight: 700;
    font-size: 14px;
}

body .product-link:hover {
    color: #0d58bd !important;
}

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

@media (max-width: 768px) {
    body .mega-menu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    body .mega-feature,
    body .mega-columns {
        display: block;
        padding: 0;
    }

    body .mega-feature-card {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #d9e4ef;
    }

    body .cta-title {
        font-size: 28px !important;
    }
}

/* Export document color polish: scoped to docs pages only, h5api.html is intentionally left unchanged. */
:root{
    --legacy-blue:#2864E6;
    --legacy-blue-soft:#EEF4FF;
    --legacy-teal:#0F9F83;
    --legacy-teal-soft:#EAF8F4;
    --legacy-coral:#F45D68;
    --legacy-coral-soft:#FFF2F3;
    --legacy-indigo:#625DD8;
    --legacy-indigo-soft:#F0EFFF;
    --legacy-amber:#C98713;
    --legacy-amber-soft:#FFF6DF;
    --legacy-line:#E2E8F1;
    --legacy-text:#0D172A;
    --legacy-muted:#536175;
}
body.docs-page,
body#top{
    background:#F6F8FB !important;
    color:var(--legacy-text) !important;
}
body.docs-page .header,
body#top .header{
    background:linear-gradient(135deg,#123169 0%,#2864E6 58%,#0F9F83 100%) !important;
    box-shadow:0 20px 46px rgba(20,52,102,.16) !important;
}
body.docs-page .sidebar,
body#top .sidebar,
body.docs-page .main-content,
body#top .main-content{
    border:1px solid var(--legacy-line) !important;
    box-shadow:0 14px 36px rgba(15,23,42,.07) !important;
}
body.docs-page .sidebar h3,
body#top .sidebar h3{
    border-bottom-color:#BFE6DA !important;
}
body.docs-page .sidebar a,
body#top .sidebar a{
    border-radius:10px !important;
}
body.docs-page .sidebar a:hover,
body.docs-page .sidebar a.active,
body#top .sidebar a:hover,
body#top .sidebar a.active{
    background:linear-gradient(90deg,var(--legacy-blue-soft),#fff) !important;
    color:var(--legacy-blue) !important;
    box-shadow:inset 3px 0 0 var(--legacy-blue) !important;
    transform:none !important;
}
body.docs-page h2,
body#top h2{
    border-bottom-color:#BFE6DA !important;
}
body.docs-page .warning-box,
body.docs-page .success-box,
body.docs-page .tip-box,
body.docs-page .info-box,
body.docs-page .faq-category,
body.docs-page .faq-item,
body.docs-page .docs-card,
body.docs-page .docs-contact-card,
body.docs-page .api-card,
body.docs-page .download-card,
body.docs-page .feature-card,
body.docs-page .product-card,
body.docs-page .solution-card,
body.docs-page .partner-card,
body#top .warning-box,
body#top .success-box,
body#top .tip-box,
body#top .info-box,
body#top .faq-category,
body#top .faq-item,
body#top .docs-card,
body#top .docs-contact-card,
body#top .api-card,
body#top .download-card,
body#top .feature-card,
body#top .product-card,
body#top .solution-card,
body#top .partner-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--legacy-line) !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%) !important;
    box-shadow:0 12px 30px rgba(15,23,42,.055) !important;
}
body.docs-page .warning-box::before,
body.docs-page .success-box::before,
body.docs-page .tip-box::before,
body.docs-page .info-box::before,
body.docs-page .faq-category::before,
body.docs-page .faq-item::before,
body.docs-page .docs-card::before,
body.docs-page .docs-contact-card::before,
body.docs-page .api-card::before,
body.docs-page .download-card::before,
body.docs-page .feature-card::before,
body.docs-page .product-card::before,
body.docs-page .solution-card::before,
body.docs-page .partner-card::before,
body#top .warning-box::before,
body#top .success-box::before,
body#top .tip-box::before,
body#top .info-box::before,
body#top .faq-category::before,
body#top .faq-item::before,
body#top .docs-card::before,
body#top .docs-contact-card::before,
body#top .api-card::before,
body#top .download-card::before,
body#top .feature-card::before,
body#top .product-card::before,
body#top .solution-card::before,
body#top .partner-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:3px;
    background:linear-gradient(90deg,var(--legacy-blue),rgba(40,100,230,.06));
}
body.docs-page .success-box::before,
body.docs-page .tip-box::before,
body.docs-page .faq-category:nth-of-type(4n+3)::before,
body.docs-page .faq-item:nth-of-type(4n+3)::before,
body.docs-page .docs-card:nth-child(4n+3)::before,
body.docs-page .feature-card:nth-child(4n+3)::before,
body#top .success-box::before,
body#top .tip-box::before,
body#top .faq-category:nth-of-type(4n+3)::before,
body#top .faq-item:nth-of-type(4n+3)::before,
body#top .docs-card:nth-child(4n+3)::before,
body#top .feature-card:nth-child(4n+3)::before{
    background:linear-gradient(90deg,var(--legacy-teal),rgba(15,159,131,.06));
}
body.docs-page .warning-box::before,
body.docs-page .faq-category:nth-of-type(4n+2)::before,
body.docs-page .faq-item:nth-of-type(4n+2)::before,
body.docs-page .docs-card:nth-child(4n+2)::before,
body.docs-page .feature-card:nth-child(4n+2)::before,
body#top .warning-box::before,
body#top .faq-category:nth-of-type(4n+2)::before,
body#top .faq-item:nth-of-type(4n+2)::before,
body#top .docs-card:nth-child(4n+2)::before,
body#top .feature-card:nth-child(4n+2)::before{
    background:linear-gradient(90deg,var(--legacy-coral),rgba(244,93,104,.06));
}
body.docs-page .info-box::before,
body.docs-page .faq-category:nth-of-type(4n)::before,
body.docs-page .faq-item:nth-of-type(4n)::before,
body.docs-page .docs-card:nth-child(4n)::before,
body.docs-page .feature-card:nth-child(4n)::before,
body#top .info-box::before,
body#top .faq-category:nth-of-type(4n)::before,
body#top .faq-item:nth-of-type(4n)::before,
body#top .docs-card:nth-child(4n)::before,
body#top .feature-card:nth-child(4n)::before{
    background:linear-gradient(90deg,var(--legacy-indigo),rgba(98,93,216,.06));
}
body.docs-page .docs-card i,
body.docs-page .docs-contact-card > i,
body.docs-page .api-card i,
body.docs-page .download-card i,
body.docs-page .feature-card i,
body.docs-page .product-card .product-icon,
body.docs-page .mega-feature-icon,
body#top .docs-card i,
body#top .docs-contact-card > i,
body#top .api-card i,
body#top .download-card i,
body#top .feature-card i,
body#top .product-card .product-icon,
body#top .mega-feature-icon{
    width:52px !important;
    height:52px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    color:#fff !important;
    background:var(--legacy-blue) !important;
    border:0 !important;
    box-shadow:0 12px 22px rgba(40,100,230,.18) !important;
}
body.docs-page .docs-card:nth-child(4n+2) i,
body.docs-page .feature-card:nth-child(4n+2) i,
body#top .docs-card:nth-child(4n+2) i,
body#top .feature-card:nth-child(4n+2) i{background:var(--legacy-coral) !important}
body.docs-page .docs-card:nth-child(4n+3) i,
body.docs-page .feature-card:nth-child(4n+3) i,
body#top .docs-card:nth-child(4n+3) i,
body#top .feature-card:nth-child(4n+3) i{background:var(--legacy-teal) !important}
body.docs-page .docs-card:nth-child(4n) i,
body.docs-page .feature-card:nth-child(4n) i,
body#top .docs-card:nth-child(4n) i,
body#top .feature-card:nth-child(4n) i{background:var(--legacy-indigo) !important}
body.docs-page .warning-box,
body#top .warning-box{
    background:linear-gradient(135deg,var(--legacy-coral-soft),#fff) !important;
}
body.docs-page .success-box,
body#top .success-box{
    background:linear-gradient(135deg,var(--legacy-teal-soft),#fff) !important;
}
body.docs-page .tip-box,
body#top .tip-box{
    background:linear-gradient(135deg,var(--legacy-blue-soft),#fff) !important;
}
body.docs-page .info-box,
body#top .info-box{
    background:linear-gradient(135deg,var(--legacy-indigo-soft),#fff) !important;
}