/* The same SVG geometry, color and dimensions on desktop, tablet and mobile. */
.icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 0;
}
.icon-glyph {width: 16px; height: 16px;}
.offer-cta .icon {width: 22px; height: 22px;}
.footer-cta .icon {width: 36px; height: 36px;}
.footer-bottom a {gap: 8px;}

.offer-symbol {
  width: 40px;
  height: 40px;
  font-size: 0;
}
.offer-symbol .icon {width: 28px; height: 28px;}
.expertise-strip .expertise-item .icon {
  width: 21px;
  height: 21px;
  color: var(--red);
}
/* Keep the direction label clear of the floating voice card. */
.art-topline {right: auto; justify-content: flex-start; z-index: 4;}
.journey-highlight > span:last-child .icon {width: 16px; height: 16px;}
.sheet-menu .icon {width: 18px; height: 18px;}
.action-sheet strong > span {
  width: 36px;
  height: 36px;
}
.action-sheet strong > span .icon {width: 24px; height: 24px;}
.diagnostic-aside > span .icon,
.brief-smallprint > span .icon {width: 36px; height: 36px;}

.offer-details summary > span,
.faq-items summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 1;
}
.offer-details summary > span .icon {width: 20px; height: 20px;}
.faq-items summary span .icon {width: 23px; height: 23px;}
.dialog-top > button {display: grid; place-items: center;}
.dialog-top > button .icon {width: 22px; height: 22px;}

.check-list li::before {content: none;}
.check-list .check-list-icon {
  position: absolute;
  left: 0;
  top: .3em;
  width: 12px;
  height: 12px;
  color: var(--red-deep);
}