:root{
  --bg:#f6f8fb;--surface:#fff;--text:#102235;--muted:#6f7f91;--line:#e5ebf1;
  --fuel:#33c3f0;--fuel-deep:#1599c9;--fuel-soft:#eefaff;
  --charge:#25d366;--charge-deep:#149845;--charge-soft:#effcf3;
  --amber:#e7a21a;--red:#df4b4b;--navy:#102235;
  --shadow:0 18px 45px rgba(16,34,53,.06)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:300}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.shell{max-width:1180px;margin:auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;background:rgba(246,248,251,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(229,235,241,.95)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand-logo{height:37px;width:auto;display:block}.nav-right{display:flex;align-items:center;gap:9px}.navlink{font-size:12px;color:var(--muted);font-weight:400;padding:8px}.navlink:hover{color:var(--text)}.pill-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:11px;color:var(--muted)}
.hero{padding:54px 0 28px}.eyebrow{display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:500;color:var(--muted)}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--fuel),var(--charge))}h1,h2,h3{font-family:Manrope,Inter,sans-serif;color:var(--text);font-weight:500;letter-spacing:-.045em}h1{font-size:clamp(44px,5.6vw,72px);line-height:1.01;margin:16px 0 0;max-width:850px}.fuel-word{color:var(--fuel-deep);font-family:Inter,Manrope,sans-serif;font-weight:800;letter-spacing:-.055em}.charge-word{color:var(--charge-deep);font-family:Inter,Manrope,sans-serif;font-weight:800;letter-spacing:-.055em}.h1-or,.h1-amp{font-weight:300;color:var(--text)}.lead{font-size:17px;line-height:1.62;color:var(--muted);max-width:760px;margin:17px 0 0;font-weight:300}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:29px}.price-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:27px 28px 23px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.price-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-95px;top:-102px;opacity:.8}.price-card.fuel:after{background:var(--fuel-soft)}.price-card.charge:after{background:var(--charge-soft)}.topline{display:flex;align-items:center;justify-content:space-between}.card-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.signal{width:9px;height:9px;border-radius:50%}.fuel .signal{background:var(--fuel)}.charge .signal{background:var(--charge)}
.big-price,.rprice,.mprice,.summary-item b,.stat-number{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums lining-nums}.big-price{font-size:clamp(58px,6vw,84px);font-weight:700;letter-spacing:-.055em;line-height:.92;margin:20px 0 4px}.fuel .big-price,.fuel-s{color:var(--fuel-deep)}.charge .big-price,.charge-s{color:var(--charge-deep)}.unit{font-size:14px;font-weight:300;color:var(--muted)}.price-inline-unit{display:block;font-family:Manrope,Arial,sans-serif;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}.place{font-size:17px;font-weight:450;margin-top:18px}.charge-place{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-top:7px}.delta{font-size:11px;font-weight:450;margin-top:12px}.fuel .delta{color:var(--fuel-deep)}.charge .delta{color:var(--charge-deep)}.action-row{display:flex;gap:8px;align-items:center;margin-top:16px}.cta{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;padding:10px 14px;font-size:11px;font-weight:500}.fuel .cta{background:var(--fuel-soft);color:#0b7596}.charge .cta{background:var(--charge-soft);color:#0e7837}.locline{display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:12px}.locline a{font-weight:500;color:var(--text)}
.section{padding:52px 0}.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}h2{font-size:32px;line-height:1.15;margin:0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section-copy{font-size:14px;line-height:1.65;color:var(--muted);margin:7px 0 0}.seo-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:48px;align-items:start}.seo-copy{font-size:15px;line-height:1.8;color:#435468}.seo-copy strong{font-weight:500;color:var(--text)}.price-summary{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.summary-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.summary-item b{display:block;font-size:21px;font-weight:700}.summary-item span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.link-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.seo-link{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:11px;color:#536477}.seo-link:hover{border-color:#bdcad5;color:var(--text)}
.segment{display:inline-grid;grid-template-columns:1fr 1fr;background:#edf2f6;padding:4px;border-radius:13px}.segment button{border:0;background:transparent;border-radius:9px;padding:9px 13px;font-size:11px;font-weight:500;color:var(--muted);cursor:pointer}.segment button.active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(16,34,53,.06)}.toolbar{display:grid;grid-template-columns:1.8fr .7fr .7fr;gap:9px;margin:18px 0}.search,.select{min-height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;color:var(--muted)}.search{display:flex;align-items:center;padding:0 13px;gap:8px}.search input{border:0;outline:0;width:100%;background:transparent;color:var(--text);font-weight:300}.select{padding:0 12px}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.result{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px}.rprice{font-size:34px;font-weight:700;letter-spacing:-.04em}.result.fuel .rprice{color:var(--fuel-deep)}.result.charge .rprice{color:var(--charge-deep)}.rname{font-weight:450;margin-top:4px}.rmeta{font-size:10px;color:var(--muted);margin-top:7px}.mini-link{display:inline-block;font-size:10px;font-weight:500;margin-top:12px}
.map-filter{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0 14px}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:10px;color:var(--muted);cursor:pointer}.chip.active{border-color:#b7e9c5;background:var(--charge-soft);color:#14753b}.map-layout{display:grid;grid-template-columns:1.45fr .78fr;gap:14px}.map-shell{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative;min-height:530px}.map-stage{position:relative;height:530px;background:#eaf2f1}.map-fallback{position:absolute;inset:0;z-index:1}.map-fallback svg{width:100%;height:100%;display:block}.leaflet-host{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .2s}.leaflet-host.is-ready{opacity:1}.map-status{position:absolute;right:13px;bottom:13px;z-index:7;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:9px;color:var(--muted)}.map-popup-card{position:absolute;z-index:8;left:15px;top:15px;width:min(330px,calc(100% - 30px));background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:0 16px 40px rgba(16,34,53,.12)}.popup-price{font-family:Inter,Arial,sans-serif;color:var(--charge-deep);font-size:26px;font-weight:700}.popup-name{font-weight:500;margin-top:3px}.popup-meta{font-size:10px;color:var(--muted);margin-top:5px}.route-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.route-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 9px;font-size:9px;font-weight:500;display:inline-flex;align-items:center;gap:5px}.route-waze{color:#078bb8}.route-google{color:#2563eb}.route-apple{color:#111827}.map-list{display:grid;gap:8px;align-content:start}.map-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;cursor:pointer}.map-card:hover,.map-card.active{border-color:#afeac0;box-shadow:0 6px 22px rgba(18,151,70,.06)}.mprice{font-size:20px;font-weight:700;color:var(--charge-deep)}.mname{font-size:12px;font-weight:500;margin-top:3px}.mdetail{font-size:9px;color:var(--muted);margin-top:4px}.map-card .route-actions{margin-top:8px}.map-card .route-btn{padding:6px 7px;font-size:8px}
.fallback-pin{position:absolute;width:42px;height:42px;border-radius:50% 50% 50% 8px;transform:translate(-50%,-100%) rotate(-45deg);display:grid;place-items:center;border:3px solid #fff;box-shadow:0 5px 16px rgba(15,32,51,.18);z-index:4}.fallback-pin span{transform:rotate(45deg);font-family:Inter,Arial,sans-serif;font-size:9px;font-weight:700;color:#fff}.fallback-pin.green{background:var(--charge-deep)}.fallback-pin.orange{background:var(--amber)}.fallback-pin.red{background:var(--red)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px}.stat-number{font-size:27px;font-weight:700}.stat-label{font-size:9px;color:var(--muted);margin-top:4px}.breadcrumbs{padding-top:24px;font-size:10px;color:var(--muted)}.nearby{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:16px}.nearby a{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;font-size:11px;text-align:center}.faq{display:grid;gap:8px;margin-top:16px}.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}.faq summary{font-size:12px;font-weight:500;cursor:pointer}.faq p{font-size:11px;line-height:1.65;color:var(--muted);margin:10px 0 0}.country-banner{margin-top:18px;border:1px solid var(--line);border-radius:18px;padding:17px;background:linear-gradient(135deg,#fff,#f4f9fb);display:flex;justify-content:space-between;gap:18px;align-items:center}.country-banner b{font-weight:500}.country-banner span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.prelaunch-note{font-size:9px;color:#8a98a8;margin-top:18px}footer{padding:22px 0 42px;color:var(--muted);font-size:9px}
@media(max-width:900px){.seo-grid,.map-layout{grid-template-columns:1fr}.results{grid-template-columns:1fr}.nearby{grid-template-columns:repeat(3,1fr)}.map-stage,.map-shell{height:500px;min-height:500px}}
@media(max-width:640px){.shell{padding:0 14px}.nav{height:64px}.brand-logo{height:33px}.navlink{display:none}.pill-btn{font-size:9px;padding:7px 9px}.hero{padding:25px 0 12px}.eyebrow{font-size:8px}h1{font-size:36px;max-width:355px}.lead{font-size:12px;line-height:1.55;max-width:355px}.price-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}.price-card{padding:13px 11px 11px;border-radius:17px;box-shadow:none}.card-label{font-size:7px}.big-price{font-size:31px;margin:12px 0 1px}.unit{font-size:9px}.price-inline-unit{font-size:8px}.place{font-size:10px;line-height:1.22;margin-top:8px}.meta{font-size:7px;gap:6px;margin-top:4px}.delta{font-size:7px;margin-top:7px;line-height:1.2}.action-row{margin-top:8px}.cta{width:100%;font-size:8px;padding:8px}.locline{font-size:8px;margin-top:8px}.section{padding:32px 0}.section-head{align-items:flex-start;flex-direction:column}h2{font-size:24px}.toolbar{grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.stats{grid-template-columns:1fr 1fr}.price-summary{grid-template-columns:1fr 1fr}.nearby{grid-template-columns:1fr 1fr}.map-stage,.map-shell{height:450px;min-height:450px}.map-popup-card{left:10px;right:10px;top:10px;width:auto;padding:12px}.popup-price{font-size:22px}.route-btn{font-size:8px;padding:7px}.country-banner{align-items:flex-start;flex-direction:column}}

/* V14 live-data additions */
.city-search-wrap{position:relative;max-width:520px;margin:18px 0 22px}
.city-search{background:#fff;border:1px solid var(--line);border-radius:14px}
.city-search input{font-weight:400}
.city-suggestions{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 38px rgba(15,32,51,.12);overflow:hidden}
.city-suggestions a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px}
.city-suggestions a:last-child{border-bottom:0}.city-suggestions span{color:var(--muted);font-size:11px}
.data-notice{font-size:12px;color:#8a6200;background:#fff8dd;border:1px solid #f1dfa0;border-radius:12px;padding:9px 12px;margin:-8px 0 16px;display:inline-block}
.live-pin{width:42px;height:42px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid #fff;box-shadow:0 5px 16px rgba(15,32,51,.18)}
.live-pin span{transform:rotate(45deg);font:700 9px Inter,Arial;color:#fff}
.fallback-message{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#70808c;font-weight:600;background:linear-gradient(135deg,#edf6f5,#e8eff2)}
.fallback-message small{font-weight:400}

/* V14.1 — MapLibre + OpenFreeMap */
.live-pin-maplibre{
  appearance:none;
  padding:0;
  cursor:pointer;
  border:3px solid #fff;
}
.maplibregl-canvas{outline:none}
.maplibregl-ctrl-attrib{
  font-family:Manrope,Arial,sans-serif;
  font-size:10px;
}
.maplibregl-ctrl-group{
  border-radius:12px!important;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(15,32,51,.10)!important;
}

/* V15 */
.h1-light{font-weight:300}
.hero h1 strong{font-weight:700}
.hero.compact{padding-top:70px;padding-bottom:36px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.lead.small{font-size:15px;max-width:720px}
.secondary-link{font-weight:600;font-size:13px;white-space:nowrap}
.home-map .map-stage{min-height:520px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-grid details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px}
.faq-grid summary{cursor:pointer;font-weight:600;color:var(--navy)}
.faq-grid p{margin:10px 0 0;color:var(--muted);line-height:1.65;font-size:13px}
@media(max-width:760px){
  .section-head{align-items:start;flex-direction:column}
  .faq-grid{grid-template-columns:1fr}
  .home-map .map-stage{min-height:430px}
}

/* V15.2 — city picker + Leaflet map */
.header-city-picker{position:relative}
.city-picker-button{cursor:pointer}
.city-picker-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,88vw);z-index:5000;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,32,51,.16);padding:10px}
.city-picker-panel input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;font:400 13px Manrope,Arial;outline:none}
.city-picker-panel input:focus{border-color:#33c3f0;box-shadow:0 0 0 3px rgba(51,195,240,.12)}
.city-picker-results{margin-top:7px;max-height:330px;overflow:auto}
.city-picker-results a{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;text-decoration:none;color:var(--navy)}
.city-picker-results a:hover{background:#f3f7f9}
.city-picker-results small,.picker-hint{color:var(--muted);font-size:11px}
.picker-hint{padding:10px}
.leaflet-host{position:absolute;inset:0;z-index:2}
.leaflet-host.is-ready{background:#eaf1f2}
.map-fallback{z-index:1}
.map-popup-card{z-index:500}
.map-status{z-index:500}
.pwr-leaflet-marker-wrap{background:transparent!important;border:0!important}
.pwr-leaflet-marker{width:42px;height:42px;border-radius:50% 50% 50% 10px;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 5px 15px rgba(15,32,51,.22);display:grid;place-items:center;padding:0}
.pwr-leaflet-marker span{transform:rotate(45deg);font:700 9px Inter,Arial;color:#fff}

/* HOTFIX 15.2.1 — zero-dependency city picker + reliable OSM embed map */
.native-city-picker{position:relative}
.native-city-picker>summary{list-style:none;cursor:pointer;user-select:none}
.native-city-picker>summary::-webkit-details-marker{display:none}
.native-city-form{position:absolute;right:0;top:calc(100% + 10px);z-index:9000;width:min(360px,90vw);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,32,51,.18);padding:14px}
.native-city-form label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.native-city-row{display:flex;gap:7px}
.native-city-row input{min-width:0;flex:1;border:1px solid var(--line);border-radius:11px;padding:11px 12px;font:400 13px Manrope,Arial;outline:none}
.native-city-row input:focus{border-color:#33c3f0;box-shadow:0 0 0 3px rgba(51,195,240,.12)}
.native-city-row button,.native-home-city>button{border:0;border-radius:11px;background:var(--navy);color:#fff;padding:0 14px;font:600 13px Manrope,Arial;cursor:pointer}
.native-home-city{display:flex;gap:8px;max-width:600px}
.native-home-city .city-search{flex:1;margin:0}
.static-map-shell{overflow:hidden;min-height:500px;background:#edf3f4}
.pwr-map-fixed{position:relative;width:100%;height:500px;overflow:hidden;border-radius:inherit;background:#edf3f4}
.pwr-map-fixed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#edf3f4}
.pwr-map-overlay{position:absolute;inset:0;pointer-events:none}
.pwr-map-pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;display:grid;place-items:center;min-width:38px;height:38px;padding:0 7px;border:3px solid #fff;border-radius:50% 50% 50% 9px;box-shadow:0 5px 15px rgba(15,32,51,.24);font:700 9px Inter,Arial;color:#fff;text-decoration:none;z-index:4}
.pwr-map-pin.free{background:#20b765}.pwr-map-pin.busy{background:#e7a21a}.pwr-map-pin.down{background:#df4b4b}.pwr-map-pin.unknown{background:#778899}
.pwr-map-open{position:absolute;right:12px;bottom:12px;z-index:6;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:11px;font-weight:600;text-decoration:none;color:var(--navy);box-shadow:0 4px 14px rgba(15,32,51,.10)}
.pwr-map-empty{display:grid;place-items:center;height:500px;color:var(--muted)}
@media(max-width:760px){.native-home-city{max-width:none}.native-home-city>button{padding:0 11px}.static-map-shell,.pwr-map-fixed,.pwr-map-empty{min-height:390px;height:390px}.native-city-form{right:-6px}}

/* V16 — national hub, metrics, fuel preference and freshness */
.h1-light{font-weight:300;color:var(--text)}.city-word{font-weight:500}.national-hero{padding-bottom:50px}.home-location-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}.native-home-city{display:flex;gap:8px;min-width:min(620px,100%)}.native-home-city .search{flex:1}.native-home-city button{border:0;border-radius:12px;background:var(--navy);color:#fff;padding:0 16px;font-size:11px;font-weight:500}.national-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}.national-kpi,.metric-card,.city-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;box-shadow:0 10px 30px rgba(16,34,53,.035)}.national-kpi b{display:block;font:700 28px Inter,Arial,sans-serif;letter-spacing:-.04em}.national-kpi span,.metric-card span,.city-card span{display:block;color:var(--muted);font-size:10px;margin-top:5px}.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}.metric-card b{display:block;font:700 24px Inter,Arial,sans-serif;letter-spacing:-.035em;margin-top:7px}.metric-card small{display:block;margin-top:9px}.metric-card.highlight{background:linear-gradient(135deg,#fff,#f4f9fb)}.metric-label{font-size:9px!important;text-transform:uppercase;letter-spacing:.07em;font-weight:500}.city-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}.city-card b{font-weight:550}.fuel-choice-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}.fuel-choice{border:1px solid var(--line);background:#fff;color:var(--muted);padding:7px 9px;border-radius:999px;font-size:9px;cursor:pointer}.fuel-choice.active{background:var(--fuel-soft);border-color:#bdeaf8;color:#087da8;font-weight:600}.fuel-choice:disabled{opacity:.35;cursor:not-allowed}.freshness{display:inline-flex!important;align-items:center;gap:5px}.freshness:before{content:"";width:6px;height:6px;border-radius:50%;background:#9ca8b2}.freshness.fresh:before{background:var(--charge)}.freshness.aging:before{background:var(--amber)}.freshness.stale:before{background:#9ca8b2}.secondary-link{font-size:11px;font-weight:500;color:var(--muted)}.secondary-link:hover{color:var(--text)}
@media(max-width:900px){.national-kpis,.metric-grid{grid-template-columns:repeat(2,1fr)}.city-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.native-home-city{min-width:100%;width:100%}.national-kpis,.metric-grid,.city-grid{grid-template-columns:1fr 1fr}.navlink{display:none}.price-grid{grid-template-columns:1fr}.seo-grid{grid-template-columns:1fr}.map-layout{grid-template-columns:1fr}.results{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.big-price{font-size:56px}}
.decision-section{background:linear-gradient(180deg,#f6f8fb,#f1f6f8)}.decision-controls{display:flex;gap:8px;flex-wrap:wrap}.decision-controls label{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;font-size:10px;color:var(--muted)}.decision-controls input{width:54px;border:0;outline:0;background:transparent;color:var(--text);font-weight:600}.decision-status{font-size:11px;color:var(--muted);margin:12px 0 0}.decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.decision-grid .metric-card strong{display:block;font-size:12px;margin-top:8px;font-weight:550}.decision-grid .metric-card small{display:block;color:var(--charge-deep);font-size:9px;line-height:1.45}.decision-subtitle{font-size:16px;margin:22px 0 0;letter-spacing:-.02em}.decision-method{font-size:9px;line-height:1.6;color:var(--muted);margin:15px 0 0}@media(max-width:760px){.decision-grid{grid-template-columns:1fr}.decision-controls{width:100%}}

/* V16.19 — accès direct grandes villes + clarification recharge sans tarif */
.major-cities-links{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:10px}
.major-cities-label{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-right:2px}
.major-city-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:500;line-height:1;text-decoration:none;transition:.15s ease}
.major-city-link:hover{border-color:#bdeaf8;color:#087da8;background:var(--fuel-soft)}
.major-city-link.active{border-color:#bdeaf8;color:#087da8;background:var(--fuel-soft);font-weight:600}
@media(max-width:640px){.major-cities-links{gap:6px;margin-top:9px}.major-cities-label{width:100%;margin-bottom:1px}.major-city-link{padding:8px 10px;font-size:12px}}

/* V16.20 — contexte du minimum carburant */

.fuel-place{display:flex;flex-direction:column;align-items:flex-start}.place-inline-meta,.charge-place-line,.charge-subline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.place-inline-meta{margin-top:6px;color:var(--muted);font-size:11px}.charge-place-line{gap:8px}.charge-subline{margin-top:6px;color:var(--muted);font-size:11px}.public-data-strip-prefix{color:var(--muted)}
@media(max-width:640px){.place-inline-meta,.charge-subline{font-size:7px;gap:6px}.charge-place-line{gap:6px}}
.price-context{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:10px;font-weight:500}
.price-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 7px;background:#fff3d8;color:#9a6400;border:1px solid #f2d69d;font-size:8px;font-weight:600;letter-spacing:.01em}
.price-badge.is-hidden{display:none}
@media(max-width:640px){.price-context{font-size:7px;margin-top:5px;gap:4px}.price-badge{font-size:6px;padding:3px 5px}}

/* V16.21 — itinéraires directement à côté du prix */
.price-route-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;min-width:0}
.price-route-row .big-price{flex:0 1 auto}
.price-route-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;padding-bottom:8px;position:relative;z-index:2}
.price-route-actions.is-hidden{display:none}
.price-route-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:#fff;color:var(--text);font-size:9px;font-weight:600;white-space:nowrap;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.price-route-btn:hover{transform:translateY(-1px)}
.fuel .price-route-btn:hover{border-color:rgba(24,167,216,.38);background:var(--fuel-soft);color:#0b7596}
.charge .price-route-btn:hover{border-color:rgba(22,163,74,.32);background:var(--charge-soft);color:#0e7837}
@media(max-width:760px){.price-route-row{align-items:flex-start;flex-direction:column;gap:7px}.price-route-actions{justify-content:flex-start;padding-bottom:0}.price-route-btn{font-size:7px;padding:6px 8px}}


/* V16.22 — un seul CTA itinéraire + menu compact */
.price-route-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;padding-bottom:7px;flex:0 0 auto}
.route-menu-trigger{appearance:none;border:0;border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;gap:7px;background:#10243a;color:#fff;font-family:inherit;font-size:9px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 8px 18px rgba(15,36,58,.11);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.route-menu-trigger:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(15,36,58,.15)}
.fuel .route-menu-trigger{background:#149fd0}.fuel .route-menu-trigger:hover{background:#0f8fbc}
.charge .route-menu-trigger{background:#13a04b}.charge .route-menu-trigger:hover{background:#108b42}
.route-menu-popover{position:absolute;right:0;top:calc(100% + 7px);z-index:30;min-width:170px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 42px rgba(15,36,58,.16)}
.route-menu-popover[hidden]{display:none}
.route-menu-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;color:var(--text);font-size:9px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .12s ease}
.route-menu-item:hover{background:#f4f7f9}
.route-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#9ca8b2}
.route-dot-waze{background:#33ccff}.route-dot-google{background:#4285f4}.route-dot-apple{background:#111}
@media(max-width:760px){.price-route-row{flex-direction:row;align-items:flex-end;gap:10px}.price-route-actions{padding-bottom:3px}.route-menu-trigger{font-size:11px;padding:11px 15px}.route-menu-popover{right:0;min-width:156px}.route-menu-item{font-size:8px;padding:8px 9px}}

/* V16.23 — stronger navigation CTA + SEO city footer */
.route-menu-trigger{padding:14px 20px;font-size:13px;font-weight:700;min-height:44px;box-shadow:0 10px 24px rgba(15,36,58,.15)}
.fuel .route-menu-trigger{background:#149fd0}.charge .route-menu-trigger{background:#13a04b}
.route-menu-trigger span{font-size:13px;line-height:1}
.seo-footer{margin-top:10px;padding:34px 0 28px;border-top:1px solid var(--line);background:#f7f9fb}
.seo-footer-title{font-size:11px;font-weight:700;color:var(--text);margin-bottom:12px}
.seo-footer-cities{display:flex;flex-wrap:wrap;gap:7px 13px;max-width:1100px}
.seo-footer-cities a{font-size:9px;color:var(--muted);text-decoration:none;line-height:1.45}
.seo-footer-cities a:hover{color:#087da8;text-decoration:underline}
.seo-footer-all{display:inline-flex;margin-top:16px;font-size:10px;font-weight:700;color:#087da8;text-decoration:none}
.seo-footer-all:hover{text-decoration:underline}
.seo-footer-meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:8px;color:#9aa7b2}
.city-letter-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.city-letter{display:inline-flex;align-items:center;gap:5px;justify-content:center;min-width:42px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:10px;font-weight:700;color:var(--text);text-decoration:none}
.city-letter span{font-size:7px;font-weight:500;color:var(--muted)}
.city-letter.active{background:var(--fuel-soft);border-color:#bdeaf8;color:#087da8}
.city-letter.disabled{opacity:.3;pointer-events:none}
.all-cities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px}
.all-city-link{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;text-decoration:none;color:var(--text)}
.all-city-link:hover{border-color:#bdeaf8;box-shadow:0 8px 20px rgba(15,36,58,.05)}
.all-city-link b{font-size:11px}.all-city-link span{font-size:8px;color:var(--muted)}
@media(max-width:900px){.all-cities-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.route-menu-trigger{padding:12px 16px;font-size:11px;min-height:40px}.seo-footer{padding:26px 0 22px}.seo-footer-cities{gap:6px 10px}.seo-footer-cities a{font-size:8px}.all-cities-grid{grid-template-columns:1fr 1fr}.city-letter{min-width:38px;padding:7px 8px;font-size:9px}}


/* V17.3 — prix recharge toujours chiffré, références clairement signalées */
.public-data-strip{background:#fff;border-bottom:1px solid var(--line)}
.public-data-strip-inner{min-height:34px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:9px;letter-spacing:.01em}
.public-data-strip-inner span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.public-data-strip-inner b{font-family:Inter,Arial,sans-serif;color:var(--text);font-size:10px;font-weight:700}
@media(max-width:620px){.public-data-strip-inner{justify-content:flex-start;gap:10px 15px;padding-top:8px;padding-bottom:8px;font-size:8px}.public-data-strip-inner b{font-size:9px}}

/* V17.5 — KPI nationaux replacés dans le hero des pages ville */
.hero-data-kpis{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:15px;color:var(--muted);font-size:11px;line-height:1.35}
.hero-data-kpis span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.hero-data-kpis .hero-data-prefix{font-weight:600;color:var(--text);gap:7px}.hero-data-mark{width:19px;height:19px;display:block;border-radius:50%;flex:0 0 auto}.hero-data-kpis .hero-data-sep{opacity:.7}
.hero-data-kpis b{font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:var(--text);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.hero-data-kpis + .price-grid{margin-top:22px}
@media(max-width:620px){.hero-data-kpis{gap:7px 14px;margin-top:11px;font-size:8.5px}.hero-data-kpis b{font-size:9.5px}.hero-data-mark{width:16px;height:16px}.hero-data-kpis + .price-grid{margin-top:16px}}

/* V17.6 — one local map, switchable between fuel and charging. */
.local-map-head{gap:18px}
.local-map-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.map-mode-switch{display:inline-flex;gap:5px;padding:4px;border:1px solid var(--line);background:#fff;border-radius:999px}
.map-mode-btn{border:1px solid transparent;border-radius:999px;padding:9px 14px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s ease;color:#fff;opacity:.78}
.map-mode-btn.fuel{background:#149fd0;border-color:#149fd0;color:#fff}
.map-mode-btn.charge{background:#13a04b;border-color:#13a04b;color:#fff}
.map-mode-btn.active{opacity:1;transform:translateY(-1px)}
.map-mode-btn.fuel.active{box-shadow:0 6px 18px rgba(20,159,208,.25)}
.map-mode-btn.charge.active{box-shadow:0 6px 18px rgba(19,160,75,.22)}
.pwr-marker-button.fuel-marker{border-color:#fff}
@media(max-width:640px){.local-map-actions{width:100%;justify-content:space-between}.map-mode-switch{flex:0 0 auto}.map-mode-btn{padding:8px 11px;font-size:10px}}

/* V17.7 — equal card CTAs + explicit charging availability */
.price-card{display:flex;flex-direction:column}
.price-card .card-near-me{margin-top:auto;position:relative;z-index:2}
.charge-availability{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin-top:10px;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:600;line-height:1.25;border:1px solid var(--line);background:#f6f8fa;color:var(--muted)}.charge-availability.inline{margin-top:0}
.charge-availability:before{content:"";width:7px;height:7px;border-radius:50%;background:#98a5b1;flex:0 0 auto}
.charge-availability.fresh{background:var(--charge-soft);border-color:#b7e9c5;color:#14753b}.charge-availability.fresh:before{background:var(--charge)}
.charge-availability.aging{background:#fff8e8;border-color:#f1dfa0;color:#8a6200}.charge-availability.aging:before{background:var(--amber)}
.charge-availability.stale{background:#f5f7f9;color:#7b8996}.charge-availability.stale:before{background:#9aa7b2}
@media(max-width:640px){.charge-availability{font-size:7px;padding:5px 7px;margin-top:7px}.charge-availability.inline{margin-top:0}.charge-place{gap:6px}.charge-availability:before{width:6px;height:6px}}

/* V17.7 — compact factual SEO blocks */
.seo-facts{max-width:900px;margin-top:18px}.seo-facts p{margin:0 0 12px;font-size:13px;line-height:1.72;color:#526477}.seo-facts p:last-child{margin-bottom:0}.seo-facts strong{color:var(--text);font-weight:600}
.directory-intro-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:34px;align-items:start}.directory-kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px}.directory-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.directory-kpi b{display:block;font-family:Inter,Arial,sans-serif;font-size:22px}.directory-kpi span{display:block;margin-top:4px;color:var(--muted);font-size:9px}
@media(max-width:760px){.directory-intro-grid{grid-template-columns:1fr}.directory-kpis{grid-template-columns:1fr 1fr}}
.availability-inline{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:600;border:1px solid var(--line);background:#f5f7f9;color:var(--muted)}
.availability-inline:before{content:"";width:6px;height:6px;border-radius:50%;background:#98a5b1}.availability-inline.fresh{background:var(--charge-soft);border-color:#b7e9c5;color:#14753b}.availability-inline.fresh:before{background:var(--charge)}.availability-inline.aging{background:#fff8e8;border-color:#f1dfa0;color:#8a6200}.availability-inline.aging:before{background:var(--amber)}

.freshness.is-hidden,[data-charge-freshness]:empty{display:none!important}

.hero h1 .fuel-word,.hero h1 .charge-word{font-weight:800}.hero h1 .h1-amp{font-weight:300}


/* V17.9.3 — typography / UX balance: premium comparison tool, not billboard */
@media(min-width:761px){
  .city-hero h1{font-size:clamp(44px,4.9vw,66px);line-height:1.02;max-width:820px}
  .city-hero .lead{font-size:18px;line-height:1.58;max-width:800px}
  .price-card .card-label{font-size:12px;letter-spacing:.075em}
  .price-card .fuel-choice{font-size:12px;padding:8px 11px}
  .price-card .big-price{font-size:clamp(62px,5.5vw,80px)}
  .price-card .unit{font-size:14px;line-height:1.4}
  .price-card .place{font-size:20px;line-height:1.28;font-weight:500;margin-top:18px}
  .price-card .meta{font-size:13px;line-height:1.4;gap:10px}
  .price-card .price-context{font-size:13px}
  .price-card .charge-availability{font-size:11px;padding:7px 10px}
  .price-card .cta{font-size:13px;padding:11px 15px;font-weight:600}
  .price-card .route-menu-trigger{font-size:15px;padding:14px 21px;min-height:48px}
  .hero-data-kpis{font-size:12px}
  .hero-data-kpis b{font-size:14px}
}
@media(max-width:760px){
  .city-hero h1{font-size:clamp(34px,9.7vw,44px);line-height:1.03}
  .city-hero .lead{font-size:15px;line-height:1.55}
  .price-card .card-label{font-size:10px}
  .price-card .fuel-choice{font-size:10px;padding:7px 9px}
  .price-card .big-price{font-size:clamp(50px,14vw,62px)}
  .price-card .unit{font-size:12px}
  .price-card .place{font-size:16px;line-height:1.28}
  .price-card .meta{font-size:11px;line-height:1.35}
  .price-card .price-context{font-size:11px}
  .price-card .charge-availability{font-size:10px;line-height:1.3}
  .price-card .cta{font-size:12px;padding:10px 12px}
  .price-card .route-menu-trigger{font-size:13px;padding:12px 16px;min-height:42px}
  .hero-data-kpis{font-size:10px}
  .hero-data-kpis b{font-size:11px}
}

/* V17.10 — lightweight 30-day local fuel history */
.price-history-section{padding-top:8px}
.history-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 10px 28px rgba(15,32,51,.04)}
.history-chart-wrap{width:100%;overflow:hidden}
.history-chart{display:block;width:100%;height:auto;min-height:180px}
.history-grid-line{stroke:#e8edf1;stroke-width:1}
.history-line{fill:none;stroke:var(--fuel);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.history-dot{fill:#fff;stroke:var(--fuel);stroke-width:3}
.history-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:10px}
.history-note{margin:10px 0 0;color:var(--muted);font-size:10px}
.history-change{align-self:flex-start;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:700;background:#f4f6f8;color:var(--muted);white-space:nowrap}
.history-change.up{background:#fff1f1;color:#a93434}.history-change.down{background:#ecf8ef;color:#15783d}.history-change.flat{background:#f4f6f8;color:#667786}
@media(max-width:640px){.history-card{padding:13px}.history-chart{min-height:150px}.history-footer{font-size:9px}.history-change{font-size:10px}}

/* V17.11 — homepage national coverage: larger 2×2 KPIs + lazy national map */
.national-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:920px;margin-top:30px}
.national-kpi{padding:24px 26px;border-radius:20px;min-height:104px;display:flex;flex-direction:column;justify-content:center}
.national-kpi b{font-size:40px;line-height:1;letter-spacing:-.045em}
.national-kpi span{font-size:13px;line-height:1.3;margin-top:9px;font-weight:500}
.national-map-section{padding-top:18px}
.national-map{margin-top:22px;min-height:560px}
.national-map .map-stage{height:560px;min-height:560px}
.national-map-host{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .2s}
.national-map-host.is-ready{opacity:1}
.national-city-marker{width:18px;height:18px;border:3px solid #fff;background:var(--navy);border-radius:50%;padding:0;box-shadow:0 5px 16px rgba(15,32,51,.24);cursor:pointer;transition:transform .15s,box-shadow .15s}
.national-city-marker:hover{transform:scale(1.35);box-shadow:0 6px 18px rgba(15,32,51,.30)}
.national-city-popup{font:12px Manrope,Arial,sans-serif;color:#102033;line-height:1.45;min-width:170px}
.national-city-popup b{font:700 15px Inter,Arial,sans-serif;display:block;margin-bottom:4px}
.national-city-popup a{display:inline-block;margin-top:8px;font-weight:600;color:#087da8;text-decoration:none}
@media(max-width:900px){.national-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.national-kpi b{font-size:35px}.national-map,.national-map .map-stage{height:480px;min-height:480px}}
@media(max-width:620px){.national-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.national-kpi{padding:16px 14px;min-height:86px}.national-kpi b{font-size:28px}.national-kpi span{font-size:10px;margin-top:6px}.national-map,.national-map .map-stage{height:430px;min-height:430px}}


.charge-live-fallback{display:inline-flex;align-items:center;margin-top:5px;font-size:12px;font-weight:700;color:#0b6bcb;text-decoration:none}.charge-live-fallback:hover{text-decoration:underline}.charge-live-fallback.is-hidden{display:none}


/* V17.12.6 — actions regroupées en bas des cartes */
.price-card .action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:16px}
.price-card .action-row .price-route-actions{margin-left:auto;padding-bottom:0;justify-content:flex-end}
.price-card .action-row .route-menu-trigger{white-space:nowrap}
@media(max-width:640px){
  .price-card .action-row{flex-direction:column;align-items:stretch;gap:7px;margin-top:10px}
  .price-card .action-row .cta{width:100%}
  .price-card .action-row .price-route-actions{width:100%;margin-left:0;justify-content:stretch}
  .price-card .action-row .route-menu-trigger{width:100%;justify-content:center}
}

/* V17.12.16 — mobile-first city hero: prices immediately visible */
@media(max-width:620px){
  /* Keep the desktop composition untouched; on mobile the hero becomes a price dashboard. */
  .city-hero{padding:6px 0 18px}
  .city-hero > .shell{display:flex;flex-direction:column}

  /* Remove introductory copy from the first screen on mobile only. Content stays in the HTML. */
  .city-hero > .shell > .eyebrow,
  .city-hero > .shell > h1,
  .city-hero > .shell > .lead,
  .city-hero > .shell > .hero-data-kpis{display:none}

  /* Prices are now the first content immediately below the header. */
  .city-hero .price-grid{order:1;display:grid;grid-template-columns:1fr;gap:10px;margin:2px 0 0}
  .city-hero .hero-near-me-wrap{order:2;width:100%;margin:10px 0 0}
  .city-hero .home-location-tools{order:3;width:100%;margin-top:10px}
  .city-hero .major-cities-links{order:4;margin-top:12px}

  /* More visual impact without making the cards taller. */
  .city-hero .price-card{padding:16px 15px 14px;border-radius:20px;box-shadow:0 10px 28px rgba(16,34,53,.075)}
  .city-hero .price-card .card-label{font-size:9px;letter-spacing:.08em;font-weight:700}
  .city-hero .price-card .fuel-choice-row{margin-top:10px;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:1px}
  .city-hero .price-card .fuel-choice-row::-webkit-scrollbar{display:none}
  .city-hero .price-card .fuel-choice{flex:0 0 auto;font-size:10px;padding:7px 10px}
  .city-hero .price-card .big-price{font-size:clamp(56px,16vw,68px);line-height:.9;margin:14px 0 3px;letter-spacing:-.06em}
  .city-hero .price-card .unit{font-size:11px}
  .city-hero .price-card .place{font-size:15px;line-height:1.2;margin-top:10px}
  .city-hero .price-card .place-inline-meta,
  .city-hero .price-card .charge-subline{font-size:9px;gap:7px;margin-top:5px}

  /* Two useful actions on one row instead of two stacked rows. */
  .city-hero .price-card .action-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:8px;margin-top:12px}
  .city-hero .price-card .action-row .cta{width:100%;min-height:42px;font-size:11px;padding:9px 10px}
  .city-hero .price-card .action-row .price-route-actions{width:100%;margin:0;padding:0;justify-content:stretch}
  .city-hero .price-card .action-row .route-menu-trigger{width:100%;min-height:42px;justify-content:center;font-size:11px;padding:9px 10px}

  /* Geolocation remains available, but after the prices. */
  .city-hero .hero-near-me{width:100%;justify-content:center;min-height:42px;font-size:11px}
  .city-hero .hero-near-me-status{width:100%}

  /* Slightly denser mobile header to gain useful vertical space. */
  .nav{height:58px}
  .brand-logo{height:30px}
}


/* V17.12.17 — mobile: compact promise + actions in the card's right-hand whitespace */
@media(max-width:620px){
  /* Keep the value proposition visible, but compress it to two short lines. */
  .city-hero > .shell > h1{
    display:block;
    order:0;
    margin:3px 0 10px;
    max-width:none;
    font-size:clamp(25px,7.2vw,30px);
    line-height:1.02;
    letter-spacing:-.045em;
  }
  .city-hero > .shell > h1 br{display:block}
  .city-hero > .shell > h1 .fuel-word,
  .city-hero > .shell > h1 .charge-word{font-weight:800}
  .city-hero > .shell > h1 .h1-light{font-weight:300}
  .city-hero > .shell > h1 .city-word{font-weight:650}

  /* Price cards use the unused right-hand area for both actions. */
  .city-hero .price-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    column-gap:10px;
    row-gap:0;
    align-items:start;
  }
  .city-hero .price-card > .topline,
  .city-hero .price-card > .fuel-choice-row{
    grid-column:1/-1;
  }
  .city-hero .price-card > .price-route-row,
  .city-hero .price-card > .unit,
  .city-hero .price-card > .place{
    grid-column:1;
    min-width:0;
  }
  .city-hero .price-card > .action-row{
    grid-column:2;
    grid-row:3 / span 3;
    align-self:center;
    display:flex;
    flex-direction:column;
    gap:7px;
    width:112px;
    margin:8px 0 0;
  }
  .city-hero .price-card > .action-row .cta,
  .city-hero .price-card > .action-row .route-menu-trigger{
    width:100%;
    min-height:36px;
    padding:7px 7px;
    border-radius:11px;
    font-size:9px;
    line-height:1.12;
    text-align:center;
    justify-content:center;
  }
  .city-hero .price-card > .action-row .price-route-actions{
    width:100%;
    margin:0;
    padding:0;
  }
  .city-hero .price-card > .action-row .route-menu-popover{
    right:0;
    min-width:150px;
  }

  /* Recover vertical space lost by the promise line. */
  .city-hero .price-card .big-price{margin-top:11px}
  .city-hero .price-card .place{margin-top:7px}
  .city-hero .price-card .action-row{margin-top:6px}
  .city-hero .price-grid{gap:8px}
}

@media(max-width:360px){
  .city-hero .price-card{grid-template-columns:minmax(0,1fr) 102px;column-gap:8px}
  .city-hero .price-card > .action-row{width:102px}
  .city-hero .price-card > .action-row .cta,
  .city-hero .price-card > .action-row .route-menu-trigger{font-size:8.5px;padding:6px}
  .city-hero > .shell > h1{font-size:24px}
}