/* Shared embed theme overrides (query-string colors from app WebView) */
html.embed-theme-active body {
    background: var(--embed-bg, var(--bg)) !important;
}

html.embed-theme-active .hero {
    background: var(--embed-header, var(--hero-bg)) !important;
}

html.embed-theme-active .hero::after {
    background: var(--embed-accent-grad, var(--orange-grad, var(--accent-grad))) !important;
}

html.embed-theme-active [class*="brand-bar"] {
    background: var(--embed-bg, var(--surface, #fff)) !important;
    border-bottom-color: var(--embed-accent, var(--orange, var(--accent))) !important;
}

html.embed-theme-active .btn-primary {
    background: var(--embed-accent-grad, var(--orange-grad, var(--accent-grad))) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--embed-accent, #0073bc) 35%, transparent 65%) !important;
}

html.embed-theme-active .section-title,
html.embed-theme-active .tl-item h4,
html.embed-theme-active [class*="brand-nav"] a,
html.embed-theme-active [class*="brand-tag"] {
    color: var(--embed-header, var(--primary, var(--blue))) !important;
}

html.embed-theme-active .section-label,
html.embed-theme-active .hero h1 em,
html.embed-theme-active .hero-badge .dot,
html.embed-theme-active .tl-step,
html.embed-theme-active .code-tabs button.active,
html.embed-theme-active .code-tabs button:hover {
    color: var(--embed-accent, var(--orange, var(--accent))) !important;
}

html.embed-theme-active .section-label::before,
html.embed-theme-active .section-title::after,
html.embed-theme-active .timeline::before {
    background: var(--embed-accent-grad, var(--orange-grad, var(--accent-grad))) !important;
}

html.embed-theme-active .ico-box:not(.blue) {
    background: color-mix(in srgb, var(--embed-accent, #0073bc) 14%, white 86%) !important;
    color: var(--embed-accent, var(--orange, var(--accent))) !important;
}

html.embed-theme-active .section.grad {
    background: var(--embed-title-bar, var(--bg-warm)) !important;
}

html.embed-theme-active .site-footer,
html.embed-theme-active .article-footer,
html.embed-theme-active .page-footer {
    background: var(--embed-footer, transparent) !important;
}

html.embed-theme-active.embed-theme-active .download-cta,
html.embed-theme-active .cta-banner {
    background: var(--embed-accent-grad, var(--accent-grad)) !important;
}

/* API & App articles in app iframe / embed: light page bg, hide marketing chrome */
html.in-iframe,
html.in-iframe body,
html.embed-theme-active body {
    min-height: 100%;
}

html.in-iframe:has(.app-page),
html.in-iframe body:has(.app-page),
html.in-iframe:has(.api-page),
html.in-iframe body:has(.api-page),
html.in-iframe:has(.icici-page),
html.in-iframe body:has(.icici-page),
html.embed-theme-active:has(.app-page),
html.embed-theme-active body:has(.app-page),
html.embed-theme-active:has(.api-page),
html.embed-theme-active body:has(.api-page),
html.embed-theme-active:has(.icici-page),
html.embed-theme-active body:has(.icici-page) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

html.in-iframe .article-page,
html.embed-theme-active .article-page {
    background: var(--embed-bg, var(--bg, #ffffff)) !important;
    min-height: 0 !important;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html.in-iframe .app-page.article-page,
html.in-iframe .api-page.article-page,
html.in-iframe .icici-page.article-page,
html.embed-theme-active .app-page.article-page,
html.embed-theme-active .api-page.article-page,
html.embed-theme-active .icici-page.article-page {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: var(--embed-bg, var(--bg, #ffffff)) !important;
}

html.in-iframe body:has(.app-page) form,
html.in-iframe body:has(.api-page) form,
html.in-iframe body:has(.icici-page) form,
html.embed-theme-active body:has(.app-page) form,
html.embed-theme-active body:has(.api-page) form,
html.embed-theme-active body:has(.icici-page) form {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

html.in-iframe .app-page.article-page .hero,
html.in-iframe .api-page.article-page .hero,
html.in-iframe .icici-page.article-page .hero,
html.embed-theme-active .app-page.article-page .hero,
html.embed-theme-active .api-page.article-page .hero,
html.embed-theme-active .icici-page.article-page .hero {
    background: var(--embed-bg, var(--bg, #ffffff)) !important;
    flex: 1;
    width: 100%;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(0.35rem, 1.5vh, 0.75rem) 0.75rem !important;
    overflow: hidden;
}

html.in-iframe .app-page.article-page .hero .container,
html.in-iframe .api-page.article-page .hero .container,
html.in-iframe .icici-page.article-page .hero .container,
html.embed-theme-active .app-page.article-page .hero .container,
html.embed-theme-active .api-page.article-page .hero .container,
html.embed-theme-active .icici-page.article-page .hero .container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-height: 100%;
    overflow: hidden;
}

html.in-iframe .article-page:not(.app-page) .hero,
html.embed-theme-active .article-page:not(.app-page) .hero {
    background: var(--embed-bg, var(--bg, #ffffff)) !important;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0 !important;
    max-height: 100dvh;
    height: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem 0 !important;
    overflow: hidden;
}

html.in-iframe .app-page.article-page .hero-inner,
html.in-iframe .api-page.article-page .hero-inner,
html.in-iframe .icici-page.article-page .hero-inner,
html.embed-theme-active .app-page.article-page .hero-inner,
html.embed-theme-active .api-page.article-page .hero-inner,
html.embed-theme-active .icici-page.article-page .hero-inner {
    gap: 0.1rem 1.25rem;
    max-width: 920px;
}

html.in-iframe .app-page.article-page .hero-inner,
html.embed-theme-active .app-page.article-page .hero-inner {
    grid-template-areas:
        "title  logo"
        "desc   logo"
        "actions logo"
        "points points";
}

html.in-iframe .api-page.article-page .hero-inner,
html.in-iframe .icici-page.article-page .hero-inner,
html.embed-theme-active .api-page.article-page .hero-inner,
html.embed-theme-active .icici-page.article-page .hero-inner {
    grid-template-areas:
        "logo   logo"
        "title  title"
        "desc   desc"
        "points points";
}

html.in-iframe .app-page.article-page .hero h1,
html.embed-theme-active .app-page.article-page .hero h1 {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem) !important;
    margin-bottom: 0.25rem !important;
    font-weight: 800 !important;
}

html.in-iframe .app-page.article-page .hero-lead,
html.embed-theme-active .app-page.article-page .hero-lead {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

html.in-iframe .app-page.article-page .hero-actions,
html.embed-theme-active .app-page.article-page .hero-actions {
    margin-bottom: 0.35rem !important;
    gap: 0.5rem !important;
}

html.in-iframe .app-page.article-page .app-logo-hero-wrap,
html.embed-theme-active .app-page.article-page .app-logo-hero-wrap {
    max-width: 220px;
    padding: 0.6rem 0.8rem;
    background: #ffffff !important;
    border-color: color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 14%, #e8edf2 86%) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--embed-accent, #0073bc) 8%, transparent 92%) !important;
}

html.in-iframe .app-page.article-page .app-logo-hero-wrap .api-logo-hero,
html.embed-theme-active .app-page.article-page .app-logo-hero-wrap .api-logo-hero {
    height: clamp(48px, 7vw, 70px) !important;
    max-height: 70px !important;
    max-width: 190px !important;
}

html.in-iframe .app-page.article-page .app-preview-card,
html.embed-theme-active .app-page.article-page .app-preview-card {
    margin-top: 0.5rem !important;
    padding: 0.7rem 0.9rem !important;
}

html.in-iframe .app-page.article-page .app-preview-head,
html.embed-theme-active .app-page.article-page .app-preview-head {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

html.in-iframe .app-page.article-page .app-feature-list li,
html.embed-theme-active .app-page.article-page .app-feature-list li {
    padding: 0.42rem 0.45rem !important;
    font-size: 0.82rem !important;
}

html.in-iframe .app-page.article-page .btn-primary,
html.embed-theme-active .app-page.article-page .btn-primary {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.86rem !important;
}

html.in-iframe .app-page.article-page .app-feature-list li:nth-child(n+5),
html.embed-theme-active .app-page.article-page .app-feature-list li:nth-child(n+5) {
    display: none !important;
}

html.in-iframe body:has(.app-page),
html.in-iframe body:has(.api-page),
html.in-iframe body:has(.icici-page),
html.embed-theme-active body:has(.app-page),
html.embed-theme-active body:has(.api-page),
html.embed-theme-active body:has(.icici-page) {
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
}

html.in-iframe .article-page .hero .container,
html.embed-theme-active .article-page .hero .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

html.in-iframe .article-page .hero-inner,
html.embed-theme-active .article-page .hero-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

html.in-iframe .article-page .hero-inner > div:first-child,
html.embed-theme-active .article-page .hero-inner > div:first-child {
    text-align: center;
}

html.in-iframe .app-page.article-page .app-copy-col,
html.embed-theme-active .app-page.article-page .app-copy-col,
html.in-iframe .app-page.article-page .app-hero-main,
html.embed-theme-active .app-page.article-page .app-hero-main {
    text-align: left;
}

html.in-iframe .app-page.article-page .hero h1,
html.in-iframe .app-page.article-page .hero-lead,
html.embed-theme-active .app-page.article-page .hero h1,
html.embed-theme-active .app-page.article-page .hero-lead {
    text-align: left;
}

html.in-iframe .app-page.article-page .app-logo-hero-wrap,
html.embed-theme-active .app-page.article-page .app-logo-hero-wrap {
    background: #ffffff !important;
    border-color: color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 16%, #e8edf2 84%) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--embed-accent, #0073bc) 6%, transparent 94%) !important;
}

html.in-iframe .article-page .hero-lead,
html.embed-theme-active .article-page .hero-lead {
    margin-left: auto;
    margin-right: auto;
}

html.in-iframe .article-page .hero-actions,
html.embed-theme-active .article-page .hero-actions {
    justify-content: center;
}

html.in-iframe .article-page .api-logo-hero-wrap,
html.in-iframe .article-page .icici-logo-hero-wrap,
html.embed-theme-active .article-page .api-logo-hero-wrap,
html.embed-theme-active .article-page .icici-logo-hero-wrap {
    justify-content: center;
}

@media (max-width: 991px) {
    html.in-iframe .article-page .hero-inner,
    html.embed-theme-active .article-page .hero-inner {
        max-width: 520px;
    }
}

html.in-iframe .article-page .hero::before,
html.in-iframe .article-page .hero-grid,
html.embed-theme-active .article-page .hero::before,
html.embed-theme-active .article-page .hero-grid {
    display: none !important;
}

html.in-iframe .article-page .hero h1,
html.embed-theme-active .article-page .hero h1 {
    color: var(--embed-font, var(--text, #1a2b3c)) !important;
}

html.in-iframe .article-page .hero h1 em,
html.embed-theme-active .article-page .hero h1 em {
    color: var(--embed-accent, var(--article-accent, var(--accent))) !important;
}

html.in-iframe .article-page .hero-lead,
html.embed-theme-active .article-page .hero-lead {
    color: var(--embed-font, var(--muted, #5a6b7d)) !important;
    opacity: 1 !important;
}

html.in-iframe .article-page .hero-badge,
html.embed-theme-active .article-page .hero-badge {
    color: var(--embed-font, var(--text, #374151)) !important;
    background: color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 12%, white 88%) !important;
    border-color: color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 22%, white 78%) !important;
}

html.in-iframe .article-page .hero-stats,
html.in-iframe .article-page .live-tag,
html.in-iframe .article-page .gplay-badge,
html.embed-theme-active .article-page .hero-stats,
html.embed-theme-active .article-page .live-tag,
html.embed-theme-active .article-page .gplay-badge {
    display: none !important;
}

html.in-iframe .article-page .app-preview-card,
html.embed-theme-active .article-page .app-preview-card {
    background: #f8fafc !important;
    border: 1px solid color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 15%, #e8edf2 85%) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--embed-accent, #0073bc) 6%, transparent 94%) !important;
}

html.in-iframe .article-page .app-preview-head,
html.embed-theme-active .article-page .app-preview-head {
    color: var(--embed-font, var(--muted, #5a6b7d)) !important;
    border-bottom-color: color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 18%, #e8edf2 82%) !important;
}

html.in-iframe .article-page .app-feature-list li,
html.embed-theme-active .article-page .app-feature-list li {
    color: var(--embed-font, var(--text, #374151)) !important;
    border-bottom-color: #e8edf2 !important;
}

html.in-iframe .article-page .app-feature-list li:nth-child(odd),
html.embed-theme-active .article-page .app-feature-list li:nth-child(odd) {
    border-right-color: #e8edf2 !important;
}

html.in-iframe .article-page .icici-logo-hero,
html.in-iframe .article-page .api-logo-hero,
html.in-iframe .article-page .hero-card-head img,
html.embed-theme-active .article-page .icici-logo-hero,
html.embed-theme-active .article-page .api-logo-hero,
html.embed-theme-active .article-page .hero-card-head img {
    filter: none !important;
}

html.in-iframe .article-page .app-preview-card,
html.embed-theme-active .article-page .app-preview-card {
    background: var(--surface, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--embed-accent, var(--article-accent, #0073bc)) 18%, #e8edf2 82%) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--embed-accent, #0073bc) 8%, transparent 92%) !important;
    animation: none !important;
}

html.in-iframe .article-page .app-preview-head,
html.embed-theme-active .article-page .app-preview-head {
    color: var(--embed-font, var(--muted, #5a6b7d)) !important;
    border-bottom-color: var(--border, #e8edf2) !important;
}

html.in-iframe .article-page .app-feature-list li,
html.embed-theme-active .article-page .app-feature-list li {
    color: var(--embed-font, var(--text, #374151)) !important;
    border-bottom-color: var(--border, #e8edf2) !important;
}

html.in-iframe .article-page .mini-code,
html.embed-theme-active .article-page .mini-code {
    color: var(--text, #1e293b) !important;
    background: #f8fafc !important;
    border-radius: 8px;
    padding: 0.75rem;
}

html.in-iframe .article-page .mini-code .cmt {
    color: #64748b !important;
}

/* Contact Us blog heading — accent must beat global .text-pink-2 (#0073bc) */
html.cu-dynamic-theme .cu-blog-wrap .hd-title .span-arrow,
html.cu-dynamic-theme .cu-blog-wrap .hd-title h2.clr-text .cu-blog-accent,
html.cu-dynamic-theme .cu-blog-wrap .hd-title h2.clr-text .text-pink-2,
html.in-iframe .cu-blog-wrap .hd-title .span-arrow,
html.in-iframe .cu-blog-wrap .hd-title h2.clr-text .cu-blog-accent,
html.in-iframe .cu-blog-wrap .hd-title h2.clr-text .text-pink-2 {
    color: var(--embed-accent) !important;
}

html.cu-dynamic-theme .cu-blog-wrap .hd-title h2.clr-text,
html.in-iframe .cu-blog-wrap .hd-title h2.clr-text {
    color: var(--text, #222) !important;
}