:root{
  --green:#1b5e20; --green-2:#2e7d32; --green-soft:#e8f4ec; --green-line:#cfe6d8;
  --ink:#1f2a24; --muted:#5a6b61; --bg:#f4f7f5; --card:#fff; --gold:#f2a900;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
}
main{max-width:760px;margin:0 auto;padding:0 1rem 3rem;}

/* hero */
.hero{text-align:center;padding:2rem 1rem 1rem;}
.hero h1{font-size:2.1rem;margin:.2rem 0 .4rem;color:var(--green);letter-spacing:-.5px;}
.hero .tagline{font-size:1.05rem;color:var(--muted);max-width:34rem;margin:0 auto;}

/* builder card */
.builder{background:var(--card);border:1px solid var(--green-line);border-radius:16px;
  padding:1.25rem 1.25rem 1.5rem;box-shadow:0 4px 18px rgba(0,0,0,.05);}
.step{padding:.65rem 0 1.05rem;border-bottom:1px solid #eef2ef;}
.step:last-of-type{border-bottom:0;}
.step h2{font-size:1.12rem;margin:.1rem 0 .8rem;display:flex;align-items:center;gap:.55rem;}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--green);color:#fff;font-size:.9rem;font-weight:800;flex:0 0 auto;}

/* location */
.loc-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;}
.loc-row .or{color:var(--muted);font-size:.9rem;}
.loc-form{display:flex;gap:.5rem;flex:1 1 260px;min-width:0;}
.loc-form input{flex:1 1 auto;min-width:0;padding:.6rem .7rem;border:1px solid #cdd8d1;border-radius:10px;font-size:1rem;}
.loc-form input:focus{outline:2px solid var(--green-2);border-color:var(--green-2);}
.loc-status{margin:.7rem 0 0;font-size:.95rem;color:var(--green-2);font-weight:600;min-height:1.2em;}
.loc-status.err{color:#b3261e;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{padding:.5rem .9rem;border:1.5px solid #cdd8d1;background:#fff;border-radius:999px;
  font-size:.95rem;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;}
.chip:hover{border-color:var(--green-2);}
.chip.is-on{background:var(--green);border-color:var(--green);color:#fff;}

/* personas */
.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;}
.persona{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  padding:.9rem .6rem;border:1.5px solid #cdd8d1;background:#fff;border-radius:14px;cursor:pointer;transition:.15s;}
.persona:hover{border-color:var(--green-2);transform:translateY(-1px);}
.persona .pi{font-size:1.7rem;line-height:1;}
.persona .pl{font-size:.9rem;font-weight:600;color:var(--ink);}
.persona.is-on{border-color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1.5px var(--green);}
.kids{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;font-size:.95rem;color:var(--muted);cursor:pointer;}
.kids input{width:18px;height:18px;accent-color:var(--green);}
.multi-hint{font-size:.72rem;font-weight:700;color:#6b8a78;background:#eef4f0;border-radius:999px;padding:.12rem .55rem;vertical-align:middle;}

/* buttons */
.btn{padding:.6rem 1rem;border:1.5px solid var(--green);background:#fff;color:var(--green);
  border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;transition:.15s;}
.btn:hover{background:var(--green-soft);}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-2);}
.btn-ghost{border-color:#cdd8d1;color:var(--muted);}
.btn-go{display:block;width:100%;margin-top:1.1rem;padding:.85rem;font-size:1.08rem;
  background:var(--green);color:#fff;border-color:var(--green);}
.btn-go:hover{background:var(--green-2);}
.btn-go:disabled{background:#b9c8be;border-color:#b9c8be;cursor:not-allowed;}
.hint{text-align:center;color:var(--muted);font-size:.88rem;margin:.6rem 0 0;}

/* loading */
.loading{text-align:center;padding:2.5rem 1rem;}
.spinner{width:44px;height:44px;margin:0 auto 1rem;border:4px solid var(--green-line);
  border-top-color:var(--green);border-radius:50%;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading p{color:var(--muted);font-weight:600;}

/* error */
.error{background:#fdecea;border:1px solid #f5c6c2;border-radius:12px;padding:1rem 1.2rem;margin-top:1.2rem;text-align:center;}
.error p{margin:0 0 .7rem;color:#b3261e;font-weight:600;}

/* results */
.results{margin-top:1.6rem;}
.results-head{text-align:center;margin-bottom:1.2rem;}
.results-head h2{color:var(--green);font-size:1.5rem;margin:0 0 .35rem;}
.summary{color:var(--muted);margin:0;max-width:36rem;margin:0 auto;}
.itinerary{list-style:none;margin:0;padding:0;position:relative;}
.itinerary::before{content:"";position:absolute;left:22px;top:6px;bottom:30px;width:2px;background:var(--green-line);}
.stop{position:relative;background:var(--card);border:1px solid var(--green-line);border-radius:14px;
  padding:1rem 1.1rem 1.05rem 1.1rem;margin:0 0 1rem 46px;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.stop .dot{position:absolute;left:-38px;top:1rem;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;}
.stop .time{font-size:.8rem;font-weight:700;color:var(--green-2);text-transform:uppercase;letter-spacing:.03em;}
.stop h3{margin:.15rem 0 .35rem;font-size:1.15rem;color:var(--ink);}
.stop .type{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--green-2);background:var(--green-soft);border-radius:999px;padding:.12rem .55rem;margin-left:.4rem;vertical-align:middle;}
.stop .why{margin:.1rem 0 .55rem;color:#39463e;}
.stop .meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font-size:.88rem;color:var(--muted);}
.stop .tip{margin:.55rem 0 0;font-size:.88rem;color:#5a6b61;background:#f6faf7;border-left:3px solid var(--green-2);
  border-radius:6px;padding:.4rem .6rem;}
.stop .maps{display:inline-flex;align-items:center;gap:.3rem;color:var(--green);font-weight:700;text-decoration:none;font-size:.9rem;}
.stop .maps:hover{text-decoration:underline;}
.disclaimer{font-size:.85rem;color:#8a978f;text-align:center;margin:.4rem auto 1.2rem;max-width:34rem;font-style:italic;}
.results-actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;}

.appfoot{text-align:center;color:#8a978f;font-size:.82rem;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid #e6ece8;}
.appfoot a{color:var(--green-2);}

@media (max-width:560px){
  .hero h1{font-size:1.7rem;}
  .builder{padding:1rem;}
  .stop{margin-left:40px;}
  .stop .dot{left:-34px;}
  .itinerary::before{left:18px;}
}