:root{

    /* Brand palette — aligned with the logo's navy + green. */
    --primary:#1E4661;
    --primary-dark:#153144;
    --blue:#1E4661;
    --blue-light:#506F84;
    --gold:#B89432;
    --bg:#F4F7FC;
    --surface:#FFFFFF;
    --text:#101828;
    --muted:#64748B;
    --muted-light:#94A3B8;
    --border:#E2E8F0;
    --green:#3A8A57;
    --green-bg:#EFF6F2;
    --red:#DC2626;
    --red-bg:#FEF2F2;
    --amber:#D97706;
    --amber-bg:#FFFBEB;

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-pill:999px;

    --shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --shadow-md:0 8px 24px rgba(16,24,40,.08);
    --shadow-lg:0 20px 45px rgba(15,23,42,.10);

    --ease:cubic-bezier(.22,.9,.35,1);

}



*{

    box-sizing:border-box;

}

/* Font Awesome icons (used by the shared header/footer included on this
   page) render their glyphs by INHERITING font-family from their .fa-*
   host element down onto ::before — but a blanket "*::before" reset is a
   DIRECT match on ::before, and a direct match always wins over an
   inherited value regardless of specificity, so applying it unconditionally
   would silently clobber every icon with "Inter" and show a blank glyph
   box instead. Excluding fa-* elements here keeps their inherited
   Font Awesome font intact. */
*:not([class*="fa-"]),
:not([class*="fa-"])::before,
:not([class*="fa-"])::after{

    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

}



body{

    margin:0;
    background:
        radial-gradient(1200px 500px at 50% -10%, #eef3ff 0%, transparent 60%),
        var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;

}


::selection{
    background:rgba(37,99,235,.18);
}





/* HEADER */


.header{

    height:72px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 6%;

    border-bottom:1px solid #e8edf5;

    position:sticky;
    top:0;
    z-index:50;

}



.brand{

    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;

}


.brand > div{

    min-width:0;
    overflow:hidden;

}


.brand h3,
.brand span{

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}



.logo{

    width:42px;
    height:42px;

    border-radius:12px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--blue)
    );

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:900;
    letter-spacing:.3px;

    box-shadow:0 6px 16px rgba(37,99,235,.28);

}



.brand-logo-img{

    height:40px;
    width:auto;
    display:block;
    flex-shrink:0;

}



.brand h3{

    margin:0;

    font-size:17px;
    font-weight:700;
    letter-spacing:-.01em;

    color:#071A33;

}



.brand span{

    font-size:12px;
    color:var(--muted);

}



.secure{

    background:linear-gradient(135deg,#EFF6FF,#F1F5FF);

    color:var(--primary);

    padding:9px 16px;

    border-radius:var(--radius-pill);

    font-size:12.5px;

    font-weight:700;

    border:1px solid #DCE7FF;

    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    flex-shrink:0;

}


/* TRUST BAR */

.trust-bar{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 28px;

    max-width:720px;
    margin:0 auto 18px;
    padding:14px 24px;

    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow-sm);

}


.kyc-trust-item{

    display:flex;
    align-items:center;
    gap:9px;

    font-size:13px;
    font-weight:700;
    color:#374151;

}


.trust-item-icon{

    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    flex:none;
    font-size:10.5px;

}

.trust-icon-navy{ background:#EDF0F2; color:var(--primary); }

.trust-icon-green{ background:var(--green-bg); color:var(--green); }


.trust-footnote{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    max-width:560px;
    margin:28px auto 10px;
    padding:12px 22px;

    text-align:center;

    background:var(--green-bg);
    border:1px solid #D9EEE0;
    border-radius:var(--radius-pill);

    font-size:12.5px;
    font-weight:600;
    color:#1F5233;
    line-height:1.6;

}

.trust-footnote-icon{

    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    flex:none;
    font-size:10px;
    background:#fff;
    color:var(--green);

}





/* MAIN */


.wrapper{

    max-width:680px;

    margin:28px auto 60px;

    padding:0 20px;

}





/* STEPPER */


.stepper{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    margin-bottom:30px;

    padding:0 4px;

}



.step{

    text-align:center;

    font-size:11px;

    font-weight:700;

    color:var(--muted-light);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    position:relative;
    flex:1;
    min-width:0;

}


.step span{

    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}



.step-circle{

    width:34px;
    height:34px;

    border-radius:50%;

    background:white;
    border:2px solid var(--border);
    color:var(--muted-light);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    font-weight:800;

    transition:all .3s var(--ease);

}



.step span{

    display:block;

    font-size:11px;
    letter-spacing:.01em;
    color:var(--muted-light);
    font-weight:700;

    transition:color .3s var(--ease);

}



.step.active .step-circle{

    color:white;

    background:linear-gradient(135deg,var(--primary),var(--blue));
    border-color:transparent;

    box-shadow:0 6px 14px rgba(37,99,235,.32);
    transform:scale(1.06);

}



.step.active span{

    color:var(--primary);

}



.step.completed .step-circle{

    background:var(--green);
    border-color:transparent;
    color:transparent;
    font-size:0;

}


.step.completed .step-circle::after{

    content:"\2713";
    color:white;
    font-size:14px;
    font-weight:800;

}


.step.completed span{

    color:var(--green);

}



.line{

    flex:1;

    height:2px;

    background:var(--border);

    margin:17px -4px 0;
    max-width:80px;

    position:relative;
    overflow:hidden;

    border-radius:2px;

}


.line::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--green),var(--blue));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s var(--ease);

}


.line.filled::after{

    transform:scaleX(1);

}




/* FORM CARD */


.form-card{

    background:var(--surface);

    padding:34px;

    border-radius:var(--radius-lg);

    border:1px solid #edf1f7;

    box-shadow:var(--shadow-lg);

    animation:fade .35s var(--ease);

}



@keyframes fade{

    from{

        opacity:0;
        transform:translateY(14px);

    }

    to{

        opacity:1;
        transform:none;

    }

}


@keyframes spin{

    to{ transform:rotate(360deg); }

}


@keyframes pulse{

    0%,100%{ opacity:1; }
    50%{ opacity:.55; }

}


@keyframes popIn{

    from{ opacity:0; transform:scale(.85); }
    to{ opacity:1; transform:scale(1); }

}


@keyframes slideIn{

    from{ opacity:0; transform:translateY(-8px) translateX(0); }
    to{ opacity:1; transform:translateY(0); }

}




.heading{

    margin-bottom:26px;

}



.heading h2{

    margin:0;

    font-size:22px;
    font-weight:800;
    letter-spacing:-.02em;

    color:#071A33;

}



.heading p{

    color:var(--muted);

    font-size:14px;

    margin-top:8px;

    line-height:1.5;

}




/* FIELDS */


.field{

    margin-bottom:18px;

}



label{

    display:flex;
    align-items:center;
    gap:4px;

    font-size:13px;

    font-weight:700;

    margin-bottom:7px;

    color:#334155;

}


label .required{

    color:var(--red);
    font-weight:800;

}



input,
select{

    width:100%;

    height:48px;

    border-radius:var(--radius-sm);

    border:1.5px solid var(--border);

    padding:0 14px;

    font-size:14px;

    background:white;

    color:var(--text);

    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);

}



input::placeholder{

    color:#A6B1C2;

}



input:hover,
select:hover{

    border-color:#c9d4e6;

}



input:focus,
select:focus{

    outline:none;

    border-color:var(--blue);

    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);

}


select{

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1L7 7L13 1' stroke='%2364748B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:38px;

}




/* CONSENT */


.consent-box{

    margin-top:24px;

    padding:18px 20px;

    background:linear-gradient(180deg,#F8FAFF,#F4F8FF);

    border:1px solid #DCE7FF;

    border-radius:var(--radius-md);

}



.consent-box h4{

    margin:0 0 12px;

    font-size:13.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;

    color:var(--primary);

}



.check{

    display:flex;

    gap:11px;

    font-size:13.5px;
    line-height:1.55;
    color:#334155;

    cursor:pointer;

}



.check input{

    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--blue);
    cursor:pointer;
    flex:none;

}





/* BUTTONS */


.primary-btn.full-width-mt{ margin-top:12px; }

.primary-btn{

    width:100%;

    height:50px;

    margin-top:25px;

    border:0;

    border-radius:var(--radius-pill);

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--blue)
    );

    color:white;

    font-weight:700;
    font-size:14.5px;
    letter-spacing:.01em;

    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    box-shadow:0 10px 24px rgba(37,99,235,.24);

    transition:transform .16s var(--ease), box-shadow .16s var(--ease), opacity .16s var(--ease);

}



.primary-btn:hover:not(:disabled){

    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(37,99,235,.32);

}


.primary-btn:active:not(:disabled){

    transform:translateY(0);

}



.primary-btn:disabled{

    opacity:.62;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;

}



.back-btn{

    height:50px;

    padding:0 25px;

    margin-top:25px;

    border:1.5px solid var(--border);

    border-radius:var(--radius-pill);

    background:white;
    color:#334155;

    font-weight:700;
    font-size:14px;

    margin-right:10px;

    cursor:pointer;

    transition:background .16s var(--ease), border-color .16s var(--ease);

}


.back-btn:hover{

    background:#F3F6FB;
    border-color:#c9d4e6;

}


/* Small inline spinner used inside buttons while an action is running */

.btn-spinner{

    width:16px;
    height:16px;

    border-radius:50%;

    border:2.5px solid rgba(255,255,255,.4);
    border-top-color:white;

    animation:spin .7s linear infinite;

    flex:none;

}


/* Blue variant used for inline status spinners on light backgrounds */

.btn-spinner-blue{

    border-color:rgba(37,99,235,.25);
    border-top-color:#2563EB;

}


/* Generic flex row for paired input + button / input + input controls */

.field-row{

    display:flex;
    gap:10px;

}


/* Fixed-width action button that sits inline next to the email field */

.send-code-btn{

    margin-top:0;
    width:150px;

}




/* UPLOAD */


.upload-box{

    border:2px dashed #C7D5EE;
    background:#FBFDFF;
    border-radius:var(--radius-md);
    padding:38px 20px;
    text-align:center;

    transition:border-color .2s var(--ease), background .2s var(--ease);

}



.upload-icon{

    font-size:42px;

}



.upload-box h3{

    font-size:17px;
    margin:4px 0 6px;

}



.upload-box p{

    color:var(--muted);

    font-size:13px;

}



.upload-box input{

    margin-top:15px;

    height:auto;

}




/* INFO CARD */


.info-card{

    margin-top:20px;

    background:#F8FAFC;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    padding:20px;

    animation:popIn .3s var(--ease);

}



.info-card h4{

    margin-top:0;
    font-size:14.5px;
    font-weight:800;

}



.details{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}



.details div{

    background:white;

    padding:12px 14px;

    border-radius:var(--radius-sm);

    border:1px solid var(--border);

}



.details label{

    font-size:11px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.03em;

}



.green{

    color:var(--green);

    font-weight:800;

}




/* MATCH */


.match-box{

    margin-top:20px;

    text-align:center;

    background:#F0FDFA;

    padding:20px;

    border-radius:var(--radius-md);

}



.match-box h1{

    margin:0;

    font-size:48px;

    color:var(--green);

}




/* SUCCESS */


.success{

    text-align:center;

}



.success-icon{

    width:84px;
    height:84px;

    background:linear-gradient(135deg,#DCFCE7,#BBF7D0);
    color:var(--green);
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:40px;

    margin:auto;

    box-shadow:0 10px 26px rgba(5,150,105,.22);

    animation:popIn .4s var(--ease);

}


.success h2{

    margin:22px 0 8px;
    font-size:23px;
    font-weight:800;
    letter-spacing:-.02em;

}


.success > p{

    color:var(--muted);
    font-size:14.5px;
    line-height:1.6;

}



.reference{

    margin-top:25px;

    background:#F8FAFC;
    border:1px solid var(--border);

    padding:22px;

    border-radius:var(--radius-md);

    text-align:left;

    font-size:14px;

    color:var(--muted);

}


.reference strong{

    font-size:16px;

}



.hidden{

    display:none !important;

}



/* ============================= */
/* LOADER (step 4 verification)   */
/* ============================= */

.loader{

    text-align:center;
    padding:30px 10px;

}


.loader .spinner-ring{

    width:52px;
    height:52px;
    margin:0 auto 16px;

    border-radius:50%;
    border:4px solid #E2E8F0;
    border-top-color:var(--blue);

    animation:spin .8s linear infinite;

}


.loader p{

    color:var(--muted);
    font-size:14px;
    font-weight:600;

}


.loader .loader-substep{

    margin-top:6px;
    font-size:12.5px;
    color:var(--muted-light);
    animation:pulse 1.6s ease-in-out infinite;

}



/* ============================= */
/* GLOBAL PROCESSING OVERLAY      */
/* ============================= */

.processing-overlay{

    position:fixed;
    inset:0;

    background:rgba(10,17,32,.55);
    backdrop-filter:blur(2px);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:1000;

    animation:fade .2s var(--ease);

}


.processing-card{

    background:white;
    border-radius:var(--radius-lg);
    padding:34px 40px;
    text-align:center;
    box-shadow:var(--shadow-lg);
    max-width:320px;
    width:calc(100% - 40px);

}


.processing-card .spinner-ring{

    width:46px;
    height:46px;
    margin:0 auto 18px;

    border-radius:50%;
    border:4px solid #E2E8F0;
    border-top-color:var(--blue);

    animation:spin .8s linear infinite;

}


.processing-card p{

    margin:0;
    font-weight:700;
    font-size:14.5px;
    color:var(--text);

}


.processing-card .processing-sub{

    margin-top:6px;
    font-size:12.5px;
    font-weight:500;
    color:var(--muted);

}



/* ============================= */
/* TOAST NOTIFICATIONS            */
/* ============================= */

.toast-stack{

    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    gap:10px;

    z-index:2000;

    width:calc(100% - 40px);
    max-width:420px;

    pointer-events:none;

}


.toast{

    pointer-events:auto;

    display:flex;
    align-items:flex-start;
    gap:10px;

    background:white;
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border);

    padding:14px 16px;

    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    line-height:1.45;

    animation:slideIn .25s var(--ease);

}


.toast .toast-icon{

    flex:none;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:white;
    margin-top:1px;

}


.toast.success{ border-color:#bbf1d4; }
.toast.success .toast-icon{ background:var(--green); }

.toast.error{ border-color:#fecaca; }
.toast.error .toast-icon{ background:var(--red); }

.toast.info{ border-color:#bfdbfe; }
.toast.info .toast-icon{ background:var(--blue); }


.toast.toast-hide{
    transition:opacity .25s ease;
    opacity:0;
}



@media(max-width:600px){


.header{

    padding:0 16px;

}


.secure-label{

    display:none;

}


.secure{

    padding:9px 12px;

}


.brand h3{

    font-size:15px;

}


.brand > div{

    max-width:160px;

}



.wrapper{

    margin-top:20px;

}



.form-card{

    padding:22px;

}



.details{

    grid-template-columns:1fr;

}



.stepper{

    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;

}


.stepper::-webkit-scrollbar{

    display:none;

}


.step{

    flex:none;
    min-width:64px;

}


.step span{

    font-size:9.5px;

}


.step-circle{

    width:28px;
    height:28px;
    font-size:11.5px;

}


.line{

    flex:none;
    width:26px;
    margin-top:14px;

}


.trust-bar{

    gap:10px 16px;

}


}
@media(max-width:600px){

.field div[style*="display:flex"]{

    flex-direction:column;

}


.field div[style*="display:flex"] button{

    width:100% !important;

}


}


/* DOCUMENT UPLOAD */


.document-card{

background:#F8FAFC;

border:1px solid var(--border);

border-radius:var(--radius-md);

padding:22px;

margin-bottom:20px;

transition:border-color .2s var(--ease);

}



.document-header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:16px;

}



.doc-icon{

width:48px;

height:48px;

border-radius:14px;

background:#EEF2FF;

display:flex;

align-items:center;

justify-content:center;

font-size:23px;

flex:none;

}



.document-header h3{

margin:0;

font-size:15.5px;
font-weight:800;

}



.document-header p{

margin:4px 0 0;

font-size:12.5px;

color:var(--muted);

}




.upload-area{

display:block;

border:2px dashed #C7D5EE;

border-radius:var(--radius-md);

padding:26px;

text-align:center;

cursor:pointer;

background:white;

transition:border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);

}


.upload-area:hover{

border-color:var(--blue-light);
background:#F7FAFF;

}


.upload-area.dragover{

border-color:var(--blue);
background:#EFF6FF;
transform:scale(1.01);

}



.upload-area input{

display:none;

}



.upload-symbol{

font-size:30px;

color:var(--blue);

margin-bottom:10px;

}



.upload-content strong{

display:block;

font-size:13.5px;
font-weight:700;

color:var(--text);

}



.upload-content span{

display:block;

margin-top:6px;

font-size:12px;

color:var(--muted);

}


.upload-formats{

display:flex;
justify-content:center;
gap:6px;
margin-top:12px;
flex-wrap:wrap;

}


.format-chip{

font-size:10.5px;
font-weight:700;
letter-spacing:.02em;
color:var(--muted);
background:#F1F5F9;
border:1px solid var(--border);
padding:3px 9px;
border-radius:var(--radius-pill);

}




.file-name{

margin-top:14px;

display:flex;
align-items:center;
gap:10px;

padding:11px 14px;

background:white;
border:1px solid var(--border);

border-radius:var(--radius-sm);

font-size:13px;

color:var(--muted);
font-weight:600;

text-align:left;

}


.file-name.has-file{

border-color:#bfe3cf;
background:var(--green-bg);
color:#065F46;

}


.file-name .file-chip-icon{

flex:none;
width:26px;
height:26px;
border-radius:8px;
background:white;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;

}


.file-name .file-chip-text{

flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:1px;

}


.file-name .file-chip-name{

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:700;
color:#065F46;

}


.file-name .file-chip-size{

font-size:11px;
font-weight:600;
color:#3f8f6f;

}


.file-name.empty .file-chip-name{
    color:var(--muted);
}


.form-message{

margin-top:8px;
font-size:13px;
font-weight:600;
color:var(--red);

display:flex;
align-items:center;
gap:6px;

}

.form-message:empty{

margin-top:0;

}

.skip-payment-link{

display:block;
margin:12px auto 0;
padding:8px;
background:none;
border:none;
font-size:12px;
color:var(--text-light,#8a8f98);
text-decoration:underline;
cursor:pointer;
text-align:center;
width:100%;

}

.skip-payment-link:hover{

color:var(--text,#333);

}


.form-message.success{

color:var(--green);

}


/* Neutral/informational state — e.g. "your bank transfer is still
clearing", where the default (red) styling would misleadingly read as an
error for something that's actually expected and fine. */
.form-message.info{

color:var(--blue);

}


.form-message.success::before{

content:"\2713";
flex:none;
width:16px;
height:16px;
border-radius:50%;
background:var(--green);
color:white;
font-size:10px;
line-height:16px;
text-align:center;

}


.form-message.error::before{

content:"!";
flex:none;
width:16px;
height:16px;
border-radius:50%;
background:var(--red);
color:white;
font-size:10.5px;
font-weight:800;
line-height:16px;
text-align:center;

}


.form-message.error{

color:var(--red);

}


input.invalid,
select.invalid{

border-color:var(--red);
box-shadow:0 0 0 4px rgba(220,38,38,.08);

}


/* PAYMENT */


.payment-amount-box{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;
    padding:20px 22px;

    background:linear-gradient(180deg,#F8FAFF,#F4F8FF);

    border:1px solid #DCE7FF;

    border-radius:var(--radius-md);

}


.payment-amount-label{

    font-size:13px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.04em;

}


.payment-amount-value{

    font-size:24px;
    font-weight:800;
    color:var(--primary);

}


.payment-amount-currency{

    font-size:14px;
    font-weight:700;
    color:var(--muted);

}


.payment-method-card{

    width:100%;

    display:flex;
    align-items:center;
    gap:15px;

    background:#F8FAFC;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    padding:18px 20px;

    margin-bottom:14px;

    text-align:left;

    cursor:pointer;

    transition:border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);

}


.payment-method-card:hover:not(:disabled){

    border-color:var(--blue-light);
    background:#F7FAFF;
    transform:translateY(-1px);

}


.payment-method-card:active:not(:disabled){

    transform:translateY(0);

}


.payment-method-text{

    flex:1;

}


.payment-method-text h3{

    margin:0;
    font-size:15.5px;
    font-weight:800;
    color:var(--text);

}


.payment-method-text p{

    margin:4px 0 0;
    font-size:12.5px;
    color:var(--muted);

}


.payment-method-arrow{

    flex:none;
    font-size:18px;
    color:var(--blue);

}


.payment-method-disabled{

    cursor:not-allowed;
    opacity:.7;

}


.coming-soon-badge{

    flex:none;

    padding:5px 12px;

    border-radius:var(--radius-pill);

    background:var(--amber-bg);
    color:var(--amber);

    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;

}


/* TEMPORARY — OCR debugging output (see POA_DEBUG_MODE) */

.debug-output{

margin-top:10px;
padding:12px;
background:#111827;
color:#d1d5db;
border-radius:8px;
font-family:Consolas, Menlo, monospace;
font-size:12px;
line-height:1.5;
white-space:pre-wrap;
word-break:break-word;
max-height:320px;
overflow-y:auto;

}


.debug-output .debug-label{

color:#facc15;
font-weight:700;

}


/* TEMPORARY — root placeholder until the real site home page is built */

.coming-soon{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    min-height:70vh;
    padding:40px 20px;

}

.coming-soon h1{

    font-size:32px;
    font-weight:800;
    color:var(--text);
    margin-bottom:12px;

}

.coming-soon p{

    font-size:16px;
    color:var(--text-light,#6b7280);
    max-width:480px;

}