:root {
     --primary: #ea580c;
     --primary-dark: #c2410c;
     --primary-light: #fff7ed;
     --accent: #f97316;
     --accent-soft: #fed7aa;
     --ink: #1c1917;
     --muted: #78716c;
     --line: #e7e5e4;
     --bg: #fafaf9;
     --white: #fff;
     --green: #059669;
     --amber: #d97706;
     --red: #dc2626;
     --blue: #2563eb;
     --gold: #d4af37;
     --dark: #1c1917;
     --shadow: 0 18px 55px rgba(28, 25, 23, .08);
 }
 
 /* Step navigation - Desktop only */
#stepnav {
    display: flex;
}

/* Mobile + Tablet */
@media (max-width: 1024px) {
    #stepnav {
        display: none !important;
    }
}

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: linear-gradient(145deg, #fffbf7, #fef3e7);
     color: var(--ink);
     font-family: Inter, system-ui, sans-serif;
     font-size: 14px
 }

 button,
 input,
 select,
 textarea {
     font: inherit
 }

 button {
     cursor: pointer
 }

 .app {
     display: grid;
     grid-template-columns: 300px minmax(0, 1fr);
     min-height: 100vh
 }

 .sidebar {
     background: linear-gradient(160deg, #1c1917, #292524 55%, #431407 100%);
     color: #e7e5e4;
     padding: 25px 19px;
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: auto
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 0 8px 26px
 }

 .brandmark {
     width: 43px;
     height: 43px;
     border-radius: 14px;
     background: linear-gradient(135deg, #fb923c, #ea580c);
     display: grid;
     place-items: center;
     color: #fff;
     font-size: 20px;
     box-shadow: 0 10px 25px #ea580c55
 }

 .brand strong {
     font-size: 18px;
     letter-spacing: .7px
 }

 .brand small {
     display: block;
     color: #fdba74;
     font-size: 9px;
     letter-spacing: 1.5px;
     margin-top: 3px
 }

 .side-title {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: #a8a29e;
     font-weight: 800;
     margin: 20px 10px 11px
 }

 .stepnav {
     display: flex;
     flex-direction: column;
     gap: 5px
 }

 .stepnav button {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 10px 11px;
     border: 0;
     border-radius: 12px;
     background: transparent;
     color: #d6d3d1;
     text-align: left;
     transition: .2s;
     font-size: 11px;
     position: relative
 }

 .stepnav button:hover {
     background: #ffffff0d
 }

 .stepnav button.active {
     background: linear-gradient(90deg, #ea580c33, #ea580c10);
     color: #fff;
     box-shadow: inset 3px 0 #fb923c
 }

 .stepnav button.done .num {
     background: #059669;
     color: #fff;
     border-color: #059669
 }

 .stepnav button.has-error {
     background: linear-gradient(90deg, #dc262622, #dc262610)
 }

 .stepnav button.has-error .num {
     background: #dc2626;
     color: #fff;
     border-color: #dc2626
 }

 .num {
     width: 29px;
     height: 29px;
     display: grid;
     place-items: center;
     border: 1px solid #57534e;
     border-radius: 9px;
     font-size: 10px;
     font-weight: 800;
     flex-shrink: 0
 }

 .navlabel {
     font-weight: 600;
     font-size: 11px;
     line-height: 1.25
 }

 .sideprogress {
     background: #292524aa;
     padding: 15px;
     border-radius: 16px;
     margin-top: 22px;
     border: 1px solid #ffffff0a
 }

 .progressrow {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: #d6d3d1;
     margin-bottom: 9px
 }

 .progressbar {
     height: 7px;
     background: #44403c;
     border-radius: 20px;
     overflow: hidden
 }

 .progressbar span {
     display: block;
     height: 100%;
     background: linear-gradient(90deg, #fb923c, #ea580c);
     width: 0;
     transition: .3s
 }

 .sidefoot {
     font-size: 10px;
     line-height: 1.7;
     color: #a8a29e;
     margin: 19px 8px
 }

 .main {
     min-width: 0
 }

 .topbar {
     height: 72px;
     background: #ffffffdc;
     backdrop-filter: blur(14px);
     border-bottom: 1px solid var(--line);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 34px;
     position: sticky;
     top: 0;
     z-index: 30
 }

 .crumb {
     font-size: 12px;
     color: var(--muted)
 }

 .crumb b {
     color: var(--ink)
 }

 .savebadge {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--green);
     font-size: 12px;
     font-weight: 700
 }

 .save-dot {
     width: 8px;
     height: 8px;
     background: #10b981;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #10b98118
 }

 .content {
     max-width: 1180px;
     margin: 0 auto;
     padding: 30px 34px 65px
 }

 .hero {
     background: linear-gradient(120deg, #431407, #7c2d12 48%, #ea580c 82%, #f97316);
     border-radius: 24px;
     padding: 30px 34px;
     color: #fff;
     position: relative;
     overflow: hidden;
     box-shadow: 0 20px 55px #7c2d1233;
     margin-bottom: 24px
 }

 .hero:before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     border: 1px solid #ffffff20;
     border-radius: 50%;
     right: -180px;
     top: -240px;
     box-shadow: 0 0 0 55px #ffffff07, 0 0 0 110px #ffffff04
 }

 .hero-kicker {
     text-transform: uppercase;
     letter-spacing: 1.8px;
     font-size: 10px;
     font-weight: 800;
     color: #fed7aa
 }

 .hero h1 {
     font: 700 30px 'Playfair Display', serif;
     margin: 9px 0
 }

 .hero p {
     max-width: 800px;
     color: #ffedd5;
     line-height: 1.7;
     margin: 0
 }

 .hero-tags {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 19px
 }

 .hero-tags span {
     border: 1px solid #ffffff35;
     background: #ffffff12;
     border-radius: 30px;
     padding: 7px 11px;
     font-size: 10px;
     font-weight: 600
 }

 .card {
     background: #fff;
     border: 1px solid #f5f5f4;
     border-radius: 20px;
     box-shadow: var(--shadow);
     overflow: hidden
 }

 .step {
     display: none
 }

 .step.active {
     display: block;
     animation: fade .28s ease
 }

 @keyframes fade {
     from {
         opacity: 0;
         transform: translateY(7px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .stephead {
     padding: 27px 32px 22px;
     border-bottom: 1px solid #f5f5f4;
     display: flex;
     gap: 16px;
     align-items: flex-start
 }

 .stepicon {
     width: 52px;
     height: 52px;
     border-radius: 16px;
     background: var(--primary-light);
     color: var(--primary);
     display: grid;
     place-items: center;
     font-size: 21px;
     flex-shrink: 0
 }

 .stephead h2 {
     margin: 2px 0 7px;
     font-size: 23px;
     letter-spacing: -.5px
 }

 .stephead p {
     margin: 0;
     color: var(--muted);
     line-height: 1.6;
     max-width: 790px
 }

 .stepcount {
     margin-left: auto;
     background: #f5f5f4;
     color: #57534e;
     border-radius: 30px;
     padding: 8px 12px;
     font-size: 10px;
     font-weight: 800;
     white-space: nowrap
 }

 .formbody {
     padding: 28px 32px
 }

 .section-title {
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: 13px;
     font-weight: 800;
     color: #44403c;
     margin: 25px 0 16px;
     padding-bottom: 11px;
     border-bottom: 1px solid #f5f5f4
 }

 .section-title:first-child {
     margin-top: 0
 }

 .section-title i {
     color: var(--primary)
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 17px 20px
 }

 .grid.three {
     grid-template-columns: repeat(3, minmax(0, 1fr))
 }

 .field {
     min-width: 0
 }

 .field.full {
     grid-column: 1/-1
 }

 .field label,
 .field-label {
     display: block;
     font-size: 12px;
     font-weight: 700;
     color: #44403c;
     margin-bottom: 8px
 }

 .req {
     color: var(--red);
     margin-left: 3px
 }

 .hint {
     font-size: 10px;
     color: #a8a29e;
     line-height: 1.5;
     margin-top: 6px
 }

 .field input:not([type=checkbox]):not([type=radio]),
 .field select,
 .field textarea {
     width: 100%;
     border: 1px solid #e7e5e4;
     background: #fdfcfb;
     border-radius: 11px;
     padding: 12px 13px;
     outline: none;
     color: var(--ink);
     transition: .2s;
     min-height: 44px
 }

 .field textarea {
     min-height: 100px;
     resize: vertical
 }

 .field input:focus,
 .field select:focus,
 .field textarea:focus {
     border-color: #fb923c;
     box-shadow: 0 0 0 3px #fb923c22;
     background: #fff
 }

 .field.invalid input,
 .field.invalid select,
 .field.invalid textarea {
     border-color: var(--red);
     background: #fef2f2
 }

 .field.invalid input:focus,
 .field.invalid select:focus,
 .field.invalid textarea:focus {
     box-shadow: 0 0 0 3px #dc262622
 }

 .err-msg {
     display: none;
     color: var(--red);
     font-size: 10px;
     font-weight: 600;
     margin-top: 6px;
     line-height: 1.4
 }

 .field.invalid .err-msg {
     display: block
 }

 .checks {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 9px
 }

 .checks.cols3 {
     grid-template-columns: repeat(3, minmax(0, 1fr))
 }

 .check {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 11px;
     border: 1px solid #e7e5e4;
     border-radius: 12px;
     background: #fff;
     cursor: pointer;
     transition: .15s;
     line-height: 1.45
 }

 .check:hover {
     border-color: #fdba74;
     background: #fffbf7
 }

 .check:has(input:checked) {
     border-color: #fb923c;
     background: #fff7ed
 }

 .check input {
     accent-color: var(--primary);
     margin-top: 2px;
     flex-shrink: 0
 }

 .check span {
     font-size: 11px;
     font-weight: 600;
     color: #44403c
 }

 .check span small {
     display: block;
     font-size: 9px;
     color: #a8a29e;
     font-weight: 500;
     margin-top: 2px
 }

 .check.invalid {
     border-color: var(--red);
     background: #fef2f2
 }

 .notice {
     display: flex;
     gap: 12px;
     padding: 14px 16px;
     border-radius: 13px;
     background: #fff7ed;
     color: #9a3412;
     font-size: 11px;
     line-height: 1.6;
     margin: 18px 0
 }

 .notice i {
     font-size: 16px;
     margin-top: 1px
 }

 .notice.green {
     background: #ecfdf5;
     color: #065f46
 }

 .notice.amber {
     background: #fffbeb;
     color: #92400e
 }

 .notice.blue {
     background: #eff6ff;
     color: #1e40af
 }

 .notice.red {
     background: #fef2f2;
     color: #991b1b
 }

 .repeat-wrap {
     display: flex;
     flex-direction: column;
     gap: 12px
 }

 .repeat-card {
     border: 1px solid #e7e5e4;
     border-radius: 15px;
     padding: 18px;
     background: #fdfcfb;
     position: relative
 }

 .repeat-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 14px;
     font-size: 12px;
     font-weight: 800
 }

 .remove {
     border: 0;
     background: #fff1f2;
     color: #e11d48;
     border-radius: 9px;
     padding: 7px 10px;
     font-size: 10px;
     font-weight: 700
 }

 .addbtn {
     border: 1px dashed #fdba74;
     background: #fff7ed;
     color: #ea580c;
     border-radius: 11px;
     padding: 11px 15px;
     font-weight: 800;
     font-size: 11px;
     margin-top: 11px
 }

 .upload {
     border: 1.5px dashed #d6d3d1;
     border-radius: 14px;
     background: #fdfcfb;
     padding: 19px;
     text-align: center;
     cursor: pointer;
     display: block;
     transition: .15s
 }

 .upload:hover {
     border-color: #fb923c;
     background: #fffbf7
 }

 .upload i {
     font-size: 23px;
     color: #fb923c;
     margin-bottom: 8px
 }

 .upload strong {
     display: block;
     font-size: 11px
 }

 .upload small {
     display: block;
     color: #a8a29e;
     margin-top: 5px;
     font-size: 10px
 }

 .filelist {
     font-size: 10px;
     color: var(--green);
     margin-top: 7px;
     word-break: break-word
 }

 .hidden {
     display: none !important
 }

 .navbuttons {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 22px;
     gap: 12px
 }

 .btn {
     border: 0;
     border-radius: 12px;
     padding: 13px 19px;
     font-weight: 800;
     font-size: 11px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     transition: .2s
 }

 .btn.primary {
     background: var(--primary);
     color: #fff;
     box-shadow: 0 8px 18px #ea580c33
 }

 .btn.primary:hover {
     background: var(--primary-dark);
     transform: translateY(-1px)
 }

 .btn.secondary {
     background: #fff;
     color: #57534e;
     border: 1px solid #e7e5e4
 }

 .btn.light {
     background: #fff7ed;
     color: #ea580c
 }

 .btn.gold {
     background: linear-gradient(135deg, #f59e0b, #ea580c);
     color: #fff
 }

 .btn:disabled {
     opacity: .6;
     cursor: not-allowed;
     transform: none !important
 }

 .map-shell {
     border: 1px solid #e7e5e4;
     border-radius: 17px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 8px 25px #1c19170a
 }

 .map-toolbar {
     padding: 13px;
     background: #fdfcfb;
     border-bottom: 1px solid #e7e5e4
 }

 .map-search-row {
     display: flex;
     gap: 9px
 }

 .map-search-row input {
     flex: 1;
     min-height: 46px;
     border: 1px solid #d6d3d1;
     border-radius: 11px;
     padding: 0 13px;
     outline: none
 }

 .map-search-row input:focus {
     border-color: #fb923c;
     box-shadow: 0 0 0 3px #fb923c22
 }

 .map-search-row button {
     border: 0;
     border-radius: 11px;
     padding: 0 14px;
     background: #fff7ed;
     color: #c2410c;
     font-weight: 800;
     font-size: 11px
 }

 .map-actions {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 9px
 }

 .map-actions button {
     border: 1px solid #e7e5e4;
     background: #fff;
     border-radius: 9px;
     padding: 8px 10px;
     font-size: 10px;
     font-weight: 700;
     color: #57534e
 }

 .map-actions button:hover {
     border-color: #fdba74;
     color: #c2410c
 }

 #locationMap {
     height: 400px;
     width: 100%;
     background: #f5f5f4
 }

 .map-status {
     padding: 10px 13px;
     font-size: 10px;
     color: #78716c;
     background: #fff;
     border-top: 1px solid #f5f5f4
 }

 .location-preview {
     margin-top: 14px;
     padding: 14px;
     border: 1px solid #e7e5e4;
     border-radius: 13px;
     background: #fdfcfb;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px
 }

 .location-preview div {
     padding: 9px;
     border-radius: 9px;
     background: #fff;
     border: 1px solid #f5f5f4
 }

 .location-preview small {
     display: block;
     color: #a8a29e;
     font-size: 9px;
     margin-bottom: 3px
 }

 .location-preview strong {
     font-size: 10px;
     word-break: break-word
 }

 .review-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px
 }

 .review-section {
     margin-bottom: 24px
 }

 .review-section h3 {
     font-size: 14px;
     margin: 0 0 12px
 }

 .review-item {
     padding: 13px;
     border: 1px solid #e7e5e4;
     border-radius: 12px
 }

 .review-item small {
     display: block;
     color: #a8a29e;
     font-size: 9px;
     margin-bottom: 5px
 }

 .review-item strong {
     font-size: 11px;
     line-height: 1.5;
     word-break: break-word
 }

 .footer {
     text-align: center;
     color: #a8a29e;
     font-size: 10px;
     margin: 24px 0
 }

 .toast {
     position: fixed;
     right: 24px;
     bottom: 24px;
     background: #1c1917;
     color: #fff;
     padding: 13px 17px;
     border-radius: 12px;
     box-shadow: var(--shadow);
     z-index: 99;
     font-size: 11px;
     display: none;
     max-width: 380px;
     line-height: 1.5
 }

 .toast.show {
     display: block;
     animation: fade .2s
 }

 .toast.err {
     background: #991b1b
 }

 .toast.ok {
     background: #065f46
 }

 .modalback {
     position: fixed;
     inset: 0;
     background: #1c191799;
     display: none;
     place-items: center;
     z-index: 100;
     padding: 20px
 }

 .modalback.show {
     display: grid
 }

 .modal {
     background: #fff;
     border-radius: 20px;
     padding: 30px;
     max-width: 530px;
     width: 100%;
     text-align: center;
     box-shadow: 0 30px 90px #0003
 }

 .successicon {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: #d1fae5;
     color: #059669;
     display: grid;
     place-items: center;
     font-size: 30px;
     margin: 0 auto 18px
 }

 .modal h2 {
     margin: 0 0 9px
 }

 .modal p {
     color: #78716c;
     line-height: 1.7;
     font-size: 12px
 }

 .refcode {
     font-weight: 900;
     font-size: 20px;
     letter-spacing: 1px;
     background: #f5f5f4;
     padding: 14px;
     border-radius: 12px;
     margin: 18px 0
 }

 .timeline {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin: 16px 0
 }

 .timeline-step {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 8px 12px;
     border: 1px solid #e7e5e4;
     border-radius: 10px;
     font-size: 10px;
     font-weight: 700;
     color: #78716c
 }

 .timeline-step.active {
     background: #fff7ed;
     border-color: #fb923c;
     color: #c2410c
 }

 .timeline-step b {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #e7e5e4;
     display: grid;
     place-items: center;
     font-size: 9px
 }

 .timeline-step.active b {
     background: #ea580c;
     color: #fff
 }

 .error-summary {
     background: #fef2f2;
     border: 1px solid #fecaca;
     color: #991b1b;
     padding: 12px 14px;
     border-radius: 11px;
     font-size: 11px;
     margin-bottom: 14px;
     display: none;
     line-height: 1.6
 }

 .error-summary.show {
     display: block
 }

 .error-summary ul {
     margin: 6px 0 0 18px;
     padding: 0
 }

 @media(max-width:1050px) {
     .app {
         grid-template-columns: 240px 1fr
     }

     .sidebar {
         padding: 21px 14px
     }

     .content {
         padding: 24px 20px
     }

     .topbar {
         padding: 0 20px
     }

     .grid.three,
     .location-preview {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }

     .checks.cols3 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 }

 @media(max-width:760px) {
     .app {
         display: block
     }

     .sidebar {
         position: relative;
         height: auto;
         padding: 15px
     }

     .brand {
         margin-bottom: 14px
     }

     .side-title,
     .sideprogress,
     .sidefoot {
         display: none
     }

     .stepnav {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 6px
     }

     .stepnav button {
         padding: 8px;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 5px;
         border: 1px solid #ffffff10
     }

     .navlabel {
         font-size: 9px
     }

     .num {
         width: 24px;
         height: 24px
     }

     .topbar {
         height: 58px
     }

     .content {
         padding: 14px 11px 40px
     }

     .hero {
         padding: 23px 19px;
         border-radius: 18px
     }

     .hero h1 {
         font-size: 25px
     }

     .stephead {
         padding: 20px;
         gap: 12px
     }

     .stephead h2 {
         font-size: 19px
     }

     .stepcount {
         display: none
     }

     .formbody {
         padding: 20px
     }

     .grid,
     .grid.three,
     .checks,
     .checks.cols3,
     .review-grid,
     .location-preview {
         grid-template-columns: 1fr
     }

     .navbuttons {
         flex-wrap: wrap
     }

     .navbuttons .btn {
         flex: 1
     }

     .map-search-row {
         flex-direction: column
     }

     .map-search-row button {
         min-height: 42px
     }

     #locationMap {
         height: 330px
     }

     .toast {
         left: 15px;
         right: 15px;
         bottom: 15px
     }
 }

 .success-modal {
     position: fixed;
     inset: 0;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .success-modal-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .65);
     backdrop-filter: blur(4px);
 }

 .success-modal-box {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 520px;
     background: #fff;
     border-radius: 18px;
     padding: 35px;
     text-align: center;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
     animation: successPopup .25s ease;
 }

 .success-icon {
     font-size: 65px;
     margin-bottom: 15px;
 }

 .success-modal-box h2 {
     margin: 0 0 12px;
     font-size: 25px;
 }

 .success-modal-box p {
     margin: 10px 0;
     line-height: 1.6;
     color: #555;
 }

 .success-application-id {
     margin: 20px 0;
     padding: 14px;
     border-radius: 10px;
     background: #f5f7fa;
 }

 .success-application-id span {
     display: block;
     font-size: 13px;
     color: #777;
     margin-bottom: 5px;
 }

 .success-application-id strong {
     font-size: 20px;
 }

 @keyframes successPopup {
     from {
         opacity: 0;
         transform: scale(.92);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .review-box {
     border: 1px solid #e5e7eb;
     border-radius: 14px;
     padding: 20px;
     margin-top: 16px;
     background: #fff;
 }

 .review-box h3 {
     margin: 0 0 18px;
     font-size: 17px;
     display: flex;
     align-items: center;
     gap: 9px;
 }

 .review-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
 }

 .review-grid>div {
     padding: 12px 14px;
     border-radius: 9px;
     background: #f8fafc;
     min-width: 0;
 }

 .review-grid>div.full {
     grid-column: 1 / -1;
 }

 .review-grid span {
     display: block;
     font-size: 12px;
     margin-bottom: 5px;
     color: #64748b;
 }

 .review-grid strong {
     display: block;
     font-size: 14px;
     color: #1e293b;
     word-break: break-word;
     line-height: 1.5;
 }

 .success-modal {
     position: fixed;
     inset: 0;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .success-modal-overlay {
     position: absolute;
     inset: 0;
     background: rgba(15, 23, 42, .68);
     backdrop-filter: blur(4px);
 }

 .success-modal-box {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 520px;
     background: #fff;
     border-radius: 18px;
     padding: 35px;
     text-align: center;
     box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
     animation: successPopup .25s ease;
 }

 .success-icon {
     width: 70px;
     height: 70px;
     margin: 0 auto 18px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 42px;
 }

 .success-modal-box h2 {
     margin: 0 0 14px;
     font-size: 25px;
 }

 .success-modal-box p {
     margin: 10px 0;
     color: #64748b;
     line-height: 1.65;
 }

 .success-application-id {
     margin: 22px 0;
     padding: 15px;
     border-radius: 10px;
     background: #f8fafc;
 }

 .success-application-id span {
     display: block;
     font-size: 12px;
     color: #64748b;
     margin-bottom: 5px;
 }

 .success-application-id strong {
     display: block;
     font-size: 21px;
 }

 @keyframes successPopup {
     from {
         opacity: 0;
         transform: scale(.92);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @media (max-width: 700px) {

     .review-grid {
         grid-template-columns: 1fr;
     }

     .review-grid>div.full {
         grid-column: auto;
     }

     .success-modal-box {
         padding: 25px 20px;
     }

     .success-modal-box h2 {
         font-size: 21px;
     }

 }

 @media (max-width: 768px) {
    .stepnav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .step-nav-btn {
        min-height: 52px;
        padding: 8px;
    }

    .step-nav-btn .num {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 11px;
    }

    .step-nav-btn .navlabel {
        font-size: 11px;
    }

    .navbuttons {
        flex-direction: column;
    }

    .navbuttons .btn {
        width: 100%;
    }
}