/* /Components/Layout/DocsChrome.razor.rz.scp.css */
.docs-topbar[b-jrj6x3dopv] {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid var(--color-border-light);
}

.docs-topbar__menu[b-jrj6x3dopv] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 20px;
    color: var(--color-text);
    cursor: pointer;
}

.docs-topbar__brand[b-jrj6x3dopv] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
}

.docs-topbar__brand img[b-jrj6x3dopv] {
    height: 26px;
    width: auto;
}

.docs-topbar__label[b-jrj6x3dopv] {
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: 15px;
    font-weight: 600;
}

.docs-topbar__login[b-jrj6x3dopv] {
    margin-left: auto;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.docs-nav[b-jrj6x3dopv] {
    grid-area: nav;
    position: sticky;
    top: 64px;
    align-self: start;
    height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border-light);
    background: #fff;
}

.docs-nav__scroll[b-jrj6x3dopv] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 14px;
}

.docs-nav__solo[b-jrj6x3dopv] {
    display: block;
    flex: 1;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--color-text);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.docs-nav__solo:hover[b-jrj6x3dopv],
.docs-nav__solo.is-active[b-jrj6x3dopv] {
    background: var(--color-bg-soft);
}

.docs-nav__solo.is-active[b-jrj6x3dopv] {
    color: var(--color-accent);
}

.docs-nav__group-header[b-jrj6x3dopv] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.docs-nav__chevron[b-jrj6x3dopv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--color-text-subtle);
    font-size: 12px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.docs-nav__chevron:hover[b-jrj6x3dopv] {
    background: var(--color-bg-soft);
}

.docs-nav__chevron.is-open[b-jrj6x3dopv] {
    transform: rotate(90deg);
}

.docs-nav__items[b-jrj6x3dopv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 20px;
}

.docs-nav__item[b-jrj6x3dopv] {
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--color-text-muted);
    font-size: 13.5px;
    text-decoration: none;
}

.docs-nav__item:hover[b-jrj6x3dopv],
.docs-nav__item.is-active[b-jrj6x3dopv] {
    background: var(--color-bg-soft);
    color: var(--color-accent);
}

.docs-nav__divider[b-jrj6x3dopv] {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border-light);
}

.docs-nav__footer[b-jrj6x3dopv] {
    display: flex;
    flex-direction: column;
    padding: 10px 14px 18px;
    border-top: 1px solid var(--color-border-light);
}

.docs-nav__footer-link[b-jrj6x3dopv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.docs-nav__footer-link:hover[b-jrj6x3dopv] {
    background: var(--color-bg-soft);
    color: var(--color-accent);
}

.docs-nav__footer-icon[b-jrj6x3dopv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    font-size: 15px;
}

.docs-nav__scrim[b-jrj6x3dopv] {
    display: none;
}

@media (max-width: 980px) {
    .docs-topbar__menu[b-jrj6x3dopv] {
        display: flex;
    }

    .docs-nav[b-jrj6x3dopv] {
        position: fixed;
        top: 64px;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .docs-nav.is-open[b-jrj6x3dopv] {
        transform: translateX(0);
        box-shadow: 20px 0 40px rgba(15, 23, 32, .12);
    }

    .docs-nav__scrim[b-jrj6x3dopv] {
        display: block;
        position: fixed;
        inset: 64px 0 0 0;
        z-index: 45;
        background: rgba(10, 14, 18, .32);
    }
}
/* /Components/Layout/DocsLayout.razor.rz.scp.css */
.docs-shell[b-8ycmvhhgze] {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        "topbar topbar"
        "nav main";
    background: #fff;
}

.docs-main[b-8ycmvhhgze] {
    grid-area: main;
    min-width: 0;
    padding-bottom: 80px;
}

@media (max-width: 980px) {
    .docs-shell[b-8ycmvhhgze] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-4xpicsu201] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4xpicsu201] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/Nav/MainNav.razor.rz.scp.css */
.main-nav[b-ulim1275ud] {
    position: relative;
    z-index: 16;
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    font-family: var(--font);
}

.main-nav__item[b-ulim1275ud] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Light tone by default (matches the base .site-header default in
   SiteHeader.razor.css — see that file's comment for why). */
.main-nav__trigger[b-ulim1275ud] {
    background: none;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    border-radius: 36px;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.main-nav__trigger:hover[b-ulim1275ud],
.main-nav__item.is-open .main-nav__trigger[b-ulim1275ud],
.main-nav__item:hover .main-nav__trigger[b-ulim1275ud],
.main-nav__item:focus-within .main-nav__trigger[b-ulim1275ud] {
    color: var(--color-text);
    border-color: #cbd4dc;
    background: rgba(255, 255, 255, .42);
}

body.header-tone-dark .main-nav__trigger[b-ulim1275ud] {
    color: rgba(255, 255, 255, .9);
}

body.header-tone-dark .main-nav__trigger:hover[b-ulim1275ud],
body.header-tone-dark .main-nav__item.is-open .main-nav__trigger[b-ulim1275ud],
body.header-tone-dark .main-nav__item:hover .main-nav__trigger[b-ulim1275ud],
body.header-tone-dark .main-nav__item:focus-within .main-nav__trigger[b-ulim1275ud] {
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .06);
}

body.header-scrolled:not(.header-light) .main-nav__trigger[b-ulim1275ud],
body:not(.header-light) .site-header[data-scrolled="true"] .main-nav__trigger[b-ulim1275ud] {
    color: rgba(255,255,255,.9);
}

body.header-scrolled:not(.header-light) .main-nav__trigger:hover[b-ulim1275ud],
body.header-scrolled:not(.header-light) .main-nav__item.is-open .main-nav__trigger[b-ulim1275ud],
body:not(.header-light) .site-header[data-scrolled="true"] .main-nav__trigger:hover[b-ulim1275ud],
body:not(.header-light) .site-header[data-scrolled="true"] .main-nav__item.is-open .main-nav__trigger[b-ulim1275ud] {
    color: #fff;
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.06);
}

/* The panel sits flush against the trigger (top: 100%, no gap) so the
   hoverable area is contiguous — the classic mega-menu "dead zone" bug
   happens when there's a real gap between the trigger and the panel.
   Hover is the primary way in (matches Digit); a click also toggles the
   same state so touch/keyboard users aren't stuck. */
.main-nav__panel[b-ulim1275ud] {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    padding-top: 12px;
    z-index: 20;
}

.main-nav__item:hover .main-nav__panel[b-ulim1275ud],
.main-nav__item:focus-within .main-nav__panel[b-ulim1275ud],
.main-nav__item.is-open .main-nav__panel[b-ulim1275ud] {
    display: block;
}

.main-nav__panel-inner[b-ulim1275ud] {
    background: #fff;
    border: 1px solid rgba(17, 36, 60, .12);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(1, 12, 27, .2);
    padding: 8px;
}

/* ---- simple flat list: Industries, Resources, Company ---- */
.main-nav__simple-list[b-ulim1275ud] {
    list-style: none;
}

.main-nav__panel.is-wide[b-ulim1275ud] {
    width: 460px;
}

.main-nav__panel.is-wide .main-nav__simple-list[b-ulim1275ud] {
    columns: 2;
    column-gap: 4px;
}

.main-nav__panel.is-wide .main-nav__simple-list li[b-ulim1275ud] {
    break-inside: avoid;
}

.main-nav__simple-list a[b-ulim1275ud] {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.main-nav__simple-list a:hover[b-ulim1275ud] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* ---- mega panel: Features and Resources share this exact structure —
   two bold title + icon + description columns, plus a third column of
   plain quick links (Linear's Resources menu pattern, reused for both). ---- */
/* Features and Resources now share the exact same panel width and
   column structure — the Features panel's AI highlight used to be a
   fourth grid column stretched to match the columns' height, which is
   what made it read as a mismatched tile bolted on the side; it's now a
   full-width banner below the grid instead (see .mega-highlight). */
.main-nav__panel--mega[b-ulim1275ud] {
    width: 660px;
}

.resource-item strong[b-ulim1275ud] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.resource-grid[b-ulim1275ud] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px 28px;
    padding: 6px 4px;
}

.resource-col[b-ulim1275ud] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--color-border-light);
}

.resource-col:first-child[b-ulim1275ud] {
    padding-left: 0;
    border-left: none;
}

.resource-item[b-ulim1275ud] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 9px;
    text-decoration: none;
}

.resource-item:hover[b-ulim1275ud] {
    background: var(--color-accent-soft);
}

.resource-item:hover .resource-item__icon[b-ulim1275ud] {
    background: #fff;
}

.resource-item__icon[b-ulim1275ud] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--color-bg-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.resource-item__copy[b-ulim1275ud] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.resource-item small[b-ulim1275ud] {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--color-text-subtle);
}

.resource-col--quick[b-ulim1275ud] {
    padding: 4px 6px;
    gap: 2px;
}

.resource-quick-link[b-ulim1275ud] {
    padding: 5px 12px;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.resource-quick-link:hover[b-ulim1275ud] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* A full-width banner below the grid, styled like the rest of the
   panel (soft accent wash, thin border, the same icon-badge language as
   a .resource-item) rather than an isolated dark tile — the small
   colorful icon gradient is the only thing that still marks it as
   special. */
.mega-highlight[b-ulim1275ud] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 4px 0;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: linear-gradient(90deg, var(--color-accent-soft) 0%, rgba(124, 92, 255, .07) 100%);
    text-decoration: none;
    transition: border-color .15s ease;
}

.mega-highlight:hover[b-ulim1275ud] {
    border-color: var(--color-accent);
}

.mega-highlight__icon[b-ulim1275ud] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #4f8bff 0%, #7c5cff 55%, #34d9c6 100%);
}

.mega-highlight__copy[b-ulim1275ud] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mega-highlight__copy strong[b-ulim1275ud] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text);
}

.mega-highlight__copy small[b-ulim1275ud] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-subtle);
}

.mega-highlight__arrow[b-ulim1275ud] {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-text-subtle);
    font-size: 14px;
    transition: transform .15s ease, color .15s ease;
}

.mega-highlight:hover .mega-highlight__arrow[b-ulim1275ud] {
    color: var(--color-accent);
    transform: translateX(3px);
}

.main-nav__panel-footer[b-ulim1275ud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding: 12px 10px;
    border-top: 1px solid var(--color-border-light);
}

/* A plain link, not a filled button — nothing in a dropdown panel should
   compete with the page's real CTAs (Book a Demo, etc.) for weight. */
.main-nav__panel-cta[b-ulim1275ud] {
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.main-nav__panel-cta:hover[b-ulim1275ud] {
    color: var(--color-accent);
}

.main-nav__panel-secondary[b-ulim1275ud] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
}

.main-nav__panel-secondary:hover[b-ulim1275ud] {
    color: var(--color-accent);
}

/* Full-viewport click-catcher so opening a menu and clicking anywhere
   outside it closes the menu — sits under the panel, above the page. */
.main-nav__scrim[b-ulim1275ud] {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: transparent;
}

@media (max-width: 980px) {
    .main-nav[b-ulim1275ud] {
        display: none;
    }

    .main-nav__scrim[b-ulim1275ud] {
        display: none;
    }
}
/* /Components/Layout/Nav/MobileNav.razor.rz.scp.css */
.mobile-nav[b-c6p7ft8lke] {
    display: none;
}

@media (max-width: 980px) {
    .mobile-nav[b-c6p7ft8lke] {
        display: block;
        border-top: 1px solid var(--color-border);
        background: #fff;
        max-height: calc(100vh - var(--header-height));
        overflow: auto;
    }

    .mobile-nav[hidden][b-c6p7ft8lke] {
        display: none;
    }

    .mobile-nav__sheet[b-c6p7ft8lke] {
        padding: 8px 20px 24px;
    }

    .mobile-nav__group[b-c6p7ft8lke] {
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-nav__group summary[b-c6p7ft8lke] {
        list-style: none;
        cursor: pointer;
        padding: 14px 0;
        color: var(--color-text);
        font-weight: 600;
        font-size: 15px;
    }

    .mobile-nav__group summary[b-c6p7ft8lke]::-webkit-details-marker {
        display: none;
    }

    .mobile-nav__group ul[b-c6p7ft8lke] {
        list-style: none;
        padding-bottom: 12px;
    }

    .mobile-nav__group a[b-c6p7ft8lke] {
        display: block;
        padding: 8px 0;
        text-decoration: none;
        color: var(--color-text-muted);
        font-size: 14px;
    }

    .mobile-nav__flat-link[b-c6p7ft8lke] {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--color-border);
        text-decoration: none;
        color: var(--color-text);
        font-weight: 600;
        font-size: 15px;
    }

    .mobile-nav__actions[b-c6p7ft8lke] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-151i29vo5e],
.components-reconnect-repeated-attempt-visible[b-151i29vo5e],
.components-reconnect-failed-visible[b-151i29vo5e],
.components-pause-visible[b-151i29vo5e],
.components-resume-failed-visible[b-151i29vo5e],
.components-rejoining-animation[b-151i29vo5e] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-retrying[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-failed[b-151i29vo5e],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-151i29vo5e] {
    display: block;
}


#components-reconnect-modal[b-151i29vo5e] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-151i29vo5e 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-151i29vo5e 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-151i29vo5e 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-151i29vo5e]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-151i29vo5e 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-151i29vo5e {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-151i29vo5e {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-151i29vo5e {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-151i29vo5e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-151i29vo5e] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-151i29vo5e] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-151i29vo5e] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-151i29vo5e] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-151i29vo5e] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-151i29vo5e] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-151i29vo5e 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-151i29vo5e] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-151i29vo5e {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-yh15nf2rvx] {
    position: relative;
    overflow: hidden;
    background: #0a0b0c;
    color: #d7dade;
    padding: 220px 0 28px;
    background-image:
        linear-gradient(to bottom, rgba(10,11,12,.12) 0%, rgba(6,7,8,.82) 46%, #0a0b0c 70%),
        url('/images/case-study/amco-bg.png');
    background-size: cover;
    background-position: center top;
}

.site-footer__inner[b-yh15nf2rvx] {
    width: min(100% - 48px, var(--container));
    margin: 0 auto;
}

.site-footer__cta[b-yh15nf2rvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 0;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-footer__cta-text h2[b-yh15nf2rvx] {
    max-width: 480px;
    color: #fff;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 14px;
}

.site-footer__cta-text p[b-yh15nf2rvx] {
    max-width: 520px;
    color: #b7bcc2;
    font-size: 16px;
    line-height: 1.6;
}

.site-footer__cta-actions[b-yh15nf2rvx] {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* `::deep` is required: BrandButton renders these classes from its own
   component, not this file, so scoped selectors alone never match them. */
.site-footer__cta-actions[b-yh15nf2rvx]  .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #111417;
}

.site-footer__cta-actions[b-yh15nf2rvx]  .btn-primary:hover {
    background: #e9edf1;
    border-color: #e9edf1;
}

.site-footer__cta-actions[b-yh15nf2rvx]  .btn-on-dark {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.site-footer__cta-actions[b-yh15nf2rvx]  .btn-on-dark:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .36);
}

.site-footer__top[b-yh15nf2rvx] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 56px;
    padding-bottom: 56px;
}

.site-footer__brand-col p[b-yh15nf2rvx] {
    max-width: 260px;
    margin: 18px 0 0;
    color: #b7bcc2;
    font-size: 14px;
    line-height: 1.55;
}

.site-footer__brand[b-yh15nf2rvx] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* The footer band is always the dark tone, so it can use the dark-mode
   logo variant (white wordmark, opaque icon) directly, no light/dark
   swap needed like the header. */
.site-footer__brand-mark[b-yh15nf2rvx] {
    height: 26px;
    width: auto;
    display: block;
}

.site-footer__signup[b-yh15nf2rvx] {
    margin-top: 26px;
}

.site-footer__signup > span[b-yh15nf2rvx] {
    display: block;
    margin-bottom: 11px;
    color: #8b9096;
    font-size: 12px;
    font-weight: 600;
}

.site-footer__signup div[b-yh15nf2rvx] {
    display: flex;
    max-width: none;
}

.site-footer__signup input[b-yh15nf2rvx] {
    min-width: 0;
    flex: 1;
    border: 1px solid rgba(255,255,255,.22);
    border-right: 0;
    border-radius: 36px 0 0 36px;
    padding: 13px 18px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font: inherit;
    font-size: 13px;
}

.site-footer__signup input[b-yh15nf2rvx]::placeholder {
    color: #7d8288;
}

.site-footer__signup button[b-yh15nf2rvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    border: 0;
    border-radius: 0 36px 36px 0;
    background: #fff;
    color: #111417;
    cursor: pointer;
    font-size: 16px;
    transition: background .15s ease;
}

.site-footer__signup button:hover[b-yh15nf2rvx] {
    background: #e9edf1;
}

.site-footer__grid[b-yh15nf2rvx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.site-footer__col h2[b-yh15nf2rvx] {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
}

.site-footer__col ul[b-yh15nf2rvx] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.site-footer__col a[b-yh15nf2rvx] {
    display: inline-block;
    padding: 4px 0;
    color: #a4abb3;
    text-decoration: none;
    font-size: 14px;
}

.site-footer__col a:hover[b-yh15nf2rvx] {
    color: #fff;
}

.site-footer__bottom[b-yh15nf2rvx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #8d949c;
    font-size: 13px;
}

.site-footer__social[b-yh15nf2rvx] {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin-left: auto;
}

.site-footer__social a[b-yh15nf2rvx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #a4abb3;
    text-decoration: none;
    font-size: 14px;
    transition: border-color .15s ease, color .15s ease;
}

.site-footer__social a:hover[b-yh15nf2rvx] {
    border-color: #fff;
    color: #fff;
}

@media (max-width: 900px) {
    .site-footer__cta[b-yh15nf2rvx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__top[b-yh15nf2rvx] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .site-footer__grid[b-yh15nf2rvx] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 28px 20px;
    }
}

@media (max-width: 600px) {
    /* The AMCO photo is framed for a wide banner; on a narrow viewport it
       just crops into an odd, unrecognizable blur, so drop it in favor of
       a plain dark background instead of showing a bad crop. */
    .site-footer[b-yh15nf2rvx] {
        /* The fixed .demo-launcher pill sits bottom:16px and is ~40px
           tall, so it needs >=56px of clearance beneath the social row
           to never sit on top of it once the page is scrolled all the
           way down — the original 24px left it overlapping by ~12px. */
        padding: 48px 0 64px;
        background-image: none;
        background-color: #0a0b0c;
    }

    .site-footer__cta[b-yh15nf2rvx] {
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    /* Mobile's header bar no longer carries its own CTA (just the logo
       and hamburger), so this is the CTA on mobile — same buttons as
       desktop, just stacked full width. */
    .site-footer__cta-actions[b-yh15nf2rvx] {
        width: 100%;
    }

    .site-footer__cta-actions[b-yh15nf2rvx]  .btn {
        flex: 1;
    }

    /* The logo, blurb, and email signup are dropped on mobile: the CTA
       banner right above already covers the "get in touch" job, so this
       block is redundant weight before the reader gets to the link
       columns they're actually scrolling to hit. */
    .site-footer__brand-col[b-yh15nf2rvx] {
        display: none;
    }

    .site-footer__bottom[b-yh15nf2rvx] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 16px;
        padding-top: 18px;
        text-align: center;
        font-size: 11.5px;
    }

    .site-footer__social[b-yh15nf2rvx] {
        margin-left: 0;
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .site-footer__social a[b-yh15nf2rvx] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* Defaults here are the LIGHT tone (dark text on a plain page), not
   dark/hero — 38 of the site's 39 top-of-page sections are "white"
   tone, and only one page (Home) opens on a dark hero. site-header.js
   applies its tone class after the DOM has already parsed, so whatever
   this bare, unclassed state looks like is what briefly paints first on
   every fresh load — matching the common case here (rather than the
   hero case) is what keeps the header from flashing invisible
   white-on-white text on every non-home page. body.header-tone-dark
   below restores the white-text look for the hero/dark-band case. */
.site-header[b-i5e54ixmbf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    transition: color .2s ease;
    font-family: var(--font);
}

.site-header__inner[b-i5e54ixmbf] {
    width: min(100% - 40px, var(--container-wide));
    margin: 0 auto;
    height: var(--header-height);
    padding: 0 22px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, border-radius .2s ease;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}

body.header-tone-dark .site-header[b-i5e54ixmbf] { color: #fff; }
body.header-tone-dark .site-header__inner[b-i5e54ixmbf] { border-bottom-color: rgba(255, 255, 255, .28); }

/* The real Essembi logo lockup, in two pre-rendered variants (not a CSS
   filter trick): logo.png has a black wordmark for light backgrounds,
   logo-dark.png has a white wordmark (and an opaque, not cut-out, icon
   mark) for dark backgrounds. Only one is ever visible; which one is
   controlled by the same header-tone-light/-dark classes site-header.js
   already toggles for everything else in the header. */
.site-logo[b-i5e54ixmbf] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo__mark[b-i5e54ixmbf] {
    height: 30px;
    width: auto;
    display: block;
}

.site-logo__mark--dark[b-i5e54ixmbf] {
    display: none;
}

body.header-tone-dark .site-logo__mark--dark[b-i5e54ixmbf] {
    display: block;
}

body.header-tone-dark .site-logo__mark--light[b-i5e54ixmbf] {
    display: none;
}

/* Tone is toggled on <body> by site-header.js as the page scrolls:
   `header-tone-dark` / `header-tone-light` reflect whatever section is
   currently under the header, and `header-scrolled` marks "not at the very
   top of the page" (used to collapse the header into a sticky pill). */
body.header-tone-light .site-header[b-i5e54ixmbf] { color: var(--color-text); }
body.header-tone-light .site-header__inner[b-i5e54ixmbf] { border-bottom-color: var(--color-border); background: transparent; }

body.header-tone-light.header-scrolled .site-header__inner[b-i5e54ixmbf] {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 32px rgba(18, 30, 42, .1);
}

body.header-tone-dark.header-scrolled .site-header__inner[b-i5e54ixmbf] {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: #080a0c;
    box-shadow: 0 12px 32px rgba(8, 10, 12, .2);
}

body.header-scrolled .site-header[b-i5e54ixmbf] {
    padding: 8px 0;
}

.site-header__nav[b-i5e54ixmbf] {
    display: flex;
    justify-content: center;
}

.site-header__right[b-i5e54ixmbf] {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
}

.site-header__actions[b-i5e54ixmbf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* `::deep` is required here: these buttons are rendered by the shared
   BrandButton component, not by this file, so plain scoped selectors like
   `.site-header__actions .btn-primary` never match under Blazor's CSS
   isolation (the scope attribute only lands on elements *this* component
   renders). `::deep` tells the compiler to stop scoping at that point. */
.site-header__actions[b-i5e54ixmbf]  .btn {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
}

/* Dark tone (default: floating over the hero and other dark bands). Blue
   with white text, matching the Book a Demo button everywhere else on
   the site (hero, mobile header), rather than the plain white pill this
   used to be. */
.site-header__actions[b-i5e54ixmbf]  .btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.site-header__actions[b-i5e54ixmbf]  .btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.site-header__actions[b-i5e54ixmbf]  .btn-secondary {
    background: #363b40;
    border-color: #363b40;
    color: #fff;
}

.site-header__actions[b-i5e54ixmbf]  .btn-secondary:hover {
    background: #454b52;
    border-color: #454b52;
}

.site-header__actions[b-i5e54ixmbf]  .btn-ghost {
    color: rgba(255, 255, 255, .85);
}

.site-header__actions[b-i5e54ixmbf]  .btn-ghost:hover {
    color: #fff;
}

/* Light tone (scrolled past the hero onto a plain white section). Black
   rather than the blue accent, to stay on the site's black-and-white palette. */
body.header-tone-light .site-header__actions[b-i5e54ixmbf]  .btn-primary {
    background: #111417;
    border-color: #111417;
    color: #fff;
}

body.header-tone-light .site-header__actions[b-i5e54ixmbf]  .btn-primary:hover {
    background: #2b2f34;
    border-color: #2b2f34;
}

body.header-tone-light .site-header__actions[b-i5e54ixmbf]  .btn-secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

body.header-tone-light .site-header__actions[b-i5e54ixmbf]  .btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

body.header-tone-light .site-header__actions[b-i5e54ixmbf]  .btn-ghost {
    color: var(--color-text);
}

body.header-tone-light .site-header__actions[b-i5e54ixmbf]  .btn-ghost:hover {
    color: var(--color-accent);
}

.site-header__toggle[b-i5e54ixmbf] {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    padding: 6px;
}

/* A compact, always-blue CTA that stays visible in the mobile header bar
   itself (next to the hamburger), rather than only appearing once the
   menu sheet is opened. Blue in both header tones (light page or dark
   hero) so it pops against either background instead of blending into
   the black/white palette the other header buttons use. */
@media (max-width: 980px) {
    .site-header__inner[b-i5e54ixmbf] {
        grid-template-columns: 1fr auto;
    }

    .site-header__nav[b-i5e54ixmbf] {
        display: none;
    }

    .site-header__actions[b-i5e54ixmbf] {
        display: none;
    }

    .site-header__toggle[b-i5e54ixmbf] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-header[b-i5e54ixmbf] { padding: 0; }
    body.header-scrolled .site-header[b-i5e54ixmbf] { padding: 6px 0; }
    .site-header__inner[b-i5e54ixmbf] { padding: 0 14px; }
}
/* /Components/Pages/Company/About.razor.rz.scp.css */
/* The two "story" blocks above (Our Focus / Our Story) now render via
   the shared StorySplitSection component — see its own .razor.css for
   the .story-split rules that used to live here. */
/* A promoted card for the /next essay, not a footnote — dark navy panel
   (same treatment as the site's .icon-badge cards and the hero pill
   tooltips) so it reads as its own destination worth clicking into,
   not an afterthought below the story sections above it. */
.about-next[b-4lwxwybm4h] {
    padding: 8px 0 64px;
}

.about-next__card[b-4lwxwybm4h] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 40px 44px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 24px 60px rgba(10, 14, 18, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

.about-next__card:hover[b-4lwxwybm4h] {
    transform: translateY(-3px);
    box-shadow: 0 30px 70px rgba(10, 14, 18, .36);
}

/* A quiet glow in the corner — the same kind of accent-colored bloom
   used behind the hero pill tooltips, echoed here at page scale. */
.about-next__card[b-4lwxwybm4h]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    opacity: .22;
    pointer-events: none;
}

.about-next__card-copy[b-4lwxwybm4h] {
    position: relative;
    max-width: 560px;
}

.about-next__badge[b-4lwxwybm4h] {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #fff;
}

.about-next__card h2[b-4lwxwybm4h] {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.28;
    color: #fff;
}

.about-next__card p[b-4lwxwybm4h] {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.6;
}

.about-next__cta[b-4lwxwybm4h] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: gap .2s ease;
}

.about-next__card:hover .about-next__cta[b-4lwxwybm4h] {
    gap: 12px;
}

@media (max-width: 640px) {
    .about-next[b-4lwxwybm4h] {
        padding-bottom: 48px;
    }

    .about-next__card[b-4lwxwybm4h] {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 26px;
    }

    .about-next__cta[b-4lwxwybm4h] {
        width: 100%;
        justify-content: center;
    }
}

.about-careers[b-4lwxwybm4h] {
    background: var(--color-bg-soft);
}

.about-careers__inner[b-4lwxwybm4h] {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.about-careers__copy h2[b-4lwxwybm4h] {
    max-width: 440px;
    margin: 14px 0 16px;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.about-careers__copy p[b-4lwxwybm4h] {
    max-width: 440px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 26px;
}

/* A little "development environment" card — a code-editor window
   listing the open positions as data — standing in for the old small
   team pitch and its four-item grid. */
.about-careers__editor[b-4lwxwybm4h] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #14171b;
    box-shadow: 0 30px 70px rgba(10, 14, 18, .28);
}

.about-careers__editor-bar[b-4lwxwybm4h] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    background: #1c2026;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.about-careers__editor-dots[b-4lwxwybm4h] {
    display: flex;
    gap: 7px;
}

.about-careers__editor-dot[b-4lwxwybm4h] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.about-careers__editor-dot--red[b-4lwxwybm4h] { background: #f04438; }
.about-careers__editor-dot--yellow[b-4lwxwybm4h] { background: #f5c344; }
.about-careers__editor-dot--green[b-4lwxwybm4h] { background: #3ec776; }

.about-careers__editor-file[b-4lwxwybm4h] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .5);
}

.about-careers__editor-body[b-4lwxwybm4h] {
    margin: 0;
    padding: 24px 26px 28px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.85;
    white-space: pre;
}

/* `::deep` is required here: these spans are injected as raw HTML via
   @((MarkupString)...)) rather than rendered as normal Razor markup, so
   they never receive this component's CSS-isolation scope attribute —
   a plain scoped selector silently never matches them. */
.about-careers__editor-body[b-4lwxwybm4h]  .tok-key { color: #7dd3fc; }
.about-careers__editor-body[b-4lwxwybm4h]  .tok-str { color: #86efac; }
.about-careers__editor-body[b-4lwxwybm4h]  .tok-punc { color: rgba(255, 255, 255, .45); }

@media (max-width: 860px) {
    .about-careers__inner[b-4lwxwybm4h] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-careers__copy h2[b-4lwxwybm4h],
    .about-careers__copy p[b-4lwxwybm4h] {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .about-next__card[b-4lwxwybm4h] {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 24px;
    }

    .about-careers__editor-body[b-4lwxwybm4h] {
        font-size: 12px;
        padding: 20px;
    }
}
/* /Components/Pages/Company/BookDemo.razor.rz.scp.css */
.book-demo[b-yyw2kx6p1v] {
    padding-top: calc(var(--header-height) + 40px);
}

.book-demo__layout[b-yyw2kx6p1v] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
}

.book-demo__copy h1[b-yyw2kx6p1v] {
    margin: 14px 0 14px;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.book-demo__copy > p[b-yyw2kx6p1v] {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.book-demo__list[b-yyw2kx6p1v] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.book-demo__list li[b-yyw2kx6p1v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.book-demo__list li i[b-yyw2kx6p1v] {
    color: var(--color-accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.book-demo__host[b-yyw2kx6p1v] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px 14px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-soft);
}

.book-demo__host img[b-yyw2kx6p1v] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent-soft);
}

.book-demo__host span[b-yyw2kx6p1v] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.book-demo__host strong[b-yyw2kx6p1v] {
    font-size: 15px;
    color: var(--color-text);
}

.book-demo__frame[b-yyw2kx6p1v] {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: #fff;
}

.book-demo__frame iframe[b-yyw2kx6p1v] {
    display: block;
    width: 100%;
    height: min(640px, calc(100vh - var(--header-height) - 96px));
    min-height: 480px;
    border: 0;
}

@media (max-width: 900px) {
    .book-demo[b-yyw2kx6p1v] {
        padding-top: calc(var(--header-height) + 24px);
    }

    .book-demo__layout[b-yyw2kx6p1v] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .book-demo__frame iframe[b-yyw2kx6p1v] {
        height: 640px;
    }
}
/* /Components/Pages/Company/CaseStudyDetailPage.razor.rz.scp.css */
.case-study__missing[b-lrcjxqoy2e] {
    text-align: center;
    padding: 60px 0;
}

.case-study__header[b-lrcjxqoy2e] {
    padding: calc(var(--header-height) + 40px) 0 32px;
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}

.case-study__header-inner[b-lrcjxqoy2e] {
    max-width: 780px;
}

.case-study__header h1[b-lrcjxqoy2e] {
    margin: 14px 0 14px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.case-study__header > .container > p[b-lrcjxqoy2e] {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.case-study__meta[b-lrcjxqoy2e] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}

.case-study__meta div[b-lrcjxqoy2e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.case-study__meta span[b-lrcjxqoy2e] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.case-study__meta strong[b-lrcjxqoy2e] {
    font-size: 15px;
    color: var(--color-text);
}

.case-study__hero[b-lrcjxqoy2e] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.case-study__hero img[b-lrcjxqoy2e] {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.case-study__body[b-lrcjxqoy2e] {
    max-width: 720px;
    padding: 56px 24px 80px;
}

.case-study__body h2[b-lrcjxqoy2e] {
    margin: 40px 0 14px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.case-study__body h2:first-child[b-lrcjxqoy2e] {
    margin-top: 0;
}

.case-study__body p[b-lrcjxqoy2e] {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.case-study__body ul[b-lrcjxqoy2e] {
    margin: 0 0 16px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-study__body li[b-lrcjxqoy2e] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.case-study__quote[b-lrcjxqoy2e] {
    margin: 28px 0;
    padding: 24px 28px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.case-study__quote p[b-lrcjxqoy2e] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: 12px;
}

.case-study__quote cite[b-lrcjxqoy2e] {
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.case-study__quote cite strong[b-lrcjxqoy2e] {
    color: var(--color-text);
}

.case-study__cta[b-lrcjxqoy2e] {
    margin-top: 48px;
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    text-align: center;
}

.case-study__cta h3[b-lrcjxqoy2e] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.case-study__cta p[b-lrcjxqoy2e] {
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.case-study__cta-actions[b-lrcjxqoy2e] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .case-study__hero img[b-lrcjxqoy2e] {
        aspect-ratio: 4 / 3;
    }

    .case-study__body[b-lrcjxqoy2e] {
        padding: 40px 20px 60px;
    }
}
/* /Components/Pages/Company/Coaching.razor.rz.scp.css */
.coaching-diff__grid[b-zq2d0wzkt7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.coaching-diff__card[b-zq2d0wzkt7] {
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-soft);
}

.coaching-diff__card.is-coaching[b-zq2d0wzkt7] {
    background: #fff;
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
}

.coaching-diff__tag[b-zq2d0wzkt7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 5px 14px 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #fff;
    color: var(--color-text-subtle);
    border: 1px solid var(--color-border);
}

.coaching-diff__tag.is-coaching-tag[b-zq2d0wzkt7] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: transparent;
}

.coaching-diff__card h3[b-zq2d0wzkt7] {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.coaching-diff__card p[b-zq2d0wzkt7] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* A plain closing note, not another CTA band — the footer right below
   this already offers Book a Demo / Talk to Sales, so this just answers
   the "is this bundled?" question instead of repeating those buttons. */
.coaching-note[b-zq2d0wzkt7] {
    text-align: center;
}

.coaching-note__inner[b-zq2d0wzkt7] {
    max-width: 620px;
}

.coaching-note h2[b-zq2d0wzkt7] {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin-bottom: 10px;
}

.coaching-note p[b-zq2d0wzkt7] {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

@media (max-width: 760px) {
    .coaching-diff__grid[b-zq2d0wzkt7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Company/Contact.razor.rz.scp.css */
.contact-hub[b-2878r1idw7] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 160px 0 100px;
}

.contact-hub__inner[b-2878r1idw7] {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.contact-hub h1[b-2878r1idw7] {
    margin: 14px 0 12px;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.contact-hub__inner > p[b-2878r1idw7] {
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1.55;
}

.contact-hub__grid[b-2878r1idw7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 44px;
    text-align: left;
}

.contact-hub__card[b-2878r1idw7] {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.contact-hub__card:hover[b-2878r1idw7] {
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px rgba(20, 35, 45, .1);
    transform: translateY(-3px);
}

.contact-hub__icon[b-2878r1idw7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--color-bg-soft);
    color: var(--color-accent);
    font-size: 19px;
}

.contact-hub__card h2[b-2878r1idw7] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
}

.contact-hub__card p[b-2878r1idw7] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.55;
    flex-grow: 1;
}

.contact-hub__link[b-2878r1idw7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
}

@media (max-width: 640px) {
    .contact-hub[b-2878r1idw7] {
        padding: 132px 0 64px;
    }

    .contact-hub__grid[b-2878r1idw7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Company/ContactSales.razor.rz.scp.css */
.contact-sales__layout[b-pimpd6g2iq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 48px;
    align-items: start;
}

.contact-sales__aside[b-pimpd6g2iq] {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-sales__demo-card[b-pimpd6g2iq] {
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-soft);
    text-align: center;
}

.contact-sales__demo-icon[b-pimpd6g2iq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 21px;
}

.contact-sales__demo-card h3[b-pimpd6g2iq] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-sales__demo-card p[b-pimpd6g2iq] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.contact-sales__demo-card .btn[b-pimpd6g2iq] {
    width: 100%;
}

.contact-sales__email[b-pimpd6g2iq] {
    text-align: center;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.contact-sales__email a[b-pimpd6g2iq] {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 860px) {
    .contact-sales__layout[b-pimpd6g2iq] {
        grid-template-columns: 1fr;
    }

    .contact-sales__aside[b-pimpd6g2iq] {
        position: static;
        max-width: 420px;
    }
}
/* /Components/Pages/Company/Login.razor.rz.scp.css */
.login-page[b-b6tjidlcuv] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 60px;
    background: var(--color-bg-soft);
}

.login-card[b-b6tjidlcuv] {
    width: 100%;
    max-width: 380px;
    padding: 40px 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}

.login-card__logo[b-b6tjidlcuv] {
    display: inline-block;
    width: 120px;
    margin-bottom: 28px;
}

.login-card__logo img[b-b6tjidlcuv] {
    width: 100%;
}

.login-card h1[b-b6tjidlcuv] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.login-card > p[b-b6tjidlcuv] {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 28px;
}

.login-card__form[b-b6tjidlcuv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.login-card__form label[b-b6tjidlcuv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-card__form label span[b-b6tjidlcuv] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
}

.login-card__form input[b-b6tjidlcuv] {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
}

.login-card__form input:focus[b-b6tjidlcuv] {
    outline: none;
    border-color: var(--color-accent);
}

.login-card__form .btn[b-b6tjidlcuv] {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.login-card__sso[b-b6tjidlcuv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.login-card__sso:hover[b-b6tjidlcuv] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.login-card__foot[b-b6tjidlcuv] {
    margin-top: 24px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.login-card__foot a[b-b6tjidlcuv] {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}
/* /Components/Pages/Company/Next.razor.rz.scp.css */
/* A distinct dark "manifesto" header instead of the standard light
   PageHero — this is an essay/opinion page, not a product page, so it
   gets its own quieter, editorial-feeling identity. */
.next-hero[b-60xjf0j0i1] {
    padding: calc(var(--header-height) + 96px) 0 72px;
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    color: #fff;
    text-align: center;
}

.next-hero__inner[b-60xjf0j0i1] {
    max-width: 680px;
    margin: 0 auto;
}

.next-hero__badge[b-60xjf0j0i1] {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.next-hero h1[b-60xjf0j0i1] {
    margin: 0 0 16px;
    font-size: clamp(32px, 4.2vw, 50px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.next-hero p[b-60xjf0j0i1] {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
}

.next-body__inner[b-60xjf0j0i1] {
    max-width: 680px;
    margin: 0 auto;
}

.next-body h2[b-60xjf0j0i1] {
    margin: 48px 0 16px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.next-body h2:first-child[b-60xjf0j0i1] {
    margin-top: 0;
}

.next-body p[b-60xjf0j0i1] {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.next-body__cta[b-60xjf0j0i1] {
    margin-top: 56px;
    padding: 36px 40px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    text-align: center;
}

.next-body__cta h3[b-60xjf0j0i1] {
    margin: 0 0 20px;
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 700;
    letter-spacing: -.01em;
}

.next-body__cta-actions[b-60xjf0j0i1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .next-hero[b-60xjf0j0i1] {
        padding: calc(var(--header-height) + 40px) 0 48px;
    }

    .next-body__cta[b-60xjf0j0i1] {
        padding: 28px 24px;
    }
}
/* /Components/Pages/Company/Privacy.razor.rz.scp.css */
.legal__inner[b-7t7ak4wok2] {
    max-width: 760px;
}

.legal__updated[b-7t7ak4wok2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-bottom: 24px;
}

.legal h2[b-7t7ak4wok2] {
    margin: 40px 0 12px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.legal h2:first-of-type[b-7t7ak4wok2] {
    margin-top: 32px;
}

.legal h3[b-7t7ak4wok2] {
    margin: 24px 0 10px;
    font-size: 16px;
    font-weight: 700;
}

.legal p[b-7t7ak4wok2] {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.legal a[b-7t7ak4wok2] {
    color: var(--color-accent);
    text-decoration: none;
}

.legal a:hover[b-7t7ak4wok2] {
    text-decoration: underline;
}
/* /Components/Pages/Company/ProductTour.razor.rz.scp.css */
/* Same dark gradient treatment as the home page's .ai-showcase wrapper
   (Home.razor.css) around this same NavatticDemoSection component — the
   device mockup's copy/overlay are styled for a dark background. */
.product-tour-demo[b-jygft3qi9j] {
    padding: 100px 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(0, 159, 255, .12), transparent 36%),
        #0b0f13;
}

/* This section now opens the page directly (no SubPageHero above it
   anymore), so it needs to clear the fixed .site-header itself. */
.product-tour-demo--first[b-jygft3qi9j] {
    padding-top: calc(var(--header-height) + 64px);
}

@media (max-width: 900px) {
    .product-tour-demo[b-jygft3qi9j] {
        padding: 56px 0;
    }

    .product-tour-demo--first[b-jygft3qi9j] {
        padding-top: calc(var(--header-height) + 40px);
    }
}
/* /Components/Pages/Company/Rollout.razor.rz.scp.css */
.rollout-intro__inner[b-zc70h8n6x0] {
    max-width: 720px;
    text-align: center;
}

.rollout-intro__inner .section-eyebrow[b-zc70h8n6x0] {
    justify-content: center;
}

.rollout-intro h2[b-zc70h8n6x0] {
    margin: 14px 0 14px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.rollout-intro p[b-zc70h8n6x0] {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* Timeline: a numbered list, same rhythm as the implementation timeline
   on the home page, but with a week range and a short bullet list per
   phase since there's more to say about each one here. */
.rollout-timeline__list[b-zc70h8n6x0] {
    list-style: none;
    margin: 44px 0 0;
    border-top: 1px solid var(--color-border-light);
}

.rollout-timeline__step[b-zc70h8n6x0] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.rollout-timeline__num[b-zc70h8n6x0] {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    padding-top: 3px;
}

.rollout-timeline__heading[b-zc70h8n6x0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.rollout-timeline__heading h3[b-zc70h8n6x0] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

.rollout-timeline__weeks[b-zc70h8n6x0] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.rollout-timeline__step ul[b-zc70h8n6x0] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rollout-timeline__step li[b-zc70h8n6x0] {
    position: relative;
    padding-left: 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.rollout-timeline__step li[b-zc70h8n6x0]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-border);
}

/* Team split: two cards, one per side, so it reads as a shared
   responsibility rather than a one-sided task list. */
.rollout-roles__grid[b-zc70h8n6x0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.rollout-roles__card[b-zc70h8n6x0] {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-soft);
}

.rollout-roles__card.is-essembi[b-zc70h8n6x0] {
    background: #fff;
    border-color: var(--color-accent);
}

.rollout-roles__card h3[b-zc70h8n6x0] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 6px;
}

.rollout-roles__role[b-zc70h8n6x0] {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 16px;
}

.rollout-roles__card ul[b-zc70h8n6x0] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rollout-roles__card li[b-zc70h8n6x0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.rollout-roles__card li i[b-zc70h8n6x0] {
    color: var(--color-accent);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Closing pointer to Coaching — dark, matching the site's other
   dark closing callouts, so it reads as a deliberate handoff. */
.rollout-next[b-zc70h8n6x0] {
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    color: #fff;
}

.rollout-next__inner[b-zc70h8n6x0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.rollout-next__inner > div[b-zc70h8n6x0] {
    max-width: 560px;
}

.rollout-next h2[b-zc70h8n6x0] {
    margin: 12px 0 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.rollout-next p[b-zc70h8n6x0] {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.rollout-next .section-eyebrow .label[b-zc70h8n6x0] {
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 760px) {
    .rollout-roles__grid[b-zc70h8n6x0] {
        grid-template-columns: 1fr;
    }

    .rollout-timeline__step[b-zc70h8n6x0] {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 14px;
    }
}
/* /Components/Pages/Features/Ai.razor.rz.scp.css */
.ai-twin__inner[b-xlkzjhg1mk] {
    max-width: 760px;
    text-align: center;
}

.ai-twin__inner .section-eyebrow[b-xlkzjhg1mk] {
    justify-content: center;
}

.ai-twin h2[b-xlkzjhg1mk] {
    margin: 14px 0 16px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.ai-twin p[b-xlkzjhg1mk] {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin-bottom: 22px;
}

.ai-twin__link[b-xlkzjhg1mk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

.ai-twin__link:hover[b-xlkzjhg1mk] {
    gap: 12px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Wraps the two AI spotlight sections and the interactive demo in one
   continuous dark gradient panel. A generous gap between each piece —
   these previously read as smashed together — plus extra room again
   right before the demo device, since it's a different kind of visual
   (a device mockup, not a chat card) and benefits from its own beat. */
.ai-showcase[b-hav1j0b5ua] {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 120px 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(0, 159, 255, .12), transparent 36%),
        #0b0f13;
}

/* `::deep` is required: .product-reveal is rendered by the child
   NavatticDemoSection component, so it carries that component's own
   CSS-isolation scope attribute, not this page's — a plain scoped
   selector here would silently never match it. */
.ai-showcase[b-hav1j0b5ua]  .product-reveal {
    margin-top: 120px;
}

@media (max-width: 900px) {
    .ai-showcase[b-hav1j0b5ua] {
        gap: 64px;
        padding: 64px 0;
    }

    .ai-showcase[b-hav1j0b5ua]  .product-reveal {
        margin-top: 64px;
    }
}
/* /Components/Pages/Mockups/QualityMockup.razor.rz.scp.css */
/* Visible only on this draft route, so whoever lands here (from a
   direct link) knows immediately it isn't the live page. Sits just below
   the fixed site header rather than pinned to the very top, since the
   header itself already claims that spot on every page. */
.mockup-ribbon[b-dzbgotpwka] {
    margin-top: var(--header-height);
    text-align: center;
    padding: 8px 16px;
    background: #fff3cd;
    color: #664d03;
    font-size: 12.5px;
    font-weight: 600;
}

.section-block[b-dzbgotpwka] {
    padding: 88px 0;
}

/* ---- Hero ---- */
.mock-hero[b-dzbgotpwka] {
    padding-top: 48px;
}

.mock-hero__layout[b-dzbgotpwka] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
}

.mock-hero__copy h1[b-dzbgotpwka] {
    margin: 14px 0 18px;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.mock-hero__sub[b-dzbgotpwka] {
    max-width: 480px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.mock-hero__actions[b-dzbgotpwka] {
    display: flex;
    gap: 12px;
}

/* ---- Fear / Hope, paired with a screenshot ---- */
.mock-loop[b-dzbgotpwka] {
    background: var(--color-bg-soft);
}

.mock-loop__layout[b-dzbgotpwka] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
}

.mock-loop__copy[b-dzbgotpwka] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mock-loop__tag[b-dzbgotpwka] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mock-loop__tag--fear[b-dzbgotpwka] {
    color: #b3261e;
}

.mock-loop__tag--hope[b-dzbgotpwka] {
    color: var(--color-accent);
}

.mock-loop__point h3[b-dzbgotpwka] {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}

.mock-loop__point p[b-dzbgotpwka] {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* ---- Benefits, anchored to a screenshot instead of an icon grid ---- */
.mock-benefits__layout[b-dzbgotpwka] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
}

.mock-benefits__copy h2[b-dzbgotpwka] {
    margin: 14px 0 14px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.mock-benefits__sub[b-dzbgotpwka] {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.mock-benefits__list[b-dzbgotpwka] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mock-benefits__list li[b-dzbgotpwka] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.mock-benefits__list strong[b-dzbgotpwka] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}

.mock-benefits__list li > span:last-child > span:last-child[b-dzbgotpwka] {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.mock-benefits__icon[b-dzbgotpwka] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-bg-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* ---- Breakdown rows, same alternating layout as the live page, just
   with every screenshot in the shared window frame ---- */
.mock-breakdown__row[b-dzbgotpwka] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.mock-breakdown__row + .mock-breakdown__row[b-dzbgotpwka] {
    margin-top: 80px;
}

.mock-breakdown__row.is-reversed[b-dzbgotpwka] {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.mock-breakdown__row.is-reversed .mock-breakdown__copy[b-dzbgotpwka] {
    order: 2;
}

.mock-breakdown__row.is-reversed .mock-breakdown__visual[b-dzbgotpwka] {
    order: 1;
}

.mock-breakdown__copy h2[b-dzbgotpwka] {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    margin: 14px 0 20px;
}

.mock-breakdown__list[b-dzbgotpwka] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mock-breakdown__list li[b-dzbgotpwka] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.mock-breakdown__list li i[b-dzbgotpwka] {
    color: var(--color-accent);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ---- Explore more: plain understated links, not icon cards, so it
   reads as "further reading" rather than competing with the real
   screenshots above for attention ---- */
.mock-explore__inner h2[b-dzbgotpwka] {
    margin: 14px 0 32px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    max-width: 560px;
}

.mock-explore__links[b-dzbgotpwka] {
    display: flex;
    flex-direction: column;
}

.mock-explore__link[b-dzbgotpwka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--color-text);
    transition: gap .15s ease, color .15s ease;
}

.mock-explore__links .mock-explore__link:last-child[b-dzbgotpwka] {
    border-bottom: 1px solid var(--color-border-light);
}

.mock-explore__link:hover[b-dzbgotpwka] {
    gap: 30px;
    color: var(--color-accent);
}

.mock-explore__link strong[b-dzbgotpwka] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
}

.mock-explore__link small[b-dzbgotpwka] {
    display: block;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.mock-explore__link i[b-dzbgotpwka] {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--color-text-subtle);
}

/* ---- Closing CTA band ---- */
.mock-cta[b-dzbgotpwka] {
    background: #0a0b0c;
    color: #fff;
}

.mock-cta__inner[b-dzbgotpwka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.mock-cta__inner h2[b-dzbgotpwka] {
    max-width: 480px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.mock-cta__inner p[b-dzbgotpwka] {
    max-width: 480px;
    color: #b7bcc2;
    font-size: 15.5px;
    line-height: 1.6;
}

.mock-cta__actions[b-dzbgotpwka] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .mock-hero__layout[b-dzbgotpwka],
    .mock-loop__layout[b-dzbgotpwka],
    .mock-benefits__layout[b-dzbgotpwka],
    .mock-breakdown__row[b-dzbgotpwka],
    .mock-breakdown__row.is-reversed[b-dzbgotpwka] {
        grid-template-columns: 1fr;
    }

    .mock-breakdown__row.is-reversed .mock-breakdown__copy[b-dzbgotpwka],
    .mock-breakdown__row.is-reversed .mock-breakdown__visual[b-dzbgotpwka] {
        order: initial;
    }

    .section-block[b-dzbgotpwka] {
        padding: 56px 0;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-sp8xfptvqg] {
    padding: calc(var(--header-height) + 88px) 0 110px;
    text-align: center;
}

.not-found__inner[b-sp8xfptvqg] {
    max-width: 620px;
    margin: 0 auto;
}

.not-found .section-eyebrow[b-sp8xfptvqg] {
    justify-content: center;
}

.not-found h1[b-sp8xfptvqg] {
    margin: 0 0 16px;
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.not-found p[b-sp8xfptvqg] {
    margin: 0 auto;
    max-width: 520px;
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1.6;
}

/* The red "404" box from the live essembi.com 404 page — matched to its
   actual computed styles (light red fill, solid red border, red digits)
   rather than approximated. */
.not-found__numeral[b-sp8xfptvqg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 175px;
    margin: 36px auto 0;
    border: 2px solid #ff0000;
    border-radius: 8px;
    background: rgba(255, 0, 0, .1);
    color: #ff0000;
    font-size: 64px;
    font-weight: 600;
}

/* ::deep required: BrandButton is a child component, so the <a>/<button>
   it renders carries BrandButton's own CSS-isolation scope attribute,
   not this page's — a plain scoped selector here would never match it. */
.not-found[b-sp8xfptvqg]  .not-found__home {
    margin-top: 50px;
}

@media (max-width: 640px) {
    .not-found[b-sp8xfptvqg] {
        padding: calc(var(--header-height) + 48px) 0 72px;
    }

    .not-found__numeral[b-sp8xfptvqg] {
        margin-top: 24px;
    }

    .not-found[b-sp8xfptvqg]  .not-found__home {
        margin-top: 32px;
    }
}
/* /Components/Pages/Resources/BlogPostPage.razor.rz.scp.css */
/* .blog-post* rules moved to wwwroot/app.css — this layout is shared
   with Components/Pages/Resources/ProductAnnouncementPostPage.razor,
   and Blazor's per-component CSS scoping means a scoped rule here
   would only ever match elements this component renders, not the
   identical markup rendered by that other page. See the comment above
   the rules in app.css. */
/* /Components/Pages/Resources/Faq.razor.rz.scp.css */
.faq-next[b-8cug2ublyr] {
    padding-top: 0;
}

.faq-next__card[b-8cug2ublyr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 40px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    flex-wrap: wrap;
}

.faq-next__card h2[b-8cug2ublyr] {
    max-width: 420px;
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.faq-next__card p[b-8cug2ublyr] {
    max-width: 420px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.faq-next__card .btn[b-8cug2ublyr] {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .faq-next__card[b-8cug2ublyr] {
        padding: 26px 24px;
    }
}
/* /Components/Pages/Resources/Help.razor.rz.scp.css */
.docs-home[b-v019k14oim] {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 32px 0;
}

.docs-home h1[b-v019k14oim] {
    margin: 14px 0 10px;
    font-size: clamp(30px, 3.6vw, 40px);
    font-weight: 700;
    letter-spacing: -.03em;
}

.docs-home > p[b-v019k14oim] {
    max-width: 560px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.6;
}

.docs-home__grid[b-v019k14oim] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 36px;
}

/* The site's standard icon-badge card (same shape as .related-card /
   .industry-card): icon left, title + one-line description right,
   rather than a bare title with a joined list of child pages. */
.docs-home__card[b-v019k14oim] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.docs-home__card:hover[b-v019k14oim] {
    border-color: var(--color-accent);
    box-shadow: 0 10px 24px rgba(20, 35, 45, .08);
}

.docs-home__card:hover .docs-home__icon[b-v019k14oim] {
    background: #fff;
}

.docs-home__icon[b-v019k14oim] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--color-bg-soft);
    color: var(--color-accent);
    font-size: 16px;
}

.docs-home__card h3[b-v019k14oim] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.docs-home__card p[b-v019k14oim] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12.5px;
    line-height: 1.4;
    /* Descriptions vary a little in length — clamp to 2 lines so every
       card takes up the same footprint regardless. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 700px) {
    .docs-home__grid[b-v019k14oim] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 460px) {
    .docs-home__grid[b-v019k14oim] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Resources/HelpArticlePage.razor.rz.scp.css */
.docs-article-layout[b-6g1c9o13pv] {
    display: grid;
    grid-template-columns: minmax(0, 760px) 220px;
    gap: 56px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 32px 0;
}

.docs-article h1[b-6g1c9o13pv] {
    margin: 0 0 28px;
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.docs-article h2[b-6g1c9o13pv] {
    margin: 40px 0 14px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    scroll-margin-top: 84px;
}

.docs-article h2:first-of-type[b-6g1c9o13pv] {
    margin-top: 0;
}

.docs-article h3[b-6g1c9o13pv] {
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 700;
    scroll-margin-top: 84px;
}

.docs-article h4[b-6g1c9o13pv] {
    margin: 20px 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    scroll-margin-top: 84px;
}

.docs-article p[b-6g1c9o13pv] {
    margin: 0 0 14px;
    color: #333;
    font-size: 15px;
    line-height: 1.7;
}

.docs-article ul[b-6g1c9o13pv],
.docs-article ol[b-6g1c9o13pv] {
    margin: 0 0 14px;
    padding-left: 20px;
    color: #333;
    font-size: 15px;
    line-height: 1.65;
}

.docs-article li[b-6g1c9o13pv] {
    margin-bottom: 8px;
}

.docs-article li:last-child[b-6g1c9o13pv] {
    margin-bottom: 0;
}

/* .docs-article__code, inline <code>/<a> styling, and the nested-<ul>
   rule all moved to wwwroot/app.css — see the comment there. Article
   content (EdgeDevicesArticle and any future one using inline HTML)
   renders through @((MarkupString)...), and Blazor's scoped-CSS
   attribute is only added to elements the Razor compiler actually sees
   in this component's own markup — it never reaches into raw HTML
   injected via MarkupString, so a scoped rule here would silently
   never match any <a>/<code>/<pre>/<ul> inside that content. */

.docs-article--missing[b-6g1c9o13pv] {
    max-width: 640px;
    margin: 0 auto;
    padding: 80px 32px;
    text-align: center;
}

.docs-toc[b-6g1c9o13pv] {
    position: sticky;
    top: 84px;
}

.docs-toc__inner[b-6g1c9o13pv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--color-border-light);
}

.docs-toc__link[b-6g1c9o13pv] {
    padding: 5px 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.docs-toc__link.is-sub[b-6g1c9o13pv] {
    padding-left: 14px;
    font-size: 12.5px;
    color: var(--color-text-subtle);
}

.docs-toc__link:hover[b-6g1c9o13pv] {
    color: var(--color-accent);
}

@media (max-width: 900px) {
    .docs-article-layout[b-6g1c9o13pv] {
        grid-template-columns: 1fr;
        padding: 28px 20px 0;
    }

    .docs-toc[b-6g1c9o13pv] {
        display: none;
    }
}
/* /Components/Pages/Resources/WhatIsOee.razor.rz.scp.css */
.oee-next[b-amri7cx3kx] {
    padding-top: 0;
}

.oee-next__card[b-amri7cx3kx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 36px 40px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    flex-wrap: wrap;
}

.oee-next__card h2[b-amri7cx3kx] {
    max-width: 480px;
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.oee-next__card p[b-amri7cx3kx] {
    max-width: 480px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.oee-next__card .btn[b-amri7cx3kx] {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .oee-next__card[b-amri7cx3kx] {
        padding: 26px 24px;
    }
}
/* /Components/Sections/AiSpotlightSection.razor.rz.scp.css */
/* No padding or background of its own — the home page's .ai-showcase
   wrapper (Home.razor.css) supplies the shared dark gradient background
   and the spacing between this, its sibling instance, and the demo
   section. */
.ai-spotlight[b-1p4d7g6jqc] {
    color: #fff;
}

.ai-spotlight__layout[b-1p4d7g6jqc] {
    display: flex;
    align-items: center;
    gap: 56px;
}

.ai-spotlight__copy[b-1p4d7g6jqc] {
    flex: 0 0 auto;
    width: 40%;
    max-width: 440px;
}

.ai-spotlight__copy .section-eyebrow .label[b-1p4d7g6jqc] {
    color: rgba(255, 255, 255, .7);
}

.ai-spotlight__copy h2[b-1p4d7g6jqc] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
}

.ai-spotlight__copy p[b-1p4d7g6jqc] {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 28px;
}

/* The widget: a self-contained chat mock, not a live component — a
   question, a real-looking answer with a compact data table, and an
   input bar styled after the "type your own question" pattern this was
   modeled on, minus the gate. */
.ai-spotlight__widget[b-1p4d7g6jqc] {
    flex: 1;
    min-width: 0;
    max-width: 560px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.ai-spotlight__thread[b-1p4d7g6jqc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

/* Briefing mode's stand-in for a typed prompt: a labeled trigger,
   top-left, rather than a chat bubble — this is what actually starts
   the briefing, not a question someone had to think to ask. */
.ai-spotlight__trigger[b-1p4d7g6jqc] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}

.ai-spotlight__trigger i[b-1p4d7g6jqc] {
    color: var(--color-accent);
    font-size: 14px;
}

.ai-spotlight__msg--user[b-1p4d7g6jqc] {
    align-self: flex-end;
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px 14px 3px 14px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.45;
}

.ai-spotlight__msg--ai[b-1p4d7g6jqc] {
    padding: 14px 16px;
    border-radius: 3px 14px 14px 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    font-size: 13.5px;
    line-height: 1.5;
}

.ai-spotlight__msg--ai p[b-1p4d7g6jqc] {
    margin: 0 0 10px;
}

.ai-spotlight__table[b-1p4d7g6jqc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.ai-spotlight__table th[b-1p4d7g6jqc] {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.ai-spotlight__table td[b-1p4d7g6jqc] {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .92);
}

/* A quick-scan status dot ahead of each row's label — red for the
   biggest concern, yellow for worth a caution, black/neutral for a
   plain informational reading (not a fault). */
.ai-spotlight__dot[b-1p4d7g6jqc] {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ai-spotlight__dot--red[b-1p4d7g6jqc] {
    background: #f04438;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, .18);
}

.ai-spotlight__dot--yellow[b-1p4d7g6jqc] {
    background: #f5c344;
    box-shadow: 0 0 0 3px rgba(245, 195, 68, .18);
}

.ai-spotlight__dot--black[b-1p4d7g6jqc] {
    background: #111;
    border: 1.5px solid rgba(255, 255, 255, .55);
    width: 6px;
    height: 6px;
}

.ai-spotlight__table tr:last-child td[b-1p4d7g6jqc] {
    border-bottom: none;
}

.ai-spotlight__table th:last-child[b-1p4d7g6jqc],
.ai-spotlight__table td:last-child[b-1p4d7g6jqc] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .6);
}

.ai-spotlight__input[b-1p4d7g6jqc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.ai-spotlight__plus[b-1p4d7g6jqc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
}

.ai-spotlight__placeholder[b-1p4d7g6jqc] {
    flex: 1;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .45);
}

.ai-spotlight__submit[b-1p4d7g6jqc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-navy);
    font-size: 14px;
}

@media (max-width: 900px) {
    .ai-spotlight__layout[b-1p4d7g6jqc] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .ai-spotlight__copy[b-1p4d7g6jqc] {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .ai-spotlight__copy .section-eyebrow[b-1p4d7g6jqc] {
        justify-content: center;
    }

    .ai-spotlight__copy p[b-1p4d7g6jqc] {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .ai-spotlight__widget[b-1p4d7g6jqc] {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .ai-spotlight__msg--user[b-1p4d7g6jqc] {
        max-width: 92%;
    }
}
/* /Components/Sections/BenefitsGridSection.razor.rz.scp.css */
.benefits__grid[b-sh2jcdi3kh] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.benefits__card[b-sh2jcdi3kh] {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
}

.benefits__icon[b-sh2jcdi3kh] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--color-bg-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.benefits__card h3[b-sh2jcdi3kh] {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.benefits__card p[b-sh2jcdi3kh] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

@media (max-width: 1000px) {
    .benefits__grid[b-sh2jcdi3kh] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .benefits__grid[b-sh2jcdi3kh] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/BlogCardGridSection.razor.rz.scp.css */
.blog-grid[b-qbn8rw2m3l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-grid__card[b-qbn8rw2m3l] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.blog-grid__card:hover[b-qbn8rw2m3l] {
    border-color: var(--color-border);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

/* Matches the source images' own ratio (1200x628, a standard OG-image
   crop) so object-fit: cover doesn't crop meaningful content — logos and
   headline text sit close to the left/right edges on these — off the
   sides trying to force a narrower ratio. */
.blog-grid__media[b-qbn8rw2m3l] {
    aspect-ratio: 1200 / 628;
    overflow: hidden;
    background: var(--color-bg-soft);
}

.blog-grid__media img[b-qbn8rw2m3l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.blog-grid__card:hover .blog-grid__media img[b-qbn8rw2m3l] {
    transform: scale(1.04);
}

.blog-grid__body[b-qbn8rw2m3l] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

.blog-grid__body h3[b-qbn8rw2m3l] {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    margin-bottom: 8px;
}

.blog-grid__body p[b-qbn8rw2m3l] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.blog-grid__link[b-qbn8rw2m3l] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-accent);
}

@media (max-width: 980px) {
    .blog-grid:not(.blog-grid--list)[b-qbn8rw2m3l] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-grid:not(.blog-grid--list)[b-qbn8rw2m3l] {
        grid-template-columns: 1fr;
    }
}

/* List layout: one column of wide rows — a fixed-width thumbnail next to
   the title/excerpt — for a "related reading" strip or sidebar rather
   than a full card index. */
.blog-grid--list[b-qbn8rw2m3l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-grid--list .blog-grid__card[b-qbn8rw2m3l] {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
    background: none;
}

.blog-grid--list .blog-grid__card:hover[b-qbn8rw2m3l] {
    box-shadow: none;
    transform: none;
    background: var(--color-bg-soft);
}

.blog-grid--list .blog-grid__media[b-qbn8rw2m3l] {
    flex: 0 0 140px;
    aspect-ratio: 1200 / 628;
    border-radius: var(--radius);
}

.blog-grid--list .blog-grid__body[b-qbn8rw2m3l] {
    padding: 16px 16px 16px 0;
}

.blog-grid--list .blog-grid__body p[b-qbn8rw2m3l] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

@media (max-width: 520px) {
    .blog-grid--list .blog-grid__media[b-qbn8rw2m3l] {
        flex-basis: 90px;
    }

    .blog-grid--list .blog-grid__body p[b-qbn8rw2m3l] {
        display: none;
    }
}
/* /Components/Sections/CaseStudySection.razor.rz.scp.css */
.case-carousel__head[b-gdi66v7g8k] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.case-carousel__head .section-heading[b-gdi66v7g8k] {
    margin-bottom: 0;
}

.case-carousel__controls[b-gdi66v7g8k] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.case-carousel__arrow[b-gdi66v7g8k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.case-carousel__arrow:hover[b-gdi66v7g8k] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.case-carousel__track[b-gdi66v7g8k] {
    display: flex;
    gap: 20px;
    margin-top: 32px;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.case-carousel__track[b-gdi66v7g8k]::-webkit-scrollbar {
    display: none;
}

.case-card[b-gdi66v7g8k] {
    position: relative;
    flex: 0 0 min(560px, 84vw);
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: var(--shadow);
}

.case-card.is-photo[b-gdi66v7g8k]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2,5,9,.94) 0%, rgba(2,5,9,.55) 45%, rgba(2,5,9,.12) 72%);
}

.case-card.is-plain[b-gdi66v7g8k] {
    background: linear-gradient(135deg, #0c0e11 0%, #1d2227 100%);
}

.case-card__glyph[b-gdi66v7g8k] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 72px;
    color: rgba(255, 255, 255, .1);
}

.case-card__avatar[b-gdi66v7g8k] {
    position: absolute;
    top: 32%;
    left: 50%;
    width: 104px;
    height: 104px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.case-card__badge[b-gdi66v7g8k] {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 18px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .92);
    color: #111417;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
}

.case-card__copy[b-gdi66v7g8k] {
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    bottom: 22px;
    color: #fff;
}

.case-card__copy p[b-gdi66v7g8k] {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 16px;
}

.case-card__meta[b-gdi66v7g8k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.case-card__meta > span:first-child[b-gdi66v7g8k] {
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
}

.case-card__link[b-gdi66v7g8k] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 700px) {
    .case-carousel__head[b-gdi66v7g8k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .case-card[b-gdi66v7g8k] {
        flex-basis: 88vw;
    }

    .case-card__copy p[b-gdi66v7g8k] {
        font-size: 14px;
        line-height: 1.45;
    }
}
/* /Components/Sections/ComparisonTableSection.razor.rz.scp.css */
.comparison-table__wrap[b-8w18aztk50] {
    margin-top: 32px;
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.comparison-table__table[b-8w18aztk50] {
    width: 100%;
    min-width: 480px;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Tighter, fixed proportions instead of three loosely-equal thirds — the
   label needs the room, the two mark columns don't. */
.comparison-table__col-label[b-8w18aztk50] {
    width: 46%;
}

.comparison-table__col-mark[b-8w18aztk50] {
    width: 27%;
}

.comparison-table__table th[b-8w18aztk50],
.comparison-table__table td[b-8w18aztk50] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: center;
}

.comparison-table__table tr:last-child td[b-8w18aztk50] {
    border-bottom: none;
}

.comparison-table__table thead th[b-8w18aztk50] {
    background: var(--color-bg-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* The Essembi column reads as "the winning column" the way the legacy
   essembi.com comparison pages did — a light accent wash the full height
   of the table, not just a colored header label. Same specificity as the
   thead rule above (one class + one element each), so source order alone
   decides — this comes after it, so it wins there without an !important. */
.comparison-table__table th.comparison-table__essembi-col[b-8w18aztk50] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.comparison-table__table td.comparison-table__essembi-col[b-8w18aztk50] {
    background: var(--color-accent-soft);
}

.comparison-table__essembi-label[b-8w18aztk50] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comparison-table__essembi-col img[b-8w18aztk50] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.comparison-table__label[b-8w18aztk50] {
    text-align: left;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text);
}

.comparison-table__mark-row[b-8w18aztk50] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.comparison-table__mark i[b-8w18aztk50] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 13px;
    flex-shrink: 0;
}

.comparison-table__mark.is-yes i[b-8w18aztk50] {
    background: rgba(34, 197, 94, .14);
    color: #15803d;
}

.comparison-table__mark.is-partial i[b-8w18aztk50] {
    background: rgba(234, 179, 8, .16);
    color: #a16207;
}

/* Not included: a solid, unmistakably red mark — a pale 10%-opacity tint
   read as "basically invisible" rather than "unsupported". */
.comparison-table__mark.is-no i[b-8w18aztk50] {
    background: #ef4444;
    color: #fff;
}

.comparison-table__learn-more[b-8w18aztk50] {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.comparison-table__learn-more:hover[b-8w18aztk50] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

@media (max-width: 640px) {
    /* The table only needs to scroll at all because of the fixed
       480px min-width below — drop that and let the label column wrap
       instead, so all three columns fit the screen without scrolling. */
    .comparison-table__table[b-8w18aztk50] {
        min-width: 0;
    }

    .comparison-table__table th[b-8w18aztk50],
    .comparison-table__table td[b-8w18aztk50] {
        padding: 10px 6px;
    }

    .comparison-table__table th:first-child[b-8w18aztk50],
    .comparison-table__table td:first-child[b-8w18aztk50] {
        padding-left: 12px;
    }

    .comparison-table__label[b-8w18aztk50] {
        white-space: normal;
        font-size: 13px;
        line-height: 1.3;
    }

    .comparison-table__mark-row[b-8w18aztk50] {
        flex-direction: column;
        gap: 4px;
    }

    .comparison-table__mark i[b-8w18aztk50] {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .comparison-table__learn-more[b-8w18aztk50] {
        padding: 2px 7px;
        font-size: 10px;
    }
}
/* /Components/Sections/ContactOptionsSection.razor.rz.scp.css */
.contact-panel__inner[b-1u01q65bl7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.contact-panel__card[b-1u01q65bl7] {
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    text-align: center;
}

.contact-panel__card i[b-1u01q65bl7] {
    font-size: 30px;
    color: var(--color-accent);
    margin-bottom: 16px;
    display: inline-block;
}

.contact-panel__card h3[b-1u01q65bl7] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-panel__card p[b-1u01q65bl7] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .contact-panel__inner[b-1u01q65bl7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/ContactSalesFormSection.razor.rz.scp.css */
.contact-sales__form-col h2[b-n0bw5c48b0] {
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

.contact-sales__hint[b-n0bw5c48b0] {
    font-size: 14.5px;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.contact-sales__form-col form[b-n0bw5c48b0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-sales__row[b-n0bw5c48b0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.contact-sales__form-col label[b-n0bw5c48b0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

.contact-sales__form-col label span[b-n0bw5c48b0] {
    color: #d64545;
}

/* input/select/textarea/.validation-message styling for this form lives
   in wwwroot/app.css, not here — see the comment there. Blazor's scoped
   CSS attribute is only injected into elements this component's own
   .razor markup renders directly; InputText/InputSelect/InputTextArea/
   ValidationMessage are child components from the framework, so the
   <input>/<select>/<textarea> they render never carry it, and a scoped
   rule here silently never matches them. */

.contact-sales__form-col button[type="submit"][b-n0bw5c48b0] {
    align-self: flex-start;
    margin-top: 4px;
}

.contact-sales__success[b-n0bw5c48b0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
}

.contact-sales__success i[b-n0bw5c48b0] {
    font-size: 22px;
    color: var(--color-accent);
    margin-top: 2px;
}

.contact-sales__success h3[b-n0bw5c48b0] {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.contact-sales__success p[b-n0bw5c48b0] {
    font-size: 14px;
    color: var(--color-text-muted);
}

@media (max-width: 560px) {
    .contact-sales__row[b-n0bw5c48b0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/ContractManufacturingCallout.razor.rz.scp.css */
.contract-callout__card[b-5fapsr59o3] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: center;
    padding: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    box-shadow: 0 24px 60px rgba(0, 159, 255, .18), 0 2px 8px rgba(0, 0, 0, .2);
    overflow: hidden;
}

/* A soft accent glow bleeding in from the top-right corner, so the card
   reads as a lit-up feature rather than a flat block of navy. */
.contract-callout__glow[b-5fapsr59o3] {
    position: absolute;
    top: -120px;
    right: -80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 159, 255, .35) 0%, transparent 70%);
    pointer-events: none;
}

.contract-callout__copy[b-5fapsr59o3] {
    position: relative;
}

.contract-callout__badge[b-5fapsr59o3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 16px 7px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.contract-callout__badge i[b-5fapsr59o3] {
    color: var(--color-accent);
    font-size: 14px;
}

.contract-callout__copy h2[b-5fapsr59o3] {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: #fff;
}

.contract-callout__copy > p[b-5fapsr59o3] {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    max-width: 480px;
}

.contract-callout__list[b-5fapsr59o3] {
    position: relative;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(2px);
}

.contract-callout__list li[b-5fapsr59o3] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.contract-callout__check[b-5fapsr59o3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(0, 159, 255, .18);
}

@media (max-width: 860px) {
    .contract-callout__card[b-5fapsr59o3] {
        grid-template-columns: 1fr;
        padding: 36px 28px;
        gap: 28px;
    }
}

@media (max-width: 640px) {
    .contract-callout__card[b-5fapsr59o3] {
        padding: 28px 22px;
    }
}
/* /Components/Sections/CustomerLogosSection.razor.rz.scp.css */
.customers[b-or5me6lyix] { background: #f5f7f8; }

.customers-lede[b-or5me6lyix] {
    max-width: 560px;
    margin: -8px auto 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.customers-grid[b-or5me6lyix] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    margin-top: 40px;
}

.customers-item[b-or5me6lyix] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 12px;
    border: 1px solid #e5eaed;
    border-radius: 14px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.customers-item:hover[b-or5me6lyix] {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(20,35,45,.1);
}

.customers-item img[b-or5me6lyix] {
    max-height: 136px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .customers-grid[b-or5me6lyix] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .customers-grid[b-or5me6lyix] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customers-item[b-or5me6lyix] {
        min-height: 96px;
    }
}
/* /Components/Sections/FaqSection.razor.rz.scp.css */
.faq__inner[b-5vx057z67n] {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq__item[b-5vx057z67n] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
}

.faq__item summary[b-5vx057z67n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    cursor: pointer;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--color-text);
    list-style: none;
}

/* Hide the browser's own default disclosure triangle so only our
   plus/rotate icon shows. */
.faq__item summary[b-5vx057z67n]::-webkit-details-marker {
    display: none;
}

.faq__item-icon[b-5vx057z67n] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 13px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.faq__item[open] .faq__item-icon[b-5vx057z67n] {
    transform: rotate(135deg);
}

.faq__item summary:hover .faq__item-icon[b-5vx057z67n] {
    background: var(--color-accent);
    color: #fff;
}

.faq__item p[b-5vx057z67n] {
    margin: 0;
    padding: 0 22px 22px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* A quiet fade-and-drop for the answer instead of the default instant
   snap open — details/summary has no native transition for its own
   open state, but animating the child content on load reads close
   enough without needing any JS. */
@keyframes faq-answer-in-b-5vx057z67n {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq__item[open] p[b-5vx057z67n] {
    animation: faq-answer-in-b-5vx057z67n .2s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .faq__item[open] p[b-5vx057z67n] { animation: none; }
}
/* /Components/Sections/FeatureBreakdownSection.razor.rz.scp.css */
.breakdown__row[b-klqauu7son] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.breakdown__row + .breakdown__row[b-klqauu7son] {
    margin-top: 80px;
}

.breakdown__row.is-reversed[b-klqauu7son] {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.breakdown__row.is-reversed .breakdown__copy[b-klqauu7son] {
    order: 2;
}

.breakdown__row.is-reversed .breakdown__visual[b-klqauu7son] {
    order: 1;
}

.breakdown__copy h2[b-klqauu7son] {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    margin: 14px 0 20px;
}

.breakdown__list[b-klqauu7son] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.breakdown__list li[b-klqauu7son] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.breakdown__list li i[b-klqauu7son] {
    color: var(--color-accent);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.breakdown__visual img[b-klqauu7son] {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

@media (max-width: 900px) {
    .breakdown__row[b-klqauu7son],
    .breakdown__row.is-reversed[b-klqauu7son] {
        grid-template-columns: 1fr;
    }

    .breakdown__row.is-reversed .breakdown__copy[b-klqauu7son],
    .breakdown__row.is-reversed .breakdown__visual[b-klqauu7son] {
        order: initial;
    }

    .breakdown__row + .breakdown__row[b-klqauu7son] {
        margin-top: 48px;
    }
}
/* /Components/Sections/FeatureChecklistSection.razor.rz.scp.css */
.feature-checklist__groups[b-myaw7jlcnl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 44px;
}

.feature-checklist__group h3[b-myaw7jlcnl] {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text);
}

.feature-checklist__group ul[b-myaw7jlcnl] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-checklist__group li[b-myaw7jlcnl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.feature-checklist__check[b-myaw7jlcnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
    flex-shrink: 0;
}

.feature-checklist__group li strong[b-myaw7jlcnl] {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
}

.feature-checklist__desc[b-myaw7jlcnl] {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-top: 2px;
}

@media (max-width: 900px) {
    .feature-checklist__groups[b-myaw7jlcnl] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .feature-checklist__groups[b-myaw7jlcnl] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
/* /Components/Sections/HeroSection.razor.rz.scp.css */
.hero[b-89off7159v] {
    position: relative;
    min-height: clamp(780px, 90vh, 980px);
    overflow: hidden;
    color: #fff;
    background: #18211f;
}
/* A real manufacturing photo, lightly graded: a much lighter navy tint
   than the original near-black overlay, plus a saturation/brightness
   boost, so the actual color in the photo (blue equipment, safety
   orange) reads instead of getting crushed to near-black. */
.hero__image[b-89off7159v] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(100deg, rgba(6,20,36,.76) 0%, rgba(6,20,36,.42) 45%, rgba(6,20,36,.16) 100%),
        linear-gradient(0deg, rgba(4,14,26,.8) 0%, rgba(4,14,26,.2) 55%, transparent 76%),
        url('/images/plant-floor.jpg');
    background-size: cover;
    background-position: center 42%;
    transform: scale(1.02);
    filter: saturate(1.15) brightness(0.88);
}
.hero__image[b-89off7159v]::before { content:""; position:absolute; inset:0; box-shadow: inset 0 -140px 140px -80px rgba(0,0,0,.55); }

/* A low, quiet row of labeled pills, roughly under the people on the
   right side of the photo — positioned as plain percentages of .hero
   itself (not the photo), so this holds up at any width. Sits well
   clear of the copy block, which gets pushed up to make room (see the
   increased padding-bottom on .hero__inner further down). */
.hero__team-pills[b-89off7159v] {
    position: absolute;
    inset: 0;
    /* Above .hero__inner (also z-index:1, but later in DOM order so it
       would otherwise paint on top and — being a full-height flex box,
       not just its visible copy — silently swallow clicks meant for
       the now-interactive pills). pointer-events:none here keeps the
       rest of this layer from blocking .hero__inner's own buttons; only
       the pills themselves opt back in below. */
    z-index: 2;
    pointer-events: none;
}

.hero__pill[b-89off7159v] {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(8, 13, 20, .55);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    /* The row wrapper is pointer-events:none so it never intercepts
       clicks on the copy/buttons above it — each pill opts back in
       since it's now a real, clickable link. */
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(.85);
    animation: hero-pill-in-b-89off7159v .4s cubic-bezier(.22,.61,.36,1) both;
    /* Pills come in last — after the headline/copy/buttons above have
       already settled (that fade-up sequence finishes around 1.3s: see
       .hero__actions' own animation-delay further down), not stacked
       on top of it. */
    animation-delay: calc(1.3s + var(--delay));
    transition: background .2s ease, border-color .2s ease;
}

.hero__pill:hover[b-89off7159v],
.hero__pill:focus-visible[b-89off7159v] {
    background: rgba(8, 13, 20, .78);
    border-color: rgba(255, 255, 255, .55);
}

.hero__pill:focus-visible[b-89off7159v] {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Hover/focus summary: what Essembi does for this team, plus a cue that
   it links down to that team's tab further down the page. Anchored
   above the pill so it never reads over the photo's own bottom crop.
   Dark glass card (same navy gradient as the .icon-badge panels used
   elsewhere on the site) rather than a plain white tooltip, with the
   pill's own --dot color picked up as a thin top accent and a soft
   glow — so it reads as a small, on-brand product surface instead of a
   generic browser-style callout. */
.hero__pill-tip[b-89off7159v] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%) translateY(4px);
    width: 232px;
    padding: 14px 16px 15px;
    border-radius: 14px;
    background: linear-gradient(165deg, #17273f 0%, var(--color-navy) 65%, #0a121e 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #f3f6fa;
    box-shadow: 0 22px 44px rgba(3, 8, 16, .5), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 22px -6px var(--dot);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* Thin glowing accent line across the top, tinted per-team via --dot —
   ties the card back to the pill it belongs to at a glance. */
.hero__pill-tip[b-89off7159v]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--dot), transparent);
    opacity: .9;
}

.hero__pill-tip[b-89off7159v]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 10px;
    height: 10px;
    background: var(--color-navy);
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.hero__pill-tip-cta[b-89off7159v] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: .01em;
}

/* The label text is the "See X tools" copy; the arrow is a separate
   glyph after it so it can nudge right on hover without the label
   text sliding too — a small "this is a link" affordance. */
.hero__pill-tip-cta i[b-89off7159v] {
    transition: transform .18s ease;
}

.hero__pill:hover .hero__pill-tip-cta i[b-89off7159v],
.hero__pill:focus-visible .hero__pill-tip-cta i[b-89off7159v] {
    transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
    .hero__pill:hover .hero__pill-tip[b-89off7159v],
    .hero__pill:focus-visible .hero__pill-tip[b-89off7159v] {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

.hero__pill-dot[b-89off7159v] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--dot);
}

@keyframes hero-pill-in-b-89off7159v {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__pill[b-89off7159v] { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Hidden by default — shown only once there's genuinely enough room
   (both width and height) for the arch to clear the copy block below
   it. A narrow-but-short window (a smaller laptop's actual browser
   viewport after chrome, easy to hit around 900-1000px wide) was
   squeezing the two together even with the extra padding-bottom below,
   so this gates on height too rather than just width. */
.hero__team-pills[b-89off7159v] { display: none; }

.hero__inner[b-89off7159v] { position:relative; z-index:1; min-height: calc(90vh - 40px); display:flex; align-items:flex-end; padding-bottom: 100px; }
.hero__copy[b-89off7159v] { max-width: 1000px; }

/* Copy shifted up from its old 100px bottom anchor to clear real room
   for the team pills below it, rather than the two competing for the
   same lower band of the photo. */
@media (min-width: 1100px) and (min-height: 760px) {
    .hero__inner[b-89off7159v] { padding-bottom: 260px; }
    .hero__team-pills[b-89off7159v] { display: block; }
}

/* A quiet, staggered entrance so the hero feels like it loaded on
   purpose rather than just appearing. */
@keyframes hero-fade-up-b-89off7159v {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow[b-89off7159v],
.hero h1[b-89off7159v],
.hero__sub[b-89off7159v],
.hero__actions[b-89off7159v] {
    animation: hero-fade-up-b-89off7159v 1.3s cubic-bezier(.16,1,.3,1) both;
}

.hero__eyebrow[b-89off7159v] { animation-delay: .1s; }
.hero h1[b-89off7159v] { animation-delay: .28s; }
.hero__sub[b-89off7159v] { animation-delay: .46s; }
.hero__actions[b-89off7159v] { animation-delay: .64s; }

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow[b-89off7159v], .hero h1[b-89off7159v], .hero__sub[b-89off7159v], .hero__actions[b-89off7159v] { animation: none; }
}

.hero__eyebrow[b-89off7159v] { display:inline-flex; align-items:center; margin-bottom:22px; padding:7px 13px; border:1px solid rgba(255,255,255,.2); border-radius:99px; background:rgba(0,0,0,.22); color:#fff; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
/* No forced nowrap here — the old two-word headline fit on one line on
   purpose, but this one is a full sentence and wraps naturally instead
   (text-wrap: balance, set globally on h1/h2, keeps the break tidy). */
/* Forced onto two lines at the phrase break (see the <br/> in
   HeroSection.razor) rather than wherever text-wrap: balance happened
   to land it — sized down slightly from the one-line-per-balance version
   so "The Plant Floor Operating System" reliably clears one line on
   its own at ordinary hero widths. */
.hero h1[b-89off7159v] { max-width:960px; font-size:clamp(30px, 3.2vw, 50px); line-height:1.16; letter-spacing:-.02em; font-weight:600; }
.hero h1 em[b-89off7159v] { color:inherit; font-style:normal; }
.hero__sub[b-89off7159v] { max-width:720px; margin-top:27px; color:#e1e9f1; font-size:clamp(16px,1.35vw,19px); line-height:1.55; font-weight:500; }
@media (min-width:900px) { .hero__sub[b-89off7159v] { white-space:nowrap; } }
.hero__actions[b-89off7159v] { display:flex; align-items:center; gap:12px; margin-top:30px; }
.hero__actions .btn-primary[b-89off7159v] { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.hero__actions .btn-primary:hover[b-89off7159v] { background:var(--color-accent-hover); border-color:var(--color-accent-hover); transform:translateY(-2px); }
.hero__actions .btn-on-dark[b-89off7159v] { border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.18); color:#fff; }.hero__actions .btn-on-dark:hover[b-89off7159v] { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55); }
@media (max-width:980px) { .hero[b-89off7159v] { min-height:720px; }.hero__inner[b-89off7159v] { min-height:610px; padding-bottom:86px; } }
@media (max-width:620px) {
    .hero[b-89off7159v] { min-height:720px; }
    .hero__image[b-89off7159v] { background-position:62% center; }
    .hero__inner[b-89off7159v] { min-height:610px; padding-bottom:110px; }
    /* The desktop <br/> forces a break after "System" so the headline
       reads as two balanced phrases — on a phone that split just adds
       a 4th/5th line on top of naturally wrapping. Dropping it here
       and letting the global text-wrap:balance spread the whole
       sentence across the available width settles it at 3 lines. */
    .hero__title-break[b-89off7159v] { display:none; }
    .hero h1[b-89off7159v] { font-size:clamp(20px,6.2vw,26px); line-height:1.2; }
    .hero__sub[b-89off7159v] { font-size:15px; }
    /* The subtitle's <br/> is there to balance two lines at wider
       widths — on a phone the text is narrow enough that a forced
       break reads as an awkward extra-short line, so it's dropped here
       and the sentence just wraps naturally instead. */
    .hero__sub-break[b-89off7159v] { display:none; }
    .hero__actions[b-89off7159v] { flex-wrap:wrap; }
}
/* /Components/Sections/HopeFearSection.razor.rz.scp.css */
.hopefear__grid[b-n9h21fbsqf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.hopefear__card[b-n9h21fbsqf] {
    border-radius: var(--radius-lg);
    padding: 32px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
}

.hopefear__card.is-hope[b-n9h21fbsqf] {
    background: #fff;
    border-color: var(--color-border);
}

.hopefear__tag[b-n9h21fbsqf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hopefear__card.is-fear .hopefear__tag[b-n9h21fbsqf] {
    background: rgba(214, 92, 51, .08);
    color: #b6531f;
}

.hopefear__card.is-hope .hopefear__tag[b-n9h21fbsqf] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.hopefear__card h3[b-n9h21fbsqf] {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: 10px;
}

.hopefear__card p[b-n9h21fbsqf] {
    color: var(--color-text-muted);
    font-size: 15.5px;
    line-height: 1.6;
}

@media (max-width: 800px) {
    .hopefear__grid[b-n9h21fbsqf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/ImplementationSection.razor.rz.scp.css */
.impl[b-hcm85g6ef6] { background: #f5f6f7; color: #111820; }
.impl__inner[b-hcm85g6ef6] { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.impl__intro[b-hcm85g6ef6] { position: sticky; top: 100px; }
.impl__eyebrow[b-hcm85g6ef6] { display: inline-flex; align-items: center; margin-bottom: 18px; color: var(--color-text-subtle); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* Matches .section-heading h2's tracking/leading (-.02em / 1.2) used
   everywhere else on the site — this was its own tighter, denser scale
   (-.045em / 1.08) that read as a different typeface next to it. */
.impl__intro h2[b-hcm85g6ef6] { max-width: 470px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.impl__intro > p:not(.impl__eyebrow)[b-hcm85g6ef6] { max-width: 390px; margin-top: 22px; color: #64717c; font-size: 16px; line-height: 1.6; }
.impl__link[b-hcm85g6ef6] { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: #111820; font-size: 14px; font-weight: 700; text-decoration: none; }
.impl__link:hover[b-hcm85g6ef6] { color: #56636e; }
.impl__timeline[b-hcm85g6ef6] { border-top: 1px solid #cfd6db; }
.impl__step[b-hcm85g6ef6] { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid #cfd6db; }
.impl__step-number[b-hcm85g6ef6] { color: #7d8a93; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; padding-top: 3px; }
.impl__step h3[b-hcm85g6ef6] { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; }
.impl__step p[b-hcm85g6ef6] { max-width: 580px; margin-top: 4px; color: #63717b; font-size: 13.5px; line-height: 1.5; }
.impl__duration[b-hcm85g6ef6] { display: inline-block; margin-top: 6px; color: #7d8a93; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 760px) {
    .impl__inner[b-hcm85g6ef6] { grid-template-columns: 1fr; gap: 28px; }
    .impl__intro[b-hcm85g6ef6] { position: static; }
    .impl__intro > p:not(.impl__eyebrow)[b-hcm85g6ef6] { margin-top: 14px; }
    .impl__link[b-hcm85g6ef6] { margin-top: 18px; }
    .impl__step[b-hcm85g6ef6] { grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 10px 0; }
    .impl__step p[b-hcm85g6ef6] { margin-top: 3px; font-size: 13px; }
    .impl__duration[b-hcm85g6ef6] { margin-top: 5px; }
}
/* /Components/Sections/ImprovementCycleSection.razor.rz.scp.css */
.cycle__layout[b-tv8cn01nhq] {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-top: 48px;
}

.cycle__visual[b-tv8cn01nhq] {
    flex: 1;
    min-width: 0;
}

.cycle__visual img[b-tv8cn01nhq] {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* The arc + node diagram, and the Measure/Improve/Control cards next to
   it, sit together as one panel so the cards can line up against the
   nodes they represent. */
.cycle__arc-panel[b-tv8cn01nhq] {
    flex: 1.2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* The arc's own path data extends well to the left of x=0 in the
   viewBox (that's what makes it a wide, off-canvas circle bulging in
   from the left rather than a small closed loop) — normal SVG clipping
   to the viewBox is what turns that into the crescent shape actually
   shown here, so overflow stays at its default (hidden), not visible. */
.cycle__svg[b-tv8cn01nhq] {
    flex: 0 0 330px;
    width: 330px;
    height: 330px;
}

.cycle__track[b-tv8cn01nhq] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 12.5;
    stroke-linecap: round;
    opacity: .5;
}

.cycle__node[b-tv8cn01nhq] {
    cursor: pointer;
}

.cycle__node-bg[b-tv8cn01nhq] {
    fill: #fff;
    stroke: var(--color-accent);
    stroke-width: 3;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .13));
    transition: fill .2s ease, filter .2s ease;
}

.cycle__node.is-active .cycle__node-bg[b-tv8cn01nhq] {
    fill: var(--color-accent);
    filter: drop-shadow(0 5px 20px rgba(0, 159, 255, .55));
}

.cycle__node:not(.is-active):hover .cycle__node-bg[b-tv8cn01nhq] {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
    stroke-width: 4;
}

.cycle__node-icon[b-tv8cn01nhq] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: var(--color-accent);
    transition: color .2s ease;
}

.cycle__node.is-active .cycle__node-icon[b-tv8cn01nhq] {
    color: #fff;
}

.cycle__cards[b-tv8cn01nhq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    align-self: stretch;
}

.cycle__card[b-tv8cn01nhq] {
    display: block;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: none;
    border: none;
    padding: 10px 10px 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
}

.cycle__card[b-tv8cn01nhq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 5px;
    background: #ddd;
    border-radius: 36px;
}

.cycle__card h3[b-tv8cn01nhq] {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
}

.cycle__card p[b-tv8cn01nhq] {
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.cycle__card span[b-tv8cn01nhq] {
    font-size: 13px;
    color: #999;
}

.cycle__card.is-active[b-tv8cn01nhq]::before,
.cycle__card:hover[b-tv8cn01nhq]::before {
    background: var(--color-accent);
}

.cycle__card.is-active h3[b-tv8cn01nhq],
.cycle__card.is-active span[b-tv8cn01nhq],
.cycle__card:hover h3[b-tv8cn01nhq] {
    color: var(--color-accent);
}

/* A distinct card of its own, separate from the arc/cards panel above,
   matching the original design (the arc panel has no border at all;
   only this closing card does). Copy sits on the left, and the "three
   metrics trending up" chart sits on the right, rather than stacking
   the metrics as rows underneath the copy. */
.cycle__highlight[b-tv8cn01nhq] {
    max-width: 980px;
    margin: 48px auto 0;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.cycle__highlight-copy[b-tv8cn01nhq] {
    flex: 1.1;
    min-width: 0;
}

.cycle__highlight-badge[b-tv8cn01nhq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cycle__highlight-title[b-tv8cn01nhq] {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: 12px;
}

.cycle__highlight-body[b-tv8cn01nhq] {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* Four metric cards in a plain 2x2 grid — all four trending up, so all
   four share one green "good news" treatment (green outline, 10%-opacity
   green fill) rather than singling one out with an accent color. */
.cycle__metrics[b-tv8cn01nhq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex: 0 0 auto;
    width: 300px;
}

/* Just a small icon above a label — no badge circle, no floating trend
   chip, no shadow. The green tint alone already says "this is good
   news"; the rest was redundant noise on top of it. */
.cycle__metric-card[b-tv8cn01nhq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    border-radius: 14px;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .35);
    text-align: center;
}

.cycle__metric-icon[b-tv8cn01nhq] {
    font-size: 20px;
    color: #15803d;
}

.cycle__metric-label[b-tv8cn01nhq] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

@media (max-width: 900px) {
    .cycle__layout[b-tv8cn01nhq] {
        flex-direction: column;
        gap: 32px;
    }

    .cycle__arc-panel[b-tv8cn01nhq] {
        width: 100%;
        gap: 32px;
    }

    .cycle__highlight[b-tv8cn01nhq] {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .cycle__highlight-badge[b-tv8cn01nhq] {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .cycle__arc-panel[b-tv8cn01nhq] {
        flex-direction: column;
    }

    .cycle__svg[b-tv8cn01nhq] {
        flex-basis: auto;
        width: 200px;
        height: 200px;
    }

    .cycle__cards[b-tv8cn01nhq] {
        width: 100%;
    }

    .cycle__highlight[b-tv8cn01nhq] {
        padding: 28px 24px;
        gap: 28px;
    }

    .cycle__metrics[b-tv8cn01nhq] {
        width: 100%;
        max-width: 320px;
        gap: 10px;
    }

    .cycle__metric-card[b-tv8cn01nhq] {
        padding: 14px 12px;
    }
}
/* /Components/Sections/IndustriesSection.razor.rz.scp.css */
.industries[b-w0nuwzf5xi] {
    padding-bottom: 104px;
}

.industries-grid[b-w0nuwzf5xi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

.industry-card[b-w0nuwzf5xi] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid var(--color-border-light);
    background: #fff;
    padding: 16px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.industry-card:hover[b-w0nuwzf5xi] {
    border-color: var(--color-accent);
    box-shadow: 0 10px 22px rgba(20, 35, 45, .08);
}

.industry-card:hover .industry-card__icon[b-w0nuwzf5xi] {
    background: var(--color-accent-soft);
}

.industry-card__icon[b-w0nuwzf5xi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color-bg-soft);
    font-size: 16px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.industry-card__body[b-w0nuwzf5xi] {
    min-width: 0;
}

.industry-card h3[b-w0nuwzf5xi] {
    margin: 0 0 3px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

.industry-card p[b-w0nuwzf5xi] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .industries-grid[b-w0nuwzf5xi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    /* Two columns without the description keeps every industry visible
       in about half the vertical space a single wrapping column with
       full copy would take. */
    .industries-grid[b-w0nuwzf5xi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .industry-card[b-w0nuwzf5xi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .industry-card p[b-w0nuwzf5xi] {
        display: none;
    }

    .industries[b-w0nuwzf5xi] {
        padding-bottom: 64px;
    }
}
/* /Components/Sections/JobListSection.razor.rz.scp.css */
.jobs__list[b-z8gnczyi6t] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.jobs__item[b-z8gnczyi6t] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* A dark header band per posting — same "boxed dark card" language as
   the rest of the site's case/testimonial cards — rather than a plain
   light accordion row, so an open-position list actually reads as a
   set of postings, not a settings list. */
.jobs__header[b-z8gnczyi6t] {
    width: 100%;
    display: block;
    padding: 26px 28px;
    background: linear-gradient(135deg, #0c0e11 0%, #1d2227 100%);
    border: none;
    text-align: left;
    cursor: pointer;
}

.jobs__header-top[b-z8gnczyi6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.jobs__badge[b-z8gnczyi6t] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.jobs__header h3[b-z8gnczyi6t] {
    margin: 16px 0 8px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.jobs__location[b-z8gnczyi6t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .68);
}

.jobs__chevron[b-z8gnczyi6t] {
    color: rgba(255, 255, 255, .68);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.jobs__chevron.is-open[b-z8gnczyi6t] {
    transform: rotate(180deg);
    color: #fff;
}

.jobs__body[b-z8gnczyi6t] {
    padding: 26px 28px 28px;
    background: #fff;
    border-top: 1px solid var(--color-border-light);
}

.jobs__body > p[b-z8gnczyi6t] {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.jobs__body h4[b-z8gnczyi6t] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-subtle);
    margin-bottom: 12px;
}

.jobs__body ul[b-z8gnczyi6t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
    list-style: none;
}

.jobs__body li[b-z8gnczyi6t] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.jobs__body li i[b-z8gnczyi6t] {
    color: var(--color-accent);
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}
/* /Components/Sections/LearnResourcesSection.razor.rz.scp.css */
.learn-grid[b-qc1wncr6mm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 36px;
}

/* A little extra breathing room below this section on desktop before
   the Questions section starts. */
@media (min-width: 769px) {
    .learn[b-qc1wncr6mm] {
        padding-bottom: 112px;
    }
}

.learn-card[b-qc1wncr6mm] {
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 14px;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow);
    padding: 22px;
    background: #fefefe;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.learn-card:hover[b-qc1wncr6mm] {
    border-color: var(--color-accent);
    box-shadow: 0 12px 24px rgba(20, 35, 45, .1);
    transform: translateY(-2px);
}

.learn-card img[b-qc1wncr6mm] {
    flex: 0 0 172px;
    width: 172px;
    height: 130px;
    border-radius: 10px;
    object-fit: cover;
}

.learn-card__text[b-qc1wncr6mm] {
    flex: 1 1 auto;
    min-width: 0;
}

.learn-card h3[b-qc1wncr6mm] {
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 8px;
}

.learn-card p[b-qc1wncr6mm] {
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
    color: var(--color-text-muted);
}

.learn-card:hover h3[b-qc1wncr6mm] {
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .learn-grid[b-qc1wncr6mm] {
        grid-template-columns: 1fr;
    }

    .learn-card[b-qc1wncr6mm] {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .learn-card[b-qc1wncr6mm] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .learn-card img[b-qc1wncr6mm] {
        width: 100%;
        height: 140px;
    }
}
/* /Components/Sections/MetricsSection.razor.rz.scp.css */
.flipbook[b-fjpbhj6jpi] {
    display: flex;
    gap: 24px;
    margin-top: 50px;
    align-items: center;
}

.flipbook__options[b-fjpbhj6jpi] {
    flex: 0 0 42%;
    max-width: 500px;
}

.flipbook__option[b-fjpbhj6jpi] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    margin-bottom: 8px;
    padding: 5px 10px 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    opacity: 0.7;
}

.flipbook__option[b-fjpbhj6jpi]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 6px;
    background: #ccc;
    border-radius: 36px;
}

.flipbook__option.is-active[b-fjpbhj6jpi],
.flipbook__option:hover[b-fjpbhj6jpi] {
    opacity: 1;
}

.flipbook__option.is-active[b-fjpbhj6jpi]::before {
    background: var(--color-accent);
}

.flipbook__option h3[b-fjpbhj6jpi] {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.flipbook__body[b-fjpbhj6jpi] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.flipbook__option.is-active .flipbook__body[b-fjpbhj6jpi] {
    max-height: 200px;
}

.flipbook__body p[b-fjpbhj6jpi] {
    margin: 8px 0 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    opacity: 0.7;
}

.flipbook__body span[b-fjpbhj6jpi] {
    font-size: 14px;
    color: var(--color-accent);
}

.flipbook__image[b-fjpbhj6jpi] {
    flex: 1;
}

.flipbook__image img[b-fjpbhj6jpi] {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--color-border-light);
    box-shadow: var(--shadow);
    border-radius: 4px;
    background: #fff;
}

@media (max-width: 1000px) {
    .flipbook[b-fjpbhj6jpi] {
        flex-direction: column;
    }

    .flipbook__options[b-fjpbhj6jpi] {
        flex: none;
        max-width: none;
        width: 100%;
    }
}
/* /Components/Sections/NavatticDemoSection.razor.rz.scp.css */
/* ============================================================
   THE REVEAL — a plain, static block (previously a scroll-driven
   device launch, sticky through a 165dvh window while it tilted, scaled,
   and lifted into place). That reveal read as the device "pulling up"
   awkwardly on scroll, so it's just laid out in the frame now, in
   normal flow. No padding or background of its own — the home page's
   .ai-showcase wrapper (Home.razor.css) supplies both, shared with its
   two AI spotlight siblings.
   ============================================================ */
.product-reveal[b-h6bnau3oiw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.product-reveal__sticky[b-h6bnau3oiw] {
    display: contents;
}

.product-reveal__copy[b-h6bnau3oiw] {
    width: min(760px, calc(100% - 48px));
    text-align: center;
}

.product-reveal__copy span[b-h6bnau3oiw] {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.product-reveal__copy h2[b-h6bnau3oiw] {
    margin: 16px 0 0;
    color: #edf2f5;
    font-size: clamp(35px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
}

.device[b-h6bnau3oiw] {
    position: relative;
    width: min(1240px, 91vw, 165dvh);
    /* Matches the cover/demo's own ratio (1920x937-ish) so it fills the
       frame without cropping either the cover image or the iframe. */
    aspect-ratio: 1920 / 937;
    max-height: 76dvh;
    overflow: hidden;
    border: 10px solid #1b2229;
    border-radius: 12px;
    background: #e9edf0;
    box-shadow:
        0 90px 120px rgba(0, 5, 9, .62),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 0 0 1px rgba(151, 172, 188, .18);
}

.device__camera[b-h6bnau3oiw] {
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 50%;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: #080c10;
    transform: translateX(-50%);
}

.device__screen[b-h6bnau3oiw] {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* The real Navattic demo, already loaded underneath the cover (browser
   native lazy-loading via the iframe's loading="lazy" — it's ready to
   go the moment the cover is clicked, no spinner needed). Plays right
   here in place; nothing opens a separate page or overlay. */
.device__screen iframe[b-h6bnau3oiw] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The clickable cover — a static screenshot with a "start" button —
   sitting on top of the iframe until clicked. Same image, same
   position:absolute/inset:0 stacking at every viewport width, so there
   is never a separate mobile-vs-desktop crop for a hotspot/overlay to
   drift out of alignment with. */
.nv-lazy[b-h6bnau3oiw] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.nv-lazy-overlay[b-h6bnau3oiw] {
    position: absolute;
    inset: 0;
    background: rgba(51, 65, 85, .4);
    transition: opacity .2s ease;
}

.nv-lazy:hover .nv-lazy-overlay[b-h6bnau3oiw] {
    opacity: .35;
}

.nv-lazy button[b-h6bnau3oiw] {
    position: relative;
    transition: transform .2s ease;
}

.nv-lazy:hover button[b-h6bnau3oiw] {
    transform: scale(1.05);
}

/* wwwroot/navattic-overlay.js adds this on click — the cover fades out
   and stops intercepting clicks, leaving the iframe (already loaded
   underneath) in full control. */
.nv-lazy.is-hidden[b-h6bnau3oiw] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .nv-lazy[b-h6bnau3oiw],
    .nv-lazy-overlay[b-h6bnau3oiw],
    .nv-lazy button[b-h6bnau3oiw] {
        transition: none;
    }
}

@media (max-width: 767px) {
    .product-reveal[b-h6bnau3oiw] {
        gap: 32px;
    }

    .product-reveal__copy h2[b-h6bnau3oiw] {
        margin-top: 11px;
        font-size: 36px;
    }

    .device[b-h6bnau3oiw] {
        width: 94vw;
        border-width: 6px;
    }

    .nv-lazy button[b-h6bnau3oiw] {
        padding: 10px 16px;
        font-size: 14px;
    }
}
/* /Components/Sections/OeeFormulaSection.razor.rz.scp.css */
.oee-formula[b-g7hg04kyhw] {
    padding-top: 0;
}

.oee-formula__grid[b-g7hg04kyhw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.oee-formula__card[b-g7hg04kyhw] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.oee-formula__card h3[b-g7hg04kyhw] {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

/* A real stacked fraction: numerator, a dividing line, denominator —
   not just "A / B" in a sentence. */
.oee-formula__fraction[b-g7hg04kyhw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 16px 10px;
    border-radius: var(--radius);
    background: var(--color-bg-soft);
    text-align: center;
}

.oee-formula__num[b-g7hg04kyhw],
.oee-formula__den[b-g7hg04kyhw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
}

.oee-formula__bar[b-g7hg04kyhw] {
    width: 100%;
    max-width: 200px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
}

.oee-formula__accounts[b-g7hg04kyhw] {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.oee-formula__card ul[b-g7hg04kyhw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    list-style: none;
}

.oee-formula__card li[b-g7hg04kyhw] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.oee-formula__card li i[b-g7hg04kyhw] {
    margin-top: 2px;
    color: var(--color-accent);
    font-size: 13px;
    flex-shrink: 0;
}

.oee-formula__total[b-g7hg04kyhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 22px 28px;
    border-radius: var(--radius-lg);
    background: var(--color-navy);
    text-align: center;
}

.oee-formula__total-label[b-g7hg04kyhw] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.oee-formula__total-formula[b-g7hg04kyhw] {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

@media (max-width: 800px) {
    .oee-formula__grid[b-g7hg04kyhw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/OpsFrameworkSection.razor.rz.scp.css */
.ops-framework__inner[b-8ecn4rvup5] {
    max-width: 900px;
    text-align: center;
}

.ops-framework__inner .section-eyebrow[b-8ecn4rvup5] {
    justify-content: center;
}

.ops-framework h2[b-8ecn4rvup5] {
    margin: 14px 0 14px;
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.ops-framework__sub[b-8ecn4rvup5] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto 44px;
}

/* A plain numbered list — same rhythm as the implementation timeline
   elsewhere on the site (a number label, then the copy, rows divided
   by hairlines) — rather than a card grid. */
.ops-framework__list[b-8ecn4rvup5] {
    list-style: none;
    text-align: left;
    margin: 0 0 40px;
    border-top: 1px solid var(--color-border-light);
}

.ops-framework__step[b-8ecn4rvup5] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.ops-framework__num[b-8ecn4rvup5] {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}

.ops-framework__step p[b-8ecn4rvup5] {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--color-text);
}

/* Closing line and CTA sit side by side — copy on the left, a secondary
   button on the right — rather than stacked and centered. */
.ops-framework__footer[b-8ecn4rvup5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border-light);
    text-align: left;
}

.ops-framework__closer[b-8ecn4rvup5] {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.ops-framework__footer .btn[b-8ecn4rvup5] {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ops-framework__step[b-8ecn4rvup5] {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 0;
    }

    .ops-framework__step p[b-8ecn4rvup5] {
        font-size: 15.5px;
    }

    .ops-framework__footer[b-8ecn4rvup5] {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding-top: 28px;
        text-align: center;
    }

    .ops-framework__closer[b-8ecn4rvup5] {
        font-size: 16px;
    }

    .ops-framework__footer .btn[b-8ecn4rvup5] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Sections/PageHero.razor.rz.scp.css */
.page-hero[b-8bmm7h7b1c] {
    padding: calc(var(--header-height) + 64px) 0 56px;
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 60%);
}

.page-hero__inner[b-8bmm7h7b1c] {
    max-width: 760px;
    text-align: center;
    margin: 0 auto;
}

.page-hero h1[b-8bmm7h7b1c] {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}

.page-hero__sub[b-8bmm7h7b1c] {
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.page-hero__actions[b-8bmm7h7b1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

@media (max-width: 768px) {
    .page-hero[b-8bmm7h7b1c] {
        padding-top: calc(var(--header-height) + 40px);
    }
}

@media (max-width: 620px) {
    /* A long title (e.g. Contact Sales') at the desktop clamp's upper
       range wraps to 5-6 lines of large bold text on a phone, eating
       the whole first screen before any real content shows — sized
       down so it reads as a heading, not a wall of text. */
    .page-hero h1[b-8bmm7h7b1c] {
        font-size: clamp(24px, 7.5vw, 32px);
        line-height: 1.22;
    }

    .page-hero__sub[b-8bmm7h7b1c] {
        font-size: 15.5px;
    }
}
/* /Components/Sections/PainPointsSection.razor.rz.scp.css */
.pain-points[b-m6ohmmkzto] {
    background: var(--color-bg-soft);
}

.pain-points__grid[b-m6ohmmkzto] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    margin-top: 32px;
}

.pain-points__item[b-m6ohmmkzto] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pain-points__item i[b-m6ohmmkzto] {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: #b91c1c;
    opacity: .75;
}

.pain-points__item p[b-m6ohmmkzto] {
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
}

@media (max-width: 760px) {
    .pain-points__grid[b-m6ohmmkzto] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/PlantFloorBand.razor.rz.scp.css */
.plant-floor[b-ide4iapux5] {
    padding: 20px 0;
}

.plant-floor__band[b-ide4iapux5] {
    position: relative;
    overflow: hidden;
    padding: 80px 40px;
    text-align: center;
    max-width: 1200px;
    margin: 40px auto;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.plant-floor__band[b-ide4iapux5]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 10, 16, .72) 0%, rgba(6, 10, 16, .55) 45%, rgba(6, 10, 16, .78) 100%);
    z-index: 0;
}

.plant-floor__content[b-ide4iapux5] {
    position: relative;
    z-index: 1;
}

.plant-floor__actions[b-ide4iapux5] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .plant-floor__band[b-ide4iapux5] {
        padding: 56px 20px;
        margin-left: 16px;
        margin-right: 16px;
    }
}
/* /Components/Sections/QuestionsSection.razor.rz.scp.css */
.questions[b-pm2d96l27t] {
    background: #f5f6f7;
    color: #111820;
}

.questions__inner[b-pm2d96l27t] {
    display: grid;
    grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
    gap: clamp(44px, 8vw, 120px);
    align-items: start;
}

.questions__intro[b-pm2d96l27t] {
    position: sticky;
    top: 100px;
}

.questions__eyebrow[b-pm2d96l27t] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    color: var(--color-text-subtle);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.questions h2[b-pm2d96l27t] {
    max-width: 470px;
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.questions__intro > p:not(.questions__eyebrow)[b-pm2d96l27t] {
    max-width: 390px;
    margin-top: 22px;
    color: #64717c;
    font-size: 16px;
    line-height: 1.6;
}

.questions__link[b-pm2d96l27t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    color: #111820;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.questions__link:hover[b-pm2d96l27t] { color: #56636e; }

.questions__list[b-pm2d96l27t] {
    border-top: 1px solid #cfd6db;
}

.questions details[b-pm2d96l27t] {
    border-bottom: 1px solid #cfd6db;
}

.questions summary[b-pm2d96l27t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
}

.questions summary[b-pm2d96l27t]::-webkit-details-marker { display: none; }
.questions summary i[b-pm2d96l27t] { color: #7d8a93; font-size: 20px; transition: transform .2s ease; }
.questions details[open] summary i[b-pm2d96l27t] { transform: rotate(45deg); }

.questions details p[b-pm2d96l27t] {
    max-width: 650px;
    padding: 0 44px 22px 0;
    color: #63717b;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 760px) {
    .questions__inner[b-pm2d96l27t] { grid-template-columns: 1fr; gap: 36px; }
    .questions__intro[b-pm2d96l27t] { position: static; }
}
/* /Components/Sections/RelatedLinksSection.razor.rz.scp.css */
.related__grid[b-kqs8wwgt31] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.related__card[b-kqs8wwgt31] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.related__card:hover[b-kqs8wwgt31] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.related__icon[b-kqs8wwgt31] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.related__card h3[b-kqs8wwgt31] {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.related__card p[b-kqs8wwgt31] {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.related__arrow[b-kqs8wwgt31] {
    margin-left: auto;
    align-self: center;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .related__grid[b-kqs8wwgt31] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/ResourceCardGridSection.razor.rz.scp.css */
.resource-cards__grid[b-3vc1y7k4bq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.resource-cards__card[b-3vc1y7k4bq] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 26px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.resource-cards__card:hover[b-3vc1y7k4bq] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
    background: #fff;
    transform: translateY(-2px);
}

.resource-cards__icon[b-3vc1y7k4bq] {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 16px;
}

.resource-cards__card h3[b-3vc1y7k4bq] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}

.resource-cards__card p[b-3vc1y7k4bq] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.resource-cards__link[b-3vc1y7k4bq] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-accent);
}

@media (max-width: 900px) {
    .resource-cards__grid[b-3vc1y7k4bq] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .resource-cards__grid[b-3vc1y7k4bq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/RoiCalculatorSection.razor.rz.scp.css */
.roi[b-sqi52kcla5] { padding-top: 24px; }

.roi__layout[b-sqi52kcla5] {
    max-width: 760px;
    margin: 0 auto;
}

.roi__inputs[b-sqi52kcla5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
}

.roi__inputs label[b-sqi52kcla5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.roi__inputs label span[b-sqi52kcla5] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

.roi__inputs label span small[b-sqi52kcla5] {
    display: block;
    font-weight: 400;
    color: var(--color-text-subtle);
    margin-top: 2px;
}

.roi__inputs input[b-sqi52kcla5] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--color-text);
    background: #fff;
}

.roi__inputs input:focus[b-sqi52kcla5] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.roi__results[b-sqi52kcla5] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.roi__result[b-sqi52kcla5] {
    padding: 20px;
    border-radius: var(--radius);
    background: #111417;
    text-align: center;
}

.roi__result span[b-sqi52kcla5] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 8px;
}

.roi__result strong[b-sqi52kcla5] {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.roi__result small[b-sqi52kcla5] {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.roi__disclaimer[b-sqi52kcla5] {
    grid-column: 1 / -1;
    font-size: 12.5px;
    color: var(--color-text-subtle);
    line-height: 1.5;
}

.roi__inputs .btn[b-sqi52kcla5] {
    grid-column: 1 / -1;
    justify-self: start;
}

@media (max-width: 700px) {
    .roi__inputs[b-sqi52kcla5] {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .roi__results[b-sqi52kcla5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/SensorComparisonSection.razor.rz.scp.css */
.sensor-compare__inner[b-llqd1pfqyf] {
    max-width: 900px;
    text-align: center;
}

.sensor-compare__inner .section-eyebrow[b-llqd1pfqyf] {
    justify-content: center;
}

.sensor-compare h2[b-llqd1pfqyf] {
    margin: 14px 0 14px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.sensor-compare__inner > p[b-llqd1pfqyf] {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.sensor-compare__grid[b-llqd1pfqyf] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: center;
    margin-top: 48px;
    text-align: left;
}

.sensor-compare__visuals[b-llqd1pfqyf] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sensor-compare__visual[b-llqd1pfqyf] {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.sensor-compare__visual:last-child[b-llqd1pfqyf] {
    padding-bottom: 0;
    border-bottom: none;
}

.sensor-compare__visual-label[b-llqd1pfqyf] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text-subtle);
}

.sensor-compare__visual.is-essembi .sensor-compare__visual-label[b-llqd1pfqyf] {
    color: var(--color-accent);
}

.sensor-compare__visual-caption[b-llqd1pfqyf] {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.sensor-compare__visual-img[b-llqd1pfqyf] {
    border-radius: var(--radius);
    background: var(--color-bg-soft);
    padding: 12px 4px;
}

.sensor-compare__visual-img img[b-llqd1pfqyf] {
    width: 100%;
    display: block;
}

.sensor-compare__benefits[b-llqd1pfqyf] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow);
}

.sensor-compare__benefits h3[b-llqd1pfqyf] {
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
}

.sensor-compare__benefit[b-llqd1pfqyf] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sensor-compare__benefit-icon[b-llqd1pfqyf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 17px;
}

.sensor-compare__benefit-title[b-llqd1pfqyf] {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.sensor-compare__benefit-body[b-llqd1pfqyf] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

@media (max-width: 860px) {
    .sensor-compare__grid[b-llqd1pfqyf] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
/* /Components/Sections/StorySplitSection.razor.rz.scp.css */
.story-split__inner[b-gdjhy2v9tf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.story-split.is-reversed .story-split__media[b-gdjhy2v9tf] {
    order: -1;
}

.story-split__copy h2[b-gdjhy2v9tf] {
    max-width: 440px;
    margin: 14px 0 18px;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.story-split__copy p[b-gdjhy2v9tf] {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.story-split__copy p + p[b-gdjhy2v9tf] {
    margin-top: 14px;
}

.story-split__media img[b-gdjhy2v9tf] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

@media (max-width: 800px) {
    .story-split__inner[b-gdjhy2v9tf] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .story-split.is-reversed .story-split__media[b-gdjhy2v9tf] {
        order: 0;
    }
}
/* /Components/Sections/SubPageHero.razor.rz.scp.css */
.subhero[b-qhyx12j11s] {
    padding: calc(var(--header-height) + 56px) 0 72px;
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 60%);
}

.subhero__layout[b-qhyx12j11s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* Industry pages have no hero visual (their old stat card duplicated the
   Benefits grid below) — center the copy as its own wide column instead
   of leaving an empty second grid track. */
.subhero__layout--single[b-qhyx12j11s] {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    max-width: 760px;
}

.subhero__layout--single .subhero__sub[b-qhyx12j11s] {
    margin-left: auto;
    margin-right: auto;
}

.subhero__layout--single .subhero__actions[b-qhyx12j11s] {
    justify-content: center;
}

.subhero__copy h1[b-qhyx12j11s] {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.subhero__sub[b-qhyx12j11s] {
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 560px;
    margin-bottom: 28px;
}

.subhero__actions[b-qhyx12j11s] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.subhero__shot[b-qhyx12j11s] {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 159, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border);
}

.subhero__shot img[b-qhyx12j11s] {
    width: 100%;
}

/* Interactive "click through" hotspots over the hero screenshot. */
.subhero__hotspot[b-qhyx12j11s] {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 20, 23, .35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.subhero__hotspot[b-qhyx12j11s]::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    opacity: 0;
    animation: subheroPulse-b-qhyx12j11s 2.2s ease-out infinite;
}

.subhero__hotspot span[b-qhyx12j11s] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}

.subhero__hotspot.is-active[b-qhyx12j11s] {
    background: var(--color-accent);
}

.subhero__hotspot.is-active[b-qhyx12j11s]::before {
    animation: none;
    opacity: 0;
}

@keyframes subheroPulse-b-qhyx12j11s {
    0% { opacity: .8; transform: scale(.6); }
    70% { opacity: 0; transform: scale(1.35); }
    100% { opacity: 0; transform: scale(1.35); }
}

.subhero__callout[b-qhyx12j11s] {
    position: absolute;
    z-index: 5;
    width: 240px;
    padding: 16px 16px 14px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 20px 44px rgba(8, 12, 18, .28);
    animation: subheroCalloutPop-b-qhyx12j11s .28s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes subheroCalloutPop-b-qhyx12j11s {
    from { opacity: 0; transform: scale(.92) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.subhero__callout-dots[b-qhyx12j11s] {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.subhero__callout-dots span[b-qhyx12j11s] {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-border);
}

.subhero__callout-dots span.is-active[b-qhyx12j11s] {
    background: var(--color-accent);
}

.subhero__callout h4[b-qhyx12j11s] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 5px;
}

.subhero__callout p[b-qhyx12j11s] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.subhero__callout-actions[b-qhyx12j11s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.subhero__callout-close[b-qhyx12j11s] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-subtle);
    cursor: pointer;
}

.subhero__callout-close:hover[b-qhyx12j11s] {
    color: var(--color-text);
}

.subhero__callout-actions .btn-sm[b-qhyx12j11s] {
    padding: 7px 14px;
    font-size: 12.5px;
}

.subhero__tour-cta[b-qhyx12j11s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.subhero__tour-cta i[b-qhyx12j11s] {
    color: var(--color-accent);
    font-size: 16px;
}

.subhero__tour-cta:hover[b-qhyx12j11s] {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: var(--shadow);
}

.camera-grid[b-qhyx12j11s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    background: var(--color-navy);
    padding: 16px;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 159, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.camera-grid__tile[b-qhyx12j11s] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, #16273f 0%, #0e1928 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 34px;
}

.camera-grid__rec[b-qhyx12j11s] {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ff5c5c;
}

.camera-grid__rec span[b-qhyx12j11s] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5c5c;
}

.camera-grid__label[b-qhyx12j11s] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.icon-badge[b-qhyx12j11s] {
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    border-radius: var(--radius-lg);
    padding: 44px 36px;
    box-shadow: 0 16px 48px rgba(0, 159, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.icon-badge__circle[b-qhyx12j11s] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 28px;
}

.icon-badge__stats[b-qhyx12j11s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.icon-badge__stats li[b-qhyx12j11s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15.5px;
    line-height: 1.5;
}

.icon-badge__stats li i[b-qhyx12j11s] {
    color: var(--color-accent);
    margin-top: 3px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .subhero__layout[b-qhyx12j11s] {
        grid-template-columns: 1fr;
    }

    .subhero__copy[b-qhyx12j11s] {
        text-align: center;
    }

    .subhero__sub[b-qhyx12j11s] {
        margin-left: auto;
        margin-right: auto;
    }

    .subhero__actions[b-qhyx12j11s] {
        justify-content: center;
    }

    .subhero__callout[b-qhyx12j11s] {
        left: 12px !important;
        right: 12px;
        top: auto !important;
        bottom: 12px;
        width: auto;
    }
}

@media (max-width: 768px) {
    .subhero[b-qhyx12j11s] {
        /* Still needs to clear the fixed .site-header — a flat 28px
           here (with no --header-height term) let the eyebrow render
           up under the header instead of below it. */
        padding: calc(var(--header-height) + 28px) 0 48px;
    }
}
/* /Components/Sections/TeamToolsSection.razor.rz.scp.css */
.teams-wrap[b-5maxibh18a] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.teams-tabs-outer[b-5maxibh18a] {
    display: flex;
    justify-content: center;
    margin: 32px 0 18px;
    overflow-x: auto;
}

.teams-tabs[b-5maxibh18a] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.teams-tab[b-5maxibh18a] {
    padding: 8px 22px;
    border-radius: 999px;
    border: 1.5px solid #e0e0e0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.teams-tab:hover[b-5maxibh18a],
.teams-tab.is-active[b-5maxibh18a] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.teams-tab.is-active[b-5maxibh18a] {
    border-width: 2px;
    background: var(--color-accent-soft);
}

.teams-panel[b-5maxibh18a] {
    box-shadow: var(--shadow);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 28px;
}

.teams-panel-top[b-5maxibh18a] {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.teams-left[b-5maxibh18a] {
    flex: 0 0 40%;
    max-width: 420px;
}

.teams-label[b-5maxibh18a] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}

.teams-left h3[b-5maxibh18a] {
    font-size: clamp(19px, 1.8vw, 22px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    color: var(--color-text);
    margin: 0 0 16px;
}

.teams-left ul[b-5maxibh18a] {
    list-style: none;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teams-left li[b-5maxibh18a] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}

.teams-left li i[b-5maxibh18a] {
    color: var(--color-accent);
    margin-top: 1px;
}

.teams-cta[b-5maxibh18a] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.teams-right[b-5maxibh18a] {
    flex: 1;
    min-width: 0;
}

.teams-right img[b-5maxibh18a] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.teams-tools[b-5maxibh18a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
}

/* Same card structure as .industry-card: flex row, icon badge on the
   left, title + description stacked to the right. */
.teams-tool[b-5maxibh18a] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.teams-tool:hover[b-5maxibh18a] {
    border-color: var(--color-accent);
    box-shadow: 0 10px 22px rgba(20, 35, 45, .08);
}

.teams-tool:hover .teams-tool__icon[b-5maxibh18a] {
    background: var(--color-accent-soft);
}

.teams-tool__icon[b-5maxibh18a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-bg-soft);
    font-size: 15px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.teams-tool__body[b-5maxibh18a] {
    min-width: 0;
}

/* Sized to give the longer titles (e.g. Maintenance's "MTTR & MTBF
   Metrics") room to fit without wrapping as awkwardly in a 4-up grid. */
.teams-tool__body h3[b-5maxibh18a] {
    margin: 0 0 3px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

.teams-tool__body p[b-5maxibh18a] {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .teams-panel-top[b-5maxibh18a] {
        flex-direction: column;
        gap: 24px;
    }

    .teams-panel[b-5maxibh18a] {
        padding: 24px;
    }

    .teams-left[b-5maxibh18a] {
        max-width: none;
        flex: 1;
    }

    .teams-tools[b-5maxibh18a] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    /* Drop each tool's description on mobile — icon + title carries
       enough of the point in a 2-up grid, and losing the paragraph saves
       real vertical space in an already long-scrolling page. */
    .teams-tool__body p[b-5maxibh18a] {
        display: none;
    }

    .teams-tool[b-5maxibh18a] {
        align-items: center;
        padding: 12px 14px;
    }
}
/* /Components/Sections/TextBlockSection.razor.rz.scp.css */
.textblock__inner[b-jei6gqefae] {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.textblock__inner.is-left[b-jei6gqefae] {
    text-align: left;
    margin-left: 0;
}

.textblock__inner h2[b-jei6gqefae] {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: 18px;
}

.textblock__inner p[b-jei6gqefae] {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.textblock__inner p + p[b-jei6gqefae] {
    margin-top: 16px;
}
/* /Components/Sections/WebinarListSection.razor.rz.scp.css */
.webinars__list[b-ygi5v7a3xx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.webinars__item[b-ygi5v7a3xx] {
    display: flex;
    gap: 40px;
    padding: 32px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.webinars__main[b-ygi5v7a3xx] {
    flex: 1.6;
    min-width: 0;
}

.webinars__badge[b-ygi5v7a3xx] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.webinars__main h3[b-ygi5v7a3xx] {
    margin: 0 0 10px;
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--color-text);
}

.webinars__meta[b-ygi5v7a3xx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 16px;
}

.webinars__meta span[b-ygi5v7a3xx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.webinars__desc[b-ygi5v7a3xx] {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.webinars__main h4[b-ygi5v7a3xx] {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.webinars__main ul[b-ygi5v7a3xx] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    list-style: none;
}

.webinars__main li[b-ygi5v7a3xx] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.webinars__main li i[b-ygi5v7a3xx] {
    margin-top: 3px;
    color: var(--color-accent);
    font-size: 13px;
    flex-shrink: 0;
}

.webinars__side[b-ygi5v7a3xx] {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding-left: 32px;
    border-left: 1px solid var(--color-border-light);
}

.webinars__presenter[b-ygi5v7a3xx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.webinars__presenter-label[b-ygi5v7a3xx] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.webinars__presenter-name[b-ygi5v7a3xx] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text);
}

.webinars__side .btn[b-ygi5v7a3xx] {
    width: 100%;
    justify-content: center;
}

@media (max-width: 760px) {
    .webinars__item[b-ygi5v7a3xx] {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }

    .webinars__side[b-ygi5v7a3xx] {
        flex: 1;
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid var(--color-border-light);
    }
}
/* /Components/Shared/FloatingDemoLauncher.razor.rz.scp.css */
.demo-launcher[b-3vgt4we24q] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
}

.demo-launcher__pill[b-3vgt4we24q] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 40px;
    padding: 0 20px 0 14px;
    border-radius: var(--radius-pill);
    background: var(--color-navy);
    color: #fff;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(14, 25, 40, .35);
    /* Every dimension that changes while collapsing (width, padding,
       gap) shares one duration and one no-overshoot easing curve, so
       they all finish at the same instant — staggering them is what
       reads as a "bounce" as the icon arrives early and sits waiting
       for the rest to catch up. justify-content never toggles (see
       .is-scrolling below), so there's no discrete jump either. */
    transition: width .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1), gap .3s cubic-bezier(.4,0,.2,1), background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.demo-launcher__pill:hover[b-3vgt4we24q] {
    background: var(--color-navy-mid);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(14, 25, 40, .4);
}

.demo-launcher__icon[b-3vgt4we24q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* The mark's own glyph sits slightly left of the transparent
       canvas it was cropped from, which reads as dead space on its
       left — nudge it a couple px right to visually center it. */
    transform: translateX(2px);
}

.demo-launcher__icon img[b-3vgt4we24q] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-left: -6px;
}

.demo-launcher__text[b-3vgt4we24q] {
    max-width: 140px;
    overflow: hidden;
    opacity: 1;
    transition: max-width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin .3s cubic-bezier(.4,0,.2,1);
}

/* Actively scrolling: collapse down to just the mark, like a favicon,
   so it stays out of the way while the reader is moving through the
   page, then expand back to the full pill once scrolling settles.
   Width is pinned to the same fixed height set above so this is always
   a true circle, and padding is solved so the icon lands centered
   without ever touching justify-content — see the transition comment
   above for why. wwwroot/floating-demo.js toggles this class. */
.demo-launcher.is-scrolling .demo-launcher__pill[b-3vgt4we24q] {
    width: 40px;
    padding: 0 11px;
    gap: 0;
    /* var(--color-navy) is #0e1928 — same color, just translucent while
       collapsed so it sits a little more quietly over whatever content
       is scrolling underneath it. */
    background: rgba(14, 25, 40, .9);
}

.demo-launcher.is-scrolling .demo-launcher__text[b-3vgt4we24q] {
    max-width: 0;
    opacity: 0;
    margin: 0;
}

.demo-launcher.is-scrolling .demo-launcher__preview[b-3vgt4we24q] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hover preview: a snapshot of the actual product, not a gate — clicking
   anywhere on it (or the pill) just follows the link to the product tour.
   Guarded to real pointers only, so touch screens never get stuck with a
   ":hover" state a tap can't dismiss. */
.demo-launcher__preview[b-3vgt4we24q] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translateX(-50%) translateY(8px);
    width: 300px;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.demo-launcher__preview[b-3vgt4we24q]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    transform: translateX(-50%) rotate(45deg);
}

/* A small, abstract dashboard mock — a bar chart, a trend line, and two
   metric cards — rather than a real product screenshot, so it reads as
   "a live dashboard" at a glance without needing to be legible. */
.demo-launcher__mock[b-3vgt4we24q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 14px;
}

.demo-launcher__mock-bars[b-3vgt4we24q] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 50px;
}

.demo-launcher__bar[b-3vgt4we24q] {
    flex: 1;
    min-width: 0;
    border-radius: 3px 3px 0 0;
}

.demo-launcher__bar.is-green[b-3vgt4we24q] { background: #3ec776; }
.demo-launcher__bar.is-yellow[b-3vgt4we24q] { background: #f5c344; }
.demo-launcher__bar.is-red[b-3vgt4we24q] { background: #f04438; }

.demo-launcher__mock-line[b-3vgt4we24q] {
    display: block;
    width: 100%;
    height: 32px;
}

.demo-launcher__mock-line polyline[b-3vgt4we24q] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.demo-launcher__mock-stats[b-3vgt4we24q] {
    display: flex;
    gap: 8px;
}

.demo-launcher__stat[b-3vgt4we24q] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
}

.demo-launcher__stat-label[b-3vgt4we24q] {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.demo-launcher__stat-value[b-3vgt4we24q] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.demo-launcher__stat-value small[b-3vgt4we24q] {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-subtle);
}

.demo-launcher__preview-caption[b-3vgt4we24q] {
    display: block;
    padding: 14px 16px;
    text-align: left;
}

.demo-launcher__preview-caption strong[b-3vgt4we24q] {
    display: block;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 2px;
}

.demo-launcher__preview-caption span[b-3vgt4we24q] {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
    .demo-launcher__pill:hover .demo-launcher__preview[b-3vgt4we24q],
    .demo-launcher__pill:focus-visible .demo-launcher__preview[b-3vgt4we24q] {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 640px) {
    .demo-launcher[b-3vgt4we24q] {
        bottom: 16px;
    }

    .demo-launcher__preview[b-3vgt4we24q] {
        width: 240px;
    }

    .demo-launcher__mock-bars[b-3vgt4we24q] {
        height: 40px;
    }
}
/* /Components/Shared/ProductWindow.razor.rz.scp.css */
.product-window[b-kx9ywcmpsq] {
    margin: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: #fff;
}

.product-window__bar[b-kx9ywcmpsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border-light);
}

.product-window__dots[b-kx9ywcmpsq] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.product-window__dots span[b-kx9ywcmpsq] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-border);
}

.product-window__label[b-kx9ywcmpsq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-window__body img[b-kx9ywcmpsq] {
    display: block;
    width: 100%;
}

.product-window__caption[b-kx9ywcmpsq] {
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--color-text-subtle);
    border-top: 1px solid var(--color-border-light);
}