:root {
    --ts-blue-950: #073b72;
    --ts-blue-900: #0757a8;
    --ts-blue-800: #0967bd;
    --ts-blue-700: #146ec1;
    --ts-blue-600: #2f83df;
    --ts-blue-500: #4f91ef;
    --ts-blue-100: #eaf3fc;
    --ts-blue-50: #f5f9fd;

    --ts-text: #101010;
    --ts-text-soft: #3f4348;
    --ts-muted: #6b7280;

    --ts-border: #c8d7e8;
    --ts-border-soft: #dce6f0;

    --ts-page: #eef7ff;
    --ts-white: #ffffff;

    --ts-shadow: 0 16px 36px rgba(24, 72, 117, 0.08);
    --ts-card-shadow: 0 12px 28px rgba(16, 54, 91, 0.08);
}

/* =========================
   RESET
   ========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    color: var(--ts-text);
    background:
        radial-gradient(circle at 14% 16%, rgba(190, 224, 250, 0.26), transparent 31%),
        linear-gradient(135deg, #f1f9ff 0%, #ffffff 58%, #eef8ff 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.d-none,
.hidden {
    display: none !important;
}

/* =========================
   PROGRESS
   ========================= */

.reading-progress {
    position: fixed;
    inset: 0 auto auto 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #0757a8, #31a1ed);
    z-index: 10000;
    transition: width 0.1s ease;
}

/* =========================
   PAGE SHELL
   ========================= */

.apply-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
}

.apply-shell {
    position: relative;
    isolation: isolate;
    width: min(1410px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
    gap: 42px;
    padding: 52px 62px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 30px;
    box-shadow: var(--ts-shadow);
    animation: shellIn 0.55s ease-out both;
}

@keyframes shellIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   LEFT HERO
   ========================= */


.hero-content {
    max-width: 690px;
    padding-left: 30px;
    padding-top: 30px;
}

.hero-badges {
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 27px;
    padding: 8px 18px;
    margin-bottom: 32px;
    border: 1px solid #d3dfeb;
    border-radius: 999px;
    background: #f4f8fc;
    color: #1c2229;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.hero-section h1 {
    margin: 0;
    color: #080808;
    font-size: clamp(38px, 3.15vw, 54px);
    letter-spacing: -1.7px;
    line-height: 1.08;
}

.hero-description {
    max-width: 670px;
    margin-top: 25px;
    color: #484c50;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
}

.benefit-list {
    display: grid;
    gap: 25px;
    margin-top: 38px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.benefit-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #7ea7ce;
    border-radius: 50%;
    background: #edf7ff;
    color: #0875d1;
    font-size: 22px;
}

.benefit-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.benefit-copy strong {
    color: #111;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
}

.benefit-copy span {
    color: #4d5054;
    font-size: 14px;
    line-height: 1.4;
}

.hero-art {
    display: none;
}

/* =========================
   RIGHT FORM AREA
   ========================= */

.application-section {
    position: relative;
    min-width: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
}

.form-card {
    position: relative;
    z-index: 6;

    width: min(100%, 525px);
    min-height: 670px;
    padding: 25px 30px;

    border: 1px solid #b7c9dc;
    border-radius: 25px;

    background: #f5faff;

    box-shadow: 0 14px 28px rgba(30, 68, 105, 0.10);

    text-align: left;

    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/*
|--------------------------------------------------------------------------
| OTP STATE ONLY
|--------------------------------------------------------------------------
| Do NOT change the normal application form height.
| When OTP is visible, let the card wrap naturally around OTP content.
|--------------------------------------------------------------------------
*/

.form-card:has(#otpForm:not(.hidden)) {
    min-height: 0;
    height: auto;
    align-self: flex-start;
}

/* ============================================================
   OTP CARD HEIGHT
   ============================================================ */

/*
 * The normal application form keeps its existing height.
 * Only the OTP state becomes compact.
 */

.form-card:has(#otpForm:not(.hidden)) .otp-card-inner {
    width: 100%;
}

.form-card:has(#otpForm:not(.hidden)) #otpForm {
    width: 100%;
}

.form-card:hover {
    box-shadow: 0 18px 36px rgba(30, 68, 105, 0.12);
}

/* ============================================================
   DESKTOP CENTER ILLUSTRATION
   ============================================================ */

.img-cont {
    position: absolute;

    left: 50%;
    top: 75%;

    width: 350px;
    height: 350px;

    display: none !important;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    /*
     * Behind the application card.
     */
    z-index: 1;

    pointer-events: none;
}

.img-cont::before {
    content: "";
    position: absolute;

    inset: 0;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: #e6f3ff;

    z-index: -1;
}

/* Main illustration */
.img-cont img {
    display: block;

    width: 250px !important;
    max-width: 270px;
    height: auto;

    object-fit: contain;

    position: relative;
    right: 20%;
    z-index: 2;
}


/* =========================
   BRAND
   ========================= */

.logo-wrapper,
.otp-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo-linker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo_img {
    width: 230px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.logo-linker:hover .logo_img {
    transform: scale(1.03);
}

.brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    letter-spacing: -0.5px;
    font-size: 23px;
    font-weight: 750;
}

.brand-timely {
    color: #0758a9;
}

.brand-salary {
    color: #079b7c;
}

.brand-wordmark small {
    margin-top: 4px;
    color: #42617c;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.15px;
    text-align: center;
}

/* =========================
   FORM TYPOGRAPHY
   ========================= */

.form-cnt h2,
#otpForm h2 {
    margin: 0 0 17px;
    color: #111;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.6px;
    line-height: 1.2;
    text-align: left;
}

.form-label {
    display: block;
    margin-bottom: 11px;
    color: #272b30;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.35;
}

.required {
    color: #222;
}

/* =========================
   EMPLOYMENT TYPE
   ========================= */

.income-type-sec {
    margin-bottom: 17px;
}

.income-type-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid #b9cde1;
    padding: 10px;
    border-radius: 10px;
}

.income-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.income-card>input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.income-box {
    position: relative;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 15px;
    border: 1px solid #bfd0e2;
    border-radius: 6px;
    background: #f2f6fa;
    color: #5d7186;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.income-box img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.income-box .img-selected {
    display: none;
}

.income-card input:checked+.income-box {
    border-color: #7da6cd;
    background: #cfe0f1;
    color: #075daf;
    box-shadow: inset 0 0 0 1px rgba(7, 93, 175, 0.03);
}

.income-card input:checked+.income-box .img-default {
    display: none;
}

.income-card input:checked+.income-box .img-selected {
    display: block;
}

.income-box span {
    font-size: 14px;
    font-weight: 500;
}

/* selected indicator */
.income-box::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 19px;
    height: 19px;
    border: 1px solid #c9d6e4;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.income-box::before {
    content: "✓";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    z-index: 1;
}

.income-card input:checked+.income-box::after {
    opacity: 1;
    border-color: #0b64b5;
    background: #0b64b5;
}

.income-card input:checked+.income-box::before {
    opacity: 1;
}

/* =========================
   MONTHLY INCOME
   ========================= */

.income-range-sec {
    margin-bottom: 17px;
}

.income-range-sec .form-select {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #b9cde1;
    border-radius: 7px;
    outline: none;
    background-color: #f0f4f8;
    color: #222;
    font-size: 14px;
    font-weight: 450;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.income-range-sec .form-select:focus {
    border-color: #72a0ca;
    box-shadow: 0 0 0 3px rgba(61, 132, 201, 0.08);
}

/* =========================
   MOBILE
   ========================= */

.mobile-field {
    margin-bottom: 0;
}

.mobile-input-wrap {
    position: relative;
}

.country-code {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #15191d;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
}

.form-control {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 72px !important;
    border: 1px solid #a9c1da !important;
    border-radius: 7px !important;
    outline: none;
    background: #edf2f7 !important;
    color: #16191d !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.form-control::placeholder {
    color: #858b91 !important;
    letter-spacing: 3px;
    opacity: 1;
}

.form-control:focus {
    border-color: #2c7ed2 !important;
    background: #f8fbfe !important;
    box-shadow: 0 0 0 3px rgba(44, 126, 210, 0.09) !important;
}

.input-error {
    border-color: #d84a4a !important;
    background: #fff7f7 !important;
}

.input-success {
    border-color: #82a9cc !important;
    background: #edf2f7 !important;
}

.mobile-error {
    margin: 8px 0 0;
    color: #c73a3a;
    font-size: 12px;
}

/* =========================
   CONSENTS
   ========================= */

.form-actions {
    margin-top: 17px;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0 0 17px;
}

.form-check-input {
    position: relative;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    margin: 1px 0 0 !important;
    border: 1px solid #8297ab;
    border-radius: 5px;
    background-color: transparent;
    box-shadow: none;
    appearance: none;
    cursor: pointer;
}

.form-check-input:checked {
    border-color: #8297ab;
    background-color: transparent;
}

.form-check-input:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54708a;
    font-size: 15px;
    font-weight: 700;
}

.form-check-label {
    padding-top: 0;
    color: #3e4348;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.form-check-label a,
.text-decoration-none {
    color: #30383f;
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.form-check-label a:hover,
.text-decoration-none:hover {
    color: #075daf;
}

.login-form-check .form-check {
    padding-left: 0em !important;
}

/* =========================
   PRIMARY BUTTON
   ========================= */

.btn-apply {
    width: 100%;
    min-height: 59px;
    margin-top: 3px;
    padding: 0 20px;
    border: 1px solid #075aa7;
    border-radius: 14px;
    background: linear-gradient(135deg, #075ba9 0%, #0758a4 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05px;
    cursor: pointer;
    box-shadow: 0 9px 18px rgba(7, 88, 164, 0.16);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease,
        filter 0.2s ease;
}

.btn-apply:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(7, 88, 164, 0.2);
    filter: brightness(1.02);
}

.btn-apply:active:not(:disabled) {
    transform: translateY(0);
}

.btn-apply:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* =========================
   OTP
   ========================= */

#otpForm {
    width: 100%;
    min-width: 0;
}

.otp-card-inner {
    width: 100%;
    min-width: 0;
}

#otpForm .otp-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(22px, 2.2vw, 30px);
}

#otpForm h2 {
    margin: 0 0 clamp(13px, 1.3vw, 17px);
    color: #111;
    font-size: clamp(23px, 2vw, 27px);
    font-weight: 650;
    letter-spacing: -0.5px;
    line-height: 1.2;
    text-align: left;
}

.otp-subtitle {
    width: 100%;
    margin: 0 0 clamp(22px, 2.2vw, 28px);
    color: #343a40;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.otp-subtitle strong {
    color: #343a40;
    font-weight: 600;
}

.otp-input-row {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: clamp(5px, 0.75vw, 10px);

    /*
     * Compact spacing between OTP boxes and Verify button.
     */
    margin-bottom: clamp(32px, 3.2vw, 42px);
}

.otp-box {
    width: 100%;
    min-width: 0;
    height: clamp(50px, 4.8vw, 66px);
    padding: 0 !important;
    border: 1px solid #9db7d3 !important;
    border-radius: clamp(7px, 0.7vw, 9px) !important;
    background: #eaf0f6 !important;
    color: #17202a !important;
    font-size: clamp(18px, 1.7vw, 24px) !important;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    letter-spacing: 0;
    box-shadow: none !important;
    caret-color: #075daf;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.otp-box:focus {
    border-color: #146ed0 !important;
    background: #f5f9fd !important;
    box-shadow: 0 0 0 2px rgba(20, 110, 208, 0.10) !important;
    outline: none;
}

#otpForm .btn-apply {
    width: 100%;
    min-height: clamp(54px, 4.5vw, 60px);
    margin-top: 0;
    padding-inline: clamp(14px, 2vw, 20px);
    border: 1px solid #075aa7;
    border-radius: clamp(7px, 0.7vw, 9px);
    background: #075ba9;
    color: #fff;
    font-size: clamp(15px, 1.25vw, 17px);
    font-weight: 500;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#otpForm .btn-apply:hover:not(:disabled) {
    background: #064f94;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(7, 88, 164, 0.16);
}

#otpForm .btn-apply:active:not(:disabled) {
    transform: translateY(0);
}

.resend-copy {
    margin: clamp(20px, 2.2vw, 26px) 0 0;
    color: #6c7783;
    font-size: clamp(12px, 1.1vw, 15px);
    line-height: 1.5;
    text-align: center;
}

.resend-link {
    color: #075daf;
    font-weight: 650;
    text-decoration: none;
}

.resend-link:hover {
    text-decoration: underline;
}

/* =========================
   FULLSCREEN LOADER
   ========================= */

.fullscreen-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(246, 251, 255, 0.82);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.fullscreen-loader.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loader-card {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 25px 30px;
    border: 1px solid #d3e0ed;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(25, 65, 105, 0.13);
}

.loader-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #dce9f5;
    border-top-color: #1473c7;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loader-text {
    color: #263849;
    font-size: 14px;
    font-weight: 600;
}

.loader-dots::after {
    content: "...";
    display: inline-block;
    width: 18px;
    overflow: hidden;
    vertical-align: bottom;
    animation: loaderDots 1.15s steps(4, end) infinite;
}

@keyframes loaderDots {
    0% {
        width: 0;
    }

    25% {
        width: 6px;
    }

    50% {
        width: 12px;
    }

    75%,
    100% {
        width: 18px;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   SWEETALERT VISUAL MATCH
   ========================= */

div:where(.swal2-container) .swal2-popup {
    border-radius: 18px !important;
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}

div:where(.swal2-container) .swal2-title {
    color: #111 !important;
    font-size: 19px !important;
}

div:where(.swal2-container) .swal2-html-container {
    color: #5d6570 !important;
    font-size: 14px !important;
}

div:where(.swal2-container) .swal2-confirm {
    border-radius: 10px !important;
}

@media (min-width: 992px) {
    .img-cont {
        display: flex !important;
    }
}



/* Large desktop */
@media (min-width: 1440px) {

    .apply-shell {
        width: min(1410px, 100%);
        grid-template-columns: minmax(0, 1.08fr) minmax(450px, 0.92fr);
        gap: clamp(34px, 3vw, 58px);
        padding: clamp(26px, 4vw, 20px);
    }

    .hero-section h1 {
        font-size: clamp(42px, 3.02vw, 42px);
    }

    .form-card {
        width: min(100%, 525px);
    }
}

/* Normal laptops / smaller desktops */
@media (max-width: 1280px) and (min-width: 992px) {
    .apply-page {
        padding: 24px 18px;
    }

    .apply-shell {
        min-height: min(800px, calc(100vh - 48px));
        grid-template-columns: minmax(0, 1fr) minmax(410px, 0.84fr);
        gap: clamp(24px, 3vw, 42px);
        padding: clamp(34px, 4vw, 50px);
    }

    .hero-section h1 {
        font-size: clamp(37px, 3.7vw, 48px);
        letter-spacing: -1.3px;
    }

    .hero-description {
        max-width: 610px;
        font-size: 15px;
        line-height: 1.75;
    }

    .benefit-list {
        gap: 21px;
        margin-top: 32px;
    }

    .form-card {
        width: 100%;
        min-height: 660px;
        padding: 34px clamp(28px, 3vw, 40px);
    }
}

/* Tablet / mobile boundary:
   Hero is intentionally hidden. The application form becomes the complete page. */
@media (max-width: 991px) {

    html,
    body {
        width: 100%;
        min-width: 0;
    }

    body {
        overflow-x: hidden;
        background:
            radial-gradient(circle at 50% 0%, rgba(201, 229, 250, 0.34), transparent 42%),
            #f4f9fd;
    }

    .apply-page {
        width: 100%;
        min-height: 100svh;
        padding:
            clamp(12px, 3vw, 24px) clamp(10px, 3vw, 24px);
        align-items: center;
        justify-content: center;
    }

    .apply-shell {
        width: 100%;
        max-width: 620px;
        min-height: 0;
        display: block;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* MOBILE: only form */
    .hero-section,
    .hero-content,
    .hero-art,
    .hero-image,
    .hero-badges,
    .hero-description,
    .benefit-list {
        display: none !important;
    }

    .application-section {
        width: 100%;
        min-width: 0;
        display: block;
    }

    .form-card {
        width: 100%;
        max-width: 620px;
        min-height: 0;
        margin: 0 auto;
        padding:
            clamp(25px, 5vw, 38px) clamp(18px, 5vw, 42px) clamp(24px, 5vw, 34px);
        border-radius: clamp(18px, 3vw, 25px);
        background: #f5faff;
        box-shadow: 0 12px 30px rgba(30, 68, 105, 0.08);
    }

    .logo-wrapper {
        margin-bottom: clamp(22px, 4vw, 30px);
    }

    .form-cnt h2,
    #otpForm h2 {
        font-size: clamp(24px, 4.2vw, 29px);
        line-height: 1.18;
    }

    .income-type-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .income-box {
        min-height: clamp(68px, 9vw, 76px);
    }

    .income-range-sec .form-select,
    .mobile-input-wrap .form-control {
        height: clamp(52px, 8vw, 56px);
    }

    .btn-apply {
        min-height: clamp(55px, 8vw, 59px);
    }
}

/* Phones */
@media (max-width: 600px) {
    .apply-page {
        min-height: 100svh;
        padding: 10px;
        align-items: flex-start;
    }

    .apply-shell {
        max-width: 100%;
    }

    .form-card {
      width: 100%;
    max-width: 100%;

    padding:
        clamp(22px, 7vw, 28px)
        clamp(18px, 6vw, 26px)
        clamp(22px, 7vw, 28px);

    border-radius: 18px;
    }

    .logo-wrapper,
    #otpForm .otp-logo {
        margin-bottom: 22px;
    }

    .logo_img {
        width: 150px;
        height: 40px;
    }

    .brand-wordmark {
        font-size: clamp(18px, 5.2vw, 21px);
    }

    .brand-wordmark small {
        font-size: 7px;
    }

    .form-cnt h2,
    #otpForm h2 {
        margin-bottom: 17px;
        font-size: clamp(23px, 7vw, 27px);
    }

    .income-type-sec {
        margin-bottom: 23px;
    }

    .income-type-wrapper {
        gap: 8px;
    }

    .income-box {
        min-height: 68px;
        gap: 7px;
        padding: 9px 7px;
    }

    .income-box img {
        width: 23px;
        height: 23px;
    }

    .income-box span {
        font-size: clamp(11px, 3.2vw, 13px);
    }

    .income-box::after,
    .income-box::before {
        top: 8px;
        right: 8px;
    }

    .form-label {
        margin-bottom: 9px;
        font-size: 13px;
    }

    .income-range-sec {
        margin-bottom: 22px;
    }

    .income-range-sec .form-select,
    .mobile-input-wrap .form-control {
        height: 54px;
    }

    .country-code {
        left: 15px;
        font-size: 13px;
    }

    .form-control {
        padding-left: 69px !important;
        font-size: 13px !important;
    }

    .form-control::placeholder {
        letter-spacing: 2.4px;
    }

    .form-actions {
        margin-top: 26px;
    }

    .consent-row {
        gap: 11px;
        margin-bottom: 17px;
    }

    .form-check-input {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .form-check-label {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .btn-apply {
        min-height: 56px;
        border-radius: 13px;
        font-size: 15px;
    }

    /* ============================================================
       OTP - MOBILE
       ============================================================ */

    #otpForm h2 {
        font-size: clamp(22px, 7vw, 27px);
    }

    .otp-subtitle {
        margin-bottom: clamp(20px, 6vw, 28px);
        font-size: clamp(13px, 3.5vw, 15px);
    }

    .otp-input-row {
        width: 100%;
        display: flex;
        align-items: stretch;

        gap: clamp(5px, 2vw, 8px);

        margin-bottom: clamp(30px, 8vw, 42px);

        overflow: visible;
    }

    .otp-box {
        /*
     * Each box gets exactly the same available width.
     * flex-basis: 0 prevents one box from becoming wider
     * because of input/browser sizing.
     */
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: none;

        height: clamp(50px, 14vw, 62px);

        padding: 0 !important;

        border-radius: clamp(8px, 2.5vw, 10px) !important;

        font-size: clamp(18px, 5.5vw, 23px) !important;

        box-sizing: border-box;
    }

    #otpForm .btn-apply {
        min-height: clamp(54px, 15vw, 58px);
        font-size: clamp(15px, 4.2vw, 16px);
    }

    .resend-copy {
        margin-top: clamp(20px, 6vw, 26px);
        font-size: clamp(12px, 3.5vw, 14px);
    }
}

/* Small phones */
@media (max-width: 390px) {
    .apply-page {
        padding: 7px;
    }

    .form-card {
        padding: 20px 13px 21px;
        border-radius: 16px;
    }

    .logo-wrapper {
        margin-bottom: 19px;
    }

    .form-cnt h2,
    #otpForm h2 {
        font-size: 23px;
        margin-bottom: 21px;
    }

    .income-type-wrapper {
        gap: 6px;
    }

    .income-box {
        min-height: 64px;
        gap: 4px;
        padding-inline: 5px;
    }

    .income-box img {
        width: 21px;
        height: 21px;
    }

    .income-box span {
        font-size: 10.5px;
    }

    .income-box::after,
    .income-box::before {
        top: 6px;
        right: 6px;
        width: 17px;
        height: 17px;
    }

    .form-check-label {
        font-size: 12px;
    }

    .otp-input-row {
        gap: 4px;
        margin-bottom: 32px;
    }

    .otp-box {
        flex: 1 1 0;
        width: 0;
        min-width: 0;

        height: 50px;

        border-radius: 8px !important;

        font-size: 19px !important;
    }
}

/* Very small phones */
@media (max-width: 340px) {
    .apply-page {
        padding: 4px;
    }

    .form-card {
        padding-inline: 11px;
    }

    .income-box span {
        font-size: 10px;
    }

    .form-check-label {
        font-size: 11.5px;
    }

    .otp-input-row {
        gap: 3px;
        margin-bottom: 28px;
    }

    .otp-box {
        height: 47px;
        border-radius: 7px !important;
        font-size: 18px !important;
    }

    #otpForm .btn-apply {
        min-height: 52px;
    }
}



/* Landscape phones: keep the form compact enough to fit without horizontal
   scrolling while still allowing normal vertical scrolling. */
@media (max-width: 991px) and (orientation: landscape) {
    .apply-page {
        align-items: flex-start;
        padding-block: 12px;
    }

    .form-card {
        max-width: 650px;
    }
}

/* Accessibility / reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}