/* FuelPilot: the app's own dark zinc surfaces, amber for the price and the one action, blue for fuel. Manrope
   carries everything, numbers in tabular figures, as in the app. Small text uses a lighter grey than the app's
   #71717a so it stays readable on a website. */
:root {
  --bg: #09090b;
  --c1: #111113;
  --c2: #18181b;
  --c3: #222225;
  --line: #27272a;
  --line-2: #3f3f46;
  --text: #fafafa;
  --body: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #71717a;
  --amber: #f0a830;
  --on-amber: #18120a;
  --blue: #60a8d0;
  --gasoline: #e8a838;
  --gutter: clamp(20px, 5vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-underline-offset: 3px; }
/* Buttons keep their own shape when focused; text links and FAQ rows get a small rounded ring. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
:where(p, nav) a:focus-visible, summary:focus-visible { border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.pump { fill: currentColor; stroke: none; }

.bar, main, .foot { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.bar { display: flex; justify-content: space-between; align-items: center; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: 20px; max-width: 1240px; margin: 0 auto; }
.bar .home { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
/* The pump from the app's header, as a data URI so the legal pages get it from the shared header markup too. */
.bar .home::before {
  content: ''; width: 26px; height: 26px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23f0a830' fill-rule='evenodd' d='M160-120v-660q0-24 18-42t42-18h269q24 0 42 18t18 42v288h65q20.63 0 35.31 14.69Q664-462.63 664-442v219q0 21.68 15.5 36.34Q695-172 717-172t37.5-14.66Q770-201.32 770-223v-295q-11 6-23 9t-24 3q-39.48 0-66.74-27.26Q629-560.52 629-600q0-31.61 18-56.81Q665-682 695-690l-95-95 36-35 153 153q14 14 22.5 30.5T820-600v377q0 43.26-29.82 73.13-29.81 29.87-73 29.87Q674-120 644-149.87q-30-29.87-30-73.13v-219h-65v322H160Zm60-432h269v-228H220v228Zm503-4q18 0 31-13t13-31q0-18-13-31t-31-13q-18 0-31 13t-13 31q0 18 13 31t31 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bar .store { color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; padding: 9px 16px; border-radius: 999px; background: var(--c1); box-shadow: inset 0 0 0 1px var(--line); }
.bar .store:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
main { max-width: 1240px; margin: 0 auto; }

/* Hero: the pitch on the left, the calculator on the right, laid out like the app's first screen. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(24px, 5vw, 72px) 0 clamp(56px, 8vw, 110px); }
.pitch h1 { font-size: clamp(44px, 5.8vw, 76px); font-weight: 800; letter-spacing: -.035em; line-height: .98; max-width: 11ch; }
.lede { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 34ch; }
.cta { display: inline-block; margin-top: 32px; background: var(--amber); color: var(--on-amber); font-weight: 800; font-size: 17px; text-decoration: none; padding: 16px 26px; border-radius: 16px; }
.cta:hover { background: #f4b850; }
.fine { margin-top: 14px; font-size: 14.5px; color: var(--muted); max-width: 44ch; }

.demo { margin: 0; border-radius: 32px; padding: clamp(18px, 2.6vw, 28px); box-shadow: inset 0 0 0 1px var(--line); }
.demo-top { display: flex; justify-content: flex-end; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--c1); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { font: 700 14px 'Manrope', sans-serif; color: var(--muted); background: none; border: 0; min-height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--c3); color: var(--text); }

/* The total, big, with the currency and cents small beside it, as the app draws it. */
.cost { --w: clamp(76px, 8vw, 100px); display: flex; justify-content: center; align-items: flex-start; margin-top: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: .85; white-space: nowrap; }
.cost[data-digits="4"] { --w: clamp(64px, 6.8vw, 86px); }
.cost[data-digits="5"] { --w: clamp(54px, 5.6vw, 70px); }
.cost[data-digits="6"] { --w: clamp(44px, 4.6vw, 58px); }
.cost .cur { font-size: calc(var(--w) * .27); color: var(--faint); margin: calc(var(--w) * .1) 3px 0 0; }
.cost .amt { display: flex; align-items: baseline; }
.cost .whole { font-size: var(--w); letter-spacing: -.05em; color: var(--text); }
.cost .cents { font-size: calc(var(--w) * .32); letter-spacing: -.02em; color: var(--faint); margin-left: 1px; }
.cost.dim .whole { color: #3a3a3e; }
.cost.dim .cur, .cost.dim .cents { color: #333338; }
.cost-sub { margin-top: 14px; text-align: center; color: var(--muted); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

.field-label { margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--muted); }
.trip { display: flex; gap: 8px; margin-top: 8px; }
.pill-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--c1); box-shadow: inset 0 0 0 1px var(--line); cursor: text; transition: box-shadow .18s ease; }
.pill-input:focus-within, .row:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--amber) 14%, transparent); }
.pill-input input { flex: 1; min-width: 0; width: 100%; font: 800 22px 'Manrope', sans-serif; letter-spacing: -.01em; color: var(--text); background: none; border: 0; padding: 0; font-variant-numeric: tabular-nums; }
.demo input:focus { outline: none; }
.unit { color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; }
.toggle { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--c1); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 700 15px 'Manrope', sans-serif; cursor: pointer; }
.toggle .ic { width: 18px; height: 18px; }
.toggle[aria-pressed="true"] { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent); }

.panel { margin-top: 14px; background: var(--c1); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.setup { margin-top: 16px; }
.row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; border-radius: 18px; cursor: text; transition: box-shadow .18s ease; }
.row + .row::before { content: ''; position: absolute; left: 62px; right: 16px; top: 0; height: 1px; background: var(--line); }
.tile { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--c2); color: var(--muted); }
.tile .ic { width: 19px; height: 19px; }
.tile.car { color: var(--gasoline); background: color-mix(in srgb, var(--gasoline) 14%, transparent); }
.tile.gas { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-label { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.row-val { display: flex; align-items: baseline; gap: 1px; }
.row-val input { width: 4.4ch; max-width: 9ch; font: 800 19px 'Manrope', sans-serif; color: var(--text); background: none; border: 0; padding: 0; font-variant-numeric: tabular-nums; }
.row-val .cur-in { font-weight: 800; font-size: 19px; }
.row-val .unit { margin-left: 5px; }

.b-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 16px; }
.b-row + .b-row { border-top: 1px solid var(--line); }
.b-lead { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 15.5px; color: var(--text); white-space: nowrap; }
.b-lead .ic { color: var(--muted); }
.b-lead .ic.fuel { color: var(--blue); }
.b-fuel { color: var(--muted); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-fuel b { color: var(--blue); font-size: 18px; font-weight: 800; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--c2); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stepper button:hover:not(:disabled) { background: var(--c3); }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper .ic { width: 18px; height: 18px; stroke-width: 2; }
.count { min-width: 76px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.count b { color: var(--text); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.b-row.per span { color: var(--muted); font-weight: 600; font-size: 15px; }
.b-row.per b { color: var(--amber); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.demo figcaption { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* Features: text in a grid, each with the small tinted icon tile the app uses for its rows. */
.features { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.features h2, .help h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; }
.grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 40px; }
.feat .tile { margin-bottom: 16px; }
.grid h3 { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.grid p { margin-top: 8px; color: var(--muted); max-width: 36ch; font-size: 16px; }
.tag { font-size: 12.5px; font-weight: 700; color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); padding: 2px 8px; border-radius: 6px; line-height: 1.4; }

.help { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.help-cols { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--amber); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: 10px; color: var(--muted); max-width: 60ch; }
.faq b { color: var(--text); font-weight: 600; }
.contact { background: var(--c1); box-shadow: inset 0 0 0 1px var(--line); border-radius: 22px; padding: 28px; }
.contact h3 { font-size: 22px; }
.contact p { margin-top: 8px; color: var(--muted); }
.contact .mail { margin-top: 18px; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.copy { margin-top: 14px; font: 700 15px 'Manrope', sans-serif; color: var(--text); background: var(--c2); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.copy:hover { background: var(--c3); }

.foot { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 28px; padding-bottom: max(36px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 15px;
  /* The rule spans the content width, like the section rules above it, not the padding. */
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * max(var(--gutter), env(safe-area-inset-left))) 1px no-repeat; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { color: var(--amber); }

/* Legal pages: one comfortable reading column. */
.legal > * { max-width: 760px; }
.legal { padding-top: clamp(24px, 5vw, 64px); padding-bottom: 72px; }
.legal h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -.03em; }
.legal .updated { margin-top: 12px; color: var(--muted); font-size: 15px; }
.legal .intro { margin-top: 28px; font-size: 21px; line-height: 1.45; max-width: 36ch; }
.legal section { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal h2 { font-size: 21px; font-weight: 700; }
.legal section p { margin-top: 10px; color: var(--body); max-width: 64ch; }
.legal b { color: var(--text); }

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .demo { max-width: 560px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: 32px; }
  .demo { padding: 16px; border-radius: 28px; }
  .pill-input { padding: 0 18px; }
  .toggle { padding: 0 15px; }
  .b-row { padding: 10px 14px; }
  .row { padding: 12px 14px; }
  .row + .row::before { left: 60px; right: 14px; }
  .stepper { gap: 4px; }
  .stepper button { width: 38px; height: 38px; }
  .count { min-width: 70px; }
  .feat { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; }
  .feat .tile { grid-row: span 2; margin: 0; }
  .grid h3 { margin-top: 5px; }
}
@media (max-width: 360px) {
  .toggle { font-size: 14px; padding: 0 12px; gap: 6px; }
  .b-row { flex-wrap: wrap; row-gap: 6px; }
  .stepper { margin-left: auto; }
}