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

#ask {
  padding-block: 6rem 8rem;
  background: #EFF5FC;
  h2, p {
    max-width: 40rem;
  }
  #ai-example {
    display: flex;
    flex-flow: column;
    align-items: start;
    gap: 3rem;
    padding: 3rem;
    background: white;
    border: 1px solid #DBE3EB;
    border-radius: 2rem;
    box-shadow: 2px .25rem 2.5rem #0003;
    margin-top: 3rem;
    & > p {
      align-self: end;
      max-width: max-content;
      padding: .75rem 1.5rem;
      margin: 0 0 0 2rem;
      background: #13283F;
      font-size: 1.2rem;
      color: white;
      border: 1px solid #DBE3EB;
      border-radius: 1rem 1rem 0 1rem;
    }
  }
  #ai-example-answer {
    max-width: min(50rem, 100%);
    padding-block: 2rem;
    margin-right: 3rem;
    color: #0F2435;
    background: #FAFDFF;
    border: 2px solid #B2CDF3;
    border-radius: 1rem;
    & > * { padding-inline: 2rem; }
    p { font-size: 1.1rem; }
    p:first-child {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin: 0 0 2rem;
      color: #666F88;
      img {
        width: 2rem;
        height: 2rem;
      }
    }
    b { font-weight: 600; }
    .table-scroller {
      width: 100%;
      padding: 0;
      margin: 1rem 0 2rem;
      overflow-x: auto;
    }
    table {
      width: 100%;
      padding: 0;
      margin: 0;
      :is(td, th):first-child { padding-left: 2rem; }
      :is(td, th):last-child { padding-right: 2rem; }
      th {
        padding: .75rem 2rem .75rem 0;
        color: #666F88;
        font-weight: 400;
        font-size: 1.1rem;
        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 {
        font-size: 1.05rem;
        padding: .25rem 2rem .25rem 0;
        white-space: nowrap;
        &:first-child { font-weight: 600; }
      }
      :is(th, td):nth-child(n + 2){ text-align: right; }
    }
    & > img:last-child {
      margin: 1.5rem 0 0;
    }
  }
  #ai-example-input {
    border-top: 1px solid #DBE3EB;
    width: 100%;
    padding: 2rem 3rem;
    margin: 0 -3rem -3rem;
    div {
      width: max(10rem, 100% - 12rem);
      height: 2rem;
      padding: 1rem;
      margin: 0 auto;
      box-shadow: 0 .25rem 1rem #00000018;
      border: 1px solid #DBE3EB;
      border-radius: .5rem;
      background: calc(100% - 1rem) 50% / 2rem 2rem no-repeat url("data:image/svg+xml, \
        %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 30'%3E \
          %3Crect width='30' height='30' fill='%231e8ffb' rx='8'/%3E \
          %3Cpath fill='%23fff' d='M15.7 6.3a1 1 0 0 0-1.4 0l-6.37 6.36a1 1 0 1 0 1.41 1.41L15 8.41l5.66 5.66a1 1 0 0 0 1.41-1.41zM15 23h1V7h-2v16z'/%3E \
        %3C/svg%3E \
      "), 1.5rem 50% / 1px 1.5rem no-repeat linear-gradient(#7B8C96, #7B8C96);
    }
  }
  @media(width < 36rem){
    #ai-example {
      padding: 0;
      gap: 0;
      & > p {
        width: auto;
        padding: 2rem 2rem 2rem 4rem;
        margin: 0;
        color: inherit;
        background: none;
        font-weight: 600;
        font-size: 1rem;
        border: none;
        border-bottom: 1px solid #DBE3EB;
        border-radius: 0;
        background: 1.75rem 2.25rem / 1.25rem .75rem no-repeat url("data:image/svg+xml, \
          %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 25 15'%3E \
            %3Cpath fill='%2313283f' d='M10.98 6.95 0 12.55v-2.19l8.42-4.05-.07.13V6.1l.07.14L0 2.18V0l10.98 5.6zm13.3 6.14v1.88H13.36v-1.88z'/%3E \
          %3C/svg%3E \
        ");
      }
    }
    #ai-example-answer {
      margin: 0;
      background: none;
      border-width: 2px 0 0;
      border-radius: 0;
      :is(td, th):last-child { display: none; }
    }
    #ai-example-input { display: none; }
  }
}

#answers {
  display: grid;
  grid: auto auto 1fr / 1fr auto;
  gap: 4rem;
  padding-block: 5rem 8rem;
  background: #13283F;
  color: white;
  h2 {
    grid-area: 1 / 1 / 2 / -1;
    max-width: 45rem;
    span { color: #82C3FF; }
  }
  h2, h3 { color: white; }
  p { color: #D0DBF5; }
  #stack {
    grid-area: 2 / 1 / -1 / 2;
    padding: 0 0 0 2rem;
    margin: 0;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      inset: 1rem calc(100% - 1.3rem) 5.5rem 0;
      border: 1px solid #6185AB;
      border-right: none;
    }
    &::after {
      content: "ChartMogul";
      padding: 2rem 0;
      position: absolute;
      inset: calc(50% - 2.25rem) auto auto 0;
      translate: -50% -50%;
      writing-mode: vertical-rl;
      scale: -1 -1;
      background: #13283F;
      font-size: .875rem;
      letter-spacing: -.02ch;
      font-family: "Noto Sans Mono", monospace;
    }
    dd {
      margin: .75rem 0 1.5rem;
    }
    ol {
      list-style: none;
      display: flex;
      flex-flow: column-reverse;
      justify-content: start;
      gap: 1rem;
      margin: 0;
      padding: 0;
    }
    li {
      display: flex;
      flex-flow: row wrap;
      gap: 1rem;
      padding: .875rem 1rem .875rem 1.5rem;
      border-radius: .75rem;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #6185AB;
      background: linear-gradient(to bottom, #263C53, #1A2F45 83%);
      span {
        margin-inline-start: auto;
        color: #90A2B5;
        font-size: .875rem;
        letter-spacing: -.02ch;
        font-family: "Noto Sans Mono", monospace;
        white-space: nowrap;
      }
    }
    li:first-child { background: none; }
    dt {
      justify-content: center;
      padding: .25rem;
      color: #81C3FF;
      background: none;
      border: none;
      font-size: .875rem;
      letter-spacing: -.02ch;
      font-family: "Noto Sans Mono", monospace;
    }
    dd:first-of-type li {
      border: 1px solid #87CFFF;
      background: linear-gradient(to bottom, #2E5273, #13283F);
    }
    @media(width < 32rem){
      dt ~ dt + dd li:first-child {
        display: flex;
        flex-flow: column;
        align-items: start;
      }
      &::before { bottom: 7.75rem; }
    }
  }
  section {
    max-width: 24rem;
    padding: 0;
    header span {
      color: #BCD5EC;
      font-size: .875rem;
      letter-spacing: -.02ch;
      font-family: "Noto Sans Mono", monospace;
    }
    h3 {
      margin: .25rem 0;
      font-weight: 600;
      font-size: 1.25rem;
    }
  }
  @media(width < 56rem){
    grid: auto / 1fr;
  }
}

#more-questions {
  display: grid;
  grid: auto auto / 1fr 1fr;
  gap: 2rem;
  padding-block: 6rem 8rem;
  background: #EFF5FC;
  header {
    grid-area: 1 / 1 / 2 / -1;
    font-size: 1.1rem;
    p { max-width: 50rem; }
  }
  section {
    display: flex;
    flex-flow: column;
    gap: 2rem;
    padding: 2.5rem;
    margin-inline: clamp(-1.5rem, 100vw - 25rem, 0rem);
    background: white;
    border: 1px solid #D3DFEA;
    border-radius: .75rem;
    header span {
      color: #666F88;
      font-size: .875rem;
      font-family: "Noto Sans Mono", monospace;
      letter-spacing: -.02ch;
    }
    h3 {
      margin: 1rem 0 0;
      padding-inline-start: 1em;
      font-size: 1.25rem;
      background: -.1em .2em / .7em .7em no-repeat url("data:image/svg+xml, \
        %3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E \
          %3Cpath d='M6 4L3 1M6 4L3 7' stroke='%2329303E' fill='none' stroke-linecap='round'/%3E \
        %3C/svg%3E \
      ");
    }
    p {
      margin: auto 0 0;
      color: #29303E;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  @media(width < 50rem){
    grid: auto / 1fr;
  }
}

#what-changes {
  padding-block: 6rem 8rem;
  display: grid;
  grid: repeat(4, auto) / 1fr 6rem 1fr;
  & > header {
    grid-area: 1 / 1 / 2 / -1;
    margin-bottom: 4rem;
    p {
      max-width: 50rem;
      font-size: 1.1rem;
    }
  }
  &::before {
    place-self: center;
    grid-area: 2 / 2;
    content: url("data:image/svg+xml, \
      %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 62 12'%3E \
        %3Cpath fill='%23666f88' d='M61.5 6q.4-.4 0-1L56.8.2a.8.8 0 0 0-1.1 1l4.2 4.3-4.2 4.3a.8.8 0 0 0 1 1zM0 5.6v.8h61V4.8H0z'/%3E \
      %3C/svg%3E \
    ");
    display: block;
    width: 5rem;
    height: .9rem;
    margin: .5rem auto;
  }
  &::after {
    grid-area: 3 / 3;
    content: url("data:image/svg+xml, \
      %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 62'%3E \
        %3Cpath fill='%23666f88' d='M5 61.5q.6.4 1 0l4.8-4.7a.8.8 0 0 0-1-1.1l-4.3 4.2-4.2-4.2a.7.7 0 1 0-1 1zM5.5 0h-.7v61h1.5V0z'/%3E \
      %3C/svg%3E \
    ");
    display: block;
    width: .9rem;
    height: 5rem;
    margin: .5rem auto -1rem;
  }
  section {
    padding: 0;
    h3 {
      font-size: 1.3rem;
      font-weight: 600;
      margin: 0;
    }
    header {
      padding: 0 .9rem .9rem;
    }
    header p {
      color: #666F88;
      margin: .25rem 0;
    }
    img {
      width: 100%;
      height: auto;
    }
    &:last-child { grid-area: -2 / 1 / -1 / -1; }
  }
  @media (width < 40rem){
    grid: repeat(7, auto) / 1fr;
    &::before {
      grid-area: 3 / 1;
      content: url("data:image/svg+xml, \
        %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 62'%3E \
          %3Cpath fill='%23666f88' d='M5 61.5q.6.4 1 0l4.8-4.7a.8.8 0 0 0-1-1.1l-4.3 4.2-4.2-4.2a.7.7 0 1 0-1 1zM5.5 0h-.7v61h1.5V0z'/%3E \
        %3C/svg%3E \
      ");
      display: block;
      width: .9rem;
      height: 5rem;
      margin: 0 auto 1rem;
    }
    &::after {
      grid-area: 5 / 1;
      margin: 0rem auto 1rem;
    }
  }
}

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


#two-ways {
  display: grid;
  grid: auto auto / 1fr 1fr;
  gap: 3rem;
  padding-block: 6rem 8rem;
  & > header {
    grid-area: 1 / 1 / 2 / -1;
    font-size: 1.1rem;
    p { max-width: 50rem; }
  }
  section {
    display: grid;
    grid: auto / 1fr;
    gap: 2rem;
    padding: 2.5rem 2.5rem 5rem;
    margin-inline: clamp(-1.5rem, 100vw - 25rem, 0rem);
    background: white;
    border: 1px solid #DBE3EB;
    box-shadow: 2px 4px 1rem 0 rgb(0 0 0 / 10%);
    border-radius: .75rem;
    img {
      width: 100%;
      height: auto;
      border-radius: .5rem;
    }
    header span {
      color: #666F88;
      font-size: .875rem;
      font-family: "Noto Sans Mono", monospace;
      letter-spacing: -.02ch;
    }
    h3 {
      margin: .5rem 0 0;
      font-weight: 600;
      font-size: 1.25rem;
    }
    p {
      margin: 0;
      color: #29303E;
    }
  }
  @media(width < 50rem){
    grid: auto / 1fr;
  }
}

#getting-started {
  background: #EFF5FC;
  display: grid;
  grid: auto / 1fr 1fr;
  gap: 3rem;
  padding-block: 5rem;
  h2 { margin: .6em 0; }
  p { font-size: 1.1rem; }
  ol {
    align-self: center;
    list-style: none;
    counter-reset: list;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
  }
  li {
    counter-increment: list;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    color: #29303E;
    background: white;
    border: 1px solid #DBE3EB;
    border-radius: .75rem;
  }
  li::before {
    content: counter(list);
    flex: 0 0 1.75rem;
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    color: #007DF1;
    background: #F4F7FB;
    line-height: 1.75rem;
    border: 1px solid #9CC3EF;
    border-radius: 50%;
    text-align: center;
  }
  @media(width < 50rem){
    grid: auto / 1fr;
  }
}

.footer-cta {
  background: #13283F;
  gap: 4rem;
  h2 {
    color: white;
    span { color: #82C3FF; }
  }
  p { color: #D0DBF5; }
  nav a:first-child {
    background: #007DF1;
    &:hover { background: #1A8FFC; }
  }
  nav a:not(:first-child){
    color: white;
    box-shadow: 0 0 0 2px inset #7A87A2;
    &:is(:hover, :focus){ box-shadow: 0 0 0 2px inset #B4BCCC; }
  }
}