:root {
  color-scheme: light;
  --canvas: #f5f0e8;
  --ink: #1f2b27;
  --moss: #49695c;
  --coral: #e47a63;
  --card: rgba(255, 255, 255, 0.78);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 80% 0%, #e4d8c6 0, transparent 38%), var(--canvas);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--moss);
  color: white;
  font-size: 25px;
}

h1 { margin: 24px 0 8px; font-family: Georgia, serif; font-size: clamp(40px, 8vw, 68px); line-height: 1.05; }
h2 { margin-top: 38px; font-family: Georgia, serif; }
.lead { max-width: 620px; font-size: 21px; color: #52635d; }
.card { margin-top: 32px; padding: 28px; border: 1px solid rgba(31,43,39,.09); border-radius: 24px; background: var(--card); box-shadow: 0 18px 55px rgba(31,43,39,.08); }
a { color: var(--moss); font-weight: 650; }
.button { display: inline-block; margin-top: 12px; padding: 12px 18px; border-radius: 999px; background: var(--coral); color: white; text-decoration: none; }
footer { margin-top: 52px; color: #66756f; font-size: 14px; }