.video-frame{position:relative;aspect-ratio:16/9}.video-frame iframe{display:block;width:100%;height:100%;border:0}.cta{text-decoration:none;cursor:pointer}.webinar-date{font:700 19px/1.5 Inter,Arial,sans-serif;text-align:center;margin:0 auto 28px;color:inherit}.webinar-date span{display:block;font-size:12px;font-weight:400;margin-top:5px}.john-v5 .webinar-date{text-align:left}.john-v5 .webinar-date{grid-column:1}.public-webinar .version-bar{display:none!important}.registration-status{padding:14px 20px;margin:15px auto;max-width:640px;text-align:center;background:#fff4d6;color:#30250b}.john-v5 .cta{display:inline-flex}@media(max-width:720px){.webinar-date{font-size:17px}.webinar-date span{font-size:11px}.john-v5 .funnelr-copy>.webinar-date{order:2;margin-bottom:0;max-width:100%}.john-v5 .funnelr-video-hero{order:3}}
/* Campaign variants 4/5: compact, shared mobile reading and action order. */
@media(max-width:720px){
 .john-v4 .hero,.john-v5 .hero{padding:14px 0 28px}
 .john-v4 .hero>.container,.john-v5 .hero>.container{display:flex;flex-direction:column;width:calc(100% - 32px);gap:0}
 .john-v4 .hero-grid,.john-v5 .funnelr-intro,.john-v5 .funnelr-copy,.john-v5 .funnelr-video-hero,
 .john-v4 .hero .video-column,.john-v5 .hero .video-column,
 .john-v4 .hero-action,.john-v5 .hero-action{display:contents}
 .john-v4 .hero .eyebrow,.john-v5 .hero .eyebrow{order:0;align-self:stretch;max-width:none;margin:0 0 5px;padding:0;background:none;border-radius:0;font-size:12px;line-height:1.5;font-weight:600;text-align:center}
 .john-v4 .hero .webinar-date,.john-v5 .hero .webinar-date{order:1;align-self:stretch;max-width:none;margin:0 0 15px;text-align:center;font-size:16px;line-height:1.35}
 .john-v4 .hero .webinar-date span,.john-v5 .hero .webinar-date span{font-size:10px;line-height:1.4;margin-top:3px;text-wrap:balance}
 .john-v4 .hero h1,.john-v5 .hero h1{order:2;align-self:stretch;max-width:none;margin:0 0 12px;text-align:center;font-size:clamp(27px,7.8vw,36px);line-height:1.08;letter-spacing:-.6px;font-weight:800;color:inherit;text-wrap:balance}
 .john-v4 .hero h1 span,.john-v5 .hero h1 span{display:block;margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit;color:inherit}
 .john-v4 .hero .subtitle,.john-v5 .hero .subtitle{order:3;align-self:stretch;max-width:none;margin:0 0 14px;text-align:center;font-size:clamp(19px,5.3vw,23px);font-weight:600;line-height:1.25;letter-spacing:-.25px;text-wrap:balance}
 .john-v4 .hero .subtitle{padding:9px 10px;border-radius:6px;color:white}
 .john-v5 .hero .subtitle{padding:0;color:#303a44}
 .john-v4 .hero .subtitle .mobile-break,.john-v5 .hero .subtitle .mobile-break{display:none}
 .john-v4 .hero .video-frame,.john-v5 .hero .video-frame{order:4;flex:none;width:100%;margin:0;border-radius:7px;aspect-ratio:16/9}
 .john-v4 .hero .video-caption,.john-v5 .hero .video-caption{order:5;align-self:stretch;margin:5px 0 10px;padding:0;border-radius:0;background:none;text-align:center;font-size:9px;line-height:1.4;color:inherit;opacity:.72}
 .john-v4 .hero-action>.cta,.john-v5 .hero-action>.cta{order:6;display:flex;align-self:stretch;align-items:center;justify-content:center;gap:12px;width:100%;max-width:none;min-height:52px;margin:0 0 20px;padding:13px 12px;font-size:14px;line-height:1.3;font-weight:800;letter-spacing:.15px;color:#181818;border-radius:7px}
 .john-v4 .hero-action>.cta br,.john-v5 .hero-action>.cta br{display:none}
 .john-v4 .hero-action>.cta span,.john-v5 .hero-action>.cta span{color:inherit;font-size:22px}
 .john-v4 .hero-action>h3,.john-v5 .hero-action>h3{order:7;align-self:stretch;max-width:none;margin:0 0 9px;text-align:center;font-size:23px;line-height:1.2;color:inherit}
 .john-v4 .hero-action>h3 br,.john-v5 .hero-action>h3 br{display:none}
 .john-v4 .hero-action>p:not(.action-note),.john-v5 .hero-action>p:not(.action-note){order:8;align-self:stretch;margin:0;text-align:center;font-size:15px;line-height:1.6;color:inherit}
 .john-v4 .hero-action>.action-note,.john-v5 .hero-action>.action-note{order:9;align-self:stretch;margin:11px 0 0;text-align:center;font-size:11px;line-height:1.5;color:inherit;opacity:.7}
 .john-v4 .program,.john-v5 .program,.john-v4 .audience,.john-v5 .audience,.john-v4 .results,.john-v5 .results,.john-v4 .host,.john-v5 .host,.john-v4 .final-cta,.john-v5 .final-cta{padding-block:30px}
 .john-v4 .program h2,.john-v5 .program h2,.john-v4 .audience h2,.john-v5 .audience h2,.john-v4 .results h2,.john-v5 .results h2{margin-bottom:22px}
}
@media(max-width:360px){
 .john-v4 .hero,.john-v5 .hero{padding-top:10px}
 .john-v4 .hero .webinar-date,.john-v5 .hero .webinar-date{margin-bottom:11px}
 .john-v4 .hero h1,.john-v5 .hero h1{font-size:27px;margin-bottom:10px}
 .john-v4 .hero .subtitle,.john-v5 .hero .subtitle{font-size:18px;margin-bottom:11px}
}
@media(max-width:720px){.john-v4 .hero-grid{color:inherit}}

/* Larger announcement and typographic subtitle, with a single clear CTA. */
.john-v4 .hero .eyebrow,.john-v5 .hero .eyebrow{font-size:22px;font-weight:600;line-height:1.4}
.john-v4 .hero .subtitle{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;color:#bed7ff;font-size:28px;line-height:1.35;font-weight:600}
.john-v4 .hero .video-frame{border-radius:7px}
@media(max-width:720px){
 .john-v4 .hero .eyebrow,.john-v5 .hero .eyebrow{font-size:16px;line-height:1.35;margin-bottom:7px;text-wrap:balance}
 .john-v4 .hero .subtitle{font-size:clamp(19px,5.3vw,23px);line-height:1.25;margin-bottom:14px;padding:0;color:#bed7ff}
 .john-v4 .hero .video-frame,.john-v5 .hero .video-frame{margin-bottom:12px}
}
@media(max-width:360px){.john-v4 .hero .subtitle{font-size:18px;margin-bottom:11px}}

.john-v4 .hero h1 .title-lead{display:block;margin:0;color:#5094f1;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.john-v4 .hero .subtitle{color:#f4f6fa}

.john-v5 .hero h1 .title-lead{display:block;margin:0;color:#4e92e5;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.video-facade{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#0c1324;color:#fff;cursor:pointer;overflow:hidden}
.video-facade img{display:block;width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:68px;height:68px;border-radius:50%;padding-left:5px;background:#fff;color:#1a65c7;font:28px/1 Arial,sans-serif;box-shadow:0 4px 24px #0007}
.video-facade:focus-visible{outline:3px solid #4a85ef;outline-offset:-4px}