/* wrongfuel.co.uk
   ---------------------------------------------------------------------------
   Designed for one reader: someone standing on a forecourt who has just put the
   wrong fuel in, often in the dark, holding a phone. Everything here serves
   stopping them turning the key and getting them to call.

   The vernacular is roadside safety, not academic publishing. Hi-vis yellow-
   green is what the technician arrives wearing, and it is the only colour that
   means "press this". Signal red appears once per page, on the warning, and
   nowhere else. Type is Overpass, drawn from Highway Gothic: open apertures and
   a tall x-height, which is what survives a dim screen at arm's length. Mixed
   case throughout, because that is what UK road signs use and it reads further.
   --------------------------------------------------------------------------- */

:root{
  --road:#12212B;      /* forecourt at night: blue-black, not tinted grey */
  --road-2:#1B3040;
  --sign:#FFFFFF;
  --haze:#EDF1F3;      /* wet forecourt grey */
  --haze-2:#DCE4E8;
  --hivis:#D8FF47;     /* safety vest. the one action colour */
  --hivis-d:#BDE32A;
  --stop:#C92A1D;      /* signal red, rationed */
  --slate:#51646F;
  --line:#D4DDE2;
  --f:'Overpass',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --shell:1180px;
  --pad:clamp(20px,4vw,48px);
}

*{box-sizing:border-box;min-width:0}
html,body{overflow-x:hidden;max-width:100vw}
body{
  margin:0;background:var(--sign);color:var(--road);
  font:400 19px/1.6 var(--f);
  -webkit-font-smoothing:antialiased;
  padding-bottom:88px;            /* clears the fixed call bar */
}
a{color:var(--road)}
p{margin:0 0 1rem;max-width:68ch}
img{max-width:100%;height:auto;display:block}
.w{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--road);outline-offset:3px}

h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 .6rem;text-wrap:balance}
h1{font-size:clamp(2.4rem,7vw,5.4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-top:0}
h3{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:700}
strong,b{font-weight:700}

/* sections alternate white and haze; no decorative dividers */
section{padding:clamp(48px,7vw,86px) 0}
.alt{background:var(--haze)}
.dark{background:var(--road);color:var(--sign)}
.dark a{color:var(--sign)}
.dark .lede,.dark p{color:#C4D2DA}

/* ── masthead ─────────────────────────────────────────────────────────────
   The phone number lives here and never scrolls away on desktop. A wordmark
   that is a left bar plus the name: the bar is the hi-vis stripe on the van. */
.top{position:sticky;top:0;z-index:50;background:var(--sign);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;gap:1.4rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.3rem;
  letter-spacing:-.03em;text-decoration:none;flex:0 0 auto}
.brand i{display:block;width:7px;height:28px;background:var(--hivis);border-radius:1px}
.brand span{color:var(--slate);font-weight:600}
.top nav{display:flex;gap:1.5rem;margin-left:auto}
.top nav a{font-size:17px;font-weight:600;text-decoration:none;color:var(--slate);white-space:nowrap}
.top nav a:hover{color:var(--road)}
.top .tel{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;background:var(--hivis);
  color:var(--road);font-weight:800;font-size:18px;text-decoration:none;
  padding:.62rem 1.1rem;border-radius:3px;letter-spacing:-.01em}
.top .tel:hover{background:var(--hivis-d)}
@media(max-width:1180px){.top nav a:nth-child(n+3){display:none}}
@media(max-width:860px){.top nav{display:none}.top .tel span{display:none}}

/* ── hero: the instruction is the page ──────────────────────────────────── */
.hero{background:var(--road);color:var(--sign);padding:clamp(52px,8vw,104px) 0 clamp(44px,6vw,80px)}
.hero h1{color:var(--sign);max-width:12ch}
.hero .warn{display:inline-flex;align-items:center;gap:.6rem;background:var(--stop);color:#fff;
  font-weight:700;font-size:15px;padding:.42rem .85rem;border-radius:3px;margin-bottom:1.5rem}
.hero .warn svg{width:17px;height:17px;flex:0 0 auto}
.hero .lede{font-size:clamp(1.1rem,2.2vw,1.45rem);color:#C4D2DA;max-width:46ch;margin:1.2rem 0 2rem;line-height:1.5}
.hero .lede b{color:var(--sign);font-weight:700}

.call{display:inline-flex;align-items:center;gap:.9rem;background:var(--hivis);color:var(--road);
  text-decoration:none;font-weight:800;border-radius:4px;padding:1.05rem 1.6rem;
  font-size:clamp(1.3rem,2.6vw,1.75rem);letter-spacing:-.02em}
.call:hover{background:var(--hivis-d)}
.call svg{width:26px;height:26px;flex:0 0 auto}
.call small{display:block;font-size:13px;font-weight:600;opacity:.72;letter-spacing:0}
.terms{margin:1rem 0 0;font-size:16px;color:#9DB0BB}
.terms b{color:var(--sign)}

/* ── triage: the first useful thing, like a breakdown form ──────────────── */
.tri{background:var(--sign);border:2px solid var(--road);border-radius:5px;padding:clamp(22px,3vw,34px)}
.tri h2{margin-bottom:.35rem}
.tri > p{color:var(--slate);margin-bottom:1.3rem}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.opts button{font:700 17px/1.3 var(--f);text-align:left;cursor:pointer;color:var(--road);
  background:var(--sign);border:2px solid var(--line);border-radius:4px;padding:1rem 1.1rem}
.opts button:hover{border-color:var(--road)}
.opts button[aria-pressed=true]{background:var(--road);color:var(--sign);border-color:var(--road)}
.out{display:none}
.out.on{display:block;margin-top:1.4rem;padding-top:1.4rem;border-top:2px solid var(--line)}
@media(prefers-reduced-motion:no-preference){.out.on{animation:rise .32s cubic-bezier(.2,.7,.3,1)}}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.out .lv{display:inline-block;font-weight:800;font-size:14px;padding:.3rem .7rem;border-radius:3px;
  background:var(--road);color:var(--hivis);margin-bottom:.8rem}
.out .lv.bad{background:var(--stop);color:#fff}

/* ── the four stages. a real sequence, so it is numbered ────────────────── */
.stages{display:grid;gap:2px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:1.8rem}
@media(min-width:800px){.stages{grid-template-columns:repeat(4,1fr)}}
.stage{background:var(--sign);padding:1.4rem 1.3rem}
.stage em{display:block;font-style:normal;font-weight:800;font-size:13px;color:var(--slate);margin-bottom:.5rem}
.stage b{display:block;font-size:19px;margin-bottom:.35rem}
.stage span{font-size:16px;color:var(--slate);line-height:1.5}
.stage:first-child{box-shadow:inset 5px 0 0 var(--hivis)}
.stage:last-child{box-shadow:inset 5px 0 0 var(--stop)}

/* ── plain content ──────────────────────────────────────────────────────── */
.lede{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--slate);max-width:60ch}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.8rem 0}
.card{display:block;background:var(--sign);border:1px solid var(--line);border-radius:5px;
  padding:1.4rem;text-decoration:none}
.card:hover{border-color:var(--road)}
.card b{display:block;font-size:19px;font-weight:700;margin-bottom:.35rem}
.card span{font-size:16px;color:var(--slate);line-height:1.5}
.card .k{display:block;font-size:14px;font-weight:700;color:var(--slate);margin-bottom:.5rem}

table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:17px}
caption{caption-side:top;text-align:left;font-weight:700;font-size:17px;padding-bottom:.7rem}
th,td{border-bottom:1px solid var(--line);padding:.85rem .9rem;text-align:left;vertical-align:top}
thead th{font-size:15px;font-weight:700;color:var(--slate);border-bottom:2px solid var(--road)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.facts th{width:36%;font-weight:600;color:var(--slate)}

ol.howto{list-style:none;counter-reset:s;padding:0;margin:1.5rem 0}
ol.howto li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line)}
ol.howto li::before{content:counter(s);font-weight:800;font-size:19px;color:var(--slate)}
ul.plain{list-style:none;padding:0;margin:1.2rem 0}
ul.plain li{padding:.65rem 0 .65rem 1.7rem;position:relative;border-bottom:1px solid var(--line)}
ul.plain li::before{content:"";position:absolute;left:0;top:1.25rem;width:9px;height:9px;
  background:var(--hivis);border-radius:50%}

details{border:1px solid var(--line);border-radius:5px;margin-bottom:8px;background:var(--sign)}
summary{cursor:pointer;padding:1.05rem 1.2rem;font-weight:700;font-size:18px;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:700;font-size:22px;color:var(--slate)}
details[open] summary::after{content:"\2212"}
details .a{padding:0 1.2rem 1.2rem;color:var(--slate)}

.mesh{display:flex;flex-wrap:wrap;gap:8px;margin:1.2rem 0}
.mesh a{border:1px solid var(--line);border-radius:4px;padding:.5rem .85rem;font-size:16px;
  font-weight:600;text-decoration:none;background:var(--sign)}
.mesh a:hover{border-color:var(--road)}
.meshbox{margin:2.4rem 0}
.meshbox h3{margin-bottom:.7rem}
.note{font-size:16px;color:var(--slate)}
blockquote{margin:1.4rem 0;padding:1.1rem 1.3rem;background:var(--haze);border-radius:5px;
  border-left:5px solid var(--hivis);font-size:17px}

.pillrow{display:flex;flex-wrap:wrap;gap:8px;margin:1.3rem 0}
.pill{font-size:15px;font-weight:700;padding:.42rem .8rem;border-radius:3px;
  background:var(--haze);color:var(--road)}
.pill.go{background:var(--hivis)}

/* the network panel is a disclosure, so it looks like one */
.network{background:var(--haze);border-radius:5px;padding:1.5rem}
.netlist{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.45rem}
.netlist a{font-weight:700;text-decoration:none}
.netlist a:hover{text-decoration:underline}

.foot{background:var(--road);color:#A9BCC6;padding:clamp(40px,5vw,64px) 0 110px;font-size:16px}
.foot a{color:var(--sign);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot nav{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin:1.2rem 0}
.foot .fine{max-width:76ch;line-height:1.6}

/* ── the call bar. fixed on a phone, because that is where the reader is ── */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--hivis);
  box-shadow:0 -2px 14px rgba(18,33,43,.22)}
.sticky a{display:flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:74px;padding:.6rem 1rem;color:var(--road);text-decoration:none;
  font-weight:800;font-size:clamp(1.15rem,4.4vw,1.4rem);letter-spacing:-.02em}
.sticky svg{width:23px;height:23px;flex:0 0 auto}
.sticky em{font-style:normal;font-weight:600;font-size:14px;opacity:.78}
@media(max-width:620px){.sticky em{display:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.top,.sticky{display:none}body{padding:0}}

/* skip link: invisible until focused, then a real target */
.skip{position:absolute;left:-999px}
.skip:focus{position:fixed;left:12px;top:12px;z-index:99;width:auto;height:auto;clip-path:none;
  background:var(--road);color:var(--sign);padding:.7rem 1rem;border-radius:4px;font-weight:700}

/* breadcrumbs: small, quiet, above the content they describe */
.crumbs{width:100%;max-width:var(--shell);margin:0 auto;padding:1rem var(--pad) 0;
  font-size:15px;color:var(--slate)}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;padding:0 .45rem;opacity:.55}
.hero + .crumbs,.crumbs:first-child{padding-top:1.2rem}

/* the reel: a quiet proof panel, not a hero element */
.reel{position:relative;max-width:300px;margin:1.8rem 0;border-radius:6px;overflow:hidden;
  background:var(--road);aspect-ratio:9/16}
.reel-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-snd{position:absolute;top:10px;right:10px;z-index:3;min-height:40px;padding:0 .8rem;
  border:0;border-radius:980px;cursor:pointer;background:rgba(18,33,43,.72);color:#fff;
  font:700 13px var(--f);backdrop-filter:blur(6px)}
.reel-call{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;
  align-items:center;justify-content:center;gap:.5rem;min-height:52px;border-radius:4px;
  background:var(--hivis);color:var(--road);font-weight:800;font-size:17px;text-decoration:none}
.reel figcaption{position:absolute;left:-999px}

/* the old answer block, restyled as a plain lead paragraph with a rule */
.ans{border-left:5px solid var(--hivis);padding:.2rem 0 .2rem 1.3rem;margin:1.6rem 0}
.ans b{display:block;font-size:17px;margin-bottom:.4rem}
.ans p{margin:0 0 .7rem}
.ans .ansc{color:var(--slate);font-size:17px}
.cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--hivis);color:var(--road);
  text-decoration:none;font-weight:800;border-radius:4px;padding:.9rem 1.3rem;font-size:19px;margin:.4rem 0}
.cta:hover{background:var(--hivis-d)}
.cta.ghost{background:transparent;border:2px solid var(--line);color:var(--road)}
.cta.ghost:hover{border-color:var(--road)}

/* the escalation ladder from the old build, in the new language */
.lad{margin:1.8rem 0;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.lad > b{display:block;padding:1rem 1.2rem;font-size:17px;background:var(--haze);border-bottom:1px solid var(--line)}
.lad ol{list-style:none;margin:0;padding:0;counter-reset:l}
@media(min-width:860px){.lad ol{display:grid;grid-template-columns:repeat(5,1fr)}}
.lad li{counter-increment:l;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line);font-size:16px;color:var(--slate)}
@media(min-width:860px){.lad li{border-bottom:0;border-right:1px solid var(--line)}.lad li:last-child{border-right:0}}
.lad li em{display:block;font-style:normal;font-weight:700;font-size:17px;color:var(--road);margin-bottom:.3rem}
.lad li::before{content:"Stage " counter(l);display:block;font-size:13px;font-weight:700;color:var(--slate);margin-bottom:.4rem}
.lad li.safe{box-shadow:inset 4px 0 0 var(--hivis)}
.lad li.bad{box-shadow:inset 4px 0 0 var(--stop)}

/* flow figure */
.flow{margin:1.8rem 0;border:1px solid var(--line);border-radius:5px;padding:1.2rem;background:var(--sign)}
.flow svg{width:100%;height:auto;display:block}
.flow .track{stroke:var(--line);stroke-width:2;fill:none}
.flow .live{stroke:var(--hivis-d);stroke-width:3;fill:none}
.flow .node{fill:#fff;stroke:var(--slate)}
.flow .drop{fill:var(--stop)}
.flow text{font:700 9px var(--f);fill:var(--slate)}
.flow figcaption{font-size:15px;color:var(--slate);margin-bottom:.8rem}

/* stat grids from the repository pages */
.stat{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1.8rem 0}
.stat > div{background:var(--haze);border-radius:5px;padding:1.3rem}
.stat .n{display:block;font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.03em;line-height:1}
.stat .l{display:block;margin-top:.5rem;font-size:16px;font-weight:600}
.stat .s{display:block;margin-top:.4rem;font-size:14px;color:var(--slate)}

/* hero as two columns on a wide screen: the instruction, and the one question
   that changes the answer. The right half earns its space. */
.heroC{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:1000px){.heroC{grid-template-columns:1.05fr .95fr;align-items:center}}
.heroA .tri{background:var(--sign);border-color:var(--sign);color:var(--road)}
.heroA .tri h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.heroA .tri p{color:var(--slate)}
.heroA .opts{grid-template-columns:1fr}
@media(min-width:560px) and (max-width:999px){.heroA .opts{grid-template-columns:1fr 1fr}}
.hero .terms{margin-bottom:0}

/* ordinary pages: one column, comfortable measure, breathing room at the top */
main.page{padding:clamp(28px,4vw,52px) var(--pad) clamp(48px,6vw,80px)}
main.page > h1{margin-bottom:1.1rem}
main.page h2{margin-top:2.6rem}
main.page section{padding:0}

/* on a wide screen the reel sits beside the text rather than owning a screen */
@media(min-width:980px){
  .reel{float:right;margin:.3rem 0 1.6rem 2.2rem;max-width:252px}
  main.page > h2,main.page > table,main.page > .lad,main.page > .tri{clear:both}
}