/* Petrol Tracker — a fuel price tool, search first. Cleaner and more app like than
   the editorial family look, keeping the family fonts and the accessibility rules
   (light theme, transform only motion, no monospace, labels 13px+ sentence case). */

:root{
  --bg:#FFFFFF; --band:#EDF2F1; --card:#FFFFFF; --ink:#14201F; --dim:#5A6866;
  --accent:#0C6E7A; --accent-deep:#08525C; --accent-bright:#0E8695;
  --line:#E1E7E6; --line-strong:#CBD5D3; --radius:18px;
  --good:#1F9D57; --good-bg:#E4F5EC; --good-ink:#14663A;
  --mid:#C07A08;  --mid-bg:#FBF1DC;  --mid-ink:#7A4E05;
  --bad:#C43D2E;  --bad-bg:#FBE7E4;  --bad-ink:#8A281D;
  --f-head:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
img{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
h1,h2,h3{font-family:var(--f-head);line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(28px,5vw,42px);font-weight:800;max-width:16ch}
h2{font-size:clamp(21px,3.4vw,28px);font-weight:700;margin:0 0 12px}
h3{font-size:18px;font-weight:600}
p{max-width:66ch}
ul{padding-left:22px;max-width:66ch}
li{margin:6px 0}
strong{font-weight:600}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 12px 0;z-index:50}
.skip:focus{left:0}

/* header */
.top{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:16px}
.brand{font-family:var(--f-head);font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.brandmark{width:15px;height:15px;border-radius:5px;background:var(--accent);display:inline-block}
.dnav{display:flex;gap:2px;flex-wrap:wrap}
.dnav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:9px 12px;border-radius:10px}
.dnav a:hover{background:var(--band)}
.dnav a[aria-current]{background:var(--accent);color:#fff}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-weight:600;font-size:15px;border:1.5px solid var(--line-strong);border-radius:10px;padding:9px 16px;min-height:40px;display:flex;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.mnav nav{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(20,32,31,.14);padding:8px;display:flex;flex-direction:column;min-width:210px;z-index:30}
.mnav nav a{color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:10px;font-size:16px}
.mnav nav a:hover{background:var(--band)}
.mnav nav a[aria-current]{background:var(--band);font-weight:600}

/* hero: search first */
.tool{background:linear-gradient(180deg,#F3F7F6 0%,#FFFFFF 100%);border-bottom:1px solid var(--line);padding:34px 0 40px}
.kicker{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--accent);margin-bottom:8px}
.tool h1{margin-bottom:10px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:var(--dim);font-size:14.5px;margin:0 0 18px}
.trust b{color:var(--ink);font-weight:600}
.trust .tdot{width:5px;height:5px;border-radius:50%;background:var(--line-strong);display:inline-block}

.searchcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px rgba(20,32,31,.07);padding:18px}
.searchrow{display:flex;gap:10px;flex-wrap:wrap}
.pcwrap{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line-strong);border-radius:12px;padding:0 14px;background:var(--bg)}
.pcwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,110,122,.14)}
.pcwrap svg{flex:0 0 auto;color:var(--dim)}
#pcode{flex:1;border:none;background:none;font-family:var(--f-head);font-weight:600;font-size:19px;padding:13px 0;color:var(--ink);min-width:0}
#pcode:focus{outline:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-family:var(--f-head);font-weight:600;font-size:16.5px;border:none;border-radius:12px;padding:13px 22px;min-height:50px;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn.ghost:hover{background:var(--band);color:var(--ink)}
.btn.small{min-height:40px;padding:8px 14px;font-size:15px}

/* fuel type + sort chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips .clabel{align-self:center;font-size:13.5px;color:var(--dim);margin-right:2px}
.chip-btn{border:1.5px solid var(--line-strong);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 15px;font-size:14.5px;font-weight:600;cursor:pointer;min-height:40px}
.chip-btn:hover{border-color:var(--accent)}
.chip-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip-btn input{position:absolute;opacity:0;width:0;height:0}

.banner{margin-top:14px;background:var(--mid-bg);border:1px solid #EAD4A0;color:var(--mid-ink);border-radius:12px;padding:11px 14px;font-size:14.5px}
.searchnote{color:var(--dim);font-size:13.5px;margin-top:12px}

/* results */
.results{margin-top:18px}
.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.results-head h2{margin:0;font-size:19px}
.results-head .sub{color:var(--dim);font-size:14px}
.station{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:9px}
.station.top{border-color:var(--good);box-shadow:0 0 0 1px var(--good) inset}
.pricepill{flex:0 0 auto;min-width:88px;text-align:center;border-radius:12px;padding:9px 8px}
.pricepill .pv{font-family:var(--f-head);font-weight:800;font-size:22px;line-height:1}
.pricepill .pu{font-size:12px;font-weight:600;opacity:.8}
.pricepill.g{background:var(--good-bg);color:var(--good-ink)}
.pricepill.m{background:var(--mid-bg);color:var(--mid-ink)}
.pricepill.b{background:var(--bad-bg);color:var(--bad-ink)}
.st-main{flex:1;min-width:0}
.st-name{font-weight:600;font-size:16px}
.st-name .tag{font-family:var(--f-head);font-size:12px;font-weight:700;color:var(--good-ink);background:var(--good-bg);border-radius:999px;padding:2px 9px;margin-left:7px;vertical-align:middle}
.st-meta{color:var(--dim);font-size:13.5px;margin-top:2px}
.st-fresh{flex:0 0 auto;text-align:right;font-size:12.5px;color:var(--dim);white-space:nowrap}
.fdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.fdot.fresh{background:var(--good)}.fdot.ok{background:var(--mid)}.fdot.stale{background:var(--bad)}
.msg{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.msg h3{margin-bottom:6px}
.msg p{font-size:15px;color:var(--dim);margin-top:6px}

/* national strip */
.strip{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding:16px 20px}
.strip .st{display:flex;align-items:baseline;gap:8px}
.strip .sv{font-family:var(--f-head);font-weight:800;font-size:22px}
.strip .sl{font-size:14px;color:var(--dim)}
.strip .src{margin-left:auto;display:inline-block;padding:10px 0}

/* generic sections */
.band{background:var(--band)}
.section{padding:38px 0}
.note{color:var(--dim);font-size:15px;margin-top:14px}
.dim{color:var(--dim);font-size:14px}
.lede{font-size:18px;margin-top:12px}
.hero{padding:40px 0 30px}
.hero.band{background:var(--band)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 6px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.stat-big{font-family:var(--f-head);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.05}
.stat-label{font-weight:600;font-size:15.5px;margin-top:6px}
.stat-sub{color:var(--dim);font-size:13.5px;margin-top:4px}

.cardlink{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--ink);transition:border-color .12s ease,transform .12s ease}
.cardlink:hover{border-color:var(--accent);transform:translateY(-1px);color:var(--ink)}
.cardlink h3{color:var(--accent-deep)}
.cardlink p{color:var(--dim);font-size:15px;margin-top:6px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}

/* tables + folds */
.thint{display:none;color:var(--dim);font-size:13.5px;margin:10px 0 -6px}
.twrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;margin:14px 0}
.twrap:focus{outline:2.5px solid var(--accent)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
th{font-family:var(--f-head);font-weight:600;text-align:left;font-size:13.5px;color:var(--dim);border-bottom:1.5px solid var(--line);padding:13px 15px}
td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
.fold{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:12px 0;max-width:760px}
.fold summary{list-style:none;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:16px;padding:15px 46px 15px 18px;position:relative;min-height:48px;display:flex;align-items:center}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.fold[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.fold-body{padding:0 18px 16px}
.fold-body p{margin-top:10px}
.chip{display:inline-block;border-radius:999px;padding:3px 11px;font-size:13.5px;font-weight:600}
.chip.warn{background:var(--mid-bg);color:var(--mid-ink)}
.chip.next{background:var(--good-bg);color:var(--good-ink)}
.chip.dim2{background:var(--band);color:var(--dim)}
.src{font-size:14px;color:var(--accent);white-space:nowrap}

/* footer */
.foot{background:var(--ink);color:#D7DEDD;margin-top:36px;padding:36px 0 42px}
.foot a{color:#fff}
.foot-strap{font-family:var(--f-head);font-weight:600;font-size:17px;max-width:46ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0}
.foot-nav a{font-size:15px;text-decoration:none;padding:8px 0;display:inline-block}
.foot-nav a:hover{text-decoration:underline}
.foot .small{font-size:13.5px;color:#9FABA9;max-width:76ch;margin-top:10px}
.foot .small a{color:#D7DEDD}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}

@media (max-width:820px){ .thint{display:block} }
@media (max-width:640px){
  .dnav{display:none}
  .mnav{display:block}
  .searchrow{flex-direction:column}
  .btn.block-m{width:100%}
  .station{flex-wrap:wrap}
  .st-fresh{flex-basis:100%;text-align:left;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.cardlink,.fold summary::after{transition:none}
  .btn:hover,.cardlink:hover{transform:none}
}

/* v2: live search, hero grid, pills, legend, dark mode */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr);gap:22px 40px;align-items:end;margin-bottom:18px}
.tool h1{max-width:18ch;margin-bottom:14px}
.pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.pills li{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 10px;font-size:14px;color:var(--dim);margin:0}
.pills li b{color:var(--ink);font-weight:600}
.pills svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto}
.legend{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.legend-t{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--accent);margin-bottom:10px}
.legend p{font-size:14px;color:var(--dim);margin-top:10px;max-width:none}
.scale{display:flex;gap:4px}
.sc{flex:1;text-align:center;font-family:var(--f-head);font-weight:700;font-size:12.5px;padding:7px 4px;border-radius:8px}
.sc.g{background:var(--good-bg);color:var(--good-ink)}.sc.m{background:var(--mid-bg);color:var(--mid-ink)}.sc.b{background:var(--bad-bg);color:var(--bad-ink)}
.chips.tries{margin-top:10px}
.chip-btn.small{min-height:34px;padding:5px 12px;font-size:13.5px;font-weight:500}
.chips.tries .chip-btn{border-style:dashed}
.brandmark{width:22px;height:22px;border-radius:7px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.brandmark svg{width:14px;height:14px}
.st-name .tag.dim{background:var(--band);color:var(--dim)}
.st-name .tag.warn{background:var(--mid-bg);color:var(--mid-ink)}
.st-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.st-fresh{font-size:12.5px;color:var(--dim);white-space:nowrap}
.st-map{font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--line-strong);border-radius:8px;padding:3px 10px;color:var(--accent)}
.st-map:hover{background:var(--band)}
.strip .rng{display:block;font-size:12.5px;color:var(--dim)}
.strip .st{align-items:flex-start}
.strip .sv{line-height:1.1;padding-top:2px}
.fold.wide{max-width:none}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:16px}
  .legend{display:none}
}
@media (max-width:640px){
  .st-side{flex-basis:100%;flex-direction:row;justify-content:space-between;align-items:center;margin-top:6px}
}
/* dark mode follows the device setting; same accents, deeper surfaces */

#fresult{scroll-margin-top:72px}
@media (max-width:640px){
  .station{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
  .pricepill{min-width:76px;padding:8px 6px}
  .pricepill .pv{font-size:20px}
  .st-side{grid-column:1 / -1;flex-basis:auto;width:100%;margin-top:0}
  .st-name{font-size:15.5px}
}

.st-name .tag{display:inline-block;white-space:nowrap;margin-left:4px}
.st-side{min-width:0}
@media (max-width:640px){ .st-fresh{flex:0 1 auto;margin-top:0} .st-map{flex:0 0 auto} }

/* v3: comprehensive home page */
.section h2{max-width:24ch}
.lede{color:var(--ink);max-width:70ch}
.facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;max-width:none}
.facts li{font-size:14.5px;color:var(--dim);margin:0}
.facts b{color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:16px}
.stat-sub{line-height:1.5}
.citytable{min-width:720px}
.citytable td.num,.citytable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.citytable td.num{font-family:var(--f-head);font-weight:700;font-size:16px}
.citytable td{font-size:15px}
.citytable .dim2{display:block;color:var(--dim);font-size:13px;font-weight:400}
.citytable tbody tr:first-child td{background:var(--good-bg)}
.citytable tbody tr:first-child td:first-child{border-left:4px solid var(--good)}
.litrebar{display:flex;height:64px;border-radius:12px;overflow:hidden;margin-top:18px;font-size:13px;color:#fff}
.lb{display:flex;flex-direction:column;justify-content:center;padding:0 12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb b{font-family:var(--f-head);font-size:17px;display:block}
.lb.duty{background:#5B6B69}.lb.vat{background:#7C8D8B}.lb.rest{background:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0 24px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px;position:relative}
.stepn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--f-head);font-weight:700;margin-bottom:10px}
.step h3{margin-bottom:6px}
.step p{font-size:15px;color:var(--dim)}
#faq .fold{margin:10px 0}
#faq .fold-body p{font-size:15.5px}
.band .section{padding:38px 0}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band + .band{border-top:none}
@media (max-width:640px){
  .litrebar{height:auto;flex-direction:column}
  .lb{padding:10px 14px;white-space:normal;width:100%!important}
}


.wrap.section{padding-left:20px;padding-right:20px}

.citytable .chip-btn{white-space:nowrap}
.citytable th{white-space:nowrap}
.section h2{max-width:30ch}
@media (max-width:640px){
  .citytable{min-width:0}
  .citytable thead{display:none}
  .citytable tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
  .citytable td{display:block;padding:0;border:none}
  .citytable .c-city{grid-column:1 / -1}
  .citytable td.num{text-align:left}
  .citytable .c-e10::before,.citytable .c-b7::before{display:block;font-size:12px;color:var(--dim);font-family:var(--f-body);font-weight:400}
  .citytable .c-e10::before{content:"Typical petrol"}
  .citytable .c-b7::before{content:"Typical diesel"}
  .citytable .c-low{grid-column:1 / -1;margin-top:4px}
  .citytable .c-low .dim2{display:inline}
  .citytable .c-go{grid-column:1 / -1;margin-top:6px}
  .citytable tbody tr:first-child td:first-child{border-left:none}
  .citytable tbody tr:first-child{border-left:4px solid var(--good)}
  .thint{display:none}
}
@media (max-width:640px){
  .citytable .c-low::before{content:"Cheapest seen";display:block;font-size:12px;color:var(--dim)}
  .citytable tbody tr:first-child{background:var(--good-bg)}
  .citytable tbody tr:first-child td{background:transparent}
}

/* map view */
.fmap{height:460px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--band);margin-bottom:10px;z-index:0}
.toolbar .viewlabel{margin-left:auto}
.pin{background:none;border:none}
.pin span{display:block;font-family:var(--f-head);font-weight:800;font-size:13px;line-height:26px;text-align:center;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.25);border:2px solid #fff;position:relative}
.pin span::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-5px;border:5px solid transparent;border-bottom:none}
.pin-g span{background:#1F9D57;color:#fff}.pin-g span::after{border-top-color:#1F9D57}
.pin-m span{background:#C07A08;color:#fff}.pin-m span::after{border-top-color:#C07A08}
.pin-b span{background:#C43D2E;color:#fff}.pin-b span::after{border-top-color:#C43D2E}
.pin-top span{box-shadow:0 0 0 3px #1F9D57,0 2px 6px rgba(0,0,0,.3)}
.leaflet-popup-content{margin:12px 14px;font-family:var(--f-body);font-size:14px;line-height:1.45}
.pop b{font-size:15px}
.pop-meta{color:#5A6866;font-size:13px;margin:2px 0 6px}
.pop-price{font-family:var(--f-head);font-weight:700;font-size:16px;margin-bottom:8px}
.pop-when{display:block;font-size:12.5px;color:#5A6866;font-weight:500}
.pop .btn.small{min-height:36px;font-size:14px}
.mapnote{margin-top:4px}
@media (max-width:640px){ .fmap{height:380px} .toolbar .viewlabel{margin-left:0} }


.leaflet-container .pop a.btn{color:#fff}

/* sign up: header button, home call to action, alerts form */
.alertbtn{margin-left:8px;color:#fff!important;background:var(--accent)!important;padding:8px 14px!important;border-radius:999px!important}
.alertbtn:hover{background:var(--accent-deep)!important;transform:none}
.menu-cta{font-weight:700;color:var(--accent)!important}
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:24px 40px;align-items:center;background:var(--accent);color:#fff;border-radius:var(--radius);padding:30px 32px;box-shadow:0 12px 34px rgba(12,110,122,.28)}
.cta .kicker{color:#CDEDF1}
.cta h2{color:#fff;max-width:20ch;margin-bottom:8px}
.cta p{color:#E3F3F5;font-size:15.5px}
.cta-form{display:flex;flex-direction:column;gap:10px}
.cta .pcwrap{background:#fff;border-color:transparent}
.cta .pcwrap input{flex:1;border:none;background:none;font-family:var(--f-head);font-weight:600;font-size:17px;padding:12px 0;color:#14201F;min-width:0}
.cta .pcwrap input:focus{outline:none}
.cta .btn{background:#0F2A2D;color:#fff}
.cta .btn:hover{background:#000}
.alertcard{position:relative}
.alertcard .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13.5px;font-weight:600;color:var(--dim)}
.field input,.field select{border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px;font-family:var(--f-body);font-size:16px;color:var(--ink);background:var(--bg);min-height:48px}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,110,122,.14)}
.field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg.good{border-color:var(--good);background:var(--good-bg)}
.msg.good h3{color:var(--good-ink)}
@media (max-width:900px){ .cta{grid-template-columns:1fr;padding:24px 22px} }
@media (max-width:640px){ .alertbtn{display:none} }


/* city pages */
.crumbs{font-size:14px;color:var(--dim);margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--accent);text-decoration:none}
.citychips .chip-btn{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
.citychips .chip-btn:hover{border-color:var(--accent);color:var(--accent)}
.tool .lede{margin-bottom:18px}
.tool h1{max-width:22ch}

/* v7 visual finish: hero glow, alerts card, accent tiles, lifted cards, stronger buttons */
.tool{position:relative;overflow:hidden;background:linear-gradient(180deg,#EAF4F3 0%,#FFFFFF 100%);padding:44px 0 48px}
.tool::before{content:"";position:absolute;right:-160px;top:-220px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(12,110,122,.16) 0%,rgba(12,110,122,0) 65%);pointer-events:none}
.tool::after{content:"";position:absolute;left:-200px;bottom:-260px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(31,157,87,.12) 0%,rgba(31,157,87,0) 65%);pointer-events:none}
.tool .wrap{position:relative}
.kicker{display:inline-flex;align-items:center;gap:8px}
.kicker::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--accent)}
.tool h1{font-size:clamp(34px,5.6vw,54px);letter-spacing:-.02em;line-height:1.06;max-width:16ch;margin-bottom:12px}
.hero-sub{font-size:18px;color:var(--dim);max-width:44ch;margin-bottom:8px}
.hero-grid{align-items:stretch;margin-bottom:20px}
.herocard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 16px;box-shadow:0 16px 40px rgba(12,110,122,.14);overflow:hidden}
.herocard p{font-size:14.5px;color:var(--dim);max-width:none;margin-top:6px}
.herocard .tiny{font-size:12.5px;margin-top:8px}
.herocard .cta-form.mini{margin-top:12px;gap:8px}
.herocard .pcwrap{border-color:var(--line-strong)}
.herocard-pins{display:flex;gap:8px;margin-bottom:6px}
.hp{font-family:var(--f-head);font-weight:800;font-size:13px;color:#fff;border-radius:8px;padding:4px 10px;position:relative;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.hp::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-bottom:none}
.hp.g{background:#1F9D57}.hp.g::after{border-top-color:#1F9D57}
.hp.m{background:#C07A08}.hp.m::after{border-top-color:#C07A08}
.hp.b{background:#C43D2E}.hp.b::after{border-top-color:#C43D2E}
.searchcard{box-shadow:0 18px 48px rgba(20,32,31,.10);border-color:rgba(12,110,122,.18)}
.btn{background:linear-gradient(180deg,var(--accent-bright),var(--accent));box-shadow:0 6px 18px rgba(12,110,122,.28)}
.btn:hover{background:linear-gradient(180deg,var(--accent),var(--accent-deep));box-shadow:0 8px 22px rgba(12,110,122,.34)}
.cta .btn,.stickybar .btn{background:#0F2A2D;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.alertbtn{box-shadow:none!important;background:var(--accent)!important}
.stat{position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}
.statrow .stat:nth-child(2)::before{background:#1F9D57}
.statrow .stat:nth-child(3)::before{background:#C07A08}
.statrow .stat:nth-child(4)::before{background:#C43D2E}
.stat:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,32,31,.08)}
.stat-big{color:var(--accent-deep)}
.step,.fold,.twrap{box-shadow:0 2px 10px rgba(20,32,31,.04)}
.cardlink:hover{box-shadow:0 12px 30px rgba(20,32,31,.10)}
.alertprompt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.9fr);gap:14px 24px;align-items:center;background:linear-gradient(135deg,#0C6E7A,#0E8695);color:#fff;border-radius:14px;padding:18px 20px;margin:6px 0 12px;box-shadow:0 12px 30px rgba(12,110,122,.28)}
.alertprompt .legend-t{color:#CDEDF1;margin-bottom:4px}
.alertprompt p{color:#E3F3F5;font-size:14.5px;max-width:none}
.alertprompt .pcwrap{background:#fff;border-color:transparent}
.alertprompt .pcwrap input{color:#14201F}
.alertprompt .btn{background:#0F2A2D;box-shadow:none}
.cta{background:linear-gradient(135deg,#0C6E7A 0%,#0E8695 60%,#1F9D57 140%)}
.stickybar{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:flex;align-items:center;gap:10px;background:#0F2A2D;color:#fff;border-radius:14px;padding:10px 12px 10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:13.5px;font-weight:600}
.stickybar span{flex:1;line-height:1.3}
.stickybar .btn{background:var(--accent);min-height:36px;padding:6px 12px;font-size:14px;color:#fff}
.sb-x{background:none;border:none;color:#9FB6B3;font-size:22px;line-height:1;cursor:pointer;padding:2px 4px}
.foot-strap{font-size:19px}
@media (max-width:900px){ .herocard{display:none} .tool h1{max-width:14ch} }
@media (max-width:640px){ .alertprompt{grid-template-columns:1fr} .tool{padding:30px 0 34px} }


.cta-form .pcwrap{background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:8px}
.cta-form .pcwrap input{flex:1;border:none;background:none;font-family:var(--f-head);font-weight:600;font-size:16px;padding:11px 0;color:#14201F;min-width:0}
.cta-form .pcwrap input:focus{outline:none}
.cta-form .pcwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,110,122,.14)}
.cta .pcwrap,.alertprompt .pcwrap{border-color:transparent}

/* v8 finish */
.proof{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;margin:18px 0 0;max-width:none}
.proof li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--dim);margin:0}
.proof li b{color:var(--ink);font-weight:700}
.proof svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.tankcost{color:var(--accent-deep);font-weight:600}
.station{transition:transform .12s ease,box-shadow .12s ease}
.station:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,32,31,.08)}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:18px}
.calc-in,.calc-out{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.calc-in .field{max-width:320px}
.calc-in .field input{font-family:var(--f-head);font-weight:700;font-size:22px}
.calc-out{background:linear-gradient(135deg,#0C6E7A,#0E8695);color:#fff;border-color:transparent;display:flex;flex-direction:column;justify-content:center;gap:10px;box-shadow:0 12px 30px rgba(12,110,122,.28)}
.calc-big{display:flex;align-items:baseline;gap:10px;font-family:var(--f-head);font-weight:800;font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:-.02em}
.calc-unit{font-size:18px;font-weight:600;opacity:.85}
.calc-out p{color:#E3F3F5;font-size:15px;max-width:none}
.calc-out .btn{align-self:flex-start;background:#0F2A2D;box-shadow:none;margin-top:4px}
.steps{position:relative}
.stepn{width:44px;height:44px;border-radius:14px;background:var(--band);color:var(--accent)}
.stepn svg{width:22px;height:22px}
.step{border-top:3px solid var(--accent)}
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
.faqgrid .fold{margin:6px 0}
.fold summary::after{width:8px;height:8px}
.c-rank{width:44px}
.rank{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--band);color:var(--dim);font-family:var(--f-head);font-weight:700;font-size:13.5px}
.rank.gold{background:#F6C445;color:#5A4200}.rank.silver{background:#D9DEDD;color:#3A4443}.rank.bronze{background:#E0B08A;color:#5A3410}
.citytable tbody tr:nth-child(even) td{background:#F7FAF9}
.foot{background:linear-gradient(180deg,#14201F,#0B1413);padding:44px 0 46px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:24px 40px;align-items:start;margin-bottom:22px}
.foot-brand{color:#fff;margin-bottom:10px}
.foot-strap{font-size:17px;color:#C6D2D0}
.foot-signup{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px}
.foot-signup .legend-t{color:#8ED4DD}
.foot-signup .cta-form.mini{flex-direction:row;gap:8px}
.foot-signup .pcwrap{flex:1;border-color:transparent}
.foot-signup .btn.small{background:var(--accent);box-shadow:none}
.foot-nav{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
@media (max-width:900px){ .calc{grid-template-columns:1fr} .faqgrid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .citytable .c-rank{display:none} .proof{gap:8px 18px} .foot-signup .cta-form.mini{flex-direction:column} }


/* v10 audit fixes */
.lb.vat{background:#5F706E}
.pricepill .pu{opacity:1;font-size:12.5px}
.st-name .tag,.chip,.rank{font-size:12.5px}
.st-map{min-height:36px;display:inline-flex;align-items:center;padding:4px 12px}
.crumbs a{padding:8px 0;display:inline-block}
.sb-x{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.foot-signup .btn.small{color:#fff}
.legend-t{font-size:14.5px}
.locbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--line-strong);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--accent);cursor:pointer;min-height:36px;margin-top:10px}
.locbtn:hover{border-color:var(--accent);background:var(--band)}
.locbtn svg{width:16px;height:16px}

/* v11 light theme. Rules: text and figures in ink; one pale blue for anything you can tap;
   green, amber and rose mean one thing only, how a price compares; no gradients, no dark blocks. */
:root{
  --bg:#FFFFFF; --band:#F5F8FC; --card:#FFFFFF; --ink:#1B2430; --dim:#5B6675;
  --accent:#1D5FBF; --accent-deep:#164A96; --accent-bright:#1D5FBF;
  --act:#DDEBFF; --act-line:#B7D0F5; --act-hover:#CCE0FF;
  --line:#E4E9F0; --line-strong:#CBD4E0;
  --good:#2E9E5B; --good-bg:#E6F6EC; --good-ink:#17603A;
  --mid:#C98A12; --mid-bg:#FFF4DB; --mid-ink:#7A5308;
  --bad:#D2493A; --bad-bg:#FDE9E6; --bad-ink:#8E2A1F;
}
body{background:var(--bg);color:var(--ink)}
/* hero: plain, no glows */
.tool{background:var(--band);padding:36px 0 40px}
.tool::before,.tool::after{display:none}
.kicker{color:var(--dim)}
.kicker::before{background:var(--act-line)}
.hero-sub{color:var(--dim)}
/* buttons: pale blue with dark text, one look everywhere */
.btn,.btn:hover,.cta .btn,.stickybar .btn,.alertprompt .btn,.calc-out .btn,.foot .btn{
  background:var(--act);color:var(--ink);border:1.5px solid var(--act-line);box-shadow:none;transform:none}
.btn:hover,.cta .btn:hover,.stickybar .btn:hover,.alertprompt .btn:hover,.calc-out .btn:hover,.foot .btn:hover{background:var(--act-hover);border-color:var(--accent)}
.btn.ghost{background:transparent;border-color:var(--line-strong)}
.chip-btn{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.chip-btn:hover,.citychips .chip-btn:hover{border-color:var(--accent);color:var(--ink)}
.chip-btn[aria-pressed=true]{background:var(--act);border-color:var(--accent);color:var(--ink)}
.locbtn,.st-map,.crumbs a,.menu-cta{color:var(--accent)}
.locbtn:hover,.st-map:hover{background:var(--act);border-color:var(--act-line)}
.pcwrap:focus-within,.field input:focus,.field select:focus,.cta-form .pcwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,95,191,.15)}
/* figures in ink, tiles without coloured bars */
.stat-big,.tankcost,.cardlink h3,.strip .sv{color:var(--ink)}
.stat::before,.statrow .stat:nth-child(2)::before,.statrow .stat:nth-child(3)::before,.statrow .stat:nth-child(4)::before{display:none}
.stat{border-color:var(--line)}
.step{border-top:none}
.stepn{background:var(--act);color:var(--ink)}
.pills svg,.proof svg,.legend-t{color:var(--dim)}
.src{color:var(--accent)}
/* colour with a meaning: only the price scale */
.pricepill.g{background:var(--good-bg);color:var(--good-ink)}
.pricepill.m{background:var(--mid-bg);color:var(--mid-ink)}
.pricepill.b{background:var(--bad-bg);color:var(--bad-ink)}
.st-name .tag{background:var(--good-bg);color:var(--good-ink)}
.st-name .tag.dim{background:var(--band);color:var(--dim)}
.st-name .tag.warn{background:#fff;color:var(--dim);border:1px solid var(--line-strong)}
.station.top{border-color:var(--good)}
.freshdot,.st-fresh::before{background:var(--line-strong)}
.lb.duty{background:#8A96A6}.lb.vat{background:#A5B0BE}.lb.rest{background:var(--act-line);color:var(--ink)}
.lb.rest b{color:var(--ink)}
.hp.g{background:var(--good-bg);color:var(--good-ink);box-shadow:none}.hp.g::after{border-top-color:var(--good-bg)}
.hp.m{background:var(--mid-bg);color:var(--mid-ink);box-shadow:none}.hp.m::after{border-top-color:var(--mid-bg)}
.hp.b{background:var(--bad-bg);color:var(--bad-ink);box-shadow:none}.hp.b::after{border-top-color:var(--bad-bg)}
.rank.gold{background:#FFF1BF;color:#6B4E00}.rank.silver{background:#EDF0F4;color:#3E4753}.rank.bronze{background:#F7E3D2;color:#6B3E1C}
/* blocks that were dark or gradient are now pale */
.cta,.alertprompt,.calc-out{background:var(--act);color:var(--ink);box-shadow:none;border:1px solid var(--act-line)}
.cta .kicker,.cta h2,.cta p,.alertprompt h3,.alertprompt p,.calc-out h3,.calc-out p,.calc-out .big{color:var(--ink)}
.cta p,.alertprompt p,.calc-out p{color:var(--dim)}
.cta .pcwrap,.alertprompt .pcwrap{border:1.5px solid var(--act-line);background:#fff}
.herocard{box-shadow:0 10px 30px rgba(27,36,48,.08)}
.stickybar{background:#fff;color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 10px 30px rgba(27,36,48,.16)}
.stickybar .x,.stickybar button.close{color:var(--dim)}
.foot{background:var(--band);color:var(--ink);border-top:1px solid var(--line)}
.foot a,.foot .small,.foot .small a,.foot p,.foot li{color:var(--ink)}
.foot .small,.foot .dim{color:var(--dim)}
.foot .pcwrap{background:#fff;border:1.5px solid var(--line-strong)}
.citytable tbody tr:nth-child(even) td{background:var(--band)}
.band,.strip{background:var(--band)}
.foot-brand,.foot-strap{color:var(--ink)}
.foot-strap{color:var(--dim)}
.foot-signup{background:#fff;border:1px solid var(--line)}
.foot-signup .legend-t{color:var(--dim)}
.foot-signup .btn.small,.foot-signup .btn.small:hover{background:var(--act);color:var(--ink);border-color:var(--act-line)}
.foot-nav{border-top:1px solid var(--line)}
.fdot,.fdot.fresh,.fdot.ok,.fdot.stale{background:var(--line-strong)}
.dnav a[aria-current]{background:var(--band);color:var(--ink);font-weight:600}
.dnav .btn.small.alertbtn,.dnav .btn.small.alertbtn:hover{background:var(--act);color:var(--ink);border:1.5px solid var(--act-line);box-shadow:none}
.alertprompt .legend-t,.alertprompt .tiny,.cta .tiny,.calc-out .tiny{color:var(--dim)}
.litrebar{color:var(--ink)}
.lb.duty{background:#C5CEDA}.lb.vat{background:#DCE2EA}.lb.rest{background:var(--act)}
.alertbtn,.alertbtn:hover{background:var(--act)!important;color:var(--ink)!important;border:1.5px solid var(--act-line)!important}

/* v12: MOT reg plate and note */
.motcard .searchrow{align-items:stretch}
.plate{display:flex;align-items:stretch;flex:1;min-width:0;border:2px solid #111;border-radius:8px;overflow:hidden;background:#FFDD00}
.plate-gb{display:flex;align-items:center;justify-content:center;background:#1D5FBF;color:#fff;font-family:var(--f-head);font-weight:800;font-size:15px;padding:0 11px;letter-spacing:.5px}
.plate input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--f-head);font-weight:800;font-size:26px;letter-spacing:3px;text-transform:uppercase;color:#111;padding:11px 14px}
.plate input:focus{outline:none}
.plate input::placeholder{color:#7a6b00;opacity:.6;letter-spacing:2px}
.plate:focus-within{box-shadow:0 0 0 3px rgba(29,95,191,.25)}
.motok{margin-top:12px;background:var(--good-bg);color:var(--good-ink);border:1px solid #BFE3CD;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.plate,.plate input{box-sizing:border-box;max-width:100%}
.plate input{width:100%}
@media (max-width:520px){ .plate input{font-size:22px;letter-spacing:2px;padding:11px 12px} .plate-gb{font-size:14px;padding:0 9px} .motcard .btn.block-m{width:100%} }

/* v13: quotable facts callout and updates list */
.leadfacts{background:var(--band);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.section .leadfacts,.tool .leadfacts{margin:14px 0 0}
.updlist{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.upd{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.upd-date{flex:0 0 128px;font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--dim)}
.upd-text{flex:1;font-size:15.5px;color:var(--ink)}
@media (max-width:520px){ .upd{flex-direction:column;gap:2px} .upd-date{flex-basis:auto} }