@layer modules {
  html, body {
    scroll-padding-top: calc(var(--nav-height) + 8rem);
  }
  #faq {
    h2 {
      font-size: 2.2rem;
      margin-bottom: 1.5em;
    }
    h3 {
      margin: 0;
      font-size: clamp(1.2rem, 1.5vw + .9rem, 1.4rem);
      width: 100%;
    }
    a {
      color: #1a4cff;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
    header {
      padding: 2rem 2rem 2rem 0;
      position: relative;
      cursor: pointer;
      &::after {
        content: url("data:image/svg+xml, \
          %3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E \
            %3Cpath d='M4 1V7M1 4H7' stroke='black' fill='none' stroke-linecap='round'/%3E \
          %3C/svg%3E"
        );
        position: absolute;
        inset: 50% 0 auto auto;
        width: 1.2rem;
        height: 1.2rem;
        translate: 0 -50%;
        rotate: 45deg;
        transition: rotate .2s;
      }
    }
    .question {
      padding: 0 clamp(1rem, 13vw - 1.6rem, 3rem) 1rem 1rem;
      border-bottom: 1px solid #c7d4de;
      transition: padding-bottom .2s;
    }
    .answer {
      display: flow-root;
      padding: 0;
      font-size: 1.1rem;
      overflow: hidden;
      overflow: clip;
      transition: opacity .2s;
    }
    p { margin: 1.5rem 0; }
    ul {
      padding: 0 0 0 .2rem;
      margin: 2rem 0;
    }
    li {
      margin: .5rem 0 .5rem 1rem;
      padding-left: .5rem;
    }
    .closed {
      padding-bottom: 0;
      header::after { rotate: 0deg; }
      .answer {
        opacity: 0;
        height: 0;
        margin-top: 0;
      }
    }
  }
}