section#plan-pricing-cards {
  margin: 4rem 0 8rem;

  .container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }
}

.pricing-cards {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 1.6rem;

  .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 238px;

    h4 {
      color: var(--purple-5);
      font-weight: 600;
    }

    p {
      color: var(--secondary-text);
      font-weight: 500;
    }

    p:first-of-type {
      height: 72px;
    }

    .price {
      margin: 2.4rem 0 0 0;
      font-size: 4rem;
      font-weight: 600;
    }

    .btn {
      width: 100%;
      margin-top: 2.4rem;
    }

    .text-link {
      display: none;
    }

    .included {
      padding-top: 2.4rem;
      margin-top: 2.4rem;
      border-top: 1px solid var(--border-color);
      width: 100%;
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: .8rem;
    }

    li {
      font-size: 1.4rem;
      font-weight: 500;
      display: flex;
      gap: .8rem;
      align-items: center;
    }

    li:before {
      content: 'check_circle';
      font-family: 'Material Icons';
      color: var(--purple-4);
      font-size: 2.4rem;
    }
  }
}

.contact-banner {
  container-type: inline-size;
  padding-top: 4rem;
  padding-bottom: 4rem;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.banner-decoration-layer {
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
}

.banner-content-layer {
  position: relative;
  z-index: 2;
 
  .content {
    max-width: 786px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h3 {
      margin-bottom: 8px;
    }

    p {
      color: var(--primary-text);
      font-size: 1.8rem;
      font-weight: 500;
      margin-bottom: 3.2rem;
    }

    .btn-link {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 40rem;
      
      span {
        padding: 1rem 1.6rem;
      }
    }


  }
}


/* ==========================================================
   Shared decoration styles
   ========================================================== */

.banner-decoration {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.banner-circle {
  position: relative;
}

.dashed-curve {
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  overflow: visible;
}

/*
 * Change the first number to adjust dash length.
 * Change the second number to adjust the gap.
 */

.dashed-curve circle {
  fill: none;
  stroke: #aa91ff;
  stroke-width: 1;
  stroke-dasharray: 12 12;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.banner-icon-bg {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--purple-2);
}

.banner-icon {
  color: #fff;
  z-index: 3;
  font-variation-settings:
    "FILL" 1,
    "wght" 500,
    "GRAD" 0,
    "opsz" 20;
}


/* ==========================================================
   Top-left decoration
   Circle diameter: 306px
   ========================================================== */

.banner-decoration.left {
  --circle-size: 306px;
  top: -225px;
  left: -150px;
  width: var(--circle-size);
}

.left .banner-circle {
  top: 0;
  left: 0;
}

.left .banner-icon-bg {
  background: var(--purple-2);
  bottom: 20px;
  left: 75%;
  transform: rotate(-20deg);
}



/* ==========================================================
   Bottom-center decoration
   Circle diameter: 350px
   ========================================================== */

.banner-decoration.middle {
  --circle-size: 350px;
  left: calc(50% - 75px);
  top: 135px;
  width: var(--circle-size);
  transform: translateX(-50%);
}

.middle .banner-circle {
  left: 0;
  top: 0;
  transform: translateX(-50%);
}

.middle .banner-icon-bg {
  background: #FFC65C;
  top: 5px;
  left: 25%;
  transform: rotate(-20deg);
}

/* ==========================================================
   Top-right decoration
   Circle diameter: 306px
   ========================================================== */

.banner-decoration.right {
  --circle-size: 306px;
  top: 0;
  right: 0;
  width: var(--circle-size);
}

.right .banner-circle {
  top: -275px;
  left: 0;
}

.right .banner-icon-bg {
  background: #FF9B75;
  bottom: -15px;
  right: 45%;
  transform: rotate(5deg);
}



/* ==========================================
   Plan Comparison Table
========================================== */
#plan-comparison {
  padding-top:8rem;
  padding-bottom: 8rem;

  & .container {
    gap: 3.2rem;

    & h3 {
      flex: 0 0 auto;
    }

    & .btn-link {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 40rem;
      
      & span {
        padding: 1rem 1.6rem;
      }
    }
  }
}

  /* Comparison Table */
  .comparison-table {
    flex: 0 0 auto;
    max-width: 1280px;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

    th,
    td {
      border-bottom: 1px solid var(--border-color);
      padding: 0 1.6rem;
    }

    thead {
      th {
        color: var(--secondary-text);
        font-size: 18px;
        font-weight: 500;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;

        &:first-child {
          width: 100%;
          text-align: left;
        }

        &:not(:first-child) {
          text-align: center;
        }

        &:nth-child(2) {
          width: 50px;
        }
        &:nth-child(3) {
          width: 175px;
        }
        &:nth-child(4) {
          width: 145px;
        }
      }
    }

    tbody {
      th {
        font-weight: 500;
        text-align: left;
      }

      td:not(:first-child) {
        text-align: center;
      }
    }
  }

  
  /* Expand / Collapse Button */
  .feature-toggle {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .8rem 0;
    border: 0;
    background: transparent;
    color: var(--primary-text);
    font: inherit;
    text-align: left;
    cursor: pointer;

    &:hover,
    &[aria-expanded="true"] {
      color: var(--purple-4);
    }

    &:focus-visible {
      outline: 2px solid var(--purple-4);
      outline-offset: 4px;
      border-radius: 2px;
    }

    .material-symbols-outlined {
      font-size: 18px;
      flex-shrink: 0;
    }

    /* Default: Show Plus, Hide Minus */
    .icon-collapse {
      display: none;
    }

    /* Expanded: Hide Plus, Show Minus */
    &[aria-expanded="true"] {
      .icon-expand {
        display: none;
      }

      .icon-collapse {
        display: inline-block;
      }
    }
  } 

  /* Plan Availability Checkmarks */
  .checkmark {
    color: var(--purple-4);
    font-weight: 700;
    font-size: 18px;
  }

  /* Expanded Feature Details */
  .feature-details {
    &[hidden] {
      display: none;
    }

    td {

    }

    .feature-details-content {
      ul {
        list-style: disc;
        margin: 0;
        padding: .8rem .8rem .8rem 4.5rem;
        color: var(--secondary-text);
      }
    }

   
  }

#why-choose-us {
  padding-top: 6rem;
  padding-bottom: 6rem;

  & .container {
    max-width: 1290px;
    gap: 4rem;
  }

  & .cards {
    display: flex;
    gap: 4rem;
  }

  & .card {
    flex: 0 1 50%;
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 3.2rem;
    
    & img {
      flex: 0 0 84px;
    }

    & .card-content {
      flex: 1 1 auto;

    }
  }
}

#stats-banner {
  padding-top: 4rem;
  padding-bottom: 4rem;

  & ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4rem;

    & li {
      display: flex;
      align-items: center;
      gap: .8rem;
      font-size: 1.8rem;
      font-weight: 600;
    }

    & li:before {
      color: var(--success-color);
      content: 'check';
      font-family: 'Material Icons';
      font-size: 1.8rem;
    }
  }
}

#stats {
  padding-top: 6rem;
  padding-bottom: 6rem; 

  & .cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    
  }

  & .card {
    align-items: flex-start;
    text-align: left;
    flex: 0 0 365px;
    display: flex;
    flex-direction: column;
    gap: .8rem;
  }
}


/* ==========================================
   FAQ Section
========================================== */

#pricing-faqs {
    padding-top: 8rem;
    padding-bottom: 8rem;

    & h3 {
        margin-bottom: 6rem;
    }

    .faq-list {
        max-width: 1160px;
    }

    .faq-answer {
        margin-top: .8rem;
    }
}



/* ==========================================================
   Responsive behavior
   ========================================================== */


@container (max-width: 1100px) {
  .banner-decoration.left,
  .banner-decoration.middle,
  .banner-decoration.right {
    display: none;
  }
}

@media (max-width: 960px) {

  section#plan-pricing-cards {
    margin-bottom: 5.6rem;
  }

  .pricing-cards {
    flex-direction: column;

    .card {
      max-width: 504px;
      width: unset;

      p:first-of-type {
        height: unset;
      }

      .btn {
        width: 100%;
      }

      .text-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.6rem;
        font-weight: 500;
      }

      .included {
        display: none;
      }

      .included.is-visible {
        display: block;
      }

      .see-more .material-symbols-outlined {
        transition: transform 200ms ease;
      }

      .see-more[aria-expanded="true"] .material-symbols-outlined {
        transform: rotate(180deg);
      }
    }
  }

  .banner-content-layer {
    .content {
      h3 {
        font-size: 3.2rem;
      }
    }
  }
}

@media (max-width: 600px) {
  .contact-banner {  
    max-width: 100%;
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

  .banner-decoration-layer {
    display: none;
    z-index: -1;
  }

}