/* Local Font Awesome Pro SVGs, matching the homepage icon treatment. */
.fa-local-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}
.fa-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fa-symbol > img {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.hero-actions .fa-symbol > img,
.help .fa-symbol > img {
  width: 1.15em;
  height: 1.15em;
}
.download-button .fa-symbol > img {
  width: 60%;
  height: 60%;
}
.comparison .fa-symbol {
  background: transparent;
}
.comparison .fa-symbol > img {
  width: 100%;
  height: 100%;
}
.done > .fa-symbol {
  border: 0;
  outline: 0;
  background: transparent;
}
.done > .fa-symbol > img {
  width: 100%;
  height: 100%;
}
.version-download > .fa-local-icon {
  width: 1.4cqw;
  height: 1.4cqw;
}
.footer-social-btn > .fa-local-icon {
  width: 18px;
  height: 18px;
}
.quote-frame blockquote:has(.fa-quote-open)::before,
.quote-frame blockquote:has(.fa-quote-open)::after {
  content: none;
}
.fa-quote-open,
.fa-quote-close {
  position: absolute;
  width: 3.7cqw;
  height: auto;
  top: 1.8cqw;
  left: 2.4cqw;
}
.fa-quote-close {
  top: auto;
  left: auto;
  bottom: 3.1cqw;
  right: 2cqw;
}
.faq-list summary i::after {
  border: 0;
  width: 1.2cqw;
  height: 1.2cqw;
  background: url("assets/fontawesome/page-icons/ui/chevron-down-142434.svg")
    center / contain no-repeat;
  transform: rotate(-90deg);
}
.faq-list details[open] summary i::after {
  transform: none;
}
.step:not(:last-child)::after {
  content: "";
  width: 2.8cqw;
  height: 2.1cqw;
  background: url("assets/fontawesome/page-icons/ui/arrow-right-00bde2.svg")
    center / 65% no-repeat;
}
.install-step:not(:last-child)::after {
  content: "";
  background: #dffaff
    url("assets/fontawesome/page-icons/ui/arrow-right-035080.svg") center / 45%
    no-repeat;
}
@media (max-width: 900px) {
  .version-download > .fa-local-icon {
    width: 18px;
    height: 18px;
  }
  .fa-quote-open {
    width: 30px;
    top: 10px;
    left: 14px;
  }
  .fa-quote-close {
    width: 30px;
    bottom: 12px;
    right: 14px;
  }
  .faq-list summary i::after {
    width: 13px;
    height: 13px;
  }
}
/* Align the iOS markup with the site's current iOS layout classes. */
.ios-download > img {
  width: 2.3cqw;
  height: 2.8cqw;
  object-fit: contain;
  flex: none;
}
.ios-download .fa-symbol > img {
  width: 60%;
  height: 60%;
}
.ios-page .hero-badges {
  display: flex;
  gap: 1.25cqw;
}
.ios-page .hero-badges > div {
  flex: 1;
  display: flex;
  gap: 0.7cqw;
  align-items: center;
  padding: 0.6cqw;
  background: #fff;
  border: 1px solid #e4e9f8;
  border-radius: 1.2cqw;
  font-size: 1.12cqw;
  color: #10131d;
}
.ios-page .hero-badges img {
  width: 3.35cqw;
  height: 3.35cqw;
}
.ios-page .about-rule {
  height: 2.5cqw;
  color: #00c5e3;
  display: flex;
  gap: 1cqw;
  align-items: center;
  font-size: 3.8cqw;
}
.ios-page .about-rule::before {
  content: "";
  height: 4px;
  background: linear-gradient(90deg, #00cee8, #c2f6ff);
  flex: 1;
}
.ios-page .done > .fa-symbol {
  width: 5.5cqw;
  height: 5.5cqw;
  flex-shrink: 0;
  margin: 0 4.5cqw;
}
.ios-page .done > span:last-child {
  color: #ec7dd4;
  font-size: 2.5cqw;
  margin-left: auto;
}
.ios-page .faq-list summary i {
  position: absolute;
  right: 1.4cqw;
  top: 1.2cqw;
  width: 3.5cqw;
  height: 3.5cqw;
  border-radius: 50%;
  background: #eef9ff;
  display: grid;
  place-items: center;
}
.ios-page .faq-list summary i::after {
  content: "";
}
@media (max-width: 900px) {
  .ios-download > img {
    width: 25px;
    height: 29px;
  }
  .ios-page .hero-badges {
    gap: 7px;
  }
  .ios-page .hero-badges > div {
    padding: 7px 5px;
    border-radius: 12px;
    font-size: 11px;
    gap: 5px;
  }
  .ios-page .hero-badges img {
    width: 27px;
    height: 27px;
  }
  .ios-page .about-rule {
    height: 26px;
    font-size: 30px;
    gap: 10px;
  }
  .ios-page .done > .fa-symbol {
    width: 45px;
    height: 45px;
    margin: 0;
  }
  .ios-page .done > span:last-child {
    display: none;
  }
  .ios-page .faq-list summary i {
    right: 10px;
    top: 17px;
    width: 26px;
    height: 26px;
  }
}
@media (min-width: 901px) {
  .ios-page .requirements-art { top: 31.2cqw; width: 43.1cqw; }
  .ios-page .step > p { font-size: 1.4cqw; line-height: 1.95cqw; }
}