:root {
  color-scheme: dark;
  --ink: #050505;
  --paper: #f8f5ed;
  --muted: #a5a09a;
  --coral: #ff665e;
  --line: rgba(248, 245, 237, .12);
  font-family: "Avenir Next", Avenir, "Noto Sans Devanagari", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 102, 94, .17), transparent 25rem),
    var(--ink);
}
a { color: inherit; }
.shell { width: min(100% - 36px, 760px); margin: 0 auto; padding: 30px 0 80px; }
header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 54px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.eyebrow { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 12px 0 18px; max-width: 660px; font-size: clamp(38px, 9vw, 70px); line-height: .98; letter-spacing: -.055em; }
.lede { max-width: 620px; color: #cbc6bf; font-size: 18px; line-height: 1.65; }
.meta { margin: 30px 0 54px; color: var(--muted); font-size: 13px; }
section { padding: 30px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 13px; font-size: 20px; letter-spacing: -.02em; }
p, li { color: #c7c2bb; font-size: 15px; line-height: 1.75; }
ul { padding-left: 20px; }
.action { display: inline-flex; margin-top: 10px; padding: 13px 18px; border-radius: 999px; color: #111; background: var(--coral); font-weight: 700; text-decoration: none; }
footer { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { header { padding-bottom: 42px; } .shell { width: min(100% - 28px, 760px); } }