/* =====================================================================
   Route Planner page — section styles (loaded after styles.css)
   Reuses tokens, .home, .nav/.mega, .btn*, .reviews, .blog, .cta-final,
   .footer, .rev-anim, .eyebrow from styles.css.
   ===================================================================== */

/* extra tokens used on this page */
:root{
  --color-gray-50:#f7f7f9;
  --color-gray-100:#f1f2f4;
  --color-gray-300:#d7d9df;
  --color-gray-700:#3c3e47;
  --radius-16:16px;
  --radius-20:20px;
}

/* shared section shell — full-width band, centred 1080 content */
.rp-sec{ width:100%; display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.rp-wrap{ width:min(1080px, calc(100% - 48px)); }
.eyebrow2{ font-weight:600; font-size:13px; line-height:1; color:var(--color-brand); letter-spacing:.78px; text-transform:uppercase; }
.rp-h2{ font-weight:700; font-size:42px; line-height:1.1; letter-spacing:-1.05px; color:var(--color-gray-900); text-align:center; }
.rp-h2 .accent{ color:var(--color-brand); }
.rp-lead{ font-weight:500; font-size:19px; line-height:1.5; color:var(--color-gray-600); text-align:center; }
.rp-head{ display:flex; flex-direction:column; align-items:center; gap:18px; }

/* dark app-store buttons */
.store-btn{ display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 22px 0 18px; background:#0e0f13; border-radius:12px; text-decoration:none; }
.store-btn .ic{ width:22px; height:22px; flex:none; }
.store-btn .ic img{ width:100%; height:100%; }
.store-btn .tx{ display:flex; flex-direction:column; gap:1px; color:#fff; white-space:nowrap; align-items:flex-start; text-align:left }
.store-btn .tx small{ font-size:10px; font-weight:400; line-height:1.1; }
.store-btn .tx b{ font-size:15px; font-weight:600; line-height:1.1; }

/* ===== HERO ===== */
.rp-hero{
  position:relative; width:100%; overflow:hidden;
  background:linear-gradient(#eef2fb 0%, #ffffff 100%);
  padding-top:135px;
}
.rp-hero__text{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; width:min(900px, calc(100% - 48px)); }
.rp-badge{ display:inline-flex; align-items:center; padding:2px 0; }
.rp-badge span{ font-weight:600; font-size:13px; letter-spacing:.78px; color:var(--color-brand); text-transform:uppercase; }
.rp-hero__title{ font-weight:700; font-size:54px; line-height:1.06; letter-spacing:-1.5px; color:var(--color-gray-900); width:100%; }
.rp-hero__title .accent{ color:var(--color-brand); }
.rp-hero__sub{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); width:100%; max-width:640px; }
.rp-hero__buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.rp-hero__stage{ position:relative; width:1440px; height:645px; margin-top:36px; }
.rp-phone{
  position:absolute; width:300px; height:632px; border-radius:41px;
  background:var(--color-gray-100); border:1px solid var(--color-gray-300);
  box-shadow:0 24px 50px -6px rgba(13,15,51,.28); overflow:hidden;
}
.rp-phone .screen{ position:absolute; left:9px; top:9px; width:280px; height:612px; background:#fff; border:1px solid var(--color-gray-300); border-radius:30px; overflow:hidden; }
.rp-phone .screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rp-phone.left{ left:321px; top:136px; }
.rp-phone.center{ left:570px; top:64px; }
.rp-phone.right{ left:820px; top:126px; }

.rp-fcard{ position:absolute; display:flex; align-items:center; border-radius:14px; box-shadow:0 12px 30px -4px rgba(15,18,51,.14); background:#fff; }
.rp-fcard.saved{ left:469px; top:39px; background:var(--color-brand); gap:11px; padding:12px 18px 12px 14px; }
.rp-fcard.saved .ico{ width:34px; height:34px; background:#fff; border-radius:10px; position:relative; flex:none; }
.rp-fcard.saved .ico img{ position:absolute; left:8px; top:8px; width:18px; height:18px; }
.rp-fcard.saved .tx{ display:flex; flex-direction:column; gap:2px; color:#fff; white-space:nowrap; }
.rp-fcard.saved .tx small{ font-size:11px; font-weight:500; }
.rp-fcard.saved .tx b{ font-size:15px; font-weight:700; }
.rp-fcard.done{ left:174px; top:345px; background:#e8faed; gap:9px; padding:12px 18px 12px 14px; }
.rp-fcard.done .ico{ width:34px; height:34px; background:#f3fff9; border-radius:10px; position:relative; flex:none; }
.rp-fcard.done .ico img{ position:absolute; left:8px; top:8px; width:18px; height:18px; }
.rp-fcard.done span{ font-size:13px; font-weight:600; color:var(--color-gray-900); white-space:nowrap; }
.rp-fcard.rating{ left:1001px; top:110px; gap:12px; padding:14px 18px 14px 16px; }
.rp-avatars{ position:relative; width:74px; height:34px; flex:none; }
.rp-avatars img{ position:absolute; top:0; width:34px; height:34px; }
.rp-avatars .a1{ left:0; } .rp-avatars .a2{ left:20px; } .rp-avatars .a3{ left:40px; }
.rp-avatars b{ position:absolute; top:9px; width:34px; text-align:center; font-size:12px; font-weight:700; color:#fff; }
.rp-avatars .b1{ left:0; } .rp-avatars .b2{ left:20px; } .rp-avatars .b3{ left:40px; }
.rp-rating__tx b{ font-size:14px; font-weight:700; color:var(--color-gray-900); display:block; white-space:nowrap; }
.rp-rating__row{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.rp-rating__row .stars{ width:72px; height:13px; }
.rp-rating__row .stars img{ width:100%; height:100%; }
.rp-rating__row span{ font-size:12px; font-weight:500; color:var(--color-gray-500); white-space:nowrap; }

/* ===== ROI bento ===== */
.rp-roi{ background:#fff; padding:80px 0; gap:48px; min-height:100vh; justify-content:center; box-sizing:border-box; }
.rp-roi__head{ width:760px; max-width:calc(100% - 48px); gap:18px; }
.rp-roi__grid{ display:flex; gap:24px; width:min(1080px, calc(100% - 48px)); }
.rp-roi__card{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; padding:30px; border-radius:20px; background:#fff; border:1px solid var(--color-gray-200); }
.rp-roi__card.grad{ background:linear-gradient(90deg,#4141e7,#6e6ef5); border:none; }
.rp-roi__num{ font-weight:700; font-size:46px; line-height:1.08; letter-spacing:-.92px; color:var(--color-gray-900); }
.rp-roi__lbl{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); }
.rp-roi__card.grad .rp-roi__num{ color:#fff; }
.rp-roi__card.grad .rp-roi__lbl{ color:#e9eaff; }

/* ===== How it works — App ===== */
.rp-hiw{ background:var(--color-blue-25); padding:100px 0; gap:80px; }
.rp-hiw__grid{ display:flex; gap:28px; width:min(1080px, calc(100% - 48px)); align-items:stretch; }
.rp-step{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; background:#fff; border-radius:22px; padding:44px 26px 30px; position:relative; box-shadow:0 2px 4px rgba(26,31,77,.04), 0 16px 18px rgba(26,31,77,.07); }
.rp-step__badge{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:48px; height:48px; border-radius:24px; background:var(--color-brand-600); color:#fff; font-weight:700; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 7px rgba(50,50,207,.3); }
.rp-step__title{ font-weight:700; font-size:22px; letter-spacing:-.33px; color:var(--color-brand-600); }
.rp-step__desc{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); }
.rp-step__panel{ width:100%; margin-top:6px; background:var(--color-gray-50); border-radius:16px; padding:16px; overflow:hidden; }
.rp-step__panel .shot{ width:100%; aspect-ratio:300/176; border-radius:12px; overflow:hidden; position:relative; background:#fff; }
.rp-step__panel .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* step 2 form */
.rp-input{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:8px 14px; }
.rp-input .mag{ width:18px; height:18px; flex:none; }
.rp-input .mag img{ width:100%; height:100%; }
.rp-input .field{ flex:1; border:1px solid var(--color-gray-200); border-radius:6px; height:29px; display:flex; align-items:center; padding:0 8px; font-size:14px; color:var(--color-gray-900); }
.rp-or{ font-size:13px; font-weight:500; color:var(--color-gray-500); text-align:center; width:100%; }
.rp-tiles{ display:flex; gap:12px; }
.rp-tile{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 12px; border-radius:12px; }
.rp-tile img{ width:26px; height:35px; flex:none; }
.rp-tile span{ font-size:13px; font-weight:500; color:var(--color-gray-600); }
.rp-bars{ display:flex; gap:3px; height:35px; align-items:center; }
.rp-bars i{ width:3px; border-radius:2px; background:var(--color-brand); display:block; }

/* ===== Key Features (bento) ===== */
.rp-kf{ background:#fff; padding:100px 0; gap:52px; }
.rp-kf__bento{ display:flex; gap:24px; width:min(1080px, calc(100% - 48px)); align-items:stretch; }
.rp-kf__col{ display:flex; flex-direction:column; gap:24px; }
.rp-kf__col.c1{ flex:1 1 0; min-width:0; }
.rp-kf__col.c2{ width:330px; flex:none; }
.rp-kf__col.c3{ flex:1 1 0; min-width:0; }
.rp-kf__col.c2, .rp-kf__col.c3{ justify-content:space-between; }
.rp-card{ background:var(--color-blue-25); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:8px; }
.rp-card h3{ font-weight:700; font-size:18px; letter-spacing:-.27px; color:var(--color-gray-900); }
.rp-card p{ font-weight:500; font-size:14px; line-height:1.5; color:var(--color-gray-600); }
.rp-card--brand{ background:var(--color-brand); }
.rp-card--brand h3{ color:#fff; } .rp-card--brand p{ color:var(--color-gray-100); }
.rp-kf__pod{ flex:1; display:flex; flex-direction:column; justify-content:space-between; background:var(--color-blue-25); border-radius:24px; padding:28px; gap:22px; }
.rp-chips{ display:flex; gap:6px; flex-wrap:nowrap; }
.rp-chip{ display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid #e0e1ff; border-radius:999px; padding:5px 9px; flex:none; white-space:nowrap; font-size:12.5px}
.rp-chip img{ width:14px; height:14px; }
.rp-chip span{ font-size:12px; font-weight:600; color:var(--color-gray-700); }
.rp-pod-card{ background:#fff; border-radius:22px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--elev-soft); }
.rp-pod-card__top{ display:flex; align-items:center; justify-content:space-between; }
.rp-pod-card__top b{ font-size:16px; font-weight:500; color:var(--color-gray-900); }
.rp-badge-success{ background:var(--color-green-500); color:#fff; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; }
.rp-pod-row{ display:flex; gap:8px; }
.rp-pod-row .box{ flex:1; height:70px; border-radius:12px; border:1px solid var(--color-blue-chip); display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; }
.rp-pod-row .box img{ width:100%; height:100%; object-fit:cover; }
.rp-pod-row .box.sig img{ width:57px; height:34px; object-fit:contain; }
.rp-pod-row .box.time{ font-size:10px; font-weight:600; color:var(--color-gray-700); text-align:center; padding:8px; }
.rp-pod-done{ background:var(--color-brand); color:#fff; font-weight:600; font-size:15px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.rp-mini{ background:#fff; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.rp-mini small{ font-size:13px; font-weight:500; color:var(--color-gray-500); }
.rp-mini__row{ display:flex; align-items:center; justify-content:space-between; }
.rp-mini__row span{ font-size:15px; font-weight:500; color:var(--color-gray-900); }
.rp-mini__row img{ width:44px; height:26px; }
.rp-kf__nav-img{ height:197px; border-radius:14px; overflow:hidden; position:relative; }
.rp-kf__nav-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ===== Why drivers ===== */
.rp-why{ background:var(--color-gray-50); padding:100px 0; gap:52px; }
.rp-why__head{ width:894px; max-width:calc(100% - 48px); gap:18px; }
.rp-why__grid{ display:flex; flex-direction:column; gap:24px; width:min(1080px, calc(100% - 48px)); }
.rp-why__row{ display:flex; gap:24px; }
.rp-feat{ flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--color-gray-200); border-radius:20px; padding:30px 28px; display:flex; flex-direction:column; gap:16px; box-shadow:0 8px 24px 0 rgba(15,18,31,.07); }
.rp-feat__ic{ width:46px; height:46px; border-radius:14px; background:var(--color-blue-chip); display:flex; align-items:center; justify-content:center; }
.rp-feat__ic img{ width:22px; height:22px; }
.rp-feat h3{ font-weight:700; font-size:18px; letter-spacing:-.27px; color:var(--color-gray-900); }
.rp-feat p{ font-weight:500; font-size:14px; line-height:1.5; color:var(--color-gray-600); }

/* ===== maps compare ===== */
.rp-cmp{ background:#fff; padding:100px 0; gap:52px; }
.rp-cmp__head{ gap:18px; width:min(1080px,calc(100% - 48px)); }
.rp-cmp__grid{ display:flex; gap:24px; width:min(1080px, calc(100% - 48px)); align-items:stretch; }
.rp-cmp__card{ flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--color-gray-200); border-radius:24px; padding:26px 28px; display:flex; flex-direction:column; gap:20px; }
.rp-cmp__top{ display:flex; align-items:center; justify-content:space-between; }
.rp-cmp__lbl{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:12.5px; letter-spacing:.75px; color:var(--color-gray-700); }
.rp-cmp__lbl img{ width:9px; height:9px; }
.rp-tag{ font-weight:700; font-size:11px; letter-spacing:.44px; padding:6px 12px; border-radius:999px; }
.rp-tag.red{ background:#fceaea; color:#e5484d; }
.rp-tag.green{ background:#e6f7ee; color:#15a05e; }
.rp-cmp__row{ display:flex; align-items:flex-end; justify-content:space-between; }
.rp-cmp__row h3{ font-weight:700; font-size:22px; letter-spacing:-.33px; color:var(--color-gray-900); }
.rp-cmp__drive{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.rp-cmp__drive small{ font-size:10.5px; letter-spacing:.63px; color:#a7aab4; font-weight:700; }
.rp-cmp__drive b{ font-size:22px; letter-spacing:-.44px; font-weight:700; }
.rp-cmp__drive.red b{ color:#e5484d; } .rp-cmp__drive.green b{ color:#15a05e; }
.rp-cmp__map{ height:300px; border-radius:16px; border:1px solid #eef0f4; background:var(--color-gray-50); overflow:hidden; position:relative; }
.rp-cmp__map img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.rp-cmp__list{ display:flex; flex-direction:column; gap:16px; }
.rp-cmp__item{ display:flex; align-items:center; gap:12px; }
.rp-cmp__item .mk{ width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex:none; }
.rp-cmp__item .mk.grey{ background:var(--color-gray-100); }
.rp-cmp__item .mk.blue{ background:var(--color-blue-chip); }
.rp-cmp__item .mk img{ width:12px; height:12px; }
.rp-cmp__item span{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-900); }

/* ===== Learn more · Article ===== */
.rp-learn{ background:var(--color-brand); padding:80px 0; }
.rp-learn__card{ width:min(1080px, calc(100% - 48px)); border-left:4px solid var(--color-brand-300); padding-left:30px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.rp-learn__eyebrow{ font-weight:600; font-size:13px; letter-spacing:.78px; color:var(--color-blue-50); }
.rp-learn__title{ font-weight:700; font-size:42px; line-height:1.1; letter-spacing:-1.05px; color:#fff; max-width:820px; }
.rp-learn__desc{ font-weight:500; font-size:19px; line-height:1.5; color:var(--color-blue-50); max-width:820px; }
.rp-learn__btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--color-brand); font-weight:600; font-size:15px; padding:13px 20px; border-radius:10px; text-decoration:none; margin-top:8px; }
.rp-learn__btn img{ width:18px; height:18px; }

/* ===== Pricing ===== */
.rp-pricing{ background:var(--color-gray-50); padding:100px 0; gap:44px; }
.rp-pricing__head{ gap:16px; }
.rp-pricing__head .rp-h2{ font-size:40px; line-height:1.12; letter-spacing:0; width:760px; max-width:100%; }
.rp-pricing__head .rp-lead{ font-size:17px; width:640px; max-width:100%; }
.rp-pricing__card{ width:min(760px, calc(100% - 48px)); background:#fff; border:1px solid var(--color-gray-200); border-radius:20px; padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.rp-price__amt{ display:flex; align-items:baseline; gap:6px; }
.rp-price__amt .from{ font-size:17px; font-weight:500; color:var(--color-gray-600); }
.rp-price__amt .big{ font-size:40px; font-weight:700; color:var(--color-gray-900); }
.rp-price__amt .per{ font-size:17px; font-weight:500; color:var(--color-gray-600); }
.rp-price__billed{ font-size:14px; font-weight:500; color:var(--color-gray-600); margin-top:8px; }
.rp-price__right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.rp-price__btn{ text-decoration: none; display:inline-flex; align-items:center; gap:8px; background:var(--color-brand); color:#fff; font-weight: 500; font-size:15px; padding:15px 22px 15px 26px; border-radius:10px; border:none; cursor:pointer; }
.rp-price__btn img{ width:16px; height:16px; }
.rp-price__note{ font-size:13px; font-weight:500; color:var(--color-gray-600); }

/* ===== In your pocket ===== */
.rp-pocket{ background:#fff; padding:100px 0; }
.rp-pocket__in{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; width:min(760px, calc(100% - 48px)); }
.rp-pocket__title{ font-weight:700; font-size:44px; line-height:1.1; letter-spacing:-1.1px; color:var(--color-gray-900); }
.rp-pocket__title .accent{ color:var(--color-brand); }
.rp-pocket__sub{ font-weight:500; font-size:19px; line-height:1.5; color:var(--color-gray-600); }
.rp-qr{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.rp-qr__box{ background:#fff; border:1px solid #e6e7ec; border-radius:12px; padding:8px; }
.rp-qr__box img{ width:76px; height:76px; display:block; }
.rp-qr small{ font-size:13px; font-weight:500; color:var(--color-gray-600); line-height:1.3; }
.rp-pocket__note{ font-size:14px; font-weight:500; color:var(--color-gray-500); }

/* ===== FAQ ===== */
.rp-faq{ background:var(--color-gray-50); padding:100px 0; gap:44px; }
.rp-faq__list{ display:flex; flex-direction:column; gap:16px; width:min(860px, calc(100% - 48px)); }
.rp-faq__item{ background:#fff; border:1px solid var(--color-gray-200); border-radius:16px; }
.rp-faq__q{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; padding:24px 28px; }
.rp-faq__item[open] .rp-faq__q{ padding-bottom:14px; }
.rp-faq__q::-webkit-details-marker{ display:none; }
.rp-faq__q h3{ font-weight:700; font-size:17px; letter-spacing:-.17px; color:var(--color-gray-900); }
/* rounded chevron (like the nav caret): points down when closed, up when open */
.rp-faq__ic{ width:20px; height:20px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ca6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .25s ease; }
.rp-faq__item[open] .rp-faq__ic{ transform:rotate(180deg); }
.rp-faq__a{ padding:0 28px 24px; }
.rp-faq__a p{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); }
.rp-faq__a p + p{ margin-top:14px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  .rp-hero__stage{ zoom:.8; }
}
@media (max-width:1080px){
  .rp-roi__grid{ flex-wrap:wrap; }
  .rp-roi__card{ flex:1 1 260px; }
  .rp-hiw__grid{ flex-wrap:wrap; }
  .rp-step{ flex:1 1 280px; }
  .rp-kf__bento{ flex-direction:column; }
  .rp-kf__col.c2{ width:100%; }
  .rp-why__row{ flex-wrap:wrap; }
  .rp-why__row .rp-feat{ flex:1 1 260px; }
  .rp-cmp__grid{ flex-direction:column; }
}
@media (max-width:900px){
  .rp-hero__title{ font-size:clamp(31px,6vw,49px); line-height:1.08; }
  .rp-h2, .rp-learn__title, .rp-pocket__title{ font-size:clamp(28px,5vw,44px); }
  .rp-hero__stage{ zoom:.62; }
}
@media (max-width:760px){
  .rp-hero{ padding-top:96px; }
  .rp-roi, .rp-hiw, .rp-kf, .rp-why, .rp-cmp, .rp-pricing, .rp-pocket, .rp-faq{ padding:64px 0; }
  .rp-hiw{ gap:56px; }
  .rp-why__row{ flex-direction:column; }
  .rp-roi__card{ flex:1 1 100%; }
  .rp-pricing__card{ flex-direction:column; align-items:flex-start; }
  .rp-price__right{ align-items:flex-start; width:100%; }
  .rp-learn__title{ font-size:30px; } .rp-learn__desc{ font-size:16px; }
  .rp-hero__stage{ zoom:.5; }
}
@media (max-width:520px){
  .rp-hero__stage{ zoom:.34; }
}
@media (prefers-reduced-motion:reduce){ .rp-faq__ic{ transition:none; } }

/* ---- additions to match the built HTML ---- */
.rp-kf__pod > div:first-child{ display:flex; flex-direction:column; gap:16px; }
.rp-kf__pod h3{ font-weight:700; font-size:18px; letter-spacing:-.27px; color:var(--color-gray-900); }
.rp-kf__pod > div:first-child > p{ font-weight:500; font-size:14px; line-height:1.5; color:var(--color-gray-600); }
.rp-card > div{ display:flex; flex-direction:column; gap:12px; }

/* Final CTA (gradient) with QR + store buttons */
.rp-cta{ height:auto; padding:64px 24px; align-items:center; gap:22px; text-align:center; }
.rp-cta .cta-final__title{ width:100%; }
.rp-cta .cta-final__sub{ width:100%; max-width:640px; }
.rp-cta__qr{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; }
.rp-cta__qr small{ color:#e9eaff; font-size:13px; font-weight:500; }
.rp-cta .cta-final__actions{ height:auto; }

/* Footer (Route Planner variant) */
.rp-footer .foot-inner{ width:min(1080px, calc(100% - 48px)); }
.rp-footer .blurb-col{ width:300px; }
.foot-cols{ display:flex; gap:40px; }
.rp-footer .fcol__title{ font-size:11px; text-transform:uppercase; letter-spacing:.66px; color:#d7d9df; }
.rp-footer .fcol a{ font-size:14px; color:#7c7f8a; }
.rp-footer .fcol a:hover{ color:#fff; }
.foot-legal{ display:flex; gap:24px; }
@media (max-width:900px){
  .foot-cols{ flex-wrap:wrap; gap:28px 40px; }
  .rp-footer .foot-top{ flex-direction:column; gap:32px; }
}

/* ---- step 3: route line + numbered stops over the map ---- */
.rp-route{ background:#eef0fb; }
/* step 3 map is a purpose-made 579×364 visual — match the box ratio so nothing is cropped */
.rp-step__panel .shot.rp-route{ aspect-ratio:579/364; }
.rp-route .rp-route__img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.rp-route img.rp-route__map{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }
.rp-route img.rp-route__line{ position:absolute; inset:auto; display:block; pointer-events:none; }
.rp-route img.rl1{ left:-10.9%; top:9.8%; width:106.3%; height:52.5%; }
.rp-route img.rl2{ left:-10.8%; top:32.6%; width:30.8%; height:26.7%; }
.rp-route .rp-stop{
  position:absolute; transform:translate(-50%,-50%); box-sizing:border-box;
  min-width:16px; height:16px; padding:0 3px; border-radius:5px;
  background:#fff; border:1px solid #d9d9d9; box-shadow:0 1px 3px rgba(121,121,143,.3);
  font-size:9px; font-weight:700; color:#393939; line-height:1;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.rp-route .rp-stop--1{ background:var(--color-brand); color:#fff; border:none; box-shadow:0 2px 6px rgba(0,0,140,.35); }

/* ---- Key Features: cards turn brand-blue on hover ---- */
.rp-card, .rp-kf__pod{ transition:background .25s ease, box-shadow .25s ease, transform .25s ease; cursor:pointer; }
.rp-card h3, .rp-card p, .rp-kf__pod h3, .rp-kf__pod > div:first-child > p{ transition:color .25s ease; }
.rp-card:not(.rp-card--brand):hover, .rp-kf__pod:hover{
  background:var(--color-brand);
  transform:translateY(-3px);
  box-shadow:0 22px 44px -18px rgba(65,65,231,.45);
}
.rp-card:not(.rp-card--brand):hover h3, .rp-kf__pod:hover h3{ color:#fff; }
.rp-card:not(.rp-card--brand):hover p, .rp-kf__pod:hover > div:first-child > p{ color:#e9eaff; }
.rp-card--brand{ transition:transform .25s ease, box-shadow .25s ease; cursor:pointer; }
.rp-card--brand:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -18px rgba(65,65,231,.45); }

/* ---- button hover (same feel as Home: lift + brightness) ---- */
.store-btn, .rp-price__btn, .rp-learn__btn{ transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; cursor:pointer; }
.store-btn:hover{ transform:translateY(-1px); filter:brightness(1.18); }
.rp-price__btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.rp-learn__btn:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px -8px rgba(26,28,77,.25); }

/* native form controls must inherit Plus Jakarta Sans (buttons don't by default) */
button, input, select, textarea{ font-family:inherit; }

/* hero trial note under the store buttons */
.rp-hero__trial{ font-weight:500; font-size:14px; line-height:1.5; color:#a7aab4; margin-top:2px; }