/* Flit · shared styles for the landing page, Flit Bikes, Flit Cruises and the
   legal pages. Extracted from the hop app (v8.112): the tokens, the strip,
   chips, steppers, sort control, cards, price pins, the bottom sheet and the
   section information screen. No external requests: the font is self-hosted
   below (SIL OFL 1.1, see /assets/fonts/OFL.txt). */

/* ── Instrument Sans, latin subset. Google Fonts serves one variable file
   for all three weights; it lives here so no request goes to Google. ── */
@font-face{font-family:"Instrument Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--bg:#F5F6F8; --surface:#FFFFFF; --ink:#17191E; --muted:#5A6270; --ink-soft:#565E6E; --accent:#2E6FE8; --accent-ink:#2560CC;
  --line:#E6E8EC; --soft:#F1F3F5; --green:#12A150; --green-ink:#0E7A46;
  --sh-sm:0 1px 2px rgba(16,18,23,.05); --sh-md:0 8px 24px rgba(16,18,23,.10);
  --m-fast:120ms; --m-base:230ms; --m-ease:cubic-bezier(.2,.7,.3,1);
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:inherit}
.secChip:focus-visible, .segbtn:focus-visible{border-radius:999px}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@keyframes mSlideIn{from{opacity:0; transform:translateY(10px)}}

/* placeholders the owner still has to fill in: impossible to miss */
mark.ph{background:#FFE14D; color:#17191E; border-radius:4px; padding:0 4px; font-weight:600}

/* ── the Flit lockup: Flit's arc + the section word ── */
.rent-logo{display:inline-flex; align-items:center; gap:6px; min-width:0; white-space:nowrap}
.rent-logo .rl-mark{width:30px; height:31px; flex:none}
.rent-logo b{font-weight:700; letter-spacing:-.03em}
.rent-logo i{font-style:normal; font-weight:600; letter-spacing:-.02em}
.rent-logo .rl-bikes{color:#0E8A45}
.rent-logo .rl-cruises{color:var(--accent-ink)}

/* ── segmented control, pills, badges ── */
.seg{display:inline-flex; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:2px}
.segbtn{border:none; background:transparent; font:inherit; font-size:12px; font-weight:600; color:var(--muted); padding:12px; border-radius:999px; cursor:pointer; min-height:44px}
.segbtn.sel{background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm); cursor:default}
.segbtn, .secChip, .obtn, .pstep button{transition:transform var(--m-fast) var(--m-ease)}
.segbtn:active, .secChip:active, .obtn:active, .pstep button:active:not(:disabled){transform:scale(.94)}
.cbadges{display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:9px}
.bpill{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:4px 9px; white-space:nowrap}
.bpill.dark{background:var(--ink); color:#fff}
.bpill.green{background:#E4F5EA; color:var(--green-ink)}
.bpill.warn{background:#FFF0E8; color:#9A3412}
.bpill.note{background:var(--soft); border:1px solid var(--line); color:var(--muted); font-weight:600; letter-spacing:.04em; padding:3px 9px}
.lnote{font-size:11px; color:var(--muted); margin:4px 2px 2px; line-height:1.45}
.obtn{flex:0 0 auto; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:999px; font:inherit; font-size:13px; font-weight:600; padding:14px 16px; cursor:pointer}
.obtn:active{background:var(--soft)}

/* ── logo tiles ── */
.lgtile{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; box-sizing:border-box}
.lgtile img{display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; box-sizing:border-box}
.lgtile.lgline{border:1px solid var(--line)}
.lg-xs{width:24px; height:16px; border-radius:5px; padding:0 2px}
.lg-br{width:42px; height:42px; border-radius:12px; padding:3px}
.lgtile.mark{padding:0}
.lgtile.mark b{font:800 13px/1 var(--font); letter-spacing:-.02em}
.lg-xs.mark b{font-size:8px}
.brandbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; color:#fff; text-decoration:none}
.brandbtn.ink{color:#17191E}
.brandbtn:active{filter:brightness(.93)}
.brandbtn .ctamark{display:flex; align-items:center; flex:none}
.brandbtn .ctamark .lgtile{width:24px; height:17px; border-radius:5px; overflow:hidden}
.brandbtn .ctamark .lgtile img{width:100%; height:100%; object-fit:contain}
.brandbtn .btxt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ══ the app pages (Flit Bikes, Flit Cruises): full screen, the map behind ══ */
body.app{height:100vh; height:100dvh; overflow:hidden}
#mapwrap{position:fixed; inset:0; background:var(--bg)}
#map{position:absolute; inset:0; background:#E9EBEE}
.leaflet-container{background:#E9EBEE; font-family:var(--font)}
.leaflet-tile{filter:saturate(.92)}
.vibrant-tiles{filter:saturate(1.35) contrast(1.02)}
/* the CARTO + OpenStreetMap credit stays on screen on every map: it rides
   above the bottom sheet / hint (--mapbot is set in script) */
.leaflet-bottom{bottom:var(--mapbot, 0px); transition:bottom .2s ease}
.leaflet-control-attribution{background:rgba(255,255,255,.88)!important; color:#5A6270; font-size:10px; border-radius:0 6px 0 0; padding:1px 6px!important}
.leaflet-control-attribution a{color:#2560CC}
/* zoom buttons join the map buttons on wide screens; phones pinch */
#secMapBtns .zbtn{display:none}
@media (min-width:761px){ #secMapBtns .zbtn{display:flex} }
.medot{width:14px; height:14px; border-radius:50%; background:var(--accent); border:2.5px solid #fff; box-shadow:0 0 0 4px rgba(46,111,232,.22), 0 1px 4px rgba(16,18,23,.3)}

/* map buttons: locate, fit */
#secMapBtns{position:absolute; right:14px; bottom:28px; z-index:1235; display:none; flex-direction:column; gap:8px}
#secMapBtns button{width:40px; height:40px; border-radius:999px; padding:0; cursor:pointer; background:var(--surface); border:1px solid var(--line); color:var(--ink); box-shadow:var(--sh-md); display:flex; align-items:center; justify-content:center}
#secMapBtns button:active{background:var(--soft)}
/* the north pointer, on top of the map buttons: not a button (the map never turns) */
#secNorth{width:40px; height:40px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink); box-shadow:var(--sh-md); display:flex; align-items:center; justify-content:center}
#secNorth svg{transition:transform .2s ease}
#secMapBtns button.nogps{color:#B42318}
body.rentmap #secMapBtns{display:flex}

/* the section screen: an opaque list, or see-through over the map */
#rentScreen{position:absolute; inset:0; z-index:1230; background:var(--bg); display:flex; flex-direction:column; pointer-events:none}
.rentBody{display:flex; flex-direction:column; flex:1; min-height:0; width:100%; max-width:680px; margin:0 auto}
.rentBody > *{pointer-events:auto}
body.rentmap #rentScreen{background:transparent}
body.rentmap #rentScreen .secScroll{display:none}

/* the strip */
.secBlock{flex:none; background:var(--surface); padding:calc(10px + env(safe-area-inset-top, 0px)) 20px 16px; border-bottom:1px solid var(--line); box-shadow:0 8px 24px rgba(16,18,23,.06)}
@media (min-width:681px){ .secBlock{border:1px solid var(--line); border-top:none; border-radius:0 0 18px 18px} }
.secTitleRow{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px}
.secTitle{font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0}
.secIconBtn{width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; padding:0; flex:none}
.secIconBtn:active{background:var(--soft)}
.secChips{display:flex; gap:6px; margin-top:10px; align-items:center}
.secChip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:11.5px; font-weight:600; padding:7px 12px; background:var(--surface); cursor:pointer; font-family:inherit; min-height:44px}
.secChip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.secScroll{flex:1; min-height:0; overflow-y:auto; padding:14px 20px; background:var(--bg); touch-action:pan-y; overscroll-behavior:contain}
.rentBody .secScroll{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
.secBlock.compact{padding-top:calc(8px + env(safe-area-inset-top, 0px)); padding-bottom:12px}
.secListHead{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.secListHead .d{font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.secLink{font-size:11.5px; font-weight:700; color:var(--accent-ink); background:none; border:none; cursor:pointer; font-family:inherit; padding:0 10px; min-height:44px; display:inline-flex; align-items:center}
.secCard{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.secEmpty{padding:16px 14px; font-size:11.5px; color:var(--muted); line-height:1.5}
.br-top .secTitleRow{margin-bottom:0}
.br-top .secTitle{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.br-tools{display:flex; gap:8px; align-items:center; flex:none}
.br-view .segbtn{padding:12px 14px}
@media (max-width:374px){ .br-view .segbtn{padding:12px 10px} }
.br-cats{flex-wrap:nowrap; overflow-x:auto; margin:10px -20px 0; padding:0 20px; scrollbar-width:none; touch-action:pan-x}
.br-cats::-webkit-scrollbar{display:none}
.br-cats .secChip{flex:none; white-space:nowrap; min-width:44px; justify-content:center}
.br-row2{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center}
.br-row2 .pstep{flex:none}
.cc-top .br-row2 .pstep{flex:1 1 auto; justify-content:space-between}
.br-row2 .pstep .pn{padding:0 3px}
/* the days label keeps the width of its plural, so 1 → 2 days never moves the toggles */
#br-days .pnLbl{padding-right:2px; min-width:2.85em}
html[data-lang="nl"] #br-days .pnLbl{min-width:3.75em}
.br-togs{display:flex; gap:6px; flex:1 1 auto}
.br-tog{flex:1 1 auto; justify-content:center; gap:4px; padding:7px 8px; white-space:nowrap; color:var(--muted)}
.br-tog .tdot{width:10px; height:10px; border-radius:50%; border:2px solid #C7CBD3; box-sizing:border-box; flex:none}
.br-tog[aria-pressed="true"]{color:var(--ink)}
.br-tog[aria-pressed="true"] .tdot{background:#16A34A; border-color:#16A34A}
.br-top.compact .br-cats, .br-top.compact .br-row2{display:none}
.secBlock.br-top.compact{padding-top:calc(10px + env(safe-area-inset-top, 0px)); padding-bottom:16px}
/* steppers */
.pstep{display:inline-flex; flex:none; align-items:center; gap:1px; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:2px}
.pstep .pn{display:flex; align-items:center; gap:5px; padding:0 3px; color:var(--ink)}
.pstep .pn b{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; min-width:12px; text-align:center}
.pstep .pnLbl{font-style:normal; font-size:11px; font-weight:600; color:var(--ink-soft); padding-right:4px; white-space:nowrap}
.pstep button{border:none; background:var(--surface); color:var(--ink); width:38px; height:38px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 1px 2px rgba(16,18,23,.06); position:relative}
.pstep button::after{content:""; position:absolute; inset:-3px; border-radius:inherit}
.pstep button:active{background:#E9EBEF}
.pstep button:disabled{opacity:.35; cursor:default}

/* the map-view hint */
.br-maphint{position:absolute; left:16px; right:16px; bottom:calc(30px + env(safe-area-inset-bottom, 0px)); z-index:2; pointer-events:none; max-width:648px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-md);
  padding:10px 12px; font-size:11.5px; color:var(--muted); line-height:1.45}
.br-maphint[hidden]{display:none}

/* ── the list: sort, head, messages ── */
.br-sortrow{display:flex; margin-bottom:10px}
.br-sort{display:flex; width:100%}
.br-sort .segbtn{flex:1 1 auto; padding:12px 6px; white-space:nowrap}
@media (max-width:374px){ .br-sort .segbtn{padding:12px 4px; font-size:11px} }
.rent-sort .segbtn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; font-weight:600}
.rent-sort .segbtn .sarr{width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  opacity:.35; transition:transform .22s cubic-bezier(.2,0,0,1), opacity .15s}
.rent-sort .segbtn.sel{background:var(--ink); color:#fff; box-shadow:0 2px 8px rgba(16,18,23,.18)}
.rent-sort .segbtn.sel .sarr{opacity:1}
.rent-sort .segbtn.desc .sarr{transform:rotate(180deg)}
@media (max-width:359px){ .rent-sort .segbtn{gap:3px; padding-left:4px; padding-right:4px} }
.br-msg{font-size:11.5px; color:var(--muted); line-height:1.45; margin:0 2px 10px}
.br-how{padding:12px 14px; margin-bottom:10px; font-size:11.5px; line-height:1.5; color:var(--muted)}
.br-how p{margin:0}
.br-how p + p{margin-top:8px}
.br-ubhead{margin-top:18px}
#br-count > span, #cc-count > span{white-space:nowrap}

/* ── one offer ── */
.br-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 15px; margin-bottom:10px}
.br-card.best{border-color:var(--ink); box-shadow:var(--sh-md)}
.br-card.unavail{opacity:.55}
.br-head{display:flex; align-items:flex-start; gap:10px}
.br-ttlw{flex:1 1 auto; min-width:0}
.br-ttl{font-size:14px; font-weight:700; line-height:1.25; letter-spacing:-.005em; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:374px){ .br-ttl{-webkit-line-clamp:3} }
.br-shop{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.35}
.br-shop .dist{font-weight:700; color:var(--accent-ink); white-space:nowrap}
.br-price{flex:none; text-align:right; max-width:88px}
.br-price b{display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums}
.br-price small{display:block; font-size:10.5px; color:var(--muted); margin-top:3px; white-space:nowrap}
.br-fig{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px}
.br-fig svg{width:150px; height:auto; flex:none; display:block}
@media (max-width:374px){ .br-fig svg{width:128px} }
.br-fig .br-photo{width:150px; height:100px; flex:none; display:block; object-fit:cover; border-radius:10px; background:#fff; border:1px solid var(--line)}
@media (max-width:374px){ .br-fig .br-photo{width:128px; height:86px} }
.br-figside{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.br-score{display:inline-flex; align-items:baseline; gap:4px; padding:6px 10px; border-radius:10px}
.br-score b{font-size:17px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.br-score span{font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.br-score.hi{background:#E4F5EA; color:var(--green-ink)}
.br-score.mid{background:#E8EFFD; color:var(--accent-ink)}
.br-score.lo{background:var(--soft); color:var(--muted)}
.br-price .br-score{margin-top:6px}
.br-price .br-score b{display:inline; font-size:15px}
.br-bar{width:100%; height:6px; background:var(--soft); border-radius:99px; overflow:hidden}
.br-bar i{display:block; height:100%; width:0; background:#9AA1AD; border-radius:99px; transition:width var(--m-base) var(--m-ease)}
.br-desc{margin-top:8px; font-size:12.5px; color:var(--ink); line-height:1.4}
.br-facts{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; margin-top:8px; font-size:11.5px; color:var(--muted); line-height:1.4}
.br-facts > div{min-width:0; overflow-wrap:anywhere}
.br-facts b{color:var(--ink); font-weight:600}
.br-facts .wide{grid-column:1/-1}
.br-note{margin-top:6px; font-size:11px; color:var(--muted); line-height:1.45}
.br-checked{margin-top:7px; font-size:10.5px; color:var(--muted); line-height:1.3; display:flex; align-items:center; gap:4px}
.br-checked::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--muted); opacity:.6; flex:none}
.br-card .cbadges{margin-top:8px}
.br-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.br-cta{flex:1 1 100%; min-height:44px; padding:0 14px; font-size:13px; font-weight:600; border-radius:999px}
.br-cta.ink{border-color:rgba(23,25,30,.14)}
.br-cta .ctaarr{flex:none; font-size:12px; opacity:.85}
.br-btn{flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; text-decoration:none}
.br-btn svg{width:15px; height:15px; flex:none}
.br-credits{margin:4px 0 0; padding-left:18px; font-size:11.5px; color:var(--muted)}
.br-credits a{color:var(--accent-ink)}

/* ── cruises: the card's extras ── */
.cc-card{position:relative}
.cc-card .br-price{max-width:112px}
.cc-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px}
.cc-tag{display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-radius:999px; background:var(--soft); color:var(--ink); font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap}
.cc-dur{font-size:12px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.cc-where{display:flex; align-items:flex-start; gap:6px; margin-top:8px; font-size:11.5px; color:var(--muted); line-height:1.4}
.cc-where svg{width:13px; height:13px; flex:none; margin-top:1px}
.cc-sheetwhere svg{width:12px; height:12px; vertical-align:-1px; margin-right:4px}
.cc-card .br-desc .cc-lbl{color:var(--muted)}
.cc-kidnote, .cc-agenote, .cc-paxnote{color:var(--ink)}
.cc-agenote, .cc-paxnote{font-weight:600}
.cc-sch{color:var(--ink)}
.cc-cacts{margin-top:10px}
.cc-book .ctaarr{font-size:12px; opacity:.85}
.cc-extras{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px}
.cc-x{font-size:11.5px; font-weight:600; color:var(--ink-soft); background:var(--soft); border-radius:999px; padding:4px 9px}
.cc-bubble{position:absolute; top:-9px; right:14px; z-index:1; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--accent); border-radius:999px; padding:4px 10px; box-shadow:var(--sh-sm)}
.cc-card.cc-self{margin-top:16px}

/* ── the bottom sheet for a tapped pin ── */
#rentSheet{position:absolute; left:0; right:0; bottom:0; z-index:1250; max-width:680px; margin:0 auto;
  background:var(--surface); border-top:1px solid var(--line); border-radius:20px 20px 0 0; box-shadow:0 -12px 32px rgba(16,18,23,.12);
  display:flex; flex-direction:column; padding:0 20px env(safe-area-inset-bottom, 0px); max-height:52vh; max-height:52dvh;
  transform:translateY(14px); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .24s cubic-bezier(.2,0,0,1), opacity .24s cubic-bezier(.2,0,0,1), visibility 0s .24s}
#rentSheet.open{transform:none; opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s}
#rentSheet:focus{outline:none}
.sheetDragging{transition:none!important}
.shHandle{display:flex; justify-content:center; padding:9px 0 12px; flex:none}
.shHandle span{width:38px; height:4px; background:var(--line); border-radius:99px}
button.shHandle{width:100%; min-height:44px; align-items:flex-start; padding:11px 0 0; background:none; border:0; font:inherit; cursor:grab; touch-action:none}
button.shHandle span{background:#C7CBD3; transition:width .16s ease, background .16s ease}
button.shHandle:active span{width:48px; background:#8C929E}
.shBody{flex:1 1 auto; min-height:0; overflow-y:auto; margin-right:-14px; padding-right:14px; scrollbar-width:thin; scrollbar-color:rgba(90,98,112,.35) transparent}
.shProv{display:flex; align-items:center; gap:11px; flex:none; padding-bottom:10px}
.shProv .lgtile{width:42px; height:42px; border-radius:10px; padding:3px}
.shProvTxt{flex:1 1 auto; min-width:0}
.shOpName{display:block; font-size:13px; font-weight:700; color:var(--ink)}
.shProvSub{display:block; font-size:10px; letter-spacing:.08em; color:var(--muted); margin-top:2px; text-transform:uppercase; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shClose{flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; position:relative}
.shClose::after{content:""; position:absolute; inset:-8px; border-radius:inherit}
.shClose:active{background:var(--soft)}
.shFoot{flex:none; margin-top:14px; padding-bottom:10px}
.shFoot .obtn{text-decoration:none; text-align:center}
#rentSheet .shFoot .obtn{flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px}
.br-sheetwhere{margin:0 0 10px}
.br-sheetwhere svg{width:12px; height:12px; vertical-align:-1px; margin-right:4px}
#rentSheet .br-card{padding:12px 13px}
#rentSheet .br-card.compact .br-price{max-width:none}
.br-sheetacts{margin-top:0; flex-wrap:nowrap}
.br-sheetacts .br-cta{flex:1 1 auto; min-width:0}
.br-sheetacts .ctamark{display:none}
#rentSheet .br-sheetacts .br-btn{flex:0 0 auto}
@media (max-width:374px){ #rentSheet .br-sheetacts .br-btn span{display:none} #rentSheet .br-sheetacts .br-btn svg{width:18px; height:18px} }
#rentSheet .br-sheetacts.tight .br-btn span{display:none}
#rentSheet .br-sheetacts.tight .br-btn svg{width:18px; height:18px}
#rentSheet .br-sheetacts.wrap .br-cta{padding-top:4px; padding-bottom:4px}
#rentSheet .br-sheetacts.wrap .btxt{white-space:normal; text-overflow:clip; overflow-wrap:anywhere; line-height:1.2; text-align:center}
.br-branches{display:flex; flex-direction:column; gap:6px; margin:0 0 12px}
.br-branch{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); text-decoration:none; font-size:13px}
.br-branch svg{width:16px; height:16px; flex:none; color:var(--muted)}
.br-branch .br-bt{display:flex; flex-direction:column; min-width:0; flex:1}
.br-branch .br-bt b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.br-branch .br-bt span{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.br-branch .dist{flex:none; color:var(--accent-ink); font-weight:600; font-size:12px}

/* ── price pins ── */
.pricepin-wrap{background:none!important; border:none!important}
.pricepin{position:absolute; left:50%; bottom:calc(6px + var(--n,0) * 32px); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; min-height:28px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-md);
  white-space:nowrap; font:700 12px/1 var(--font); color:var(--ink); font-variant-numeric:tabular-nums; cursor:pointer}
.pricepin::after{content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px; transform:rotate(45deg);
  background:inherit; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.pricepin .lgtile{width:22px; height:22px; border-radius:6px; padding:1px}
.pricepin .lgtile img{width:100%; height:100%; object-fit:contain}
.pricepin .lgtile.wide{width:34px; padding:0}
.pricepin .lgtile.wide img{width:100%; height:100%; object-fit:cover}
.pricepin .lgtile.mark b{font-size:9px}
.pricepin .from{font-weight:600; color:var(--muted)}
.pricepin.sel{background:var(--ink); border-color:var(--ink); color:#fff}
.pricepin.sel::after{border-color:var(--ink)}
.pricepin.sel .from{color:#C7CBD3}
.pricepin.dim{opacity:.55}
.pricepin.mini{padding:3px; gap:0}
.pricepin.mini > b{display:none}
.leaflet-marker-icon:focus-visible .pricepin{outline:2px solid var(--ink); outline-offset:2px}

/* ── a section's own information screen ── */
#rentInfo{position:fixed; inset:0; z-index:2600; background:var(--bg); display:flex; flex-direction:column}
#rentInfo[hidden]{display:none}
#rentInfo .ri-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
  background:var(--surface); border-bottom:1px solid var(--line); font-size:22px}
#rentInfo .ri-head .rent-logo{flex:1 1 auto; overflow:hidden}
#rentInfo .ri-headr{display:flex; align-items:center; gap:8px; flex:none}
.ri-home{display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:12px;
  font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap}
.ri-home:active{background:var(--soft)}
#rentInfo .ri-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px calc(24px + env(safe-area-inset-bottom, 0px))}
#rentInfo .ri-inner{max-width:680px; margin:0 auto}
#rentInfo .ri-stats{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
#rentInfo .ri-stats span{font-size:12.5px; font-weight:700; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 12px}
#rentInfo .ri-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0 0 10px}
#rentInfo .ri-card h3{margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:-.01em}
#rentInfo .ri-card p{margin:0; font-size:14px; line-height:1.5; color:var(--ink-soft)}
#rentInfo .ri-card p + p{margin-top:8px}
.ri-lang{display:flex; align-items:center; justify-content:space-between; gap:12px}
#rentInfo .ri-lang h3{margin:0}
.ri-lang .segbtn{min-width:52px}
.ri-legal{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 0}
.ri-legal a{display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; padding:10px 12px; min-height:44px}

/* ── the footer (every page) ── */
.flit-foot{margin:22px 0 0; padding:16px 2px 4px; border-top:1px solid var(--line); font-size:12px; line-height:1.55; color:var(--muted)}
.flit-foot p{margin:0}
.flit-foot p + p{margin-top:6px}
.flit-foot a{color:var(--ink); font-weight:600; text-decoration:none; display:inline-block; padding:4px 0}
.flit-foot a:hover{text-decoration:underline}
.flit-foot .hf-sep{color:#9AA0AC; padding:0 2px}

/* ══ the landing page ══ */
.page{max-width:760px; margin:0 auto; padding:calc(28px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px))}
.landing-head{display:flex; align-items:center; gap:10px; font-size:34px}
.landing-head .rl-mark{width:44px; height:46px}
.landing h1{font-size:30px; line-height:1.15; letter-spacing:-.02em; margin:18px 0 10px}
.landing .lead{font-size:16px; color:var(--ink-soft); margin:0 0 22px; max-width:60ch}
.sections{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:640px){ .sections{grid-template-columns:1fr 1fr} }
.sec-card{display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--sh-sm)}
.sec-card .rent-logo{font-size:26px}
.sec-card .rent-logo .rl-mark{width:38px; height:40px}
.sec-card h2{font-size:17px; margin:2px 0 0; letter-spacing:-.01em}
.sec-card p{margin:0; color:var(--ink-soft); font-size:14px}
.bigbtn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; margin-top:auto; padding:0 18px; border-radius:999px;
  font-size:16px; font-weight:700; text-decoration:none; color:#fff; background:var(--ink)}
.bigbtn.bikes{background:#0E7A46}
.bigbtn.cruises{background:#2560CC}
.bigbtn:active{filter:brightness(.92)}
.how{margin:26px 0 0}
.how h2{font-size:18px; margin:0 0 8px}
.how p{color:var(--ink-soft); margin:0 0 10px; max-width:66ch}

/* ══ legal pages ══ */
.legal .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.legal .home{display:inline-flex; align-items:center; gap:8px; font-size:24px; color:var(--ink); text-decoration:none}
.legal .home .rl-mark{width:30px; height:31px}
.legal .langjump{font-size:13px; font-weight:700; text-decoration:none; padding:10px 0}
.legal h1{font-size:28px; letter-spacing:-.02em; line-height:1.2; margin:18px 0 6px}
.legal h2{font-size:18px; letter-spacing:-.01em; margin:26px 0 6px}
.legal h3{font-size:15px; margin:18px 0 4px}
.legal p, .legal li{font-size:15px; line-height:1.6; color:var(--ink-soft)}
.legal p{margin:0 0 10px}
.legal ul{padding-left:22px; margin:0 0 10px}
.legal .meta{font-size:13px; color:var(--muted)}
.legal .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:12px 0}
.legal .nl{margin-top:40px; padding-top:8px; border-top:2px solid var(--line)}
.legal table{border-collapse:collapse; width:100%; font-size:13.5px; margin:8px 0 14px; display:block; overflow-x:auto}
.legal th, .legal td{text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--line)}
.legal th{font-weight:700; color:var(--ink)}
.legal pre{white-space:pre-wrap; font-size:12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px; overflow-x:auto}
.legal a{overflow-wrap:anywhere}
.landing-head .wordmark{font-weight:700; letter-spacing:-.04em; font-size:40px; line-height:1}
.legal .home .wordmark{font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1}


/* ── the other comparison, offered at the top left ── */
.rent-promo{position:fixed; right:16px; top:120px; z-index:1245; display:flex; align-items:center; gap:2px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 32px rgba(16,18,23,.16); padding:5px 6px 5px 5px;
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:opacity .25s var(--m-ease), transform .25s var(--m-ease)}
.rent-promo.in{opacity:1; transform:none; pointer-events:auto}
.rent-promo.in.away{opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none}
.rp-go{display:flex; align-items:center; gap:10px; min-width:0; min-height:48px; padding:4px 8px 4px 6px; border-radius:13px; color:var(--ink); text-decoration:none}
.rp-go:hover{background:var(--soft)}
.rp-mark{width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--soft); border-radius:12px}
.rp-mark svg{width:28px; height:29px}
.rp-txt{min-width:0}
.rp-txt b{display:block; font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25}
.rp-txt small{display:block; font-size:11.5px; color:var(--muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rp-arr{flex:none; font-weight:700; font-size:15px; margin-left:4px}
@media (max-width:420px){ .rp-txt small{display:none} body.promo-on .rentBody .secScroll{padding-top:80px} }
body.cruises .rp-arr{color:#0E7A46}
body.bikes .rp-arr{color:var(--accent-ink)}
.rp-x{flex:none; width:36px; height:36px; border:0; border-radius:10px; background:none; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.rp-x:hover{background:var(--soft); color:var(--ink)}
/* the list leaves room for the card above it, so it never covers anything */
body.promo-on .rentBody .secScroll{padding-top:88px}

/* wide-screen card parts, hidden on phones */
.cc-cover, .dk-more{display:none}
.pricepin.hov{background:var(--ink); border-color:var(--ink); color:#fff; transform:translateX(-50%) scale(1.08); transition:transform .15s var(--m-ease)}
.pricepin.hov::after{border-color:var(--ink)}
.pricepin.hov .from{color:#C7CBD3}

/* ══ wide screens: the list and the map side by side ══ */
@media (min-width:1024px){
  :root{--listw:min(60vw, 1080px)}
  html, body.app{background:var(--surface)}
  /* the strip: one bar across the top — logo, the choices in a search pill, ⓘ; the kinds below */
  body.rentsplit .secBlock.br-top{position:fixed; top:0; left:0; right:0; z-index:1240; display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto;
    grid-template-areas:"logo search cats tools"; align-items:center; column-gap:20px;
    padding:12px 24px; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--surface)}
  body.rentsplit .br-top .secTitleRow{display:contents}
  body.rentsplit .br-top .secTitle{grid-area:logo; font-size:22px}
  body.rentsplit .br-top .secTitle .rl-mark{width:36px; height:37px}
  body.rentsplit .br-tools{grid-area:tools; justify-self:end}
  body.rentsplit .br-view{display:none}
  body.rentsplit .br-top .br-row2, body.rentsplit .br-top.compact .br-row2{grid-area:search; display:flex; flex-wrap:nowrap; margin:0; gap:4px; padding:6px;
    border:1px solid var(--line); border-radius:999px; background:var(--surface); box-shadow:0 2px 6px rgba(16,18,23,.06), 0 8px 24px rgba(16,18,23,.08)}
  body.rentsplit .br-row2 .pstep{background:none; border:0; padding:0 4px}
  body.rentsplit .cc-top .br-row2 .pstep{flex:0 0 auto; gap:6px}
  body.rentsplit .br-row2 .pstep + .pstep, body.rentsplit .br-row2 .pstep + .br-togs{border-left:1px solid var(--line); padding-left:10px; margin-left:4px}
  body.rentsplit .br-row2 .pstep button{width:34px; height:34px; box-shadow:none; border:1px solid var(--line)}
  body.rentsplit .br-row2 .pstep .pnLbl{font-size:13px}
  body.rentsplit .br-togs{flex:0 0 auto; padding-left:10px; margin-left:4px; border-left:1px solid var(--line)}
  body.rentsplit .br-tog{border:0; background:var(--soft); min-height:34px; padding:6px 14px; font-size:12.5px}
  body.rentsplit .br-top .br-cats, body.rentsplit .br-top.compact .br-cats{grid-area:cats; display:flex; justify-content:flex-start; margin:0; padding:4px 28px 4px 2px; gap:8px; min-width:0;
    --fl:0px; --fr:36px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image:linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent)}
  body.rentsplit .br-top .br-cats{position:relative}
  body.rentsplit .br-top .br-cats.fade-l{--fl:36px}
  body.rentsplit .br-top .br-cats.end{--fr:0px}
  body.rentsplit .br-cats .secChip{min-height:38px; padding:7px 15px; font-size:13px; border-color:var(--line)}
  body.rentsplit .br-cats .secChip:not(.on):hover{border-color:var(--ink)}

  /* the list: white, a grid of picture cards */
  body.rentsplit #rentScreen{inset:var(--hdr, 140px) auto 0 0; width:var(--listw); background:var(--surface)}
  body.rentsplit .rentBody{max-width:none}
  body.rentsplit .rentBody .secScroll{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:30px 22px; align-content:start; align-items:start;
    padding:22px 32px 40px; background:var(--surface)}
  body.rentsplit.promo-on .rentBody .secScroll{padding-top:22px}   /* the card sits on the map, not over the list */
  body.rentsplit .secScroll > :not(.br-card){grid-column:1 / -1}
  body.rentsplit .secScroll > .secListHead:has(#cc-count, #br-count){order:-2}
  body.rentsplit .secScroll > .br-sortrow{margin:-16px 0 -4px; order:-1}
  body.rentsplit .br-sort{width:auto; background:none; border:0; padding:0; gap:8px}
  body.rentsplit .br-sort .segbtn{flex:none; min-height:38px; padding:8px 16px; border:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--ink)}
  body.rentsplit .br-sort .segbtn.sel{border-color:var(--ink)}
  body.rentsplit .secListHead{margin:0}
  body.rentsplit .secListHead .d{font-size:22px; font-weight:700; letter-spacing:-.02em; text-transform:none; color:var(--ink)}
  body.rentsplit .secListHead .secLink{font-size:13px}
  body.rentsplit .br-maphint{display:none}

  /* one card, as a picture with its essentials below; Details opens the rest */
  body.rentsplit .secScroll > .br-card{position:relative; display:flex; flex-direction:column; margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none}
  body.rentsplit .secScroll > .br-card.cc-self{margin-top:0}
  body.rentsplit .secScroll > .br-card .br-head{display:contents}
  body.rentsplit .secScroll > .br-card .br-fig, body.rentsplit .secScroll > .br-card .cc-cover{order:-2; margin:0 0 12px; position:relative}
  body.rentsplit .secScroll > .br-card .br-fig{display:block}
  body.rentsplit .secScroll > .br-card .br-photo, body.rentsplit .secScroll > .br-card .br-fig > svg{width:100%; height:auto; aspect-ratio:4 / 3; border:0; border-radius:14px; object-fit:cover; background:var(--soft); transition:transform .3s var(--m-ease)}
  body.rentsplit .secScroll > .br-card .br-fig > svg{padding:24px}
  body.rentsplit .secScroll > .br-card .br-figside{position:absolute; right:10px; bottom:10px}
  body.rentsplit .secScroll > .br-card .br-bar{display:none}
  body.rentsplit .secScroll > .br-card .br-figside .br-score{background:var(--surface); box-shadow:var(--sh-md)}
  body.rentsplit .secScroll > .br-card > .br-head > .lgtile{position:absolute; top:10px; right:10px; z-index:1; width:40px; height:40px; background:#fff; box-shadow:var(--sh-md); border-color:transparent}
  body.rentsplit .secScroll > .cc-card > .br-head > .lgtile{display:none}
  body.rentsplit .secScroll > .br-card .cc-cover{display:block; aspect-ratio:4 / 3; border-radius:14px; overflow:hidden; color:var(--oc); background:color-mix(in srgb, var(--oc) 10%, #fff)}
  body.rentsplit .cc-sky{position:absolute; left:0; right:0; bottom:0; width:100%; height:64%}
  body.rentsplit .cc-cvlogo{position:absolute; left:50%; top:40%; transform:translate(-50%, -50%)}
  body.rentsplit .cc-cvlogo .lgtile{width:88px; height:88px; border-radius:20px; padding:10px; background:#fff; border:0; box-shadow:0 10px 26px rgba(16,18,23,.14)}
  body.rentsplit .cc-cvmeta{position:absolute; left:12px; bottom:12px; background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:600; box-shadow:var(--sh-sm)}
  body.rentsplit .secScroll > .br-card:hover .br-photo{transform:scale(1.02)}
  body.rentsplit .secScroll > .br-card .cbadges{position:absolute; top:10px; left:10px; margin:0; z-index:1; max-width:calc(100% - 70px)}
  body.rentsplit .secScroll > .br-card .bpill{background:var(--surface); color:var(--ink); border:0; box-shadow:var(--sh-md); font-size:11.5px; letter-spacing:0; text-transform:none; padding:6px 11px}
  body.rentsplit .secScroll > .br-card .bpill.green{color:var(--green-ink)}
  body.rentsplit .secScroll > .br-card:not(.open) .cbadges .bpill.note{display:none}   /* notes join the details */
  body.rentsplit .secScroll > .br-card .cbadges{flex-wrap:nowrap}
  body.rentsplit .secScroll > .br-card .bpill.warn{color:#9A3412}
  body.rentsplit .secScroll > .br-card .cc-bubble{top:10px; right:10px}
  body.rentsplit .secScroll > .br-card .br-ttlw{order:1}
  body.rentsplit .secScroll > .br-card .br-ttl{font-size:15px; font-weight:600; -webkit-line-clamp:2}
  body.rentsplit .secScroll > .br-card .br-shop{font-size:13.5px; margin-top:2px}
  body.rentsplit .secScroll > .br-card .cc-meta{display:none}
  body.rentsplit .secScroll > .br-card .cc-extras{order:2; margin:3px 0 0; gap:0}
  body.rentsplit .secScroll > .br-card .cc-x{background:none; padding:0; font-size:13px; font-weight:400; color:var(--muted)}
  body.rentsplit .secScroll > .br-card .cc-x + .cc-x::before{content:" · "; white-space:pre}
  body.rentsplit .secScroll > .br-card .br-price{order:3; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; max-width:none; text-align:left; margin-top:8px}
  body.rentsplit .secScroll > .br-card .br-price b{display:inline; font-size:16px; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
  body.rentsplit .secScroll > .br-card .br-price small{display:inline; font-size:13px; margin:0}
  body.rentsplit .secScroll > .br-card .br-price .br-score{margin:0 0 0 auto; padding:3px 8px}
  body.rentsplit .secScroll > .br-card .br-price .br-score b{font-size:13px; text-decoration:none}
  body.rentsplit .secScroll > .br-card .br-checked{order:4; margin-top:4px}
  body.rentsplit .secScroll > .br-card .cc-where, body.rentsplit .secScroll > .br-card .br-facts, body.rentsplit .secScroll > .br-card .br-desc, body.rentsplit .secScroll > .br-card .br-note{order:5; display:none}
  body.rentsplit .secScroll > .br-card.open .cc-where, body.rentsplit .secScroll > .br-card.open .br-desc, body.rentsplit .secScroll > .br-card.open .br-note{display:block}
  body.rentsplit .secScroll > .br-card.open .cc-where{display:flex}
  body.rentsplit .secScroll > .br-card.open .br-facts{display:grid}
  body.rentsplit .secScroll > .br-card .br-acts{order:6; gap:6px; margin-top:12px}
  body.rentsplit .secScroll > .br-card .br-cta{min-height:42px; font-size:13.5px}
  body.rentsplit .secScroll > .br-card .br-acts{flex-wrap:wrap}
  body.rentsplit .secScroll > .br-card .br-acts > .br-cta{flex:1 1 100%}
  body.rentsplit .secScroll > .br-card .br-btn{flex:1 1 0; min-width:0; min-height:36px; padding:0 6px; gap:4px; font-size:12.5px; border:0; background:var(--soft); color:var(--ink-soft)}
  body.rentsplit .secScroll > .br-card .br-btn:hover{background:#E8EAEE; color:var(--ink)}
  body.rentsplit .secScroll > .br-card .br-btn svg{width:14px; height:14px}
  body.rentsplit .secScroll > .br-card .dk-more{display:inline-flex}
  body.rentsplit .secScroll > .br-card.open .dk-more svg{transform:rotate(180deg)}
  body.rentsplit .secScroll > .br-card.unavail{padding:14px; border:1px dashed var(--line); border-radius:14px}

  /* the map: a rounded panel beside the list */
  body.rentsplit #map{inset:calc(var(--hdr, 140px) + 16px) 24px 24px calc(var(--listw) + 4px); border-radius:18px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line)}
  body.rentsplit #secMapBtns{display:flex; right:38px; bottom:38px!important}
  body.rentsplit .leaflet-bottom{bottom:0}
  /* a pier's or shop's sheet floats on the map, bottom left */
  body.rentsplit #rentSheet{left:calc(var(--listw) + 20px); right:auto; bottom:40px; width:400px; max-width:none; margin:0; max-height:calc(100vh - var(--hdr, 140px) - 80px);
    border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 40px rgba(16,18,23,.18); padding-bottom:6px}
  body.rentsplit #rentSheet .shHandle{display:none}
  body.rentsplit #rentSheet .shProv{padding-top:16px}
  body.rentsplit .rent-promo{right:40px}   /* over the map's top-right corner */
}