/* Requirements-led selector with stronger section hierarchy. */
#switch-selector {
    --switch-navy: #071d33;
    --switch-navy-soft: #0d2f4d;
    --switch-blue: #2f86d2;
    --switch-blue-strong: #1768ad;
    --switch-cyan: #43c6d8;
    --switch-accent-soft: #9bdce7;
    --switch-canvas: #f2f6fa;
    --switch-surface: #ffffff;
    --switch-surface-soft: #eef4f8;
    --switch-line: #cbd9e5;
    --switch-muted: #53687a;
    --switch-shadow: 0 24px 64px rgba(7, 29, 51, .14);
    position: relative;
    isolation: isolate;
    padding-bottom: 4rem;
    color: var(--color-ink);
}
#switch-selector::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0 50%;
    margin-inline: -50vw;
    background:
        radial-gradient(circle at 10% 22%, rgba(47, 134, 210, .10), transparent 27rem),
        radial-gradient(circle at 94% 66%, rgba(67, 198, 216, .09), transparent 31rem),
        linear-gradient(180deg, #eef4f9 0%, var(--switch-canvas) 29rem, #f7f9fb 100%);
}
#switch-selector [hidden] { display: none !important; }
#switch-selector .selector-form-card {
    position: relative;
    overflow: visible;
    padding: 0;
    margin-top: -2.8rem;
    border: 1px solid rgba(158, 181, 201, .72);
    border-top: 0;
    border-radius: 18px;
    background: var(--switch-surface);
    box-shadow: var(--switch-shadow), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
#switch-selector .selector-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--switch-blue) 0 58%, var(--switch-cyan) 58% 82%, #92d7e3 82%);
}
#switch-selector .selector-section-kicker,
#switch-selector .selector-data-badge { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
#switch-selector .selector-section-kicker { color: #17649a; font-weight: 600; }
#switch-selector .selector-data-badge {
    padding: .55rem .8rem;
    border: 1px solid #c3d7e6;
    border-radius: 999px;
    color: #36536b;
    background: #edf5fa;
    white-space: nowrap;
}
#switch-selector .selector-submit-button,
#switch-selector .selector-add-button,
#switch-selector .selector-swap-button {
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 2.8rem;
}
#switch-selector button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
#switch-selector button:focus-visible { outline: 2px solid var(--selector-blue); outline-offset: 3px; }
#switch-selector .selector-submit-button {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary), #1f5f9d);
    box-shadow: 0 10px 22px rgba(31, 95, 157, .25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#switch-selector .selector-submit-button:hover {
    background: linear-gradient(135deg, #2b6cb0, #174f7f);
    box-shadow: 0 13px 28px rgba(23, 79, 127, .32);
    transform: translateY(-1px);
}
#switch-selector [data-step-panel] h3,
#switch-selector .switch-results-heading h2 { color: var(--color-ink); }
#switch-selector [data-step-panel] {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    background: var(--switch-surface);
    box-shadow: 0 10px 28px rgba(7, 29, 51, .055);
}
#switch-selector [data-step-panel]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4.5rem;
    height: 3px;
    border-radius: 0 0 4px 0;
    background: linear-gradient(90deg, var(--switch-blue), var(--switch-cyan));
}
#switch-selector [data-step-panel] > fieldset,
#switch-selector [data-step-panel] fieldset.rounded-box,
#switch-selector [data-feature-group] {
    border-radius: 12px;
    border-color: var(--switch-line);
    background-color: #fff;
    box-shadow: 0 6px 16px rgba(14, 48, 76, .035);
}
#switch-selector .input,
#switch-selector .select {
    min-height: 3rem;
    height: 3rem;
    border: 1px solid #c5d4e1;
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-ink);
    font-size: 1rem;
}
#switch-selector .input:focus,
#switch-selector .select:focus {
    border-color: var(--selector-blue);
    outline: none;
    box-shadow: 0 0 0 4px rgba(47, 134, 210, .13);
}
#switch-selector [aria-invalid="true"] { border-color: #b42318; }
#switch-selector .input:disabled,
#switch-selector .select:disabled { background-color: #f1f5f9; color: #718096; }
#switch-selector .selector-form-card nav[aria-label="Selection steps"] {
    padding: 1rem 1rem 1.1rem !important;
    border: 1px solid #cadce9 !important;
    border-radius: 14px;
    background: linear-gradient(180deg, #edf4f9, #e7f0f6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#switch-selector .switch-steps { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
#switch-selector .switch-steps::before { content: ''; position: absolute; top: 1.65rem; left: 10%; right: 10%; height: 2px; background: #afc6d7; }
#switch-selector .switch-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65rem; width: 100%; padding: .55rem .25rem; text-align: center; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
#switch-selector .switch-step:hover { border-color: #c5d8e6; background: rgba(255,255,255,.62); }
#switch-selector .switch-step-number { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #bfd0dd; border-radius: 50%; background: #dbe6ef; color: #536b7f; font-weight: 600; box-shadow: 0 0 0 5px #eaf2f7; }
#switch-selector .switch-step[aria-current="step"] { color: var(--color-brand-dark); }
#switch-selector .switch-step[aria-current="step"] { border-color: #b6d0e2; background: #fff; box-shadow: 0 7px 16px rgba(16, 62, 96, .10); }
#switch-selector .switch-step[aria-current="step"] .switch-step-number { border-color: var(--switch-blue); background: var(--color-primary); color: #fff; box-shadow: 0 0 0 5px #dbeafe; }
#switch-selector .switch-filter-toolbar {
    border: 1px solid #174568;
    border-left: 5px solid var(--switch-cyan);
    border-radius: 14px;
    color: #edf8ff;
    background:
        radial-gradient(circle at 82% 20%, rgba(67, 198, 216, .17), transparent 18rem),
        linear-gradient(118deg, var(--switch-navy) 0%, var(--switch-navy-soft) 68%, #155b8e 100%);
    box-shadow: 0 15px 34px rgba(7, 29, 51, .24);
}
#switch-selector .switch-filter-toolbar [data-update-label] { color: #bcd3e4; opacity: 1; }
#switch-selector .switch-filter-toolbar .selector-submit-button { border-color: #93c5fd; background: #eff6ff; color: #1f5f9d; box-shadow: 0 8px 20px rgba(4, 27, 45, .25); }
#switch-selector .switch-filter-toolbar .selector-submit-button:hover { background: #fff; color: #0e3c5d; }
#switch-selector .switch-requirements { border: 1px solid var(--switch-line); border-radius: 13px; background: #f4f8fb; margin-top: 1.5rem; }
#switch-selector #switch-results {
    padding: 2rem;
    border: 1px solid var(--switch-line);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(47, 134, 210, .055), transparent 38%),
        var(--switch-surface);
    box-shadow: var(--switch-shadow);
}
#switch-selector .switch-results-heading .selector-section-kicker { color: #155e8e; }
#switch-selector .switch-results-shell { overflow: hidden; border: 1px solid #bccdda; border-radius: 14px; background: white; box-shadow: 0 14px 34px rgba(7, 29, 51, .10); }
#switch-selector .switch-results-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
#switch-selector .switch-results-table .switch-col-model { width: 20%; }
#switch-selector .switch-results-table .switch-col-description { width: 48%; }
#switch-selector .switch-results-table .switch-col-price { width: 14%; }
#switch-selector .switch-results-table .switch-col-order { width: 18%; }
#switch-selector .switch-results-table thead { color: #edf8ff; background: var(--switch-navy-soft); }
#switch-selector .switch-results-table thead th {
    padding: .78rem 1.1rem;
    color: #edf8ff;
    background: var(--switch-navy-soft);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
}
#switch-selector .switch-results-table tbody tr { transition: background-color .16s ease; }
#switch-selector .switch-results-table tbody tr:nth-child(even) { background: #f6f9fc; }
#switch-selector .switch-results-table tbody tr:hover { background: #eaf4fb; }
#switch-selector .switch-results-table tbody td {
    padding: .82rem 1.1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e3ebf2;
}
#switch-selector .switch-results-table tbody tr:last-child td { border-bottom: 0; }
#switch-selector .switch-result-model { font-size: .96rem; line-height: 1.35; }
#switch-selector .switch-result-model a { text-underline-offset: 3px; }
#switch-selector .switch-result-description { max-width: none; color: #263f53; font-size: .95rem; line-height: 1.45; }
#switch-selector .switch-result-price { color: #102f49; font-variant-numeric: tabular-nums; font-size: .96rem; }
#switch-selector .switch-result-order form { display: flex; justify-content: flex-end; }
#switch-selector .switch-product-button,
#switch-selector .switch-result-order > .selector-swap-button {
    min-height: 2.55rem;
    height: 2.55rem;
    padding: .5rem .9rem;
    border-radius: 9px;
    font-size: .88rem;
    box-shadow: none;
}
#switch-selector .switch-result-requirement {
    margin-top: .45rem;
    color: #8a4b08;
    font-size: .875rem;
    line-height: 1.45;
}
#switch-selector .switch-seo-section {
    position: relative;
    margin-top: 5rem;
    padding: 2.25rem;
    border: 1px solid var(--switch-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 20px 50px rgba(7, 29, 51, .09);
}
#switch-selector .switch-seo-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.25rem;
    width: 5rem;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--switch-blue), var(--switch-cyan));
}
#switch-selector .switch-seo-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}
#switch-selector .switch-seo-heading h2,
#switch-selector .switch-match-section h2 {
    max-width: 760px;
    margin-top: .35rem;
    color: var(--color-ink);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 600;
    line-height: 1.15;
}
#switch-selector .switch-seo-heading > p {
    max-width: 430px;
    color: #526679;
    line-height: 1.65;
}
#switch-selector .switch-seo-intro {
    max-width: 900px;
    color: #43596d;
    font-size: 1.05rem;
    line-height: 1.75;
}
#switch-selector .switch-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}
#switch-selector .switch-guide-grid article {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    background: linear-gradient(160deg, #fff, #f4f8fb);
    box-shadow: 0 10px 26px rgba(7, 29, 51, .07);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#switch-selector .switch-guide-grid article::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--switch-blue), var(--switch-cyan)); opacity: .85; }
#switch-selector .switch-guide-grid article:hover { border-color: #78aecd; box-shadow: 0 18px 38px rgba(5,26,47,.14); transform: translateY(-3px); }
#switch-selector .switch-guide-grid article > span {
    color: var(--selector-blue);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
}
#switch-selector .switch-guide-grid h3 {
    margin-top: .6rem;
    color: var(--color-ink);
    font-size: 1.15rem;
    font-weight: 600;
}
#switch-selector .switch-guide-grid p {
    margin-top: .55rem;
    color: #526679;
    line-height: 1.65;
}
#switch-selector .switch-tender-section {
    border-color: #b8d6e5;
    background:
        radial-gradient(circle at 92% 8%, rgba(67, 198, 216, .14), transparent 20rem),
        linear-gradient(145deg, #f8fbfd, #edf7fa);
}
#switch-selector .switch-tender-section::before { background: linear-gradient(90deg, var(--color-primary), #93c5fd); }
#switch-selector .switch-spec-table-shell {
    overflow-x: auto;
    margin-top: 1.5rem;
    border: 1px solid #b9d2e5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 45, 72, .10);
}
#switch-selector .switch-spec-table { width: 100%; border-collapse: collapse; }
#switch-selector .switch-spec-table th,
#switch-selector .switch-spec-table td { padding: .9rem 1rem; border-bottom: 1px solid #e7eef5; text-align: left; }
#switch-selector .switch-spec-table th { color: #f5f9fc; background: var(--color-ink-soft); font-size: .875rem; font-weight: 600; }
#switch-selector .switch-spec-table td { color: #354b5e; font-size: .95rem; }
#switch-selector .switch-spec-table td:first-child { color: var(--color-ink); font-weight: 500; }
#switch-selector .switch-spec-table tbody tr:nth-child(even) { background: #f6f9fc; }
#switch-selector .switch-spec-table tbody tr:hover { background: #ebf5ff; }
#switch-selector .switch-spec-table tr:last-child td { border-bottom: 0; }
#switch-selector .switch-match-section {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    overflow: hidden;
    border-radius: 18px;
    color: #d9e8f3;
    border-color: #1b577f;
    background:
        radial-gradient(circle at 100% 0%, rgba(67, 198, 216, .22), transparent 23rem),
        linear-gradient(135deg, var(--switch-navy) 0%, #123e61 58%, #1768a9 120%);
    box-shadow: 0 28px 60px rgba(7, 29, 51, .24);
}
#switch-selector .switch-match-section::before { background: linear-gradient(90deg, #93c5fd, var(--color-primary)); }
#switch-selector .switch-match-section .selector-section-kicker { color: #bfdbfe; }
#switch-selector .switch-match-section h2 { color: #fff; }
#switch-selector .switch-match-section > p { line-height: 1.75; }
#switch-selector .switch-related-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
#switch-selector .switch-related-links a {
    display: grid;
    padding: 1.2rem;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
#switch-selector .switch-related-links a:hover { border-color: rgba(147,197,253,.72); background: rgba(255,255,255,.11); transform: translateY(-2px); }
#switch-selector .switch-related-links span { margin-top: .35rem; color: #bfd2e2; line-height: 1.55; }
#switch-selector .switch-related-links em { margin-top: .9rem; color: #bfdbfe; font-style: normal; font-weight: 600; }
#switch-selector .switch-faq-section {
    width: min(1040px, calc(100vw - 2rem));
    margin-inline: auto;
    padding-inline: 2rem;
    border: 1px solid var(--switch-line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(47, 134, 210, .07), transparent 20rem),
        #f8fafc;
    box-shadow: 0 18px 44px rgba(7, 29, 51, .075);
}
#switch-selector .switch-faq-section .collapse {
    border-color: #cbd9e5;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#switch-selector .switch-faq-section .collapse:hover {
    border-color: #98bdd6;
    box-shadow: 0 8px 20px rgba(7, 29, 51, .065);
    transform: translateY(-1px);
}
#switch-selector .switch-faq-section .collapse:has(input:checked) {
    border-color: #78afd4;
    box-shadow: 0 10px 24px rgba(7, 29, 51, .08);
}
#switch-selector [data-poe-unrestricted] {
    border: 1px solid #c6dce9;
    color: #456579;
    background: #edf6fa;
    opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
    #switch-selector .l23-reveal {
        transform: translate3d(0, 30px, 0) scale(.992);
        transition-duration: .72s;
        transition-timing-function: cubic-bezier(.2, .78, .2, 1);
    }
    #switch-selector .l23-reveal[data-reveal="fade"] { transform: none; }
    #switch-selector .l23-reveal.l23-visible { transform: translate3d(0, 0, 0) scale(1); }
}
@media (max-width: 680px) {
    #switch-selector .selector-page-width { width: 100%; }
    #switch-selector .selector-data-badge { font-size: .75rem; }
    #switch-selector .selector-form-card { border-radius: 16px; }
    #switch-selector .selector-form-card nav[aria-label="Selection steps"] { padding: .7rem .35rem .8rem !important; }
    #switch-selector .switch-steps { gap: 0; }
    #switch-selector .selector-submit-button { padding-inline: 1rem; }
    #switch-selector [data-step-panel] { padding: 1rem; }
    #switch-selector [data-port-side] { padding: .85rem; }
    #switch-selector [data-port-side] > div { gap: .5rem; }
    #switch-selector #switch-results { padding: 1rem; border-radius: 16px; }
    #switch-selector .switch-results-shell { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    #switch-selector .switch-results-table { display: block; }
    #switch-selector .switch-results-table colgroup { display: none; }
    #switch-selector .switch-results-table tbody tr { margin-bottom: .7rem; overflow: hidden; border: 1px solid #c7d6e1; border-radius: 11px; background: #fff; box-shadow: 0 8px 20px rgba(5,26,47,.06); }
    #switch-selector .switch-results-table tbody tr:nth-child(even) { background: #f7fafc; }
    #switch-selector .switch-results-table tbody td { padding: .75rem .85rem; border-bottom: 0; }
    #switch-selector .switch-result-model,
    #switch-selector .switch-result-price { padding-bottom: .6rem !important; }
    #switch-selector .switch-result-description {
        padding-top: .8rem !important;
        padding-bottom: .8rem !important;
        border-top: 1px solid #e3ebf2;
    }
    #switch-selector .switch-result-order { padding-top: 0 !important; }
    #switch-selector .switch-product-button,
    #switch-selector .switch-result-order > .selector-swap-button { min-height: 2.7rem; height: 2.7rem; }
    #switch-selector .switch-seo-section { width: 100%; margin-top: 3.5rem; padding: 1.35rem; border-radius: 17px; }
    #switch-selector .switch-seo-section::before { left: 1.35rem; }
    #switch-selector .switch-seo-heading { display: block; }
    #switch-selector .switch-seo-heading > p { margin-top: .75rem; }
    #switch-selector .switch-guide-grid,
    #switch-selector .switch-related-links { grid-template-columns: 1fr; }
    #switch-selector .switch-tender-section,
    #switch-selector .switch-match-section { padding: 1.25rem; }
    #switch-selector .switch-match-section { grid-template-columns: 1fr; gap: 1rem; }
    #switch-selector .switch-spec-table { min-width: 620px; }
}
@media (prefers-reduced-motion: reduce) {
    #switch-selector button,
    #switch-selector .switch-guide-grid article,
    #switch-selector .switch-related-links a { transition: none; transform: none; }
}

/* Compact enterprise hero with a non-interactive network-switch illustration. */
#switch-selector .switch-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background:
        linear-gradient(rgba(112, 196, 225, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 196, 225, .055) 1px, transparent 1px),
        radial-gradient(circle at 82% 24%, rgba(47, 134, 210, .35), transparent 28rem),
        radial-gradient(circle at 24% 130%, rgba(67, 198, 216, .16), transparent 32rem),
        linear-gradient(118deg, #06182b 0%, #0b2b48 52%, #155a8d 100%);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
    border-bottom: 1px solid #1f678e;
    color: #fff;
}
#switch-selector .switch-hero::before {
    content: '';
    position: absolute;
    width: 27rem;
    height: 27rem;
    right: -11rem;
    bottom: -17rem;
    border: 1px solid rgba(103, 232, 249, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(64, 177, 214, .05), 0 0 0 8rem rgba(64, 177, 214, .035);
}
#switch-selector .switch-hero::after {
    content: '';
    position: absolute;
    top: 2.5rem;
    right: max(2rem, calc((100vw - 1180px) / 2));
    width: 12rem;
    height: 7rem;
    opacity: .22;
    background-image: radial-gradient(circle, #67e8f9 1.4px, transparent 1.6px);
    background-size: 18px 18px;
    mask-image: linear-gradient(115deg, transparent, #000 35%, #000);
}
#switch-selector .switch-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr);
    align-items: center;
    gap: 2rem;
    padding-block: 2.5rem 5.1rem;
}
#switch-selector .switch-hero-copy { max-width: 760px; }
#switch-selector .switch-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #79ddea;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
#switch-selector .switch-hero-eyebrow::before { content: ''; width: 1.35rem; height: 3px; background: var(--switch-cyan); box-shadow: 0 0 14px rgba(67, 198, 216, .55); }
#switch-selector .switch-hero h1 { max-width: none; margin: .75rem 0 0; color: #fff; font-size: clamp(2.65rem, 4.1vw, 3.65rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; text-shadow: 0 8px 32px rgba(0, 0, 0, .2); }
#switch-selector .switch-hero h1 span { color: #75d9e8; }
#switch-selector .switch-hero-lead { color: #e8f7fb; font-size: 1.3rem; line-height: 1.4; margin-top: .9rem; }
#switch-selector .switch-hero-description { max-width: 48rem; color: #b9d1df; font-size: 1rem; line-height: 1.65; margin-top: .5rem; }
#switch-selector .switch-hero-coverage { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-top: 1rem; color: #b8d0df; font-size: .875rem; }
#switch-selector .switch-hero-coverage strong { color: #79ddea; font-weight: 600; }
#switch-selector .switch-hero-attribution { color: #8fb0c3; }
#switch-selector .switch-hero-visual {
    position: relative;
    min-width: 0;
    pointer-events: none;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .24));
}
#switch-selector .switch-hero-visual svg { display: block; width: 100%; height: auto; }
#switch-selector .switch-hero-ports rect { fill: #0b2b48; stroke: #61d4e4; stroke-width: 1.3; }
#switch-selector .switch-hero-circuit,
#switch-selector .switch-hero-nodes { opacity: .72; }
@media (max-width: 960px) {
    #switch-selector .switch-hero-copy { max-width: 820px; }
    #switch-selector .switch-hero-layout { grid-template-columns: 1fr; }
    #switch-selector .switch-hero-visual { display: none; }
}
@media (max-width: 760px) {
    #switch-selector .switch-hero::after { display: none; }
    #switch-selector .switch-hero-layout { width: calc(100% - 2rem); padding-block: 1.8rem 4.35rem; }
    #switch-selector .switch-hero h1 { font-size: 2.35rem; }
    #switch-selector .switch-hero-lead { font-size: 1.16rem; }
    #switch-selector .switch-hero-description { line-height: 1.58; }
    #switch-selector .switch-hero-coverage { margin-top: .9rem; }
}

/* Simple / expert selection modes. */
#switch-selector .switch-mode-heading {
    align-items: flex-end;
    margin: 0;
    padding: 1.85rem 2rem 1rem;
}
#switch-selector .switch-mode-heading > p {
    max-width: 31rem;
    color: var(--switch-muted);
    font-size: 1rem;
    line-height: 1.55;
}
#switch-selector .switch-mode-picker {
    padding: 0 2rem 1.75rem;
}
#switch-selector .switch-mode-picker > legend {
    float: left;
    color: var(--color-ink);
    font-size: 1.05rem;
    font-weight: 600;
}
#switch-selector .switch-mode-picker > p {
    float: right;
    margin-top: .15rem;
    color: #647789;
    font-size: .875rem;
}
#switch-selector .switch-mode-grid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: .65rem;
}
#switch-selector .switch-mode-card {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    min-height: 6.35rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    color: var(--color-ink);
    background: linear-gradient(145deg, #fff, #f5f8fb);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#switch-selector .switch-mode-card:hover {
    border-color: #7fb6db;
    box-shadow: 0 12px 27px rgba(7, 29, 51, .10);
    transform: translateY(-1px);
}
#switch-selector .switch-mode-card.is-active {
    border-color: #267bb7;
    color: white;
    background:
        radial-gradient(circle at 88% 18%, rgba(67, 198, 216, .28), transparent 12rem),
        linear-gradient(118deg, var(--switch-navy), #10446d 68%, #1979b8);
    box-shadow: 0 16px 32px rgba(7, 29, 51, .24);
}
#switch-selector .switch-mode-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid #b7d5e7;
    border-radius: 11px;
    color: var(--switch-blue-strong);
    background: #eaf4fb;
}
#switch-selector .switch-mode-icon svg { width: 1.45rem; height: 1.45rem; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#switch-selector .switch-mode-card.is-active .switch-mode-icon {
    border-color: rgba(121, 221, 234, .58);
    color: white;
    background: rgba(255, 255, 255, .09);
}
#switch-selector .switch-mode-card strong,
#switch-selector .switch-mode-card small { display: block; }
#switch-selector .switch-mode-card strong { font-size: 1.2rem; }
#switch-selector .switch-mode-card small {
    margin-top: .2rem;
    color: #5c7182;
    font-size: .875rem;
    line-height: 1.3;
}
#switch-selector .switch-mode-card.is-active small { color: #c5dce8; }
#switch-selector .switch-mode-card em {
    align-self: start;
    padding: .3rem .55rem;
    border-radius: 999px;
    color: #17649a;
    background: #e6f3fb;
    font-size: .7rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
#switch-selector .switch-mode-card.is-active em {
    color: #08364c;
    background: #8de2e8;
}
#switch-selector .switch-selection-workspace {
    padding: 1.55rem 2rem 1.9rem;
    border-top: 1px solid var(--switch-line);
    background:
        radial-gradient(circle at 100% 0%, rgba(67, 198, 216, .065), transparent 24rem),
        var(--switch-surface-soft);
}
#switch-selector .switch-mode-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding: 0 .15rem;
}
#switch-selector .switch-mode-summary strong,
#switch-selector .switch-mode-summary span { display: block; }
#switch-selector .switch-mode-summary strong { font-size: 1.15rem; }
#switch-selector .switch-mode-summary div > span {
    margin-top: .2rem;
    color: var(--switch-muted);
    font-size: .9rem;
}
#switch-selector .switch-mode-summary > span {
    padding: .35rem .65rem;
    border: 1px solid #c4d5e2;
    border-radius: 999px;
    color: #466176;
    background: rgba(255,255,255,.7);
    font-size: .875rem;
}
#switch-selector .switch-paused-note {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border: 1px solid #b9d6e8;
    border-radius: 10px;
    color: #315e7e;
    background: #edf7fd;
    font-size: .875rem;
}
#switch-selector .selector-form-card nav[aria-label="Expert selection steps"] {
    margin-bottom: 1.2rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fafc, #edf3f7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#switch-selector .switch-selection-panels { min-width: 0; }
#switch-selector .selector-form-card[data-selection-mode="simple"] .switch-selection-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "ports ports"
        "poe performance";
    gap: 1rem;
    align-items: start;
}
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel="1"] { grid-area: ports; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel="2"] { grid-area: poe; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel="4"] { grid-area: performance; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel] { padding: 1.25rem; }
#switch-selector .switch-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
#switch-selector .switch-panel-heading p {
    margin-top: .25rem;
    color: var(--switch-muted);
    font-size: .9rem;
    line-height: 1.5;
}
#switch-selector .switch-panel-badge {
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid #bfdae9;
    color: var(--switch-blue-strong);
    background: #eaf5fb;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
#switch-selector .switch-port-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
#switch-selector .switch-port-group {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--switch-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #fbfdfe);
    box-shadow: 0 8px 20px rgba(7, 29, 51, .045);
}
#switch-selector .switch-port-group > legend {
    padding-inline: .2rem;
    font-size: 1.02rem;
    color: var(--switch-navy-soft);
    font-weight: 600;
}
#switch-selector .switch-port-group > p {
    margin: -.15rem 0 .65rem;
    color: #637688;
    font-size: .8rem;
}
#switch-selector .switch-port-row {
    display: grid;
    grid-template-columns: 2rem minmax(6.2rem, .72fr) minmax(7rem, 1fr) minmax(6.2rem, .82fr) 2.8rem;
    gap: .55rem;
    align-items: end;
}
#switch-selector .switch-port-row + .switch-port-row { margin-top: .75rem; }
#switch-selector .switch-port-row label {
    min-width: 0;
    color: #425a6e;
    font-size: .78rem;
}
#switch-selector .switch-row-number {
    display: grid;
    height: 3rem;
    place-items: center;
    border-radius: 8px;
    color: var(--switch-blue-strong);
    background: #e7f2f9;
    font-size: .8rem;
    font-weight: 600;
}
#switch-selector .switch-remove-row {
    display: grid;
    width: 2.8rem;
    height: 3rem;
    place-items: center;
    border: 1px solid #d0dde6;
    border-radius: 8px;
    color: #60798d;
    background: white;
    font-size: 1.2rem;
    cursor: pointer;
}
#switch-selector .switch-add-row {
    margin-top: .75rem;
    padding: .38rem .55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--switch-blue-strong);
    background: transparent;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
#switch-selector .switch-add-row:hover { border-color: #bfd8e8; background: #edf6fb; }
#switch-selector .switch-port-limit {
    float: right;
    margin-top: .85rem;
    color: #748697;
    font-size: .75rem;
}
#switch-selector .switch-poe-fields {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: .85rem;
    margin-top: 1rem;
}
#switch-selector .switch-poe-fields label:first-child { grid-column: 1 / -1; }
#switch-selector .switch-poe-fields label { color: #425a6e; font-size: .82rem; }
#switch-selector .switch-field-note {
    margin-top: .75rem;
    color: var(--switch-muted);
    font-size: .8rem;
    line-height: 1.5;
}
#switch-selector .switch-deployment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
#switch-selector .selector-form-card[data-selection-mode="simple"] .switch-deployment-grid { grid-template-columns: 1fr; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-performance-fieldset] {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-performance-fieldset] legend { display: none; }
#switch-selector .switch-step-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #cfdee8;
}
#switch-selector .switch-requirements { margin-top: 1.2rem; }
#switch-selector .switch-filter-toolbar {
    position: sticky;
    z-index: 18;
    bottom: 1rem;
    display: grid;
    grid-template-columns: 3.15rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-left-width: 1px;
    border-top: 4px solid var(--switch-cyan);
    box-shadow: 0 18px 42px rgba(4, 27, 45, .28), 0 4px 12px rgba(4, 27, 45, .18);
}
#switch-selector .switch-action-marker {
    display: grid;
    width: 3.15rem;
    height: 3.15rem;
    place-items: center;
    border: 1px solid rgba(121, 221, 234, .5);
    border-radius: 12px;
    color: #dff8ff;
    background: rgba(255,255,255,.1);
}
#switch-selector .switch-action-marker svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}
#switch-selector .switch-action-copy > p:nth-child(2) {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 600;
}
#switch-selector .switch-action-kicker {
    margin-bottom: .15rem;
    color: #79ddea;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
#switch-selector .switch-action-copy [data-update-label] {
    margin-top: .2rem;
    color: #bfd5e5;
    font-size: .82rem;
}
#switch-selector .switch-action-controls {
    display: flex;
    align-items: center;
    gap: .85rem;
}
#switch-selector .switch-action-controls > span {
    padding: .42rem .65rem;
    border: 1px solid rgba(183, 215, 234, .3);
    border-radius: 999px;
    color: #c6dceb;
    font-size: .78rem;
    white-space: nowrap;
}
#switch-selector .switch-filter-toolbar .selector-submit-button {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 3.3rem;
    padding: .72rem .82rem .72rem 1.2rem;
    border-color: #75dae6;
    color: #fff;
    background: linear-gradient(135deg, #318bd6, #128fac);
    box-shadow: 0 10px 25px rgba(4, 27, 45, .34), inset 0 1px 0 rgba(255,255,255,.22);
}
#switch-selector .switch-filter-toolbar .selector-submit-button:hover {
    color: #fff;
    background: linear-gradient(135deg, #4299e1, #16a0b9);
}
#switch-selector .switch-action-arrow {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 8px;
    color: #0c5477;
    background: #d9f7fa;
    font-size: 1.2rem;
}

@media (max-width: 920px) {
    #switch-selector .switch-mode-heading { display: block; }
    #switch-selector .switch-mode-heading > p { margin-top: .65rem; }
    #switch-selector .selector-form-card[data-selection-mode="simple"] .switch-selection-panels {
        grid-template-columns: 1fr;
        grid-template-areas: "ports" "poe" "performance";
    }
    #switch-selector .switch-deployment-grid { grid-template-columns: 1fr; }
    #switch-selector .switch-port-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    #switch-selector .switch-mode-heading,
    #switch-selector .switch-mode-picker,
    #switch-selector .switch-selection-workspace { padding-left: 1rem; padding-right: 1rem; }
    #switch-selector .switch-mode-grid { grid-template-columns: 1fr; }
    #switch-selector .switch-mode-picker > p { float: none; clear: both; padding-top: .25rem; }
    #switch-selector .switch-mode-card { grid-template-columns: 2.65rem minmax(0, 1fr); min-height: 5.8rem; padding: .85rem; }
    #switch-selector .switch-mode-icon { width: 2.55rem; height: 2.55rem; }
    #switch-selector .switch-mode-card em { grid-column: 2; justify-self: start; margin-top: -.35rem; }
    #switch-selector .switch-mode-summary { align-items: flex-start; }
    #switch-selector .switch-port-row {
        grid-template-columns: 1.8rem minmax(0, 1fr) minmax(0, 1fr) 2.65rem;
    }
    #switch-selector .switch-port-row label:nth-of-type(3) { grid-column: 2 / 4; }
    #switch-selector .switch-port-row .switch-remove-row { grid-column: 4; }
    #switch-selector .switch-poe-fields { grid-template-columns: 1fr; }
    #switch-selector .switch-poe-fields label:first-child { grid-column: auto; }
    #switch-selector .switch-panel-heading { display: block; }
    #switch-selector .switch-panel-badge { display: inline-block; margin-top: .6rem; }
    #switch-selector .switch-filter-toolbar {
        bottom: .5rem;
        grid-template-columns: 1fr;
        padding: .65rem;
    }
    #switch-selector .switch-action-marker,
    #switch-selector .switch-action-copy { display: none; }
    #switch-selector .switch-action-controls {
        grid-column: auto;
    }
    #switch-selector .switch-action-controls > span { display: none; }
    #switch-selector .switch-filter-toolbar .selector-submit-button {
        width: 100%;
        min-height: 3rem;
        justify-content: space-between;
    }
}

/* Copy revision 2026-09-11 */
#switch-selector .switch-hero-attribution { margin-top: .45rem; color: #8fb0c3; font-size: .8125rem; }
#switch-selector .switch-feature-search-row { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
#switch-selector .switch-match-section > p a { color: #88e2eb; text-decoration: underline; text-underline-offset: 2px; }
#switch-selector .switch-empty-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; max-width: 40rem; margin: 1.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid #dbe5ec; }
#switch-selector .switch-empty-help p { color: #455f73; font-size: .875rem; }