/* Neutral English navigation. Component scoped; header branding stays unchanged. */
.cxn-icon {
    display:block;
    flex:none;
    width:28px;
    height:28px;
    color:inherit;
    overflow:visible
}

.cxn-icon .cxn-accent {
    stroke:currentColor;
    fill:none
}

.cx-nav-menu[data-cxn-navigation][open]>summary {
    color:#2858df;
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:8px
}

.cx-nav-mega.cxn-panel {
    position:fixed;
    top:var(--cx-nav-panel-top,5rem);
    left:50%;
    transform:translateX(-50%);
    display:block;
    width:min(1160px,calc(100vw - 48px));
    max-height:calc(100dvh - var(--cx-nav-panel-top,5rem) - 20px);
    overflow:auto;
    padding:25px 25px 0;
    box-sizing:border-box;
    border:1px solid #dce3e7;
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 48px #14283e14;
    backdrop-filter:none;
    color:#151a20;
    text-align:left
}

.cxn-columns {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.cxn-column {
    min-width:0
}

.cxn-columns>.cxn-column+.cxn-column,.cxn-template-columns>.cxn-column+.cxn-column {
    border-left:1px solid #e9edf0;
    padding-left:24px
}

.cxn-heading {
    margin:0 0 15px!important;
    color:#526174!important;
    font-size:11px!important;
    line-height:1.5!important;
    letter-spacing:.14em;
    font-weight:750;
    text-transform:uppercase
}

.cxn-list {
    display:grid;
    gap:5px
}

.cxn-item,.cxn-install {
    display:flex;
    align-items:flex-start;
    gap:13px;
    min-width:0;
    padding:13px 8px;
    min-height:76px;
    border-radius:8px;
    text-decoration:none!important;
    color:#151a20!important;
    transition:background .15s ease
}

.cxn-item:hover,.cxn-item:focus-visible {
    background:#f4f5f7
}

.cxn-tile {
    display:flex;
    flex:0 0 34px;
    width:34px;
    height:36px;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:transparent;
    color:#151a20;
    box-shadow:none
}

.cxn-item:hover .cxn-tile,.cxn-item:focus-visible .cxn-tile {
    background:transparent
}

.cxn-copy {
    display:block;
    min-width:0;
    padding-top:2px
}

.cxn-title {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 8px;
    font-size:14px;
    font-weight:720;
    line-height:1.45;
    letter-spacing:-.015em
}

.cxn-description {
    display:block;
    margin-top:4px;
    font-size:12px;
    line-height:1.55;
    color:#607080;
    font-weight:400;
    letter-spacing:0
}

.cxn-badge {
    display:inline-block;
    padding:3px 7px;
    border-radius:20px;
    background:#f2f3f5;
    color:#526174;
    font-size:9px;
    line-height:1.4;
    font-weight:650;
    letter-spacing:0;
    white-space:nowrap
}

.cxn-platforms {
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    margin-top:8px
}

.cxn-platforms a {
    font-size:11px;
    line-height:1.7;
    color:#315bc9!important;
    text-decoration:underline!important;
    text-decoration-color:#b8c7ee!important;
    text-underline-offset:3px
}

.cxn-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
    padding:16px 5px 18px;
    border-top:1px solid #e3e9ed
}

.cxn-footer>div {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 22px
}

.cxn-text-link {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#2858df!important;
    font-size:12px;
    font-weight:650;
    text-decoration:none!important;
    line-height:1.5
}

.cxn-text-link .cxn-icon {
    width:20px;
    height:20px
}

.cxn-tool {
    display:inline-flex!important;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:550;
    color:#343e4a!important;
    text-decoration:none!important
}

.cxn-tool .cxn-icon {
    width:19px;
    height:19px
}
.cxn-tool .cxn-icon[data-cxn-icon="calculator"] {
    width:26px;
    height:30px
}

.cxn-tools-label,.cxn-muted,.cxn-trial {
    font-size:11px;
    color:#647789;
    font-weight:400
}

.cxn-pill {
    padding:9px 15px;
    border:1px solid #bdcbd4;
    border-radius:30px;
    color:#15283d!important;
    background:#fff
}

.cxn-text-link:hover,.cxn-tool:hover {
    color:#2858df!important
}

.cxn-panel a:focus-visible,.cxn-mobile-content a:focus-visible,.cxn-guides a:focus-visible {
    outline:2px solid #326bff;
    outline-offset:3px;
    border-radius:7px
}

.cxn-industries {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 18px;
    padding:1px 0 5px
}

.cxn-industries .cxn-item {
    padding:18px 10px
}

.cxn-industries .cxn-tile {
    width:34px;
    height:36px;
    flex-basis:34px;
    border-radius:0
}

.cxn-industries .cxn-icon {
    width:28px;
    height:28px
}

.cxn-template-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}

.cxn-column-note {
    font-size:12px;
    line-height:1.5;
    color:#607080;
    margin:-6px 0 10px
}

.cxn-template {
    display:flex;
    align-items:center;
    gap:16px;
    padding:7px 10px;
    border-radius:10px;
    color:#151a20!important;
    text-decoration:none!important;
    min-width:0
}

.cxn-template:hover,.cxn-template:focus-visible {
    background:#f4f5f7
}
.cxn-template>.cxn-title{min-width:0;overflow-wrap:anywhere}

.cxn-photo {
    position:relative;
    display:block;
    flex:0 0 77px;
    width:77px;
    height:55px;
    border:1px solid #ecf0f1;
    border-radius:8px;
    overflow:hidden;
    background:#f6f8f8
}

.cxn-photo img {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply
}

.cxn-mode {
    margin-left:auto;
    font-size:10px;
    letter-spacing:.06em;
    color:#607080;
    border:1px solid #dce6e8;
    padding:3px 6px;
    border-radius:5px
}

/* One compact group: capabilities first, visual mode last at the row's right edge. */
.cxn-template-meta{display:inline-flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.cxn-template-meta .cxn-mode{margin-left:0}
.cxn-template-meta .cxt-capabilities{display:inline-flex;align-items:center;gap:9px;color:#28313c}
.cxn-template-meta .cxt-capability{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:9px;line-height:1}
.cxn-template-meta .cxt-capability svg{display:block;width:auto;height:16px;flex:none}
.cxn-template-meta .cxt-capability-plus{font-size:10px;color:#687482}
@media(max-width:600px){.cxn-template{gap:10px}.cxn-template-meta{gap:7px}.cxn-template-meta .cxt-capabilities{gap:5px}.cxn-template-meta .cxt-capability svg{height:14px}}

/* Templates library palette; slightly darker 2D ink keeps the small label readable. */
.cxn-mode--2d {
    color:#a05a2d;
    background:#fbefe6;
    border-color:#ead3c2
}

.cxn-mode--3d {
    color:#1859ed;
    background:#eaf1ff;
    border-color:#cddafa
}

.cx-nav-mega.cxn-panel--templates {
    width:min(1040px,calc(100vw - 48px))
}

.cx-nav-mega.cxn-panel--pricing {
    width:min(1100px,calc(100vw - 48px))
}

.cxn-pricing {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0
}

.cxn-plan,.cxn-service {
    position:relative;
    display:block;
    min-width:0;
    padding:10px 20px 12px;
    color:#151a20!important;
    text-decoration:none!important;
    background:#fff
}

.cxn-pricing>:first-child {
    padding-left:8px
}

.cxn-pricing>:last-child {
    padding-right:8px
}

.cxn-pricing>*+* {
    border-left:1px solid #e5e9ee
}

.cxn-plan:hover,.cxn-plan:focus-visible {
    background:#f4f5f7
}

.cxn-plan:focus-visible {
    z-index:1
}

/* Growth's bonus is a separate action, never a button nested in a plan link. */
.cxn-pricing>.cxn-plan-wrap{position:relative;min-width:0;padding:0}
.cxn-plan-wrap>.cxn-plan{height:100%;box-sizing:border-box}
.cxn-plan-wrap--growth>.cxn-plan .cxn-plan__head{padding-right:38px}
.cxn-plan-wrap>.cxn-bonus-trigger{position:absolute;top:4px;right:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:42px;min-height:54px;padding:4px 2px;border:1px solid transparent;border-radius:9px;background:transparent;color:#2457e6;font:inherit;font-size:9px;line-height:1.2;font-weight:700;cursor:pointer}
.cxn-plan-wrap>.cxn-bonus-trigger[hidden]{display:none}
.cxn-plan-wrap>.cxn-bonus-trigger>img{display:block;width:30px;height:30px;object-fit:contain;transform-origin:50% 78%}
.cxn-plan-wrap>.cxn-bonus-trigger:hover{background:#f3f6ff;border-color:#d6e0ff}
.cxn-plan-wrap>.cxn-bonus-trigger:focus-visible{outline:3px solid #3265ff;outline-offset:2px}
.cxn-plan-wrap>.lh-bonus-fallback{font-size:11px}

.cxn-plan__head {
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-width:0
}

.cxn-plan__head>.cxn-tile {
    margin-top:1px
}

.cxn-plan__heading {
    display:block;
    min-width:0
}

.cxn-price,.cxn-custom {
    display:block;
    margin-top:5px;
    font-size:21px;
    line-height:1.4;
    font-weight:730;
    letter-spacing:-.035em
}

.cxn-price small,.cxn-custom small {
    display:inline-block;
    color:#607080;
    font-size:10px;
    font-weight:400;
    letter-spacing:0;
    white-space:nowrap
}

.cxn-plan>.cxn-description,.cxn-service>.cxn-description {
    margin:15px 0 0 46px;
    font-size:12px;
    line-height:1.7;
    white-space:normal
}

.cxn-service>.cxn-text-link {
    margin:8px 0 0 46px;
    font-size:12px
}

/* Native mobile disclosure and focus trap remain owned by site.js. */
.cxn-mobile-content {
    display:block!important;
    padding:12px 0 0!important
}

.cxn-mobile-content>.cxn-text-link {
    margin:0 0 18px 5px
}

.cxn-mobile-content .cxn-columns,.cxn-mobile-content .cxn-template-columns,.cxn-mobile-content .cxn-pricing,.cxn-mobile-content .cxn-industries {
    display:grid;
    grid-template-columns:1fr;
    gap:20px
}

.cxn-mobile-content .cxn-column+.cxn-column {
    border:0;
    border-top:1px solid #e6e9ed;
    padding:18px 0 0
}

.cxn-mobile-content .cxn-heading {
    margin-bottom:8px!important
}

.cxn-mobile-content a.cxn-item {
    display:flex!important;
    padding:10px 4px!important;
    gap:12px
}

.cxn-mobile-content .cxn-title {
    font-size:14px;
    line-height:1.4
}

.cxn-mobile-content .cxn-description {
    font-size:12px;
    line-height:1.5;
    margin-top:3px
}

.cxn-mobile-content .cxn-tile {
    width:32px;
    height:34px;
    flex-basis:32px
}

.cxn-mobile-content .cxn-tile .cxn-icon {
    width:26px;
    height:26px
}

.cxn-mobile-content .cxn-industries {
    gap:3px
}

.cxn-mobile-content .cxn-footer {
    align-items:flex-start;
    padding:17px 4px;
    gap:18px
}

.cxn-mobile-content .cxn-footer>div {
    gap:14px;
    align-items:flex-start
}

.cxn-mobile-content .cxn-tools-label {
    width:100%
}

.cxn-mobile-content .cxn-pricing {
    gap:0
}

.cxn-mobile-content .cxn-pricing>* {
    padding:16px 4px;
    border-left:0
}

.cxn-mobile-content .cxn-pricing>*+* {
    border-top:1px solid #e6e9ed
}

.cxn-mobile-content .cxn-pricing a.cxn-plan {
    display:block!important;
    padding:16px 4px!important
}
.cxn-mobile-content .cxn-pricing>.cxn-plan-wrap{padding:0}
.cxn-mobile-content .cxn-plan-wrap>.cxn-bonus-trigger{top:11px;right:4px}

.cxn-mobile-content .cxn-plan>.cxn-description,.cxn-mobile-content .cxn-service>.cxn-description {
    margin:8px 0 0 44px;
    font-size:12px
}

.cxn-mobile-content .cxn-service>.cxn-text-link {
    margin-left:44px;
    min-height:44px
}

.cxn-mobile-content .cxn-price,.cxn-mobile-content .cxn-custom {
    font-size:20px
}

.cxn-mobile-content .cxn-price small,.cxn-mobile-content .cxn-custom small {
    font-size:11px
}

.cxn-mobile-content .cxn-photo {
    flex-basis:72px;
    width:72px
}

.cxn-mobile-content .cxn-template {
    padding:7px 4px!important;
    display:flex!important
}
@media(max-width:600px){
    .cxn-mobile-content .cxn-template{display:grid!important;grid-template-columns:64px minmax(0,1fr);gap:6px 12px;padding:10px 4px!important}
    .cxn-mobile-content .cxn-photo{grid-row:span 2;width:64px;height:52px}
    .cxn-mobile-content .cxn-template>.cxn-title{align-self:end;line-height:1.35}
    .cxn-mobile-content .cxn-template-meta{align-self:start;margin-left:0;justify-content:flex-end}
    .cxn-mobile-content .cxn-template-meta .cxt-capability svg{height:16px}
}

.cxn-mobile-content .cxn-footer a.cxn-text-link,.cxn-mobile-content .cxn-footer a.cxn-tool {
    padding:0!important;
    min-height:44px;
    font-size:12px
}

.cxn-mobile-content .cxn-platforms a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:3px 0!important
}

/* Task-oriented guide overview. Existing hero, videos and AI form are untouched. */
.cxn-guides {
    padding:80px 0 90px;
    background:#fff;
    color:#151a20
}

.cxn-guides>.cx-container {
    max-width:1160px
}

.cxn-guides h2 {
    font-size:clamp(30px,3.1vw,42px);
    letter-spacing:-.045em;
    line-height:1.15;
    margin:10px 0 13px
}

.cxn-guide-intro {
    margin:0;
    color:#607080;
    font-size:16px;
    line-height:1.6
}

.cxn-guide-group {
    margin-top:42px
}

.cxn-guide-group h3 {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
    line-height:1.4;
    letter-spacing:-.02em;
    margin:0 0 18px
}

.cxn-guide-group h3 .cxn-tile {
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:10px
}

.cxn-guide-group h3 .cxn-icon {
    width:23px;
    height:23px
}

.cxn-guide-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}

.cxn-guide-grid--two {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.cxn-guide-card {
    display:block;
    border:1px solid #dfe6e9;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    color:#151a20!important;
    text-decoration:none!important;
    transition:box-shadow .15s ease,border-color .15s ease
}

.cxn-guide-card:hover {
    border-color:#bdc6d1;
    box-shadow:0 10px 30px #14283e0b
}

.cxn-guide-card img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/8.8;
    object-fit:cover;
    object-position:top;
    background:#f4f7f8;
    border-bottom:1px solid #edf1f3
}

.cxn-guide-body {
    display:block;
    padding:20px 21px 22px
}

.cxn-guide-card strong {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:17px;
    font-weight:700;
    letter-spacing:-.025em;
    line-height:1.4
}

.cxn-guide-card small {
    display:block;
    font-size:13px;
    line-height:1.7;
    color:#607080;
    margin-top:7px
}

.cxn-guide-card .cxn-badge {
    font-size:10px;
    letter-spacing:0
}

.cxn-guide-secondary {
    margin-top:20px
}

.cxn-guide-card--compact {
    display:flex;
    align-items:center;
    padding:20px;
    gap:16px
}

.cxn-guide-card--compact .cxn-guide-body {
    padding:0
}

.cxn-guide-card--compact>.cxn-icon {
    margin-left:auto;
    width:22px;
    height:22px;
    color:#526174
}

@media(max-width:700px) {
    .cxn-guides {
        padding:50px 0 60px
    }
    .cxn-guide-grid,.cxn-guide-grid--two {
        grid-template-columns:1fr;
        gap:16px
    }
    .cxn-guide-group {
        margin-top:30px
    }
    .cxn-guide-body {
        padding:18px
    }
    .cxn-guide-card--compact {
        padding:18px;
        gap:12px
    }
    .cxn-guide-card--compact>.cxn-tile {
        width:38px;
        height:38px;
        flex-basis:38px
    }
    .cxn-guide-card--compact .cxn-icon {
        width:24px;
        height:24px
    }
    .cxn-guide-card strong {
        font-size:16px
    }
    .cxn-guide-card--compact>.cxn-icon {
        display:none
    }
}

@media(prefers-reduced-motion:reduce) {
    .cxn-item,.cxn-guide-card {
        transition:none
    }
}
