/* ============================================================
   TopOff Fleet Intel - site-wide design system
   Daylight-industrial: paper page, asphalt ink, signage type.
   The app's dark+lime look appears only inside fuel-number
   components ("signs"), like station price signs lit at night.
   Semantics everywhere: amber = pending, lime = posted/verified.
   ============================================================ */

:root {
  --asphalt:#14181D;
  --paper:#FAFAF7;
  --slate:#5B6572;
  --hairline:#E4E6E1;
  --lime:#B7FF2A;       /* verified - dark contexts only */
  --lime-ink:#3F7A14;   /* verified - light contexts */
  --amber:#FFB020;      /* pending */
  --sign:#0E1218;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--asphalt); font:16px/1.6 'Barlow',-apple-system,sans-serif; overflow-x:clip; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
a { color:inherit; }
img { max-width:100%; display:block; }

/* ---------- nav ---------- */
.bar { border-bottom:1px solid var(--hairline); background:var(--paper); position:sticky; top:0; z-index:10; }
.bar .wrap { display:flex; justify-content:space-between; align-items:center; height:60px; gap:18px; }
.mark { display:flex; align-items:center; gap:10px; font:600 21px/1 'Barlow Condensed'; letter-spacing:.06em; text-decoration:none; }
.mark b { color:var(--lime-ink); }
.mark-ic { width:36px; height:36px; border-radius:9px; display:block; }
.mark small { display:block; font:500 8.5px/1 'Barlow'; letter-spacing:.2em; color:var(--slate); margin-top:3px; }
.nav { display:flex; align-items:center; gap:22px; }
.nav a { font:500 14.5px 'Barlow'; text-decoration:none; color:#2c333b; }
.nav a:hover { color:var(--asphalt); }
.nav a.active { color:var(--lime-ink); font-weight:600; }
.nav a.cta-sm { font-weight:600; border:1.5px solid var(--asphalt); border-radius:999px; padding:8px 16px; color:var(--asphalt); transition:background .15s,color .15s; }
.nav a.cta-sm:hover { background:var(--asphalt); color:#fff; }
@media (max-width:720px) { .nav a:not(.cta-sm) { display:none; } }

/* ---------- type & sections ---------- */
h1 { font:600 clamp(38px,5vw,56px)/1.05 'Barlow Condensed'; letter-spacing:.005em; text-transform:uppercase; }
h1 em, h2 em { font-style:normal; color:var(--lime-ink); }
h2 { font:600 clamp(26px,3vw,32px)/1.1 'Barlow Condensed'; text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px; }
h3.block { font:600 20px 'Barlow Condensed'; text-transform:uppercase; letter-spacing:.04em; }
.kicker { font:500 12px 'IBM Plex Mono'; letter-spacing:.18em; color:var(--lime-ink); text-transform:uppercase; margin-bottom:10px; }
.sub { color:var(--slate); max-width:64ch; margin-bottom:30px; }
section { padding:64px 0; }
section.alt { background:#fff; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
section.tight { padding:44px 0; }
.lede { font-size:18px; color:#2c333b; max-width:46ch; margin:20px 0 30px; }

/* page hero for subpages */
.page-hero { padding:56px 0 44px; }
.page-hero .sub { margin-bottom:0; }

/* ---------- buttons ---------- */
.cta { display:inline-block; font:600 16px 'Barlow'; text-decoration:none; background:var(--asphalt); color:#fff; padding:14px 26px; border-radius:10px; transition:transform .12s, box-shadow .12s; box-shadow:0 1px 0 rgba(0,0,0,.2); }
.cta:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,24,29,.18); }
.cta.ghost { background:transparent; color:var(--asphalt); border:1.5px solid var(--asphalt); box-shadow:none; }
.cta.lime { background:var(--lime); color:var(--sign); }
.cta.lime:hover { box-shadow:0 8px 24px rgba(183,255,42,.25); }
.cta-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cta-note { font:400 13px 'Barlow'; color:var(--slate); width:100%; }

/* ---------- dark sign / ledger components ---------- */
.sign { background:var(--sign); border-radius:18px; padding:26px 26px 20px; color:#fff; box-shadow:0 24px 60px -18px rgba(14,18,24,.45); }
.sign .head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; flex-wrap:wrap; gap:4px 12px; }
.sign .head .t { font:600 13px 'Barlow Condensed'; letter-spacing:.22em; color:#8b96a3; text-transform:uppercase; }
.sign .head .live { font:500 11px 'IBM Plex Mono'; color:var(--lime); }
.prices { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.price { border:1px solid #232a33; border-radius:12px; padding:14px 16px; }
.price .l { font:500 10.5px 'IBM Plex Mono'; letter-spacing:.14em; color:#8b96a3; text-transform:uppercase; }
.price .n { font:600 34px/1.15 'IBM Plex Mono'; margin-top:4px; }
.price.paid .n { color:var(--lime); }
.price .s { font:400 11.5px 'Barlow'; color:#8b96a3; }
.ledger { border-top:1px dashed #2a323c; padding-top:14px; }
.row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:9px 2px; font:500 13px 'IBM Plex Mono'; color:#c6cdd5; border-bottom:1px solid #1b2129; }
.row:last-child { border-bottom:none; }
.row .g { color:#8b96a3; }
.tag { font:600 10px 'IBM Plex Mono'; letter-spacing:.12em; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.tag.pending { color:var(--amber); border:1px solid rgba(255,176,32,.45); }
.tag.posted { color:var(--lime); border:1px solid rgba(183,255,42,.5); }
.amt { color:var(--lime); font-weight:600; }
.sign .foot { margin-top:14px; font:400 11.5px 'Barlow'; color:#8b96a3; }
.sign .foot b { color:#c6cdd5; font-weight:600; }
.swap { display:grid; }
.swap > span { grid-area:1/1; justify-self:end; }
@keyframes flip1 { to { opacity:0; transform:translateY(-6px); } }
@keyframes flip2 { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.row.flip .swap-out { animation:flip1 .35s ease 1.5s forwards; }
.row.flip .swap-in { opacity:0; animation:flip2 .35s ease 1.75s forwards; }

/* ---------- light cards & grids ---------- */
.panel { border:1px solid var(--hairline); border-radius:14px; padding:24px 26px; background:var(--paper); }
.panel.dark { background:var(--sign); color:#e8ecef; border-color:var(--sign); }
.panel h3 { font:600 19px 'Barlow Condensed'; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.panel.dark h3 { color:var(--lime); }
.panel h4 { font:500 12px 'IBM Plex Mono'; letter-spacing:.16em; text-transform:uppercase; color:var(--lime-ink); margin-bottom:10px; }
.panel ul.ticks { list-style:none; }
.panel ul.ticks li { padding:7px 0 7px 26px; position:relative; font-size:14.5px; }
.panel ul.ticks li::before { content:"✓"; position:absolute; left:0; font-weight:700; color:var(--lime-ink); }
.panel.dark ul.ticks li::before { content:"✕"; color:#e2554a; }
.panel .why { margin-top:12px; font-size:13px; color:var(--slate); }
.panel.dark .why { color:#8b96a3; }
.twocol { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.threecol { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat { border:1px solid var(--hairline); border-radius:12px; padding:16px; background:#fff; }
.stat .n { font:600 24px 'IBM Plex Mono'; color:var(--asphalt); }
.stat .l { font:500 12px 'Barlow'; color:var(--slate); margin-top:4px; }

/* route strip */
.route { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.route::before { content:""; position:absolute; top:17px; left:8%; right:8%; border-top:3px dashed var(--hairline); }
.stop { position:relative; padding:0 22px 0 0; }
.stop .dot { width:36px; height:36px; border-radius:50%; background:var(--asphalt); color:var(--lime); display:flex; align-items:center; justify-content:center; font:600 15px 'Barlow Condensed'; position:relative; z-index:1; border:3px solid var(--paper); }
.stop h3 { font:600 20px 'Barlow Condensed'; text-transform:uppercase; letter-spacing:.03em; margin:14px 0 6px; }
.stop p { font-size:14.5px; color:#2c333b; max-width:34ch; }
.stop .mono { font:500 12px 'IBM Plex Mono'; color:var(--slate); }

/* dark pilot band */
.band { background:var(--sign); color:#fff; }
.band h2 { color:#fff; }
.band .sub { color:#9aa4af; }
.band .kicker { color:var(--lime); }
.terms { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0 30px; }
.term { border:1px solid #232a33; border-radius:12px; padding:16px; }
.term .n { font:600 26px 'IBM Plex Mono'; color:var(--lime); }
.term .l { font:500 12px 'Barlow'; color:#8b96a3; margin-top:4px; }

/* FAQ accordion (no JS) */
.faq details { border-bottom:1px solid var(--hairline); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 2px; font:600 16px 'Barlow'; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font:500 20px 'IBM Plex Mono'; color:var(--lime-ink); }
.faq details[open] summary::after { content:"-"; }
.faq .a { padding:0 2px 18px; color:#2c333b; font-size:14.5px; max-width:70ch; }

/* phone frame for real screenshots */
.phone { width:min(300px,100%); border-radius:38px; background:var(--sign); padding:10px; box-shadow:0 30px 70px -20px rgba(14,18,24,.5); }
/* height:auto is load-bearing: without it the img's height="" attribute wins
   against the CSS width and vertically stretches the screenshot. */
.phone img { border-radius:30px; width:100%; height:auto; }
/* Each figure is a centered column: phone on top, caption chip directly under
   it (captions used to float off to the side; this pins them). */
.shots { display:flex; gap:36px; justify-content:center; flex-wrap:wrap; align-items:flex-start; }
/* Explicit width: the img's intrinsic 590px would otherwise inflate the
   figure's flex-basis and force wrapping into a single stacked column. */
.shots figure { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:300px; max-width:100%; margin:0; }
.shots .phone { width:100%; }
.shots figcaption { display:inline-flex; align-items:center; gap:8px; font:500 12px 'IBM Plex Mono'; color:var(--asphalt); margin-top:14px; padding:7px 14px; border:1px solid var(--hairline); border-radius:999px; background:#fff; }
.shots figcaption::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--lime-ink); }

/* prose (privacy/about) */
.prose { max-width:74ch; }
.prose h2 { font-size:22px; margin:30px 0 8px; }
.prose h3 { font:600 17px 'Barlow Condensed'; text-transform:uppercase; letter-spacing:.04em; margin:22px 0 6px; }
.prose p, .prose li { font-size:15px; color:#2c333b; }
.prose ul { margin:8px 0 8px 20px; }
.prose .updated { font:500 12px 'IBM Plex Mono'; color:var(--slate); margin-bottom:24px; }

/* footer */
footer { padding:38px 0 46px; font-size:13.5px; color:var(--slate); border-top:1px solid var(--hairline); margin-top:24px; }
footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; }
footer .fmark { font:600 18px 'Barlow Condensed'; letter-spacing:.06em; color:var(--asphalt); }
footer .fmark b { color:var(--lime-ink); }
footer h5 { font:500 11px 'IBM Plex Mono'; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:10px; }
footer a { display:block; color:#2c333b; text-decoration:none; padding:3px 0; }
footer a:hover { color:var(--asphalt); }
footer .legal { margin-top:26px; padding-top:14px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- responsive ---------- */
@media (max-width:860px) {
  section { padding:48px 0; }
  .twocol, .threecol { grid-template-columns:1fr; }
  .statgrid, .terms { grid-template-columns:1fr 1fr; }
  .route { grid-template-columns:1fr; gap:28px; }
  .route::before { display:none; }
  .sign { padding:20px 16px 14px; border-radius:14px; }
  .price { padding:12px; }
  .price .n { font-size:28px; }
  .row { font-size:12px; gap:8px; }
  footer .cols { grid-template-columns:1fr 1fr; }
}
/* ============================================================
   Motion system (site.js) - all of it disabled under
   prefers-reduced-motion at the bottom of this block.
   ============================================================ */

/* Glassy nav once scrolled */
.bar { transition:background .25s, box-shadow .25s, border-color .25s; }
.bar.scrolled { background:rgba(250,250,247,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 30px -18px rgba(20,24,29,.25); }

/* Scroll reveal (elements tagged .rv by site.js) - short + shallow so a fast
   scroller never catches content mid-pop. */
.rv { opacity:0; transform:translateY(12px); transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rvd,0ms); }
.rv.in { opacity:1; transform:none; }

/* Living ledger row lifecycle - rows collapse smoothly so nothing snaps */
@keyframes rowIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.row { overflow:hidden; max-height:64px; transition:max-height .6s ease, padding .6s ease, opacity .6s ease, transform .6s ease; }
.row.enter { animation:rowIn .55s cubic-bezier(.2,.7,.2,1); }
.row.leave { opacity:0; transform:translateY(6px); max-height:0; padding-top:0; padding-bottom:0; border-bottom-color:transparent; }
.st.flipping, .am.flipping { opacity:0; transform:translateY(-6px); transition:opacity .22s, transform .22s; }
.flipin { animation:flip2 .3s ease; }
.sign .head .live { display:inline-flex; align-items:center; gap:7px; }
.sign .head .live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(183,255,42,.5); } 50% { opacity:.55; box-shadow:0 0 0 6px rgba(183,255,42,0); } }

/* Phones: still on arrival (perpetual bobbing read as fidgety), reactive on
   hover - tilt toward the cursor with a deeper shadow. */
.shots .phone { transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.shots .phone:hover { transform:perspective(900px) rotateX(3deg) rotateY(-4deg) scale(1.025); box-shadow:0 44px 90px -24px rgba(14,18,24,.55); }

/* Marching route dashes ("how it works" connector) - slow drift, not a crawl */
.route::before { border-top:0; height:3px; background:repeating-linear-gradient(90deg, var(--hairline) 0 14px, transparent 14px 26px); animation:march 3.2s linear infinite; }
@keyframes march { to { background-position:26px 0; } }

/* CTA shine sweep */
.cta { position:relative; overflow:hidden; }
.cta::after { content:""; position:absolute; inset:0; transform:translateX(-130%) skewX(-18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:transform .6s ease; }
.cta.lime::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
.cta:hover::after { transform:translateX(130%) skewX(-18deg); }

/* Smooth FAQ expand (2027-era CSS; harmless where unsupported) */
.faq details::details-content { block-size:0; overflow:hidden; transition:block-size .35s ease, content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size:auto; }
.faq { interpolate-size:allow-keywords; }
.faq summary::after { transition:transform .3s ease; }
.faq details[open] summary::after { transform:rotate(45deg); content:"+"; }

@media (prefers-reduced-motion: reduce) {
  .row.flip .swap-out { visibility:hidden; animation:none; }
  .row.flip .swap-in { opacity:1; animation:none; }
  .cta, .cta:hover { transition:none; transform:none; }
  .cta::after { display:none; }
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; transition:none; }
  .shots .phone { animation:none; }
  .shots .phone:hover { transform:none; }
  .route::before { animation:none; }
  .sign .head .live::before { animation:none; }
  .bar { transition:none; }
  .faq details::details-content { transition:none; }
}