/* WastePass 3D film presentation. Scoped to the landing-page film. */
.hero-grid{grid-template-columns:40% 60%;gap:0;min-height:660px}.hero-text{padding-right:18px}.hero h1{font-size:clamp(44px,4.6vw,67px)}.hero-text>p{max-width:465px}.cinematic-stage.hero-stage{height:auto;margin:42px -3% 35px 3%;min-width:0}.cinema{border:1px solid #92c3bc40;border-radius:13px;overflow:hidden;background:#113138;box-shadow:0 25px 60px #020c1126;position:relative;isolation:isolate}.cinema-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;background:#113138;min-height:44px}.cinema-brand{font-size:9px;letter-spacing:.12em;color:#a6c5c3;display:flex;align-items:center;gap:10px}.cinema-brand i{width:3px;height:3px;background:#72c6b8;border-radius:50%}.cinema-expand{display:flex;align-items:center;gap:6px;background:transparent;border:0;color:#b7d1ce;font-size:21px;padding:0;line-height:1}.cinema-expand span{font-size:10px}.cinema-picture{position:relative;aspect-ratio:16/9;overflow:hidden;background:#d4dfd9}.cinema-picture canvas{display:block;width:100%;height:100%;max-width:none}.film-loading{position:absolute;inset:0;display:grid;place-items:center;color:#3c6864;background:#e9f0ec;font-size:14px}.film-loading[hidden]{display:none}.shot-topline{position:absolute;inset:15px 17px auto;display:flex;justify-content:space-between;color:#fff;font-size:8px;font-weight:700;letter-spacing:.09em;text-shadow:0 1px 8px #000b;pointer-events:none}.shot-topline span:first-child{padding:4px 7px;background:#163c37a6;border-radius:3px}.shot-topline span:last-child{padding-top:4px}.cinema-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:124px;padding:22px 24px;background:#113138}.cinema-caption #sceneEyebrow{font-size:9px;letter-spacing:.13em;color:#91c8bd;display:block;margin-bottom:9px}.cinema-caption h3{font-size:21px;color:#e6f1ee;margin:0 0 8px;letter-spacing:-.03em}.cinema-caption p{font-size:12px;color:#a5c1c1;margin:0;line-height:1.65;max-width:530px}.cinema-mini-play{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #83b9b54d;flex-shrink:0;background:transparent;color:#b5d7d1;font-size:14px}.cinema-footer{padding-bottom:36px}.cinema-footer .chapter{font-size:11px}.tag-detail{position:absolute;inset:9% 6%;display:grid;grid-template-columns:1.04fr 1fr;gap:28px;padding:30px;border-radius:10px;align-items:center;color:#21433d;background:#f8fbf6f5;box-shadow:0 14px 40px #203a2d20;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;pointer-events:none}.tag-detail.on{opacity:1;transform:translateY(0)}.tag-macro{min-width:0}.tag-macro img{width:100%;filter:drop-shadow(0 10px 7px #5545231a)}.film-kicker{font-size:8px;letter-spacing:.09em;color:#568a7b;font-weight:700;display:block;margin-bottom:10px}.tag-detail h3{font-size:25px;line-height:1.2;margin-bottom:12px}.hero .tag-detail p{font-size:10px;color:#5b7c70;margin-bottom:12px}.id-chip{font-size:9px;display:inline-block;padding:5px 8px;background:#e6f0e9;color:#447465;border-radius:4px}.cinema-event{position:absolute;left:4%;top:14%;max-width:43%;display:flex;gap:12px;padding:16px 18px;background:#f6faf6f7;border:1px solid #c2dad280;border-radius:9px;box-shadow:0 12px 40px #153b351c;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}.cinema-event.on{opacity:1;transform:none}.event-state{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#25836a;background:#e3eee5;font-size:12px;font-weight:700;flex-shrink:0}.cinema-event.warn .event-state{color:#ae5d51;background:#f4e7e1}.cinema-event .film-kicker{font-size:7px;margin-bottom:6px}.cinema-event h3{font-size:16px;color:#224b40;margin:0 0 5px;letter-spacing:-.025em;line-height:1.3}.hero .cinema-event p{font-size:9px;color:#5b7e72;line-height:1.6;margin:0;white-space:pre-line}.vehicle-label{position:absolute;top:44%;left:44%;color:#155e54;background:#effaf3d9;padding:4px 8px;font-size:8px;font-weight:700;border-radius:20px;opacity:0;transition:opacity .4s;pointer-events:none}.vehicle-label.on{opacity:1}.cinema-dashboard{position:absolute;inset:6% 5%;padding:20px 24px;background:#f7faf6;border-radius:9px;color:#254a41;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;pointer-events:none;box-shadow:0 20px 60px #1b352c26}.cinema-dashboard.on{opacity:1;transform:none}.dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d5e3db;padding-bottom:9px;font-size:18px;color:#2c8074;font-weight:800;letter-spacing:-.07em}.dash-top b{font-size:10px;color:#517367;font-weight:500;margin-left:9px;letter-spacing:-.02em}.dash-status{font-size:8px;letter-spacing:0;font-weight:500;color:#70877c}.cinema-dashboard h3{font-size:20px;margin:12px 0}.cinema-kpis{display:flex;gap:8px}.cinema-kpis>div{padding:8px 10px;background:#e8f0e9;border-radius:4px;flex:1}.cinema-kpis b{font-size:21px;letter-spacing:-.05em;display:block;font-weight:600;line-height:1.1}.cinema-kpis>div:nth-child(2) b{color:#ae665a}.cinema-kpis>div:nth-child(3) b{color:#a28a5b}.cinema-kpis span{font-size:7px;color:#758a7e;display:block;margin-top:4px}.dash-body{display:grid;grid-template-columns:1fr 1.05fr;gap:16px;margin-top:12px;align-items:center}.route-map{position:relative;background:#edf2ec;border:1px solid #e2e8dd;border-radius:5px;overflow:hidden;max-height:112px}.route-map svg{width:100%;height:112px}.route-map>span{position:absolute;bottom:5px;left:8px;font-size:7px;background:#ffffffe0;border-radius:2px;padding:3px 5px;color:#638473}.event-log>div{display:grid;grid-template-columns:1fr auto;gap:3px 5px;padding:7px 0;border-bottom:1px solid #dbe6df;font-size:8px}.event-log b{font-size:8px;font-weight:600}.event-log span{color:#82968b;font-size:7px}.event-log small{font-size:7px;grid-column:1/-1;display:flex;align-items:center;gap:4px}.event-log small:before{content:'';width:4px;height:4px;background:currentColor;border-radius:50%}.event-log .ok{color:#398674}.event-log .review{color:#b26d61}.hero .dash-disclaimer{font-size:7px;line-height:1.5;color:#83958b;margin:8px 0 0;max-width:none}.rfid-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.rfid-visual{margin:0;position:relative;padding:55px 20px;background:radial-gradient(ellipse,#fbf8e9,#f6f8f3 68%);border:1px solid #e3e8dc;border-radius:12px;overflow:hidden}.rfid-visual img{width:100%;filter:drop-shadow(0 20px 12px #79653d18)}.rfid-visual figcaption{font-size:10px;color:#8a9380;text-align:center;margin-top:35px}.rfid-detail-grid h2{font-size:40px}.rfid-traits{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 16px}.rfid-traits span{font-size:11px;padding:7px 10px;background:#eaf3ee;border-radius:4px;color:#3a776a}.cinema:fullscreen{height:100vh;width:100vw;max-height:none;border:0;border-radius:0;display:flex;flex-direction:column;background:#081e21;justify-content:center;box-shadow:none}.cinema:fullscreen .cinema-picture{width:min(100vw,calc((100vh - 130px)*16/9));max-height:calc(100vh - 130px);align-self:center;flex-shrink:1}.cinema:fullscreen .cinema-caption{min-height:100px;max-height:100px;padding:16px 4%;width:100%;}.cinema:fullscreen .cinema-top{padding:10px 4%;min-height:40px}.cinema:fullscreen .tag-detail h3{font-size:clamp(25px,3vw,54px)}.cinema:fullscreen .film-kicker{font-size:clamp(9px,1vw,16px)}.cinema:fullscreen .tag-detail p{font-size:clamp(12px,1.5vw,23px)}.cinema:fullscreen .id-chip{font-size:clamp(11px,1vw,16px)}.cinema:fullscreen .cinema-event{padding:26px;gap:20px;max-width:40%;top:12%}.cinema:fullscreen .cinema-event h3{font-size:clamp(20px,2.2vw,36px)}.cinema:fullscreen .cinema-event p{font-size:clamp(12px,1.2vw,20px)}.cinema:fullscreen .event-state{width:45px;height:45px;font-size:18px}.cinema:fullscreen .vehicle-label{font-size:14px}.cinema:fullscreen .cinema-dashboard{padding:3% 4%}.cinema:fullscreen .dash-top{font-size:32px}.cinema:fullscreen .dash-top b{font-size:18px}.cinema:fullscreen .dash-status{font-size:12px}.cinema:fullscreen .cinema-dashboard h3{font-size:32px;margin:24px 0}.cinema:fullscreen .cinema-kpis>div{padding:16px 20px}.cinema:fullscreen .cinema-kpis b{font-size:38px}.cinema:fullscreen .cinema-kpis span{font-size:12px}.cinema:fullscreen .route-map{max-height:220px}.cinema:fullscreen .route-map svg{height:220px}.cinema:fullscreen .route-map>span{font-size:11px}.cinema:fullscreen .dash-body{gap:30px;margin-top:20px}.cinema:fullscreen .event-log>div{padding:15px 0}.cinema:fullscreen .event-log b{font-size:15px}.cinema:fullscreen .event-log span,.cinema:fullscreen .event-log small{font-size:12px}.cinema:fullscreen .dash-disclaimer{font-size:11px;margin-top:15px}.cinema:fullscreen .shot-topline{font-size:11px}
@media(max-width:1170px) and (min-width:761px){.hero-grid{grid-template-columns:40% 60%;min-height:620px}.hero h1{font-size:51px}.hero-text>p{font-size:15px}.cinematic-stage.hero-stage{margin-left:3%;margin-right:0}.cinema-caption{padding:19px;min-height:128px}.cinema-caption h3{font-size:19px}.cinema-caption p{font-size:11px}.cinema-brand{font-size:8px}.tag-detail{padding:23px;gap:15px}.tag-detail h3{font-size:21px}.cinema-event{padding:13px;gap:8px}.cinema-event h3{font-size:14px}.cinema-dashboard{padding:15px 18px}.cinema-dashboard h3{font-size:17px;margin:9px 0}.dash-body{margin-top:7px;gap:10px}.route-map,.route-map svg{height:90px}.event-log>div{padding:5px 0}.hero .dash-disclaimer{font-size:6px}.cinema-kpis b{font-size:18px}.cinema-kpis>div{padding:7px 8px}.rfid-detail-grid{gap:40px}}
@media(max-width:960px) and (min-width:761px){.hero-grid{display:block}.hero-text{max-width:680px;padding:45px 0 12px}.hero-text>p{max-width:620px}.hero h1{font-size:56px}.cinematic-stage.hero-stage{max-width:850px;margin:25px 0 30px}.cinema-picture{aspect-ratio:16/9}.cinema-caption{min-height:115px}.cinema-dashboard{padding:22px 28px}.route-map,.route-map svg{height:120px}.cinema-kpis b{font-size:25px}.cinema-dashboard h3{font-size:24px}.event-log>div{padding:9px 0}}
@media(max-width:760px){.hero-grid{display:block;min-height:0}.hero-text{padding:42px 0 8px}.hero h1{font-size:clamp(42px,10vw,61px)}.hero-text>p{font-size:16px}.cinematic-stage.hero-stage{height:auto;margin:28px -3% 15px}.cinema{border-radius:9px}.cinema-top{padding:12px 11px}.cinema-brand{font-size:7px;gap:6px;letter-spacing:.08em}.cinema-expand{font-size:20px}.cinema-expand span{display:none}.cinema-picture{aspect-ratio:4/3}.cinema-picture canvas{object-fit:cover}.cinema-caption{padding:17px 16px;min-height:144px;gap:12px}.cinema-caption h3{font-size:19px}.cinema-caption p{font-size:11px}.cinema-caption #sceneEyebrow{font-size:8px}.cinema-mini-play{width:29px;height:29px}.shot-topline{inset:10px 11px auto;font-size:7px}.tag-detail{inset:14% 5%;grid-template-columns:1fr;gap:8px;padding:20px;text-align:center;align-content:center}.tag-macro img{max-width:200px;margin:auto}.tag-detail h3{font-size:20px;margin:8px 0}.tag-detail h3 br{display:none}.tag-detail .film-kicker{font-size:7px;margin:5px 0}.hero .tag-detail p{font-size:9px;margin-bottom:8px}.id-chip{font-size:8px;padding:4px 7px}.cinema-event{top:17%;left:4%;max-width:59%;padding:12px;gap:8px;border-radius:6px}.cinema-event h3{font-size:13px;margin-bottom:3px}.cinema-event .film-kicker{font-size:6px;letter-spacing:.06em;margin-bottom:5px}.hero .cinema-event p{font-size:8px}.event-state{height:24px;width:24px;font-size:10px}.vehicle-label{font-size:6px;left:50%;top:47%;padding:3px 5px}.cinema-dashboard{inset:8% 4%;padding:14px 13px}.dash-top{font-size:17px;padding-bottom:8px}.dash-top b{font-size:8px;margin-left:7px}.dash-status{font-size:7px}.cinema-dashboard h3{font-size:18px;margin:10px 0}.cinema-kpis{gap:5px}.cinema-kpis>div{padding:8px 7px}.cinema-kpis b{font-size:22px}.cinema-kpis span{font-size:6px;line-height:1.4}.dash-body{margin-top:10px;gap:9px;grid-template-columns:.8fr 1fr}.route-map{max-height:97px}.route-map svg{height:97px}.route-map>span{font-size:5px;left:3px;bottom:3px;padding:3px}.event-log>div{padding:5px 0}.event-log b{font-size:7px}.event-log span{font-size:6px}.event-log small{font-size:6px}.hero .dash-disclaimer{font-size:6px;margin-top:8px}.cinema-footer{padding-top:8px;padding-bottom:28px;gap:14px}.cinema-footer .chapter{font-size:0;padding-top:13px}.cinema-footer .chapter .number{font-size:10px}.rfid-detail-grid{grid-template-columns:1fr;gap:35px}.rfid-visual{padding:36px 20px}.rfid-visual figcaption{font-size:9px;margin-top:24px}.rfid-detail-grid h2{font-size:34px}.rfid-traits{gap:6px}.rfid-traits span{font-size:10px}.cinema:fullscreen .cinema-picture{aspect-ratio:4/3;width:100vw;max-height:calc(100vh - 150px)}.cinema:fullscreen .cinema-caption{min-height:130px;max-height:150px}.cinema:fullscreen .cinema-dashboard{padding:15px}.cinema:fullscreen .dash-top{font-size:19px}.cinema:fullscreen .dash-top b{font-size:9px}.cinema:fullscreen .dash-status{font-size:8px}.cinema:fullscreen .cinema-dashboard h3{font-size:22px;margin:12px 0}.cinema:fullscreen .cinema-kpis>div{padding:10px}.cinema:fullscreen .cinema-kpis b{font-size:25px}.cinema:fullscreen .cinema-kpis span{font-size:7px}.cinema:fullscreen .route-map,.cinema:fullscreen .route-map svg{height:115px;max-height:115px}.cinema:fullscreen .event-log>div{padding:7px 0}.cinema:fullscreen .event-log b{font-size:8px}.cinema:fullscreen .event-log span,.cinema:fullscreen .event-log small{font-size:7px}.cinema:fullscreen .dash-body{gap:12px;margin-top:13px}.cinema:fullscreen .route-map>span,.cinema:fullscreen .dash-disclaimer{font-size:7px}.cinema:fullscreen .cinema-event{padding:15px;max-width:65%}.cinema:fullscreen .cinema-event h3{font-size:16px}.cinema:fullscreen .cinema-event p{font-size:10px}.cinema:fullscreen .film-kicker{font-size:8px}.cinema:fullscreen .event-state{width:30px;height:30px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.cinema *{transition:none!important}}
.rfid-visual img{height:auto;display:block}
@media(max-width:760px){.cinema-picture canvas{object-position:64% center}}
.chapter.active{position:relative}.chapter.active:after{content:'';position:absolute;left:0;top:-1px;width:var(--progress,0);height:1px;background:#8acfc0}
@media(max-width:760px){.cinema-dashboard{inset:5% 4%;padding:12px}.dash-top{font-size:15px;line-height:1.2;padding-bottom:6px}.cinema-dashboard h3{font-size:16px;margin:7px 0;line-height:1.2}.cinema-kpis>div{padding:6px 7px}.cinema-kpis b{font-size:19px}.cinema-kpis span{margin-top:3px}.dash-body{margin-top:8px;gap:8px}.route-map{height:68px;max-height:68px}.route-map svg{height:68px}.event-log>div{padding:3px 0;gap:2px 4px}.hero .dash-disclaimer{font-size:5.5px;margin-top:6px;line-height:1.4}}
@media(max-width:370px){.cinema-dashboard{inset:4% 3%;padding:10px}.cinema-dashboard h3{font-size:14px;margin:5px 0}.dash-top{font-size:14px}.cinema-kpis b{font-size:17px}.cinema-kpis>div{padding:5px}.route-map,.route-map svg{height:57px}.event-log>div{padding:2px 0}.cinema-kpis span{font-size:5.5px}.dash-body{margin-top:6px}.hero .dash-disclaimer{font-size:5px;margin-top:4px}}
/* Geometric renderer sizes itself to its actual viewport. */
.cinema-picture canvas{object-fit:fill;object-position:center}.vehicle-label{display:none}.cinema-picture{background:#dbe7e3}.cinema-event{max-width:40%;top:10%;padding:12px 15px}.cinema-event h3{font-size:14px}.cinema-event .film-kicker{font-size:6px}.cinema-event p{font-size:8px}
@media(max-width:760px){.cinema-event{max-width:54%;top:10%;padding:9px;gap:6px}.cinema-event h3{font-size:11px}.hero .cinema-event p{font-size:7px}.cinema-event .film-kicker{font-size:5px}.cinema-event .event-state{height:20px;width:20px}}

/* Buylo product family: seamless petrol studio, mint architectural diorama. */
.cinematic-stage.hero-stage{margin:18px -4% 20px 0}
.cinema{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.cinema-top{background:transparent;padding:15px 19px 4px;min-height:36px}
.cinema-brand{color:#9bbfbe;font-size:8px;letter-spacing:.12em}
.cinema-picture{aspect-ratio:1.36;background:transparent;overflow:hidden}
.cinema-picture canvas{filter:drop-shadow(0 22px 24px #02161a35)}
.film-loading{background:#102c32;color:#a7ceca}
.shot-topline{color:#91b8b8;font-weight:500;text-shadow:none;font-size:7px;inset:12px 20px auto}
.shot-topline span:first-child{background:transparent;padding:0;color:#77c9bd}.shot-topline span:last-child{padding:0}
.cinema-caption{background:transparent;min-height:111px;padding:3px 20px 20px;gap:14px}
.cinema-caption #sceneEyebrow{font-size:8px;color:#7fc6bf;margin-bottom:7px}
.cinema-caption h3{font-size:20px;font-weight:500}.cinema-caption p{color:#a8c4c4;font-size:12px}
.cinema-event{left:auto;right:3%;top:auto;bottom:3%;max-width:48%;background:#12373eea;border:1px solid #78a9a333;box-shadow:0 12px 28px #03181d24;backdrop-filter:blur(8px);padding:13px 16px}
.cinema-event h3{color:#e0efeb;font-size:13px;font-weight:500}.cinema-event .film-kicker{color:#7cc6bb;font-size:6px}.hero .cinema-event p{color:#a3c4c1;font-size:8px}.event-state{color:#83cfc2;background:#20454a}.cinema-event.warn .event-state{background:#584d3f;color:#e0c497}
.cinema:fullscreen{background:radial-gradient(ellipse at 65% 40%,#20444c,#071d23 72%);overflow:hidden}.cinema:fullscreen .cinema-picture{aspect-ratio:1.6;width:min(100vw,calc((100vh - 150px)*1.6));max-height:calc(100vh - 150px)}
.cinema:fullscreen .cinema-event{top:auto;bottom:5%;right:5%;left:auto;max-width:42%}
@media(min-width:961px){.hero-grid{grid-template-columns:40% 60%;min-height:670px}.hero-text{padding-right:24px}.hero h1{font-size:clamp(44px,4.5vw,65px)}}
@media(max-width:960px){.cinematic-stage.hero-stage{margin:12px -3% 20px}.cinema-picture{aspect-ratio:1.5}}
@media(max-width:760px){.cinema-top{padding:10px 13px 0}.cinema-brand{font-size:6px}.cinema-picture{aspect-ratio:1.25}.cinema-caption{padding:4px 15px 10px;min-height:116px}.cinema-caption h3{font-size:18px}.cinema-caption p{font-size:11px}.cinema-event{max-width:55%;padding:9px 10px;bottom:3%;top:auto;right:2%;left:auto}.cinema-event h3{font-size:10px}.hero .cinema-event p{font-size:7px}.cinema-event .film-kicker{font-size:5px}.shot-topline{font-size:6px;inset:12px 13px auto}.cinema:fullscreen .cinema-picture{aspect-ratio:1.25;width:100vw}.cinema:fullscreen .cinema-event{max-width:60%;padding:12px;bottom:4%;top:auto}.cinema:fullscreen .cinema-event h3{font-size:13px}.cinema:fullscreen .cinema-event p{font-size:9px}}
/* The route summary keeps its natural height when the 3D viewport is taller. */
.cinema-dashboard{inset:auto 5%;top:50%;transform:translateY(calc(-50% + 10px))}.cinema-dashboard.on{transform:translateY(-50%)}
@media(min-width:761px){.cinema-dashboard{padding:24px}.cinema-dashboard h3{font-size:25px;margin:16px 0}.cinema-kpis>div{padding:12px 14px}.cinema-kpis b{font-size:29px}.cinema-kpis span{font-size:9px}.dash-top{font-size:22px}.dash-top b{font-size:12px}.dash-status{font-size:9px}.dash-body{margin-top:16px}.route-map,.route-map svg{height:130px;max-height:130px}.event-log>div{padding:10px 0}.event-log b{font-size:10px}.event-log span,.event-log small{font-size:8px}.hero .dash-disclaimer{font-size:8px;margin-top:12px}}
@media(max-width:760px){.cinema-dashboard{inset:auto 4%;top:50%;padding:12px}}
/* Standalone, chapter-led explanation on How it works. */
.how-presentation{padding:62px 0 48px;margin:15px 0 65px}
.how-demo-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:34px}.how-demo-heading h2{color:#eef6f3;font-size:clamp(33px,3.4vw,47px);line-height:1.12;letter-spacing:-.045em;margin:17px 0 0}.how-demo-heading p{color:#abc4c3;font-size:15px;line-height:1.85;margin:0;max-width:510px}
.how-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center}.how-demo-player{min-width:0}
.how-presentation .cinematic-stage.hero-stage{margin:0;height:auto}.how-presentation .cinema-top{padding-left:0;padding-right:0}.how-presentation .cinema-picture{aspect-ratio:1.36}.how-presentation .cinema-caption{padding:6px 0 20px;min-height:110px}.how-presentation .cinema-caption p{max-width:610px}.how-presentation .cinema-footer{padding:7px 0 0;display:flex;flex-wrap:wrap;gap:20px}.how-presentation .chapters{width:100%}.how-presentation .playback{margin-left:auto}.how-presentation .cinema:fullscreen .cinema-caption{padding:16px 4%}.how-presentation .cinema:fullscreen .cinema-top{padding:10px 4%}
.how-story{display:flex;flex-direction:column;gap:9px}.explain-step{display:grid;grid-template-columns:23px 1fr 14px;gap:10px;align-items:start;text-align:left;background:transparent;border:1px solid #7ab8b61c;border-radius:8px;padding:17px 14px;color:#b4ccca;font-family:inherit;cursor:pointer;transition:background .2s,border-color .2s}.explain-step:hover,.explain-step:focus-visible{border-color:#7fcdc280;background:#173b41;outline:0}.explain-step.active{background:#1a4147;border-color:#79c8ba8c}.explain-number{font-size:10px;color:#7dc4ba;margin-top:4px;letter-spacing:.06em}.explain-step strong{display:block;color:#e8f2ee;font-size:14px;font-weight:600;line-height:1.45}.explain-copy{display:block;font-size:11px;line-height:1.75;color:#9fbebd;margin-top:6px}.explain-play{color:#80c9bd;font-size:14px}.explain-step.active .explain-copy{color:#c1d5cf}
@media(max-width:1100px){.how-demo-grid{grid-template-columns:minmax(0,1fr) 260px;gap:20px}.explain-step{padding:13px 11px;gap:7px}.explain-step strong{font-size:12px}.explain-copy{font-size:10px}.how-presentation .cinema-caption h3{font-size:18px}}
@media(max-width:960px){.how-demo-grid{grid-template-columns:1fr;gap:30px}.how-story{display:grid;grid-template-columns:1fr 1fr}.explain-step:last-child{grid-column:1/-1}.explain-step strong{font-size:14px}.explain-copy{font-size:12px}.how-presentation .cinema-picture{aspect-ratio:1.5}}
@media(max-width:760px){.how-presentation{padding:42px 0 35px;margin-top:0}.how-demo-heading{grid-template-columns:1fr;gap:21px;margin-bottom:25px}.how-demo-heading h2{font-size:35px}.how-demo-heading p{font-size:14px}.how-presentation .cinema-picture{aspect-ratio:1.25}.how-presentation .cinema-caption{padding:4px 3px 15px;min-height:127px}.how-story{grid-template-columns:1fr}.explain-step:last-child{grid-column:auto}.explain-step{padding:15px}.how-presentation .cinema-footer{gap:14px}.how-presentation .cinema:fullscreen .cinema-picture{aspect-ratio:1.25}}

/* The film header contains only its expand control. */
.cinema-top{justify-content:flex-end}