.fuel-hero { background: linear-gradient(135deg, #0f172a 0%, #14532d 55%, #111827 100%); color: #fff; padding: 5.75rem 0 5.25rem; }
.fuel-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.55rem); font-weight: 800; letter-spacing: -.045em; margin-bottom: 1rem; }
.fuel-eyebrow { color: #facc15; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fuel-eyebrow i { margin-right: .4rem; }
.fuel-lead { color: #dbeafe; font-size: 1.1rem; margin: 0 auto 1rem; max-width: 42rem; }
.fuel-updated { color: #bfdbfe; font-size: .88rem; margin: 0; }
.fuel-content { margin-top: -3.4rem; position: relative; z-index: 1; }
.fuel-rate-card { background: #fff; border-radius: 14px; box-shadow: 0 12px 35px rgba(15, 23, 42, .15); min-height: 215px; overflow: hidden; padding: 1.85rem 1.8rem 1.65rem 5.8rem; position: relative; }
.fuel-rate-card:before { background: #16a34a; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 6px; }
.fuel-rate-card--diesel:before { background: #14532d; }
.fuel-rate-card__icon { align-items: center; background: #f0fdf4; border-radius: 14px; color: #15803d; display: flex; font-size: 1.3rem; height: 45px; justify-content: center; left: 1.4rem; position: absolute; top: 1.8rem; width: 45px; }
.fuel-rate-card--diesel .fuel-rate-card__icon { background: #dcfce7; color: #14532d; }
.fuel-rate-card p { color: #475569; font-weight: 600; margin: 0 0 .4rem; }
.fuel-rate-card strong { color: #0f172a; display: block; font-size: clamp(1.7rem, 4vw, 2.35rem); letter-spacing: -.05em; line-height: 1.1; }
.fuel-rate-card span, .fuel-rate-card small { color: #64748b; display: block; font-size: .83rem; margin-top: .35rem; }
.fuel-rate-card small { color: #475569; margin-top: 1rem; }
.fuel-source { color: #64748b; font-size: .82rem; margin: -.3rem 0 3.8rem; text-align: center; }
.fuel-chart-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 8px 30px rgba(15, 23, 42, .06); padding: clamp(1.25rem, 3vw, 2.25rem); }
.fuel-chart-panel__header { align-items: start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.4rem; }
.fuel-chart-panel h2, .fuel-copy h2 { color: #0f172a; font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: .4rem; }
.fuel-chart-panel__header > div:first-child > p:last-child { color: #64748b; margin-bottom: 0; }
.fuel-chart-actions { background: #f1f5f9; border-radius: 9px; display: inline-flex; padding: .25rem; white-space: nowrap; }
.fuel-period { background: transparent; border: 0; border-radius: 7px; color: #475569; cursor: pointer; font-size: .83rem; font-weight: 700; padding: .45rem .72rem; }
.fuel-period.is-active { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .15); color: #15803d; }
.fuel-period:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.fuel-chart-wrap { height: 370px; position: relative; }
.fuel-chart-status { color: #64748b; font-size: .82rem; margin: .9rem 0 1.2rem; }
.fuel-history-table { font-size: .9rem; margin: 0; }
.fuel-history-table caption { caption-side: top; color: #0f172a; font-size: 1rem; font-weight: 700; padding: .4rem 0 .8rem; text-align: left; }
.fuel-history-table td, .fuel-history-table th { border-color: #e2e8f0; padding: .7rem .8rem; }
.fuel-history-table thead th { background: #f8fafc; color: #475569; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.fuel-copy { padding-top: 1rem; }
.fuel-copy h3 { color: #14532d; font-size: 1.05rem; font-weight: 750; margin-top: 1.3rem; }
.fuel-copy p { color: #475569; line-height: 1.7; }
@media (max-width: 767.98px) { .fuel-hero { padding: 4rem 0 4.5rem; } .fuel-content { margin-top: -2.6rem; } .fuel-rate-card { padding-left: 5.4rem; } .fuel-chart-panel__header { display: block; } .fuel-chart-actions { margin-top: 1.2rem; } .fuel-chart-wrap { height: 290px; } }