:root{--bg:#f5f7f6;--panel:#fff;--panel-2:#fff;--border:#dfe7e3;--text:#172e27;--muted:#64756d;--accent:#147653;--accent-2:#147653;--danger:#b43f36;--radius:20px;--shadow:0 12px 40px #173e2710}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}button,input,select{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #52b992;outline-offset:4px}.wrap{max-width:1180px;margin:auto;padding:0 28px 36px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:25px 0;border-bottom:1px solid var(--border);gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.7px}.brand-icon{display:grid;place-items:center;width:38px;height:38px;background:var(--accent);color:white;border-radius:12px}.topnote{font-size:12px;color:var(--muted)}.hero{position:relative;padding:58px 0 38px;max-width:800px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:750;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent);margin-bottom:17px}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#20a16e}.hero h1{font-size:clamp(36px,5.3vw,61px);line-height:1.07;letter-spacing:-2.6px;margin:0 0 20px;font-weight:800}.hero h1 span{color:var(--accent)}.hero p{font-size:16px;color:var(--muted);max-width:580px;margin:0}.panel{padding:28px;background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.search-heading{font-size:17px;font-weight:750;margin:0 0 22px;display:flex;align-items:center;gap:10px}.step{display:inline-grid;place-items:center;background:#eaf4ee;color:var(--accent);border-radius:8px;width:27px;height:27px;font-size:12px}.controls{display:grid;gap:20px}.controls-row{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:20px}.field{display:flex;flex-direction:column;gap:9px;min-width:0}.field:first-child{grid-column:1}.field:nth-child(2){grid-row:2;grid-column:1/-1}.field:nth-child(3){grid-row:1;grid-column:2}.field label{font-size:12px;font-weight:700;color:#435b50}input[type=text],select{border:1px solid var(--border);background:#f7f9f8;color:var(--text);border-radius:11px;padding:14px 16px;font-size:15px;width:100%;height:52px;transition:border-color .2s}input::placeholder{color:#839189}input:focus{border-color:var(--accent);outline:2px solid #14765320}.fuel-buttons{display:flex;gap:9px;flex-wrap:wrap}.fuel-btn{background:white;color:#52675c;border:1px solid var(--border);border-radius:10px;padding:11px 25px;min-height:46px;font-size:13px;font-weight:700;transition:background .2s,transform .2s}.fuel-btn:hover{background:#eff6f2;transform:translateY(-2px)}.fuel-btn.active{background:#e8f5ee;color:#126c4b;border-color:#147653;box-shadow:inset 0 0 0 1px #147653}.btn{border:0;border-radius:11px;background:var(--accent);color:white;padding:14px 26px;font-weight:700;min-height:52px;transition:background .2s,transform .2s}.btn:hover{background:#0e6042;transform:translateY(-1px)}.btn.secondary{background:#eff6f2;color:var(--accent);padding:10px 15px;min-height:42px;font-size:12px}.geo-row{display:flex;gap:18px;align-items:center;padding-top:19px;border-top:1px solid #edf1ee}.status{font-size:12px;color:var(--muted)}.status.error{color:var(--danger)}.status.ok{color:var(--accent)}.suggestions{display:none;position:absolute;top:100%;left:0;right:0;margin-top:5px;z-index:20;background:white;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px #173e2722;max-height:280px;overflow:auto}.suggestions.open{display:block}.suggestion-item{padding:12px 16px;display:flex;flex-direction:column;border-bottom:1px solid #edf1ee;cursor:pointer;font-size:14px}.suggestion-item:hover,.suggestion-item.active{background:#edf7f1}.s-main{font-weight:650}.s-sub{font-size:12px;color:var(--muted)}.results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:32px 0 17px}.results-heading h2{font-size:19px;letter-spacing:-.4px;margin:0}.results-heading span{font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}.card{background:white;border:1px solid var(--border);border-radius:17px;padding:23px;display:flex;flex-direction:column;gap:13px;transition:transform .2s,box-shadow .2s;animation:appear .35s ease both}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.card-title{font-weight:750;font-size:15px;line-height:1.4}.card-dist{background:#eef4f0;color:var(--accent);padding:5px 8px;border-radius:6px;font-size:11px;white-space:nowrap}.card-addr{color:var(--muted);font-size:12px}.prices{display:flex;flex-wrap:wrap;gap:7px}.price-pill{display:flex;flex-direction:column;flex:1 1 75px;padding:9px 10px;border:1px solid #e7ece9;border-radius:9px;background:#f8faf9}.fuel{font-size:10px;color:var(--muted);font-weight:700}.val{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.price-pill.highlight{flex:1 0 100%;background:#edf7f1;border-color:#d6eadd;padding:13px 16px;flex-direction:row;align-items:center;justify-content:space-between;order:-1}.highlight .fuel{color:var(--accent);font-size:12px}.highlight .val{font-size:29px;color:var(--accent)}.price-pill.highlight .val:after{content:" / L";font-size:12px;font-weight:500;letter-spacing:0}.price-pill.outage{background:#fff1ee;border-color:#f3d2ca}.outage-val{color:var(--danger)!important;font-size:14px!important}.outage .val:after{content:none}.outage-banner{background:#fff1ee;border-radius:8px;padding:10px;color:var(--danger);font-size:11px}.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid #edf1ee;font-size:10px;color:var(--muted)}a{color:var(--accent)}.card-foot a{text-decoration:none;font-weight:700;font-size:11px}.empty,.loading{text-align:center;padding:48px 24px;border:1px dashed #d7e2db;border-radius:18px;color:var(--muted);font-size:14px;background:#ffffff60}.empty-icon{width:58px;height:58px;border-radius:18px;background:#e7f0eb;color:var(--accent);display:grid;place-items:center;margin:0 auto 17px}.empty h2{font-size:18px;color:var(--text);margin:0 0 8px}.empty p{margin:0 auto;max-width:430px;font-size:13px}.spinner{height:30px;width:30px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}footer{margin-top:32px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:18px;font-size:11px;color:var(--muted)}footer a{text-decoration:none}.footer-copy{max-width:660px}.footer-copy span{display:block;margin-top:5px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:640px){.wrap{padding:0 18px 28px}.topnote{font-size:10px}.hero{padding:37px 0 28px}.hero h1{letter-spacing:-1.5px}.hero p{font-size:14px}.panel{padding:20px}.controls-row{grid-template-columns:1fr;gap:17px}.field:first-child,.field:nth-child(2),.field:nth-child(3){grid-column:1;grid-row:auto}.field:nth-child(3) label{display:none}.fuel-buttons{display:grid;grid-template-columns:repeat(3,1fr)}.fuel-btn{padding:10px}.geo-row{align-items:flex-start;flex-direction:column;gap:12px}.grid{grid-template-columns:1fr}.results-heading{align-items:flex-start;flex-direction:column;gap:5px}footer{flex-direction:column}.empty{padding:34px 18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Refined, system-native interface. No external font or UI dependency. */
:root{--bg:#f5f5f7;--text:#1d1d1f;--muted:#6e6e73;--border:#e5e5e9;--accent:#0071e3;--accent-2:#16834b;--shadow:0 8px 32px #00000005}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}.wrap{max-width:1120px}.topbar{padding:16px 0}.brand{font-size:17px;font-weight:650;letter-spacing:-.5px}.brand-icon{width:30px;height:30px;border-radius:9px;background:#1d1d1f}.brand-icon svg{width:18px}.topnote{color:#6e6e73}.hero{max-width:none;text-align:center;padding:32px 0 25px}.eyebrow{display:none}.hero h1{font-size:clamp(30px,4vw,44px);line-height:1.12;font-weight:700;letter-spacing:-1.8px;margin-bottom:10px}.hero h1 span{color:#86868b}.hero p{margin:auto;font-size:14px;max-width:none}.panel{border:0;border-radius:22px;padding:22px;box-shadow:var(--shadow)}.search-heading{display:none}.controls{gap:12px}.controls-row{gap:14px}.field label{color:#6e6e73;font-size:11px}.field{gap:6px}input[type=text]{background:#f5f5f7;border-color:#e5e5e9;height:48px;font-size:16px}.btn{border-radius:12px;min-height:48px;padding:12px 23px;font-size:14px}.btn:hover{background:#0077ed}.fuel-buttons{display:grid;grid-template-columns:repeat(6,1fr);background:#ededf0;padding:4px;border-radius:12px;gap:3px;max-width:600px}.fuel-btn{border:0;background:transparent;border-radius:8px;min-height:38px;padding:8px 12px;color:#515156;font-weight:600}.fuel-btn.active{background:white;color:#1d1d1f;box-shadow:0 2px 7px #00000013}.fuel-btn:hover{transform:none;background:#ffffff85}.geo-row{padding-top:0;border:0;gap:14px}.btn.secondary{background:#f5f5f7;color:var(--accent);min-height:44px}.status{font-size:11px}.suggestion-item:hover,.suggestion-item.active{background:#f0f6ff}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e5e5e9;border:1px solid #e5e5e9;border-radius:20px;overflow:hidden;margin-bottom:10px}.metric{background:white;padding:20px 24px}.metric-label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}.metric-value{font-size:clamp(26px,3vw,38px);font-weight:650;letter-spacing:-1.4px;font-variant-numeric:tabular-nums;line-height:1.2}.metric-value small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}.metric.minimum .metric-value{color:#16834b}.scope{font-size:11px;color:var(--muted);margin:0 3px 18px}.best-pick{background:#eaf5ed;border:1px solid #d6eadb;border-radius:20px;padding:22px 25px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 24px;margin-bottom:22px}.best-label{font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:700;color:#227840}.best-pick h2{font-size:19px;letter-spacing:-.4px;margin:5px 0}.best-pick p{font-size:12px;margin:0;color:#47664f}.best-action{text-align:right}.best-price{font-size:34px;font-weight:700;letter-spacing:-1.3px;color:#16763d;font-variant-numeric:tabular-nums}.best-price small{font-size:13px;font-weight:400;letter-spacing:0}.route{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 17px;border-radius:99px;background:var(--accent);color:white;text-decoration:none;font-size:12px;font-weight:600}.best-action .route{background:#16834b;margin-top:7px}.results-heading{margin:22px 0 12px}.results-heading h2{font-size:18px}.sort-wrap{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.sort-wrap select{font-size:12px;width:auto;height:44px;background:white;padding:8px 12px;border-radius:10px}.station-list{display:grid;gap:10px}.station{display:grid;grid-template-columns:38px minmax(0,1fr) 140px 108px;gap:18px;align-items:center;background:white;border:1px solid transparent;border-radius:17px;padding:18px 22px}.station.cheapest{border-color:#c5e4ce}.rank{font-size:13px;color:#86868b;text-align:center}.station h3{font-size:14px;margin:0 0 3px;font-weight:650}.station-location{font-size:12px;color:var(--muted)}.station-meta{font-size:10px;color:var(--muted);margin-top:6px}.station-price{text-align:right;font-size:24px;font-weight:650;letter-spacing:-.7px;font-variant-numeric:tabular-nums;white-space:nowrap}.station-price small{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:0}.station-price .delta{display:block;font-size:10px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:4px}.station.cheapest .station-price{color:#16834b}.best-tag{font-size:9px;display:inline-block;color:#16763d;background:#edf7ef;padding:3px 6px;border-radius:5px;margin-bottom:5px}.station .route{color:var(--accent);background:#f2f7fd}.station details{grid-column:2/-1;font-size:11px;color:var(--muted);margin-top:-7px}.station summary{cursor:pointer;padding:5px 0;min-height:28px}.other-fuels{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.other-fuels span{background:#f5f5f7;border-radius:6px;padding:6px 9px}.unavailable{font-size:12px;color:#b43f36}.load-more{display:block;margin:18px auto;background:white;color:var(--accent);border:1px solid var(--border);border-radius:99px;min-height:44px;padding:10px 24px}.empty{border:0;background:white;border-radius:20px;padding:32px 20px}.empty-icon{background:#f5f5f7;color:#86868b}.empty h2{font-weight:600}.jump-results{color:var(--accent);font-size:12px;text-decoration:none;margin-left:auto;white-space:nowrap}.jump-results[hidden]{display:none}.has-results .hero{padding:20px 0}.has-results .hero h1{font-size:28px}.has-results .hero p{display:none}.has-results #results{scroll-margin-top:16px}footer{font-size:10px}.station h3,.best-pick h2{overflow-wrap:anywhere}.stale{color:#9b6213}.method{font-size:11px;color:var(--muted);margin-top:18px}.method summary{cursor:pointer;padding:10px 0}.method p{max-width:760px;margin:4px 0 10px}
@media(max-width:640px){.wrap{padding:0 14px 22px}.topbar{padding:12px 0}.topnote{font-size:9px}.hero{padding:25px 0 20px}.hero h1{font-size:30px;letter-spacing:-1px}.hero p{font-size:12px;max-width:280px}.panel{padding:15px;border-radius:18px}.controls-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}.field:first-child{grid-column:1/-1}.field:nth-child(2){grid-column:1/-1;grid-row:2}.field:nth-child(3){grid-column:1/-1;grid-row:3}.fuel-buttons{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}.fuel-btn{padding:8px 0;font-size:11px;min-height:40px}.field:nth-child(2) label{display:none}.geo-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.geo-row .status{flex:1 1 150px;font-size:10px}.jump-results{width:100%;margin:0;text-align:center;padding:4px}.summary{border-radius:16px}.metric{padding:15px 10px}.metric-label{font-size:10px}.metric-value{font-size:25px;letter-spacing:-1px}.metric-value small{font-size:9px;display:block;margin-top:3px}.scope{font-size:10px;margin-bottom:12px}.best-pick{padding:17px;grid-template-columns:1fr auto;gap:8px 14px;border-radius:17px;margin-bottom:17px}.best-label{font-size:9px}.best-pick h2{font-size:14px}.best-pick p{font-size:10px}.best-price{font-size:27px}.best-price small{font-size:10px}.best-action .route{font-size:11px;padding:8px 13px}.results-heading{flex-direction:row;align-items:center;gap:8px}.results-heading h2{font-size:15px}.sort-wrap label{display:none}.sort-wrap select{max-width:155px;font-size:11px}.station{grid-template-columns:minmax(0,1fr) 104px;gap:10px;padding:16px;border-radius:16px}.rank{display:none}.station h3{font-size:13px}.station-price{font-size:23px}.station-price small{display:block;font-size:10px}.station-location{font-size:11px}.station-meta{font-size:9px}.station>.route{grid-column:2;grid-row:2;min-height:44px;padding:7px 10px;font-size:11px}.station details{grid-column:1;grid-row:2;margin:0;min-width:0}.other-fuels{flex-direction:column}.station summary{font-size:10px;padding:12px 0}.has-results .hero{padding:16px 0}.has-results .hero h1{font-size:24px}footer{gap:8px}}


/* Location is an immediate alternative to entering an address. */
.controls-row{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.controls-row .address-field{grid-column:1;grid-row:1}
.controls-row .location-action{grid-column:2;grid-row:1}
.controls-row .fuel-field{grid-column:1;grid-row:2}
.controls-row .search-action{grid-column:2;grid-row:2}
.controls-row .field label{display:block}
.location-action .location-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#fff;color:var(--accent);border:1px solid var(--accent);min-height:48px;white-space:nowrap}
.location-action .location-btn:hover{background:#eef6ff;transform:none}
.location-action .location-btn:disabled{opacity:.55;cursor:wait}
.location-action .location-btn svg{flex:none}
.location-divider{display:none}
@media(max-width:640px){
.controls-row{grid-template-columns:minmax(0,1fr);gap:12px}
.controls-row .location-action{grid-column:1;grid-row:1}
.location-divider{display:flex;align-items:center;gap:12px;grid-column:1;grid-row:2;font-size:11px;color:var(--muted)}
.location-divider:before,.location-divider:after{content:"";height:1px;flex:1;background:var(--border)}
.controls-row .address-field{grid-column:1;grid-row:3}
.controls-row .fuel-field{grid-column:1;grid-row:4}
.controls-row .search-action{grid-column:1;grid-row:5}
.location-action .location-btn{min-height:50px;background:#f5faff}
.controls-row .fuel-field label{display:none}
}

/* Keep location feedback visible while awaiting browser permission or GPS. */
.location-action .location-btn{min-width:240px}
.geo-spinner{display:none;width:18px;height:18px;flex:0 0 18px;border:2px solid #0071e330;border-top-color:currentColor;border-radius:50%}
.location-btn.is-locating .geo-spinner{display:block;animation:spin .8s linear infinite}
.location-btn.is-locating svg{display:none}
.location-action .location-btn.is-locating:disabled{opacity:1;background:#eef6ff;color:var(--accent);cursor:wait;transform:none}
@media(max-width:640px){.location-action .location-btn{min-width:0}}
@media(prefers-reduced-motion:reduce){.location-btn.is-locating .geo-spinner{animation:none}}

.location-info{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:11px 14px;background:#edf7ef;border:1px solid #d7eadc;border-radius:12px;font-size:12px;color:#23683c}
.location-info[hidden]{display:none}
.location-info strong{font-weight:600}
.location-info a{margin-left:auto;font-size:11px;min-height:32px;display:inline-flex;align-items:center;text-decoration:none}
.location-info .location-accuracy{font-size:11px}
@media(max-width:640px){.location-info{font-size:11px;gap:4px 10px}.location-info a{margin-left:0}}
/* Gasoil-only search: keep the manual search action after the address. */
.controls-row .search-action{grid-column:1/-1;grid-row:2;align-items:flex-end}
.controls-row .search-action .btn{min-width:240px}
.brand{gap:8px;flex-wrap:nowrap;white-space:nowrap}
@media(max-width:640px){
.topnote{display:none}.brand{font-size:18px;letter-spacing:-.6px}
.controls-row .search-action{grid-column:1;grid-row:4;align-items:stretch}
.controls-row .search-action .btn{min-width:0;width:100%}
}
/* Logo 03: location pin, fuel pump and green price-screen accent. */
.brand{gap:10px;letter-spacing:-.65px;font-weight:700}
.brand .brand-icon{width:40px;height:47px;background:transparent;border-radius:0;flex:0 0 40px}
.brand .brand-icon svg{display:block;width:40px;height:47px}
.brand-wordmark{white-space:nowrap;color:#1d1d1f}
.brand-name-accent{color:#0071e3}.brand-domain{color:#6e6e73}
@media(max-width:640px){.brand{gap:8px;font-size:18px}.brand .brand-icon{width:32px;height:38px;flex-basis:32px}.brand .brand-icon svg{width:32px;height:38px}}
@media(max-width:360px){.brand{font-size:16px;letter-spacing:-.6px}}

.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:white;padding:12px 18px;border-radius:10px}.skip-link:focus{top:12px}
.hero p{max-width:690px}.seo-guide{margin-top:42px;padding-top:32px;border-top:1px solid var(--border)}
.guide-kicker{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-weight:600}
.seo-guide h2{font-size:24px;letter-spacing:-.7px;line-height:1.25;margin:10px 0 14px;font-weight:650}
.seo-guide h3{font-size:16px;letter-spacing:-.25px;line-height:1.35;margin:0 0 10px}
.seo-guide p{font-size:14px;line-height:1.8;color:#63636a;margin:0 0 13px}.guide-intro{max-width:850px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:25px 0}
.guide-grid section{padding:22px;background:white;border-radius:18px}.guide-grid p{font-size:13px;margin:0}
.saving-tip{padding:22px 25px;border-radius:18px;background:#eaf5ed;margin-bottom:32px}.saving-tip p{margin:0;color:#47664f}
.data-source{max-width:880px;margin-bottom:30px}.seo-faq{padding:24px;background:white;border-radius:20px}
.seo-faq h2{margin-top:0}.seo-faq details{border-top:1px solid var(--border)}.seo-faq summary{padding:17px 0;cursor:pointer;font-size:14px;font-weight:600;line-height:1.5}.seo-faq details p{padding-bottom:10px;font-size:13px}
.guide-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;text-decoration:none;font-size:13px}.noscript-note{padding:18px;background:#fff;border-radius:12px;font-size:14px}
@media(max-width:640px){.seo-guide{margin-top:28px;padding-top:25px}.seo-guide h2{font-size:21px}.seo-guide p{font-size:13px}.guide-grid{grid-template-columns:1fr;gap:10px;margin:18px 0}.guide-grid section{padding:18px}.saving-tip{padding:18px}.seo-faq{padding:18px}.seo-faq summary{font-size:13px}.hero p{max-width:340px}}

.fill-saving{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:9px;padding:8px 10px;background:#edf7ef;border-radius:9px;color:#16763d;font-size:12px;line-height:1.4}
.fill-saving strong{font-weight:650}.fill-saving span{font-size:10px;color:#47664f}
.fill-saving.neutral{background:#f5f5f7;color:var(--muted);font-size:11px}.fill-saving.neutral span{color:var(--muted)}
.best-pick .fill-saving{background:#ffffffaa;max-width:360px}
@media(max-width:640px){.fill-saving{font-size:11px;padding:7px 8px}.fill-saving span{font-size:9px}.best-pick .fill-saving{margin-top:8px}}

/* Compact desktop comparison and distinct search alternatives. */
.hero{padding:22px 0 20px}.hero h1{font-size:36px}.hero p{font-size:14px;line-height:1.5}
.controls-row .address-field{grid-column:1;grid-row:1}.controls-row .search-action{grid-column:2;grid-row:1;align-items:stretch}
.controls-row .location-divider{display:flex;grid-column:1;grid-row:2;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.location-divider:before,.location-divider:after{content:"";height:1px;background:var(--border);flex:1}.or-mobile{display:none}
.controls-row .location-action{grid-column:2;grid-row:2}.location-action .location-btn{min-height:44px}
.initial-hint{text-align:center;color:var(--muted);font-size:13px;margin:12px 0 20px}.geo-row .status{font-size:12px}
.best-distance{display:block;font-size:18px;font-weight:650;color:#23683c;margin:8px 0}.best-distance small{font-weight:400;font-size:11px}
.results-heading h2 span{font-weight:400;color:var(--muted);font-size:13px}.comparison-note{font-size:12px;color:var(--muted);margin:0 0 14px}
.list-columns,.station.compact-station{display:grid;grid-template-columns:minmax(0,1fr) 90px 110px 130px 90px;gap:16px;align-items:center}
.list-columns{padding:8px 18px;font-size:11px;color:var(--muted)}.list-columns span:nth-child(n+2){text-align:right}
.station.compact-station{padding:15px 18px;border-radius:12px}.station.compact-station .station-price{font-size:22px}.station-distance{text-align:right;font-size:13px;white-space:nowrap}.station-saving{text-align:right;color:#16763d;font-size:17px;font-variant-numeric:tabular-nums}.station-saving.neutral{color:var(--muted)}.mobile-caption{display:none}.compact-station .route{font-size:12px;padding:8px 12px}.station-list{gap:7px}
.unavailable-group{margin-top:18px;border:1px solid var(--border);border-radius:14px;background:#ffffff70;padding:0 16px}.unavailable-group>summary{padding:15px 0;cursor:pointer;font-size:13px;color:var(--muted)}.unavailable-row{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--border)}.unavailable-row h3{font-size:13px;margin:0}.unavailable-row p{font-size:11px;color:var(--muted);margin:3px 0}.unavailable-row>span{font-size:12px;color:#b43f36}
@media(min-width:641px) and (max-width:850px){.list-columns,.station.compact-station{grid-template-columns:minmax(0,1fr) 65px 85px 100px 75px;gap:10px}.station.compact-station .station-price{font-size:19px}}
@media(max-width:640px){
.hero h1{font-size:29px}.controls-row .location-action{grid-column:1;grid-row:1}.controls-row .location-divider{grid-column:1;grid-row:2}.controls-row .address-field{grid-column:1;grid-row:3}.controls-row .search-action{grid-column:1;grid-row:4}.or-desktop{display:none}.or-mobile{display:inline}.geo-row .status{font-size:11px}
.list-columns{display:none}.station.compact-station{grid-template-columns:minmax(0,1fr) 110px;gap:10px;padding:16px}.compact-station .station-info{grid-column:1;grid-row:1}.station.compact-station .station-price{grid-column:2;grid-row:1;font-size:24px}.compact-station .station-saving{grid-column:1;grid-row:2;text-align:left;font-size:18px}.compact-station .station-distance{grid-column:2;grid-row:2;font-size:13px}.compact-station>.route{grid-column:1/-1;grid-row:3;min-height:44px}.mobile-caption{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:2px}.comparison-note{font-size:11px}.unavailable-row{grid-template-columns:1fr auto;gap:10px}.unavailable-row .route{grid-column:1/-1}.best-distance{font-size:17px}.best-pick .fill-saving strong{font-size:13px}
}


.national-retry{border:0;background:transparent;color:var(--accent);text-decoration:underline;font:inherit;min-height:44px;padding:8px;cursor:pointer}
#nationalStats .results-heading{margin-top:0}#nationalStats .method{margin-top:0}
.nav-departments{font-size:12px;color:var(--accent);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}@media(max-width:640px){.topbar{flex-wrap:wrap;gap:4px}.nav-departments{font-size:11px}}
.site-links{display:flex;gap:18px;flex-wrap:wrap}@media(max-width:640px){.site-links{gap:14px}}

/* Approved visual direction — desktop and mobile */
:root{--text:#101627;--muted:#596981;--border:#e5ebf2;--accent:#006aff;--accent-2:#00864c}
body{background:#eff2f7;color:var(--text)}.wrap{max-width:1200px;margin:26px auto;background:white;border-radius:26px;padding:0 32px 30px;box-shadow:0 14px 55px #2034580c}
.topbar{min-height:94px;padding:18px 4px;gap:24px}.brand{font-size:24px;letter-spacing:-1px}.brand-name-accent{color:inherit}.brand-domain{color:var(--accent)}.brand .brand-icon,.brand .brand-icon svg{width:43px;height:51px}.brand-promise{font-size:11px;color:var(--muted);line-height:1.5}.site-links{gap:28px}.site-links a{font-size:14px;text-decoration:none;color:var(--muted);padding:12px 0}.site-links a[aria-current]{color:var(--accent);border-bottom:2px solid var(--accent);font-weight:650}.menu-toggle{display:none}
.hero,.has-results .hero{padding:34px 0 24px}.hero h1,.has-results .hero h1{font-size:clamp(32px,3.6vw,45px);letter-spacing:-1.8px;line-height:1.1;margin:0 0 10px}.hero p,.has-results .hero p{display:block;font-size:18px;color:var(--muted)}
.panel{padding:0 0 10px;box-shadow:none;background:transparent}.controls{max-width:880px;margin:auto;gap:8px}.controls-row{grid-template-columns:minmax(0,1fr) 180px 180px;gap:12px;align-items:center}.controls-row .address-field{grid-column:1;grid-row:1}.controls-row .search-action{grid-column:2;grid-row:1}.controls-row .location-action{grid-column:3;grid-row:1}.controls-row .location-divider{display:none}.controls-row .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.controls-row .search-action .btn,.location-action .location-btn{min-width:0;width:100%;height:54px;min-height:54px}.location-action .location-btn{border-color:#c8daff;background:#fbfdff}.controls input[type=text]{height:54px;background:white;border-color:#d8e2ef;border-radius:15px;padding:14px 18px}.btn{border-radius:14px;font-weight:650}.search-action .btn{box-shadow:0 5px 14px #006aff18}.geo-row{justify-content:center;text-align:center}.geo-row .status{font-size:12px}.location-info{background:transparent;border:0;padding:5px;justify-content:center;color:var(--muted)}.location-info a{margin-left:0}.jump-results{display:none!important}
#results>.results-heading:first-child,#nationalStats>.results-heading{background:#f4f7fa;border-radius:18px 18px 0 0;padding:18px 24px 0;margin:0}.results-heading h2{font-size:19px}.summary{border:0;background:#f4f7fa;border-radius:0 0 18px 18px;gap:0;padding:18px 12px;margin:0}.metric{background:transparent;text-align:center;padding:0 16px}.metric+.metric{border-left:1px solid #dfe6ef}.metric-label{font-size:13px}.metric-value{font-size:36px;letter-spacing:-1.2px;font-weight:750}.metric-value small{font-size:18px;color:inherit;font-weight:600}.metric.minimum .metric-value{color:#00834b}.scope{margin:9px 4px 16px;font-size:11px}
.best-pick{position:relative;background:linear-gradient(115deg,#f0fff6,#f5fcf9);border:1px solid #c6eed8;border-radius:18px;padding:22px 24px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 174px;gap:22px;margin:14px 0 26px}.best-label{display:inline-block;background:#009956;color:#fff;border-radius:99px;padding:6px 13px;font-size:10px;letter-spacing:0;margin-bottom:7px}.best-pick h2{font-size:20px;margin:3px 0 5px;line-height:1.3}.best-pick p{color:var(--muted);font-size:12px}.best-distance{display:inline;font-size:12px;font-weight:400;color:var(--muted);margin:0 0 0 8px}.best-distance small{font-size:10px}.best-action{text-align:left;border-left:1px solid #d7e9df;padding-left:24px}.best-price{font-size:52px;line-height:1.15;letter-spacing:-2px;color:#00834b;font-weight:750;white-space:nowrap}.best-price small{font-size:24px;font-weight:650;color:inherit}.best-pick .fill-saving{background:transparent;margin:4px 0 0;padding:0}.best-pick .fill-saving strong{font-size:18px;color:#00834b;letter-spacing:-.4px}.best-pick .fill-saving span{font-size:11px;color:var(--muted)}.best-route{background:var(--accent);border-radius:13px;font-size:15px;min-height:52px}.route:hover{filter:brightness(.94)}
.results-heading{margin:24px 0 9px}.sort-wrap label{display:none}.comparison-note{font-size:11px;margin-bottom:9px}.list-columns,.station.compact-station{grid-template-columns:minmax(0,1.9fr) .7fr 1fr .85fr .95fr 44px;gap:16px}.list-columns{background:#f5f8fb;border:1px solid var(--border);border-radius:12px 12px 0 0;padding:12px 20px;font-size:11px}.list-columns span:nth-child(n){text-align:left}.list-columns span:nth-child(4),.list-columns span:nth-child(5){text-align:right}.station-list{gap:0;border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;overflow:hidden}.station.compact-station{border:0;border-radius:0;padding:18px 20px;transition:background .15s}.station.compact-station+.station{border-top:1px solid var(--border)}.station.compact-station:hover{background:#fafcff}.station-info{position:relative;padding-left:39px}.station-info:before{content:'⛽';position:absolute;left:0;top:0;width:30px;height:34px;display:grid;place-items:center;background:#edf3f9;border-radius:10px;font-size:18px}.station h3{font-size:14px;line-height:1.3}.station-location{font-size:11px}.station-distance{text-align:left;color:var(--muted)}.station-meta{margin:0;font-size:11px;line-height:1.4}.station.compact-station .station-price{font-size:23px;font-weight:750}.station-price small{color:var(--text);font-weight:600}.station-saving{font-size:17px;color:#00834b}.compact-station .route{border-radius:12px;padding:0;min-height:44px;font-size:23px;background:#edf5ff}.load-more{border:0;border-radius:10px;margin:14px auto;background:transparent;font-size:13px}.seo-guide{margin-top:35px}.guide-grid section,.seo-faq{background:#f6f8fb}.saving-tip{background:#f0faf4}.method{font-size:11px}.status.error{color:#b43f36}footer{font-size:11px}.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.menu-toggle:focus-visible{outline:3px solid #80b9ff;outline-offset:3px}
@media(max-width:1000px) and (min-width:701px){.wrap{margin:12px;padding:0 24px 24px}.brand{font-size:20px}.brand-promise{display:none}.site-links{gap:18px}.best-pick{grid-template-columns:1fr 1fr}.best-route{grid-column:2}.best-price{font-size:42px}.list-columns,.station.compact-station{gap:10px;grid-template-columns:1.6fr .65fr .9fr .85fr .85fr 44px}.station-info{padding-left:0}.station-info:before{display:none}}
@media(max-width:700px){body{background:white}.wrap{margin:0;padding:0 20px 24px;border-radius:0;box-shadow:none}.topbar{min-height:82px;flex-wrap:wrap;padding:14px 0;gap:0;justify-content:space-between}.brand{font-size:20px;letter-spacing:-.8px}.brand .brand-icon,.brand .brand-icon svg{width:32px;height:38px}.brand-promise{display:none}.menu-toggle{display:block;border:0;background:transparent;color:var(--text);font-size:24px;width:44px;height:44px}.site-links{display:none;flex-basis:100%;padding-top:12px;gap:24px}.site-links.is-open{display:flex}.hero,.has-results .hero{text-align:left;padding:25px 0 18px}.hero h1,.has-results .hero h1{font-size:34px;letter-spacing:-1.3px;max-width:340px;line-height:1.04}.hero p,.has-results .hero p{font-size:16px;line-height:1.25;max-width:340px;margin:0}.panel{padding:0}.controls-row{grid-template-columns:minmax(0,1fr) 48px;gap:8px}.controls-row .address-field{grid-column:1;grid-row:1}.controls-row .search-action{grid-column:2;grid-row:1}.controls-row .search-action .btn{font-size:0;padding:0;min-height:48px;height:48px}.controls-row .search-action .btn:after{content:'→';font-size:23px}.controls-row .location-action{grid-column:1/-1;grid-row:2}.location-action .location-btn{background:var(--accent);color:white;border:0;min-height:46px;height:46px;border-radius:12px}.location-action .location-btn:hover{background:#005bdc}.controls input[type=text]{height:48px;font-size:15px;border-radius:12px}.geo-row .status{font-size:10px}.location-info{font-size:11px}.location-info .location-accuracy{font-size:10px}#results{margin-top:14px!important}#results>.results-heading:first-child,#nationalStats>.results-heading{padding:13px 14px 0;border-radius:14px 14px 0 0}#results>.results-heading:first-child h2,#nationalStats>.results-heading h2{font-size:14px}#results>.results-heading:first-child>span,#nationalStats>.results-heading>span{display:none}.summary{padding:12px 0 16px;border-radius:0 0 14px 14px}.metric{padding:0 7px}.metric-label{font-size:11px}.metric-value{font-size:26px;letter-spacing:-1px}.metric-value small{display:block;font-size:11px;margin-top:0}.scope{font-size:10px;margin:7px 2px 12px}.best-pick{display:flex;flex-direction:column;align-items:stretch;padding:15px;border-radius:15px;gap:10px;margin:12px 0 20px}.best-label{font-size:10px;margin-bottom:8px}.best-pick h2{font-size:17px}.best-pick p{font-size:11px}.best-distance{font-size:11px}.best-action{padding:0;border:0}.best-price{font-size:46px;letter-spacing:-1.6px}.best-price small{font-size:23px}.best-pick .fill-saving strong{font-size:17px}.best-pick .fill-saving span{font-size:10px}.best-route{min-height:46px;font-size:14px;border-radius:10px}.results-heading h2{font-size:16px}.results-heading h2 span{font-size:11px}.sort-wrap select{height:36px;font-size:11px;padding:6px 8px;max-width:135px}.comparison-note{font-size:10px}.list-columns{display:none}.station-list{border:0;border-top:1px solid var(--border);border-radius:0}.station.compact-station{position:relative;grid-template-columns:minmax(0,1fr) 94px 32px;gap:3px 8px;padding:14px 0}.compact-station .station-info{grid-column:1;grid-row:1;padding-left:30px}.station-info:before{width:24px;height:30px;font-size:16px;border-radius:8px}.station h3{font-size:12px}.station-location{font-size:10px}.station.compact-station .station-price{grid-column:2;grid-row:1;font-size:19px;align-self:start}.station-price small{display:inline;font-size:9px}.compact-station .station-saving{grid-column:2;grid-row:2;text-align:right;font-size:13px;align-self:start}.compact-station .station-distance{grid-column:1;grid-row:2;font-size:10px;padding-left:30px}.compact-station .station-meta{grid-column:1/3;grid-row:3;font-size:10px;padding-left:30px}.compact-station>.route{grid-column:3;grid-row:1/4;min-height:44px;min-width:32px;background:transparent;font-size:20px;color:var(--muted)}.mobile-caption{display:none}.seo-guide h2{font-size:21px}.guide-grid{grid-template-columns:1fr}footer{flex-direction:column}.unavailable-row{grid-template-columns:1fr auto}.unavailable-row .route{grid-column:1/-1}.load-more{font-size:12px}.best-pick,.station-list{animation:appear .25s ease both}}
@media(max-width:370px){.wrap{padding-left:14px;padding-right:14px}.brand{font-size:18px}.hero h1,.has-results .hero h1{font-size:31px}.metric-value{font-size:24px}}

.station-info:before{content:"";background:#edf3f9 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23223a55%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%206h4v4H7zM3%2021h12M14%2011h2a2%202%200%200%201%202%202v4a2%202%200%200%200%204%200V9l-4-4M20%207v4h2%22%2F%3E%3C%2Fsvg%3E") center/21px no-repeat}.best-pick>div:first-child{position:relative;padding-left:48px}.best-pick>div:first-child:before{content:"";position:absolute;left:0;top:45px;width:38px;height:46px;border-radius:14px;background:#e5eff4 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23223a55%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%206h4v4H7zM3%2021h12M14%2011h2a2%202%200%200%201%202%202v4a2%202%200%200%200%204%200V9l-4-4M20%207v4h2%22%2F%3E%3C%2Fsvg%3E") center/25px no-repeat}.best-label{margin-left:-48px}.best-pick>div:first-child h2{margin-top:6px}@media(max-width:700px){.best-pick>div:first-child{padding-left:43px}.best-label{margin-left:-43px}.best-pick>div:first-child:before{width:34px;height:40px;top:40px}}

/* Shared visual identity across all three pages. */
:root{--text:#101627;--muted:#596981;--border:#e5ebf2;--accent:#006aff;--accent-2:#00864c}
body{background:#eff2f7;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}.wrap{max-width:1200px;margin:26px auto;background:white;border-radius:26px;padding:0 32px 30px;box-shadow:0 14px 55px #2034580c}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:94px;padding:18px 4px;gap:24px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-1px;white-space:nowrap}.brand .brand-icon{display:block;width:43px;height:51px;flex:0 0 43px;background:transparent;border-radius:0}.brand .brand-icon svg{display:block;width:43px;height:51px}.brand-wordmark{color:var(--text)}.brand-name-accent{color:inherit}.brand-domain{color:var(--accent)}.brand-promise{font-size:11px;color:var(--muted);line-height:1.5}.site-links{display:flex;gap:28px;flex-wrap:wrap}.site-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none;color:var(--muted);padding:12px 0}.site-links a[aria-current]{color:var(--accent);border-bottom:2px solid var(--accent);font-weight:650}.menu-toggle{display:none}.site-footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--border);padding-top:24px;margin-top:32px;color:var(--muted);font-size:11px;line-height:1.8}.site-footer strong{font-size:13px;color:var(--text)}.site-footer span,.site-footer small{display:block}.site-footer small{font-size:10px}.site-footer nav{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.site-footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.dept:focus-visible{outline:3px solid #80b9ff;outline-offset:3px}
@media(max-width:1000px) and (min-width:701px){.wrap{margin:12px;padding:0 24px 24px}.brand{font-size:20px}.brand-promise{display:none}.site-links{gap:18px}}
@media(max-width:700px){body{background:white}.wrap{margin:0;padding:0 20px 24px;border-radius:0;box-shadow:none}.topbar{min-height:82px;flex-wrap:wrap;padding:14px 0;gap:0;justify-content:space-between}.brand{font-size:20px;letter-spacing:-.8px;gap:10px}.brand .brand-icon{width:32px;height:38px;flex-basis:32px}.brand .brand-icon svg{width:32px;height:38px}.brand-promise{display:none}.menu-toggle{display:block;border:0;background:transparent;color:var(--text);font-size:24px;width:44px;height:44px;cursor:pointer}.site-links{display:none;flex-basis:100%;padding-top:12px;gap:24px}.site-links.is-open{display:flex}.site-footer{flex-direction:column;gap:8px}.site-footer nav{gap:22px}}
@media(max-width:370px){.wrap{padding-left:14px;padding-right:14px}.brand{font-size:18px}}
.seo-context{margin:30px 0;padding:24px;background:#f6f8fb;border:1px solid #e5ebf2;border-radius:18px}.seo-context h2{font-size:22px;letter-spacing:-.5px;line-height:1.25;margin:0 0 14px}.seo-context h3{font-size:16px;margin:20px 0 8px}.seo-context p,.seo-context li{font-size:14px;line-height:1.8;color:#596981}.seo-context details{border-top:1px solid #e5ebf2}.seo-context summary{cursor:pointer;padding:16px 0;font-size:14px;font-weight:600}.seo-context .table-scroll{overflow:auto}.seo-context table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.seo-context th,.seo-context td{padding:12px;text-align:right;border-bottom:1px solid #e5ebf2}.seo-context th:first-child,.seo-context td:first-child{text-align:left}.seo-context caption{text-align:left;padding:10px 0;color:#596981;font-size:12px}.related-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.related-links a{padding:12px 16px;border-radius:12px;background:white;border:1px solid #d8e2ef;text-decoration:none;font-size:13px}.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#596981;margin:20px 0 0}.breadcrumb a{text-decoration:none}.hero .seo-subtitle{font-size:18px;font-weight:400;letter-spacing:0;line-height:1.5;color:#596981;margin:0 auto;max-width:none}.hero .brand-headline{font-size:clamp(32px,3.6vw,45px);letter-spacing:-1.8px;font-weight:700;color:#101627;line-height:1.1;margin:0 0 10px;max-width:none}@media(max-width:700px){.seo-context{padding:17px;border-radius:15px}.seo-context h2{font-size:20px}.seo-context p,.seo-context li{font-size:13px}.related-links{flex-direction:column}.hero .seo-subtitle{font-size:16px;text-align:left;line-height:1.25}.hero .brand-headline{font-size:34px;letter-spacing:-1.3px;max-width:340px}.breadcrumb{font-size:11px}.seo-context th,.seo-context td{padding:10px 8px}}.has-results .hero h1.seo-subtitle{font-size:18px;font-weight:400;letter-spacing:0;line-height:1.5;margin:0}@media(max-width:700px){.has-results .hero h1.seo-subtitle{font-size:16px;line-height:1.25}.hero .brand-headline{margin-left:0}}

/* Colour identity: navy, turquoise, emerald and pastel indicators. */
:root{--text:#09234b;--muted:#496482;--accent:#006aff;--accent-2:#008052;--border:#dce9f3}
body{background:#e8eff6;color:var(--text)}.wrap{background:#f0f8ff;box-shadow:0 16px 50px #102c5517;overflow:clip}.topbar{background:#102f53;color:#fff;margin:0 -32px;padding:20px 32px;border:0}.brand-wordmark,.brand-name-accent{color:#fff}.brand-domain{color:#62edb0}.site-links a{color:#e8f3ff}.site-links a[aria-current]{color:#fff;border-bottom-color:#37e4c5}.site-links a:hover{color:#65efce}.brand-promise{color:#c6d9ed}.hero,.page-hero{background:radial-gradient(ellipse at 95% 30%,#d5f5fa80,transparent 60%)}.hero .brand-headline,header h1,.hero h1,.has-results .hero h1{color:#08214b}.hero p,.hero .seo-subtitle,.has-results .hero h1.seo-subtitle{color:#435d7e}.panel{background:transparent}.controls input[type=text]{border-color:#cbdff0;box-shadow:0 3px 10px #143b6510}.location-action .location-btn{background:#20dfc0;border:1px solid #20dfc0;color:#062b3b;font-weight:700}.location-action .location-btn:hover{background:#39ebce;color:#062b3b}.location-action .location-btn.is-locating:disabled{background:#baf6e9;color:#073a49}.location-info{background:#e0f8ed;border:1px solid #b6e9d3;color:#145b46}.location-info a{color:#075e57}.btn:hover{background:#005bd7}.status.ok{color:#126343}
#results>.results-heading:first-child,#nationalStats>.results-heading{background:transparent;padding:6px 0 10px}.summary{background:transparent;gap:14px;padding:0;overflow:visible;border-radius:0}.metric{position:relative;background:#e1f2ff;border:1px solid #d2e8fb;border-radius:14px;padding:19px 16px;text-align:center}.metric+.metric{border-left:1px solid #d2e8fb}.metric.minimum,.metrics .metric:first-child{background:#dff8ee;border-color:#c7efdf}.summary .metric:last-child,.metrics .metric:last-child{background:#eee8ff;border-color:#e0d5fa}.metric-label,.metric span{color:#254665}.metric.minimum .metric-label{color:#086449}.metric-value,.metric.minimum .metric-value{color:#08214b}.summary .metric:last-child .metric-label{color:#593598}.metric-value small{color:inherit}.metric-label:before{display:inline-block;margin-right:6px;font-weight:750}.metric.minimum .metric-label:before{content:'↓';color:#00865c}.summary .metric:nth-child(2) .metric-label:before{content:'≈';color:#006aff}.summary .metric:nth-child(3) .metric-label:before{content:'↑';color:#653eb3}
.best-pick{background:linear-gradient(115deg,#005365,#00816f);border:1px solid #087867;box-shadow:0 8px 25px #00625612}.best-label{background:#8af5b5;color:#053d31}.best-pick h2,.best-price,.best-price small{color:white}.best-pick p,.best-distance,.best-distance small{color:#ddf6f5}.best-pick .stale{color:#ffe1a0}.best-action{border-color:#ffffff30}.best-pick .fill-saving strong{color:#8af5b5}.best-pick .fill-saving span{color:#d6f3f1}.best-route,.best-route:hover{background:#fff;color:#102c55;box-shadow:0 3px 12px #00344e12}.best-pick>div:first-child:before{background-color:#daf9ed}.station-list{background:#fff;border:1px solid #dbe8f4;border-radius:14px;box-shadow:0 5px 20px #133f6510}.list-columns{background:#e9f3fb}.station.compact-station{background:white}.station.compact-station:hover{background:#f5fbff}.station-info:before{background-color:#cdf5e7;border-radius:50%}.station:nth-child(3n+2) .station-info:before{background-color:#d8ecff}.station:nth-child(3n) .station-info:before{background-color:#ede5ff}.station-saving{color:#00784d}.compact-station .route{background:#e0efff;color:#006aff}.scope,.comparison-note,.station-meta,.station-distance,.station-location{color:#496482}.load-more{background:transparent}.seo-guide{border-color:#d6e6f1}.guide-grid section,.seo-faq,.seo-context,.panel.method,.method{background:#fff;border-color:#dce9f3}.saving-tip{background:#ddf6ea}.related-links a{background:#eef7ff}.tag{background:#d6eaff;color:#0756a7}.site-footer{background:#102f53;margin:32px -32px -30px;padding:24px 32px;color:#c6d9ed;border:0}.site-footer strong{color:white}.site-footer a{color:#e4f2ff}.site-footer a:hover{color:#65efce}.menu-toggle{color:#fff}
/* Map and history retain the same colour meanings. */
.map-panel,.table-panel,.panel:not(.method){background:white;border-color:#d8e7f4}.tools{background:#dfefff}.detail{background:linear-gradient(125deg,#e1f8ee,#e4f4fc);border-color:#b9e4d4}.metrics{background:transparent;gap:8px;overflow:visible}.metrics .metric{border-radius:12px}.metrics .metric.mean{background:#e1f2ff}.metrics .metric strong{color:#102c55}.eyebrow{background:#bdf1d9;color:#065838}.hint{background:#e1efff;color:#335775}.cards{background:transparent;padding:0;gap:12px;overflow:visible}.card{background:#e2f0ff;padding:20px;border:1px solid #d3e4f7;border-radius:15px}.card+.card{border-left:1px solid #d3e4f7}.card.latest{background:#102f53;border-color:#102f53}.card.latest strong{color:white}.card.latest .label,.card.latest .sub{color:#dcecff}.card:nth-child(3){background:#dff8ee;border-color:#c7efdf}.card:nth-child(4){background:#eee8ff;border-color:#e0d5fa}.card .label,.card .sub{color:#496482}.periods{background:#e8f2fc}.button.secondary{background:#e4f0ff;color:#064ca4}.button.secondary:hover{background:#d7e8ff}.point-readout{background:#dff7f0;color:#075b49}.chart-tooltip{background:#102f53}.table-scroll th{background:#edf5fc}.breadcrumb{color:#496482}
@media(max-width:1000px) and (min-width:701px){.topbar{margin:0 -24px;padding:18px 24px}.site-footer{margin:32px -24px -24px;padding:24px}.card{padding:16px}}
@media(max-width:700px){body,.wrap{background:#f0f8ff}.topbar{margin:0 -20px;padding:14px 20px}.menu-toggle{color:white}.site-links a{color:#e8f3ff}.site-footer{margin:28px -20px -24px;padding:22px 20px}.hero .brand-headline{color:#08214b}.location-action .location-btn{background:#20dfc0;color:#062b3b}.location-action .location-btn:hover{background:#39ebce;color:#062b3b}.summary{gap:7px;padding:0}.metric{padding:13px 5px;border-radius:12px}.metric-label{font-size:10px}.metric-label:before{margin-right:3px}.metric-value{font-size:25px}.metric-value small{font-size:10px}.best-pick{background:linear-gradient(125deg,#006761,#004b60)}.best-price{color:white}.best-pick .fill-saving strong{color:#8af5b5}.station.compact-station{padding:14px 10px}.compact-station>.route{background:#e4f1ff;color:#006aff;border-radius:50%;min-height:36px}.station-list{border-radius:13px}.cards{gap:8px}.card{padding:15px}.card:nth-child(n+3){border-top:1px solid #d3e4f7}.card:nth-child(3){border-color:#c7efdf}.card:nth-child(4){border-color:#e0d5fa}.metrics{gap:6px}.metrics .metric{padding:12px 5px}.metrics .metric strong{font-size:21px}.metrics .metric span{font-size:10px}}
@media(max-width:370px){.topbar{margin:0 -14px;padding-left:14px;padding-right:14px}.site-footer{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}.metric-value{font-size:23px}.metric-label{font-size:9px}}

/* Embedded decorative village, no extra asset request. */
:root{--village-art:url("village.c106b5e551d4.webp")}
.hero,.page-hero{position:relative;isolation:isolate;background:none!important;overflow:hidden;border-radius:0 0 18px 18px;min-height:185px}
.hero:before,.page-hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#f0f8ff 0%,#f0f8ffed 38%,#f0f8ff22 76%),var(--village-art);background-repeat:no-repeat;background-position:center,right 62%;background-size:100% 100%,650px auto;opacity:.85}
.hero>*,.page-hero>*{position:relative}.hero h1,.hero .brand-headline,.page-hero h1{text-shadow:0 1px 10px #f0f8ff}.hero p,.page-hero p{text-shadow:0 1px 8px #f0f8ff}.has-results .hero{min-height:175px}
@media(max-width:700px){.hero,.page-hero,.has-results .hero{min-height:190px}.hero:before,.page-hero:before{background-size:100% 100%,390px auto;background-position:center,right bottom;opacity:.32;background-image:linear-gradient(90deg,#f0f8ff 0%,#f0f8ffbb 45%,#f0f8ff22 100%),var(--village-art)}}

/* Barre de recherche : des commandes lisibles sans bandeau extérieur. */
#comparateur .search-panel{background:transparent;border:0;box-shadow:none;border-radius:0;padding:8px 0 12px}
.search-panel .controls{width:100%;max-width:880px}
.search-panel .address-icon{position:absolute;left:16px;top:27px;transform:translateY(-50%);color:#537395;pointer-events:none}
.search-panel .controls input[type=text]{padding-left:46px;box-shadow:0 3px 12px #143c6410}
.search-panel .controls input::placeholder{color:#62758b;opacity:1}
.search-panel .controls-row .btn{font-size:15px;font-weight:700}
.search-panel .geo-row{padding-top:0;border-top:0}
.search-panel .geo-row:has(.status:empty){display:none}
@media(max-width:700px){
  #comparateur .search-panel{padding:6px 0 8px}
  .search-panel .address-icon{left:12px;top:24px;width:18px;height:18px}
  .search-panel .controls input[type=text]{padding-left:37px;padding-right:10px;font-size:14px}
  .search-panel .controls-row .search-action .btn{font-size:0}
  .search-panel .controls-row .location-action .btn{font-size:15px;min-height:48px;height:48px}
}



/* Même titre avant et après une recherche : priorité sur les anciens styles de résultats. */
header.village-hero .hero-copy .brand-headline,
.has-results header.village-hero .hero-copy .brand-headline{display:block;font-size:clamp(32px,3.6vw,45px);font-weight:700;line-height:1.1;letter-spacing:-1.8px;color:#08214b;margin:0 0 10px;max-width:none}
@media(max-width:700px){
 header.village-hero .hero-copy .brand-headline,
 .has-results header.village-hero .hero-copy .brand-headline{font-size:26px;line-height:1.12;letter-spacing:-.7px;margin:0 0 8px}
}


/* Filet d'information national : une seule ligne de 34 px. */
#nationalStats.national-ticker{position:relative;margin:10px 0 18px;padding:0;border:0;border-radius:0;background:#e6f0f8;border-bottom:1px solid #d5e5ef}
#nationalStats .national-bar{display:flex;align-items:center;height:34px;gap:0;padding-right:68px}
#nationalStats #nationalTitle{display:flex;align-items:center;align-self:stretch;flex-shrink:0;margin:0;padding:0 12px;border-bottom:3px solid #20dfc0;background:#102f53;color:white;font-size:10px;font-weight:750;letter-spacing:.7px;line-height:1;white-space:nowrap}
#nationalStats .national-window{min-width:0;flex:1;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:auto;padding:0 14px}
#nationalStats .national-window::-webkit-scrollbar{display:none}
#nationalStats .national-values{display:flex;align-items:center;gap:20px;width:max-content;min-height:32px;white-space:nowrap}
#nationalStats .national-fuel{font-size:11px;color:#496482}
#nationalStats .national-value{display:flex;align-items:baseline;gap:5px;font-size:11px;color:#496482;white-space:nowrap}
#nationalStats .national-value:before{content:'·';margin-right:12px;color:#6c8ba2}
#nationalStats .national-value strong{font-size:14px;font-weight:600;color:#284c6d;font-variant-numeric:tabular-nums}
#nationalStats .national-mean strong{font-weight:800;color:#082e58}
#nationalStats .national-value small{font-size:10px}
#nationalStats .national-details{margin:0;padding:0;border:0;background:none}
#nationalStats .national-details>summary,#nationalStats .national-pause{position:absolute;top:0;right:0;display:grid;place-items:center;width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#e6f0f8;color:#345f80;cursor:pointer;font-size:17px;list-style:none}
#nationalStats .national-details>summary::-webkit-details-marker{display:none}
#nationalStats .national-pause{right:34px;font-size:12px}
#nationalStats .national-pause[hidden]{display:none}
#nationalStats .national-explanation{padding:10px 14px;border-top:1px solid #d5e5ef;background:#f5faff}
#nationalStats .national-explanation p,#nationalStats .scope{margin:6px 0;color:#496482;font-size:11px;line-height:1.6}
@media(max-width:700px){#nationalStats #nationalTitle{padding:0 9px;font-size:9px;letter-spacing:.4px}#nationalStats .national-window{padding:0 10px}#nationalStats .national-values{gap:16px}}