*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff7e9;color:#161616}
.top{height:70px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #161616;background:#ffec61}
.logo{font-weight:1000;letter-spacing:-1px;color:#161616;text-decoration:none;font-size:20px}
.logo span{color:#ef4c91}
.pill{font-size:10px;font-weight:900;border:2px solid #161616;border-radius:99px;padding:7px 10px}
.hero{padding:75px 8% 90px;max-width:1050px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px}
.hero h1{font-size:clamp(48px,8vw,92px);line-height:.9;letter-spacing:-5px;margin:18px 0}
.hero h1 em{color:#ef4c91;font-style:normal}
.hero p{font-size:18px;max-width:620px;line-height:1.5}
.cta,.generate,.share{display:inline-block;border:2px solid #161616;background:#ef4c91;color:#161616;font-weight:1000;text-decoration:none;padding:14px 18px;border-radius:12px;box-shadow:4px 4px 0 #161616;cursor:pointer}
.panel,.result{margin:0 6% 70px;max-width:1050px;border:2px solid #161616;border-radius:18px;padding:28px;background:#fff;box-shadow:7px 7px 0 #161616}
.section-head{display:flex;align-items:center;gap:12px;margin:10px 0 18px}
.section-head span{font-size:11px;font-weight:900;background:#8ee7d0;border:2px solid #161616;border-radius:99px;padding:6px 8px}
.section-head h2{font-size:21px;margin:0}
.row{display:flex;gap:14px;margin-bottom:28px}
.row label,label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.grow{flex:1}
input,select{display:block;width:100%;margin-top:7px;border:2px solid #161616;border-radius:10px;background:#fff;padding:12px;font-size:15px}
.row small{display:block;margin-top:5px;color:#777;text-transform:none;letter-spacing:0}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.choices button{border:2px solid #161616;background:#fff;border-radius:99px;padding:11px 14px;font-weight:900;cursor:pointer}
.choices button.selected{background:#8ee7d0}
.options{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.options label:first-child{text-transform:none;letter-spacing:0;font-size:14px}
.options select{display:inline-block;width:auto;margin-left:8px}
.generate{width:100%;font-size:16px}
.error{color:#b00020;font-weight:800;margin-top:14px}
.hidden{display:none}
.result-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.result h2{font-size:38px;letter-spacing:-2px;margin:7px 0}
.result p{color:#666}
.stops{margin-top:25px}
.stop{display:grid;grid-template-columns:55px 1fr auto;gap:14px;align-items:center;padding:17px 0;border-top:2px solid #161616}
.num{width:42px;height:42px;border-radius:50%;background:#ffec61;border:2px solid #161616;display:grid;place-items:center;font-weight:1000}
.stop h3{margin:0 0 5px;font-size:19px}
.meta{font-size:11px;color:#666}
.nav{border:2px solid #161616;border-radius:10px;background:#8ee7d0;color:#161616;text-decoration:none;padding:9px 10px;font-size:11px;font-weight:1000}
.route-note{grid-column:2/-1;font-size:11px;color:#777}
.food{display:inline-block;margin-left:6px;background:#ef4c91;border:1px solid #161616;border-radius:99px;padding:3px 6px;font-size:9px;font-weight:900}
footer{padding:40px 6%;border-top:2px solid #161616;font-size:10px;font-weight:900}

.api-status{font-size:11px;color:#777;margin-top:8px}
.generate:disabled{opacity:.65;cursor:wait}

/* =========================================================
   SWAP THIS STOP
========================================================= */

.swap-btn{
    margin-top:10px;
    border:2px solid #161616;
    background:#fff;
    color:#161616;
    border-radius:99px;
    padding:8px 11px;
    font:inherit;
    font-size:10px;
    font-weight:1000;
    cursor:pointer;
    box-shadow:2px 2px 0 #161616
}

.swap-btn:hover{
    background:#ffec61
}

.swap-panel{
    grid-column:2/-1;
    margin-top:4px;
    padding:16px;
    border:2px solid #161616;
    border-radius:14px;
    background:#fff7e9;
    box-shadow:4px 4px 0 #161616
}

.swap-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:12px
}

.swap-title{
    font-size:16px;
    font-weight:1000;
    letter-spacing:-.3px
}

.swap-subtitle{
    margin-top:3px;
    font-size:11px;
    color:#666;
    line-height:1.35
}

.swap-close{
    width:30px;
    height:30px;
    border:2px solid #161616;
    border-radius:50%;
    background:#fff;
    color:#161616;
    font-size:19px;
    line-height:1;
    font-weight:900;
    cursor:pointer
}

.swap-card{
    margin-top:10px;
    padding:14px;
    border:2px solid #161616;
    border-radius:13px;
    background:#fff
}

.swap-card:first-of-type{
    margin-top:0
}

.swap-card-top h4{
    margin:7px 0 3px;
    font-size:18px;
    letter-spacing:-.3px
}

.swap-type{
    font-size:11px;
    color:#666
}

.swap-badges{
    display:flex;
    flex-wrap:wrap;
    gap:5px
}

.swap-badge,
.swap-commercial{
    display:inline-block;
    border:1px solid #161616;
    border-radius:99px;
    padding:3px 6px;
    font-size:8px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.45px
}

.swap-badge.best{
    background:#8ee7d0
}

.swap-badge.walk{
    background:#ffec61
}

.swap-badge.different{
    background:#fff
}

.swap-commercial{
    background:#ef4c91
}

.swap-walk{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:11px
}

.swap-walk span{
    border:1px solid rgba(22,22,22,.25);
    border-radius:99px;
    padding:5px 7px;
    font-size:10px;
    font-weight:800
}

.swap-fit{
    margin-top:10px;
    font-size:12px;
    font-weight:800
}

.swap-impact-row{
    margin-top:7px
}

.swap-impact{
    font-size:10px;
    color:#6c5500;
    font-weight:900
}

.swap-impact.good{
    color:#176b52
}

.swap-offer{
    margin-top:10px;
    padding:9px 10px;
    border:2px dashed #161616;
    border-radius:10px;
    background:#ffec61;
    font-size:11px;
    font-weight:900
}

.swap-pick{
    width:100%;
    margin-top:12px;
    border:2px solid #161616;
    border-radius:10px;
    background:#8ee7d0;
    color:#161616;
    padding:10px 12px;
    font-size:10px;
    font-weight:1000;
    cursor:pointer;
    box-shadow:2px 2px 0 #161616
}

.swap-pick:hover{
    background:#ffec61
}

.swap-loading,
.swap-empty{
    padding:7px 2px;
    font-size:12px;
    color:#666;
    font-weight:700
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    .row{
        display:block
    }

    .row label{
        display:block;
        margin-bottom:12px
    }

    .result-top{
        display:block
    }

    .share{
        margin-top:12px
    }

    .stop{
        grid-template-columns:42px 1fr
    }

    .nav{
        grid-column:2;
        width:max-content
    }

    .hero h1{
        letter-spacing:-3px
    }

    .panel,
    .result{
        margin-left:4%;
        margin-right:4%
    }

    .swap-panel{
        grid-column:1/-1;
        padding:12px
    }

    .swap-card{
        padding:12px
    }

    .swap-card-top h4{
        font-size:17px
    }

    .swap-walk{
        gap:5px
    }

    .swap-pick{
        font-size:9px
    }
}