/* /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;
}

/* After a link inside a panel is clicked, the cursor is still physically
   hovering that same nav item once the destination page loads (the nav
   itself doesn't move), which would otherwise keep the panel open via
   :hover alone. This class forces it shut until the mouse actually
   leaves the navbar. */
.main-nav.suppress-hover .main-nav__item:hover .main-nav__panel[b-ulim1275ud],
.main-nav.suppress-hover .main-nav__item:focus-within .main-nav__panel[b-ulim1275ud] {
    display: none;
}

.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: 760px;
}

/* Features is the leftmost nav item, so centering its 660px mega panel
   under the trigger (the default .main-nav__panel behavior) pushes the
   panel's left edge past the left edge of the viewport at anything
   narrower than roughly 1300px wide — it stops being centered over
   anything and just clips. Anchoring it to the trigger's own left edge
   instead means it only ever grows rightward, so it can't overflow the
   left side of the screen at any width the desktop nav actually shows
   at. Resources (further right, and still centered) isn't at the same
   risk at these widths, so it's untouched. */
.menu-features .main-nav__panel--mega[b-ulim1275ud] {
    left: 0;
    transform: none;
}

.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;
}

/* The actual input/button now live in NewsletterSignupForm (its own
   .razor.css) — it's a child component rendered via @rendermode, so its
   markup carries that component's own CSS-isolation scope, not this
   file's; a rule here targeting its <input>/<button> would never match. */

.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__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 real preview of the open positions — title, location, a link
   straight to /careers — standing in for the old small team pitch and
   its four-item grid. (Previously a fake "open-positions.json" code
   editor: the same data rendered as raw JSON syntax, which read as a
   rendering bug more than a feature once a location like "Remote,
   United States" ran past the card's edge with no visible way to
   scroll to the rest of it.) */
.about-careers__positions[b-4lwxwybm4h] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 30px 70px rgba(10, 14, 18, .1);
}

.about-careers__positions-head[b-4lwxwybm4h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
}

.about-careers__positions-count[b-4lwxwybm4h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
}

.about-careers__positions-list[b-4lwxwybm4h] {
    list-style: none;
}

.about-careers__positions-list li:not(:last-child)[b-4lwxwybm4h] {
    border-bottom: 1px solid var(--color-border-light);
}

.about-careers__positions-list a[b-4lwxwybm4h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

.about-careers__positions-list a:hover[b-4lwxwybm4h] {
    background: var(--color-accent-soft);
}

.about-careers__positions-list a:hover .about-careers__position-arrow[b-4lwxwybm4h] {
    transform: translateX(2px);
    color: var(--color-accent);
}

.about-careers__position-copy[b-4lwxwybm4h] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.about-careers__position-copy strong[b-4lwxwybm4h] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.about-careers__position-copy span[b-4lwxwybm4h] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.about-careers__position-arrow[b-4lwxwybm4h] {
    flex-shrink: 0;
    color: var(--color-text-subtle);
    transition: transform .15s ease, color .15s ease;
}

@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__positions-list a[b-4lwxwybm4h] {
        padding: 14px 16px;
    }
}
/* /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: start;
}

.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 iframe[b-yyw2kx6p1v] {
    display: block;
    width: 100%;
    /* Tall enough that Calendly's own calendar, time list, and confirm
       step all fit without the widget scrolling inside its own frame —
       the page scrolls instead, not a little box within it. */
    height: 1050px;
    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: 900px;
    }
}
/* /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);
}

@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);
    }
}

/* On mobile this section is the demo's ONLY wrapper (not shared with
   other sections, unlike the home page's .ai-showcase), so it can go
   fully white with no dark edge left showing anywhere around it. */
@media (max-width: 800px) {
    .product-tour-demo[b-jygft3qi9j] {
        background: #fff;
    }
}
/* /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;
    }
}

/* The demo device (.product-reveal, last child of .ai-showcase) goes
   plain white below 800px — see NavatticDemoSection.razor.css — but
   .ai-showcase's own dark background still covers its bottom padding,
   which sits below that white box and showed as a solid black bar
   between it and the next (white) section. The device supplies its own
   bottom whitespace there (padding: 40px 24px), so the section's own
   bottom padding is no longer needed once it's white. */
@media (max-width: 800px) {
    .ai-showcase[b-hav1j0b5ua] {
        padding-bottom: 0;
    }
}
/* /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/AiShowcaseSection.razor.rz.scp.css */
.ai2-showcase[b-5b0d9st0cg] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.ai2-showcase__intro[b-5b0d9st0cg] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.ai2-showcase__intro .section-eyebrow[b-5b0d9st0cg] { justify-content: center; }
.ai2-showcase__intro .section-eyebrow .label[b-5b0d9st0cg] { color: rgba(255, 255, 255, .7); }

.ai2-showcase__intro h1[b-5b0d9st0cg] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.ai2-showcase__intro p[b-5b0d9st0cg] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.ai2-showcase__cta[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .ai2-showcase__cta[b-5b0d9st0cg] {
        flex-direction: column;
        align-items: stretch;
    }
}

.ai2-widget[b-5b0d9st0cg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    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);
}

.ai2-widget__footnote[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

/* ---------------------------------------------------------------------
   1. Ask Essembi — search bar + history.
   --------------------------------------------------------------------- */

.ai2-searchbar[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
}

.ai2-searchbar span[b-5b0d9st0cg] {
    flex: 1;
}

.ai2-searchbar i:last-child[b-5b0d9st0cg] {
    color: var(--color-accent);
}

.ai2-history[b-5b0d9st0cg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai2-history__label[b-5b0d9st0cg] {
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.ai2-history__row[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
}

.ai2-history__row i[b-5b0d9st0cg] {
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: 12px;
}

.ai2-history__row span[b-5b0d9st0cg] {
    flex: 1;
    color: rgba(255, 255, 255, .75);
}

.ai2-history__row em[b-5b0d9st0cg] {
    flex-shrink: 0;
    font-style: normal;
    font-size: 10px;
    color: rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------
   2. OEE drill-down.
   --------------------------------------------------------------------- */

.ai2-oee__head[b-5b0d9st0cg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.ai2-oee__score-label[b-5b0d9st0cg] {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
}

.ai2-oee__score[b-5b0d9st0cg] {
    font-size: 34px;
    font-weight: 800;
    color: #f5c344;
}

.ai2-oee__bars[b-5b0d9st0cg] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
}

.ai2-oee__bar[b-5b0d9st0cg] {
    flex: 1;
    height: var(--h);
    border-radius: 3px 3px 0 0;
}

.ai2-oee__bar.is-good[b-5b0d9st0cg] { background: #3fae4a; }
.ai2-oee__bar.is-warn[b-5b0d9st0cg] { background: #f5c344; }
.ai2-oee__bar.is-bad[b-5b0d9st0cg] { background: #f04438; }

.ai2-oee__stats[b-5b0d9st0cg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.ai2-oee__stat[b-5b0d9st0cg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    text-align: center;
}

.ai2-oee__stat span[b-5b0d9st0cg] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.ai2-oee__stat strong[b-5b0d9st0cg] {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.ai2-oee__stat.is-good[b-5b0d9st0cg] {
    background: rgba(63, 174, 74, .12);
}

.ai2-oee__stat.is-good strong[b-5b0d9st0cg] {
    color: #7be08a;
}

.ai2-oee__stat.is-warn[b-5b0d9st0cg] {
    background: rgba(245, 195, 68, .12);
}

.ai2-oee__stat.is-warn strong[b-5b0d9st0cg] {
    color: #f5c344;
}

.ai2-oee__stat.is-bad[b-5b0d9st0cg] {
    background: rgba(240, 68, 56, .12);
}

.ai2-oee__stat.is-bad strong[b-5b0d9st0cg] {
    color: #ff8177;
}

.ai2-oee__insight[b-5b0d9st0cg] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(0, 159, 255, .08);
    border: 1px solid rgba(0, 159, 255, .18);
}

.ai2-oee__insight-icon[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 159, 255, .18);
    color: var(--color-accent);
    font-size: 12px;
    flex-shrink: 0;
}

.ai2-oee__insight p[b-5b0d9st0cg] {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}

.ai2-oee__causes[b-5b0d9st0cg] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ai2-oee__causes li[b-5b0d9st0cg] {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}

.ai2-oee__causes strong[b-5b0d9st0cg] {
    color: #fff;
}

/* ---------------------------------------------------------------------
   3. AI emails.
   --------------------------------------------------------------------- */

.ai2-email__head[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.ai2-email__head i[b-5b0d9st0cg] {
    color: var(--color-accent);
}

.ai2-email__callout[b-5b0d9st0cg] {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}

.ai2-email__callout strong[b-5b0d9st0cg] { color: #fff; }

.ai2-email__callout.is-good[b-5b0d9st0cg] {
    background: rgba(63, 174, 74, .1);
    border: 1px solid rgba(63, 174, 74, .28);
}

.ai2-email__callout.is-good strong[b-5b0d9st0cg] { color: #7be08a; }

.ai2-email__callout.is-warn[b-5b0d9st0cg] {
    background: rgba(245, 195, 68, .1);
    border: 1px solid rgba(245, 195, 68, .28);
}

.ai2-email__callout.is-warn strong[b-5b0d9st0cg] { color: #f5c344; }

.ai2-email__output[b-5b0d9st0cg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.ai2-email__output-label[b-5b0d9st0cg] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.ai2-email__row[b-5b0d9st0cg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}

.ai2-email__row span[b-5b0d9st0cg] {
    flex: 0 0 32px;
    color: rgba(255, 255, 255, .6);
    font-weight: 700;
}

.ai2-email__track[b-5b0d9st0cg] {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.ai2-email__fill[b-5b0d9st0cg] {
    height: 100%;
    border-radius: inherit;
}

.ai2-email__fill.is-good[b-5b0d9st0cg] { background: #3fae4a; }
.ai2-email__fill.is-bad[b-5b0d9st0cg] { background: #f04438; }

.ai2-email__row em[b-5b0d9st0cg] {
    flex-shrink: 0;
    font-style: normal;
    color: rgba(255, 255, 255, .7);
    font-variant-numeric: tabular-nums;
}
/* /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;
}

@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;
    }
}
/* /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;
}

/* The gap between field groups used to live here as
   ".contact-sales__form-col form { gap: ... }", but it never actually
   applied: <form> is rendered by EditForm, a Blazor framework
   component, so it never carries this component's CSS-isolation scope
   attribute — same root cause as the input/select/textarea rules below
   needing to live in wwwroot/app.css instead of here. Moved there. */

.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: 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

/* 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__form-col button[type="submit"]:disabled[b-n0bw5c48b0] {
    opacity: .7;
    cursor: default;
}

.contact-sales__form-error[b-n0bw5c48b0] {
    margin: -6px 0 0;
    color: #d64545;
    font-size: 13.5px;
    font-weight: 500;
}

.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/ContinuousImprovementShowcaseSection.razor.rz.scp.css */
.ci-showcase[b-z6rjtyp1od] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.ci-showcase__intro[b-z6rjtyp1od] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.ci-showcase__intro .section-eyebrow[b-z6rjtyp1od] { justify-content: center; }
.ci-showcase__intro .section-eyebrow .label[b-z6rjtyp1od] { color: rgba(255, 255, 255, .7); }

.ci-showcase__intro h1[b-z6rjtyp1od] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.ci-showcase__intro p[b-z6rjtyp1od] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.ci-showcase__cta[b-z6rjtyp1od] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .ci-showcase__cta[b-z6rjtyp1od] {
        flex-direction: column;
        align-items: stretch;
    }
}

.ci-widget[b-z6rjtyp1od] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    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);
}

.ci-widget__cta[b-z6rjtyp1od] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.ci-chips[b-z6rjtyp1od] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ci-chip[b-z6rjtyp1od] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   1. Linked to anything.
   --------------------------------------------------------------------- */

.ci-link__chain[b-z6rjtyp1od] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ci-link__step[b-z6rjtyp1od] {
    flex: 1;
    min-width: 160px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}

.ci-link__step.is-target[b-z6rjtyp1od] {
    background: rgba(0, 159, 255, .1);
    border-color: rgba(0, 159, 255, .3);
    color: #fff;
}

.ci-link__chain > i[b-z6rjtyp1od] {
    color: rgba(255, 255, 255, .3);
    flex-shrink: 0;
}

.ci-link__tag[b-z6rjtyp1od] {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.ci-link__step.is-target .ci-link__tag[b-z6rjtyp1od] {
    color: #6ec3ff;
}

/* ---------------------------------------------------------------------
   2. By type & category.
   --------------------------------------------------------------------- */

.ci-cat__trend[b-z6rjtyp1od] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ci-cat__trend-head[b-z6rjtyp1od] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.ci-cat__trend-head span[b-z6rjtyp1od] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.ci-cat__trend-head strong[b-z6rjtyp1od] {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.ci-cat__trend-chart[b-z6rjtyp1od] {
    width: 100%;
    height: 76px;
    display: block;
}

.ci-cat__trend-line[b-z6rjtyp1od] {
    fill: none;
    stroke: #009fff;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ci-cat__trend-axis[b-z6rjtyp1od] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, .4);
}

.ci-cat__row[b-z6rjtyp1od] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.ci-cat__row span[b-z6rjtyp1od] {
    flex: 0 0 150px;
    color: rgba(255, 255, 255, .7);
}

.ci-cat__track[b-z6rjtyp1od] {
    flex: 1;
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.ci-cat__fill[b-z6rjtyp1od] {
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.ci-cat__row em[b-z6rjtyp1od] {
    flex: 0 0 48px;
    text-align: right;
    font-style: normal;
    font-weight: 700;
    color: #fff;
}

/* ---------------------------------------------------------------------
   3. Prioritization scorecard.
   --------------------------------------------------------------------- */

.ci-score__row[b-z6rjtyp1od] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .75);
}

.ci-score__row--head[b-z6rjtyp1od] {
    border-top: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.ci-badge[b-z6rjtyp1od] {
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.ci-badge--medium[b-z6rjtyp1od] {
    color: #f5c344;
    background: rgba(245, 195, 68, .12);
}

.ci-badge--progress[b-z6rjtyp1od] {
    color: #6ec3ff;
    background: rgba(0, 159, 255, .14);
}

.ci-badge--review[b-z6rjtyp1od] {
    color: #7be08a;
    background: rgba(123, 224, 138, .12);
}

/* ---------------------------------------------------------------------
   4. Gantt timelines.
   --------------------------------------------------------------------- */

.ci-gantt__quarters[b-z6rjtyp1od] {
    display: flex;
    justify-content: space-between;
    padding-left: 140px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.ci-gantt__row[b-z6rjtyp1od] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ci-gantt__label[b-z6rjtyp1od] {
    flex: 0 0 140px;
    font-size: 11px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.3;
}

.ci-gantt__track[b-z6rjtyp1od] {
    position: relative;
    flex: 1;
    height: 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
}

.ci-gantt__bar[b-z6rjtyp1od] {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
}

.ci-gantt__bar.is-risk[b-z6rjtyp1od] {
    background: #f5c344;
}

/* ---------------------------------------------------------------------
   5. Kaizen ideas from the floor.
   --------------------------------------------------------------------- */

.ci-kaizen__head[b-z6rjtyp1od] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.ci-kaizen__head i[b-z6rjtyp1od] {
    color: #f5c344;
}

.ci-kaizen__field[b-z6rjtyp1od] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ci-kaizen__field span[b-z6rjtyp1od] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.ci-kaizen__input[b-z6rjtyp1od] {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .8);
}

.ci-kaizen__input--area[b-z6rjtyp1od] {
    line-height: 1.5;
}

@media (max-width: 560px) {
    .ci-score__row[b-z6rjtyp1od] {
        grid-template-columns: 1fr;
        gap: 2px;
        text-align: left;
    }

    .ci-gantt__quarters[b-z6rjtyp1od] {
        display: none;
    }

    .ci-gantt__label[b-z6rjtyp1od] {
        flex: 0 0 100px;
        font-size: 10px;
    }
}
/* /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/DarkBenefitsSection.razor.rz.scp.css */
.dark-benefits[b-eakzm5ih2m] {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
    color: #fff;
}

.dark-benefits .section-eyebrow[b-eakzm5ih2m] {
    justify-content: center;
}

.dark-benefits .section-eyebrow .label[b-eakzm5ih2m] {
    color: rgba(255, 255, 255, .7);
}

.dark-benefits h2[b-eakzm5ih2m] {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 14px 0 16px;
}

.dark-benefits > p[b-eakzm5ih2m] {
    max-width: 620px;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.dark-benefits__grid[b-eakzm5ih2m] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 16px;
    margin-top: 40px;
    text-align: left;
}

.dark-benefit[b-eakzm5ih2m] {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
}

/* Icon + title share one row. A fixed min-height on the row (enough for
   two lines of title) is what actually fixes the "cards look bad"
   problem: without it, a one-line title and a two-line title push the
   description below to two different heights from card to card. With
   it, every card's description starts at the same row regardless of how
   long its title happens to be. */
.dark-benefit__head[b-eakzm5ih2m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 10px;
}

.dark-benefit__icon[b-eakzm5ih2m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(0, 159, 255, .16);
    color: var(--color-accent);
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.dark-benefit__head h3[b-eakzm5ih2m] {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.dark-benefit p[b-eakzm5ih2m] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 900px) {
    .dark-benefits__grid[b-eakzm5ih2m] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .dark-benefits__grid[b-eakzm5ih2m] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 28px;
    }

    .dark-benefit[b-eakzm5ih2m] {
        padding: 16px;
    }
}
/* /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/FeatureSpotlightSection.razor.rz.scp.css */
/* No padding/background of its own — the wrapping showcase band supplies
   the shared dark gradient and the gap between rows. */
.feature-spotlight[b-0hq2h47j5h] {
    color: #fff;
}

.feature-spotlight__layout[b-0hq2h47j5h] {
    display: flex;
    align-items: center;
    gap: 56px;
}

.feature-spotlight.is-reverse .feature-spotlight__layout[b-0hq2h47j5h] {
    flex-direction: row-reverse;
}

.feature-spotlight__copy[b-0hq2h47j5h] {
    flex: 0 0 auto;
    width: 38%;
    max-width: 420px;
}

.feature-spotlight__copy .section-eyebrow .label[b-0hq2h47j5h] {
    color: rgba(255, 255, 255, .7);
}

.feature-spotlight__copy h2[b-0hq2h47j5h] {
    margin: 14px 0 16px;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.feature-spotlight__copy p[b-0hq2h47j5h] {
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
}

/* The widget itself: a self-contained mock built from markup and CSS,
   not a screenshot — the caller (e.g. SchedulingShowcaseSection) supplies
   the actual widget content and its own styling for it. This just sets
   the shared card chrome every widget sits inside. */
.feature-spotlight__widget[b-0hq2h47j5h] {
    flex: 1;
    min-width: 0;
    max-width: 560px;
    padding: 22px;
    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);
}

@media (max-width: 900px) {
    .feature-spotlight__layout[b-0hq2h47j5h],
    .feature-spotlight.is-reverse .feature-spotlight__layout[b-0hq2h47j5h] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .feature-spotlight__copy[b-0hq2h47j5h] {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .feature-spotlight__copy .section-eyebrow[b-0hq2h47j5h] {
        justify-content: center;
    }

    .feature-spotlight__copy p[b-0hq2h47j5h] {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .feature-spotlight__widget[b-0hq2h47j5h] {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}
/* /Components/Sections/FunctionalPageShowcaseSection.razor.rz.scp.css */
/* Same dark-panel treatment as SchedulingShowcaseSection /
   ProductionShowcaseSection — this is the first section on the page (no
   hero above it), so the top padding also clears the fixed header. */
.fps-showcase[b-2bi4d2dosb] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.fps-showcase__intro[b-2bi4d2dosb] {
    max-width: 780px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.fps-showcase__intro .section-eyebrow[b-2bi4d2dosb] {
    justify-content: center;
}

.fps-showcase__intro .section-eyebrow .label[b-2bi4d2dosb] {
    color: rgba(255, 255, 255, .7);
}

.fps-showcase__intro h1[b-2bi4d2dosb] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.fps-showcase__intro p[b-2bi4d2dosb] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.fps-showcase__cta[b-2bi4d2dosb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

/* Unlike the home page's .ai-showcase (Home.razor.css), this never had a
   narrower-screen gap/padding pass — the 96px gap between the intro and
   the benefits grid stayed fixed at every width. On a page like Edge
   Devices, where those two pieces are the entire page (no widgets in
   between), that oversized gap is most of what a phone screen shows. */
@media (max-width: 900px) {
    .fps-showcase[b-2bi4d2dosb] {
        gap: 56px;
        padding: calc(var(--header-height) + 48px) 0 64px;
    }
}

@media (max-width: 480px) {
    .fps-showcase__cta[b-2bi4d2dosb] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /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 rows, not a 2x2 grid — same "sheet view" pattern as the app's
   live data grids: a small live indicator light on the left instead of
   a static icon-only tile, since these four numbers are the ones
   actually moving right now, not just a static "good news" badge. */
.cycle__metrics[b-tv8cn01nhq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    width: 300px;
}

.cycle__metric-row[b-tv8cn01nhq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(64, 192, 87, .07);
    border: 1px solid rgba(64, 192, 87, .3);
}

/* The "flashing" live light — a small green dot with a soft pulsing
   halo, the same live/updating cue used on the app's sheet views. */
.cycle__metric-light[b-tv8cn01nhq] {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #40C057;
}

.cycle__metric-light[b-tv8cn01nhq]::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #40C057;
    opacity: .55;
    animation: cycle-metric-pulse-b-tv8cn01nhq 1.8s ease-out infinite;
}

@keyframes cycle-metric-pulse-b-tv8cn01nhq {
    0% { transform: scale(.6); opacity: .55; }
    70% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cycle__metric-light[b-tv8cn01nhq]::after { animation: none; opacity: 0; }
}

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

.cycle__metric-trend[b-tv8cn01nhq] {
    flex: 0 0 auto;
    font-size: 18px;
    color: #40C057;
}

@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: 8px;
    }

    .cycle__metric-row[b-tv8cn01nhq] {
        padding: 10px 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: 8px;
        padding: 14px;
    }

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

    /* A hair smaller on both the icon and the title — enough for names
       like "Packaged Chemical" to fit on one line instead of wrapping
       to two in this 2-up card. */
    .industry-card__icon[b-w0nuwzf5xi] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .industry-card h3[b-w0nuwzf5xi] {
        font-size: 13px;
        white-space: nowrap;
    }

    .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;
}

/* ---------------------------------------------------------------------
   Built widgets standing in for the two Learning Center screenshots —
   same composition and colors as those PNGs (they were already the
   look we want), just live markup instead of a static image.
   --------------------------------------------------------------------- */

.learn-card__visual[b-qc1wncr6mm] {
    flex: 0 0 230px;
    width: 230px;
    height: 160px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: #fff;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.learn-oee__title[b-qc1wncr6mm] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

/* Shared "app tile" — same grammar as the app screens: bordered box,
   uppercase label, bold number, color spent only on the graded status
   (10% opacity fill, colored border and text). Duplicated per scoped
   file, same convention used across the other rebuilt widgets. */
.app-tile[b-qc1wncr6mm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-align: center;
}
.app-tile span[b-qc1wncr6mm] { font-size: 7.5px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--color-text-subtle); }
.app-tile strong[b-qc1wncr6mm] { font-size: 14px; font-weight: 800; color: var(--color-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.app-tile.is-good[b-qc1wncr6mm] { border-color: #40C057; background: rgba(64, 192, 87, .10); }
.app-tile.is-good span[b-qc1wncr6mm], .app-tile.is-good strong[b-qc1wncr6mm] { color: #40C057; }
.app-tile.is-warn[b-qc1wncr6mm] { border-color: #FFD43B; background: rgba(255, 212, 59, .10); }
.app-tile.is-warn span[b-qc1wncr6mm], .app-tile.is-warn strong[b-qc1wncr6mm] { color: #FFD43B; }
.app-tile.is-bad[b-qc1wncr6mm] { border-color: #FF4444; background: rgba(255, 68, 68, .10); }
.app-tile.is-bad span[b-qc1wncr6mm], .app-tile.is-bad strong[b-qc1wncr6mm] { color: #FF4444; }

.learn-oee__body[b-qc1wncr6mm] { flex: 1; display: flex; gap: 8px; min-height: 0; }
.learn-oee__score[b-qc1wncr6mm] { flex: 1.3; gap: 4px; }
.learn-oee__score span[b-qc1wncr6mm] { font-size: 8px; }
.learn-oee__score strong[b-qc1wncr6mm] { font-size: 26px; }
.learn-oee__stats[b-qc1wncr6mm] { flex: 1; display: flex; flex-direction: column; gap: 4px; }
/* min-height: 0 lets these shrink below their own content's min size —
   without it flexbox refuses to shrink them past that, so the 3-tile
   stack overflowed the card's fixed height (and got clipped by
   .learn-card__visual's overflow: hidden) instead of matching the
   score box's height on the other side of the row. */
.learn-oee__stats .app-tile[b-qc1wncr6mm] { flex: 1; min-height: 0; }

.learn-roi__chart[b-qc1wncr6mm] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.learn-roi__bar[b-qc1wncr6mm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.learn-roi__bar .seg[b-qc1wncr6mm] { flex: 1; }
.learn-roi__bar .seg--top[b-qc1wncr6mm] { background: #0f6fb8; }
.learn-roi__bar .seg--mid[b-qc1wncr6mm] { background: var(--color-accent); }
.learn-roi__bar .seg--base[b-qc1wncr6mm] { background: #bfe0f7; }

.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;
    }

    .learn-card__visual[b-qc1wncr6mm] {
        width: 100%;
        height: 150px;
    }
}
/* /Components/Sections/MaintenanceShowcaseSection.razor.rz.scp.css */
/* Same dark-panel treatment as SchedulingShowcaseSection /
   ProductionShowcaseSection / QualityShowcaseSection. */
.maint-showcase[b-wylok0d20n] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.maint-showcase__intro[b-wylok0d20n] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.maint-showcase__intro .section-eyebrow[b-wylok0d20n] {
    justify-content: center;
}

.maint-showcase__intro .section-eyebrow .label[b-wylok0d20n] {
    color: rgba(255, 255, 255, .7);
}

.maint-showcase__intro h1[b-wylok0d20n] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.maint-showcase__intro p[b-wylok0d20n] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.maint-showcase__cta[b-wylok0d20n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .maint-showcase__cta[b-wylok0d20n] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------
   Shared widget chrome.
   --------------------------------------------------------------------- */

.maint-widget[b-wylok0d20n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    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);
}

.maint-widget__footnote[b-wylok0d20n] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.maint-chips[b-wylok0d20n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.maint-chip[b-wylok0d20n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.maint-chip--good[b-wylok0d20n] {
    color: #7be08a;
    border-color: rgba(123, 224, 138, .25);
    background: rgba(123, 224, 138, .08);
}

/* ---------------------------------------------------------------------
   1. Live line status board — a small kanban board.
   --------------------------------------------------------------------- */

.maint-board__grid[b-wylok0d20n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: start;
}

.maint-board__col[b-wylok0d20n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maint-board__head[b-wylok0d20n] {
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-align: center;
}

.maint-board__head--downtime[b-wylok0d20n] { background: #d63a8a; }
.maint-board__head--required[b-wylok0d20n] { background: #e2453c; }
.maint-board__head--slow[b-wylok0d20n] { background: #d9b23c; color: #2a2205; }

.maint-board__card[b-wylok0d20n] {
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

.maint-board__card-head[b-wylok0d20n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.maint-board__card-head span[b-wylok0d20n] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.maint-board__card p[b-wylok0d20n] {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .6);
}

.maint-board__empty[b-wylok0d20n] {
    padding: 14px 10px;
    border-radius: var(--radius);
    border: 1px dashed rgba(255, 255, 255, .14);
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, .35);
}

.maint-dot[b-wylok0d20n] {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.maint-dot--red[b-wylok0d20n] { background: #f04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, .18); }
.maint-dot--yellow[b-wylok0d20n] { background: #f5c344; box-shadow: 0 0 0 3px rgba(245, 195, 68, .18); }

/* ---------------------------------------------------------------------
   2. Corrective & preventive upcoming lists.
   --------------------------------------------------------------------- */

.maint-widget--upcoming[b-wylok0d20n] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
}

.maint-upcoming__col[b-wylok0d20n] {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.maint-upcoming__head[b-wylok0d20n] {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.maint-upcoming__row[b-wylok0d20n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
}

.maint-upcoming__info[b-wylok0d20n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.maint-upcoming__info strong[b-wylok0d20n] {
    color: #fff;
    font-size: 12.5px;
}

.maint-upcoming__info span[b-wylok0d20n] {
    color: rgba(255, 255, 255, .6);
}

.maint-upcoming__row em[b-wylok0d20n] {
    flex-shrink: 0;
    padding-top: 1px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #f5c344;
}

/* ---------------------------------------------------------------------
   3. MTTR & MTBF.
   --------------------------------------------------------------------- */

.maint-mttr__stats[b-wylok0d20n] {
    display: flex;
    gap: 24px;
}

.maint-mttr__label[b-wylok0d20n] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.maint-mttr__value[b-wylok0d20n] {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.maint-mttr__pareto[b-wylok0d20n] {
    display: block;
    width: 100%;
    height: auto;
}

.maint-mttr__gridline[b-wylok0d20n] {
    stroke: rgba(255, 255, 255, .08);
    stroke-width: 1;
}

.maint-mttr__baseline[b-wylok0d20n] {
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1;
}

.maint-mttr__par-bar[b-wylok0d20n] {
    fill: #2fb0a3;
}

.maint-mttr__cum-line[b-wylok0d20n] {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    opacity: .85;
}

.maint-mttr__cum-dot[b-wylok0d20n] {
    fill: #fff;
}

.maint-mttr__cum-label[b-wylok0d20n] {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    fill: #fff;
}

.maint-mttr__cum-label--on-bar[b-wylok0d20n] {
    fill: #06231f;
}

.maint-mttr__par-labels[b-wylok0d20n] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.maint-mttr__par-labels span[b-wylok0d20n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
}

.maint-mttr__par-labels strong[b-wylok0d20n] {
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
}

.maint-mttr__trend-wrap[b-wylok0d20n] {
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.maint-mttr__axis-title[b-wylok0d20n] {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.maint-mttr__trend[b-wylok0d20n] {
    display: block;
    width: 100%;
    height: auto;
}

.maint-mttr__trend-line[b-wylok0d20n] {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1.5;
}

.maint-mttr__tick[b-wylok0d20n] {
    font-family: var(--font);
    font-size: 9px;
    fill: rgba(255, 255, 255, .45);
}

.maint-mttr__trend-axis[b-wylok0d20n] {
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    margin-top: 2px;
    font-size: 9.5px;
    color: rgba(255, 255, 255, .45);
}

/* ---------------------------------------------------------------------
   4. Incident log.
   --------------------------------------------------------------------- */

.maint-incident__row[b-wylok0d20n] {
    display: grid;
    grid-template-columns: 90px 1fr auto 60px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
}

.maint-incident__wo[b-wylok0d20n] {
    color: rgba(255, 255, 255, .5);
    font-variant-numeric: tabular-nums;
}

.maint-incident__line[b-wylok0d20n] {
    color: #fff;
    font-weight: 600;
}

.maint-incident__type[b-wylok0d20n] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.maint-incident__type--down[b-wylok0d20n] { background: #d63a8a; }
.maint-incident__type--material[b-wylok0d20n] { background: #e08a3c; }
.maint-incident__type--required[b-wylok0d20n] { background: #e2453c; }
.maint-incident__type--quality[b-wylok0d20n] { background: #6c6ff0; }

.maint-incident__dur[b-wylok0d20n] {
    text-align: right;
    color: rgba(255, 255, 255, .6);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   5. PM triggers.
   --------------------------------------------------------------------- */

.maint-widget--triggers[b-wylok0d20n] {
    flex-direction: row;
    flex-wrap: wrap;
}

.maint-trigger[b-wylok0d20n] {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.maint-trigger__icon[b-wylok0d20n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 159, 255, .16);
    color: var(--color-accent);
    font-size: 17px;
}

.maint-trigger__label[b-wylok0d20n] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.maint-trigger__value[b-wylok0d20n] {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

/* ---------------------------------------------------------------------
   6. Maintenance requests from the floor.
   --------------------------------------------------------------------- */

.maint-request__head[b-wylok0d20n] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.maint-request__head i[b-wylok0d20n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(240, 68, 56, .14);
    color: #ff8177;
    font-size: 15px;
    flex-shrink: 0;
}

.maint-request__head strong[b-wylok0d20n] {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
    color: #fff;
}

.maint-request__head p[b-wylok0d20n] {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}

/* ---------------------------------------------------------------------
   7. Centerlining — set point checks against target and min/max.
   --------------------------------------------------------------------- */

.maint-center__row[b-wylok0d20n] {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
}

.maint-center__name[b-wylok0d20n] {
    font-weight: 700;
    color: #fff;
}

.maint-center__spec[b-wylok0d20n] {
    color: rgba(255, 255, 255, .6);
}

.maint-center__spec em[b-wylok0d20n] {
    font-style: normal;
    color: rgba(255, 255, 255, .4);
}

.maint-center__actual[b-wylok0d20n] {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
}

.maint-pass[b-wylok0d20n],
.maint-fail[b-wylok0d20n] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.maint-pass[b-wylok0d20n] {
    color: #7be08a;
    background: rgba(123, 224, 138, .12);
}

.maint-fail[b-wylok0d20n] {
    color: #ff8177;
    background: rgba(240, 68, 56, .14);
}

@media (max-width: 560px) {
    .maint-board__grid[b-wylok0d20n] {
        grid-template-columns: 1fr;
    }

    .maint-incident__row[b-wylok0d20n] {
        grid-template-columns: 1fr auto;
        grid-template-areas: "line type" "wo dur";
    }

    .maint-incident__wo[b-wylok0d20n] { grid-area: wo; }
    .maint-incident__line[b-wylok0d20n] { grid-area: line; }
    .maint-incident__type[b-wylok0d20n] { grid-area: type; }
    .maint-incident__dur[b-wylok0d20n] { grid-area: dur; }

    .maint-widget--upcoming[b-wylok0d20n],
    .maint-widget--triggers[b-wylok0d20n] {
        flex-direction: column;
    }

    .maint-center__row[b-wylok0d20n] {
        grid-template-columns: 1fr;
        gap: 4px;
        text-align: left;
    }
}
/* /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;
}

/* ---------------------------------------------------------------------
   Built widgets standing in for each metric's screenshot — same scheme
   as the functional pages' dark showcase widgets, re-themed light:
   bordered tracks, bold numbers, semantic red/amber/green fills.
   --------------------------------------------------------------------- */

.ms-card[b-fjpbhj6jpi] {
    width: 100%;
    min-height: 340px;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow);
    border-radius: 10px;
    background: #fff;
    padding: 32px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.ms-title[b-fjpbhj6jpi] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
}

.ms-title i[b-fjpbhj6jpi] { color: var(--color-accent); }

.ms-foot[b-fjpbhj6jpi] {
    font-size: 11.5px;
    color: var(--color-text-subtle);
}

.ms-foot strong[b-fjpbhj6jpi] { color: var(--color-text); }

.ms-foot .tick[b-fjpbhj6jpi] {
    display: inline-block;
    width: 2px;
    height: 10px;
    background: var(--color-text-subtle);
    margin-right: 6px;
    vertical-align: -1px;
}

/* shared bar-row pattern (labor cost, run rate, MTTR) */
.ms-labor__row[b-fjpbhj6jpi], .ms-runrate__row[b-fjpbhj6jpi], .ms-mttr__row[b-fjpbhj6jpi] {
    display: grid;
    grid-template-columns: 110px 1fr 60px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.ms-labor[b-fjpbhj6jpi], .ms-runrate[b-fjpbhj6jpi], .ms-mttr[b-fjpbhj6jpi] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ms-labor__row .track[b-fjpbhj6jpi], .ms-runrate__row .track[b-fjpbhj6jpi], .ms-mttr__row .track[b-fjpbhj6jpi] {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    overflow: visible;
}

.ms-labor__row .fill[b-fjpbhj6jpi], .ms-runrate__row .fill[b-fjpbhj6jpi], .ms-mttr__row .fill[b-fjpbhj6jpi] {
    height: 100%;
    border-radius: 999px;
    display: block;
}

.fill.is-good[b-fjpbhj6jpi] { background: #40C057; }
.fill.is-warn[b-fjpbhj6jpi] { background: #FFD43B; }
.fill.is-bad[b-fjpbhj6jpi] { background: #FF4444; }

.ms-runrate__row .target[b-fjpbhj6jpi] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--color-text);
}

.ms-labor__row em[b-fjpbhj6jpi], .ms-runrate__row em[b-fjpbhj6jpi], .ms-mttr__row em[b-fjpbhj6jpi] {
    font-style: normal;
    font-weight: 800;
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ms-labor__row em.is-good[b-fjpbhj6jpi], .ms-runrate__row em.is-good[b-fjpbhj6jpi], .ms-mttr__row em.is-good[b-fjpbhj6jpi] { color: #40C057; }
.ms-labor__row em.is-warn[b-fjpbhj6jpi], .ms-runrate__row em.is-warn[b-fjpbhj6jpi], .ms-mttr__row em.is-warn[b-fjpbhj6jpi] { color: #FFD43B; }
.ms-labor__row em.is-bad[b-fjpbhj6jpi], .ms-runrate__row em.is-bad[b-fjpbhj6jpi], .ms-mttr__row em.is-bad[b-fjpbhj6jpi] { color: #FF4444; }

/* Shared "app tile" — plain bordered stat box, same grammar as the
   Team widgets' .tt-stat-box: label + bold number, color spent only
   on the status (10% opacity fill, colored border, colored text). */
.app-tile[b-fjpbhj6jpi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 78px;
    padding: 12px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: center;
}
.app-tile span[b-fjpbhj6jpi] { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-subtle); }
.app-tile strong[b-fjpbhj6jpi] { font-size: 22px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.app-tile.is-good[b-fjpbhj6jpi] { border-color: #40C057; background: rgba(64, 192, 87, .10); }
.app-tile.is-good span[b-fjpbhj6jpi], .app-tile.is-good strong[b-fjpbhj6jpi] { color: #40C057; }
.app-tile.is-warn[b-fjpbhj6jpi] { border-color: #FFD43B; background: rgba(255, 212, 59, .10); }
.app-tile.is-warn span[b-fjpbhj6jpi], .app-tile.is-warn strong[b-fjpbhj6jpi] { color: #FFD43B; }
.app-tile.is-bad[b-fjpbhj6jpi] { border-color: #FF4444; background: rgba(255, 68, 68, .10); }
.app-tile.is-bad span[b-fjpbhj6jpi], .app-tile.is-bad strong[b-fjpbhj6jpi] { color: #FF4444; }

/* OEE — score tile + a colored daily bar chart, three graded sub-metric
   tiles, and a 14-day trend line below, echoing the app's own OEE view
   instead of a generic three-bar breakdown. */
.ms-oee2[b-fjpbhj6jpi] { display: flex; align-items: stretch; gap: 20px; }

.ms-oee2__score[b-fjpbhj6jpi] {
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-align: center;
}
.ms-oee2__score span[b-fjpbhj6jpi] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ms-oee2__score strong[b-fjpbhj6jpi] { font-size: 40px; font-weight: 800; line-height: 1; }
.ms-oee2__score em[b-fjpbhj6jpi] { font-style: normal; font-size: 10.5px; color: var(--color-text-subtle); }
.ms-oee2__score.is-good[b-fjpbhj6jpi] { border-color: #40C057; background: rgba(64, 192, 87, .10); }
.ms-oee2__score.is-good span[b-fjpbhj6jpi], .ms-oee2__score.is-good strong[b-fjpbhj6jpi] { color: #40C057; }
.ms-oee2__score.is-warn[b-fjpbhj6jpi] { border-color: #FFD43B; background: rgba(255, 212, 59, .10); }
.ms-oee2__score.is-warn span[b-fjpbhj6jpi], .ms-oee2__score.is-warn strong[b-fjpbhj6jpi] { color: #FFD43B; }
.ms-oee2__score.is-bad[b-fjpbhj6jpi] { border-color: #FF4444; background: rgba(255, 68, 68, .10); }
.ms-oee2__score.is-bad span[b-fjpbhj6jpi], .ms-oee2__score.is-bad strong[b-fjpbhj6jpi] { color: #FF4444; }

.ms-oee2__days[b-fjpbhj6jpi] { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.ms-oee2__days .d[b-fjpbhj6jpi] { flex: 1; min-height: 4px; border-radius: 4px 4px 0 0; }
.ms-oee2__days .d.is-good[b-fjpbhj6jpi] { background: #40C057; }
.ms-oee2__days .d.is-warn[b-fjpbhj6jpi] { background: #FFD43B; }
.ms-oee2__days .d.is-bad[b-fjpbhj6jpi] { background: #FF4444; }

.ms-oee2__stats[b-fjpbhj6jpi] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.ms-oee2__trend[b-fjpbhj6jpi] { display: flex; flex-direction: column; gap: 8px; }
.ms-oee2__trend svg[b-fjpbhj6jpi] { width: 100%; height: 90px; display: block; }
.ms-oee2__trend .grid[b-fjpbhj6jpi] { stroke: var(--color-border-light); stroke-width: 1; }
.ms-oee2__trend .base[b-fjpbhj6jpi] { stroke: var(--color-border); stroke-width: 1; }
.ms-oee2__trend .trend[b-fjpbhj6jpi] { fill: none; stroke: #d5d9de; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-oee2__trend .pt[b-fjpbhj6jpi] { r: 3.5; }
.ms-oee2__trend .pt.is-good[b-fjpbhj6jpi] { fill: #40C057; }
.ms-oee2__trend .pt.is-warn[b-fjpbhj6jpi] { fill: #FFD43B; }
.ms-oee2__trend .pt.is-bad[b-fjpbhj6jpi] { fill: #FF4444; }
.ms-oee2__trend-axis[b-fjpbhj6jpi] { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--color-text-subtle); }

/* Downtime Pareto */
.ms-pareto[b-fjpbhj6jpi] { width: 100%; height: 190px; display: block; }
.ms-pareto .grid[b-fjpbhj6jpi] { stroke: var(--color-border-light); stroke-width: 1; }
.ms-pareto .base[b-fjpbhj6jpi] { stroke: var(--color-border); stroke-width: 1; }
.ms-pareto .bar[b-fjpbhj6jpi] { fill: var(--color-accent); opacity: .85; }
.ms-pareto .cum[b-fjpbhj6jpi] { fill: none; stroke: #FFD43B; stroke-width: 2; }
.ms-pareto .cum-pt[b-fjpbhj6jpi] { r: 3; fill: #FFD43B; }
.ms-pareto .cum-label[b-fjpbhj6jpi] { font-size: 9px; fill: var(--color-text-subtle); font-weight: 700; }
/* Grid, not flex+space-between: flex spacing drifts with each label's
   own text width, so it stops lining up under its bar the moment labels
   are uneven lengths (e.g. "Chk. Weigher" vs "Jam"). A fixed N-column
   grid keeps each label's column matching the bar's column exactly,
   same fix as .prod-pareto__labels on the Production page. */
.ms-pareto__axis[b-fjpbhj6jpi] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    font-size: 9.5px;
    color: var(--color-text-subtle);
    text-align: center;
}

/* Production Volume */
.ms-volume[b-fjpbhj6jpi] { width: 100%; height: 170px; display: block; }
.ms-volume .cap[b-fjpbhj6jpi] { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 4 3; }
.ms-volume .cap-label[b-fjpbhj6jpi] { font-size: 9px; fill: var(--color-text-subtle); font-weight: 700; }
.ms-volume .area[b-fjpbhj6jpi] { fill: var(--color-accent-soft); }
.ms-volume .line[b-fjpbhj6jpi] { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-volume .pt[b-fjpbhj6jpi] { r: 3.5; fill: var(--color-accent); }
.ms-volume__axis[b-fjpbhj6jpi] { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--color-text-subtle); padding: 0 6px; }

/* AI Analysis */
.ms-card--ai[b-fjpbhj6jpi] { gap: 14px; }

.ms-ai__head[b-fjpbhj6jpi] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ms-ai__badge[b-fjpbhj6jpi] {
    flex-direction: row;
    min-height: 0;
    gap: 8px;
    padding: 6px 14px;
}
.ms-ai__badge span[b-fjpbhj6jpi] { font-size: 9.5px; }
.ms-ai__badge strong[b-fjpbhj6jpi] { font-size: 15px; }

.ms-ai__q[b-fjpbhj6jpi] {
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    align-self: flex-start;
}
.ms-ai__a p[b-fjpbhj6jpi] { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }
.ms-ai__a ul[b-fjpbhj6jpi] { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ms-ai__a li[b-fjpbhj6jpi] { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border-light); border-radius: 8px; }
.ms-ai__a li .txt[b-fjpbhj6jpi] { flex: 1; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.ms-ai__a li .txt strong[b-fjpbhj6jpi] { color: var(--color-text); }
.ms-ai__a li em[b-fjpbhj6jpi] { flex: 0 0 auto; font-style: normal; font-weight: 800; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ms-ai__a li em.is-bad[b-fjpbhj6jpi] { color: #FF4444; }
.ms-ai__a li em.is-warn[b-fjpbhj6jpi] { color: #FFD43B; }

.tag[b-fjpbhj6jpi] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 1px;
}
.tag.is-bad[b-fjpbhj6jpi] { color: #FF4444; background: rgba(255, 68, 68, .10); }
.tag.is-warn[b-fjpbhj6jpi] { color: #FFD43B; background: rgba(255, 212, 59, .10); }

.ms-ai__action[b-fjpbhj6jpi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #40C057;
    background: rgba(64, 192, 87, .10);
    color: #40C057;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}
.ms-ai__action i[b-fjpbhj6jpi] { margin-top: 2px; }

@media (max-width: 560px) {
    .ms-labor__row[b-fjpbhj6jpi], .ms-runrate__row[b-fjpbhj6jpi], .ms-mttr__row[b-fjpbhj6jpi] { grid-template-columns: 78px 1fr 44px; }
    .ms-oee2[b-fjpbhj6jpi] { flex-direction: column; align-items: stretch; }
    .ms-oee2__score[b-fjpbhj6jpi] { flex: none; }
    .ms-oee2__stats[b-fjpbhj6jpi] { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

@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;
    /* Solid backing color, not just transparent: the real Navattic
       iframe is already loaded directly behind this cover (same
       .device__screen stacking context, one z-index below), so any
       part of the cover image that isn't fully opaque lets the live
       app's own background show through instead of a clean backdrop —
       most visible on mobile, where the cover is a phone-shaped cutout
       with transparent margins around it. */
    background-color: #0b0f13;
    background-image: url('/images/product-tour-cover.png');
    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: 800px) {
    /* Plain white on mobile instead of continuing the dark showcase
       treatment — on the home page this sits inside .ai-showcase
       (shared with the still-dark AI spotlight sections either side of
       it), so it reads as its own light panel rather than a seamless
       white section; on /product-tour, the wrapping section goes
       white too (see ProductTour.razor.css) so there's no dark edge
       around it at all. The nav bar's tone follows suit via
       data-menu-tone-mobile="white" above — see site-header.js. */
    .product-reveal[b-h6bnau3oiw] {
        background: #fff;
        gap: 32px;
        padding: 40px 24px;
    }

    .product-reveal__copy span[b-h6bnau3oiw] {
        color: var(--color-text-subtle);
    }

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

    /* On mobile the cover swaps to a portrait phone-in-hand shot (see
       .nv-lazy below) that already has its own device edge baked into
       the photo — the desktop's dark laptop-style bezel/camera-dot
       chrome wrapped around that would just double up the edge, so it
       comes off entirely here and the photo's own shape is the only
       "frame". The Navattic demo itself already renders its own
       mobile-optimized layout once the iframe is this narrow too, so a
       tall, narrow box is still the right shape once it's revealed. */
    .device[b-h6bnau3oiw] {
        width: min(380px, 85vw);
        aspect-ratio: 9 / 16;
        max-height: 78dvh;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .device__camera[b-h6bnau3oiw] {
        display: none;
    }

    /* Matches the mobile cover's own ratio (1080x1920 = 9:16) exactly,
       so contain/cover behave the same here without any cropping. The
       backing color behind the cutout's transparent margins switches
       to white to match the new white section instead of the dark
       color used on the (still-dark) desktop version. */
    .nv-lazy[b-h6bnau3oiw] {
        background-color: #fff;
        background-image: url('/images/product-tour-cover-mobile.png');
        border-radius: 0;
    }

    .nv-lazy button[b-h6bnau3oiw] {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* This permanent dark scrim exists to dim busy desktop screenshots
       so the button text pops — over the new white mobile backing it
       just washes the whole cutout's transparent margin into a flat
       gray rectangle instead of staying white. The button already has
       its own solid color for contrast here, so the scrim isn't
       needed on this cover at all. */
    .nv-lazy-overlay[b-h6bnau3oiw] {
        background: transparent;
    }
}
/* /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/ProductionShowcaseSection.razor.rz.scp.css */
/* One continuous dark panel for the whole page above "Explore More" —
   same treatment as SchedulingShowcaseSection, but this time it also
   covers the benefits grid at the bottom, and it leads the page (no
   separate hero above it), so the top padding clears the fixed header. */
.prod-showcase[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.prod-showcase__intro[b-6ltgqbwx7k] {
    max-width: 1040px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.prod-showcase__intro .section-eyebrow[b-6ltgqbwx7k] {
    justify-content: center;
}

.prod-showcase__intro .section-eyebrow .label[b-6ltgqbwx7k] {
    color: rgba(255, 255, 255, .7);
}

.prod-showcase__intro h1[b-6ltgqbwx7k] {
    margin: 14px auto 16px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.prod-showcase__intro p[b-6ltgqbwx7k] {
    max-width: 620px;
    margin-inline: auto;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.prod-showcase__cta[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .prod-showcase__cta[b-6ltgqbwx7k] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------
   Shared widget chrome.
   --------------------------------------------------------------------- */

.prod-widget[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prod-widget__footnote[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.prod-widget__legend[b-6ltgqbwx7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .6);
}

.prod-widget__legend span[b-6ltgqbwx7k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prod-chips[b-6ltgqbwx7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.prod-chip[b-6ltgqbwx7k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.prod-chip--warn[b-6ltgqbwx7k] {
    color: #f5c344;
    border-color: rgba(245, 195, 68, .28);
    background: rgba(245, 195, 68, .08);
}

.prod-chip--good[b-6ltgqbwx7k] {
    color: #7be08a;
    border-color: rgba(123, 224, 138, .25);
    background: rgba(123, 224, 138, .08);
}

.prod-chip--bad[b-6ltgqbwx7k] {
    color: #ff8177;
    border-color: rgba(240, 68, 56, .3);
    background: rgba(240, 68, 56, .1);
}

/* ---------------------------------------------------------------------
   1. Live Line Status.
   --------------------------------------------------------------------- */

.prod-widget--line[b-6ltgqbwx7k] {
    padding: 22px;
    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);
}

.prod-line__head[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.prod-line__head-actions[b-6ltgqbwx7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.prod-mini-btn[b-6ltgqbwx7k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.prod-mini-btn--alert[b-6ltgqbwx7k] {
    color: #ff8177;
    border-color: rgba(240, 68, 56, .3);
    background: rgba(240, 68, 56, .1);
}

.prod-mini-btn--primary[b-6ltgqbwx7k] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.prod-line__name[b-6ltgqbwx7k] {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.prod-line__job[b-6ltgqbwx7k] {
    margin-top: -10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.prod-line__progress-track[b-6ltgqbwx7k] {
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.prod-line__progress-fill[b-6ltgqbwx7k] {
    height: 100%;
    border-radius: inherit;
    background: #3fae4a;
}

.prod-line__progress-labels[b-6ltgqbwx7k] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

.prod-line__stats3[b-6ltgqbwx7k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.prod-stat[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.prod-stat__label[b-6ltgqbwx7k] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.prod-stat__value[b-6ltgqbwx7k] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.prod-stat--bad .prod-stat__value[b-6ltgqbwx7k] {
    color: #ff8177;
}

.prod-stat--warn .prod-stat__value[b-6ltgqbwx7k] {
    color: #f5c344;
}

.prod-stat__target[b-6ltgqbwx7k] {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}

.prod-line__actions[b-6ltgqbwx7k] {
    display: flex;
    gap: 8px;
}

.prod-line__trend svg[b-6ltgqbwx7k] {
    display: block;
    width: 100%;
    height: 54px;
}

.prod-line__trend-line[b-6ltgqbwx7k] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prod-line__trend-caption[b-6ltgqbwx7k] {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .5);
}

.prod-line__history[b-6ltgqbwx7k] {
    display: flex;
    gap: 3px;
    height: 16px;
}

.prod-line__seg[b-6ltgqbwx7k] {
    flex: 1;
    border-radius: 3px;
}

.prod-line__seg--run[b-6ltgqbwx7k],
.prod-line__dot--run[b-6ltgqbwx7k] {
    background: #3fae4a;
}

.prod-line__seg--changeover[b-6ltgqbwx7k],
.prod-line__dot--changeover[b-6ltgqbwx7k] {
    background: #6c6ff0;
}

.prod-line__seg--down[b-6ltgqbwx7k],
.prod-line__dot--down[b-6ltgqbwx7k] {
    background: #f04438;
}

.prod-line__dot[b-6ltgqbwx7k] {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.prod-line__toolbar[b-6ltgqbwx7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.prod-tool-btn[b-6ltgqbwx7k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    font-weight: 600;
}

.prod-tool-btn i[b-6ltgqbwx7k] {
    color: rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------
   2. Process Control — scan to confirm the correct material.
   --------------------------------------------------------------------- */

.prod-scan__row[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prod-scan__device[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(0, 159, 255, .12);
    border: 1px solid rgba(0, 159, 255, .3);
    color: var(--color-accent);
    font-size: 26px;
    flex-shrink: 0;
}

.prod-scan__result[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prod-scan__job[b-6ltgqbwx7k] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}

.prod-scan__match[b-6ltgqbwx7k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #7be08a;
}

@media (max-width: 560px) {
    .prod-scan__row[b-6ltgqbwx7k] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------
   3. Downtime Tracking — a small Pareto chart.
   --------------------------------------------------------------------- */

.prod-widget--pareto[b-6ltgqbwx7k] {
    padding: 22px;
    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);
}

.prod-pareto__head[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.prod-pareto__range[b-6ltgqbwx7k] {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.prod-pareto__chart[b-6ltgqbwx7k] {
    display: block;
    width: 100%;
    height: auto;
}

.prod-pareto__gridline[b-6ltgqbwx7k] {
    stroke: rgba(255, 255, 255, .08);
    stroke-width: 1;
}

.prod-pareto__baseline[b-6ltgqbwx7k] {
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1;
}

.prod-pareto__bar--machine[b-6ltgqbwx7k] { fill: #f04438; }
.prod-pareto__bar--inventory[b-6ltgqbwx7k] { fill: #f5c344; }
.prod-pareto__bar--changeover[b-6ltgqbwx7k] { fill: #6c6ff0; }
.prod-pareto__bar--quality[b-6ltgqbwx7k] { fill: #a855f7; }

.prod-pareto__cum-line[b-6ltgqbwx7k] {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    opacity: .85;
}

.prod-pareto__cum-dot[b-6ltgqbwx7k] {
    fill: #fff;
}

.prod-pareto__cum-label[b-6ltgqbwx7k] {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    fill: #fff;
}

.prod-pareto__labels[b-6ltgqbwx7k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.prod-pareto__labels span[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}

.prod-pareto__labels strong[b-6ltgqbwx7k] {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
}

/* ---------------------------------------------------------------------
   4. Analytics — run rates + a labor-cost-by-RFID-badge callout.
   --------------------------------------------------------------------- */

.prod-widget--runrates[b-6ltgqbwx7k] {
    padding: 22px;
    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);
}

.prod-rr__head[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.prod-rr__row[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
}

.prod-rr__part[b-6ltgqbwx7k] {
    color: rgba(255, 255, 255, .75);
}

.prod-rr__pct[b-6ltgqbwx7k] {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prod-rr__pct.is-good[b-6ltgqbwx7k] {
    color: #7be08a;
    background: rgba(123, 224, 138, .12);
}

.prod-rr__pct.is-warn[b-6ltgqbwx7k] {
    color: #f5c344;
    background: rgba(245, 195, 68, .12);
}

.prod-rr__pct.is-bad[b-6ltgqbwx7k] {
    color: #ff8177;
    background: rgba(240, 68, 56, .14);
}

.prod-rr__labor[b-6ltgqbwx7k] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(0, 159, 255, .08);
    border: 1px solid rgba(0, 159, 255, .18);
}

.prod-rr__labor i[b-6ltgqbwx7k] {
    margin-top: 2px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.prod-rr__labor strong[b-6ltgqbwx7k] {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #fff;
}

.prod-rr__labor p[b-6ltgqbwx7k] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .65);
}

/* ---------------------------------------------------------------------
   5. AI Insights — a chat-style drill-down, same language as the
      Scheduling page's AI widgets.
   --------------------------------------------------------------------- */

.prod-widget--ai[b-6ltgqbwx7k] {
    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);
}

.prod-ai__prompt[b-6ltgqbwx7k] {
    align-self: flex-end;
    max-width: 88%;
    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;
}

.prod-ai__tag[b-6ltgqbwx7k] {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.prod-ai__result[b-6ltgqbwx7k] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 3px 14px 14px 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* Without min-width: 0, this flex item refuses to shrink below its
   content's natural width — the .prod-ai__row table rows inside then
   push it (and the whole result card) wider than .prod-widget--ai,
   spilling text past the card's right edge on narrow screens. */
.prod-ai__body[b-6ltgqbwx7k] {
    min-width: 0;
}

.prod-ai__icon[b-6ltgqbwx7k] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 159, 255, .16);
    color: var(--color-accent);
    font-size: 14px;
}

.prod-ai__result p[b-6ltgqbwx7k] {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

.prod-ai__table[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prod-ai__row[b-6ltgqbwx7k] {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

.prod-ai__row strong[b-6ltgqbwx7k] {
    color: #fff;
    font-weight: 700;
}

.prod-ai__row.is-slow[b-6ltgqbwx7k] {
    background: rgba(240, 68, 56, .1);
}

.prod-ai__row.is-slow strong[b-6ltgqbwx7k] {
    color: #ff8177;
}

/* ---------------------------------------------------------------------
   6. Shift Reports — metric cards + a stacked bar per packaging line.
   --------------------------------------------------------------------- */

.prod-widget--handoff[b-6ltgqbwx7k] {
    padding: 22px;
    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);
}

.prod-handoff__head[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.prod-handoff__head i[b-6ltgqbwx7k] {
    color: rgba(255, 255, 255, .4);
    font-size: 14px;
}

.prod-handoff__head .prod-chip[b-6ltgqbwx7k] {
    margin-left: auto;
}

.prod-handoff__metrics[b-6ltgqbwx7k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.prod-metric-card[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

.prod-metric-card__label[b-6ltgqbwx7k] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.prod-metric-card__value[b-6ltgqbwx7k] {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.prod-metric-card__value em[b-6ltgqbwx7k] {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
    margin-left: 2px;
}

.prod-stacked[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prod-stacked__row[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prod-stacked__label[b-6ltgqbwx7k] {
    flex: 0 0 84px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
}

.prod-stacked__track[b-6ltgqbwx7k] {
    flex: 1;
    display: flex;
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}

.prod-stacked__seg--run[b-6ltgqbwx7k] { background: #3fae4a; }
.prod-stacked__seg--changeover[b-6ltgqbwx7k] { background: #6c6ff0; }
.prod-stacked__seg--down[b-6ltgqbwx7k] { background: #f04438; }

.prod-handoff__note[b-6ltgqbwx7k] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(0, 159, 255, .08);
    border: 1px solid rgba(0, 159, 255, .18);
}

.prod-handoff__note i[b-6ltgqbwx7k] {
    margin-top: 2px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.prod-handoff__note p[b-6ltgqbwx7k] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------------------
   7. Built For The Floor — a TV-mounted scoreboard.
   --------------------------------------------------------------------- */

.prod-widget--tv[b-6ltgqbwx7k] {
    align-items: center;
}

.prod-tv[b-6ltgqbwx7k] {
    width: 100%;
    max-width: 420px;
    padding: 14px 14px 18px;
    border-radius: 14px;
    background: #05070a;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.prod-tv__bar[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #ff8177;
}

.prod-tv__dot[b-6ltgqbwx7k] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .25);
}

.prod-tv__screen[b-6ltgqbwx7k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(0, 159, 255, .1), rgba(0, 159, 255, .02));
    border: 1px solid rgba(0, 159, 255, .18);
}

.prod-tv__title[b-6ltgqbwx7k] {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.prod-tv__row[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.prod-tv__rank[b-6ltgqbwx7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 159, 255, .16);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.prod-tv__line[b-6ltgqbwx7k] {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.prod-tv__score[b-6ltgqbwx7k] {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.prod-tv__stand[b-6ltgqbwx7k] {
    width: 90px;
    height: 10px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .1);
    border-radius: 0 0 6px 6px;
}

/* The dark benefits grid at the end of this band is now DarkBenefitsSection
   (shared with the other functional pages) — see that component for its
   markup and styles. */

@media (max-width: 560px) {
    .prod-handoff__metrics[b-6ltgqbwx7k] {
        grid-template-columns: 1fr;
    }

    .prod-pareto__labels[b-6ltgqbwx7k] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Sections/QualityShowcaseSection.razor.rz.scp.css */
/* Same dark-panel treatment as SchedulingShowcaseSection /
   ProductionShowcaseSection — first section on the page, so top padding
   clears the fixed header, and it runs continuously through the
   benefits grid to "Explore More". */
.qty-showcase[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.qty-showcase__intro[b-app1e08qfs] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.qty-showcase__intro .section-eyebrow[b-app1e08qfs] {
    justify-content: center;
}

.qty-showcase__intro .section-eyebrow .label[b-app1e08qfs] {
    color: rgba(255, 255, 255, .7);
}

.qty-showcase__intro h1[b-app1e08qfs] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.qty-showcase__intro p[b-app1e08qfs] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.qty-showcase__cta[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .qty-showcase__cta[b-app1e08qfs] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------
   Shared widget chrome.
   --------------------------------------------------------------------- */

.qty-widget[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    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);
}

.qty-widget__footnote[b-app1e08qfs] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.qty-widget__legend[b-app1e08qfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .6);
}

.qty-widget__legend span[b-app1e08qfs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.qty-dot[b-app1e08qfs] {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.qty-dot--good[b-app1e08qfs] { background: #3fae4a; }
.qty-dot--warn[b-app1e08qfs] { background: #f5c344; }
.qty-dot--bad[b-app1e08qfs] { background: #f04438; }

.qty-chips[b-app1e08qfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qty-chip[b-app1e08qfs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.qty-chip--warn[b-app1e08qfs] {
    color: #f5c344;
    border-color: rgba(245, 195, 68, .28);
    background: rgba(245, 195, 68, .08);
}

.qty-chip--good[b-app1e08qfs] {
    color: #7be08a;
    border-color: rgba(123, 224, 138, .25);
    background: rgba(123, 224, 138, .08);
}

.qty-chip--bad[b-app1e08qfs] {
    color: #ff8177;
    border-color: rgba(240, 68, 56, .3);
    background: rgba(240, 68, 56, .1);
}

.qty-btn[b-app1e08qfs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 700;
}

.qty-btn--ghost[b-app1e08qfs] {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
}

.qty-btn--primary[b-app1e08qfs] {
    background: var(--color-accent);
    color: #fff;
}

/* ---------------------------------------------------------------------
   1. Live Quality Scorecard.
   --------------------------------------------------------------------- */

.qty-score__row[b-app1e08qfs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
}

.qty-score__row + .qty-score__row[b-app1e08qfs] {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.qty-score__job[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.qty-score__line[b-app1e08qfs] {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.qty-score__part[b-app1e08qfs] {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}

.qty-score__stations[b-app1e08qfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qty-station[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

.qty-station em[b-app1e08qfs] {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.qty-station.is-warn[b-app1e08qfs] {
    border-color: rgba(245, 195, 68, .4);
    background: rgba(245, 195, 68, .1);
}

.qty-station.is-warn em[b-app1e08qfs] { color: #f5c344; }

.qty-station.is-bad[b-app1e08qfs] {
    border-color: rgba(240, 68, 56, .45);
    background: rgba(240, 68, 56, .12);
}

.qty-station.is-bad em[b-app1e08qfs] { color: #ff8177; }

/* ---------------------------------------------------------------------
   2. SPC & Real-Time Alerts.
   --------------------------------------------------------------------- */

.qty-spc__head[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.qty-spc__chart[b-app1e08qfs] {
    display: block;
    width: 100%;
    height: auto;
}

.qty-spc__band[b-app1e08qfs] {
    fill: rgba(63, 174, 74, .07);
}

.qty-spc__limit[b-app1e08qfs] {
    stroke: #3fae4a;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: .7;
}

.qty-spc__center[b-app1e08qfs] {
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 1;
}

.qty-spc__trend[b-app1e08qfs] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    opacity: .55;
}

.qty-spc__point[b-app1e08qfs] {
    fill: var(--color-accent);
}

.qty-spc__point.is-bad[b-app1e08qfs] {
    fill: #f04438;
}

.qty-spc__range[b-app1e08qfs] {
    margin-top: -6px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    text-align: center;
}

.qty-alert[b-app1e08qfs] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(240, 68, 56, .08);
    border: 1px solid rgba(240, 68, 56, .3);
}

.qty-alert i[b-app1e08qfs] {
    margin-top: 2px;
    color: #ff8177;
    flex-shrink: 0;
}

.qty-alert strong[b-app1e08qfs] {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #fff;
}

.qty-alert p[b-app1e08qfs] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------------------
   3. Compliance audit log.
   --------------------------------------------------------------------- */

.qty-log__row[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
}

.qty-log__row + .qty-log__row[b-app1e08qfs] {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.qty-log__time[b-app1e08qfs] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.qty-log__text[b-app1e08qfs] {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

.qty-log__text strong[b-app1e08qfs] {
    color: #fff;
}

.qty-log__text em[b-app1e08qfs] {
    font-style: normal;
    color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   4. Auto-notify with required snooze.
   --------------------------------------------------------------------- */

.qty-notify__card[b-app1e08qfs] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.qty-notify__icon[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(245, 195, 68, .16);
    color: #f5c344;
    font-size: 15px;
    flex-shrink: 0;
}

.qty-notify__body strong[b-app1e08qfs] {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
    color: #fff;
}

.qty-notify__body p[b-app1e08qfs] {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}

.qty-notify__actions[b-app1e08qfs] {
    display: flex;
    gap: 10px;
}

/* ---------------------------------------------------------------------
   5. Audits & Gemba walks.
   --------------------------------------------------------------------- */

.qty-audit__head[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.qty-audit__section[b-app1e08qfs] {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.qty-audit__row[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

.qty-pass[b-app1e08qfs],
.qty-na[b-app1e08qfs] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
}

.qty-pass[b-app1e08qfs] {
    color: #7be08a;
    background: rgba(123, 224, 138, .12);
}

.qty-na[b-app1e08qfs] {
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------------
   6. Failures & scrap.
   --------------------------------------------------------------------- */

.qty-rejection__head[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.qty-rejection__meta[b-app1e08qfs] {
    margin-top: -10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
}

.qty-rejection__media[b-app1e08qfs] {
    display: flex;
    gap: 10px;
}

.qty-media[b-app1e08qfs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: rgba(0, 159, 255, .1);
    border: 1px solid rgba(0, 159, 255, .25);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.qty-media i[b-app1e08qfs] {
    color: var(--color-accent);
}

.qty-rejection__note[b-app1e08qfs] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

.qty-rejection__note strong[b-app1e08qfs] {
    color: #fff;
}

/* ---------------------------------------------------------------------
   7. CAPA management.
   --------------------------------------------------------------------- */

.qty-capa__chain[b-app1e08qfs] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.qty-capa__step[b-app1e08qfs] {
    flex: 1;
    min-width: 140px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}

.qty-capa__step.is-fix[b-app1e08qfs] {
    background: rgba(63, 174, 74, .1);
    border-color: rgba(63, 174, 74, .3);
    color: #fff;
}

.qty-capa__chain > i[b-app1e08qfs] {
    color: rgba(255, 255, 255, .3);
    flex-shrink: 0;
}

.qty-capa__tag[b-app1e08qfs] {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.qty-capa__step.is-fix .qty-capa__tag[b-app1e08qfs] {
    color: #7be08a;
}

/* ---------------------------------------------------------------------
   8. Scan to confirm correct material.
   --------------------------------------------------------------------- */

.qty-scan__row[b-app1e08qfs] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qty-scan__device[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(0, 159, 255, .12);
    border: 1px solid rgba(0, 159, 255, .3);
    color: var(--color-accent);
    font-size: 26px;
    flex-shrink: 0;
}

.qty-scan__result[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qty-scan__job[b-app1e08qfs] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}

.qty-scan__match[b-app1e08qfs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #7be08a;
}

/* ---------------------------------------------------------------------
   9. Bulk tank status board.
   --------------------------------------------------------------------- */

.qty-widget--tanks[b-app1e08qfs] {
    gap: 14px;
}

.qty-tank[b-app1e08qfs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.qty-tank__head[b-app1e08qfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.qty-tank__head span:last-child[b-app1e08qfs] {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.qty-tank__job[b-app1e08qfs] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

.qty-tank__bar[b-app1e08qfs] {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.qty-tank__fill[b-app1e08qfs] {
    height: 100%;
    border-radius: inherit;
    background: #f5c344;
}

.qty-tank__fill.is-good[b-app1e08qfs] { background: #3fae4a; }
.qty-tank__fill.is-bad[b-app1e08qfs] { background: #f04438; }

@media (max-width: 560px) {
    .qty-score__stations[b-app1e08qfs] {
        gap: 6px;
    }

    .qty-capa__chain[b-app1e08qfs] {
        flex-direction: column;
        align-items: stretch;
    }

    .qty-capa__chain > i[b-app1e08qfs] {
        transform: rotate(90deg);
        align-self: center;
    }

    .qty-scan__row[b-app1e08qfs] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /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/SafetyShowcaseSection.razor.rz.scp.css */
/* Same dark-panel treatment as the other functional showcase sections. */
.safe-showcase[b-ev6c6dg7da] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.safe-showcase__intro[b-ev6c6dg7da] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.safe-showcase__intro .section-eyebrow[b-ev6c6dg7da] {
    justify-content: center;
}

.safe-showcase__intro .section-eyebrow .label[b-ev6c6dg7da] {
    color: rgba(255, 255, 255, .7);
}

.safe-showcase__intro h1[b-ev6c6dg7da] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.safe-showcase__intro p[b-ev6c6dg7da] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.safe-showcase__cta[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .safe-showcase__cta[b-ev6c6dg7da] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------
   Shared widget chrome.
   --------------------------------------------------------------------- */

.safe-widget[b-ev6c6dg7da] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    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);
}

.safe-widget__footnote[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.safe-chips[b-ev6c6dg7da] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.safe-chip[b-ev6c6dg7da] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.safe-chip--good[b-ev6c6dg7da] {
    color: #7be08a;
    border-color: rgba(123, 224, 138, .25);
    background: rgba(123, 224, 138, .08);
}

.safe-pass[b-ev6c6dg7da],
.safe-fail[b-ev6c6dg7da] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
}

.safe-pass[b-ev6c6dg7da] {
    color: #7be08a;
    background: rgba(123, 224, 138, .12);
}

.safe-fail[b-ev6c6dg7da] {
    color: #ff8177;
    background: rgba(240, 68, 56, .14);
}

/* ---------------------------------------------------------------------
   1. Audits & walkabouts.
   --------------------------------------------------------------------- */

.safe-audit__head[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.safe-audit__row[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------------------
   2. Incident tracking.
   --------------------------------------------------------------------- */

.safe-inc__row[b-ev6c6dg7da] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

.safe-inc__row + .safe-inc__row[b-ev6c6dg7da] {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.safe-inc__group[b-ev6c6dg7da] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 110px;
}

.safe-inc__group strong[b-ev6c6dg7da] {
    font-size: 13.5px;
    color: #fff;
}

.safe-inc__group span[b-ev6c6dg7da] {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}

.safe-inc__stat[b-ev6c6dg7da] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 90px;
}

.safe-inc__stat span[b-ev6c6dg7da] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.safe-inc__stat strong[b-ev6c6dg7da] {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.safe-inc__stat.is-warn strong[b-ev6c6dg7da] { color: #f5c344; }
.safe-inc__stat.is-bad strong[b-ev6c6dg7da] { color: #ff8177; }

/* ---------------------------------------------------------------------
   3. TV-mounted safety alert.
   --------------------------------------------------------------------- */

.safe-widget--tv[b-ev6c6dg7da] {
    align-items: center;
}

.safe-tv[b-ev6c6dg7da] {
    width: 100%;
    max-width: 420px;
    padding: 14px 14px 18px;
    border-radius: 14px;
    background: #05070a;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.safe-tv__bar[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #ff8177;
}

.safe-tv__dot[b-ev6c6dg7da] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .25);
}

.safe-tv__screen[b-ev6c6dg7da] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(240, 68, 56, .12), rgba(240, 68, 56, .02));
    border: 1px solid rgba(240, 68, 56, .22);
}

.safe-tv__alert[b-ev6c6dg7da] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.safe-tv__alert i[b-ev6c6dg7da] {
    margin-top: 2px;
    color: #ff8177;
    flex-shrink: 0;
}

.safe-tv__alert strong[b-ev6c6dg7da] {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    color: #fff;
}

.safe-tv__alert p[b-ev6c6dg7da] {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.safe-tv__days[b-ev6c6dg7da] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
}

.safe-tv__days-value[b-ev6c6dg7da] {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
}

.safe-tv__days-label[b-ev6c6dg7da] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.safe-tv__stand[b-ev6c6dg7da] {
    width: 90px;
    height: 10px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .1);
    border-radius: 0 0 6px 6px;
}

/* ---------------------------------------------------------------------
   4. Start-of-shift safety gate.
   --------------------------------------------------------------------- */

.safe-gate__head[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.safe-gate__head i[b-ev6c6dg7da] {
    color: #7be08a;
}

.safe-gate__row[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

.safe-gate__start[b-ev6c6dg7da] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-pill);
    background: #3fae4a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 560px) {
    .safe-inc__row[b-ev6c6dg7da] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Sections/ScheduleRoutingSection.razor.rz.scp.css */
.sched-routing-section__row[b-o3fv84zslv] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

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

.sched-routing-section__list[b-o3fv84zslv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

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

/* The routing widget itself: a small Gantt-style timeline — three job
   bars sized to their actual duration and joined by dependency curves —
   rather than three same-size cards that didn't convey duration or the
   finish-to-start relationship between them. No screenshot required. */
.sched-routing[b-o3fv84zslv] {
    padding: 28px 22px 22px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    /* A fixed-width diagram that scrolls rather than shrinks below
       legibility on narrow screens (same tradeoff as the code widget on
       the scheduling showcase). */
    overflow-x: auto;
}

.sched-routing__diagram[b-o3fv84zslv] {
    display: block;
    width: 100%;
    min-width: 560px;
    height: auto;
}

.sched-routing__bar[b-o3fv84zslv] {
    fill: #eaf3fc;
    stroke: rgba(0, 159, 255, .35);
    stroke-width: 1.5;
}

.sched-routing__bar--final[b-o3fv84zslv] {
    fill: var(--color-accent);
    stroke: var(--color-accent);
}

.sched-routing__bar-label[b-o3fv84zslv] {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    fill: var(--color-navy);
    dominant-baseline: middle;
}

.sched-routing__bar-label--final[b-o3fv84zslv] {
    fill: #fff;
}

.sched-routing__caption[b-o3fv84zslv] {
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--color-text-subtle);
}

.sched-routing__connector[b-o3fv84zslv] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    opacity: .5;
}

.sched-routing__dot[b-o3fv84zslv] {
    fill: var(--color-accent);
}

.sched-routing__legend[b-o3fv84zslv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--color-text-subtle);
}

.sched-routing__legend span[b-o3fv84zslv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sched-routing__legend i[b-o3fv84zslv] {
    color: var(--color-accent);
}

.sched-routing__legend-swatch[b-o3fv84zslv] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #eaf3fc;
    border: 1.5px solid rgba(0, 159, 255, .35);
}

.sched-routing__legend-swatch--final[b-o3fv84zslv] {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

@media (max-width: 900px) {
    .sched-routing-section__row[b-o3fv84zslv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Sections/SchedulingShowcaseSection.razor.rz.scp.css */
/* Same continuous dark-panel treatment as the home page's .ai-showcase
   (Home.razor.css) — a generous gap between each row so they read as
   distinct beats, not a wall of cards. This is now the first section on
   the page (no separate hero above it), so the top padding also clears
   the fixed site header the way .subhero does elsewhere. */
.sched-showcase[b-ht5mb3er35] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.sched-showcase__intro[b-ht5mb3er35] {
    max-width: 1040px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.sched-showcase__intro .section-eyebrow[b-ht5mb3er35] {
    justify-content: center;
}

.sched-showcase__intro .section-eyebrow .label[b-ht5mb3er35] {
    color: rgba(255, 255, 255, .7);
}

/* The intro block itself was widened to fit this long headline in two
   lines on desktop instead of wrapping four times inside a narrow
   column; the paragraph below keeps its own narrower reading width. */
.sched-showcase__intro h1[b-ht5mb3er35] {
    margin: 14px auto 16px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.sched-showcase__intro p[b-ht5mb3er35] {
    max-width: 620px;
    margin-inline: auto;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.sched-showcase__cta[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .sched-showcase__cta[b-ht5mb3er35] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* The closing "bigger picture" statement — a distinct highlighted card,
   not a muted italic afterthought, so it reads as the payoff of the
   whole showcase rather than a footnote after it. */
.sched-callout[b-ht5mb3er35] {
    max-width: 900px;
    margin-inline: auto;
    padding: 44px 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(0, 159, 255, .16), rgba(0, 159, 255, .03));
    border: 1px solid rgba(0, 159, 255, .35);
    box-shadow: 0 30px 80px rgba(0, 159, 255, .14);
    text-align: center;
}

.sched-callout__badge[b-ht5mb3er35] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(0, 159, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sched-callout__badge i[b-ht5mb3er35] {
    color: var(--color-accent);
}

.sched-callout p[b-ht5mb3er35] {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 26px);
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
}

.sched-callout strong[b-ht5mb3er35] {
    color: var(--color-accent);
    font-weight: 800;
}

@media (max-width: 560px) {
    .sched-callout[b-ht5mb3er35] {
        padding: 32px 24px;
    }
}

/* ---------------------------------------------------------------------
   Shared widget chrome — small pieces reused across more than one of the
   five bespoke widgets below (chips, footnotes, the fake CTA button).
   --------------------------------------------------------------------- */

.sched-widget[b-ht5mb3er35] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sched-widget__cta[b-ht5mb3er35] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: default;
}

.sched-widget__cta i[b-ht5mb3er35] {
    color: var(--color-accent);
}

.sched-widget__footnote[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .5);
}

.sched-widget__footnote--center[b-ht5mb3er35] {
    justify-content: center;
}

.sched-chips[b-ht5mb3er35] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sched-chips--center[b-ht5mb3er35] {
    justify-content: center;
}

.sched-chip[b-ht5mb3er35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.sched-chip i[b-ht5mb3er35] {
    font-size: 11px;
}

.sched-chip--good[b-ht5mb3er35] {
    color: #7be08a;
    border-color: rgba(123, 224, 138, .25);
    background: rgba(123, 224, 138, .08);
}

.sched-chip--warn[b-ht5mb3er35] {
    color: #f5c344;
    border-color: rgba(245, 195, 68, .28);
    background: rgba(245, 195, 68, .08);
}

/* ---------------------------------------------------------------------
   1. AI Scheduling — a prompt + a real-looking AI proposal card.
   --------------------------------------------------------------------- */

.sched-ai__prompt[b-ht5mb3er35] {
    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;
}

.sched-ai__tag[b-ht5mb3er35] {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.sched-ai__result[b-ht5mb3er35] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 3px 14px 14px 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.sched-ai__icon[b-ht5mb3er35] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 159, 255, .16);
    color: var(--color-accent);
    font-size: 14px;
}

.sched-ai__result p[b-ht5mb3er35] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------------------
   2. Real-time re-optimization — planned vs actual bars + a job sliding.
   --------------------------------------------------------------------- */

.sched-runrate__job[b-ht5mb3er35] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sched-runrate__job-id[b-ht5mb3er35] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sched-runrate__job-number[b-ht5mb3er35] {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.sched-runrate__job-part[b-ht5mb3er35] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

.sched-runrate__row[b-ht5mb3er35] {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 10px;
}

.sched-runrate__row-label[b-ht5mb3er35] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
}

.sched-runrate__row-value[b-ht5mb3er35] {
    text-align: right;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .7);
}

.sched-runrate__track[b-ht5mb3er35] {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.sched-runrate__fill[b-ht5mb3er35] {
    height: 100%;
    border-radius: inherit;
}

.sched-runrate__fill--plan[b-ht5mb3er35] {
    background: rgba(255, 255, 255, .4);
}

.sched-runrate__fill--actual[b-ht5mb3er35] {
    background: #f5c344;
}

.sched-runrate__shift[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
}

.sched-runrate__block[b-ht5mb3er35] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 10px;
    text-align: center;
}

.sched-runrate__block-number[b-ht5mb3er35] {
    font-size: 12px;
    font-weight: 700;
}

.sched-runrate__block-meta[b-ht5mb3er35] {
    font-size: 10.5px;
    opacity: .8;
}

.sched-runrate__block.is-ghost[b-ht5mb3er35] {
    border: 1px dashed rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .4);
    background: transparent;
    text-decoration: line-through;
}

.sched-runrate__block.is-shifted[b-ht5mb3er35] {
    background: rgba(0, 159, 255, .14);
    border: 1px solid rgba(0, 159, 255, .35);
    color: #fff;
}

.sched-runrate__block.is-shifted em[b-ht5mb3er35] {
    font-style: normal;
    font-weight: 700;
    color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   3 & 4. Shared mini-calendar used by "One Calendar" and "Guardrails".
   --------------------------------------------------------------------- */

.sched-cal__lane[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sched-cal__label[b-ht5mb3er35] {
    flex: 0 0 128px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

.sched-cal__track[b-ht5mb3er35] {
    flex: 1;
    display: flex;
    gap: 3px;
    height: 42px;
}

.sched-cal__block[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 8px;
}

/* Job blocks carry a job number and a part/quantity line underneath
   rather than a single generic "Job 12345" label; maintenance blocks
   carry the actual work being done (e.g. "Filler Calibration") plus its
   PM/CM type, not a generic "PM Inspection" placeholder. */
.sched-cal__block--job[b-ht5mb3er35],
.sched-cal__block--maint[b-ht5mb3er35] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    position: relative;
}

.sched-cal__block--job[b-ht5mb3er35] {
    background: #3fae4a;
}

.sched-cal__block-number[b-ht5mb3er35] {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.2;
}

.sched-cal__block-meta[b-ht5mb3er35] {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    opacity: .85;
}

.sched-cal__block--changeover[b-ht5mb3er35] {
    background: #6c6ff0;
}

.sched-cal__block--maint[b-ht5mb3er35] {
    background: #e0559c;
}

.sched-cal__legend[b-ht5mb3er35] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .6);
}

.sched-cal__legend span[b-ht5mb3er35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sched-cal__dot[b-ht5mb3er35] {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.sched-cal__dot--job[b-ht5mb3er35] {
    background: #3fae4a;
}

.sched-cal__dot--changeover[b-ht5mb3er35] {
    background: #6c6ff0;
}

.sched-cal__dot--maint[b-ht5mb3er35] {
    background: #e0559c;
}

/* ---------------------------------------------------------------------
   4. Guardrails — the flagged block plus its violation callout.
   --------------------------------------------------------------------- */

.sched-widget--alert .sched-cal__block.is-flagged[b-ht5mb3er35] {
    background: #3fae4a;
    outline: 2px solid #f04438;
    outline-offset: 2px;
    color: #fff;
}

.sched-cal__block-flag[b-ht5mb3er35] {
    position: absolute;
    top: 4px;
    right: 6px;
    color: #ffd7d2;
    font-size: 10px;
}

.sched-alert__callout[b-ht5mb3er35] {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(240, 68, 56, .08);
    border: 1px solid rgba(240, 68, 56, .3);
}

.sched-alert__title[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #ff8177;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.sched-alert__callout p[b-ht5mb3er35] {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

.sched-alert__resolve[b-ht5mb3er35] {
    align-self: flex-start;
    border-color: rgba(240, 68, 56, .4);
    background: rgba(240, 68, 56, .14);
}

.sched-alert__resolve i[b-ht5mb3er35] {
    color: #ff8177;
}

/* ---------------------------------------------------------------------
   5. Connected Data — an actual Essembi work order card, synced fields
      and all, rather than an ERP-to-Essembi pipeline diagram.
   --------------------------------------------------------------------- */

.sched-wo[b-ht5mb3er35] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sched-wo__head[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sched-wo__number[b-ht5mb3er35] {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}

.sched-wo__part[b-ht5mb3er35] {
    margin-top: -8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.sched-wo__fields[b-ht5mb3er35] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sched-wo__field[b-ht5mb3er35] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sched-wo__field span[b-ht5mb3er35] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.sched-wo__field strong[b-ht5mb3er35] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}

/* ---------------------------------------------------------------------
   6. Built With Essembi Scripting — a small code-editor mock showing an
      actual scheduling rule, not a screenshot of the real editor.
   --------------------------------------------------------------------- */

.sched-code[b-ht5mb3er35] {
    text-align: left;
    border-radius: 12px;
    overflow: hidden;
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, .1);
}

.sched-code__head[b-ht5mb3er35] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sched-code__dot[b-ht5mb3er35] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.sched-code__dot--red[b-ht5mb3er35] { background: #f04438; }
.sched-code__dot--yellow[b-ht5mb3er35] { background: #f5c344; }
.sched-code__dot--green[b-ht5mb3er35] { background: #3fae4a; }

.sched-code__filename[b-ht5mb3er35] {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
}

.sched-code__body[b-ht5mb3er35] {
    margin: 0;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.sched-code__comment[b-ht5mb3er35] { color: rgba(255, 255, 255, .4); }
.sched-code__kw[b-ht5mb3er35] { color: #ff7ab6; }
.sched-code__var[b-ht5mb3er35] { color: #7ec9ff; }
.sched-code__str[b-ht5mb3er35] { color: #a5e07a; }
.sched-code__fn[b-ht5mb3er35] { color: #d2a8ff; }
.sched-code__num[b-ht5mb3er35] { color: #f5c344; }
/* /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: #fff;
    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%;
}

/* ---------------------------------------------------------------------
   Live Line Status preview — a light-mode build of Production's
   operator job screen widget, for the vs-Redzone/vs-Vorne hero slot.
   Same structure as .prod-widget--line, re-themed for a white card
   instead of the dark showcase background.
   --------------------------------------------------------------------- */

.subhero__shot--widget[b-qhyx12j11s] {
    background: var(--color-bg);
}

.llsp-widget[b-qhyx12j11s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
}

.llsp-head[b-qhyx12j11s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.llsp-head-actions[b-qhyx12j11s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.llsp-name[b-qhyx12j11s] {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
}

.llsp-job[b-qhyx12j11s] {
    margin-top: -10px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.llsp-mini-btn[b-qhyx12j11s] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.llsp-mini-btn--alert[b-qhyx12j11s] {
    color: #d0362a;
    border-color: rgba(240, 68, 56, .25);
    background: rgba(240, 68, 56, .06);
}

.llsp-mini-btn--primary[b-qhyx12j11s] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.llsp-progress-track[b-qhyx12j11s] {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.llsp-progress-fill[b-qhyx12j11s] {
    height: 100%;
    border-radius: inherit;
    background: #3fae4a;
}

.llsp-progress-labels[b-qhyx12j11s] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.llsp-stats3[b-qhyx12j11s] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.llsp-stat[b-qhyx12j11s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.llsp-stat__label[b-qhyx12j11s] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.llsp-stat__value[b-qhyx12j11s] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
}

.llsp-stat--warn .llsp-stat__value[b-qhyx12j11s] {
    color: #b8790f;
}

.llsp-actions[b-qhyx12j11s] {
    display: flex;
    gap: 8px;
}

.llsp-trend svg[b-qhyx12j11s] {
    display: block;
    width: 100%;
    height: 54px;
}

.llsp-trend-line[b-qhyx12j11s] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.llsp-trend-caption[b-qhyx12j11s] {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--color-text-subtle);
}

.llsp-history[b-qhyx12j11s] {
    display: flex;
    gap: 3px;
    height: 16px;
}

.llsp-seg[b-qhyx12j11s] {
    flex: 1;
    border-radius: 3px;
}

.llsp-seg--run[b-qhyx12j11s],
.llsp-dot--run[b-qhyx12j11s] {
    background: #3fae4a;
}

.llsp-seg--changeover[b-qhyx12j11s],
.llsp-dot--changeover[b-qhyx12j11s] {
    background: #6c6ff0;
}

.llsp-seg--down[b-qhyx12j11s],
.llsp-dot--down[b-qhyx12j11s] {
    background: #f04438;
}

.llsp-dot[b-qhyx12j11s] {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.llsp-legend[b-qhyx12j11s] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.llsp-legend span[b-qhyx12j11s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.llsp-toolbar[b-qhyx12j11s] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.llsp-tool-btn[b-qhyx12j11s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.llsp-tool-btn i[b-qhyx12j11s] {
    color: var(--color-text-subtle);
}

/* 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/TeamEngagementShowcaseSection.razor.rz.scp.css */
.team-showcase[b-50ewbewleu] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.team-showcase__intro[b-50ewbewleu] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.team-showcase__intro .section-eyebrow[b-50ewbewleu] { justify-content: center; }
.team-showcase__intro .section-eyebrow .label[b-50ewbewleu] { color: rgba(255, 255, 255, .7); }

.team-showcase__intro h1[b-50ewbewleu] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.team-showcase__intro p[b-50ewbewleu] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.team-showcase__cta[b-50ewbewleu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .team-showcase__cta[b-50ewbewleu] {
        flex-direction: column;
        align-items: stretch;
    }
}

.team-widget[b-50ewbewleu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    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);
}

.team-chips[b-50ewbewleu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-chip[b-50ewbewleu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.team-chip--good[b-50ewbewleu] {
    color: #7be08a;
    border-color: rgba(123, 224, 138, .25);
    background: rgba(123, 224, 138, .08);
}

/* ---------------------------------------------------------------------
   1. Shift huddles.
   --------------------------------------------------------------------- */

.team-huddle__head[b-50ewbewleu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.team-huddle__section[b-50ewbewleu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-huddle__label[b-50ewbewleu] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.team-huddle__section ul[b-50ewbewleu] {
    list-style: disc;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.team-huddle__section li[b-50ewbewleu] {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------------------
   2. Skills matrix.
   --------------------------------------------------------------------- */

.team-skills__grid[b-50ewbewleu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-x: auto;
}

.team-skills__row[b-50ewbewleu] {
    display: grid;
    /* minmax(0, Nfr), not bare Nfr — a bare fr track still floors at its
       content's min-content width (here, the nowrap header labels like
       "Line #1 Filling"), so the grid ignored the fr proportions and
       just grew past the card on narrow screens instead of shrinking. */
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.7fr)) minmax(0, 0.6fr);
    gap: 6px;
    align-items: center;
    padding: 6px 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
}

.team-skills__row--head[b-50ewbewleu] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 8px;
}

.team-skill[b-50ewbewleu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.team-skill--1[b-50ewbewleu] { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
.team-skill--2[b-50ewbewleu] { background: rgba(245, 195, 68, .3); color: #f5c344; }
.team-skill--3[b-50ewbewleu] { background: rgba(0, 159, 255, .3); color: #6ec3ff; }
.team-skill--4[b-50ewbewleu] { background: rgba(123, 224, 138, .3); color: #7be08a; }

.team-skill--legend[b-50ewbewleu] {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

.team-skills__rating[b-50ewbewleu] {
    font-weight: 800;
    color: #fff;
}

/* ---------------------------------------------------------------------
   3. Shout outs.
   --------------------------------------------------------------------- */

.team-widget--shoutouts[b-50ewbewleu] {
    gap: 14px;
}

.team-shoutout[b-50ewbewleu] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------------
   Avatars — real headshots (round-cropped), used in shout-outs, huddle
   leader chips, and the skills matrix.
   --------------------------------------------------------------------- */

.team-avatar[b-50ewbewleu] {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.team-avatar--lg[b-50ewbewleu] {
    width: 40px;
    height: 40px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.team-avatar--sm[b-50ewbewleu] {
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.team-skills__name[b-50ewbewleu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.team-shoutout__body[b-50ewbewleu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.team-shoutout__name[b-50ewbewleu] {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.team-shoutout__name em[b-50ewbewleu] {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
}

.team-shoutout__body p[b-50ewbewleu] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}

/* ---------------------------------------------------------------------
   Mobile — these three widgets never had their own narrow-screen pass,
   so they just inherited the desktop card padding and column proportions
   at whatever width the phone happened to be.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
    .team-widget[b-50ewbewleu] {
        padding: 16px;
        gap: 14px;
    }

    .team-huddle__head[b-50ewbewleu] {
        flex-wrap: wrap;
        row-gap: 8px;
        font-size: 12.5px;
    }

    /* The name/skill grid: let the long header labels wrap onto two
       lines instead of forcing a wide min-content column (the
       minmax(0, …) fix above stops it overflowing, but nowrap text
       would still just get cut off inside its now-narrower cell). */
    .team-skills__row[b-50ewbewleu] {
        gap: 4px;
        font-size: 10px;
        white-space: normal;
    }

    .team-skills__row--head[b-50ewbewleu] {
        font-size: 8px;
        line-height: 1.25;
    }

    .team-skill[b-50ewbewleu] {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    /* Give the name column more of the row and let a long name wrap
       instead of forcing nowrap — at this width nowrap just ran the
       text straight into the next column instead of actually fitting. */
    .team-skills__row[b-50ewbewleu] {
        grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .6fr)) minmax(0, .5fr);
    }

    .team-skills__name[b-50ewbewleu] {
        align-items: flex-start;
        white-space: normal;
        line-height: 1.2;
    }

    .team-shoutout[b-50ewbewleu] {
        gap: 10px;
        padding: 10px;
    }
}
/* /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);
}

/* ---------------------------------------------------------------------
   Built widgets standing in for the team screenshots — same visual
   grammar as the dark showcase widgets on the functional pages (bordered
   stat boxes, bold numbers, semantic red/green/purple), just re-themed
   for this section's white card. Production stays close to the real
   product screen; the rest take more liberty while keeping the scheme.
   --------------------------------------------------------------------- */

.tt-card[b-5maxibh18a] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 20px 22px;
}

.tt-widget[b-5maxibh18a] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tt-title[b-5maxibh18a] {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
}

.tt-title--sub[b-5maxibh18a] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* Shared bordered "stat box" — Open / Past Due / big numbers, matching
   the real app's plain bordered tiles rather than the marketing site's
   heavier shadowed cards. */
.tt-stat-box[b-5maxibh18a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 6px;
    min-height: 72px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-align: center;
}

.tt-stat-box span[b-5maxibh18a] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.tt-stat-box strong[b-5maxibh18a] {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.tt-stat-box em[b-5maxibh18a] {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
}

.tt-stat-box em.up[b-5maxibh18a], .tt-stat-box em.down[b-5maxibh18a] { color: #40C057; }
.tt-stat-box em.up-bad[b-5maxibh18a] { color: #FF4444; }

/* Score coloring standard: <70 red, 70-80 yellow, >80 green — text in
   the color, background at 10% opacity, border in the color. */
.tt-stat-box.is-bad[b-5maxibh18a] {
    border-color: #FF4444;
    background: rgba(255, 68, 68, .10);
}

.tt-stat-box.is-bad strong[b-5maxibh18a] {
    color: #FF4444;
}

.tt-stat-box.is-warn[b-5maxibh18a] {
    border-color: #FFD43B;
    background: rgba(255, 212, 59, .10);
}

.tt-stat-box.is-warn strong[b-5maxibh18a] {
    color: #FFD43B;
}

.tt-stat-box.is-good[b-5maxibh18a] {
    border-color: #40C057;
    background: rgba(64, 192, 87, .10);
}

.tt-stat-box.is-good strong[b-5maxibh18a] {
    color: #40C057;
}

.tt-mini-btn[b-5maxibh18a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.tt-mini-btn--alert[b-5maxibh18a] {
    color: #FF4444;
    border-color: rgba(255, 68, 68, .3);
    background: rgba(255, 68, 68, .10);
}

/* ---- 1. Production ---- */
.tt-prod__head[b-5maxibh18a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.tt-prod__name[b-5maxibh18a] {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
}

.tt-prod__actions[b-5maxibh18a] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tt-prod__job[b-5maxibh18a] {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.tt-prod__job strong[b-5maxibh18a] {
    color: var(--color-text);
}

.tt-prod__job span[b-5maxibh18a] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--color-text-subtle);
}

.tt-prod__progress-track[b-5maxibh18a] {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.tt-prod__progress-fill[b-5maxibh18a] {
    height: 100%;
    border-radius: inherit;
    background: #40C057;
}

.tt-prod__progress-labels[b-5maxibh18a] {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-subtle);
}

.tt-prod__stats2[b-5maxibh18a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.tt-prod__stat[b-5maxibh18a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.tt-prod__stat.is-bad[b-5maxibh18a] {
    border-color: #FF4444;
    background: rgba(255, 68, 68, .10);
}

.tt-prod__stat-label[b-5maxibh18a] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.tt-prod__stat-value[b-5maxibh18a] {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.tt-prod__stat.is-bad .tt-prod__stat-value[b-5maxibh18a] {
    color: #FF4444;
}

.tt-prod__stat-target[b-5maxibh18a] {
    font-size: 10px;
    color: var(--color-text-subtle);
}

.tt-prod__trend[b-5maxibh18a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tt-prod__trend-title[b-5maxibh18a] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-subtle);
}

.tt-prod__trend svg[b-5maxibh18a] {
    display: block;
    width: 100%;
    height: 46px;
}

.tt-prod__trend-line[b-5maxibh18a] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tt-prod__history[b-5maxibh18a] {
    display: flex;
    gap: 3px;
    height: 12px;
}

.tt-prod__history .seg[b-5maxibh18a] { border-radius: 3px; }
.tt-prod__history .seg.run[b-5maxibh18a] { background: #40C057; }
.tt-prod__history .seg.changeover[b-5maxibh18a] { background: #7c5cf5; }
.tt-prod__history .seg.down[b-5maxibh18a] { background: #FF4444; }

.tt-prod__legend[b-5maxibh18a] {
    display: flex;
    gap: 14px;
    font-size: 10.5px;
    color: var(--color-text-muted);
}

.tt-prod__legend span[b-5maxibh18a] { display: inline-flex; align-items: center; gap: 5px; }
.tt-prod__legend .dot[b-5maxibh18a] { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.tt-prod__legend .dot.run[b-5maxibh18a] { background: #40C057; }
.tt-prod__legend .dot.changeover[b-5maxibh18a] { background: #7c5cf5; }
.tt-prod__legend .dot.down[b-5maxibh18a] { background: #FF4444; }

/* ---- 2. Quality ---- */
.tt-qty__rows[b-5maxibh18a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tt-qty__row[b-5maxibh18a] {
    display: grid;
    grid-template-columns: 1fr 160px auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.tt-qty__row:last-child[b-5maxibh18a] { border-bottom: none; padding-bottom: 0; }

.tt-qty__meta[b-5maxibh18a] { display: flex; flex-direction: column; gap: 2px; }
.tt-qty__meta strong[b-5maxibh18a] { font-size: 12.5px; color: var(--color-text); }
.tt-qty__meta span[b-5maxibh18a] { font-size: 10.5px; color: var(--color-text-subtle); }

.tt-qty__spark[b-5maxibh18a] { width: 160px; height: 36px; display: block; flex-shrink: 0; }
.tt-qty__spark .band[b-5maxibh18a] { fill: rgba(64, 192, 87, .10); }
.tt-qty__spark .limit[b-5maxibh18a] { stroke: rgba(64, 192, 87, .5); stroke-width: 1; stroke-dasharray: 3 2; }
.tt-qty__spark .center[b-5maxibh18a] { stroke: rgba(64, 192, 87, .7); stroke-width: 1; }
.tt-qty__spark .trend[b-5maxibh18a] { fill: none; stroke: var(--color-accent); stroke-width: 1.6; }
.tt-qty__spark .pt.is-bad[b-5maxibh18a] { fill: #FF4444; }

.tt-qty__last[b-5maxibh18a] { font-size: 12px; font-weight: 700; color: var(--color-text); white-space: nowrap; text-align: right; }
.tt-qty__last strong[b-5maxibh18a] { font-variant-numeric: tabular-nums; }

.tt-qty__legend[b-5maxibh18a] {
    display: flex;
    gap: 14px;
    font-size: 10.5px;
    color: var(--color-text-muted);
    padding-top: 2px;
}
.tt-qty__legend span[b-5maxibh18a] { display: inline-flex; align-items: center; gap: 5px; }
.tt-qty__legend .dot[b-5maxibh18a] { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tt-qty__legend .dot.ok[b-5maxibh18a] { background: #40C057; }
.tt-qty__legend .dot.bad[b-5maxibh18a] { background: #FF4444; }

/* ---- 3. Maintenance ---- */
.tt-maint__row[b-5maxibh18a] {
    display: grid;
    grid-template-columns: 90px 1fr 110px;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.tt-maint__row:last-of-type[b-5maxibh18a] { border-bottom: none; padding-bottom: 0; }

.tt-maint__row-label[b-5maxibh18a] { font-size: 12.5px; font-weight: 700; color: var(--color-text); }

.tt-maint__stats[b-5maxibh18a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.tt-maint__bars[b-5maxibh18a] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 44px;
}

.tt-maint__bars span[b-5maxibh18a] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: #7c5cf5;
}

.tt-maint__axis[b-5maxibh18a] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    font-size: 9.5px;
    color: var(--color-text-subtle);
    padding-right: 4px;
}

/* ---- 4. Safety ---- */
.tt-safe__grid[b-5maxibh18a] {
    display: grid;
    grid-template-columns: 84px repeat(4, 1fr);
    gap: 8px;
}

.tt-safe__label[b-5maxibh18a] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.tt-safe__label strong[b-5maxibh18a] { font-size: 12px; color: var(--color-text); }
.tt-safe__label span[b-5maxibh18a] { font-size: 9.5px; color: var(--color-text-subtle); }

/* ---- 5. Accounting ---- */
.tt-acct__table[b-5maxibh18a] { display: flex; flex-direction: column; }

.tt-acct__row[b-5maxibh18a] {
    display: grid;
    grid-template-columns: 1.1fr 1fr .8fr .9fr;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 12px;
    color: var(--color-text);
}

.tt-acct__row:last-child[b-5maxibh18a] { border-bottom: none; }

.tt-acct__row--head[b-5maxibh18a] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.tt-pill[b-5maxibh18a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tt-pill--good[b-5maxibh18a] { color: #40C057; background: rgba(64, 192, 87, .10); }
.tt-pill--warn[b-5maxibh18a] { color: #FFD43B; background: rgba(255, 212, 59, .10); }
.tt-pill--bad[b-5maxibh18a] { color: #FF4444; background: rgba(255, 68, 68, .10); }

/* ---- 6. Leadership ---- */
.tt-lead__kpis[b-5maxibh18a] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tt-lead__bench[b-5maxibh18a] { display: flex; flex-direction: column; gap: 8px; }

.tt-lead__bench-row[b-5maxibh18a] {
    display: grid;
    grid-template-columns: 92px 1fr 28px;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.tt-lead__bench-row .track[b-5maxibh18a] {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.tt-lead__bench-row .fill[b-5maxibh18a] {
    height: 100%;
    border-radius: inherit;
}

.tt-lead__bench-row .fill.is-good[b-5maxibh18a] { background: #40C057; }
.tt-lead__bench-row .fill.is-warn[b-5maxibh18a] { background: #FFD43B; }
.tt-lead__bench-row .fill.is-bad[b-5maxibh18a] { background: #FF4444; }

.tt-lead__bench-row em[b-5maxibh18a] {
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.tt-lead__bench-row em.is-good[b-5maxibh18a] { color: #40C057; }
.tt-lead__bench-row em.is-warn[b-5maxibh18a] { color: #FFD43B; }
.tt-lead__bench-row em.is-bad[b-5maxibh18a] { color: #FF4444; }

@media (max-width: 520px) {
    .tt-lead__kpis[b-5maxibh18a], .tt-prod__stats2[b-5maxibh18a] { grid-template-columns: repeat(2, 1fr); }
    .tt-safe__grid[b-5maxibh18a] { grid-template-columns: repeat(2, 1fr); }
    .tt-safe__label[b-5maxibh18a] { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; }
    .tt-acct__row[b-5maxibh18a] { grid-template-columns: 1.3fr .8fr; }
    .tt-acct__row span:nth-child(2)[b-5maxibh18a] { display: none; }
    .tt-acct__row--head span:nth-child(3)[b-5maxibh18a] { display: none; }
    .tt-acct__row:not(.tt-acct__row--head) span:nth-child(3)[b-5maxibh18a] { display: none; }
    .tt-qty__row[b-5maxibh18a] { grid-template-columns: 1fr; }
    .tt-qty__spark[b-5maxibh18a] { width: 100%; }
    .tt-qty__last[b-5maxibh18a] { text-align: left; }
}

.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;
        gap: 10px;
        padding: 12px 14px;
    }

    .teams-tool__icon[b-5maxibh18a] {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    /* Smaller than the desktop 4-up size (13.5px) — at 2-up mobile
       width this title was the widest thing in the card and read as
       oversized against the shrunk icon next to it. */
    .teams-tool__body h3[b-5maxibh18a] {
        font-size: 12px;
    }
}
/* /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/VisionShowcaseSection.razor.rz.scp.css */
.vis-showcase[b-hf7p5sbpz5] {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: calc(var(--header-height) + 72px) 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .12), transparent 40%),
        #0b0f13;
}

.vis-showcase__intro[b-hf7p5sbpz5] {
    max-width: 860px;
    text-align: center;
    margin-inline: auto;
    color: #fff;
}

.vis-showcase__intro .section-eyebrow[b-hf7p5sbpz5] { justify-content: center; }
.vis-showcase__intro .section-eyebrow .label[b-hf7p5sbpz5] { color: rgba(255, 255, 255, .7); }

.vis-showcase__intro h1[b-hf7p5sbpz5] {
    margin: 14px 0 16px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}

.vis-showcase__intro p[b-hf7p5sbpz5] {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.vis-showcase__cta[b-hf7p5sbpz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .vis-showcase__cta[b-hf7p5sbpz5] {
        flex-direction: column;
        align-items: stretch;
    }
}

.vis-widget[b-hf7p5sbpz5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    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);
}

.vis-widget__footnote[b-hf7p5sbpz5] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.vis-chip[b-hf7p5sbpz5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(0, 159, 255, .1);
    border: 1px solid rgba(0, 159, 255, .25);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   1. Event-linked video playback.
   --------------------------------------------------------------------- */

.vis-player__head[b-hf7p5sbpz5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

/* Real footage (a dark gradient baked into the same background-image
   value, set inline per widget, keeps the play glyph legible over
   whatever the still happens to show) standing in for the paused frame
   at the scrub position below, rather than an icon on a flat gradient. */
.vis-player__frame[b-hf7p5sbpz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, .85);
    font-size: 40px;
}

.vis-player__scrub-track[b-hf7p5sbpz5] {
    height: 5px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.vis-player__scrub-fill[b-hf7p5sbpz5] {
    height: 100%;
    background: var(--color-accent);
    border-radius: inherit;
}

.vis-player__scrub-labels[b-hf7p5sbpz5] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, .4);
}

.vis-player__controls[b-hf7p5sbpz5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.vis-player__buttons[b-hf7p5sbpz5] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
}

.vis-player__play[b-hf7p5sbpz5] {
    font-size: 18px;
    color: #fff;
}

.vis-player__time[b-hf7p5sbpz5] {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    text-align: center;
}

.vis-player__controls > i:last-child[b-hf7p5sbpz5] {
    color: rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------
   2. Live camera grid.
   --------------------------------------------------------------------- */

.vis-widget--grid[b-hf7p5sbpz5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.vis-widget--grid .vis-widget__footnote[b-hf7p5sbpz5] {
    grid-column: 1 / -1;
}

/* Each tile's actual still (set inline per widget) fills the card;
   the bottom scrim here (not baked into the inline image, so it stays
   put regardless of which photo a tile uses) keeps the label legible
   over it. */
.vis-cam[b-hf7p5sbpz5] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 110px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    overflow: hidden;
}

.vis-cam[b-hf7p5sbpz5]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(8, 11, 15, .85), rgba(8, 11, 15, 0) 60%);
}

.vis-cam__live[b-hf7p5sbpz5] {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(240, 68, 56, .18);
    backdrop-filter: blur(4px);
    color: #ff8177;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

.vis-cam__live span[b-hf7p5sbpz5] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff4d4d;
}

.vis-cam__label[b-hf7p5sbpz5] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    align-self: stretch;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.vis-cam__label i[b-hf7p5sbpz5] {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 480px) {
    .vis-widget--grid[b-hf7p5sbpz5] {
        grid-template-columns: 1fr;
    }
}
/* /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/NewsletterSignupForm.razor.rz.scp.css */
.newsletter-signup form[b-daaq2nzt9y],
.newsletter-signup__row[b-daaq2nzt9y] {
    display: flex;
    max-width: none;
}

.newsletter-signup input[b-daaq2nzt9y] {
    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;
}

.newsletter-signup input[b-daaq2nzt9y]::placeholder {
    color: #7d8288;
}

.newsletter-signup input:disabled[b-daaq2nzt9y] {
    opacity: .6;
}

.newsletter-signup button[b-daaq2nzt9y] {
    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;
}

.newsletter-signup button:hover[b-daaq2nzt9y] {
    background: #e9edf1;
}

.newsletter-signup button:disabled[b-daaq2nzt9y] {
    cursor: default;
    opacity: .75;
}

.newsletter-signup__spin[b-daaq2nzt9y] {
    animation: newsletter-signup-spin-b-daaq2nzt9y .8s linear infinite;
}

@keyframes newsletter-signup-spin-b-daaq2nzt9y {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.newsletter-signup__error[b-daaq2nzt9y] {
    margin: 8px 0 0;
    color: #ff8a8a;
    font-size: 12px;
}

.newsletter-signup__success[b-daaq2nzt9y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 13px;
}

.newsletter-signup__success i[b-daaq2nzt9y] {
    color: #4ade80;
    font-size: 16px;
}
/* /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);
}