/* Plans & Pricing page: Pricing Plans, Pricing Plan and FAQ Item blocks. */
@layer page {
  /* Plan columns. Squarespace rows bleed 17px past the column on each side and
     every block inside a column carries 17px of horizontal padding. */
  .pricing-plans .acf-innerblocks-container {
    display: flex;
    margin: 0 -17px;
  }

  .pricing-plan {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 17px;
    text-align: center;
    font-size: 17px;
    line-height: 1.5em;
  }

  .pricing-plan strong {
    font-weight: 700;
  }

  /* Badge row is always reserved so the plan boxes line up across columns. */
  .pricing-plan .plan-badge {
    height: 28px;
  }

  .pricing-plan .plan-badge-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .pricing-plan .plan-name {
    margin: 2% 0 17px;
    padding: 16px;
    background-color: rgba(237, 237, 237, 0.77);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 0.05em;
  }

  .pricing-plan .plan-billing {
    padding: 17px 0;
  }

  /*.pricing-plan .plan-billing p + p {
    margin-top: 1em;
  }*/

  .pricing-plan .plan-button {
    padding: 17px 0;
  }

  .pricing-plan .plan-features {
    padding: 17px 0;
    text-align: left;
  }

  .pricing-plan .plan-features li {
    position: relative;
    margin: 8px 0;
    padding-left: 40px;
  }

  .pricing-plan .plan-features li::before {
    content: "\2022";
    position: absolute;
    left: 24px;
  }

  /* Stack the plan columns on narrow screens. */
  @media (max-width: 800px) {
    .pricing-plans .acf-innerblocks-container {
      flex-direction: column;
      gap: 40px;
    }

    /* No need to reserve the badge row once the columns no longer line up. */
    .pricing-plan .plan-badge:not(:has(.plan-badge-text)) {
      height: auto;
    }

    /* Billing text and the buy button sit side by side. */
    .pricing-plan {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .pricing-plan > * {
      flex: 0 0 100%;
    }

    .pricing-plan .plan-billing,
    .pricing-plan .plan-billing + .plan-button {
      flex: 1 1 0;
    }
  }
}