/* Static export enhancements: keep the original Net-Flow palette and improve mobile layout. */
.main { width: min(981px, 100%); }
img { max-width: 100%; height: auto; }

.roi-calculator {
  border: 1px solid #d8dce7;
  border-top: 4px solid #0067bb;
  background: #fff;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(29, 45, 83, .08);
}
.roi-calculator h2 { margin: 0 0 8px; font-size: 22px; color: #15264b; }
.roi-calculator .roi-intro { margin: 0 0 22px; color: #5b6374; line-height: 1.6; }
.roi-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.roi-fields label { display: block; color: #26334f; font-weight: 700; font-size: 13px; }
.roi-fields input { box-sizing: border-box; display: block; width: 100%; margin-top: 6px; border: 1px solid #bac3d4; border-radius: 4px; padding: 11px 12px; color: #202b43; background: #fff; }
.roi-fields input:focus { outline: 3px solid rgba(0, 103, 187, .2); border-color: #0067bb; }
.roi-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.roi-result { background: #f3f6fb; padding: 16px; border-radius: 4px; }
.roi-result strong { display: block; color: #0067bb; font-size: 23px; margin-top: 5px; }
.roi-result span { color: #535e74; font-size: 12px; }
.roi-note { margin: 18px 0 0; color: #697286; font-size: 12px; line-height: 1.5; }

@media (max-width: 760px) {
  .main { width: 100%; overflow: hidden; }
  #header { position: relative; inset: auto; box-sizing: border-box; width: 100%; height: auto; min-height: 155px; padding: 106px 16px 18px; background-position: top right; }
  .logo { top: 5px; left: 12px; width: 270px; max-width: 78vw; height: 92px; background-size: contain; background-position: left top; }
  #header div { width: 100%; }
  #header strong { float: none; display: block; width: auto; height: auto; margin: 0 0 12px; text-indent: 0; background: none; color: #253354; font-size: 13px; }
  #header a.calc { float: none; display: inline-block; width: auto; height: auto; margin-bottom: 12px; text-indent: 0; background: none; font-weight: 700; }
  #header ul, #header .nav, #header .menu { float: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
  #header li { float: none; padding: 0; background: none; }
  #header li a { width: auto; height: auto; padding: 6px 0; text-indent: 0; overflow: visible; background: none; color: #0067bb; font: 700 12px Arial, sans-serif; }
  #middle { padding: 22px 16px 28px; }
  .middle-add { display: block; }
  .info-box, .home-message, .main-column, .main-column-wide, .sidebar, .addition-solution, .solution-area, .client-box { float: none; box-sizing: border-box; width: 100%; margin: 0; padding: 18px 0; }
  .info-box { font-size: 15px; }
  .info-box p { line-height: 1.7; }
  .home-message p { height: auto; padding: 12px; background: #f3f6fb; }
  .home-message p em { float: none; display: block; width: auto; height: auto; text-indent: 0; background: none; font-style: italic; }
  .person, .group, .live-chat { display: none; }
  .it-department { position: relative; inset: auto; width: 100%; height: auto; background: #f1f4f9; }
  .it-department div { height: auto; min-height: 70px; padding: 16px; background: none; }
  .it-department img { display: none; }
  .it-department strong { float: none; width: auto; height: auto; margin: 0; text-indent: 0; background: none; color: #26334f; }
  .main-column { font-size: 14px; }
  .main-column p { line-height: 1.7; }
  .main-column .user-form textarea, .main-column .user-form input { box-sizing: border-box; max-width: 100%; }
  .user-form li, .main-column .user-form li { box-sizing: border-box; width: 100%; margin-right: 0; }
  .user-form div { box-sizing: border-box; width: 100%; margin: 0 0 12px; }
  .user-form div input, .user-form input, .user-form textarea { width: 100%; }
  .sidebar { margin-bottom: 28px; }
  .footer-holder { min-width: 0; margin-top: 0; background: #242933; }
  #footer { box-sizing: border-box; width: 100%; height: auto; padding: 18px 16px; background: #242933; }
  #footer:after { display: none; }
  .quote-area { height: auto; margin: 0 0 18px; }
  .quote-holder { float: none; width: 100%; }
  .quote-holder ul { width: auto; }
  .quote-holder ul li { float: none; width: auto; }
  .quote-area blockquote { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 16px 0; }
  .arrow, .questions-area img { display: none; }
  .questions-area { height: auto; margin: 0; }
  .questions-area a { float: none; display: inline-block; width: auto; height: auto; margin: 0; text-indent: 0; background: none; color: white; }
  .solution-area .container, .addition-solution .container { float: none; box-sizing: border-box; width: 100%; padding: 12px 0; }
  .solution-area .info-area, .addition-solution .info-area { min-height: 0; }
  #footer h3 { height: auto; text-indent: 0; background: none; color: white; font-size: 14px; margin-bottom: 8px !important; }
  #footer p { line-height: 1.6; }
  .roi-fields, .roi-results { grid-template-columns: 1fr; }
  .roi-calculator { padding: 18px; }
}