/* Allegro — Subsystem Explorer — SCOPED build. Every rule lives under
   .subsys-section so it cannot leak into the host page. Load after GSAP. */
.subsys-section {
    box-sizing: border-box;
}

.subsys-section {
    min-height: 600px
}

.subsys-section {
    --ink: #111927;
    --ink-2: #525252;
    --ink-3: #6F6F6F;
    --line: #E0E0E0;
    --line-soft: #EDEFF3;
    --bg: #ffffff;
    --surface: #F5F7FA;
    --surface-2: #EEF1F6;
    --blue: #0F62FE;
    --blue-400: #4589FF;
    --blue-300: #6AA1FF;
    --blue-600: #0C4ECB;
    --navy: #0B1B33;
    --green: #4CA30D;
    --fd: "canada-type-gibson",-apple-system,"Segoe UI",sans-serif;
    --fb: "inter-variable","Inter",-apple-system,"Segoe UI",sans-serif;
    --ease: cubic-bezier(.16,1,.3,1);
    --z-scene: 1;
    --z-focus: 3;
    --z-panel: 6;
}

    .subsys-section * {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

.subsys-section {
    font-family: var(--fb);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

    .subsys-section h1, .subsys-section h2, .subsys-section h3, .subsys-section h4, .subsys-section h5, .subsys-section .logo, .subsys-section .pbanner, .subsys-section .pn {
        font-family: var(--fd);
        font-weight: 500
    }

    .subsys-section a {
        text-decoration: none;
        color: inherit
    }

    .subsys-section img {
        display: block;
        max-width: 100%
    }

    .subsys-section .wrap {
        max-width: 1240px;
        margin: 0 auto
    }

.subsys-section {
    padding: 40px 0 40px 0
}

@media screen and (max-width:1024px) {
    .subsys-section {
        padding: 0 0 50px 0;
        min-height: auto;
    }
}

.subsys-section {
    background: #fff;
    position: relative;
}
    /* disclaimer under the render card */
    .subsys-section .illus-note {
        max-width: 1240px;
        margin: 10px auto 0;
        font-size: 11.5px;
        line-height: 1.4;
        color: var(--ink-3);
        text-align: right;
        padding-right: 10px
    }

    .subsys-section .lead-para {
        color: var(--ink-2);
        font-size: clamp(16px,1.3vw,18px);
        max-width: 100ch;
        margin: 0 auto 20px;
        text-align: center;
        text-wrap: pretty
    }

    .subsys-section .lead-bullets {
        list-style: none;
        max-width: 1080px;
        margin: 0 auto 46px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: clamp(20px,2.4vw,34px)
    }

        .subsys-section .lead-bullets li {
            padding-top: 15px;
            border-top: 2px solid var(--blue);
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--ink-2);
            text-wrap: pretty
        }

        .subsys-section .lead-bullets strong {
            color: var(--ink);
            font-weight: 600
        }

    .subsys-section .explorer {
        max-width: 1240px;
        margin: 0 auto;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(11,27,51,.05),0 24px 48px -16px rgba(11,27,51,.20)
    }

    .subsys-section .section-heading {
        font-size: 16.5px;
        font-weight: 500;
        letter-spacing: -.005em;
        line-height: 1.25;
        padding: 2px 4px 10px;
        margin: 0;
        color: var(--blue)
    }

        .subsys-section .section-heading .hl {
            display: block
        }

    .subsys-section .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0
    }

    .subsys-section .tabs {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        background: var(--surface);
        border-right: 1px solid var(--line)
    }

        .subsys-section .tabs .rail-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: var(--ink-3);
            padding: 2px 4px 6px
        }

    .subsys-section .tab {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 10px;
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-2);
        padding: 13px 15px;
        line-height: 1.25;
        transition: color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease)
    }

        .subsys-section .tab:hover {
            color: var(--ink);
            border-color: var(--blue-300);
            box-shadow: 0 4px 14px -8px rgba(15,98,254,.45)
        }

        .subsys-section .tab:active {
            transform: translateY(1px)
        }

        .subsys-section .tab:focus-visible {
            outline: 2px solid var(--blue);
            outline-offset: 2px
        }

        .subsys-section .tab .n {
            flex: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(15,98,254,.1);
            color: var(--blue);
            font-size: 12px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 1px;
            transition: background .2s var(--ease),color .2s var(--ease)
        }

        .subsys-section .tab:hover .n {
            background: rgba(15,98,254,.12);
            color: var(--blue)
        }

        .subsys-section .tab.active {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 10px 24px -10px rgba(15,98,254,.6)
        }

            .subsys-section .tab.active .n {
                background: #fff;
                color: var(--blue)
            }

    .subsys-section .tab-underline {
        display: none
    }

.no-gsap .subsys-section .tab.active {
    box-shadow: 0 10px 24px -10px rgba(15,98,254,.6)
}

.subsys-section .explorer-body {
    display: grid;
    grid-template-columns: 224px 1fr 1.28fr;
    align-items: stretch;
    height: 580px;
    transition: grid-template-columns .7s cubic-bezier(.4,0,.2,1)
}

.subsys-section.imm.zoom .explorer-body {
    height: auto;
    min-height: 580px
}

.subsys-section[data-comp="arm"].imm.zoom .explorer-body {
    min-height: 600px
}

.subsys-section.imm:not(.zoom) .explorer-body {
    grid-template-columns: 224px 0fr 1.28fr
}

.subsys-section.imm:not(.zoom) .detailcol {
    padding: 0;
    border-right: 0;
    overflow: hidden
}

.subsys-section .viewer {
    position: relative;
    display: flex;
    background: var(--surface-2);
    min-width: 0
}

    .subsys-section .viewer .stage {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

.subsys-section .detailcol {
    border-right: 1px solid var(--line);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    position: relative
}

.subsys-section .back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color .15s var(--ease),background .15s var(--ease)
}

    .subsys-section .back-btn:hover {
        color: var(--ink);
        background: var(--surface-2)
    }

    .subsys-section .back-btn:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
        border-radius: 6px
    }

    .subsys-section .back-btn svg {
        width: 14px;
        height: 14px
    }

.subsys-section .nav-btn {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--ink-2);
    transition: color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease)
}

    .subsys-section .nav-btn:hover {
        color: var(--ink);
        border-color: var(--ink-3);
        background: var(--surface-2)
    }

    .subsys-section .nav-btn:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px
    }

    .subsys-section .nav-btn svg {
        width: 14px;
        height: 14px
    }

.subsys-section .nav-prev {
    top: 12px;
    right: 48px
}

.subsys-section .nav-next {
    top: 12px;
    right: 12px
}

.subsys-section.imm.zoom .nav-btn {
    display: inline-flex
}

.subsys-section.imm.zoom .back-btn {
    display: inline-flex
}

.subsys-section .subsys-copy .subhead {
    font-family: var(--fd);
    font-weight: 500;
    font-size: 15px;
    color: var(--blue);
    margin-bottom: 8px
}

.subsys-section .subsys-copy h3 {
    font-size: clamp(18px,1.8vw,22px);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 12px;
    text-wrap: balance
}

.subsys-section .subsys-copy p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.62;
    margin-bottom: 16px;
    text-wrap: pretty
}

.subsys-section .copy-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px
}

    .subsys-section .copy-bullets li {
        font-size: 14px;
        line-height: 1.58;
        color: var(--ink-2);
        text-wrap: pretty
    }

    .subsys-section .copy-bullets strong {
        display: block;
        color: var(--ink);
        font-weight: 600;
        font-size: 15px;
        letter-spacing: -.005em;
        line-height: 1.3;
        margin-bottom: 3px
    }

    .subsys-section .copy-bullets b {
        color: var(--ink);
        font-weight: 600
    }

.subsys-section .subsys-copy .rr {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px
}

.subsys-section .subsys-copy .rlist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left:0;
}

    .subsys-section .subsys-copy .rlist a {
        display: inline-flex;
        gap: 8px;
        color: var(--blue);
        font-size: 14px;
        line-height: 1.45;
        padding: 6px 0
    }

        .subsys-section .subsys-copy .rlist a::before {
            content: "→";
            color: currentColor
        }

        .subsys-section .subsys-copy .rlist a:hover {
            color: var(--blue-600)
        }

.subsys-section .txtlink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--blue);
    font-weight: 600;
    font-size: 14px;
    margin-top: 16px
}

.subsys-section .copy-hint {
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.6;
    text-wrap: pretty
}

.subsys-section .stage {
    position: relative;
    aspect-ratio: 1376/768;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px -26px rgba(6,12,28,.4)
}

.subsys-section .scene {
    position: absolute;
    inset: 0;
    z-index: var(--z-scene);
    transform-origin: 0 0;
    will-change: transform;
    backface-visibility: hidden
}

.subsys-section .plate {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    user-select: none;
    -webkit-user-drag: none
}

.subsys-section .focus {
    position: absolute;
    inset: 0;
    z-index: var(--z-focus);
    pointer-events: none;
    opacity: 0
}

.subsys-section .detailview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--surface-2);
    border-radius: inherit
}

.subsys-section .mk {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: opacity .4s var(--ease)
}

    .subsys-section .mk::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 44px;
        height: 44px;
        transform: translate(-50%,-50%) translate(var(--bx,0),var(--by,0));
        border-radius: 50%;
        pointer-events: auto
    }

.subsys-section.imm.zoom .mk {
    opacity: 0;
    pointer-events: none
}

.subsys-section .mk-line, .subsys-section .mk-dot {
    display: none
}

.subsys-section .mk-n {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: auto;
    transform: translate(-50%,-50%) translate(var(--bx,0),var(--by,0));
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0066FF;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    box-shadow: 0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35);
    border: 0;
    transition: background .15s var(--ease),box-shadow .15s var(--ease)
}

    .subsys-section .mk-n::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid #3399FF;
        box-shadow: 0 0 20px 5px rgba(0,102,255,.5);
        opacity: 0;
        animation: caw-mk-pulse 2.1s ease-out infinite;
        animation-play-state: paused;
        pointer-events: none
    }

.subsys-section.mks-live .mk-n::after {
    animation-play-state: running
}

.subsys-section.mks-live .mk:nth-of-type(2) .mk-n::after {
    animation-delay: .35s
}

.subsys-section.mks-live .mk:nth-of-type(3) .mk-n::after {
    animation-delay: .7s
}

.subsys-section.mks-live .mk:nth-of-type(4) .mk-n::after {
    animation-delay: 1.05s
}

@keyframes caw-mk-pulse {
    0% {
        transform: scale(.85);
        opacity: 0
    }

    14% {
        opacity: .8
    }

    100% {
        transform: scale(2.5);
        opacity: 0
    }
}

.subsys-section.imm.discovered .mk-n::after {
    opacity: .9
}

.subsys-section .mk:hover .mk-n {
    background: #0044CC;
    box-shadow: 0 0 0 3px #fff,0 0 0 7px rgba(0,102,255,.35),0 3px 10px rgba(0,0,0,.35)
}

.subsys-section .mk.active .mk-n {
    background: #0044CC;
    box-shadow: 0 0 0 3px #fff,0 0 0 8px rgba(0,102,255,.4),0 3px 10px rgba(0,0,0,.35)
}

.subsys-section .mk:focus-visible {
    outline: none
}

    .subsys-section .mk:focus-visible .mk-n {
        outline: 3px solid #fff;
        outline-offset: 3px
    }

.subsys-section .panel[hidden] {
    display: none
}

@media (prefers-reduced-motion:reduce) {
    .subsys-section .mk-n::after {
        animation: none
    }
}

@media (max-width:1000px) {
    .subsys-section .explorer-body {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0
    }

    .subsys-section .tabs {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

        .subsys-section .tabs .section-heading {
            flex-basis: 100%;
            padding-bottom: 2px
        }

    .subsys-section .tab {
        flex: 1 1 40%;
        justify-content: center
    }

    .subsys-section .viewer {
        height: clamp(260px,52vw,420px)
    }

    .subsys-section .detailcol {
        border-right: 0;
        border-top: 1px solid var(--line)
    }

    .subsys-section.imm:not(.zoom) .explorer-body {
        grid-template-columns: 1fr
    }

    .subsys-section.imm:not(.zoom) .detailcol {
        display: none
    }
}

@media (max-width:640px) {
    .subsys-section .tab {
        flex: 1 1 42%;
        padding: 11px 12px;
        font-size: 13px
    }

    .subsys-section .viewer {
        height: clamp(220px,62vw,340px)
    }
}

/* robotics variant — 9 menu items need a taller, denser rail than the 4-item datacenter card */
.subsys-section[data-comp="arm"] .explorer-body {
    height: 600px
}

.subsys-section[data-comp="arm"] .tabs {
    overflow-y: auto
}

.subsys-section[data-comp="arm"] .tab {
    padding: 10px 13px;
    font-size: 13.5px
}

    .subsys-section[data-comp="arm"] .tab .n {
        width: 22px;
        height: 22px;
        font-size: 11px
    }

@media (max-width:1000px) {
    .subsys-section[data-comp="arm"] .explorer-body {
        height: auto
    }

    .subsys-section[data-comp="arm"] .tabs {
        overflow-y: visible
    }
}