/* Compact phone composition. Keep typography, controls and desktop unchanged. */
@media (max-width: 767px) {
  .topbar { min-height: 64px; padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .page-content:not(.finance-page) { padding-top: var(--space-4); padding-inline: var(--space-3); }
  .page-content:not(.finance-page) > * + * { margin-top: var(--space-4); }
  .page-heading { gap: var(--space-3); }
  .section-title { gap: var(--space-2); margin-bottom: var(--space-3); }
  .agenda-toolbar { gap: var(--space-3); }
  .automation-grid, .settings-grid, .agenda-layout { gap: var(--space-3); }

  .agenda-preview, .day-agenda, .automation-card, .connection-card,
  .message-preview.card, .settings-grid > .card { padding: var(--space-4); }
  .automation-card > .btn { margin-top: var(--space-3); }
  .settings-grid > .card h2 { margin: var(--space-3) 0 var(--space-2); }
  .settings-services { margin-block: var(--space-3); }
  .day-agenda .week-strip { margin-bottom: var(--space-2); }
  .day-group.card { padding: 0; }
  .day-group + .day-group { margin-top: var(--space-3); }
  .day-group-title { padding: var(--space-2) var(--space-3); }
  .day-group > .appointment-card {
    width: calc(100% - var(--space-3) - var(--space-3));
    margin-inline: var(--space-3);
    padding-block: var(--space-3);
  }

  .demo-mode .demo-home { gap: var(--space-3); }
  .demo-mode .demo-home-notice { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .demo-mode .demo-paths { gap: var(--space-2); }
  .demo-mode .demo-path { grid-template-columns: var(--space-5) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); }
  .demo-mode .demo-path-number { width: var(--space-5); height: var(--space-5); }
  .demo-mode .demo-guide { gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-4); }
  .setup-guide { gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-4); }
  .setup-steps { gap: var(--space-2); }
  .setup-step { gap: var(--space-2); padding: var(--space-3); }
  .page-content > .demo-guide,
  .page-content > .setup-guide,
  .page-content > .setup-module-note { margin-bottom: 0; }

  .message-history { padding: var(--space-3); gap: var(--space-3); }
  .history-list { gap: var(--space-3); }
  .history-item { padding: var(--space-3); gap: var(--space-2); }
  .history-item-meta { gap: var(--space-1); }
  .history-next { padding: var(--space-2); }
  .history-filters { gap: var(--space-2); }
  .finance-rows { gap: var(--space-2); }
  .list-pagination { margin-top: var(--space-3); padding-top: var(--space-2); gap: var(--space-2); }

  .task-header { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .task-header .eyebrow { margin-bottom: var(--space-1); }
  .task-body { padding: var(--space-4); }
  .task-footer { align-items: stretch; gap: var(--space-2); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .task-footer .wizard-actions, .task-footer .list-actions { align-items: stretch; }
  .task-body .stack, .auth-card .stack,
  .task-body .form-grid, .auth-card .form-grid { gap: var(--space-3); }
  .task-body .form-section, .auth-card .form-section { gap: var(--space-3); }
  .form-section + .form-section { margin-top: var(--space-4); padding-top: var(--space-4); }
  .task-body > .form-section + .form-section { margin-top: var(--space-4); }
  .task-body .task-progress { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .task-body > .step-dots { margin: var(--space-2) 0 var(--space-3); }
  .task-body .booking-summary, .task-body .help-card,
  .task-body .service-editor, .task-body .hours-row, .task-body .message-editor,
  .appointment-message-card, .appointment-consent { padding: var(--space-3); }
  .appointment-messages { gap: var(--space-2); }
  .demo-mode .demo-form-note { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
  .task-body dl.review-list { margin-block: var(--space-3); }
  .review-row { padding: var(--space-2) var(--space-3); }
  .auth-card .review-row, .task-body .review-row { gap: var(--space-2); }
  .help-card { padding: var(--space-3); gap: var(--space-2); }

  .auth-layout { gap: var(--space-4); padding-top: var(--space-3); padding-inline: var(--space-3); }
  .auth-card { padding: var(--space-4); }
  .auth-card form { margin-top: var(--space-4); }
  .auth-card form:not(.stack) > .field + .field { margin-top: var(--space-3); }
  .auth-card form:not(.stack) > .btn.full { margin-top: var(--space-4); }
  .auth-card .form-section { margin-top: var(--space-4); }
  .signup-page .signup-progress-compact { margin-bottom: var(--space-3); }

  .public-v2 .business-header { margin-top: var(--space-4); padding: var(--space-4); }
  .public-v2 .public-content > * + * { margin-top: var(--space-4); }
  .public-v2 .booking-progress { margin-block: var(--space-3); }
  .public-v2 .booking-layout { gap: var(--space-4); }
  .public-v2 .service-option { min-height: 64px; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .public-v2 .public-schedule { padding: var(--space-3); }
  .public-v2 .public-week-header { margin: var(--space-3) 0; }

  .home-page .hero { gap: var(--space-2); padding-top: var(--space-3); }
  .sales-page .funnel-hero { padding-block: var(--space-4); gap: var(--space-4); }
  .sales-page .funnel-brand { margin-bottom: var(--space-3); }
  .sales-page .funnel-hero-actions { margin-top: var(--space-4); }
  .sales-page .funnel-impact, .sales-page .funnel-solution { padding-block: var(--space-6); }
  .sales-page .funnel-modules-heading, .sales-page .funnel-module { padding-block: var(--space-4); }
  .sales-page .funnel-offer-inner { padding: var(--space-4); gap: var(--space-4); }
}

@media (min-width: 360px) and (max-width: 767px) {
  .demo-mode .demo-path { grid-template-columns: var(--space-5) minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; }
  .demo-mode .demo-path-copy { display: contents; }
  .demo-mode .demo-path-number { grid-column: 1; grid-row: 1; }
  .demo-mode .demo-path-copy h2 { grid-column: 2; grid-row: 1; }
  .demo-mode .demo-path-copy p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .demo-mode .demo-path > .demo-path-action { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
}