:root {
  --cream: #FDFBF7; --ink: #2D2A26; --ink-soft: #6B655D;
  --sage: #7C9885; --sage-deep: #4F6B57; --sage-mist: #EEF2EC;
  --coral: #D98868; --coral-mist: #FAEFE9; --line: #E4DED4;
  --amber: #BA7517; --amber-mist: #FAEEDA;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--cream); color: var(--ink);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: 'Fraunces', serif; font-weight: 500; }
a { color: var(--sage-deep); }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.mark {
  width: 56px; height: 56px; border-radius: 50%; background: var(--sage);
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.mark span {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 34px; color: var(--cream); margin-top: -4px;
}
.kicker {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 700;
}
.pill {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: 20px; padding: 5px 16px;
}
.btn {
  display: inline-block; background: var(--sage-deep); color: var(--cream);
  font-weight: 700; text-decoration: none; border: none; cursor: pointer;
  border-radius: 12px; padding: 15px 32px; font-size: 17px;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.btn:hover { background: var(--sage); }
.btn-coral { background: var(--coral); }
.btn-coral:hover { background: #C2795D; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 24px; text-align: left;
}
.card h3 { font-size: 20px; margin-bottom: 6px; }
.card p { font-size: 15px; color: var(--ink-soft); }
.card .price { color: var(--sage-deep); font-weight: 700; font-size: 15px; white-space: nowrap; }
.notebox {
  background: var(--sage-mist); border-radius: 12px; padding: 16px 20px;
  font-size: 15px; color: var(--sage-deep); text-align: left;
}
input[type="email"] {
  width: 100%; padding: 15px 18px; font-size: 17px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
input[type="email"]:focus { outline: 2px solid var(--sage); border-color: var(--sage); }
footer {
  padding: 40px 24px 48px; text-align: center;
  font-size: 13px; color: var(--ink-soft);
}
footer a { color: var(--ink-soft); }