/* ============================================================
   Fix My Appointment — Contact Us page styling (contact.css)

   contact.html has no existing theming system (unlike pitch.html's
   Super-Admin-editable pitch.css) — this page isn't documented anywhere
   as a surface a non-designer restyles, so these are plain, hardcoded
   rules rather than another CSS-variable theming layer. Scoped by ID to
   the two specific cards (#Section_BookACall, #Form_Contact) rather than
   touching .form-card itself, which is a shared class used by every form
   on the site (clinic registration, demo request, pitch's own form) —
   changing it here would recolour all of those too.

   Colours are drawn from EXISTING design tokens in style.css, not
   invented fresh — same reasoning as pitch.css's four new option-button
   colours: --plan-h2 exists specifically because raw --saffron-600 fails
   WCAG contrast with white text (see style.css's own comment on it), so
   it's reused here for the same reason rather than picking a fresh warm
   tone by eye.
   ============================================================ */

#Section_BookACall {
  background: var(--teal-050);
  border-left: 4px solid var(--teal-600);
}
#Section_BookACall .contact-kicker {
  background: var(--teal-100);
  color: var(--teal-700);
}

#Form_Contact {
  background: var(--saffron-100);
  border-left: 4px solid var(--plan-h2);
}
#Form_Contact .contact-kicker {
  background: #FFFFFF;
  color: var(--plan-h2);
  border: 1px solid var(--plan-h2);
}
/* The general message form's submit button gets its own colour too, so
   the distinction carries all the way through to the action itself —
   otherwise both cards would still end in the same teal button despite
   everything above it being visually separated. Hover shade computed the
   same way pitch-theme.js's shadeHex() derives one (×0.86), for the same
   reason: a themed colour should darken like the shipped ones do. */
#Form_Contact #Button_ContactSubmit {
  background: var(--plan-h2);
}
#Form_Contact #Button_ContactSubmit:hover {
  background: #8B480E;
}

/* Shared kicker-pill styling — the per-section rules above only set
   colour; layout is common to both so a founder scanning quickly reads
   the same visual language (a small icon + label above each heading)
   even though the colours differ. Mirrors .section-eyebrow's existing
   pill formula (style.css) rather than inventing a new shape. */
.contact-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}