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

main > blockquote {
  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; }
  &:is(#quote-two){ background: none; }
  @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 {
  padding-block: 6rem 8rem;
  background: #13283F;
  h2, h3 {
    color: white;
    span { color: #82C3FF; }
  }
  :is(header, ul) 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;
  padding: 8rem 0 2rem;
}

#question-asker {
  display: grid;
  grid: repeat(5, 0 auto) / repeat(2, minmax(0, 1fr));
  gap: .25rem 4rem;
  margin: 4rem 0 0;
  input {
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0.01;
  }
  label {
    align-self: start;
    grid-column: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    color: white;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
    &::before {
      align-self: start;
      flex: 0 0 2rem;
      content: url("data:image/svg+xml, \
        %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 28 28'%3E \
          %3Crect width='28' height='28' fill='%23294C74' rx='6'/%3E \
          %3Cpath stroke='%23BAD3FF' stroke-linejoin='round' stroke-width='1.5' d='m14 8 1.36 3.44c.12.32.19.48.28.61q.13.18.3.3c.14.1.3.17.62.3L20 14l-3.44 1.36c-.32.12-.48.19-.61.28q-.18.13-.3.3c-.1.14-.17.3-.3.62L14 20l-1.36-3.44a3 3 0 0 0-.28-.61 1 1 0 0 0-.3-.3c-.14-.1-.3-.17-.62-.3L8 14l3.44-1.36c.32-.12.48-.19.61-.28q.18-.13.3-.3c.1-.14.17-.3.3-.62z'/%3E \
        %3C/svg%3E \
      ");
      width: 2rem;
      height: 2rem;
    }
    :checked + & {
      background: #1D3857;
      border-color: #6E94D7;
      &::before {
        content: url("data:image/svg+xml, \
          %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 28 28'%3E \
            %3Crect width='28' height='28' fill='%234371A6' rx='6'/%3E \
            %3Cpath stroke='%23BAD3FF' stroke-linejoin='round' stroke-width='1.5' d='m14 8 1.36 3.44c.12.32.19.48.28.61q.13.18.3.3c.14.1.3.17.62.3L20 14l-3.44 1.36c-.32.12-.48.19-.61.28q-.18.13-.3.3c-.1.14-.17.3-.3.62L14 20l-1.36-3.44a3 3 0 0 0-.28-.61 1 1 0 0 0-.3-.3c-.14-.1-.3-.17-.62-.3L8 14l3.44-1.36c.32-.12.48-.19.61-.28q.18-.13.3-.3c.1-.14.17-.3.3-.62z'/%3E \
          %3C/svg%3E \
        ");
      }
    }
  }
  .q-answer {
    grid-area: 1 / 2 / -1 / -1;
    width: min(100%, 32rem);
    padding: 1.25rem 2rem;
    box-sizing: border-box;
    color: black;
    font-size: 1rem;
    background-color: white;
    border-radius: .75rem;
    border: 1px solid #DBE3EB;
    box-shadow: 0 .25rem 1rem #00000018;
    height: auto;
    visibility: hidden;
    .q-answer-prompt {
      padding: 1.25rem 2rem;
      margin: -1.25rem -2rem 1.25rem;
      border-bottom: 1px solid #DBE3EB;
      font-weight: 600;
      &::before {
        content: ">";
        margin-right: .75rem;
      }
    }
    &.no-table {
      p:has(+ .todo){ margin: 1.5rem 0 .5rem; }
    }
    b {
      font-weight: 600;
      &.enlarge { font-size: 1.2rem; }
    }
    .table-scroller {
      width: 100%;
      padding: 0;
      margin: 1rem 0 2rem;
      overflow-x: auto;
    }
    table {
      margin: 1rem -2rem 1.5rem;
      width: calc(100% + 4rem);
      padding: 0;
      border-collapse: collapse;
      :is(td, th):first-child { padding-left: 2rem; }
      :is(td, th):last-child { padding-right: 2rem; }
      th {
        padding: .5rem 2rem .5rem 0;
        color: #666F88;
        font-weight: 400;
        font-family: "Noto Sans Mono", monospace;
        letter-spacing: -.02ch;
        border-bottom: 1px solid #DBE3EB;
        text-align: left;
        white-space: nowrap;
      }
      tbody tr:first-child td { padding-top: .75rem; }
      td {
        padding: .125rem 2rem .125rem 0;
        white-space: nowrap;
      }
      :is(th, td):nth-child(3){
        width: 0;
        text-align: right;
      }
    }
    :checked + label + & { visibility: visible; }
    .todo {
      padding: 0 0 0 1.5rem;
      background: 0 .375rem / .8rem .48rem no-repeat url("data:image/svg+xml, \
        %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E \
          %3Cpath stroke='%23666f88' stroke-linecap='round' stroke-linejoin='round' d='M6.93 5.5 9.5 3 6.93.5M9.5 3h-9'/%3E \
        %3C/svg%3E \
      ");
      font-size: .875rem;
      color: #666F88;
      font-weight: 400;
      font-family: "Noto Sans Mono", monospace;
      letter-spacing: -.02ch;
      &:has(span:first-child[style*=visibility]){ background: none; }
    }
  }
  @media (width < 54rem){
    grid: auto / 1fr;
    .q-answer {
      grid-area: auto;
      display: none;
      margin: 1rem auto;
      transition: none;
      :checked + label + & { display: block; }
    }
  }
}

#reach {
  padding-block: 6rem 8rem;
  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);
    }
  }
}

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