main section {
  padding: 80px 24px 24px 24px;
  color: #1c1c1c;

  & .section-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 48px;
    border-bottom: 1px solid #dddddd;
  }

  & .section-header {
    display: flex;
    align-items: center;

    & .illustration {
      padding: 24px 48px;

      img {
        display: inline-block;
        width: 100%;
      }
    }

    & .header-content {
      padding: 24px 0;

      & .intro {
        display: block;
        margin-bottom: 12px;
        color: var(--success);
        font-size: 24px;
      }

      & h2 {
        margin-bottom: 24px;
        font-size: calc(26px + 0.4vw);
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: #1c1c1c;
      }

      & .subtitle {
        margin-bottom: 32px;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.5;
        color: #1c1c1c;

        &:last-child {
          margin-bottom: 0;
        }
      }

      & .cta-box {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      & .cta-note {
        display: block;
        margin-top: 16px;
        font-size: 16px;
        color: #666666;
      }
    }

    &.section-header-1-4 {
      & .illustration {
        width: 33.33%;
      }
      & .header-content {
        width: 66.66%;
      }
    }

    &.section-header-1-1 {
      & .illustration {
        width: 50%;
      }
      & .header-content {
        width: 50%;
      }
    }
  }

  & ul.problems-list {
    list-style-type: none;
    display: flex;
    margin: 0 0 24px 0;
    padding: 0;
    gap: 16px;

    & li {
      width: 50%;
      padding: 24px;
      border: 1px solid #dddddd;
      border-radius: 7px;
    }

    & .problem-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;

      & strong {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
      }
    }

    & .problem-desc {
      font-size: 16px;
      margin-bottom: 12px;
      line-height: 1.6;
    }
  }

  & ul.benefits-list {
    list-style-type: none;
    display: flex;
    margin: 0 0 24px 0;
    padding: 0;
    gap: 16px;

    & li {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      padding: 24px;
      background: white;
      border-radius: 7px;
      border: 1px solid #dddddd;

      & span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
        background: #f1f1f1;
        border-radius: 50px;
        color: #6c6c6c;
        font-weight: 600;
      }

      & strong {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding-bottom: 12px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid #dddddd;
      }

      & p {
        font-size: 15px;
        line-height: 1.6;
        color: #555555;
      }

      &:last-child {
        border: 1px solid var(--success);

        & strong {
          color: var(--success);
        }

        & p {
          color: #1c1c1c;
          font-weight: 500;
        }

        & span {
          color: white;
          background: var(--success);
        }

        &::before {
          display: none;
        }
      }
    }
  }

  & ul.advantages-list {
    list-style-type: none;
    display: flex;
    margin: 0 0 24px 0;
    padding: 0;
    gap: 16px;

    & li {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      padding: 24px;
      background: white;
      border-radius: 7px;
      border: 1px solid #dddddd;

      & i {
        margin-bottom: 12px;
        font-size: 32px;
        color: var(--success);
      }

      & strong {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding-bottom: 12px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid #dddddd;
      }

      & p {
        font-size: 15px;
        line-height: 1.6;
        color: #555555;
      }
    }
  }
}

/* heading left, questions right, like the other two-column sections */
#faq .section-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 800px) {
  #faq .section-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.faq-list {
  padding-top: 24px;

  & details {
    border-bottom: 1px solid #dddddd;
  }

  & summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1c1c1c;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: "+";
      color: var(--success);
      font-size: 24px;
      line-height: 1;
    }

    &:hover {
      color: var(--success);
    }

    /* no box after a mouse click; keyboard users still get one */
    &:focus {
      outline: none;
    }

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

  & details[open] summary::after {
    content: "−";
  }

  & p {
    padding: 0 0 20px 0;
    font-size: 18px;
    line-height: 1.6;
    color: #555555;
  }
}

ul.videos-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;

  & > li {
    display: flex;
    align-items: center;
    margin: 32px auto;
    padding: 64px 0 0 0;
    gap: 32px;
    border-top: 1px dashed #dddddd;

    &:first-child {
      padding-top: 32px;
      border-top: 1px dashed transparent;
    }

    & > div {
      width: 60%;
    }

    & .descrition {
      width: 40%;
    }

    h3 {
      margin-bottom: 24px;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 600;
    }

    p {
      font-size: 18px;
      margin-bottom: 24px;
    }

    ol {
      margin: 0 0 0 24px;
      font-size: 18px;
      padding: 0;

      & > li {
        margin-bottom: 8px;
      }
    }

    & .video-content {
      & video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 11px;
      }
    }
  }

  & > li:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}

@media (max-width: 800px) {
  main section {
    padding: 8px 24px;

    & .section-wrapper {
      flex-direction: column;
      gap: 12px;

      & .section-header {
        width: 100%;
        flex-direction: column;

        & .header-content,
        & .illustration {
          width: 100%;
          padding: 0;
        }

        & .header-content .cta-box {
          justify-content: center;
        }

        & .illustration {
          padding-top: 24px;
          text-align: center;

          & img {
            display: inline-block;
            width: 50%;
            max-width: 100%;
          }
        }
      }

      & > ul {
        flex-direction: column;

        & > li {
          flex: none;
          width: 100%;
        }
      }

      & ul.benefits-list > li,
      & ul.advantages-list > li {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: start;

        & > span,
        & > i {
          grid-row: span 2;
          margin-bottom: 0;
        }

        & strong {
          text-align: left;
        }
      }

      & .videos-list {
        & > li {
          flex-direction: column;
          margin: 0;
          padding: 32px 0 8px 0;

          & > div {
            width: 100%;
          }
        }
      }
    }
  }

  /* clears the 110px unscrolled header (body pads only 60px) */
  main section.hero {
    padding-top: 64px;
  }

  /* wide illustration, not a square one */
  #advantages .section-header .illustration img {
    width: 100%;
  }

  #about .header-content {
    text-align: center;
  }
}