/* Responsive layout for the two active webinar concepts. */
.variant-stage:is(.layout-product,.layout-center) .hero>*{min-width:0}
.variant-stage:is(.layout-product,.layout-center) dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto}
.variant-stage:is(.layout-product,.layout-center) dialog input{font-size:16px;min-height:48px}
.variant-stage:is(.layout-product,.layout-center) .dialog-close{min-width:44px;min-height:44px}
@media(max-width:1100px){
 .variant-stage:is(.layout-product,.layout-center) .page{max-width:1000px;padding:0 32px;grid-template-rows:76px 1fr auto}
 .variant-stage:is(.layout-product,.layout-center) .hero{padding:24px 0 40px;gap:32px;align-content:start;align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-rows:auto}
 .variant-stage.layout-product .hero{grid-template-areas:"invitation portrait" "demo demo"}
 .variant-stage.layout-center .hero{grid-template-areas:"event portrait" "invitation portrait" "demo demo"}
 .variant-stage:is(.layout-product,.layout-center) .invitation{display:block;grid-row:auto;align-self:start;padding:0}
 .variant-stage.layout-center .event-feature{grid-row:auto}
 .variant-stage:is(.layout-product,.layout-center) h1{font-size:clamp(40px,5.6vw,58px);line-height:1.08;margin-bottom:20px}
 .variant-stage:is(.layout-product,.layout-center) .subtitle{font-size:clamp(20px,2.5vw,26px);line-height:1.45;margin-bottom:26px;max-width:none}
 .variant-stage:is(.layout-product,.layout-center) .date-feature{gap:12px}
 .variant-stage:is(.layout-product,.layout-center) .date-feature strong{font-size:64px}
 .variant-stage:is(.layout-product,.layout-center) .date-feature>span{font-size:23px}
 .variant-stage.layout-center .webinar-outcomes{margin-bottom:28px;max-width:none}
 .variant-stage.layout-center .webinar-outcomes li{font-size:14px;line-height:1.6}
 .variant-stage:is(.layout-product,.layout-center) .stage-portrait{position:relative;display:block;height:400px;min-height:0;border:0;padding:0;align-self:center}
 .variant-stage.layout-center .stage-portrait{height:500px}
 .variant-stage:is(.layout-product,.layout-center) .stage-portrait>img{position:absolute;top:0;left:0;bottom:auto;width:100%;height:calc(100% - 100px);max-height:none;object-fit:contain;object-position:center bottom}
 .variant-stage:is(.layout-product,.layout-center) .stage-speaker{position:absolute;left:0;bottom:0;top:auto;width:100%;margin:0;padding:0;border:0;text-align:center;align-items:center;gap:6px}
 .variant-stage:is(.layout-product,.layout-center) .stage-speaker strong{font-size:24px;max-width:none}
 .variant-stage:is(.layout-product,.layout-center) .stage-speaker>span{font-size:12px;max-width:260px;line-height:1.5}
 .variant-stage:is(.layout-product,.layout-center) .stage-speaker .speaker-eyebrow{font-size:9px}
 .variant-stage:is(.layout-product,.layout-center) .product-evidence{gap:28px}
 .variant-stage:is(.layout-product,.layout-center) #flow-stage{height:auto;min-height:350px;padding:24px}
 .variant-stage:is(.layout-product,.layout-center) .flow-view{height:auto}
 .variant-stage:is(.layout-product,.layout-center) .flow-view:has(.flow-table){grid-template-columns:1fr;grid-template-areas:"task" "heading" "table" "total";gap:14px}
 .variant-stage:is(.layout-product,.layout-center) .flow-task-title,.variant-stage:is(.layout-product,.layout-center) .flow-list-title{font-size:23px;line-height:1.3}
 .variant-stage:is(.layout-product,.layout-center) .flow-table table{font-size:14px}
 .variant-stage:is(.layout-product,.layout-center) .flow-table th{font-size:12px}
 .variant-stage:is(.layout-product,.layout-center) .flow-table td{height:42px;overflow-wrap:anywhere}
 .variant-stage:is(.layout-product,.layout-center) .flow-task-row{font-size:14px;min-height:48px}
 .variant-stage:is(.layout-product,.layout-center) .flow-list-note{font-size:12px;margin-top:16px}
 .variant-stage:is(.layout-product,.layout-center) .flow-total{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:13px;padding:12px 14px}
 .variant-stage:is(.layout-product,.layout-center) .flow-total strong{font-size:30px}
 .variant-stage:is(.layout-product,.layout-center) .demo-label{font-size:12px;margin-bottom:12px}
 .variant-stage:is(.layout-product,.layout-center) .demo-caption{font-size:12px}
 .variant-stage:is(.layout-product,.layout-center) .playback-button{min-height:44px;font-size:12px}
 .variant-stage:is(.layout-product,.layout-center) .demo-footnote{font-size:10px;flex-wrap:wrap;gap:4px 12px}
 .variant-stage.layout-product .webinar-outcomes ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
 .variant-stage.layout-product .webinar-outcomes li{padding:24px 0 0;font-size:14px}
 .variant-stage.layout-product .webinar-outcomes li::before{top:0;left:0}
 .variant-stage:is(.layout-product,.layout-center) .footer{padding:16px 0 24px}
}
@media(max-width:600px){
 .variant-stage:is(.layout-product,.layout-center) .page{padding:0 20px;grid-template-rows:76px 1fr auto}
 .variant-stage:is(.layout-product,.layout-center) .header img{width:138px}
 .variant-stage:is(.layout-product,.layout-center) .header-note{max-width:130px;font-size:9px;line-height:1.5}
 .variant-stage:is(.layout-product,.layout-center) .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:32px;padding:22px 0 24px}
 .variant-stage.layout-product .hero{grid-template-areas:"invitation" "demo" "portrait"}
 .variant-stage.layout-center .hero{grid-template-areas:"event" "invitation" "portrait" "demo"}
 .variant-stage:is(.layout-product,.layout-center) h1{font-size:clamp(40px,10.5vw,60px);line-height:1.08;letter-spacing:-.06em}
 .variant-stage:is(.layout-product,.layout-center) .subtitle{font-size:clamp(20px,5.5vw,26px);margin-bottom:26px}
 .variant-stage:is(.layout-product,.layout-center) .date-feature strong{font-size:64px}
 .variant-stage:is(.layout-product,.layout-center) .date-feature>span{font-size:clamp(20px,5.4vw,26px)}
 .variant-stage:is(.layout-product,.layout-center) .invitation>#register-open{width:100%;min-height:60px;padding:16px 18px;font-size:16px}
 .variant-stage:is(.layout-product,.layout-center) .participation-note{width:100%}
 .variant-stage.layout-center .stage-portrait{height:340px}
 .variant-stage.layout-product .stage-portrait{height:180px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;border-top:1px solid #ffffff20;padding-top:16px}
 .variant-stage.layout-product .stage-portrait>img{position:static;width:110px;height:160px}
 .variant-stage.layout-product .stage-speaker{position:static;text-align:left;align-items:flex-start}
 .variant-stage.layout-product .stage-speaker strong{font-size:21px}
 .variant-stage.layout-product .stage-speaker>span{font-size:11px}
 .variant-stage:is(.layout-product,.layout-center) #flow-stage{min-height:360px;padding:20px 14px}
 .variant-stage:is(.layout-product,.layout-center) .flow-task-title,.variant-stage:is(.layout-product,.layout-center) .flow-list-title{font-size:20px}
 .variant-stage:is(.layout-product,.layout-center) .flow-table table{font-size:12px}
 .variant-stage:is(.layout-product,.layout-center) .flow-table th{font-size:10px;overflow-wrap:anywhere}
 .variant-stage:is(.layout-product,.layout-center) .flow-task-row{font-size:12px;padding:10px 6px}
 .variant-stage:is(.layout-product,.layout-center) .flow-list-head,.variant-stage:is(.layout-product,.layout-center) .flow-task-row{grid-template-columns:minmax(0,1fr) 74px;gap:8px}
 .variant-stage:is(.layout-product,.layout-center) .demo-label{font-size:11px;gap:12px;align-items:start}
 .variant-stage:is(.layout-product,.layout-center) .demo-caption{font-size:11px;gap:6px}
 .variant-stage:is(.layout-product,.layout-center) .flow-total strong{font-size:27px}
 .variant-stage.layout-product .webinar-outcomes ol{grid-template-columns:1fr;gap:16px}
 .variant-stage.layout-product .webinar-outcomes li{padding:0 0 0 28px;font-size:14px}
 .variant-stage.layout-product .webinar-outcomes li::before{top:4px}
 .variant-stage:is(.layout-product,.layout-center) dialog{padding:28px 20px}
 .variant-stage:is(.layout-product,.layout-center) .form-submit{width:100%;font-size:13px;gap:12px}
}