/* Colorful, professional Bootstrap icon system for the hero intake cards. */
.intakes span:nth-child(n)>i {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),
              inset 0 -10px 18px rgba(0,0,0,.13),
              0 9px 18px rgba(0,0,0,.28) !important;
}

.intakes span:nth-child(1)>i { background: linear-gradient(145deg,#4b8dff,#2969df) !important; }
.intakes span:nth-child(2)>i { background: linear-gradient(145deg,#36d5bd,#13a98f) !important; }
.intakes span:nth-child(3)>i { background: linear-gradient(145deg,#45ca7c,#159c56) !important; }
.intakes span:nth-child(4)>i { background: linear-gradient(145deg,#9a69f4,#6840c7) !important; }
.intakes span:nth-child(5)>i { background: linear-gradient(145deg,#ff667d,#da3658) !important; }
.intakes span:nth-child(6)>i { background: linear-gradient(145deg,#ffad45,#ed721e) !important; }

.intakes span:nth-child(n)>i:before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.16));
}

.intakes span:nth-child(1)>i:before {
  -webkit-mask: url("assets/icon-email.svg") center / 23px 23px no-repeat;
  mask: url("assets/icon-email.svg") center / 23px 23px no-repeat;
}
.intakes span:nth-child(2)>i:before {
  -webkit-mask: url("assets/icon-sms.svg") center / 23px 23px no-repeat;
  mask: url("assets/icon-sms.svg") center / 23px 23px no-repeat;
}
.intakes span:nth-child(3)>i:before {
  -webkit-mask: url("assets/icon-photo.svg") center / 23px 23px no-repeat;
  mask: url("assets/icon-photo.svg") center / 23px 23px no-repeat;
}
.intakes span:nth-child(4)>i:before {
  -webkit-mask: url("assets/icon-screenshot.svg") center / 22px 22px no-repeat;
  mask: url("assets/icon-screenshot.svg") center / 22px 22px no-repeat;
}
.intakes span:nth-child(5)>i:before {
  -webkit-mask: url("assets/icon-pdf.svg") center / 23px 23px no-repeat;
  mask: url("assets/icon-pdf.svg") center / 23px 23px no-repeat;
}
.intakes span:nth-child(6)>i:before {
  -webkit-mask: url("assets/icon-voice.svg") center / 23px 23px no-repeat;
  mask: url("assets/icon-voice.svg") center / 23px 23px no-repeat;
}

.intakes span:nth-child(n)>i:after { display: none; }
.intakes span:nth-child(n)>i:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* Book Club event: a real book symbol instead of the people emoji. */
.phoneEvents article .eventIcon.club {
  font-size: 0 !important;
}

.phoneEvents article .eventIcon.club:before {
  content: "";
  width: 23px;
  height: 23px;
  background: #fff;
  -webkit-mask: url("assets/icon-book.svg") center / contain no-repeat;
  mask: url("assets/icon-book.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}

/* Remove the empty social-proof placeholder until verified proof exists. */
.socialPlaceholder {
  display: none !important;
}

/* Real, colorful feature icons. */
.featureStrip {
  margin-top: -26px !important;
}

.featureStrip article {
  font-size: 0;
}

.featureStrip article:before {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 18px;
  background-color: #3478ff;
  background-image: linear-gradient(145deg,rgba(255,255,255,.18),rgba(0,0,0,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
              inset 0 -10px 18px rgba(0,0,0,.08),
              0 12px 24px rgba(31,70,120,.18);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.featureStrip article:after {
  content: "";
  position: absolute;
}

.featureStrip article:nth-child(1):before {
  background-color: #397cff;
  -webkit-mask: url("assets/icon-feature-capture.svg") center / 27px 27px no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icon-feature-capture.svg") center / 27px 27px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.featureStrip article:nth-child(2):before {
  background-color: #25bea0;
  -webkit-mask: url("assets/icon-feature-ai.svg") center / 28px 28px no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icon-feature-ai.svg") center / 28px 28px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.featureStrip article:nth-child(3):before {
  background-color: #ff8a31;
  -webkit-mask: url("assets/icon-feature-review.svg") center / 28px 28px no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icon-feature-review.svg") center / 28px 28px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.featureStrip article:nth-child(4):before {
  background-color: #8057dc;
  -webkit-mask: url("assets/icon-feature-updates.svg") center / 27px 27px no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icon-feature-updates.svg") center / 27px 27px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.featureStrip article:nth-child(5):before {
  background-color: #ee4e79;
  -webkit-mask: url("assets/icon-feature-reminders.svg") center / 27px 27px no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icon-feature-reminders.svg") center / 27px 27px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.featureStrip article:nth-child(6):before {
  background-color: #2d9bc7;
  -webkit-mask: url("assets/icon-feature-family.svg") center / 29px 29px no-repeat, linear-gradient(#000 0 0);
  mask: url("assets/icon-feature-family.svg") center / 29px 29px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* Keep the color tile intact and place the white library icon above it. */
.featureStrip article { position: relative; }
.featureStrip article:nth-child(n):before {
  -webkit-mask: none;
  mask: none;
}
.featureStrip article:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  background: #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.16));
}
.featureStrip article:nth-child(1):after {-webkit-mask:url("assets/icon-feature-capture.svg") center/contain no-repeat;mask:url("assets/icon-feature-capture.svg") center/contain no-repeat}
.featureStrip article:nth-child(2):after {-webkit-mask:url("assets/icon-feature-ai.svg") center/contain no-repeat;mask:url("assets/icon-feature-ai.svg") center/contain no-repeat}
.featureStrip article:nth-child(3):after {-webkit-mask:url("assets/icon-feature-review.svg") center/contain no-repeat;mask:url("assets/icon-feature-review.svg") center/contain no-repeat}
.featureStrip article:nth-child(4):after {-webkit-mask:url("assets/icon-feature-updates.svg") center/contain no-repeat;mask:url("assets/icon-feature-updates.svg") center/contain no-repeat}
.featureStrip article:nth-child(5):after {-webkit-mask:url("assets/icon-feature-reminders.svg") center/contain no-repeat;mask:url("assets/icon-feature-reminders.svg") center/contain no-repeat}
.featureStrip article:nth-child(6):after {-webkit-mask:url("assets/icon-feature-family.svg") center/contain no-repeat;mask:url("assets/icon-feature-family.svg") center/contain no-repeat}
