/* The used oil explainer (mail 079, page-templates/ues-explainer.php), loaded on that template only. The journey
   drawing uses the homepage rules in ues.css as they are; here only what this page adds: the step names in the
   caption row and the stepper, the three energy lines, the "Use this diagram" block (download buttons, the code box
   and its copy button, the PNG preview), the button row of the last section and the sources list.
   Source of truth: ues-homepage git repo on Manny's machine. */
body.ues-explainer section.dark .journeybox{margin-bottom:0}
/* a hyphenated word in a heading never breaks at its hyphen */
.ex-nw{white-space:nowrap}
/* on phones the text runs across the bright cladding of the hero photo: a darker overlay keeps it readable */
@media(max-width:760px){body.ues-explainer .hero.has-bg::after{background:linear-gradient(90deg,rgba(18,22,26,.95) 0%,rgba(18,22,26,.88) 55%,rgba(18,22,26,.74) 100%),linear-gradient(0deg,rgba(18,22,26,.75) 0%,rgba(18,22,26,0) 50%)}}
body.ues-explainer .caprow li strong,body.ues-explainer .stepper li span strong{font-weight:700;transition:color .4s}
body.ues-explainer .caprow li.on strong,body.ues-explainer .stepper li.on span strong{color:#fff}

.ex-points{list-style:none;margin:0;padding:0}
.ex-points li{position:relative;padding-left:26px;font-size:17px;line-height:1.65;color:var(--slate);margin:0 0 16px}
.ex-points li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:2px;background:var(--yellow-dk)}

.ex-use{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ex-use>*{min-width:0}
.ex-p{font-size:17px;line-height:1.65;color:var(--slate);margin:0 0 20px}
.ex-dl{display:flex;flex-wrap:wrap;gap:10px}
.ex-meta{font-size:13px;color:var(--slate-lt);margin:10px 0 0}
.ex-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:30px 0 8px}
.ex-code{margin:0;background:var(--ink);color:#E6EBEF;border-radius:var(--radius);padding:16px 18px;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.ex-code:focus-visible{outline:3px solid var(--yellow-dk);outline-offset:3px}
.ex-copyrow{margin-top:12px;min-height:1px}
.ex-copy[hidden]{display:none}
.ex-said{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ex-prev{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ex-prev img{display:block;width:100%;height:auto}

body.ues-explainer .cta .cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}

.ex-sources{padding:40px 0}
.ex-src-h{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 10px}
.ex-sources ul{margin:0;padding:0 0 0 18px}
.ex-sources li{font-size:14.5px;line-height:1.6;color:var(--slate);margin:0 0 4px}
.ex-sources a{color:var(--ink)}

@media(max-width:1000px){.ex-use{grid-template-columns:1fr;gap:30px}}
@media(prefers-reduced-motion:reduce){body.ues-explainer .caprow li strong,body.ues-explainer .stepper li span strong{transition:none}}