/* ================================================================
   CONTACT MODAL — drop-in component
   ================================================================
   Styles specific to the <section id="suggest" x-data=
   "contactModal()">...</section> block in index.html — a small
   "suggest a priority" band plus the modal it opens. Pairs with
   js/contact-modal.js. The modal shell itself (.modal, .modal__panel,
   .modal__field, etc.) lives in css/modal-base.css — link that file
   too, before this one.

   TO REUSE ON ANOTHER SITE:
     1. Copy this file, css/modal-base.css, js/contact-modal.js, and
        the <section id="suggest">...</section> block from index.html.
     2. Load Alpine.js, then js/contact-modal.js, then link
        modal-base.css followed by this file.
     3. This file assumes the host page defines these CSS custom
        properties on :root (values below are this site's — swap
        them for the target site's own palette/scale):
          --navy / --white / --font-display / --font-body
          --text-base / -2xl / -4xl
          --space-3 / -6 / -16
        (modal-base.css lists the tokens it needs separately)
     4. Colors and type are the only things meant to be hand-tuned
        here — everything else (spacing, motion, layout) is driven
        by the scale tokens above, so a palette/font swap re-themes
        the whole component automatically.
   ================================================================ */

/* --- Trigger band --- */
.suggest {
  background: var(--navy);
  padding-block: var(--space-16);
  text-align: center;
}

.suggest__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  color: var(--white);
  margin-bottom: var(--space-3);
}

.suggest__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 540px;
  margin: 0 auto var(--space-6);
}