:root {
  --sage: #445C4A;
  --sage-text: #445C4A;
  --coral: #F0A385;
  --peach: #FDD6BA;
  --cream: #FAF5EB;
  --ink: #2B2B2B;
  --soft: #6B6B6B;
  --page: #F4EFE6;
  --card: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sage-text: #9DBFA5;
    --ink: #F1EEE8;
    --soft: #B9B4AC;
    --page: #1C211D;
    --card: #262C27;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
.wrap { max-width: 560px; margin: 0 auto; padding: 24px 18px 48px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.tile { width: 48px; height: 48px; border-radius: 12px; background: var(--sage); display: grid; place-items: center; }
.tile img { width: 40px; height: 40px; }
.brand h1 { margin: 0; font-size: 1.7rem; color: var(--sage-text); }
.brand p { margin: 0; font-size: .85rem; color: var(--soft); font-style: italic; }

.card { background: var(--card); border: 2px solid var(--sage); border-radius: 20px; overflow: hidden; }
.card-head { background: var(--sage); color: var(--cream); padding: 22px 22px 18px; text-align: center; }
.card-head .from { font-size: .9rem; opacity: .85; margin: 0 0 4px; }
.card-head h2 { margin: 0; font-size: 1.6rem; line-height: 1.25; }
.card-body { padding: 22px; background: var(--cream); color: #2B2B2B; }
.label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--sage); margin: 0 0 8px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.chip { background: rgba(253, 214, 186, .65); border-radius: 12px; padding: 8px 4px; text-align: center; }
.chip b { display: block; color: var(--sage); font-size: 1.05rem; }
.chip span { font-size: .72rem; color: var(--sage); opacity: .85; }
h3 { color: var(--sage); margin: 0 0 8px; font-size: 1.15rem; }
ul { list-style: none; padding: 0; margin: 0 0 20px; }
li { position: relative; padding-left: 18px; margin-bottom: 6px; }
li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.directions { white-space: pre-line; margin: 0; }
.card-foot { background: var(--peach); color: var(--sage); text-align: center; padding: 14px; font-size: .9rem; }
.card-foot b { display: block; }

.cta { margin-top: 22px; text-align: center; }
.button { display: inline-block; width: 100%; background: var(--sage); color: var(--peach); text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 14px 18px; border-radius: 14px; }
.button.secondary { background: transparent; color: var(--sage-text); border: 2px solid var(--sage); margin-top: 10px; }
.note { color: var(--soft); font-size: .9rem; margin: 14px 4px 0; }
.why { margin-top: 28px; background: var(--card); border: 2px solid var(--sage); border-radius: 18px; padding: 18px 20px; }
.why p { margin: 0 0 8px; }
.why ul li::before { background: var(--sage); }
.hidden { display: none; }
footer { text-align: center; color: var(--soft); font-size: .8rem; margin-top: 30px; }
footer a { color: var(--sage-text); }