/*! Vodlix page engine base styles. Theme-agnostic: inherits the site's font and colours,
 *  reads page tokens (--vxpe-*), then the host theme's (--vxpe-host-*, set by the site so pages
 *  match it: brand, surfaces, button colours, font), then generic fallbacks.
 *  Breakpoints match the schema: md ≤ 991.98px, sm ≤ 767.98px.
 */

.vxpe-page {
    --vxpe-brand-c: var(--vxpe-brand, var(--vxpe-host-brand, var(--primary, var(--bs-primary, #e74f51))));
    --vxpe-accent-c: var(--vxpe-accent, var(--vxpe-brand-c));
    --vxpe-surface-c: var(--vxpe-surface, var(--vxpe-host-surface, rgba(127, 127, 127, .12)));
    --vxpe-cta-bg-c: var(--vxpe-cta-bg, var(--vxpe-host-cta-bg, var(--vxpe-brand-c)));
    --vxpe-cta-ink-c: var(--vxpe-cta-ink, var(--vxpe-host-cta-ink, #fff));
    --vxpe-on-brand-c: var(--vxpe-on-brand, var(--vxpe-host-on-brand, #fff));
    --vxpe-line: rgba(127, 127, 127, .25);
    --vxpe-radius-c: var(--vxpe-radius, 8px);
    --vxpe-gutter: var(--vxpe-host-gutter, clamp(16px, 4vw, 48px));
    --vxpe-gap-c: 16px;
    --vxpe-card-gap-c: var(--vxpe-card-gap, var(--vxpe-host-card-gap, 10px));
    --vxpe-card-radius-c: var(--vxpe-radius, var(--vxpe-host-card-radius, 8px));
    --vxpe-btn-radius-c: var(--vxpe-radius, var(--vxpe-host-btn-radius, 8px));
    --vxpe-panel-c: var(--vxpe-surface, var(--vxpe-host-surface-solid, #1e1e1e));
    --vxpe-panel-line: var(--vxpe-host-card-line, rgba(127, 127, 127, .22));
    --vxpe-rule: color-mix(in srgb, currentColor 8%, transparent);
    --vxpe-success-c: var(--vxpe-host-success, #46d369);
    /* The plan-header wash: the brand mixed into the panel colour, strongest top left. */
    --vxpe-wash: linear-gradient(135deg, color-mix(in srgb, var(--vxpe-brand-c) 30%, var(--vxpe-panel-c)), color-mix(in srgb, var(--vxpe-brand-c) 12%, var(--vxpe-panel-c)));
    --vxpe-wash-strong: linear-gradient(135deg, color-mix(in srgb, var(--vxpe-brand-c) 65%, #000), color-mix(in srgb, var(--vxpe-brand-c) 25%, #000));
    --vxpe-num-c: var(--vxpe-num-color, var(--vxpe-host-top10, currentColor));
    /* Cards per row in a rail, by width and shape (a Netflix-style rail: the last card peeks on phones).
       l = landscape, p = portrait/box art, t = Top 10 portrait, tl = Top 10 landscape. */
    --vxpe-per-l: 2.15; --vxpe-per-p: 3.15; --vxpe-per-t: 2.2; --vxpe-per-tl: 1.6;
    color: var(--vxpe-text, inherit);
    background: var(--vxpe-background, transparent);
    font-family: var(--vxpe-font-body, var(--vxpe-host-font, inherit));
}
.vxpe-page *, .vxpe-page *::before, .vxpe-page *::after { box-sizing: border-box; }
.vxpe-page img { max-width: 100%; height: auto; display: block; }
.vxpe-page h1, .vxpe-page h2, .vxpe-page h3, .vxpe-hero__heading, .vxpe-spot__name { font-family: var(--vxpe-font-display, inherit); text-wrap: balance; }
@media (min-width: 620px) { .vxpe-page { --vxpe-per-l: 3; --vxpe-per-p: 4; --vxpe-per-t: 3; --vxpe-per-tl: 2; } }
@media (min-width: 768px) { .vxpe-page { --vxpe-per-l: 4; --vxpe-per-p: 5; --vxpe-per-t: 4; --vxpe-per-tl: 3; } }
@media (min-width: 1040px) { .vxpe-page { --vxpe-per-l: 5; --vxpe-per-p: 7; --vxpe-per-t: 5; --vxpe-per-tl: 4; } }
@media (min-width: 1200px) { .vxpe-page { --vxpe-per-l: 6; --vxpe-per-p: 8; --vxpe-per-t: 5; --vxpe-per-tl: 5; } }
@media (min-width: 1450px) { .vxpe-page { --vxpe-per-l: 7; --vxpe-per-p: 9; --vxpe-per-t: 6; --vxpe-per-tl: 5; } }
@media (min-width: 1650px) { .vxpe-page { --vxpe-per-l: var(--vxpe-host-per-wide, 6); } }
.vxpe-page > .vxpe-b:not(.vxpe-section):not(.vxpe-hero):not(.vxpe-announce):not(.vxpe-header):not(.vxpe-footer):not(.vxpe-spot):not(.vxpe-bleed):not(.vxpe-cta):not(.vxpe-form),
.vxpe-container { padding-inline: var(--vxpe-gutter); }
.vxpe-container { max-width: 1240px; margin-inline: auto; }
.vxpe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-align="center"] { text-align: center; }
[data-align="right"] { text-align: right; }
.vxpe-b[hidden], .vxpe-when[hidden] { display: none !important; }

/* device rules */
@media (min-width: 992px) { .vxpe-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .vxpe-hide-tablet { display: none !important; } }
@media (max-width: 767.98px) { .vxpe-hide-phone { display: none !important; } }

/* buttons */
.vxpe-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.vxpe-buttons[data-align="center"] { justify-content: center; }
.vxpe-buttons[data-align="right"] { justify-content: flex-end; }
.vxpe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--vxpe-btn-radius-c); font-weight: 700; text-decoration: none; border: 0; cursor: pointer; line-height: 1.1; }
.vxpe-btn--sm { min-height: 34px; padding: 0 12px; font-size: .9em; }
.vxpe-btn--lg { min-height: 48px; padding: 0 22px; }
.vxpe-btn--primary { background: var(--vxpe-cta-bg-c); color: var(--vxpe-cta-ink-c); }
.vxpe-btn--primary:hover { background: var(--vxpe-cta-bg-hover, var(--vxpe-host-cta-bg-hover, var(--vxpe-cta-bg-c))); }
.vxpe-btn--secondary { background: var(--vxpe-host-cta2-bg, var(--vxpe-surface-c)); color: var(--vxpe-host-cta2-ink, inherit); }
.vxpe-btn--secondary:hover { background: var(--vxpe-host-cta2-bg-hover, var(--vxpe-host-cta2-bg, var(--vxpe-surface-c))); }
.vxpe-btn--outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.vxpe-btn--text { background: transparent; color: var(--vxpe-brand-c); padding-inline: 4px; }
.vxpe-btn:focus-visible, .vxpe-page a:focus-visible, .vxpe-page button:focus-visible { outline: 2px solid var(--vxpe-brand-c); outline-offset: 2px; }
.vxpe-btn.is-disabled { opacity: .5; cursor: default; }

/* layout */
.vxpe-section { padding-block: 48px; }
.vxpe-cols { display: grid; grid-template-columns: repeat(var(--vxpe-cols, 2), minmax(0, 1fr)); gap: var(--vxpe-gap, 24px); }
.vxpe-cols[data-valign="center"] { align-items: center; }
.vxpe-cols[data-valign="bottom"] { align-items: end; }
@media (max-width: 991.98px) { .vxpe-cols[data-stack="md"] { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .vxpe-cols[data-stack="sm"], .vxpe-cols[data-stack="md"] { grid-template-columns: 1fr; } }
.vxpe-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--vxpe-line); margin-bottom: 16px; overflow-x: auto; }
.vxpe-tabs__list button { background: none; border: 0; color: inherit; padding: 10px 14px; font: inherit; font-weight: 600; border-bottom: 2px solid transparent; cursor: pointer; opacity: .7; }
.vxpe-tabs__list button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--vxpe-brand-c); }
.vxpe-tabs[data-style="pills"] .vxpe-tabs__list { border: 0; }
.vxpe-tabs[data-style="pills"] .vxpe-tabs__list button[aria-selected="true"] { background: var(--vxpe-surface-c); border-radius: 999px; border-bottom-color: transparent; }
.vxpe-acc { display: grid; gap: 8px; margin-bottom: 16px; }
.vxpe-faq__list { display: grid; gap: 8px; }
.vxpe-acc__item, .vxpe-faq__item { border: 1px solid var(--vxpe-panel-line); border-radius: 12px; background: var(--vxpe-panel-c); overflow: hidden; }
.vxpe-acc__item > summary, .vxpe-faq__item > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 1.05em; line-height: 1.35; }
.vxpe-acc__item > summary::-webkit-details-marker, .vxpe-faq__item > summary::-webkit-details-marker { display: none; }
.vxpe-acc__item > summary::marker, .vxpe-faq__item > summary::marker { content: ""; }
/* a plus that turns into a cross when open */
.vxpe-acc__item > summary::after, .vxpe-faq__item > summary::after { content: ""; flex: none; width: 16px; height: 16px;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transition: transform .2s ease; }
.vxpe-acc__item[open] > summary::after, .vxpe-faq__item[open] > summary::after { transform: rotate(45deg); }
.vxpe-acc__item > summary:hover, .vxpe-faq__item > summary:hover { background: color-mix(in srgb, currentColor 4%, transparent); }
.vxpe-acc__item > .vxpe-prose, .vxpe-faq__item > .vxpe-prose { padding: 0 22px 18px; opacity: .78; line-height: 1.6; }
.vxpe-prose > :last-child { margin-bottom: 0; }
.vxpe-carousel { position: relative; }
.vxpe-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vxpe-slide { scroll-snap-align: start; }
.vxpe-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.vxpe-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--vxpe-line); padding: 0; cursor: pointer; }
.vxpe-popup { border: 0; border-radius: 16px; padding: 0; max-width: min(560px, calc(100vw - 32px)); background: var(--vxpe-background, var(--vxpe-host-surface-solid, Canvas)); color: var(--vxpe-text, var(--vxpe-host-text, inherit)); }
.vxpe-popup[data-size="sm"] { max-width: min(400px, calc(100vw - 32px)); }
.vxpe-popup[data-size="lg"] { max-width: min(860px, calc(100vw - 32px)); }
.vxpe-popup::backdrop { background: rgba(0, 0, 0, .55); }
.vxpe-popup__body { padding: 24px; }
.vxpe-popup__close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; background: none; color: inherit; font-size: 22px; cursor: pointer; }
.vxpe-announce { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px var(--vxpe-gutter); background: var(--vxpe-accent-c); color: var(--vxpe-on-accent, var(--vxpe-on-brand-c)); font-weight: 600; text-align: center; }
.vxpe-announce[data-sticky] { position: sticky; top: 0; z-index: 20; }
.vxpe-announce a:not(.vxpe-btn) { color: inherit; }
.vxpe-announce__code { background: rgba(0, 0, 0, .15); padding: 2px 8px; border-radius: 5px; font-family: inherit; font-weight: 800; }
.vxpe-announce__close { background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; }
.vxpe-header { display: flex; align-items: center; gap: 20px; padding: 12px var(--vxpe-gutter); }
.vxpe-header[data-sticky] { position: sticky; top: 0; z-index: 20; background: var(--vxpe-background, Canvas); }
/* Beats ".vxpe-page img { height: auto }": a wide logo file must still sit at header height. */
.vxpe-page .vxpe-header__logo, .vxpe-header__logo { height: 32px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.vxpe-header__name { font-weight: 800; font-size: 1.2em; }
.vxpe-header__home { color: inherit; text-decoration: none; }
.vxpe-header__nav { display: flex; gap: 18px; }
.vxpe-header__nav a, .vxpe-footer__nav a { color: inherit; text-decoration: none; opacity: .8; }
.vxpe-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.vxpe-header__right a:not(.vxpe-btn) { color: inherit; }
.vxpe-header__right > * { white-space: nowrap; }
@media (max-width: 767.98px) { .vxpe-header__nav { display: none; } }
@media (max-width: 575.98px)
{
    .vxpe-header { gap: 12px; }
    .vxpe-page .vxpe-header__logo, .vxpe-header__logo { height: 26px; max-width: 120px; }
    .vxpe-header__right { gap: 10px; }
    .vxpe-header__right .vxpe-btn { min-height: 34px; padding-inline: 12px; font-size: .9em; }
}
.vxpe-footer { padding: 32px var(--vxpe-gutter); border-top: 1px solid var(--vxpe-line); display: grid; gap: 12px; }
.vxpe-footer__nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* basic */
.vxpe-heading { margin: 0 0 16px; }
/* Basic blocks straight on the page get a reading rhythm (inside a Section or Columns their parent spaces them). */
.vxpe-page > .vxpe-heading { margin: 32px 0 12px; }
.vxpe-page > .vxpe-text { margin-bottom: 16px; }
.vxpe-page > .vxpe-buttons { margin-block: 8px 24px; }
.vxpe-page > .vxpe-icon-list { margin-block: 8px 24px; }
.vxpe-page > .vxpe-countdown { margin-block: 24px; }
.vxpe-page > .vxpe-tabs, .vxpe-page > .vxpe-acc, .vxpe-page > .vxpe-carousel, .vxpe-page > .vxpe-image, .vxpe-page > .vxpe-cols { margin-block: 24px; }
@media (max-width: 575.98px) { .vxpe-page .vxpe-icon-list { grid-template-columns: 1fr; } }
.vxpe-prose p { margin: 0 0 1em; }
.vxpe-prose a:not(.vxpe-btn) { color: var(--vxpe-brand-c); }
.vxpe-image { margin: 0 0 16px; }
.vxpe-image[data-rounded] img, .vxpe-image[data-rounded] .vxpe-img-empty { border-radius: 12px; }
.vxpe-image[data-aspect="16:9"] img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.vxpe-image[data-aspect="4:3"] img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.vxpe-image[data-aspect="1:1"] img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.vxpe-image[data-aspect="21:9"] img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.vxpe-image[data-aspect="2:3"] img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.vxpe-image[data-aspect="9:16"] img { aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }
.vxpe-img-empty { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--vxpe-surface-c); }
.vxpe-icon-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(var(--vxpe-cols, 1), minmax(0, 1fr)); gap: 8px 24px; }
.vxpe-icon-list li { display: flex; gap: 10px; align-items: flex-start; }
.vxpe-icon { display: inline-block; width: 1.2em; height: 1.2em; flex: none; }
.vxpe-divider { border: 0; border-top: 1px solid var(--vxpe-line); margin: 24px 0; }
.vxpe-divider[data-style="dashed"] { border-top-style: dashed; }
.vxpe-countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vxpe-countdown__cells { display: inline-flex; gap: 8px; }
.vxpe-countdown__cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 8px 10px; border-radius: var(--vxpe-radius-c); background: var(--vxpe-surface-c); }
.vxpe-countdown__cell b { font-size: 1.4em; font-variant-numeric: tabular-nums; }
.vxpe-countdown__cell small { font-size: .7em; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.vxpe-quote { margin: 8px 0 24px; }
/* the accent line runs beside the words (the figure itself carries the page margin) */
.vxpe-quote blockquote, .vxpe-quote figcaption { padding-left: 20px; border-left: 3px solid var(--vxpe-brand-c); }
.vxpe-quote blockquote { margin: 0; padding-bottom: 10px; font-size: 1.35em; font-weight: 600; line-height: 1.4; }
.vxpe-quote figcaption { opacity: .7; }
.vxpe-quote__img { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }

/* rails and cards */
.vxpe-rail-block { padding-block: 20px; }
.vxpe-rail__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
/* .vxpe-page: a host's blanket heading scale (body h2 { … }) must not resize rail titles. */
.vxpe-page .vxpe-rail__title { margin: 0; font-size: var(--vxpe-host-rail-title-size, 1.3em); font-weight: var(--vxpe-host-rail-title-weight, 700); line-height: 1.3; }
.vxpe-rail__all { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 400; white-space: nowrap; }
.vxpe-rail__all:hover { color: var(--vxpe-brand-c); }
.vxpe-rail__all .vxpe-icon { width: 14px; height: 14px; }
.vxpe-rail { display: grid; gap: var(--vxpe-card-gap-c); }
/* Rails scroll sideways with no scrollbar (arrows on desktop, a swipe on touch), like the site's own rows. */
.vxpe-rail--rail, .vxpe-rail--carousel,
.vxpe-live[data-layout="rail"] .vxpe-live__grid, .vxpe-coming[data-layout="rail"] .vxpe-coming__list,
.vxpe-collection[data-layout="rail"] .vxpe-collection__grid, .vxpe-cats[data-layout="rail"] .vxpe-cats__grid {
    grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vxpe-rail--rail::-webkit-scrollbar, .vxpe-rail--carousel::-webkit-scrollbar, .vxpe-live__grid::-webkit-scrollbar,
.vxpe-coming__list::-webkit-scrollbar, .vxpe-collection__grid::-webkit-scrollbar, .vxpe-cats__grid::-webkit-scrollbar { display: none; }
/* N cards across the row, the gaps between them taken out first. */
.vxpe-rail--rail, .vxpe-rail--carousel { grid-auto-columns: calc((100% - (var(--vxpe-n) - 1) * var(--vxpe-card-gap-c)) / var(--vxpe-n)); }
.vxpe-rail { --vxpe-per: var(--vxpe-per-l); --vxpe-n: max(1.5, calc(var(--vxpe-per) + var(--vxpe-add-c, 0))); }
.vxpe-rail:has(.vxpe-shape-portrait), .vxpe-rail:has(.vxpe-shape-boxart) { --vxpe-per: var(--vxpe-per-p); }
.vxpe-rail:has(.vxpe-card__num) { --vxpe-per: var(--vxpe-per-t); --vxpe-add-c: 0; }
.vxpe-rail:has(.vxpe-card__num + .vxpe-shape-landscape), .vxpe-rail:has(.vxpe-card__num + .vxpe-shape-square) { --vxpe-per: var(--vxpe-per-tl); }
/* Density: a card more or fewer per row (half a card on phones); the site's own density word is the default. */
.vxpe-rail-block { --vxpe-add: var(--vxpe-host-per-add, 0); }
.vxpe-rail-block[data-density="compact"] { --vxpe-add: 1; --vxpe-card-min: 140px; }
.vxpe-rail-block[data-density="large"] { --vxpe-add: -1; --vxpe-card-min: 240px; }
.vxpe-rail-block .vxpe-rail { --vxpe-add-c: var(--vxpe-add); }
@media (max-width: 619.98px) { .vxpe-rail-block .vxpe-rail { --vxpe-add-c: calc(var(--vxpe-add) * .5); } }
.vxpe-rail-block .vxpe-rail:has(.vxpe-card__num) { --vxpe-add-c: 0; }
.vxpe-rail--grid { grid-template-columns: repeat(auto-fill, minmax(var(--vxpe-card-min, 180px), 1fr)); }
.vxpe-rail--grid:has(.vxpe-shape-portrait), .vxpe-rail--grid:has(.vxpe-shape-boxart) { --vxpe-card-min: 150px; }
@media (max-width: 767.98px) { .vxpe-rail--grid { --vxpe-card-min: 140px; } .vxpe-rail--grid:has(.vxpe-shape-portrait), .vxpe-rail--grid:has(.vxpe-shape-boxart) { --vxpe-card-min: 100px; } }

/* A rail straight on the page runs from the page's left margin to the screen's right edge: the row, not the block,
   carries the margin, so the first card lines up with the titles and the last ones run off the edge. */
.vxpe-page > .vxpe-bleed { padding-inline: 0; }
.vxpe-page > .vxpe-bleed > :not(.vxpe-arrow) { padding-inline: var(--vxpe-gutter); }
.vxpe-page > .vxpe-bleed > .vxpe-rail__skeleton { padding-inline: 0; margin-inline: var(--vxpe-gutter); }
.vxpe-page > .vxpe-bleed > .vxpe-rail--rail, .vxpe-page > .vxpe-bleed > .vxpe-rail--carousel,
.vxpe-page > .vxpe-bleed[data-layout="rail"] > .vxpe-live__grid, .vxpe-page > .vxpe-bleed[data-layout="rail"] > .vxpe-coming__list,
.vxpe-page > .vxpe-bleed[data-layout="rail"] > .vxpe-collection__grid, .vxpe-page > .vxpe-bleed[data-layout="rail"] > .vxpe-cats__grid { scroll-padding-inline: var(--vxpe-gutter); }

/* Arrows: added by the runtime to a row that scrolls; shown while the pointer is over it, on desktop only. */
.vxpe-has-arrows { position: relative; }
.vxpe-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0; border-radius: 22px;
    border: 1px solid var(--vxpe-host-line-strong, rgba(255, 255, 255, .26)); background: var(--vxpe-host-glass, rgba(20, 20, 20, .82));
    color: var(--vxpe-host-ink, #fff); display: none; align-items: center; justify-content: center; cursor: pointer; opacity: 0;
    transition: opacity .15s ease, background-color .15s ease; }
.vxpe-arrow svg { width: 22px; height: 22px; }
.vxpe-arrow--prev { left: 8px; }
.vxpe-arrow--next { right: 8px; }
.vxpe-arrow[hidden] { display: none !important; }
[dir="rtl"] .vxpe-arrow svg { transform: scaleX(-1); }
@media (hover: hover) and (min-width: 992px)
{
    .vxpe-arrow { display: inline-flex; }
    .vxpe-has-arrows:hover > .vxpe-arrow, .vxpe-arrow:focus-visible { opacity: 1; }
    .vxpe-arrow:hover { background: var(--vxpe-host-surface-3, rgba(60, 60, 60, .92)); }
}

.vxpe-page .vxpe-card:hover, .vxpe-page .vxpe-live__card:hover, .vxpe-page .vxpe-collection__item:hover, .vxpe-page .vxpe-cat:hover { color: inherit; text-decoration: none; }
.vxpe-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; scroll-snap-align: start; position: relative; min-width: 0; }
.vxpe-card__art { position: relative; display: block; overflow: hidden; border-radius: var(--vxpe-card-radius-c); background: var(--vxpe-surface-c); }
.vxpe-card__art img, .vxpe-card__art .vxpe-img-empty { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.vxpe-shape-landscape { aspect-ratio: 16 / 9; }
.vxpe-shape-portrait { aspect-ratio: 9 / 16; }
.vxpe-shape-boxart { aspect-ratio: 2 / 3; }
.vxpe-shape-square { aspect-ratio: 1; }
.vxpe-card__badge { position: absolute; left: 6px; top: 6px; background: var(--vxpe-brand-c); color: var(--vxpe-on-brand-c); font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.vxpe-card__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.vxpe-card__progress span { display: block; height: 100%; background: var(--vxpe-brand-c); }
.vxpe-card__title { font-weight: 600; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxpe-card__meta { font-size: .82em; opacity: .7; }
.vxpe-card__body { display: flex; flex-direction: column; min-width: 0; }

/* Top 10: the rank stands on the poster's foot, behind it, tucked under its left edge by 18% of its height. The
   poster is the same size on every item (55% of the item portrait, 72% landscape); the rank takes the rest.
   Sizes are in item widths (cqw) so the row scales as one. A host can swap the typed digit for its own art. */
.vxpe-rail-block .vxpe-card:has(.vxpe-card__num) { flex-direction: row; align-items: flex-end; gap: 0; container-type: inline-size; }
.vxpe-card:has(.vxpe-card__num) .vxpe-card__art { flex: 0 0 55%; z-index: 1; }
.vxpe-card:has(.vxpe-card__num + .vxpe-shape-landscape) .vxpe-card__art, .vxpe-card:has(.vxpe-card__num + .vxpe-shape-square) .vxpe-card__art { flex-basis: 72%; }
.vxpe-card__num { --vxpe-num-h: 60cqw; flex: 1 1 0; min-width: 0; position: relative; z-index: 0; display: flex; justify-content: flex-end; align-items: flex-end;
    margin-right: calc(var(--vxpe-num-h) * -.18); white-space: nowrap; font-size: calc(var(--vxpe-num-h) / .72); font-weight: 800; line-height: .72;
    letter-spacing: -.06em; color: var(--vxpe-num-c); }
.vxpe-card:has(.vxpe-shape-landscape) > .vxpe-card__num, .vxpe-card:has(.vxpe-shape-square) > .vxpe-card__num { --vxpe-num-h: 34.25cqw; }
/* The two-digit 10 starts at the item's edge and runs on under the poster. */
.vxpe-card__num[data-n="10"] { justify-content: flex-start; letter-spacing: -.12em; }
.vxpe-rail__skeleton { height: 120px; border-radius: var(--vxpe-card-radius-c); background: linear-gradient(90deg, var(--vxpe-surface-c), transparent, var(--vxpe-surface-c)); }

/* content blocks */
.vxpe-spot { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.vxpe-spot__bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.vxpe-spot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 70%); }
.vxpe-spot__body { position: relative; z-index: 1; padding: 48px var(--vxpe-gutter); max-width: 680px; }
.vxpe-spot__logo img { max-height: 120px; width: auto; }
.vxpe-spot__meta { opacity: .8; }
.vxpe-live { padding-block: 20px; }
.vxpe-live__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, calc(50% - 5px)), 1fr)); gap: var(--vxpe-card-gap-c); }
.vxpe-live[data-layout="rail"] .vxpe-live__grid { grid-auto-columns: calc((100% - (var(--vxpe-per-l) - 1) * var(--vxpe-card-gap-c)) / var(--vxpe-per-l)); }
.vxpe-live__card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: inherit; text-decoration: none; scroll-snap-align: start; }
.vxpe-live__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--vxpe-card-radius-c); background: var(--vxpe-surface-c); }
.vxpe-live__img { width: 100%; height: 100% !important; object-fit: cover; }
.vxpe-live__img--logo { object-fit: contain; padding: 18% 24%; }
.vxpe-live__art .vxpe-img-empty { width: 100%; height: 100%; }
.vxpe-live__logo { position: absolute; left: 8px; bottom: 10px; width: auto !important; max-width: 38%; height: 26% !important; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); }
.vxpe-live__badge { position: absolute; left: 6px; top: 6px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; padding: 4px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.vxpe-live__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vxpe-live__name { font-weight: 600; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxpe-live__now, .vxpe-live__next { font-size: .82em; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxpe-live__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.vxpe-live__bar span { display: block; height: 100%; background: var(--vxpe-brand-c); }
.vxpe-live__dot { align-self: center; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; padding: 4px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.vxpe-coming { padding-block: 24px; }
.vxpe-coming__list { display: grid; gap: 12px; }
.vxpe-coming__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: var(--vxpe-surface-c); }
.vxpe-coming__img { width: 100%; height: 100%; object-fit: cover; }
.vxpe-coming__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.vxpe-coming__body h3 { margin: 0; }
.vxpe-coming__body h3 a { color: inherit; }
.vxpe-coming[data-layout="rail"] .vxpe-coming__list { grid-auto-columns: minmax(280px, 32%); }
.vxpe-coming[data-layout="rail"] .vxpe-coming__card { grid-template-columns: 1fr; }
@media (max-width: 767.98px) { .vxpe-coming__card { grid-template-columns: 1fr; } }
.vxpe-cats { padding-block: 24px; }
.vxpe-cats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vxpe-cats[data-layout="rail"] .vxpe-cats__grid { grid-auto-columns: calc((100% - (var(--vxpe-per-l) - 1) * 8px) / var(--vxpe-per-l)); }
.vxpe-cats > .vxpe-rail__title, .vxpe-coming > .vxpe-rail__title, .vxpe-collection > .vxpe-rail__title { margin-bottom: 12px; }
.vxpe-cat { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--vxpe-card-radius-c); overflow: hidden; color: #fff; text-decoration: none; background: var(--vxpe-wash); }
.vxpe-cats__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.vxpe-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--vxpe-host-line-strong, rgba(127, 127, 127, .45)); color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.vxpe-page a.vxpe-chip:hover { background: var(--vxpe-host-surface-3, rgba(127, 127, 127, .18)); color: inherit; text-decoration: none; }
.vxpe-cats[data-shape="square"] .vxpe-cat { aspect-ratio: 1; }
.vxpe-cat__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.vxpe-cat__name { position: absolute; left: 14px; right: 14px; bottom: 12px; font-weight: 700; font-size: 1.02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.vxpe-cat:has(.vxpe-cat__img:not(.vxpe-img-empty))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent 60%); }
.vxpe-cat__name { z-index: 1; }
.vxpe-cat .vxpe-img-empty { display: none; }
.vxpe-banner { padding-block: 16px; }
.vxpe-banner a:not(.vxpe-btn) { color: inherit; text-decoration: none; }
.vxpe-banner__img { width: 100%; border-radius: 14px; }
.vxpe-banner__body { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vxpe-search { display: flex; gap: 10px; max-width: 680px; margin: 28px auto; }
.vxpe-search__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.vxpe-search__field .vxpe-icon { position: absolute; left: 16px; width: 18px; height: 18px; opacity: .55; pointer-events: none; }
.vxpe-search input { width: 100%; min-width: 0; min-height: 50px; border-radius: var(--vxpe-radius-c); border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-panel-c); color: inherit; padding: 0 16px 0 44px; font: inherit; font-size: 15px; outline: 0; transition: border-color .15s ease; }
.vxpe-search input::placeholder { color: inherit; opacity: .5; }
.vxpe-search input:focus { border-color: color-mix(in srgb, currentColor 45%, transparent); }
.vxpe-search .vxpe-btn { min-height: 50px; padding-inline: 24px; }

/* conversion */
.vxpe-page .vxpe-section-title { text-align: center; margin: 0 0 8px; font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.vxpe-section-sub { text-align: center; opacity: .65; margin: 0 auto 24px; max-width: 640px; }
.vxpe-plans { padding-block: 48px; }
/* Plan cards: the storefront's plans page (styles/default_v2 plans.css) — 300px cards, centred, a washed header strip. */
.vxpe-plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); justify-content: center; gap: 20px; margin: 28px auto 0; }
.vxpe-plan { display: flex; flex-direction: column; padding: 8px 8px 18px; border-radius: 12px; border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-panel-c); text-align: start; transition: border-color .15s ease; }
.vxpe-plan:hover { border-color: color-mix(in srgb, var(--vxpe-brand-c) 65%, transparent); }
.vxpe-plan.is-featured { border-color: var(--vxpe-brand-c); box-shadow: 0 0 0 1px var(--vxpe-brand-c), 0 12px 30px rgba(0, 0, 0, .45); }
.vxpe-plan__head { padding: 16px 14px; margin-bottom: 16px; border-radius: 8px; background: var(--vxpe-wash); }
.vxpe-plan.is-featured .vxpe-plan__head { background: var(--vxpe-wash-strong); color: #fff; }
.vxpe-page .vxpe-plan__name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.vxpe-plan__trial { display: block; margin-top: 3px; font-size: 12.5px; opacity: .75; }
.vxpe-plan__body { display: flex; flex-direction: column; flex: 1; padding: 0 10px; }
.vxpe-plan__price { margin: 0 0 10px; line-height: 1.1; }
.vxpe-plan__price strong { font-size: 1.7rem; font-weight: 700; }
.vxpe-plan__price span { font-size: 13.5px; opacity: .65; }
.vxpe-plan__features { list-style: none; padding: 0; margin: 0 0 18px; }
.vxpe-plan__features li { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13.5px; border-bottom: 1px solid var(--vxpe-rule); }
.vxpe-plan__features li:last-child { border-bottom: 0; }
.vxpe-plan__features .vxpe-icon { width: 18px; height: 18px; color: var(--vxpe-success-c); }
.vxpe-plan .vxpe-btn { margin-top: auto; width: 100%; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Forms (the host mounts its own; until then a card with the way in). */
.vxpe-form { width: min(480px, calc(100% - 2 * var(--vxpe-gutter))); margin: 32px auto; padding: 32px; border-radius: 16px; border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-panel-c); text-align: center; display: grid; gap: 10px; }
.vxpe-page .vxpe-form__title { margin: 0; font-size: 1.5em; font-weight: 700; line-height: 1.25; }
.vxpe-form__text { margin: 0; opacity: .7; }
.vxpe-form .vxpe-btn { width: 100%; min-height: 48px; margin-top: 10px; }
.vxpe-form__consent { font-size: .85em; opacity: .65; }
@media (max-width: 575.98px) { .vxpe-form { padding: 24px 20px; } }
.vxpe-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.vxpe-store { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--vxpe-line); color: inherit; text-decoration: none; font-weight: 600; }
.vxpe-devices ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vxpe-devices li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 120px; padding: 20px 8px; border-radius: 12px; border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-panel-c); font-weight: 600; font-size: .95em; }
.vxpe-devices .vxpe-icon { width: 30px; height: 30px; stroke-width: 1.6; opacity: .9; }
.vxpe-icon-list .vxpe-icon { color: var(--vxpe-accent-c); margin-top: .12em; }
.vxpe-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--vxpe-brand-c) 16%, transparent); color: var(--vxpe-accent-c); margin-bottom: 14px; }
.vxpe-feature__icon .vxpe-icon { width: 22px; height: 22px; }
.vxpe-btn .vxpe-icon { width: 1.1em; height: 1.1em; }

/* marketing */
.vxpe-hero { position: relative; display: flex; align-items: flex-end; min-height: var(--vxpe-hero-min, 60vh); overflow: hidden; color: #fff; background: #111; }
.vxpe-hero__bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.vxpe-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--vxpe-overlay, .5)); }
/* No picture yet: the brand wash, without the darkening meant for a photo. */
.vxpe-hero:not(:has(.vxpe-hero__bg)) { background: var(--vxpe-wash); color: inherit; }
.vxpe-hero:not(:has(.vxpe-hero__bg))::after { display: none; }
.vxpe-hero__body { position: relative; z-index: 1; padding: 64px var(--vxpe-gutter) 48px; max-width: 720px; }
.vxpe-hero[data-align="center"] { justify-content: center; text-align: center; }
.vxpe-hero[data-align="center"] .vxpe-hero__body { margin-inline: auto; }
.vxpe-hero[data-align="center"] .vxpe-buttons { justify-content: center; }
.vxpe-hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .8em; color: var(--vxpe-accent-c); margin: 0 0 10px; }
.vxpe-hero:has(.vxpe-hero__bg) .vxpe-hero__eyebrow, .vxpe-hero:has(.vxpe-hero__bg) .vxpe-hero__heading, .vxpe-hero:has(.vxpe-hero__bg) .vxpe-hero__text { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.vxpe-hero__heading { font-size: clamp(2.2em, 5.5vw, 4em); line-height: 1; margin: 0 0 14px; }
.vxpe-hero__text { font-size: 1.1em; opacity: .9; margin: 0 0 22px; max-width: 560px; }
.vxpe-hero[data-layout="split"] { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.vxpe-hero[data-layout="split"] .vxpe-hero__bg { position: relative; order: 2; height: 100%; }
.vxpe-hero[data-layout="split"]::after { display: none; }
@media (max-width: 767.98px) { .vxpe-hero[data-layout="split"] { grid-template-columns: 1fr; } }
.vxpe-features, .vxpe-testimonials, .vxpe-logos, .vxpe-faq, .vxpe-compare, .vxpe-collection, .vxpe-devices { padding-block: 48px; }
/* Card grids centre a short last row (one feature is not a lone card on the left). */
.vxpe-features__grid, .vxpe-testimonials__grid { --vxpe-g: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vxpe-g); margin-top: 28px; }
.vxpe-feature { flex: 0 1 calc((100% - (var(--vxpe-cols, 3) - 1) * var(--vxpe-g)) / var(--vxpe-cols, 3)); min-width: 0; padding: 24px; border-radius: 12px; border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-panel-c); }
.vxpe-features[data-layout="list"] .vxpe-feature { flex-basis: 100%; }
.vxpe-page .vxpe-feature h3 { margin: 0 0 6px; font-size: 1.08em; font-weight: 700; line-height: 1.3; }
.vxpe-feature h3 a { color: inherit; text-decoration: none; }
.vxpe-feature p { margin: 0; opacity: .7; line-height: 1.55; }
.vxpe-feature__img { width: 100%; border-radius: 8px; margin-bottom: 14px; aspect-ratio: 16 / 9; object-fit: cover; }
.vxpe-testimonial { flex: 0 1 calc((100% - 2 * var(--vxpe-g)) / 3); min-width: 0; margin: 0; padding: 24px; border-radius: 12px; border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-panel-c); display: flex; flex-direction: column; gap: 14px; }
.vxpe-testimonial blockquote { margin: 0; font-size: 1.05em; line-height: 1.55; }
.vxpe-testimonial blockquote::before { content: "\201C"; display: block; height: .55em; margin-bottom: 6px; font-family: Georgia, "Times New Roman", serif; font-size: 3em; line-height: 1; color: var(--vxpe-brand-c); }
.vxpe-testimonial figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; font-weight: 600; font-size: .95em; opacity: .85; }
.vxpe-testimonial__avatar { width: 36px !important; height: 36px !important; border-radius: 50%; object-fit: cover; }
.vxpe-stars { color: var(--vxpe-accent-c); letter-spacing: 2px; }
@media (max-width: 991.98px) { .vxpe-feature, .vxpe-testimonial { flex-basis: calc((100% - var(--vxpe-g)) / 2); } }
@media (max-width: 767.98px) { .vxpe-feature, .vxpe-testimonial { flex-basis: 100%; } }
.vxpe-logos ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; }
.vxpe-logos__img { max-height: 40px; width: auto; }
.vxpe-logos[data-grayscale] img { filter: grayscale(1); opacity: .75; }
.vxpe-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 64px; padding-block: 48px; text-align: center; }
.vxpe-stat { min-width: 140px; }
.vxpe-stat strong { display: block; font-size: clamp(2.1em, 4vw, 3em); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.vxpe-stat span { display: block; margin-top: 6px; opacity: .6; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.vxpe-faq { max-width: 860px; margin-inline: auto; }
.vxpe-faq > .vxpe-section-title { margin-bottom: 28px; }
.vxpe-faq__item + .vxpe-faq__item { margin-top: 8px; }
/* CTA: the plan-header wash (brand into the panel), not a slab of brand red; the button stays the site's mono CTA. */
.vxpe-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-block: 40px; }
.vxpe-cta[data-layout="card"] { margin-inline: var(--vxpe-gutter); padding: 44px 48px; border-radius: 16px; border: 1px solid var(--vxpe-panel-line); background: var(--vxpe-wash); }
.vxpe-cta[data-layout="band"] { padding: 44px var(--vxpe-gutter); background: var(--vxpe-wash); border-block: 1px solid var(--vxpe-panel-line); }
.vxpe-page .vxpe-cta h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.2; }
.vxpe-cta p { margin: 0; opacity: .75; max-width: 640px; }
@media (max-width: 767.98px)
{
    .vxpe-cta[data-layout="card"] { padding: 28px 24px; }
    .vxpe-cta .vxpe-buttons, .vxpe-cta .vxpe-btn { width: 100%; }
}
/* Plan comparison: one panel, names and prices on top, the feature column pinned when it scrolls. */
.vxpe-compare__scroll { overflow-x: auto; max-width: 1100px; margin: 28px auto 0; border: 1px solid var(--vxpe-panel-line); border-radius: 12px; background: var(--vxpe-panel-c); }
.vxpe-compare table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
.vxpe-compare th, .vxpe-compare td { padding: 14px 16px; border-bottom: 1px solid var(--vxpe-rule); text-align: center; vertical-align: middle; }
.vxpe-compare thead th { background: color-mix(in srgb, var(--vxpe-brand-c) 20%, var(--vxpe-panel-c)); font-weight: 700; }
.vxpe-compare tbody th { min-width: 170px; }
.vxpe-compare__name { display: block; font-size: 14.5px; line-height: 1.3; }
.vxpe-compare thead small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; opacity: .7; }
.vxpe-compare tbody th { text-align: left; font-weight: 600; }
.vxpe-compare tbody tr:last-child > * { border-bottom: 0; }
.vxpe-compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--vxpe-panel-c); }
.vxpe-compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
.vxpe-compare__none { opacity: .35; }
.vxpe-collection__grid { display: grid; grid-template-columns: repeat(var(--vxpe-cols, 4), minmax(0, 1fr)); gap: 12px; }
.vxpe-collection[data-layout="rail"] .vxpe-collection__grid { grid-auto-columns: calc((100% - (var(--vxpe-cols, 4) - 1) * 12px) / var(--vxpe-cols, 4)); }
.vxpe-collection[data-layout="list"] .vxpe-collection__grid { grid-template-columns: 1fr; }
@media (max-width: 767.98px) { .vxpe-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vxpe-collection__item { color: inherit; text-decoration: none; }
/* A player wider than ~a laptop screen is a wall, not a video: cap it and centre it (inside Columns it is narrower anyway). */
.vxpe-embed { width: 100%; max-width: 1040px; margin: 0 auto 16px; }
.vxpe-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) { .vxpe-page * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }