/* The Vault: public creator content rails on the landing page and /discover,
   plus the preview-to-signup gate. */

.vault-section {
    position: relative;
    padding: 130px 0 80px;
    /* The fixed header covers the top of this section. Clearance is the
       measured overlap; the fallback covers first paint before that runs. */
    overflow: hidden;
    background: #0d0d0f;
    color: #f4f4f5;
}

.vault-section__hero {
    position: absolute;
    inset: 0;
    z-index: 0;

    /* The site header is fixed and opaque, so the strip of this section lying
       under it is never visible. Reserving exactly that overlap, measured in
       hero-background.js rather than assumed from a magic number, keeps the
       whole frame below the bar. It was previously cleared only by the empty
       signup section above happening to be 90px against a 91px header, and
       lost 19px to it on a phone. */
    top: var(--vault-hero-inset, 0px);

    /* Whatever the frame does not reach, now that it is never cropped. */
    background: #0d0d0f;

    /* The declared shape of whichever cut this screen plays. The markup sets
       both and an inline media rule swaps in the mobile one, so the box is
       right before either file has loaded. */
    --vault-hero-aspect: var(--vault-hero-aspect-desktop, 5 / 7);
}

/* The still under the film. A <picture> rather than a poster attribute so a
   phone downloads only its own frame. It stays until the film is actually
   painting, and comes back whenever the player is torn down. */
.vault-section__hero-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: var(--vault-hero-aspect);
    transition: opacity 0.4s ease;
}

.vault-section__hero-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1) brightness(0.86);
}

.vault-section__hero.is-playing .vault-section__hero-poster {
    opacity: 0;
}

/* The clip has to stay readable as a picture. Dimming it twice, once here and
   again under the veil, took it to near black on the dimmer screens most
   phones ship with, so both halves are held back. Saturation tracks the
   brightness: lifting light alone read grey, and the point of showing a clip
   at all is that its colour is identifiable. The frame still resolves to the
   page colour at the bottom so the headline keeps its contrast.

   The old 0.78 was set against a 480p preview, where dimming hid how soft the
   frame was. A sharp source has nothing to hide, and the veil below still does
   the work that protects the headline. */
.vault-section__hero-video {
    display: block;
    position: relative;

    /*
     * The frame spans the full width at its own shape. Nothing is letterboxed
     * at the sides, and nothing is trimmed off them either, which is what
     * both cover and contain did in turn: this section takes its height from
     * the rails stacked inside it, so its shape runs from about 0.16 on a
     * phone to 1.46 on a 2560px desktop while the film stays 5:7.
     *
     * Sizing from the width means the height follows the film. Where that
     * overshoots the section, as it does on a wide desktop, the surplus runs
     * off the bottom into the band where the veil has already gone solid.
     * Where it undershoots, on a phone, the wrapper's colour fills in below.
     *
     * The ratio is declared rather than left to the file's intrinsic size so
     * the box is the right shape before a byte of video has arrived, and
     * hero-background.js corrects it from the real metadata once it has.
     */
    width: 100%;
    height: auto;
    aspect-ratio: var(--vault-hero-aspect, 5 / 7);

    /* The box already matches the frame, so this crops nothing. It only
       decides the failure mode if a declared ratio is slightly off, and a
       hair off the edge beats a visible bar down the side. */
    object-fit: cover;
    filter: saturate(1) brightness(0.86);
}

.vault-section__hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(13, 13, 15, 0.06) 0%, rgba(13, 13, 15, 0.58) 72%),
        linear-gradient(180deg, rgba(13, 13, 15, 0.22) 0%, #0d0d0f 96%);
}

.vault-section__inner { position: relative; z-index: 1; }

.vault-section__head { max-width: 1120px; margin-bottom: 30px; }

/* The global .section-title centres itself. This one heads a left-aligned
   block of copy and rails, so it lines up with them. */
.vault-section .section-title {
    color: #fff;
    margin: 0 0 12px;
    text-align: left;
}

.vault-section__subtitle {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.vault-section__subtitle--cta {
    margin-bottom: 16px;
}

.vault-section__lede {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(244, 244, 245, 0.76);
}

/* Carries the headline into the section, so it sits between the title and the
   body copy in weight and size rather than reading as another paragraph. */
.vault-section__lede--lead {
    margin-bottom: 14px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.vault-ticker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: rgba(244, 244, 245, 0.62);
}

.vault-ticker strong {
    display: inline-block;
    margin-right: 5px;
    font-size: 17px;
    color: #fff;
}

/* --- Category chips ----------------------------------------------------- */

.vault-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 26px;
}

.vault-chip {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(244, 244, 245, 0.82);
    font-size: 12.5px;
    text-decoration: none;
    transition: background 0.18s ease;
}

.vault-chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vault-chip.is-active { background: #db2f49; color: #fff; }
.vault-chips__spacer { flex: 1 1 20px; }

/* --- Rails --------------------------------------------------------------- */

.vault-rail { margin-bottom: 46px; }

.vault-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.vault-rail__head h2,
.vault-rail__head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.vault-rail__all {
    font-size: 13px;
    color: rgba(244, 244, 245, 0.68);
    text-decoration: none;
}

.vault-rail__all:hover { color: #fff; text-decoration: underline; }

.vault-rail__actions,
.vault-carousel__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vault-rail__page {
    min-width: 42px;
    color: rgba(244, 244, 245, 0.62);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.vault-rail__arrow {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.vault-rail__arrow:hover:not(:disabled),
.vault-rail__arrow:focus-visible {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.17);
}

.vault-rail__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.vault-rail__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.vault-rail__arrow svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Windows paints a permanent light scrollbar track under the rail. The arrows,
   wheel, touch and keyboard all still scroll it, so the bar itself is hidden. */
.vault-rail__viewport {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.vault-rail__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.vault-rail__viewport:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 4px;
}

.vault-rail__track {
    display: flex;
    width: max-content;
    gap: 14px;
}

/* Each tile is its own stacking context. Poster, scrim, duration and badge
   carry z-index inside the frame; without a context those layers escape and
   paint over the pinned sponsored tile while the rail scrolls. */
.vault-rail__track > * {
    position: relative;
    z-index: 1;
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.vault-rail--clips .vault-tile { width: 184px; }

.vault-video-section { margin-bottom: 12px; }

.vault-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 18px;
}

.vault-video-grid > *,
.vault-video-grid .vault-tile {
    min-width: 0;
    width: 100%;
}

/* --- Tiles --------------------------------------------------------------- */

.vault-tile { position: relative; }

.vault-tile__hit {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.vault-tile__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #17171a;
}

.vault-tile--clip .vault-tile__frame { aspect-ratio: 9 / 16; }
.vault-tile--video .vault-tile__frame { aspect-ratio: 16 / 9; }

.vault-tile__poster,
.vault-tile__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vault-tile__preview {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.vault-tile.is-playing .vault-tile__preview { opacity: 1; }

/* Kept light: it only has to hold the duration chip and the play button, and
   the title sits outside the frame where the poster cannot wash it out. */
.vault-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.vault-tile__play {
    position: absolute;
    inset: 0;
    width: 76px;
    height: 76px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.vault-tile__play svg {
    display: block;
    width: 36px;
    height: 36px;
    /* A play triangle's mass sits on the flat side, so the box center
       reads left of the circle. This shift puts the weight in the middle. */
    transform: translateX(14%);
}

.vault-tile__hit:hover .vault-tile__play,
.vault-tile__hit:focus-visible .vault-tile__play {
    opacity: 1;
    transform: scale(1);
}

.vault-tile__duration,
.vault-tile__badge {
    position: absolute;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.vault-tile__duration {
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* A frosted plate rather than a colour block. The crimson belongs to actions,
   and a saturated fill of any hue competes with the poster it sits on, which
   is the one thing on the tile that should carry colour. The distinction from
   the duration pill opposite comes from the hairline and the letterspacing. */
.vault-tile__badge {
    left: 8px;
    top: 8px;
    padding: 3px 9px;
    background: rgba(13, 13, 15, 0.55);
    border: 1px solid rgba(244, 244, 245, 0.24);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    color: #f4f4f5;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Only where it is supported: without it the flat fill above already holds
   its contrast, so nothing is lost on the browsers that skip this. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vault-tile__badge {
        background: rgba(13, 13, 15, 0.38);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        backdrop-filter: blur(10px) saturate(140%);
    }
}

.vault-tile__meta { display: block; padding: 10px 2px 0; }

.vault-tile__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}

/* Tiles are as narrow as 152px, so the byline has to stay on one line:
   the handle truncates first and the chips never wrap into stacked pills. */
.vault-tile__byline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    margin-top: 5px;
    font-size: 12px;
    color: rgba(244, 244, 245, 0.6);
}

.vault-tile__creator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.vault-tile__creator > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.vault-tile__creator:hover {
    color: #fff;
}

.vault-tile__avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

.vault-tile__chip {
    flex: 0 1 auto;
    max-width: 52%;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rail clip tiles are too narrow to carry a category pill without chopping the
   handle down to "@democ…", and the category is already a filter above. */
.vault-rail--clips .vault-tile__chip { display: none; }

/* --- Promoted poster (paid slot) ----------------------------------------- */

/* The pin is a sibling of the scroller, not a sticky child of the track.
   Sticky lost to `.vault-rail__track > * { position: relative }` and was
   clipped by `.vault-section { overflow: hidden }` on the landing page, so
   the same poster that showed on Discover painted as an empty slot there. */
.vault-rail__scroller {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.vault-rail__pin {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.vault-rail__scroller .vault-rail__viewport {
    flex: 1 1 auto;
    min-width: 0;
}

.vault-rail--clips .vault-rail__pin { width: 184px; }
.vault-rail--clips .promo-tile { width: 184px; }

/* At the standard 1200px container a desktop clip rail shows eight tiles
   (98px is the seven 14px gaps). On wider rails the tile stops growing at
   150px and the extra width shows more tiles instead of bigger ones. */
@media (min-width: 721px) {
    .vault-rail--clips .vault-rail__viewport { container-type: inline-size; }
    .vault-rail--clips .vault-tile,
    .vault-rail--clips .promo-tile { width: clamp(120px, calc((100cqw - 98px) / 8), 150px); }
}

/* Large screens: the fixed 1200px container left most of the screen empty,
   so the header and the clip and video area grow with the screen, keeping
   roughly the share of the width a laptop gets. Below 1500px nothing changes. */
@media (min-width: 1500px) {
    :root { --vault-wide-shell: min(84vw, 1840px); }

    .vault-section__inner.container,
    header .container.nav-container { max-width: var(--vault-wide-shell); }

    .discover-page .share-shell,
    body:has(.discover-page) .site-header__inner {
        width: var(--vault-wide-shell);
        max-width: none;
    }

    .vault-video-grid:not(.vault-video-grid--discover) {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

/* Caption sits on the page, same as a creator tile. The frame keeps the
   poster; a filled plate under it read as a black bar. */
.promo-tile {
    background: transparent;
}

.promo-tile__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #17171a;
}

.promo-tile--clip .promo-tile__frame { aspect-ratio: 9 / 16; }
.promo-tile--video .promo-tile__frame { aspect-ratio: 16 / 9; }

.promo-tile__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.promo-tile__slide.is-active { opacity: 1; visibility: visible; }

.promo-tile__image,
.promo-tile__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The still creative is the first paint and the fallback whenever autoplay is
   refused, so the video fades in over it rather than replacing it. */
.promo-tile__video { opacity: 0; transition: opacity 0.35s ease; }
.promo-tile__slide.is-playing .promo-tile__video { opacity: 1; }

.promo-tile__overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}

.promo-tile__headline {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.promo-tile__subline {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(244, 244, 245, 0.78);
}

.promo-tile__cta {
    align-self: center;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8114b;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A rotating tile puts its dot row in the bottom-right corner, which a
   centred button would run into on the narrow clip format. */
.promo-tile__frame:has(.promo-tile__dots) .promo-tile__cta { margin-bottom: 10px; }

.promo-tile__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

.promo-tile__hit {
    position: absolute;
    inset: 0;
    display: block;
}

/* --- Promoted video: sound and the expanded state ------------------------ */

.promo-tile__sound {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.promo-tile:hover .promo-tile__sound,
.promo-tile__sound:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.promo-tile__sound:hover,
.promo-tile__sound:focus-visible {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.82);
}

.promo-tile__sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.promo-tile__sound svg { width: 15px; height: 15px; fill: currentColor; }
.promo-tile__sound .promo-tile__sound-on { display: none; }
.promo-tile.is-audible .promo-tile__sound .promo-tile__sound-off { display: none; }
.promo-tile.is-audible .promo-tile__sound .promo-tile__sound-on { display: block; }

.promo-tile.is-audible .promo-tile__sound {
    border-color: rgba(232, 17, 75, 0.9);
    background: rgba(232, 17, 75, 0.92);
}

/* Asking for sound lifts the tile forward. It grows from its top-left corner
   because a pinned tile sits against the rail's left edge and the viewport
   clips anything that leaves it. */
.promo-tile {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    transform-origin: top left;
}

.promo-tile.is-expanded {
    position: relative;
    z-index: 30;
    transform: scale(1.05);
}

.vault-video-grid .promo-tile { transform-origin: center center; }

/* Room for the 5% the expanded tile grows into, so the rail does not clip it. */
.vault-rail--clips .vault-rail__viewport { padding-bottom: 20px; }

/* In the Business Feed the ads sit inside the track, where every tile is its
   own stacking context, so the expanded one has to lift its wrapper above the
   neighbour it grows over. The trailing pad keeps the last tile's growth in view. */
.vault-rail--business .vault-rail__track > *:has(.promo-tile.is-expanded) { z-index: 3; }
.vault-rail--business .vault-rail__track { padding-right: 12px; }

.sr-only-promo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.promo-tile__dots {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.promo-tile__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.3s ease;
}

.promo-tile__dot.is-active { background: #fff; }

/* Captions cross-fade in place, so the row needs a reserved height or the
   tile would collapse to the frame and break grid/rail alignment. */
.promo-tile__meta {
    position: relative;
    display: block;
    min-height: 46px;
    padding: 10px 11px 12px;
}

.promo-tile__caption {
    position: absolute;
    inset: 10px 11px auto 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.promo-tile__caption.is-active { opacity: 1; }

.promo-tile__caption-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.promo-tile__caption-label {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 10.5px;
    color: rgba(244, 244, 245, 0.6);
}

/* --- The gate ------------------------------------------------------------ */

.vault-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(6, 6, 8, 0.9);
}

.vault-gate[hidden] { display: none; }

.vault-gate__dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
}

.vault-gate--clip .vault-gate__dialog { max-width: min(420px, 42vh); }

.vault-gate--full .vault-gate__dialog {
    max-width: min(1200px, calc(100vw - 36px), calc((100vh - 120px) * 16 / 9));
}
.vault-gate--full.vault-gate--clip .vault-gate__dialog {
    max-width: min(560px, calc((100vh - 120px) * 9 / 16));
}

.vault-gate__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(16, 16, 18, 0.55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vault-gate__stage {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #101013;
    max-height: 78vh;
}

.vault-gate--full .vault-gate__stage {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
}

.vault-gate--clip .vault-gate__stage { aspect-ratio: 9 / 16; }
.vault-gate--video .vault-gate__stage { aspect-ratio: 16 / 9; }

/* The bar sits under the picture, so the stage follows the file instead of
   staying 16:9 or 9:16 and pillarboxing the frame. */
.vault-gate--full.vault-gate--clip .vault-gate__stage,
.vault-gate--full.vault-gate--video .vault-gate__stage {
    aspect-ratio: auto;
}

.vault-gate__blur,
.vault-gate__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The blurred poster is the fallback frame and the reveal-blocker once the
   preview runs out. It is a 240p source, so nothing sharp ever reaches a guest. */
.vault-gate__blur {
    filter: blur(18px) saturate(1.1);
    transform: scale(1.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.vault-gate.is-gated .vault-gate__blur { opacity: 1; }
.vault-gate.is-gated .vault-gate__video { opacity: 0; }

.vault-gate--full .vault-gate__video {
    position: relative;
    inset: auto;
    flex: none;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #000;
    cursor: pointer;
}

.vault-gate--full .vault-gate__progress,
.vault-gate--full .vault-gate__countdown,
.vault-gate--full .vault-gate__sound { display: none; }

/* Native controls auto-hide and, inside overflow:hidden, only wake when the
   pointer is already on the bar. This strip stays put for the full file. */
.vault-gate__bar {
    display: none;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    background: rgba(12, 12, 14, 0.45);
    color: #fff;
}

.vault-gate--full .vault-gate__bar {
    position: relative;
    z-index: 3;
    display: flex;
    flex: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #161618;
}
.vault-gate--full .vault-gate__bar[hidden] { display: none; }

.vault-gate__bar-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.vault-gate__bar-btn:hover,
.vault-gate__bar-btn:focus-visible { background: rgba(255, 255, 255, 0.12); }

.vault-gate__bar-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.vault-gate__bar-btn[data-vault-gate-mute] {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vault-gate__seek {
    flex: 1 1 auto;
    min-width: 0;
    height: 18px;
    margin: 0;
    accent-color: #db2f49;
    cursor: pointer;
}

.vault-gate__time {
    flex: none;
    min-width: 9.5ch;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.86);
    text-align: right;
}

.vault-gate__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.16);
}

.vault-gate__progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: #db2f49;
}

.vault-gate.is-gated .vault-gate__progress { display: none; }

.vault-gate__sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.vault-gate__sound:hover,
.vault-gate__sound:focus-visible {
    border-color: rgba(255, 255, 255, 0.64);
    background: rgba(0, 0, 0, 0.78);
}

.vault-gate__sound:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.vault-gate.is-gated .vault-gate__sound { display: none; }

.vault-gate__countdown {
    position: absolute;
    left: 14px;
    bottom: 14px;
    min-inline-size: 20ch;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.85);
    visibility: hidden;
}

.vault-gate__countdown.is-ready { visibility: visible; }
.vault-gate.is-gated .vault-gate__countdown { display: none; }

.vault-gate__card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 22px 24px;
    background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.94) 34%);
    color: #fff;
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.vault-gate.is-gated .vault-gate__card {
    transform: translateY(0);
    opacity: 1;
}

.vault-gate__card[hidden] { display: none; }

.vault-gate__card h2 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
}

.vault-gate__sub {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.66);
}

.vault-gate__actions { display: flex; flex-direction: column; gap: 8px; }

.vault-gate__cta {
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: #db2f49;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.vault-gate__link {
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    text-decoration: underline;
    cursor: pointer;
}

.vault-gate__fine {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

/* --- Discover page ------------------------------------------------------- */

.discover-page {
    min-height: 100vh;
    padding: 40px 0 80px;
    background: #0d0d0f;
    color: #f4f4f5;
}

.discover-head { margin-bottom: 26px; }
.discover-head h1 { margin: 0 0 8px; font-size: 34px; color: #fff; }
.discover-head p { margin: 0; color: rgba(244, 244, 245, 0.68); }

.discover-page .vault-rail { margin-top: 34px; }
.discover-section { margin-top: 48px; }
.vault-video-grid--discover { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.discover-page .vault-tile--clip .vault-tile__meta {
    padding-top: 8px;
}

.discover-page .vault-tile--clip .vault-tile__title {
    font-size: 13px;
}

.discover-more { text-align: center; margin-top: 32px; }
.discover-more--clips { margin-bottom: 48px; }

/* Tucks the button up under the rail's scroll padding; under the phone grid
   it keeps normal spacing. */
@media (min-width: 721px) {
    .discover-more--clips { margin-top: -24px; }
}

.discover-more button {
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.discover-empty {
    padding: 60px 20px;
    text-align: center;
    color: rgba(244, 244, 245, 0.6);
}

/* --- Skeletons and motion ------------------------------------------------ */

.vault-tile__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #17171a 30%, #202024 50%, #17171a 70%);
    background-size: 220% 100%;
    animation: vault-skeleton 1.5s linear infinite;
    transition: opacity 0.45s ease;
    z-index: 0;
}

/* The poster used to be the only layer in the frame carrying a z-index, which
   put it above the hover preview and swallowed the Featured badge and the
   duration the moment the image arrived. The stack is spelled out instead. */
.vault-tile__poster { position: relative; z-index: 1; }
.vault-tile__preview { z-index: 2; }
.vault-tile__scrim { z-index: 3; }
.vault-tile__play,
.vault-tile__duration,
.vault-tile__badge { z-index: 4; }

@keyframes vault-skeleton {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

/* Everything below waits for the script to mark a tile ready, so a page with
   no JavaScript still paints the posters and their chrome as normal. */
.vault-js .vault-tile__poster {
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* A badge floating over an empty shimmer reads as a broken tile, so the
   chrome arrives with the image it belongs to rather than ahead of it. */
.vault-js .vault-tile__badge,
.vault-js .vault-tile__duration {
    opacity: 0;
    transition: opacity 0.3s ease 0.12s;
}

.vault-js .vault-tile.is-ready .vault-tile__poster,
.vault-js .vault-tile.is-ready .vault-tile__badge,
.vault-js .vault-tile.is-ready .vault-tile__duration { opacity: 1; }

.vault-js .vault-tile.is-ready .vault-tile__frame::before {
    opacity: 0;
    animation: none;
}

/* Already in the browser cache on a second visit: show it outright rather than
   fading in something that was never missing. */
.vault-js .vault-tile.is-cached .vault-tile__poster,
.vault-js .vault-tile.is-cached .vault-tile__badge,
.vault-js .vault-tile.is-cached .vault-tile__duration,
.vault-js .vault-tile.is-cached .vault-tile__frame::before { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .vault-tile__frame::before,
    .vault-tile__poster,
    .vault-tile__badge,
    .vault-tile__duration,
    .vault-tile__preview,
    .vault-gate__card,
    .vault-gate__blur { animation: none; transition: none; }
    .promo-tile,
    .promo-tile__slide,
    .promo-tile__caption,
    .promo-tile__video { transition: none; }
}

@media (max-width: 720px) {
    .vault-section {
        padding: 52px 0 60px;
        padding-top: max(52px, calc(var(--vault-header-clearance, 64px) + 16px));
    }
    .vault-rail--clips .vault-tile { width: 140px; }
    .vault-rail--clips .vault-rail__pin,
    .vault-rail--clips .promo-tile { width: 140px; }
    .promo-tile__meta { min-height: 42px; padding: 8px 9px 10px; }
    .promo-tile__caption { inset: 8px 9px auto 9px; }
    .promo-tile__headline { font-size: 13px; }
    .vault-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
    .vault-rail__head { align-items: flex-end; }
    .vault-rail__actions { gap: 6px; }
    .vault-rail__all { margin-left: 2px; }
    .discover-head h1 { font-size: 26px; }
}

@media (max-width: 480px) {
    .vault-video-grid { grid-template-columns: 1fr; }
    .vault-rail__page { min-width: 36px; }
    .vault-rail__arrow { width: 34px; height: 34px; }
    .vault-rail--clips .vault-tile { width: min(42vw, 154px); }
    .vault-rail--clips .vault-rail__pin,
    .vault-rail--clips .promo-tile { width: min(42vw, 154px); }
}

/* Long rails are slow to thumb through sideways on a phone, so the creator
   clip rails wrap into two columns there. Desktop keeps the single row. */
@media (max-width: 720px) {
    .vault-rail--grid-mobile .vault-rail__viewport {
        overflow: visible;
        scroll-snap-type: none;
    }
    .vault-rail--grid-mobile .vault-rail__track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        width: auto;
    }
    .vault-rail--grid-mobile .vault-rail__track .vault-tile { width: 100%; }
    /* A long grid skips layout and paint for rows that are off screen. */
    .vault-rail--grid-mobile .vault-rail__track > * {
        content-visibility: auto;
        contain-intrinsic-size: auto 320px;
    }
    .vault-rail--grid-mobile .vault-rail__page,
    .vault-rail--grid-mobile .vault-rail__arrow { display: none; }
}

/* --- Testimonials -------------------------------------------------------- */

/* The heading is deliberately left to inherit .vault-rail__head h3, so this
   rail reads as part of the same page as the Clips and Videos beneath it. */
.vault-rail--testimonials { margin-bottom: 52px; }

/* Burnt-in titles are common in creator uploads, so the overlay only exists
   when an operator actually typed something into it. */
.testimonial-tile__overlay {
    position: absolute;
    inset: auto 10px 10px 10px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

/* The duration chip owns the bottom right corner, so the copy keeps clear of
   it rather than running underneath. */
.testimonial-tile__overlay { padding-right: 44px; }

.testimonial-tile__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.testimonial-tile__role,
.testimonial-tile__caption {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}

.testimonial-tile__stats {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.testimonial-tile__socials {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 1px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

/* Sits above the overlay copy, which is pointer-events: none, so this is the
   only thing in the frame that can take a click besides the tile itself. */
.testimonial-tile__sound {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease;
}

.testimonial-tile__sound:hover,
.testimonial-tile__sound:focus-visible {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.8);
}

.testimonial-tile__sound:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Held back on pointer devices so it does not compete with the picture, and
   left at full strength on touch, where it is the only way to hear the clip
   without opening it. */
@media (hover: hover) {
    .testimonial-tile__sound { opacity: 0.55; }

    .testimonial-tile:hover .testimonial-tile__sound,
    .testimonial-tile__sound:focus-visible,
    .testimonial-tile.is-audible .testimonial-tile__sound { opacity: 1; }
}

.testimonial-tile.is-audible .testimonial-tile__sound {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(0, 0, 0, 0.85);
}

/* A deeper scrim than the creator tiles get: those hang their title outside
   the frame, these carry it over the picture. */
.testimonial-tile .vault-tile__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.78) 100%);
}

.testimonial-tile .vault-tile__hit:disabled { cursor: default; }

.vault-js .testimonial-tile__overlay {
    opacity: 0;
    transition: opacity 0.3s ease 0.12s;
}

.vault-js .testimonial-tile.is-ready .testimonial-tile__overlay { opacity: 1; }
.vault-js .testimonial-tile.is-cached .testimonial-tile__overlay { transition: none; }

/* --- Testimonial playback ------------------------------------------------ */

/* Above the sticky site header, which sits at 9998. Anything below that puts
   the logo and the nav buttons on top of the dialog. */
.testimonial-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 6, 8, 0.88);
    backdrop-filter: blur(6px);
}

.testimonial-modal[hidden] { display: none; }

.testimonial-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, 100%);
    max-height: 100%;
}

/* A row rather than an absolutely positioned corner button: a long speaker
   name then truncates instead of sliding under the close. */
.testimonial-modal__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
}

.testimonial-modal__title {
    margin: 0;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The clips are 9:16, so the height is what runs out first and the width
   follows from it rather than the other way round. */
.testimonial-modal__video {
    width: 100%;
    max-height: calc(100vh - 140px);
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    background: #000;
    object-fit: contain;
}

/* Below the video rather than over it, so it never covers the picture and
   never fights the native controls for the same corner. */
.testimonial-modal__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.testimonial-modal__tools[hidden] { display: none; }

.testimonial-modal__quality-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.testimonial-modal__quality {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.testimonial-modal__quality:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The dark control inherits the page palette, but its popup is drawn by the
   platform and needs telling. */
.testimonial-modal__quality option {
    background: #17171a;
    color: #fff;
}

.testimonial-modal__close {
    flex: 0 0 auto;
    display: grid;
    width: 38px;
    height: 38px;
    margin-left: auto;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.testimonial-modal__close:hover,
.testimonial-modal__close:focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-tile__overlay { transition: none; }
}

@media (max-width: 720px) {
    .testimonial-tile__overlay { inset: auto 8px 8px 8px; padding-right: 40px; gap: 2px; }
    .testimonial-tile__name { font-size: 12.5px; }
    .testimonial-tile__role,
    .testimonial-tile__caption { font-size: 10.5px; -webkit-line-clamp: 1; }
    .testimonial-modal { padding: 14px; }
    .vault-section__head, .vault-section .section-title, .vault-section__subtitle{text-align: center!important;}
}