body[data-theme=light] {
  --marketing-image-url: url("/marketing-image-light.png");
  --operator-selection-url: url("/operator-selection-light.png");
  --utility-tracking-url: url("/utility-tracking-light.png");
}

body[data-theme=dark] {
  --marketing-image-url: url("/marketing-image-dark.png");
  --operator-selection-url: url("/operator-selection-dark.png");
  --utility-tracking-url: url("/utility-tracking-dark.png");
}

main {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--color-background) 800px, var(--color-layer-heavy-200) 801px, var(--color-layer-subtle) 799px);
  gap: var(--space-400);
  padding-bottom: var(--space-400);
}

nav {
  padding: var(--space-100) 10%;
}
nav .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  max-width: 1920px;
  margin-inline: auto;
}

h2 {
  margin: 0px auto var(--space-500) auto;
  width: min(1920px, 80%);
  text-align: left;
}
h2.centered {
  text-align: center;
}
@media (max-width: 1500px) {
  h2 {
    margin-bottom: 0px;
  }
}
@media (max-width: 800px) {
  h2 {
    width: 100%;
    padding-inline: var(--space-0);
  }
}

.hero {
  width: fit-content;
  margin: var(--space-700) auto 0px auto;
  padding: var(--space-300);
}

.cta {
  display: flex;
  flex-direction: column;
}
.cta h1, .cta h4 {
  grid-column: 1/-1;
  place-self: center;
  text-align: center;
}
.cta h1 {
  color: var(--color-primary);
  margin-bottom: var(--space-0);
  max-width: 50ch;
}
.cta h4 {
  margin-bottom: var(--space-400);
  max-width: 80ch;
}
@media (max-width: 500px) {
  .cta h1, .cta h4 {
    max-width: 100%;
    padding-inline: var(--space-0);
  }
}

.cta .buttons {
  display: grid;
  grid-template-columns: 250px 250px;
  align-items: start;
  justify-content: center;
  gap: var(--space-300);
}
.cta .buttons a {
  display: grid;
  place-items: center;
  font-size: var(--text-size-l);
  border-radius: 10000px;
  padding: var(--space-100) var(--space-200);
  text-transform: uppercase;
}
.cta .buttons p {
  font-size: var(--text-size-s);
  padding-left: var(--space-0);
  text-align: center;
}
@media (max-width: 500px) {
  .cta .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.quotes {
  display: grid;
  grid-template-columns: repeat(4, 25ch);
  margin: 0px auto var(--space-500) auto;
  gap: var(--space-400);
}
.quotes p {
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-size-l);
  text-align: center;
  line-height: 1;
  color: var(--color-primary);
}
@media (max-width: 1100px) {
  .quotes {
    grid-template-columns: repeat(2, 25ch);
  }
}
@media (max-width: 550px) {
  .quotes {
    display: none;
  }
}

.marketing-image {
  display: grid;
  place-items: center;
  width: 100vw;
  margin-bottom: var(--space-400);
}
.marketing-image img {
  width: min(1920px, 80%);
  aspect-ratio: 16/9;
  border: var(--border-s) solid var(--color-layer-obvious);
  border-radius: var(--radius-m);
}
@media (max-width: 550px) {
  .marketing-image img {
    padding-inline: var(--space-0);
    width: 100%;
  }
}

.marketing-image-img {
  content: var(--marketing-image-url);
}

.how-it-works {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--space-500);
  width: min(1920px, 95%);
  margin: 0px auto var(--space-500) auto;
}
.how-it-works a {
  grid-column: 1/-1;
  justify-self: center;
}
@media (max-width: 1500px) {
  .how-it-works {
    grid-template-columns: 1fr;
  }
  .how-it-works p {
    max-width: 75%;
  }
}
@media (max-width: 800px) {
  .how-it-works {
    width: 100%;
    padding-inline: var(--space-0);
  }
  .how-it-works p {
    max-width: 100%;
    padding-inline: var(--space-0);
  }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-300);
}
.step x-icon {
  position: relative;
  background-color: var(--black-500);
  margin-bottom: var(--space-300);
  padding: var(--space-100);
  border-radius: var(--radius-m);
}
.step x-icon::after {
  position: absolute;
  content: attr(data-step);
  top: -3px;
  left: -3px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 27.5px;
  height: 27.5px;
  font-size: var(--text-size-m);
  font-weight: 700;
  color: var(--black-500);
  background-color: var(--color-primary);
  border: var(--border-m) solid var(--color-child-background);
  border-radius: 50%;
}

.features {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  width: min(1300px, 80%);
  margin-inline: auto;
}
@media (max-width: 700px) {
  .features {
    width: 100%;
    padding-inline: var(--space-0);
  }
}

.feature {
  display: grid;
  height: 100%;
  padding: var(--space-100);
  border-radius: var(--radius-m);
  border: var(--border-s) solid var(--color-layer-obvious);
  column-gap: var(--space-600);
}
.feature h3 {
  grid-area: header;
}
.feature p {
  grid-area: paragraph;
  max-width: 60ch;
}
.feature img {
  width: 100%;
  border-radius: var(--radius-m);
  grid-area: image;
  scale: 1.1;
}
.feature:nth-child(odd) {
  grid-template-areas: " image image .         .         " " image image header    header    " " image image paragraph paragraph " " image image paragraph paragraph " " image image .         .         " " image image .         .         ";
  grid-template-columns: 1fr 1fr 2fr 2fr;
}
.feature:nth-child(odd) img {
  rotate: -0.5deg;
}
.feature:nth-child(even) {
  text-align: right;
  grid-template-areas: " .         .         image image" " header    header    image image" " paragraph paragraph image image" " paragraph paragraph image image" " .         .         image image" " .         .         image image";
  grid-template-columns: 2fr 2fr 1fr 1fr;
}
.feature:nth-child(even) p {
  max-width: 100%;
  justify-self: end;
  padding-inline: var(--space-0);
}
.feature:nth-child(even) img {
  rotate: 0.5deg;
}
@media (max-width: 1300px) {
  .feature {
    border: unset;
  }
  .feature:nth-child(even), .feature:nth-child(odd) {
    grid-template-areas: " header    header    header   " " header    header    header   " " paragraph paragraph paragraph" " paragraph paragraph paragraph";
    grid-template-columns: 1fr 1fr 1fr;
  }
  .feature img {
    display: none;
  }
}

.operator-selection-img {
  content: var(--operator-selection-url);
}

.utility-tracking-img {
  content: var(--utility-tracking-url);
}

.presets {
  display: flex;
  flex-direction: column;
  width: 100vw;
  gap: var(--space-400);
  padding-block: var(--space-300) var(--space-400);
  margin-top: var(--space-500);
  background-color: var(--color-primary);
}
.presets p, .presets h2, .presets h3 {
  width: min(1300px, 80%);
  margin: 0px auto;
  color: var(--black-500);
  text-align: center;
}
@media (max-width: 800px) {
  .presets p, .presets h2, .presets h3 {
    width: 100%;
    padding-inline: var(--space-0);
  }
}

.outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(1920px, 80%);
  margin: var(--space-500) auto var(--space-500) auto;
  text-align: center;
}
.outro h2 {
  margin-bottom: 0px;
}
.outro h4 {
  margin-bottom: var(--space-400);
}
@media (max-width: 800px) {
  .outro {
    width: 100%;
    padding-inline: var(--space-0);
  }
}