#feature-btn { position: relative; padding: 36px 24px; }
#feature-btn .msi__container { width: 100%; max-width: 1200px; margin: auto; }
#feature-btn .feature-nav-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
#feature-btn .feature-nav-list > li { float: none; width: auto; margin: 0; padding: 0; }
#feature-btn .feature-nav-list a { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 28px 22px; background: linear-gradient(135deg,#061b35,#030916); color: #fff; text-align: center; text-decoration: none; cursor: pointer; }
#feature-btn .feature-nav-list a[aria-current="location"] { filter: brightness(.5) saturate(.55); }
#feature-btn .feature-nav-list a { filter: none; }
#AI-Laptop #feature-btn .feature-nav-list:not(.is-floating) a { filter: none; }
#feature-btn .feature-nav-list a[aria-current="location"] { filter: none; }
#feature-btn .feature-nav-list a:focus-visible { outline: 3px solid #6edfff; outline-offset: 3px; }
#feature-btn .feature-nav-list img { display: block; width: 82px; height: 82px; object-fit: contain; margin: 0 0 20px; }
#feature-btn .feature-nav-list h4 { color: inherit; font-size: 24px; line-height: 1.3; margin: 0 0 18px; }
#feature-btn .feature-nav-list p { color: inherit; font-size: 16px; line-height: 1.5; margin: 0; }
#feature-btn .feature-nav-list.is-floating { position: fixed; top: 50%; right: max(16px,env(safe-area-inset-right)); left: auto; transform: translateY(-50%); width: 64px; z-index: 200; display: grid; grid-template-columns: 1fr; padding: 0; gap: 10px; background: transparent; border-radius: 14px; }
#feature-btn .is-floating a { position: relative; flex-direction: row; justify-content: center; padding: 10px; width: 64px; height: 64px; border-radius: 14px; }
#feature-btn .is-floating img { width: 42px; height: 42px; margin: 0; }
#feature-btn .is-floating h4 { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: max-content; max-width: calc(100vw - 112px); padding: 10px 14px; border: 1px solid #6475d6; border-radius: 8px; background: #030b1af5; color: #fff; font-size: 16px; line-height: 1.35; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; }
#feature-btn .is-floating a:hover h4, #feature-btn .is-floating a:focus-visible h4 { opacity: 1; visibility: visible; }
#feature-btn .is-floating a[aria-current="location"] { filter: none; background: #02050a; border-color: #344066; }
#feature-btn .is-floating a[aria-current="location"] img { filter: brightness(.5) saturate(.55); }
#feature-btn .is-floating p { display: none; }
#feature-btn .is-outside { visibility: hidden; pointer-events: none; }
@media(max-width:600px) {
    #feature-btn { padding: 24px 16px; }
    #feature-btn .feature-nav-list { grid-template-columns: 1fr; }
    #feature-btn .feature-nav-list.is-floating { width: 48px; right: max(8px,env(safe-area-inset-right)); }
    #feature-btn .is-floating a { width: 48px; height: 48px; padding: 8px; }
    #feature-btn .is-floating img { width: 30px; height: 30px; }
    #feature-btn .is-floating h4 { font-size: 13px; max-width: calc(100vw - 84px); }
}
/* Compact rail inspired by the reference: short rows beside a fine accent line. */
#AI-Laptop #feature-btn .feature-nav-list.is-floating {
    display: flex; flex-direction: column; align-items: stretch;
    width: 42px; height: auto; min-height: 0; max-height: calc(100dvh - 32px);
    gap: 4px; padding: 0 8px 0 0; margin: 0;
    border: 0; border-right: 1px solid #a43dff; border-radius: 0;
    background: transparent; box-shadow: none;
}
#AI-Laptop #feature-btn .feature-nav-list.is-floating > li {
    display: block; flex: 0 0 36px; width: 100%; height: 36px;
    min-height: 0; max-height: 36px; padding: 0; margin: 0;
}
#AI-Laptop #feature-btn .feature-nav-list.is-floating a {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    width: 100%; height: 36px; min-height: 0; padding: 4px;
    border: 0; border-radius: 4px; background: transparent; box-shadow: none;
}
#AI-Laptop #feature-btn .feature-nav-list.is-floating img { width: 26px; height: 26px; margin: 0; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating h4 {
    right: calc(100% + 10px); padding: 5px 8px; border: 0; border-radius: 4px;
    background: rgba(2,9,22,.9); color: #ccc; font-size: 14px; font-weight: 400;
    line-height: 1.4; max-width: calc(100vw - 90px);
}
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover h4,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible h4 { color: #c36bff; }
@media (pointer: coarse) {
    #AI-Laptop #feature-btn .feature-nav-list.is-floating > li { flex-basis: 44px; height: 44px; max-height: 44px; }
    #AI-Laptop #feature-btn .feature-nav-list.is-floating a { height: 44px; }
}
/* Current section stays bright. Expanding the row moves its icon left. */
#AI-Laptop #feature-btn .feature-nav-list.is-floating > li { position: relative; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating { box-sizing: border-box; width: 45px; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a { box-sizing: border-box; position: absolute; right: 0; width: 36px; height: 36px; justify-content: center; gap: 0; padding: 4px; border: 1px solid #a43dff; overflow: hidden; filter: none; transition: background .22s ease; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a img { flex: 0 0 26px; filter: brightness(.4) saturate(.45); }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a[aria-current="location"] img { filter: none; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible { width: max-content; max-width: calc(100vw - 40px); gap: 8px; background: rgba(2,9,22,.96); }
#AI-Laptop #feature-btn .feature-nav-list.is-floating h4 { display: none; position: static; transform: none; flex: 0 1 auto; width: auto; max-width: none; padding: 0 4px 0 0; background: transparent; white-space: nowrap; font-size: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover h4,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible h4 { display: block; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating h4::after { content: attr(data-nav-label); font-size: 14px; }
@media (pointer: coarse) {
    #AI-Laptop #feature-btn .feature-nav-list.is-floating { width: 53px; }
    #AI-Laptop #feature-btn .feature-nav-list.is-floating a { width: 44px; height: 44px; padding: 8px; }
    #AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover,
    #AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible { width: max-content; }
}
@media (prefers-reduced-motion: reduce) { #AI-Laptop #feature-btn .feature-nav-list.is-floating a { transition: none; } }
/* Keep the expanding anchor free of inherited list-item clipping and borders. */
#AI-Laptop #feature-btn .feature-nav-label { display: none; }
#AI-Laptop #feature-btn, #AI-Laptop #feature-btn .msi__container,
#AI-Laptop #feature-btn .feature-nav-list.is-floating { overflow: visible; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating > li {
    overflow: visible !important; border: 0 !important; outline: 0; background: transparent;
}
#AI-Laptop #feature-btn .feature-nav-list.is-floating a { left: auto; max-width: none !important; min-width: 36px; overflow: visible; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible { width: max-content !important; justify-content: flex-start; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating h4,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover h4,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible h4 { display: none; }
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:hover .feature-nav-label,
#AI-Laptop #feature-btn .feature-nav-list.is-floating a:focus-visible .feature-nav-label {
    display: block; flex: 0 0 auto; white-space: nowrap; padding-right: 6px;
    font-size: 14px; line-height: 1.4; color: #c36bff;
}
