/* PRISMA — shared mobile layer. Linked AFTER each page's inline <style> so equal-specificity rules here win by source order. Desktop (>600px) is completely unaffected. */

@media (max-width: 600px) {

  /* Container — recover horizontal space */
  .container { padding: 32px 20px 64px; }

  /* Fluid headline sizing */
  h1 { font-size: clamp(26px, 7vw, 36px); }
  .welcome { font-size: clamp(32px, 9vw, 44px); }
  .set-welcome { font-size: clamp(28px, 8vw, 36px); }
  .detail-title { font-size: clamp(26px, 7vw, 36px); }
  .audience-title { font-size: clamp(26px, 7vw, 36px); }
  .service-name { font-size: clamp(22px, 6vw, 26px); }
  .help-name { font-size: clamp(20px, 5.5vw, 24px); }

  /* Card and content grids → single column */
  .services-grid,
  .help-grid,
  .clients-grid,
  .form-grid,
  .themes-grid,
  .drop-zones,
  .headline-numbers,
  .insight-grid,
  .quotes,
  .appendix-grid,
  .weights-grid,
  .stage-row,
  .detail-extras { grid-template-columns: 1fr; }

  /* Two-column detail panels (1fr 340px sidebar) → stack */
  .detail-section { grid-template-columns: 1fr; }

  /* Row layouts → stack, tighten gaps */
  .title-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .client-mgmt { grid-template-columns: 1fr; gap: 24px; }
  .context-strip { grid-template-columns: 1fr; gap: 16px; }
  .report-row { grid-template-columns: 1fr; gap: 12px; }
  .audience-row { grid-template-columns: 1fr; gap: 12px; }
  /* Admin variant needs its own selector — pages set body.is-admin .audience-row
     at higher specificity than a bare class can override. */
  body.is-admin .audience-row { grid-template-columns: 1fr; }

  /* Relax nowrap that forces horizontal overflow */
  .report-row .window,
  .report-row .created,
  .audience-row .created,
  .row-email,
  .row-joined,
  .bug-time { white-space: normal; }

  /* Masthead — tighten so it fits ~375px without wrapping badly */
  header { gap: 12px; }
  .nav-meta { gap: 16px; }
  .brand-divider,
  .brand-parent { display: none; }

  /* Belt-and-suspenders against sideways scroll */
  html, body { overflow-x: hidden; }
}