/* Three independent compositions; product playback stays shared. */
.variant-stage .date-feature{display:flex;align-items:center;gap:16px;color:#d7fb78;font-style:normal;white-space:nowrap}
.variant-stage .date-feature strong{font-size:88px;line-height:.86;font-weight:650;letter-spacing:-.085em}
.variant-stage .date-feature>span{font-size:29px;line-height:1.15;letter-spacing:-.035em}
.variant-stage .date-feature small{display:block;color:#c1d2e7;font-size:11px;letter-spacing:0;margin-top:10px}
.variant-stage .event-feature{grid-area:event;align-self:center}
.variant-stage .event-feature .cta{margin-top:25px;min-height:52px;padding:14px 22px;font-size:14px}
.variant-stage .stage-portrait>img{width:100%;left:0;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(#000 0%,#000 93%,transparent)}
.variant-stage .stage-speaker strong{font-size:23px}
.variant-stage .stage-speaker>span{font-size:11px}

/* 07: headline + prominent date above a portrait and an open demo. */
.variant-stage.layout-date .hero{grid-template-columns:minmax(0,.85fr) minmax(0,.35fr) minmax(0,1.2fr);grid-template-areas:"invitation invitation event" "portrait demo demo";grid-template-rows:auto 1fr;gap:28px 48px;align-content:stretch;padding:20px 0}
.variant-stage.layout-date .invitation{align-self:center}
.variant-stage.layout-date h1{font-size:clamp(48px,4.9vw,68px);margin-bottom:12px}
.variant-stage.layout-date .subtitle{font-size:25px;margin:0}
.variant-stage.layout-date .event-feature{display:flex;align-items:center;justify-content:space-between;gap:22px;align-self:center}
.variant-stage.layout-date .event-feature .cta{margin:0;gap:15px;padding:15px 18px;font-size:12px}
.variant-stage.layout-date .date-feature{gap:13px}
.variant-stage.layout-date .date-feature strong{font-size:100px}
.variant-stage.layout-date .date-feature>span{font-size:25px}
.variant-stage.layout-date .stage-portrait{min-height:305px;align-self:stretch}
.variant-stage.layout-date .stage-portrait>img{height:calc(100% - 62px)}
.variant-stage.layout-date .stage-speaker{bottom:0;gap:3px}
.variant-stage.layout-date .stage-speaker .speaker-eyebrow{display:none}
.variant-stage.layout-date .demo{align-self:center}
.variant-stage.layout-date #flow-stage{height:254px;padding:22px}
.variant-stage.layout-date .flow-task-title,.variant-stage.layout-date .flow-list-title{font-size:23px}
.variant-stage.layout-date .flow-table table{font-size:12px}
.variant-stage.layout-date .flow-table td{height:35px}

/* 08: product-led. Invitation and a compact presenter at left, large demo at right. */
.variant-stage.layout-product .hero{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:"invitation demo" "portrait demo";grid-template-rows:auto 180px;gap:32px 64px;align-content:center;padding:20px 0}
.variant-stage.layout-product .invitation .date-feature{margin-bottom:28px;gap:16px}
.variant-stage.layout-product .date-feature strong{font-size:66px}
.variant-stage.layout-product .date-feature>span{font-size:26px}
.variant-stage.layout-product .date-feature small{margin-top:6px}
.variant-stage.layout-product h1{font-size:clamp(46px,4.6vw,65px);margin-bottom:16px}
.variant-stage.layout-product .subtitle{font-size:24px;margin-bottom:26px}
.variant-stage.layout-product .stage-portrait{height:180px;min-height:0;display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center;border-top:1px solid #ffffff20;padding-top:18px}
.variant-stage.layout-product .stage-portrait>img{position:static;height:160px;width:130px;object-position:center top}
.variant-stage.layout-product .stage-speaker{position:static;order:0;gap:7px}
.variant-stage.layout-product .stage-speaker strong{font-size:23px;max-width:200px}
.variant-stage.layout-product .stage-speaker>span{font-size:11px;max-width:205px;line-height:1.5}
.variant-stage.layout-product .demo{align-self:center}
.variant-stage.layout-product #flow-stage{height:376px;padding:30px}
.variant-stage.layout-product .flow-view:has(.flow-table){grid-template-columns:1fr;grid-template-areas:"task" "heading" "table" "total";gap:14px}
.variant-stage.layout-product .flow-total{flex-direction:row;align-items:center;justify-content:space-between;padding:13px 16px}
.variant-stage.layout-product .flow-task-title,.variant-stage.layout-product .flow-list-title{font-size:25px;line-height:1.3}
.variant-stage.layout-product .flow-table table{font-size:13px}
.variant-stage.layout-product .flow-table th{font-size:11px}
.variant-stage.layout-product .flow-table td{height:40px}
.variant-stage.layout-product .flow-task-row{font-size:13px;min-height:53px}
.variant-stage.layout-product .flow-list-note{font-size:11px;margin-top:20px}
.variant-stage.layout-product .demo-label{font-size:12px;margin-bottom:16px}

/* 09: three-part invitation with an unobstructed central presenter. */
.variant-stage.layout-center .page{padding:0 40px}
.variant-stage.layout-center .page::before{inset:0 25%;background:radial-gradient(ellipse at 50% 60%,#32578466,transparent 70%)}
.variant-stage.layout-center .hero{grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,1.12fr);grid-template-areas:"invitation portrait event" "invitation portrait demo";grid-template-rows:108px auto;gap:32px 28px;align-content:center;align-items:center;padding:26px 0}
.variant-stage.layout-center h1{font-size:clamp(42px,4vw,61px);line-height:1.08;margin-bottom:25px}
.variant-stage.layout-center .subtitle{font-size:23px;line-height:1.4;margin-bottom:32px;max-width:250px}
.variant-stage.layout-center .invitation>.cta{font-size:13px;padding:15px 18px;gap:24px}
.variant-stage.layout-center .date-feature strong{font-size:92px}
.variant-stage.layout-center .date-feature>span{font-size:28px}
.variant-stage.layout-center .stage-portrait{align-self:stretch;min-height:465px}
.variant-stage.layout-center .stage-portrait>img{height:calc(100% - 75px);width:100%;left:0;object-fit:contain;object-position:center bottom}
.variant-stage.layout-center .stage-speaker{bottom:0;text-align:center;width:100%;align-items:center}
.variant-stage.layout-center .stage-speaker strong{font-size:23px}
.variant-stage.layout-center .stage-speaker>span{font-size:10px}
.variant-stage.layout-center .stage-speaker .speaker-eyebrow{font-size:8px}
.variant-stage.layout-center .demo-label{font-size:10px;margin-bottom:12px}
.variant-stage.layout-center #flow-stage{height:306px;padding:20px 16px}
.variant-stage.layout-center .flow-view:has(.flow-table){grid-template-columns:1fr;grid-template-areas:"task" "heading" "table" "total";gap:10px}
.variant-stage.layout-center .flow-total{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 12px}
.variant-stage.layout-center .flow-total strong{font-size:30px}
.variant-stage.layout-center .flow-task-title,.variant-stage.layout-center .flow-list-title{font-size:19px}
.variant-stage.layout-center .flow-table table{font-size:10px}
.variant-stage.layout-center .flow-table th{font-size:9px}
.variant-stage.layout-center .flow-task-row{min-height:42px;font-size:10px}
.variant-stage.layout-center .flow-list-note{margin-top:14px;font-size:10px}
.variant-stage.layout-center .demo-footnote{font-size:8px}
.variant-stage.layout-center .demo-caption{font-size:10px}

@media(min-width:861px) and (max-height:740px){
 .variant-stage.layout-date .hero{padding:12px 0;gap:22px 40px}
 .variant-stage.layout-date h1{font-size:53px}
 .variant-stage.layout-date #flow-stage{height:234px;padding:17px 22px}
 .variant-stage.layout-date .stage-portrait{min-height:290px}
 .variant-stage.layout-product .hero{grid-template-rows:auto 140px;gap:22px 50px;padding:14px 0}
 .variant-stage.layout-product .invitation .date-feature{margin-bottom:22px}
 .variant-stage.layout-product h1{font-size:51px}
 .variant-stage.layout-product .subtitle{margin-bottom:22px}
 .variant-stage.layout-product .stage-portrait{height:140px;padding-top:12px;grid-template-columns:108px 1fr}
 .variant-stage.layout-product .stage-portrait>img{height:128px;width:108px}
 .variant-stage.layout-product #flow-stage{height:354px;padding:24px}
 .variant-stage.layout-center .hero{padding:12px 0;row-gap:24px;grid-template-rows:95px auto}
 .variant-stage.layout-center .stage-portrait{min-height:450px}
}
@media(min-width:861px) and (max-width:1150px){
 .variant-stage.layout-date .hero{column-gap:28px}
 .variant-stage.layout-date .event-feature{display:block}
 .variant-stage.layout-date .date-feature strong{font-size:76px}
 .variant-stage.layout-date .event-feature .cta{margin-top:15px}
 .variant-stage.layout-product .hero{column-gap:35px}
 .variant-stage.layout-product .stage-speaker strong{font-size:19px}
 .variant-stage.layout-center .page{padding:0 25px}
 .variant-stage.layout-center .hero{column-gap:20px}
 .variant-stage.layout-center h1{font-size:40px}
 .variant-stage.layout-center .subtitle{font-size:20px}
 .variant-stage.layout-center .stage-speaker strong{font-size:19px}
 .variant-stage.layout-center .date-feature strong{font-size:75px}
 .variant-stage.layout-center .date-feature>span{font-size:24px}
}
@media(max-width:860px){
 .variant-stage.layout-date .hero,.variant-stage.layout-product .hero,.variant-stage.layout-center .hero{display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"invitation" "event" "portrait" "demo";gap:30px;padding:26px 0}
 .variant-stage.layout-product .hero{grid-template-areas:"invitation" "demo" "portrait"}
 .variant-stage.layout-date .event-feature{display:flex;justify-content:space-between;gap:18px}
 .variant-stage.layout-center .event-feature{grid-row:1}
 .variant-stage.layout-center .invitation{grid-row:2}
 .variant-stage.layout-date h1,.variant-stage.layout-product h1,.variant-stage.layout-center h1{font-size:clamp(46px,9vw,68px);margin-bottom:18px}
 .variant-stage.layout-date .subtitle,.variant-stage.layout-product .subtitle,.variant-stage.layout-center .subtitle{font-size:24px;max-width:none}
 .variant-stage.layout-date .date-feature strong,.variant-stage.layout-product .date-feature strong,.variant-stage.layout-center .date-feature strong{font-size:72px}
 .variant-stage.layout-date .date-feature>span,.variant-stage.layout-product .date-feature>span,.variant-stage.layout-center .date-feature>span{font-size:26px}
 .variant-stage.layout-date .stage-portrait,.variant-stage.layout-center .stage-portrait{height:415px;min-height:0}
 .variant-stage.layout-date .stage-portrait>img,.variant-stage.layout-center .stage-portrait>img{height:340px;width:100%;left:0;object-fit:contain}
 .variant-stage.layout-date .stage-speaker,.variant-stage.layout-center .stage-speaker{bottom:0;left:0}
 .variant-stage.layout-date .stage-speaker strong,.variant-stage.layout-center .stage-speaker strong{font-size:26px}
 .variant-stage.layout-date #flow-stage,.variant-stage.layout-center #flow-stage{height:322px;padding:20px 16px}
 .variant-stage.layout-date .flow-view:has(.flow-table){grid-template-columns:1fr;grid-template-areas:"task" "heading" "table" "total";gap:10px}
 .variant-stage.layout-date .flow-total{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 12px}
 .variant-stage.layout-date .flow-total strong{font-size:30px}
 .variant-stage.layout-product .stage-portrait{grid-template-columns:125px 1fr;height:185px;min-height:0}
 .variant-stage.layout-product .stage-portrait>img{width:125px;height:165px}
 .variant-stage.layout-product #flow-stage{height:375px;padding:22px 16px}
 .variant-stage.layout-product .flow-task-title{font-size:22px}
 .variant-stage.layout-product .flow-table table{font-size:11px}
 .variant-stage.layout-product .flow-task-row{font-size:11px}
}
@media(max-width:440px){
 .variant-stage.layout-date .event-feature{display:block}
 .variant-stage.layout-date .event-feature .cta{margin-top:25px;font-size:15px;min-height:56px;padding:16px 22px}
 .variant-stage.layout-date .stage-portrait,.variant-stage.layout-center .stage-portrait{height:380px}
 .variant-stage.layout-date .stage-portrait>img,.variant-stage.layout-center .stage-portrait>img{height:305px}
 .variant-stage.layout-center .page{padding:0 20px}
 .variant-stage.layout-center .invitation>.cta{min-height:56px;font-size:15px}
 .variant-stage.layout-date .flow-task-title,.variant-stage.layout-date .flow-list-title{font-size:19px}
 .variant-stage.layout-product .stage-speaker strong{font-size:20px}
 .variant-stage.layout-product .stage-speaker>span{font-size:10px}
 .variant-stage.layout-product .flow-list-title{font-size:21px}
}