.hero-line,.hero-line>span,.hero-line>em{display:block}
html{scroll-padding-top:var(--header-height,89px)}
.has-dom3d>img,.has-dom3d:before,.has-dom3d:after,.story-art.has-webgl>img,.story-art.has-webgl:after{display:none}
/* WebGL story: canvas fills the stage; captions are HTML placed by projection so they stay crisp. */
.story-canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.story-captions{position:absolute;inset:0;pointer-events:none;z-index:4}.story-captions .device-caption{position:absolute;left:0;top:0;margin:0;white-space:nowrap;transform:translate(-50%,0);will-change:transform,opacity}
.has-webgl .story-timeline{display:flex}
/* Conversation scene in "Como funciona" (22/10/2026; it was the hero 3D): a full-width stage, so the rings are never cut
   at the side of the page, with soft edges all round. The canvas fades in when the section is first seen. */
.chat-art{position:relative;height:clamp(480px,70svh,680px);margin:0 0 56px;overflow:hidden}
.chat-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .5s;pointer-events:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 11%,#000 87%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 11%,#000 87%,transparent);mask-composite:intersect}
.chat-canvas.is-dragging{cursor:grabbing}
.chat-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.4px;color:#8fa6bf;pointer-events:none;opacity:0;transition:opacity .6s;display:flex;align-items:center;gap:8px;white-space:nowrap}
.chat-hint:before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.chat-art.has-webgl .chat-hint{opacity:1;transition-delay:1.8s}.chat-hint.is-hidden{opacity:0!important;transition-delay:0s}
.chat-art figcaption{position:absolute;right:max(24px,calc((100% - 1240px)/2));bottom:14px;z-index:3;font-size:8px;letter-spacing:.5px;color:#a6b5cd}
/* Without WebGL (or with ?motion=off) the conversation is plain HTML bubbles; with WebGL it stays for screen readers only. */
.chat-thread{list-style:none;margin:0 auto;padding:32px 0;height:100%;width:min(540px,calc(100% - 40px));display:flex;flex-direction:column;justify-content:center;gap:16px}
.chat-thread li{max-width:80%;padding:14px 18px 10px;border:1px solid #3c5f8f;border-radius:18px;background:linear-gradient(160deg,#ffffff1f,#ffffff08);color:#fff;box-shadow:0 18px 40px #0007}
.chat-thread .chat-visitor{align-self:flex-end;border-bottom-right-radius:4px;background:linear-gradient(160deg,#3d5cff52,#0019ff1f)}
.chat-thread .chat-destrafic{align-self:flex-start;border-bottom-left-radius:4px}
.chat-thread b{display:block;margin-bottom:6px;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#00d0ff}
.chat-thread p{font-size:16px;line-height:1.45}
.chat-time{display:block;margin-top:6px;text-align:right;font-size:10px;color:#ffffffa6}
.chat-art.has-webgl .chat-thread{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:800px){.chat-art{height:470px;margin-bottom:36px}.chat-hint{bottom:10px;font-size:10px}.chat-canvas{-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 89%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 89%,transparent)}.chat-thread p{font-size:15px}}
.dom-stage{position:absolute;inset:0;overflow:hidden;contain:layout paint style;background:radial-gradient(ellipse at 50% 55%,#07305d55,transparent 68%)}
.scene-fit{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0;will-change:transform}
.dom-world{position:relative;width:0;height:0;isolation:isolate}
.device-shell{position:absolute;width:700px;height:580px;left:0;top:0;z-index:0}
.device-lid{position:absolute;left:47px;top:0;width:606px;height:380px;background:linear-gradient(145deg,#1e2229,#050608 40%,#15181f);border:2px solid #7b838f;border-radius:20px 20px 10px 10px;box-shadow:0 0 0 2px #13151b,0 4px 4px #0008,inset 0 0 0 6px #08090c}
.notch{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:70px;height:13px;background:#08090c;border-radius:0 0 8px 8px;z-index:4}
.notch:after{content:'';position:absolute;top:4px;left:32px;width:4px;height:4px;border-radius:50%;background:#162535;box-shadow:0 0 0 1px #06070a}
.device-hinge{position:absolute;left:82px;right:82px;top:374px;height:10px;background:linear-gradient(#07090e,#555b65,#11141b);border-radius:4px}
.device-keyboard{position:absolute;top:381px;left:47px;width:606px;height:260px;transform:perspective(1000px) rotateX(52deg);transform-origin:50% 0;background:linear-gradient(115deg,#444a54,#272c34 38%,#3b414b 78%,#555b63);border:1px solid #7e8590;border-bottom:7px solid #333943;border-radius:5px 5px 18px 18px;box-shadow:0 6px 0 #151922,0 8px 0 #69717d,0 18px 26px #0008}
.keybed{position:absolute;left:52px;right:52px;top:13px;height:142px;background:#080b10;padding:5px;border-radius:8px;box-shadow:inset 0 0 0 1px #000,0 1px 1px #89909b55;display:flex;flex-direction:column;gap:4px}
.key-row{display:flex;gap:4px;flex:1;min-height:0}.key{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(#20242c,#10131b);border:1px solid #454a54;border-bottom:2px solid #05070b;box-shadow:0 1px 0 #000,inset 0 1px 0 #737a8538;border-radius:3px;color:#cdd3df;font:8px/1 Arial,sans-serif}.row-0{flex:.75}.row-0 .key{font-size:6px}.key.wide-key{flex:1.5;font-size:5px}.key.space-key{flex:6}.row-5 .key{font-size:5px}
.speaker{position:absolute;top:20px;bottom:104px;width:27px;background:radial-gradient(circle,#080b10 1px,transparent 1.4px) 0 0/4px 4px;opacity:.85}.speaker-left{left:14px}.speaker-right{right:14px}
.trackpad{position:absolute;top:169px;left:192px;width:222px;height:71px;border:1px solid #12161f;border-radius:7px;background:linear-gradient(130deg,#373e48,#303741);box-shadow:0 1px 0 #8d949f66,inset 0 1px 2px #14192270}
.lip{position:absolute;bottom:-6px;left:250px;width:106px;height:5px;background:#141923;border-radius:0 0 12px 12px}
.screen-plane{position:absolute;left:0;top:0;width:580px;height:350px;z-index:3;isolation:isolate;will-change:transform,opacity}
.tablet-plane{width:290px;height:390px;z-index:2}.phone-plane{width:180px;height:380px;z-index:1}
/* Soft shadow that deepens while a screen is in flight, then settles. */
.tablet-plane:after,.phone-plane:after{content:'';position:absolute;inset:12px -8px -26px;border-radius:28px;background:#010409;filter:blur(22px);opacity:calc(var(--lift,0)*.85);z-index:-1;will-change:opacity}
.live-screen{position:relative;width:100%;height:100%;background:linear-gradient(130deg,#626b76,#20242c 20%,#10141a 70%,#5c6570);border:1px solid #87909b;border-radius:16px;box-shadow:3px 2px 0 #141820,5px 3px 0 #65717d,0 20px 50px #0007;color:#fff;transform-origin:center}
.device-display{height:100%;width:100%;position:relative;z-index:1;padding:20px;background:linear-gradient(125deg,#132b4b,#0a1730);overflow:hidden;border-radius:inherit}
.desktop-screen{border:1px solid #5eafe0;border-radius:8px;box-shadow:4px 4px 0 #163b5e,0 18px 35px #0005}
.desktop-screen .device-display{border-radius:8px}
.tablet-screen{padding:11px;border-radius:20px}.tablet-screen .device-display{padding:15px;border-radius:10px}.phone-screen{padding:7px;border-radius:30px}.phone-screen .device-display{border-radius:23px;padding:31px 10px 20px}
.front-camera{position:absolute;background:#030407;box-shadow:inset 0 0 1px #354454;border-radius:50%;height:4px;width:4px;right:3px;top:50%}.phone-screen .front-camera{width:44px;height:12px;left:50%;right:auto;top:13px;transform:translateX(-50%);border-radius:9px}
.home-indicator{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:45px;height:3px;background:#d5dce7;border-radius:3px}.tablet-screen .home-indicator{bottom:15px;width:65px;height:2px}
.device-caption{display:block;text-align:center;color:#c3d9ef;font-size:13px;letter-spacing:1px;margin-top:20px;transform-origin:50% 0}
.ui-bar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #6386ad;padding-bottom:10px;gap:12px}
.ui-bar>.logo-stack{width:168px;height:42px;flex:none}.ui-bar>span:not(.logo-stack){font-size:10px;letter-spacing:1px;color:#d5e7fb}
.ui-content{display:flex;gap:18px;padding:16px 0;align-items:center}
.ui-copy{flex:1;min-width:0}.ui-copy strong{display:block;font-size:40px;line-height:1.12;letter-spacing:-1.5px}
.ui-copy p{font-size:13px;color:#e1ebfa;margin:10px 0}
.ui-button{display:inline-block;background:#0019ff;border:1px solid #5364ff;border-radius:5px;padding:10px 16px;font-size:13px;font-weight:600}
.ui-art{width:185px;height:180px;flex:none;border-radius:9px;background:#05152b url('assets/destrafic-showcase.webp') center 58%/cover}
.ui-footer{border-top:1px solid #55779a;display:flex;justify-content:space-between;padding-top:12px;font-size:12px;color:#dbeaff}
.tablet-screen .ui-bar>.logo-stack{width:140px;height:34px}.tablet-screen .ui-bar>span:not(.logo-stack),.phone-screen .ui-bar>span:not(.logo-stack){display:none}
.tablet-screen .ui-content{display:block;padding:14px 0 0}.tablet-screen .ui-copy strong{font-size:29px;letter-spacing:-1px}.tablet-screen .ui-copy p{font-size:12px;margin:9px 0}.tablet-screen .ui-button{font-size:11px;padding:8px 12px}.tablet-screen .ui-art{width:100%;height:106px;margin-top:14px;background-position:center 60%}.tablet-screen .ui-footer{display:none}
.phone-screen .ui-bar>.logo-stack{width:118px;height:30px}.phone-screen .ui-bar{padding-bottom:8px}.phone-screen .ui-content{display:block;padding:16px 0 0}.phone-screen .ui-copy strong{font-size:23px;letter-spacing:-.8px}.phone-screen .ui-copy p{font-size:11px;margin:10px 0}.phone-screen .ui-button{font-size:10px;padding:8px 10px}.phone-screen .ui-art{width:100%;height:92px;margin-top:16px;background-position:center 60%}.phone-screen .ui-footer{display:none}
.screen-story{position:relative;background:radial-gradient(ellipse at 50% 50%,#081b3a,#03050f 70%);border-top:1px solid #203047;padding:60px 0}
.story-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.story-heading>div{min-width:0}.story-heading h2{font-size:clamp(24px,3vw,38px);margin-top:12px}.story-heading>p{max-width:310px;font-size:13px;color:var(--muted)}
.story-art{position:relative;height:540px;max-height:none;min-height:0;aspect-ratio:auto;border:0;background:none;overflow:hidden;margin:10px auto}.story-art>img{object-fit:contain}.story-art.has-dom3d:after{display:none}
.story-art figcaption{left:0;bottom:0;font-size:8px}.screen-labels{display:none}
.story-timeline{display:none}.has-dom3d .story-timeline,.has-webgl .story-timeline{display:flex;position:absolute;top:5px;left:4%;right:4%;justify-content:space-between;padding-top:13px;font-size:10px;color:#bfd5ed;z-index:5;pointer-events:none}
.story-timeline:before,.story-timeline:after{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:#1e354f}.story-timeline:after{background:var(--cyan);transform:scaleX(var(--story-progress,0));transform-origin:left}.story-timeline b{font-weight:400;margin-left:6px}
.story-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #243045;padding-top:16px}.story-bottom>p{font-size:11px;color:var(--muted)}.story-scroll{font-size:9px;color:var(--cyan);letter-spacing:1px}
.dimensional-motion .screen-story{height:270svh;padding:0}.dimensional-motion .story-sticky{position:sticky;top:var(--header-height,89px);height:calc(100svh - var(--header-height,89px));display:flex;flex-direction:column;padding:20px 0 55px;overflow:hidden;min-height:0}.dimensional-motion .story-heading,.dimensional-motion .story-bottom{flex:none}.dimensional-motion .story-art{flex:1;height:auto;width:min(1560px,calc(100% - 48px));min-height:0}
/* Laptops: give the stage the height the chrome was taking. */
@media(min-width:801px) and (max-height:860px){.dimensional-motion .story-sticky{padding:10px 0 24px}.dimensional-motion .story-heading>p{display:none}.dimensional-motion .story-heading h2{font-size:clamp(22px,2.4vw,30px);margin-top:4px}.dimensional-motion .story-heading h2 br{display:none}.dimensional-motion .story-heading h2 em{margin-left:.25em}.dimensional-motion:not(.dimensional-autoplay) .story-bottom{display:none}}
.motion-control{position:fixed;bottom:12px;right:12px;z-index:30;border:1px solid #455875;border-radius:24px;background:#0b1226f5;color:#d9e5f7;min-height:44px;padding:10px 16px;font-size:11px;cursor:pointer}.motion-control:focus-visible{outline:3px solid var(--cyan)}
.motion-control{transition:opacity .25s,transform .25s}.motion-control.is-away{opacity:0;transform:translateY(10px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.motion-control{transition:none}}
.motion-control.is-inline{position:absolute;bottom:0;right:0;z-index:6}
@media(max-width:1100px){.dimensional-motion .story-art{width:calc(100% - 40px)}}
/* Autoplay (narrow screens): the section scrolls like any other; the stage gets a tall, fixed box and the scene plays inside it. */
.dimensional-autoplay .screen-story{height:auto;padding:48px 0 28px}
.dimensional-autoplay .story-sticky{position:static;height:auto;display:block;padding:0;overflow:visible}
.dimensional-autoplay .story-art{height:min(190vw,760px);width:calc(100% - 16px);margin:16px auto 10px}
.dimensional-autoplay .story-bottom{margin-top:6px}
.story-cta{flex:none}
/* Header variants (?topo=3d / ?topo=camadas): the scene takes the image's place and reaches the page's right edge. */
[data-topo] .hero-art:has(.has-webgl){right:calc((100% - 100vw)/2);width:calc(58% + (100vw - 100%)/2)}
[data-topo] .hero-art:has(.has-webgl)>img,[data-topo] .hero-art:has(.has-webgl)>figcaption{opacity:0}
.hero-art .chat-art{position:absolute;inset:0;height:auto;margin:0}.hero-art .chat-art figcaption{display:none}
.hero-art .chat-canvas{pointer-events:auto}
.hero-layers{position:absolute;inset:0}.hero-layers .story-captions{display:none}
@media(max-width:800px){[data-topo] .hero-art:has(.has-webgl){right:auto;width:calc(100% + 40px)}}
/* Static image in "Como funciona" when the conversation is in the header. */
.process-art{display:none}
.topo-3d-live .process-art{display:block;position:relative;width:min(820px,calc(100% - 48px));height:clamp(480px,70svh,660px);margin:0 auto 56px;overflow:hidden}
.topo-3d-live .process-art img{width:100%;height:100%;object-fit:cover;object-position:center 62%;mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
@media(max-width:800px){.topo-3d-live .process-art{width:100%;height:420px}}
/* Tablets in portrait (640-800px) get the landscape page in WebGL: a stage as tall as it is wide left ~250px empty. */
@media(min-width:640px) and (max-width:800px){.dimensional-autoplay .story-art[data-renderer^=webgl]{height:min(72vw,760px)}}
@media(min-width:801px){.dimensional-autoplay .screen-story{padding:28px 0 36px}.dimensional-autoplay .story-art{height:min(calc(100svh - var(--header-height,89px) - 215px),820px);min-height:440px;width:min(1560px,calc(100% - 48px))}}
@media(max-width:800px){.story-heading{gap:14px;align-items:start}.story-heading h2{font-size:25px;letter-spacing:-1px}.story-heading>p{font-size:10px;max-width:125px}.story-heading .eyebrow{font-size:7px;letter-spacing:.8px}.dimensional-motion .story-sticky{padding-top:14px;padding-bottom:55px}.dimensional-motion .story-art{width:calc(100% - 24px)}.story-art{height:480px}.story-bottom{gap:10px}.story-bottom>p{display:none}.story-bottom .story-cta{flex:1 1 auto;min-width:0;justify-content:space-between}.story-scroll{font-size:7px}.has-dom3d .story-timeline{font-size:8px;left:5%;right:5%}}
@media(max-height:620px){.dimensional-motion .story-sticky{padding-top:8px;padding-bottom:10px}.story-heading>p,.story-bottom,.story-art figcaption{display:none}.story-heading h2{font-size:20px;margin-top:4px}.story-heading h2 br{display:none}.story-heading .eyebrow{font-size:7px}.has-dom3d .story-timeline{font-size:8px;padding-top:8px}.motion-control{font-size:9px;min-height:36px;padding:7px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
@media(max-width:420px){.story-heading>p{display:none}.story-heading h2{font-size:26px}.story-heading h2 br{display:none}.story-scroll{display:none}}
@media(max-height:620px){.header-inner{height:60px}.header-inner nav{top:60px}.story-heading h2 em{margin-left:.25em}.story-art .device-caption{font-size:15px}}
@media(max-height:620px){.header-inner .brand img{max-height:48px;width:auto;max-width:140px}.header-inner nav .nav-cta{padding-block:8px}}
@media(max-width:420px){.story-heading h2 em{display:block}}
.logo-stack{--logo-height:64px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:185px;height:64px;flex-shrink:0}
.logo-art{position:relative;display:block;flex:none;width:calc(var(--logo-height)*20/9);height:var(--logo-height)}
.logo-stack img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain}
.logo-stack .logo-type{clip-path:inset(0 0 0 29%)}
.logo-stack .logo-color{clip-path:inset(0 71% 0 0)}
.ui-bar>.logo-stack{--logo-height:42px}
.tablet-screen .ui-bar>.logo-stack{--logo-height:34px}
.phone-screen .ui-bar>.logo-stack{--logo-height:30px}
@media(max-width:800px){.brand>.logo-stack{--logo-height:58px;width:150px;height:58px}}
@media(max-height:620px){.header-inner .brand>.logo-stack{--logo-height:48px;width:140px;height:48px}}

.tablet-screen,.phone-screen{background:transparent;border-color:#3f769a;box-shadow:3px 2px 0 #18354b,0 12px 24px #0004}
.tablet-screen:before,.phone-screen:before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(130deg,#818b97,#20242c 25%,#111820 70%,#697684);border:1px solid #a3b8c9;opacity:var(--hardware,0)}
.front-camera,.home-indicator{z-index:2;opacity:var(--hardware,0)}
.live-screen{will-change:transform}
.device-shell{will-change:transform,opacity}
.tablet-screen:before,.phone-screen:before{will-change:opacity}
.phone-screen .ui-copy p{display:none}.phone-screen .ui-button{margin-top:14px}.phone-screen .ui-art{height:80px}
.desktop-plane .device-caption{transform:translateY(calc(var(--hardware,0)*225px))}
.coming-soon .pill{background:#eef3ff;color:#334b80;border-color:#becbe6;font-weight:600}
.service-card .future-status{font-size:12px;font-weight:500;margin-top:28px;padding-top:24px;border-top:1px solid #d5deed;color:#526580}
/* #sites variants (21/10): layer names in the "site em camadas" option. */
.story-captions .layer-caption{transform-origin:0 100%;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#00d0ff;display:flex;align-items:center;gap:8px}
.story-captions .layer-caption:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
@media(max-width:800px){.story-captions .layer-caption{font-size:9px;letter-spacing:1.1px}}
/* #sites on desktops (22/10/2026: "achei pequeno"): text on the left, the layers scene as tall as the window allows. */
@media(min-width:1100px){
.dimensional-autoplay .screen-story{padding:32px 0}
.dimensional-autoplay .story-sticky{display:grid;grid-template-columns:clamp(290px,25vw,400px) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:clamp(28px,3vw,56px);width:min(1560px,calc(100% - 48px));margin:0 auto}
.dimensional-autoplay .story-sticky>.container{width:auto;margin:0}
.dimensional-autoplay .story-heading{grid-column:1;grid-row:1;align-self:end;flex-direction:column;align-items:flex-start;gap:18px}
.dimensional-autoplay .story-heading h2{font-size:clamp(32px,2.9vw,46px);margin-top:12px}.dimensional-autoplay .story-heading h2 br{display:inline}.dimensional-autoplay .story-heading h2 em{margin-left:0}
.dimensional-autoplay .story-heading>p{display:block;max-width:none;font-size:14px}
.dimensional-autoplay .story-art{grid-column:2;grid-row:1/3;width:100%;height:clamp(500px,calc(100svh - var(--header-height,89px) - 64px),900px);min-height:0;margin:0}
.dimensional-autoplay .story-sticky>.story-bottom{grid-column:1;grid-row:2;align-self:start;flex-direction:column;align-items:flex-start;gap:18px;margin:28px 0 0}
.dimensional-autoplay .story-bottom>p{display:block;font-size:12px;line-height:1.7}
.dimensional-autoplay .story-scroll{display:none}
}
/* Header entrance once the loading screen lifts (only with JavaScript: `is-loading` comes from the inline script). */
.hero-copy .eyebrow,.hero-line>span,.hero-line>em,.hero-description,.hero-actions,.hero-proof{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hero-art>img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.is-loading .hero-copy .eyebrow,.is-loading .hero-line>span,.is-loading .hero-line>em,.is-loading .hero-description,.is-loading .hero-actions,.is-loading .hero-proof{opacity:0;transform:translateY(26px)}
.is-loading .hero-art>img{transform:scale(1.05)}
.hero-line:nth-child(1)>*{transition-delay:.08s}.hero-line:nth-child(2)>*{transition-delay:.16s}.hero-line:nth-child(3)>*{transition-delay:.24s}
.hero-description{transition-delay:.34s}.hero-actions{transition-delay:.42s}.hero-proof{transition-delay:.5s}
@media(prefers-reduced-motion:reduce){.is-loading .hero-copy .eyebrow,.is-loading .hero-line>span,.is-loading .hero-line>em,.is-loading .hero-description,.is-loading .hero-actions,.is-loading .hero-proof{transform:none}.is-loading .hero-art>img{transform:none}}
/* Tablet (640–800px): the assembled page is landscape, so a phone-height stage left ~250px empty above it. */
@media(min-width:640px) and (max-width:800px){.dimensional-autoplay .story-art{height:min(82vw,640px)}}