:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  color: #f1f8f3;
  background: #101e1a;
}
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer {
  width: min(64rem, calc(100% - 3rem));
  margin-inline: auto;
}
header {
  padding-block: 1.6rem;
  border-bottom: 1px solid #405a50;
  font-weight: 650;
}
a { color: inherit; }
header a { text-decoration: none; }
a:focus-visible { outline: 2px solid #adf0c6; outline-offset: 5px; }
.intro { padding-block: clamp(3rem, 11vw, 8rem); }
h1 {
  margin: 0;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: .98;
  letter-spacing: -.065em;
}
p {
  margin-block: 1rem 0;
  max-width: 39ch;
  color: #c4d6cc;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.55;
}
.product { padding: 1.6rem; border: 1px solid #405a50; border-radius: .7rem; }
h2 { margin: 0; color: #adf0c6; font-size: 1.4rem; }
.product p { margin-top: .45rem; }
footer { margin-block: 2.5rem 1.8rem; color: #a8c0b4; font-size: .85rem; }