/* Video page premium pass */
.page-hero--video {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 5vw, 72px);
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(circle at 12% 18%, rgba(105,223,246,0.18), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(255,209,102,0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.030));
}

.page-hero--video::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -150px;
    bottom: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,255,214,0.17), transparent 68%);
    pointer-events: none;
}

.page-hero--video > * {
    position: relative;
    z-index: 1;
}

.video-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
    max-width: 1040px;
}

.video-hero__facts div {
    min-height: 104px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    display: grid;
    align-content: center;
    gap: 8px;
}

.video-hero__facts span {
    color: var(--public-accent-2);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.video-hero__facts strong {
    color: var(--public-text);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.15;
}

.video-guide--page {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(circle at 14% 8%, rgba(105,223,246,0.18), transparent 32%),
        radial-gradient(circle at 90% 8%, rgba(255,209,102,0.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035));
    box-shadow:
        -1px 0 0 var(--premium-edge-a),
        1px 0 0 var(--premium-edge-b),
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 28px 70px rgba(0,0,0,0.26);
}

.video-guide--page .video-guide__head {
    align-items: center;
}

.video-guide--page .video-guide__shell {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    gap: 20px;
}

.video-guide--page .video-guide__player {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    padding: 14px;
    border: 1px solid rgba(120,255,214,0.18);
    background:
        linear-gradient(135deg, rgba(120,255,214,0.12), transparent 34%),
        linear-gradient(315deg, rgba(255,209,102,0.10), transparent 34%),
        rgba(5, 11, 20, 0.62);
    box-shadow: 0 30px 90px rgba(0,0,0,0.32);
}

.video-guide--page .video-guide__player::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 26px;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 0 42px rgba(105,223,246,0.16) inset;
}

.video-guide--page .video-guide__player video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 492px;
    border-radius: 26px;
    object-fit: contain;
    background: #050b14;
}

.video-guide--page .video-guide__playlist {
    gap: 12px;
}

.video-guide--page .video-guide__item {
    min-height: 166px;
    border-radius: 24px;
}

.video-guide__item em,
.video-guide__caption em {
    width: fit-content;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(120,255,214,0.16);
    background: rgba(255,255,255,0.055);
    color: var(--public-accent-2);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.video-guide__caption {
    align-items: center;
}

.video-help-strip {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

html[data-public-theme="light"] .page-hero--video,
html[data-public-theme="light"] .video-guide--page,
html[data-public-theme="light"] .video-hero__facts div,
html[data-public-theme="light"] .video-help-strip {
    border-color: rgba(20,42,62,0.14);
    background:
        linear-gradient(180deg, rgba(248,251,253,0.80), rgba(232,241,247,0.58));
    box-shadow:
        -1px 0 0 rgba(7,135,154,0.18),
        1px 0 0 rgba(255,166,77,0.12),
        0 1px 0 rgba(255,255,255,0.66) inset,
        0 20px 48px rgba(54,83,105,0.16);
}

html[data-public-theme="light"] .video-hero__facts strong {
    color: #142238;
}

html[data-public-theme="light"] .video-guide--page .video-guide__player {
    background:
        linear-gradient(135deg, rgba(120,255,214,0.16), transparent 34%),
        linear-gradient(315deg, rgba(255,209,102,0.12), transparent 34%),
        rgba(238, 247, 252, 0.72);
}

html[data-public-theme="light"] .video-guide__item em,
html[data-public-theme="light"] .video-guide__caption em {
    color: #07879a;
    border-color: rgba(0,166,188,0.15);
    background: rgba(0,166,188,0.09);
}

@media (max-width: 1100px) {
    .video-guide--page .video-guide__shell {
        grid-template-columns: 1fr;
    }

    .video-guide--page .video-guide__player,
    .video-guide--page .video-guide__player video {
        min-height: 360px;
    }
}

@media (max-width: 760px) {
    .page-hero--video,
    .video-guide--page {
        border-radius: 28px;
        padding: 24px;
    }

    .video-hero__facts {
        grid-template-columns: 1fr;
    }

    .video-guide--page .video-guide__player {
        padding: 10px;
        border-radius: 26px;
    }

    .video-guide--page .video-guide__player,
    .video-guide--page .video-guide__player video {
        min-height: 260px;
    }
}

@media (max-width: 420px) {
    .page-hero--video,
    .video-guide--page {
        padding: 20px;
        border-radius: 24px;
    }

    .video-guide--page .video-guide__player,
    .video-guide--page .video-guide__player video {
        min-height: 220px;
    }
}

/* Video page premium stage: clearer hierarchy and smoother mobile scanning. */
.page-hero--video {
    isolation: isolate;
    --ixzis-home-spot: rgba(105, 179, 255, .16);
    --ixzis-home-spot-2: rgba(120, 255, 214, .10);
}

.page-hero--video::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(120deg, rgba(255,255,255,.12), transparent 24% 72%, rgba(120,255,214,.08)),
        radial-gradient(circle at 78% 22%, rgba(105,179,255,.16), transparent 34%);
    opacity: .72;
    mix-blend-mode: screen;
}

.video-hero__facts div {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.video-hero__facts div::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(120,255,214,.18), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 58%);
    opacity: .78;
}

.video-guide--page .video-guide__shell {
    align-items: start;
}

.video-guide--page .video-guide__playlist {
    align-content: start;
}

.video-guide--page .video-guide__item {
    display: grid;
    align-content: start;
    gap: 0;
}

.video-guide--page .video-guide__item strong {
    max-width: 92%;
}

.video-guide--page .video-guide__caption {
    min-height: 70px;
}

.video-help-strip {
    --ixzis-home-spot: rgba(120, 255, 214, .14);
    --ixzis-home-spot-2: rgba(255, 209, 102, .10);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid rgba(125,255,239,.14);
    background:
        radial-gradient(circle at 12% 0%, rgba(120,255,214,.14), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.030));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 22px 58px rgba(0,0,0,.20);
}

@media (min-width: 1101px) {
    .video-guide--page .video-guide__playlist {
        max-height: 620px;
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
    }
}

@media (max-width: 760px) {
    .video-guide--page .video-guide__caption {
        align-items: start;
        min-height: 0;
    }

    .video-guide--page .video-guide__item {
        min-height: 150px;
    }

    .video-help-strip {
        padding: 22px;
    }
}