.launch-film{--film-lime:#d3f548;min-width:0;align-self:center;padding-top:12px}.film-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.film-heading>strong{font-size:clamp(24px,2.5vw,36px);line-height:1.1;letter-spacing:-.035em}.film-replay{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--ink);font:inherit;font-size:11px;padding:10px 0 10px 10px}.film-replay svg{width:17px;height:17px}.film-replay:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.film-replay:hover svg{rotate:-35deg}.film-canvas{position:relative;background:#e7e8de;padding:28px 26px 66px;overflow:hidden;isolation:isolate}.film-window{position:relative;background:#fafaf5;color:#20221a;transform-origin:center center}.film-toolbar{height:25px;background:#24271f;color:#f7f7f0;display:flex;align-items:center;gap:4px;padding:0 12px}.film-toolbar>span{width:4px;height:4px;border:1px solid #b3b6a8;border-radius:50%}.film-toolbar small{font-size:7px;letter-spacing:.12em;margin:auto}.film-toolbar svg{width:11px;height:11px}.film-navigation{display:flex;align-items:center;gap:16px;padding:18px 16px;font-size:8px;height:55px}.film-navigation>b{position:relative;margin-right:auto;min-width:95px;font-size:12px;letter-spacing:-.03em}.film-menu{display:grid;gap:4px}.film-menu i{width:13px;height:1px;background:currentColor}.film-banner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:196px;background:var(--film-lime);padding:26px 22px;overflow:hidden}.film-banner-copy{position:relative;z-index:1;flex-shrink:0}.film-banner-copy>strong{display:block;font-size:clamp(23px,2.6vw,38px);line-height:1.02;letter-spacing:-.035em}.film-shop-link{display:inline-flex;align-items:center;gap:20px;margin-top:21px;padding-bottom:5px;border-bottom:1px solid;font-size:9px}.film-shop-link svg{width:12px;height:12px}.film-product{width:112px;flex-shrink:0;margin-left:-6px;rotate:8deg}.film-product svg{display:block;width:100%}.film-products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}.film-products>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:8px}.film-products i{grid-column:1/-1;height:33px;background:#e9ebdf;position:relative}.film-products i:after{content:'';position:absolute;inset:8px 30%;background:#24271f;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}.film-products>div:nth-child(2) i:after{border-radius:50%;clip-path:none;inset:7px 34%}.film-products>div:nth-child(3) i:after{background:var(--film-lime)}.film-products b{font-weight:400;color:#5b6050}.film-connected{display:flex;align-items:center;gap:8px;background:#24271f;color:#f7f7f0;padding:12px 16px;font-size:9px}.film-connected svg{width:14px;height:14px;color:var(--film-lime)}.film-connected i{width:5px;height:5px;border-radius:50%;background:var(--film-lime);margin-left:auto}.film-services{display:flex;position:absolute;bottom:20px;left:26px;right:26px;justify-content:space-between;gap:8px}.film-services>span{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;flex:1}.film-services svg{height:18px;width:18px}.film-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.film-chapters>span{position:relative;border-top:2px solid #c6c9ba;padding-top:12px;font-size:10px;line-height:1.6}.film-chapters>span:before{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:#25281e;transform-origin:left;transform:scaleX(1)}.film-chapters b{font-size:9px;margin-right:4px;font-weight:400}.film-caption{font-size:11px;color:var(--muted);margin-top:17px}.film-skeleton,.film-wire{position:absolute;display:block;background:#cdd0c5;opacity:0}.film-skeleton{inset:0}.film-wire{left:0;height:15px;width:160px;top:0}.wire-two{top:25px;width:118px}
/* One interface changes state; scenes never overlap as separate cards. */
.launch-film.is-playing .film-window{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}.launch-film.is-playing .film-banner,.launch-film.is-playing .film-toolbar{transition:background-color 1.3s,color 1.3s}.launch-film.is-playing .film-brand,.launch-film.is-playing .film-links,.launch-film.is-playing .film-banner-copy>strong,.launch-film.is-playing .film-shop-link,.launch-film.is-playing .film-product,.launch-film.is-playing .film-skeleton,.launch-film.is-playing .film-wire,.launch-film.is-playing .film-products i:after{transition:opacity .8s,transform 1.1s cubic-bezier(.16,1,.3,1)}.launch-film.is-playing .film-connected,.launch-film.is-playing .film-services>span{transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1)}.launch-film[data-stage="1"] .film-window{transform:scale(.92)}.launch-film[data-stage="1"] .film-banner{background:#e4e6dc}.launch-film[data-stage="1"] .film-toolbar{background:#b5b9ab;color:#24271f}.launch-film[data-stage="1"] :is(.film-brand,.film-links,.film-banner-copy>strong,.film-shop-link,.film-product,.film-products i:after){opacity:0;transform:translateY(12px)}.launch-film[data-stage="1"] :is(.film-skeleton,.film-wire){opacity:1}.launch-film:not([data-stage="3"]) :is(.film-connected,.film-services>span){opacity:0;transform:translateY(12px)}.launch-film[data-stage="3"] .film-services>span:nth-child(2){transition-delay:.2s}.launch-film[data-stage="3"] .film-services>span:nth-child(3){transition-delay:.4s}.launch-film[data-stage="1"] .film-chapters>span:not(:first-child):before,.launch-film[data-stage="2"] .film-chapters>span:last-child:before{transform:scaleX(0)}.launch-film.is-playing .film-chapters>span:before{transition:transform 1.6s linear}.launch-film[data-stage="1"] .film-chapters>span:not(:first-child),.launch-film[data-stage="2"] .film-chapters>span:last-child{color:#666c59}
@media(min-width:1200px){.film-banner{min-height:214px}.film-product{width:125px}}
@media(max-width:1000px) and (min-width:701px){.film-canvas{padding:20px 14px 60px}.film-banner{padding:20px 12px}.film-banner-copy>strong{font-size:25px}.film-product{width:80px;margin-left:-20px}.film-navigation{padding:14px 12px}.film-links{display:none}.film-chapters{gap:6px}.film-chapters>span{font-size:9px}.film-heading>strong{font-size:26px}.film-replay span{display:none}}
@media(max-width:700px){.launch-film{margin-top:36px;max-width:520px;width:100%;justify-self:center}.film-heading{margin-bottom:18px}.film-canvas{padding:22px 18px 60px}.film-banner{padding:22px 16px;min-height:180px}.film-banner-copy>strong{font-size:30px}.film-product{width:92px;margin-left:-18px}.film-navigation{padding:14px 12px}.film-products{padding:12px;gap:8px}.film-chapters>span{font-size:9px}.film-chapters b{display:block}.film-caption{font-size:10px}.film-services{left:18px;right:18px}.film-links{font-size:7px}.film-connected{font-size:8px}.film-heading>strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.launch-film *{transition:none!important}.film-replay{display:none}}
@media(max-width:420px){.film-banner-copy>strong{font-size:27px}.film-product{width:76px;margin-left:0}.film-banner{padding-inline:16px}}

/* The final scene switches from visual design to a connected order flow. */
.film-operation{position:absolute;inset:80px 0 0;z-index:3;background:#24271f;color:#f7f7f0;padding:24px 22px;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none}
.film-operation-title{font-size:clamp(26px,2.8vw,40px);line-height:1.05;letter-spacing:-.035em;font-weight:600}
.film-order-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.film-order-flow>div{position:relative;border-top:2px solid #d3f548;padding-top:12px;opacity:0;transform:translateY(10px)}
.film-order-flow span{display:block;color:#d3f548;font-size:10px;margin-bottom:8px}
.film-order-flow strong{display:block;font-size:17px;font-weight:500}
.film-order-flow small{display:block;font-size:9px;line-height:1.5;color:#d1d5c6;margin-top:5px}
.film-operation-result{display:flex;align-items:center;gap:8px;font-size:11px;margin:24px 0 0;color:#d3f548}
.film-operation-result svg{width:18px;height:18px;flex-shrink:0}
.launch-film.is-playing .film-operation{transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1),visibility .5s}
.launch-film.is-playing .film-order-flow>div{transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.launch-film[data-stage="3"] .film-operation{opacity:1;visibility:visible;transform:none}
.launch-film[data-stage="3"] .film-order-flow>div{opacity:1;transform:none}
.launch-film[data-stage="3"].is-playing .film-order-flow>div:nth-child(1){transition-delay:.2s}
.launch-film[data-stage="3"].is-playing .film-order-flow>div:nth-child(2){transition-delay:.45s}
.launch-film[data-stage="3"].is-playing .film-order-flow>div:nth-child(3){transition-delay:.7s}
@media(max-width:1000px) and (min-width:701px){.film-operation{padding:18px 14px}.film-operation-title{font-size:28px}.film-order-flow{gap:8px}.film-order-flow strong{font-size:14px}.film-order-flow small{font-size:8px}}
@media(max-width:700px){.film-operation{padding:22px 16px}.film-operation-title{font-size:32px}.film-order-flow{gap:10px;margin-top:24px}.film-order-flow strong{font-size:16px}}

/* Keep the desktop story within the height of the offer and its actions. */
@media(min-width:701px){
.hero-copy{align-self:start}
.launch-film{align-self:start;padding-top:0;height:var(--film-height,410px);display:flex;flex-direction:column}
.film-heading{flex-shrink:0;margin-bottom:16px}
.film-heading>strong{font-size:28px}
.film-canvas{flex:1;min-height:0;padding:16px 18px 40px}
.film-window{height:100%;display:flex;flex-direction:column}
.film-toolbar{flex-shrink:0;height:20px}
.film-navigation{flex-shrink:0;height:38px;padding:10px 14px}
.film-banner{flex:1;min-height:0;padding:12px 18px}
.film-banner-copy>strong{font-size:26px}
.film-product{width:76px}
.film-shop-link{margin-top:12px}
.film-products{flex-shrink:0;padding:8px 14px;gap:6px}
.film-products i{height:22px}
.film-products i:after{inset:4px 30%}
.film-products>div:nth-child(2) i:after{inset:3px 34%}
.film-connected{flex-shrink:0;padding:7px 14px}
.film-services{bottom:12px;left:18px;right:18px}
.film-services svg{width:14px;height:14px}
.film-chapters{flex-shrink:0;margin-top:12px}
.film-chapters>span{padding-top:8px}
.film-caption{flex-shrink:0;margin-top:10px}
.film-operation{inset:58px 0 0;padding:12px 18px}
.film-operation-title{font-size:28px}
.film-order-flow{margin-top:16px}
.film-order-flow>div{padding-top:8px}
.film-order-flow span{margin-bottom:4px}
.film-operation-result{margin-top:14px;font-size:10px}
}

@media(min-width:701px){.film-operation{inset:20px 0 0}.film-operation-title{font-size:26px}.film-operation-result{margin-top:12px}}

@media(min-width:701px) and (max-width:1199px){.film-operation{padding:10px 14px}.film-operation-title{font-size:22px}.film-order-flow{margin-top:10px}.film-order-flow strong{font-size:14px}.film-order-flow small{font-size:8px}.film-order-flow span{font-size:9px}.film-operation-result{margin-top:8px;font-size:9px}}