/* fuelspot.net (design handoff, 18 Oct). Flex rows that wrap, sizes by clamp() on the page width, no breakpoints.
   Space flows downward only: bottom margins, bottom padding or a parent's gap; a band starts with a spacer. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/IBMPlexSans_400Regular.ttf) format('truetype'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/IBMPlexSans_600SemiBold.ttf) format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/IBMPlexMono_400Regular.ttf) format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/IBMPlexMono_600SemiBold.ttf) format('truetype'); }

:root {
  --ink: #10151C; --grey: #5A626C; --paper: #FFFFFF; --surface: #F2F4F6; --border: #E6E9ED;
  --green-line: #009A59; --green: #00C776; --route-line: #5A626C; --blue: #2B6CFF;
  --S: clamp(34px, 6vw, 68px);
  --gutter: clamp(22px, 3vw, 34px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EEF1F4; --grey: #B4BBC4; --paper: #161B22; --surface: #1F252D; --border: #2A313A;
    --green-line: #00C776; --route-line: #6B737D; --blue: #4F86FF;
  }
}

html, body { margin: 0; background: var(--paper); }
body {
  color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--ink); }
a:hover { color: var(--grey); }
h1, h2, h3, p { margin: 0; }
.mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.n400 { font-weight: 400; }
.spacer { height: var(--S); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--border); margin-bottom: clamp(34px, 5vw, 68px); }
.site-header .wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wordmark { display: block; position: relative; width: 112px; height: 28px; flex: none; }
.wordmark .letters {
  position: absolute; inset: 0; background: var(--ink);
  -webkit-mask: url(/wordmark-letters.svg) no-repeat 0 0 / 100% 100%; mask: url(/wordmark-letters.svg) no-repeat 0 0 / 100% 100%;
}
.wordmark .pip { position: absolute; inset: 0; width: 100%; height: 100%; }
.wordmark .pip-ink {
  position: absolute; inset: 0; background: #10151C;
  -webkit-mask: url(/wordmark-pip.svg) no-repeat 0 0 / 100% 100%; mask: url(/wordmark-pip.svg) no-repeat 0 0 / 100% 100%;
}
.links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.links a { min-height: 44px; display: flex; align-items: center; text-decoration: none; }
.links a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-footer { border-top: 1px solid var(--border); }
.site-footer.flush { border-top: 0; }
.site-footer .wrap { min-height: 72px; padding-bottom: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 22px; }

/* Green bands keep their light values in dark. */
.green-band { --ink: #10151C; --grey: #10151C; --paper: #00C776; --border: rgba(16, 21, 28, .16); background: #00C776; color: #10151C; }
.green-band .site-header { border-bottom-color: rgba(16, 21, 28, .16); }

/* Shared type */
.h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; max-width: 12em; text-wrap: balance; }
.pretty { text-wrap: pretty; }

/* Store badges: the stores' own artwork at the same height. Google's has 41 of its 250 pixels of clear space
   on every side, so its box is the badge alone and the image is pulled out over the clear space. */
.badges { display: flex; flex-wrap: wrap; gap: 14px; }
.badge { display: block; flex: none; height: 44px; line-height: 0; }
.badge img { display: block; width: auto; height: 44px; }
.badge.play { width: 147.7px; overflow: hidden; }
.badge.play img { height: 65.5px; margin: -10.75px; }

/* Home: hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--S) 68px; padding-bottom: var(--S); }
.hero .words { flex: 1 1 400px; min-width: 0; }
.hero h1 { margin-bottom: 22px; font-size: clamp(40px, 6.4vw, 80px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; max-width: 9em; text-wrap: balance; }
.hero .line { margin-bottom: 34px; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.4; max-width: 24em; text-wrap: pretty; }
.hero .phone-col { flex: 0 1 340px; min-width: 0; display: flex; justify-content: center; perspective: 1800px; }
.phone3d {
  width: clamp(220px, 26vw, 320px); max-width: 100%; aspect-ratio: 1350 / 2760; position: relative;
  transform: rotateY(-30deg) rotateX(10deg) rotateZ(4deg); transform-origin: 50% 60%; transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.phone3d.start { transform: rotateY(-48deg) rotateX(16deg) rotateZ(8deg) translateY(6%); }
@media (prefers-reduced-motion: reduce) { .phone3d, .phone3d.start { transform: rotateY(-30deg) rotateX(10deg) rotateZ(4deg); transition: none; } }
.phone3d .layer { position: absolute; left: 1.7%; right: 1.7%; top: .8%; bottom: .8%; border-radius: 17% / 8.3%; }
.screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; border-radius: 12.5% / 5.75%; overflow: hidden; }
.phone3d .screen { background: #FFF; transform: translateZ(.3px); }
.screen img { display: block; width: 100%; height: 100%; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phone3d .frame { transform: translateZ(.6px); }

/* Home: the answer on the counter */
.counter { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 68px; background: var(--surface); border-radius: 28px; padding: 0 clamp(22px, 4vw, 56px); margin-bottom: var(--S); overflow: hidden; }
.counter .spacer { flex: 1 1 100%; }
.counter .words { flex: 1 1 320px; min-width: 0; padding-bottom: var(--S); }
.counter .words .h2 { margin-bottom: 14px; }
.counter .words p { max-width: 26em; text-wrap: pretty; }
.counter .card-col { flex: 0 1 420px; min-width: 0; margin-inline: auto; width: 100%; padding-bottom: var(--S); }
.card { transform: rotate(2deg); background: var(--paper); border-radius: 22px; display: flex; flex-direction: column; padding: 0 22px 22px; box-shadow: 0 24px 40px -16px rgba(16, 21, 28, .22), 0 4px 10px rgba(16, 21, 28, .06); }
.card .grab { width: 36px; height: 5px; border-radius: 999px; background: var(--border); margin: 8px auto 14px; }
.card .label { font-weight: 600; margin-bottom: 14px; }
.card .name { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; letter-spacing: .04em; }
.card .dot { width: 14px; height: 14px; border-radius: 999px; flex: none; background: var(--green-line); }
.card .in { padding-left: 24px; }
.card .price-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.card .price { font-size: clamp(40px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.04em; }
.card .navigate { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; flex: none; }
.card .meta { color: var(--grey); margin-bottom: 14px; }
.card .meta b { color: var(--ink); font-weight: 400; }
.card .range { position: relative; height: 14px; margin: 0 0 6px 24px; }
.card .range .track { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--border); }
.card .range .dot { position: absolute; left: 0; top: 0; }
.card .range .tick { position: absolute; right: 0; top: 1px; width: 2px; height: 12px; background: var(--ink); }
.card .ends { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 14px; }
.card .ends span + span { color: var(--grey); }

/* Home: no guesswork */
.rumours { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: var(--S); }
.rumours .h2 { margin-bottom: 22px; }
.pills { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; font-size: clamp(15px, 1.6vw, 17px); }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border); color: var(--grey); text-decoration: line-through; text-decoration-thickness: 2px; background: var(--paper); }
.truth { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: #10151C; color: #FFF; font-weight: 600; font-size: clamp(15px, 1.6vw, 17px); }
.truth .ring { width: 14px; height: 14px; border-radius: 999px; border: 3px solid #00C776; box-sizing: border-box; flex: none; }

/* Home: the route */
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 68px; border-top: 1px solid var(--border); padding-bottom: var(--S); }
.route .words { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.route .words .h2 { margin-bottom: 14px; max-width: 11em; }
.route .words p { max-width: 28em; text-wrap: pretty; }
.route .phone-col { flex: 1 1 360px; min-width: 0; width: 100%; }
.route .stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone-flat { width: clamp(240px, 26vw, 300px); max-width: 100%; aspect-ratio: 1350 / 2760; position: relative; filter: drop-shadow(0 30px 40px rgba(16, 21, 28, .28)) drop-shadow(0 8px 14px rgba(16, 21, 28, .18)); }
.phone-flat .screen { background: #F2F4F6; }
.phone-flat iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.caption { font-size: 13px; color: var(--grey); text-align: center; max-width: 22em; text-wrap: balance; }

/* Home: closing band */
.closing { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 34px 68px; padding-bottom: var(--S); }
.closing .spacer { flex: 1 1 100%; }
.closing .words { flex: 1 1 420px; min-width: 0; }
.closing h2 { margin-bottom: 14px; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; max-width: 11em; text-wrap: balance; }
.closing p { max-width: 30em; text-wrap: pretty; }

/* Privacy */
.page-title { margin-bottom: 14px; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.page-intro { font-size: 22px; line-height: 1.35; max-width: 24em; text-wrap: pretty; }
.summary { display: flex; flex-wrap: wrap; gap: 34px 68px; border-bottom: 1px solid var(--border); padding-bottom: var(--S); margin-bottom: var(--S); }
.summary .block { flex: 1 1 340px; min-width: 0; }
.summary h2 { margin-bottom: 8px; font-size: 17px; line-height: 1.45; font-weight: 600; }
.rule { height: 1px; background: var(--ink); margin-bottom: 14px; }
.summary dl { margin: 0; }
.summary .row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; }
.summary .row:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.summary dt { color: var(--grey); }
.summary dd { margin: 0; text-wrap: pretty; }
.policy { display: flex; flex-wrap: wrap; gap: 22px 68px; padding-bottom: var(--S); }
.policy .contents { flex: 0 1 240px; min-width: 0; }
.policy .contents h2 { margin-bottom: 4px; font-size: 22px; line-height: 1.3; font-weight: 600; }
.policy .updated { font-size: 13px; color: var(--grey); margin-bottom: 14px; }
.policy nav { display: flex; flex-direction: column; }
.policy nav a { min-height: 44px; display: flex; align-items: center; text-decoration: none; border-bottom: 1px solid var(--border); }
.policy .text { flex: 1 1 420px; min-width: 0; max-width: 640px; line-height: 1.6; }
.policy h3 { margin-bottom: 8px; font-size: 17px; font-weight: 600; scroll-margin-top: 22px; }
.policy .text p { margin-bottom: 34px; text-wrap: pretty; }
.policy .text p:last-child { margin-bottom: 0; }

/* Support */
.column { max-width: 640px; }
.support .page-intro { margin-bottom: 22px; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 14px; }
.button { min-height: 52px; padding: 0 22px; box-sizing: border-box; display: flex; align-items: center; background: var(--ink); color: var(--paper); border-radius: 14px; font-weight: 600; text-decoration: none; }
.button:hover { color: var(--paper); opacity: .9; }
.selectable { user-select: all; -webkit-user-select: all; }
.maker { color: var(--grey); text-wrap: pretty; }
.notes { padding-bottom: var(--S); }
.notes h2 { margin-bottom: 8px; font-size: 22px; line-height: 1.3; font-weight: 600; }
.notes p { line-height: 1.6; text-wrap: pretty; }

/* 404 */
.lost { padding-bottom: var(--S); }
.lost .page-intro { margin-bottom: 22px; }