{"product_id":"margin-and-vat","title":"Margin and VAT Calculator","description":"\u003cstyle\u003e\n.mv-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  border: 1px solid var(--border);\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);\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.mv-calculator,\n.mv-calculator *,\n.mv-calculator *::before,\n.mv-calculator *::after {\n  box-sizing: border-box;\n}\n.mv-calculator * {\n  min-width: 0;\n}\n.mv-calculator button,\n.mv-calculator input,\n.mv-calculator select {\n  font: inherit;\n}\n.mv-calculator button,\n.mv-calculator input,\n.mv-calculator select,\n.mv-calculator a {\n  -webkit-tap-highlight-color: transparent;\n}\n.mv-calculator button:focus-visible,\n.mv-calculator input:focus-visible,\n.mv-calculator select:focus-visible,\n.mv-calculator a:focus-visible,\n.mv-calculator summary:focus-visible {\n  outline: 3px solid rgba(29, 78, 216, .32);\n  outline-offset: 2px;\n}\n.mv-header {\n  padding: 24px;\n  border-bottom: 1px solid var(--border);\n  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);\n}\n.mv-header h2 {\n  margin: 0;\n  color: var(--ink);\n  font-size: 24px;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.mv-subtitle {\n  max-width: 760px;\n  margin: 8px 0 0;\n  color: var(--muted);\n}\n.mv-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 16px;\n}\n.mv-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 32px;\n  padding: 4px 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: 500;\n}\n.mv-pill strong {\n  color: var(--ink);\n  font-variant-numeric: tabular-nums;\n}\n.mv-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--border);\n  background: var(--surface);\n}\n.mv-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  min-height: 44px;\n  padding: 12px 18px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 650;\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;\n}\n.mv-button:hover {\n  box-shadow: 0 2px 5px rgba(15, 23, 42, .12);\n}\n.mv-button:active {\n  transform: translateY(1px);\n}\n.mv-download {\n  background: var(--accent);\n  color: #ffffff;\n}\n.mv-download:hover,\n.mv-download:active {\n  background: var(--accent-hover);\n}\n.mv-download svg {\n  width: 18px;\n  height: 18px;\n  flex: 0 0 auto;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.mv-reset {\n  border-color: #cbd5e1;\n  background: #ffffff;\n  color: var(--ink);\n}\n.mv-reset:hover {\n  background: var(--tint);\n  border-color: #94a3b8;\n}\n.mv-workspace {\n  display: grid;\n  gap: 24px;\n  padding: 24px;\n  background: var(--tint);\n}\n.mv-panel,\n.mv-section {\n  min-width: 0;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--surface);\n  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);\n}\n.mv-panel-inner,\n.mv-section-inner {\n  padding: 20px;\n}\n.mv-panel-heading,\n.mv-section-heading {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 650;\n  line-height: 1.35;\n}\n.mv-panel-intro,\n.mv-section-intro {\n  margin: 6px 0 0;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mv-fields {\n  display: grid;\n  gap: 16px;\n  margin-top: 20px;\n}\n.mv-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.mv-field label {\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 600;\n}\n.mv-control {\n  width: 100%;\n  min-height: 44px;\n  padding: 10px 12px;\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  background: #ffffff;\n  color: var(--ink);\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 1.3;\n  font-variant-numeric: tabular-nums;\n}\n.mv-control:hover {\n  border-color: #94a3b8;\n}\n.mv-control[aria-invalid=\"true\"] {\n  border-color: #b91c1c;\n  box-shadow: 0 0 0 1px #b91c1c;\n}\n.mv-helper {\n  min-height: 20px;\n  margin: 0;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.45;\n}\n.mv-error {\n  min-height: 20px;\n  margin: 0;\n  color: #991b1b;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.45;\n}\n.mv-results-primary {\n  margin-top: 20px;\n  padding: 18px;\n  border: 1px solid #bfdbfe;\n  border-radius: 8px;\n  background: #eff6ff;\n}\n.mv-results-primary-label {\n  margin: 0;\n  color: #1e3a8a;\n  font-size: 13px;\n  font-weight: 650;\n}\n.mv-results-primary-value {\n  margin: 4px 0 0;\n  color: #172554;\n  font-size: 30px;\n  font-weight: 700;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n  font-variant-numeric: tabular-nums;\n}\n.mv-results-primary-note {\n  margin: 6px 0 0;\n  color: #334155;\n  font-size: 13px;\n  font-weight: 500;\n}\n.mv-result-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n  margin-top: 12px;\n}\n.mv-result-card {\n  padding: 14px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: #ffffff;\n}\n.mv-result-label {\n  margin: 0;\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 600;\n}\n.mv-result-value {\n  margin: 4px 0 0;\n  color: var(--ink);\n  font-size: 20px;\n  font-weight: 700;\n  line-height: 1.25;\n  overflow-wrap: anywhere;\n  font-variant-numeric: tabular-nums;\n}\n.mv-live {\n  margin-top: 14px;\n  padding: 10px 12px;\n  border-left: 3px solid var(--primary);\n  background: var(--tint);\n  color: var(--muted);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mv-content {\n  display: grid;\n  gap: 24px;\n  padding: 24px;\n}\n.mv-chart-card.mv-safe-stack .mv-chart-cluster {\n  grid-template-columns: minmax(0, 1fr);\n  justify-items: center;\n  row-gap: 24px;\n}\n.mv-chart-card.mv-safe-stack .mv-chart-legend {\n  width: min(100%, 420px);\n}\n.mv-chart-card.mv-safe-stack .mv-chart-caption {\n  margin-top: 20px;\n}\n.mv-chart-cluster {\n  display: grid;\n  grid-template-columns: minmax(240px, 320px) minmax(0, 360px);\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n  max-width: 760px;\n  margin: 20px auto 0;\n}\n.mv-chart-visual {\n  display: grid;\n  place-items: center;\n  width: min(100%, 320px);\n  margin: 0 auto;\n}\n.mv-chart-svg {\n  display: block;\n  width: min(100%, 320px);\n  height: auto;\n  overflow: visible;\n}\n.mv-chart-track {\n  fill: none;\n  stroke: #e2e8f0;\n  stroke-width: 44;\n}\n.mv-chart-segment {\n  fill: none;\n  stroke-width: 44;\n  stroke-linecap: butt;\n  transform: rotate(-90deg);\n  transform-origin: 160px 160px;\n}\n.mv-chart-center-label {\n  fill: var(--muted);\n  font-size: 13px;\n  font-weight: 600;\n  text-anchor: middle;\n}\n.mv-chart-center-value {\n  fill: var(--ink);\n  font-size: 23px;\n  font-weight: 700;\n  text-anchor: middle;\n  font-variant-numeric: tabular-nums;\n}\n.mv-chart-side {\n  display: grid;\n  align-content: center;\n  width: min(100%, 360px);\n}\n.mv-chart-legend {\n  display: grid;\n  gap: 10px;\n  width: max-content;\n  max-width: 100%;\n}\n.mv-legend-row {\n  display: grid;\n  grid-template-columns: 12px minmax(90px, max-content) max-content max-content;\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n  max-width: 100%;\n  color: var(--ink);\n  font-size: 13px;\n  font-weight: 500;\n}\n.mv-legend-swatch {\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n}\n.mv-legend-name {\n  color: var(--ink);\n}\n.mv-legend-value,\n.mv-legend-percent {\n  color: var(--ink);\n  font-variant-numeric: tabular-nums;\n}\n.mv-legend-percent {\n  color: var(--muted);\n}\n.mv-chart-empty {\n  display: none;\n  width: 100%;\n  margin-top: 16px;\n  padding: 14px;\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.mv-chart-caption {\n  margin-top: 20px;\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.mv-table-card.mv-safe-table-stack .mv-table-note {\n  margin-top: 20px;\n}\n.mv-table-wrap {\n  width: 100%;\n  margin-top: 18px;\n  overflow-x: auto;\n  overflow-y: visible;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n}\n.mv-table {\n  width: 100%;\n  min-width: 620px;\n  border-collapse: collapse;\n  color: var(--ink);\n  font-size: 14px;\n}\n.mv-table th,\n.mv-table td {\n  padding: 11px 12px;\n  border-bottom: 1px solid var(--border);\n  text-align: left;\n  vertical-align: top;\n}\n.mv-table th {\n  background: #172554;\n  color: #ffffff;\n  font-size: 13px;\n  font-weight: 650;\n}\n.mv-table td:nth-child(2) {\n  text-align: right;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n.mv-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.mv-table tbody tr:hover td {\n  background: #fafafa;\n}\n.mv-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.mv-education {\n  padding: 24px;\n  border-top: 1px solid var(--border);\n  background: #ffffff;\n}\n.mv-education-inner {\n  max-width: 900px;\n  margin: 0 auto;\n}\n.mv-education h2 {\n  margin: 32px 0 10px;\n  color: var(--ink);\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.3;\n}\n.mv-education h2:first-child {\n  margin-top: 0;\n}\n.mv-education h3 {\n  margin: 22px 0 8px;\n  color: var(--ink);\n  font-size: 18px;\n  font-weight: 650;\n  line-height: 1.35;\n}\n.mv-education p {\n  margin: 0 0 14px;\n  color: #334155;\n}\n.mv-education ul {\n  margin: 0 0 16px;\n  padding-left: 22px;\n}\n.mv-education li {\n  margin: 6px 0;\n  color: #334155;\n}\n.mv-education a {\n  color: var(--primary);\n  font-weight: 600;\n  text-underline-offset: 2px;\n}\n.mv-education a:hover {\n  text-decoration-thickness: 2px;\n}\n.mv-formula {\n  display: block;\n  margin: 12px 0;\n  padding: 12px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  background: var(--tint);\n  color: var(--ink);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 13px;\n  font-weight: 600;\n  overflow-wrap: anywhere;\n}\n.mv-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@container (min-width: 900px) {\n  .mv-workspace {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    align-items: start;\n  }\n}\n@container (max-width: 639px) {\n  .mv-header,\n  .mv-toolbar,\n  .mv-workspace,\n  .mv-content,\n  .mv-education {\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n  .mv-panel-inner,\n  .mv-section-inner {\n    padding: 16px;\n  }\n  .mv-result-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .mv-chart-cluster {\n    grid-template-columns: minmax(0, 1fr);\n    justify-items: center;\n    row-gap: 24px;\n  }\n  .mv-chart-side {\n    width: min(100%, 420px);\n  }\n  .mv-chart-legend {\n    width: 100%;\n  }\n  .mv-legend-row {\n    grid-template-columns: 12px minmax(74px, max-content) max-content max-content;\n    column-gap: 8px;\n  }\n  .mv-chart-caption,\n  .mv-table-note {\n    margin-top: 16px;\n  }\n}\n@container (max-width: 359px) {\n  .mv-toolbar .mv-button {\n    width: 100%;\n  }\n  .mv-legend-row {\n    grid-template-columns: 12px minmax(0, 1fr) max-content;\n  }\n  .mv-legend-percent {\n    grid-column: 2 \/ 4;\n    padding-left: 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .mv-calculator *,\n  .mv-calculator *::before,\n  .mv-calculator *::after {\n    scroll-behavior: auto !important;\n    transition: none !important;\n  }\n}\n\u003c\/style\u003e\n\u003cdiv class=\"mv-calculator\" data-calculator-root\u003e\n  \u003cheader class=\"mv-header\"\u003e\n    \u003ch2\u003eMargin and VAT Calculator\u003c\/h2\u003e\n    \u003cp class=\"mv-subtitle\"\u003eSet a profitable selling price, convert margin to markup, and separate VAT from the revenue you keep.\u003c\/p\u003e\n    \u003cdiv class=\"mv-pills\" aria-label=\"Live pricing summary\"\u003e\n      \u003cspan class=\"mv-pill\"\u003eNet price \u003cstrong data-mv-pill=\"netPrice\"\u003e$166.67\u003c\/strong\u003e\u003c\/span\u003e\n      \u003cspan class=\"mv-pill\"\u003eGross price \u003cstrong data-mv-pill=\"grossPrice\"\u003e$200.00\u003c\/strong\u003e\u003c\/span\u003e\n      \u003cspan class=\"mv-pill\"\u003eProfit \u003cstrong data-mv-pill=\"profit\"\u003e$66.67\u003c\/strong\u003e\u003c\/span\u003e\n      \u003cspan class=\"mv-pill\"\u003eVAT collected \u003cstrong data-mv-pill=\"vatAmount\"\u003e$33.33\u003c\/strong\u003e\u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/header\u003e\n\n  \u003cdiv class=\"mv-toolbar\" aria-label=\"Calculator actions\"\u003e\n    \u003cbutton class=\"mv-button mv-download\" type=\"button\" data-mv-action=\"download\"\u003e\n      \u003csvg viewbox=\"0 0 24 24\" aria-hidden=\"true\"\u003e\u003cpath d=\"M12 3v12\"\u003e\u003c\/path\u003e\u003cpath d=\"m7 10 5 5 5-5\"\u003e\u003c\/path\u003e\u003cpath d=\"M5 21h14\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n      \u003cspan\u003eDownload Excel\u003c\/span\u003e\n    \u003c\/button\u003e\n    \u003cbutton class=\"mv-button mv-reset\" type=\"button\" data-mv-action=\"reset\"\u003eReset\u003c\/button\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"mv-workspace\"\u003e\n    \u003csection class=\"mv-panel\" aria-labelledby=\"mv-inputs-heading\"\u003e\n      \u003cdiv class=\"mv-panel-inner\"\u003e\n        \u003ch3 class=\"mv-panel-heading\" id=\"mv-inputs-heading\"\u003ePricing inputs\u003c\/h3\u003e\n        \u003cp class=\"mv-panel-intro\"\u003eUse net or VAT-inclusive cost, then choose the pricing target you already know.\u003c\/p\u003e\n        \u003cdiv class=\"mv-fields\"\u003e\n          \u003cdiv class=\"mv-field\"\u003e\n            \u003clabel for=\"mv-vat-rate\"\u003eVAT rate\u003c\/label\u003e\n            \u003cinput class=\"mv-control\" id=\"mv-vat-rate\" data-mv-input=\"vatRate\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" value=\"20.00%\" aria-describedby=\"mv-vat-help mv-vat-error\"\u003e\n            \u003cp class=\"mv-helper\" id=\"mv-vat-help\"\u003eEnter the tax rate applied to the selling price.\u003c\/p\u003e\n            \u003cp class=\"mv-error\" id=\"mv-vat-error\" data-mv-error=\"vatRate\" aria-live=\"polite\"\u003e\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mv-field\"\u003e\n            \u003clabel for=\"mv-cost-basis\"\u003eCost basis\u003c\/label\u003e\n            \u003cselect class=\"mv-control\" id=\"mv-cost-basis\" data-mv-input=\"costBasis\" aria-describedby=\"mv-cost-basis-help\"\u003e\n              \u003coption value=\"net\"\u003eNet cost, excluding VAT\u003c\/option\u003e\n              \u003coption value=\"gross\"\u003eGross cost, including VAT\u003c\/option\u003e\n            \u003c\/select\u003e\n            \u003cp class=\"mv-helper\" id=\"mv-cost-basis-help\"\u003eSwitching basis converts the current amount rather than relabeling it.\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mv-field\"\u003e\n            \u003clabel for=\"mv-cost-amount\"\u003eCost amount\u003c\/label\u003e\n            \u003cinput class=\"mv-control\" id=\"mv-cost-amount\" data-mv-input=\"costAmount\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" value=\"$100.00\" aria-describedby=\"mv-cost-help mv-cost-error\"\u003e\n            \u003cp class=\"mv-helper\" id=\"mv-cost-help\"\u003eYour product or service cost in U.S. dollars.\u003c\/p\u003e\n            \u003cp class=\"mv-error\" id=\"mv-cost-error\" data-mv-error=\"costAmount\" aria-live=\"polite\"\u003e\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mv-field\"\u003e\n            \u003clabel for=\"mv-solve-by\"\u003eSolve using\u003c\/label\u003e\n            \u003cselect class=\"mv-control\" id=\"mv-solve-by\" data-mv-input=\"solveBy\" aria-describedby=\"mv-solve-help\"\u003e\n              \u003coption value=\"margin\"\u003eTarget margin\u003c\/option\u003e\n              \u003coption value=\"markup\"\u003eTarget markup\u003c\/option\u003e\n              \u003coption value=\"netPrice\"\u003eKnown net selling price\u003c\/option\u003e\n              \u003coption value=\"grossPrice\"\u003eKnown gross selling price\u003c\/option\u003e\n              \u003coption value=\"profit\"\u003eTarget profit\u003c\/option\u003e\n            \u003c\/select\u003e\n            \u003cp class=\"mv-helper\" id=\"mv-solve-help\"\u003eChanging the target preserves the current economics where possible.\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"mv-field\"\u003e\n            \u003clabel for=\"mv-target-value\" data-mv-label=\"target\"\u003eTarget margin\u003c\/label\u003e\n            \u003cinput class=\"mv-control\" id=\"mv-target-value\" data-mv-input=\"targetValue\" type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" value=\"40.00%\" aria-describedby=\"mv-target-help mv-target-error\"\u003e\n            \u003cp class=\"mv-helper\" id=\"mv-target-help\" data-mv-helper=\"target\"\u003eProfit as a share of the net selling price. Must be below 100%.\u003c\/p\u003e\n            \u003cp class=\"mv-error\" id=\"mv-target-error\" data-mv-error=\"targetValue\" aria-live=\"polite\"\u003e\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"mv-panel\" aria-labelledby=\"mv-results-heading\"\u003e\n      \u003cdiv class=\"mv-panel-inner\"\u003e\n        \u003ch3 class=\"mv-panel-heading\" id=\"mv-results-heading\"\u003eLive results\u003c\/h3\u003e\n        \u003cp class=\"mv-panel-intro\"\u003eVAT is separated from net revenue and is not counted as profit.\u003c\/p\u003e\n        \u003cdiv class=\"mv-results-primary\"\u003e\n          \u003cp class=\"mv-results-primary-label\"\u003eCustomer price including VAT\u003c\/p\u003e\n          \u003cp class=\"mv-results-primary-value\" data-mv-output=\"grossPrice\"\u003e$200.00\u003c\/p\u003e\n          \u003cp class=\"mv-results-primary-note\" data-mv-output=\"primaryNote\"\u003eBuilt from a $166.67 net price plus $33.33 VAT.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mv-result-grid\"\u003e\n          \u003cdiv class=\"mv-result-card\"\u003e\n            \u003cp class=\"mv-result-label\"\u003eNet selling price\u003c\/p\u003e\n            \u003cp class=\"mv-result-value\" data-mv-output=\"netPrice\"\u003e$166.67\u003c\/p\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mv-result-card\"\u003e\n            \u003cp class=\"mv-result-label\"\u003eProfit\u003c\/p\u003e\n            \u003cp class=\"mv-result-value\" data-mv-output=\"profit\"\u003e$66.67\u003c\/p\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mv-result-card\"\u003e\n            \u003cp class=\"mv-result-label\"\u003eMargin\u003c\/p\u003e\n            \u003cp class=\"mv-result-value\" data-mv-output=\"margin\"\u003e40.00%\u003c\/p\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mv-result-card\"\u003e\n            \u003cp class=\"mv-result-label\"\u003eMarkup\u003c\/p\u003e\n            \u003cp class=\"mv-result-value\" data-mv-output=\"markup\"\u003e66.67%\u003c\/p\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mv-result-card\"\u003e\n            \u003cp class=\"mv-result-label\"\u003eGross cost\u003c\/p\u003e\n            \u003cp class=\"mv-result-value\" data-mv-output=\"grossCost\"\u003e$120.00\u003c\/p\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mv-result-card\"\u003e\n            \u003cp class=\"mv-result-label\"\u003eVAT collected\u003c\/p\u003e\n            \u003cp class=\"mv-result-value\" data-mv-output=\"vatAmount\"\u003e$33.33\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mv-live\" aria-live=\"polite\" aria-atomic=\"true\" data-mv-live\u003eAt a 40.00% margin, each $166.67 net sale contributes $66.67 before operating expenses.\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n  \u003c\/div\u003e\n\n  \u003cmain class=\"mv-content\"\u003e\n    \u003csection class=\"mv-section mv-chart-card\" data-mv-chart-card aria-labelledby=\"mv-chart-heading\"\u003e\n      \u003cdiv class=\"mv-section-inner\"\u003e\n        \u003ch3 class=\"mv-section-heading\" id=\"mv-chart-heading\"\u003eGross price composition\u003c\/h3\u003e\n        \u003cp class=\"mv-section-intro\" data-mv-chart-intro\u003eThe customer price is split into net cost, profit, and VAT.\u003c\/p\u003e\n        \u003cdiv class=\"mv-chart-empty\" data-mv-chart-empty\u003eEnter values above to see the price composition.\u003c\/div\u003e\n        \u003cdiv class=\"mv-chart-cluster\" data-mv-chart-cluster\u003e\n          \u003cdiv class=\"mv-chart-visual\" data-mv-chart-visual\u003e\n            \u003csvg class=\"mv-chart-svg\" data-mv-chart-svg viewbox=\"0 0 320 320\" role=\"img\" aria-labelledby=\"mv-chart-title mv-chart-desc\"\u003e\n              \u003ctitle id=\"mv-chart-title\"\u003eGross price composition donut chart\u003c\/title\u003e\n              \u003cdesc id=\"mv-chart-desc\" data-mv-chart-desc\u003eNet cost $100.00, profit $66.67, and VAT $33.33.\u003c\/desc\u003e\n              \u003ccircle class=\"mv-chart-track\" cx=\"160\" cy=\"160\" r=\"108\"\u003e\u003c\/circle\u003e\n              \u003cg data-mv-chart-segments\u003e\u003c\/g\u003e\n              \u003ctext class=\"mv-chart-center-label\" x=\"160\" y=\"151\"\u003eGross price\u003c\/text\u003e\n              \u003ctext class=\"mv-chart-center-value\" x=\"160\" y=\"181\" data-mv-chart-total\u003e$200.00\u003c\/text\u003e\n            \u003c\/svg\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"mv-chart-side\"\u003e\n            \u003cdiv class=\"mv-chart-legend\" data-mv-chart-legend aria-label=\"Price composition legend\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"mv-chart-caption\" data-mv-chart-caption\u003eVAT represents 16.67% of the customer price, while profit represents 33.33%.\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cp class=\"mv-sr-only\" data-mv-chart-summary\u003eGross price $200.00: net cost $100.00, profit $66.67, VAT $33.33.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n\n    \u003csection class=\"mv-section mv-table-card\" data-mv-table-card aria-labelledby=\"mv-table-heading\"\u003e\n      \u003cdiv class=\"mv-section-inner\"\u003e\n        \u003ch3 class=\"mv-section-heading\" id=\"mv-table-heading\"\u003ePricing detail\u003c\/h3\u003e\n        \u003cp class=\"mv-section-intro\"\u003eEvery figure below comes from the same calculation model used by the chart and Excel export.\u003c\/p\u003e\n        \u003cdiv class=\"mv-table-wrap\" data-mv-table-wrap\u003e\n          \u003ctable class=\"mv-table\"\u003e\n            \u003cthead\u003e\n              \u003ctr\u003e\n                \u003cth scope=\"col\"\u003eMetric\u003c\/th\u003e\n                \u003cth scope=\"col\"\u003eValue\u003c\/th\u003e\n                \u003cth scope=\"col\"\u003eInterpretation\u003c\/th\u003e\n              \u003c\/tr\u003e\n            \u003c\/thead\u003e\n            \u003ctbody data-mv-table-body\u003e\u003c\/tbody\u003e\n          \u003c\/table\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mv-table-note\" data-mv-table-note\u003eProfit is measured before operating expenses and income tax. VAT is shown separately because it is normally collected for the tax authority rather than retained as revenue.\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/section\u003e\n  \u003c\/main\u003e\n\n  \u003csection class=\"mv-education\"\u003e\n    \u003cdiv class=\"mv-education-inner\"\u003e\n      \u003ch2\u003eWhat does this margin and VAT calculator estimate?\u003c\/h2\u003e\n      \u003cp\u003eThis calculator connects seven pricing figures: VAT, net cost, gross cost, margin, markup, net selling price, gross selling price, and profit. It is designed for product pricing, service quotes, ecommerce catalog checks, and quick scenario analysis. The core distinction is that margin measures profit against the selling price, while markup measures profit against cost. VAT is then added after the net selling price is determined.\u003c\/p\u003e\n      \u003cp\u003eThe tool uses U.S. dollars as the display currency, but the arithmetic works with any currency because the relationships are proportional. VAT rules themselves are jurisdiction-specific. Review the applicable guidance from the \u003ca href=\"https:\/\/taxation-customs.ec.europa.eu\/taxation\/vat_en\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEuropean Commission\u003c\/a\u003e, the \u003ca href=\"https:\/\/www.gov.uk\/vat-rates\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eUK government VAT rate guidance\u003c\/a\u003e, or your local tax authority before issuing invoices.\u003c\/p\u003e\n\n      \u003ch2\u003eHow should each input be used?\u003c\/h2\u003e\n      \u003ch3\u003eVAT rate\u003c\/h3\u003e\n      \u003cp\u003eEnter the percentage applied to the taxable selling price. A higher VAT rate increases the customer-facing gross price but does not change the net profit in this model. Use 0% when VAT does not apply. The field is required for a VAT-inclusive result, accepts symbols and commas, and must not be negative.\u003c\/p\u003e\n\n      \u003ch3\u003eCost basis and cost amount\u003c\/h3\u003e\n      \u003cp\u003eChoose \u003cstrong\u003eNet cost\u003c\/strong\u003e when your supplier or internal cost excludes VAT. Choose \u003cstrong\u003eGross cost\u003c\/strong\u003e when the entered cost already includes VAT. Switching the basis converts the amount so the underlying net cost stays consistent. The cost amount should include the direct costs you want the gross profit calculation to cover, such as purchase cost, direct labor, or direct materials. Omitting freight, payment fees, packaging, or other variable costs can make the apparent margin too optimistic.\u003c\/p\u003e\n\n      \u003ch3\u003eSolve using\u003c\/h3\u003e\n      \u003cp\u003eSelect the pricing fact you already know. \u003cstrong\u003eTarget margin\u003c\/strong\u003e is useful when a business plans around gross margin. \u003cstrong\u003eTarget markup\u003c\/strong\u003e is common in wholesale and catalog pricing. \u003cstrong\u003eKnown net selling price\u003c\/strong\u003e and \u003cstrong\u003eknown gross selling price\u003c\/strong\u003e analyze an existing price. \u003cstrong\u003eTarget profit\u003c\/strong\u003e adds a desired currency amount to net cost. When you change this selector, the calculator converts the current result into the newly selected measure instead of discarding the economics.\u003c\/p\u003e\n\n      \u003ch3\u003eTarget value\u003c\/h3\u003e\n      \u003cp\u003eThe target field changes units with the selected method. Margin and markup use percentages; net price, gross price, and profit use currency. A margin must remain below 100% because a 100% margin would require a zero cost or an infinite selling price. Markup can differ sharply from margin: a 40% margin corresponds to a 66.67% markup. Negative profit or markup can represent a loss scenario, but a negative selling price is rejected.\u003c\/p\u003e\n\n      \u003ch2\u003eHow are margin, markup, VAT, and profit calculated?\u003c\/h2\u003e\n      \u003cspan class=\"mv-formula\"\u003eProfit = Net selling price − Net cost\u003c\/span\u003e\n      \u003cspan class=\"mv-formula\"\u003eMargin = Profit ÷ Net selling price\u003c\/span\u003e\n      \u003cspan class=\"mv-formula\"\u003eMarkup = Profit ÷ Net cost\u003c\/span\u003e\n      \u003cspan class=\"mv-formula\"\u003eGross selling price = Net selling price × (1 + VAT rate)\u003c\/span\u003e\n      \u003cp\u003eWhen margin is the target, the calculator rearranges the margin equation: net selling price equals net cost divided by one minus the margin. When markup is the target, net selling price equals net cost multiplied by one plus markup. If a gross price is supplied, VAT is removed by dividing by one plus the VAT rate. This distinction follows standard percentage mathematics; a concise overview of gross margin is also available from \u003ca href=\"https:\/\/www.investopedia.com\/terms\/g\/grossmargin.asp\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eInvestopedia\u003c\/a\u003e.\u003c\/p\u003e\n\n      \u003ch2\u003eHow should the results be interpreted?\u003c\/h2\u003e\n      \u003cp\u003e\u003cstrong\u003eNet selling price\u003c\/strong\u003e is the revenue before VAT. \u003cstrong\u003eGross selling price\u003c\/strong\u003e is the amount the customer pays after VAT. \u003cstrong\u003eVAT collected\u003c\/strong\u003e is the difference between those two prices. \u003cstrong\u003eProfit\u003c\/strong\u003e is net selling price minus net cost; it is gross profit, not final business profit. \u003cstrong\u003eMargin\u003c\/strong\u003e shows the share of net revenue remaining after the modeled cost. \u003cstrong\u003eMarkup\u003c\/strong\u003e shows how far the price sits above cost. \u003cstrong\u003eGross cost\u003c\/strong\u003e is the VAT-inclusive equivalent of net cost and can help reconcile supplier invoices.\u003c\/p\u003e\n      \u003cp\u003eA zero margin means the net selling price equals net cost. A negative profit indicates the selling price is below cost. Very high margins can be mathematically valid but commercially unrealistic if competitors, demand, returns, discounts, and overhead are ignored. The chart displays the positive composition of the gross price: net cost, profit, and VAT. If the scenario has no drawable positive profit, the visual is replaced with a compact message rather than a misleading chart.\u003c\/p\u003e\n\n      \u003ch2\u003eWhat mistakes should be avoided?\u003c\/h2\u003e\n      \u003cul\u003e\n        \u003cli\u003eDo not treat a 30% markup as a 30% margin; the bases are different.\u003c\/li\u003e\n        \u003cli\u003eDo not count VAT as revenue or profit when it is collected for a tax authority.\u003c\/li\u003e\n        \u003cli\u003eDo not enter a gross cost as net cost, because that double-counts VAT.\u003c\/li\u003e\n        \u003cli\u003eDo not exclude relevant variable costs merely to make the margin look stronger.\u003c\/li\u003e\n        \u003cli\u003eDo not assume this general calculator covers specialist VAT margin schemes, exemptions, reverse charges, or cross-border rules.\u003c\/li\u003e\n      \u003c\/ul\u003e\n      \u003cp\u003eUse the Excel export to retain the current assumptions, output breakdown, and scenario notes. For broader consumption-tax context, the \u003ca href=\"https:\/\/www.oecd.org\/tax\/consumption\/consumption-tax-trends-19990979.htm\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eOECD consumption tax resources\u003c\/a\u003e explain why rates and structures vary across countries. This calculator is educational and operational; it is not personalized tax, legal, or accounting advice.\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\u003c\/div\u003e","brand":"FinancialModelsLab","offers":[{"title":"Default Title","offer_id":49909489139955,"sku":"margin-and-vat","price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0522\/6191\/2762\/files\/margin-and-vat.webp?v=1783935568","url":"https:\/\/financialmodelslab.com\/products\/margin-and-vat","provider":"Financial Models Lab","version":"1.0","type":"link"}