:root {
  --ink: #25221f;
  --paper: #f8f3e9;
  --accent: #e56b4a;
  --accent-dark: #bd4b2d;
  --card: #fffdf8;
  --muted: #716b63;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 85% 5%, #f4cfae 0, transparent 35%), var(--paper);
  font: 18px/1.6 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
a { color: var(--accent-dark); }
.shell { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.header { display: flex; justify-content: space-between; align-items: center; padding-block: 24px; }
.brand { color: var(--ink); font-size: 24px; font-weight: 800; text-decoration: none; }
.header-note, .muted { color: var(--muted); font-size: 14px; }
.hero { padding-block: 11vh 9vh; max-width: 900px; }
h1 { max-width: 850px; margin: 0 0 24px; font-size: clamp(48px, 8vw, 96px); line-height: .95; letter-spacing: -.055em; }
h2 { font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -.035em; }
h3 { font-size: 24px; line-height: 1.2; }
.lead { max-width: 760px; color: #4c4742; font-size: clamp(20px, 3vw, 28px); }
.eyebrow { color: var(--accent-dark); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-block; border: 0; border-radius: 999px; margin-top: 18px; padding: 14px 24px; color: white; background: var(--accent); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--accent-dark); }
.section, .product { padding-block: 60px 100px; }
.product { max-width: 900px; }
.narrow { max-width: 680px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { padding: 28px; border: 1px solid #e9ddce; border-radius: 24px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 18px 55px rgb(86 54 33 / 8%); }
.offer { margin-top: 42px; }
.price { font-size: 28px; font-weight: 850; }
.center { text-align: center; }
.center h1, .center .lead { margin-inline: auto; }
.footer { padding-block: 40px; border-top: 1px solid #ddcfbf; color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  .header-note { display: none; }
  .hero { padding-block: 8vh; }
  h1 { font-size: 52px; }
}