/* Codory hero eyebrow system — restrained, editorial, page-aware */

/* Homepage: preserve the clean compact capsule the homepage was designed around. */
.hero .tag{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px 16px!important;
    margin-bottom:18px!important;
    border:1px solid #d8e0eb!important;
    border-radius:999px!important;
    background:rgba(248,250,252,.90)!important;
    box-shadow:none!important;
    color:#1746d1!important;
    font-size:15px!important;
    line-height:1.15!important;
    font-weight:800!important;
    max-width:100%!important;
}
.hero .tag::before{content:none!important}
.hero .tag b{color:#1746d1!important;font-weight:800!important}

/* Messaging pages: keep the successful two-tone capsule treatment. */
.msgv-tag{
    display:inline-flex!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px 15px!important;
    margin-bottom:18px!important;
    border:1px solid #e5d8c3!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.78)!important;
    box-shadow:none!important;
    color:#465775!important;
    font-size:14px!important;
    line-height:1.15!important;
    font-weight:600!important;
}
.msgv-tag::before{content:none!important}
.msgv-tag b{color:var(--msg-accent)!important;font-weight:800!important}
.msgv-tag span{color:#53627a!important;font-size:14px!important;font-weight:500!important}

/* All other service pages: editorial eyebrow, not a badge. */
.wdv-hero-tag,
.appv-tag,
.bav-tag,
.crmv-tag,
.pdx-tag,
.seo2-tag,
.dm2-tag,
.sec2-tag,
.lc-hero .lc-kicker{
    --hero-accent:#1746d1;
    position:relative!important;
    display:flex!important;
    align-items:baseline!important;
    gap:11px!important;
    width:max-content!important;
    max-width:100%!important;
    margin:0 0 20px!important;
    padding:0 0 11px 17px!important;
    border:0!important;
    border-bottom:1px solid rgba(30,41,59,.14)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#64748b!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:500!important;
    flex-wrap:wrap!important;
}
.wdv-hero-tag::before,
.appv-tag::before,
.bav-tag::before,
.crmv-tag::before,
.pdx-tag::before,
.seo2-tag::before,
.dm2-tag::before,
.sec2-tag::before,
.lc-hero .lc-kicker::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:1px!important;
    bottom:10px!important;
    width:3px!important;
    height:auto!important;
    border-radius:2px!important;
    background:var(--hero-accent)!important;
    box-shadow:none!important;
}

/* Page accents are intentionally subtle: one line + service name only. */
.wdv-page .wdv-hero-tag{--hero-accent:#1746d1}
.appv-page .appv-tag{--hero-accent:#6d4dd6}
.bav-page .bav-tag{--hero-accent:#6d4dd6}
.crmv-page .crmv-tag{--hero-accent:#16845b}
.pdx-page .pdx-tag{--hero-accent:var(--pdx-accent,#1746d1)}
.seo2-page .seo2-tag{--hero-accent:#16845b}
.dm2-page .dm2-tag{--hero-accent:#b83d72}
.sec2-page .sec2-tag{--hero-accent:#1746d1}
.sec2-vuln .sec2-tag{--hero-accent:#c84646}
.sec2-research .sec2-tag{--hero-accent:#6d4dd6}
.sec2-server .sec2-tag{--hero-accent:#16847f}
.lc-page .lc-hero .lc-kicker{--hero-accent:#8a641c}

.wdv-hero-tag b,
.appv-tag b,
.bav-tag b,
.crmv-tag b,
.pdx-tag b,
.seo2-tag b,
.dm2-tag b,
.sec2-tag b{
    color:color-mix(in srgb,var(--hero-accent) 78%,#182238)!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
}
.wdv-hero-tag span,
.appv-tag span,
.bav-tag span,
.crmv-tag span,
.pdx-tag span,
.seo2-tag span,
.dm2-tag span,
.sec2-tag span{
    color:#69758a!important;
    font-size:14px!important;
    line-height:1.3!important;
    font-weight:500!important;
}
.lc-hero .lc-kicker{color:#263247!important;font-weight:750!important}
.lc-hero .lc-kicker i{color:var(--hero-accent)!important}

/* Reduce the artificial empty band under the navbar without disturbing visuals. */
.wdv-hero,
.appv-hero,
.bav-hero,
.crmv-hero,
.msgv-hero,
.pdx-hero,
.seo2-hero,
.dm2-hero,
.sec2-hero{padding-top:16px!important}

.wdv-hero-copy,
.appv-hero-copy,
.bav-hero-copy,
.crmv-hero-copy,
.msgv-hero-content,
.pdx-info,
.seo2-hero-copy,
.dm2-copy,
.sec2-hero-copy{
    align-self:start!important;
    padding-top:22px!important;
}
.lc-page{padding-top:24px!important}
.lc-hero{padding-top:0!important}

/* Dark mode keeps the same understated editorial system. */
html[data-theme="dark"] .hero .tag{
    background:#141821!important;
    border-color:#2b3444!important;
    color:#9bb5ff!important;
}
html[data-theme="dark"] .hero .tag b{color:#9bb5ff!important}
html[data-theme="dark"] .msgv-tag{
    background:#14151c!important;
    border-color:#30333e!important;
    color:#cbd2e1!important;
}
html[data-theme="dark"] .msgv-tag span{color:#aeb7c9!important}
html[data-theme="dark"] .msgv-tag b{color:color-mix(in srgb,var(--msg-accent) 76%,white)!important}

html[data-theme="dark"] .wdv-hero-tag,
html[data-theme="dark"] .appv-tag,
html[data-theme="dark"] .bav-tag,
html[data-theme="dark"] .crmv-tag,
html[data-theme="dark"] .pdx-tag,
html[data-theme="dark"] .seo2-tag,
html[data-theme="dark"] .dm2-tag,
html[data-theme="dark"] .sec2-tag,
html[data-theme="dark"] .lc-hero .lc-kicker{
    background:transparent!important;
    border-color:rgba(255,255,255,.12)!important;
    box-shadow:none!important;
    color:#aab4c9!important;
}
html[data-theme="dark"] .wdv-hero-tag b,
html[data-theme="dark"] .appv-tag b,
html[data-theme="dark"] .bav-tag b,
html[data-theme="dark"] .crmv-tag b,
html[data-theme="dark"] .pdx-tag b,
html[data-theme="dark"] .seo2-tag b,
html[data-theme="dark"] .dm2-tag b,
html[data-theme="dark"] .sec2-tag b{
    color:color-mix(in srgb,var(--hero-accent) 58%,#ffffff)!important;
}
html[data-theme="dark"] .wdv-hero-tag span,
html[data-theme="dark"] .appv-tag span,
html[data-theme="dark"] .bav-tag span,
html[data-theme="dark"] .crmv-tag span,
html[data-theme="dark"] .pdx-tag span,
html[data-theme="dark"] .seo2-tag span,
html[data-theme="dark"] .dm2-tag span,
html[data-theme="dark"] .sec2-tag span{color:#9ea8bb!important}
html[data-theme="dark"] .lc-hero .lc-kicker{color:#d6dbe5!important}

@media(max-width:768px){
    .hero .tag{padding:8px 12px!important;font-size:12.5px!important;white-space:normal!important}
    .msgv-tag{padding:8px 11px!important;font-size:11.5px!important;gap:7px!important}
    .msgv-tag span{display:none!important}

    .wdv-hero-tag,
    .appv-tag,
    .bav-tag,
    .crmv-tag,
    .pdx-tag,
    .seo2-tag,
    .dm2-tag,
    .sec2-tag,
    .lc-hero .lc-kicker{
        gap:7px!important;
        margin-bottom:17px!important;
        padding:0 0 8px 13px!important;
        font-size:11.5px!important;
        flex-wrap:wrap!important;
        white-space:normal!important;
    }
    .wdv-hero-tag::before,
    .appv-tag::before,
    .bav-tag::before,
    .crmv-tag::before,
    .pdx-tag::before,
    .seo2-tag::before,
    .dm2-tag::before,
    .sec2-tag::before,
    .lc-hero .lc-kicker::before{bottom:7px!important;width:2px!important}
    .wdv-hero-tag b,
    .appv-tag b,
    .bav-tag b,
    .crmv-tag b,
    .pdx-tag b,
    .seo2-tag b,
    .dm2-tag b,
    .sec2-tag b{font-size:12.5px!important}
    .wdv-hero-tag span,
    .appv-tag span,
    .bav-tag span,
    .crmv-tag span,
    .pdx-tag span,
    .seo2-tag span,
    .dm2-tag span,
    .sec2-tag span{font-size:11.5px!important}

    .wdv-hero,
    .appv-hero,
    .bav-hero,
    .crmv-hero,
    .msgv-hero,
    .pdx-hero,
    .seo2-hero,
    .dm2-hero,
    .sec2-hero{padding-top:8px!important}
    .wdv-hero-copy,
    .appv-hero-copy,
    .bav-hero-copy,
    .crmv-hero-copy,
    .msgv-hero-content,
    .pdx-info,
    .seo2-hero-copy,
    .dm2-copy,
    .sec2-hero-copy{padding-top:12px!important}
    .lc-page{padding-top:14px!important}
}