/**
 * FleetPair landing page.
 *
 * Rebuilt from a design-tool export, not copied from it. The mockup carried
 * every value as an inline style attribute, which is how a design tool writes
 * what it drew; it is not how a page should be maintained. The values below are
 * that design's, the structure is this file's.
 *
 * The tokens are the app's own, taken from angular-dsp-project/src/styles.css,
 * so the website and the product a customer signs into are the same blue and
 * the same typeface. **If a brand value moves, it moves in three places**: that
 * stylesheet, this one, and api-dsp-project/src/lib/brand.ts, which colours the
 * PDF reports. See the README.
 */

/* The variable face the app self-hosts, carried here as a file for the same
   reason it is carried there: one mechanism, no third-party request on first
   paint. From @fontsource-variable/plus-jakarta-sans 5.3.0, latin subset. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./assets/plus-jakarta-sans-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* The app's --primary and --primary-dark. The mockup used #0A66F5, which is
     close but not the same; a customer should not see one blue on the site and
     another in the product they use every day. */
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #e4eeff;
  --accent-wash: #f1f6ff;
  --accent-on-dark: #5b9dff;

  --ink: #0b1220;
  --body: #475569;
  --muted: #64748b;
  --faint: #94a3b8;

  --surface: #ffffff;
  --surface-sunken: #f7f9fc;
  --border: #e1e8f2;
  --border-light: #e8edf5;
  --border-strong: #d5ddea;

  --dark: #0b1220;
  --dark-raised: #131c30;
  --dark-border: #22304d;
  --dark-body: #a9b4c8;

  --shell: 1200px;
  --gutter: 32px;
  --radius: 20px;
  --radius-sm: 12px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { margin: 0; letter-spacing: -0.025em; font-weight: 800; }
p { margin: 0; }

img, svg { display: block; }

/* After the rule above, not before it. `[hidden]` is a user-agent style and
   `img, svg { display: block }` outranks it, so the play/pause button rendered
   both of its icons at once until this was added. */
[hidden] { display: none !important; }

/* Everything that scrolls to an anchor needs room under the sticky header, or
   the heading it lands on sits behind it. */
section[id] { scroll-margin-top: 84px; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
}

.section { padding: 96px var(--gutter); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.lede { font-size: 18px; line-height: 1.6; color: var(--body); }

.intro {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  /* 48px on every control that can be tapped. The page is read on phones in
     yards, and a 40px target is the difference between a tap and three. */
  min-height: 48px;
  padding: 0 28px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.btn--primary {
  color: #fff;
  background: var(--accent);
  border: none;
}
.btn--primary:hover { background: var(--accent-dark); }

.btn--ghost {
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover { border-color: var(--accent); }

.btn--sm { font-size: 15px; min-height: 44px; padding: 0 20px; border-radius: 10px; }

/* A visible ring for keyboard users. The mockup had none, and a landing page is
   the one page where a stranger is most likely to be tabbing through. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px var(--gutter);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
}

.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The padding is what takes the link past 44px. The mark is 34px tall and the
   link was exactly that, which is a target that misses on a phone. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  text-decoration: none;
  color: var(--ink);
}

.brand img { height: 34px; width: auto; }

/* The wordmark is set in the app's own face rather than the mockup's display
   font. Two typefaces for one name is a brand with two voices. */
.wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.wordmark span { color: var(--accent); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.nav-link {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
}
.nav-link:hover { color: var(--accent); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { padding: 72px var(--gutter) 40px; }

.hero .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.hero-copy {
  flex: 1 1 540px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-note { font-size: 14px; color: var(--muted); }

/* ── The rotating headline ─────────────────────────────────────────────── */

.rotator {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  width: 100%;
}

/**
 * Height is reserved on the block, not on the headline and the paragraph
 * separately, so the page does not jump as the slides change length.
 *
 * The mockup reserved it per element, and that put the slack between the
 * headline and the paragraph: at desk width it read as a gap somebody forgot
 * to close rather than as spacing. Reserved here instead, the slack falls under
 * the pair, where it is just the distance to the controls and invisible.
 *
 * The numbers are measured, not guessed: the tallest of the five slides comes
 * to 229px at 390 wide, 175px at 820 and 342px at 1440. Measure again if the
 * copy changes; over-reserving now costs nothing, under-reserving brings the
 * jump back.
 */
.rotator-text {
  flex: 1 1 0;
  min-width: 0;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  transition: opacity 0.35s ease;
}
.rotator-text[data-fading='true'] { opacity: 0; }

@media (min-width: 1000px) {
  .rotator-text { min-height: 350px; }
}

.rotator h1 {
  font-size: clamp(32px, 4.3vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.rotator h1 span { color: var(--accent); }

.rotator p { font-size: 18px; line-height: 1.6; color: var(--body); }

.rotator-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rotator-arrow:hover { border-color: var(--accent); }

.rotator-controls { display: flex; align-items: center; gap: 16px; }

.rotator-marks { display: flex; align-items: center; gap: 6px; }

/* The current slide is a longer bar rather than a different colour: it reads at
   a glance and does not depend on telling two blues apart.
   The button is 44px tall and transparent; the bar is drawn inside it. Drawing
   the bar as the button itself made the target six pixels high, which is a
   control nobody can hit on a phone and which measured as such. */
.rotator-mark {
  width: 10px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: width 0.25s ease;
}
.rotator-mark::after {
  content: '';
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.25s ease;
}
.rotator-mark[aria-current='true'] { width: 28px; }
.rotator-mark[aria-current='true']::after { background: var(--accent); }

/* ── The phone ─────────────────────────────────────────────────────────── */

.hero-device { flex: 1 1 360px; min-width: 0; }

.device-stage {
  background: var(--accent-wash);
  border-radius: 28px;
  padding: 40px 24px;
  display: flex;
  justify-content: center;
}

.device {
  width: 100%;
  max-width: 320px;
  background: var(--dark);
  border-radius: 44px;
  padding: 10px;
  /* The bezel has to clip the screenshot's square corners, or the picture
     pokes out of the rounded frame it is sitting in. */
  overflow: hidden;
}

/* A real capture at 390x844, so the aspect is a phone's and the frame around it
   is honest about what it is framing. `width` and `height` are on the element
   as well as here: they give the browser the ratio before the file arrives, so
   the hero does not reflow when it loads. */
.device-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
}

.screen-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.screen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pill-sample {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── Benefit strip ─────────────────────────────────────────────────────── */

.benefits { padding: 0 var(--gutter) 72px; }

.benefits .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.benefit {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.icon-tile {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-tile--lg { width: 52px; height: 52px; border-radius: 14px; }
.icon-tile--solid { background: var(--accent); }

/* ── Before / after ────────────────────────────────────────────────────── */

.compare {
  padding: 88px var(--gutter);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.compare .shell { display: flex; flex-direction: column; gap: 48px; }

.flow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flow--after { border: 2px solid var(--accent); }

.flow-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.flow--after .flow-label { color: var(--accent); }

.flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.flow-step {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  background: #eef2f8;
  color: #334155;
}
.flow--after .flow-step { background: var(--accent-soft); color: var(--accent-dark); }
.flow-step--end { background: var(--dark); color: #fff; }
.flow--after .flow-step--end { background: var(--dark); color: #fff; }

.flow-arrow { color: var(--faint); font-weight: 700; }
.flow--after .flow-arrow { color: var(--accent); }

/* ── Steps and cards ───────────────────────────────────────────────────── */

.grid { display: flex; flex-wrap: wrap; gap: 28px 24px; }
.grid--cards { gap: 24px; }

.step {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 3px solid var(--dark);
}
.step--last { border-top-color: var(--accent); }

.step-head { display: flex; align-items: center; gap: 14px; }
.step-number { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); }
.step h3 { font-size: 24px; letter-spacing: -0.015em; }
.step p { font-size: 16px; line-height: 1.6; color: var(--body); }

.card {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card h3 { font-size: 20px; }
.card p { font-size: 16px; line-height: 1.6; color: var(--body); }

.features { background: var(--surface-sunken); border-top: 1px solid var(--border-light); }
.features .shell, .how .shell, .tracking .shell {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ── Tracking ──────────────────────────────────────────────────────────── */

.tracking { background: var(--accent-wash); border-top: 1px solid var(--border); }

.tracking-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.tracking-cards { flex: 1 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; }

.tracking-card {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid #dce6f5;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tracking-card h3 { font-size: 18px; }
.tracking-card p { font-size: 15px; line-height: 1.6; color: var(--body); }

.board-wrap { flex: 1 1 400px; min-width: 0; display: flex; justify-content: center; }

.board {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid #dce6f5;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.board-stats { display: flex; gap: 10px; }
.board-stat {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface-sunken);
  border-radius: 12px;
  padding: 12px 14px;
}
.board-stat b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.board-stat span { font-size: 12px; font-weight: 600; color: var(--muted); }

.board-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-light);
}
.board-row b { display: block; font-size: 16px; font-weight: 800; }
.board-row small { font-size: 14px; color: var(--muted); }

.status {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.status--requested { border: 1.5px solid var(--accent); color: var(--accent-dark); }
.status--none { background: #eef2f8; color: #334155; }
.status--received { background: var(--accent-soft); color: var(--accent-dark); }
.status--shop { background: var(--dark); color: #fff; }

/* ── For shops ─────────────────────────────────────────────────────────── */

.shops { background: var(--dark); color: #fff; }
.shops .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.shops-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.shops-copy .eyebrow { color: var(--accent-on-dark); }
.shops-copy h2 span { color: var(--accent-on-dark); }
.shops-copy p { font-size: 18px; line-height: 1.6; color: var(--dark-body); max-width: 540px; }

.shops-list { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.shops-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--dark-raised);
  border: 1px solid var(--dark-border);
  font-size: 18px;
  font-weight: 700;
}

/* ── Pilot ─────────────────────────────────────────────────────────────── */

.pilot .shell { max-width: 1000px; }

.pilot-box {
  background: var(--accent-wash);
  border-radius: 32px;
  padding: clamp(32px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.pilot-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}

.field { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.field--short { flex: 1 1 200px; }
.field label { font-size: 14px; font-weight: 700; }

.field input {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid #c5d3ea;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-height: 48px;
}
.field input::placeholder { color: var(--faint); }

.pilot-note { font-size: 14px; color: var(--muted); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--dark);
  color: #fff;
  padding: 56px var(--gutter);
}
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-mark {
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
}
.footer-mark img { height: 28px; width: auto; }
.site-footer .wordmark span { color: var(--accent-on-dark); }
.footer-tagline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--dark-body);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  font-size: 14px;
  color: var(--dark-body);
}
/* Padded to a 44px target. They sit in a row rather than in a sentence, so the
   exemption WCAG gives links inside a block of text does not cover them. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--dark-body);
}
.footer-links a:hover { color: #fff; }

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .section, .compare { padding-top: 64px; padding-bottom: 64px; }
  .hero { padding-top: 48px; }
  .hero .shell, .shops .shell { gap: 40px; }

  /* The arrows go under the headline on a narrow screen. Beside it they left
     the h1 about 150px wide, which broke every line into two or three. */
  .rotator { flex-wrap: wrap; }
  .rotator-text { flex: 1 1 100%; order: -1; min-height: 240px; }

  /* The whole nav goes on a phone, the CTA included.
     The links went first: four of them wrapping under a logo is a menu nobody
     reads, and the page is one scroll here anyway. The button followed once it
     was measured, because it does not fit beside the logo at 390px and wrapped
     to a second row, which made a sticky header 135px tall. That is a sixth of
     the screen held permanently by a button that is also the first thing in the
     hero and the last thing on the page. */
  .site-nav { display: none; }
  .site-header { padding: 12px var(--gutter); }
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rotator-text { transition: none; }
  .rotator-mark { transition: none; }
}