main {
  display: flex;
  flex-direction: column;
}

.landing {
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-0);

  h1, h2 {
    color: var(--text-secondary);
  }

  footer {
    background-color: var(--bg-dark);
    color: var(--bg-accent-emphasis);

    .footer-content {
      padding: var(--fx-m-64) var(--fx-m-24) 0 var(--fx-m-24);
      display: flex;
      flex-direction: column;
      gap: var(--fx-m-32);
      max-width: 1322px;
      margin: 0 auto;

      img {
        pointer-events: none;
      }
    }

    .slogan-and-socials {
      display: flex;
      flex-direction: column;
      gap: var(--fx-m-32);
    }

    .socials {
      ul {
        display: flex;
        gap: var(--fx-m-20);

        li {
          display: flex;
          align-items: center;
          justify-content: center;
          list-style-type: none;
          height: var(--fx-m-32);
          width: var(--fx-m-32);
          background-color: var(--bg-accent-emphasis);
          border-radius: 100%;
        }
      }
    }

    .footer-bottom {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--fx-m-32);

      a {
        color: var(--bg-accent-emphasis);

        &:hover {
          color: var(--bg-accent-light);
        }
      }

      .language-switch-link {
        grid-column: 1;
        grid-row: 2;
      }

      .copyright {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .back-to-top {
        grid-column: 3;
        grid-row: 2;
      }
    }

    @media (width > 600px) {
      .footer-content {
        position: relative;

        img {
          position: absolute;
          left: 0;
          width: 100%;
          right: 0;
          bottom: 24px;
        }
      }

      .slogan-and-socials {
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
      }

      .footer-bottom {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        margin-top: var(--fx-m-128);

        .language-switch-link {
          justify-self: start;
          grid-column: 1;
          grid-row: 1;
        }

        .copyright {
          justify-self: center;
          grid-column: 2;
          grid-row: 1;
          text-align: center;
        }

        .back-to-top {
          justify-self: end;
          grid-column: 3;
          grid-row: 1;
        }
      }
    }

    @media (width > 730px) {
      .slogan-and-socials {
        margin-inline: var(--fx-m-32);
      }

      .footer-content {
        img {
          bottom: 0;
        }
      }

      .footer-bottom {
        margin-top: calc(var(--fx-m-128) * 2);
      }
    }
  }

  .hero {
    background-color: var(--bg-accent-light);
    padding: var(--fx-p-24);
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fx-p-16);
    overflow: hidden;

    header {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .sprout-logo {
        color: var(--bg-dark);
      }

      .partner-logo {
        max-height: 44px;
      }
    }

    .hero-content {
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--fx-p-32);
      width: 100%;
      position: relative;

      h1 {
        hyphens: auto;
        text-align: center;
        /* Not using <Typography />, this copy is unique and outside the design system. */
        font-family: var(--nib-pro), serif;
        font-size: 48px;
        font-weight: var(--font-weight-regular);
        line-height: 52px;
        letter-spacing: -1px;
      }

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--fx-p-16);
        margin-bottom: var(--fx-m-64);
        max-width: 845px;
        z-index: 9;
      }
    }

    .mother-cellphone {
      max-width: 164px;
      z-index: 5;
    }

    .woman-reading {
      display: none;
    }

    .sprout-glyph {
      position: absolute;
      z-index: 5;
      height: 100%;
      transform: translate(0, -50%);
      bottom: -50%;
    }

    @media (width > 650px) {
      .hero-content {
        h1 {
          font-size: 96px;
          line-height: 102px;
          letter-spacing: -2.289px;
        }
      }
    }

    @media (width > 920px) {
      .hero-content {
        h1 {
          hyphens: none;
        }
      }
    }

    @media (width > 1038px) {
      .sprout-glyph {
        z-index: 5;
        width: 120%;
        transform: translate(-50%, -25%);
        left: 50%;
        height: unset;
        bottom: unset;
      }
    }

    @media (width > 1350px) {
      padding: var(--fx-p-24) var(--fx-p-64);
      height: 944px;

      .mother-cellphone {
        position: absolute;
        max-width: 354px;
        right: var(--fx-p-40);
        top: 500px;
        animation: bob-up-and-down-animation 5s ease-in-out infinite;
      }

      .woman-reading {
        display: block;
        position: absolute;
        max-width: 200px;
        z-index: 5;
        left: var(--fx-m-12);
        top: 270px;
        animation: bob-up-and-down-animation 5s ease-in-out infinite;
        animation-delay: 1s;
      }

      .hero-content {
        div {
          margin-top: var(--fx-m-128);

          p {
            margin-inline: var(--fx-m-128);
          }
        }
      }
    }
  }

  .how-it-works {
    padding: calc(var(--fx-p-64) * 2) var(--fx-p-24);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fx-m-64);

    .intro-blurb {
      display: flex;
      flex-direction: column;
      gap: var(--fx-m-16);
      max-width: 612px;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 auto;
      gap: var(--fx-p-24);

      .tile {
        text-align: left;
        background: linear-gradient(180deg, var(--sky-blue-400) 0%, color-mix(in srgb, var(--sky-blue-400) 75%, transparent) 100%);
        padding: var(--fx-m-32) var(--fx-m-24);
        display: flex;
        flex-direction: column;
        gap: var(--fx-m-32);
        max-width: 400px;

        div {
          display: flex;
          flex-direction: column;
          gap: var(--fx-m-8);

          p {
            margin: 0;
          }
        }

        img {
          width: 68px;
          height: 68px;
        }
      }
    }
  }

  .whats-included {
    display: flex;
    flex-direction: column;
    align-items: center;

    .container {
      max-width: 1160px;
      padding: var(--fx-p-24) var(--fx-p-24) var(--fx-p-128) var(--fx-p-24);
      display: flex;
      flex-direction: column;
      gap: var(--fx-p-64);
    }

    img {
      max-width: 566px;
      width: 100%;
    }

    .perks-section {
      display: flex;
      flex-direction: column;
      gap: var(--fx-p-32);
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--fx-p-32);

      li {
        list-style-type: none;

        p {
          margin: 0;
        }
      }
    }

    @media (width >= 600px) {
      .container {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--fx-p-96);
      }
    }
  }

  .pricing {
    padding: var(--fx-p-24) var(--fx-p-24) var(--fx-p-128) var(--fx-p-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fx-m-40);

    p {
      margin: 0;
    }

    .blurb {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--fx-m-32);
    }

    .membership-price {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: var(--fx-m-12);
    }

    .pricing-tiles {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--fx-m-24);
    }

    .tile {
      max-width: 400px;
      padding-block: var(--fx-p-40);
      justify-content: space-between;
      gap: var(--fx-m-32);

      > div {
        flex: 1;
      }
    }

    @media (width >= 650px) {
      .pricing-tiles {
        flex-direction: row;
        align-items: stretch;
      }
    }

    @media (width >= 1000px) {
      flex-direction: row;
      justify-content: center;

      .blurb {
        max-width: 338px;
        margin-right: var(--fx-p-64);
        align-items: flex-start
      }

      .tile {
        padding-block: var(--fx-p-64);
      }
    }
  }

  .savings {
    padding: 0 var(--fx-p-24) var(--fx-p-128) var(--fx-p-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fx-p-40);

    .intro-blurb {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--fx-p-32);
      max-width: 612px;

      p {
        margin: 0;
      }
    }

    .pricing-table {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--fx-p-20);
      max-width: 824px;
      width: 100%;

      .tabs {
        width: 100%;
      }

      p {
        margin: 0;
        align-self: self-start;
      }
    }

    .additional-benefits {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--fx-m-16);
      max-width: 824px;

      p {
        margin: 0;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: var(--fx-m-12);

        li {
          list-style-type: none;
        }
      }
    }
  }

  .faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fx-m-40);
    background-color: var(--sky-blue-200);
    padding: var(--fx-p-128) var(--fx-p-24) var(--fx-p-128) var(--fx-p-24);

    .accordion {
      max-width: 1036px;
    }

    h2 {
      text-align: center;
    }

    ul {
      padding-left: var(--fx-p-24);

      li {
        list-style-type: circle;
      }
    }
  }
}