:root{
    --navy:#07152d;
    --navy-soft:#102d59;
    --blue:#1e5eff;
    --cyan:#40d7e6;
    --gold:#efb84c;
    --green:#087f5b;
    --red:#b42318;
    --text:#17243b;
    --muted:#64748b;
    --paper:#f5f8fd;
    --line:#dce5f2;
    --white:#ffffff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.6;
}

.public-header{
    display:flex;
    min-height:74px;
    align-items:center;
    justify-content:space-between;
    padding:12px max(
        22px,
        calc((100% - 1180px) / 2)
    );
    background:var(--navy);
}

.brand img{
    display:block;
    width:190px;
    max-height:52px;
    object-fit:contain;
}

.public-header nav{
    display:flex;
    gap:24px;
}

.public-header nav a{
    color:#dbeafe;
    font-weight:700;
    text-decoration:none;
}

.application-hero{
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(64,215,230,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-soft)
        );
    color:var(--white);
}

.hero-content{
    width:min(1180px, calc(100% - 44px));
    margin:auto;
    padding:82px 0;
}

.eyebrow{
    margin:0 0 11px;
    color:var(--cyan);
    font-size:12px;
    font-weight:900;
    letter-spacing:1.8px;
}

.application-hero h1{
    max-width:850px;
    margin:0 0 20px;
    font-size:clamp(40px, 6vw, 68px);
    line-height:1.05;
}

.application-hero p{
    max-width:780px;
    color:#cbd8eb;
    font-size:19px;
}

.important-note{
    max-width:850px;
    margin-top:28px;
    border:1px solid rgba(239,184,76,.5);
    border-radius:12px;
    background:rgba(239,184,76,.1);
    padding:16px 18px;
    color:#ffebb8;
}

.application-section{
    padding:75px 22px;
}

.application-layout{
    display:grid;
    grid-template-columns:290px minmax(0, 1fr);
    width:min(1180px, 100%);
    margin:auto;
    gap:34px;
    align-items:start;
}

.application-sidebar{
    position:sticky;
    top:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--white);
    padding:26px;
}

.progress-list{
    margin:22px 0;
    padding:0;
    list-style:none;
    counter-reset:steps;
}

.progress-list li{
    position:relative;
    margin:0 0 10px;
    padding:11px 10px 11px 42px;
    border-radius:9px;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
    counter-increment:steps;
}

.progress-list li::before{
    position:absolute;
    left:10px;
    content:counter(steps);
    color:var(--blue);
    font-weight:900;
}

.progress-list li.active{
    background:#edf3ff;
    color:var(--navy);
}

.sidebar-note{
    border-radius:12px;
    background:#fff7df;
    padding:16px;
    color:#6d5218;
    font-size:13px;
}

.sidebar-note p{
    margin:8px 0 0;
}

.application-form{
    min-width:0;
}

.form-section{
    margin-bottom:28px;
    border:1px solid var(--line);
    border-radius:19px;
    background:var(--white);
    padding:32px;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
}

.form-heading{
    margin-bottom:27px;
}

.step-label{
    color:var(--blue);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
}

.form-heading h2{
    margin:7px 00 8px;
    color:var(--navy);
    font-size:29px;
}

.form-heading p{
    margin:0;
    color:var(--muted);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.full-width{
    grid-column:1 / -1;
}

.application-form label > span,
.signature-field > span{
    display:block;
    margin-bottom:7px;
    color:#34435a;
    font-size:14px;
    font-weight:800;
}

.application-form input,
.application-form select,
.application-form textarea{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:9px;
    background:var(--white);
    color:var(--text);
    padding:13px 14px;
    font:inherit;
}

.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus{
    border-color:var(--blue);
    outline:3px solid rgba(30,94,255,.13);
}

.block-field{
    display:block;
    margin-top:20px;
}

.application-form textarea{
    min-height:125px;
    resize:vertical;
}

.package-loading{
    border-radius:12px;
    background:#edf3ff;
    padding:18px;
    color:var(--blue);
    font-weight:800;
    text-align:center;
}

.package-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
}

.package-card{
    position:relative;
    display:block;
    border:2px solid var(--line);
    border-radius:17px;
    background:var(--white);
    padding:24px;
    cursor:pointer;
    transition:.18s;
}

.package-card:hover{
    transform:translateY(-2px);
    border-color:#9db9ff;
    box-shadow:0 15px 35px rgba(15,23,42,.08);
}

.package-card.selected{
    border-color:var(--blue);
    background:#f7f9ff;
    box-shadow:0 0 0 3px rgba(30,94,255,.1);
}

.package-card input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

.package-badge{
    display:inline-block;
    border-radius:999px;
    background:#eaf0ff;
    color:var(--blue);
    padding:5px 9px;
    font-size:10px;
    font-weight:900;
}

.package-card h3{
    margin:14px 0 4px;
    font-size:24px;
}

.package-price{
    margin:13px 0 0;
    font-size:31px;
    font-weight:900;
}

.package-commission{
    margin:18px 0;
    border-radius:12px;
    background:#edf3ff;
    padding:14px;
}

.package-commission strong{
    display:block;
    color:var(--blue);
    font-size:27px;
}

.package-commission span{
    color:var(--muted);
    font-size:11px;
    font-weight:900;
}

.package-benefits{
    margin:0;
    padding:0;
    list-style:none;
}

.package-benefits li{
    position:relative;
    padding:6px 0 6px 24px;
    color:#4b5a70;
    font-size:14px;
}

.package-benefits li::before{
    position:absolute;
    left:0;
    color:var(--green);
    content:"✓";
    font-weight:900;
}

.selected-package-summary{
    margin-top:24px;
    border:1px solid #b8caff;
    border-radius:14px;
    background:#edf3ff;
    padding:22px;
}

.selected-package-summary h3{
    margin:0 0 8px;
}

.selected-package-summary p{
    margin:0;
}

.policy-box{
    margin-bottom:13px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#f8fafc;
    padding:0 17px;
}

.policy-box summary{
    padding:16px 0;
    color:var(--navy);
    font-weight:900;
    cursor:pointer;
}

.policy-box p{
    color:#526078;
}

.agreement-list{
    margin-top:24px;
}

.agreement{
    display:grid !important;
    grid-template-columns:22px 1fr;
    gap:11px;
    margin:13px 0;
    align-items:start;
}

.agreement input{
    width:18px;
    height:18px;
    margin-top:4px;
}

.agreement span{
    margin:0 !important;
    font-weight:600 !important;
    line-height:1.55;
}

.signature-field{
    display:block;
    margin-top:25px;
}

.signature-field small{
    display:block;
    margin-top:7px;
    color:var(--muted);
}

.application-message{
    display:none;
    margin:0 0 20px;
    border-radius:11px;
    padding:16px 18px;
    font-weight:800;
}

.application-message.success{
    display:block;
    border:1px solid #6ee7b7;
    background:#ecfdf5;
    color:#065f46;
}

.application-message.error{
    display:block;
    border:1px solid #fca5a5;
    background:#fef2f2;
    color:var(--red);
}

.success-next-step{
    display:none;
    margin-bottom:22px;
    border:1px solid #6ee7b7;
    border-radius:17px;
    background:#ecfdf5;
    padding:27px;
}

.success-next-step.visible{
    display:block;
}

.success-next-step h2{
    margin:0 0 8px;
    color:#065f46;
}

.primary-button,
.submit-button{
    display:inline-block;
    border:0;
    border-radius:10px;
    background:var(--blue);
    color:var(--white);
    padding:15px 22px;
    font-size:16px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
}

.submit-button{
    width:100%;
}

.submit-button:disabled{
    cursor:not-allowed;
    opacity:.65;
}

footer{
    background:var(--navy);
    color:#aebcd1;
    padding:31px 22px;
    text-align:center;
}

footer p{
    margin:5px;
}

@media(max-width:900px){
    .application-layout{
        grid-template-columns:1fr;
    }

    .application-sidebar{
        position:static;
    }
}

@media(max-width:650px){
    .public-header nav a:not(:last-child){
        display:none;
    }

    .brand img{
        width:160px;
    }

    .form-grid,
    .package-grid{
        grid-template-columns:1fr;
    }

    .form-section{
        padding:23px 18px;
    }

    .application-section{
        padding:55px 12px;
    }
}


/*
 * ==========================================
 * BYA RESELLER GUIDED WIZARD V1
 * ==========================================
 */

.application-form.wizard-enabled
.form-section {
    display:
        none;
}

.application-form.wizard-enabled
.form-section.wizard-active {
    display:
        block;

    animation:
        wizardFadeIn
        .22s
        ease-out;
}

@keyframes wizardFadeIn {
    from {
        opacity:
            0;

        transform:
            translateY(7px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

.wizard-header {
    margin-bottom:
        24px;

    border:
        1px solid #b8caff;

    border-radius:
        16px;

    background:
        #ffffff;

    padding:
        22px 25px;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.05);
}

.wizard-header-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        18px;

    align-items:
        center;
}

.wizard-header strong {
    color:
        var(--navy);

    font-size:
        18px;
}

.wizard-step-count {
    color:
        var(--blue);

    font-size:
        13px;

    font-weight:
        900;
}

.wizard-progress-track {
    height:
        8px;

    margin-top:
        15px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #e5ebf5;
}

.wizard-progress-fill {
    width:
        20%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    transition:
        width
        .25s
        ease;
}

.wizard-navigation {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        13px;

    margin-top:
        28px;

    padding-top:
        23px;

    border-top:
        1px solid
        var(--line);
}

.wizard-navigation.single {
    justify-content:
        flex-end;
}

.wizard-button {
    min-width:
        135px;

    border:
        0;

    border-radius:
        10px;

    padding:
        13px 20px;

    font-size:
        15px;

    font-weight:
        900;

    cursor:
        pointer;
}

.wizard-back {
    border:
        1px solid
        #cbd5e1;

    background:
        #ffffff;

    color:
        var(--navy);
}

.wizard-continue {
    background:
        var(--blue);

    color:
        #ffffff;
}

.wizard-navigation
.submit-button {
    width:
        auto;

    min-width:
        215px;
}

.sidebar-selection {
    margin-top:
        16px;

    border:
        1px solid
        #b8caff;

    border-radius:
        12px;

    background:
        #edf3ff;

    padding:
        16px;
}

.sidebar-selection-label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.sidebar-selection strong {
    display:
        block;

    color:
        var(--navy);
}

.sidebar-selection p {
    margin:
        7px 0 0;

    color:
        #526078;

    font-size:
        12px;
}

.wizard-error {
    margin:
        0 0 20px;

    border:
        1px solid
        #fca5a5;

    border-radius:
        10px;

    background:
        #fef2f2;

    color:
        var(--red);

    padding:
        14px 16px;

    font-weight:
        800;
}

@media(max-width:650px) {
    .wizard-header-row,
    .wizard-navigation {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .wizard-navigation
    .wizard-button,
    .wizard-navigation
    .submit-button {
        width:
            100%;

        min-width:
            0;
    }

    .wizard-navigation
    .wizard-continue {
        order:
            1;
    }

    .wizard-navigation
    .wizard-back {
        order:
            2;
    }
}


/*
 * ==========================================
 * BYA MONTHLY INCOME PLANNER V1
 * ==========================================
 */

.income-planner {
    display:
        none;

    margin-top:
        24px;

    border:
        1px solid
        #b8caff;

    border-radius:
        16px;

    background:
        #f8faff;

    padding:
        25px;
}

.income-planner.visible {
    display:
        block;
}

.income-label {
    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.3px;
}

.income-planner-heading h3 {
    margin:
        7px 0 6px;

    color:
        var(--navy);

    font-size:
        24px;
}

.income-planner-heading p {
    margin:
        0;

    color:
        var(--muted);
}

.income-controls {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;

    margin-top:
        22px;
}

.income-controls label > span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #34435a;

    font-size:
        13px;

    font-weight:
        800;
}

.income-table-wrap {
    margin-top:
        22px;

    overflow-x:
        auto;
}

.income-table {
    width:
        100%;

    border-collapse:
        collapse;

    background:
        #ffffff;
}

.income-table th,
.income-table td {
    border:
        1px solid
        var(--line);

    padding:
        13px;

    text-align:
        left;
}

.income-table th {
    background:
        var(--navy);

    color:
        #ffffff;

    font-size:
        12px;
}

.income-table td:last-child {
    color:
        var(--green);

    font-size:
        18px;

    font-weight:
        900;
}

.income-maximum {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        18px;

    border-radius:
        12px;

    background:
        #e8f8f1;

    padding:
        16px;
}

.income-maximum span {
    color:
        #315c4d;

    font-weight:
        800;
}

.income-maximum strong {
    color:
        var(--green);

    font-size:
        22px;
}

.income-disclosure {
    margin:
        18px 0 0;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.65;
}

@media(max-width:650px) {
    .income-controls {
        grid-template-columns:
            1fr;
    }

    .income-maximum {
        flex-direction:
            column;
    }
}