:root {
  color-scheme: light dark;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.505 0.213 27.518);
  --primary-foreground: oklch(0.971 0.013 17.38);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.439 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

a { color: var(--primary); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

.site-header,
main,
footer {
  width: min(100% - 2rem, 48rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.brand { color: var(--foreground); font-weight: 750; text-decoration: none; }
.brand span { color: var(--primary); font-size: 1.35em; margin-right: 0.25rem; }
nav { display: flex; gap: 1rem; }
nav a { color: var(--foreground); }
nav a[aria-current="page"] { color: var(--primary); font-weight: 700; }

main { padding-block: 4rem; }
.hero { min-height: 64vh; display: grid; align-content: center; }
.hero > p:not(.eyebrow), .lede { color: var(--muted-foreground); font-size: 1.15rem; max-width: 42rem; }
.eyebrow { color: var(--primary); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { font-size: clamp(2.25rem, 8vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.02; margin: 0.5rem 0 1.5rem; }
h2 { line-height: 1.2; margin-top: 0; }
section { border-top: 1px solid var(--border); padding-block: 2rem; }
li + li { margin-top: 0.75rem; }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; }
.button { background: var(--primary); border-radius: var(--radius); color: var(--primary-foreground); font-weight: 700; padding: 0.7rem 1rem; text-decoration: none; }
.text-link { font-weight: 650; }

footer { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-block: 1.5rem 3rem; color: var(--muted-foreground); }

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --primary: oklch(0.637 0.237 25.331);
    --primary-foreground: oklch(0.971 0.013 17.38);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --border: oklch(1 0 0 / 10%);
  }
}

@media (max-width: 34rem) {
  .site-header, footer { align-items: flex-start; flex-direction: column; }
  main { padding-block: 3rem; }
}