:root {
  color-scheme: light dark;
  --accent: #1672bd;
  --surface: color-mix(in srgb, Canvas 94%, var(--accent) 6%);
  --border: color-mix(in srgb, CanvasText 12%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: Canvas;
  color: CanvasText;
}

main {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}

.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(145deg, #1c88df, #165ea7);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 25%, transparent);
}

h1 { font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; margin: 48px 0 18px; }
h2 { margin-top: 42px; line-height: 1.2; }
p, li { max-width: 68ch; }
.lead { font-size: 1.25rem; color: color-mix(in srgb, CanvasText 72%, transparent); }
.card {
  margin: 30px 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
a { color: var(--accent); }
nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 42px; }
small { color: color-mix(in srgb, CanvasText 62%, transparent); }