/* t3781: founder-picked 3D gap fill. Home = AuraGrid HQ, Products = orbit.
   About, Done-for-You, and Help use the taller 4:3 art.
   Contact and legal pages only resize the art they already have. */

/* t3822: Home HQ + Products orbit default to 80% of the t3781 stage (centered, contain, no crop).
   70% preview: document.documentElement.style.setProperty('--ag-gap-scale','0.7')
   t3838: HQ/orbit use transparent cutouts; stage fill and 18px radius removed so the art is not a pasted card.
   t3850: orbit glass tiles float; HQ whole-image sway is unchanged. No typography changes. */
html:root body#ag-unified-site{
  --ag-gap-scale:0.8;
}


html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-bleed{
  box-sizing:border-box!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:calc(100% - 48px)!important;
  max-width:1360px!important;
  margin:8px auto 4px!important;
  padding:0!important;
  overflow:visible!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage{
  display:block!important;
  position:relative!important;
  height:calc(333px * var(--ag-gap-scale, 0.8))!important;
  width:calc(100% * var(--ag-gap-scale, 0.8))!important;
  max-width:100%!important;
  margin:0 auto!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:transparent!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  border:0!important;
  animation:ag-gap-sway 14s ease-in-out infinite!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:1!important;
  background:linear-gradient(100deg, transparent 42%, rgba(56,189,248,.34) 50%, transparent 58%)!important;
  background-size:240% 100%!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 35%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 35%, transparent 78%);
  animation:ag-gap-trail 14s ease-in-out infinite!important;
}
@keyframes ag-gap-sway{
  0%,100%{transform:scale(1) rotate(0deg);filter:brightness(1)}
  50%{transform:scale(1.03) rotate(1.2deg);filter:brightness(1.05)}
}
@keyframes ag-gap-orbit{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-8px) rotate(-1.4deg) scale(1.03)}
}
@keyframes ag-gap-trail{
  0%,100%{background-position:130% 0}
  50%{background-position:-30% 0}
}
@keyframes ag-gap-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit img{
  animation-name:ag-gap-orbit!important;
}
/* t3850: only the glass tiles move on the orbit stage; the base stays still.
   The animation-name rule above is kept for the existing test; these overrides win. */
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit{
  overflow:visible!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-gap-pic{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-gap-pic img{
  animation:none!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-tile{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  pointer-events:none!important;
  z-index:2!important;
  border:0!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-tile img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  animation:agTileFloat 5.2s ease-in-out infinite!important;
  --ag-tile-amp:-5px;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-mail img{animation-duration:5.4s!important;animation-delay:0s!important;--ag-tile-amp:-5px}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-clip img{animation-duration:5.8s!important;animation-delay:-1.1s!important;--ag-tile-amp:-4px}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-star img{animation-duration:4.9s!important;animation-delay:-2s!important;--ag-tile-amp:-5px}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-doc img{animation-duration:5.5s!important;animation-delay:-2.8s!important;--ag-tile-amp:-4px}
@keyframes agTileFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(var(--ag-tile-amp,-5px))}
}

html:root body#ag-unified-site #main#main#main#main#main#main#main .hm-hero:has(+ .ag-gap-bleed),
html:root body#ag-unified-site #main#main#main#main#main#main#main .prod-hero:has(+ .products-section > .ag-gap-bleed){
  padding-bottom:12px!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .products-section:has(> .ag-gap-bleed){
  padding-top:8px!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-bleed + .hm-w .hm-trust{
  margin-top:16px!important;
}
@media (hover:hover) and (min-width:901px){
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit:hover img{
    animation-play-state:paused!important;
    transform:translateY(-8px) scale(1.03)!important;
  }
}
@media (min-width:901px){
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-bleed{
    width:100%!important;
    max-width:none!important;
    margin:12px 0 8px!important;
  }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage{
    height:calc(520px * var(--ag-gap-scale, 0.8))!important;
    border-radius:0!important;
  }
}

/* About, Done-for-You, Help: taller 4:3, contained so the story is not cropped away. */
html:root body#ag-unified-site #main#main#main#main#main#main#main .abart:has(.ag-gap-about){
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:660px!important;
  height:420px!important;
  margin:0 auto!important;
  overflow:hidden!important;
  transform:none!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about,
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about img{
  display:block!important;
  width:100%!important;
  max-width:660px!important;
  height:420px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  animation:ag-gap-pulse 14s ease-in-out infinite!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .b1art:has(.ag-gap-dfy){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy,
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy img{
  display:block!important;
  width:100%!important;
  max-width:660px!important;
  height:420px!important;
  max-height:none!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  animation:ag-gap-pulse 14s ease-in-out infinite!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .approved-help:has(.ag-gap-help){
  overflow:hidden!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help,
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help img{
  display:block!important;
  width:100%!important;
  max-width:628px!important;
  height:310px!important;
  margin:0 auto!important;
  object-fit:cover!important;
  object-position:center!important;
  animation:ag-gap-pulse 14s ease-in-out infinite!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .b1hero:has(.approved-help){
  padding-bottom:20px!important;
}
html:root body#ag-unified-site #main#main#main#main#main#main#main .b1hero:has(.approved-help) + .rs{
  padding-top:24px!important;
}

/* Contact: same handset, tighter in the slot. The support card stays clear of the art. */
html:root body#ag-unified-site #main#main#main#main#main.full-polish-t3424:not(.acard) .approved-contact{
  height:390px!important;
  overflow:hidden!important;
}
html:root body#ag-unified-site #main#main#main#main#main.full-polish-t3424:not(.acard) .approved-contact>img{
  width:min(520px, calc(100% - 160px))!important;
  height:390px!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:128px!important;
  object-fit:contain!important;
  object-position:center!important;
  animation:none!important;
}

/* Legal-wide: show the whole 8:5 art. Do not cover-crop.
   Desktop stays 660	imes412 (8:5). Phone is 342 wide with auto height (~214).
   Keep the tighter gap under the art; never overflow. */
html:root body#ag-unified-site #main#main .lg2h .lg2art{
  margin-bottom:0!important;
  overflow:visible!important;
}
html:root body#ag-unified-site #main#main .lg2h .lg2art img.legal-wide-3d{
  aspect-ratio:8/5!important;
  width:100%!important;
  max-width:660px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin-inline:auto!important;
  animation:none!important;
}
html:root body#ag-unified-site #main#main .lg2h .lg2chips{
  margin-top:12px!important;
}
html:root body#ag-unified-site #main#main .lg2h{
  padding-bottom:16px!important;
}

@media (max-width:900px){
  html:root body#ag-unified-site #main#main#main#main#main#main#main .abart:has(.ag-gap-about),
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy img{
    max-width:342px!important;
    height:240px!important;
  }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help img{
    max-width:342px!important;
    height:270px!important;
  }
  html:root body#ag-unified-site #main#main#main#main#main.full-polish-t3424:not(.acard) .approved-contact{
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:12px!important;
    overflow:visible!important;
  }
  html:root body#ag-unified-site #main#main#main#main#main.full-polish-t3424:not(.acard) .approved-contact>img{
    width:100%!important;
    max-width:342px!important;
    height:360px!important;
    margin:0 auto!important;
  }
  html:root body#ag-unified-site #main#main .lg2h .lg2art img.legal-wide-3d{
    max-width:342px!important;
    height:auto!important;
  }
  html:root body#ag-unified-site #main#main .lg2h{
    padding-bottom:8px!important;
  }
  html:root body#ag-unified-site #main#main .lg2h .lg2chips{
    margin-top:8px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-tile,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-orbit .ag-float-tile img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage::after,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help img{
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}

/* t3873: larger 3D art (founder). Phone: art uses ~96% of the content width, 4:3, never cropped.
   Desktop: about 15% larger where the layout allows. Help art is contained, not cover-cropped.
   Stage overflow is visible so the 14s sway and tile float never clip the art. */
html:root body#ag-unified-site{ --ag-gap-scale:0.92; }
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage{ overflow:visible!important; }
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help,
html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help img{ object-fit:contain!important; }
@media (min-width:901px){
  html:root body#ag-unified-site #main#main#main#main#main#main#main .abart:has(.ag-gap-about){ max-width:740px!important; height:470px!important; overflow:visible!important; }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy img{ max-width:740px!important; height:470px!important; }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help img{ max-width:700px!important; height:350px!important; }
  html:root body#ag-unified-site #main#main .lg2h .lg2art img.legal-wide-3d{ max-width:740px!important; }
}
@media (max-width:900px){
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-bleed{ width:calc(100% - 16px)!important; }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-stage{ width:96%!important; height:auto!important; aspect-ratio:4/3!important; }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .abart:has(.ag-gap-about),
  html:root body#ag-unified-site #main#main#main#main#main#main#main .b1art:has(.ag-gap-dfy){ max-width:100%!important; height:auto!important; overflow:visible!important; }
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-about img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-dfy img,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help,
  html:root body#ag-unified-site #main#main#main#main#main#main#main .ag-gap-help img{ width:100%!important; max-width:100%!important; height:auto!important; aspect-ratio:4/3!important; }
  html:root body#ag-unified-site #main#main#main#main#main.full-polish-t3424:not(.acard) .approved-contact>img{ max-width:100%!important; height:auto!important; }
  html:root body#ag-unified-site #main#main .lg2h .lg2art img.legal-wide-3d{ max-width:100%!important; }
}