@layer base {
  main section { padding: 4rem max((100% - 72rem) / 2 + 2rem, 2rem); }
}

a:is(.primary, .secondary){
  padding: 1rem 1.4rem;
  border-radius: .75rem;
  text-decoration: none;
  transition: background-color .2s, box-shadow .2s;
}
a.primary {
  color: white;
  background-color: black;
  &:hover { background-color: #12324B; }
}
a.secondary {
  color: black;
  background: none;
  box-shadow: 0 0 0 2px inset #7A87A2;
  &:hover { box-shadow: 0 0 0 2px inset black; }
}

h1, h2, h3 {
  color: #091121;
  text-wrap: balance;
  span { color: #007DF1; }
}
h2 { font-size: clamp(1.8rem, 3.75vw + .675rem, 3rem); }
:where(section){ color: #29303E; }

#hero {
  padding-block-end: 6rem;
  h1 {
    max-width: 40rem;
    margin: 0;
    font-size: clamp(2rem, 2.4vw + 1.3rem, 3.2rem);
  }
  header {
    display: grid;
    grid: auto auto 1fr / 1fr auto;
    place-items: start;
    gap: 2rem 4rem;
    padding: 4rem 0 0;
  }
  img {
    grid-area: 1 / -2 / -1 / -1;
    width: min(40vw, 30rem);
    height: auto;
    border-radius: 2rem;
  }
  p {
    max-width: 40rem;
    margin: 0 0 2rem 0;
    font-size: clamp(1rem, .4vw + .88rem, 1.2rem);
  }
  nav {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0 0 2rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  @media (width < 64rem){
    header {
      grid-template: auto / 1fr;
      text-align: center;
      justify-items: center;
      gap: 2rem;
    }
    nav { justify-content: center; }
    img { display: none; }
  }
}

.trusted-by {
  color: #666F88;
  padding: 4rem;
  margin: 0 auto 5rem;
  figcaption { margin: 0 0 1.5rem; }
  @media (width < 800px){
    padding: 3rem;
  }
  img { height: clamp(1.8rem, 10vw - .1rem, 3rem); }
  @media (width >= 850px){
    img:nth-of-type(n + 6){ display: none; }
  }
}

#complex {
  padding-block-start: 6rem;
  background: #13283F;
  h2 { color: white; }
  h2, p {
    max-width: 50rem;
    text-wrap: balance;
  }
  h2 + p {
    color: #D0DBF5;
    font-size: clamp(1rem, .8vw + .9rem, 1.3rem);
  }
  img {
    width: 68rem;
    height: auto;
    margin: 2rem min(50vw - 36rem, 0rem) 1rem;
  }
  p {
    color: #AAB3C7;
  }
  strong {
    color: white;
    font-weight: 500;
  }
}

#transform {
  display: grid;
  grid: repeat(2, auto) 1fr / 1fr 1fr;
  gap: 2rem 6rem;
  padding-block: 8rem;
  .animated-image {
    place-self: center;
    grid-area: 1 / -2 / -1 / -1;
    width: min(40vw, 32rem);
  }
  h2, p {
    margin: 0;
  }
  p {
    font-size: 1.1rem;
  }
  @media(width < 54rem){
    grid: auto / 1fr;
    padding-inline: max(2rem, (100vw - 40rem) / 2 + 2rem);
    margin-inline: auto;
    .animated-image {
      margin-bottom: 2rem;
      width: min(100%, 32rem);
    }
  }
}

main > blockquote {
  display: grid;
  grid: auto auto / auto 1fr;
  gap: 1.5rem 5rem;
  max-width: 64rem;
  padding: 6rem clamp(2rem, 20vw - 2rem, 6rem);
  margin: 0 auto;
  background: #ECF2F9;
  font-size: 1.1rem;
  img {
    grid-area: 1 / 1 / -1 / 1;
    border-radius: 50%;
    width: 9rem;
    height: auto;
  }
  p {
    margin: 0;
    font-size: clamp(1rem, .8vw + .9rem, 1.3rem);
  }
  strong {
    color: #007DF1;
    font-weight: normal;
  }
  cite {
    color: #484E58;
    font-style: normal;
  }
  .quote-name { font-weight: 600; }
  @media(width < 50rem){
    grid: auto auto / auto 1fr;
    gap: 2rem 1rem;
    p {
      grid-area: 1 / 1 / 2 / -1;
    }
    img {
      grid-area: 2 / 1;
      width: 5rem;
    }
    cite {
      display: flex;
      flex-flow: column;
      justify-content: center;
    }
  }
}

#billing {
  padding-block: 6rem 8rem;
  header p {
    font-size: 1.1rem;
    max-width: 50rem;
    text-wrap: balance;
  }
  #every-way nav .selected {
    background: black;
    color: white;
  }
  section { padding: 0; }
  #edge-cases {
    padding-top: 6rem;
    display: grid;
    gap: 2rem;
    grid: auto / repeat(4, 1fr);
    h3 {
      font-weight: 600;
      grid-area: 1 / 1 / 2 / -1;
    }
    h4 {
      color: #666F88;
      font-weight: 400;
      font-size: 1.1rem;
      margin: 0;
    }
    ul {
      padding: 0;
      margin: .75rem 0 0 -.25rem;
      list-style: none;
      display: flex;
      flex-flow: column;
      gap: .5rem;
    }
    li {
      padding-left: 1.75rem;
      background: 0 .25rem / 1rem 1rem no-repeat url("data:image/svg+xml, \
        %3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E \
          %3Cpath d='M1 4L3 7M3 7L7 2' stroke='%232FB07F' fill='none' stroke-linecap='round'/%3E \
        %3C/svg%3E \
      ");
    }
    @media (width < 60rem){
      grid: auto / 1fr 1fr;
    }
    @media (width < 32rem){
      grid: auto / 1fr;
    }
  }
}

#consistent {
  display: grid;
  grid: repeat(2, auto) 1fr / 1fr 1fr;
  gap: 2rem 4rem;
  padding-block: 8rem;
  background: #13283F;
  h2 { color: white; }
  h2, p {
    margin: 0;
    text-wrap: initial;
  }
  p {
    color: #D0DBF5;
    font-size: 1.1rem;
  }
  .animated-image {
    place-self: center;
    grid-area: 1 / -2 / -1 / -1;
    width: min(40vw, 32rem);
  }
  @media(width < 54rem){
    grid: auto / 1fr;
    padding-inline: max(2rem, (100vw - 40rem) / 2 + 2rem);
    margin-inline: auto;
    .animated-image {
      margin-bottom: 4rem;
      width: min(100%, 32rem);
    }
  }
}

#story {
  display: flex;
  flex-flow: row-reverse;
  align-items: start;
  gap: 4rem;
  padding-block: 6rem;
  color: #091121;
  header {
    flex: 0 0 20rem;
    padding: .5rem 0 1.5rem 3rem;
    margin: 2rem 0 0;
    font-size: 1.1rem;
    border: 1px solid #D0DBE7;
    border-width: 0 0 0 1px;
    h2, p { display: inline; }
    h2 {
      font-weight: 600;
      font-size: 1.5rem;
      margin: 0 .25rem 0 0;
    }
    p { color: #29303E; }
    a {
      display: block;
      max-width: max-content;
      margin: 1rem 0 0;
      color: inherit;
      text-decoration: none;
      font-weight: 500;
      &::after {
        content: url("data:image/svg+xml, \
          %3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E \
            %3Cpath d='M1 5H9M9 5L6 2M9 5L6 8' stroke='%23091121' fill='none' stroke-linecap='round'/%3E \
          %3C/svg%3E \
        ");
        display: inline-block;
        width: 1rem;
        height: 1rem;
        vertical-align: -.2rem;
        margin-inline-start: .5rem;
      }
      &:is(:hover, :focus){ text-decoration: underline; }
    }
  }
  blockquote {
    flex: 2 0 0;
    margin: 0;
    position: relative;
    p {
      font-weight: 600;
      font-size: clamp(1.5rem, 2vw + .8rem, 2rem);
      line-height: 1.25;
    }
    &::before {
      content: "\201C";
      color: #9CA6BA;
      font-weight: 600;
      font-size: 5rem;
      line-height: 1;
      position: absolute;
      inset: -1rem auto auto 0;
    }
  }
  cite {
    display: grid;
    grid: auto auto / auto 1fr;
    gap: 0 1rem;
    color: #575E6C;
    font-style: normal;
    font-size: .875rem;
    img {
      grid-area: 1 / 1 / -1 / 2;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
    }
    .quote-name {
      place-self: end start;
      color: #484E58;
      font-weight: 500;
      font-size: 1.1rem;
    }
  }
  @media(width < 48rem){
    flex-flow: column;
    header {
      flex: 0 0 auto;
      padding: 0 0 4rem;
      border-width: 0 0 1px;
    }
  }
}

.footer-cta {
  background: #E1F0FE;
  gap: 4rem;
  header p {
    text-wrap: balance;
  }
}