:root{
  --mroi-blue:#1269ad;
  --mroi-blue-dark:#0d578f;
  --mroi-blue-soft:#eef6fb;
  --mroi-ink:#18323a;
  --mroi-muted:#64747b;
  --mroi-line:#dfe8ec;
  --mroi-panel:#f7fafb;
  --mroi-good:#14795a;
  --mroi-good-soft:#eaf7f1;
  --mroi-warn:#a66600;
  --mroi-warn-soft:#fff7e5;
  --mroi-bad:#b13b3b;
  --mroi-bad-soft:#fff0f0;
  --mroi-shadow:0 18px 45px rgba(21,49,59,.08);
}

.mroi-hero{
  padding:58px 0 38px;
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  border-bottom:1px solid #edf2f4;
}

.mroi-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  color:#718188;
  font-size:13px;
  font-weight:750;
}

.mroi-breadcrumb a{color:var(--mroi-blue)}

.mroi-hero-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:46px;
}

.mroi-title-wrap{max-width:790px}

.mroi-kicker,
.mroi-step{
  display:block;
  margin-bottom:8px;
  color:var(--mroi-blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mroi-title-wrap h1{
  margin:0 0 14px;
  font-size:clamp(38px,5vw,61px);
  line-height:1.04;
  letter-spacing:-.05em;
}

.mroi-title-wrap p{
  max-width:760px;
  margin:0;
  color:var(--mroi-muted);
  font-size:18px;
}

.mroi-mode-switch{
  display:flex;
  padding:5px;
  border:1px solid var(--mroi-line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 9px 28px rgba(21,49,59,.06);
}

.mroi-mode-btn{
  min-width:142px;
  padding:13px 16px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#65777f;
  text-align:left;
  cursor:pointer;
}

.mroi-mode-btn strong,
.mroi-mode-btn span{display:block}
.mroi-mode-btn strong{font-size:15px}
.mroi-mode-btn span{margin-top:1px;font-size:11px;font-weight:700}
.mroi-mode-btn.is-active{background:var(--mroi-blue);color:#fff;box-shadow:0 7px 17px rgba(18,105,173,.2)}

.mroi-tool-section{padding:42px 0 76px;background:#f8fafb}
.mroi-mode-panel{display:none}
.mroi-mode-panel.is-active{display:block}
.mroi-mode-panel[hidden]{display:none!important}

.mroi-tool-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:22px;
  align-items:start;
}

.mroi-panel{
  padding:27px;
  border:1px solid var(--mroi-line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--mroi-shadow);
}

.mroi-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}

.mroi-panel-head h2{
  margin:0;
  font-size:23px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.mroi-live-badge,
.mroi-table-note{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:var(--mroi-blue-soft);
  color:var(--mroi-blue);
  font-size:11px;
  font-weight:850;
}

.mroi-fields{display:grid;gap:20px}
.mroi-field-row{display:grid;gap:15px}
.mroi-field-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mroi-field-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.mroi-field{display:block;min-width:0}
.mroi-field>span{display:block;margin-bottom:7px;color:#38515a;font-size:13px;font-weight:800}
.mroi-field small{display:block;margin-top:6px;color:#7a898f;font-size:11px;line-height:1.45}

.mroi-money-input,
.mroi-percent-input,
.mroi-plain-input,
.mroi-mini-money{
  display:flex;
  align-items:center;
  min-width:0;
  border:1px solid #cbd9df;
  border-radius:11px;
  background:#fff;
  overflow:hidden;
  transition:.16s ease;
}

.mroi-money-input:focus-within,
.mroi-percent-input:focus-within,
.mroi-plain-input:focus-within,
.mroi-mini-money:focus-within{
  border-color:var(--mroi-blue);
  box-shadow:0 0 0 3px rgba(18,105,173,.08);
}

.mroi-money-input>span,
.mroi-mini-money>span{
  padding-left:13px;
  color:#73868e;
  font-weight:800;
}

.mroi-money-input input,
.mroi-percent-input input,
.mroi-plain-input input,
.mroi-mini-money input{
  width:100%;
  min-width:0;
  height:47px;
  padding:0 12px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--mroi-ink);
  font-weight:750;
}

.mroi-percent-input span,
.mroi-plain-input span{
  padding-right:12px;
  color:#73868e;
  font-size:12px;
  font-style:normal;
  font-weight:750;
  white-space:nowrap;
}

.mroi-formula-note{
  display:grid;
  gap:4px;
  margin-top:23px;
  padding:15px 17px;
  border:1px solid #d7e8f3;
  border-radius:13px;
  background:var(--mroi-blue-soft);
}
.mroi-formula-note strong{color:var(--mroi-blue);font-size:13px}
.mroi-formula-note span{color:#547181;font-size:12px;line-height:1.5}

.mroi-action-row{display:flex;gap:10px;margin-top:23px}
.mroi-btn{
  min-height:47px;
  padding:0 17px;
  border:1px solid transparent;
  border-radius:11px;
  font-weight:850;
  cursor:pointer;
}
.mroi-btn-primary{background:var(--mroi-blue);color:#fff;box-shadow:0 8px 20px rgba(18,105,173,.18)}
.mroi-btn-primary:hover{background:var(--mroi-blue-dark)}
.mroi-btn-secondary{border-color:var(--mroi-line);background:#fff;color:#4f666e}
.mroi-btn-secondary:hover{background:#f7fafb}

.mroi-print-btn,
.mroi-text-button{
  border:0;
  background:transparent;
  color:var(--mroi-blue);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.mroi-print-btn{padding:7px 9px;border:1px solid #d7e4e9;border-radius:8px;background:#fff}
.mroi-text-button{display:block;margin:18px auto 0;padding:5px}

.mroi-alert{
  margin-bottom:16px;
  padding:12px 14px;
  border:1px solid #f0caca;
  border-radius:11px;
  background:var(--mroi-bad-soft);
  color:var(--mroi-bad);
  font-size:13px;
  font-weight:750;
}

.mroi-primary-result{
  padding:22px;
  border:1px solid #d7e9f4;
  border-radius:17px;
  background:linear-gradient(135deg,#edf7fc,#f8fcfe);
}
.mroi-primary-result>span{display:block;color:#587586;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.055em}
.mroi-primary-result>strong{display:block;margin:4px 0 2px;color:var(--mroi-blue);font-size:44px;line-height:1;letter-spacing:-.045em}
.mroi-primary-result>small{color:#687c85;font-size:12px}
.mroi-primary-result.is-good{border-color:#cfeade;background:linear-gradient(135deg,#eaf7f1,#f8fcfa)}
.mroi-primary-result.is-good>strong{color:var(--mroi-good)}
.mroi-primary-result.is-warn{border-color:#f0dfb8;background:linear-gradient(135deg,#fff7e5,#fffdf8)}
.mroi-primary-result.is-warn>strong{color:var(--mroi-warn)}
.mroi-primary-result.is-bad{border-color:#f0caca;background:linear-gradient(135deg,#fff0f0,#fffafa)}
.mroi-primary-result.is-bad>strong{color:var(--mroi-bad)}

.mroi-metric-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.mroi-metric{
  min-width:0;
  padding:14px;
  border:1px solid var(--mroi-line);
  border-radius:12px;
  background:#fff;
}
.mroi-metric span{display:block;color:#73858c;font-size:11px;font-weight:750}
.mroi-metric strong{display:block;margin-top:3px;color:var(--mroi-ink);font-size:18px;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}

.mroi-budget-card{
  margin-top:12px;
  padding:17px;
  border:1px solid var(--mroi-line);
  border-radius:14px;
  background:#fbfcfd;
}
.mroi-budget-head,
.mroi-budget-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.mroi-budget-head span{display:block;color:#6c7f87;font-size:11px;font-weight:750}
.mroi-budget-head strong{display:block;margin-top:2px;font-size:25px;letter-spacing:-.03em}
.mroi-target-chip{padding:5px 8px!important;border-radius:999px;background:var(--mroi-blue-soft);color:var(--mroi-blue)!important;white-space:nowrap}
.mroi-budget-track{height:10px;margin:14px 0 9px;border-radius:999px;background:#e6edf0;overflow:hidden}
.mroi-budget-track span{display:block;width:70%;height:100%;border-radius:inherit;background:var(--mroi-blue);transition:width .2s ease,background .2s ease}
.mroi-budget-track span.is-over{background:var(--mroi-bad)}
.mroi-budget-foot{color:#718188;font-size:11px}
.mroi-budget-foot strong{color:#415a63}

.mroi-secondary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:12px;
  border:1px solid var(--mroi-line);
  border-radius:13px;
  overflow:hidden;
}
.mroi-secondary-grid>div{padding:13px 14px;background:#fff}
.mroi-secondary-grid>div:nth-child(even){border-left:1px solid var(--mroi-line)}
.mroi-secondary-grid>div:nth-child(n+3){border-top:1px solid var(--mroi-line)}
.mroi-secondary-grid span{display:block;color:#74868d;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.045em}
.mroi-secondary-grid strong{display:block;margin-top:3px;font-size:14px}

.mroi-takeaway{
  margin-top:13px;
  padding:15px 16px;
  border-left:4px solid var(--mroi-blue);
  border-radius:0 11px 11px 0;
  background:#f2f8fb;
  color:#45636f;
  font-size:13px;
  line-height:1.55;
}

.mroi-advanced-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
  gap:22px;
  align-items:start;
}
.mroi-sticky-results{position:sticky;top:106px}

.mroi-input-section{padding:23px 0;border-top:1px solid var(--mroi-line)}
.mroi-input-section:first-of-type{padding-top:0;border-top:0}
.mroi-input-section-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:17px}
.mroi-input-section-head>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--mroi-blue);color:#fff;font-size:12px;font-weight:900}
.mroi-input-section-head h3{margin:0;font-size:17px}
.mroi-input-section-head p{margin:3px 0 0;color:#75868d;font-size:12px}

.mroi-channel-editor{display:grid;gap:8px}
.mroi-channel-row{
  display:grid;
  grid-template-columns:minmax(135px,1.2fr) repeat(4,minmax(80px,1fr));
  gap:8px;
  align-items:center;
}
.mroi-channel-header{padding:0 7px;color:#7a8b91;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.mroi-channel-row label{min-width:0}
.mroi-channel-row input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 10px;
  border:1px solid #cbd9df;
  border-radius:9px;
  outline:0;
  color:var(--mroi-ink);
  font-weight:700;
}
.mroi-channel-row input:focus{border-color:var(--mroi-blue);box-shadow:0 0 0 3px rgba(18,105,173,.08)}
.mroi-channel-row .mroi-mini-money input{height:40px;border:0;border-radius:0;box-shadow:none}
.mroi-mini-money>span{padding-left:9px;font-size:12px}
.mroi-mobile-label{display:none}

.mroi-wide-panel{margin-top:22px;box-shadow:none}
.mroi-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--mroi-line);border-radius:13px}
.mroi-table{width:100%;min-width:850px;border-collapse:collapse;font-size:12px}
.mroi-table th,.mroi-table td{padding:13px 12px;border-bottom:1px solid var(--mroi-line);text-align:right;white-space:nowrap}
.mroi-table th{background:#f7fafb;color:#667a82;font-size:10px;text-transform:uppercase;letter-spacing:.045em}
.mroi-table th:first-child,.mroi-table td:first-child{text-align:left}
.mroi-table tbody tr:last-child td{border-bottom:0}
.mroi-table td:first-child{font-weight:800}
.mroi-signal{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850}
.mroi-signal-good{background:var(--mroi-good-soft);color:var(--mroi-good)}
.mroi-signal-warn{background:var(--mroi-warn-soft);color:var(--mroi-warn)}
.mroi-signal-bad{background:var(--mroi-bad-soft);color:var(--mroi-bad)}

.mroi-scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mroi-scenario{
  padding:18px;
  border:1px solid var(--mroi-line);
  border-radius:14px;
  background:#fff;
}
.mroi-scenario.is-base{border-color:#c7e1f1;background:#f5fbfe}
.mroi-scenario-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mroi-scenario h3{margin:0;font-size:15px}
.mroi-scenario-badge{padding:4px 7px;border-radius:999px;background:#eef3f5;color:#677b83;font-size:9px;font-weight:850;text-transform:uppercase}
.mroi-scenario.is-base .mroi-scenario-badge{background:var(--mroi-blue-soft);color:var(--mroi-blue)}
.mroi-scenario-value{display:block;margin:15px 0 4px;font-size:29px;line-height:1;letter-spacing:-.035em}
.mroi-scenario p{margin:0;color:#74858c;font-size:11px;line-height:1.5}
.mroi-scenario-details{display:grid;gap:6px;margin-top:13px;padding-top:12px;border-top:1px solid var(--mroi-line)}
.mroi-scenario-details div{display:flex;justify-content:space-between;gap:10px;color:#657980;font-size:11px}
.mroi-scenario-details strong{color:#304c56}

.mroi-explainer{padding:68px 0;border-top:1px solid #e9eff2;background:#fff}
.mroi-explainer-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.mroi-explainer h2{margin:0;font-size:35px;line-height:1.12;letter-spacing:-.035em}
.mroi-explainer-copy p{margin:0 0 15px;color:var(--mroi-muted);font-size:15px}

@media(max-width:1050px){
  .mroi-tool-grid,.mroi-advanced-layout{grid-template-columns:1fr}
  .mroi-sticky-results{position:static}
}

@media(max-width:850px){
  .mroi-hero-row{grid-template-columns:1fr;align-items:start;gap:25px}
  .mroi-mode-switch{width:100%}
  .mroi-mode-btn{flex:1;min-width:0}
  .mroi-field-row-3{grid-template-columns:1fr 1fr}
  .mroi-channel-header{display:none}
  .mroi-channel-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px;border:1px solid var(--mroi-line);border-radius:13px;background:#fbfcfd}
  .mroi-channel-row label:first-child{grid-column:1/-1}
  .mroi-mobile-label{display:block;margin-bottom:5px;color:#75878e;font-size:10px;font-weight:800;text-transform:uppercase}
  .mroi-explainer-grid{grid-template-columns:1fr;gap:25px}
}

@media(max-width:650px){
  .mroi-hero{padding:42px 0 28px}
  .mroi-title-wrap p{font-size:16px}
  .mroi-mode-switch{padding:4px}
  .mroi-mode-btn{padding:11px 10px}
  .mroi-mode-btn span{display:none}
  .mroi-tool-section{padding:25px 0 52px}
  .mroi-panel{padding:19px;border-radius:16px}
  .mroi-panel-head{margin-bottom:19px}
  .mroi-panel-head h2{font-size:20px}
  .mroi-field-row-2,.mroi-field-row-3{grid-template-columns:1fr}
  .mroi-action-row{flex-direction:column}
  .mroi-btn{width:100%}
  .mroi-primary-result>strong{font-size:38px}
  .mroi-metric-grid{grid-template-columns:1fr 1fr}
  .mroi-metric strong{font-size:16px}
  .mroi-budget-head,.mroi-budget-foot{flex-direction:column;gap:6px}
  .mroi-secondary-grid{grid-template-columns:1fr}
  .mroi-secondary-grid>div:nth-child(even){border-left:0}
  .mroi-secondary-grid>div:nth-child(n+2){border-top:1px solid var(--mroi-line)}
  .mroi-channel-row{grid-template-columns:1fr}
  .mroi-channel-row label:first-child{grid-column:auto}
  .mroi-scenario-grid{grid-template-columns:1fr}
  .mroi-explainer{padding:50px 0}
  .mroi-explainer h2{font-size:29px}
}

@media(max-width:420px){
  .mroi-metric-grid{grid-template-columns:1fr}
  .mroi-live-badge,.mroi-table-note{display:none}
}

@media print{
  .site-header,.footer,.mroi-mode-switch,.mroi-action-row,.mroi-print-btn,.mroi-text-button,.mroi-explainer{display:none!important}
  .mroi-hero{padding:20px 0;background:#fff}
  .mroi-tool-section{padding:10px 0;background:#fff}
  .mroi-mode-panel{display:none!important}
  .mroi-mode-panel.is-active{display:block!important}
  .mroi-tool-grid,.mroi-advanced-layout{grid-template-columns:1fr}
  .mroi-panel{box-shadow:none;break-inside:avoid}
  .mroi-sticky-results{position:static}
}
