/* ===========================================================
   D&D Pharmacy — Editorial skin for legacy funnel pages
   (kit-intake, peptide-intake, peptide-order-flow)
   Load AFTER legacy.css. Re-skins type + chrome only; the
   form markup and JS are untouched.
   =========================================================== */

:root {
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --green-700: #0b7a3b;
  --paper: #f6f2e9;
  --paper-2: #efe9db;
}

body { font-family: var(--sans); }

/* ---- Headings → editorial serif ---- */
h1.display,
.page-hero h1,
.step-title,
.success-state h2,
.success-state h3,
.summary-card h2,
.intake-form-card .step-title {
  font-family: var(--serif) !important;
  font-weight: 460 !important;
  letter-spacing: -0.02em !important;
}
h1.display em,
.page-hero h1 em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 460 !important;
  color: var(--green-700) !important;
}
.page-hero h1 { font-size: clamp(38px, 5vw, 60px) !important; line-height: 1.0 !important; }
.step-title { font-size: 28px !important; }

/* ---- Page hero → warm paper ---- */
.page-hero { background: var(--paper) !important; }

/* ---- Eyebrows → green ---- */
.eyebrow { color: var(--green-700) !important; }

/* ---- Buttons → pill ---- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
}
.btn-primary { background: var(--green) !important; }
.btn-primary:hover { background: var(--green-700) !important; }

/* ---- Form card + inputs → softer, rounder ---- */
.intake-form-card,
.summary-card,
.flow-card { border-radius: 18px !important; }
.field input,
.field textarea,
.field select {
  border-radius: 10px !important;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(15,160,78,0.14) !important;
}

/* ---- Step labels & section dividers → green ---- */
.step-label,
.field-section,
.review-section-head { color: var(--green-700) !important; }

/* ---- Progress fill ---- */
.progress-fill { background: var(--green) !important; }

/* ---- Success check ---- */
.success-check { background: rgba(15,160,78,0.1) !important; color: var(--green-700) !important; }

/* ---- Announce/util bar tightening (keeps brand navy) ---- */
.announce { letter-spacing: 0.2px; }