:root { --cream: #fbeecb; --cream-light: #fdf6e3; --brown: #7a3b1e; --teal: #1c5f72; --pink: #c9407a; --marigold: #f2b705; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--brown); font: 17px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 34rem; margin: 0 auto; padding: 40px 16px 64px; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--pink); }
h1 { margin: 4px 0 20px; color: var(--teal); font-size: 34px; line-height: 1.1; }
section { margin-bottom: 24px; }
.button { display: block; width: 100%; margin: 12px 0; padding: 14px 18px; border: 2px solid var(--brown); border-radius: 14px;
  background: var(--teal); color: var(--cream-light); font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  box-shadow: 0 4px 0 var(--brown); cursor: pointer; }
.button.secondary { background: var(--marigold); color: var(--brown); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brown); }
.small { font-size: 14px; opacity: .85; }
a { color: var(--pink); }