/* A more comfortable type scale for presenting the demo on screens. */
.brand-copy strong { font-size: 24px; }
.brand-copy small { font-size: 9px; }
.workspace-name strong, .profile-button > span:nth-child(2) strong { font-size: 13px; }
.workspace-name small, .profile-button > span:nth-child(2) small { font-size: 11px; }
.workspace-avatar, .profile-avatar { font-size: 12px; }
.workspace-switcher { color: #fff; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.nav-caption { font-size: 11px; }
.nav-item { font-size: 13px; }
.backup-card strong { font-size: 12px; }
.backup-card small { font-size: 11px; }
.breadcrumb { font-size: 13px; }
.offline-pill { font-size: 11px; }
.period-select { font-size: 12px; }
.top-icon-button kbd { font-size: 10px; }
.page-section .eyebrow { font-size: 12px; }
.page-section .page-heading h1 { font-size: 30px; }
.page-section .heading-subtitle { font-size: 14px; }
.button, .select-button { font-size: 13px; }
.metric-label { font-size: 12px; }
.metric-value { font-size: 24px; }
.metric-foot, .metric-note { font-size: 11px; }
.panel-header h2 { font-size: 16px; }
.panel-header p { font-size: 12px; }
.chart-summary small, .chart-insight { font-size: 11px; }
.chart-summary strong { font-size: 19px; }
.legend span, .x-axis, .y-axis { font-size: 10px; }
.chart-tooltip { font-size: 11px; }
.transaction-table th { font-size: 11px; }
.transaction-table td { font-size: 12px; }
.transaction-name strong { font-size: 13px; }
.transaction-name small { font-size: 11px; }
.status-badge { font-size: 11px; }
.filter-tab { font-size: 12px; }
.search-field input { font-size: 12px; }
.table-pagination { font-size: 11px; }
.invoice-stats small, .invoice-stats span { font-size: 12px; }
.report-card strong, .master-card strong, .setting-row strong { font-size: 14px; }
.report-card small, .master-card small, .setting-row small { font-size: 12px; }
.branch-rows { font-size: 12px; }
.form-label { font-size: 13px; }
.form-label input, .form-label select { font-size: 14px; }
.posting-note { font-size: 12px; }
.toast { font-size: 13px; }
.page-footer { font-size: 11px; }
.nav-count, .attention-count { font-size: 11px; }
.text-link { font-size: 12px; }
.channel-legend strong { font-size: 12px; }
.channel-legend small { font-size: 11px; }
.donut-chart strong { font-size: 16px; }
.donut-chart small { font-size: 11px; }
.receivable-total small, .receivable-total > span { font-size: 12px; }
.receivable-total strong { font-size: 17px; }
.due-info strong { font-size: 12px; }
.due-info small, .due-amount small { font-size: 11px; }
.due-amount strong { font-size: 12px; }
.report-hero-copy small, .report-hero-copy p, .report-hero-side span { font-size: 12px; }
.report-hero-copy h2 { font-size: 20px; }
.report-hero-copy strong, .report-hero-side strong { font-size: 27px; }
.report-card, .master-card, .setting-row { font-size: 13px; }
.invoice-stats strong { font-size: 18px; }
.branch-rows strong { font-size: 12px; }
.integrity-note strong { font-size: 14px; }
.integrity-note p { font-size: 12px; }
.modal-head h2 { font-size: 22px; }
.modal-dialog .form-label { font-size: 13px; }
.modal-dialog .form-label input, .modal-dialog .form-label select { font-size: 14px; }
.button-small { font-size: 11px; }

.demo-dialog { max-height: min(88vh, 760px); overflow-y: auto; }
.demo-intro { color: #62736c; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.demo-stat-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #e8eeea; font-size: 13px; }
.demo-stat-row span { color: #62736c; }
.demo-stat-row strong { color: #253934; text-align: right; }
.demo-table-wrap { overflow-x: auto; margin: 14px 0; }
.demo-table { border-collapse: collapse; min-width: 510px; width: 100%; font-size: 12px; }
.demo-table th, .demo-table td { border-bottom: 1px solid #e8eeea; padding: 11px 9px; text-align: left; }
.demo-table th { color: #62736c; font-size: 11px; font-weight: 650; }
.demo-record-list { display: grid; gap: 9px; margin: 0 0 20px; padding: 0; list-style: none; }
.demo-record-list li { padding: 13px 15px; border: 1px solid #e8eeea; border-radius: 8px; color: #253934; font-size: 13px; }
.demo-workspaces { display: grid; gap: 9px; }
.demo-workspace-option { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid #dfe8e2; border-radius: 8px; background: #fff; color: #253934; text-align: left; font: inherit; font-size: 13px; }
.demo-workspace-option:hover, .demo-workspace-option:focus-visible { border-color: #4d9a7b; background: #f4f8f5; }
.demo-workspace-option small { color: #62736c; font-size: 11px; }
.demo-add-form { margin-top: 18px; }
.demo-settings { display: grid; gap: 3px; }
.demo-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 2px; border-bottom: 1px solid #e8eeea; }
.demo-setting span { display: grid; gap: 4px; }
.demo-setting strong { font-size: 13px; }
.demo-setting small { color: #62736c; font-size: 11px; }
.demo-setting input { width: 19px; height: 19px; accent-color: #20594b; }
.demo-dialog .modal-actions { margin-top: 22px; }
.button:disabled { cursor: default; opacity: .65; }
.report-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.demo-dialog .modal-actions { flex-wrap: wrap; }
.report-email-form { display: grid; gap: 14px; }
.report-email-form .form-label { display: grid; gap: 7px; }
.report-email-form textarea { width: 100%; resize: vertical; border: 1px solid #dfe8e2; border-radius: 7px; padding: 11px 12px; color: #253934; font: inherit; font-size: 14px; line-height: 1.5; }
.report-email-form input[readonly] { background: #f5f7f5; color: #62736c; }
.demo-email-note { margin: 18px 0 0; color: #62736c; font-size: 12px; line-height: 1.5; }

@media (max-width: 800px) {
  .page-section .page-heading h1 { font-size: 27px; }
}

@media (max-width: 570px) {
  .brand-copy strong { font-size: 23px; }
  .nav-item { font-size: 13px; }
  .breadcrumb { font-size: 12px; }
  .period-select { font-size: 11px; }
  .page-section .page-heading h1 { font-size: 24px; }
  .page-section .heading-subtitle { font-size: 13px; }
  .page-heading > .button { font-size: 11px; }
  .metric-label { font-size: 11px; }
  .metric-value { font-size: 19px; }
  .metric-foot, .metric-note { font-size: 10px; }
  .panel-header h2 { font-size: 14px; }
  .panel-header p { font-size: 10px; }
  .legend span { font-size: 9px; }
  .transaction-table th { font-size: 10px; }
  .transaction-table td { font-size: 11px; }
  .transaction-name strong { font-size: 12px; }
  .transaction-name small { font-size: 10px; }
  .filter-tab, .search-field input { font-size: 11px; }
  .report-card strong, .master-card strong, .setting-row strong { font-size: 13px; }
  .report-card small, .master-card small, .setting-row small { font-size: 11px; }
  .report-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .report-actions .button { height: 34px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
}