/* * ════════════════════════════════════════════════════════════ * applypage.css — LoanPey Apply Page * Organised: base CSS first → ALL media queries at bottom * ════════════════════════════════════════════════════════════ * * TABLE OF CONTENTS * ───────────────── * 1. Variables & Reset * 2. Container * 3. Apply / Hero Section * 4. Form Card & Step Progress * 5. Form Fields & Buttons * 6. Review Step & Success Panel * 7. Cookie Banner * 8. Rates & Charges * 9. Representative Example * 10. Loan Steps * 11. Why Choose Us * 12. APR & Rates Info * 13. Eligibility * 14. Coverage / Cities * 15. MEDIA QUERIES (all consolidated) * ≤ 1024px | ≤ 991px | ≤ 768px | ≤ 767px | ≤ 480px * ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════ 1. VARIABLES & RESET ════════════════════════════════════════════════════════════ */
 :root {
     --brand: #FF8C00;
     --brand-d: #E07000;
     --brand-lt: #FFF4E0;
     --navy: #0F172A;
     --navy2: #1E293B;
     --blue: #38b1e8;
     --slate: #334155;
     --muted: #64748B;
     --border: #E2E8F0;
     --surface: #F8FAFC;
     --white: #FFFFFF;
     --success: #10B981;
     --error: #EF4444;
     --fh: 'Sora', sans-serif;
     --fb: 'DM Sans', sans-serif;
     --sh: 0 2px 12px rgba(15,23,42,.07);
     --shm: 0 8px 32px rgba(15,23,42,.10);
     --shl: 0 20px 60px rgba(15,23,42,.14);
     --r: 12px;
     --rl: 20px;
     --rx: 28px;
     --tr: all .22s cubic-bezier(.4,0,.2,1);
}
 *,*::before,*::after {
     box-sizing:border-box;
     margin:0;
     padding:0;
}
 body {
     font-family:var(--fb);
     color:var(--slate);
     background:#fff;
     font-size:16px;
     -webkit-font-smoothing:antialiased;
     overflow-x:hidden;
}
 img {
     max-width:100%;
     display:block;
}
 a {
     text-decoration:none;
     color:inherit;
}
 button {
     cursor:pointer;
     font-family:var(--fb);
     border:none;
     background:none;
}
 input,select,textarea {
     font-family:var(--fb);
}
/* ════════════════════════════════════════════════════════════ 2. CONTAINER ════════════════════════════════════════════════════════════ */
 .container {
     max-width: 1300px;
     width: 100%;
     margin: auto;
     position: relative;
     z-index: 2;
}
 .ap-wrap {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0;
     width: 100%;
}
/* ════════════════════════════════════════════════════════════ 3. APPLY / HERO SECTION ════════════════════════════════════════════════════════════ */
 .ap-section {
     background: linear-gradient(145deg, #f0f5ff 0%, #f8fafc 45%, #fff9f0 100%);
     padding: 30px 0 40px;
     min-height: calc(100vh - 80px);
     display: flex;
     align-items: center;
}
 .ap-grid {
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     gap: 52px;
     align-items: center;
}
/* eyebrow badge */
 .ap-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #fff;
     border: 1.5px solid rgba(255,140,0,.3);
     border-radius: 50px;
     padding: 7px 16px;
     font-size: 16px;
     font-weight: 600;
     color: var(--brand);
     margin-bottom: 10px;
     box-shadow: var(--sh);
}
 .ap-eyebrow-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--brand);
     display: inline-block;
     animation: apPulse 2s ease-in-out infinite;
}
 @keyframes apPulse {
     0%,100% {
         transform:scale(1);
         opacity:1;
    }
     50% {
         transform:scale(1.4);
         opacity:.7;
    }
}
/* left column */
 .ap-left h1 {
     font-family: var(--fh);
     font-size: clamp(28px,3.2vw,40px);
     font-weight: 800;
     color: var(--navy);
     line-height: 1.15;
     margin-bottom: 5px;
     letter-spacing: -.4px;
}
 .ap-left h1 .hl {
     color: var(--brand);
}
 .ap-left .ap-sub {
     font-size: 16px;
     color: var(--muted);
     line-height: 1.7;
     margin-bottom: 10px;
     max-width: 440px;
}
/* hero image */
 .ap-img-wrap {
     border-radius: var(--rl);
     overflow: hidden;
     position: relative;
}
 .ap-img-wrap img {
     width: 100%;
     max-height: 330px;
     object-fit: contain;
}
/* trust strip */
 .ap-trust {
     display: flex;
     align-items: stretch;
     gap: 12px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: var(--rl);
     padding: 20px;
     box-shadow: var(--sh);
}
 .ap-trust-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 8px;
     padding: 4px 8px;
     border-right: 1px solid var(--border);
}
 .ap-trust-item:last-child {
     border-right: none;
}
 .ap-trust-icon {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--brand-lt);
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ap-trust-icon svg {
     width: 22px;
     height: 22px;
     stroke: var(--brand);
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
}
 .ap-trust-label {
     font-size: 16px;
     font-weight: 600;
     color: var(--navy);
     line-height: 1.3;
}
/* ════════════════════════════════════════════════════════════ 4. FORM CARD & STEP PROGRESS ════════════════════════════════════════════════════════════ */
 .form-card {
     background: #fff;
     border-radius: var(--rx);
     box-shadow: var(--shl);
     border: 1px solid var(--border);
     overflow: hidden;
}
 .form-card-head {
     background: linear-gradient(135deg, var(--navy) 0%, #1a3060 100%);
     padding: 15px 32px;
     position: relative;
     overflow: hidden;
}
 .form-card-head::after {
     content: '';
     position: absolute;
     top: -40px;
     right: -40px;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: rgba(255,140,0,.10);
     pointer-events: none;
}
 .form-card-head h3 {
     font-family: var(--fh);
     font-size: 18px;
     font-weight: 700;
     color: #fff;
/*     margin-bottom: 5px;*/
     position: relative;
     z-index: 1;
     line-height: 30px;
}
 .form-card-head p {
     font-size: 14px;
     color: rgba(255,255,255,.62);
     position: relative;
     z-index: 1;
     margin-bottom: 0;
}
/* step progress bar */
 .step-progress {
     display: flex;
     align-items: flex-start;
     padding: 14px 28px 10px;
     position: relative;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     gap: 0;
}
 .step-progress::before {
     content: '';
     position: absolute;
     top: 30px;
     left: calc(28px + 22px);
     right: calc(28px + 22px);
     height: 2px;
     background: var(--border);
     z-index: 0;
}
 .sp-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     position: relative;
     z-index: 1;
}
 .sp-circle {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #fff;
     border: 2.5px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--fh);
     font-size: 12px;
     font-weight: 700;
     color: var(--muted);
     transition: var(--tr);
}
 .sp-label {
     font-size: 15px;
     font-weight: 500;
     color: var(--muted);
     white-space: nowrap;
     text-align: center;
}
 .sp-item.active .sp-circle {
     background: var(--brand);
     border-color: var(--brand);
     color: #fff;
     box-shadow: 0 0 0 5px rgba(255,140,0,.18);
}
 .sp-item.active .sp-label {
     color: var(--brand);
     font-weight: 600;
}
 .sp-item.done .sp-circle {
     background: var(--success);
     border-color: var(--success);
     color: #fff;
}
 .sp-item.done .sp-label {
     color: var(--success);
}
/* step panels */
 .steps-wrap {
     padding: 10px 32px 15px;
}
 .step-panel {
     display: none;
     animation: apFade .28s ease;
}
 .step-panel.active {
     display: block;
}
 @keyframes apFade {
     from {
         opacity:0;
         transform:translateY(10px);
    }
     to {
         opacity:1;
         transform:translateY(0);
    }
}
 .step-heading {
     font-family: var(--fh);
     font-size: 16px;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 0px;
}
 .step-sub {
     font-size: 16px;
     color: var(--muted);
     margin-bottom: 10px;
}
/* ════════════════════════════════════════════════════════════ 5. FORM FIELDS & BUTTONS ════════════════════════════════════════════════════════════ */
 .fg {
     margin-bottom: 16px;
}
 .fg label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--slate);
     margin-bottom: 7px;
     letter-spacing: .1px;
}
 .fg-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
}
 .fg-grid2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
}
 .fg.full {
     grid-column: 1 / -1;
}
 .input-wrap {
     position: relative;
}
 .input-wrap input, .input-wrap select {
     width: 100%;
     height: 48px;
     padding: 0 14px;
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     font-family: var(--fb);
     font-size: 16px;
     color: var(--navy);
     background: var(--surface);
     outline: none;
     transition: var(--tr);
     appearance: none;
     -webkit-appearance: none;
}
 .input-wrap input::placeholder {
     color: #94A3B8;
}
 .input-wrap input:focus, .input-wrap select:focus {
     border-color: var(--brand);
     background: #fff;
     box-shadow: 0 0 0 3px rgba(255,140,0,.12);
}
 .input-wrap .ic {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     font-size: 16px;
     pointer-events: none;
}
 .input-wrap input.has-icon {
     padding-left: 42px;
}
 .input-wrap::after {
     content: '';
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 6px solid var(--muted);
     pointer-events: none;
}
 .input-wrap:not(:has(select))::after {
     display: none;
}
 .error-msg {
     font-size: 16px;
     color: var(--error);
     margin-top: 5px;
     display: none;
     font-weight: 500;
}
 .error-msg.show {
     display: block;
}
 .consent-block {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r);
     padding: 14px 16px;
}
 .consent-block label {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     cursor: pointer;
     margin-bottom: 0;
}
 .consent-block input[type="checkbox"] {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
     margin-top: 3px;
     accent-color: var(--brand);
     cursor: pointer;
}
 .consent-block span {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.6;
     font-weight: 400;
}
 .consent-block a {
     color: var(--brand);
     font-weight: 600;
}
 .btn-next {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     padding: 14px 20px;
     background: var(--brand);
     color: #fff;
     border: none;
     border-radius: var(--r);
     font-family: var(--fh);
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     margin-top: 18px;
     transition: var(--tr);
     box-shadow: 0 6px 22px rgba(255,140,0,.30);
     letter-spacing: .2px;
}
 .btn-next:hover {
     background: var(--brand-d);
     transform: translateY(-1px);
     box-shadow: 0 10px 30px rgba(255,140,0,.38);
}
 .btn-next:disabled {
     opacity: .55;
     cursor: not-allowed;
     transform: none;
}
 .btn-back {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     width: 100%;
     padding: 12px 20px;
     background: transparent;
     color: var(--muted);
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     font-family: var(--fb);
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     margin-top: 10px;
     transition: var(--tr);
}
 .btn-back:hover {
     border-color: var(--slate);
     color: var(--navy);
}
/* ════════════════════════════════════════════════════════════ 6. REVIEW STEP & SUCCESS PANEL ════════════════════════════════════════════════════════════ */
 #step4 .fg-grid .fg {
     margin-bottom: 0;
}
 #step4 .fg label {
     font-size: 16px;
     color: var(--muted);
     margin-bottom: 4px;
     text-transform: uppercase;
     letter-spacing: .5px;
     font-weight: 600;
}
 #step4 .fg .input-wrap {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r);
     padding: 11px 14px;
     font-size: 16px;
     font-weight: 600;
     color: var(--navy);
     min-height: 46px;
     display: flex;
     align-items: center;
}
 #step4 .fg .input-wrap::after {
     display: none;
}
 #step4 .fg .input-wrap span {
     color: var(--navy);
     font-weight: 600;
}
 .success-panel {
     display: none;
     text-align: center;
     padding: 48px 32px;
     animation: apFade .4s ease;
}
 .success-panel.show {
     display: block;
}
 .success-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg,#10B981,#059669);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 36px;
     color: #fff;
     box-shadow: 0 8px 28px rgba(16,185,129,.30);
     animation: apPop .4s cubic-bezier(.4,0,.2,1);
}
 @keyframes apPop {
     0% {
         transform:scale(.4);
         opacity:0;
    }
     80% {
         transform:scale(1.08);
    }
     100% {
         transform:scale(1);
         opacity:1;
    }
}
 .success-panel h3 {
     font-family: var(--fh);
     font-size: 24px;
     font-weight: 800;
     color: var(--navy);
     margin-bottom: 10px;
}
 .success-panel p {
     font-size: 16px;
     color: var(--muted);
     line-height: 1.75;
     max-width: 400px;
     margin: 0 auto 28px;
}
 .success-ref {
     display: inline-block;
     background: var(--brand-lt);
     border: 1px solid rgba(255,140,0,.25);
     border-radius: var(--r);
     padding: 14px 28px;
     font-family: var(--fh);
     font-size: 20px;
     font-weight: 800;
     color: var(--brand);
     letter-spacing: 2px;
}
/* ════════════════════════════════════════════════════════════ 7. COOKIE BANNER ════════════════════════════════════════════════════════════ */
 .cookies-inner {
     border-radius: 20px;
     background-color: #fff2da;
     padding: 20px 32px;
}
 .cookies-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
}
 .cookie-banner {
     position: fixed;
     bottom: 0;
     width: 100%;
     text-align: center;
     padding: 10px;
     z-index: 1000;
     display: none;
     left: 0;
}
 .cookie-banner p {
     margin: 0;
     padding: 0 20px;
     display: inline-block;
     font-size: 16px;
     color: #000;
}
 .cookie-banner button {
     margin-left: 20px;
     padding: 10px 24px;
     background-color: #ffa500;
     color: #000;
     border: none;
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
     border-radius: 50px;
}
 .cookie-banner button:hover {
     background: #000;
     color: #fff;
}
/* ════════════════════════════════════════════════════════════ 8. RATES & CHARGES SECTION ════════════════════════════════════════════════════════════ */
 .rates-section {
     position: relative;
     padding: 40px 20px;
     background: #faf7f2;
     overflow: hidden;
     font-family: Arial,sans-serif;
}
 .rates-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: radial-gradient(rgba(255,140,0,0.10) 1px,transparent 1px);
     background-size: 18px 18px;
     opacity: .7;
}
 .rates-container {
     max-width: 1300px;
     margin: auto;
     position: relative;
     z-index: 2;
}
 .rates-title {
     text-align: center;
     font-size: 36px;
     line-height: 1.2;
     font-weight: 800;
     color: #000;
     margin-bottom: 45px;
}
 .rates-title span {
     color: #ff8c00;
}
 .title-line {
     width: 80px;
     height: 4px;
     background: #ff8c00;
     margin: 18px auto 0;
     border-radius: 20px;
}
 .rates-grid {
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap: 26px;
}
 .rate-card {
     position: relative;
     background: #fff;
     border-radius: 100px;
     padding: 26px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     overflow: hidden;
     border-bottom: 4px solid rgba(255,140,0,0.20);
     box-shadow: 0 12px 30px rgba(0,0,0,0.04),0 4px 10px rgba(255,140,0,0.06);
     transition: .4s ease;
}
 .rate-card::after {
     content: '';
     position: absolute;
     width: 90px;
     height: 90px;
     background: #f7efe3;
     border-radius: 50%;
     top: -45px;
     right: -45px;
}
 .rate-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 45px rgba(0,0,0,0.08),0 10px 20px rgba(255,140,0,0.12);
}
 .rate-left {
     display: flex;
     align-items: center;
     gap: 18px;
     flex: 1;
}
 .rate-icon {
     width: 54px;
     height: 54px;
     min-width: 54px;
     border-radius: 50%;
     background: #f8efe4;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: 700;
     color: #000;
     box-shadow: 0 8px 18px rgba(255,140,0,0.12);
}
 .rate-content h3 {
     font-size: 20px;
     line-height: 1.4;
     color: #555;
     font-weight: 600;
}
 .rate-value {
     font-size: 18px;
     line-height: 1.5;
     font-weight: 600;
     color: #ff8c00;
     text-align: right;
     white-space: nowrap;
}
 .green {
     color: #12a150;
}
/* ════════════════════════════════════════════════════════════ 9. REPRESENTATIVE EXAMPLE SECTION ════════════════════════════════════════════════════════════ */
 .rep-example-section {
     position: relative;
     padding: 40px 20px;
     background: linear-gradient(135deg,#faf7f2 0%,#f4f7fb 100%);
     overflow: hidden;
     font-family: Arial,sans-serif;
}
 .rep-example-section::before {
     content: '';
     position: absolute;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle,rgba(255,140,0,0.08),transparent 70%);
     top: -180px;
     left: -180px;
}
 .rep-example-section::after {
     content: '';
     position: absolute;
     inset: 0;
     background-image: radial-gradient(rgba(255,140,0,0.08) 1px,transparent 1px);
     background-size: 18px 18px;
     opacity: .7;
}
 .rep-container {
     max-width: 1300px;
     margin: auto;
     position: relative;
     z-index: 2;
}
 .rep-title {
     text-align: center;
     font-size: 36px;
     line-height: 1.2;
     font-weight: 900;
     color: #101828;
     margin-bottom: 45px;
     letter-spacing: -1px;
}
 .rep-title span {
     color: #ff8c00;
     position: relative;
}
 .rep-title span::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 100%;
     height: 5px;
     background: #ff8c00;
     border-radius: 20px;
     opacity: .25;
}
 .rep-grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 24px;
}
 .rep-box {
     position: relative;
     background: rgba(255,255,255,0.88);
     backdrop-filter: blur(14px);
     border-radius: 28px;
     padding: 20px;
     display: flex;
     align-items: flex-start;
     gap: 15px;
     overflow: hidden;
     border: 1px solid rgba(255,255,255,0.7);
     box-shadow: 0 10px 35px rgba(0,0,0,0.05),0 2px 8px rgba(255,140,0,0.08);
     transition: .4s ease;
}
 .rep-box:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 45px rgba(0,0,0,0.08),0 10px 20px rgba(255,140,0,0.10);
}
 .rep-box::before {
     content: '';
     position: absolute;
     width: 120px;
     height: 120px;
     background: rgba(255,140,0,0.05);
     border-radius: 50%;
     top: -60px;
     right: -60px;
}
 .rep-icon {
     width: 64px;
     height: 64px;
     min-width: 64px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     font-weight: 700;
     box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
 .orange {
     background: #fff1e2;
     color: #ff8c00;
}
 .blue {
     background: #edf4ff;
     color: #2f80ed;
}
 .purple {
     background: #f3eeff;
     color: #7b61ff;
}
 .peach {
     background: #fff0eb;
     color: #ff6d2d;
}
 .yellow {
     background: #fff8e1;
     color: #ffb300;
}
 .rep-content {
     flex: 1;
}
 .rep-content h3 {
     font-size: 18px;
     line-height: 1.5;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 8px;
}
 .rep-content p {
     font-size: 16px;
     line-height: 1.6;
     color: #64748b;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-bottom: 0;
}
 .rep-disclaimer {
     margin-top: 28px;
     padding: 24px 26px;
     border-radius: 24px;
     background: rgba(255,255,255,0.8);
     border: 1px solid rgba(255,140,0,0.18);
     display: flex;
     align-items: flex-start;
     gap: 18px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
 .rep-disclaimer-icon {
     width: 52px;
     height: 52px;
     min-width: 52px;
     border-radius: 16px;
     background: #fff1e2;
     color: #ff8c00;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: 700;
}
 .rep-disclaimer p {
     font-size: 16px;
     line-height: 1.9;
     color: #475569;
     font-weight: 500;
}
 .rep-disclaimer strong {
     color: #ff6d2d;
}
/* ════════════════════════════════════════════════════════════ 10. LOAN STEPS SECTION ════════════════════════════════════════════════════════════ */
 .loan-steps-section {
     padding: 40px 20px;
     background: radial-gradient(circle at top right,rgba(255,140,0,0.08),transparent 30%), radial-gradient(circle at bottom left,rgba(255,140,0,0.06),transparent 25%), #f7f8fc;
     font-family: Arial,sans-serif;
     overflow: hidden;
     position: relative;
}
 .loan-steps-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(255,140,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,140,0,0.04) 1px,transparent 1px);
     background-size:40px 40px;
     pointer-events:none;
}
 .loan-steps-container {
     max-width:1300px;
     margin:auto;
     position:relative;
     z-index:2;
}
 .loan-steps-top {
     text-align:center;
     margin-bottom:60px;
}
 .loan-steps-top span {
     color:#ff8c00;
     font-size:16px;
     font-weight:700;
     letter-spacing:3px;
     text-transform:uppercase;
     display:block;
     margin-bottom:14px;
}
 .loan-steps-top h2 {
     font-size:36px;
     line-height:1.2;
     color:#000;
     margin:0 0 18px;
     font-weight:800;
}
 .loan-steps-top p {
     max-width:800px;
     margin:auto;
     font-size:18px;
     line-height:1.7;
     color:#5f6b85;
}
 .loan-steps-wrapper {
     position:relative;
}
 .loan-step-line {
     position:absolute;
     top:38px;
     left:12%;
     width:76%;
     height:4px;
     background:linear-gradient(to right,#ff8c00,#ffb347);
     z-index:1;
     border-radius:20px;
}
 .loan-steps-grid {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:28px;
     position:relative;
     z-index:2;
}
 .loan-step-box {
     text-align:center;
     position:relative;
}
 .loan-step-number {
     width:78px;
     height:78px;
     border-radius:50%;
     margin:0 auto 26px;
     background:#000;
     border:4px solid #ff8c00;
     color:#ff8c00;
     font-size:28px;
     font-weight:800;
     display:flex;
     align-items:center;
     justify-content:center;
     box-shadow:0 12px 25px rgba(0,0,0,0.12);
     transition:0.3s ease;
}
 .loan-step-box.active .loan-step-number {
     background:#ff8c00;
     color:#000;
     transform:scale(1.08);
}
 .loan-step-content {
     background:#fff;
     padding:30px 15px;
     border-radius:22px;
     border:1px solid rgba(0,0,0,0.05);
     box-shadow:0 12px 30px rgba(0,0,0,0.05);
     transition:0.3s ease;
     position:relative;
     overflow:hidden;
}
 .loan-step-content::before {
     content:"";
     position:absolute;
     top:-40px;
     right:-40px;
     width:120px;
     height:120px;
     background:rgba(255,140,0,0.08);
     border-radius:50%;
}
 .loan-step-box:hover .loan-step-content {
     transform:translateY(-8px);
     box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
 .loan-step-content h3 {
     font-size:18px;
     line-height:1.3;
     margin-bottom:14px;
     color:#000;
     font-weight:700;
     position:relative;
     z-index:2;
}
 .loan-step-content p {
     font-size:16px;
     line-height:1.7;
     color:#657089;
     margin:0;
     position:relative;
     z-index:2;
}
/* ════════════════════════════════════════════════════════════ 11. WHY CHOOSE US SECTION ════════════════════════════════════════════════════════════ */
 .why-choose-section {
     padding: 40px 15px;
     background: radial-gradient(circle at top left,rgba(255,140,0,0.10),transparent 30%), radial-gradient(circle at bottom right,rgba(255,140,0,0.08),transparent 30%), linear-gradient(135deg,#ffffff 0%,#fff7ef 100%);
     position: relative;
     overflow: hidden;
}
 .why-choose-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
     background-size:40px 40px;
     opacity:0.4;
     pointer-events:none;
}
 .section-heading {
     text-align:center;
     max-width:760px;
     margin:0 auto 60px;
}
 .sub-title {
     color:#ff8c00;
     font-size:16px;
     font-weight:700;
     letter-spacing:2px;
     text-transform:uppercase;
     display:inline-block;
     margin-bottom:18px;
}
 .section-heading h2 {
     color:#111111;
     font-size:36px;
     line-height:1.3;
     font-weight:800;
     margin-bottom:18px;
}
 .section-heading p {
     color:#5e677a;
     font-size:18px;
     line-height:1.7;
}
 .why-choose-wrapper {
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:25px;
}
 .why-card {
     background:rgba(255,255,255,0.88);
     backdrop-filter:blur(12px);
     border:1px solid rgba(0,0,0,0.06);
     border-radius:28px;
     padding:35px 30px;
     position:relative;
     transition:0.4s ease;
     overflow:hidden;
     box-shadow:0 12px 35px rgba(0,0,0,0.06);
}
 .why-card::before {
     content:"";
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:5px;
     background:linear-gradient(90deg,#ff8c00,#ffb347);
}
 .why-card:hover {
     transform:translateY(-8px);
     border-color:rgba(255,140,0,0.35);
     box-shadow:0 20px 45px rgba(255,140,0,0.12);
}
 .card-number {
     position:absolute;
     top:22px;
     right:28px;
     font-size:70px;
     font-weight:800;
     line-height:1;
     color:rgba(0,0,0,0.05);
}
 .icon-box {
     width:58px;
     height:58px;
     border-radius:16px;
     border:1px solid rgba(255,140,0,0.35);
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:24px;
     color:#ff8c00;
     background:rgba(255,140,0,0.08);
     margin-bottom:15px;
}
 .why-card h3 {
     font-size:20px;
     line-height:1.4;
     color:#111111;
     margin-bottom:5px;
     font-weight:600;
}
 .why-card p {
     font-size:16px;
     line-height:1.9;
     color:#61708b;
     margin-bottom:30px;
}
 .card-tag {
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:12px 20px;
     border-radius:50px;
     border:1px solid rgba(255,140,0,0.40);
     background:rgba(255,140,0,0.08);
     color:#ff8c00;
     font-size:16px;
     font-weight:600;
}
/* ════════════════════════════════════════════════════════════ 12. APR & RATES INFO SECTION ════════════════════════════════════════════════════════════ */
 .apr-rate-section {
     padding: 40px 20px;
     background: radial-gradient(circle at top left,rgba(255,140,0,0.08),transparent 30%), linear-gradient(135deg,#ffffff 0%,#fff8f0 100%);
     position: relative;
     overflow: hidden;
}
 .apr-rate-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
     background-size:38px 38px;
     opacity:0.4;
     pointer-events:none;
}
 .apr-heading {
     max-width:760px;
     margin:0 auto 50px;
     text-align:center;
}
 .apr-heading h2 {
     font-size:36px;
     line-height:1.3;
     color:#111111;
     font-weight:800;
     margin-bottom:18px;
}
 .apr-heading p {
     font-size:18px;
     line-height:1.8;
     color:#667085;
}
 .apr-wrapper {
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:26px;
}
 .apr-card {
     background:rgba(255,255,255,0.90);
     backdrop-filter:blur(12px);
     border:1px solid rgba(0,0,0,0.06);
     border-radius:26px;
     overflow:hidden;
     box-shadow:0 12px 35px rgba(0,0,0,0.05);
     transition:0.4s ease;
}
 .apr-card:hover {
     transform:translateY(-6px);
     border-color:rgba(255,140,0,0.25);
     box-shadow:0 18px 40px rgba(255,140,0,0.10);
}
 .card-top {
     padding:20px 32px;
     border-bottom:1px solid rgba(0,0,0,0.08);
}
 .card-subtitle {
     color:#ff8c00;
     font-size:16px;
     font-weight:700;
     letter-spacing:2px;
     text-transform:uppercase;
     display:inline-block;
     margin-bottom:5px;
}
 .card-top h3 {
     font-size:24px;
     line-height:1.4;
     color:#111111;
     font-weight:800;
}
 .card-content {
     padding:20px 32px;
}
 .card-content p {
     font-size:16px;
     line-height:2;
     color:#556070;
     margin-bottom:28px;
}
 .card-content p strong {
     color:#111111;
}
 .highlight-box {
     background:#fff4e5;
     border:1px solid rgba(255,140,0,0.25);
     border-radius:16px;
     padding:22px 24px;
     font-size:18px;
     line-height:1.6;
     color:#111111;
     font-weight:600;
}
 .highlight-box span {
     color:#ff8c00;
     font-size:20px;
     font-weight:800;
     margin-right:10px;
}
/* ════════════════════════════════════════════════════════════ 13. ELIGIBILITY SECTION ════════════════════════════════════════════════════════════ */
 .eligibility-section {
     padding: 40px 20px;
     background: radial-gradient(circle at top left,rgba(255,140,0,0.08),transparent 30%), radial-gradient(circle at bottom right,rgba(255,140,0,0.06),transparent 30%), linear-gradient(135deg,#ffffff 0%,#fff8f0 100%);
     position: relative;
     overflow: hidden;
}
 .eligibility-section::before {
     content:"";
     position:absolute;
     inset:0;
     background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
     background-size:40px 40px;
     opacity:0.4;
     pointer-events:none;
}
 .eligibility-heading {
     text-align:center;
     max-width:760px;
     margin:0 auto 50px;
}
 .eligibility-heading h2 {
     font-size:36px;
     line-height:1.3;
     color:#111111;
     font-weight:800;
     margin-bottom:18px;
}
 .eligibility-heading p {
     font-size:18px;
     line-height:1.7;
     color:#667085;
}
 .eligibility-wrapper {
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:28px;
}
 .eligibility-card {
     background:rgba(255,255,255,0.90);
     backdrop-filter:blur(10px);
     border:1px solid rgba(0,0,0,0.06);
     border-radius:28px;
     padding:38px;
     box-shadow:0 12px 35px rgba(0,0,0,0.05);
     transition:0.4s ease;
}
 .eligibility-card:hover {
     transform:translateY(-6px);
     border-color:rgba(255,140,0,0.25);
     box-shadow:0 20px 40px rgba(255,140,0,0.10);
}
 .eligibility-card h3 {
     font-size:30px;
     line-height:1.4;
     color:#111111;
     font-weight:800;
     margin-bottom:14px;
}
 .card-description {
     font-size:18px;
     line-height:1.7;
     color:#94a3b8;
     margin-bottom:35px;
}
 .eligibility-card ul {
     list-style:none;
}
 .eligibility-card ul li {
     position:relative;
     padding-left:48px;
     margin-bottom:10px;
     font-size:16px;
     line-height:1.8;
     color:#475467;
}
 .eligibility-card ul li::before {
     content:"✓";
     position:absolute;
     left:0;
     top:0;
     width:28px;
     height:28px;
     border-radius:50%;
     background:#dff7ed;
     border:1px solid #8ce3bb;
     color:#12b76a;
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:15px;
     font-weight:700;
}
/* ════════════════════════════════════════════════════════════ 14. COVERAGE / CITIES SECTION ════════════════════════════════════════════════════════════ */
 .coverage-section {
     padding:40px 20px;
     background:#ffffff;
}
 .dot-pattern {
     position:absolute;
     width:240px;
     height:120px;
     background-image:radial-gradient(#ff8c00 1.5px,transparent 1.5px);
     background-size:32px 32px;
     opacity:0.4;
}
 .top-left {
     top:60px;
     left:40px;
}
 .bottom-right {
     bottom:40px;
     right:40px;
}
 .arc-shape {
     position:absolute;
     bottom:-140px;
     left:-100px;
     width:420px;
     height:420px;
     border-radius:50%;
     border:2px solid rgba(255,140,0,0.10);
}
 .arc-shape::before,.arc-shape::after {
     content:"";
     position:absolute;
     inset:30px;
     border-radius:50%;
     border:2px solid rgba(255,140,0,0.08);
}
 .arc-shape::after {
     inset:60px;
}
 .coverage-heading {
     max-width:900px;
     margin:0 auto 55px;
     text-align:center;
     position:relative;
     z-index:2;
}
 .coverage-heading h2 {
     font-size:36px;
     line-height:1.15;
     color:#091133;
     font-weight:800;
     margin-bottom:28px;
}
 .coverage-heading h2 span {
     display:block;
}
 .coverage-heading p {
     max-width:850px;
     margin:auto;
     font-size:20px;
     line-height:1.9;
     color:#667085;
}
 .city-wrapper {
     display:flex;
     align-items:center;
     justify-content:center;
     flex-wrap:wrap;
     gap:18px;
     position:relative;
     z-index:2;
}
 .city-wrapper a {
     text-decoration:none;
     padding:18px 34px;
     border-radius:60px;
     border:1.5px solid rgba(255,140,0,0.5);
     color:#111827;
     font-size:16px;
     font-weight:700;
     background:#ffffff;
     transition:0.4s ease;
}
 .city-wrapper a:hover {
     background:#ff8c00;
     color:#ffffff;
     transform:translateY(-4px);
     box-shadow:0 12px 25px rgba(255,140,0,0.18);
}
/* ════════════════════════════════════════════════════════════ 15. MEDIA QUERIES — all consolidated, largest → smallest ════════════════════════════════════════════════════════════ */
/* ── ≤ 1024px ── */
 @media(max-width:1024px){
    /* Form / Hero */
     .ap-grid {
         grid-template-columns:1fr;
         gap:36px;
    }
     .ap-left {
         max-width:100%;
    }
     .ap-section {
         min-height:auto;
         padding:15px 0 40px;
    }
    /* Loan Steps */
     .loan-step-line {
         display:none;
    }
     .loan-steps-grid {
         grid-template-columns:repeat(2,1fr);
         gap:24px;
    }
     .loan-steps-top h2 {
         font-size:34px;
    }
     .loan-step-content h3 {
         font-size:22px;
    }
     .loan-step-content p {
         font-size:16px;
    }
}
/* ── ≤ 991px ── */
 @media(max-width:991px){
    /* Rates */
     .rates-grid {
         grid-template-columns:1fr;
    }
     .rates-title {
         font-size:34px;
    }
    /* Rep Example */
     .rep-grid {
         grid-template-columns:repeat(2,1fr);
    }
     .rep-title {
         font-size:34px;
    }
    /* Why Choose */
     .why-choose-wrapper {
         grid-template-columns:1fr;
    }
     .section-heading h2 {
         font-size:32px;
    }
    /* APR */
     .apr-wrapper {
         grid-template-columns:1fr;
    }
     .apr-heading h2 {
         font-size:32px;
    }
    /* Eligibility */
     .eligibility-wrapper {
         grid-template-columns:1fr;
    }
     .eligibility-heading h2 {
         font-size:32px;
    }
    /* Coverage */
   /*  .container {
         padding:70px 30px;
    }*/
     .coverage-heading h2{
         font-size:44px;
    }
     .coverage-heading p {
         font-size:18px;
    }
}
/* ── ≤ 768px ── */
 @media(max-width:768px){
    /* Form */
     .ap-wrap {
         padding:0 16px;
    }
     .form-card-head {
         padding:20px;
    }
     .form-card-head h3 {
         font-size:18px;
    }
     .steps-wrap {
         padding:20px 16px;
    }
     .step-progress {
         padding:16px 16px 14px;
    }
     .step-progress::before{
         left:calc(16px + 22px);
         right:calc(16px + 22px);
    }
     .sp-circle {
         width:30px;
         height:30px;
    }
     .fg-grid,.fg-grid2 {
         grid-template-columns:1fr;
    }
     .fg.full {
         grid-column:auto;
    }
     .ap-left h1 {
         font-size:26px;
    }
     .ap-trust {
         flex-direction:column;
         gap:14px;
    }
     .ap-trust-item {
         border-right:none;
         border-bottom:1px solid var(--border);
         padding-bottom:14px;
    }
     .ap-trust-item:last-child {
         border-bottom:none;
         padding-bottom:0;
    }
     .step-heading {
         font-size:18px;
    }
     .btn-next {
         font-size:17px;
    }
}
/* ── ≤ 767px ── */
 @media(max-width:767px){
    /* Rates */
     .rates-section {
         padding:60px 15px;
    }
     .rates-title {
         font-size:30px;
         margin-bottom:45px;
    }
     .title-line {
         width:90px;
    }
     .rates-grid {
         gap:18px;
    }
     .rate-card {
         padding:22px 18px;
         border-radius:24px;
         gap:0;
         flex-direction:column;
         align-items:flex-start;
    }
     .rate-left {
         width:100%;
         align-items:flex-start;
         flex-direction:column;
    }
     .rate-content h3 {
         font-size:17px;
         line-height:1.5;
    }
     .rate-value {
         width:100%;
         text-align:left;
         font-size:17px;
         white-space:normal;
    }
     .rate-icon {
         width:48px;
         height:48px;
         min-width:48px;
         font-size:20px;
    }
     .green {
         background:#e8f8ef00 !important;
         color:#11a75c;
    }
    /* Rep Example */
     .rep-example-section{
         padding:40px 15px;
    }
     .rep-title {
         font-size:30px;
         margin-bottom:30px;
    }
     .rep-grid {
         grid-template-columns:1fr;
         gap:18px;
    }
     .rep-box {
         padding:22px 18px;
         border-radius:22px;
    }
     .rep-icon {
         width:54px;
         height:54px;
         min-width:54px;
         font-size:24px;
         border-radius:16px;
    }
     .rep-content h3 {
         font-size:18px;
    }
     .rep-disclaimer {
         flex-direction:column;
         padding:22px 18px;
         border-radius:20px;
    }
     .rep-disclaimer p {
         font-size:16px;
         line-height:1.8;
    }
    /* Loan Steps */
     .loan-steps-section {
         padding:40px 15px;
    }
     .loan-steps-top {
         margin-bottom:40px;
    }
     .loan-steps-top span{
         font-size:13px;
         letter-spacing:2px;
    }
     .loan-steps-top h2 {
         font-size:30px;
    }
     .loan-steps-top p {
         font-size:16px;
         line-height:1.7;
    }
     .loan-steps-grid {
         grid-template-columns:1fr;
         gap:22px;
    }
     .loan-step-content {
         padding:26px 16px;
    }
     .loan-step-number {
         width:70px;
         height:70px;
         font-size:24px;
         margin-bottom:20px;
    }
     .loan-step-content h3 {
         font-size:21px;
         margin-bottom:12px;
    }
     .loan-step-content p {
         font-size:15px;
         line-height:1.7;
    }
    /* Why Choose */
     .why-choose-section {
         padding:70px 15px;
    }
     .section-heading {
         margin-bottom:45px;
    }
     .section-heading h2 {
         font-size:28px;
    }
     .section-heading p {
         font-size:16px;
         line-height:1.7;
    }
     .why-card {
         padding:30px 22px;
         border-radius:24px;
    }
     .card-number {
         font-size:58px;
         top:20px;
         right:22px;
    }
     .icon-box {
         width:54px;
         height:54px;
         font-size:22px;
         margin-top:60px;
         margin-bottom:22px;
    }
     .why-card h3 {
         font-size:20px;
    }
     .why-card p {
         font-size:16px;
         line-height:1.8;
    }
     .card-tag {
         font-size:15px;
         padding:10px 18px;
    }
    /* APR */
     .apr-rate-section {
         padding:40px 15px;
    }
     .apr-heading {
         margin-bottom:40px;
    }
     .apr-heading h2 {
         font-size:28px;
    }
     .apr-heading p {
         font-size:16px;
         line-height:1.7;
    }
     .card-top,.card-content {
         padding:24px;
    }
     .card-top h3 {
         font-size:22px;
    }
     .highlight-box {
         padding:18px;
         font-size:16px;
    }
     .highlight-box span {
         display:block;
         margin-bottom:8px;
         font-size:18px;
    }
    /* Eligibility */
     .eligibility-section {
         padding:40px 15px;
    }
     .eligibility-heading {
         margin-bottom:40px;
    }
     .eligibility-heading h2 {
         font-size:28px;
    }
     .eligibility-heading p {
         font-size:16px;
    }
     .eligibility-card {
         padding:28px 22px;
         border-radius:24px;
    }
     .eligibility-card h3 {
         font-size:24px;
    }
     .card-description {
         font-size:16px;
         margin-bottom:28px;
    }
     .eligibility-card ul li {
         font-size:16px;
         line-height:1.7;
         padding-left:42px;
         margin-bottom:22px;
    }
    /* Coverage */
     .coverage-section {
         padding:20px 15px;
    }
   /*  .container {
         padding:60px 20px;
         border-radius:18px;
    }*/
     .coverage-heading {
         margin-bottom:40px;
    }
     .coverage-heading h2 {
         font-size:32px;
    }
     .coverage-heading p {
         font-size:16px;
         line-height:1.8;
    }
     .city-wrapper {
         gap:14px;
    }
     .city-wrapper a {
         padding:14px 22px;
         font-size:16px;
    }
     .dot-pattern {
         display:none;
    }
     .arc-shape {
         width:260px;
         height:260px;
    }
}
/* ── ≤ 480px ── */
 @media(max-width:480px){
    /* Form */
     .ap-section {
         padding:60px 0 36px;
    }
     .form-card {
         border-radius:16px;
    }
     .sp-label {
         display:none;
    }
     .step-progress {
         padding-bottom:10px;
    }
    /* Why Choose */
     .why-choose-section {
         padding:60px 12px;
    }
     .section-heading h2 {
         font-size:24px;
    }
     .sub-title {
         font-size:15px;
    }
     .why-card {
         padding:26px 18px;
    }
     .why-card h3 {
         font-size:18px;
    }
     .why-card p {
         font-size:16px;
    }
     .card-tag {
         width:100%;
         justify-content:center;
         text-align:center;
    }
    /* APR */
     .apr-heading h2 {
         font-size:24px;
    }
     .sub-title,.card-subtitle {
         font-size:15px;
    }
     .card-top h3 {
         font-size:20px;
    }
     .card-content p {
         font-size:16px;
         line-height:1.8;
    }
     .highlight-box {
         font-size:15px;
    }
    /* Eligibility */
     .eligibility-heading h2 {
         font-size:24px;
    }
     .eligibility-card {
         padding:24px 18px;
    }
     .eligibility-card h3 {
         font-size:22px;
    }
     .eligibility-card ul li {
         font-size:15px;
    }
    /* Coverage */
     .coverage-heading h2 {
         font-size:26px;
    }
     .sub-title {
         font-size:15px;
    }
     .city-wrapper {
         justify-content:flex-start;
    }
     .city-wrapper a {
         width:100%;
         text-align:center;
    }
}

.location .loc a {
    color: #fff;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
}

p.for_wh {
    color: #fff;
}

@media(max-width:767px){
    .location h4 {
    color: orange;
    font-size: 26px;
    font-weight: 800;
    font-weight: 600;
    line-height: 35px;
    margin-bottom: 6px;
}
}

/* ── OTP Step Styles ── */
.otp-mobile-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F4F6FE;
    border: 1px solid #DDE0F5;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
    color: #2C2E50;
    margin-bottom: 20px;
    font-weight: 400;
}

.otp-mobile-display i {
    color: #1e5758;
    font-size: 18px;
}

.otp-edit-num {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #1e5758;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* 4-box OTP */
.otp-boxes-wrap {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 10px 0 6px;
}

.otp-box {
    width: 62px;
    height: 66px;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    color: #1A1C3A;
    background: #F4F6FE;
    border: 2px solid #DDE0F5;
    border-radius: 12px;
    outline: none;
    transition: all .22s ease;
    font-family: inherit;
}

.otp-box:focus {
    background: #fff;
    border-color: var(--brand-d);
    box-shadow: 0 0 0 4px rgba(97, 98, 219, .12);
    transform: scale(1.05);
}

.otp-box.otp-filled {
    background: #fff; 
    border-color: var(--brand-d);
}

.otp-box.otp-error {
    border-color: #EF4444;
    background: #fff5f5;
}

/* Timer */
.otp-timer-wrap {
    text-align: center;
    font-size: 16px;
    color: #6E7190;
    margin: 10px 0 4px;
}

#step5 .fg-grid .fg {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}


.otp-timer-wrap strong {
    color: var(--brand);
    font-size: 17px;
}

/* Resend */
.otp-resend-wrap {
    text-align: center;
    font-size: 16px;
    color: #6E7190;
    margin: 6px 0;
}

.otp-resend-btn {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-d);
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

/* Demo hint */
.otp-demo-hint {
    text-align: center;
    font-size: 16px;
    color: #6E7190;
    background: rgba(79, 165, 220, .07);
    border: 1px dashed rgba(79, 165, 220, .35);
    border-radius: 10px;
    padding: 9px 16px;
    margin: 10px 0 4px;
}

.otp-demo-hint i {
    color: var(--brand-d);
    margin-right: 4px;
}

.otp-demo-hint strong {
    color: var(--brand);
    font-size: 17px;
}

/* step progress — 5 items need slightly smaller labels */
@media (max-width: 480px) {
    .otp-box {
        width: 50px;
        height: 56px;
        font-size: 20px;
    }

    .otp-boxes-wrap {
        gap: 8px;
    }
}