/**
 * ============================================================
 *  CSS / DISCOVERY MODAL
 *  The "not sure who to start with" pop-up (js/features/
 *  discovery-modal.js). Previously injected into <head> at
 *  runtime as a <style> tag baked into the JS file — moved here
 *  so it's visible next to the other stylesheets and doesn't
 *  need JS to run before the modal has any styling at all.
 * ============================================================
 */


      .dm-overlay {
        position: fixed; inset: 0; z-index: 999;
        background: rgba(26,42,51,0.42);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        display: flex; align-items: center; justify-content: center;
        padding: 1.5rem;
        opacity: 0; pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
      }
      .dm-overlay.open { opacity: 1; pointer-events: auto; }

      .dm-panel {
        background: var(--card, #fff);
        border-radius: 2rem;
        max-width: 680px; width: 100%;
        max-height: 90vh; overflow-y: auto; overflow-x: hidden;
        box-shadow: 0 30px 80px rgba(26,42,51,0.28), 0 4px 16px rgba(26,42,51,0.12);
        padding: 2.75rem 2.5rem 2rem;
        position: relative;
        transform: scale(0.94) translateY(14px);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
      }
      .dm-overlay.open .dm-panel { transform: scale(1) translateY(0); opacity: 1; }

      .dm-close {
        position: absolute; top: 1.25rem; right: 1.25rem;
        width: 32px; height: 32px; border-radius: 50%;
        border: 1px solid var(--border, #e5e0d8); background: transparent;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; color: var(--muted, #8a8378);
        transition: background 0.2s, color 0.2s, transform 0.2s;
      }
      .dm-close:hover { background: var(--ink, #1a2a33); color: var(--cream, #f7f6f2); transform: rotate(90deg); }
      .dm-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

      .dm-eyebrow {
        display: flex; align-items: center; gap: 0.5rem;
        font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em;
        text-transform: uppercase; color: var(--muted, #8a8378);
        margin-bottom: 1rem;
      }
      .dm-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #d46a45); flex-shrink: 0; }

      .dm-title {
        font-family: var(--display, serif);
        font-size: clamp(1.6rem, 4vw, 2.1rem);
        font-weight: 400; line-height: 1.12; letter-spacing: -0.03em;
        color: var(--ink, #1a2a33); margin-bottom: 0.6rem;
      }
      .dm-title em { font-style: italic; color: var(--accent, #d46a45); }

      .dm-sub {
        font-size: 0.88rem; color: var(--muted, #8a8378); line-height: 1.6;
        margin-bottom: 1.75rem; max-width: 360px;
      }

      .dm-primary {
        display: flex; align-items: center; justify-content: center; gap: 0.6rem;
        width: 100%; padding: 1rem 1.5rem; border-radius: 100px;
        background: var(--ink, #1a2a33); color: var(--cream, #f7f6f2);
        font-size: 0.92rem; font-weight: 500; text-decoration: none;
        border: none; cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
        box-shadow: 0 10px 24px rgba(26,42,51,0.18);
      }
      .dm-primary:hover { transform: translateY(-2px); background: var(--accent, #d46a45); box-shadow: 0 14px 30px rgba(212,106,69,0.3); }
      .dm-primary svg { width: 15px; height: 15px; flex-shrink: 0; }

      .dm-reassure {
        display: flex; justify-content: center; gap: 0.5rem;
        font-size: 0.68rem; color: var(--muted, #8a8378);
        margin-top: 0.75rem; letter-spacing: 0.01em;
      }
      .dm-reassure-dot { color: var(--border, #e5e0d8); }

      .dm-divider {
        display: flex; align-items: center; gap: 0.75rem;
        margin: 1.75rem 0 1.25rem;
        font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--muted, #8a8378);
      }
      .dm-divider::before, .dm-divider::after {
        content: ""; flex: 1; height: 1px; background: var(--border, #e5e0d8);
      }

      .dm-therapists {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7rem;
      }
      .dm-t-chip {
        display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem;
        padding: 0.9rem 0.5rem 0.8rem; border-radius: 1.1rem; min-width: 0;
        border: 1px solid var(--border, #e5e0d8); background: transparent;
        text-decoration: none; cursor: pointer;
        transition: border-color 0.2s, background 0.2s, transform 0.2s;
      }
      .dm-t-chip:hover { border-color: var(--ink, #1a2a33); background: var(--teal-soft, #eef4f2); transform: translateY(-2px); }
      .dm-t-avatar {
        width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--display, serif); font-size: 1.1rem; font-style: italic;
        color: rgba(255,255,255,0.9); overflow: hidden;
      }
      .dm-t-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 0%; transform: scale(1.75); transform-origin: 50% 6%; display: block; }
      .dm-t-info { min-width: 0; width: 100%; }
      .dm-t-name { font-size: 0.86rem; font-weight: 500; color: var(--ink, #1a2a33); }
      .dm-t-role { font-size: 0.68rem; color: var(--muted, #8a8378); margin-top: 0.15rem; line-height: 1.3; }

      .dm-footer-row {
        display: flex; align-items: center; justify-content: center; gap: 1.25rem;
        margin-top: 1.75rem; padding-top: 1.25rem;
        border-top: 1px solid var(--border, #e5e0d8);
      }
      .dm-footer-link {
        display: flex; align-items: center; gap: 0.4rem;
        font-size: 0.78rem; font-weight: 500; color: var(--muted, #8a8378);
        text-decoration: none; transition: color 0.2s;
      }
      .dm-footer-link:hover { color: var(--ink, #1a2a33); }
      .dm-footer-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

      @media (max-width: 640px) {
        .dm-panel { padding: 2.25rem 1.25rem 1.5rem; border-radius: 1.5rem; }
        .dm-therapists {
          display: flex; overflow-x: auto; gap: 0.6rem; margin: 0 -1.25rem; padding: 0.25rem 1.25rem 0.5rem;
          scroll-snap-type: x proximity; scroll-padding: 0 1.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .dm-therapists::-webkit-scrollbar { display: none; }
        .dm-t-chip { flex: 0 0 104px; scroll-snap-align: start; }
        .dm-t-avatar { width: 64px; height: 64px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .dm-overlay, .dm-panel, .dm-close, .dm-primary, .dm-t-chip { transition: none !important; }
      }