
:root{
 --ink:#202A34!important;--muted:#737C78!important;--plum:#202A34!important;--coral:#83A98B!important;
 --peach:#B7CDBB!important;--line:#DCE6DE!important;--green:#628B6D!important;
 --shadow:0 18px 45px rgba(45,74,53,.07)!important;--shadow2:0 8px 24px rgba(45,74,53,.06)!important;
}
body{background:linear-gradient(180deg,#FCFDFB 0%,#F5F8F5 55%,#EFF4F0 100%)!important;color:var(--ink)!important}
.wrap{width:min(1120px,calc(100% - 28px))!important}
.topbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:13px!important;padding:18px 0 16px!important}
.brandRow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{min-width:0}.brandIcon{width:62px!important;height:62px!important;border-radius:19px!important;box-shadow:0 10px 26px rgba(63,94,70,.13)!important;filter:none!important}
.brandCopy strong{font-size:27px!important;letter-spacing:-.045em!important;color:#202A34!important}.brandCopy strong span{color:#789E80!important}.brandCopy small{font-size:12px!important;color:#737C78!important}
.adminLink{flex:none;text-decoration:none!important;background:#F8FAF8!important;border:1px solid #D9E4DB!important;color:#26323C!important;padding:10px 14px!important;font-size:13px!important}
.topActions{width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.topActions .btn{width:100%!important;min-width:0!important;height:44px!important;padding:0 9px!important;border-radius:14px!important;font-size:13px!important;white-space:nowrap!important;background:#F8FAF8!important;border:1px solid #D9E4DB!important;color:#26323C!important;box-shadow:none!important}
#myTripsBtn{order:-1}.installBtn{display:inline-flex!important}
.card{background:#fff!important;border:1px solid #DEE7E0!important;box-shadow:0 18px 46px rgba(45,74,53,.07)!important;border-radius:28px!important}
.formCard{padding:30px!important}
.formCard h1{font-size:46px!important;line-height:1.02!important;letter-spacing:-.062em!important;color:#202A34!important;max-width:650px}
.formCard .lead{font-size:17px!important;line-height:1.55!important;color:#727B77!important;max-width:650px}
.auto{margin-top:22px!important}.auto+ .auto{margin-top:14px!important}
label{font-size:13px!important;letter-spacing:.01em!important;color:#2D3942!important;margin:0 0 8px!important}
.field,.select{height:60px!important;border:1.5px solid #D8E2DA!important;background:#FAFCFA!important;border-radius:19px!important;padding:0 17px!important;color:#202A34!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}
.withIcon{padding-left:49px!important}.inputIcon{top:40px!important;left:17px!important;font-size:18px!important}
.field::placeholder{color:#9A9F9C!important}.field:focus,.select:focus{background:#fff!important;border-color:#83A98B!important;box-shadow:0 0 0 4px rgba(131,169,139,.13)!important}
.locationRow{margin-top:9px!important}.locationRow .btn{height:42px!important;border-radius:13px!important;padding:0 14px!important;background:#F3F7F4!important;border-color:#D9E4DB!important;color:#314039!important}
.helper{font-size:12px!important;color:#7A837E!important;margin-top:8px!important}
.grid3{margin-top:20px!important;gap:10px!important}.grid3>div{background:#F8FAF8;border:1px solid #E0E8E2;border-radius:18px;padding:12px!important}.grid3 label{margin-bottom:6px!important}.grid3 .field{height:48px!important;background:#fff!important;border-radius:13px!important}
#quoteBtn{height:60px!important;border-radius:18px!important;margin-top:18px!important;background:linear-gradient(135deg,#789E80,#648D6F)!important;box-shadow:0 12px 24px rgba(100,141,111,.21)!important;font-size:16px!important}
.heroCopy{background:linear-gradient(145deg,#EEF4EF,#DFEADF 58%,#CBDCCC)!important;color:#20322A!important;border:1px solid #D8E5DA!important;border-radius:28px!important}
.heroCopy h2{color:#274235!important}.heroCopy p,.trust,.float small{color:#5B6B60!important}.trust i{background:#789E80!important}.road{background:rgba(102,142,114,.10)!important;border-color:rgba(102,142,114,.13)!important}.road:before{background:repeating-linear-gradient(90deg,#789E80 0 18px,transparent 18px 38px)!important}.dot{background:#6E9878!important;box-shadow:0 0 0 8px rgba(110,152,120,.12)!important}.float{background:rgba(255,255,255,.60)!important;border-color:#D1E0D4!important;color:#274235!important}
.result.card{border-top:1px solid #DEE7E0!important}.summary,.chip{background:#F7FAF7!important;border-color:#DDE7DF!important}.benefitBox{background:#F0F6F1!important;border-color:#D4E3D7!important;color:#42604A!important}
.qrCard{border:1px solid #DCE6DE!important}.qrClose{background:#EFF4F0!important}.waFloat{right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom))!important}
@media(max-width:900px){.hero{grid-template-columns:1fr!important}.heroCopy{min-height:330px!important}}
@media(max-width:600px){
 .wrap{width:calc(100% - 20px)!important}.topbar{padding:14px 0 15px!important;gap:12px!important}
 .brandIcon{width:58px!important;height:58px!important}.brandCopy strong{font-size:24px!important}.brandCopy small{font-size:11px!important}
 .adminLink{padding:9px 11px!important;font-size:12px!important}
 .topActions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
 .topActions .btn{height:42px!important;padding:0 5px!important;border-radius:13px!important;font-size:12px!important}
 .formCard{padding:22px 18px 20px!important;border-radius:25px!important}.formCard h1{font-size:38px!important;margin-bottom:13px!important}.formCard .lead{font-size:15px!important}
 .field,.select{height:58px!important;border-radius:17px!important}.inputIcon{top:39px!important}
 .grid3{grid-template-columns:1fr 1fr!important;gap:9px!important}.grid3>div{padding:10px!important}.grid3>div:nth-child(3){grid-column:1/-1}
 .grid3 .field{height:46px!important;padding:0 12px!important;font-size:15px!important}
 #quoteBtn{height:58px!important}.heroCopy{padding:22px!important;border-radius:25px!important}
}
@media(max-width:370px){.topActions .btn{font-size:11px!important}.adminLink{font-size:11px!important;padding:8px 9px!important}.brandCopy strong{font-size:22px!important}}

/* v74 - booking intro layout */
.hero.single{display:block!important;margin-top:0!important}
.hero.single .formCard{width:100%!important;max-width:none!important}
.bookingIntro{
  display:grid;grid-template-columns:1.08fr .92fr;min-height:280px;margin:10px 0 0;
  overflow:hidden;border:1px solid #DCE7DE;border-radius:30px 30px 0 0;
  background:linear-gradient(135deg,#F2F7F3 0%,#E5EFE7 60%,#D9E7DD 100%);
  box-shadow:0 18px 46px rgba(45,74,53,.07)
}
.bookingIntroCopy{padding:38px 34px;display:flex;flex-direction:column;justify-content:center;z-index:2}
.bookingIntroCopy h1{margin:0;color:#1F2D3A;font-size:48px;line-height:1.02;letter-spacing:-.055em}
.bookingIntroCopy p{margin:20px 0 0;color:#67746D;font-size:17px;line-height:1.55;max-width:520px}
.bookingIntroVisual{position:relative;min-height:280px;overflow:hidden;background:radial-gradient(circle at 72% 32%,rgba(255,255,255,.82),rgba(255,255,255,0) 45%)}
.heroCarSvg{position:absolute;width:112%;height:auto;right:-14%;bottom:-4%;display:block}
.trustCard{
 position:absolute;right:22px;top:24px;z-index:3;background:rgba(255,255,255,.91);backdrop-filter:blur(10px);
 border:1px solid rgba(220,231,222,.94);box-shadow:0 12px 30px rgba(45,74,53,.09);border-radius:18px;padding:12px 15px;min-width:230px
}
.trustCard div{display:flex;align-items:center;gap:10px;padding:7px 0;color:#263B31;font-size:12px}
.trustCard span{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#789E80;color:#fff;font-weight:900}
.trustCard strong{font-weight:750}
.bookingIntro + .hero.single .formCard{border-radius:0 0 30px 30px!important;border-top:0!important;margin-top:0!important}
.bookingIntro + .hero.single{gap:0!important}
.bookingIntro + .hero.single .auto:first-child{margin-top:0!important}
.benefitStrip{
 display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;margin:14px 0 6px;
 background:#fff;border:1px solid #DDE7DF;border-radius:24px;padding:15px 18px;box-shadow:0 12px 30px rgba(45,74,53,.06)
}
.benefitStrip>div{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.benefitStrip span{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#789E80;color:#fff;font-weight:900;font-size:17px;flex:none}
.benefitStrip small{color:#2D3942;font-size:11px;line-height:1.25;font-weight:650}
.footer{margin-top:12px!important}
@media(max-width:760px){
 .bookingIntro{grid-template-columns:1.12fr .88fr;min-height:220px;border-radius:25px 25px 0 0}
 .bookingIntroCopy{padding:26px 20px}.bookingIntroCopy h1{font-size:36px}.bookingIntroCopy p{font-size:14px;margin-top:14px}
 .bookingIntroVisual{min-height:220px}.heroCarSvg{width:145%;right:-38%;bottom:0}
 .trustCard{right:10px;top:12px;min-width:168px;padding:8px 9px;border-radius:14px}
 .trustCard div{font-size:9px;gap:6px;padding:5px 0}.trustCard span{width:19px;height:19px;border-radius:6px;font-size:10px}
 .bookingIntro + .hero.single .formCard{border-radius:0 0 25px 25px!important;padding-top:20px!important}
 .benefitStrip{padding:12px 8px;border-radius:20px;gap:4px}
 .benefitStrip>div{gap:6px;flex-direction:column;text-align:center}.benefitStrip span{width:30px;height:30px;font-size:14px}.benefitStrip small{font-size:9px}
}
@media(max-width:460px){
 .bookingIntro{grid-template-columns:1.2fr .8fr;min-height:205px}
 .bookingIntroCopy h1{font-size:31px}.bookingIntroCopy p{font-size:13px;line-height:1.45}
 .bookingIntroVisual{min-height:205px}.heroCarSvg{width:170%;right:-58%;bottom:2%}
 .trustCard{right:7px;top:9px;min-width:145px}.trustCard div{font-size:8px}.trustCard span{width:17px;height:17px}
}

.modeModal{position:fixed;inset:0;z-index:2500;display:none;align-items:flex-end;justify-content:center;background:rgba(31,42,52,.42);backdrop-filter:blur(5px);padding:16px}
.modeModal.open{display:flex}.modeSheet{width:min(100%,520px);background:#fff;border:1px solid #DDE7DF;border-radius:28px;padding:24px;box-shadow:0 24px 70px rgba(31,42,52,.22);position:relative}
.modeSheet h2{margin:6px 0 18px;color:#202A34}.modeClose{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:#F0F4F1;font-size:24px;color:#202A34}
.modeChoice{display:flex;align-items:center;gap:13px;text-decoration:none;color:#202A34;border:1px solid #DDE7DF;background:#FAFCFA;border-radius:18px;padding:15px;margin-top:10px}
.modeChoice>span{width:42px;height:42px;border-radius:14px;background:#EAF2EC;display:grid;place-items:center;font-size:20px}.modeChoice strong{display:block;font-size:15px}.modeChoice small{display:block;color:#737C78;margin-top:3px;font-size:12px}
.modeChoice.active{border-color:#BFD6C4;background:#F2F7F3}


/* v83 - prominent app actions */
.brandRow{align-items:center!important}
#modeBtn{
  min-height:52px!important;
  padding:0 22px!important;
  border:1px solid rgba(91,132,102,.38)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#7FA889,#679372)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:0 10px 24px rgba(88,128,99,.22)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}
#modeBtn::before{
  content:"⇄";
  display:inline-grid;
  place-items:center;
  font-size:23px;
  line-height:1;
  font-weight:900;
}
#modeBtn:active{transform:translateY(1px) scale(.99)}

.topActions{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.topActions .btn{
  position:relative!important;
  height:104px!important;
  padding:14px 8px 12px!important;
  border-radius:20px!important;
  border:1px solid #D6E2D9!important;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FBF8 100%)!important;
  color:#26323C!important;
  box-shadow:0 8px 20px rgba(45,74,53,.055)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  font-size:13px!important;
  font-weight:820!important;
  overflow:visible!important;
}
.topActions .btn::before{
  width:42px;
  height:42px;
  border-radius:13px;
  background:#ECF4EE;
  color:#5F8B6B;
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  font-weight:850;
  box-shadow:inset 0 0 0 1px rgba(110,152,120,.08);
}
.topActions .btn::after{
  content:"›";
  position:absolute;
  right:9px;
  bottom:10px;
  color:#738079;
  font-size:19px;
  font-weight:800;
}
#myTripsBtn::before{content:"🚘"}
#shareAppBtn::before{content:"↗";font-size:25px}
#qrBtn::before{content:"▦";font-size:24px}
#installAppBtn::before{content:"⇩";font-size:25px}
.topActions .btn:hover{border-color:#C6D8CA!important;background:#fff!important}
.topActions .btn:active{transform:translateY(1px)}

@media(max-width:600px){
  #modeBtn{min-height:48px!important;padding:0 16px!important;font-size:13px!important;gap:7px!important}
  #modeBtn::before{font-size:20px}
  .topActions{gap:7px!important}
  .topActions .btn{
    height:92px!important;
    padding:11px 4px 10px!important;
    border-radius:18px!important;
    font-size:11.5px!important;
    gap:7px!important;
  }
  .topActions .btn::before{width:38px;height:38px;border-radius:12px;font-size:18px}
  .topActions .btn::after{right:7px;bottom:7px;font-size:16px}
}
@media(max-width:390px){
  #modeBtn{padding:0 13px!important;font-size:12px!important}
  .topActions .btn{height:88px!important;font-size:10.5px!important}
}
