/* OBD animation accents. Mobile = stacked/centered. Desktop >=1000px = side placements.
   Theme swap follows the site toggle (html[data-theme]). */
.anim{display:block;margin:24px auto;text-align:center}
.anim picture,.anim img{display:block;margin:0 auto}
.anim img{max-width:100%;height:auto;border-radius:14px}
.anim-cap{display:block;margin-top:8px;font-size:11px;opacity:.65;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .a-d{display:none}
html:not([data-theme="light"]) .a-l{display:none}
.anim-s{padding:10px 5vw}
#loader .anim{margin:0 auto}#loader .anim img{width:min(320px,70vw)}
.band{padding:20px 5vw;margin:30px auto;text-align:center}
.band-t{text-align:center}
.band-g img{width:100%;max-width:520px;margin:12px auto}
.cta-gif{display:inline-block;margin-top:14px}.cta-gif img{width:min(340px,80vw);border-radius:14px}
@media(min-width:1000px){
 *:has(> .anim.side){position:relative}
 .anim.side{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:340px;margin:0}
 .anim.side img{width:340px}
 *:has(> .anim.side)>:not(.anim){max-width:56%}
 .hd-split{display:flex;align-items:center;justify-content:space-between;gap:40px}
 .hd-split .anim{margin:0;flex:0 0 340px}.hd-split .anim img{width:340px}
 .g404{display:grid!important;grid-template-columns:auto 1fr;gap:56px;align-items:center;text-align:left;max-width:1000px;margin:0 auto}
 .g404 .anim{margin:0;grid-row:1 / span 3;grid-column:1}.g404 .anim img{width:420px}
 .g404>:not(.anim){grid-column:2}.g404 p{margin-left:0!important}.g404 .btn{justify-self:start}
 .band{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1100px;text-align:left}
 .band-t{text-align:left}.band-g img{margin-left:auto;margin-right:0}
 .band h2{font-size:clamp(40px,4.6vw,68px);line-height:1}
}