/* TaxSo signup page – brand reskin for Signup_New.html.
   Load AFTER the page's own <style> blocks (just before </head>).
   Only restyles; no element IDs or scripts change. Rules are ID-scoped so they win
   over the page's existing styles without !important. */
:root{
  --tx-red:#D7262C;--tx-red-deep:#B3191F;--tx-red-tint:#FDECEC;
  --tx-black:#1D1D1F;--tx-charcoal:#3A3A40;--tx-grey:#6B6F78;
  --tx-line:#E3E4E8;--tx-mist:#F4F5F7;--tx-green:#1E8556;--tx-blue:#1F5FBF;
}
html body{font-family:"Mukta",system-ui,sans-serif;background:var(--tx-mist);color:var(--tx-charcoal)}
body .container{max-width:1160px;padding:0 20px;min-height:0}

/* layout: form first on phones */
#main-grid{grid-template-columns:.9fr 1.1fr;gap:40px;margin:38px 0 32px;align-items:start}
#main-grid *{font-family:"Mukta",system-ui,sans-serif}
@media (max-width:900px){
  #main-grid{grid-template-columns:1fr;gap:24px;margin:24px 0}
  #main-grid .right-panel{order:-1}
}

/* left panel: brand story in TaxSo Black */
#main-grid .left-panel{background:var(--tx-black);color:#D5D6DA;border:0;border-radius:20px;padding:40px;
  /* position:sticky;top:96px */
}
@media (max-width:900px){#main-grid .left-panel{position:static;padding:28px 24px}}
#main-grid .tx-sp-logo{display:inline-block;background:#fff;border-radius:10px;padding:8px 12px}
#main-grid .tx-sp-logo img{height:32px;width:auto;display:block}
#main-grid .tx-sp-title{font:800 2.2rem/1.1 "Baloo 2","Mukta",sans-serif;color:#fff;margin:26px 0 10px;text-wrap:balance}
#main-grid .tx-sp-lead{font-size:1.08rem;color:#B5B7BE;margin:0 0 26px}
#main-grid .tx-sp-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:4px}
#main-grid .tx-sp-steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid #333338}
#main-grid .tx-sp-steps li::before{content:counter(s);grid-row:span 2;width:32px;height:32px;border-radius:50%;border:2px solid #fff;color:#fff;font:800 1rem/28px "Baloo 2",sans-serif;text-align:center}
#main-grid .tx-sp-steps b{color:#fff;font-weight:600}
#main-grid .tx-sp-steps span{color:#B5B7BE;font-size:.95rem}
#main-grid .tx-sp-checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px}
#main-grid .tx-sp-checks li{display:flex;gap:10px}
#main-grid .tx-sp-checks li::before{content:"✓";color:#5FD39A;font-weight:700}
#main-grid .tx-sp-quote{margin:26px 0 0;padding:18px 20px;border-left:3px solid var(--tx-red);background:#26262A;border-radius:0 12px 12px 0}
#main-grid .tx-sp-quote blockquote{margin:0;color:#E6E6EA;font-size:1rem}
#main-grid .tx-sp-quote figcaption{margin-top:8px;color:#9A9CA3;font-size:.9rem}
#main-grid .tx-sp-help{margin:22px 0 0;font-size:.95rem;color:#B5B7BE}
#main-grid .tx-sp-help a{color:#fff;font-weight:600}
#main-grid .carousel-container,#main-grid .carousel-controls,#main-grid .welcome-text,#main-grid .features-title,#main-grid .features-list,#main-grid .logo-section{display:none}

/* right panel: the form */
#main-grid .right-panel{background:#fff;border:1.5px solid var(--tx-line);border-radius:20px;box-shadow:0 24px 50px -32px rgba(29,29,31,.35);padding:36px}
@media (max-width:620px){#main-grid .right-panel{padding:24px 18px}}
#main-grid .form-header{margin:0 0 24px}
#main-grid #formHeaderText{font:700 1.9rem/1.15 "Baloo 2","Mukta",sans-serif;color:var(--tx-black)}
#main-grid .form-group{margin-bottom:16px}
#main-grid .form-label{font-weight:600;color:var(--tx-black)}
#main-grid .form-control{border:1.5px solid var(--tx-line);border-radius:8px;color:var(--tx-black);font-size:1rem;background:#fff}
#main-grid .form-control:focus{outline:none;border-color:var(--tx-blue);box-shadow:0 0 0 3px rgba(31,95,191,.15)}
#main-grid .form-control::placeholder{color:#9A9DA5}
#main-grid .input-icon{filter:grayscale(1);opacity:.7}
#main-grid a{color:var(--tx-blue)}

/* plan period */
#main-grid .radio-group{gap:10px}
#main-grid .radio-option{border:1.5px solid var(--tx-line);border-radius:999px;padding:8px 18px;cursor:pointer}
#main-grid .radio-option:has(input:checked){border-color:var(--tx-black);background:var(--tx-black);color:#fff}
#main-grid .radio-input,#main-grid .checkbox-input{accent-color:var(--tx-red)}

/* savings + summary */
#main-grid #savings-highlight{background:#E6F5EC;border:1px solid #BFE3CD;box-shadow:none;border-radius:12px;color:#14532F}
#main-grid #savings-highlight .fa-bolt{color:var(--tx-green)}
#main-grid #saving-price{color:#14532F;font-weight:700}
#main-grid #pricing-summary{background:var(--tx-mist);border:1px solid var(--tx-line);border-radius:12px}
#main-grid .pricing-row{font-variant-numeric:tabular-nums}
#main-grid .pricing-row.total{border-top:1px dashed #C9CBD1;color:var(--tx-black);font-weight:700}
#main-grid #applyBtn{background:var(--tx-black)}
#main-grid #applyBtn:hover{background:#000}

/* terms + main button */
#main-grid .checkbox-group{font-size:.95rem}
#main-grid .primary-button,#main-grid #submitbtn,#main-grid #RegisterButton,#main-grid #makePaymentBtn{background:var(--tx-red);color:#fff;border-radius:999px;font-weight:600;font-size:1.05rem;width:100%;padding:16px 24px;box-shadow:none}
#main-grid .primary-button:hover,#main-grid #submitbtn:hover,#main-grid #RegisterButton:hover,#main-grid #makePaymentBtn:hover{background:var(--tx-red-deep);transform:none}

/* OTP, alert and error dialogs */
#OTPConfirmationModel .modal-content,#myModal .modal-content,#ErrorModal .modal-content{border-radius:20px;font-family:"Mukta",system-ui,sans-serif}
#OTPConfirmationModel input{border:1.5px solid var(--tx-line);border-radius:8px}
#OTPConfirmationModel input:focus{outline:none;border-color:var(--tx-blue);box-shadow:0 0 0 3px rgba(31,95,191,.15)}
#OTPConfirmationModel button,#ErrorModal button{border-radius:999px}
