@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; }
}
:is(a, span).goto {
  display: block;
  max-width: max-content;
  margin: 2rem auto;
  color: inherit;
  font-weight: 600;
  &:not(:hover):not(:focus-visible){ text-decoration: none; }
  &::after {
    content: url("data:image/svg+xml, \
      %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 12'%3E \
        %3Cpath stroke='%23091121' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M.75 5.75h12m-5 5 5-5-5-5'/%3E \
      %3C/svg%3E \
    ");
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0 0 .5rem;
    vertical-align: -.1em;
  }
}

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-inline: max((100% - 54rem) / 2 + 2rem, 2rem);
  @media (width < 48rem){
    padding-bottom: 1rem;
  }
  h1 {
    max-width: 15em;
    margin: 6rem auto 2rem;
    color: #091121;
    font-size: clamp(2.2rem, 1rem + 4vw, 4rem);
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
    @media(width < 48rem) {
      margin: 2rem auto 2rem;
    }
  }
  color: #29303E;
  background: linear-gradient(#F4F7FB 40%, #F4F7FB00 60%);
  header {
    margin: 0 0 3rem 0;
    text-align: center;
    p { font-size: 1.1rem; }
  }
  #fake-search {
    display: grid;
    padding: 1.5rem 5rem 1.5rem 4rem;
    background: white;
    border: 1px solid #C1CAD5;
    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 \
      "),
      calc(100% - 1rem) 50% / 3rem 3rem no-repeat url("data:image/svg+xml, \
        %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 58 58'%3E \
          %3Crect width='58' height='58' fill='%231e8ffb' rx='14'/%3E \
          %3Cpath fill='%23fff' d='M17.32 27.36a1.65 1.65 0 0 1 0-2.34l10.51-10.5a1.65 1.65 0 0 1 2.34 0l10.5 10.5a1.65 1.65 0 1 1-2.33 2.34l-7.69-7.7V42.1h-3.3V19.67l-7.7 7.69c-.64.64-1.68.64-2.33 0'/%3E \
        %3C/svg%3E \
      "),
      white;
    border-radius: 1rem;
    font-size: clamp(1rem, .8vw + .9rem, 1.3rem);
    line-height: 1.5em;
    &::before { content: "Should we introduce a low cost “Starter” plan?"; }
    &::after { content: "How much should we spend acquiring customers?"; }
    &::before, &::after {
      grid-area: 1 / 1;
      visibility: hidden;
    }
    #fake-search-text {
      grid-area: 1 / 1;
      &::after {
        content: "";
        display: inline-block;
        margin: -.5em 0 -.5em .25rem;
        width: 3px;
        height: 1.7em;
        background-color: #1E8FFB;
        animation: blink 1.5s steps(2, start) infinite;
      }
    }
  }
  ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    flex-flow: row wrap;
    padding: 0;
    margin: 3rem 0 5rem;
  }
  button {
    border: 1px solid #C8D3DE;
    padding: .5rem 1rem;
    color: inherit;
    background: none;
    border-radius: 10rem;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .2s;
    cursor: pointer;
    &:is(:hover, :focus-visible){ border-color: currentcolor; }
  }
  nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 3rem auto;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  @media (width < 48rem){
    ul { display: none; }
    #fake-search {
      padding: 1.5rem 5rem 1.5rem 1.5rem;
      background:
        calc(100% - 1rem) 50% / 3rem 3rem no-repeat url("data:image/svg+xml, \
          %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 58 58'%3E \
            %3Crect width='58' height='58' fill='%231e8ffb' rx='14'/%3E \
            %3Cpath fill='%23fff' d='M17.32 27.36a1.65 1.65 0 0 1 0-2.34l10.51-10.5a1.65 1.65 0 0 1 2.34 0l10.5 10.5a1.65 1.65 0 1 1-2.33 2.34l-7.69-7.7V42.1h-3.3V19.67l-7.7 7.69c-.64.64-1.68.64-2.33 0'/%3E \
          %3C/svg%3E \
        "),
        white;
    }
    nav {
      gap: 1rem;
    }
    a:is(.primary, .secondary){
      padding: 1rem 1.15rem;
    }
  }
}

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

@keyframes blink { to { visibility: hidden; } }

#complex {
  padding-block: 6rem 10rem;
  color: white;
  background: #13283F;
  h2, p {
    max-width: 50rem;
    text-wrap: balance;
  }
  h2 {
    color: white;
    span { color: #82C3FF; }
  }
  h2 + p {
    max-width: 50rem;
    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;
  }
}

#billing {
  padding-block: 6rem;
}

#numbers-right {
  margin-top: 4rem;
  border-top: 1px solid #DBE3EB;
  border-bottom: 1px solid #DBE3EB;
  padding-block-end: 5rem;
  a.goto { margin: 0 0 0 clamp(16rem, 20vw + 12rem, 20rem); }
  @media(width < 50rem){
    a.goto { margin: 0 auto; }
  }
}
#quote {
  display: grid;
  grid: auto auto / auto 1fr;
  gap: 1.5rem 5rem;
  max-width: 64rem;
  padding: 3rem clamp(2rem, 16vw - 2rem, 6rem);
  margin: 0 auto;
  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: 3rem 1rem;
    p {
      grid-area: 1 / 1 / 2 / -1;
    }
    img {
      grid-area: 2 / 1;
      width: 5rem;
    }
    cite {
      display: flex;
      flex-flow: column;
      justify-content: center;
    }
  }
}

#everything {
  padding-block: 6rem;
  header {
    max-width: 50rem;
    p { color: #29303E; }
  }
  img {
    display: block;
    width: 100%;
    height: auto;
    margin: 4rem auto 2rem;
  }
}

#results {
  color: white;
  background: #13283F;
  font-size: clamp(1.5rem, 2.5vw + .25rem, 2rem);
  text-align: center;
  line-height: 1.1;
  p { margin: .25em auto; }
  p:first-child {
    font-weight: 600;
  }
  p:last-child {
    font-style: italic;
    font-weight: 300;
  }
}

#the-why {
  padding-block: 6rem;
  background: #F4F7FB;
  blockquote {
    max-width: 50rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
    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: -3rem auto auto 50%;
    }
  }
  cite {
    display: grid;
    grid: auto auto / auto 1fr;
    gap: 0 1rem;
    max-width: max-content;
    margin: 0 auto;
    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;
    }
  }
}

#to-answers {
  display: grid;
  grid: auto auto / 1fr 1fr;
  gap: 4rem;
  padding: 6rem max((100% - 60rem) / 2 + 2rem, 2rem);
  header {
    grid-area: 1 / 1 / 2 / -1;
    max-width: 50rem;
  }
  a {
    container: answer-card / inline-size;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid #DBE3EB;
    box-shadow: 0 .25rem 1rem #00000018;
    border-radius: 2.5rem 2.5rem 1.75rem 1.75rem;
    overflow: clip;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, border .2s;
    img {
      display: block;
      margin: -2rem -2rem 2.5rem;
      transition: margin .2s, width .2s;
      object-position: 50% 50%;
      @container answer-card {
        width: calc(100cqw + 4rem);
        height: calc((100cqw + 4rem) * 430 / 530);
        object-fit: cover;
      }
    }
    h3 {
      margin: 0;
      font-weight: 600;
      font-size: 1.2rem;
    }
    p {
      margin: 0;
    }
    .goto { margin: auto 0 0; }
    &:is(:hover, :focus-visible){
      box-shadow: 0 .5rem 2rem #0002;
      border: 1px solid #C9D2DB;
      img {
        @container answer-card {
          margin-inline: -3rem;
          width: calc(100cqw + 6rem);
        }
      }
    }
  }
  @media(width < 48rem){
    grid: auto / 1fr;
  }
}

.footer-cta {
  --hero-accent-color: #007DF1;
  background: #13283F;
  gap: 4rem;
  margin-top: 4rem;
  h2 {
    color: white;
    span { color: #82C3FF; }
  }
  p { color: #D0DBF5; }
}