/* Optional service guidance. This module does not change the app shell. */
.tutorial-body { min-height: 370px; gap: 20px; }
.tutorial-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tutorial-progress { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tutorial-skip { min-height: 44px; padding: 8px 0 8px 16px; text-decoration: none; }
.tutorial-mark, .completion-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--soft); color: var(--accent, var(--green)); }
.tutorial-mark svg, .completion-mark svg { width: 27px; height: 27px; }
.tutorial-copy { display: grid; gap: 13px; }
.tutorial-copy h3 { font-size: 24px; line-height: 1.4; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere; }
.tutorial-copy p { font-size: 14px; line-height: 1.8; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.tutorial-copy .tutorial-note { font-size: 12px; line-height: 1.65; }
.tutorial-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tutorial-actions .primary { flex: 1; }
.tutorial-actions .secondary { min-width: 80px; }
.tutorial-device-note { font-size: 12px; line-height: 1.6; color: var(--muted); }
.profile-completion { gap: 20px; }
.completion-heading { display: grid; gap: 11px; }
.completion-heading h3 { font-size: 24px; line-height: 1.4; letter-spacing: -.025em; word-break: keep-all; }
.completion-heading p, .completion-note { font-size: 14px; line-height: 1.8; color: var(--muted); word-break: keep-all; }
.completion-actions { display: grid; gap: 10px; padding-top: 3px; }
.completion-actions > button { min-height: 48px; }
@media (max-width: 390px) {
  .tutorial-body, .profile-completion { padding: 20px; gap: 18px; }
  .tutorial-copy h3, .completion-heading h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-body *, .profile-completion * { animation: none !important; transition: none !important; }
}