/*
 * CHS Join Video Hero — scoped styles
 * Ported from resources/design-demos/join-with-video-hero-v7.html
 * Uses theme CSS vars: --chs-primary, --chs-accent, --chs-light, --chs-cream
 */

.chs-join-video-hero {
    --chs-jvh-dark: #0A1518;
    --chs-jvh-teal: var(--chs-primary, #0D4B62);
    --chs-jvh-gold: var(--chs-accent, #BFB359);
    --chs-jvh-cream: var(--chs-cream, #FAEFEA);
    --chs-jvh-light: var(--chs-light, #DEFFF1);
    --chs-jvh-overlay-opacity: 0.6;

    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--chs-jvh-teal);
    color: var(--chs-jvh-cream);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Home v9 membership media hero. */
.chs-home-hero {
    position: relative;
    min-height: clamp(640px, calc(100svh - 150px), 820px);
    overflow: hidden;
    isolation: isolate;
    background: var(--chs-bg-deep);
    color: var(--chs-on-deep);
    font-family: var(--chs-serif);
}
.chs-home-hero__media { position: absolute; inset: 0; z-index: -4; background: var(--chs-bg-deep); }
.chs-home-hero__poster,
.chs-home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity 900ms var(--chs-ease), transform 2600ms var(--chs-ease); }
.chs-home-hero__poster.is-active { opacity: 1; transform: scale(1); }
/* Scene framing. These photographers sit high in their frames (faces at 15-29%
   of image height), so a centered `cover` crop decapitates them on wide viewports.
   Default leans upward; per-scene values are measured per photo.
   Index = `presets` repeater order: 0 Julia, 1 Chansey, 2 Suzi, 3 Joy. */
.chs-home-hero__poster { object-position: 50% 25%; }
.chs-home-hero__poster[data-scene-index="0"] { object-position: 50% 14%; }
.chs-home-hero__poster[data-scene-index="1"] { object-position: 50% 6%; }
.chs-home-hero__poster[data-scene-index="2"] { object-position: 50% 10%; }
.chs-home-hero__poster[data-scene-index="3"] { object-position: 50% 33%; }
.chs-home-hero__video { z-index: 1; filter: saturate(.9) contrast(1.05); }
.chs-home-hero__video.is-active { opacity: 1; transform: scale(1); }
.chs-home-hero__video.is-ended { opacity: 0; transition-delay: 1200ms; }
.chs-home-hero__wash,
.chs-home-hero__grid,
.chs-home-hero__grain { position: absolute; inset: 0; pointer-events: none; }
.chs-home-hero__wash { z-index: -2; background: linear-gradient(90deg, rgba(11,53,67,.91) 0%, rgba(11,53,67,.72) 34%, rgba(11,53,67,.22) 64%, rgba(10,31,38,.72) 100%), linear-gradient(180deg, rgba(10,31,38,.54) 0%, rgba(10,31,38,.05) 44%, rgba(10,31,38,.78) 100%); }
.chs-home-hero__grid { z-index: -1; opacity: .18; background: linear-gradient(rgba(255,246,236,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,246,236,.12) 1px, transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 78%, transparent 100%); }
.chs-home-hero__grain { z-index: 0; opacity: .11; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 3px 3px; }
.chs-home-hero__inner { position: relative; z-index: 1; width: min(100% - 40px, 1280px); min-height: clamp(640px, calc(100svh - 150px), 820px); margin: 0 auto; padding: clamp(34px, 5vw, 56px) 0 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 390px); gap: clamp(22px, 4vw, 54px); align-items: center; }
.chs-home-hero__copy { display: grid; gap: 18px; max-width: 780px; }
.chs-home-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; color: var(--chs-accent-bright); font-family: var(--chs-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.chs-home-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.chs-home-hero__meta span::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.chs-home-hero h1 { max-width: 8ch; margin: 0; color: var(--chs-cream); font-family: var(--chs-display); font-size: clamp(68px, 9.2vw, 118px); font-weight: 800; line-height: .82; letter-spacing: var(--chs-display-tracking); text-transform: uppercase; }
.chs-home-hero h1 em { color: var(--chs-accent-bright); font-family: var(--chs-serif); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.chs-home-hero__promise,
.chs-home-hero__body { margin: 0; color: rgba(255,246,236,.9); }
.chs-home-hero__promise { max-width: 620px; font-size: clamp(23px, 2.65vw, 31px); font-style: italic; line-height: 1.12; }
.chs-home-hero__promise strong,
.chs-home-hero__body strong { color: var(--chs-accent-bright); font-weight: 600; }
.chs-home-hero__body { max-width: 540px; font-size: clamp(17px, 2vw, 21px); }
.chs-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.chs-home-hero__button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; padding: 0 18px; font-family: var(--chs-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.chs-home-hero__button--primary { background: var(--chs-accent-bright); color: var(--chs-bg-deep); }
.chs-home-hero__button--outline { border-color: rgba(255,246,236,.58); color: var(--chs-cream); }
.chs-home-hero__fine-print { margin: 0; color: rgba(255,246,236,.72); font-family: var(--chs-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.chs-home-hero__membership { align-self: center; position: relative; background: linear-gradient(180deg, rgba(24,92,112,.94), rgba(10,50,64,.88)), rgba(21,83,104,.9); border: 1px solid rgba(201,185,88,.52); color: var(--chs-on-deep); box-shadow: 0 28px 90px rgba(10,31,38,.36); padding: clamp(20px, 2.5vw, 28px); backdrop-filter: blur(14px); }
.chs-home-hero__membership::before,
.chs-home-hero__membership::after { content: ""; position: absolute; width: 26px; height: 26px; border-color: var(--chs-accent-bright); pointer-events: none; z-index: 3; }
.chs-home-hero__membership::before { top: -1px; left: -1px; border-top: 3px solid; border-left: 3px solid; }
.chs-home-hero__membership::after { right: -1px; bottom: -1px; border-right: 3px solid; border-bottom: 3px solid; }
.chs-home-hero__membership-mast,
.chs-home-hero__rate { color: rgba(255,246,236,.7); font-family: var(--chs-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.chs-home-hero__membership-mast { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,246,236,.18); }
.chs-home-hero__membership-intro { margin: 16px 0 0; color: rgba(255,246,236,.82); font-family: var(--chs-serif); font-size: 16px; font-style: italic; line-height: 1.4; }
.chs-home-hero__membership-title { margin: 18px 0 0; color: var(--chs-cream); font-family: var(--chs-display); font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; line-height: .9; text-transform: uppercase; }
.chs-home-hero__benefits { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.chs-home-hero__benefits li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; border-top: 1px solid rgba(255,246,236,.22); padding: 10px 0; }
.chs-home-hero__benefits b { color: var(--chs-accent-bright); font-family: var(--chs-mono); font-size: 10px; letter-spacing: .14em; }
.chs-home-hero__benefits span { color: rgba(255,246,236,.74); font-size: 14px; line-height: 1.36; }
.chs-home-hero__benefits strong { display: block; color: var(--chs-cream); font-family: var(--chs-display); font-size: clamp(19px, 2vw, 23px); line-height: .98; text-transform: uppercase; }
.chs-home-hero__price { display: grid; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(255,246,236,.18); }
.chs-home-hero__amount { color: var(--chs-accent-bright); font-family: var(--chs-display); font-size: clamp(44px, 5.4vw, 66px); font-weight: 800; line-height: .9; }
.chs-home-hero__amount small { color: rgba(255,246,236,.74); font-family: var(--chs-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.chs-home-hero__membership-cta { width: 100%; margin-top: 16px; }
.chs-home-hero__filmstrip { grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.chs-home-hero__film { position: relative; min-height: clamp(240px, 18vw, 320px); overflow: hidden; border: 1px solid rgba(201,185,88,.46); border-radius: 0; background: rgba(10,31,38,.78); color: var(--chs-cream); cursor: pointer; font-family: var(--chs-mono); padding: 0; text-align: left; }
.chs-home-hero__film-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .68; filter: saturate(1.04) contrast(1.04); transition: opacity 220ms var(--chs-ease), transform 360ms var(--chs-ease); }
.chs-home-hero__film:nth-child(1) .chs-home-hero__film-image { object-position: 50% 30%; }
.chs-home-hero__film:nth-child(2) .chs-home-hero__film-image { object-position: 50% 32%; }
.chs-home-hero__film:nth-child(3) .chs-home-hero__film-image { object-position: 50% 28%; }
.chs-home-hero__film:nth-child(4) .chs-home-hero__film-image { object-position: 50% 30%; }
.chs-home-hero__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,38,0) 0%, rgba(10,31,38,.56) 100%); }
.chs-home-hero__film:hover .chs-home-hero__film-image,
.chs-home-hero__film.is-active .chs-home-hero__film-image { opacity: .96; transform: scale(1.035); }
.chs-home-hero__film.is-active,
.chs-home-hero__film:hover { border-color: rgba(201,185,88,.82); }
.chs-home-hero__film.is-ended::before { content: "Final frame"; position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--chs-accent); color: var(--chs-on-accent); padding: 5px 7px; font-family: var(--chs-mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.chs-home-hero__film-copy { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 10px; display: grid; gap: 4px; }
.chs-home-hero__film-label { color: var(--chs-cream); font-family: var(--chs-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-shadow: 0 2px 12px rgba(0,0,0,.64); text-transform: uppercase; }
.chs-home-hero__scene-tag { position: absolute; right: 20px; top: 20px; z-index: 1; border: 1px solid rgba(255,246,236,.26); background: rgba(10,31,38,.48); color: rgba(255,246,236,.82); padding: 8px 10px; font-family: var(--chs-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(10px); }
@media (max-width: 920px) {
    .chs-home-hero,
    .chs-home-hero__inner { min-height: auto; }
    .chs-home-hero__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 30px; }
    .chs-home-hero__copy { order: 1; gap: 12px; }
    .chs-home-hero__filmstrip { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .chs-home-hero__membership { order: 3; }
    .chs-home-hero h1 { max-width: 9ch; font-size: clamp(54px, 14vw, 78px); }
    .chs-home-hero__promise { font-size: clamp(20px, 4vw, 26px); }
    .chs-home-hero__body { font-size: 16px; }
    .chs-home-hero__meta { font-size: 9px; }
    .chs-home-hero__scene-tag { top: 12px; right: 12px; font-size: 9px; }
    .chs-home-hero__film { min-height: clamp(190px, 30vw, 260px); }
    .chs-home-hero__film-copy { left: 8px; right: 8px; bottom: 8px; }
    .chs-home-hero__film-label { font-size: 11px; line-height: 1.25; }
}
@media (max-width: 520px) {
    .chs-home-hero__scene-tag { display: none; }
    .chs-home-hero__filmstrip { grid-template-columns: 1fr; }
    .chs-home-hero__film { min-height: 280px; }
}

/* ===========  PRESETS STAGE  =========== */

.chs-join-video-hero .chs-jvh__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.chs-join-video-hero .chs-jvh__preset {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* Selected via [data-chs-jvh-active] on <html>.
 * Script assigns an integer 0|1|2 — only matching preset shows. */
html[data-chs-jvh-active="0"] .chs-join-video-hero .chs-jvh__preset[data-preset-index="0"],
html[data-chs-jvh-active="1"] .chs-join-video-hero .chs-jvh__preset[data-preset-index="1"],
html[data-chs-jvh-active="2"] .chs-join-video-hero .chs-jvh__preset[data-preset-index="2"] {
    opacity: 1;
    pointer-events: auto;
}

/* Fallback: if JS didn't run, show preset 0 */
html:not([data-chs-jvh-active]) .chs-join-video-hero .chs-jvh__preset[data-preset-index="0"] {
    opacity: 1;
    pointer-events: auto;
}

.chs-join-video-hero .chs-jvh__poster,
.chs-join-video-hero .chs-jvh__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chs-join-video-hero .chs-jvh__video {
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
}

.chs-join-video-hero .chs-jvh__video.is-playing {
    opacity: 1;
}

/* When video ends, fade back to poster (poster has z-index below video). */
.chs-join-video-hero .chs-jvh__video.is-ended {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.chs-join-video-hero .chs-jvh__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        96deg,
        rgba(10, 21, 24, calc(var(--chs-jvh-overlay-opacity) + 0.18)) 0%,
        rgba(10, 21, 24, calc(var(--chs-jvh-overlay-opacity) - 0.14)) 34%,
        rgba(10, 21, 24, calc(var(--chs-jvh-overlay-opacity) - 0.44)) 62%,
        rgba(10, 21, 24, calc(var(--chs-jvh-overlay-opacity) - 0.22)) 100%
    );
}

/* ===========  CONTENT  =========== */

.chs-join-video-hero .chs-jvh__content {
    position: absolute;
    left: 0;
    bottom: clamp(1.5rem, 6vh, 4rem);
    z-index: 3;
    padding: 0 clamp(1.25rem, 5vw, 3.25rem);
    max-width: min(58rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.chs-join-video-hero .chs-jvh__eyebrow {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    font-weight: 600;
    color: var(--chs-jvh-gold);
}

/* Story stack — wraps the sequential-reveal headline with a gold editorial rail */
.chs-join-video-hero .chs-jvh__story-stack {
    position: relative;
    padding-left: clamp(1rem, 1.5vw, 1.5rem);
}

.chs-join-video-hero .chs-jvh__story-stack::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(191, 179, 89, 0.08) 0%,
        rgba(191, 179, 89, 0.92) 50%,
        rgba(191, 179, 89, 0.08) 100%);
    opacity: 0;
    animation: chs-jvh-rail-fade 1s ease forwards;
    animation-delay: 0.15s;
}

@keyframes chs-jvh-rail-fade {
    to { opacity: 1; }
}

.chs-join-video-hero .chs-jvh__headline {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3.2vw, 2.8rem);
    line-height: 1.08;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
}

.chs-join-video-hero .chs-jvh__line {
    display: block;
    opacity: 0;
    transform: translateY(26px);
    filter: blur(12px);
    max-width: 22ch;
    animation: chs-jvh-line-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--chs-jvh-line-delay, 0.3s);
}

/* Climax line — last line in gold, larger, heavier */
.chs-join-video-hero .chs-jvh__line--climax {
    color: var(--chs-jvh-gold);
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: 0.01em;
    margin-top: 0.25rem;
}

@keyframes chs-jvh-line-in {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.chs-join-video-hero .chs-jvh__lede {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.5;
    max-width: 30rem;
    color: var(--chs-jvh-cream);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
    animation: chs-jvh-lede-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--chs-jvh-lede-delay, 1.8s);
}

@keyframes chs-jvh-lede-in {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes chs-jvh-fade-in {
    to { opacity: 1; }
}

/* ===========  RAIL (benefits + CTA)  =========== */

.chs-join-video-hero .chs-jvh__rail {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 5;
    width: min(22rem, calc(100vw - 1rem));
    transform: translateY(-50%);
    padding-right: 0;
    opacity: 0;
    animation: chs-jvh-rail-in 1.1s cubic-bezier(0.18, 0.9, 0.2, 1) forwards;
    animation-delay: 2.3s;
}

@keyframes chs-jvh-rail-in {
    from {
        opacity: 0;
        transform: translate3d(60px, -50%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
    }
}

.chs-join-video-hero .chs-jvh__rail::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(191, 179, 89, 0.1) 0%,
        rgba(191, 179, 89, 0.95) 45%,
        rgba(191, 179, 89, 0.2) 100%);
    z-index: 1;
}

.chs-join-video-hero .chs-jvh__benefits,
.chs-join-video-hero .chs-jvh__cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(222, 255, 241, 0.2);
    border-right: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%),
        linear-gradient(135deg, rgba(13, 75, 98, 0.58) 0%, rgba(10, 21, 24, 0.62) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    padding: 1.1rem 1.2rem 1.1rem 1.35rem;
}

.chs-join-video-hero .chs-jvh__benefits {
    border-radius: 1.25rem 0 0 0;
    border-bottom: 0;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.chs-join-video-hero .chs-jvh__benefit {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-family: "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--chs-jvh-cream);
}

.chs-join-video-hero .chs-jvh__benefit-icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--chs-jvh-gold);
    transform: translateY(2px);
}

.chs-join-video-hero .chs-jvh__benefit-icon svg {
    width: 100%;
    height: 100%;
}

.chs-join-video-hero .chs-jvh__cta {
    border-radius: 0 0 0 1.25rem;
    border-top: 0;
    margin-top: -1px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.chs-join-video-hero .chs-jvh__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chs-join-video-hero .chs-jvh__price {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    color: #fff;
    line-height: 1;
}

.chs-join-video-hero .chs-jvh__price-subtext {
    font-size: 0.75rem;
    color: var(--chs-jvh-cream);
    opacity: 0.78;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chs-join-video-hero .chs-jvh__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.chs-join-video-hero .chs-jvh__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.15rem;
    font-family: "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
    cursor: pointer;
}

.chs-join-video-hero .chs-jvh__button--primary {
    background: var(--chs-jvh-gold);
    color: var(--chs-jvh-dark);
    border-color: var(--chs-jvh-gold);
}

.chs-join-video-hero .chs-jvh__button--primary:hover,
.chs-join-video-hero .chs-jvh__button--primary:focus-visible {
    transform: translateY(-2px);
    background: #d4c66a;
    color: var(--chs-jvh-dark);
}

.chs-join-video-hero .chs-jvh__button--secondary {
    background: transparent;
    color: var(--chs-jvh-cream);
    border-color: rgba(222, 255, 241, 0.35);
}

.chs-join-video-hero .chs-jvh__button--secondary:hover,
.chs-join-video-hero .chs-jvh__button--secondary:focus-visible {
    background: rgba(222, 255, 241, 0.08);
    border-color: var(--chs-jvh-cream);
    color: #fff;
}

.chs-join-video-hero .chs-jvh__arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.chs-join-video-hero .chs-jvh__button--primary:hover .chs-jvh__arrow {
    transform: translateX(4px);
}

.chs-join-video-hero .chs-jvh__fine-print {
    font-size: 0.7rem;
    color: var(--chs-jvh-cream);
    opacity: 0.6;
    text-align: center;
    letter-spacing: 0.02em;
    margin: 0;
}

/* Member badge */
.chs-join-video-hero .chs-jvh__member-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1rem;
    background: rgba(191, 179, 89, 0.18);
    border: 1px solid var(--chs-jvh-gold);
    border-radius: 0.55rem;
    color: var(--chs-jvh-gold);
    font-family: "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.chs-join-video-hero .chs-jvh__member-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* Editor-only preset badge */
.chs-join-video-hero .chs-jvh__editor-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    padding: 0.4rem 0.75rem;
    background: rgba(10, 21, 24, 0.85);
    color: var(--chs-jvh-gold);
    font-family: "Barlow Condensed", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.3rem;
    border: 1px solid var(--chs-jvh-gold);
    pointer-events: none;
}

/* ===========  RESPONSIVE  =========== */

@media (max-width: 1024px) {
    .chs-join-video-hero .chs-jvh__content {
        max-width: calc(100vw - 2rem);
    }
    .chs-join-video-hero .chs-jvh__rail {
        width: min(18rem, calc(100vw - 1rem));
    }
}

@media (max-width: 768px) {
    .chs-join-video-hero {
        min-height: auto;
    }
    .chs-join-video-hero .chs-jvh__stage {
        position: relative;
        height: 60vh;
        min-height: 420px;
    }
    .chs-join-video-hero .chs-jvh__content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1.25rem;
        padding: 0 1.25rem;
    }
    .chs-join-video-hero .chs-jvh__rail {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 0;
        padding: 0;
        animation: chs-jvh-fade-in 1s ease forwards;
        animation-delay: 0.5s;
    }
    .chs-join-video-hero .chs-jvh__rail::before {
        display: none;
    }
    .chs-join-video-hero .chs-jvh__benefits,
    .chs-join-video-hero .chs-jvh__cta {
        border-radius: 0;
        border-right: 1px solid rgba(222, 255, 241, 0.2);
        border-left: 1px solid rgba(222, 255, 241, 0.2);
    }
    .chs-join-video-hero .chs-jvh__benefits {
        border-bottom: 1px solid rgba(222, 255, 241, 0.2);
    }
}

/* ===========  REDUCED MOTION  =========== */

@media (prefers-reduced-motion: reduce) {
    .chs-join-video-hero .chs-jvh__line,
    .chs-join-video-hero .chs-jvh__lede,
    .chs-join-video-hero .chs-jvh__rail {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .chs-join-video-hero .chs-jvh__video {
        display: none !important;
    }
}