/* Original educational motion, using existing YouSee360 imagery. */
.service-explainer{border:1px solid #ffffff2b;border-radius:18px;overflow:hidden;background:#07181d;margin:28px 0;color:#e2f2e9}
.explainer-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid #ffffff22}
.explainer-heading h3{font-size:clamp(23px,2.5vw,34px)!important;line-height:1.15!important;margin:8px 0 0!important;font-weight:500!important}
.explainer-label{font-size:11px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:#a7d8c1}
.explainer-length{font-size:12px;white-space:nowrap;color:#a9c7b9;margin-top:5px}
.explainer-stage{position:relative;background:radial-gradient(ellipse at 40% 80%,#155e444d,transparent 70%),#06171b;aspect-ratio:16/9;isolation:isolate;overflow:hidden}
.explainer-stage>svg{width:100%;height:100%;display:block;overflow:hidden;pointer-events:none}
.explainer-stage svg text{font-family:Outfit,Arial,sans-serif;fill:#e4f4eb;font-size:24px;letter-spacing:0}
.explainer-stage svg .tiny{font-size:19px;fill:#b5d8c6}.explainer-stage svg .accent{fill:#00ff88}.explainer-stage svg .line{stroke:#6bcba3;fill:none;stroke-width:2}.explainer-stage svg .muted-line{stroke:#477565;fill:none;stroke-width:2}
.explainer-scope{margin:0!important;padding:14px 24px;font-size:12px!important;line-height:1.6!important;background:#0b2426;border-top:1px solid #ffffff1d;color:#b3d1c4}
.explainer-caption{min-height:66px;padding:18px 24px;margin:0!important;font-size:15px!important;line-height:1.65!important;color:#d4e7dc}
.explainer-player{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:0 24px 18px}
.modern-site .explainer-player button,.modern-site .explainer-options button{font-family:Outfit,Arial,sans-serif!important;font-size:13px!important;min-height:44px;min-width:72px;padding:10px 16px!important;border:1px solid #ffffff35;border-radius:9px;background:#10302c;color:#def5e8;transform:none!important;transition:background-color .2s,border-color .2s}
.modern-site .explainer-player .explainer-play{background:#00ff88!important;color:#06291c!important;border-color:#00ff88!important}
.modern-site .explainer-player button:disabled{opacity:.45;cursor:default}
.modern-site .explainer-player button:focus-visible,.modern-site .explainer-options button:focus-visible{outline:3px solid #01e4e4;outline-offset:3px}
.explainer-time{font-size:12px;color:#aacdb9;margin-left:auto;font-variant-numeric:tabular-nums}
.explainer-progress{display:block;accent-color:#00ff88;width:100%;height:24px;cursor:pointer;margin:4px 0}
.explainer-options{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 24px 18px;border-bottom:1px solid #ffffff1b;font-size:13px;color:#bdd8c9}
.explainer-options button[aria-pressed=true]{background:#18503d!important;border-color:#00ff88!important;color:#edfff6!important}
.explainer-options label{font-size:13px;display:flex;align-items:center;gap:12px;margin:0;font-weight:400}
.explainer-angle{accent-color:#01e4e4;max-width:220px}
.explainer-real{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border-top:1px solid #ffffff25;font-size:13px;line-height:1.5;color:#aacebb}
.explainer-real a{color:#70efbb;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.explainer-static{padding:0 24px 14px;margin:0!important;font-size:12px!important;line-height:1.6!important;color:#b0d5c0}
@media(max-width:600px){.explainer-heading{padding:18px;gap:12px}.explainer-heading h3{font-size:23px!important}.explainer-length{font-size:11px}.explainer-stage{aspect-ratio:4/3}.explainer-stage>svg{object-fit:contain}.explainer-caption,.explainer-scope,.explainer-real{padding:16px 18px}.explainer-player,.explainer-options{padding-inline:18px}.explainer-player{gap:8px}.modern-site .explainer-player button{padding:10px 12px!important;min-width:65px}.explainer-time{width:100%;margin:0}.explainer-real{align-items:start;flex-direction:column;gap:10px}.explainer-options label{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.service-explainer *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.service-explainer[data-kind=ai] .explainer-stage{aspect-ratio:4/5}}

/* Readability: pricing small print was 40-50% white on near-black, hard to read on phones in daylight */
.ys-package .features li.muted{color:rgba(255,255,255,.62)}
.ys-package .from-label,.ys-package .unit{color:rgba(255,255,255,.72)}
/* Explainers always play (no pause control) */
.explainer-pause{display:none!important}