/* ============================================================
   SUB-HEADING — "Who is Celebrating?", "Guest Information",
   "Payment Method", etc.

   These are content-level titles INSIDE a section. They are
   NOT the same as section headings.

   USAGE:
   <div class="sub-heading-group">
     <h3 class="sub-heading">Who is Celebrating?</h3>
     <p class="sub-heading-helper">Tell us about the birthday
       person so we can personalize everything perfectly</p>
   </div>

   RULES:
   - NO emojis before the text. No 🎂, no 🎉, nothing.
   - Uses display font but at 18px (larger than section heading).
   ============================================================ */

.sub-heading {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon inside sub-heading — accent colored, line-art style */
.sub-heading svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.sub-heading-helper {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
  line-height: 1.5;
}