html {
      height: 100%;
    }

    :root {
      --maj-navy: #101742;
      --maj-blue: #1663c7;
      --maj-cyan: #33c2cf;
      --maj-text: #1f2f4b;
      --maj-muted: #526785;
      --maj-border: #d8e2ef;
    }

    * {
      box-sizing: border-box;
    }

    body.majesco-auth-page {
      margin: 0;
      min-height: 100dvh;
      font-family: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      color: var(--maj-text);
      background: #ffffff;
    }

    .majesco-auth-shell {
      width: 100%;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .majesco-auth-visual {
      position: relative;
      background-image: url('../images/majesco/003_majesco_tech_cityscape_bg.png');
      background-size: cover;
      background-position: center;
    }

    .majesco-auth-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(130deg, rgba(16, 26, 72, 0.35), rgba(16, 24, 66, 0.05));
    }

    .majesco-auth-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(10px, 1.4vh, 20px) clamp(16px, 2vw, 34px);
      background: radial-gradient(circle at 50% -40%, #eaf3ff 0%, #ffffff 54%);
    }

    .majesco-auth-card {
      width: min(100%, clamp(640px, 39vw, 980px));
      margin: 0 auto;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 18px);
      min-height: clamp(560px, 70dvh, 720px);
      display: flex;
      flex-direction: column;
    }

    .majesco-auth-form {
      margin: 0;
      margin-bottom: clamp(0.75rem, 0.58rem + 0.45vh, 1rem);
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      justify-content: flex-start;
    }

    .brand-block {
      text-align: center;
      margin-top: clamp(8px, 1.1vh, 16px);
    }

    .brand-block img {
      width: min(430px, 78%);
      height: auto;
      margin-bottom: 12px;
    }

    .brand-block .card-title {
      margin: 0;
      font-family: inherit;
      font-size: clamp(2.9rem, 3.35vw, 4.1rem);
      line-height: 1.03;
      color: var(--maj-navy);
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .brand-block .sub-title {
      margin-top: 8px;
      margin-bottom: clamp(10px, 1vh, 14px);
      font-size: clamp(1.2rem, 1.4vw, 1.62rem);
      color: #1558b1;
      font-weight: 700;
      line-height: 1.25;
    }

    .brand-divider {
      width: min(214px, 44%);
      height: 3px;
      margin: 0 auto 0;
      border-radius: 99px;
      display: block;
      background: linear-gradient(90deg, #1f67cc 0%, #2fc6cb 55%, #88c756 100%);
    }

    .portal-copy {
      margin: clamp(16px, 1.8vh, 24px) auto clamp(18px, 2.2vh, 30px);
      max-width: min(760px, 92%);
      text-align: center;
      font-size: clamp(1rem, 1.02vw, 1.18rem);
      line-height: 1.46;
      font-weight: 400;
      color: #101742;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 0;
    }

    .feature-item {
      padding: clamp(8px, 1vh, 12px) clamp(8px, 0.9vw, 14px) clamp(10px, 1.2vh, 14px);
      border-right: 1px solid rgba(16, 24, 66, 0.13);
      text-align: center;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .feature-item:last-child {
      border-right: 0;
    }

    .feature-icon {
      width: auto;
      height: auto;
      margin-bottom: clamp(8px, 1vh, 12px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #185fbb;
      background: none;
      border: 0;
    }

    .feature-icon i {
      font-size: clamp(2.8rem, 2.55vw, 3.35rem);
      line-height: 1;
    }

    .feature-item h3 {
      width: 100%;
      margin: 0 0 clamp(4px, 0.6vh, 8px);
      font-family: inherit;
      font-size: clamp(1rem, 0.95vw, 1.22rem);
      line-height: 1.24;
      font-weight: 600;
      color: var(--maj-navy);
      text-align: center;
    }

    .feature-item p {
      width: 100%;
      margin: 0;
      font-size: clamp(0.9rem, 0.85vw, 1rem);
      line-height: 1.42;
      font-weight: 500;
      color: #2f446a;
      text-align: center;
    }

    .login-action-wrap {
      text-align: center;
      margin-top: clamp(16px, 2vh, 30px);
      padding-top: 0;
      margin-bottom: clamp(8px, 0.9vh, 14px);
    }

    .majesco-login-btn {
      width: 100%;
      max-width: min(520px, 100%);
      border: none;
      border-radius: 8px;
      padding: clamp(10px, 1.1vh, 13px) 18px;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      font-size: clamp(1.06rem, 1.08vw, 1.28rem);
      line-height: 1.25;
      font-weight: 600;
      color: #ffffff;
      background: linear-gradient(120deg, #1156af 0%, #1a67c5 60%, #0f57b3 100%);
      box-shadow: 0 8px 18px rgba(19, 80, 163, 0.28);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .majesco-login-btn:hover,
    .majesco-login-btn:focus {
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 11px 22px rgba(18, 79, 160, 0.36);
      text-decoration: none;
    }

    .auth-links {
      margin-top: clamp(10px, 1.1vh, 14px);
      margin-bottom: clamp(3px, 0.5vh, 7px);
      display: none;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 10px;
      border-top: 1px solid var(--maj-border);
      padding-top: clamp(9px, 1vh, 13px);
      padding-bottom: clamp(7px, 0.9vh, 11px);
      text-align: center;
      font-size: clamp(0.84rem, 0.8vw, 0.94rem);
      color: #5b6f8e;
    }

    .auth-links a {
      color: #445a7b;
      text-decoration: none;
      font-weight: 600;
    }

    .auth-links a:hover,
    .auth-links a:focus {
      color: #1c4e96;
      text-decoration: none;
    }

    .auth-links .sep {
      margin: 0 1px;
      color: #9aabc2;
    }

    .auth-copyright {
      margin-top: clamp(1rem, 1.1vh, 1.5rem);
      padding-top: clamp(1.5rem, 1vh, 2rem);
      border-top: 1px solid var(--maj-border);
      margin-bottom: 0;
      font-size: clamp(0.84rem, 0.88vw, 0.94rem);
      color: #334b6c;
      font-weight: 500;
      text-align: center;
    }

    .lock-message {
      margin: 8px 0 12px;
      text-align: center;
      color: #9a1f1f;
      font-weight: 700;
      background: #fff1f1;
      border: 1px solid #f0c6c6;
      border-radius: 10px;
      padding: 9px;
      font-size: 0.92rem;
    }

    @media (min-width: 1080px) and (max-height: 900px) {
      .majesco-auth-panel {
        padding: 8px 14px;
      }

      .majesco-auth-card {
        width: min(100%, clamp(620px, 40vw, 760px));
        min-height: clamp(520px, 74dvh, 620px);
        padding: 8px 10px 6px;
      }

      .brand-block {
        margin-top: clamp(6px, 0.8vh, 10px);
      }

      .majesco-auth-form {
        margin-bottom: clamp(0.5rem, 0.45rem + 0.25vh, 0.7rem);
      }

      .brand-block img {
        width: min(340px, 70%);
        margin-bottom: 6px;
      }

      .brand-block .card-title {
        font-size: clamp(3.1rem, 3.3vw, 3.5rem);
      }

      .brand-block .sub-title {
        font-size: clamp(1.15rem, 1.3vw, 1.45rem);
        margin-top: 5px;
        margin-bottom: clamp(7px, 0.8vh, 10px);
      }

      .brand-divider {
        width: min(150px, 36%);
        height: 2px;
        margin-top: 0;
      }

      .login-action-wrap {
        margin-top: clamp(6px, 0.8vh, 10px);
        padding-top: 0;
        margin-bottom: 7px;
      }

      .majesco-login-btn {
        max-width: min(420px, 100%);
        padding: 9px 14px;
        font-size: 1rem;
      }

      .portal-copy {
        margin: 12px auto 18px;
        font-size: 0.93rem;
        line-height: 1.4;
        font-weight: 400;
      }

      .feature-grid {
        margin-bottom: 0;
      }

      .feature-item {
        padding: 6px 8px 6px;
      }

      .feature-icon i {
        font-size: clamp(2.45rem, 2.15vw, 3rem);
      }

      .feature-item h3 {
        font-size: 0.96rem;
        margin-bottom: 3px;
        font-weight: 600;
      }

      .feature-item p {
        font-size: 0.82rem;
        line-height: 1.34;
        font-weight: 500;
        color: #2f446a;
      }

      .auth-links {
        margin-top: 8px;
        margin-bottom: 4px;
        padding-top: 8px;
        padding-bottom: 6px;
        font-size: 0.78rem;
      }

      .auth-copyright {
        margin-top: 1rem;
        padding-top: 1rem;
        font-size: 0.78rem;
      }
    }

    @media (min-width: 1920px) and (min-height: 1000px) {
      .majesco-auth-card {
        width: min(100%, clamp(760px, 43vw, 1120px));
        min-height: 0;
        max-height: 100%;
        height: clamp(800px, 83dvh, 930px);
      }

      .brand-block img {
        width: min(520px, 80%);
      }

      .brand-block .card-title {
        font-size: clamp(4.4rem, calc(1vw + 2rem), 4.8rem);
      }

      .brand-block .sub-title {
        font-size: clamp(2rem, calc(0.5vw + 1.4rem), 2.2rem);
        margin-bottom: clamp(1.2rem, calc(1.07vh + 0.33rem), 1.4rem);
      }

      .brand-divider {
        width: min(248px, 48%);
      }

      .portal-copy {
        max-width: min(860px, 90%);
        margin: clamp(18px, 2vh, 28px) auto clamp(20px, 2.2vh, 32px);
        font-size: clamp(1.7rem, calc(0.3125vw + 1.1rem), 1.9rem);
      }

      .feature-item {
        padding: 10px 14px 12px;
      }

      .feature-icon i {
        font-size: clamp(4rem, calc(0.15625vw + 1rem), 4.1rem);
      }

      .feature-item h3 {
        font-size: clamp(1.5rem, calc(0.15625vw + 1.2rem), 1.6rem);
      }

      .feature-item p {
        font-size: clamp(1.2rem, calc(0.15625vw + 0.9rem), 1.3rem);
      }

      .majesco-login-btn {
        max-width: min(520px, 100%);
        font-size: clamp(1.6rem, calc(0.3125vw + 1rem), 1.8rem);
        padding: 12px 18px;
      }

      .auth-links {
        font-size: clamp(1.4rem, calc(0.15625vw + 1.1rem), 1.5rem);
        border-top: 2px solid var(--maj-border);
        padding-top: clamp(1.2rem, calc(0.5vh + 1rem), 1.4rem);
      }

      .auth-copyright {
        font-size: clamp(1.3rem, calc(0.15625vw + 1.1125rem), 1.4rem);
        margin-top: clamp(1.2rem, calc(1vh + 0.45rem), 1.4rem);
        padding-top: clamp(2rem, calc(1vh + 1rem), 2.5rem);
        border-top: 2px solid var(--maj-border);
      }
    }

    @media (min-width: 2400px) and (min-height: 1300px) {
      .majesco-auth-card {
        width: min(100%, clamp(980px, 46vw, 1580px));
        height: clamp(980px, 82dvh, 1520px);
        min-height: 0;
        max-height: 100%;
        padding: clamp(14px, 1.2vh, 22px) clamp(18px, 1.35vw, 30px);
      }

      .majesco-auth-form {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: clamp(10px, 0.9vh, 16px);
      }

      .brand-block {
        margin-top: 0;
      }

      .brand-block img {
        width: min(750px, 82%);        
        margin-bottom: 14px;
      }

      .brand-block .card-title {
        font-size: clamp(5.7rem, calc(1.875vw + 1.2rem), 6rem);
      }

      .brand-block .sub-title {
        font-size: clamp(2.8rem, calc(1.25vw - 0.2rem), 3rem);
      }

      .brand-divider {
        width: min(365px, 55%);
        height: 5px;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
      }

      .portal-copy {
        max-width: min(980px, 90%);
        margin: 0 auto;
        font-size: clamp(2.3rem, calc(0.625vw + 0.9rem), 2.5rem);
        line-height: 1.5;
        margin-bottom: 2.5rem;
      }

      .feature-item {
        padding: clamp(12px, 1vh, 18px) clamp(12px, 1vw, 18px) clamp(14px, 1.2vh, 20px);
      }

      .feature-icon i {
        font-size: clamp(5.4rem, calc(1.25vw - 1.875rem), 5.6rem);
      }

      .feature-item h3 {
        font-size: clamp(2rem, calc(0.625vw + 0.5rem), 2.1rem);
        line-height: 1.54;
      }

      .feature-item p {
        font-size: clamp(1.5rem, calc(1.25vw - 1.5rem), 1.7rem);
        line-height: 1.45;
      }

      .login-action-wrap {
        margin-top: clamp(14px, 1.5vh, 24px);
        margin-bottom: clamp(1.9rem, 0.8vh, 2.0rem);
      }

      .majesco-login-btn {
        max-width: min(760px, 100%);
        font-size: clamp(2.2rem, calc(1.25vw - 1.55rem), 2.4rem);
        padding: clamp(13px, 1vh, 18px) 20px;
      }

      .auth-links {
        margin-top: clamp(10px, 0.9vh, 16px);
        border-top: 2px solid var(--maj-border);
        font-size: clamp(1.7rem, calc(0.625vw + 0.7625rem), 1.8rem);
        padding-top: clamp(2rem, calc(2.286vh - 1.714rem), 2.2rem);
      }

      .auth-copyright {
        font-size: clamp(1.7rem, calc(0.625vw + 0.7625rem), 1.8rem);
        margin-top: clamp(1.2rem, calc(1vh + 0.45rem), 1.4rem);
        padding-top: clamp(2rem, calc(1vh + 1rem), 2.5rem);
        border-top: 2px solid var(--maj-border);
      }
    }

    @media (min-width: 3400px) and (min-height: 1800px) {
      .majesco-auth-card {
        width: min(100%, clamp(1240px, 49vw, 1880px));
        height: clamp(1320px, 82dvh, 1820px);
      }

      .majesco-auth-form {
        justify-content: space-between;
      }

      .brand-block img {
        width: min(995px, 94%);
        margin-bottom: clamp(18px, 1.1vh, 26px);
      }

      .brand-block .card-title {
        font-size: clamp(8.2rem, calc(7.27vw - 9.99rem), 9.2rem);
        line-height: 1.10;
      }

      .brand-block .sub-title {
        font-size: clamp(4rem, calc(0.36vw + 2.775rem), 4.1rem);
        margin-top: clamp(14px, 1vh, 20px);
        margin-bottom: clamp(16px, 1.2vh, 24px);
      }

      .brand-divider {
        width: min(520px, 68%);
        height: 8px;
        margin-top: 4rem;
      }

      .portal-copy {
        max-width: min(1200px, 92%);
        font-size: clamp(3rem, calc(0.73vw + 0.52rem), 3.2rem);
        line-height: 1.54;
        margin-top: 2rem;
        margin-bottom: 2.5rem;
      }

      .feature-item {
        padding: clamp(20px, 1.35vh, 30px) clamp(18px, 1.1vw, 26px) clamp(24px, 1.6vh, 34px);
      }

      .feature-icon {
        margin-bottom: clamp(14px, 1vh, 20px);
      }

      .feature-icon i {
        font-size: clamp(8rem, calc(0.73vw + 5.52rem), 8.2rem);;
      }

      .feature-item h3 {
        font-size: clamp(3.2rem, calc(0.73vw + 0.72rem), 3.4rem);
        margin-bottom: clamp(10px, 0.75vh, 14px);
        line-height: 1.5;
      }

      .feature-item p {
        font-size: clamp(2.2rem, calc(0.73vw - 0.286rem), 2.4rem);
        line-height: 1.44;
      }

      .majesco-login-btn {
        max-width: min(1060px, 100%);
        font-size: clamp(3.36rem, calc(0.73vw + 0.878rem), 3.56rem);
        padding: clamp(18px, 1.08vh, 24px) 28px;
      }

      .auth-links {
        font-size: clamp(2.5rem, calc(3.64vw - 4.95rem), 3rem);
        gap: 1rem 2rem;
        border-top: 2px solid var(--maj-border);
        padding-top: 3rem;
      }

      .auth-copyright {
        font-size: clamp(2.8rem, calc(0.73vw + 1.255rem), 3rem);
        margin-top: clamp(1.2rem, calc(1vh + 0.45rem), 1.4rem);
        padding-top: clamp(3rem, calc(1vh + 1rem), 3.5rem);
        border-top: 2px solid var(--maj-border);
      }
    }

    @media (max-width: 1023px) {
      .majesco-auth-shell {
        grid-template-columns: 1fr;
      }

      .majesco-auth-visual {
        min-height: 230px;
        background-position: center;
      }

      .majesco-auth-panel {
        padding: 0 16px 16px;
      }

      .majesco-auth-card {
        margin-top: -46px;
        position: relative;
        z-index: 2;
        width: min(760px, 100%);
        min-height: auto;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid rgba(17, 25, 74, 0.1);
        box-shadow: 0 14px 30px rgba(17, 33, 82, 0.12);
        padding: 15px 14px 13px;
      }

      .majesco-auth-form {
        justify-content: flex-start;
        margin-bottom: clamp(0.7rem, 0.55rem + 0.4vh, 0.9rem);
      }

      .portal-copy {
        margin: 20px auto 30px;
        font-size: 0.98rem;
        color: #101742;
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
      }

      .feature-item {
        border-right: 0;
        border-bottom: 1px solid rgba(16, 24, 66, 0.12);
        padding: 8px 10px 10px;
      }

      .feature-item:nth-child(odd) {
        border-right: 1px solid rgba(16, 24, 66, 0.12);
      }

      .feature-item:nth-last-child(-n+2) {
        border-bottom: 0;
      }

      .feature-item:nth-child(even) {
        padding-left: 10px;
      }

      .feature-icon i {
        font-size: 3.1rem;
      }

      .login-action-wrap {
        margin-top: 18px;
        margin-bottom: 11px;
      }

      .majesco-login-btn {
        max-width: 390px;
      }
    }

    @media (max-width: 640px) {
      .majesco-auth-panel {
        padding: 0 12px 14px;
      }

      .majesco-auth-card {
        margin-top: -36px;
        border-radius: 14px;
        padding: 15px 12px 12px;
      }

      .brand-block img {
        width: min(266px, 78%);
      }

      .brand-block .card-title {
        font-size: clamp(1.9rem, 8.2vw, 2.45rem);
      }

      .majesco-auth-form {
        margin-bottom: 0.75rem;
      }

      .brand-block .sub-title {
        font-size: 0.94rem;
        margin-bottom: 8px;
      }

      .portal-copy {
        margin: 16px auto 24px;
        font-size: 0.94rem;
        line-height: 1.5;
      }

      .login-action-wrap {
        margin-top: 12px;
        margin-bottom: 11px;
      }

      .feature-grid {
        grid-template-columns: 1fr;
        margin-bottom: 10px;
      }

      .feature-item {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(16, 24, 66, 0.12) !important;
        padding: 8px 2px 11px;
      }

      .feature-item:last-child {
        border-bottom: 0 !important;
      }

      .feature-icon i {
        font-size: 2.5rem;
      }

      .feature-item h3 {
        font-size: 1.02rem;
        font-weight: 600;
      }

      .feature-item p {
        font-size: 0.9rem;
        color: #2f446a;
      }

      .majesco-login-btn {
        font-size: 1rem;
        max-width: 100%;
        padding: 9px 12px;
      }

      .auth-links {
        margin-top: 9px;
        margin-bottom: 3px;
        padding-top: 8px;
        padding-bottom: 6px;
        gap: 5px 9px;
        font-size: 0.78rem;
      }

      .auth-links .sep {
        display: none;
      }

      .auth-copyright {
        margin-top: 9px;
        padding-top: 8px;
        font-size: 0.78rem;
      }
    }