/* ==========================================================================
   Hero visual treatment: Glass (sky band, frosted panels).
   Applied with .hero--s3 on #hero. The other five explorations were removed.
   ========================================================================== */

.hero--s3 { background: linear-gradient(180deg, #E1ECFF 0%, #EDF3FF 40%, #F6F9FE 74%, var(--bg) 100%); }
.hero--s3 .hero__dots { opacity: .55; }
.hero--s3 .hero__bloom { display: none; }
.hero--s3 .hero__blob { opacity: .7; }
.hero--s3 .hero__blob--a { background: #fff; }
.hero--s3 .hero__blob--b { background: #fff; }
.hero--s3 .hero__blob--c { background: #fff; }
.hero--s3 .hero__title { color: #0F2A5E; }
.hero--s3 .hero__lead { max-width: 21em; color: #2C4A7F; }
.hero--s3 .hero__pill { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); color: #17409E; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px -12px rgba(23, 64, 158, .35); }
.hero--s3 .hero__pill { border-color: rgba(23, 64, 158, .1); }
.hero--s3 .btn--primary { background: #132A66; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 12px 28px -14px rgba(19, 42, 102, .8); }
.hero--s3 .btn--primary:hover { background: #1B3A85; }
.hero--s3 .btn--secondary { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .85); color: #132A66; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero--s3 .hero__proof { border-top-color: rgba(19, 42, 102, .15); color: #2C4A7F; }
.hero--s3 .hero__proof strong { color: #0F2A5E; }
.hero--s3 .odo { color: #0F2A5E; }
.hero--s3 .tcard { background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 50px -24px rgba(19, 42, 102, .45); }
.hero--s3 .tcard--quote .tcard__in, .hero--s3 .tcard--win .tcard__in { background: rgba(255, 255, 255, .86); }
.hero--s3 .tcard--support .tcard__in { background: rgba(255, 255, 255, .7); }

/* Phones: center the savings pill, headline, subhead and review line */
@media (max-width: 760px) {
  .hero--s3 .hero__copy { margin-inline: auto; text-align: center; }
  .hero--s3 .hero__lead { max-width: 14.3em; margin-inline: auto; }
  .hero--s3 .hero__proof { justify-content: center; margin-inline: auto; padding-right: 0; }
}