/* Loaded only by the preview include. The live menu uses its existing styles. */
header nav ul li .submenu.submenu-preview {
    width: min(1280px, calc(100vw - 40px));
    left: 50%;
    transform: translateX(-50%);
    max-height: calc(100dvh - var(--header-offset, 88px));
    overflow-y: auto;
    padding-bottom: 24px;
}
header nav ul li.has-submenu:hover .submenu.submenu-preview,
header nav ul li.has-submenu:focus-within .submenu.submenu-preview {
    top: var(--header-offset, 88px);
    opacity: 1;
    visibility: visible;
}
header nav ul li .submenu.submenu-preview .holder {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.03fr) minmax(0, 1fr);
    gap: 40px;
    padding: 40px;
    border-radius: 24px;
}
header nav ul li .submenu.submenu-preview .holder .item { min-width: 0; }
header nav ul li .submenu.submenu-preview .holder a { background-color: transparent; }
header nav ul li .submenu.submenu-preview .holder .item.first .item-title {
    font-size: 24px;
    line-height: 32px;
}
header nav ul li .submenu.submenu-preview .holder .item.first .links { gap: 20px; }
header nav ul li .submenu.submenu-preview .holder .item.first .links a { padding: 18px; }
header nav ul li .submenu.submenu-preview .holder .item.first .links a:hover { background: #eff3f5; }
header nav ul li .submenu.submenu-preview .holder .item.second .links { gap: 16px; }
header nav ul li .submenu.submenu-preview .holder .item.second .links .elem .text { padding: 12px 20px 12px 16px; }
header nav ul li .submenu.submenu-preview .holder .item.second .links .elem .image { flex-basis: 88px; }
header nav ul li .submenu.submenu-preview .holder .item.second ul {
    margin-top: 16px;
    font-size: 16px;
}
header nav ul li .submenu.submenu-preview .holder .item.second ul li { margin-bottom: 16px; }
header nav ul li .submenu.submenu-preview .holder .item.third {
    display: grid;
    grid-template-rows: repeat(3, minmax(150px, 1fr));
    gap: 16px;
}
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 20px;
    padding: 28px;
    color: #fff;
    background: #314eff;
    transition: filter .2s;
}
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card:hover,
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card:focus-visible { filter: brightness(1.08); }
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card--suara {
    background: #0a121b url('/images/header/suara-background.png') center / cover no-repeat;
}
header nav ul li .submenu.submenu-preview .holder .item.third .preview-suara-logo {
    display: block;
    width: 112px;
    max-width: 100%;
    height: 35px;
    margin-top: 8px;
    margin-bottom: 12px;
}
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card--receipt { background: #ff6f55; }
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-top: 3px;
    object-fit: contain;
}
header nav ul li .submenu.submenu-preview .holder .item.third .preview-card-icon--robot {
    flex-basis: 31px;
    width: 31px;
    height: 35px;
    margin-top: 0;
}
header nav ul li .submenu.submenu-preview .preview-card-copy { display: block; }
header nav ul li .submenu.submenu-preview .preview-card-title {
    display: block;
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 12px;
}
header nav ul li .submenu.submenu-preview .preview-card-description {
    display: block;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}
@media (max-width: 1399.98px) {
    header nav ul li .submenu.submenu-preview .holder { gap: 24px; padding: 28px; }
    header nav ul li .submenu.submenu-preview .holder .item.third .preview-card { padding: 22px; }
    header nav ul li .submenu.submenu-preview .holder .item.first .links { gap: 12px; }
    header nav ul li .submenu.submenu-preview .holder .item.first .links a { padding: 14px; }
}