/* Isolated product demo; the surrounding homepage retains its existing styles. */
.fleet-demo { scroll-margin-top: 100px; padding: 88px max(24px, calc((100% - 1280px) / 2)); background: #fff; color: #17212c; }
.fleet-demo-heading h2 { max-width: 950px; margin: 0 0 18px; font-size: 46px; line-height: 1.14; letter-spacing: 0; }
.fleet-demo-heading > p:last-child { color: #586573; font-size: 17px; line-height: 1.6; margin: 0; }
.fleet-demo-tabs { display: flex; gap: 28px; border-bottom: 1px solid #d9dfe5; margin: 32px 0 28px; }
.fleet-demo-tabs button { min-height: 54px; padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #5c6874; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.fleet-demo-tabs button[aria-selected="true"] { border-bottom-color: #215df0; color: #1652dc; }
.fleet-demo button:focus-visible, .fleet-demo input:focus-visible { outline: 3px solid #215df0; outline-offset: 3px; }
.fleet-demo-body { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(240px, 1fr); gap: 44px; padding-bottom: 28px; border-bottom: 1px solid #d9dfe5; align-items: start; }
.fleet-demo-visual { min-width: 0; }
.fleet-demo-map { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid #dce1e5; border-radius: 6px; background: #edf0ed; }
.fleet-demo-basemap, .fleet-demo-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.fleet-demo-basemap { object-fit: fill; }
.fleet-demo-route { pointer-events: none; }
.fleet-demo-route path { fill: none; stroke: #245ef0; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fleet-demo-route .demo-route-base { stroke: #b3c7ee; stroke-width: 4; }
.demo-vehicle { position: absolute; top: 0; left: 0; width: 22px; height: 40px; pointer-events: none; filter: drop-shadow(0 2px 2px #0004); }
.demo-vehicle img { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-parked { position: absolute; width: 13px; height: 21px; border-radius: 4px; border: 2px solid #fff; background: #2861cd; box-shadow: 0 1px 4px #0004; }
.demo-parked::after { content: ""; position: absolute; top: 3px; left: 2px; right: 2px; height: 4px; border-radius: 1px; background: #d9f2ff; }
.demo-parked-one { left: 40%; top: 26%; }
.demo-parked-two { left: 60%; top: 87%; }
.demo-alert { position: absolute; top: 12px; right: 12px; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 24px); padding: 12px 14px; background: #fff; border: 1px solid #ecd7c3; border-radius: 6px; box-shadow: 0 3px 12px #24314212; }
.demo-alert[hidden], .fleet-demo-copy article[hidden] { display: none; }
.demo-alert strong, .demo-alert small { display: block; }
.demo-alert strong { color: #943f0c; font-size: 13px; }
.demo-alert small { color: #64707d; margin-top: 4px; font-size: 11px; }
.demo-alert-dot, .demo-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.demo-alert-dot, .demo-dot-alert { background: #ca631d; }
.demo-dot-moving { background: #24a548; }
.demo-dot-parked { background: #245ef0; }
.demo-playback { height: 48px; display: flex; gap: 12px; align-items: center; }
/* Reserve the timeline row across tabs so switching never shifts the map or text. */
.demo-playback[hidden] { display: flex; visibility: hidden; }
.demo-playback button { width: 36px; height: 36px; border: 1px solid #d6e0ec; border-radius: 4px; color: #1954d9; background: #f3f7ff; cursor: pointer; }
.demo-playback input { width: 100%; min-width: 0; accent-color: #245ef0; cursor: pointer; }
.demo-playback output { min-width: 42px; font-size: 12px; font-variant-numeric: tabular-nums; color: #596778; }
.demo-visual-footer { min-height: 24px; display: flex; justify-content: space-between; gap: 12px; align-items: center; color: #69727a; font-size: 11px; }
.demo-visual-footer button { background: transparent; border: 0; padding: 4px 0; color: #31538e; font: inherit; cursor: pointer; }
.fleet-demo-copy { padding-top: 32px; min-width: 0; }
.fleet-demo-copy h3 { font-size: 27px; line-height: 1.23; margin: 0 0 18px; color: #17212c; }
.fleet-demo-copy p { color: #5b6571; font-size: 15px; line-height: 1.7; }
.demo-legend { display: grid; gap: 16px; margin-top: 28px; font-size: 13px; }
.demo-legend span { display: flex; gap: 10px; align-items: center; }
@media (max-width: 1000px) {
  .fleet-demo-body { grid-template-columns: minmax(0, 1.8fr) minmax(200px, 1fr); gap: 28px; }
  .fleet-demo-heading h2 { font-size: 38px; }
  .fleet-demo-copy h3 { font-size: 24px; }
}
@media (max-width: 700px) {
  .fleet-demo { padding: 56px 18px; }
  .fleet-demo-heading h2 { font-size: 32px; max-width: 420px; }
  .fleet-demo-heading > p:last-child { font-size: 15px; }
  .fleet-demo-tabs { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0; margin-top: 24px; }
  .fleet-demo-tabs button { font-size: 12px; padding: 12px 4px; }
  .fleet-demo-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fleet-demo-map { aspect-ratio: 6 / 5; }
  .fleet-demo-copy { padding-top: 0; min-height: 210px; }
  .fleet-demo-copy h3 { max-width: 330px; }
  .demo-vehicle { width: 18px; height: 32px; }
  .demo-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
}