@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 {
  background: #EFF5FC;
  h2, p {
    max-width: 40rem;
  }
  img {
    display: block;
    width: min(100%, 60rem);
    margin: 4rem auto 0;
  }
}

#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);
    }
  }
  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: 5rem 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;
      text-transform: uppercase;
    }
    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 {
  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;
    }
  }
}

#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;
      svg {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
      }
    }
    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;
    }
  }
}

#two-ways {
  display: grid;
  grid: auto auto / 1fr 1fr;
  gap: 3rem;
  padding-block: 5rem 8rem;
  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 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;
      text-transform: uppercase;
    }
    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; }
  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; }
  }
}