/* Palu Fuel FuelPass — premium design system (Phase A)
   Ported from sketches/003-premium-trust + sketches/shared/premium.css */
:root{
  --red:#C8102E; --red-deep:#A30D26; --navy:#0B2F4A; --navy2:#0E3C61; --blue:#0B4F82;
  --sky:#0199FE; --green:#1F8A4C; --sand:#FAF6EF; --paper:#FDFBF6; --line:#E9E1D0; --warn:#F5A623;
}
*{box-sizing:border-box}
body{font-family:'Inter',sans-serif;color:#24344a;background:var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,.display-num{font-family:'Space Grotesk',sans-serif;letter-spacing:-.03em;color:var(--navy)}
a{text-decoration:none}
body::after{content:"";position:fixed;inset:0;z-index:3000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

.btn-red{background:var(--red);color:#fff;font-weight:600;border:none;padding:.72rem 1.7rem;border-radius:999px;box-shadow:0 10px 22px -10px rgba(200,16,46,.55);transition:all .18s}
.btn-red:hover{background:var(--red-deep);color:#fff;transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff;font-weight:600;border:none;padding:.72rem 1.7rem;border-radius:999px;transition:all .18s}
.btn-navy:hover{background:var(--navy2);color:#fff}
.btn-outline-navy{border:2px solid var(--navy);color:var(--navy);font-weight:600;padding:.68rem 1.6rem;border-radius:999px;background:transparent}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-outline-white{border:2px solid #fff;color:#fff;font-weight:600;padding:.72rem 1.7rem;border-radius:999px}
.btn-outline-white:hover{background:#fff;color:var(--navy)}

/* header */
.site-header{background:rgba(253,251,246,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1030}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.02em;color:var(--navy);font-size:1.05rem}
.wordmark .dot{color:var(--red)}
.wordmark .brand-alt{color:var(--red);margin-left:.34em}
.wordmark small{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:.6rem;letter-spacing:2.8px;color:#8a97a6;text-transform:uppercase}
.navbar-nav .nav-link{color:#4a5a6e;font-weight:500;font-size:.93rem;margin:0 .2rem;border-bottom:2px solid transparent}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--navy);border-bottom-color:var(--red)}

/* sections */
section{padding:4.4rem 0}
.sec-eyebrow{color:var(--red);font-size:.72rem;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;margin-bottom:.5rem}
.sec-eyebrow .idx{color:#9aa6b4;margin-right:.5rem}
.sec-title{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:.6rem}
.sec-lead{color:#57687c;max-width:46rem}
.card-soft{background:#fff;border:1px solid var(--line);border-radius:1.15rem}
.input-lg{background:#fff;border:1.5px solid var(--line);border-radius:.8rem;padding:.8rem 1rem;font-size:1rem;color:var(--navy);width:100%}
.input-lg:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,79,130,.12);outline:none}
.input-lg::placeholder{color:#a6b1bd}
.form-label{font-weight:600;font-size:.85rem;color:var(--navy);margin-bottom:.35rem}

/* hero */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--sand) 100%);padding:4.6rem 0 3.8rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-6rem;top:-8rem;width:26rem;height:26rem;border-radius:50%;background:radial-gradient(circle,rgba(200,16,46,.06),transparent 65%)}
.kicker{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px;box-shadow:0 4px 14px -6px rgba(11,47,74,.18)}
.kicker .pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(200,16,46,.5);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.45)}70%{box-shadow:0 0 0 9px rgba(200,16,46,0)}100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}}
.hero h1{font-size:clamp(2.5rem,4.6vw,3.9rem);line-height:1.06;margin:1.3rem 0 1rem;font-weight:700}
.hero h1 .red{color:var(--red)}
.hero .sub{font-size:1.12rem;color:#4a5a6e;max-width:33rem}
.trust-row{font-size:.85rem;color:#5a6a7e;margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.trust-row span{background:#fff;border:1px solid var(--line);padding:.42rem .95rem;border-radius:999px;white-space:nowrap;box-shadow:0 3px 10px -4px rgba(11,47,74,.12)}
.hero-visual{position:relative}
.hero-main-img{width:100%;border-radius:1.6rem;box-shadow:0 34px 70px -24px rgba(11,47,74,.4);display:block;border:1px solid #fff}
.hero-float{position:absolute;bottom:-1.6rem;left:-1.2rem;background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:.8rem .9rem;display:flex;gap:.8rem;align-items:center;box-shadow:0 22px 44px -14px rgba(11,47,74,.35);max-width:19rem}
.hero-float img{width:3.4rem;height:4.2rem;object-fit:cover;border-radius:.7rem}
.hero-float .t1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem;color:var(--navy);line-height:1.2}
.hero-float .t2{font-size:.74rem;color:#6b7a8c;margin-top:.15rem}
@media (max-width: 991px){ .hero-float{left:.6rem} }

/* stats */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stat{text-align:center;padding:1.7rem .5rem}
.stat .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.35rem;letter-spacing:-.03em;color:var(--navy)}
.stat .num .r{color:var(--red)}
.stat .lbl{font-size:.78rem;color:#6b7a8c;letter-spacing:1px;text-transform:uppercase;margin-top:.2rem}

/* steps */
.step-card{background:#fff;border:1px solid var(--line);border-radius:1.15rem;padding:1.7rem 1.4rem;height:100%;transition:transform .18s, box-shadow .18s}
.step-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(11,47,74,.25)}
.step-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.9rem;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--red);margin-bottom:.9rem;line-height:1}
.step-card h5{font-size:1.05rem;margin-bottom:.35rem}
.step-card p{font-size:.9rem;color:#5c6d80;margin:0}

/* denominations — TOP only */
.denom-card{background:#fff;border:2px solid var(--line);border-radius:1.15rem;padding:1.5rem 1.2rem;cursor:pointer;height:100%;display:block;position:relative;transition:border-color .15s, transform .15s, box-shadow .15s;user-select:none;color:inherit}
.denom-card:hover{border-color:var(--blue);transform:translateY(-3px);color:inherit}
.denom-top{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.15rem;letter-spacing:-.03em;color:var(--navy)}
.denom-top .cur{font-size:1.05rem;color:#8a97a6;letter-spacing:0}
.denom-desc{font-size:.84rem;color:#6b7a8c;margin-top:.55rem}
.denom-desc b{color:var(--navy)}

/* benefits */
.benefit{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:.85rem;padding:1.5rem 1.4rem;height:100%}
.benefit h5{font-size:1.05rem}
.benefit p{font-size:.9rem;color:#5c6d80;margin:0}

/* FuelPass showcase */
.showcase-panel{background:var(--navy);border-radius:1.6rem;padding:3rem 2.6rem;color:#c9d6e4;position:relative;overflow:hidden}
.showcase-panel::before{content:"";position:absolute;right:-8rem;top:-8rem;width:24rem;height:24rem;border-radius:50%;background:radial-gradient(circle,rgba(200,16,46,.28),transparent 65%)}
.showcase-panel h2{color:#fff}
.showcase-panel .lead{color:#a9bccd;max-width:30rem}
.vline{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.1rem}
.vline .ico{width:2rem;height:2rem;border-radius:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.95rem}
.vline .t1{font-weight:600;color:#fff;font-size:.93rem}
.vline .t2{font-size:.82rem;color:#8fa0b3;margin-top:.1rem}
.fuelpass-img{width:100%;max-width:24rem;border-radius:1.4rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);display:block;margin-left:auto;border:1px solid rgba(255,255,255,.2)}

/* stations + map */
.map-panel{background:#fff;border:1px solid var(--line);border-radius:1.6rem;overflow:hidden;box-shadow:0 24px 56px -26px rgba(11,47,74,.3)}
.map-panel img{width:100%;display:block}
.station-mini{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.7rem;display:flex;gap:.9rem;align-items:center;margin-bottom:.9rem;transition:transform .15s, box-shadow .15s}
.station-mini:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(11,47,74,.25)}
.station-mini img{width:4.6rem;height:3.6rem;object-fit:cover;border-radius:.65rem;flex:0 0 auto}
.station-mini .nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--navy)}
.station-mini .lc{font-size:.78rem;color:#7a8898}
.station-mini .ok{font-size:.72rem;color:var(--green);font-weight:700;margin-top:.2rem}
.station-card{background:#fff;border:1px solid var(--line);border-radius:1.15rem;overflow:hidden;height:100%}
.station-card img{width:100%;height:12rem;object-fit:cover;display:block}
.station-card .body{padding:1.2rem 1.3rem}
.station-card h5{font-size:1.05rem;margin:0}
.station-card .loc{font-size:.84rem;color:#7a8898;margin-top:.15rem}
.station-card .ok{display:inline-block;font-size:.78rem;color:var(--green);font-weight:700;margin-top:.6rem;background:#E7F5EC;padding:.28rem .75rem;border-radius:999px}

/* testimonials */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:1.15rem;padding:1.6rem;height:100%;position:relative}
.quote-card::before{content:"“";position:absolute;top:.4rem;right:1.1rem;font-family:'Space Grotesk',sans-serif;font-size:4.4rem;color:rgba(200,16,46,.12);line-height:1}
.quote-card .q{font-size:1.02rem;color:#34445a;font-style:italic}
.quote-card .who{margin-top:1rem;font-size:.85rem;color:#5a6a7e}
.quote-card .who b{display:block;color:var(--navy);font-style:normal}

/* FAQ */
.faq-wrap{background:#fff;border:1px solid var(--line);border-radius:1.5rem;padding:1.2rem 1.4rem}
.accordion-item{border:1px solid var(--line)!important;border-radius:.85rem!important;margin-bottom:.6rem;background:#fff;overflow:hidden}
.accordion-button{font-weight:600;color:var(--navy);background:#fff;padding:1.05rem 1.2rem;font-size:.97rem}
.accordion-button:not(.collapsed){background:#fff;color:var(--red);box-shadow:none}
.accordion-button:focus{box-shadow:none}
.accordion-body{color:#4a5a6e;font-size:.93rem;padding:0 1.2rem 1.1rem}

/* tables */
.table-brand{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:1.15rem;overflow:hidden}
.table-brand th{background:var(--navy);color:#fff;font-weight:600;font-size:.85rem;text-align:left;padding:.9rem 1.1rem}
.table-brand td{padding:.9rem 1.1rem;border-top:1px solid var(--line);font-size:.93rem;color:#34445a;vertical-align:top}
.table-brand tr:nth-child(even) td{background:#FDFBF6}

/* CTA band */
.cta-band{background:linear-gradient(120deg,#A30D26 0%,#C8102E 55%,#E0143A 100%);color:#fff;padding:4.2rem 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:-10rem;bottom:-14rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.cta-band::after{content:"";position:absolute;right:-8rem;top:-12rem;width:24rem;height:24rem;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 65%)}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.2vw,2.6rem)}
.cta-band p{opacity:.93;margin:.5rem 0 1.5rem}

/* flashes */
.flash-wrap{margin-top:1.2rem}
.alert{border-radius:.85rem;font-size:.92rem}

/* footer */
footer{background:var(--navy);color:#c3cdd9;padding:3.4rem 0 1.6rem;font-size:.9rem}
/* h2 rather than h6 — the footer used to jump straight from h2 to h6, which
   breaks the document outline. Styled to look exactly as before. */
footer h6,footer .f-title{color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1rem}
footer a{color:#c3cdd9;display:block;padding:.32rem 0}
footer a:hover{color:#fff}
footer .bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:2.2rem;padding-top:1.2rem;font-size:.8rem;color:#8fa0b3}
footer .bottom a{display:inline;color:#8fa0b3;text-decoration:underline}

/* ===== buy wizard (Phase B) ===== */
.wz-section{padding:2.6rem 0 4rem}
.wz-stepper{list-style:none;display:flex;gap:.5rem;padding:0;margin:1.6rem 0 1.2rem}
.wz-stepper li{display:flex;align-items:center;gap:.5rem;color:#8a97a6;font-size:.85rem;font-weight:600}
.wz-stepper .dot{width:1.7rem;height:1.7rem;border-radius:50%;background:#eef1f5;color:#57687c;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-size:.85rem}
.wz-stepper li.current{color:var(--navy)}
.wz-stepper li.current .dot{background:var(--navy);color:#fff}
.wz-stepper li.done .dot{background:var(--green);color:#fff}
.wz-stepper li + li::before{content:"";width:1.1rem;height:2px;background:#e3e8ee;border-radius:2px;margin-right:.5rem}
.wz-alert{background:#fff8e6;border:1px solid #f0d9a0;color:#7a5b12;border-radius:.8rem;padding:.8rem 1rem;font-size:.9rem;margin-bottom:1rem}
.wz-alert-error{background:#fdecec;border-color:#f2b6b6;color:#8f1f1f}
.wz-step{margin-top:.5rem}
.wz-h{font-size:1.45rem}
.wz-h3{font-size:1.05rem;margin:1.6rem 0 .35rem;font-family:'Space Grotesk',sans-serif}
.wz-sub{color:#57687c;font-size:.92rem;margin-bottom:1rem}
.wz-denom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.8rem}
.wz-denom{background:#fff;border:2px solid var(--line);border-radius:1rem;padding:1rem;text-align:left;transition:.15s;cursor:pointer}
.wz-denom:hover{border-color:#cfd8e3}
.wz-denom.sel{border-color:var(--red);box-shadow:0 6px 18px rgba(200,16,46,.12)}
.wz-denom-top{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700;color:var(--navy)}
.wz-denom-top small{font-size:.72rem;font-weight:600;color:#8a97a6;letter-spacing:1px}
.wz-denom-desc{display:block;font-size:.82rem;color:#66788d;margin-top:.2rem}
.wz-custom-row{margin-top:1rem;max-width:18rem}
.field-err{color:#b3261e;font-size:.82rem;margin:.35rem 0 0}

.wz-actions{display:flex;gap:.7rem;margin-top:1.4rem}
.wz-summary{padding:1.2rem 1.3rem;margin-bottom:.6rem}
.wz-row{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.95rem;color:#3d4f63}
.wz-row b{color:var(--navy)}
.wz-row-total{border-top:1px dashed var(--line);margin-top:.4rem;padding-top:.6rem;font-size:1.05rem}
.wz-row-total b{font-size:1.35rem;font-family:'Space Grotesk',sans-serif}
.wz-note{font-size:.78rem;color:#8a97a6;margin:.5rem 0 0}
.wz-station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.6rem;margin-bottom:.4rem}
.wz-station{background:#fff;border:2px solid var(--line);border-radius:.9rem;padding:.8rem;text-align:left;cursor:pointer;transition:.15s}
.wz-station b{display:block;font-size:.95rem;color:var(--navy)}
.wz-station small{color:#7b8aa0;font-size:.78rem}
.wz-station.sel{border-color:var(--red);box-shadow:0 6px 18px rgba(200,16,46,.12)}
.wz-trust{font-size:.85rem;color:#57687c;margin:1.2rem 0 .8rem}
.wz-paybar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.9rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.wz-paybar-total span{display:block;font-size:.72rem;color:#8a97a6;text-transform:uppercase;letter-spacing:1px}
.wz-paybar-total b{font-size:1.3rem;font-family:'Space Grotesk',sans-serif;color:var(--navy)}
@media (max-width:576px){.wz-stepper .lbl{display:none}.wz-paybar .btn{flex:1}}