.container.grid{
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  row-gap:4rem;
}
section#compare{
  margin-top: -420px;
  background: linear-gradient(180deg, transparent 20%, white);
  pointer-events: none;
}
#compare .compare-box {
  max-width: 40ch;
}
.flex.v.jc.compare-box {
  text-align: left;
  font-weight: unset;
  line-height: 150%;}
.compare-box:not(.featured){
  padding: 2rem;
  margin: 2rem 0;
}
#FAQ .container > h2 {
  grid-column: span 12;
  text-align:center;
}
.faq .search{
  padding: 1rem 0;
  border-bottom: 1px solid #D9E2F7;
}
.blue h2{
color:white;
font-weight: 800;}
.faq ul{
  overflow-y: scroll;
  max-height: 30rem;
}
.faq{
  grid-column: span 12;
  max-width: 75ch;
  margin: 0 auto;
}
.faq-form{
  grid-column: span 12;
}
.faq-form > span{
   flex: 1;
}
.faq-content{
  mask-image: linear-gradient(transparent 0%, #000 1rem, #000 calc(100% - 1rem), transparent);
  margin:0;
}
.faq-heading {
  padding: .5rem;
  align-items: first baseline;
  transform: color: .7s ease-out;
  cursor:pointer;
}
.faq-heading:hover{
  color: #2c52bf;
}
.faq-heading .icon{
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transform: translateY(2px) rotate(0deg);
  transition: transform .35s ease-out;
}
.faq-content h3{
  font-weight: 500;
  line-height: 100%;
  padding-left: .5rem;
  margin-left: .5rem;
  border-left:1px solid #D9E2F7;
  text-align:left;
  }
.faq-content > :first-child{ margin-top: 1rem; }
.faq-content > :last-child{ margin-bottom: 1rem; border-bottom-color:transparent}
.faq .accordion-item{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-left: 2px solid #30ceaf00;
    background: #F0F4FF00;
    padding-bottom:0;
    overflow:hidden;
    border-bottom: 1px solid #F0F4FF;
    transition: background-color,padding-bottom, border-radius, color, border,height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: background-color,padding-bottom, border-radius, color, border,height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: background-color,padding-bottom, border-radius, color, border,height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: background-color,padding-bottom, border-radius, color, border,height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: background-color,padding-bottom, border-radius, color, border,height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.faq .accordion-item .accordion-content{
    padding:0 3rem;
    max-height:0vh;
    transition: max-height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: max-height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: max-height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: max-height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: max-height .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.faq:not(:focus-within) .faq-content > :first-child,
.faq .accordion-item:is(:focus, :focus-within){
    background: #F0F4FF;
    border-left: 2px solid #30ceaf;
    padding-bottom:1rem;
}
.faq .accordion-item:is(:focus, :focus-within) .icon{
  transform: translateY(2px) rotate(180deg);
}
.faq:not(:focus-within) .faq-content > :first-child .faq-heading,
.faq .accordion-item:is(:focus, :focus-within) .faq-heading{
  color:#2c52bf;
}
.faq:not(:focus-within) .faq-content > :first-child .accordion-content,
.faq .accordion-item:is(:focus, :focus-within) .accordion-content{
    max-height:100vh;
}
@media only screen and (max-width: 1024px) {
.faq, .faq-form{
  grid-column: span 12
}