{"product_id":"margin","title":"Margin Calculator","description":"\u003cstyle\u003e\n.mrg-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  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.55;\n  container-type: inline-size;\n}\n.mrg-calculator,\n.mrg-calculator *,\n.mrg-calculator *::before,\n.mrg-calculator *::after {\n  box-sizing: border-box;\n}\n.mrg-calculator [hidden] {\n  display: none !important;\n}\n.mrg-calculator a {\n  color: var(--primary);\n  text-decoration-thickness: 1px;\n  text-underline-offset: 2px;\n}\n.mrg-calculator a:hover {\n  text-decoration-thickness: 2px;\n}\n.mrg-calculator button,\n.mrg-calculator input,\n.mrg-calculator select {\n  font: inherit;\n}\n.mrg-calculator button,\n.mrg-calculator select,\n.mrg-calculator input {\n  min-height: 44px;\n}\n.mrg-calculator button:focus-visible,\n.mrg-calculator input:focus-visible,\n.mrg-calculator select:focus-visible,\n.mrg-calculator a:focus-visible,\n.mrg-calculator summary:focus-visible {\n  outline: 3px solid rgba(29, 78, 216, .35);\n  outline-offset: 2px;\n}\n.mrg-calculator .mrg-shell {\n  display: grid;\n  gap: 24px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-header {\n  display: grid;\n  gap: 12px;\n  min-width: 0;\n  padding: 24px;\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);\n}\n.mrg-calculator .mrg-header-copy,\n.mrg-calculator .mrg-header-copy \u003e * {\n  min-width: 0;\n}\n.mrg-calculator .mrg-title {\n  margin: 0;\n  font-size: 24px;\n  line-height: 1.25;\n  font-weight: 700;\n  letter-spacing: -.015em;\n}\n.mrg-calculator .mrg-subtitle {\n  margin: 0;\n  color: var(--muted);\n  max-width: 780px;\n}\n.mrg-calculator .mrg-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-pill {\n  display: inline-grid;\n  grid-template-columns: auto auto;\n  align-items: baseline;\n  gap: 8px;\n  max-width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  background: var(--tint);\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-pill strong {\n  color: var(--ink);\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.mrg-calculator .mrg-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  min-width: 0;\n  padding: 12px 18px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 15px;\n  font-weight: 650;\n  line-height: 1.2;\n  white-space: nowrap;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);\n  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;\n}\n.mrg-calculator .mrg-button:hover {\n  box-shadow: 0 3px 8px rgba(15, 23, 42, .12);\n}\n.mrg-calculator .mrg-button:active {\n  transform: translateY(1px);\n}\n.mrg-calculator .mrg-download {\n  color: #ffffff;\n  background: var(--accent);\n  border-color: var(--accent);\n}\n.mrg-calculator .mrg-download:hover,\n.mrg-calculator .mrg-download:active {\n  background: var(--accent-hover);\n  border-color: var(--accent-hover);\n}\n.mrg-calculator .mrg-reset {\n  color: var(--ink);\n  background: var(--surface);\n  border-color: #cbd5e1;\n}\n.mrg-calculator .mrg-reset:hover {\n  background: var(--tint);\n  border-color: #94a3b8;\n}\n.mrg-calculator .mrg-icon {\n  width: 18px;\n  height: 18px;\n  flex: 0 0 auto;\n}\n.mrg-calculator .mrg-workspace {\n  display: grid;\n  gap: 24px;\n  min-width: 0;\n  align-items: start;\n}\n.mrg-calculator .mrg-card {\n  min-width: 0;\n  padding: 24px;\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);\n}\n.mrg-calculator .mrg-card-title {\n  margin: 0 0 4px;\n  font-size: 18px;\n  line-height: 1.35;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-card-intro {\n  margin: 0 0 20px;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-form {\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-field {\n  display: grid;\n  align-content: start;\n  gap: 8px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-field-label-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-label {\n  min-width: 0;\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 600;\n}\n.mrg-calculator .mrg-role {\n  display: inline-flex;\n  align-items: center;\n  min-height: 24px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: #eff6ff;\n  color: #1e40af;\n  font-size: 13px;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-role[data-role=\"calculated\"] {\n  background: #f1f5f9;\n  color: #475569;\n}\n.mrg-calculator .mrg-control {\n  width: 100%;\n  min-width: 0;\n  padding: 10px 12px;\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  color: var(--ink);\n  background: var(--surface);\n  font-variant-numeric: tabular-nums;\n}\n.mrg-calculator .mrg-control:hover {\n  border-color: #94a3b8;\n}\n.mrg-calculator .mrg-control[readonly] {\n  background: #f8fafc;\n  color: #334155;\n  cursor: default;\n}\n.mrg-calculator .mrg-control[aria-invalid=\"true\"] {\n  border-color: #b91c1c;\n  box-shadow: 0 0 0 1px #b91c1c;\n}\n.mrg-calculator .mrg-helper,\n.mrg-calculator .mrg-error {\n  min-height: 40px;\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.45;\n}\n.mrg-calculator .mrg-helper {\n  color: var(--muted);\n}\n.mrg-calculator .mrg-error {\n  display: none;\n  color: #991b1b;\n}\n.mrg-calculator .mrg-field[data-invalid=\"true\"] .mrg-helper {\n  display: none;\n}\n.mrg-calculator .mrg-field[data-invalid=\"true\"] .mrg-error {\n  display: block;\n}\n.mrg-calculator .mrg-results {\n  display: grid;\n  gap: 20px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-primary-result {\n  display: grid;\n  gap: 4px;\n  padding: 16px;\n  border-left: 4px solid var(--primary);\n  border-radius: 6px;\n  background: #eff6ff;\n  min-width: 0;\n}\n.mrg-calculator .mrg-primary-result span {\n  color: #334155;\n  font-size: 13px;\n  font-weight: 600;\n}\n.mrg-calculator .mrg-primary-result strong {\n  min-width: 0;\n  font-size: 30px;\n  line-height: 1.15;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.mrg-calculator .mrg-result-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));\n  gap: 12px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-result-tile {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n  padding: 12px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--surface);\n}\n.mrg-calculator .mrg-result-tile span {\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-result-tile strong {\n  min-width: 0;\n  font-size: 20px;\n  line-height: 1.25;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.mrg-calculator .mrg-formula {\n  display: grid;\n  gap: 8px;\n  padding: 12px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--tint);\n  color: #334155;\n}\n.mrg-calculator .mrg-formula strong {\n  font-size: 13px;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-formula code {\n  color: var(--ink);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 13px;\n  overflow-wrap: anywhere;\n}\n.mrg-calculator .mrg-status {\n  margin: 0;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-section {\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-section-header {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-section-title {\n  margin: 0;\n  font-size: 18px;\n  line-height: 1.35;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-section-text {\n  margin: 0;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-breakdown-grid {\n  display: grid;\n  gap: 24px;\n  align-items: center;\n  justify-items: center;\n  min-width: 0;\n}\n.mrg-calculator .mrg-plot-wrap {\n  display: grid;\n  place-items: center;\n  width: 100%;\n  min-width: 0;\n}\n.mrg-calculator .mrg-donut-svg {\n  display: block;\n  width: min(100%, 320px);\n  height: auto;\n  max-width: 320px;\n  overflow: visible;\n}\n.mrg-calculator .mrg-donut-value {\n  fill: var(--ink);\n  font-size: 24px;\n  font-weight: 700;\n  text-anchor: middle;\n  font-variant-numeric: tabular-nums;\n}\n.mrg-calculator .mrg-donut-caption {\n  fill: var(--muted);\n  font-size: 13px;\n  font-weight: 600;\n  text-anchor: middle;\n}\n.mrg-calculator .mrg-legend {\n  display: grid;\n  gap: 10px;\n  width: min(100%, 360px);\n  min-width: 0;\n}\n.mrg-calculator .mrg-legend-row {\n  display: grid;\n  grid-template-columns: 12px minmax(0, auto) auto auto;\n  align-items: baseline;\n  justify-content: start;\n  gap: 8px 12px;\n  min-width: 0;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--border);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-legend-row:last-child {\n  border-bottom: 0;\n}\n.mrg-calculator .mrg-swatch {\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n}\n.mrg-calculator .mrg-legend-name {\n  min-width: 0;\n  color: var(--ink);\n  font-weight: 600;\n}\n.mrg-calculator .mrg-legend-value,\n.mrg-calculator .mrg-legend-percent {\n  color: var(--ink);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.mrg-calculator .mrg-chart-stack {\n  display: grid;\n  gap: 16px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-line-plot {\n  display: grid;\n  gap: 8px;\n  width: min(100%, 860px);\n  min-width: 0;\n  justify-self: center;\n}\n.mrg-calculator .mrg-line-svg {\n  display: block;\n  width: 100%;\n  height: auto;\n  min-width: 0;\n  overflow: visible;\n}\n.mrg-calculator .mrg-axis-text {\n  fill: #475569;\n  font-size: 13px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n}\n.mrg-calculator .mrg-axis-title {\n  fill: #334155;\n  font-size: 13px;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-gridline {\n  stroke: #cbd5e1;\n  stroke-width: 1;\n}\n.mrg-calculator .mrg-axis-line {\n  stroke: #64748b;\n  stroke-width: 1.5;\n}\n.mrg-calculator .mrg-series-line {\n  fill: none;\n  stroke-width: 4;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n.mrg-calculator .mrg-series-area {\n  stroke: none;\n  opacity: .1;\n}\n.mrg-calculator .mrg-series-dot {\n  stroke: #ffffff;\n  stroke-width: 2;\n}\n.mrg-calculator .mrg-chart-legend {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 10px 20px;\n  min-width: 0;\n  margin-top: 16px;\n}\n.mrg-calculator .mrg-chart-legend-item {\n  display: inline-grid;\n  grid-template-columns: 12px auto;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  color: var(--ink);\n  font-size: 13px;\n  font-weight: 600;\n}\n.mrg-calculator .mrg-callout {\n  display: block;\n  min-width: 0;\n  margin-top: 16px;\n  padding: 10px 12px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--tint);\n  color: #334155;\n  font-size: 13px;\n  font-weight: 500;\n}\n.mrg-calculator .mrg-empty {\n  display: grid;\n  place-items: center;\n  min-height: 96px;\n  width: 100%;\n  padding: 16px;\n  border: 1px dashed #94a3b8;\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.mrg-calculator .mrg-table-wrap {\n  width: 100%;\n  min-width: 0;\n  overflow-x: auto;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--surface);\n}\n.mrg-calculator .mrg-table {\n  width: 100%;\n  min-width: 560px;\n  border-collapse: collapse;\n  font-variant-numeric: tabular-nums;\n}\n.mrg-calculator .mrg-table th,\n.mrg-calculator .mrg-table td {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--border);\n  text-align: right;\n  vertical-align: top;\n  font-size: 13px;\n}\n.mrg-calculator .mrg-table th:first-child,\n.mrg-calculator .mrg-table td:first-child {\n  text-align: left;\n}\n.mrg-calculator .mrg-table th {\n  color: #ffffff;\n  background: #1e293b;\n  font-weight: 650;\n  white-space: nowrap;\n}\n.mrg-calculator .mrg-table tbody tr:hover {\n  background: #f8fafc;\n}\n.mrg-calculator .mrg-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.mrg-calculator .mrg-table-note {\n  display: block;\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.mrg-calculator .mrg-safe-chart-stack .mrg-breakdown-grid {\n  grid-template-columns: 1fr !important;\n  row-gap: 24px !important;\n}\n.mrg-calculator .mrg-safe-chart-stack .mrg-chart-legend {\n  margin-top: 20px !important;\n}\n.mrg-calculator .mrg-safe-chart-stack .mrg-callout {\n  margin-top: 20px !important;\n}\n.mrg-calculator .mrg-safe-table-stack .mrg-table-note {\n  margin-top: 20px !important;\n}\n.mrg-calculator .mrg-education {\n  display: grid;\n  gap: 24px;\n  min-width: 0;\n  padding: 24px;\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.mrg-calculator .mrg-education-section {\n  display: grid;\n  gap: 10px;\n  min-width: 0;\n}\n.mrg-calculator .mrg-education h2,\n.mrg-calculator .mrg-education h3 {\n  margin: 0;\n  color: var(--ink);\n  line-height: 1.35;\n}\n.mrg-calculator .mrg-education h2 {\n  font-size: 18px;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-education h3 {\n  font-size: 15px;\n  font-weight: 650;\n}\n.mrg-calculator .mrg-education p,\n.mrg-calculator .mrg-education ul {\n  margin: 0;\n}\n.mrg-calculator .mrg-education ul {\n  padding-left: 20px;\n}\n.mrg-calculator .mrg-education li + li {\n  margin-top: 6px;\n}\n.mrg-calculator .mrg-numeric {\n  font-variant-numeric: tabular-nums;\n}\n@container (min-width: 640px) {\n  .mrg-calculator .mrg-header {\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: end;\n  }\n  .mrg-calculator .mrg-pills {\n    justify-content: flex-end;\n  }\n  .mrg-calculator .mrg-form {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .mrg-calculator .mrg-field.mrg-pair-field {\n    grid-column: 1 \/ -1;\n  }\n  .mrg-calculator .mrg-breakdown-grid {\n    grid-template-columns: minmax(240px, 320px) minmax(0, 360px);\n    justify-content: center;\n    column-gap: 24px;\n  }\n}\n@container (min-width: 900px) {\n  .mrg-calculator .mrg-workspace {\n    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);\n  }\n}\n@container (max-width: 639px) {\n  .mrg-calculator .mrg-header,\n  .mrg-calculator .mrg-card,\n  .mrg-calculator .mrg-education {\n    padding: 16px;\n  }\n  .mrg-calculator .mrg-toolbar {\n    align-items: stretch;\n  }\n  .mrg-calculator .mrg-button {\n    flex: 1 1 auto;\n  }\n  .mrg-calculator .mrg-result-grid {\n    grid-template-columns: 1fr 1fr;\n  }\n  .mrg-calculator .mrg-legend-row {\n    grid-template-columns: 12px minmax(0, 1fr) auto;\n  }\n  .mrg-calculator .mrg-legend-percent {\n    grid-column: 2 \/ -1;\n  }\n  .mrg-calculator .mrg-chart-legend {\n    margin-top: 12px;\n  }\n  .mrg-calculator .mrg-callout,\n  .mrg-calculator .mrg-table-note {\n    margin-top: 12px;\n  }\n}\n@container (max-width: 380px) {\n  .mrg-calculator .mrg-result-grid {\n    grid-template-columns: 1fr;\n  }\n  .mrg-calculator .mrg-button {\n    width: 100%;\n  }\n  .mrg-calculator .mrg-pill {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n}\n\u003c\/style\u003e\n\u003cdiv class=\"mrg-calculator\" data-calculator-root\u003e\n  \u003cdiv class=\"mrg-shell\"\u003e\n    \u003csection class=\"mrg-header\"\u003e\n      \u003cdiv class=\"mrg-header-copy\"\u003e\n        \u003ch2 class=\"mrg-title\"\u003eMargin Calculator\u003c\/h2\u003e\n        \u003cp class=\"mrg-subtitle\"\u003eUse any two pricing values to calculate cost, revenue, gross profit, margin, markup, and a practical price-sensitivity view.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"mrg-pills\" aria-label=\"Live calculation summary\"\u003e\n        \u003cspan class=\"mrg-pill\"\u003eRevenue \u003cstrong data-pill=\"revenue\"\u003e$100.00\u003c\/strong\u003e\u003c\/span\u003e\n        \u003cspan class=\"mrg-pill\"\u003eProfit \u003cstrong data-pill=\"profit\"\u003e$40.00\u003c\/strong\u003e\u003c\/span\u003e\n        \u003cspan class=\"mrg-pill\"\u003eMargin \u003cstrong data-pill=\"margin\"\u003e40.00%\u003c\/strong\u003e\u003c\/span\u003e\n        \u003cspan class=\"mrg-pill\"\u003eMarkup \u003cstrong data-pill=\"markup\"\u003e66.67%\u003c\/strong\u003e\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003cdiv class=\"mrg-toolbar\" aria-label=\"Calculator actions\"\u003e\n      \u003cbutton class=\"mrg-button mrg-download\" type=\"button\" data-action=\"download\"\u003e\n        \u003csvg class=\"mrg-icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n          \u003cpath fill=\"currentColor\" d=\"M5 2h9l5 5v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 2H5v16h12V8h-4V4Zm-5.8 7h2.1l1.5 2.3 1.5-2.3h2.1l-2.5 3.6 2.7 3.9h-2.1l-1.7-2.5-1.7 2.5H7l2.7-3.9L7.2 11Z\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e\n        \u003cspan\u003eDownload Excel\u003c\/span\u003e\n      \u003c\/button\u003e\n      \u003cbutton class=\"mrg-button mrg-reset\" type=\"button\" data-action=\"reset\"\u003eReset\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003csection class=\"mrg-workspace\"\u003e\n      \u003cdiv class=\"mrg-card\"\u003e\n        \u003ch3 class=\"mrg-card-title\"\u003eInputs\u003c\/h3\u003e\n        \u003cp class=\"mrg-card-intro\"\u003eChoose which two values you know. The other two fields become live calculated outputs.\u003c\/p\u003e\n        \u003cdiv class=\"mrg-form\"\u003e\n          \u003cdiv class=\"mrg-field mrg-pair-field\"\u003e\n            \u003clabel class=\"mrg-label\" for=\"mrg-pair\"\u003eUse as inputs\u003c\/label\u003e\n            \u003cselect class=\"mrg-control\" id=\"mrg-pair\" data-field=\"pair\"\u003e\n              \u003coption value=\"\"\u003eChoose two values…\u003c\/option\u003e\n              \u003coption value=\"costMargin\" selected\u003eCost + margin\u003c\/option\u003e\n              \u003coption value=\"costRevenue\"\u003eCost + revenue\u003c\/option\u003e\n              \u003coption value=\"costProfit\"\u003eCost + profit\u003c\/option\u003e\n              \u003coption value=\"marginRevenue\"\u003eMargin + revenue\u003c\/option\u003e\n              \u003coption value=\"marginProfit\"\u003eMargin + profit\u003c\/option\u003e\n              \u003coption value=\"revenueProfit\"\u003eRevenue + profit\u003c\/option\u003e\n            \u003c\/select\u003e\n            \u003cp class=\"mrg-helper\"\u003eChanging the pair carries the current calculated values into the newly editable fields.\u003c\/p\u003e\n            \u003cp class=\"mrg-error\" data-error=\"pair\"\u003eChoose a valid input pair.\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mrg-field\" data-field-wrap=\"cost\"\u003e\n            \u003cdiv class=\"mrg-field-label-row\"\u003e\n              \u003clabel class=\"mrg-label\" for=\"mrg-cost\"\u003eCost\u003c\/label\u003e\n              \u003cspan class=\"mrg-role\" data-role-badge=\"cost\"\u003eInput\u003c\/span\u003e\n            \u003c\/div\u003e\n            \u003cinput class=\"mrg-control\" id=\"mrg-cost\" data-field=\"cost\" data-kind=\"currency\" inputmode=\"decimal\" autocomplete=\"off\" value=\"$60.00\"\u003e\n            \u003cp class=\"mrg-helper\"\u003eThe direct cost of the item or service before gross profit.\u003c\/p\u003e\n            \u003cp class=\"mrg-error\" data-error=\"cost\"\u003eEnter a non-negative cost.\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mrg-field\" data-field-wrap=\"margin\"\u003e\n            \u003cdiv class=\"mrg-field-label-row\"\u003e\n              \u003clabel class=\"mrg-label\" for=\"mrg-margin\"\u003eMargin\u003c\/label\u003e\n              \u003cspan class=\"mrg-role\" data-role-badge=\"margin\"\u003eInput\u003c\/span\u003e\n            \u003c\/div\u003e\n            \u003cinput class=\"mrg-control\" id=\"mrg-margin\" data-field=\"margin\" data-kind=\"percent\" inputmode=\"decimal\" autocomplete=\"off\" value=\"40.00%\"\u003e\n            \u003cp class=\"mrg-helper\"\u003eGross profit as a percentage of revenue. A 100% margin is valid only when direct cost is zero.\u003c\/p\u003e\n            \u003cp class=\"mrg-error\" data-error=\"margin\"\u003eEnter a valid margin for the selected input pair.\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mrg-field\" data-field-wrap=\"revenue\"\u003e\n            \u003cdiv class=\"mrg-field-label-row\"\u003e\n              \u003clabel class=\"mrg-label\" for=\"mrg-revenue\"\u003eRevenue\u003c\/label\u003e\n              \u003cspan class=\"mrg-role\" data-role-badge=\"revenue\" data-role=\"calculated\"\u003eCalculated\u003c\/span\u003e\n            \u003c\/div\u003e\n            \u003cinput class=\"mrg-control\" id=\"mrg-revenue\" data-field=\"revenue\" data-kind=\"currency\" inputmode=\"decimal\" autocomplete=\"off\" value=\"$100.00\" readonly aria-readonly=\"true\"\u003e\n            \u003cp class=\"mrg-helper\"\u003eThe selling price or sales amount before subtracting cost.\u003c\/p\u003e\n            \u003cp class=\"mrg-error\" data-error=\"revenue\"\u003eEnter revenue greater than zero where required.\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mrg-field\" data-field-wrap=\"profit\"\u003e\n            \u003cdiv class=\"mrg-field-label-row\"\u003e\n              \u003clabel class=\"mrg-label\" for=\"mrg-profit\"\u003eGross profit\u003c\/label\u003e\n              \u003cspan class=\"mrg-role\" data-role-badge=\"profit\" data-role=\"calculated\"\u003eCalculated\u003c\/span\u003e\n            \u003c\/div\u003e\n            \u003cinput class=\"mrg-control\" id=\"mrg-profit\" data-field=\"profit\" data-kind=\"currency\" inputmode=\"decimal\" autocomplete=\"off\" value=\"$40.00\" readonly aria-readonly=\"true\"\u003e\n            \u003cp class=\"mrg-helper\"\u003eRevenue minus cost. Negative values represent a gross loss.\u003c\/p\u003e\n            \u003cp class=\"mrg-error\" data-error=\"profit\"\u003eThis combination does not produce a valid non-negative cost and revenue.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mrg-card mrg-results\"\u003e\n        \u003cdiv\u003e\n          \u003ch3 class=\"mrg-card-title\"\u003eLive results\u003c\/h3\u003e\n          \u003cp class=\"mrg-card-intro\"\u003eAll figures use full precision internally and round only for display.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mrg-primary-result\" aria-live=\"polite\" aria-atomic=\"true\"\u003e\n          \u003cspan\u003eRevenue required\u003c\/span\u003e\n          \u003cstrong data-result=\"revenue\"\u003e$100.00\u003c\/strong\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mrg-result-grid\"\u003e\n          \u003cdiv class=\"mrg-result-tile\"\u003e\n            \u003cspan\u003eGross profit\u003c\/span\u003e\n            \u003cstrong data-result=\"profit\"\u003e$40.00\u003c\/strong\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mrg-result-tile\"\u003e\n            \u003cspan\u003eGross margin\u003c\/span\u003e\n            \u003cstrong data-result=\"margin\"\u003e40.00%\u003c\/strong\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mrg-result-tile\"\u003e\n            \u003cspan\u003eMarkup on cost\u003c\/span\u003e\n            \u003cstrong data-result=\"markup\"\u003e66.67%\u003c\/strong\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mrg-result-tile\"\u003e\n            \u003cspan\u003eCost share\u003c\/span\u003e\n            \u003cstrong data-result=\"costShare\"\u003e60.00%\u003c\/strong\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mrg-result-tile\"\u003e\n            \u003cspan\u003ePrice multiple\u003c\/span\u003e\n            \u003cstrong data-result=\"multiple\"\u003e1.67×\u003c\/strong\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mrg-result-tile\"\u003e\n            \u003cspan\u003eProfit per $100 sales\u003c\/span\u003e\n            \u003cstrong data-result=\"profitPer100\"\u003e$40.00\u003c\/strong\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mrg-formula\"\u003e\n          \u003cstrong\u003eCore relationship\u003c\/strong\u003e\n          \u003ccode data-result=\"formula\"\u003emargin = (revenue − cost) ÷ revenue\u003c\/code\u003e\n        \u003c\/div\u003e\n        \u003cp class=\"mrg-status\" data-result=\"status\"\u003eA 40.00% margin means $40.00 of gross profit for every $100.00 of revenue.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"mrg-card mrg-section\" data-chart-card=\"breakdown\"\u003e\n      \u003cdiv class=\"mrg-section-header\"\u003e\n        \u003ch3 class=\"mrg-section-title\"\u003eRevenue composition\u003c\/h3\u003e\n        \u003cp class=\"mrg-section-text\" data-chart-subtitle=\"breakdown\"\u003eSee how each sales dollar is divided between direct cost and gross profit.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"mrg-breakdown-grid\" data-chart-layout=\"breakdown\"\u003e\n        \u003cdiv class=\"mrg-plot-wrap\" data-chart-plot=\"breakdown\"\u003e\n          \u003csvg class=\"mrg-donut-svg\" data-donut viewbox=\"0 0 320 320\" role=\"img\" aria-label=\"Revenue composition: cost 60 dollars and gross profit 40 dollars.\"\u003e\u003c\/svg\u003e\n          \u003cdiv class=\"mrg-empty\" data-chart-empty=\"breakdown\" hidden\u003eEnter values above to see the revenue composition.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mrg-legend\" data-chart-legend=\"breakdown\" aria-label=\"Revenue composition legend\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"mrg-callout\" data-chart-caption=\"breakdown\"\u003eCost consumes 60.00% of revenue, leaving a 40.00% gross margin.\u003c\/div\u003e\n      \u003cdiv class=\"mrg-table-wrap\"\u003e\n        \u003ctable class=\"mrg-table\" aria-label=\"Revenue composition data\"\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n              \u003cth scope=\"col\"\u003eComponent\u003c\/th\u003e\n              \u003cth scope=\"col\"\u003eAmount\u003c\/th\u003e\n              \u003cth scope=\"col\"\u003eShare of revenue\u003c\/th\u003e\n            \u003c\/tr\u003e\n          \u003c\/thead\u003e\n          \u003ctbody data-breakdown-table\u003e\u003c\/tbody\u003e\n        \u003c\/table\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"mrg-card mrg-section\" data-chart-card=\"sensitivity\"\u003e\n      \u003cdiv class=\"mrg-section-header\"\u003e\n        \u003ch3 class=\"mrg-section-title\"\u003eMargin sensitivity\u003c\/h3\u003e\n        \u003cp class=\"mrg-section-text\"\u003eThe chart holds cost constant and shows how required revenue and gross profit change across target margins.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"mrg-chart-stack\" data-chart-layout=\"sensitivity\"\u003e\n        \u003cdiv class=\"mrg-line-plot\" data-chart-plot=\"sensitivity\"\u003e\n          \u003csvg class=\"mrg-line-svg\" data-line-chart viewbox=\"0 0 720 360\" role=\"img\" aria-label=\"Margin sensitivity chart showing revenue and profit across target margins.\"\u003e\u003c\/svg\u003e\n          \u003cdiv class=\"mrg-empty\" data-chart-empty=\"sensitivity\" hidden\u003eEnter a positive cost to see the margin sensitivity chart.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mrg-chart-legend\" data-chart-legend=\"sensitivity\" aria-label=\"Margin sensitivity legend\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"mrg-callout\" data-chart-caption=\"sensitivity\"\u003eAt a 50% margin, a $60.00 cost requires $120.00 of revenue and produces $60.00 of gross profit.\u003c\/div\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"mrg-table-wrap\"\u003e\n        \u003ctable class=\"mrg-table\" aria-label=\"Margin sensitivity data\"\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n              \u003cth scope=\"col\"\u003eTarget margin\u003c\/th\u003e\n              \u003cth scope=\"col\"\u003eRequired revenue\u003c\/th\u003e\n              \u003cth scope=\"col\"\u003eGross profit\u003c\/th\u003e\n              \u003cth scope=\"col\"\u003eMarkup on cost\u003c\/th\u003e\n            \u003c\/tr\u003e\n          \u003c\/thead\u003e\n          \u003ctbody data-sensitivity-table\u003e\u003c\/tbody\u003e\n        \u003c\/table\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"mrg-table-note\" data-table-note\u003eEach row keeps the current cost fixed. As margin approaches 100%, required revenue rises nonlinearly because the denominator in cost ÷ (1 − margin) becomes smaller.\u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"mrg-education\"\u003e\n      \u003cdiv class=\"mrg-education-section\"\u003e\n        \u003ch2\u003eWhat does this margin calculator estimate?\u003c\/h2\u003e\n        \u003cp\u003eThis calculator connects four core pricing figures: cost, revenue, gross profit, and gross margin. Supply any two values and it solves the remaining two. It also translates margin into markup, cost share, price multiple, and profit per $100 of sales. These outputs are useful for product pricing, service quotes, wholesale decisions, and quick gross-profit checks. They are not a complete income statement because operating expenses, financing costs, taxes, returns, and other indirect items may sit outside the direct cost used here.\u003c\/p\u003e\n        \u003cp\u003eGross margin is a ratio based on revenue. Gross profit is the currency amount left after subtracting direct cost. The \u003ca href=\"https:\/\/www.irs.gov\/publications\/p334\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eIRS guide for small businesses\u003c\/a\u003e explains how cost of goods sold and gross profit appear in business records, while the \u003ca href=\"https:\/\/www.sec.gov\/reportspubs\/investor-publications\/investorpubsbegfinstmtguide\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eSEC financial statement guide\u003c\/a\u003e provides broader context for interpreting revenue, expenses, and profit.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mrg-education-section\"\u003e\n        \u003ch2\u003eHow should you use each input?\u003c\/h2\u003e\n        \u003ch3\u003eUse as inputs\u003c\/h3\u003e\n        \u003cp\u003eSelect the two figures you already know. “Cost + margin” is useful when setting a selling price from a target margin. “Cost + revenue” works when auditing an existing sale. “Cost + profit” is appropriate when you need a fixed dollar profit. “Margin + revenue” backs into allowable cost, while “margin + profit” estimates the revenue and cost consistent with both targets. “Revenue + profit” calculates cost and margin from actual results. Switching pairs carries the current model values into the new editable fields, reducing re-entry errors.\u003c\/p\u003e\n        \u003ch3\u003eCost\u003c\/h3\u003e\n        \u003cp\u003eEnter the direct cost associated with the sale, normally in dollars. It is required whenever the selected pair includes cost. A higher cost lowers profit and margin when revenue is fixed, or raises the required selling price when margin is fixed. Include costs consistently: mixing unit cost with total revenue, or including overhead in one scenario but not another, makes comparisons unreliable.\u003c\/p\u003e\n        \u003ch3\u003eMargin\u003c\/h3\u003e\n        \u003cp\u003eEnter gross margin as a percentage of revenue. A 40% margin means 40 cents of gross profit for each dollar of revenue. When cost and margin are used to solve revenue, the margin must stay below 100%. In other input modes, a 100% margin is valid only when direct cost is zero. Negative margin is allowed and represents a gross loss. Do not confuse margin with markup: margin divides profit by revenue, whereas markup divides profit by cost.\u003c\/p\u003e\n        \u003ch3\u003eRevenue\u003c\/h3\u003e\n        \u003cp\u003eRevenue is the selling price for one unit or total sales for the same period and scope as cost. Use a value greater than zero when revenue is one of the selected inputs. Raising revenue while cost stays fixed increases both profit and margin. A common mistake is entering sales tax collected from the customer as revenue even when that tax is payable to a government authority rather than earned by the business.\u003c\/p\u003e\n        \u003ch3\u003eGross profit\u003c\/h3\u003e\n        \u003cp\u003eGross profit equals revenue minus direct cost. It may be positive, zero, or negative. A higher profit target raises the required revenue when cost is fixed. When margin and profit are the chosen inputs, they must point in a mathematically consistent direction: a positive margin requires positive profit, while a negative margin corresponds to a gross loss.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mrg-education-section\"\u003e\n        \u003ch2\u003eHow are the results calculated?\u003c\/h2\u003e\n        \u003cp\u003eThe central formula is \u003cspan class=\"mrg-numeric\"\u003emargin = (revenue − cost) ÷ revenue\u003c\/span\u003e. Gross profit is simply revenue minus cost. When cost and margin are known, required revenue is \u003cspan class=\"mrg-numeric\"\u003ecost ÷ (1 − margin)\u003c\/span\u003e, with margin expressed as a decimal. Markup is \u003cspan class=\"mrg-numeric\"\u003eprofit ÷ cost\u003c\/span\u003e. Cost share is \u003cspan class=\"mrg-numeric\"\u003ecost ÷ revenue\u003c\/span\u003e, and the price multiple is \u003cspan class=\"mrg-numeric\"\u003erevenue ÷ cost\u003c\/span\u003e. The model keeps full precision for calculations and rounds only the visible display and workbook cells.\u003c\/p\u003e\n        \u003cp\u003eMarkup can rise much faster than margin. For example, a 50% margin equals a 100% markup because the selling price is twice cost. An 80% margin equals a 400% markup. This nonlinear relationship is why changing a target margin near 100% can produce a very large required price. A concise explanation of the distinction is also available in Investopedia’s \u003ca href=\"https:\/\/www.investopedia.com\/terms\/g\/grossmargin.asp\" target=\"_blank\" rel=\"noopener noreferrer\"\u003egross margin overview\u003c\/a\u003e.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mrg-education-section\"\u003e\n        \u003ch2\u003eHow should you interpret every output?\u003c\/h2\u003e\n        \u003cp\u003e\u003cstrong\u003eRevenue required\u003c\/strong\u003e is the selling price or sales total needed for the selected assumptions. \u003cstrong\u003eGross profit\u003c\/strong\u003e is the amount remaining after direct cost. \u003cstrong\u003eGross margin\u003c\/strong\u003e expresses that profit relative to revenue, making it easier to compare products of different sizes. \u003cstrong\u003eMarkup on cost\u003c\/strong\u003e shows profit relative to cost and is often used when applying a pricing multiplier. \u003cstrong\u003eCost share\u003c\/strong\u003e is the portion of each sales dollar consumed by direct cost. \u003cstrong\u003ePrice multiple\u003c\/strong\u003e shows how many times cost is embedded in the selling price. \u003cstrong\u003eProfit per $100 sales\u003c\/strong\u003e converts margin into an intuitive dollar amount.\u003c\/p\u003e\n        \u003cp\u003eA zero margin means revenue exactly equals cost. A negative margin means the sale does not recover direct cost. A high gross margin may provide more room for payroll, rent, marketing, support, depreciation, returns, and taxes, but it does not automatically imply a high net margin. The \u003ca href=\"https:\/\/www.sba.gov\/business-guide\/manage-your-business\/manage-your-finances\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eU.S. Small Business Administration finance guide\n\u003c\/a\u003e offers practical context for monitoring broader business finances beyond a single gross-margin calculation.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mrg-education-section\"\u003e\n        \u003ch2\u003eWhat do the chart and tables show?\u003c\/h2\u003e\n        \u003cp\u003eThe revenue-composition donut divides current revenue into cost and positive gross profit. Its legend and table use the same calculated amounts and percentages. In a loss scenario, the donut is intentionally replaced by a compact message because a negative category cannot be represented honestly as a share of a positive whole; the result cards and tables still show the loss.\u003c\/p\u003e\n        \u003cp\u003eThe margin-sensitivity line chart holds current cost constant and compares required revenue with gross profit at target margins from 0% to 80%. The curve becomes steeper as target margin rises. The table beneath the chart lists exact values and markup for every point, which is useful when selecting a practical target rather than relying only on a visual estimate. Download Excel exports the current inputs, results, composition, sensitivity rows, and calculation notes into a real workbook for review or further modeling.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"mrg-education-section\"\u003e\n        \u003ch2\u003eWhat mistakes should you avoid?\u003c\/h2\u003e\n        \u003cul\u003e\n          \u003cli\u003eDo not mix per-unit cost with monthly or annual revenue. Keep every figure on the same scope and time basis.\u003c\/li\u003e\n          \u003cli\u003eDo not use markup and margin as interchangeable percentages; they have different denominators.\u003c\/li\u003e\n          \u003cli\u003eDo not omit freight, packaging, merchant fees, or labor when those items are genuinely direct costs for the decision being analyzed.\u003c\/li\u003e\n          \u003cli\u003eDo not treat gross margin as net profit. Indirect operating expenses still need to be covered.\u003c\/li\u003e\n          \u003cli\u003eDo not assume a mathematically possible price is commercially achievable. Test customer demand, competitor positioning, discounts, returns, and channel fees separately.\u003c\/li\u003e\n        \u003c\/ul\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":49909489008883,"sku":"margin","price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0522\/6191\/2762\/files\/margin.webp?v=1783935564","url":"https:\/\/financialmodelslab.com\/products\/margin","provider":"Financial Models Lab","version":"1.0","type":"link"}