/* The same dimensional flame and orbit motion used while a call connects. */
body[data-edition=cloud] .hero-flame-visual{display:flex;align-items:center;justify-content:center;min-width:0;transform:none;margin:0;align-self:center}
.landing-flame-art{position:relative;width:min(100%,420px);aspect-ratio:1;perspective:650px;transform-style:preserve-3d;flex-shrink:0}
.landing-flame-aura{position:absolute;inset:4%;background:radial-gradient(ellipse,#9c62ff55,transparent 68%);filter:blur(22px);animation:landing-flame-breathe 3.8s ease-in-out infinite}
.landing-flame-orbit{position:absolute;inset:20% 6%;border:1px solid #bf9bff65;border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 20px #a87ee51a;animation:landing-flame-orbit 7s linear infinite}
.landing-flame-orbit.orbit-b{inset:16% 13%;border-color:#88cadc45;animation:landing-flame-orbit-b 9s linear infinite reverse}
.landing-flame-orbit.orbit-c{inset:10% 16%;border-style:dashed;border-color:#d3baff30;animation:landing-flame-orbit 13s linear infinite reverse}
.landing-flame-core{position:absolute;inset:9% 22%;transform-style:preserve-3d;animation:landing-flame-float 5s ease-in-out infinite}
.landing-flame-core svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.landing-flame-depth{transform:translate3d(6px,5px,-12px);filter:brightness(.45) saturate(1.3) drop-shadow(0 12px 10px #080c2066)}
.landing-flame-front{transform:translateZ(6px);filter:drop-shadow(1px 1px 0 #bf8dff) drop-shadow(-1px -1px 0 #b27cff88) drop-shadow(0 0 18px #9654ff66)}
.landing-flame-satellite{position:absolute;left:12%;top:22%;width:7px;height:7px;border-radius:50%;background:#d3baff;box-shadow:0 0 15px #ceadff;animation:landing-flame-breathe 2s ease-in-out infinite}
@keyframes landing-flame-orbit{from{transform:rotateX(65deg) rotateY(-20deg) rotateZ(0)}to{transform:rotateX(65deg) rotateY(-20deg) rotateZ(360deg)}}
@keyframes landing-flame-orbit-b{from{transform:rotateY(65deg) rotateX(20deg) rotateZ(0)}to{transform:rotateY(65deg) rotateX(20deg) rotateZ(360deg)}}
@keyframes landing-flame-float{0%,100%{transform:rotateY(-15deg) rotateX(10deg) translateY(0)}50%{transform:rotateY(18deg) rotateX(-8deg) translateY(-7px)}}
@keyframes landing-flame-breathe{0%,100%{opacity:.45;scale:.9}50%{opacity:1;scale:1.1}}
html[data-motion=paused] .landing-flame-art *{animation-play-state:paused!important}
@media(min-width:761px){
 body[data-edition=cloud] .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;min-height:0;padding-block:45px 65px;align-items:center}
 body[data-edition=cloud] .hero-copy{display:contents}
 body[data-edition=cloud] .hero .eyebrow{grid-column:1/-1;grid-row:1;margin:0}
 body[data-edition=cloud] .hero h1{grid-column:1/-1;grid-row:2;font-size:clamp(42px,5.3vw,72px);line-height:1.15;margin:0;max-width:none}
 body[data-edition=cloud] .hero h1 br{display:none}
 body[data-edition=cloud] .hero .intro{grid-column:1/-1;grid-row:3;max-width:680px;font-size:15px;margin:0 0 10px}
 body[data-edition=cloud] .hero #entry{grid-column:1;grid-row:4;width:100%;max-width:440px;justify-self:center;margin:0}
 body[data-edition=cloud] .hero-flame-visual{grid-column:2;grid-row:4;width:100%;min-height:440px}
 body[data-edition=cloud] .hero .scroll-invitation{grid-column:1/-1;grid-row:5;margin:14px 0 0}
}
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 body[data-edition=cloud] .hero-flame-visual,html[data-mobile-onboarding=ready] body[data-edition=cloud] .hero-flame-visual{order:-1;width:100%;height:clamp(150px,26svh,250px);margin:0 auto 18px;flex:0 0 auto;min-height:0}
 .hero-flame-visual .landing-flame-art{width:auto;height:100%;max-width:100%}
}
@media(prefers-reduced-motion:reduce){.landing-flame-art *{animation:none!important}.landing-flame-orbit{transform:rotateX(65deg) rotateY(-20deg)}.landing-flame-orbit.orbit-b{transform:rotateY(65deg) rotateX(20deg)}.landing-flame-core{transform:rotateY(-10deg) rotateX(5deg)}}

html[data-mobile-onboarding=ready] body[data-edition=cloud] .hero{display:flex;flex-direction:column}
html[data-mobile-onboarding=ready] body[data-edition=cloud] .hero-copy{display:block}

body[data-edition=cloud] .hero .scroll-invitation{justify-self:center;justify-content:center;align-self:center;text-align:center;width:100%;margin-inline:auto}

/* Balance the sign-in card and flame; override the original illustration's offset. */
@media(min-width:761px){
 body[data-edition=cloud] .hero{width:min(1120px,calc(100% - 64px));grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;padding-block:36px 48px}
 body[data-edition=cloud] .hero .eyebrow{justify-self:center;text-align:center}
 body[data-edition=cloud] .hero h1{justify-self:center;width:100%;font-size:clamp(40px,4.4vw,64px);text-align:center;text-wrap:balance;letter-spacing:-2.5px}
 body[data-edition=cloud] .hero .intro{justify-self:center;text-align:center;max-width:680px;line-height:1.75;margin:0 auto 16px}
 body[data-edition=cloud] .hero #entry{align-self:center;justify-self:center;max-width:440px}
 body[data-edition=cloud] .hero .hero-flame-visual{align-self:center;justify-self:center;margin:0;min-height:460px}
 body[data-edition=cloud] .hero .landing-flame-art{width:min(100%,460px)}
 body[data-edition=cloud] .hero .scroll-invitation{margin-top:16px}
}
@media(min-width:761px) and (max-width:1000px){
 body[data-edition=cloud] .hero{gap:14px 24px;width:calc(100% - 48px)}
 body[data-edition=cloud] .hero .hero-flame-visual{min-height:360px}
}
html[data-mobile-onboarding=ready] body[data-edition=cloud] .hero .hero-flame-visual{margin:0 auto 18px;min-height:0}

.reference-symbol svg{display:block;width:28px;height:28px}