{"product_id":"commission-calculator","title":"Commission Calculator","description":"\u003cstyle\u003e\n.cmc-calculator {\n  --ink: #0f172a;\n  --muted: #475569;\n  --border: #e2e8f0;\n  --surface: #ffffff;\n  --tint: #f8fafc;\n  --primary: #1d4ed8;\n  --accent: #c2410c;\n  --accent-hover: #9a3412;\n  --chart-1: #1e40af;\n  --chart-2: #0d9488;\n  --chart-3: #7c3aed;\n  --chart-4: #be185d;\n  --chart-5: #334155;\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  color: var(--ink);\n  background: var(--surface);\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  font-size: 15px;\n  line-height: 1.55;\n  container-type: inline-size;\n  overflow-wrap: anywhere;\n}\n.cmc-calculator,\n.cmc-calculator *,\n.cmc-calculator *::before,\n.cmc-calculator *::after {\n  box-sizing: border-box;\n  min-width: 0;\n}\n.cmc-calculator a {\n  color: var(--primary);\n  text-decoration-thickness: 1px;\n  text-underline-offset: 3px;\n}\n.cmc-calculator a:hover {\n  color: #1e3a8a;\n}\n.cmc-shell {\n  display: grid;\n  gap: 24px;\n}\n.cmc-header {\n  display: grid;\n  gap: 12px;\n  padding: 24px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);\n}\n.cmc-header h2,\n.cmc-education h2 {\n  margin: 0;\n  color: var(--ink);\n  font-size: 24px;\n  line-height: 1.25;\n  font-weight: 700;\n}\n.cmc-header p {\n  margin: 0;\n  color: var(--muted);\n}\n.cmc-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.cmc-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 5px 10px;\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n.cmc-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n}\n.cmc-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  min-height: 46px;\n  padding: 12px 18px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  font: inherit;\n  font-weight: 700;\n  line-height: 1;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;\n}\n.cmc-button:hover {\n  box-shadow: 0 3px 8px rgba(15, 23, 42, .14);\n}\n.cmc-button:active {\n  transform: translateY(1px);\n}\n.cmc-button:focus-visible,\n.cmc-input:focus-visible,\n.cmc-select:focus-visible,\n.cmc-segment input:focus-visible + span,\n.cmc-toggle input:focus-visible + span {\n  outline: 3px solid rgba(29, 78, 216, .35);\n  outline-offset: 2px;\n}\n.cmc-button-primary {\n  color: #ffffff;\n  background: var(--accent);\n  border-color: var(--accent);\n}\n.cmc-button-primary:hover {\n  background: var(--accent-hover);\n  border-color: var(--accent-hover);\n}\n.cmc-button-secondary {\n  color: var(--ink);\n  background: var(--surface);\n  border-color: #cbd5e1;\n}\n.cmc-button-small {\n  min-height: 38px;\n  padding: 9px 12px;\n  font-size: 13px;\n}\n.cmc-icon {\n  width: 18px;\n  height: 18px;\n  flex: 0 0 auto;\n}\n.cmc-workspace {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 24px;\n  align-items: start;\n}\n.cmc-panel,\n.cmc-section,\n.cmc-chart-card,\n.cmc-table-card,\n.cmc-education {\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--surface);\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);\n}\n.cmc-panel,\n.cmc-section,\n.cmc-chart-card,\n.cmc-table-card {\n  padding: 24px;\n}\n.cmc-panel-title,\n.cmc-section-title,\n.cmc-chart-title,\n.cmc-table-title,\n.cmc-education h3 {\n  margin: 0;\n  color: var(--ink);\n  font-size: 18px;\n  line-height: 1.35;\n  font-weight: 650;\n}\n.cmc-panel-head,\n.cmc-section-head,\n.cmc-chart-head,\n.cmc-table-head {\n  display: grid;\n  gap: 4px;\n  margin-bottom: 20px;\n}\n.cmc-panel-head p,\n.cmc-section-head p,\n.cmc-chart-head p,\n.cmc-table-head p {\n  margin: 0;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.cmc-segmented {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 4px;\n  padding: 4px;\n  margin-bottom: 20px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--tint);\n}\n.cmc-segment {\n  position: relative;\n  display: block;\n}\n.cmc-segment input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n}\n.cmc-segment span {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  color: var(--muted);\n  font-size: 14px;\n  font-weight: 650;\n  cursor: pointer;\n}\n.cmc-segment input:checked + span {\n  color: #ffffff;\n  background: var(--primary);\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .16);\n}\n.cmc-form-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n  gap: 16px;\n}\n.cmc-field {\n  display: grid;\n  align-content: start;\n  gap: 6px;\n}\n.cmc-label,\n.cmc-fieldset legend {\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 600;\n}\n.cmc-input,\n.cmc-select {\n  width: 100%;\n  min-height: 44px;\n  padding: 10px 12px;\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  color: var(--ink);\n  background: var(--surface);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n}\n.cmc-input[readonly] {\n  color: #1e3a8a;\n  background: #eff6ff;\n  border-color: #93c5fd;\n  font-weight: 700;\n}\n.cmc-helper,\n.cmc-error {\n  min-height: 20px;\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}\n.cmc-helper {\n  color: var(--muted);\n}\n.cmc-error {\n  color: #b91c1c;\n}\n.cmc-fieldset {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.cmc-inline-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.cmc-toggle {\n  position: relative;\n  display: inline-flex;\n}\n.cmc-toggle input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n}\n.cmc-toggle span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  min-width: 64px;\n  padding: 8px 12px;\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--muted);\n  font-size: 14px;\n  font-weight: 650;\n  cursor: pointer;\n}\n.cmc-toggle input:checked + span {\n  border-color: var(--primary);\n  color: var(--primary);\n  background: #eff6ff;\n}\n.cmc-subsection {\n  display: grid;\n  gap: 16px;\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--border);\n}\n.cmc-subsection-head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 12px;\n}\n.cmc-subsection-head h3 {\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.35;\n  font-weight: 700;\n}\n.cmc-tier-list {\n  display: grid;\n  gap: 12px;\n}\n.cmc-tier-row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--tint);\n}\n.cmc-tier-actions {\n  display: flex;\n  align-items: end;\n}\n.cmc-results {\n  display: grid;\n  gap: 16px;\n}\n.cmc-primary-result {\n  display: grid;\n  gap: 6px;\n  padding: 20px;\n  border: 1px solid #bfdbfe;\n  border-radius: 8px;\n  background: #eff6ff;\n}\n.cmc-primary-result span {\n  color: #1e3a8a;\n  font-size: 13px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: .04em;\n}\n.cmc-primary-result strong {\n  color: #172554;\n  font-size: 30px;\n  line-height: 1.15;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n.cmc-primary-result p {\n  margin: 0;\n  color: #334155;\n  font-size: 13px;\n  font-weight: 500;\n}\n.cmc-result-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));\n  gap: 12px;\n}\n.cmc-result-card {\n  display: grid;\n  gap: 5px;\n  padding: 16px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--surface);\n}\n.cmc-result-card span {\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 600;\n}\n.cmc-result-card strong {\n  color: var(--ink);\n  font-size: 20px;\n  line-height: 1.25;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n.cmc-result-note {\n  margin: 0;\n  padding: 12px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--tint);\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.cmc-breakdown-grid {\n  display: grid;\n  gap: 24px;\n}\n.cmc-chart-card {\n  display: grid;\n  gap: 16px;\n}\n.cmc-chart-cluster {\n  display: grid;\n  justify-items: center;\n  gap: 24px;\n  max-width: 760px;\n  margin: 0 auto;\n}\n.cmc-visual-box {\n  width: min(100%, 320px);\n  display: grid;\n  justify-items: center;\n}\n.cmc-chart-svg {\n  display: block;\n  width: min(100%, 320px);\n  aspect-ratio: 1;\n}\n.cmc-chart-ring-bg {\n  fill: none;\n  stroke: #e2e8f0;\n  stroke-width: 42;\n}\n.cmc-chart-segment {\n  fill: none;\n  stroke-width: 42;\n  stroke-linecap: butt;\n}\n.cmc-chart-center-label {\n  fill: var(--muted);\n  font-size: 13px;\n  font-weight: 600;\n  text-anchor: middle;\n}\n.cmc-chart-center-value {\n  fill: var(--ink);\n  font-size: 22px;\n  font-weight: 700;\n  text-anchor: middle;\n  font-variant-numeric: tabular-nums;\n}\n.cmc-legend {\n  display: grid;\n  align-content: start;\n  gap: 10px;\n  width: min(100%, 390px);\n}\n.cmc-legend-row {\n  display: grid;\n  grid-template-columns: 14px minmax(90px, max-content) max-content max-content;\n  align-items: center;\n  justify-content: start;\n  gap: 8px 12px;\n  color: var(--ink);\n  font-size: 13px;\n  font-weight: 600;\n}\n.cmc-legend-swatch {\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n}\n.cmc-legend-value,\n.cmc-legend-percent {\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.cmc-legend-percent {\n  color: var(--muted);\n}\n.cmc-chart-empty {\n  width: 100%;\n  padding: 16px;\n  border: 1px dashed #cbd5e1;\n  border-radius: 6px;\n  background: var(--tint);\n  color: var(--muted);\n  text-align: center;\n  font-size: 13px;\n  font-weight: 600;\n}\n.cmc-chart-caption,\n.cmc-table-note {\n  margin-top: 16px;\n  padding: 10px 12px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--tint);\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.cmc-safe-stack .cmc-chart-cluster {\n  grid-template-columns: minmax(0, 1fr) !important;\n  gap: 20px !important;\n}\n.cmc-safe-stack .cmc-chart-caption {\n  margin-top: 20px !important;\n}\n.cmc-table-card {\n  display: grid;\n  gap: 16px;\n}\n.cmc-table-wrap {\n  width: 100%;\n  overflow-x: auto;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n}\n.cmc-table {\n  width: 100%;\n  min-width: 620px;\n  border-collapse: collapse;\n  font-variant-numeric: tabular-nums;\n}\n.cmc-table th,\n.cmc-table td {\n  padding: 11px 12px;\n  border-bottom: 1px solid var(--border);\n  text-align: right;\n  vertical-align: top;\n}\n.cmc-table th:first-child,\n.cmc-table td:first-child {\n  text-align: left;\n}\n.cmc-table th {\n  color: #ffffff;\n  background: #1e293b;\n  font-size: 13px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.cmc-table td {\n  color: var(--ink);\n  background: var(--surface);\n  font-size: 13px;\n  font-weight: 500;\n}\n.cmc-table tr:last-child td {\n  border-bottom: 0;\n}\n.cmc-table tfoot td {\n  color: var(--ink);\n  background: var(--tint);\n  font-weight: 700;\n}\n.cmc-safe-table-stack .cmc-table-note {\n  margin-top: 20px !important;\n}\n.cmc-hidden {\n  display: none !important;\n}\n.cmc-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.cmc-education {\n  display: grid;\n  gap: 24px;\n  padding: 32px;\n}\n.cmc-education-section {\n  display: grid;\n  gap: 10px;\n}\n.cmc-education h3 {\n  margin-top: 4px;\n}\n.cmc-education p,\n.cmc-education ul {\n  margin: 0;\n  color: #334155;\n}\n.cmc-education ul {\n  padding-left: 20px;\n}\n.cmc-education li + li {\n  margin-top: 6px;\n}\n@container (min-width: 640px) {\n  .cmc-chart-cluster {\n    grid-template-columns: minmax(240px, 320px) minmax(250px, max-content);\n    align-items: end;\n    justify-content: center;\n    gap: 32px;\n  }\n  .cmc-tier-row {\n    grid-template-columns: repeat(4, minmax(110px, 1fr)) auto;\n    align-items: end;\n  }\n}\n@container (min-width: 900px) {\n  .cmc-workspace {\n    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);\n  }\n  .cmc-results-panel {\n    align-self: stretch;\n  }\n}\n@container (max-width: 639px) {\n  .cmc-header,\n  .cmc-panel,\n  .cmc-section,\n  .cmc-chart-card,\n  .cmc-table-card,\n  .cmc-education {\n    padding: 16px;\n  }\n  .cmc-toolbar {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .cmc-button {\n    width: 100%;\n  }\n  .cmc-form-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .cmc-legend-row {\n    grid-template-columns: 14px minmax(90px, 1fr) max-content;\n  }\n  .cmc-legend-percent {\n    grid-column: 2 \/ 4;\n    padding-left: 0;\n  }\n  .cmc-chart-caption,\n  .cmc-table-note {\n    margin-top: 12px;\n  }\n}\n\u003c\/style\u003e\n\u003cdiv class=\"cmc-calculator\" data-calculator-root\u003e\n  \u003cdiv class=\"cmc-shell\"\u003e\n    \u003cheader class=\"cmc-header\"\u003e\n      \u003ch2\u003eCommission Calculator\u003c\/h2\u003e\n      \u003cp\u003eEstimate flat or progressive tiered commissions, compare effective rates, and export the current calculation to a genuine Excel workbook.\u003c\/p\u003e\n      \u003cdiv class=\"cmc-pills\" aria-label=\"Live calculator summary\"\u003e\n        \u003cspan class=\"cmc-pill\" data-cmc-pill-mode\u003eFlat commission\u003c\/span\u003e\n        \u003cspan class=\"cmc-pill\" data-cmc-pill-sales\u003eSales: $100.00\u003c\/span\u003e\n        \u003cspan class=\"cmc-pill\" data-cmc-pill-rate\u003eEffective rate: 5.00%\u003c\/span\u003e\n        \u003cspan class=\"cmc-pill\" data-cmc-pill-total\u003eCommission: $5.00\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/header\u003e\n\n    \u003cdiv class=\"cmc-toolbar\" aria-label=\"Calculator actions\"\u003e\n      \u003cbutton class=\"cmc-button cmc-button-primary\" type=\"button\" data-cmc-download\u003e\n        \u003csvg class=\"cmc-icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\"\u003e\u003cpath fill=\"currentColor\" d=\"M5 20h14v-2H5v2Zm7-18a1 1 0 0 0-1 1v9.59L7.71 9.3 6.29 10.7l5 5a1 1 0 0 0 1.42 0l5-5-1.42-1.4L13 12.59V3a1 1 0 0 0-1-1Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        \u003cspan\u003eDownload Excel\u003c\/span\u003e\n      \u003c\/button\u003e\n      \u003cbutton class=\"cmc-button cmc-button-secondary\" type=\"button\" data-cmc-reset\u003eReset\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"cmc-workspace\"\u003e\n      \u003csection class=\"cmc-panel cmc-inputs-panel\" aria-labelledby=\"cmc-inputs-title\"\u003e\n        \u003cdiv class=\"cmc-panel-head\"\u003e\n          \u003ch3 class=\"cmc-panel-title\" id=\"cmc-inputs-title\"\u003eCommission assumptions\u003c\/h3\u003e\n          \u003cp\u003eResults update as values change. Choose a simple formula or a progressive bracket structure.\u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003cfieldset class=\"cmc-fieldset\"\u003e\n          \u003clegend\u003eCommission structure\u003c\/legend\u003e\n          \u003cdiv class=\"cmc-segmented\"\u003e\n            \u003clabel class=\"cmc-segment\" for=\"cmc-mode-flat\"\u003e\n              \u003cinput id=\"cmc-mode-flat\" name=\"cmc-mode\" type=\"radio\" value=\"flat\" checked\u003e\n              \u003cspan\u003eFlat commission\u003c\/span\u003e\n            \u003c\/label\u003e\n            \u003clabel class=\"cmc-segment\" for=\"cmc-mode-tiered\"\u003e\n              \u003cinput id=\"cmc-mode-tiered\" name=\"cmc-mode\" type=\"radio\" value=\"tiered\"\u003e\n              \u003cspan\u003eTiered commission\u003c\/span\u003e\n            \u003c\/label\u003e\n          \u003c\/div\u003e\n        \u003c\/fieldset\u003e\n\n        \u003cdiv data-cmc-flat-panel\u003e\n          \u003cdiv class=\"cmc-form-grid\"\u003e\n            \u003cdiv class=\"cmc-field\"\u003e\n              \u003clabel class=\"cmc-label\" for=\"cmc-flat-solve\"\u003eCalculate\u003c\/label\u003e\n              \u003cselect class=\"cmc-select\" id=\"cmc-flat-solve\" data-cmc-flat-solve\u003e\n                \u003coption value=\"commission\" selected\u003eCommission amount\u003c\/option\u003e\n                \u003coption value=\"rate\"\u003eCommission rate\u003c\/option\u003e\n                \u003coption value=\"sales\"\u003eSales price\u003c\/option\u003e\n              \u003c\/select\u003e\n              \u003cp class=\"cmc-helper\"\u003eThe selected value is calculated from the other two.\u003c\/p\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"cmc-field\"\u003e\n              \u003clabel class=\"cmc-label\" for=\"cmc-flat-sales\"\u003eSales price\u003c\/label\u003e\n              \u003cinput class=\"cmc-input\" id=\"cmc-flat-sales\" data-cmc-flat-sales data-mask=\"currency\" type=\"text\" inputmode=\"decimal\" value=\"$100.00\"\u003e\n              \u003cp class=\"cmc-error\" data-cmc-error-flat-sales\u003e\u003c\/p\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"cmc-field\"\u003e\n              \u003clabel class=\"cmc-label\" for=\"cmc-flat-rate\"\u003eCommission rate\u003c\/label\u003e\n              \u003cinput class=\"cmc-input\" id=\"cmc-flat-rate\" data-cmc-flat-rate data-mask=\"percent\" type=\"text\" inputmode=\"decimal\" value=\"5.00%\"\u003e\n              \u003cp class=\"cmc-error\" data-cmc-error-flat-rate\u003e\u003c\/p\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"cmc-field\"\u003e\n              \u003clabel class=\"cmc-label\" for=\"cmc-flat-commission\"\u003eCommission amount\u003c\/label\u003e\n              \u003cinput class=\"cmc-input\" id=\"cmc-flat-commission\" data-cmc-flat-commission data-mask=\"currency\" type=\"text\" inputmode=\"decimal\" value=\"$5.00\" readonly\u003e\n              \u003cp class=\"cmc-error\" data-cmc-error-flat-commission\u003e\u003c\/p\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"cmc-hidden\" data-cmc-tiered-panel\u003e\n          \u003cdiv class=\"cmc-form-grid\"\u003e\n            \u003cdiv class=\"cmc-field\"\u003e\n              \u003clabel class=\"cmc-label\" for=\"cmc-tier-sales\"\u003eTotal sales price\u003c\/label\u003e\n              \u003cinput class=\"cmc-input\" id=\"cmc-tier-sales\" data-cmc-tier-sales data-mask=\"currency\" type=\"text\" inputmode=\"decimal\" value=\"$27,000.00\"\u003e\n              \u003cp class=\"cmc-error\" data-cmc-error-tier-sales\u003e\u003c\/p\u003e\n            \u003c\/div\u003e\n            \u003cfieldset class=\"cmc-fieldset\"\u003e\n              \u003clegend\u003eHas a base commission?\u003c\/legend\u003e\n              \u003cdiv class=\"cmc-inline-options\"\u003e\n                \u003clabel class=\"cmc-toggle\" for=\"cmc-base-no\"\u003e\u003cinput id=\"cmc-base-no\" name=\"cmc-base-enabled\" type=\"radio\" value=\"no\" checked\u003e\u003cspan\u003eNo\u003c\/span\u003e\u003c\/label\u003e\n                \u003clabel class=\"cmc-toggle\" for=\"cmc-base-yes\"\u003e\u003cinput id=\"cmc-base-yes\" name=\"cmc-base-enabled\" type=\"radio\" value=\"yes\"\u003e\u003cspan\u003eYes\u003c\/span\u003e\u003c\/label\u003e\n              \u003c\/div\u003e\n            \u003c\/fieldset\u003e\n            \u003cfieldset class=\"cmc-fieldset\"\u003e\n              \u003clegend\u003eCommission varies with price?\u003c\/legend\u003e\n              \u003cdiv class=\"cmc-inline-options\"\u003e\n                \u003clabel class=\"cmc-toggle\" for=\"cmc-varies-no\"\u003e\u003cinput id=\"cmc-varies-no\" name=\"cmc-varies\" type=\"radio\" value=\"no\"\u003e\u003cspan\u003eNo\u003c\/span\u003e\u003c\/label\u003e\n                \u003clabel class=\"cmc-toggle\" for=\"cmc-varies-yes\"\u003e\u003cinput id=\"cmc-varies-yes\" name=\"cmc-varies\" type=\"radio\" value=\"yes\" checked\u003e\u003cspan\u003eYes\u003c\/span\u003e\u003c\/label\u003e\n              \u003c\/div\u003e\n            \u003c\/fieldset\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cmc-subsection cmc-hidden\" data-cmc-base-fields\u003e\n            \u003cdiv class=\"cmc-subsection-head\"\u003e\u003ch3\u003eBase commission\u003c\/h3\u003e\u003c\/div\u003e\n            \u003cdiv class=\"cmc-form-grid\"\u003e\n              \u003cdiv class=\"cmc-field\"\u003e\n                \u003clabel class=\"cmc-label\" for=\"cmc-base-value\"\u003eBase amount or rate\u003c\/label\u003e\n                \u003cinput class=\"cmc-input\" id=\"cmc-base-value\" data-cmc-base-value data-mask=\"currency\" type=\"text\" inputmode=\"decimal\" value=\"$0.00\"\u003e\n                \u003cp class=\"cmc-error\" data-cmc-error-base-value\u003e\u003c\/p\u003e\n              \u003c\/div\u003e\n              \u003cdiv class=\"cmc-field\"\u003e\n                \u003clabel class=\"cmc-label\" for=\"cmc-base-unit\"\u003eBase commission type\u003c\/label\u003e\n                \u003cselect class=\"cmc-select\" id=\"cmc-base-unit\" data-cmc-base-unit\u003e\n                  \u003coption value=\"dollar\" selected\u003eFixed amount ($)\u003c\/option\u003e\n                  \u003coption value=\"percent\"\u003ePercent of sales (%)\u003c\/option\u003e\n                \u003c\/select\u003e\n                \u003cp class=\"cmc-helper\"\u003eSwitching type converts the current value using total sales.\u003c\/p\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cmc-subsection cmc-hidden\" data-cmc-flat-tier-fields\u003e\n            \u003cdiv class=\"cmc-subsection-head\"\u003e\u003ch3\u003eSingle commission rule\u003c\/h3\u003e\u003c\/div\u003e\n            \u003cdiv class=\"cmc-form-grid\"\u003e\n              \u003cdiv class=\"cmc-field\"\u003e\n                \u003clabel class=\"cmc-label\" for=\"cmc-single-value\"\u003eCommission amount or rate\u003c\/label\u003e\n                \u003cinput class=\"cmc-input\" id=\"cmc-single-value\" data-cmc-single-value data-mask=\"percent\" type=\"text\" inputmode=\"decimal\" value=\"3.00%\"\u003e\n                \u003cp class=\"cmc-error\" data-cmc-error-single-value\u003e\u003c\/p\u003e\n              \u003c\/div\u003e\n              \u003cdiv class=\"cmc-field\"\u003e\n                \u003clabel class=\"cmc-label\" for=\"cmc-single-unit\"\u003eCommission type\u003c\/label\u003e\n                \u003cselect class=\"cmc-select\" id=\"cmc-single-unit\" data-cmc-single-unit\u003e\n                  \u003coption value=\"percent\" selected\u003ePercent of sales (%)\u003c\/option\u003e\n                  \u003coption value=\"dollar\"\u003eFixed amount ($)\u003c\/option\u003e\n                \u003c\/select\u003e\n                \u003cp class=\"cmc-helper\"\u003eA fixed amount is paid once for the period.\u003c\/p\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"cmc-subsection\" data-cmc-tier-fields\u003e\n            \u003cdiv class=\"cmc-subsection-head\"\u003e\n              \u003ch3\u003eProgressive commission tiers\u003c\/h3\u003e\n              \u003cbutton class=\"cmc-button cmc-button-secondary cmc-button-small\" type=\"button\" data-cmc-add-tier\u003eAdd tier\u003c\/button\u003e\n            \u003c\/div\u003e\n            \u003cp class=\"cmc-helper\"\u003eEach percentage applies only to sales inside its bracket. Leave “To” blank for the final unlimited tier.\u003c\/p\u003e\n            \u003cdiv class=\"cmc-tier-list\" data-cmc-tier-list\u003e\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003csection class=\"cmc-panel cmc-results-panel\" aria-labelledby=\"cmc-results-title\"\u003e\n        \u003cdiv class=\"cmc-panel-head\"\u003e\n          \u003ch3 class=\"cmc-panel-title\" id=\"cmc-results-title\"\u003eLive results\u003c\/h3\u003e\n          \u003cp\u003eAll figures use the current inputs and full internal precision.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"cmc-results\"\u003e\n          \u003cdiv class=\"cmc-primary-result\" aria-live=\"polite\" aria-atomic=\"true\"\u003e\n            \u003cspan\u003eTotal commission\u003c\/span\u003e\n            \u003cstrong data-cmc-primary\u003e$5.00\u003c\/strong\u003e\n            \u003cp data-cmc-primary-detail\u003e5.00% of $100.00 in sales.\u003c\/p\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"cmc-result-grid\"\u003e\n            \u003cdiv class=\"cmc-result-card\"\u003e\n\u003cspan\u003eSales basis\u003c\/span\u003e\u003cstrong data-cmc-result-sales\u003e$100.00\u003c\/strong\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"cmc-result-card\"\u003e\n\u003cspan\u003eEffective rate\u003c\/span\u003e\u003cstrong data-cmc-result-rate\u003e5.00%\u003c\/strong\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"cmc-result-card\"\u003e\n\u003cspan\u003eRevenue after commission\u003c\/span\u003e\u003cstrong data-cmc-result-net\u003e$95.00\u003c\/strong\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"cmc-result-card\"\u003e\n\u003cspan\u003eActive rule\u003c\/span\u003e\u003cstrong data-cmc-result-rule\u003eFlat 5.00%\u003c\/strong\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cp class=\"cmc-result-note\" data-cmc-result-note\u003eThe flat rate applies uniformly to the entire sales price.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n    \u003c\/div\u003e\n\n    \u003csection class=\"cmc-chart-card\" data-cmc-chart-card aria-labelledby=\"cmc-chart-title\"\u003e\n      \u003cdiv class=\"cmc-chart-head\"\u003e\n        \u003ch3 class=\"cmc-chart-title\" id=\"cmc-chart-title\"\u003eCommission breakdown\u003c\/h3\u003e\n        \u003cp data-cmc-chart-intro\u003eCommission compared with revenue retained after commission.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"cmc-chart-cluster\" data-cmc-chart-cluster\u003e\n        \u003cdiv class=\"cmc-visual-box\" data-cmc-visual-box\u003e\n          \u003csvg class=\"cmc-chart-svg\" data-cmc-chart-svg viewbox=\"0 0 260 260\" role=\"img\" aria-labelledby=\"cmc-svg-title cmc-svg-desc\"\u003e\n            \u003ctitle id=\"cmc-svg-title\"\u003eCommission breakdown chart\u003c\/title\u003e\n            \u003cdesc id=\"cmc-svg-desc\" data-cmc-svg-desc\u003eCommission is $5.00 and retained revenue is $95.00.\u003c\/desc\u003e\n            \u003ccircle class=\"cmc-chart-ring-bg\" cx=\"130\" cy=\"130\" r=\"92\"\u003e\u003c\/circle\u003e\n            \u003cg data-cmc-chart-marks\u003e\u003c\/g\u003e\n            \u003ctext class=\"cmc-chart-center-label\" x=\"130\" y=\"119\"\u003eCommission\u003c\/text\u003e\n            \u003ctext class=\"cmc-chart-center-value\" data-cmc-chart-total x=\"130\" y=\"145\"\u003e$5.00\u003c\/text\u003e\n          \u003c\/svg\u003e\n          \u003cdiv class=\"cmc-chart-empty cmc-hidden\" data-cmc-chart-empty\u003eEnter values above to see the breakdown.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"cmc-legend\" data-cmc-legend aria-label=\"Chart legend\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"cmc-sr-only\" data-cmc-chart-summary\u003e\u003c\/div\u003e\n      \u003cdiv class=\"cmc-chart-caption\" data-cmc-chart-caption\u003eThe commission represents 5.00% of sales; $95.00 remains before other costs.\u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"cmc-table-card\" data-cmc-table-card aria-labelledby=\"cmc-table-title\"\u003e\n      \u003cdiv class=\"cmc-table-head\"\u003e\n        \u003ch3 class=\"cmc-table-title\" id=\"cmc-table-title\"\u003eCalculation detail\u003c\/h3\u003e\n        \u003cp\u003eEach row reconciles directly to the total commission shown above.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"cmc-table-wrap\" data-cmc-table-wrap\u003e\n        \u003ctable class=\"cmc-table\"\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n\u003cth scope=\"col\"\u003eComponent\u003c\/th\u003e\n\u003cth scope=\"col\"\u003eSales in range\u003c\/th\u003e\n\u003cth scope=\"col\"\u003eRate or award\u003c\/th\u003e\n\u003cth scope=\"col\"\u003eCommission\u003c\/th\u003e\n\u003c\/tr\u003e\n          \u003c\/thead\u003e\n          \u003ctbody data-cmc-table-body\u003e\u003c\/tbody\u003e\n          \u003ctfoot\u003e\u003ctr\u003e\n\u003ctd\u003eTotal\u003c\/td\u003e\n\u003ctd data-cmc-table-sales\u003e$100.00\u003c\/td\u003e\n\u003ctd data-cmc-table-effective\u003e5.00% effective\u003c\/td\u003e\n\u003ctd data-cmc-table-total\u003e$5.00\u003c\/td\u003e\n\u003c\/tr\u003e\u003c\/tfoot\u003e\n        \u003c\/table\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"cmc-table-note\" data-cmc-table-note\u003eFlat mode uses one row. Tiered mode shows every active bracket, including brackets with zero eligible sales, so the payout can be audited.\u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"cmc-education\" aria-labelledby=\"cmc-guide-title\"\u003e\n      \u003ch2 id=\"cmc-guide-title\"\u003eHow to use the commission calculator\u003c\/h2\u003e\n\n      \u003cdiv class=\"cmc-education-section\"\u003e\n        \u003ch3\u003eWhat this calculator estimates\u003c\/h3\u003e\n        \u003cp\u003eThis tool estimates commission under two common structures. Flat mode solves the standard three-variable relationship among sales price, commission rate, and commission amount. Tiered mode calculates a progressive payout in which each rate applies only to the sales inside its own bracket. It can also add a fixed base commission or a base percentage of sales. The result is an estimate for planning and reconciliation, not a payroll, tax, legal, or employment-contract determination.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cmc-education-section\"\u003e\n        \u003ch3\u003eFlat commission inputs\u003c\/h3\u003e\n        \u003cp\u003e\u003cstrong\u003eCalculate\u003c\/strong\u003e identifies the unknown value. Choose Commission amount when sales and rate are known, Commission rate when sales and payout are known, or Sales price when payout and rate are known. The calculated field becomes read-only so there is no ambiguity about which two figures drive the formula.\u003c\/p\u003e\n        \u003cp\u003e\u003cstrong\u003eSales price\u003c\/strong\u003e is the revenue, transaction value, or eligible sales basis. Enter the amount before commission unless the applicable plan defines a different basis, such as collected revenue or gross profit. A higher sales price increases commission proportionally when the rate is unchanged.\u003c\/p\u003e\n        \u003cp\u003e\u003cstrong\u003eCommission rate\u003c\/strong\u003e is the percentage paid on the sales basis. Enter 5 for 5%, not 0.05. A zero rate produces zero commission; a blank or nonnumeric rate is treated as invalid when it is required. \u003cstrong\u003eCommission amount\u003c\/strong\u003e is the payout. When you solve for the rate or sales price, it becomes an input and should reflect the gross commission before taxes, splits, clawbacks, or deductions unless your policy states otherwise.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cmc-education-section\"\u003e\n        \u003ch3\u003eTiered commission inputs\u003c\/h3\u003e\n        \u003cp\u003e\u003cstrong\u003eTotal sales price\u003c\/strong\u003e is the accumulated eligible sales for the period. \u003cstrong\u003eHas a base commission?\u003c\/strong\u003e adds either a fixed dollar amount or a percentage of total sales before the tier amounts. When switching between dollars and percent, the calculator converts the current value using the current sales basis, which preserves the approximate economic amount.\u003c\/p\u003e\n        \u003cp\u003e\u003cstrong\u003eCommission varies with price?\u003c\/strong\u003e controls whether one rule applies to the whole period or progressive brackets apply. With No selected, a percentage is multiplied by all sales, while a fixed dollar amount is paid once. With Yes selected, each tier has a From threshold, an optional To threshold, a commission value, and a commission type. Percentage tiers pay only on sales that fall inside the bracket. A fixed-dollar tier is treated as a one-time award when sales enter that tier. Leave the final To field blank to create an unlimited top tier.\u003c\/p\u003e\n        \u003cp\u003eUse Add tier to extend the plan and Remove to delete a bracket that no longer applies. Tier boundaries should be ordered, nonnegative, and non-overlapping. For example, 0 to 20,000 at 3%, 20,000 to 25,000 at 5%, and 25,000 upward at 10% produces $1,050 on $27,000 of sales: $600 from the first bracket, $250 from the second, and $200 from the final bracket. A common mistake is applying the top rate to all sales after a threshold is reached; this calculator uses progressive bracket logic instead.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cmc-education-section\"\u003e\n        \u003ch3\u003eUnderstanding the results\u003c\/h3\u003e\n        \u003cp\u003e\u003cstrong\u003eTotal commission\u003c\/strong\u003e is the sum of the flat payout or all tier contributions plus any base commission. \u003cstrong\u003eSales basis\u003c\/strong\u003e confirms the revenue used. \u003cstrong\u003eEffective rate\u003c\/strong\u003e divides total commission by sales; it is useful for comparing a tiered plan with a simple flat rate. A high effective rate means a larger share of sales is allocated to commission, while zero means no payout under the current assumptions.\u003c\/p\u003e\n        \u003cp\u003e\u003cstrong\u003eRevenue after commission\u003c\/strong\u003e subtracts commission from sales. It is not profit because it excludes product cost, payroll taxes, benefits, refunds, overhead, and other expenses. \u003cstrong\u003eActive rule\u003c\/strong\u003e identifies the flat rate, current tier, or fixed-award rule affecting the next portion of sales. The donut chart uses the same current model as the legend and table. In tiered mode, it shows the contribution of each paid tier and the base component; in flat mode, it compares commission with revenue retained.\u003c\/p\u003e\n        \u003cp\u003eThe detail table is the audit trail. Sales in range shows the portion of total sales exposed to each percentage tier. Rate or award shows the rule used. Commission shows the resulting contribution. The footer must equal the primary result. After changing assumptions, use Download Excel to export the current inputs, summary, breakdown, and detailed rows rather than a static template.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"cmc-education-section\"\u003e\n        \u003ch3\u003ePractical interpretation and common tradeoffs\u003c\/h3\u003e\n        \u003cp\u003eFlat plans are easy to explain and forecast, but they may not strongly reward overperformance. Progressive tiered plans can create stronger incentives, although they require precise bracket definitions and more careful reconciliation. Base commission provides income stability but raises fixed compensation cost. Fixed-dollar awards can be useful for milestones, yet they create payout jumps at thresholds. Percentage tiers produce smoother marginal economics.\u003c\/p\u003e\n        \u003cp\u003eDocument whether commission is earned on bookings, invoices, cash collected, gross margin, or net revenue; how returns and cancellations are handled; whether commissions are split; and when payouts vest. Employment and wage rules vary by jurisdiction. For general U.S. context, review the \u003ca href=\"https:\/\/www.dol.gov\/agencies\/whd\/fact-sheets\/20-flsa-commissions-retail\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eU.S. Department of Labor guidance on retail commissions\u003c\/a\u003e, the \u003ca href=\"https:\/\/www.irs.gov\/businesses\/small-businesses-self-employed\/understanding-employment-taxes\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eIRS overview of employment taxes\u003c\/a\u003e, and the \u003ca href=\"https:\/\/www.bls.gov\/ooh\/sales\/home.htm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eBureau of Labor Statistics sales occupations overview\u003c\/a\u003e. A plain-language background explanation is also available from \u003ca href=\"https:\/\/www.investopedia.com\/terms\/c\/commission.asp\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eInvestopedia’s commission definition\u003c\/a\u003e.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e","brand":"FinancialModelsLab","offers":[{"title":"Default Title","offer_id":49909480325363,"sku":"commission-calculator","price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0522\/6191\/2762\/files\/commission-calculator.webp?v=1783935367","url":"https:\/\/financialmodelslab.com\/products\/commission-calculator","provider":"Financial Models Lab","version":"1.0","type":"link"}