/* Uses the homepage's existing TruMath typography and palette. */
.explainer-duration{color:var(--tm-text);font-size:11px;font-weight:500;white-space:nowrap}
.hero-buttons .tm-play-link{min-height:44px;gap:10px}
.hero-buttons .tm-play-link>span:nth-child(2){display:grid;gap:1px}
body.explainer-open{overflow:hidden}
.explainer-invitation{position:fixed;z-index:45;right:24px;bottom:24px;width:350px;max-width:calc(100vw - 32px);padding:8px 48px 8px 8px;background:white;border:1px solid #cddbe5;border-radius:14px;box-shadow:0 12px 44px #17314926;animation:explainer-arrive .3s ease-out}
.explainer-invitation a{display:flex;align-items:center;gap:13px;min-height:74px;border-radius:8px}
.explainer-invitation img{width:60px;height:68px;object-fit:cover;object-position:50% 15%;border-radius:9px;background:var(--tm-sky)}
.explainer-invitation-copy{display:grid;gap:4px;line-height:1.4}
.explainer-invitation strong{font-family:var(--font-display);font-size:14px;letter-spacing:-.025em;font-weight:800}
.explainer-invitation small{display:flex;gap:6px;align-items:center;color:#a23c17;font-size:12px;font-weight:700}
.explainer-invitation small svg{width:12px;height:12px;flex-shrink:0}
.explainer-dismiss{position:absolute;right:5px;top:7px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--tm-text)}
.explainer-dismiss:hover{background:var(--tm-sky);color:var(--tm-ink)}
.explainer-dismiss svg{width:16px;height:16px}
body:has(dialog[open]) .explainer-invitation,body:has(.tm-nav.open) .explainer-invitation{visibility:hidden;pointer-events:none}
.explainer-dialog{width:min(960px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:0;padding:0;margin:auto;border-radius:18px;color:var(--tm-ink);background:white;box-shadow:0 32px 100px #061e4180;overflow:auto;overscroll-behavior:contain}
.explainer-dialog::backdrop{background:#0d2234c9;backdrop-filter:blur(7px)}
.explainer-heading{position:relative;padding:25px 76px 23px 30px}
.explainer-heading .tm-kicker{font-size:10px;margin-bottom:8px;color:#a23c17;letter-spacing:.12em}
body.tm-site .explainer-heading h2{font-size:26px;letter-spacing:-.045em;line-height:1.2}
.explainer-close{position:absolute;right:20px;top:25px;width:44px;height:44px;border-radius:50%;border:1px solid var(--tm-line);background:var(--tm-sky);color:var(--tm-ink);display:grid;place-items:center}
.explainer-close:hover{background:#dce8f0}
.explainer-close svg{width:18px;height:18px}
.explainer-player{background:#102537}
.explainer-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:60dvh;object-fit:contain;background:#102537}
.explainer-player video::cue{font-family:Arial,sans-serif;font-size:16px;background:#102537e8;color:white}
.explainer-footer{padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f8fafc}
body.tm-site .explainer-footer p{margin:0;font-size:14px;line-height:1.5;color:var(--tm-text)}
.explainer-footer p strong{color:var(--tm-ink);font-weight:700}
.explainer-footer .tm-btn{flex-shrink:0;min-height:48px;font-size:13px;padding:12px 18px;gap:16px}
.explainer-error{padding:14px 24px;color:white;font-size:14px;line-height:1.6}
.explainer-error a{text-decoration:underline!important}
@keyframes explainer-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){
  .explainer-invitation{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:320px}
  body:has(.mobile-start.show) .explainer-invitation{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .explainer-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:14px}
  .explainer-heading{padding:21px 66px 19px 20px}
  body.tm-site .explainer-heading h2{font-size:21px;max-width:240px}
  .explainer-heading .tm-kicker{font-size:9px;letter-spacing:.1em;margin-bottom:7px}
  .explainer-close{right:12px;top:19px}
  .explainer-footer{padding:18px 20px 20px;display:grid;gap:16px}
  body.tm-site .explainer-footer p{font-size:13px}
  .explainer-footer .tm-btn{width:100%}
  .explainer-duration{font-size:10px}
}
@media(max-width:360px){.explainer-invitation{width:calc(100vw - 32px)}.explainer-invitation strong{font-size:13px}.explainer-invitation a{gap:9px}.explainer-invitation img{width:50px;height:60px}}
@media(prefers-reduced-motion:reduce){.explainer-invitation{animation:none}}