/* Demonstration guidance only; the real application supplies all interactions. */
.demo-mode .demo-home { display: grid; gap: var(--space-4); min-width: 0; }
.demo-mode .demo-home-heading { margin: 0; }
.demo-mode .demo-home-heading .page-subtitle { max-width: 64ch; }
.demo-mode .demo-home-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); color: var(--brand); background: var(--soft-green); }
.demo-mode .demo-home-notice > svg { margin-top: var(--space-1); }
.demo-mode .demo-home-notice p { color: var(--text); font-size: 13px; line-height: 1.6; }
.demo-mode .demo-home-notice strong { color: var(--brand-dark); }
.demo-mode .demo-paths { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.demo-mode .demo-path { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-4); }
.demo-mode .demo-path-number { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--space-2); color: var(--brand); background: var(--soft-green); font-size: 16px; font-weight: 700; }
.demo-mode .demo-path-copy { min-width: 0; }
.demo-mode .demo-path-copy h2 { margin: 0; color: var(--brand-dark); font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.demo-mode .demo-path-copy p { margin-top: var(--space-1); font-size: 13px; line-height: 1.55; }
.demo-mode .demo-path > .demo-path-action { grid-column: 2; grid-row: 2; justify-self: start; min-height: var(--mobile-action-height, 44px); max-width: 100%; margin: 0; padding: var(--mobile-action-padding, var(--space-2) var(--space-3)); font-size: var(--mobile-action-font-size, 13px); }
.demo-mode .demo-path > .demo-path-action svg { display: inline; }
.demo-mode .demo-home-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.demo-mode .demo-home-links .btn { max-width: 100%; min-height: var(--mobile-action-height, 44px); font-size: var(--mobile-action-font-size, 13px); }
.demo-mode .demo-back-link { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--mobile-action-height, 44px); color: var(--brand); font-size: 12px; font-weight: var(--mobile-action-font-weight, 600); line-height: var(--mobile-action-line-height, 1.5); }
.demo-mode .demo-back-link:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.demo-mode .demo-guide { display: grid; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-5); background: var(--soft-green); box-shadow: none; }
.demo-mode .demo-guide-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
.demo-mode .demo-guide-nav a { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; min-height: var(--mobile-action-height, 44px); padding: var(--mobile-action-padding, var(--space-2) var(--space-1)); border: 1px solid var(--border); border-radius: var(--mobile-action-radius, var(--space-2)); color: var(--brand); background: var(--surface); font-size: 12px; line-height: var(--mobile-action-line-height, 1.4); font-weight: var(--mobile-action-font-weight, 600); }
.demo-mode .demo-guide-nav a:hover { border-color: var(--brand); }
.demo-mode .demo-guide-nav a[aria-current="page"] { color: white; border-color: var(--brand); background: var(--brand); }
.demo-mode .demo-guide-number { font-weight: 750; }
.demo-mode .demo-guide-instruction { max-width: 88ch; color: var(--text); font-size: 13px; line-height: 1.65; }
.demo-mode .demo-guide-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); }
.demo-mode .demo-guide-footer p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.demo-mode .demo-safety-note,
.demo-mode .demo-form-note { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--space-2); color: var(--brand-dark); background: var(--soft-green); font-size: 12px; line-height: 1.65; }
.demo-mode .demo-form-note { margin-bottom: var(--space-4); }
@media (min-width: 768px) {
  .demo-mode .demo-home { gap: var(--space-5); }
  .demo-mode .demo-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .demo-mode .demo-path { gap: var(--space-4) var(--space-3); }
  .demo-mode .demo-path > .demo-path-action { grid-column: 1 / -1; justify-self: stretch; }
  .demo-mode .demo-guide-nav { max-width: 640px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .demo-mode .demo-guide-number { display: none; }
  .demo-mode .demo-guide-nav a { white-space: nowrap; }
}