.route-planner-page {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: #102038;
  background: #f5f7f8;
  font-family: "Manrope", sans-serif;
}
.route-planner-page .desktop-nav a[aria-current="page"] { color: #fff; }
.planner-hero {
  padding: 46px 0 34px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgb(22 199 181 / 0.18), transparent 32%),
    #06111f;
}
.planner-hero-copy { display: grid; gap: 12px; }
.planner-hero .eyebrow { margin: 0; }
.planner-hero h1 {
  max-width: 880px;
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
}
.planner-hero-copy > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #c5d2dc;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.6;
}
.planner-main { min-height: 620px; padding: 28px 0 72px; }
.planner-footer { padding: 24px 0; color: #b9c6d1; background: #071426; }
.planner-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.planner-footer p { margin: 0; font-size: 0.75rem; }
.planner-footer nav { display: flex; gap: 18px; }
.planner-footer a { color: inherit; font-size: 0.75rem; }
@media (max-width: 760px) {
  .planner-hero { padding: 34px 0 26px; }
  .planner-main { padding-top: 16px; }
  .planner-footer .container { align-items: flex-start; flex-direction: column; }
}