/* ==========================================================================
   MetPipe long-form pages — credit application, eCommerce enrollment.

   A stepped application layout: a sticky rail on the left tracking progress,
   numbered sections on the right. Shared so both forms stay identical; scope
   everything under .mp-formx so it can't leak into the rest of the site.
   ========================================================================== */

.mp-formx{--cx-line:#e3e3e8;--cx-muted:#6b6b73;--cx-ink:#141418;--cx-tint:#f7f7f9;
  font-family:var(--mp-font);color:var(--cx-ink);padding-bottom:40px;}

/* Intro ------------------------------------------------------------------ */
.mp-formx .cx-intro{max-width:640px;}
.mp-formx .cx-eyebrow{font-family:var(--mp-font-condensed);text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--mp-red);margin:0 0 6px;}
.mp-formx .cx-lede{font-size:16px;line-height:1.55;color:#3d3d45;margin:0 0 22px;}

/* "Have these ready" strip — sets expectations before the scroll starts */
.mp-formx .cx-ready{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0;list-style:none;}
.mp-formx .cx-ready li{display:flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--cx-line);border-radius:999px;padding:8px 16px 8px 12px;
  font-size:13.5px;font-weight:500;color:#3d3d45;}
.mp-formx .cx-ready i{color:var(--mp-red);font-size:15px;}

/* Two-column shell ------------------------------------------------------- */
.mp-formx .cx-shell{display:grid;grid-template-columns:216px minmax(0,1fr);gap:44px;align-items:start;}

/* Step rail -------------------------------------------------------------- */
/* 114px clears the 90px sticky site navbar */
.mp-formx .cx-rail{position:sticky;top:114px;}
.mp-formx .cx-rail-label{font-family:var(--mp-font-condensed);text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--cx-muted);
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--cx-line);}
.mp-formx .cx-steps{list-style:none;margin:0;padding:0;position:relative;}
.mp-formx .cx-steps::before{content:'';position:absolute;left:13px;top:12px;bottom:12px;
  width:2px;background:var(--cx-line);}
.mp-formx .cx-step{position:relative;}
.mp-formx .cx-step a{display:flex;align-items:center;gap:12px;padding:7px 0;
  color:var(--cx-muted);font-size:14px;font-weight:500;line-height:1.25;
  text-decoration:none;transition:color .18s ease;}
.mp-formx .cx-step a:hover{color:var(--cx-ink);}
.mp-formx .cx-dot{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#fff;
  border:2px solid var(--cx-line);display:flex;align-items:center;justify-content:center;
  font-family:var(--mp-font-condensed);font-weight:700;font-size:14px;color:var(--cx-muted);
  position:relative;z-index:1;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.mp-formx .cx-step.is-active a{color:var(--cx-ink);font-weight:600;}
.mp-formx .cx-step.is-active .cx-dot{border-color:var(--mp-red);color:var(--mp-red);}
.mp-formx .cx-step.is-done .cx-dot{background:var(--mp-red);border-color:var(--mp-red);color:#fff;}
.mp-formx .cx-step.is-done .cx-dot::after{content:'\F26E';font-family:'bootstrap-icons';font-size:13px;}
.mp-formx .cx-step.is-done .cx-num{display:none;}

/* Sections --------------------------------------------------------------- */
.mp-formx .cx-sec{background:#fff;border:1px solid var(--cx-line);border-radius:8px;
  padding:26px 28px 28px;margin:0 0 20px;scroll-margin-top:110px;}
.mp-formx .cx-sec-head{display:flex;gap:14px;align-items:baseline;margin:0 0 20px;
  padding-bottom:14px;border-bottom:1px solid var(--cx-line);}
.mp-formx .cx-sec-num{font-family:var(--mp-font-condensed);font-size:30px;font-weight:700;
  line-height:1;color:var(--mp-red);opacity:.45;flex:0 0 auto;}
/* beats .mp-page h2, which would otherwise add a red rule down the left */
.mp-formx .cx-sec-title{font-family:var(--mp-font-condensed);font-size:23px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--cx-ink);
  border-left:0;padding-left:0;margin:0;line-height:1.1;}
.mp-formx .cx-sec-title::before{display:none;}
.mp-formx .cx-sec-note{font-size:13.5px;color:var(--cx-muted);margin:4px 0 0;}

/* Fields ----------------------------------------------------------------- */
.mp-formx .cx-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px 16px;}
.mp-formx .cx-grid+.cx-grid{margin-top:18px;}
.mp-formx .cx-grid>div{min-width:0;}
.mp-formx .c12{grid-column:span 12;} .mp-formx .c9{grid-column:span 9;}
.mp-formx .c8{grid-column:span 8;}   .mp-formx .c7{grid-column:span 7;}
.mp-formx .c6{grid-column:span 6;}   .mp-formx .c5{grid-column:span 5;}
.mp-formx .c4{grid-column:span 4;}   .mp-formx .c3{grid-column:span 3;}
.mp-formx .c2{grid-column:span 2;}
.mp-formx label.cx-lab{display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:#55555e;margin:0 0 6px;}
.mp-formx .cx-req{color:var(--mp-red);margin-left:2px;}
.mp-formx .form-control,.mp-formx .form-select{width:100%;border:1px solid #d7d7de;
  border-radius:5px;padding:10px 12px;font-size:15px;font-family:var(--mp-font);
  color:var(--cx-ink);background-color:#fff;transition:border-color .15s ease,box-shadow .15s ease;}
.mp-formx .form-control:focus,.mp-formx .form-select:focus{border-color:var(--mp-red);
  box-shadow:0 0 0 3px rgba(196,26,26,.13);outline:none;}
/* the 100% above would break the flex row of an input-group (the $ prefix) */
.mp-formx .input-group .form-control{width:1%;flex:1 1 auto;min-width:0;}
.mp-formx .input-group-text{background:var(--cx-tint);border:1px solid #d7d7de;
  border-right:0;font-weight:600;color:var(--cx-muted);}
.mp-formx .cx-hint{font-size:12.5px;color:var(--cx-muted);margin:6px 0 0;}

/* Checkbox pills — bigger targets than a paper checkbox */
.mp-formx .cx-picks{display:flex;flex-wrap:wrap;gap:10px;}
.mp-formx .cx-pick{position:relative;}
/* visually hidden but still focusable and exposed to assistive tech */
.mp-formx .cx-pick input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.mp-formx .cx-pick span{display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid #d7d7de;border-radius:6px;padding:10px 15px;font-size:14px;font-weight:500;
  background:#fff;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.mp-formx .cx-pick span::before{content:'';width:16px;height:16px;border-radius:3px;
  border:2px solid #c3c3cc;flex:0 0 auto;transition:inherit;}
.mp-formx .cx-pick input:checked+span{border-color:var(--mp-red);background:rgba(196,26,26,.05);
  color:var(--mp-red);font-weight:600;}
.mp-formx .cx-pick input:checked+span::before{background:var(--mp-red);border-color:var(--mp-red);
  box-shadow:inset 0 0 0 2px #fff;}
.mp-formx .cx-pick input:focus-visible+span{box-shadow:0 0 0 3px rgba(196,26,26,.2);}

/* Repeated sub-blocks: trade references, additional users */
.mp-formx .cx-ref{border:1px solid var(--cx-line);border-radius:6px;padding:18px 20px 20px;
  background:var(--cx-tint);}
.mp-formx .cx-ref+.cx-ref{margin-top:16px;}
.mp-formx .cx-ref-head{display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:var(--mp-font-condensed);text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;font-weight:600;color:var(--cx-muted);}
.mp-formx .cx-ref-n{width:22px;height:22px;border-radius:50%;background:var(--mp-red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:0;}
.mp-formx .cx-ref .form-control{background:#fff;}

/* Conditional reveals */
.mp-formx .cx-cond{display:none;}
.mp-formx .cx-cond.is-on{display:grid;}

/* Terms + submit --------------------------------------------------------- */
.mp-formx .cx-terms{background:var(--cx-tint);border-left:3px solid var(--mp-red);
  border-radius:0 5px 5px 0;padding:15px 18px;font-size:14px;line-height:1.55;
  color:#3d3d45;margin:0 0 22px;}
.mp-formx .cx-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:24px;}
.mp-formx .cx-btn{font-family:var(--mp-font-condensed);text-transform:uppercase;
  letter-spacing:.06em;font-size:18px;font-weight:700;color:#fff;background:var(--mp-red);
  border:0;border-radius:5px;padding:14px 34px;cursor:pointer;
  transition:background .15s ease,transform .1s ease;}
.mp-formx .cx-btn:hover{background:var(--mp-red-dark);}
.mp-formx .cx-btn:active{transform:translateY(1px);}
.mp-formx .cx-btn:focus-visible{outline:3px solid rgba(196,26,26,.4);outline-offset:2px;}
/* note drops to its own line so the widget and button sit together */
.mp-formx .cx-send-note{flex:1 0 100%;font-size:13.5px;color:var(--cx-muted);margin:0;}

/* Validation */
.mp-formx .was-validated .form-control:invalid,
.mp-formx .was-validated .form-select:invalid{border-color:var(--mp-red);
  background-color:rgba(196,26,26,.03);}

@media (max-width:991.98px){
  .mp-formx .cx-shell{grid-template-columns:minmax(0,1fr);gap:0;}
  .mp-formx .cx-rail{display:none;}
}
@media (max-width:640px){
  .mp-formx .cx-grid>div{grid-column:span 12;}
  .mp-formx .cx-sec{padding:20px 18px 22px;}
  .mp-formx .cx-send{gap:14px;}
  .mp-formx .cx-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .mp-formx *{transition:none!important;}
}