/* V3 premium clean refinement */
#mppm-roas-page{
  --blue:#1467d9;
  --mint:#159b78;
  --ink:#0c213b;
  --muted:#697a90;
  --line:#e2e8f0;
  background:#f5f7fb;
}

/* Hero: calmer and more premium */
#mppm-roas-page .hero{
  margin-top:14px;
  padding:50px 0 48px;
  background:
    radial-gradient(circle at 82% 18%,rgba(45,137,230,.16),transparent 26%),
    linear-gradient(125deg,#07182f 0%,#0a2a4e 64%,#0b3159 100%);
}
#mppm-roas-page .hero h1{
  max-width:720px;
  font-size:clamp(44px,5.4vw,62px);
  letter-spacing:-3px;
}
#mppm-roas-page .hero h1 span{
  background:linear-gradient(90deg,#6dd5df,#7cb9ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}
#mppm-roas-page .hero-card{
  border:1px solid #e5ebf2;
  box-shadow:0 20px 48px rgba(1,13,30,.20);
  padding:23px;
}
#mppm-roas-page .hero-card strong{
  font-size:34px;
  letter-spacing:-1.4px
}
#mppm-roas-page .hero-margin-note{
  background:#f7faff;
  border-color:#dce9f9
}

/* Main calculator: clearer visual hierarchy */
#mppm-roas-page .calculator-section{padding-top:42px}
#mppm-roas-page .calculator-shell{
  grid-template-columns:minmax(370px,420px) minmax(0,1fr);
  gap:20px
}
#mppm-roas-page .input-panel,
#mppm-roas-page .results-panel{
  border:1px solid #e0e7ef;
  box-shadow:0 14px 38px rgba(26,59,96,.08)
}
#mppm-roas-page .input-panel{
  background:#fff
}
#mppm-roas-page .input-panel .panel-head{
  background:#0b2748;
  border-radius:20px 20px 0 0;
  padding:20px
}
#mppm-roas-page .input-panel .panel-head h2{font-size:20px}
#mppm-roas-page .input-body{padding:18px}
#mppm-roas-page .input-intro{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 13px;
  margin-bottom:13px;
  border:1px solid #dfe9f6;
  border-radius:12px;
  background:#f8fbff
}
#mppm-roas-page .input-intro-icon{
  width:23px;height:23px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:#e6f5ef;color:#118265;
  font-size:11px;font-weight:900
}
#mppm-roas-page .input-intro strong{
  display:block;
  font-size:11px;
  color:#17324f
}
#mppm-roas-page .input-intro p{
  margin:2px 0 0;
  color:#738398;
  font-size:9.5px
}
#mppm-roas-page .field{
  border:1px solid #e4eaf1;
  background:#fff;
  padding:10px;
  border-radius:12px
}
#mppm-roas-page .field input,
#mppm-roas-page .field select{
  background:#f7f9fc
}
#mppm-roas-page .field input:focus,
#mppm-roas-page .field select:focus{
  background:#fff;
  box-shadow:0 0 0 2px rgba(20,103,217,.14)
}
#mppm-roas-page .field label{margin-bottom:4px}
#mppm-roas-page .field small{line-height:1.35}
#mppm-roas-page .advanced-toggle{
  margin-top:14px;
  background:#f8fbff;
  color:#1467d9;
  border-color:#d9e6f5
}
#mppm-roas-page .calc-buttons{margin-top:15px}
#mppm-roas-page .btn.primary{background:#1467d9}

/* Info icons: quieter */
#mppm-roas-page .info-tip{
  width:17px;height:17px;min-width:17px;
  border-color:#d3deeb;
  background:#f3f7fc;
  color:#3b6fa9;
  font-size:9px
}
#mppm-roas-page .info-tip:hover,
#mppm-roas-page .info-tip:focus,
#mppm-roas-page .info-tip.open{
  background:#1467d9;
  border-color:#1467d9;
  color:#fff
}

/* Results: key status first, metrics second */
#mppm-roas-page .results-panel .panel-head{
  background:#fff;
  border-bottom:1px solid #e6ecf2
}
#mppm-roas-page .results-body{padding:18px}
#mppm-roas-page .result-status{
  padding:18px;
  background:linear-gradient(125deg,#0a294c,#0b365f);
  box-shadow:none
}
#mppm-roas-page .status-copy strong{
  font-size:31px;
  letter-spacing:-1.1px
}
#mppm-roas-page .assumption-note{
  margin-top:10px;
  padding:11px 12px;
  background:#fffaf0;
  border-color:#f0dfb7
}
#mppm-roas-page .assumption-note strong{font-size:10.5px}
#mppm-roas-page .assumption-note p{font-size:9px}
#mppm-roas-page .assumption-note .assumption-icon{
  background:#c58c17
}
#mppm-roas-page .results-section-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:17px 1px 8px
}
#mppm-roas-page .results-section-label span{
  color:#284d73;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px
}
#mppm-roas-page .results-section-label small{
  color:#8795a7;
  font-size:8.5px
}
#mppm-roas-page .metric-grid{
  gap:9px;
  margin-top:0
}
#mppm-roas-page .metric{
  background:#fff;
  border:1px solid #e5ebf1;
  border-top:1px solid #e5ebf1;
  padding:13px
}
#mppm-roas-page .metric:nth-child(3n+1),
#mppm-roas-page .metric:nth-child(3n+2),
#mppm-roas-page .metric:nth-child(3n+3){
  border-top-color:#e5ebf1
}
#mppm-roas-page .metric strong{
  font-size:19px;
  color:#15324f
}
#mppm-roas-page .metric small{color:#667b92}
#mppm-roas-page .metric em{color:#96a1af}
#mppm-roas-page .result-explainer{
  margin-top:11px;
  padding:14px 15px;
  background:#f1faf7;
  border:1px solid #d4ebe4
}
#mppm-roas-page .result-explainer small{color:#13765d}
#mppm-roas-page .result-explainer h3{font-size:15px}
#mppm-roas-page .result-explainer p{color:#60766f}
#mppm-roas-page .target-box{
  margin-top:11px;
  padding:14px;
  background:#f8faff;
  border-color:#e1e8f1
}
#mppm-roas-page .target-kicker{
  margin-bottom:4px;
  color:#416a96;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.65px
}
#mppm-roas-page .target-item{
  border-color:#e5ebf2;
  background:#fff
}
#mppm-roas-page .result-actions button{
  color:#52677e;
  background:#fbfcfe
}

/* Supporting sections: fewer competing accents */
#mppm-roas-page .section{padding:68px 0}
#mppm-roas-page .how-card,
#mppm-roas-page .related-card{
  box-shadow:0 7px 20px rgba(25,58,95,.04)
}
#mppm-roas-page .how-card .step{
  background:#1467d9
}
#mppm-roas-page .formula-card{
  background:linear-gradient(125deg,#0a2341,#0b3158);
  box-shadow:0 16px 40px rgba(11,49,88,.12)
}
#mppm-roas-page .related-card span{
  background:#eef5fd;
  color:#1467d9
}