/* ==========================================================================
   Solution detail pages (Telehealth, MedSpas & Clinics, Consumer Brands) —
   patterns shared by two or more of those pages. Single-page patterns live
   in css/pages/<page>.css.
   ========================================================================== */

@layer pages {

  /* ---- Section heads beside media ----------------------------------- */

  /* Eyebrow badge + h2 + paragraph (Figma "Section head"). */
  .section-head--compact > p:not(.badge) { font-size: var(--fs-body-m); }

  /* ---- Panel body ---------------------------------------------------
     Panels in these pages hold diagrams and grids rather than a single
     .panel__list, so they need a padded body wrapper.                  */

  .panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg) 22px var(--space-2xl);
  }

  .panel__body > .panel__list { padding: 0; }

  /* ---- Layers panel ------------------------------------------------
     What you keep above the line, what Launch runs below it (Telehealth
     "Your telehealth business", MedSpas "Your clinic, expanded").     */

  .layers .panel__header { padding-block: var(--space-lg); }

  .layers .panel__title { font-size: var(--fs-s); }

  .layers .panel__body { gap: 5px; padding-block-end: var(--space-xl); }

  .layers .panel__list { gap: 5px; }

  .layers .panel__desc { color: var(--text-body); }

  .layers .panel__item--highlight .panel__desc { color: rgb(255 255 255 / 0.92); }

  /* Dashed divider with a centred pill: what you own above, ours below. */
  .api-boundary {
    display: flex;
    align-items: center;
    gap: 0;
    margin-block: 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff8a3d;
  }

  .api-boundary::before,
  .api-boundary::after {
    content: "";
    flex: 1;
    border-block-start: 1.2px dashed #ff8a3d;
  }

  .api-boundary span {
    padding: 4px var(--space-xl);
    border: 1px solid #ff8a3d;
    border-radius: var(--radius-pill);
  }

  /* Optional layer: dashed outline + amber "Your call" badge. */
  .panel__item--optional {
    border-style: dashed;
    border-color: var(--border-strong);
    background: transparent;
  }

  .badge--choice {
    padding: 5px 10px;
    border: 1px solid rgb(255 178 77 / 0.5);
    background: rgb(255 178 77 / 0.1);
    color: #ffb24d;
  }
}