:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: #fbfaf7;
  color: #151515;
}

* { box-sizing: border-box; }

body { margin: 0; background: #fbfaf7; color: #151515; }

main { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 96px; }

nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 72px; }

.brand { color: inherit; font-size: 20px; font-weight: 700; text-decoration: none; }

.nav-link { color: #5f5f5f; text-decoration: none; }

h1 { font-size: clamp(38px, 8vw, 64px); letter-spacing: -0.045em; line-height: 1; margin: 0 0 24px; }

h2 { font-size: 22px; letter-spacing: -0.02em; margin: 48px 0 12px; }

p, li { color: #555; font-size: 17px; line-height: 1.65; }

ul, ol { padding-left: 24px; }

a { color: #151515; }

.lede { font-size: 21px; line-height: 1.55; max-width: 600px; }

.button { display: inline-block; margin-top: 16px; padding: 14px 20px; border-radius: 14px; background: #151515; color: white; font-weight: 650; text-decoration: none; }

.button.secondary { background: transparent; color: #151515; border: 1px solid #d7d3ca; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.eyebrow { margin: 0 0 12px; color: #777; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }

.grid .card { margin: 0; }

.card h2 { margin-top: 0; }

details { border-top: 1px solid #e4e1da; }

details:last-of-type { border-bottom: 1px solid #e4e1da; }

summary { cursor: pointer; font-size: 18px; font-weight: 650; padding: 20px 4px; }

details > div { padding: 0 4px 18px; }

form { margin-top: 28px; }

label { display: block; margin-top: 18px; font-size: 14px; font-weight: 650; }

input, select, textarea { width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid #d7d3ca; border-radius: 12px; background: white; color: #151515; font: inherit; }

textarea { min-height: 130px; resize: vertical; }

button { cursor: pointer; border: 0; font: inherit; }

.status { min-height: 24px; margin-top: 12px; color: #555; font-size: 14px; }

.card { margin-top: 32px; padding: 24px; border: 1px solid #e4e1da; border-radius: 20px; background: rgba(255,255,255,.58); }

footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid #e4e1da; color: #777; font-size: 14px; }

@media (prefers-color-scheme: dark) {
  :root, body { background: #151513; color: #f6f4ef; }
  p, li, .nav-link { color: #b8b6af; }
  a { color: #f6f4ef; }
  .button { background: #f6f4ef; color: #151513; }
  .button.secondary { background: transparent; color: #f6f4ef; border-color: #494741; }
  .card { background: rgba(255,255,255,.04); border-color: #35342f; }
  details { border-color: #35342f; }
  input, select, textarea { background: #201f1c; color: #f6f4ef; border-color: #494741; }
  footer { border-color: #35342f; }
}

@media (max-width: 620px) {
  main { padding-top: 34px; }
  nav { margin-bottom: 52px; }
  .grid { grid-template-columns: 1fr; }
  .actions { align-items: stretch; }
  .actions .button { text-align: center; flex: 1 1 auto; }
}