/* =====================================================================
   Wiser Broker — Tenant Registration page
   Two-panel layout: LEFT navy-gradient marketing panel · RIGHT form card.
   Ported from the approved prototype (Prototypes/registration-prototype-2.html).
   Theme tokens: navy #0a2247→#10396e · orange #f7941e
   Loaded only by Views/CompanyRegistration/Registration.cshtml (Layout=null),
   so the .wb-* names here do not collide with the app-wide wb-ui/WiserLogin sheets.
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Poppins','Segoe UI',sans-serif;color:#1c2440;background:#fff;-webkit-font-smoothing:antialiased}

.wb-shell{display:flex;min-height:100vh}
@media (max-width:991px){.wb-shell{flex-direction:column}}

/* ============ LEFT / MARKETING PANEL ============ */
.wb-left{
  flex:1 1 40%;position:relative;
  color:#fff;padding:30px 44px;overflow:hidden;
  background:linear-gradient(150deg, #0a2247 0%, #0c2e5b 55%, #10396e 100%);
}
.wb-left::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 65%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 65%);pointer-events:none}
.wb-artbg{position:absolute;top:0;left:0;width:100%;height:62%;z-index:0;pointer-events:none;mask-image:linear-gradient(180deg,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.wb-left-inner{position:relative;z-index:2;width:100%;max-width:clamp(320px, 90%, 725px);margin:0 auto;display:flex;flex-direction:column;min-height:100%}
.wb-brand-logo{position:relative;z-index:3;padding-top:6px;display:flex;align-items:center;gap:14px}
.wb-brand-logo img{height:60px;width:auto}
.wb-brand-logo .name{font-size:28px;font-weight:800;letter-spacing:.5px;color:#fff}
.wb-brand-logo .name span{color:#f7941e}
.wb-copy{position:relative;z-index:3;width:100%;flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}
.wb-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#ffd8a6;background:rgba(247,148,30,.14);border:1px solid rgba(247,148,30,.35);padding:7px 14px;border-radius:20px;margin:20px 0 16px;align-self:flex-start}
.wb-headline{font-size:30px;line-height:1.2;font-weight:800;margin:0 0 14px;letter-spacing:-.3px;color:#fff}
.wb-headline .accent{color:#f7941e}
.wb-sub{font-size:15.5px;line-height:1.6;color:#c4cfe4;font-weight:300;max-width:440px;margin:0}
.wb-sub b{color:#fff;font-weight:600}
/* green checklist */
.wb-benefits{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.wb-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:#c4cfe4}
.wb-benefits .tick{flex:none;width:22px;height:22px;border-radius:6px;background:#20a86a;border:1px solid #27b374;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;margin-top:1px}
.wb-benefits b{color:#fff;font-weight:700}
/* pricing cards */
.wb-price{display:flex;gap:12px;margin:30px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.wb-price .p{flex:1;position:relative;border-radius:14px;padding:16px 15px 15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:.15s}
.wb-price .p:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.wb-price .p .ic{font-size:15px;line-height:1;margin-bottom:7px;display:block;opacity:.9}
.wb-price .p .lbl{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#9fb2ce;display:block;margin-bottom:4px}
.wb-price .p .amt{font-size:20px;font-weight:800;color:#fff;line-height:1.1}
.wb-price .p .amt small{font-size:11.5px;font-weight:600;color:#9fb2ce}
.wb-price .p.hot{background:linear-gradient(135deg,rgba(247,148,30,.22),rgba(247,148,30,.10));border-color:rgba(247,148,30,.55)}
.wb-price .p.hot .amt{color:#ffd8a6}
.wb-price .p.hot .lbl{color:#f7941e}
.wb-price .p.hot .tagpill{position:absolute;top:-9px;right:12px;background:#f7941e;color:#fff;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:10px}
.wb-tagline{margin-top:26px;font-size:12.5px;color:#9fb2ce;line-height:1.6}
.wb-tagline b{color:#fff;display:block;font-size:13.5px;margin-bottom:2px}
.wb-bottom{position:relative;z-index:2;padding-top:14px;display:flex;align-items:flex-end;gap:24px}
.wb-docs{width:330px;max-width:40%;flex:0 0 auto;pointer-events:none;filter:drop-shadow(0 18px 26px rgba(0,0,0,.4))}
.wb-badges{flex:1 1 auto;align-self:center;display:flex;justify-content:space-evenly;gap:20px}
.wb-badge{display:flex;flex-direction:column;gap:9px}
.wb-badge svg{width:30px;height:30px;stroke:#7ac943;flex:none}
.wb-badge span{font-size:14.5px;line-height:1.4;color:#cdd7ec;font-weight:400}
/* inline variant: badges stacked vertically, each = icon beside text */
.wb-badges.inline{flex:none;align-self:stretch;flex-direction:column;justify-content:flex-start;gap:16px;margin-top:30px}
.wb-badges.inline .wb-badge{flex-direction:row;align-items:center;gap:14px}
.wb-badges.inline .wb-badge span{white-space:nowrap}
/* ---- mid desktop / small laptops: scale the left panel down so it fits ---- */
@media (min-width:992px) and (max-width:1200px){
  .wb-left{padding:26px 30px}
  .wb-brand-logo img{height:50px}
  .wb-brand-logo .name{font-size:23px}
  .wb-headline{font-size:25px}
  .wb-benefits li{font-size:14px}
  .wb-price .p{padding:11px 10px 10px}
  .wb-price .p .amt{font-size:18px}
  .wb-badge span{font-size:13.5px}
}
/* ---- tablets / phones: stack panels, left becomes a full-width banner ---- */
@media (max-width:991px){
  .wb-left{flex:none;width:100%;padding:28px 26px 34px}
  .wb-left-inner{max-width:none}
  .wb-eyebrow{margin-top:22px}
  .wb-headline{font-size:26px}
  .wb-price{flex-wrap:wrap}
  .wb-price .p{flex:1 1 30%;min-width:120px}
}
@media (max-width:520px){
  .wb-right{padding:26px 20px 40px}
  .wb-price .p{flex:1 1 100%}
}

/* ============ RIGHT / FORM PANEL ============ */
.wb-right{background:#fff;flex:1 1 60%;min-height:100vh;display:flex;justify-content:center;padding:34px 44px 54px}
.wb-card{width:100%;max-width:clamp(320px, 92%, 1054px)}
.wb-formhead{text-align:center;margin-bottom:6px}
.wb-welcome{font-size:25px;font-weight:700;margin:0 0 4px;color:#132347}
.wb-welcome span{color:#f7941e}
.wb-welcome-sub{margin:0 0 4px;font-size:13.5px;color:#7a839a;line-height:1.45;font-weight:300}
.wb-free{display:inline-block;font-size:12px;font-weight:600;color:#10396e;background:#eaf1ff;border:1px solid #d7e4fb;padding:5px 12px;border-radius:20px;margin:10px 0 16px}

.wb-alert{display:none;background:#fdecec;border:1px solid #f6c9c9;border-left:4px solid #e14b4b;color:#a12b2f;font-size:13.5px;padding:12px 14px;border-radius:10px;margin-bottom:18px}
.wb-alert.show,.wb-alert:not(:empty){display:block}

.wb-sec{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#132347;margin:19px 0 13px}
.wb-sec:first-of-type{margin-top:4px}
.wb-sec::before{content:"";width:5px;height:16px;border-radius:3px;background:#f7941e}
.wb-sec small{text-transform:none;letter-spacing:0;font-weight:300;color:#9aa3b6;font-size:12.5px}

.wb-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 14px}
.fcol{grid-column:span 6}
.fcol.c12{grid-column:span 12}
.fcol.c8{grid-column:span 8}
.fcol.c4{grid-column:span 4}
.fcol.c5{grid-column:span 5}
.fcol.c3{grid-column:span 3}
@media (max-width:560px){.fcol,.fcol.c8,.fcol.c4,.fcol.c5,.fcol.c3{grid-column:span 12}}

.wb-field{position:relative;margin-bottom:13px}
.wb-field label{display:block;font-size:12px;font-weight:500;color:#000;margin-bottom:5px}
.wb-field label .req{color:#e07d05}
.wb-field label .hint{color:#9aa3b6;font-weight:300}
.wb-field > svg.leadico{position:absolute;left:15px;top:35px;width:18px;height:18px;stroke:#98a2b8;pointer-events:none}
.wb-field.has-ic input{padding-left:44px}
.wb-field input,.wb-field select{
  width:100%;height:46px;border:1px solid #dfe3ec;border-radius:10px;background:#fbfbfd;
  padding:0 14px;font-size:14px;font-family:inherit;color:#1c2440;outline:none;transition:border-color .15s,box-shadow .15s;
}
.wb-field input::placeholder{color:#9aa3b6;font-weight:300}
.wb-field input:focus,.wb-field select:focus{border-color:#f7941e;box-shadow:0 0 0 3px rgba(247,148,30,.15);background:#fff}
.wb-field.has-error input,.wb-field.has-error select{border-color:#e14b4b;box-shadow:0 0 0 3px rgba(225,75,75,.10)}
.wb-err{display:block;color:#e14b4b;font-size:12px;font-weight:400;margin-top:5px;min-height:0}
/* jQuery-validate inline messages (rendered by @Html.ValidationMessageFor) */
.wb-field .field-validation-error{display:block;color:#e14b4b;font-size:12px;font-weight:400;margin-top:5px}
.wb-field input.input-validation-error,.wb-field select.input-validation-error{border-color:#e14b4b;box-shadow:0 0 0 3px rgba(225,75,75,.10)}

.wb-btn{width:100%;height:48px;border:none;border-radius:10px;background:#f7941e;color:#fff;font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s,transform .05s;margin-top:8px;box-shadow:0 8px 20px rgba(247,148,30,.30)}
.wb-btn:hover{background:#ec8709}
.wb-btn:active{transform:translateY(1px)}
.wb-error{display:block;color:#e14b4b;font-size:13.5px;margin-top:8px;min-height:16px;text-align:center}
.wb-terms{margin:16px 0 0;font-size:13px;color:#8a92a6;line-height:1.55;font-weight:300;text-align:center}
.wb-terms a{color:#10396e;font-weight:600;text-decoration:none;cursor:pointer}
.wb-terms a:hover{text-decoration:underline}
.wb-copy-note{margin:8px 0 0;font-size:12px;color:#aeb5c4;text-align:center;font-weight:300}