/* JAMP ignition: a finite opening, no overlay or loading gate. */
.hero{position:relative;isolation:isolate}
.hero-main,.system,.hero-bottom{position:relative;z-index:1}
.hero-emblem{position:absolute;z-index:0;left:44%;top:8px;width:300px;height:410px;pointer-events:none;transform:rotate(12deg);overflow:hidden}
.hero-emblem svg{width:100%;height:100%;stroke:none;overflow:visible}
.hero-emblem .bolt-outline{fill:#78ff000a;stroke:var(--green);stroke-width:.35;opacity:.45}
.hero-emblem .bolt-solid{fill:var(--green);opacity:0}
.hero-accent{position:relative}
.hero-echo{position:absolute;inset:0;display:block;color:transparent!important;-webkit-text-stroke:1px var(--green);opacity:0;pointer-events:none}
.hero-aside{position:relative}
.hero-aside .button{position:relative;overflow:hidden;isolation:isolate}
@media(max-width:1000px){.hero-emblem{left:40%;width:250px;height:360px}}
@media(max-width:700px){.hero-emblem{left:auto;right:-8px;top:6px;width:190px;height:270px}.hero-emblem .bolt-outline{opacity:.35;stroke-width:.25}.hero-main{z-index:1}}
@media(prefers-reduced-motion:reduce){.hero-emblem{transform:rotate(12deg)}.hero-echo,.hero-emblem .bolt-solid{display:none}}
/* Keep the decorative entry inside the hero, including narrow viewports. */
.hero{overflow:clip}
/* A separate layer lets the pointer spring coexist with the opening. */
.hero-emblem{overflow:visible}
.hero-pointer{width:100%;height:100%;transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:700px){.hero-pointer{transform:none!important}}
/* Reserve a real middle column for the emblem on large screens. */
@media(min-width:1101px){
 .hero-main{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) minmax(0,1fr);column-gap:3%}
 .hero-main h1{grid-column:1;grid-row:1}
 .hero-aside{grid-column:3;grid-row:1}
 .hero-emblem{position:relative;grid-column:2;grid-row:1;left:auto;top:auto;width:clamp(160px,15vw,210px);height:320px;justify-self:center;align-self:center}
 .hero-emblem .bolt-outline{stroke-width:.65;opacity:.55}
}
@media(min-width:701px) and (max-width:1100px){.hero-emblem{display:none}}
/* The flow uses the brand symbol itself, without the green tile. */
.system-core{background:transparent;transform:none}
.system-core svg{width:48px;height:66px;fill:var(--green);transform:none}
@keyframes core-charge{0%{transform:scale(1)}35%{transform:scale(1.1)}100%{transform:scale(1)}}
@media(max-width:700px){.system-core svg{width:35px;height:48px}}
@media(max-width:700px){.hero-main>.hero-emblem{top:-38px}}