@layer layouts {
  h1 {
    margin: 1em 0 0;
    font-size: clamp(2rem, 3.4vw + 1rem, 3.7rem);
  }

  #fake-navigation-menu {
    display: flex;
    height: var(--nav-height);
    padding: 0 max((100% - 1320px) / 2 + 2rem, 2rem);
    position: fixed;
    inset: 0 0 auto 0;
    background-color: rgb(255 255 255 / 95%);
    box-shadow: 0 3px 8px rgb(88 88 88 / 10%);
    z-index: 1000000;
    transition: .2s;
    &[hidden]{ transform: translateY(-100%); }
    &::after {
      content: "";
      display: block;
      width: calc(100% * var(--scroll-progress, 0));
      height: 5px;
      position: absolute;
      inset: 100% auto auto 0;
      background-color: var(--report-color);
      border-radius: calc((1 - var(--scroll-progress)) * 1000px);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    a:not(.nav-cta) {
      display: flex;
      align-items: center;
      width: 9rem;
      height: 100%;
      padding: .2rem;
      margin-right: auto;
    }
    img {
      width: 100%;
      height: auto;
    }
    button, a.nav-cta {
      background: var(--report-color);
      border: none;
      place-self: center;
      color: white;
      padding: .8rem 1.4rem;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      border-radius: 3px;
      transition: .2s;
      cursor: pointer;
      white-space: nowrap;
      &:hover { opacity: .7; }
    }
  }

  signup-form {
    display: grid;
    grid-template: 4.5rem auto / 1fr 4.5rem;
    margin-top: 1.4rem;
    input {
      min-width: 0;
      padding: 1rem;
      background-color: #fafcff;
      border: none;
      border-radius: .5rem 0 0 .5rem;
      outline: none;
      font-size: 1.1rem;
    }
    button {
      color: white;
      background-color: var(--report-color, #2e5dff);
      border: none;
      border-radius: 0 .5rem .5rem 0;
      font-size: 1.6rem;
      cursor: pointer;
      transition: .2s;
      &:hover { opacity: .8; }
      &:disabled {
        cursor: default;
        filter: grayscale(50%);
        opacity: .5;
      }
    }
    p { margin: 0; }
    p[data-signup-form-message]{
      margin: .5rem 1rem;
      grid-area: 2 / 1 / 3 / -1;
      &:empty { margin: 0; }
    }
    consent-checkbox {
      grid-area: 3 / 1 / 4 / -1;
      margin: 0 1rem;
    }
  }

  dialog {
    display: block;
    width: 600px;
    padding: 0;
    position: fixed;
    inset: 0;
    border: none;
    box-shadow: 0 0 0 100vmax rgb(18 50 75 / 50%);
    border-radius: .5rem;
    transition: all .3s, visibility 0s 0s;
    &:not([open]){
      visibility: hidden;
      opacity: 0;
      transition: all .3s, visibility 0s .3s;
    }
    ::backdrop { background: none; }
    .dialog-content { padding: 2.5rem; }
    h2 { margin-top: .25em; }
    signup-form input {
      border: 2px solid #d8dce3;
      border-right: none;
    }
  }

  #hero {
    padding-block: 6rem;
    display: flex;
    min-height: 20vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    .description {
      margin: 1rem;
      font-size: clamp(1.1rem, .8vw + .86rem, 1.5rem);
      font-weight: 600;
    }
    .byline {
      margin: 0;
      font-size: .95rem;
      opacity: .7;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: no-repeat center / 100% 100% linear-gradient(150deg,
          var(--gradient-start) 10%,
          var(--gradient-end) 80%
        );
    }
  }

  #content {
    display: grid;
    padding: 4rem max((100% - 1200px) / 2 + 2rem, 2rem);
    margin: 0 auto;
    grid-template: "sidebar article" auto / 1fr 720px 0;
    gap: 3rem;
    place-items: start stretch;
    @media (width < 1200px){
      max-width: 700px;
      padding-block-end: 0;
      grid-template: "sidebar" auto "article" auto / 100%;
    }
  }

  #sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-height: calc(100vh - var(--nav-height) - 4rem);
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
    #sidebar-cta {
      margin-top: 1rem;
      & > p {
        margin: .3rem 0;
        font-size: .9rem;
      }
      @media(height < 800px){
        display: none;
      }
    }
    signup-form {
      margin-block: .8rem -1rem;
      grid: 3rem auto / 1fr max-content;
      button {
        padding-inline: 1rem;
        font-size: 1rem;
      }
      input {
        font-size: 1rem;
        border: 2px solid #D8DCE3;
        border-right-width: 0;
      }
      p[data-signup-form-message]{ font-size: .85rem; }
    }
    #sidebar-logo, #sidebar-toggle { display: none; }

    @media (width < 1200px){
      display: grid;
      grid: 1fr auto / 1fr;
      position: fixed;
      inset: var(--nav-height) auto 0 0;
      z-index: 1000010;
      max-height: none;
      width: clamp(16rem, 18.5vw + 12rem, 22rem);
      max-width: calc(100vw - 5rem);
      padding: 1rem;
      background-color: rgb(255 255 255 / 95%);
      box-shadow: 3px 8px 8px rgb(88 88 88 / 10%),
        0 12px 8px -8px inset white;
      transition: top .2s, box-shadow .3s, transform .3s;
      &.full-height { top: 0; }
      &:not(.open){
        transform: translate(-100%);
        box-shadow: 3px 8px 8px rgb(88 88 88 / 0%),
          0 12px 8px -8px inset white;
      }
      #sidebar-toggle {
        display: block;
        position: absolute;
        inset: auto auto 1rem 100%;
        border: none;
        background: rgb(255 255 255 / 95%);
        padding: 1rem;
        border-radius: 0 1rem 1rem 0;
        box-shadow: 4px 3px 5px -1px rgb(88 88 88 / 30%),
          12px 0 8px -8px inset white;
        cursor: pointer;
        svg {
          display: block;
          height: 1.5rem;
        }
      }
    }
  }

  #document-outline {
    overflow: auto;
    .link-h2 {
      color: black;
      font-size: 1.2rem;
      &:not(:first-child){ margin-top: .8rem; }
    }
    .link-h3 {
      font-size: 0.9rem;
      padding-left: 2rem;
    }
  }

  #share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    a {
      flex: 0 1 2.7rem;
      display: inline-block;
      padding: .5rem;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      position: relative;
      color: #12324B;
      background-color: #f0f1f5;
      border-radius: .75rem;
      transition: .2s;
      svg {
        display: block;
        aspect-ratio: 1 / 1;
      }
      &:hover { opacity: .7; }
    }
  }

  article {
    grid-area: article;
    max-height: none;
    & > h2 {
      font-size: 2rem;
      margin: 4em 0 1em;
      position: relative;
      &:first-of-type { margin-top: 1em; }
      &::before {
        content: "";
        height: 5px;
        width: 4rem;
        background-color: var(--report-color);
        position: absolute;
        inset: -0.75em auto auto 0;
        border-radius: 1rem;
      }
    }
    h3 {
      font-size: 1.4rem;
      margin: 3em 0 1em;
    }
    & > p { margin: 2em auto; }
    p.images {
      display: flex;
      gap: 1rem;
      img {
        flex: 1;
        width: 0;
        height: auto;
      }
    }
    :is(p, figure, li) a {
      color: #245aff;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
    .callout {
      border: 2px solid #ddd;
      padding: 1rem 1.5rem;
      border-radius: 1rem;
      font-style: italic;
    }
    figure:not(.graphic){
      display: grid;
      padding: 1.5rem;
      margin: 2rem 0;
      grid-template: auto / 9rem 1fr;
      place-items: center;
      gap: 0 2rem;
      color: #11324b;
      background:
        no-repeat center / 100% 100%
          linear-gradient(to right, transparent, #f8f9ff80),
        no-repeat 100% 10% / 300px
          radial-gradient(at top right, var(--gradient-start), transparent 70%),
        no-repeat 100% 80% / 300px
          radial-gradient(at bottom right, var(--gradient-end), transparent 70%),
        #f8f9ff;
      border-radius: 1rem;
      img {
        grid-column: 1 / 1;
        place-self: start;
      }
      figcaption p {
        &:first-child { margin-top: 0; }
        &:last-child { margin-bottom: 0; }
      }
      &.blockquote {
        img {
          grid-row: 1 / 3;
          max-width: 150px;
        }
        figcaption { place-self: start; }
      }
      & > * { grid-column: 2 / 3; }
      blockquote {
        margin: 0;
        font-weight: 300;
      }
      blockquote::before {
        content: url("data:image/svg+xml,\
          %3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E\
            %3Cpath d='M3 18A1 1 0 0 0 9 15A1 1 0 0 0 3 18Q0 9 10 3Q0 9 3 18ZM15 18A1 1 0 0 0 21 15A1 1 0 0 0 15 18Q12 9 22 3Q12 9 15 18' \
              stroke='%2311324b' fill='%2311324b' stroke-width='3'\
            /%3E\
          %3C/svg%3E"
        );
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        padding: .4rem 0;
      }
      blockquote + figcaption {
        margin-top: .5rem;
        font-size: .9rem;
        font-weight: 600;
        a {
          color: inherit;
          text-decoration: underline;
        }
      }
      @media (width < 700px){
        grid-template: auto / 1fr;
        img {
          margin: 0 auto 2rem;
          max-width: 200px;
        }
        &.blockquote img {
          margin: 0 auto;
          grid-row: 1 / 2;
        }
        & > * { grid-area: initial; }
      }
    }
    figure.graphic {
      margin-inline: 0;
      figcaption {
        font-style: italic;
        text-align: center;
        text-wrap: balance;
      }
    }
  }

  article > img {
    display: block;
    margin-inline: auto;
    & + .caption {
      margin-top: .5rem;
      font-style: italic;
      text-align: center;
    }
  }
  article > img, article > figure > img {
    max-width: 100%;
    height: auto;
  }

  .benchmarks-cta, .email-cta, .cta {
    --accent-color: var(--report-color);
    margin: 2rem 0;
    background-image: linear-gradient(150deg,
      var(--gradient-start) 10%,
      var(--gradient-end) 80%
    );
  }
  .benchmarks-cta a { background-color: var(--report-color); }
  .cta {
    padding: 2rem clamp(15px, 15vw - 45px, 45px);
    margin-inline: clamp(-30px, 60vw - 480px, 0px);
    border-radius: clamp(0px, 40vw - 300px, 20px);
    text-align: center;
    & > img {
      max-width: 500px;
      height: auto;
    }
    .cta-header {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 700;
    }
    signup-form[slot=content] { margin-bottom: 0; }
    & > a {
      display: block;
      width: fit-content;
      padding: .8rem 1.4rem;
      margin: 1.5rem auto 0;
      color: white;
      background-color: var(--report-color);
      font-size: 1rem;
      font-weight: 700;
      border-radius: .4rem;
      text-decoration: none;
      transition: opacity .2s;
      &:hover { opacity: .8; }
    }
  }

  .footer-cta {
    position: relative;
    overflow: clip;
    background: none;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: no-repeat center / 100% 100% linear-gradient(150deg,
          var(--gradient-start) 10%,
          var(--gradient-end) 80%
        );
    }
  }

  ol, ul {
    margin-top: -.8em;
  }
}