:root {
  --forest: #124d32;
  --forest-deep: #0a3823;
  --sage: #dce7d2;
  --cream: #fbf7e9;
  --ink: #24372b;
  --gold: #efb819;
  --red: #d84232;
  --line: #e9e3d1;
}

.hero-section {
  background:
    radial-gradient(ellipse at 4% 20%, #f3e7b9 0, transparent 36%),
    linear-gradient(180deg, #fff9e8 0%, var(--cream) 100%);
}

.hero-copy h1 em { color: var(--red); }
.eyebrow-dot { background: var(--gold); }
.note-icon { color: var(--red); }
.art-card {
  background: #fffdf5;
  border: 1px solid #e7d8a8;
  border-radius: 12px;
  box-shadow: 0 20px 45px #40582b20;
  overflow: hidden;
  transform: rotate(.4deg);
}
.art-caption, .art-bottom { color: var(--forest); }
.hero-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.art-bottom { padding: 13px 2px 3px; }
.btn-primary { box-shadow: 0 7px 16px #124d3228; }
.step-card { border-top: 3px solid var(--gold); }
.step-number { color: var(--red); }
.form-aside, .draw-top { background: var(--forest); }
.closed-icon, .result-confetti { color: var(--gold); }

@media (max-width: 767px) {
  .art-card { transform: none; }
  .hero-illustration { aspect-ratio: 4 / 3; }
}