:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #071b27;
  color: #eefaff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #10384a 0, #071b27 48rem);
}

main {
  width: min(46rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 4rem 0;
}

header, section, footer {
  margin-bottom: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.1rem;
}

h1, h2 { line-height: 1.15; }
h1 { margin: 0; font-size: clamp(2.3rem, 8vw, 4rem); }
h2 { margin-top: 2rem; color: #9fefff; }
p, li { line-height: 1.65; color: #d2e5ec; }
a { color: #69e5ee; }
.lede { font-size: 1.2rem; max-width: 38rem; }
.card {
  padding: 1.5rem;
  border: 1px solid #225064;
  border-radius: 1rem;
  background: rgb(6 24 35 / 72%);
}
.meta { color: #95adb8; font-size: .9rem; }
footer { border-top: 1px solid #225064; padding-top: 1.5rem; }