/* Blink Fuel guide pages (SEO pages, 2026-09-24): same look as the money page
   (/how-a-fuel-delivery-business-makes-money/money-math.css). Scoped under .bfg so the
   Astra/Elementor theme around it stays untouched. Fonts: the site's own Poppins + Roboto. */
.bfg{
  --bg:#f5f3ef; --surface:#ffffff; --surface-2:#edf1f6; --ink:#0f1c2b; --ink-2:#4a5667; --line:#d6dce5;
  --brand:#022950; --brand-2:#0a4d8c; --on-brand:#ffffff; --on-brand-2:#c9d8ea;
  --accent:#f27406; --on-accent:#022950; --accent-tint:#fdeee2; --accent-line:#f3b684; --focus:#0a4d8c; --hero-accent:#ff8c2e;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-xs:2px; --r-sm:4px; --r-md:10px;
  --gutter:clamp(16px,4vw,40px);
  --f-display:'Poppins',system-ui,sans-serif; --f-body:'Roboto',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--f-body);overflow-x:hidden
}
.bfg *,.bfg *::before,.bfg *::after{box-sizing:border-box}
.bfg h1,.bfg h2,.bfg h3{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:0;color:var(--brand)}
.bfg p{margin:0 0 var(--s4)}
.bfg a{color:var(--brand-2);text-underline-offset:3px}
.bfg a:hover{color:var(--brand)}
.bfg :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
.bfg .wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.bfg .narrow{max-width:760px}
.bfg a[href^="tel:"]{font-variant-numeric:tabular-nums;white-space:nowrap}

/* hero */
.bfg .hero{background:var(--brand);color:var(--on-brand);padding-block:clamp(40px,7vw,80px)}
.bfg .hero h1{font-weight:800;font-size:clamp(32px,4.6vw,56px);max-width:20ch;color:var(--on-brand)}
.bfg .byline{display:block;margin:var(--s4) 0 var(--s5);color:var(--on-brand-2);font-size:15px}
.bfg .answer{max-width:62ch;font-size:clamp(18px,1.9vw,20px);line-height:1.55;color:var(--on-brand)}
.bfg .answer strong{color:var(--hero-accent)}
.bfg .hero a:not(.btn){color:var(--on-brand)}
.bfg .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin:var(--s5) 0 0}
.bfg .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s5);border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font:700 17px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.bfg .btn:hover{filter:brightness(1.06);box-shadow:0 6px 18px oklch(0.7 0.18 50 / .35);transform:translateY(-1px);color:var(--on-accent)}
.bfg .btn:active{transform:translateY(0);filter:brightness(.96)}
.bfg .call{font-weight:600}
.bfg .hero .call,.bfg .band .call{color:var(--on-brand)}
.bfg .hero-note{margin:var(--s5) 0 0;color:var(--on-brand-2);max-width:62ch}
.bfg .hero-note a{color:var(--on-brand);font-weight:600}

/* body */
.bfg .body{padding-block:clamp(32px,5vw,56px)}
.bfg .body > section{padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.bfg .body > section:first-child{border-top:0;padding-top:0}
.bfg .body h2{font-size:clamp(25px,2.8vw,34px);font-weight:700;margin:0 0 var(--s4)}
.bfg .body h3{font-size:20px;font-weight:600;margin:var(--s6) 0 var(--s2)}
.bfg .body h2 + h3{margin-top:var(--s4)}
.bfg .body ul,.bfg .body ol{padding-left:1.25em;margin:0 0 var(--s4)}
.bfg .body li{margin-bottom:var(--s2)}
.bfg .body li::marker{color:var(--brand-2)}
.bfg .steps h3{display:flex;gap:var(--s3);align-items:baseline}
.bfg .steps h3 .n{font:800 28px/1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums;min-width:1.2em}
.bfg .faq h3{font-size:18.5px;margin:var(--s5) 0 var(--s2)}
.bfg .faq h3 + p{color:var(--ink)}
.bfg .quote{font:600 clamp(20px,2.2vw,24px)/1.35 var(--f-display);color:var(--brand);border:0;margin:var(--s5) 0;padding:0}
.bfg .fig-wrap{margin:var(--s5) 0}

/* closing band + fine print */
.bfg .band{background:var(--brand);color:var(--on-brand);padding-block:clamp(44px,7vw,80px)}
.bfg .band h2{font-size:clamp(28px,4vw,48px);font-weight:800;max-width:22ch;color:var(--on-brand)}
.bfg .band p{color:var(--on-brand-2);max-width:60ch}
.bfg .band a:not(.btn){color:var(--on-brand)}
.bfg .fine{padding-block:var(--s6) var(--s7);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.bfg .fine p{max-width:90ch;margin:0}
@media (prefers-reduced-motion:reduce){.bfg *{transition:none!important}}