.about{
        width: min(740px, 100%);
        margin: 0 auto;
        padding: 40px 0 20px;
        text-align: left;
      }

      .about h1{
        font-size: clamp(30px, 5vw, 44px);
        font-weight: 600;
        letter-spacing: -0.5px;
        line-height: 1.15;
        margin: 0 0 24px;
      }

      .about h2{
        font-size: clamp(19px, 2.4vw, 22px);
        font-weight: 700;
        letter-spacing: -0.1px;
        margin: 44px 0 14px;
      }

      .about p,
      .about li{
        color: var(--white-dim);
        line-height: 1.7;
        font-size: 16px;
      }

      .about p{
        margin: 0 0 16px;
      }

      .about-lede{
        font-size: 18px;
        color: var(--white);
      }

      .about ul{
        margin: 0 0 16px;
        padding-left: 20px;
      }

      .about li{
        margin-bottom: 8px;
      }

      .about li::marker{
        color: var(--yellow1);
      }

      .about strong{
        color: var(--white);
      }

      /* Prose links only. The action row below is excluded so it does not
         out-specify the shared .cta rule in layout.html, which paints the
         button's label dark against the yellow fill. */
      .about p:not(.about-actions) a,
      .about li a{
        color: var(--white);
        text-decoration: underline;
        text-decoration-color: rgba(255,221,0,.55);
        text-underline-offset: 3px;
        transition: text-decoration-color .15s ease;
      }

      .about p:not(.about-actions) a:hover,
      .about li a:hover{
        text-decoration-color: var(--yellow1);
      }

      .about-actions{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        margin-top: 40px;
        padding-top: 32px;
        border-top: 1px solid var(--b3);
      }

      .about-secondary{
        color: var(--muted);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
      }

      .about-secondary:hover{
        color: var(--white);
      }