/*
 * Kassa SRM graphite contract 4.0.4.45.
 * This file is loaded after every historical theme. Product UI may use only
 * neutral black, grey and graphite surfaces; semantic colour is restricted to
 * compact status indicators. Printable documents keep their white paper.
 */
:root,
[data-srm-theme="dark"] {
  color-scheme: dark;
  --srm-canvas: #050506;
  --srm-canvas-2: #09090a;
  --srm-bg: #050506;
  --srm-app-background: #050506;
  --srm-page-background: #09090a;
  --srm-sidebar-background: #09090a;
  --srm-header-background: rgba(9, 9, 10, .97);
  --srm-surface-0: #09090a;
  --srm-surface-1: #101112;
  --srm-surface-2: #161718;
  --srm-surface-3: #1d1f21;
  --srm-surface-elevated: rgba(22, 23, 24, .97);
  --srm-surface-modal: #141516;
  --srm-surface-drawer: #101112;
  --srm-surface-hover: #202224;
  --srm-surface-selected: rgba(228, 228, 228, .12);
  --srm-surface-glass: rgba(10, 10, 10, .88);
  --srm-border-subtle: rgba(228, 228, 228, .10);
  --srm-border: rgba(228, 228, 228, .16);
  --srm-border-default: rgba(228, 228, 228, .16);
  --srm-border-strong: rgba(228, 228, 228, .27);
  --srm-border-interactive: rgba(240, 240, 240, .34);
  --srm-border-focus: rgba(248, 248, 248, .58);
  --srm-divider: rgba(228, 228, 228, .10);
  --srm-text: #f4f4f4;
  --srm-text-primary: #f4f4f4;
  --srm-text-secondary: #d0d0d0;
  --srm-text-muted: #aeaeae;
  --srm-text-disabled: #7a7a7a;
  --srm-text-inverse: #09090a;
  --srm-text-accent: #f4f4f4;
  --srm-accent: #dedede;
  --srm-accent-2: #b6b6b6;
  --srm-accent-3: #989898;
  --srm-accent-hover: #f0f0f0;
  --srm-accent-pressed: #c4c4c4;
  --srm-accent-subtle: rgba(228, 228, 228, .10);
  --srm-accent-border: rgba(228, 228, 228, .27);
  --srm-accent-text: #f7f7f7;
  --srm-info: #bababa;
  --srm-info-subtle: rgba(186, 186, 186, .10);
  --srm-info-border: rgba(186, 186, 186, .28);
  --srm-loading: rgba(228, 228, 228, .16);
  --srm-focus-ring: 0 0 0 3px rgba(242, 242, 242, .13), 0 0 0 1px rgba(242, 242, 242, .42);

  /* Compatibility aliases used by the original clients. */
  --bg: #050506;
  --bg2: #09090a;
  --panel: #101112;
  --panel2: #161718;
  --panel-2: #161718;
  --surface: #101112;
  --surface-1: #101112;
  --surface-2: #161718;
  --surface-3: #1d1f21;
  --line: rgba(228, 228, 228, .16);
  --line-strong: rgba(228, 228, 228, .27);
  --border: rgba(228, 228, 228, .16);
  --border-strong: rgba(228, 228, 228, .27);
  --text: #f4f4f4;
  --text-2: #d0d0d0;
  --text-secondary: #d0d0d0;
  --muted: #aeaeae;
  --primary: #dedede;
  --primary-2: #b6b6b6;
  --primary-dark: #989898;
  --accent: #dedede;
  --accent2: #b6b6b6;
  --accent-2: #b6b6b6;
  --accent-strong: #f0f0f0;
  --accent-soft: rgba(228, 228, 228, .10);
}

html body.srm-page,
html body.srm-marketing-page {
  color: var(--srm-text-primary) !important;
  background-color: var(--srm-canvas) !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(234, 234, 234, .055), transparent 31%),
    radial-gradient(circle at 82% 68%, rgba(184, 184, 184, .045), transparent 35%) !important;
}

html body.srm-page::before,
html body.srm-page::after,
html body.srm-marketing-page::before,
html body.srm-marketing-page::after {
  background-image: radial-gradient(circle at center, rgba(234, 234, 234, .055), transparent 64%) !important;
  filter: none !important;
}

html body.srm-page :where(
  .sidebar, .topline, .panel, .card, .stat, .tile, .metric, .workspace-card,
  .section-card, .settings-card, .report-card, .event-card, .notification-card,
  .table-wrap, .table-scroll, .modal, .modal-card, .dialog, .drawer, .popover,
  .dropdown, .menu, .command-card, .notification-panel
) {
  border-color: var(--srm-border) !important;
  background-color: var(--srm-surface-1) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, 0)) !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none;
}

html body.srm-page :where(
  .control-layout, .topbar, .control-nav, .nav-group,
  .control-main, .control-content, .workspace, .workspace-section,
  .account-menu, .notification-drawer, .command-palette
) {
  border-color: var(--srm-border) !important;
  background-color: var(--srm-surface-1) !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page :where(
  .topbar, .control-nav, .control-logo, .nav-group,
  .topbar-tool, .product-switch, .command-trigger,
  .notification-trigger, .account-button, .topbar-documents,
  .topbar-logout, .account-avatar
) {
  border-color: var(--srm-border) !important;
  background-color: #101112 !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: none !important;
}

html body.srm-page :where(.topbar small, .topbar label, .topbar kbd, .control-nav small) {
  border-color: var(--srm-border-subtle) !important;
  color: var(--srm-text-muted) !important;
}

html body.srm-page .control-nav :where(.nav-item, .nav-icon) {
  border-color: var(--srm-border-subtle) !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: none !important;
}

html body.srm-page .control-nav .nav-item.active {
  border-color: var(--srm-border-interactive) !important;
  background-color: #202224 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body.srm-page .control-nav .nav-item.active .nav-icon,
html body.srm-page .control-nav .nav-item.active .nav-icon * {
  border-color: var(--srm-border) !important;
  background-color: #18191b !important;
  color: #f0f0f0 !important;
}

/* The administration rail remains fully readable at desktop and tablet widths. */
html body.srm-page .control-layout .control-content {
  grid-template-columns: 264px minmax(0, 1fr);
}

html body.srm-page .control-layout .nav-item > span:last-child {
  min-width: 0;
  min-height: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

@media (max-width: 1160px) and (min-width: 821px) {
  html body.srm-page .control-layout .control-content {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  html body.srm-page .control-layout .nav-item {
    min-height: 46px;
  }
}

@media (max-width: 820px) {
  html body.srm-page .control-layout .control-content {
    display: block;
  }
}

html body.srm-page :where(
  .panel-head, .card-head, .section-head, .modal-head, .dialog-head, .toolbar,
  .table-toolbar, .report-toolbar, .notification-head, thead, th
) {
  border-color: var(--srm-border-subtle) !important;
  background-color: #0c0c0d !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-page :where(button, .btn, .button, [role="button"]):not(.srm-print-preview *):not(.srm-pdf-page *):not(.srm-receipt-page *):not(.srm-label-page *) {
  border-color: var(--srm-border-strong) !important;
  background-color: #191a1c !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
  color: #eef1f5 !important;
  box-shadow: none !important;
}

html body.srm-page :where(button, .btn, .button, [role="button"]):disabled {
  border-color: var(--srm-border-subtle) !important;
  background-color: #171819 !important;
  background-image: none !important;
  color: var(--srm-text-disabled) !important;
  opacity: .72 !important;
}

html body.srm-page :where(button, .btn, .button, [role="button"]):not(:disabled):hover,
html body.srm-page :where(button, .btn, .button, [role="button"]):not(:disabled):focus-visible,
html body.srm-page :where(button, .btn, .button, [role="button"]).active,
html body.srm-page :where(button, .btn, .button, [role="button"])[aria-selected="true"],
html body.srm-page :where(button, .btn, .button, [role="button"])[aria-current="page"] {
  border-color: var(--srm-border-interactive) !important;
  background-color: #27292c !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0)) !important;
  color: #ffffff !important;
}

html body.srm-page :where(.primary, .btn.primary, .button.primary, .srm-button--primary, .simple-pos-pay) {
  border-color: rgba(240, 240, 240, .32) !important;
  background-color: #2d2f32 !important;
  background-image: linear-gradient(180deg, #383a3e, #252629) !important;
  color: #ffffff !important;
}

html body.srm-page .button.primary,
html body.srm-page .btn.primary,
html body.srm-page button.primary {
  border-color: rgba(238, 238, 239, .30) !important;
  background-color: #2d2f32 !important;
  background-image: linear-gradient(180deg, #383a3e, #252629) !important;
  color: #ffffff !important;
}

html body.srm-page :where(input, select, textarea, .input, .select, .date-input):not([type="checkbox"]):not([type="radio"]) {
  color-scheme: dark !important;
  border-color: var(--srm-border-strong) !important;
  background-color: #0a0a0b !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  caret-color: #ffffff !important;
  box-shadow: none !important;
}

html body.srm-page :where(input, select, textarea):focus {
  border-color: var(--srm-border-focus) !important;
  outline: none !important;
  box-shadow: var(--srm-focus-ring) !important;
}

html body.srm-page :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: #dedede !important;
}

html body.srm-page :where(.muted, small, .hint, .subtitle, .description, .meta) {
  color: var(--srm-text-muted) !important;
}

html body.srm-page :where(.nav-icon, .overview-card-icon, .feature-icon, .icon-tile, .quick-action-icon) {
  border-color: var(--srm-border-subtle) !important;
  background-color: #141516 !important;
  background-image: linear-gradient(180deg, #1d1f21, #111213) !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html body.srm-page :where(.nav button.active, .nav-item.active, .trade-bottom-nav button.active, .srm-bottom-nav__item.is-active) {
  border-color: var(--srm-border-interactive) !important;
  background-color: #202224 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body.srm-page :where(.surface-choice, .surface-choice.active, .segment, .segment.active) {
  border-color: var(--srm-border) !important;
  background-color: #171819 !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
}

html body.srm-page :where(.surface-choice.active, .segment.active) {
  border-color: var(--srm-border-interactive) !important;
  background-color: #252729 !important;
  color: #ffffff !important;
}

html body.srm-page .surface-switch .surface-choice.active {
  border-color: var(--srm-border-interactive) !important;
  background-color: #252729 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body.srm-page .surface-switcher .surface-choice,
html body.srm-page .surface-switcher .surface-choice.active {
  border-color: rgba(228, 228, 228, .18) !important;
  background-color: #171819 !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: none !important;
}

html body.srm-page .surface-switcher .surface-choice.active {
  border-color: rgba(240, 240, 240, .34) !important;
  background-color: #292b2e !important;
  color: #ffffff !important;
}

html body.srm-page .login-logo,
html body.srm-page .login-surface-switcher,
html body.srm-page .login-surface-switcher .active {
  border-color: var(--srm-border-strong) !important;
  background-color: #141516 !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page .login-surface-switcher .active {
  border-color: var(--srm-border-interactive) !important;
  background-color: #252729 !important;
}

html body.srm-page .auth-card .btn.primary,
html body.srm-page .login-card .btn.primary,
html body.srm-page .login-screen .button.primary,
html body.srm-page .auth-shell .button.primary {
  border-color: rgba(238, 238, 239, .30) !important;
  background-color: #2d2f32 !important;
  background-image: linear-gradient(180deg, #383a3e, #252629) !important;
  color: #ffffff !important;
}

html body.srm-page .auth-card .auth-recovery-link,
html body.srm-page .login-card .auth-recovery-link {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--srm-text-secondary) !important;
}

html body.srm-page :where(.ambient, .ambient-a, .ambient-b) {
  background: radial-gradient(circle at center, rgba(232, 232, 233, .055), transparent 68%) !important;
  filter: none !important;
}

html body.srm-page #appRoot .topline,
html body.srm-page #appRoot .top-interface-mode,
html body.srm-page #appRoot .interface-mode-switch,
html body.srm-page #appRoot .panel-body,
html body.srm-page #appRoot .empty,
html body.srm-page #appRoot .toast {
  border-color: var(--srm-border) !important;
  background-color: #101112 !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot :where(input, select, textarea, .date-picker-button) {
  border-color: var(--srm-border-strong) !important;
  background-color: #0b0b0c !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-page #appRoot .view input,
html body.srm-page #appRoot .view select,
html body.srm-page #appRoot .view textarea,
html body.srm-page #appRoot .view .date-picker-button {
  border-color: var(--srm-border-strong) !important;
  background-color: #0b0b0c !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot #tradeMain .view :where(input, select, textarea, .date-picker-button) {
  border-color: var(--srm-border-strong) !important;
  background-color: #0b0b0c !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot :where(
  .shift-box, .quick-profile-icon, .shift-state-line, .sync-state-card,
  .panel-head, .history-cell, .event-date-cell, .tag, .tag.gray, .toast
) {
  border-color: var(--srm-border) !important;
  background-color: #141516 !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot .trade-help-banner {
  border-color: rgba(228, 228, 228, .18) !important;
  background-color: rgba(22, 23, 24, .96) !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-page #appRoot button,
html body.srm-page #appRoot .btn,
html body.srm-page #appRoot .button {
  border-color: rgba(228, 228, 228, .27) !important;
  background-color: #191a1c !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
  color: #eeeeee !important;
}

html body.srm-page #appRoot :where(button, .btn, .button).primary,
html body.srm-page #appRoot :where(button, .btn, .button).active,
html body.srm-page #appRoot :where(button, .btn, .button)[aria-selected="true"] {
  border-color: rgba(240, 240, 240, .34) !important;
  background-color: #292b2e !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body.srm-page #appRoot #tradeMain .view :where(table, thead, tbody, tr, th, td) {
  border-color: var(--srm-border-subtle) !important;
}

html body.srm-page #appRoot #tradeMain .view .panel-head {
  border-color: var(--srm-border) !important;
  background-color: #0f1011 !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-page #appRoot #tradeMain .view :where(
  .panel, .toolbar, .tabs, .total-box, .settings-mini,
  .device-settings-hero, .thin-client-customers,
  .inventory-trade-strip, .cart-list, .pos-cart-panel
) {
  border-color: rgba(228, 228, 228, .16) !important;
  background-color: #101112 !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot #tradeMain .view :where(.btn.primary, .button.primary, button.primary) {
  border-color: rgba(240, 240, 240, .34) !important;
  background-color: #292b2e !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body.srm-page #appRoot #tradeMain #view-pos .total-line.big {
  border-color: rgba(228, 228, 228, .16) !important;
}

html body.srm-page #appRoot #tradeMain #view-stock td span,
html body.srm-page #appRoot #tradeMain #view-settings small {
  color: var(--srm-text-secondary) !important;
}

html body.srm-page #appRoot #tradeMain .view :where(
  .tabs button, .stock-mode-tabs button, .pos-tabs button
) {
  border-color: rgba(228, 228, 228, .18) !important;
  background-color: #18191b !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
}

html body.srm-page #appRoot #tradeMain .view :where(
  .tabs button.active, .stock-mode-tabs button.active, .pos-tabs button.active
) {
  border-color: rgba(240, 240, 240, .34) !important;
  background-color: #292b2e !important;
  color: #ffffff !important;
}

html body.srm-page #appRoot #tradeMain :where(
  .trade-help-banner p, .trade-help-banner span,
  .dashboard-stat-icon, .dashboard-stat-icon *,
  .delivery-trade-meta, .delivery-trade-meta span,
  #view-clients .muted, #view-clients .muted span,
  #view-shifts .total-box span,
  #view-settings .settings-card p, #view-settings .settings-mini span,
  #view-reports td
) {
  color: var(--srm-text-secondary) !important;
}

html body.srm-page #appRoot #tradeMain :where(
  #view-dashboard .stat > span,
  #view-dashboard .mini-date-field, #view-dashboard .mini-date-field span,
  #view-pos .empty, #view-pos label, #view-pos .total-line, #view-pos .total-line span,
  #view-pos .payment-counterparty-card, #view-pos .payment-counterparty-label,
  #view-pos .pos-loyalty-card,
  #view-delivery p, #view-delivery span,
  #view-stock .inventory-trade-strip span, #view-stock .toggle-line,
  #view-stock .toggle-line span, #view-stock .product-thumb.placeholder,
  #view-stock .product-thumb.placeholder + span,
  #view-clients p, #view-clients span,
  #view-shifts .shift-table-wrap, #view-shifts .shift-table-wrap span,
  #view-settings p, #view-settings span
) {
  color: var(--srm-text-secondary) !important;
}

html body.srm-page #appRoot #tradeMain :where(
  #view-dashboard .mini-date-field,
  #view-pos .empty, #view-pos .payment-counterparty-card, #view-pos .pos-loyalty-card,
  #view-stock .inventory-trade-strip span, #view-stock .toggle-line,
  #view-stock .product-thumb.placeholder,
  #view-shifts .shift-table-wrap,
  #view-settings .equipment-capabilities, #view-settings .equipment-card,
  #view-settings .equipment-status
) {
  border-color: rgba(228, 228, 228, .16) !important;
  background-color: #121315 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot #tradeMain :where(
  .dashboard-stat-icon, .dashboard-stat-icon *,
  .inventory-trade-strip, .row-actions
) {
  border-color: rgba(228, 228, 228, .16) !important;
}

html body.srm-page #appRoot #tradeMain .view :where(.tag, .tag.gray, .history-cell, .event-date-cell) {
  border-color: var(--srm-border) !important;
  background-color: #141516 !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot #tradeMain #view-reports {
  --report-surface: #0b0c0d !important;
  --report-surface-raised: #111214 !important;
  --report-surface-strong: #17181a !important;
  --report-line: rgba(234, 234, 234, .18) !important;
  --report-line-soft: rgba(234, 234, 234, .10) !important;
  --report-text: #f4f4f4 !important;
  --report-muted: #b9b9b9 !important;
}

html body.srm-page #appRoot #tradeMain #view-reports > .panel,
html body.srm-page #appRoot #tradeMain #view-reports .report-period-shell,
html body.srm-page #appRoot #tradeMain #view-reports .report-toolbar,
html body.srm-page #appRoot #tradeMain #view-reports .report-scroll-body,
html body.srm-page #appRoot #tradeMain #view-reports .report-payment-panel,
html body.srm-page #appRoot #tradeMain #view-reports .report-scroll-body > .panel {
  border-color: var(--report-line) !important;
  background-color: var(--report-surface) !important;
  background-image: none !important;
  color: var(--report-text) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot #tradeMain #view-reports :where(
  .report-period-icon, .date-picker-button,
  .report-period-presets button, .report-toolbar .btn
) {
  border-color: var(--report-line) !important;
  background-color: #18191b !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
  box-shadow: none !important;
}

html body.srm-page #appRoot #tradeMain #view-reports :where(.report-date-control, .report-date-control input) {
  border-color: var(--report-line) !important;
  background-color: #0b0b0c !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-page #appRoot #tradeMain #view-reports :where(
  p, .report-date-field, .report-date-field > span:first-child,
  .report-period-heading small
) {
  color: var(--srm-text-secondary) !important;
}

html body.srm-page #appRoot #tradeMain #view-reports :where(
  .report-period-presets button.active,
  .report-period-presets button:hover,
  .report-period-presets button:focus-visible,
  .report-toolbar .btn:hover,
  .report-toolbar .btn:focus-visible,
  .date-picker-button:hover,
  .date-picker-button:focus-visible
) {
  border-color: rgba(240, 240, 240, .34) !important;
  outline-color: var(--srm-focus-ring) !important;
  background-color: #292b2e !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body.srm-page #appRoot #tradeMain #view-reports :where(
  .report-card-green, .report-card-blue, .report-card-gold, .report-card-red
) {
  border-color: var(--report-line) !important;
  background-color: #121315 !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) !important;
}

html body.srm-page #appRoot #tradeMain #view-reports :where(
  .report-card-green, .report-card-blue, .report-card-gold, .report-card-red
) span {
  color: var(--srm-text-secondary) !important;
}

html body.srm-page #modalRoot :where(.modal, .modal-head, .panel-body, .settings-card, .section-card) {
  border-color: var(--srm-border) !important;
  background-color: #101112 !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-page #modalRoot :where(.btn.primary, .button.primary, button.primary) {
  border-color: rgba(238, 238, 239, .30) !important;
  background-color: #2d2f32 !important;
  background-image: linear-gradient(180deg, #383a3e, #252629) !important;
  color: #ffffff !important;
}

html body.srm-page #modalRoot :where(input, select, textarea) {
  border-color: var(--srm-border-strong) !important;
  background-color: #0b0b0c !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-page #modalRoot input[type="checkbox"],
html body.srm-page #modalRoot input[type="radio"],
html body.srm-page #appRoot input[type="checkbox"],
html body.srm-page #appRoot input[type="radio"] {
  accent-color: #bfc1c4 !important;
}

html body.srm-page :where(.badge, .status, .chip, .pill):not(.danger):not(.error):not(.warning):not(.success) {
  border-color: var(--srm-border) !important;
  background-color: #18191b !important;
  background-image: none !important;
  color: var(--srm-text-secondary) !important;
}

html body.srm-page :where(.success, .status-success, .badge-success, .srm-badge--success) {
  color: var(--srm-text-secondary) !important;
}

html body.srm-page :where(.info, .status-info, .badge-info) {
  border-color: var(--srm-info-border) !important;
  background-color: var(--srm-info-subtle) !important;
  color: var(--srm-text-secondary) !important;
}

html body.srm-page :where(.main, #tradeMain, .control-main, .control-content, [data-primary-scroll]) {
  scrollbar-color: rgba(216, 216, 216, .36) transparent !important;
  scrollbar-gutter: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y;
}

html body.srm-page :where(.main, #tradeMain)[data-primary-scroll] {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}

html body.srm-page :where(.view:not(.hidden), .panel, .card, .stat, .tile, button, [role="button"]) {
  overscroll-behavior-y: auto !important;
}

html body.srm-page :where(.modal, .dialog, .srm-dialog) {
  max-height: min(92dvh, 960px) !important;
  overflow: hidden !important;
}

html body.srm-page :where(.modal-body, .dialog-body, .srm-dialog__body, .help-content, .report-scroll-body) {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: auto !important;
  -webkit-overflow-scrolling: touch;
}

html body.srm-page *::-webkit-scrollbar,
html body.srm-marketing-page *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body.srm-page *::-webkit-scrollbar-track,
html body.srm-marketing-page *::-webkit-scrollbar-track {
  background: transparent !important;
}

html body.srm-page *::-webkit-scrollbar-thumb,
html body.srm-marketing-page *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(216, 216, 216, .34) !important;
  background-clip: padding-box !important;
}

html body.srm-marketing-page :where(.button, button, .feature-grid .icon, .hero-stats span, .showcase-tabs button, .showcase-devices button) {
  border-color: var(--srm-border) !important;
  background-color: #151617 !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
  color: var(--srm-text-primary) !important;
  box-shadow: none !important;
}

html body.srm-marketing-page :where(.button, button):hover,
html body.srm-marketing-page :where(.button, button):focus-visible,
html body.srm-marketing-page :where(.button, button).active {
  border-color: var(--srm-border-interactive) !important;
  background-color: #26282a !important;
  color: #ffffff !important;
}

html body.srm-marketing-page :where(.demo-board, .request-form, .purchase-workspace, .feature-grid article, .showcase-media) {
  border-color: var(--srm-border) !important;
  background-color: rgba(12, 15, 19, .94) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.srm-marketing-page :where(
  .site-header, .entry-menu-panel, .showcase-tabs, .showcase-devices,
  .purchase-guidance, .purchase-column, .quote-box, .payment-method,
  .payment-info-section, article, input, select, textarea
) {
  border-color: var(--srm-border) !important;
  background-color: #101112 !important;
  background-image: none !important;
  color: var(--srm-text-primary) !important;
}

html body.srm-marketing-page :where(input, select, textarea) {
  background-color: #0b0b0c !important;
}

html body.srm-marketing-page :where(.footer-social, .footer-social *, .contact-link, .contact-link *) {
  border-color: var(--srm-border) !important;
  color: var(--srm-text-secondary) !important;
}

html body.srm-marketing-page :where(
  a, summary, .eyebrow, .muted, small,
  .platform-badge span, .platform-list span,
  .hero-stats span, .contact-link span, .footer-social span
) {
  border-color: rgba(208, 208, 208, .18) !important;
  color: var(--srm-text-secondary) !important;
}

/* White is semantically correct only for paper and user-provided media. */
html body :where(.srm-print-preview, .srm-pdf-page, .srm-receipt-page, .srm-label-page, .receipt-paper, .report-paper, .print-page) {
  color-scheme: light !important;
  color: #000000 !important;
  background: #ffffff !important;
}

@media (max-width: 720px) {
  html body.srm-page :where(.main, #tradeMain)[data-primary-scroll] {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  html body.srm-page #appRoot #nav,
  html body.srm-page.android-shell #appRoot #nav,
  html body.srm-page.thin-trade-client #appRoot #nav {
    top: max(224px, calc(env(safe-area-inset-top, 0px) + 216px)) !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.srm-page #appRoot #tradeMain #view-reports:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body.srm-page #appRoot #tradeMain #view-reports > .panel,
  html body.srm-page #appRoot #tradeMain #view-reports .report-period-shell,
  html body.srm-page #appRoot #tradeMain #view-reports .report-toolbar,
  html body.srm-page #appRoot #tradeMain #view-reports .report-scroll-body,
  html body.srm-page #appRoot #tradeMain #view-reports .report-payment-panel,
  html body.srm-page #appRoot #tradeMain #view-reports .report-scroll-body > .panel,
  html body.srm-page #appRoot #tradeMain #view-reports .panel-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.srm-page #appRoot #tradeMain #view-reports .report-period-shell,
  html body.srm-page #appRoot #tradeMain #view-reports .report-date-grid,
  html body.srm-page #appRoot #tradeMain #view-reports .report-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.srm-page #appRoot #tradeMain #view-reports .report-period-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.srm-page #appRoot #tradeMain #view-reports :where(.table-wrap, .table-scroll, .panel-body:has(table)) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.srm-page :where(.modal, .dialog, .srm-dialog) {
    max-height: calc(100dvh - 16px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.srm-page *,
  html body.srm-marketing-page * {
    scroll-behavior: auto !important;
  }
}

@media (min-width: 721px) and (max-width: 1365px) {
  html body.srm-page #appRoot .sidebar > .brand.srm-shell-brand {
    min-height: 84px !important;
    padding-top: 38px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  html body.srm-page #appRoot .sidebar > .app-exit-button {
    top: 10px !important;
    right: 12px !important;
    z-index: 3 !important;
  }
}

/*
 * Smartphone workspace 4.0.4.45.
 * The phone sale is a bounded cashier console: the cart owns the only local
 * scroll area while totals and the primary actions remain visible. Secondary
 * data continues to use the existing product, customer and payment dialogs.
 */
@media (max-width: 720px) and (orientation: portrait) {
  html body.srm-page[data-active-view="pos"] #appRoot.app > .main {
    height: calc(100% - var(--trade-bottom-height, 72px) - var(--trade-safe-bottom, 0px) - 8px) !important;
    max-height: calc(100% - var(--trade-bottom-height, 72px) - var(--trade-safe-bottom, 0px) - 8px) !important;
    padding: 0 8px 4px !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] #appRoot.app > .main > .topline,
  html body.srm-page[data-active-view="pos"] #view-pos > .trade-help-banner,
  html body.srm-page[data-active-view="pos"] #view-pos > .pos-receipts-history {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] #view-pos:not(.hidden) {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    align-content: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] #view-pos > .pos-tabs {
    position: static !important;
    inset: auto !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 3px !important;
  }

  html body.srm-page[data-active-view="pos"] #view-pos > .pos-tabs .tab {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 8px !important;
  }

  html body.srm-page[data-active-view="pos"] #view-pos > .two-col,
  html body.srm-page[data-active-view="pos"] #view-pos > .simple-pos-shell {
    grid-row: 2 !important;
    min-height: 0 !important;
  }

  html body.srm-page .modal .panel-body.grid:has(#pickerList) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.srm-page .modal .panel-body.grid:has(#pickerList) > .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  html body.srm-page .modal .panel-body.grid:has(#pickerList) > .toolbar > *,
  html body.srm-page .modal .panel-body.grid:has(#pickerList) #pickerList {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Simplified sale. */
  html body.srm-page[data-active-view="pos"][data-active-pos-mode="sale"] .simple-pos-shell {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-workspace {
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-commandbar {
    display: flex !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-receipt-number {
    width: 100% !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-cart-columns {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-cart {
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-empty {
    min-height: 100% !important;
    padding: 18px !important;
    text-align: center !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-cart .cart-item {
    grid-template-columns: minmax(0, 1fr) 70px auto !important;
    min-height: 48px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(126px, .72fr) !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 5px 10px !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-summary > div:first-child {
    grid-column: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-summary > div:first-child strong {
    font-size: clamp(21px, 7vw, 28px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-summary > div:nth-child(2) strong {
    font-size: 17px !important;
    text-align: right !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-summary > div:nth-child(n + 3) {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-payment-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 0 !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-payment-fields > .simple-pos-customer,
  html body.srm-page[data-active-view="pos"] .simple-pos-payment-fields > label:has(#cartDiscount),
  html body.srm-page[data-active-view="pos"] .simple-pos-payment-fields > .simple-pos-details {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-payment-fields > label:has(#paymentType) {
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    font-size: 10px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-payment-fields #paymentType {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 26px 6px 8px !important;
    font-size: 12px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-mixed {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-mixed .mixed-payment-balance {
    grid-column: 1 / -1 !important;
    font-size: 10px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions > :first-child {
    grid-column: span 2 !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions .btn {
    min-height: 39px !important;
    height: 39px !important;
    padding: 5px 4px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions .simple-pos-clear-stack {
    display: block !important;
    min-width: 0 !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions .simple-pos-clear-stack > #clearCartBtn {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions .simple-pos-clear-stack .universal-scan-button {
    width: 100% !important;
    max-width: none !important;
    height: 39px !important;
    min-height: 39px !important;
  }

  html body.srm-page[data-active-view="pos"] .simple-pos-actions .simple-pos-pay {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    height: 42px !important;
    font-size: 13px !important;
  }

  /* Standard sale uses the same bounded console without changing its logic. */
  html body.srm-page[data-active-view="pos"] #view-pos > .pos-tabs {
    position: absolute !important;
    z-index: 2 !important;
    top: 6px !important;
    right: 6px !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 3px !important;
  }

  html body.srm-page[data-active-view="pos"] #view-pos > .pos-tabs button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  html body.srm-page[data-active-view="pos"][data-active-pos-mode="sale"] #view-pos > .two-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-cart-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-cart-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) 40px repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 45px 6px 6px !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-cart-toolbar > .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 5px 4px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-cart-toolbar > :nth-child(5) {
    grid-column: span 2 !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-cart-panel > .panel-body {
    min-height: 0 !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-cart-panel .cart-list {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel > .panel-head,
  html body.srm-page[data-active-view="pos"] .pos-payment-panel .payment-counterparty-card,
  html body.srm-page[data-active-view="pos"] .pos-payment-panel .pos-loyalty-card,
  html body.srm-page[data-active-view="pos"] .pos-payment-panel label:has(#cartDiscount),
  html body.srm-page[data-active-view="pos"] .pos-payment-panel label:has(#paymentNote) {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel > .panel-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(132px, .82fr) !important;
    gap: 6px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel label:has(#paymentType) {
    display: grid !important;
    gap: 3px !important;
    font-size: 10px !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel #paymentType {
    min-height: 38px !important;
    height: 38px !important;
    padding-block: 5px !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel .mixed-payment-fields {
    grid-column: 1 / -1 !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel .total-box {
    display: grid !important;
    align-content: center !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel .total-line:not(.big) {
    display: none !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel .total-line.big {
    padding: 0 !important;
    border: 0 !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel .total-line.big strong {
    font-size: clamp(19px, 6vw, 25px) !important;
    white-space: nowrap !important;
  }

  html body.srm-page[data-active-view="pos"] .pos-payment-panel #completeSaleBtn {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    height: 42px !important;
  }

  /* SRM Control: compact headings and one natural page scroller. */
  html body.srm-page .control-layout {
    min-height: 100dvh !important;
    border-radius: 0 !important;
  }

  html body.srm-page .control-layout .workspace {
    min-height: 0 !important;
    padding: 10px 10px calc(94px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  html body.srm-page .control-layout .breadcrumbs,
  html body.srm-page .control-layout .workspace-head .eyebrow,
  html body.srm-page .control-layout .section-help-banner {
    display: none !important;
  }

  html body.srm-page .control-layout .workspace-head {
    min-height: 42px !important;
    margin: 0 0 8px !important;
    padding: 0 2px !important;
    align-items: center !important;
  }

  html body.srm-page .control-layout .workspace-head h2 {
    max-width: min(62vw, 260px) !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  html body.srm-page .control-layout .workspace-head-actions {
    gap: 5px !important;
  }

  html body.srm-page .control-layout .workspace-head-actions :where(.sync-button, .help-button) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  html body.srm-page .control-layout .workspace-body {
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.srm-page .control-layout .section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.srm-page .control-layout .section-heading h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html body.srm-page .control-layout .section-heading p {
    display: none !important;
  }

  html body.srm-page .control-layout :where(.table-toolbar, .organization-toolbar, .catalog-toolbar) {
    gap: 7px !important;
    padding: 10px !important;
  }

  html body.srm-page .control-layout .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body.srm-page .control-layout .metric {
    min-height: 70px !important;
    padding: 9px !important;
  }

  html body.srm-page .control-layout :where(.table-scroll, .workspace-body, .workspace-body > *) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.srm-page .control-layout .modal-layer,
  html body.srm-page .control-layout + .modal-layer {
    align-items: end !important;
    padding: 6px !important;
  }

  html body.srm-page .modal-card {
    width: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 12px 12px 8px 8px !important;
  }

  html body.srm-page .modal-head {
    min-height: 54px !important;
    padding: 10px 12px !important;
  }

  html body.srm-page .modal-head h2 {
    font-size: 18px !important;
  }

  html body.srm-page .modal-form {
    padding: 12px !important;
  }

  html body.srm-page .modal-form .form-row,
  html body.srm-page .check-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Public presentation remains readable without oversized phone typography. */
  html body.srm-marketing-page :where(.hero h1, .purchase-workspace h1) {
    font-size: clamp(30px, 10vw, 43px) !important;
    line-height: 1.02 !important;
  }

  html body.srm-marketing-page :where(.feature-grid article, .purchase-column, .request-form) {
    padding: 14px !important;
  }
}