/* Shared promotional card component; the future Maths client uses the same settings. */
.brandSlide[hidden],.brandStory[hidden]{display:none!important}
.brandCarouselControls{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:11px;color:#9b859c;font-size:12px}
.brandDots{display:flex;align-items:center;gap:2px}.brandDots button{width:29px;height:32px;border:0;background:transparent;position:relative;cursor:pointer;padding:0}
.brandDots button::before{content:"";position:absolute;left:10px;top:12px;width:8px;height:8px;border-radius:50%;background:#e2d2e3;transition:background .2s,width .2s}
.brandDots button[aria-pressed=true]::before{background:#ba82a2}
.brandCarouselControls #brandCarouselPause{border:1px solid #eee3ec;border-radius:99px;background:#fff;color:#8b6b87;font:inherit;min-height:34px;padding:7px 12px;cursor:pointer}
.brandDots button:focus-visible,.brandCarouselControls button:focus-visible{outline:2px solid #987bc1;outline-offset:2px}
.brandSlide .brandStoryCard{min-height:145px}.brandSlide .brandStoryCard img{object-fit:contain}
@media(max-width:520px){.brandSlide .brandStoryCard{min-height:130px}.brandCarouselControls{gap:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.brandDots button::before{transition:none}}