@charset "UTF-8";

/* All decorative interface icons are served from this site. Masks keep their
   colour in sync with the surrounding text, including on dark cards. */
.icon {
    display: inline-block;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    vertical-align: -.15em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.icon--arrow-up-right { -webkit-mask-image: url('icons/arrow-up-right.svg'); mask-image: url('icons/arrow-up-right.svg'); }
.icon--arrow-right { -webkit-mask-image: url('icons/arrow-right.svg'); mask-image: url('icons/arrow-right.svg'); }
.icon--sparkle { -webkit-mask-image: url('icons/sparkle.svg'); mask-image: url('icons/sparkle.svg'); }
.icon--asterisk { -webkit-mask-image: url('icons/asterisk.svg'); mask-image: url('icons/asterisk.svg'); }
.icon--percentage { -webkit-mask-image: url('icons/percentage.svg'); mask-image: url('icons/percentage.svg'); }
.icon--volatility { -webkit-mask-image: url('icons/volatility.svg'); mask-image: url('icons/volatility.svg'); }
.icon--glossary { -webkit-mask-image: url('icons/glossary.svg'); mask-image: url('icons/glossary.svg'); }
.icon--info { -webkit-mask-image: url('icons/info.svg'); mask-image: url('icons/info.svg'); }
.icon--alert { -webkit-mask-image: url('icons/alert.svg'); mask-image: url('icons/alert.svg'); }
.icon--question { -webkit-mask-image: url('icons/question.svg'); mask-image: url('icons/question.svg'); }

.top-note .top-note__mark.icon { width: 14px; height: 14px; color: var(--gold); }
.hero-footnote .icon { width: 13px; height: 13px; margin-right: 6px; color: var(--coral-deep); }
.guide-card .guide-symbol.icon { width: 66px; height: 66px; }
.guide-card a .icon { width: 16px; height: 16px; }
.perspective-visual__center .icon { width: 75px; height: 75px; color: var(--ink); }
.metric-card--offset .metric-wave .icon { width: 155px; height: 67px; color: #ffb288; }
.faq-list summary .faq-toggle-icon::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url('icons/plus.svg') center / contain no-repeat;
    mask: url('icons/plus.svg') center / contain no-repeat;
}
.callout__icon .icon { width: 19px; height: 19px; }
.feature-intro .feature-intro__mark.icon { width: 32px; height: 32px; color: var(--coral-deep); }
.article-bullets--checks li::before {
    content: '';
    width: 17px;
    height: 17px;
    background-color: #a94337;
    -webkit-mask: url('icons/check.svg') center / contain no-repeat;
    mask: url('icons/check.svg') center / contain no-repeat;
}
.article-card__arrow .icon { width: 15px; height: 15px; }
.related-list a i.icon { width: 17px; height: 17px; }
.map-link-list i.icon { width: 20px; height: 20px; color: var(--coral-deep); }
.casino-float__icon .icon { width: 22px; height: 22px; color: #ffcc91; }
.casino-float__text small .icon { width: 11px; height: 11px; }

@media (max-width: 540px) {
    .casino-float__icon .icon { width: 14px; height: 14px; }
}
@media (min-width: 361px) and (max-width: 540px) {
    .casino-float__icon .icon { width: 16px; height: 16px; }
}