/* UK fuel price tracker: styles. T&E palette only (see :root). */

:root {
  color-scheme: light;
  --paper: #fbf5f0; --paper-2: #f4ebe3; --ink: #1c1c1c; --ink-2: #4b4646; --muted: #8a8282; --line: #e7ddd4;
  --indigo: #4d45ff; --berry: #c2447a; --orange: #ff8754; --burgundy: #59152c; --night: #2a0a16; --green: #039961; --green-2: #73d68a; --beige: #f0dccd;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --sign: "Oswald", "Arial Narrow", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.5 var(--font); font-variant-numeric: tabular-nums; padding-bottom: 44px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 900; letter-spacing: -0.035em; line-height: .98; text-wrap: balance; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
.grad { background: linear-gradient(90deg, var(--berry), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* header: floats over the story */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 14px clamp(18px, 4vw, 48px); mix-blend-mode: normal; pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; text-decoration: none; background: #fff; padding: 8px 14px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.logo { display: block; width: 74px; aspect-ratio: 480 / 138; background: var(--logo) center / contain no-repeat; }   /* the real T&E logo (assets/te_logo.png), always on white */
.dots { margin-left: auto; display: flex; gap: 8px; background: #fff; padding: 9px 12px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.dots a { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; transition: all .3s; }
.dots a.on { background: var(--berry); width: 22px; border-radius: 6px; }
@media (max-width: 600px) { .dots { display: none; } .mock { margin-left: auto; } }
.mock { font-size: 12px; font-weight: 800; color: #fff; background: var(--berry); padding: 7px 11px; border-radius: 999px; }

/* screen 1: the number */
.s1 { min-height: 100vh; min-height: 100svh; background: radial-gradient(900px 600px at 85% 10%, rgba(255,135,84,.28), transparent 60%), radial-gradient(700px 500px at 5% 95%, rgba(194,68,122,.35), transparent 60%), var(--night); color: #fff; display: flex; align-items: center; position: relative; overflow: hidden; }
.s1 .wrap { width: 100%; padding-top: 90px; padding-bottom: 70px; }
.eyebrow { font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.s1 h1 { font-size: clamp(30px, 4.2vw, 58px); max-width: 18ch; margin-top: 14px; }
.odo { display: flex; align-items: center; gap: .06em; font: 600 clamp(38px, 10.4vw, 150px)/1 var(--sign); margin: clamp(22px, 4vh, 44px) 0 clamp(16px, 3vh, 30px); white-space: nowrap; }
.odo .d { display: inline-block; width: .66em; height: 1.2em; background: linear-gradient(#111, #1d1d1d 48%, #050505 52%, #141414); border-radius: .08em; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 .05em .2em rgba(0,0,0,.6); }
.odo .d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.7); }
.odo .d span { position: absolute; inset: 0 0 auto; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.odo .d b { display: block; height: 1.2em; line-height: 1.2em; text-align: center; font-weight: 600; }
.odo .d.live b { color: var(--orange); }
.odo .s { color: var(--beige); opacity: .8; font-size: .7em; padding: 0 .02em; }
.s1 .foot { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end; }
@media (max-width: 800px) { .s1 .foot { grid-template-columns: 1fr; } }
.s1 .foot p { color: var(--beige); max-width: 54ch; font-size: clamp(16px, 1.4vw, 19px); }
.s1 .foot p b { color: #fff; }
.pumps { display: flex; gap: 12px; }
.pump { border: 1.5px solid rgba(255,255,255,.28); border-radius: 14px; padding: 12px 16px; min-width: 150px; backdrop-filter: blur(6px); background: rgba(255,255,255,.05); }
.pump small { display: block; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--beige); }
.pump b { font: 600 40px/1.1 var(--sign); display: block; } .pump b i { font-style: normal; font-size: 18px; opacity: .7; }
.pump em { font-style: normal; font-size: 13.5px; color: var(--orange); font-weight: 700; }
.cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--beige); text-align: center; }
.cue::after { content: ""; display: block; width: 2px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--orange), transparent); animation: drop 1.6s infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; } }

/* screen 2: pinned chart, captions scroll past */
.s2 { position: relative; }
.s2 .grid { display: grid; grid-template-columns: minmax(280px, 34%) 1fr; gap: clamp(24px, 4vw, 64px); }
.stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; order: 2; padding: 70px 0 60px; }
.steps { order: 1; padding-bottom: 20vh; }
.step { min-height: 92vh; display: flex; align-items: center; opacity: .25; transition: opacity .4s; }
.step.on { opacity: 1; }
.step .n { font: 600 15px var(--sign); letter-spacing: .12em; color: var(--berry); }
.step h2 { font-size: clamp(30px, 3.6vw, 52px); margin: 8px 0 14px; }
.step p { color: var(--ink-2); font-size: clamp(17px, 1.35vw, 20px); max-width: 34ch; }
.step p b { color: var(--ink); }
#chStory svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.chart-h span i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.an { transition: opacity .6s; opacity: 0; } .an.show { opacity: 1; }
@media (max-width: 760px) {
  .s2 .grid { grid-template-columns: 1fr; }
  .stick { order: 1; height: 48vh; padding: 64px 0 10px; background: var(--paper); border-bottom: 1px solid var(--line); z-index: 2; justify-content: flex-end; }
  .steps { order: 2; } .step { min-height: 70vh; align-items: center; }
}

/* screen 3: three cars leave Land's End (the map) */
.s3 { background: var(--paper-2); padding: clamp(70px, 12vh, 130px) 0; }
.s3 h2 { font-size: clamp(34px, 5.4vw, 78px); max-width: 14ch; }
.s3 .sub { color: var(--ink-2); font-size: clamp(17px, 1.4vw, 21px); margin-top: 16px; max-width: 46ch; }
.amt { display: inline-flex; gap: 6px; margin-top: 26px; background: #fff; padding: 5px; border-radius: 999px; box-shadow: 0 1px 0 var(--line); }
.amt button { border: 0; background: none; font-weight: 800; font-size: 16px; padding: 9px 20px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.amt button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ch-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); gap: clamp(22px, 3.5vw, 56px); align-items: start; margin-top: clamp(26px, 4vh, 44px); }
@media (max-width: 980px) { .ch-wrap { grid-template-columns: 1fr; } }
.chains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .chains { grid-template-columns: 1fr; } }
.chain { background: #fff; border-radius: 20px; padding: 16px 16px 18px; border-top: 7px solid var(--c); display: flex; flex-direction: column; }
.chain .hd { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.chain .hd svg { width: 66px; height: auto; flex: none; overflow: visible; }
.chain .hd b { display: block; font-size: 15.5px; line-height: 1.2; } .chain .hd small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; }
.chain .st { padding: 6px 0; opacity: 0; transform: translateY(12px); transition: opacity .55s, transform .55s cubic-bezier(.2,.8,.2,1); }
.chain .st .v { display: block; font: 600 clamp(30px, 2.9vw, 42px)/1.05 var(--sign); letter-spacing: -0.01em; }
.chain .st .l { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.chain .st.place .v { font: 800 clamp(17px, 1.45vw, 20px)/1.25 var(--font); letter-spacing: -0.01em; }
.chain .eq { display: flex; align-items: center; gap: 10px; color: var(--c); font: 600 26px/1 var(--sign); opacity: 0; transition: opacity .4s; }
.chain .eq::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: .25; }
.ch-wrap.in .st, .ch-wrap.in .eq { opacity: 1; transform: none; }
.ch-map svg { display: block; width: 100%; height: auto; max-height: min(80vh, 760px); margin: 0 auto; overflow: visible; }
@media (max-width: 980px) { .ch-map svg { max-height: 70vh; } }
.ch-map .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
.ch-wrap.in .ch-map .ln { stroke-dashoffset: 0; }
.ch-map .end { opacity: 0; transition: opacity .5s; } .ch-wrap.in .ch-map .end { opacity: 1; }
.note { font-size: 13.5px; color: var(--muted); margin-top: 26px; max-width: 95ch; }
.next { margin-top: 40px; padding: 22px; border: 2px dashed var(--muted); border-radius: 16px; color: var(--ink-2); font-size: 16px; max-width: 70ch; }

/* the big facts: one compact row after the ticker */
.facts { padding: clamp(76px, 11vh, 110px) 0 clamp(20px, 3vh, 40px); }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); margin-top: 18px; }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr; } }
.fgrid { --r: 0deg; }
.fact { position: relative; border-radius: 22px; color: #fff; display: flex; flex-direction: column; box-shadow: 0 9px 0 rgba(28,28,28,.16), 0 22px 40px rgba(60,30,20,.16); transform: rotate(var(--r)); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.fact:nth-child(1) { --r: -1.1deg; } .fact:nth-child(2) { --r: .7deg; } .fact:nth-child(3) { --r: -.6deg; }
.fact:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 15px 0 rgba(28,28,28,.16), 0 30px 50px rgba(60,30,20,.2); }
@media (max-width: 860px) { .fact:nth-child(n) { --r: 0deg; } }
.fact.a { background: var(--orange); color: var(--ink); } .fact.b { background: var(--berry); } .fact.c { background: var(--green); }
.fact .top { position: relative; padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) 18px; flex: 1; overflow: hidden; border-radius: 22px 22px 0 0; }
.fact .art { position: absolute; right: -18px; top: -6px; width: min(46%, 190px); height: auto; opacity: .2; pointer-events: none; transform: rotate(8deg); }
.fact .k { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; position: relative; }
.fact .num { font: 600 clamp(60px, 6.8vw, 104px)/1 var(--sign); letter-spacing: -0.01em; margin: 8px 0 12px; white-space: nowrap; position: relative; }
.fact .num small { font-size: .34em; letter-spacing: 0; margin-left: .2em; }
.fact p { font-size: clamp(16px, 1.25vw, 18.5px); font-weight: 600; line-height: 1.3; position: relative; max-width: 26ch; }
.fact .chip { display: inline-block; margin-top: 12px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 999px; position: relative; }
.fact.a .chip { background: var(--ink); color: #fff; }
/* the stub: a dashed tear line with a notch cut out of each edge */
.fact .stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px clamp(20px, 2.2vw, 30px) 16px; border-top: 2.5px dashed rgba(255,255,255,.6); }
.fact.a .stub { border-top-color: rgba(28,28,28,.4); }
.fact .stub::before, .fact .stub::after { content: ""; position: absolute; top: -13px; width: 12px; height: 24px; background: var(--paper); }
.fact .stub::before { left: 0; border-radius: 0 12px 12px 0; } .fact .stub::after { right: 0; border-radius: 12px 0 0 12px; }
.fact .share { border: 0; background: none; color: inherit; font-weight: 800; font-size: 14px; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fact .brand { padding: 6px 11px; box-shadow: none; } .fact .logo { width: 56px; }
.facts .note { margin-top: 30px; }

/* tools */
.tool { padding: clamp(60px, 9vh, 100px) 0; }
.tool.alt { background: var(--paper-2); }
.tool h2 { font-size: clamp(32px, 4.4vw, 60px); max-width: 16ch; }
.tool .sub { color: var(--ink-2); font-size: clamp(17px, 1.4vw, 20px); margin-top: 14px; max-width: 56ch; }
.pills { display: inline-flex; gap: 4px; background: #fff; padding: 5px; border-radius: 999px; box-shadow: 0 1px 0 var(--line); }
.pills button { border: 0; background: none; font-weight: 800; font-size: 15px; padding: 8px 18px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.pills button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.area-top { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; margin-top: 30px; background: #fff; border-radius: 22px; padding: 28px; }
@media (max-width: 860px) { .area-top { grid-template-columns: 1fr; } }
.area-top label { font-weight: 800; }
.area-top input { width: 100%; font: inherit; font-weight: 700; padding: 13px 16px; border: 2.5px solid var(--ink); border-radius: 12px; margin-top: 8px; }
.pc-msg { font-size: 13.5px; color: var(--muted); margin-top: 6px; min-height: 1.3em; }
.gauge svg { display: block; width: 100%; max-width: 300px; margin: 6px auto 0; }
.fc h3 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 900; letter-spacing: -0.03em; }
.fc .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 560px) { .fc .stats { grid-template-columns: 1fr; } }
.fc .stats div { border-top: 4px solid var(--green); padding-top: 10px; font-size: 14px; color: var(--ink-2); }
.fc .stats b { display: block; font: 600 34px/1.1 var(--sign); color: var(--ink); }
.area-ctl { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 34px; font-weight: 800; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 22px; }
@media (max-width: 860px) { .lists { grid-template-columns: 1fr; } }
.lists h3 { font-size: 22px; font-weight: 900; margin-bottom: 14px; }
.lg { display: grid; gap: 14px; }
.lg .nm { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; } .lg .nm span { font: 600 18px var(--sign); white-space: nowrap; }
.lg .tr { height: 12px; border-radius: 6px; background: #fff; position: relative; overflow: hidden; margin-top: 5px; }
.lg .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .5s; }
.lg .tr i.t { background: var(--green-2); } .lg .tr i.n2 { background: var(--green); }
.lg .mny { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; } .lg .mny b { color: var(--green); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); margin-top: 14px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.bill-top { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; justify-content: space-between; margin-top: 26px; }
.big { font: 600 clamp(54px, 8vw, 110px)/.95 var(--sign); }
.big small { display: block; font: 600 15px/1.4 var(--font); color: var(--ink-2); margin-top: 10px; }
#chBill { margin-top: 18px; } #chBill svg { display: block; width: 100%; height: auto; }
details { border-top: 2px solid var(--ink); padding: 18px 0; margin-top: 40px; }
details summary { font-weight: 900; font-size: 22px; cursor: pointer; }
details ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; max-width: 90ch; } details li { margin-bottom: 6px; }

/* night forecourt: dark-mode devices get glowing pump prices */
@media (prefers-color-scheme: dark) { .pump { box-shadow: 0 0 0 1px #fff, 0 0 30px 4px rgba(255,135,84,.5); } .pump b { color: #fff7d6; text-shadow: 0 0 12px #ffd27a, 0 0 30px var(--orange); } }

/* paper grain */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* header: journey strip, data shortcut, sound */
.trip { flex: 1; max-width: 560px; height: 44px; margin: 0 auto; background: #fff; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.12); position: relative; overflow: hidden; }
.trip svg.sc { position: absolute; inset: 0; width: 100%; height: 100%; }
.trip .tc { position: absolute; bottom: 7px; left: 0; width: 46px; transform: translateX(8px); transition: transform .15s linear; }
.trip .tc svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 980px) { .trip { display: none; } .hbtn.first { margin-left: auto; } }
.hbtn { border: 0; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: pointer; text-decoration: none; white-space: nowrap; }
.hbtn.data { background: var(--ink); color: #fff; }
.hbtn[aria-pressed="true"] { background: var(--orange); }
.dots { display: none; }

.ex-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn { border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 800; font-size: 14.5px; padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.btn:hover { background: var(--ink); color: #fff; }
.embed { display: grid; grid-template-columns: minmax(0, 600px) minmax(260px, 1fr); gap: 30px; margin-top: 16px; align-items: start; }
@media (max-width: 860px) { .embed { grid-template-columns: 1fr; } }
.embed iframe { width: 100%; max-width: 600px; height: 370px; border: 0; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.14); }
.embed select, .embed textarea { font: inherit; width: 100%; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; }
.embed textarea { font: 13px/1.4 ui-monospace, Consolas, monospace; height: 96px; margin-top: 10px; resize: none; }

/* footer */
.foot2 { background: var(--night); color: var(--beige); padding: 44px 0 34px; font-size: 14.5px; }
.foot2 .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 40px; align-items: center; }
@media (max-width: 760px) { .foot2 .wrap { grid-template-columns: 1fr; } }
.foot2 a { color: #fff; }
.foot2 .brand { box-shadow: none; }

/* widget and link-preview modes */
.wg .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .wg .top .brand { flex: none; padding: 7px 12px; } .wg .top .logo { width: 66px; }
body.widget, body.card { padding: 0; overflow: hidden; background: var(--night); color: #fff; }
.wg { padding: clamp(18px, 5vw, 34px); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(500px 300px at 90% 0, rgba(255,135,84,.3), transparent 60%), var(--night); font-size: 14.5px; }
.wg .eyebrow { font-size: clamp(12px, 2.6vw, 15px); }
.wg { font-size: clamp(15px, 3vw, 18px); } .wg .n { font: 600 clamp(46px, 13.5vw, 92px)/1 var(--sign); margin: 8px 0 2px; white-space: nowrap; } .wg .n small { font: 600 clamp(14px, 2.8vw, 17px)/1.35 var(--font); color: var(--beige); display: block; margin-top: 10px; white-space: normal; }
.wg .pp { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; font-weight: 700; } .wg .pp b { font: 600 clamp(26px, 6.5vw, 40px) var(--sign); display: block; }
.wg .la { margin-top: 18px; padding-top: 16px; font-size: clamp(15px, 3.2vw, 19px); border-top: 1px solid rgba(255,255,255,.25); } .wg .la b { color: var(--green-2); }
.wg .by { margin-top: 12px; font-size: 12px; color: var(--beige); } .wg .by a { color: #fff; }
.cd { width: 1200px; height: 630px; padding: 60px 70px; position: relative; overflow: hidden; background: radial-gradient(800px 500px at 90% 0, rgba(255,135,84,.32), transparent 60%), radial-gradient(600px 400px at 0 100%, rgba(194,68,122,.4), transparent 60%), var(--night); }
.cd .eyebrow { font-size: 20px; } .cd h1 { font-size: 46px; margin-top: 14px; max-width: 20ch; }
.cd .n { font: 600 230px/1 var(--sign); margin-top: 6px; } .cd .n span { color: var(--orange); }
.cd .b { position: absolute; left: 70px; right: 70px; bottom: 44px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 24px; font-weight: 700; color: var(--beige); }
.cd .brand { padding: 14px 22px; } .cd .logo { width: 132px; }

/* the meter: runs the whole visit */
.meter { position: fixed; inset: auto 0 0; z-index: 60; height: 44px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14.5px; font-weight: 600; padding: 0 14px; white-space: nowrap; overflow: hidden; }
.meter b { font: 600 22px/1 var(--sign); color: var(--orange); min-width: 5.2ch; text-align: right; }
.meter .led { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: led 1s infinite; flex: none; }
@keyframes led { 50% { opacity: .25; } }
@media (max-width: 600px) { .meter .long { display: none; } }