.vbn-mew-showroom::after {
    background: linear-gradient(90deg, rgba(29, 22, 27, .56) 0%, rgba(29, 22, 27, .3) 44%, rgba(29, 22, 27, 0) 73%);
}

.vbn-mew-showroom .vbn-art-mew .vbn-slab-mew {
    right: 7%;
    height: 76%;
}

body.page-public .pv-hero .vbn-mew-showroom .vbn-pill,
body.page-public .pv-hero .vbn-mew-showroom .vbn-title,
body.page-public .pv-hero .vbn-mew-showroom .vbn-sub {
    color: #fff !important;
    opacity: 1 !important;
}

.hero-slide-active .vbn-mew-showroom .vbn-copy > * {
    animation: none;
    opacity: 1;
}

.vbn-buyback {
    overflow: hidden;
    background: #dcecf0;
    color: #10242a;
}

.vbn-buyback::before {
    position: absolute;
    inset: 0 0 0 58%;
    background: #c7dfe4;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    content: "";
}

.vbn-buyback .vbn-pill { background: #163b43; color: #effcff; }
.vbn-buyback .vbn-title span { color: #157a78; }
.vbn-buyback .vbn-sub { color: #44676b; text-shadow: none; }
.vbn-buyback .vbn-btn { background: #163b43; color: #f2ffff; }
.vbn-buyback-art { width: 47%; }

.vbn-buyback-mark {
    position: absolute;
    right: 3%;
    bottom: -13%;
    color: #afcfd4;
    font: 800 clamp(120px, 19vw, 310px)/1 "Bricolage Grotesque", "Space Grotesk", sans-serif;
    letter-spacing: -.08em;
    opacity: .65;
}

.vbn-buyback-card-a,
.vbn-buyback-card-b {
    position: absolute;
    top: 50%;
    border-radius: 9px;
    box-shadow: 0 26px 48px rgba(27, 69, 74, .24);
}

.vbn-buyback-card-a {
    left: 8%;
    z-index: 1;
    height: 58%;
    transform: translateY(-48%) rotate(-10deg);
}

.vbn-buyback-card-b {
    right: 7%;
    z-index: 2;
    height: 72%;
    border: 0;
    transform: translateY(-51%) rotate(7deg);
}

.vbn-buyback-tag {
    position: absolute;
    z-index: 4;
    right: 34%;
    bottom: 16%;
    padding: 9px 14px;
    border-radius: 999px;
    background: #aaff00;
    color: #102116;
    font: 800 clamp(9px, .8vw, 12px)/1 "Space Grotesk", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-3deg);
}

.vbn-rrv-showroom {
    background: #edf3ee;
}

.vbn-rrv-showroom .vbn-rrv-bg {
    opacity: .14;
    filter: grayscale(.4) contrast(.8);
}

.vbn-rrv-showroom .vbn-rrv-veil {
    background: linear-gradient(90deg, rgba(244, 248, 244, .99) 0%, rgba(244, 248, 244, .93) 48%, rgba(244, 248, 244, .38) 100%);
}

.vbn-rrv-showroom .vbn-title { color: #12251d; text-shadow: none; }
.vbn-rrv-showroom .vbn-sub { color: #51645b; text-shadow: none; }
.vbn-rrv-showroom .vbn-btn { background: #aaff00; color: #14200f; box-shadow: none; }
.vbn-rrv-showroom .vbn-btn-ghost { border-color: #9cac9f; background: #fff; color: #30463a; }
.vbn-rrv-showroom .vbn-rrv-pack { filter: drop-shadow(0 24px 35px rgba(25, 48, 35, .28)); }
.vbn-rrv-showroom .vbn-rrv-slab { filter: drop-shadow(0 20px 30px rgba(25, 48, 35, .2)); }

.vbn-trainer-showroom .vbn-trainer-veil {
    background: linear-gradient(90deg, rgba(247, 251, 251, .97) 0%, rgba(247, 251, 251, .78) 35%, rgba(247, 251, 251, .08) 68%, rgba(247, 251, 251, 0) 100%);
}

.vbn-video-drop {
    overflow: hidden;
    background: #0d0f0e;
    color: #fff;
}

.vbn-video-drop::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 8, 7, .04) 0%, rgba(5, 8, 7, .08) 43%, rgba(5, 8, 7, .58) 61%, rgba(5, 8, 7, .94) 100%);
    content: "";
    pointer-events: none;
}

.vbn-video-loop {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.vbn-video-seam {
    display: none;
}

.vbn-video-drop .vbn-inner { justify-content: flex-end; }
.vbn-video-drop .vbn-copy { width: 43%; max-width: 43%; }
.vbn-video-drop .vbn-pill { background: #f3f5ef; color: #192018; }
.vbn-video-drop .vbn-title { color: #fff; font-size: clamp(38px, 3.5vw, 56px); text-transform: uppercase; letter-spacing: -.035em; }
.vbn-video-drop .vbn-title span { color: #aaff00; }
.vbn-video-drop .vbn-sub { color: #c8ceca; text-shadow: none; }
.vbn-video-drop .vbn-btn { background: #aaff00; color: #172010; }

@keyframes vbnCopyIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes vbnSlabHover {
    0%, 100% { transform: translateY(-50%) rotate(9deg); }
    50% { transform: translateY(calc(-50% - 10px)) rotate(7deg); }
}

@keyframes vbnBuybackSwapA {
    0%, 100% { transform: translateY(-48%) rotate(-10deg); }
    45% { transform: translate(-10px, -52%) rotate(-13deg); }
}

@keyframes vbnBuybackSwapB {
    0%, 100% { transform: translateY(-51%) rotate(7deg); }
    55% { transform: translate(10px, calc(-51% - 8px)) rotate(10deg); }
}

@keyframes vbnOfferPop {
    0%, 72%, 100% { transform: rotate(-3deg) scale(1); }
    80% { transform: rotate(-3deg) scale(1.09); }
}

.hero-slide-active .vbn-copy > * {
    animation: vbnCopyIn .58s cubic-bezier(.2, .78, .25, 1) both;
}

.hero-slide-active .vbn-copy > :nth-child(2) { animation-delay: .07s; }
.hero-slide-active .vbn-copy > :nth-child(3) { animation-delay: .14s; }
.hero-slide-active .vbn-copy > :nth-child(4) { animation-delay: .21s; }
.hero-slide-active .vbn-mew-showroom .vbn-slab-mew { animation: vbnSlabHover 5.2s ease-in-out infinite; }
.hero-slide-active .vbn-buyback-card-a { animation: vbnBuybackSwapA 5.4s ease-in-out infinite; }
.hero-slide-active .vbn-buyback-card-b { animation: vbnBuybackSwapB 5.4s ease-in-out infinite; }
.hero-slide-active .vbn-buyback-tag { animation: vbnOfferPop 4.8s ease-in-out infinite; }

@media (max-width: 820px) {
    .vbn-mew-showroom .vbn-art-mew .vbn-slab-mew { right: 3%; height: clamp(174px, 34vw, 265px); }
    body.page-public .vbn-buyback .vbn-copy { width: 55% !important; max-width: 55% !important; }

    body.page-public .vbn-buyback .vbn-art { width: 45% !important; }

    .vbn-buyback-mark { font-size: 105px; }
    .vbn-buyback-card-a { left: -8%; height: 45%; }
    .vbn-buyback-card-b { right: -9%; height: 61%; }
    .vbn-buyback-tag { right: 24%; bottom: 12%; padding: 6px 8px; font-size: 6px; }
    .vbn-rrv-showroom .vbn-rrv-veil { background: linear-gradient(90deg, rgba(244, 248, 244, .99) 0%, rgba(244, 248, 244, .94) 55%, rgba(244, 248, 244, .34) 100%); }
    .vbn-trainer-showroom .vbn-trainer-veil { background: linear-gradient(90deg, rgba(247, 251, 251, .98) 0%, rgba(247, 251, 251, .88) 48%, rgba(247, 251, 251, .08) 78%, rgba(247, 251, 251, 0) 100%) !important; }
    .vbn-video-loop { width: 100%; object-position: center; }
    .vbn-video-drop::before { background: linear-gradient(90deg, rgba(5, 8, 7, .08) 0%, rgba(5, 8, 7, .25) 31%, rgba(5, 8, 7, .77) 50%, rgba(5, 8, 7, .96) 100%); }
    body.page-public .vbn-video-drop .vbn-inner { justify-content: flex-end !important; }
    body.page-public .vbn-video-drop .vbn-copy { width: 53% !important; max-width: 53% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide-active .vbn-copy > *,
    .hero-slide-active .vbn-mew-showroom .vbn-slab-mew,
    .hero-slide-active .vbn-buyback-card-a,
    .hero-slide-active .vbn-buyback-card-b,
    .hero-slide-active .vbn-buyback-tag { animation: none !important; }
}

/* Cinematic homepage framing. The hero is the environment, not a card sitting
   inside the page. Product sections resume the familiar Vaultr layout below. */
body.page-public .pv-hero {
    width: 100%;
    padding: 0 !important;
    background: #050807;
}

body.page-public .pv-hero .vbn {
    width: 100%;
    max-width: none;
    height: clamp(440px, 32vw, 520px);
    min-height: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0 !important;
}

body.page-public .pv-hero .vbn-inner {
    left: 50%;
    width: min(1680px, 100%);
    padding-right: clamp(36px, 7vw, 120px);
    padding-left: clamp(36px, 7vw, 120px);
    transform: translateX(-50%);
}

body.page-public .vbn-video-drop .vbn-inner { padding-bottom: 44px; }

body.page-public .pv-hero .vbn-copy { max-width: min(620px, 48%); }

body.page-public .pv-hero .vbn-title {
    font-size: clamp(48px, 5.6vw, 94px);
    letter-spacing: -.055em;
    line-height: .92;
}

body.page-public .pv-hero .vbn-sub {
    max-width: 520px;
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.5;
}

body.page-public .pv-hero .vbn-pill {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    letter-spacing: .22em;
}

body.page-public .pv-hero .vbn-pill::before {
    width: 28px;
    height: 1px;
    background: currentColor;
    content: '';
}

body.page-public .pv-hero .vbn-btn { border-radius: 3px; }

body.page-public .hero-dots {
    bottom: 20px;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.page-public .hero-dot { width: 32px; height: 36px; }
body.page-public .hero-dot::before { width: 4px; height: 4px; background: rgba(255, 255, 255, .36); }
body.page-public .hero-dot-active::before { width: 18px; background: #fff; box-shadow: none; }
body.page-public .hero-pause { width: 34px; height: 36px; }

body.page-public .home-just-pulled {
    position: relative;
    z-index: 2;
    padding-top: clamp(22px, 2.5vw, 38px) !important;
    /* No background. #050807 here against the body's rgb(7,9,13) drew a hard
       horizontal seam across the page wherever this section started and ended —
       the page looked like it changed colour mid-scroll. Transparent lets the
       body's own gradient run straight through. */
}

body.page-public .home-just-pulled .jp-value {
    display: none !important;
}

body.page-public .mp-section:has(> .mp-section-clean) {
    padding: clamp(46px, 5vw, 76px) 0 !important;
    border-top: 0 !important;
}

body.page-public .home-process::before { display: none !important; }

body.page-public .mp-section-clean .mp-header {
    align-items: center !important;
    margin-bottom: clamp(24px, 3vw, 40px) !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}

body.page-public .mp-section-clean .mp-title {
    margin: 0 !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
}

body.page-public .mp-section-clean .mp-viewall {
    min-height: 42px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
}

body.page-public .mp-section-clean .mp-viewall::after {
    display: none !important;
}

body.page-public .mp-section-clean .mp-shelf-wrap {
    padding: 0 !important;
    overflow: visible !important;
}

body.page-public .mp-section-clean .mp-strip {
    gap: clamp(10px, 1.2vw, 18px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Phones: give the shelf a lead-in on the left so the first pack isn't jammed
   against the screen edge at rest. Same expression as the gap above, so the
   space before Starter always equals the space between Starter and Pro.
   This is padding on the scroll container, not a spacer element — it scrolls
   out of view as soon as you swipe, so packs are still free to run to the
   edge mid-scroll. (Several lower-specificity rules elsewhere try to set this
   padding; this selector is the one that actually wins the cascade.)
   scroll-padding-left has to match: the shelf is `scroll-snap-type: x mandatory`,
   so on load the browser snapped card 1's start edge to the snapport and parked
   scrollLeft at exactly the padding width — silently cancelling the inset. Moving
   the snapport in by the same amount makes the rest position scrollLeft:0. */
@media (max-width: 900px) {
    body.page-public .mp-section-clean .mp-strip {
        padding-left: clamp(10px, 1.2vw, 18px) !important;
        scroll-padding-left: clamp(10px, 1.2vw, 18px) !important;
    }
}

body.page-public .mp-section-clean .mp-card {
    min-height: 372px !important;
    /* Full-bleed: the pack scene IS the card, rather than an inset panel with
       the tier art boxed inside it and dead space under the name. */
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    /* The stage is absolutely positioned, so the body is the only in-flow child
       and would otherwise stretch the full height, stranding the pack name at
       the top on top of the art. Pin the body to the bottom as one block. */
    justify-content: flex-end !important;
    border: 0 !important;
    border-radius: 14px !important;
    /* Opaque page-black, not a 1.4% white wash. The card is the only thing that
       clips the corner, and along its antialiased curve the browser blends the
       card's own background against the page. With a translucent background
       that blend let the stage's wash gradient show through as a faint pale arc
       hugging the bottom corners (founder catch, 2026-08-18). An opaque backing
       the same colour as the page makes the corner edge invisible: same colour
       either side of the curve, nothing to see. */
    background: #060a09 !important;
    box-shadow: none !important;
}

body.page-public .mp-section-clean .mp-card::before,
body.page-public .mp-section-clean .mp-card::after,
body.page-public .mp-section-clean .mp-card-accent,
body.page-public .mp-section-clean .mp-card-tier-row,
body.page-public .mp-section-clean .mp-ribbon-slot,
body.page-public .mp-section-clean .mp-card-ring,
body.page-public .mp-section-clean .mp-card-rays,
body.page-public .mp-section-clean .mp-card-glow {
    display: none !important;
}

body.page-public .mp-section-clean .mp-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, .03) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .24) !important;
}

body.page-public .mp-section-clean .mp-card-stage {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    /* No radius and no clip on the stage: the CARD already clips to its 14px
       corners (overflow:hidden), so a second rounded clip on the same curve is
       redundant -- and it is what put a bright ring in the bottom corners. Two
       independent antialiased corner clips never coincide exactly, and in the
       sub-pixel gap between them the lighter page-side backdrop showed through
       (measured: luminance 48-55 at the corner pixel vs ~20 inside; founder
       catch 2026-08-18). One clip, one edge, no seam. */
    border-radius: 0 !important;
    overflow: visible;
    isolation: isolate;
    /* The sleeve's own scene sits behind the pack, under a dark wash so the
       card still reads as black and the tier tint still shows through. */
    background:
        radial-gradient(ellipse at 50% 53%, rgba(var(--tc), .105), transparent 61%),
        var(--pack-bg) center/cover no-repeat !important;
}

body.page-public .mp-section-clean .mp-card-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    display: block !important;
    background: linear-gradient(180deg,
        rgba(8, 9, 12, .34) 0%,
        rgba(8, 9, 12, .20) 38%,
        rgba(8, 9, 12, .74) 76%,
        rgba(8, 9, 12, .95) 100%);
}

body.page-public .mp-section-clean .mp-card-stage::after {
    display: none !important;
}

/* Pack floats above the wash. Only z-index - the pack is absolutely
   positioned, and setting position:relative on it drops it back into flow
   and off centre. */
body.page-public .mp-section-clean .mp-card-stage .css-pack { z-index: 1; }

body.page-public .mp-section-clean .mp-card .css-pack {
    /* 43%, was 40%: on hover the pack grows 1.34 -> 1.38 and its top crimp and
       drop-shadow were pushing past the card's top edge, where the stage's
       overflow:hidden sliced them flat (founder catch, 2026-08-18). A little
       more headroom at rest keeps the grown pack fully inside. */
    top: 43% !important;
    transform: translate(-50%, -50%) scale(1.34) !important;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .34)) !important;
}

body.page-public .mp-section-clean .mp-card:hover .css-pack {
    /* No upward lift on hover -- the scale-up already reads as "comes forward",
       and the 5px lift was the part that carried the crimp into the clip edge. */
    transform: translate(-50%, -50%) scale(1.38) !important;
}

body.page-public .mp-section-clean .mp-card-body {
    position: relative;
    z-index: 3;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 70px 16px 16px !important;
    border: 0 !important;
}

/* The scarcity chip is absolutely positioned elsewhere in the cascade, which
   was harmless when it sat over the old inset stage but now lands on top of the
   pack name in the bottom-pinned body. Put it back in the column. */
body.page-public .mp-section-clean .mp-scarcity {
    position: static !important;
    order: 0 !important;
    min-height: 0 !important;
    margin: -2px 0 6px !important;
}

body.page-public .mp-section-clean .mp-card-name {
    min-height: 0 !important;
    margin: 0 0 2px !important;
    line-height: 1.15 !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: clamp(13px, .9vw, 16px) !important;
    font-weight: 650 !important;
}

body.page-public .mp-section-clean .mp-card-bottom {
    padding-top: 0 !important;
    border: 0 !important;
    /* Align the price row to the bottom so the big price doesn't float in a
       taller (RIP-button-height) row, which added dead space above it. */
    align-items: end !important;
}

body.page-public .mp-section-clean .mp-card-price {
    font-size: clamp(26px, 2.25vw, 38px) !important;
    color: #fff !important;
}

body.page-public .mp-section-clean .mp-card-cta {
    min-width: 76px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #090b0a !important;
}

body.page-public .mp-section-clean .mp-shelf-arrow {
    display: none !important;
}

@media (max-width: 820px) {
    body.page-public .mp-section-clean .mp-header { padding-inline: 0 !important; margin-inline: 0 !important; }
    body.page-public .mp-section-clean .mp-card {
        min-height: 268px !important;
        padding: 0 !important;
    }
    body.page-public .mp-section-clean .mp-card-body {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        min-height: 0 !important;
        padding: 46px 12px 12px !important;
    }
    /* Name sits flush on top of the price, and the pair top-aligns with the RIP
       button (founder ask, 2026-08-18). The bottom row is a [price | button]
       grid with align-items:center, and the button (min-height 44px) is far
       taller than the price, so the price floated mid-row with ~20px of dead
       air between it and the name above. Making the body a grid lets the name
       and price stack in one column that starts at the button's top edge, so
       "Starter Pack" and "RIP" share a top line and "$25" tucks in underneath.
       The scarcity badge, when present, keeps its slot in the same column. */
    body.page-public .mp-section-clean .mp-card-body {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        align-items: start !important;
        column-gap: 8px;
    }
    body.page-public .mp-section-clean .mp-card-name {
        grid-column: 1; grid-row: 1;
        margin: 0 !important; align-self: start;
    }
    body.page-public .mp-section-clean .mp-scarcity { grid-column: 1; grid-row: 2; }
    body.page-public .mp-section-clean .mp-card-bottom {
        display: contents !important;
    }
    body.page-public .mp-section-clean .mp-card-price {
        grid-column: 1; grid-row: 3; align-self: start;
        margin-top: 2px !important;
    }
    body.page-public .mp-section-clean .mp-card-cta {
        grid-column: 2; grid-row: 1 / span 3;
        align-self: start; justify-self: end;
    }

    /* Price + RIP must survive five digits. The desktop price floor is 26px,
       which on a ~190px-wide mobile card leaves "$2,500" and the button wider
       than the card, so the button pushed out past the edge. Let the price
       scale with the viewport and let both items stop refusing to shrink. */
    body.page-public .mp-section-clean .mp-card-bottom {
        margin-top: 0 !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
    body.page-public .mp-section-clean .mp-card-price {
        font-size: clamp(16px, 5.1vw, 26px) !important;
        letter-spacing: -.04em !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }
    body.page-public .mp-section-clean .mp-card-cta {
        min-width: 0 !important;
        padding: 0 11px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    body.page-public .mp-section-clean .mp-card-stage {
        height: auto !important;
        min-height: 0 !important;
    }
    body.page-public .mp-section-clean .mp-card .css-pack {
        transform: translate(-50%, -50%) scale(1.06) !important;
    }
    body.page-public .mp-section-clean .mp-card:hover .css-pack {
        transform: translate(-50%, -50%) scale(1.09) !important;
    }
}

@media (max-width: 820px) {
    body.page-public .pv-hero .vbn {
        height: auto;
        min-height: min(620px, calc(100svh - 150px)) !important;
    }
    body.page-public .pv-hero .vbn-inner {
        left: 0;
        width: 100%;
        padding: 46px 24px 80px !important;
        transform: none;
    }
    body.page-public .pv-hero .vbn-copy { width: 62% !important; max-width: 62% !important; }
    body.page-public .pv-hero .vbn-title { font-size: clamp(34px, 10.5vw, 58px) !important; }
    body.page-public .hero-dots { bottom: 15px; }
}

@media (max-width: 520px) {
    body.page-public .pv-hero .vbn { min-height: 520px !important; }
    body.page-public .pv-hero .vbn-inner { padding: 38px 20px 72px !important; }
    body.page-public .pv-hero .vbn-copy { width: 66% !important; max-width: 66% !important; }
    body.page-public .pv-hero .vbn-title { font-size: clamp(31px, 10vw, 43px) !important; }
    body.page-public .pv-hero .vbn-pill { font-size: 9px; letter-spacing: .16em; }
    /* Per-slide sizing: the composed groups read small at one global scale,
       so each slide gets its own. And on the reveal slide the two scans sat
       almost fully behind the pack — spread them out so they're visible. */
    body.page-public .pv-hero #heroSlide3 .vbn-art { transform: translateY(-50%) scale(0.78) !important; }
    body.page-public .pv-hero #heroSlide8 .vbn-art { transform: translateY(-50%) scale(0.76) !important; }
    body.page-public .pv-hero #heroSlide6 .vbn-art { transform: translateY(-50%) scale(0.74) !important; }
    /* Starter + buyback slides: same treatment as the reveal slide — spread
       the scans out from behind the pack and keep them inside the frame.
       Offsets are in the art group's own coordinate space (pre-scale), which
       is why they look small relative to the 390px slide. */
    body.page-public .pv-hero #heroSlide4 .vbn-copy { width: 54% !important; max-width: 54% !important; }
    body.page-public .pv-hero #heroSlide8 .vbn-copy { width: 54% !important; max-width: 54% !important; }
    body.page-public .pv-hero #heroSlide6 .vbn-copy { width: 52% !important; max-width: 52% !important; }
    /* Lone Mew slab is sized by its own height rule, not the group scale. */
    body.page-public .pv-hero .vbn .vbn-slab-mew {
        height: 200px !important; width: auto !important;
        right: 4% !important;
    }
    /* ── Symmetric art arrangement (Courtyard-style) ──────────────────────
       Pack centred in the art group with one slab flanking each side, tucked
       ~25px behind it and angled outward. Offsets are computed in each
       group's own pre-scale coordinate space and the group is widened to fit
       all three, with the scale trimmed so the row still clears the copy. */

    /* Starter — pack 166w, slabs 88/90w, group widened to 300 */
    body.page-public .pv-hero #heroSlide4 .vbn-copy { width: 42% !important; max-width: 42% !important; }
    body.page-public .pv-hero #heroSlide4 .vbn-art { width: 258px !important; transform: translateY(-50%) scale(0.78) !important; }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-slab-a {
        left: 3px !important; top: 125px !important; z-index: 2 !important;
        transform: translateY(-50%) rotate(-9deg) !important;
    }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-slab-b {
        left: 167px !important; top: 125px !important; z-index: 2 !important;
        transform: translateY(-50%) rotate(9deg) !important;
    }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-pack,
    body.page-public .pv-hero #heroSlide4 .vbn-starter-shimmer {
        left: 129px !important; top: 125px !important;   /* centre of the 258px group */
    }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-pack { z-index: 4 !important; }

    /* Sell it back — pack 177w, cards 85/91w, group 310, scale trimmed to fit */
    body.page-public .pv-hero #heroSlide8 .vbn-copy { width: 42% !important; max-width: 42% !important; }
    body.page-public .pv-hero #heroSlide8 .vbn-art { width: 262px !important; transform: translateY(-50%) scale(0.76) !important; }
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-card-a {
        left: 3px !important; top: 125px !important; z-index: 1 !important;
        transform: translateY(-50%) rotate(-9deg) !important;
    }
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-card-b {
        left: 175px !important; top: 125px !important; z-index: 1 !important;
        transform: translateY(-50%) rotate(9deg) !important;
    }
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-pack { left: 131px !important; z-index: 3 !important; }
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-foil { left: 126px !important; }
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-tag  { left: 127px !important; }

    /* Rip. Reveal. Vault. — pack 138w, slabs 81w, group 260, scale 0.70 */
    body.page-public .pv-hero #heroSlide6 .vbn-copy { width: 42% !important; max-width: 42% !important; }
    body.page-public .pv-hero #heroSlide6 .vbn-art { width: 226px !important; transform: translateY(-50%) scale(0.88) !important; }
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-slab-a {
        left: 3px !important; top: 125px !important; z-index: 3 !important;
        transform: translateY(-50%) rotate(-9deg) !important;
    }
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-slab-b {
        left: 151px !important; top: 125px !important; z-index: 3 !important;
        transform: translateY(-50%) rotate(9deg) !important;
    }
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-pack,
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-foil { left: 113px !important; }
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-pack { z-index: 6 !important; }

    /* Longest copy sits in the narrowest column on these two — ease the type
       so the headline holds 3 lines instead of 4. */
    body.page-public .pv-hero #heroSlide4 .vbn-title,
    body.page-public .pv-hero #heroSlide8 .vbn-title,
    body.page-public .pv-hero #heroSlide6 .vbn-title { font-size: 17px !important; line-height: 1.12 !important; }
    body.page-public .pv-hero #heroSlide4 .vbn-sub,
    body.page-public .pv-hero #heroSlide8 .vbn-sub,
    body.page-public .pv-hero #heroSlide6 .vbn-sub { font-size: 10.5px !important; line-height: 1.32 !important; }
    /* Pill buttons and less chrome, like the reference. */
    body.page-public .pv-hero .vbn .vbn-btn { border-radius: 999px !important; padding: 8px 16px !important; }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-fine { display: none !important; }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-code { font-size: 10.5px !important; margin-top: 8px !important; }

    /* ── Consistent pack size across banners ──────────────────────────────
       Packs measured 190 / 167 / 147px tall (89% / 78% / 69% of the banner).
       Heights are set in each group's own coordinate space, so the value is
       target/scale: 0.76 -> 221, 0.88 -> 191, and the composite art box is
       sized so its baked pack (86% of canvas) lands on the same number. */
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-pack,
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-foil {
        height: 197px !important; width: auto !important;
    }
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-card-a,
    body.page-public .pv-hero #heroSlide8 .vbn-buyback-card-b {
        height: 130px !important; width: auto !important;
    }
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-pack,
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-foil {
        height: 170px !important; width: auto !important;
    }
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-slab-a,
    body.page-public .pv-hero #heroSlide6 .vbn-rrv-slab-b {
        height: 112px !important; width: auto !important;
    }
    body.page-public .pv-hero #heroSlide4 .vbn-starter-art {
        height: 202px !important; width: 224px !important;
        top: 50% !important; right: 0 !important;
        transform: translateY(-50%) !important;
    }

    body.page-public .hero-dot { width: 24px; }
    body.page-public .hero-pause { width: 28px; }
}

body.page-public .pv-hero #heroSlide3 .vbn-copy {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

body.page-public .pv-hero #heroSlide3.hero-slide-active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body.page-public .pv-hero #heroSlide3 .vbn-copy > :not(.vbn-btn) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.vbn-starter-promo {
    overflow: hidden;
    background: #edf6f0;
    color: #0d3022;
}

.vbn-starter-promo::before {
    position: absolute;
    inset: 0 0 0 56%;
    z-index: 0;
    background: #d9ebe0;
    content: "";
}

.vbn-starter-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(12, 57, 37, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 57, 37, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
    mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.vbn-starter-promo .vbn-inner { z-index: 2; }
.vbn-starter-promo .vbn-copy { width: 48%; }
.vbn-starter-promo .vbn-pill { color: #157046; }
.vbn-starter-promo .vbn-title { color: #0b2d20; text-shadow: none; }
.vbn-starter-highlight { color: #1fad5e; }
.vbn-starter-promo .vbn-sub { max-width: 470px; color: #385b4b; text-shadow: none; }

.vbn-starter-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.vbn-starter-promo .vbn-btn {
    background: #0c3826;
    color: #fff;
}

.vbn-starter-code {
    color: #11663f;
    font: 800 clamp(13px, 1vw, 17px)/1 "Space Grotesk", sans-serif;
    letter-spacing: .035em;
}

.vbn-starter-code small {
    margin-right: 6px;
    color: #6a8376;
    font: 700 9px/1 Menlo, monospace;
    letter-spacing: .16em;
}

.vbn-starter-fine {
    margin-top: 18px;
    color: #688074;
    font: 700 11px/1.3 "Space Grotesk", sans-serif;
}

.vbn-starter-art {
    width: 47%;
}

.vbn-starter-pack,
.vbn-starter-slab {
    position: absolute;
    top: 50%;
    filter: drop-shadow(0 30px 36px rgba(24, 65, 43, .25));
}

.vbn-starter-pack {
    left: 61%;
    z-index: 4;
    height: 88%;
    transform: translate(-50%, -50%) rotate(2deg);
}

.vbn-starter-shimmer {
    position: absolute;
    top: 50%;
    left: 61%;
    z-index: 5;
    height: 88%;
    aspect-ratio: 1054 / 1492;
    transform: translate(-50%, -50%) rotate(2deg);
    pointer-events: none;
    -webkit-mask: url('/static/img/pack-starter-mask-v1.webp?v=1') center/contain no-repeat;
    mask: url('/static/img/pack-starter-mask-v1.webp?v=1') center/contain no-repeat;
    background: linear-gradient(112deg, transparent 30%, rgba(215, 243, 255, .05) 41%, rgba(255, 255, 255, .76) 49%, rgba(194, 229, 255, .25) 55%, transparent 68%);
    background-size: 280% 100%;
    background-position: 145% 0;
    mix-blend-mode: screen;
    opacity: .72;
}

.vbn-starter-slab { height: 55%; z-index: 2; }
.vbn-starter-slab-a { left: 16%; transform: translate(-50%, -48%) rotate(-13deg); }
.vbn-starter-slab-b { right: -5%; transform: translateY(-52%) rotate(12deg); }

.hero-slide-active .vbn-starter-pack,
.hero-slide-active .vbn-starter-shimmer {
    animation: vbnStarterFloat 5.6s ease-in-out infinite;
}

.hero-slide-active .vbn-starter-shimmer {
    animation: vbnStarterFloat 5.6s ease-in-out infinite, vbnStarterShimmer 4.8s cubic-bezier(.3, .05, .2, 1) infinite;
}

@keyframes vbnStarterFloat {
    0%, 100% { transform: translate(-50%, -50%) rotate(2deg); }
    50% { transform: translate(-50%, calc(-50% - 8px)) rotate(1deg); }
}

@keyframes vbnStarterShimmer {
    0%, 16% { background-position: 145% 0; opacity: 0; }
    24% { opacity: .72; }
    48% { background-position: -45% 0; opacity: .58; }
    56%, 100% { background-position: -45% 0; opacity: 0; }
}

.vbn-rrv-showroom {
    background: #070a09;
    color: #fff;
}

.vbn-rrv-showroom .vbn-rrv-bg {
    opacity: .46;
    filter: grayscale(.5) contrast(1.18) brightness(.72);
}

.vbn-rrv-showroom .vbn-rrv-veil {
    background: linear-gradient(90deg, #070908 0%, rgba(7, 9, 8, .97) 34%, rgba(7, 9, 8, .6) 58%, rgba(7, 9, 8, .08) 100%);
}

.vbn-rrv-showroom .vbn-pill { color: #b6c3bd; }
.vbn-rrv-showroom .vbn-title { color: #fff; text-shadow: 0 3px 24px rgba(0, 0, 0, .55); }
.vbn-rrv-showroom .vbn-sub { color: #d0d8d4; text-shadow: none; }
.vbn-rrv-showroom .vbn-btn { background: #fff; color: #101411; box-shadow: none; }
.vbn-rrv-showroom .vbn-btn-ghost { border: 1px solid #707874; background: rgba(255, 255, 255, .04); color: #fff; }
.vbn-rrv-showroom .vbn-rrv-pack {
    height: 88%;
    transform-origin: 50% 88%;
    transform-style: preserve-3d;
    filter: brightness(1.05) contrast(1.08) drop-shadow(0 36px 38px rgba(0, 0, 0, .72)) drop-shadow(0 8px 12px rgba(0, 0, 0, .38));
}

@media (max-width: 820px) {
    body.page-public .vbn-starter-promo .vbn-copy { width: 58% !important; max-width: 58% !important; }
    .vbn-starter-promo::before { left: 61%; }
    .vbn-starter-art { width: 42%; }
    .vbn-starter-pack,
    .vbn-starter-shimmer { left: 58%; height: clamp(280px, 56vw, 430px); }
    .vbn-starter-slab { height: clamp(135px, 27vw, 210px); }
    .vbn-starter-actions { align-items: flex-start; flex-direction: column; gap: 11px; }
    .vbn-starter-fine { margin-top: 12px; font-size: 9px; }
    .vbn-rrv-showroom .vbn-copy { width: 52% !important; max-width: 52% !important; }
    .vbn-rrv-showroom .vbn-rrv-art { width: 48%; }
}

@media (max-width: 520px) {
    .vbn-starter-promo .vbn-sub { font-size: 11px; }
    .vbn-starter-code { font-size: 11px; }
    .vbn-starter-code small { display: none; }
    .vbn-starter-pack,
    .vbn-starter-shimmer { left: 62%; height: 300px; }
    .vbn-starter-slab-a { left: 5%; }
    .vbn-starter-slab-b { right: -30%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide-active .vbn-starter-pack,
    .hero-slide-active .vbn-starter-shimmer { animation: none !important; }
}

/* Cohesive Vaultr campaign system. */
body.page-public .pv-hero {
    padding: 14px 18px 0 !important;
}

body.page-public .pv-hero .vbn-campaign {
    height: clamp(430px, 32vw, 540px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
}

body.page-public .pv-hero .vbn-campaign .vbn-inner {
    padding-right: clamp(42px, 6vw, 104px);
    padding-left: clamp(42px, 6vw, 104px);
}

body.page-public .pv-hero .vbn-campaign .vbn-copy {
    width: min(520px, 43%);
    max-width: min(520px, 43%);
}

body.page-public .pv-hero .vbn-campaign .vbn-title {
    font-size: clamp(42px, 4vw, 66px);
    line-height: .98;
    letter-spacing: -.045em;
}

body.page-public .pv-hero .vbn-campaign .vbn-sub {
    max-width: 440px;
    margin-bottom: 24px;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.4;
}

body.page-public .pv-hero .vbn-campaign .vbn-pill {
    gap: 10px;
    margin-bottom: 20px;
    font: 700 clamp(10px, .75vw, 12px)/1 Menlo, monospace;
    letter-spacing: .16em;
}

body.page-public .pv-hero .vbn-campaign .vbn-pill::before {
    width: 22px;
}

body.page-public .pv-hero .vbn-campaign .vbn-btn {
    gap: 18px;
    min-height: 54px;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

body.page-public .pv-hero .vbn-campaign:hover .vbn-btn {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}

body.page-public .pv-hero .vbn-mew-production::after {
    background: linear-gradient(90deg, rgba(23, 17, 22, .76) 0%, rgba(23, 17, 22, .48) 44%, rgba(23, 17, 22, .03) 70%) !important;
}

body.page-public .pv-hero .vbn-mew-production {
    border: 0;
}

body.page-public .pv-hero .vbn-mew-production .vbn-copy {
    width: min(820px, 58%);
    max-width: min(820px, 58%);
}

body.page-public .pv-hero .vbn-mew-production .vbn-title {
    font-size: clamp(48px, 5vw, 86px);
    line-height: 1;
}

body.page-public .pv-hero .vbn-mew-production .vbn-pill {
    padding: 11px 20px;
    border-radius: 999px;
    background: #c5f24d;
    color: #16220f !important;
    letter-spacing: .14em;
}

body.page-public .pv-hero .vbn-mew-production .vbn-pill::before { display: none; }

#heroSlide3 .vbn-mew-production .vbn-pill {
    color: #16220f !important;
    -webkit-text-fill-color: #16220f !important;
}

#heroSlide3 .vbn-mew-production .vbn-hl-pink {
    color: #f9a0cf !important;
    -webkit-text-fill-color: #f9a0cf !important;
}

body.page-public .pv-hero .vbn-mew-production .vbn-sub {
    max-width: 700px;
    font-size: clamp(15px, 1.15vw, 20px);
}

body.page-public .pv-hero .vbn-mew-production .vbn-btn {
    min-height: 54px;
    padding: 15px 26px;
    border-radius: 12px !important;
    background: #fff;
    color: #111714;
}

body.page-public .pv-hero .vbn-mew-production .vbn-art-mew {
    width: 35%;
    max-width: 540px;
}

body.page-public .pv-hero .vbn-mew-production .vbn-slab-mew {
    right: 8%;
    height: 78%;
}

.vbn-starter-promo {
    background: #07110e url('/static/img/banners/starter-vault-conservatory-v1.webp') center/cover no-repeat;
}

.vbn-starter-promo::before {
    display: block;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 10, 8, .95) 0%, rgba(3, 10, 8, .84) 38%, rgba(3, 10, 8, .18) 65%, rgba(3, 10, 8, .06) 100%);
}
.vbn-starter-grid { display: none; }
.vbn-starter-promo .vbn-pill { color: #bce8d3; }
.vbn-starter-promo .vbn-title { color: #fff; text-shadow: 0 3px 24px rgba(0, 0, 0, .42); }
.vbn-starter-promo .vbn-sub { color: rgba(255, 255, 255, .84); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.vbn-starter-promo .vbn-btn { border-color: #fff; background: #fff; color: #08120e; }
.vbn-starter-code { color: #fff; }
.vbn-starter-code small { color: #9ab4a8; }
.vbn-starter-fine { color: rgba(255, 255, 255, .58); }
.vbn-starter-pack { left: 58%; height: 94%; filter: saturate(1.08) contrast(1.04) drop-shadow(0 34px 42px rgba(0, 0, 0, .46)); }
.vbn-starter-shimmer { left: 58%; height: 94%; }
.vbn-starter-slab { height: 61%; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .42)); }

.vbn-buyback {
    background:
        radial-gradient(circle at 77% 43%, rgba(112, 212, 211, .5), transparent 34%),
        linear-gradient(120deg, #e7f6f7 0%, #c6e8eb 50%, #82c5ca 100%);
}

.vbn-buyback::before {
    inset: 0;
    clip-path: none;
    background-image:
        linear-gradient(rgba(16, 65, 70, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 65, 70, .055) 1px, transparent 1px);
    background-size: 44px 44px;
}

.vbn-buyback-mark { right: 1%; bottom: -17%; opacity: .3; }
.vbn-buyback-card-a { left: 2%; height: 55%; }
.vbn-buyback-card-b { right: -2%; height: 62%; }

.vbn-buyback-pack {
    position: absolute;
    top: 50%;
    left: 52%;
    z-index: 3;
    height: 86%;
    transform: translate(-50%, -50%) perspective(1000px) rotateY(-4deg) rotateX(1.5deg);
    transform-origin: 50% 88%;
    transform-style: preserve-3d;
    filter: saturate(1.1) contrast(1.05) drop-shadow(0 34px 34px rgba(13, 54, 60, .4)) drop-shadow(0 8px 12px rgba(12, 35, 42, .24));
}

.vbn-pack-foil {
    position: absolute;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: background-position, opacity, transform;
    background:
        linear-gradient(108deg, transparent 40%, rgba(166, 225, 255, .08) 44%, rgba(255, 255, 255, .86) 48%, rgba(191, 232, 255, .22) 51%, transparent 56%),
        linear-gradient(82deg, transparent 13%, rgba(255, 255, 255, .12) 16%, transparent 20%, transparent 78%, rgba(255, 255, 255, .1) 82%, transparent 86%);
    background-position: 155% 0, 0 0;
    background-size: 285% 100%, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0;
}

.vbn-buyback-foil {
    top: 50%;
    left: 52%;
    z-index: 4;
    height: 86%;
    aspect-ratio: 1640 / 2314;
    transform: translate(-50%, -50%) perspective(1000px) rotateY(-4deg) rotateX(1.5deg);
    transform-origin: 50% 88%;
    transform-style: preserve-3d;
    -webkit-mask: url('/static/img/pack-pro-reskin-v8.webp?v=12') center/contain no-repeat;
    mask: url('/static/img/pack-pro-reskin-v8.webp?v=12') center/contain no-repeat;
}

.vbn-rrv-foil {
    top: 50%;
    left: 50%;
    z-index: 7;
    height: 88%;
    aspect-ratio: 1640 / 2314;
    transform: translate(-50%, -50%) perspective(1100px) rotateY(3deg) rotateX(1deg);
    transform-origin: 50% 88%;
    transform-style: preserve-3d;
    -webkit-mask: url('/static/img/pack-legend-reskin-v8.webp?v=12') center/contain no-repeat;
    mask: url('/static/img/pack-legend-reskin-v8.webp?v=12') center/contain no-repeat;
    background:
        linear-gradient(112deg, transparent 40%, rgba(205, 215, 226, .04) 44%, rgba(255, 255, 255, .82) 48%, rgba(210, 224, 238, .16) 51%, transparent 56%),
        linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 8%, transparent 91%, rgba(255, 255, 255, .12));
    background-position: 155% 0, 0 0;
    background-size: 285% 100%, 100% 100%;
}

.hero-slide-active .vbn-buyback-foil {
    animation: vbnProPackDepth 6.4s ease-in-out infinite, vbnProFoilSweep 4.9s cubic-bezier(.3, .05, .2, 1) infinite;
}

.hero-slide-active .vbn-rrv-foil {
    animation: vbnLegendPackDepth 6.8s ease-in-out infinite, vbnLegendFoilSweep 5.6s cubic-bezier(.3, .05, .2, 1) infinite;
}

.hero-slide-active .vbn-buyback-pack { animation: vbnProPackDepth 6.4s ease-in-out infinite; }
.hero-slide-active .vbn-rrv-pack { animation: vbnLegendPackDepth 6.8s ease-in-out infinite; }

.vbn-buyback-art::after,
.vbn-rrv-art::after {
    position: absolute;
    left: 50%;
    bottom: 7%;
    z-index: 0;
    width: 42%;
    height: 8%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(12, 32, 38, .42), rgba(12, 32, 38, 0) 70%);
    filter: blur(10px);
    content: "";
    transform: translateX(-50%);
}

.vbn-rrv-art::after {
    bottom: 6%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 70%);
}

@keyframes vbnProPackDepth {
    0%, 100% { transform: translate(-50%, -50%) perspective(1000px) rotateY(-4deg) rotateX(1.5deg); }
    50% { transform: translate(-50%, calc(-50% - 7px)) perspective(1000px) rotateY(4deg) rotateX(-.8deg); }
}

@keyframes vbnLegendPackDepth {
    0%, 100% { transform: translate(-50%, -50%) perspective(1100px) rotateY(3deg) rotateX(1deg); }
    50% { transform: translate(-50%, calc(-50% - 7px)) perspective(1100px) rotateY(-3.5deg) rotateX(-.7deg); }
}

@keyframes vbnProFoilSweep {
    0%, 13% { background-position: 155% 0, 0 0; opacity: 0; }
    22% { opacity: .82; }
    48% { background-position: -48% 0, 0 0; opacity: .62; }
    57%, 100% { background-position: -48% 0, 0 0; opacity: 0; }
}

@keyframes vbnLegendFoilSweep {
    0%, 22% { background-position: 155% 0, 0 0; opacity: 0; }
    30% { opacity: .72; }
    54% { background-position: -48% 0, 0 0; opacity: .54; }
    64%, 100% { background-position: -48% 0, 0 0; opacity: 0; }
}

.vbn-buyback-tag { right: 10%; bottom: 15%; }

.vbn-rrv-showroom .vbn-rrv-veil {
    background: linear-gradient(90deg, rgba(5, 7, 6, .96) 0%, rgba(5, 7, 6, .8) 38%, rgba(5, 7, 6, .18) 68%, rgba(5, 7, 6, .06) 100%);
}

.vbn-video-drop::before {
    background: linear-gradient(90deg, rgba(4, 7, 6, .9) 0%, rgba(4, 7, 6, .63) 37%, rgba(4, 7, 6, .08) 68%, rgba(4, 7, 6, .04) 100%);
}

.vbn-video-drop .vbn-inner { justify-content: flex-start; }
.vbn-video-drop .vbn-copy { width: min(520px, 43%); max-width: min(520px, 43%); }
.vbn-video-drop .vbn-title { font-size: clamp(42px, 4vw, 66px); text-transform: none; }

.vbn-trainer-showroom .vbn-trainer-veil {
    background: linear-gradient(90deg, rgba(246, 251, 250, .97) 0%, rgba(246, 251, 250, .82) 35%, rgba(246, 251, 250, .12) 64%, transparent 76%) !important;
}

@media (max-width: 820px) {
    body.page-public .pv-hero { padding: 8px 8px 0 !important; }
    body.page-public .pv-hero .vbn-campaign {
        min-height: 500px !important;
        border-radius: 16px !important;
    }
    body.page-public .pv-hero .vbn-campaign .vbn-inner { padding: 34px 22px 70px !important; }
    body.page-public .pv-hero .vbn-campaign .vbn-copy {
        width: 56% !important;
        max-width: 56% !important;
    }
    body.page-public .pv-hero .vbn-campaign .vbn-title { font-size: clamp(30px, 8vw, 46px) !important; }
    body.page-public .pv-hero .vbn-campaign .vbn-sub { font-size: 12px; }
    body.page-public .pv-hero .vbn-campaign .vbn-btn { min-height: 44px; padding: 11px 16px; border-radius: 9px !important; }
    body.page-public .pv-hero .vbn-mew-production .vbn-copy { width: 60% !important; max-width: 60% !important; }
    body.page-public .pv-hero .vbn-mew-production .vbn-title { font-size: clamp(31px, 8vw, 45px) !important; }
    body.page-public .pv-hero .vbn-mew-production .vbn-pill { padding: 7px 12px; }
    body.page-public .pv-hero .vbn-mew-production .vbn-art-mew { width: 38%; }
    body.page-public .pv-hero .vbn-mew-production .vbn-slab-mew { right: 1%; height: clamp(220px, 45vw, 350px); }
    .vbn-buyback-pack,
    .vbn-buyback-foil { height: clamp(250px, 50vw, 385px); }
    .vbn-rrv-foil { height: clamp(150px, 30vw, 246px); }
}

@media (max-width: 520px) {
    /* Purpose-built mobile layout. The previous approach rendered the desktop
       composition at full size and scaled it down, which is why the alignment
       looked wrong: every offset, padding and art position was authored for a
       1400px stage. Here the slide is laid out for the phone directly. */
    body.page-public .pv-hero .vbn,
    body.page-public .pv-hero .vbn-campaign {
        min-height: 214px !important;
        height: 214px !important;
        overflow: hidden !important;
    }
    body.page-public .pv-hero .vbn .vbn-inner,
    body.page-public .pv-hero .vbn .hero-slide {
        min-height: 214px !important;
        height: 214px !important;
        width: 100% !important;
        transform: none !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Copy: one consistent left margin and vertical centring on every slide. */
    body.page-public .pv-hero .vbn .vbn-copy {
        position: absolute !important;
        left: 0 !important; right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
        width: 60% !important; max-width: 60% !important;
        padding: 0 0 0 18px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    body.page-public .pv-hero .vbn .vbn-copy > * { margin-left: 0 !important; margin-right: 0 !important; }

    body.page-public .pv-hero .vbn .vbn-pill,
    body.page-public .pv-hero .vbn .vbn-chase-eyebrow {
        font-size: 8.5px !important; letter-spacing: 0.15em !important;
        padding: 4px 8px !important; margin: 0 0 8px 0 !important;
        white-space: nowrap !important;
    }
    body.page-public .pv-hero .vbn h1,
    body.page-public .pv-hero .vbn h2,
    body.page-public .pv-hero .vbn .vbn-title {
        font-size: 21px !important; line-height: 1.14 !important;
        letter-spacing: -0.02em !important; margin: 0 0 7px 0 !important;
    }
    body.page-public .pv-hero .vbn .vbn-sub,
    body.page-public .pv-hero .vbn .vbn-copy p {
        font-size: 11.5px !important; line-height: 1.35 !important;
        margin: 0 0 11px 0 !important;
    }
    body.page-public .pv-hero .vbn .vbn-btn {
        font-size: 12px !important; padding: 9px 14px !important;
        min-height: 36px !important; height: auto !important; margin: 0 !important;
    }
    body.page-public .pv-hero .vbn .vbn-code,
    body.page-public .pv-hero .vbn .vbn-copy small { font-size: 9.5px !important; margin-top: 8px !important; }

    /* Art: right 38%, vertically centred, never reaching the copy column. */
    /* Art is a composed group of absolutely-positioned pieces. Scale the whole
       group rather than restyling its children — doing the latter flattens the
       composition and drops pieces. Text is laid out for mobile above, so only
       the artwork is transformed. */
    body.page-public .pv-hero .vbn .vbn-art {
        position: absolute !important;
        right: 4% !important; left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) scale(0.62) !important;
        transform-origin: right center !important;
        z-index: 2 !important;
    }


    body.page-public .hero-dot { width: 24px; }
    body.page-public .hero-pause { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide-active .vbn-buyback-foil,
    .hero-slide-active .vbn-rrv-foil {
        animation: none !important;
        background-position: 16% 0, 0 0;
        opacity: .22;
    }
}



/* ── Composited hero art (Deniz 2026-08-02) ─────────────────────────────
   Courtyard's banner art is a single pre-rendered image (verified on their
   site: one <img> at 805x345, object-fit:cover, from their carousel bucket).
   Assembling ours from three PNGs in CSS could never match it — each piece
   carried its own baked lighting and none shared a shadow or ground plane.
   scripts/compose_hero_art.py bakes the group once with one light source. */
body.page-public .pv-hero #heroSlide4 .vbn-starter-art {
    /* WebP, not the 1.1MB PNG: same 970x723 art at 147KB, mean channel
       difference 2.28/255 and alpha preserved. It was the second heaviest
       asset on the home page. */
    background: url('/static/img/banners/hero-art-starter.webp?v=5') center / contain no-repeat !important;
}
body.page-public .pv-hero #heroSlide4 .vbn-starter-art > * { display: none !important; }

/* Banner 4 (Sell it back) — PRO sleeve ground, all widths.
   Briefly removed 2026-08-18 when the risk-free promo took over heroSlide8 and
   inherited this dark ground; the promo now lives on heroSlide11 and this
   banner has its id back, so the block is restored verbatim. */
/* HTML film cut: no hairline, same as the other promo banners. */
body.page-public .pv-hero #heroSlide12 .vbn { border: 0 !important; }

body.page-public .pv-hero #heroSlide8 .vbn {
    /* Same white hairline that was showing on the risk-free banner: the shared
       banner chrome puts border: 1px solid rgba(255,255,255,.12) on .vbn, and
       it reads as a light line down the edge of this dark photo ground too. */
    border: 0 !important;
    background:
        linear-gradient(90deg, rgba(6,14,20,0.82) 0%, rgba(6,14,20,0.55) 52%, rgba(6,14,20,0.28) 100%),
        url('/static/img/banners/pro-sleeve-bg-v3.webp?v=1') center / cover no-repeat !important;
}
body.page-public .pv-hero #heroSlide8 .vbn::before { display: none !important; }
body.page-public .pv-hero #heroSlide8 .vbn-buyback-mark { display: none !important; }
body.page-public .pv-hero #heroSlide8 .vbn-btn { display: none !important; }
body.page-public .pv-hero #heroSlide8 .vbn-copy h2,
body.page-public .pv-hero #heroSlide8 .vbn-copy .vbn-title,
body.page-public .pv-hero #heroSlide8 .vbn-copy .vbn-sub,
body.page-public .pv-hero #heroSlide8 .vbn-copy .vbn-pill {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
body.page-public .pv-hero #heroSlide8 .vbn-title span { color: #9fe8d8 !important; -webkit-text-fill-color: #9fe8d8 !important; }

/* ── Promo banner redesign (STARTER50) ──────────────────────────────────
   Was a pale wash of the sleeve photo with ink copy, which read grey and
   flat. Now a dark stage with a cool glow behind the art: the pack is the
   only bright object, the gift reads as a gift, and it sits with the rest
   of the site's dark surfaces instead of fighting them. Copy is unchanged —
   test_public_copy_hardening pins these strings. */
body.page-public .pv-hero #heroSlide4 .vbn {
    background:
        radial-gradient(ellipse 46% 82% at 76% 48%, rgba(186,232,255,0.46), rgba(120,190,240,0.14) 46%, rgba(120,190,240,0) 72%),
        radial-gradient(ellipse 120% 120% at 8% 20%, rgba(110,242,160,0.10), rgba(110,242,160,0) 60%),
        linear-gradient(104deg, #04100b 0%, #0a2016 48%, #0e2d1c 100%) !important;
}
body.page-public .pv-hero #heroSlide4 .vbn::before,
body.page-public .pv-hero #heroSlide4 .vbn-inner::before { display: none !important; }
body.page-public .pv-hero #heroSlide4 .vbn-inner > img,
body.page-public .pv-hero #heroSlide4 .vbn-bg,
body.page-public .pv-hero #heroSlide4 .vbn-starter-bg { display: none !important; }

body.page-public .pv-hero #heroSlide4 .vbn-pill {
    color: #8ff0b6 !important; -webkit-text-fill-color: #8ff0b6 !important;
    background: none !important; border: 0 !important; padding-left: 0 !important;
}
body.page-public .pv-hero #heroSlide4 .vbn-title {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.5) !important;
}
body.page-public .pv-hero #heroSlide4 .vbn-starter-highlight {
    color: #6ef2a0 !important; -webkit-text-fill-color: #6ef2a0 !important;
}
/* CTA is the one solid element — white pill on the dark stage. */
body.page-public .pv-hero #heroSlide4 .vbn-btn {
    background: #fff !important; color: #08150e !important; -webkit-text-fill-color: #08150e !important;
    border-radius: 999px !important; font-weight: 800 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
/* Code reads as a ticket, not body text. */
body.page-public .pv-hero #heroSlide4 .vbn-starter-code {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    border: 0 !important; background: none !important; padding: 0 !important;
    display: inline-flex !important; align-items: baseline !important; gap: 7px !important;
}
body.page-public .pv-hero #heroSlide4 .vbn-starter-code small {
    display: inline !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: .62 !important;
    letter-spacing: .12em !important;
}
body.page-public .pv-hero #heroSlide4 .vbn-starter-fine {
    color: rgba(255,255,255,0.46) !important; -webkit-text-fill-color: rgba(255,255,255,0.46) !important;
}