:root {
  color-scheme: dark;
  --ratio: 1.5;
  /* 1.125rem under 1000px, 2rem at a 2400px-wide window, then keeps growing. */
  --s0: clamp(1.125rem, 0.5rem + 1vw, 3rem);
  --s-1: calc(var(--s0) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --measure: 75ch;
  --text-color: oklch(99.5% 0.003 48.7);
  --bg-color: oklch(21.8% 0 0);
  --accent-color: oklch(68.8% 0.209 41.6);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  font-size: var(--s0);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
p,
ul {
  margin-block: 0;
}

.page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  padding-block: var(--s0);
  padding-inline: var(--s1);
}

.site-header a {
  font-size: max(1.125rem, var(--s-1));
}

main {
  padding-block-start: 18rem;
  padding-inline: var(--s1);
}

.lede {
  max-inline-size: 17.5em;
  font-size: var(--s2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lede h1,
.lede p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-wrap: wrap;
}

.lede h1 {
  font-weight: 700;
}

.lede > * + * {
  margin-block-start: 1.3em;
}

.copy {
  font-size: var(--s0);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
}

.copy.stack > * + * {
  margin-block-start: var(--s0);
}

.copy.stack > .cta-row {
  margin-block: var(--s1);
}

.copy.stack > .offer {
  margin-block-start: var(--s1);
  font-size: var(--s1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cta {
  display: inline-block;
  padding-block: var(--s-1);
  padding-inline: var(--s1);
  border-radius: 1rem;
  background-color: var(--accent-color);
  color: var(--text-color);
  font-weight: 600;
  border-block-end-color: transparent;
}

.cta:hover,
.cta:focus-visible {
  border-block-end-color: transparent;
  background-color: color-mix(in oklch, var(--accent-color) 88%, var(--bg-color));
  outline-color: var(--text-color);
}

.site-footer {
  margin-block-start: auto;
  padding-block-start: 8rem;
  padding-block-end: var(--s0);
  padding-inline: var(--s1);
  font-size: max(1.125rem, var(--s-1));
}

.site-footer p {
  font-size: inherit;
}

@media (min-width: 768px) {
  .lede {
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
}

.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--s1);
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--s1);
}

.stack--xs > * + * {
  margin-block-start: var(--s-1);
}

.stack--m > * + * {
  margin-block-start: var(--s2);
}

.stack--l > * + * {
  margin-block-start: var(--s3);
}

.stack--xl > * + * {
  margin-block-start: var(--s4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  justify-content: space-between;
  align-items: baseline;
}

.box {
  padding: var(--s1);
  background-color: color-mix(in srgb, var(--text-color) 5%, transparent);
}

*:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  z-index: 1;
}

.skip-link:focus {
  inset-block-start: var(--s-1);
  inset-inline-start: var(--s-1);
  background-color: var(--bg-color);
  padding: var(--s-1);
}

a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover,
a:focus-visible {
  border-block-end-color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}