@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; }
  }
}

#quote {
  display: grid;
  grid: auto auto / auto 1fr;
  gap: 1.5rem 5rem;
  padding: 6rem max((100% - 72rem) / 2 + 2rem, 2rem);
  margin: 0;
  background: #EFF5FC;
  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;
    }
  }
}

#understand {
  background: #13283F;
  h2, h3 {
    color: white;
    span { color: #82C3FF; }
  }
  p {
    max-width: 50rem;
    color: #D0DBF5;
    font-size: 1.1rem;
  }
  ul {
    list-style: none;
    display: grid;
    grid: auto / repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin: 4rem 0 0;
    li {
      background: #2E4967;
      color: #AEBDD7;
      border-radius: .75rem;
      overflow: clip;
    }
    .title {
      display: block;
      margin: 1.5rem 1.5rem .75rem;
      color: white;
      font-weight: 600;
      font-size: 1.1rem;
    }
    p {
      margin: 0 1.5rem 2rem;
      font-size: .9rem;
      line-height: 1.3;
    }
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}
#then-ask {
  display: grid;
  grid: auto auto / 1fr 1fr;
  gap: 4rem;
  padding: 8rem 0 2rem;
  header {
    grid-area: 1 / 1 / 2 / -1;
  }
  img {
    max-width: 30rem;
    margin: 0 auto;
    width: 100%;
    height: auto;
    &[src*="related-questions"]{ margin-top: 1rem; }
  }
  @media (width < 56rem){
    grid: auto / 1fr;
  }
}
#reach {
  display: grid;
  grid: auto auto / 1fr 1fr;
  gap: 4rem;
  font-size: 1.1rem;
  header {
    grid-area: 1 / 1 / 2 / -1;
    max-width: 40rem;
  }
  ul {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
  }
  li {
    display: grid;
    grid: auto auto / auto 1fr;
    align-items: start;
    gap: .5rem 1.5rem;
    img {
      grid-area: 1 / 1 / -1 / 2;
      width: 2.25rem;
      height: auto;
    }
    span {

      font-weight: 600;
    }
    p {
      flex: 1;
      margin: 0;
    }
  }
  @media(width < 48rem){
    grid: auto / 1fr;
  }
}

#experiences {
  display: grid;
  grid: auto 1fr / 1fr auto;
  gap: 0 4rem;
  max-width: min(100% - 8rem + 2px, 60rem);
  padding: 2rem 4rem;
  margin: 4rem auto 9rem;
  color: #29303E;
  background: #F1FBFA;
  border: 1px solid #A5CECA;
  border-radius: clamp(0px, 100vw - 68rem, .75rem);
  header {
    & > span {
      display: block;
      width: max-content;
      padding: .25rem .75rem;
      margin: 1rem 0 2rem;
      color: #007387;
      background: #B1F7E3;
      font-weight: 600;
      border-radius: .5rem;
    }
    h2 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
      span { color: #007387; }
    }
  }
  img {
    grid-area: 1 / -2 / -1 / -1;
    place-self: center;
    width: 25rem;
    max-width: 100%;
  }
  @media (width < 54rem){
    grid: auto / 1fr;
    img {
      grid-area: auto;
      margin-block-start: 2rem;
    }
  }
}

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

#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;
  }
}