/* Base responsive hardening */
/* Cross-page responsive and browser compatibility hardening. */


@supports not (overflow: clip) {
    .page-bg {
        overflow-x: hidden;
    }
}

/* NRI address proof: keep the selector and upload action on separate columns. */
@media (max-width: 1280px) {
    .document-page:not(.rekyc-address-change) .upload-row-address .document-select-field,
    .document-page:not(.rekyc-address-change) .upload-row-address .document-upload-input {
        grid-column: 2;
        justify-self: stretch;
        width: 100%;
        align-items: stretch;
    }

    .document-page:not(.rekyc-address-change) .upload-row-address .upload-action,
    .document-page:not(.rekyc-address-change) .upload-row-address .upload-preview {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .document-page:not(.rekyc-address-change) .upload-row-address .document-select-field,
    .document-page:not(.rekyc-address-change) .upload-row-address .document-upload-input {
        grid-column: 1 / -1;
    }
}

/* <= 1399px */

/* 1281px to 1440px */
@media (max-width: 1440px) and (min-width: 1281px) {
    .landing-hero-device {
        right: -72px;
        width: 365px;
    }
}

/* <= 1399px */
@media (max-width: 1399px) {
    .top-header,
    .main-container,
    .footer-container {
        width: min(1280px, calc(100% - 64px));
    }
}

/* <= 1280px */
@media (max-width: 1280px) {
    .personal-page .main-container {
        max-width: calc(100% - 40px);
    }
    .income-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }    .document-page .main-container {
        max-width: calc(100% - 40px);
    }
    .upload-row,
    .upload-row-derivative {
        grid-template-columns: 70px 1fr;
    }
    .document-select-field,
    .upload-action,
    .doc-switch,
    .segment-check,
    .upload-preview {
        grid-column: 2;
        justify-self: start;
    }
    .upload-preview {
        grid-row: auto;
    }    .photo-page .main-container {
        max-width: calc(100% - 40px);
    }
    .photo-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .photo-verification-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
    .photo-panel {
        min-height: auto;
    }
    .photo-camera-preview {
        height: auto;
        aspect-ratio: 496 / 470;
    }    .esign-page .main-container {
        max-width: calc(100% - 40px);
        padding: 22px 28px 18px;
    }
    .esign-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .esign-content-grid {
        grid-template-columns: 1fr;
    }
    .landing-page .page-bg {
        padding: 16px;
    }
    .landing-header {
        width: 100%;
    }
    .landing-wrap {
        width: min(1120px, 100%);
    }
    .landing-card {
        grid-template-columns: 1fr;
    }
    .landing-info,
    .landing-trust-row {
        display: none;
    }
    .landing-login {
        min-height: auto;
    }
    .landing-login {
        padding: 42px 54px 54px;
    }
    .landing-voice {
        margin-top: 60px;
    }
}

/* <= 1210px */
@media (max-width: 1210px) {
    .top-header,
    .main-container,
    .footer-container {
        width: calc(100% - 100px);
    }

    .footer-container {
        text-align: center;
    }

    .footer-container > * {
        min-width: 0;
    }

    .form-actions,
    .bank-actions,
    .manual-actions,
    .pan-bottom-nav {
        flex-wrap: wrap;
    }    .pan-page .main-container {
        min-height: 0;
    }
    .pan-workspace {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 0 0;
    }
    .pan-visual {
        width: 368px;
        margin: 0 auto;
    }
    .pan-form {
        width: 608px;
        max-width: 100%;
        margin: 0 auto;
    }    .bank-status-row,
    .bank-qr-grid,
    .form-grid.two-col {
        grid-template-columns: 1fr;
    }
    .bank-actions,
    .manual-actions {
        grid-template-columns: 1fr;
    }
    .bank-field-account,
    .bank-field-ifsc,
    .bank-field-name,
    .bank-field-branch,
    .bank-field-pincode,
    .bank-field-wide {
        grid-column: auto;
        grid-row: auto;
    }    .bank-page .manual-actions {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "prev proceed";
    }
    .bank-page .manual-actions .inline_loader {
        display: none;
    }
}

/* <= 1180px */
@media (max-width: 1180px) {
    
    .dot-grid, .bg-circle {
        display: none;
    }
    .pan-page .main-container {
        display: block;
    }

    .pan-page .pan-success {
        width: 100%;
    }

    .pan-page .pan-workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 32px 0 0;
    }

    .pan-page .pan-form {
        width: min(100%, 608px);
        margin: 0 auto;
    }

    .pan-page .pan-visual {
        display: none;
    }

    .pan-page .pan-workspace {
        padding-top: 24px;
    }

    .pan-page .pan-input {
        height: 52px;
        min-height: 52px;
        line-height: 52px;
    }
    .form-control,
    select.form-control,
    textarea.form-control {
        font-size: 12px;
    }

    .bank-page .main-container {
        display: block;
    }

    .bank-page .bank-status-row,
    .bank-page .bank-qr-grid,
    .bank-page .bank-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .bank-page .bank-field-account,
    .bank-page .bank-field-ifsc,
    .bank-page .bank-field-name,
    .bank-page .bank-field-branch,
    .bank-page .bank-field-pincode,
    .bank-page .bank-field-wide {
        grid-column: auto;
        grid-row: auto;
    }

    .bank-page .bank-actions,
    .bank-page .manual-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .bank-page .bank-manual-card,
    .bank-page .bank-qr-grid,
    .bank-page .charge-note,
    .bank-page .bank-actions {
        width: min(100%, 680px);
        margin-left: auto;
        margin-right: auto;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .pan-bottom-nav,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .manual-actions,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .document-actions,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .esign-actions {
        width: min(100%, 640px);
        margin-left: auto;
        margin-right: auto;
        padding-top: 14px;
        border-top: 1px solid #d9dfec;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .pan-bottom-nav .btn,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .manual-actions .btn,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .document-actions .btn,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .esign-actions .btn {
        width: 100%;
        min-height: 48px;
        height: 48px;
        border-radius: 8px;
        font-size: 14px;
        gap: 12px;
    }

    .email-page .main-container {
        margin-top: 12px;
        padding: 26px 22px;
        border-radius: 14px;
    }

    .email-section {
        max-width: 640px;
        margin: 0 auto;
    }

    .email-hero {
        width: 172px;
        height: 124px;
        margin-bottom: 6px;
    }

    .email-subtitle {
        max-width: 520px;
        margin: 14px auto 0;
        font-size: 15px;
        line-height: 1.45;
    }

    .email-form { 
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }

    .email-input {
        height: 52px;
        min-height: 52px;
        line-height: 52px;
    } 

    .email-or {
        margin: 18px 0;
        gap: 12px;
    }

    .email-or b {
        font-size: 13px;
    }

    .email-providers {
        gap: 12px;
    }

    .email-provider {
        min-height: 52px;
        height: 52px;
        padding: 10px 12px;
        font-size: 13px;
        white-space: normal;
    }

    .email-security {
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.45;
    }

    .email-page .email-actions {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .personal-page .main-container {
        margin-top: 12px;
        padding: 24px 22px 20px;
        border-radius: 14px;
    }

    .personal-form {
        margin-top: 16px;
    }

    .personal-card {
        padding: 16px;
        border-radius: 10px;
    }

    .personal-block {
        gap: 12px;
        padding-bottom: 18px;
    }

    .personal-block + .personal-block {
        padding-top: 18px;
    }

    .personal-block-content h2 {
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 1.25;
    }

    .personal-grid {
        gap: 14px 18px;
    }

    .personal-page .form-control-compact,
    .personal-page select.form-control-compact {
        height: 52px;
        min-height: 52px;
        line-height: 52px;
        font-size: 12px;
    }

    .personal-page .choice-option {
        min-height: 48px;
        height: auto;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.2;
    }

    .personal-page .personal-actions {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .document-page .main-container {
        margin-top: 12px;
        padding: 24px 22px 20px;
        border-radius: 14px;
    }

    .document-heading {
        margin-bottom: 18px;
    }

    .document-hero-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
    }

    .document-heading .ui-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .document-heading p {
        font-size: 12px;
        line-height: 1;
        margin: 8px 0 0;
    }

    .upload-row,
    .upload-row-derivative,
    .upload-row-derivative.is-collapsed {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        min-height: 0;
    }

    .upload-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .upload-copy h2,
    .nominee-head h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    .upload-copy p {
        font-size: 12px;
        line-height: 1.35;
    }

    .document-select-field,
    .upload-action,
    .doc-switch,
    .segment-check,
    .upload-preview,
    .upload-row-signature .upload-copy,
    .upload-row-signature .upload-action,
    .upload-row-signature .upload-preview,
    .upload-row > .document-error {
        grid-column: 2;
        justify-self: stretch;
    }

    .upload-action,
    .document-control,
    select.document-control {
        width: 100%;
        min-height: 52px;
        height: 52px;
        font-size: 12px;
    }

    .upload-preview {
        width: 100%;
        grid-row: auto;
    }

    .document-page .document-actions {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .photo-page .main-container {
        margin-top: 12px;
        padding: 24px 22px 20px;
        border-radius: 14px;
    }

    .photo-heading {
        margin-bottom: 18px;
    }

    .photo-page .ui-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .photo-verification-grid {
        width: 100%;
        max-width: 640px;
        gap: 16px;
    }

    .photo-camera-column {
        order: -1;
    }

    .photo-camera-preview {
        aspect-ratio: 4 / 3;
        height: auto;
        min-height: 0;
        max-height: 420px;
    }

    .photo-panel {
        min-height: 0;
    }

    .photo-guidelines,
    .photo-trust {
        padding: 18px;
    }

    .photo-guidelines h2 {
        max-width: none;
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 1.25;
    }

    .photo-guideline-list,
    .photo-benefit-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }

    .photo-guideline-list li,
    .photo-benefit-list li {
        min-height: 0;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        border-bottom: 0;
    }

    .photo-guideline-list span,
    .photo-benefit-list span {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 15px;
    }

    .photo-guideline-list p,
    .photo-benefit-list p {
        font-size: 12px;
        line-height: 1.35;
    }

    .photo-liveness-art {
        display: none;
    }

    .photo-status-box,
    .photo-camera-actions {
        width: min(100%, 420px);
    }

    .photo-camera-actions .btn {
        min-height: 52px;
        height: 52px;
    }

    .esign-page .main-container {
        margin: 12px auto 0;
        padding: 24px 22px 20px;
        border-radius: 14px;
    }
    .esign-illustration{
        display: none;
    }
    .esign-heading {
        margin-bottom: 18px;
    }

    .esign-page .ui-title {
        font-size: 24px;
        line-height: 1.2;
    }
    .esign-content-grid,
    .esign-consent-form {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .esign-content-grid {
        gap: 14px;
    }

    .esign-summary-card,
    .esign-visual-card {
        min-height: 0;
        padding: 16px;
    }

    .esign-summary-card h2 {
        margin-bottom: 12px;
        padding-bottom: 12px;
        font-size: 16px;
        line-height: 1.25;
    }

    .esign-summary-list div {
        min-height: 36px;
    }

    .esign-summary-list dt,
    .esign-summary-list dd {
        font-size: 12px;
    }

    .esign-illustration img {
        width: min(260px, 70%);
        margin: 0 auto;
    }

    .esign-visual-card h2 {
        font-size: 18px;
        line-height: 1.25;
    }

    .esign-visual-card p,
    .esign-consent em,
    .esign-secure-note {
        font-size: 10px;
        line-height: 1.45;
    }

    .esign-consent-form {
        margin-top: 14px;
    }

    .congrats-container {
        width: min(900px, calc(100% - 28px));
        margin-top: 12px;
    }

    .congrats-card {
        min-height: 0;
        padding: 28px 30px;
    }    #aadhar_verify_pop.aadhaar-modal {
        width: min(980px, calc(100vw - 36px));
        padding: 24px;
    }
    #aadhar_verify_pop .aadhaar-modal-head h2 {
        font-size: 32px;
        gap: 18px;
    }
    #aadhar_verify_pop .aadhaar-modal-head p {
        font-size: 18px;
    }
    #aadhar_verify_pop .aadhaar-detail-card {
        grid-template-columns: 1fr;
    }
    #aadhar_verify_pop .aadhaar-photo-card {
        width: min(320px, 100%);
        min-height: 0;
        margin: 0 auto;
    }    .bank-page .manual-actions {
        width: 100%;
        max-width: none;
        margin: 16px 0 0;
        padding: 0;
        border-top: 0;
        grid-template-columns: minmax(150px, 190px) 1fr minmax(200px, 240px);
        grid-template-areas: "prev spacer proceed";
    }
        .existing-main {
        width: min(100% - 32px, 920px);
        padding: 32px 26px 34px;
    }

    .existing-table th,
    .existing-table td {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 14px;
    }

    .existing-security {
        grid-template-columns: 64px minmax(0, 1fr) 90px;
    }

    .existing-security-lock {
        font-size: 68px;
    }
    .new-user-wrap {
        width: min(100% - 40px, 920px);
    }

    .new-user-card {
        grid-template-columns: 1fr;
    }

    .new-user-info {  
        padding: 34px 32px 30px;
        display:none;
    }

    .new-user-form-panel {
        padding: 36px 44px 40px;
    }

    .new-user-form {
        width: 100%;
    }

    .new-user-trust-row {
        width: min(100% - 40px, 920px);
        padding: 22px 28px;
    }

    .new-user-trust-row > div + div {
        padding-left: 28px;
    }
}

/* 921px to 1180px */
@media (min-width: 921px) and (max-width: 1180px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(160px, auto) 48px 48px;
        grid-template-rows: auto auto;
        align-items: center;
        width: min(100% - 48px, 900px);
        height: auto;
        min-height: 0;
        padding: 12px;
        gap: 10px;
        border-radius: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
    
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 28px;
        line-height: .9;
        letter-spacing: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        max-width: 120px;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.08;
        white-space: normal;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        width: auto;
        height: 48px;
        min-height: 48px;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        color: var(--navy);
        font-size: 15px;
        line-height: 1;
        font-weight: 900;
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 48px;
        height: 48px;
        min-height: 48px;
        border-radius: 12px;
        padding: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: inline-flex;
        position: static;
        color: #1258ff;
        font-size: 19px;
        pointer-events: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        content: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        font-size: 0;
        gap: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        font-size: 20px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        margin-top: 2px;
        gap: 7px;
        padding: 8px;
        border-radius: 13px;
        overflow: visible;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        min-height: 52px;
        border-radius: 10px;
        padding: 6px 3px;
        gap: 4px;
        text-align: center;
        justify-items: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 7.4px;
        line-height: 1;
        font-weight: 800;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container {
        width: min(100% - 48px, 900px);
        grid-template-columns: minmax(0, 1fr);
        margin-top: 16px;
        padding: 28px 26px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .info-panel {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-panel {
        padding: 18px 24px 4px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-inputs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: min(100%, 520px);
        margin: 0 auto;
        gap: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-input {
        width: 100%;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .agree-line {
        max-width: 620px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container {
        width: min(100% - 48px, 900px);
        grid-template-columns: 1fr 1fr 1fr;
        height: auto;
        min-height: 96px;
        padding: 18px 20px;
        gap: 14px;
        border-radius: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-divider {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .voice-assist,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .powered,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .built {
        min-height: 60px;
        justify-content: center;
        gap: 12px;
        text-align: left;
    }
}

/* 921px to 1180px, height >= 900px */
@media (min-width: 921px) and (max-width: 1180px) and (min-height: 900px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) {
        display: block;
        padding: 0;
        margin-top: 14px;
        border-radius: 14px;
        overflow: hidden;
    }

   

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .info-panel {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .otp-panel {
        width: 100%;
        max-width: 100%;
        padding: 24px 14px 16px;
        box-sizing: border-box;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .phone-badge {
        width: 56px;
        height: 56px;
        margin: 0 auto 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .mobile-line {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .mobile-line strong {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .sent-copy {
        max-width: 320px;
        margin: 12px auto 20px;
        font-size: 13px;
        line-height: 1.4;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .otp-inputs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .otp-input {
        width: 100%;
        min-width: 0;
        height: 58px;
        border-radius: 8px;
        font-size: 26px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .resend {
        margin: 16px 0 14px;
        font-size: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container:has(.otp-panel) .agree-line {
        max-width: 320px;
        margin: 16px auto 0;
        font-size: 10px;
        line-height: 1.42;
    }
}

/* 641px to 1180px */
@media (min-width: 641px) and (max-width: 1180px) {
    .pan-page .pan-visual {
        min-height: 245px;
        width: min(100%, 368px);
        margin: 0 auto;
    }
    .built,.footer-divider{
        display:none;
    }

    .pan-page .pan-section {
        padding-top: 22px;
    }

    .pan-page .pan-bottom-nav {
        max-width: 608px;
        margin-left: auto;
        margin-right: auto;
    }

    .bank-page .bank-status-row {
        gap: 14px;
    }

    .bank-page .bank-card {
        min-height: auto;
    }

    .bank-page .bank-scan-card {
        display: none;
    }

    .bank-page .bank-actions {
        grid-template-columns: 1fr 1.35fr 1fr;
        gap: 14px;
    }

    .bank-page .manual-actions {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .personal-page .personal-grid.two-col,
    .personal-page .fatca-panel,
    .personal-page .tax-extra-fields,
    .personal-page .declaration-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .personal-page .education-options,
    .personal-page .occupation-options,
    .personal-page .income-options,
    .personal-page .experience-options {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }

    .personal-page .source-options {
        width: 100%;
        max-width: 520px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 12px;
    }

    .personal-page .income-options .choice-option,
    .personal-page .experience-options .choice-option {
        padding: 10px 12px;
        font-size: 12px;
    }

    .document-page .document-actions {
        width: min(100%, 640px);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }

    .document-page .document-action-group {
        display: contents;
    }

    .document-page .document-actions .btn,
    .document-page .document-add-nominee,
    .document-page .pan-prev,
    .document-page .pan-next {
        width: 100%;
        min-width: 0;
        height: 52px;
        min-height: 52px;
        padding-inline: 10px;
        font-size: 13px;
        white-space: nowrap;
    }

    body.document-page .document-actions.pan-bottom-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: min(100%, 640px);
    }

    body.document-page .document-actions.pan-bottom-nav .document-action-group {
        display: contents;
    }

    body.document-page .document-actions.pan-bottom-nav .pan-prev,
    body.document-page .document-actions.pan-bottom-nav .document-add-nominee,
    body.document-page .document-actions.pan-bottom-nav .pan-next {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 52px;
        min-height: 52px;
    }
}

/* <= 920px */
@media (max-width: 920px) {
 
    .top-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-area,
    .help-area {
        min-width: 0;
    }

    .brand-copy strong {
        font-size: 24px;
        line-height: 1;
        letter-spacing: 0;
    }

    .stepper {
        width: 100%;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .ring{
        display:none;
    }

    .help-area {
        padding-left: 0;
    }

    .landing-page .page-bg {
        padding: 12px;
    }

    .landing-header,
    .landing-wrap {
        width: calc(100% - 150px);
    }
    .landing-wrap{
        margin-top: 10px;
    }
    .landing-login h2{
        font-size: 24px
    }
    .landing-login > p{
        font-size: 11px;
    }

    .landing-header {
        height: auto;
        min-height: 0;
        margin: 0 auto;
        padding: 18px;
        border-radius: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .landing-brand {
        justify-content: center;
    }

    .landing-brand img {
        width: min(100%, 240px);
        max-width: 240px;
    }

    .landing-header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .landing-header-divider {
        display: none;
    }

    .landing-lang {
        width: 100%;
        height: 50px;
        min-height: 50px;
        border-radius: 13px;
        padding: 0 42px 0 22px;
    }

    .landing-help {
        width: 100%;
        justify-content: center;
        gap: 10px;
        font-size: 15px;
        line-height: 1.25;
        text-align: center;
    }

    .landing-card {
        min-height: 0;
        grid-template-columns: 1fr;
        border-radius: 16px;
    }
    .bank-scan-card{
        display: none;
    }
    .bank-status-row{
        gap: 10px;
    }

    .landing-login {
        min-height: auto;
        padding: 32px 22px 34px;
    }

    .landing-voice {
        margin-top: 36px;
    }

    .landing-dot-grid,
    .landing-bg-circle,
    .landing-wave-lines {
        display: none;
    }
    .mbhide{
        display: none;
    }
    .desktophide{
        display: block;
    }
    .landing-header {
        padding: 14px;
        border: 1px solid rgba(205, 216, 239, 0.9);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
        box-shadow: 0 18px 38px rgba(30, 68, 143, 0.12);
        gap: 14px;
                width: min(100% - 32px, 680px);
    }

    .landing-brand {
        min-height: 76px;
        border-radius: 14px;
        justify-content: center;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(223, 230, 244, 0.86);
    }

    .landing-brand img {
        width: auto;
        max-width: min(76%, 224px);
        max-height: 58px;
    }

    .landing-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
        align-items: stretch;
        gap: 10px;
    }

    .landing-lang,
    .landing-help {
        min-height: 48px;
        border-radius: 14px;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(223, 230, 244, 0.92);
    }

    .landing-lang {
        height: 48px;
        padding: 0 36px 0 16px;
        gap: 10px;
        font-size: 15px;
    }

    .landing-lang::after {
        right: 16px;
    }

    .landing-lang i:first-child,
    .landing-help i {
        font-size: 19px;
    }

    .landing-lang .lang-select {
        font-size: 13px;
    }

    .landing-help {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 12px;
        gap: 8px;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .landing-help strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 42px rgba(30, 68, 143, 0.13);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        width: 100%;
        justify-content: center;
        padding-bottom: 2px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        height: auto;
        min-height: 46px;
        margin: 0;
        padding: 0 16px;
        border: 1px solid #dfe6f4;
        border-radius: 14px;
        background: #fff;
        justify-content: center;
        box-shadow: 0 8px 18px rgba(30, 68, 143, 0.06);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        justify-content: flex-end;
        gap: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(8, minmax(78px, 1fr));
        gap: 8px;
        padding: 12px;
        border: 1px solid #dfe6f4;
        border-radius: 16px;
        background: linear-gradient(180deg, #f9fbff, #fff);
        overflow-x: auto;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    }

    /* body:not(.landing-page,.navia-zero-page,.new-user-page) .step {
        width: auto;
        min-width: 0;
        min-height: 72px;
        border: 1px solid #e0e7f5;
        border-radius: 13px;
        background: #fff;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 7px;
        padding: 9px 8px;
        box-shadow: 0 7px 16px rgba(30, 68, 143, 0.05);
    } */

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span {
        width: 30px;
        height: 30px;
        margin: 0;
        font-size: 12px;
        box-shadow: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p {
        font-size: 10px;
        line-height: 1.15;
        color: #07145f;
    }

    /* body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        border-color: rgba(255, 16, 24, 0.42);
        background: linear-gradient(180deg, #fff5f6, #fff);
        box-shadow: 0 10px 20px rgba(255, 16, 24, 0.1);
    } */

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .info-panel {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        width: 100%;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        width: 100%;
        max-width: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 112px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        gap: 8px;
        padding: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        width: auto;
        min-width: 0;
        min-height: 62px;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        justify-items: center;
        align-content: center;
        align-items: center;
        text-align: center;
        padding: 8px 4px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 28px;
        height: 28px;
        margin: 0;
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        width: 100%;
        font-size: 9px;
        line-height: 1.08;
    }
      .payment-page .payment-container {
    margin-top: 18px;
  }

  .payment-shell {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    padding: 28px 18px;
    border-radius: 18px;
  }

  .payment-shell::after {
    display: none;
  }

  .payment-title-row {
    gap: 18px;
  }

  .payment-icon-badge {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    font-size: 25px;
  }

  .payment-icon-badge .fa-shield-halved {
    right: 14px;
    bottom: 20px;
    width: 23px;
    height: 23px;
    font-size: 11px;
  }

  .payment-title {
    font-size: 28px;
  }

  .payment-subtitle {
    font-size: 16px;
  }

  .payment-input-wrap,
  .payment-coupon-btn,
  .payment-promo-note {
    max-width: none;
    width: 100%;
  }

  .payment-summary-card {
    padding: 24px 18px;
  }
}

/* 641px to 920px */
@media (min-width: 641px) and (max-width: 920px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-template-columns: minmax(180px, 1fr) minmax(150px, 190px) 112px;
        align-items: center;
        gap: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        height: 48px;
        min-height: 48px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        padding: 0 14px;
        gap: 10px;
        font-size: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        width: 100%;
        max-width: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 112px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        display: grid;
        grid-template-columns: minmax(160px, 1fr) minmax(150px, auto) 48px 48px;
        grid-template-rows: auto auto;
        align-items: center;
        width: min(100% - 32px, 680px);
        height: auto;
        min-height: 0;
        padding: 12px;
        gap: 8px;
        border-radius: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        width: auto;
        height: 66px;
        min-height: 66px;
        min-width: 0;
        padding: 8px 14px;
        gap: 10px;
        justify-content: flex-start;
        border-radius: 13px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 26px;
        line-height: .88;
        letter-spacing: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        max-width: 92px;
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.05;
        white-space: normal;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        width: auto;
        height: 46px;
        min-height: 46px;
        padding: 0 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        color: var(--navy);
        font-size: 14px;
        line-height: 1;
        font-weight: 900;
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 46px;
        height: 46px;
        min-height: 46px;
        border-radius: 12px;
        padding: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: inline-flex;
        position: static;
        color: #1258ff;
        font-size: 18px;
        pointer-events: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        content: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        font-size: 0;
        gap: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        font-size: 19px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        margin-top: 2px;
        gap: 6px;
        padding: 7px;
        border-radius: 12px;
        overflow: visible;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        min-height: 48px;
        border-radius: 9px;
        padding: 5px 2px;
        gap: 4px;
        text-align: center;
        justify-items: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 7px;
        line-height: 1;
        font-weight: 800;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container,
    body:not(.landing-page,.navia-zero-page) .footer-container {
        width: min(100% - 32px, 680px);
    }

    body:not(.landing-page,.navia-zero-page) .footer-container {
        grid-template-columns: 1fr 1fr 1fr;
        height: auto;
        min-height: 92px;
        padding: 16px;
        gap: 12px;
        border-radius: 16px;
    }

    body:not(.landing-page,.navia-zero-page) .footer-divider {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .voice-assist,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .powered,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .built {
        min-height: 58px;
        justify-content: center;
        gap: 10px;
        text-align: left;
    }

    body:not(.landing-page,.navia-zero-page) .powered p {
        font-size: 11px;
        line-height: 1.25;
    }
}

/* 641px to 920px, plus 921px to 1180px height >= 900px */
@media (min-width: 641px) and (max-width: 920px), (min-width: 921px) and (max-width: 1180px) and (min-height: 900px) {
     body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        grid-template-columns: minmax(104px, 1fr) minmax(86px, auto) 40px 40px;
        max-width: 100%;
        padding: 8px;
        gap: 5px;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        min-width: 0;
        padding: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
        width: min(100%, 112px);
        height: auto;
        object-fit: contain;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        width: auto;
        min-width: 0;
        padding: 0 3px;
        gap: 4px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        font-size: 11px;
        letter-spacing: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        flex: 0 0 40px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        display: inline-flex;
        font-size: 17px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn span {
        display: none;
    }
    
    body:not(.landing-page,.navia-zero-page,.new-user-page) .page-bg {
        padding-top: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        min-height: 58px;
        height: 58px;
        justify-content: flex-start;
        padding: 8px 12px;
        gap: 10px;
        border-radius: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area img {
        max-width: 150px;
        max-height: 44px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 24px;
        line-height: .9;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        max-width: 90px;
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.05;
        white-space: normal;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
        height: 42px;
        min-height: 42px;
        padding: 0 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        font-size: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        color: var(--navy);
        font-size: 12px;
        line-height: 1;
        font-weight: 900;
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 42px;
        height: 42px;
        min-height: 42px;
        border-radius: 11px;
        padding: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: inline-flex;
        position: static;
        color: #1258ff;
        font-size: 16px;
        pointer-events: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        content: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        grid-column: 4;
        grid-row: 1;
        font-size: 0;
        gap: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        margin-top: 2px;
        gap: 4px;
        padding: 6px;
        border-radius: 12px;
        overflow: visible;
        scroll-snap-type: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        min-width: 0;
        min-height: 48px;
        border-radius: 9px;
        padding: 5px 2px;
        gap: 4px;
        text-align: center;
        justify-items: center;
        align-content: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 22px;
        height: 22px;
        font-size: 10px;
        border-width: 1.5px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        width: 100%;
        font-size: 6.8px;
        line-height: 1;
        font-weight: 800;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        align-items: stretch;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 14px;
        gap: 10px;
        border-radius: 14px;
        overflow: visible;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-divider {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .voice-assist,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .powered,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .built {
        display: flex;
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        text-align: left;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .mic-circle,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .outline-badge,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .play-dot,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .code-badge {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .powered > div,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .built > strong,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .voice-assist > strong {
        min-width: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .powered strong,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .built strong,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .voice-assist strong {
        font-size: 12px;
        line-height: 1.2;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .powered p {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.25;
    }
    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        display: grid;
        grid-template-columns: minmax(150px, 1fr) minmax(92px, auto) 42px 42px;
        grid-template-rows: 58px auto;
        align-items: center;
        min-height: 0;
        height: auto;
        padding: 10px;
        gap: 8px;
        border-radius: 14px;
        overflow: visible;
        border-right: none;
    }
     body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area{
        border-right: none;
     }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        align-self: center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        position: static;
        grid-column: 1 / -1;
        grid-row: 2;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    body:not(.landing-page,.navia-zero-page) .main-container {
        margin-top: 14px;
    }

    body:not(.landing-page,.navia-zero-page) .footer-container {
        margin-top: 14px;
        justify-items: stretch;
    }
    body:not(.landing-page,.navia-zero-page) .footer-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        min-height: 92px;
        height: auto;
        padding: 16px 18px;
        gap: 12px;
        border-radius: 14px;
    }

    body:not(.landing-page,.navia-zero-page) .footer-divider {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page) .voice-assist,
    body:not(.landing-page,.navia-zero-page) .powered,
    body:not(.landing-page,.navia-zero-page) .built {
        width: 100%;
        min-height: 52px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: left;
    }

    body:not(.landing-page,.navia-zero-page) .mic-circle,
    body:not(.landing-page,.navia-zero-page) .outline-badge,
    body:not(.landing-page,.navia-zero-page) .play-dot,
    body:not(.landing-page,.navia-zero-page) .code-badge {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    body:not(.landing-page,.navia-zero-page) .powered strong,
    body:not(.landing-page,.navia-zero-page) .built strong,
    body:not(.landing-page,.navia-zero-page) .voice-assist strong {
        font-size: 12px;
        line-height: 1.2;
    }

    body:not(.landing-page,.navia-zero-page) .powered p {
        margin-top: 3px;
        font-size: 10.5px;
        line-height: 1.2;
    }    .personal-page .main-container,
    .personal-page .footer-container {
        width: min(100% - 32px, 640px);
    }

    .personal-page .main-container {
        padding: 22px 18px 18px;
        overflow: hidden;
    }

    .personal-page .personal-card {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .personal-page .personal-block {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
    }

    .personal-page .personal-block-content,
    .personal-page .personal-field,
    .personal-page .choice-grid {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .personal-page .personal-grid,
    .personal-page .personal-grid.two-col,
    .personal-page .fatca-panel,
    .personal-page .tax-extra-fields,
    .personal-page .declaration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
    }

    .personal-page .education-options,
    .personal-page .occupation-options,
    .personal-page .experience-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .personal-page .income-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .personal-page .source-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .personal-page .choice-option {
        min-width: 0;
        min-height: 44px;
        height: auto;
        padding: 8px 10px;
        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .personal-page .choice-option span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .personal-page .form-control-compact,
    .personal-page select.form-control-compact {
        width: 100%;
        min-width: 0;
        height: 46px;
        min-height: 46px;
        line-height: 46px;
        font-size: 12px;
    }

    .personal-page .field-with-count {
        width: 100%;
        min-width: 0;
    }    .document-page .document-actions,
    .document-page .form-actions,
    .document-page .pan-bottom-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .document-page .document-actions .btn,
    .document-page .form-actions .btn,
    .document-page .pan-bottom-nav .btn {
        width: 100%;
        min-width: 0;
        height: 46px;
        min-height: 46px;
        padding-left: 10px;
        padding-right: 10px;
        justify-content: center;
        white-space: nowrap;
        font-size: 12px;
    }    body.document-page .document-actions.pan-bottom-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: none;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 640px;
    }

    body.document-page .document-actions.pan-bottom-nav .document-action-group {
        display: contents;
    }

    body.document-page .document-actions.pan-bottom-nav .pan-prev,
    body.document-page .document-actions.pan-bottom-nav .document-add-nominee,
    body.document-page .document-actions.pan-bottom-nav .pan-next {
        grid-area: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 48px;
        min-height: 48px;
        padding-inline: 10px;
        justify-content: center;
        white-space: nowrap;
        font-size: 12px;
    }    .bank-page .bank-actions:not(.manual-actions) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
        "manual manual"
        "prev continue";
        align-items: center;
        gap: 10px;
        width: min(100%, 640px);
        margin-left: auto;
        margin-right: auto;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-manual-link {
        grid-area: manual;
        width: 100%;
        min-width: 0;
        height: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 0 12px;
        border-radius: 8px;
        background: #fff;
        color: var(--red);
        box-shadow: none;
        font-size: 13px;
        text-decoration: underline;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-prev {
        grid-area: prev;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-continue {
        grid-area: continue;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-prev,
    .bank-page .bank-actions:not(.manual-actions) .bank-continue {
        width: 100%;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        justify-content: center;
        font-size: 13px;
        white-space: nowrap;
    }    .aa-card {
        padding: 26px 28px 24px;
        border-radius: 18px;
    }

    .aa-heading h1 {
        font-size: 24px;
    }

    .aa-heading p {
        font-size: 14px;
    }

    .aa-benefit {
        grid-template-columns: 52px 28px minmax(0, 1fr);
        gap: 12px;
        min-height: 82px;
        padding: 14px;
    }

    .aa-benefit-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .aa-benefit h2 {
        font-size: 14px;
    }

    .aa-benefit p {
        font-size: 12px;
    }
}

/* <= 900px */
@media (max-width: 900px) {
    
    .dot-grid,.bg-circle{
        display:none;
    }
 
    .personal-page .main-container {
        padding: 18px;
    }
    .personal-grid,
    .fatca-panel,
    .tax-extra-fields,
    .declaration-grid {
        grid-template-columns: 1fr;
    }
    .occupation-options,
    .education-options,
    .experience-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .source-field {
        width: 100%;
    }    #pan_verify_pop.pan-card-modal {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 28px 16px 18px;
    }

    #pan_verify_pop .pan-card-modal-head {
        padding: 0 20px;
        margin-bottom: 22px;
    }

    #pan_verify_pop .pan-card-title-row {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
        padding-left: 0;
        text-align: center;
    }

    #pan_verify_pop .poptlesec {
        padding: 8px 0 12px;
    }

    #pan_verify_pop h2 {
        font-size: 16px;
    }

    #pan_verify_pop .pan-card-modal-head p {
        font-size: 13px;
    }

    #pan_verify_pop .pan-card-xml {
        width: auto;
    }

    #pan_verify_pop .pan-card-row,
    #pan_verify_pop .pan-card-row-split {
        grid-template-columns: 1fr;
    }

    #pan_verify_pop .pan-card-label,
    #pan_verify_pop .pan-card-row > p {
        min-height: 40px;
        border-right: 0;
        border-bottom: 1px solid #dbe4e9;
        padding: 5px 16px;
        font-size: 13px;
    }

    #pan_verify_pop .pan-card-row > p:last-child {
        border-bottom: 0;
    }

    #pan_verify_pop .pan-card-close {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .bank-page .manual-actions {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "prev proceed";
        gap: 12px;
    }

    .bank-page .manual-actions .inline_loader {
        display: none;
    }
     .document-page .upload-row-bank.upload-row {
        grid-template-columns: 60px minmax(0, 1fr);
        grid-template-areas:
            "icon copy"
            "select select"
            "action action";
        gap: 14px;
    }

    .document-page .upload-row-bank .document-upload-input,
    .document-page .upload-row-bank .v_btn {
        justify-self: stretch;
        align-items: stretch;
    }

    .document-page .upload-row-bank .upload-action {
        width: 100%;
    }
}

/* <= 760px */
@media (max-width: 760px) {
    .main-container,
    .top-header,
    .footer-container,
    .bank-page .main-container,
    .email-page .main-container,
    .pan-page .main-container,
    .personal-page .main-container,
    .document-page .main-container,
    .photo-page .main-container,
    .esign-page .main-container {
        max-width: none;
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
    }

    .main-container {
        border-radius: 16px;
    }

    .ui-title {
        font-size: 26px;
        line-height: 1.15;
    }

    .status-card,
    .photo-status-card,
    .esign-status-card {
        align-items: flex-start;
        height: auto;
        min-height: 0;
        padding: 16px;
    }

    .status-card-content {
        min-width: 0;
    }

    .form-grid.two-col,
    .personal-grid,
    .fatca-panel,
    .tax-extra-fields,
    .declaration-grid,
    .bank-status-row,
    .bank-qr-grid,
    .photo-status-grid,
    .esign-status-grid,
    .esign-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-actions,
    .pan-bottom-nav,
    .document-action-group,
    .signature-actions,
    .live-actions,
    .photo-camera-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .form-actions .btn,
    .pan-prev,
    .pan-next,
    .bank-prev,
    .bank-continue,
    .bank-proceed,
    .document-add-nominee,
    .photo-start-btn,
    .photo-retake-btn,
    .photo-continue-btn,
    .esign-page .esign-next {
        width: 100%;
        min-height: 48px;
    }

    .document-heading p span::before {
        display: none;
    }

    .document-heading p span {
        display: block;
        margin-top: 8px;
    }

    .upload-row,
    .upload-row-derivative,
    .upload-row-derivative.is-collapsed,
    .nominee-grid,
    .nominee-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .upload-icon,
    .upload-copy,
    .document-select-field,
    .upload-action,
    .doc-switch,
    .segment-check,
    .upload-preview,
    .upload-row-signature .upload-copy,
    .upload-row-signature .upload-action,
    .upload-row-signature .upload-preview,
    .upload-row > .document-error {
        grid-column: auto;
        justify-self: stretch;
    }

    .upload-preview {
        width: 100%;
        grid-row: auto;
    }

    .upload-title-line,
    .nominee-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    .doc-modal {
        align-items: start;
        padding: 16px;
        overflow-y: auto;
    }

    .doc-modal-card,
    .crop-modal,
    .risk-modal,
    .live-modal,
    .nominee-modal,
    .signature-modal {
        width: 100%;
        max-width: 100%;
        max-height: none;
        padding: 28px 18px 22px;
    }

    .crop-stage {
        height: auto;
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }

    .signature-tabs .btn {
        flex: 1 1 160px;
        padding: 0 10px;
        font-size: 12px;
    }
    .signature-tabs .btn i{
        display: none;
    }

    .signature-pad {
        height: 240px;
    }

    .signature-canvas {
        width: 100%;
        height: 200px;
    }

    .photo-camera-preview {
        min-height: 300px;
    }

    .photo-camera-preview{
        position: relative;
        width: 100%;
        height: 470px;
        overflow: hidden;
        border-radius: 16px;
        background-color: #c4b7aa;
        background-image: url(../images/181.png), linear-gradient(135deg, #83786e 0%, #d7cabd 100%);
        background-repeat: no-repeat;
        background-size: 105% auto, cover;
        background-position: 79.8% 59.3%;
        box-shadow: inset 0 0 0 1px rgba(7, 20, 95, 0.06); 
    }

    .photo-camera-preview.is-live .photo-face-ring {
        width: min(62vw, 220px);
        height: min(82vw, 300px);
    }

    .esign-page .esign-status-grid,
    .esign-page .esign-content-grid,
    .esign-page .esign-consent-form,
    .esign-page .esign-actions {
        width: 100%;
    }

    .esign-summary-list dd {
        padding-left: 0;
    }    .document-page .main-container {
        max-width: calc(100% - 24px);
        padding: 24px 16px;
    }
    .upload-row,
    .upload-row-derivative,
    .nominee-grid {
        grid-template-columns: 1fr;
    }
    .upload-icon,
    .document-select-field,
    .upload-action,
    .doc-switch,
    .segment-check,
    .upload-preview {
        grid-column: auto;
        justify-self: stretch;
    }
    .document-actions,
    .document-action-group {
        flex-direction: column;
        align-items: stretch;
    }
    .document-page .pan-prev,
    .document-page .pan-next,
    .document-add-nominee {
        width: 100%;
    }
    .nominee-field {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .signature-actions,
    .live-actions,
    .crop-actions {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .signature-actions .btn,
    .live-actions .btn {
        width: 100%;
        font-size: 14px;
    }    .photo-page .main-container {
        max-width: calc(100% - 24px);
        padding: 18px 14px;
    }
    .photo-status-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 30px;
    }
    .risk-modal h2, .live-modal h2{
        font-size: 16px; 
    }
    .photo-page .photo-guidelines, .photo-page .photo-trust{
        display:none;
    }
    .risk-modal ul, .live-modal ul,.risk-modal p, .live-modal p,.live-consent{
       font-size: 12px; 
    }
    .photo-status-card {
        min-height: 74px;
    }
    .nominee-modal h2{
        font-size: 14px;
    }
    .btn{
    font-size: 14px;
    }
    .photo-guidelines,
    .photo-trust {
        padding: 22px 18px;
    }
    .photo-start-btn {
        width: 100%;
    }
    .photo-camera-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .photo-retake-btn,
    .photo-continue-btn {
        width: 100%;
    }
    .photo-benefit-list li,
    .photo-guideline-list li {
        grid-template-columns: 44px 1fr;
    }    .esign-page .main-container {
        width: calc(100vw - 56px);
        max-width: calc(100vw - 56px);
        margin-left: 28px;
        margin-right: 28px;
        padding: 18px 14px;
    }
    .email-providers {
        grid-template-columns: 1fr;
    }
    .esign-section,
    .esign-status-grid,
    .esign-content-grid,
    .esign-consent-form,
    .esign-actions {
        max-width: 100%;
        min-width: 0;
    }
    .esign-status-grid,
    .esign-content-grid,
    .esign-consent-form {
        width: calc(100% - 28px);
    }
    .esign-status-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 30px;
    }
    .esign-content-grid {
        gap: 16px;
    }
    .esign-summary-card,
    .esign-visual-card {
        width: 100%;
        min-height: auto;
    }
    .esign-summary-card {
        padding: 18px 14px 12px;
    }
    .esign-summary-list div {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 0;
    }
    .esign-summary-list dd {
        border-left: 0;
        padding-left: 38px;
    }
    .esign-visual-card {
        padding: 22px 14px 24px;
    }
    .esign-illustration {
        width: 100%;
    }
    .esign-consent {
        grid-template-columns: 22px 1fr;
        gap: 12px;
    }
    .esign-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .esign-page .pan-prev,
    .esign-page .pan-next,
    .esign-page .esign-next {
        width: calc(100% - 28px);
    }    .landing-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }
    .landing-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 14px;
    }
    .landing-header-divider {
        display: none;
    }
    .landing-lang {
        width: 160px;
    }
    .landing-help {
        font-size: 16px;
    }
    .landing-benefits {
        width: 100%;
        margin-top: 30px;
    }
    .landing-benefits li {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .landing-benefits strong,
    .landing-benefits p {
        max-width: 210px;
    }
    .landing-hero-device {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin: 24px auto 0;
        display: block;
    }
    .landing-privacy {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 18px;
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .landing-privacy p {
        max-width: 280px;
    }
    .landing-login {
        padding: 34px 22px 38px;
    }    #aadhar_verify_pop.aadhaar-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 40px 14px 14px;
        border-radius: 14px;
    }
    #aadhar_verify_pop .aadhaar-modal-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    #aadhar_verify_pop .aadhaar-modal-head {
        padding: 2px 20px 16px;
        gap: 10px;
    }
    #aadhar_verify_pop .aadhaar-modal-head h2 {
        flex-direction: column;
        gap: 10px;
        font-size: 16px;
    }
    #aadhar_verify_pop .aadhaar-modal-shield {
        width: 54px;
        height: 54px;
        font-size: 28px;
    }
    #aadhar_verify_pop .aadhaar-modal-head p {
        font-size: 12px;
        display: none;
    }
    #aadhar_verify_pop .aadhaar-photo-wrap img{
         object-fit: contain;   
    }
    #aadhar_verify_pop .aadhaar-summary-strip {
        grid-template-columns: 1fr;
        padding: 0;
        margin: 2px 0 10px;
    }
    #aadhar_verify_pop .aadhaar-summary-item {
        justify-content: flex-start;
        min-height: 0;
        padding: 10px;
    }
    #aadhar_verify_pop .aadhaar-summary-item + .aadhaar-summary-item {
        border-left: 0;
        border-top: 1px solid #dbe4f1;
    }
    #aadhar_verify_pop .summary-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    #aadhar_verify_pop .aadhaar-summary-item strong {
        font-size: 12px;
    }
    #aadhar_verify_pop .aadhaar-summary-item b {
        font-size: 14px;
    }
    #aadhar_verify_pop .aadhaar-detail-card {
        padding: 12px;
    }
    #aadhar_verify_pop .aadhaar-detail-row,
    #aadhar_verify_pop .aadhaar-detail-row.split {
        grid-template-columns: 36px 1fr;
        gap: 6px 10px;
        align-items: start;
        padding: 10px 0;
    }
    #aadhar_verify_pop .aadhaar-detail-row > span {
        grid-row: span 3;
        width: 32px;
        height: 32px;
    }
    #aadhar_verify_pop .aadhaar-detail-row strong,
    #aadhar_verify_pop .aadhaar-detail-row p {
        font-size: 12px;
    }
    #aadhar_verify_pop .aadhaar-detail-row em {
        display: none;
    }
    #aadhar_verify_pop .aadhaar-photo-wrap {
        height: 190px;
    }
    #aadhar_verify_pop .aadhaar-modal-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #aadhar_verify_pop .aadhaar-photo-card strong,#aadhar_verify_pop .aadhaar-photo-card p{
        font-size: 14px;
    }
    #aadhar_verify_pop .aadhaar-reupload,
    #aadhar_verify_pop .aadhaar-close-btn {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        font-size: 14px;
    }    
    .reveal-overlay {
        padding: 10px 0;
    }    #popmodelconfirm2.aadhaar-confirm-modal {
        width: calc(100vw - 24px);
        padding: 30px 18px 24px;
    }
    #popmodelconfirm2 .aadhaar-confirm-art {
        width: 180px;
        height: 148px;
    }
    #popmodelconfirm2 .confirm-file {
        top: 30px;
        width: 78px;
        height: 98px;
    }
    #popmodelconfirm2 h2 {
        font-size: 20px;
    }
    #popmodelconfirm2 #content_confirm2,
    #popmodelconfirm2 strong {
        font-size: 14px;
    }
    #pan_verify_pop .pan-card-label strong {
    font-size: 13px;
    }
    .dateofbirthpage .email-input-wrap .email-input, .dateofbirthpage .email-select-wrap .email-input{
       font-size: 12px; 
    }
    #popmodelconfirm2 .aadhaar-confirm-divider {
        margin: 22px 0 18px;
    }
    #popmodelconfirm2 .aadhaar-confirm-actions {
        gap: 12px;
    }
    #popmodelconfirm2 .confirm-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        font-size: 18px;
        gap: 10px;
    }
    #popmodelconfirm2 .confirm-btn i {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }    #verifydobModalpopup.dob-modal {
        width: calc(100vw - 24px);
        padding: 34px 18px 34px;
        border-radius: 18px;
    }
    #verifydobModalpopup .dob-modal-close {
        top: 14px;
        right: 14px;
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
    #verifydobModalpopup .dob-modal-art {
        width: 168px;
        height: 132px;
        margin-bottom: 8px;
    }
    #verifydobModalpopup .dob-calendar {
        top: 42px;
        width: 72px;
        height: 62px;
        font-size: 42px;
    }
    #verifydobModalpopup .dob-calendar b {
        top: 12px;
        left: 17px;
        right: 17px;
        height: 6px;
    }
    #verifydobModalpopup .dob-clock {
        right: 24px;
        bottom: 24px;
        width: 40px;
        height: 40px;
        font-size: 22px;
        border-width: 3px;
    }
    #verifydobModalpopup h2 {
        font-size: 28px;
    }
    #verifydobModalpopup .dob-modal-subtitle {
        margin-bottom: 28px;
        font-size: 17px;
    }
    #verifydobModalpopup .dob-field-label {
        font-size: 17px;
    }
    #verifydobModalpopup #verifdobinput {
        height: 54px;
        padding: 0 52px 0 16px;
        font-size: 15px;
    }
    #verifydobModalpopup .dob-input-wrap {
        margin-bottom: 24px;
    }
    #verifydobModalpopup .dob-input-wrap span {
        right: 16px;
        font-size: 23px;
    }
    #verifydobModalpopup .dobmatch {
        margin: -12px 0 16px;
        font-size: 14px;
    }
    #verifydobModalpopup .dob-submit {
        min-height: 62px;
        font-size: 22px;
    }    #minor.minor-modal {
        width: calc(100vw - 24px);
        padding: 34px 18px 40px;
        border-radius: 18px;
    }
    #minor .minor-modal-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 22px;
    }
    #minor .minor-modal-art {
        width: 210px;
        height: 170px;
        margin-bottom: 8px;
    }
    #minor .minor-person {
        left: 42px;
        bottom: 18px;
        width: 88px;
        height: 108px;
        font-size: 62px;
    }
    #minor .minor-shield {
        right: 34px;
        bottom: 22px;
        width: 72px;
        height: 88px;
        font-size: 32px;
    }
    #minor .minor-shield sup {
        font-size: 15px;
    }
    #minor h2 {
        font-size: 30px;
    }
    #minor .minor-message {
        margin-bottom: 22px;
        font-size: 17px;
    }
    #minor .minor-alert-box {
        min-height: 0;
        margin-bottom: 24px;
        padding: 14px;
        gap: 14px;
    }
    #minor .minor-alert-box span {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    #minor .minor-alert-box p {
        font-size: 15px;
    }
    #minor .minor-reupload {
        min-height: 62px;
        font-size: 16px;
        gap: 10px;
    }
    #minor .minor-reupload i {
        font-size: 21px;
    }
    .pan-page .main-container {
        padding: 28px 20px;
    }
    .status-card {
        height: auto;
        min-height: 80px;
        gap: 18px;
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }
    .ui-title {
        font-size: 30px;
    }
    .pan-visual {
        width: 100%;
        min-height: 250px;
    }
    .pan-card {
        width: 100%;
        max-width: 338px;
        margin-left: auto;
        margin-right: auto;
    }
    .pan-bottom-nav {
        gap: 14px;
    }
    .pan-prev,
    .pan-next {
  
    }    
     .email-page .main-container {
        padding: 24px 18px;
    }
    .email-subtitle {
        font-size: 16px;
    }
    .email-providers {
        grid-template-columns: 1fr;
        gap: 14px;
    }    .bank-page .main-container {
        padding: 24px 18px;
    }
    .bank-status-row {
        gap: 16px;
        margin: 0;
    }
    .manual-head {
        grid-template-columns: 1fr;
    }
    .bank-back-link {
        justify-self: start;
    }
    .bank-error-box {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 18px;
    }
    .bank-error-box > div {
        padding-left: 0;
    }
    .bank-error-box p {
        height: auto;
        border-left: 0;
        align-items: flex-start;
        line-height: 1.4;
    }    .bank-page .bank-status-card {
        padding: 14px;
    }
    .bank-page .status-action {
        width: 108px;
        min-width: 108px;
    }
    .bank-page .manual-actions {
        grid-template-columns: 1fr;
        grid-template-areas: "prev" "proceed";
    }
    .bank-page .manual-actions .bankverifysub,
    .bank-page .manual-actions .bank-prev {
        width: 100%;
    }
    #pan_verify_pop.aadhaar-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 18px 14px 14px;
        border-radius: 14px;
    }
      .bank-page .manual-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas: "prev proceed" !important;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .bank-page .manual-actions .bank-prev {
        grid-area: prev;
        width: 100%;
        min-width: 0;
    }

    .bank-page .manual-actions .bankverifysub,
    .bank-page .manual-actions .bank-proceed {
        grid-area: proceed;
        width: 100%;
        min-width: 0;
    }

    .bank-page .manual-actions .inline_loader {
        display: none;
    }
     .new-user-page .app-shell {
        padding-top: 10px;
    }

    .new-user-header {
        width: calc(100% - 20px);
        min-height: 0;
        padding: 14px;
        border-radius: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .new-user-brand img {
        width: 132px;
    }

    .new-user-header-actions {
        justify-content: space-between;
        gap: 10px;
    }

    .new-user-lang {
        width: 128px;
        height: 48px;
        min-height: 48px;
    }

    .new-user-header-divider {
        display: none;
    }

    .new-user-help {
        font-size: 12px;
        gap: 7px;
    }

    .new-user-help i {
        font-size: 22px;
    }

    .new-user-wrap {
        width: calc(100% - 20px);
        margin-top: 10px;
    }

    .new-user-card {
        border-radius: 16px;
        min-height: auto;
    }

    .new-user-info {
        padding: 26px 18px 24px;
    }

    .new-user-illustration {
        width: 240px;
        margin-bottom: 14px;
    }

    .check-board {
        width: 118px;
        height: 154px;
        border-width: 6px;
        border-radius: 13px;
        gap: 12px;
        padding-left: 35px;
    }

    .check-board::before {
        top: -21px;
        width: 68px;
        height: 32px;
    }

    .check-board::after {
        top: -11px;
        width: 12px;
        height: 12px;
        border-width: 4px;
    }

    .check-board span {
        width: 46px;
        height: 6px;
    }

    .check-board span::before {
        left: -25px;
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .check-board i {
        right: -36px;
        bottom: 20px;
        width: 70px;
        height: 70px;
        font-size: 32px;
    }

    .new-user-info h2 {
        font-size: 22px;
    }

    .new-user-info > p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .new-user-secure-note {
        min-height: 0;
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 14px;
    }

    .new-user-secure-note > i {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    .new-user-form-panel {
        padding: 30px 25px 30px;
    }

    .new-user-form-panel h1 {
        font-size: 25px;
    }

    .new-user-form-panel .section-accent {
        margin: 14px 0 22px;
    }

    .new-user-field {
        margin-bottom: 20px;
    }

    .new-user-display-field,
    .new-user-select-wrap {
        height: 58px;
        grid-template-columns: 48px minmax(0, 1fr) 28px;
        padding: 0 12px 0 8px;
    }

    .new-user-display-field > span,
    .new-user-select-wrap > span {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .new-user-display-field strong,
    .new-user-select-wrap select {
        font-size: 14px;
    }

    .new-user-submit-row {
        justify-content: stretch;
    }

    .new-user-submit {
        width: 100%;
        min-width: 0;
        height: 54px;
        min-height: 54px;
        font-size: 16px;
    }

    .new-user-trust-row {
        width: calc(100% - 20px);
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px;
    }

    .new-user-trust-row > div {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
        padding: 14px 0;
    }

    .new-user-trust-row > div + div {
        border-left: 0;
        border-top: 1px solid #dfe6f4;
        padding-left: 0;
    }

    .new-user-trust-row span {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
     .existing-main {
        width: min(100% - 16px, 420px);
        padding: 24px 14px 26px;
        border-radius: 14px;
    }

    .existing-icon {
        width: 82px;
        height: 82px;
        font-size: 40px;
    }

    .existing-hero {
        margin-bottom: 22px;
    }

    .existing-hero h1 {
        font-size: 24px;
    }

    .existing-hero p {
        font-size: 14px;
    }

    .existing-table-card {
        border-radius: 12px;
        box-shadow: 0 12px 28px rgba(7, 20, 95, 0.08);
    }

    .existing-table,
    .existing-table thead,
    .existing-table tbody,
    .existing-table tr,
    .existing-table th,
    .existing-table td {
        display: block;
    }

    .existing-table th,
    .existing-table td {
        width: 100% !important;
    }

    .existing-table thead {
        display: none;
    }

    .existing-table tr {
        padding: 14px 12px;
        background: #fff;
    }

    .existing-table tr + tr {
        border-top: 1px solid #e1e7f2;
    }

    .existing-table td {
        min-height: 0;
        padding: 12px 0;
        border-top: 0;
        border-left: 0 !important;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        align-items: start;
        text-align: left;
        font-size: 12px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .existing-table td::before {
        content: attr(data-label);
        color: #4b5878;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 900;
        white-space: normal;
    }

    .existing-status {
        width: fit-content;
        max-width: 100%;
        justify-content: flex-start;
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
        white-space: normal;
        word-break: normal;
    }

    .existing-table .exitbtn {
        width: auto;
        min-width: 124px;
        max-width: 100%;
        min-height: 46px;
        height: 46px;
        padding: 0 14px;
        font-size: 14px;
    }

    .existing-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 24px 0;
    }

    .existing-logout-link,
    .existing-new-btn {
        width: 100%;
        min-width: 0;
        height: 52px;
        min-height: 52px;
        font-size: 15px;
    }

    .existing-security {
        min-height: 0;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 16px;
        width: 100%;
        gap: 12px;
    }

    .existing-security > span {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    .existing-security strong {
        font-size: 14px;
    }

    .existing-security p {
        font-size: 12px;
    }

    .existing-security-lock {
        display: none;
    }
    /* max-width: 760px compact existing user */
    .existing-user-page .existing-main {
        margin-top: 16px;
        padding: 18px 10px 20px;
    }

    .existing-user-page .existing-icon {
        width: 68px;
        height: 68px;
        font-size: 34px;
    }

    .existing-user-page .existing-hero {
        gap: 7px;
        margin-bottom: 18px;
    }

    .existing-user-page .existing-hero h1 {
        font-size: 21px;
    }

    .existing-user-page .existing-hero p {
        max-width: 280px;
        font-size: 12px;
        line-height: 1.35;
    }

    .existing-user-page .existing-table td {
        padding: 9px 0;
    }

    .existing-user-page .existing-actions {
        margin: 16px 0;
    }
    .new-user-info{
        display:none;
    }
    .dateofbirthpage .email-actions .btn{
        min-width: auto;
    }
    .existing-user-page .existing-status i {
        width: 17px;
        height: 17px;
        min-width: 17px;
        font-size: 7px;
    }
    button.btn.btn-primary.mobileupibtn {
        width: 100%;
        display: block;
    }
    .bank-page .mobileupi{
         display: block; 
    }

     .congrats-page .navia-congrats-card {
         min-height: 480px;
         padding: 34px 22px 30px;
         border-radius: 16px;
    }
     .congrats-page .navia-congrats-card .navia-success-title {
         font-size: 18px;
    }
     .congrats-page .navia-congrats-card .navia-client-code {
         min-height: 62px;
         font-size: 32px;
    }
      .congrats-page .navia-congrats-card .navia-congrats-title {
         font-size: 16px;
         margin: 0 0 0px;
    }
     .congrats-page .navia-congrats-card .navia-congrats-content h2 {
         font-size: 18px;
        margin: 5px 0 12px;
    }
     .congrats-page .navia-congrats-card .navia-congrats-links a {
         flex: 1 1 100%;
         justify-content: center;
    } 
    .congrats-page .navia-congrats-card .navia-congrats-content{
           font-size: 13px; 
    }

}  

/* <= 640px */
@media (max-width: 640px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .page-bg {
        padding-top: 0px;
        padding-bottom: 0px;
    } 

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        width: min(100% - 20px, 420px);
        padding: 14px;
        gap: 12px;
        border-radius: 18px;
    }

    .helpline{
        display:none;
    }
    .mobile-tel{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 28px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        grid-template-columns: repeat(8, 72px);
        gap: 8px;
        padding: 10px;
        border-radius: 15px;
        scroll-snap-type: x proximity;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step {
        min-height: 66px;
        border-radius: 12px;
        padding: 8px 6px;
        scroll-snap-align: start;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p {
        font-size: 9px;
        line-height: 1.12;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        /* min-width: 108px; */
        /* grid-template-columns: 32px 1fr; */
        grid-auto-flow: column;
        /* justify-items: start; */ 
        align-content: center;
        align-items: center;
        text-align: left;
        padding: 10px;
    }
    .personal-form .dayco-plan-title{
        font-size: 13px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 32px;
        height: 32px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 11px;
        line-height: 1.15;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-template-columns: 1fr;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        min-height: 44px;
        gap: 10px;
        font-size: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        max-width: none;
        width: 100%;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 112px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container {
        width: min(100% - 20px, 420px);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .info-panel {
        padding: 24px 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-panel {
        padding: 24px 14px 4px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .phone-badge {
        width: 62px;
        height: 62px;
        margin: 0 auto 20px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .mobile-line {
        gap: 12px;
        flex-wrap: wrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .mobile-line strong {
        font-size: 20px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .sent-copy {
        margin-bottom: 24px;
        line-height: 1.45;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .resend {
        margin: 24px 0 20px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .agree-line {
        margin-top: 22px;
        font-size: 13px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        width: min(100% - 20px, 420px);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) auto;
        gap: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        min-height: 44px;
        height: 44px;
        border-radius: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        padding: 0 8px;
        gap: 6px;
        justify-content: center;
        font-size: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        color: var(--navy);
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        padding: 0 30px 0 10px;
        gap: 8px;
        font-size: 13px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        right: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        font-size: 17px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        font-size: 13px;
        font-weight: 800;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 46px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        min-height: 58px;
        padding: 7px 3px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 8px;
        line-height: 1.05;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        width: min(100% - 16px, 420px);
        padding: 10px;
        gap: 8px;
        border-radius: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {

        justify-content: flex-start;
        padding: 8px 12px;
        gap: 10px;
        border-radius: 12px;
    }


    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 24px;
        line-height: .9;
    }

   
    .existing-user-page .existing-table tr{
        display: flex;
        flex-wrap: wrap; 
    }
    .existing-user-page .existing-table td{
        width: 50% !important;
    }
    .existing-user-page td[data-label="Action"]{
         width: 100% !important;
    }
    .existing-user-page td[data-label="Action"]::before{
       content:none;
    }
    .existing-user-page .existing-status{
        font-size: 10px;  
        background:transparent;
        padding: 0 8px 0px 0px;
    }
    .existing-user-page td[data-label="Action"] .exitbtn{
        width:100%;
    }
    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        margin-top: 3px;
        font-size: 11px;
    }
    .existing-user-page .top-header{
      margin-bottom: 10px;  
    }
   body[data-page-key="nri_client_details"] .nri-section h2{
    line-height: 1;
   }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        order: 2;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) 40px;
        gap: 6px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        padding: 0 6px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        font-size: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        font-size: 11px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        padding: 0 24px 0 9px;
        gap: 6px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        font-size: 15px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 40px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        order: 3;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 4px;
        padding: 6px;
        border-radius: 12px;
        overflow: visible;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        min-height: 48px;
        border-radius: 9px;
        padding: 5px 2px;
        gap: 4px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 22px;
        height: 22px;
        font-size: 10px;
        border-width: 1.5px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 6.8px;
        line-height: 1;
        font-weight: 800;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container {
        width: min(100% - 16px, 420px);
        margin-top: 10px;
        padding: 14px 12px;
        border-radius: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-panel {
        padding: 12px 6px 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .phone-badge {
        width: 52px;
        height: 52px;
        margin: 0 auto 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .phone-badge i {
        font-size: 24px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .mobile-line strong {
        font-size: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .sent-copy {
        margin: 12px auto 18px;
        max-width: 300px;
        font-size: 13px;
    }
    .powered strong, .built strong,.voice-assist strong{
        font-size: 12px;
    }
    .powered p{
        font-size: 11px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-inputs {
        display:flex;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        margin-top: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-input {
        width: 100%;
        height: 58px;
        min-width: 0;
        border-radius: 8px;
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .resend {
        margin: 16px 0 14px;
        font-size: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .agree-line {
        margin-top: 16px;
        max-width: 320px; 
        font-size: 10px;
        line-height: 1.42;
    } 

    body:not(.landing-page,.navia-zero-page) .footer-container {
        margin-top: 10px;
        padding: 14px;
        gap: 10px;
        border-radius: 14px;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        align-items: stretch;
        width: min(100% - 16px, 420px);
        height: auto;
        margin-bottom: 10px;
    }

    body:not(.landing-page,.navia-zero-page) .voice-assist,
    body:not(.landing-page,.navia-zero-page) .powered,
    body:not(.landing-page,.navia-zero-page) .built {
        min-height: 44px;
        justify-content: flex-start;
        gap: 12px;
        text-align: left;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .mic-circle,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .outline-badge,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .play-dot,.code-badge{
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        display: grid;
        grid-template-columns: minmax(128px, 1fr) minmax(86px, auto) 42px 42px;
        align-items: center;
        width: min(100% - 16px, 420px);
        min-height: 82px;
        height: auto;
        padding: 10px;
        gap: 6px;
        border-radius: 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        height: 100%;
        min-width: 0;
        padding: 0px 3px;
        gap: 8px;
        justify-content: flex-start;
        border-radius: 12px;
        border:none;
    }
    

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
        width: 70%;
        height:100%;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy {
        min-width: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 23px;
        line-height: .82;
        letter-spacing: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        max-width: 64px;
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1.05;
        white-space: normal;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
    

        box-sizing: border-box !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        flex: 0 0 38px !important;
        overflow: hidden !important;
        background: #fff;
        border: 1px solid #dfe6f4;
    }
    

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        color: var(--red);
        font-size: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        color: var(--navy);
        font-size: 12px;
        line-height: 1;
        font-weight: 900;
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 11px;
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        right: auto;
        font-size: 13px;
        pointer-events: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 11px;
        font-size: 0;
        gap: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        font-size: 18px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .main-container {
        margin-top: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #1258ff;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: inline-flex;
        position: static;
        color: #1258ff;
        font-size: 16px;
        pointer-events: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        position: static;
        transform: none;
        color: var(--navy);
        font-size: 11px;
        pointer-events: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        gap: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        content: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        font-size: 17px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        grid-template-rows: auto auto;
        align-items: center;
        margin-top: 0px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        margin-top: 2px;
        gap: 4px;
        padding: 6px;
        border-radius: 11px;
        overflow: visible;
        background: linear-gradient(180deg, #f9fbff, #fff);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        /* min-height: 42px; */
        min-height: 20px;
        border-radius: 8px;
        padding: 4px 1px;
        gap: 3px;
    }
    .step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 29px;
        top: 13px;
        width: 38px;
        border-top: 2px dashed #c5d2ed;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 19px;
        height: 19px;
        font-size: 9px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 5.8px;
        line-height: 1;
        font-weight: 800;
        display: none;
    }
    .landing-page .landing-lang {
        background: none;
        box-shadow: none;
        min-width: 145px;
        padding: 0px;
    }
    .landing-page .landing-lang .lang-select {
        width: 100% !important;
        min-height: 50px;
        height: 50px;
        border: 1px solid #dce4f2;
        border-radius: 16px;
        background: #fff;
        box-shadow: none;
        position: relative;
        cursor: pointer;
        min-width: 175px;
        max-width: 185px;
        color: inherit;
        padding: 0px 0px 0px 40px;
        min-width: 145px;
    }
    .landing-help strong span{
        display:none;
    }
    main.main-container.aa-container
    {
        margin-top: 0px;
    }
    .pan-page .main-container {
        width: min(100% - 16px, 420px);
        margin-top: 10px;
        padding: 14px 12px;
        border-radius: 14px;
    }
    .lang-select-wrap::before {
        z-index: 1;
    }
    .pan-page .pan-success {
        min-height: 48px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border-radius: 12px;
    }

    .pan-page .pan-success .status-card-content {
        align-items: center;
        gap: 10px;
    }

    .pan-page .pan-success .status-icon {
       width: 25px;
        height: 25px;
        min-width: 25px;
        font-size: 13px;
    }

    .pan-page .pan-success strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .pan-page .pan-success .status-action {
        width: auto;
        min-width: 82px;
        height: 34px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 10px;
    }

    .pan-page .pan-section {
        padding-top: 18px;
    }

    .pan-page .ui-title {
        font-size: 20px;
    }

    .pan-page .ui-title-rule {
        margin-top: 14px;
    }

    .pan-page .pan-workspace {
        padding-top: 22px;
        gap: 18px;
    }

    .pan-page .pan-visual {
        min-height: 138px;
        width: 100%;
        margin: 0 auto;
    }

    .pan-page .pan-visual::before,
    .pan-page .pan-visual::after,
    .pan-page .pan-dot-pattern,
    .pan-page .pan-spark,
    .pan-page .pan-ring {
        display: none;
    }

    .pan-page .pan-card {
        width: min(100%, 286px);
        height: 138px;
        margin: 0 auto;
        padding: 14px 16px;
        border-radius: 13px;
    }

    .pan-page .pan-card > strong {
        font-size: 22px;
    }

    .pan-page .pan-card-body {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        gap: 12px;
        margin-top: 12px;
    }

    .pan-page .pan-avatar {
        width: 46px;
        height: 50px;
    }

    .pan-page .pan-avatar::before {
        width: 22px;
        height: 25px;
        left: 12px;
        top: 6px;
    }

    .pan-page .pan-avatar span {
        width: 48px;
        height: 30px;
    }

    .pan-page .pan-lines span {
        height: 6px;
    }

    .pan-page .pan-lines span:nth-child(1),
    .pan-page .pan-lines span:nth-child(3) {
        width: 76px;
    }

    .pan-page .pan-lines span:nth-child(2) {
        width: 54px;
        margin-top: 8px;
    }

    .pan-page .pan-lines span:nth-child(4) {
        width: 44px;
        margin-top: 8px;
    }

    .pan-page .pan-card-body i {
        font-size: 44px;
    }

    .pan-page .pan-card p {
        margin-top: 14px;
        font-size: 14px;
    }

    .pan-page .pan-form {
        width: 100%;
        padding-top: 0;
    }

    .pan-page .pan-help {
        margin: 10px 0 14px;
        font-size: 12px;
        line-height: 1.35;
    }

    .pan-page .pan-note {
        min-height: 0;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border-radius: 10px;
        display: none;
    }

    .pan-page .pan-note span {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 15px;
    }

    .pan-page .pan-note p {
        font-size: 11px;
        line-height: 1.35;
    }

    .pan-page .pan-verify {
        height: 52px;
        min-height: 52px;
        margin-top: 18px;
        font-size: 14px;
    }

    .pan-page .pan-bottom-nav {
        margin-top: 18px;
        padding-top: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .pan-page .pan-prev,
    .pan-page .pan-next {
        width: 100%;
        height: 48px;
        min-height: 48px;
        font-size: 14px;
    }

    .pan-page .pan-workspace {
        padding-top: 18px;
    }

    .pan-page .pan-input {
        height: 52px;
        min-height: 52px;
        line-height: 52px;
    }

    .bank-page .main-container {
        width: min(100% - 16px, 420px);
        margin-top: 10px;
        padding: 14px 12px;
        border-radius: 14px;
    }

    .bank-page .bank-status-row {
        gap: 10px;
        margin: 0;
    }

    .bank-page .bank-status-card {
        min-height: 45px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 5px 5px;
        border-radius: 12px;
    }

    .bank-page .bank-status-card .status-card-content {
        align-items: center;
        gap: 10px;
    }

    .bank-page .bank-status-card .status-icon {
    width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 8px;
    }

    .bank-page .bank-status-card strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .bank-page .bank-status-card .status-action {
        width: auto;
        min-width: 82px;
        height: 34px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 10px;
    }

    .bank-page .bank-section {
        padding-top: 18px;
    }

    .bank-page .ui-title {
        font-size: 20px;
    }

    .bank-page .ui-title-rule {
        margin-top: 14px;
    }

    .bank-page .bank-qr-grid {
        gap: 12px;
        margin-top: 20px;
    }

    .bank-page .bank-card {
        min-height: auto;
        border-radius: 12px;
    }

    .bank-page .bank-qr-card {
        padding: 18px 14px 16px;
    }

    .bank-page .bank-qr-card h2 {
        margin-bottom: 14px;
        font-size: 14px;
        line-height: 1.2;
    }

    .bank-page .upi-apps {
        min-height: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding-bottom: 12px;
    }

    .bank-page .upi-logo {
        width: 34px;
        height: 34px;
    }

    .bank-page .upi-logo.phonepe {
        font-size: 19px;
    }

    .bank-page .upi-logo.paytm {
        width: 42px;
        font-size: 13px;
    }

    .bank-page .upi-logo.whatsapp {
        font-size: 24px;
    }

    .bank-page .upi-app b {
        font-size: 8px;
        line-height: 1.1;
    }

    .bank-page .bank-qr-box,
    .bank-page .bank-qr-box img {
        width: 166px;
        height: 164px;
    }

    .bank-page .bank-qr-card > p {
        font-size: 13px;
        line-height: 1.3;
    }

    .bank-page .bank-scan-card {
        display: none;
    }

    .bank-page .charge-note {
        min-height: 42px;
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        justify-content: start;
        gap: 10px;
        padding: 10px 12px;
        text-align: left;
        font-size: 12px;
        line-height: 1.35;
    }

    .bank-page .charge-note > span:first-child {
        font-size: 20px;
    }

    .bank-page .charge-note > span:not(:first-child) {
        font-size: 12px;
    }

    .bank-page .bank-actions,
    .bank-page .manual-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .bank-page .bank-prev,
    .bank-page .bank-continue,
    .bank-page .bank-proceed,
    .bank-page .bank-manual-link,
    .bank-page .bank-back-link {
        width: 100%;
        min-height: 46px;
        height: 46px;
        font-size: 13px;
    }

    .bank-page .bank-manual-card {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .bank-page .manual-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 18px;
    }

    .bank-page .manual-title {
        gap: 12px;
    }

    .bank-page .manual-title > span {
        font-size: 24px;
    }

    .bank-page .manual-title h2 {
        font-size: 17px;
        line-height: 1.2;
    }

    .bank-page .manual-title p {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.35;
    }

    .bank-page .bank-back-link {
        justify-self: stretch;
    }

    .bank-page .bank-fields {
        gap: 12px;
    }

    .bank-page .input-with-icon {
        height: 52px;
        min-height: 52px;
        grid-template-columns: 28px minmax(0, 1fr) 24px;
        padding: 0 10px;
    }

    .bank-page .input-with-icon .form-control {
        height: 50px;
        min-height: 0;
        font-size: 12px;
    }

    .bank-page .bank-error-box {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .bank-page .bank-error-box > div {
        padding-left: 0;
    }

    .bank-page .bank-error-box strong {
        margin-bottom: 8px;
        font-size: 15px;
    }

    .bank-page .bank-error-box p {
        height: auto;
        border-left: 0;
        padding-left: 0;
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.35;
    }

    .bank-page .bank-error-box p span {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .bank-page .manual-charge {
        margin-top: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .pan-bottom-nav,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .manual-actions,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .document-actions,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .esign-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
        padding-top: 13px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .pan-bottom-nav .btn,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .manual-actions .btn,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .document-actions .btn,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .esign-actions .btn {
        min-height: 48px;
        height: 48px;
        font-size: 13px;
    }
    .pan-verify i, .pan-prev i, .pan-next i {
        font-size: 15px;
    }

    .bank-page .upi-apps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        gap: 4px;
        padding: 8px 0 10px;
    }

    .bank-page .upi-app {
        min-width: 0;
        gap: 5px;
    }

    .bank-page .upi-logo {
        width: 32px;
        height: 32px;
        max-width: 100%;
        justify-self: center;
    }

    .bank-page .upi-logo.gpay i {
        width: 14px;
        height: 24px;
    }

    .bank-page .upi-logo.gpay i:nth-child(1) {
        left: 6px;
        top: 4px;
    }

    .bank-page .upi-logo.gpay i:nth-child(2) {
        left: 14px;
        top: 4px;
    }

    .bank-page .upi-logo.gpay i:nth-child(3) {
        left: 17px;
        top: 9px;
    }

    .bank-page .upi-logo.gpay i:nth-child(4) {
        left: 8px;
        top: 9px;
    }

    .bank-page .upi-logo.bhim::before {
        left: 8px;
        top: 2px;
        border-width: 15px 0 15px 12px;
    }

    .bank-page .upi-logo.bhim::after {
        left: 16px;
        top: 2px;
        border-width: 15px 0 15px 12px;
    }

    .bank-page .upi-app b {
        max-width: 100%;
        min-width: 0;
        font-size: 7px;
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .bank-page .bank-actions:not(.manual-actions) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
        "prev continue"
        "manual manual";
        gap: 10px;
        align-items: center;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-prev {
        grid-area: prev;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-continue {
        grid-area: continue;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-manual-link {
        grid-area: manual;
        height: 42px;
        min-height: 42px;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
        text-decoration-thickness: 1px;
        font-size: 13px;
    }

    .bank-page .bank-actions:not(.manual-actions) .bank-prev,
    .bank-page .bank-actions:not(.manual-actions) .bank-continue {
        width: 100%;
        height: 48px;
        min-height: 48px;
        font-size: 14px;
    }

    .bank-page .bank-actions:not(.manual-actions) {
        grid-template-areas:
        "manual manual"
        "prev continue";
    }

    .bank-page .bank-error-box {
        border-color: #ffc9c9;
        background: #fff6f6;
        border-radius: 10px;
    }

    .bank-page .bank-error-box strong {
        color: var(--red);
        font-size: 14px;
        line-height: 1.1;
    }

    .bank-page .bank-error-box button {
        justify-content: flex-start;
        width: auto;
        height: auto;
        min-height: 0;
        color: var(--red);
        font-size: 14px;
        line-height: 1.15;
        font-weight: 900;
    }

    .bank-page .bank-error-box p {
        display: grid;
        grid-template-columns: 24px minmax(54px, auto) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        color: var(--red);
    }

    .bank-page .bank-error-box small {
        min-width: 0;
        font-size: 12px;
        line-height: 1.25;
    }

    .bank-page .manual-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bank-page .manual-actions .bank-prev,
    .bank-page .manual-actions .bank-proceed {
        width: 100%;
        height: 52px;
        min-height: 52px;
        font-size: 14px;
        line-height: 1.1;
    }

    .bank-page .manual-actions .bank-proceed {
        gap: 8px;
        padding: 0 10px;
        white-space: normal;
    }

    .bank-page .manual-actions .bank-proceed i {
        flex: 0 0 auto;
        font-size: 18px;
    }

    .email-page .main-container {
        width: calc(100% - 16px);
        margin-top: 10px;
        padding: 18px 14px;
    }

    .email-hero {
        width: 118px;
        height: 82px;
        margin-bottom: 2px;
    }

    .email-heading .ui-title,
    .email-page .ui-title {
        font-size: 21px;
        line-height: 1.2;
        min-height: 26px;
    }

    .email-subtitle {
        margin-top: 10px;
        font-size: 12px;
    }
    .dateofbirthpage .email-label{
        font-size: 14px; 
    }

    .email-form {
        margin-top: 16px;
    }

    .email-label {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .email-input {
        height: 52px;
        min-height: 52px;
        padding: 0 14px;
    }

    .email-or {
        margin: 14px 0;
    }

    .email-providers {
       grid-template-columns: 1fr;
        gap: 10px;
    }

    .email-provider {
        justify-content: center;
        min-width: 0;
        font-size: 11px;
        line-height: 1.2;
        gap: 7px;
    }

    .email-security {
        margin-top: 14px;
    }

    .email-page .email-actions {
        margin-top: 18px;
        padding-top: 14px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }
    .dateofbirthpage .email-actions{
       display: grid !important;
       grid-template-columns: repeat(1, minmax(0, 1fr))!important; 
    }

    .personal-page .main-container {
        width: calc(100% - 16px);
        margin-top: 10px;
        padding: 16px 10px;
    }

    .personal-page .ui-title {
        font-size: 22px;
        line-height: 1.2;
    }

    .personal-card {
        padding: 12px 10px 8px;
    }

    .personal-block {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
        padding-bottom: 16px;
    }

    .personal-block + .personal-block {
        padding-top: 16px;
    }

    .personal-block-icon {
        width: 22px;
        height: 22px;
        margin-top: 1px;
    }

    .personal-block-content h2 {
        margin-bottom: 12px;
        font-size: 15px;
    }

    .personal-grid,
    .personal-grid.two-col,
    .fatca-panel,
    .tax-extra-fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .choice-grid.two-options,
    .education-options,
    .occupation-options,
    .income-options,
    .experience-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .source-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .personal-page .choice-option {
        min-width: 0;
        min-height: 44px;
        padding: 8px 7px;
        font-size: 11px;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .personal-page .choice-option input {
        flex: 0 0 auto;
    }
    .declaration-check,.declaration-panel p{
        font-size: 12px;
    }

    .form-label-compact {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .field-with-count b {
        right: 12px;
        font-size: 11px;
    }

    .switch-field {
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .declaration-panel {
        padding: 12px;
        font-size: 12px;
        line-height: 1.45;
    }

    .declaration-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .declaration-check {
        align-items: flex-start;
        line-height: 1.35;
    }

    .personal-page .personal-actions {
        margin-top: 16px;
        padding-top: 14px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .document-page .main-container {
        width: calc(100% - 16px);
        margin-top: 10px;
        padding: 16px 10px;
    }

    .document-hero-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
        font-size: 20px;
    }

    .document-heading .ui-title {
        font-size: 22px;
    }

    .upload-row,
    .upload-row-derivative,
    .upload-row-derivative.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 14px 12px;
    }

    .upload-icon,
    .upload-copy,
    .document-select-field,
    .upload-action,
    .doc-switch,
    .segment-check,
    .upload-preview,
    .upload-row-signature .upload-copy,
    .upload-row-signature .upload-action,
    .upload-row-signature .upload-preview,
    .upload-row > .document-error {
        grid-column: auto;
        justify-self: stretch;
    }

    .upload-icon {
        justify-self: start;
    }

    .segment-check {
        min-height: 44px;
        width: 100%;
    }

    .document-page .document-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
        "nominee nominee"
        "prev next";
        gap: 10px;
        margin-top: 16px;
        padding-top: 14px;
    }

    .document-page .document-actions .pan-prev {
        grid-area: prev;
    }

    .document-page .document-action-group {
        display: contents;
    }

    .document-page .document-add-nominee {
        grid-area: nominee;
        width: 100%;
    }

    .document-page .document-actions .pan-next {
        grid-area: next;
        width: 100%;
    }

    .document-page .pan-prev,
    .document-page .pan-next,
    .document-add-nominee {
        height: 48px;
        min-height: 48px;
        font-size: 13px;
        padding-inline: 10px;
    }

    .doc-modal {
        padding: 12px;
    }

    .doc-modal-card,
    .crop-modal,
    .risk-modal,
    .live-modal,
    .nominee-modal,
    .signature-modal {
        width: 100%;
        max-width: 100%;
        padding: 28px 16px 18px;
        border-radius: 12px;
    }

    .photo-page .main-container {
        width: calc(100% - 16px);
        margin-top: 10px;
        padding: 16px 10px;
    }

    .photo-page .ui-title {
        font-size: 21px;
    }

    .photo-verification-grid {
        max-width: 100%;
        gap: 12px;
    }

    .photo-camera-preview {
        aspect-ratio: 4 / 3;
        max-height: 270px;
        border-radius: 10px;
    }

    .photo-guidelines,
    .photo-trust {
        padding: 14px 12px;
    }

    .photo-guideline-list,
    .photo-benefit-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .photo-guideline-list li,
    .photo-benefit-list li {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .photo-status-box {
        margin-top: 12px;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .photo-camera-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
    }

    .photo-start-btn {
        grid-column: 1 / -1;
    }

    .photo-continue-btn {
        grid-column: 1 / -1;
    }

    .photo-retake-btn,
    .photo-continue-btn {
        width: 100%;
    }

    .photo-camera-actions .btn {
        min-width: 0;
        min-height: 48px;
        height: 48px;
        padding-inline: 10px;
        font-size: 13px;
    }

    .photo-secure-note {
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.35;
    }

    .esign-page .main-container {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        margin: 10px auto 0;
        padding: 16px 10px;
    }

    .esign-page .ui-title {
        font-size: 21px;
    }

    .esign-content-grid,
    .esign-consent-form,
    .esign-actions {
        width: 100%;
        max-width: 100%;
    }

    .esign-summary-card,
    .esign-visual-card {
        padding: 14px 12px;
    }

    .esign-summary-list div {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 9px 0;
    }

    .esign-summary-list dd {
        border-left: 0;
        padding-left: 38px;
    }
    .document-proof-view-modal .proof_name{
           font-size: 16px; 
    }
    .bank-page .bank-error-box p.img_icon{
         padding-left: 0px;   
    }

    .esign-illustration img {
        width: min(190px, 76%);
    }

    .esign-consent {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .esign-secure-note {
        margin-top: 12px;
    }

    .esign-page .esign-actions.pan-bottom-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
    }

    .esign-page .esign-actions.pan-bottom-nav .btn {
        height: 48px;
        min-height: 48px;
        padding-inline: 10px;
        font-size: 13px;
    }

    .congrats-container {
        width: calc(100% - 16px);
        margin-top: 10px;
    }

    .congrats-card {
        border-radius: 14px;
        padding: 22px 14px;
    }
    .footer-divider {
        display: none;
    }
    .success-hero {
        width: 220px;
        height: 130px;
        margin-bottom: 8px;
    }

    .success-orbit {
        width: 106px;
        height: 106px;
    }

    .success-shield {
        top: 28px;
        width: 56px;
        height: 56px;
        font-size: 26px;
    }

    .success-ribbon {
        top: 76px;
        min-width: 126px;
        height: 34px;
        font-size: 14px;
    }

    .congrats-heading .ui-title {
        font-size: 22px;
    }

    .client-code-label {
        font-size: 14px;
    }

    .client-code {
        min-width: 0;
        width: min(100%, 260px);
        min-height: 58px;
        font-size: 26px;
        padding: 8px 16px;
    }

    .congrats-copy {
        margin-top: 14px;
        font-size: 12px;
    }

    .risk-score-box {
        grid-template-columns: 30px 1fr auto;
        gap: 10px;
        justify-content: stretch;
        text-align: left;
        font-size: 12px;
        padding: 8px 10px;
    }

    .congrats-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .congrats-actions .btn {
        height: 50px;
        min-height: 50px;
        font-size: 14px;
    }
    .aa-page .main-container {
        width: min(100% - 16px, 420px);
        margin-top: 10px;
    }

    .aa-card {
        padding: 22px 14px;
        border-radius: 14px;
    }

    .aa-hero-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 14px;
    }

    .aa-bank-icon {
        width: 41px;
        height: 41px;
        border-radius: 14px;
        font-size: 22px;
    }

    .aa-shield-icon {
        right: 4px;
        bottom: 5px;
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .aa-heading h1 {
        font-size: 15px;
        line-height: 1.25;
    }

    .aa-heading p {
        font-size: 13px;
        line-height: 1.45;
    }

    .aa-benefits {
        margin-top: 18px;
        gap: 10px;
    }

    .aa-benefit {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 12px;
        min-height: 0;
    }

    .aa-benefit-icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    .aa-benefit-number {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .aa-benefit div {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .aa-benefit h2 {
        font-size: 13px;
    }

    .aa-benefit p {
        margin-top: 6px;
        font-size: 11px;
    }

    .aa-actions {
        margin-top: 18px;
        width: 100%;
    }

    .aa-proceed {
        height: 52px;
        min-height: 52px;
        font-size: 15px;
    }

    .aa-secure-note {
        font-size: 11px;
        line-height: 1.45;
    }   
    .bank-page .manual-actions {
        grid-template-columns: 1fr;
        grid-template-areas: "prev" "proceed";
    }
         #verifyEmailModalpopup.email-otp-modal {
        width: calc(100vw - 28px);
        padding: 28px 18px 22px;
        border-radius: 14px;
    }

    #verifyEmailModalpopup .email-otp-head {
        padding-right: 38px;
        margin-bottom: 18px;
    }

    #verifyEmailModalpopup .email-otp-recipient {
        gap: 8px;
        font-size: 13px;
    }

    #verifyEmailModalpopup .email-otp-input-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    #verifyEmailModalpopup #otpEmailInput.email-otp-input {
        height: 52px;
        padding: 0 12px;
        font-size: 24px;
        letter-spacing: 22px;
        text-indent: 10px;
    }

    #verifyEmailModalpopup .email-otp-submit {
        min-height: 46px;
        font-size: 15px;
    }
#verifyEmailModalpopup .email-otp-input-row {
        grid-template-columns: minmax(0, 1fr) 50px;
    }

    #verifyEmailModalpopup #otpEmailInput.email-otp-input {
        max-width: 100%;
        letter-spacing: 22px;
        text-indent: 8px;
        background-size: 58px 100%;
    }

    #verifyEmailModalpopup .email-otp-timer {
        min-width: 46px;
        font-size: 13px;
    } 
 #verifyEmailModalpopup .email-otp-input-row {
        display: block;
    }

    #verifyEmailModalpopup #otpEmailInput.email-otp-input {
        height: 45px;
        padding: 0 72px 0 16px;
        font-size: 14px;
        letter-spacing: 0;
        text-indent: 0;
        background-image: none !important;
        background-size: auto;
    }

    #verifyEmailModalpopup .email-otp-timer {
        right: 14px;
        min-height: 45px;
        height: 45px;
        font-size: 13px;
        line-height: 45px;
    }
 .dateofbirthpage .email-status-actions {
        min-width: 96px;
        padding-right: 8px;
    }

    .dateofbirthpage .email-status-actions #verifyEmailBtn.email-verify-action,
    .dateofbirthpage .email-status-actions #verifyMobileBtn.email-verify-action {
        width: 96px;
        min-width: 96px;
        padding: 0 10px;
        font-size: 12px;
    }

    .dateofbirthpage .email-status-actions .verifyEmailBtn.email-inline-action,
    .dateofbirthpage .email-status-actions .verifyMobileBtn.email-inline-action,
    .dateofbirthpage .email-status-actions #editEmailBtn.email-edit-link,
    .dateofbirthpage .email-status-actions #editMobileBtn.email-edit-link {
        font-size: 12px;
    }
.dateofbirthpage .email-field.email-is-verified .email-status-actions {
        top: -29px;
        min-width: 76px;
        gap: 14px;
    }
     .personal-form .dayco-plan-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
       .residential-page .main-container {
        width: min(100% - 24px, 430px) !important;
        margin-top: 14px !important;
    }

    .residential-card {
        min-height: auto;
        padding: 36px 18px 34px;
    }

    .residential-heading .ui-title {
        font-size: 22px;
    }

    .residential-copy {
        font-size: 14px;
    }

    .residential-contact,
    .residential-back {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .residential-status-icon::before{
    width: 102px;
    height: 102px;    
    }
    .residential-status-icon i{
        font-size: 51px;  
    }
    .residential-status-icon{
         display:none;
    }
    .frs-esign-copy{
        font-size: 12px;
    }
    .frs-esign-actions{
        flex-direction: column;
        width: 100%;
    }
    .frs-esign-page .esign-section{
          padding: 20px;  
    }
    .frs-esign-success-img{
        width: 60%; 
    } 
    .frs-esign-actions form{
      width: 100%;   
    }
    .payment-icon-badge,.payment-promo-note,.payment-secure-row{
        display:none;
    }
    .payment-title {
        font-size: 20px;
    }
    .payment-subtitle {
        font-size: 12px;
    }
    .payment-field-head h2, .payment-summary-title h2{
        font-size: 18px;
    }
    .payment-field-head p{
         font-size: 14px;   
    }
    .payment-input-wrap input[type="text"]{
      font-size: 16px;  
    }
    .payment-divider{
        margin: 25px 0 25px;   
    }
    .landlogo{
        max-height: 100px;
    }
    .landlogo.aumcapital-indexbrand{
        max-height: 60px;
    }
    .landlogo.vardhaman-indexbrand{
        max-height: 50px; 
    } 
    .landing-help strong{
        display: flex;
        flex-direction: column;
    }
    .photo-page .photo-location-heading p{
           font-size: 12px; 
    }
    .photo-page .photo-location-heading > span{
     width: 45px;
    height: 45px;
    min-width: 45px;
    }
    .social-sec{
    /* flex-wrap: wrap; */
    }
    .social-bt {
        width: 100%;
    }
    .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb{
        justify-content: center !important;
    }
    .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{
        width: auto !important;
    }
     .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId {
        width: auto !important;
        flex-grow: unset !important;
    }
    .esign-summary-card{
           order: 2; 
    }
    .esign-visual-card{
        order: 1;  
    }
     body[data-page-key="nri_client_details"] .nri-client-card {
    padding: 18px;
    border-radius: 16px;
  }

  body[data-page-key="nri_client_details"] .nri-section {
    padding: 16px;
  }

  body[data-page-key="nri_client_details"] .nri-grid {
    grid-template-columns: 1fr;
  }

  body[data-page-key="nri_client_details"] .nri-field.full {
    grid-column: auto;
  }

  body[data-page-key="nri_client_details"] .nri-actions .btn {
    width: 100%;
  }
  body #mic-init-access-tool .mic-access-tool-general-button{
        width: 55px;
    height: 55px;
  }


} 

/* <= 560px */
@media (max-width: 560px) {

    .landing-page .truecaller_verify_or {
        margin: 14px 0 12px;
        gap: 10px;
        font-size: 12px;
    }
    .doc-modal-close{
      right: -3px;
      top: -6px;   
    }

    .landing-page .truecaller_verify {
        min-height: 52px;
        border-radius: 10px;
        font-size: 13px;
        padding: 0 14px;
        font-weight: 700;
    }

    .landing-page .truecaller_verify::before {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }    .landing-page .page-bg {
        padding: 12px;
    }

    .landing-header,
    .landing-wrap {
        width: 100%;
    }

    .landing-header {
        padding: 18px;
        gap: 16px;
    }

    .landing-brand img {
        max-width: 180px;
    }

    .landing-header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .landing-lang {
        width: 100%;
        height: 50px;
    }

    .landing-help {
        /* align-items: flex-start; */
        font-size: 15px;
        line-height: 1.35;
    }

    .landing-card {
        border-radius: 16px;
    }

    .landing-benefits li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
    }

    .landing-benefits li > span {
        width: 52px;
        height: 52px;
        font-size: 23px;
    }

    .landing-benefits strong,
    .landing-benefits p {
        max-width: none;
    }

    .landing-privacy {
        padding: 18px;
    }

    .landing-login {
        padding: 20px 18px 32px;
    }

    .landing-agree {
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.35;
    }

    .landing-voice {
        height: 68px;
        grid-template-columns: 48px 1fr 44px;
        gap: 12px;
        padding: 0 16px 0 10px;
    }

    .landing-mic {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .landing-play {
        width: 42px;
        height: 42px;
    }
     .personal-page .main-container {
        max-width: calc(100% - 24px);
        margin-top: 20px;
        padding: 16px 12px;
    }
    .personal-card {
        padding: 10px 12px 6px;
    }
    .personal-block {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .personal-block-icon {
        margin: 0;
    }
    .choice-grid.two-options,
    .education-options,
    .occupation-options,
    .income-options,
    .experience-options,
    .source-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .switch-field {
        justify-content: space-between;
        white-space: normal;
    }
       .otp-inputs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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


    .brand-copy strong {
        font-size: 22px;
    }

    .lang-select-wrap {
        width: 100%;
        max-width: 220px;
    }

    .logout-btn,
    .mobile-line button {
        min-height: 44px;
    }

    .pan-card {
        max-width: 100%;
    }

    .pan-card > strong {
        font-size: 24px;
    }

    .pan-note {
        flex-direction: column;
    }

    .email-provider {
        min-height: 55px;
        height: 55px;
        padding: 14px 16px;
        line-height: 1.2;

    }

    .charge-note,
    .email-security,
    .esign-secure-note,
    .photo-secure-note {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        line-height: 1.4;
    }

    .scan-art {
        width: min(292px, 100%);
        height: auto;
        aspect-ratio: 292 / 285;
        transform: none;
        margin: 0 auto;
    }

    .scan-art img {
        width: 100%;
        height: 100%;
    }

    .manual-title,
    .status-card-content {
        gap: 14px;
    }

    /* .choice-grid.two-options,
    .education-options,
    .occupation-options,
    .income-options,
    .experience-options,
    .source-options {
        grid-template-columns: minmax(0, 1fr);
    } */

    .choice-option,
    .form-control-compact,
    select.form-control-compact,
    .document-control,
    select.document-control {
        min-height: 48px;
        height: auto;
        line-height: 1.2;
    }

    .choice-option {
        padding: 12px;
    }

    .document-heading .ui-title {
        font-size: 18px;
    }

    .upload-row {
        padding: 16px;
        gap: 16px;
    }

    .upload-preview {
        grid-template-columns: 56px minmax(0, 1fr) 28px;
    }

    .document-page .document-section,
    .document-page .document-card,
    .document-page .upload-row,
    .document-page .upload-row-financial.upload-row,
    .document-page .upload-row-derivative,
    .document-page .upload-row-derivative.is-collapsed {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden;
    }

    .document-page .upload-row {
        min-height: 0;
        padding: 14px 16px;
        gap: 12px;
    }

    .document-page .upload-icon,
    .document-page .upload-copy,
    .document-page .document-select-field,
    .document-page .upload-action,
    .document-page .document-segments,
    .document-page .segment-check,
    .document-page .upload-preview,
    .document-page .upload-row > .document-error {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .document-page .upload-icon {
        width: 48px !important;
        height: 48px !important;
        justify-self: start !important;
        display:none;
    }

    .document-page .upload-copy h2 {
        font-size: 17px;
        line-height: 1.25;
    }

    .document-page .upload-copy p {
        font-size: 12px;
        line-height: 1;
    }

    .document-page .upload-action {
        height: 48px;
        min-height: 48px;
        padding: 0 12px;
        font-weight: 600;
    }
    .document-page .upload-row-derivative .doc-switch {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        justify-self: start !important;
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex: 0 0 54px !important;
    }

    .document-page .document-segments {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .document-page .upload-row-derivative .segment-check {
        white-space: normal;
    }

    .document-page .document-select-field .document-control,
    .document-page .document-control {
        width: 100%;
        max-width: 100%;
    }

    .file-thumb {
        width: 56px;
        height: 56px;
    }

    .esign-illustration img {
        width: 100%;
    }

    .esign-page .pan-prev,
    .esign-page .pan-next,
    .esign-page .esign-next {
        width: 100%;
    }
    .pan-page .main-container {
        margin-top: 20px;
        padding: 22px 14px;
    }
    .status-card-content {
        gap: 14px;
    }
    .status-card strong {
        font-size: 16px;
        line-height: 1.35;
    }
    .pan-section {
        padding-top: 30px;
    }
    .pan-workspace {
        padding-top: 34px;
    }
    .pan-card {
        height: 200px;
        padding: 19px;
    }
    .pan-card-body {
        grid-template-columns: 56px 1fr 58px;
        gap: 14px;
    }
    .pan-avatar {
        width: 56px;
        height: 66px;
    }
    .pan-card-body i {
        font-size: 58px;
    }
    .pan-note {
        align-items: flex-start;
        gap: 14px;
    }
    .pan-note p,
    .pan-help {
        font-size: 14px;
    }
    .pan-verify {
        font-size: 20px;
    }
       .email-hero {
        width: 95px;
        height: auto;
    }
    .email-security {
        align-items: flex-start;
        font-size: 14px;
        display: none;
    }
    .esign-secure-note{
        display: none;
    }
    .ui-title-rule{
        margin: 8px auto 0;  
    }
       .upi-apps {
        grid-template-columns: repeat(2, 1fr);
        min-height: 0;
        padding-bottom: 16px;
    }
    .bank-card {
        min-height: auto;
    }
    .bank-qr-box {
        width: 190px;
        height: 188px;
    }
    .bank-qr-box img {
        width: 190px;
        height: 188px;
    }
    .scan-art {
        transform: scale(.86);
        transform-origin: center;
        margin: -15px 0;
    }
    .bank-scan-card h2 {
        font-size: 22px;
    }
    .bank-scan-card p {
        font-size: 17px;
    }
    .input-with-icon {
        grid-template-columns: 26px 1fr 26px;
        padding: 0 10px;
    }
        #nalart1.reveal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        padding: 30px 22px 26px;
        border-radius: 16px;
    }

    #nalart1.reveal p {
        font-size: 15px;
    }
    #nalart1.reveal .button, #nalart1.reveal .red-bt{
        font-size: 14px;
    }
    .bank-mismatch-modal.reveal{
       padding: 43px 15px 30px; 
    }
    .bank-mismatch-modal .nomino-cunt h2{
     font-size: 13px;   
    }
    .payment-title-row {
    align-items: flex-start;
  }

  .payment-shell {
    padding: 22px 14px;
  }

  .payment-input-wrap {
    height: 58px;
  }

  .payment-coupon-btn,
  .payment-checkout-btn {
    min-height: 56px;
    height: auto;
    font-size: 14px;
  }

  .payment-summary-line,
  .payment-total-row {
    font-size: 15px;
  }
}


/* <= 430px */
@media (max-width: 430px) {

    /* New User uses the landing header without the landing-page body class.
       Keep it aligned with the form card and prevent the language control's
       desktop min-width from overflowing the two-column mobile header. */
    .new-user-page .landing-header {
        box-sizing: border-box;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin-right: auto;
        margin-left: auto;
        padding: 10px;
    }

    .new-user-page .landing-header-actions {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .new-user-page .landing-lang,
    .new-user-page .landing-help {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .new-user-page .landing-lang {
        padding: 0 28px 0 8px;
    }

    .new-user-page .landing-lang .lang-select,
    .new-user-page .landing-lang .chosen-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .new-user-page .landing-lang .chosen-container-single .chosen-single {
        height: 48px;
        padding: 0 22px 0 28px;
        font-size: 12px;
    }

    .new-user-page .landing-lang .chosen-container-single .chosen-single span {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--navy) !important;
        font-size: 12px;
        line-height: 1.2;
        text-overflow: ellipsis;
        visibility: visible;
        opacity: 1;
    }

    .new-user-page .landing-help {
        gap: 6px;
        padding: 0 8px;
        font-size: 12px;
    }

    .new-user-page .landing-help strong,
    .new-user-page .landing-help a {
        min-width: 0;
        font-size: 12px;
        white-space: nowrap;
    }

    
 /* Compact header and DigiLocker detail modals for 360px mobile screens. */
    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        box-sizing: border-box !important;
        width: calc(100vw - 0px) !important;
        max-width: calc(100vw - 0px) !important;
        min-width: 0 !important;
        grid-template-columns: minmax(94px, 1fr) minmax(38px, auto) 38px 38px !important;
        gap: 10px !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
     body:not(.landing-page,.navia-zero-page,.new-user-page) .pcj-brand .brand-logo {
        width: 32% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        display: contents !important;
    }

    /* body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        min-width: 0 !important;
        width: auto !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 20px !important;
        gap: 3px !important;
        overflow: hidden !important;
    } */  
    

    body:not(.landing-page,.navia-zero-page,.new-user-page) .rocket-brand .brand-logo{
       width: 40% !important;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        max-width: 70px !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }
    .lang-select-wrap::before{
      font-size: 17px;  
      left: 9px;
    }  

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn,.mobile-tel {
        box-sizing: border-box !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        flex: 0 0 38px !important;
        overflow: hidden !important;

        background: #fff;
        border: 1px solid #dfe6f4;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        display: inline-flex !important;
        margin: 0 !important;
        font-size: 16px !important;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn span {
        display: none !important;
        content: none !important;
    }
    .esign-intro{
        font-size: 14px;
        text-align: center;
    }
    .landing-page .page-bg {
        padding: 10px;
    }

    .landing-header {
        padding: 16px;
    }

    .landing-brand img {
        max-width: 210px;
    }

    .landing-help {
        justify-content: flex-start;
        text-align: left;
    }
    .landing-header {
        width: min(100%);
        padding: 10px;
        border-radius: 16px;
        gap: 7px;
    }

    .landing-brand {
        min-height: 70px;
    }

    .landing-brand img {
        max-width: 236px;
        max-height: 50px;
    }

    .landing-header-actions {
        gap: 8px;
    }
    .landing-login-icon{
        width: 72px;
        height: 72px;
        font-size: 34px;
    }
    .landing-voice strong{
        font-size: 14px;
    }
    .landing-login-btn{
        font-size: 14px;
    }
    .landing-agree{
        min-height: 30px;
    }

    .landing-lang,
    .landing-help {
        min-height: 48px;
    }

    .landing-help {
        justify-content: center;
        text-align: center;
        white-space: normal;
        font-size: 13px;
    }

    .landing-help strong {
        overflow: visible;
        text-overflow: clip;
    }
     body #mic-init-access-tool .mic-access-tool-box {
    width: calc(100vw - 12px);
    max-width: none;
    max-height: calc(100vh - 12px);
    bottom: 6px;
    border-radius: 15px;
  }

  body #mic-init-access-tool .mic-access-tool-box.mic-access-tool-box-right {
    right: 6px;
  }

  body #mic-init-access-tool .mic-access-tool-box:not(.mic-access-tool-box-right) {
    left: 6px;
  }
}

/* <= 380px */
@media (max-width: 380px) {
   
    #aadhar_verify_pop.aadhaar-modal,
    #pan_verify_pop.pan-card-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #aadhar_verify_pop .aadhaar-modal-close,
    #pan_verify_pop .pan-card-close {
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }

    #aadhar_verify_pop .aadhaar-modal-head,
    #pan_verify_pop .pan-card-modal-head {
        padding: 4px 25px 14px !important;
        margin-bottom: 12px !important;
    }

    #aadhar_verify_pop .aadhaar-modal-head h2,
    #pan_verify_pop h2 {
        font-size: 16px !important;
        line-height: 1.08 !important;
    }

    #aadhar_verify_pop .aadhaar-modal-head p,
    #pan_verify_pop .pan-card-modal-head p {
        font-size: 12px !important;
        line-height: 1.32 !important;
        display: none;
    }
    #pan_verify_pop .pan-card-xml{
        display: none;
    }

    #aadhar_verify_pop .aadhaar-summary-strip,
    #pan_verify_pop .pan-card-table {
        margin-top: 8px !important;
    }

    #aadhar_verify_pop .aadhaar-summary-item {
        min-height: 0 !important;
        padding: 12px 14px !important;
        gap: 14px !important;
    }

    #aadhar_verify_pop .summary-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
    }

    #aadhar_verify_pop .aadhaar-summary-item b {
        font-size: 14px !important;
        margin-top: 6px !important;
    }

    #aadhar_verify_pop .aadhaar-detail-card,
    #pan_verify_pop .pan-card-table {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    #aadhar_verify_pop .aadhaar-detail-row,
    #aadhar_verify_pop .aadhaar-detail-row.split,
    #pan_verify_pop .pan-card-row,
    #pan_verify_pop .pan-card-row-split {
        min-height: 0 !important;
    }

    #aadhar_verify_pop .aadhaar-detail-row > span {
        width: 32px !important;
        height: 32px !important;
    }

    #aadhar_verify_pop .aadhaar-detail-row strong,
    #aadhar_verify_pop .aadhaar-detail-row p,
    #pan_verify_pop .pan-card-label,
    #pan_verify_pop .pan-card-row > p {
        font-size: 12px !important;
        line-height: 1.28 !important;
    }
    #aadhar_verify_pop .aadhaar-photo-card strong,#aadhar_verify_pop .aadhaar-photo-card p{
        font-size: 12px;
    }

    #pan_verify_pop .pan-card-label,
    #pan_verify_pop .pan-card-row > p {
        min-height: 0 !important;
        padding: 11px 14px !important;
    }

    .top-header,
    .main-container,
    .footer-container,
    .bank-page .main-container,
    .email-page .main-container,
    .pan-page .main-container,
    .personal-page .main-container,
    .document-page .main-container,
    .photo-page .main-container,
    .esign-page .main-container {
        width: calc(100% - 16px);
    }


    .photo-page .page-bg {
        overflow-x: hidden;
    }

    .photo-page .main-container,
    .photo-page .photo-container,
    .photo-page .photo-section,
    .photo-page .photo-verification-grid,
    .photo-page .photo-camera-column,
    .photo-page .photo-panel {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .photo-page .main-container {
        padding: 14px 10px !important;
        margin-top: 10px;
        overflow: hidden;
    }

    .photo-page .photo-heading {
        margin-bottom: 14px;
    }

    .photo-page .ui-title {
        font-size: 20px !important;
        line-height: 1.2;
    }

    .photo-page .photo-verification-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    .photo-page .photo-camera-preview {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        max-height: none !important;
        border-radius: 8px;
    }

    .photo-page .photo-camera-preview.is-live .photo-live-badge {
        left: 12px;
        top: 12px;
        min-width: 66px;
        height: 30px;
        font-size: 13px;
    }

    .photo-page .photo-camera-preview.is-live .photo-face-ring {
        top: 54px;
        width: 210px;
        height: 260px;
        border-width: 3px;
    }

    .photo-page .photo-status-box {
        width: 100%;
        min-height: 42px;
        margin-top: 10px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .photo-page .photo-guidelines,
    .photo-page .photo-trust {
        min-height: 0;
        padding: 14px 12px !important;
    }

    .photo-page .photo-guidelines h2 {
        max-width: none;
        font-size: 16px;
        margin-bottom: 12px;
    }

    .photo-page .photo-guideline-list li,
    .photo-page .photo-benefit-list li {
        min-height: 48px;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 10px;
    }

    .photo-page .photo-guideline-list span,
    .photo-page .photo-benefit-list span {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .photo-page .photo-guideline-list p,
    .photo-page .photo-benefit-list p {
        font-size: 12px;
        line-height: 1.3;
    }

    .photo-page .photo-camera-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 12px;
    }

    .photo-page .photo-camera-actions .btn {
        width: 100% !important;
        min-width: 0;
        height: 46px;
        min-height: 46px;
        padding: 0 8px;
        font-size: 12px;
    }

    .photo-page .photo-start-btn {
        grid-column: 1 / -1;
    }
    .landing-mobile-field {
        grid-template-columns: 52px 1fr;
        height: 52px;
        font-size: 14px;
        font-weight: 500;
    }
    .landing-mobile-field input{
        font-size: 14px;
        font-weight: 500;
    }

    .landing-mobile-field input {
        padding: 0 14px;
    }

    .bank-qr-box,
    .bank-qr-box img {
        width: 170px;
        height: 168px;
    }


    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        grid-template-columns: 1fr;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 100%;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr) 42px;
        gap: 6px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        font-size: 11px;
    }

    /* body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        padding-left: 8px;
        padding-right: 24px;
    } */

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 42px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        gap: 6px;
        padding: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        gap: 3px;
        padding: 5px;
    }

    /* body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        min-height: 45px;
        padding: 4px 1px;
    } */

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        font-size: 6.2px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-inputs {
        gap: 6px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .otp-input {
        height: 54px;
    }
    .existing-user-page .existing-main {
        width: calc(100% - 16px);
        padding: 16px 10px 18px;
    }

    .existing-user-page .existing-table tr {
        padding: 10px;
    }

    .existing-user-page .existing-status {
        min-height: 34px;
        font-size: 10px;
        gap: 6px;
    }



    .existing-user-page .existing-security {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .existing-user-page .existing-security > span {
        width: 34px;
        height: 34px;
        font-size: 22px;
    }

    .existing-user-page .existing-security strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .existing-user-page .existing-security p {
        font-size: 10px;
        line-height: 1.25;
    }





    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy strong {
        font-size: 21px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-copy span {
        font-size: 9px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        font-size: 11px;
    }
/* 
    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 38px;
        height: 38px;
        min-height: 38px;
    } */

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: inline-flex;
        font-size: 15px;
    }

     .email-providers {
        grid-template-columns: 1fr;
    }
        .bank-page .manual-actions {
        gap: 8px;
    }

    .bank-page .manual-actions .btn {
        min-height: 48px;
        height: 48px;
        padding: 0 10px;
        font-size: 13px;
    }
    .existing-user-page .top-header {
        margin-bottom: 16px;
    }

    .existing-user-page .footer-container {
        margin-top: 12px;
    }

    .existing-user-page .existing-main {
        margin-top: 16px;
        padding: 18px 10px 20px;
    }

    .existing-user-page .existing-icon {
        width: 68px;
        height: 68px;
        font-size: 34px;
    }

    .existing-user-page .existing-hero {
        gap: 7px;
        margin-bottom: 18px;
    }

    .existing-user-page .existing-hero h1 {
        font-size: 21px;
    }

    .existing-user-page .section-accent {
        margin: 2px auto 0;
    }

    .existing-user-page .existing-hero p {
        max-width: 260px;
        font-size: 12px;
        line-height: 1.35;
    }

    .existing-user-page .existing-table td {
        padding: 9px 0;
    }

    .existing-user-page .existing-table .exitbtn {
        min-width: 116px;
        height: 42px;
        min-height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }

    .existing-user-page .existing-actions {
        margin: 16px 0;
    }

    .existing-user-page .existing-logout-link,
    .existing-user-page .existing-new-btn {
        height: 44px;
        min-height: 44px;
        font-size: 13px;
    }

    .existing-user-page .existing-security {
        padding: 12px;
    }
      .new-user-header-actions {
        flex-wrap: wrap;
    }

    .new-user-help {
        width: 100%;
        justify-content: center;
    }

    .new-user-info {
        padding-left: 14px;
        padding-right: 14px;
    }

    .new-user-form-panel {
        padding-left: 14px;
        padding-right: 14px;
    }
}



@media (min-width: 1281px) {

/* Responsive header alignment hardening */
body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
    width: min(1280px, calc(100% - 64px));
    height: auto;
    min-height: 100px;
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(500px, 1fr) minmax(250px, 320px);
    align-items: center;
    column-gap: clamp(12px, 1.6vw, 24px);
    padding: 0 clamp(16px, 1.6vw, 24px);
    overflow: visible;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area,
body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper,
body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
    min-width: 0;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
    width: 100%;
    padding-right: clamp(10px, 1vw, 16px);
    overflow: hidden;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-logo {
    display: block;
    max-width: 100%;
    max-height: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
    width: 100%;
    max-width: 720px;
    justify-self: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(2px, .35vw, 8px);
    padding: 0 clamp(4px, .7vw, 12px);
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .step {
    width: auto;
    min-width: 44px;
    max-width: 76px;
    flex: 1 1 0;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .step:not(:last-child)::after {
    left: calc(50% + 18px);
    width: calc(100% - 26px);
    max-width: 60px;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .step p {
    overflow-wrap: anywhere;
} 

body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
    width: 100%;
    height: auto;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    padding-left: clamp(12px, 1.4vw, 24px);
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    justify-content: flex-end;
    gap: clamp(6px, .8vw, 10px);
    white-space: nowrap;
    overflow: hidden;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong,
body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}
body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        flex: 0 1 140px;
    min-width: 112px;
    max-width: 150px;
}
body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap .chosen-container{
    flex: 0 1 140px;
    min-width: 112px;
    max-width: 150px; 
    height: 44px;      
    border-radius: 9px;
    background: #fff;
    border: 1px solid #dfe6f4;
    font-size: 14px;
    font-weight: 700; 
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
} 


body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
    flex: 0 0 auto;
    min-width: 104px;
    white-space: nowrap;
}

}

@media (max-width: 1280px) and (min-width: 921px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        width: calc(100% - 48px);
        grid-template-columns: minmax(150px, 190px) minmax(420px, 1fr) minmax(220px, 280px);
        column-gap: 12px;
        padding-inline: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        max-width: 620px;
        padding-inline: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span {
        width: 28px;
        height: 28px;
        margin-bottom: 7px;
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p {
        font-size: 10px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step:not(:last-child)::after {
        top: 17px;
        left: calc(50% + 16px);
        width: calc(100% - 24px);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        font-size: 13px;
        gap: 6px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline i {
        font-size: 19px;
        margin: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        min-width: 104px;
        max-width: 132px;
        padding-left: 12px;
        padding-right: 28px;
        gap: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        min-width: 94px;
        padding-inline: 12px;
    }
}

@media (max-width: 920px) and (min-width: 641px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        width: calc(100% - 28px);
        min-height: 140px;
        grid-template-columns: minmax(145px, 1fr) minmax(0, 1.6fr);
        grid-template-rows: auto auto;
        row-gap: 8px;
        column-gap: 12px;
        padding: 12px 14px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        grid-column: 1;
        grid-row: 1;
        height: 54px;
        border-right: 0;
        padding-right: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-column: 2;
        grid-row: 1;
        min-height: 54px;
        border-left: 0;
        padding-left: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        justify-content: flex-end;
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        width: auto;
        gap: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        height: 42px;
        padding: 0;
        font-size: 0;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn span {
        display: none;
        content: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        display: inline-flex;
        font-size: 18px;
        margin: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 4px;
        padding: 7px;
        border-radius: 12px;
        background: linear-gradient(180deg, #f9fbff, #fff);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step {
        min-width: 0;
        max-width: none;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 23px;
        height: 23px;
        font-size: 10px;
        margin-bottom: 5px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        display: block;
        font-size: 8px;
        line-height: 1;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step:not(:last-child)::after {
        top: 14px;
        left: calc(50% + 13px);
        width: calc(100% - 18px);
    }
}

/* Keep tablet/zoom header aligned in one row for payment and shared eKYC pages */
@media (max-width: 1280px) and (min-width: 921px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .top-header {
        width: calc(100% - 48px);
        min-height: 96px;
        height: auto;
        grid-template-columns: minmax(150px, 190px) minmax(430px, 1fr) minmax(220px, 280px);
        grid-template-rows: none;
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        padding: 0 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .brand-area {
        grid-column: auto;
        grid-row: auto;
        height: 86px;
        min-width: 0;
        border-right: 1px solid #dfe6f4;
        padding: 0 12px 0 0;
        justify-content: flex-start;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .stepper {
        grid-column: auto;
        grid-row: auto;
        display: flex;
        width: 100%;
        max-width: 620px;
        justify-self: center;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active {
        width: auto;
        min-width: 42px;
        max-width: 68px;
        min-height: 0;
        flex: 1 1 0;
        padding: 0;
        border-radius: 0;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step span,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active span {
        width: 28px;
        height: 28px;
        margin: 0 auto 6px;
        font-size: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step p,
    body:not(.landing-page,.navia-zero-page,.new-user-page) .step.active p {
        display: block;
        font-size: 9px;
        line-height: 1;
        font-weight: 800;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .step:not(:last-child)::after {
        top: 17px;
        left: calc(50% + 15px);
        width: calc(100% - 20px);
        max-width: 46px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .help-area {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        min-height: 86px;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 8px;
        border-left: 1px solid #dfe6f4;
        padding-left: 12px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        justify-content: flex-end;
        gap: 5px;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline strong {
        display: inline;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .helpline span {
        max-width: 112px;
        font-size: 12px;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .actions-row {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap {
        width: auto;
        min-width: 96px;
        max-width: 120px;
        height: 40px;
        min-height: 40px;
        padding: 0 26px 0 10px;
        display: flex;
        gap: 6px;
        font-size: 12px;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap > i {
        display: inline-flex;
        font-size: 16px;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select-wrap::after {
        display: block;
        content: "\f078";
        right: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .lang-select {
        position: static;
        opacity: 1;
        width: 100%;
        height: auto;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn {
        width: auto;
        min-width: 86px;
        height: 40px;
        min-height: 40px;
        padding: 0 10px;
        gap: 6px;
        font-size: 12px;
        overflow: hidden;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn span {
        display: inline;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .logout-btn i {
        font-size: 17px;
    }
}

/* Mobile voice assistant card */
@media (max-width: 640px) {
    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container .voice-assist,
    .navia-zero-page .footer-container .voice-assist {
        box-sizing: border-box;
        width: 100%;
        min-height: 45px;
        padding: 10px 12px;
        gap: 12px;
        border: 1px solid #ffd9dd;
        border-radius: 14px;
        background: linear-gradient(135deg, #fff 0%, #fff7f8 100%);
        box-shadow: 0 8px 20px rgba(18, 39, 84, 0.08);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container .voice-assist strong,
    .navia-zero-page .footer-container .voice-assist strong {
        flex: 1;
        min-width: 0;
        color: var(--navy);
        font-size: 13px;
        line-height: 1.25;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container .voice-assist .mic-circle,
    .navia-zero-page .footer-container .voice-assist .mic-circle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 20px;
        box-shadow: 0 7px 16px rgba(255, 0, 20, 0.25);
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container .voice-assist .play-dot,
    .navia-zero-page .footer-container .voice-assist .play-dot {
        width: 42px;
        height: 42px;
        min-width: 42px;
        margin-left: auto;
        border: 1px solid #ffe3e6;
        font-size: 16px;
        box-shadow: 0 6px 16px rgba(18, 39, 84, 0.1);
        transition: transform 160ms ease, box-shadow 160ms ease;
    }

    body:not(.landing-page,.navia-zero-page,.new-user-page) .footer-container .voice-assist .play-dot:active,
    .navia-zero-page .footer-container .voice-assist .play-dot:active {
        transform: scale(0.94);
        box-shadow: 0 3px 9px rgba(18, 39, 84, 0.12);
    }
    .photo-page .photo-location-gate {
    min-height: 0;
    padding: 12px;
  }

  .photo-page .photo-location-card {
    padding: 18px 14px;
    border-radius: 14px;
  }

  .photo-page .photo-location-heading {
    align-items: flex-start;
  }

  .photo-page .photo-location-heading h1 {
    font-size: 16px;
  }

  .photo-page .photo-location-steps {
    grid-template-columns: 1fr;
  }

  .photo-page .photo-location-desktop-guide {
    display: none;
  }

  .photo-page .photo-location-mobile-guide {
    display: block;
    margin-top: 18px;
  }

  .photo-page .photo-location-steps img {
    height: auto;
    max-height: 220px;
  }

  .photo-page .photo-location-actions {
    flex-direction: column;
    text-align: center;
  }
  #pan_verify_pop .pan-card-label span{
    width: 25px;
    min-width: 25px;
    height: 25px;
  }
}

/* IPV mobile camera alignment fix */
@media (max-width: 560px) {
    .photo-page .photo-camera-column {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .photo-page .photo-camera-preview {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1;
        margin: 0 !important;
        align-self: stretch;
    }

    .photo-page .photo-camera-video,
    .photo-page #capturedImage,
    .photo-page #photoCanvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover;
    }

    .photo-page .photo-face-ring {
        top: 50% !important;
        left: 50% !important;
        width: min(58%, 210px) !important;
        height: min(74%, 270px) !important;
        transform: translate(-50%, -50%) !important;
    }

    .photo-page .photo-status-box {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        align-self: stretch;
    }
}
/* Aadhaar DigiLocker start page */
@media (max-width: 900px) {
  .aadhaar-start-container { width: calc(100% - 24px); margin-top: 20px; }
  .aadhaar-start-section { padding: 28px 24px 24px; }
  .aadhaar-start-card { grid-template-columns: 1fr; }
  .aadhaar-card-visual { min-height: 260px; padding: 28px; }
  .aadhaar-card-visual img { width: min(78%,300px); }
  .aadhaar-verified-badge { right: 26%; bottom: 16%; }
  .aadhaar-card-content { padding: 32px; }
}

@media (max-width: 600px) {
  .aadhaar-start-container { width: calc(100% - 20px); margin: 14px auto; }
  .aadhaar-start-section { padding: 22px 12px 16px; border-radius: 17px; }
  .aadhaar-heading-icon { width: 56px; height: 56px; margin-bottom: 12px; font-size: 23px; }
  .aadhaar-start-heading { margin-bottom: 20px; }
  .aadhaar-start-heading .ui-title { font-size: 23px; }
  .aadhaar-start-heading p { padding: 0 8px; font-size: 13px; line-height: 1.45; }
  .aadhaar-start-card { min-height: 0; border-radius: 15px; }
  .aadhaar-card-visual { min-height: 205px; padding: 20px; }
  .aadhaar-card-visual img { width: min(78%,250px); }
  .aadhaar-card-glow { width: 205px; height: 205px; }
  .aadhaar-verified-badge { right: 19%; bottom: 13%; width: 48px; height: 48px; border-width: 5px; font-size: 17px; }
  .aadhaar-card-content { padding: 25px 18px; }
  .aadhaar-provider-label { font-size: 10px; }
  .aadhaar-card-content h2 { font-size: 20px; line-height: 1.25; }
  .aadhaar-card-content > p { font-size: 13px; }
  .aadhaar-benefit-list { margin: 20px 0 22px; }
  .aadhaar-benefit-list small { line-height: 1.35; }
  .aadhaar-digilocker-btn { min-height: 54px; padding: 0 15px; font-size: 14px; }
  .aadhaar-trust-strip { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .aadhaar-trust-strip span { justify-content: flex-start; }
  .aadhaar-trust-strip span + span { padding-top: 12px; border-top: 1px solid #dbe3f2; border-left: 0; }
}